/* Theme Name: Brandideon 2026 Theme URI: https://brandideon.com Author: Brandideon | Michal Halaj Author URI: https://brandideon.com/ Description: Nová identita Brandideon — osť „náskok“. Tailwind (browser CDN) + minimum vlastného CSS. Version: 1.0.0 Text Domain: brandideon2026 */ /* Tu je LEN to, čo sa v Tailwinde spraviť nedá: font, :root farby, typografia, .text-s-bg, .reveal, .bar, .sipka, .bod. Navigácia a rozbaľovacie menu sú v assets/css/header.css. Všetko ostatné (padding, container, karty, tlačidlá) je v Tailwind triedach. */ @import url('https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300;400;500;600;700;800;900&display=swap'); :root { --primary-color: #6BCE10; --two-primry: #BAD6EB; --black-color: #272727; --default-color: #000000a3; --border-radius: 14px; } html, body { margin: 0; padding: 0; background-color: white; color: var(--default-color); overflow-x: hidden; font-family: 'Ysabeau Infant', sans-serif; font-size: 1.05rem; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--primary-color); color: #fff; } /* Typografický rytmus — nadpisy dýchajú, text sa dobre číta. POZOR: sem nepatrí margin ani color. Tailwind CDN dáva utility do @layer, takže tento (nezaradený) súbor by ich prebil a triedy ako mb-[1.5rem] či text-black by na nadpisoch a odstavcoch prestali fungovať. Nulovanie marginov aj a{color} rieši Tailwind preflight sám. */ h1 { line-height: 1.22; letter-spacing: -0.015em; } h2 { line-height: 1.24; letter-spacing: -0.01em; } h3, h4 { line-height: 1.32; } p { line-height: 1.62; } li { line-height: 1.55; } /* ── Podčiarknutie slova (kód značky) ──────────────────────────────── Blok kopíruje reálne písmená, nie celú výšku riadku. Pôvodne mal height:100%, čo pri veľkých nadpisoch prerastalo do textu pod ním a zároveň nechávalo prázdnu plochu nad písmenami. */ span.text-s-bg { z-index: 1; white-space: nowrap; position: relative; padding-left: 0.28em; padding-right: 0.28em; } span.text-s-bg::after { border-radius: 9px; /* Rotácia sa točí okolo stredu — pri origin: left by sa pravý koniec dlhej frázy zdvihol dvojnásobne a odkryl písmená. */ transform: rotate(-1.3deg); clip-path: inset(0 0 0 0); transition: clip-path 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; position: absolute; left: 0; width: 100%; /* Ysabeau Infant: písmená s diakritikou začínajú 0.33em pod hornou hranou riadku a dĺžne končia na 1.34em. Blok kopíruje presne toto — plus rezerva ~0.16em na oboch stranách, ktorú zožerie rotácia na koncoch frázy. */ top: 0.16em; height: 1.36em; content: ''; z-index: -1; } /* Zvýrazňovač sa „prejde“ zľava doprava, keď sa nadpis objaví. Triedu .js pridáva JS v — bez JS je blok rovno viditeľný. */ html.js .reveal:not(.active) span.text-s-bg::after { clip-path: inset(0 100% 0 0); } span.text-s-bg.black::after { background: var(--black-color); } span.text-s-bg.primary::after { background: var(--primary-color); } span.text-s-bg.white-primary::after { background: white; } /* Na mobile sa dlhá fráza musí zalomiť — rotovaný blok by pretiekol z obrazovky. Preto tam highlight kreslíme cez pozadie s box-decoration-break, bez rotácie. */ @media (max-width: 767px) { span.text-s-bg { white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.28em; background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 1.18em; background-position: 0 0.24em; } span.text-s-bg::after { display: none; } span.text-s-bg.black { --hl: var(--black-color); } span.text-s-bg.primary { --hl: var(--primary-color); } span.text-s-bg.white-primary { --hl: #fff; } } /* ── Reveal ─────────────────────────────────────────────────────────── */ .reveal { position: relative; transform: translateY(28px); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.7s ease; } .reveal.active { transform: translateY(0); opacity: 1; } /* ── Pásy náskoku ──────────────────────────────────────────────────── Hlavný kód značky. Pri príchode do obrazovky sa „dobehnú“ zľava. */ .bar { transform-origin: left center; transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1); } html.js .reveal:not(.active) .bar { transform: scaleX(0); } /* ── Šípka v odkazoch na kartách ─────────────────────────────────── */ .sipka { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } article:hover .sipka, a:hover .sipka { transform: translateX(5px); } /* ── Blikajúci bod ──────────────────────────────────────────────────── */ .bod { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary-color); animation: blik 1.6s infinite ease-in-out; } @keyframes blik { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.5; } } /* ── Obsah z editora (the_content) ────────────────────────────────── Články a stránky písané vo WP editore nemajú Tailwind triedy, tak im dáme základný rytmus tu. */ .wp-obsah > * { margin-bottom: 1.2rem; } .wp-obsah h2 { font-size: 1.45rem; color: var(--black-color); font-weight: 300; margin-top: 2.6rem; } .wp-obsah h3 { font-size: 1.2rem; color: var(--black-color); margin-top: 2rem; } .wp-obsah a { color: var(--black-color); font-weight: 600; text-decoration: underline; text-decoration-color: var(--primary-color); text-decoration-thickness: 2px; text-underline-offset: 4px; } .wp-obsah ul { list-style: disc; padding-left: 1.2em; } .wp-obsah ol { list-style: decimal; padding-left: 1.2em; } .wp-obsah li { margin-bottom: 0.4em; } .wp-obsah img { max-width: 100%; height: auto; border-radius: var(--border-radius); } .wp-obsah blockquote { border-left: 2px solid var(--primary-color); padding: 0.2em 0 0.2em 1.3em; font-size: 1.2rem; color: var(--black-color); } @media (min-width: 1024px) { .wp-obsah h2 { font-size: 2.15rem; } .wp-obsah h3 { font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; opacity: 1; transition: none; } html.js .reveal:not(.active) .bar { transform: none; } html.js .reveal:not(.active) span.text-s-bg::after { clip-path: inset(0 0 0 0); } .sipka { transition: none; } }