/* ==================================================================== SERVICES PAGE v2 — layout-only additions. Typography, colours, buttons and card recipes come from root.css and the shared component library (homepage.css). No new tokens: every colour below is an existing token or an existing gradient stop already used in homepage.css. ==================================================================== */ /* root.css puts transform:translateZ(0) on as a GPU hint, but a transformed ancestor breaks position:fixed — which GSAP ScrollTrigger pinning depends on. Neutralised for this page only. */ body{transform:none} /* root.css sets html{scroll-behavior:smooth}, which reproducibly corrupts GSAP ScrollTrigger measurements (trigger positions come out offset by the scroll distance — worst after reload with restored scroll). This file loads on exactly the pages that run ScrollTrigger (homepage + services), so smooth CSS scrolling is disabled here and in-page anchor clicks are smooth-scrolled via JS instead. */ html{scroll-behavior:auto} /* --- Shared section header (same recipe as homepage headers) --- */ .sv-header{text-align:center;margin-bottom:56px;padding:0 var(--gutter)} .sv-header h2{font-family:"Playfair Display",Georgia,serif;font-size:2.4rem;font-weight:600;color:var(--text-heading);margin-bottom:14px;letter-spacing:.02em} .sv-subtitle{font-size:1.15rem;color:var(--muted);line-height:1.6;margin:0 auto;max-width:680px} /* ==================================================================== 0. HERO — fills the viewport; CTA is the last thing above the fold ==================================================================== */ .hero--editorial.hero--services{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:90px 0 70px} .hero--services .container{width:100%} .hero--services .ed-sub{margin:44px 0 18px} .sv-hero-note{font-size:.9rem;color:var(--muted);margin:0 0 28px;letter-spacing:.02em} @media (max-width:768px){ .hero--editorial.hero--services{margin-bottom:0} /* The inline critical CSS sizes the ring in desktop viewport units (min 620px wide) and offsets it to 45%/75% — on phones that lands it far off the words. Size it to the .ed-ring span it decorates instead. */ .hero--services .ed-circle{left:50%;top:52%;width:calc(100% + 34px);height:auto;aspect-ratio:360/160;transform:translate(-50%,-50%)} .hero--services .ed-circle path{transform:scaleX(1.1)} .hero--services .ed-stroke{stroke-width:4.5} } @media (max-width:480px){ .hero--services .ed-link{margin-bottom:0} } /* ==================================================================== 1. PHASES — GSAP-pinned stacking panels (pinning added by services.js on desktop, motion-safe only; the default layout below is the mobile / reduced-motion / no-JS fallback: a plain vertical stack of full-colour panels) ==================================================================== */ .sv-phases{background:linear-gradient(180deg,#fff 0,#f8f9fb 100%);padding:96px 0 0;position:relative} .sv-stack{max-width:960px;margin:0 auto;padding:0 var(--gutter)} /* Added by services.js only while GSAP pinning is active: scroll room to read the last card before the next section covers the stack */ .sv-stack--pinned{padding-bottom:45vh} .sv-panel{position:relative;overflow:hidden;border-radius:24px;padding:clamp(28px,4vw,56px);min-height:480px;height:62vh;max-height:640px;margin-bottom:40px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 18px 50px rgba(16,17,20,.16);transform-origin:top center;will-change:transform} .sv-panel:last-child{margin-bottom:0} .sv-panel-num{position:absolute;top:clamp(10px,2.5vw,28px);right:clamp(18px,3.5vw,44px);font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:clamp(96px,14vw,170px);line-height:1;letter-spacing:-.02em;pointer-events:none;user-select:none} .sv-panel-copy{position:relative;z-index:1;max-width:58ch} .sv-panel-kicker{display:inline-block;font-family:Manrope,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:14px;margin-bottom:18px} .sv-panel h3{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.9rem,3.2vw,2.75rem);font-weight:700;line-height:1.18;letter-spacing:.01em;margin:0 0 14px} .sv-panel p{font-size:1.12rem;line-height:1.7;margin:0} /* Four tones from the existing palette */ .sv-panel--1{background:linear-gradient(150deg,#151a25 0,#101114 100%)} .sv-panel--1 h3{color:#fff} .sv-panel--1 p{color:var(--ef-text)} .sv-panel--1 .sv-panel-num{color:rgba(255,255,255,.12)} .sv-panel--1 .sv-panel-kicker{color:#fff;background:rgba(255,255,255,.12)} .sv-panel--2{background:linear-gradient(135deg,var(--primary-blue) 0,var(--brand-2) 100%)} .sv-panel--2 h3{color:#fff} .sv-panel--2 p{color:rgba(255,255,255,.88)} .sv-panel--2 .sv-panel-num{color:rgba(255,255,255,.16)} .sv-panel--2 .sv-panel-kicker{color:#fff;background:rgba(255,255,255,.16)} .sv-panel--3{background:linear-gradient(135deg,var(--brand-1) 0,#13c49f 100%)} .sv-panel--3 h3{color:var(--text-heading)} .sv-panel--3 p{color:rgba(21,26,37,.78)} .sv-panel--3 .sv-panel-num{color:rgba(21,26,37,.14)} .sv-panel--3 .sv-panel-kicker{color:var(--text-heading);background:rgba(21,26,37,.1)} .sv-panel--4{background:linear-gradient(135deg,var(--accent-red) 0,var(--ef-accent) 100%)} .sv-panel--4 h3{color:#fff} .sv-panel--4 p{color:rgba(255,255,255,.9)} .sv-panel--4 .sv-panel-num{color:rgba(255,255,255,.16)} .sv-panel--4 .sv-panel-kicker{color:#fff;background:rgba(255,255,255,.16)} /* Mobile: same pinned-stack effect, phone-sized panels (services.js pins these too; without JS or with reduced motion they simply read as a vertical colour stack) */ @media (max-width:768px){ .sv-phases{padding:48px 0 0} .sv-header{margin-bottom:40px} .sv-header h2{font-size:1.65rem;margin-bottom:12px} .sv-subtitle{font-size:1rem} .sv-panel{height:58vh;height:58svh;min-height:380px;max-height:560px;padding:28px 22px 32px;margin-bottom:24px;border-radius:18px} .sv-panel-num{font-size:88px;top:14px;right:18px} .sv-panel h3{font-size:1.55rem} .sv-panel p{font-size:1rem} } /* Whatever section directly follows the pinned stack must paint OVER the position:fixed panels while they're covered (the role .sv-run, then .deliverables-section, used to play). Since the 2026-07-13 reorder that neighbour is the Why One Team founder-note: it already has position:relative and an opaque full-width background, so it only needs the stacking level. */ .sv-phases + .founder-note{z-index:2} /* ==================================================================== 1b. WHAT WE DO — expandable service cards (section 2 since the 2026-07-13 reorder; #what-we-do is the landing target for the homepage "See what we do" CTA, hence the scroll margin for the 70px sticky nav). Click-to-expand accordion in the style of Skiper UI's skiper23, reimplemented independently with a pure CSS grid-template-rows transition (no Skiper source; wired up in services.js). Card recipe = the existing phase-card language: white card, --rule border, 16px radius, the same blue-tinted shadow, and the anchor card reuses the phase-card--anchor gradient + blue top border. No new tokens. ==================================================================== */ .sv-services{padding:72px 0 24px;scroll-margin-top:80px} .sv-services .sv-header{margin-bottom:40px} .sv-acc{max-width:880px;margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:14px} .sv-acc-card{background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 4px 16px rgba(11,77,255,.06);overflow:hidden;transition:border-color .3s,box-shadow .3s} .sv-acc-card:hover{border-color:var(--brand-2);box-shadow:0 8px 24px rgba(11,77,255,.12)} .sv-acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 24px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit} .sv-acc-title{font-family:Manrope,sans-serif;font-size:1.2rem;font-weight:700;color:var(--text-heading);line-height:1.3} .sv-acc-title-note{font-weight:600;font-size:.95rem;color:var(--muted)} /* plus that becomes a cross when open */ .sv-acc-icon{position:relative;flex-shrink:0;width:22px;height:22px;transition:transform .35s var(--e-out)} .sv-acc-icon::before,.sv-acc-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--primary-blue);border-radius:2px} .sv-acc-icon::before{width:14px;height:2px} .sv-acc-icon::after{width:2px;height:14px} .sv-acc-card.is-open .sv-acc-icon{transform:rotate(45deg)} /* expand/collapse: grid row 0fr -> 1fr */ .sv-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e-out)} .sv-acc-card.is-open .sv-acc-body{grid-template-rows:1fr} .sv-acc-inner{overflow:hidden;min-height:0} .sv-acc-content{padding:0 24px 22px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--e-out),transform .35s var(--e-out)} .sv-acc-card.is-open .sv-acc-content{opacity:1;transform:none} .sv-acc-content p{font-size:1rem;color:var(--text-muted);line-height:1.7;margin:0 0 1rem;max-width:64ch} .sv-acc-content .phase-tag{margin-bottom:1rem} .sv-acc-content .phase-deliverables{margin:0 0 1.25rem} .sv-acc-cta{margin:4px 0 0;font-size:15px} /* anchor card: the existing phase-card--anchor recipe */ .sv-acc-card--anchor{background:linear-gradient(135deg,#fff 0,#f4f8ff 100%);border-top:3px solid var(--primary-blue)} .sv-acc-card--anchor .phase-tag{background:linear-gradient(135deg,var(--primary-blue) 0,#35a4ff 100%)} .sv-acc-card--anchor .phase-deliverables li::before{color:var(--primary-blue);background:rgba(11,77,255,.1)} /* two columns keep the expanded anchor card short of dominating the section (the phases below must stay in easy reach) */ .sv-acc-card--anchor .phase-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} .sv-acc-card--anchor .phase-deliverables li{margin-bottom:0} @media (max-width:768px){ .sv-services{padding:64px 0 8px} .sv-acc-card--anchor .phase-deliverables{grid-template-columns:1fr} .sv-acc-head{padding:15px 18px} .sv-acc-title{font-size:1.05rem} .sv-acc-content{padding:0 18px 18px} /* narrow mobile: plain accordion, no layout animation (brief fallback) */ .sv-acc-body,.sv-acc-content,.sv-acc-icon{transition:none} } @media (max-width:480px){.sv-acc-cta{margin-bottom:0}} /* reduced motion: same content, no layout animation */ @media (prefers-reduced-motion:reduce){ .sv-acc-body,.sv-acc-content,.sv-acc-icon,.sv-acc-card{transition:none} } /* ==================================================================== 3. FINAL CTA — word-reveal spans (wrapped at runtime by services.js, motion-safe only; without JS/GSAP the text stays plain). Belt and braces: reduced motion forces the words fully visible even if a client toggles the OS setting after the wrap ran. ==================================================================== */ .sv-cta-reveal .sv-word{display:inline-block;will-change:opacity,transform} @media (prefers-reduced-motion:reduce){ .sv-cta-reveal .sv-word{opacity:1!important;transform:none!important} } /* ==================================================================== 2. WHAT WE RUN — split layout: editorial copy + bounded pill box. The static pill cluster below is the real content; services.js swaps it to physics mode (motion-safe only). ==================================================================== */ .sv-run{background:#fff;position:relative;z-index:2;padding:110px 0 96px} .sv-split{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:45fr 55fr;gap:clamp(32px,5vw,60px);align-items:center} .sv-split-copy h2{text-align:left;margin-bottom:16px} .sv-split-copy .sv-subtitle{margin:0;max-width:46ch} /* The bounded box */ .sv-pit{position:relative;height:480px;border:1px solid var(--rule);border-radius:24px;background:linear-gradient(180deg,#fff 0,#f8f9fb 100%);overflow:hidden} .sv-pit.sv-physics-on{cursor:grab} .sv-pit.sv-physics-on:active{cursor:grabbing} /* Static pills (default: mobile, reduced motion, no JS) */ .sv-pills{list-style:none;margin:0;padding:28px;height:100%;display:flex;flex-wrap:wrap;gap:14px;align-items:center;align-content:center;justify-content:center} .sv-pill{margin:0;display:inline-flex;align-items:center;padding:18px 34px;border-radius:999px;font-family:Manrope,sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;box-shadow:0 8px 20px rgba(11,77,255,.1)} .sv-pill--paid{background:linear-gradient(135deg,var(--primary-blue) 0,#0940d9 100%);color:#fff} .sv-pill--seo{background:linear-gradient(135deg,var(--brand-1) 0,#13c49f 100%);color:var(--text-heading)} .sv-pill--social{background:linear-gradient(135deg,var(--brand-2) 0,#2a8ce6 100%);color:#fff} .sv-pill--web{background:var(--text-heading);color:#fff} .sv-pill--influencer{background:linear-gradient(135deg,var(--accent-red) 0,var(--ef-accent) 100%);color:#fff} /* Physics mode: services.js positions each pill with transforms */ .sv-pit.sv-physics-on .sv-pills{display:block;padding:0} .sv-pit.sv-physics-on .sv-pill{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;user-select:none} @media (max-width:1024px){ .sv-split{grid-template-columns:1fr;gap:36px} .sv-pit{height:420px} } @media (max-width:768px){ .sv-run{padding:56px 0} .sv-split-copy h2{font-size:1.65rem} .sv-pit{height:360px;border-radius:18px} .sv-pill{padding:14px 26px;font-size:1.02rem} }