/* ===================================== services.css — CarlLeger.github.io Services page styles (page-scoped) Works with: /assets/css/home.css Goal: no layout fights (sticky header), no mystery top gap. ===================================== */ /* Page scoping: add */ .page-services{ /* If home.css already sets body background, this can be subtle. Keep it consistent but allow Services to have its own tone. */ background: radial-gradient(900px 600px at 15% 10%, rgba(56,189,248,.18), transparent 55%), radial-gradient(900px 600px at 85% 20%, rgba(167,139,250,.16), transparent 55%), linear-gradient(180deg, var(--bg-1, #0b1220), var(--bg-2, #070d17)); min-height: 100vh; } /* ✅ Important: header in home.css is position:sticky, not fixed. So we do NOT add padding-top to the body. */ .page-services{ padding-top: 0 !important; } /* Optional: smoother typography on this page */ .page-services{ line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Skip link (if you use .skip on services page) */ .page-services .skip{ position:absolute; left:-999px; top:10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); padding:10px 12px; border-radius: 12px; color: var(--text, #e7ecff); z-index: 9999; } .page-services .skip:focus{ left: 12px; } /* Layout container */ .page-services .wrap{ max-width: 980px; margin: 0 auto; padding: 44px 22px 80px; } /* Card wrapper for Services content */ .page-services .card{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.10); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; } /* Soft top glow */ .page-services .card::before{ content:""; position:absolute; inset:-2px -2px auto -2px; height:160px; background: radial-gradient(700px 240px at 20% 0%, rgba(56,189,248,.18), transparent 60%), radial-gradient(700px 240px at 80% 0%, rgba(167,139,250,.14), transparent 60%); pointer-events:none; } /* Hero */ .page-services .hero{ position: relative; z-index: 1; padding: 18px 26px 12px; } @media (max-width: 900px){ .page-services .hero{ padding: 16px 18px 12px; } } /* Kicker / title / subtitle */ .page-services .kicker{ color: rgba(168,179,214,.95); font-size: 13px; margin: 10px 0 0; display:flex; gap:10px; align-items:center; } .page-services .title{ font-size: 42px; line-height: 1.06; margin: 10px 0 10px; letter-spacing: -0.02em; } .page-services .subtitle{ margin: 0; color: rgba(168,179,214,.95); font-size: 16px; line-height: 1.6; max-width: 82ch; } /* CTA row */ .page-services .ctaRow{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 16px; } /* Buttons on services page only (keeps home.css buttons untouched) */ .page-services .btn{ display:inline-flex; align-items:center; gap:10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: rgba(231,236,255,.95); font-weight: 850; font-size: 14px; letter-spacing: .12px; transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease, box-shadow .12s ease, filter .12s ease; text-decoration:none; } .page-services .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); opacity: .98; text-decoration:none; box-shadow: 0 16px 48px rgba(0,0,0,.28); } .page-services .btn.primary{ background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(167,139,250,.85)); border: 1px solid rgba(255,255,255,.20); color:#06101d; font-weight: 950; } .page-services .btn.primary i{ color:#06101d; } /* ✅ Better focus */ .page-services a:focus-visible, .page-services button:focus-visible{ outline: 3px solid rgba(56,189,248,.55); outline-offset: 3px; border-radius: 12px; } /* TOC chips */ .page-services .toc{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; } .page-services .toc a{ display:inline-flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(231,236,255,.92); font-size: 13px; line-height: 1.2; text-decoration:none; transition: background .12s ease, border-color .12s ease, transform .12s ease; } .page-services .toc a i{ color: rgba(56,189,248,.95); } .page-services .toc a:hover{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); transform: translateY(-1px); } /* Services grid */ .page-services .grid{ position: relative; z-index: 1; display:grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 26px 14px; } @media (max-width: 900px){ .page-services .grid{ grid-template-columns: 1fr; padding: 16px 18px 10px; } .page-services .title{ font-size: 36px; } } /* Service cards */ .page-services .service{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 18px; padding: 16px; position:relative; overflow:hidden; } /* Subtle inner highlight */ .page-services .service::before{ content:""; position:absolute; inset:-2px; border-radius: 20px; background: radial-gradient(380px 220px at 12% 0%, rgba(56,189,248,.10), transparent 60%), radial-gradient(380px 220px at 88% 0%, rgba(167,139,250,.08), transparent 60%); opacity:.55; pointer-events:none; } .page-services .service > *{ position:relative; z-index:1; } .page-services .service h2{ margin:0 0 8px; font-size: 16px; color: rgba(231,236,255,.98); display:flex; align-items:center; gap:10px; } .page-services .service h2 i{ color: rgba(56,189,248,.95); } .page-services .service p{ margin:0; color: rgba(168,179,214,.95); font-size: 14px; line-height: 1.65; } /* Best-for box */ .page-services .bestFor{ margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(231,236,255,.92); font-size: 13px; line-height: 1.55; } .page-services .bestFor b{ color: rgba(231,236,255,.98); } /* Tags row */ .page-services .mini{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:10px; color: rgba(168,179,214,.9); font-size: 13px; } .page-services .tag{ display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .page-services .tag i{ color: rgba(167,139,250,.92); } /* "How I work" section */ .page-services .work{ position: relative; z-index: 1; padding: 0 26px 22px; } @media (max-width:900px){ .page-services .work{ padding: 0 18px 18px; } } .page-services .workCard{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 18px; padding: 16px; } .page-services .workTitle{ margin:0 0 10px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #dbe4ff; display:flex; align-items:center; gap:10px; } .page-services .workTitle i{ color: rgba(56,189,248,.95); } .page-services .workList{ margin: 0; padding-left: 18px; color: rgba(168,179,214,.95); } .page-services .workList li{ margin: 10px 0; } .page-services .workNote{ margin: 10px 0 0; color: rgba(168,179,214,.90); font-size: 13px; } /* FAQ */ .page-services .faqWrap{ position: relative; z-index: 1; padding: 0 26px 26px; } @media (max-width:900px){ .page-services .faqWrap{ padding: 0 18px 18px; } } .page-services details{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 16px; padding: 14px; margin-top: 12px; } .page-services summary{ cursor:pointer; list-style:none; font-weight: 950; color: rgba(231,236,255,.98); display:flex; align-items:center; gap:10px; } .page-services summary::-webkit-details-marker{ display:none; } .page-services details p{ margin: 10px 0 0; color: rgba(168,179,214,.95); font-size: 14px; line-height: 1.65; } /* Accessibility helper */ .page-services .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Anchor jump comfort (so sticky header doesn't cover sections) */ .page-services :where(#ecommerce,#local,#growth,#faq,#services-list,#svc-audit,#svc-checkout,#svc-opt,#svc-cwv,#svc-local,#svc-ecom-build,#svc-growth){ scroll-margin-top: 96px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .page-services *{ transition: none !important; } }