.sv-wrap). Žádný JavaScript není potřeba – přepínání dní na mobilu řeší CSS. ==================================================================== -->@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600&display=swap'); .sv-wrap *{box-sizing:border-box;margin:0;padding:0} .sv-wrap{ --sv-blue:#5fa8e0; /* názvy lekcí */ --sv-blue-strong:#7bc0f2; --sv-muted:#92aabd; /* lektoři */ --sv-time:#e9ecef; /* časy */ --sv-head:#ffffff; /* dny */ --sv-head-sub:#9fb1c0; --sv-cream:#f2ecc6; /* zvýrazněné lekce */ --sv-cream-border:#e7e09a; --sv-line:rgba(255,255,255,.16); --sv-line-soft:rgba(255,255,255,.08); --sv-bg1:#0b0c0f; --sv-bg2:#191c22; font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; position:relative; max-width:1180px; margin:0 auto; padding:26px 22px 30px; border-radius:18px; color:var(--sv-time); background: radial-gradient(140% 120% at 78% 8%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%), radial-gradient(120% 100% at 10% 100%, rgba(180,205,230,.10) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--sv-bg1) 0%, var(--sv-bg2) 55%, #0d0f13 100%); box-shadow:0 24px 60px rgba(0,0,0,.45); overflow:hidden; } /* jemné "kouřové" světlo přes pozadí */ .sv-wrap::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(60% 90% at 95% 35%, rgba(255,255,255,.07), transparent 60%), radial-gradient(50% 80% at 0% 70%, rgba(255,255,255,.05), transparent 60%); mix-blend-mode:screen; } /* ---------- DESKTOP: mřížka ---------- */ .sv-grid{position:relative;z-index:1} .sv-row{ display:grid; grid-template-columns:96px repeat(6,1fr); } .sv-row.sv-headrow{margin-bottom:2px} .sv-cell{ border-top:1px solid var(--sv-line); border-left:1px solid var(--sv-line); min-height:78px; padding:11px 12px; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center; } .sv-row .sv-cell:last-child{border-right:1px solid var(--sv-line)} .sv-row:last-child .sv-cell{border-bottom:1px solid var(--sv-line)} /* hlavička dnů */ .sv-head-cell{ border:0;min-height:auto;padding-bottom:16px;justify-content:flex-end; } .sv-head-cell .sv-day{ font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.06em; font-size:1.18rem;color:var(--sv-head);line-height:1.05;text-transform:uppercase; } .sv-head-cell .sv-day-en{ font-family:'Oswald',sans-serif;font-weight:400;letter-spacing:.05em; font-size:.82rem;color:var(--sv-head-sub);text-transform:uppercase;margin-top:2px; } /* sloupec s časem */ .sv-time-cell{ font-family:'Oswald',sans-serif;font-weight:500;color:var(--sv-time); font-size:.96rem;letter-spacing:.02em;line-height:1.25; } /* lekce */ .sv-class{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.12rem; letter-spacing:.01em;color:var(--sv-blue);line-height:1.12} .sv-coach{font-family:'Barlow',sans-serif;font-weight:500;font-size:.95rem; color:var(--sv-muted);margin-top:3px;line-height:1.2} .sv-note{font-size:.82rem;color:var(--sv-muted);margin-top:3px} .sv-coach b,.sv-note b{color:#aebfcd;font-weight:600} /* zvýrazněná lekce (Pilates Reformer) */ .sv-cell.sv-hl{ border:1.5px solid var(--sv-cream-border)!important; border-radius:6px; background:rgba(231,224,154,.05); box-shadow:inset 0 0 22px rgba(231,224,154,.05); } .sv-cell.sv-hl .sv-class{color:var(--sv-cream)} .sv-cell.sv-hl .sv-coach,.sv-cell.sv-hl .sv-note{color:#cfc89a} /* ---------- MOBIL: přepínač dní ---------- */ .sv-mobile{display:none} .sv-mobile input{position:absolute;opacity:0;pointer-events:none} .sv-tabs{ display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:18px; } .sv-tab{ font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.04em; font-size:.82rem;text-transform:uppercase;color:var(--sv-head-sub); padding:9px 13px;border-radius:999px;cursor:pointer; border:1px solid var(--sv-line);background:rgba(255,255,255,.03); transition:.18s ease;user-select:none; } .sv-tab:hover{color:#fff;border-color:rgba(255,255,255,.3)} .sv-panel{display:none} .sv-item{ display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center; padding:14px 4px;border-top:1px solid var(--sv-line-soft); } .sv-panel .sv-item:last-child{border-bottom:1px solid var(--sv-line-soft)} .sv-item .sv-time-cell{text-align:left;font-size:.92rem;color:var(--sv-time)} .sv-item .sv-class{font-size:1.18rem} .sv-itembox{padding-left:2px} .sv-item.sv-hl{ border:1.5px solid var(--sv-cream-border)!important;border-radius:8px; background:rgba(231,224,154,.05);padding:14px 12px;margin:6px 0; } .sv-item.sv-hl + .sv-item.sv-hl{margin-top:-2px} .sv-item.sv-hl .sv-class{color:var(--sv-cream)} .sv-item.sv-hl .sv-coach,.sv-item.sv-hl .sv-note{color:#cfc89a} .sv-empty{padding:26px 6px;text-align:center;color:var(--sv-muted); font-family:'Oswald',sans-serif;letter-spacing:.04em} /* propojení radio -> aktivní tab + panel */ #sv-d0:checked ~ .sv-tabs label[for="sv-d0"], #sv-d1:checked ~ .sv-tabs label[for="sv-d1"], #sv-d2:checked ~ .sv-tabs label[for="sv-d2"], #sv-d3:checked ~ .sv-tabs label[for="sv-d3"], #sv-d4:checked ~ .sv-tabs label[for="sv-d4"], #sv-d5:checked ~ .sv-tabs label[for="sv-d5"]{ color:#0c0e12;background:var(--sv-blue);border-color:var(--sv-blue); } #sv-d0:checked ~ .sv-panels .sv-p0, #sv-d1:checked ~ .sv-panels .sv-p1, #sv-d2:checked ~ .sv-panels .sv-p2, #sv-d3:checked ~ .sv-panels .sv-p3, #sv-d4:checked ~ .sv-panels .sv-p4, #sv-d5:checked ~ .sv-panels .sv-p5{display:block} /* ---------- BREAKPOINTY ---------- */ @media (max-width:920px){ .sv-class{font-size:1rem} .sv-head-cell .sv-day{font-size:1rem} .sv-head-cell .sv-day-en{font-size:.72rem} .sv-coach{font-size:.86rem} .sv-cell{padding:9px 7px;min-height:70px} .sv-row{grid-template-columns:62px repeat(6,1fr)} .sv-time-cell{font-size:.82rem} } @media (max-width:760px){ .sv-grid{display:none} .sv-mobile{display:block;position:relative;z-index:1} .sv-wrap{padding:22px 16px 24px} } @media (max-width:380px){ .sv-tab{font-size:.76rem;padding:8px 11px} .sv-item{grid-template-columns:66px 1fr;gap:10px} } @media (prefers-reduced-motion:reduce){.sv-tab{transition:none}}