/*
* Material Design 3 foundation (dark scheme) + ARC brand mapping.
* Primary = brand teal #03dac5
* Tertiary = triadic purple family #9000c9 → #c96bff
* Surfaces keep liquid-glass expression while roles follow M3 hierarchy.
* Spec: https://m3.material.io
*/
:root {
/* —— Brand anchors —— */
--arc-brand: #03dac5;
--arc-brand-rgb: 3, 218, 197;
--arc-brand-soft: #8ff8ea;
--arc-purple-deep: #9000c9;
--arc-purple-deep-rgb: 144, 0, 201;
--arc-series-main: #c96bff;
--arc-series-main-rgb: 201, 107, 255;
--arc-purple-bright: #d9a0ff;
--arc-purple-bright-rgb: 217, 160, 255;
--arc-purple-dim: #a84de6;
--arc-purple-soft: rgba(144, 0, 201, 0.1);
--arc-purple-edge: rgba(201, 107, 255, 0.4);
--arc-purple-glow: 0 0 18px rgba(201, 107, 255, 0.12);
--arc-purple-fill: rgba(201, 107, 255, 0.5);
--arc-constructive: #32c99a;
--arc-constructive-rgb: 50, 201, 154;
--arc-adverse: #d95c9f;
--arc-adverse-rgb: 217, 92, 159;
--arc-zone-sg: #32c99a;
--arc-zone-sg-rgb: 50, 201, 154;
--arc-zone-sc: #d95c9f;
--arc-zone-sc-rgb: 217, 92, 159;
/* —— M3 Color scheme (dark) —— */
--md-sys-color-primary: #03dac5;
--md-sys-color-on-primary: #003731;
--md-sys-color-primary-container: #005048;
--md-sys-color-on-primary-container: #70f7e6;
--md-sys-color-secondary: #b1ccc7;
--md-sys-color-on-secondary: #1c3532;
--md-sys-color-secondary-container: #324b48;
--md-sys-color-on-secondary-container: #cce8e3;
--md-sys-color-tertiary: #c96bff;
--md-sys-color-on-tertiary: #3b0062;
--md-sys-color-tertiary-container: #5c008f;
--md-sys-color-on-tertiary-container: #d9a0ff;
--md-sys-color-error: #d95c9f;
--md-sys-color-on-error: #3d0022;
--md-sys-color-error-container: #681044;
--md-sys-color-on-error-container: #ffd8e8;
--md-sys-color-background: #0a1416;
--md-sys-color-on-background: #dce4e2;
--md-sys-color-surface: #0a1416;
--md-sys-color-on-surface: #e8f2f0;
--md-sys-color-on-surface-variant: #b9cac6;
--md-sys-color-surface-variant: #3a4a48;
--md-sys-color-outline: #849490;
--md-sys-color-outline-variant: #3a4a48;
--md-sys-color-inverse-surface: #e8f2f0;
--md-sys-color-inverse-on-surface: #1b2627;
--md-sys-color-inverse-primary: #006a60;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #03dac5;
/* Surface containers (tonal elevation ladder) */
--md-sys-color-surface-container-lowest: #050d0e;
--md-sys-color-surface-container-low: #121c1e;
--md-sys-color-surface-container: #162022;
--md-sys-color-surface-container-high: #202a2c;
--md-sys-color-surface-container-highest: #2b3537;
/* Semantic aliases used by site CSS */
--md-sys-color-success: #32c99a;
--md-sys-color-on-success: #00382a;
--md-sys-color-warning: #ffd479;
--md-sys-color-on-warning: #3d2e00;
/* —— M3 Shape scale (dp → px @1x web) —— */
--md-sys-shape-corner-none: 0;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-full: 999px;
/* —— M3 Type scale (Manrope as brand typeface) —— */
--md-sys-typescale-font: "Manrope", system-ui, -apple-system, sans-serif;
--md-sys-typescale-display-large-size: 3.5625rem; /* 57 */
--md-sys-typescale-display-large-line: 4rem;
--md-sys-typescale-display-large-weight: 800;
--md-sys-typescale-display-medium-size: 2.8125rem; /* 45 */
--md-sys-typescale-display-medium-line: 3.25rem;
--md-sys-typescale-display-small-size: 2.25rem; /* 36 */
--md-sys-typescale-display-small-line: 2.75rem;
--md-sys-typescale-headline-large-size: 2rem; /* 32 */
--md-sys-typescale-headline-large-line: 2.5rem;
--md-sys-typescale-headline-medium-size: 1.75rem; /* 28 */
--md-sys-typescale-headline-medium-line: 2.25rem;
--md-sys-typescale-headline-small-size: 1.5rem; /* 24 */
--md-sys-typescale-headline-small-line: 2rem;
--md-sys-typescale-title-large-size: 1.375rem; /* 22 */
--md-sys-typescale-title-large-line: 1.75rem;
--md-sys-typescale-title-medium-size: 1rem; /* 16 */
--md-sys-typescale-title-medium-line: 1.5rem;
--md-sys-typescale-title-medium-weight: 700;
--md-sys-typescale-title-small-size: .875rem; /* 14 */
--md-sys-typescale-title-small-line: 1.25rem;
--md-sys-typescale-body-large-size: 1rem; /* 16 */
--md-sys-typescale-body-large-line: 1.5rem;
--md-sys-typescale-body-medium-size: .875rem; /* 14 */
--md-sys-typescale-body-medium-line: 1.25rem;
--md-sys-typescale-body-small-size: .75rem; /* 12 */
--md-sys-typescale-body-small-line: 1rem;
--md-sys-typescale-label-large-size: .875rem; /* 14 */
--md-sys-typescale-label-large-line: 1.25rem;
--md-sys-typescale-label-large-weight: 700;
--md-sys-typescale-label-medium-size: .75rem; /* 12 */
--md-sys-typescale-label-medium-line: 1rem;
--md-sys-typescale-label-medium-weight: 700;
--md-sys-typescale-label-small-size: .6875rem; /* 11 */
--md-sys-typescale-label-small-line: 1rem;
--md-sys-typescale-label-small-weight: 700;
--md-sys-typescale-label-tracking: .04em;
/* —— M3 Elevation (shadow + surface tint) —— */
--md-sys-elevation-level0: none;
--md-sys-elevation-level1: 0 1px 2px rgba(0,0,0, 0.3), 0 1px 3px 1px rgba(0,0,0, 0.15);
--md-sys-elevation-level2: 0 1px 2px rgba(0,0,0, 0.3), 0 2px 6px 2px rgba(0,0,0, 0.15);
--md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0, 0.15), 0 1px 3px rgba(0,0,0, 0.3);
--md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0, 0.15), 0 2px 3px rgba(0,0,0, 0.3);
--md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0, 0.15), 0 4px 4px rgba(0,0,0, 0.3);
/* —— M3 Motion —— */
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--md-sys-motion-duration-short1: 50ms;
--md-sys-motion-duration-short2: 100ms;
--md-sys-motion-duration-short3: 150ms;
--md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium1: 250ms;
--md-sys-motion-duration-medium2: 300ms;
--md-sys-motion-duration-medium3: 350ms;
--md-sys-motion-duration-medium4: 400ms;
--md-sys-motion-duration-long1: 450ms;
--md-sys-motion-duration-long2: 500ms;
/* —— M3 State layers (dark) —— */
--md-sys-state-hover-opacity: 0.08;
--md-sys-state-focus-opacity: 0.12;
--md-sys-state-pressed-opacity: 0.12;
--md-sys-state-dragged-opacity: 0.16;
/* —— Touch / density —— */
--md-sys-touch-target: 48px; /* M3 minimum */
--md-sys-spacing-unit: 4px; /* 4dp grid */
}
/* Selection: primary container tint */
::selection {
background: rgba(3, 218, 197, 0.34);
color: #fff;
}
/* —— M3 state-layer helper (pseudo-element pattern) —— */
.md-state {
position: relative;
isolation: isolate;
overflow: hidden;
}
.md-state::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
z-index: 0;
}
.md-state > * { position: relative; z-index: 1; }
.md-state:hover::after { opacity: var(--md-sys-state-hover-opacity); }
.md-state:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.md-state:active::after { opacity: var(--md-sys-state-pressed-opacity); }
/* Chart wells: quiet hairline; series color carries signal */
.chart-box,
.chart-stack {
border-radius: inherit;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 0 1px rgba(3, 218, 197, 0.06);
}
.chart-box:hover,
.chart-stack:hover {
border-color: rgba(3, 218, 197, 0.22);
}
.chart-box.is-analytical,
.chart-stack.is-analytical {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 3px 0 0 rgba(201, 107, 255, 0.55),
var(--arc-purple-glow);
}
/*
* Selected control language (home subnav, asset nav, chart zoom, scorecard):
* M3-aligned: tertiary (purple) outline + primary-tint fill — not a purple fill.
*/
body .home-subnav a.is-active,
body .home-subnav a[aria-current="page"],
body .asset-page-nav a.is-active,
body .asset-page-nav a[aria-current="page"],
body .chart-btn.active,
body .chart-btn[aria-pressed="true"],
body .scorecard-tabs button[aria-selected="true"] {
color: var(--arc-brand-soft, #8ff8ea);
border-color: rgba(201, 107, 255, 0.55);
background:
linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%),
rgba(3, 218, 197, 0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
body .asset-switcher a.is-current {
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
border-color: transparent;
box-shadow: var(--md-sys-elevation-level1);
}
body .kpi:hover {
border-color: rgba(3, 218, 197, 0.36);
box-shadow:
var(--md-sys-elevation-level2),
inset 0 1px 0 rgba(255,255,255,.12);
}
.section-title::after,
.analytical-title::after {
content: "";
display: block;
width: 2.85rem;
height: 2px;
margin-top: .42rem;
border-radius: var(--md-sys-shape-corner-full);
background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary) 55%, transparent);
box-shadow: 0 0 12px rgba(3, 218, 197, 0.22);
}
/* M3 focus ring (primary) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}
/*
* —— Light theme (same design language) ——
* Teal primary + triadic purple tertiary preserved.
* Surfaces: cool mint/porcelain glass (not flat white paper).
* Series purple steps deeper for contrast on light glass.
*/
html[data-theme="light"] {
color-scheme: light;
/* Brand anchors stay identity-true; soft brand is ink-safe on light */
--arc-brand: #03dac5;
--arc-brand-rgb: 3, 218, 197;
--arc-brand-soft: #007a6e;
--arc-purple-deep: #9000c9;
--arc-purple-deep-rgb: 144, 0, 201;
--arc-series-main: #9000c9;
--arc-series-main-rgb: 144, 0, 201;
--arc-purple-bright: #a84de6;
--arc-purple-bright-rgb: 168, 77, 230;
--arc-purple-dim: #6b00a0;
--arc-purple-soft: rgba(144, 0, 201, 0.08);
--arc-purple-edge: rgba(144, 0, 201, 0.42);
--arc-purple-glow: 0 0 18px rgba(144, 0, 201, 0.1);
--arc-purple-fill: rgba(144, 0, 201, 0.35);
--arc-constructive: #087f68;
--arc-constructive-rgb: 8, 127, 104;
--arc-adverse: #a93672;
--arc-adverse-rgb: 169, 54, 114;
--arc-zone-sg: #087f68;
--arc-zone-sg-rgb: 8, 127, 104;
--arc-zone-sc: #a93672;
--arc-zone-sc-rgb: 169, 54, 114;
/* M3 light scheme */
--md-sys-color-primary: #006a60;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #70f7e6;
--md-sys-color-on-primary-container: #00201c;
--md-sys-color-secondary: #4a635f;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #cce8e3;
--md-sys-color-on-secondary-container: #05201c;
--md-sys-color-tertiary: #9000c9;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #f0d4ff;
--md-sys-color-on-tertiary-container: #2e004d;
--md-sys-color-error: #a93672;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #ffd8e8;
--md-sys-color-on-error-container: #3d0022;
--md-sys-color-background: #e8f5f2;
--md-sys-color-on-background: #0a1c1a;
--md-sys-color-surface: #f2faf8;
--md-sys-color-on-surface: #0a1c1a;
--md-sys-color-on-surface-variant: #2a423e;
--md-sys-color-surface-variant: #dce5e2;
--md-sys-color-outline: #6b7a77;
--md-sys-color-outline-variant: #bcc9c6;
--md-sys-color-inverse-surface: #243332;
--md-sys-color-inverse-on-surface: #e8f2f0;
--md-sys-color-inverse-primary: #03dac5;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #006a60;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #edf7f5;
--md-sys-color-surface-container: #e7f3f0;
--md-sys-color-surface-container-high: #e1eeeb;
--md-sys-color-surface-container-highest: #dbe8e5;
--md-sys-color-success: #087f68;
--md-sys-color-on-success: #ffffff;
--md-sys-color-warning: #8a6200;
--md-sys-color-on-warning: #ffffff;
--md-sys-elevation-level1: 0 1px 2px rgba(15,40,45, 0.08), 0 1px 3px 1px rgba(15,40,45, 0.05);
--md-sys-elevation-level2: 0 1px 2px rgba(15,40,45, 0.1), 0 2px 6px 2px rgba(15,40,45, 0.06);
--md-sys-elevation-level3: 0 4px 8px 3px rgba(15,40,45, 0.08), 0 1px 3px rgba(15,40,45, 0.1);
--md-sys-elevation-level4: 0 6px 10px 4px rgba(15,40,45, 0.08), 0 2px 3px rgba(15,40,45, 0.1);
--md-sys-elevation-level5: 0 8px 12px 6px rgba(15,40,45, 0.1), 0 4px 4px rgba(15,40,45, 0.08);
}
html[data-theme="light"] ::selection {
background: rgba(3, 218, 197, 0.28);
color: #042422;
}
html[data-theme="light"] body .home-subnav a.is-active,
html[data-theme="light"] body .home-subnav a[aria-current="page"],
html[data-theme="light"] body .asset-page-nav a.is-active,
html[data-theme="light"] body .asset-page-nav a[aria-current="page"],
html[data-theme="light"] body .chart-btn.active,
html[data-theme="light"] body .chart-btn[aria-pressed="true"],
html[data-theme="light"] body .scorecard-tabs button[aria-selected="true"] {
color: var(--md-sys-color-primary);
border-color: rgba(144, 0, 201, 0.42);
background:
linear-gradient(180deg, rgba(255,255,255,.72), transparent 55%),
color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme="light"] body .asset-switcher a.is-current {
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
border-color: transparent;
box-shadow: var(--md-sys-elevation-level1);
}
html[data-theme="light"] .chart-box,
html[data-theme="light"] .chart-stack {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 0 0 1px rgba(3, 218, 197, 0.08);
}
/* Fonts load via in HTML — @import blocks the whole stylesheet if Google is slow/blocked. */
:root {
--bg: #021416;
--bg-elev: #053035;
--panel: rgba(10, 42, 48, 0.36);
--panel-2: rgba(6, 30, 34, 0.62);
/*
* Liquid glass system — transparency + liquidity.
* Clear fills, wet speculars, soft aqua refraction. Inspired by water, not plastic.
*/
--glass: rgba(12, 48, 54, 0.26);
--glass-strong: rgba(8, 36, 42, 0.42);
--glass-clear: rgba(14, 52, 58, 0.22);
--glass-frost: rgba(10, 44, 50, 0.34);
--glass-dense: rgba(6, 28, 34, 0.48);
/*
* Mint-glass diagonal: light/white wash top-left → mint lower-right.
* Angle ~145° so 0% ≈ top-left, 100% ≈ bottom-right on card surfaces.
*/
--glass-shine: linear-gradient(
145deg,
rgba(255,255,255,.34) 0%,
rgba(255,255,255,.16) 18%,
rgba(140,240,230,.06) 48%,
rgba(40, 200, 190, .08) 78%,
rgba(18, 160, 155, .06) 100%
);
--glass-shine-strong: linear-gradient(
145deg,
rgba(255,255,255,.42) 0%,
rgba(255,255,255,.20) 16%,
rgba(160, 235, 225, .10) 42%,
rgba(40, 200, 190, .12) 72%,
rgba(18, 150, 145, .09) 100%
);
/* Reinforces mint pool toward lower-right */
--glass-liquid: linear-gradient(
145deg,
transparent 0%,
transparent 40%,
rgba(40, 210, 200, .05) 68%,
rgba(18, 170, 160, .10) 100%
);
--glass-edge: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(40,200,190,.08), inset 1px 0 0 rgba(255,255,255,.04);
--glass-border: rgba(180, 255, 245, 0.18);
--glass-border-bright: rgba(210, 255, 250, 0.38);
--glass-aqua: rgba(70, 230, 220, 0.09);
--glass-highlight: rgba(255, 255, 255, 0.14);
--line: var(--glass-border);
--line-strong: var(--glass-border-bright);
/* Map legacy site tokens → M3 roles (single source of truth) */
--txt: var(--md-sys-color-on-surface, #e8f2f0);
--muted: var(--md-sys-color-on-surface-variant, #b9cac6);
--muted-soft: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 78%, transparent);
--accent: var(--md-sys-color-primary, #03dac5);
--accent-2: var(--arc-brand-soft, #8ff8ea);
--ok: var(--md-sys-color-success, #7de8a8);
--warn: var(--md-sys-color-warning, #ffd479);
--bad: var(--md-sys-color-error, #ffb4ab);
--purple-deep: var(--arc-purple-deep, #9000c9);
--purple: var(--md-sys-color-tertiary, #c96bff);
--purple-bright: var(--arc-purple-bright, #d9a0ff);
--purple-dim: var(--arc-purple-dim, #a84de6);
--purple-soft: var(--arc-purple-soft);
--purple-line: var(--arc-purple-edge);
/* Elevation: M3 shadows + glass specular keep liquid feel */
--shadow-sm: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.10);
--shadow: var(--md-sys-elevation-level2), inset 0 1px 0 rgba(255,255,255,.14);
--shadow-lg: var(--md-sys-elevation-level3), inset 0 1px 0 rgba(255,255,255,.16);
--glow-accent: 0 0 40px rgba(3, 218, 197, .16);
--glow-liquid: 0 0 48px rgba(3, 218, 197, .10), 0 12px 40px rgba(0, 40, 45, .18);
--glow-purple: 0 0 20px rgba(201, 107, 255, .12);
/* Shape scale aligned to M3 (+ full for pills) */
--r: var(--md-sys-shape-corner-large, 16px);
--r-lg: var(--md-sys-shape-corner-extra-large, 28px);
--r-xl: 32px;
--r-full: var(--md-sys-shape-corner-full, 999px);
/* 4dp spacing grid */
--pad: 1.125rem; /* 18px */
--space-1: .25rem; /* 4 */
--space-2: .5rem; /* 8 */
--space-3: .75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--font: var(--md-sys-typescale-font, "Manrope", system-ui, sans-serif);
--mono: ui-monospace, "SF Mono", Menlo, monospace;
--focus: 0 0 0 2px var(--md-sys-color-background), 0 0 0 4px var(--md-sys-color-primary);
--ease: var(--md-sys-motion-easing-standard);
--ease-out: var(--md-sys-motion-easing-emphasized-decelerate);
--ease-liquid: var(--md-sys-motion-easing-emphasized-decelerate);
--header-h: 4.25rem;
/*
* Sticky chrome stack (PC + mobile share the same math):
* header top = --header-sticky-top
* subnav top = header top + header height + --header-subnav-gap
* --header-h is refined at runtime from the measured .site-header box.
*/
--header-sticky-top: .7rem;
--header-subnav-gap: .5rem; /* air between floating header pill and stuck subnav */
--subnav-sticky-top: calc(
var(--header-sticky-top) + var(--header-h) + var(--header-subnav-gap)
);
/* M3 8dp rhythm: space between hero glass and subnav (overridden per breakpoint) */
--hero-subnav-gap: var(--space-5); /* 24px default; desktop wider, phone tighter */
--blur: blur(32px) saturate(1.75);
--blur-soft: blur(22px) saturate(1.55);
--blur-chrome: blur(28px) saturate(1.7);
--content-w: 1180px;
--touch: var(--md-sys-touch-target, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background-color: #021416;
scroll-padding-top: 88px;
color-scheme: dark;
}
/*
* M3 background role + calm liquid pool. Ambient lives on fixed .site-aurora only.
*/
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-family: var(--font);
font-size: var(--md-sys-typescale-body-large-size, 1rem);
line-height: var(--md-sys-typescale-body-large-line, 1.5rem);
color: var(--md-sys-color-on-background, var(--txt));
position: relative;
isolation: isolate;
background-color: var(--md-sys-color-background, #0a1416);
background-image: linear-gradient(168deg, #0a2e34 0%, #031a1e 38%, #0a1416 72%, #050d0e 100%);
background-attachment: scroll;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
transition: background-color .25s var(--ease), color .2s var(--ease);
}
/*
* —— Light theme (polished) ——
* Same liquid-glass language as dark: teal brand, triadic purple series,
* specular glass, floating chrome. Surfaces are porcelain/mint — never flat
* paper-white. Hard-coded dark-only gradients (hero h1, KPI vals) remapped.
*/
html[data-theme="light"] {
background-color: #d8ebe7;
color-scheme: light;
--bg: #d8ebe7;
--bg-elev: #f4fbf9;
/*
* Layered glass recipe (not flat white):
* 1) specular sheen 2) cool mint wash 3) translucent body 4) hairline edge
*/
--panel: rgba(244, 251, 249, 0.78);
--panel-2: rgba(255, 255, 255, 0.82);
--glass: rgba(244, 251, 249, 0.66);
--glass-strong: rgba(255, 255, 255, 0.78);
--glass-clear: rgba(240, 250, 247, 0.58);
--glass-frost: rgba(248, 253, 251, 0.72);
--glass-dense: rgba(255, 255, 255, 0.86);
/* Light mint-glass: white top-left → mint lower-right (same diagonal as dark) */
--glass-shine: linear-gradient(
145deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.72) 20%,
rgba(210, 245, 238, .35) 48%,
rgba(0, 150, 140, .10) 78%,
rgba(0, 120, 110, .12) 100%
);
--glass-shine-strong: linear-gradient(
145deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,.82) 18%,
rgba(220, 248, 242, .45) 45%,
rgba(0, 160, 150, .12) 75%,
rgba(0, 115, 105, .14) 100%
);
--glass-liquid: linear-gradient(
145deg,
transparent 0%,
transparent 38%,
rgba(0, 150, 140, .06) 65%,
rgba(0, 110, 100, .11) 100%
);
--glass-edge: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,90,85,.07), inset 1px 0 0 rgba(255,255,255,.45);
--glass-border: rgba(0, 85, 80, 0.14);
--glass-border-bright: rgba(0, 115, 105, 0.26);
--glass-aqua: rgba(0, 150, 140, 0.07);
--glass-highlight: rgba(255, 255, 255, 0.80);
--line: var(--glass-border);
--line-strong: var(--glass-border-bright);
/* Shared surface fill — white TL → mint BR on every card */
--surface-glass:
var(--glass-shine-strong),
var(--glass-liquid),
linear-gradient(145deg, rgba(255,255,255,.62) 0%, rgba(236, 248, 244, .38) 55%, rgba(210, 236, 230, .42) 100%),
rgba(248, 253, 251, 0.70);
--surface-glass-raised:
var(--glass-shine-strong),
var(--glass-liquid),
linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(240, 250, 247, .50) 50%, rgba(205, 232, 226, .48) 100%),
rgba(255, 255, 255, 0.76);
--surface-glass-inset:
linear-gradient(145deg, rgba(255,255,255,.85) 0%, rgba(236, 248, 245, .55) 55%, rgba(210, 236, 230, .40) 100%),
rgba(0, 120, 110, .035);
/* Ink hierarchy */
--txt: #0a1c1a;
--muted: #2a423e;
--muted-soft: #3d5652;
--accent: #006a60;
--accent-2: #00857a;
--ok: var(--arc-constructive, #087f68);
--warn: #8a5800;
--bad: var(--arc-adverse, #a93672);
--purple: #9000c9;
--purple-bright: #7a14b0;
--shadow-sm: 0 1px 2px rgba(12, 40, 38, .05), 0 6px 16px rgba(12, 40, 38, .06), inset 0 1px 0 rgba(255,255,255,.90);
--shadow: 0 2px 6px rgba(12, 40, 38, .06), 0 14px 32px rgba(12, 40, 38, .08), inset 0 1px 0 rgba(255,255,255,.94);
--shadow-lg: 0 6px 12px rgba(12, 40, 38, .07), 0 22px 48px rgba(12, 40, 38, .10), inset 0 1px 0 rgba(255,255,255,.96);
--glow-accent: 0 0 28px rgba(0, 140, 130, .12);
--glow-liquid: 0 0 32px rgba(0, 150, 140, .08), 0 10px 24px rgba(12, 40, 38, .06);
--glow-purple: 0 0 16px rgba(144, 0, 201, .10);
--focus: 0 0 0 2px #d8ebe7, 0 0 0 4px #006a60;
}
html[data-theme="light"] body {
/* Cooler mint field so white glass cards float (not white-on-white) */
background-color: #d4e9e4;
background-image:
radial-gradient(ellipse 95% 55% at 8% -8%, rgba(0, 175, 160, .16), transparent 58%),
radial-gradient(ellipse 70% 48% at 95% 2%, rgba(144, 0, 201, .06), transparent 52%),
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0, 120, 140, .08), transparent 55%),
linear-gradient(168deg, #cfe8e2 0%, #dceee9 36%, #e2eef0 70%, #e8f1f0 100%);
color: var(--txt);
}
html[data-theme="light"] a { color: var(--accent-2); }
html[data-theme="light"] a:hover { color: #006a60; }
/* Filled CTAs must keep on-primary ink — global `a` color was washing Scan results */
html[data-theme="light"] a.btn:not(.ghost) {
color: var(--md-sys-color-on-primary, #ffffff) !important;
background: var(--md-sys-color-primary, #006a60) !important;
}
html[data-theme="light"] a.btn:not(.ghost):hover {
color: var(--md-sys-color-on-primary, #ffffff) !important;
background: #00857a !important;
box-shadow: var(--md-sys-elevation-level2), 0 0 24px rgba(0, 130, 120, .22);
}
html[data-theme="light"] a.btn.ghost {
color: #006a60 !important;
border-color: rgba(0, 106, 96, 0.35) !important;
background: rgba(255, 255, 255, 0.55) !important;
}
html[data-theme="light"] a.btn.ghost:hover {
color: #005048 !important;
border-color: #006a60 !important;
background: rgba(0, 160, 150, 0.12) !important;
}
/* Header Internal CTA pill */
html[data-theme="light"] .main-nav a.cta {
color: #ffffff !important;
background: #006a60 !important;
border-color: transparent !important;
}
html[data-theme="light"] .main-nav a.cta:hover {
color: #ffffff !important;
background: #00857a !important;
}
html[data-theme="light"] .audience-chip.public {
color: #006a60 !important;
border-color: rgba(0, 106, 96, 0.32) !important;
background: rgba(0, 160, 150, 0.10) !important;
}
html[data-theme="light"] .audience-chip.internal {
color: #8a5800 !important;
border-color: rgba(138, 88, 0, 0.32) !important;
background: rgba(138, 88, 0, 0.10) !important;
}
/* Ambient pool — soft caustics, not a washed copy of dark */
html[data-theme="light"] .site-aurora {
background:
radial-gradient(ellipse 80% 55% at 10% 0%, rgba(0, 190, 175, 0.18), transparent 58%),
radial-gradient(ellipse 55% 42% at 88% 8%, rgba(144, 0, 201, 0.07), transparent 54%),
radial-gradient(ellipse 70% 50% at 55% 100%, rgba(0, 140, 160, 0.08), transparent 60%);
opacity: 1;
}
/* Hero stage — deeper mint field so porcelain glass card lifts */
html[data-theme="light"] .hero-stage {
background:
radial-gradient(ellipse 100% 75% at 78% 8%, rgba(0, 190, 175, 0.20), transparent 62%),
radial-gradient(ellipse 70% 55% at 8% 60%, rgba(144, 0, 201, 0.09), transparent 58%),
linear-gradient(165deg, #b9e0d8 0%, #cfeae3 38%, #d8e8ef 78%, #e2eef0 100%) !important;
}
html[data-theme="light"] .hero-stage .hero-inner {
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.55) 28%, transparent 55%),
linear-gradient(145deg, transparent 40%, rgba(0, 150, 140, 0.08) 70%, rgba(0, 120, 110, 0.12) 100%),
rgba(248, 253, 251, 0.78) !important;
border: 1px solid rgba(0, 100, 95, 0.16) !important;
box-shadow:
0 18px 44px rgba(12, 45, 42, 0.11),
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(0, 130, 120, 0.07) !important;
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
}
/* 1) Hero title — dark ink gradient (never white-on-white) */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .verdict h1 {
background: linear-gradient(125deg, #061614 4%, #0a2e2a 28%, #006a60 58%, #00857a 82%, #5c008f 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
filter: drop-shadow(0 1px 12px rgba(0, 120, 110, .10));
}
/* 1) KPI value gradients — solid teal→ink, readable on porcelain glass */
html[data-theme="light"] .portfolio .kpi .val,
html[data-theme="light"] .metric-row .kpi .val,
html[data-theme="light"] .verdict-kpis .kpi .val {
background: linear-gradient(180deg, #0a1c1a 8%, #006a60 92%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
/* All KPI tiles (home, verdict, scorecard matrix, window-read, price context) */
html[data-theme="light"] .kpi,
html[data-theme="light"] .portfolio .kpi,
html[data-theme="light"] .metric-row .kpi,
html[data-theme="light"] .verdict-kpis .kpi,
html[data-theme="light"] .matrix-grid .kpi,
html[data-theme="light"] .window-read-grid .kpi,
html[data-theme="light"] .primary-metrics .kpi,
html[data-theme="light"] #window-read .kpi,
html[data-theme="light"] #snapshot .kpi {
background: var(--surface-glass-raised) !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
color: var(--txt) !important;
}
html[data-theme="light"] .kpi:hover,
html[data-theme="light"] .matrix-grid .kpi:hover,
html[data-theme="light"] .window-read-grid .kpi:hover,
html[data-theme="light"] #window-read .kpi:hover,
html[data-theme="light"] #snapshot .kpi:hover {
background:
linear-gradient(145deg, rgba(255,255,255,.92) 0%, rgba(236, 248, 244, .72) 55%, rgba(210, 236, 230, .55) 100%),
rgba(255, 255, 255, 0.88) !important;
border-color: rgba(0, 130, 120, .32) !important;
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.95) !important;
transform: translateY(-2px);
}
/* Neutral KPI values: teal→ink gradient. Tone classes keep solid good/warn/bad. */
html[data-theme="light"] .kpi .val:not(.good):not(.bad):not(.warn),
html[data-theme="light"] .matrix-grid .kpi .val:not(.good):not(.bad):not(.warn),
html[data-theme="light"] .window-read-grid .kpi .val:not(.good):not(.bad):not(.warn),
html[data-theme="light"] .primary-metrics .kpi .val:not(.good):not(.bad):not(.warn),
html[data-theme="light"] #window-read .kpi .val:not(.good):not(.bad):not(.warn),
html[data-theme="light"] #snapshot .kpi .val:not(.good):not(.bad):not(.warn) {
background: linear-gradient(180deg, #0a1c1a 8%, #006a60 92%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
html[data-theme="light"] .kpi .val.good { background: none !important; color: var(--ok) !important; }
html[data-theme="light"] .kpi .val.bad { background: none !important; color: var(--bad) !important; }
html[data-theme="light"] .kpi .val.warn { background: none !important; color: var(--warn) !important; }
html[data-theme="light"] .portfolio .kpi::before {
background: linear-gradient(90deg, transparent, rgba(0, 130, 120, .45), transparent) !important;
opacity: .85;
}
html[data-theme="light"] .kpi .lbl {
color: #2a423e !important;
opacity: 1;
}
html[data-theme="light"] .kpi .hint,
html[data-theme="light"] .kpi .subname {
color: #3d5652 !important;
opacity: 1;
}
html[data-theme="light"] .kpi--reserve {
border-color: rgba(0, 130, 120, .42) !important;
background:
linear-gradient(145deg, rgba(0, 180, 165, .14), rgba(255, 255, 255, .55)),
rgba(255, 255, 255, 0.88) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 0 28px rgba(0, 150, 140, .12) !important;
}
html[data-theme="light"] .kpi--reserve .lbl { color: #006a60 !important; }
html[data-theme="light"] .kpi--reserve .val {
background: linear-gradient(180deg, #005a52 5%, #00857a 95%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
/* 2) Pills / chips — stronger ink, clear glass fill */
html[data-theme="light"] .chip,
html[data-theme="light"] .meta-bar .chip,
html[data-theme="light"] .badge {
color: #1a302c !important;
border-color: rgba(0, 100, 95, 0.20) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70)),
rgba(0, 140, 130, .06) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="light"] .chip strong { color: #0a1c1a !important; }
html[data-theme="light"] .chip:hover {
border-color: rgba(0, 130, 120, .40) !important;
background:
linear-gradient(180deg, #fff, rgba(230, 252, 248, .9)),
rgba(0, 160, 150, .10) !important;
}
html[data-theme="light"] .badge.ok,
html[data-theme="light"] .badge.good {
color: #0c6b3c !important;
border-color: rgba(12, 107, 60, .32) !important;
background: linear-gradient(180deg, rgba(12, 107, 60, .10), rgba(12, 107, 60, .04)) !important;
}
html[data-theme="light"] .badge.warn {
color: #8a5800 !important;
border-color: rgba(138, 88, 0, .32) !important;
background: linear-gradient(180deg, rgba(138, 88, 0, .10), rgba(138, 88, 0, .04)) !important;
}
html[data-theme="light"] .badge.bad {
color: #b42318 !important;
border-color: rgba(180, 35, 24, .32) !important;
background: linear-gradient(180deg, rgba(180, 35, 24, .10), rgba(180, 35, 24, .04)) !important;
}
html[data-theme="light"] .badge.accent {
color: #006a60 !important;
border-color: rgba(0, 106, 96, .35) !important;
background: linear-gradient(180deg, rgba(0, 160, 150, .12), rgba(0, 160, 150, .05)) !important;
}
html[data-theme="light"] .how-to-read-pill {
color: #0f2623 !important;
border-color: rgba(0, 110, 100, .28) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.65)),
rgba(0, 150, 140, .08) !important;
font-weight: 650;
}
html[data-theme="light"] .how-to-read-pill:hover {
background: rgba(0, 160, 150, .14) !important;
border-color: rgba(0, 120, 110, .45) !important;
}
html[data-theme="light"] .how-to-read-pill.active {
color: #006a60 !important;
border-color: rgba(144, 0, 201, .40) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.9), transparent 60%),
rgba(0, 160, 150, .14) !important;
}
html[data-theme="light"] .how-to-read-bar {
border-color: rgba(0, 110, 100, .20) !important;
background:
var(--glass-shine),
linear-gradient(135deg, rgba(0, 160, 150, .08), rgba(255, 255, 255, .55)),
rgba(255, 255, 255, 0.72) !important;
color: var(--txt);
}
html[data-theme="light"] .how-to-read-bar__label {
color: #2a423e !important;
}
html[data-theme="light"] .how-to-read-bar__note {
color: #3d5652 !important;
}
html[data-theme="light"] .home-subnav a,
html[data-theme="light"] .asset-page-nav a,
html[data-theme="light"] .main-nav a {
color: #1a302c !important;
font-weight: 650;
}
html[data-theme="light"] .home-subnav a:hover,
html[data-theme="light"] .asset-page-nav a:hover {
color: #006a60 !important;
}
/* 3) Stat bar + status key — elevated porcelain strip, high contrast */
html[data-theme="light"] .stat-bar {
border: 1px solid rgba(0, 100, 95, 0.16) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(240, 252, 249, .92) 100%),
rgba(255, 255, 255, 0.88) !important;
box-shadow:
0 4px 16px rgba(12, 40, 38, .07),
inset 0 1px 0 rgba(255,255,255,1) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .stat-bar__item {
border: 1px solid rgba(0, 110, 100, 0.18) !important;
background:
linear-gradient(180deg, #fff, rgba(232, 248, 244, .95)),
rgba(0, 150, 140, .05) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .stat-bar__val {
color: #0a1c1a !important;
font-weight: 800;
}
html[data-theme="light"] .stat-bar__lbl {
color: #2a423e !important;
font-weight: 600;
}
html[data-theme="light"] .stat-bar__run {
color: #3d5652 !important;
}
html[data-theme="light"] .status-key {
border-color: rgba(0, 100, 95, 0.16) !important;
background:
var(--glass-shine),
linear-gradient(180deg, rgba(255,255,255,.95), rgba(240, 250, 248, .9)),
rgba(255, 255, 255, 0.82) !important;
color: #1a302c !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 12px rgba(12, 40, 38, .05) !important;
}
html[data-theme="light"] .status-key__item {
color: #1a302c !important;
}
html[data-theme="light"] .hard-tape-chip {
border-color: rgba(0, 100, 95, 0.16) !important;
background:
var(--glass-shine),
rgba(255, 255, 255, 0.85) !important;
color: var(--txt);
}
/*
* Home (and shared) glass panels — layered recipe on cooler page field.
* Cards float; chart wells sit slightly inset; chrome bars match header glass.
*/
html[data-theme="light"] .portfolio,
html[data-theme="light"] .asset-card,
html[data-theme="light"] .asset-card-shell,
html[data-theme="light"] .filters,
html[data-theme="light"] .compare-shell,
html[data-theme="light"] .ratio-context,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .status-key,
html[data-theme="light"] .how-to-read-bar,
html[data-theme="light"] .stat-bar,
html[data-theme="light"] .home-subnav,
html[data-theme="light"] main > .home-subnav,
html[data-theme="light"] .method-card,
html[data-theme="light"] .method-quick,
html[data-theme="light"] .method-not,
html[data-theme="light"] .method-toc,
html[data-theme="light"] .method-jump,
html[data-theme="light"] .glossary-item,
html[data-theme="light"] .fund-card,
html[data-theme="light"] .lab,
html[data-theme="light"] .chart-box,
html[data-theme="light"] .prev-next,
html[data-theme="light"] .origin-definition,
html[data-theme="light"] .origin-story,
html[data-theme="light"] .hard-tape-chip,
html[data-theme="light"] .how-to-read__term,
html[data-theme="light"] .window-read,
html[data-theme="light"] .snapshot-panel,
html[data-theme="light"] .site-disclaimer {
border: 1px solid var(--glass-border) !important;
background: var(--surface-glass) !important;
color: var(--txt) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(22px) saturate(1.55) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
}
html[data-theme="light"] .method-card,
html[data-theme="light"] .fund-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .lab,
html[data-theme="light"] .chart-box,
html[data-theme="light"] .origin-definition {
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow) !important;
}
html[data-theme="light"] .method-toc a,
html[data-theme="light"] .method-block p,
html[data-theme="light"] .method-block li,
html[data-theme="light"] .method-quick ol,
html[data-theme="light"] .faq-item p,
html[data-theme="light"] .fund-card p,
html[data-theme="light"] .glossary-item span {
color: var(--muted) !important;
}
html[data-theme="light"] .method-toc a:hover,
html[data-theme="light"] .method-toc a.is-active,
html[data-theme="light"] .method-toc a[aria-current="location"],
html[data-theme="light"] .method-card h3,
html[data-theme="light"] .method-quick h2,
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .lab > summary,
html[data-theme="light"] .chart-box h2,
html[data-theme="light"] .origin-story h3,
html[data-theme="light"] .origin-definition h3,
html[data-theme="light"] .glossary-item strong,
html[data-theme="light"] .hard-tape-chip strong {
color: var(--txt) !important;
}
html[data-theme="light"] .method-toc a.is-active,
html[data-theme="light"] .method-toc a[aria-current="location"] {
color: #006a60 !important;
border-color: rgba(144, 0, 201, 0.35) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.9), transparent 55%),
rgba(0, 160, 150, 0.12) !important;
}
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .page-jump__select {
color: var(--md-sys-color-on-surface) !important;
}
html[data-theme="light"] .chart-stack,
html[data-theme="light"] .main-chart {
border-color: var(--glass-border) !important;
background: var(--surface-glass-inset) !important;
}
html[data-theme="light"] .cite-block {
color: var(--txt) !important;
background:
var(--glass-shine),
rgba(0, 140, 130, 0.08) !important;
border-left-color: rgba(0, 106, 96, 0.45) !important;
}
html[data-theme="light"] .portfolio {
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow) !important;
}
html[data-theme="light"] .asset-card,
html[data-theme="light"] .asset-card-shell {
background: var(--surface-glass-raised) !important;
transition: border-color .2s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
html[data-theme="light"] .asset-card:hover,
html[data-theme="light"] .asset-card-shell:hover {
border-color: var(--glass-border-bright) !important;
box-shadow: var(--shadow), 0 0 0 1px rgba(0, 140, 130, .06) !important;
transform: translateY(-2px);
}
html[data-theme="light"] .filters {
background: var(--surface-glass) !important;
}
html[data-theme="light"] .stat-bar {
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow) !important;
}
html[data-theme="light"] .stat-bar__item {
border: 1px solid rgba(0, 100, 95, 0.14) !important;
background: var(--surface-glass-inset) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .ratio-context {
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 28%, var(--glass-border)) !important;
background:
linear-gradient(115deg, rgba(144, 0, 201, .06) 0%, rgba(0, 150, 140, .05) 40%, transparent 100%),
var(--surface-glass) !important;
}
html[data-theme="light"] .asset-blurb,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .note {
color: #2a423e !important;
}
html[data-theme="light"] .hero-kicker {
color: #2a423e !important;
}
html[data-theme="light"] .hero-lead,
html[data-theme="light"] .hero-lead-short {
color: #2a423e !important;
}
html[data-theme="light"] .hero-lead strong,
html[data-theme="light"] .hero-lead-short strong {
color: #0a1c1a !important;
}
/* Chart wells: slightly inset “glass tray” inside cards */
html[data-theme="light"] .chart-box,
html[data-theme="light"] .spark,
html[data-theme="light"] .asset-card-chart {
background: var(--surface-glass-inset) !important;
border: 1px solid rgba(0, 90, 85, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.88),
inset 0 0 0 1px rgba(0, 120, 110, .03) !important;
}
/* Crosshair legends: text-only halo (never a solid plate over the chart) */
html[data-theme="light"] .pane-legend,
html[data-theme="light"] .spark-legend,
html[data-theme="light"] .stack-pane .pane-legend,
html[data-theme="light"] .spark .pane-legend,
html[data-theme="light"] .spark .spark-legend {
color: #0f2623 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
text-shadow:
0 0 5px rgba(255, 255, 255, 0.95),
0 1px 2px rgba(255, 255, 255, 0.88),
0 0 1px rgba(255, 255, 255, 1);
}
html[data-theme="light"] .pane-legend .lg-date,
html[data-theme="light"] .spark-legend .lg-date,
html[data-theme="light"] .stack-pane .pane-legend .lg-date {
color: #3d5652 !important;
}
html[data-theme="light"] .pane-legend .lg-series,
html[data-theme="light"] .spark-legend .lg-series {
color: var(--lg-c, #006a60) !important;
}
html[data-theme="light"] .pane-legend strong,
html[data-theme="light"] .spark-legend strong,
html[data-theme="light"] .stack-pane .pane-legend strong {
color: #0a1c1a !important;
}
html[data-theme="light"] .mode-toggle {
background: var(--surface-glass-inset) !important;
border-color: var(--glass-border) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .analytical-title {
color: #0a1c1a !important;
}
html[data-theme="light"] .site-header-bar {
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 86%, transparent) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
box-shadow: var(--md-sys-elevation-level1) !important;
}
html[data-theme="light"] body.header-scrolled .site-header-bar {
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 94%, transparent) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline) 35%, transparent) !important;
box-shadow: var(--md-sys-elevation-level2) !important;
}
html[data-theme="light"] .brand-name { color: var(--md-sys-color-on-surface) !important; }
html[data-theme="light"] .brand-sub { color: var(--md-sys-color-on-surface-variant) !important; }
html[data-theme="light"] .main-nav a {
color: var(--md-sys-color-on-surface-variant) !important;
}
html[data-theme="light"] .main-nav a:hover {
color: var(--md-sys-color-on-surface) !important;
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
}
html[data-theme="light"] .main-nav a.active {
color: var(--md-sys-color-on-secondary-container) !important;
background: var(--md-sys-color-secondary-container) !important;
border-color: transparent !important;
}
html[data-theme="light"] .main-nav a.cta {
color: var(--md-sys-color-on-primary) !important;
background: var(--md-sys-color-primary) !important;
}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] #btn-presenter {
color: var(--md-sys-color-on-surface-variant) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent) !important;
}
html[data-theme="light"] .theme-toggle[aria-pressed="true"],
html[data-theme="light"] #btn-presenter[aria-pressed="true"] {
color: var(--md-sys-color-on-secondary-container) !important;
background: var(--md-sys-color-secondary-container) !important;
border-color: transparent !important;
}
html[data-theme="light"] .mode-toggle {
background: rgba(255, 255, 255, 0.75) !important;
border-color: rgba(0, 100, 95, 0.16) !important;
}
html[data-theme="light"] .mode-toggle button {
color: #2a423e !important;
}
html[data-theme="light"] .mode-toggle button[aria-selected="true"] {
color: #006a60 !important;
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 1px 4px rgba(12, 40, 38, .08);
}
/* —— Asset / Inspect pages (light) —— */
html[data-theme="light"] .verdict h1 {
background: linear-gradient(120deg, #061614 8%, #006a60 55%, #5c008f 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
html[data-theme="light"] .verdict-copy {
color: #2a423e !important;
}
html[data-theme="light"] .page-title {
color: #0a1c1a !important;
}
html[data-theme="light"] .crumb {
color: #3d5652 !important;
}
html[data-theme="light"] .crumb a {
color: #006a60 !important;
}
html[data-theme="light"] .asset-switcher {
border-color: rgba(0, 100, 95, 0.16) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(240, 250, 248, .95)),
rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 2px 12px rgba(12, 40, 38, .06) !important;
}
html[data-theme="light"] .asset-switcher__label {
color: #2a423e !important;
}
html[data-theme="light"] .asset-switcher a {
color: #1a302c !important;
border-color: rgba(0, 100, 95, 0.18) !important;
background: rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="light"] .asset-switcher a:hover {
color: #006a60 !important;
border-color: rgba(0, 120, 110, 0.35) !important;
background: rgba(0, 160, 150, 0.10) !important;
}
html[data-theme="light"] .asset-switcher a.is-current {
color: #ffffff !important;
background: #006a60 !important;
border-color: transparent !important;
box-shadow: 0 2px 10px rgba(0, 106, 96, .28) !important;
}
html[data-theme="light"] .asset-switcher a.is-current .sw-class {
color: rgba(255, 255, 255, .85) !important;
}
html[data-theme="light"] .asset-page-nav {
border-color: rgba(0, 100, 95, 0.16) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 100%),
rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 4px 16px rgba(12, 40, 38, .07), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] .asset-page-nav a {
color: #1a302c !important;
font-weight: 650;
}
html[data-theme="light"] .asset-page-nav a:hover,
html[data-theme="light"] .asset-page-nav a.is-active,
html[data-theme="light"] .asset-page-nav a[aria-current="page"] {
color: #006a60 !important;
border-color: rgba(144, 0, 201, 0.40) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.9), transparent 55%),
rgba(0, 160, 150, 0.12) !important;
}
html[data-theme="light"] .asset-page-nav__label {
color: #2a423e !important;
}
html[data-theme="light"] .stack-pane {
border-color: var(--glass-border) !important;
background: var(--surface-glass-inset) !important;
color: var(--txt) !important;
}
/* Asset page: Price Context & Verdict + System Scorecard (panels + nested KPIs) */
html[data-theme="light"] #window-read,
html[data-theme="light"] #snapshot,
html[data-theme="light"] #overview .verdict,
html[data-theme="light"] .verdict,
html[data-theme="light"] .scorecard-group,
html[data-theme="light"] .matrix-grid,
html[data-theme="light"] .window-read-grid {
color: var(--txt);
}
html[data-theme="light"] #window-read > .panel,
html[data-theme="light"] #snapshot > .panel,
html[data-theme="light"] #window-read .panel.panel-pad,
html[data-theme="light"] #snapshot .panel.panel-pad {
border: 1px solid var(--glass-border) !important;
background: var(--surface-glass) !important;
color: var(--txt) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(22px) saturate(1.55) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
}
html[data-theme="light"] #window-read .section-title,
html[data-theme="light"] #snapshot .section-title {
color: #0a1c1a !important;
}
html[data-theme="light"] .scorecard-group {
padding: .85rem .9rem 1rem;
border-radius: var(--md-sys-shape-corner-large, 16px);
border: 1px solid var(--glass-border) !important;
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
color: var(--txt) !important;
}
html[data-theme="light"] .scorecard-group__label {
color: #006a60 !important;
opacity: 1;
}
/* Appearance only — keep base display:none on desktop; mobile media shows tabs */
html[data-theme="light"] .scorecard-tabs {
flex-wrap: wrap;
gap: .35rem;
margin: 0 0 .85rem;
padding: .35rem;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid var(--glass-border) !important;
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] #window-read .window-read-copy,
html[data-theme="light"] .verdict-copy,
html[data-theme="light"] #window-read .window-note {
color: #2a423e !important;
}
html[data-theme="light"] #window-read .window-note {
border: 1px solid var(--glass-border) !important;
background: var(--surface-glass-inset) !important;
}
html[data-theme="light"] .chart-toolbar,
html[data-theme="light"] .chart-btn,
html[data-theme="light"] .scorecard-tabs button {
color: #1a302c !important;
border-color: rgba(0, 100, 95, 0.18) !important;
background: rgba(255, 255, 255, 0.80) !important;
}
html[data-theme="light"] .chart-btn:hover,
html[data-theme="light"] .chart-btn.active,
html[data-theme="light"] .chart-btn[aria-pressed="true"],
html[data-theme="light"] .scorecard-tabs button[aria-selected="true"] {
color: #006a60 !important;
border-color: rgba(144, 0, 201, 0.40) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95), transparent 55%),
rgba(0, 160, 150, 0.12) !important;
}
html[data-theme="light"] .fab-back {
color: var(--md-sys-color-on-primary-container) !important;
border: 0 !important;
background: var(--md-sys-color-primary-container) !important;
box-shadow: var(--md-sys-elevation-level3) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .series-legend__item {
color: #2a423e !important;
}
html[data-theme="light"] .series-legend__item--price::before {
background: rgba(0, 110, 170, 1) !important;
}
/* Theme toggle control */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
min-height: 2.25rem;
padding: .35rem .7rem;
border-radius: 999px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
cursor: pointer;
font-weight: 700;
font-size: .78rem;
letter-spacing: .01em;
transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.theme-toggle:hover {
color: var(--txt);
border-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}
.theme-toggle[aria-pressed="true"] {
color: var(--accent-2);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 50%, transparent);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
.theme-toggle__icon { font-size: .95rem; line-height: 1; }
/* —— M3 type role mapping —— */
.hero h1,
.verdict h1 {
font-size: clamp(2.25rem, 5vw, var(--md-sys-typescale-display-small-size, 2.25rem));
line-height: 1.1;
font-weight: var(--md-sys-typescale-display-large-weight, 800);
letter-spacing: -.02em;
}
.section-head h2,
.analytical-title,
.section-title,
.page-title {
font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
line-height: var(--md-sys-typescale-headline-small-line, 2rem);
font-weight: 800;
letter-spacing: -.015em;
color: var(--md-sys-color-on-surface);
}
.asset-card h3,
.faq-item summary,
.origin-story h3,
.origin-definition h3 {
font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
line-height: var(--md-sys-typescale-title-large-line, 1.75rem);
font-weight: 800;
}
.hero-lead,
.hero-lead-short,
.section-head p,
.asset-blurb,
.note {
font-size: var(--md-sys-typescale-body-large-size, 1rem);
line-height: var(--md-sys-typescale-body-large-line, 1.5rem);
color: var(--md-sys-color-on-surface-variant, var(--muted));
}
.kpi .lbl,
.filters label,
.filters-status__label,
.how-to-read-bar__label,
.hero-kicker,
.brand-sub {
font-size: var(--md-sys-typescale-label-medium-size, .75rem);
line-height: var(--md-sys-typescale-label-medium-line, 1rem);
font-weight: var(--md-sys-typescale-label-medium-weight, 700);
letter-spacing: var(--md-sys-typescale-label-tracking, .04em);
text-transform: uppercase;
}
/* M3 label-large chips (sentence case, not all-caps) */
.badge,
.audience-chip,
.status-chip {
font-size: var(--md-sys-typescale-label-large-size, .875rem);
line-height: var(--md-sys-typescale-label-large-line, 1.25rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
letter-spacing: .01em;
text-transform: none;
}
.kpi .hint,
.site-disclaimer,
.footer-meta,
.chip {
font-size: var(--md-sys-typescale-body-small-size, .75rem);
line-height: var(--md-sys-typescale-body-small-line, 1rem);
}
.btn,
.main-nav a,
.home-subnav a,
.status-chip,
.chart-btn,
.mode-toggle button {
font-size: var(--md-sys-typescale-label-large-size, .875rem);
line-height: var(--md-sys-typescale-label-large-line, 1.25rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
letter-spacing: .01em;
}
/* Kill legacy pseudo washes — ambient lives only on .site-aurora (fixed, full viewport) */
body::before,
body::after {
content: none !important;
display: none !important;
}
/* Legacy fog DOM (unused) — keep inert so old CSS never animates GPU layers */
.site-fog,
.site-fog__mark,
.site-fog__bloom {
display: none !important;
}
@keyframes fogDriftA {
0% { transform: translate(0, 0) scale(1); opacity: 0.45; }
50% { transform: translate(35px, -25px) scale(1.14); opacity: 0.75; }
100% { transform: translate(-25px, 30px) scale(0.92); opacity: 0.5; }
}
@keyframes fogDriftB {
0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
50% { transform: translate(-40px, 30px) scale(1.18); opacity: 0.7; }
100% { transform: translate(30px, -20px) scale(0.9); opacity: 0.45; }
}
@keyframes pageWashDrift {
0% { transform: translateY(0) scale(1); opacity: 0.5; }
50% { transform: translateY(-25px) scale(1.1); opacity: 0.85; }
100% { transform: translateY(20px) scale(0.92); opacity: 0.55; }
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
.wrap {
position: relative;
z-index: 1;
width: min(var(--content-w), calc(100vw - 2.25rem));
margin: 0 auto;
padding: .85rem .5rem 2rem;
max-width: 100%;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.wrap > main {
flex: 1 1 auto;
}
/* —— Sticky Header —— */
.site-header {
position: sticky;
top: var(--header-sticky-top, .7rem);
z-index: 100;
margin-bottom: 1.25rem;
}
.site-header-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: .75rem 1rem;
padding: .65rem 1rem;
min-height: 3.5rem;
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 72%, transparent);
backdrop-filter: var(--blur-chrome);
-webkit-backdrop-filter: var(--blur-chrome);
box-shadow: var(--md-sys-elevation-level1);
transition:
border-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease),
box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease),
background-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease);
min-width: 0;
}
.site-header-bar:hover {
border-color: color-mix(in srgb, var(--md-sys-color-outline) 45%, transparent);
box-shadow: var(--md-sys-elevation-level2);
}
body.header-scrolled .site-header-bar {
box-shadow: var(--md-sys-elevation-level2);
}
.header-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: var(--md-sys-touch-target, 48px);
height: var(--md-sys-touch-target, 48px);
border: 0;
border-radius: var(--md-sys-shape-corner-full, 999px);
background: transparent;
color: var(--md-sys-color-on-surface-variant, var(--txt));
cursor: pointer;
flex: 0 0 auto;
-webkit-tap-highlight-color: transparent;
}
.header-menu-toggle:hover {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.header-menu-toggle svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.header-menu-toggle .icon-close { display: none; }
.site-header.menu-open .header-menu-toggle .icon-menu { display: none; }
.site-header.menu-open .header-menu-toggle .icon-close { display: block; }
/* M3 scrim (modal navigation) — ~32% opacity, both themes */
.header-scrim {
display: none;
position: fixed;
inset: 0;
z-index: 95;
background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.menu-open .header-scrim {
display: block;
animation: mdScrimIn var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease);
}
@keyframes mdScrimIn {
from { opacity: 0; }
to { opacity: 1; }
}
.brand-lockup {
display: flex;
align-items: center;
gap: .55rem;
color: inherit;
text-decoration: none;
transition: opacity .15s ease;
flex: 0 1 auto;
min-width: 0;
border-radius: 8px;
/* Kill click/tap focus plate (global :focus-visible box-shadow draws a long thin ring) */
-webkit-tap-highlight-color: transparent;
}
.brand-lockup:hover { text-decoration: none; opacity: .85; }
.brand-lockup:focus,
.brand-lockup:focus-visible,
.brand-lockup:active {
outline: none !important;
box-shadow: none !important;
text-decoration: none;
opacity: 1;
}
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand-text { min-width: 0; }
.brand-name {
display: block;
font-weight: 750;
letter-spacing: -.025em;
font-size: .98rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-sub {
display: block;
font-size: .66rem;
color: var(--muted-soft);
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
}
.main-nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .25rem;
margin-left: auto;
flex: 0 1 auto;
min-width: 0;
}
.main-nav a {
color: var(--md-sys-color-on-surface-variant, var(--muted));
text-decoration: none;
padding: .45rem .9rem;
min-height: 2.5rem;
border-radius: var(--md-sys-shape-corner-full, 999px);
border: 1px solid transparent;
font-size: var(--md-sys-typescale-label-large-size, .875rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
line-height: var(--md-sys-typescale-label-large-line, 1.25rem);
transition:
color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease),
background var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease),
border-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
white-space: nowrap;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.main-nav a:hover {
color: var(--md-sys-color-on-surface, var(--txt));
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
text-decoration: none;
}
.main-nav a.active {
color: var(--md-sys-color-on-secondary-container);
border-color: transparent;
background: var(--md-sys-color-secondary-container);
}
.main-nav a.cta {
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
border-color: transparent;
font-weight: 700;
}
.main-nav a.cta:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 88%, #000);
color: var(--md-sys-color-on-primary);
}
.nav-label-short { display: none; }
.nav-label-full { display: inline; }
.audience-chip__short { display: none; }
.audience-chip__full { display: inline; }
/* Desktop: menu participates in the bar flex row without a wrapper box */
.header-menu {
display: contents;
}
/* Mobile sheet overrides display in max-width:720px */
.header-tools {
display: flex;
align-items: center;
gap: .35rem;
flex: 0 0 auto;
min-width: 0;
}
.header-tools button,
.header-tools .lang-toggle {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
background: transparent;
color: var(--md-sys-color-on-surface-variant, var(--muted));
border-radius: var(--md-sys-shape-corner-full, 999px);
padding: .4rem .75rem;
min-height: 2.25rem;
font-size: var(--md-sys-typescale-label-medium-size, .75rem);
font-weight: var(--md-sys-typescale-label-medium-weight, 700);
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition:
color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease),
background var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease),
border-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
}
.header-tools button:hover,
.header-tools .lang-toggle:hover {
color: var(--md-sys-color-on-surface);
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.header-tools button[aria-pressed="true"],
.header-tools .lang-toggle[aria-pressed="true"] {
color: var(--md-sys-color-on-secondary-container);
border-color: transparent;
background: var(--md-sys-color-secondary-container);
}
.audience-chip {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.main-nav a,
.home-subnav a {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
}
/* —— M3 extended FAB (asset pages) —— */
.fab-back {
position: fixed;
bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
left: max(1.25rem, env(safe-area-inset-left, 0px));
z-index: 200;
display: inline-flex;
min-height: 3.5rem; /* M3 extended FAB 56dp */
align-items: center;
gap: .5rem;
padding: .75rem 1.15rem .75rem .9rem;
border-radius: var(--md-sys-shape-corner-large, 16px);
border: 0;
background: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-size: var(--md-sys-typescale-label-large-size, .875rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
letter-spacing: .01em;
text-decoration: none;
box-shadow: var(--md-sys-elevation-level3);
transition:
transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-emphasized-decelerate, ease),
box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease),
background-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.fab-back:hover {
box-shadow: var(--md-sys-elevation-level4);
transform: translateY(-1px);
text-decoration: none;
color: var(--md-sys-color-on-primary-container);
}
.fab-back:active {
transform: translateY(0);
box-shadow: var(--md-sys-elevation-level2);
}
.fab-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; flex-shrink: 0; }
/* —— Surfaces —— */
.panel {
/* Glass fill/border/blur come from shared oceanic surface block */
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
}
.panel::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 2%, rgba(255,255,255,.28) 50%, transparent 98%);
pointer-events: none;
opacity: 1;
z-index: 1;
}
.panel-pad { padding: var(--pad) 1.35rem; }
/*
* Hero stage — ambient band that owns the top of the home page:
* header bleed (desktop) → hero content → subnav → B/D ratio block → soft fade.
*/
.hero-stage {
position: relative;
isolation: isolate;
margin: 0 0 1.25rem;
}
.hero-stage > .hero-ambient {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-stage > .hero {
position: relative;
z-index: 2;
}
/*
* Subnav is a direct child of so sticky outlives the hero-stage band.
* Top edge pins under the sticky header with --header-subnav-gap (same PC + mobile).
* z-index below header (100), above page content.
*/
.home-subnav {
position: sticky;
top: var(--subnav-sticky-top);
z-index: 90;
}
/* —— Hero content shell (ambient lives on .hero-stage) —— */
.hero {
position: relative;
isolation: isolate;
overflow: visible;
width: 100%;
margin: 0 0 1rem;
padding: .65rem 0 1.25rem;
background: transparent;
border: none;
box-shadow: none;
}
/* Soft water sheen reserved for full-bleed stage (desktop) */
.hero::after { display: none; }
/*
* Condensation on Slanted Windshield Glass — Direct Light Source Optics & Glass Bead Lensing.
* Droplets cling flat to a windshield glass plane under direct top-left (45°) light.
* Optics:
* - Left side: Crisp specular white highlight accompanied by a deep, sharp shade wall.
* - Right side: INTENSE BLAZING GLASS BEAD LENSING (#ffffff to #00f7ff to #e880ff glowing core).
* - Hard-Edged Direct Light Shadows: Razor-sharp, unblurred directional shadow cast immediately
* on the lower-right flank of each drop at 45° down-right.
* - Dense condensation mist: Hundreds of micro-beads (`xs`/`sm`) focused in lower-left & lower-right corners of Hero & Footer.
*/
.liquid-drops {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
contain: strict;
opacity: 1;
}
.liquid-drops__veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 58% 48% at 85% 15%, rgba(144, 0, 201, .16), transparent 70%),
radial-gradient(ellipse 45% 40% at 10% 85%, rgba(0, 229, 255, .14), transparent 65%),
radial-gradient(ellipse 42% 32% at 50% 90%, rgba(20, 0, 45, .08), transparent 72%);
opacity: .6;
pointer-events: none;
}
.liquid-drops__glass-sh {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(ellipse 80% 70% at 16% 10%, rgba(255,255,255,.06), transparent 55%),
radial-gradient(ellipse 75% 55% at 88% 92%, rgba(0, 4, 12, .26), transparent 65%);
box-shadow:
inset 0 -18px 36px rgba(0, 6, 14, .2),
inset 0 1px 0 rgba(255,255,255,.06);
opacity: .88;
}
/* Micro condensation field — 1000 micro beads clustered in regions outside center column */
.liquid-drops__field {
position: absolute;
inset: 0;
opacity: .80;
background-image:
/* Micro bead cluster grid 1 (left corridor mist) */
radial-gradient(circle at 12px 14px, #ffffff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 34px 42px, #00f7ff 0 0.9px, transparent 1.6px),
radial-gradient(circle at 56px 18px, #ffffff 0 1.2px, transparent 1.9px),
radial-gradient(circle at 22px 68px, rgba(224,128,255,.85) 0 0.8px, transparent 1.5px),
radial-gradient(circle at 48px 82px, #ffffff 0 1.0px, transparent 1.7px),
radial-gradient(circle at 18px 96px, #00f7ff 0 0.9px, transparent 1.6px),
/* Micro bead cluster grid 2 (right corridor mist) */
radial-gradient(circle at 24px 28px, #ffffff 0 1.2px, transparent 2.0px),
radial-gradient(circle at 68px 52px, #00f7ff 0 1.0px, transparent 1.7px),
radial-gradient(circle at 42px 76px, #ffffff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 84px 38px, rgba(224,128,255,.85) 0 0.8px, transparent 1.5px),
radial-gradient(circle at 92px 90px, #ffffff 0 1.0px, transparent 1.7px),
radial-gradient(circle at 62px 104px, #00f7ff 0 0.9px, transparent 1.6px),
/* Corner high-density mist scatter */
radial-gradient(circle at 6% 76%, #ffffff 0 1.1px, transparent 1.7px),
radial-gradient(circle at 11% 80%, rgba(224,128,255,.85) 0 0.9px, transparent 1.5px),
radial-gradient(circle at 8% 86%, #ffffff 0 1.0px, transparent 1.6px),
radial-gradient(circle at 14% 74%, #00f7ff 0 0.8px, transparent 1.4px),
radial-gradient(circle at 4% 82%, rgba(217,160,255,.75) 0 0.7px, transparent 1.3px),
radial-gradient(circle at 16% 84%, #ffffff 0 0.8px, transparent 1.4px),
radial-gradient(circle at 74% 70%, #ffffff 0 1.0px, transparent 1.6px),
radial-gradient(circle at 79% 74%, #00f7ff 0 0.8px, transparent 1.4px),
radial-gradient(circle at 85% 68%, #ffffff 0 1.2px, transparent 1.8px),
radial-gradient(circle at 90% 78%, rgba(224,128,255,.85) 0 0.8px, transparent 1.4px),
radial-gradient(circle at 77% 80%, #ffffff 0 0.9px, transparent 1.5px),
radial-gradient(circle at 83% 84%, #ffffff 0 0.8px, transparent 1.3px);
background-size:
70px 110px, 90px 130px, 110px 150px, 80px 120px, 100px 140px, 60px 100px,
80px 120px, 100px 140px, 120px 160px, 90px 130px, 110px 150px, 70px 110px,
auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
filter: blur(.04px);
mix-blend-mode: screen;
}
.liquid-drops--hero .liquid-drops__field {
opacity: .88;
}
/* Water Droplet Base Mechanics — RADIANT GLASS BEAD LENSING (No Dark Right Rim) */
.liquid-drops__drop {
position: absolute;
border-radius: 66% 34% 60% 40% / 44% 56% 44% 56%;
width: 1rem;
height: 1rem;
--drop-rot: 0deg;
/* 45-degree hard-edged shadow parameters cast onto glass plane immediately lower-right */
--cast-x: 3px;
--cast-y: 3px;
--cast-op: .95;
transform: rotate(var(--drop-rot));
transform-origin: 50% 50%;
background:
/* 1) Crisp specular highlight spot at top-left (10:30 o'clock direction) */
radial-gradient(ellipse 32% 24% at 18% 14%,
#ffffff 0%,
#ffffff 50%,
rgba(255, 255, 255, 0.85) 75%,
transparent 90%),
/* 2) BLAZING RADIANT GLASS BEAD LENSING (Dominant Right-Side Focal Core — NO DARKNESS ON RIGHT) */
radial-gradient(ellipse 85% 80% at 75% 72%,
#ffffff 0%,
#ffffff 22%,
#00f7ff 45%,
#0088ff 70%,
#8800ff 92%,
transparent 100%),
/* 3) TOP-LEFT ONLY Deep Shadow Wall (hugging top-left edge ONLY) */
radial-gradient(ellipse 50% 40% at 12% 14%,
rgba(2, 0, 8, 0.98) 0%,
rgba(10, 0, 26, 0.90) 48%,
transparent 82%);
box-shadow:
inset 2px 2px 3px #ffffff,
inset -6px -6px 14px #00f7ff,
inset -2px -2px 6px #ffffff,
0 0 12px rgba(0, 247, 255, 0.65),
inset 0 0 0 1px rgba(255, 255, 255, 0.35);
isolation: isolate;
opacity: 1;
}
/* Crisp specular highlight on upper-left (10:30 o'clock direction) */
.liquid-drops__drop::before {
content: "";
position: absolute;
left: 7%;
top: 4%;
width: 44%;
height: 38%;
border-radius: 60% 40% 50% 50%;
background: radial-gradient(ellipse 80% 70% at 35% 30%,
#ffffff 0%,
#ffffff 55%,
rgba(180, 250, 255, 0.85) 85%,
transparent 95%);
pointer-events: none;
filter: none;
mix-blend-mode: screen;
}
/* HARD-EDGED direct light shadow cast IMMEDIATELY on lower-right side of each droplet (45° angle) */
.liquid-drops__drop::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(0, 2, 8, 0.98);
transform: translate(var(--cast-x), var(--cast-y));
pointer-events: none;
z-index: -1;
filter: none;
opacity: var(--cast-op);
mix-blend-mode: multiply;
}
/* Size ladder — Dominant Luminous Glass Bead Focal Rims & Hard Shadows */
.liquid-drops__drop--lg {
width: clamp(1.4rem, 3.1vw, 2.35rem);
height: clamp(1.2rem, 2.6vw, 1.95rem);
opacity: 1;
--cast-x: 5.5px;
--cast-y: 5.5px;
--cast-op: .96;
box-shadow:
inset 3px 3px 5px #ffffff,
inset -12px -12px 24px #00f7ff,
inset -4px -4px 10px #ffffff,
0 0 18px rgba(0, 247, 255, 0.75),
inset 0 0 0 1.2px rgba(255, 255, 255, 0.45);
}
.liquid-drops__drop--md {
width: clamp(.9rem, 1.85vw, 1.35rem);
height: clamp(.78rem, 1.6vw, 1.12rem);
opacity: 1;
--cast-x: 3.8px;
--cast-y: 3.8px;
--cast-op: .92;
box-shadow:
inset 2.2px 2.2px 3.5px #ffffff,
inset -8px -8px 18px #00f7ff,
inset -2.5px -2.5px 7px #ffffff,
0 0 14px rgba(0, 247, 255, 0.70),
inset 0 0 0 1.1px rgba(255, 255, 255, 0.40);
}
.liquid-drops__drop--sm {
width: clamp(.45rem, 1.05vw, .72rem);
height: clamp(.38rem, .9vw, .62rem);
opacity: 1;
--cast-x: 2.2px;
--cast-y: 2.2px;
--cast-op: .88;
}
.liquid-drops__drop--xs {
width: clamp(.24rem, .58vw, .4rem);
height: clamp(.2rem, .5vw, .35rem);
opacity: 1;
--cast-x: 1.2px;
--cast-y: 1.2px;
--cast-op: .80;
}
.liquid-drops__drop--lg::before {
left: 6%;
top: 4%;
width: 48%;
height: 42%;
}
.liquid-drops__drop--md::before {
left: 7%;
top: 4%;
width: 46%;
height: 40%;
}
/*
* Positions: Large/Medium drops strictly in outer non-text margin corners.
* Hundreds of Micro/Smallest condensation drops densely clustered in Lower-Left and Lower-Right/Right-side corners.
*/
/* 2 Large Drops: strictly far upper-right & far lower-left outer margins */
.liquid-drops__n0 { top: 4%; right: 4%; left: auto; --drop-rot: 12deg; --cast-x: 6px; --cast-y: 6px; border-radius: 52% 48% 56% 44% / 48% 52% 46% 54%; }
.liquid-drops__n1 { top: 84%; left: 3%; right: auto; --drop-rot: -10deg; --cast-x: 5px; --cast-y: 5px; border-radius: 46% 54% 50% 50% / 54% 46% 52% 48%; }
/* 4 Medium Drops: strictly outer boundary corners away from text */
.liquid-drops__n2 { top: 5%; left: 3%; right: auto; --drop-rot: -16deg; --cast-x: 4px; --cast-y: 4px; border-radius: 58% 42% 48% 52% / 44% 56% 50% 50%; }
.liquid-drops__n3 { top: 52%; left: 1.5%; right: auto; --drop-rot: 8deg; --cast-x: 3.5px; --cast-y: 3.5px; border-radius: 48% 52% 42% 58% / 52% 48% 55% 45%; }
.liquid-drops__n4 { top: 86%; right: 4%; left: auto; --drop-rot: 18deg; --cast-x: 4px; --cast-y: 4px; border-radius: 40% 60% 52% 48% / 50% 50% 46% 54%; }
.liquid-drops__n5 { top: 68%; right: 15%; left: auto; --drop-rot: -12deg; --cast-x: 3.8px; --cast-y: 3.8px; border-radius: 50% 50% 46% 54% / 52% 48% 50% 50%; }
/* Small & Micro Drops — Densely focused in Lower-Left & Right/Lower-Right corners */
.liquid-drops__n6 { top: 65%; right: 12%; left: auto; --drop-rot: -8deg; --cast-x: 2.5px; --cast-y: 2.5px; border-radius: 50% 50% 48% 52% / 48% 52% 50% 50%; }
.liquid-drops__n7 { top: 70%; right: 3%; left: auto; --drop-rot: 20deg; --cast-x: 2.0px; --cast-y: 2.0px; border-radius: 42% 58% 50% 50% / 54% 46% 48% 52%; }
.liquid-drops__n8 { top: 74%; right: 10%; left: auto; --drop-rot: -4deg; --cast-x: 2.4px; --cast-y: 2.4px; border-radius: 56% 44% 46% 54% / 50% 50% 44% 56%; }
.liquid-drops__n9 { top: 60%; right: 20%; left: auto; --drop-rot: 14deg; --cast-x: 2.2px; --cast-y: 2.2px; border-radius: 48% 52% 58% 42% / 46% 54% 52% 48%; }
.liquid-drops__n10 { top: 75%; left: 2%; right: auto; --drop-rot: -12deg; --cast-x: 2.3px; --cast-y: 2.3px; border-radius: 52% 48% 44% 56% / 55% 45% 50% 50%; }
.liquid-drops__n11 { top: 78%; left: 8%; right: auto; --drop-rot: 6deg; --cast-x: 2.6px; --cast-y: 2.6px; border-radius: 46% 54% 52% 48% / 48% 52% 54% 46%; }
.liquid-drops__n12 { top: 82%; left: 2.5%; right: auto; --drop-rot: -18deg; --cast-x: 1.9px; --cast-y: 1.9px; border-radius: 54% 46% 48% 52% / 50% 50% 46% 54%; }
.liquid-drops__n13 { top: 86%; left: 12%; right: auto; --drop-rot: 10deg; --cast-x: 2.5px; --cast-y: 2.5px; border-radius: 40% 60% 50% 50% / 52% 48% 50% 50%; }
.liquid-drops__n14 { top: 90%; left: 14%; right: auto; --drop-rot: -6deg; --cast-x: 2.1px; --cast-y: 2.1px; border-radius: 50% 50% 56% 44% / 44% 56% 48% 52%; }
.liquid-drops__n15 { top: 78%; right: 6%; left: auto; --drop-rot: 16deg; --cast-x: 2.4px; --cast-y: 2.4px; border-radius: 48% 52% 42% 58% / 54% 46% 52% 48%; }
.liquid-drops__n16 { top: 92%; right: 16%; left: auto; --drop-rot: -14deg; --cast-x: 2.0px; --cast-y: 2.0px; border-radius: 58% 42% 50% 50% / 48% 52% 46% 54%; }
.liquid-drops__n17 { top: 72%; left: 6%; right: auto; --drop-rot: 8deg; --cast-x: 2.3px; --cast-y: 2.3px; border-radius: 44% 56% 54% 46% / 50% 50% 52% 48%; }
/* Micro droplets: dense lower-left & lower-right corner micro-scatter */
.liquid-drops__n18 { top: 68%; right: 8%; left: auto; --drop-rot: 4deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 50% 50% 48% 52% / 48% 52% 50% 50%; }
.liquid-drops__n19 { top: 72%; right: 14%; left: auto; --drop-rot: -18deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 42% 58% 50% 50% / 52% 48% 48% 52%; }
.liquid-drops__n20 { top: 76%; right: 7%; left: auto; --drop-rot: 14deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 56% 44% 46% 54% / 50% 50% 54% 46%; }
.liquid-drops__n21 { top: 80%; right: 18%; left: auto; --drop-rot: -6deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 48% 52% 54% 46% / 46% 54% 50% 50%; }
.liquid-drops__n22 { top: 66%; right: 18%; left: auto; --drop-rot: 22deg; --cast-x: 1.5px; --cast-y: 1.5px; border-radius: 54% 46% 48% 52% / 52% 48% 46% 54%; }
.liquid-drops__n23 { top: 84%; right: 4%; left: auto; --drop-rot: -10deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 46% 54% 50% 50% / 50% 50% 54% 46%; }
.liquid-drops__n24 { top: 88%; right: 14%; left: auto; --drop-rot: 16deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 50% 50% 42% 58% / 48% 52% 52% 48%; }
.liquid-drops__n25 { top: 62%; right: 18%; left: auto; --drop-rot: -4deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 58% 42% 52% 48% / 46% 54% 50% 50%; }
.liquid-drops__n26 { top: 74%; left: 6%; right: auto; --drop-rot: 12deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 44% 56% 48% 52% / 54% 46% 48% 52%; }
.liquid-drops__n27 { top: 80%; left: 1%; right: auto; --drop-rot: -20deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 52% 48% 56% 44% / 50% 50% 46% 54%; }
.liquid-drops__n28 { top: 84%; left: 10%; right: auto; --drop-rot: 8deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 48% 52% 46% 54% / 52% 48% 50% 50%; }
.liquid-drops__n29 { top: 88%; left: 4%; right: auto; --drop-rot: -14deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 46% 54% 52% 48% / 48% 52% 54% 46%; }
.liquid-drops__n30 { top: 76%; left: 9%; right: auto; --drop-rot: 18deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 54% 46% 50% 50% / 46% 54% 48% 52%; }
.liquid-drops__n31 { top: 92%; left: 9%; right: auto; --drop-rot: -8deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 50% 50% 44% 56% / 54% 46% 50% 50%; }
.liquid-drops__n32 { top: 70%; left: 4%; right: auto; --drop-rot: 6deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 42% 58% 52% 48% / 50% 50% 48% 52%; }
.liquid-drops__n33 { top: 82%; left: 4%; right: auto; --drop-rot: -16deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 56% 44% 48% 52% / 48% 52% 52% 48%; }
.liquid-drops__n34 { top: 86%; left: 10%; right: auto; --drop-rot: 10deg; --cast-x: 1.5px; --cast-y: 1.5px; border-radius: 48% 52% 54% 46% / 52% 48% 46% 54%; }
.liquid-drops__n35 { top: 90%; left: 2%; right: auto; --drop-rot: -12deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 52% 48% 50% 50% / 46% 54% 50% 50%; }
.liquid-drops__n36 { top: 94%; left: 8%; right: auto; --drop-rot: 14deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 46% 54% 48% 52% / 50% 50% 54% 46%; }
.liquid-drops__n37 { top: 96%; left: 16%; right: auto; --drop-rot: -6deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 50% 50% 56% 44% / 48% 52% 48% 52%; }
.liquid-drops__n38 { top: 78%; left: 1.5%; right: auto; --drop-rot: 20deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 44% 56% 50% 50% / 54% 46% 50% 50%; }
.liquid-drops__n39 { top: 82%; right: 12%; left: auto; --drop-rot: -8deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 58% 42% 48% 52% / 50% 50% 46% 54%; }
.liquid-drops__n40 { top: 88%; right: 4%; left: auto; --drop-rot: 12deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 48% 52% 52% 48% / 48% 52% 50% 50%; }
.liquid-drops__n41 { top: 94%; right: 8%; left: auto; --drop-rot: -18deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 42% 58% 46% 54% / 52% 48% 54% 46%; }
.liquid-drops__n42 { top: 86%; right: 18%; left: auto; --drop-rot: 8deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 54% 46% 50% 50% / 46% 54% 48% 52%; }
.liquid-drops__n43 { top: 74%; left: 10%; right: auto; --drop-rot: -10deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 50% 50% 48% 52% / 50% 50% 48% 52%; }
.liquid-drops__n44 { top: 82%; left: 2%; right: auto; --drop-rot: 16deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 46% 54% 54% 46% / 54% 46% 50% 50%; }
.liquid-drops__n45 { top: 68%; right: 3%; left: auto; --drop-rot: -14deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 52% 48% 44% 56% / 48% 52% 52% 48%; }
.liquid-drops__n46 { top: 74%; right: 3%; left: auto; --drop-rot: 10deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 48% 52% 50% 50% / 52% 48% 46% 54%; }
.liquid-drops__n47 { top: 84%; left: 1%; right: auto; --drop-rot: -6deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 44% 56% 48% 52% / 50% 50% 54% 46%; }
.liquid-drops__n48 { top: 62%; right: 5%; left: auto; --drop-rot: 8deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 50% 50% 48% 52% / 48% 52% 50% 50%; }
.liquid-drops__n49 { top: 66%; right: 10%; left: auto; --drop-rot: -14deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 46% 54% 52% 48% / 52% 48% 48% 52%; }
.liquid-drops__n50 { top: 70%; right: 3%; left: auto; --drop-rot: 18deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 54% 46% 48% 52% / 50% 50% 46% 54%; }
.liquid-drops__n51 { top: 68%; right: 15%; left: auto; --drop-rot: -6deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 48% 52% 54% 46% / 46% 54% 50% 50%; }
.liquid-drops__n52 { top: 74%; right: 7%; left: auto; --drop-rot: 12deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 52% 48% 46% 54% / 54% 46% 50% 50%; }
.liquid-drops__n53 { top: 72%; right: 18%; left: auto; --drop-rot: -16deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 44% 56% 50% 50% / 50% 50% 52% 48%; }
.liquid-drops__n54 { top: 78%; right: 2%; left: auto; --drop-rot: 4deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 56% 44% 48% 52% / 48% 52% 52% 48%; }
.liquid-drops__n55 { top: 76%; right: 11%; left: auto; --drop-rot: 20deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 50% 50% 42% 58% / 52% 48% 48% 52%; }
.liquid-drops__n56 { top: 80%; right: 6%; left: auto; --drop-rot: -10deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 46% 54% 54% 46% / 48% 52% 50% 50%; }
.liquid-drops__n57 { top: 82%; right: 13%; left: auto; --drop-rot: 14deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 52% 48% 50% 50% / 54% 46% 48% 52%; }
.liquid-drops__n58 { top: 84%; right: 1.5%; left: auto; --drop-rot: -4deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 48% 52% 46% 54% / 50% 50% 54% 46%; }
.liquid-drops__n59 { top: 86%; right: 9%; left: auto; --drop-rot: 16deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 54% 46% 52% 48% / 46% 54% 50% 50%; }
.liquid-drops__n60 { top: 88%; right: 5%; left: auto; --drop-rot: -18deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 42% 58% 48% 52% / 52% 48% 50% 50%; }
.liquid-drops__n61 { top: 90%; right: 11%; left: auto; --drop-rot: 8deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 50% 50% 54% 46% / 48% 52% 46% 54%; }
.liquid-drops__n62 { top: 92%; right: 3%; left: auto; --drop-rot: -12deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 56% 44% 50% 50% / 50% 50% 48% 52%; }
.liquid-drops__n63 { top: 64%; right: 20%; left: auto; --drop-rot: 10deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 48% 52% 52% 48% / 54% 46% 50% 50%; }
.liquid-drops__n64 { top: 70%; right: 22%; left: auto; --drop-rot: -8deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 46% 54% 48% 52% / 50% 50% 52% 48%; }
.liquid-drops__n65 { top: 76%; right: 24%; left: auto; --drop-rot: 22deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 52% 48% 44% 56% / 48% 52% 50% 50%; }
.liquid-drops__n66 { top: 82%; right: 20%; left: auto; --drop-rot: -14deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 44% 56% 52% 48% / 52% 48% 46% 54%; }
.liquid-drops__n67 { top: 88%; right: 18%; left: auto; --drop-rot: 6deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 50% 50% 48% 52% / 46% 54% 50% 50%; }
.liquid-drops__n68 { top: 94%; right: 8%; left: auto; --drop-rot: -6deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 54% 46% 50% 50% / 50% 50% 54% 46%; }
.liquid-drops__n69 { top: 60%; right: 8%; left: auto; --drop-rot: 14deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 48% 52% 56% 44% / 52% 48% 48% 52%; }
.liquid-drops__n70 { top: 58%; right: 14%; left: auto; --drop-rot: -20deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 46% 54% 50% 50% / 48% 52% 52% 48%; }
.liquid-drops__n71 { top: 94%; right: 15%; left: auto; --drop-rot: 12deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 52% 48% 48% 52% / 54% 46% 50% 50%; }
.liquid-drops__n72 { top: 66%; right: 1.5%; left: auto; --drop-rot: -2deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 50% 50% 46% 54% / 50% 50% 48% 52%; }
.liquid-drops__n73 { top: 72%; right: 1%; left: auto; --drop-rot: 18deg; --cast-x: 1.4px; --cast-y: 1.4px; border-radius: 44% 56% 52% 48% / 48% 52% 50% 50%; }
.liquid-drops__n74 { top: 86%; right: 22%; left: auto; --drop-rot: -10deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 56% 44% 48% 52% / 52% 48% 50% 50%; }
.liquid-drops__n75 { top: 78%; right: 16%; left: auto; --drop-rot: 8deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 48% 52% 54% 46% / 46% 54% 48% 52%; }
.liquid-drops__n76 { top: 90%; right: 24%; left: auto; --drop-rot: -16deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 52% 48% 50% 50% / 50% 50% 52% 48%; }
.liquid-drops__n77 { top: 62%; right: 16%; left: auto; --drop-rot: 4deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 46% 54% 48% 52% / 54% 46% 50% 50%; }
.liquid-drops__n78 { top: 84%; right: 14%; left: auto; --drop-rot: 20deg; --cast-x: 1.1px; --cast-y: 1.1px; border-radius: 50% 50% 42% 58% / 48% 52% 54% 46%; }
.liquid-drops__n79 { top: 96%; right: 4%; left: auto; --drop-rot: -8deg; --cast-x: 1.3px; --cast-y: 1.3px; border-radius: 54% 46% 52% 48% / 50% 50% 46% 54%; }
.liquid-drops__n80 { top: 74%; right: 26%; left: auto; --drop-rot: 10deg; --cast-x: 1.0px; --cast-y: 1.0px; border-radius: 48% 52% 50% 50% / 52% 48% 48% 52%; }
.liquid-drops__n81 { top: 68%; right: 26%; left: auto; --drop-rot: -12deg; --cast-x: 1.2px; --cast-y: 1.2px; border-radius: 44% 56% 46% 54% / 50% 50% 52% 48%; }
/* Extra hero micro condensation cluster nodes (n82–n160) */
.liquid-drops__n82 { top: 78%; left: 18%; --drop-rot: 6deg; --cast-x: 1.1px; --cast-y: 1.1px; }
.liquid-drops__n83 { top: 84%; left: 22%; --drop-rot: -8deg; --cast-x: 1.0px; --cast-y: 1.0px; }
.liquid-drops__n84 { top: 88%; left: 20%; --drop-rot: 14deg; --cast-x: 1.2px; --cast-y: 1.2px; }
.liquid-drops__n85 { top: 92%; left: 24%; --drop-rot: -4deg; --cast-x: 1.1px; --cast-y: 1.1px; }
.liquid-drops__n86 { top: 80%; right: 22%; left: auto; --drop-rot: 10deg; --cast-x: 1.3px; --cast-y: 1.3px; }
.liquid-drops__n87 { top: 86%; right: 26%; left: auto; --drop-rot: -14deg; --cast-x: 1.0px; --cast-y: 1.0px; }
.liquid-drops__n88 { top: 92%; right: 20%; left: auto; --drop-rot: 8deg; --cast-x: 1.2px; --cast-y: 1.2px; }
.liquid-drops__n89 { top: 96%; right: 24%; left: auto; --drop-rot: -6deg; --cast-x: 1.1px; --cast-y: 1.1px; }
/* Variants: drops stay full-strength; only field/veil stay soft atmosphere */
.liquid-drops--hero { opacity: 1; }
.liquid-drops--hero .liquid-drops__field { opacity: .72; }
.liquid-drops--hero .liquid-drops__veil { opacity: .6; }
.liquid-drops--portfolio .liquid-drops__drop--hero-lr,
.liquid-drops--footer .liquid-drops__drop--hero-lr { display: none; }
.liquid-drops--portfolio {
z-index: 0;
border-radius: inherit;
opacity: 1;
}
.liquid-drops--portfolio .liquid-drops__field { opacity: .45; }
.liquid-drops--portfolio .liquid-drops__veil { opacity: .48; }
.liquid-drops--portfolio .liquid-drops__drop--lg {
width: clamp(1rem, 2.2vw, 1.55rem);
height: clamp(.85rem, 1.85vw, 1.3rem);
}
.liquid-drops--portfolio .liquid-drops__drop--md {
width: clamp(.7rem, 1.45vw, 1rem);
height: clamp(.6rem, 1.2vw, .85rem);
}
.liquid-drops--footer {
z-index: 0;
opacity: 1;
border-radius: 0;
}
.liquid-drops--footer .liquid-drops__field { opacity: .48; }
.liquid-drops--footer .liquid-drops__veil { opacity: .5; }
.liquid-drops--footer .liquid-drops__drop--lg {
width: clamp(1.15rem, 2.5vw, 1.75rem);
height: clamp(1rem, 2.1vw, 1.45rem);
}
/*
* ==========================================================================
* Oceanic Prism Hero & Water Ripples Footer
* ==========================================================================
*/
/*
* ==========================================================================
* Oceanic Prism Hero & Water Ripples Footer
* ==========================================================================
*/
/* Oceanic prism wash lives on the stage (not a hard-edged hero box) */
.hero-stage {
background:
radial-gradient(ellipse 95% 70% at 75% 12%, rgba(0, 247, 255, 0.20), transparent 68%),
radial-gradient(ellipse 80% 60% at 12% 55%, rgba(160, 45, 255, 0.14), transparent 62%),
linear-gradient(180deg,
rgba(5, 9, 26, 0.55) 0%,
rgba(0, 36, 66, 0.35) 38%,
rgba(0, 18, 36, 0.18) 68%,
transparent 100%
);
}
.liquid-ambient-prism {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
background:
radial-gradient(ellipse 70% 50% at 50% 30%, rgba(0, 225, 255, 0.22), transparent 70%),
radial-gradient(ellipse 60% 60% at 85% 85%, rgba(200, 80, 255, 0.20), transparent 60%);
animation: heroPrismShimmer 10s ease-in-out infinite alternate;
}
@keyframes heroPrismShimmer {
0% { transform: scale(1) translateY(0); opacity: 0.85; filter: hue-rotate(0deg); }
50% { transform: scale(1.05) translateY(-8px); opacity: 1; filter: hue-rotate(12deg); }
100% { transform: scale(0.98) translateY(6px); opacity: 0.88; filter: hue-rotate(-8deg); }
}
.liquid-ambient-donut-prism {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
}
/* Untrading Logo Donut Ripple Proportions: Outer Radius R = 2r (Inner Radius) */
.donut-ripple {
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%) scale(0.3);
width: 260px;
height: 260px;
border-radius: 50%;
/* Donut ring proportion: inner hole radius 65px, stroke width 65px (Outer R = 130px = 2r) */
box-shadow:
0 0 0 65px rgba(3, 218, 197, 0.22),
0 0 42px rgba(0, 247, 255, 0.52),
inset 0 0 28px rgba(3, 218, 197, 0.38);
border: 2px solid rgba(0, 247, 255, 0.72);
opacity: 0;
pointer-events: none;
}
.donut-ripple-1 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) infinite; }
.donut-ripple-2 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) 2.8s infinite; }
.donut-ripple-3 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) 5.6s infinite; }
@keyframes donutExpand {
0% { transform: translate(-50%, -50%) scale(0.25); opacity: 0.85; }
65% { opacity: 0.45; }
100% { transform: translate(-50%, -50%) scale(3.0); opacity: 0; }
}
/*
* Oceanic liquid-glass surface — shared by hero, portfolio, KPI tiles,
* and scan asset shells so mobile and desktop read the same language.
* Layered fill keeps the glass look even when nested backdrop-filter is weak.
*/
.hero-inner,
.asset-card,
.asset-card-shell,
.portfolio,
.panel,
.filters,
.home-subnav,
.kpi,
.lesson-card,
.review-card,
.method-card,
.fund-card,
.site-disclaimer {
backdrop-filter: blur(28px) saturate(190%);
-webkit-backdrop-filter: blur(28px) saturate(190%);
/* White wash top-left → mint pool lower-right */
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 32%, transparent 52%),
linear-gradient(145deg, transparent 35%, rgba(0, 247, 255, 0.05) 62%, rgba(0, 200, 185, 0.10) 100%),
rgba(2, 24, 48, 0.48);
border: 1px solid rgba(0, 247, 255, 0.32);
box-shadow:
0 12px 40px rgba(0, 8, 24, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 247, 255, 0.18);
}
/* Footer full-bleed wash (no forced blend into main — clean section start) */
footer.site-footer,
footer.site-footer--drops {
position: relative;
overflow: hidden;
isolation: isolate;
flex: 0 0 auto;
width: 100%;
max-width: none;
margin: 3rem 0 0 0;
margin-inline: 0;
border-radius: 0;
border-top: 1px solid rgba(0, 247, 255, 0.18);
border-bottom: 0;
padding:
2.25rem
max(1rem, env(safe-area-inset-right, 0px))
max(2rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px));
background:
radial-gradient(ellipse 90% 80% at 50% 30%, rgba(0, 247, 255, 0.14), transparent 70%),
linear-gradient(160deg, #05091a 0%, #001f3b 50%, #040817 100%);
}
footer.site-footer::before,
footer.site-footer--drops::before {
content: none;
display: none;
}
.footer-ripples {
position: absolute;
inset: 0;
pointer-events: none;
}
.footer-ripple-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1.5px solid rgba(0, 247, 255, 0.45);
box-shadow: 0 0 24px rgba(0, 247, 255, 0.3), inset 0 0 24px rgba(0, 247, 255, 0.18);
pointer-events: none;
}
.footer-ripple-ring.ring-1 { width: 220px; height: 120px; animation: footerRipple 7s ease-out infinite; }
.footer-ripple-ring.ring-2 { width: 480px; height: 260px; animation: footerRipple 7s ease-out 2.3s infinite; }
.footer-ripple-ring.ring-3 { width: 780px; height: 440px; animation: footerRipple 7s ease-out 4.6s infinite; }
@keyframes footerRipple {
0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.85; }
100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; }
}
.footer-inner {
position: relative;
z-index: 2;
width: min(var(--content-w, 1140px), calc(100vw - 2rem));
margin: 0 auto;
text-align: left;
}
footer.site-footer > .footer-row,
footer.site-footer > .footer-meta,
footer.site-footer--drops > .footer-row,
footer.site-footer--drops > .footer-meta,
.footer-inner > .footer-row,
.footer-inner > .footer-meta {
position: relative;
z-index: 2;
width: min(var(--content-w, 1140px), calc(100vw - 2rem));
margin: 0 auto;
text-align: left;
justify-content: flex-start;
}
@media (prefers-reduced-motion: reduce) {
.liquid-drops__drop,
.liquid-drops__field {
animation: none !important;
transition: none !important;
}
}
/* —— Responsive UI corrections (canonical final layer) —— */
/*
* M3 coherence pass: one financial palette, one interaction grammar.
* Constructive / SG = teal→green. Adverse / SC = purple→red.
* Objective classes remain neutral: A uses brand teal, F uses analytical purple.
*/
.good,
.badge.good,
.badge.ok,
.kpi .tone-mark.good,
table.compare td.good,
.hard-tape-chip span.good { color: var(--arc-constructive) !important; }
.bad,
.badge.bad,
.kpi .tone-mark.bad,
table.compare td.bad,
.method-not h3 { color: var(--arc-adverse) !important; }
.badge.good,
.badge.ok,
.status-chip[data-health="resilient"][aria-pressed="true"] {
border-color: color-mix(in srgb, var(--arc-constructive) 42%, transparent) !important;
background: color-mix(in srgb, var(--arc-constructive) 12%, transparent) !important;
}
.badge.bad,
.status-chip[data-health="fragile"][aria-pressed="true"] {
border-color: color-mix(in srgb, var(--arc-adverse) 42%, transparent) !important;
background: color-mix(in srgb, var(--arc-adverse) 12%, transparent) !important;
}
a.asset-card[data-class-label="A"],
.asset-card-shell[data-class-label="A"] {
border-color: color-mix(in srgb, var(--arc-brand) 34%, var(--glass-border)) !important;
}
a.asset-card[data-class-label="F"],
.asset-card-shell[data-class-label="F"] {
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 34%, var(--glass-border)) !important;
}
a.asset-card[data-class-label="F"]:hover,
.asset-card-shell[data-class-label="F"]:hover {
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 62%, var(--glass-border-bright)) !important;
box-shadow: var(--md-sys-elevation-level2), var(--glass-edge), var(--arc-purple-glow) !important;
}
table.compare tr.outlier-low td {
background: color-mix(in srgb, var(--arc-adverse) 7%, transparent) !important;
}
table.compare tr.outlier-high td {
background: color-mix(in srgb, var(--arc-constructive) 7%, transparent) !important;
}
/* Calm hierarchy: consistent readable measure, numeric rhythm, and section spacing. */
.window-read-copy,
.method-block p,
.method-block li,
.faq-item p,
.section-head p { max-width: 72ch; }
.kpi .val,
.stat-bar__val,
table.compare td,
.asset-window-line { font-variant-numeric: tabular-nums; }
.section[id] { scroll-margin-top: calc(var(--subnav-sticky-top) + 4rem); }
.section-head {
gap: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}
.section-head .analytical-title { margin-bottom: 0; }
button:disabled,
[aria-disabled="true"] {
cursor: not-allowed !important;
opacity: .48;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
.panel,
.asset-card-shell,
.kpi,
.method-card,
.lesson-card,
.faq-item {
transition:
transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.kpi:hover { transform: translateY(-2px); }
}
/* Card-label tooltips must clear neighboring cards, sticky chrome, and clipped KPI wells. */
@media (hover: hover) and (pointer: fine) {
[data-tip]::after { z-index: 1200; }
[data-tip]:hover,
[data-tip]:focus { z-index: 1201; }
.kpi:has([data-tip]:hover),
.kpi:has([data-tip]:focus),
.metric-row:has([data-tip]:hover),
.metric-row:has([data-tip]:focus),
.verdict-kpis:has([data-tip]:hover),
.verdict-kpis:has([data-tip]:focus),
.portfolio:has([data-tip]:hover),
.portfolio:has([data-tip]:focus),
.asset-card-main:has([data-tip]:hover),
.asset-card-main:has([data-tip]:focus),
.asset-card-shell:has([data-tip]:hover),
.asset-card-shell:has([data-tip]:focus),
.panel:has([data-tip]:hover),
.panel:has([data-tip]:focus) {
position: relative;
z-index: 1100;
overflow: visible !important;
}
}
/* Hard-tape cards keep a normal repeatable width regardless of item count. */
.hard-tape-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 12rem));
align-items: stretch;
}
.hard-tape-chip { min-width: 0; width: 100%; }
@media (max-width: 720px) {
/* Mobile header navigation already returns to Results; do not cover footer content. */
.fab-back { display: none !important; }
/* Give every mobile secondary-navigation control breathing room above it. */
.page-jump,
.method-jump,
.home-page-jump,
.asset-page-jump {
margin-top: var(--space-4) !important;
}
/* One rounded glass surface: the wrapper owns the shape; the select stays clear. */
.page-jump select,
.method-jump select,
.page-jump__select,
.page-jump select:focus,
.method-jump select:focus,
.page-jump__select:focus {
border: 0 !important;
border-radius: inherit !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Expanded mobile navigation and jump controls follow the active light palette. */
html[data-theme="light"] .header-menu,
html[data-theme="light"] .page-jump,
html[data-theme="light"] .method-jump,
html[data-theme="light"] .home-page-jump,
html[data-theme="light"] .asset-page-jump {
color-scheme: light !important;
color: var(--md-sys-color-on-surface, #0a1c1a) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest, #fff) 96%, transparent) !important;
box-shadow: var(--md-sys-elevation-level2) !important;
}
/* Status is a stable heading, not part of a horizontally restored scroll position. */
.filters-status {
overflow: visible !important;
flex-wrap: wrap !important;
padding-bottom: 0;
}
.filters-status__label {
flex: 0 0 100% !important;
width: 100%;
margin: 0 0 .1rem !important;
}
/* Home chart gets a little more vertical room for series and crosshair readouts. */
.asset-card-chart { min-height: 270px; }
.spark { min-height: 240px; height: 250px; }
.hard-tape-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
}
.hard-tape-chip {
min-width: 0;
width: 100%;
padding: .7rem .75rem;
}
}
@media (max-width: 420px) {
.hard-tape-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-transparency: reduce) {
.liquid-drops__field { opacity: .15; }
.liquid-drops__veil { opacity: .2; }
.liquid-drops__glass-sh { opacity: .35; }
footer.site-footer,
footer.site-footer--drops {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--md-sys-color-surface-container, var(--panel-2));
}
}
@media (max-width: 720px) {
.mobile-footer-reality {
display: block;
margin: .8rem auto 0;
max-width: 34rem;
color: var(--muted);
font-size: .78rem;
font-style: italic;
line-height: 1.45;
text-align: center;
opacity: .92;
}
/* drops stay full strength; only thin field atmosphere */
.liquid-drops--hero,
.liquid-drops--portfolio,
.liquid-drops--footer { opacity: 1; }
/* thin some mid-cluster xs on small screens; keep cluster cores */
.liquid-drops__n23,
.liquid-drops__n24,
.liquid-drops__n29,
.liquid-drops__n30,
.liquid-drops__n36,
.liquid-drops__n41,
.liquid-drops__n42,
.liquid-drops__n43,
.liquid-drops__n44,
.liquid-drops__n45,
.liquid-drops__n46 { display: none; }
.liquid-drops__field { opacity: .38; }
}
@media (hover: none) and (pointer: coarse) {
.liquid-drops { opacity: 1; }
.liquid-drops__field { opacity: .36; }
}
.hero-inner {
position: relative;
z-index: 2;
display: grid;
width: min(var(--content-w), calc(100vw - 2.25rem));
margin: 0 auto;
gap: 1.65rem;
padding: 1.85rem 1.5rem 1.5rem;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--accent-2);
font-size: .7rem;
font-weight: 750;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .95;
}
.hero-kicker::before {
content: "";
width: .45rem;
height: .45rem;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 12px rgba(18, 207, 192, .8);
flex-shrink: 0;
}
.hero h1 {
margin: .55rem 0 0;
font-size: clamp(2.45rem, 5.2vw, 3.85rem);
line-height: 1.05;
letter-spacing: -.045em;
font-weight: 800;
max-width: 13ch;
padding-bottom: .14em;
background: linear-gradient(125deg, #ffffff 6%, #f0fffc 32%, #a8fff4 62%, #7ee8ff 88%, #d8c8ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-wrap: balance;
filter: drop-shadow(0 2px 24px rgba(80, 230, 220, .12));
}
.hero-lead {
margin: 1.15rem 0 0;
color: var(--muted);
max-width: 42rem;
font-size: 1.05rem;
line-height: 1.65;
}
.hero-lead strong { color: var(--txt); font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
/* M3 filled button (primary) + liquid sheen */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--md-sys-touch-target, 48px);
min-width: var(--md-sys-touch-target, 48px);
padding: 0 1.5rem;
border-radius: var(--md-sys-shape-corner-full, 999px);
border: 0;
background: var(--md-sys-color-primary, #03dac5);
color: var(--md-sys-color-on-primary, #003731);
font-weight: 700;
cursor: pointer;
text-decoration: none;
letter-spacing: .01em;
overflow: hidden;
isolation: isolate;
transition:
box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard),
background-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard),
transform var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate);
box-shadow: var(--md-sys-elevation-level1);
}
.btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 40%, transparent 58%);
pointer-events: none;
z-index: 0;
}
.btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
opacity: 0;
pointer-events: none;
z-index: 1;
transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard);
}
.btn:hover {
box-shadow: var(--md-sys-elevation-level2), 0 0 28px rgba(3, 218, 197, .22);
text-decoration: none;
color: var(--md-sys-color-on-primary, #003731);
transform: translateY(-1px);
}
.btn:hover::after { opacity: var(--md-sys-state-hover-opacity, 0.08); }
.btn:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 3px;
}
.btn:focus-visible::after { opacity: var(--md-sys-state-focus-opacity, 0.12); }
.btn:active {
transform: translateY(0);
box-shadow: var(--md-sys-elevation-level1);
}
.btn:active::after { opacity: var(--md-sys-state-pressed-opacity, 0.12); }
/* M3 outlined button */
.btn.ghost {
background: color-mix(in srgb, var(--md-sys-color-surface) 40%, transparent);
color: var(--md-sys-color-primary, var(--accent));
border: 1px solid var(--md-sys-color-outline, var(--glass-border-bright));
box-shadow: none;
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
filter: none;
}
.btn.ghost::before {
background:
linear-gradient(180deg, rgba(255,255,255,.10), transparent 50%),
color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.btn.ghost:hover {
border-color: var(--md-sys-color-primary);
color: var(--md-sys-color-primary);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
box-shadow: none;
filter: none;
}
.btn.ghost:hover::after { opacity: 0; }
.btn.tiny {
min-height: 40px;
padding: 0 1rem;
font-size: var(--md-sys-typescale-label-large-size, .875rem);
}
/* Hero ambient layers (positioned by .hero-stage > .hero-ambient) */
.hero-ambient {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-ambient .liquid-drops {
z-index: 2;
}
.hero-ambient .fog-logo {
position: absolute;
border-radius: 50%;
/* Static soft bloom only — no animated will-change layers during scroll */
background: radial-gradient(
circle,
transparent 0%,
transparent 46%,
rgba(2, 95, 100, 0.06) 50%,
rgba(3, 130, 135, 0.10) 65%,
rgba(3, 140, 140, 0.08) 82%,
rgba(2, 90, 95, 0.04) 94%,
transparent 100%
);
filter: blur(36px);
opacity: .4;
will-change: transform;
}
.hero-ambient .fog-logo-a {
width: min(55vw, 340px);
height: min(55vw, 340px);
left: -8%;
top: -28%;
animation: fogDriftA 36s ease-in-out infinite alternate;
}
.hero-ambient .fog-logo-b {
width: min(38vw, 220px);
height: min(38vw, 220px);
left: 22%;
bottom: -36%;
filter: blur(44px);
opacity: .4;
animation: fogDriftB 44s ease-in-out infinite alternate;
}
.hero-ambient .fog-core {
position: absolute;
left: 14%;
top: 28%;
width: min(28vw, 160px);
height: min(28vw, 160px);
border-radius: 50%;
background: radial-gradient(circle, rgba(3, 120, 130, 0.08) 0%, transparent 70%);
filter: blur(40px);
opacity: .35;
animation: fogDriftA 30s ease-in-out infinite alternate-reverse;
}
/* —— Hero right column: KPIs + disclaimer —— */
.hero-aside {
display: flex;
flex-direction: column;
gap: .75rem;
min-width: 0;
align-self: stretch;
}
.site-disclaimer--hero-aside {
margin: 0;
max-width: none;
font-size: .74rem;
line-height: 1.5;
color: var(--muted-soft);
border-color: rgba(158, 255, 241, 0.08);
background:
linear-gradient(180deg, rgba(255,255,255,.025), transparent),
rgba(0, 0, 0, 0.14);
}
/* —— Portfolio strip —— */
.portfolio {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(0, auto);
gap: .7rem;
margin-top: 0;
align-content: start;
align-self: start;
min-width: 0;
flex: 1 1 auto;
padding: .85rem;
border-radius: calc(var(--r-lg) + 4px);
/* Glass fill/border/blur come from shared oceanic surface block */
/* Avoid overflow:hidden here — it kills nested KPI backdrop-filter on iOS */
overflow: visible;
isolation: isolate;
}
.portfolio > .kpi {
position: relative;
z-index: 2;
}
.portfolio .kpi {
position: relative;
padding: 1.05rem 1.05rem .95rem;
min-height: 0;
overflow: hidden;
}
.portfolio .kpi::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(158,255,241,.45), transparent);
opacity: .7;
}
.portfolio .kpi .val {
margin-top: .4rem;
font-size: clamp(1.55rem, 2.4vw, 1.95rem);
line-height: 1.08;
letter-spacing: -.045em;
background: linear-gradient(180deg, #fff 20%, #c9fff5 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.kpi--reserve {
border-color: rgba(3,218,197,.48) !important;
background:
linear-gradient(145deg, rgba(3,218,197,.16), rgba(9,24,28,.35)),
rgba(2, 18, 22, 0.32) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 36px rgba(3,218,197,.12);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
}
.kpi--reserve .lbl { color: var(--accent-2) !important; }
.kpi--reserve .val {
background: linear-gradient(180deg, #fff 10%, var(--accent-2) 90%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
.ratio-context {
position: relative;
margin: 0 0 var(--space-5);
padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + .15rem);
border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 35%, transparent);
border-radius: var(--md-sys-shape-corner-extra-large, var(--r-lg));
background:
linear-gradient(115deg, rgba(181, 112, 255, .12) 0%, rgba(3, 218, 197, .05) 42%, transparent 100%),
color-mix(in srgb, var(--md-sys-color-surface-container) 82%, transparent);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255, 255, 255, .10);
overflow: hidden;
transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
/* Gradient edge highlight — left rail */
.ratio-context::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: var(--r-lg) 0 0 var(--r-lg);
background: linear-gradient(
180deg,
rgba(224, 180, 255, .98) 0%,
rgba(181, 112, 255, .95) 18%,
rgba(143, 248, 234, .88) 52%,
rgba(3, 218, 197, .92) 78%,
rgba(12, 207, 192, .75) 100%
);
box-shadow:
0 0 14px rgba(181, 112, 255, .55),
0 0 22px rgba(3, 218, 197, .35),
2px 0 18px rgba(181, 112, 255, .22);
pointer-events: none;
z-index: 1;
}
/* Soft outer glow wash along the edge */
.ratio-context::after {
content: "";
position: absolute;
left: 0;
top: 8%;
bottom: 8%;
width: 48px;
background: linear-gradient(
90deg,
rgba(144, 0, 201, .14) 0%,
rgba(3, 218, 197, .08) 42%,
transparent 100%
);
pointer-events: none;
z-index: 0;
}
.ratio-context:hover {
border-color: rgba(201, 107, 255, .42);
box-shadow:
0 20px 52px rgba(40, 12, 72, .18),
0 10px 28px rgba(0, 0, 0, .2),
inset 0 1px 0 rgba(255, 255, 255, .12),
0 0 32px rgba(201, 107, 255, .10);
}
.ratio-context summary {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: .85rem;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.ratio-context summary::-webkit-details-marker { display: none; }
.ratio-context summary:focus-visible {
outline: 2px solid rgba(201, 107, 255, .9);
outline-offset: 4px;
border-radius: 8px;
}
/* +/- control: purple rim + subtle teal fill (match active subnav pill) */
.ratio-context__toggle {
display: grid;
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 55%, transparent);
border-radius: 999px;
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.ratio-context__toggle::before {
content: '+';
transform: translateY(-.02em);
}
.ratio-context[open] .ratio-context__toggle::before { content: '−'; }
.ratio-context summary:hover .ratio-context__toggle {
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 75%, transparent);
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
box-shadow:
0 0 12px color-mix(in srgb, var(--md-sys-color-tertiary) 22%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .16);
transform: scale(1.04);
}
.ratio-context > .ratio-context__body {
position: relative;
z-index: 2;
display: none;
}
.ratio-context[open] > .ratio-context__body {
display: block;
padding-top: .72rem;
animation: ratioBodyIn .28s var(--ease);
}
@keyframes ratioBodyIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ratio-context h2 {
margin: 0;
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--txt);
line-height: 1.35;
}
.ratio-context p {
max-width: 76rem;
margin: 0;
color: var(--muted);
font-size: .88rem;
line-height: 1.65;
}
.ratio-context p + p { margin-top: .5rem; }
.ratio-context strong { color: var(--txt); }
.kpi {
padding: 1rem 1.1rem;
border-radius: var(--r);
/* Glass fill/border/blur come from shared oceanic surface block */
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100%;
transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
}
.kpi:hover {
border-color: rgba(0, 247, 255, .45);
box-shadow:
0 10px 32px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0, 247, 255, .16),
0 0 24px rgba(3,218,197,.1);
transform: translateY(-2px);
background:
linear-gradient(155deg, rgba(255,255,255,.14) 0%, transparent 48%),
linear-gradient(180deg, rgba(0, 247, 255, 0.08), transparent 55%),
rgba(4, 28, 52, 0.55);
}
.kpi .lbl {
color: var(--muted-soft);
font-size: .64rem;
font-weight: 750;
letter-spacing: .13em;
text-transform: uppercase;
min-height: 3.4em;
display: flex;
align-items: flex-start;
}
.kpi .val {
margin-top: .25rem;
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1.05;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "ss01" 1;
}
.kpi .subname {
margin-top: .2rem;
color: var(--muted);
font-size: .72rem;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.25;
text-transform: none;
}
.kpi .hint {
margin-top: auto;
padding-top: .45rem;
color: var(--muted-soft);
font-size: .74rem;
min-height: 2.4em;
line-height: 1.4;
opacity: .92;
}
/* —— Section —— */
.section { margin-top: var(--space-6); }
.section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid rgba(158, 255, 241, 0.08);
position: relative;
}
.section-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 4.5rem;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), transparent);
box-shadow: 0 0 12px rgba(18, 207, 192, .35);
}
.section-head h2 {
margin: 0;
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
letter-spacing: -.04em;
font-weight: 800;
}
.section-head p {
margin: .4rem 0 0;
color: var(--muted);
font-size: .92rem;
max-width: 42rem;
line-height: 1.55;
}
/* —— Mode toggle —— */
.assets-mode-rail {
display: flex;
justify-content: flex-end;
margin: -.45rem 0 .9rem;
}
.mode-toggle {
display: inline-flex;
padding: .22rem;
border-radius: 999px;
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
rgba(0, 0, 0, 0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
gap: .15rem;
}
.mode-toggle button {
border: 0;
background: transparent;
color: var(--muted);
padding: .42rem .9rem;
border-radius: 999px;
font-weight: 700;
font-size: .82rem;
cursor: pointer;
transition: color .18s, background .18s;
}
.mode-toggle button:hover { color: var(--txt); }
.mode-toggle button[aria-selected="true"] {
background: linear-gradient(135deg, rgba(3,218,197,.22), rgba(3,218,197,.12));
color: var(--accent-2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
/* —— Filters (search + class/sort dropdowns + status chips) —— */
.filters,
.filters.panel {
display: grid;
grid-template-columns: minmax(16rem, 2fr) minmax(6.5rem, 1fr) minmax(8rem, 1fr);
grid-template-areas:
"search class sort"
"status status status";
gap: .85rem 1.1rem;
align-items: end;
padding: 1.1rem 1.25rem;
margin-bottom: var(--space-4);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 75%, transparent);
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-surface-container) 85%, transparent);
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.08);
position: relative;
z-index: 80;
overflow: visible !important;
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
}
.filters:focus-within {
z-index: 85;
}
.filters__field {
display: flex;
flex-direction: column;
gap: .35rem;
min-width: 0;
}
.filters__field--search { grid-area: search; }
.filters__field--class { grid-area: class; }
.filters__field--sort { grid-area: sort; }
.filters__label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .05rem;
}
.search-result-count {
font-size: .68rem;
font-weight: 700;
color: var(--md-sys-color-primary, #03dac5);
letter-spacing: 0.02em;
}
.filters label,
.filters-status__label {
display: block;
color: var(--muted-soft);
font-size: .64rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0;
line-height: 1.2;
}
.search-input-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.search-input-wrap .search-icon {
position: absolute;
left: .85rem;
color: var(--muted-soft);
pointer-events: none;
transition: color .18s var(--ease);
}
.search-input-wrap:focus-within .search-icon {
color: var(--md-sys-color-primary, #03dac5);
}
.filters input,
.filters select {
width: 100%;
min-height: 2.85rem;
box-sizing: border-box;
border-radius: var(--md-sys-shape-corner-medium, 12px);
border: 1px solid rgba(158, 255, 241, 0.16);
background:
linear-gradient(180deg, rgba(255,255,255,.05), transparent),
rgba(0, 0, 0, 0.38);
color: var(--txt);
padding: .65rem .95rem;
outline: none;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
font-size: .9rem;
line-height: 1.25;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.filters input[type="search"] {
padding-left: 2.5rem;
padding-right: 4.25rem;
}
/* Hide webkit default search decorations */
.filters input[type="search"]::-webkit-search-cancel-button,
.filters input[type="search"]::-webkit-search-decoration,
.filters input[type="search"]::-webkit-search-results-button,
.filters input[type="search"]::-webkit-search-results-decoration,
.filters input[type="search"]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
appearance: none;
display: none;
}
.search-actions {
position: absolute;
right: .65rem;
display: flex;
align-items: center;
gap: .35rem;
pointer-events: auto;
}
.search-clear-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
color: var(--muted);
cursor: pointer;
padding: 0;
transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.search-clear-btn:hover {
background: rgba(217, 92, 159, 0.25);
color: #ffb4ab;
border-color: rgba(217, 92, 159, 0.5);
transform: scale(1.08);
}
.search-clear-btn[hidden] {
display: none !important;
}
.search-kbd-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
height: 1.35rem;
padding: 0 .38rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.4);
color: var(--muted-soft);
font-family: inherit;
font-size: .72rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
user-select: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Custom select: hide native arrow, draw chevron in the wrap */
.filters__select-wrap {
position: relative;
min-width: 0;
z-index: 2;
}
.filters__select-wrap:focus-within {
z-index: 10;
}
.filters__select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: .95rem;
width: .45rem;
height: .45rem;
margin-top: -.15rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: translateY(-50%) rotate(45deg);
pointer-events: none;
opacity: .85;
}
.filters select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2.4rem;
cursor: pointer;
}
.filters input::placeholder { color: var(--muted-soft); }
.filters input:focus,
.filters select:focus {
border-color: rgba(3,218,197,.65);
box-shadow: 0 0 0 3px rgba(3,218,197,.16), inset 0 1px 0 rgba(255,255,255,.06);
background:
linear-gradient(180deg, rgba(255,255,255,.06), transparent),
rgba(0, 8, 10, 0.55);
}
.filters select option {
background-color: #1a2628;
color: #e8f2f0;
}
.filters-status {
grid-area: status;
display: flex;
flex-wrap: wrap;
gap: .45rem;
align-items: center;
padding-top: .4rem;
margin-top: .1rem;
border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}
.filters-status__label {
margin-right: .2rem;
}
/* Material 3 Status Chips */
.status-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
border: 1px solid var(--line);
background: rgba(0,0,0,.22);
color: var(--muted);
border-radius: var(--md-sys-shape-corner-full, 999px);
padding: .4rem .85rem;
font-size: .78rem;
font-weight: 700;
cursor: pointer;
touch-action: manipulation;
transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.status-chip .chip-icon {
font-size: .72rem;
line-height: 1;
}
.status-chip:hover {
color: var(--txt);
border-color: var(--line-strong);
transform: translateY(-1px);
}
.status-chip[aria-pressed="true"] {
color: var(--accent-2);
border-color: rgba(3,218,197,.6);
background: rgba(3,218,197,.16);
box-shadow: var(--md-sys-elevation-level1);
}
.status-chip[data-health="resilient"][aria-pressed="true"] {
color: var(--ok);
border-color: rgba(125,232,168,.5);
background: rgba(125,232,168,.14);
}
.status-chip[data-health="fragile"][aria-pressed="true"] {
color: var(--bad);
border-color: rgba(255,141,131,.5);
background: rgba(255,141,131,.14);
}
.status-chip[data-health="warn"][aria-pressed="true"] {
color: var(--warn);
border-color: rgba(255,212,121,.5);
background: rgba(255,212,121,.14);
}
.status-chip .chip-count {
opacity: .85;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 960px) {
.filters,
.filters.panel {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"search search"
"class sort"
"status status";
gap: .75rem;
padding: .95rem 1rem;
}
.filters-status {
border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
}
}
@media (max-width: 580px) {
.filters,
.filters.panel {
grid-template-columns: 1fr;
grid-template-areas:
"search"
"class"
"sort"
"status";
gap: .65rem;
}
}
/* —— Asset cards (Scan) —— */
.asset-grid { display: grid; gap: var(--space-4); }
.asset-card {
display: grid;
grid-template-columns: 1.12fr 1fr;
gap: 1.1rem;
align-items: stretch;
padding: 1.2rem 1.25rem;
border-radius: var(--r-lg);
/* Glass fill/border/blur come from shared oceanic surface block */
transition: border-color .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.asset-card:hover {
border-color: rgba(0, 247, 255, .55);
transform: translateY(-4px);
box-shadow:
0 22px 56px rgba(0,0,0,.36),
var(--glow-accent),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0, 247, 255, .2);
}
/* Shell cards (nav + chart split) — same glass as .asset-card / hero */
.asset-card-shell {
display: grid;
grid-template-columns: 1.12fr 1fr;
gap: 0;
align-items: stretch;
border-radius: var(--r-lg);
/* Glass fill/border/blur come from shared oceanic surface block */
transition: border-color .28s var(--ease-out), box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
overflow: hidden;
}
.asset-card-shell:hover {
transform: translateY(-4px);
border-color: rgba(0, 247, 255, .55);
box-shadow:
0 22px 56px rgba(0,0,0,.36),
var(--glow-accent),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0, 247, 255, .2);
}
.asset-card-shell .asset-card-main { padding: 1.2rem 1.2rem 1.15rem; }
.asset-card-shell .asset-card-chart {
min-height: 210px;
padding: 1rem 1rem 1rem .35rem;
background:
linear-gradient(180deg, rgba(0,0,0,.08), transparent 40%),
rgba(0, 0, 0, 0.12);
border-left: 1px solid rgba(158, 255, 241, 0.07);
}
.asset-card-shell.hidden { display: none !important; }
.asset-card-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.asset-card-chart {
display: flex;
flex-direction: column;
min-width: 0;
align-self: stretch;
}
.asset-card-top {
display: flex;
flex-wrap: nowrap;
align-items: flex-start; /* Inspect pill lines up with asset name, not mid-column */
justify-content: space-between;
gap: .6rem;
}
.asset-card-top > .btn.ghost {
flex: 0 0 auto;
margin-top: .12rem; /* optical align with h3 baseline */
white-space: nowrap;
}
.asset-card-top > div:first-child {
min-width: 0;
flex: 1 1 auto;
}
/* Whole-card link wrapper */
a.asset-card-link {
display: contents;
color: inherit;
text-decoration: none;
}
.asset-card {
cursor: pointer;
text-decoration: none;
color: var(--txt);
}
.asset-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.asset-card h3 {
margin: 0;
font-size: 1.42rem;
letter-spacing: -.035em;
font-weight: 800;
}
.asset-card h3.asset-title-with-share {
display: inline-flex;
align-items: center;
gap: .85rem; /* share circle sits clear of the asset name */
}
.asset-card h3 a { color: inherit; text-decoration: none; }
.asset-card h3 a:hover { color: var(--accent-2); }
.meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 999px;
padding: .24rem .7rem;
font-size: .68rem;
font-weight: 750;
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.badge.ok, .badge.good {
color: var(--ok);
border-color: rgba(125,232,168,.38);
background: linear-gradient(180deg, rgba(125,232,168,.12), rgba(125,232,168,.05));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(125,232,168,.08);
}
.badge.warn {
color: var(--warn);
border-color: rgba(255,212,121,.38);
background: linear-gradient(180deg, rgba(255,212,121,.12), rgba(255,212,121,.04));
}
.badge.bad {
color: var(--bad);
border-color: rgba(255,141,131,.38);
background: linear-gradient(180deg, rgba(255,100,90,.12), rgba(255,100,90,.04));
}
.badge.accent {
color: var(--accent-2);
border-color: rgba(3,218,197,.38);
background: linear-gradient(180deg, rgba(3,218,197,.14), rgba(3,218,197,.05));
}
.asset-blurb {
margin: .6rem 0 .9rem;
color: var(--muted);
font-size: .9rem;
line-height: 1.55;
}
.metric-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .45rem;
margin-top: auto;
}
.metric-row .kpi {
padding: .72rem .7rem;
display: flex;
flex-direction: column;
min-height: 100%;
border-radius: 12px;
background:
linear-gradient(165deg, rgba(255,255,255,.05) 0%, transparent 55%),
rgba(0, 0, 0, 0.18);
}
.metric-row .kpi .val {
font-size: 1.15rem;
min-height: 1.25em;
margin-top: .28rem;
line-height: 1.1;
letter-spacing: -.03em;
}
.metric-row .kpi .subname {
min-height: 2.1em;
}
.metric-row .kpi .hint {
margin-top: auto;
padding-top: .25rem;
min-height: 2.2em;
font-size: .72rem;
}
.good { color: var(--ok); }
.warn, .mid { color: var(--warn); }
.bad { color: var(--bad); }
.spark {
width: 100%;
flex: 1 1 0; /* Grow to fill right column */
min-height: 160px;
border-radius: 16px;
border: 1px solid rgba(158, 255, 241, 0.10);
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(3,218,197,.05), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%),
rgba(0, 0, 0, 0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
position: relative;
overflow: hidden;
}
.spark-host {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.asset-card-chart .note {
flex: 0 0 auto;
margin: 0;
min-width: 0;
}
/* Outside + above the plot so the pill never covers right-axis end labels. */
.spark-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin: 0 0 8px;
flex: 0 0 auto;
}
.spark-controls {
position: static;
flex: 0 0 auto;
z-index: 2;
}
/* Same top-left dual-value readout as Inspect main panes. Text only — no plate. */
.spark .pane-legend,
.spark .spark-legend {
position: absolute;
top: 10px;
left: 12px;
right: 64px;
z-index: 4;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
line-height: 1.35;
pointer-events: none;
font-size: 12px;
font-variant-numeric: tabular-nums;
font-family: inherit;
color: #cfe8e3;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.spark .pane-legend .lg-date,
.spark .spark-legend .lg-date { color: #8b949e; }
.spark .pane-legend .lg-series,
.spark .spark-legend .lg-series { color: var(--lg-c, #cfe8e3); white-space: nowrap; }
.spark .pane-legend strong,
.spark .spark-legend strong { color: #f2fffc; font-weight: 700; }
.chip {
border: 1px solid rgba(3,218,197,.35);
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
rgba(2, 22, 25, 0.48);
color: var(--accent-2);
border-radius: 999px;
padding: .3rem .65rem;
font-size: .72rem;
font-weight: 700;
cursor: pointer;
min-height: 1.85rem;
backdrop-filter: blur(10px) saturate(1.25);
-webkit-backdrop-filter: blur(10px) saturate(1.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chip:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
rgba(3,218,197,.16);
border-color: rgba(3,218,197,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(3,218,197,.12);
}
.card-actions { margin-top: .85rem; }
/* —— Compare table —— */
.compare-shell {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background:
var(--glass-shine),
rgba(2, 14, 18, 0.38);
box-shadow: var(--shadow), var(--glass-edge);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
}
table.compare {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 720px;
}
table.compare th, table.compare td {
text-align: right;
padding: .95rem .7rem;
border-bottom: 1px solid rgba(158,255,241,.06);
font-size: .9rem;
font-variant-numeric: tabular-nums;
}
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare th:first-child, table.compare td:first-child { text-align: left; padding-left: 1.2rem; }
table.compare th:last-child, table.compare td:last-child { padding-right: 1.2rem; }
table.compare th {
color: var(--muted-soft);
font-size: .62rem;
letter-spacing: .13em;
text-transform: uppercase;
font-weight: 750;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
padding-top: .85rem;
padding-bottom: .85rem;
position: sticky;
top: 0;
z-index: 1;
backdrop-filter: blur(10px);
}
table.compare td strong { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
table.compare td.good { color: var(--ok); font-weight: 700; }
table.compare td.bad { color: var(--bad); font-weight: 700; }
table.compare td.warn { color: var(--warn); font-weight: 700; }
table.compare tr:hover td { background: rgba(3, 218, 197, .045); }
table.compare tr.outlier-low td { background: rgba(255,69,58,.055); }
table.compare tr.outlier-high td { background: rgba(48,209,88,.045); }
.compare-lead {
margin: 0 0 .85rem;
color: var(--muted);
font-size: .9rem;
line-height: 1.45;
max-width: none;
}
/* —— Origin story + FAQ —— */
.origin { margin-top: 2rem; }
.origin-shell {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
align-items: start;
gap: 1rem;
}
.origin-story,
.origin-definition {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
border: 1px solid var(--glass-border);
padding: 1.45rem 1.5rem;
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
color: var(--txt);
}
.origin-story::before,
.origin-definition::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
}
.origin-story::before { right: -80px; top: -110px; background: rgba(3,218,197,.14); }
.origin-definition::before { left: -100px; bottom: -120px; background: rgba(255,212,121,.1); }
.origin-eyebrow {
color: var(--accent-2);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.origin-story h3,
.origin-definition h3 {
position: relative;
margin: .45rem 0 .7rem;
font-size: 1.35rem;
letter-spacing: -.03em;
}
.origin-story p,
.origin-definition p {
position: relative;
color: var(--muted);
line-height: 1.62;
}
.origin-quote {
position: relative;
margin: 1.1rem 0;
padding: .95rem 1.15rem .95rem 1.25rem;
border: 1px solid rgba(158, 255, 241, 0.10);
background:
linear-gradient(90deg, rgba(3,218,197,.09), rgba(144,0,201,.05) 55%, transparent);
color: var(--txt);
font-size: 1.02rem;
line-height: 1.58;
border-radius: 12px;
overflow: hidden;
}
.origin-quote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent-2), var(--purple));
box-shadow: 0 0 12px rgba(18, 207, 192, .35);
}
.origin-source {
display: inline-flex;
align-items: center;
gap: .35rem;
color: var(--accent-2);
font-size: .82rem;
font-weight: 700;
text-decoration: none;
}
.origin-source:hover { text-decoration: underline; }
.origin-timeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .45rem;
margin-top: 1.2rem;
}
.origin-step {
min-height: 90px;
padding: .75rem .8rem;
border-radius: 14px;
border: 1px solid rgba(158,255,241,.12);
background:
linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%),
rgba(255,255,255,.025);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.origin-step:hover {
border-color: rgba(3,218,197,.28);
transform: translateY(-1px);
}
.origin-step strong {
display: block;
color: var(--txt);
font-size: .82rem;
margin-bottom: .3rem;
}
.origin-step span {
display: block;
color: var(--muted);
font-size: .72rem;
line-height: 1.4;
}
.arc-answer {
color: var(--txt) !important;
font-size: 1.05rem;
font-weight: 700;
}
.alignment-list { display: grid; gap: .55rem; margin-top: 1rem; }
.alignment-item {
position: relative;
padding: .7rem .8rem;
border-radius: 14px;
border: 1px solid rgba(158,255,241,.12);
background: rgba(0,0,0,.14);
}
.alignment-item strong { display: block; color: var(--txt); font-size: .82rem; margin-bottom: .2rem; }
.alignment-item span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.alignment-caveat { margin: .9rem 0 0 !important; font-size: .78rem; }
.faq { margin-top: 2rem; }
.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
.faq-item {
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
box-shadow: var(--shadow-sm), var(--glass-edge);
overflow: hidden;
color: var(--txt);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item:hover {
border-color: rgba(158,255,241,.28);
box-shadow: var(--glass-edge), 0 8px 24px rgba(0,0,0,.16);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding: .95rem 1.1rem;
color: var(--txt);
font-size: .9rem;
font-weight: 700;
cursor: pointer;
list-style: none;
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
color: var(--accent-2);
font-size: 1.1rem;
font-weight: 700;
flex-shrink: 0;
width: 1.4rem;
text-align: center;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item p {
margin: 0;
padding: .9rem 1.1rem 1.1rem;
color: var(--muted);
font-size: .84rem;
line-height: 1.62;
}
.faq-disclaimer {
font-size: .78rem;
line-height: 1.5;
}
.lessons { margin-top: 2rem; }
.lesson-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.lesson-card {
min-height: 100%; padding: 1.1rem 1.1rem 1.15rem;
border: 1px solid var(--line); border-radius: var(--r-lg);
background:
var(--glass-shine),
linear-gradient(145deg, rgba(3,218,197,.08) 0%, rgba(255,255,255,.01) 60%),
rgba(2, 14, 18, 0.42);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
box-shadow: var(--glass-edge);
transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lesson-card:hover {
border-color: rgba(3,218,197,.38);
transform: translateY(-2px);
box-shadow: var(--glass-edge), 0 10px 28px rgba(0,0,0,.18), 0 0 20px rgba(3,218,197,.08);
}
.lesson-card__tag { color: var(--accent-2); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lesson-card h3 { margin: .5rem 0 .55rem; font-size: 1rem; line-height: 1.25; font-weight: 700; }
.lesson-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.58; }
.review-queue { margin-top: 2rem; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.review-card {
min-height: 100%; padding: 1rem 1.1rem;
border: 1px solid rgba(255,212,121,.18); border-radius: var(--r-lg);
background:
var(--glass-shine),
linear-gradient(145deg, rgba(255,212,121,.08) 0%, rgba(255,255,255,.01) 60%),
rgba(2, 14, 18, 0.42);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
box-shadow: var(--glass-edge);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.review-card:hover { border-color: rgba(255,212,121,.3); }
.review-card p { margin: .5rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
/* —— Shared metric / section helpers —— */
.meta-tight { margin-top: .4rem; }
.section-title { margin: 0 0 .75rem; font-size: 1.15rem; }
.stack-heading {
padding: .75rem 1rem .25rem;
}
.stack-heading h3 { margin: 0; font-size: 1rem; }
.stack-toolbar { padding: 0 1rem; }
.lab-lead { margin: .85rem 0; }
.chart-stack + .chart-stack,
.lab-body .chart-stack.spaced { margin-top: 1rem; }
.lab-body .chart-stack.first { margin-top: .75rem; }
.kpi.compact .val { font-size: 1.2rem; }
.verdict-kpis .kpi .lbl { line-height: 1.3; }
/* Methodology long-form
Nested carefully: outer method-layout = TOC + one content column.
Inner methodology-content may be 2-col for method-blocks only.
Intro cards (quick / not) always span the full content column. */
.methodology-content {
margin-top: 0;
min-width: 0;
max-width: 100%;
}
.method-page { min-width: 0; }
.method-intro {
padding: .75rem .15rem 1.1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.method-intro .hero-lead { max-width: 54rem; }
.methodology-content > * + * { margin-top: 1.35rem; }
.methodology-content .method-block {
margin-top: 1.35rem;
min-width: 0;
overflow-wrap: anywhere;
}
@media (min-width: 980px) {
.methodology-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.15rem 1.35rem;
align-items: start;
}
.methodology-content .wide-block,
.methodology-content .method-quick,
.methodology-content .method-not,
.methodology-content > .note {
grid-column: 1 / -1;
}
.methodology-content > * + *,
.methodology-content .method-block { margin-top: 0; }
}
.method-block { margin-top: 1.35rem; }
.method-block h2 {
margin: 0 0 .55rem;
font-size: 1.1rem;
letter-spacing: -.02em;
}
.method-block p {
margin: 0 0 .65rem;
color: var(--muted);
line-height: 1.55;
max-width: none;
}
.method-block ul {
margin: .35rem 0 0;
padding-left: 1.15rem;
color: var(--muted);
line-height: 1.55;
max-width: none;
}
.method-block li { margin: .25rem 0; }
.method-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .65rem;
margin-top: .75rem;
}
.method-card {
padding: 1rem 1.1rem;
border-radius: var(--r);
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(18px) saturate(1.45);
-webkit-backdrop-filter: blur(18px) saturate(1.45);
color: var(--txt);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.method-card:hover {
border-color: var(--glass-border-bright);
box-shadow: var(--shadow), var(--glass-edge);
}
.method-card h3,
.method-card strong { color: var(--txt); }
.method-card p,
.method-card li { color: var(--muted); }
.method-card h3 {
margin: 0 0 .4rem;
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-2);
font-weight: 800;
}
.method-card p {
margin: 0;
font-size: .88rem;
line-height: 1.5;
color: var(--muted);
max-width: none;
}
/* —— ARC VAS panel (Inspect) —— */
.vas-panel .vas-header {
display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .9rem;
margin-bottom: .55rem;
}
.vas-panel .vas-header .section-title { margin: 0; }
.vas-panel .vas-copy {
margin: 0;
color: var(--muted);
line-height: 1.55;
max-width: 62rem;
}
.vas-panel .vas-copy code {
font-size: .82em;
word-break: break-all;
}
.vas-survival-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .65rem;
margin-top: .85rem;
}
.vas-survival {
padding: .85rem .9rem;
border: 1px solid var(--line);
border-radius: var(--r);
background: rgba(2,14,18,.5);
}
.vas-survival--primary {
border-color: rgba(179,136,255,.42);
background: linear-gradient(145deg, rgba(126,87,194,.18), rgba(2,14,18,.54) 68%);
box-shadow: inset 0 1px 0 rgba(222,202,255,.09);
}
.vas-survival__label { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.vas-survival__value { margin-top: .3rem; font-size: 1.35rem; font-weight: 760; font-variant-numeric: tabular-nums; }
.vas-survival__track { height: 5px; margin-top: .55rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.vas-survival__fill { height: 100%; border-radius: inherit; background: var(--accent-2); }
.vas-survival--primary .vas-survival__fill { background: linear-gradient(90deg, #8f68e8, #c0a5ff); }
.vas-survival__hint { margin-top: .42rem; color: var(--muted); font-size: .75rem; }
.vas-component-grid { display: grid; gap: .58rem; margin-top: 1rem; }
.vas-component {
display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 2fr) 3.25rem;
gap: .7rem; align-items: center;
}
.vas-component__label { color: var(--muted); font-size: .8rem; }
.vas-component__track { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); }
.vas-component__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7952c7, #b99af5); }
.vas-component--weak .vas-component__track { outline: 1px solid rgba(179,136,255,.5); outline-offset: 2px; }
.vas-component__value { text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; }
.vas-identity-warning { margin-top: .8rem; padding: .7rem .8rem; border-left: 2px solid var(--warn); color: var(--muted); background: rgba(255,190,80,.06); }
@media (max-width: 560px) {
.vas-component { grid-template-columns: 1fr 3rem; gap: .35rem .65rem; }
.vas-component__track { grid-column: 1 / -1; grid-row: 2; }
}
/* —— Asset inspect page —— */
.crumb {
display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
color: var(--muted); font-size: .86rem; margin-bottom: .75rem;
}
.crumb a { color: var(--accent-2); }
/* Cross-asset switcher on Inspect pages */
.asset-switcher {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem .45rem;
margin: 1.25rem 0 0;
padding: .7rem .95rem;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%),
rgba(2, 12, 16, 0.65);
box-shadow: var(--shadow-sm);
}
.asset-switcher__label {
font-size: .64rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted-soft);
margin-right: .3rem;
}
.asset-switcher a {
display: inline-flex;
align-items: center;
padding: .38rem .75rem;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--muted);
text-decoration: none;
font-size: .8rem;
font-weight: 700;
letter-spacing: -.01em;
transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.asset-switcher a:hover {
color: var(--txt);
border-color: rgba(158,255,241,.28);
background: rgba(255,255,255,.06);
text-decoration: none;
}
.asset-switcher a.is-current {
color: #021315;
background: var(--accent);
border-color: transparent;
pointer-events: none;
box-shadow: 0 2px 8px rgba(3,218,197,.35);
}
.asset-switcher a .sw-class {
margin-left: .28rem;
font-size: .62rem;
font-weight: 700;
opacity: .75;
letter-spacing: .04em;
}
.asset-switcher a.is-current .sw-class { opacity: .9; color: rgba(2,19,21,.7); }
.asset-page-nav {
position: sticky;
top: var(--subnav-sticky-top); /* same pin under header as home subnav */
z-index: 90;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .45rem;
margin: 0 0 1rem;
padding: .55rem .85rem;
/* Stadium only when single-row; never a tall multi-row capsule */
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, transparent);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
overflow-x: auto;
overscroll-behavior-inline: contain;
-ms-overflow-style: none;
scrollbar-width: none;
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.10);
}
/* —— Tooltips —— */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(4, 32, 36, 0.97);
border: 1px solid var(--line-strong);
border-radius: 10px;
color: var(--txt);
font-size: .76rem;
font-weight: 500;
line-height: 1.45;
padding: .55rem .75rem;
white-space: nowrap;
max-width: 260px;
white-space: normal;
text-align: left;
pointer-events: none;
z-index: 999;
opacity: 0;
transition: opacity .15s ease;
box-shadow: 0 8px 24px rgba(0,0,0,.5);
letter-spacing: 0;
text-transform: none;
font-variant-numeric: normal;
}
[data-tip]:hover::after, [data-tip]:focus::after { opacity: 1; }
.how-to-read-pill[data-tip]::after { display: none; }
/* —— Class-coded card borders —— */
a.asset-card[data-class-label="A"], .asset-card-shell[data-class-label="A"] {
border-color: rgba(0, 247, 255, 0.38);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(160deg, rgba(3, 218, 197, .14) 0%, transparent 55%),
rgba(2, 24, 48, 0.50);
}
a.asset-card[data-class-label="A"]:hover, .asset-card-shell[data-class-label="A"]:hover {
border-color: rgba(0, 247, 255, 0.62);
box-shadow:
0 16px 48px rgba(3, 218, 197, .16),
0 4px 12px rgba(0, 0, 0, .28),
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 247, 255, .18);
}
a.asset-card[data-class-label="F"], .asset-card-shell[data-class-label="F"] {
border-color: rgba(255, 141, 131, 0.28);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(160deg, rgba(255, 141, 131, .10) 0%, transparent 55%),
rgba(2, 24, 48, 0.50);
}
a.asset-card[data-class-label="F"]:hover, .asset-card-shell[data-class-label="F"]:hover {
border-color: rgba(255, 141, 131, 0.5);
box-shadow:
0 16px 48px rgba(255, 100, 90, .12),
0 4px 12px rgba(0, 0, 0, .28),
inset 0 1px 0 rgba(255, 255, 255, .2),
inset 0 -1px 0 rgba(255, 141, 131, .12);
}
/* —— Credibility stat bar —— */
.stat-bar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.1rem;
padding: .9rem 1.15rem;
border-radius: var(--r-lg);
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%),
rgba(2, 14, 18, 0.65);
box-shadow: var(--shadow-sm);
align-items: center;
backdrop-filter: blur(8px);
}
.stat-bar__item {
display: flex;
align-items: center;
gap: .5rem;
padding: .38rem .82rem;
border-radius: 999px;
border: 1px solid rgba(158,255,241,.12);
background: rgba(255,255,255,.04);
}
.stat-bar__val {
font-size: .98rem;
font-weight: 800;
letter-spacing: -.04em;
color: var(--txt);
font-variant-numeric: tabular-nums;
}
.stat-bar__lbl { font-size: .72rem; color: var(--muted); font-weight: 500; }
.stat-bar__sep { flex: 1; }
.stat-bar__run { font-size: .7rem; color: var(--muted-soft); margin-left: auto; font-variant-numeric: tabular-nums; }
/* —— How-to-read callout —— */
.how-to-read {
margin-bottom: 1rem;
border-radius: var(--r);
border: 1px solid rgba(3,218,197,.18);
background: linear-gradient(135deg, rgba(3,218,197,.06), rgba(255,255,255,.015));
overflow: hidden;
}
.how-to-read summary {
display: flex;
align-items: center;
gap: .55rem;
padding: .75rem 1.1rem;
cursor: pointer;
font-size: .84rem;
font-weight: 700;
color: var(--accent-2);
list-style: none;
user-select: none;
}
.how-to-read summary::-webkit-details-marker { display: none; }
.how-to-read summary::before {
content: '+';
font-size: 1rem;
font-weight: 800;
transition: transform .2s ease;
display: inline-block;
width: 1em;
text-align: center;
}
details.how-to-read[open] summary::before { content: '−'; }
.how-to-read__body {
padding: 0 1.1rem 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .65rem;
}
.how-to-read__term {
padding: .65rem .85rem;
border-radius: var(--r);
border: 1px solid var(--glass-border);
background:
var(--glass-shine),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 68%, transparent);
color: var(--txt);
box-shadow: var(--glass-edge);
}
.how-to-read__term strong {
display: block;
color: var(--accent-2);
font-size: .8rem;
margin-bottom: .25rem;
}
.how-to-read__term span { font-size: .78rem; color: var(--muted); line-height: 1.5; }
/* —— Empty state —— */
.empty-state {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3.5rem 1.5rem;
color: var(--muted);
gap: .75rem;
}
.empty-state svg { opacity: .35; }
.empty-state h3 { margin: 0; font-size: 1.1rem; color: var(--txt); }
.empty-state p { margin: 0; font-size: .88rem; }
/* —— Run date tag on card —— */
.run-date { font-size: .68rem; color: var(--muted); opacity: .7; margin-top: .3rem; }
/* —— Prev / Next nav —— */
.prev-next {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 2rem;
padding: 1rem 1.25rem;
border-radius: var(--r-lg);
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(16px) saturate(1.35);
-webkit-backdrop-filter: blur(16px) saturate(1.35);
color: var(--txt);
}
.prev-next a {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1.1rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
color: var(--txt);
font-weight: 600;
font-size: .88rem;
text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.prev-next a:hover { border-color: rgba(3,218,197,.45); color: var(--accent-2); text-decoration: none; }
.prev-next__center { font-size: .8rem; color: var(--muted); text-align: center; }
.prev-next svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.asset-page-nav::-webkit-scrollbar { display: none; }
.asset-page-nav__label {
flex: 0 0 auto;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-right: .15rem;
}
.asset-page-nav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.1rem;
padding: .42rem .78rem;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
/* Active/hover: purple rim + subtle teal fill (match home subnav) */
.asset-page-nav a:hover,
.asset-page-nav a.is-active,
.asset-page-nav a[aria-current="page"] {
color: var(--accent-2);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 60%, transparent);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
text-decoration: none;
}
.panel[id],
.section[id],
.chart-box[id],
.lab[id] {
scroll-margin-top: 6rem;
}
.verdict {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.25rem;
align-items: start;
}
.verdict h1 {
margin: .35rem 0 0;
font-size: 3.2rem;
letter-spacing: -.05em;
line-height: 1;
background: linear-gradient(120deg, #fff 10%, var(--accent-2) 70%, #c9fff5 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-bottom: .08em;
}
.verdict-copy { color: var(--muted); margin: .75rem 0 0; max-width: none; line-height: 1.55; }
.verdict-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
gap: .6rem;
align-self: start;
align-content: start;
}
.verdict-kpis .kpi {
height: 100%;
min-height: 7.35rem;
padding: .85rem 1rem;
}
.verdict-kpis .kpi .lbl {
min-height: 2.15em;
}
.verdict-kpis .kpi .hint {
min-height: 0;
padding-top: .45rem;
}
.chart-box {
margin-top: 1.1rem;
padding: 1.2rem 1.25rem 1.25rem;
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 70%, transparent);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
box-shadow: var(--shadow-sm), var(--glass-edge);
color: var(--txt);
}
.chart-box h2 {
margin: 0 0 .4rem;
font-size: 1.12rem;
letter-spacing: -.03em;
font-weight: 800;
}
.chart-box .hint { color: var(--muted); font-size: .84rem; margin: 0 0 .85rem; line-height: 1.5; }
.chart-toolbar {
display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem;
}
.chart-btn {
border: 1px solid transparent;
background: transparent;
color: var(--muted);
border-radius: 999px;
padding: .38rem .82rem;
font-size: .76rem;
font-weight: 700;
cursor: pointer;
min-height: 2rem;
transition: color .16s, border-color .16s, background .16s;
}
.chart-btn:hover {
color: var(--accent-2);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 45%, transparent);
background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}
/* Active zoom range: purple rim + subtle teal fill (match subnav pills) */
.chart-btn.active,
.chart-btn[aria-pressed="true"] {
color: var(--accent-2);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 65%, transparent);
background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
}
.main-chart {
width: 100%;
min-height: 360px;
height: 360px;
border-radius: 14px;
border: 1px solid var(--glass-border);
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 55%, transparent);
position: relative;
}
.main-chart-controls {
position: absolute; top: 10px; right: 10px; z-index: 3;
}
.lab {
margin-top: 1rem;
border-radius: var(--r-lg);
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
overflow: hidden;
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
color: var(--txt);
}
.lab > summary {
cursor: pointer;
list-style: none;
padding: 1rem 1.25rem;
font-weight: 700;
display: flex;
justify-content: space-between;
gap: .75rem;
align-items: center;
user-select: none;
}
.lab > summary::-webkit-details-marker { display: none; }
.lab > summary::after {
content: "Show details";
color: var(--accent-2);
font-size: .82rem;
font-weight: 700;
}
.lab[open] > summary::after { content: "Hide details"; }
.lab-body { padding: 0 1.1rem 1.15rem; border-top: 1px solid var(--line); }
.lab-body .chart-stack { margin-top: .9rem; }
.lab-body h3 { margin: 0 0 .55rem; font-size: 1rem; }
/* Canvas-matched chart stack proportions (report_canvas: 380 / 120 / 90 / 80) */
.chart-stack {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--glass-border);
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 50%, transparent);
}
.stack-pane {
position: relative;
background: rgba(255,255,255,.02);
border-top: 1px solid rgba(158,255,241,.06);
/* No horizontal padding — LW chart width must match host or hairline drifts */
padding: 0;
}
.stack-pane:first-child { border-top: none; }
.stack-pane__host {
position: relative;
width: 100%;
z-index: 1;
}
/* Heights are chart canvas sizes */
.stack-pane.main { min-height: 380px; }
.stack-pane.ind { min-height: 112px; }
.stack-pane.ind.daily { min-height: 136px; }
.stack-pane.ind.zones { min-height: 112px; }
.stack-pane .pane-title {
position: absolute;
top: 6px;
left: 12px;
right: 12px;
z-index: 3;
font-size: 11px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #8b949e;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stack-pane.main .pane-title {
top: 12px;
font-size: 15px;
font-weight: 600;
color: #f5f5f7;
text-transform: none;
letter-spacing: -.01em;
}
/* Indicator: title row + value readout below. Main: values sit under title.
Always transparent — never a frosted/white plate over the series. */
.stack-pane .pane-legend {
position: absolute;
top: 22px;
left: 12px;
right: 64px;
z-index: 3;
font-size: 11px;
color: #cfe8e3;
pointer-events: none;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
line-height: 1.35;
font-family: inherit;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0;
}
.stack-pane.main .pane-legend,
.stack-pane .pane-legend--main {
top: 10px;
font-size: 12px;
gap: 8px 12px;
}
.stack-pane .pane-legend .lg-date { color: #8b949e; }
.stack-pane .pane-legend .lg-series { color: var(--lg-c, #cfe8e3); }
.stack-pane .pane-legend strong { color: #f2fffc; font-weight: 700; }
.page-title {
margin: 0;
letter-spacing: -.04em;
font-size: 2.25rem;
}
.page-title.tight { margin: .5rem 0 0; }
.mt-1 { margin-top: 1rem; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: .65rem 1rem;
background: var(--accent);
color: #041512;
font-weight: 700;
border-radius: 0 0 var(--r) 0;
}
.skip-link:focus {
left: 0;
outline: 2px solid var(--accent-2);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
table.compare:focus { outline: 2px solid rgba(3,218,197,.35); outline-offset: 2px; }
.stack-pane .pane-guide,
.stack-pane__host .pane-guide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
margin: 0;
padding: 0;
background: rgba(245,245,247,.55);
pointer-events: none;
display: none;
z-index: 5;
transform: translateX(-0.5px); /* center on pixel */
}
@media (max-width: 720px) {
.stack-pane.main { min-height: 280px; }
.stack-pane.ind.daily { min-height: 116px; }
.stack-pane.ind { min-height: 104px; }
.stack-pane.ind.zones { min-height: 104px; }
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .55rem;
align-items: stretch;
}
/* Bottom-align big numbers so 1-line and 2-line labels share one value baseline */
.matrix-grid .kpi {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.matrix-grid .kpi .lbl {
line-height: 1.3;
flex: 0 0 auto;
}
.matrix-grid .kpi .val {
margin-top: auto;
padding-top: .45rem;
}
.resilience-grid .kpi .lbl {
min-height: 2.6em;
}
.resilience-grid .kpi .val {
margin-top: 0;
}
.payback-record-grid .kpi .lbl {
min-height: 2.6em;
}
.payback-record-grid .kpi .val {
margin-top: 0;
}
.window-read-copy {
margin: 0 0 .85rem;
color: var(--muted);
font-size: .92rem;
line-height: 1.5;
max-width: 48rem;
}
.window-read-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .7rem;
}
.window-read-grid .kpi {
min-height: 100%;
}
.window-read-grid .kpi .hint {
margin-top: .4rem;
line-height: 1.4;
}
.fund-header {
display: flex;
align-items: start;
justify-content: space-between;
gap: .75rem;
margin-bottom: .15rem;
}
.fund-asof {
color: var(--muted);
font-size: .78rem;
letter-spacing: .02em;
}
.fund-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .7rem;
}
.fund-card {
min-height: 100%;
padding: 1rem 1.1rem;
border-radius: var(--r);
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(16px) saturate(1.35);
-webkit-backdrop-filter: blur(16px) saturate(1.35);
color: var(--txt);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fund-card:hover {
border-color: var(--glass-border-bright);
box-shadow: var(--shadow), var(--glass-edge);
}
.fund-card__head {
display: flex;
flex-direction: column;
gap: .3rem;
margin-bottom: .5rem;
}
.fund-card h3 {
margin: 0;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-2);
}
.fund-card__metric {
color: var(--txt);
font-size: .92rem;
font-weight: 700;
line-height: 1.35;
}
.fund-card p {
margin: 0;
color: var(--muted);
font-size: .86rem;
line-height: 1.52;
}
.fund-sources {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem;
margin-top: .8rem;
}
.fund-sources__label {
color: var(--muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.fund-sources a {
display: inline-flex;
align-items: center;
padding: .28rem .65rem;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--accent-2);
font-size: .78rem;
font-weight: 600;
text-decoration: none;
}
.fund-sources a:hover {
border-color: rgba(3,218,197,.34);
background: rgba(3,218,197,.08);
text-decoration: none;
}
.note { color: var(--muted); font-size: .86rem; line-height: 1.5; }
footer {
margin-top: var(--space-7);
padding: 1.75rem 0 2.25rem;
border-top: 1px solid rgba(158, 255, 241, 0.08);
color: var(--muted);
font-size: .82rem;
position: relative;
}
footer::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 6rem;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), transparent);
opacity: .7;
}
/* Full-bleed footer styles live with footer.site-footer--drops above */
.footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem .75rem;
margin-bottom: .55rem;
}
.footer-row a {
color: var(--muted);
text-decoration: none;
transition: color .15s, opacity .15s;
opacity: .9;
}
.footer-row a:hover { color: var(--accent-2); text-decoration: none; opacity: 1; }
.footer-meta { opacity: .65; font-size: .75rem; letter-spacing: .02em; }
.disclaimer-line {
margin: .75rem 0 0;
color: var(--muted);
font-size: .82rem;
line-height: 1.45;
max-width: 52rem;
}
.disclaimer-reality {
margin: .35rem 0 0;
color: var(--muted);
font-size: .78rem;
font-style: italic;
line-height: 1.45;
max-width: 52rem;
opacity: .9;
}
.mobile-footer-reality {
display: none;
}
.hidden { display: none !important; }
/* —— Home subnav (M3 secondary navigation / filter-chip bar) —— */
.home-subnav {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
align-items: center;
padding: var(--space-2) var(--space-3);
margin: var(--hero-subnav-gap) 0 var(--space-4);
background:
linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, transparent);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
border-radius: var(--md-sys-shape-corner-full, 999px);
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.10);
}
.home-subnav a {
color: var(--md-sys-color-on-surface-variant);
font-size: .8125rem;
font-weight: 650;
letter-spacing: .01em;
text-decoration: none;
padding: .4rem .75rem;
min-height: 2.25rem;
display: inline-flex;
align-items: center;
border-radius: var(--md-sys-shape-corner-full, 999px);
border: 1px solid transparent;
transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
/* Active/hover pill: purple rim + subtle teal fill (PC & phone) */
.home-subnav a:hover,
.home-subnav a:focus-visible,
.home-subnav a.is-active,
.home-subnav a[aria-current="page"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 55%, transparent);
outline: none;
text-decoration: none;
}
.home-subnav a:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}
.home-subnav a.is-active,
.home-subnav a[aria-current="page"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 65%, transparent);
}
.status-key {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
align-items: center;
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--md-sys-shape-corner-large, var(--r));
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
font-size: .8125rem;
color: var(--md-sys-color-on-surface-variant);
}
.status-key__item {
display: inline-flex;
align-items: center;
gap: .45rem;
}
.hard-tape-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.5rem, 12rem));
gap: .7rem;
align-items: stretch;
}
.hard-tape-chip {
display: flex;
flex-direction: column;
gap: .2rem;
min-width: 0;
width: 100%;
padding: .85rem 1rem;
border-radius: 16px;
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 70%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(12px) saturate(1.35);
-webkit-backdrop-filter: blur(12px) saturate(1.35);
text-decoration: none;
color: var(--txt);
transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hard-tape-chip:hover,
.hard-tape-chip:focus-visible {
border-color: rgba(3,218,197,.45);
background:
var(--glass-shine),
rgba(3,218,197,.10);
transform: translateY(-2px);
box-shadow: var(--glass-edge), 0 12px 28px rgba(0,0,0,.2);
outline: none;
}
.hard-tape-chip strong { font-size: 1.08rem; letter-spacing: -.025em; font-weight: 800; }
.hard-tape-chip span { font-size: .8rem; color: var(--muted); }
.hard-tape-chip span.good { color: var(--ok); font-weight: 600; }
.asset-window-line {
margin: .55rem 0 0;
font-size: .78rem;
line-height: 1.35;
color: var(--muted);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.window-note {
grid-column: 1 / -1;
padding: .75rem 0 .1rem 1rem;
border-left: 2px solid rgba(255,212,121,.5);
color: var(--muted);
font-size: .82rem;
line-height: 1.5;
}
.window-note strong {
display: block;
margin-bottom: .25rem;
color: var(--warn);
font-size: .86rem;
}
.series-legend {
display: inline-flex;
align-items: center;
gap: .55rem;
margin-right: .35rem;
}
.series-legend__item {
display: inline-flex;
align-items: center;
gap: .28rem;
font-size: .72rem;
font-weight: 700;
color: var(--muted);
}
.series-legend__item::before {
content: "";
width: .55rem;
height: .55rem;
border-radius: 999px;
}
.series-legend__item--payback::before { background: var(--arc-series-main, var(--purple, #c96bff)); }
.series-legend__item--price::before { background: rgba(100, 210, 255, 1); }
.spark-fail {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .45rem;
min-height: 160px;
padding: 1rem;
color: var(--muted);
font-size: .86rem;
}
.spark-fail button {
font: inherit;
font-weight: 700;
font-size: .78rem;
color: var(--accent-2);
background: rgba(3,218,197,.1);
border: 1px solid rgba(3,218,197,.35);
border-radius: 999px;
padding: .35rem .7rem;
cursor: pointer;
}
.origin-more { margin-top: .75rem; }
.origin-more summary {
cursor: pointer;
color: var(--accent-2);
font-weight: 700;
font-size: .88rem;
}
.origin-pun {
color: var(--muted);
font-size: .78rem;
font-weight: 600;
}
.origin-lede { color: var(--txt); line-height: 1.55; }
.cite-block {
margin: .6rem 0;
padding: .85rem 1rem;
border-left: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
border-radius: 0 10px 10px 0;
color: var(--txt);
font-size: .88rem;
line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
.hero-ambient, .site-fog, .fog-logo, .share-toast {
animation: none !important;
transition: none !important;
}
}
.inline-link { color: var(--accent-2); }
/* —— Desktop —— */
@media (min-width: 980px) {
/*
* Full-bleed stage under the header.
* Stage continues past the glass card by half of --hero-subnav-gap; subnav
* margin-top is the other half — stage edge lands mid-way glass ↔ subnav.
*/
.hero-stage {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: 0;
--hero-stage-lift: calc(var(--header-h) + 1.95rem);
--hero-subnav-gap: 2.75rem; /* roomier desktop rhythm */
margin-top: calc(-1 * var(--hero-stage-lift));
padding-top: calc(var(--hero-stage-lift) + .35rem);
padding-bottom: calc(var(--hero-subnav-gap) / 2);
margin-bottom: 0;
border: none;
border-radius: 0;
overflow: hidden;
box-shadow: none;
background:
radial-gradient(ellipse 95% 70% at 75% 12%, rgba(0, 247, 255, 0.20), transparent 68%),
radial-gradient(ellipse 80% 60% at 12% 55%, rgba(160, 45, 255, 0.14), transparent 62%),
linear-gradient(160deg, #05091a 0%, #002442 45%, #001224 85%, #070914 100%);
}
.hero-stage::after { display: none; }
.hero-stage > .hero-ambient {
inset: 0;
opacity: 1;
overflow: hidden;
-webkit-mask-image: none;
mask-image: none;
}
/*
* Subnav + B/D match header width: main is already inside .wrap's content box.
* Using 100vw/content-w here made subnav wider than the header pill.
*/
main > .home-subnav,
main > .ratio-context {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.hero-stage > .hero {
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
width: min(var(--content-w), calc(100vw - 2.25rem));
margin: 0 auto;
padding: .35rem 0 0;
}
/*
* Glass content card over the ambient canvas (like mobile) so copy/KPIs stay
* readable — animation stays full-bleed on .hero-stage behind it.
*/
.hero-stage .hero-inner {
width: 100%;
max-width: none;
margin: 0;
padding: 1.65rem 1.5rem 1.35rem;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(180deg, rgba(0, 247, 255, 0.05), transparent 55%),
rgba(2, 24, 48, 0.55) !important;
border: 1px solid rgba(0, 247, 255, 0.32) !important;
box-shadow:
0 12px 40px rgba(0, 8, 24, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 247, 255, 0.18) !important;
backdrop-filter: blur(28px) saturate(190%) !important;
-webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}
.hero-inner {
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
align-items: stretch;
min-height: 340px;
gap: var(--space-5);
}
.hero-ambient .fog-logo-a { left: -6%; top: -8%; right: auto; }
.hero-ambient .fog-logo-b { left: 18%; bottom: 8%; right: auto; }
.hero-ambient .fog-core { left: 10%; top: 28%; }
.donut-ripple { top: 38%; }
.asset-card, .asset-card-shell { grid-template-columns: 1.12fr 1fr; }
.spark { min-height: 220px; height: 260px; }
.hero-aside { min-height: 100%; }
.portfolio { flex: 1 1 auto; }
.site-disclaimer--hero-aside {
font-size: .72rem;
padding: .65rem .85rem;
}
/* Sticky under header (shared --subnav-sticky-top); top margin = flow gap only */
main > .home-subnav {
display: flex !important;
position: sticky !important;
top: var(--subnav-sticky-top) !important;
z-index: 90;
width: 100%;
max-width: 100%;
margin: calc(var(--hero-subnav-gap) / 2) 0 var(--space-4);
padding: .5rem .65rem;
gap: .35rem;
border-radius: var(--md-sys-shape-corner-full, 999px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 45%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 55%),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, transparent);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.12);
box-sizing: border-box;
}
main > .home-subnav a {
min-height: 2.25rem;
padding: .4rem .85rem;
border-radius: var(--md-sys-shape-corner-full, 999px);
font-size: .8125rem;
font-weight: 650;
letter-spacing: .01em;
}
main > .home-subnav a:hover,
main > .home-subnav a.is-active,
main > .home-subnav a[aria-current="page"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 65%, transparent);
}
main > .ratio-context {
margin-top: 0;
margin-bottom: var(--space-5);
}
}
@media (prefers-reduced-motion: reduce) {
.site-fog__mark,
.site-fog__bloom,
.hero-ambient .fog-logo,
.hero-ambient .fog-core {
animation: none !important;
}
}
/* —— Tablet —— */
@media (max-width: 979px) {
.hero h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
.verdict h1 { font-size: clamp(2.1rem, 4.5vw, 2.75rem); }
.page-title { font-size: 2.1rem; }
.hero-inner { gap: 1.25rem; padding: 1.35rem 1rem 1.25rem; }
.origin-shell { grid-template-columns: 1fr; }
.lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio { grid-template-columns: 1fr 1fr; }
.asset-card, .asset-card-shell { grid-template-columns: 1fr; }
.asset-card-chart { min-height: 240px; }
.asset-card-shell .asset-card-chart {
border-left: 0;
border-top: 1px solid rgba(158, 255, 241, 0.08);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.spark { min-height: 240px; }
.filters {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"search search"
"class sort"
"status status";
}
.verdict { grid-template-columns: 1fr; }
.home-subnav {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.home-subnav::-webkit-scrollbar { display: none; }
.home-subnav a { white-space: nowrap; flex: 0 0 auto; }
}
/* —— Mobile —— */
@media (max-width: 720px) {
:root {
/*
* Same sticky stack as PC: header float + measured height + shared gap.
* Fallback --header-h until JS measures .site-header (see syncChromeMetrics).
*/
--header-h: calc(var(--md-sys-touch-target, 48px) + 1.25rem);
--header-sticky-top: max(.7rem, env(safe-area-inset-top, 0px));
--header-subnav-gap: .5rem; /* match PC pixel air under header pill */
--subnav-sticky-top: calc(
var(--header-sticky-top) + var(--header-h) + var(--header-subnav-gap)
);
--mobile-gutter: max(.7rem, env(safe-area-inset-left, 0px));
--mobile-gutter-r: max(.7rem, env(safe-area-inset-right, 0px));
--touch: var(--md-sys-touch-target, 48px);
}
html { scroll-padding-top: calc(var(--subnav-sticky-top) + 3.2rem); }
body.menu-open { overflow: hidden; touch-action: none; }
.wrap {
width: 100%;
max-width: 100%;
padding:
.45rem var(--mobile-gutter-r)
1.25rem
var(--mobile-gutter);
}
/*
* —— M3 mobile navigation (dark + light share structure; tokens only differ) ——
* Pattern: Top app bar (compact) + modal menu sheet + scrim.
* Spec: https://m3.material.io/components/top-app-bar
* https://m3.material.io/components/menus
*/
.site-header {
position: -webkit-sticky !important;
position: sticky !important;
top: var(--header-sticky-top);
margin-bottom: .75rem;
z-index: 400 !important;
isolation: isolate;
}
/* Top app bar — opaque frosted pill (no transparent glass on sticky mobile) */
.site-header-bar,
body.header-scrolled .site-header-bar {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: .5rem !important;
min-height: 3.5rem; /* 56dp compact top app bar */
border-radius: var(--md-sys-shape-corner-extra-large, 28px) !important;
padding: .25rem .4rem .25rem .85rem !important;
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent) !important;
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.18) 0%, transparent 52%),
linear-gradient(180deg, rgba(10, 40, 46, 0.98), rgba(4, 20, 24, 0.99)) !important;
box-shadow: var(--md-sys-elevation-level2) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
transition:
background-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease),
box-shadow var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease),
border-color var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, ease);
}
body.header-scrolled .site-header-bar {
border-color: color-mix(in srgb, var(--md-sys-color-outline) 40%, transparent) !important;
box-shadow: var(--md-sys-elevation-level3) !important;
}
.brand-lockup {
gap: .5rem;
min-width: 0;
flex: 1 1 auto;
min-height: 2.75rem;
padding: .15rem 0;
-webkit-tap-highlight-color: transparent;
}
.brand-mark { width: 28px; height: 28px; }
.brand-name {
font-size: var(--md-sys-typescale-title-medium-size, 1rem);
font-weight: var(--md-sys-typescale-title-medium-weight, 700);
line-height: var(--md-sys-typescale-title-medium-line, 1.5rem);
letter-spacing: 0;
}
.brand-sub { display: none; }
/* Icon button — 40dp visual in 48dp touch target (M3) */
.header-menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: var(--touch);
height: var(--touch);
min-width: var(--touch);
margin: 0;
padding: 0;
border-radius: var(--md-sys-shape-corner-full, 999px);
border: 0 !important;
background: transparent !important;
color: var(--md-sys-color-on-surface-variant, var(--muted));
box-shadow: none !important;
flex: 0 0 auto;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition: color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
}
.header-menu-toggle::after {
content: "";
position: absolute;
inset: 4px;
border-radius: inherit;
background: currentColor;
opacity: 0;
pointer-events: none;
transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
}
.header-menu-toggle:hover::after { opacity: var(--md-sys-state-hover-opacity, 0.08); }
.header-menu-toggle:active::after { opacity: var(--md-sys-state-pressed-opacity, 0.12); }
.header-menu-toggle:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}
.site-header.menu-open .header-menu-toggle {
color: var(--md-sys-color-primary);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) !important;
}
.header-menu-toggle svg {
width: 24px;
height: 24px;
position: relative;
z-index: 1;
}
/*
* Modal menu sheet — M3 surface-container-high, list destinations.
* Fixed under app bar so the bar never grows with open menu.
*/
.header-menu {
display: none !important;
position: fixed;
left: max(.75rem, env(safe-area-inset-left, 0px));
right: max(.75rem, env(safe-area-inset-right, 0px));
top: calc(var(--header-sticky-top) + var(--header-h) + .5rem);
z-index: 110;
width: auto;
max-height: min(72dvh, 32rem);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex-direction: column;
gap: 0;
padding: .5rem;
margin: 0;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 94%, transparent);
backdrop-filter: blur(24px) saturate(1.45);
-webkit-backdrop-filter: blur(24px) saturate(1.45);
box-shadow: var(--md-sys-elevation-level3);
color: var(--md-sys-color-on-surface);
transform-origin: top center;
}
.site-header.menu-open .header-menu {
display: flex !important;
animation: mdMenuIn var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate, ease);
}
@keyframes mdMenuIn {
from { opacity: 0; transform: translateY(-.4rem) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Destinations — M3 list / navigation drawer rows */
.main-nav {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
margin: 0 !important;
gap: 0 !important;
max-width: none !important;
width: 100%;
padding: 0;
}
.main-nav a {
position: relative;
width: 100% !important;
min-height: 3.5rem !important; /* 56dp */
justify-content: flex-start !important;
align-items: center !important;
padding: .75rem 1rem .75rem 1.1rem !important;
margin: 0 !important;
font-size: var(--md-sys-typescale-label-large-size, .875rem) !important;
font-weight: var(--md-sys-typescale-label-large-weight, 700) !important;
line-height: var(--md-sys-typescale-label-large-line, 1.25rem) !important;
letter-spacing: .01em;
border-radius: var(--md-sys-shape-corner-full, 999px) !important;
border: 0 !important;
background: transparent !important;
color: var(--md-sys-color-on-surface-variant, var(--muted)) !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease),
color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, ease);
}
.main-nav a:hover {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
color: var(--md-sys-color-on-surface) !important;
text-decoration: none;
}
.main-nav a:active {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
/* Selected destination — M3 secondary-container pill */
.main-nav a.active {
color: var(--md-sys-color-on-secondary-container) !important;
background: var(--md-sys-color-secondary-container) !important;
border: 0 !important;
box-shadow: none !important;
}
.main-nav a.cta {
margin-top: .25rem !important;
justify-content: center !important;
color: var(--md-sys-color-on-primary) !important;
background: var(--md-sys-color-primary) !important;
font-weight: 700 !important;
}
.main-nav a.cta:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 88%, #000) !important;
color: var(--md-sys-color-on-primary) !important;
}
/* Utility section under destinations */
.header-tools {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: .15rem !important;
padding: .55rem .15rem .2rem !important;
margin: .35rem 0 0 !important;
border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
}
.header-tools button,
.header-tools .theme-toggle,
.header-tools .audience-chip,
.header-tools .lang-toggle {
width: 100% !important;
min-height: 3rem !important;
justify-content: flex-start !important;
align-items: center !important;
padding: .55rem 1rem !important;
margin: 0 !important;
border-radius: var(--md-sys-shape-corner-full, 999px) !important;
border: 0 !important;
background: transparent !important;
color: var(--md-sys-color-on-surface-variant, var(--muted)) !important;
font-size: var(--md-sys-typescale-label-large-size, .875rem) !important;
font-weight: 650 !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
.header-tools button:hover,
.header-tools .theme-toggle:hover,
.header-tools .lang-toggle:hover {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
color: var(--md-sys-color-on-surface) !important;
}
.header-tools button[aria-pressed="true"],
.header-tools .theme-toggle[aria-pressed="true"],
.header-tools .lang-toggle[aria-pressed="true"] {
color: var(--md-sys-color-on-secondary-container) !important;
background: var(--md-sys-color-secondary-container) !important;
}
#btn-presenter { display: none !important; }
.audience-chip {
display: inline-flex !important;
font-size: var(--md-sys-typescale-label-medium-size, .75rem) !important;
opacity: .92;
pointer-events: none;
}
.nav-label-full { display: none; }
.nav-label-short { display: inline; }
.audience-chip__full { display: none; }
.audience-chip__short { display: inline; }
/* Light theme inherits the same rules via M3 tokens — no layout fork */
/*
* Hero mobile — mirror desktop hierarchy, not a separate “centered marketing” layout.
* - Glass .hero-inner is a centered card (equal gutters from .wrap; no 100vw breakout).
* - All copy and KPI text left-aligned like desktop.
* - Same content order as desktop: kicker → H1 → lead → meta chips → CTAs → KPIs.
* - Phones use hero-lead-short (compressed full lead); desktop keeps hero-lead-full.
*/
/*
* Stage ends flush with glass card. Clip stage + ambient to the same
* extra-large radius as the glass so dark square corners never peek under
* the rounded card edges.
*/
.hero-stage {
--hero-subnav-gap: var(--space-3); /* 12px — was too airy on phones */
--hero-card-radius: var(--md-sys-shape-corner-extra-large, 28px);
margin: 0;
padding-bottom: 0;
border-radius: var(--hero-card-radius);
overflow: hidden; /* clip ambient/bg to rounded rect */
isolation: isolate;
background:
radial-gradient(ellipse 90% 70% at 70% 8%, rgba(0, 247, 255, 0.14), transparent 65%),
radial-gradient(ellipse 70% 55% at 15% 55%, rgba(160, 45, 255, 0.09), transparent 60%),
linear-gradient(160deg, #05091a 0%, #002442 55%, #001224 100%);
}
.hero-stage::after { display: none; }
.hero-stage > .hero-ambient {
border-radius: inherit;
overflow: hidden;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.hero-stage + .home-subnav,
main > .home-subnav {
/* Match PC: half the hero↔subnav gap as document-flow margin (sticky pin is separate) */
margin-top: calc(var(--hero-subnav-gap) / 2) !important;
margin-bottom: var(--space-3);
}
.hero {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
border-radius: var(--hero-card-radius);
overflow: hidden;
background: transparent;
border-bottom: 0;
box-shadow: none;
}
.hero-inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
text-align: left !important;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
gap: var(--space-3);
padding: var(--space-4) var(--space-4) var(--space-4);
box-sizing: border-box;
overflow: hidden;
border-radius: var(--hero-card-radius);
/* Keep glass fully painted on phones even if nested blur is weak */
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, transparent 46%),
linear-gradient(180deg, rgba(0, 247, 255, 0.07), transparent 55%),
rgba(2, 24, 48, 0.55) !important;
border: 1px solid rgba(0, 247, 255, 0.36) !important;
box-shadow:
0 12px 40px rgba(0, 8, 24, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 247, 255, 0.20) !important;
backdrop-filter: blur(28px) saturate(190%) !important;
-webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}
.hero-stage > .hero-ambient {
border-radius: 0;
opacity: 1 !important;
z-index: 0;
}
/* Keep prism + donut ripples alive on phones (fog motion may stay soft) */
.liquid-ambient-prism {
opacity: 1 !important;
animation: heroPrismShimmer 10s ease-in-out infinite alternate !important;
}
.donut-ripple-1 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) infinite !important; }
.donut-ripple-2 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) 2.8s infinite !important; }
.donut-ripple-3 { animation: donutExpand 8.5s cubic-bezier(0.1, 0.8, 0.2, 1) 5.6s infinite !important; }
.hero-ambient .fog-logo-a {
animation: fogDriftA 36s ease-in-out infinite alternate !important;
opacity: .55;
}
.hero-ambient .fog-logo-b {
animation: fogDriftB 44s ease-in-out infinite alternate !important;
opacity: .5;
}
.hero-ambient .fog-core {
animation: fogDriftA 30s ease-in-out infinite alternate-reverse !important;
opacity: .45;
}
/* Normal document flow — no flex order / display:contents reshuffling */
.hero-inner > div:first-child {
display: block;
width: 100%;
min-width: 0;
text-align: left !important;
}
.hero-kicker {
display: block !important;
max-width: 100%;
padding-right: .2rem;
font-size: .6rem;
line-height: 1.45;
letter-spacing: .09em;
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
text-align: left !important;
margin: 0;
}
.hero h1 {
font-size: clamp(1.85rem, 8vw, 2.4rem);
max-width: 100%;
line-height: 1.08;
margin: .45rem 0 0;
margin-inline: 0;
overflow-wrap: anywhere;
box-sizing: border-box;
text-align: left !important;
text-wrap: balance;
}
/*
* Phones: show the compressed lead only. Full narrative stays on desktop
* (short copy is a true compression of the long lead — not a title re-ask).
*/
.hero-lead-full { display: none !important; }
.hero-lead-short {
display: block !important;
font-size: .9rem;
line-height: 1.5;
margin: .75rem 0 0;
margin-inline: 0;
max-width: 100%;
box-sizing: border-box;
text-align: left !important;
color: var(--muted);
}
.hero-lead-short strong {
color: var(--txt);
font-weight: 650;
}
.hero-lead,
.hero-lead strong {
text-align: left !important;
}
/* Desktop-style chip row (wrap), not full-width centered bars */
.meta-bar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: .4rem;
margin-top: .9rem;
width: 100%;
max-width: 100%;
overflow: visible;
mask-image: none;
padding: 0;
box-sizing: border-box;
}
.meta-bar::-webkit-scrollbar { display: none; }
.meta-bar .chip {
flex: 0 0 auto;
width: auto;
max-width: 100%;
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: .35rem;
font-size: .72rem;
min-height: 2rem;
padding: .35rem .7rem;
box-sizing: border-box;
text-align: left !important;
}
/* Desktop-style CTA row — left pack, not full-bleed centered stacks */
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: .45rem;
margin-top: .9rem;
width: 100%;
box-sizing: border-box;
}
.hero-actions .btn {
min-height: var(--touch);
width: auto;
flex: 0 1 auto;
padding: .55rem 1rem;
font-size: .84rem;
box-sizing: border-box;
}
.hero-actions .btn.tiny {
min-height: 2.5rem;
}
.hero-aside {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left !important;
gap: .65rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
margin-top: .15rem;
}
.site-disclaimer,
.site-disclaimer--hero-aside {
font-size: .72rem;
line-height: 1.45;
padding: .55rem .7rem;
max-width: 100%;
box-sizing: border-box;
text-align: left !important;
margin-inline: 0;
}
/* Portfolio KPI cluster — same glass language as desktop, left-aligned type */
.portfolio {
grid-template-columns: 1fr 1fr;
gap: .55rem;
padding: .7rem;
margin: 0;
border-radius: calc(var(--r-lg) + 2px);
text-align: left !important;
overflow: visible;
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(180deg, rgba(0, 247, 255, 0.05), transparent 55%),
rgba(2, 24, 48, 0.42) !important;
border: 1px solid rgba(0, 247, 255, 0.30) !important;
box-shadow:
0 12px 36px rgba(0, 8, 24, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 247, 255, 0.14) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}
.portfolio .kpi {
padding: .85rem .8rem .8rem;
min-height: 0;
text-align: left !important;
align-items: flex-start;
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, transparent 48%),
linear-gradient(180deg, rgba(0, 247, 255, 0.06), transparent 55%),
rgba(2, 22, 40, 0.58) !important;
border: 1px solid rgba(0, 247, 255, 0.28) !important;
box-shadow:
0 8px 24px rgba(0, 8, 24, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 247, 255, 0.12) !important;
backdrop-filter: blur(18px) saturate(170%) !important;
-webkit-backdrop-filter: blur(18px) saturate(170%) !important;
}
/* Mobile light: override dark oceanic KPI fills (portfolio + asset scorecards) */
html[data-theme="light"] .portfolio .kpi,
html[data-theme="light"] .kpi,
html[data-theme="light"] .matrix-grid .kpi,
html[data-theme="light"] .window-read-grid .kpi,
html[data-theme="light"] #window-read .kpi,
html[data-theme="light"] #snapshot .kpi {
background: var(--surface-glass-raised) !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--shadow-sm) !important;
backdrop-filter: blur(16px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
color: var(--txt) !important;
}
html[data-theme="light"] .portfolio,
html[data-theme="light"] #window-read > .panel,
html[data-theme="light"] #snapshot > .panel {
background: var(--surface-glass) !important;
border-color: var(--glass-border) !important;
box-shadow: var(--shadow-sm) !important;
}
.portfolio .kpi .lbl {
font-size: .58rem;
letter-spacing: .1em;
min-height: 2.4em;
line-height: 1.25;
text-align: left !important;
justify-content: flex-start;
align-items: flex-start;
}
.portfolio .kpi .val {
font-size: clamp(1.2rem, 5.2vw, 1.5rem);
margin-top: .25rem;
text-align: left !important;
}
.portfolio .kpi .hint {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: .64rem;
min-height: 0;
line-height: 1.3;
padding-top: .28rem;
text-align: left !important;
}
.kpi {
text-align: left !important;
align-items: flex-start;
}
.kpi .val { font-size: 1.35rem; text-align: left !important; }
.kpi .lbl { font-size: .6rem; min-height: 2.6em; text-align: left !important; }
.kpi .hint { font-size: .68rem; min-height: 0; text-align: left !important; }
/* B/D context accordion */
.ratio-context {
margin-top: .85rem;
padding: .85rem .9rem .85rem 1rem;
border-radius: 16px;
}
.ratio-context summary {
min-height: var(--touch);
gap: .65rem;
}
.ratio-context h2 {
font-size: .92rem;
line-height: 1.3;
}
.ratio-context__toggle {
flex: 0 0 2.4rem;
width: 2.4rem;
height: 2.4rem;
font-size: 1.2rem;
}
.ratio-context p { font-size: .84rem; line-height: 1.55; }
.ratio-context[open] > .ratio-context__body { padding-top: .65rem; }
/*
* Home mobile subnav — sticky chip rail matching header glass language.
* Pin: header float + measured height + --header-subnav-gap (same as PC).
*/
.home-subnav,
main > .home-subnav {
position: sticky !important;
top: var(--subnav-sticky-top) !important;
z-index: 90;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: .3rem !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: calc(var(--hero-subnav-gap) / 2) 0 var(--space-3) !important;
/* Extra leading inset so first chip isn’t flush / mask-clipped */
padding: .32rem .5rem .32rem .7rem !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
border-radius: var(--md-sys-shape-corner-extra-large, 28px) !important;
border: 1px solid var(--glass-border) !important;
background:
var(--glass-shine-strong),
var(--glass-liquid),
var(--glass-clear) !important;
backdrop-filter: var(--blur-chrome) !important;
-webkit-backdrop-filter: var(--blur-chrome) !important;
box-shadow: var(--shadow-sm), var(--glass-edge) !important;
/* Soft edge fade; start after left padding so first label stays solid */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
}
.home-subnav::-webkit-scrollbar { display: none; }
.home-subnav a {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 2.35rem !important;
padding: .4rem .8rem !important;
font-size: .78rem !important;
font-weight: 700 !important;
letter-spacing: .01em;
line-height: 1.15;
color: var(--muted) !important;
border: 1px solid transparent;
border-radius: var(--md-sys-shape-corner-full, 999px) !important;
background: transparent;
text-decoration: none !important;
transition:
color .18s var(--ease),
background .18s var(--ease),
border-color .18s var(--ease),
box-shadow .18s var(--ease);
}
.home-subnav a:hover {
color: var(--txt) !important;
background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-outline) 45%, transparent);
}
.home-subnav a.is-active,
.home-subnav a[aria-current="page"],
.home-subnav a[aria-current="location"] {
color: var(--accent-2) !important;
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 50%, transparent) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.10), transparent 55%),
color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .home-subnav,
html[data-theme="light"] main > .home-subnav {
border-color: var(--glass-border) !important;
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow-sm) !important;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
}
html[data-theme="light"] .home-subnav a {
color: #1a302c !important;
font-weight: 700 !important;
}
html[data-theme="light"] .home-subnav a:hover {
color: #006a60 !important;
background: rgba(0, 160, 150, 0.10) !important;
border-color: rgba(0, 120, 110, 0.28) !important;
}
html[data-theme="light"] .home-subnav a.is-active,
html[data-theme="light"] .home-subnav a[aria-current="page"],
html[data-theme="light"] .home-subnav a[aria-current="location"] {
color: #006a60 !important;
border-color: rgba(144, 0, 201, 0.38) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%),
rgba(0, 160, 150, 0.14) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 4px rgba(12, 40, 38, .05);
}
main > .ratio-context {
position: relative;
z-index: 2;
margin-top: .15rem;
}
/* Sections / scan controls */
.section { margin-top: 1.35rem; }
.section-head {
flex-direction: column;
align-items: stretch;
gap: .65rem;
margin-bottom: .85rem;
padding-bottom: .7rem;
}
.section-head h2 { font-size: 1.28rem; }
.section-head p {
font-size: .82rem;
line-height: 1.5;
max-width: none;
}
.mode-toggle {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
padding: .2rem;
}
.mode-toggle button {
flex: 1;
min-height: var(--touch);
padding: .45rem .5rem;
font-size: .82rem;
}
.status-key {
flex-direction: column;
align-items: stretch;
gap: .5rem;
padding: .7rem .8rem;
margin-bottom: .85rem;
font-size: .78rem;
line-height: 1.4;
}
.status-key__item {
width: 100%;
gap: .5rem;
align-items: flex-start;
}
.filters {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"search search"
"class sort"
"status status";
gap: .6rem .65rem;
padding: .8rem .85rem;
margin-bottom: .85rem;
align-items: end;
}
.filters-status {
gap: .35rem;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-top: .4rem;
padding-bottom: .1rem;
}
.filters-status::-webkit-scrollbar { display: none; }
.filters-status__label { flex: 0 0 auto; }
.filters label {
font-size: .62rem;
margin: 0;
}
.filters input,
.filters select {
min-height: var(--touch);
padding: .65rem .85rem;
font-size: 1rem; /* avoid iOS zoom */
border-radius: 12px;
}
.filters select { padding-right: 2.35rem; }
.status-chip {
flex: 0 0 auto;
padding: .4rem .7rem;
font-size: .74rem;
min-height: var(--touch);
}
/* Asset cards — force oceanic glass on shells (home uses shell, not .asset-card) */
.asset-grid { gap: .85rem; }
.asset-card,
.asset-card-shell {
grid-template-columns: 1fr;
gap: 0;
border-radius: 18px;
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(180deg, rgba(0, 247, 255, 0.05), transparent 55%),
rgba(2, 24, 48, 0.50) !important;
border: 1px solid rgba(0, 247, 255, 0.32) !important;
box-shadow:
0 12px 40px rgba(0, 8, 24, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.26),
inset 0 -1px 0 rgba(0, 247, 255, 0.16) !important;
backdrop-filter: blur(28px) saturate(190%) !important;
-webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}
.asset-card {
padding: 0;
}
.metric-row .kpi,
.verdict-kpis .kpi,
.panel,
.filters,
.lesson-card,
.review-card,
.method-card,
.fund-card {
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.10) 0%, transparent 46%),
linear-gradient(180deg, rgba(0, 247, 255, 0.05), transparent 55%),
rgba(2, 24, 48, 0.48) !important;
border: 1px solid rgba(0, 247, 255, 0.28) !important;
box-shadow:
0 10px 32px rgba(0, 8, 24, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 247, 255, 0.14) !important;
backdrop-filter: blur(22px) saturate(175%) !important;
-webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}
/* Do not re-glass sticky chrome here — opaque mobile paints own the header/subnav. */
.asset-card-main { order: 1; padding: 1rem .95rem .85rem; }
.asset-card-chart {
order: 2;
min-height: 220px;
padding: .55rem .75rem .85rem;
border-left: 0;
border-top: 1px solid rgba(158, 255, 241, 0.08);
border-radius: 0 0 18px 18px;
}
.asset-card-shell .asset-card-main { padding: 1rem .95rem .85rem; }
.asset-card-shell .asset-card-chart {
min-height: 220px;
padding: .55rem .75rem .9rem;
border-left: 0;
border-top: 1px solid rgba(158, 255, 241, 0.08);
border-radius: 0 0 18px 18px;
}
.asset-card h3 { font-size: 1.25rem; }
.asset-card-top {
flex-wrap: wrap;
gap: .5rem;
}
.asset-card-top > .btn.ghost {
min-height: 2.4rem;
font-size: .78rem;
}
.asset-blurb {
font-size: .84rem;
line-height: 1.5;
margin: .5rem 0 .7rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.metric-row {
grid-template-columns: 1fr 1fr;
gap: .4rem;
}
.metric-row .kpi {
padding: .6rem .55rem;
}
.metric-row .kpi .lbl {
font-size: .56rem;
min-height: 2.5em;
letter-spacing: .08em;
}
.metric-row .kpi .val {
font-size: 1.05rem;
min-height: 1.2em;
}
.metric-row .kpi .hint {
display: none; /* save vertical space; values carry the signal */
}
.metric-row .kpi .subname {
min-height: 0;
font-size: .65rem;
}
.spark {
min-height: 200px;
height: 210px;
border-radius: 14px;
}
.main-chart { min-height: 240px; height: 240px; }
.spark-toolbar {
gap: .35rem;
margin-bottom: 6px;
}
.hard-tape-chip {
min-width: calc(50% - .35rem);
flex: 1 1 42%;
padding: .7rem .75rem;
}
.hard-tape-strip { gap: .5rem; }
/* Compare table: scroll affordance */
.compare-shell {
margin-inline: calc(-1 * var(--mobile-gutter));
border-radius: 0;
border-left: 0;
border-right: 0;
position: relative;
}
.compare-shell::after {
content: "Swipe →";
position: absolute;
top: .55rem;
right: .7rem;
z-index: 2;
font-size: .62rem;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted-soft);
pointer-events: none;
opacity: .75;
}
table.compare { min-width: 640px; }
table.compare th, table.compare td {
padding: .75rem .55rem;
font-size: .84rem;
}
table.compare th:first-child,
table.compare td:first-child { padding-left: .85rem; }
table.compare th:last-child,
table.compare td:last-child { padding-right: .85rem; }
/* Narrative sections */
.origin-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.faq-grid { grid-template-columns: 1fr; }
.lesson-grid { grid-template-columns: 1fr; }
.review-grid { grid-template-columns: 1fr; }
.origin-story, .origin-definition { padding: 1.1rem 1rem; }
.faq-item summary {
min-height: var(--touch);
padding: .85rem .95rem;
font-size: .88rem;
}
.faq-item p { padding: .75rem .95rem 1rem; font-size: .84rem; }
/* Asset inspect chrome */
.asset-switcher {
flex-wrap: nowrap;
overflow-x: auto;
padding: .5rem .55rem;
margin-top: .85rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.asset-switcher::-webkit-scrollbar { display: none; }
.asset-switcher__label { flex: 0 0 auto; }
.asset-switcher__label span { display: none; }
.asset-switcher a {
flex: 0 0 auto;
min-height: var(--touch);
padding: .45rem .75rem;
}
/*
* Asset page section rail — single-row chip scroll (not a multi-row tall pill).
* Matches home mobile subnav language; later base rules must not re-wrap this.
*/
.asset-page-nav {
position: sticky !important;
top: var(--subnav-sticky-top) !important;
z-index: 90;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: .3rem !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 0 var(--space-3) !important;
padding: .32rem .5rem .32rem .7rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
border-radius: var(--md-sys-shape-corner-extra-large, 28px) !important;
border: 1px solid var(--glass-border) !important;
background:
var(--glass-shine-strong),
var(--glass-liquid),
var(--glass-clear) !important;
backdrop-filter: var(--blur-chrome) !important;
-webkit-backdrop-filter: var(--blur-chrome) !important;
box-shadow: var(--shadow-sm), var(--glass-edge) !important;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 .35rem,
#000 calc(100% - .55rem),
transparent 100%
);
}
.asset-page-nav::-webkit-scrollbar { display: none; }
.asset-page-nav__label {
flex: 0 0 auto;
font-size: .62rem !important;
letter-spacing: .1em;
padding: 0 .15rem 0 0 !important;
margin: 0 !important;
}
.asset-page-nav a {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 2.35rem !important;
padding: .4rem .75rem !important;
white-space: nowrap !important;
scroll-snap-align: start;
font-size: .78rem !important;
font-weight: 700 !important;
line-height: 1.15;
border-radius: var(--md-sys-shape-corner-full, 999px) !important;
}
html[data-theme="light"] .asset-page-nav {
border-color: var(--glass-border) !important;
background: var(--surface-glass-raised) !important;
box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .asset-page-nav a {
color: #1a302c !important;
}
html[data-theme="light"] .asset-page-nav a:hover,
html[data-theme="light"] .asset-page-nav a.is-active,
html[data-theme="light"] .asset-page-nav a[aria-current="page"] {
color: #006a60 !important;
border-color: rgba(144, 0, 201, 0.38) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%),
rgba(0, 160, 150, 0.14) !important;
}
html[data-theme="light"] .asset-page-nav__label {
color: #2a423e !important;
}
.chart-box {
margin-top: .85rem;
padding: .9rem .8rem 1rem;
border-radius: 16px;
}
.chart-toolbar {
display: flex;
width: 100%;
border-radius: 14px;
gap: .25rem;
}
.chart-btn {
flex: 1 1 0;
min-width: 0;
min-height: var(--touch);
text-align: center;
padding: .45rem .25rem;
font-size: .74rem;
}
.chart-hint button {
min-height: var(--touch);
padding: .45rem .65rem;
}
.btn.tiny,
.how-to-read-pill,
.scorecard-tabs button {
min-height: var(--touch);
}
.card-share-btn {
width: var(--touch);
height: var(--touch);
}
.fab-back {
bottom: max(.85rem, env(safe-area-inset-bottom, 0px));
left: max(.85rem, env(safe-area-inset-left, 0px));
min-height: var(--touch);
padding: .55rem .9rem .55rem .75rem;
}
/* Atmosphere cost control on phones */
.site-fog__mark--a { width: 120vw; height: 120vw; top: -18%; right: -40%; filter: blur(24px); opacity: .45; }
.site-fog__mark--b { width: 95vw; height: 95vw; left: -40%; bottom: -20%; filter: blur(30px); opacity: .35; }
.note, .status-key, .status-key__item { font-size: .78rem; line-height: 1.45; }
}
/* Narrow phones */
@media (max-width: 420px) {
:root { --mobile-gutter: max(.55rem, env(safe-area-inset-left, 0px)); --mobile-gutter-r: max(.55rem, env(safe-area-inset-right, 0px)); }
.hero h1 { font-size: 1.8rem; }
.portfolio .kpi .lbl { min-height: 2.1em; font-size: .54rem; }
.portfolio .kpi .val { font-size: 1.12rem; }
.portfolio .kpi .hint { -webkit-line-clamp: 1; }
.metric-row .kpi .lbl { min-height: 2.2em; }
.metric-row .kpi .val { font-size: .98rem; }
.hard-tape-chip { min-width: 100%; flex: 1 1 100%; }
.main-nav { grid-template-columns: 1fr 1fr 1fr; gap: .3rem; }
.main-nav a { font-size: .74rem; padding: .45rem .25rem; }
.verdict-kpis .kpi { min-height: 7.5rem; padding: .75rem .65rem; }
.fab-back { font-size: .78rem; }
.ratio-context h2 { font-size: .88rem; }
}
@media (max-width: 720px) {
.hard-tape-strip {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: .15rem;
mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.hard-tape-strip::-webkit-scrollbar { display: none; }
.hard-tape-chip {
min-width: 9.5rem !important;
width: 9.5rem !important;
flex: 0 0 9.5rem !important;
}
}
@media (max-width: 340px) {
.portfolio, .metric-row, .verdict-kpis { grid-template-columns: 1fr; }
.portfolio .kpi .hint { display: none; }
}
/* —— How-to-read pill bar —— */
.how-to-read-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem;
margin-bottom: 1rem;
padding: .65rem 1rem;
border-radius: var(--r);
border: 1px solid rgba(3,218,197,.18);
background:
var(--glass-shine),
linear-gradient(135deg, rgba(3,218,197,.07), rgba(255,255,255,.01)),
rgba(2, 14, 18, 0.35);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
box-shadow: var(--glass-edge);
position: relative;
}
.how-to-read-bar__label {
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-right: .35rem;
flex-shrink: 0;
}
.how-to-read-bar__note {
flex: 1 0 100%;
color: var(--muted);
font-size: .82rem;
line-height: 1.45;
}
.how-to-read-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .8rem;
border-radius: 999px;
border: 1px solid rgba(3,218,197,.22);
background: rgba(3,218,197,.07);
color: var(--txt);
font-size: .78rem;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.how-to-read-pill:hover { background: rgba(3,218,197,.16); border-color: rgba(3,218,197,.45); }
.how-to-read-pill.active { background: rgba(3,218,197,.2); border-color: rgba(3,218,197,.55); color: var(--accent-2); }
.how-to-read-pills {
display: flex;
flex-wrap: wrap;
gap: .45rem;
min-width: 0;
}
.how-to-read-popover {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2147483000;
isolation: isolate;
box-sizing: border-box;
width: max-content;
max-width: min(28rem, calc(100vw - 1.5rem));
padding: .75rem 1rem;
border-radius: var(--r);
border: 1px solid rgba(3,218,197,.25);
background: rgba(2,18,20,.97);
backdrop-filter: blur(16px);
font-size: .84rem;
line-height: 1.55;
color: var(--txt);
box-shadow: 0 8px 32px rgba(0,0,0,.5);
overflow-wrap: anywhere;
pointer-events: none;
}
.how-to-read-popover.show { display: block; }
@media (max-width: 720px) {
.how-to-read-bar {
padding: .65rem .75rem;
gap: .4rem;
border-radius: 14px;
}
.how-to-read-bar__note {
font-size: .76rem;
line-height: 1.4;
}
.how-to-read-pills {
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: .15rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.how-to-read-pills::-webkit-scrollbar { display: none; }
.how-to-read-pill {
flex: 0 0 auto;
min-height: var(--touch, 2.75rem);
padding: .45rem .8rem;
font-size: .76rem;
}
.how-to-read-popover {
max-width: calc(100vw - 1.25rem);
font-size: .82rem;
}
}
/* —— Scorecard groups —— */
.scorecard-group { margin-bottom: 1.25rem; }
.scorecard-group:last-child { margin-bottom: 0; }
.scorecard-group__label {
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-2);
margin: 0 0 .55rem;
opacity: .8;
}
/* —— Card share button (inline after asset name) —— */
.card-share-btn {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
flex: 0 0 auto;
margin-left: .15rem; /* extra air past the title */
border-radius: 50%;
border: 1px solid rgba(158, 255, 241, 0.22);
background: rgba(255, 255, 255, 0.06);
color: var(--accent-2);
cursor: pointer;
font-size: .8rem;
transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
z-index: 2;
padding: 0;
line-height: 1;
vertical-align: middle;
}
.card-share-btn:hover {
color: #fff;
border-color: rgba(3, 218, 197, .55);
background: rgba(3, 218, 197, .16);
box-shadow: 0 0 12px rgba(3, 218, 197, .18);
}
html[data-theme="light"] .card-share-btn {
color: #006a60;
border-color: rgba(0, 106, 96, 0.28);
background: rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 4px rgba(12, 40, 38, .06);
}
html[data-theme="light"] .card-share-btn:hover {
color: #005048;
border-color: rgba(0, 120, 110, 0.45);
background: rgba(0, 160, 150, 0.14);
box-shadow: 0 0 12px rgba(0, 140, 130, .12);
}
.asset-card { position: relative; }
/* —— Share toast —— */
.share-toast {
position: fixed; bottom: 1.5rem; left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(3,218,197,.12);
border: 1px solid rgba(3,218,197,.3);
backdrop-filter: blur(16px);
color: var(--accent-2);
padding: .55rem 1.2rem;
border-radius: 999px;
font-size: .84rem; font-weight: 600;
opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 500;
}
.share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* —— About the data strip —— */
.data-strip {
margin-top: 1.5rem;
padding: .85rem 1.1rem;
border-radius: var(--r);
border: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
rgba(255,255,255,.015);
display: flex; flex-wrap: wrap; gap: .35rem .9rem;
align-items: center;
font-size: .78rem; color: var(--muted);
}
.data-strip strong { color: var(--txt); font-weight: 600; }
/* —— UX polish pack (public + internal discussion site) —— */
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Ambient + scrolled header tokens live in the optical glass system above. */
@keyframes auroraDrift {
0% { transform: none; }
100% { transform: none; }
}
:focus-visible {
outline: none;
box-shadow: var(--focus);
}
.main-nav a:focus-visible, .btn:focus-visible, .chart-btn:focus-visible,
.how-to-read-pill:focus-visible, .asset-switcher a:focus-visible,
.asset-page-nav a:focus-visible, .filters input:focus-visible,
.filters select:focus-visible, .toolbar-actions button:focus-visible {
outline: none;
box-shadow: var(--focus);
}
/* Audience / mode chips */
.audience-bar {
display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
margin: 0 0 .85rem; font-size: .78rem; color: var(--muted);
}
.audience-chip {
display: inline-flex; align-items: center; gap: .3rem;
padding: .22rem .6rem; border-radius: 999px;
border: 1px solid var(--line); background: rgba(255,255,255,.03);
font-weight: 700; letter-spacing: .02em;
}
.audience-chip.public { color: var(--accent-2); border-color: rgba(3,218,197,.35); background: rgba(3,218,197,.08); }
.audience-chip.internal { color: var(--warn); border-color: rgba(255,212,121,.35); background: rgba(255,212,121,.08); }
.site-disclaimer {
margin: .8rem 0 0;
padding: .6rem .9rem;
border-radius: 12px;
border: 1px solid rgba(158,255,241,.10);
background:
linear-gradient(180deg, rgba(255,255,255,.03), transparent),
rgba(0,0,0,.16);
color: var(--muted);
font-size: .78rem;
line-height: 1.5;
max-width: 42rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* Meta credibility strip */
.meta-bar {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: 1rem 0 0;
}
.meta-bar .chip {
display: inline-flex; align-items: center; gap: .3rem;
padding: .28rem .65rem; border-radius: 999px;
border: 1px solid var(--line); background: rgba(255,255,255,.03);
font-size: .72rem; font-weight: 700; color: var(--muted);
}
.meta-bar .chip strong { color: var(--txt); font-weight: 800; }
/* Share / collab strip */
.collab-strip {
display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
margin: .75rem 0 0;
}
.collab-strip .btn.tiny {
padding: .35rem .7rem; font-size: .78rem; border-radius: 999px;
}
.collab-strip .hint { color: var(--muted); font-size: .76rem; }
/* Presenter mode */
body.presenter-mode .site-fog,
body.presenter-mode .site-aurora,
body.presenter-mode .site-grain,
body.presenter-mode #about-data,
body.presenter-mode .disclaimer-reality { display: none !important; }
body.presenter-mode { font-size: 16px; }
body.presenter-mode .kpi .val { font-size: 2rem !important; }
body.presenter-mode .metric-row .kpi .val {
max-width: 100%;
font-size: 1.5rem !important;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
body.presenter-mode .asset-card, body.presenter-mode .asset-card-shell { box-shadow: 0 20px 50px rgba(0,0,0,.4); }
/* Widen the centered column — do NOT widen .hero-inner alone (overflows right of .hero) */
body.presenter-mode .wrap {
width: min(1520px, calc(100vw - 1rem));
margin-left: auto;
margin-right: auto;
}
@media (min-width: 980px) {
body.presenter-mode .hero-stage > .hero {
width: min(1520px, calc(100vw - 2.25rem));
max-width: calc(100vw - 2.25rem);
margin-left: auto;
margin-right: auto;
}
body.presenter-mode .hero-stage .hero-inner,
body.presenter-mode .hero-inner {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* Narrow / default: hero-inner is its own centered card */
@media (max-width: 979px) {
body.presenter-mode .hero-inner {
width: min(1520px, calc(100vw - 2.25rem));
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* Home subnav + asset page nav */
.home-subnav {
display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
margin: 0 0 1rem; padding: .45rem .55rem;
border-radius: 999px; border: 1px solid var(--line);
background: rgba(2, 16, 18, 0.92); backdrop-filter: blur(14px);
}
.home-subnav a {
color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 700;
padding: .32rem .7rem; border-radius: 999px;
}
.home-subnav a:hover,
.home-subnav a.is-active,
.home-subnav a[aria-current="page"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--md-sys-color-tertiary) 60%, transparent);
text-decoration: none;
}
/* Desktop/tablet base; mobile redefines as single-row scroll rail (see max-width:720). */
.asset-page-nav {
position: sticky;
top: var(--subnav-sticky-top);
z-index: 90;
display: flex;
flex-wrap: nowrap;
gap: .3rem;
align-items: center;
margin: .65rem 0 .85rem;
padding: .45rem .55rem;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
background:
linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, transparent);
backdrop-filter: blur(14px);
box-shadow: var(--md-sys-elevation-level1), inset 0 1px 0 rgba(255,255,255,.10);
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.asset-page-nav + .section { margin-top: 1rem; }
.asset-page-nav__label {
font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted-soft); padding: 0 .35rem;
}
.asset-page-nav a {
color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 700;
padding: .32rem .65rem; border-radius: 999px; border: 1px solid transparent;
}
.asset-page-nav a:hover,
.asset-page-nav a.is-active,
.asset-page-nav a[aria-current="page"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 60%, transparent);
text-decoration: none;
}
/* Segmented chart toolbars (zoom / range) */
.chart-toolbar {
display: inline-flex; flex-wrap: wrap; gap: 0; margin: .45rem 0 .65rem;
padding: 3px; border-radius: 999px; border: 1px solid var(--line);
background: rgba(0,0,0,.22); max-width: 100%;
}
.chart-btn {
background: transparent; color: var(--muted); border: 1px solid transparent;
padding: .4rem .8rem; border-radius: 999px; cursor: pointer; margin: 0;
font-weight: 700; font-size: .76rem; min-height: 2rem; touch-action: manipulation;
}
.chart-btn:hover {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 45%, transparent);
}
.chart-btn.active,
.chart-btn[aria-pressed="true"] {
color: var(--accent-2);
background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 65%, transparent);
}
.chart-hint {
display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center;
margin: 0 0 .55rem; padding: .4rem .7rem; border-radius: 12px;
border: 1px solid var(--line); background: rgba(3,218,197,.06);
color: var(--muted); font-size: .76rem;
}
.chart-hint[hidden] { display: none !important; }
.chart-hint button {
margin-left: auto; border: 0; background: transparent; color: var(--accent-2);
font: inherit; font-weight: 700; cursor: pointer; padding: .15rem .3rem;
}
/* Compare sticky + sort */
.compare-shell { position: relative; }
table.compare { border-collapse: separate; border-spacing: 0; }
table.compare thead th {
position: sticky; top: 0; z-index: 2;
background: rgba(4, 28, 30, 0.96); backdrop-filter: blur(8px);
}
table.compare th:first-child, table.compare td:first-child {
position: sticky; left: 0; z-index: 1;
background: rgba(4, 24, 26, 0.96);
}
table.compare thead th:first-child { z-index: 3; }
table.compare th.sortable { cursor: pointer; user-select: none; }
table.compare th.sortable:hover { color: var(--accent-2); }
table.compare th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent-2); }
table.compare th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent-2); }
.compare-actions {
display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .65rem; align-items: center;
}
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
/* Asset card: nav zone vs chart zone (no nested interactive link conflict) */
.asset-card {
display: grid; text-decoration: none; color: inherit;
}
.asset-card-main { min-width: 0; }
.asset-card-chart {
min-width: 0; position: relative; z-index: 2;
/* isolate chart gestures from card navigation */
pointer-events: auto;
}
a.asset-card .asset-card-chart { /* chart sits outside pure nav intent */ }
.asset-card-link-hit {
position: absolute; inset: 0; z-index: 0; border-radius: inherit;
}
.asset-card-shell {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background:
var(--glass-shine),
linear-gradient(155deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 50%),
rgba(3, 16, 20, 0.42);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: var(--blur-soft);
-webkit-backdrop-filter: var(--blur-soft);
overflow: visible;
transition: border-color .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.asset-card-shell:hover {
border-color: rgba(3,218,197,.45);
transform: translateY(-4px);
box-shadow:
0 22px 56px rgba(0,0,0,.36),
var(--glow-accent),
inset 0 1px 0 rgba(255,255,255,.14);
z-index: 20;
}
.asset-card-shell:focus-within { z-index: 20; }
@media (min-width: 980px) {
.asset-card-shell { grid-template-columns: 1.12fr 1fr; }
.asset-card-shell .asset-card-chart {
border-radius: 0 var(--r-lg) var(--r-lg) 0;
border-left: 1px solid rgba(158, 255, 241, 0.07);
border-top: 0;
}
}
.asset-card-shell .asset-card-main { position: relative; z-index: 3; padding: 1.2rem 1.2rem 1.15rem; }
.asset-card-shell .asset-card-chart {
padding: 1rem 1rem 1rem .85rem;
overflow: hidden;
border-radius: 0 0 var(--r-lg) var(--r-lg);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(3,218,197,.05), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%),
rgba(0, 0, 0, 0.16);
}
.asset-card-shell .asset-card-main a.inspect-link {
position: relative; z-index: 2;
}
.status-icon {
display: inline-flex; width: 1.05rem; height: 1.05rem; align-items: center; justify-content: center;
border-radius: 999px; border: 1px solid currentColor; font-size: .62rem; font-weight: 800;
margin-right: .25rem; vertical-align: middle;
}
.badge .status-icon { margin-right: .2rem; }
/* Internal CTA panel on public asset pages */
.internal-cta {
margin: 1rem 0 0; padding: .9rem 1rem; border-radius: var(--r);
border: 1px dashed rgba(255,212,121,.35);
background: linear-gradient(135deg, rgba(255,212,121,.07), transparent 55%), rgba(0,0,0,.16);
}
.internal-cta h3 { margin: 0 0 .35rem; font-size: .95rem; }
.internal-cta p { margin: 0 0 .65rem; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.internal-cta .btn-row { display: flex; flex-wrap: wrap; gap: .45rem; }
/* Scorecard pass/fail marks */
.kpi .tone-mark {
display: inline-block; margin-right: .3rem; font-weight: 800; font-size: .85em;
}
.kpi .tone-mark.good { color: var(--ok); }
.kpi .tone-mark.bad { color: var(--bad); }
.kpi .tone-mark.warn { color: var(--warn); }
/* Scorecard mobile tabs */
.scorecard-tabs {
display: none; gap: .35rem; margin: 0 0 .75rem; flex-wrap: wrap;
}
.scorecard-tabs button {
border: 1px solid var(--line); background: transparent; color: var(--muted);
border-radius: 999px; padding: .35rem .7rem; font-weight: 700; font-size: .76rem; cursor: pointer;
}
.scorecard-tabs button[aria-selected="true"] {
color: var(--accent-2); border-color: rgba(3,218,197,.4); background: rgba(3,218,197,.1);
}
@media (max-width: 720px) {
.scorecard-tabs { display: flex; width: 100%; gap: .35rem; }
.scorecard-tabs button { flex: 1 1 0; min-width: 0; text-align: center; }
.scorecard-group[data-tab-panel] { display: none; }
.scorecard-group[data-tab-panel].is-active { display: block; }
.asset-page-nav__label,
.asset-page-nav a { flex: 0 0 auto; }
.chart-hint { align-items: flex-start; }
.chart-hint > span { flex: 0 0 100%; }
.chart-hint button { margin-left: 0; }
/* Hero leads: full on desktop / tablet; short only on phones (≤720px). */
}
.hero-lead-short {
display: none;
color: var(--muted);
font-size: .95rem;
line-height: 1.5;
max-width: 40rem;
}
/* Methodology layout: [ sticky TOC | content column ] — never a third free-floating col */
.method-layout {
display: grid;
gap: 1.25rem;
margin-top: 1.1rem;
min-width: 0;
max-width: 100%;
}
@media (min-width: 980px) {
.method-layout {
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
align-items: start;
}
.method-toc {
position: sticky;
top: var(--subnav-sticky-top);
max-height: calc(100vh - var(--subnav-sticky-top) - 1.25rem);
overflow-y: auto;
}
}
.method-toc {
isolation: isolate;
padding: .65rem;
border-radius: var(--md-sys-shape-corner-large, var(--r));
border: 1px solid var(--glass-border);
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(18px) saturate(1.45);
-webkit-backdrop-filter: blur(18px) saturate(1.45);
min-width: 0;
counter-reset: method-nav;
color: var(--txt);
}
.method-toc strong {
display: flex;
align-items: center;
gap: .55rem;
padding: .35rem .55rem .65rem;
color: var(--muted);
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.method-toc strong::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(90deg, rgba(143,248,234,.24), transparent);
}
.method-toc a {
position: relative;
display: grid;
grid-template-columns: 1.35rem minmax(0, 1fr);
align-items: center;
min-height: 2.5rem;
padding: .42rem .55rem;
border: 1px solid transparent;
border-radius: 6px;
color: var(--muted);
text-decoration: none;
font-size: .8rem;
font-weight: 650;
line-height: 1.25;
counter-increment: method-nav;
transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.method-toc a::before {
content: counter(method-nav, decimal-leading-zero);
color: rgba(161,199,195,.58);
font-size: .62rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.method-toc a::after {
content: "";
position: absolute;
inset: .45rem auto .45rem 0;
width: 2px;
border-radius: 2px;
background: transparent;
}
.method-toc a:hover {
color: var(--txt);
border-color: rgba(216,255,249,.1);
background: rgba(255,255,255,.035);
text-decoration: none;
}
.method-toc a.is-active,
.method-toc a[aria-current="location"] {
color: var(--accent-2);
border-color: color-mix(in srgb, var(--md-sys-color-tertiary) 45%, var(--glass-border));
background:
linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%),
color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-sm);
text-decoration: none;
}
.method-toc a.is-active::before,
.method-toc a[aria-current="location"]::before { color: var(--accent-2); }
.method-toc a.is-active::after,
.method-toc a[aria-current="location"]::after { background: var(--accent); }
.method-toc a:focus-visible {
outline: 2px solid rgba(143,248,234,.52);
outline-offset: 1px;
}
/*
* Mobile page jumps (home, asset, methodology) — one dropdown language.
* Chip rails stay desktop; phones use native select + chevron.
*/
.page-jump,
.method-jump {
display: none;
margin: 0 0 1rem;
position: relative;
}
.page-jump::after,
.method-jump::after {
content: "";
position: absolute;
top: 50%;
right: 1.05rem;
width: .55rem;
height: .55rem;
margin-top: -.2rem;
border-right: 2px solid var(--md-sys-color-on-surface-variant, var(--muted));
border-bottom: 2px solid var(--md-sys-color-on-surface-variant, var(--muted));
transform: translateY(-50%) rotate(45deg);
pointer-events: none;
opacity: .85;
z-index: 2;
}
html[data-theme="light"] .page-jump::after,
html[data-theme="light"] .method-jump::after {
border-color: var(--md-sys-color-on-surface-variant, #2a423e);
opacity: .9;
}
.page-jump select,
.method-jump select,
.page-jump__select {
width: 100%;
appearance: none;
-webkit-appearance: none;
/* Native expanded picker follows color-scheme (not glass gradients) */
color-scheme: dark;
background:
var(--glass-shine-strong),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 82%, transparent);
color: var(--md-sys-color-on-surface, var(--txt));
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
padding: .7rem 2.6rem .7rem 1rem;
font-weight: 700;
font-size: .9rem;
box-shadow: var(--md-sys-elevation-level1);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Option list: solid surfaces so expanded menu matches theme (dark + light) */
.page-jump select option,
.method-jump select option,
.page-jump__select option,
.filters select option {
background-color: var(--md-sys-color-surface-container-high, #202a2c);
color: var(--md-sys-color-on-surface, #e8f2f0);
}
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump__select,
html[data-theme="light"] .filters select {
color-scheme: light;
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest, #fff) 92%, transparent);
color: var(--md-sys-color-on-surface, #0a1c1a);
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 75%, transparent);
}
html[data-theme="light"] .page-jump select option,
html[data-theme="light"] .method-jump select option,
html[data-theme="light"] .page-jump__select option,
html[data-theme="light"] .filters select option {
/* Solid light plate — browsers ignore translucent option backgrounds */
background-color: #ffffff;
color: #0a1c1a;
}
html:not([data-theme="light"]) .page-jump select option,
html:not([data-theme="light"]) .method-jump select option,
html:not([data-theme="light"]) .page-jump__select option,
html:not([data-theme="light"]) .filters select option {
background-color: #1a2628;
color: #e8f2f0;
}
/* Kill sticky dark focus plate after touch — keyboard keeps :focus-visible */
.page-jump select:focus,
.method-jump select:focus,
.page-jump__select:focus {
outline: none;
box-shadow: var(--md-sys-elevation-level1);
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
}
.page-jump select:focus-visible,
.method-jump select:focus-visible,
.page-jump__select:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
border-color: var(--md-sys-color-primary);
}
.page-jump-trigger,
.page-jump-menu {
display: none;
}
@media (max-width: 979px) {
.method-toc { display: none; }
.method-jump { display: block; }
}
@media (max-width: 720px) {
/* Hide chip rails; use dropdowns (same as Methodology) */
.home-subnav,
main > .home-subnav,
.asset-page-nav {
display: none !important;
}
.page-jump,
.method-jump,
.home-page-jump,
.asset-page-jump {
display: block;
position: -webkit-sticky;
position: sticky;
top: var(--subnav-sticky-top);
z-index: 390;
isolation: isolate;
margin: 0 0 var(--space-3);
padding: .32rem .4rem;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 65%, transparent);
/* Opaque fill first — backdrop-filter alone fails on many mobile sticky layers */
background-color: #0a1e22;
background-image:
linear-gradient(165deg, rgba(255,255,255,.14) 0%, transparent 55%),
linear-gradient(180deg, rgba(8, 36, 42, 0.98), rgba(4, 20, 24, 0.99));
box-shadow: var(--md-sys-elevation-level2);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.page-jump::after,
.method-jump::after {
right: .95rem;
}
.page-jump select,
.method-jump select,
.page-jump__select {
border: 0;
box-shadow: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
min-height: 2.75rem;
padding: .5rem 2.4rem .5rem .75rem;
}
.page-jump select:focus,
.method-jump select:focus,
.page-jump__select:focus {
border: 0;
box-shadow: none;
outline: none;
}
.page-jump.has-custom-jump::after,
.method-jump.has-custom-jump::after {
content: none !important;
}
.page-jump.has-custom-jump select,
.method-jump.has-custom-jump select,
.page-jump.has-custom-jump .page-jump__select,
.method-jump.has-custom-jump .page-jump__select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.page-jump-trigger {
display: flex;
width: 100%;
min-height: 2.75rem;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem 2.25rem .5rem .75rem;
border: 0;
border-radius: var(--md-sys-shape-corner-large, 16px);
background: transparent;
color: var(--md-sys-color-on-surface, var(--txt));
font: inherit;
font-size: 1rem;
font-weight: 800;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.page-jump-trigger::after {
content: "";
position: absolute;
right: 1.25rem;
width: .55rem;
height: .55rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-18%) rotate(45deg);
opacity: .8;
}
.page-jump.has-custom-jump.is-open .page-jump-trigger::after,
.method-jump.has-custom-jump.is-open .page-jump-trigger::after {
transform: translateY(18%) rotate(225deg);
}
.page-jump.has-custom-jump.is-open,
.method-jump.has-custom-jump.is-open {
z-index: 160;
}
.page-jump.has-custom-jump.is-open .page-jump-menu,
.method-jump.has-custom-jump.is-open .page-jump-menu {
display: grid;
}
.page-jump-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + .45rem);
max-height: min(58dvh, 28rem);
overflow: auto;
-webkit-overflow-scrolling: touch;
gap: .15rem;
padding: .45rem;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
background:
linear-gradient(165deg, rgba(255,255,255,.14), rgba(180,255,245,.05) 34%, transparent 68%),
color-mix(in srgb, var(--md-sys-color-surface-container-highest) 96%, #061c22);
color: var(--md-sys-color-on-surface, var(--txt));
box-shadow: var(--md-sys-elevation-level3);
}
.page-jump-menu button {
width: 100%;
min-height: 3rem;
display: flex;
align-items: center;
justify-content: flex-start;
padding: .65rem .85rem;
border: 1px solid transparent;
border-radius: var(--md-sys-shape-corner-full, 999px);
background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
color: var(--md-sys-color-on-surface, var(--txt));
font: inherit;
font-size: .95rem;
font-weight: 750;
text-align: left;
}
.page-jump-menu button:hover,
.page-jump-menu button:focus-visible {
background: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
border-color: color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
outline: none;
}
html[data-theme="light"] .page-jump,
html[data-theme="light"] .method-jump {
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 94%, transparent) !important;
box-shadow: var(--md-sys-elevation-level1) !important;
}
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump__select {
color-scheme: light !important;
background: transparent !important;
color: var(--md-sys-color-on-surface, #0a1c1a) !important;
}
html[data-theme="light"] .page-jump-menu {
background:
linear-gradient(165deg, rgba(255,255,255,.96), rgba(218,250,243,.82) 48%, transparent 78%),
#e8f8f4 !important;
color: #0a1c1a !important;
border-color: rgba(74, 99, 95, .24) !important;
box-shadow: 0 10px 26px rgba(12,40,38,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html[data-theme="light"] .page-jump-trigger,
html[data-theme="light"] .page-jump-menu button {
color: #0a1c1a !important;
}
html[data-theme="light"] .page-jump-menu button {
background: rgba(255,255,255,.58);
border-color: rgba(74,99,95,.16);
}
/* Touch: no sticky focus rings on nav chrome after tap */
.main-nav a:focus:not(:focus-visible),
.header-menu-toggle:focus:not(:focus-visible),
.header-tools button:focus:not(:focus-visible),
.header-tools .lang-toggle:focus:not(:focus-visible),
.home-subnav a:focus:not(:focus-visible),
.asset-page-nav a:focus:not(:focus-visible),
.chart-btn:focus:not(:focus-visible),
.scorecard-tabs button:focus:not(:focus-visible) {
outline: none !important;
box-shadow: none !important;
}
}
.method-quick {
padding: 1rem 1.05rem;
border-radius: var(--r-lg);
border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--glass-border));
background:
var(--glass-shine-strong),
linear-gradient(145deg, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) 0%, transparent 55%),
color-mix(in srgb, var(--md-sys-color-surface-container) 70%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
margin: 0 0 .35rem;
min-width: 0;
color: var(--txt);
}
.method-quick h2 { color: var(--txt); }
.method-quick ol { color: var(--muted); }
.method-quick h2 { margin: 0 0 .55rem; font-size: 1.05rem; }
.method-quick ol { margin: 0; padding-left: 1.15rem; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.method-quick li { margin: .25rem 0; }
.method-not {
padding: .85rem 1rem;
border-radius: var(--r);
border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 35%, var(--glass-border));
background:
var(--glass-shine),
linear-gradient(145deg, color-mix(in srgb, var(--md-sys-color-error) 10%, transparent), transparent 60%),
color-mix(in srgb, var(--md-sys-color-surface-container) 72%, transparent);
box-shadow: var(--shadow-sm), var(--glass-edge);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
margin: 0 0 .35rem;
min-width: 0;
color: var(--txt);
}
.method-not h3 { margin: 0 0 .4rem; font-size: .9rem; color: var(--bad); }
.method-not ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .84rem; }
.glossary-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem;
}
.glossary-item {
padding: .7rem .8rem;
border-radius: 14px;
border: 1px solid var(--glass-border);
background:
var(--glass-shine),
var(--glass-liquid),
color-mix(in srgb, var(--md-sys-color-surface-container) 70%, transparent);
box-shadow: var(--glass-edge);
color: var(--txt);
}
.glossary-item strong { display: block; color: var(--txt); font-size: .82rem; margin-bottom: .2rem; }
.glossary-item span { color: var(--muted); font-size: .76rem; line-height: 1.4; }
/* Empty / skeleton */
.grid-empty {
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: .45rem; min-height: 160px; padding: 1.5rem; border-radius: var(--r-lg);
border: 1px dashed var(--line); color: var(--muted); text-align: center;
}
.spark-skeleton {
min-height: 160px; border-radius: 12px;
background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* Footer polish */
footer {
margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
color: var(--muted); font-size: .82rem;
}
.footer-row { display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: center; }
.footer-meta { margin-top: .45rem; font-size: .74rem; color: var(--muted-soft); }
/* —— Optical glass system (canonical — do not flatten radii or re-stack ambients) —— */
/*
* Liquid ambient — ONE fixed full-viewport pool of light.
* Soft water caustics, no animation (keeps scroll compositor-clean).
*/
.site-aurora {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
contain: strict;
transform: translateZ(0);
background:
radial-gradient(ellipse 75% 55% at 14% 6%, rgba(40, 220, 210, 0.18), transparent 56%),
radial-gradient(ellipse 50% 40% at 86% 10%, rgba(160, 230, 255, 0.08), transparent 52%),
radial-gradient(ellipse 60% 45% at 70% 70%, rgba(100, 180, 255, 0.04), transparent 55%),
radial-gradient(ellipse 90% 55% at 48% 108%, rgba(8, 120, 125, 0.22), transparent 58%);
opacity: 1;
}
.site-aurora::before,
.site-aurora::after {
content: none !important;
display: none !important;
animation: none !important;
will-change: auto !important;
}
.site-grain { display: none !important; }
/* Sticky secondary rails — liquid glass (FAB is M3 primary-container, excluded) */
.home-subnav,
.asset-page-nav {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent) !important;
box-shadow: var(--md-sys-elevation-level1) !important;
backdrop-filter: var(--blur-chrome) !important;
-webkit-backdrop-filter: var(--blur-chrome) !important;
}
@media (min-width: 721px) {
.site-header-bar {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-high) 72%, transparent) !important;
box-shadow: var(--md-sys-elevation-level1) !important;
backdrop-filter: var(--blur-chrome) !important;
-webkit-backdrop-filter: var(--blur-chrome) !important;
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
}
body.header-scrolled .site-header-bar {
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-highest) 82%, transparent) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline) 40%, transparent) !important;
box-shadow: var(--md-sys-elevation-level2) !important;
}
html[data-theme="light"] .site-header-bar {
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 88%, transparent) !important;
border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent) !important;
}
html[data-theme="light"] body.header-scrolled .site-header-bar {
background:
var(--glass-shine-strong),
color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 96%, transparent) !important;
box-shadow: var(--md-sys-elevation-level2) !important;
}
}
/* Mobile header glass is defined in the main mobile media block (persistent on scroll). */
/*
* —— M3 design sweep (PC + mobile, dark + light) ——
* Touch, type, state layers, selection, and shape alignment to Material 3.
* https://m3.material.io
*/
button,
a.btn,
.chip,
.chart-btn,
.scorecard-tabs button,
.how-to-read-pill,
.asset-switcher a,
.asset-page-nav a,
.home-subnav a {
-webkit-tap-highlight-color: transparent;
}
.btn {
min-height: var(--md-sys-touch-target, 48px);
border-radius: var(--md-sys-shape-corner-full, 999px);
font-size: var(--md-sys-typescale-label-large-size, .875rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
letter-spacing: .01em;
}
.btn.ghost,
.btn.secondary {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
background: transparent;
color: var(--md-sys-color-primary);
}
.btn.ghost:hover,
.btn.secondary:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
/* Filter / secondary chips — M3 filter chip shape */
.home-subnav a,
.asset-page-nav a,
.chart-btn,
.scorecard-tabs button {
min-height: 2.5rem;
border-radius: var(--md-sys-shape-corner-full, 999px);
font-size: var(--md-sys-typescale-label-large-size, .875rem);
font-weight: var(--md-sys-typescale-label-large-weight, 700);
}
/* Selected secondary controls: purple rim + teal fill preserved (ARC brand), M3 container for primary nav */
body .home-subnav a.is-active,
body .home-subnav a[aria-current="page"],
body .asset-page-nav a.is-active,
body .asset-page-nav a[aria-current="page"],
body .chart-btn.active,
body .chart-btn[aria-pressed="true"],
body .scorecard-tabs button[aria-selected="true"] {
min-height: 2.5rem;
}
/* Inputs — glass fields (12px radius; not full pill — dropdowns need field shape) */
.filters input,
.filters select,
.method-jump select {
min-height: 2.75rem;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
color: var(--md-sys-color-on-surface);
font-size: var(--md-sys-typescale-body-large-size, 1rem);
}
.filters input:focus,
.filters select:focus,
.method-jump select:focus {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 1px;
border-color: var(--md-sys-color-primary);
}
/* Cards / panels — extra-large corner + surface container role */
.panel,
.chart-box,
.asset-card,
.asset-card-shell,
.fund-card,
.method-card,
.lesson-card,
.review-card,
.lab,
.compare-shell {
border-radius: var(--md-sys-shape-corner-extra-large, 28px);
}
.kpi {
border-radius: var(--md-sys-shape-corner-large, 16px);
}
/* Section titles — M3 headline-small */
.section-title,
.section-head h2,
.analytical-title {
font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
line-height: var(--md-sys-typescale-headline-small-line, 2rem);
font-weight: 800;
color: var(--md-sys-color-on-surface);
letter-spacing: -.015em;
}
/* Body copy roles */
.hero-lead,
.hero-lead-short,
.window-read-copy,
.verdict-copy,
.note,
.hint {
color: var(--md-sys-color-on-surface-variant, var(--muted));
}
/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.site-header.menu-open .header-menu,
body.menu-open .header-scrim,
.fab-back {
animation: none !important;
transition: none !important;
}
}
/* Liquid glass surfaces — clear body + wet rim + soft aqua under-glow */
.panel,
.asset-card,
.asset-card-shell,
.kpi,
.fund-card,
.method-card,
.lesson-card,
.review-card,
.filters,
.mode-toggle,
.chart-toolbar,
.faq-item,
.ratio-context,
.compare-shell,
.status-key,
.how-to-read-bar,
.chart-box,
.portfolio {
border-color: var(--glass-border) !important;
background:
var(--glass-shine),
var(--glass-liquid),
radial-gradient(ellipse 120% 80% at 20% -20%, rgba(255,255,255,.08), transparent 50%),
var(--glass-frost) !important;
box-shadow: var(--shadow), var(--glass-edge) !important;
backdrop-filter: var(--blur-soft) !important;
-webkit-backdrop-filter: var(--blur-soft) !important;
transition:
border-color .35s var(--ease),
box-shadow .4s var(--ease),
transform .4s var(--ease-liquid),
background .35s var(--ease) !important;
}
.panel::before {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.42) 35%, rgba(180,255,245,.35) 55%, transparent 100%);
opacity: 1;
}
/* Soft liquid rim under surfaces */
.panel::after,
.asset-card-shell::after,
.portfolio::after {
content: "";
position: absolute;
left: 12%;
right: 12%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(80, 230, 220, .28), transparent);
pointer-events: none;
opacity: .7;
z-index: 1;
}
.asset-card-shell { position: relative; overflow: hidden; }
.portfolio { position: relative; overflow: hidden; }
.chart-box,
.tbl-wrap,
.glossary-item,
.site-disclaimer {
background:
var(--glass-shine),
var(--glass-liquid),
var(--glass-dense) !important;
border-color: var(--glass-border) !important;
box-shadow: var(--shadow-sm), var(--glass-edge) !important;
backdrop-filter: blur(18px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}
.asset-card-shell .asset-card-chart,
.stack-pane,
.spark,
.main-chart {
background:
radial-gradient(ellipse 100% 70% at 50% -10%, rgba(40,220,210,.07), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%),
rgba(2, 16, 20, 0.36) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.stack-pane { border-color: rgba(180, 255, 245, .12); }
.panel:hover,
.asset-card:hover,
.asset-card-shell:hover,
.kpi:hover {
border-color: var(--glass-border-bright) !important;
box-shadow:
var(--shadow-lg),
var(--glass-edge),
0 0 36px rgba(40, 220, 210, .12) !important;
transform: translateY(-3px);
}
.kpi:hover {
background:
var(--glass-shine-strong),
var(--glass-liquid),
linear-gradient(145deg, rgba(40, 220, 210, .10), transparent 52%),
var(--glass-frost) !important;
}
.main-nav a,
.header-tools button,
.header-tools .lang-toggle,
.chart-btn,
.scorecard-tabs button,
.badge,
.audience-chip,
.meta-bar .chip {
transition: color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease), box-shadow .28s var(--ease), opacity .22s var(--ease);
}
/* Brand chrome selection stays liquid teal */
.main-nav a.active,
.header-tools button[aria-pressed="true"],
.header-tools .lang-toggle[aria-pressed="true"] {
color: #e8fffb;
border-color: rgba(160, 255, 245, .48);
background:
linear-gradient(180deg, rgba(255,255,255,.16), transparent 58%),
rgba(20, 200, 190, .16);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(20,200,190,.14);
}
.chart-toolbar {
padding: 4px;
border-radius: 999px;
background:
var(--glass-shine),
rgba(2, 16, 20, 0.28) !important;
}
.chart-btn {
border-radius: var(--md-sys-shape-corner-full, 999px);
min-height: var(--md-sys-touch-target, 48px);
}
/* Keep M3 filled primary; only reinforce shape */
.btn {
border-radius: var(--md-sys-shape-corner-full, 999px) !important;
}
/* M3 outlined + glass expression */
.btn.ghost {
background:
var(--glass-shine),
color-mix(in srgb, var(--md-sys-color-surface-container) 55%, transparent) !important;
color: var(--md-sys-color-primary) !important;
border: 1px solid var(--md-sys-color-outline) !important;
box-shadow: none !important;
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.btn.ghost:hover {
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent) !important;
border-color: var(--md-sys-color-primary) !important;
color: var(--md-sys-color-primary) !important;
box-shadow: none !important;
filter: none;
}
/* M3 assist / filter chips */
.badge,
.audience-chip,
.meta-bar .chip,
.status-chip {
min-height: 32px;
padding: 0 .75rem;
border-radius: var(--md-sys-shape-corner-small, 8px);
background:
var(--glass-shine),
var(--md-sys-color-surface-container-high) !important;
border: 1px solid var(--md-sys-color-outline-variant) !important;
color: var(--md-sys-color-on-surface-variant);
box-shadow: none;
backdrop-filter: blur(12px) saturate(1.35);
-webkit-backdrop-filter: blur(12px) saturate(1.35);
}
.status-chip {
min-height: var(--md-sys-touch-target, 48px);
border-radius: var(--md-sys-shape-corner-full, 999px);
cursor: pointer;
}
.status-chip[aria-pressed="true"] {
background: color-mix(in srgb, var(--md-sys-color-primary) 16%, var(--md-sys-color-surface-container-high)) !important;
border-color: var(--md-sys-color-primary) !important;
color: var(--md-sys-color-primary);
}
.badge.ok, .badge.good {
color: var(--md-sys-color-success);
border-color: color-mix(in srgb, var(--md-sys-color-success) 40%, transparent) !important;
background: color-mix(in srgb, var(--md-sys-color-success) 12%, transparent) !important;
}
.badge.warn {
color: var(--md-sys-color-warning);
border-color: color-mix(in srgb, var(--md-sys-color-warning) 40%, transparent) !important;
background: color-mix(in srgb, var(--md-sys-color-warning) 12%, transparent) !important;
}
.badge.bad {
color: var(--md-sys-color-error);
border-color: color-mix(in srgb, var(--md-sys-color-error) 40%, transparent) !important;
background: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) !important;
}
.filters input,
.filters select,
.method-jump select {
min-height: var(--md-sys-touch-target, 48px);
border-radius: var(--md-sys-shape-corner-extra-small, 4px);
border: 1px solid var(--md-sys-color-outline);
background:
linear-gradient(180deg, rgba(255,255,255,.07), transparent),
var(--md-sys-color-surface-container-lowest);
color: var(--md-sys-color-on-surface);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
font-size: 1rem; /* ≥16px avoids iOS zoom; M3 body-large */
}
.filters input:focus,
.filters select:focus,
.method-jump select:focus {
border-color: var(--md-sys-color-primary);
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.08), transparent),
var(--md-sys-color-surface-container-low);
box-shadow: none;
}
.chart-hint {
border-color: rgba(160,255,245,.24);
background:
var(--glass-shine),
linear-gradient(100deg, rgba(40,220,210,.12), rgba(100,200,220,.05));
box-shadow: var(--glass-edge);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Ratio context: liquid glass with triadic purple → brand teal edge */
.ratio-context {
background:
var(--glass-shine-strong),
var(--glass-liquid),
linear-gradient(115deg, rgba(144, 0, 201, .07) 0%, transparent 40%),
var(--glass-frost) !important;
border-color: rgba(201, 107, 255, .24) !important;
box-shadow: var(--shadow), var(--glass-edge), 0 0 40px rgba(3, 218, 197, .06) !important;
}
.ratio-context::before {
width: 3px;
background: linear-gradient(
180deg,
#d9a0ff 0%,
#c96bff 28%,
#03dac5 72%,
rgba(3, 218, 197, .7) 100%
);
box-shadow: 0 0 14px rgba(201, 107, 255, .35);
}
.ratio-context::after {
width: 42px;
left: 0;
top: 0;
bottom: 0;
height: auto;
background: linear-gradient(90deg, rgba(144, 0, 201, .10), transparent 100%);
opacity: .9;
border-radius: 0;
}
@media (max-width: 720px) {
/* Keep floating back available on phones — thumb-reachable, safe-area aware */
.fab-back {
display: inline-flex;
z-index: 180;
}
.header-menu-toggle,
.main-nav a,
.header-tools button,
.header-tools .lang-toggle,
.home-subnav a,
.mode-toggle button,
.status-chip,
.how-to-read-pill,
.asset-switcher a,
.asset-page-nav a,
.chart-btn,
.scorecard-tabs button,
.chart-hint button,
.btn,
.btn.tiny,
.ratio-context summary {
min-height: var(--touch, 2.75rem);
touch-action: manipulation;
}
.card-share-btn {
width: var(--touch, 2.75rem);
height: var(--touch, 2.75rem);
touch-action: manipulation;
}
}
/* Header tools base rules live with .site-header (above); keep override hooks here if needed. */
/*
* Touch / narrow: drop live backdrop sampling (GPU thrash + OLED flicker) but keep
* multi-stop frosted fills so surfaces still read as glass — not solid rectangles.
*/
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
/* Keep hero ambient motion on phones; only drop will-change cost if needed */
.hero-ambient .fog-logo,
.hero-ambient .fog-core { will-change: auto; }
.header-menu-toggle,
.main-nav a,
.header-tools button,
.header-tools .lang-toggle,
.home-subnav a,
.mode-toggle button,
.status-chip,
.how-to-read-pill,
.asset-switcher a,
.asset-page-nav a,
.chart-btn,
.scorecard-tabs button,
.chart-hint button,
.btn.tiny {
min-height: 2.75rem;
touch-action: manipulation;
}
.card-share-btn {
width: 2.75rem;
height: 2.75rem;
touch-action: manipulation;
}
.site-header-bar,
.home-subnav,
.asset-page-nav,
.page-jump,
.method-jump,
.home-page-jump,
.asset-page-jump,
.chart-toolbar,
.filters,
.mode-toggle,
.fab-back,
.panel,
.asset-card,
.asset-card-shell,
.kpi,
.fund-card,
.method-card,
.lesson-card,
.review-card,
.chart-box,
.tbl-wrap,
.method-toc,
.glossary-item,
.site-disclaimer,
.faq-item,
.ratio-context,
.compare-shell,
.status-key,
.how-to-read-bar,
.portfolio {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Sticky secondary rails + page jump — opaque dark fill (never clear glass) */
.home-subnav,
.asset-page-nav,
.fab-back,
.page-jump,
.method-jump,
.home-page-jump,
.asset-page-jump {
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.16) 0%, transparent 55%),
linear-gradient(180deg, rgba(8, 36, 42, 0.98), rgba(4, 20, 24, 0.99)) !important;
}
/* Header pill — opaque on scroll for all themes (light overrides below) */
.site-header-bar,
body.header-scrolled .site-header-bar {
border-radius: 999px !important;
border: 1px solid rgba(120, 200, 190, 0.22) !important;
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.18) 0%, transparent 52%),
linear-gradient(180deg, rgba(10, 40, 46, 0.98), rgba(4, 20, 24, 0.99)) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,.12) !important;
opacity: 1 !important;
visibility: visible !important;
}
.panel,
.asset-card,
.asset-card-shell,
.kpi,
.fund-card,
.method-card,
.lesson-card,
.review-card,
.filters,
.mode-toggle,
.chart-toolbar,
.faq-item,
.ratio-context,
.compare-shell,
.status-key,
.how-to-read-bar,
.chart-box,
.portfolio {
background:
linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(200,255,248,.05) 20%, transparent 52%),
linear-gradient(195deg, transparent 35%, rgba(40,200,190,.07) 100%),
rgba(6, 30, 36, 0.84) !important;
}
.panel:hover,
.asset-card:hover,
.asset-card-shell:hover,
.kpi:hover { transform: none; }
}
/*
* Touch fallback above intentionally removes live backdrop sampling. Its dark
* opaque fallback must never leak into the light palette. Keep these rules
* after that block so expanded navigation and secondary rails use mint glass.
*/
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
html[data-theme="light"] .site-header-bar,
html[data-theme="light"] body.header-scrolled .site-header-bar,
html[data-theme="light"] .site-header.menu-open .header-menu,
html[data-theme="light"] .header-menu,
html[data-theme="light"] .home-subnav,
html[data-theme="light"] main > .home-subnav,
html[data-theme="light"] .asset-page-nav,
html[data-theme="light"] .filters,
html[data-theme="light"] .mode-toggle,
html[data-theme="light"] .status-key,
html[data-theme="light"] .how-to-read-bar,
html[data-theme="light"] .page-jump,
html[data-theme="light"] .method-jump,
html[data-theme="light"] .home-page-jump,
html[data-theme="light"] .asset-page-jump {
/* `only light` prevents Android Chrome's Auto Dark Theme from repainting
native dropdown/sheet surfaces after our light theme has loaded. */
color-scheme: only light !important;
color: #0a1c1a !important;
border-color: rgba(74, 99, 95, .28) !important;
background-color: #e8f8f4 !important;
background: rgba(232, 248, 244, .96) !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.98) 0%, rgba(232, 248, 244, .96) 100%) !important;
forced-color-adjust: none;
box-shadow:
0 6px 22px rgba(12, 40, 38, .14),
inset 0 1px 0 rgba(255,255,255,.98) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump__select,
html[data-theme="light"] .filters input,
html[data-theme="light"] .filters select {
color-scheme: only light !important;
color: #0a1c1a !important;
border-color: rgba(74, 99, 95, .30) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(241, 252, 249, .88)),
#f7fffc !important;
background-color: #f7fffc !important;
forced-color-adjust: none;
caret-color: #006a60;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.98),
0 1px 2px rgba(12, 40, 38, .06) !important;
}
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump__select {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
html[data-theme="light"] .filters input::placeholder {
color: #607571 !important;
opacity: 1;
}
html[data-theme="light"] .filters input:focus,
html[data-theme="light"] .filters select:focus {
border-color: #006a60 !important;
outline: 2px solid rgba(0, 106, 96, .42) !important;
outline-offset: 2px;
background:
linear-gradient(180deg, #ffffff, rgba(235, 252, 248, .96)),
#ffffff !important;
}
html[data-theme="light"] .filters label,
html[data-theme="light"] .filters-status__label {
color: #2a423e !important;
opacity: 1 !important;
font-weight: 800;
}
html[data-theme="light"] .status-chip {
color-scheme: only light !important;
color: #24413c !important;
border-color: rgba(74, 99, 95, .26) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(238, 250, 247, .82)),
#f4fffb !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html[data-theme="light"] .status-chip:hover {
color: #006a60 !important;
border-color: rgba(0, 106, 96, .42) !important;
background:
linear-gradient(180deg, #ffffff, rgba(223, 250, 245, .92)),
#effffb !important;
}
html[data-theme="light"] .status-chip[aria-pressed="true"] {
color: #003d38 !important;
border-color: rgba(144, 0, 201, .38) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(225, 249, 244, .90)),
linear-gradient(90deg, rgba(144, 0, 201, .10), rgba(0, 160, 150, .16)),
#eafffa !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.98),
0 0 0 1px rgba(255,255,255,.65),
0 2px 8px rgba(12, 40, 38, .08) !important;
}
html[data-theme="light"] .page-jump select option,
html[data-theme="light"] .method-jump select option,
html[data-theme="light"] .page-jump__select option,
html[data-theme="light"] .filters select option {
color: #0a1c1a !important;
background-color: #e8f8f4 !important;
}
html:not([data-theme="light"]) .site-header.menu-open .main-nav a,
html:not([data-theme="light"]) .site-header.menu-open .main-nav a.cta,
html:not([data-theme="light"]) .site-header.menu-open .main-nav a.active {
color: #e8fffb !important;
border-color: rgba(160, 255, 245, .30) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.12), transparent 58%),
rgba(10, 56, 64, .64) !important;
}
html:not([data-theme="light"]) .site-header.menu-open .main-nav a:hover,
html:not([data-theme="light"]) .site-header.menu-open .main-nav a:focus-visible {
color: #ffffff !important;
border-color: rgba(201, 107, 255, .46) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.15), transparent 58%),
linear-gradient(90deg, rgba(201, 107, 255, .18), rgba(3, 218, 197, .14)),
rgba(13, 68, 78, .76) !important;
}
}
/* Final M3 interaction polish — shared PC/mobile control grammar. */
.btn,
.chart-btn,
.status-chip,
.how-to-read-pill,
.mode-toggle button,
.scorecard-tabs button,
.main-nav a,
.home-subnav a,
.asset-page-nav a,
.page-jump-trigger,
.page-jump-menu button,
.filters input,
.filters select,
.page-jump select,
.method-jump select,
.page-jump__select {
transition:
color .18s var(--ease),
background-color .18s var(--ease),
border-color .18s var(--ease),
box-shadow .22s var(--ease),
transform .16s var(--ease),
opacity .18s var(--ease) !important;
}
.btn:hover,
.chart-btn:hover,
.status-chip:hover,
.how-to-read-pill:hover,
.mode-toggle button:hover,
.scorecard-tabs button:hover,
.main-nav a:hover,
.home-subnav a:hover,
.asset-page-nav a:hover,
.page-jump-trigger:hover,
.page-jump-menu button:hover {
transform: translateY(-1px);
}
.btn:active,
.chart-btn:active,
.status-chip:active,
.how-to-read-pill:active,
.mode-toggle button:active,
.scorecard-tabs button:active,
.main-nav a:active,
.home-subnav a:active,
.asset-page-nav a:active,
.page-jump-trigger:active,
.page-jump-menu button:active {
transform: translateY(0) scale(.985);
}
.filters input,
.filters select,
.page-jump select,
.method-jump select,
.page-jump__select {
appearance: none;
-webkit-appearance: none;
}
html[data-theme="light"] .filters input,
html[data-theme="light"] .filters select,
html[data-theme="light"] .page-jump select,
html[data-theme="light"] .method-jump select,
html[data-theme="light"] .page-jump__select {
color-scheme: only light;
color: #0a1c1a;
}
html:not([data-theme="light"]) .filters input,
html:not([data-theme="light"]) .filters select,
html:not([data-theme="light"]) .page-jump select,
html:not([data-theme="light"]) .method-jump select,
html:not([data-theme="light"]) .page-jump__select {
color-scheme: dark;
}
html[data-theme="light"] .filters select option,
html[data-theme="light"] .page-jump select option,
html[data-theme="light"] .method-jump select option,
html[data-theme="light"] .page-jump__select option {
color: #0a1c1a;
background: #effffb;
}
@media (max-width: 720px) {
.site-header.menu-open .header-menu {
gap: .35rem !important;
padding: .6rem !important;
}
.site-header.menu-open .main-nav {
gap: .25rem !important;
}
.site-header.menu-open .main-nav a,
.site-header.menu-open .header-tools button,
.site-header.menu-open .header-tools .theme-toggle,
.site-header.menu-open .header-tools .audience-chip,
.site-header.menu-open .header-tools .lang-toggle {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 58%, transparent) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.08), transparent 56%),
color-mix(in srgb, var(--md-sys-color-surface-container-highest) 74%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.site-header.menu-open .main-nav a.active,
.site-header.menu-open .header-tools button[aria-pressed="true"],
.header-tools .lang-toggle[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.12), transparent 58%),
color-mix(in srgb, var(--md-sys-color-secondary-container) 82%, transparent) !important;
}
html:not([data-theme="light"]) .site-header.menu-open .main-nav a.cta {
color: #f2fffc !important;
border-color: rgba(143, 248, 234, .38) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.16), transparent 58%),
color-mix(in srgb, var(--md-sys-color-primary) 32%, #062126) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(3, 218, 197, .14) !important;
}
html[data-theme="light"] .site-header.menu-open .main-nav a,
html[data-theme="light"] .site-header.menu-open .header-tools button,
html[data-theme="light"] .site-header.menu-open .header-tools .theme-toggle,
html[data-theme="light"] .site-header.menu-open .header-tools .audience-chip,
html[data-theme="light"] .site-header.menu-open .header-tools .lang-toggle {
border-color: rgba(74,99,95,.18) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.18) 58%),
rgba(244, 254, 251, .54) !important;
color: #12302c !important;
}
}
/*
* Final mobile light-theme home filter override.
* Placed after every touch/header fallback so Pixel/Android native controls do
* not inherit the dark surface used by the dark glass mobile fallback.
*/
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
html[data-theme="light"] #scan .filters,
html[data-theme="light"] .filters {
color-scheme: only light !important;
color: #0a1c1a !important;
border-color: rgba(0, 106, 96, .22) !important;
background:
linear-gradient(165deg, rgba(255,255,255,.96) 0%, rgba(226, 250, 245, .88) 52%, rgba(244, 255, 252, .92) 100%),
#edfdf9 !important;
background-color: #edfdf9 !important;
box-shadow:
0 3px 12px rgba(12, 40, 38, .10),
inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-theme="light"] #asset-search,
html[data-theme="light"] #class-filter,
html[data-theme="light"] #sort-mode,
html[data-theme="light"] .filters input[data-control],
html[data-theme="light"] .filters select[data-control] {
color-scheme: only light !important;
color: #0a1c1a !important;
-webkit-text-fill-color: #0a1c1a !important;
border-color: rgba(0, 106, 96, .30) !important;
background:
linear-gradient(180deg, #ffffff 0%, #f2fffb 100%),
#ffffff !important;
background-color: #ffffff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 3px rgba(12, 40, 38, .08) !important;
}
html[data-theme="light"] #asset-search::placeholder {
color: #607571 !important;
-webkit-text-fill-color: #607571 !important;
opacity: 1 !important;
}
html[data-theme="light"] #class-filter option,
html[data-theme="light"] #sort-mode option,
html[data-theme="light"] .filters select[data-control] option {
color: #0a1c1a !important;
-webkit-text-fill-color: #0a1c1a !important;
background-color: #ffffff !important;
}
html[data-theme="light"] .filters label,
html[data-theme="light"] .filters-status__label {
display: inline-flex !important;
color: #203d38 !important;
-webkit-text-fill-color: #203d38 !important;
opacity: 1 !important;
}
#scan,
#mode-scan,
.filters {
position: relative !important;
z-index: 250 !important;
overflow: visible !important;
}
.filters:has(.m3-select.is-open) {
z-index: 1200 !important;
}
.filters .m3-select.is-open {
z-index: 1300 !important;
}
.filters .m3-select.is-open .m3-select__menu {
z-index: 1400 !important;
}
.asset-grid,
.asset-card-shell {
position: relative;
}
.asset-grid {
z-index: 1;
}
.asset-card-shell {
z-index: 0;
}
.asset-card-shell:focus-within,
.asset-card-shell:hover {
z-index: 10;
}
.asset-card-top {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start !important;
column-gap: .55rem !important;
row-gap: .35rem !important;
flex-wrap: nowrap !important;
}
.asset-card-top > div:first-child {
min-width: 0 !important;
grid-column: 1;
grid-row: 1;
}
.asset-card-top > .btn.ghost,
.asset-card-top > a.inspect-link {
grid-column: 2;
grid-row: 1;
align-self: start;
justify-self: end;
flex: 0 0 auto !important;
min-height: 2.35rem !important;
padding-inline: .78rem !important;
white-space: nowrap !important;
margin-top: 0 !important;
position: relative !important;
z-index: 4 !important;
}
.asset-card-top .meta,
.asset-card-top .meta-tight {
max-width: 100%;
min-width: 0;
}
}
/*
* Mobile sticky chrome — final cascade win for header + secondary nav.
* Problems fixed: transparent glass after scroll (backdrop-filter fail),
* low z-index under page content, sticky pin pushed off-screen by bad --header-h.
*/
@media (max-width: 720px) {
.site-header {
position: -webkit-sticky !important;
position: sticky !important;
top: var(--header-sticky-top) !important;
z-index: 400 !important;
isolation: isolate;
}
.site-header-bar,
body.header-scrolled .site-header-bar {
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.16) 0%, transparent 50%),
linear-gradient(180deg, #0c2830 0%, #07161a 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] .site-header-bar,
html[data-theme="light"] body.header-scrolled .site-header-bar {
background-color: #e8f8f4 !important;
background-image: linear-gradient(180deg, #f7fffc 0%, #e4f6f1 100%) !important;
border-color: rgba(74, 99, 95, .28) !important;
color: #0a1c1a !important;
}
.page-jump,
.method-jump,
.home-page-jump,
.asset-page-jump {
position: -webkit-sticky !important;
position: sticky !important;
top: var(--subnav-sticky-top) !important;
z-index: 390 !important;
isolation: isolate;
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.12) 0%, transparent 50%),
linear-gradient(180deg, #0c2830 0%, #07161a 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] .page-jump,
html[data-theme="light"] .method-jump,
html[data-theme="light"] .home-page-jump,
html[data-theme="light"] .asset-page-jump {
background-color: #e8f8f4 !important;
background-image: linear-gradient(180deg, #f7fffc 0%, #e4f6f1 100%) !important;
border-color: rgba(74, 99, 95, .28) !important;
color: #0a1c1a !important;
}
/* Chip rail stays hidden on phone; if re-enabled, keep same opaque sticky paint */
.home-subnav,
main > .home-subnav,
.asset-page-nav {
z-index: 390 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.spark-skeleton,
.hero-ambient .fog-logo,
.hero-ambient .fog-core { animation: none !important; }
.asset-card, .asset-card-shell, .kpi, .btn, .hard-tape-chip, .lesson-card {
transition: none !important;
}
}
/*
* Mobile Home Assets polish: keep Scan/Compare reachable and make Compare read
* as cards instead of a desktop table squeezed into a phone viewport.
*/
@media (max-width: 720px) {
#scan .section-head {
align-items: stretch !important;
gap: .75rem !important;
margin-bottom: .65rem !important;
}
#scan .section-head > div:first-child p {
margin-bottom: 0 !important;
}
#scan .assets-mode-rail {
position: -webkit-sticky !important;
position: sticky !important;
top: calc(var(--subnav-sticky-top) + 3.05rem) !important;
z-index: 365 !important;
width: 100% !important;
margin: .15rem 0 .6rem !important;
padding: .18rem 0 .22rem !important;
justify-content: stretch !important;
border-radius: 28px !important;
background-color: #0a1e22 !important;
background-image:
linear-gradient(165deg, rgba(255,255,255,.13) 0%, transparent 48%),
linear-gradient(180deg, #0d2b31 0%, #07171a 100%) !important;
box-shadow:
0 14px 30px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html[data-theme="light"] #scan .assets-mode-rail {
background-color: #e8f8f4 !important;
background-image: linear-gradient(180deg, #f8fffc 0%, #e4f6f1 100%) !important;
border-color: rgba(74, 99, 95, .28) !important;
box-shadow:
0 14px 30px rgba(34,78,74,.16),
inset 0 1px 0 rgba(255,255,255,.86) !important;
}
#scan .assets-mode-rail .mode-toggle {
position: static !important;
width: 100% !important;
margin: 0 !important;
}
#scan .mode-toggle button {
flex: 1 1 0 !important;
justify-content: center !important;
min-height: 2.65rem !important;
}
#mode-compare.panel {
padding: .8rem !important;
margin-top: .8rem !important;
}
#mode-compare .compare-lead {
margin: 0 0 .7rem !important;
font-size: .84rem !important;
}
#mode-compare .compare-actions {
gap: .55rem !important;
margin-bottom: .7rem !important;
}
#mode-compare .compare-actions .note {
flex: 1 1 100% !important;
font-size: .76rem !important;
}
#mode-compare .toolbar-actions {
width: 100% !important;
margin-left: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
}
#mode-compare .toolbar-actions .btn {
justify-content: center !important;
width: 100% !important;
}
#mode-compare .compare-shell {
overflow: visible !important;
border-radius: 22px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
#mode-compare table.compare,
#mode-compare table.compare tbody,
#mode-compare table.compare tr,
#mode-compare table.compare td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
#mode-compare table.compare {
border-spacing: 0 !important;
}
#mode-compare table.compare thead {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
}
#mode-compare table.compare tbody {
display: grid !important;
gap: .82rem !important;
padding-top: .55rem !important;
}
#mode-compare table.compare tr {
position: relative !important;
padding: .82rem .88rem .78rem !important;
border: 1px solid rgba(158,255,241,.16) !important;
border-radius: 22px !important;
background:
linear-gradient(165deg, rgba(255,255,255,.08) 0%, transparent 50%),
rgba(6, 31, 35, .82) !important;
box-shadow:
0 16px 40px rgba(0,0,0,.23),
inset 0 1px 0 rgba(255,255,255,.10) !important;
overflow: hidden !important;
}
html[data-theme="light"] #mode-compare table.compare tr {
border-color: rgba(47, 91, 86, .20) !important;
background:
linear-gradient(165deg, rgba(124,58,237,.08) 0%, transparent 48%),
#f7fffc !important;
box-shadow:
0 14px 30px rgba(34,78,74,.12),
inset 0 1px 0 rgba(255,255,255,.92) !important;
}
#mode-compare table.compare tr.hidden {
display: none !important;
}
#mode-compare table.compare td,
#mode-compare table.compare th:first-child,
#mode-compare table.compare td:first-child,
#mode-compare table.compare th:last-child,
#mode-compare table.compare td:last-child {
position: static !important;
left: auto !important;
z-index: auto !important;
text-align: right !important;
padding: .45rem 0 !important;
border-bottom: 1px solid rgba(158,255,241,.09) !important;
background: transparent !important;
color: inherit;
}
#mode-compare table.compare td:first-child {
text-align: left !important;
padding: .08rem 0 .68rem !important;
margin-bottom: .18rem !important;
border-bottom-color: rgba(158,255,241,.09) !important;
}
#mode-compare table.compare td:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
#mode-compare table.compare td:not(:first-child) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: baseline !important;
gap: .75rem !important;
font-size: .94rem !important;
}
#mode-compare table.compare td:not(:first-child)::before {
content: attr(data-label);
color: var(--muted-soft);
font-size: .68rem;
line-height: 1.15;
font-weight: 780;
letter-spacing: .10em;
text-transform: uppercase;
text-align: left;
}
#mode-compare table.compare td strong {
font-size: 1.1rem !important;
}
#mode-compare table.compare tr.outlier-low,
#mode-compare table.compare tr.outlier-high {
outline: 1px solid rgba(191,90,242,.30) !important;
outline-offset: -1px !important;
}
}
@media (prefers-reduced-transparency: reduce) {
.site-header-bar, .home-subnav, .asset-page-nav, .panel, .asset-card-shell,
.asset-card, .filters, .kpi, .ratio-context, .compare-shell, .faq-item,
.lesson-card, .status-key, .how-to-read-bar, .portfolio, .chart-box {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--panel-2) !important;
}
.site-aurora { opacity: .35; }
}
@media (prefers-contrast: more) {
:root { --muted: #c5e6e0; --line: rgba(158,255,241,.35); --txt: #fff; }
.badge, .kpi, .asset-card-shell { border-width: 2px; }
}
/* Print additions */
@media print {
.site-aurora, .site-grain, .collab-strip, .header-tools, .internal-cta,
.chart-hint, .home-subnav, .method-toc, .method-jump, .scorecard-tabs { display: none !important; }
body.presenter-mode .origin, body.presenter-mode .faq { display: block !important; }
}
/* —— Print styles —— */
@media print {
.site-header, .fab-back, .site-fog, .hero-ambient, .share-toast,
.how-to-read-bar, .mode-toggle, .filters, .chart-toolbar,
.asset-switcher, .asset-page-nav, .prev-next, .card-share-btn { display: none !important; }
body { background: #fff; color: #111; font-size: 11pt; }
.panel, .kpi, .fund-card, .method-card, .lesson-card, .review-card, .hero-band {
border-color: #ccc; background: #fff; box-shadow: none; backdrop-filter: none;
}
.hero h1, .verdict h1, .page-title { color: #111; background: none; -webkit-background-clip: unset; background-clip: unset; }
a { color: #0056b3; }
.chart-box, .lab, .asset-card { break-inside: avoid; }
}