/* ============================================================ RADIO GROUP · DIGITAL DESIGN SYSTEM Shared stylesheet for Fun Rádio (/v2/), Rádio Vlna (/vlna/) and Radio Group (/radiogroup/). Themes switch via the data-brand attribute on : "fun" | "vlna" | "rg". All components read colors ONLY from CSS variables. ============================================================ */ /* ---------- 1) TOKENS ---------- */ :root { --font-display: "Inter Tight", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-pill: 999px; --shadow-soft: 0 18px 50px rgba(22, 20, 31, .08); --shadow-lift: 0 10px 30px rgba(22, 20, 31, .10); --ease: cubic-bezier(.22, .9, .24, 1); --glass: rgba(255, 255, 255, .74); --glass-line: rgba(255, 255, 255, .55); --on-brand: #ffffff; --gutter: clamp(20px, 4vw, 40px); --container-w: 1160px; --edge: max(calc((100vw - var(--container-w)) / 2), var(--gutter)); } /* Fun Rádio: young, energetic, magenta on lavender air */ html[data-brand="fun"] { --brand: #E60469; --brand-strong: #C00457; --brand-soft: #FDE7F1; --accent-2: #C9BDF4; --accent-2-soft: #EDE9FB; --accent-3: #9BD1F5; --accent-3-soft: #E7F3FC; --bg: #F6F4FB; --surface: #FFFFFF; --ink: #16141F; --muted: #6E6A7B; --line: #E9E6F2; } /* Rádio Vlna: hits proven by time, warm retro red */ html[data-brand="vlna"] { --brand: #E7220E; --brand-strong: #B81A0B; --brand-soft: #FDE9E6; --accent-2: #F6D256; --accent-2-soft: #FBF3D9; --accent-3: #7FC5E8; --accent-3-soft: #E9F5FB; --bg: #FAF6F0; --surface: #FFFFFF; --ink: #201714; --muted: #7A6F68; --line: #EFE7DD; } /* Radio Group: corporate B2B media house, ink primary */ html[data-brand="rg"] { --brand: #16141F; --brand-strong: #000000; --brand-soft: #ECEBF1; --accent-2: #E60469; --accent-2-soft: #FDE7F1; --accent-3: #E7220E; --accent-3-soft: #FDE9E6; --bg: #F5F5F7; --surface: #FFFFFF; --ink: #16141F; --muted: #6B6B73; --line: #E6E6EA; } /* ---------- 2) BASE ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--brand); color: var(--on-brand); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } [id] { scroll-margin-top: 96px; } /* ---------- 3) TYPOGRAPHY ---------- */ .d1, .d2, .d3, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; } .d1 { font-size: clamp(2.7rem, 6.2vw, 4.5rem); line-height: 1.02; } .d2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); } .d3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); } h3 { font-weight: 600; font-size: 1.15rem; } h4 { font-weight: 600; font-size: .95rem; } .dot { color: var(--brand); } .lead { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 34em; } .lead--narrow { max-width: 24em; } .eyebrow { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .small { font-size: .82rem; color: var(--muted); } .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink); transition: color .3s var(--ease), gap .3s var(--ease); } .link:hover { color: var(--brand); gap: 9px; } .link svg { flex: none; } /* ---------- 4) LAYOUT ---------- */ .container { width: min(var(--container-w), calc(100% - 2 * var(--gutter))); margin-inline: auto; } .section { padding-block: clamp(56px, 8vw, 104px); } .section--tight { padding-block: clamp(36px, 5vw, 64px); } .section--alt { background: var(--surface); border-block: 1px solid var(--line); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 46px); } .section-head .eyebrow { margin-bottom: 12px; } /* ---------- 5) BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; padding: 13px 24px; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .btn svg { flex: none; } .btn--brand { background: var(--brand); color: var(--on-brand); } .btn--brand:hover { background: var(--brand-strong); box-shadow: var(--shadow-lift); } .btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand-strong); box-shadow: var(--shadow-lift); } .btn--soft { background: var(--brand-soft); color: var(--brand-strong); } .btn--soft:hover { background: var(--brand); color: var(--on-brand); } .btn--sm { padding: 10px 18px; font-size: .87rem; } .btn--lg { padding: 16px 30px; font-size: 1rem; } .btn--icon { width: 46px; height: 46px; padding: 0; background: var(--surface); border: 1px solid var(--line); } .btn--icon:hover { border-color: var(--brand); color: var(--brand-strong); box-shadow: var(--shadow-lift); } .icon-circle { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .icon-circle:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .icon-circle--soft { background: var(--glass); border-color: transparent; backdrop-filter: blur(8px); } .icon-circle--brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .icon-circle--brand:hover { background: var(--brand-strong); } /* ---------- 6) CHIPS ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; line-height: 1.3; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; } .chip--soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); } .chip--glass { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(22, 20, 31, .12); color: var(--ink); } .chip--upper { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; } .chip-count { padding-left: 11px; } .live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: blink 1.6s ease-in-out infinite; } .pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); position: relative; } .pulse::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--brand); animation: pulse-ring 1.9s var(--ease) infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes pulse-ring { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.35); opacity: 0; } } /* ---------- 7) AVATAR STACK ---------- */ .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack img, .avatar-stack span { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--surface); object-fit: cover; background: var(--brand-soft); box-shadow: 0 3px 10px rgba(22, 20, 31, .12); } .avatar-stack > * + * { margin-left: -11px; } .avatar-stack--lg img, .avatar-stack--lg span { width: 52px; height: 52px; } /* ---------- 8) FORM ELEMENTS ---------- */ .input, .select { font: inherit; font-size: .92rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 20px; width: 100%; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .input::placeholder { color: var(--muted); } .input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .pill-select { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: .87rem; font-weight: 600; color: var(--ink); } .pill-select svg { color: var(--muted); } .search-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .range { accent-color: var(--brand); width: 100%; height: 4px; cursor: pointer; } /* ---------- 9) NAV ---------- */ .nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; transition: transform .5s var(--ease), opacity .4s var(--ease); } .nav--hidden { transform: translateY(-130%); opacity: 0; } .nav-inner { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 8px 8px 20px; box-shadow: var(--shadow-soft); max-width: calc(100vw - 2 * var(--gutter)); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 36px; width: auto; } .nav-links { display: flex; gap: 2px; margin-inline: 8px; } .nav-links a { padding: 9px 13px; border-radius: var(--r-pill); font-size: .89rem; font-weight: 500; color: var(--muted); transition: color .3s var(--ease), background .3s var(--ease); } .nav-links a:hover { color: var(--ink); background: var(--brand-soft); } .nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; } .nav-burger span { width: 17px; height: 2px; border-radius: 2px; background: var(--ink); } /* fullscreen overlay menu */ .menu { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; padding: 22px var(--gutter) 34px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; } body.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); } body.menu-open { overflow: hidden; } .menu-top { display: flex; align-items: center; justify-content: space-between; } .menu-top img { height: 34px; width: auto; } .menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .menu-links a { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(2rem, 8.5vw, 3.1rem); line-height: 1.15; padding: 4px 0; opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .55s var(--ease), color .3s var(--ease); } .menu-links a:hover { color: var(--brand); } body.menu-open .menu-links a { opacity: 1; transform: none; } body.menu-open .menu-links a:nth-child(1) { transition-delay: .06s; } body.menu-open .menu-links a:nth-child(2) { transition-delay: .11s; } body.menu-open .menu-links a:nth-child(3) { transition-delay: .16s; } body.menu-open .menu-links a:nth-child(4) { transition-delay: .21s; } body.menu-open .menu-links a:nth-child(5) { transition-delay: .26s; } body.menu-open .menu-links a:nth-child(6) { transition-delay: .31s; } .menu-foot { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- 10) HERO ---------- */ .hero { padding: clamp(128px, 16vh, 176px) 0 clamp(28px, 5vh, 56px); position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .hero-copy .eyebrow { margin-bottom: 18px; } .hero-copy .d1 { margin-bottom: 20px; max-width: 11em; } .hero-copy .lead { margin-bottom: 30px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .hero-proof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero-visual { position: relative; min-height: 460px; } .hero-blob { position: absolute; inset: 6% 2% 10% 6%; border-radius: 50%; background: radial-gradient(circle at 28% 28%, var(--accent-2) 0%, transparent 58%), radial-gradient(circle at 74% 24%, var(--accent-3) 0%, transparent 55%), radial-gradient(circle at 60% 78%, var(--brand-soft) 0%, transparent 62%); filter: blur(46px); opacity: .85; } .float-card { position: absolute; animation: floaty 6.5s ease-in-out infinite; } .fc-live { top: 9%; left: 6%; animation-delay: 1.4s; } .fc-player { top: 30%; right: 4%; width: min(272px, 78%); animation-duration: 7.5s; } .fc-pastel { bottom: 10%; left: 14%; animation-delay: .7s; } .fc-player-inner { display: flex; align-items: center; gap: 13px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-soft); } .fc-player-inner .fc-meta { flex: 1; min-width: 0; } .fc-player-inner strong { display: block; font-family: var(--font-display); font-size: .98rem; letter-spacing: -.01em; } .fc-disc { width: 44px; } .fc-pastel-inner { display: flex; align-items: center; gap: 12px; background: var(--accent-2-soft); border-radius: var(--r-lg); padding: 13px 18px 13px 13px; box-shadow: var(--shadow-soft); font-size: .84rem; font-weight: 600; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* ---------- 11) MARQUEE ---------- */ .marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 13px 0; background: var(--surface); } .marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .mq-group { display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; color: var(--muted); font-size: .88rem; font-weight: 500; } .mq-label { color: var(--ink); font-weight: 600; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; } .mq-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- 12) LIVE ROOMS ("Naživo teraz") ---------- */ .lr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 34px); } .lr-title { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .lr-count { color: var(--muted); font-weight: 600; } .lr-date { color: var(--muted); font-size: .95rem; } .lr-controls { display: flex; align-items: center; gap: 10px; } .lr-track { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--edge) 26px; scroll-padding-inline: var(--edge); cursor: grab; scrollbar-width: none; } .lr-track::-webkit-scrollbar { display: none; } .lr-track.dragging { scroll-snap-type: none; cursor: grabbing; } .lr-track.dragging * { pointer-events: none; } .lr-track img { user-select: none; -webkit-user-drag: none; } .lr-card { flex: 0 0 auto; width: min(320px, 82vw); scroll-snap-align: start; cursor: pointer; transition: transform .5s var(--ease); } .lr-card:hover { transform: translateY(-6px); } /* photo card: big image, caption below */ .lr-photo { position: relative; height: clamp(360px, 56vw, 420px); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); background: var(--brand-soft); } .lr-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .lr-card:hover .lr-photo img { transform: scale(1.04); } .lr-tl { position: absolute; top: 14px; left: 14px; } .lr-tr { position: absolute; top: 14px; right: 14px; } .lr-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 6px 0; } .lr-caption h3 { font-size: 1.14rem; margin-bottom: 3px; } /* pastel card */ .lr-card--pastel { height: clamp(360px, 56vw, 420px); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; box-shadow: var(--shadow-soft); } .lr-card--lav { background: var(--accent-2-soft); } .lr-card--sky { background: var(--accent-3-soft); } .lr-card--blush { background: var(--brand-soft); } .lr-pastel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lr-pastel-top .eyebrow { color: var(--ink); opacity: .55; } .lr-pastel-mid { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; } .lr-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); opacity: .6; } .lr-pastel-title { font-size: clamp(1.4rem, 2vw, 1.62rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; max-width: 9.5em; } .lr-pastel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* decorative gradient orb */ .orb { width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0%, transparent 42%), radial-gradient(circle at 72% 22%, var(--accent-2) 0%, transparent 58%), radial-gradient(circle at 26% 80%, var(--brand) 0%, transparent 64%), radial-gradient(circle at 82% 72%, var(--accent-3) 0%, transparent 58%); background-color: var(--accent-3); box-shadow: inset 0 0 26px rgba(255, 255, 255, .45), var(--shadow-lift); } /* carousel footer: dots + arrows */ .lr-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 4px; } .lr-dots { display: flex; gap: 7px; } .lr-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--line); padding: 0; transition: background .3s var(--ease), width .3s var(--ease); } .lr-dot.active { background: var(--brand); width: 22px; } .lr-nav { display: flex; gap: 8px; } /* ---------- 13) BENTO ---------- */ .bento { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 208px; grid-template-areas: "player player stats stats" "player player pods app" "brands brands leto app"; } .tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .tile--player { grid-area: player; } .tile--stats { grid-area: stats; } .tile--pods { grid-area: pods; } .tile--app { grid-area: app; } .tile--brands { grid-area: brands; } .tile--leto { grid-area: leto; } /* photo tile (image as background) */ .tile--photo { padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; border: 0; } .tile--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .tile--photo:hover > img { transform: scale(1.04); } .tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 20, 31, 0) 34%, rgba(22, 20, 31, .68) 100%); } .tile--photo > :not(img) { position: relative; z-index: 1; } .tile--photo h3, .tile--photo p { color: #fff; } .tile-topchip { position: absolute; top: 16px; left: 16px; z-index: 1; } /* player tile */ .tile--player { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: radial-gradient(560px 300px at 100% 0%, var(--accent-2-soft) 0%, transparent 62%), radial-gradient(480px 300px at 0% 100%, var(--brand-soft) 0%, transparent 62%), var(--surface); } .tp-top { display: flex; align-items: center; justify-content: space-between; } .tp-mid { display: flex; align-items: center; gap: 18px; } .tp-disc { width: clamp(76px, 8vw, 96px); } .tp-meta { flex: 1; min-width: 0; } .tp-title { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.45rem; } .tp-play { flex: none; width: 62px; height: 62px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; box-shadow: var(--shadow-lift); transition: background .3s var(--ease), transform .3s var(--ease); } .tp-play:hover { background: var(--brand-strong); transform: scale(1.05); } .tp-stations { display: flex; flex-wrap: wrap; gap: 8px; } .st-chip { padding: 9px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: .83rem; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .st-chip:hover { border-color: var(--brand); color: var(--brand-strong); } .st-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* stats tile */ .tile--stats { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); } .stat { flex: 1; min-width: 0; } .stat-num { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin-bottom: 6px; white-space: nowrap; } .stat-num em { font-style: normal; color: var(--brand); } .stat-label { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; } /* podcasts mini tile */ .tile--pods { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .tile--pods .avatar-stack { margin-bottom: 2px; } .tile-arrow { position: absolute; top: 18px; right: 18px; z-index: 1; } /* app tile */ .tile--app { display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; } .tile--app .badge-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .badge-row img { height: 40px; width: auto; border-radius: 8px; } .tile-phone { width: 74%; margin: auto auto 0; max-height: 52%; object-fit: contain; object-position: bottom; } /* brands tile */ .tile--brands { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; background: radial-gradient(420px 240px at 100% 100%, var(--accent-3-soft) 0%, transparent 64%), var(--surface); } .tile--brands p { color: var(--muted); font-size: .92rem; max-width: 30em; } /* ---------- 14) DISC + EQ ---------- */ .disc { aspect-ratio: 1; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--surface) 0 13%, transparent 14%), repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .16) 5px 6px), conic-gradient(from 210deg, var(--brand), var(--accent-2) 34%, var(--accent-3) 66%, var(--brand)); box-shadow: inset 0 0 0 1px rgba(22, 20, 31, .05), var(--shadow-lift); } .playing .disc { animation: spin 10s linear infinite; } @keyframes spin { to { transform: rotate(1turn); } } .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; } .eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--brand); } .eq.on i { animation: eq-bounce .9s ease-in-out infinite alternate; } .eq.on i:nth-child(1) { animation-delay: 0s; } .eq.on i:nth-child(2) { animation-delay: .18s; } .eq.on i:nth-child(3) { animation-delay: .34s; } .eq.on i:nth-child(4) { animation-delay: .09s; } @keyframes eq-bounce { from { height: 4px; } to { height: 15px; } } /* ---------- 15) SCROLLER + PROGRAM CARDS ---------- */ .scroller { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--edge) 26px; scroll-padding-inline: var(--edge); scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; } .scroller > * { flex: 0 0 auto; scroll-snap-align: start; } .scroller-nav { display: flex; gap: 8px; } .pcard { width: min(264px, 74vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); } .pcard-photo { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-lg) - 8px); overflow: hidden; background: var(--brand-soft); } .pcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .pcard:hover .pcard-photo img { transform: scale(1.05); } .pcard-photo .chip { position: absolute; left: 10px; bottom: 10px; } .pcard-body { padding: 14px 8px 8px; } .pcard-body .eyebrow { font-size: .64rem; margin-bottom: 6px; } .pcard-body h3 { font-size: 1.05rem; margin-bottom: 4px; } .pcard-mail { display: inline-block; transition: color .3s var(--ease); } .pcard-mail:hover { color: var(--brand); } /* ---------- 16) PODCASTS ---------- */ .pod-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } .pod-ep { grid-column: span 2; display: flex; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .pod-ep:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .pod-cover { flex: none; width: clamp(110px, 13vw, 150px); aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lift); } .pod-cover img { width: 100%; height: 100%; object-fit: cover; } .pod-body { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; } .pod-body h3 { font-size: 1.06rem; line-height: 1.3; } .pod-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .play-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 17px 7px 8px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-size: .85rem; font-weight: 600; transition: background .3s var(--ease), box-shadow .3s var(--ease); } .play-pill:hover { background: var(--brand-strong); box-shadow: var(--shadow-lift); } .pp-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; } .pod-mini { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; display: block; box-shadow: var(--shadow-soft); transition: transform .5s var(--ease); } .pod-mini:hover { transform: translateY(-5px); } .pod-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .pod-mini:hover img { transform: scale(1.05); } .pod-mini-label { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; color: #fff; font-weight: 600; font-size: .92rem; text-shadow: 0 2px 10px rgba(22, 20, 31, .5); } .pod-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 20, 31, 0) 55%, rgba(22, 20, 31, .62) 100%); } /* ---------- 17) NEWS ---------- */ .news-list { display: flex; flex-direction: column; gap: 12px; } .news-row { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .news-row:hover { transform: translateX(8px); box-shadow: var(--shadow-soft); border-color: var(--brand-soft); } .news-thumb { width: 104px; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--brand-soft); } .news-thumb img { width: 100%; height: 100%; object-fit: cover; } .news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .news-meta .eyebrow { font-size: .62rem; color: var(--brand); } .news-meta time { font-size: .78rem; color: var(--muted); } .news-row h3 { font-size: 1.02rem; line-height: 1.3; } .news-row .icon-circle { margin-right: 8px; } /* ---------- 18) FREQUENCIES ---------- */ .freq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .freq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .freq:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-lift); } .freq b { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 1.32rem; line-height: 1.1; } .freq span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; } /* ---------- 19) BRAND BAND (Radio Group) ---------- */ .band { background: radial-gradient(640px 320px at 90% 0%, var(--accent-2-soft) 0%, transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow-soft); } .band-head { max-width: 40em; margin-bottom: clamp(22px, 3vw, 34px); } .band-head .eyebrow { margin-bottom: 12px; } .band-head .d2 { margin-bottom: 12px; } .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .band-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .band-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--brand-soft); } .band-card img { height: 42px; width: auto; } .band-card p { color: var(--muted); font-size: .93rem; } .band-card .link { margin-top: auto; } .band-foot { margin-top: 20px; } /* ---------- 20) FOOTER ---------- */ .footer { padding: clamp(52px, 7vw, 84px) 0 0; border-top: 1px solid var(--line); overflow: hidden; } .footer-cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; padding-bottom: 40px; } .footer-cols h4 { margin-bottom: 13px; font-size: .88rem; } .footer-cols a { display: block; padding: 4px 0; font-size: .88rem; color: var(--muted); transition: color .3s var(--ease); } .footer-cols a:hover { color: var(--brand); } .footer-brand img { height: 38px; width: auto; margin-bottom: 14px; } .footer-brand .small { max-width: 22em; } .footer-note { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); } .footer-mark { font-family: var(--font-display); font-weight: 700; letter-spacing: -.045em; line-height: .82; font-size: clamp(4.2rem, 15.5vw, 13.5rem); text-align: center; white-space: nowrap; padding-top: 12px; margin-bottom: -0.06em; background: linear-gradient(180deg, var(--ink) 0%, var(--bg) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .22; user-select: none; pointer-events: none; } /* ---------- 21) DOCK (mini player) ---------- */ .dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 12px; width: min(430px, calc(100vw - 24px)); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 10px 9px 9px; box-shadow: var(--shadow-soft); } .dock-disc { width: 42px; } .dock-meta { flex: 1; min-width: 0; text-align: left; } .dock-meta strong { display: block; font-family: var(--font-display); font-size: .93rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock-meta span { display: block; font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock .eq { flex: none; } .dock-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; transition: background .3s var(--ease), transform .3s var(--ease); } .dock-btn:hover { background: var(--brand-strong); transform: scale(1.06); } .dock-expand { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--muted); transition: color .3s var(--ease), border-color .3s var(--ease); } .dock-expand:hover { color: var(--ink); border-color: var(--brand); } /* ---------- 22) SHEET (fullscreen player) ---------- */ .sheet { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 22px var(--gutter) 30px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; } .sheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); } body.sheet-open { overflow: hidden; } .sheet::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(560px 360px at 84% 8%, var(--accent-2-soft) 0%, transparent 62%), radial-gradient(520px 340px at 10% 92%, var(--brand-soft) 0%, transparent 62%); opacity: 0; transition: opacity .6s var(--ease); } .sheet.open::before { opacity: 1; } .sheet > * { position: relative; } .sheet-top { width: 100%; max-width: 640px; display: flex; align-items: center; justify-content: space-between; } .sheet-close { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; transition: border-color .3s var(--ease), color .3s var(--ease); } .sheet-close:hover { border-color: var(--brand); color: var(--brand-strong); } .sheet-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 26px 0; } .sheet-disc { width: clamp(158px, 28vh, 238px); } .sheet-title { text-align: center; } .sheet-title strong { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 3.4vw, 2rem); } .sheet-title span { color: var(--muted); font-size: .95rem; } .sheet-controls { display: flex; align-items: center; gap: 16px; } .sheet-play { width: 78px; height: 78px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; box-shadow: var(--shadow-lift); transition: background .3s var(--ease), transform .3s var(--ease); } .sheet-play:hover { background: var(--brand-strong); transform: scale(1.05); } .sheet-side { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .3s var(--ease), color .3s var(--ease); } .sheet-side:hover { border-color: var(--brand); color: var(--brand-strong); } .sheet-stations { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; } .sheet-vol { display: flex; align-items: center; gap: 13px; width: min(320px, 84%); padding-top: 22px; color: var(--muted); } /* ---------- 23) REVEAL FX + MISC ---------- */ .fx { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .fx.in { opacity: 1; transform: none; } .fx-d1 { transition-delay: .08s; } .fx-d2 { transition-delay: .16s; } .fx-d3 { transition-delay: .24s; } .fx-d4 { transition-delay: .32s; } .fx-d5 { transition-delay: .40s; } .magnet { will-change: transform; } /* reduced motion: everything visible, nothing moves */ body.reduced *, body.reduced *::before, body.reduced *::after { animation: none !important; transition: none !important; } body.reduced .fx { opacity: 1; transform: none; } body.reduced .float-card { animation: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- 24) RESPONSIVE ---------- */ @media (max-width: 1080px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; grid-template-areas: "player player" "stats stats" "pods app" "leto app" "brands brands"; } .tile--player { min-height: 380px; } .tile--stats { min-height: 150px; } .tile--pods, .tile--leto { min-height: 210px; } .tile--app { min-height: 440px; } .tile--brands { min-height: 200px; } .pod-grid { grid-template-columns: repeat(2, 1fr); } .pod-ep { grid-column: span 2; } .footer-cols { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 880px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: flex; } .nav-inner { padding: 7px 7px 7px 16px; gap: 12px; } .hero { padding-top: 118px; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { min-height: 300px; } .fc-live { left: 2%; top: 4%; } .fc-player { right: 0; top: 26%; } .fc-pastel { left: 6%; bottom: 6%; } .band-grid { grid-template-columns: 1fr; } .section-head { align-items: flex-start; flex-direction: column; } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr; grid-template-areas: "player" "stats" "pods" "leto" "app" "brands"; } .tile--stats { flex-direction: column; align-items: flex-start; gap: 18px; min-height: 0; } .tp-stations .st-chip { font-size: .78rem; padding: 8px 12px; } .pod-grid { grid-template-columns: repeat(2, 1fr); } .pod-ep { flex-direction: column; align-items: flex-start; } .pod-cover { width: 110px; } .news-row { grid-template-columns: 84px 1fr; } .news-row .icon-circle { display: none; } .news-thumb { width: 84px; } .footer-cols { grid-template-columns: 1fr 1fr; } .lr-controls { display: none; } .dock .eq { display: none; } } /* portfóliové farby značiek v skupinovom bande (fixné, nie témové tokeny) */ .brand-tint-fun { background: #FDE7F1; } .brand-tint-vlna { background: #FDE9E6; } /* hero tuner */ /* ---------- 25) SIGNATURE HERO „NALAĎ SA" ---------- Opener + tune-in choreografia zdieľaná všetkými značkami. DOM stavia /v2/hero.js, dáta plní /v2/live.js. Všetky farby čítajú len brandové tokeny, takže fungujú vo fun/vlna/rg. */ /* headline: mask-reveal po slovách (obalí hero.js) */ .hero-enhanced .d1 .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .09em; margin-bottom: -.09em; } .hero-enhanced .d1 .wi { display: inline-block; transform: translateY(110%); animation: hero-word .62s cubic-bezier(.22, .9, .24, 1) both; animation-delay: calc(var(--wd, 0) * 70ms); } @keyframes hero-word { to { transform: translateY(0); } } .hero-enhanced .d1 .dot { display: inline-block; transform: scale(0); animation: hero-dot .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--dotd, .6s); } @keyframes hero-dot { to { transform: scale(1); } } /* floating karty: spring pop-in po headline, potom pôvodné floaty */ .hero-enhanced .float-card { animation: hero-pop .55s cubic-bezier(.34, 1.56, .64, 1) var(--pd, .5s) both, floaty 6.5s ease-in-out calc(var(--pd, .5s) + .55s) infinite; } .hero-enhanced .fc-player { --pd: .48s; animation-duration: .55s, 7.5s; } .hero-enhanced .fc-live { --pd: .62s; } .hero-enhanced .fc-pastel { --pd: .76s; } @keyframes hero-pop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 72% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* živá vlna */ .hero-wave { position: relative; height: clamp(56px, 7vw, 78px); margin-top: clamp(4px, 2vh, 16px); transition: transform .45s var(--ease), opacity .4s var(--ease); will-change: transform; pointer-events: none; } .hero-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .hw-stop { stop-color: var(--brand); } .hero-wave-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); } .hero-wave.drawn .hero-wave-path { stroke-dashoffset: 0; } .hero.tuned .hero-wave { transform: translate(var(--fly-x, 0px), var(--fly-y, 45vh)) scale(.18); opacity: 0; transition: transform .6s var(--ease) .26s, opacity .5s var(--ease) .3s; } /* tuner stupnica */ .hero-tuneband { position: relative; margin-top: clamp(2px, 1vh, 10px); } .tuner { position: relative; height: 76px; overflow: hidden; } .tuner::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--bg), transparent 16%, transparent 84%, var(--bg)); } .tuner::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 16px); } .tuner-track { position: absolute; left: 0; top: 30px; display: flex; gap: clamp(30px, 4.5vw, 58px); white-space: nowrap; transform: translateX(var(--tx-open, 0px)); transition: transform .55s var(--ease); will-change: transform; } .hero.tuned .tuner-track { transform: translateX(var(--tx-lock, 0px)); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); } .tuner-item { flex: none; display: flex; flex-direction: column; gap: 1px; opacity: .55; transition: opacity .35s var(--ease); } .tuner-in .tuner-item { animation: tuner-item-in .55s var(--ease) calc(var(--ti, 0) * 55ms + .45s) backwards; } @keyframes tuner-item-in { from { opacity: 0; transform: translateX(46px); } } .tuner-item .ti-v { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; font-size: 1.04rem; line-height: 1.15; color: var(--ink); } .tuner-item .ti-l { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .hero.tuned .tuner-item.is-lock { opacity: 1; transition-delay: .25s; } .hero.tuned .tuner-item.is-lock .ti-v { color: var(--brand); } .tuner-needle { position: absolute; left: 50%; top: 2px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 10px var(--brand); transform: translateX(-50%); } .hero.tuned .tuner-needle { animation: needle-blink .75s var(--ease) .3s 2; } @keyframes needle-blink { 0%, 100% { box-shadow: 0 0 10px var(--brand); opacity: 1; } 45% { box-shadow: 0 0 24px var(--brand); opacity: .55; } } /* lock chip nad ihlou */ .tuner-lock { position: absolute; left: 50%; bottom: calc(100% - 22px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lift); opacity: 0; transform: translateX(-50%) scale(.6); transition: transform .3s var(--ease), opacity .25s var(--ease); pointer-events: none; z-index: 2; } .hero.tuned .tuner-lock { opacity: 1; transform: translateX(-50%) scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .32s, opacity .3s var(--ease) .32s; } /* hero copy: jemné uvoľnenie pri tune-in */ .hero-copy { transition: transform .5s var(--ease); } .hero.tuned .hero-copy { transform: scale(.985) translateY(-6px); } /* jednorazový expanding ring na cieli vlny (dock alebo chip) */ .chip.tune-pulse { position: relative; } .tune-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: var(--r-pill); border: 2px solid var(--brand); opacity: 0; pointer-events: none; animation: tune-ring .9s var(--ease) forwards; } @keyframes tune-ring { 0% { opacity: .85; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.16); } } /* Radio Group: hero chip prepne po tune-in na živý súčet */ .rg-reach-b { display: none; align-items: baseline; gap: 7px; } .rg-reach-b b { font-weight: 700; } .rg-reach-b .rg-reach-label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } html.zive-live .hero.tuned .rg-reach .rg-reach-a { display: none; } html.zive-live .hero.tuned .rg-reach .rg-reach-b { display: inline-flex; } /* bloky viditeľné len so živými dátami (lokálne bez /api ostanú skryté) */ .live-only { display: none; } html.zive-live .live-only { display: block; } .num--live { background: var(--brand-soft); border-color: transparent; } /* reduced motion: statická vlna, tuner rovno v lock stave */ body.reduced .hero.tuned .hero-wave { transform: none; opacity: 1; } body.reduced .hero.tuned .hero-copy { transform: none; } body.reduced .hero-wave-path { stroke-dashoffset: 0; } body.reduced .tuner-item { opacity: .55; } body.reduced .hero.tuned .tuner-item.is-lock { opacity: 1; } /* mobil */ @media (max-width: 720px) { .hero-wave { height: 48px; } .tuner { height: 64px; } .tuner-track { top: 26px; gap: 26px; } .tuner-item .ti-v { font-size: .88rem; } .tuner-item .ti-l { font-size: .58rem; } .tuner-lock { max-width: calc(100vw - 32px); white-space: normal; text-align: center; font-size: .74rem; padding: 7px 14px; } }