/* ============================================================ SHINOX — homepage stylesheet Direction: "precision / technical" — the page is drawn like a work order. Hairline rules, tabular numbers, mono labels, and gold used the way an inspector uses a stamp: one mark, not decoration. Tokens are the source of truth. Do not invent new colours. ============================================================ */ /* ---------- self-hosted fonts (latin subsets) ---------- */ @font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-latin-var.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2202,U+2026,U+2013,U+2014,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; src:url('fonts/Inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2202,U+2026,U+2013,U+2014,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-latin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2202,U+2026,U+2013,U+2014,U+00B7,U+00D7,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+2202,U+2026,U+2013,U+2014,U+00B7,U+00D7,U+FEFF,U+FFFD; } :root{ /* ============================================================ TOKENS — two themes, one family. Both are the same drawing at different exposures; there is no third "instrument panel". light (default) — WARM SLATE, a neutral work-order paper dark — CYANOTYPE, the blueprint ground Switched by data-theme on (theme.js), or by prefers-color-scheme when the reader hasn't chosen. Every selector below reads tokens only. Do not invent colours. ============================================================ */ /* neutrals — warm slate ground */ --paper:#F0EFEC; /* neutral paper */ --paper-2:#E7E6E1; /* alternating band */ --surface:#FFFFFF; /* cards / panels */ --ink:#16283C; /* headlines + strokes — 12.8:1 on paper */ --slate:#414B57; /* body text — 7.5:1 */ --slate-2:#5C646F; /* meta / captions — 4.9:1 */ --line:#DCDAD4; /* hairlines */ --line-strong:#C0BDB4; /* stronger rules / table borders */ /* the ONE accent — gold (industrial signal), present in both themes. On a light ground bright gold cannot carry text at AA, so the FILL stays bright and the TEXT token is deepened. Same signal, two jobs. */ --gold:#EFC24B; /* fill / marks */ --gold-deep:#f0c03d; /* hover, focus rings, active strokes */ --gold-ink:#956f06; /* gold TEXT — 5.3:1 on paper */ --gold-glow:rgba(239,194,75,.16); --gold-ring:rgba(208,138,12,.34); /* the stamp's double-ring shadow */ /* status — deepened so the coloured TEXT variants clear AA on paper */ --live:#1E8A50; /* LIVE / done — status only, never decoration */ --live-ink:#17703F; /* the same green as TEXT — 5.3:1 */ --no:#C4392C; /* errors / the "not right for you" column */ --no-ink:#B02F23; /* the same red as TEXT — 5.5:1 */ /* solid dark sections — proof, final, footer, nav CTA, skip link. On the light theme these become cyanotype panels, which is how the two themes stay visibly one system. */ --dark-bg:#0E2A47; --on-dark:#EAF2FB; --on-dark-dim:#9FB4CF; --dark-line:#27496E; --dark-tile:#123256; /* header / nav CTA */ --paper-rgb:240,239,236; /* header glass, as an rgb triplet */ --cta-bg:#0E2A47; --cta-ink:#EAF2FB; --cta-border:transparent; /* drafting grid + shadows — both must flip with the ground */ --grid:rgba(22,40,60,.07); --shadow:rgba(22,40,60,.16); --shadow-strong:rgba(22,40,60,.24); /* constant across both themes — dark text on gold fills */ --on-gold:#16181C; /* type */ --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; } /* ---------- CYANOTYPE (dark) ---------- Declared twice on purpose: once for the OS preference when the reader has made no choice, once for an explicit choice on a light-OS machine. KEEP THE TWO BLOCKS IN SYNC. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0E2A47; --paper-2:#0C233E; --surface:#123256; --ink:#EAF2FB; --slate:#B8C7DB; --slate-2:#8BA3BF; --line:#1E4166; --line-strong:#2E587F; --gold:#F7D06B; --gold-deep:#EFC24B; --gold-ink:#EFC24B; --gold-glow:rgba(245,166,35,.28); --gold-ring:rgba(239,194,75,.4); --live:#4CC07A; --live-ink:#5BD08B; --no:#E0574B; --no-ink:#EF6A5E; --dark-bg:#0A1E36; --on-dark:#EAF2FB; --on-dark-dim:#9FB4CF; --dark-line:#1E4166; --dark-tile:#0F2B49; --paper-rgb:14,42,71; --cta-bg:#0A1E36; --cta-ink:#EAF2FB; --cta-border:transparent; --grid:rgba(220,232,245,.08); --shadow:rgba(0,0,0,.4); --shadow-strong:rgba(0,0,0,.55); } } :root[data-theme="dark"]{ --paper:#0E2A47; --paper-2:#0C233E; --surface:#123256; --ink:#EAF2FB; --slate:#B8C7DB; --slate-2:#8BA3BF; --line:#1E4166; --line-strong:#2E587F; --gold:#F7D06B; --gold-deep:#EFC24B; --gold-ink:#EFC24B; --gold-glow:rgba(245,166,35,.28); --gold-ring:rgba(239,194,75,.4); --live:#4CC07A; --live-ink:#5BD08B; --no:#E0574B; --no-ink:#EF6A5E; --dark-bg:#0A1E36; --on-dark:#EAF2FB; --on-dark-dim:#9FB4CF; --dark-line:#1E4166; --dark-tile:#0F2B49; --paper-rgb:14,42,71; --cta-bg:#0A1E36; --cta-ink:#EAF2FB; --cta-border:transparent; --grid:rgba(220,232,245,.08); --shadow:rgba(0,0,0,.4); --shadow-strong:rgba(0,0,0,.55); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body);font-size:17px;line-height:1.6; color:var(--slate);background:var(--paper); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-0.02em;font-weight:700;line-height:1.12} .num,.mono{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono)} .wrap{max-width:1160px;margin:0 auto;padding:0 28px} /* eyebrow — mono form-label */ .eyebrow{ font-family:var(--mono);font-weight:600;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink); display:inline-flex;align-items:center;gap:10px;margin-bottom:18px; } .eyebrow::before{content:"";width:8px;height:8px;background:var(--gold);flex-shrink:0} .eyebrow.on-dark{color:var(--gold)} /* ---------- accessibility ---------- */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--dark-bg);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 3px 0} .skip:focus{left:0} :focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;font-family:var(--body);font-size:17px;font-weight:700;cursor:pointer;border:none;text-decoration:none;min-height:48px;border-radius:2px} .btn-gold{background:var(--gold);color:var(--on-gold)} .btn-gold:hover{background:var(--gold-deep)} .btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink)} /* ---------- header ---------- */ header{position:sticky;top:0;background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:50} .nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-0.01em} .logo .mark{width:28px;height:28px;background:var(--gold);color:var(--on-gold);display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px;flex-shrink:0} .navlinks{display:flex;gap:30px;font-size:15px;font-weight:500} .navlinks a{color:var(--slate);text-decoration:none} .navlinks a:hover{color:var(--ink)} .nav .cta{background:var(--cta-bg);color:var(--cta-ink);border:1px solid var(--cta-border);padding:11px 18px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;border-radius:2px} .nav .cta:hover{opacity:.9} /* mobile disclosure menu — no JS; is focusable and announces state */ .menu{display:none} .menu>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:var(--surface)} .menu>summary::-webkit-details-marker{display:none} .menu .bars{display:block;width:18px;height:2px;background:var(--ink);position:relative} .menu .bars::before,.menu .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)} .menu .bars::before{top:-6px}.menu .bars::after{top:6px} .menu[open] .bars{background:transparent} .menu[open] .bars::before{top:0;transform:rotate(45deg)} .menu[open] .bars::after{top:0;transform:rotate(-45deg)} .menu .panel{position:absolute;left:0;right:0;top:68px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px var(--shadow);padding:8px 28px 20px} .menu .panel a{display:block;padding:14px 0;color:var(--ink);text-decoration:none;font-size:17px;border-bottom:1px solid var(--line)} .menu .panel .btn{margin-top:18px;width:100%} /* ================= HERO ================= */ /* the 56px background grid that used to live here was dead — the scroll hero's own .hero rule further down overrode it, and .bp-marks::before now owns the hero grid at the drafting pitch of 24px. */ .hero{ position:relative;border-bottom:1px solid var(--line); background:var(--paper); } .hero .in{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center;padding-top:84px;padding-bottom:84px} .hero h1{font-size:52px;line-height:1.04;letter-spacing:-0.03em} .hero h1 .hl{background:var(--gold);color:var(--on-gold);padding:0 6px;font-family:var(--mono);font-weight:600;letter-spacing:-0.01em} .hero .sub{margin-top:24px;font-size:19px;color:var(--slate);max-width:520px} .hero .cta{display:flex;gap:14px;margin-top:34px;align-items:center;flex-wrap:wrap} /* the 1→10 measurement scale — the thesis made physical */ .scale{margin-top:40px;max-width:440px} .scale-bar{position:relative;height:16px} .scale-bar::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line-strong)} .scale-bar .fill{position:absolute;left:0;top:7px;height:2px;width:100%;background:var(--gold)} .scale-bar .marker{position:absolute;right:0;top:2px;width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 5px var(--gold-glow)} .scale-bar::after{content:"";position:absolute;left:0;right:0;top:2px;height:12px; background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px calc(100%/9)); opacity:.55} .scale-labels{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-family:var(--mono)} .scale-labels span{font-size:13px;color:var(--slate-2)} .scale-labels .scale-cap{font-size:12px;letter-spacing:.06em} /* the gold inspection stamp — THE signature */ .stamp{ font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.2em; color:var(--gold-ink);text-transform:uppercase;line-height:1; border:2px solid var(--gold-ink);padding:9px 14px; transform:rotate(-4deg);display:inline-block;position:relative; box-shadow:inset 0 0 0 1px var(--gold-ring),0 1px 0 var(--gold-ring); white-space:nowrap; } .stamp::before{content:"";position:absolute;inset:-3px;border:1px solid var(--gold-ring);transform:rotate(.7deg);pointer-events:none} .stamp.on-dark{color:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-ring),0 1px 0 var(--gold-ring)} .stamp.on-dark::before{border-color:var(--gold-ring)} /* ================= SECTIONS ================= */ section{padding:96px 0} .sec-head{margin-bottom:52px;max-width:760px} h2{font-size:38px;line-height:1.1} .lede{margin-top:18px;font-size:19px;color:var(--slate);max-width:660px} /* thesis */ .thesis{background:var(--surface);border-bottom:1px solid var(--line)} .thesis .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .thesis .big-num{font-family:var(--mono);font-weight:600;font-size:120px;line-height:1;color:var(--ink);letter-spacing:-0.05em} .thesis .big-num .arrow{color:var(--gold-ink)} .thesis .num-cap{font-family:var(--mono);font-size:13px;color:var(--slate-2);margin-top:10px;letter-spacing:.02em} .thesis ul{list-style:none;margin-top:22px;border-top:1px solid var(--line)} .thesis li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)} .thesis li::before{content:"";width:8px;height:8px;background:var(--gold);flex-shrink:0;margin-top:9px} /* problems */ .prob{background:var(--paper-2);border-bottom:1px solid var(--line)} .prob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{border:1px solid var(--line);background:var(--surface);padding:26px;position:relative} .card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease} .card:hover::before{transform:scaleX(1)} .card-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);margin-bottom:18px} .card-top .idx{color:var(--gold-ink)} .card h3{font-size:20px;line-height:1.28;color:var(--ink)} .card p{margin-top:12px;font-size:16px;color:var(--slate)} /* capabilities */ .caps{background:var(--surface);border-bottom:1px solid var(--line)} .cap-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:8px;border-top:1px solid var(--line-strong)} .cap{display:flex;gap:20px;align-items:flex-start;padding:26px 26px 26px 0;border-bottom:1px solid var(--line)} .cap:nth-child(even){padding-left:26px;padding-right:0} .cap .code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold-ink);letter-spacing:.08em;margin-top:4px} .cap h3{font-size:19px;color:var(--ink)} .cap p{font-size:16px;margin-top:6px;color:var(--slate)} /* pillars — ruled ledger list */ .pillars{background:var(--paper-2);border-bottom:1px solid var(--line)} .pill-list{margin-top:8px} .pill{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:28px 0;border-top:1px solid var(--line)} .pill:last-child{border-bottom:1px solid var(--line)} .pill .code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold-ink);letter-spacing:.1em} .pill h3{font-size:23px} .pill p{color:var(--slate);margin-top:8px;max-width:620px} .pill .why{font-size:15px;color:var(--slate-2);margin-top:10px} .pill .why strong{color:var(--ink);font-weight:600} .pill .go{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--gold-ink);text-decoration:none;white-space:nowrap;border-bottom:1.5px solid var(--gold);padding-bottom:3px} .pill .go:hover{color:var(--gold-deep);border-bottom-color:var(--gold-deep)} /* proof — "connects to" */ .proof{background:var(--dark-bg);color:var(--on-dark)} .proof .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center} .proof h2{color:var(--on-dark)} .proof .copy{font-size:19px;color:var(--on-dark-dim);margin-top:18px;max-width:520px} .connect-table{border:1px solid var(--dark-line);background:var(--dark-tile)} .connect-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--dark-line);font-family:var(--mono);font-size:14px} .connect-row:last-child{border-bottom:none} .connect-row .name{color:var(--on-dark)} .connect-row .state{color:var(--gold);font-size:12px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px} .connect-row .state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)} /* process — a numbered accordion; each step expands in place */ .steps{list-style:none;margin-top:40px;border-top:1px solid var(--line-strong)} .step{border-bottom:1px solid var(--line)} .step summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:flex-start;gap:20px;padding:22px 48px 22px 0} .step summary::-webkit-details-marker{display:none} .step .n{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--gold-ink);padding-top:6px;min-width:32px} .step-head{flex:1} .step-head .t{display:block;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-0.02em;line-height:1.12} .step-head .s{display:block;font-size:15px;color:var(--slate);margin-top:4px} .step summary::after{content:"+";position:absolute;right:8px;top:22px;font-size:26px;font-weight:400;color:var(--gold-ink);line-height:1;font-family:var(--mono)} .step details[open] summary::after{content:"−"} .step-detail{padding:0 0 24px 52px;max-width:760px} .step-detail p{font-size:16px;color:var(--slate)} /* fit check */ .fit{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .fit-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border:1px solid var(--line-strong)} .fit-col{padding:36px} .fit-col+.fit-col{border-left:1px solid var(--line-strong)} .fit-col h3{font-size:21px;font-family:var(--mono);font-weight:600;letter-spacing:.04em} .fit-list{margin-top:22px} .fit-item{border-bottom:1px solid var(--line)} .fit-item:last-child{border-bottom:none} .fit-item summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 44px 16px 0;font-size:17px;color:var(--ink);line-height:1.45} .fit-item summary::-webkit-details-marker{display:none} .fit-item .mk{font-family:var(--mono);font-weight:600;flex-shrink:0;width:18px;margin-top:2px} .fit-yes .fit-item .mk{color:var(--live-ink)} .fit-no .fit-item .mk{color:var(--slate-2)} .fit-no .fit-item summary{color:var(--slate)} .fit-item summary::after{content:"+";position:absolute;right:8px;top:14px;font-size:22px;color:var(--gold-ink);font-family:var(--mono);line-height:1} .fit-item[open] summary::after{content:"−"} .fit-answer{padding:0 0 18px 32px} .fit-answer p{font-size:15px;color:var(--slate);max-width:60ch} .fit-no{background:var(--paper)} /* FAQ */ .faq{background:var(--paper-2)} .faq-list{margin-top:8px;max-width:820px;border-top:1px solid var(--line-strong)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);line-height:1.3} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--gold-ink);line-height:1;font-family:var(--mono)} .faq details[open] summary::after{content:"−"} .faq .answer{padding:0 0 26px;font-size:17px;color:var(--slate);max-width:68ch} .faq .answer p+p{margin-top:12px} /* final CTA — bookends the hero */ .final{background:var(--dark-bg);color:var(--on-dark);position:relative;overflow:hidden} .final .in{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center} .final h2{color:var(--on-dark);max-width:600px} .final .copy{font-size:19px;color:var(--on-dark-dim);margin-top:18px;max-width:560px} .final .cta{display:flex;gap:20px;margin-top:34px;align-items:center;flex-wrap:wrap} .final .meta{font-size:15px;color:var(--on-dark-dim)} .final .director{position:relative;width:200px;flex-shrink:0} .final .director img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))} .final .director .stamp{margin-top:22px} /* trust bar */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:22px 0} .trust .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--slate);font-family:var(--mono);letter-spacing:.02em} .trust .item{display:flex;gap:9px;align-items:center} .trust .dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;flex-shrink:0} /* footer */ footer{background:var(--dark-bg);color:var(--on-dark-dim);padding:56px 0 36px;font-size:15px} footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} footer h5{color:var(--on-dark);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} footer a{color:var(--on-dark-dim);text-decoration:none;display:block;margin:10px 0} footer a:hover{color:var(--on-dark)} footer .logo{color:var(--on-dark);font-family:var(--display)} footer .logo .mark{background:var(--gold);color:var(--on-gold);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:15px;margin-right:10px;vertical-align:-6px} footer .strap{margin-top:16px;max-width:280px;color:var(--on-dark-dim)} footer .addr{margin:10px 0;color:var(--on-dark-dim)} .bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--dark-tile);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} .bottom .stamp{font-size:12px;padding:8px 12px} /* ---------- responsive ---------- */ @media(max-width:1000px){ .prob-grid{grid-template-columns:1fr 1fr} } @media(max-width:900px){ .navlinks,.nav>.cta{display:none} .menu{display:block} .hero .in{grid-template-columns:1fr;gap:48px;padding-top:60px;padding-bottom:60px} .hero h1{font-size:42px} .thesis .grid,.proof .grid{grid-template-columns:1fr;gap:44px} .cap-list{grid-template-columns:1fr} .cap:nth-child(even){padding-left:0} .pill{grid-template-columns:auto 1fr;grid-template-areas:"code body" ". go";row-gap:16px} .pill .code{grid-area:code}.pill h3,.pill p{grid-area:body}.pill .go{grid-area:go} .fit-grid{grid-template-columns:1fr} .fit-col+.fit-col{border-left:none;border-top:1px solid var(--line-strong)} .final .in{grid-template-columns:1fr;gap:44px} .final .director{order:-1;width:160px} footer .cols{grid-template-columns:1fr 1fr} } @media(max-width:560px){ section{padding:60px 0} .wrap{padding:0 20px} .hero h1{font-size:33px} h2{font-size:30px} .prob-grid{grid-template-columns:1fr} .thesis .big-num{font-size:80px} .step summary{gap:14px} .step .n{min-width:26px} .step-detail{padding-left:0} .cap{padding-right:0} .pill{grid-template-columns:1fr;grid-template-areas:"code" "body" "go"} .faq summary{font-size:18px} .trust .row{flex-direction:column;align-items:flex-start;gap:12px} footer .cols{grid-template-columns:1fr;gap:30px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ============================================================ THE BUILD — the scroll sequence A working module drawn in HTML: chrome, fields, table rows and the e-invoice strip. Everything below is the FINISHED state. The motion layer at the foot of this file only ever animates *into* these values, so a browser with no scroll-timeline support — or a reader who asked for less motion — gets the completed system, fully readable, nothing hidden. ============================================================ */ .seq{background:var(--paper-2);border-bottom:1px solid var(--line);padding-bottom:0;overflow:clip} .seq-head{max-width:820px} .track{position:relative;margin-top:52px} .stage{position:sticky;top:68px;display:flex;align-items:center;padding:8px 0 56px} .stage-in{display:grid;grid-template-columns:210px 1fr;gap:52px;align-items:center;width:100%;min-width:0} .stage-in>*{min-width:0} .screen,.doc,.doc-tbl,.doc-meta,.tr,.f{min-width:0} .tr>span{min-width:0;overflow:hidden;text-overflow:ellipsis} /* left rail — the four beats, plus the 1→10 gauge */ .legend{list-style:none;border-left:1px solid var(--line-strong)} .lg{position:relative;padding:13px 0 13px 17px;font-family:var(--mono);font-size:13px;display:flex;flex-direction:column;gap:4px} .lg::before{content:"";position:absolute;left:-1px;top:13px;bottom:13px;width:3px;background:var(--gold)} .lg .k{font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--gold-ink)} .lg .t{color:var(--slate);font-size:13px;line-height:1.3} .gauge{margin-top:26px;padding-left:17px} .g-bar{position:relative;height:2px;background:var(--line-strong)} .g-fill{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);transform-origin:left} .g-lab{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--slate-2)} /* the screen */ .screen{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 50px 80px -50px var(--shadow-strong)} .doc-bar{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line-strong);background:var(--paper);font-family:var(--mono)} .doc-t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .doc-id{font-size:13px;color:var(--slate-2)} .doc-st{margin-left:auto;position:relative;display:flex;justify-content:flex-end;min-width:104px} .st-draft,.st-sub{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border:1px solid currentColor;white-space:nowrap} .st-draft{position:absolute;right:0;top:0;color:var(--slate-2);opacity:0} .st-sub{color:var(--live-ink)} .doc-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line-strong)} .f{background:var(--surface);padding:14px 18px} .fl{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2)} .fv{display:block;margin-top:7px;font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doc-tbl{padding:6px 20px 14px} .tr{display:grid;grid-template-columns:1.55fr .5fr .55fr 1fr .8fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;align-items:baseline} .tr:last-child{border-bottom:none} .tr.th{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);border-bottom:1px solid var(--line-strong);padding-bottom:9px} .tr .c{color:var(--ink)} .tr .wh{color:var(--slate-2)} .ck{font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .ck.ok{color:var(--live-ink)} .ck.ok::before{content:"✓"} .ck.short{color:var(--no-ink)} .ck.short::before{content:"▲";font-size:10px} .doc-inv{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 20px;border-top:1px solid var(--line-strong);background:var(--paper)} .inv-t{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)} .inv-u{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--slate-2)} .inv-s{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--live-ink);display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .inv-s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(46,158,91,.16)} /* stage 00 — how it runs now. Hidden unless the motion layer is live. */ .mess{display:none;position:absolute;inset:0;z-index:2;background:var(--paper-2)} .scrap{position:absolute;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 14px 26px -16px var(--shadow-strong);padding:12px 15px;font-family:var(--mono);font-size:12px;color:var(--slate)} .s1{left:5%;top:11%;width:54%;border-left:3px solid var(--live);transform:rotate(-2.2deg)} .s1 .from{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2)} .s1 p{margin-top:7px;color:var(--ink);font-size:13px;line-height:1.4} .s2{right:4%;top:36%;width:47%;transform:rotate(1.6deg)} .s2 .file{font-size:11px;color:var(--no-ink)} .s2 .cells{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:10px;background:var(--line)} .s2 .cells i{background:var(--paper);height:15px} .s3{left:11%;bottom:11%;border-style:dashed;background:var(--paper-2);transform:rotate(-1deg)} .s3 .board{font-size:16px;color:var(--slate-2);letter-spacing:.05em} /* capability readout — the real input, the real record it creates */ .cap .io{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--slate-2)} .cap .io .ar{color:var(--gold-ink);font-weight:600} .cap .io .o{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px} /* scroll progress — an instrument reading, not a decoration */ .progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:2} @media(max-width:1000px){ .stage-in{grid-template-columns:170px 1fr;gap:32px} .doc-meta{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ .stage{top:68px;padding:4px 0 40px} .stage-in{grid-template-columns:1fr;gap:24px} .legend{display:grid;grid-template-columns:repeat(4,1fr);border-left:none;border-top:1px solid var(--line-strong)} .lg{padding:12px 10px 0 0;min-width:0} .lg .t{overflow-wrap:anywhere} .lg::before{left:0;top:-1px;bottom:auto;width:26px;height:3px;transform-origin:left} .gauge{display:none} .tr{grid-template-columns:1.5fr .5fr .55fr .8fr} .tr .wh{display:none} .s1{width:64%}.s2{width:56%} } @media(max-width:560px){ .track{margin-top:36px} .doc-bar{gap:10px;padding:12px 14px;flex-wrap:wrap} .doc-id{font-size:11px} .doc-st{min-width:0;margin-left:auto} .f{padding:11px 14px} .fv{font-size:12px} .doc-tbl{padding:4px 14px 10px} .tr{font-size:11px;gap:9px;grid-template-columns:1.35fr .48fr .48fr .62fr} .doc-meta{grid-template-columns:1fr 1fr} .fl{font-size:9px} .legend{grid-template-columns:repeat(4,1fr)} .lg{padding:10px 7px 0 0} .lg .k{font-size:9px} .doc-inv{padding:12px 14px;flex-direction:column;align-items:flex-start;gap:10px} .lg .t{font-size:11px} .s1 p{font-size:12px} .s3 .board{font-size:13px} } /* ============================================================ MOTION LAYER Rules: 1. Every keyframe animates *from* a start state *to* the element's natural, finished value. Nothing is ever left in a hidden base state, so no-support = the complete page. 2. Only opacity and transform animate — compositor work only, which is what keeps this smooth on a mid-range Android. 3. No JavaScript, no scroll hijacking, no smooth-scroll library. Native scrolling is untouched: the reader sets the pace. 4. Text never waits on motion to become readable. ============================================================ */ @keyframes riseIn{from{opacity:0;transform:translateY(12px)}} @keyframes rowIn{from{opacity:0;transform:translateX(-12px)}} @keyframes popIn{from{opacity:0;transform:scale(.9)}} @keyframes fadeIn{from{opacity:0}} @keyframes dimUp{from{opacity:.44}} @keyframes drawX{from{transform:scaleX(0)}} @keyframes gaugeUp{from{transform:scaleX(.06)}} @keyframes draftOut{to{opacity:0}} @keyframes messOut{to{opacity:0;visibility:hidden}} @keyframes s1Out{to{opacity:0;transform:rotate(-5.5deg) translateY(-15%)}} @keyframes s2Out{to{opacity:0;transform:rotate(5deg) translateX(18%)}} @keyframes s3Out{to{opacity:0;transform:rotate(-4deg) translateY(18%)}} @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ /* --- scroll progress, read off the document --- */ .progress{display:block;animation:drawX auto linear both;animation-timeline:scroll(root block)} /* ============ the sequence ============ .track is the scroll distance; .stage is pinned inside it. `contain` = exactly the span where the track fully covers the viewport, i.e. the pinned stretch. Resolution-independent. */ .track{height:260vh;view-timeline-name:--build;view-timeline-axis:block} .stage{min-height:calc(100svh - 68px)} .seq .anim{animation-timeline:--build;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both} /* 00 · how it runs now — holds, then clears out */ .mess{display:block;animation-name:messOut;animation-range:contain 14% contain 23%} .s1{animation-name:s1Out;animation-range:contain 12% contain 22%} .s2{animation-name:s2Out;animation-range:contain 14% contain 23%} .s3{animation-name:s3Out;animation-range:contain 10% contain 21%} /* 01 · the work order takes shape */ .doc{animation-name:fadeIn;animation-range:contain 20% contain 30%} .doc-bar{animation-name:riseIn;animation-range:contain 21% contain 32%} .f1{animation-name:riseIn;animation-range:contain 29% contain 37%} .f2{animation-name:riseIn;animation-range:contain 32% contain 40%} .f3{animation-name:riseIn;animation-range:contain 35% contain 43%} .f4{animation-name:riseIn;animation-range:contain 38% contain 46%} /* 02 · stock, checked — rows arrive one at a time */ .tr.th{animation-name:fadeIn;animation-range:contain 42% contain 48%} .tr.r1{animation-name:rowIn;animation-range:contain 47% contain 55%} .tr.r2{animation-name:rowIn;animation-range:contain 53% contain 61%} .tr.r3{animation-name:rowIn;animation-range:contain 59% contain 67%} /* 03 · submitted, then filed */ .st-draft{opacity:1;animation-name:draftOut;animation-range:contain 68% contain 73%} .st-sub{animation-name:popIn;animation-range:contain 73% contain 80%} .doc-inv{animation-name:riseIn;animation-range:contain 79% contain 89%} .inv-s{animation-name:popIn;animation-range:contain 87% contain 94%} /* the rail keeps score */ .l1{animation-name:dimUp;animation-range:contain 2% contain 8%} .l2{animation-name:dimUp;animation-range:contain 24% contain 31%} .l3{animation-name:dimUp;animation-range:contain 46% contain 53%} .l4{animation-name:dimUp;animation-range:contain 77% contain 84%} .g-fill{animation-name:gaugeUp;animation-range:contain 6% contain 92%} /* --- capability readouts resolve as they enter --- */ .cap .io .ar,.cap .io .o{animation:popIn auto linear both;animation-timeline:view(block);animation-range:entry 25% entry 75%} /* --- "connects to" states tick on --- */ .connect-row .state{animation:popIn auto linear both;animation-timeline:view(block);animation-range:entry 15% entry 65%} @media(max-width:900px){ .track{height:210vh} .stage{min-height:auto} } } } /* ============================================================ HERO — the stroke-morph sequence (added for the scroll hero) One bench draws itself, dissolves into a schematic, tiles ×10 on one spine, then the floor returns and the headline reveals. Layout: .hero-track is the 240vh scroll distance; .hero-stage is fixed inside it for the duration of the pin (hero.js). The SVG is centred; overlays (beat labels, counter) sit on top; the payoff copy is clip-masked up at Beat 4. Same tokens as the rest of the page — the hero and the site stay in one theme. ============================================================ */ .hero{ position:relative; overflow:clip; background:var(--paper); /* the section rule's 96px padding would push .hero-track down the page, so the pin engages 165px late and the whole stage slides up under the header before snapping into place. The hero is a full-bleed canvas. */ padding:0; } /* one viewport tall — the pin-spacer supplies the 240vh of scroll, so this must NOT also be 240vh or the hero costs twice the scroll it animates */ .hero-track{position:relative;height:auto} .hero-stage{ position:relative;left:0;right:0;top:0; height:100svh; /* Two bands. The scene is anchored to the TOP of the stage; the lower band is left empty so .hero-copy has somewhere to reveal into at Beat 4 without colliding with the returned benches. Both bands are sized off the same 100svh, so the relationship holds at any height. */ display:flex;align-items:flex-start;justify-content:center; padding-top:72px; /* clears the sticky header during the pin */ z-index:1; /* its own stacking context under the pin */ } /* the scene — sized by HEIGHT so it always leaves the lower band free. Width follows the 1200:700 viewBox, so the art never letterboxes. */ .hero-svg{ width:min(92vw,1180px,132svh);height:auto; display:block;position:relative;z-index:1; } /* themed SVG strokes — these must be CSS, not attributes: the custom properties resolve at paint time, so the whole scene flips with one data-theme change. */ .hero-svg #hero-master path{stroke:var(--ink)} .hero-svg #hero-props .prop{stroke:var(--ink);opacity:0} .hero-svg #hero-tiles{stroke:var(--ink)} .hero-svg #hero-tiles use{opacity:0} /* JS places and reveals these at Beat 3 */ .hero-svg #hero-spine{opacity:0} /* JS raises this at Beat 3 */ .hero-svg #hero-spine line{stroke:var(--ink)} .hero-svg #node-labels{fill:var(--slate-2);letter-spacing:.08em} .hero-svg #node-hl rect{stroke:var(--gold)} /* vector-effect is NOT an inherited property, so it cannot live on the . Set here or the ×10 tiles render at 0.17 × 1.5px hairlines. */ .hero-svg path,.hero-svg line,.hero-svg rect{vector-effect:non-scaling-stroke} /* Beat-1 warm falloff — the human beat is the lit one; gone by Beat 3. Centred on the bench in the upper band, not on the stage. */ .beat-glow{ position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(50% 30% at 51% 32%,var(--gold-glow),transparent 72%); opacity:.5; } /* drafting marks — registration corners, the scale note, and the grid. Both themes are blueprint-family now, so these are no longer gated to one palette; the grid colour flips with --grid. */ .bp-marks{position:absolute;inset:0;pointer-events:none;z-index:0;display:block} .bp-marks .corner{position:absolute;width:16px;height:16px;border-color:var(--line-strong);border-style:solid;border-width:0} .bp-marks .tl{left:20px;top:88px;border-top-width:2px;border-left-width:2px} .bp-marks .tr{right:20px;top:88px;border-top-width:2px;border-right-width:2px} .bp-marks .bl{left:20px;bottom:20px;border-bottom-width:2px;border-left-width:2px} .bp-marks .br{right:20px;bottom:20px;border-bottom-width:2px;border-right-width:2px} .bp-marks .scale-note{position:absolute;left:24px;bottom:28px;font-size:11px;letter-spacing:.14em;color:var(--slate-2)} /* the drafting grid — 24px pitch, per the drafting language */ .bp-marks::before{ content:"";position:absolute;inset:68px 0 0; background-image: linear-gradient(to right,var(--grid) 0 1px,transparent 1px), linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(72% 62% at 50% 34%,#000,transparent 78%); } /* beat narration — masked up, holds, masked down on the next beat. Hidden by default: all three sit in the same place, so without this they stack into illegible overlapping text before JS schedules them. */ .beat-label{ position:absolute;left:28px;top:104px;z-index:2;max-width:460px; font-family:var(--mono);opacity:0; } /* no JS: the sequence never runs, so show the last beat and drop the unpositioned tile clones rather than 10 copies stacked on the master */ html:not(.js) .beat-label[data-beat="3"]{opacity:1} html:not(.js) .hero-svg #hero-spine{opacity:.3} html:not(.js) .hero-svg #spine-risers{display:none} html:not(.js) .hero-svg #hero-tiles{display:none} .beat-label .bl-k{ display:block;font-size:13px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-ink); } .beat-label .bl-s{ display:block;margin-top:10px;font-family:var(--body); font-size:19px;color:var(--slate); } /* the counter, 01 → 10 */ .counter{ position:absolute;right:28px;top:110px;z-index:2; font-size:22px;font-weight:600;color:var(--slate-2);letter-spacing:.04em; } /* the payoff — hidden only when JS pins the hero; the reveal mask is applied at init by hero.js. No-JS readers see it immediately. */ .hero-copy{ position:absolute;left:50%;bottom:4%;transform:translateX(-50%); z-index:3;width:min(92vw,1080px);text-align:center; } .hero-copy h1{font-size:40px;line-height:1.08;letter-spacing:-0.03em;margin:0 auto;max-width:940px} .hero-copy h1 .hl{background:var(--gold);color:var(--on-gold);padding:0 6px;font-family:var(--mono);font-weight:600;letter-spacing:-0.01em} .hero-copy .sub{margin:18px auto 0;font-size:18px;color:var(--slate);max-width:620px} .hero-copy .cta{display:flex;gap:14px;margin-top:26px;align-items:center;justify-content:center;flex-wrap:wrap} .hero-copy .scale{margin:26px auto 0;max-width:420px} .hero-copy .eyebrow{justify-content:center;margin-bottom:16px} .hero-copy .scale-bar{position:relative;height:16px} .hero-copy .scale-bar::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line-strong)} .hero-copy .scale-bar .fill{position:absolute;left:0;top:7px;height:2px;width:100%;background:var(--gold)} .hero-copy .scale-bar .marker{position:absolute;right:0;top:2px;width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 5px var(--gold-glow)} .hero-copy .scale-bar::after{content:"";position:absolute;left:0;right:0;top:2px;height:12px;background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px calc(100%/9));opacity:.55} .hero-copy .scale-labels{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-family:var(--mono)} .hero-copy .scale-labels span{font-size:13px;color:var(--slate-2)} .hero-copy .scale-labels .scale-cap{font-size:12px;letter-spacing:.06em} /* the theme toggle in the header */ .theme-toggle{ font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; color:var(--slate);background:transparent;border:1px solid var(--line-strong); padding:7px 12px;border-radius:2px;cursor:pointer;white-space:nowrap;min-height:32px; } .theme-toggle:hover{color:var(--ink);border-color:var(--ink)} /* the language toggle in the header */ .lang-toggle{ font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; color:var(--slate);background:transparent;border:1px solid var(--line-strong); padding:7px 12px;border-radius:2px;cursor:pointer;white-space:nowrap;min-height:32px; } .lang-toggle:hover{color:var(--ink);border-color:var(--ink)} /* reduced motion — hero.js composes the Beat-4 end frame with no motion. There is no pin, so the stage sits below the 68px sticky header instead of at the viewport top; take that height back or the copy runs past the fold and the reader loses the CTA they were meant to arrive at. */ @media(prefers-reduced-motion:reduce){ .hero-stage{height:calc(100svh - 68px);padding-top:12px} } /* mobile — no pin. The SVG sits at the top, the payoff below it. */ @media(max-width:767px){ .hero-track{height:auto} /* no pin, so the stage is an ordinary block: the sequence on top, the payoff under it. Both bands need real air — on a 390px screen the desktop's tight rhythm reads as cramped, not as precision. */ .hero-stage{position:relative;height:auto;padding:46px 0 0;display:block} .hero-svg{width:94vw;max-width:none;margin:0 auto;display:block} .beat-glow{inset:0 0 40%;opacity:.4} .bp-marks{display:none!important} .beat-label{left:20px;top:12px;max-width:calc(100vw - 104px)} .beat-label .bl-s{display:none} .counter{right:20px;top:12px} /* 92px tail so the hero lets go of the reader before the thesis starts, on top of the section's own 60px top padding */ .hero-copy{position:relative;left:auto;bottom:auto;transform:none;margin:52px auto 0;text-align:left;padding:0 20px 92px;clip-path:none} .hero-copy .eyebrow{justify-content:flex-start} .hero-copy h1{font-size:33px} .hero-copy .sub{font-size:17px;margin-top:20px} .hero-copy .cta{justify-content:flex-start;margin-top:30px} .hero-copy .scale{margin:36px 0 0} }