/* ========================================================== Penzion Na Kmíně — Web chrome Shared across every page in /web/ Extends ../colors_and_type.css for base tokens. ========================================================== */ /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--nk-cream); color: var(--nk-black); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } ::selection { background: var(--nk-gold); color: #fff; } :focus-visible { outline: 2px solid var(--nk-gold); outline-offset: 3px; border-radius: 2px; } /* ----- Layout primitives ----- */ .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .container--narrow { max-width: 980px; margin: 0 auto; padding: 0 40px; } .container--wide { max-width: 1480px; margin: 0 auto; padding: 0 40px; } /* ----- Typography helpers ----- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; margin: 0; } em.it { font-style: italic; font-weight: 400; } .display { font-family: var(--font-display); font-weight: 400; line-height: 1; } .lede { font-family: var(--font-sans); font-size: 17px; line-height: 1.75; color: var(--nk-grey-2); max-width: 56ch; } /* ===== Section accent system ===== One variable themes a whole page. Default gold; sections override on . */ body { --section-accent: var(--nk-gold); --section-accent-dark: var(--nk-gold-dark); --section-accent-soft: var(--nk-gold-ghost); } body.accent-rose { --section-accent: var(--nk-old-rose); --section-accent-dark: #A9684F; --section-accent-soft: #F3E4DE; } body.accent-sea { --section-accent: var(--nk-sea); --section-accent-dark: #5E7C92; --section-accent-soft: #E5ECF1; } body.accent-olive { --section-accent: var(--nk-olive); --section-accent-dark: #4C4A30; --section-accent-soft: #E9E8DC; } .eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--section-accent); } .eyebrow--quiet { color: var(--nk-grey-2); } .eyebrow--on-dark { color: rgba(255,255,255,.7); } .editorial-num { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: .25em; color: var(--section-accent); display: inline-flex; align-items: center; gap: 14px; } .editorial-num::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; opacity: .6; } /* ----- Buttons ----- */ .btn { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 16px 28px; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 320ms cubic-bezier(.16,1,.3,1); text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--nk-gold); color: #fff; border-color: var(--nk-gold); } .btn--primary:hover { background: var(--nk-gold-dark); border-color: var(--nk-gold-dark); } .btn--ghost { background: transparent; color: var(--nk-black); border-color: var(--nk-black); } .btn--ghost:hover { background: var(--nk-black); color: #fff; } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); } .btn--ghost-light:hover { background: #fff; color: var(--nk-black); border-color: #fff; } .btn--dark { background: var(--nk-black); color: #fff; border-color: var(--nk-black); } .btn--dark:hover { background: var(--nk-grey-dark); border-color: var(--nk-grey-dark); } .btn--sm { padding: 10px 18px; font-size: 10px; } .btn--lg { padding: 18px 32px; font-size: 12px; } .btn--block { width: 100%; } .btn[disabled], .btn.is-disabled { background: var(--nk-gold-pale); color: var(--nk-grey-1); border-color: var(--nk-gold-pale); cursor: not-allowed; } .magnetic { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: currentColor; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; padding-bottom: 6px; text-decoration: none; } .magnetic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left center; transition: transform 480ms cubic-bezier(.16,1,.3,1); } .magnetic:hover::after { transform: scaleX(.4); } .magnetic .arrow { display: inline-block; transition: transform 320ms cubic-bezier(.16,1,.3,1); } .magnetic:hover .arrow { transform: translateX(6px); } /* OBJEVIT → pill button — Refresh signature CTA */ .btn-objevit { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: currentColor; display: inline-flex; align-items: center; gap: 12px; padding: 15px 34px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; transition: all 320ms cubic-bezier(.16,1,.3,1); } .btn-objevit .arrow { display: inline-block; transition: transform 320ms cubic-bezier(.16,1,.3,1); } .btn-objevit:hover { background: currentColor; } .btn-objevit:hover .arrow { transform: translateX(5px); } /* invert label on hover via a span that keeps readable colour */ .btn-objevit:hover .btn-objevit__label { color: var(--nk-cream); } .btn-objevit__label { transition: color 320ms ease; } /* ----- Forms ----- */ .field { margin-bottom: 18px; } .field__label { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--nk-grey-2); margin-bottom: 8px; } .field__input, .field__textarea, .field__select { font-family: var(--font-sans); font-size: 15px; color: var(--nk-black); background: #fff; border: 1px solid var(--nk-gold-pale); border-radius: 3px; padding: 14px 16px; width: 100%; outline: none; transition: border-color 160ms ease; } .field__input:focus, .field__textarea:focus, .field__select:focus { border-color: var(--nk-gold); } .field__textarea { resize: vertical; min-height: 120px; font-family: var(--font-sans); } .field__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23706F6F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .field__help, .field__error { font-size: 12px; margin-top: 6px; font-family: var(--font-sans); } .field__help { color: var(--nk-grey-2); } .field__error { color: var(--error); display: none; } .field.is-error .field__input, .field.is-error .field__select, .field.is-error .field__textarea { border-color: var(--error); background: var(--error-bg); } .field.is-error .field__error { display: block; } /* Checkbox (GDPR opt-in) — must be unchecked by default per CZ/EU law */ .consent { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; cursor: pointer; } .consent__box { width: 22px; height: 22px; border: 1.5px solid var(--nk-gold-pale); border-radius: 3px; background: #fff; position: relative; flex-shrink: 0; margin-top: 2px; transition: all 160ms ease; } .consent input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .consent input[type=checkbox]:checked + .consent__box { background: var(--nk-gold); border-color: var(--nk-gold); } .consent input[type=checkbox]:checked + .consent__box::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent__text { font-family: var(--font-sans); font-size: 12px; line-height: 1.55; color: var(--nk-grey-2); } .consent__text a { color: var(--nk-gold-dark); border-bottom: 1px solid var(--nk-gold-pale); } .consent.is-required .consent__text::after { content: " *"; color: var(--error); } /* ----- Film grain overlay (page-wide warmth) ----- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .065; mix-blend-mode: multiply; } /* ========================================================== NAV ========================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 0; transition: all 480ms cubic-bezier(.16,1,.3,1); } .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; } .nav__menu { display: flex; gap: 32px; align-items: center; } .nav__menu--right { justify-content: flex-end; } .nav__menu a { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #fff; opacity: .85; transition: opacity 240ms ease; position: relative; padding-bottom: 4px; } .nav__menu a:hover { opacity: 1; } .nav__menu a.is-active { opacity: 1; border-bottom: 1px solid currentColor; } .nav__logo { display: inline-flex; align-items: center; justify-content: center; height: 64px; transition: filter 480ms ease, height 480ms cubic-bezier(.16,1,.3,1); filter: brightness(0) invert(1) opacity(.95); } .nav__logo img { height: 100%; width: auto; display: block; } /* Two stacked variants — full lockup at top, just the umbel mark once scrolled */ .nav__logo img.nav__logo-mark { display: none; } .nav.is-scrolled .nav__logo img.nav__logo-full { display: none; } .nav.is-scrolled .nav__logo img.nav__logo-mark { display: block; } .nav__cta { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 10px 20px; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 2px; transition: all 320ms ease; } .nav__cta:hover { background: #fff; color: var(--nk-black); border-color: #fff; } .nav.is-scrolled { background: rgba(246,241,233,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--nk-gold-pale); padding: 12px 0; } .nav.is-scrolled .nav__logo { filter: none; height: 44px; } .nav.is-scrolled .nav__menu a { color: var(--nk-black); } .nav.is-scrolled a.nav__cta { background: var(--nk-black); color: #fff; border-color: var(--nk-black); } .nav.is-scrolled a.nav__cta:hover { background: var(--nk-gold); color: #fff; border-color: var(--nk-gold); } /* On pages with no dark hero (forms, blog), force solid nav from the start */ body.nav-solid .nav { background: rgba(246,241,233,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--nk-gold-pale); padding: 12px 0; } body.nav-solid .nav .nav__logo { filter: none; height: 56px; } body.nav-solid .nav .nav__menu a { color: var(--nk-black); } body.nav-solid .nav .nav__cta { background: var(--nk-black); color: #fff; border-color: var(--nk-black); } body.nav-solid main { padding-top: 100px; } /* ----- Submenu (sub-pages link strip just below the nav) ----- */ .subnav { position: sticky; top: 80px; z-index: 40; background: rgba(246,241,233,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nk-gold-pale); } .subnav__inner { display: flex; gap: 32px; overflow-x: auto; padding: 14px 40px; max-width: 1280px; margin: 0 auto; } .subnav__inner a { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-grey-2); white-space: nowrap; padding-bottom: 2px; } .subnav__inner a.is-active { color: var(--section-accent-dark); border-bottom: 1px solid var(--section-accent); } /* ========================================================== PAGE HERO (for inner pages — less tall than HP) ========================================================== */ .phero { position: relative; min-height: 540px; margin-top: -84px; overflow: hidden; color: #fff; padding: 280px 0 120px; } .phero__photo { position: absolute; inset: 0; filter: brightness(1.05) saturate(.9); } .phero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,26,23,.55) 0%, rgba(28,26,23,.2) 35%, var(--phero-tint, rgba(145,127,89,.45)) 100%); } body.accent-rose .phero__overlay { --phero-tint: rgba(197,139,119,.5); } body.accent-sea .phero__overlay { --phero-tint: rgba(139,166,184,.52); } body.accent-olive .phero__overlay { --phero-tint: rgba(106,104,72,.5); } .phero__inner { position: relative; text-align: center; } .phero__brand { display: none; } .phero__eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .35em; text-transform: uppercase; opacity: .85; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 16px; } .phero__eyebrow::before, .phero__eyebrow::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; } .phero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; max-width: 22ch; margin: 0 auto 28px; color: #fff; } .phero__lede { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; max-width: 56ch; margin: 0 auto 36px; opacity: .92; } .phero__ctas { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* ========================================================== SCENE PRESETS — placeholder photos as warm gradient plates ========================================================== */ .scene { position: absolute; inset: 0; } .scene-dawn { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,220,170,.45) 0%, rgba(255,220,170,0) 70%), radial-gradient(ellipse 80% 100% at 50% 100%, rgba(28,26,23,.85), rgba(28,26,23,0) 70%), linear-gradient(180deg, #2a2520 0%, #5c4a35 35%, #7A6A48 55%, #4a3a28 75%, #1C1A17 100%); } .scene-suite { background: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(255,220,170,.35), transparent 60%), linear-gradient(160deg, #c4a882 0%, #917F59 40%, #5c4a35 80%, #2a2520 100%); } .scene-room { background: radial-gradient(ellipse 60% 60% at 70% 35%, rgba(232,220,200,.4), transparent 55%), linear-gradient(140deg, #B2B2B2 0%, #7B8FA0 50%, #3D3C3A 100%); } .scene-attic { background: radial-gradient(ellipse 60% 60% at 40% 60%, rgba(196,168,130,.4), transparent 55%), linear-gradient(200deg, #4a3a28 0%, #7A6A48 50%, #C4A882 100%); } .scene-house { background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(232,220,200,.5), transparent 60%), linear-gradient(180deg, #c4a882 0%, #917F59 35%, #4A5040 75%, #2a2520 100%); } .scene-bistro { background: radial-gradient(ellipse 60% 40% at 50% 35%, rgba(255,240,210,.4), transparent 70%), linear-gradient(165deg, #d89a82 0%, #C4806A 35%, #8b4f3b 70%, #3d2218 100%); } .scene-garden { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(230,238,200,.5), transparent 60%), linear-gradient(180deg, #b6c094 0%, #6e7d52 45%, #4A5040 80%, #2a2820 100%); } .scene-barn { background: radial-gradient(circle at 75% 30%, rgba(196,168,130,.18), transparent 35%), radial-gradient(circle at 22% 60%, rgba(196,128,106,.15), transparent 45%), radial-gradient(ellipse 100% 50% at 50% 100%, rgba(122,106,72,.4), transparent 70%), #1C1A17; } .scene-conference { background: radial-gradient(ellipse 60% 50% at 60% 40%, rgba(240,228,205,.45), transparent 60%), linear-gradient(160deg, #d3c5a5 0%, #917F59 50%, #4a3a28 100%); } .scene-pool { background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(220,235,240,.45), transparent 60%), linear-gradient(170deg, #a8c0c8 0%, #7B8FA0 50%, #3a4654 100%); } .scene-winter { background: radial-gradient(ellipse 50% 40% at 50% 35%, rgba(240,238,232,.5), transparent 65%), linear-gradient(180deg, #cdd2da 0%, #7B8FA0 50%, #3d3c3a 100%); } .scene-summer { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255,240,200,.45), transparent 65%), linear-gradient(180deg, #d9d2b0 0%, #b8a875 45%, #6e7d52 90%); } .scene-detail { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,235,210,.4), transparent 60%), linear-gradient(135deg, #E8DCC8 0%, #C4A882 60%, #7A6A48 100%); } .scene-night { background: radial-gradient(circle at 70% 30%, rgba(196,168,130,.35), transparent 35%), linear-gradient(180deg, #2a2520 0%, #3d3527 50%, #1C1A17 100%); } .scene-team { background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(245,235,215,.4), transparent 60%), linear-gradient(155deg, #d3c5a5 0%, #917F59 60%, #3D3C3A 100%); } .scene-history { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245,232,205,.4), transparent 60%), linear-gradient(180deg, #c4a882 0%, #7A6A48 50%, #4a3a28 100%); } /* Subtle photo ornament — slipped in under all scene-* */ .photo-ornament { position: absolute; inset: 0; opacity: .55; mix-blend-mode: multiply; background-image: radial-gradient(ellipse 80% 30% at 50% 100%, rgba(28,26,23,.4), transparent 70%); } /* ========================================================== SECTIONS ========================================================== */ section { position: relative; } .section { padding: 130px 0; background: var(--nk-cream); } .section--soft { background: var(--nk-gold-ghost); } .section--dark { background: var(--nk-black); color: #fff; } .section--dark .lede { color: rgba(255,255,255,.78); } .section--dark .eyebrow { color: var(--nk-gold-light); } /* Refresh section colours — Svatby=Old Rose · Penzion=Sea · Bistro=Olive */ .section--svatby, .section--rose { background: var(--nk-old-rose); color: #fff; } .section--penzion, .section--sea { background: var(--nk-sea); color: #fff; } .section--bistro, .section--olive { background: var(--nk-olive); color: #fff; } .section--svatby .eyebrow, .section--rose .eyebrow, .section--penzion .eyebrow, .section--sea .eyebrow, .section--bistro .eyebrow, .section--olive .eyebrow { color: rgba(255,255,255,.8); } .section--svatby .lede, .section--rose .lede, .section--penzion .lede, .section--sea .lede, .section--bistro .lede, .section--olive .lede { color: rgba(255,255,255,.85); } /* legacy alias */ .section--terracotta { background: var(--nk-old-rose); color: #fff; } .section--terracotta .eyebrow { color: rgba(255,255,255,.8); } .section__head { margin-bottom: 64px; } /* Pattern is OPT-IN only — applied deliberately via .has-pattern, never blanket. The caraway rastr is an accent, not a default background. */ .section, .stats-strip { position: relative; } .has-pattern { position: relative; overflow: hidden; } .has-pattern::before { content: ""; position: absolute; inset: 0; background-image: url('/wp-content/uploads/nk/caraway-seamless.png'); background-repeat: repeat; background-size: 165px auto; opacity: .09; pointer-events: none; } .section--dark.has-pattern::before { filter: brightness(0) invert(1); opacity: .1; } .section--terracotta.has-pattern::before, .section--svatby.has-pattern::before, .section--penzion.has-pattern::before, .section--bistro.has-pattern::before, .section--sea.has-pattern::before, .section--olive.has-pattern::before, .section--rose.has-pattern::before { filter: brightness(0) invert(1); opacity: .18; } .has-pattern > * { position: relative; z-index: 1; } /* Fleuron / brand symbol divider */ .brand-divider { text-align: center; padding: 24px 0; } .brand-divider img { display: inline-block; height: 56px; width: auto; opacity: .9; } .brand-divider--small img { height: 36px; } .brand-divider--light img { filter: brightness(0) invert(1) opacity(.85); } /* ========================================================== STATS strip ========================================================== */ .stats-strip { background: var(--nk-cream); border-top: 1px solid var(--nk-gold-pale); border-bottom: 1px solid var(--nk-gold-pale); padding: 56px 0; } .stats-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .stat__value { font-family: var(--font-serif); font-size: 44px; line-height: 1; letter-spacing: -.01em; } .stat__label { font-family: var(--font-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-grey-2); margin-top: 10px; } .stat__sub { font-family: var(--font-sans); font-size: 13px; color: var(--nk-grey-2); margin-top: 4px; line-height: 1.5; } .stats-strip__item + .stats-strip__item { border-left: 1px solid var(--nk-gold-pale); padding-left: 32px; } /* ========================================================== CARDS — generic vertical with photo top ========================================================== */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .cards-grid--2 { grid-template-columns: repeat(2, 1fr); } .cards-grid--4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--nk-gold-pale); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 320ms ease, transform 320ms ease; } .card:hover { border-color: var(--nk-gold); } .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .card__media .scene { transition: transform 6000ms cubic-bezier(.16,1,.3,1); } .card:hover .card__media .scene { transform: scale(1.04); } .card__badge { position: absolute; top: 14px; left: 14px; background: var(--nk-gold); color: #fff; font-family: var(--font-sans); font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; } .card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; } .card__eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-grey-2); margin-bottom: 10px; } .card__title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; margin: 0 0 12px; } .card__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--nk-grey-2); margin: 0 0 20px; flex: 1; } .card__foot { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--nk-gold-pale); padding-top: 16px; gap: 12px; } .card__meta { font-family: var(--font-sans); font-size: 12px; color: var(--nk-grey-2); } .card__price { font-family: var(--font-serif); font-size: 22px; line-height: 1; } .card__price small { font-family: var(--font-sans); font-size: 11px; color: var(--nk-grey-2); margin-left: 4px; } /* ========================================================== FAQ — accordion ========================================================== */ .faq { border-top: 1px solid var(--nk-gold-pale); } .faq__item { border-bottom: 1px solid var(--nk-gold-pale); } .faq__q { display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: 0; cursor: pointer; padding: 28px 0; text-align: left; gap: 32px; color: var(--nk-black); } .faq__q-text { font-family: var(--font-serif); font-size: 22px; line-height: 1.3; } .faq__q-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--nk-gold-pale); transition: all 320ms ease; flex-shrink: 0; color: var(--nk-gold-dark); position: relative; font-size: 0; padding: 0; } /* Geometric crosshair — two 1.5px bars centered at 50/50 */ .faq__q-toggle::before, .faq__q-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); transition: opacity 240ms ease; } .faq__q-toggle::before { width: 1.5px; height: 12px; } .faq__q-toggle::after { width: 12px; height: 1.5px; } .faq__item.is-open .faq__q-toggle::before { opacity: 0; } .faq__item.is-open .faq__q-toggle { background: var(--section-accent); border-color: var(--section-accent); color: #fff; transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height 480ms ease; } .faq__a-inner { padding: 0 0 28px; max-width: 70ch; font-family: var(--font-sans); font-size: 15px; line-height: 1.75; color: var(--nk-grey-dark); } .faq__item.is-open .faq__a { max-height: 400px; } /* ========================================================== PRICE TABLE ========================================================== */ .price-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); } .price-table th, .price-table td { text-align: left; padding: 22px 16px; border-bottom: 1px solid var(--nk-gold-pale); } .price-table thead th { font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--nk-grey-2); border-bottom: 1.5px solid var(--nk-gold); } .price-table td { font-family: var(--font-serif); font-size: 19px; color: var(--nk-black); } .price-table td:first-child { font-weight: 500; } .price-table td:last-child { text-align: right; font-size: 22px; } .price-table small { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--nk-grey-2); margin-top: 4px; } /* ========================================================== QUOTE / pullquote ========================================================== */ .pullquote { text-align: center; padding: 140px 0; } .pullquote__mark { display: block; height: 76px; width: auto; margin: 0 auto 32px; opacity: .85; } .pullquote__text { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.35; max-width: 26ch; margin: 0 auto 32px; color: var(--nk-black); } .pullquote__attr { font-family: var(--font-sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--nk-grey-2); display: inline-flex; align-items: center; gap: 14px; } .pullquote__attr::before, .pullquote__attr::after { content: ""; width: 24px; height: 1px; background: currentColor; } .pullquote__source { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--nk-grey-2); margin-top: 16px; } /* ========================================================== REVIEW CARD ========================================================== */ .review { background: #fff; border: 1px solid var(--nk-gold-pale); border-radius: 4px; padding: 32px; display: flex; flex-direction: column; gap: 20px; height: 100%; } .review--soft { background: var(--nk-gold-ghost); } .review__stars { color: var(--nk-gold); font-size: 14px; letter-spacing: .2em; line-height: 1; } .review__text { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.5; margin: 0; flex: 1; } .review__author { display: flex; align-items: center; gap: 14px; } .review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--nk-gold); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; } .review__name { font-family: var(--font-sans); font-weight: 500; font-size: 14px; } .review__source { font-family: var(--font-sans); font-size: 11px; color: var(--nk-grey-2); letter-spacing: .04em; margin-top: 2px; } /* ========================================================== CTA banner (gold solid) ========================================================== */ .cta-banner { background-color: var(--nk-gold); color: #fff; padding: 100px 0; text-align: center; position: relative; overflow: hidden; } /* Opt-in tapestry — used only on signature CTAs, never on every page */ .cta-banner--tapeta { background-image: url('/wp-content/uploads/nk/caraway-tile-gold.png'); background-repeat: repeat; background-size: 165px auto; } .cta-banner::before { content: none; } .cta-banner > * { position: relative; z-index: 1; } .cta-banner__title { font-family: var(--font-serif); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; margin: 0 auto 24px; max-width: 22ch; } .cta-banner__lede { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; max-width: 52ch; margin: 0 auto 36px; opacity: .94; } .cta-banner__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ========================================================== FOOTER ========================================================== */ .footer { background: var(--nk-black); color: #fff; padding: 120px 0 36px; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 80px; } .footer__logo { display: block; height: 110px; margin-bottom: 24px; filter: brightness(0) invert(1) opacity(.95); } .footer__logo img { height: 100%; width: auto; } .footer__tag { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--nk-gold-light); max-width: 32ch; line-height: 1.5; margin: 0 0 20px; } .footer__col h4 { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--nk-gold); margin: 0 0 20px; } .footer__col a, .footer__col p { display: block; font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,.85); margin: 0 0 10px; line-height: 1.65; } .footer__col a:hover { color: var(--nk-gold-light); } .footer__newsletter input[type=email] { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); padding: 12px 0; color: #fff; font-family: var(--font-sans); font-size: 14px; margin-bottom: 16px; } .footer__newsletter input[type=email]:focus { outline: none; border-bottom-color: var(--nk-gold); } .footer__newsletter input[type=email]::placeholder { color: rgba(255,255,255,.4); } .footer__newsletter .consent { padding: 8px 0; } .footer__newsletter .consent__box { background: transparent; border-color: rgba(255,255,255,.4); } .footer__newsletter .consent__text { color: rgba(255,255,255,.65); } .footer__newsletter .consent__text a { color: var(--nk-gold-light); border-bottom-color: var(--nk-gold-light); } .footer__newsletter .btn { margin-top: 12px; background: transparent; border-color: rgba(255,255,255,.5); } .footer__newsletter .btn:hover { background: #fff; color: var(--nk-black); border-color: #fff; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.5); gap: 32px; flex-wrap: wrap; } .footer__bottom-legal a { color: rgba(255,255,255,.5); margin-right: 20px; } .footer__bottom-legal a:hover { color: var(--nk-gold-light); } .footer__brand-symbol { height: 36px; width: auto; opacity: .8; filter: brightness(0) invert(1); } /* ========================================================== COOKIE CONSENT BAR (CZ/EU) ========================================================== */ .cookies { position: fixed; left: 24px; right: 24px; bottom: 24px; max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--nk-gold-pale); border-radius: 4px; box-shadow: 0 20px 60px rgba(28,26,23,.18); padding: 28px 32px; z-index: 90; display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: center; transform: translateY(140%); transition: transform 480ms cubic-bezier(.16,1,.3,1); } .cookies.is-open { transform: translateY(0); } .cookies__body { font-family: var(--font-sans); font-size: 13px; line-height: 1.65; color: var(--nk-grey-dark); } .cookies__body strong { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--nk-black); margin-bottom: 6px; } .cookies__actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .cookies__settings { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-grey-2); border: 0; background: transparent; text-decoration: underline; cursor: pointer; } /* ========================================================== NEWSLETTER MODAL POP-UP ========================================================== */ .modal { position: fixed; inset: 0; background: rgba(28,26,23,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 95; opacity: 0; pointer-events: none; transition: opacity 320ms ease; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal.is-open { opacity: 1; pointer-events: auto; } .modal__panel { background: var(--nk-cream); border-radius: 4px; width: 100%; max-width: 860px; position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: 0 30px 80px rgba(28,26,23,.4); transform: translateY(24px); transition: transform 480ms cubic-bezier(.16,1,.3,1); } .modal.is-open .modal__panel { transform: translateY(0); } .modal__visual { position: relative; min-height: 480px; overflow: hidden; } .modal__visual .scene { filter: brightness(1.05) saturate(.9); } .modal__brand { position: absolute; top: 32px; left: 32px; height: 56px; filter: brightness(0) invert(1) opacity(.9); } .modal__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .modal__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); border: 0; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 240ms ease; } .modal__close:hover { background: rgba(255,255,255,.3); } .modal__title { font-family: var(--font-serif); font-size: 36px; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; } .modal__lede { font-family: var(--font-sans); font-size: 14px; line-height: 1.65; color: var(--nk-grey-2); margin: 0 0 28px; } .modal__success { text-align: center; display: none; } .modal__success-mark { height: 64px; margin: 0 auto 18px; opacity: .9; } .modal.is-success .modal__form { display: none; } .modal.is-success .modal__success { display: block; } /* ========================================================== GALLERY GRID ========================================================== */ .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } .gallery-grid .g-item { position: relative; overflow: hidden; border-radius: 2px; } .gallery-grid .g-item .scene { transition: transform 6000ms cubic-bezier(.16,1,.3,1); } .gallery-grid .g-item:hover .scene { transform: scale(1.06); } .g-span-4 { grid-column: span 4; aspect-ratio: 4/5; } .g-span-6 { grid-column: span 6; aspect-ratio: 16/9; } .g-span-8 { grid-column: span 8; aspect-ratio: 4/3; } .g-span-12 { grid-column: span 12; aspect-ratio: 21/9; } .g-span-3 { grid-column: span 3; aspect-ratio: 1/1; } .g-tall { aspect-ratio: 3/4; } /* ========================================================== TIMELINE ========================================================== */ .timeline { position: relative; padding-left: 32px; } .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; background: var(--nk-gold-pale); } .timeline__item { position: relative; padding: 0 0 56px 32px; } .timeline__item::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--nk-gold); border: 3px solid var(--nk-cream); box-shadow: 0 0 0 1px var(--nk-gold); } .timeline__time { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--nk-gold); margin-bottom: 8px; } .timeline__title { font-family: var(--font-serif); font-size: 26px; margin: 0 0 8px; } .timeline__body { font-family: var(--font-sans); font-size: 15px; line-height: 1.7; color: var(--nk-grey-dark); max-width: 56ch; margin: 0; } /* ========================================================== Reveal animation ========================================================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1000ms cubic-bezier(.16,1,.3,1), transform 1000ms cubic-bezier(.16,1,.3,1); } .reveal.is-in { opacity: 1; transform: none; } /* ========================================================== Responsive ========================================================== */ @media (max-width: 1024px) { .nav__inner { grid-template-columns: auto 1fr auto; } .nav__menu { display: none; } .footer__grid { grid-template-columns: 1fr 1fr; } .modal__panel { grid-template-columns: 1fr; } .modal__visual { display: none; } .cards-grid { grid-template-columns: repeat(2, 1fr); } .stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stats-strip__item + .stats-strip__item { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .container, .container--narrow, .container--wide { padding: 0 24px; } .cards-grid, .cards-grid--2, .cards-grid--4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .section { padding: 80px 0; } .stats-strip__grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(6, 1fr); } .g-span-4, .g-span-6, .g-span-8, .g-span-12 { grid-column: span 6; } .g-span-3 { grid-column: span 3; } .cookies { grid-template-columns: 1fr; } } /* ============================================================ NK FIXES (maintained in build.py, appended after design web.css) ============================================================ */ /* grain SVG had inset:0 but no size -> rendered as a 300x150 black box top-left */ .grain { width: 100vw; height: 100vh; } /* nav CTA inherited padding-bottom:4px from .nav__menu a -> vertically off-centre */ .nav__menu a.nav__cta { padding: 9px 20px; } /* ============================================================ NAV — Ú4 (větší, čitelné názvy hned po načtení) + Ú3 (hover podmenu) + Ú6 (přeskupení řeší NAV_ITEMS v chrome.js). Desktop (>1024) only; mobil má vlastní burger/drawer (níže v MOBILE blocku). ============================================================ */ @media (min-width: 1025px) { /* Ú4: zvětšit položky menu, zachovat eleganci (uppercase + tracking). 11px -> 13px, mírně menší tracking ať se 4 položky vlevo vejdou. */ .nav__menu { gap: 26px; } .nav__menu a { font-size: 13px; letter-spacing: .18em; opacity: .92; } .nav__menu a.is-active { opacity: 1; } /* Logo přesně na střed (grid 1fr auto 1fr) + obě skupiny odkazů se přimknou k logu → stejně daleko z obou stran. Rezervovat vyjmuto z toku ven na pravý okraj jako „na víc", aby tlačítko nerozhazovalo vyvážení. */ .nav__inner { position: relative; column-gap: 76px; } /* víc vzduchu mezi logem a odkazy */ .nav__menu { justify-content: flex-end; } /* levá skupina k logu */ .nav__menu--right { justify-content: flex-start; } /* pravá skupina k logu */ .nav__logo { justify-self: center; } .nav__menu--right .nav__cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } /* aby poslední pravý odkaz nenarazil do plovoucího CTA, necháme mu rezervu */ .nav__menu--right { padding-right: 132px; } /* položka s podmenu se chová jako řádkový prvek flexu, ne odkaz */ .nav__item { position: relative; display: inline-flex; align-items: center; } .nav__item > .nav__top { display: inline-flex; align-items: center; } .nav__caret { width: 5px; height: 5px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .2s ease, opacity .2s ease; } .nav__item:hover .nav__caret { opacity: 1; transform: translateY(0) rotate(45deg); } /* dropdown panel — kopíruje on-page subnav dané sekce */ .nav__dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 230px; padding-top: 16px; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 200; } .nav__dd-inner { background: var(--nk-cream, #f6f1e8); border: 1px solid rgba(28,26,23,.08); border-radius: 5px; box-shadow: 0 20px 55px rgba(28,26,23,.20); padding: 10px; display: flex; flex-direction: column; } .nav__item:hover .nav__dd, .nav__item:focus-within .nav__dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* sublink: vždy tmavý na krémovém panelu — i když je hlavní nav přes hero bílý */ .nav__dd .nav__sublink, .nav:not(.is-scrolled) .nav__dd .nav__sublink { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nk-black, #1c1a17); padding: 10px 14px; border-radius: 3px; opacity: .8; white-space: nowrap; text-shadow: none; } .nav__dd .nav__sublink:hover, .nav:not(.is-scrolled) .nav__dd .nav__sublink:hover { background: rgba(28,26,23,.05); opacity: 1; color: var(--nk-gold, #b08d57); } .nav__dd .nav__sublink.is-active { border-bottom: 0; } } /* Ú5 — sociální sítě (FB / IG) v patičce */ .footer__social { display: flex; gap: 12px; margin-top: 18px; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); transition: all .25s ease; } .footer__social a:hover { color: var(--nk-black, #1c1a17); background: #fff; border-color: #fff; } /* Barva dlaždice „Firemní akce" = MODRÁ (var --nk-sea). Swap dle požadavku: firmy modré, pokoje/penzion oranžové — aby oranžová nebyla vedle růžové svateb. (Penzion na oranžovou se přepisuje v HP_INJECT — inline style HP.) */ .sigblock__panel--firmy { background: var(--nk-sea); } .sigblock__panel--firmy .sigblock__eyebrow, .sigblock__panel--firmy .sigblock__title, .sigblock__panel--firmy .sigblock__body, .sigblock__panel--firmy .btn-objevit { color: #fff; } .sigblock__panel--firmy .sigblock__title .it { color: #fff; } /* "Objevit" hover: bg turned white (currentColor) + label cream -> text invisible. !important kvůli tmavým sekcím, kde má tlačítko inline color:#fff na i labelu (klidový stav na tmavém pozadí) — bez !important by na hoveru zůstalo bílé na bílém. */ .btn-objevit:hover { background: #fff !important; color: var(--nk-black) !important; } .btn-objevit:hover .btn-objevit__label, .btn-objevit:hover .arrow { color: var(--nk-black) !important; } /* ============================================================ SIGNATURE HOVERS — homepage only (body[data-page="domu"]) #1 hairline gold frame + slow zoom + content lift (room tiles) #2 darken + brand fleuron reveal (gallery tiles) ============================================================ */ /* #1 — hairline gold frame draws in (room tiles) */ body[data-page="domu"] .rooms-feat__big, body[data-page="domu"] .rooms-feat__item { position: relative; box-shadow: inset 0 0 0 0 rgba(145,127,89,0); transition: box-shadow 480ms cubic-bezier(.16,1,.3,1); } body[data-page="domu"] .rooms-feat__big:hover, body[data-page="domu"] .rooms-feat__item:hover { box-shadow: inset 0 0 0 1px var(--nk-gold); } /* slow image zoom on room covers (gallery already zooms in web.css) */ body[data-page="domu"] .rooms-feat__big .scene, body[data-page="domu"] .rooms-feat__item .scene { transition: transform 6000ms cubic-bezier(.16,1,.3,1); } body[data-page="domu"] .rooms-feat__big:hover .scene, body[data-page="domu"] .rooms-feat__item:hover .scene { transform: scale(1.05); } /* content gently rises on the dark side tiles */ body[data-page="domu"] .rooms-feat__item-body { transition: transform 480ms cubic-bezier(.16,1,.3,1); } body[data-page="domu"] .rooms-feat__item:hover .rooms-feat__item-body { transform: translateY(-6px); } /* #2 REMOVED per request — gallery tiles have NO hover effect (no fleuron, no zoom) */ body[data-page="domu"] .gallery-grid .g-item:hover .scene { transform: none; } /* gallery row 1: match the small tile's height to the big tile (no gap under 2nd photo). 8:4 column split -> small tile needs ~0.656 aspect to equal the 4/3 big tile's height. */ @media (min-width: 641px) { body[data-page="domu"] .gallery-grid .g-span-4 { aspect-ratio: 0.656; } } /* centred "go to detail" link injected at the END of sections (rooms, gallery) */ .nk-more { text-align: center; margin-top: 48px; } /* Hero legibility WITHOUT darkening the photo (client wants photos bright). Photo stays fully light; only the text carries a soft multi-layer shadow. */ .hero__title, .phero__title { text-shadow: 0 1px 4px rgba(28,26,23,.5); } .hero__loc, .hero__tag, .phero__eyebrow, .phero__lede { color: #fff; text-shadow: 0 1px 3px rgba(28,26,23,.55); } .nav:not(.is-scrolled) .nav__menu a, .nav:not(.is-scrolled) .nav__cta { text-shadow: 0 1px 3px rgba(28,26,23,.5); } /* svatby hero (.phero): the base design darkened the photo with a heavy gradient (top rgba(28,26,23,.55) + a 45% gold tint) — contradicts the "photos stay bright" rule above. Drop it to a whisper-soft top/bottom edge so the photo reads near-original; the text-shadows already carry legibility. */ .phero__overlay { background: linear-gradient(180deg, rgba(28,26,23,.24) 0%, rgba(28,26,23,.05) 24%, rgba(28,26,23,0) 50%, rgba(28,26,23,.16) 100%); } /* svatby hero legibility — worked on the TEXT, not the photo. A hairline dark stroke sits BEHIND the fill (paint-order) so each letter keeps its shape and reads on a busy/bright background; tight shadows hug the glyphs. The photo's brightness is untouched — only the ~1px edge around the characters darkens. */ .phero__title { paint-order: stroke fill; -webkit-text-stroke: .6px rgba(28,26,23,.32); text-shadow: 0 1px 2px rgba(28,26,23,.6), 0 0 4px rgba(28,26,23,.4); } .phero__eyebrow, .phero__lede { text-shadow: 0 1px 1px rgba(28,26,23,.75), 0 1px 5px rgba(28,26,23,.5); } .phero__lede { font-weight: 500; } /* CTA banner: caraway pattern consistent across the WHOLE web (not just HP) */ .cta-banner { background-image: url('/wp-content/uploads/nk/caraway-tile-gold.png'); background-repeat: repeat; background-size: 165px auto; } /* Text-over-photo legibility (photos stay untouched — only the TEXT gets a shadow). Room side tiles + any on-image captions: white text was greying out on bright photos. */ .rooms-feat__item-body, .rooms-feat__item-body h3, .rooms-feat__item-body .meta { text-shadow: 0 1px 2px rgba(28,26,23,.6), 0 1px 16px rgba(28,26,23,.55); } .rooms-feat__item-body .meta { opacity: 1; } .eyebrow--on-dark { text-shadow: 0 1px 2px rgba(28,26,23,.55); } /* Sub-nav (Ceník/Prostory/…) stuck under the scrolled main nav (~68px) — kill the gap */ .subnav { top: 66px; } /* Prostory section ("Místo, kde dáte své lásce nový slib") — white text over photos + shadow */ #prostory article h3, #prostory article p { color: #fff; text-shadow: 0 1px 4px rgba(28,26,23,.6); } #prostory article .eyebrow { text-shadow: 0 1px 3px rgba(28,26,23,.55); } /* ============================================================ PROGRAM — sticky scrollytelling (#program, built by nk-scroll.js) Desktop: 2 columns (scrolling steps L + pinned crossfading photo R). Mobile (<=860px): falls back to the plain stacked timeline list. ============================================================ */ /* enhanced state is added by JS only — graceful degradation if JS fails */ @media (min-width: 861px) { .timeline.nk-scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-left: 0; align-items: stretch; /* both columns share the timeline's full height */ } /* hide the original single spine; each step carries its own */ .timeline.nk-scrolly::before { display: none; } .nk-scrolly__steps { position: relative; padding-left: 32px; grid-column: 1; /* steps = LEFT column */ /* tail so the LAST step can still scroll to viewport centre while the sticky photo is pinned (without it the photo releases ~1 step early). */ padding-bottom: clamp(190px, 26vh, 320px); } .nk-scrolly__steps::before { content: ""; position: absolute; top: 8px; bottom: calc(8px + clamp(190px, 26vh, 320px)); left: 8px; width: 1px; background: var(--nk-gold-pale); } /* steps live inside the left column; dim until active */ .timeline.nk-scrolly .timeline__item { padding: 0 0 64px 32px; opacity: .38; transition: opacity 400ms cubic-bezier(.16,1,.3,1); } .timeline.nk-scrolly .timeline__item:last-child { padding-bottom: 0; } .timeline.nk-scrolly .timeline__item::before { box-shadow: 0 0 0 1px var(--nk-gold-pale); background: var(--nk-cream); border: 3px solid var(--nk-cream); transition: background 400ms cubic-bezier(.16,1,.3,1), box-shadow 400ms cubic-bezier(.16,1,.3,1), transform 400ms cubic-bezier(.16,1,.3,1); } .timeline.nk-scrolly .timeline__item.is-active { opacity: 1; } .timeline.nk-scrolly .timeline__item.is-active::before { background: var(--nk-gold); box-shadow: 0 0 0 1px var(--nk-gold), 0 0 0 6px var(--nk-gold-ghost); transform: scale(1.08); } .timeline.nk-scrolly .timeline__item.is-active .timeline__time { color: var(--nk-gold-dark); } /* RIGHT column: a sticky wrapper that pins the photo and keeps it vertically CENTRED on its place. The wrapper spans the full height of the timeline grid row; `position: sticky` + `align-self: start` makes it lock in once the timeline top passes under the fixed nav (~90px) and release naturally at the last step (when the column's bottom scrolls past). The photo panel inside is centred with margin:auto so it never sits top-left. */ /* The media column STRETCHES to the full height of the steps column, and a shorter sticky panel travels inside it. (Previously the panel itself was the sticky element and ~viewport-tall, so it unstuck ~step 6 "Slavnostní hostina" while the last steps were still scrolling — photo vanished.) */ .nk-scrolly__media { grid-column: 2; /* photo = RIGHT column */ align-self: stretch; /* fill the steps' full height → panel can pin across every step */ display: flex; align-items: flex-start; /* don't stretch the panel vertically */ justify-content: center; /* horizontal centre in the widened box */ /* #program lives in a .container--narrow (max-width 980, centred), so the photo's right edge would lock to the narrow edge and drift far from the screen as the viewport widens (big dead band on the right, photo hugging the text). Break the box out toward the viewport's right edge (~40px gutter) so the photo centres in the open right-hand field. min(0px,…) keeps it from going positive below ~1040px. */ margin-right: min(0px, calc(490px - 50vw)); } .nk-scrolly__panel { --nk-ph: min(72vh, 600px); position: sticky; /* vertically centre the photo in the band between the fixed nav (90px) and the viewport bottom */ top: calc((100vh + 90px - var(--nk-ph)) / 2); width: min(100%, 600px); height: var(--nk-ph); border-radius: 4px; overflow: hidden; background: var(--nk-gold-ghost); } .nk-scrolly__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 400ms cubic-bezier(.16,1,.3,1); will-change: opacity; } .nk-scrolly__img.is-shown { opacity: 1; } } /* on mobile the media panel is never created; nothing to hide */ /* ============================================================ SVATBY · #cenik — quiet-luxury price list (replaces 6 coloured cards) Unified gold/cream, serif prices, gold hairlines, lots of whitespace. ============================================================ */ .nk-cenik { background: #fff; border: 1px solid var(--nk-gold-pale); border-radius: 4px; overflow: hidden; } .nk-cenik__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 32px 40px; border-top: 1px solid var(--nk-gold-pale); } .nk-cenik__row:first-child { border-top: 0; } .nk-cenik__eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nk-gold-dark); margin-bottom: 10px; } .nk-cenik__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.1; letter-spacing: -.01em; color: var(--nk-black); margin: 0 0 8px; } .nk-cenik__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--nk-grey-2); margin: 0; max-width: 46ch; } /* numeric price — right aligned, serif */ .nk-cenik__price { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; text-decoration: none; } .nk-cenik__from { font-family: var(--font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-grey-2); } .nk-cenik__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 36px); line-height: 1; color: var(--nk-black); } .nk-cenik__cur { font-family: var(--font-sans); font-size: 13px; letter-spacing: .14em; color: var(--nk-grey-2); } /* "Cena na vyžádání" tiers — subtle gold CTA */ .nk-cenik__price--quote { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 24px); color: var(--nk-gold-dark); align-items: center; gap: 12px; transition: color 320ms cubic-bezier(.16,1,.3,1); } .nk-cenik__quote { font-style: italic; } .nk-cenik__arrow { font-family: var(--font-sans); font-size: 18px; display: inline-block; transition: transform 320ms cubic-bezier(.16,1,.3,1); } .nk-cenik__price--quote:hover { color: var(--nk-gold); } .nk-cenik__price--quote:hover .nk-cenik__arrow { transform: translateX(5px); } @media (max-width: 640px) { .nk-cenik__row { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; } .nk-cenik__price, .nk-cenik__price--quote { justify-content: flex-start; } } /* "V ceně je / Nad rámec" — one soft, intentional panel. The old #fff boxes punched too hard over the gold-ghost section ("velké bílé pole"); the bare hairline version blended in and read as accidental. This is a warm off-white lift with a hairline border, serif headings, a centre divider, and ✓ / + markers so the two lists read as deliberate. */ .nk-incl { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; background: #FBF9F4; border: 1px solid var(--nk-gold-pale); border-radius: 8px; overflow: hidden; } .nk-incl__col { padding: 34px 38px; } .nk-incl__col + .nk-incl__col { border-left: 1px solid var(--nk-gold-pale); } .nk-incl__label { font-family: var(--font-serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; color: var(--nk-gold-dark); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--nk-gold-pale); } .nk-incl__list { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--nk-grey-dark); list-style: none; padding: 0; margin: 0; } .nk-incl__list li { position: relative; padding: 9px 0 9px 28px; } .nk-incl__list li::before { position: absolute; left: 2px; top: 9px; font-size: 13px; color: var(--nk-gold); } .nk-incl__col:first-child .nk-incl__list li::before { content: "✓"; } .nk-incl__col:last-child .nk-incl__list li::before { content: "+"; color: var(--nk-gold-light); } @media (max-width: 640px) { .nk-incl { grid-template-columns: 1fr; margin-top: 32px; } .nk-incl__col { padding: 26px 24px; } .nk-incl__col + .nk-incl__col { border-left: 0; border-top: 1px solid var(--nk-gold-pale); } } /* ============================================================ SVATBY · #reference — hover reveals a face photo over the monogram. Each .review__avatar keeps its serif monogram letter; on hover a round face photo crossfades in over it (soft ~300ms ease) with a gold ring. The photo URL comes from --rev-face (set per card via build / ACF token). Where no photo is set, --rev-face is empty and only the monogram shows. GDPR: placeholder couple photos until real consented photos are slotted. ============================================================ */ .review__avatar { position: relative; overflow: hidden; box-shadow: 0 0 0 0 rgba(145,127,89,0); transition: box-shadow 300ms cubic-bezier(.16,1,.3,1); } /* face layer — only painted when --rev-face is set (var fallback = none) */ .review__avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: var(--rev-face, none); background-size: cover; background-position: center 28%; opacity: 0; transition: opacity 300ms ease; pointer-events: none; } .review:hover .review__avatar { box-shadow: 0 0 0 2px var(--nk-gold); } /* Whole-card hover photo: on hover the review card softly becomes a quiet photo (a cream veil keeps the text readable); on mouse-out only the review text shows. --rev-face is set per card on the .review article by inject_svatby_reviews(). The small avatar face-swap is dropped — the card now carries the photo, so the monogram just gets its gold ring. */ .review { position: relative; overflow: hidden; } .review > * { position: relative; z-index: 1; } .review::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(248,244,236,.74), rgba(248,244,236,.74)), var(--rev-face, none); background-size: cover; background-position: center; opacity: 0; transition: opacity 520ms cubic-bezier(.16,1,.3,1); pointer-events: none; } .review:hover::after { opacity: 1; } /* drop the round monogram circle — looked cheap; the card now carries the photo and the name/date stand on their own. */ .review__avatar { display: none; } /* ============================================================ MOBILE FIXES — the design chrome had no mobile menu and several layouts never collapsed below desktop, overflowing the viewport ("rozpad"). 1) hamburger + slide-down drawer 2) every multi-column grid → 1 column 3) CTAs never wider than the screen. ============================================================ */ /* burger + drawer are desktop-hidden; shown only on the mobile breakpoint */ .nav__burger { display: none; } .nav__drawer { display: none; } @media (max-width: 1024px) { /* the desktop menus are display:none here — lay the bar out as burger | logo */ .nav__inner { display: flex; align-items: center; justify-content: center; position: relative; } .nav__logo { margin: 0 auto; } .nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 10px 8px; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(28,26,23,.45)); } .nav__burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform 260ms cubic-bezier(.16,1,.3,1), opacity 200ms ease; } .nav.is-scrolled .nav__burger { filter: none; } .nav.is-scrolled .nav__burger span, body.nav--open .nav__burger span { background: var(--nk-black); } /* burger → X when open */ .nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav--open .nav__burger span:nth-child(2) { opacity: 0; } .nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__drawer { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--nk-cream); border-top: 1px solid var(--nk-gold-pale); box-shadow: 0 24px 48px rgba(28,26,23,.20); padding: 8px 24px 26px; max-height: calc(100vh - 100%); overflow-y: auto; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 240ms ease, transform 260ms cubic-bezier(.16,1,.3,1); } .nav--open .nav__drawer { opacity: 1; transform: none; pointer-events: auto; } .nav__drawer-menu { display: flex; flex-direction: column; } .nav__drawer-menu a { font-family: var(--font-sans); font-size: 16px; letter-spacing: .01em; color: var(--nk-black); text-decoration: none; opacity: 1; padding: 15px 4px; border-bottom: 1px solid var(--nk-gold-pale); } .nav__drawer-menu a.is-active { color: var(--nk-gold-dark); } .nav__cta--drawer { display: block; text-align: center; margin-top: 18px; background: var(--nk-black); color: #fff; border: 0; border-radius: 2px; padding: 15px 20px; text-decoration: none; font-family: var(--font-sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } body.nav-locked { overflow: hidden; } } /* collapse multi-column layouts so nothing runs off the screen */ @media (max-width: 860px) { /* every INLINE grid (room cards, contact/booking/firmy sections) → 1 column */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* …but the date-picker MUST stay a 7-column week grid (the blanket rule above otherwise stacks its 42 cells into a ~10 000px tower — that was the empty space on /rezervace/). */ #cal { grid-template-columns: repeat(7, 1fr) !important; } /* image-card grids (e.g. svatby #prostory): inside a 2-col grid, aspect-ratio cards with absolute-only content collapse to 0×0 / get cut off in Chromium. Stack them as a flex column so each card gets full width + correct height. */ [style*="grid-template-columns"]:has(> article[style*="aspect-ratio"]) { display: flex !important; flex-direction: column; gap: 24px; } /* subnav scrolls horizontally but looked like 3 fixed tabs — add a right-edge fade + chevron so it reads as swipeable, and hide the scrollbar cleanly. */ .subnav__inner { scrollbar-width: none; } .subnav__inner::-webkit-scrollbar { display: none; } .subnav::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(246,241,233,0), rgba(246,241,233,.96) 62%); } .subnav::after { content: "\203A"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; color: var(--nk-gold-dark); font-size: 20px; line-height: 1; } /* class-based grids on the homepage */ .booking__card { grid-template-columns: 1fr !important; gap: 16px !important; } .rooms-feat__grid { grid-template-columns: 1fr !important; } /* buttons never exceed the viewport width */ .btn, .btn--lg { max-width: 100%; box-sizing: border-box; } } @media (max-width: 600px) { .btn--lg { display: block; width: 100%; text-align: center; } } /* ============================================================ MOBILE UX PASS — best-practice polish (touch devices only; desktop >1024 is never touched). Fixes found in device audit: iOS input auto-zoom, sub-44px tap targets, 108px nav, small-screen (≤360) overflow, tap delay. ============================================================ */ /* iOS auto-zooms when a focused field is <16px. Bump the REAL form fields to 16px on all touch widths (≤1024 covers phones + iPads); the hero booking widget is intentionally left at its large display size. */ @media (max-width: 1024px) { [data-inquiry-form] input, [data-inquiry-form] select, [data-inquiry-form] textarea, [data-newsletter-form] input:not([type="checkbox"]) { font-size: 16px !important; } } @media (max-width: 640px) { /* faster taps + no accidental double-tap zoom on controls */ a, button, input, select, textarea, label, [role="button"] { touch-action: manipulation; } /* reclaim vertical space: 108px nav → ~72px on phones */ .nav { padding: 14px 0; } .nav__logo { height: 44px; } /* short stat numbers read better as a 2×2 grid than a tall single column */ .stats-strip__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } /* tap targets ≥44px: footer links, sub-nav strip, small filter buttons */ .footer__col a { display: block; padding: 11px 0; } .subnav__inner a { padding-top: 13px; padding-bottom: 13px; } .btn--sm { min-height: 44px; display: inline-flex; align-items: center; } /* ≤360 overflow: oversized fixed paddings + class-based grids defined in the page