/** * Kormuth Rezervácie — frontend styles * * Page structure: * .kr-page-main * .kr-hero — full-width image + tmavá tint * .kr-hero-inner * .kr-hero-logo (optional, posúvateľné X) * .kr-hero-title * .kr-hero-subtitle * .kr-content * .kr-content-inner * .kr-ornament * .kr-paragraph (x N) * * Theme-aware: light/dark cez data-theme atribut (SM nastavuje). */ /* ════════════════════ MAIN WRAPPER ════════════════════ */ .kr-page-main { background: var(--page-bg, #ffffff); color: var(--text, #3b3530); min-height: calc(100vh - 80px); } /* ════════════════════ HERO HEADER ════════════════════ */ .kr-hero { position: relative; width: 100%; min-height: 64vh; max-height: 720px; background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; padding: 80px 24px 60px; overflow: hidden; } .kr-hero::after { /* jemná vinetácia pre hĺbku */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%); pointer-events: none; } .kr-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 800px; color: #f4ede2; } .kr-hero-logo { display: block; margin: 0 auto 32px; width: 100px; height: auto; max-width: 30vw; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); transition: transform .5s cubic-bezier(.2,.8,.2,1); /* inline transform sa nastavuje z PHP (logo_x_px) — pozor pri nahradzovaní */ } .kr-hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(48px, 8vw, 96px); font-weight: 300; letter-spacing: 0.02em; margin: 0 0 18px; color: #ffffff; text-shadow: 0 6px 28px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.2); line-height: 1.05; } .kr-hero-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(18px, 2.4vw, 26px); font-weight: 300; color: #f4ede2; opacity: 0.92; margin: 0; letter-spacing: 0.02em; text-shadow: 0 3px 12px rgba(0,0,0,0.65); line-height: 1.3; } /* ════════════════════ CONTENT BODY ════════════════════ */ .kr-content { padding: 80px 24px 120px; background: var(--page-bg, #ffffff); transition: background-color .4s ease, color .4s ease; } .kr-content-inner { max-width: 720px; margin: 0 auto; text-align: center; } .kr-ornament { display: block; color: var(--gold, #b89567); font-size: 28px; margin: 0 auto 36px; opacity: 0.75; line-height: 1; } .kr-paragraph { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(17px, 1.8vw, 21px); font-weight: 400; line-height: 1.75; color: var(--text, #3b3530); margin: 0 0 24px; text-align: center; letter-spacing: 0.01em; } .kr-paragraph:last-child { margin-bottom: 0; } /* Mid-paragraph emphasis — prvý odsek je trochu väčší, ako lead */ .kr-paragraph:first-of-type { font-size: clamp(18px, 2vw, 23px); font-weight: 400; } /* ════════════════════ DARK MODE ════════════════════ */ /* SM aplikuje data-theme="dark" na . CSS premenné --page-bg a --text sa prepnú automaticky. Hero je tmavý vždy (má dark tint cez background-image), takže netreba meniť. */ html[data-theme="dark"] .kr-content { background: var(--page-bg, #0d0a08); } html[data-theme="dark"] .kr-paragraph { color: var(--text, #d4c8b5); } /* ════════════════════ RESPONSIVE ════════════════════ */ @media (max-width: 700px) { .kr-hero { min-height: 56vh; padding: 60px 16px 50px; } .kr-hero-logo { width: 80px; margin-bottom: 24px; } .kr-hero-title { font-size: clamp(40px, 12vw, 64px); } .kr-content { padding: 60px 18px 80px; } .kr-content-inner { max-width: 100%; } } /* ════════════════════ REDUCED MOTION ════════════════════ */ @media (prefers-reduced-motion: reduce) { .kr-hero-logo, .kr-content { transition: none; } }