@charset "UTF-8"; /* ========================================================= MojePrazdniny.cz – REDESIGN LAYER Material Design inspired (W3.CSS compatible) ========================================================= */ /* ========================= RESET / NORMALIZATION ========================= */ *, *::before, *::after { box-sizing: border-box; } img, svg { border: none; } /* ========================= DESIGN TOKENS (VYLADĚNÉ) ========================= */ :root { /* TYPOGRAPHY Použití: - --font-body: všechen běžný text (body, inputy, tlačítka) - --font-heading: nadpisy (h1–h6) */ --font-body: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-heading: "Raleway", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Základní typografická škála */ --font-size-base: 16px; --line-height-base: 1.6; /* Váhy: držíš konzistentní hierarchii */ --fw-display: 300; /* velké hero titulky, když chceš „lehkost“ */ --fw-regular: 400; /* default text */ --fw-medium: 500; /* zvýraznění bez křiku */ --fw-strong: 600; /* nadpisy / důležité labely */ --fw-bold: 700; /* fakt důležité, ale používat střídmě */ /* RADIUS Použití: jednotný radius na karty, tlačítka, inputy */ --radius-base: 4px; /* WIDTH SYSTEM Použití: - --md-maxw: klasický obsah webu - --md-hero-maxw: širší hero/hlavní bloky */ --md-maxw: 1205px; --md-hero-maxw: 1600px; /* BACKGROUNDS (chladnější neutrál) Použití: - --c-bg: pozadí stránky - --c-surface-*: vrstvy karet/sekcí (1 = nejčistší, 3 = nejvýraznější) */ --c-bg: #f3f7f7; --c-surface-1: #fbfdfd; /* top surface (karty, modaly) */ --c-surface-2: #ecf2f1; /* sekundární bloky, jemné podklady */ --c-surface-3: #e2ecea; /* zvýrazněné sekce, „panel“ */ /* alias, když chceš jen “nějaký surface” */ --c-surface: var(--c-surface-1); /* TEXT Použití: - --c-text: default text - --c-text-strong: nadpisy / hlavní informace - --c-text-2: sekundární text (meta, popisky) - --c-text-3: velmi slabý text (hinty, placeholder styl) */ --c-text: rgba(10, 18, 18, 0.86); --c-text-strong: rgba(10, 18, 18, 0.92); --c-text-2: rgba(10, 18, 18, 0.62); --c-text-3: rgba(10, 18, 18, 0.40); --c-text-action: rgba(10, 18, 18, 0.40); /* BORDERS Použití: okraje karet, inputů, oddělovače */ --c-border: rgba(10, 18, 18, 0.14); /* ACTION (brand accent = calm deep teal) Použití: - --c-action: primární CTA - --c-action-hover: hover/active stav - --c-on-action: text na tlačítku (kontrast) */ --c-action: #174f52; --c-action-hover: #15484b; --c-on-action: #ffffff; /* SHADOWS Použití: - --shadow-1: jemný stín (např. karty v listu) - --shadow-2: výraznější (hero karta, modal) */ --shadow-1: 0 1px 2px rgba(0,0,0,0.06); --shadow-2: 0 10px 26px rgba(0,0,0,0.12); /* FOCUS Použití: focus-visible pro accessibility */ --focus-ring: 0 0 0 3px rgba(23,79,82,0.28); /* MOTION Použití: konzistentní přechody a animace */ --md-ease: cubic-bezier(.2,.0,.0,1); --md-dur-120: 120ms; --md-dur-200: 200ms; /* === ACTION (RGBA variants) === */ --c-action-90: rgba(23, 79, 82, 0.9); --c-action-85: rgba(23, 79, 82, 0.85); --c-action-80: rgba(23, 79, 82, 0.8); --c-action-70: rgba(23, 79, 82, 0.7); --c-action-60: rgba(23, 79, 82, 0.6); --c-action-40: rgba(23, 79, 82, 0.4); --c-action-20: rgba(23, 79, 82, 0.2); } /* ========================= MD ROLE CLASSES (K ČEMU JSOU) ========================= */ /* BACKGROUND - .md-bg: dej na wrapper, sekce stránky - .md-surface-*: dej na karty / bloky v layoutu */ .md-bg { background-color: var(--c-bg); } .md-surface, .md-surface-1 { background-color: var(--c-surface-1); } .md-surface-2 { background-color: var(--c-surface-2); } .md-surface-3 { background-color: var(--c-surface-3); } /* TEXT - .md-text: default text (většinou zbytečné, protože body to má) - .md-text-strong: nadpisy / ceny / primární info - .md-text-2: metadata (lokalita, štítky, popisek) - .md-text-3: hinty, méně důležité věci - .md-text-on-action: text na CTA prvku s .md-bg-action */ .md-text { color: var(--c-text); } .md-text-strong { color: var(--c-text-strong); } .md-text-2 { color: var(--c-text-2); } .md-text-3 { color: var(--c-text-3); } .md-text-on-action { color: var(--c-on-action); } /* BORDERS - .md-border: univerzální 1px border okolo (karta, input wrapper, box) */ .md-border { border: 1px solid var(--c-border); } /* ACTION - .md-bg-action: primární CTA background (button, badge, highlight) Tip: přidej si k tomu ještě text třídu .md-text-on-action */ /* CTA tlačítka */ .md-bg-action { background: var(--c-action); color: #fff; } .md-bg-action:hover { background: var(--c-action-90); } /* SHADOW - .md-shadow-1: běžné kartičky v gridu/listu - .md-shadow-2: hero karta / modal / sticky prvky */ .md-shadow-1 { box-shadow: var(--shadow-1); } .md-shadow-2 { box-shadow: var(--shadow-2); } /* HOVER - .md-hover-surface: pro list itemy / karty, co se mají lehce zvýraznit */ .md-hover-surface:hover { background-color: var(--c-surface-2); } /* RADIUS - .md-round: standardní radius, ať to nepůsobí každý blok jinak */ .md-round { border-radius: var(--radius-base); } /* odkazy */ a.link-action { color: var(--c-action-85); } a.link-action:hover { color: var(--c-action); } /* jemné pozadí sekcí */ .bg-action-soft { background: var(--c-action-20); } /* ========================= BASE TYPOGRAPHY ========================= */ html { font-size: var(--font-size-base); } body { font-family: var(--font-body); line-height: var(--line-height-base); font-weight: var(--fw-regular); color: var(--c-text); background-color: var(--c-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-strong); color: var(--c-text-strong); margin: 0; } p { margin: 0; } /* ========================= ACCESSIBILITY – FOCUS ========================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ========================= MD LINK STYLE ========================= */ .md-hover-link { text-decoration: none; color: var(--c-text); border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } .md-hover-link:hover { color: var(--c-action); border-bottom-color: currentColor; } .w3-button.md-bg-action:hover { background-color: var(--c-action-hover) !important; color: var(--c-on-action) !important; box-shadow: var(--shadow-2); /* volitelné, ale hezké */ } /* ========================= MD SPLIT (HERO) -- NEMĚNÍM LAYOUT ========================= */ .md-split { padding: 0 16px 36px; } .md-split__wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; max-width: var(--md-hero-maxw); margin: 0 auto; padding: 28px; } .md-split__media { position: relative; height: 620px; border-radius: 4px; overflow: hidden; } .md-split__img { width: 100%; height: 100%; object-fit: cover; } .md-split__mediaOverlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0)); } .md-split__card { align-self: center; justify-self: end; /* jediná "bezpečná" úprava: místo #fff používám surface token */ background: var(--c-surface-1); border-radius: 4px; padding: 42px 48px; box-shadow: var(--shadow-2); transform: translateX(-80px); max-width: 720px; } /* ========================= RESPONSIVE – MD SPLIT (NECHÁNO 1:1) ========================= */ @media (max-width: 800px){ .md-split{ --mediaH: 300px; padding: 0 12px; } .md-split__wrap{ grid-template-columns: 1fr; padding: 16px 16px 28px 16px; } .md-split__card{ position: relative; z-index: 3; transform: none; justify-self: center; width: calc(100% - 32px); max-width: none; margin-top: -80px; margin-left: auto; margin-right: auto; max-height: none; overflow: visible; padding: 48px 22px; } .md-split__title{ font-size: 32px; } }