/* * Redesign 2026-09 design system. Loaded after css/style.css on every page. * Source of truth: ~/Documents/JARVIS/.../redesign-2026-09/frameless-glass-redesign.html * * This file is additive: it introduces the concept's own token names and * component classes (header.nav, footer, .hero, .lay, .fit, etc.) rather * than overloading style.css's existing --blue/--charcoal system, so pages * not yet migrated to the new markup keep rendering correctly from * style.css until they're rebuilt. Where a selector legitimately needs to * beat an old rule of equal specificity (e.g. header.nav vs old .nav), the * more specific selector is used deliberately so cascade order can't bite. */ :root{ --ground:#F1F3F1; --paper:#FFFFFF; --ink:#131716; --ink-2:#46504D; --ink-3:#5C6663; /* darkened from the concept's #6F7976: that value only cleared 4.03:1 against --ground and 4.49:1 against --paper, both under WCAG AA's 4.5:1 for normal text (Lighthouse a11y flagged it). This clears 5.3:1 / 5.9:1 and reads the same muted tertiary grey-green at a glance. */ --line:#D6DCD8; --line-2:#E5E9E6; --sage:#4F6A5B; --sage-2:#7D9A8B; --sage-soft:#E2EAE5; --glass-edge:#8FB5A5; --brass:#A47B3A; --dark:#101413; --dark-2:#1B211F; --on-dark:#EEF2EF; --on-dark-2:#A9B5B0; --display:"Instrument Sans", "Helvetica Neue", Arial, sans-serif; --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif; --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --wrap:1240px; --gutter:clamp(16px, 4vw, 48px); --v2-radius:6px; } .v2 *{box-sizing:border-box} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} /* wrappers (WebP + JPG fallback) must not change layout: the keeps behaving as a direct child of its figure/card. */ .v2 picture{display:contents} .mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase} .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} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);display:flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:28px;height:1px;background:currentColor} .serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-0.01em} body.v2{background:var(--ground);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} /* * style.css's h1,h2,h3,h4{font-family:var(--font-display)...} and * a{color:var(--blue)} target elements directly (low specificity, but a * direct rule always beats inheritance from body.v2). .v2 h1/.v2 h2/.v2 h3 * and .v2 a re-target those same elements at higher specificity (class + * element) so every heading and link inside the redesigned markup picks up * the new type system instead of silently staying on Outfit/blue. Per- * component rules below (.lay h3, .check a, footer.v2foot a, etc.) layer * on top for the properties that differ per component. */ .v2 h1,.v2 h2,.v2 h3{margin:0;font-weight:600;letter-spacing:-0.025em;font-family:var(--display);color:var(--ink)} .v2 a:not(.btn){color:inherit;text-decoration:none} /* :not(.btn) matters: pages reskinned via token override only (blog index, about, faq, shower-screens) still use style.css's OLD .btn-outline/ .btn-primary markup on tags (e.g. the cta-band buttons), which sets its own explicit white/dark text on purpose. An earlier version of this rule with no :not() beat those by specificity and made cta-band buttons render dark-on-dark -- caught by Lighthouse's color-contrast audit on the blog index (3.05:1, needed 4.5:1). Buttons keep managing their own color; this rule only stops plain links from picking up stray blue. */ .v2 :focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px} /* --------------------------------------------------------------- Buttons --------------------------------------------------------------- */ .v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 15px/1 var(--display);text-decoration:none;padding:15px 22px;border-radius:40px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .2s, border-color .2s;white-space:nowrap} .v2 .btn:active{transform:translateY(1px)} .v2 .btn-primary{background:var(--ink);color:var(--paper)} .v2 .btn-primary:hover{background:#26302D;color:var(--paper)} .v2 .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent} .v2 .btn-ghost:hover{background:var(--ink);color:var(--paper)} .v2 .btn-sm{padding:11px 16px;font-size:14px} .v2 .btn .arr{transition:transform .2s;display:inline-block} .v2 .btn:hover .arr{transform:translateX(3px)} /* --------------------------------------------------------------- Nav (header.nav beats old .nav on specificity regardless of load order) --------------------------------------------------------------- */ header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:color-mix(in srgb, var(--ground) 86%, transparent);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line-2)} header.nav .wrap{display:flex;align-items:center;gap:24px;height:68px;position:relative} header.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:600;letter-spacing:-0.02em;font-size:17px;white-space:nowrap} header.nav .brand svg{flex:none;color:var(--ink)} header.nav .brand small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:1px} header.nav .links{display:flex;gap:26px;margin-left:auto;font-size:15px} header.nav .links a{text-decoration:none;color:var(--ink-2)} header.nav .links a:hover,header.nav .links a[aria-current="page"]{color:var(--ink)} header.nav .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:4px} header.nav .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s, opacity .2s} header.nav .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} header.nav .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} header.nav .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:1080px){ header.nav .wrap{gap:14px} header.nav .links{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;background:var(--ground); border-bottom:1px solid var(--line-2);box-shadow:0 16px 32px -16px rgba(19,23,22,.3); padding:4px var(--gutter) 14px; } header.nav .links.open{display:flex} header.nav .links a{padding:13px 0;border-top:1px solid var(--line-2);font-size:16px} header.nav .links a:first-child{border-top:0} header.nav .nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center} } @media (max-width:640px){ header.nav .btn{display:none} } /* --------------------------------------------------------------- Footer (bare