:root{ --ink:#1A1A17; --ink-soft:#56524B; --cream:#F0EEE6; --line:#DCD6C8; --maroon:#7A3030; --maroon-soft:#9A4A4A; --font-display:'Fraunces',serif; --font-body:'Geist',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace; --font-mark:'Syncopate',sans-serif; --gap:.06em; /* Shell tokens. The homepage prototype hard-coded these per section; the case study and legal prototypes named them, and doc.css/case.css read them by name. They live here so every page measures and gutters identically. --pad is the side gutter and must never resolve to 0: an undefined value makes the whole padding declaration invalid, which is how body copy ends up on the screen edge on a phone. --gold is the second accent, written as an rgba literal throughout site.css and needed as a token by the case study log band. */ --shell:1100px; --pad:clamp(1.25rem,4vw,3rem); --gold:#D6A85C; } *{ box-sizing:border-box; margin:0; padding:0; } /* scroll-padding-top stops an anchored heading landing underneath the fixed header. The smoothing itself is NOT set here: scroll-behavior:smooth on also animates the scroll position the browser restores on a back navigation, which made returning to the homepage look like a slow crawl. smooth-anchors.js does it per click instead. */ html{ scroll-padding-top:clamp(66px,8vh,92px); } html,body{ background:var(--cream); color:var(--ink); font-family:var(--font-body); } /* ---- fixed header + functional carve logo ---- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; padding:clamp(1rem,2.2vw,1.5rem) clamp(2rem,11vw,10rem); gap:1rem; transition:background .4s ease; } /* frosted header: blur stays ON whenever scrolled — no on/off toggle (that was the glitch); smooth now that the swirl is off and the noise idles during scroll */ .site-header.scrolled{ background:transparent; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .site-header::before{ content:""; position:absolute; inset:0 0 auto 0; height:180%; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(122,48,48,.12), rgba(122,48,48,0)); } .nav{ display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(.7rem,1.8vw,1.5rem); } .nav--left{ justify-self:start; } .nav--right{ justify-self:end; } .navlink{ font-family:var(--font-body); font-weight:500; font-size:14px; letter-spacing:.01em; color:var(--ink-soft); text-decoration:none; white-space:nowrap; flex:none; transition:color .2s ease; } .navlink:hover{ color:var(--maroon); } .btn-cta{ font-family:var(--font-body); font-weight:500; font-size:13.5px; letter-spacing:.01em; color:var(--cream); background:var(--maroon); text-decoration:none; white-space:nowrap; padding:.62em 1.2em; border-radius:5px; transition:background .2s ease, transform .2s ease; } .btn-cta:hover{ background:var(--maroon-soft); transform:translateY(-1px); } /* .nav--left is the hamburger's wrapper. It must never be hidden — the max-width:900px block below hides only the .navlink children. */ .logo{ display:inline-flex; align-items:baseline; text-decoration:none; color:var(--ink); font-family:var(--font-mark); letter-spacing:.15em; font-size:20px; line-height:1; white-space:nowrap; will-change:transform; justify-self:center; margin-top:.7rem; } .grp{ font-family:var(--font-mark); white-space:nowrap; } #mo{ font-weight:400; -webkit-text-stroke:.45px var(--ink); } #fu{ font-weight:700; color:var(--maroon); margin-left:var(--gap); } .grp span{ display:inline-block; will-change:clip-path,transform; } #fu span{ clip-path:inset(0 100% 0 0); } .slwrap{ display:inline-block; width:0; overflow:visible; } #sl{ display:inline-block; font-family:var(--font-mark); font-weight:700; color:var(--maroon); font-size:20px; will-change:transform,opacity; } .logoslot{ justify-self:center; display:inline-flex; will-change:transform; } /* ---- hero ---- */ .hero{ position:relative; min-height:100dvh; display:flex; flex-direction:column; overflow:hidden; } .hero__swirl{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; } .hero__noise{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; opacity:.35; } .hero__fluid{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; } .hero__center{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:5rem clamp(1.25rem,4vw,3rem) 1.5rem; } /* soft cream halo keeps the swirl off the words */ .hero__center::before{ content:""; position:absolute; z-index:-1; left:50%; top:46%; transform:translate(-50%,-50%); width:min(820px,94%); height:66%; pointer-events:none; background:radial-gradient(closest-side, rgba(240,238,230,.94) 38%, rgba(240,238,230,0)); } .eyebrow{ font-family:var(--font-mono); font-weight:600; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--maroon); margin-bottom:clamp(1rem,2vw,1.5rem); } .statement{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem); line-height:1.1; letter-spacing:-.01em; max-width:22ch; } .statement .type-wrap{ position:relative; display:inline-block; } .statement .ghost{ visibility:hidden; white-space:nowrap; } .statement .typeline{ position:absolute; left:0; bottom:0; white-space:nowrap; } /* underline grows and shrinks with the typed text */ #typed{ border-bottom:.06em solid var(--maroon); padding-bottom:.04em; } .caret{ display:inline-block; width:2px; height:.82em; background:var(--maroon); margin-left:.06em; vertical-align:-.06em; animation:caret 1.05s steps(1) infinite; } @keyframes caret{ 50%{ opacity:0; } } @media (prefers-reduced-motion: reduce){ .caret{ animation:none; } } .hero__floor{ position:relative; z-index:2; width:100%; padding:clamp(1.4rem,4vw,3rem) clamp(.5rem,1.5vw,1rem) clamp(.6rem,1.4vw,1rem); } .hero__floor::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 95% at 50% 100%, rgba(122,48,48,.16), rgba(122,48,48,0) 70%); } .hero__floor svg{ display:block; width:100%; height:auto; } /* placeholder content so the scroll behavior is demonstrable */ .section{ max-width:1100px; margin:0 auto; padding:clamp(4rem,9vw,9rem) clamp(1.25rem,4vw,3rem); } .section h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.8rem,1.3rem+2vw,2.8rem); letter-spacing:-.015em; } .section p{ color:var(--ink-soft); max-width:60ch; line-height:1.7; margin-top:1rem; } .spacer{ height:55vh; } @media (prefers-reduced-motion: reduce){ #fu span,#sl,.logo{ transition:none; } } /* ===== embedded admin mockup (scoped) ===== */ :root{ --ink:#1A1A17; --ink-soft:#56524B; --ink-faint:#8A857B; --cream:#F0EEE6; --surface:#FBFAF6; --paper:#F3F0E8; --line:#DCD6C8; --line-soft:#E7E2D6; --maroon:#7A3030; --maroon-soft:#9A4A4A; --maroon-wash:#F4E9E6; --green:#3E6B4F; --font-body:'Geist',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace; --font-display:'Fraunces',serif; --font-mark:'Syncopate',sans-serif; } .mock /* ---------- 3D stage ---------- */ .stage{ perspective:2200px; perspective-origin:50% 30%; width:100%; max-width:1280px; } .mock .window{ width:100%; transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-17deg) rotate(.6deg) translateZ(0); transform-origin:50% 60%; transition:transform .9s cubic-bezier(.22,.61,.36,1); border-radius:14px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow: 0 2px 4px rgba(26,26,23,.04), 0 40px 80px -30px rgba(26,26,23,.42), 0 90px 140px -60px rgba(122,48,48,.18); } .mock body.flat .window{ transform:none; } .mock .toggle{ position:fixed; top:18px; left:18px; z-index:30; display:inline-flex; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .mock .toggle button{ border:0; background:transparent; color:var(--ink-soft); padding:.5em 1em; cursor:pointer; font:inherit; } .mock .toggle button.on{ background:var(--maroon); color:var(--surface); } .mock /* ---------- chrome top bar ---------- */ .top{ display:flex; align-items:center; gap:18px; height:56px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--paper); } .mock .brand{ display:inline-flex; align-items:baseline; font-family:var(--font-mark); font-size:14px; letter-spacing:.14em; } .mock .brand .mo{ color:var(--ink); -webkit-text-stroke:.4px var(--ink); } .mock .brand .fu{ color:var(--maroon); font-weight:700; margin-left:.06em; } .mock .dot3{ display:inline-flex; gap:6px; margin-right:4px; } .mock .dot3 i{ width:11px; height:11px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.06); } .mock .dot3 i:nth-child(1){ background:#E2C7C2; } .mock .dot3 i:nth-child(2){ background:#E8E2D2; } .mock .dot3 i:nth-child(3){ background:#D8D2C4; } .mock .search{ flex:1; max-width:340px; display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--ink-faint); font-size:13px; } .mock .search svg{ width:15px; height:15px; } .mock .search .k{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--ink-faint); } .mock .top .spacer{ flex:1; } .mock .top .ticon{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--ink-soft); background:var(--surface); position:relative; } .mock .top .ticon svg{ width:16px; height:16px; } .mock .top .ticon .badge{ position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:var(--maroon); border:2px solid var(--paper); } .mock .user{ display:flex; align-items:center; gap:9px; padding-left:6px; } .mock .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#9A4A4A,#5e2626); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; } .mock .user .who{ line-height:1.15; } .mock .user .who b{ font-size:12.5px; font-weight:600; } .mock .user .who span{ font-size:11px; color:var(--ink-faint); display:block; } .mock /* ---------- body grid ---------- */ .body{ display:grid; grid-template-columns:236px 1fr 332px; min-height:640px; } .mock /* sidebar */ .side{ border-right:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; padding:14px 12px; gap:3px; } .mock .side .grouplabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding:14px 10px 6px; } .mock .nav{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px; color:var(--ink-soft); font-size:13.5px; cursor:default; position:relative; } .mock .nav svg{ width:17px; height:17px; flex:none; opacity:.85; } .mock .nav .count{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); } .mock .nav:hover{ background:var(--surface); } .mock .nav.active{ background:var(--maroon-wash); color:var(--maroon); font-weight:500; } .mock .nav.active svg{ opacity:1; } .mock .nav.active::before{ content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--maroon); } .mock .nav.active .count{ color:var(--maroon-soft); } .mock .core{ margin-top:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:11px; } .mock .core .ttl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:6px; } .mock .core .ttl .pulse{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(62,107,79,.5); animation:pulse 2.6s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(62,107,79,.45);} 70%{ box-shadow:0 0 0 6px rgba(62,107,79,0);} 100%{ box-shadow:0 0 0 0 rgba(62,107,79,0);} }.mock .core p{ font-size:12px; color:var(--ink-soft); margin-top:7px; line-height:1.45; } .mock .core p b{ color:var(--ink); font-weight:600; } .mock /* main */ .main{ padding:22px 24px; overflow:hidden; } .mock .crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .mock .head{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:6px; } .mock .head h1{ font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:-.01em; } .mock .head .when{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); } .mock .btn{ font-size:12.5px; font-weight:500; color:var(--surface); background:var(--maroon); border:0; border-radius:7px; padding:.6em 1em; display:inline-flex; align-items:center; gap:7px; } .mock .btn svg{ width:14px; height:14px; } .mock .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; } .mock .kpi{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:13px 14px; } .mock .kpi .lab{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .mock .kpi .num{ font-family:var(--font-display); font-size:30px; line-height:1.1; margin-top:8px; letter-spacing:-.01em; } .mock .kpi .num small{ font-family:var(--font-body); font-size:13px; color:var(--ink-faint); margin-left:3px; } .mock .kpi .delta{ font-size:11.5px; margin-top:5px; display:inline-flex; align-items:center; gap:4px; } .mock .kpi .delta.up{ color:var(--green); } .mock .kpi .delta.flat{ color:var(--ink-faint); } .mock .kpi .delta svg{ width:12px; height:12px; } .mock .panel{ border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-top:18px; overflow:hidden; } .mock .panel .ph{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line-soft); } .mock .panel .ph h2{ font-size:13.5px; font-weight:600; } .mock .panel .ph .meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); } .mock table{ width:100%; border-collapse:collapse; } .mock thead th{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:9px 16px; font-weight:500; } .mock tbody td{ padding:11px 16px; border-top:1px solid var(--line-soft); font-size:13px; vertical-align:middle; } .mock .lead .nm{ font-weight:500; } .mock .lead .sub{ font-size:11.5px; color:var(--ink-faint); } .mock .src{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); } .mock .src .d{ width:7px; height:7px; border-radius:2px; } .mock .chip{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; } .mock .chip.live{ color:var(--green); border-color:#CBD8CC; background:#EEF3EE; } .mock .chip.auto{ color:var(--maroon); border-color:#E7CFC9; background:var(--maroon-wash); } .mock .agent{ display:inline-flex; align-items:center; gap:7px; } .mock .agent .a{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:600; color:#fff; } .mock /* copilot */ .copilot{ border-left:1px solid var(--line); background:linear-gradient(180deg,#FCF8F4 0%, var(--surface) 22%); display:flex; flex-direction:column; } .mock .cop-h{ padding:16px; border-bottom:1px solid var(--line-soft); } .mock .cop-h .row{ display:flex; align-items:center; gap:9px; } .mock .spark{ width:26px; height:26px; border-radius:7px; background:var(--maroon); color:#fff; display:grid; place-items:center; } .mock .spark svg{ width:15px; height:15px; } .mock .cop-h .nm{ font-size:13.5px; font-weight:600; } .mock .cop-h .nm span{ color:var(--maroon); } .mock .cop-h .moai{ font-family:var(--font-mark); font-weight:700; font-size:13px; letter-spacing:.5px; line-height:1; color:var(--ink); display:inline-flex; align-items:baseline; } .mock .cop-h .moai i{ font-style:normal; color:var(--maroon); } .mock .cop-h .moai .sl{ margin-left:1px; } .mock .cop-h .moai .ai{ display:inline-block; margin-left:-1px; letter-spacing:.5px; } /* upright AI, flush to the slash */ .mock .learn{ margin-top:11px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); background:var(--maroon-wash); border:1px solid #ECD8D2; border-radius:8px; padding:7px 9px; } .mock .learn .lp{ width:6px; height:6px; border-radius:50%; background:var(--maroon); animation:pulse2 2s infinite; } @keyframes pulse2{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }.mock .learn b{ color:var(--maroon); font-weight:600; } .mock .thread{ padding:14px; display:flex; flex-direction:column; gap:12px; flex:1; } .mock .msg{ max-width:88%; font-size:12.5px; line-height:1.5; padding:9px 11px; border-radius:11px; } .mock .msg.u{ align-self:flex-end; background:var(--ink); color:var(--cream); border-bottom-right-radius:4px; } .mock .msg.ai{ align-self:flex-start; background:var(--paper); border:1px solid var(--line-soft); border-bottom-left-radius:4px; } .mock .msg.ai .tag{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); display:block; margin-bottom:5px; } .mock .draft{ background:var(--surface); border:1px dashed var(--line); border-radius:8px; padding:8px; margin-top:8px; font-size:12px; color:var(--ink-soft); } .mock .acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .mock .act{ font-size:11.5px; padding:5px 9px; border-radius:7px; border:1px solid var(--line); background:var(--surface); display:inline-flex; align-items:center; gap:6px; color:var(--ink); } .mock .act svg{ width:12px; height:12px; } .mock .act.go{ background:var(--maroon); color:#fff; border-color:var(--maroon); } .mock .cop-in{ margin:0 14px 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:9px 11px; } .mock .cop-in span{ font-size:12.5px; color:var(--ink-faint); flex:1; } .mock .cop-in .send{ width:26px; height:26px; border-radius:7px; background:var(--maroon); color:#fff; display:grid; place-items:center; } .mock .cop-in .send svg{ width:13px; height:13px; } .mock /* wired systems rail */ .rail{ border-top:1px solid var(--line); background:var(--paper); padding:11px 16px; display:flex; align-items:center; gap:14px; overflow:hidden; } .mock .rail .rl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; } .mock .wire{ display:flex; align-items:center; gap:16px; flex:1; flex-wrap:wrap; } .mock .sys{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); white-space:nowrap; } .mock .sys .lv{ width:6px; height:6px; border-radius:50%; background:var(--green); } .mock .sys.idle .lv{ background:var(--ink-faint); } .mock .rail .api{ font-family:var(--font-mono); font-size:11px; color:var(--maroon); white-space:nowrap; } @media (max-width:1180px){.mock .stage{ perspective:none; } .mock .window{ transform:none; } .mock .toggle{ display:none; } } @media (max-width:980px){.mock .body{ grid-template-columns:1fr; } .mock .side, .mock .copilot{ display:none; } } @media (prefers-reduced-motion: reduce){.mock .window{ transition:none; } .mock .core .ttl .pulse, .mock .learn .lp{ animation:none; } } /* ================= stacked peel reel ================= */ .reel{ position:relative; } .pin{ position:sticky; top:0; height:100vh; overflow:hidden; } .mock{ display:contents; } .screen{ position:absolute; inset:0; overflow:hidden; will-change:transform; display:flex; align-items:center; justify-content:center; background:transparent; } .screen::before{ content:""; position:absolute; inset:0; z-index:0; opacity:var(--reel-fill,1); pointer-events:none; will-change:opacity; } .screen .pinner{ position:relative; z-index:1; } /* mock sits above the clay backdrop */ .screen.s0{ z-index:10; } .screen.s0::before{ background:radial-gradient(ellipse farthest-side at 50% 50%, var(--reel-bg-0) 38%, var(--cream) 92%); } .screen.s1{ z-index:11; transform:translateY(100%); } .screen.s1::before{ background:radial-gradient(ellipse farthest-side at 50% 50%, var(--reel-bg-1) 38%, var(--cream) 92%); } .screen.s2{ z-index:12; transform:translateY(100%); } .screen.s2::before{ background:radial-gradient(ellipse farthest-side at 50% 50%, var(--reel-bg-2) 38%, var(--cream) 92%); } .pinner{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(.8rem,2.4vh,1.7rem); padding:0 clamp(1rem,4vw,3rem); } .phead{ text-align:center; will-change:transform,opacity; } .phead .eyebrow{ font-family:var(--font-mono); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--maroon); margin-bottom:.55rem; } .phead h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,4.4vw,3.2rem); letter-spacing:-.01em; } .screen.s1 .phead .eyebrow{ color:#C42A2C; } .screen.s2 .phead .eyebrow{ color:#D9591C; } /* ---- client lockup (MoFusion x partner) — replaces the per-screen eyebrow ---- */ .lockup{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:1.15rem; min-height:46px; } /* faithful replica of the header wordmark (zero-width slash -> MOFUSION, no visible slash) */ .lmark{ display:inline-flex; align-items:baseline; font-family:var(--font-mark); letter-spacing:.15em; line-height:1; white-space:nowrap; font-size:20px; color:var(--ink); } .lmark .lmo{ font-weight:400; -webkit-text-stroke:.45px var(--ink); } .lmark .lfu{ font-weight:700; color:var(--maroon); margin-left:var(--gap); } .lmark .lslwrap{ display:inline-block; width:0; overflow:visible; } .lmark .lsl{ display:inline-block; font-family:var(--font-mark); font-weight:700; color:var(--maroon); font-size:20px; } .lx{ font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1; color:var(--ink-faint); -webkit-text-stroke:.5px var(--ink-faint); } .plogo{ display:block; width:auto; } .plogo.akc{ height:22px; } /* lockup sizing — tweak these two */ .plogo.atlas{ height:58px; } /* ---- traveling logo overlay ---- */ #fly{ position:fixed; inset:0; z-index:999; pointer-events:none; } #fly > *{ position:absolute; top:0; left:0; will-change:transform,opacity; } #flyX,#flyAkc,#flyAtlas{ opacity:0; } .screen .stage{ z-index:1; width:100%; max-width:1160px; perspective:none; will-change:transform,opacity; } .screen .window{ transform:none; transition:none; transform-origin:50% 50%; height:min(78vh,700px); display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 0 0 1px rgba(122,48,48,.08), 0 0 48px rgba(122,48,48,.14), 0 26px 60px -24px rgba(122,48,48,.42); } .screen .window .body{ flex:1; min-height:0; } .screen .window .copilot,.screen .window .side{ min-height:0; } .screen .window .thread{ flex:1; min-height:0; overflow-y:auto; } .screen .window .main{ min-height:0; overflow:auto; } @media (prefers-reduced-motion: reduce){ .reel{ height:auto !important; } .pin{ position:static; height:auto; overflow:visible; } .screen{ position:static; height:100vh; transform:none !important; } } /* ================= live mockup ================= */ .thread{ overflow-y:auto; } @keyframes tdot{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-2px);} } .typing{ display:inline-flex; gap:4px; padding:3px 0; } .typing i{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); display:block; animation:tdot 1.2s infinite; } .typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; } @keyframes msgin{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} } .msg.anim{ animation:msgin .4s ease both; } @keyframes actin{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} } .act.anim{ animation:actin .3s ease both; } .tcaret{ display:inline-block; width:1px; height:1em; background:var(--maroon); margin-left:1px; vertical-align:-2px; animation:tcar 1s steps(1) infinite; } @keyframes tcar{ 50%{ opacity:0; } } @keyframes rowflash{ 0%{ background:var(--maroon-wash);} 100%{ background:transparent;} } tr.newlead td{ animation:rowflash 1.7s ease; } @keyframes livepulse{ 0%,100%{ opacity:.4;} 50%{ opacity:1;} } .sys .lv{ animation:livepulse 2.6s ease-in-out infinite; } .sys.idle .lv{ animation:none; } .sys:nth-child(2) .lv{ animation-delay:.3s; } .sys:nth-child(3) .lv{ animation-delay:.6s; } .sys:nth-child(4) .lv{ animation-delay:.9s; } .sys:nth-child(5) .lv{ animation-delay:1.2s; } @media (prefers-reduced-motion: reduce){ .typing i,.msg.anim,.act.anim,.tcaret,.sys .lv,tr.newlead td{ animation:none !important; } } /* ---- live mockup ---- */ .mock .typing{ display:inline-flex; gap:5px; align-items:center; } .mock .typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:td 1.1s infinite; } .mock .typing i:nth-child(2){ animation-delay:.15s; } .mock .typing i:nth-child(3){ animation-delay:.3s; } @keyframes td{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } } .mock .msg.enter{ animation:msgin .42s ease both; } @keyframes msgin{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none;} } .mock .act.enter{ animation:chipin .3s ease both; } @keyframes chipin{ from{ opacity:0; transform:translateY(4px) scale(.96);} to{ opacity:1; transform:none;} } .mock tbody tr.enter{ animation:rowin .5s ease both; } @keyframes rowin{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} } .mock .chip.flip{ animation:flip .42s ease; } @keyframes flip{ 0%{ transform:scale(.88); opacity:.3;} 100%{ transform:none; opacity:1;} } /* ---- s1 spec-sheet fill + pdf thumb ---- */ .mock .specsheet{ margin-top:8px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); } .mock .specrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 9px; border-bottom:1px solid var(--line-soft); font-size:11.5px; transition:opacity .3s ease, transform .3s ease; } .mock .specrow:last-child{ border-bottom:0; } .mock .specrow .sl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); } .mock .specrow .sv{ color:var(--ink); font-weight:500; } .mock .pdfthumb{ display:flex; align-items:center; gap:9px; margin-top:8px; padding:8px 9px; border:1px solid var(--line); border-radius:8px; background:var(--paper); transition:opacity .35s ease, transform .35s ease; } .mock .pdfthumb .pg{ width:26px; height:32px; border-radius:3px; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:3px; padding:4px; flex:none; box-shadow:0 1px 3px rgba(26,26,23,.08); } .mock .pdfthumb .pg span{ height:2px; border-radius:1px; background:var(--line); } .mock .pdfthumb .pg span:nth-child(2){ width:78%; } .mock .pdfthumb .pg span:nth-child(3){ width:90%; background:var(--maroon-soft); } .mock .pdfthumb .pf{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft); display:flex; flex-direction:column; gap:2px; } .mock .pdfthumb .pf small{ color:var(--ink-faint); font-size:9.5px; letter-spacing:.02em; } @media (prefers-reduced-motion: reduce){ .mock .specrow,.mock .pdfthumb{ transition:none; } } .mock .wire .sys:not(.idle) .lv{ animation:breathe 2.8s ease-in-out infinite; } .mock .wire .sys:nth-child(3) .lv{ animation-delay:.5s; } .mock .wire .sys:nth-child(4) .lv{ animation-delay:1s; } .mock .wire .sys:nth-child(5) .lv{ animation-delay:1.5s; } .mock .wire .sys:nth-child(6) .lv{ animation-delay:2s; } @keyframes breathe{ 0%,100%{ opacity:.5; box-shadow:0 0 0 0 rgba(62,107,79,0);} 50%{ opacity:1; box-shadow:0 0 0 3px rgba(62,107,79,.12);} } @media (prefers-reduced-motion: reduce){ .mock .typing i,.mock .wire .sys .lv{ animation:none; } } /* ---- client-scoped accents for the studio showcase ---- */ .mock.akc{ --maroon:#C42A2C; --maroon-soft:#D94141; --maroon-wash:#F8E9E9; } .mock.bk{ --maroon:#D9591C; --maroon-soft:#F36B2A; --maroon-wash:#FBEDE3; } .mock.akc .window{ box-shadow:0 0 0 1px rgba(196,42,44,.10), 0 0 54px rgba(196,42,44,.16), 0 30px 66px -24px rgba(150,28,30,.42); } .mock.bk .window{ box-shadow:0 0 0 1px rgba(217,89,28,.10), 0 0 54px rgba(217,89,28,.16), 0 30px 66px -24px rgba(170,66,18,.42); } @media (min-width:981px){ .mock.bk .body{ grid-template-columns:1fr 332px; } } @media (min-width:981px){ .mock.akc .body{ grid-template-columns:1fr 332px; } } @media (min-width:981px){ .screen.s0 .window .body{ grid-template-columns:1fr 332px; } } .mock.akc .avatar{ background:linear-gradient(135deg,#D94141,#7e1d1d); } .mock.bk .avatar{ background:linear-gradient(135deg,#F2843E,#b24a12); } .mock .cobrand{ display:inline-flex; align-items:center; gap:8px; line-height:1; white-space:nowrap; } .mock .cobrand .glyph{ width:21px; height:21px; border-radius:6px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:11px; background:var(--maroon); font-family:var(--font-mark); } .mock .cobrand b{ font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--ink); } .mock .cobrand span{ font-family:var(--font-body); font-size:14px; color:var(--ink-soft); font-weight:500; } /* ===== s1 AKC variant generator ===== */ .mock .gencard{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:11px 14px; margin-top:12px; } .mock .gc-top{ display:flex; align-items:center; justify-content:space-between; } .mock .gc-id{ display:flex; align-items:baseline; gap:10px; } .mock .gc-id .pcode{ font-family:var(--font-mono); font-size:14px; letter-spacing:.02em; color:var(--ink); font-weight:500; } .mock .gc-id .pname{ font-size:12.5px; color:var(--ink-faint); } .mock .gc-ip{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--maroon); border:1px solid #E7CFC9; background:var(--maroon-wash); border-radius:999px; padding:2px 9px; } .mock .axes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .mock .axis{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:6px 10px; } .mock .axis small{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); letter-spacing:.02em; } .mock .axis .tick{ width:15px; height:15px; border-radius:4px; background:var(--green); color:#fff; display:grid; place-items:center; } .mock .axis .tick svg{ width:10px; height:10px; } .mock .note{ font-size:11.5px; color:var(--ink-soft); margin-top:11px; line-height:1.45; } .mock table.vmx thead th{ padding:8px 11px; } .mock table.vmx tbody td{ padding:6px 11px; } .mock table.vmx .nm{ font-family:var(--font-mono); font-size:11px; letter-spacing:0; font-weight:500; } .mock table.vmx .fin{ justify-content:flex-start; } .mock .fin .d{ transition:opacity .26s ease, transform .26s ease; } .mock .fin .d.pop{ animation:swpop .34s ease both; } @keyframes swpop{ 0%{ opacity:0; transform:scale(.3);} 70%{ transform:scale(1.18);} 100%{ opacity:1; transform:scale(1);} } .mock .recon{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-soft); transition:opacity .4s ease, transform .4s ease; } .mock .recon b{ color:var(--ink); font-weight:600; } .mock .recon .rdot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 0 3px rgba(62,107,79,.14); } /* ===== s1 datasheet column ===== */ .mock .dscol{ padding:16px; gap:0; } .mock .ds-h{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); display:flex; justify-content:space-between; margin-bottom:12px; } .mock .ds-h span{ color:var(--maroon); } .mock .dsheet{ border:1px solid var(--line); border-radius:10px; background:#fff; padding:14px; box-shadow:0 8px 22px -14px rgba(26,26,23,.3); transition:opacity .4s ease, transform .4s ease; } .mock .ds-brand{ display:flex; align-items:center; gap:7px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); } .mock .ds-logo{ font-family:var(--font-mark,var(--font-display)); font-weight:700; font-size:12px; color:#fff; background:var(--maroon); border-radius:5px; padding:3px 7px; letter-spacing:.04em; } .mock .ds-tag{ font-size:12px; color:var(--ink-soft); flex:1; } .mock .ds-doc{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .mock .ds-title{ font-family:var(--font-display); font-size:18px; margin-top:11px; line-height:1.15; } .mock .ds-title small{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); margin-top:3px; letter-spacing:.02em; } .mock .ds-hero{ margin-top:10px; background:var(--paper); border:1px solid var(--line-soft); border-radius:8px; height:74px; display:grid; place-items:center; } .mock .ds-hero svg{ height:62px; } .mock .ds-tech{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; } .mock .ds-cell{ border:1px solid var(--line-soft); border-radius:8px; padding:6px; background:var(--surface); } .mock .ds-cell .dc-lab{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; } .mock .ds-cell svg{ width:100%; height:48px; display:block; } .mock .ds-specs{ margin-top:10px; } .mock .ds-foot{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-faint); margin-top:10px; text-align:center; } /* ===== s2 Bokun checkout ===== */ .mock .bref{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); border:1px solid var(--line); border-radius:7px; padding:5px 9px; } .mock .bkcard{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:15px 16px; margin-top:16px; } .mock .bk-row{ display:flex; align-items:flex-start; justify-content:space-between; } .mock .bk-exp{ font-size:14.5px; font-weight:500; color:var(--ink); } .mock .bk-exp small{ display:block; font-size:11.5px; color:var(--ink-faint); font-weight:400; margin-top:3px; } .mock .bk-amt{ font-family:var(--font-display); font-size:24px; text-align:right; letter-spacing:-.01em; } .mock .bk-amt small{ display:block; font-family:var(--font-body); font-size:11.5px; color:var(--ink-faint); margin-top:2px; } .mock .bk-state{ display:flex; align-items:center; gap:9px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft); } .mock .bk-id{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); } .mock .paypill{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; padding:3px 10px; border-radius:999px; border:1px solid #E7CFC9; background:var(--maroon-wash); color:var(--maroon); } .mock .paypill.paid{ border-color:#CBD8CC; background:#EEF3EE; color:var(--green); } .mock .steps{ list-style:none; padding:14px 16px; margin:0; } .mock .step{ display:flex; gap:12px; position:relative; padding-bottom:16px; } .mock .step:last-child{ padding-bottom:0; } .mock .step::before{ content:""; position:absolute; left:10px; top:22px; bottom:2px; width:2px; background:var(--line); } .mock .step:last-child::before{ display:none; } .mock .snode{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center; flex:none; z-index:1; color:#fff; } .mock .snode svg{ width:11px; height:11px; opacity:0; } .mock .step.active .snode{ border-color:var(--maroon); box-shadow:0 0 0 3px rgba(122,48,48,.12); } .mock .step.done .snode{ border-color:var(--green); background:var(--green); } .mock .step.done .snode svg{ opacity:1; } .mock .step.done::before{ background:var(--green); } .mock .sbody .st{ font-size:13px; font-weight:500; color:var(--ink); } .mock .step.active .sbody .st{ color:var(--maroon); } .mock .sbody .ss{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; } .mock .bkdone{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid var(--line-soft); background:#EEF3EE; transition:opacity .4s ease, transform .4s ease; } .mock .bd-pill{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; padding:3px 10px; border-radius:999px; background:var(--green); color:#fff; } .mock .bd-tx{ font-size:12px; color:var(--ink-soft); } /* Telr column */ .mock .paycol{ padding:16px; } .mock .telr{ border:1px solid var(--line); border-radius:10px; background:#fff; padding:13px; box-shadow:0 8px 22px -14px rgba(26,26,23,.3); } .mock .tl-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink); } .mock .tl-lock{ width:13px; height:13px; border-radius:3px; border:2px solid var(--green); position:relative; flex:none; } .mock .tl-lock::after{ content:""; position:absolute; inset:2px 3px; border-top:2px solid var(--green); border-radius:3px 3px 0 0; } .mock .tl-amt{ font-family:var(--font-display); font-size:26px; margin:8px 0 12px; letter-spacing:-.01em; } .mock .tl-field{ border:1px solid var(--line); border-radius:7px; padding:7px 9px; background:var(--surface); } .mock .tl-field span{ display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .mock .tl-field b{ font-size:12.5px; color:var(--ink-soft); font-weight:500; letter-spacing:.04em; } .mock .tl-row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; } .mock .tl-pay{ margin-top:11px; text-align:center; font-size:12.5px; font-weight:500; color:#fff; background:var(--maroon); border-radius:8px; padding:9px; transition:background .3s ease; } .mock .tl-pay.processing{ background:var(--ink-soft); } .mock .tl-pay.approved{ background:var(--green); } .mock .vlog{ font-family:var(--font-mono); font-size:11px; line-height:1.5; margin-top:13px; border:1px solid var(--line-soft); border-radius:8px; background:var(--surface); padding:9px 11px; color:var(--ink-soft); } .mock .vlog .vl{ display:flex; align-items:center; gap:7px; transition:opacity .3s ease, transform .3s ease; } .mock .vlog .vl::before{ content:"\203A"; color:var(--ink-faint); } .mock .vlog .vl.ok{ color:var(--green); font-weight:600; } .mock .plabels{ margin-top:13px; display:flex; flex-direction:column; gap:8px; } .mock .pl{ display:flex; gap:8px; font-size:11px; color:var(--ink-soft); line-height:1.4; } .mock .pl-dot{ width:6px; height:6px; border-radius:50%; background:var(--maroon); flex:none; margin-top:5px; } /* ===== inset -> full-bleed reel intro (Anthropic-style) ===== */ :root{ --reel-peek:40vh; /* how far the reel card peeks up into the hero (higher = closer to the middle) */ --reel-inset-x:0vw; /* no card framing: mock lays as-is at the peek */ --reel-inset-r:0px; /* no rounded card corners */ /* second-page backdrop: warmer/deeper than the hero cream (#F0EEE6) so the card edge + expand read. s0 peeks first and carries the contrast; s1/s2 keep their relative steps so the peel still reads. */ --reel-bg-0:#E2D8C4; --reel-bg-1:#EFE8D9; --reel-bg-2:#E7DCC8; } .hero__floor{ display:none; } /* fusion engine parked for now */ .reel{ position:relative; z-index:5; margin-top:calc(-1 * var(--reel-peek)); } .reel .pin{ will-change:clip-path; } @media (prefers-reduced-motion: reduce){ .reel{ margin-top:0; } .reel .pin{ clip-path:none; } } /* ===== the wire: one thread through the whole page ===== */ .spine{ position:relative; background:var(--cream); overflow:hidden; padding:clamp(4rem,9vw,8rem) clamp(1.25rem,4vw,3rem) clamp(5rem,10vw,9rem); } .spine__svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .spine__svg path{ fill:none; } #wireTrack{ stroke:var(--line); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.75; } #wirePath{ stroke:var(--maroon); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.85; } .station{ position:relative; max-width:560px; margin:0 auto clamp(6rem,14vw,11rem); opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .station.on{ opacity:1; transform:none; } .station:last-child{ margin-bottom:0; } .station--left{ margin-left:clamp(0px,8vw,8rem); margin-right:auto; } .station--right{ margin-right:clamp(0px,8vw,8rem); margin-left:auto; } .station--center{ text-align:center; margin-left:auto; margin-right:auto; } @media (max-width:760px){ .station--left,.station--right{ margin-left:auto; margin-right:auto; } } .kicker{ font-family:var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--maroon); display:flex; align-items:center; gap:.6em; margin-bottom:1rem; } .kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--maroon); box-shadow:0 0 0 4px rgba(122,48,48,.12); flex:none; } .station h2{ font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; line-height:1.15; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem); color:var(--ink); } .station .body{ margin-top:1rem; color:var(--ink-soft); line-height:1.75; font-size:clamp(.98rem,.94rem + .25vw,1.1rem); } /* the note (typewriter) */ .note__line{ min-height:1.25em; } #noteTyped{ border-bottom:.06em solid var(--maroon); padding-bottom:.05em; } .note__caret{ display:inline-block; width:2px; height:.85em; background:var(--maroon); margin-left:.08em; vertical-align:-.08em; animation:caret 1.05s steps(1) infinite; } .note.done .note__caret{ display:none; } .note__sign{ margin-top:1.4rem; font-family:var(--font-mark); font-weight:700; font-size:15px; letter-spacing:.5px; color:var(--ink); } .note__sign i{ font-style:normal; color:var(--maroon); } /* the ops console */ .console{ margin-top:1.4rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 2px 4px rgba(26,26,23,.04), 0 26px 52px -34px rgba(26,26,23,.35); overflow:hidden; } .console__bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line-soft); } .console__bar span{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; } .console__log{ padding:12px 14px 14px; min-height:176px; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; } .logline{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); display:flex; gap:.6em; align-items:baseline; opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; } .logline.in{ opacity:1; transform:none; } .logline .t{ color:var(--maroon); flex:none; } .logline b{ color:var(--ink); font-weight:600; } /* work rows */ .work{ margin-top:1.2rem; border-top:1px solid var(--line); } .workrow{ display:flex; gap:1rem; justify-content:space-between; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--line); } .workrow .wname{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); white-space:nowrap; } .workrow .wdesc{ color:var(--ink-soft); font-size:.92rem; text-align:right; max-width:62%; line-height:1.5; } @media (max-width:600px){ .workrow{ flex-direction:column; gap:.3rem; } .workrow .wdesc{ text-align:left; max-width:none; } } /* magnetic CTA */ .magbtn{ display:inline-block; margin-top:1.4rem; font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--cream); background:var(--maroon); text-decoration:none; padding:.85em 1.7em; border-radius:999px; transition:background .25s ease, transform .25s ease; will-change:transform; } .magbtn:hover{ background:var(--maroon-soft); } /* ===== hanza-schema layout & animation system ===== */ /* scroll progress hairline */ .progress{ position:fixed; top:0; left:0; width:100%; height:2px; background:var(--maroon); transform:scaleX(0); transform-origin:0 50%; z-index:60; pointer-events:none; } /* header extras */ .hdr-time{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--ink-soft); } @media (max-width:900px){ .hdr-time{ display:none; } } .btn-cta em, .magbtn em{ font-style:normal; opacity:.72; margin-left:2px; } /* hero service list */ .hero__svcs{ margin-top:clamp(1.6rem,3vw,2.4rem); display:flex; gap:clamp(1.1rem,3vw,2.4rem); flex-wrap:wrap; justify-content:center; } .hsvc{ font-size:14px; color:var(--ink-soft); opacity:0; transform:translateY(12px); animation:hsvc .7s cubic-bezier(.22,.61,.36,1) forwards; } .hsvc:nth-child(1){ animation-delay:.45s } .hsvc:nth-child(2){ animation-delay:.6s } .hsvc:nth-child(3){ animation-delay:.75s } .hsvc i{ font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--maroon); margin-right:.45em; } @keyframes hsvc{ to{ opacity:1; transform:none; } } /* skills ticker */ .tick{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.85rem 0; background:var(--cream); } .tick__row{ display:flex; gap:3.4rem; width:max-content; animation:tick 30s linear infinite; } .tick span{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; } @keyframes tick{ to{ transform:translateX(-50%); } } /* section shell */ .sec{ max-width:1100px; margin:0 auto; padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,4vw,3rem); } .shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,4.5vw,3.2rem); } /* centred variant. .kicker is a flex container, so text-align cannot reach it and it needs justify-content of its own. */ .shead--mid{ justify-content:center; text-align:center; } .shead--mid .kicker{ justify-content:center; } .stitle{ font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; line-height:1.08; font-size:clamp(2.1rem,1.5rem + 3vw,3.6rem); color:var(--ink); } .ssub{ color:var(--ink-soft); max-width:30ch; line-height:1.65; font-size:.95rem; text-align:right; } @media (max-width:760px){ .shead{ flex-direction:column; align-items:flex-start; } .ssub{ text-align:left; } } .lede{ color:var(--ink-soft); line-height:1.8; font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); max-width:62ch; } /* masked title reveal */ .t-mask{ display:block; overflow:hidden; } .t-mask > span{ display:block; transform:translateY(112%); transition:transform .9s cubic-bezier(.22,.61,.36,1); } .rv.on .t-mask > span{ transform:none; } /* reveal system with stagger */ .rv .rvi{ opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); } .rv.on .rvi{ opacity:1; transform:none; } .rv.on .rvi:nth-child(1){ transition-delay:.04s } .rv.on .rvi:nth-child(2){ transition-delay:.12s } .rv.on .rvi:nth-child(3){ transition-delay:.2s } .rv.on .rvi:nth-child(4){ transition-delay:.28s } .rv.on .rvi:nth-child(5){ transition-delay:.36s } .rv.on .rvi:nth-child(6){ transition-delay:.44s } /* stats with count-up */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem); } .stat{ background:var(--cream); padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; } .stat .v{ font-family:var(--font-display); font-size:clamp(2rem,1.5rem + 2vw,3rem); color:var(--ink); line-height:1; } .stat .l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } @media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } } /* case ledger rows */ .cases{ border-top:1px solid var(--line); } .crow{ display:grid; grid-template-columns:2.6rem 1fr 1.6fr auto 1.4rem; gap:1.2rem; align-items:baseline; padding:1.5rem .65rem; border-bottom:1px solid var(--line); text-decoration:none; cursor:pointer; transition:background .35s ease, padding-left .35s cubic-bezier(.22,.61,.36,1); } .crow:hover{ background:var(--surface); padding-left:1.2rem; } .crow .n{ font-family:var(--font-mono); font-size:12px; color:var(--maroon); } .crow .cl{ font-family:var(--font-display); font-size:clamp(1.2rem,1rem + 1vw,1.6rem); color:var(--ink); } .crow .cd{ color:var(--ink-soft); font-size:.93rem; line-height:1.55; } .crow .yr{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); } .crow .ar{ color:var(--maroon); opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; } .crow:hover .ar{ opacity:1; transform:none; } @media (max-width:760px){ .crow{ grid-template-columns:2.2rem 1fr auto; } .crow .cd{ grid-column:2 / -1; } .crow .ar{ display:none; } } /* services accordion */ .accs{ border-top:1px solid var(--line); } .acc{ border-bottom:1px solid var(--line); } .acc__head{ width:100%; display:grid; grid-template-columns:2.6rem 1fr auto; gap:1.2rem; align-items:center; background:none; border:0; cursor:pointer; text-align:left; padding:1.35rem .65rem; transition:padding-left .35s cubic-bezier(.22,.61,.36,1); } .acc__head:hover{ padding-left:1.2rem; } .acc__head .n{ font-family:var(--font-mono); font-size:12px; color:var(--maroon); } .acc__head .at{ font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .9vw,1.55rem); color:var(--ink); } .acc__head .ax{ font-family:var(--font-mono); font-size:1.2rem; color:var(--ink-faint); line-height:1; transition:transform .45s cubic-bezier(.22,.61,.36,1), color .3s ease; } .acc.open .acc__head .ax{ transform:rotate(45deg); color:var(--maroon); } .acc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1); } .acc.open .acc__body{ grid-template-rows:1fr; } .acc__inner{ overflow:hidden; } .acc__inner p{ padding:0 .65rem 1.4rem 4.45rem; color:var(--ink-soft); line-height:1.7; font-size:.96rem; max-width:60ch; } @media (max-width:600px){ .acc__inner p{ padding-left:.65rem; } } /* process steps */ .steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .step{ background:var(--cream); padding:clamp(1.4rem,3vw,2rem); } .step .bignum{ display:block; font-family:var(--font-display); font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem); color:var(--line); line-height:1; transition:color .4s ease; } .step:hover .bignum{ color:var(--maroon); } .step .sl{ display:block; margin-top:.9rem; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--maroon); } .step h3{ margin-top:.5rem; font-family:var(--font-display); font-weight:400; font-size:1.2rem; color:var(--ink); } .step p{ margin-top:.55rem; color:var(--ink-soft); font-size:.93rem; line-height:1.65; } @media (max-width:700px){ .steps{ grid-template-columns:1fr; } } /* contact */ .sec--contact{ text-align:center; padding-bottom:clamp(3rem,6vw,5rem); } .sec--contact .kicker{ justify-content:center; } .stitle--big{ font-size:clamp(2.3rem,1.6rem + 3.6vw,4rem); max-width:18ch; margin:0 auto; } .ssub--c{ max-width:40ch; margin:1.1rem auto 0; text-align:center; } .sec--contact .magbtn{ margin-top:2rem; font-size:16px; padding:.95em 1.9em; } .cmeta{ margin-top:1.6rem; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } /* footer */ .foot{ display:flex; gap:.6rem; justify-content:center; align-items:baseline; padding:1.6rem 1rem 2rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } @media (prefers-reduced-motion: reduce){ .hsvc{ animation:none; opacity:1; transform:none; } .tick__row{ animation:none; } .rv .rvi, .t-mask > span{ opacity:1; transform:none; transition:none; } } /* ===== delphi skin ===== */ /* --- the exec orb (Mo's app CSS, gold palette) --- */ @property --siri-angle{ syntax:""; inherits:false; initial-value:0deg; } .siri-orb{ --c1:oklch(82% 0.10 88); --c2:oklch(90% 0.06 96); --c3:oklch(66% 0.11 60); --siri-blur:7px; --siri-contrast:1.9; --siri-duration:180s; --orb-size:96px; width:var(--orb-size); height:var(--orb-size); display:grid; grid-template-areas:"stack"; overflow:hidden; border-radius:50%; position:relative; flex-shrink:0; background:radial-gradient(circle at 50% 45%, rgba(236,210,150,.18) 0%, rgba(201,169,106,.06) 42%, transparent 72%); box-shadow:0 16px 46px rgba(201,169,106,.28); } .siri-orb::before{ content:""; display:block; grid-area:stack; width:100%; height:100%; border-radius:50%; background: conic-gradient(from calc(var(--siri-angle) * 1.2) at 30% 65%, var(--c3) 0deg, transparent 45deg 315deg, var(--c3) 360deg), conic-gradient(from calc(var(--siri-angle) * 0.8) at 70% 35%, var(--c2) 0deg, transparent 60deg 300deg, var(--c2) 360deg), conic-gradient(from calc(var(--siri-angle) * -1.5) at 65% 75%, var(--c1) 0deg, transparent 90deg 270deg, var(--c1) 360deg), conic-gradient(from calc(var(--siri-angle) * 2.1) at 25% 25%, var(--c2) 0deg, transparent 30deg 330deg, var(--c2) 360deg), conic-gradient(from calc(var(--siri-angle) * -0.7) at 80% 80%, var(--c1) 0deg, transparent 45deg 315deg, var(--c1) 360deg), radial-gradient(ellipse 120% 80% at 40% 60%, var(--c3) 0%, transparent 50%); filter:blur(var(--siri-blur)) contrast(var(--siri-contrast)) saturate(1.3); /* Round this layer itself rather than trusting the parent to clip it. overflow:hidden plus border-radius is not honoured for a composited descendant on WebKit, and this layer is composited and filtered, which is what let its square corners show through. The mask rides on the element, so it survives promotion. Kept off .siri-orb itself because a mask there would also cut the box-shadow that gives the orb its glow, and feathered from 94% rather than cut at the rim, because a hard mask edge replaced the blur's soft falloff with a visible disc. */ -webkit-mask-image:radial-gradient(closest-side, #000 94%, transparent 99.5%); mask-image:radial-gradient(closest-side, #000 94%, transparent 99.5%); animation:siri-rotate var(--siri-duration) linear infinite; transform:translateZ(0); will-change:transform; } .siri-orb::after{ content:""; display:block; grid-area:stack; width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 45% 55%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 30%, transparent 60%); mix-blend-mode:overlay; } @keyframes siri-rotate{ from{ --siri-angle:0deg; } to{ --siri-angle:3600deg; } } @media (prefers-reduced-motion: reduce){ .siri-orb::before{ animation:none; } } /* Touch and narrow devices: freeze the conic stack. Animating --siri-angle repaints six gradients plus a blur/contrast/saturate chain every frame, which no phone GPU absorbs cheaply. Frozen, the orb rasterises once and the scroll flight becomes a transform on a cached texture. will-change is dropped with it: ::before never transforms, so it only forced a layer re-upload per frame. A full turn takes 180s, so nothing visible is lost. */ @media (max-width:900px), (pointer:coarse){ .siri-orb::before{ animation:none; will-change:auto; } } .hero--d{ min-height:100dvh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--cream); } .hero--d .hero__center{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:7rem clamp(1.25rem,4vw,3rem) 3rem; } /* arched centerpiece card */ .hcard{ display:flex; flex-direction:column; align-items:center; gap:.55rem; width:min(300px, 82vw); padding:2rem 1.4rem 1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:150px 150px 22px 22px; box-shadow:0 2px 4px rgba(26,26,23,.05), 0 34px 70px -34px rgba(26,26,23,.35); opacity:0; transform:translateY(16px); animation:drise .9s cubic-bezier(.22,.61,.36,1) .05s forwards; } .hcard__name{ margin-top:.7rem; font-family:var(--font-display); font-size:1.35rem; color:var(--ink); letter-spacing:-.01em; } .hcard__role{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; } .hcard__ask{ margin-top:.8rem; width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid var(--line); background:var(--cream); border-radius:999px; padding:.4em .4em .4em 1em; font-size:12.5px; color:var(--ink-faint); } .hcard__ask em{ font-style:normal; background:var(--maroon); color:var(--cream); font-weight:500; font-size:12.5px; padding:.5em 1.1em; border-radius:999px; } .hfig{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:min(296px, 86vw); padding:2.7rem 1.6rem 1.9rem; border-radius:170px 170px 28px 28px; /* the dome */ background:rgba(255,255,255,.05); /* no colour, just a film for the glass */ backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); position:relative; border:1px solid rgba(255,242,214,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(214,168,92,.16), 0 0 44px -6px rgba(214,168,92,.34), 0 0 110px -18px rgba(214,168,92,.26), 0 34px 68px -44px rgba(26,26,23,.2); opacity:0; transform:translateY(16px); animation:drise .9s cubic-bezier(.22,.61,.36,1) .05s forwards; } .hfig .siri-orb{ margin-bottom:.9rem; } /* legacy solid orb */ .hfig__name{ font-family:var(--font-display); font-size:1.4rem; color:var(--ink); letter-spacing:-.01em; } .hfig__role{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; } .d-head{ margin-top:2.4rem; font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; line-height:1.06; font-size:clamp(2.5rem,1.6rem + 4.4vw,4.4rem); color:var(--ink); opacity:0; transform:translateY(18px); animation:drise .9s cubic-bezier(.22,.61,.36,1) .25s forwards; } .d-sub{ margin-top:1.3rem; font-size:15.5px; line-height:1.7; color:var(--ink-soft); max-width:52ch; opacity:0; transform:translateY(14px); animation:drise .8s cubic-bezier(.22,.61,.36,1) .45s forwards; } .d-ctas{ margin-top:1.9rem; display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; opacity:0; transform:translateY(12px); animation:drise .8s cubic-bezier(.22,.61,.36,1) .6s forwards; } @keyframes drise{ to{ opacity:1; transform:none; } } .pill{ display:inline-block; font-family:var(--font-body); font-weight:500; font-size:14.5px; padding:.78em 1.5em; border-radius:999px; text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .pill--ink{ background:var(--maroon); color:var(--cream); } .pill--ink:hover{ background:var(--ink); transform:translateY(-1px); } .pill--ghost{ color:var(--ink); border:1px solid var(--line); background:var(--surface); } .pill--ghost:hover{ border-color:var(--ink); transform:translateY(-1px); } /* --- orbit scatter: tilted chips + question cards on an arc --- */ .orbit{ position:absolute; inset:0; z-index:1; pointer-events:none; } .ochip,.oq{ position:absolute; background:rgba(255,252,245,.66); border:1px solid rgba(255,242,214,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(214,168,92,.10), 0 26px 52px -32px rgba(26,26,23,.18); opacity:0; animation:fin .9s cubic-bezier(.22,.61,.36,1) forwards, obob 8s ease-in-out 2s infinite; } .ochip{ display:flex; flex-direction:column; gap:.32rem; border-radius:18px; padding:.85rem 1.1rem; width:max-content; } .oq{ display:flex; flex-direction:column; gap:.45rem; border-radius:20px; padding:.95rem 1.1rem; max-width:192px; } .ok{ display:flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); } .ok::before{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(201,169,106,.95); } .ov{ font-size:12px; color:var(--ink-soft); letter-spacing:.01em; } .ov b{ color:var(--ink); font-weight:500; } .ov em{ font-style:normal; color:var(--maroon); } .ow{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .oqt{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:15px; color:var(--ink); line-height:1.45; letter-spacing:.005em; } .ochip--reply{ flex-direction:row; align-items:center; gap:.65rem; padding:.7rem 1.05rem; border-radius:999px; } .owave{ display:flex; align-items:flex-end; gap:2.5px; height:12px; } .owave i{ width:1.5px; background:var(--maroon); border-radius:2px; opacity:.7; animation:wv 1.1s ease-in-out infinite; } .owave i:nth-child(1){ height:4px; } .owave i:nth-child(2){ height:10px; animation-delay:.12s; } .owave i:nth-child(3){ height:6px; animation-delay:.24s; } .owave i:nth-child(4){ height:12px; animation-delay:.36s; } .owave i:nth-child(5){ height:5px; animation-delay:.48s; } @keyframes wv{ 0%,100%{ transform:scaleY(.6); } 50%{ transform:scaleY(1); } } /* arc positions, each with its own tilt (fallback for browsers without Motion Path) */ .oc1{ left:14%; top:16%; --rot:-9deg; } .oc3{ left:6%; top:34%; --rot:-7deg; } .oc5{ left:10%; top:52%; --rot:-14deg; } .oc7{ left:17%; top:70%; --rot:-11deg; } .oc9{ left:24%; top:26%; --rot:-5deg; } .oc2{ right:13%; top:15%; --rot:8deg; } .oc4{ right:6%; top:34%; --rot:11deg; } .oc6{ right:10%; top:53%; --rot:14deg; } .oc8{ right:16%; top:71%; --rot:10deg; } .oc10{ right:24%; top:26%; --rot:6deg; } .oc11{ right:-3%; top:80%; --rot:12deg; } @keyframes fin{ to{ opacity:1; } } @keyframes obob{ 0%,100%{ transform:rotate(var(--rot,0deg)) translateY(0); } 50%{ transform:rotate(var(--rot,0deg)) translateY(-8px); } } .ochip,.oq{ transform:rotate(var(--rot,0deg)); } @media (max-width:1023px){ .orbit{ display:none; } } /* --- the arc current: one dome-shaped trajectory, left to right. Cards fade in at the lower-left, climb the arc, crest behind the dome card, descend the right side and fade out. offset-rotate:auto keeps every card tangent to the path, so the tilts stay coordinated like beads on a string. The path lives on a fixed 1920px stage centered in the hero, so the curve is identical at every viewport. Browsers without Motion Path keep the static tilted scatter defined above. --- */ @supports (offset-path: path('M 0 0 L 1 1')){ .orbit{ left:50%; right:auto; width:1680px; transform:translateX(-50%); /* cards dissolve as they pass the orb's space, re-materialise beyond it */ -webkit-mask-image:radial-gradient(ellipse 330px 250px at 50% 215px, transparent 58%, #000 82%); mask-image:radial-gradient(ellipse 330px 250px at 50% 215px, transparent 58%, #000 82%); } .ochip,.oq{ left:0; right:auto; top:0; opacity:0; transform:none; filter:none; offset-path:path('M -140 760 C 400 10, 1280 10, 1820 760'); offset-rotate:auto; offset-distance:var(--od,0%); animation:oflow 42s linear infinite; } /* depth of field: questions foreground, chips recede in tiers */ .oq{ transform:scale(1); } .oc10{ transform:scale(.95); } .oc1,.oc7{ transform:scale(.9); } .oc5,.oc11{ transform:scale(.86); } .oc3,.oc9{ transform:scale(.8); filter:blur(1.1px) opacity(.72); } /* eleven cards, evenly spaced along the arc */ .oc1{ --od:0%; animation-delay:0s; } .oc2{ --od:9.1%; animation-delay:-3.8s; } .oc3{ --od:18.2%; animation-delay:-7.6s; } .oc4{ --od:27.3%; animation-delay:-11.5s; } .oc5{ --od:36.4%; animation-delay:-15.3s; }.oc6{ --od:45.5%; animation-delay:-19.1s; } .oc7{ --od:54.5%; animation-delay:-22.9s; }.oc8{ --od:63.6%; animation-delay:-26.7s; } .oc9{ --od:72.7%; animation-delay:-30.5s; }.oc10{ --od:81.8%; animation-delay:-34.4s; } .oc11{ --od:90.9%; animation-delay:-38.2s; } @keyframes oflow{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 90%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } } @media (prefers-reduced-motion: reduce){ .ochip,.oq{ animation:none; opacity:1; } .oc1{ --od:8%; } .oc11{ --od:90%; } } } /* floating evidence cards */ .hero__cards{ position:absolute; inset:0; z-index:1; pointer-events:none; } .fcard{ position:absolute; display:flex; flex-direction:column; gap:.45rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; width:232px; box-shadow:0 2px 4px rgba(26,26,23,.04), 0 22px 44px -26px rgba(26,26,23,.28); opacity:0; animation:fin .9s cubic-bezier(.22,.61,.36,1) forwards; } .fcard::after{ content:""; display:none; } .fk{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); } .fv{ font-size:13px; color:var(--ink-soft); line-height:1.5; } .fv b{ color:var(--ink); font-weight:600; } .fwho{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); } .fq{ font-size:13.5px; color:var(--ink); line-height:1.5; } .fmark{ font-family:var(--font-mark); font-weight:700; font-size:15px; color:var(--ink); } .fmark i{ font-style:normal; color:var(--maroon); } .fask{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid var(--line); border-radius:999px; padding:.45em .5em .45em .9em; font-size:12px; color:var(--ink-faint); } .fask em{ font-style:normal; background:var(--ink); color:var(--cream); font-size:11.5px; padding:.35em .85em; border-radius:999px; } /* positions + entrance then endless gentle bob (comma-combined so they don't cancel) */ .fcard{ animation:fin .9s cubic-bezier(.22,.61,.36,1) forwards, fbob 8s ease-in-out 1.8s infinite; } .fc1{ left:6%; top:20%; animation-delay:.55s, 1.8s; } .fc2{ left:9%; top:38%; animation-delay:.7s, 2.3s; animation-duration:.9s, 9s; } .fc3{ left:5%; top:57%; animation-delay:.85s, 2.7s; animation-duration:.9s, 10s; } .fc4{ right:6%; top:22%; animation-delay:.65s, 2.0s; animation-duration:.9s, 8.5s; } .fc5{ right:9%; top:44%; animation-delay:.8s, 2.5s; animation-duration:.9s, 9.5s; } .fc6{ right:7%; top:64%; animation-delay:.95s, 2.2s; animation-duration:.9s, 7.5s; } @keyframes fin{ to{ opacity:1; } } @keyframes fbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } @media (max-width:1023px){ .hero__cards{ display:none; } } /* delphi restraint: labels + numbers go quiet ink, maroon only on interaction */ .kicker{ color:var(--ink-faint); } .kicker::before{ display:none; } .crow .n, .acc__head .n{ color:var(--ink-faint); } .crow:hover .n, .acc.open .acc__head .n{ color:var(--maroon); } .step .sl{ color:var(--ink-faint); } .step:hover .sl{ color:var(--maroon); } .step p{ font-family:var(--font-mono); font-size:12.5px; line-height:1.7; letter-spacing:.01em; } .ssub{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.01em; } .btn-cta{ background:var(--ink); border-radius:999px; } .btn-cta:hover{ background:var(--maroon); } .magbtn{ background:var(--ink); } .magbtn:hover{ background:var(--maroon); } .cmeta{ color:var(--ink-faint); } @media (prefers-reduced-motion: reduce){ .d-head,.d-sub,.d-ctas,.hfig{ animation:none; opacity:1; transform:none; } .ochip,.oq{ animation:fin .01s forwards; } .oc8{ animation:fin8 .01s forwards; } .owave i{ animation:none; } } /* cormorant weight tuning: small display sizes carry more ink */ .hfig__name{ font-weight:500; } .crow .cl{ font-weight:500; } .acc__head .at{ font-weight:500; } .step h3{ font-weight:500; } .stat .v{ font-weight:400; } .step .bignum{ font-weight:400; } /* shattered exec orb: particle cloud on canvas, soft gold ambience behind */ .orbwrap{ position:relative; display:block; width:208px; height:208px; margin-bottom:.5rem; } .orbwrap::before{ content:""; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle at 50% 44%, rgba(214,168,92,.5), rgba(201,169,106,0) 72%); filter:blur(18px); } .orbshatter{ position:relative; z-index:1; display:block; width:100%; height:100%; } /* executive buttons: tracked caps, hairlines, gold on approach */ .btn-exec{ margin-top:.9rem; display:inline-block; font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:.85em 2em; border-radius:999px; border:1px solid rgba(26,26,23,.16); background:transparent; transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; } .btn-exec:hover{ border-color:rgba(201,169,106,.85); background:rgba(214,168,92,.08); transform:translateY(-1px); box-shadow:0 10px 24px -16px rgba(201,169,106,.5); } .pill{ text-transform:uppercase; letter-spacing:.18em; font-size:11.5px; font-weight:500; padding:1em 2em; } .pill--ink{ background:var(--ink); } .pill--ink:hover{ background:var(--maroon); } .btn-cta{ text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; padding:.8em 1.6em; } .magbtn{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:500; padding:1.05em 2.2em; } .hfig__name{ font-size:1.5rem; } .orbsolid{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:1; } /* breathing golden halo around the dome, matched to the orb */ .hfig::after{ content:""; position:absolute; inset:-20px; z-index:-1; border-radius:190px 190px 44px 44px; background:radial-gradient(62% 56% at 50% 30%, rgba(214,168,92,.34), rgba(214,168,92,0) 72%); filter:blur(18px); animation:glowpulse 7s ease-in-out infinite; pointer-events:none; } @keyframes glowpulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .hfig::after{ animation:none; opacity:.85; } } /* one executive button language across the site */ .btn-cta, .pill--ink, .pill--ghost, .magbtn{ background:transparent; color:var(--ink); border:1px solid rgba(26,26,23,.16); transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; } .btn-cta:hover, .pill--ink:hover, .pill--ghost:hover, .magbtn:hover{ background:rgba(214,168,92,.08); border-color:rgba(201,169,106,.85); color:var(--ink); transform:translateY(-1px); box-shadow:0 10px 24px -16px rgba(201,169,106,.5); } /* nav links as executive pills; flagship actions in maroon */ .navlink{ padding:.5em 1.2em; border:1px solid rgba(26,26,23,.13); border-radius:999px; text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; font-weight:500; color:var(--ink-soft); transition:border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease; } .navlink:hover{ color:var(--ink); border-color:rgba(201,169,106,.85); background:rgba(214,168,92,.08); transform:translateY(-1px); } .btn-cta, .pill--ink, .magbtn{ background:var(--maroon); border-color:var(--maroon); color:var(--cream); } .btn-cta:hover, .pill--ink:hover, .magbtn:hover{ background:var(--maroon-soft); border-color:var(--maroon-soft); color:var(--cream); box-shadow:0 12px 26px -16px rgba(122,48,48,.55); } /* the pulse: orb swells, a golden ripple crosses the dome, the halo absorbs it */ .ripples{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:0; pointer-events:none; /* the wave can never paint over the orb: it emerges from behind its silhouette */ -webkit-mask-image:radial-gradient(circle at 50% 147px, transparent 86px, #000 112px); mask-image:radial-gradient(circle at 50% 147px, transparent 86px, #000 112px); } .hfig > *:not(.ripples){ position:relative; z-index:1; } .rip{ position:absolute; width:780px; height:780px; margin:-390px 0 0 -390px; overflow:visible; pointer-events:none; opacity:0; transform:scale(.192); will-change:transform,opacity; filter:drop-shadow(0 0 26px rgba(214,168,92,.6)) drop-shadow(0 0 56px rgba(214,168,92,.32)); animation:ripgo 1.35s cubic-bezier(.2,.6,.3,1) forwards; } .rip circle{ fill:none; stroke:rgba(228,180,96,.95); stroke-width:2.5; vector-effect:non-scaling-stroke; } .rip--soft{ filter:drop-shadow(0 0 18px rgba(214,168,92,.32)); } .rip--soft circle{ stroke:rgba(228,180,96,.5); stroke-width:1.5; } @keyframes ripgo{ 0%{ transform:scale(.192); opacity:0; } 14%{ opacity:1; } 75%{ opacity:.7; } 100%{ transform:scale(1); opacity:0; } } /* only the orb swells; the ambient glow around it holds still */ .orbwrap.swell .orbsolid{ animation:orbswell .62s cubic-bezier(.34,1.4,.4,1); } @keyframes orbswell{ 0%{ transform:translate(-50%,-50%) scale(1); } 35%{ transform:translate(-50%,-50%) scale(1.075); } 100%{ transform:translate(-50%,-50%) scale(1); } } .hfig.halo-hit::after{ animation:glowpulse 7s ease-in-out infinite, halohit .95s ease-out; } @keyframes halohit{ 0%{ opacity:1; filter:blur(18px) brightness(1.55) saturate(1.25); } 100%{ opacity:.8; filter:blur(18px) brightness(1); } } @media (prefers-reduced-motion: reduce){ .rip{ display:none; } .orbwrap.swell{ animation:none; } } /* engraved gold: ink letters, a gold glint sweeps through on the heartbeat's rhythm */ .hfig__name, .d-head, .d-sub, .btn-exec{ background:linear-gradient(105deg, var(--ink) 0%, var(--ink) 42%, #E9C784 50%, #C9A96A 55%, var(--ink) 63%, var(--ink) 100%); background-size:280% 100%; background-position:130% 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } @keyframes sheen{ 0%{ background-position:130% 0; } 46%{ background-position:-40% 0; } 100%{ background-position:-40% 0; } } .hfig__name{ animation:sheen 4.8s ease-in-out 1.7s infinite; } .btn-exec{ animation:sheen 4.8s ease-in-out 2.05s infinite; border-color:rgba(201,169,106,.5); } .d-head{ animation:drise .9s cubic-bezier(.22,.61,.36,1) .25s forwards, sheen 4.8s ease-in-out 2.4s infinite; } .d-sub{ animation:drise .8s cubic-bezier(.22,.61,.36,1) .45s forwards, sheen 4.8s ease-in-out 2.75s infinite; } @media (prefers-reduced-motion: reduce){ .hfig__name,.btn-exec{ animation:none; } .d-head{ animation:drise .01s forwards; } .d-sub{ animation:drise .01s forwards; } } /* the menu carries a hint of the orb's gold */ .navlink{ box-shadow:0 0 14px -3px rgba(214,168,92,.38); } .btn-cta{ box-shadow:0 0 18px -3px rgba(214,168,92,.45); } .logo{ filter:drop-shadow(0 0 9px rgba(214,168,92,.35)); } /* about: the Executive Assistant block */ .ea{ margin-top:clamp(3rem,6vw,4.5rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; } .ea__title{ margin-top:.6rem; font-family:var(--font-display); font-weight:400; font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem); letter-spacing:-.01em; line-height:1.2; color:var(--ink); } .ea__body{ margin-top:.8rem; color:var(--ink-soft); line-height:1.75; font-size:clamp(.96rem,.92rem + .25vw,1.06rem); } @media (max-width:880px){ .ea{ grid-template-columns:1fr; } } /* projects grid */ /* ---- case study rail ---- A 3D coverflow ported from a React/framer-motion component into vanilla. JS writes five custom properties per card and CSS owns the easing, so the whole thing animates on transform and opacity only. The card surface is the old .proj treatment, unchanged, so it still reads as this site. */ /* clip sideways only. overflow:hidden clipped vertically too, which sliced every card's drop shadow off along a straight edge. clip on one axis leaves the other visible, which hidden cannot do. */ .rail{ position:relative; overflow-x:clip; overflow-y:visible; outline:none; } .rail__stage{ position:relative; height:clamp(400px,46vw,470px); perspective:1200px; perspective-origin:50% 50%; cursor:grab; touch-action:pan-y; } .rail__stage.is-dragging{ cursor:grabbing; } .railcard{ position:absolute; left:50%; top:50%; box-sizing:border-box; width:min(340px,76vw); height:clamp(320px,38vw,384px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8rem; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(1.3rem,2.5vw,1.8rem); box-shadow:0 1px 2px rgba(26,26,23,.03), 0 26px 52px -34px rgba(26,26,23,.16); transform-style:preserve-3d; will-change:transform,opacity; z-index:var(--rzi,1); opacity:var(--ro,1); transform:translate3d(calc(-50% + var(--rx,0px)), -50%, var(--rz,0px)) rotateY(var(--ry,0deg)) scale(var(--rs,1)); transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease, box-shadow .45s ease; } /* While a finger is down the deck is positioned every frame, so easing here would make it lag behind the finger. On release the class comes off and the transition above is what performs the magnetic settle. */ .rail__stage.is-dragging .railcard{ transition:none; } .railcard.is-active{ box-shadow:0 1px 2px rgba(26,26,23,.04), 0 40px 72px -34px rgba(26,26,23,.26), 0 0 0 1px rgba(201,169,106,.28); } .railcard:not(.is-active){ cursor:pointer; } /* the front card opens its case study from anywhere on it, so say so */ .railcard.is-openable{ cursor:pointer; } /* client marks. One fixed-height slot on every card so the headings line up across the deck: the AKC wordmark is wide and short, the Atlas mark is stacked and tall, so each is constrained on its own axis inside it. */ .caselogo{ height:74px; display:flex; align-items:center; justify-content:center; } .caselogo img{ display:block; width:auto; height:auto; } .caselogo--akc img{ width:140px; } .caselogo--atlas img{ height:74px; } .caselogo--xcel img{ width:150px; } .caselogo--nano img{ width:130px; } /* A client whose case study is not published yet is not named by their mark. Tied to the card's own "coming soon" state rather than to AKC specifically, so the moment that study gets a URL the blur lifts on its own and nobody has to remember to come back here. */ .railcard--soon .caselogo img{ filter:blur(7px) saturate(.55); opacity:.55; transform:scale(.96); /* pulls the blur's soft edge inside the slot */ pointer-events:none; user-select:none; } .railcard h3{ font-family:var(--font-display); font-weight:500; font-size:1.35rem; color:var(--ink); } .railcard p{ margin-top:auto; color:var(--ink-soft); font-size:.95rem; line-height:1.65; } .rail__ui{ margin-top:1.6rem; display:flex; align-items:center; justify-content:center; gap:.4rem; } .rail__nav{ width:40px; height:40px; display:grid; place-items:center; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); font-family:var(--font-body); font-size:17px; line-height:1; transition:border-color .3s ease, background .3s ease, color .3s ease; } .rail__nav:hover{ border-color:rgba(201,169,106,.85); background:rgba(214,168,92,.08); color:var(--ink); } .rail__count{ min-width:64px; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-faint); } .rail__count b{ font-weight:500; color:var(--ink); } @media (prefers-reduced-motion: reduce){ .railcard{ transition:none; } } .btn-case{ margin-top:.4rem; margin-bottom:auto; align-self:center; font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); text-decoration:none; padding:.75em 1.5em; border-radius:999px; background:var(--maroon); border:1px solid var(--maroon); transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; } .btn-soon{ margin-top:.4rem; margin-bottom:auto; align-self:center; font-family:var(--font-mono); font-weight:500; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); border:1px dashed var(--line); border-radius:999px; padding:.85em 1.6em; cursor:default; user-select:none; } .btn-case:hover{ background:var(--maroon-soft); border-color:var(--maroon-soft); color:var(--cream); transform:translateY(-1px); box-shadow:0 12px 26px -16px rgba(122,48,48,.55); } /* footer */ /* ---- header over the dark footer ---- The header is fixed and the footer is dark, so once .page has scrolled clear of it the ink logo, the nav links and the time all sit on near black and disappear. Flip the whole header to its light set while it is over the footer, and back on the way up. */ .site-header .logo, .site-header #sl, .site-header .hdr-time{ transition:color .35s ease; } .site-header.on-dark .logo{ color:var(--cream); } /* #mo fakes its weight with an ink text-stroke, so recolouring the fill alone leaves a dark outline sitting on the cream letters */ .site-header.on-dark #mo{ -webkit-text-stroke-color:var(--cream); } .site-header.on-dark #sl{ color:var(--maroon-soft); } .site-header.on-dark .hdr-time{ color:rgba(240,238,230,.5); } .site-header.on-dark .navlink{ color:rgba(240,238,230,.75); border-color:rgba(240,238,230,.2); } .site-header.on-dark .navlink:hover{ color:var(--cream); border-color:rgba(214,168,92,.75); background:rgba(214,168,92,.14); } .site-header.on-dark .btn-cta{ background:var(--cream); border-color:var(--cream); color:var(--ink); } .site-header.on-dark .btn-cta:hover{ background:var(--surface); border-color:var(--surface); color:var(--ink); } /* ============================================================ Mobile header: hamburger, centred logo, drop panel. Switches at 900px, not 600px. Four nav pills plus the clock and the CTA already crowd the centred logo well before phone widths, and the logo is the one thing that must stay dead centre. ============================================================ */ .navtoggle{ display:none; width:40px; height:40px; padding:0; cursor:pointer; background:none; border:0; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; } .navtoggle span{ display:block; width:20px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s ease, background .35s ease; } .navtoggle span:nth-child(2){ width:14px; } .site-header.on-dark .navtoggle span{ background:var(--cream); } /* three bars fold into a cross, pivoting about the middle bar */ .navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); width:20px; } .navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); width:20px; } .mobmenu{ position:fixed; left:0; right:0; z-index:49; top:var(--hdr-h,72px); background:rgba(240,238,230,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:0 26px 44px -30px rgba(26,26,23,.4); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .3s ease, transform .38s cubic-bezier(.22,.61,.36,1), visibility 0s linear .38s; } .mobmenu.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s, 0s, 0s; } .mobmenu__nav{ display:flex; flex-direction:column; padding:.4rem clamp(1.25rem,6vw,2.5rem) 1.4rem; } .mobmenu__nav a{ padding:1rem 0; text-decoration:none; font-family:var(--font-display); font-weight:400; font-size:1.5rem; letter-spacing:-.01em; color:var(--ink); border-bottom:1px solid var(--line); } .mobmenu__nav a:last-child{ border-bottom:0; } .mobmenu__cta{ margin-top:1.1rem; align-self:flex-start; font-family:var(--font-body) !important; font-weight:500 !important; font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--cream) !important; background:var(--maroon); padding:1em 2.2em !important; border-radius:999px; border-bottom:0 !important; } @media (max-width:900px){ .navtoggle{ display:flex; } .nav--left .navlink{ display:none; } /* the header CTA lives in the dropdown at this width; leaving it here overflows the right grid column and drags the centred logo off-axis */ .nav--right .btn-cta{ display:none; } .site-header{ padding-left:clamp(1rem,4vw,2rem); padding-right:clamp(1rem,4vw,2rem); } } @media (min-width:901px){ .mobmenu{ display:none; } } @media (max-width:420px){ .btn-cta{ font-size:12px; padding:.62em 1.05em; } } @media (prefers-reduced-motion: reduce){ .navtoggle span, .mobmenu{ transition:none; } } /* ============================================================ Mobile pass over the moving parts. Each of these is a real failure, not a nicety: ============================================================ */ @media (max-width:760px){ /* the Pimcore stage is a fixed 1200px canvas whose chips are positioned in absolute px. It cannot reflow, so it is scaled as one piece instead. */ .stackviz{ height:clamp(230px,58vw,300px); } .sviz-stage{ transform:translateX(-50%) scale(.52); transform-origin:50% 100%; } /* 11 orbiting cards on motion paths, each with a shadow, over a phone GPU. They also sit under the hero copy at this width and read as clutter. */ .orbit{ display:none; } /* the rail cards are the section's whole content at this width */ .rail__stage{ height:clamp(340px,86vw,420px); } .railcard{ width:min(300px,84vw); height:clamp(290px,74vw,340px); } /* footer wordmark: 26vw is tuned for a wide viewport, not a narrow one */ .foot2__giant{ font-size:40vw; bottom:-4vh; } .foot2__stage{ padding-top:5.5rem; } } @media (max-width:600px){ .tmq::before, .tmq::after{ width:44px; } .tq{ font-size:11.5px; } /* the orb is 208px of fixed box inside a 86vw dome */ .orbwrap{ width:min(208px,54vw); height:min(208px,54vw); } .rail__ui{ gap:.3rem; } } /* Nothing on the page may scroll sideways. The hero dome, the rail and the footer wordmark all overhang deliberately, and any one of them can hand a phone a horizontal scrollbar. clip, not hidden. overflow-x:hidden makes the element a scroll container, which silently breaks position:sticky for every descendant, which is what stopped the legal contents rail from sticking. clip does the same visual job without creating a scrollport. */ html, body{ overflow-x:clip; } /* ---- magnetic section snapping ---- proximity, NOT mandatory. Mandatory would trap a reader inside any section taller than the viewport (01 and 03 both are) and, worse, would fight the footer reveal: the curtain needs free scrolling through the empty margin at the end of .page, and a mandatory snap would drag them back to the last section every time. Proximity only pulls when the rest position is already close, which is the magnet feel and leaves long scrolls alone. scroll-margin-top clears the fixed header, or the section title lands underneath it. The hero opts out: its snap point is the top of the page. */ @media (min-width:760px) and (prefers-reduced-motion: no-preference){ html{ scroll-snap-type:y proximity; } .hero, .sec{ scroll-snap-align:start; scroll-margin-top:clamp(62px,7.5vh,88px); } .hero{ scroll-snap-align:start; scroll-margin-top:0; } } /* ---- trust ---- Three marquee rows carry the questions a buyer actually has; the four columns underneath answer them. Copy is deliberately short: the depth belongs on the security page this section will link to. Each track holds four copies of its row and travels exactly half its own width, so the loop is seamless without measuring anything in JS. Pure transform, so it runs on the compositor. */ .tlede{ margin:1.3rem auto 0; max-width:58ch; text-align:center; color:var(--ink-soft); line-height:1.75; font-size:clamp(1rem,.95rem + .3vw,1.1rem); } .tmq{ position:relative; margin:clamp(1.8rem,3.5vw,2.6rem) auto 0; max-width:760px; overflow:hidden; } .tmq::before, .tmq::after{ content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; } .tmq::before{ left:0; background:linear-gradient(90deg, var(--cream), transparent); } .tmq::after{ right:0; background:linear-gradient(270deg, var(--cream), transparent); } .tmq__row{ display:flex; overflow:hidden; padding:.34rem 0; } .tmq__track{ display:flex; flex:none; gap:.7rem; padding-right:.7rem; will-change:transform; animation:tmqrun var(--tmq-dur,45s) linear infinite; } .tmq__row--rev .tmq__track{ animation-direction:reverse; } @keyframes tmqrun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .tmq.is-idle .tmq__track{ animation-play-state:paused; } .tq{ flex:none; white-space:nowrap; background:var(--paper); border:1px solid var(--line); padding:.5em 1em; font-size:12.5px; color:var(--ink-soft); } .tgrid{ margin-top:clamp(2.4rem,5vw,3.4rem); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px dashed var(--line); } .tcol{ display:flex; flex-direction:column; gap:1.1rem; padding:clamp(1.6rem,3vw,2.2rem) clamp(1.1rem,2vw,1.5rem); } .tcol + .tcol{ border-left:1px dashed var(--line); } .tcol svg{ width:34px; height:34px; flex:none; stroke:var(--maroon); fill:none; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; opacity:.85; } .tcol h3{ font-family:var(--font-display); font-weight:500; font-size:1.3rem; line-height:1.16; letter-spacing:-.01em; color:var(--ink); } .tcol p{ color:var(--ink-soft); font-size:.93rem; line-height:1.7; } .tcol__txt{ display:flex; flex-direction:column; gap:.5rem; margin-top:auto; padding-top:2.6rem; } .tcta{ margin-top:clamp(2rem,4vw,3rem); text-align:center; border-top:1px dashed var(--line); padding-top:clamp(2rem,4vw,3rem); } @media (max-width:900px){ .tgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tcol:nth-child(3){ border-left:0; } .tcol:nth-child(n+3){ border-top:1px dashed var(--line); } .tcol__txt{ padding-top:1.4rem; } } @media (max-width:560px){ .tgrid{ grid-template-columns:1fr; } .tcol + .tcol{ border-left:0; border-top:1px dashed var(--line); } } @media (prefers-reduced-motion: reduce){ .tmq__track{ animation:none; } } /* ============================================================ Cinematic footer — ported from a GSAP/Tailwind React component. No GSAP, no Tailwind, no build step: CSS owns every animation and the small script only does magnetic hover and the reveal trigger. Curtain reveal: the footer is fixed at the bottom, a full viewport tall, sitting UNDER an opaque .page panel. Scrolling to the end slides the panel off it. .page carries a bottom margin equal to the footer height so the travel is always exactly right. .page deliberately does NOT wrap the header or progress bar. Those are z-index 50 and 60 at the root; inside a z-index:1 wrapper they would fall under the orb proxy at 40 and the orb would fly OVER the header instead of under it. Theme mapping from the component's tokens: --background -> --ink --foreground -> --cream --primary/--secondary (aurora) -> gold / maroon --destructive -> --maroon Plus Jakarta Sans is dropped for Geist: the site already loads it, and a second font import would be a new external dependency. ============================================================ */ :root{ --foot-h:100vh; } .page{ position:relative; z-index:1; background:var(--cream); border-bottom-left-radius:clamp(18px,2.6vw,30px); border-bottom-right-radius:clamp(18px,2.6vw,30px); box-shadow:0 30px 60px -28px rgba(26,26,23,.5); margin-bottom:var(--foot-h); } .foot-anchor{ display:block; height:1px; } .foot2{ position:fixed; left:0; right:0; bottom:0; z-index:0; min-height:100dvh; overflow:hidden; display:flex; flex-direction:column; background:var(--ink); color:var(--cream); /* a rim, because the toast can appear over the cream page or over the ink footer, and over the footer a bare dark pill has no edge at all */ border:1px solid rgba(240,238,230,.22); } /* ambient: breathing aurora + masked grid, both behind everything */ .foot2__aurora{ position:absolute; left:50%; top:50%; width:80vw; height:58vh; transform:translate(-50%,-50%); border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; opacity:.6; will-change:transform,opacity; background:radial-gradient(circle at 50% 50%, rgba(214,168,92,.30) 0%, rgba(122,48,48,.26) 40%, transparent 70%); } .foot2.is-live .foot2__aurora{ animation:footbreathe 8s ease-in-out infinite alternate; } @keyframes footbreathe{ from{ transform:translate(-50%,-50%) scale(1); opacity:.55; } to{ transform:translate(-50%,-50%) scale(1.1); opacity:1; } } .foot2__grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-size:60px 60px; background-image: linear-gradient(to right, rgba(240,238,230,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(240,238,230,.045) 1px, transparent 1px); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); } /* the wordmark, outlined and vast, sunk into the floor */ /* Original ghost treatment restored: faint cream outline, soft gradient fill, gold slash. Two things had to change to stop it looking crushed: line-height was .75, so the glyphs spilled outside their own box, and background-repeat defaults to repeat, which TILED the fade gradient down the letters instead of running it once. line-height:1 plus no-repeat gives one clean pass. The dissolve is a mask, not a second gradient, because a mask takes the outline with it. background-clip only touches the fill, which would have left the stroke hanging at full strength below the fade. */ .foot2__giant{ position:absolute; left:50%; bottom:-7vh; z-index:0; transform:translateX(-50%) translateY(8vh) scale(.86); opacity:0; white-space:nowrap; pointer-events:none; user-select:none; font-family:var(--font-mark); font-weight:700; font-size:26vw; line-height:1; letter-spacing:-.02em; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(240,238,230,.10); background-image:linear-gradient(180deg, rgba(240,238,230,.11) 0%, rgba(240,238,230,0) 62%); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-clip:text; background-clip:text; -webkit-mask-image:linear-gradient(to top, transparent 2%, #000 46%); mask-image:linear-gradient(to top, transparent 2%, #000 46%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; transition:transform 1.5s cubic-bezier(.22,.61,.36,1), opacity 1.2s ease; } .foot2__giant i{ font-style:normal; -webkit-text-stroke-color:rgba(214,168,92,.4); } .foot2.is-live .foot2__giant{ transform:translateX(-50%) translateY(0) scale(1); opacity:1; } /* centre stage */ .foot2__stage{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(3rem,6.5vh,5rem) clamp(1.25rem,4vw,3rem) 1.6rem; perspective:900px; } .foot2__big{ font-family:var(--font-display); font-weight:400; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2.6rem,1.6rem + 5vw,5.4rem); margin-bottom:2.4rem; background:linear-gradient(180deg, var(--cream) 0%, rgba(240,238,230,.42) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 0 22px rgba(240,238,230,.13)); opacity:0; transform:translateY(34px); transition:opacity .8s ease .1s, transform .8s cubic-bezier(.22,.61,.36,1) .1s; } .foot2__acts{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; width:100%; opacity:0; transform:translateY(34px); transition:opacity .8s ease .28s, transform .8s cubic-bezier(.22,.61,.36,1) .28s; } .foot2.is-live .foot2__big, .foot2.is-live .foot2__acts{ opacity:1; transform:none; } .foot2__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; } /* glass pills. the component blurs the backdrop here; these move on hover, and backdrop-filter on a moving element is the documented jank case, so they are translucent fills instead. */ .pillx{ position:relative; display:inline-flex; align-items:center; gap:.7rem; border-radius:999px; text-decoration:none; cursor:pointer; font-family:var(--font-body); text-transform:uppercase; letter-spacing:.18em; background:linear-gradient(145deg, rgba(240,238,230,.07) 0%, rgba(240,238,230,.02) 100%); border:1px solid rgba(240,238,230,.13); box-shadow:0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 1px rgba(240,238,230,.09); color:rgba(240,238,230,.72); transform-style:preserve-3d; transition:background .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, color .4s ease; } .pillx:hover{ color:var(--cream); border-color:rgba(214,168,92,.55); background:linear-gradient(145deg, rgba(214,168,92,.16) 0%, rgba(240,238,230,.03) 100%); } .pillx--lg{ padding:1.15em 2.4em; font-size:11px; font-weight:500; } .pillx--sm{ padding:.85em 1.7em; font-size:10px; font-weight:500; } .pillx--solid{ background:var(--cream); color:var(--ink); border-color:transparent; } .pillx--solid:hover{ background:var(--surface); color:var(--ink); border-color:transparent; } .pillx--icon{ width:46px; height:46px; padding:0; justify-content:center; } .pillx svg{ width:18px; height:18px; transition:transform .3s ease; } .pillx--icon:hover svg{ transform:translateY(-3px); } /* base bar */ /* ---- link block ---- .foot2 is fixed to the bottom at min-height:100dvh with overflow hidden, so anything that pushes it past the viewport gets clipped off the TOP, not the bottom. This block is therefore deliberately compact, and it stands down entirely on short viewports rather than eating the form. */ .foot2__links{ position:relative; z-index:2; width:100%; max-width:1100px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns:1.4fr repeat(3, minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem); padding-top:clamp(1.4rem,2.6vw,2rem); } .foot2__brand p{ max-width:34ch; font-size:.88rem; line-height:1.65; color:rgba(240,238,230,.5); } .foot2__soc{ display:flex; gap:.5rem; margin-top:1rem; } .foot2__soc a{ width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(240,238,230,.16); border-radius:999px; color:rgba(240,238,230,.55); transition:color .3s ease, border-color .3s ease, background .3s ease; } .foot2__soc a:hover{ color:var(--cream); border-color:rgba(214,168,92,.7); background:rgba(214,168,92,.12); } .foot2__soc svg{ width:15px; height:15px; fill:currentColor; } .foot2__h{ font-family:var(--font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:rgba(214,168,92,.85); margin-bottom:.9rem; } .foot2__nav{ display:flex; flex-direction:column; gap:.5rem; } .foot2__link{ font-size:.88rem; color:rgba(240,238,230,.62); text-decoration:none; width:fit-content; transition:color .3s ease; } .foot2__link:hover{ color:var(--cream); } .foot2__link[aria-disabled]{ color:rgba(240,238,230,.3); cursor:default; } .foot2__copy{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,238,230,.34); } @media (max-width:860px){ .foot2__links{ grid-template-columns:1fr 1fr; } } /* short viewport: the form matters more than the sitemap */ @media (max-height:720px){ .foot2__links{ display:none; } } .foot2__base{ position:relative; z-index:2; width:100%; max-width:1100px; margin:0 auto; padding:clamp(1.1rem,2vw,1.5rem) clamp(1.25rem,4vw,3rem) clamp(1.4rem,2.6vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; } /* contact form, on dark */ .fform{ width:100%; max-width:620px; text-align:left; display:flex; flex-direction:column; gap:1.25rem; } .fform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .fform__f{ display:flex; flex-direction:column; gap:.5rem; } .fform__f > span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(214,168,92,.82); } .fform input, .fform textarea{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:.95rem; color:var(--cream); background:rgba(240,238,230,.04); border:1px solid rgba(240,238,230,.14); border-radius:12px; padding:.85em 1em; resize:vertical; transition:border-color .3s ease, background .3s ease; } .fform input:focus, .fform textarea:focus{ outline:none; border-color:rgba(214,168,92,.7); background:rgba(240,238,230,.07); } .fform input::placeholder, .fform textarea::placeholder{ color:rgba(240,238,230,.28); } .fform select{ width:100%; box-sizing:border-box; cursor:pointer; appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-size:.95rem; color:var(--cream); background-color:rgba(240,238,230,.04); background-image:linear-gradient(45deg, transparent 50%, rgba(240,238,230,.45) 50%), linear-gradient(135deg, rgba(240,238,230,.45) 50%, transparent 50%); background-position:calc(100% - 21px) 55%, calc(100% - 15px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; border:1px solid rgba(240,238,230,.14); border-radius:12px; padding:.85em 2.8em .85em 1em; transition:border-color .3s ease, background-color .3s ease, color .3s ease; } .fform select:focus{ outline:none; border-color:rgba(214,168,92,.7); background-color:rgba(240,238,230,.07); } /* until something is picked it should read as placeholder text, not an answer */ .fform select:invalid{ color:rgba(240,238,230,.28); } /* the dropdown list itself is drawn by the OS, so the options need explicit colours or they inherit cream text onto a white list and disappear */ .fform select option{ background:var(--cream); color:var(--ink); } .fform .is-bad{ border-color:rgba(154,74,74,.9); } .fform__send{ align-self:flex-start; border:0; } .fform__note{ min-height:1.3em; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(214,168,92,.9); } @media (max-width:620px){ .fform__row{ grid-template-columns:1fr; } } @media (max-width:880px){ .foot2__stage{ padding-top:7rem; } .foot2__giant{ font-size:34vw; } .foot2__base{ justify-content:center; text-align:center; } } @media (prefers-reduced-motion: reduce){ .foot2__aurora{ animation:none !important; } .foot2__giant, .foot2__big, .foot2__acts{ transition:none; } } /* ---- phones: keep the curtain, make its contents fit one viewport ---- .foot2 is fixed with overflow:hidden, so anything taller than 100dvh clips off the TOP and takes "Ready to build?" with it. The sitemap is kept but collapsed to three centred stacks: the column headings, the brand paragraph and the social icons are the height, not the links themselves, so those go and the links stay. */ @media (max-width:900px){ .foot2__stage{ padding-top:clamp(3.4rem,9vw,4.4rem); padding-bottom:.8rem; } .foot2__big{ margin-bottom:1.1rem; font-size:clamp(2.2rem,1.4rem + 4vw,3.6rem); } .fform{ gap:.8rem; } .fform__row{ gap:.8rem; } .fform__f{ gap:.3rem; } .fform textarea{ height:4.2rem; } .fform__send{ align-self:center; } /* three columns, each group stacked, so Legal never wraps up next to Work. NOTE: .foot2__links > .foot2__brand must out-specify the > div rule above it, or the brand reappears inside the grid. */ .foot2__links{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem .5rem; max-width:30rem; margin:0 auto; padding-top:.9rem; padding-bottom:.2rem; justify-items:center; } .foot2__links > div{ width:auto; } .foot2__links > .foot2__brand{ display:none; } .foot2__h{ display:none; } /* Tap targets. These were 15px tall with a dead 7px gap between them, so a near miss on a phone reads as "the link is broken". Padding instead of gap makes each column one continuous hit area at roughly 24px a row, for about 20px more height overall, which the curtain can afford. */ .foot2__nav{ flex-direction:column; align-items:stretch; gap:0; line-height:1.35; } .foot2__link{ text-align:center; width:auto; padding:.42rem .2rem; } /* sized so each group holds one line on a 375px screen */ .foot2__link{ font-size:clamp(.68rem,.55rem + .6vw,.8rem); } .foot2__giant{ font-size:26vw; } } /* landscape phones have no room for the sitemap at all */ @media (max-width:900px) and (max-height:720px){ .foot2__links{ display:none; } } /* delphi-style duo panels */ .sec--duo{ text-align:center; } /* .kicker is a flex container, so text-align cannot reach it: centre it explicitly */ .sec--duo .kicker{ justify-content:center; } .stitle2{ margin-top:1.1rem; font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; line-height:1.14; font-size:clamp(1.9rem,1.4rem + 2.6vw,3.1rem); color:var(--ink); } .stitle2 .l2{ color:var(--ink-soft); } .duo{ margin-top:clamp(2rem,4.5vw,3.2rem); display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; text-align:center; } .panel{ display:flex; flex-direction:column; gap:.9rem; background:var(--paper); border:1px solid rgba(26,26,23,.05); border-radius:24px; padding:clamp(1.7rem,3.2vw,2.5rem); } .panel h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem); color:var(--ink); } .panel__body{ color:var(--ink-soft); font-size:.95rem; line-height:1.7; max-width:46ch; margin:0 auto; } .panel .console{ margin-top:1.5rem; text-align:left; } @media (max-width:880px){ .duo{ grid-template-columns:1fr; } } /* mini chat visual */ .chat{ margin-top:1.5rem; display:flex; flex-direction:column; gap:1.1rem; } .chat__who{ display:flex; flex-direction:column; align-items:center; gap:.2rem; margin-bottom:.4rem; } .chat__name{ font-family:var(--font-display); font-weight:400; font-size:1.05rem; color:var(--ink); } .chat__status{ font-family:var(--font-mono); font-weight:400; font-size:10px; letter-spacing:.08em; color:var(--ink-faint); } .chat__role{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .bubble{ max-width:82%; padding:.7em 1.05em; border-radius:16px; font-size:.9rem; line-height:1.5; text-align:left; } .bubble--q{ align-self:flex-end; background:var(--maroon); color:var(--cream); border-bottom-right-radius:5px; } .bubble--a{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; } /* the stack: everything on rings, converging on the core */ .panel--stack{ margin-top:1.4rem; } .stackviz{ position:relative; margin-top:.9rem; height:clamp(300px,38vw,400px); overflow:hidden; } /* fixed 1200x520 stage anchored to the bottom centre: rings, chips and core share one geometry */ .sviz-stage{ position:absolute; left:50%; bottom:0; width:1200px; height:520px; transform:translateX(-50%); } .ring{ position:absolute; left:600px; top:520px; transform:translate(-50%,-50%); border:1px solid var(--line); border-radius:50%; } .rg1{ width:420px; height:420px; opacity:.6; } .rg2{ width:700px; height:700px; opacity:.38; } .schip{ position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.5em; background:rgba(255,252,245,.9); opacity:.85; border:1px solid rgba(255,242,214,.6); border-radius:999px; padding:.5em 1.05em; font-size:12px; color:var(--ink-soft); white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(214,168,92,.08), 0 14px 30px -18px rgba(26,26,23,.22); } .schip::before{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(201,169,106,.9); } .score{ position:absolute; left:600px; top:520px; transform:translate(-50%,-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle at 38% 28%, #9A4A4A, var(--maroon) 46%, #4A1E1E 100%); box-shadow:0 -8px 60px -12px rgba(122,48,48,.5), 0 0 90px rgba(201,169,106,.28), inset 0 1px 0 rgba(255,255,255,.12); display:flex; flex-direction:column; align-items:center; gap:.55rem; padding-top:2.6rem; } .score__logo{ width:150px; height:auto; display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)); } .score__s{ font-family:var(--font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:rgba(240,238,230,.6); } /* the chips ride their rings: closed loops, phased by delay */ @supports (offset-path: path('M 0 0 L 1 1')){ .schip{ left:0!important; top:0!important; transform:none; offset-rotate:0deg; offset-distance:var(--sd,0%); animation:sorbit linear infinite; } .sc1,.sc2,.sc3,.sc4{ offset-path:path('M 600 310 A 210 210 0 1 1 600 730 A 210 210 0 1 1 600 310 Z'); animation-duration:70s; } .sc5,.sc6,.sc7,.sc8{ offset-path:path('M 600 170 A 350 350 0 1 1 600 870 A 350 350 0 1 1 600 170 Z'); animation-duration:100s; animation-direction:reverse; } .sc1{ --sd:87.5%; animation-delay:-61.25s; } .sc2{ --sd:12.5%; animation-delay:-8.75s; } .sc3{ --sd:0%; animation-delay:0s; } .sc4{ --sd:62.5%; animation-delay:-43.75s; } .sc5{ --sd:85%; animation-delay:-85s; } .sc6{ --sd:15%; animation-delay:-15s; } .sc7{ --sd:37.5%; animation-delay:-37.5s; } .sc8{ --sd:60%; animation-delay:-60s; } @keyframes sorbit{ from{ offset-distance:0%; } to{ offset-distance:100%; } } @media (prefers-reduced-motion: reduce){ .schip{ animation:none; } } } @media (max-width:680px){ .schip{ font-size:10.5px; padding:.45em .85em; } } .panel--stack{ padding-left:clamp(2rem,8vw,7rem); padding-right:clamp(2rem,8vw,7rem); } .panel--stack .panel__body{ max-width:52ch; } /* the stack visual bleeds to the panel's true bottom edge */ .panel--stack{ overflow:hidden; } .panel--stack .stackviz{ margin-left:calc(-1 * clamp(2rem,8vw,7rem)); margin-right:calc(-1 * clamp(2rem,8vw,7rem)); margin-bottom:calc(-1 * clamp(1.7rem,3.2vw,2.5rem)); } /* live chat: the exchange plays itself */ .chat{ max-width:350px; width:100%; margin-left:auto; margin-right:auto; } .chat__thread{ display:flex; flex-direction:column; gap:1.1rem; min-height:118px; } .chat .bubble{ opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .chat .bubble.in{ opacity:1; transform:none; } .tdots{ display:inline-flex; gap:4px; align-items:center; height:1em; } .tdots i{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); animation:tdot 1s ease-in-out infinite; } .tdots i:nth-child(2){ animation-delay:.15s; } .tdots i:nth-child(3){ animation-delay:.3s; } @keyframes tdot{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } } .bubble--a.typed .tdots{ display:none; } /* typing without reflow: ghost reserves the final size, live paints over it */ .stack{ display:grid; } .stack > *{ grid-area:1 / 1; } .stack .ghost{ visibility:hidden; white-space:pre-wrap; } .bubble--a .astack:empty{ display:none; } /* the shared orb: one element travels from the hero dome to the assistant panel */ .easlot{ display:flex; justify-content:center; margin-bottom:.6rem; height:92px; } .easlot__orb{ box-shadow:0 10px 34px rgba(201,169,106,.35); } .orbTravel{ position:fixed; left:0; top:0; z-index:40; pointer-events:none; will-change:transform; display:none; } .orbTravel .siri-orb{ --orb-size:150px; } .orbTravel.swell .siri-orb{ animation:orbswell2 .62s cubic-bezier(.34,1.4,.4,1); } @keyframes orbswell2{ 0%{ transform:scale(1); } 35%{ transform:scale(1.075); } 100%{ transform:scale(1); } } /* ============================================================ Executive Assistant — the product lockup. Panel B is the highlight: it gets the gold ground, the named lockup and the only lit border on the page. Tokens unchanged. ============================================================ */ .panel--ea{ position:relative; overflow:hidden; gap:.75rem; background:linear-gradient(180deg, var(--surface) 0%, var(--paper) 64%); border:1px solid rgba(201,169,106,.30); box-shadow:0 1px 2px rgba(26,26,23,.04), 0 44px 84px -48px rgba(26,26,23,.32), inset 0 1px 0 rgba(255,255,255,.72); } .panel--ea::before{ content:''; position:absolute; left:50%; top:-70px; width:min(440px,116%); height:310px; transform:translateX(-50%); pointer-events:none; z-index:0; background:radial-gradient(closest-side, rgba(214,168,92,.22), rgba(214,168,92,.07) 56%, transparent 74%); } .panel--ea > *{ position:relative; z-index:1; } .panel--ea .ea__name{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; letter-spacing:-.01em; line-height:1.14; color:var(--ink); } /* the vow, set apart from the body copy: this is the line worth repeating */ /* same face and size as the body copy. colour and weight carry the emphasis, no second typeface and no italic. */ .ea__vow{ max-width:46ch; margin:1.25rem auto 0; padding-top:1.1rem; border-top:1px solid rgba(201,169,106,.4); font-family:var(--font-body); font-weight:500; font-size:.95rem; line-height:1.7; color:var(--maroon); } .panel--ea .console{ border-color:rgba(201,169,106,.30); box-shadow:0 2px 4px rgba(26,26,23,.04), 0 32px 62px -38px rgba(26,26,23,.40); } .panel--ea .console__bar{ background:rgba(214,168,92,.055); border-bottom-color:rgba(201,169,106,.24); } .panel--ea .easlot__orb{ box-shadow:0 14px 42px rgba(201,169,106,.42); } /* ============================================================ Orb flight — the hero orb travels into the Executive Assistant panel as you scroll. The proxy is a single fixed element parented to . It must never live inside .hfig: animated and filtered ancestors create a containing block and position:fixed gets re-anchored to them. That is the bug that killed this the last two times. Everything per-frame is transform + opacity, so the flight runs on the compositor and never touches layout. ============================================================ */ #orbFlight{ position:fixed; left:0; top:0; z-index:40; pointer-events:none; width:150px; height:150px; margin:-75px 0 0 -75px; transform:translate3d(-9999px,-9999px,0); will-change:transform; } /* parked only when it is far off screen, where a visibility flip is unseeable */ #orbFlight.parked{ visibility:hidden; } #orbFlight .siri-orb{ --orb-size:150px; } #orbFlight .flight__wake{ position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; pointer-events:none; opacity:0; will-change:opacity,transform; background:radial-gradient(closest-side, rgba(214,168,92,.34), rgba(214,168,92,.11) 46%, rgba(214,168,92,0) 72%); } /* the heartbeat swell, mirrored onto the proxy so the hero keeps its pulse */ #orbFlight .siri-orb.swell{ animation:flyswell .62s cubic-bezier(.34,1.4,.4,1); } @keyframes flyswell{ 0%{ transform:scale(1); } 35%{ transform:scale(1.075); } 100%{ transform:scale(1); } } /* Once the proxy exists it is the ONLY orb on the page. There is no handoff and therefore no frame where the orb is absent. The resting two stay in the document as invisible anchors purely so their geometry can be measured. */ .has-orbflight #orbSolid, .has-orbflight .easlot__orb{ opacity:0; } /* the hero's ambient glow and ripple layer ride a value the flight writes, so they ebb away with the orb instead of snapping off at a threshold */ .orbwrap::before{ opacity:var(--hero-fade,1); } .ripples{ opacity:var(--hero-fade,1); } @media (prefers-reduced-motion: reduce){ #orbFlight{ display:none; } } /* Phones and tablets never build the proxy (see orb-flight.js). This is the belt to that braces: if the element ever exists on a coarse pointer, it must not paint, because a moving blurred+blended layer is the single most expensive thing on the page. The resting orbs carry the design instead. */ @media (max-width:900px), (pointer:coarse){ #orbFlight{ display:none; } .has-orbflight #orbSolid, .has-orbflight .easlot__orb{ opacity:1; } } /* TEMPORARY PREVIEW: dome shell hidden, contents float free */ .hfig{ background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .hfig::after{ display:none; } /* TEMPORARY PREVIEW: ripples escape the dome and travel the whole hero */ .ripples{ overflow:visible; border-radius:0; -webkit-mask-image:none; mask-image:none; } /* --rip-start is sized so the ripple is born at the orb's 150px diameter: 2600 * .0577 = 150. Change the width and this must change with it, which is why both the rule and the keyframe read the same variable. */ .rip{ --rip-start:.0577; width:2600px; height:2600px; margin:-1300px 0 0 -1300px; transform:scale(var(--rip-start)); } @keyframes ripgo{ 0%{ transform:scale(var(--rip-start)); opacity:0; } 10%{ opacity:1; } 72%{ opacity:.55; } 100%{ transform:scale(1); opacity:0; } } /* The ripple is a 2600px square that scales up while its opacity animates. On a 390px-wide phone the extra 2200px is off screen anyway, but the compositor still allocates and repaints that layer, twice per heartbeat. 1100px still covers the whole hero on a phone and cuts the raster area by roughly 5x. --rip-start is recomputed (150 / 1100) so the ripple is still born at exactly the orb's diameter rather than shrinking to a dot. */ /* ---- the heartbeat, on a phone ---- Every limb of it was a per-frame repaint, which is why shrinking the ring did not help and dropping will-change made it worse: .rip an SVG scaled with vector-effect:non-scaling-stroke. The stroke is recomputed and the vector re-rasterised on every frame; it can never be composited. Two rings per beat. orbswell scales .orbsolid, whose blur + contrast + saturate + mask chain therefore re-runs at a new size every frame. halohit animates a filter value, which is an offscreen re-blur per frame. None of that survives on a phone. What is left is glowpulse, which is opacity only and free, plus an opacity flash on the beat. The orb still breathes, it just no longer repaints to do it. */ @media (pointer:coarse){ .rip{ display:none; } .orbwrap.swell .orbsolid{ animation:none; } .hfig.halo-hit::after{ animation:glowpulse 7s ease-in-out infinite, halosoft 1.1s ease-out; } @keyframes halosoft{ 0%{ opacity:1; } 100%{ opacity:.72; } } } /* ========================================================================== MOBILE PASS Four phone-specific corrections. Each overrides an earlier rule, so this block must stay last in the file. Desktop is untouched throughout. ========================================================================== */ /* --- 02 Case studies: the neighbour cards read as sliced --------------- .rail clips with overflow:hidden. On a phone the stage is ~350px and the JS step floors at 150px, so a 300px neighbour card is cut roughly in half by a hard container edge. Desktop has room (stage ~1040px, card right edge lands inside it) which is why this is phone-only. A gradient mask turns the hard slice into a deliberate fade, which is how a coverflow is meant to read. Masking the stage rather than .rail leaves the nav buttons and the counter fully opaque. */ @media (max-width:760px){ /* The fade lives on .rail, not .rail__stage. mask-clip defaults to border-box, so a mask on the stage clipped every card's drop shadow to the stage's box, which is the hard line under the cards: no mask-size could fix that, only moving the mask to a box that contains the shadow. .rail wraps the stage AND the nav row, so the shadow falls inside it. */ .rail{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; } } /* --- 01 Who we are: three panels on one sideways track ----------------- Order is Mo, then Executive Assistant, then Pimcore. The first two live inside .duo and the third is its sibling, so .abouttrack wraps all three and .duo collapses to display:contents, which promotes its two panels to siblings of the third inside one flex row. .abouttrack is display:contents above this breakpoint, so the desktop grid is completely unaffected. The negative inline margin cancels .sec's padding for a full-bleed track; the 7vw inline padding is (100vw - 86vw) / 2, which centres a snapped panel. */ .abouttrack{ display:contents; } @media (max-width:880px){ .abouttrack{ display:flex; gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(50% - 50vw); padding-inline:7vw; } .abouttrack::-webkit-scrollbar{ display:none; } .duo{ display:contents; } .abouttrack .panel{ flex:0 0 86vw; scroll-snap-align:center; margin-top:0; } } /* --- 03 Why trust us: four columns on one sideways track --------------- Replaces the 2-up and 1-up stacks. The dashed rule returns to the left edge of every column after the first, since they are side by side again. Later in the file than both earlier breakpoints, so it wins at every width below 900px. */ @media (max-width:900px){ .tgrid{ display:flex; grid-template-columns:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(50% - 50vw); padding-inline:11vw; } .tgrid::-webkit-scrollbar{ display:none; } .tcol{ flex:0 0 78vw; scroll-snap-align:center; } .tcol + .tcol{ border-left:1px dashed var(--line); border-top:0; } .tcol:nth-child(3){ border-left:1px dashed var(--line); } .tcol:nth-child(n+3){ border-top:0; } .tcol__txt{ padding-top:1.4rem; } } /* --- orb on phones: motion back, without the repaint --------------------- Two separate problems with freezing the conic stack. 1. Quality. All six gradients read the SAME --siri-angle, so at the initial 0deg every cone's seam points the same way and their wedges stack in one direction. The frozen frame is not a neutral sample of the animation, it is the single most lopsided and banded one. Pinning the angle at 104deg spreads the seams (the x1.2, x0.8, x-1.5, x2.1, x-0.7 multipliers land at 125, 83, -156, 218, -73) so the resting frame is a rich one. 2. Motion. Animating --siri-angle is genuinely too expensive: it re-runs six gradients plus blur/contrast/saturate every frame. Rotating the finished result is not. The filtered ::before rasterises once into a layer and the compositor spins that texture, so this costs about as much as the static version did. The pattern is off-centre, so a rigid turn is clearly visible rather than a symmetric no-op. Also softens the banding the contrast curve exaggerates on 8-bit mobile panels: a wider blur and a gentler contrast, which reads cleaner at 150px. */ @keyframes siri-drift{ from{ transform:translateZ(0) rotate(0turn); } to{ transform:translateZ(0) rotate(1turn); } } @media (max-width:900px), (pointer:coarse){ .siri-orb{ --siri-blur:9px; --siri-contrast:1.55; } .siri-orb::before{ --siri-angle:104deg; animation:siri-drift 48s linear infinite; /* Promoted on purpose. Rotating a blurred, contrast-stretched layer is only cheap if that layer is rasterised once and then spun by the compositor; without the promotion the whole filter chain re-runs every frame. The coarse-rasterisation and square-corner problems this used to cause on iOS are handled by the mask on .siri-orb::before, so the promotion is safe to keep now. anim-budget.js pauses it off screen. */ will-change:transform; } } /* restated last: the rule above reintroduces an animation that the earlier reduced-motion guard had already switched off */ @media (prefers-reduced-motion: reduce){ .siri-orb::before{ animation:none; will-change:auto; } } /* ============================================================ PHONE PASS 2. Everything below sits inside a phone media query and changes nothing on desktop. Grouped here rather than scattered so the whole pass can be read, and reverted, as one thing. ============================================================ */ /* ---- 1. tap states must not stick ---- iOS keeps :hover applied after a tap until you touch something else, so "Learn more" kept its gold wash and looked jammed. Anything whose hover changes colour is reset to its resting state where there is no hover. */ @media (hover:none){ .btn-exec:hover{ border-color:rgba(201,169,106,.5); background:transparent; transform:none; box-shadow:none; } .btn-case:hover{ background:var(--maroon); border-color:var(--maroon); color:var(--cream); transform:none; box-shadow:none; } .navlink:hover, .rail__nav:hover{ color:var(--ink-soft); border-color:rgba(26,26,23,.13); background:transparent; transform:none; } .btn-cta:hover{ background:var(--maroon); border-color:var(--maroon); transform:none; box-shadow:0 0 18px -3px rgba(214,168,92,.45); } .pill:hover, .pillx:hover{ transform:none; } .doc .back:hover{ color:var(--ink-soft); border-color:rgba(26,26,23,.13); background:rgba(251,250,246,.6); transform:none; box-shadow:0 1px 2px rgba(26,26,23,.03); } .doc .back:hover::before{ transform:none; } .foot2__soc a:hover{ color:rgba(240,238,230,.55); border-color:rgba(240,238,230,.16); background:transparent; } } @media (max-width:900px){ /* ---- 2. hero content sits well up the screen ---- The block was 917px tall in an 844px viewport, so it overflowed: justify-content:center had nothing to centre and padding-bottom only made the section taller. The lift has to come out of the figure itself. .orbwrap is a fixed 208px box, which is why shrinking --orb-size alone moved nothing. Roughly 90px comes back, which brings the headline and both CTAs inside the first screen. */ .hero--d{ padding-bottom:0; } .hfig{ padding:1.7rem 1.4rem 1.3rem; } .orbwrap{ width:min(158px,44vw); height:min(158px,44vw); } .hfig .siri-orb{ --orb-size:118px; } /* the ripple mask is measured from the dome's top, so it moves with it or the wave starts painting over the orb instead of from behind it */ .ripples{ -webkit-mask-image:radial-gradient(circle at 50% 108px, transparent 66px, #000 88px); mask-image:radial-gradient(circle at 50% 108px, transparent 66px, #000 88px); } .d-head{ margin-top:1.6rem; } } @media (max-width:880px){ /* ---- 3. 01 Who we are: the sideways track ---- .duo carries the gap under the title on desktop, but it collapses to display:contents here, so the gap vanished and the first panel sat on the headline. Put it back on the track itself. */ .abouttrack{ margin-top:clamp(.7rem,3.5vw,1.6rem); /* A scroll container clips at its padding edge, and overflow-y cannot be visible while overflow-x scrolls. So the room for the panel shadows has to be padding, not overflow: without it every card's shadow ended on a hard horizontal line. margin-top above is reduced by the same amount so the gap under the headline is unchanged. */ /* the panel shadow is 0 44px 84px -48px, so it finishes ~38px below the card. The scroller clips at its padding edge, so that is the number this padding has to beat. */ padding-top:1rem; padding-bottom:3.25rem; /* each panel is its own height. Stretch made every card as tall as the Pimcore one, which is what left a lake of white under "I'm Mo". */ align-items:flex-start; gap:.75rem; padding-inline:10vw; /* keeps a swipe inside the track instead of rubber-banding the page */ overscroll-behavior-x:contain; } /* narrower than the old 86vw so the next card genuinely peeks and the track reads as scrollable without an affordance drawn on top */ .abouttrack .panel{ flex:0 0 80vw; scroll-snap-stop:always; } } @media (max-width:760px){ /* ---- 4. centred section headings ---- .shead goes column and left-aligns at this width, which quietly undid shead--mid on Projects and Trust. Only the centred variant is restored. */ .shead--mid{ align-items:center; text-align:center; } /* ---- 5. case study cards ---- The CTA was almost touching the bottom rule. Taller card, more floor under the button, and a taller stage so the card's own drop shadow is not sliced off by the stage's mask. */ .rail__stage{ height:clamp(430px,58vw,470px); } .railcard{ height:auto; min-height:352px; padding-bottom:clamp(1.6rem,4vw,2rem); } .railcard p{ margin-top:.2rem; } .btn-case{ margin-top:auto; margin-bottom:0; } /* ---- 6. the Pimcore stage ---- The stage is a fixed 1200x520 canvas scaled as one piece, so every size inside it is divided by .52 on screen. Laid out for desktop that leaves, on a phone: an orb of 146px, rings sitting 36px and 109px clear of it, and chip labels rendering at 5.5px. Hence "orb too small, text and lines too far away, too much space between them". So the canvas geometry is re-proportioned for this width rather than the stage being scaled differently. Orb radius 140 -> 170, rings pulled from 210/350 in to 220/310, and the chip type roughly doubled so it lands near 10px once scaled. The orbit paths have to move with the rings or the chips would ride circles that are no longer drawn. */ /* Budget, in stage units (everything here is divided by .52 on screen): orb radius 150 -> 156px across inner ring 225 -> 75 clear of the orb outer ring 330 -> 105 apart, which must exceed one chip's height or the two orbits collide chip height ~33 -> fits inside that 105 with room either side The previous pass had the rings only 90 apart carrying 42-unit chips, which is why the orbits sat on top of each other and on the orb. Ring borders go to 2px because 1px at .52 renders sub-pixel and the lines simply were not there. */ .stackviz{ height:clamp(250px,66vw,310px); } .sviz-stage{ transform:translateX(-50%) scale(.52); } .score{ width:300px; height:300px; padding-top:2.8rem; gap:.6rem; } .score__logo{ width:200px; } .score__s{ font-size:14px; letter-spacing:.22em; } .ring{ border-width:2px; } .rg1{ width:500px; height:500px; opacity:.75; } .rg2{ width:710px; height:710px; opacity:.5; } .schip{ font-size:16px; padding:.4em .8em; gap:.4em; } .schip::before{ width:7px; height:7px; } } /* outside the @supports block above, so it needs its own guard */ @supports (offset-path: path('M 0 0 L 1 1')){ @media (max-width:760px){ .sc1,.sc2,.sc3,.sc4{ offset-path:path('M 600 270 A 250 250 0 1 1 600 770 A 250 250 0 1 1 600 270 Z'); } .sc5,.sc6,.sc7,.sc8{ offset-path:path('M 600 165 A 355 355 0 1 1 600 875 A 355 355 0 1 1 600 165 Z'); } } /* ---- 7. sideways tracks: one card per swipe, no page rubber-band ---- */ .tgrid{ overscroll-behavior-x:contain; } .tcol{ scroll-snap-stop:always; } } /* ---- trust toast ---- Sits above the footer curtain (z-index 50, same band as the header) and is inert to the pointer so it can never block what is underneath it. */ .tnote{ position:fixed; left:50%; bottom:clamp(2rem,9vh,3.5rem); transform:translate(-50%,14px); z-index:60; pointer-events:none; max-width:min(32rem, calc(100vw - 2.5rem)); text-align:center; padding:.85em 1.4em; border-radius:999px; background:var(--ink); color:var(--cream); font-family:var(--font-body); font-size:.85rem; line-height:1.45; box-shadow:0 18px 40px -22px rgba(26,26,23,.8); opacity:0; visibility:hidden; transition:opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear .4s; } .tnote.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s,0s,0s; } @media (prefers-reduced-motion: reduce){ .tnote{ transition:opacity .01s; } } /* the CTA is a real