/* ============================================================================ tokens.css — jholec case-study deck engine · DESIGN TOKENS (template) ---------------------------------------------------------------------------- ⚠️ REBRAND ENTRY POINT. Při nové prezentaci se mění JEN sekce 1 (palette) a případně font import — všechno ostatní (layout.css, deck.css) se váže na tyhle proměnné a zůstává beze změny. Legacy klíče --mood-* NEMĚNIT NÁZVEM (engine na ně bindí), měnit jen HODNOTY. Default = jholec brand: monochromie + jeden akcent #FF4900, Inter, 16px radius, light/dark rytmus. Viz PRINCIPLES.md + design-system.md. This file ONLY declares tokens + global resets + font import. No layout, no components (see layout.css). ============================================================================ */ /* --- Font: Inter (jediná rodina; brand s vlastním fontem doplní import) --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,400..600&display=swap'); :root { /* ======================================================================== 1. PALETTE — ⚠️ REBRAND HERE (hodnoty, ne názvy) Mapování rolí (drž se ho i v cizím brandu): --mood-ink = struktura: text, headings, dark plochy --mood-terracotta = JEDEN brand akcent („těch 10 %") — max 1 prvek/slide --mood-cream = světlý text na dark sekcích --mood-sage = pozitivní stav (success) --mood-taupe = linky, rámečky, dividers ======================================================================== */ --mood-ink: #0A0A0A; /* primary text, dark planes */ --mood-ink-soft: #1F1F1F; /* lifted dark — secondary UI on dark */ --mood-ink-body: #4D4D4D; /* running body text */ --mood-cream: #F6F6F4; /* near-white — text-on-dark */ --mood-cream-alt: #ECECEA; /* faint neutral plane */ --mood-white: #FFFFFF; /* white — cards, raised surfaces */ --mood-terracotta: #FF4900; /* ⚠️ BRAND ACCENT — the 10% */ --mood-sage: #3CA314; /* success green — approved / positive */ --mood-sage-muted: #86C46A; /* muted green — soft positive on dark */ --mood-taupe: #A8A8A8; /* grey — rules, frames, dividers */ --mood-sand: #FFD9C7; /* soft accent tint plane */ --mood-peach: #FFA57D; /* light accent highlight (text on dark) */ --mood-amber: #D14000; /* deeper accent variant */ --mood-oak: #DCDCDA; /* light grey — soft surfaces */ --mood-oak-mid: #9A9A98; /* mid grey */ --mood-oak-deep: #4D4D4D; /* deep grey — muted */ /* tinted alphas derived from the palette (frames, hovers, scrims) */ --mood-ink-08: rgba(10, 10, 10, 0.08); --mood-ink-12: rgba(10, 10, 10, 0.12); --mood-ink-60: #757575; /* muted (solid) */ --mood-cream-90: rgba(246, 246, 244, 0.90); --mood-cream-06: rgba(246, 246, 244, 0.06); --mood-cream-12: rgba(246, 246, 244, 0.14); --mood-cream-60: rgba(246, 246, 244, 0.62); --mood-terracotta-12: rgba(255, 73, 0, 0.10); --mood-terracotta-30: rgba(255, 73, 0, 0.30); --mood-sage-12: rgba(60, 163, 20, 0.12); --mood-taupe-30: #E3E3E1; /* hairline line */ /* --- Semantic aliases used by the engine ---------------------------------- */ --ink: var(--mood-ink); /* Brand aliases (visuals + components bind to these) */ --brand: var(--mood-terracotta); --brand-soft: #FFF0EA; /* soft accent tint */ --brand-hover: #C23A00; /* darkened accent (AA text on light) */ --line: var(--rule); --muted: var(--text-muted); --surface: var(--surface-card); /* Dark-slide surface (jholec light-black; brand může přebarvit na svou dark). */ --navy: #121212; /* dark panel background */ --navy-raised: #1E1E1E; /* lifted nested surface on dark */ --navy-sunken: #0A0A0A; /* recessed plane on dark */ /* ======================================================================== 1b. SURFACE — shared neutral shell (card-on-grey) Celá stránka je jedna spojitá neutrální plocha; obsah slidu žije v raised bílé kartě vlevo, pravá půlka je visual slot / 3D stage. ======================================================================== */ --surface-canvas: #F5F5F4; /* the whole page plane */ --surface-canvas-deep: #ECECEA; /* recessed plane */ --surface-card: #FFFFFF; /* the flat white content panel */ --surface-card-edge: #E3E3E1; /* hairline edge of the panel */ --card-edge-dark: rgba(246,246,244,0.14); /* hairline edge for the dark panel */ --radius-card: 16px; /* jholec signature radius */ --shadow-card-float: 0 1px 2px rgba(20,20,20,0.04), 0 4px 16px rgba(20,20,20,0.06), 0 24px 64px -16px rgba(20,20,20,0.12); --card-gutter: clamp(1.5rem, 2.8vh, 2.25rem); --card-gutter-mobile: 0.9rem; --panel-pad: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); /* Footer chrome geometry (progress ticks + counter/arrows baseline). */ --footer-band: clamp(3.5rem, 2.5rem + 1.5vh, 3.75rem); --footer-inset: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem); --footer-baseline: calc(var(--card-gutter) + var(--footer-inset)); /* ======================================================================== 2. SEMANTIC TOKENS — default = LIGHT section Dark sections re-bind these via .section--dark (see §6). ======================================================================== */ --bg: var(--surface-canvas); --bg-raised: var(--mood-white); --bg-sunken: var(--mood-cream-alt); --text: var(--mood-ink); --text-secondary: var(--mood-ink-body); --text-muted: var(--mood-ink-60); --accent: var(--mood-terracotta); /* decorative marks, fills, action */ --accent-on: #FFFFFF; /* Malý akcentový TEXT na světlé ploše potřebuje tmavší tón (AA); tenké/velké marky drží --accent. Ověř kontrast per brand! */ --accent-text: #C23A00; --accent-fill: #C23A00; /* accent fill nesoucí bílý text */ --accent-fill-on: #FFFFFF; --support: var(--mood-sage); /* Status palette — pouze na stavových vizuálech (ok/warn nesou VÝZNAM). */ --ok: #3CA314; --ok-strong: #2E7F0F; --ok-soft: #EFF7EA; --warn: #B57700; --warn-soft: #FDF6E3; --rule: var(--mood-taupe-30); --frame: var(--mood-ink-08); --scrim: var(--mood-ink-08); /* ======================================================================== 3. TYPE — jedna Inter rodina (serif/mono aliasy na sans; brand s vlastním display fontem přemapuje --font-serif). ======================================================================== */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: var(--font-sans); --font-mono: var(--font-sans); --font-hand: var(--font-sans); /* fixed step scale (fluid clamp, but the *steps* are fixed — pick a step) */ --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); --fs-h1: clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); --fs-quote: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); --fs-lead: clamp(1.15rem, 1.0rem + 0.6vw, 1.375rem); --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-nano: 0.6875rem; /* weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* line-heights — generous rhythm */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.65; --lh-quote: 1.35; /* tracking — jholec signature: negative tracking on headings */ --ls-display: -0.03em; --ls-display-tight: -0.05em; --ls-heading: -0.03em; --ls-eyebrow: 0.18em; --ls-label: 0.08em; /* ======================================================================== 4. SPACING SCALE (use these tokens, not ad-hoc px) ======================================================================== */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --head-body-gap: clamp(1.75rem, 1.2rem + 1.5vh, 2.5rem); --body-item-gap: clamp(1rem, 0.75rem + 0.8vh, 1.5rem); --space-2xl: 6rem; --space-3xl: 8.75rem; --pad-slide-x: clamp(2rem, 5vw, 6.5rem); --pad-slide-y: clamp(2rem, 5vh, 5rem); --measure: min(62ch, 100%); --measure-narrow: min(48ch, 100%); /* ======================================================================== 5. RADII / BORDERS / SHADOWS / MOTION ======================================================================== */ --radius: 8px; --radius-sm: 6px; --radius-md: 8px; --radius-pill: 999px; --border-hair: 1px; --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.05); --shadow-lift: 0 4px 12px 0 rgb(0 0 0 / 0.09); --shadow-art: 0 4px 12px 0 rgb(0 0 0 / 0.09); /* motion — calm, eased, never bouncy (jholec motion language) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 120ms; --dur-base: 320ms; --dur-slow: 560ms; --dur-stage: 720ms; /* ======================================================================== 7. Z-INDEX LAYERS ======================================================================== */ --z-stage: 1; --z-content: 10; --z-artefact: 15; --z-progress: 40; --z-chrome: 50; --z-overlay: 90; } /* ============================================================================ SHORT-VIEWPORT RHYTHM — tighten vertical rhythm as height shrinks; the JS fit-to-viewport zoom in deck.js then only nudges the densest slides. ============================================================================ */ @media (max-height: 920px) { :root { --pad-slide-y: clamp(1rem, 2.5vh, 2.25rem); --space-2xl: 4rem; --space-xl: 2.5rem; --space-lg: 1.75rem; } } @media (max-height: 780px) { :root { --pad-slide-y: 0.85rem; --space-2xl: 3rem; --space-xl: 2rem; --space-lg: 1.4rem; --space-md: 1.15rem; } } /* ============================================================================ 6. DARK SECTION TOKENS — dark planes (light/dark rhythm) Apply .section--dark on any slide root to flip the semantic layer. Dark sections anchor the heavy moments (jholec rule: 2–3 per deck). ============================================================================ */ .section--dark { --bg: var(--navy); --bg-raised: var(--navy-raised); --bg-sunken: var(--navy-sunken); --text: var(--mood-cream); --text-secondary: rgba(246, 246, 244, 0.82); --text-muted: var(--mood-cream-60); --accent: var(--mood-terracotta); --accent-on: var(--mood-ink); --accent-text: var(--mood-peach); /* light accent for small text on dark */ --accent-fill: #C23A00; --accent-fill-on: var(--mood-cream); --support: var(--mood-sage-muted); --ok: #6BC244; --ok-soft: rgba(107, 194, 68, 0.16); --warn: #E6A020; --warn-soft: rgba(230, 160, 32, 0.16); --rule: var(--mood-cream-12); --frame: var(--mood-cream-12); --scrim: var(--mood-cream-06); --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.36); --shadow-lift: 0 2px 6px rgba(0,0,0,0.32), 0 18px 48px rgba(0,0,0,0.44); --shadow-art: 0 1px 3px rgba(0,0,0,0.30), 0 24px 60px rgba(0,0,0,0.46); color: var(--text); background-color: var(--bg); } /* ============================================================================ 6b. COLORED PANEL THEMES — accent panel (class name .theme-coral je legacy, engine na ni bindí; hodnoty = TVŮJ brand akcent). Klíčový invariant: akcentový panel nikdy nenese akcent-na-sobě → accent se přemapuje. ============================================================================ */ .theme-coral { --bg: #C23A00; /* darkened accent — white text ≈ AA */ --bg-raised: rgba(255, 255, 255, 0.12); --bg-sunken: rgba(0, 0, 0, 0.16); --text: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.92); --text-muted: rgba(255, 255, 255, 0.80); --accent: var(--mood-white); --accent-on: #C23A00; --accent-text: var(--mood-sand); --accent-fill: var(--mood-white); --accent-fill-on: #C23A00; --support: var(--mood-sand); --rule: rgba(255, 255, 255, 0.30); --frame: rgba(255, 255, 255, 0.26); --scrim: rgba(255, 255, 255, 0.12); } .theme-sage { --bg: #2E7F0F; /* success panel — white text AA */ --bg-raised: rgba(255, 255, 255, 0.10); --bg-sunken: rgba(0, 0, 0, 0.16); --text: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.92); --text-muted: rgba(255, 255, 255, 0.78); --accent: var(--mood-peach); --accent-on: #2E7F0F; --accent-text: #FFE9C4; --accent-fill: var(--mood-peach); --accent-fill-on: #2E7F0F; --support: var(--mood-sand); --rule: rgba(255, 255, 255, 0.28); --frame: rgba(255, 255, 255, 0.24); --scrim: rgba(255, 255, 255, 0.12); } /* ============================================================================ GLOBAL RESET + BASE TYPOGRAPHY ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--text-secondary); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; overflow: hidden; /* deck is a fixed viewport, not a scroll page */ } /* tabular numbers on metrics/numbering — jholec polish */ .tnum { font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums; } h1, h2, h3 { margin: 0; color: var(--text); font-weight: var(--fw-semibold); } a { color: inherit; text-decoration: none; } ::selection { background: var(--mood-terracotta-30); color: var(--text); } @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; } }