/* ============================================================ Caploo — Design tokens & base styles Foundation aligned with frontend-handoff prototype. :root holds STRUCTURAL tokens (radius, spacing, motion, type, layout) shared by every theme. Color tokens split into :root + :root[data-theme="dark"] — dark palette (default) :root[data-theme="light"] — light palette (APCA Lc verified) The inline boot script in wwwroot/js/caploo.theme.js sets BEFORE this stylesheet parses, so the right palette wins on first paint. :root itself carries a sane dark fallback so an unattributed (e.g. the spinner before JS executes) does not flash a different theme. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Structural tokens (theme-independent) ─────────────────────── */ :root { color-scheme: dark; /* per-theme override on the [data-theme] blocks below */ /* Radius scale */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --radius: 12px; /* legacy alias = --radius-md */ /* Spacing scale — 8px-based */ --space-0: 0; --space-0-25: .125rem; /* 2px — chips/badges/density dots */ --space-0-5: .25rem; /* 4px */ --space-1: .5rem; /* 8px */ --space-1-5: .75rem; /* 12px */ --space-2: 1rem; /* 16px */ --space-2-5: 1.25rem; /* 20px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-7: 3.5rem; /* 56px — between space-6 and space-8 */ --space-8: 4rem; /* 64px */ /* Section + component layout rhythm */ --section-py: clamp(3rem, 6vw, 5.5rem); /* vertical padding for landing sections */ --card-padding: clamp(1rem, 2vw, 1.5rem); /* inner padding for cards */ /* Typography — discrete scale */ --text-micro: .72rem; --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.6rem; /* Typography — fluid scale (clamp) */ --text-fluid-h1: clamp(2rem, 7.5vw, 3.4rem); --text-fluid-h2: clamp(1.35rem, 5.5vw, 2rem); --text-fluid-h3: clamp(1.15rem, 4.5vw, 1.5rem); --text-fluid-auth: clamp(1.6rem, 6vw, 2.2rem); --text-fluid-body: clamp(0.9375rem, 1.4vw, 1rem); /* Phase 2C: named semantic scale — maps to existing fluid sizes for now */ --fs-display: var(--text-fluid-h1); /* H1 hero title */ --fs-heading-2: clamp(1.125rem, 1vw + 0.9rem, 1.375rem); /* section h2: 18→22px */ --fs-heading-3: clamp(1rem, 0.5vw + 0.85rem, 1.125rem); /* card h3: 16→18px */ --fs-body: var(--text-fluid-body); /* body copy */ --fs-small: 0.875rem; /* utility text */ --lh-display: 1.1; --lh-heading: 1.3; --lh-body: 1.55; --ls-display: -0.03em; /* Layout */ --navbar-h: 56px; --content-max: 680px; --form-max: 440px; --nav-cluster-gap: 14px; --content-rail: min(100%, 72rem); --gutter-x: clamp(0.875rem, 2.5vw, 1.75rem); /* Breakpoints (Phase 16b token system) */ --bp-sm: 20rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 90rem; --bp-xxl: 100rem; /* Motion */ --transition: .15s ease; /* legacy alias */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --duration-page: 400ms; --easing-default: ease; --easing-emphasis: cubic-bezier(.2, .8, .2, 1); /* Touch targets */ --touch-target-min: 44px; --touch-target-comfortable: 48px; /* Safe-area insets (notch / gesture bar) */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* Mobile chrome heights */ --m-topbar-h: 56px; --m-bottomnav-h: 64px; --m-bottomnav-total: calc(64px + env(safe-area-inset-bottom, 0px)); --bottom-sheet-radius: var(--radius-lg); /* ── Color tokens — dark fallback (unattributed ) ───── */ /* Mirror the [data-theme="dark"] block below so a page rendered before the boot script flips the attribute still works. */ --bg: #0b0b10; --surface: #16161e; --surface-alt: #1f1f2a; --surface-hi: #262633; --border: #2a2a36; --border-soft: #20202b; --accent: #7c6ef5; --accent-dim: #5a50c4; --accent-glow: rgba(124, 110, 245, 0.18); --text: #e8e8f0; --text-on-accent: #fff; --muted: #b8b8d0; --muted-2: #8888a3; --danger: #e05c5c; --success: #4caf7d; --info: #5fa8e0; --info-glow: rgba(95, 168, 224, .18); --warning: #e09a3a; --warning-glow: rgba(224, 154, 58, .18); --accent-text: #b3a4ff; --danger-text: #f7a3a3; --success-text: #82d8a8; --info-text: #9ed1f3; --warning-text: #f3c184; --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow: 0 4px 24px rgba(0,0,0,.45); --shadow-lg: 0 12px 60px rgba(0,0,0,.65); --shadow-drawer: -8px 0 32px rgba(0,0,0,.45); --scrim: rgba(0,0,0,.65); --focus-ring: 0 0 0 3px var(--accent-glow); --focus-outline: 2px solid var(--accent); --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-width-primary: 3px; --brand-gradient: linear-gradient(135deg, #7c6ef5 0%, #b48ef5 60%, #e0c3fc 100%); /* Ambient hero orbs */ --orb-1: rgba(124, 110, 245, 0.22); --orb-2: rgba(180, 142, 245, 0.18); } /* ── Dark palette ─────────────────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b10; --surface: #16161e; --surface-alt: #1f1f2a; --surface-hi: #262633; --border: #2a2a36; --border-soft: #20202b; --border-strong: #3d3d52; /* APCA Lc ≈17 vs --surface; use for card edges + section dividers */ --accent: #7c6ef5; --accent-dim: #5a50c4; --accent-glow: rgba(124, 110, 245, 0.18); --text: #e8e8f0; --text-on-accent: #fff; --muted: #b8b8d0; --muted-2: #8888a3; --danger: #e05c5c; --success: #4caf7d; --info: #5fa8e0; --info-glow: rgba(95, 168, 224, .18); --warning: #e09a3a; --warning-glow: rgba(224, 154, 58, .18); --accent-text: #b3a4ff; --danger-text: #f7a3a3; --success-text: #82d8a8; --info-text: #9ed1f3; --warning-text: #f3c184; --shadow-sm: 0 2px 8px rgba(0,0,0,.3); --shadow: 0 4px 24px rgba(0,0,0,.45); --shadow-lg: 0 12px 60px rgba(0,0,0,.65); --shadow-drawer: -8px 0 32px rgba(0,0,0,.45); --scrim: rgba(0,0,0,.65); --focus-ring: 0 0 0 3px var(--accent-glow); --focus-outline: 2px solid var(--accent); --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-width-primary: 3px; --brand-gradient: linear-gradient(135deg, #7c6ef5 0%, #b48ef5 60%, #e0c3fc 100%); --orb-1: rgba(124, 110, 245, 0.22); --orb-2: rgba(180, 142, 245, 0.18); } /* ── Light palette ────────────────────────────────────────────── */ /* APCA verification (light fg/bg): --text (#14141c) on --bg (#fafafd) → Lc -100 abs (excellent) --muted (#54546a) on --bg (#fafafd) → Lc -65 abs (small text safe) --accent-text (#4438a9) on --bg → Lc -72 abs (body safe) */ :root[data-theme="light"] { color-scheme: light; --bg: #fafafd; --surface: #ffffff; --surface-alt: #f4f5f8; --surface-hi: #ebecf1; --border: #e2e3eb; --border-soft: #ededf3; --border-strong: #e2e3eb; /* matches --border in light mode; reserved for structural boundaries */ --accent: #5246c2; --accent-dim: #3d349c; --accent-glow: rgba(82, 70, 194, 0.16); --text: #14141c; --text-on-accent: #ffffff; --muted: #54546a; --muted-2: #636380; /* darkened from #80809a: 3.52:1→5.4:1 vs --surface-alt #f4f5f8 (WCAG AA) */ --danger: #c43838; --success: #2a7c52; --info: #1e6cb0; --info-glow: rgba(30, 108, 176, .12); --warning: #b87420; --warning-glow: rgba(184, 116, 32, .14); --accent-text: #4438a9; --danger-text: #a31e1e; --success-text: #1c6d44; --info-text: #155583; --warning-text: #7a4710; --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 2px 8px rgba(20,20,30,.06); --shadow: 0 4px 16px rgba(20,20,30,.10); --shadow-lg: 0 16px 48px rgba(20,20,30,.16); --shadow-drawer: -8px 0 24px rgba(20,20,30,.14); --scrim: rgba(15,15,25,.55); --focus-ring: 0 0 0 3px var(--accent-glow); --focus-outline: 2px solid var(--accent); --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-width-primary: 3px; /* Brand gradient retuned for light theme so all stops clear APCA Lc 45+ on white. Smallest use site is .navbar-brand at 1.1rem/800. */ --brand-gradient: linear-gradient(135deg, #3d349c 0%, #5246c2 60%, #7c6ef5 100%); --orb-1: rgba(124, 110, 245, 0.18); --orb-2: rgba(196, 168, 245, 0.20); } /* ── Dark mode: --border-strong on structural separators ──────────────────── In dark mode, --border (#2a2a36, Lc ~10) is barely visible against --surface (#16161e). --border-strong (#3d3d52, Lc ~17) lifts card edges and section boundaries to just-perceptible, satisfying WCAG 1.4.11 Non-text Contrast (≥3:1) for UI component boundaries. Light mode: --border-strong == --border (no visual change). */ :root[data-theme="dark"] .card { border-color: var(--border-strong); } :root[data-theme="dark"] .settings-drawer { border-inline-start-color: var(--border-strong); } :root[data-theme="dark"] .my-drops-section-divider { border-top-color: var(--border-strong); } /* F-154 retained: nav-cluster divider blend for legibility in light theme. */ :root[data-theme="light"] .navbar-actions .nav-cluster + .nav-cluster::before { background: color-mix(in srgb, var(--border) 60%, var(--text) 40%); } /* F-011 retained: brand gradient retune for light theme. Hard-coded gradient stops in .navbar-brand / .hero h1 / .caploo-wordmark / .progress-fill end at near-white on dark theme; on light bg they vanish. Override with accent-dim → accent → medium-purple stops — all clear APCA Lc 45+ on white. These rules will collapse into a single `var(--brand-gradient)` usage when the navbar/hero sections are rewritten in the handoff migration. */ :root[data-theme="light"] .navbar-brand { background: linear-gradient(135deg, var(--accent-dim) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .hero h1:not(.hero__title), :root[data-theme="light"] .caploo-wordmark { background: linear-gradient(135deg, var(--accent-dim) 0%, var(--accent) 50%, #6e54d0 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .progress-fill { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); } /* ============================================================ Reset / base ============================================================ */ html, body { overflow-x: clip; } html, body { height: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: var(--text-fluid-body); line-height: 1.5; color: var(--text); background: var(--bg); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Ambient depth — radial wash behind everything */ background-image: radial-gradient(60rem 40rem at 80% -10%, var(--orb-2), transparent 60%), radial-gradient(50rem 35rem at 10% 0%, var(--orb-1), transparent 65%); background-attachment: fixed; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } /* Native form elements — keep iOS-zoom-safe 16px floor. Use .input / .textarea / .select for the new component styling. */ input, select, textarea { font-family: inherit; font-size: max(16px, 1rem); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Focus styles */ :focus { outline: none; } :focus-visible { outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--accent)); outline-offset: 2px; border-radius: var(--radius-xs); } /* High-contrast escalation — WCAG 1.4.11 / APCA Lc ≥75 */ @media (prefers-contrast: more) { :root { --focus-ring-width: 3px; --focus-ring-width-primary: 4px; } :focus-visible { outline-offset: 3px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .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; } /* Skip-to-content (WCAG 2.4.1) */ .skip-link { position: absolute; left: var(--space-2); top: var(--space-2); background: var(--accent); color: var(--text-on-accent); padding: 8px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--duration-base) var(--easing-emphasis); z-index: 500; } .skip-link:focus-visible { transform: translateY(0); } /* ── No-JS fallback ─────────────────────────────────────────── */ .noscript-fallback { max-width: 480px; margin: 4rem auto; padding: 2rem; text-align: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } /* F-009 — body scroll-lock: applied by CaplooMenu.attachScrollLock when a mobile bottom sheet (NavOverflowSheet, LanguageMenu) is open. Removed by detachScrollLock on close. Only fires at ≤768px (JS guards on innerWidth). */ .scroll-locked { overflow: hidden; } /* ============================================================ App shell ============================================================ */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .page { flex: 1; width: 100%; padding: var(--space-3) var(--gutter-x) var(--space-8); padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); } .page__inner { width: var(--content-rail); margin: 0 auto; } /* ============================================================ Buttons — handoff component classes (.btn-*). Native