— for this reason. PRÉMIOVÝ DETAIL SLUŽBY: • Desktop: cca 66vw, max-width 1200px, dvousloupcový (obrázek vlevo, text vpravo) • Tablet: cca 88vw, dvousloupcový (≥720px) nebo vertikální (<720px) • Mobil: full-screen, obrázek nahoře, text dole Levý sloupec drží fotografii služby na celou výšku panelu (object-fit: cover). Pravý sloupec je samostatně skrolovatelný a obsahuje původní texty (eyebrow, nadpis, lead, odrážky a CTA). */ .ldc-lux-svc-drawer { position: fixed; top: 0; right: 0; /* Use both viewport units AND dynamic viewport units. 100dvh accounts for mobile browser UI chrome; the static `bottom: 0` is a fallback when dvh is unsupported. */ bottom: 0; height: 100dvh; max-height: 100dvh; width: min(1200px, 66vw); max-width: 100vw; background: var(--ldc-bg); color: var(--ldc-text); padding: 0; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: 1fr; transform: translate3d(100%, 0, 0); /* Closed state is fully inert (no pointer, hidden from AT). The visibility transition is delayed so the slide-out animation finishes visibly before the panel goes invisible. */ visibility: hidden; pointer-events: none; transition: transform 0.62s cubic-bezier(.86,0,.07,1), visibility 0s linear 0.62s; z-index: var(--z-svc-drawer, 10000); overflow: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: -32px 0 80px rgba(46, 12, 19, .28); box-sizing: border-box; } .ldc-lux-svc-drawer.is-open { transform: translate3d(0, 0, 0); visibility: visible; pointer-events: auto; transition: transform 0.62s cubic-bezier(.86,0,.07,1), visibility 0s linear 0s; } /* MEDIA — fotografie služby vlevo, na celou výšku panelu, cover. */ .ldc-lux-svc-drawer__media { position: relative; background-color: var(--ldc-bordeaux-100, #f3e6ea); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100%; height: 100%; overflow: hidden; /* Jemný gradient pro lepší kontrast s případným close tlačítkem nad obrázkem */ } .ldc-lux-svc-drawer__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,12,19,.18) 0%, rgba(46,12,19,0) 30%, rgba(46,12,19,0) 70%, rgba(46,12,19,.22) 100%); pointer-events: none; } .ldc-lux-svc-drawer__close { position: absolute; top: 24px; right: clamp(20px, 3vw, 36px); width: 44px; height: 44px; border: 1px solid rgba(46, 12, 19, .15); background: rgba(255, 255, 255, .92); border-radius: 0; color: var(--ldc-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: background 0.32s ease, border-color 0.32s ease, color 0.32s ease, transform 0.32s ease; padding: 0; z-index: 3; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ldc-lux-svc-drawer__close:hover { background: var(--ldc-bordeaux-900); border-color: var(--ldc-bordeaux-900); color: var(--ldc-bordeaux-50); } /* INNER — pravý sloupec s textem; samostatně skrolovatelný. */ .ldc-lux-svc-drawer__inner { display: flex; flex-direction: column; gap: 0; padding: clamp(72px, 8vh, 110px) clamp(36px, 4vw, 72px) clamp(48px, 6vh, 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; height: 100%; box-sizing: border-box; } .ldc-lux-svc-drawer__title { font-family: var(--ldc-font-display); font-weight: 400; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.014em; color: var(--ldc-text); margin: 8px 0 24px; } .ldc-lux-svc-drawer__lead { font-family: var(--ldc-font); font-weight: 300; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.75; color: var(--ldc-body); margin: 0 0 36px; max-width: 52ch; } .ldc-lux-svc-drawer__list { list-style: none; margin: 0 0 44px; padding: 0; display: flex; flex-direction: column; gap: 0; } .ldc-lux-svc-drawer__list li { padding: 18px 0; font-size: 15px; line-height: 1.55; color: var(--ldc-body); border-bottom: 1px solid var(--ldc-bordeaux-100); position: relative; } .ldc-lux-svc-drawer__list li:first-child { border-top: 1px solid var(--ldc-bordeaux-100); } .ldc-lux-svc-drawer__list li::before { content: none; } .ldc-lux-svc-drawer__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: auto; } /* TABLET — užší šířka, ale stále dvousloupcový layout, dokud se vejde. */ @media (max-width: 1100px) { .ldc-lux-svc-drawer { width: min(1100px, 88vw); grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } } /* MENŠÍ TABLET / VELKÝ MOBIL — přechod na vertikální layout pod 720px, protože dvousloupcový by znamenal příliš úzký text i obrázek. */ @media (max-width: 720px) { .ldc-lux-svc-drawer { width: 100vw; max-width: 100vw; grid-template-columns: 1fr; grid-template-rows: clamp(220px, 38vh, 320px) 1fr; } .ldc-lux-svc-drawer__media { min-height: 100%; } .ldc-lux-svc-drawer__media::after { background: linear-gradient(180deg, rgba(46,12,19,.18) 0%, rgba(46,12,19,0) 40%, rgba(46,12,19,0) 70%, rgba(46,12,19,.32) 100%); } .ldc-lux-svc-drawer__inner { padding: clamp(28px, 5vh, 48px) clamp(20px, 6vw, 36px) clamp(32px, 5vh, 48px); } .ldc-lux-svc-drawer__title { font-size: clamp(28px, 6vw, 36px); margin-top: 0; } } /* PREFERS-REDUCED-MOTION — bez slide-in animace, pouze fade. */ @media (prefers-reduced-motion: reduce) { .ldc-lux-svc-drawer { transform: none; opacity: 0; transition: opacity 0.2s linear, visibility 0s linear 0.2s; } .ldc-lux-svc-drawer.is-open { transform: none; opacity: 1; transition: opacity 0.2s linear, visibility 0s linear 0s; } .ldc-lux-svc-drawer__backdrop { transition: opacity 0.2s linear; } } /* Drawer backdrop — covers entire viewport just below the drawer. Sibling of .ldc-lux-svc-drawer in the DOM (also outside

). */ .ldc-lux-svc-drawer__backdrop { position: fixed; inset: 0; background: rgba(46, 12, 19, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(.16,1,.3,1); z-index: var(--z-svc-backdrop, 9990); } .ldc-lux-svc-drawer__backdrop.is-visible { opacity: 1; pointer-events: auto; } /* BODY LOCK — when the service drawer is open the page must not scroll behind it. The drawer keeps its own scroll via overflow-y:auto above. Two body classes are accepted so existing JS keeps working and the new spec-aligned name is also supported. */ body.ldc-lux-drawer-open, body.ldc-service-drawer-open { overflow: hidden; /* Prevent layout shift from the scrollbar disappearing on desktop. */ scrollbar-gutter: stable; } /* Also lock because `html { overflow-x: clip }` (set globally for the horizontal-overflow safeguard) prevents body's overflow:hidden from propagating to the viewport in modern browsers. Without this the page would still scroll behind the drawer on the homepage. */ html.ldc-svc-drawer-open { overflow: hidden; scrollbar-gutter: stable; } /* ──────────────────────────────────────────────────────────────────────── PACKAGES — three equal luxury concierge tiers • Same background, border, spacing, typography and CTA for every card. • Concierge gets a tiny editorial cue (italic name) — never "Recommended". ──────────────────────────────────────────────────────────────────────── */ .ldc-lux-packages { color: var(--ldc-bordeaux-50); } .ldc-lux-packages__head { display: grid; grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.3fr); gap: clamp(48px, 7vw, 120px); align-items: end; margin-bottom: clamp(56px, 6vw, 84px); } .ldc-lux-packages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(248, 238, 240, .14); background: transparent; } /* All 3 packages share identical box treatment — no visual highlight on any card. Same background, border, shadow, padding, height, hover and CTA style. Wider horizontal padding takes advantage of the wider container. */ .ldc-lux-pkg { display: flex; flex-direction: column; padding: clamp(44px, 4.6vw, 72px) clamp(36px, 4vw, 64px); border-right: 1px solid rgba(248, 238, 240, .14); background: transparent; box-shadow: none; transition: background 0.42s ease; position: relative; min-height: 100%; } .ldc-lux-pkg:last-child { border-right: none; } .ldc-lux-pkg:hover { background: rgba(248, 238, 240, .025); } /* Explicitly neutralize any legacy "featured" highlighting that might still come from older CSS, attributes or scripts. */ .ldc-lux-pkg--feature, .ldc-lux-pkg--featured, .ldc-lux-pkg--recommended, .ldc-lux-pkg.is-featured, .ldc-lux-pkg.is-recommended, .ldc-lux-pkg[data-featured] { background: transparent !important; border: none !important; border-right: 1px solid rgba(248, 238, 240, .14) !important; box-shadow: none !important; transform: none !important; outline: none !important; } .ldc-lux-pkg--feature::before, .ldc-lux-pkg--featured::before, .ldc-lux-pkg--recommended::before, .ldc-lux-pkg.is-featured::before, .ldc-lux-pkg.is-recommended::before, .ldc-lux-pkg[data-featured]::before { display: none !important; content: none !important; } .ldc-lux-pkg__name { font-family: var(--ldc-font); font-size: 11px; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ldc-bordeaux-200); margin-bottom: 28px; min-height: 22px; } .ldc-lux-pkg__price { font-family: var(--ldc-font-display); font-weight: 300; font-size: clamp(38px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; color: var(--ldc-bordeaux-50); margin-bottom: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; min-height: 64px; } .ldc-lux-pkg__price-strike { font-family: var(--ldc-font); font-size: 14px; font-weight: 400; letter-spacing: 0.06em; color: rgba(248, 238, 240, .45); text-decoration: line-through; } .ldc-lux-pkg__price-note { font-family: var(--ldc-font); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(248, 238, 240, .58); margin-bottom: 36px; min-height: 18px; } .ldc-lux-pkg__list { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 0; flex-grow: 1; } .ldc-lux-pkg__list li { padding: 18px 0; font-size: 14px; line-height: 1.55; color: rgba(248, 238, 240, .82); border-bottom: 1px solid rgba(248, 238, 240, .10); position: relative; } .ldc-lux-pkg__list li:last-child { border-bottom: none; } .ldc-lux-pkg__list li::before { content: none; } .ldc-lux-pkg__cta { margin-top: auto; align-self: flex-start; } @media (max-width: 900px) { .ldc-lux-packages__head { grid-template-columns: 1fr; align-items: start; } .ldc-lux-packages__grid { grid-template-columns: 1fr; } .ldc-lux-pkg { border-right: none; border-bottom: 1px solid rgba(248, 238, 240, .14); } .ldc-lux-pkg:last-child { border-bottom: none; } } /* ──────────────────────────────────────────────────────────────────────── FOOTER CTA — cinematic closing on deep bordeaux ──────────────────────────────────────────────────────────────────────── */ .ldc-lux-cta { position: relative; background: var(--ldc-bordeaux-900); color: var(--ldc-bordeaux-50); padding-block: clamp(120px, 12vh, 180px); overflow: hidden; min-height: 88vh; display: flex; align-items: center; justify-content: center; } /* Photography gets more presence — louder than before so the section feels anchored in image rather than in buttons. */ .ldc-lux-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.32; filter: grayscale(10%) contrast(1.04); } .ldc-lux-cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 12, 19, .55) 0%, rgba(46, 12, 19, .25) 35%, rgba(46, 12, 19, .70) 100%); } /* Centered copy with readable max-width, but horizontal gutter matches every other homepage section for a consistent edge alignment. */ .ldc-lux-cta__inner { position: relative; z-index: 2; text-align: center; max-width: 1040px; margin: 0 auto; padding-inline: var(--ldc-gutter); box-sizing: border-box; width: 100%; } /* Larger, more cinematic headline — generous line-height for calm balance */ .ldc-lux-cta__title { font-family: var(--ldc-font-display); font-weight: 300; font-size: clamp(48px, 7vw, 104px); line-height: 1.10; letter-spacing: -0.022em; color: var(--ldc-bordeaux-50); margin: 40px 0 44px; text-wrap: balance; } .ldc-lux-cta__lead { font-family: var(--ldc-font); font-weight: 300; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.72; color: rgba(248, 238, 240, .80); max-width: 56ch; margin: 0 auto clamp(56px, 6vw, 84px); } /* CTA buttons recede — smaller, quieter, perfectly centered baseline */ .ldc-lux-cta__actions { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 2.4vw, 36px); } /* Make the primary CTA visually softer in this section */ .ldc-lux-cta .ldc-lux-btn, .ldc-lux-cta .ldc-lux-btn--primary, .ldc-lux-cta .ldc-lux-btn--ghost-light { height: 48px; padding: 0 28px; font-size: 10.5px; letter-spacing: 0.30em; } .ldc-lux-cta .ldc-lux-btn--primary { background: transparent; border: 1px solid rgba(248, 238, 240, .55); color: var(--ldc-bordeaux-50); } .ldc-lux-cta .ldc-lux-btn--primary:hover { background: rgba(248, 238, 240, .08); border-color: var(--ldc-bordeaux-50); } /* ──────────────────────────────────────────────────────────────────────── FOOTER (patka) — deep bordeaux finish ──────────────────────────────────────────────────────────────────────── */ .ldc-clean-footer { background: var(--ldc-bordeaux-900); color: rgba(248, 238, 240, .72); padding: clamp(80px, 8vw, 120px) 0 36px; border-top: 1px solid rgba(248, 238, 240, .10); } .ldc-clean-footer .ldc-clean-container { width: 100%; max-width: var(--ldc-container); margin: 0 auto; padding-inline: var(--ldc-gutter); box-sizing: border-box; } .ldc-clean-footer__grid { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, 1fr); gap: clamp(36px, 4vw, 64px); padding-bottom: clamp(48px, 5vw, 72px); border-bottom: 1px solid rgba(248, 238, 240, .12); } .ldc-clean-footer__brand img, .ldc-clean-footer__logo { height: 44px; width: auto; filter: brightness(0) invert(1); margin-bottom: 24px; } .ldc-clean-footer__brand-name { font-family: var(--ldc-font-display); font-size: 22px; font-weight: 500; color: var(--ldc-bordeaux-50); margin-bottom: 18px; } .ldc-clean-footer__tagline { font-size: 14px; line-height: 1.78; color: rgba(248, 238, 240, .65); max-width: 32ch; } .ldc-clean-footer__col-title { display: block; font-family: var(--ldc-font); font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ldc-bordeaux-200); margin-bottom: 24px; } .ldc-clean-footer__links { display: flex; flex-direction: column; gap: 12px; } .ldc-clean-footer__links a { color: rgba(248, 238, 240, .80); font-size: 14px; text-decoration: none; transition: color 0.24s ease, padding-left 0.32s cubic-bezier(.16,1,.3,1); } .ldc-clean-footer__links a:hover { color: var(--ldc-bordeaux-100); padding-left: 6px; } .ldc-clean-footer__bottom { padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: 0.08em; color: rgba(248, 238, 240, .50); } /* "Člen skupiny Luxent" + group logos. Layout: text on the left, two SVG logos on the right. On narrow screens the logos wrap below the text. */ .ldc-clean-footer__group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 18px; } .ldc-clean-footer__group-text { white-space: nowrap; } .ldc-clean-footer__group-logos { display: inline-flex; align-items: center; gap: 20px; } .ldc-clean-footer__group-logo { display: inline-flex; align-items: center; line-height: 0; opacity: .82; transition: opacity .25s ease; } .ldc-clean-footer__group-logo:hover, .ldc-clean-footer__group-logo:focus-visible { opacity: 1; } .ldc-clean-footer__group-logo img { display: block; height: 50px; width: auto; max-width: 200px; } @media (max-width: 768px) { .ldc-clean-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ldc-clean-footer__grid { grid-template-columns: 1fr; } /* Stack logos under the text on narrow screens. */ .ldc-clean-footer__group { flex-direction: column; align-items: flex-start; gap: 12px; } .ldc-clean-footer__group-logos { gap: 16px; } .ldc-clean-footer__group-logo img { height: 44px; } } /* ──────────────────────────────────────────────────────────────────────── HIDE LEGACY SECTIONS WE DON'T USE ANYMORE ON HOMEPAGE (steps / process, references, lifestyle, mobile CTA strip) ──────────────────────────────────────────────────────────────────────── */ .ldc-clean-news-section, section.ldc-clean-section--warm.ldc-clean-news-section, .ldc-clean-mobile-cta { display: none !important; } /* The new body template doesn't render the old refs/steps sections, but if any legacy bit slips through, hide it safely. */ #reference, .ldc-clean-refs, .ldc-clean-steps, .ldc-clean-section .ldc-clean-steps { display: none !important; } /* ──────────────────────────────────────────────────────────────────────── RESPONSIVE TWEAKS ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --ldc-header-h: 72px; } } @media (max-width: 768px) { .ldc-clean-header__logo { height: 36px; } .ldc-lux-header-cta { display: none; } .ldc-lux-lang { display: none; } } /* ──────────────────────────────────────────────────────────────────────── SCROLL-SNAP — owned by JS (direction-aware proximity snap, Phase 5). CSS scroll-snap is intentionally OFF because: • CSS snap is hard to tune for "snap only after scroll settles" • CSS snap can override JS smooth scrolls mid-animation • CSS snap has no concept of "tall sections" — it would yank the user out of long readable sections The JS module in ldc_frontend_home.tpl handles the smooth handoff (custom rAF easeOutQuint) and honours `prefers-reduced-motion` and viewport breakpoints. Native `scroll-behavior: smooth` (set globally in ldc-luxent-clean.css) is forced to `auto` on the homepage so the JS rAF runner has full control of the timing curve. Anchor links are intercepted and routed through the same cinematic easing in JS. */ body.ldc-home { scroll-snap-type: none; } /* JS adds .ldc-motion-js on so this selector wins over the global `html { scroll-behavior: smooth }` from ldc-luxent-clean.css. The custom rAF runner needs `auto` to avoid the browser double-animating the scroll target. */ html.ldc-motion-js { scroll-behavior: auto; } /* ──────────────────────────────────────────────────────────────────────── SCROLL-TO-TOP — editorial thin-line control (luxury UI) Two-variant adaptive control. JS toggles `.is-on-dark` / `.is-on-light` based on the active section's data-bg attribute, so the button stays legible on both bordeaux-900 surfaces and the cream team section. Visual language: • single outline circle (~44 px), text label to the left • everything in `currentColor` so the variants only swap one value • base opacity .78, hover/focus → 1 • subtle lift on hover (-2 px), ring border brightens ──────────────────────────────────────────────────────────────────────── */ .ldc-lux-top { position: fixed; right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 40px); /* Sits above header + nav-drawer but BELOW the service detail drawer so the drawer always wins focus when both are present. */ z-index: var(--z-scroll-top, 9500); display: inline-flex; align-items: center; gap: 14px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; font-family: var(--ldc-font); line-height: 1; /* `currentColor` is the contract — both ring border, arrow stroke and label inherit it, so .is-on-dark / .is-on-light flips only one value. */ color: var(--ldc-bordeaux-50); opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden; transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1), color 0.55s cubic-bezier(.22,1,.36,1), visibility 0s linear 0.7s; } .ldc-lux-top.is-visible { opacity: 0.78; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1), color 0.55s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; } /* Outline circle — perfectly centered icon via flex (no absolute positioning, no margin-auto hacks → cannot drift off-axis). */ .ldc-lux-top__ring { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; transition: border-color 0.45s cubic-bezier(.16,1,.3,1), background 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s cubic-bezier(.16,1,.3,1); } /* Arrow sits INSIDE the ring as a flex item — no manual centering needed. */ .ldc-lux-top__arrow { display: block; width: 14px; height: 14px; color: currentColor; transition: transform 0.45s cubic-bezier(.16,1,.3,1); } /* Uppercase tracked label — letter-spacing per spec (.18em) */ .ldc-lux-top__label { display: inline-block; font-family: var(--ldc-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: currentColor; white-space: nowrap; line-height: 1; /* Optical alignment — label baseline meets the ring centre cleanly */ transform: translateY(0.5px); } /* ── Variant: ON DARK BACKGROUND ───────────────────────────────── Cream text + ring on a translucent bordeaux glass plate. */ .ldc-lux-top.is-on-dark { color: #F8EEF0; } .ldc-lux-top.is-on-dark .ldc-lux-top__ring { border-color: rgba(248, 238, 240, 0.72); background: rgba(46, 12, 19, 0.34); backdrop-filter: blur(8px) saturate(125%); -webkit-backdrop-filter: blur(8px) saturate(125%); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } /* ── Variant: ON LIGHT BACKGROUND ──────────────────────────────── Deep bordeaux text + ring on a soft cream glass plate. */ .ldc-lux-top.is-on-light { color: #561A27; } .ldc-lux-top.is-on-light .ldc-lux-top__ring { border-color: rgba(86, 26, 39, 0.72); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 10px 26px rgba(46, 12, 19, 0.10); } /* ── Hover / focus — opacity to full, subtle lift, stronger ring ── */ .ldc-lux-top.is-visible:hover, .ldc-lux-top.is-visible:focus-visible { opacity: 1; transform: translateY(-2px); } .ldc-lux-top.is-on-dark:hover .ldc-lux-top__ring, .ldc-lux-top.is-on-dark:focus-visible .ldc-lux-top__ring { background: rgba(46, 12, 19, 0.54); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30); } .ldc-lux-top.is-on-light:hover .ldc-lux-top__ring, .ldc-lux-top.is-on-light:focus-visible .ldc-lux-top__ring { background: rgba(255, 255, 255, 0.78); box-shadow: 0 16px 36px rgba(46, 12, 19, 0.14); } .ldc-lux-top:hover .ldc-lux-top__arrow, .ldc-lux-top:focus-visible .ldc-lux-top__arrow { transform: translateY(-2px); } /* Accessible focus ring — keyboard users only */ .ldc-lux-top:focus-visible { outline: none; } .ldc-lux-top:focus-visible .ldc-lux-top__ring { outline: 1px solid currentColor; outline-offset: 4px; } /* Active press */ .ldc-lux-top:active { transform: translateY(-1px); transition-duration: 0.18s; } /* Hide on inner pages — homepage scope only */ body:not(.ldc-home) .ldc-lux-top { display: none !important; } /* Tablet — slightly larger touch target, label still visible */ @media (max-width: 1024px) { .ldc-lux-top__ring { width: 46px; height: 46px; } .ldc-lux-top__arrow { width: 15px; height: 15px; } } /* Mobile — hide label, give thumbs more room */ @media (max-width: 768px) { .ldc-lux-top { right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); gap: 0; } .ldc-lux-top__label { display: none; } .ldc-lux-top__ring { width: 48px; height: 48px; } .ldc-lux-top__arrow { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .ldc-lux-top, .ldc-lux-top__ring, .ldc-lux-top__arrow, .ldc-lux-top__label { transition: none !important; } .ldc-lux-top, .ldc-lux-top:hover, .ldc-lux-top:focus-visible { transform: none !important; } } /* ════════════════════════════════════════════════════════════════════════ MOTION FOUNDATION — PHASE 4 (GATED CINEMATIC) Reveal animations are gated on full section visibility. Stack: • Section state machine drives EVERYTHING: .is-visible = any part of section is in viewport .is-active = section top is at viewport top (within ±24px) OR section fills the viewport. Reveal animations trigger. .is-animated = .is-active fired at least once (one-shot gate) .is-past = active section is below this one .is-next = active section is above this one • Smart 75 % proximity snap (JS) settles the page on the dominant section after a brief scroll pause. Mandatory snap is intentionally avoided so the user can keep scrolling freely. • One rAF loop writes --section-progress (0..1) per section. Backgrounds drift via ±35px translate and 1.06 → 1.00 scale; content drifts ~±14px in the opposite direction. Real foreground/background separation. • Video intro: logo + claim fade + lift via CSS vars on the .__content wrapper. No transition gate — opacity is purely scroll-driven once the initial animation completes. • Easing standardised: cubic-bezier(.22, 1, .36, 1). • Reduced-motion + mobile: clean fallbacks (snap off, parallax off). ════════════════════════════════════════════════════════════════════════ */ :root { --ldc-ease-lux: cubic-bezier(.22, 1, .36, 1); } /* ────────────────────────────────────────────────────────── 1) CONTENT REVEAL — gated on section .is-active [data-reveal] gets .is-in only after its containing section receives .is-active for the first time. JS handles class flipping. Stagger: each element can carry `style="--reveal-i: N"`, and the CSS uses it as a transition-delay multiplier so sequenced reveals cascade without per-selector overrides. Step size 140 ms keeps consecutive items distinct without dragging the whole sequence. ────────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translate3d(0, 36px, 0); /* Slow, cinematic reveal — must be clearly noticeable. JS adds a ~350 ms section-level pause before `.is-animated` is set, so the user has time to see the section before motion begins. */ transition: opacity 2.0s var(--ldc-ease-lux), transform 2.2s var(--ldc-ease-lux); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); /* 240 ms stagger between siblings — large enough to read each item as a separate beat, still tight enough that the full sequence finishes inside ~3.5 s for typical 4–5 item blocks. */ transition-delay: calc(var(--reveal-i, 0) * 240ms), calc(var(--reveal-i, 0) * 240ms); } [data-reveal].is-in.is-settled { will-change: auto; } /* Soft variant: opacity-only (used on media wrappers & tiles whose children carry their own hover transforms). */ [data-reveal="soft"] { transform: none; transition: opacity 2.1s var(--ldc-ease-lux); } [data-reveal="soft"].is-in { transform: none; } [data-reveal="soft"].is-in { transition-delay: calc(var(--reveal-i, 0) * 240ms); } /* Smaller / quieter rise variant for body copy and meta */ [data-reveal="rise-sm"] { transform: translate3d(0, 24px, 0); } /* Fade-only — no translate (used on CTA blocks where buttons shouldn't drift) */ [data-reveal="fade"] { transform: none; transition: opacity 2.0s var(--ldc-ease-lux); } [data-reveal="fade"].is-in { transform: none; } /* Preserve native hover transitions on cards that also carry [data-reveal]. */ .ldc-lux-why-card[data-reveal] { transition: background 0.45s ease, opacity 2.0s var(--ldc-ease-lux), transform 2.2s var(--ldc-ease-lux); } .ldc-lux-pkg[data-reveal] { transition: background 0.45s ease, opacity 2.0s var(--ldc-ease-lux), transform 2.2s var(--ldc-ease-lux); } /* ── Line-by-line headline reveal ──────────────────────── Wrap each visual line in …. Set `style="--line-i: N"` per line for sequential reveal. Driven by the parent's .is-animated state (same one-shot gate as the rest of the motion stack). */ .ldc-lux-line { display: block; opacity: 0; transform: translate3d(0, 32px, 0); /* Headline line reveal — pomalý, čitelný náběh. */ transition: opacity 2.0s var(--ldc-ease-lux), transform 2.2s var(--ldc-ease-lux); will-change: opacity, transform; } .is-animated .ldc-lux-line, .is-animated.ldc-lux-line { opacity: 1; transform: translate3d(0, 0, 0); /* 280 ms stagger between lines — large enough for each line to register as a distinct beat. */ transition-delay: calc(var(--line-i, 0) * 280ms), calc(var(--line-i, 0) * 280ms); } /* ────────────────────────────────────────────────────────── 2) HERO REVEAL — gated on section .is-active Left panel: clip-path wipe from left over 1.6s. Right photo zoom-out is provided by section-progress parallax. Inner content: sequenced (eyebrow → title → sub → CTA → nav). ────────────────────────────────────────────────────────── */ .ldc-clean-hero__panel { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); /* Slower, more luxurious wipe — pairs with the 350 ms pause in triggerReveals() so the panel arrives noticeably after the section has settled. */ transition: clip-path 1.9s var(--ldc-ease-lux), -webkit-clip-path 1.9s var(--ldc-ease-lux); will-change: clip-path; } .ldc-clean-hero.is-animated .ldc-clean-hero__panel { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } .ldc-clean-hero__panel-inner > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.9s var(--ldc-ease-lux), transform 2.1s var(--ldc-ease-lux); } .ldc-clean-hero.is-animated .ldc-clean-hero__panel-inner > * { opacity: 1; transform: translate3d(0, 0, 0); } /* Hero sequence — starts AFTER panel wipe has visibly opened (~400 ms in), then 300 ms between each beat for a calm cadence. Total run from .is-animated → nav reveal: ~1.6 s + 2.1 s transition ≈ 3.7 s, plus the 350 ms section pause ≈ 4 s after the section reaches 60 % visibility. */ .ldc-clean-hero.is-animated .ldc-clean-hero__eyebrow { transition-delay: 400ms; } .ldc-clean-hero.is-animated .ldc-clean-hero__title { transition-delay: 700ms; } .ldc-clean-hero.is-animated .ldc-clean-hero__sub { transition-delay: 1000ms; } .ldc-clean-hero.is-animated .ldc-clean-hero__actions { transition-delay: 1300ms; } .ldc-clean-hero.is-animated .ldc-clean-hero-nav { transition-delay: 1600ms; } /* ────────────────────────────────────────────────────────── 3) VIDEO INTRO REVEAL + SCROLL FADE-OUT Intro is the first section — it activates on initial paint. • Children animate in via sequenced delays • Content wrapper opacity + translateY are always driven by --intro-content-opacity / --intro-content-y (rAF loop). Initial values default to 1 / 0 so the children fade-in shows correctly, then as scroll progress increases, the wrapper fades/lifts. ────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────── INTRO REVEAL SEQUENCE — cinematic, word-by-word (slowed) Timeline (everything anchored on `.ldc-video-intro.is-animated`, added by triggerReveals() on first paint — no section delay for intro so the page doesn't feel like a stuck loader): 0 ms → JS adds .is-animated 200–1700 ms → LOGO: opacity 0→1, translateY 12→0, blur 6→0 (1.5 s duration with 200 ms entry delay) 1700–4230 ms → CLAIM "Váš projekt v dobrých rukou." word-by-word each word: opacity 0→1, translateY 18→0, blur 8→0 (~1.45 s per word, 270 ms stagger between words) 4830–5730 ms → SCROLL CUE "Posunout níže" opacity 0→0.75·var, translateY 8→0 (0.9 s) After 5800 ms the section is flagged `.is-settled` (JS) — at that point the slow opening transitions are swapped out for the fast 0.25 s scroll-driven ones so the scroll-fade and translate respond to user scroll without easing lag. ────────────────────────────────────────────────────────── */ /* Default opacity-0 state shared by direct children of __content. The title is RE-ENABLED to opacity 1 below so individual words can animate independently. */ .ldc-video-intro__content > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 2.0s var(--ldc-ease-lux), transform 2.2s var(--ldc-ease-lux); } .ldc-video-intro.is-animated .ldc-video-intro__content > * { opacity: 1; transform: translate3d(0, 0, 0); } /* LOGO — premium soft entrance with subtle blur lift */ .ldc-video-intro__logo { filter: blur(6px); transform: translate3d(0, 12px, 0); transition: opacity 1.45s var(--ldc-ease-lux), transform 1.50s var(--ldc-ease-lux), filter 1.30s var(--ldc-ease-lux); will-change: opacity, transform, filter; } .ldc-video-intro.is-animated .ldc-video-intro__logo { filter: blur(0); transition-delay: 200ms, 200ms, 200ms; } /* TITLE container — always visible; the per-word spans inside are the animated units. Overrides the .__content > * default of opacity:0 via specificity tie-break (same specificity, declared later → wins). */ .ldc-video-intro__title { opacity: 1; transform: none; transition: none; /* Suppress will-change on the static container (it shouldn't paint itself differently across the animation lifecycle). */ will-change: auto; } .ldc-video-intro.is-animated .ldc-video-intro__title { opacity: 1; transform: none; transition-delay: 0ms; } /* Visual line groupings — preserves the two-line layout ("Váš projekt" / "v dobrých rukou.") without affecting word reveals. */ .ldc-video-intro__line { display: block; } /* WORD reveal — staggered cinematic blur-up (slowed) */ .ldc-video-intro__word { display: inline-block; /* Spaces between sibling word spans in HTML produce natural inline whitespace, so no padding needed. */ opacity: 0; filter: blur(8px); transform: translate3d(0, 18px, 0); transition: opacity 1.30s var(--ldc-ease-lux), transform 1.45s var(--ldc-ease-lux), filter 1.30s var(--ldc-ease-lux); will-change: opacity, transform, filter; } .ldc-video-intro.is-animated .ldc-video-intro__word { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); /* Base offset 1.7 s = logo (200 + 1500 ms) finishes around that time. Per-word stagger 270 ms via --word-i (set inline 0..4) — large enough that each word reads as a separate beat. */ transition-delay: calc(1.7s + var(--word-i, 0) * 0.27s), calc(1.7s + var(--word-i, 0) * 0.27s), calc(1.7s + var(--word-i, 0) * 0.27s); } /* After settle, drop will-change for paint perf. */ .ldc-video-intro.is-animated.is-settled .ldc-video-intro__word, .ldc-video-intro.is-animated.is-settled .ldc-video-intro__logo { will-change: auto; } /* Scroll-driven fade applied on the CONTENT WRAPPER. Composes multiplicatively with the per-child fade-in so the children animate in normally, then the whole wrapper dissolves as the user scrolls past the midpoint. */ .ldc-video-intro__content { opacity: var(--intro-content-opacity, 1); transform: translate3d(0, var(--intro-content-y, 0px), 0); transition: opacity 0.25s linear, transform 0.25s linear; will-change: opacity, transform; } /* Scroll cue — slow opacity transition acts as both the reveal AND the scroll-driven fade (no animation overlay required). */ /* SCROLL CUE — last reveal in the sequence (3.45s after .is-animated). Stays at calc(--intro-content-opacity * 0.75) once revealed; on user scroll the opacity var decreases and the cue fades out. After the intro becomes `.is-settled` (at 4.5s — see triggerReveals), the slow reveal transition is swapped for a fast 0.25s linear so scroll-driven changes respond crisply without easing lag. */ .ldc-video-intro__scroll { opacity: 0; /* translateY 8 → 0 on reveal; X stays at -50% for absolute centering */ transform: translate(-50%, 8px); transition: opacity 0.9s var(--ldc-ease-lux), transform 0.9s var(--ldc-ease-lux); } .ldc-video-intro.is-animated .ldc-video-intro__scroll { /* Scroll cue fades FASTER than logo/claim on scroll: • at --intro-content-opacity = 1 → cue opacity 0.75 (clamp ceiling) • at --intro-content-opacity = 0.5 → cue opacity 0.20 • at --intro-content-opacity ≤ .375 → cue opacity 0 (cue gone, while logo+claim are still ~37% visible) */ opacity: clamp(0, calc(var(--intro-content-opacity, 1) * 1.6 - 0.6), 0.75); transform: translate(-50%, var(--intro-content-y, 0px)); /* Reveal AFTER the last word completes: last word delay 1.7s + 4 × 0.27s = 2.78s + transition duration ~1.45s = 4.23s + 600ms breather = 4.83s */ transition-delay: 4830ms, 4830ms; } .ldc-video-intro.is-animated.is-settled .ldc-video-intro__scroll { transition: opacity 0.25s linear, transform 0.25s linear; transition-delay: 0ms, 0ms; } @media (max-width: 768px) { .ldc-video-intro.is-animated .ldc-video-intro__scroll { transform: translate(0, var(--intro-content-y, 0px)); } } /* Video intro overlay — deepens with section progress. At p ≤ 0.5 overlay sits at its base opacity; from 0.5 → 1 a darker scrim fades in on top to ease the visual handoff to the hero. */ .ldc-video-intro { --p: var(--section-progress, 0); } .ldc-video-intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(46, 12, 19, 1); /* Sits ABOVE the static overlay (z:2) but BELOW content (z:3) so it darkens the photographic layer without dimming the foreground. */ z-index: 2; opacity: calc(max(0, var(--p) - 0.45) * 0.95); transition: opacity 0.25s linear; } /* ────────────────────────────────────────────────────────── 4) SECTION LAYER SYSTEM + SCROLL-DRIVEN PARALLAX HBA-style takeover via `position: sticky`: • Every fullscreen (~100vh) section is sticky-pinned at top:0. • As the user scrolls, the section stays glued to the top of the viewport while the document continues underneath. • The next section, still in natural flow, rises up FROM BELOW into the viewport. Because it sits later in the DOM than the section pinned above, the browser paints it ON TOP of the pinned section — creating a visible "section takeover" curtain effect. • When the pinned section's natural bottom edge passes y=0, it un-sticks and scrolls away; the new section takes over the pin. Tall sections (height > 1.10 · viewport, classified by JS via `.is-tall`) are EXCLUDED from sticky and behave as plain scrollable blocks — so long lists / grids inside them can still be read in full without being clipped by the pinned frame. ────────────────────────────────────────────────────────── */ body.ldc-home [data-section] { position: sticky; top: 0; --section-progress: 0; --p: var(--section-progress, 0); transition: filter 1.0s var(--ldc-ease-lux); } /* Tall sections — JS adds .is-tall after measuring. They scroll through normally so the user can read content beyond the viewport. */ body.ldc-home [data-section].is-tall { position: relative; top: auto; } /* HBA-style cinematic parallax — clearly visible, premium motion. • BG translateY: -50px (entering) → +50px (leaving) — 100px range • BG scale: 1.08 → 1.00 (full cinematic zoom-out across section life) Used on all background-bearing layers. */ .ldc-video-intro__media, .ldc-clean-hero__media, .ldc-lux-cta__bg { --p: var(--section-progress, 0); transform: translate3d(0, calc((var(--p) - 0.5) * 100px), 0) scale(calc(1.08 - var(--p) * 0.08)); transform-origin: 50% 55%; will-change: transform; } /* ────────────────────────────────────────────────────────── BG PARALLAX LAYER for sections that don't have a photographic `__media` / `__bg` element (team, why, packages). We synthesize a parallax bg via a `::before` pseudo-element that carries a SUBTLE radial gradient in the section's own palette (cream for light, bordeaux for dark) and drifts via `--section-progress`. The gradient is faint enough not to alter perceived background colour — it just gives the eye something MOTION to lock onto, so the parallax depth between bg and content reads as visibly as it does on the photographic sections. `pointer-events: none` and `z-index: 0` keep the layer below all content. The host section already provides the solid base colour, so even if the gradient layer translates a few pixels, no edge gets exposed (the solid bg fills underneath). ────────────────────────────────────────────────────────── */ body.ldc-home .ldc-lux-team::before, body.ldc-home .ldc-lux-why::before, body.ldc-home .ldc-lux-packages::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; --p: var(--section-progress, 0); /* 90px range — comparable to the photographic sections so all sections feel like they're moving "together" on scroll. */ transform: translate3d(0, calc((var(--p) - 0.5) * 90px), 0); will-change: transform; } body.ldc-home .ldc-lux-team::before { /* Cream section — warm vignette in bordeaux 50 so it stays inside the brand palette and reads as a soft glow rather than a colour change. */ background: radial-gradient(120% 60% at 50% 30%, rgba(248, 238, 240, .60) 0%, rgba(248, 238, 240, 0) 65%); } body.ldc-home .ldc-lux-why::before, body.ldc-home .ldc-lux-packages::before { /* Bordeaux sections — depth via a 600 → 900 gradient that drifts past the solid 900 base, giving the section a slow internal "lighting shift" as the user scrolls through. */ background: radial-gradient(110% 60% at 50% 35%, rgba(125, 46, 62, .35) 0%, rgba(46, 12, 19, 0) 65%); } /* Ensure the synthesized layer sits BEHIND every real content layer. `.ldc-lux-wrap` (the host's content container) is given an explicit stacking context above the pseudo-element via z-index. */ body.ldc-home .ldc-lux-team > .ldc-lux-wrap, body.ldc-home .ldc-lux-why > .ldc-lux-wrap, body.ldc-home .ldc-lux-packages > .ldc-lux-wrap { position: relative; z-index: 1; } /* ────────────────────────────────────────────────────────── SERVICES — scroll-out scrim (handoff bridge) Services is the only TALL section in the homepage motion stack (intro band + 88vh photo grid ≈ 138 % of viewport on most screens). Because tall sections are `position: relative`, they don't take part in the sticky takeover chain — which means the services → packages transition would normally be a hard cut without any visible overlap. To compensate, we inject a `::after` pseudo-element that: • Is `position: sticky` at the bottom of the viewport (`bottom: 0`) • Has `height: 40vh` and `margin-top: -40vh` so it overlaps the bottom of the section, NOT adding to the section's layout height. • Carries a bottom-to-top dark gradient in bordeaux-900 — visually anchored to the viewport floor, fading upward into transparency. • Stays pinned at the viewport bottom for the entire scroll-through of services, then releases when services itself starts scrolling out of view. The release timing aligns with packages rising from below. Effect: as the user nears the end of services, the scrim creates a visible "dark wave" rising over the photo grid from the bottom — bridging into the dark bordeaux-900 packages section that follows. The transition reads as a continuous tonal handoff rather than two separate blocks meeting. ────────────────────────────────────────────────────────── */ body.ldc-home .ldc-lux-services-v2 { /* Required so the sticky pseudo-element has a positioning ancestor and so the scrim is clipped within services (doesn't leak into adjacent sections). */ isolation: isolate; } /* ────────────────────────────────────────────────────────── FOOTER (patika) — always visible in document flow Rendered outside `

` (include/footer.php). Must stay readable without JS; `.is-revealed` from DOMContentLoaded init is optional. ────────────────────────────────────────────────────────── */ /* Footer is always in document flow and visible — reveal is optional enhancement only; must never depend on JS to become readable. */ .ldc-clean-footer, body.ldc-home .ldc-clean-footer, body.ldc-home .ldc-clean-footer.is-revealed { display: block; opacity: 1; visibility: visible; position: relative; z-index: 5; transform: none; } body.ldc-home .ldc-lux-services-v2::after { content: ""; position: sticky; bottom: 0; display: block; /* Short ridge — only the bottom slice of the viewport is darkened, so the tile photos and titles stay visible throughout services. */ height: 22vh; /* Negative top margin overlaps the bottom 22vh of services without extending its visual height (services' total layout box stays the same — the scrim is purely a visual overlay). */ margin-top: -22vh; width: 100%; pointer-events: none; /* Same stacking level as tile images (z:1) — placed AFTER them in DOM so it paints on top of bare photography, but tile overlays (z:2) and inner content (z:3, titles + descriptions) remain ABOVE the scrim. Service tile titles stay perfectly legible. */ z-index: 1; background: linear-gradient(180deg, rgba(46, 12, 19, 0) 0%, rgba(46, 12, 19, .55) 50%, rgba(46, 12, 19, .92) 100%); /* Suppressed until services is ≥ 70 % through its progress so the scrim only appears during the LAST third of the scroll — precisely at the handoff to packages. Before that, the photo grid reads cleanly without any artificial dimming. */ opacity: clamp(0, calc(var(--section-progress, 0) * 3 - 2), 1); transition: opacity 0.35s linear; will-change: opacity; } /* Content layer — drifts in the opposite direction (~28px total range, ±14px peak) so headlines, leads, and cards "lead" the bg. The smaller range keeps the text legible and the foreground / background separation produces real cinematic depth. */ .ldc-lux-team__layout, .ldc-lux-why__head, .ldc-lux-why__grid, .ldc-lux-services-v2__head, .ldc-lux-packages__head, .ldc-lux-packages__grid, .ldc-lux-cta__inner { transform: translate3d(0, calc((var(--p, 0) - 0.5) * -28px), 0); will-change: transform; } /* Overlay opacity is scroll-bound — overlays clearly deepen as the section slides out. Inherits --p from the parent [data-section]. The intro additionally relies on .ldc-video-intro::after (above) for a stronger late-section scrim. */ .ldc-video-intro__overlay { opacity: calc(0.80 + var(--p, 0) * 0.20); transition: opacity 0.25s linear; will-change: opacity; } .ldc-lux-cta__bg { opacity: calc(0.30 + var(--p, 0) * 0.25); transition: opacity 0.25s linear; } /* Hero RIGHT photo — the scroll-driven parallax (scale 1.06 → 1.00 over the section's lifetime) already produces the requested slow zoom-out. When the user lands at the top of the page the hero is below the fold so progress ≈ 0 and scale starts at 1.06; as the user scrolls into the hero, the photo eases out smoothly. */ /* Video element should NOT carry its own transform — its parent .ldc-video-intro__media already drifts as the parallax layer. */ .ldc-video-intro__video { will-change: auto; } /* ────────────────────────────────────────────────────────── TEAM PORTRAITS — HBA-style top-to-bottom photo reveal Each portrait is masked with `clip-path: inset(0 0 100% 0)` so it starts invisible. Once the team section's reveal fires (JS adds `.is-animated` on the section in triggerReveals()), the clip opens from top to bottom and the inner image performs a subtle scale+lift settle. Stagger via --team-reveal-i: 0 = Emil (lead, no delay) 1 = Mirek (220 ms) 2 = Tereza (440 ms) Fallback: when JS hasn't toggled .is-animated yet (e.g. first paint before IO) the figures stay revealed thanks to the no-js override at the bottom of this file and the lack of the masking selector — only the targeted `[data-team-reveal]` carries the mask. ────────────────────────────────────────────────────────── */ .ldc-lux-team__portrait[data-team-reveal] { /* Top-to-bottom curtain — top edge stays, bottom inset shrinks to 0 so the image is revealed from top to bottom. Slower duration so the curtain is genuinely noticeable on a luxury site. */ clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); transition: clip-path 2.2s cubic-bezier(.22, 1, .36, 1), -webkit-clip-path 2.2s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--team-reveal-i, 0) * 320ms); will-change: clip-path; } .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image { /* Subtle parallax-style settle on the bitmap: starts slightly enlarged and shifted up, then drops back as the mask opens. Long duration (3.2 s) lets the depth shift sit clearly behind the mask wipe. */ transform: scale(1.06) translate3d(0, -18px, 0); transition: transform 3.2s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--team-reveal-i, 0) * 320ms); will-change: transform; } /* Revealed state — section is in view (triggerReveals adds .is-animated). `.ldc-lux-team` is the [data-section="team"] element. */ .ldc-lux-team.is-animated .ldc-lux-team__portrait[data-team-reveal] { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } .ldc-lux-team.is-animated .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image { transform: scale(1) translate3d(0, 0, 0); } /* Once settled, drop will-change to avoid perma-promoted layers. */ .ldc-lux-team.is-settled .ldc-lux-team__portrait[data-team-reveal], .ldc-lux-team.is-settled .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image { will-change: auto; } /* ── Service tiles — cinematic scale on reveal (slowed) ──────── Tile image starts oversized (1.08) and slowly settles to its idle scale (1.04) as the reveal fires. Hover scale (1.10) still overrides when the user points at a tile. */ .ldc-lux-tile[data-reveal] .ldc-lux-tile__image { transform: scale(1.08); /* 3.0 s scale-down so the photographic settle is clearly noticeable behind the tile's opacity fade-in. */ transition: transform 3.0s cubic-bezier(.16,1,.3,1), filter 0.8s ease; } .ldc-lux-tile[data-reveal].is-in .ldc-lux-tile__image { transform: scale(1.04); /* 220 ms stagger between tiles — large enough to read each tile as a separate beat in the 2×3 grid. */ transition-delay: calc(var(--reveal-i, 0) * 220ms), 0ms; } /* Overlay lightens slightly as the tile reveals — re-asserts after the existing static overlay declaration. */ .ldc-lux-tile[data-reveal] .ldc-lux-tile__overlay { opacity: 1; transition: opacity 2.0s var(--ldc-ease-lux), background 0.6s cubic-bezier(.16,1,.3,1); } .ldc-lux-tile[data-reveal].is-in .ldc-lux-tile__overlay { opacity: 0.88; transition-delay: calc(var(--reveal-i, 0) * 220ms); } /* Hover overlay change keeps working — re-asserted in case the reveal-tied opacity damps the hover state. */ .ldc-lux-tile:hover .ldc-lux-tile__overlay { opacity: 1; } /* ────────────────────────────────────────────────────────── 5) SECTION STATE — .is-active / .is-past / .is-next Toggled by IO. Past sections dim visibly; next sections hold a hint of softness before they're fully in. ────────────────────────────────────────────────────────── */ /* Section dim — past sections noticeably recede so the active one reads as "in focus", which is a key part of the takeover feel. */ body.ldc-home [data-section].is-past { filter: brightness(.82) saturate(.90); } body.ldc-home [data-section].is-next { filter: brightness(.94); } body.ldc-home [data-section].is-active { filter: brightness(1); } /* ────────────────────────────────────────────────────────── 6) HEADER MOTION — slow, gentle crossfade ────────────────────────────────────────────────────────── */ .ldc-clean-header { transition: background 1.1s var(--ldc-ease-lux), border-color 1.1s var(--ldc-ease-lux), backdrop-filter 1.1s var(--ldc-ease-lux), -webkit-backdrop-filter 1.1s var(--ldc-ease-lux), box-shadow 1.1s var(--ldc-ease-lux) !important; } /* ────────────────────────────────────────────────────────── 7) RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { [data-reveal] { transform: translate3d(0, 24px, 0); } [data-reveal].is-in { transform: translate3d(0, 0, 0); } .ldc-clean-hero__panel-inner > * { transform: translate3d(0, 20px, 0); } .ldc-clean-hero.is-animated .ldc-clean-hero__panel-inner > * { transform: translate3d(0, 0, 0); } .ldc-lux-line { transform: translate3d(0, 24px, 0); } .is-animated .ldc-lux-line { transform: translate3d(0, 0, 0); } /* Lighter parallax on tablet — 70px bg / 20px content / 1.06 → 1.00 scale */ .ldc-video-intro__media, .ldc-clean-hero__media, .ldc-lux-cta__bg { transform: translate3d(0, calc((var(--p) - 0.5) * 70px), 0) scale(calc(1.06 - var(--p) * 0.06)); } .ldc-lux-team__layout, .ldc-lux-why__head, .ldc-lux-why__grid, .ldc-lux-services-v2__head, .ldc-lux-packages__head, .ldc-lux-packages__grid, .ldc-lux-cta__inner { transform: translate3d(0, calc((var(--p, 0) - 0.5) * -20px), 0); } } @media (max-width: 768px) { /* Mobile: drop scroll-driven parallax entirely — perf + simpler UX. */ .ldc-video-intro__media, .ldc-clean-hero__media, .ldc-lux-cta__bg, .ldc-lux-team__layout, .ldc-lux-why__head, .ldc-lux-why__grid, .ldc-lux-services-v2__head, .ldc-lux-packages__head, .ldc-lux-packages__grid, .ldc-lux-cta__inner { transform: none !important; will-change: auto !important; } body.ldc-home [data-section].is-past, body.ldc-home [data-section].is-next, body.ldc-home [data-section].is-active { filter: none !important; } /* Mobile reveals — slightly tighter than desktop but still slow and readable. Stay above 1.4 s so the luxury feel survives on phones. */ [data-reveal] { transform: translate3d(0, 14px, 0); transition-duration: 1.5s, 1.7s; } [data-reveal].is-in { transform: translate3d(0, 0, 0); } .ldc-clean-hero__panel-inner > *, .ldc-video-intro__content > * { transition-duration: 1.5s, 1.7s; } /* Clip-path on mobile is also lighter — just a wipe over a shorter span */ .ldc-clean-hero__panel, .ldc-clean-hero.is-animated .ldc-clean-hero__panel { transition-duration: 1.5s; } } /* ────────────────────────────────────────────────────────── 8) PREFERS-REDUCED-MOTION — full opt-out ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-in, .ldc-clean-hero__panel, .ldc-clean-hero.is-animated .ldc-clean-hero__panel, .ldc-clean-hero__panel-inner > *, .ldc-clean-hero.is-animated .ldc-clean-hero__panel-inner > *, .ldc-video-intro__content > *, .ldc-video-intro.is-animated .ldc-video-intro__content > *, .ldc-video-intro__logo, .ldc-video-intro.is-animated .ldc-video-intro__logo, .ldc-video-intro__title, .ldc-video-intro.is-animated .ldc-video-intro__title, .ldc-video-intro__word, .ldc-video-intro.is-animated .ldc-video-intro__word, .ldc-video-intro__scroll, .ldc-video-intro.is-animated .ldc-video-intro__scroll { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; animation: none !important; will-change: auto !important; } .ldc-video-intro__media, .ldc-clean-hero__media, .ldc-lux-cta__bg, .ldc-lux-team__layout, .ldc-lux-why__head, .ldc-lux-why__grid, .ldc-lux-services-v2__head, .ldc-lux-packages__head, .ldc-lux-packages__grid, .ldc-lux-cta__inner { transform: none !important; will-change: auto !important; } /* Team portrait reveal — show immediately, no clip mask, no motion. */ .ldc-lux-team__portrait[data-team-reveal], .ldc-lux-team.is-animated .ldc-lux-team__portrait[data-team-reveal] { clip-path: none !important; -webkit-clip-path: none !important; transition: none !important; will-change: auto !important; } .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image, .ldc-lux-team.is-animated .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image { transform: none !important; transition: none !important; will-change: auto !important; } body.ldc-home [data-section].is-past, body.ldc-home [data-section].is-next, body.ldc-home [data-section].is-active { filter: none !important; } .ldc-video-intro::after { opacity: 0 !important; } } /* ────────────────────────────────────────────────────────── 9) NO-JS FALLBACK — keep content visible if JS is off ────────────────────────────────────────────────────────── */ html.no-js [data-reveal], html.no-js .ldc-clean-hero__panel, html.no-js .ldc-clean-hero__panel-inner > *, html.no-js .ldc-video-intro__content > *, html.no-js .ldc-video-intro__logo, html.no-js .ldc-video-intro__title, html.no-js .ldc-video-intro__word, html.no-js .ldc-video-intro__scroll, html.no-js .ldc-lux-team__portrait[data-team-reveal], html.no-js .ldc-lux-team__portrait[data-team-reveal] .ldc-lux-team__portrait-image, html.no-js .ldc-lux-team__group[data-team-reveal], html.no-js body.ldc-home .ldc-clean-footer { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; -webkit-clip-path: none !important; } /* ════════════════════════════════════════════════════════════════════════ LDC — FÁZE C (06/2026) — finální klientské připomínky • Týmová sekce: jedna společná fotografie (.ldc-lux-team--group) • Balíčky V2 (START / PLUS / PREMIUM) — dominantní název, cena dole, bez vizuálních odrážek, hover lift + glow + animace, stejné výšky • Sociální sítě (.ldc-lux-social) — mobile menu + footer • Footer polish (větší logo, lepší spacing a hierarchie) • Kontakt — jednoduchá mapová sekce • Partneři — vizuální struktura pro budoucí profily partnerů ════════════════════════════════════════════════════════════════════════ */ /* ── 1) O NÁS / Tým — společná fotografie ────────────────────────── */ .ldc-lux-team--group .ldc-lux-team__media { display: block; aspect-ratio: 5 / 6; max-width: 100%; } .ldc-lux-team__group { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: 2px; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .ldc-lux-team__group:hover { transform: translateY(-4px); } .ldc-lux-team__group-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: grayscale(8%) contrast(1.02); transition: filter 0.6s ease, transform 0.6s cubic-bezier(.16,1,.3,1); z-index: 0; } .ldc-lux-team__group:hover .ldc-lux-team__group-image { filter: grayscale(0%) contrast(1.06); transform: scale(1.02); } .ldc-lux-team__group::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 12, 19, 0) 50%, rgba(46, 12, 19, .55) 100%); z-index: 1; } .ldc-lux-team__group .ldc-lux-team__caption { z-index: 2; } /* Reveal hook for the group photo (same pattern as portrait reveal) */ .ldc-lux-team__group[data-team-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--team-reveal-i, 0) * 120ms); } .ldc-lux-team.is-animated .ldc-lux-team__group[data-team-reveal] { opacity: 1; transform: none; } @media (max-width: 1024px) { .ldc-lux-team--group .ldc-lux-team__media { aspect-ratio: 5 / 5; max-width: 720px; margin: 0 auto; } } /* ── 2) BALÍČKY V2 — luxusní karty (START / PLUS / PREMIUM) ─────────── Specifické pravidla pro .ldc-lux-packages--v2, aby koexistovala s existující komponentou .ldc-lux-packages (kterou ostatní stránky mohou stále používat). Vyšší specifita než `.ldc-lux-pkg` defaulty bez nutnosti !important. */ .ldc-lux-packages--v2 .ldc-lux-packages__grid { border: 0; background: transparent; gap: clamp(20px, 2vw, 32px); } .ldc-lux-packages--v2 .ldc-lux-pkg { position: relative; display: flex; flex-direction: column; padding: clamp(36px, 3.4vw, 56px) clamp(32px, 3vw, 48px) clamp(32px, 3vw, 44px); border: 1px solid rgba(248, 238, 240, .14); border-radius: 4px; background: rgba(248, 238, 240, .015); box-shadow: 0 1px 0 rgba(248, 238, 240, .04) inset, 0 18px 36px -28px rgba(0, 0, 0, .55); transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .45s ease, background-color .45s ease, box-shadow .55s cubic-bezier(.16,1,.3,1); /* Equal heights (i kdyby měl text více řádků). */ min-height: 100%; overflow: hidden; } /* Odstranění původního pravého rámečku z nezávislé komponenty. */ .ldc-lux-packages--v2 .ldc-lux-pkg, .ldc-lux-packages--v2 .ldc-lux-pkg:last-child { border-right: 1px solid rgba(248, 238, 240, .14); } /* Decentní luxusní glow — pseudo-element s gradient kruhem, skrytý dokud nedojde k hoveru. */ .ldc-lux-packages--v2 .ldc-lux-pkg::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 80% at 50% 0%, rgba(212, 175, 137, .22) 0%, rgba(212, 175, 137, .04) 38%, transparent 70% ); opacity: 0; transition: opacity .55s ease; z-index: 0; } .ldc-lux-packages--v2 .ldc-lux-pkg > * { position: relative; z-index: 1; } .ldc-lux-packages--v2 .ldc-lux-pkg:hover, .ldc-lux-packages--v2 .ldc-lux-pkg:focus-within { transform: translateY(-6px); border-color: rgba(212, 175, 137, .55); background: rgba(248, 238, 240, .035); box-shadow: 0 1px 0 rgba(248, 238, 240, .06) inset, 0 32px 60px -22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 137, .25); } .ldc-lux-packages--v2 .ldc-lux-pkg:hover::before, .ldc-lux-packages--v2 .ldc-lux-pkg:focus-within::before { opacity: 1; } /* HEADER — tag + dominantní název + tagline */ .ldc-lux-packages--v2 .ldc-lux-pkg__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid rgba(248, 238, 240, .10); } .ldc-lux-packages--v2 .ldc-lux-pkg__tag { font-family: var(--ldc-font); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ldc-bordeaux-200); opacity: .82; } .ldc-lux-packages--v2 .ldc-lux-pkg__name { font-family: var(--ldc-font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 58px); letter-spacing: 0.04em; line-height: 1.0; color: var(--ldc-bordeaux-50); margin: 0; /* Jemné animované přiblížení / kontrastování při hoveru. */ transition: letter-spacing .55s ease, color .35s ease; } .ldc-lux-packages--v2 .ldc-lux-pkg:hover .ldc-lux-pkg__name { letter-spacing: 0.06em; } .ldc-lux-packages--v2 .ldc-lux-pkg__tagline { font-family: var(--ldc-font); font-size: 14px; line-height: 1.65; color: rgba(248, 238, 240, .72); margin: 0; max-width: 42ch; } /* SEZNAM výhod — bez vizuálních odrážek; jednotlivé položky odděleny jen jemnou hairline-line a luxusním "—" prefixem. */ .ldc-lux-packages--v2 .ldc-lux-pkg__list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 0; flex-grow: 1; } .ldc-lux-packages--v2 .ldc-lux-pkg__list li { position: relative; padding: 14px 0; font-family: var(--ldc-font); font-size: 14px; line-height: 1.55; color: rgba(248, 238, 240, .82); border-bottom: 1px solid rgba(248, 238, 240, .07); } .ldc-lux-packages--v2 .ldc-lux-pkg__list li:last-child { border-bottom: none; } .ldc-lux-packages--v2 .ldc-lux-pkg__list li::before { content: none; } /* PATIČKA karty — cena (níže, decentní) + CTA */ .ldc-lux-packages--v2 .ldc-lux-pkg__foot { margin-top: auto; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; border-top: 1px solid rgba(248, 238, 240, .10); } .ldc-lux-packages--v2 .ldc-lux-pkg__price-block { display: flex; flex-direction: column; gap: 6px; } .ldc-lux-packages--v2 .ldc-lux-pkg__price-label { font-family: var(--ldc-font); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(248, 238, 240, .55); } .ldc-lux-packages--v2 .ldc-lux-pkg__price { font-family: var(--ldc-font); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0.01em; color: var(--ldc-bordeaux-50); display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; /* Reset proti staré komponentě (.ldc-lux-pkg__price měl velký display font). */ line-height: 1.2; min-height: 0; } .ldc-lux-packages--v2 .ldc-lux-pkg__price-strike { font-family: var(--ldc-font); font-size: 14px; font-weight: 400; letter-spacing: 0.04em; color: rgba(248, 238, 240, .42); text-decoration: line-through; } .ldc-lux-packages--v2 .ldc-lux-pkg__price-note { font-family: var(--ldc-font); font-size: 12px; line-height: 1.6; color: rgba(248, 238, 240, .55); margin: 0; letter-spacing: 0.01em; text-transform: none; min-height: 0; } .ldc-lux-packages--v2 .ldc-lux-pkg__cta { align-self: flex-start; } /* Specifické zvýraznění PLUS karty — jemné, decentní, ne agresivní. */ .ldc-lux-packages--v2 .ldc-lux-pkg[data-pkg="plus"] { background: rgba(212, 175, 137, .04); } @media (max-width: 1024px) { .ldc-lux-packages--v2 .ldc-lux-packages__grid { grid-template-columns: 1fr; gap: 24px; } .ldc-lux-packages--v2 .ldc-lux-pkg, .ldc-lux-packages--v2 .ldc-lux-pkg:last-child { border-right: 1px solid rgba(248, 238, 240, .14); border-bottom: 1px solid rgba(248, 238, 240, .14); } } @media (max-width: 600px) { .ldc-lux-packages--v2 .ldc-lux-pkg__name { font-size: clamp(34px, 12vw, 46px); } } /* ── 3) SOCIÁLNÍ SÍTĚ — sdílená komponenta (mobile menu + footer) ──── Default = bílá, hover dle sítě. V hlavičce se ikony NEzobrazují. */ .ldc-lux-social { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 18px; padding: 0; margin: 0; line-height: 1; } .ldc-lux-social__link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; background: transparent; color: #ffffff; text-decoration: none; line-height: 1; transition: color .25s ease, transform .25s cubic-bezier(.16,1,.3,1); } .ldc-lux-social__link svg { width: 22px; height: 22px; display: block; fill: currentColor; flex: none; } .ldc-lux-social__link svg path { fill: currentColor; } .ldc-lux-social__link:hover, .ldc-lux-social__link:focus-visible { transform: translateY(-1px); outline: none; } .ldc-lux-social__link[data-network="instagram"]:hover, .ldc-lux-social__link[data-network="instagram"]:focus-visible { color: #e1306c; } .ldc-lux-social__link[data-network="facebook"]:hover, .ldc-lux-social__link[data-network="facebook"]:focus-visible { color: #1877f2; } .ldc-lux-social__link[data-network="linkedin"]:hover, .ldc-lux-social__link[data-network="linkedin"]:focus-visible { color: #0a66c2; } /* ── Mobile drawer kontext ─────────────────────────────────────────── Override agresivních pravidel `#ldc-mobile-nav a` (clamp font 28-48px, padding 14px 0, border-bottom, ::before s `data-num`). Sociální ikony nejsou menu položky — chovají se jako v patičce. */ #ldc-mobile-nav .ldc-lux-social { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(248, 238, 240, .10); gap: 20px; } #ldc-mobile-nav .ldc-lux-social__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; font-size: 16px !important; /* potlačí clamp(28..48px) z #ldc-mobile-nav a */ font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; color: #ffffff !important; text-decoration: none !important; transition: color .25s ease, transform .25s cubic-bezier(.16,1,.3,1) !important; } #ldc-mobile-nav .ldc-lux-social__link svg { width: 22px !important; height: 22px !important; display: block !important; fill: #ffffff; fill: currentColor; flex: none; } #ldc-mobile-nav .ldc-lux-social__link svg path { fill: currentColor; } #ldc-mobile-nav .ldc-lux-social__link::before, #ldc-mobile-nav .ldc-lux-social__link::after { content: none !important; display: none !important; width: 0 !important; min-width: 0 !important; } #ldc-mobile-nav .ldc-lux-social__link:hover { padding-left: 0 !important; transform: translateY(-1px) !important; } #ldc-mobile-nav .ldc-lux-social__link[data-network="instagram"]:hover, #ldc-mobile-nav .ldc-lux-social__link[data-network="instagram"]:focus-visible { color: #e1306c !important; } #ldc-mobile-nav .ldc-lux-social__link[data-network="facebook"]:hover, #ldc-mobile-nav .ldc-lux-social__link[data-network="facebook"]:focus-visible { color: #1877f2 !important; } #ldc-mobile-nav .ldc-lux-social__link[data-network="linkedin"]:hover, #ldc-mobile-nav .ldc-lux-social__link[data-network="linkedin"]:focus-visible { color: #0a66c2 !important; } /* ── Footer kontext ──────────────────────────────────────────────── */ .ldc-clean-footer .ldc-lux-social { gap: 20px; margin-top: 6px; } .ldc-clean-footer .ldc-lux-social__link { width: 22px; height: 22px; color: #ffffff; } .ldc-clean-footer .ldc-lux-social__link svg { width: 22px; height: 22px; fill: currentColor; } .ldc-clean-footer .ldc-lux-social__link svg path { fill: currentColor; } /* ── Header kontext ──────────────────────────────────────────────── */ .ldc-clean-header__actions .ldc-lux-social, .ldc-clean-header .ldc-lux-social { display: none !important; } /* ── 4) FOOTER — vizuální polish ──────────────────────────────────── */ /* Větší logo, lepší spacing a hierarchie navigačních sloupců. */ .ldc-clean-footer__brand img, .ldc-clean-footer__logo { height: 64px; /* ↑ z 44 px */ margin-bottom: 28px; } .ldc-clean-footer__grid { /* Větší dýchání mezi brand sloupcem a odkazy. */ gap: clamp(40px, 4.4vw, 80px); padding-bottom: clamp(56px, 5.4vw, 84px); grid-template-columns: minmax(280px, 1.55fr) minmax(0, 3fr); } /* Tři menu sloupce + Comgate logo pod nimi. */ .ldc-clean-footer__menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4.4vw, 80px); } .ldc-clean-footer__comgate { grid-column: 1 / -1; height: 40px; width: auto; margin-top: clamp(24px, 2.4vw, 36px); } .ldc-clean-footer__col-title { font-size: 12px; letter-spacing: 0.34em; margin-bottom: 28px; } .ldc-clean-footer__links { gap: 14px; } .ldc-clean-footer__links a { font-size: 14.5px; color: rgba(248, 238, 240, .82); } /* Brand sloupec — tagline má víc vzduchu nad sociálními ikonami. */ .ldc-clean-footer__brand .ldc-clean-footer__tagline { margin-bottom: 28px; } .ldc-clean-footer__bottom { padding-top: 32px; gap: 22px; } @media (max-width: 768px) { .ldc-clean-footer__brand img, .ldc-clean-footer__logo { height: 54px; } .ldc-clean-footer__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ldc-clean-footer__grid { grid-template-columns: 1fr; gap: 32px; } .ldc-clean-footer__menus { grid-template-columns: 1fr; gap: 28px; } .ldc-clean-footer__comgate { margin-top: 8px; } } /* ── 5) KONTAKT — jednoduchá mapová sekce ─────────────────────────── */ .ldc-clean-map { background: var(--ldc-bordeaux-900); color: var(--ldc-bordeaux-50); padding: clamp(64px, 6vw, 96px) 0; } .ldc-clean-map__inner { width: 100%; max-width: var(--ldc-container); margin: 0 auto; padding-inline: var(--ldc-gutter); box-sizing: border-box; } .ldc-clean-map__head { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 3.6vw, 56px); } .ldc-clean-map__head .ldc-clean-eyebrow { color: var(--ldc-bordeaux-200); } .ldc-clean-map__head h2 { font-family: var(--ldc-font-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.01em; margin: 0; color: var(--ldc-bordeaux-50); } .ldc-clean-map__head p { font-size: 15px; line-height: 1.75; color: rgba(248, 238, 240, .72); margin: 0; max-width: 56ch; } .ldc-clean-map__frame { position: relative; width: 100%; aspect-ratio: 21 / 9; min-height: 320px; border: 1px solid rgba(248, 238, 240, .14); border-radius: 4px; overflow: hidden; background: rgba(248, 238, 240, .03); } .ldc-clean-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(15%) contrast(1.02); } @media (max-width: 768px) { .ldc-clean-map__head { grid-template-columns: 1fr; align-items: start; } .ldc-clean-map__frame { aspect-ratio: 4 / 3; min-height: 280px; } } /* ── 6) PARTNEŘI — připravená struktura pro budoucí profily ───────── */ .ldc-lux-partner-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .ldc-lux-partner-card { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 40px); border: 1px solid var(--ldc-line, rgba(46, 12, 19, .08)); border-radius: 4px; background: #fff; transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .45s cubic-bezier(.16,1,.3,1); } .ldc-lux-partner-card:hover { transform: translateY(-4px); border-color: rgba(212, 175, 137, .55); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .25); } .ldc-lux-partner-card__logo { display: flex; align-items: center; justify-content: flex-start; height: 64px; margin-bottom: 22px; } .ldc-lux-partner-card__logo img, .ldc-lux-partner-card__logo svg { max-height: 100%; max-width: 70%; object-fit: contain; filter: grayscale(15%); transition: filter .35s ease; } .ldc-lux-partner-card:hover .ldc-lux-partner-card__logo img, .ldc-lux-partner-card:hover .ldc-lux-partner-card__logo svg { filter: grayscale(0%); } .ldc-lux-partner-card__name { font-family: var(--ldc-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--ldc-bordeaux-900); } .ldc-lux-partner-card__role { font-family: var(--ldc-font); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ldc-bordeaux-200); margin-bottom: 14px; } .ldc-lux-partner-card__text { font-size: 14px; line-height: 1.65; color: var(--ldc-ink-mid, rgba(46, 12, 19, .72)); margin: 0 0 18px; } .ldc-lux-partner-card__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; } .ldc-lux-partner-card__gallery span { display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: rgba(46, 12, 19, .06); border-radius: 2px; transition: transform .4s ease, filter .4s ease; } .ldc-lux-partner-card:hover .ldc-lux-partner-card__gallery span { filter: brightness(1.04); } /* Sekce kolem profilů (světlé pozadí, navazuje na ldc-clean-section) */ .ldc-lux-partner-profiles-section { background: var(--ldc-cream, #f5efe7); padding: clamp(72px, 7vw, 120px) 0; } .ldc-lux-partner-profiles-section .ldc-clean-container { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 64px); } .ldc-lux-partner-profiles-empty { padding: clamp(40px, 5vw, 72px); border: 1px dashed rgba(46, 12, 19, .18); border-radius: 4px; text-align: center; font-family: var(--ldc-font); font-size: 14px; letter-spacing: 0.02em; color: var(--ldc-ink-mid, rgba(46, 12, 19, .58)); background: rgba(255, 255, 255, .55); } /* ── 7) MOBILE — drobné opravy přetečení/typografie ───────────────── */ @media (max-width: 600px) { /* Stop dlouhým CTA labelům, aby nezalamovaly hero panel. */ .ldc-clean-hero__actions { flex-wrap: wrap; } /* Subhero titulek nesmí přetékat do hero buttons. */ .ldc-clean-subhero__title { word-break: keep-all; overflow-wrap: break-word; } /* CTA tlačítka v sekcích a nav drawer pohodlnější touch target. */ .ldc-lux-btn, .ldc-clean-btn { min-height: 44px; } } /* ──────────────────────────────────────────────────────────────────── 8) BALÍČKY V2 — luxusní redesign (ref. screenshot homepage) • Velké dekorativní číslo (01 / 02 / 03) jako pozadí karty. • Elegantní serif typografie pro názvy balíčků. • Decentní architektonický line-art motiv v pozadí (SVG data-URI). • Všechny tři karty zcela rovnocenné — žádné upřednostnění PLUS. • CTA s jemnou šipkou doprava. • Eyebrow „tag" nad názvem skrytý (claimy nemají konkurovat číslu). Pravidla jsou scopována přes `body.ldc-home`, aby detailní stránka /balicky (která sdílí stejné DOM třídy) zůstala bez úprav a stále zobrazovala plný osmibodový seznam i eyebrow „tag" claim. ──────────────────────────────────────────────────────────────────── */ /* Vzdušnější horní/dolní padding karty, aby motiv + číslo měly prostor. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg { padding: clamp(40px, 3.6vw, 56px) clamp(30px, 2.8vw, 44px) clamp(32px, 3vw, 40px); } /* — Architektonický line-art motiv (decentní vrstva v pozadí karty) —— Inline SVG v data-URI: jemné půdorysné/architektonické čáry. Opacity 5–7 % aby čitelnost textu zůstala plně zachována. Stejný motiv pro všechny karty (bez upřednostnění). */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__motif { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .06; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center 60%; background-size: 92% auto; transition: opacity .55s ease; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:hover .ldc-lux-pkg__motif, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:focus-within .ldc-lux-pkg__motif { opacity: .085; } /* Doplňkový jemný gradient (papyrus/inkoust) — uvnitř karty. Pseudo-element ::after na .ldc-lux-pkg, pod obsahem ale nad motivem. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(140% 80% at 100% 0%, rgba(212, 175, 137, .05) 0%, rgba(212, 175, 137, 0) 55%), linear-gradient(180deg, rgba(248, 238, 240, .015) 0%, rgba(248, 238, 240, 0) 60%); } /* Obsah karty musí ležet nad motivy. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg > * { position: relative; z-index: 1; } /* — Velké dekorativní číslo 01 / 02 / 03 ———————————————————————— Serif typografie (system stack: Georgia → Times New Roman → serif), poloprůhledné, posazené k hornímu levému rohu karty. Funguje jako pozadí — nesmí konkurovat názvu, proto má opacity ~10 % a pointer-events: none. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__num { position: absolute; top: clamp(14px, 1.6vw, 24px); left: clamp(22px, 2.4vw, 34px); font-family: 'Cormorant Garamond', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(112px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.02em; color: var(--ldc-bordeaux-50); opacity: .12; pointer-events: none; user-select: none; z-index: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); /* Aby nikdy nepřeteklo přes okraj karty na malých obrazovkách. */ max-width: 80%; overflow: hidden; white-space: nowrap; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:hover .ldc-lux-pkg__num, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:focus-within .ldc-lux-pkg__num { opacity: .12; transform: translateY(-2px); } /* Posuneme header karty níže, aby název nesplýval s velkým číslem v levém horním rohu, ale zároveň zůstal viditelně dominantní. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__head { margin-top: clamp(48px, 5.2vw, 84px); } /* Skryjeme drobný eyebrow „tag" („Začněte poznáním" atp.) z homepage karty — texty nemažeme, jen nezobrazujeme, aby název zazníval čistě a nekonkuroval velkému dekorativnímu číslu. (Plný obsah včetně tagu zůstává k dispozici v markup pro detailní stránku /balicky.) */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__tag { display: none; } /* Elegantní serif název balíčku — výraznější, klidnější, prémiovější. Velikost mírně menší než původní zobrazení (které bylo 36–58 px), aby velké číslo vedle něj fungovalo jako pozadí, ne soupeř. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__name { font-family: 'Cormorant Garamond', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: 0.02em; line-height: 1.05; color: var(--ldc-bordeaux-50); /* Jemné podtržení pod názvem — replikuje vzhled ze screenshotu. */ position: relative; padding-bottom: 14px; margin-bottom: 4px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__name::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 1px; background: rgba(212, 175, 137, .55); transition: width .45s cubic-bezier(.16,1,.3,1); } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:hover .ldc-lux-pkg__name { letter-spacing: 0.03em; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg:hover .ldc-lux-pkg__name::after { width: 88px; } /* — Rovnocennost karet ————————————————————————————————————————— Jakékoliv staré „featured/recommended" zvýraznění + tint na PLUS musí být plně potlačeno. Všechny tři karty mají identické pozadí i ohraničení. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg[data-pkg="plus"], body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg[data-pkg="start"], body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg[data-pkg="premium"] { background: rgba(248, 238, 240, .015); } /* — Seznam výhod: čisté položky, decentní jemná tečka před textem (stejná u všech tří karet). */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__list li { padding: 11px 0 11px 18px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(212, 175, 137, .65); transform: translateY(-50%); } /* — CTA s jemnou šipkou — animovaný posun při hoveru. */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__cta { display: inline-flex; align-items: center; gap: 10px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__cta-arrow { display: inline-block; font-size: 1.05em; line-height: 1; transform: translateX(0); transition: transform .35s cubic-bezier(.16,1,.3,1); } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__cta:hover .ldc-lux-pkg__cta-arrow, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__cta:focus-visible .ldc-lux-pkg__cta-arrow { transform: translateX(4px); } /* — Vzdušnější karta jako celek (nemusí být extrémně vysoká). */ body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__list { margin-bottom: clamp(20px, 2vw, 28px); } /* ── Responzivita ──────────────────────────────────────────────── */ /* Tablet — dvě karty vedle sebe (3 → 2). */ @media (max-width: 1100px) and (min-width: 721px) { body.ldc-home .ldc-lux-packages--v2 .ldc-lux-packages__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__num { font-size: clamp(96px, 14vw, 140px); } } /* Mobil — jedna karta pod druhou (2 → 1). Číslo o něco menší, aby nepřesáhlo šířku karty na úzkých displejích. */ @media (max-width: 720px) { body.ldc-home .ldc-lux-packages--v2 .ldc-lux-packages__grid { grid-template-columns: 1fr; gap: 18px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg { padding: 32px 24px 28px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__num { font-size: clamp(88px, 28vw, 132px); top: 10px; left: 18px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__head { margin-top: 60px; } body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__name { font-size: clamp(30px, 8vw, 38px); } } /* Snížená motion — žádné posuny ani zvětšování čísla na hover. */ @media (prefers-reduced-motion: reduce) { body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__num, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__name, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__name::after, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__motif, body.ldc-home .ldc-lux-packages--v2 .ldc-lux-pkg__cta-arrow { transition: none !important; transform: none !important; } } /* ════════════════════════════════════════════════════════════════════ 9) BALÍČKY DETAIL PAGE — scoped only ──────────────────────────────────────────────────────────────────── Vizuální sjednocení sekce Balíčky na stránce /balicky se stylem z homepage. VŠECHNA pravidla v tomto bloku jsou scopována přes wrapper třídu `.ldc-balicky-pkgs`, kterou má pouze

na stránce /balicky (přidaná v ldc_frontend_balicky_body.tpl). • Homepage NEMÁ tuto třídu — homepage zůstává beze změny. • Body class `body.ldc-home` ani `.ldc-lux-packages--v2 .ldc-lux-pkg` bez .ldc-balicky-pkgs prefixu zde NEPŘEPISUJEME. • Plný osmibodový seznam i eyebrow „tag" na /balicky zůstávají viditelné — texty klienta jsou kompletně zachovány. ──────────────────────────────────────────────────────────────────── */ /* Vzdušnější padding karty + prostor nahoře pro velké dekorativní číslo. Hodnoty jsou kalibrovány na delší seznamy (až 8 bodů). */ .ldc-balicky-pkgs .ldc-lux-pkg { padding: clamp(40px, 3.6vw, 56px) clamp(30px, 2.8vw, 44px) clamp(32px, 3vw, 40px); } /* — Architektonický line-art motiv — stejný SVG jako homepage, decentní vrstva v pozadí karty (~6 % opacity). Stejný motiv u všech tří karet — žádné upřednostnění. */ .ldc-balicky-pkgs .ldc-lux-pkg__motif { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .06; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center 60%; background-size: 92% auto; transition: opacity .55s ease; } .ldc-balicky-pkgs .ldc-lux-pkg:hover .ldc-balicky-pkg__motif, .ldc-balicky-pkgs .ldc-lux-pkg:focus-within .ldc-balicky-pkg__motif { opacity: .085; } /* Doplňkový jemný gradient (papyrus/inkoust). Existující v2 styly pro kartu používají ::before (hover glow), my si necháme ::after pro statickou vrstvu — nedochází ke kolizi. */ .ldc-balicky-pkgs .ldc-lux-pkg::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(140% 80% at 100% 0%, rgba(212, 175, 137, .05) 0%, rgba(212, 175, 137, 0) 55%), linear-gradient(180deg, rgba(248, 238, 240, .015) 0%, rgba(248, 238, 240, 0) 60%); } /* Obsah karty musí ležet nad motivy. */ .ldc-balicky-pkgs .ldc-lux-pkg > * { position: relative; z-index: 1; } /* — Velké dekorativní číslo 01 / 02 / 03 (serif, semi-transparent) — */ .ldc-balicky-pkgs .ldc-balicky-pkg__num { position: absolute; top: clamp(14px, 1.6vw, 24px); left: clamp(22px, 2.4vw, 34px); font-family: 'Cormorant Garamond', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(112px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.02em; color: var(--ldc-bordeaux-50); opacity: .085; pointer-events: none; user-select: none; z-index: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); max-width: 80%; overflow: hidden; white-space: nowrap; } .ldc-balicky-pkgs .ldc-lux-pkg:hover .ldc-balicky-pkg__num, .ldc-balicky-pkgs .ldc-lux-pkg:focus-within .ldc-balicky-pkg__num { opacity: .12; transform: translateY(-2px); } /* Header karty posunut níže, aby velké číslo mělo prostor a eyebrow „tag" + serif název pod ním vynikly. */ .ldc-balicky-pkgs .ldc-lux-pkg__head { margin-top: clamp(48px, 5.2vw, 84px); } /* Eyebrow „tag" zůstává viditelný (na rozdíl od homepage) — drobně posunutý vůči defaultu, aby ladil s novým rozložením hlavičky. */ .ldc-balicky-pkgs .ldc-lux-pkg__tag { display: inline-block; } /* — Elegantní serif název balíčku + zlatá hairline pod ním. */ .ldc-balicky-pkgs .ldc-lux-pkg__name { font-family: 'Cormorant Garamond', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: 0.02em; line-height: 1.05; color: var(--ldc-bordeaux-50); position: relative; padding-bottom: 14px; margin-bottom: 4px; } .ldc-balicky-pkgs .ldc-lux-pkg__name::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 1px; background: rgba(212, 175, 137, .55); transition: width .45s cubic-bezier(.16,1,.3,1); } .ldc-balicky-pkgs .ldc-lux-pkg:hover .ldc-lux-pkg__name { letter-spacing: 0.03em; } .ldc-balicky-pkgs .ldc-lux-pkg:hover .ldc-lux-pkg__name::after { width: 88px; } /* — Rovnocennost karet — potlačení starého PLUS tintu i jakéhokoli featured/recommended zvýraznění. Všechny tři karty mají identické pozadí a hover. */ .ldc-balicky-pkgs .ldc-lux-pkg[data-pkg="start"], .ldc-balicky-pkgs .ldc-lux-pkg[data-pkg="plus"], .ldc-balicky-pkgs .ldc-lux-pkg[data-pkg="premium"] { background: rgba(248, 238, 240, .015); } /* — Seznam výhod: čisté položky s decentní zlatou tečkou. Padding o něco těsnější než homepage (11px → cards s 8 body nejsou extrémně vysoké). */ .ldc-balicky-pkgs .ldc-lux-pkg__list li { padding: 11px 0 11px 18px; } .ldc-balicky-pkgs .ldc-lux-pkg__list li::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(212, 175, 137, .65); transform: translateY(-50%); } /* — CTA s šipkou — animované posunutí při hoveru. */ .ldc-balicky-pkgs .ldc-lux-pkg__cta { display: inline-flex; align-items: center; gap: 10px; } .ldc-balicky-pkgs .ldc-balicky-pkg__cta-arrow { display: inline-block; font-size: 1.05em; line-height: 1; transform: translateX(0); transition: transform .35s cubic-bezier(.16,1,.3,1); } .ldc-balicky-pkgs .ldc-lux-pkg__cta:hover .ldc-balicky-pkg__cta-arrow, .ldc-balicky-pkgs .ldc-lux-pkg__cta:focus-visible .ldc-balicky-pkg__cta-arrow { transform: translateX(4px); } /* Vzdušnější karta jako celek. */ .ldc-balicky-pkgs .ldc-lux-pkg__list { margin-bottom: clamp(20px, 2vw, 28px); } /* ── Responzivita /balicky ───────────────────────────────────────── Existující .ldc-lux-packages--v2 přepíná z 3 sloupců na 1 sloupec při ≤ 1024px (viz výše v souboru). Doplňujeme jen úpravu velikosti dekorativního čísla na menších obrazovkách, aby nikdy nepřeteklo přes okraj karty. */ @media (max-width: 1100px) and (min-width: 721px) { .ldc-balicky-pkgs .ldc-balicky-pkg__num { font-size: clamp(96px, 14vw, 140px); } } @media (max-width: 720px) { .ldc-balicky-pkgs .ldc-lux-pkg { padding: 32px 24px 28px; } .ldc-balicky-pkgs .ldc-balicky-pkg__num { font-size: clamp(88px, 28vw, 132px); top: 10px; left: 18px; } .ldc-balicky-pkgs .ldc-lux-pkg__head { margin-top: 60px; } .ldc-balicky-pkgs .ldc-lux-pkg__name { font-size: clamp(30px, 8vw, 38px); } } /* — Snížená motion (respektujeme `prefers-reduced-motion`). */ @media (prefers-reduced-motion: reduce) { .ldc-balicky-pkgs .ldc-balicky-pkg__num, .ldc-balicky-pkgs .ldc-lux-pkg__name, .ldc-balicky-pkgs .ldc-lux-pkg__name::after, .ldc-balicky-pkgs .ldc-balicky-pkg__motif, .ldc-balicky-pkgs .ldc-balicky-pkg__cta-arrow { transition: none !important; transform: none !important; } } /* ════════════════════════════════════════════════════════════════════════ PREHLED PARTNERU — static page (/prehled-partneru) ──────────────────────────────────────────────────────────────────────── Plně statická prezentační stránka „Přehled partnerů". Veškerý styling je scope-nutý přes wrapper `.ldc-partners-overview` a fullscreen overlay `#ldc-partner-detail`, takže nemůže ovlivnit homepage, /balicky, /partneri ani službový drawer. Vychází z bordeaux palety a typografie zbytku LDC webu — žádné výrazné barvy navíc. ════════════════════════════════════════════════════════════════════════ */ .ldc-partners-overview__section { padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 8vw, 112px); background: var(--ldc-bordeaux-900, #2e0c13); color: var(--ldc-bordeaux-50, #f8eef0); } .ldc-partners-overview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); margin-top: clamp(36px, 5vw, 64px); } @media (max-width: 1024px) { .ldc-partners-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ldc-partners-overview__grid { grid-template-columns: 1fr; gap: 18px; } } /* PARTNER CARD — bordeaux tmavá kartička s jemným rámečkem. Stejný editorial vibe jako .ldc-lux-pkg / service tile, jen klidnější. */ .ldc-partner-card { position: relative; display: flex; flex-direction: column; background: rgba(248, 238, 240, .03); border: 1px solid rgba(248, 238, 240, .14); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 40px); min-height: 320px; cursor: pointer; transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease; overflow: hidden; text-align: left; font: inherit; color: inherit; } .ldc-partner-card:hover, .ldc-partner-card:focus-within { background: rgba(248, 238, 240, .06); border-color: rgba(248, 238, 240, .28); transform: translateY(-2px); } /* LOGO area — textový placeholder loga, prémiový letterspacing. Když budou k dispozici reálná SVG/PNG loga, stačí vyměnit obsah `.ldc-partner-card__logo` za a styl pojme automaticky. */ .ldc-partner-card__logo { display: flex; align-items: center; justify-content: center; height: clamp(72px, 10vw, 120px); margin-bottom: clamp(20px, 2.5vw, 36px); border-bottom: 1px solid rgba(248, 238, 240, .12); padding-bottom: clamp(20px, 2.5vw, 32px); } .ldc-partner-card__logo-text { font-family: var(--ldc-font-display, "PP Editorial New", serif); font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 238, 240, .92); text-align: center; line-height: 1.1; } .ldc-partner-card__logo img { max-width: 70%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; } .ldc-partner-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; } .ldc-partner-card__category { font-family: var(--ldc-font, "Inter", sans-serif); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(248, 238, 240, .55); } .ldc-partner-card__name { font-family: var(--ldc-font-display, "PP Editorial New", serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ldc-bordeaux-50, #f8eef0); margin: 0 0 16px; } .ldc-partner-card__cta { margin-top: auto; align-self: flex-start; background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; /* .ldc-clean-link-cta poskytne vlastní typografii a šipku. Tady jen zajistíme, aby