/* * tvk-generatepress-child — tretia vizuálna identita portálu Teplice v KOCKE. * GeneratePress 3.6.1 (classic theme, BEZ theme.json — overené v balíku) + GenerateBlocks 2.5.0. * * PRINCÍP: neprekrývame tému !important pravidlami (Kadence/Blocksy varianty to robia inak). * Paleta ide cez natívny GP systém globálnych farieb (generate_settings['global_colors']), * ktoré GP emituje ako :root premenné --contrast, --contrast-2, --contrast-3, --base, * --base-2, --base-3, --accent (overené: inc/css-output.php:255-270, inc/defaults.php:70). * Toto CSS preto len (a) dopĺňa mierku, (b) kreslí vlnový rule, (c) používa GP premenné, * takže po zmene farieb v customizeri sa web mení sám — nie je dualizmus. * * Licencia: GPL-2.0-or-later (vlastný kód tímu). */ /* --------------------------------------------------------------------------- * 0) Tokeny: iba tie, ktoré GP nemá ako global color (vlny, meter, tiene) * Hodnoty sedia na nameranú paletu (docs/VISUAL-PLAN.md). * ------------------------------------------------------------------------- */ :root { --tvk-primary: #0B4A74; --tvk-primary-dark: #08395B; --tvk-primary-deep: #153247; --tvk-accent: #0EA6A6; --tvk-accent-text: #0A6B6C; --tvk-accent-soft: #D6EFEE; --tvk-wave-pale: #C9E6E4; --tvk-ink: #153247; --tvk-muted: #4A5A63; --tvk-rule: #E2E5E4; --tvk-measure: 34rem; /* ~68 znakov — editorial meter, užší ako Kadence/Blocksy */ --tvk-gap: 2.25rem; } /* --------------------------------------------------------------------------- * 1) Typografická hierarchia (GP free má typografiu v customizeri; tu držíme * meter, line-height a drop-cap perexu, čo customizer nerobí) * ------------------------------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .entry-title, h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 700; line-height: 1.2; } /* perex = post_excerpt; na archive aj v článku ako úvodný odsek */ .entry-summary, .entry-content > p:first-of-type { font-size: 1.1875rem; line-height: 1.7; max-width: var(--tvk-measure); color: var(--contrast-2); /* GP global color slug */ } .entry-content p, .entry-summary p { max-width: var(--tvk-measure); } /* metadata: len dátum + rubrika, oddelené tenkou linkou (žiadne badge) */ .entry-meta { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--contrast-3); } .entry-meta a { color: var(--accent); } /* --------------------------------------------------------------------------- * 2) Odkazy — spárané s textom, bez podčiarknutia, tyrkysový underline na hover * (na rozdiel od barbora1 plný underline a barbora2 border-bottom) * ------------------------------------------------------------------------- */ .entry-content a { color: var(--accent); text-decoration: none; background-image: linear-gradient(var(--tvk-accent), var(--tvk-accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .18s ease; } .entry-content a:hover, .entry-content a:focus { background-size: 100% 1px; color: var(--contrast); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* --------------------------------------------------------------------------- * 3) HLAVIČKA — GP free: loga + title + primary menu + widget areas * (header/header-bar-widget). Žiadny builder: identita sa skladá z * customizer volieb + widgetov, preto tu len upratujeme rules a rozostupy. * ------------------------------------------------------------------------- */ .site-header, .inside-header { border-bottom: 1px solid var(--tvk-rule); } .main-title a { color: var(--contrast); letter-spacing: -.03em; } .site-description { color: var(--contrast-3); font-size: .875rem; } /* Logo: originálny pomer, výška fixná, šírka auto — ŽIADNE deformácie */ .site-logo img, .custom-logo { max-height: 48px; width: auto; } .main-navigation a { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; } .main-navigation .current-menu-item > a, .main-navigation a:hover { color: var(--accent); } /* tenká tyrkysová linka pod aktívnou položkou (jediná „výzdoba“ hlavičky) */ .main-navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--tvk-accent); } /* --------------------------------------------------------------------------- * 4) MOTÍV VĹN — tretia realizácia: jeden tenký „waterline“ rule (1 perióda), * používany LEN dvakrát: pod hero a pred patičkou. Žiadne výplne, žiadne * gradienty, žiadne bloky obrázkov. (b1 = tenká čiarka repeat-x, * b2 = plná vlnová páska, b3 = jeden waterline.) * ------------------------------------------------------------------------- */ .tvk-waterline { display: block; width: 100%; height: 14px; margin: var(--tvk-gap) 0; background-repeat: repeat-x; background-position: left center; background-size: 240px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' aria-hidden='true' focusable='false'%3E%3Cpath d='M0 7h34c20 0 26-6 46-6s26 6 46 6 26-6 46-6 26 6 46 6h22' fill='none' stroke='%23296992' stroke-width='1.25' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E"); } .tvk-waterline--pale { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' aria-hidden='true' focusable='false'%3E%3Cpath d='M0 7h34c20 0 26-6 46-6s26 6 46 6 26-6 46-6 26 6 46 6h22' fill='none' stroke='%23ABCED1' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- * 5) OBSAH bez kariet: flat, oddelené len rules a whitespace * ------------------------------------------------------------------------- */ .inside-article, .wp-block-gb-container { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } .site-content .inside-article { padding: var(--tvk-gap) 0; } /* zoznam článkov (GP excerpt layout) oddelí jemný hairline namiesto boxov */ .blog .site-main > article + article { border-top: 1px solid var(--tvk-rule); } /* GenerateBlocks: grid a container bez dekorácie, len rozostup */ .gb-grid-wrapper { gap: 1.5rem; } .gb-container .gb-inside-container { padding: 0; } /* --------------------------------------------------------------------------- * 6) Buttons — hranaté, primárna modrá, žiadny radius (b1 pills, b2 3 px) * ------------------------------------------------------------------------- */ .wp-block-button__link, .gb-button .gb-button-wrapper a, a.button { background-color: var(--accent); border: 1px solid var(--accent); border-radius: 0; color: #fff; font-weight: 600; padding: .75em 1.4em; } .wp-block-button__link:hover, .gb-button a:hover { background-color: var(--tvk-primary-dark); border-color: var(--tvk-primary-dark); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--accent); border: 1px solid var(--accent); } /* --------------------------------------------------------------------------- * 7) Embed / video (16:9) a komentáre * ------------------------------------------------------------------------- */ .tvk-video-embed__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 860px; } .tvk-video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .tvk-video-embed figcaption { font-size: .8125rem; color: var(--contrast-3); margin-top: .5em; } .comment-list > article, .comment-list > li { border-left: 2px solid var(--tvk-rule); padding-left: 1rem; margin-bottom: 1.5rem; } .comment-awaiting-moderation { color: var(--tvk-accent-text); font-weight: 600; } /* --------------------------------------------------------------------------- * 8) PATIČKA — podklad = GP global color --base-2 (svetlejšia neutrálna), * text --contrast; biely text na tyrkysovej sa nepoužíva (2.53:1) * ------------------------------------------------------------------------- */ .site-footer, .footer-widgets, .copyright-bar { background-color: var(--base-2); color: var(--contrast-2); border-top: 1px solid var(--tvk-rule); font-size: .875rem; } .site-footer a { color: var(--accent); } /* --------------------------------------------------------------------------- * 9) Responzivita — GP breakpointy overené zo zdroja témy: * mobile (max-width:768px), tablet_only (769–1024), desktop (min-width:1025) * (inc/theme-functions.php:358-369 → nepoužívame vlastné 689/999 ako Blocksy) * ------------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --tvk-measure: 100%; } } @media (max-width: 768px) { :root { --tvk-gap: 1.5rem; } .entry-title { font-size: 1.75rem; } .entry-summary, .entry-content > p:first-of-type { font-size: 1.0625rem; } .tvk-waterline { height: 10px; background-size: 160px 10px; } .site-logo img, .custom-logo { max-height: 36px; } .blog .site-main > article + article { border-top-width: 1px; } } @media (prefers-reduced-motion: reduce) { .entry-content a { transition: none; } * { animation-duration: .001ms !important; } } /* =========================================================================== * QA KOLO 1 (worker-06) — parity doplnky pre barbora3, 2026-10-28 UTC * * Kontrast hlavičky tu NIE je chybný na rozdiel od b1/b2: GeneratePress * používa vlastné global_colors tokeny a generuje * .site-header { background-color: var(--base-3); color: var(--contrast) } * .site-header a { color: var(--contrast) } * (dôkaz: inline CSS bežiacej inštalácie, 2026-10-28). --contrast = #153247 * na --base-3 = #FFFFFF → 14,76:1 (AA/AAA). Paletu preto nedefinujeme CSS, * ale cez generate_settings (config/generate-settings.json) — táto vrstva * dopĺňa len to, čo customizer nevie: patičkové widgety, search, mierka. * ========================================================================= */ /* 1) Patička: GP widget areas footer-1..5 / footer-bar (inc/general.php:151-162). Podklad = GP global color --base-2 (#EEF4F7), text --contrast-2 → 12,84:1. */ .site-footer, .footer-widgets, .footer-widget-area, .generate-back-to-top { background-color: var(--base-2); color: var(--contrast-2); } .site-footer .widget .widget-title { color: var(--contrast); font-size: 1rem; } .site-footer .widget a { color: var(--accent); /* #0B4A74 na #EEF4F7 = 5,2:1 → AA */ text-decoration: underline; text-underline-offset: .18em; } .site-footer .widget a:hover { color: var(--contrast); } .site-footer .widget ul { list-style: none; padding-left: 0; } .site-info { border-top: 1px solid var(--tvk-border); font-size: .875rem; } /* 2) Vyhľadávanie (QA1-09): input musí byť čitateľný aj v patičke a nesmie lámať layout na mobile. */ .widget_search form, form.search-form, .widget_blocksearch form { display: flex; gap: .5rem; flex-wrap: wrap; } .widget_search input[type="search"], form.search-form input[type="search"] { flex: 1 1 9rem; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--tvk-border); border-radius: 0; background: var(--base-3); color: var(--contrast); } .widget_search input[type="submit"], form.search-form input[type="submit"], form.search-form button { background: var(--accent); border: 1px solid var(--accent); color: #FFFFFF; /* 5,95:1 */ border-radius: 0; padding: .5rem 1rem; font-weight: 600; } /* 3) Vynechaný focus uvnútra hlavičky (GP kreslí menu cez .main-navigation) */ .main-navigation a:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* 4) Náhľady: GP nepoužíva absolute vnútro, ale poistka pre single, aby waterline a nadpis neprišli o priestor (QA1-06 parita). */ .single .wp-post-image, .page .wp-post-image { width: 100%; height: auto; display: block; } .entry-header { position: relative; z-index: 1; } /* 5) Prístupnosť: preskočný odkaz a dlhé slová (neprelomí layout) */ .screen-reader-text { overflow-wrap: anywhere; } h1, h2, h3, .entry-title, .wp-block-heading { overflow-wrap: break-word; } /* QA1-17 — core oEmbed vkladá priamy