/* --------------------------------------------------------------------------- Základ vzhledu — společný pro hosty, správce i prezentaci. Barvy se přepínají třídou na : motiv-krem-zlata, motiv-noc, ... Nová akce = jiný motiv v config.php, kód se nemění. --------------------------------------------------------------------------- */ /* ------------------------------------------------------------- písma ---- */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonty/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonty/playfair-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonty/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonty/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F; } /* ------------------------------------------------------------- barvy ---- */ :root { /* krémová a zlatá — výchozí svatební motiv */ --papir: #faf6ef; --papir-tmav: #f2ebdf; --karta: #fffdf9; --inkoust: #2a2520; --inkoust-2: #6b6157; --linka: #e5dbc9; --zlata: #b8934f; --zlata-svet: #d9b874; --zlata-tmav: #8f6f36; --uspech: #4d7c4f; --chyba: #b3462f; --nadpis: 'Playfair Display', Georgia, 'Times New Roman', serif; --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --r-s: 8px; --r-m: 14px; --r-l: 22px; --stin-s: 0 1px 2px rgba(42,37,32,.06), 0 2px 8px rgba(42,37,32,.06); --stin-m: 0 4px 12px rgba(42,37,32,.10), 0 12px 32px rgba(42,37,32,.08); --stin-l: 0 10px 30px rgba(42,37,32,.16), 0 30px 60px rgba(42,37,32,.12); --sirka: 1180px; --hlavicka: 56px; } /* tmavý motiv pro večerní akce a plesy */ .motiv-noc { --papir: #14110e; --papir-tmav: #0d0b09; --karta: #1d1915; --inkoust: #f3ece1; --inkoust-2: #b3a795; --linka: #332c24; --zlata: #d9b874; --zlata-svet: #f0d9a4; --zlata-tmav: #b8934f; } /* ---------------------------------------------------------- základ ------ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--papir); color: var(--inkoust); font-family: var(--text); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; overflow-x: hidden; } h1, h2, h3 { font-family: var(--nadpis); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; } p { margin: 0 0 1em; } a { color: var(--zlata-tmav); } img, video { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--zlata); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------ tlačítka -- */ .tl { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 600 1rem/1 var(--text); padding: 1.05rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; min-height: 52px; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, filter .18s; -webkit-tap-highlight-color: transparent; } .tl:active { transform: translateY(1px) scale(.99); } /* hlavní zlaté tlačítko — leskne se, ať je jasné, kam ťuknout */ .tl--zlata { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--zlata-svet), var(--zlata) 45%, var(--zlata-tmav)); box-shadow: var(--stin-m), inset 0 1px 0 rgba(255,255,255,.35); } .tl--zlata::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-120%); animation: lesk 4.5s cubic-bezier(.4,0,.2,1) 1.2s infinite; } .tl--zlata:hover { box-shadow: var(--stin-l); filter: brightness(1.04); } .tl--tichy { background: transparent; color: var(--inkoust); border: 1px solid var(--linka); } .tl--tichy:hover { border-color: var(--zlata); color: var(--zlata-tmav); } @keyframes lesk { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } } /* -------------------------------------------------------------- pole ---- */ .pole { width: 100%; font: 400 1.05rem/1.4 var(--text); color: var(--inkoust); background: var(--karta); padding: 1rem 1.1rem; border: 1px solid var(--linka); border-radius: var(--r-m); min-height: 52px; } .pole:focus { border-color: var(--zlata); box-shadow: 0 0 0 3px rgba(184,147,79,.18); outline: 0; } /* --------------------------------------------------------- pomocníci ---- */ /* Skrytí musí přebít i vlastní display prvku. Bez tohohle zůstane překryvné okno s `display: flex` na obrazovce, i když se nastaví hidden — otevřít půjde, zavřít ne. */ [hidden] { display: none !important; } .obal { width: min(100% - 2rem, var(--sirka)); margin-inline: auto; } .skryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .zlaty-pruh { height: 1px; border: 0; margin: 2rem 0; background: linear-gradient(90deg, transparent, var(--zlata-svet), transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }