/* ============================================================================ Českolipský divadelní podzim 2026 — Design tokens Odvozeno z oficiálního vizuálu (CDP_26_posty.pdf, Adobe InDesign / RocGrotesk Wide) Vlož do šablony cdp-theme jako první načtený styl. Vše ostatní odkazuje var(--cdp-*). ============================================================================ */ /* --------------------------------------------------------------------------- 1) PÍSMO Originál plakátu: RocGrotesk Wide (Fontfabric, komerční). Pokud máš licenci, self-hostuj přes @font-face níže a nastav --cdp-font-display na "RocGrotesk". Bez licence: Archivo (Google Fonts, var. šířka 62–125) je nejbližší volná náhrada širokého grotesku a má plnou českou diakritiku. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100,400;0,100,500;0,125,300;0,125,400;0,125,500;0,125,600&display=swap'); /* Komerční originál — odkomentuj, až nahraješ soubory do /assets/fonts/ @font-face { font-family: 'RocGrotesk'; src: url('../fonts/RocGrotesk-Wide.woff2') format('woff2'); font-weight: 400 600; font-stretch: 100% 125%; font-display: swap; } */ :root { /* ------------------------------------------------------------------------- 2) SUROVÁ PALETA (přesné hexy z vizuálu) ------------------------------------------------------------------------- */ --cdp-ink: #231F20; /* text, brushstroke linka */ --cdp-sage: #CBD7D2; /* podkladová šalvěj (signatura) */ --cdp-vermilion: #F1491F; /* hlavní akcent – tah "5" */ --cdp-pink: #EF67A8; /* růžová stuha */ --cdp-amber: #F49E37; /* jantarová křivka */ --cdp-purple: #8F6BBC; /* fialový oblouk */ --cdp-gold: #8F6E2D; /* olivová zlatá */ --cdp-indigo: #555586; /* modré tečky */ --cdp-pink-hot: #F469BB; /* sytá růžová tečka (zvýraznění) */ /* Tinty (světlé podklady, badge fill) a tmavé varianty (text na barvě) */ --cdp-sage-tint: #E3EAE7; --cdp-sage-deep: #B4C4BD; --cdp-vermilion-deep: #B6310F; /* text na vermilion / hover */ --cdp-vermilion-tint: #FBE0D8; --cdp-pink-deep: #993556; --cdp-pink-tint: #FCE6F0; --cdp-amber-deep: #8A540A; --cdp-amber-tint: #FCEEDA; --cdp-purple-deep: #4F3E78; --cdp-purple-tint: #EEE9F5; --cdp-indigo-deep: #393963; /* ------------------------------------------------------------------------- 3) SÉMANTICKÉ TOKENY (na tyto odkazuj v komponentách, ne na surové barvy) ------------------------------------------------------------------------- */ --cdp-bg: var(--cdp-sage); /* hlavní brandový podklad */ --cdp-surface: #FBFBFA; /* čtecí plocha (karty, detail) */ --cdp-surface-alt: var(--cdp-sage-tint); /* sekce, jemné oddělení */ --cdp-border: rgba(35,31,32,.14); /* tenké linky */ --cdp-border-strong: rgba(35,31,32,.28); --cdp-text: var(--cdp-ink); --cdp-text-muted: #5C5A52; /* "JIRÁSKOVO DIVADLO" šedá */ --cdp-text-on-color: #FFFFFF; /* label na tmavších akcentech */ --cdp-primary: var(--cdp-vermilion); /* hlavní akce: Koupit vstupenku */ --cdp-primary-hover: var(--cdp-vermilion-deep); --cdp-link: var(--cdp-vermilion-deep); /* Stavy ticketingu/check-inu, naladěné do palety (ne defaultní zelená/červená) */ --cdp-state-ok: #3B6D11; /* PLATNÝ / volné sedadlo */ --cdp-state-ok-bg: #EAF3DE; --cdp-state-warn: var(--cdp-amber-deep); /* JIŽ ODBAVENO */ --cdp-state-warn-bg: var(--cdp-amber-tint); --cdp-state-err: var(--cdp-vermilion-deep); /* NEPLATNÝ / obsazeno */ --cdp-state-err-bg: var(--cdp-vermilion-tint); /* ------------------------------------------------------------------------- 4) TYPOGRAFIE Nadpisy = široký grotesk (125%), lowercase jako na plakátu. Tělo = stejný grotesk v normální šířce kvůli čitelnosti na mobilu. ------------------------------------------------------------------------- */ --cdp-font-display: 'RocGrotesk', 'Archivo', system-ui, sans-serif; --cdp-font-body: 'Archivo', system-ui, -apple-system, sans-serif; --cdp-wdth-display: 125%; /* font-stretch pro nadpisy */ --cdp-wdth-body: 100%; --cdp-w-light: 300; --cdp-w-regular: 400; --cdp-w-medium: 500; --cdp-w-bold: 600; /* Váha velkých nadpisů (řez „display"). Plakát je tenký široký grotesk → Light. Pro silnější dojem přepni na var(--cdp-w-regular). Sekční h2/h3 zůstávají medium. */ --cdp-w-display: 300; --cdp-track-smallcaps: .08em; /* prostrkání kapitálek (méně než verzálky) */ --cdp-track-caps: .22em; /* prostrkání verzálek (přehazka, labels) */ --cdp-leading-display: 1.04; --cdp-leading-body: 1.6; /* Modulární škála (mobile-first; nadpisy dorůstají přes clamp) */ --cdp-fs-display: clamp(2.1rem, 7vw, 3.4rem); --cdp-fs-h1: clamp(1.7rem, 5.2vw, 2.5rem); --cdp-fs-h2: clamp(1.35rem, 3.6vw, 1.85rem); --cdp-fs-h3: 1.2rem; --cdp-fs-body: 1rem; --cdp-fs-small: .8125rem; --cdp-fs-caps: .72rem; /* ------------------------------------------------------------------------- 5) ŽÁNROVÁ MAPA (pro filtry a štítky v programovém kalendáři, modul 2) Fill = sytá barva, On = čitelný text na ní (z palety, ne čistá čerň/běl). ------------------------------------------------------------------------- */ --cdp-genre-cinohra: var(--cdp-vermilion); --cdp-genre-cinohra-on: #FFFFFF; --cdp-genre-loutky: var(--cdp-pink); --cdp-genre-loutky-on: var(--cdp-pink-deep); --cdp-genre-performance: var(--cdp-purple); --cdp-genre-performance-on: #FFFFFF; --cdp-genre-tanec: var(--cdp-amber); --cdp-genre-tanec-on: var(--cdp-amber-deep); --cdp-genre-deti: var(--cdp-indigo); --cdp-genre-deti-on: #FFFFFF; --cdp-genre-hudba: var(--cdp-gold); --cdp-genre-hudba-on: #FFFFFF; /* ------------------------------------------------------------------------- 6) TVAR / RYTMUS ------------------------------------------------------------------------- */ --cdp-radius-sm: 8px; --cdp-radius: 14px; /* karty, jako rohy na plakátovém panelu */ --cdp-radius-pill: 999px; --cdp-space: 1rem; --cdp-maxw: min(1920px, 100%); /* obsah na celou šíři okna (strop pro ultrawide) */ } /* =========================================================================== ZÁKLADNÍ APLIKACE — minimální starter, zbytek řeš v komponentách šablony =========================================================================== */ body { background: var(--cdp-bg); color: var(--cdp-text); font-family: var(--cdp-font-body); font-stretch: var(--cdp-wdth-body); font-size: var(--cdp-fs-body); line-height: var(--cdp-leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, .cdp-display { font-family: var(--cdp-font-display); font-stretch: var(--cdp-wdth-display); font-weight: var(--cdp-w-display); line-height: var(--cdp-leading-display); letter-spacing: -.005em; /* mírné stažení pro plakátový set */ text-transform: none; /* zachová verzálky jak jsou zapsané (velké „Č") */ color: var(--cdp-text); margin: 0 0 .5em; } h1 { font-size: var(--cdp-fs-h1); } h2 { font-size: var(--cdp-fs-h2); font-weight: var(--cdp-w-medium); } h3 { font-size: var(--cdp-fs-h3); font-weight: var(--cdp-w-medium); text-transform: none; } .cdp-display { font-size: var(--cdp-fs-display); } /* WYSIWYG: žádná automatická transformace textu nikde ve výchozím stavu. Kapitálky jsou k dispozici JEN když ručně přidáš třídu .cdp-smallcaps. */ .cdp-smallcaps { font-variant-caps: all-small-caps; font-feature-settings: "smcp" 1, "c2sc" 1; letter-spacing: var(--cdp-track-smallcaps); } .cdp-overline { /* nadřádek – text se zobrazí PŘESNĚ jak je zapsán */ font-family: var(--cdp-font-body); font-weight: var(--cdp-w-medium); font-size: .82rem; letter-spacing: .02em; color: var(--cdp-text-muted); } a { color: var(--cdp-link); text-underline-offset: .18em; } /* Hlavní akce: Koupit vstupenku */ .cdp-btn { display: inline-flex; align-items: center; gap: .5em; background: var(--cdp-primary); color: var(--cdp-text-on-color); font-family: var(--cdp-font-body); font-weight: var(--cdp-w-bold); border: 0; border-radius: var(--cdp-radius-pill); padding: .7em 1.4em; cursor: pointer; transition: background .15s ease; } .cdp-btn:hover { background: var(--cdp-primary-hover); } .cdp-btn:focus-visible { outline: 3px solid var(--cdp-indigo); outline-offset: 2px; } /* Žánrový štítek / filtr */ .cdp-chip { display: inline-block; padding: .35em .9em; border-radius: var(--cdp-radius-pill); font-weight: var(--cdp-w-medium); font-size: var(--cdp-fs-small); background: var(--cdp-genre-cinohra); color: var(--cdp-genre-cinohra-on); } .cdp-chip--loutky { background: var(--cdp-genre-loutky); color: var(--cdp-genre-loutky-on); } .cdp-chip--performance { background: var(--cdp-genre-performance); color: var(--cdp-genre-performance-on); } .cdp-chip--tanec { background: var(--cdp-genre-tanec); color: var(--cdp-genre-tanec-on); } .cdp-chip--deti { background: var(--cdp-genre-deti); color: var(--cdp-genre-deti-on); } .cdp-chip--hudba { background: var(--cdp-genre-hudba); color: var(--cdp-genre-hudba-on); } /* Karta (detail inscenace, programová položka) */ .cdp-card { background: var(--cdp-surface); border: .5px solid var(--cdp-border); border-radius: var(--cdp-radius); padding: 1.25rem 1.4rem; } /* =========================================================================== TMAVÝ REŽIM Brand je světlý (šalvěj je signatura). Pro dark mode necháváme akcenty beze změny a jen invertujeme povrchy, ať plakátová identita drží. =========================================================================== */ /* =========================================================================== MOTIV: světlý (výchozí, podklad ze sage plakátu) / tmavý / automatický. Řídí atribut data-cdp-theme na (nastavení v administraci). =========================================================================== */ :root[data-cdp-theme="dark"] { --cdp-bg: #1A1C1B; --cdp-surface: #232624; --cdp-surface-alt: #2B2F2D; --cdp-text: #ECEFEC; --cdp-text-muted: #9AA39E; --cdp-border: rgba(236,239,236,.14); --cdp-border-strong: rgba(236,239,236,.28); --cdp-link: #FF8A66; /* vermilion zesvětlený kvůli kontrastu */ } /* Automatický motiv – řídí se nastavením prohlížeče/OS návštěvníka. */ @media (prefers-color-scheme: dark) { :root[data-cdp-theme="auto"] { --cdp-bg: #1A1C1B; --cdp-surface: #232624; --cdp-surface-alt: #2B2F2D; --cdp-text: #ECEFEC; --cdp-text-muted: #9AA39E; --cdp-border: rgba(236,239,236,.14); --cdp-border-strong: rgba(236,239,236,.28); --cdp-link: #FF8A66; } }