/* WORKING ACTIVATION FIX ---------------------- The application currently emits . This build aliases both "wine" and "dark" to the futuristic blue presentation, so it works with the current header.php workflow without requiring a PHP/configuration change. */ /* ========================================================================== nx-future.css — X77/X80 advanced blue CSS layer Compatibility-safe update PURPOSE ------- This remains an additive, progressive-enhancement stylesheet. It preserves the existing selectors, PHP output, page CSS precedence, accessibility behavior, print behavior, severity semantics, and dark-theme workflow. Deployment workflow remains unchanged: 1. Keep the existing in partials/meta_seo.php. 2. Save this file as /assets/css/nx-future.css. 3. Existing $PAGE_CSS continues to load afterward and can override it. The default/no-match theme remains compatible with the existing site. The futuristic blue palette is activated by the existing data-theme="wine" default or data-theme="dark". No class names, HTML structure, form behavior, or application logic change. ========================================================================== */ /* 01 — DERIVED TOKENS */ @supports (color: color-mix(in oklab, red 50%, blue)) { :root { --nxf-accent-wash: color-mix(in oklab, var(--accent) 12%, transparent); --nxf-accent-edge: color-mix(in oklab, var(--accent) 38%, transparent); --nxf-accent-quiet: color-mix(in oklab, var(--accent) 60%, var(--muted)); --nxf-crit-wash: color-mix(in oklab, var(--crit) 14%, transparent); --nxf-warn-wash: color-mix(in oklab, var(--warn) 14%, transparent); --nxf-ok-wash: color-mix(in oklab, var(--ok) 14%, transparent); --nxf-surface-1: color-mix(in oklab, var(--panel) 92%, var(--ink)); --nxf-hairline: color-mix(in oklab, var(--line) 70%, transparent); --nxf-blue-glow: color-mix(in oklab, var(--accent) 22%, transparent); --nxf-cyan-glow: color-mix(in oklab, var(--accent-3) 18%, transparent); } } /* 02 — THEME PALETTES The futuristic treatment is explicitly attached to the existing dark theme. The light palette remains conservative and is not promoted as production-ready. */ :is([data-theme="wine"], [data-theme="dark"]) { --bg: #050814; --panel: #0B1220; --panel-2: #0E1728; --panel-3: #111D33; --line: #1A2942; --line-soft: #14213A; --line-strong: #2A4572; --ink: #F3F8FF; --ink-2: #C8D7F2; --muted: #98A8C8; --faint: #7384A6; --accent: #3BA8FF; --accent-2: #67C3FF; --accent-3: #22DDEB; --ok: #22C55E; --warn: #EAB308; --crit: #FB7185; --high: #FB923C; --info: #60A5FA; --ring-color: #67C3FF; color-scheme: dark; } /* Preserve the severity-separation correction in the default and dark themes. */ :root, :is([data-theme="wine"], [data-theme="dark"]) { --warn: #EAB308; } [data-theme="light"] { --bg: #FAFAFB; --panel: #FFFFFF; --panel-2: #F4F5F7; --panel-3: #EDEFF3; --line: #D8DCE3; --line-soft: #E6E9ED; --line-strong: #A9B1BD; --ink: #14181F; --ink-2: #39414E; --muted: #5A6472; --faint: #6B7563; --accent: #0B62D0; --accent-2: #4A5B78; --accent-3: #0E7C70; --ok: #16733A; --warn: #8A5A00; --crit: #C4283A; --high: #A84B0A; --info: #0B62D0; color-scheme: light; } /* 03 — FUTURISTIC BLUE DEPTH Decorative only. No layout dimensions or application states are changed. */ :is([data-theme="wine"], [data-theme="dark"]) body { background-color: var(--bg); background-image: radial-gradient(circle at 14% 16%, rgba(59,168,255,.10), transparent 34rem), radial-gradient(circle at 88% 12%, rgba(34,221,235,.075), transparent 30rem), linear-gradient(180deg, #050814 0%, #08101E 100%); background-attachment: fixed; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)), color-mix(in oklab, var(--panel) 96%, transparent); -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); border-color: color-mix(in oklab, var(--accent) 11%, var(--line)); box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045); } } /* Enhancement is limited to devices that genuinely support hover. */ @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card):hover { border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); box-shadow: 0 14px 40px rgba(0,0,0,.30), 0 0 30px var(--nxf-blue-glow, rgba(59,168,255,.14)), inset 0 1px 0 rgba(255,255,255,.055); transform: translateY(-2px); } } /* KPI illumination stays decorative and never intercepts input. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.an-kpis, .ax-kpi, .myact-kpis, .ai-live-grid, .ti-summary) > .card { position: relative; overflow: hidden; isolation: isolate; } :is([data-theme="wine"], [data-theme="dark"]) :where(.an-kpis, .ax-kpi, .myact-kpis, .ai-live-grid, .ti-summary) > .card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(135deg, rgba(59,168,255,.11), transparent 42%); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { :is([data-theme="wine"], [data-theme="dark"]) :where(.an-kpis h3, .ax-kpi h3) { background: linear-gradient(90deg, #8ADFFF, #3BA8FF 48%, #22DDEB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* 04 — TYPOGRAPHY */ @supports (font-size: clamp(1rem, 1vw, 2rem)) { :root { --nxf-step-0: clamp(.875rem, .83rem + .22vw, .95rem); --nxf-step-1: clamp(1.05rem, .97rem + .38vw, 1.25rem); --nxf-step-2: clamp(1.25rem, 1.10rem + .72vw, 1.65rem); --nxf-step-3: clamp(1.55rem, 1.28rem + 1.30vw, 2.35rem); } h1 { font-size: var(--nxf-step-3); } h2 { font-size: var(--nxf-step-2); } h3 { font-size: var(--nxf-step-1); } } @supports (text-wrap: balance) { h1, h2, h3, h4, .eyebrow, .badge, blockquote { text-wrap: balance; } } @supports (text-wrap: pretty) { p, li, dd, figcaption, .muted, .faint, .an-empty { text-wrap: pretty; } } .mono, td, th, .an-kpis h3, .ax-kpi h3, .ti-table td, .ax-tbl td { font-variant-numeric: tabular-nums; } .mono, code, kbd, samp { overflow-wrap: anywhere; } article p, article li { max-inline-size: 72ch; } /* 05 — JAPANESE TYPOGRAPHY */ :lang(ja) { line-break: strict; word-break: normal; overflow-wrap: anywhere; line-height: 1.85; } :lang(ja) p, :lang(ja) li, :lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-feature-settings: "palt" 1; } :lang(ja) .mono, :lang(ja) code, :lang(ja) kbd, :lang(ja) pre { font-feature-settings: normal; } @supports (word-break: auto-phrase) { :lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .eyebrow, :lang(ja) .badge { word-break: auto-phrase; } } @supports (text-spacing-trim: trim-start) { :lang(ja) { text-spacing-trim: trim-start; } } @supports (text-autospace: normal) { :lang(ja) { text-autospace: normal; } } /* 06 — CONTAINER QUERIES */ @supports (container-type: inline-size) { .an-kpis > .card, .ax-kpi > .card, .myact-kpis > .card, .ai-live-grid > .card, .ti-summary > .card { container-type: inline-size; } @container (max-width: 190px) { .card h2, .card h3 { font-size: 1.15rem; letter-spacing: -.01em; } .card p { font-size: .7rem; line-height: 1.35; } } @container (min-width: 300px) { .card h2, .card h3 { font-size: 1.75rem; } } } /* 07 — CONTENT-AWARE STATES */ @supports selector(:has(a)) { tbody tr:has(.b-crit) { background: var(--nxf-crit-wash, rgba(255,92,92,.07)); } tbody tr:has(.b-warn) { background: var(--nxf-warn-wash, rgba(232,168,28,.06)); } .panel:has(> .an-empty:only-child), .panel:has(> p.an-empty:last-child) { opacity: .82; } label:has(+ input:not(:placeholder-shown):invalid), label:has(+ textarea:not(:placeholder-shown):invalid) { color: var(--crit); } .card:has(> a:only-child) { cursor: pointer; } } :target { scroll-margin-block-start: calc(var(--topbar-h, 64px) + 16px); } /* 08 — CONTROLS, FOCUS, TABLES, SCROLLBARS */ :root { color-scheme: dark; accent-color: var(--accent); } @supports (scrollbar-width: thin) { :root { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } } @supports not (scrollbar-width: thin) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid transparent; border-radius: 999px; background-clip: content-box; } } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring-color, var(--accent)); outline-offset: 3px; border-radius: var(--r-sm, 7px); box-shadow: 0 0 0 1px var(--bg), 0 0 20px var(--nxf-blue-glow, transparent); } @supports selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } } @supports (field-sizing: content) { textarea { field-sizing: content; min-block-size: 6lh; max-block-size: 24lh; } } :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .55; } tbody tr { transition: background-color 160ms ease; } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) tbody tr:hover { background-color: color-mix(in oklab, var(--accent) 6%, transparent); } } /* 09 — MOTION */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes nxf-rise { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } } .panel, .card { animation: nxf-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 34%; } } } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } /* 10 — ACCESSIBILITY */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @media (prefers-contrast: more) { :root { --line: var(--line-strong); --line-soft: var(--line-strong); --muted: var(--ink-2); --faint: var(--ink-2); } .panel, .card, table, .badge { border-width: 1px; border-style: solid; } a { text-decoration: underline; text-underline-offset: 2px; } } @media (forced-colors: active) { .panel, .card, .badge, table, td, th, input, select, textarea, .btn { border: 1px solid CanvasText; } .badge { forced-color-adjust: none; background: Canvas; color: CanvasText; } .b-crit::before { content: "! "; } .b-warn::before { content: "* "; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } .an-kpis h3, .ax-kpi h3 { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } } .sr-only:focus, .sr-only:focus-within { position: static !important; inline-size: auto !important; block-size: auto !important; margin: 0 !important; padding: 8px 14px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: var(--r-sm, 7px); } /* 11 — PRINT Decorative blue effects are explicitly removed for reliable printing/PDF. */ @media print { :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #fff; --ink: #000; --ink-2: #1a1a1a; --muted: #333; --faint: #444; --line: #bbb; --line-soft: #ddd; --line-strong: #888; color-scheme: light; } html, body { background: #fff !important; color: #000 !important; } nav, .nav, header nav, footer, .btn, .chip, .an-range, .tf-filters, .tf-tabs, .ti-sort, [role="tablist"], .ad-slot { display: none !important; } .panel, .card { background: #fff !important; box-shadow: none !important; transform: none !important; border: 1px solid #bbb !important; break-inside: avoid; } a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 85%; word-break: break-all; color: #444; } h1, h2, h3, h4 { break-after: avoid-page; } tr, li, blockquote, figure { break-inside: avoid; } p { orphans: 3; widows: 3; } thead { display: table-header-group; } @page { margin: 16mm 14mm; } } /* DEFENSIVE DEFAULTS Deliberately layered so all existing unlayered and per-page CSS wins. */ @layer nxf-defaults { img, svg, video, canvas, iframe { max-inline-size: 100%; height: auto; } .an-tbl, .ax-tbl, .ti-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } body { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); } } /* ========================================================================== 12 FUTURE BLUE SYSTEM — OPT-IN, NON-DESTRUCTIVE -------------------------------------------------------------------------- This section targets the existing data-theme="wine" default and the explicit data-theme="dark" option. Therefore: - header.php's existing data-theme="wine" default activates the blue presentation. - NSS_THEME='dark' activates the same presentation explicitly. - No PHP configuration change is required for the current default. - No HTML, PHP, JavaScript, routing, forms, tables, or application state are changed. - Existing per-page CSS still loads later and can override these rules. ========================================================================== */ @supports (color: color-mix(in oklab, white, black)) { :is([data-theme="wine"], [data-theme="dark"]) { --nxf-grid-line: color-mix(in oklab, var(--accent) 7%, transparent); --nxf-grid-hot: color-mix(in oklab, var(--accent-3) 10%, transparent); --nxf-glass-edge: color-mix(in oklab, var(--accent) 20%, var(--line)); --nxf-glass-top: color-mix(in oklab, var(--panel) 92%, white 8%); --nxf-glass-bottom: color-mix(in oklab, var(--panel) 97%, black 3%); --nxf-focus-halo: color-mix(in oklab, var(--accent) 32%, transparent); --nxf-live-halo: color-mix(in oklab, var(--accent-3) 22%, transparent); --nxf-shadow-deep: color-mix(in oklab, black 62%, transparent); --nxf-scanline: color-mix(in oklab, var(--accent-2) 4%, transparent); } } /* Ambient technical grid. It is a background layer on body itself, avoiding pseudo-elements that could interfere with existing stacking contexts. */ @supports (background: linear-gradient(red, blue)) { :is([data-theme="wine"], [data-theme="dark"]) body { background-image: radial-gradient(circle at 12% 10%, rgba(59,168,255,.13), transparent 31rem), radial-gradient(circle at 88% 4%, rgba(34,221,235,.09), transparent 28rem), radial-gradient(circle at 54% 108%, rgba(43,95,255,.08), transparent 34rem), linear-gradient(var(--nxf-grid-line, rgba(59,168,255,.035)) 1px, transparent 1px), linear-gradient(90deg, var(--nxf-grid-line, rgba(59,168,255,.035)) 1px, transparent 1px), linear-gradient(180deg, #050814 0%, #07101d 48%, #050914 100%); background-size: auto, auto, auto, 42px 42px, 42px 42px, auto; background-position: center; background-attachment: fixed; } } /* Larger displays receive a second, wider grid rhythm. Narrow devices keep the simpler background to reduce paint work and visual density. */ @media (min-width: 900px) { @supports (background: linear-gradient(red, blue)) { :is([data-theme="wine"], [data-theme="dark"]) body { background-image: radial-gradient(circle at 12% 10%, rgba(59,168,255,.13), transparent 31rem), radial-gradient(circle at 88% 4%, rgba(34,221,235,.09), transparent 28rem), radial-gradient(circle at 54% 108%, rgba(43,95,255,.08), transparent 34rem), linear-gradient(var(--nxf-grid-hot, rgba(34,221,235,.045)) 1px, transparent 1px), linear-gradient(90deg, var(--nxf-grid-hot, rgba(34,221,235,.045)) 1px, transparent 1px), linear-gradient(var(--nxf-grid-line, rgba(59,168,255,.025)) 1px, transparent 1px), linear-gradient(90deg, var(--nxf-grid-line, rgba(59,168,255,.025)) 1px, transparent 1px), linear-gradient(180deg, #050814 0%, #07101d 48%, #050914 100%); background-size: auto, auto, auto, 168px 168px, 168px 168px, 42px 42px, 42px 42px, auto; } } } /* Surface treatment is deliberately limited to known structural components. It does not alter display, positioning, dimensions, overflow, or event flow. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background: linear-gradient(145deg, color-mix(in oklab, var(--panel) 90%, white 10%), color-mix(in oklab, var(--panel) 97%, black 3%) 58%, color-mix(in oklab, var(--panel-2) 96%, var(--accent) 4%)); border-color: var(--nxf-glass-edge, var(--line)); box-shadow: 0 22px 54px -32px var(--nxf-shadow-deep, rgba(0,0,0,.7)), 0 0 0 1px rgba(255,255,255,.018) inset, 0 1px 0 rgba(255,255,255,.055) inset; } } /* One-pixel top illumination adds depth without changing box metrics. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { position: relative; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(103,195,255,.25), transparent) top / 72% 1px no-repeat; opacity: .68; } /* Preserve controls layered within cards and panels. The decorative overlay never captures clicks, selections, hover, drag, or focus. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) > * { position: relative; } /* Precision hover is restricted to mouse/trackpad environments. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), background-color 180ms ease; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card):hover { border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); box-shadow: 0 28px 72px -38px rgba(0,0,0,.86), 0 0 34px -12px var(--nxf-focus-halo, rgba(59,168,255,.24)), 0 0 0 1px rgba(103,195,255,.055) inset, 0 1px 0 rgba(255,255,255,.075) inset; transform: translateY(-2px); } } /* Futuristic heading finish. Only decorative-capable browsers receive it. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background-image: linear-gradient(100deg, #f4f9ff 5%, #98dfff 45%, #55b7ff 70%, #43e7ee 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } /* Eyebrows and compact labels become technical metadata without changing text. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.eyebrow) { color: var(--accent-2); letter-spacing: .11em; text-transform: uppercase; text-shadow: 0 0 20px var(--nxf-focus-halo, transparent); } /* Data tables retain their existing sizing and structure. The following only improves scanability and perceived depth. */ :is([data-theme="wine"], [data-theme="dark"]) :where(table) { border-color: var(--line); background: color-mix(in oklab, var(--panel-2) 94%, transparent); } :is([data-theme="wine"], [data-theme="dark"]) :where(thead th) { background: color-mix(in oklab, var(--panel-3) 90%, var(--accent) 10%); border-color: color-mix(in oklab, var(--line) 76%, var(--accent) 24%); color: var(--ink-2); } :is([data-theme="wine"], [data-theme="dark"]) :where(tbody tr) { background-image: linear-gradient(90deg, transparent, rgba(59,168,255,.018), transparent); } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) :where(tbody tr):hover { background-color: color-mix(in oklab, var(--accent) 7%, transparent); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 75%, transparent); } } /* Inputs keep native semantics and application wiring. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(input, select, textarea) { background-color: color-mix(in oklab, var(--panel-2) 92%, black 8%); border-color: color-mix(in oklab, var(--line) 84%, var(--accent) 16%); } :is([data-theme="wine"], [data-theme="dark"]) :where(input, select, textarea):hover:not(:disabled) { border-color: color-mix(in oklab, var(--line) 58%, var(--accent) 42%); } } /* Keep the native outline as a reliable accessibility signal, then add a halo. */ :is([data-theme="wine"], [data-theme="dark"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--ring-color, var(--accent)); box-shadow: 0 0 0 1px var(--bg), 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent), 0 0 28px var(--nxf-focus-halo, rgba(59,168,255,.24)); } /* Buttons remain driven by their existing classes. This only enhances buttons that already identify themselves as .btn. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) .btn { border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); box-shadow: 0 8px 22px -16px var(--nxf-focus-halo, transparent); } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) .btn:hover:not(:disabled) { border-color: color-mix(in oklab, var(--accent) 58%, var(--line)); box-shadow: 0 10px 28px -16px var(--nxf-focus-halo, transparent), 0 0 20px -12px var(--nxf-live-halo, transparent); } } } /* Severity badges preserve their source token and meaning. The enhancement adds shape and edge clarity but never remaps severity colours. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(.badge, .b-crit, .b-warn) { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } :is([data-theme="wine"], [data-theme="dark"]) .b-crit { border-color: color-mix(in oklab, var(--crit) 56%, var(--line)); background-color: color-mix(in oklab, var(--crit) 14%, var(--panel)); } :is([data-theme="wine"], [data-theme="dark"]) .b-warn { border-color: color-mix(in oklab, var(--warn) 56%, var(--line)); background-color: color-mix(in oklab, var(--warn) 13%, var(--panel)); } } /* KPI cards receive a quiet sensor-like illumination, never an infinite pulse. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.an-kpis, .ax-kpi, .myact-kpis, .ai-live-grid, .ti-summary) > .card { background-image: radial-gradient(circle at 100% 0%, rgba(67,231,238,.10), transparent 44%), linear-gradient(145deg, rgba(59,168,255,.055), transparent 48%); } /* Optional marker animation only for status elements that already expose a title containing Live/live. No class or JavaScript state is invented. */ @supports selector([title*="Live" i]) { @media (prefers-reduced-motion: no-preference) { @keyframes nxf-live-breathe { 0%, 100% { box-shadow: 0 0 0 0 var(--nxf-live-halo, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } } :is([data-theme="wine"], [data-theme="dark"]) :where(.badge, .chip)[title*="Live" i] { animation: nxf-live-breathe 2.8s ease-in-out infinite; } } } /* View-transition polish remains short and functional. */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation-duration: 150ms; animation-timing-function: ease-in; } ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); } } /* Performance guardrails. Expensive fixed backgrounds and blur are reduced on constrained devices without changing content or controls. */ @media (max-width: 700px), (update: slow) { :is([data-theme="wine"], [data-theme="dark"]) body { background-attachment: scroll; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Accessibility always wins over the visual system. */ @media (prefers-reduced-transparency: reduce) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, input, select, textarea, table) { box-shadow: none; } :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; text-shadow: none; } } @media (forced-colors: active) { :is([data-theme="wine"], [data-theme="dark"]) body, :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, table, thead th, tbody tr) { background: Canvas; box-shadow: none; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: none; } } /* Print is intentionally authoritative. It removes every decorative effect added by this section while preserving the original printable workflow. */ @media print { :is([data-theme="wine"], [data-theme="dark"]) body, :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, table, thead th, tbody tr) { background: #fff !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: none !important; } :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background: none !important; color: #000 !important; -webkit-text-fill-color: currentColor !important; } } /* ========================================================================== 13 ULTRA RADIANT BLUE — HIGH-FIDELITY OPT-IN FINISH -------------------------------------------------------------------------- Presentation only. This section supports the application's current data-theme="wine" output and the explicit data-theme="dark" option. It does not change: - application logic, routing, requests, forms, or validation; - HTML structure, element order, dimensions, or page workflow; - severity meaning or source tokens; - keyboard, reduced-motion, forced-colors, or print behavior; - $PAGE_CSS precedence, because this remains in the same global file. ========================================================================== */ @supports (color: color-mix(in oklab, white, black)) { :is([data-theme="wine"], [data-theme="dark"]) { /* High-radiance blue spectrum. */ --accent: #269DFF; --accent-2: #73C9FF; --accent-3: #21E6FF; --info: #54B6FF; --ring-color: #62C5FF; /* Deep navy surfaces retain strong text contrast. */ --bg: #020611; --panel: #071326; --panel-2: #08182D; --panel-3: #0B203B; --line: #15355A; --line-soft: #0E294A; --line-strong: #3478B8; --ink: #F5FAFF; --ink-2: #CBE6FF; --muted: #91B5D8; --faint: #7399BF; /* Derived illumination and surface tokens. */ --nxf-electric: #087CFF; --nxf-laser: #21E6FF; --nxf-ice: #A7EBFF; --nxf-blue-veil: color-mix(in oklab, var(--accent) 13%, transparent); --nxf-cyan-veil: color-mix(in oklab, var(--accent-3) 10%, transparent); --nxf-edge-bright: color-mix(in oklab, var(--accent-2) 52%, var(--line)); --nxf-electric-glow: color-mix(in oklab, var(--accent) 38%, transparent); --nxf-laser-glow: color-mix(in oklab, var(--accent-3) 30%, transparent); --nxf-panel-solid: color-mix(in oklab, var(--panel) 96%, #0F5DA5 4%); --nxf-control-solid: color-mix(in oklab, var(--panel-2) 95%, #087CFF 5%); color-scheme: dark; } } /* High-definition ambient field. All graphics remain on the body background, so no overlay can block clicks, selections, dragging, menus, or dialogs. */ @supports (background: linear-gradient(red, blue)) { :is([data-theme="wine"], [data-theme="dark"]) body { background-color: #020611; background-image: radial-gradient(ellipse 46rem 32rem at 8% -4%, rgba(38,157,255,.24), transparent 68%), radial-gradient(ellipse 38rem 30rem at 96% 2%, rgba(33,230,255,.15), transparent 70%), radial-gradient(ellipse 54rem 26rem at 50% 112%, rgba(8,124,255,.14), transparent 72%), linear-gradient(rgba(115,201,255,.040) 1px, transparent 1px), linear-gradient(90deg, rgba(115,201,255,.040) 1px, transparent 1px), linear-gradient(rgba(33,230,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(33,230,255,.022) 1px, transparent 1px), linear-gradient(180deg, #020611 0%, #041024 48%, #020713 100%); background-size: auto, auto, auto, 40px 40px, 40px 40px, 160px 160px, 160px 160px, auto; background-position: center; background-attachment: fixed; } } /* Premium panel construction. No layout property is changed. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background: radial-gradient(circle at 100% 0%, var(--nxf-cyan-veil), transparent 38%), radial-gradient(circle at 0% 100%, var(--nxf-blue-veil), transparent 42%), linear-gradient(145deg, color-mix(in oklab, var(--panel) 88%, white 12%) 0%, color-mix(in oklab, var(--panel) 98%, black 2%) 50%, color-mix(in oklab, var(--panel-2) 94%, var(--accent) 6%) 100%); border-color: color-mix(in oklab, var(--accent) 25%, var(--line)); box-shadow: 0 26px 70px -42px rgba(0,0,0,.96), 0 0 34px -24px var(--nxf-electric-glow), inset 0 1px 0 rgba(255,255,255,.085), inset 1px 0 0 rgba(115,201,255,.025), inset -1px 0 0 rgba(33,230,255,.020); } } /* Luminous perimeter, fully non-interactive. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .92; background: linear-gradient(90deg, transparent 6%, rgba(167,235,255,.58) 46%, rgba(33,230,255,.42) 58%, transparent 94%) top / 78% 1px no-repeat, linear-gradient(180deg, rgba(38,157,255,.24), transparent 30%, transparent 72%, rgba(33,230,255,.11)) left / 1px 100% no-repeat, linear-gradient(180deg, rgba(33,230,255,.14), transparent 38%, transparent) right / 1px 76% no-repeat; } /* Responsive glass is progressive and removed on constrained devices below. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } } /* Precision hover has no effect on touch-only devices or reduced-motion users. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card):hover { border-color: var(--nxf-edge-bright, var(--accent)); transform: translateY(-3px); box-shadow: 0 34px 86px -46px rgba(0,0,0,.98), 0 0 40px -19px var(--nxf-electric-glow), 0 0 22px -14px var(--nxf-laser-glow), inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 28px rgba(38,157,255,.025); } } /* High-rank blue typography. Text remains selectable and semantic. */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background-image: linear-gradient(96deg, #FFFFFF 0%, #C9F0FF 24%, #73C9FF 52%, #269DFF 73%, #21E6FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(38,157,255,.16)); } } :is([data-theme="wine"], [data-theme="dark"]) :where(.eyebrow) { color: var(--accent-2); letter-spacing: .14em; text-shadow: 0 0 12px rgba(38,157,255,.20), 0 0 24px rgba(33,230,255,.08); } /* KPI sensor surfaces. Existing values, links, and click targets are untouched. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(.an-kpis, .ax-kpi, .myact-kpis, .ai-live-grid, .ti-summary) > .card { background: radial-gradient(circle at 88% 10%, rgba(33,230,255,.17), transparent 32%), linear-gradient(135deg, rgba(38,157,255,.12), transparent 46%), var(--nxf-panel-solid); border-color: color-mix(in oklab, var(--accent) 34%, var(--line)); } } /* Tables: sharper hierarchy and a blue scan line on precision hover. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(table) { background-color: color-mix(in oklab, var(--panel-2) 97%, black 3%); border-color: color-mix(in oklab, var(--accent) 18%, var(--line)); box-shadow: inset 0 1px 0 rgba(115,201,255,.035); } :is([data-theme="wine"], [data-theme="dark"]) :where(thead th) { background: linear-gradient(180deg, color-mix(in oklab, var(--panel-3) 82%, var(--accent) 18%), color-mix(in oklab, var(--panel-3) 94%, black 6%)); border-color: color-mix(in oklab, var(--accent) 28%, var(--line)); color: #D8EDFF; } } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) :where(tbody tr):hover { background-color: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 rgba(115,201,255,.035), inset 0 -1px 0 rgba(33,230,255,.025); } } /* Controls retain native behavior, names, values, and validation. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(input, select, textarea) { background: linear-gradient(180deg, rgba(115,201,255,.025), transparent), var(--nxf-control-solid); border-color: color-mix(in oklab, var(--accent) 24%, var(--line)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px -20px rgba(0,0,0,.9); } :is([data-theme="wine"], [data-theme="dark"]) :where(input, select, textarea):hover:not(:disabled) { border-color: color-mix(in oklab, var(--accent) 54%, var(--line)); } } :is([data-theme="wine"], [data-theme="dark"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring-color, var(--accent)); outline-offset: 3px; box-shadow: 0 0 0 1px #020611, 0 0 0 5px rgba(38,157,255,.22), 0 0 34px rgba(38,157,255,.34), 0 0 18px rgba(33,230,255,.16); } /* Existing .btn behavior is preserved. Enhancement is purely visual. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) .btn { border-color: color-mix(in oklab, var(--accent) 34%, var(--line)); box-shadow: 0 12px 30px -22px var(--nxf-electric-glow), inset 0 1px 0 rgba(255,255,255,.06); } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) .btn:hover:not(:disabled) { border-color: color-mix(in oklab, var(--accent-3) 38%, var(--accent)); box-shadow: 0 16px 36px -20px var(--nxf-electric-glow), 0 0 24px -12px var(--nxf-laser-glow), inset 0 1px 0 rgba(255,255,255,.09); } } } /* Scrollbars use the same radiant spectrum with no geometry change. */ @supports (scrollbar-color: auto) { :is([data-theme="wine"], [data-theme="dark"]) { scrollbar-color: color-mix(in oklab, var(--accent) 48%, var(--line-strong)) transparent; } } /* Only animate explicitly live-labelled status chips. */ @supports selector([title*="Live" i]) { @media (prefers-reduced-motion: no-preference) { @keyframes nxf-ultra-live { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(33,230,255,0); } 50% { filter: brightness(1.10); box-shadow: 0 0 18px -7px rgba(33,230,255,.56); } } :is([data-theme="wine"], [data-theme="dark"]) :where(.badge, .chip)[title*="Live" i] { animation: nxf-ultra-live 2.6s ease-in-out infinite; } } } /* Mobile and slow-update displays receive the same palette with cheaper paint. */ @media (max-width: 700px), (update: slow) { :is([data-theme="wine"], [data-theme="dark"]) body { background-attachment: scroll; background-size: auto, auto, auto, 48px 48px, 48px 48px, auto, auto, auto; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--panel); } } /* Accessibility modes override every decorative decision above. */ @media (prefers-reduced-transparency: reduce) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, table, input, select, textarea) { box-shadow: none; border-color: var(--line-strong); } :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; filter: none; } } @media (forced-colors: active) { :is([data-theme="wine"], [data-theme="dark"]) body, :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, table, thead th, tbody tr) { background: Canvas; background-image: none; box-shadow: none; filter: none; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: none; } } /* Print remains clean, monochrome, economical, and authoritative. */ @media print { :is([data-theme="wine"], [data-theme="dark"]) body, :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card, table, thead th, tbody tr, input, select, textarea) { background: #fff !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { content: none !important; } :is([data-theme="wine"], [data-theme="dark"]) :where(h1, h2, .an-kpis h3, .ax-kpi h3) { background: none !important; color: #000 !important; -webkit-text-fill-color: currentColor !important; } } /* ========================================================================== 14 AUDIT CORRECTIONS AND MISSING COVERAGE -------------------------------------------------------------------------- This section closes gaps found during the compatibility and visual audit. Corrections: 1. Avoid changing the positioning context of every direct child inside .panel and .card. That could affect existing absolute descendants. 2. Keep decorative panel light below interactive content. 3. Add fallbacks for browsers without color-mix or backdrop-filter. 4. Cover navigation, links, dialogs, code, badges, empty states, selection, autofill, placeholders, progress controls, details, and sticky headers. 5. Preserve severity colors, keyboard focus, reduced motion, high contrast, forced colors, print output, and page-level CSS precedence. ========================================================================== */ /* SAFETY CORRECTION Earlier enhancement rules applied position:relative to every direct child of a panel/card. Restore the normal positioning model unless existing CSS gives a child its own position. This avoids changing containing blocks for menus, overlays, badges, or absolutely positioned application controls. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) > * { position: revert; } /* Put the decorative perimeter below content without requiring child rewrites. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { isolation: isolate; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card)::after { z-index: -1; } /* Solid fallbacks first. Advanced declarations later can replace them. */ :is([data-theme="wine"], [data-theme="dark"]) { --bg: #020611; --panel: #071326; --panel-2: #08182D; --panel-3: #0B203B; --line: #15355A; --line-soft: #0E294A; --line-strong: #3478B8; --ink: #F5FAFF; --ink-2: #CBE6FF; --muted: #91B5D8; --faint: #7399BF; --accent: #269DFF; --accent-2: #73C9FF; --accent-3: #21E6FF; --info: #54B6FF; --ring-color: #62C5FF; color-scheme: dark; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { background-color: var(--panel); border-color: #1C4775; } /* Text selection remains obvious against the deep-blue background. */ :is([data-theme="wine"], [data-theme="dark"]) ::selection { color: #FFFFFF; background: #096ECF; text-shadow: none; } /* Links receive a visible state without forcing underlines onto buttons/cards. */ :is([data-theme="wine"], [data-theme="dark"]) :where(article, main, .panel, .card) a:not(.btn):not([class*="button"]) { color: var(--accent-2); text-decoration-color: rgba(115,201,255,.42); text-underline-offset: .18em; text-decoration-thickness: .08em; } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) :where(article, main, .panel, .card) a:not(.btn):not([class*="button"]):hover { color: #B8EEFF; text-decoration-color: var(--accent-3); text-shadow: 0 0 16px rgba(38,157,255,.22); } } /* Navigation and sticky application chrome were previously uncovered. */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) :where(header, .topbar, .nav, nav, .sidebar) { border-color: color-mix(in oklab, var(--accent) 18%, var(--line)); } :is([data-theme="wine"], [data-theme="dark"]) :where(header, .topbar, .nav)[class*="sticky"], :is([data-theme="wine"], [data-theme="dark"]) :where(header, .topbar, .nav):has(+ main) { background-color: color-mix(in oklab, var(--bg) 89%, transparent); } } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is([data-theme="wine"], [data-theme="dark"]) :where(header, .topbar, .nav)[class*="sticky"] { -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); } } /* Navigation interaction states only target actual navigation links. */ :is([data-theme="wine"], [data-theme="dark"]) :where(nav, .nav, .sidebar) a[aria-current="page"], :is([data-theme="wine"], [data-theme="dark"]) :where(nav, .nav, .sidebar) a.active { color: #EAF8FF; background-color: rgba(38,157,255,.13); box-shadow: inset 3px 0 0 var(--accent); } /* Placeholders and autofill now match the native dark controls. */ :is([data-theme="wine"], [data-theme="dark"]) :where(input, textarea)::placeholder { color: var(--faint); opacity: 1; } :is([data-theme="wine"], [data-theme="dark"]) :where(input, textarea):-webkit-autofill, :is([data-theme="wine"], [data-theme="dark"]) :where(input, textarea):-webkit-autofill:hover, :is([data-theme="wine"], [data-theme="dark"]) :where(input, textarea):-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 1000px #08182D inset; transition: background-color 9999s ease-out 0s; } /* Invalid state reinforces existing validation without showing errors early. */ :is([data-theme="wine"], [data-theme="dark"]) :where(input, textarea):not(:placeholder-shown):invalid { border-color: var(--crit); box-shadow: 0 0 0 3px rgba(251,113,133,.10); } /* Native progress and meter controls were not themed. */ :is([data-theme="wine"], [data-theme="dark"]) :where(progress, meter) { accent-color: var(--accent); } :is([data-theme="wine"], [data-theme="dark"]) progress { color: var(--accent); background-color: var(--panel-2); border-radius: 999px; overflow: hidden; } :is([data-theme="wine"], [data-theme="dark"]) progress::-webkit-progress-bar { background-color: var(--panel-2); } :is([data-theme="wine"], [data-theme="dark"]) progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--accent-3)); } :is([data-theme="wine"], [data-theme="dark"]) progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--accent-3)); } /* Dialogs and popovers keep their native behavior and gain correct surfaces. */ :is([data-theme="wine"], [data-theme="dark"]) :where(dialog, [popover]) { color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 34px rgba(38,157,255,.13); } :is([data-theme="wine"], [data-theme="dark"]) dialog::backdrop { background: rgba(1,5,14,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Details/summary receives a clear expandable affordance. */ :is([data-theme="wine"], [data-theme="dark"]) details { border-color: var(--line); } :is([data-theme="wine"], [data-theme="dark"]) summary { cursor: pointer; } :is([data-theme="wine"], [data-theme="dark"]) details[open] > summary { color: var(--accent-2); border-color: var(--line-strong); } /* Code and preformatted output now fit the interface and remain scrollable. */ :is([data-theme="wine"], [data-theme="dark"]) :where(code, kbd, samp) { color: #BCEEFF; background-color: rgba(38,157,255,.09); border: 1px solid rgba(115,201,255,.16); border-radius: .35em; } :is([data-theme="wine"], [data-theme="dark"]) pre { color: #CDEBFF; background: #030B18; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(115,201,255,.035); overflow: auto; scrollbar-gutter: stable; } :is([data-theme="wine"], [data-theme="dark"]) pre :where(code, samp) { background: transparent; border: 0; } /* Empty states and separators now participate in the visual hierarchy. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.an-empty, .empty, [data-empty="true"]) { color: var(--muted); border-color: var(--line-soft); background-color: rgba(38,157,255,.025); } :is([data-theme="wine"], [data-theme="dark"]) hr { border: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } /* Generic badge/chip enhancement remains neutral. Severity-specific rules win. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.badge, .chip) { border-color: rgba(115,201,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); } /* Images and figures get a subtle frame only when already inside content. Logos and navigation imagery are intentionally excluded. */ :is([data-theme="wine"], [data-theme="dark"]) :where(article, main) figure > :where(img, video, canvas) { border: 1px solid var(--line); border-radius: var(--r-sm, 7px); background: var(--panel-2); } :is([data-theme="wine"], [data-theme="dark"]) figcaption { color: var(--muted); } /* Scroll anchoring and overflow stability for data-heavy pages. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.an-tbl, .ax-tbl, .ti-table) { scrollbar-gutter: stable; overscroll-behavior-inline: contain; } /* Feature query fallback for browsers without :has(). */ @supports not selector(:has(*)) { :is([data-theme="wine"], [data-theme="dark"]) :where(header, .topbar, .nav)[class*="sticky"] { background-color: rgba(2,6,17,.94); } } /* Reduced-data users receive a simpler background and no ambient glows. */ @media (prefers-reduced-data: reduce) { :is([data-theme="wine"], [data-theme="dark"]) body { background-image: linear-gradient(180deg, #020611, #041024 50%, #020713); background-attachment: scroll; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 30px rgba(0,0,0,.24); } } /* Ensure print and forced-colors remain authoritative over added coverage. */ @media (forced-colors: active) { :is([data-theme="wine"], [data-theme="dark"]) :where(dialog, [popover], code, kbd, samp, pre, progress, .badge, .chip) { color: CanvasText; background: Canvas; border: 1px solid CanvasText; box-shadow: none; text-shadow: none; } :is([data-theme="wine"], [data-theme="dark"]) dialog::backdrop { background: Canvas; opacity: .7; } } @media print { :is([data-theme="wine"], [data-theme="dark"]) :where(dialog, [popover], code, kbd, samp, pre, .badge, .chip, .an-empty, .empty) { color: #000 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; } :is([data-theme="wine"], [data-theme="dark"]) ::selection { color: #000; background: transparent; } } /* ========================================================================== 15 WORLD-CLASS BLUE DESIGN SYSTEM — FINAL POLISH -------------------------------------------------------------------------- A controlled visual hierarchy is more premium than applying maximum glow to every component. This final layer uses four roles: Foundation deep navy-black surfaces Primary electric blue for actions and selection Secondary cyan for live/data emphasis Premium restrained violet for exceptional highlights only All rules remain presentation-only and support both the current "wine" attribute and the explicit "dark" attribute. ========================================================================== */ :is([data-theme="wine"], [data-theme="dark"]) { /* Core brand spectrum */ --nxf-blue-50: #EFF8FF; --nxf-blue-100: #D9EFFF; --nxf-blue-200: #B8E1FF; --nxf-blue-300: #82CBFF; --nxf-blue-400: #46B0FF; --nxf-blue-500: #168CFF; --nxf-blue-600: #0875E8; --nxf-blue-700: #075DB9; --nxf-cyan-400: #22DDF2; --nxf-cyan-500: #08BED5; --nxf-indigo-400: #7C8CFF; --nxf-violet-400: #A78BFA; /* Neutral spectrum */ --nxf-navy-950: #01040C; --nxf-navy-900: #030913; --nxf-navy-850: #06101E; --nxf-navy-800: #08182B; --nxf-navy-750: #0A1E35; --nxf-slate-500: #799DBE; --nxf-slate-300: #BAD6ED; --nxf-white: #F6FBFF; /* Semantic aliases used by the existing application */ --bg: var(--nxf-navy-950); --panel: var(--nxf-navy-850); --panel-2: var(--nxf-navy-900); --panel-3: var(--nxf-navy-800); --line: #143653; --line-soft: #0D2943; --line-strong: #327AB3; --ink: var(--nxf-white); --ink-2: var(--nxf-slate-300); --muted: #94B4CE; --faint: var(--nxf-slate-500); --accent: var(--nxf-blue-500); --accent-2: var(--nxf-blue-300); --accent-3: var(--nxf-cyan-400); --info: var(--nxf-blue-400); --ring-color: var(--nxf-blue-300); /* Status colors remain distinct from the blue brand system */ --ok: #35C978; --warn: #F2C94C; --high: #FF944D; --crit: #FF647C; /* Reusable elevation */ --nxf-shadow-1: 0 8px 24px rgba(0,0,0,.24); --nxf-shadow-2: 0 18px 52px rgba(0,0,0,.34); --nxf-shadow-3: 0 32px 90px rgba(0,0,0,.46); --nxf-ring: 0 0 0 1px var(--bg), 0 0 0 4px rgba(70,176,255,.27); color-scheme: dark; } /* The page background is deliberately quiet. Components carry the detail. */ :is([data-theme="wine"], [data-theme="dark"]) body { color: var(--ink); background-color: var(--bg); background-image: radial-gradient(48rem 34rem at 7% -8%, rgba(22,140,255,.19), transparent 68%), radial-gradient(38rem 28rem at 96% 0%, rgba(34,221,242,.105), transparent 72%), radial-gradient(46rem 25rem at 52% 110%, rgba(124,140,255,.075), transparent 72%), linear-gradient(rgba(130,203,255,.030) 1px, transparent 1px), linear-gradient(90deg, rgba(130,203,255,.030) 1px, transparent 1px), linear-gradient(180deg, #01040C 0%, #030A16 52%, #01050D 100%); background-size: auto, auto, auto, 48px 48px, 48px 48px, auto; } /* Premium surface hierarchy */ @supports (background: color-mix(in oklab, black, white)) { :is([data-theme="wine"], [data-theme="dark"]) .panel { background: linear-gradient(145deg, color-mix(in oklab, var(--panel) 94%, white 6%), color-mix(in oklab, var(--panel) 98%, black 2%)); border-color: color-mix(in oklab, var(--accent) 18%, var(--line)); box-shadow: var(--nxf-shadow-2), inset 0 1px 0 rgba(255,255,255,.055); } :is([data-theme="wine"], [data-theme="dark"]) .card { background: radial-gradient(circle at 100% 0%, rgba(34,221,242,.055), transparent 36%), linear-gradient(145deg, color-mix(in oklab, var(--panel) 92%, white 8%), color-mix(in oklab, var(--panel-2) 95%, var(--accent) 5%)); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); box-shadow: var(--nxf-shadow-1), inset 0 1px 0 rgba(255,255,255,.065); } } /* Selected, current, and pressed states */ :is([data-theme="wine"], [data-theme="dark"]) :where([aria-selected="true"], [aria-current="page"], [aria-pressed="true"], .is-active, .active) { border-color: rgba(70,176,255,.48); } :is([data-theme="wine"], [data-theme="dark"]) :where([role="tab"][aria-selected="true"], .tf-tabs .active) { color: #EAF8FF; background: rgba(22,140,255,.13); box-shadow: inset 0 -2px 0 var(--accent), 0 6px 18px -14px rgba(22,140,255,.8); } :is([data-theme="wine"], [data-theme="dark"]) :where([aria-pressed="true"], .btn.active) { background: rgba(22,140,255,.18); box-shadow: inset 0 0 0 1px rgba(130,203,255,.20); } /* Primary buttons, when the codebase already marks them as primary */ :is([data-theme="wine"], [data-theme="dark"]) :where(.btn-primary, .btn.primary, button.primary, [data-variant="primary"]) { color: #FFFFFF; background: linear-gradient(135deg, var(--nxf-blue-400), var(--nxf-blue-600)); border-color: var(--nxf-blue-300); box-shadow: 0 12px 28px -16px rgba(22,140,255,.90), inset 0 1px 0 rgba(255,255,255,.20); } @media (hover: hover) and (pointer: fine) { :is([data-theme="wine"], [data-theme="dark"]) :where(.btn-primary, .btn.primary, button.primary, [data-variant="primary"]):hover:not(:disabled) { background: linear-gradient(135deg, #59BCFF, #0875E8); border-color: #B8E1FF; box-shadow: 0 16px 36px -15px rgba(22,140,255,.95), 0 0 24px -16px rgba(34,221,242,.9); } } /* Destructive actions remain red and cannot be mistaken for primary actions. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.btn-danger, .btn.danger, button.danger, [data-variant="danger"]) { color: #FFFFFF; background: linear-gradient(135deg, #E94E67, #B92743); border-color: #FF8A9C; } /* Disabled state preserves legibility while clearly removing emphasis. */ :is([data-theme="wine"], [data-theme="dark"]) :where(button, input, select, textarea, .btn):disabled, :is([data-theme="wine"], [data-theme="dark"]) [aria-disabled="true"] { color: #7893AA; filter: saturate(.45); box-shadow: none; } /* Tooltips and compact floating labels */ :is([data-theme="wine"], [data-theme="dark"]) :where([role="tooltip"], .tooltip) { color: #EDF9FF; background: #061425; border: 1px solid #2B6E9F; box-shadow: var(--nxf-shadow-2), 0 0 22px rgba(22,140,255,.11); } /* Toasts and notification surfaces */ :is([data-theme="wine"], [data-theme="dark"]) :where([role="status"], [role="alert"], .toast, .notification) { color: var(--ink); background: rgba(6,16,30,.96); border: 1px solid var(--line-strong); box-shadow: var(--nxf-shadow-3); } :is([data-theme="wine"], [data-theme="dark"]) :where([role="alert"], .toast.error, .notification.error) { border-inline-start: 3px solid var(--crit); } :is([data-theme="wine"], [data-theme="dark"]) :where(.toast.success, .notification.success) { border-inline-start: 3px solid var(--ok); } :is([data-theme="wine"], [data-theme="dark"]) :where(.toast.warning, .notification.warning) { border-inline-start: 3px solid var(--warn); } /* Skeleton/loading coverage only affects elements explicitly marked as loading. */ @keyframes nxf-skeleton-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } } @media (prefers-reduced-motion: no-preference) { :is([data-theme="wine"], [data-theme="dark"]) :where(.skeleton, [data-loading="true"] .skeleton) { color: transparent; background-image: linear-gradient(100deg, rgba(21,53,90,.46) 20%, rgba(70,176,255,.18) 38%, rgba(34,221,242,.11) 50%, rgba(21,53,90,.46) 68%); background-size: 220% 100%; animation: nxf-skeleton-sweep 1.55s linear infinite; } } /* Application-friendly chart palette tokens. Existing chart libraries can opt in. */ :is([data-theme="wine"], [data-theme="dark"]) { --chart-1: #46B0FF; --chart-2: #22DDF2; --chart-3: #7C8CFF; --chart-4: #35C978; --chart-5: #F2C94C; --chart-6: #FF944D; --chart-7: #A78BFA; --chart-grid: rgba(148,180,206,.16); --chart-axis: #94B4CE; } /* SVGs that already use currentColor inherit the correct blue hierarchy. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.icon, [data-icon], button svg, a svg) { color: currentColor; } /* Blockquotes and callouts */ :is([data-theme="wine"], [data-theme="dark"]) blockquote { color: var(--ink-2); background: rgba(22,140,255,.045); border-inline-start: 3px solid var(--accent); } :is([data-theme="wine"], [data-theme="dark"]) :where(.callout, .notice, .info-box) { color: var(--ink-2); background: rgba(22,140,255,.055); border-color: rgba(70,176,255,.28); } /* Dates, marks, abbreviations and keyboard hints */ :is([data-theme="wine"], [data-theme="dark"]) mark { color: #06101E; background: #82CBFF; } :is([data-theme="wine"], [data-theme="dark"]) abbr[title] { text-decoration-color: var(--accent-2); text-underline-offset: .2em; } :is([data-theme="wine"], [data-theme="dark"]) kbd { color: #EAF8FF; background: linear-gradient(180deg, #102C48, #071525); border-color: #3478B8; box-shadow: 0 2px 0 #030913, inset 0 1px 0 rgba(255,255,255,.08); } /* Focus-within helps users identify the active form region. */ @supports selector(:focus-within) { :is([data-theme="wine"], [data-theme="dark"]) :where(.field, .form-group, label):focus-within { color: var(--ink-2); } } /* Prevent glow overload inside nested cards/panels. */ :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) :where(.panel, .card) { box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 22px rgba(0,0,0,.18); } /* Ultra-wide displays keep the visual field centered and controlled. */ @media (min-width: 1800px) { :is([data-theme="wine"], [data-theme="dark"]) body { background-size: auto, auto, auto, 56px 56px, 56px 56px, auto; } } /* OLED-friendly mode for users requesting reduced brightness. */ @media (prefers-contrast: less) { :is([data-theme="wine"], [data-theme="dark"]) { --bg: #00030A; --panel: #05101D; } :is([data-theme="wine"], [data-theme="dark"]) :where(.panel, .card) { box-shadow: 0 12px 34px rgba(0,0,0,.28); } } /* Accessibility and print remain the final authority. */ @media (prefers-reduced-motion: reduce) { :is([data-theme="wine"], [data-theme="dark"]) .skeleton { animation: none; background: var(--line-soft); } } @media (forced-colors: active) { :is([data-theme="wine"], [data-theme="dark"]) :where(.btn-primary, .btn-danger, [role="tooltip"], .tooltip, .toast, .notification, blockquote, .callout) { color: CanvasText; background: Canvas; border: 1px solid CanvasText; box-shadow: none; } } @media print { :is([data-theme="wine"], [data-theme="dark"]) :where(.btn-primary, .btn-danger, [role="tooltip"], .tooltip, .toast, .notification, blockquote, .callout, mark, kbd) { color: #000 !important; background: #fff !important; box-shadow: none !important; text-shadow: none !important; } }