/* * ET-Docs design system v0.2 - "instrument-grade". * * Calm, scientific, precise. Type carries the weight; colour is * codified (each pipeline P1-P7 has its own true hue). One signature * graphical move: the hero ripple (drawn from scripts/et-docs-ripple.js). * * Coexists with w3.css during the incremental refresh. All selectors * carry an `etd-` prefix so they never clash with `w3-*` rules. * * Direction reference: docs/et-docs-ui-direction.md (v0.1 doc; * v0.2 mock published 2026-06-30). */ /* ============================================================ Tokens ============================================================ */ :root { /* Neutrals - cool, measured blue bias */ --etd-bg: #F4F6FA; --etd-bg-alt: #FBFCFE; --etd-surface: #FFFFFF; --etd-ink: #0A1525; --etd-ink-quiet: #5A6477; --etd-ink-faint: #97A0B0; --etd-rule: #E0E5EF; --etd-rule-strong: #C5CCDB; /* Primary */ --etd-primary: #1E3FAA; --etd-primary-hover: #152F84; --etd-primary-soft: #E6ECF9; --etd-primary-ink: #0A1F5C; /* Accent - used only on action CTAs */ --etd-accent: #D08C25; --etd-accent-hover: #A86E15; --etd-accent-soft: #FAEDD3; /* Semantic state - separate from accent */ --etd-good: #2A8C5A; --etd-good-soft: #E1F0E9; --etd-warn: #C68B1B; --etd-warn-soft: #F8EDD0; --etd-crit: #C13F3D; --etd-crit-soft: #FAE3E2; /* Pipeline hues - codified, not tints */ --etd-p1: #1E3FAA; --etd-p2: #4A6BB5; --etd-p3: #2A8C5A; --etd-p4: #7639AD; --etd-p5: #B5631F; --etd-p5b: #B58F3F; --etd-p6: #C8413F; --etd-p7: #5A6477; /* Type */ /* Font stack unified with etmd-next / tailwind.src.css so both apps read as siblings and the whole ET-Docs surface uses one family (Inter) whether it's on the Tailwind chrome or one of the still-legacy pages. Historical "Iowan Old Style" serif for display headings retired at the same time - etmd-next uses Inter for both display and body. Inter is loaded via Google Fonts from the page templates. */ --etd-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --etd-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --etd-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --etd-radius: 6px; --etd-radius-sm: 4px; --etd-radius-lg: 10px; --etd-shadow-1: 0 1px 0 rgba(10, 21, 37, .03), 0 1px 3px rgba(10, 21, 37, .03); --etd-shadow-2: 0 2px 8px rgba(10, 21, 37, .06); --etd-shadow-cta: 0 1px 0 rgba(168, 110, 21, .25), 0 2px 6px rgba(208, 140, 37, .25); } /* ============================================================ Reset for the new top bar (applies at level because the top bar is part of every page chrome). The reset is light: only what's needed to make our typography land cleanly without stomping on legacy w3.css pages. ============================================================ */ body.etd-shell { margin: 0; background: var(--etd-bg); color: var(--etd-ink); } body.etd-shell { font-family: var(--etd-sans); } /* Beat w3.css's bare `h1,h2,h3,h4,h5,h6 { font-family: "Segoe UI" }` rule (specificity 0,0,0,1) that would otherwise win over the Inter inherited from body on every heading emitted by the new Tailwind chrome (dashboard, codifier list, reviews, etc.). Specificity here is (0,0,1,2) - body.etd-shell h1 - which beats the w3.css rule cleanly without needing !important. Applied across every text-carrying element for the same reason (w3.css also declares Verdana on html,body which is beaten by body.etd-shell above, but any child element that inherits font-family from html rather than body would leak Verdana). */ body.etd-shell h1, body.etd-shell h2, body.etd-shell h3, body.etd-shell h4, body.etd-shell h5, body.etd-shell h6 { font-family: var(--etd-sans); } /* Tailwind display-utility overrides. * * Tailwind's display utilities (.hidden, .block, .flex, .inline, * responsive .md:hidden, .md:flex, .sm:inline, etc.) live inside * @layer utilities. On ET-Docs authenticated pages we ALSO load * a full legacy CSS stack (docs.css, w3.css, jquery-ui.css, * font-awesome, and this file), all un-layered - and un-layered * author regular declarations have HIGHER cascade priority than * layered author regular declarations per CSS Cascade Layer * spec. So Tailwind's regular .hidden was being beaten by some * unlayered legacy rule, leaving the mobile-nav panel visible on * wide viewports and the desktop-only nav visible on small ones * (the two "displays twice" reports). * * Fix: promote every display utility we actually use in the * chrome markup (build_nav_bars + templates/_layout.php + the * dashboard hero) to un-layered !important. Layered !important * would also work but requires touching the tailwind.src.css * layer setup; a plain un-layered !important override is * simpler and only affects the exact utility class names listed. * * Not needed for etmd-next because it loads only * tailwind.build.css - no legacy stack to fight with. */ .hidden { display: none !important; } .block { display: block !important; } .flex { display: flex !important; } .inline { display: inline !important; } .inline-flex { display: inline-flex !important; } .grid { display: grid !important; } @media (min-width: 40rem) { .sm\:inline { display: inline !important; } .sm\:hidden { display: none !important; } .sm\:flex { display: flex !important; } .sm\:block { display: block !important; } } @media (min-width: 48rem) { .md\:flex { display: flex !important; } .md\:hidden { display: none !important; } .md\:inline { display: inline !important; } .md\:inline-flex { display: inline-flex !important; } .md\:block { display: block !important; } } @media (min-width: 64rem) { .lg\:grid { display: grid !important; } .lg\:flex { display: flex !important; } .lg\:hidden { display: none !important; } .lg\:block { display: block !important; } } /* Breathing room between the top-of-page

nav and the interior content that follows it. Etmd-next wraps interior content in

. ET-Docs's authenticated pages emit content as a direct sibling of

; this selector adds the equivalent top padding to whichever element renders next, without needing per-page markup changes. The nav's inline