/* ============================================================================ OFF GRID AUTHORITY — "AMERICANA FIELD MANUAL" design system (production) Forest-green chrome × solar-gold data × safety-orange action on warm sand paper. mil-spec datasheet × USGS topo sheet × letterpress field guide. Restraint is the luxury. Hairlines, not shadows. One bright moment per fold. Source of truth: brand-test/v1b (Americana Paper) — handoff 2026-06-05. Load LAST in so it wins over per-page inline styles. PALETTE FOREST GREEN #1F3D2E · SAND/PAPER #E8E0C7 · SOLAR GOLD #D4A63A SAFETY ORANGE #FF6A00 · OFF-BLACK #111111 AA NOTES gold is decorative ONLY (never body text on paper). orange-as-text uses --orange-ink #9E4200 (AA on all paper tints). orange fills (CTAs) carry OFF-BLACK text (white-on-orange fails AA). ========================================================================== */ :root{ --ink:#111111; --ink-2:#3D3A33; --ink-3:#6E6A5E; --paper:#EFE9D6; --paper-raised:#FBF8EF; --paper-sunk:#E8E0C7; --hairline:#CFC6A8; --hairline-strong:#B0A786; /* brand chrome */ --green:#1F3D2E; --green-deep:#16301F; --green-black:#0F1F15; --gold:#D4A63A; /* solar gold — DECORATIVE ONLY on paper */ --orange:#FF6A00; /* safety orange — fills/actions/accents */ --orange-ink:#9E4200; /* orange-as-text, AA-safe on warm paper */ /* data/accent role aliases (legacy amber names kept so every selector survives) */ --amber:#D4A63A; /* data/accent (gold), decorative fills */ --amber-ink:#9E4200; /* "amber as text" -> AA orange-ink */ --danger:#C0392B; --danger-ink:#B02D20; /* ink variant holds AA on tint */ --caution:#9E4200; --caution-ink:#8A3D00; --verified:#1F3D2E; /* brand green for stamps/verified links */ --ff-display:"Rajdhani",sans-serif; --ff-body:"IBM Plex Sans","Inter",system-ui,sans-serif; --ff-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace; --measure:68ch; --shadow-panel:0 1px 2px rgba(17,17,17,.05); } *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper) !important; color:var(--ink); font-family:var(--ff-body); font-size:17px; line-height:1.72; font-feature-settings:"cv05","cv08","ss01"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") !important; } /* ---------- type ---------- Display = Rajdhani, UPPERCASE, condensed-technical. Body = IBM Plex Sans. */ h1,h2,h3,h4{ line-height:1.12; letter-spacing:-.005em; } h1,h2,.t-display,.t-h1,.t-h2{ font-family:var(--ff-display); font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; line-height:1.05; } .t-display{ font-size:clamp(2.5rem,6vw,3.4rem); line-height:1.0; } .t-h1{ font-size:clamp(2rem,4.5vw,2.7rem); } .t-h2{ font-size:clamp(1.6rem,3.4vw,2.15rem); } .t-h3{ font-family:var(--ff-body); font-weight:600; font-size:1.662rem; letter-spacing:-.005em; text-transform:none; } .t-h4{ font-family:var(--ff-body); font-weight:600; font-size:1.331rem; text-transform:none; } .t-body-lg{ font-size:1.169rem; line-height:1.7; } .t-small{ font-size:.9375rem; color:var(--ink-2); } .lede{ font-size:1.169rem; line-height:1.7; color:var(--ink-2); max-width:62ch; } .measure{ max-width:var(--measure); } .mono{ font-family:var(--ff-mono); font-feature-settings:"tnum"; } .label{ font-family:var(--ff-mono); font-weight:500; font-size:.781rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); } .amber-ink{ color:var(--orange-ink); } .link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline-strong); padding-bottom:1px; transition:border-color .12s ease; } .link:hover{ border-color:var(--orange); } /* ---------- layout ---------- */ .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; } .rule{ height:1px; background:var(--hairline); border:0; margin:0; } .section{ padding:64px 0; } /* ---------- nav (DARK FOREST GREEN bar, sticky) ---------- Solid green chrome per the board. Cream text, gold/orange accents. Nav links carry inline Tailwind utilities (text-gray-300 hover:text-amber-400); we override them nav-scoped so they read cream-on-green, not dark-on-green. */ header.nav, .fm-nav{ position:sticky; top:0; z-index:40; background:var(--green) !important; background-color:rgba(31,61,46,.97) !important; backdrop-filter:saturate(1.05) blur(6px); border-bottom:2px solid var(--gold); box-shadow:0 1px 3px rgba(15,31,21,.28); } .nav-inner{ display:flex; align-items:center; gap:28px; height:60px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--paper-sunk) !important; } .brand img{ width:34px; height:34px; display:block; flex:0 0 auto; } .brand .mark{ font-family:var(--ff-display); font-weight:700; font-size:1.18rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; color:var(--paper-sunk) !important; } .brand .sub{ white-space:nowrap; font-family:var(--ff-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold) !important; } /* desktop link rows: target the real markup (nav-links class OR raw header nav) */ .nav-links{ display:flex; gap:4px; margin-left:auto; align-items:center; } header.nav nav[aria-label="Main navigation"]{ margin-left:auto; } .nav-links a, .nav-links button, header.nav nav[aria-label="Main navigation"] > a, header.nav nav[aria-label="Main navigation"] .nav-dd > button{ font-family:var(--ff-body); font-weight:500; font-size:.9rem; color:var(--paper-sunk) !important; background:none; text-decoration:none; } .nav-links a:hover, .nav-links button:hover, header.nav nav[aria-label="Main navigation"] > a:hover, header.nav nav[aria-label="Main navigation"] .nav-dd > button:hover{ color:var(--gold) !important; } .nav-cta{ font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; background:var(--orange) !important; color:#1a1a1a !important; font-weight:600; padding:9px 14px; border-radius:2px; white-space:nowrap; border:0; } .nav-cta:hover{ background:#E85F00 !important; color:#111 !important; } /* dropdown menus — dark green panels, cream links, gold hover, ORANGE top border */ .nav-dd{ position:relative; } .nav-dd > button{ font-family:var(--ff-body); font-weight:500; font-size:.9rem; color:var(--paper-sunk) !important; background:none; border:0; cursor:pointer; padding:8px 12px; } .nav-dd > button:hover{ color:var(--gold) !important; } .nav-dd .nav-menu{ display:none; position:absolute; top:100%; left:0; min-width:240px; background:var(--green-deep) !important; border:1px solid #0f261a; border-top:2px solid var(--orange); padding:.4rem 0; z-index:50; box-shadow:0 8px 22px rgba(15,31,21,.35); } .nav-dd:hover .nav-menu, .nav-dd:focus-within .nav-menu{ display:block; } .nav-dd .nav-menu a{ display:block; padding:.5rem 1rem; color:var(--paper-sunk) !important; font-size:.86rem; text-decoration:none; } .nav-dd .nav-menu a:hover{ background:#0f261a !important; color:var(--gold) !important; } .nav-dd > button.tools-btn{ font-family:var(--ff-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold) !important; font-weight:600; } .nav-dd > button.tools-btn:hover{ color:#E7C25A !important; } /* ---------- NAV FIT: keep the green bar to ONE line at every width ---------- Root cause of the wrapping header: multi-word dropdown labels wrapped to 2 lines (taller than the 60px bar -> carets spilled above/below). Force nowrap, tighten spacing, and drop the long sub-title before the row gets crowded. */ .nav-inner{ gap:18px; height:auto; min-height:60px; flex-wrap:nowrap; } header.nav nav[aria-label="Main navigation"]{ display:flex; align-items:center; flex-wrap:nowrap; } .nav-links a, .nav-links button, header.nav nav[aria-label="Main navigation"] > a, header.nav nav[aria-label="Main navigation"] .nav-dd > button, .nav-dd > button{ white-space:nowrap; } .nav-dd > button{ padding:8px 10px; line-height:1.1; } header.nav nav[aria-label="Main navigation"] > a{ padding:8px 10px; line-height:1.1; display:inline-flex; align-items:center; } @media (max-width:1320px){ .brand .sub{ display:none; } } /* free ~250px first */ @media (max-width:1180px){ header.nav nav[aria-label="Main navigation"] > a, header.nav nav[aria-label="Main navigation"] .nav-dd > button, .nav-dd > button{ font-size:.82rem; padding:8px 7px; } .nav-inner{ gap:12px; } .nav-cta{ padding:8px 11px; font-size:.7rem; letter-spacing:.06em; } .brand .mark{ font-size:1.05rem; } } /* Below ~1100px the 6-dropdown bar can't fit cleanly — use the hamburger early (markup switches at md/768 by default; raise it so the desktop bar is never crammed). */ @media (max-width:1099px){ header.nav nav[aria-label="Main navigation"]{ display:none !important; } header.nav #mobile-menu-btn{ display:inline-flex !important; align-items:center; } header.nav #mobile-menu:not(.hidden){ display:block !important; } /* toggled-open menu shows despite md:hidden */ } /* mobile menu chrome + hamburger button */ #mobile-menu-btn, header.nav button[aria-label="Toggle menu"]{ color:var(--paper-sunk) !important; } .mobile-nav, nav[aria-label="Mobile navigation"]{ background:var(--green-deep) !important; border-top:1px solid #0f261a !important; } .mobile-nav details summary, nav[aria-label="Mobile navigation"] details summary{ font-family:var(--ff-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--paper-sunk) !important; cursor:pointer; padding:.45rem 0; } .mobile-nav a, nav[aria-label="Mobile navigation"] a{ color:var(--paper-sunk) !important; } .mobile-nav a:hover, nav[aria-label="Mobile navigation"] a:hover{ color:var(--gold) !important; } /* ---------- registration corner crops ---------- */ .reg{ position:relative; } .reg::before,.reg::after, .reg>.reg-tr,.reg>.reg-br{ content:""; position:absolute; width:8px; height:8px; pointer-events:none; } .reg::before{ left:6px; top:6px; border-left:1px solid var(--hairline-strong); border-top:1px solid var(--hairline-strong); } .reg::after{ right:6px; bottom:6px; border-right:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); } .reg>.reg-tr{ right:6px; top:6px; border-right:1px solid var(--hairline-strong); border-top:1px solid var(--hairline-strong); } .reg>.reg-br{ left:6px; bottom:6px; border-left:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); } /* ---------- data-plate ---------- */ .plate{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:2px; padding:20px 20px 18px; box-shadow:none; } .plate .label{ display:block; margin-bottom:10px; } .plate .value{ font-family:var(--ff-mono); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.075rem); line-height:1; color:var(--ink); letter-spacing:-.01em; } .plate .unit{ font-family:var(--ff-mono); font-size:.95rem; color:var(--ink-3); margin-left:6px; } .plate .foot{ background:transparent; margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline); font-family:var(--ff-mono); font-size:.74rem; color:var(--ink-3); } .plate.hero-metric .value{ color:var(--orange-ink); } /* ---------- spec table (replaces zebra-stripe styled-table) ---------- */ .table-wrapper{ overflow-x:auto; margin:1.5rem 0; border-radius:2px; border:1px solid var(--hairline); background:var(--paper-raised); } .styled-table{ width:100%; border-collapse:collapse; background:var(--paper-raised); font-size:.95rem; min-width:600px; } .styled-table thead{ background:var(--paper-raised) !important; } .styled-table thead th{ position:sticky; top:60px; z-index:2; background:var(--paper-raised); font-family:var(--ff-mono); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3) !important; text-align:left; padding:12px 16px; border-bottom:1px solid var(--hairline-strong); box-shadow:0 1px 0 var(--hairline-strong); white-space:nowrap; } .styled-table td{ padding:14px 16px; border-bottom:1px solid var(--hairline); color:var(--ink); } .styled-table tbody tr{ background:var(--paper-raised) !important; } .styled-table tbody tr:nth-child(even){ background:var(--paper-raised) !important; } .styled-table tbody tr:last-child td{ border-bottom:0; } .styled-table tbody tr:hover{ background:var(--paper-raised) !important; } .styled-table tbody tr:hover td:first-child{ box-shadow:inset 2px 0 0 var(--orange); } .styled-table td.num,.styled-table th.num{ font-family:var(--ff-mono); font-feature-settings:"tnum"; text-align:right; } /* ---------- safety callout ---------- */ .safety-note{ border:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); border-left:4px solid var(--green); border-radius:0; padding:14px 18px; margin:1.5rem 0; background:color-mix(in srgb, var(--green) 6%, var(--paper)); color:var(--ink); } .safety-note.danger{ border-left-color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, var(--paper)); border-top:4px solid var(--danger); } .safety-note.caution{ border-left-color:var(--caution); background:color-mix(in srgb, var(--caution) 10%, var(--paper-sunk)); } .safety-note.caution strong{ color:var(--caution-ink); } .safety-note strong{ font-family:var(--ff-mono); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--danger-ink); } /* ---------- stamp + section numbers + figures ---------- */ .stamp-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink-3) !important; border:0 !important; border-bottom:1px solid var(--verified) !important; border-radius:0 !important; padding:0 0 3px 0 !important; text-transform:uppercase; background:transparent !important; } .stamp-chip::before{ content:"✓ "; color:var(--verified); } .sec-num{ font-family:var(--ff-mono); font-size:.85rem; color:var(--ink-3); } .fig-cap, figcaption{ font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); padding-top:10px; margin-top:14px; border-top:1px solid var(--hairline); } .fig-frame{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:2px; padding:22px 22px 14px; } /* ---------- buttons ---------- Primary action = SAFETY ORANGE fill, OFF-BLACK text (white-on-orange fails AA). */ .btn-amber, .cta-button, .affiliate-btn{ display:inline-block; font-family:var(--ff-mono) !important; font-weight:600 !important; font-size:.82rem !important; text-transform:uppercase; letter-spacing:.08em; background:var(--orange) !important; background-image:none !important; color:#1a1a1a !important; border:0; border-radius:2px !important; padding:13px 22px !important; cursor:pointer; transition:filter .12s ease, background-color .12s ease; text-decoration:none !important; box-shadow:none !important; transform:none !important; } .btn-amber:hover, .cta-button:hover, .affiliate-btn:hover{ filter:none; background:#E85F00 !important; color:#111 !important; transform:none !important; } .btn-ghost{ display:inline-block; font-family:var(--ff-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; background:transparent; color:var(--green); border:1px solid var(--hairline-strong); border-radius:2px; padding:11px 18px; cursor:pointer; transition:border-color .12s, color .12s; text-decoration:none; } .btn-ghost:hover{ border-color:var(--green); color:var(--green); } .cta-box .cta-inner{ background:var(--paper-raised) !important; background-image:none !important; border:1px solid var(--hairline); border-radius:2px; } .cta-box .cta-text{ color:var(--ink) !important; } /* ---------- internal links — brand green, hover orange ---------- */ .internal-link{ display:inline; color:var(--green) !important; font-weight:600; border-bottom:1px solid var(--green) !important; padding-bottom:1px; text-decoration:none !important; } .internal-link:hover{ color:var(--orange-ink) !important; border-color:var(--orange) !important; } .article-content a{ color:var(--green); text-decoration:none; border-bottom:1px solid var(--hairline-strong); } .article-content a:hover{ color:var(--orange-ink); border-color:var(--orange); } /* ---------- article content harmony ---------- h2 carries the site-DNA GOLD underline (decorative border, AA-exempt). */ .article-content h2{ font-family:var(--ff-display); font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; border-bottom:2px solid var(--gold) !important; padding-bottom:.5rem; } .article-content h3, .article-content h4{ color:var(--ink); } .article-content p, .article-content li{ color:var(--ink-2); } .article-content strong{ color:var(--ink); } .article-content blockquote{ border-left:4px solid var(--gold); background:var(--paper-sunk); border-radius:0; } .article-content blockquote p{ color:var(--ink-2); } .article-content code{ background:var(--paper-sunk); color:var(--orange-ink); } .article-content pre{ background:var(--green-black); color:var(--paper-sunk); border-radius:2px; } /* ---------- TOC ---------- */ .toc{ background:var(--paper-raised); border:1px solid var(--hairline); border-left:4px solid var(--gold); border-radius:0 2px 2px 0; } .toc-title{ font-family:var(--ff-mono) !important; font-size:.78rem !important; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3) !important; font-weight:500 !important; } .toc li a{ color:var(--ink-2); } .toc li a:hover{ color:var(--orange-ink); } /* ---------- FAQ ---------- */ .faq-item{ border:1px solid var(--hairline); border-radius:2px; background:var(--paper-raised); } .faq-item[open]{ border-color:var(--hairline-strong); } .faq-question{ background:var(--paper-raised) !important; color:var(--ink) !important; font-weight:500; } .faq-question:hover{ background:var(--paper-sunk) !important; } .faq-question::after{ color:var(--orange-ink) !important; } .faq-answer{ background:var(--paper-raised) !important; } .faq-answer p{ color:var(--ink-2); } /* ---------- tool embed — ORANGE rail + orange CTA ---------- */ .tool-embed{ background:var(--paper-raised) !important; border:1px solid var(--hairline) !important; border-left:4px solid var(--orange) !important; border-radius:0 2px 2px 0 !important; } .tool-embed p{ color:var(--ink-2) !important; } .tool-embed p:first-child, .tool-embed .font-bold{ color:var(--ink) !important; } .tool-embed a.tool-cta{ display:inline-block; background:var(--orange) !important; color:#1a1a1a !important; font-family:var(--ff-mono); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:10px 18px; border-radius:2px; text-decoration:none; margin-top:.5rem; } .tool-embed a.tool-cta:hover{ background:#E85F00 !important; color:#111 !important; } /* ---------- author plate ---------- */ .author-plate{ background:var(--paper-raised) !important; border:1px solid var(--hairline) !important; border-radius:2px !important; font-size:.9rem; color:var(--ink-2) !important; } .author-plate strong{ color:var(--ink) !important; } .author-plate a{ color:var(--green); } .author-plate a:hover{ color:var(--orange-ink); } /* ---------- newsletter / forms ---------- */ .newsletter-section input[type="email"], input[type="email"], input[type="text"], textarea, select{ background:var(--paper-sunk) !important; border:1px solid var(--hairline) !important; border-radius:2px !important; color:var(--ink) !important; font-family:var(--ff-mono); } .newsletter-section input:focus, input:focus, textarea:focus, select:focus{ outline:none !important; border-color:var(--gold) !important; box-shadow:none !important; } .newsletter-section button[type="submit"], form button[type="submit"]{ font-family:var(--ff-mono) !important; font-size:.78rem !important; font-weight:600; text-transform:uppercase; letter-spacing:.08em; background:var(--orange) !important; color:#1a1a1a !important; border-radius:2px !important; box-shadow:none !important; } /* ---------- instrument panel (calculators) ---------- */ .panel{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:2px; box-shadow:var(--shadow-panel); display:grid; grid-template-columns:58% 42%; position:relative; } /* calculator's own header is a GREEN bar with cream label text (board "calculator UI header") */ .panel-head{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:var(--green); border-bottom:1px solid var(--green-deep); } .panel-head .label{ color:var(--paper-sunk) !important; } .panel-head .mono, .panel-head .model-ref{ color:#aeb8a8; } .controls{ padding:26px 24px 30px; border-right:1px solid var(--hairline); } .readout{ padding:26px 24px 30px; display:flex; flex-direction:column; } .field{ margin-bottom:20px; } .field > .label{ display:block; margin-bottom:8px; } .well{ display:flex; align-items:center; background:var(--paper-sunk); border:1px solid var(--hairline); border-radius:2px; padding:0 14px; height:48px; transition:border-color .12s ease; } .well:focus-within{ border-color:var(--gold); } .well.danger{ border-color:var(--danger); } .well input, .well select{ flex:1; border:0 !important; background:transparent !important; font-family:var(--ff-mono); font-size:1.05rem; color:var(--ink); outline:none; min-width:0; } .well .suffix{ font-family:var(--ff-mono); font-size:.86rem; color:var(--ink-3); white-space:nowrap; padding-left:8px; } .field-note{ font-family:var(--ff-mono); font-size:.72rem; color:var(--danger-ink); margin-top:6px; display:none; } .field.err .field-note{ display:block; } .seg{ display:inline-flex; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; } .seg button{ font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.04em; background:var(--paper-sunk); border:0; padding:11px 18px; cursor:pointer; color:var(--ink-2); border-right:1px solid var(--hairline); } .seg button:last-child{ border-right:0; } .seg button[aria-pressed="true"]{ background:var(--paper-raised); color:var(--ink); box-shadow:inset 0 -2px 0 var(--orange); } .toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.92rem; color:var(--ink-2); } .toggle input{ accent-color:var(--orange); width:16px; height:16px; } .actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .big-read{ display:flex; align-items:flex-end; gap:8px; } .big-read .v{ font-family:var(--ff-mono); font-weight:500; font-size:clamp(3rem,8vw,3.6rem); line-height:.92; color:var(--ink); letter-spacing:-.02em; } .big-read .v.muted{ color:var(--ink-3); } .big-read .v.breach{ color:var(--danger); } .big-read .u{ font-family:var(--ff-mono); font-size:1.1rem; color:var(--ink-2); padding-bottom:8px; } .status-line{ font-family:var(--ff-mono); font-size:.8rem; color:var(--ink-3); letter-spacing:.04em; margin-top:12px; text-transform:uppercase; } .verdict{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; padding:7px 12px; border-radius:2px; border:1px solid; margin-top:18px; width:fit-content; } .verdict.within{ color:var(--verified); border-color:var(--verified); background:color-mix(in srgb,var(--verified) 8%,#fff); } .verdict.undersized, .verdict.breach{ color:var(--danger); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,#fff); } .verdict .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; } .interp{ font-size:.95rem; color:var(--ink-2); line-height:1.55; margin-top:16px; max-width:42ch; } .sub-plates{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:2px; margin-top:auto; } .sub-plates .sp{ background:var(--paper-raised); padding:14px 14px; } .sub-plates .label{ display:block; margin-bottom:6px; font-size:.68rem; } .sub-plates .v{ font-family:var(--ff-mono); font-size:1.25rem; color:var(--ink); } .sub-plates .v .u{ font-size:.78rem; color:var(--ink-3); margin-left:3px; } .sub-plates .v.breach{ color:var(--danger); } .model-plate{ position:absolute; right:14px; bottom:10px; font-family:var(--ff-mono); font-size:.66rem; color:var(--ink-3); letter-spacing:.06em; } /* BOM */ .bom{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:2px; } .bom-head{ padding:16px 20px; border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:baseline; } .bom-row{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; padding:13px 20px; border-bottom:1px solid var(--hairline); align-items:baseline; } .bom-row:last-of-type{ border-bottom:0; } .bom-row .qty{ font-family:var(--ff-mono); font-size:.86rem; color:var(--ink-2); white-space:nowrap; } .bom-row .nm{ font-weight:500; font-size:.95rem; } .bom-row .sp{ font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-3); display:block; margin-top:2px; } .bom-row .pr{ font-family:var(--ff-mono); font-size:.92rem; text-align:right; white-space:nowrap; } .bom-row .src{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline-strong); } .bom-row .src:hover{ border-color:var(--orange); color:var(--orange-ink); } .bom-total{ display:grid; grid-template-columns:1fr auto; padding:15px 20px; border-top:1px solid var(--hairline-strong); } .bom-total .v{ font-family:var(--ff-mono); font-size:1.05rem; } /* ---------- instrument index cards ---------- */ .inst-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:2px; } .inst{ background:var(--paper-raised); padding:22px 20px 20px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; min-height:170px; transition:background .12s; } .inst:hover{ background:#fff; } .inst:hover .go{ color:var(--orange-ink); } .inst .ref{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.06em; } .inst .name{ font-family:var(--ff-display); font-weight:700; font-size:1.42rem; text-transform:uppercase; letter-spacing:.01em; margin-top:auto; color:var(--green); } .inst .desc{ font-size:.88rem; color:var(--ink-2); margin-top:6px; line-height:1.5; } .inst .go{ font-family:var(--ff-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-top:14px; } /* ---------- footer (very dark green-black, cream/gold) ---------- */ footer.foot, footer{ background:var(--green-black) !important; color:var(--paper-sunk); } footer a{ color:var(--paper-sunk) !important; opacity:.82; text-decoration:none; } footer a:hover{ opacity:1; color:var(--gold) !important; } footer .label{ color:var(--gold) !important; } footer h3, footer h4, footer .font-bold{ color:var(--paper-sunk) !important; } footer p, footer li, footer span{ color:#b9c2b2; } /* ---------- wiring diagram (data strokes = gold; live/action = orange) ---------- */ .wire-stroke{ stroke:var(--ink); stroke-width:1.5; fill:none; } .wire-dim{ stroke:var(--ink-3); stroke-width:1; fill:none; } .wire-amber{ stroke:var(--gold); stroke-width:2; fill:none; } .wire-orange{ stroke:var(--orange); stroke-width:2; fill:none; } .wire-label{ font-family:var(--ff-mono); font-size:11px; fill:var(--ink-2); letter-spacing:.04em; } .node{ fill:var(--ink); } .node-open{ fill:var(--paper-raised); stroke:var(--ink); stroke-width:1.5; } .node-amber{ fill:var(--gold); } /* ---------- page-head pattern ---------- */ .page-head{ padding:40px 0 26px; } .crumb{ display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; } .crumb a{ color:var(--ink-3); text-decoration:none; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.05em; } .crumb a:hover{ color:var(--orange-ink); } .stamp-row{ margin-top:16px; } /* ============================================================================ TAILWIND HARMONY — neutralize the old palette so FM tokens win site-wide. The pages keep their utility classes for LAYOUT; color utilities get remapped. ========================================================================== */ .bg-gray-50, .bg-slate-50, .bg-gray-100{ background-color:var(--paper) !important; } .bg-white{ background-color:var(--paper-raised) !important; } main .bg-slate-800, main .bg-slate-900, main .bg-gray-800, main .bg-gray-900, main .from-slate-800, main .to-slate-900, main .from-slate-900{ background:var(--paper-raised) !important; background-image:none !important; border:1px solid var(--hairline); border-radius:2px; } main .bg-slate-800 *, main .bg-slate-900 *{ color:var(--ink-2); } main .bg-slate-800 h2, main .bg-slate-900 h2, main .bg-slate-800 h3, main .bg-slate-900 h3{ color:var(--ink); } main .text-white{ color:var(--ink) !important; } main .text-gray-300, main .text-gray-400, main .text-slate-300{ color:var(--ink-2) !important; } .text-gray-500, .text-slate-500{ color:var(--ink-3) !important; } .text-gray-600, .text-gray-700, .text-slate-600, .text-slate-700{ color:var(--ink-2) !important; } .text-gray-800, .text-gray-900, .text-slate-800, .text-slate-900{ color:var(--ink) !important; } /* amber text utilities -> AA-safe orange-ink (scoped away from the dark green nav, which sets its own cream/gold link colors with higher specificity anyway) */ main .text-amber-400, main .text-amber-500, main .text-amber-600, main .text-amber-700, .article-content .text-amber-400, .text-amber-700{ color:var(--orange-ink) !important; } .text-green-600, .text-green-700{ color:var(--verified) !important; } .border-gray-200, .border-gray-300, .border-slate-200, .border-amber-200{ border-color:var(--hairline) !important; } .border-amber-400, .border-amber-500{ border-color:var(--gold) !important; } .bg-amber-500, .bg-amber-400{ background-color:var(--gold) !important; } .bg-amber-100, .bg-amber-50{ background-color:var(--paper-sunk) !important; } .bg-green-600, .bg-green-700, .bg-emerald-600, .bg-emerald-700{ background-color:var(--green) !important; } .rounded-xl, .rounded-2xl, .rounded-lg, .rounded-md{ border-radius:2px !important; } .rounded-full{ border-radius:2px !important; } .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl{ box-shadow:none !important; } .hover\:shadow-lg:hover, .hover\:shadow-md:hover{ box-shadow:var(--shadow-panel) !important; } main .bg-gradient-to-r, main .bg-gradient-to-br{ background-image:none !important; background-color:var(--paper-raised) !important; } @media (max-width:760px){ body{ font-size:16px; } .section{ padding:44px 0; } .panel{ grid-template-columns:1fr; } .controls{ border-right:0; border-bottom:1px solid var(--hairline); } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }