/* ========================================================================== Civil Systems — shared structural UI (Grid City / CAD aesthetic) Design system: DESIGN_SYSTEM.md. Used by all flat content pages. The 3D homepage (index.html) keeps its own inline styles. ========================================================================== */ :root { --bg-canvas: #f4f4f5; --bg-card: #ffffff; --ink: #09090b; --ink-muted: #52525b; --border-line: rgba(9, 9, 11, 0.12); --grid-line: rgba(9, 9, 11, 0.05); --micro-grid: rgba(9, 9, 11, 0.04); --c-blue: #2563eb; --rgb-blue: 37, 99, 235; --c-orange: #ea580c; --rgb-orange: 234, 88, 12; --c-green: #16a34a; --rgb-green: 22, 163, 74; --c-purple: #7c3aed; --rgb-purple: 124, 58, 237; --c-pink: #db2777; --c-yellow: #eab308; --rgb-yellow: 234, 179, 8; --critical-dark: #1d4ed8; --rgb-base-glow: 0, 0, 0; --shadow-ao: 0 0 1px rgba(var(--rgb-base-glow), 0.15), 0 4px 12px rgba(var(--rgb-base-glow), 0.06), 0 14px 32px rgba(var(--rgb-base-glow), 0.04); --shadow-inset-ao: inset 0 2px 6px rgba(var(--rgb-base-glow), 0.06), inset 0 0 0 1px rgba(var(--rgb-base-glow), 0.04); /* Per-page accent (overridden by a route helper on ). */ --accent: var(--c-blue); --accent-strong: var(--critical-dark); --accent-rgb: var(--rgb-blue); } /* Route accents: set on to theme a whole page. */ .route-blue { --accent: var(--c-blue); --accent-strong: var(--critical-dark); --accent-rgb: var(--rgb-blue); } .route-orange { --accent: var(--c-orange); --accent-strong: #c2410c; --accent-rgb: var(--rgb-orange); } .route-green { --accent: var(--c-green); --accent-strong: #15803d; --accent-rgb: var(--rgb-green); } .route-purple { --accent: var(--c-purple); --accent-strong: #6d28d9; --accent-rgb: var(--rgb-purple); } .route-gold { --accent: var(--c-yellow); --accent-strong: #a16207; --accent-rgb: var(--rgb-yellow); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-width: 320px; margin: 0; padding: 0 0 24px; color: var(--ink); background: var(--bg-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; } body::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; content: ""; opacity: 0.62; pointer-events: none; } a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 4px; } /* --- Layout shell ------------------------------------------------------- */ .shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; } .article-panel { margin-top: 18px; padding: clamp(8px, 2vw, 20px) clamp(24px, 4vw, 48px) 60px; border: 1px solid var(--border-line); border-radius: 0; background: var(--bg-card); box-shadow: var(--shadow-ao); } /* --- Persistent top bar ------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--bg-canvas); border-bottom: 1px solid var(--border-line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; } .topnav { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); } @media (max-width: 420px) { .topnav { gap: 12px; } .topbar-inner .wordmark { font-size: .68rem; } } .mono { font: 700 0.67rem/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.105em; text-transform: uppercase; } /* --- Header ------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 0; } .header-actions { display: flex; align-items: center; gap: 12px; } .wordmark { color: var(--ink); font: 700 0.78rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-decoration: none; } .route { color: var(--ink-muted); font: 700 0.62rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .route:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } /* --- Buttons ------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-line); border-radius: 0; color: var(--ink); background: var(--bg-card); box-shadow: var(--shadow-ao); font: 700 0.57rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; cursor: pointer; overflow: hidden; } .btn svg, .btn span { position: relative; z-index: 3; } .btn svg { width: 13px; height: 13px; } .btn::before { position: absolute; inset: 0; z-index: 2; border: 2px solid transparent; content: ""; pointer-events: none; transition: border-color 0.15s ease; } .btn::after { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(var(--micro-grid) 1px, transparent 1px), linear-gradient(90deg, var(--micro-grid) 1px, transparent 1px); background-size: 4px 4px; content: ""; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .btn:hover::before, .btn:focus-visible::before { border-color: var(--accent); } .btn:hover::after, .btn:focus-visible::after { opacity: 1; } .btn-large { min-height: 46px; padding: 0 20px; border-color: var(--accent); color: #fff; background: var(--accent); font-size: 0.68rem; letter-spacing: 0.09em; } .btn-large:hover::before, .btn-large:focus-visible::before { border-color: var(--ink); } .btn-large::after { background-image: linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px); } /* Icon-only day / night toggle (sun -> moon). */ .mode-toggle { width: 40px; min-height: 34px; padding: 0; display: inline-grid; place-items: center; } .mode-toggle .moon-icon { display: none; } .mode-toggle svg { width: 15px; height: 15px; } /* --- Hero / titles ------------------------------------------------------ */ .kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--accent-strong); font: 700 0.68rem/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; } .kicker::before { width: 25px; height: 3px; background: var(--accent); content: ""; } .reviewed { display: block; margin: 14px 0 0; color: var(--ink-muted); font: 700 0.62rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } h1 { margin: 0; font-family: Inter, Arial, sans-serif; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; text-wrap: balance; } .lead { max-width: 680px; margin: 25px 0 0; color: var(--ink-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.68; } .hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); } /* --- Sections ----------------------------------------------------------- */ .section { margin-top: 68px; } .section-head { display: grid; grid-template-columns: minmax(165px, 0.7fr) minmax(0, 1.3fr); gap: 35px; align-items: start; padding: 16px 0 24px; border-top: 2px solid var(--ink); } .section-id { color: var(--accent-strong); } h2 { margin: 0; font-family: Inter, Arial, sans-serif; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; } .section-head p { max-width: 650px; margin: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1.62; } h3 { margin: 0 0 12px; font-family: Inter, Arial, sans-serif; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } /* Reading copy inside content columns. */ .prose { max-width: 820px; } .prose p { margin: 0 0 22px; color: var(--ink-muted); font-size: 1.04rem; font-weight: 500; line-height: 1.72; } .prose p strong, .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--accent-strong); text-underline-offset: 3px; } /* Mono sub-heading with a drafting rule, replaces old .cp-h2. */ .rule-head { display: flex; align-items: center; gap: 15px; margin: 52px 0 20px; color: var(--accent-strong); font: 700 0.98rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase; } .rule-head::after { flex: 1; height: 1px; background: var(--border-line); content: ""; } /* --- Section rail: left icon + spine, marks a recurring beat boundary --- */ .section-block { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: clamp(18px, 3vw, 28px); margin-top: 60px; } .section-block .rule-head { margin-top: 0; } .section-block .prose { margin: 0; } .section-rail { display: flex; flex-direction: column; align-items: center; } .section-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border-line); background: var(--bg-card); box-shadow: var(--shadow-ao); color: var(--accent-strong); } .section-icon svg { width: 20px; height: 20px; } .section-rail-line { flex: 1; width: 2px; min-height: 40px; margin-top: 10px; background: var(--accent); opacity: .22; } @media (max-width: 680px) { .section-block { grid-template-columns: 1fr; } .section-rail { flex-direction: row; margin-bottom: 12px; } .section-rail-line { display: none; } } /* --- Cards, callouts, figures ------------------------------------------ */ .card { padding: 28px 26px; border: 1px solid var(--border-line); border-radius: 0; background: var(--bg-card); box-shadow: var(--shadow-ao); } .card.grounded { background: var(--bg-canvas); box-shadow: var(--shadow-inset-ao); } /* Emphasis callout — replaces old rounded "full-box". */ .callout { position: relative; max-width: 820px; margin: 40px 0; padding: 36px clamp(24px, 4vw, 44px); border: 1px solid var(--border-line); border-left: 4px solid var(--accent); border-radius: 0; background: var(--bg-canvas); box-shadow: var(--shadow-inset-ao); } .callout .callout-id { position: absolute; top: -1px; left: clamp(24px, 4vw, 44px); transform: translateY(-50%); padding: 4px 10px; color: #fff; background: var(--accent); font: 700 0.6rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; } .callout p { margin: 0; color: var(--ink); font-size: 1.08rem; font-weight: 500; line-height: 1.6; } /* Diagram / visualization card — CAD title-block treatment. */ .figure { margin: 36px 0; border: 1px solid var(--border-line); border-radius: 0; background: var(--bg-card); box-shadow: var(--shadow-ao); overflow: hidden; } .figure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-line); background: var(--bg-canvas); color: var(--ink-muted); font: 700 0.6rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; } .figure-head .tag { color: var(--accent-strong); } .figure-body { padding: 20px; background: var(--bg-card); } .figure svg { display: block; width: 100%; height: auto; } .figure figcaption { padding: 0 20px 18px; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.5; } /* Mono readout / formula, cut into the page. */ .formula { display: inline-block; margin-top: 6px; padding: 8px 12px; border: 1px solid transparent; border-radius: 0; color: var(--ink); background: var(--bg-canvas); box-shadow: var(--shadow-inset-ao); font: 700 0.7rem/1.1 "IBM Plex Mono", monospace; letter-spacing: 0.04em; } /* --- Launch / CTA strip ------------------------------------------------- */ .launch-strip { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 72px; padding: clamp(27px, 5vw, 48px); border: 1px solid var(--border-line); border-radius: 0; background: var(--bg-canvas); box-shadow: var(--shadow-ao); } .launch-strip h2 { max-width: 520px; font-size: clamp(1.7rem, 3.2vw, 2.8rem); } .launch-strip p { max-width: 560px; margin: 12px 0 0; color: var(--ink-muted); font-size: 0.96rem; line-height: 1.55; } .launch-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: min(320px, 100%); } .launch-actions .btn { justify-content: center; min-height: 58px; padding: 0 30px; font-size: .76rem; letter-spacing: .09em; } /* --- FAQ (native

accordion) ------------------------- */ .faq-block { margin-top: 56px; } .faq-head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--accent-strong); font: 700 0.68rem/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; } .faq-head::before { width: 25px; height: 3px; background: var(--accent); content: ""; } .faq-list { display: grid; gap: 1px; border: 1px solid var(--border-line); background: var(--border-line); box-shadow: var(--shadow-ao); } .faq-item { background: var(--bg-card); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(20px, 3vw, 26px); color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 1.02rem; font-weight: 600; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { flex: 0 0 auto; color: var(--accent-strong); font: 700 1rem/1 "IBM Plex Mono", monospace; content: "+"; } .faq-item[open] summary::after { content: "\2212"; } .faq-item[open] summary { border-bottom: 1px solid var(--border-line); } .faq-item p { margin: 0; padding: 4px clamp(20px, 3vw, 26px) 20px; max-width: 65ch; color: var(--ink-muted); font-size: 0.96rem; line-height: 1.62; } /* --- Footer ------------------------------------------------------------- */ footer { padding: 25px 0 31px; border-top: 1px solid var(--border-line); } .footer-inner { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-muted); font: 700 0.58rem/1.5 "IBM Plex Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase; } .footer-inner a { color: inherit; text-decoration: none; } .footer-inner a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } /* --- Field Index drawer + edge tab (injected by scripts/field-index.js) --- */ .fi-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(9,9,11,.38); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } .fi-backdrop.open { opacity: 1; visibility: visible; } .fi-drawer { position: fixed; top: 0; right: 0; z-index: 61; display: flex; flex-direction: column; width: min(380px, 92vw); height: 100%; background: var(--bg-card); border-left: 1px solid var(--border-line); box-shadow: var(--shadow-ao); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .fi-drawer.open { transform: translateX(0); } .fi-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--border-line); } .fi-head strong { font: 700 .82rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; } .fi-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-line); background: var(--bg-card); color: var(--ink); cursor: pointer; font-size: 13px; } .fi-close:hover { border-color: var(--accent); } .fi-full-link { display: block; padding: 12px 22px; border-bottom: 1px solid var(--border-line); color: var(--accent-strong); font: 700 .62rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .fi-full-link:hover { background: var(--bg-canvas); } .fi-body { flex: 1; overflow-y: auto; padding: 6px 10px 24px; } .fi-group { padding: 8px 0; } .fi-group + .fi-group { border-top: 1px solid var(--grid-line); } .fi-cat { padding: 10px 12px 6px; color: var(--ink-muted); font: 700 .58rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; } .fi-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; border-left: 2px solid transparent; color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.3; text-decoration: none; } a.fi-item:hover { background: var(--bg-canvas); } .fi-item .fi-arrow { color: var(--ink-muted); font: .8rem/1 "IBM Plex Mono", monospace; } .fi-item.current { border-left-color: var(--accent); color: var(--accent-strong); background: var(--bg-canvas); } .fi-tab { position: fixed; top: 50%; right: 0; z-index: 40; transform: translateY(-50%); writing-mode: vertical-rl; padding: 14px 7px; border: 1px solid var(--border-line); border-right: 0; background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-ao); cursor: pointer; font: 700 .58rem/1 "IBM Plex Mono", monospace; letter-spacing: .2em; text-transform: uppercase; } .fi-tab:hover { color: var(--accent-strong); border-color: var(--accent); } .fi-tab.hidden { display: none; } /* --- Related notes (injected before the CTA) --- */ .related { margin-top: 64px; } .related-head { padding-bottom: 14px; border-bottom: 2px solid var(--ink); font: 700 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 18px; } .related-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 118px; padding: 20px; border: 1px solid var(--border-line); background: var(--bg-card); box-shadow: var(--shadow-ao); text-decoration: none; color: inherit; transition: border-color .15s ease; } .related-card:hover { border-color: var(--accent); } .related-cat { color: var(--accent-strong); font: 700 .56rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; } .related-title { font-size: 1.02rem; font-weight: 700; line-height: 1.2; text-wrap: pretty; } .related-arrow { margin-top: auto; color: var(--ink-muted); font: 700 .9rem/1 "IBM Plex Mono", monospace; } @media (max-width: 720px) { .related-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .fi-drawer, .fi-backdrop { transition: none; } } /* --- Dark mode ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.force-light) { color-scheme: dark; --bg-canvas: #09090b; --bg-card: #141416; --ink: #fafafa; --ink-muted: #a1a1aa; --border-line: rgba(255,255,255,.12); --grid-line: rgba(255,255,255,.05); --micro-grid: rgba(255,255,255,.04); --c-blue: #3b82f6; --c-orange: #f97316; --c-green: #22c55e; --c-purple: #8b5cf6; --c-pink: #ec4899; --c-yellow: #facc15; --rgb-blue: 59,130,246; --rgb-orange: 249,115,22; --rgb-green: 34,197,94; --rgb-purple: 139,92,246; --rgb-yellow: 250,204,21; --critical-dark: #60a5fa; --rgb-base-glow: 255, 240, 215; --shadow-ao: 0 0 4px rgba(var(--rgb-base-glow),.4), 0 8px 24px rgba(var(--rgb-base-glow),.2), 0 16px 40px rgba(var(--rgb-base-glow),.1); --shadow-inset-ao: inset 0 2px 8px rgba(var(--rgb-base-glow),.2), inset 0 0 0 1px rgba(var(--rgb-base-glow),.3); } } body.night { color-scheme: dark; --bg-canvas: #09090b; --bg-card: #141416; --ink: #fafafa; --ink-muted: #a1a1aa; --border-line: rgba(255,255,255,.12); --grid-line: rgba(255,255,255,.05); --micro-grid: rgba(255,255,255,.04); --c-blue: #3b82f6; --c-orange: #f97316; --c-green: #22c55e; --c-purple: #8b5cf6; --c-pink: #ec4899; --c-yellow: #facc15; --rgb-blue: 59,130,246; --rgb-orange: 249,115,22; --rgb-green: 34,197,94; --rgb-purple: 139,92,246; --rgb-yellow: 250,204,21; --critical-dark: #60a5fa; --rgb-base-glow: 255, 240, 215; --shadow-ao: 0 0 4px rgba(var(--rgb-base-glow),.4), 0 8px 24px rgba(var(--rgb-base-glow),.2), 0 16px 40px rgba(var(--rgb-base-glow),.1); --shadow-inset-ao: inset 0 2px 8px rgba(var(--rgb-base-glow),.2), inset 0 0 0 1px rgba(var(--rgb-base-glow),.3); } .mode-toggle[aria-pressed="true"] .sun-icon { display: none; } .mode-toggle[aria-pressed="true"] .moon-icon { display: block; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 12px; } .launch-strip { grid-template-columns: 1fr; } .launch-strip .btn-large { justify-self: start; } } @media (max-width: 520px) { body { padding: 10px 0; } .shell { width: min(100% - 20px, 560px); } .article-panel { padding: 0 20px 40px; } .footer-inner { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }