/* ───────────────────────────────────────────────── MONSOON STEEL · paired light + dark Every token has a value in BOTH themes. No element references raw colors — only tokens. Switch via: ───────────────────────────────────────────────── */ :root[data-theme="light"] { /* canvas */ --bg: oklch(96.5% 0.008 230); --bg-2: oklch(94% 0.010 230); --bg-3: oklch(91% 0.014 230); --surface: oklch(98% 0.006 230); --surface-2: oklch(95.5% 0.009 230); /* rules / borders */ --rule: oklch(85% 0.014 230); --rule-2: oklch(76% 0.018 230); --rule-strong: oklch(56% 0.024 230); /* ink */ --ink: oklch(20% 0.030 250); --ink-2: oklch(34% 0.024 250); --ink-3: oklch(50% 0.020 250); --ink-4: oklch(66% 0.016 230); /* accent · monsoon teal (PRIMARY) */ --accent: oklch(50% 0.10 200); --accent-2: oklch(58% 0.10 200); --accent-bg: oklch(93% 0.030 200); /* signal · saffron pinpoint (RESERVED — live, new, attention) */ --signal: oklch(62% 0.16 65); --signal-2: oklch(68% 0.14 65); --signal-bg: oklch(94% 0.04 70); /* regulator palette · five distinct hues for cross-region comparison */ --reg-ich: #B8923A; /* ICH M10 · gold/wheat · the harmonised baseline */ --reg-ich-bg: #FBF3DB; --reg-fda: #B5783E; /* FDA · warm tan · United States */ --reg-fda-bg: #FAEAD3; --reg-ema: #4F8051; /* EMA · forest green · Europe */ --reg-ema-bg: #DEEBDB; --reg-who: #695E84; /* WHO · lavender/violet · global PQT */ --reg-who-bg: #E5DDF1; --reg-anv: #9B5743; /* ANVISA · terracotta · Brazil */ --reg-anv-bg: #F4DACE; /* converge / diverge tags */ --converge: oklch(50% 0.13 145); --converge-bg: oklch(94% 0.04 145); --diverge: oklch(58% 0.16 35); --diverge-bg: oklch(94% 0.04 35); --shadow-1: 0 1px 2px oklch(20% 0.03 250 / 0.06); --shadow-2: 0 4px 16px oklch(20% 0.03 250 / 0.08); } /* ───────────────────────────────────────────────────────────────────── * WEEKLY SIGNAL CONTRAST CONTRACT · 2026-05-31 * * Weekly digests are focus pages, but their hero and expanded signal * cards must still follow the iFeed public-platform banner rule: * light page -> dark work surface; dark page -> light work surface. * ───────────────────────────────────────────────────────────────────── */ html.w21-signal-room .hero, html.w21-signal-room .carousel-slide { background: radial-gradient(circle at 72% 22%, var(--hero-glow-a), transparent 24rem), radial-gradient(circle at 14% 72%, var(--hero-glow-b), transparent 22rem), linear-gradient(135deg, var(--hero-base), var(--hero-mid) 58%, var(--hero-end)) !important; border-color: var(--hero-border) !important; color: var(--hero-fg) !important; } html.w21-signal-room .hero h1, html.w21-signal-room .carousel-slide h2, html.w21-signal-room .hero .metric .value, html.w21-signal-room .carousel-slide .slide-meta .m-value { color: var(--hero-fg) !important; } html.w21-signal-room .hero h1 em, html.w21-signal-room .carousel-slide h2 em, html.w21-signal-room .hero .eyebrow, html.w21-signal-room .carousel-slide .slide-kicker, html.w21-signal-room .carousel-slide .exp-tile strong, html.w21-signal-room .carousel-slide .slide-source { color: var(--hero-em) !important; } html.w21-signal-room .hero .lede, html.w21-signal-room .carousel-slide .slide-summary, html.w21-signal-room .carousel-slide .exp-tile span, html.w21-signal-room .carousel-slide .visual-card::after { color: var(--hero-fg-soft) !important; } html.w21-signal-room .hero .metric, html.w21-signal-room .carousel-slide .slide-meta, html.w21-signal-room .carousel-slide .exp-tile, html.w21-signal-room .carousel-slide .visual-card::after { background: color-mix(in srgb, var(--hero-base) 78%, var(--hero-fg) 8%) !important; border-color: var(--hero-border) !important; } html.w21-signal-room .signal-map, html.w21-signal-room .carousel-slide .visual-card { background: linear-gradient(155deg, color-mix(in srgb, var(--hero-base) 78%, var(--hero-em) 14%), color-mix(in srgb, var(--hero-mid) 82%, var(--hero-em) 8%)) !important; border-color: var(--hero-border) !important; } html.w21-signal-room .signal-map .node, html.w21-signal-room .visual-label, html.w21-signal-room .diagram-stage { background: color-mix(in srgb, var(--hero-base) 76%, var(--hero-fg) 12%) !important; border-color: var(--hero-border) !important; color: var(--hero-fg) !important; } html.w21-signal-room .map-core, html.w21-signal-room .visual-core, html.w21-signal-room .diagram-core { background: color-mix(in srgb, var(--hero-base) 76%, var(--hero-em) 12%) !important; border-color: var(--hero-em) !important; color: var(--hero-fg) !important; } :root[data-theme="dark"] { /* Monsoon Steel · D3 Midnight Teal — locked */ --bg: oklch(18% 0.040 210); --bg-2: oklch(21% 0.043 210); --bg-3: oklch(25% 0.045 210); --surface: oklch(22% 0.045 210); --surface-2: oklch(26% 0.046 210); --rule: oklch(32% 0.045 205); --rule-2: oklch(40% 0.048 205); --rule-strong: oklch(56% 0.052 205); --ink: oklch(95% 0.014 200); --ink-2: oklch(80% 0.018 200); --ink-3: oklch(64% 0.020 200); --ink-4: oklch(50% 0.022 200); --accent: oklch(80% 0.14 195); --accent-2: oklch(72% 0.13 195); --accent-bg: oklch(30% 0.07 200); --signal: oklch(82% 0.14 60); --signal-2: oklch(74% 0.13 60); --signal-bg: oklch(32% 0.06 65); /* regulator palette · dark mode · darker hue + low-saturation backplate */ --reg-ich: #E8C282; --reg-ich-bg: #3A2F1E; --reg-fda: #DBA478; --reg-fda-bg: #3D2C1C; --reg-ema: #93B591; --reg-ema-bg: #1F3220; --reg-who: #A89BC1; --reg-who-bg: #2A2138; --reg-anv: #C99080; --reg-anv-bg: #381F18; --converge: oklch(78% 0.13 145); --converge-bg: oklch(28% 0.05 145); --diverge: oklch(78% 0.14 40); --diverge-bg: oklch(28% 0.06 40); --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-2: 0 6px 28px oklch(0% 0 0 / 0.55); } :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ───────────────────────────────────────────────── Banner-stable tokens · used inside dark gradient banners regardless of light/dark theme. Banners are ALWAYS dark, so their foreground text + overlays must not invert. ───────────────────────────────────────────────── */ :root { --banner-fg: rgba(248, 250, 252, 0.96); --banner-fg-soft: rgba(248, 250, 252, 0.85); --banner-overlay: rgba(0, 0, 0, 0.42); --banner-stamp-bg: rgba(255, 255, 255, 0.10); --banner-stamp-bd: rgba(255, 255, 255, 0.55); --banner-pattern-a: rgba(255, 255, 255, 0.18); --banner-pattern-b: rgba(255, 255, 255, 0.24); --banner-pattern-c: rgba(255, 255, 255, 0.32); } /* ───────────────────────────────────────────────── Hero-canvas tokens · landing banners ALWAYS contrast page body. Light theme page → dark banner canvas (deep teal gradient). Dark theme page → light banner canvas (cream/teal gradient). This gives the "banner that pops" feel on both themes. ───────────────────────────────────────────────── */ :root[data-theme="light"] { --hero-base: #0d2a30; --hero-mid: #102f3a; --hero-end: #0d4a5a; --hero-glow-a: rgba(40, 140, 160, 0.42); --hero-glow-b: rgba(40, 140, 160, 0.22); --hero-fg: rgba(248, 252, 254, 0.98); --hero-fg-soft: rgba(220, 235, 240, 0.88); --hero-em: rgba(160, 220, 235, 1); --hero-eyebrow-bg: rgba(255, 255, 255, 0.06); --hero-eyebrow-bd: rgba(180, 230, 240, 0.32); --hero-eyebrow-fg: rgba(190, 235, 245, 0.96); --hero-cta1-bg: rgba(160, 220, 235, 1); --hero-cta1-fg: #0d2a30; --hero-cta1-bg-h: rgba(255, 255, 255, 0.98); --hero-cta2-fg: rgba(220, 235, 240, 0.96); --hero-cta2-bd: rgba(180, 220, 235, 0.55); --hero-cta2-bg-h: rgba(255, 255, 255, 0.08); --hero-meta-rule: rgba(180, 220, 235, 0.20); --hero-meta-fg: rgba(190, 220, 230, 0.80); --hero-meta-strong:rgba(220, 240, 245, 0.96); --hero-pat-a: rgba(255, 255, 255, 0.10); --hero-pat-b: rgba(255, 255, 255, 0.16); --hero-pat-c: rgba(160, 220, 235, 0.55); --hero-border: rgba(160, 220, 235, 0.32); --hero-signal: rgba(255, 200, 100, 0.95); --hero-signal-halo:rgba(255, 200, 100, 0.22); } :root[data-theme="dark"] { --hero-base: #f3f7f9; --hero-mid: #e6eef1; --hero-end: #cfdfe3; --hero-glow-a: rgba(40, 140, 160, 0.18); --hero-glow-b: rgba(40, 140, 160, 0.10); --hero-fg: #0d2a30; --hero-fg-soft: #2a4148; --hero-em: #0e7a8c; --hero-eyebrow-bg: rgba(13, 42, 48, 0.04); --hero-eyebrow-bd: rgba(14, 122, 140, 0.40); --hero-eyebrow-fg: #0e7a8c; --hero-cta1-bg: #0e7a8c; --hero-cta1-fg: #f3f7f9; --hero-cta1-bg-h: #0d2a30; --hero-cta2-fg: #0e7a8c; --hero-cta2-bd: rgba(14, 122, 140, 0.45); --hero-cta2-bg-h: rgba(14, 122, 140, 0.10); --hero-meta-rule: rgba(14, 122, 140, 0.22); --hero-meta-fg: rgba(42, 65, 72, 0.75); --hero-meta-strong:#0d2a30; --hero-pat-a: rgba(14, 122, 140, 0.10); --hero-pat-b: rgba(14, 122, 140, 0.16); --hero-pat-c: rgba(14, 122, 140, 0.45); --hero-border: rgba(14, 122, 140, 0.30); --hero-signal: #c97a1f; --hero-signal-halo:rgba(201, 122, 31, 0.22); } /* ───────────────────────────────────────────────── Glass-card tokens · subtle frosted-panel aesthetic for cards. Used inside .hero (banner-glass) and across page cards (page-glass). ───────────────────────────────────────────────── */ :root[data-theme="light"] { --glass-bg: color-mix(in srgb, #ffffff 62%, transparent); --glass-bg-strong: color-mix(in srgb, #ffffff 82%, transparent); --glass-bd: color-mix(in srgb, oklch(50% 0.10 200) 22%, transparent); --glass-bd-strong: color-mix(in srgb, oklch(50% 0.10 200) 42%, transparent); --glass-blur: 14px; --glass-shadow: 0 18px 48px -28px oklch(20% 0.03 250 / 0.32); --glass-shadow-h: 0 24px 60px -28px oklch(50% 0.10 200 / 0.40); --glass-tint: linear-gradient(135deg, color-mix(in srgb, oklch(50% 0.10 200) 6%, transparent) 0%, transparent 70%); --banner-glass-bg: rgba(255, 255, 255, 0.06); --banner-glass-bd: rgba(255, 255, 255, 0.18); } :root[data-theme="dark"] { --glass-bg: color-mix(in srgb, oklch(28% 0.05 210) 70%, transparent); --glass-bg-strong: color-mix(in srgb, oklch(32% 0.05 210) 84%, transparent); --glass-bd: color-mix(in srgb, oklch(80% 0.14 195) 28%, transparent); --glass-bd-strong: color-mix(in srgb, oklch(80% 0.14 195) 50%, transparent); --glass-blur: 16px; --glass-shadow: 0 18px 48px -22px oklch(0% 0 0 / 0.55); --glass-shadow-h: 0 24px 60px -22px oklch(80% 0.14 195 / 0.30); --glass-tint: linear-gradient(135deg, color-mix(in srgb, oklch(80% 0.14 195) 8%, transparent) 0%, transparent 70%); --banner-glass-bg: rgba(13, 42, 48, 0.08); --banner-glass-bd: rgba(14, 122, 140, 0.22); } /* ───────────────────────────────────────────────── Uniform banner standard · all .hero.hero-banner-canvas pages. Rules A-G: one fixed height · symmetric padding · viewport-fit · composed elegantly · content quality preserved. ───────────────────────────────────────────────── */ /* ───────────────────────────────────────────────── Uniform layout heights · top bar + banner + post-banner clean zone. ───────────────────────────────────────────────── */ :root { --top-bar-height: 86px; } /* On phones the 86px breathing space below the hero banner is too much (it pushes content way past the fold). Reduce to a tight 12px so the subnav sits right under the banner without a yawning gap. */ @media (max-width: 760px) { :root { --top-bar-height: 12px; } } /* Top bar · reduced padding · ~0.7cm shorter than original */ .nav .nav-inner { padding-top: 8px !important; padding-bottom: 8px !important; } /* Clean zone immediately below banner · same height as top bar · NO content here. Implemented as banner margin-bottom — works regardless of next-element type (section, sub-nav, wrap, main). The banner's own gradient ends, then 86px of page-background empty space, then the next element starts. */ .hero.hero-banner-canvas { margin-bottom: var(--top-bar-height) !important; } /* Cancel out the existing top padding on the first sibling so the visible gap stays at exactly --top-bar-height (margin alone), not margin + padding. */ .hero.hero-banner-canvas + section, .hero.hero-banner-canvas + .sec, .hero.hero-banner-canvas + .pqios-graph-shell, .hero.hero-banner-canvas + main, .hero.hero-banner-canvas + .wrap { padding-top: 0 !important; /* Round 2.26 · uniform banner-separator line directly below the floating hero card · contained to match the hero card width · 56px breathing space below before the section content starts. Per Sunita: 'add this across site all pages below banner'. */ position: relative; } .hero.hero-banner-canvas + section::before, .hero.hero-banner-canvas + .sec::before, .hero.hero-banner-canvas + .pqios-graph-shell::before, .hero.hero-banner-canvas + main::before, .hero.hero-banner-canvas + .wrap::before { content: ""; display: block; width: calc(100% - 48px); max-width: 1250px; height: 1px; /* Round 2.28 · gradient separator · bold ink in center, faded at edges (per Sunita: 'bold inside dark at the edge faded') */ background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 35%, transparent) 18%, color-mix(in srgb, var(--ink) 80%, transparent) 50%, color-mix(in srgb, var(--ink) 35%, transparent) 82%, transparent 100%); margin: 0 auto 56px auto; } /* Sticky sub-nav handling · sub-nav stays sticky but appears AFTER the clean zone. Class name is .subnav (no hyphen) on the actual chapter pages — covering both. */ .hero.hero-banner-canvas + .sub-nav, .hero.hero-banner-canvas + .subnav { margin-top: 0 !important; } /* Breadcrumb sitting BELOW the banner (library subpages). The cancel rule above zeros the wrap's padding-top, so the visible gap = banner margin-bottom (86px) + crumb's own padding-top (22px) = 108px. That is the intended breathing space. */ .hero.hero-banner-canvas + .wrap.crumb-after-banner { padding-top: 0 !important; } .hero.hero-banner-canvas + .wrap.crumb-after-banner .crumb { padding-top: 28px; } /* ───────────────────────────────────────────────── Folder tab · chapter cards on 4 domain pages ONLY. Scoped to `a.pl` (anchor tag specifically) so the rule does NOT bleed into chapter detail pages where `.pl` is used as a `
` for status blocks. ───────────────────────────────────────────────── */ a.pl { position: relative !important; margin-top: 30px !important; padding: 26px 28px 24px !important; background: var(--surface) !important; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--rule)) !important; border-radius: 0 10px 10px 10px !important; display: flex !important; flex-direction: column !important; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.18s, box-shadow 0.22s !important; box-shadow: 0 4px 18px -16px color-mix(in srgb, var(--accent) 28%, transparent); } a.pl:hover { border-color: var(--accent) !important; transform: translateY(-3px) !important; box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--accent) 40%, transparent) !important; } a.pl .lab { position: absolute !important; top: -28px !important; left: -1.5px !important; background: var(--accent) !important; color: var(--bg) !important; padding: 7px 18px 6px !important; border-radius: 8px 8px 0 0 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 500 !important; margin: 0 !important; height: 28px !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; } a.pl:hover .lab { background: color-mix(in srgb, var(--accent) 90%, var(--ink)) !important; } a.pl h4 { font-family: 'Source Serif 4', serif !important; font-size: 19px !important; font-weight: 500 !important; margin: 0 0 12px !important; letter-spacing: -0.012em !important; line-height: 1.25 !important; } a.pl h4 em { font-family: 'Newsreader', serif !important; font-style: italic !important; color: var(--accent) !important; } a.pl p { font-family: 'Source Serif 4', serif !important; font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin: 0 0 10px !important; } /* ───────────────────────────────────────────────── Domain banner · the small rounded "ribbon" that sits below the main banner on each of the 4 library subpages, showing "Library / " so the reader knows this page is dedicated to that domain. Sits before the subnav. Pill-shaped · narrower than full width · centered. ───────────────────────────────────────────────── */ .domain-banner-wrap { width: 100%; display: flex; justify-content: center; padding: 28px 32px 24px; position: relative; z-index: 1; background: var(--bg); } /* Subnav domain-tag · pill highlight on chapter pages. The chapter subnav (sticky on scroll) already shows the domain name as the FIRST element. Style THAT element as a highlighted pill — no extra markup, sticks naturally with the subnav. !important needed to override the per-chapter-page legacy rules in each file's