/* ====== Fonty (ak už nie sú importované v , toto ich načíta) ====== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Poppins:wght@400;500;600;700;800&display=swap'); :root{ --tuke-blue-1:#1043b3; --tuke-blue-2:#1455e2; /* NECHÁVAM tvoje pôvodné pozadie */ --bg:#2c3e50; --card:#ffffff; --card-2:#f7f9ff; --stroke:rgba(15, 23, 42, .10); --accent:#ff9100; --accent-2:#ffb74d; --radius:18px; --shadow: 0 18px 55px rgba(0,0,0,.25); --shadow-soft: 0 14px 36px rgba(0,0,0,.18); --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } html, body{ height:100%; } body{ min-height:100vh; display:flex; flex-direction:column; } footer{ margin-top:auto; } .quiz-page{ flex:1; background: var(--bg); /* nemením */ padding: 56px 0 44px; font-family: var(--font-body); position:relative; } /* ====== HERO ====== */ .quiz-hero{ text-align:center; margin-bottom: 14px; } .quiz-title{ color:#fff; font-family: var(--font-head); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; font-size: clamp(36px, 4.4vw, 56px); margin: 0 0 10px; } .quiz-subtitle{ color: rgba(255,255,255,.84); font-size: 15px; font-weight: 500; margin: 0; } /* ====== FILTERS (aby neboli kockaté) ====== */ .quiz-filters{ display:flex; justify-content:center; flex-wrap:wrap; gap: 10px; margin: 18px auto 26px; padding: 8px; width: fit-content; max-width: 100%; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0,0,0,.16); } .quiz-filter{ border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-family: var(--font-head); font-weight: 800; font-size: 13px; padding: 10px 14px; border-radius: 999px; line-height: 1; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease; white-space: nowrap; } .quiz-filter:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); } .quiz-filter.active{ color:#0b1b33; border-color: rgba(255,145,0,.55); background: linear-gradient(90deg, rgba(255,145,0,.95) 0%, rgba(255,183,77,.95) 100%); box-shadow: 0 14px 30px rgba(255,145,0,.18); filter: saturate(1.05); } /* keď sa to nezmestí na mobil, nech sa to nespráva ako hranatá lišta */ @media (max-width: 768px){ .quiz-filters{ border-radius: 18px; padding: 10px; gap: 8px; } .quiz-filter{ font-size: 12px; padding: 9px 12px; } } /* ====== EMPTY STATE ====== */ .quiz-empty{ margin: 0 auto 18px; width: fit-content; max-width: 100%; padding: 10px 14px; border-radius: 14px; color: rgba(255,255,255,.90); background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.12); font-weight: 600; } /* ====== GRID ====== */ .quiz-grid{ align-items: stretch; } /* ====== CARD (viac “premium”, s lepším rozložením) ====== */ .quiz-card{ height: 100%; background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); border-radius: 22px; box-shadow: var(--shadow-soft); overflow:hidden; display:flex; flex-direction:column; position:relative; border: 1px solid rgba(255,255,255,.10); transform: translateZ(0); transition: transform .16s ease, box-shadow .16s ease; } .quiz-card::before{ content:""; position:absolute; inset:0; border-radius: 22px; padding: 1px; background: linear-gradient(135deg, rgba(16,67,179,.34), rgba(255,145,0,.30), rgba(20,85,226,.22) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.95; } .quiz-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 58px rgba(0,0,0,.26); } /* horný blok karty */ .quiz-card-top{ padding: 16px 16px 12px; position: relative; /* aby sa quiz-count vedel ukotviť vpravo hore */ } /* BADGES + ICON v jednom riadku (wrap tak, aby ďalší riadok nezačínal pod ikonou) */ .quiz-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 10px; /* miesto pre ikonku + aby ďalší riadok začal zarovno s badge-ami, nie pod ikonou */ padding-left: 14px; padding-right: 86px; /* rezerva pre count vpravo hore */ row-gap: 8px; } /* ikonka (funguje, ak máš v HTML element s class .quiz-ico) */ .quiz-ico{ width: 34px; height: 34px; border-radius: 12px; display:inline-grid; place-items:center; background: rgba(16,67,179,.10); border: 1px solid rgba(16,67,179,.18); box-shadow: 0 10px 18px rgba(16,67,179,.10); flex: 0 0 auto; /* vráti ikonku späť doľava (kompenzuje padding-left na .quiz-badges) */ margin-left: -44px; } .quiz-ico svg{ width: 18px; height: 18px; fill: #0b1b33; opacity: .92; } /* fallback, ak používaš */ .quiz-ico img{ width: 18px; height: 18px; display:block; } /* badge */ .quiz-badge{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; font-family: var(--font-head); color: #0b1b33; background: #e9f0ff; border: 1px solid rgba(16,67,179,.18); white-space: nowrap; } .quiz-badge.accent{ background: rgba(255,145,0,.14); border: 1px solid rgba(255,145,0,.35); color: #8a4c00; } /* POČET OTÁZOK: vždy úplne vpravo hore (ako na prvom obrázku) */ .quiz-count{ position: absolute; top: 16px; right: 16px; display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; font-family: var(--font-head); background: rgba(16,67,179,.10); border: 1px solid rgba(16,67,179,.18); color:#0b1b33; white-space: nowrap; } /* titul + popis */ .quiz-card-title{ margin: 0 0 8px; font-family: var(--font-head); font-size: 20px; font-weight: 900; color: #0b1b33; line-height: 1.18; letter-spacing: .01em; } .quiz-card-desc{ margin:0; color: #4b5d72; line-height: 1.5; font-size: 14px; font-weight: 500; min-height: 42px; } /* spodok + tlačidlo */ .quiz-card-bottom{ margin-top:auto; padding: 12px 16px 16px; } /* tlačidlo: menej “hrubé”, viac elegantné */ .quiz-btn{ width:100%; border: 0; border-radius: 999px; padding: 13px 16px; font-family: var(--font-head); font-weight: 900; font-size: 14px; letter-spacing: .02em; color: #0b1b33; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: 0 14px 32px rgba(255,145,0,.26); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .quiz-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(255,145,0,.34); filter: brightness(1.02); } .quiz-btn:active{ transform: translateY(0px); } /* ====== QUIZ RUNNER (nech sedí vizuálne s kartami) ====== */ .quiz-runner{ margin-top: 24px; background: #ffffff; border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--stroke); overflow:hidden; } .quiz-runner-head{ padding: 18px 20px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; } .quiz-runner-left{ min-width: 0; } .quiz-runner-h{ margin: 0; font-family: var(--font-head); font-size: 34px; font-weight: 900; color: #0b1b33; line-height: 1.05; } .quiz-meta{ margin-top: 6px; color: #5a6b7d; font-weight: 700; font-family: var(--font-body); } .quiz-quit-top{ border-radius: 999px; border: 1px solid rgba(16,67,179,.22); background: #ffffff; color: #0b1b33; font-family: var(--font-head); font-weight: 900; padding: 10px 14px; transition: background .12s ease, transform .12s ease, border-color .12s ease; white-space: nowrap; } .quiz-quit-top:hover{ background: rgba(16,67,179,.08); border-color: rgba(16,67,179,.35); transform: translateY(-1px); } .quiz-progressbar{ height: 10px; background: #eaf0ff; } .quiz-progressbar > #quizBar{ height: 10px; width: 0%; background: linear-gradient(90deg, rgba(16,67,179,1) 0%, rgba(20,85,226,1) 100%); transition: width .2s ease; } .quiz-runner-body{ padding: 18px 20px 22px; background: #ffffff; } .quiz-question{ font-family: var(--font-head); font-size: 18px; font-weight: 900; color: #0b1b33; margin-bottom: 14px; } .quiz-options{ display:flex; flex-direction:column; gap: 12px; } .quiz-option{ text-align:left; border-radius: 14px; border: 1px solid rgba(20,85,226,.22); background: #f6f9ff; padding: 16px 16px; font-weight: 800; font-family: var(--font-body); color: #0b1b33; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; } .quiz-option:hover{ transform: translateY(-1px); border-color: rgba(20,85,226,.35); box-shadow: 0 10px 25px rgba(16,67,179,.12); background: #f0f6ff; } .quiz-option.selected{ border-color: rgba(255,145,0,.55); background: rgba(255,145,0,.12); box-shadow: 0 12px 28px rgba(255,145,0,.18); } .quiz-actions{ margin-top: 18px; } .quiz-actions .quiz-btn{ padding: 14px 18px; font-size: 15px; } .quiz-result{ margin-top: 16px; padding: 14px 14px; border-radius: 14px; font-weight: 900; font-family: var(--font-head); border: 1px solid rgba(15, 23, 42, .10); } .quiz-result.good{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #0f5132; } .quiz-result.mid{ background: rgba(255,193,7,.14); border-color: rgba(255,193,7,.28); color: #664d03; } .quiz-result.bad{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color: #7f1d1d; } /* ===== Quiz head layout ===== */ .quiz-head{ display:flex; align-items:flex-start; gap: 12px; } /* ===== Icon pill ===== */ .quiz-icon{ width: 38px; height: 38px; border-radius: 14px; display:inline-grid; place-items:center; flex: 0 0 auto; background: rgba(16,67,179,.10); border: 1px solid rgba(16,67,179,.18); box-shadow: 0 10px 18px rgba(16,67,179,.10); margin-top: -2px; /* rovnaký trik ako .quiz-ico, ak používaš .quiz-icon */ } .quiz-icon svg{ width: 18px; height: 18px; display:block; fill: #0b1b33; opacity: .92; } /* variants */ .quiz-icon.kids{ background: rgba(255,145,0,.14); border-color: rgba(255,145,0,.35); box-shadow: 0 10px 18px rgba(255,145,0,.14); } .quiz-icon.parents{ background: rgba(20,85,226,.12); border-color: rgba(20,85,226,.25); box-shadow: 0 10px 18px rgba(20,85,226,.12); } .quiz-icon.teachers{ background: rgba(16,67,179,.12); border-color: rgba(16,67,179,.28); } .quiz-icon.cyber{ background: rgba(15, 23, 42, .08); border-color: rgba(15, 23, 42, .18); box-shadow: 0 10px 18px rgba(0,0,0,.10); } /* ====== Ak používaš bootstrap row/cols: zlepší konzistenciu výšok ====== */ .quiz-grid .col-lg-4, .quiz-grid .col-md-6{ display:flex; } .quiz-grid .col-lg-4 > .quiz-card, .quiz-grid .col-md-6 > .quiz-card{ width:100%; } /* ====== Vyhodnotenie odpovedí (force override) ====== */ .quiz-option.correct, .quiz-option.correct.selected{ border: 2px solid #22c55e !important; background: rgba(34,197,94,.18) !important; box-shadow: 0 0 0 3px rgba(34,197,94,.22) !important; } .quiz-option.wrong, .quiz-option.wrong.selected{ border: 2px solid #ef4444 !important; background: rgba(239,68,68,.14) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important; } /* disabled nech nezosivie zvýraznenie */ .quiz-option:disabled{ opacity: .92; cursor: not-allowed; } .quiz-option.correct:disabled, .quiz-option.wrong:disabled{ opacity: 1 !important; } /* ====== Mobil ====== */ @media (max-width: 768px){ .quiz-runner-h{ font-size: 26px; } .quiz-page{ padding: 42px 0 38px; } /* aby count ostal pekne v rohu aj na mobile */ .quiz-count{ top: 14px; right: 14px; } /* menšia rezerva pre count na užších displejoch */ .quiz-badges{ padding-right: 76px; } } /* mobile: nech sa to nezlomí */ @media (max-width: 520px){ .quiz-badges{ padding-right: 72px; } }