/* ========================================================================== NOBBO Studio — marketing site design system -------------------------------------------------------------------------- Tokens are kept identical to the client dashboard (G:\nobbo-agency-web\src\app\globals.css) so the public site and the app read as one product. If you rebrand, change BOTH files. Palette: neutral greys taken from the mark — a white brush-stroke N on a black tile — with a single warm amber reserved for actions and status. Amber is a highlight, not a theme. One or two per screen, no more. PROGRESSIVE ENHANCEMENT — read before editing --------------------------------------------- Every page runs `document.documentElement.classList.add('js')` inline in . The ONLY rule in this file that hides page content behind that class is `.js .reveal{}`. Anything else that collapses (accordion panels, filtered work tiles) ships OPEN in the HTML and is closed by js/site.js at runtime — so if the external script 404s or throws, the page is still a readable document instead of a blank screen. ========================================================================== */ /* ── tokens ──────────────────────────────────────────────────────────────── */ :root{ --black:#000; --ink:#0a0a0b; /* page */ --surface:#121214; /* raised */ --surface-2:#1a1a1e; /* raised more */ --line:#26262c; --white:#fff; --text:#f2f2f4; --muted:#9a9aa4; --dim:#6b6b76; --accent:#f0a020; --accent-soft:rgba(240,160,32,.14); --danger:#ff8095; --ok:#6ee7a8; --max:1240px; --gutter:clamp(20px,5vw,64px); --radius:16px; --radius-lg:24px; --header-h:74px; --step--1:clamp(13px,.82vw + 11px,15px); --step-0:clamp(15px,.5vw + 14px,17px); --step-1:clamp(19px,1vw + 16px,23px); --step-2:clamp(24px,2vw + 18px,34px); --step-3:clamp(32px,4vw + 20px,56px); --step-4:clamp(44px,8vw + 16px,104px); --ease:cubic-bezier(.22,1,.36,1); /* film grain, generated once as an inline SVG — no network request */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── base ────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 24px); } body{ background:var(--ink); color:var(--text); font-family:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif; font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* overflow:clip stops sideways overflow WITHOUT making a scroll container, which is what keeps `position:sticky` alive further down the page. Browsers without it fall back to hidden and simply lose the pin. */ @supports (overflow:clip){body{overflow-x:clip}} a{color:inherit;text-decoration:none} img,svg,video,canvas{display:block;max-width:100%} /* component `display` values out-specify the UA [hidden] rule, so restate it */ [hidden]{display:none !important} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--accent);color:var(--black)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{ font-family:"Anton",Impact,"Inter",sans-serif; font-weight:400; line-height:.95; letter-spacing:-.01em; text-transform:uppercase; } h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);position:relative} .section{padding-block:clamp(72px,10vw,140px)} .section--tight{padding-block:clamp(48px,6vw,88px)} .rule{border-top:1px solid var(--line)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip{ position:absolute;top:8px;left:8px;z-index:200;transform:translateY(-200%); background:var(--accent);color:var(--ink);padding:10px 18px;border-radius:100px; font-size:14px;font-weight:600;transition:transform .25s var(--ease); } .skip:focus{transform:none} .eyebrow{ font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--dim);font-weight:600;margin-bottom:18px; display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none} .eyebrow--accent{color:var(--accent)} .lead{font-size:var(--step-1);color:var(--muted);line-height:1.5;max-width:62ch} .muted{color:var(--muted)} .dim{color:var(--dim)} .accent{color:var(--accent)} .mono{font-variant-numeric:tabular-nums;letter-spacing:.04em} /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:100px; font-size:14px;font-weight:600;letter-spacing:.01em; transition:transform .25s var(--ease),background .25s,color .25s, border-color .25s,box-shadow .25s,filter .25s; white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--solid{background:var(--accent);color:var(--ink);box-shadow:0 0 0 0 var(--accent-soft)} .btn--solid:hover{filter:brightness(1.07);box-shadow:0 10px 30px -12px rgba(240,160,32,.55)} .btn--light{background:var(--white);color:var(--black)} .btn--light:hover{background:var(--text)} .btn--ghost{border:1px solid var(--line);color:var(--text)} .btn--ghost:hover{border-color:var(--text);background:var(--surface)} .btn--sm{padding:10px 20px;font-size:13px} .btn[disabled]{opacity:.55;pointer-events:none} .btn .arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(3px)} /* ── header ──────────────────────────────────────────────────────────────── */ .header{ position:fixed;inset:0 0 auto 0;z-index:100; transition:background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent; } .header.is-stuck{ background:rgba(10,10,11,.82); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } .header__inner{ max-width:var(--max);margin-inline:auto;padding:18px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em} .brand img{width:34px;height:34px;border-radius:9px;flex:none} .brand b{font-size:17px;font-weight:800} .brand span{color:var(--dim);font-weight:500} .menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)} .menu a{font-size:14px;color:var(--muted);position:relative;transition:color .2s} .menu a::after{ content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px; background:var(--accent);transition:width .3s var(--ease); } .menu a:hover,.menu a[aria-current="page"]{color:var(--text)} .menu a:hover::after,.menu a[aria-current="page"]::after{width:100%} .menu .btn::after{display:none} .menu .btn:hover{color:var(--ink)} /* scroll progress — CSS scroll-timeline where available, JS scaleX elsewhere */ .progress{ position:absolute;left:0;right:0;bottom:-1px;height:2px; overflow:hidden;pointer-events:none; } .progress__bar{ height:100%;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:0 50%; } @supports (animation-timeline:scroll()){ .progress__bar{animation:progressGrow linear both;animation-timeline:scroll(root block)} } @keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} .burger{display:none;width:42px;height:42px;place-items:center;border-radius:10px;border:1px solid var(--line)} .burger span{display:block;width:18px;height:1.5px;background:var(--text);transition:.3s var(--ease)} .burger span+span{margin-top:5px} .nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-open .burger span:nth-child(2){opacity:0} .nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ── ambient film layer (fixed, never interactive) ───────────────────────── */ .fx{position:fixed;inset:0;z-index:3;pointer-events:none} .fx *{pointer-events:none} .fx__grain{ position:absolute;inset:-50%; background-image:var(--grain); opacity:.055; animation:grainShift 1.1s steps(1,end) infinite; will-change:transform; } @keyframes grainShift{ 0% {transform:translate3d(0,0,0)} 10% {transform:translate3d(-4%,-4%,0)} 20% {transform:translate3d(-9%,3%,0)} 30% {transform:translate3d(5%,-7%,0)} 40% {transform:translate3d(-3%,7%,0)} 50% {transform:translate3d(-7%,4%,0)} 60% {transform:translate3d(4%,-3%,0)} 70% {transform:translate3d(-5%,6%,0)} 80% {transform:translate3d(8%,-4%,0)} 90% {transform:translate3d(-2%,-5%,0)} 100%{transform:translate3d(0,0,0)} } .fx__vignette{ position:absolute;inset:0; background:radial-gradient(130% 100% at 50% 42%,transparent 46%,rgba(0,0,0,.5) 100%); } /* ── hero ────────────────────────────────────────────────────────────────── */ .hero{ position:relative;overflow:hidden; padding-block:clamp(132px,17vw,205px) clamp(56px,8vw,104px); isolation:isolate; } .hero__aura,.hero__aura2{position:absolute;pointer-events:none;border-radius:50%;z-index:-2} .hero__aura{ top:-38%;left:50%;width:min(1040px,130vw);aspect-ratio:1;translate:-50% 0; background:radial-gradient(circle,rgba(255,255,255,.075),transparent 62%); animation:drift 26s ease-in-out infinite alternate; } .hero__aura2{ top:6%;right:-16%;width:min(680px,88vw);aspect-ratio:1; background:radial-gradient(circle,rgba(240,160,32,.10),transparent 64%); animation:drift2 34s ease-in-out infinite alternate; } @keyframes drift{to{transform:translate3d(-4%,5%,0) scale(1.09)}} @keyframes drift2{to{transform:translate3d(6%,-6%,0) scale(1.12)}} .hero__mark{ position:absolute;right:-8%;top:4%;width:min(56vw,660px); opacity:.42;mix-blend-mode:screen;z-index:-1;pointer-events:none; -webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent 82%); mask-image:radial-gradient(closest-side,#000 48%,transparent 82%); animation:markFloat 18s ease-in-out infinite alternate; } @keyframes markFloat{to{transform:translate3d(-2.5%,3%,0) rotate(3deg)}} .hero__scan{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 4px); -webkit-mask-image:linear-gradient(to bottom,#000,transparent 78%); mask-image:linear-gradient(to bottom,#000,transparent 78%); animation:scanDrift 7s linear infinite; } @keyframes scanDrift{to{transform:translateY(4px)}} /* viewfinder HUD — corner brackets, a REC light and a running timecode */ .vf{position:absolute;inset:clamp(74px,10vw,110px) var(--gutter) clamp(22px,4vw,40px);pointer-events:none;z-index:0} .vf__c{position:absolute;width:22px;height:22px;border:1px solid rgba(255,255,255,.2)} .vf__c--tl{top:0;left:0;border-right:0;border-bottom:0} .vf__c--tr{top:0;right:0;border-left:0;border-bottom:0} .vf__c--bl{bottom:0;left:0;border-right:0;border-top:0} .vf__c--br{bottom:0;right:0;border-left:0;border-top:0} .vf__hud{ position:absolute;top:-4px;left:34px;right:34px; display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim); } .vf__rec{display:inline-flex;align-items:center;gap:7px;color:var(--accent)} .vf__rec i{ width:7px;height:7px;border-radius:50%;background:var(--accent); animation:blink 1.8s steps(1,end) infinite; } @keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}} .vf__tc{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)} .hero__inner{position:relative;z-index:1} .hero h1{max-width:15ch;margin-bottom:26px} .hero h1 em{font-style:normal;-webkit-text-stroke:1.5px var(--white);color:transparent} .hero .lead{margin-bottom:36px} .hero__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero__note{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:8px} .hero__note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none} /* Line-mask entrance: each line slides out from behind its own clip. ------------------------------------------------------------------ The hidden start state lives INSIDE the keyframes with `animation-fill-mode: both` — never as a standalone `opacity:0` / `transform:` declaration. Two reasons: the animation is guaranteed to reach its end state without any help from js/site.js, and a browser that ignored the animation entirely would show the content rather than hide it. Only `.js .reveal` may hide statically. */ .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .ln>span{display:block} .js .ln>span{animation:lineUp .95s var(--ease) both} .js .ln:nth-child(1)>span{animation-delay:.08s} .js .ln:nth-child(2)>span{animation-delay:.18s} .js .ln:nth-child(3)>span{animation-delay:.28s} .js .ln:nth-child(4)>span{animation-delay:.38s} @keyframes lineUp{from{transform:translateY(108%)}to{transform:none}} /* Generic on-load entrance for above-the-fold furniture. Same contract. */ .js .anim{animation:riseIn .85s var(--ease) both;animation-delay:var(--d,0s)} @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ── stat strip / counters ───────────────────────────────────────────────── */ .stats{ display:flex;gap:clamp(22px,5vw,64px);flex-wrap:wrap; margin-top:clamp(52px,8vw,92px);padding-top:32px;border-top:1px solid var(--line); } .stats--flush{margin-top:0;padding-top:0;border-top:none} .stat{min-width:118px;position:relative} .stat b{ display:block;font-family:"Anton",Impact,sans-serif;font-weight:400; font-size:var(--step-2);line-height:1;font-variant-numeric:tabular-nums; } .stat span{font-size:13px;color:var(--dim)} .stat::after{ content:"";display:block;width:22px;height:2px;background:var(--line); margin-top:12px;transition:background .3s,width .35s var(--ease); } .stat:hover::after{background:var(--accent);width:40px} /* ── marquee ─────────────────────────────────────────────────────────────── */ .marquee{ overflow:hidden;padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .marquee--bordered{border-block:1px solid var(--line)} .marquee__track{display:flex;gap:48px;width:max-content;animation:slide 38s linear infinite} .marquee__track--rev{animation-direction:reverse;animation-duration:46s;opacity:.55} .marquee:hover .marquee__track{animation-play-state:paused} .marquee span{ font-size:14px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase; white-space:nowrap;display:inline-flex;align-items:center;gap:48px; } .marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line)} @keyframes slide{to{transform:translateX(-50%)}} /* ── grids, heads, cards ─────────────────────────────────────────────────── */ .grid{display:grid;gap:clamp(14px,2vw,22px)} .grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .grid--split{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,5vw,70px)} .head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,54px)} .head p{max-width:52ch} .card{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.6vw,32px); transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s; } .card::before{ content:"";position:absolute;inset:-1px -1px auto -1px;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0;transition:opacity .4s; } .card:hover{border-color:#3a3a44;transform:translateY(-4px);background:var(--surface-2)} .card:hover::before{opacity:.7} .card__num{ font-family:"Anton",Impact,sans-serif;font-size:12px;color:var(--dim); letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px; transition:color .3s; } .card:hover .card__num{color:var(--accent)} .card h3{margin-bottom:10px} .card p{color:var(--muted);font-size:var(--step--1)} .card ul{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:7px} .card li{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 11px} /* ── work tiles ──────────────────────────────────────────────────────────── */ .work{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .work--feature{grid-template-columns:1fr} .tile{ position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg); border:1px solid var(--line);background:var(--surface); aspect-ratio:16/10;isolation:isolate; transition:border-color .35s var(--ease),transform .45s var(--ease),opacity .35s var(--ease); } .tile--tall{aspect-ratio:4/5} .tile--wide{aspect-ratio:21/9} .tile--span{grid-column:1/-1} .tile:hover,.tile:focus-visible{border-color:#3d3d47} /* parallax layer — oversized so it never exposes an edge while it moves */ .tile__art{position:absolute;inset:-9%;z-index:0} .tile__art-in{ position:absolute;inset:0; background: radial-gradient(120% 90% at var(--ax,78%) var(--ay,12%),rgba(255,255,255,.16),transparent 58%), conic-gradient(from var(--aa,210deg) at 26% 108%,#1d1d23,#0b0b0d 38%,#191920 68%,#0a0a0b); transition:transform .8s var(--ease),filter .5s; } .tile--accent .tile__art-in{ background: radial-gradient(110% 85% at 76% 14%,rgba(240,160,32,.22),transparent 56%), radial-gradient(120% 90% at 20% 90%,rgba(255,255,255,.10),transparent 60%), conic-gradient(from 190deg at 30% 105%,#201a10,#0b0b0d 40%,#1a1512 70%,#0a0a0b); } .tile__art-in::after{ content:"";position:absolute;inset:0; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 5px); opacity:.6; } .tile__mark{ position:absolute;right:4%;top:50%;translate:0 -50%; width:min(48%,300px);opacity:.06; filter:invert(1) grayscale(1); -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 76%); mask-image:radial-gradient(closest-side,#000 40%,transparent 76%); transition:opacity .55s var(--ease),transform .8s var(--ease); } .tile__body{ position:absolute;inset:auto 0 0 0;z-index:2; padding:clamp(18px,2.6vw,30px); display:flex;align-items:end;justify-content:space-between;gap:18px; background:linear-gradient(to top,rgba(10,10,11,.95),rgba(10,10,11,.5) 52%,transparent); } .tile__body h3{font-size:var(--step-1);margin-bottom:5px} .tile__body p{font-size:13px;color:var(--muted)} .tile__body .tile__more{ max-height:0;opacity:0;overflow:hidden; font-size:13px;color:var(--dim); transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease); } .tile__tags{ position:absolute;top:clamp(14px,2vw,20px);left:clamp(14px,2vw,20px);z-index:2; display:flex;gap:7px;flex-wrap:wrap; } .tag{ font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);background:rgba(10,10,11,.6);border:1px solid var(--line); padding:4px 10px;border-radius:100px;backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .tag--accent{color:var(--accent);border-color:rgba(240,160,32,.35);background:var(--accent-soft)} .tile__play{ flex:none;width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.28); display:grid;place-items:center;font-size:12px; transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease); } /* the scrub line reads as "this is a video" without a video */ .tile__scrub{ position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:3; background:rgba(255,255,255,.12);opacity:0;transition:opacity .3s; } .tile__scrub::after{ content:"";position:absolute;inset:0;background:var(--accent); transform:scaleX(0);transform-origin:0 50%; } @media (hover:hover){ .tile:hover .tile__art-in{transform:scale(1.05)} .tile:hover .tile__mark{opacity:.13;transform:translateX(-10px) rotate(-4deg)} .tile:hover .tile__play{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:scale(1.08)} .tile:hover .tile__more{max-height:70px;opacity:1;margin-top:8px} .tile:hover .tile__scrub{opacity:1} .tile:hover .tile__scrub::after{animation:scrub 3.6s linear forwards} } /* Scroll-driven parallax on the tile art. Native scroll timelines where the browser has them; js/site.js runs a rAF fallback everywhere else and skips itself entirely when this @supports block applies. */ @supports (animation-timeline:view()){ [data-parallax]{ animation:parY linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } } @keyframes parY{ from{transform:translate3d(0,calc(var(--par,16px) * -1),0)} to {transform:translate3d(0,var(--par,16px),0)} } /* keyboard users get the same expansion mouse users get on hover */ .tile:focus-visible .tile__play{background:var(--accent);color:var(--ink);border-color:var(--accent)} .tile:focus-visible .tile__more{max-height:70px;opacity:1;margin-top:8px} .tile:focus-visible .tile__art-in{transform:scale(1.05)} @keyframes scrub{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* filtering: tiles ship visible. JS fades them out, then sets [hidden]. */ .js .tile.is-out{opacity:0;transform:scale(.96) translateY(10px);pointer-events:none} .filters{ display:flex;gap:8px;flex-wrap:wrap;align-items:center; margin-bottom:clamp(22px,3vw,34px); } .filter{ font-size:13px;font-weight:600;letter-spacing:.02em; padding:9px 18px;border-radius:100px; border:1px solid var(--line);color:var(--muted); transition:color .25s,border-color .25s,background .25s; } .filter:hover{color:var(--text);border-color:#3a3a44} .filter[aria-pressed="true"]{background:var(--accent-soft);border-color:rgba(240,160,32,.4);color:var(--accent)} .filters__count{margin-left:auto;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums} /* ── horizontal work strip ───────────────────────────────────────────────── */ .strip{position:relative} .strip__scroller{ display:flex;gap:clamp(14px,2vw,20px); overflow-x:auto;overflow-y:hidden; /* line the first tile up with .wrap, but never go below the gutter */ padding:4px max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter))) 20px; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none; overscroll-behavior-x:contain; } .strip__scroller::-webkit-scrollbar{display:none} .strip__scroller.is-dragging{scroll-behavior:auto;cursor:grabbing} .strip__scroller.is-dragging a{pointer-events:none} .strip .tile{flex:0 0 min(78vw,430px);scroll-snap-align:start} .strip__nav{ display:flex;gap:8px;justify-content:flex-end; max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter); } .strip__btn{ width:44px;height:44px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;color:var(--muted); transition:border-color .25s,color .25s,background .25s,opacity .25s; } .strip__btn:hover{border-color:var(--text);color:var(--text);background:var(--surface)} .strip__btn[disabled]{opacity:.3;pointer-events:none} /* ── the pinned "your dashboard" section ─────────────────────────────────── */ .pin{ display:grid;gap:clamp(30px,5vw,72px); grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:start; } .pin__media{position:sticky;top:calc(var(--header-h) + 26px)} .pin__copy{display:grid;gap:clamp(44px,8vw,110px);padding-block:clamp(0px,2vw,24px)} .pin__block h3{margin-bottom:12px} .pin__block p{color:var(--muted)} .pin__block .num{ font-family:"Anton",Impact,sans-serif;font-size:13px;letter-spacing:.14em; color:var(--accent);margin-bottom:14px;display:block; } /* browser-chrome mock of the client portal, built entirely in CSS */ .portal{ border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden; background:var(--surface);box-shadow:0 40px 90px -50px rgba(0,0,0,.9); } .portal__bar{ display:flex;align-items:center;gap:7px; padding:12px 16px;border-bottom:1px solid var(--line);background:var(--ink); } .portal__dot{width:9px;height:9px;border-radius:50%;background:var(--line)} .portal__url{ margin-left:12px;font-size:12px;color:var(--dim); background:var(--surface);border:1px solid var(--line); padding:3px 12px;border-radius:100px; } .portal__body{display:grid;grid-template-columns:132px 1fr;min-height:340px} .portal__side{border-right:1px solid var(--line);padding:16px 12px;display:grid;gap:4px;align-content:start} .portal__side i{ display:block;font-style:normal;font-size:12px;color:var(--dim); padding:8px 11px;border-radius:8px; } .portal__side i.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .portal__main{padding:18px;display:grid;gap:14px;align-content:start} .portal__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pstat{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--ink)} .pstat b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:22px;display:block;line-height:1} .pstat span{font-size:11px;color:var(--dim)} .prow{ display:flex;align-items:center;gap:12px; border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--ink); } .prow__txt{flex:1 1 auto;min-width:0} .prow__t{display:block;font-size:13px;font-weight:600} .prow__m{display:block;font-size:12px;color:var(--dim);margin-top:2px} .prow__bar{flex:1;height:4px;border-radius:100px;background:var(--line);overflow:hidden;min-width:50px} .prow__bar i{display:block;height:100%;width:var(--w,50%);background:var(--accent);border-radius:100px} .js .reveal.in .prow__bar i{animation:pfill 1.1s var(--ease) both} @keyframes pfill{from{width:0}to{width:var(--w,50%)}} .pill{font-size:11px;padding:3px 10px;border-radius:100px;white-space:nowrap;background:var(--accent-soft);color:var(--accent)} .pill--live{display:inline-flex;align-items:center;gap:6px} .pill--live::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--accent); animation:pulse 2s ease-in-out infinite; } .pill--quiet{background:transparent;border:1px solid var(--line);color:var(--muted)} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} .papprove{ border:1px solid rgba(240,160,32,.4);border-radius:12px;padding:14px; background:linear-gradient(180deg,var(--accent-soft),transparent); } .papprove b{font-size:13px;display:block;margin-bottom:3px} .papprove p{font-size:12px;color:var(--muted);margin-bottom:10px} .papprove div{display:flex;gap:8px} .papprove i{ font-style:normal;font-size:11px;font-weight:600;padding:6px 14px;border-radius:100px; background:var(--accent);color:var(--ink); } .papprove i+i{background:transparent;border:1px solid var(--line);color:var(--muted)} /* ── process ─────────────────────────────────────────────────────────────── */ .steps{counter-reset:s;display:grid;gap:0} .step{ counter-increment:s;display:grid;gap:6px 30px; grid-template-columns:72px 1fr;align-items:start; padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--line); transition:background .35s; } .step:last-child{border-bottom:1px solid var(--line)} .step::before{ content:counter(s,decimal-leading-zero); font-family:"Anton",Impact,sans-serif;font-size:var(--step-2);color:var(--line); line-height:.9;transition:color .35s var(--ease),transform .35s var(--ease); } .step:hover::before{color:var(--accent);transform:translateY(-2px)} .step p{color:var(--muted);font-size:var(--step--1);max-width:60ch;grid-column:2} .step__meta{grid-column:2;font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-top:4px} /* ── accordion (services, FAQ) ─────────────────────────────────────────────── Ships OPEN. js/site.js collapses everything but the first item at runtime, so a dead script leaves a readable stack rather than four blank headings. */ .acc{display:grid;border-top:1px solid var(--line)} .acc__item{border-bottom:1px solid var(--line)} .acc__h{margin:0;font:inherit;letter-spacing:normal;text-transform:none} .acc__btn{ width:100%;display:flex;align-items:center;gap:20px;justify-content:space-between; padding:clamp(20px,2.6vw,30px) 0;text-align:left; transition:color .25s; } .acc__btn:hover{color:var(--accent)} .acc__title{ font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase; font-size:var(--step-2);line-height:1;letter-spacing:-.01em; display:flex;align-items:baseline;gap:16px; } .acc__title small{ font-family:"Inter",sans-serif;font-size:12px;letter-spacing:.14em;color:var(--dim); text-transform:uppercase;flex:none; } .acc__i{ flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;position:relative;transition:border-color .3s,background .3s; } .acc__i::before,.acc__i::after{ content:"";position:absolute;background:currentColor; transition:transform .35s var(--ease),opacity .3s; } .acc__i::before{width:12px;height:1.5px} .acc__i::after{width:1.5px;height:12px} .acc__item.is-open .acc__i{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .acc__item.is-open .acc__i::after{transform:rotate(90deg);opacity:0} .acc__panel{display:grid;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows .45s var(--ease)} .acc__item:not(.is-open) .acc__panel{grid-template-rows:0fr} .acc__panel>div{min-height:0} .acc__inner{ padding-bottom:clamp(24px,3vw,36px); display:grid;gap:22px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; } .acc__inner p{color:var(--muted);max-width:56ch} .acc__list{list-style:none;display:grid;gap:9px} .acc__list li{ font-size:var(--step--1);color:var(--muted); display:flex;gap:11px;align-items:flex-start; } .acc__list li::before{ content:"";flex:none;width:6px;height:6px;border-radius:50%; background:var(--accent);margin-top:.55em; } .acc__side h4{ font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-bottom:14px; } /* ── quotes ──────────────────────────────────────────────────────────────── */ .quote{ max-width:24ch;font-family:"Anton",Impact,sans-serif;font-size:var(--step-3); line-height:1.05;text-transform:uppercase; } .quote-by{margin-top:24px;font-size:14px;color:var(--dim)} .pullquote{ border-left:2px solid var(--accent);padding:6px 0 6px clamp(20px,3vw,34px); font-size:var(--step-2);line-height:1.25;color:var(--text); font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase; margin-block:clamp(28px,4vw,48px);max-width:26ch; } .pullquote cite{ display:block;margin-top:16px;font-family:"Inter",sans-serif;font-size:13px; font-style:normal;letter-spacing:.06em;color:var(--dim);text-transform:none; } /* ── case study ──────────────────────────────────────────────────────────── */ .cs-meta{ display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:clamp(16px,2.5vw,28px); padding-block:clamp(24px,3vw,34px);border-block:1px solid var(--line); } .cs-meta div span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px} .cs-meta div b{font-weight:600;font-size:var(--step--1)} .cs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:clamp(30px,6vw,80px);align-items:start} .cs-prose{display:grid;gap:clamp(34px,5vw,58px)} .cs-prose h2{font-size:var(--step-2);margin-bottom:14px} .cs-prose p{color:var(--muted);max-width:64ch} .cs-prose p+p{margin-top:14px} .cs-side{position:sticky;top:calc(var(--header-h) + 26px);display:grid;gap:16px} .cs-figure{ border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden; position:relative;aspect-ratio:4/3;background:var(--surface); } .result{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden; } .result div{background:var(--ink);padding:clamp(20px,2.6vw,28px)} .result b{ display:block;font-family:"Anton",Impact,sans-serif;font-weight:400; font-size:var(--step-3);line-height:1;color:var(--accent); font-variant-numeric:tabular-nums; } .result span{display:block;margin-top:8px;font-size:13px;color:var(--muted)} /* ── CTA band ────────────────────────────────────────────────────────────── */ .cta{ position:relative;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(34px,6vw,80px);text-align:center; background: radial-gradient(90% 130% at 50% 0%,rgba(240,160,32,.10),transparent 60%), radial-gradient(80% 120% at 50% 100%,rgba(255,255,255,.05),transparent 60%), var(--surface); } .cta h2{margin-bottom:16px;position:relative} .cta p{margin:0 auto 30px;max-width:46ch;color:var(--muted);position:relative} .cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative} /* ── forms ───────────────────────────────────────────────────────────────── */ .form{display:grid;gap:18px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:9px} .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border-radius:12px;font:inherit;font-size:15px; background:var(--surface);border:1px solid var(--line);color:var(--text); transition:border-color .2s,background .2s,box-shadow .2s;resize:vertical; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--accent);background:var(--surface-2); box-shadow:0 0 0 3px var(--accent-soft); } .field input::placeholder,.field textarea::placeholder{color:var(--dim)} .form__status{font-size:14px;min-height:22px} .form__status.ok{color:var(--ok)} .form__status.bad{color:var(--danger)} /* ── footer ──────────────────────────────────────────────────────────────── */ .footer{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,76px) 34px;position:relative} .footer__top{display:grid;gap:40px;grid-template-columns:1.6fr 1fr 1fr 1fr;margin-bottom:52px} .footer h4{font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px} .footer ul{list-style:none;display:grid;gap:2px} /* A footer link was a 17px-tall target — the height of the text and nothing else. That is fine with a mouse and genuinely hard with a thumb, and the footer is where the phone navigation lives on this site. Padding rather than a bigger font, so it looks the same and is twice as easy to hit. */ .footer a{color:var(--muted);font-size:14px;transition:color .2s; display:inline-block;padding-block:8px;min-height:22px} .footer a:hover{color:var(--accent)} .footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)} .footer__brand p{color:var(--muted);font-size:14px;max-width:34ch;margin-top:16px} .footer__cta{display:inline-flex;margin-top:20px} /* ── page header (inner pages) ───────────────────────────────────────────── */ .page-head{padding-block:clamp(124px,15vw,180px) clamp(36px,5vw,58px);position:relative;overflow:hidden} .page-head h1{max-width:16ch;margin-bottom:20px} .page-head__glow{ position:absolute;top:-46%;left:50%;translate:-50% 0; width:min(900px,120vw);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.06),transparent 62%); } .crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:18px} .crumb a:hover{color:var(--accent)} /* ── scroll reveal ─────────────────────────────────────────────────────────── Progressive enhancement on purpose: content is visible by default and only hidden once the inline head script proves JS is running. Without this a failed script or a blocked IntersectionObserver renders a blank page. js/site.js also runs an unconditional 1600ms backstop. */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none} /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .pin{grid-template-columns:1fr} .pin__media{position:static} .pin__copy{gap:clamp(28px,5vw,44px)} .cs-body{grid-template-columns:1fr} .cs-side{position:static} } @media (max-width:860px){ .footer__top{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1/-1} .acc__inner{grid-template-columns:1fr} .work{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} } @media (max-width:720px){ .burger{display:grid} .menu{ position:fixed;inset:0 0 auto 0;top:0;padding:92px var(--gutter) 34px; flex-direction:column;align-items:stretch;gap:4px; background:var(--ink);border-bottom:1px solid var(--line); transform:translateY(-102%); height:auto; /* belt and braces: if the transform never renders, the closed menu still cannot cover the page or swallow taps. visibility is stepped, not eased — instant on open, delayed until the slide-up finishes on close. */ visibility:hidden;pointer-events:none; transition:transform .4s var(--ease),visibility 0s .4s; } .nav-open .menu{ transform:none;visibility:visible;pointer-events:auto; transition:transform .4s var(--ease),visibility 0s 0s; } .menu a{font-size:19px;padding-block:12px;border-bottom:1px solid var(--line)} .menu a::after{display:none} .menu .btn{margin-top:16px;justify-content:center;border-bottom:none} .form .row{grid-template-columns:1fr} .step{grid-template-columns:52px 1fr} .work{grid-template-columns:1fr} .tile--wide{aspect-ratio:16/10} .portal__body{grid-template-columns:1fr} .portal__side{border-right:none;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px} .vf{display:none} .acc__title{font-size:var(--step-1)} .filters__count{margin-left:0;width:100%} } @media (max-width:420px){ .strip .tile{flex:0 0 84vw} .portal__stats{grid-template-columns:1fr 1fr} } /* ── reduced motion ────────────────────────────────────────────────────────── NOTE: this must be `.js .reveal`, not `.reveal`. A bare `.reveal` selector (0,1,0) loses to `.js .reveal` (0,2,0) and the content stays invisible. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none} .js .anim{animation:none;opacity:1;transform:none} .js .ln>span{animation:none;transform:none} .fx__grain{animation:none;opacity:.04} .strip__scroller{scroll-behavior:auto} .hero__aura,.hero__aura2,.hero__mark,.hero__scan{animation:none} [data-parallax]{animation:none !important;transform:none !important} } /* ── touch devices: never let Safari zoom the page on focus ────────────────── iOS zooms the whole viewport in when a focused field has a font smaller than 16px, and does not zoom back out afterwards — so filling in this form on an iPhone left the page enlarged and scrolled sideways. It is Safari's rule and the only way to opt out is to meet it. Targeted at touch pointers rather than at a width, because an iPad in landscape is wider than a laptop and has the same behaviour. */ @media (hover: none) and (pointer: coarse) { input, select, textarea, button { font-size: 16px; } }