/* ========================================================= Varfolomiiev — design tokens ========================================================= */ :root{ --bg:#0F0F0F; --surface:#101A35; --surface-2:#091F2E; --surface-3:#13224E; --ink:#FFFFFF; --ink-muted:#B9B9B9; --ink-faint:#7A7E86; --accent:#0055FE; --accent-hover:#1B62EE; --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.06); --font-body:'Inter',system-ui,-apple-system,sans-serif; --font-display:'Syne',var(--font-body); --font-italic:'Bodoni Moda',Georgia,serif; --font-kanji:'Zen Antique',serif; --container:1160px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px; --header-h:76px; } :where(*,*::before,*::after){box-sizing:border-box} :where(html){-webkit-text-size-adjust:100%} :where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0} :where(ul,ol){list-style:none} :where(img,svg){display:block;max-width:100%} :where(a){color:inherit;text-decoration:none} :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; overflow-x:hidden; } em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--accent-hover)} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:100} .skip-link:focus{left:0} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:3px solid var(--accent-hover); outline-offset:3px; border-radius:4px; } .sec-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,44px); letter-spacing:-.01em; text-align:center; margin-bottom:48px; } /* ========================================================= Buttons ========================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-body);font-weight:600;font-size:15px; padding:14px 26px;border-radius:var(--radius-pill); transition:background-color .2s ease,border-color .2s ease,transform .2s ease; white-space:nowrap; } .btn--primary{background:var(--accent);color:#fff} .btn--primary:hover{background:var(--accent-hover)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--border)} .btn--ghost:hover{border-color:var(--accent-hover)} .btn--block{width:100%} @media (prefers-reduced-motion:reduce){.btn{transition:none}} .cbtn{ width:44px;height:44px;border-radius:var(--radius-pill); display:grid;place-items:center;border:1px solid var(--border); transition:border-color .2s ease,background-color .2s ease; } .cbtn:hover{border-color:var(--accent-hover);background:rgba(0,85,254,.12)} .cbtn--round{width:40px;height:40px} /* ========================================================= Header ========================================================= */ .nav{ position:sticky;top:16px;z-index:50;margin:0 auto; max-width:900px;width:calc(100% - 32px); display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 14px 10px 20px; background:rgba(15,15,15,.72); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--border);border-radius:var(--radius-pill); transition:background-color .25s ease,border-color .25s ease; } .nav--scrolled{background:rgba(15,15,15,.92);border-color:var(--border)} .nav__logo{flex:0 0 auto;display:flex;align-items:center} .nav__mark{ width:36px;height:36px;border-radius:50%;background:var(--accent); display:grid;place-items:center;font-family:var(--font-display);font-weight:800; } .nav__links{flex:1 1 auto;display:flex;justify-content:center} .nav__list{display:flex;align-items:center;gap:26px} .nav__list a{font-size:14px;font-weight:500;color:var(--ink-muted);min-height:44px;display:flex;align-items:center;transition:color .2s ease} .nav__list a:hover{color:var(--ink)} .nav__cta{flex:0 0 auto;padding:11px 20px;font-size:14px} @media (max-width:767px){ .nav{top:10px;width:calc(100% - 20px);padding:8px 8px 8px 14px} .nav__links{display:none} } /* ========================================================= Hero ========================================================= */ .hero{ position:relative; min-height:88vh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:140px 20px 80px;overflow:hidden; } .hero__wordmark{ font-family:var(--font-display);font-weight:800; font-size:clamp(56px,11vw,168px); line-height:.92;letter-spacing:-.02em; color:rgba(255,255,255,.14); text-transform:uppercase; display:flex;gap:.28em; } .hero__portrait{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(46vw,420px);aspect-ratio:3/4;object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 40px 90px rgba(0,0,0,.55); z-index:2; } .hero__tag{ margin-top:28px;font-family:var(--font-body);font-weight:600;font-size:14px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted); } .hero__lede{ margin-top:18px;max-width:56ch;color:var(--ink-muted);font-size:16px;line-height:1.7; } @media (max-width:767px){ .hero{min-height:70vh;padding:110px 20px 56px} .hero__portrait{width:min(70vw,300px)} } /* ========================================================= Services ========================================================= */ .services{padding:80px 20px;max-width:var(--container);margin-inline:auto} .services__stack{display:flex;flex-direction:column;gap:24px;max-width:760px;margin-inline:auto} .scard{ position:relative;overflow:hidden; background:linear-gradient(160deg,#13224E,#101A35);color:#F5F3EF; border:1px solid rgba(120,150,255,.14);border-radius:var(--radius-lg); padding:36px 40px; } .scard__num{ position:absolute;right:28px;top:14px; font-family:var(--font-display);font-weight:800;font-size:88px; color:rgba(255,255,255,.06);line-height:1;pointer-events:none; } .scard__kanji{ position:absolute;left:22px;top:14px; font-family:var(--font-kanji);font-size:20px;color:rgba(255,255,255,.10); pointer-events:none; } .scard__title{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin-top:20px} .scard__focus{margin-top:8px;font-weight:600;font-size:14px;color:var(--accent-hover)} .scard__body{margin-top:14px;color:rgba(198,210,240,.62);font-size:15px;line-height:1.7;max-width:60ch} @media (max-width:767px){.scard{padding:28px 24px}.scard__num{font-size:64px}} /* ========================================================= Work carousel ========================================================= */ .work{padding:80px 20px;max-width:var(--container);margin-inline:auto} .work__viewport{overflow:hidden;border-radius:var(--radius-lg)} .work__track{ display:flex;gap:0; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none; } .work__track::-webkit-scrollbar{display:none} .case{flex:0 0 100%;scroll-snap-align:start;position:relative} .case__link{display:block;position:relative} .case__img{width:100%;aspect-ratio:16/9;object-fit:cover} .case__meta{ position:absolute;left:0;bottom:0;right:0;padding:28px 32px; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 70%); } .case__title{font-family:var(--font-display);font-weight:700;font-size:22px} .case__desc{margin-top:6px;color:var(--ink-muted);font-size:14px;max-width:52ch} .work__nav{display:flex;justify-content:center;gap:12px;margin-top:20px} .work--archive{padding-top:150px} .work__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .work__grid .case{border-radius:var(--radius-md);overflow:hidden} .work__grid .case__img{aspect-ratio:4/3} @media (max-width:900px){.work__grid{grid-template-columns:1fr}} /* ========================================================= Pricing ========================================================= */ .pricing{padding:80px 20px;max-width:var(--container);margin-inline:auto} .tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px} .tier{ border-radius:var(--radius-lg);padding:36px;border:1px solid var(--border); background:var(--surface);display:flex;flex-direction:column; } .tier--elevate{background:transparent} .tier__head{display:flex;align-items:center;justify-content:space-between;gap:12px} .tier__name{font-family:var(--font-display);font-weight:700;font-size:26px} .tier__badge{ font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--accent);color:#fff;padding:6px 12px;border-radius:var(--radius-pill); } .tier__for{margin-top:10px;color:var(--ink-muted);font-size:14px} .tier__scope{margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:19px} .tier__body{margin-top:10px;color:var(--ink-muted);font-size:14px;line-height:1.7} .tier__body + .btn{margin-top:22px} .tier__label{margin-top:26px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)} .tier__list{margin-top:14px;display:flex;flex-direction:column;gap:12px} .tier__list li{position:relative;padding-left:26px;font-size:14px;color:var(--ink-muted);line-height:1.5} .tier__list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--accent-hover);font-weight:700} .tier__note{margin-top:18px;font-size:12px;color:var(--ink-faint);line-height:1.6} @media (max-width:900px){.tiers{grid-template-columns:1fr}} /* ========================================================= Testimonials ========================================================= */ .quotes{padding:80px 20px;max-width:var(--container);margin-inline:auto} .quotes__viewport{overflow:hidden} .quotes__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .quotes__track::-webkit-scrollbar{display:none} .quote{ flex:0 0 100%;scroll-snap-align:start;position:relative; background:linear-gradient(160deg,#13224E,#101A35);color:#F5F3EF; border:1px solid rgba(120,150,255,.14);border-radius:var(--radius-lg); padding:44px 52px;max-width:820px;margin-inline:auto; } .quote blockquote{font-size:17px;line-height:1.75;color:var(--ink)} .quote blockquote b,.quote blockquote strong{color:var(--ink)} .quote figcaption{margin-top:22px;font-family:var(--font-display);font-weight:700;font-size:14px;color:rgba(198,210,240,.62)} .quote__mark{ position:absolute;right:36px;top:18px;font-family:var(--font-italic);font-style:italic; font-size:64px;color:rgba(255,255,255,.08);pointer-events:none; } .quotes__ui{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:24px} .quotes__dots{display:flex;gap:8px} .qdot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background-color .2s ease,transform .2s ease} .qdot[aria-current="true"]{background:var(--accent-hover);transform:scale(1.3)} .quotes__arrows{display:flex;gap:10px} /* ========================================================= FAQ ========================================================= */ .faq{padding:80px 20px;max-width:760px;margin-inline:auto} .faq__list{display:flex;flex-direction:column;gap:12px} .faq__item{ border:1px solid var(--border);border-radius:var(--radius-md); background:var(--surface);padding:6px 22px; } .faq__q{ display:flex;align-items:center;gap:14px; padding:18px 0;cursor:pointer;list-style:none; font-family:var(--font-display);font-weight:700;font-size:16px; } .faq__q::-webkit-details-marker{display:none} .faq__icon{ flex:0 0 22px;height:22px;border-radius:6px;background:var(--accent); position:relative; } .faq__icon::before,.faq__icon::after{ content:'';position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%); } .faq__icon::before{width:10px;height:2px} .faq__icon::after{width:2px;height:10px;transition:opacity .15s ease} .faq__item[open] .faq__icon::after{opacity:0} .faq__a{padding:0 0 20px 36px;color:var(--ink-muted);font-size:14px;line-height:1.75} /* ========================================================= Closing CTA ========================================================= */ .cta{padding:0 20px 100px;max-width:var(--container);margin-inline:auto} .cta__box{ background:linear-gradient(160deg,#13224E,#101A35);color:#F5F3EF; border:1px solid rgba(120,150,255,.14);border-radius:var(--radius-lg); padding:72px 40px;text-align:center; } .cta__title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.4vw,46px);letter-spacing:-.01em} .cta__lede{margin:16px auto 0;max-width:52ch;color:rgba(198,210,240,.62)} .cta__actions{margin-top:32px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap} /* ========================================================= Footer ========================================================= */ .foot{padding:64px 20px 0;border-top:1px solid var(--border-soft)} .foot__inner{ max-width:var(--container);margin-inline:auto; display:flex;align-items:flex-end;justify-content:space-between;gap:32px; padding-bottom:40px; } .foot__blurb{margin-top:18px;max-width:36ch;color:var(--ink-muted);font-size:14px;line-height:1.7} .foot__social{margin-top:18px;display:flex;gap:10px} .foot__social a{ width:40px;height:40px;border-radius:50%;border:1px solid var(--border); display:grid;place-items:center;transition:border-color .2s ease } .foot__social a:hover{border-color:var(--accent-hover)} .foot__kanji{ font-family:var(--font-kanji);color:var(--accent-hover); font-size:clamp(28px,4vw,52px);line-height:1.15;text-align:right; writing-mode:vertical-rl; } .foot__bar{ max-width:var(--container);margin-inline:auto; display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; padding:20px 0;border-top:1px solid var(--border-soft); font-size:12px;color:var(--ink-faint); } .foot__legal{display:flex;gap:20px} .foot__legal a:hover{color:var(--ink)} @media (max-width:767px){ .foot__inner{flex-direction:column;align-items:flex-start;gap:24px} .foot__kanji{writing-mode:horizontal-tb;text-align:left} } /* ========================================================= Modal / inquiry form (JetFormBuilder wrapped in our chrome) ========================================================= */ .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px} .modal[hidden]{display:none} .modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)} .modal__panel{ position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto; background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 45%,rgba(255,255,255,.07)); backdrop-filter:blur(44px) saturate(190%);-webkit-backdrop-filter:blur(44px) saturate(190%); border:1px solid rgba(255,255,255,.14); color:#fff;border-radius:33px; padding:34px 34px 30px; box-shadow:0 40px 90px -20px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5); } .modal__close{ position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);backdrop-filter:blur(12px); color:rgba(255,255,255,.75);font-size:15px;display:grid;place-items:center; transition:all 160ms ease;z-index:2; } .modal__fallback{font-size:15px;color:#12131A} .jet-form-builder{display:flex;flex-direction:column;gap:20px} .jet-form-builder__fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} .jet-form-builder textarea, .jet-form-builder input[type=text], .jet-form-builder input[type=email], .jet-form-builder select{ width:100%;border:0;border-radius:12px;padding:16px 18px; font-family:var(--font-body);font-size:15px;background:#fff;color:#12131A; } .jet-form-builder label{font-weight:600;font-size:14px;margin-bottom:8px;display:block} .jet-form-builder textarea{min-height:130px;resize:vertical;grid-column:1/-1} .jet-form-builder .jet-form-builder__field-wrap:has(textarea), .jet-form-builder .jet-form-builder__field-wrap:has(select){grid-column:1/-1} .jet-form-builder__radio-list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px} .jet-form-builder__radio-item label{ background:#fff;border-radius:var(--radius-pill);padding:12px 22px; font-weight:500;font-size:14px;margin:0;cursor:pointer; } .jet-form-builder__radio-item input{position:absolute;opacity:0} .jet-form-builder .jet-form-builder__actions{grid-column:1/-1} .jet-form-builder button[type=submit]{ width:100% !important;margin-top:6px;padding:17px 20px; display:flex;align-items:center;justify-content:center;gap:9px; font-size:15.5px;font-weight:600;letter-spacing:.01em;color:#fff !important;text-align:center; border:1px solid rgba(255,255,255,.3) !important;border-radius:18px; background:linear-gradient(165deg,#5b8cff,#2f5fe0) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px -10px rgba(47,95,224,.7); transition:transform 160ms ease,box-shadow 160ms ease,gap 220ms ease,background-color 200ms ease; } button[type=submit]::after{ content:'→'; display:inline-block;font-size:1.05em;line-height:1; transition:transform 220ms ease; } button[type=submit]:hover{ gap:16px; } button[type=submit]:hover::after{ transform:translateX(2px); } .jet-form-builder @media (max-width:640px){ .modal__panel{padding:32px 24px} .jet-form-builder__fields-wrap{grid-template-columns:1fr} } /* ========================================================= Single case study + generic prose fallback ========================================================= */ .case-single{padding:150px 20px 100px;max-width:var(--container);margin-inline:auto} .case-single__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .case-single__title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.4vw,48px)} .case-single__media{margin-top:32px;border-radius:var(--radius-lg);overflow:hidden} .case-single__media img{width:100%} .case-single__grid{margin-top:40px;display:grid;grid-template-columns:1fr 260px;gap:48px} .case-single__body{color:var(--ink-muted);font-size:16px;line-height:1.8} .case-single__label{margin-top:28px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)} .case-single__label:first-child{margin-top:0} .case-single__meta{margin-top:12px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-muted)} .case-single__nav{margin-top:56px} @media (max-width:900px){.case-single__grid{grid-template-columns:1fr}} .prose{padding:150px 20px 100px;max-width:760px;margin-inline:auto} .prose h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.4vw,44px);margin-bottom:24px} .prose p{color:var(--ink-muted);line-height:1.8;margin-bottom:16px} .work--archive .sec-title{margin-top:0} /* ========================================================= OVERRIDES — matching the original design ========================================================= */ /* --- Header: narrower, true glass --- */ .nav{ max-width:560px; padding:7px 7px 7px 14px; gap:10px; background:rgba(255,255,255,.06); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12); } .nav--scrolled{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)} .nav__mark{width:30px;height:30px;font-size:14px} .nav__list{gap:20px} .nav__list a{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;min-height:34px} .nav__cta{padding:9px 18px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase} @media (max-width:767px){.nav{max-width:none}} /* --- Hero: horizontal marquee behind a portrait --- */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:120px 20px 60px;overflow:hidden; } .hero__marquee{ position:absolute;top:50%;left:0;right:0;transform:translateY(-58%); overflow:hidden;z-index:1;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .hero__marquee-track{ display:flex;width:max-content; animation:varf-marquee 80s linear infinite; } .hero__marquee-track span{ font-family:var(--font-display);font-weight:800; font-size:clamp(64px,13vw,190px);line-height:1;letter-spacing:-.02em; color:rgba(255,255,255,.13);white-space:nowrap; } @keyframes varf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.hero__marquee-track{animation:none}} .hero__portrait{ position:relative;z-index:2; width:min(38vw,340px);aspect-ratio:3/4;object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 40px 90px rgba(0,0,0,.6); } .hero__foot{position:relative;z-index:3;margin-top:40px} .hero__tag{ font-family:var(--font-body);font-weight:600;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);line-height:1.7; } .hero__lede{margin:16px auto 0;max-width:56ch;color:var(--ink-faint);font-size:14px;line-height:1.7} @media (max-width:767px){ .hero{min-height:86svh;padding:104px 20px 48px} .hero__portrait{width:min(62vw,260px)} } /* --- Service cards: sticky stack, each overlapping the previous --- */ .services__stack{ display:flex;flex-direction:column;gap:0; max-width:820px;margin-inline:auto; } .scard{ position:sticky; top:calc(var(--header-h) + 24px + (var(--i,0) * 18px)); z-index:calc(var(--i,0) + 1); margin-bottom:28px; box-shadow:0 -8px 40px rgba(0,0,0,.55); } .scard:last-child{margin-bottom:0} @media (max-width:767px){ .scard{position:static;margin-bottom:18px;box-shadow:none} } /* Sticky stacking needs no clipping ancestor between .scard and the viewport */ .services,.services__stack{overflow:visible} main#main{overflow:visible} /* ========================================================= HERO FIX — explicit centring, calmer marquee ========================================================= */ .hero{ position:relative; min-height:100svh; display:grid; grid-template-rows:1fr auto; justify-items:center; align-items:center; text-align:center; padding:120px 20px 56px; overflow:hidden; } /* Marquee sits behind, vertically centred on the portrait */ .hero__marquee{ position:absolute; top:50%;left:0;right:0; transform:translateY(-50%); z-index:1; overflow:hidden;pointer-events:none; } .hero__marquee-track{ display:flex;width:max-content; animation:varf-marquee 80s linear infinite; } .hero__marquee-track span{ font-size:clamp(48px,8.5vw,124px); color:rgba(255,255,255,.09); padding-right:.4em; } /* Portrait: centred in the first grid row, above the marquee */ .hero__portrait{ grid-row:1; position:relative;z-index:2; width:min(30vw,300px); height:auto; aspect-ratio:3/4;object-fit:cover; justify-self:center;align-self:center; border-radius:var(--radius-lg); box-shadow:0 40px 90px rgba(0,0,0,.6); } .hero__foot{grid-row:2;position:relative;z-index:3;margin-top:0} @media (max-width:767px){ .hero{min-height:88svh;padding:100px 18px 44px} .hero__portrait{width:min(58vw,240px)} .hero__marquee-track{animation-duration:60s} } /* ========================================================= HERO v3 — marquee through the portrait, tilt card, fan layers ========================================================= */ /* Was lost when the token block was rewritten — restore it. */ .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; } .hero{ position:relative; min-height:100svh; display:flex;flex-direction:column; align-items:center;justify-content:center; gap:44px; text-align:center; padding:120px 20px 64px; overflow:hidden; } /* Stage holds marquee + portrait so the text crosses the portrait's middle */ .hero__stage{ position:relative; display:grid;place-items:center; width:100%; } .hero__marquee{ position:absolute; top:50%;left:50%; width:100vw; transform:translate(-50%,-50%); z-index:1;overflow:hidden;pointer-events:none; } .hero__marquee-track span{ font-size:clamp(52px,9vw,140px); color:rgba(255,255,255,.085); } /* Portrait card + accordion fan of accent layers behind it */ .hero__card{ position:relative;z-index:2; width:min(26vw,300px); aspect-ratio:3/4; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.22,.61,.36,1); will-change:transform; } .hero__portrait{ position:relative;z-index:3; width:100%;height:100%;object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 40px 90px rgba(0,0,0,.6); } .hero__fan{ position:absolute;inset:0; border-radius:var(--radius-lg); background:var(--accent); transform-origin:left center; transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease; will-change:transform; } .hero__fan--1{opacity:.55;z-index:2} .hero__fan--2{opacity:.32;z-index:1} .hero__fan--3{opacity:.16;z-index:0} /* Mouse-driven: --mx/--my are set in JS, range roughly -1 .. 1 */ .hero__card{ transform: perspective(900px) rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -9deg)) translate3d(calc(var(--mx,0) * 10px), calc(var(--my,0) * 10px), 0); } .hero__fan--1{transform:translate3d(calc(var(--mx,0) * 22px + 10px), calc(var(--my,0) * 8px), -1px) rotate(calc(var(--mx,0) * 2deg + 1.5deg))} .hero__fan--2{transform:translate3d(calc(var(--mx,0) * 38px + 20px), calc(var(--my,0) * 14px), -2px) rotate(calc(var(--mx,0) * 3.4deg + 3deg))} .hero__fan--3{transform:translate3d(calc(var(--mx,0) * 54px + 30px), calc(var(--my,0) * 20px), -3px) rotate(calc(var(--mx,0) * 4.8deg + 4.5deg))} .hero__foot{position:relative;z-index:3;margin:0} .hero__lede{margin:14px auto 0;max-width:52ch} @media (max-width:767px){ .hero{min-height:auto;padding:118px 18px 56px;gap:32px} .hero__card{width:min(58vw,240px)} .hero__marquee-track span{font-size:clamp(38px,13vw,64px)} } @media (prefers-reduced-motion:reduce){ .hero__card,.hero__fan{transition:none} } /* ========================================================= HEADER v2 — radii and logo taken from the original template (container 10px, button 6px — not pills) ========================================================= */ .nav{ border-radius:10px; padding:8px 8px 8px 8px; gap:14px; } .nav__logo{line-height:0} .nav__avatar{ width:34px;height:34px; border-radius:6px; object-fit:cover; display:block; } .nav__cta{ border-radius:6px; padding:10px 18px; } @media (max-width:767px){ .nav{border-radius:10px;padding:7px} .nav__avatar{width:30px;height:30px} } /* ========================================================= HEADER — breathing room from the top edge ========================================================= */ .nav{top:30px} @media (max-width:767px){.nav{top:16px}} /* ========================================================= SERVICE CARDS v2 — matched to the reference badge-boxed kanji, outlined numeral, title above focus line ========================================================= */ .scard{ position:sticky; top:calc(var(--header-h) + 30px + (var(--i,0) * 16px)); z-index:calc(var(--i,0) + 1); margin-bottom:26px; padding:34px 38px 40px; border-radius:16px; border:1px solid rgba(120,150,255,.18); background:linear-gradient(150deg,#16265C 0%,#101C42 45%,#0D1531 100%); box-shadow:0 -10px 44px rgba(0,0,0,.6); overflow:hidden; } .scard:last-child{margin-bottom:0} /* Kanji badge — outlined blue square, sits in normal flow */ .scard__kanji{ position:static; display:inline-grid;place-items:center; width:52px;height:52px; border:1.5px solid var(--accent-hover); border-radius:10px; font-family:var(--font-kanji); font-size:19px;line-height:1; color:#6FA0FF; box-shadow:0 0 18px rgba(27,98,238,.35),inset 0 0 12px rgba(27,98,238,.15); } /* Outlined numeral, top-right */ .scard__num{ position:absolute;right:34px;top:26px; font-family:var(--font-display);font-weight:800; font-size:112px;line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(140,170,255,.16); letter-spacing:.01em; pointer-events:none; } .scard__title{ margin-top:26px; font-family:var(--font-body); font-weight:400;font-size:15px; letter-spacing:.01em; color:rgba(226,233,255,.72); } .scard__focus{ margin-top:10px; font-family:var(--font-body); font-weight:500;font-size:19px; color:#F2F5FF; } .scard__body{ margin-top:34px; font-size:15px;line-height:1.85; color:rgba(198,210,240,.62); max-width:64ch; } @media (max-width:767px){ .scard{position:static;padding:26px 22px 30px;margin-bottom:18px;box-shadow:none} .scard__num{font-size:74px;right:20px;top:20px} .scard__body{margin-top:24px} } /* sticky already establishes a containing block, but be explicit so the absolutely-positioned numeral is always anchored to its own card */ .scard{position:sticky;isolation:isolate} @media (max-width:767px){.scard{position:relative}} /* ========================================================= HEADER OFFSET FIX sticky `top` only engages once scrolling starts; the initial position comes from normal flow, so it needs a real margin. ========================================================= */ .nav{ margin-top:30px; top:30px; } .hero{padding-top:70px} @media (max-width:767px){ .nav{margin-top:16px;top:16px} .hero{padding-top:56px} } /* ========================================================= FONT RESOLUTION — literal stacks, no nested var() indirection (a broken var chain makes the whole declaration invalid and the browser silently falls back to its default serif) ========================================================= */ :root{ --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-display:'Syne','Inter',system-ui,Arial,sans-serif; --font-italic:'Bodoni Moda',Georgia,'Times New Roman',serif; --font-kanji:'Zen Antique',serif; } html,body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif} .sec-title, .hero__marquee-track span, .scard__num, .tier__name,.tier__scope, .case__title,.project-h, .cta__title, .quote figcaption, .faq__q, .case-single__title, .nav__mark, .brand-badge{ font-family:'Syne','Inter',system-ui,Arial,sans-serif; } .scard__title,.scard__focus,.scard__body, .hero__tag,.hero__lede, .tier__for,.tier__body,.tier__list li,.tier__note,.tier__label, .case__desc,.quote blockquote,.faq__a, .nav__list a,.btn, .foot__blurb,.foot__links a,.foot__address,.foot__mail{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; } em,.sec-title em,.cta__title em{ font-family:'Bodoni Moda',Georgia,'Times New Roman',serif; font-style:italic; } .scard__kanji,.foot__kanji{font-family:'Zen Antique',serif} .foot__bar,.footer-col-label,.tier__badge, .eyebrow,.card-tag,.project-tag,.media-note{ font-family:'Inter',system-ui,Arial,sans-serif; } /* ========================================================= PORTFOLIO — liquid-glass rail Accent kept at the site blue rather than the mock's periwinkle, italic uses the site's Bodoni instead of adding another family. ========================================================= */ .pf{ --pf-accent:#4E80FF; --pf-gap:28px; position:relative;overflow:hidden; background:var(--bg);color:var(--ink); padding:120px 0 110px; } .pf__glow{ position:absolute;top:-180px;left:50%;transform:translateX(-50%); width:1100px;height:620px;pointer-events:none;filter:blur(20px); background:radial-gradient(ellipse at center,rgba(78,128,255,.20),rgba(78,128,255,0) 65%); } .pf__head{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 48px;text-align:center} .pf__eyebrow{ display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); } .pf__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--pf-accent);box-shadow:0 0 10px var(--pf-accent)} .pf__title{margin:0;font-size:clamp(38px,5vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1.02} .pf__title em{font-style:italic;font-weight:400;color:var(--pf-accent)} .pf__sub{margin:0;max-width:560px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.55);text-wrap:pretty} .pf__carousel{position:relative;margin-top:64px} .pf__rail{ display:flex;gap:var(--pf-gap);overflow-x:auto;padding:8px 48px 28px; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none; } .pf__rail::-webkit-scrollbar{display:none} .pf-card{ position:relative;flex:0 0 clamp(320px,31.5%,560px);scroll-snap-align:start;isolation:isolate; border-radius:28px;overflow:hidden;background:#131317; border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -30px rgba(0,0,0,.9); transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s; } .pf-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.2)} .pf-card__media{ position:relative;aspect-ratio:4/5;background-color:#15161b; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 12px); } .pf-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .pf-card__ph{ position:absolute;top:44%;left:0;right:0;text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.3); } .pf-card__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,9,.85) 0%,rgba(6,6,9,.25) 42%,rgba(6,6,9,0) 70%)} .pf-card__tag{ position:absolute;top:20px;left:20px;padding:7px 14px;border-radius:999px; font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); } .pf-card__year{position:absolute;top:20px;right:20px;font-size:11px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.55)} /* ---------- liquid glass panel ---------- */ .pf-glass{ position:absolute;left:16px;right:16px;bottom:16px;overflow:hidden; border-radius:22px;padding:22px 22px 20px; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 18px 40px -20px rgba(0,0,0,.8); } .pf-glass::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%); animation:pf-sheen 6s ease-in-out infinite; } @keyframes pf-sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}} .pf-glass > *{position:relative} .pf-glass h3{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.02em;font-family:'Syne','Inter',system-ui,sans-serif} .pf-glass p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);text-wrap:pretty} .pf-glass a{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-size:13px;font-weight:600;color:#fff;text-decoration:none;transition:color .3s; } .pf-glass a:hover{color:#9DB1FF} /* ---------- controls ---------- */ .pf__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px} .pf__btn{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer; color:#fff;font-size:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:background .3s,transform .3s; } .pf__btn:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)} .pf__dots{display:flex;gap:8px;padding:0 6px} @media (max-width:900px){ .pf{padding:88px 0 80px} .pf__rail{padding:8px 24px 24px;--pf-gap:18px} .pf-card{flex:0 0 82%} .pf__head{padding:0 24px} } @media (prefers-reduced-motion:reduce){ .pf-glass::before{animation:none} .pf__rail{scroll-behavior:auto} .pf-card{transition:none} } /* ========================================================= PORTFOLIO — drag-to-scroll rail ========================================================= */ .pf__rail{cursor:grab;-webkit-user-select:none;user-select:none} .pf__rail.is-dragging{cursor:grabbing;scroll-snap-type:none} .pf__rail.is-dragging .pf-card{pointer-events:none} .pf-card__media img{-webkit-user-drag:none;user-drag:none;pointer-events:none} /* ========================================================= PORTFOLIO — liquid-drop pagination Two real dots (visual reference points) plus one "liquid" drop that travels between them under an SVG goo filter, so the drop briefly fuses with its target the way a droplet merges into a puddle. ========================================================= */ .pf__dots-wrap{display:flex;align-items:center;padding:0 6px} .pf__dots span:not(.pf__liquid){ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; transition:background-color .3s ease; } .pf__dots span.is-active{background:rgba(255,255,255,.4)} /* Mid-travel the drop stretches like it's being pulled through the goo filter, then the filter's contrast snap makes it look like it separates from the trailing dot as a bead of water would. */ .pf__liquid.is-stretching{transition-timing-function:cubic-bezier(.34,1.56,.64,1)} /* ========================================================= PORTFOLIO — liquid glass pagination, take 2 A bridge stretches between the old and new position while the drop travels (a liquid tendril, merged by the goo filter with both dots), then the bridge collapses and the drop wobbles as it settles — like a bead of water landing. ========================================================= */ .pf__dots span:not(.pf__liquid):not(.pf__bridge){ width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),rgba(255,255,255,.1) 45%,rgba(255,255,255,.16) 100%); cursor:pointer; transition:transform .25s ease; } .pf__dots span.is-active{transform:scale(.72)} .pf__liquid{ position:absolute;top:0;left:0;z-index:2; width:9px;height:9px;border-radius:50%; background: radial-gradient(circle at 32% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 42%), radial-gradient(circle at 50% 55%,var(--pf-accent) 55%,#2E5FE0 100%); box-shadow:0 0 10px rgba(78,128,255,.7),0 0 2px rgba(255,255,255,.6) inset; pointer-events:none; transform:translate(-1px,-1px); transition:transform .6s cubic-bezier(.5,-0.4,.2,1.4); will-change:transform; } .pf__liquid.is-settling{animation:pf-wobble .5s cubic-bezier(.36,1.9,.4,1) 1} /* The tendril: appears the instant travel starts, grows to bridge the gap, then shrinks back to nothing once the drop has arrived. Its own left edge tracks the start point; width is animated, not transform, so the goo filter sees real geometry change and renders a proper liquid neck. */ .pf__bridge{ position:absolute;top:1px;left:0;z-index:1; height:7px;width:0;border-radius:999px; background:linear-gradient(90deg,var(--pf-accent),#2E5FE0); transform-origin:left center; pointer-events:none; transition:width .32s cubic-bezier(.3,0,.6,1),left .32s cubic-bezier(.3,0,.6,1),opacity .25s ease .28s; opacity:0; } .pf__bridge.is-stretching{opacity:1;transition:width .32s cubic-bezier(.3,0,.6,1),left .32s cubic-bezier(.3,0,.6,1)} @keyframes pf-wobble{ 0%{transform:translate(-1px,-1px) scale(1,1)} 30%{transform:translate(-1px,-1px) scale(1.35,.68)} 55%{transform:translate(-1px,-1px) scale(.75,1.3)} 75%{transform:translate(-1px,-1px) scale(1.12,.9)} 100%{transform:translate(-1px,-1px) scale(1,1)} } @media (prefers-reduced-motion:reduce){ .pf__liquid{transition:transform .2s ease} .pf__liquid.is-settling{animation:none} .pf__bridge{transition:none} } /* ========================================================= PAGINATION v3 — filter isolated to the drop layer only The goo filter's alpha threshold (feColorMatrix 22 -10) erases anything below ~45% opacity, which was wiping out the inactive dots entirely. So the filter now wraps ONLY the drop + bridge; the dots sit outside it. ========================================================= */ .pf__dots{ position:relative; display:flex; gap:11px; filter:none; padding:4px 0; } /* Static track dots — always visible now */ .pf__dots span{ position:relative;z-index:1; width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.14); cursor:pointer; transition:background-color .3s ease,transform .3s ease; } .pf__dots span:hover{ background:rgba(255,255,255,.34); transform:scale(1.15); } /* The filtered layer: only the travelling drop and its tendril live here */ .pf__goo{ position:absolute;inset:0; z-index:2;pointer-events:none; filter:url(#pf-goo); } .pf__liquid{ position:absolute;top:50%;left:0; width:14px;height:14px;margin-top:-7px;margin-left:-3px; border-radius:50%; background: radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 60%,#2E6BFF 40%,#0055FE 100%); transform:translateX(0); transition:transform .62s cubic-bezier(.45,-0.35,.2,1.35); will-change:transform; } .pf__liquid.is-settling{animation:pf-wobble .55s cubic-bezier(.36,1.9,.4,1) 1} .pf__bridge{ position:absolute;top:50%;left:0; height:11px;width:0;margin-top:-5.5px; border-radius:999px; background:linear-gradient(90deg,#0055FE,#2E6BFF); transition:width .34s cubic-bezier(.3,0,.6,1),left .34s cubic-bezier(.3,0,.6,1),opacity .2s ease .3s; opacity:0; } .pf__bridge.is-stretching{opacity:1;transition:width .34s cubic-bezier(.3,0,.6,1),left .34s cubic-bezier(.3,0,.6,1)} @keyframes pf-wobble{ 0%{transform:translateX(var(--pf-x,0)) scale(1,1)} 30%{transform:translateX(var(--pf-x,0)) scale(1.32,.7)} 55%{transform:translateX(var(--pf-x,0)) scale(.78,1.26)} 78%{transform:translateX(var(--pf-x,0)) scale(1.1,.92)} 100%{transform:translateX(var(--pf-x,0)) scale(1,1)} } /* Glassy sheen that keeps sliding across the active drop */ .pf__liquid::after{ content:'';position:absolute;inset:0;border-radius:50%; background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 48%,rgba(255,255,255,0) 62%); animation:pf-drop-sheen 3.4s ease-in-out infinite; mix-blend-mode:screen; } @keyframes pf-drop-sheen{ 0%,100%{transform:translateX(-120%)} 55%{transform:translateX(120%)} } @media (prefers-reduced-motion:reduce){ .pf__liquid{transition:transform .2s ease} .pf__liquid.is-settling{animation:none} .pf__liquid::after{animation:none} .pf__bridge{transition:none} } /* ========================================================= HEADER — gently narrows on scroll, everything else unchanged ========================================================= */ .nav{ max-width:560px; transition:max-width .45s cubic-bezier(.4,0,.2,1),background-color .3s ease,border-color .3s ease; } .nav--scrolled{max-width:480px} /* ========================================================= SERVICE CARD NUMERALS — distinct font, glassier transparency ========================================================= */ .scard__num{ font-family:'Bodoni Moda',Georgia,'Times New Roman',serif; font-weight:500; font-style:italic; font-size:118px; -webkit-text-stroke:1px rgba(140,170,255,.22); color:rgba(140,170,255,.10); opacity:.8; } /* ========================================================= NAV — liquid glass indicator (hover + scrollspy active state) ========================================================= */ .nav__links{position:relative} .nav__list a{position:relative;z-index:2} .nav__glass{ position:absolute;top:2px;left:0;height:calc(100% - 4px); border-radius:999px; background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06); pointer-events:none; opacity:0; width:0; transform:translateX(0); transition:transform .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),opacity .25s ease; z-index:1; } .nav__glass.is-visible{opacity:1} @media (prefers-reduced-motion:reduce){ .nav__glass{transition:opacity .2s ease} } /* ========================================================= PRICING — right card in full liquid glass, left card parallax ========================================================= */ .tiers{align-items:stretch} .tier--elevate{ position:relative;overflow:hidden; background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.08),0 24px 60px -28px rgba(0,0,0,.7); } .tier--elevate::before{ content:'';position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 100%); animation:pf-sheen 7s ease-in-out infinite; } .tier--elevate > *{position:relative} .tier--elevate .tier__badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)} /* Parallax: left card rises as the section approaches viewport centre, then settles flush with the right card once centred. JS drives --tier-shift. */ .tier--essential{ transform:translateY(var(--tier-shift,0px)); will-change:transform; } @media (prefers-reduced-motion:reduce){ .tier--essential{transform:none} .tier--elevate::before{animation:none} } @media (max-width:900px){ .tier--essential{transform:none} } /* ========================================================= NAV v2 — Apple-style liquid glass segmented pill Icon-over-label items, a darker frosted "island" behind the hovered/active one, a static diagonal specular streak, and (where supported) an SVG turbulence layer that subtly refracts whatever scrolls behind the glass — the wavy-line look from the reference. ========================================================= */ .nav{ overflow:hidden; padding:6px 6px 6px 10px; } .nav::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 62%); } .nav::before{ content:'';position:absolute;inset:0;pointer-events:none; -webkit-backdrop-filter:url(#glass-distort);backdrop-filter:url(#glass-distort); opacity:.5; } .nav__list{display:flex;align-items:stretch;gap:2px;position:relative} .nav__item{list-style:none} .nav__item a{ position:relative;z-index:2; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; padding:8px 16px 9px; min-height:auto; color:rgba(255,255,255,.62); transition:color .3s ease; } .nav__item a:hover,.nav__item.is-active a{color:#fff} .nav__icon{width:18px;height:18px;display:block;color:inherit} .nav__icon svg{width:100%;height:100%} .nav__label{font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap} .nav__glass{ top:0;height:100%; border-radius:999px; background:linear-gradient(150deg,rgba(20,26,20,.55),rgba(10,12,10,.42)); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.35); } @media (max-width:767px){ .nav__item a{padding:7px 12px 8px} .nav__label{font-size:10px} } /* ========================================================= THEME TOGGLE — small standalone glass pill beside the header ========================================================= */ .theme-toggle{ position:fixed;top:30px;right:24px;z-index:50; display:flex;align-items:stretch;gap:2px; padding:5px;border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12); } .theme-toggle__btn{ position:relative;z-index:2; width:32px;height:32px;display:grid;place-items:center; border-radius:999px;color:rgba(255,255,255,.55); transition:color .3s ease; } .theme-toggle__btn svg{width:16px;height:16px} .theme-toggle__btn.is-active{color:#fff} .theme-toggle__glass{ position:absolute;top:5px;left:5px;width:32px;height:32px; border-radius:999px; background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); transition:transform .4s cubic-bezier(.4,0,.2,1); } @media (max-width:767px){ .theme-toggle{top:16px;right:12px} } @media (prefers-reduced-motion:reduce){ .theme-toggle__glass{transition:none} } /* ========================================================= LIGHT MODE Core tokens flip for the page itself and generic surfaces (nav, hero, footer, faq, tiers, portfolio section background). The three navy "island" cards above (services, testimonials, closing CTA) are frozen to their dark literal colours on purpose — they read as a deliberate accent in both themes, the way a photo or brand-colour card would, rather than flipping to plain white. ========================================================= */ [data-theme="light"]{ --bg:#F7F6F3; --ink:#14171C; --ink-muted:#585B62; --ink-faint:#84878E; --border:rgba(20,23,28,.12); --border-soft:rgba(20,23,28,.07); --surface:#FFFFFF; } /* Header + theme toggle: dark glass → light glass */ [data-theme="light"] .nav{ background:rgba(20,23,28,.05); border-color:rgba(20,23,28,.12); box-shadow:0 8px 24px rgba(20,23,28,.08),inset 0 1px 0 rgba(255,255,255,.6); } [data-theme="light"] .nav--scrolled{background:rgba(20,23,28,.07)} [data-theme="light"] .nav__item a{color:rgba(20,23,28,.58)} [data-theme="light"] .nav__item a:hover, [data-theme="light"] .nav__item.is-active a{color:#14171C} [data-theme="light"] .nav__glass{ background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.75)); border-color:rgba(20,23,28,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(20,23,28,.12); } [data-theme="light"] .nav__mark{background:var(--accent);color:#fff} [data-theme="light"] .theme-toggle{ background:rgba(20,23,28,.05);border-color:rgba(20,23,28,.12); box-shadow:0 8px 24px rgba(20,23,28,.08); } [data-theme="light"] .theme-toggle__btn{color:rgba(20,23,28,.5)} [data-theme="light"] .theme-toggle__btn.is-active{color:#14171C} [data-theme="light"] .theme-toggle__glass{ background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.75)); border-color:rgba(20,23,28,.10); } /* Hero marquee: dark faint type instead of white faint type */ [data-theme="light"] .hero__marquee-track span{color:rgba(20,23,28,.07)} [data-theme="light"] .hero__portrait{box-shadow:0 30px 70px rgba(20,23,28,.22)} /* Portfolio section chrome sits directly on the page background, so it must flip — the cards themselves stay dark on purpose (they're meant to read like framed photos regardless of theme). */ [data-theme="light"] .pf__eyebrow{ color:rgba(20,23,28,.68); background:rgba(20,23,28,.05);border-color:rgba(20,23,28,.12); } [data-theme="light"] .pf__sub{color:rgba(20,23,28,.55)} [data-theme="light"] .pf__glow{background:radial-gradient(ellipse at center,rgba(78,128,255,.14),rgba(78,128,255,0) 65%)} [data-theme="light"] .pf .pf__btn{ color:#14171C;background:rgba(20,23,28,.05);border-color:rgba(20,23,28,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } [data-theme="light"] .pf .pf__btn:hover{background:rgba(20,23,28,.1)} [data-theme="light"] .pf .pf__dots span{ background:rgba(20,23,28,.16);border-color:rgba(20,23,28,.1) } /* Pricing: the right card is meant to be full liquid glass in both themes, but a white-tinted pane on a near-white page would vanish — give it a dark-tinted frost instead, still unmistakably "glass", still reads as the premium tier next to the flat Essential card. */ [data-theme="light"] .tier--elevate{ background:linear-gradient(150deg,rgba(20,23,28,.06),rgba(20,23,28,.02)); border-color:rgba(20,23,28,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(20,23,28,.05),0 24px 60px -28px rgba(20,23,28,.18); } [data-theme="light"] .tier--elevate::before{ background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%); } /* Nav icons were reading as near-invisible: thin 1.4px stroke at 62% opacity on translucent glass. Thicken and brighten. */ .nav__item a{color:rgba(255,255,255,.8)} .nav__item a:hover,.nav__item.is-active a{color:#fff} .nav__icon{width:20px;height:20px} .nav__icon svg *{stroke-width:1.7} [data-theme="light"] .nav__item a{color:rgba(20,23,28,.72)} /* ========================================================= THEME SWITCHER — true liquid glass (feImage displacement map), native radio :has()-driven state, spring squash on toggle. Adapted from a 3-way reference down to 2 options (dark/light), wired to the site's own [data-theme] system rather than a parallel one — see the JS handler for the actual theme swap. ========================================================= */ .theme-switcher{ --ts-glass:#bbbbbc; --ts-light:#fff; --ts-dark:#000; --ts-content:#e7e7ea; --ts-reflex-dark:1.6; --ts-reflex-light:.6; --ts-sat:150%; position:fixed;top:30px;right:24px;z-index:50; display:flex;align-items:center;gap:4px; width:88px;height:52px;box-sizing:border-box; padding:6px;margin:0;border:none;border-radius:999px; background-color:color-mix(in srgb, var(--ts-glass) 12%, transparent); backdrop-filter:blur(8px) url(#theme-switcher-glass) saturate(var(--ts-sat)); -webkit-backdrop-filter:blur(8px) saturate(var(--ts-sat)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ts-light) calc(var(--ts-reflex-light) * 10%), transparent), inset 1.8px 3px 0 -2px color-mix(in srgb, var(--ts-light) calc(var(--ts-reflex-light) * 90%), transparent), inset -2px -2px 0 -2px color-mix(in srgb, var(--ts-light) calc(var(--ts-reflex-light) * 80%), transparent), inset -0.3px -1px 4px 0 color-mix(in srgb, var(--ts-dark) calc(var(--ts-reflex-dark) * 12%), transparent), inset 0 3px 4px -2px color-mix(in srgb, var(--ts-dark) calc(var(--ts-reflex-dark) * 20%), transparent), 0 6px 16px 0 color-mix(in srgb, var(--ts-dark) calc(var(--ts-reflex-dark) * 8%), transparent); transition:background-color .4s cubic-bezier(1,0,.4,1),box-shadow .4s cubic-bezier(1,0,.4,1); } .theme-switcher__legend{ position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0; white-space:nowrap;clip:rect(0 0 0 0);overflow:hidden; } .theme-switcher__input{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap; } .theme-switcher__option{ --c:var(--ts-content); position:relative;z-index:2; display:flex;align-items:center;justify-content:center; width:34px;height:100%;border-radius:999px; cursor:pointer; } .theme-switcher__option:hover{--c:#fff} .theme-switcher__icon{ width:16px;height:16px;color:var(--c); transition:scale .2s cubic-bezier(.5,0,0,1),color .2s ease; } .theme-switcher__option:hover .theme-switcher__icon{scale:1.15} /* The moving "island" — a pseudo-element so it can sit behind both options and slide/squash without any JS-computed geometry. */ .theme-switcher::after{ content:'';position:absolute;left:6px;top:6px; width:34px;height:calc(100% - 12px);border-radius:999px; background-color:color-mix(in srgb, var(--ts-glass) 38%, transparent); z-index:1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ts-light) calc(var(--ts-reflex-light) * 10%), transparent), inset 2px 1px 0 -1px color-mix(in srgb, var(--ts-light) calc(var(--ts-reflex-light) * 90%), transparent), inset -1px 2px 3px -1px color-mix(in srgb, var(--ts-dark) calc(var(--ts-reflex-dark) * 20%), transparent), 0 3px 6px 0 color-mix(in srgb, var(--ts-dark) calc(var(--ts-reflex-dark) * 8%), transparent); transition:translate .4s cubic-bezier(1,0,.4,1); } .theme-switcher:has(input[c-option="1"]:checked)::after{translate:0 0} .theme-switcher:has(input[c-option="2"]:checked)::after{translate:40px 0} .theme-switcher:has(input[c-option="1"]:checked)::after{animation:ts-squash-l 420ms ease} .theme-switcher:has(input[c-option="2"]:checked)::after{animation:ts-squash-r 420ms ease} @keyframes ts-squash-l{0%{scale:1 1}50%{scale:1.15 1}100%{scale:1 1}} @keyframes ts-squash-r{0%{scale:1 1}50%{scale:1.15 1}100%{scale:1 1}} @media (max-width:767px){.theme-switcher{top:16px;right:12px}} @media (prefers-reduced-motion:reduce){ .theme-switcher::after{transition:none;animation:none} .theme-switcher__icon{transition:none} } /* Fallback for browsers without color-mix()/backdrop-filter url()— keep the control fully usable, just without the fancy refraction. */ @supports not (background-color: color-mix(in srgb, red, blue)){ .theme-switcher{background:rgba(255,255,255,.08)} .theme-switcher::after{background:rgba(255,255,255,.35)} } /* FIX: .nav__list had its own position:relative, which made hovered links' offsetLeft resolve against the