/* === TFA Slatina – základní styl jen s barvami: #000, #fff, #ad3326, #cac857 === */ :root{ --black:#000; --white:#fff; --red:#ad3326; /* primární akcent */ --gold:#cac857; /* sekundární akcent */ --container:980px; } /* Default (dark baseline pro starší stránky), light se přepíná třídou na */ *{ box-sizing:border-box; } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--black); color:var(--white); } a{ color:var(--red); } /* Obecný header (ne topbar) – bez flexu, ať si to řídí konkrétní layouty */ header{ padding:16px; border-bottom:1px solid rgba(255,255,255,.15); } /* Hlavní obsah – šířka layoutu */ main{ padding:16px; max-width:var(--container); margin:0 auto; } /* Form prvky (základ) */ label{ display:block; margin:10px 0; } input,select,button{ padding:8px 10px; background:#111; /* černá varianta (nepřidávám nové hex barvy) */ color:var(--white); border:1px solid rgba(255,255,255,.15); border-radius:8px; } button{ cursor:pointer; } button:hover{ background:#000; border-color:rgba(255,255,255,.25); } fieldset{ border:1px solid rgba(255,255,255,.15); padding:8px; border-radius:8px; margin:6px 0; } .row{ padding:10px; border:1px dashed var(--gold); border-radius:10px; margin:10px 0; } .tbl{ width:100%; border-collapse:collapse; } .tbl th,.tbl td{ border-bottom:1px solid rgba(255,255,255,.15); padding:8px; } .err{ color:#ff8a80; } /* chybová barva ponechána – pokud chceš čistě paletu, můžeme dát var(--red) */ /* Startovní listina & admin */ .startlist{ list-style:none; padding:0; } .startlist li{ padding:8px 6px; border-bottom:1px solid rgba(0,0,0,.1); display:flex; gap:12px; align-items:center; } .startlist .no{ color:rgba(0,0,0,.6); width:52px; display:inline-block; text-align:right; } .admin-list{ list-style:none; padding:0; } .admin-list li{ display:flex; align-items:center; gap:12px; padding:8px; border:1px solid rgba(0,0,0,.12); border-radius:10px; margin:8px 0; background:var(--white); color:var(--black); } .admin-list li .drag{ cursor:grab; } .admin-list li.dragging{ opacity:.6; } .ph{ border:2px dashed var(--gold); height:40px; margin:8px 0; border-radius:10px; } .filters{ display:flex; gap:12px; align-items:center; } /* === Light theme (primární vzhled webu) === */ body.light{ --bg:var(--white); --fg:var(--black); --acc:var(--red); /* primární tlačítka/CTA */ --acc2:var(--gold); /* sekundární akcent, odkazy, zvýraznění */ background:var(--bg); color:var(--fg); } body.light a{ color:var(--acc2); } body.light footer a, body.light .foot a, body.light .hero-card a { color:#ad3326 !important; /* vynucená červená */ text-decoration:none; font-weight:600; } body.light footer a:hover, body.light .foot a:hover, body.light .hero-card a:hover { color:#ff1900 !important; /* světlejší červená na hover */ text-decoration:underline; } /* odkazy v boxu Výsledky předchozích ročníků */ body.light .archive-list a { color: #ad3326 !important; text-decoration: none; font-weight: 600; } body.light .archive-list a:hover { color: #ff1900 !important; text-decoration: underline; } /* === Sticky topbar s obsahem do okrajů layoutu === */ .site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid rgba(0,0,0,.1); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:var(--container); margin:0 auto; padding:12px 16px; } .site-header .nav-links a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: #ad3326; /* přebije globální var(--acc2) */ border: 1px solid transparent; font-weight: 600; transition: background .15s ease, color .15s ease, border-color .15s ease; } .site-header .nav-links a:hover { color: #fff; background: #ad3326; border-color: #ad3326; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; } .brand img{ height:90px; width:auto; } .brand strong{ font-weight:800; font-size:18px; letter-spacing:.2px; } /* Navigace */ nav.primary{ margin-left:auto; } .nav-links{ display:flex; gap:8px; } .nav-links a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: #ad3326; border: 1px solid transparent; font-weight: 600; transition: background .15s ease, color .15s ease, border-color .15s ease; } .nav-links a:hover { color: #fff; background: #ad3326; border-color: #ad3326; } .menu-btn{ display:none; border:1px solid rgba(0,0,0,.15); } /* === Util === */ .container{ max-width: var(--container); margin:0 auto; padding:24px 16px; } .accent{ color:var(--acc2); } /* zlatý akcent v textech */ /* === Hero === */ .hero{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:32px; padding:48px 0; } .hero--compact{ padding:24px 0; } .hero h1{ font-size:clamp(28px,4vw,46px); line-height:1.08; margin:0 0 12px; font-weight:800; } .hero p{ font-size:clamp(15px,1.5vw,18px); color:rgba(0,0,0,.7); margin:0 0 22px; } .cta{ display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; text-decoration:none; border:1px solid rgba(0,0,0,.12); background:var(--white); color:var(--fg); cursor:pointer; } .btn.primary{ background:var(--acc); color:#fff; border-color:transparent; } .btn.danger{ border-color:rgba(0,0,0,.12); } .btn.danger.subtle{ background:#fff; color:#000; } .btn:hover{ filter:brightness(.97); } .hero-card{ background:linear-gradient(180deg, #fff 0%, rgba(0,0,0,.02) 100%); border:1px solid rgba(0,0,0,.1); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06); } .hero-card a { color:#ad3326; /* červený text */ text-decoration:none; /* bez podtržení */ font-weight:600; } .hero-card a:hover { color:#ff1900; text-decoration:none; } /* === Cards/Grid === */ .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; } .card { display: block; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 18px; background: #fff; color: #000; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .card h3 { margin: 0 0 8px; font-size: 18px; color: #ad3326; } .card p { margin: 0; color: rgba(0,0,0,.7); } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,.1); border-color: #ad3326; } /* === FORM – registrace (nové) === */ .form-card{ background:#fff; color:#000; border:1px solid rgba(0,0,0,.1); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06); } .h2{ margin:18px 0 8px; font-size:20px; color:#ad3326; } .form-row{ display:flex; gap:16px; flex-wrap:wrap; } .form-field{ flex:1 1 320px; } .form-field .label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:#333; } .form-field input, .form-field select{ background:#fff; color:#000; border:1px solid rgba(0,0,0,.2); } .form-actions{ display:flex; gap:12px; align-items:center; margin:12px 0; } .form-actions.end{ justify-content:flex-end; } /* dynamické řádky závodníků */ .rows{ display:flex; flex-direction:column; gap:12px; } .row{ border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px; margin:0; background:#fafafa; } .row-grid{ display:grid; grid-template-columns: 1.2fr .8fr 1.2fr auto; /* Jméno | Pohlaví | Věk | Smazat */ gap:12px; align-items:end; } .form-fieldset{ border:1px solid rgba(0,0,0,.15); border-radius:10px; padding:10px; background:#fff; } .form-fieldset .label{ font-weight:700; font-size:13px; color:#333; margin-bottom:8px; } .inline-radio{ display:flex; gap:12px; align-items:center; } .inline-radio.wrap{ flex-wrap:wrap; } .choice{ display:inline-flex; gap:6px; align-items:center; font-size:14px; color:#111; } .choice input{ accent-color:#ad3326; } .row-actions{ display:flex; align-items:center; justify-content:flex-end; } /* === Footer === */ footer{ background:#fff; border-top:1px solid rgba(0,0,0,.1); margin-top:48px; } .foot-wrap{ max-width: var(--container); margin:0 auto; padding:22px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .foot h4{ margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:rgba(0,0,0,.6); } .foot p, .foot a{ color:#ad3326; /* bylo #000 → nyní červené odkazy */ font-size:14px; text-decoration:none; /* odstraní underline */ } .foot a:hover { color:#ff1900; /* mírně světlejší červená na hover */ } .ads img{ height:65px; width:auto; opacity:.9; } /* === Responsivita === */ @media (max-width:980px){ .hero{ grid-template-columns:1fr; } } @media (max-width:820px){ .grid{ grid-template-columns:1fr; } .menu-btn{ display:inline-block; } .nav-links{ display:none; position:absolute; right:16px; top:64px; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.08); padding:8px; flex-direction:column; min-width:180px; } .nav-links.open{ display:flex; } .nav-links a{ padding:10px 12px; } .foot-wrap{ flex-direction:column; text-align:center; } .ads{ margin-top:12px; } /* formulář – stack na mobilu */ .row-grid{ grid-template-columns: 1fr; /* vše pod sebe */ } .row-actions{ justify-content:flex-start; } } /* === REGISTRACE: normalizace polí ve světle === */ body.light input[type="text"], body.light input[type="email"], body.light select, body.light textarea { background:#fff; color:#000; border:1px solid rgba(0,0,0,.2); border-radius:10px; } /* Radio / checkbox akcent do TFA červené */ input[type="radio"], input[type="checkbox"] { accent-color:#ad3326; } /* Tlačítka jako v topbaru: bílý text, červené pozadí, hover světlejší */ .btn.primary, .btn.danger { background:#ad3326; color:#fff; border-color:#ad3326; } .btn.primary:hover, .btn.danger:hover { background:#ff1900; /* požadovaný hover */ border-color:#ff1900; } /* Varianta "subtle" (pokud ji použijeme někde jinde) zůstává bílá */ .btn.danger.subtle { background:#fff; color:#000; } /* Grid pro řádky závodníků (už v base CSS je .row-grid; zde jen doladění) */ .row-grid { grid-template-columns: 1.2fr .8fr 1.2fr auto; /* Jméno | Pohlaví | Věk | Smazat */ gap:12px; align-items:end; } /* Jemné odsazení pro "Přidat závodníka" – chtěls lehké padding-top cca 5px */ .add-row { padding-top:5px; } /* Vzhled boxů řádků v registraci */ .rows { display:flex; flex-direction:column; gap:12px; } .row { border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px; background:#fafafa; } .form-fieldset { border:1px solid rgba(0,0,0,.15); border-radius:10px; padding:10px; background:#fff; } .form-fieldset .label { font-weight:700; font-size:13px; color:#333; margin-bottom:8px; } .inline-radio { display:flex; gap:12px; align-items:center; } .inline-radio.wrap { flex-wrap:wrap; } .choice { display:inline-flex; gap:6px; align-items:center; font-size:14px; color:#111; } .row-actions { display:flex; justify-content:flex-end; align-items:center; } /* Responzivita pro řádek (na mobilu vše pod sebe) */ @media (max-width: 820px){ .row-grid { grid-template-columns: 1fr; } .row-actions { justify-content:flex-start; } } /* Obrázek v hero kartě – čistý, bez box efektu */ .hero-card { display: grid; grid-template-columns: 1fr auto; /* text | obrázek */ align-items: center; gap: 16px; } .hero-card-img { margin: 0; padding: 0; border: 0; background: transparent; } .hero-card-img img { height: 160px; width: auto; display: block; border: none; border-radius: 0; /* zruší zaoblení */ box-shadow: none; /* zruší stín */ } @media (max-width: 700px) { .hero-card { grid-template-columns: 1fr; } .hero-card-img img { height: 80px; } } /* === Registrace závodníků – kompaktní, přehledný layout === */ .row-grid { display: grid; grid-template-columns: 1.5fr 0.6fr 1.2fr auto; gap: 10px 12px; align-items: end; width: 100%; max-width: 100%; box-sizing: border-box; } /* --- jméno --- */ .row-grid .form-field { margin: 0; } .row-grid .form-field input { width: 100%; box-sizing: border-box; } /* --- pohlaví --- */ .row-grid fieldset.gender { border: 0; margin: 0; padding: 0; } .gender legend { font-size: 13px; font-weight: 600; color: inherit; margin-bottom: 4px; } /* --- věková kategorie --- */ .row-grid fieldset.age { border: 0; margin: 0; padding: 0; } .age legend { font-size: 13px; font-weight: 600; color: inherit; margin-bottom: 4px; } /* --- radio skupiny --- */ .inline-radio { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .inline-radio .choice { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; } /* --- akční tlačítko --- */ .row-actions { align-self: end; white-space: nowrap; } /* --- mobilní zobrazení --- */ @media (max-width: 800px) { .row-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "gender age" "actions actions"; } .row-grid .form-field { grid-area: name; } .row-grid fieldset.gender { grid-area: gender; } .row-grid fieldset.age { grid-area: age; } .row-actions { grid-area: actions; justify-self: end; } } /* chybové hlášky (vlastní) */ .err{ color:#c62828; font-size:13px; margin-top:6px; } .err.hide{ display:none; } /* --- archiv PDF exportů --- */ .archive-card { margin-top: 18px; } .archive-list { list-style: none; padding: 0; margin: 6px 0 0; } .archive-list li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08); } .archive-list li:last-child { border-bottom: 0; } .archive-list a { font-weight: 600; text-decoration: none; } .archive-list a:hover { text-decoration: underline; } /* EDIT – srovnat s register.php */ .form-card .row-grid { grid-template-columns: 1fr auto auto auto; /* nechá jméno menší, rádia se nebudou lámat */ column-gap: 12px; } .form-card .form-field .label { margin-bottom: 6px; } /* jméno – menší šířka jako v registraci */ .form-card .form-field input[type="text"], .form-card input[name^="name["], .form-card input[name^="new_name["]{ width: 260px; /* desktop pevná “slim” šířka */ max-width: 260px; padding: 8px 10px; /* menší výška */ font-size: 14px; } /* radio volby kompaktněji */ .form-card .inline-radio .choice { margin-right: 10px; } .form-card .inline-radio.wrap .choice { margin-bottom: 6px; } /* akce v řádku blíž u sebe */ .form-card .row-actions { align-self: end; } /* mobil – ať se jméno roztáhne na 100 % a všechno jde pod sebe */ @media (max-width: 780px){ .form-card .row-grid { grid-template-columns: 1fr; } .form-card .form-field input[type="text"], .form-card input[name^="name["], .form-card input[name^="new_name["]{ width: 100%; max-width: 100%; } }