/* ======================================================================= Garage & Tony Ducháček — styles.css (zpřehledněno + komentáře) - Tmavé a světlé proměnné (týká se celého webu) - Oprava color-scheme (podle data-theme na ) - Sticky header, navigace, tlačítka - Hlavní rozvržení přes celou výšku (grid: header | main | footer) - HERO (desktop grid, mobil 1 sloupec; video centrované) - Sekce, koncerty, novinky, alba, galerie, lightbox, kontakt, patička - PRESS: bios, recenze — sjednocené summary (caret + „odkaz“ bez podtržení) - Responsivita včetně mobilního menu ======================================================================= */ /* --------------------------- 1) Základní proměnné (dark) --------------------------- */ :root{ --bg:#0b0f17; /* pozadí stránky */ --card:#121826; /* panelová plocha (karty) */ --ink:#e6edf3; /* hlavní text */ --muted:#a1a8b3; /* druhotný text */ --line:rgba(255,255,255,.12); /* jemné linky/rámečky */ --brand:#e53935; /* primární akcent (1) */ --brand-2:#ff7043; /* primární akcent (2) – přechody */ --radius:18px; /* univerzální rádius */ --wrap:min(1140px,92vw);/* max šířka obsahu */ --shadow:0 12px 36px rgba(0,0,0,.35); /* globální stín */ } /* ---------------------------------------- 2) Světlé téma – přepíše základní proměnné - JS nastavuje data-theme na ---------------------------------------- */ body[data-theme="light"]{ --bg:#f7f8fb; --card:#ffffff; --ink:#111826; --muted:#5b6470; --line:rgba(0,0,0,.12); --shadow:0 10px 24px rgba(0,0,0,.12); } /* ------------------------------------------------------- 3) Color-scheme (ovlivňuje default UI prvky prohlížeče) - výchozí dark; při světle na přepneme na light ------------------------------------------------------- */ html, body{ color-scheme: dark; } body[data-theme="light"]{ color-scheme: light; } /* --------------------------- 4) Základ + reset drobností --------------------------- */ html{ scroll-behavior:smooth; height:100%; } *{ box-sizing:border-box; } body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; /* >>> patička vždy dole (grid rozvržení) <<< */ min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; /* header | main roztáhne | footer */ } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .muted{ color:var(--muted); } .small{ font-size:.9rem; } .list{ margin:0; padding-left:1.2rem; } .list li{ margin:.25rem 0; } .wrap{ width:var(--wrap); margin-inline:auto; padding:28px; } .input{ padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); } /* ===================== HEADER (sticky) ===================== */ .site-header{ position:sticky; top:0; background:rgba(11,15,23,.65); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:50; } body[data-theme="light"] .site-header{ background:rgba(255,255,255,.6); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; } .brand img{ width:36px; height:36px; } .brand span{ font-weight:700; } .menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0; } .menu a{ border-bottom:2px solid transparent; padding:6px 2px; } .menu a:hover, .menu a:focus-visible{ border-color:var(--brand); } .right-tools{ display:flex; gap:8px; align-items:center; } /* Tlačítka */ .btn{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:9px 14px; border:1px solid var(--line); background:transparent; cursor:pointer; } .btn.primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:0; color:#fff; } .btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } .icon{ font-style:normal; } /* Obecná karta (pro detaily, boxy…) */ .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; } /* ===================== MAIN ===================== */ main{ display:flex; flex-direction:column; justify-content:flex-start; gap:24px; min-height:0; } main > .hero, main > .section{ flex:1 0 auto; min-height:0; } /* ===================== HERO ===================== */ .hero{ border-bottom:1px solid var(--line); background: radial-gradient(60% 120% at 100% 0%, rgba(229,57,53,.28), rgba(229,57,53,0) 50%), linear-gradient(180deg, rgba(255,255,255,.02), transparent); } .hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: clamp(16px, 3vw, 36px); height:100%; } .hero h1{ font-size:clamp(36px,6vw,64px); line-height:1.05; margin:0 0 10px; } .lead{ color:var(--muted); margin:0 0 18px; } .cta{ display:flex; gap:10px; flex-wrap:wrap; } .hero-video-wrap{ position:relative; display:grid; place-items:center; aspect-ratio:16 / 9; width:min(720px, 92vw); margin-inline:auto; background:#000; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); } .hero-video{ width:100%; height:100%; object-fit:cover; display:block; } .hero-video-fallback{ color:#fff; position:absolute; inset:auto 0 0 0; padding:12px 14px; background:linear-gradient(to top, rgba(0,0,0,.65), transparent); } .hero-video-wrap .video-controls, .hero-video-wrap .hero-controls, .hero-video-wrap [data-ui="hero-controls"]{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); } .hero-video-wrap .video-controls .btn, .hero-video-wrap .hero-controls .btn, .hero-video-wrap [data-ui="hero-controls"] .btn{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.25); backdrop-filter:saturate(120%) blur(2px); } /* Hlasitost (range) */ .hero-video-wrap input[type="range"]{ width:160px; height:28px; background:transparent; cursor:pointer; } .hero-video-wrap input[type="range"]::-webkit-slider-runnable-track{ height:4px; background:rgba(255,255,255,.4); border-radius:2px; } .hero-video-wrap input[type="range"]::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:50%; margin-top:-5px; background:#fff; border:0; } .hero-video-wrap input[type="range"]::-moz-range-track{ height:4px; background:rgba(255,255,255,.4); border-radius:2px; } .hero-video-wrap input[type="range"]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:0; } .hero-controls{ opacity:1; pointer-events:auto; transition:opacity .3s ease; } /* ===================== SEKCE ===================== */ .section{ border-top:1px solid var(--line); } .section h2{ margin:0 0 16px; font-size:clamp(26px,4vw,36px); } .toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } .chip{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer; user-select:none; } .chip.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:0; color:#fff; } /* Viditelnost sekcí řídí JS */ .section{ display:none; } .section.active{ display:block; } .section[hidden]{ display:none !important; } .hero[hidden]{ display:none !important; } .hero.active-hero{ display:block; } /* ===================== KONCERTY ===================== */ .shows-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; } .show{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:grid; gap:10px; opacity:0; transform:translateY(8px); transition:.25s ease; } .show.reveal{ opacity:1; transform:none; } .show h3{ margin:0; font-size:1.12rem; } .meta{ color:var(--muted); font-size:.95rem; } .actions{ display:flex; gap:8px; flex-wrap:wrap; } .badge{ font-size:.85rem; padding:4px 8px; border-radius:999px; border:1px solid var(--line); } .timeline{ display:flex; gap:10px; overflow:auto; padding-bottom:8px; scroll-snap-type:x mandatory; } .tick{ min-width:110px; border:1px solid var(--line); border-radius:10px; padding:6px 10px; scroll-snap-align:center; white-space:nowrap; cursor:pointer; } .tick.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:0; color:#fff; } /* ===================== NOVINKY / ALBA ===================== */ .news-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; } .news-item{ @media (prefers-reduced-motion:no-preference){ transition:transform .15s ease; } background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; } .news-item:hover{ transform:translateY(-2px); } .albums{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; } .album{ display:grid; grid-template-columns:120px 1fr; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; } .album-cover{ width:120px; height:120px; border-radius:12px; background:linear-gradient(135deg, rgba(229,57,53,.55), rgba(255,112,67,.55)); border:1px solid var(--line); object-fit:cover; } /* ===================== GALERIE ===================== */ .gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; } .gallery figure{ margin:0; } .gallery img{ width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--line); cursor:zoom-in; } .gallery figcaption{ font-size:.9rem; color:var(--muted); margin-top:6px; } /* Lightbox */ .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:100; } .lightbox.open{ display:flex; } .lightbox img{ max-width:92vw; max-height:92vh; border-radius:12px; box-shadow:var(--shadow); } .lb-ui{ position:fixed; inset:0; display:flex; align-items:center; justify-content:space-between; padding:20px; color:#fff; } .lb-ui .btn{ color:#fff; border-color:rgba(255,255,255,.4); } .lightbox .lb-close-top{ position:fixed; top:16px; right:16px; z-index:1001; color:#fff; border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.35); } /* ===================== PRESS / EPK ===================== */ /* Sjednocený klikací summary pro BIO i RECENZE */ #press .press-bios details summary, #press .press-reviews details summary{ display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none; padding:.35rem .5rem; border-radius:8px; } #press .press-bios details summary::-webkit-details-marker, #press .press-reviews details summary::-webkit-details-marker{ display:none; } /* Caret (šipka) + rotace při otevření */ #press .press-bios details summary .caret, #press .press-reviews details summary .caret{ font-size:1.05em; transform-origin:center; transition:transform .18s ease; } #press .press-bios details[open] summary .caret, #press .press-reviews details[open] summary .caret{ transform:rotate(90deg); } /* „link look“ bez podtržení – sjednoceno */ #press .press-bios details summary .sum-link, #press .press-reviews details summary .sum-link{ color:var(--brand); text-decoration:none; } #press .press-bios details summary:hover .sum-link, #press .press-bios details summary:focus-visible .sum-link, #press .press-reviews details summary:hover .sum-link, #press .press-reviews details summary:focus-visible .sum-link{ filter:brightness(1.1); } /* Focus ring pro klávesovou navigaci */ #press .press-bios details summary:focus-visible, #press .press-reviews details summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; } /* Mřížka recenzí */ .reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:14px; } .review blockquote{ margin:.25rem 0 1rem; padding:.25rem 0 0 .9rem; border-left:3px solid var(--line); color:var(--ink); } /* EPK grid (pokud se používá) */ .epk-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; } /* Zvýraznění formátování v pressu (B/I/small/link) při zaškrtnutí přepínače) - Podporujeme jak .press-content, tak #pressContent (JSON varianta) */ #press #pressFmt:checked ~ .press-content em, #press #pressFmt:checked ~ .press-content i, #press #pressFmt:checked ~ #pressContent em, #press #pressFmt:checked ~ #pressContent i{ background: rgba(255,180,0,.14); box-shadow: inset 0 0 0 2px rgba(255,180,0,.5); border-radius: 6px; padding: 0 .2em; position: relative; } #press #pressFmt:checked ~ .press-content em::after, #press #pressFmt:checked ~ .press-content i::after, #press #pressFmt:checked ~ #pressContent em::after, #press #pressFmt:checked ~ #pressContent i::after{ content:"I"; position:absolute; top:-0.65em; right:-0.45em; font-weight:700; font-size:.65em; line-height:1; background:rgba(255,180,0,.95); color:#000; padding:.1em .3em; border-radius:4px; } #press #pressFmt:checked ~ .press-content strong, #press #pressFmt:checked ~ .press-content b, #press #pressFmt:checked ~ #pressContent strong, #press #pressFmt:checked ~ #pressContent b{ background: rgba(91,134,255,.16); box-shadow: inset 0 0 0 2px rgba(91,134,255,.55); border-radius: 6px; padding: 0 .2em; position: relative; } #press #pressFmt:checked ~ .press-content strong::after, #press #pressFmt:checked ~ .press-content b::after, #press #pressFmt:checked ~ #pressContent strong::after, #press #pressFmt:checked ~ #pressContent b::after{ content:"B"; position:absolute; top:-0.65em; right:-0.45em; font-weight:700; font-size:.65em; line-height:1; background:rgba(91,134,255,.95); color:#000; padding:.1em .3em; border-radius:4px; } #press #pressFmt:checked ~ .press-content .small, #press #pressFmt:checked ~ #pressContent .small{ background: rgba(229,57,53,.14); box-shadow: inset 0 0 0 2px rgba(229,57,53,.5); border-radius: 6px; padding: 0 .2em; position: relative; } #press #pressFmt:checked ~ .press-content .small::after, #press #pressFmt:checked ~ #pressContent .small::after{ content:"SM"; position:absolute; top:-0.65em; right:-0.45em; font-weight:700; font-size:.65em; line-height:1; background:rgba(229,57,53,.95); color:#fff; padding:.1em .3em; border-radius:4px; } #press #pressFmt:checked ~ .press-content a, #press #pressFmt:checked ~ #pressContent a{ background: rgba(0,200,160,.14); box-shadow: inset 0 0 0 2px rgba(0,200,160,.5); border-radius: 6px; padding: 0 .2em; position: relative; } #press #pressFmt:checked ~ .press-content a::after, #press #pressFmt:checked ~ #pressContent a::after{ content:"LINK"; position:absolute; top:-0.65em; right:-0.45em; font-weight:700; font-size:.55em; letter-spacing:.02em; line-height:1; background:rgba(0,200,160,.95); color:#000; padding:.1em .35em; border-radius:4px; } /* ===================== KONTAKT ===================== */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; } .contact-form{ display:grid; gap:10px; background:var(--card); border:1px solid var(--line); padding:16px; border-radius:var(--radius); } .contact-form input, .contact-form textarea{ width:100%; border-radius:10px; background:#0e1320; border:1px solid var(--line); color:var(--ink); padding:10px; } body[data-theme="light"] .contact-form input, body[data-theme="light"] .contact-form textarea{ background:#fff; } /* ===================== PATIČKA ===================== */ .site-footer{ border-top:1px solid var(--line); } .site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .foot-actions{ display:flex; gap:10px; align-items:center; } /* ===================== RESPONSIVE + MENU ===================== */ @media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; place-items:center; text-align:center; } .contact-grid{ grid-template-columns:1fr; } .menu{ display:none; position:absolute; right:16px; top:60px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; flex-direction:column; gap:12px; box-shadow:var(--shadow); } .menu-open .menu{ display:flex; } .menu.is-open{ display:flex; } } /* Bezpečné globální skrytí věcí s [hidden] */ [hidden]{ display:none !important; } /* Režim „Zobrazit vše“ – nech obsah plynout */ .show-all main{ justify-content:flex-start; gap:32px; } .show-all main > .hero, .show-all main > .section{ flex:0 0 auto; } /* ——— Zarovnání textu do bloku (dlouhé odstavce) ——— */ .section p, .card p, .press-bios p, .press-sources p, .news-list p, .albums p{ text-align: justify; text-justify: inter-word; hyphens: auto; } /* Výjimky: krátké a UI texty necháme vlevo */ .hero .lead, .small, .site-footer p{ text-align:left; } /* ===== Modal (Novinky URL náhled) ===== */ .modal { position: fixed; inset: 0; z-index: 9999; display: none; } .modal[aria-hidden="false"] { display: block; } .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); } .modal-dialog{ position: relative; width: min(1000px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: 1rem auto; background: var(--card, #0f1626); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 60px rgba(0,0,0,.55); } .modal-head{ display:flex; align-items:center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .modal-title{ margin: 0; font-size: 1.05rem; line-height: 1.2; } .modal-actions{ display:flex; align-items:center; gap: .5rem; flex-wrap: wrap; } .modal-body{ padding: .9rem 1rem 1rem; } .modal-note{ margin-bottom: .6rem; } .modal-frame-wrap{ height: min(70vh, 640px); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } #newsModalFrame{ width: 100%; height: 100%; border: 0; display:block; } /* Fokus pro klávesnici */ .modal-dialog :focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }