/* ============================================================================ RIDGEWAY AI — core design system (site v3, "The Ridge Engine") Contract: Projects/Ridgeway/design/site-v3-2026-07-13/DESIGN-DIRECTION.md §2 + §3.6 Obsidian / bone / bronze-gold. IBM Plex only. Radius 0 (exceptions: status-dot circles + ± accordion circles at 50%, logo/marquee pills 2px via --radius-pill). Mobile-first. Every token pair used for text is AA on its surface — see the contrast ledger comments inline. Page-specific component CSS belongs in components.css, NOT here. TOC: 01 fonts 02 tokens 03 reset + base type 04 layout + rhythm 05 surfaces 06 eyebrows + ghost-ink 07 buttons 08 cards 09 tables 10 FAQ sticky rail 11 forms 12 chips + terminal chrome 13 stats/count-up 14 reveal states 15 nav 16 footer 17 a11y 18 print ============================================================================ */ /* ---- 01 · fonts (IBM Plex v6.4.2, self-hosted, OFL) ---------------------- */ @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans/IBMPlexSans-Light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans/IBMPlexSans-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap} /* ---- 02 · tokens (contract §2 — exact, no deviation) ---------------------- */ :root{ /* Obsidian (dark surfaces — hero, alternating bands, footer) */ --obsidian-0:#0b0d10; --obsidian-1:#10141a; --obsidian-2:#151a22; --obsidian-3:#1b222c; --line-dark:#242c38; --line-dark-soft:#1c232e; /* Bone (light surfaces) */ --bone-0:#f7f4ec; --bone-1:#efe9dc; --bone-2:#e4dac9; --paper:#fffdf8; --line-light:#d6ccbb; /* Ink */ --ink:#101216; --ink-soft:#3a404c; --muted:#606775; --muted-dark:#9aa3b2; /* on dark */ /* Accent — bronze on light, gold on dark (07-12 brand ruling) */ --bronze:#8F5E32; --bronze-hover:#734823; --gold:#c9955d; --gold-bright:#e3b57e; --gold-text-light:#85572e; /* AA on bone */ /* Status */ --live:#2ea36b; --live-dark:#39c27f; /* status dots, terminal ok lines */ --warn:#b42318; /* Type */ --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; /* Layout */ --max:1248px; --gut:clamp(20px,5vw,56px); --nav-h:72px; --radius-pill:2px; /* the ONLY non-zero radius besides 50% dots/± circles */ --ease:cubic-bezier(.2,.7,.3,1); } /* Contrast ledger (AA-verified pairs — keep honest when adding styles): #606775 muted on #f7f4ec/#fffdf8/#efe9dc = 4.7:1+ OK (NOT on bone-2 — use ink-soft there) #3a404c ink-soft on all bone surfaces = 8.9:1+ OK #9aa3b2 muted-dark on #0b0d10/#10141a/#151a22 = 7.3:1+ OK #c9955d gold on #0b0d10/#10141a = 7.2:1+ OK (12px mono eyebrows fine) #8F5E32 bronze text on #f7f4ec = 5.0:1 OK #85572e gold-text on #f7f4ec/#fffdf8 = 5.8:1+ OK #ffffff on #8F5E32 (btn-primary) = 5.5:1 OK #0b0d10 on #c9955d (btn-gold) = 7.2:1 OK #2ea36b live on light = 2.9:1 — dots/icons ONLY, never text. #39c27f live-dark on #0b0d10 = 8.2:1 OK for terminal ok-lines. */ /* ---- 03 · reset + base type ----------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0;font-family:var(--sans);font-size:17px;line-height:1.65; background:var(--bone-0);color:var(--ink); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* light-context vars (flipped by .dark / .term / .site-footer below) */ --tx:var(--ink);--tx-soft:var(--ink-soft);--tx-muted:var(--muted); --rule:var(--line-light);--rule-soft:#e0d8c8; --accent-text:var(--bronze); --card-bg:var(--paper);--table-head-bg:var(--bone-1); --num:var(--ink);--ghost:rgba(16,18,22,.48); } h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0} ul.list,ol.list{padding-left:22px} ul.list li,ol.list li{margin:8px 0;color:var(--tx-soft)} img,svg,video,canvas{max-width:100%;display:block} img{height:auto} button,input,textarea,select{font:inherit;border-radius:0} a{color:inherit;text-decoration:none} p a,li a,.link{color:var(--accent-text);border-bottom:1px solid currentColor;transition:color .18s} p a:hover,li a:hover,.link:hover{color:var(--tx)} main p a:not(.btn):visited,main li a:not(.btn):visited,main a.link:not(.btn):visited{color:var(--tx-soft)} hr{border:0;height:1px;background:var(--rule);margin:0} ::selection{background:var(--bronze);color:#fff} h1,h2,h3{color:var(--tx);letter-spacing:-.04em} h1,.display{font-size:clamp(44px,7vw,96px);font-weight:300;line-height:1.02;letter-spacing:-.045em} h2{font-size:clamp(30px,4vw,52px);font-weight:300;line-height:1.06;letter-spacing:-.035em} h3{font-size:24px;font-weight:500;line-height:1.28;letter-spacing:-.02em} .lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--tx-soft);max-width:760px;letter-spacing:-.015em} .small,small{font-size:14.5px;line-height:1.6} .muted{color:var(--tx-muted)} .mono{font-family:var(--mono)} .micro{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-muted)} /* ---- 04 · layout + section rhythm ----------------------------------------- */ .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:72px} @media(min-width:900px){.section{padding-block:112px}} .section--flush{padding-block:0} .sec-head{display:grid;gap:18px;margin-bottom:44px;align-items:end} .sec-head>*{min-width:0} .sec-head>.chip{justify-self:start;max-width:100%;white-space:normal;line-height:1.45;overflow-wrap:anywhere} .sec-head .lede{margin-top:4px} @media(min-width:900px){ .sec-head--split{grid-template-columns:minmax(300px,.9fr) 1.1fr;gap:clamp(28px,5vw,72px)} .sec-head--split .lede{justify-self:end;margin-top:0} } .grid-2,.grid-3,.grid-4{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr}} @media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr;gap:22px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} } .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .rule{height:1px;background:var(--rule);border:0} /* ---- 05 · surfaces (dark/light section alternation) ------------------------ */ .dark,.term,.site-footer{ --tx:var(--bone-0);--tx-soft:#c7cdd8;--tx-muted:var(--muted-dark); --rule:var(--line-dark);--rule-soft:var(--line-dark-soft); --accent-text:var(--gold); --card-bg:var(--obsidian-2);--table-head-bg:var(--obsidian-2); --num:var(--gold);--ghost:rgba(247,244,236,.35); color:var(--tx); } /* #c7cdd8 tx-soft on #0b0d10 = 12.4:1 OK */ .dark{background:var(--obsidian-0)} .dark--raise{background:var(--obsidian-1)} .bone{background:var(--bone-0)} .bone--2{background:var(--bone-1)} .paper{background:var(--paper)} /* light island inside a dark band (e.g. bone chips in the engine graph) */ .light{ --tx:var(--ink);--tx-soft:var(--ink-soft);--tx-muted:var(--muted); --rule:var(--line-light);--rule-soft:#e0d8c8; --accent-text:var(--bronze); --card-bg:var(--paper);--table-head-bg:var(--bone-1); --num:var(--ink);--ghost:rgba(16,18,22,.48); background:var(--bone-0);color:var(--tx); } /* ---- 06 · eyebrows + ghost-ink interstitials (contract §3.6) ---------------- */ /* Numbered mono eyebrow: `01 / WHAT WE DO`, flanked by 26px hairline bars. Gold on dark, bronze on light — via --accent-text. */ .eyebrow{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mono);font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text); } .eyebrow::before,.eyebrow::after{content:"";flex:0 0 auto;width:26px;height:1px;background:var(--accent-text)} .eyebrow--bare::before,.eyebrow--bare::after{display:none} /* Ghost-ink statement: one bold paragraph at 20% ink opacity, 2-3 .solid phrases and ONE .gold gradient phrase per contract. */ .ghost-ink{ font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.3; letter-spacing:-.025em;color:var(--ghost);max-width:1020px; } .ghost-ink .solid{color:var(--tx)} .grad-gold,.ghost-ink .gold{ background-image:linear-gradient(100deg,var(--bronze) 0%,var(--gold) 55%,var(--gold-bright) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .dark .grad-gold,.dark .ghost-ink .gold{ background-image:linear-gradient(100deg,var(--gold) 0%,var(--gold-bright) 100%); } /* Hero mono check line: `✓ You own your data. Always.` (glyph, not emoji) */ .check-row{display:flex;flex-wrap:wrap;gap:10px 26px} .check{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--tx-muted);display:inline-flex;align-items:baseline;gap:9px} .check::before{content:"✓";color:var(--accent-text);font-weight:600} /* ---- 07 · buttons (primary bronze / ghost / on-dark gold) ------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:0; font-family:var(--sans);font-size:15.5px;font-weight:500;line-height:1; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background-color .18s,border-color .18s,color .18s,transform .18s; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--bronze);border-color:var(--bronze);color:#fff} .btn-primary:hover{background:var(--bronze-hover);border-color:var(--bronze-hover)} .btn-ghost{background:transparent;border-color:rgba(16,18,22,.35);color:var(--tx)} .btn-ghost:hover{border-color:var(--ink)} .dark .btn-ghost,.term .btn-ghost,.site-footer .btn-ghost{border-color:rgba(247,244,236,.30);color:var(--bone-0)} .dark .btn-ghost:hover,.term .btn-ghost:hover,.site-footer .btn-ghost:hover{border-color:rgba(247,244,236,.72)} .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--obsidian-0)} .btn-gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)} .btn-lg{min-height:54px;padding:16px 30px;font-size:16.5px} .btn-sm{min-height:44px;padding:10px 16px;font-size:14px} .btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none} /* ---- 08 · cards -------------------------------------------------------------- */ .card{ background:var(--card-bg);border:1px solid var(--rule); padding:clamp(22px,3vw,32px);min-height:100%; transition:border-color .2s,transform .2s; } a.card{display:block} a.card:hover,.card--hover:hover{border-color:var(--accent-text);transform:translateY(-3px)} .card-kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text-light)} .dark .card-kicker,.term .card-kicker{color:var(--gold)} .card h3{margin-top:14px} .card p{margin-top:10px;color:var(--tx-muted)} .card-list{margin:18px 0 0;padding:0;list-style:none} .card-list li{border-top:1px solid var(--rule);padding:11px 0;color:var(--tx-muted);font-size:15.5px} /* Inverted emphasis card on a bone band — add class="card dark" in markup and the surface vars flip; `Most clients land here` tag via .card-flag. */ .card-flag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--obsidian-0);background:var(--gold);padding:5px 9px;margin-bottom:16px} /* ---- 09 · comparison / mapping tables ---------------------------------------- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule)} .compare{width:100%;min-width:620px;border-collapse:collapse;background:var(--card-bg);font-size:15.5px} .compare caption{text-align:left;padding:14px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-muted);border-bottom:1px solid var(--rule)} .compare th{ font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--tx-muted);text-align:left; padding:14px 18px;background:var(--table-head-bg);border-bottom:1px solid var(--rule); } .compare td{padding:16px 18px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--tx-soft)} .compare th+th,.compare td+td{border-left:1px solid var(--rule)} .compare tr:last-child td{border-bottom:0} .compare td b,.compare td strong{color:var(--tx);font-weight:500} .compare .col-hl{background:var(--table-head-bg)} /* ---- 10 · FAQ — sticky rail + details accordion ------------------------------- */ .faq-layout{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr} @media(min-width:960px){ .faq-layout{grid-template-columns:minmax(260px,.72fr) 1.28fr;align-items:start} .faq-rail{position:sticky;top:calc(var(--nav-h) + 32px)} } .faq-rail h2{margin-top:16px} .rail-card{margin-top:26px;border:1px solid var(--rule);background:var(--card-bg);padding:22px} .rail-card p{color:var(--tx-muted);font-size:15px} .rail-card .link{display:inline-block;margin-top:12px;font-weight:500} .acc{border-top:1px solid var(--rule)} .acc:last-of-type{border-bottom:1px solid var(--rule)} .acc summary{ list-style:none;cursor:pointer;display:flex;justify-content:space-between; align-items:center;gap:18px;padding:22px 0; font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--tx); } .acc summary::-webkit-details-marker{display:none} .acc summary:hover .pm{border-color:var(--accent-text)} /* animated ± circle (50% radius sanctioned — contract §3.6) */ .pm{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--rule);border-radius:50%;/* exception: accordion status control */position:relative;transition:border-color .25s,transform .35s var(--ease)} .pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent-text);transition:transform .35s var(--ease),opacity .25s} .pm::before{width:12px;height:2px;transform:translate(-50%,-50%)} .pm::after{width:2px;height:12px;transform:translate(-50%,-50%)} .acc[open] .pm{border-color:var(--accent-text);transform:rotate(180deg)} .acc[open] .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .acc-body{padding:0 46px 24px 0;color:var(--tx-muted);max-width:780px} .acc-body p+p{margin-top:12px} /* smooth open where the platform supports it (progressive; content stays in DOM) */ @supports (interpolate-size:allow-keywords){ .acc{interpolate-size:allow-keywords} .acc::details-content{block-size:0;overflow-y:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete} .acc[open]::details-content{block-size:auto} } /* ---- 11 · forms ----------------------------------------------------------------- */ .field{display:grid;gap:8px} .field label{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-muted)} .field input,.field textarea,.field select{ width:100%;min-height:48px;padding:12px 14px; border:1px solid var(--rule);border-radius:0;background:var(--card-bg);color:var(--tx); transition:border-color .18s,background-color .18s; } .field textarea{min-height:130px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent-text);outline-offset:-1px;border-color:var(--accent-text)} .field input::placeholder,.field textarea::placeholder{color:var(--tx-muted)} .field-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:640px){.field-grid{grid-template-columns:1fr 1fr}} .form-note{font-size:14.5px;color:var(--tx-muted)} .hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot */ .form-msg{display:none;padding:12px 14px;font-size:14.5px;border:1px solid transparent} .form-msg.show{display:block} .form-msg.ok{background:rgba(46,163,107,.12);border-color:rgba(46,163,107,.4);color:#1d6f47} .form-msg.err{background:rgba(180,35,24,.10);border-color:rgba(180,35,24,.35);color:var(--warn)} .dark .form-msg.ok,.term .form-msg.ok{color:var(--live-dark)} .dark .form-msg.err,.term .form-msg.err{color:#e07a6e} /* ---- 12 · chips + terminal chrome ------------------------------------------------ */ .chip{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--rule);padding:5px 10px; font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--tx-muted);white-space:nowrap; } .chip-row{display:flex;flex-wrap:wrap;gap:8px} .chip--gold{border-color:var(--accent-text);color:var(--accent-text)} .chip .dot{width:7px;height:7px;border-radius:50%;/* exception: status dot */background:var(--live);position:relative;flex:0 0 auto} .dark .chip .dot,.term .chip .dot{background:var(--live-dark)} .chip .dot::after{ content:"";position:absolute;inset:-1px;border-radius:50%;/* exception: status-dot ping */ border:1px solid var(--live);opacity:0; animation:rw-ping 1.9s cubic-bezier(0,0,.2,1) infinite; } .dark .chip .dot::after,.term .chip .dot::after{border-color:var(--live-dark)} @keyframes rw-ping{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(2.6);opacity:0}} /* Terminal-chrome panel frame: title bar, three dots, status chip. Used by the hero engine, operator console, and any `demo loop`-branded module. */ .term{background:var(--obsidian-1);border:1px solid var(--line-dark);position:relative} .term-bar{ display:flex;align-items:center;gap:14px;padding:11px 16px; border-bottom:1px solid var(--line-dark-soft); font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-dark); } .term-dots{display:inline-flex;gap:6px;flex:0 0 auto} .term-dots i{width:9px;height:9px;border-radius:50%;/* exception: terminal status dots */background:var(--obsidian-3);border:1px solid var(--line-dark)} .term-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .term-bar .chip{border-color:var(--line-dark)} .term-body{padding:clamp(16px,3vw,26px)} .term-body.mono,.term-log{font-family:var(--mono);font-size:13.5px;line-height:1.75} .term-ok{color:var(--live-dark)} .term-tool{color:var(--gold)} .term-dim{color:var(--muted-dark)} /* ---- 13 · stats / count-up numbers ------------------------------------------------ */ .stat-grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:1fr 1fr} @media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--card-bg);padding:clamp(22px,3vw,34px)} .dark .stat{background:var(--obsidian-1)} .stat-num{ font-weight:300;font-size:clamp(44px,6vw,72px);line-height:1; letter-spacing:-.04em;color:var(--num);font-variant-numeric:tabular-nums; } .stat-num sub,.stat-num sup{font-size:.38em;font-weight:400;letter-spacing:0;color:var(--tx-muted);vertical-align:baseline} .stat-label{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-muted)} .stat-foot{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tx-muted)} /* ---- 14 · scroll-reveal base states (contract §3.6; gated under html.js) ---------- */ html.js [data-reveal]{ opacity:0;transform:translateY(24px); transition:opacity .65s var(--ease),transform .65s var(--ease); } html.js [data-reveal].in{opacity:1;transform:translateY(0)} /* ---- 15 · nav (sticky obsidian, blur; megadropdowns; mobile overlay) ---------------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:300} .skip-link:focus{ left:16px;top:12px;background:var(--ink);color:#fff; padding:12px 18px;font-weight:500;outline:2px solid var(--gold);outline-offset:2px; } .site-nav{ position:sticky;top:0;z-index:100; border-bottom:1px solid transparent;transition:border-color .25s; } /* blur lives on a pseudo-element: backdrop-filter on .site-nav itself would turn it into the containing block for the fixed full-screen overlay child */ .site-nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(11,13,16,.86); -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%); } .site-nav.scrolled{border-bottom-color:var(--line-dark-soft)} .nav-bar{position:relative;z-index:2;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:inline-flex;align-items:center;gap:12px;min-height:50px;flex:0 0 auto} .brand-pixel{ display:block;width:84px;height:49px;color:var(--bone-0);--pixel:#030405; flex:0 0 auto;opacity:1;visibility:visible;transform-origin:50% 50%; backface-visibility:hidden; animation:rw-brand-land 1.85s cubic-bezier(.16,1,.3,1) both; } .brand-pixel__field{opacity:1;visibility:visible} .brand-pixel__dot{ opacity:1;visibility:visible;transform-box:fill-box;transform-origin:center; animation:rw-brand-dot-in .24s cubic-bezier(.2,.9,.25,1.2) calc(1.88s + var(--pd,0ms)) both; } .brand-word{display:block;font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--bone-0);white-space:nowrap;opacity:1;visibility:visible} .brand-word b{color:var(--gold);font-weight:600} /* The bone tile lands like a piece of old hardware, but the restrained easing and shadowless settling keep it contemporary. The chunky, near-black RW then resolves top-left to bottom-right and completes just after 3s. */ @keyframes rw-brand-land{ 0%{transform:translate3d(0,-30px,0) rotate(-420deg) scale(.74)} 42%{transform:translate3d(0,5px,0) rotate(-148deg) scale(.955)} 65%{transform:translate3d(0,-6px,0) rotate(-32deg) scale(1.018)} 79%{transform:translate3d(0,1.5px,0) rotate(4deg) scale(.995)} 90%{transform:translate3d(0,-1px,0) rotate(-1.25deg) scale(1.003)} 100%{transform:translate3d(0,0,0) rotate(0) scale(1)} } @keyframes rw-brand-dot-in{ 0%{opacity:0;transform:scale(.25)} 62%{opacity:1;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)} } .nav-desktop{display:none} .nav-cta{display:flex;align-items:center;gap:14px} .nav-cta .btn{display:none} /* Bilingual utility control: quiet hardware chrome, with the selected language carried by both pressed state and a runtime-friendly data state. */ .language-toggle{display:inline-flex;align-items:stretch;flex:0 0 auto;background:var(--obsidian-1)} .language-toggle__option{ position:relative;min-width:44px;min-height:44px;padding:0 6px; border:1px solid var(--line-dark);background:transparent;color:var(--muted-dark); font-family:var(--mono);font-size:10px;font-weight:600;line-height:1; letter-spacing:.06em;white-space:nowrap;cursor:pointer; transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s; } .language-toggle__option+.language-toggle__option{margin-left:-1px} .language-toggle__option:hover{background:var(--obsidian-2);color:var(--bone-0)} .language-toggle__option[aria-pressed="true"], .language-toggle__option[data-state="active"]{ z-index:1;background:rgba(201,149,93,.13);border-color:var(--gold); color:var(--gold-bright);box-shadow:inset 0 -2px var(--gold); } .language-toggle__option:focus-visible{ z-index:2;outline:2px solid var(--gold-bright);outline-offset:2px; } @media(max-width:639px){ .nav-bar{gap:10px} .nav-cta{gap:6px} .brand-word{display:none} } /* burger (mobile) */ .nav-burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer; } .nav-burger span{display:block;width:22px;height:2px;background:var(--bone-0);transition:transform .3s var(--ease),opacity .2s} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile full-screen overlay */ .nav-overlay{ position:fixed;inset:0;z-index:1;background:var(--obsidian-0); overflow-y:auto;overscroll-behavior:contain; padding:calc(var(--nav-h) + 24px) var(--gut) 48px; } .nav-overlay[hidden]{display:none} html.nav-open,html.nav-open body{overflow:hidden} .ov-group{border-top:1px solid var(--line-dark-soft);padding:18px 0 8px} .ov-group:first-child{border-top:0} .ov-label{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .ov-group a{display:block;padding:11px 0;font-size:18px;font-weight:400;color:var(--bone-0);letter-spacing:-.01em} .ov-group a:hover{color:var(--gold-bright)} .ov-group a span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted-dark);margin-top:2px;letter-spacing:.02em} .ov-cta{margin-top:26px} .ov-cta .btn{width:100%} /* desktop — the utility control joins the full menu once all three regions fit */ @media(min-width:1200px){ .nav-burger,.nav-overlay{display:none} .nav-desktop{display:block} .nav-cta .btn{display:inline-flex} .nav-menu{display:flex;align-items:center;gap:4px;list-style:none} .nav-item{position:relative} .nav-top{ position:relative;display:inline-flex;align-items:center;gap:6px; background:none;border:0;cursor:pointer;padding:10px 12px; font-family:var(--sans);font-size:14.5px;font-weight:500;color:#c7cdd8; letter-spacing:-.005em;transition:color .18s; } .nav-top:hover{color:var(--bone-0)} .nav-top .caret{transition:transform .25s var(--ease)} .has-drop:hover .nav-top .caret,.has-drop.open .nav-top .caret,.has-drop:focus-within .nav-top .caret{transform:rotate(180deg)} .nav-drop{ position:absolute;top:100%;left:-8px;min-width:340px;padding:10px; background:var(--obsidian-1);border:1px solid var(--line-dark); box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 44px rgba(201,149,93,.06); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s; } .nav-item:nth-last-child(-n+2) .nav-drop{left:auto;right:-8px} .has-drop:hover .nav-drop,.has-drop.open .nav-drop,.has-drop:focus-within .nav-drop{ opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s; } .nav-drop ul{list-style:none} .nav-drop a{display:block;padding:11px 14px;transition:background-color .15s} .nav-drop a:hover,.nav-drop a:focus-visible{background:rgba(201,149,93,.07)} .nav-drop a b{display:block;font-size:15px;font-weight:500;color:var(--bone-0);letter-spacing:-.01em} .nav-drop a:hover b{color:var(--gold-bright)} .nav-drop a span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted-dark);margin-top:3px;letter-spacing:.02em} /* active section marker — driven by data-active stamped by tools/stamp.py */ .site-nav[data-active="services"] .nav-item[data-nav="services"]>.nav-top, .site-nav[data-active="solutions"] .nav-item[data-nav="solutions"]>.nav-top, .site-nav[data-active="industries"] .nav-item[data-nav="industries"]>.nav-top, .site-nav[data-active="pricing"] .nav-item[data-nav="pricing"]>.nav-top, .site-nav[data-active="resources"] .nav-item[data-nav="resources"]>.nav-top, .site-nav[data-active="company"] .nav-item[data-nav="company"]>.nav-top{color:var(--bone-0)} .site-nav[data-active="services"] .nav-item[data-nav="services"]>.nav-top::after, .site-nav[data-active="solutions"] .nav-item[data-nav="solutions"]>.nav-top::after, .site-nav[data-active="industries"] .nav-item[data-nav="industries"]>.nav-top::after, .site-nav[data-active="pricing"] .nav-item[data-nav="pricing"]>.nav-top::after, .site-nav[data-active="resources"] .nav-item[data-nav="resources"]>.nav-top::after, .site-nav[data-active="company"] .nav-item[data-nav="company"]>.nav-top::after{ content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--gold); } } /* ---- 16 · footer (obsidian; 5 link columns + brand column + trust strip) ------------ */ .site-footer{background:var(--obsidian-0);border-top:1px solid var(--line-dark-soft)} .foot-grid{display:grid;gap:40px 24px;padding:clamp(56px,7vw,88px) 0 52px;grid-template-columns:1fr 1fr} @media(min-width:760px){.foot-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1080px){.foot-grid{grid-template-columns:1.9fr repeat(5,1fr)}} .foot-brand{grid-column:1/-1} @media(min-width:1080px){.foot-brand{grid-column:auto;padding-right:24px}} .foot-pixel{width:56px;height:32px;color:var(--bone-0);--pixel:var(--obsidian-0)} .foot-brand p{margin-top:18px;color:var(--muted-dark);font-size:15px;max-width:300px} .foot-contact{display:grid;gap:0;margin-top:16px} .foot-contact a{display:flex;align-items:center;min-height:38px;width:max-content;max-width:100%;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--bone-0);overflow-wrap:anywhere} .foot-contact a:hover{color:var(--gold)} .foot-brand .btn{margin-top:22px} .foot-col h2{font-family:var(--mono);font-size:11.5px;font-weight:600;line-height:1.65;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .foot-col ul{list-style:none} .foot-col a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:14.5px;color:var(--muted-dark);transition:color .15s} .foot-col a:hover{color:var(--bone-0)} .foot-trust{ border-top:1px solid var(--line-dark-soft);padding:24px 0 30px; display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline; } .foot-trust-strip{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--bone-0)} .foot-trust-strap{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted-dark)} /* ---- 17 · a11y ------------------------------------------------------------------------ */ :focus-visible{outline:2px solid var(--bronze);outline-offset:2px} .dark :focus-visible,.term :focus-visible,.site-nav :focus-visible,.site-footer :focus-visible,.nav-overlay :focus-visible{outline-color:var(--gold)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .brand-pixel,.brand-pixel__dot{animation:none!important;transform:none!important;opacity:1!important} html.js [data-reveal]{opacity:1;transform:none;transition:none} .btn:hover{transform:none} .chip .dot::after{animation:none;display:none} a.card:hover,.card--hover:hover{transform:none} } /* ---- 18 · print sanity ------------------------------------------------------------------ */ @media print{ .site-nav,.nav-overlay,.skip-link,.nav-burger{display:none!important} body,.dark,.dark--raise,.term,.site-footer,.card,.stat{background:#fff!important;color:#000!important} .dark *,.term *,.site-footer *{color:#000!important} html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} .chip .dot::after{display:none} h1,h2,h3{page-break-after:avoid} .card,.acc,.stat{page-break-inside:avoid} .foot-grid{display:none} .foot-trust{border-top:1px solid #000} }