/* SkinvestClub global base — theme tokens + resets + a11y utilities. * * Per-component styles live in site.css (skinvest "bx-" namespace). * This file deliberately holds only what's shared across all pages. */ :root { /* Warm-paper + muted-rose palette (borrowed from the divine-beauty-guide * "skinvest" sibling site, 2026-05 merge). Token NAMES are unchanged so the * site.css --bx-* bridge and all var() call-sites follow automatically. * Core tokens carry a hex fallback first for pre-oklch webviews * (iOS Safari <15.4 etc.). */ --bg: #FAF8F4; --bg: oklch(0.985 0.005 70); /* warm paper */ --surface: #FCFAF6; --surface: oklch(0.97 0.008 60); /* cards float above bg */ --surface2: oklch(0.945 0.012 55); --surface3: oklch(0.92 0.014 55); --border: #E6E1D8; --border: oklch(0.9 0.01 60); --border-hover: oklch(0.83 0.012 60); --text: #2B2824; --text: oklch(0.18 0.015 50); --text-secondary: oklch(0.32 0.013 50); --text-muted: oklch(0.45 0.012 50); --accent: #AC4A53; --accent: oklch(0.54 0.13 18); /* muted rose; L=0.54 vs prev 0.55 → all accent-on-bg/card/inset pairs ≥4.5:1 (was 4.41 on surface2). */ /* Same as --accent in light mode (white-on-accent already 5.19:1, AA-OK). * Override darker in dark mode so .bx-btn--primary 等 white-text-on-rose * CTAs still hit WCAG AA 4.5:1. See web/scripts/audit_contrast.py. */ --accent-strong: var(--accent); --accent-soft: oklch(0.92 0.025 30); --accent-rim: oklch(0.86 0.04 25); --accent-text: oklch(0.42 0.12 18); --accent-dim: oklch(0.92 0.025 30); /* Secondary — ledger green, for ROI-positive signal */ --accent-2: oklch(0.5 0.1 155); --accent-2-soft: oklch(0.93 0.03 155); --accent-2-rim: oklch(0.86 0.05 155); --green: oklch(0.5 0.1 155); --red: oklch(0.52 0.17 28); --yellow: oklch(0.56 0.1 85); /* ≥4.5:1 on warm-paper bg (WCAG AA) */ /* Translucent bar bg for backdrop-blur top/bottom nav + glass strips * (var(--bg) is opaque, so these need their own alpha token). */ --bar-bg: oklch(0.985 0.005 70 / 0.86); --radius: 4px; --radius-sm: 3px; --radius-xs: 2px; --font: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Source Han Serif TC', 'Noto Serif TC', 'Songti TC', 'STSong', 'Songti TC Fallback', Georgia, serif; --font-display: var(--font); /* was var(--font-serif) — display now sans (Inter) */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --shadow-sm: 0 1px 2px rgba(17,17,17,0.06); --shadow-md: 0 2px 8px rgba(17,17,17,0.08); --shadow-lg: 0 8px 24px rgba(17,17,17,0.10); /* Apple-direction soft card shadows (hoisted from site.css so dark mode can * override them — near-black shadows are invisible on a dark canvas). */ --ax-shadow: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px -6px rgba(17,17,17,.08); --ax-shadow-hover: 0 2px 6px rgba(17,17,17,.06), 0 22px 46px -10px rgba(17,17,17,.15); } /* ── Dark mode ─────────────────────────────────────────────────────────── * Set by the no-FOUC inline script in base.html (data-theme on ). * Only overrides tokens that change; the site.css --bx-* bridge follows. */ :root[data-theme="dark"] { --bg: #1B1916; --bg: oklch(0.15 0.01 50); --surface: #232019; --surface: oklch(0.2 0.012 50); --surface2: oklch(0.23 0.012 50); --surface3: oklch(0.27 0.012 50); --border: oklch(1 0 0 / 12%); --border-hover: oklch(1 0 0 / 22%); --text: #F3EFE8; --text: oklch(0.96 0.005 70); --text-secondary: oklch(0.84 0.008 60); --text-muted: oklch(0.72 0.012 60); --accent: #D98591; --accent: oklch(0.7 0.13 18); /* brighter rose for dark */ /* Darker rose specifically for white-text-on-bg CTAs (.bx-btn--primary). * Bright accent oklch(0.7) gives only 2.84:1 with white (FAIL); this * oklch(0.58) gives 4.57:1 (AA pass) while still 4.30:1 against dark bg * (AA pass for the button outline against canvas). */ --accent-strong: oklch(0.58 0.13 18); --accent-soft: oklch(0.3 0.05 20); /* dark rose tint, not pale */ --accent-rim: oklch(0.4 0.07 20); --accent-text: oklch(0.82 0.1 20); /* light rose text on dark soft */ --accent-dim: oklch(0.3 0.05 20); --accent-2: oklch(0.68 0.11 155); --accent-2-soft: oklch(0.28 0.05 155); --accent-2-rim: oklch(0.4 0.07 155); --green: oklch(0.68 0.11 155); --red: oklch(0.68 0.16 28); --yellow: oklch(0.78 0.11 85); --bar-bg: oklch(0.15 0.01 50 / 0.86); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 8px rgba(0,0,0,0.5); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6); --ax-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -6px rgba(0,0,0,.6); --ax-shadow-hover: 0 2px 6px rgba(0,0,0,.55), 0 22px 46px -10px rgba(0,0,0,.72); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "palt" 1, "ss01" 1; font-optical-sizing: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Universal focus ring (per-component rings refine in site.css) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Screen-reader-only utility — skinvest pages use .bx-sr-only * (defined in site.css). This bare .sr-only is kept for parity in case * any inline a11y skip-link forgets the bx- prefix. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .sr-only:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; clip: auto; overflow: visible; z-index: 9999; padding: 8px 16px; background: var(--accent); color: #fff; border-radius: 0 0 8px 0; } /* Tabular numeric utility (used by roi_index.html for table columns) */ .mono { font-family: var(--font-mono); } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }