/** * Canonical design tokens — Yaniv Sela portfolio * * Theme: `data-theme="light" | "dark"` on `` (set by inline FOUC script + assets/theme.js). * Case study paper / warm dark: `data-canvas="case-study"` on ``. * * Imported by `work/case-study.css`, `design-system.html`. * Homepage should load this file first; keep inline `:root` in index removed / synced. */ /* ── Fallback (no-JS): light home ─────────────────────────── */ :root { color-scheme: light; --ink: #00140e; --accent: #59ffc9; --accent-soft: #7ba496; /* Neutrals: same discipline as dark mode — rgba steps for hierarchy */ --mid: rgba(10, 12, 14, 0.62); --light: rgba(10, 12, 14, 0.42); --green: #1e8a44; --border: rgba(10, 12, 14, 0.12); --heading-on-light: #0a0a0c; --heading-on-dark: #ffffff; --body-text: rgba(10, 12, 14, 0.82); --nav-text: rgba(10, 12, 14, 0.88); --label-caps: rgba(10, 12, 14, 0.5); --accent-ink: var(--ink); /* Filled accent button — dark label/icon on mint (same in light & dark for contrast) */ --btn-primary-fg: #0a0a0c; --bg-section: #f5f5f7; --surface-raised: #ffffff; --hairline: rgba(10, 12, 14, 0.1); --max: 1160px; --r: 12px; --modal-max: 1100px; --cs-max: 900px; --cs-dark: #111111; --cs-dark-elevated: #1a1a1a; --cs-dark-border: #333333; --cs-band-bg: #fafafa; --bg: #ffffff; --bg-off: #f7f8fa; /* Nav glass */ --nav-bg: rgba(255, 255, 255, 0.96); --nav-border: rgba(0, 0, 0, 0.08); --nav-shadow-scrolled: 0 2px 16px rgba(0, 0, 0, 0.06); --modal-topbar-bg: rgba(255, 255, 255, 0.86); /* Homepage #about-strip — always a dark band (never reuse --ink in dark theme: there --ink is a bright accent) */ --about-strip-bg: #00140e; --about-strip-label: rgba(255, 255, 255, 0.65); --about-strip-body: rgba(255, 255, 255, 0.9); --about-pill-group: rgba(255, 255, 255, 0.52); --about-pill-bg: rgba(255, 255, 255, 0.1); --about-pill-border: rgba(255, 255, 255, 0.22); --about-pill-text: #f0faf7; --about-pill-highlight-bg: rgba(89, 255, 201, 0.16); --about-pill-highlight-border: rgba(89, 255, 201, 0.42); /* Apple-style segmented control (filters / tabs) */ --segmented-track-bg: #e8e8ed; --segmented-track-border: rgba(0, 0, 0, 0.06); --segmented-active-bg: #1d1d1f; --segmented-active-fg: #f5f5f7; --segmented-inactive-fg: #1d1d1f; /* Icons (Lucide / stroke SVGs — use color + currentColor) */ --icon-color: var(--mid); --icon-color-muted: var(--light); --icon-color-emphasis: var(--accent-ink); --icon-size-sm: 20px; --icon-size-md: 24px; --icon-size-lg: 48px; /* Gradient text (hero / highlights) */ --text-gradient-from: var(--accent-ink); --text-gradient-to: var(--accent); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px; --space-13: 72px; --space-14: 80px; --space-15: 96px; --space-18: 160px; --page-inline: var(--space-8); --section-gap: var(--space-14); --block-gap: var(--space-6); --stack-tight: var(--space-3); --stack-standard: var(--space-4); --stack-relaxed: var(--space-6); } html[data-theme="light"] { color-scheme: light; --ink: #00140e; --accent: #59ffc9; --accent-soft: #7ba496; --mid: rgba(10, 12, 14, 0.62); --light: rgba(10, 12, 14, 0.42); --green: #1e8a44; --border: rgba(10, 12, 14, 0.12); --heading-on-light: #0a0a0c; --body-text: rgba(10, 12, 14, 0.82); --nav-text: rgba(10, 12, 14, 0.88); --label-caps: rgba(10, 12, 14, 0.5); --accent-ink: var(--ink); --btn-primary-fg: #0a0a0c; --bg-section: #f5f5f7; --surface-raised: #ffffff; --hairline: rgba(10, 12, 14, 0.1); --bg: #ffffff; --bg-off: #f7f8fa; --cs-band-bg: #fafafa; --nav-bg: rgba(255, 255, 255, 0.96); --nav-border: rgba(10, 12, 14, 0.08); --nav-shadow-scrolled: 0 2px 16px rgba(0, 0, 0, 0.06); --modal-topbar-bg: rgba(255, 255, 255, 0.86); /* About strip: inherits same dark band from :root */ --segmented-track-bg: #e8e8ed; --segmented-track-border: rgba(0, 0, 0, 0.06); --segmented-active-bg: #1d1d1f; --segmented-active-fg: #f5f5f7; --segmented-inactive-fg: #1d1d1f; --icon-color: var(--mid); --icon-color-muted: var(--light); --icon-color-emphasis: var(--accent-ink); --text-gradient-from: var(--accent-ink); --text-gradient-to: var(--accent); } html[data-theme="dark"] { color-scheme: dark; --ink: #b5ffea; --accent: #59ffc9; --accent-soft: #8fd9c4; --mid: rgba(235, 235, 245, 0.65); --light: rgba(235, 235, 245, 0.45); --green: #3ddc84; --border: rgba(255, 255, 255, 0.14); --heading-on-light: #f5f5f7; --body-text: rgba(235, 235, 245, 0.9); --nav-text: rgba(255, 255, 255, 0.92); --label-caps: rgba(235, 235, 245, 0.5); --accent-ink: var(--accent); --btn-primary-fg: #0a0a0c; --bg-section: #141418; --surface-raised: #1c1c1f; --hairline: rgba(255, 255, 255, 0.12); --bg: #0a0a0c; --bg-off: #111114; --cs-dark: #000000; --cs-dark-elevated: #1c1c1e; --cs-dark-border: rgba(255, 255, 255, 0.12); --cs-band-bg: #0f0f12; --nav-bg: rgba(22, 22, 26, 0.92); --nav-border: rgba(255, 255, 255, 0.1); --nav-shadow-scrolled: 0 2px 24px rgba(0, 0, 0, 0.45); --modal-topbar-bg: rgba(28, 28, 31, 0.92); /* Deep green-black strip — not mint (that color is --ink for type/links in dark UI) */ --about-strip-bg: #030806; --about-strip-label: rgba(255, 255, 255, 0.68); --about-strip-body: rgba(255, 255, 255, 0.92); --about-pill-group: rgba(255, 255, 255, 0.55); --about-pill-bg: rgba(255, 255, 255, 0.12); --about-pill-border: rgba(255, 255, 255, 0.26); --about-pill-text: #f5fbf9; --about-pill-highlight-bg: rgba(89, 255, 201, 0.18); --about-pill-highlight-border: rgba(89, 255, 201, 0.48); --segmented-track-bg: rgba(255, 255, 255, 0.08); --segmented-track-border: rgba(255, 255, 255, 0.1); --segmented-active-bg: #f5f5f7; --segmented-active-fg: #1d1d1f; --segmented-inactive-fg: rgba(245, 245, 247, 0.75); --icon-color: rgba(235, 235, 245, 0.68); --icon-color-muted: rgba(235, 235, 245, 0.42); --icon-color-emphasis: var(--accent); --text-gradient-from: #dfffea; --text-gradient-to: var(--accent); } /* Case study — paper (light) / warm dark */ html[data-canvas="case-study"][data-theme="light"] { --bg: #e2dadb; --bg-off: #f0ede8; --body-text: rgba(28, 32, 31, 0.86); --heading-on-light: #0c0e0d; --nav-text: rgba(28, 32, 31, 0.9); --label-caps: rgba(28, 32, 31, 0.52); --mid: rgba(28, 32, 31, 0.62); --light: rgba(28, 32, 31, 0.42); --accent-ink: #00140e; --border: rgba(28, 32, 31, 0.14); --hairline: rgba(28, 32, 31, 0.12); --surface-raised: #f6f2ef; --segmented-inactive-fg: #1d1d1f; --segmented-active-bg: #1d1d1f; --segmented-active-fg: #f5f5f7; --icon-color: rgba(28, 32, 31, 0.62); --icon-color-muted: rgba(28, 32, 31, 0.45); --icon-color-emphasis: #00140e; --text-gradient-from: #00140e; --text-gradient-to: var(--accent); } html[data-canvas="case-study"][data-theme="dark"] { --bg: #161311; --bg-off: #1f1c1a; --body-text: rgba(245, 242, 240, 0.92); --heading-on-light: #f7f4f1; --border: rgba(255, 220, 200, 0.12); --surface-raised: #1e1b19; --bg-section: #141210; --cs-band-bg: #12100e; --segmented-track-bg: rgba(255, 255, 255, 0.07); --icon-color: rgba(247, 244, 241, 0.68); --icon-color-muted: rgba(247, 244, 241, 0.42); --icon-color-emphasis: var(--accent); --text-gradient-from: #f0ebe6; --text-gradient-to: var(--accent); } /* ── Gradient text (shared with homepage hero emphasis) ── */ .text-gradient { font-style: normal; background: linear-gradient(90deg, var(--text-gradient-from) 0%, var(--text-gradient-to) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* ── Icon library: Lucide defaults (stroke inherits currentColor) ── */ .icon, [data-lucide] { display: inline-flex; align-items: center; justify-content: center; color: var(--icon-color); flex-shrink: 0; } .icon--muted, .icon--muted[data-lucide] { color: var(--icon-color-muted); } .icon--accent, .icon--accent[data-lucide] { color: var(--icon-color-emphasis); } .icon--sm, .icon--sm[data-lucide] { width: var(--icon-size-sm); height: var(--icon-size-sm); } .icon--md, .icon--md[data-lucide] { width: var(--icon-size-md); height: var(--icon-size-md); } .icon--lg, .icon--lg[data-lucide] { width: var(--icon-size-lg); height: var(--icon-size-lg); } .icon svg, [data-lucide] svg { width: 100%; height: 100%; display: block; } /* ── Apple-style segmented filter (Explore the lineup pattern) ── */ .segmented { display: flex; flex-wrap: wrap; align-items: center; padding: var(--space-1); gap: 2px; border-radius: 999px; background: var(--segmented-track-bg); border: 1px solid var(--segmented-track-border); width: fit-content; max-width: 100%; } .segmented[role="tablist"] { /* same */ } .segmented__btn { appearance: none; border: none; background: transparent; margin: 0; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--segmented-inactive-fg); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .segmented__btn:hover:not([aria-selected="true"]) { color: var(--heading-on-light); } .segmented__btn[aria-selected="true"] { background: var(--segmented-active-bg); color: var(--segmented-active-fg); } .segmented__btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .segmented__btn { transition: none; } } .segmented-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--heading-on-light); margin: 0 0 var(--space-6); } .segmented-hint { font-size: 14px; color: var(--mid); max-width: 65ch; margin-bottom: var(--space-6); }