/* ============================================================ RADIO GROUP · BOLD PREMIUM EDITORIAL ------------------------------------------------------------ Biele plátno na takmer čiernom pozadí (rám 8px / 6px mobil), Archivo variable (display 800 / condensed wdth 72), plné monochromatické plochy, značkové farby len ako bloky. Žiadne gradienty vo výplniach; foto overlay = statická rgba. Animácie výhradne transform + opacity (nikdy filter). ============================================================ */ :root { --bg: #101014; --ink: #111213; --paper: #FFFFFF; --gray: #F2F2F3; --line: rgba(0, 0, 0, .1); --fun: #E60469; --vlna: #E7220E; --inset: 8px; --r-sheet: 18px; --r-card: 24px; --r-photo: 18px; --pad-x: clamp(20px, 4vw, 56px); --gutter: clamp(20px, 2.5vw, 36px); } @media (max-width: 1023.98px) { :root { --inset: 6px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: var(--inset); background: var(--bg); color: var(--ink); font-family: 'Satoshi', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.55; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } h1, h2, h3, p, ul, figure { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ::selection { background: var(--fun); color: #fff; } a:focus-visible, button:focus-visible { outline: 2px solid var(--fun); outline-offset: 3px; } /* sekcie s kotvami nesmú končiť pod fixnou navigáciou */ #radia, #cisla, #case, #kontakt, #znacky, #preco, #tim, #proces, #faq { scroll-margin-top: 84px; } /* ---------- typografické rezy ---------- */ /* Satoshi v ľahkom reze: veľké nadpisy majú tenké, čisté línie */ .display { font-weight: 400; letter-spacing: -0.035em; line-height: 0.95; } .cond { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-variation-settings: 'wdth' 72; font-weight: 700; text-transform: uppercase; } .num { font-variant-numeric: lining-nums tabular-nums; } .microlabel { display: block; font-size: 12px; letter-spacing: .18em; color: rgba(0, 0, 0, .5); margin-bottom: 18px; } .microlabel--light { color: rgba(255, 255, 255, .55); } .sec-title { font-size: clamp(40px, 5.5vw, 92px); letter-spacing: -0.025em; } /* ---------- FOUC guard (duplikát inline pravidiel v ) ---------- */ html.reveal-primed [data-reveal] { opacity: 0; } html.pile-primed #radia .brand-card--fun, html.pile-primed .pile-ghost { visibility: hidden; } /* ---------- LOADER · editorial preloader ---------- */ html.is-loading, html.is-intro { overflow: hidden; } .loader { position: fixed; inset: 0; z-index: 300; background: var(--bg); color: #fff; display: none; will-change: transform; } html.is-loading .loader { display: block; } .loader-mark { position: absolute; top: 26px; left: 32px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; } .loader-mark .rg-mark { width: 26px; height: 26px; } .loader-tag { position: absolute; top: 64px; left: 32px; font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .5); } .loader-count { position: absolute; right: 24px; bottom: 10px; font-weight: 400; line-height: .9; letter-spacing: -0.03em; font-size: clamp(96px, 17vw, 230px); } .loader-pct { color: var(--fun); } .loader-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); } .loader-bar i { position: absolute; inset: 0; background: var(--fun); transform-origin: 0 50%; transform: scaleX(0); } @media (max-width: 1023.98px) { .loader-mark { left: 22px; top: 22px; } .loader-tag { left: 22px; top: 52px; } .loader-count { right: 16px; } } /* ---------- biele plátno + fixný tmavý rám ---------- */ .sheet { position: relative; background: var(--paper); border-radius: var(--r-sheet); overflow: clip; min-height: calc(100svh - 2 * var(--inset)); } .frame { position: fixed; inset: 0; z-index: 120; pointer-events: none; border: var(--inset) solid var(--bg); } .frame::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sheet); box-shadow: 0 0 0 calc(var(--inset) + 12px) var(--bg); } /* ---------- pill ---------- */ /* priehľadný rám aj na plných tlačidlách, aby mali všetky rovnaký box model a v rade sedeli presne na jednej linke */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid transparent; padding: 10px 20px; font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background .35s ease, color .3s ease, border-color .3s ease; } .pill--ink { background: var(--ink); color: #fff; } .pill--ink:hover { background: var(--fun); } .pill--fun { background: var(--fun); color: #fff; } .pill--big { padding: 15px 30px; font-size: 16px; } /* ghost Media kit: ink sa naleje zdola cez pseudo-vrstvu */ .pill--ghost { position: relative; overflow: hidden; border-color: rgba(0, 0, 0, .18); color: var(--ink); isolation: isolate; transition: color .3s ease, border-color .3s ease; } .pill--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .pill--ghost:hover { color: #fff; border-color: var(--ink); } .pill--ghost:hover::before { transform: translateY(0); } /* primárny CTA: šípka je v layoute stále, na hover sa len posunie. Animovanie šírky by menilo rozmer tlačidla a posúvalo navigáciu. */ .nav-right .pill--ink::after { content: "→"; display: inline-block; margin-left: 7px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .nav-right .pill--ink:hover::after { transform: translateX(4px); } /* ---------- navigácia ---------- */ .nav { position: fixed; top: var(--inset); left: var(--inset); right: var(--inset); z-index: 80; background: var(--paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0; } .nav::after { content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .35s ease; } .nav--scrolled::after { opacity: 1; } /* mriežka namiesto space-between: stredný stĺpec je vždy presne v strede bez ohľadu na to, aké široké sú boky */ .nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 15px var(--pad-x); } /* stĺpce pripnuté natvrdo: na mobile je .nav-links skryté a bez tohto by sa .nav-right presunul do prostredného stĺpca */ .nav-bar > .nav-brand { grid-column: 1; justify-self: start; } .nav-links { grid-column: 2; justify-self: center; } .nav-right { grid-column: 3; justify-self: end; } /* ---------- ZNAČKA · logo v navigácii a menu ---------- */ .nav-brand { display: flex; align-items: center; } .brand-lock { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .rg-mark { display: block; width: 30px; height: 30px; flex: none; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } /* Značka sa dotočí o jeden krok ramena, teda o 60°, a ako celok. Rovnaké gesto ako pri nástupe, takže web hovorí jednou rečou. */ .brand-lock:hover .rg-mark, .brand-lock:focus-visible .rg-mark { transform: rotate(60deg); } /* ---------- nástup značky po loaderi ---------- Názov sa vysunie spoza symbolu doprava. Logo sedí vľavo hore, takže opačne než v rohovej ukážke, kde je vpravo dole a názov ide doľava. Šírku otvára grid, preto sa text naozaj odkrýva, nie iba zjavuje. */ .nav-brand .wm-wrap { display: grid; grid-template-columns: 1fr; transition: grid-template-columns .75s cubic-bezier(.16, 1, .3, 1); } .nav-brand .wm-wrap > span { overflow: hidden; min-width: 0; } .nav-brand .wordmark { display: block; white-space: nowrap; transition: opacity .5s ease .12s; } .nav-brand .rg-mark { transition: transform .75s cubic-bezier(.16, 1, .3, 1); } html.brand-primed .nav-brand .wm-wrap { grid-template-columns: 0fr; } html.brand-primed .nav-brand .wordmark { opacity: 0; transition-delay: 0s; } html.brand-primed .nav-brand .rg-mark { transform: rotate(-60deg); } /* ochranná známka pri názve */ .rmark { font-size: .36em; font-weight: 500; vertical-align: super; line-height: 1; letter-spacing: 0; opacity: .45; margin-left: .12em; } .wordmark { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); /* názov nesmie nikdy zalomiť: na úzkom mobile sa lockup rozpadal na dva riadky a vyzeralo to ako dve značky pod sebou */ white-space: nowrap; } .brand-lock { min-width: 0; } .nav-links { display: flex; gap: 32px; } /* hover odkazu: len jedna animácia, podčiarknutie zľava. Roll textu tu bol navyše a s linkou si konkuroval. */ .nl { position: relative; display: inline-block; font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: none; color: rgba(0, 0, 0, .72); transition: color .3s ease; --e: cubic-bezier(.2, .8, .2, 1); } .nl::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--fun); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--e); } .nl:hover, .nl:focus-visible { color: var(--ink); } .nl:hover::after, .nl:focus-visible::after { transform: scaleX(1); transform-origin: left; } .nav-right { display: flex; align-items: center; gap: 12px; } /* ---------- prepínač jazyka ---------- Bez rámčeka a bez výplne: dva kódy oddelené vlasovou čiarou. Vedľa čierneho tlačidla má byť ticho, preto nesie váhu len aktívny kód. Sadá na typografiu navigácie, nie na tvaroslovie tlačidiel. */ .lang { display: inline-flex; align-items: center; gap: 9px; margin-right: 14px; } .lang-b { appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 1px; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 1; color: rgba(0, 0, 0, .34); transition: color .3s ease; } .lang-b:hover { color: rgba(0, 0, 0, .68); } .lang-b.is-on { color: var(--ink); } /* obrys len pri ovládaní klávesnicou, aby po kliknutí myšou neostával krúžok okolo kódu */ .lang-b:focus { outline: none; } .lang-b:focus-visible { outline: 2px solid var(--fun); outline-offset: 3px; border-radius: 3px; } .lang-sep { width: 1px; height: 11px; background: rgba(0, 0, 0, .16); } /* mobilné menu stojí na svetlom papieri, takže platia tie isté tóny ako v hlavičke, len o kúsok väčšie kvôli dosahu prsta */ /* prepínač drží pravý okraj pätky, mail ostáva vľavo */ .lang--menu { margin: 0 0 0 auto; } .lang--menu .lang-b { font-size: 14px; padding: 8px 2px; } .lang--menu .lang-sep { height: 13px; } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; align-items: center; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); } /* ---------- fullscreen menu (mobil) · maskované vylistovanie ---------- Panel sa spustí zhora, položky vybehnú z masiek so stupňovaním. Iba transform a opacity, žiadne prepínanie display (to skákalo). */ .menu { position: fixed; inset: 0; z-index: 110; background: var(--paper); display: flex; flex-direction: column; padding: calc(var(--inset) + 14px) calc(var(--inset) + 18px) calc(var(--inset) + 28px); visibility: hidden; transform: translateY(-100%); transition: transform .62s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .62s; } body.menu-open .menu { visibility: visible; transform: none; transition: transform .62s cubic-bezier(.16, 1, .3, 1), visibility 0s; } body.menu-open { overflow: hidden; } .menu-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; } .menu-close { width: 44px; height: 44px; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease .18s; } body.menu-open .menu-close { opacity: 1; } .menu-links { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; } /* maska: položka vybehne zospodu, orez drží čistú hranu */ .ml-mask { display: block; overflow: hidden; padding-bottom: .06em; } .ml-mask > * { display: block; transform: translateY(110%); opacity: 0; transition: transform .66s cubic-bezier(.16, 1, .3, 1), opacity .4s ease; } body.menu-open .ml-mask > * { transform: none; opacity: 1; } body.menu-open .menu-links .ml-mask:nth-child(1) > * { transition-delay: .16s; } body.menu-open .menu-links .ml-mask:nth-child(2) > * { transition-delay: .22s; } body.menu-open .menu-links .ml-mask:nth-child(3) > * { transition-delay: .28s; } body.menu-open .menu-links .ml-mask:nth-child(4) > * { transition-delay: .34s; } body.menu-open .menu-links .ml-mask:nth-child(5) > * { transition-delay: .40s; } body.menu-open .menu-foot .ml-mask:nth-child(1) > * { transition-delay: .48s; } body.menu-open .menu-foot .ml-mask:nth-child(2) > * { transition-delay: .54s; } .menu-links a { font-weight: 400; letter-spacing: -0.035em; line-height: 1.06; font-size: clamp(38px, 11vw, 62px); text-decoration: none; color: var(--ink); } .menu-foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 18px; border-top: 1px solid var(--line); } .menu-foot .ml-mask > .pill { display: inline-flex; } .menu-alt { font-size: 13.5px; font-weight: 600; color: rgba(0, 0, 0, .6); text-decoration: none; white-space: nowrap; } .menu-foot .pill--big { padding: 14px 24px; font-size: 15px; } .menu-top .mark-sign i { width: 12px; height: 12px; } /* ---------- HERO ---------- */ .hero { position: relative; } .hero-pin { min-height: 100svh; } .hero-head { text-align: center; padding: clamp(110px, 17svh, 190px) var(--pad-x) clamp(44px, 7svh, 80px); will-change: transform; } .hero-title { font-size: clamp(64px, 11vw, 170px); color: var(--ink); } .hero-title .plus { color: var(--fun); } /* maskované riadky pre intro po loaderi (padding kryje spodný ťah "g") */ .hero-title .hl { display: block; /* clip drží čistú hranu pri intro animácii; extra spodný priestor (a záporný margin, čo ho vyruší v layoute) necháva dosadnúť spodné ťahy písmen ako "g", "j", "p" */ overflow: clip; overflow-clip-margin: 0.3em; padding-bottom: .3em; margin-bottom: -.3em; } .hero-title .hl-in { display: inline-block; will-change: transform; } .hero-sub { max-width: 620px; margin: 28px auto 0; font-size: 17px; color: rgba(0, 0, 0, .68); } .hero-cta { margin-top: 30px; } /* ---------- RÁDIÁ · značkové karty ---------- */ .radia { padding: var(--gutter); display: flex; flex-direction: column; gap: 28px; } /* HERO SCÉNA (aktivuje rg.js na desktope): animuje sa LEN prvá karta. Fun je full-bleed blok 100svh hneď za hero; scrub ju vytiahne z kopy a prekryje ňou celú obrazovku (radius 24 → 0). Vlna a Digital sú obyčajné karty v toku pod ňou, bez animácie. Kopu na štarte dopĺňajú dekoratívne "duchovia" (červená a čierna platňa), ktoré sa pri vyťahovaní stratia. */ html.stage-on .hero-pin { height: 100svh; min-height: 0; } html.stage-on .radia { position: relative; padding: var(--gutter) 0; } html.stage-on .brand-card { margin: 0 var(--gutter); } html.stage-on .brand-card--fun { position: relative; z-index: 2; will-change: transform; } .pile-ghost { display: none; } html.stage-on .pile-ghost { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: var(--gutter); height: 70vh; border-radius: var(--r-card); z-index: 1; will-change: transform; } .pile-ghost--vlna { background: var(--vlna); } .pile-ghost--digital { background: var(--ink); } .brand-card { position: relative; border-radius: var(--r-card); padding: clamp(32px, 5vw, 56px); min-height: 72vh; color: #fff; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); will-change: transform; } .brand-card--fun { background: var(--fun); z-index: 3; } .brand-card--vlna { background: var(--vlna); z-index: 2; } .brand-card--digital { background: var(--ink); z-index: 1; } .brand-card--vlna .bc-photo { order: -1; } .bc-copy { display: flex; flex-direction: column; min-width: 0; } .bc-label { font-size: 12px; letter-spacing: .18em; opacity: .8; } .bc-title { font-size: clamp(48px, 6.5vw, 104px); margin-top: 14px; } .bc-tag { margin-top: 16px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; opacity: .94; } .bc-stats { margin-top: auto; padding-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .bc-num { display: block; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-size: clamp(24px, 2.4vw, 38px); } .bc-cap { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; opacity: .75; } .bc-link { margin-top: 30px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; } .bc-link .ar { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .bc-link:hover .ar { transform: translateX(5px); } .bc-photo { position: relative; border-radius: var(--r-photo); /* prepíše tvarová trieda .masked--* */ overflow: hidden; min-height: 320px; } .bc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Bauhaus masky na fotkách kariet: tvar robí sama fotka. Kompozíciu držíme tak, aby oblúk ani kvapka nerezali tváre. */ .bc-photo--zvon { border-radius: 999px 999px 24px 24px; max-width: 520px; margin: 0 auto; width: 100%; } .bc-photo--zvon img { object-position: center 78%; transform: scale(1.06); } .bc-photo--kvapka { border-radius: 50% 0 50% 50%; max-width: 520px; margin: 0 auto; width: 100%; } .bc-photo--kvapka img { object-position: 58% 30%; } /* plný kruh za telefónmi na tmavej karte */ .bc-orb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(96%, 460px); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--fun); } .bc-phones { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } /* ---------- Fun rádio prehrávač · interaktívny mockup ---------- Telefón postavený v CSS, vnútri hrá ukážka programu: beží čas, ukazovateľ aj ekvalizér, play a preskakovanie fungujú. Fun rádio farebnosť: magenta akcent na tmavom navy skle. */ /* Rám telefónu je jemne svetlejší než karta pod ním. Čierne telo na čiernom podklade splývalo, takže z mockupu nebolo vidieť zariadenie, len plávajúcu obrazovku. Svetlý prstenec navyše chytá svetlo ako kovový okraj skutočného telefónu. */ .fone { position: relative; z-index: 1; width: min(72%, 292px); padding: 11px; border-radius: 44px; background: linear-gradient(150deg, #6E7280 0%, #3A3E4A 46%, #24262F 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 34px 70px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .34); transform: rotate(-2deg); } .fone-screen { display: flex; flex-direction: column; gap: 13px; padding: 12px 16px 22px; border-radius: 35px; background: linear-gradient(170deg, #1B1E48 0%, #0B0E2B 62%); overflow: hidden; } .fone-notch { width: 84px; height: 22px; margin: 0 auto 2px; border-radius: 999px; background: #000; } .fone-top { display: flex; align-items: center; justify-content: space-between; } .fone-logo { height: 22px; width: auto; } .fone-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .fone-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--fun); animation: liveblink 1.6s ease-in-out infinite; } @keyframes liveblink { 50% { opacity: .35; } } .fone-art { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; } .fone-art img { width: 100%; height: 100%; object-fit: cover; } /* ekvalizér v rohu obalu: hrá, kým hrá prehrávač */ .fone-eq { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 3px; height: 26px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, .5); } .fone-eq i { width: 3px; border-radius: 2px; background: var(--fun); height: 100%; transform-origin: 50% 100%; animation: eqbar 1.1s ease-in-out infinite; } .fone-eq i:nth-child(1) { animation-delay: 0s; } .fone-eq i:nth-child(2) { animation-delay: .28s; animation-duration: .9s; } .fone-eq i:nth-child(3) { animation-delay: .12s; animation-duration: 1.3s; } .fone-eq i:nth-child(4) { animation-delay: .4s; } @keyframes eqbar { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } } .fone.is-paused .fone-eq i, .fone.is-paused .fone-live i { animation-play-state: paused; } .fone-meta b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fone-meta span { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } .fone-bar { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; } .fone-bar i { display: block; height: 100%; border-radius: 999px; background: var(--fun); transition: width 1s linear; } .fone-time { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: rgba(255, 255, 255, .45); } .fone-ctrl { display: flex; align-items: center; justify-content: center; gap: 26px; } .fone-btn { display: grid; place-items: center; width: 36px; height: 36px; color: rgba(255, 255, 255, .82); transition: color .3s ease; } .fone-btn:hover { color: #fff; } .fone-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #0B0E2B; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .fone-play:hover { transform: scale(1.06); } .bc-live { display: none; margin-top: 24px; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; } html.zive-live .bc-live { display: inline-flex; flex-wrap: wrap; } .bc-chip { font-size: 11px; letter-spacing: .16em; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 12px; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fun); display: inline-block; flex: none; animation: ldp 1.6s ease-in-out infinite; } .cs-cell--black .live-dot, .brand-card--digital .live-dot { background: var(--fun); } @keyframes ldp { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } } /* ---------- FOTOPÁSY ---------- */ /* ---------- PUBLIKUM · fullscreen galéria ---------- Rovnaká mechanika ako v dizajn systéme: fotky publika sa striedajú, farebné slovo hovorí, kde práve znie reklama klienta. */ .znacky { position: relative; } .pub { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); } /* scéna je väčšia než rám, aby parallax ani náklon neodhalili okraj; perspektíva je na ráme, hĺbka sa počíta voči nemu */ .pub { perspective: 1500px; } .pub-stage { position: absolute; inset: -7%; touch-action: pan-y; transform-style: preserve-3d; will-change: transform; } .pub-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; /* priesvitnosť aj mierku riadi hĺbkový modul, preto tu nie je prechod: dva systémy nad tou istou vlastnosťou by sa bili */ backface-visibility: hidden; /* rovnaký zjednocujúci film ako inde: jedna sada, nie mix zdrojov */ filter: saturate(.9) contrast(1.03) brightness(1.02) sepia(.06); } .pub-img.is-on { opacity: 1; } .pub-img--low { object-position: center bottom; } /* fotka na výšku: v širokom ráme sa orezáva zhora aj zdola, preto ťažisko posúvam vyššie, nech ostane tvár aj loptička v zábere */ .pub-img--tall { object-position: center 55%; } /* ľavý scrim drží kontrast textu nad každou fotkou */ .pub::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .34) 36%, rgba(0, 0, 0, 0) 64%), linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 30%); pointer-events: none; } .pub-copy { position: absolute; left: var(--pad-x); top: clamp(72px, 13svh, 140px); z-index: 2; /* percentá, nie ch: ch by sa rátal zo 17px základu a nadpis by zbytočne zalamoval */ max-width: 54%; } .pub-title { margin-top: 14px; font-size: clamp(30px, 4.2vw, 62px); line-height: 1.02; color: #fff; } /* kde práve znie reklama · farebné slovo, mení sa s fotkou */ .pub-ctx { display: block; margin-top: 6px; font-size: clamp(30px, 4.2vw, 62px); line-height: 1.02; transition: color .5s ease; } /* predajná veta k danej chvíli, mení sa spolu s fotkou */ .pub-note { margin-top: clamp(16px, 2vw, 24px); max-width: 42ch; min-height: 3.2em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .85); } .pub-lead { margin-top: clamp(12px, 1.6vw, 18px); max-width: 42ch; font-size: clamp(13px, 1vw, 15px); line-height: 1.55; color: rgba(255, 255, 255, .55); } .pub-meta { position: absolute; left: var(--pad-x); bottom: clamp(26px, 5svh, 46px); z-index: 2; } .pub-dots { display: none; gap: 9px; } html.pub-ready .pub-dots { display: flex; } .pub-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .38); cursor: pointer; transition: background .3s ease, transform .3s ease; } .pub-dot.is-on { background: #fff; transform: scale(1.25); } .pub-nav { position: absolute; right: var(--pad-x); bottom: clamp(26px, 5svh, 46px); z-index: 2; display: none; gap: 10px; } html.pub-ready .pub-nav { display: flex; } .pub-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; transition: background .3s ease; } .pub-btn:hover { background: rgba(0, 0, 0, .55); } /* ---------- CASE STUDIES · riadok ako odkaz + ukážka pri kurzore ---------- */ .cases { padding: clamp(80px, 10vw, 150px) 0 0; } .cases-head { padding: 0 var(--pad-x) clamp(28px, 3.5vw, 52px); } .case-list { border-top: 1px solid var(--line); } .case-row { border-bottom: 1px solid var(--line); } .case-link { display: flex; align-items: center; gap: 24px; padding: clamp(20px, 3vw, 32px) var(--pad-x); text-decoration: none; color: inherit; cursor: pointer; transition: background .35s ease; } .case-link:hover { background: var(--gray); } .case-name { flex: 1; min-width: 0; font-family: 'Satoshi', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -0.025em; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .case-link:hover .case-name { transform: translateX(8px); } .case-meta { font-size: 14px; color: rgba(0, 0, 0, .55); text-align: right; } .case-ar { flex: none; color: var(--fun); opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .case-link:hover .case-ar { opacity: 1; transform: translateX(0); } /* plávajúca ukážka: sleduje kurzor, morfuje z Bauhaus oblúka na kartu */ .case-peek { position: fixed; top: 0; left: 0; z-index: 90; width: clamp(220px, 21vw, 330px); aspect-ratio: 938 / 452; border-radius: var(--r-card); overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; will-change: transform; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); } .case-peek img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; } @media (max-width: 1023.98px), (hover: none) { .case-peek { display: none; } } /* sekcia kampaní je full-bleed, pätička si preto bočný odstup drží sama */ .cases-foot { padding: clamp(20px, 3vw, 32px) var(--pad-x) 0; } /* ---------- PREČO RÁDIO ---------- */ .why { padding: clamp(80px, 10vw, 150px) var(--pad-x) clamp(40px, 6vw, 80px); } .why-head { margin-bottom: 8px; } .why-item { display: grid; grid-template-columns: 84px 1fr; gap: 24px; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--line); } .why-item:last-child { border-bottom: 1px solid var(--line); } .why-shape { display: inline-block; width: 18px; height: 18px; margin-right: 12px; vertical-align: -2px; background: var(--fun); } .why-shape--vlna { background: var(--vlna); } .why-shape--ink { background: var(--ink); } .why-num { font-size: 14px; letter-spacing: .16em; color: rgba(0, 0, 0, .45); padding-top: 12px; } .why-text { font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(28px, 3.6vw, 56px); max-width: 1100px; } /* ---------- vodoznak · atmosféra v tmavom závere ---------- */ .cta-wm { position: absolute; right: -6%; bottom: -18%; width: min(58vw, 640px); color: #fff; opacity: .05; pointer-events: none; z-index: 0; } .cta-wm .wm-mark { width: 100%; height: auto; display: block; } .cta-dark .cta-inner { position: relative; z-index: 1; } /* malá značka nad výzvou v magenta karte */ .cta-badge { display: block; margin-bottom: 18px; } .cta-badge .rg-mark { width: 40px; height: 40px; } /* ---------- ZÁVER · dve plochy, magenta karta sa vysúva zdola ---------- Tmavá plocha je sticky, magenta karta na ňu nabieha v toku (bez JS). Vrstvenie: .cta-bright má vyšší z-index a vlastný radius, takže pôsobí ako karta vytiahnutá zo spodku obrazovky. */ .cta-stack { position: relative; } .cta-dark { position: sticky; top: 0; z-index: 1; min-height: 100svh; display: flex; align-items: center; background: var(--ink); color: #fff; } .cta-bright { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; background: var(--fun); color: #fff; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: 0 -30px 60px rgba(0, 0, 0, .18); } .cta-inner { width: 100%; padding: clamp(72px, 11vh, 130px) var(--pad-x); } .cta-title { font-size: clamp(40px, 6.4vw, 116px); max-width: 15ch; } .cta-lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 620px; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255, 255, 255, .72); } .cta-micro { color: rgba(255, 255, 255, .7); } .cta-actions { margin-top: clamp(30px, 4vw, 48px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .cta-actions .pill--ink .ar { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .cta-actions .pill--ink:hover .ar { transform: translateX(5px); } .cta-tel { font-weight: 600; font-size: 17px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px; } .cta-proof { display: block; margin-top: 26px; font-size: 11.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .62); } .cta-foot { margin-top: clamp(48px, 9vh, 110px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; font-size: 13.5px; color: rgba(255, 255, 255, .78); } /* v päte stojí celé logo, nie len názov: jednofarebná verzia, kde je play vyrezaný a presvitá cez neho magenta podklad sekcie */ .footer-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .foot-mk { display: block; width: 30px; height: 30px; flex: none; } .footer-mark-w { line-height: 1; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; } .footer-links a { text-decoration: none; transition: opacity .25s ease; } .footer-links a:hover { opacity: .7; } .cta-top { text-decoration: none; font-weight: 600; } .footer-legal { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; color: rgba(255, 255, 255, .6); } .footer-legal a { color: rgba(255, 255, 255, .78); } .footer-note { width: 100%; margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } /* ---------- BAUHAUS ABECEDA · zdieľaná s Fun rádiom a Vlnou ---------- Rovnaké border-radius hodnoty ako v /v3/styles.css, aby všetky tri značky používali ten istý tvarový slovník. Vždy ploché výplne. */ .masked--kruh { border-radius: 50%; } .masked--pill { border-radius: 999px; } .masked--arch { border-radius: 999px 999px 24px 24px; } .masked--archdol { border-radius: 24px 24px 999px 999px; } .masked--list { border-radius: 999px 24px 999px 24px; } .masked--listop { border-radius: 24px 999px 24px 999px; } .masked--kocka { border-radius: 22px; } .masked--drop { border-radius: 50% 0 50% 50%; } /* ---------- DÔVERA · pás značiek, posun viazaný na scroll ---------- */ .trust { padding: clamp(36px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); } .trust .microlabel { margin: 0 var(--pad-x) 22px; } .trust-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .trust-track { display: flex; width: max-content; will-change: transform; } .trust-set { display: flex; align-items: center; gap: clamp(32px, 4vw, 68px); padding-right: clamp(32px, 4vw, 68px); } /* Logá klientov v jednej farbe. Výška je nastavená pre každé zvlášť, nie jednotne: štvorec Orange a blok Satur majú plnú plochu a pri rovnakej výške by prekričali čisté nápisy, kým Opel má pod znakom ešte text, takže potrebuje viac miesta. Ide o optickú veľkosť, nie o veľkosť rámu. */ .trust-logo { display: block; width: auto; flex: none; height: clamp(20px, 2.1vw, 32px); opacity: .42; transition: opacity .3s ease; } .trust-logo:hover { opacity: 1; } .trust-logo--orange { height: clamp(26px, 2.7vw, 42px); } .trust-logo--satur { height: clamp(24px, 2.5vw, 38px); } .trust-logo--opel { height: clamp(33px, 3.5vw, 55px); } .trust-logo--billa { height: clamp(19px, 2vw, 30px); } .trust-logo--mobelix { height: clamp(20px, 2.1vw, 32px); } .trust-logo--citroen { height: clamp(18px, 1.9vw, 29px); } /* ---------- NA STIAHNUTIE · cenníky a podklady ---------- Rovnaká mriežka ako proces: sivé bunky, číslo, titul, popis. Celá bunka je odkaz na PDF, meta riadok dole nesie formát a veľkosť, aby nikto neklikal naslepo. */ /* spodný odstup ako pri FAQ: sekcia hraničí s tmavým záverom, takže si medzeru musí držať sama */ .dl { padding: clamp(80px, 10vw, 150px) var(--pad-x) clamp(72px, 9vw, 140px); } .dl-head { margin-bottom: clamp(32px, 4vw, 56px); } .dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .dl-cell { display: flex; flex-direction: column; background: var(--gray); border-radius: var(--r-card); padding: clamp(20px, 2.2vw, 30px); min-height: 218px; text-decoration: none; color: var(--ink); transition: background .3s ease; } .dl-cell:hover { background: #EAEAEC; } .dl-num { font-size: 11px; letter-spacing: .14em; color: rgba(0, 0, 0, .4); } .dl-title { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; margin: 14px 0 6px; } .dl-text { font-size: 13.5px; line-height: 1.55; color: rgba(0, 0, 0, .55); margin: 0; } .dl-meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; color: rgba(0, 0, 0, .45); transition: color .25s ease; } .dl-meta .cond { font-size: 10.5px; letter-spacing: .12em; } .dl-cell:hover .dl-meta { color: var(--ink); } /* ---------- PROCES · tri kroky ---------- */ .proc { padding: clamp(80px, 10vw, 150px) var(--pad-x) 0; } .proc-head { margin-bottom: clamp(32px, 4vw, 56px); } .proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .proc-cell { background: var(--gray); border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 40px); min-height: 240px; display: flex; flex-direction: column; } .proc-num { font-size: 12px; letter-spacing: .18em; color: rgba(0, 0, 0, .45); } .proc-title { margin-top: auto; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.01em; } .proc-text { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .6); } /* ---------- FAQ · od okraja k okraju, editoriálne riadky ---------- */ .faq { padding: clamp(80px, 10vw, 150px) 0 clamp(72px, 9vw, 140px); } .faq-head { padding: 0 var(--pad-x) clamp(28px, 3.5vw, 52px); } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); transition: background .35s ease; } .faq-item:hover { background: var(--gray); } .faq-item[open] { background: var(--gray); } .faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: clamp(52px, 6vw, 96px) 1fr auto; align-items: center; gap: clamp(12px, 2vw, 28px); padding: clamp(22px, 2.6vw, 40px) var(--pad-x); } .faq-item summary::-webkit-details-marker { display: none; } .faq-n { font-size: 12px; letter-spacing: .18em; color: rgba(0, 0, 0, .4); } .faq-q { font-size: clamp(21px, 2.6vw, 42px); line-height: 1.1; letter-spacing: -0.025em; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .faq-item:hover .faq-q { transform: translateX(6px); } .f-ar { flex: none; font-size: clamp(20px, 2vw, 28px); color: var(--fun); transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .faq-item[open] .f-ar { transform: rotate(90deg); } .faq-a { padding: 0 var(--pad-x) clamp(26px, 3vw, 44px); display: grid; grid-template-columns: clamp(52px, 6vw, 96px) 1fr; gap: clamp(12px, 2vw, 28px); } .faq-a p { grid-column: 2; max-width: 780px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: rgba(0, 0, 0, .62); } .faq-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: clamp(28px, 3.5vw, 52px) var(--pad-x) 0; font-size: clamp(16px, 1.5vw, 20px); color: rgba(0, 0, 0, .6); } .faq-foot .ar { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .faq-foot .pill:hover .ar { transform: translateX(5px); } /* ---------- LEAD FORM v magenta karte ---------- */ .cta-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .cta-person { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; line-height: 1.4; } .cta-person b { font-weight: 700; } .cta-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; filter: grayscale(1); } .cta-alt { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; } .cta-mail, .cta-tel { font-weight: 600; font-size: 16px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px; } .lead-form { background: #fff; color: var(--ink); border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 16px; } .lf-field { display: block; } .lf-label { display: block; font-size: 10.5px; letter-spacing: .16em; color: rgba(0, 0, 0, .5); margin-bottom: 7px; } .lead-form input, .lead-form textarea { width: 100%; border: 0; background: var(--gray); border-radius: 12px; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--ink); resize: vertical; } .lead-form input:focus-visible, .lead-form textarea:focus-visible { outline: 2px solid var(--fun); outline-offset: 1px; } .lf-submit { justify-content: center; margin-top: 4px; } .lf-submit .ar { transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .lf-submit:hover .ar { transform: translateX(5px); } .lf-note { text-align: center; font-size: 12.5px; color: rgba(0, 0, 0, .5); } /* ---------- ŠTATISTICKÉ STĹPY · rastú zospodu, tvaroslovie systému ---------- */ .cisla { padding: clamp(80px, 10vw, 150px) var(--gutter) 0; } .st-head { padding: 0 calc(var(--pad-x) - var(--gutter)) clamp(32px, 4vw, 56px); } .st-lead { max-width: 620px; margin-top: 20px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: rgba(0, 0, 0, .62); } /* tri karty zarovnané na spodnú linku, rozdielne výšky, bez šikmých hrán */ .st-stage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; height: 68vh; min-height: 460px; overflow: hidden; } .st-col { display: flex; flex-direction: column; border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 44px); color: #fff; will-change: transform; } /* výšky sú proporčné k číslam: 1 600 000 / 1 054 000 / 776 000 */ .st-col--ink { height: 100%; background: var(--ink); } .st-col--fun { height: 65.9%; background: var(--fun); } .st-col--vlna { height: 48.5%; background: var(--vlna); } .st-rank { font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .7); } .st-num { margin-top: auto; white-space: nowrap; font-size: clamp(34px, 3.8vw, 76px); line-height: 1; letter-spacing: -0.03em; } .st-cap { margin-top: 12px; font-size: clamp(13px, 1.1vw, 16px); color: rgba(255, 255, 255, .82); } .st-sub { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } /* rad menších čísel v šedých kartách */ .st-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .st-cell { background: var(--gray); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 38px); min-height: 150px; display: flex; flex-direction: column; } .st-mini { display: block; margin-top: auto; font-size: clamp(26px, 2.4vw, 46px); letter-spacing: -0.025em; line-height: 1; } .st-mini-cap { display: block; margin-top: 8px; font-size: 13px; color: rgba(0, 0, 0, .55); } .st-cell--live { display: none; } html.zive-live .st-cell--live { display: flex; } /* ============================================================ MOBIL ============================================================ */ /* ---------- SALES TEAM · Wanda bloky ---------- */ .tim-head { padding: clamp(80px, 10vw, 150px) var(--pad-x) clamp(36px, 5vw, 64px); } .tim-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .tim-lead-txt { max-width: 560px; margin-top: 12px; color: rgba(0, 0, 0, .62); } .ts-nav { display: flex; gap: 10px; flex: none; padding-bottom: 6px; } .ts-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; } .ts-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .ts-btn[disabled] { opacity: .3; pointer-events: none; } /* ---------- SALES TEAM · horizontálny pás s plynulým scrollom ---------- */ .tim-strip { position: relative; margin-top: 2px; padding: 26px 0 40px; } .ts-scroller { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .ts-scroller::-webkit-scrollbar { display: none; } .ts-scroller.is-dragging { cursor: grabbing; } .ts-track { display: flex; gap: 14px; padding: 0 var(--pad-x); width: max-content; } .ts-card { position: relative; flex: none; width: clamp(230px, 21vw, 300px); text-decoration: none; color: inherit; -webkit-user-select: none; user-select: none; } /* editorial rytmus: každá druhá karta je posunutá nižšie */ .ts-card:nth-child(even) { transform: translateY(26px); } .ts-photo { position: relative; border-radius: var(--r-photo); overflow: hidden; aspect-ratio: 3 / 3.6; background: var(--gray); } .ts-photo img { width: 116%; max-width: none; height: 100%; margin-left: -8%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter .5s ease; will-change: transform; -webkit-user-drag: none; } .ts-card:hover .ts-photo img { filter: grayscale(0); } .ts-card figcaption { display: block; padding: 16px 2px 0; } .ts-name { display: block; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.1; } .ts-role { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .5); } .ts-card--join { display: block; } .ts-join-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 100%; aspect-ratio: 3 / 3.6; border-radius: var(--r-photo); background: var(--fun); color: #fff; padding: clamp(20px, 2vw, 30px); } .ts-join { font-size: clamp(22px, 2vw, 32px); line-height: .98; } .ts-role--join { color: rgba(255, 255, 255, .8); margin-top: 10px; } .ts-ar { margin-top: 18px; font-size: 26px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .ts-card--join:hover .ts-ar { transform: translateX(8px); } @media (max-width: 1023.98px) { .nav-links { display: none; } .nav-right .pill { display: none; } /* prepínač jazyka ostáva aj v mobile, ide o hlavnú voľbu návštevníka */ .nav-right .lang { display: none; } .lang--menu { display: inline-flex; } .nav-burger { display: flex; } /* bez stredného stĺpca by dva 1fr rozdelili šírku napoly a lockup by sa orezal; značka tu dostane presne toľko, koľko potrebuje */ .nav-bar { grid-template-columns: max-content 0 1fr; gap: 12px; } .hero-pin { min-height: 0; } .hero-head { padding: clamp(96px, 14svh, 140px) var(--pad-x) 36px; } .hero-sub { font-size: 16px; padding: 0 4px; } .tim-head { flex-direction: column; align-items: flex-start; gap: 20px; } .ts-btn { width: 46px; height: 46px; } .ts-card { width: min(64vw, 260px); } .ts-track { gap: 10px; } .ts-card:nth-child(even) { transform: translateY(16px); } .ts-name { font-size: 15px; } .radia { gap: 18px; } .brand-card { grid-template-columns: 1fr; min-height: 0; padding: 26px 22px; gap: 22px; } .brand-card--vlna .bc-photo { order: 0; } .bc-stats { padding-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .bc-num { font-size: 22px; } .bc-cap { font-size: 12px; } .bc-photo { min-height: 240px; } .bc-phones { min-height: 260px; } .fone { width: min(82%, 260px); } /* galéria publika na mobile: text cez celú šírku, silnejší scrim zhora, lebo tváre bývajú v strede záberu */ .pub { min-height: 520px; } .pub-copy { max-width: none; right: var(--pad-x); top: clamp(56px, 10svh, 92px); } .pub-note, .pub-lead { max-width: none; } .pub::before { background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .3) 100%); } .pub-btn { width: 42px; height: 42px; } .bi-wrap { grid-template-columns: 1fr; } .bi-left { padding-left: 0; padding-right: 0; } .bi-badge { padding-top: 26px; flex-wrap: wrap; gap: 8px; } .bi-grid { flex-direction: column; gap: 8px; min-height: 0; } .bi-col { gap: 8px; } .bi-cell { min-height: 190px; padding: 20px; } .bi-num { font-size: clamp(30px, 8vw, 44px); } .bi-a .bi-num { font-size: clamp(42px, 12vw, 64px); } .bi-cap { font-size: 13px; max-width: none; } .bi-mark { width: 38px; height: 38px; right: 20px; bottom: 20px; } .bi-mark::after { inset: 11px; } /* na mobile pod seba: názov hore, doplnková informácia pod ním menším textom. flex-wrap patril na .case-link (flex kontajner), nie na .case-row (li), preto sa meta predtým len stláčala vpravo. */ .case-link { flex-direction: column; align-items: flex-start; gap: 6px; } .case-name { flex: none; } .case-meta { text-align: left; font-size: 13px; } .case-ar { display: none; } .why-item { grid-template-columns: 1fr; gap: 10px; } .why-shape { display: inline-block; width: 18px; height: 18px; margin-right: 12px; vertical-align: -2px; background: var(--fun); } .why-shape--vlna { background: var(--vlna); } .why-shape--ink { background: var(--ink); } .why-num { padding-top: 0; } .cta-title { font-size: clamp(34px, 9vw, 52px); max-width: none; } .cta-grid { grid-template-columns: 1fr; gap: 28px; } .st-stage { grid-template-columns: 1fr; height: auto; min-height: 0; gap: 8px; } .st-col--ink, .st-col--fun, .st-col--vlna { height: auto; min-height: 220px; } .st-num { font-size: clamp(36px, 10vw, 48px); } .st-row { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; } .st-cell { min-height: 0; } .trust-name { font-size: 19px; } .proc-grid { grid-template-columns: 1fr; gap: 8px; } .dl-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .dl-cell { min-height: 0; } .proc-cell { min-height: 0; } .proc-title { margin-top: 18px; } .cta-lead { font-size: 16px; } .cta-actions { gap: 16px; } .cta-foot { margin-top: 56px; } } /* ============================================================ PLÁVAJÚCA MEDIA KIT KARTA ------------------------------------------------------------ Biely element v pravom dolnom rohu s farebnou „obálkou" PDF. Vyskočí, keď je v zábere sekcia „Prečo rádio", inak sa skryje. ============================================================ */ .mk-pop { position: fixed; right: calc(var(--inset) + clamp(16px, 2.4vw, 30px)); bottom: calc(var(--inset) + clamp(16px, 2.4vw, 30px)); z-index: 70; display: flex; align-items: center; /* väčšie okno (nie fonty): viac paddingu a väčšia obálka */ gap: 26px; padding: 26px 30px; background: var(--fun); border-radius: 22px; /* jemnejší, difúznejší tieň */ box-shadow: 0 22px 50px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .06); text-decoration: none; color: #fff; /* skrytý stav: pod okrajom, bez interakcie */ transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; } .mk-pop.is-shown { transform: translateY(0); opacity: 1; pointer-events: auto; } /* na hover sa karta nedvíha, správa sa ako položka menu */ .mk-pop-body { display: flex; flex-direction: column; gap: 14px; } .mk-pop-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; } .mk-pop-dl { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); transition: color .3s ease; } /* podčiarknutie ako v menu: rastie zľava, ikonka sa nehýbe */ .mk-pop-dl-t { position: relative; display: inline-block; } .mk-pop-dl-t::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.2, .8, .2, 1); } .mk-pop:hover .mk-pop-dl { color: #fff; } .mk-pop:hover .mk-pop-dl-t::after { transform: scaleX(1); transform-origin: left; } /* obálka PDF: čierny blok s plnofarebnou značkou, jemný statický náklon. Väčšia než pôvodne, aby okno narástlo bez zväčšenia fontov. */ /* Obálka dokumentu: značka hore, názov pod ňou, tri linky ako text a rok dole. Naklonená leží ako odložený tlačovina; na prejdenie myšou sa narovná, akoby ju človek zdvihol a otočil k sebe. */ .mk-pop-cover { flex: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 84px; height: 112px; padding: 12px 11px; border-radius: 8px; background: #0E1116; box-shadow: 0 8px 20px rgba(0, 0, 0, .22); transform: rotate(3deg); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; } .mk-pop:hover .mk-pop-cover, .mk-pop:focus-visible .mk-pop-cover { transform: rotate(0deg); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); } .mk-pop-mark { display: block; width: 26px; height: 26px; } .mk-pop-cv-t { font-size: 9.5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: #fff; } /* naznačený text: tri linky rôznej dĺžky, žiadne skutočné písmo */ .mk-pop-cv-lines { display: flex; flex-direction: column; gap: 4px; width: 100%; } .mk-pop-cv-lines i { display: block; height: 1px; background: rgba(255, 255, 255, .22); } .mk-pop-cv-lines i:nth-child(1) { width: 100%; } .mk-pop-cv-lines i:nth-child(2) { width: 82%; } .mk-pop-cv-lines i:nth-child(3) { width: 56%; } .mk-pop-cv-yr { margin-top: auto; font-size: 7.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .4); } @media (max-width: 1023.98px) { .mk-pop { right: calc(var(--inset) + 12px); bottom: calc(var(--inset) + 12px); gap: 14px; padding: 13px 15px; } .mk-pop-title { font-size: 17px; } .mk-pop-cover { width: 50px; height: 66px; } .mk-pop-mark { width: 28px; height: 28px; } } /* ============================================================ REDUCED MOTION · všetko viditeľné a statické ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .live-dot { animation: none; } .pill, .contact-pill, .bc-link .ar, .case-ar { transition: none; } html [data-reveal] { opacity: 1; } .menu, .menu-close, .ml-mask > * { transition: none; } .ml-mask > * { transform: none; opacity: 1; } .mk-pop { transition: opacity .3s ease; } }