/* Videostream V2 — Custom Styles */ /* Spell-check (CodeMirror overlay v admin EasyMDE) */ .cm-spell-error { text-decoration: underline wavy #dc3545; text-decoration-skip-ink: none; text-underline-offset: 2px; } /* ============================================ CSS FULLSCREEN (iOS Safari fallback) ============================================ */ html.sf-css-fullscreen { background: #000; } html.sf-css-fullscreen body > *:not(.video-wrapper) { display: none !important; } html.sf-css-fullscreen body > .video-wrapper { display: block !important; } html.sf-css-fullscreen .video-wrapper { aspect-ratio: auto !important; overflow: visible !important; } html.sf-css-fullscreen .video-wrapper video { object-fit: contain !important; transform: none !important; width: 100% !important; height: 100% !important; } /* ============================================ LAYOUT — Container width override ============================================ */ @media (min-width: 1400px) { .container { max-width: 1400px; } } /* ============================================ ACCESSIBILITY — Skip to content link ============================================ */ .sf-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 9999; padding: .6rem 1.2rem; font-size: .9rem; font-weight: 600; color: #000; background: var(--sf-accent, #d4a843); border-radius: 0 0 .4rem .4rem; text-decoration: none; transition: top .2s ease; } .sf-skip-link:focus { top: 0; outline: 2px solid var(--sf-accent, #d4a843); outline-offset: 2px; } /* ============================================ CSS CUSTOM PROPERTIES — Duálna paleta Prepínajú sa cez data-palette + data-mode na ============================================ */ /* === INDIGO DARK (default) === */ :root, [data-palette="indigo"][data-mode="dark"] { --sf-bg: #0f0f1a; --sf-card-bg: #1a1a2e; --sf-navbar-bg: #252540; --sf-modal-rgb: 15, 15, 26; --sf-elevated: #30304d; --sf-border: rgba(255,255,255,0.08); --sf-accent: #C9A84C; --sf-accent-hover: #E0BE5A; --sf-cta: #AC1E61; --sf-cta-hover: #C42572; --sf-live: #D0021B; --sf-text: #d0d0d0; --sf-text-muted: rgba(255,255,255,0.6); --sf-text-body: rgba(255,255,255,0.72); --sf-text-heading: #e0e0e0; --sf-badge-text: #0f0f1a; } /* === INDIGO LIGHT === */ [data-palette="indigo"][data-mode="light"] { --sf-bg: #FFFFFF; --sf-card-bg: #FFFFFF; --sf-navbar-bg: #FFFFFF; --sf-modal-rgb: 25, 25, 50; --sf-elevated: #F0F0F5; --sf-border: rgba(0,0,0,0.08); --sf-accent: #A08759; --sf-accent-hover: #775312; --sf-cta: #AC1E61; --sf-cta-hover: #8B1A4E; --sf-live: #D0021B; --sf-text: #222222; --sf-text-muted: #666666; --sf-text-body: #444444; --sf-text-heading: #222222; --sf-badge-text: #ffffff; } /* === MODRÁ DARK === */ [data-palette="blue"][data-mode="dark"] { --sf-bg: #0a1018; --sf-card-bg: #111827; --sf-navbar-bg: #1a2744; --sf-modal-rgb: 10, 16, 24; --sf-elevated: #1e3050; --sf-border: rgba(255,255,255,0.08); --sf-accent: #C9A84C; --sf-accent-hover: #E0BE5A; --sf-cta: #AC1E61; --sf-cta-hover: #C42572; --sf-live: #D0021B; --sf-text: #d0d0d0; --sf-text-muted: rgba(255,255,255,0.6); --sf-text-body: rgba(255,255,255,0.72); --sf-text-heading: #e0e0e0; --sf-badge-text: #0a1018; } /* === MODRÁ LIGHT === */ [data-palette="blue"][data-mode="light"] { --sf-bg: #FFFFFF; --sf-card-bg: #FFFFFF; --sf-navbar-bg: #FFFFFF; --sf-modal-rgb: 20, 30, 50; --sf-elevated: #EEF2F7; --sf-border: rgba(0,0,0,0.08); --sf-accent: #A08759; --sf-accent-hover: #775312; --sf-cta: #AC1E61; --sf-cta-hover: #8B1A4E; --sf-live: #D0021B; --sf-text: #222222; --sf-text-muted: #666666; --sf-text-body: #444444; --sf-text-heading: #222222; --sf-badge-text: #ffffff; } /* ============================================ TYPOGRAPHY — Fira Sans ============================================ */ body { font-family: 'Fira Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; font-weight: 300; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--sf-bg); color: var(--sf-text-body); transition: background-color 0.3s ease, color 0.3s ease; } main { flex: 1; } h1, .h1 { font-weight: 700; letter-spacing: 0.02em; font-feature-settings: "liga" 1, "clig" 1; font-variant-ligatures: common-ligatures; } h2, .h2 { font-weight: 600; letter-spacing: 0.02em; font-feature-settings: "liga" 1, "clig" 1; font-variant-ligatures: common-ligatures; } h3, .h3 { font-weight: 600; font-feature-settings: "liga" 1, "clig" 1; font-variant-ligatures: common-ligatures; } h4, .h4 { font-weight: 600; font-feature-settings: "liga" 1, "clig" 1; font-variant-ligatures: common-ligatures; } /* ============================================ NAVBAR — používa --sf-navbar-bg ============================================ */ /* Sticky header — admin-bar + navbar prilepené na vrch */ .sf-sticky-header { position: sticky; top: 0; z-index: 1030; /* nad Bootstrap modal-backdrop (1050 pre modal samotný) */ } .navbar { background-color: var(--sf-navbar-bg) !important; border-bottom: 1px solid rgba(255,255,255,0.1); } .navbar-brand { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-weight: 600; letter-spacing: 0.02em; } .navbar-brand.active { color: var(--sf-accent) !important; } /* Aktívna položka menu = zlatá + bold */ .navbar .nav-link.active { color: var(--sf-accent) !important; font-weight: 600; } /* Navbar — light mode */ [data-bs-theme="light"] .navbar { border-bottom: 1px solid rgba(0,0,0,0.08); } [data-bs-theme="light"] .navbar .nav-link { color: #444 !important; } [data-bs-theme="light"] .navbar .nav-link:hover { color: var(--sf-accent) !important; } [data-bs-theme="light"] .navbar .nav-link.active { color: var(--sf-accent) !important; } [data-bs-theme="light"] .navbar .navbar-brand { color: #222 !important; } [data-bs-theme="light"] .navbar .navbar-brand.active { color: var(--sf-accent) !important; } [data-bs-theme="light"] .navbar .navbar-toggler { border-color: rgba(0,0,0,0.15); } [data-bs-theme="light"] .navbar .navbar-toggler-icon { filter: invert(1) grayscale(100%) brightness(0.4); } /* SK/EN text-white override */ [data-bs-theme="light"] .navbar .text-white { color: #222 !important; } /* ============================================ DROPDOWN MENU — paleta namiesto Bootstrap dark ============================================ */ /* Dropdown — dark mode (default) */ .sf-dropdown { background-color: var(--sf-navbar-bg) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 0.35rem 0; } .sf-dropdown .dropdown-item { color: rgba(255,255,255,.85) !important; padding: 0.4rem 1.1rem; font-size: 0.92rem; } .sf-dropdown .dropdown-item:hover, .sf-dropdown .dropdown-item:focus { background-color: rgba(255,255,255,0.08) !important; color: var(--sf-accent) !important; } .sf-dropdown .dropdown-item.active, .sf-dropdown .dropdown-item:active { background-color: var(--sf-accent) !important; color: #fff !important; } .sf-dropdown .dropdown-divider { border-color: rgba(255,255,255,0.12) !important; margin: 0.3rem 0; } /* Dropdown — light mode */ [data-bs-theme="light"] .sf-dropdown { background-color: #fff !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12); } [data-bs-theme="light"] .sf-dropdown .dropdown-item { color: #444 !important; } [data-bs-theme="light"] .sf-dropdown .dropdown-item:hover, [data-bs-theme="light"] .sf-dropdown .dropdown-item:focus { background-color: rgba(0,0,0,0.04) !important; color: var(--sf-accent) !important; } [data-bs-theme="light"] .sf-dropdown .dropdown-item.active, [data-bs-theme="light"] .sf-dropdown .dropdown-item:active { background-color: var(--sf-accent) !important; color: #fff !important; } [data-bs-theme="light"] .sf-dropdown .dropdown-divider { border-color: rgba(0,0,0,0.08) !important; } /* Desktop: hover otvára dropdown (klik na sf-hub-link naviguje) */ @media (min-width: 992px) { .navbar-expand-lg .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } } /* Hub link: focus ring pre klávesovú navigáciu (WCAG 2.4.7) */ .sf-hub-link:focus-visible { outline: 2px solid var(--sf-accent, #d4a843); outline-offset: 2px; border-radius: .25rem; } /* ============================================ NAVBAR — MOBILE (rozbalené menu) ============================================ */ @media (max-width: 991.98px) { /* Hlavné nav položky — horizontálne zabalenie (viac položiek na riadku) */ .navbar-collapse .navbar-nav:first-child { flex-direction: row !important; flex-wrap: wrap; align-items: flex-start; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.05); } .navbar-collapse .navbar-nav:first-child > .nav-item { flex: 0 0 auto; } .navbar-collapse .navbar-nav:first-child .nav-link { padding: 0.45rem 0.8rem; font-size: 1.2rem; white-space: nowrap; border-bottom: none; } /* Otvorený dropdown sa roztiahne na celú šírku */ .navbar-collapse .navbar-nav:first-child > .sf-dd-open { flex: 0 0 100%; } /* Ikony + SK/EN — horizontálny riadok */ .navbar-nav.align-items-center { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; padding: 0.4rem 0 0.2rem; margin-top: 0.3rem; border-top: 1px solid rgba(255,255,255,0.1); gap: 0; } .navbar-nav.align-items-center .nav-link { padding: 0.5rem 0.7rem !important; font-size: 1.4rem; min-height: 44px; display: flex; align-items: center; } /* SK / EN text — tighter */ .navbar-nav.align-items-center .nav-link.fw-bold, .navbar-nav.align-items-center .nav-link.sf-lang-switch { padding: 0.5rem 0.55rem !important; font-size: 1rem; } } @media (max-width: 991.98px) { [data-bs-theme="light"] .navbar-collapse .navbar-nav:first-child .nav-link { border-bottom-color: rgba(0,0,0,0.06); } [data-bs-theme="light"] .navbar-nav.align-items-center { border-top-color: rgba(0,0,0,0.08); } } /* ============================================ CONCERTS HUB — prechodová stránka ============================================ */ .sf-hub-card { display: block; height: 100%; background: var(--sf-card-bg); border: 1px solid var(--sf-border); border-radius: 0.75rem; padding: 1.5rem; text-decoration: none; transition: border-color 0.2s, transform 0.2s; } .sf-hub-card:hover { border-color: var(--sf-accent); transform: translateY(-2px); } .sf-hub-card-name { color: var(--sf-accent); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; } .sf-hub-card-count { color: var(--sf-text-muted); font-size: 0.85rem; } .sf-hub-badge { display: inline-block; font-size: 0.6em; font-weight: 700; vertical-align: super; color: #000; background: var(--sf-accent, #c9a84c); padding: 0.1em 0.35em; border-radius: 0.3em; line-height: 1; } .sf-hub-section-title { color: var(--sf-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--sf-border); } /* ============================================ FOOTER ============================================ */ footer.sf-footer { background-color: var(--sf-elevated) !important; color: rgba(255,255,255,0.85); } /* Zlatá akcentová línia na vrchu footera */ .sf-footer-accent { height: 1px; background: linear-gradient(90deg, transparent 2%, var(--sf-accent) 50%, transparent 98%); opacity: .7; } /* ── Štatistiky archívu ── */ .sf-footer-stats { padding: 1.5rem 0 1.2rem; border-bottom: 1px solid rgba(255,255,255,.06); } .sf-footer-stats-row { display: flex; justify-content: center; align-items: baseline; gap: .3rem; flex-wrap: wrap; } .sf-footer-stat { text-align: center; padding: 0 .8rem; } .sf-footer-stat-num { display: block; font-size: 1.5rem; font-weight: 700; color: var(--sf-accent); line-height: 1.2; letter-spacing: -.01em; } .sf-footer-stat-label { display: block; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin-top: .1rem; } .sf-footer-stat-dot { color: rgba(255,255,255,.15); font-size: 1.5rem; line-height: 1; align-self: center; padding-bottom: .8rem; } @media (max-width: 575.98px) { .sf-footer-stat { padding: 0 .5rem; } .sf-footer-stat-num { font-size: 1.2rem; } .sf-footer-stat-dot { font-size: 1.2rem; padding-bottom: .6rem; } } /* ── Hlavný obsah footera ── */ .sf-footer-main { padding: 2rem 0 1.5rem; } .sf-footer-title { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); } .sf-footer-content { font-size: .85rem; line-height: 1.7; color: rgba(255,255,255,.6); } .sf-footer-content a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; } .sf-footer-content a:hover { color: var(--sf-accent); } /* Sociálne siete — styling odkazov ako riadkový zoznam */ .sf-footer-social a { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem 0; color: rgba(255,255,255,.7); font-weight: 500; transition: color .2s, transform .15s; } .sf-footer-social a:hover { color: var(--sf-accent); transform: translateX(2px); } .sf-footer-social i.bi { font-size: 1rem; width: 1.5rem; text-align: center; } /* Skryť ikonu external link v social sekcii (redundantné) */ .sf-footer-social .bi-box-arrow-up-right { font-size: .6rem !important; opacity: .4; width: auto !important; } /* ── Spodný bar ── */ .sf-footer-bottom { padding: .85rem 0; font-size: .78rem; color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.15); } .sf-footer-bottom a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; } .sf-footer-bottom a:hover { color: var(--sf-accent); } .sf-footer-bottom-dot { color: rgba(255,255,255,.15); margin: 0 .15rem; } .sf-footer-version { text-decoration: none !important; opacity: .5; } .sf-footer-version:hover { opacity: 1; } /* Footer — light mode */ [data-bs-theme="light"] footer.sf-footer { background-color: var(--sf-elevated) !important; color: var(--sf-text-body); } [data-bs-theme="light"] .sf-footer-stats { border-bottom-color: rgba(0,0,0,.06); } [data-bs-theme="light"] .sf-footer-stat-label { color: var(--sf-text-muted); } [data-bs-theme="light"] .sf-footer-stat-dot { color: rgba(0,0,0,.15); } [data-bs-theme="light"] .sf-footer-title { border-bottom-color: rgba(0,0,0,.08); } [data-bs-theme="light"] .sf-footer-content { color: var(--sf-text-muted); } [data-bs-theme="light"] .sf-footer-content a { color: var(--sf-text-body); } [data-bs-theme="light"] .sf-footer-social a { color: var(--sf-text-body); } [data-bs-theme="light"] .sf-footer-bottom { color: var(--sf-text-muted); border-top-color: rgba(0,0,0,.06); background: rgba(0,0,0,.03); } [data-bs-theme="light"] .sf-footer-bottom a { color: var(--sf-text-muted); } [data-bs-theme="light"] .sf-footer-bottom-dot { color: rgba(0,0,0,.15); } /* ============================================ LEGAL PAGES — prístupnosť, GDPR ============================================ */ .sf-legal-page { max-width: 820px; } /* Hlavička dokumentu */ .sf-legal-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--sf-border); position: relative; } .sf-legal-header::before { content: ''; position: absolute; bottom: -1px; left: 0; width: 80px; height: 2px; background: var(--sf-accent); } .sf-legal-header h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: .01em; } .sf-legal-meta { font-size: .8rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-text-muted, rgba(255,255,255,.4)); } /* Telo dokumentu */ .sf-legal-body { font-size: .95rem; line-height: 1.85; color: var(--sf-text-body, rgba(255,255,255,.8)); } /* Sekčné nadpisy (h2 z markdownu) */ .sf-legal-body h2 { font-size: 1.15rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: .8rem; padding-left: .9rem; border-left: 3px solid var(--sf-accent); letter-spacing: .02em; color: var(--sf-text-heading, #fff); } .sf-legal-body h3 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .5rem; color: var(--sf-text-heading, #fff); } /* Odstavce */ .sf-legal-body p { margin-bottom: 1rem; } /* Zoznamy */ .sf-legal-body ul { list-style: none; padding-left: 0; margin-bottom: 1.2rem; } .sf-legal-body ul li { position: relative; padding-left: 1.3rem; margin-bottom: .5rem; } .sf-legal-body ul li::before { content: ''; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-accent); } /* Zvýraznenie kontaktných sekcií */ .sf-legal-body ul li strong { color: var(--sf-text-heading, #fff); } /* Odkazy */ .sf-legal-body a { color: var(--sf-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .sf-legal-body a:hover { border-bottom-color: var(--sf-accent); } /* Zvýraznenie kľúčových slov */ .sf-legal-body strong { font-weight: 600; color: var(--sf-text-heading, rgba(255,255,255,.95)); } /* Lime hint box pre prihlásených (legal pages) */ .sf-legal-hint { position: relative; padding: 1rem 2.5rem 1rem 1.2rem; margin-top: 1rem; margin-bottom: 2rem; font-size: .85rem; line-height: 1.6; color: rgba(180, 230, 140, .9); background: rgba(120, 200, 80, .08); border: 1px solid rgba(120, 200, 80, .25); border-left: 3px solid rgba(120, 200, 80, .6); border-radius: .4rem; overflow: hidden; } .sf-legal-hint p { margin: 0; } .sf-legal-hint strong { color: rgba(180, 230, 140, 1); } .sf-legal-hint code { color: rgba(160, 220, 120, .95); background: rgba(120, 200, 80, .12); padding: .1rem .3rem; border-radius: .2rem; font-size: .8rem; } /* Animated dismiss — Alpine.js x-transition classes */ .sf-hint-leave-active { transition: opacity .35s ease, transform .35s ease, max-height .4s ease .05s, margin .4s ease .05s, padding .4s ease .05s, border-width .4s ease .05s; } .sf-hint-leave-start { opacity: 1; transform: translateY(0) scale(1); max-height: 200px; } .sf-hint-leave-end { opacity: 0; transform: translateY(-8px) scale(.97); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } .sf-legal-hint-close { position: absolute; top: .6rem; right: .6rem; background: none; border: none; color: rgba(120, 200, 80, .5); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .15rem .35rem; border-radius: .2rem; transition: color .2s, background .2s; } .sf-legal-hint-close:hover { color: rgba(180, 230, 140, 1); background: rgba(120, 200, 80, .15); } /* ============================================ CARDS — používa --sf-card-bg ============================================ */ .card, .sf-card { background-color: var(--sf-card-bg); border-color: var(--sf-border); transition: background-color 0.3s ease; } /* ============================================ DARK/LIGHT MODE TOGGLE ============================================ */ /* Paleta sa prepína v admin nastaveniach (app_settings). V navbare zostáva len dark/light toggle. */ /* Dark/light mode toggle */ #themeToggle { transition: opacity 0.2s; } #themeToggle:hover { opacity: 1 !important; } /* ============================================ DUOTONE PORTRÉTY ============================================ */ img.duotone-image { filter: var(--sf-duotone-default, url(#duotone-indigo)); transition: filter 0.3s ease; } img.duotone-image:hover { filter: var(--sf-duotone-hover, url(#duotone-warm)); } img.circle { border-radius: 50%; width: 80px; height: 80px; margin-right: 4px; margin-bottom: 8px; object-fit: cover; } /* ============================================ HERO SLIDESHOW ============================================ */ .sf-hero-slideshow { position: relative; } .sf-hero-viewport { position: relative; width: 100%; aspect-ratio: 21 / 9; /* filmový pomer */ background: var(--sf-card-bg); overflow: hidden; } /* Watermark logo (rovnaké parametre ako player sf-watermark) */ .sf-hero-watermark { position: absolute; top: 12px; right: 14px; height: 36px; width: auto; opacity: 0.40; z-index: 10; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* Slide = full-cover background obrázok */ .sf-hero-slide { position: absolute; inset: -2px; /* orez 1-2px čierny okraj z bannerov */ background-size: cover; background-position: center; text-decoration: none; color: #fff; opacity: 0; transition: opacity var(--hero-crossfade, 3s) ease; z-index: 1; display: flex; align-items: flex-end; cursor: pointer; } .sf-hero-slide.active { opacity: 1; z-index: 2; } .sf-hero-slide.prev { opacity: 0; z-index: 1; } /* Horný gradient — jemný tmavý závoj hore (čitateľnosť) */ .sf-hero-viewport::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 30%); } /* Spodný gradient — silný tmavý (text overlay) */ .sf-hero-overlay { width: 100%; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, transparent 100%); text-align: right; font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; } /* Názov koncertu — najväčší */ .sf-hero-title { font-size: 1.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dátum */ .sf-hero-meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-bottom: 0; } .sf-hero-date { font-size: 1.15rem; font-weight: 400; line-height: 1.4; letter-spacing: 0.03em; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Program + Účinkujúci — menšie ako nadpis */ .sf-hero-program { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; } .sf-hero-performers { font-family: 'Fira Sans', sans-serif; /* regulárny Fira Sans — má reálnu kurzívu (Condensed nemá italic loaded) */ font-size: 1.15rem; font-weight: 300; font-style: italic; line-height: 1.4; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== Gallery grid (jednotlivé "diapozitívy") — pre koncerty bez videa ===== */ /* Duplicitné s sf-player.css (pre video koncerty 3 stĺpce v sidebare), tu pre full-width 5 stĺpcov. Loaduje sa cez app.css pre VŠETKY stránky. */ .sf-gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-right: 12px; } .sf-gallery-item { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); padding-bottom: 100%; transition: transform .2s, box-shadow .2s, border-color .2s; } [data-bs-theme="light"] .sf-gallery-item { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.12); } .sf-gallery-thumb { position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; display: block; transition: transform .3s; border-radius: 2px; } /* Jednoduchý hover — len jemná zmena okraja a tieňa, žiadny scale */ .sf-gallery-item:hover { border-color: rgba(212,168,67,.5); box-shadow: 0 2px 12px rgba(0,0,0,.45); } /* Tablet — 4 stĺpce */ @media (max-width: 992px) { .sf-gallery-grid { grid-template-columns: repeat(4, 1fr); } } /* Mobil — 3 stĺpce */ @media (max-width: 576px) { .sf-gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* Pre koncerty s videom (sidebar) — vrátiť 3 stĺpce a override max-width */ .sf-concert-right .sf-gallery-grid { grid-template-columns: repeat(3, 1fr); } /* Mobile slideshow */ @media (max-width: 576px) { .sf-hero-watermark { display: none; } .sf-hero-viewport { aspect-ratio: 16 / 9; /* vyšší pomer na mobile */ } .sf-hero-overlay { padding: 1.2rem 0.75rem 1.75rem 0.5rem; text-align: left; } .sf-hero-meta { justify-content: flex-start; } .sf-hero-date { font-size: 0.85rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; opacity: 1; } .sf-hero-title { font-size: 1.2rem; } .sf-hero-program { font-size: 0.9rem; line-height: 1.5; } .sf-hero-performers { font-size: 0.9rem; line-height: 1.5; opacity: 1; } } /* Mobile — tighter section spacing + smaller section headings */ @media (max-width: 576px) { .sf-hero-slideshow, .sf-mini-cal, .sf-picked, .sf-conductors, .sf-spotlight, .sf-categories { margin-bottom: 1.75rem !important; } .sf-picked-title, .sf-conductors-title, .sf-spotlight-title, .sf-categories-title { font-size: 1.3rem !important; } .sf-conductors-title { margin-bottom: 0.75rem !important; } .sf-conductors { padding-top: 0.5rem !important; padding-bottom: 0.25rem !important; } .sf-interviews { margin-top: -0.5rem !important; } .sf-spotlight { margin-bottom: 0.5rem !important; } } /* Scroll snap — mobile sections (aktivuje sa až po prvom scrolle) */ @media (max-width: 767.98px) { html.sf-snap-active { scroll-snap-type: y proximity; } html.sf-snap-active .sf-hero-slideshow { scroll-snap-align: start; scroll-margin-top: 81px; } html.sf-snap-active .sf-mini-cal, html.sf-snap-active .sf-picked, html.sf-snap-active .sf-conductors, html.sf-snap-active .sf-spotlight, html.sf-snap-active .sf-categories { scroll-snap-align: start; scroll-margin-top: 57px; } } /* --- Promo slides --- */ .sf-hero-promo:not([style*="background-image:url("]), .sf-hero-promo[style*="background-image:url('')"], .sf-hero-promo[style*="background-image:url()"] { background: linear-gradient(135deg, var(--sf-card-bg) 0%, var(--sf-elevated, #1a1a2e) 100%); } .sf-hero-promo-overlay { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; padding: 2rem; background: rgba(0,0,0,.4); } .sf-hero-promo-title { font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; } .sf-hero-promo-subtitle { font-size: 1rem; font-weight: 300; opacity: 0.85; } @media (max-width: 576px) { .sf-hero-promo-title { font-size: 1.1rem; } .sf-hero-promo-subtitle { font-size: 0.8rem; } } /* --- PICKED FOR YOU (Overlay Card Grid) --- */ /* Badge s celkovým počtom pri nadpise (mobile) */ .sf-picked-total-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sf-accent); color: #000; font-size: 0.72rem; font-weight: 700; margin-left: 0.4rem; vertical-align: middle; line-height: 1; font-family: 'Fira Sans', sans-serif; } /* Poradové číslo na banneri (mobile) */ .sf-picked-card-num { position: absolute; top: 8px; left: 8px; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sf-accent); color: #000; font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 10; font-family: 'Fira Sans', sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } /* Nadpis sekcie */ .sf-picked-title { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sf-accent); font-variant-ligatures: common-ligatures discretionary-ligatures; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.25); } .sf-picked-card { display: block; text-decoration: none; color: inherit; } /* Hlavička: dátum badge + názov nad obrázkom */ .sf-picked-card-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; min-width: 0; } .sf-picked-card-date { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--sf-cta); padding: 0.05rem 0.25rem; flex-shrink: 0; letter-spacing: 0.02em; } .sf-picked-card-name { font-size: 1.05rem; font-weight: 500; color: var(--sf-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Geo / Time restriction flags (len localhost — vizuálna pomôcka) */ .sf-card-flags { display: inline-flex; gap: 0.25rem; margin-left: auto; flex-shrink: 0; padding-left: 0.35rem; } .sf-card-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; font-size: 0.65rem; line-height: 1; } .sf-card-flag-geo { background: rgba(50, 205, 50, 0.18); color: limegreen; } .sf-card-flag-time { background: rgba(50, 205, 50, 0.18); color: limegreen; } /* Obrázok s overlay */ .sf-picked-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--sf-elevated); } .sf-picked-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); /* orez 1-2px čierny okraj z bannerov */ transition: transform 0.4s ease; } .sf-picked-card:hover .sf-picked-card-img img { transform: scale(1.05); } .sf-picked-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); font-size: 2.5rem; } /* Koncert zatial bez videa — gradient namiesto bannera, overlay s program/performers vidno na celej karte */ .sf-picked-card-img-novideo { background: linear-gradient(135deg, rgba(212, 168, 67, 0.22) 0%, rgba(20, 20, 30, 0.90) 50%, rgba(20, 20, 30, 0.95) 100%); position: relative; } .sf-picked-card-img-novideo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 20%, rgba(212,168,67,0.08), transparent 50%), radial-gradient(circle at 75% 80%, rgba(212,168,67,0.06), transparent 50%); pointer-events: none; } .sf-picked-card-img-novideo .sf-picked-card-overlay { /* Pri novideo karte rozšíriť overlay vyššie a tlmiť pozadie aby texty boli čitateľnejšie */ padding: 1rem 0.75rem 0.6rem; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 80%, transparent 100%); } /* Vycentrovaná ikona kamery — koncert zatiaľ bez videa. Padding-bottom posunie ikonu vyššie nad overlay s program/performers */ .sf-picked-card-novideo-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-bottom: 60px; /* výška overlay-u s program + performers (mínus ~5px aby ikona šla nižšie) */ display: flex; align-items: center; justify-content: center; color: rgba(212, 168, 67, 0.45); font-size: 4rem; pointer-events: none; z-index: 1; transition: transform .4s ease, color .4s ease; } .sf-picked-card:hover .sf-picked-card-novideo-icon { transform: scale(1.08); color: rgba(212, 168, 67, 0.7); } /* Variant: presne vycentrovaná ikona (bez kompenzácie pre overlay) — pre kalendár modal */ .sf-picked-card-novideo-icon-centered { padding-bottom: 0 !important; } /* Spodný overlay: program + účinkujúci */ .sf-picked-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 0.75rem 0.6rem; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 65%, transparent 100%); color: #fff; } .sf-picked-card-program { font-size: 0.9rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-picked-card-performers { font-size: 0.9rem; font-weight: 200; font-style: italic; line-height: 1.35; letter-spacing: 0.03em; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mobile carousel — 1 karta + šípky + swipe */ .sf-picked-arrows { display: none; } /* skryté na desktope */ .sf-picked-swipe-text { display: none; } /* skryté na desktope */ @media (max-width: 576px) { /* Carousel wrapper */ .sf-picked-carousel { position: relative; overflow: hidden; } .sf-picked-carousel .row { flex-wrap: nowrap; transition: transform 0.3s ease; } .sf-picked-carousel .col { flex: 0 0 100%; max-width: 100%; } /* Obrázok zostáva 16:9 aj na mobile */ /* Šípky */ .sf-picked-arrows { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 0.75rem; } .sf-picked-arrow { background: transparent; border: 1px solid var(--sf-border); color: var(--sf-text-muted); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 0.85rem; flex-shrink: 0; } .sf-picked-arrow:hover, .sf-picked-arrow:active { border-color: var(--sf-accent); color: var(--sf-accent); } .sf-picked-counter { font-size: 0.8rem; color: var(--sf-text-muted); font-weight: 500; min-width: 3rem; text-align: center; } /* Berry swipe helper text */ .sf-picked-swipe-text { display: block; text-align: center; font-size: 0.8rem; color: var(--sf-cta); font-weight: 700; margin-top: 0.5rem; letter-spacing: 0.03em; } /* Overlay menší na mobile */ .sf-picked-card-overlay { padding: 1.5rem 0.5rem 0.4rem; } .sf-picked-card-program { font-size: 0.85rem; } .sf-picked-card-performers { font-size: 0.85rem; } } /* ============================================ HOMEPAGE ============================================ */ /* Hero fallback — tmavý v oboch režimoch (keď nie sú bannery) */ .sf-hero { background-color: var(--sf-card-bg); border: 1px solid var(--sf-border); } /* Concert cards */ .concert-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .concert-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.25) !important; } /* Accent button (zlatý obrys) */ .sf-btn-accent { border: 2px solid var(--sf-accent); color: var(--sf-accent); background: transparent; border-radius: 0.5rem; transition: all 0.2s ease; } .sf-btn-accent:hover { background-color: var(--sf-accent); color: var(--sf-badge-text); } /* Cycle buttons */ .sf-btn-cycle { border: 1px solid var(--sf-border); color: var(--sf-text-body); background: transparent; transition: all 0.2s ease; } .sf-btn-cycle:hover { border-color: var(--sf-accent); color: var(--sf-accent); background: transparent; } /* Cycle/season badge count */ .sf-badge-count { background-color: var(--sf-accent) !important; color: var(--sf-badge-text) !important; } /* Draft-only badge (osoby len v draft/neaktívnych koncertoch — viditeľné len pre prihlásených) */ .sf-badge-draft { display: inline-block; font-size: .65rem; font-weight: 600; padding: .1em .45em; border-radius: .25rem; background: rgba(130, 220, 80, 0.2); color: #7ecf45; border: 1px solid rgba(130, 220, 80, 0.3); vertical-align: middle; margin-left: .3rem; text-transform: uppercase; letter-spacing: .03em; } /* Season list */ .sf-season-list { display: flex; flex-direction: column; } .sf-season-item { display: flex; color: var(--sf-text-body); text-decoration: none; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--sf-border); transition: color 0.15s ease; } .sf-season-item:last-child { border-bottom: none; } .sf-season-item:hover { color: var(--sf-accent); } /* Stats card (mobilná) */ .sf-stats-card { background-color: var(--sf-card-bg) !important; border-color: var(--sf-border) !important; } /* Conductors carousel — mobile */ @media (max-width: 576px) { .sf-conductors-carousel { overflow: hidden; } .sf-conductors-carousel .row { flex-wrap: nowrap; } .sf-conductors-carousel .col-md-6 { min-width: 100%; } } /* Spotlight carousel — mobile */ @media (max-width: 767.98px) { .sf-spotlight { padding-top: 0.25rem !important; } .sf-spotlight-carousel { overflow: hidden; } .sf-spotlight-carousel .row { flex-wrap: nowrap; --bs-gutter-y: 0; } .sf-spotlight-carousel .col { min-width: 100%; } } /* Infinite carousel clones — hide on desktop (non-carousel) layouts */ @media (min-width: 577px) { .sf-picked-carousel .sf-carousel-clone, .sf-conductors-carousel .sf-carousel-clone { display: none !important; } } @media (min-width: 768px) { .sf-spotlight-carousel .sf-carousel-clone { display: none !important; } } /* Conductors section */ .sf-conductors { padding: 2.5rem 0; } .sf-conductors-title { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sf-accent); margin-bottom: 2rem; font-variant-ligatures: common-ligatures discretionary-ligatures; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.25); } .sf-conductor-box { height: 100%; display: flex; flex-direction: column; } .sf-conductor-card { display: block; position: relative; overflow: hidden; text-decoration: none; aspect-ratio: 16 / 9; flex-shrink: 0; } .sf-conductor-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.02); /* orez 1-2px čierny okraj z bannerov */ transition: transform 0.4s ease, filter 0.4s ease; filter: saturate(0.85) brightness(0.7); } .sf-conductor-card:hover .sf-conductor-photo { transform: scale(1.05); filter: saturate(1) brightness(0.8); } .sf-conductor-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b3035 0%, #1a1d20 100%); color: rgba(255,255,255,0.7); font-size: 4rem; font-weight: 300; letter-spacing: 0.15em; font-family: 'Fira Sans Condensed', sans-serif; } .sf-conductor-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.25rem 0.75rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%); } .sf-conductor-name { font-weight: 600; font-size: 1.25rem; margin: 0; letter-spacing: 0.02em; color: var(--sf-accent); line-height: 1.3; } .sf-conductor-role { color: rgba(255,255,255,0.6); font-size: 0.9rem; font-weight: 200; font-style: italic; letter-spacing: 0.03em; } .sf-conductor-text { padding: 1rem 1.25rem 0; flex: 1; } .sf-conductor-quote-wrap { position: relative; } .sf-conductor-quote { font-style: italic; font-weight: 300; font-size: 0.95rem; line-height: 1.6; letter-spacing: 0.02em; color: rgba(255,255,255,0.7); margin: 0; white-space: pre-line; } .sf-conductor-fade { display: none; } .sf-conductor-chevron { display: none; } .sf-quote-toggle { display: inline-block; margin-top: 0.3rem; font-size: 0.8rem; font-style: normal; font-weight: 600; color: var(--sf-accent, #c9a84c); text-decoration: none; } .sf-quote-toggle:hover { text-decoration: underline; } @media (max-width: 767.98px) { .sf-conductor-text { cursor: pointer; padding-bottom: 0.5rem; user-select: none; -webkit-user-select: none; } .sf-conductor-fade { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5rem; background: linear-gradient(to bottom, transparent, var(--sf-bg, #1a1a2e)); pointer-events: none; } .sf-conductor-chevron { display: flex; justify-content: center; padding: 0.35rem 0 0.1rem; color: var(--sf-accent, #c9a84c); font-size: 0.85rem; opacity: 0.8; } .sf-conductor-text--expanded .sf-conductor-fade { display: none; } /* Collapsed: clamp to 3 lines */ .sf-conductor-quote--clamped { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } } .sf-conductor-cta { display: inline-block; font-size: 0.8rem; font-weight: 600; color: #0f0f1a; background-color: var(--sf-accent); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 1rem; border-radius: 0; transition: background-color 0.2s, color 0.2s; } .sf-conductor-cta:hover { background-color: var(--sf-accent-hover); color: #0f0f1a; } /* Homepage CTA — rovnaká šírka */ .sf-home-cta { min-width: 12rem; text-align: center; } /* ============================================ SPOTLIGHT — 4 osobnosti z archívu Horizontálny layout: fotka vľavo, info vpravo ============================================ */ .sf-spotlight { padding: 1rem 0; } .sf-spotlight-title { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sf-accent); margin-bottom: 2rem; font-variant-ligatures: common-ligatures discretionary-ligatures; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.25); } /* Karta = flexbox riadok (fotka | info) s ohraničením, rovnaká výška */ /* Celá karta je link na osobu */ .sf-spot-card { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem; border: 1px solid var(--sf-border); border-radius: 0.75rem; background: var(--sf-card-bg, transparent); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; height: 100%; text-decoration: none; color: inherit; } .sf-spot-card:hover { border-color: var(--sf-accent); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transform: scale(1.02); } /* Portrét — kruh s duotone filtrom, vľavo */ .sf-spot-photo-wrap { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: var(--sf-elevated); flex-shrink: 0; } .sf-spot-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); /* orez okrajov */ filter: var(--sf-duotone-default, url(#duotone-indigo)); transition: filter 0.4s ease, transform 0.4s ease; } .sf-spot-card:hover .sf-spot-photo { filter: var(--sf-duotone-hover, url(#duotone-warm)); transform: scale(1.08); } .sf-spot-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--sf-text-muted); font-size: 2.2rem; } .sf-spot-initials { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05em; color: var(--sf-accent); opacity: .7; } /* Info blok — vpravo od fotky */ .sf-spot-info { min-width: 0; /* umožní text-overflow */ padding-top: 0.1rem; } /* Typ osobnosti — malé uppercase */ .sf-spot-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sf-text-muted); margin-bottom: 0.1rem; } /* Riadok: meno + funkcia inline */ .sf-spot-nameline { line-height: 1.35; margin-bottom: 0.35rem; } .sf-spot-name { font-size: 1rem; font-weight: 700; color: var(--sf-accent); } .sf-spot-func { font-size: 0.8rem; font-style: italic; color: var(--sf-text-muted); margin-bottom: 0.35rem; } .sf-spot-years { font-style: normal; font-size: 0.75rem; } /* Koncerty — zoznam linkov */ .sf-spot-concerts { list-style: none; padding: 0; margin: 0; } .sf-spot-concerts li { font-size: 0.78rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sf-text-muted); } .sf-spot-concert-date { font-weight: 600; margin-right: 0.15rem; white-space: nowrap; } .sf-spot-concert-name { font-weight: 300; } /* Diela skladateľov — kurzíva */ .sf-spot-works li { font-style: italic; } /* Spotlight — flow layout (všetko v jednom odseku) */ .sf-spot-flow { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; font-size: 0.85rem; } .sf-spot-flow .sf-spot-func { color: var(--sf-text-muted, #999); font-size: 0.85rem; } .sf-spot-flow .sf-spot-func::before { content: ' '; } .sf-spot-works-inline { font-style: italic; color: var(--sf-text-muted, #999); font-size: 0.8rem; } /* Mobile: 1 stĺpec, menší kruh */ @media (max-width: 575.98px) { .sf-spot-card { padding: 0.75rem; gap: 0.65rem; } .sf-spot-card:hover { transform: none; } .sf-spot-photo-wrap { width: 62px; height: 62px; } .sf-spot-name { font-size: 0.85rem; } .sf-spot-concerts li { font-size: 0.72rem; } } /* Category spotlight (osobnosti na category landing pages) */ .sf-cat-spotlight { padding: 0.5rem 0; } /* Categories section */ .sf-categories { padding: 1rem 0 0 0; } .sf-categories-title { font-family: 'Fira Sans Condensed', 'Fira Sans', sans-serif; font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sf-accent); margin-bottom: 2rem; font-variant-ligatures: common-ligatures discretionary-ligatures; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.25); } .sf-cat-card { display: block; text-decoration: none; } .sf-cat-card-header { padding: 0.45rem 0; /* vyšší padding — vyrovnáva absenci berry badge (Monk detail) */ } .sf-cat-card-name { font-family: 'Fira Sans', sans-serif; color: var(--sf-accent); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-ligatures: common-ligatures discretionary-ligatures; display: block; } .sf-cat-card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 9; } .sf-cat-card-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); /* orez 1-2px čierny okraj z bannerov */ transition: transform 0.4s ease, filter 0.4s ease; filter: saturate(0.8) brightness(0.7); } .sf-cat-card:hover .sf-cat-card-img { transform: scale(1.07); filter: saturate(1) brightness(0.8); } .sf-cat-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--sf-elevated); color: var(--sf-text-muted); font-size: 2.5rem; } .sf-cat-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem 0.75rem 0.6rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 65%, transparent 100%); } .sf-cat-card-desc { font-size: 0.9rem; font-weight: 200; font-style: italic; color: rgba(255,255,255,0.8); letter-spacing: 0.03em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Quicklink cards */ .sf-quicklink { border-color: var(--sf-border) !important; transition: transform 0.2s ease, border-color 0.2s ease; } .sf-quicklink:hover { transform: translateY(-4px); border-color: var(--sf-accent) !important; } /* ============================================ MINI-KALENDÁR (homepage) Adaptívny: jednoriadkový ak sa zmestí, inak klasický 7-stĺpcový month-view. 31 dní = základ šírky pre desktop. ============================================ */ .sf-mini-cal { position: relative; /* Bez kartového obalu — sedí priamo na pozadí stránky */ padding: 0; } /* Hlavička: navigácia vľavo, DNES vpravo */ .sf-mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .sf-mini-cal-nav { display: flex; align-items: center; gap: 0.5rem; } .sf-mini-cal-title { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--sf-accent, #c9a84c); text-transform: uppercase; white-space: nowrap; min-width: 130px; /* fixná šírka = šípka doprava vždy na mieste */ text-align: center; } .sf-mini-cal-arrow { background: transparent; border: 1px solid var(--sf-accent, #c9a84c); color: var(--sf-accent, #c9a84c); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 0.75rem; flex-shrink: 0; } .sf-mini-cal-arrow:hover { background: var(--sf-accent, #c9a84c); color: #fff; } /* Link "Celý kalendár" — zlatý badge */ .sf-mini-cal-link { background: transparent; border: 1px solid var(--sf-accent, #c9a84c); color: var(--sf-accent, #c9a84c); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; } .sf-mini-cal-link:hover { background: var(--sf-accent, #c9a84c); color: #fff; text-decoration: none; } /* Tlačidlo DNES — berry keď nie je aktuálny mesiac, šedé keď je */ .sf-mini-cal-today { background: transparent; border: 1px solid var(--sf-cta, #8c4a6e); color: var(--sf-cta, #8c4a6e); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .sf-mini-cal-today:hover:not(:disabled) { background: var(--sf-cta, #8c4a6e); color: #fff; } .sf-mini-cal-today:disabled { border-color: var(--sf-border); color: var(--sf-text-muted); opacity: 0.5; cursor: default; } /* ---- RIADKOVÝ mód (flex-wrap: 1 alebo 2 riadky) ---- */ .sf-mini-cal-row { display: flex; align-items: flex-end; justify-content: flex-start; /* druhý riadok zarovnaný doľava */ gap: 2px; transition: opacity 0.2s; flex-wrap: wrap; row-gap: 22px; /* väčšia medzera medzi riadkami */ } .sf-mini-cal-row.sf-loading { opacity: 0.4; } /* Deň — stĺpec: skratka hore + číslo dole */ /* --day-cols = ceil(daysInMonth/2) → vynúti rovnomerné 2 riadky */ .sf-mini-cal-row .sf-mini-cal-day { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1 1 0; min-width: 30px; max-width: calc((100% - (var(--day-cols, 16) - 1) * 2px) / var(--day-cols, 16)); } /* Skratka dňa týždňa nad číslom */ .sf-mini-cal-wd { font-size: 0.6rem; font-weight: 500; text-transform: lowercase; color: var(--sf-text-muted); line-height: 1; margin-bottom: 4px; opacity: 0.7; } /* Vizuálne oddelenie týždňov — jemný accent border, žiadny extra margin */ .sf-mini-cal-row .sf-mini-cal-day.sf-week-end { border-right: 1px solid rgba(201, 168, 76, 0.25); /* accent zlatá, jemná */ padding-right: 5px; } /* Číslo dňa */ .sf-mini-cal-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 0.78rem; color: var(--sf-text-muted); border-radius: 50%; transition: border-radius 0.2s ease, background-color 0.2s ease, color 0.2s ease; } /* Deň s koncertom — krúžok */ .sf-mini-cal-day.sf-has-concert .sf-mini-cal-num { background-color: var(--sf-accent); color: var(--sf-badge-text); font-weight: 600; cursor: pointer; } /* Hover: krúžok → štvorček */ .sf-mini-cal-day.sf-has-concert:hover .sf-mini-cal-num { border-radius: 4px; background-color: var(--sf-accent-hover); } /* Deň s koncertom BEZ videa — len obrys */ .sf-mini-cal-day.sf-has-concert:not(.sf-has-video) .sf-mini-cal-num { background-color: transparent; border: 2px solid var(--sf-accent); color: var(--sf-accent); } .sf-mini-cal-day.sf-has-concert:not(.sf-has-video):hover .sf-mini-cal-num { border-radius: 4px; background-color: rgba(201, 168, 76, 0.15); } /* Dnešok BEZ koncertu — žiadny krúžok, len Berry číslo */ .sf-mini-cal-day.sf-today:not(.sf-has-concert) .sf-mini-cal-num { color: var(--sf-cta); font-weight: 700; } /* Dnešok S koncertom — plná Berry farba */ .sf-mini-cal-day.sf-today.sf-has-concert .sf-mini-cal-num { background-color: var(--sf-cta) !important; color: #fff !important; border: none !important; font-weight: 700; } .sf-mini-cal-day.sf-today.sf-has-concert:hover .sf-mini-cal-num { background-color: var(--sf-cta-hover) !important; border-radius: 4px; } /* ---- MONTH-VIEW mód (grid) ---- */ .sf-mini-cal-mobile { transition: opacity 0.2s; } .sf-mini-cal-mobile.sf-loading { opacity: 0.4; } .sf-mcal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .sf-mcal-wd { text-align: center; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sf-text-muted); padding: 2px 0; } .sf-mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .sf-mcal-day { display: flex; align-items: center; justify-content: center; padding: 3px 0; position: relative; } .sf-mcal-day.sf-empty { visibility: hidden; } .sf-mcal-num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 0.75rem; color: var(--sf-text-muted); border-radius: 50%; transition: border-radius 0.2s ease, background-color 0.2s ease, color 0.2s ease; } /* Mobile/grid koncert štýly */ .sf-mcal-day.sf-has-concert .sf-mcal-num { background-color: var(--sf-accent); color: var(--sf-badge-text); font-weight: 600; cursor: pointer; } .sf-mcal-day.sf-has-concert:hover .sf-mcal-num { border-radius: 4px; background-color: var(--sf-accent-hover); } .sf-mcal-day.sf-has-concert:not(.sf-has-video) .sf-mcal-num { background-color: transparent; border: 2px solid var(--sf-accent); color: var(--sf-accent); } .sf-mcal-day.sf-has-concert:not(.sf-has-video):hover .sf-mcal-num { border-radius: 4px; background-color: rgba(201, 168, 76, 0.15); } /* Dnešok BEZ koncertu — žiadny krúžok, len Berry číslo */ .sf-mcal-day.sf-today:not(.sf-has-concert) .sf-mcal-num { color: var(--sf-cta); font-weight: 700; } /* Dnešok S koncertom — plná Berry farba */ .sf-mcal-day.sf-today.sf-has-concert .sf-mcal-num { background-color: var(--sf-cta) !important; color: #fff !important; border: none !important; font-weight: 700; } .sf-mcal-day.sf-today.sf-has-concert:hover .sf-mcal-num { background-color: var(--sf-cta-hover) !important; border-radius: 4px; } /* Tooltip (spoločný) */ .sf-mini-cal-tooltip { position: absolute; z-index: 100; background: var(--sf-elevated); border: 1px solid var(--sf-border); border-radius: 0.5rem; padding: 0.4rem; min-width: 200px; max-width: 300px; box-shadow: 0 4px 16px rgba(0,0,0,.3); /* left sa počíta v JS vrátane clampovania na okraje */ } .sf-mini-cal-tip-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 0.25rem; text-decoration: none; color: var(--sf-text-body); transition: background-color 0.15s; } .sf-mini-cal-tip-item:hover { background-color: rgba(255,255,255,.08); color: var(--sf-accent); } [data-bs-theme="light"] .sf-mini-cal-tip-item:hover { background-color: rgba(0,0,0,.04); } .sf-mini-cal-tip-title { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Swipe hint text — skrytý na desktope */ .sf-mini-cal-swipe-text { display: none; } /* Mobile — menej bočného priestoru, touch-friendly */ @media (max-width: 576px) { .sf-mini-cal { margin-left: 0; margin-right: 0; padding: 0 0.25rem; /* jemné okraje vľavo/vpravo */ } /* Skryť kruhové šípky navigácie na mobile */ .sf-mini-cal-arrow { display: none; } /* Mesiac vľavo, DNES vpravo — oba ako veľký plain text */ .sf-mini-cal-nav { gap: 0; } .sf-mini-cal-title { min-width: 0; text-align: left; font-size: 1.15rem; font-weight: 700; } .sf-mini-cal-today { border: 1px solid var(--sf-cta, #8c4a6e); background: transparent; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 600; color: var(--sf-cta, #8c4a6e); text-transform: none; letter-spacing: normal; cursor: pointer; white-space: nowrap; transition: all 0.2s; } .sf-mini-cal-today:hover:not(:disabled) { background: var(--sf-cta, #8c4a6e); color: #fff; } .sf-mini-cal-today:disabled { border-color: var(--sf-border); color: var(--sf-text-muted); opacity: 0.5; cursor: default; } /* Fixná šírka stĺpcov — vertikálne centrovanie pre rôzne veľkosti */ .sf-mini-cal-row .sf-mini-cal-day { min-width: 0; min-height: 34px; flex: 0 0 calc(100% / var(--day-cols, 11)); max-width: calc(100% / var(--day-cols, 11)); overflow: visible; white-space: nowrap; text-align: center; justify-content: center; } /* Skratky dní — skryté na mobile, stačia len krúžky */ .sf-mini-cal-row .sf-mini-cal-wd { display: none; } /* Nedeľný separátor — skryť na mobile (padá na koniec riadku) */ .sf-mini-cal-row .sf-mini-cal-day.sf-week-end { border-right: none; padding-right: 0; } /* Riadok — vertikálne centrovanie (všetky bunky na stredovú os) */ .sf-mini-cal-row { row-gap: 10px; gap: 0; align-items: center; } /* Neaktívne čísla dní — drobné, jasne biele, vertikálne na stredovej osi */ .sf-mini-cal-row .sf-mini-cal-num { width: auto; height: auto; min-height: 0; padding: 2px 0; font-size: 0.5rem; color: rgba(255,255,255,.65); opacity: 1; white-space: nowrap; border-radius: 0; } [data-bs-theme="light"] .sf-mini-cal-row .sf-mini-cal-num { color: rgba(0,0,0,.35); } /* Aktívne krúžky (dni s koncertom) — veľké, výrazné, margin 1px = nikdy sa nezlievajú */ .sf-mini-cal-row .sf-has-concert .sf-mini-cal-num { width: 30px; height: 30px; padding: 0; font-size: 0.88rem; opacity: 1; margin: 1px; border-radius: 50%; } /* Vypnúť morphing krúžok→štvorček na mobile (touch nemá hover) */ .sf-mini-cal-day.sf-has-concert:hover .sf-mini-cal-num { border-radius: 50%; background-color: var(--sf-accent); } .sf-mini-cal-day.sf-has-concert:not(.sf-has-video):hover .sf-mini-cal-num { border-radius: 50%; background-color: transparent; } .sf-mini-cal-day.sf-today.sf-has-concert:hover .sf-mini-cal-num { border-radius: 50%; } /* Swipe hint text pod kalendárom — žiarivo, Berry farba */ .sf-mini-cal-swipe-text { display: block; text-align: center; font-size: 0.8rem; color: var(--sf-cta); opacity: 1; font-weight: 700; margin-top: 1rem; letter-spacing: 0.03em; } .sf-mini-cal-tooltip { min-width: 180px; } .sf-mcal-wd { font-size: 0.6rem; padding: 1px 0; } .sf-mcal-day { padding: 2px 0; } .sf-mcal-num { width: 24px; height: 24px; font-size: 0.68rem; } } /* ============================================ BACK TO TOP ============================================ */ .btn-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 1050; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,.2); background-color: var(--sf-accent); border-color: var(--sf-accent); color: #fff; } .btn-to-top:hover { background-color: var(--sf-accent-hover); border-color: var(--sf-accent-hover); } .btn-to-top.show { opacity: 1; visibility: visible; } /* ============================================ SEARCH ============================================ */ /* Navbar search kbd badge — visible only on desktop (d-none d-lg-inline) */ .sf-search-kbd { font-size: 0.6rem; padding: 0.15em 0.4em; margin-left: 0.35em; border: 1px solid rgba(255,255,255,.3); border-radius: 0.2rem; color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); font-family: inherit; font-weight: 500; vertical-align: middle; line-height: 1; transition: border-color .2s, color .2s, background .2s; } .sf-nav-search:hover .sf-search-kbd { border-color: var(--sf-accent, #C9A84C); color: var(--sf-accent, #C9A84C); background: rgba(255,255,255,.1); } /* Nav icon buttons (help, favorites) */ .sf-nav-icon { font-size: 1.1rem; color: rgba(255,255,255,0.7) !important; } .sf-nav-icon:hover { color: #fff !important; } .sf-nav-icon.active { color: var(--sf-accent, #C9A84C) !important; } /* Search Modal — glassmorphism, bez Bootstrap backdrop (Safari kompatibilné) */ #searchModal { background: rgba(var(--sf-modal-rgb, 15, 15, 26), 0.40); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } #searchModal .modal-content { background: rgba(var(--sf-modal-rgb, 15, 15, 26), 0.75); border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.15) inset; color: var(--sf-text-body, #e0e0e0); } #searchModal .modal-header .input-group .input-group-text, #searchModal .modal-header .input-group .form-control { border: none !important; background: transparent !important; box-shadow: none !important; color: var(--sf-text-body, #e0e0e0); } #searchModal .modal-header .input-group .form-control::placeholder { color: rgba(255,255,255,.35); } #searchModal .modal-header .input-group .input-group-text .bi-search { color: var(--sf-accent, #c9a84c) !important; } #searchModal .modal-header .btn-close { opacity: .4; filter: invert(1); } #searchModal .modal-footer { border-top: 1px solid rgba(255,255,255,.06); } #searchModal .modal-footer kbd { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: var(--sf-accent, #c9a84c); border-radius: 0.25rem; padding: 0.1em 0.4em; font-size: 0.8em; } #searchModal .modal-footer .text-muted { color: rgba(255,255,255,.4) !important; } /* Light mode — svetlý modal */ [data-bs-theme="light"] #searchModal { background: rgba(255, 255, 255, 0.45); } [data-bs-theme="light"] #searchModal .modal-content { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0,0,0,.1); box-shadow: 0 24px 80px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.1) inset; color: var(--sf-text-body, #444); } [data-bs-theme="light"] #searchModal .modal-header .input-group .form-control { color: #222 !important; } [data-bs-theme="light"] #searchModal .modal-header .input-group .form-control::placeholder { color: rgba(0,0,0,.35); } [data-bs-theme="light"] #searchModal .modal-header .input-group .input-group-text { color: #444 !important; } [data-bs-theme="light"] #searchModal .modal-header .btn-close { filter: none; opacity: .5; } [data-bs-theme="light"] #searchModal .modal-footer { border-top: 1px solid rgba(0,0,0,.08); } [data-bs-theme="light"] #searchModal .modal-footer kbd { background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12); color: var(--sf-accent); } [data-bs-theme="light"] #searchModal .modal-footer .text-muted { color: #999 !important; } /* ============================================ SEARCH RESULTS PAGE — tabs + items ============================================ */ /* Google-style tabs */ .sf-search-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sf-border, rgba(255,255,255,.1)); overflow-x: auto; -webkit-overflow-scrolling: touch; } .sf-search-tab { background: none; border: none; padding: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 500; color: var(--sf-text-muted, #999); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; } .sf-search-tab:hover { color: var(--sf-text-body, #e0e0e0); } .sf-search-tab.active { color: var(--sf-accent, #c9a84c); border-bottom-color: var(--sf-accent, #c9a84c); } .sf-search-tab-count { font-size: 0.75rem; font-weight: 600; margin-left: 0.3rem; opacity: 0.6; } .sf-search-tab.active .sf-search-tab-count { opacity: 1; } /* Section titles */ .sf-search-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sf-accent, #c9a84c); padding: 0.75rem 0 0.35rem; border-bottom: 1px solid var(--sf-border, rgba(255,255,255,.06)); margin-bottom: 0.75rem; } /* Listmatch — TAB nav so zlatou čiarou (rovnaký dizajn ako sf-concert-tab-nav) */ .sf-search-listmatch-tabnav { display: flex; border-bottom: 1px solid rgba(201, 168, 76, 0.35); } /* Linky na zoznamy pod TAB-om — diskrétne, biele, bez podčiarknutia */ .sf-search-listmatch-link { color: var(--sf-text, inherit); text-decoration: none; font-size: 0.95rem; transition: color 0.15s ease; } .sf-search-listmatch-link:hover, .sf-search-listmatch-link:focus { color: var(--sf-accent, #c9a84c); text-decoration: none; } .sf-search-section-count { display: inline-block; background: rgba(var(--sf-accent-rgb, 201, 168, 76), 0.15); color: var(--sf-accent, #c9a84c); font-weight: 600; font-size: 0.7rem; border-radius: 1rem; padding: 0.2em 0.55em; margin-left: 0.25rem; } /* Result items */ .sf-search-result-item { display: block; padding: 0.2rem 0.5rem; color: var(--sf-text-body, #e0e0e0); text-decoration: none; transition: color 0.15s ease; font-size: 0.93rem; line-height: 1.4; } .sf-search-result-item:hover { color: var(--sf-accent, #c9a84c); text-decoration: none; } /* Search — "Viac" link */ .sf-search-more { display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--sf-accent, #c9a84c); text-decoration: none; } .sf-search-more:hover { text-decoration: underline; } /* Search — mini concert cards */ .sf-search-concert-card { display: flex; text-decoration: none; color: inherit; border: 1px solid var(--sf-border, rgba(255,255,255,0.08)); border-radius: 8px; overflow: hidden; transition: border-color 0.2s, transform 0.15s; height: 100%; } .sf-search-concert-card:hover { border-color: var(--sf-accent, #c9a84c); text-decoration: none; transform: translateY(-1px); } .sf-search-concert-img { flex-shrink: 0; width: 120px; min-height: 80px; background: var(--sf-bg-elevated, #1a1a2e); } .sf-search-concert-img img { width: 100%; height: 100%; object-fit: cover; } .sf-search-concert-body { flex: 1; padding: 0.5rem 0.6rem; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sf-search-concert-date { font-size: 0.7rem; color: var(--sf-accent, #c9a84c); font-weight: 600; } .sf-search-interview-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; margin-right: 0.3rem; } .sf-search-concert-name { font-size: 0.85rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-search-concert-program { font-size: 0.75rem; color: var(--sf-text-muted, #999); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-search-concert-performers { font-size: 0.72rem; color: var(--sf-text-muted, #888); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ DARK MODE OVERRIDES (pre oba dark režimy — indigo aj modrá) ============================================ */ /* Umelecké listy — mená (hardcoded #1a1a1a → svetlé) */ [data-bs-theme="dark"] .composers-name, [data-bs-theme="dark"] .conductors-name, [data-bs-theme="dark"] .performers-name, [data-bs-theme="dark"] .voices-name, [data-bs-theme="dark"] .persons-name, [data-bs-theme="dark"] .ensembles-name, [data-bs-theme="dark"] .ensemble-detail-name, [data-bs-theme="dark"] .character-name, [data-bs-theme="dark"] .char-person-name, [data-bs-theme="dark"] .char-concert-name, [data-bs-theme="dark"] .ba-name { color: #e0e0e0; } /* Umelecké listy — separátory (rgba(0,0,0,.06) → svetlé) */ [data-bs-theme="dark"] .composers-item, [data-bs-theme="dark"] .performers-item, [data-bs-theme="dark"] .voices-item, [data-bs-theme="dark"] .persons-item, [data-bs-theme="dark"] .ensembles-item, [data-bs-theme="dark"] .ensemble-detail-item, [data-bs-theme="dark"] .characters-item, [data-bs-theme="dark"] .char-person-item, [data-bs-theme="dark"] .char-concert-item, [data-bs-theme="dark"] .ba-item { border-bottom-color: rgba(255,255,255,.08) !important; } /* Umelecké listy — hover pozadie */ [data-bs-theme="dark"] .composers-item a:hover, [data-bs-theme="dark"] .performers-item a:hover, [data-bs-theme="dark"] .voices-item a:hover, [data-bs-theme="dark"] .persons-item a:hover, [data-bs-theme="dark"] .ensemble-detail-item a:hover, [data-bs-theme="dark"] .characters-item a:hover, [data-bs-theme="dark"] .ba-item a:hover { background-color: rgba(255,255,255,.05); } /* Umelecké listy — sekčné nadpisy (písmeno abecedy) */ [data-bs-theme="dark"] .composers-section-letter, [data-bs-theme="dark"] .conductors-section-letter, [data-bs-theme="dark"] .performers-section-letter, [data-bs-theme="dark"] .voices-section-letter, [data-bs-theme="dark"] .persons-section-letter { border-bottom-color: rgba(255,255,255,.15) !important; } /* Ensemble detail — sekčné nadpisy + lineup border */ [data-bs-theme="dark"] .ensemble-section-title { border-bottom-color: rgba(255,255,255,.15) !important; } [data-bs-theme="dark"] .ensemble-lineup-header { border-bottom-color: rgba(255,255,255,.08) !important; } [data-bs-theme="dark"] .ensemble-lineup-item { border-bottom-color: rgba(255,255,255,.06) !important; } /* Conductor/performer detail — sekčné nadpisy */ [data-bs-theme="dark"] .conductors-tab-section { border-bottom-color: rgba(255,255,255,.15) !important; } /* ===== Hitparáda — fancy list ===== */ /* Hitparáda karty — reuse sf-picked-card, len overlay badges */ /* Nadpis — červené srdce */ .sf-hp-title-heart { color: #dc3545; } /* ── Breadcrumb — zlaté separátory ── */ .breadcrumb { --bs-breadcrumb-divider: '|'; --bs-breadcrumb-divider-color: var(--sf-accent, #c9a84c); font-size: 1rem; font-feature-settings: "liga" 1, "clig" 1; font-variant-ligatures: common-ligatures; } .breadcrumb a { color: var(--sf-text-body, #ccc); font-weight: 600; text-decoration: none; } .breadcrumb a:hover { color: var(--sf-accent, #c9a84c); text-decoration: underline; } .breadcrumb .breadcrumb-item.active { color: var(--sf-text-muted, #888); } /* ── Concert search bar — veľký, zaoblený, senior-friendly ── */ .sf-search-bar { display: flex; align-items: stretch; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; overflow: hidden; margin-bottom: 1.25rem; transition: border-color 0.2s; } .sf-search-bar:focus-within { border-color: var(--sf-accent, #c9a84c); } .sf-search-bar .sf-search-input { flex: 1; font-size: 1.15rem; padding: 0.65rem 1rem; border: none; border-radius: 0; background: var(--sf-card-bg, #1a1a2e); color: var(--sf-text-body, #ccc); outline: none; } .sf-search-bar .sf-search-input::placeholder { color: var(--sf-text-muted, #888); opacity: 0.7; } .sf-search-bar .sf-search-btn, .sf-search-bar .sf-search-clear { padding: 0.65rem 0.85rem; font-size: 1.1rem; border: none; border-radius: 0; background: transparent; cursor: pointer; transition: background 0.15s; } .sf-search-bar .sf-search-btn { color: var(--sf-text-muted, #888); transition: color 0.2s; } .sf-search-bar .sf-search-btn:hover { color: var(--sf-accent, #c9a84c); background: rgba(201, 168, 76, 0.1); } .sf-search-bar:focus-within .sf-search-btn { color: var(--sf-accent, #c9a84c); } .sf-search-bar .sf-search-clear { color: var(--sf-text-muted, #888); border-left: 1px solid var(--bs-border-color, #dee2e6); transition: color 0.2s; } .sf-search-bar .sf-search-clear:hover { color: var(--sf-accent, #c9a84c); background: rgba(201, 168, 76, 0.08); } .sf-search-bar:focus-within .sf-search-clear { color: var(--sf-accent, #c9a84c); border-left-color: rgba(201, 168, 76, 0.25); } /* Počet v hlavičke — zlatý badge superscript */ .sf-search-count { display: inline-block; font-size: 0.45em; font-weight: 700; color: #000; background: var(--sf-accent, #c9a84c); padding: 0.1em 0.4em; border-radius: 0.3em; vertical-align: super; line-height: 1; margin-left: 0.15rem; } /* Light mode */ [data-bs-theme="light"] .sf-search-bar .sf-search-input { background: #fff; color: #333; } [data-bs-theme="light"] .sf-search-bar { border-color: var(--bs-border-color, #dee2e6); } [data-bs-theme="light"] .sf-search-bar:focus-within { border-color: var(--sf-accent, #c9a84c); } /* Hitparáda — period filter chips */ .sf-hp-filters { display: inline-flex; gap: 0.4rem; margin-bottom: 0.75rem; } .sf-hp-chip { display: inline-block; padding: 0.25rem 0.85rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 999px; border: 1.5px solid var(--sf-accent, #c9a84c); color: var(--sf-accent, #c9a84c); background: transparent; cursor: pointer; transition: background 0.2s, color 0.2s; user-select: none; line-height: 1.4; } .sf-hp-chip:hover { background: rgba(201, 168, 76, 0.12); } .sf-hp-chip.active { background: var(--sf-accent, #c9a84c); color: #1a1a2e; font-weight: 600; } /* Likes berry kruh (pravý horný roh karty) */ .sf-hp-card-likes { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sf-cta, #AC1E61); color: #fff; font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(4px); z-index: 2; } /* Karta info pod obrázkom */ .sf-hp-card-body { padding: 0.65rem 0.75rem; } .sf-hp-card-title { font-weight: 600; font-size: 0.95rem; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .sf-hp-card:hover .sf-hp-card-title { color: #0d6efd; } .sf-hp-card-meta { font-size: 0.82rem; color: #888; margin-top: 0.15rem; } /* Zvyšok — umelecký list */ /* Hitparáda list (list-group-flush štýl, ako kalendár) */ .sf-hp-list { margin-bottom: 0; } .sf-hp-item.list-group-item { border-color: rgba(0,0,0,.06); transition: background-color 0.15s ease; } .sf-hp-item.list-group-item:hover { background-color: rgba(0,0,0,.02); } .sf-hp-item:hover .sf-hp-name { color: var(--sf-accent, #c9a84c); } /* Berry kruh (zoznam — ľavá strana) */ .sf-hp-hearts-badge { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sf-cta, #AC1E61); color: #fff; font-size: 0.78rem; font-weight: 700; opacity: 0.8; transition: opacity 0.2s ease; } .sf-hp-item:hover .sf-hp-hearts-badge { opacity: 1; } /* Responzivita */ @media (max-width: 576px) { .sf-hp-hearts-badge { flex: 0 0 2rem; width: 2rem; height: 2rem; font-size: 0.7rem; } } /* Dark mode — hitparáda */ [data-bs-theme="dark"] .sf-hp-item.list-group-item { border-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .sf-hp-item.list-group-item:hover { background-color: rgba(255,255,255,.05); } /* ===== Scroll Reveal & Stagger ===== */ .sf-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .sf-reveal.sf-visible { opacity: 1; transform: none; } /* Staggered children — .col inside .sf-stagger */ .sf-stagger > .col { opacity: 0; transform: translateY(25px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .sf-visible .sf-stagger > .col { opacity: 1; transform: none; } /* Lazy fade-in hitparáda list items */ @keyframes hp-item-enter { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: none; } } .sf-hp-item { animation: hp-item-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Accessible: no animations for reduced-motion users */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sf-reveal, .sf-stagger > .col { opacity: 1 !important; transform: none !important; } .sf-hp-item { opacity: 1 !important; } .sf-loader span { transform: scaleY(0.7) !important; } .sf-hero-slide { transition: none !important; } .sf-hub-card:hover, .sf-picked-card:hover { transform: none !important; } } /* ── Spinner: Audio Equalizer ─────────────────────────── */ .sf-loader { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; } .sf-loader span { width: 4px; background: var(--sf-accent, #c9a84c); border-radius: 2px; animation: sf-bars 1s ease-in-out infinite; } .sf-loader span:nth-child(1) { height: 40%; animation-delay: 0s; } .sf-loader span:nth-child(2) { height: 70%; animation-delay: 0.15s; } .sf-loader span:nth-child(3) { height: 50%; animation-delay: 0.3s; } .sf-loader span:nth-child(4) { height: 85%; animation-delay: 0.45s; } /* Small variant — for inline / buttons / sentinels */ .sf-loader-sm { height: 16px; } .sf-loader-sm span { width: 3px; gap: 2px; } @keyframes sf-bars { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } } /* Gold color for any remaining Bootstrap spinners */ .spinner-border { color: var(--sf-accent, #c9a84c); } /* ============================================ TEAM LIST — About / StreamTeam stránka (kartový grid) ============================================ */ .sf-team-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 991px) { .sf-team-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .sf-team-list { grid-template-columns: 1fr; } } .sf-team-member { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--sf-card-bg, rgba(0,0,0,0.03)); border: 1px solid var(--sf-border, rgba(0,0,0,0.06)); transition: border-color 0.15s ease; line-height: 1.4; } .sf-team-member:hover { border-color: var(--sf-accent, #c9a84c); } .sf-team-member strong { display: block; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; } .sf-team-link { color: inherit; text-decoration: none; } .sf-team-link:hover { color: var(--sf-accent, #C9A84C); } .sf-team-role { display: block; font-style: italic; font-size: 0.82rem; opacity: 0.65; margin-top: 0.15rem; } .sf-team-role::before { content: none; } .sf-team-section-label { grid-column: 1 / -1; margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 0; font-size: 0.85rem; opacity: 0.5; letter-spacing: 0.03em; border-top: 1px solid var(--sf-border, rgba(0,0,0,0.08)); } .sf-team-server-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--sf-border, rgba(0,0,0,0.1)); font-size: 0.85rem; opacity: 0.45; } /* Dark mode */ [data-bs-theme="dark"] .sf-team-member { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .sf-team-section-label { border-top-color: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .sf-team-server-note { border-top-color: rgba(255,255,255,0.08); } /* MULTI-COLUMN TEXT (história, dlhé texty) */ .sf-columns-3 { column-count: 3; column-gap: 2rem; } /* Baseline grid: margin = 1 line-height (1.5rem = 24px) → riadky lícujú naprieč stĺpcami */ .sf-columns-3 p { margin-top: 1.5rem; margin-bottom: 0; line-height: 1.5; } .sf-columns-3 > :first-child { margin-top: 0; } @media (max-width: 991.98px) { .sf-columns-3 { column-count: 2; } } @media (max-width: 575.98px) { .sf-columns-3 { column-count: 1; } } /* TEAM MEMBER DETAIL — koncertový zoznam */ .sf-member-concerts { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 2rem; } .sf-member-concerts-header { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 1rem; color: var(--sf-text-heading, inherit); } .sf-member-concerts-header i { opacity: 0.5; margin-right: 0.4rem; } .sf-member-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; } .sf-member-stat-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; font-size: 0.8rem; border-radius: 1rem; background: rgba(0,0,0,0.06); color: inherit; letter-spacing: 0.01em; } .sf-member-stat-count { font-weight: 700; font-size: 0.75rem; background: var(--sf-accent, #C9A84C); color: #fff; border-radius: 50%; min-width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .sf-member-perpage { display: flex; gap: 0.25rem; margin-bottom: 0.8rem; } .sf-member-perpage-btn { border: 1px solid rgba(0,0,0,0.15); background: transparent; padding: 0.15rem 0.6rem; font-size: 0.78rem; border-radius: 0.25rem; cursor: pointer; color: inherit; transition: all 0.15s; } .sf-member-perpage-btn:hover { border-color: var(--sf-accent, #C9A84C); color: var(--sf-accent, #C9A84C); } .sf-member-perpage-btn.active { background: var(--sf-accent, #C9A84C); border-color: var(--sf-accent, #C9A84C); color: #fff; } .sf-member-concert-list { display: flex; flex-direction: column; } .sf-member-concert-row { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid rgba(0,0,0,0.05); text-decoration: none; color: inherit; transition: background 0.12s; } .sf-member-concert-row:hover { background: rgba(0,0,0,0.02); color: var(--sf-accent, #C9A84C); } .sf-member-concert-date { flex: 0 0 6.5rem; font-size: 0.85rem; opacity: 0.6; white-space: nowrap; font-variant-numeric: tabular-nums; } .sf-member-concert-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-member-concert-funcs { flex: 0 0 auto; max-width: 14rem; font-size: 0.82rem; font-style: italic; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .sf-member-pagination { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 0.2rem; font-size: 0.82rem; } .sf-member-page-info { opacity: 0.55; } .sf-member-page-btns { display: flex; gap: 0.25rem; } .sf-member-page-btns button { border: 1px solid rgba(0,0,0,0.15); background: transparent; padding: 0.2rem 0.6rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.82rem; color: inherit; } .sf-member-page-btns button:hover:not(:disabled) { border-color: var(--sf-accent, #C9A84C); color: var(--sf-accent, #C9A84C); } .sf-member-page-btns button:disabled { opacity: 0.3; cursor: default; } /* Mobile: funkcie pod názov */ @media (max-width: 576px) { .sf-member-concert-row { flex-wrap: wrap; gap: 0 0.6rem; } .sf-member-concert-date { flex: 0 0 auto; } .sf-member-concert-name { flex: 1 1 60%; } .sf-member-concert-funcs { flex: 1 1 100%; text-align: left; max-width: none; padding-left: 7.1rem; margin-top: -0.15rem; } } /* Dark mode */ [data-bs-theme="dark"] .sf-member-concerts { border-top-color: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .sf-member-stat-badge { background: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .sf-member-concert-row { border-top-color: rgba(255,255,255,0.06); } [data-bs-theme="dark"] .sf-member-concert-row:hover { background: rgba(255,255,255,0.03); } [data-bs-theme="dark"] .sf-member-perpage-btn { border-color: rgba(255,255,255,0.15); } [data-bs-theme="dark"] .sf-member-pagination { border-top-color: rgba(255,255,255,0.08); } [data-bs-theme="dark"] .sf-member-page-btns button { border-color: rgba(255,255,255,0.15); } /* Empty date/time inputs — dim placeholder so it's obvious they're not filled */ input[type="date"].is-empty, input[type="time"].is-empty { color: rgba(255,255,255,0.3) !important; } /* Admin AJAX toggle — no focus ring, color-coded, saved flash */ .sf-toggle { cursor: pointer; } .sf-toggle:focus, .sf-toggle:active { box-shadow: none !important; -webkit-appearance: none; border-color: rgba(255,255,255,0.25) !important; } .sf-toggle:focus-visible { box-shadow: none !important; outline: 2px solid var(--sf-accent) !important; outline-offset: 2px; -webkit-appearance: none; } .sf-toggle:checked { background-color: #198754 !important; border-color: #198754 !important; } .sf-toggle:not(:checked) { background-color: #dc3545 !important; border-color: #dc3545 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; } .sf-toggle-saved { box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.5) !important; transition: box-shadow 0.3s ease; } /* ============================================ ADMIN DARK MODE — DataTables & UI ============================================ */ /* DataTables wrapper controls (search, page length, info, pagination) */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: #2b3035; border-color: rgba(255,255,255,0.15); color: #e0e0e0; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus { background: #2b3035; border-color: var(--sf-accent, #c9a84c); color: #fff; box-shadow: 0 0 0 0.2rem rgba(201,168,76,0.25); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { background: #2b3035; border-color: rgba(255,255,255,0.15); color: #e0e0e0; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: rgba(255,255,255,0.6); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label { color: rgba(255,255,255,0.7); } /* DataTables pagination */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #e0e0e0 !important; border-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2); color: #fff !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--sf-accent, #c9a84c) !important; border-color: var(--sf-accent, #c9a84c) !important; color: #000 !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: rgba(255,255,255,0.25) !important; background: transparent !important; } /* Table vertical alignment */ table.dataTable tbody td, table.dataTable thead th { vertical-align: middle !important; } /* Table header */ [data-bs-theme="dark"] .table thead th { background: #1a1d21; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.1); } /* Table body */ [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255,255,255,0.02); } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td { background: transparent; } [data-bs-theme="dark"] .table > tbody > tr > td { border-color: rgba(255,255,255,0.06); color: #e0e0e0; } [data-bs-theme="dark"] .table-bordered { border-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .table > tbody > tr:hover > td { background: rgba(255,255,255,0.05); } /* Table sorting icon fix */ [data-bs-theme="dark"] table.dataTable thead .sorting, [data-bs-theme="dark"] table.dataTable thead .sorting_asc, [data-bs-theme="dark"] table.dataTable thead .sorting_desc { background-image: none; } /* Code tags (concert codes) */ [data-bs-theme="dark"] .table code { color: #e8b84c; background: rgba(201,168,76,0.1); padding: 0.15em 0.35em; border-radius: 3px; font-size: 0.85em; } /* DT Editor modal dark mode */ [data-bs-theme="dark"] .DTED .modal-content { background: #212529; color: #e0e0e0; } [data-bs-theme="dark"] .DTED .modal-header { border-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .DTED .modal-footer { border-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .DTED label { color: rgba(255,255,255,0.85); } [data-bs-theme="dark"] .DTED .DTE_Field_Info { color: rgba(255,255,255,0.5); } [data-bs-theme="dark"] .DTED input, [data-bs-theme="dark"] .DTED select, [data-bs-theme="dark"] .DTED textarea { background: #2b3035; border-color: rgba(255,255,255,0.15); color: #e0e0e0; } [data-bs-theme="dark"] .DTED input:focus, [data-bs-theme="dark"] .DTED select:focus, [data-bs-theme="dark"] .DTED textarea:focus { background: #2b3035; border-color: var(--sf-accent, #c9a84c); color: #fff; box-shadow: 0 0 0 0.2rem rgba(201,168,76,0.25); } [data-bs-theme="dark"] .DTED .DTE_Header { background: #1a1d21; border-color: rgba(255,255,255,0.1); color: #e0e0e0; } [data-bs-theme="dark"] .DTED .DTE_Footer { background: #1a1d21; border-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .DTED_Lightbox_Wrapper { background: #212529; } /* DT Editor modal — scrollovateľný body, footer vždy viditeľný */ .modal-dialog .DTE { max-height: 85vh; display: flex; flex-direction: column; } .modal-dialog .DTE .DTE_Body { overflow-y: auto; flex: 1; min-height: 0; } .modal-dialog .DTE .DTE_Header, .modal-dialog .DTE .DTE_Footer { flex-shrink: 0; } /* DT DateTime picker — dark mode opravy CDN používa :root[data-bs-theme=dark] — musíme mať vyššiu špecificitu */ :root[data-bs-theme="dark"] div.dt-datetime { background-color: #212529; border-color: #595b5e; } :root[data-bs-theme="dark"] div.dt-datetime div.dt-datetime-title { color: #eee; } :root[data-bs-theme="dark"] div.dt-datetime thead th { color: #adb5bd; } /* Bunky kalendára — tmavé pozadie */ :root[data-bs-theme="dark"] div.dt-datetime table td { background-color: #212529; } :root[data-bs-theme="dark"] div.dt-datetime table td.selectable button { color: #eee; background-color: #373c41; } :root[data-bs-theme="dark"] div.dt-datetime table td.selectable button:hover { background-color: rgba(255, 255, 255, 0.1); } :root[data-bs-theme="dark"] div.dt-datetime table td.selectable button.dt-datetime-today { background-color: #4b5055; } :root[data-bs-theme="dark"] div.dt-datetime table td.selectable button.selected { background-color: #d4a843; color: #000; } :root[data-bs-theme="dark"] div.dt-datetime table button.empty { background-color: transparent; } :root[data-bs-theme="dark"] div.dt-datetime table td.disabled { background-color: #171b1f; } :root[data-bs-theme="dark"] div.dt-datetime table td.disabled button { color: #666; } /* Month/Year select — tmavé pozadie + hover */ :root[data-bs-theme="dark"] div.dt-datetime div.dt-datetime-title select { color: #eee; background-color: #212529; border-color: #595b5e; } :root[data-bs-theme="dark"] div.dt-datetime div.dt-datetime-title select:hover, :root[data-bs-theme="dark"] div.dt-datetime div.dt-datetime-title select:focus { background-color: #373c41; color: #fff; } /* Šípky navigácie */ :root[data-bs-theme="dark"] div.dt-datetime .dt-datetime-iconRight:after { border-left-color: #eee; } :root[data-bs-theme="dark"] div.dt-datetime .dt-datetime-iconLeft:after { border-right-color: #eee; } /* Select2 — dark mode pre Bootstrap 5 dark theme */ :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: #212529; border-color: #495057; color: #dee2e6; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: #dee2e6; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: #6c757d; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear { color: #adb5bd; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: #212529; border-color: #495057; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field { background-color: #2b3035; border-color: #495057; color: #dee2e6; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: #dee2e6; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] { background-color: #d4a843; color: #000; } :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected, :root[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] { background-color: #373c41; color: #fff; } /* ============================================ ADMIN BAR — slim white bar above navbar ============================================ */ .sf-admin-bar { background: #f8f9fa; border-bottom: 1px solid #dee2e6; font-size: 12px; line-height: 1; --sf-adminbar-h: 23px; padding: 5px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .sf-admin-bar a { color: #495057; text-decoration: none; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } .sf-admin-bar a:hover { color: #000; background: #e9ecef; } .sf-admin-bar .sf-admin-bar-left { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .sf-admin-bar .sf-admin-bar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .sf-admin-bar .sf-admin-bar-sep { color: #ced4da; margin: 0 4px; user-select: none; } .sf-admin-bar .sf-admin-bar-ctx { color: #0d6efd; font-weight: 600; } .sf-admin-bar .sf-admin-bar-ctx:hover { color: #0a58ca; background: #e7f1ff; } .sf-admin-bar .sf-admin-bar-user { color: #198754; font-weight: 600; padding: 2px 6px; margin-right: 4px; white-space: nowrap; } .sf-admin-bar .bi { font-size: 11px; } /* Inline badges */ .sf-admin-bar .sf-admin-bar-badges { display: inline-flex; gap: 3px; align-items: center; } .sf-ab-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; } .sf-ab-ok { background: #d1e7dd; color: #0f5132; } .sf-ab-off { background: #e2e3e5; color: #6c757d; } .sf-ab-warn { background: #fff3cd; color: #664d03; } .sf-ab-info { background: #cff4fc; color: #055160; } .sf-ab-live { background: #dc3545; color: #fff; } /* Inline field toggles */ .sf-ab-toggles { display: inline-flex; align-items: center; gap: 8px; } .sf-ab-toggle-label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; white-space: nowrap; } .sf-ab-toggle-label input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #0d6efd; cursor: pointer; } /* Dark mode */ [data-bs-theme="dark"] .sf-admin-bar { background: #2b2b2b; border-bottom-color: #444; } [data-bs-theme="dark"] .sf-admin-bar a { color: #adb5bd; } [data-bs-theme="dark"] .sf-admin-bar a:hover { color: #fff; background: #3a3a3a; } [data-bs-theme="dark"] .sf-admin-bar .sf-admin-bar-sep { color: #555; } [data-bs-theme="dark"] .sf-admin-bar .sf-admin-bar-ctx { color: #6ea8fe; } [data-bs-theme="dark"] .sf-admin-bar .sf-admin-bar-ctx:hover { color: #9ec5fe; background: #1a2e4a; } [data-bs-theme="dark"] .sf-admin-bar .sf-admin-bar-user { color: #75b798; } [data-bs-theme="dark"] .sf-ab-ok { background: #0f5132; color: #d1e7dd; } [data-bs-theme="dark"] .sf-ab-off { background: #495057; color: #adb5bd; } [data-bs-theme="dark"] .sf-ab-warn { background: #664d03; color: #fff3cd; } [data-bs-theme="dark"] .sf-ab-info { background: #055160; color: #cff4fc; } /* Mobile: compact */ @media (max-width: 768px) { .sf-admin-bar { font-size: 11px; padding: 4px 0; } .sf-admin-bar .sf-admin-bar-left { gap: 0; } .sf-admin-bar a { padding: 2px 4px; } .sf-admin-bar .sf-admin-bar-user { display: none; } } /* Admin bar sticky in admin layout (when it's a direct child of body, not inside .sf-sticky-header) */ body > .sf-admin-bar { position: sticky; top: 0; z-index: 1050; } body > .sf-admin-bar ~ .sf-admin-wrapper .sf-admin-sidebar { top: var(--sf-adminbar-h, 23px); height: calc(100vh - var(--sf-adminbar-h, 23px)); } body > .sf-admin-bar ~ .sf-admin-wrapper .sf-admin-topbar { top: var(--sf-adminbar-h, 23px); } /* Admin TODO alerts (lime) — visible only to logged-in admin/editor */ .sf-admin-todo { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0 0.5rem; padding: 0.6rem 0.9rem; background: #f0fff0; border: 1px solid #90ee90; border-left: 4px solid limegreen; border-radius: 6px; font-size: 0.82rem; color: #2e7d32; line-height: 1.4; } .sf-admin-todo .bi { font-size: 0.9rem; margin-top: 1px; flex-shrink: 0; } [data-bs-theme="dark"] .sf-admin-todo { background: rgba(50, 205, 50, 0.08); border-color: rgba(50, 205, 50, 0.25); border-left-color: limegreen; color: #90ee90; } /* FAQ cards */ .sf-faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .sf-faq-card { border: 1px solid var(--sf-border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .sf-faq-card.is-open { border-color: var(--sf-accent); box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .sf-faq-question { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.9rem 1.1rem; border: none; background: transparent; color: var(--sf-text); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.15s; } .sf-faq-question:hover { background: rgba(128,128,128,0.06); } .sf-faq-icon { color: var(--sf-accent); font-size: 1.1rem; flex-shrink: 0; } .sf-faq-chevron { margin-left: auto; font-size: 0.75rem; color: var(--sf-muted); flex-shrink: 0; } .sf-faq-answer { padding: 0 1.1rem 1.1rem 2.9rem; font-size: 0.92rem; line-height: 1.65; color: var(--sf-text-secondary, var(--sf-text)); } [data-bs-theme="dark"] .sf-faq-card.is-open { box-shadow: 0 2px 12px rgba(0,0,0,0.25); } /* Admin back-to-top button */ [data-bs-theme="dark"] .btn-to-top { background: rgba(201,168,76,0.9); color: #000; } /* ============================================ CMSF — Centrálny mozog SF tabuľka + badges ============================================ */ /* Tabuľka */ .sf-cmsf-table { font-size: 0.9rem; } .sf-cmsf-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sf-text-muted); font-weight: 600; border-bottom-width: 2px; padding: 0.5rem 0.6rem; } .sf-cmsf-table tbody td { padding: 0.45rem 0.6rem; vertical-align: middle; } .sf-cmsf-th-id { width: 3.5rem; } .sf-cmsf-th-date { width: 8rem; } .sf-cmsf-td-id { font-size: 0.8rem; color: var(--sf-text-muted); font-variant-numeric: tabular-nums; } .sf-cmsf-td-date { font-variant-numeric: tabular-nums; font-size: 0.85rem; } .sf-cmsf-name { font-weight: 600; } .sf-cmsf-performers { max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-cmsf-program { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--sf-text-muted); } /* Riadky podľa statusu */ .sf-cmsf-row:hover { background: rgba(var(--bs-primary-rgb), 0.06) !important; } .sf-cmsf-row-draft { opacity: 0.6; } .sf-cmsf-row-database td { border-left: 3px solid #0d6efd; } .sf-cmsf-row-database td:first-child { padding-left: calc(0.6rem - 3px); } .sf-cmsf-row-inactive { opacity: 0.45; } .sf-cmsf-row-inactive:hover { opacity: 0.8; } /* Badges */ .sf-cmsf-badges { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; } .sf-cmsf-badge { display: inline-block; padding: 0.1rem 0.35rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 0.2rem; line-height: 1.3; white-space: nowrap; text-transform: uppercase; vertical-align: middle; } .sf-cmsf-draft { background: #6c757d; color: #fff; } .sf-cmsf-database { background: #0d6efd; color: #fff; } .sf-cmsf-published { background: #198754; color: #fff; } .sf-cmsf-inactive { background: #dc3545; color: #fff; } .sf-cmsf-geo { background: #ffc107; color: #000; } .sf-cmsf-expired { background: #fd7e14; color: #fff; } /* Dark mode */ [data-bs-theme="dark"] .sf-cmsf-row:hover { background: rgba(255, 255, 255, 0.05) !important; } /* ============================================ Admin — Visibility badge (concert detail) ============================================ */ .sf-visibility-ok { background: #198754; color: #fff; font-size: 0.8rem; padding: 0.3em 0.6em; } .sf-visibility-hidden { background: #dc3545; color: #fff; font-size: 0.8rem; padding: 0.3em 0.6em; } /* ============================================ Person Detail — Fancy Concert Lists ============================================ */ /* Sekčný nadpis — uppercase, zlatý accent, počet */ .sf-person-section { margin-bottom: 2rem; } .sf-person-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-text-muted, #6c757d); padding-bottom: 0.5rem; border-bottom: 1px solid var(--sf-border, rgba(0,0,0,.1)); margin-bottom: 0; } .sf-person-section-title i { color: var(--sf-accent, #c9a84c); font-size: 1rem; } .sf-person-section-count { display: inline-block; font-size: 0.7rem; font-weight: 700; color: #000; background: var(--sf-accent, #c9a84c); padding: 0.15em 0.45em; border-radius: 0.3em; line-height: 1; margin-left: 0.15rem; } /* Paginácia controls v nadpise */ .sf-person-section-controls { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; } .sf-person-section-controls .sf-page-btn { background: none; border: 1px solid var(--sf-border, rgba(0,0,0,.15)); color: var(--sf-text-muted, #6c757d); font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; } .sf-person-section-controls .sf-page-btn:hover { border-color: var(--sf-accent, #c9a84c); color: var(--sf-accent, #c9a84c); } .sf-person-section-controls .sf-page-btn.active { background: var(--sf-accent, #c9a84c); border-color: var(--sf-accent, #c9a84c); color: #000; font-weight: 600; } .sf-person-section-controls .sf-page-btn:disabled { opacity: 0.4; cursor: default; } /* Zoznam koncertov — list items */ .sf-person-list { list-style: none; margin: 0; padding: 0; } .sf-person-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: background-color 0.15s ease, padding-left 0.15s ease; } .sf-person-item:hover { background-color: rgba(0,0,0,.02); padding-left: 0.25rem; } .sf-person-item:last-child { border-bottom: none; } /* Zlatý dátum naľavo */ .sf-person-date { flex: 0 0 5.5rem; font-size: 0.82rem; font-weight: 500; color: var(--sf-accent, #c9a84c); white-space: nowrap; letter-spacing: 0.02em; } /* Obsah vpravo — názov + detaily */ .sf-person-content { flex: 1; min-width: 0; } .sf-person-name { font-weight: 600; font-size: 0.92rem; color: var(--sf-text-body, inherit); transition: color 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-person-item:hover .sf-person-name { color: var(--sf-accent, #c9a84c); } .sf-person-detail { font-size: 0.8rem; color: var(--sf-text-muted, #6c757d); font-style: italic; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-role-sep { color: var(--sf-gold, #c5a44e); font-style: normal; } /* Ensemble/Súbory zoznam na osobnostnej stránke */ .sf-ensemble-list { display: flex; flex-direction: column; gap: 0; } .sf-ensemble-item { padding: 0.55rem 0; border-bottom: 1px solid rgba(0,0,0,.06); color: inherit; transition: padding-left 0.15s ease; } .sf-ensemble-item:last-child { border-bottom: none; } .sf-ensemble-item:hover { padding-left: 0.25rem; } .sf-ensemble-name { font-weight: 600; font-size: 0.95rem; color: var(--sf-text-body, inherit); transition: color 0.15s ease; } .sf-ensemble-item:hover .sf-ensemble-name { color: var(--sf-accent, #c9a84c); } .sf-ensemble-func { font-size: 0.8rem; color: var(--sf-text-muted, #6c757d); font-style: italic; } .sf-ensemble-count { font-size: 0.78rem; color: var(--sf-accent, #c9a84c); opacity: 0.7; margin-left: auto; white-space: nowrap; } /* Person detail — duotone portrét */ .sf-person-portrait img:hover { filter: var(--sf-duotone-hover) !important; } /* Repertoár — zoskupenie podľa autora */ .sf-repertoire-author { font-weight: 700; font-size: 0.95rem; color: var(--sf-accent, #c9a84c); padding: 0.3rem 0; border-bottom: 1px solid rgba(201,168,76,0.2); margin-bottom: 0.25rem; } .sf-repertoire-meta { font-weight: 400; font-size: 0.85rem; color: var(--sf-text-body, #ccc); } .sf-repertoire-author-link { color: inherit; text-decoration: none; transition: opacity 0.15s ease; } .sf-repertoire-author-link:hover { opacity: 0.75; text-decoration: underline; } .sf-repertoire-work { padding: 0.25rem 0 0.25rem 0.75rem; font-size: 0.92rem; transition: color 0.15s ease; } a.sf-repertoire-title { font-weight: 600; color: var(--sf-text-body, inherit); text-decoration: none; transition: color 0.15s ease; } a.sf-repertoire-title:hover { color: var(--sf-accent, #c9a84c); } .sf-repertoire-func { color: var(--sf-text-muted, #6c757d); font-style: italic; } .sf-repertoire-pipe { color: var(--sf-accent, #c9a84c); margin: 0 0.3rem; font-style: normal; font-weight: 400; } .sf-repertoire-date { font-style: normal; color: var(--sf-accent, #c9a84c); text-decoration: none; transition: opacity 0.15s ease; } .sf-repertoire-date::before { content: "\F4F3"; /* bi-play-circle (outline) */ font-family: "bootstrap-icons"; font-size: 0.9em; margin-right: 0.45em; } .sf-repertoire-date:hover { color: var(--sf-accent, #c9a84c); opacity: 0.75; } .sf-repertoire-parts { margin: 0.25rem 0 0 1rem; } .sf-repertoire-part { font-size: 0.88rem; padding: 0.1rem 0; } .sf-repertoire-part-label { color: var(--sf-text-muted, #6c757d); font-style: italic; margin-right: 0.25rem; } /* Diela — link na dielo */ .sf-person-work { text-decoration: none; color: inherit; display: block; padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); transition: padding-left 0.15s ease; } .sf-person-work:hover { padding-left: 0.25rem; } .sf-person-work:last-child { border-bottom: none; } .sf-person-work:hover .sf-person-name { color: var(--sf-accent, #c9a84c); } /* Poznámka pod čiarou — composer/conductor/performer detail */ .sf-footnote hr { width: 25%; border: none; border-top: 1px solid var(--sf-accent, #c9a84c); margin: 0 0 .75rem; opacity: 1; } .sf-footnote p { font-size: .8rem; color: var(--sf-text-muted, #6c757d); margin-bottom: .25rem; } .sf-footnote p:last-child { margin-bottom: 0; } .sf-footnote a { color: var(--sf-accent, #c9a84c); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .sf-footnote a:hover { border-bottom-color: var(--sf-accent, #c9a84c); } /* Externé zdroje — muted farba, zlatá len pri hover */ .sf-footnote a.sf-ext-link { color: var(--sf-text-muted, #6c757d); } .sf-footnote a.sf-ext-link:hover { color: var(--sf-accent, #c9a84c); border-bottom-color: var(--sf-accent, #c9a84c); } /* Štatistiky (staff) — inline chipy */ .sf-person-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,.06); } /* Zodiac line (admin only) */ .sf-zodiac-line { font-size: 0; line-height: 1; margin-top: 2px; display: flex; align-items: center; gap: 6px; opacity: .7; } .sf-zodiac-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; line-height: 1; color: #fff; flex-shrink: 0; } .sf-zodiac-label { font-size: 0.75rem; color: var(--sf-text-muted, #6c757d); } /* Západné znamenia — farby podľa elementu (oheň/zem/vzduch/voda) */ .sf-zw-aries, .sf-zw-leo, .sf-zw-sagittarius { background: #e25545; } /* oheň — červená */ .sf-zw-taurus, .sf-zw-virgo, .sf-zw-capricorn { background: #6b8e5a; } /* zem — zelená */ .sf-zw-gemini, .sf-zw-libra, .sf-zw-aquarius { background: #5b9bd5; } /* vzduch — modrá */ .sf-zw-cancer, .sf-zw-scorpio, .sf-zw-pisces { background: #7b6aad; } /* voda — fialová */ /* Čínske elementy — farby */ .sf-ze-wood { background: #5a9e4b; } /* drevo — zelená */ .sf-ze-fire { background: #d94535; } /* oheň — červená */ .sf-ze-earth { background: #c49a3c; } /* zem — okrová */ .sf-ze-metal { background: #8a8a8a; } /* kov — šedá */ .sf-ze-water { background: #3a7bbf; } /* voda — modrá */ /* Year-only horoskop (keď nepoznáme presný dátum narodenia) */ .sf-zodiac-yearonly { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .sf-zodiac-or { font-size: 0.75rem; color: var(--sf-text-muted, #6c757d); text-transform: lowercase; font-style: italic; } .sf-zodiac-note { font-size: 0.7rem; color: var(--sf-text-muted, #6c757d); font-style: italic; opacity: 0.85; margin-left: 4px; } /* ============================================================ */ /* ADMIN DASHBOARD */ /* ============================================================ */ .sf-dash-welcome { padding-bottom: 1rem; border-bottom: 1px solid rgba(201, 168, 76, 0.2); } .sf-dash-section { /* spacing wrapper */ } /* TOP STAT CARDS */ .sf-dash-stats-row { margin-bottom: 1.5rem; } .sf-dash-stat-card { background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: .75rem; padding: 1rem; text-align: center; transition: border-color .2s, transform .2s; } .sf-dash-stat-card:hover { border-color: rgba(201, 168, 76, 0.4); } .sf-dash-stat-icon { font-size: 1.5rem; color: var(--sf-accent, #c9a84c); margin-bottom: .25rem; opacity: 0.7; } .sf-dash-stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--sf-text); } .sf-dash-stat-value small { font-size: 0.75rem; font-weight: 400; color: var(--sf-text-muted); } .sf-dash-stat-label { font-size: 0.75rem; color: var(--sf-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: .25rem; } /* CONCERT CARDS (latest) */ .sf-dash-concert-card { display: block; text-decoration: none; color: inherit; background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.06); border-radius: .75rem; overflow: hidden; transition: border-color .2s, transform .2s; height: 100%; } .sf-dash-concert-card:hover { border-color: rgba(201, 168, 76, 0.4); color: inherit; transform: translateY(-2px); } .sf-dash-concert-thumb { width: 100%; aspect-ratio: 16/9; background: rgba(0,0,0,.3); overflow: hidden; } .sf-dash-concert-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-dash-concert-info { padding: .75rem 1rem; } .sf-dash-concert-date { font-size: 0.7rem; color: var(--sf-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: .25rem; } .sf-dash-concert-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin-bottom: .25rem; } .sf-dash-concert-perf { line-height: 1.3; } /* LIST (top month, anniversaries) */ .sf-dash-list { background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.06); border-radius: .75rem; overflow: hidden; } .sf-dash-list-item { display: flex; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); text-decoration: none; color: inherit; transition: background .15s; gap: .75rem; } .sf-dash-list-item:last-child { border-bottom: none; } .sf-dash-list-item:hover { background: rgba(201, 168, 76, 0.05); color: inherit; } .sf-dash-list-rank { font-size: 1.25rem; font-weight: 700; color: var(--sf-accent); width: 1.5rem; flex-shrink: 0; text-align: center; } .sf-dash-list-content { flex: 1; min-width: 0; } .sf-dash-list-title { font-weight: 500; font-size: 0.9rem; line-height: 1.3; } .sf-dash-list-meta { font-size: 0.75rem; color: var(--sf-text-muted); margin-top: .15rem; } .sf-dash-list-value { font-size: 1.1rem; color: var(--sf-text); flex-shrink: 0; text-align: right; } /* FAVORITES (small cards) */ .sf-dash-fav-card { display: block; text-decoration: none; color: inherit; border-radius: .5rem; overflow: hidden; background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.06); transition: border-color .2s, transform .2s; } .sf-dash-fav-card:hover { border-color: rgba(201, 168, 76, 0.4); color: inherit; transform: translateY(-2px); } .sf-dash-fav-thumb { width: 100%; aspect-ratio: 16/9; background: rgba(0,0,0,.3); overflow: hidden; } .sf-dash-fav-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-dash-fav-name { padding: .5rem .65rem; font-size: 0.8rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ATTENTION CARDS */ .sf-dash-attention-card { display: block; text-decoration: none; background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.06); border-radius: .75rem; padding: 1rem; text-align: center; transition: border-color .2s, transform .2s; height: 100%; } .sf-dash-attention-card:hover { border-color: rgba(201, 168, 76, 0.4); transform: translateY(-2px); } .sf-dash-attention-value { font-size: 2rem; font-weight: 700; line-height: 1; } .sf-dash-attention-label { font-size: 0.85rem; color: var(--sf-text); margin-top: .5rem; } /* ACTIVITY FEED */ .sf-dash-activity { background: var(--sf-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.06); border-radius: .75rem; overflow: hidden; } .sf-dash-activity-item { display: flex; align-items: center; padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); gap: .75rem; } .sf-dash-activity-item:last-child { border-bottom: none; } .sf-dash-activity-icon { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(201, 168, 76, 0.15); color: var(--sf-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sf-dash-activity-content { flex: 1; font-size: 0.85rem; line-height: 1.4; } .sf-dash-activity-time { flex-shrink: 0; white-space: nowrap; } .sf-person-stat-chip { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: #a855a8; background: none; padding: 0.25rem 0.5rem; border: none; border-radius: 2px; display: inline-flex; align-items: center; gap: 0.15rem; } .sf-person-stat-chip:hover { background: rgba(168,85,168,.1); } .sf-person-stat-chip.active { background: #a855a8; color: #fff; } .sf-person-stat-chip.active strong { color: #fff; } .sf-person-stat-chip strong { color: #c77dba; font-weight: 600; } /* Paginácia spodok */ .sf-person-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; font-size: 0.78rem; color: var(--sf-text-muted, #6c757d); } .sf-person-footer-nav { display: flex; gap: 0.25rem; } .sf-person-footer-nav button { background: none; border: 1px solid var(--sf-border, rgba(0,0,0,.15)); color: var(--sf-text-muted, #6c757d); width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.15s ease; font-size: 0.75rem; } .sf-person-footer-nav button:hover:not(:disabled) { border-color: var(--sf-accent, #c9a84c); color: var(--sf-accent, #c9a84c); } .sf-person-footer-nav button:disabled { opacity: 0.3; cursor: default; } /* Dark mode */ [data-bs-theme="dark"] .sf-person-item { border-bottom-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .sf-person-item:hover { background-color: rgba(255,255,255,.04); } [data-bs-theme="dark"] .sf-person-work { border-bottom-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .sf-person-work:hover { background-color: rgba(255,255,255,.04); } [data-bs-theme="dark"] .sf-person-stats { border-bottom-color: rgba(255,255,255,.08); } [data-bs-theme="dark"] .sf-person-stat-chip { color: #c77dba; background: none; } [data-bs-theme="dark"] .sf-person-stat-chip strong { color: #d9a0d0; } [data-bs-theme="dark"] .sf-person-stat-chip.active { background: #a855a8; color: #fff; border-color: #a855a8; } [data-bs-theme="dark"] .sf-person-stat-chip.active strong { color: #fff; } [data-bs-theme="dark"] .sf-person-section-title { border-bottom-color: rgba(255,255,255,.1); } [data-bs-theme="dark"] .sf-person-footer-nav button { border-color: rgba(255,255,255,.15); } /* Responsive — mobile */ @media (max-width: 576px) { .sf-person-item { flex-wrap: wrap; gap: 0.15rem; } .sf-person-date { flex: 0 0 100%; font-size: 0.75rem; } .sf-person-name { white-space: normal; } .sf-person-section-controls { display: none; } } /* ============================================ CONCERT DETAIL — Compact Header ============================================ */ .sf-concert-header { padding: 1rem 0 0.75rem; margin-bottom: 0.5rem; } .sf-concert-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; } .sf-concert-meta { font-size: 0.88rem; color: var(--sf-text-muted, #888); margin-bottom: 0.5rem; line-height: 1.6; } .sf-meta-sep { margin: 0 0.35rem; opacity: 0.4; } .sf-meta-link { color: var(--sf-text-body, #e0e0e0); text-decoration: none; transition: color .15s; } .sf-meta-link:hover { color: var(--sf-accent, #d4a843); text-decoration: underline; } .sf-concert-actions { display: flex; gap: 0.5rem; } .sf-love-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1.5px solid rgba(201,168,76,.4); border-radius: 2rem; background: none; color: var(--sf-text-muted, #888); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all .2s; } .sf-love-btn:hover { border-color: #e06c6c; color: #e06c6c; } .sf-love-btn-liked { border-color: #e06c6c; color: #e06c6c; background: rgba(224,108,108,.1); } .sf-love-btn:disabled { cursor: default; opacity: 0.7; } /* ── Accent outline button (muted border + text, hover zlatý) ── */ .sf-btn-accent-outline { color: var(--sf-text-muted, #888) !important; border: 1px solid var(--sf-border, rgba(255,255,255,0.08)) !important; background: transparent !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sf-btn-accent-outline.btn-lg { font-size: 1.15rem; padding: 0.65rem 1.25rem; border-radius: 0.5rem; } .sf-btn-accent-outline:hover, .sf-btn-accent-outline:focus { background: var(--sf-accent, #c9a84c) !important; color: var(--sf-bg, #0f0f14) !important; border-color: var(--sf-accent, #c9a84c) !important; } /* ============================================ CONCERT DETAIL — Tab Navigation (Text Labels) ============================================ */ .sf-concert-tab-nav { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; padding: 0.5rem 0; /* rovnaký vzduch hore aj dole od tabov */ flex-shrink: 0; border-bottom: 1px solid rgba(201, 168, 76, 0.35); /* zlatá čiara */ } .sf-tab-label { background: none; border: none; padding: 0.3rem 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-accent, #d4a843); cursor: pointer; transition: all .2s; border-radius: 0; opacity: 0.6; } .sf-tab-label:hover { opacity: 1; } .sf-tab-label.active { background: var(--sf-accent, #d4a843); color: #1a1a2e; opacity: 1; } /* Admin form placeholders — stlmené */ .card-body .form-control::placeholder, .card-body .form-select::placeholder { color: rgba(255,255,255,.25) !important; opacity: 1; } /* Berry subtab buttons */ .btn-berry { background: #8b5cf6; color: #fff; border: 1px solid #8b5cf6; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; } .btn-berry:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; } .btn-outline-berry { background: transparent; color: #8b5cf6; border: 1px solid rgba(139,92,246,.4); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; } .btn-outline-berry:hover { background: rgba(139,92,246,.1); color: #8b5cf6; border-color: #8b5cf6; } .sf-tab-label.disabled, .sf-tab-label:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: auto; } /* Berry sub-tab variant (Texty pills) */ .sf-subtab-nav { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; padding: 0.4rem 0; flex-shrink: 0; border-bottom: 1px solid rgba(168,76,159,0.3); } .sf-subtab-label { background: none; border: none; padding: 0.3rem 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(198,120,190); cursor: pointer; transition: all .2s; border-radius: 0; opacity: 0.6; } .sf-subtab-label:hover { opacity: 1; } .sf-subtab-label.active { background: rgb(168,76,159); color: #fff; opacity: 1; } .sf-subtab-count { font-size: 0.62rem; font-weight: 400; opacity: 0.7; letter-spacing: 0; } /* Mobile: scrollable labels */ @media (max-width: 576px) { .sf-concert-tab-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sf-concert-tab-nav::-webkit-scrollbar { display: none; } .sf-tab-label { white-space: nowrap; } .sf-concert-title { font-size: 1.25rem; } } /* Tab nav scroll arrows — globálne (používané v concert player aj person-detail) */ .sf-tabnav-arr-btn { position: absolute; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--sf-accent, #c9a84c); font-size: 1rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 3; cursor: pointer; padding: 0; } .sf-tabnav-arr-l { left: 0; background: linear-gradient(to right, var(--sf-bg, #0f0f1a) 60%, transparent); } .sf-tabnav-arr-r { right: 0; background: linear-gradient(to left, var(--sf-bg, #0f0f1a) 60%, transparent); } .sf-tabnav-arr-btn.sf-arr-visible { opacity: 1; pointer-events: auto; } /* Person-detail tab wrapper — šípky skryté na desktope */ .sf-person-tabnav-wrap { position: relative; overflow: hidden; } @media (min-width: 768px) { .sf-person-tabnav-wrap .sf-tabnav-arr-btn { display: none; } } /* ============================================ CONCERT DETAIL — Collapsible Text ============================================ */ .sf-text-clamp { max-height: 200px; overflow: hidden; position: relative; } .sf-text-clamp::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--sf-bg, #0f0f1a)); pointer-events: none; } .sf-more-btn { color: var(--sf-accent, #d4a843); background: none; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0; transition: opacity .15s; } .sf-more-btn:hover { opacity: 0.8; } /* Light mode override for clamp gradient */ [data-bs-theme="light"] .sf-text-clamp::after { background: linear-gradient(transparent, var(--sf-bg, #f8f9fa)); } /* ============================================ CONCERT DETAIL — Link colors in tabs (variant C: light + gold hover) ============================================ */ /* Vertikálny zoznam účinkujúcich/skladateľov */ .sf-cast-line { padding: 2px 0; line-height: 1.5; font-size: 16px; font-feature-settings: "liga" 1, "clig" 1, "kern" 1; -webkit-font-feature-settings: "liga" 1, "clig" 1, "kern" 1; font-variant-ligatures: common-ligatures; } .sf-cast-line a.fw-bold, .sf-cast-line strong { color: rgba(255,255,255,.75); } .sf-concert-tabs a, .sf-concert-right a, .sf-concert-content-scroll a { color: #fff; transition: color .15s; } .sf-concert-tabs a:hover, .sf-concert-right a:hover, .sf-concert-content-scroll a:hover { color: var(--sf-accent, #d4a843); } /* Light mode — ľudia a telesá v Cast tabe + odkazy v tabu O koncerte */ [data-bs-theme="light"] .sf-cast-line a.fw-bold, [data-bs-theme="light"] .sf-cast-line strong { color: var(--sf-text-heading, #222); } [data-bs-theme="light"] .sf-concert-tabs a, [data-bs-theme="light"] .sf-concert-right a, [data-bs-theme="light"] .sf-concert-content-scroll a { color: var(--sf-text-heading, #222); } [data-bs-theme="light"] .sf-concert-tabs a:hover, [data-bs-theme="light"] .sf-concert-right a:hover, [data-bs-theme="light"] .sf-concert-content-scroll a:hover { color: var(--sf-accent, #A08759); } /* ============================================ CONCERT DETAIL — Staff Credits (fixné pod scrollovacím oknom) ============================================ */ .sf-concert-credits { flex-shrink: 0; padding: 0.25rem 0 0.5rem; margin-top: 0; } .sf-credits-hr { border: none; border-top: 1px solid var(--sf-accent, #d4a843); opacity: 0.4; margin-bottom: 0.75rem; } .sf-concert-credits a { color: var(--sf-text-muted, #888); transition: color .15s; } .sf-concert-credits a:hover { color: var(--sf-accent, #d4a843); } /* ============================================ CONCERT DETAIL — About tab divider & video text ============================================ */ .sf-about-divider { border: none; border-top: 1px solid rgba(255,255,255,.1); } .sf-video-text { line-height: 1.6; } .sf-video-text > *:last-child { margin-bottom: 0; } /* ============================================ CONCERT DETAIL — Bulletin & Bio items ============================================ */ .sf-bulletin-author { font-size: 0.9rem; color: var(--sf-text-muted, #888); } /* Entita ako autor textu — rovnaká normálna farba textu ako linky osôb (nie muted) */ .sf-bulletin-author .sf-bulletin-author-name { color: var(--sf-text, inherit); } .sf-bulletin-item em { font-style: italic; font-weight: 300; } .sf-bulletin-item strong, #pane-about strong { font-weight: 700; } .sf-bulletin-item strong em, .sf-bulletin-item em strong { font-style: italic; font-weight: 800; } /* ============================================ CONCERT DETAIL — Libreto (dvoj-stĺpcový float layout, V1 prístup) Markdown → h2 (full-width), h3+p (ľavý stĺpec), pre (pravý stĺpec) ============================================ */ #pane-libreto { padding-top: 0.1rem; } .sf-libreto { font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 0.85rem; line-height: 1.5; } .sf-libreto .sf-libreto-author, .sf-libreto .sf-libreto-biblio { font-family: var(--bs-body-font-family); } /* Pre/code reset — nie code-block štýl, ale bežný text */ .sf-libreto-article pre { white-space: pre-wrap; word-break: keep-all; border: 0; background: transparent; padding: 0 0 0 1.5rem; margin: 0 0 1rem; font-family: inherit; font-size: inherit; line-height: inherit; color: var(--sf-text-muted, #888); /* Hanging indent — prvý riadok pri ľavej hrane, zalomené pokračovanie odsadené. 'each-line' aplikuje indent po každom \n v pre bloku (CSS Text 4). */ text-indent: -1.5rem each-line; } /* Originálny verš —

s
riadkovanie — rovnaký hanging indent */ .sf-libreto-article p { padding-left: 1.5rem; text-indent: -1.5rem each-line; } .sf-libreto-article pre code { background: transparent; padding: 0; font-family: inherit; font-size: inherit; color: inherit; } /* h2 = nadpis dejstva (full-width, clear) */ .sf-libreto-article h2 { text-transform: none; font-size: 1rem; font-weight: 700; font-family: inherit; color: var(--sf-accent, #d4a843); line-height: 1.5; padding: 15px 0 0; margin: 0; width: 100%; clear: both; } /* Preklad nadpisu dejstva — pod h2, odsadený, nie v pravom stĺpci */ .sf-libreto-article h2 + pre { width: 100% !important; float: none !important; clear: both !important; padding-left: 1.5rem; padding-bottom: 15px; font-weight: 400; } /* h3 = meno postavy / číslo (originál) */ .sf-libreto-article h3 { text-transform: none; font-family: inherit; font-size: 0.85rem; line-height: 2; font-weight: 700; color: var(--sf-accent, #d4a843); margin: 0; } /* p = originál verše */ .sf-libreto-article p { font-size: inherit; line-height: 1.5; font-family: inherit; color: var(--sf-text-body, #ccc); margin: 0 0 1rem; } /* --- Dvoj-stĺpcový layout (po .sf-lib-begin) --- */ .sf-libreto-article .sf-lib-begin ~ h2, .sf-libreto-article .sf-lib-begin ~ h2 + p { width: 100%; clear: both; } /* Stĺpce: h3, p, pre = 50% */ .sf-libreto-article .sf-lib-begin ~ h3, .sf-libreto-article .sf-lib-begin ~ p, .sf-libreto-article .sf-lib-begin ~ pre { width: 50%; } /* Ľavý stĺpec: h3 + p */ .sf-libreto-article .sf-lib-begin ~ h3, .sf-libreto-article .sf-lib-begin ~ p { float: left; box-sizing: border-box; padding-right: 1rem; clear: both; } /* Pravý stĺpec: pre (preklad) */ .sf-libreto-article .sf-lib-begin ~ pre { float: right; clear: right; margin-bottom: 1rem; } /* Reset za .sf-lib-end */ .sf-libreto-article .sf-lib-end ~ p, .sf-libreto-article .sf-lib-end ~ h3, .sf-libreto-article .sf-lib-end ~ pre { width: auto; float: none; clear: none; } .sf-libreto-article .sf-lib-end { clear: both; } /* EN mutácia — skryť prekladový stĺpec (preklad je slovenský, v EN nepotrebný) */ html[lang="en"] .sf-libreto-article .sf-lib-begin ~ pre { display: none; } html[lang="en"] .sf-libreto-article h2 + pre { display: none; } html[lang="en"] .sf-libreto-article .sf-lib-begin ~ h3, html[lang="en"] .sf-libreto-article .sf-lib-begin ~ p { width: 100%; float: none; clear: none; padding-right: 0; } /* Mobile — stacked (pod sebou) */ @media (max-width: 767px) { .sf-libreto-article .sf-lib-begin ~ h3, .sf-libreto-article .sf-lib-begin ~ p, .sf-libreto-article .sf-lib-begin ~ pre { width: 100%; float: none; clear: none; } } /* Concert detail — light mode */ [data-bs-theme="light"] .sf-concert-tab-nav { border-bottom-color: rgba(160,135,89,.3); } [data-bs-theme="light"] .sf-about-divider { border-top-color: rgba(0,0,0,.1); } [data-bs-theme="light"] .sf-concert-content-scroll { scrollbar-color: rgba(160,135,89,.25) transparent; } [data-bs-theme="light"] .sf-concert-content-scroll::-webkit-scrollbar-thumb { background: rgba(160,135,89,.25); } /* ── Ensemble detail — conductor mini-cards ── */ .ens-cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .ens-cond-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid var(--sf-border, rgba(255,255,255,.08)); border-radius: 8px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; min-width: 0; overflow: hidden; } .ens-cond-card:hover { border-color: var(--sf-accent); box-shadow: 0 1px 6px rgba(0,0,0,.08); color: inherit; } .ens-cond-avatar { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; position: relative; overflow: hidden; } .ens-cond-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: var(--sf-duotone-default, grayscale(100%) contrast(1.1)); transition: filter 0.3s ease; } .ens-cond-card:hover .ens-cond-photo { filter: var(--sf-duotone-hover, grayscale(0%) contrast(1)); } .ens-cond-initials { width: 64px; height: 64px; border-radius: 50%; background: var(--sf-elevated, #2a2a2a); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; color: var(--sf-accent); flex-shrink: 0; letter-spacing: 0.5px; } .ens-cond-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .ens-cond-name { font-size: 1.15rem; font-weight: 600; line-height: 1.25; } .ens-cond-card:hover .ens-cond-name { color: var(--sf-accent); } .ens-cond-subtitle { font-size: 0.75rem; color: var(--sf-muted, #888); margin-top: 1px; } .ens-cond-badge { font-size: 0.75rem; font-weight: 500; font-style: italic; color: var(--sf-accent); padding: 0; align-self: flex-start; } .ens-cond-count { font-size: 0.8rem; color: var(--sf-muted, #888); margin-top: 2px; } /* Responsive: 3 cols tablet, 2 cols mobile, 1 col small */ @media (max-width: 1199px) { .ens-cond-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .ens-cond-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ens-cond-grid { grid-template-columns: 1fr; } } /* Lineup cards */ .ens-lineup-card { border: 1px solid var(--sf-border, rgba(255,255,255,.08)); border-radius: 10px; padding: 1rem 1.1rem; } .ens-lineup-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .ens-lineup-title { font-size: 1rem; font-weight: 600; color: var(--sf-accent); } .ens-lineup-meta { font-size: 0.8rem; color: var(--sf-muted, #888); } .ens-lineup-concerts-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--sf-accent); padding: 0.4rem 0 0; user-select: none; } .ens-lineup-concerts-toggle:hover { opacity: 0.8; } .ens-lineup-concerts { margin-top: 0.5rem; border-top: 1px solid var(--sf-border, rgba(255,255,255,.06)); padding-top: 0.5rem; } .ens-lineup-concert-item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; text-decoration: none; color: inherit; font-size: 0.85rem; } .ens-lineup-concert-item:hover { color: var(--sf-accent); } .ens-lineup-concert-date { color: var(--sf-muted, #888); white-space: nowrap; min-width: 6rem; } .ens-lineup-concert-name { font-weight: 500; } .ens-cond-card.no-link { cursor: default; } .ens-cond-card.no-link:hover { border-color: var(--sf-border, rgba(255,255,255,.08)); box-shadow: none; } /* ============================================================ ADMIN SIDEBAR LAYOUT ============================================================ */ :root { --sf-sidebar-width: 260px; --sf-sidebar-collapsed-width: 60px; --sf-sidebar-bg: #1a1d21; --sf-sidebar-border: rgba(255,255,255,.08); --sf-sidebar-hover: rgba(255,255,255,.06); --sf-sidebar-active: rgba(201,168,76,.15); --sf-sidebar-active-border: var(--sf-accent, #c9a84c); --sf-topbar-height: 52px; --sf-sidebar-transition: .2s ease; } /* Wrapper — flex layout */ .sf-admin-wrapper { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .sf-admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sf-sidebar-width); background: var(--sf-sidebar-bg); border-right: 1px solid var(--sf-sidebar-border); display: flex; flex-direction: column; z-index: 1040; transition: width var(--sf-sidebar-transition); overflow-x: hidden; overflow-y: auto; } /* Brand */ .sf-sidebar-brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--sf-sidebar-border); flex-shrink: 0; } .sf-sidebar-brand a { color: #fff; text-decoration: none; font-family: 'Fira Sans Condensed', sans-serif; font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; white-space: nowrap; } .sf-sidebar-brand a:hover { color: #adb5bd; } /* Sidebar search */ .sf-sidebar-search-wrap { padding: 8px 10px 6px; position: relative; flex-shrink: 0; } .sf-sidebar-search { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: var(--sf-text-body); padding: 5px 8px 5px 28px; font-size: .8rem; line-height: 1.4; transition: border-color .15s, background .15s; } .sf-sidebar-search:focus { outline: none; border-color: var(--sf-accent); background: rgba(255,255,255,.1); } .sf-sidebar-search::placeholder { opacity: .45; } .sf-sidebar-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); opacity: .4; font-size: .75rem; pointer-events: none; } .sf-sidebar-collapsed .sf-sidebar-search-wrap { display: none; } /* Nav */ .sf-sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; } .sf-sidebar-menu { list-style: none; margin: 0; padding: 0; } .sf-sidebar-menu li { margin: 1px 8px; } /* Links */ .sf-sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #adb5bd; text-decoration: none; border-radius: 6px; font-size: .875rem; white-space: nowrap; transition: background .15s, color .15s; border-left: 3px solid transparent; } .sf-sidebar-link:hover { background: var(--sf-sidebar-hover); color: #fff; } .sf-sidebar-link.active { background: var(--sf-sidebar-active); color: #fff; border-left-color: var(--sf-sidebar-active-border); font-weight: 500; } /* Icon sizing */ .sf-sidebar-icon { font-size: 1.1rem; width: 20px; text-align: center; flex-shrink: 0; color: var(--sf-accent, #c9a84c); } /* Text — hides when collapsed */ .sf-sidebar-text { overflow: hidden; transition: opacity var(--sf-sidebar-transition); } /* Divider */ .sf-sidebar-divider { height: 1px; margin: 6px 12px; background: var(--sf-sidebar-border); list-style: none; } /* Footer */ .sf-sidebar-footer { border-top: 1px solid var(--sf-sidebar-border); padding: 8px; flex-shrink: 0; } .sf-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #6c757d; font-size: .8rem; white-space: nowrap; overflow: hidden; } /* --- Content area --- */ .sf-admin-content { flex: 1; margin-left: var(--sf-sidebar-width); min-width: 0; transition: margin-left var(--sf-sidebar-transition); } /* Gold button (admin edit actions) */ .sf-btn-gold { color: #d4a843; border: 1px solid #d4a843; background: transparent; } .sf-btn-gold:hover, .sf-btn-gold:focus { color: #fff; background: #d4a843; border-color: #d4a843; } /* Top bar */ .sf-admin-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; height: var(--sf-topbar-height); padding: 0 20px; background: var(--sf-sidebar-bg); border-bottom: 1px solid var(--sf-sidebar-border); } .sf-sidebar-toggle { background: none; border: none; color: #adb5bd; font-size: 1.3rem; padding: 4px 8px; cursor: pointer; border-radius: 4px; transition: background .15s; } .sf-sidebar-toggle:hover { background: var(--sf-sidebar-hover); color: #fff; } .sf-topbar-title { font-size: 1rem; font-weight: 500; color: #dee2e6; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; } .sf-topbar-theme-toggle { color: var(--sf-accent, #c9a84c); font-size: 1.1rem; text-decoration: none; opacity: .7; transition: opacity .2s; } .sf-topbar-theme-toggle:hover { opacity: 1; color: var(--sf-accent, #c9a84c); } .sf-topbar-lang { display: flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em; } .sf-topbar-lang-active { color: var(--sf-accent, #c9a84c); } .sf-topbar-lang-link { color: #6c757d; text-decoration: none; opacity: .6; transition: opacity .2s; } .sf-topbar-lang-link:hover { opacity: 1; color: var(--sf-accent, #c9a84c); } .sf-topbar-user { color: #6c757d; font-size: .85rem; } /* Main content padding */ .sf-admin-main { padding: 20px; } /* Clickable table rows in admin */ .sf-admin-main .table tbody tr { cursor: pointer; } /* --- Collapsed state (desktop) --- */ .sf-sidebar-collapsed .sf-admin-sidebar { width: var(--sf-sidebar-collapsed-width); } .sf-sidebar-collapsed .sf-admin-content { margin-left: var(--sf-sidebar-collapsed-width); } .sf-sidebar-collapsed .sf-sidebar-text { opacity: 0; width: 0; overflow: hidden; } .sf-sidebar-collapsed .sf-sidebar-brand a { justify-content: center; } .sf-sidebar-collapsed .sf-sidebar-link { justify-content: center; padding: 10px 8px; border-left-width: 0; } .sf-sidebar-collapsed .sf-sidebar-menu li { margin: 1px 4px; } .sf-sidebar-collapsed .sf-sidebar-user { justify-content: center; } .sf-sidebar-collapsed .sf-sidebar-footer .sf-sidebar-link { justify-content: center; } /* Tooltip on collapsed hover */ .sf-sidebar-collapsed .sf-sidebar-link[title] { position: relative; } /* Sidebar overlay (mobile) */ .sf-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; } .sf-sidebar-overlay.active { display: block; } /* --- Mobile (< 992px) --- */ @media (max-width: 991.98px) { .sf-admin-sidebar { transform: translateX(-100%); transition: transform var(--sf-sidebar-transition); width: var(--sf-sidebar-width); } .sf-admin-sidebar.sf-sidebar-open { transform: translateX(0); } .sf-admin-content { margin-left: 0; } .sf-sidebar-collapsed .sf-admin-content { margin-left: 0; } .sf-sidebar-collapsed .sf-admin-sidebar { width: var(--sf-sidebar-width); } .sf-sidebar-collapsed .sf-sidebar-text { opacity: 1; width: auto; } .sf-admin-main { padding: 12px; } } /* Scrollbar styling for sidebar */ .sf-admin-sidebar::-webkit-scrollbar { width: 4px; } .sf-admin-sidebar::-webkit-scrollbar-track { background: transparent; } .sf-admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } .sf-admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); } /* ---- Staff cards (Tab Tím — admin concert detail) ---- */ .staff-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; transition: background 0.15s; } .staff-card:hover { background: rgba(255,255,255,0.07); } .staff-card .drag-handle { cursor: grab; color: rgba(255,255,255,0.2); padding-top: 2px; } .staff-card .drag-handle:hover { color: rgba(212,168,67,0.7); } .staff-func-row { border-radius: 4px; font-size: 0.92rem; color: rgba(255,255,255,0.8); transition: background 0.1s; } .staff-func-row:hover { background: rgba(255,255,255,0.06); } .staff-func-row .func-drag-handle:hover { color: rgba(212,168,67,0.7) !important; } .staff-func-row .remove-func { cursor: pointer; color: #dc3545; opacity: 0.4; } .staff-func-row .remove-func:hover { opacity: 1; } .remove-all-funcs-btn:hover { opacity: 1 !important; } /* Function area: two-column layout (list left, actions right-aligned) */ .staff-func-area { gap: 0.5rem; justify-content: space-between; } .staff-func-list { flex: 0 1 auto; min-width: 0; } .staff-func-actions { flex: 0 0 auto; align-self: flex-start; text-align: right; } @media (max-width: 576px) { .staff-func-area { flex-direction: column; } } /* Golden "Priradiť funkcie" button */ .staff-card .add-func-modal-btn { border: 1px solid rgba(212,168,67,0.5); color: rgba(212,168,67,0.9); white-space: nowrap; } .staff-card .add-func-modal-btn:hover { background: rgba(212,168,67,0.12); border-color: rgba(212,168,67,0.8); color: rgba(212,168,67,1); } .sortable-ghost { opacity: 0.35; } /* Bulletin author chips */ .bul-author-chip:hover { background: rgba(212,168,67,0.25) !important; } .bul-author-chip .bul-author-remove:hover { opacity: 1 !important; color: #dc3545; } .bul-author-result:hover { background: rgba(212,168,67,0.12); } .staff-card .remove-person-btn { opacity: 0.4; font-size: 0.78rem; white-space: nowrap; } .staff-card:hover .remove-person-btn { opacity: 0.8; } .staff-card .remove-person-btn:hover { opacity: 1; } .staff-card .remove-person-disabled { opacity: 0.2; cursor: default; font-size: 0.78rem; white-space: nowrap; } /* Guest badge "a. h." */ .staff-guest-badge { display: inline-block; font-size: 0.72rem; font-weight: 400; padding: 1px 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.3); cursor: pointer; vertical-align: middle; transition: all 0.15s; user-select: none; } .staff-guest-badge:hover { border-color: rgba(212,168,67,0.5); color: rgba(212,168,67,0.7); } .staff-guest-badge.active { background: rgba(212,168,67,0.18); border-color: rgba(212,168,67,0.6); color: rgba(212,168,67,0.95); } /* ================================================================ Chronology — /chronology ================================================================ */ .sf-chrono-year { margin-bottom: 1.5rem; } .sf-chrono-year-title { font-size: 1.3rem; font-weight: 700; color: var(--sf-accent); margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(212,168,67,0.15); } .sf-chrono-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0 0.25rem 6rem; font-size: 0.95rem; } .sf-chrono-text { color: var(--sf-text-muted); margin-right: 0.15rem; } .sf-chrono-name { color: var(--sf-text); text-decoration: none; font-weight: 500; } .sf-chrono-name:hover { color: var(--sf-accent); } .sf-chrono-detail { font-size: 0.82em; color: var(--sf-text-muted); margin-left: 0.3rem; } .sf-chrono-years { font-size: 0.85em; color: var(--sf-text-muted); font-style: italic; } /* ===== EasyMDE — SF custom dark theme ===== */ .EasyMDEContainer .CodeMirror { background: #0d1117; color: #c9d1d9; border-color: rgba(255,255,255,.1); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.85rem; } .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--sf-accent, #c9a84c); } .EasyMDEContainer .CodeMirror-selected { background: rgba(201,168,76,.15) !important; } .EasyMDEContainer .CodeMirror-gutters { background: #0d1117; border-right-color: rgba(255,255,255,.06); } .EasyMDEContainer .CodeMirror-linenumber { color: rgba(255,255,255,.2); } .EasyMDEContainer .editor-toolbar { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .EasyMDEContainer .editor-toolbar button { color: rgba(255,255,255,.75) !important; } .EasyMDEContainer .editor-toolbar button:hover { background: rgba(255,255,255,.1); color: #fff !important; } .EasyMDEContainer .editor-toolbar button.active { background: rgba(201,168,76,.2); color: var(--sf-accent) !important; } .EasyMDEContainer .editor-toolbar i.separator { border-left-color: rgba(255,255,255,.1); border-right-color: rgba(255,255,255,.1); } /* Markdown syntax highlighting — SF colors */ .EasyMDEContainer .cm-strong { font-weight: 700; color: #ffff00; } .EasyMDEContainer .cm-em { font-style: italic; color: #33ff00; } .EasyMDEContainer .cm-strong.cm-em { color: #ff4444; } .EasyMDEContainer .cm-header { font-weight: 700; color: #ffff00; } .EasyMDEContainer .cm-link { text-decoration: underline; color: #ffff00; } .EasyMDEContainer .cm-url { color: rgba(100,180,255,.7); } .EasyMDEContainer .cm-formatting { color: rgba(255,255,255,.35); } .EasyMDEContainer .cm-quote { color: rgba(201,168,76,.7); } /* Scrollbar */ .EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar { width: 6px; } .EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; } /* Mobile — 5px extra padding stránky + hero banner full-width */ @media (max-width: 767.98px) { /* Stránka: 5px extra padding na L+P */ main.container { padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5 + 5px) !important; padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5 + 5px) !important; } /* Hero banner: breakout z celého container paddingu (12px + 5px) */ .sf-hero-slideshow { margin-left: calc(-1 * (var(--bs-gutter-x, 0.75rem) * 0.5 + 5px)); margin-right: calc(-1 * (var(--bs-gutter-x, 0.75rem) * 0.5 + 5px)); margin-top: -1.5rem; } .sf-hero-viewport { aspect-ratio: 16 / 9; border-radius: 0; } /* Overlay text: zarovnaný s obsahom stránky (12px + 5px) */ .sf-hero-overlay { padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5 + 5px + 0.25rem); padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5 + 5px + 0.25rem); } } /* ── Rotate overlay: zobrazí sa na mobile v landscape (mimo player) ── */ #sfRotateOverlay { display: none; position: fixed; inset: 0; z-index: 9998; background: #1a1d2e; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; text-align: center; padding: 2rem; } #sfRotateOverlay .sf-rotate-icon { font-size: 4rem; color: var(--sf-accent, #d4a843); display: block; animation: sfRotatePulse 2.4s ease-in-out infinite; } #sfRotateOverlay .sf-rotate-title { color: #e8e0d0; font-size: 1.2rem; font-weight: 600; margin: 0; } #sfRotateOverlay .sf-rotate-sub { color: rgba(232,224,208,.5); font-size: .85rem; margin: 0; line-height: 1.5; } @keyframes sfRotatePulse { 0%, 100% { transform: rotate(0deg); opacity: .7; } 40% { transform: rotate(-20deg); opacity: 1; } 60% { transform: rotate(-20deg); opacity: 1; } } /* ============================================================ SOLO MINI-PLAYER MODAL ============================================================ */ /* Učebná pomôcka — kompaktný modal (75% pôvodnej šírky) */ .sf-solo-modal .modal-dialog { max-width: 600px; /* z Bootstrap modal-lg 800px → 600px (75%) */ } @media (max-width: 767.98px) { .sf-solo-modal .modal-dialog { max-width: 100vw; width: 100vw; margin: 0; } /* Bez border-radius, modal pôsobí ako fullscreen panel */ .sf-solo-modal .modal-content.sf-solo-modal-content { border-radius: 0; } } .sf-solo-modal .modal-content.sf-solo-modal-content { background: #0f0f1a; border: 0; border-radius: 14px; overflow: hidden; color: #fff; box-shadow: none; } .sf-solo-modal-close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .sf-solo-modal-close:hover { background: rgba(0,0,0,0.9); } .sf-solo-modal-body { padding: 0; } .sf-solo-modal-loading { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .sf-solo-modal-error { padding: 2rem; text-align: center; color: #ff8080; background: rgba(255,80,80,0.1); border-radius: 8px; margin: 1rem; } .sf-solo-modal-player { position: relative; width: 100%; background: #000; } .sf-solo-iframe-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; } .sf-solo-iframe-wrap iframe, .sf-solo-iframe-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: cover; /* Mierne zväčšenie — orež hrany ~2-3px (pri Vimeo skryje aj prípadný UI nikkel pri load) */ transform: scale(1.02); transform-origin: center center; } .sf-solo-modal-player video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; object-fit: contain; } /* Fade overlay — čierna, prekrýva video, opacity riadi JS */ .sf-solo-fade-overlay { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 1; z-index: 4; /* pod caption (z-index:5) ale nad videom */ } /* Caption overlay nad videom */ .sf-solo-modal-caption { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); z-index: 5; padding: 0.75rem 1.5rem; background: rgba(0,0,0,0.65); border-radius: 8px; text-align: center; color: #fff; backdrop-filter: blur(6px); pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .sf-solo-modal-caption-name { font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #fff; } .sf-solo-modal-caption-instrument { font-size: 1.05rem; color: #d4a843; font-style: italic; margin-top: 4px; line-height: 1.2; } .sf-solo-modal-player:has(.sf-solo-modal-caption) { position: relative; } .sf-solo-modal-player { position: relative; } .sf-solo-caption-fadein { animation: sfSoloCaptionIn 0.5s ease forwards; } .sf-solo-caption-fadeout { animation: sfSoloCaptionOut 0.6s ease forwards; } @keyframes sfSoloCaptionIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes sfSoloCaptionOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-10px); } } .sf-solo-modal-replay { /* prekrýva presne videoplochu (parent .sf-solo-modal-player má aspect-ratio 16/9) */ position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } /* Solo modal backdrop — len jemné stmavnutie, BEZ vlastného blur (blur sa aplikuje priamo na body content nižšie aby fade-out bol synchrónny s grayscale) */ body.sf-solo-modal-active .modal-backdrop.show { background-color: rgba(0, 0, 0, 0.35); opacity: 1; } /* Grayscale + blur celého pozadia (video v strede zostáva farebné) — múzejný efekt Asymetrická rýchlosť: vstup do módu rýchly (0.4s), návrat do farby pomalý (1.2s) Blur a grayscale fadenú SÚČASNE pretože sú v jednej `filter` property. */ body > * { /* Default state — používa sa keď sa modal ZATVÁRA (synchrónny fade-out blur+grayscale) */ transition: filter 1.2s ease-out; } body.sf-solo-modal-active > *:not(.sf-solo-modal):not(.modal-backdrop) { filter: grayscale(1) blur(6px); /* Aktívny state — používa sa keď sa modal OTVÁRA (rýchly nábeh blur+grayscale) */ transition: filter 0.4s ease; } .sf-solo-modal-meta { padding: 1rem 1.25rem; background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.06); } .sf-solo-meta-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.9rem; } .sf-solo-meta-link { color: #d4a843; text-decoration: none; } .sf-solo-meta-link:hover { color: #ffcc66; text-decoration: underline; } .sf-solo-meta-grid i { opacity: 0.7; margin-right: 4px; } /* Solo card — play icon overlay */ .sf-solo-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.9); font-size: 3rem; text-shadow: 0 4px 16px rgba(0,0,0,0.6); pointer-events: none; transition: transform 0.2s ease, color 0.2s ease; } .sf-picked-card:hover .sf-solo-card-play { color: #d4a843; transform: translate(-50%, -50%) scale(1.15); } /* ============================================================ Sóla — horizontálne karty (jedna v riadku, obrázok vľavo) Použité na koncertnom detaile v tabe Sóla. ============================================================ */ .sf-solos-list { display: flex; flex-direction: column; gap: 0.75rem; } .sf-solo-row { display: flex; min-height: 80px; background: var(--sf-card-bg, rgba(255,255,255,0.04)); border: 1px solid var(--sf-card-border, rgba(212,168,67,0.18)); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .sf-solo-row:hover { border-color: rgba(212,168,67,0.5); background: var(--sf-card-bg-hover, rgba(212,168,67,0.05)); transform: translateY(-1px); color: inherit; text-decoration: none; } .sf-solo-row-img { position: relative; flex: 0 0 142px; align-self: stretch; background: rgba(0,0,0,0.4); overflow: hidden; } .sf-solo-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .sf-solo-row:hover .sf-solo-row-img img { transform: scale(1.06); } .sf-solo-row-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 1.4rem; } .sf-solo-row-content { flex: 1 1 auto; padding: 0.6rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-width: 0; } .sf-solo-row-name { font-size: 0.95rem; font-weight: 600; color: var(--sf-text, inherit); line-height: 1.3; } .sf-solo-row-instrument { font-size: 0.9rem; color: var(--sf-accent, #d4a843); font-style: italic; font-weight: 400; margin-left: 0.5rem; } .sf-solo-row-work { font-size: 0.92rem; color: var(--sf-text-muted, rgba(255,255,255,0.65)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .sf-solo-row-part { color: var(--sf-text-muted, rgba(255,255,255,0.55)); font-style: normal; } /* Mobil — zachovať horizontálny layout ako na desktope (obrázok vľavo, text vpravo). Iba o niečo menší obrázok pre úsporu miesta. */ @media (max-width: 540px) { .sf-solo-row-img { flex: 0 0 110px; } .sf-solo-row-name { font-size: 0.9rem; } .sf-solo-row-instrument { font-size: 0.85rem; } .sf-solo-row-work { font-size: 0.85rem; } .sf-solo-row-content { padding: 0.5rem 0.7rem; } } /* ====== Dočasný alert: .art namiesto .sk počas rekonštrukcie ====== */ .sf-art-notice { background: var(--sf-bg-elevated, rgba(201, 168, 76, 0.06)); border-top: 1px solid var(--sf-accent, #C9A84C); border-bottom: 1px solid var(--sf-accent, #C9A84C); color: var(--sf-text, inherit); } html.sf-no-art-notice .sf-art-notice { display: none !important; } .sf-art-notice-icon { color: var(--sf-accent, #C9A84C); font-size: 1.1rem; flex-shrink: 0; } .sf-art-notice a { color: var(--sf-accent, #C9A84C); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .sf-art-notice a:hover { color: var(--sf-accent-hover, #E0BE5A); } .sf-art-notice-close { flex-shrink: 0; opacity: 0.6; margin-top: 0.15rem; } .sf-art-notice-close:hover { opacity: 1; }