/* * theme.css — CELÝ vzhled platformy budvarsoutez.cz (spec 2026-08-26). * * Načítá se AŽ ZA base.css z core, takže jeho :root proměnné i komponenty * přebíjí kaskádou. base.css zůstává načtený SCHVÁLNĚ: nese reset, flash * zprávy, kostru formulářů (.form-row, zaškrtávátka, honeypot, popover * kalendáře z controls.js), na které téma jen staví — a šablona, kterou by * téma někdy nepřebíjelo, z něj žije celá. * * Šablony tématu: app/templates/budvar/. Tohle repo vlastní vzhled celý — * core nese jen mechanismus témat (docs/fleet.md §3 krok 4b-1 v monorepu). * * Barvy jsou odečtené VÝPOČTEM z exportu Figmy, ne odhadem z inspektoru — * kontrast hlídá tests/BudvarContrastTest.php přes core/bin/check-contrast.php. */ /* ------------------------------------------------------------ Futura PT -- * Licencované písmo nadpisů — Adobe Fonts, kit quy1jsi; načítá ho * @layout.latte z use.typekit.net (soubory do repa nesmí, výjimku v CSP nese * Platform\Security\TypekitCsp). Adobe rodinu dělí na DVĚ: * 'futura-pt' Book 400 · Medium 500 · Demi 600 · Heavy 700 · Extra Bold 800 * 'futura-pt-bold' Bold — jediný řez (700); váhou leží mezi Heavy a Extra Bold, * v číslování hlavní rodiny na něj nezbylo místo * Proto dvě proměnné: --font-display vybírá řez vahou, --font-display-bold je * pro všechno, co je ve Figmě „Futura PT Bold" (nadpisy, navigace, tlačítka). * Pozor: Heavy je 700, ne 800 — 800 je Extra Bold (nadpis soutěže). * Řez, který kit nemá, prohlížeč nahradí nejbližší dostupnou vahou (bez Demi * a Extra Bold v kitu jde 600 i 800 na Heavy) — kit musí nést Book, Medium, * Demi, Heavy, Extra Bold + Futura PT Bold. Bez kitu (CSP, výpadek Adobe) * padá vše na Barlow, takže je téma čitelné i tak. Hlídá BudvarTypekitTest. */ /* ---------------------------------------------------------------- písma -- * Barlow (SIL OFL, licence vedle souborů) leží v www/assets/client/fonts/. * Futura PT přichází z Adobe Fonts — viz blok výš. */ @font-face { font-family: 'Barlow'; src: url('/assets/client/fonts/barlow-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/assets/client/fonts/barlow-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/assets/client/fonts/barlow-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/assets/client/fonts/barlow-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/assets/client/fonts/barlow-extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- tokeny -- */ :root { --brand: #CC4146; /* @contrast #CC4146 #FFFFFF 4.5 @contrast #FFFFFF #CC4146 4.5 */ --brand-dark: #7E1620; /* @contrast #7E1620 #F8F6E9 4.5 @contrast #FFFFFF #7E1620 4.5 */ --brand-contrast: #FFFEF9; /* ZNAČKOVÁ zlatá přesně z Figmy. Používá se přesně tam, kde je v designu: nadpisy sekcí, navigace, třetí řádek karty, věta pod mechanikou, kolečko kroku, aktivní tečka carouselu. Na krému má 2,47:1 — pod prahem WCAG i pro velký text. Je to VĚDOMÁ ODCHYLKA ve prospěch věrnosti značce (rozhodnutí klienta 2026-08-26: „gold — match Figma"), drženou testem BudvarContrastTest, aby ji nešlo tiše změnit. */ --gold: #C39F56; /* Text na červeném pruhu je warm cream, ne bílá — odečteno z exportu. Má 4,06:1 na --brand, takže projde jako VELKÝ text (3:1), ne jako běžný. Drobný text na červené proto používá bílou (4,76:1) — rozdíl je okem sotva znát, na rozdíl od rozdílu v čitelnosti. */ --cream: #F7ECD7; /* @contrast #F7ECD7 #CC4146 3 */ --bg: #FFFEF9; --bg-alt: #F8F6E9; --surface: #FFFFFF; --surface-muted: #F3F2ED; --text: #454545; /* @contrast #454545 #FFFEF9 4.5 @contrast #454545 #F3F2ED 4.5 */ --text-muted: #6B6B6B; /* @contrast #6B6B6B #FFFEF9 4.5 */ --font-display: 'futura-pt', 'Barlow', system-ui, -apple-system, sans-serif; /* „Futura PT Bold" z Figmy — samostatná rodina kitu (blok Futura PT výš). */ --font-display-bold: 'futura-pt-bold', 'futura-pt', 'Barlow', system-ui, -apple-system, sans-serif; --font-body: 'Barlow', system-ui, -apple-system, sans-serif; /* Šířka obsahu 1296 px podle Figmy (karty rozcestníku, Frame 98 2:339: x 312–1608 na plátně 1920). */ --max-width: 81rem; --radius: 0; /* Pohyb: jedna křivka a dvě rychlosti pro celé téma (hover/stisk). Silný ease-out — vestavěné křivky jsou na krátké UI přechody slabé. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --t-fast: 160ms; --t-base: 220ms; } body { /* background-image, ne jen background-color: base.css maluje na vršek stránky přechod z --brand-soft (tint brandu). Téma budvar má plochou krémovou plochu a červený tint pod hlavičkou by rozbil cover, který na ni navazuje. */ background: var(--bg); background-image: none; color: var(--text); font-family: var(--font-body); } /* Kotvy (Kontakt v hlavičce, /#aktivni a /#ukoncene z navigace, „Chci soutěžit" → #registrace) rolují plynule (zadání 2026-08-26). Kdo má v systému omezený pohyb, dostane skok. Kotevní lišta pod hlavičkou stránky soutěže byla zrušena (zadání 2026-08-27), takže žádný scroll-padding-top není potřeba. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* je INLINE prvek — vytváří řádkový box a pod obrázkem tak zbývá proužek pozadí ve výšce accentu písma. Obrázek uvnitř má display:block, ale to samo nestačí, obal musí být blok taky. */ .t-budvar picture { display: block; } /* ------------------------------------------------------- sdílené prvky -- * Téma vykresluje sekce přes celou šířku okna s obsahem zarovnaným na * --max-width uvnitř (stejný vzor jako .site-header/.site-header-inner * základního tématu) — bez vnitřního obalu by dlouhý řádek na širokém * displeji rozjel vodorovný posuvník. */ .t-budvar .bv-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: 1.5rem; } /* Nadpisy sekcí: velké, VERZÁLKY, display písmo. Barva podle sekce — zlatá na krémovém pozadí, tmavě červená pro Výhry/Pravidla, krémová na červeném pruhu. */ /* Metriky z Figmy (1:118 „ukončené soutěže", 19:1063 „Jak vyhrát", 19:1173 „Zapoj se do soutěže", 19:1323 „Pravidla soutěže" — všechny stejné): Futura PT Bold 40 px, řádek 49,5 px, prostrkání 1,4 px; pod nadpisem 44 px (rozcestník; sekce soutěže 39–41 px, rozdíl pod 5 px se nerozlišuje). Nadpis soutěže pod coverem má vlastní velikost (.bv-intro níž). */ .t-budvar .bv-section-title { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.2375; text-transform: uppercase; letter-spacing: 0.035em; margin: 0 0 2.75rem; } .t-budvar .bv-section-title--gold { color: var(--gold); text-align: center; } .t-budvar .bv-section-title--dark { color: var(--brand-dark); text-align: center; } .t-budvar .bv-section-title--light { color: var(--cream); } /* Tlačítka. Výchozí je plná červená, --dark tmavá (hlavní CTA v designu), --outline prázdné s rámečkem (Zobrazit všechny). */ /* Metriky „_Button core" z Figmy (19:1131, 19:1227, 6:458, 19:1325): 230×63 px, Futura PT Bold 20 px, verzálky bez prostrkání. Výška = 19,5 + 20 + 19,5 + 2×2 px rámečku. */ .t-budvar .bv-btn { display: inline-block; min-width: 14.375rem; font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: 1.25rem; line-height: 1; text-transform: uppercase; letter-spacing: 0; text-align: center; text-decoration: none; padding: 1.21875rem 2.5rem; border: 2px solid transparent; background: var(--brand); color: #FFFFFF; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .t-budvar .bv-btn:hover { background: var(--brand-dark); color: #FFFFFF; } .t-budvar .bv-btn:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; } .t-budvar .bv-btn--dark { background: var(--brand-dark); } .t-budvar .bv-btn--dark:hover { background: var(--brand); } .t-budvar .bv-btn--outline { background: transparent; color: var(--brand-dark); /* Hranice ovládacího prvku (WCAG 1.4.11) potřebuje 3:1 — značková zlatá má na krému 2,47:1. */ border-color: var(--gold); } .t-budvar .bv-btn--outline:hover { background: var(--brand-dark); color: #FFFFFF; border-color: var(--brand-dark); } /* ------------------------------------------------------------ hlavička -- */ .t-budvar .bv-header { background: var(--bg); } /* Hlavička jde od kraje ke kraji: logo vlevo, menu vpravo, 40 px od okrajů okna (Figma Container 19:958, padding 40 px) — NE na --max-width jako obsah (zadání 2026-08-26). */ .t-budvar .bv-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; /* Figma: hlavička 126 px, logo.svg 168×108 px (2:15), položky menu Futura PT Bold 24 px s prostrkáním 1,4 px, 60 px od sebe (2:38). */ min-height: 7.875rem; flex-wrap: wrap; padding-inline: 2.5rem; } .t-budvar .bv-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--brand); font-weight: 800; } .t-budvar .bv-brand-logo { display: block; width: auto; height: 6.75rem; } .t-budvar .bv-nav { display: flex; align-items: center; gap: 3.75rem; flex-wrap: wrap; } .t-budvar .bv-nav a { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.0583em; color: var(--gold); text-decoration: none; } .t-budvar .bv-nav a:hover, .t-budvar .bv-nav a.is-active { color: var(--brand-dark); } .t-budvar .bv-nav a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } /* Tlačítko menu (zadání 2026-08-27): v HTML hidden, odkryje ho nav.js; na širokém displeji zůstává skryté i se skriptem — rozhoduje media query níž. */ .t-budvar .bv-nav-toggle { display: none; } /* --------------------------------------------------------------- obsah -- * Stránka má vždy aspoň 100 vh a patička sedí u spodní hrany okna i na * krátkých stránkách (archiv s jednou kartou) — zadání 2026-08-26. */ body.t-budvar { min-height: 100vh; display: flex; flex-direction: column; } .t-budvar .bv-main { display: block; flex: 1 0 auto; } /* -------------------------------------------------------------- patička -- */ .t-budvar .bv-footer { background: var(--brand); color: var(--cream); margin-top: 0; } .t-budvar .bv-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; /* Od kraje ke kraji jako hlavička: Figma Footer2 (1:180) 39 px svisle, 42 px od okrajů okna; logo 126×36, copyright Futura Medium 16 px, kontakty Futura Medium 20 px s ikonou 24 px, sítě 24 px po 35 px. */ padding: 2.4375rem 2.625rem; } .t-budvar .bv-footer-brand { display: flex; align-items: center; gap: 0.625rem; } .t-budvar .bv-footer-logo-link { display: block; } .t-budvar .bv-footer-logo-link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; } .t-budvar .bv-footer-logo { display: block; width: auto; height: 2.25rem; } .t-budvar .bv-footer-copyright { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.03em; color: #FFFFFF; } /* Odkaz na zásady zpracování údajů vedle copyrightu (core v0.6.0). */ .t-budvar .bv-footer-legal { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.03em; color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 0.18em; } .t-budvar .bv-footer-legal:hover { text-decoration-color: currentColor; } .t-budvar .bv-footer-contacts { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .t-budvar .bv-footer-contact { color: #FFFFFF; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 0.625rem; } .t-budvar .bv-footer-ico { width: 1.5rem; height: 1.5rem; flex: none; } /* Podtržení se nerozsvítí skokem, ale prolne (jen text, ne ikona — dekorace se na SVG nekreslí). */ .t-budvar .bv-footer-contact { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; transition: text-decoration-color var(--t-fast) ease; } .t-budvar .bv-footer-contact:hover { text-decoration-color: currentColor; } /* Ikony sítí dědíme ze základního tématu (@social-icons.latte) — přebarvit je stačí na krémovou, značky jsou inline SVG s currentColor. */ .t-budvar .bv-footer-social .social-links { display: flex; gap: 2.1875rem; } .t-budvar .bv-footer-social a { color: var(--cream); } .t-budvar .bv-footer-social a:hover { color: #FFFFFF; } .t-budvar .bv-footer-social svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } @media (max-width: 48rem) { .t-budvar .bv-header-inner { min-height: 0; padding: 1rem 1.5rem; gap: 0.75rem; } .t-budvar .bv-brand-logo { height: 3.5rem; } /* Bez skriptu (nav.js) zůstávají odkazy vidět a zalamují se pod logo. */ .t-budvar .bv-nav { gap: 1.25rem; } .t-budvar .bv-nav a { font-size: 1rem; } /* Tlačítko menu: 44 px dotyková plocha (WCAG 2.5.8), ikona zlatá jako odkazy, otevřené = tmavě červená a křížek místo tří čar. */ .t-budvar .bv-nav-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--gold); cursor: pointer; } .t-budvar .bv-nav-toggle:hover, .t-budvar .bv-nav-toggle[aria-expanded="true"] { color: var(--brand-dark); } .t-budvar .bv-nav-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .t-budvar .bv-nav-toggle-icon { width: 1.75rem; height: 1.75rem; } .t-budvar .bv-nav-toggle-icon--close, .t-budvar .bv-nav-toggle[aria-expanded="true"] .bv-nav-toggle-icon--open { display: none; } .t-budvar .bv-nav-toggle[aria-expanded="true"] .bv-nav-toggle-icon--close { display: block; } /* Sbalená navigace (nav.js dává data-collapsible, otevřená má data-open): vlastní řádek pod logem od kraje ke kraji, odkazy pod sebou jako dotykové řádky, bez rostoucí linky — ta patří k řádku vedle loga. */ .t-budvar .bv-nav[data-collapsible] { flex: 0 0 calc(100% + 3rem); flex-direction: column; align-items: stretch; gap: 0; margin: 0.25rem -1.5rem -0.5rem; padding: 0.25rem 0 0.5rem; border-top: 1px solid rgba(195, 159, 86, 0.35); } .t-budvar .bv-nav[data-collapsible]:not([data-open]) { display: none; } .t-budvar .bv-nav[data-collapsible] a { display: block; padding: 0.875rem 1.5rem; font-size: 1.125rem; line-height: 1.2; } .t-budvar .bv-nav[data-collapsible] a::after { display: none; } .t-budvar .bv-footer-inner { flex-direction: column; align-items: flex-start; padding: 1.5rem; } /* Logo, copyright a odkaz na ochranu údajů pod sebou (zadání 2026-09-02): v řádku se copyright i odkaz lámaly do tří řádků vedle loga. */ .t-budvar .bv-footer-brand { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* =============================================== ROZCESTNÍK — hero pás == * Vlevo obrázek, vpravo červený panel (spec §5/2). Bez JS je track * scroll-snap pás; carousel.js doplní šipky a zvýrazní aktivní tečku. */ .t-budvar .bv-hero { position: relative; } .t-budvar .bv-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .t-budvar .bv-hero-track::-webkit-scrollbar { display: none; } .t-budvar .bv-hero-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; /* Výšku dlaždice určuje POMĚR banneru (964×584 z designu), ne pevná min-height — ta banner ořezávala (object-fit: cover doplňoval výšku ořezem šířky). Panel se středí do výšky obrázku. */ background: var(--brand); /* Odkazem je celá dlaždice — ::after nad nadpisem níž se vztahuje k tomuhle position: relative. */ position: relative; } /* Obal banneru ořezává jeho přiblížení (hover níž) na vlastní buňku — obrázek nikdy nevyjede do panelu s textem. Grid uvnitř: obrázek vyplní i vyšší řádek (dlouhý text v panelu), jako když byl přímým potomkem. */ .t-budvar .bv-hero-media { overflow: hidden; display: grid; } .t-budvar .bv-hero-image { width: 100%; height: 100%; min-height: 0; aspect-ratio: 964 / 584; object-fit: cover; display: block; transform-origin: center; transition: transform 600ms var(--ease-out); } /* Panel podle Figmy (Hero 1:113): 60 px nahoře, 78 px vlevo, 48 px vpravo, 40 px dole, prvky 21 px od sebe; nadpis Futura PT Bold 54/64 px, věta Demi 20/24 px (max 620 px), třetí řádek Heavy 20/28 px s prostrkáním −0,6 px (max 598 px). Vodorovné odsazení se na užším okně zmenšuje úměrně (78 px z 1920 = 4,06 vw). */ .t-budvar .bv-hero-panel { display: flex; flex-direction: column; justify-content: center; gap: 1.3125rem; padding: 3.75rem clamp(1.5rem, 2.5vw, 3rem) 2.5rem clamp(1.5rem, 4.06vw, 4.875rem); color: var(--cream); } .t-budvar .bv-hero-title { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.375rem); line-height: 1.185; text-transform: uppercase; margin: 0; } .t-budvar .bv-hero-title a { color: #FFFFFF; text-decoration: none; } .t-budvar .bv-hero-title a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; transition: text-decoration-color var(--t-fast) ease; } .t-budvar .bv-hero-title a:hover { text-decoration-color: currentColor; } /* Celá dlaždice je klikací přes ::after nad nadpisem — stejný vzor jako karta (.bv-card-title a::after). Bez z-indexu: tečky a šipky carouselu jsou v DOM až za trackem, takže zůstávají nahoře a klikací. */ .t-budvar .bv-hero-title a::after { content: ''; position: absolute; inset: 0; } .t-budvar .bv-hero-slide:has(.bv-hero-title a:focus-visible) { outline: 3px solid var(--cream); outline-offset: -4px; } .t-budvar .bv-hero-title a:focus-visible { outline: none; } /* Hover dlaždice: banner se zvolna přiblíží (zadání 2026-08-26), nadpis dostane podtržení (pravidlo výš — ::after přenáší hover na odkaz). */ @media (hover: hover) and (pointer: fine) { .t-budvar .bv-hero-slide:hover .bv-hero-image { transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .t-budvar .bv-hero-image { transition: none; } .t-budvar .bv-hero-slide:hover .bv-hero-image { transform: none; } } .t-budvar .bv-hero-text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; max-width: 38.75rem; } /* Třetí řádek je v designu tučný (Futura PT Heavy — u Adobe 700, ne 800) — nese termín a místo konání. */ .t-budvar .bv-hero-note { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.03em; max-width: 37.375rem; } /* Tečky sedí uvnitř panelu vlevo dole, ne pod pásem. */ .t-budvar .bv-hero .carousel-dots { position: absolute; left: calc(50% + clamp(1.5rem, 4.06vw, 4.875rem)); /* Figma: tečky 70 px nad spodní hranou panelu (40 px odsazení + 30 px rámu Frame 1746), 11 px velké, 11 px od sebe. */ bottom: 4.375rem; display: flex; gap: 0.7rem; } .t-budvar .bv-hero .carousel-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; /* Figma Frame 1746: neaktivní tečky zlaté (Ellipse 10/11 #C39F58), aktivní BÍLÁ (Ellipse 9) — zadání 2026-08-27 „podle Figmy". */ background: var(--gold); display: block; } .t-budvar .bv-hero .carousel-dot.is-active { background: #FFFFFF; } .t-budvar .bv-hero .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); /* Figma _Button core 6:521 u hrany pásu, svisle na střed — komponenta měří 82×84, míněná je jako ČTVEREC 84 px (zadání 2026-08-27); ikona Font Awesome arrow-right ~25 px bílá. Design kreslí jen pravou šipku, levá ji zrcadlí (zadání 2026-08-27 „na obou stranách"). carousel.js do tlačítka píše glyf „→"/„←" — ten se schová (font-size 0) a ikonu kreslí SVG na pozadí (data: URI je v img-src povolená; aria-label z core zůstává). */ width: 5.25rem; height: 5.25rem; border: 0; /* base.css dělá ze šipky kruh se stínem — design má plochý čtverec. */ border-radius: 0; box-shadow: none; padding: 0; background: var(--brand-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h16.5M13 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat; color: transparent; font-size: 0; cursor: pointer; } .t-budvar .bv-hero .carousel-arrow--prev { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 12H4M11 5.5L4.5 12l6.5 6.5' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .t-budvar .bv-hero .carousel-arrow--next { right: 0; } .t-budvar .bv-hero .carousel-arrow:hover { background-color: #5F0F17; } /* Figma Frame 104 (6:511): 50 px nad i pod tlačítkem; tlačítko je větší varianta _Button core — 316×86 px, text 25,4 px. */ .t-budvar .bv-hero-cta { text-align: center; margin: 3.125rem 0; } .t-budvar .bv-hero-cta .bv-btn { min-width: 19.75rem; font-size: 1.5875rem; padding: 1.76875rem 2.6875rem; } .t-budvar .bv-empty { text-align: center; padding: 4rem 1.5rem; } .t-budvar .bv-empty-title { font-family: var(--font-display-bold); font-weight: 700; font-size: 1.3rem; color: var(--brand-dark); } /* ============================================ ROZCESTNÍK — newsletter == * Podle Figmy (NWL 1:171, soubor Budvar rozcestnik): červený pruh 60 px * nahoře i dole, nadpis 40 px, věta 20 px, obojí 44 px od sebe; formulář * je karta 900 px široká ve STEJNÉ červené jako pruh, oddělená jen měkkým * stínem (10/10/40 px, 10 % černé), 40 px svisle, obsah 800 px, tlačítko * 230×63 px. Pole, popisek a souhlas sedí ve Figmě NWL jinak než v soutěžním * formuláři (pole 50 px, popisek Demi 20 px, věta 5 px pod polem) — zadání * 2026-08-26 chce obojí sjednotit podle soutěžního formuláře, proto tyhle * prvky jedou na společných metrikách (blok „formuláře na červeném pruhu"). * Design nemá zaškrtávátko — souhlas je jen věta pod polem e-mailu * (site.newsletter.consentCheckbox: false v theme-budvar.neon, core v0.5.0; * core ji vykreslí jako

uvnitř řádku pole). */ .t-budvar .bv-newsletter { background: var(--brand); color: var(--cream); padding: 3.75rem 1.5rem; } .t-budvar .bv-newsletter-inner { max-width: 56.25rem; margin-inline: auto; text-align: center; } .t-budvar .bv-newsletter-title { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.24; letter-spacing: 0.035em; text-transform: uppercase; color: var(--cream); margin: 0 0 2.75rem; } .t-budvar .bv-newsletter-text { margin: 0 0 2.75rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: #FFFFFF; } .t-budvar .bv-newsletter-form { background: var(--brand); box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); padding: 2.5rem clamp(1.25rem, 4vw, 3.125rem); max-width: 56.25rem; margin-inline: auto; text-align: left; } /* Base.css skládá .newsletter-form jako mřížku „pole + tlačítko vedle sebe" — design Budvaru má všechno POD SEBOU, takže zpět na blok. */ .t-budvar .bv-newsletter-form form.newsletter-form { display: block; } /* Popisek, pole, řádky, zaškrtávátko i tlačítko jedou na SPOLEČNÝCH metrikách soutěžního formuláře — blok „formuláře na červeném pruhu" níž. */ /* Jediné pole je povinné — hvězdička by byla proti designu jen šum. */ .t-budvar .bv-newsletter-form .form-row.required > label::after { content: none; } /* Věta souhlasu pod polem (Figma NWL: 5 px pod polem, bílá, menší než popisek). */ .t-budvar .bv-newsletter-form .form-consent { margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: 0.9375rem; line-height: 1.3; color: #FFFFFF; } .t-budvar .bv-newsletter-form .form-consent a { color: inherit; text-decoration: underline; } /* Tlačítko centruje jeho řádek — input[type=submit] má vnitřní šířku a auto marginy na něm nestačí přes wrapper formuláře. */ .t-budvar .bv-newsletter-form .form-row:has(input[type="submit"]), .t-budvar .bv-newsletter-form .form-row:has(button[type="submit"]) { text-align: center; } /* ================================================= ROZCESTNÍK — karty == * Obrázek vlevo, tělo vpravo, CTA přesahuje spodní hranu karty. */ /* Figma (1:117): 60 px nad nadpisem, karty 420 px od sebe (350 + přesah CTA 26 + 44 mezera), „Zobrazit všechny" 44 px pod poslední kartou, 50 px do patičky. */ .t-budvar .bv-ended { padding: 3.75rem 0 3.125rem; } .t-budvar .bv-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.375rem; } .t-budvar .bv-card { position: relative; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; box-shadow: 0 2px 18px rgba(69, 69, 69, 0.08); } /* Pevný poměr stran podle designu (1296×350 karta, obrázek 659 široký) — bez něj by výšku karty určoval banner v původním poměru a tělo by za ním zůstalo s velkou prázdnou plochou. */ .t-budvar .bv-card-image { width: 100%; height: 100%; aspect-ratio: 659 / 350; object-fit: cover; display: block; } /* Tělo karty podle Figmy (Frame 99, 2:348): 30 px shora, 30 px od obrázku, 20 px zprava, prvky 15 px od sebe; nadpis Futura PT Bold 32/36 px, text Demi 20/24 px, třetí řádek Heavy 20/28 px; logo partnera 116×58 px 16 px od spodní hrany — spodní odsazení mu nechává místo. */ .t-budvar .bv-card-body { position: relative; padding: 1.875rem 1.25rem 5.625rem 1.875rem; display: flex; flex-direction: column; gap: 0.9375rem; } .t-budvar .bv-card-title { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.05vw, 2rem); line-height: 1.125; text-transform: uppercase; color: var(--brand); margin: 0; } /* Celá karta je klikací přes ::after nad nadpisem; CTA níž zůstává samostatným cílem, protože leží VÝŠ v z-indexu. */ .t-budvar .bv-card-title a { color: inherit; text-decoration: none; } .t-budvar .bv-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .t-budvar .bv-card:has(.bv-card-title a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; } .t-budvar .bv-card-text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; } .t-budvar .bv-card-note { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.03em; color: var(--gold); } .t-budvar .bv-card-partner { position: absolute; right: 1.25rem; bottom: 1rem; max-height: 3.625rem; width: auto; } /* CTA přesahuje spodní hranu karty, zarovnané na rozhraní obrázku a těla. */ .t-budvar .bv-card-cta { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 2; /* Figma 2:340: 20 px svisle, 40 px vodorovně, text 20 px → 60 px. */ min-width: 0; padding: 1.125rem 2.5rem; white-space: nowrap; } .t-budvar .bv-ended-more { text-align: center; margin: 4.375rem 0 0; } /* Stránky s kartami (archiv, aktuální soutěže): CTA přesahuje spodní hranu karty o půl své výšky — bez odsazení dole vjíždí do patičky (zadání 2026-08-26); stejných 5 rem jako .bv-ended. */ .t-budvar .bv-card-page { padding-bottom: 5rem; } .t-budvar .bv-page-intro { padding: 3rem 1.5rem 1rem; } @media (max-width: 60rem) { .t-budvar .bv-hero-slide { grid-template-columns: 1fr; min-height: 0; } .t-budvar .bv-hero-image { max-height: 16rem; } .t-budvar .bv-hero .carousel-dots { left: clamp(1.5rem, 4vw, 4rem); bottom: 1.5rem; } .t-budvar .bv-card { grid-template-columns: 1fr; } .t-budvar .bv-card-image { max-height: 14rem; } /* Logo partnera pod textem vlevo, zarovnané s textem karty (zadání 2026-09-02) — vpravo dole má smysl jen vedle obrázku na desktopu. */ .t-budvar .bv-card-partner { position: static; margin-top: 0.5rem; align-self: flex-start; } } /* ============================================ STRÁNKA SOUTĚŽE — cover == * Jeden banner přes celou šířku okna. Je to odkaz, takže musí být block, * jinak by kolem obrázku zůstal inline řádkový proklad. */ .t-budvar .bv-cover { display: block; } .t-budvar .bv-cover-image { display: block; width: 100%; height: auto; } .t-budvar a.bv-cover:focus-visible { outline: 4px solid var(--brand-dark); outline-offset: -4px; } /* Cover nemá hover (zadání 2026-08-27): tlačítko „Chci soutěžit" je součástí obrázku a jakýkoli efekt (přiblížení, tint, zlaté okraje) tu rušil. Odkaz zůstává — celý banner vede na registraci — a klávesnice má outline výš. */ /* --------------------------------------------- nadpis a text pod coverem -- */ /* Figma (43:2979–2983): sekce 40 px nad a 40 + 24 px pod textem, nadpis Futura PT Extra Bold 65,2/71,8 px bez prostrkání (max 1129 px), 30 px pod ním věta Barlow Regular 24/25,5 px s prostrkáním 1,4 px (max 826 px). */ .t-budvar .bv-intro { text-align: center; padding: 2.5rem 1.5rem 4rem; } /* Nadpis soutěže je VÝRAZNĚ větší než nadpisy sekcí (design) a láme se na dva řádky — proto vlastní velikost a max-width místo sdílené .bv-section-title clamp. */ .t-budvar .bv-intro .bv-section-title { /* Extra Bold žije v hlavní rodině — .bv-section-title míří na rodinu Bold, která má jediný řez a váhu 800 by ignorovala. */ font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 3.4vw, 4.077rem); line-height: 1.1; letter-spacing: 0; max-width: 70.5rem; margin: 0 auto 1.875rem; } .t-budvar .bv-intro-text { max-width: 51.625rem; margin: 0 auto; font-size: 1.5rem; line-height: 1.0625; letter-spacing: 0.0583em; } /* ------------------------------------------------ mechanika Jak vyhrát -- */ /* Figma (19:1060–1064): nadpis 84,5 px pod koncem úvodu, kroky 59 px pod nadpisem (44 z nadpisu + 15), sloupce 90 px od sebe v šířce 940 px; šedý pruh 79 px pod kroky, CTA 59 px pod pruhem, 84,5 px do sekce Výhry. */ .t-budvar .bv-steps { padding: 5.25rem 1.5rem 0; } .t-budvar .bv-step-grid { list-style: none; margin: 0.9375rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 5.625rem; max-width: 58.75rem; margin-inline: auto; } .t-budvar .bv-step { position: relative; text-align: center; } /* Zlaté kolečko s pořadovým číslem sedí vlevo nahoře nad grafikou. */ .t-budvar .bv-step-number { position: absolute; top: -0.25rem; left: 50%; /* Kolečko 76 px s číslem ~40 px sedí vlevo nad grafikou (Frame 29 v designu, x −66 od artu). */ transform: translateX(-7.5rem); width: 4.75rem; height: 4.75rem; border-radius: 50%; background: var(--gold); color: #FFFFFF; font-family: var(--font-display); /* Figma (19:1093 Frame 29): číslo je Futura PT Heavy — u Adobe 700. */ font-weight: 700; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; z-index: 1; } .t-budvar .bv-step-art { display: flex; align-items: flex-end; justify-content: center; height: 9.5rem; margin-bottom: 0; } .t-budvar .bv-step-image { max-height: 9.5rem; width: auto; } .t-budvar .bv-step-icon { width: auto; height: 6.7rem; color: var(--brand); } /* Figma (19:1093–1096): nadpis kroku Futura PT Bold 28/34,5 px s prostrkáním 1,4 px hned pod grafikou, text Barlow Regular 17/25,5 px s prostrkáním 1,4 px. */ .t-budvar .bv-step-title { font-family: var(--font-display-bold); font-weight: 700; font-weight: 700; font-size: 1.75rem; line-height: 1.232; letter-spacing: 0.05em; color: var(--brand); margin: 0; } .t-budvar .bv-step-text { margin: 0; font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0.082em; color: var(--text); } /* -------------------------------------- šedý pruh pod mechanikou -------- * Podle Figmy (Frame 1, 19:1116): pruh OBEPÍNÁ obsah — 50 px po stranách, * mezera 20 px, výška 109 px, text Futura PT Book 20 px s prostrkáním * 1,4 px, logo 141×41 — místo pruhu roztaženého na šířku sloupce (zadání * 2026-08-26). Na úzkém displeji se zúží na dostupnou šířku a zalomí. * Design má „ve všech hypermarketech" tučně (Heavy) — věta je jedno textové * pole administrace, takže jde celá v jednom řezu. */ .t-budvar .bv-mechanics-note { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; background: var(--surface-muted); width: fit-content; max-width: 100%; min-height: 6.8125rem; padding: 1rem 3.125rem; margin: 4.9375rem auto 0; } .t-budvar .bv-mechanics-text { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.275; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); text-align: center; } .t-budvar .bv-mechanics-logo { height: 2.5625rem; width: auto; display: block; } .t-budvar .bv-cta-row { text-align: center; margin: 3.6875rem 0 0; } /* -------------------------------------------------------------- výhry -- */ .t-budvar .bv-prizes { display: block; margin-top: 5.25rem; } .t-budvar .bv-prizes-image { display: block; width: 100%; height: auto; } /* Rezervace místa před načtením coveru a banneru výher (SEO/CLS audit 2026-09-02): poměr stran z předepsaných exportů (theme-budvar.neon), `auto` znamená, že po načtení vyhrává skutečný poměr obrázku. Mobilní varianty sedí na v Contest/@page.latte. */ .t-budvar .bv-cover-image { aspect-ratio: auto 2880 / 1199; } .t-budvar .bv-prizes-image { aspect-ratio: auto 2880 / 837; } @media (max-width: 40rem) { .t-budvar .bv-cover-image { aspect-ratio: auto 750 / 900; } .t-budvar .bv-prizes-image { aspect-ratio: auto 750 / 800; } } /* -------------------------------------------------------- registrace -- */ /* Figma (19:1169–1174): 94 px nad nadpisem, 110 px pod formulářem; sloupec formuláře 504 px a účtenka 489 px s mezerou 179 px (9,3 vw z 1920). */ .t-budvar .bv-registration { background: var(--brand); padding: 5.875rem 0 6.875rem; color: var(--cream); } .t-budvar .bv-registration-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 9.3vw, 11.1875rem); align-items: start; } .t-budvar .bv-registration--closed .bv-registration-inner { grid-template-columns: minmax(0, 1fr); } /* Otevřená registrace bez nahrané vzorové účtenky (banner_receipt je v theme-budvar.neon nepovinný, šablona