/* ========================================================================== Priehrada Rezort — globálne štýly statického webu Farby a typografia podľa brand dizajnu React prototypu. ========================================================================== */ :root { --dark: #1d1d1b; /* firemná čierna */ --dark-2: #2d2d2d; --accent: #8b7355; --accent-light: #a68b6a; --gold: #bca27f; --cream: #f5f0e8; --cream-dark: #e8e0d4; --muted: #6b6b6b; --white: #ffffff; --font-serif: 'Marcellus', serif; --font-sans: 'Manrope', sans-serif; } /* ---------- Reset & základ ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; /* Miesto pre posuvník je rezervované vždy, aby obsah pri zamknutí scrollu (celoobrazovková fotka) neposkočil o jeho šírku. */ scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--dark); background-color: var(--white); min-width: 320px; /* Bez overflow-x: hidden! Keďže html už má overflow-x: hidden, hodnota na body sa nepropaguje na viewport — body by sa stalo vlastným scroll kontajnerom a position: sticky (.tabs) by prestalo fungovať. Vodorovný pretok orezáva html. */ line-height: 1.5; } img, video, canvas, svg { max-width: 100%; display: block; } button, a, input, select, textarea { max-width: 100%; font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { text-decoration: none; } ul { list-style: none; } h1, h2, h3, h4, h5, h6, .font-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.02em; } /* Zamknutie scrollu počas celoobrazovkového overlayu. Musí byť na : keďže html má overflow-x: hidden, je scroll kontajnerom ono — nastavenie overflow na sa na stránku vôbec neprejaví. */ html.is-scroll-locked { overflow: hidden; /* Dopočítané v script.js — 0px, ak si prehliadač miesto po posuvníku rezervuje sám (scrollbar-gutter) alebo má prekryvné posuvníky. */ padding-right: var(--scrollbar-compensation, 0px); } html.is-scroll-locked .site-header { padding-right: var(--scrollbar-compensation, 0px); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #6b5a42; } @supports (scrollbar-color: auto) { html { scrollbar-color: var(--accent) var(--cream); scrollbar-width: thin; } } .icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon--lg { width: 1.75rem; height: 1.75rem; } .icon--md { width: 1.25rem; height: 1.25rem; } .icon--xl { width: 2.25rem; height: 2.25rem; } .container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; } .container--wide { max-width: 72rem; } .container--narrow { max-width: 64rem; } .container--text { max-width: 56rem; } .container--tight { max-width: 48rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } /* ---------- Animácie pri scrollovaní ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } .reveal--left { transform: translateX(-24px); } .reveal--right { transform: translateX(24px); } .reveal--zoom { transform: scale(.95); transition-duration: .5s; } /* Vnútri scroll-snap pásu sa položka nesmie zmenšovať — zmenšený snap box posunie východiskový scrollLeft (galéria štartovala na 7,5 px namiesto 0). Zmenšuje sa preto obrázok vnútri, nie samotná položka. */ .scroll-gallery__item.reveal--zoom { transform: none; } .scroll-gallery__item.reveal--zoom figure { transform: scale(.95); transition: transform .5s ease; /* Rovnaké oneskorenie ako má položka (nastavuje ho script.js), inak by zmenšenie dobehlo skôr, než sa fotka vôbec začne odkrývať. */ transition-delay: var(--reveal-delay, 0s); } .scroll-gallery__item.reveal--zoom.is-visible figure { transform: none; } .reveal--left.is-visible, .reveal--right.is-visible, .reveal--zoom.is-visible { transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal--left, .reveal--right, .reveal--zoom, .scroll-gallery__item.reveal--zoom figure, .scroll-gallery__item.reveal--zoom.is-visible figure { opacity: 1; transform: none; transition: none; transition-delay: 0s !important; } html { scroll-behavior: auto; } } /* ---------- Tlačidlá ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem 2rem; font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s ease, color .3s ease, opacity .3s ease; text-align: center; } .btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-light); } .btn--white { background: #fff; color: var(--dark); } .btn--white:hover { background: rgba(255,255,255,.9); } .btn--outline-white { border: 1px solid #fff; color: #fff; } .btn--outline-white:hover { background: rgba(255,255,255,.1); } .btn--outline-dark { border: 1px solid var(--dark); color: var(--dark); } .btn--outline-dark:hover { background: var(--dark); color: #fff; } .btn--outline-faint { border: 1px solid rgba(255,255,255,.4); color: #fff; } .btn--outline-faint:hover { background: rgba(255,255,255,.1); } /* ---------- Hlavička ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.05); color: var(--dark); transition: background .5s ease, box-shadow .5s ease, color .5s ease; } .site-header.is-transparent { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: #fff; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; } @media (min-width: 640px) { .site-header__inner { height: 5rem; } } .site-header__logo { display: flex; align-items: center; min-width: 0; color: inherit; } .site-header__logo img { height: 1.875rem; width: auto; /* Logo je vo firemnej čiernej; nad hero fotkou je hlavička priehľadná s bielym textom, tak sa preklopí do bielej. Prechod má rovnaké trvanie ako prefarbenie hlavičky, aby sa menili naraz. */ transition: filter .5s ease; } @media (min-width: 640px) { .site-header__logo img { height: 2.375rem; } } .site-header.is-transparent .site-header__logo img { filter: brightness(0) invert(1); } .site-header__nav { display: none; align-items: center; gap: 2rem; } .site-header__nav a { font-size: .875rem; font-weight: 500; letter-spacing: .025em; color: inherit; transition: opacity .2s ease; } .site-header__nav a:hover { opacity: .6; } .site-header__nav a.is-active { position: relative; opacity: 1; } .site-header__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 2px; background: currentColor; opacity: .8; } .site-header__nav a.is-active:hover { opacity: .75; } .site-header__right { display: none; align-items: center; gap: 1.25rem; } .site-header__phone { display: flex; align-items: center; gap: .375rem; font-size: .875rem; color: inherit; transition: opacity .2s ease; } .site-header__phone:hover { opacity: .6; } .site-header__cta { background: var(--accent); color: #fff; padding: .625rem 1.5rem; font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background .3s ease; } .site-header__cta:hover { background: var(--accent-light); } .site-header__burger { display: block; padding: .5rem; margin-right: -.5rem; color: inherit; } .site-header__burger .icon { width: 1.5rem; height: 1.5rem; } .site-header__burger .icon--close { display: none; } .site-header.menu-open .site-header__burger .icon--close { display: block; } .site-header.menu-open .site-header__burger .icon--menu { display: none; } @media (min-width: 1024px) { .site-header__nav, .site-header__right { display: flex; } .site-header__burger { display: none; } } /* Mobilné menu */ .mobile-menu { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; background: #fff; border-top: 0 solid #f3f4f6; overflow: hidden; transition: grid-template-rows .32s ease, opacity .32s ease, border-top-width .32s ease, visibility .32s; } .mobile-menu > * { min-height: 0; } .site-header.menu-open .mobile-menu { grid-template-rows: 1fr; visibility: visible; opacity: 1; border-top-width: 1px; } /* Na telefóne na šírku je menu vyššie ako obrazovka a hlavička je fixná — bez vlastného scrollu by sa k tlačidlu „Rezervovať" nedalo dostať. */ .site-header.menu-open .mobile-menu__inner { max-height: calc(100svh - 4rem); overflow-y: auto; overscroll-behavior: contain; } @media (min-width: 640px) { .site-header.menu-open .mobile-menu__inner { max-height: calc(100svh - 5rem); } } /* Na desktope sa mobilné menu nikdy nezobrazuje (ani po zmene veľkosti okna). */ @media (min-width: 1024px) { .mobile-menu { display: none; } } @media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu__inner { transition: none; } } /* Zvislý padding musí kolabovať spolu s riadkom — inak si zavreté menu drží výšku paddingu (grid-template-rows: 0fr zmenší len obsah, nie padding). */ .mobile-menu__inner { padding: 0 1rem; transition: padding .32s ease; } .site-header.menu-open .mobile-menu__inner { padding: 1.5rem 1rem; } .mobile-menu__inner a.mobile-menu__link.is-active { color: var(--accent); font-weight: 600; } .mobile-menu__inner a.mobile-menu__link { display: block; color: var(--dark); font-size: 1.125rem; font-weight: 500; padding: .5rem 0; } .mobile-menu__footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; display: grid; gap: .75rem; } .mobile-menu__phone { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .875rem; } .mobile-menu__cta { display: block; text-align: center; text-transform: uppercase; letter-spacing: .08em; background: var(--accent); color: #fff; padding: .75rem 1.5rem; font-size: .875rem; font-weight: 500; } /* ---------- Hero sekcie ---------- */ .hero { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 60svh; min-height: 400px; } @media (min-width: 640px) { .hero { height: 70vh; min-height: 520px; } } .hero--full { height: 100svh; min-height: 0; } @media (min-width: 640px) { .hero--full { height: 100svh; min-height: 600px; } } /* Kontakt: bez pevnej výšky — iba minimálna, ako v pôvodnom prototype. */ .hero--band { height: auto; min-height: 100svh; } @media (min-width: 640px) { .hero--band { height: auto; min-height: 600px; } } .hero--band .hero__text { font-size: 1.125rem; } .hero--mid { height: 58svh; min-height: 380px; } @media (min-width: 640px) { .hero--mid { height: 65vh; min-height: 480px; } } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); } .hero--full .hero__bg::after { background: rgba(0,0,0,.45); } .hero--darker .hero__bg::after { background: rgba(0,0,0,.55); } .hero__content { position: relative; z-index: 10; text-align: center; color: #fff; padding: 0 1rem; max-width: 56rem; margin: 0 auto; } @keyframes heroIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* Domovská stránka: značka je obrázkové logo, nie text. */ .hero__logo { margin: 0 auto 1.5rem; line-height: 0; } .hero__logo img { width: min(74vw, 340px); height: auto; margin: 0 auto; filter: brightness(0) invert(1); /* biele nad tmavou fotkou */ } @media (min-width: 640px) { .hero__logo img { width: min(60vw, 420px); } } @media (min-width: 1024px) { .hero__logo img { width: 460px; } } .hero__title { font-size: 2.5rem; font-weight: 500; letter-spacing: .025em; margin-bottom: 1rem; } @media (min-width: 380px) { .hero__title { font-size: 3rem; } } @media (min-width: 640px) { .hero__title { font-size: 3.75rem; margin-bottom: 1.5rem; } } @media (min-width: 1024px) { .hero__title { font-size: 4.5rem; } } .hero--full .hero__title { font-size: 2.5rem; } @media (min-width: 380px) { .hero--full .hero__title { font-size: 3rem; } } @media (min-width: 640px) { .hero--full .hero__title { font-size: 4.5rem; } } @media (min-width: 1024px) { .hero--full .hero__title { font-size: 6rem; } } .hero__text { font-size: 1rem; color: rgba(255,255,255,.8); max-width: 36rem; margin: 0 auto; line-height: 1.7; } @media (min-width: 640px) { .hero__text { font-size: 1.125rem; } } .hero--full .hero__text { max-width: 42rem; margin-bottom: 1.75rem; } @media (min-width: 640px) { .hero--full .hero__text { font-size: 1.25rem; margin-bottom: 2.5rem; } } .hero__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } @media (min-width: 640px) { .hero__actions { flex-direction: row; } } .hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); } .hero__scroll span { display: flex; justify-content: center; padding-top: .5rem; width: 1.5rem; height: 2.5rem; border: 2px solid rgba(255,255,255,.5); border-radius: 999px; } .hero__scroll i { display: block; width: .25rem; height: .5rem; background: rgba(255,255,255,.8); border-radius: 999px; } @keyframes scrollHint { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } } /* ---------- Sekcie ---------- */ .section { padding: 3.5rem 0; background: var(--white); } .section--cream { background: var(--cream); } .section--dark { background: var(--dark); color: #fff; } @media (min-width: 640px) { .section { padding: 6rem 0; } .section--compact { padding: 5rem 0; } } .section-head { text-align: center; margin-bottom: 2.5rem; } @media (min-width: 640px) { .section-head { margin-bottom: 4rem; } } .section-head__title { font-size: 1.875rem; color: var(--dark); margin-bottom: 1rem; } @media (min-width: 640px) { .section-head__title { font-size: 3rem; } } .section--dark .section-head__title { color: #fff; } .section-head__text { color: var(--muted); max-width: 36rem; margin: 0 auto; } .eyebrow { color: var(--accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; margin-bottom: 1rem; } .divider-line { width: 4rem; height: 1px; background: var(--accent); margin: 0 auto 3rem; } /* ---------- Domov: kategórie ---------- */ .category-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } } .category-card { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; width: 100%; } .category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .category-card:hover img { transform: scale(1.1); } .category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2) 50%, transparent); } .category-card__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.5rem; text-align: left; } .category-card__label h3 { color: #fff; font-size: 1.25rem; margin-bottom: .5rem; } .category-card__more { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.7); font-size: .875rem; opacity: 0; transition: opacity .3s ease; } .category-card:hover .category-card__more { opacity: 1; } /* ---------- Domov: o nás ---------- */ .about { position: relative; padding: 3.5rem 0; overflow: hidden; } @media (min-width: 640px) { .about { padding: 6rem 0; } } .about__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; } @media (hover: none) { .about__bg { background-attachment: scroll; } } .about__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.62); } .about__content { position: relative; z-index: 10; max-width: 56rem; margin: 0 auto; padding: 0 1rem; text-align: center; color: #fff; } @media (min-width: 640px) { .about__content { padding: 0 1.5rem; } } .about__content h2 { font-size: 1.875rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .about__content h2 { font-size: 3rem; margin-bottom: 2rem; } } .about__content p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; } @media (min-width: 640px) { .about__content p { font-size: 1.125rem; } } .about__content p:last-child { margin-bottom: 0; } /* ---------- Domov: galéria areálu ---------- */ .scroll-gallery { position: relative; } .scroll-gallery__track { display: flex; gap: 1rem; overflow-x: auto; /* Bez toho sa scroll na konci pásu reťazí na stránku a trackpadové gesto vyvolá navigáciu „späť" v prehliadači. */ overscroll-behavior-x: contain; padding-bottom: 1rem; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } .scroll-gallery__track::-webkit-scrollbar { display: none; } .scroll-gallery__item { flex-shrink: 0; width: calc(100vw - 3rem); max-width: 300px; scroll-snap-align: start; } @media (min-width: 640px) { .scroll-gallery__item { width: 420px; max-width: none; } } .scroll-gallery__item figure { aspect-ratio: 4 / 3; overflow: hidden; } .scroll-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .scroll-gallery__item img:hover { transform: scale(1.05); } .scroll-gallery__arrow { display: none; position: absolute; top: 50%; z-index: 10; width: 3rem; height: 3rem; background: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); align-items: center; justify-content: center; transition: background .3s ease; } .scroll-gallery__arrow:hover { background: var(--cream); } /* Na kraji pásu je šípka zjavne neaktívna (predtým vyzerala rovnako ako funkčná a klikanie na ňu nerobilo nič). */ .scroll-gallery__arrow:disabled { opacity: .35; cursor: default; box-shadow: none; } .scroll-gallery__arrow:disabled:hover { background: #fff; } .scroll-gallery__arrow--left { left: 0; transform: translate(-1.25rem, -50%); } .scroll-gallery__arrow--right { right: 0; transform: translate(1.25rem, -50%); } @media (min-width: 640px) { .scroll-gallery__arrow { display: flex; } } .scroll-gallery__arrow .icon { width: 1.25rem; height: 1.25rem; } /* ---------- Domov: recenzie ---------- */ .reviews { max-width: 56rem; margin: 0 auto; } .review-card { background: var(--cream); padding: 1.25rem; } @media (min-width: 380px) { .review-card { padding: 1.5rem; } } @media (min-width: 640px) { .review-card { padding: 3rem; } } @keyframes reviewIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } .review-card__quote { width: 2.5rem; height: 2.5rem; color: rgba(139,115,85,.3); margin-bottom: 1.5rem; } .review-card__text { font-family: var(--font-serif); font-size: 1.25rem; color: var(--dark); line-height: 1.7; margin-bottom: 2rem; } @media (min-width: 640px) { .review-card__text { font-size: 1.5rem; } } .review-card__stars { display: flex; gap: .25rem; margin-bottom: 1rem; } .review-card__stars .icon { width: 1.25rem; height: 1.25rem; fill: var(--accent); stroke: var(--accent); } .review-card__name { font-weight: 500; color: var(--dark); } .review-card__role { color: var(--muted); font-size: .875rem; } .dots { display: flex; justify-content: center; gap: .75rem; margin-top: 2rem; } .dots button { width: .75rem; height: .75rem; border-radius: 999px; background: #d1d5db; transition: background .3s ease; } .dots button.is-active { background: var(--accent); } /* ---------- Ubytovanie: zoznam izieb ---------- */ .room-group { margin-bottom: 5rem; } .room-group__title { font-size: 1.875rem; color: var(--dark); text-align: center; margin-bottom: .5rem; } @media (min-width: 640px) { .room-group__title { font-size: 2.25rem; } } .room-row { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid #e5e7eb; } @media (min-width: 768px) { .room-row { flex-direction: row; gap: 2.5rem; } } .room-row__thumb { flex-shrink: 0; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; display: block; } @media (min-width: 768px) { .room-row__thumb { width: 12rem; } } .room-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .room-row__thumb:hover img { transform: scale(1.05); } .room-row__info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .room-row__name { display: inline-block; font-family: var(--font-serif); font-size: 1.25rem; color: var(--dark); margin-bottom: .5rem; text-align: left; transition: color .3s ease; } .room-row__name:hover { color: var(--accent); } .room-row__desc { color: var(--muted); font-size: .875rem; margin-bottom: 1rem; max-width: 28rem; } .room-row__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .875rem; color: var(--muted); } .room-row__meta span { display: flex; align-items: center; gap: .375rem; } .room-row__side { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .75rem; flex-shrink: 0; } @media (min-width: 768px) { .room-row__side { align-items: flex-end; } } .room-row__price { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .room-row__cta { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--dark); color: var(--dark); padding: .625rem 1.5rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .3s ease, color .3s ease; } .room-row__cta:hover { background: var(--dark); color: #fff; } .room-row__cta .icon { width: .75rem; height: .75rem; } /* ---------- Detail izby ---------- */ .room-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; padding: 2rem 0; margin-bottom: 2.5rem; } @media (min-width: 640px) { .room-stats { grid-template-columns: repeat(4, 1fr); } } .room-stats p:first-child { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; } .room-stats p:last-child { font-weight: 500; color: var(--dark); } .room-contact { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; } @media (min-width: 640px) { .room-contact { flex-direction: row; } } .room-contact__phone { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .875rem; transition: color .3s ease; } .room-contact__phone:hover { color: var(--dark); } /* Galéria izby */ .gallery__main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 1rem; background: var(--dark); } .gallery__main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .7s ease, opacity .4s ease; } .gallery__main:hover img { transform: scale(1.015); } .gallery__zoom { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(0,0,0,.55); padding: .5rem 1rem; font-size: .75rem; font-weight: 500; letter-spacing: .025em; color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .3s ease; } .gallery__zoom:hover { background: rgba(0,0,0,.75); } .gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; transition: background .3s ease, transform .3s ease; } @media (min-width: 640px) { .gallery__nav { width: 3rem; height: 3rem; } } .gallery__nav:hover { background: var(--accent); transform: translateY(-50%) scale(1.05); } .gallery__nav--prev { left: .75rem; } .gallery__nav--next { right: .75rem; } @media (min-width: 640px) { .gallery__nav--prev { left: 1.25rem; } .gallery__nav--next { right: 1.25rem; } } .gallery__nav .icon { width: 1.5rem; height: 1.5rem; } .gallery__thumbs { display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; padding-bottom: .75rem; } .gallery__thumbs button { flex: none; width: 7rem; aspect-ratio: 3 / 2; overflow: hidden; border: 2px solid transparent; padding: 0; transition: border-color .3s ease; } @media (min-width: 640px) { .gallery__thumbs button { width: 9rem; } } .gallery__thumbs button.is-active { border-color: var(--accent); } .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; } .tour-cta { margin-top: 2rem; display: flex; justify-content: center; } .tour-cta a { display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px; background: var(--dark); padding: .875rem 1.75rem; font-size: .875rem; font-weight: 500; letter-spacing: .025em; color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); transition: background .3s ease, transform .3s ease; } .tour-cta a:hover { background: var(--accent); transform: translateY(-2px); } .tour-cta__badge { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); font-size: .75rem; font-weight: 600; } /* Lightbox */ .lightbox { position: fixed; top: 0; left: 0; bottom: 0; width: 100vw; /* vrátane rezervovaného pruhu po posuvníku */ overscroll-behavior: contain; z-index: 100; background: rgba(0,0,0,.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; user-select: none; } .lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 20; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; transition: background .3s ease; } @media (min-width: 640px) { .lightbox__close { top: 1.5rem; right: 1.5rem; } } .lightbox__close:hover { background: rgba(255,255,255,.2); } .lightbox__close .icon { width: 1.5rem; height: 1.5rem; } .lightbox__counter { position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.65); font-size: .875rem; letter-spacing: .1em; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .3s ease, transform .3s ease; } @media (min-width: 640px) { .lightbox__nav { width: 3.5rem; height: 3.5rem; } } .lightbox__nav:hover { background: var(--accent); transform: translateY(-50%) scale(1.05); } .lightbox__nav--prev { left: .75rem; } .lightbox__nav--next { right: .75rem; } @media (min-width: 640px) { .lightbox__nav--prev { left: 2rem; } .lightbox__nav--next { right: 2rem; } } .lightbox__nav .icon { width: 1.75rem; height: 1.75rem; } /* Vybavenie izby */ .facility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width: 640px) { .facility-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } @media (min-width: 1024px) { .facility-grid { grid-template-columns: repeat(4, 1fr); } } .facility { text-align: center; } .facility__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: border-color .3s ease, background .3s ease, color .3s ease; } .facility:hover .facility__icon { border-color: var(--accent); background: var(--cream); color: var(--accent); } .facility p { font-size: .875rem; color: var(--muted); } /* Prednosti a služby */ .feature-boxes { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .feature-boxes { grid-template-columns: 1fr 1fr; } } .feature-box { background: #fff; border: 1px solid #f3f4f6; padding: 1.25rem; } @media (min-width: 640px) { .feature-box { padding: 2rem; } } .feature-box h4 { font-size: 1.5rem; color: var(--dark); text-align: center; margin-bottom: 2rem; } .feature-box__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .feature-box__grid { grid-template-columns: 1fr 1fr; } } .feature-box__item { display: flex; align-items: center; gap: .75rem; } .feature-box__item i { width: .5rem; height: .5rem; background: var(--accent); border-radius: 999px; flex-shrink: 0; } .feature-box__item span { font-size: .875rem; color: var(--muted); } /* ---------- CTA pás ---------- */ .cta-band { text-align: center; } .cta-band h3 { font-size: 1.875rem; margin-bottom: 1rem; } @media (min-width: 640px) { .cta-band h3 { font-size: 2.25rem; } } .cta-band p { color: rgba(255,255,255,.6); margin-bottom: 2rem; max-width: 36rem; margin-left: auto; margin-right: auto; } .cta-band__actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } @media (min-width: 640px) { .cta-band__actions { flex-direction: row; } } .cta-band .icon--top { width: 2.25rem; height: 2.25rem; color: var(--accent-light); margin: 0 auto 1.5rem; } /* ---------- Reštaurácia ---------- */ .split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } } .split--md { gap: 3rem; } @media (min-width: 768px) { .split--md { grid-template-columns: 1fr 1fr; } } .split__title { font-size: 2.25rem; color: var(--dark); margin-bottom: 1.5rem; } .split p.lead { color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; } .split p.lead:last-of-type { margin-bottom: 0; } .split__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .split__photos figure { aspect-ratio: 3 / 4; overflow: hidden; } .split__photos figure:first-child { margin-top: 2.5rem; } .split__photos img { width: 100%; height: 100%; object-fit: cover; } .info-icons { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center; } @media (min-width: 640px) { .info-icons { grid-template-columns: repeat(4, 1fr); } } .info-icons .icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin: 0 auto 1rem; } .info-icons h3 { font-size: 1.25rem; color: var(--dark); margin-bottom: .5rem; } .info-icons p { font-size: .875rem; color: var(--muted); } .menu-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .menu-grid { grid-template-columns: 1fr 1fr; } } .menu-grid h3 { font-size: 1.5rem; color: var(--dark); margin-bottom: 1.75rem; } /* Jedálny lístok je rozdelený na chody; každý chod má vlastný nadpis a pod ním dvojstĺpcovú mriežku, aby sa dlhé „Hlavné jedlá" nerozišli s krátkymi chodmi. */ .menu-kategoria { margin-bottom: 4rem; } .menu-kategoria:last-of-type { margin-bottom: 2.5rem; } .menu-kategoria > h3 { font-family: var(--font-serif); font-size: 1.75rem; color: var(--dark); margin-bottom: 2rem; padding-bottom: .875rem; border-bottom: 1px solid var(--cream-dark); } /* Na širokej obrazovke je lístok dvojstĺpcový a nadpis chodu klenie obidva stĺpce — vycentrovaný sedí nad nimi. Na mobile je stĺpec jeden, tam by centrovanie rozbilo zarovnanie s položkami. */ @media (min-width: 1024px) { .menu-kategoria > h3 { text-align: center; } } .menu-kategoria .menu-grid { gap: 0 3rem; } @media (max-width: 1023px) { .menu-kategoria .menu-grid > div + div .menu-item:first-child { padding-top: 0; } } .menu-item__doplnok { display: flex; justify-content: space-between; gap: 1.5rem; font-size: .875rem; color: var(--muted); margin-top: .5rem; } .menu-item__vaha { font-size: .75rem; letter-spacing: .04em; color: var(--muted); opacity: .7; margin-top: .5rem; } .menu-poznamka { font-size: .8125rem; line-height: 1.7; color: var(--muted); text-align: center; max-width: 34rem; margin: 0 auto; } .menu-item { border-bottom: 1px solid #e5e7eb; padding-bottom: 1.5rem; margin-bottom: 1.75rem; } .menu-item:last-child { margin-bottom: 0; } .menu-item__head { display: flex; justify-content: space-between; gap: 1.5rem; margin-bottom: .5rem; } .menu-item__head h4 { font-size: 1.25rem; color: var(--dark); } .menu-item__price { color: var(--accent); font-weight: 500; white-space: nowrap; } .menu-item__desc { font-size: .875rem; color: var(--muted); line-height: 1.7; } .photo-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 420px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } } .photo-grid figure { aspect-ratio: 4 / 3; overflow: hidden; } .photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .photo-grid img:hover { transform: scale(1.05); } /* Fotky, ktoré sa dajú otvoriť na celú obrazovku (napojené v script.js). */ .is-zoomable { cursor: zoom-in; } /* Prstenec musí ísť DOVNÚTRA (záporný offset) — rodičovské

má overflow: hidden a vonkajší obrys by celý orezalo. Dvojtónový, aby bol čitateľný nad svetlou aj tmavou fotkou. */ .is-zoomable:focus-visible { outline: 3px solid #fff; outline-offset: -4px; /* Nie inset box-shadow — na ho prekryje samotný obrázok. Stmavenie funguje aj na replaced obsahu, takže biely obrys vyskočí aj nad svetlou fotkou. */ filter: brightness(.7); } /* Fotka, na ktorú sa dá dostať tabom, musí byť viditeľná aj keď ju reveal animácia ešte neodkryla. */ .reveal:focus-within { opacity: 1; transform: none; } /* ---------- Sála ---------- */ .tabs { background: #fff; border-bottom: 1px solid #f3f4f6; position: sticky; top: 4rem; z-index: 30; } @media (min-width: 640px) { .tabs { top: 5rem; } } .tabs__inner { max-width: 64rem; margin: 0 auto; display: flex; justify-content: center; } .tabs a { position: relative; padding: 1.25rem 1.5rem; font-size: .875rem; font-weight: 500; letter-spacing: .025em; color: var(--muted); border-bottom: 2px solid transparent; transition: color .3s ease; text-align: center; } @media (min-width: 640px) { .tabs a { padding: 1.25rem 2.5rem; } } .tabs a:hover { color: var(--dark); } .tabs a.is-active { color: var(--dark); border-bottom-color: var(--dark); } .split__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .split__photo img { width: 100%; height: 100%; object-fit: cover; } .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; } .perks div { display: flex; align-items: center; gap: .75rem; } .perks .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); } .perks span { font-size: .875rem; color: var(--dark); } /* Svadobné recenzie */ .wedding-review { display: grid; grid-template-columns: 1fr; gap: 2rem; background: var(--cream); padding: 1.5rem; } @media (min-width: 640px) { .wedding-review { padding: 2.5rem; } } @media (min-width: 1024px) { .wedding-review { grid-template-columns: 5fr 7fr; } } .wedding-review__photos { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: end; } .wedding-review__photos figure { aspect-ratio: 3 / 4; overflow: hidden; } .wedding-review__photos img { width: 100%; height: 100%; object-fit: cover; } .wedding-review__body { display: flex; flex-direction: column; justify-content: center; } .wedding-review__body .review-card__quote { color: rgba(139,115,85,.5); } .wedding-review__names { font-size: 1.875rem; color: var(--dark); margin-bottom: .5rem; } .wedding-review__date { color: var(--accent); font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2rem; } .wedding-review__text { color: var(--dark); line-height: 1.7; } .wedding-review__pager { margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between; } .wedding-review__count { font-size: .875rem; color: var(--muted); } .wedding-review__btns { display: flex; gap: .75rem; } .wedding-review__btns button { width: 3rem; height: 3rem; border: 1px solid var(--dark); color: var(--dark); display: flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease; } .wedding-review__btns button:hover { background: var(--dark); color: #fff; } .wedding-review__btns .icon { width: 1.25rem; height: 1.25rem; } .line-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; } .line-dots button { height: .25rem; width: 1.25rem; background: #d1d5db; transition: all .3s ease; } .line-dots button.is-active { width: 2.5rem; background: var(--accent); } /* Balíčky */ .packages { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .packages { grid-template-columns: repeat(3, 1fr); } } .package { background: #fff; color: var(--dark); border: 1px solid #e5e7eb; padding: 1.25rem; text-align: center; display: flex; flex-direction: column; } @media (min-width: 640px) { .package { padding: 2rem; } } .package--highlight { background: var(--dark); color: #fff; border-color: var(--dark); } .package__tier { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: .5rem; } .package--highlight .package__tier { color: var(--accent-light); } .package__price { font-family: var(--font-serif); font-size: 1.875rem; margin-bottom: 1.5rem; } .package__sep { width: 2rem; height: 1px; margin: 0 auto 1.5rem; background: var(--accent); } .package ul { display: grid; gap: .75rem; margin-bottom: 2rem; text-align: left; flex: 1; align-content: start; } .package li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; } .package li .icon { width: 1rem; height: 1rem; margin-top: .125rem; color: var(--accent); } .package--highlight li .icon { color: var(--accent-light); } .package__cta { display: block; width: 100%; padding: .75rem; font-size: .875rem; font-weight: 500; letter-spacing: .025em; border: 1px solid var(--dark); color: var(--dark); transition: background .3s ease, color .3s ease; } .package__cta:hover { background: var(--dark); color: #fff; } .package--highlight .package__cta { background: var(--accent); border-color: var(--accent); color: #fff; } .package--highlight .package__cta:hover { background: var(--accent-light); border-color: var(--accent-light); } /* ---------- Kontakt ---------- */ .contact-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .contact-layout { grid-template-columns: 5fr 7fr; } } .contact-items { display: grid; gap: 1.75rem; margin-top: 2.5rem; } .contact-item { display: flex; gap: 1rem; } .contact-item__icon { width: 2.75rem; height: 2.75rem; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .contact-item__icon .icon { width: 1.25rem; height: 1.25rem; } .contact-item h3 { font-size: 1.25rem; color: var(--dark); margin-bottom: .25rem; } .contact-item p, .contact-item a { color: var(--muted); transition: color .3s ease; } .contact-item a:hover { color: var(--dark); } .contact-form-box { background: var(--cream); padding: 1.5rem; } @media (min-width: 640px) { .contact-form-box { padding: 2.5rem; } } .contact-form-box h2 { font-size: 1.875rem; color: var(--dark); margin-bottom: .5rem; } .contact-form-box > p { color: var(--muted); margin-bottom: 2rem; } .form { display: grid; gap: 1.25rem; } .form__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 640px) { .form__row--3 { grid-template-columns: 1fr 1fr 1fr; } } .form label { display: block; } .form label span em { font-style: normal; color: var(--accent); } /* Návnada pre roboty — pre človeka neviditeľná, pre čítačky mimo poradia. */ .form__pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__stav { margin: 0; padding: .875rem 1rem; font-size: .875rem; line-height: 1.5; border-left: 3px solid var(--accent); background: var(--cream); color: var(--dark); } .form__stav--chyba { border-left-color: #b3261e; background: #fdeceb; color: #7a1c16; } .form button[disabled] { opacity: .6; cursor: progress; } .form label span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; } .form input, .form select, .form textarea { width: 100%; background: #fff; border: 1px solid transparent; padding: .75rem 1rem; outline: none; transition: border-color .3s ease; border-radius: 0; -webkit-appearance: none; appearance: none; } .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.5rem; } .form textarea { min-height: 9rem; resize: vertical; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); } .quick-links-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch; } @media (min-width: 1024px) { .quick-links-grid { grid-template-columns: 1fr 1fr; } } .quick-links-card { background: var(--dark); color: #fff; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 640px) { .quick-links-card { padding: 3rem; } } .quick-links-card .icon--top { width: 2.25rem; height: 2.25rem; color: var(--accent-light); margin-bottom: 1.5rem; } .quick-links-card h2 { font-size: 1.875rem; margin-bottom: 1rem; } .quick-links-card p { color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 2rem; } .quick-links-card__actions { display: flex; flex-direction: column; gap: .75rem; } @media (min-width: 640px) { .quick-links-card__actions { flex-direction: row; } } .quick-links-card__actions a { padding: .75rem 1.5rem; font-size: .875rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; } .quick-links-card__actions .a-outline { border: 1px solid rgba(255,255,255,.4); color: #fff; transition: background .3s ease; } .quick-links-card__actions .a-outline:hover { background: rgba(255,255,255,.1); } .quick-links-card__actions .a-accent { background: var(--accent); color: #fff; transition: background .3s ease; } .quick-links-card__actions .a-accent:hover { background: var(--accent-light); } .map-card { position: relative; min-height: 300px; overflow: hidden; background: #fff; } @media (min-width: 640px) { .map-card { min-height: 360px; } } .map-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .map-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); } .map-card__label { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; background: rgba(255,255,255,.95); padding: 1.25rem; } .map-card__label p:first-child { font-family: var(--font-serif); font-size: 1.25rem; color: var(--dark); margin-bottom: .25rem; } .map-card__label p:last-child { font-size: .875rem; color: var(--muted); } /* ---------- Pätička ---------- */ .site-footer { background: var(--dark); color: #fff; } .site-footer__inner { padding: 3rem 0 2rem; } @media (min-width: 640px) { .site-footer__inner { padding: 4rem 0 2rem; } } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } } .site-footer__brand-name { margin-bottom: 1.25rem; line-height: 0; } .site-footer__brand-name img { height: 2.5rem; width: auto; filter: brightness(0) invert(1); /* biele nad tmavou pätičkou */ } .site-footer__brand-desc { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.7; margin-bottom: 1.5rem; } .site-footer__social { display: flex; gap: 1rem; } .site-footer__social a { width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .3s ease; } .site-footer__social a:hover { background: rgba(255,255,255,.1); } .site-footer h4 { font-size: 1.125rem; margin-bottom: 1.5rem; } .site-footer__col ul { display: grid; gap: .75rem; } .site-footer__col a, .site-footer__col span { color: rgba(255,255,255,.6); font-size: .875rem; transition: color .3s ease; } .site-footer__col a:hover { color: #fff; } .site-footer__contact { display: grid; gap: 1rem; } .site-footer__contact li { display: flex; align-items: flex-start; gap: .75rem; } .site-footer__contact .icon { color: var(--accent-light); margin-top: .25rem; } .site-footer__contact a, .site-footer__contact span { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.6; } .site-footer__contact a:hover { color: #fff; } .site-footer__bottom { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: 1rem; } @media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } } .site-footer__bottom p { color: rgba(255,255,255,.4); font-size: .75rem; } .site-footer__bottom p a { color: rgba(255,255,255,.55); transition: color .3s ease; } .site-footer__bottom p a:hover { color: #fff; } .site-footer__bottom nav { display: flex; gap: 1.5rem; } .site-footer__bottom nav a { color: rgba(255,255,255,.4); font-size: .75rem; transition: color .3s ease; } .site-footer__bottom nav a:hover { color: rgba(255,255,255,.6); } /* ---------- Animácie len keď ich používateľ nevypol ---------- Deklarované samostatne (nie ako "animation: none" v reduce bloku), aby nezáležalo na poradí pravidiel v súbore — pri rovnakej špecificite by neskoršia deklarácia inak vyhrala. */ @media (prefers-reduced-motion: no-preference) { .hero__content { animation: heroIn 1s ease both; } .hero__scroll { animation: scrollHint 2s ease-in-out infinite; } .review-card, .wedding-review { animation: reviewIn .5s ease both; } } /* ---------- Viditeľný fokus pre klávesnicu ---------- */ .lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .skip-link { /* fixed, nie absolute — inak sa pri fokuse z odscrollovanej stránky objaví hore mimo obrazovky a prehliadač odskočí na začiatok. */ position: fixed; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: .75rem 1.25rem; font-size: .875rem; } .skip-link:focus { left: .5rem; top: .5rem; } main[tabindex="-1"]:focus { outline: none; } /* ---------- Právne stránky ---------- */ .legal { line-height: 1.75; } .legal__meta { font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.5rem; } .legal h2 { font-size: 1.375rem; margin: 2.75rem 0 .875rem; } .legal h2:first-of-type { margin-top: 0; } .legal p { margin-bottom: 1rem; color: var(--muted); } .legal strong { color: var(--dark); font-weight: 600; } .legal ul { margin: 0 0 1rem 1.25rem; color: var(--muted); } .legal li { margin-bottom: .4rem; position: relative; padding-left: .875rem; } .legal li::before { content: ""; position: absolute; left: 0; top: .7em; width: .3125rem; height: 1px; background: var(--accent); } .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--dark); }