:root{ --bg: #FADCEB; --bg-soft: #FCEAF0; --bg-deep: #F4C9DD; --ink: #D52E35; --ink-soft: #B82530; --ink-deep: #8F1D26; --ink-muted: rgba(213,46,53,.55); --ink-faint: rgba(213,46,53,.18); --line: rgba(213,46,53,.18); --hairline: rgba(213,46,53,.12); --cream: #FAF6F1; --portrait-yellow: #F2D02C; --portrait-blue: #6B8FB8; --portrait-pink: #E89BAA; --portrait-mauve: #C9A8C7; --portrait-peach: #F0B89C; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"} /* Trilingual chrome strings — only the active lang shows. picks one; CSS hides the rest. Used on detail pages where header swaps language client-side. */ [data-lang-cs],[data-lang-vi],[data-lang-en]{display:none} html[data-lang="cs"] [data-lang-cs], html:not([data-lang]) [data-lang-cs], html[data-lang="vi"] [data-lang-vi], html[data-lang="en"] [data-lang-en]{display:inline} html{scroll-behavior:smooth} /* iOS Safari ignores body{overflow-x:hidden} alone — needs the cap on html. We use `clip` because it does NOT create a scroll container, so the sticky header keeps working on desktop. A `body{overflow-x:hidden}` fallback was tried, but it forces overflow-y to compute as auto on body (per spec when hidden + visible mix on the two axes), which silently breaks sticky. `clip` covers Safari 16+ / Chrome 90+ / Firefox 81+ (~96% globally). */ html,body{overflow-x:clip} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} img{display:block;max-width:100%} /* Accessibility utility — visually hidden but still in the document outline. Used for the hero

on the homepage where the visual heading role is carried by the SVG logotype. The element stays in the a11y tree and the DOM (so screen readers + crawlers see the text), but takes up zero visual space. clip+clip-path covers older + newer browsers. / .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } / ===== Wordmark / Logo ===== / .wordmark{display:inline-flex;align-items:center;height:32px} .wordmark img{height:32px;width:auto;display:block} / ===== Header ===== / .header{ position:sticky;top:0;z-index:50; background:rgba(250,220,235,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); } .header-inner{ max-width:1280px;margin-inline:auto; padding:18px clamp(16px, 4vw, 32px); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px; } .header-right .btn{white-space:nowrap} .nav{display:flex;gap:28px;justify-content:center;align-items:center} .nav a{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink);position:relative;padding:6px 0} .nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink)} .nav a:hover{color:var(--ink-soft)} .header-right{display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:nowrap;white-space:nowrap} / Lang dropdown (with flags) / .lang-drop{position:relative} / Unified 32px height + sharp edges + transparent border that becomes visible on hover. Adds a 2-letter code (CZ/VI/EN) next to the flag. / .lang-drop-trigger{ display:inline-flex;align-items:center;gap:8px; height:32px;padding:0 12px; color:var(--ink); border:1px solid var(--ink-faint);border-radius:0; background:transparent; font-family:"Inter",sans-serif; font-size:12px;font-weight:600;letter-spacing:.04em; text-transform:uppercase; transition:border-color .15s ease,background .15s ease; cursor:pointer; } .lang-drop-trigger:hover,.lang-drop-trigger:focus-visible{border-color:var(--ink)} .lang-drop-trigger .flag,.lang-drop-menu .flag{width:18px;height:12px;display:block;border:1px solid rgba(0,0,0,.08);border-radius:1px;flex-shrink:0;overflow:hidden;object-fit:cover} .lang-drop-trigger .lang-code{font-weight:600;line-height:1} .lang-drop-trigger .caret{transition:transform .25s ease;color:var(--ink-soft);opacity:.7} .lang-drop.open .lang-drop-trigger .caret{transform:rotate(180deg)} .lang-drop-menu{position:absolute;top:calc(100% + 6px);right:0;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--ink-faint);min-width:160px;z-index:40;box-shadow:0 8px 24px rgba(213,46,53,.08);overflow:hidden} .lang-drop-menu[hidden]{display:none} .lang-drop-menu button{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);text-align:left;background:transparent;border:none;cursor:pointer;transition:background .2s,color .2s;font-family:"Inter",sans-serif;text-transform:none} .lang-drop-menu button:hover{background:rgba(213,46,53,.06)} .lang-drop-menu .lang-name{white-space:nowrap} / Hamburger (mobile) / .hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:36px;height:36px;gap:5px;background:transparent;border:none;cursor:pointer;padding:0} .hamburger span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease} .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mobile-menu{display:none;flex-direction:column;gap:0;padding:18px 32px 28px;border-top:1px solid var(--hairline);background:var(--bg)} .mobile-menu[hidden]{display:none !important} .mobile-menu a{padding:14px 0;font-family:"Inter Tight";font-weight:800;font-size:22px;letter-spacing:-.015em;color:var(--ink);border-bottom:1px solid var(--hairline)} .mobile-menu a.btn{margin-top:18px;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-family:"Inter",sans-serif;border-bottom:1.5px solid var(--ink);padding:14px 18px;justify-content:center} .mobile-menu a.btn:hover{background:var(--ink-soft);color:var(--bg)} / ===== Buttons ===== / .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 22px; font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; border:1.5px solid var(--ink); background:var(--ink);color:var(--bg); transition:background .25s ease, color .25s ease, transform .25s ease; cursor:pointer; } .btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)} .btn.outline{background:transparent;color:var(--ink)} .btn.outline:hover{background:var(--ink);color:var(--bg)} .btn.sm{padding:10px 16px;font-size:11px} / Header CTA — primary (filled) variant matching the brand CTAs used on the hero and elsewhere. Height pinned to 32px so it aligns with the lang-drop flag trigger next to it; only the height/padding/font are overridden — base .btn supplies the filled background+color+border. / .header-cta.btn.sm{ height:32px;padding:0 16px; font-size:11px;font-weight:700;letter-spacing:.08em; border-radius:0; } .header-cta .arrow{transition:transform .2s ease} .header-cta:hover .arrow{transform:translateX(2px)} .btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink);padding:4px 0} .btn-ghost:hover{color:var(--ink-soft);border-color:var(--ink-soft)} / ===== Layout ===== Modern marketing-page wrapper: 1280px ceiling (Vercel/Linear-style), fluid horizontal padding via clamp() so the content doesn't feel cramped on small phones (16px) but breathes on tablet/desktop (up to 32px). / .container{ max-width:1280px; width:100%; margin-inline:auto; padding-inline:clamp(16px, 4vw, 32px); } / Single source of truth for non-hero / non-footer section vertical rhythm. Tablet/mobile breakpoints further down scale it 80 → 56. / .section{padding:120px 0;position:relative} / ===== HERO ===== Note: hero uses .container so horizontal padding comes from there. Use padding-top/bottom (not shorthand) so we don't wipe container's `padding: 0 32px` (or 0 20px on mobile). / .hero{ / svh (small viewport height) is stable across iOS Safari URL-bar show/hide so the hero doesn't visibly "zoom" when the user scrolls. vh kept as fallback for browsers older than iOS Safari 15.4. / min-height:clamp(560px, 82vh, 880px); min-height:clamp(560px, 82svh, 880px); padding-block:48px 72px; / full viewport width — the .container class now sits on .hero-inner so the bloom (.hero::before) covers the entire hero band and the right photo can translate past the inner content column without being clipped at 1280. / position:relative; overflow:hidden; } .hero-inner{position:relative;z-index:1} / Modern hero bloom — soft atmospheric mesh in the brand pink palette. Two radial gradients: a warm white-pink glow behind the logotype on the left, a deeper pink bloom under the photo cluster on the right. Sits in ::before so the .hero-grid content can declare its own z-index above. / .hero::before{ content:""; position:absolute;inset:0; background: radial-gradient(45% 65% at 18% 22%, rgba(255,255,255,.55), transparent 62%), radial-gradient(55% 70% at 84% 78%, var(--bg-deep), transparent 58%); pointer-events:none; z-index:0; } .hero > {position:relative;z-index:1} .hero-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:stretch; min-height:inherit; } .hero-left{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(20px, 2.4vw, 32px);height:auto;min-height:0} .hero-logotype{display:block;width:100%;max-width:clamp(280px, 28vw, 480px);align-self:flex-start} .hero-logotype img{width:100%;height:auto;display:block} .hero-claim{ font-family:"Inter",sans-serif; font-weight:500; font-size:clamp(16px,1.4vw,19px); line-height:1.4; max-width:460px; color:var(--ink); } .hero-claim em{font-style:italic;font-weight:400} .hero-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:32px;margin-top:auto} .hero-meta{display:flex;flex-direction:column;gap:6px;border-left:1.5px solid var(--ink);padding-left:18px} .hero-meta .date{font-family:"Inter Tight";font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.05} .hero-meta .place{font-size:14px;font-weight:500} .hero-meta .hours{font-size:12px;color:var(--ink-muted);letter-spacing:.05em} /* Weekday + weekend hours sit inline with a brand middle-dot separator between them ("Po–Pá: 13:00–20:00 · So–Ne: 11:00–18:00") — same idiom as heroPlace's "Hala 11 · Praha". The pseudo-element only emits a dot between siblings, so a single .hours span renders cleanly without a leading dot. / .hero-meta .hero-hours{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0} .hero-meta .hero-hours .hours + .hours::before{ content:"·";color:var(--ink-muted);margin:0 6px; } .hero-cta{display:flex;flex-wrap:wrap;gap:12px} / Hero right — gradient stack with paint blocks. min/max-height tuned so the right column doesn't push the hero taller than the left column needs, which on shorter laptops (1366×768, 1280×800) used to bury the CTA below the fold. / / Fixed height that matches .paint-stack — decouples the photo cluster from viewport-height fluctuations (svh/vh stretching of the column made the photos appear to resize on tall vs short browser windows). / .hero-right{position:relative;height:540px;display:flex;flex-direction:column;justify-content:flex-start;align-self:start} / Stack uses an explicit pixel height so the cluster's vertical layout stays identical regardless of viewport height (svh-driven .hero-right max-height fluctuations no longer reach the cluster). 500px fits the tallest cluster shape (yellow 4:5 at clamp-max + pink ending at ~498). / .paint-stack{position:relative;width:100%;height:540px} / Default position; tablet/phone media queries reflow this. Was inline-styled on each .parallax-wrap; moved here so media queries can override. / / Each wrap fills the entire stack via inset:0 so the parallax JS has a stable origin to translate from. That makes wraps overlap each other — without pointer-events:none the topmost wrap (pink's) would swallow hover events meant for yellow / blue. The actual .paint-block photo below re-enables pointer-events for the visible portrait area only. / .parallax-wrap{position:absolute;inset:0;will-change:transform;pointer-events:none} .parallax-wrap > .paint-block{pointer-events:auto} / Generic .paint-block — used in hero, story cards (homepage stories preview, /pribehy/ index) and on detail pages. Keep the original editorial border + overflow-hidden so non-hero usages stay unchanged. / .paint-block{ position:absolute; overflow:hidden; / Soft brand-tinted shadow — same two-layer treatment as the hero paint-blocks (rgba 154,41,60 = vínový alpha). No border. / box-shadow: 0 18px 48px -16px rgba(154,41,60,.10), 0 4px 14px -4px rgba(154,41,60,.05); } .paint-block::after{ content:"";position:absolute;inset:0; background:linear-gradient(170deg,rgba(255,255,255,.18),rgba(213,46,53,.05) 60%,rgba(213,46,53,.18)); mix-blend-mode:overlay;pointer-events:none;z-index:2; } .paint-block img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:1} .paint-block:has(img)::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18));mix-blend-mode:normal} .paint-block .corner-num{position:absolute;right:14px;top:14px;font-family:"Inter Tight";font-weight:900;font-size:14px;color:rgba(255,255,255,.8);z-index:3} .paint-block .corner-meta{position:absolute;left:14px;bottom:14px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.18);z-index:3} / Generic gradient fallbacks — apply everywhere paint-{tone} is used (hero, story cards, detail page paint frames). Hero overrides positioning and adds rotation/animation in the .hero-right scope below. / .paint-yellow{background:radial-gradient(120% 90% at 30% 20%,#F8E07A 0%,#F2D02C 50%,#C9A41E 100%)} .paint-blue{background:radial-gradient(120% 100% at 70% 30%,#A9C4DE 0%,#6B8FB8 55%,#3D5C82 100%)} .paint-pink{background:radial-gradient(120% 100% at 30% 30%,#F6C5CF 0%,#E89BAA 55%,#B26674 100%)} .paint-mauve{background:radial-gradient(120% 100% at 70% 30%,#E2C7E0 0%,#C9A8C7 50%,#8E6E8C 100%)} .paint-peach{background:radial-gradient(120% 100% at 30% 30%,#F8D7C2 0%,#F0B89C 55%,#B07F62 100%)} / ─── Hero paint blocks — scoped exclusively to .hero-right ─── Three equal-size photos in a fan layout: outer two rotated ±12°, middle one upright and on top. Soft brand-tinted shadows, gentle float, hover lift that preserves rotation. Tablet (768–1023) reflows into a 3-col strip; mobile (<768) hides .hero-right. / .hero-right .paint-block{ border:none; aspect-ratio:4 / 5; width:clamp(200px,20vw,280px); / yellow + pink (middle has its own width override) / / Two-layer brand-tinted shadow — vínový alpha, not pure black, so the blocks levitate softly against the pink page bg. / box-shadow: 0 18px 48px -16px rgba(154,41,60,.10), 0 4px 14px -4px rgba(154,41,60,.05); transition:transform .7s cubic-bezier(.22,1,.36,1); } / Fan layout: middle sits a touch higher (top:60), outer pair drops to top:100 and pushes outward by ~55px past the stack edges via translateX on the transform — cleaner than negative `left:-55px` and lets the rotation compose into the same transform property. / .hero-right .paint-yellow{ top:124px;left:0; transform:translateX(-100px) rotate(-20deg); animation:lhng-float-a 14s ease-in-out infinite; } .hero-right .paint-blue{ / Width override so the upright middle visually matches the rotated outer pair's bounding-box height. At outer width 280 + rotation 20°, bbox h ≈ 280·sin(20) + 350·cos(20) ≈ 425; middle at width 340 (same 4/5 ratio) renders an equivalent 425-tall rectangle. clamp scales proportionally to outer's clamp so they stay matched across desktops. / width:clamp(240px,23vw,306px); / −10 % from 266-340 / top:80px;left:50%; transform:translateX(-50%); animation:lhng-float-b 12s ease-in-out infinite -3s; } / Each .parallax-wrap is its own stacking context (will-change:transform), so z-index applied to the inner .paint-block doesn't compete across siblings. Promote the middle wrap so paint-blue stays in front. / .hero-right .parallax-wrap:has(.paint-blue){z-index:3} .hero-right .paint-pink{ top:124px;right:0;left:auto; transform:translateX(100px) rotate(20deg); animation:lhng-float-c 16s ease-in-out infinite -5s; } / Hero photos don't react to hover — no lift, no z-index escalation, no animation pause. Float keyframes (gentle drift) keep running. / / Float keyframes use the standalone `translate` property so they compose cleanly with each block's `transform: rotate()` without overwriting it. / @keyframes lhng-float-a{0%,100%{translate:0 0}50%{translate:0 -3px}} @keyframes lhng-float-b{0%,100%{translate:0 0}50%{translate:0 -4px}} @keyframes lhng-float-c{0%,100%{translate:0 0}50%{translate:0 -2px}} @media (prefers-reduced-motion:reduce){ .hero-right .paint-block{animation:none} } / Hero scroll cue / .scroll-cue{ position:absolute;left:32px;bottom:32px;display:flex;align-items:center;gap:10px; font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted); } .scroll-cue::before{content:"";width:30px;height:1px;background:var(--ink-muted)} / ─── Hero responsive transitions (between desktop and mobile) ─── Stepped reduction of the outer translateX on yellow + pink so the right portrait stays inside the grid as viewport shrinks. Rotation stays at ±20°. Width clamp keeps shrinking all three proportionally. >1523px: ±100px (default desktop rule) 1430–1523px: ±50px 1103–1429px: ±10px 1102px and below: hide hero-right + scroll-cue, single-column hero. / @media (max-width: 1523px){ .hero-right .paint-yellow{ transform:translateX(-50px) rotate(-20deg); } .hero-right .paint-pink{ transform:translateX(50px) rotate(20deg); } } @media (max-width: 1429px){ .hero-right .paint-yellow{ transform:translateX(-10px) rotate(-20deg); } .hero-right .paint-pink{ transform:translateX(10px) rotate(20deg); } } @media (max-width: 1102px){ .hero-grid{grid-template-columns:1fr;gap:48px;min-height:auto} .hero-left{align-items:center;text-align:center} .hero-logotype{margin-inline:auto} .hero-claim{max-width:560px;margin-inline:auto;text-align:center} .hero-meta{ border-left:none;padding-left:0;align-items:center;text-align:center; margin:24px auto 0; } .hero-cta{justify-content:center} .hero-right{display:none} .scroll-cue{display:none} } / Narrow tablet: CTAs go full-width (stacked column) so the buttons feel touch-comfortable. ≤767 already does this in the phone block; this rule covers the 768-888 gap where the two side-by-side buttons start looking cramped. / @media (max-width: 888px){ .hero-cta{flex-direction:column;width:100%;max-width:380px;margin-inline:auto} .hero-cta .btn{width:100%;text-align:center;justify-content:center} } / Float deco (background "02" / "72") / .float-deco{ position:absolute; font-family:"Inter Tight";font-weight:900; color:rgba(213,46,53,.14); letter-spacing:-.04em;line-height:.9; font-style:italic; pointer-events:none;user-select:none;z-index:0; } / .hero .float-deco rule removed — hero no longer renders a float deco (replaced by the .hero::before mesh-gradient bloom above). / .float-deco-72{top:-8%;right:2%;font-size:clamp(280px,38vw,640px)} / About-section NG watermark — mirrors the "76" placement in stories preview but on the opposite side so the two sections don't echo. Class kept as -ng-about to disambiguate from the hero's NG deco. / .float-deco-ng-about{top:-6%;left:0;font-size:clamp(280px,36vw,600px)} .parallax-wrap{will-change:transform} / ===== Marquee ===== / .marquee{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); overflow:hidden; padding:18px 0; background:var(--bg-soft); } .marquee-track{display:flex;gap:60px;white-space:nowrap;animation:marquee 40s linear infinite;font-family:"Inter Tight";font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em;width:max-content} .marquee-track span.dot{display:inline-flex;align-items:center;color:var(--ink-soft)} .marquee-track span.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;margin-right:60px} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} } / ===== About ===== / / About section sits on the same soft pink as Team / Stories sections — keeps the brand rhythm. position:relative + overflow:hidden so the LH watermark below stays contained. / .about-section{background:var(--bg-soft);position:relative;overflow:hidden} .about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;position:relative;z-index:1} .about-title{font-family:"Inter Tight";font-weight:900;font-size:clamp(40px,6vw,80px);line-height:1.02;letter-spacing:-.025em;margin-bottom:32px;text-wrap:balance} .about-title em{font-style:italic;font-weight:600;letter-spacing:-.01em;padding-right:.04em} .about-body{max-width:520px;font-size:18px;line-height:1.55;font-weight:400;color:var(--ink)} .about-body p+p{margin-top:18px} .about-body strong{font-weight:600} .pull-quote-wrap{margin-top:100px} .pull-quote{ font-family:"Inter Tight"; font-weight:600; font-style:italic; font-size:clamp(24px,3vw,40px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); padding:36px 0; position:relative; } .pull-quote .attr{display:block;margin-top:24px;font-size:12px;font-weight:600;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)} / ===== Program ===== / / .program-section padding-top:0 override removed — uses standard .section rhythm now (120/80/56). / .program-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;gap:40px;flex-wrap:wrap} .program-intro{max-width:380px;font-size:16px;line-height:1.55;color:var(--ink-soft)} .section-label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);display:flex;align-items:center;gap:10px} .section-label::before{content:"";width:24px;height:1px;background:var(--ink-muted)} .section-label.center{justify-content:center} .section-title{font-family:"Inter Tight";font-weight:900;font-size:clamp(40px,6vw,92px);line-height:1.02;letter-spacing:-.03em;margin-top:20px;text-wrap:balance} .section-title em{font-style:italic;font-weight:700;letter-spacing:-.015em;padding-right:.03em} .program-list{border-top:1px solid var(--ink)} .program-row{ display:grid;grid-template-columns:160px 1.4fr 1fr auto; align-items:center;gap:32px; padding:32px 0; border-bottom:1px solid var(--ink); position:relative; transition:padding .3s ease, background .3s ease; } .program-row:hover{padding-left:18px;padding-right:18px;background:rgba(213,46,53,.04)} .program-row .pr-date{font-family:"Inter Tight";font-weight:800;font-size:18px;letter-spacing:-.01em} .program-row .pr-title{font-family:"Inter Tight";font-weight:800;font-size:clamp(24px,3vw,38px);letter-spacing:-.025em;line-height:1} .program-row .pr-desc{font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:360px} .program-row .pr-cta{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer} .program-row .pr-cta .arrow{transition:transform .3s ease} .program-row:hover .pr-cta .arrow{transform:translateX(6px)} / ===== Stories preview ===== / .stories-preview{background:var(--bg-soft);position:relative;overflow:hidden} .stories-preview-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;gap:40px;flex-wrap:wrap} .stories-preview-aside{max-width:420px} .stories-preview-aside p{font-size:17px;line-height:1.5;color:var(--ink-soft);margin-bottom:24px} / stories-preview .section-title margin override removed — uses base 20px / .stories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .story-card{cursor:pointer;display:block;text-decoration:none;color:inherit} .story-thumb{ position:relative;width:100%;aspect-ratio:4/5; overflow:hidden; / Same shadow language as .paint-block / hero photos. No border. / box-shadow: 0 18px 48px -16px rgba(154,41,60,.10), 0 4px 14px -4px rgba(154,41,60,.05); transition:transform .4s ease, box-shadow .4s ease; } .story-card:hover .story-thumb{ box-shadow: 0 24px 60px -16px rgba(154,41,60,.16), 0 6px 18px -4px rgba(154,41,60,.08); } .story-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:1} .story-thumb::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(213,46,53,.4) 100%); opacity:0;transition:opacity .35s ease;z-index:2; } .story-card:hover .story-thumb{transform:translateY(-4px)} .story-card:hover .story-thumb::after{opacity:1} .story-thumb .num-overlay{ position:absolute;left:14px;top:14px; font-family:"Inter Tight";font-weight:900;font-size:13px;color:rgba(255,255,255,.85); letter-spacing:.05em;z-index:3; } .story-thumb .read-overlay{ position:absolute;left:14px;bottom:14px; font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff; opacity:0;transition:opacity .35s ease;z-index:3; } .story-card:hover .story-thumb .read-overlay{opacity:1} .story-meta{padding-top:14px;display:flex;flex-direction:column;gap:4px} .story-meta .name{font-family:"Inter Tight";font-weight:800;font-size:18px;letter-spacing:-.015em} .story-meta .role{font-size:13px;color:var(--ink-muted)} / ===== Journey timeline ===== / / .journey now uses .section base padding; only its own non-padding rules stay below. / .journey-head{text-align:center;margin-bottom:60px} .timeline{position:relative;max-width:1100px;margin:0 auto;padding-left:48px;border-left:1.5px solid var(--ink)} .tl-item{position:relative;padding:36px 0 36px 32px;border-bottom:1px dashed var(--line)} .tl-item:last-child{border-bottom:none} .tl-item::before{ content:"";position:absolute;left:-48.75px;top:42px;width:14px;height:14px; transform:translateX(-50%);box-sizing:border-box; background:var(--bg);border:2px solid var(--ink);border-radius:50%; } .tl-item.current::before{background:var(--ink)} .tl-item.current{background:linear-gradient(90deg,rgba(213,46,53,.04),transparent 60%)} .tl-year{font-family:"Inter Tight";font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--ink-muted);margin-bottom:8px;text-transform:uppercase} .tl-title{font-family:"Inter Tight";font-weight:900;font-size:clamp(24px,3vw,40px);letter-spacing:-.025em;line-height:1.05;margin-bottom:8px} .tl-desc{font-size:15px;color:var(--ink-soft);line-height:1.55;max-width:620px} .tl-tag{display:inline-block;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);padding:4px 10px} .tl-tag.live{background:var(--ink);color:var(--bg)} / ===== Team ===== / .team-section{background:var(--bg-soft)} / Outer grid: stacked Authors+Editor on the left (1fr), Realizace v Praze on the right (2fr) with an internal 2-col × 3-row grid for the 6 entries. / .team-grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;margin-top:60px;align-items:start} .team-col-stack{display:flex;flex-direction:column;gap:48px} / Lighter editorial eyebrow for category labels — was Inter Tight 800 14px under the brand display family; tuned to 12px Inter 600 to read as a quieter section signpost behind the section title above. / .team-col h3{font-family:"Inter",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.6;margin-bottom:18px} .team-col ul{list-style:none} .team-col li{font-family:"Inter",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1.2;color:var(--ink)} .team-col li span{display:block;font-family:"Inter";font-weight:400;font-size:13px;color:var(--ink-muted);letter-spacing:0;margin-top:4px} / Unified inter-entry rhythm — 24px gap between rows in both columns. Previously Authors used `padding:8px 0` per li (sum 16px between entries) while Prague used grid row-gap 24px → visible inconsistency. Now both columns share the same gap model: flex-gap for Authors, grid row-gap for Prague (same value, same start-from-h3 alignment, no leading padding). / .team-col-authors ul{display:flex;flex-direction:column;gap:24px} / Production internal grid — 2 cols × 3 rows. / .team-prague-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 48px} / ===== Partners ===== / .partners-tier{margin-top:48px} .partners-tier h4{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:24px} .partners-row{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)} .partner-cell{ flex:1 1 200px;min-height:100px; display:flex;align-items:center;justify-content:center; border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline); font-family:"Inter Tight";font-weight:700;font-size:14px;letter-spacing:-.005em; color:var(--ink);padding:18px;text-align:center; transition:background .3s ease; } .partner-cell:hover{background:rgba(213,46,53,.04)} / Partners with an external `url` are wrapped in . display:contents keeps the anchor transparent to the flex layout — the inner .partner-cell stays the flex item with its tier-specific sizing. / .partner-link{display:contents;color:inherit} .partner-link .partner-cell{cursor:pointer} .partner-link:focus-visible .partner-cell{outline:2px solid var(--ink);outline-offset:-2px} / Logos render in their original brand colours (no filter / tint). Per-tier max-height keeps the row visually unified. / .partner-cell-logo{padding:18px 24px} .partner-cell-logo img{max-width:100%;max-height:44px;width:auto;height:auto;display:block;object-fit:contain} .partners-tier-general .partner-cell-logo img{max-height:80px} .partners-tier-gold .partner-cell-logo img{max-height:60px} .partners-tier-silver .partner-cell-logo img{max-height:48px} / 3-level Praha hierarchy. The badge sits above the row as a small label and per-tier modifier classes scale the cell min-height and font-size so visual weight tracks tier importance. / .partners-tier-row{margin-top:32px} .partners-tier-row:first-of-type{margin-top:0} .partners-tier-badge{display:inline-block;font-family:"Inter",sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.7;padding:4px 8px;border:1px solid var(--ink-faint);margin-bottom:12px} .partners-tier-badge-support{opacity:.45;border-color:transparent;padding:0;letter-spacing:.16em;font-size:11px;margin-top:48px;margin-bottom:16px} / Generální — single big cell, large font / generous min-height / .partners-tier-general .partner-cell{flex:1 1 100%;min-height:140px;font-size:22px} / Gold — medium cells (1 here, can take more later); Silver smaller still / .partners-tier-gold .partner-cell{flex:1 1 320px;min-height:110px;font-size:18px} .partners-tier-silver .partner-cell{flex:1 1 240px;min-height:90px;font-size:15px} / S podporou — quietest, smaller cells, normal hairline grid / .partners-tier-support .partner-cell{min-height:80px;font-size:13px;font-weight:600} / ===== Visit ===== / .visit{background:var(--bg-soft)} .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .visit-info dl{display:grid;grid-template-columns:160px 1fr;gap:18px 24px;margin-top:32px} .visit-info dt{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);padding-top:6px} .visit-info dd{font-family:"Inter Tight";font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.4} .visit-info dd small{display:block;font-family:"Inter";font-weight:400;font-size:13px;color:var(--ink-soft);letter-spacing:0;margin-top:2px} .visit-cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap} / Google Maps embed — square aspect matching the visit-info column. Frame keeps the editorial 1.5px brand border; the iframe fills the inside. Earlier this slot held a hand-drawn CSS illustration (pin, label, roads, corner coordinates) — replaced with the real map for utility. / .map-frame{ position:relative;aspect-ratio:1/1; border:1.5px solid var(--ink); overflow:hidden; background:var(--bg); } .map-frame iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; } / ===== Footer ===== / .footer{padding:80px 0 32px;border-top:1px solid var(--ink)} / Equal 4-column grid — compact LH NG mark sits as a quiet signature next to the three text columns instead of dominating with a full wordmark. / / 2-col footer: left = full hero logo + social icons, right = full nav. Logo height clamped so it scales nicely but never goes "obří". / .footer-top{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start} .footer-mark{display:flex;flex-direction:column;gap:28px;align-items:flex-start} .footer-mark .footer-logo{display:inline-block;line-height:0} .footer-mark .footer-logo img{height:clamp(56px,6vw,92px);width:auto;display:block} / Square icon-buttons in the brand language (1.5px ink border + filled hover swap matching .header-cta). Keeps the social row visually anchored to the logo block. / .footer-social{display:flex;gap:12px} .footer-social-link{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px; border:1.5px solid var(--ink); color:var(--ink); transition:background .2s ease,color .2s ease; } .footer-social-link:hover,.footer-social-link:focus-visible{ background:var(--ink);color:var(--bg); } .footer-col h5{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:18px} .footer-col ul{list-style:none} .footer-col li{padding:6px 0;font-size:14px;font-weight:500} .footer-col a:hover{color:var(--ink-soft)} / Nav col: two columns of links on wide footers so the list doesn't tower awkwardly past the logo block. Falls back to single column on mobile via the existing ≤767 footer-top:1fr rule. / .footer-col-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} .footer-bottom{margin-top:80px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)} / ===== Responsive ===== Breakpoints: ≥1024px → desktop (default rules above) 768–1023px → tablet (single-col hero, portraits in horizontal row) <768px → phone (single-col hero, portraits as compact 80% strip) / @media (max-width: 1023px){ / Header: hamburger replaces the inline nav. relative+z-index keeps the lang dropdown above the hero stacking context. / .header{position:relative;z-index:60} .header-inner{grid-template-columns:auto 1fr auto;padding:14px 20px;gap:16px} .nav{display:none} .header-cta{display:none} / CTA appears only inside the opened mobile menu / .hamburger{display:flex} .mobile-menu{display:flex} .mobile-menu[hidden]{display:none !important} / .container padding-inline is handled by base clamp() — no override here. / / Hero: single column, portraits flow below text content. / .hero-grid{grid-template-columns:1fr;gap:48px;min-height:auto} .hero-left{height:auto;min-height:auto} .hero-right{height:auto;min-height:0;max-height:none} .tl-item::before{left:-32.75px;top:32px;width:14px;height:14px;transform:translateX(-50%)} .about-grid{grid-template-columns:1fr;gap:40px} .program-row{grid-template-columns:1fr;gap:8px;padding:24px 0} .program-row .pr-cta{margin-top:8px} .stories-grid{grid-template-columns:repeat(2,1fr)} / Tablet: outer grid stacks (left stack on top, prague below); production stays 2-col internally. / .team-grid{grid-template-columns:1fr;gap:48px} .visit-grid{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr 1fr;gap:32px} .section{padding:80px 0} .timeline{padding-left:32px} } / Old tablet 3-col hero strip removed — superseded by the ≤1102px rule above that hides .hero-right entirely. The page-wide ≤1023px breakpoint still handles header hamburger, section grids, etc. / / Phone — portraits hidden entirely (no overlap, no empty pink gap, saves ~600KB transfer because source only matches ≥768px). NG watermark replaces them as the sole decorative element behind the logo. Vertical rhythm is set by margins, not gaps, so it's predictable across content. / @media (max-width: 767px){ .header-inner{padding:12px 16px;gap:10px} .header-right{gap:10px} / Phone shows 6 preview cards (3 rows × 2 cols) instead of 8 — hide last two. / .stories-grid > .story-card:nth-child(n+7){display:none} / Floor lowered to 520 (was 620) so iPhone SE/360-Android don't get forced extra height. Padding tightened too. / / iOS Safari: svh stays stable when URL bar collapses on scroll (vh recalculates and visibly enlarges the hero). / .hero{min-height:clamp(520px,100vh,920px);min-height:clamp(520px,100svh,920px);padding-top:28px;padding-bottom:44px;overflow:hidden} .hero-grid{display:block;gap:0;min-height:auto} .hero-left{gap:0;align-items:center;text-align:center;position:relative;z-index:1} .hero-logotype{max-width:180px;margin-inline:auto;align-self:center;position:relative;z-index:1} .hero-claim{font-size:17px;line-height:1.5;max-width:100%;text-align:center;margin-top:32px} .hero-bottom{display:block;margin-top:0} / Editorial centered stack on mobile — date is the focal point, place is context, hours are subtle meta. Drop the desktop's border-left anchor (no grid context here) and center the whole block. / .hero-meta{ display:flex;flex-direction:column;align-items:center; text-align:center; border-left:none; padding-left:0;padding-right:0; padding-inline:16px; gap:0; margin:28px auto 0; max-width:100%; } .hero-meta .date{ font-family:"Inter",sans-serif; font-weight:700; font-size:clamp(26px,6.5vw,33px); line-height:1.05; letter-spacing:-.01em; color:var(--ink); } .hero-meta .place{ font-size:15.5px;font-weight:400; line-height:1.4; color:var(--ink); letter-spacing:0; margin-top:16px; } .hero-meta .hours{ font-size:13.5px;font-weight:400; line-height:1.4; color:var(--ink);opacity:.6; letter-spacing:0; margin-top:4px; } .hero-cta{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:28px} .hero-cta .btn{width:100%;text-align:center;justify-content:center;padding:18px 24px;font-size:13px;letter-spacing:.14em} / Portraits gone on mobile — source above doesn't match so the 1×1 placeholder is what would render; we hide the whole column. / .hero-right{display:none} / .hero .float-deco rule removed — hero NG deco no longer rendered. / .scroll-cue{display:none} / .journey mobile padding override removed — uses .section{padding:56 0} / .timeline{padding-left:24px;border-left-width:1px;max-width:100%} .tl-item{padding:24px 0 24px 16px} .tl-item::before{left:-24.5px;top:30px;width:10px;height:10px;border-width:1.5px;transform:translateX(-50%)} .tl-year{font-size:12px;margin-bottom:6px} .tl-title{font-size:24px;line-height:1.1;margin-bottom:6px} .tl-desc{font-size:14px;line-height:1.5} .tl-tag{font-size:9px;padding:3px 8px;margin-top:10px} / Mobile: production grid collapses to single column. / .team-prague-grid{grid-template-columns:1fr;gap:24px 0} / Footer keeps two columns side-by-side on phones (logo+social left, nav right) so the total height stays compact. Both columns are vertically centered so the logo's visual mass anchors mid-nav instead of floating against a tall list. Nav text right-aligns to give the right column a clean trailing edge symmetric with the flush-left logo. h5 eyebrow hidden — redundant in a footer context. / .footer-top{grid-template-columns:auto 1fr;gap:24px;align-items:center} .footer-mark{gap:18px} .footer-mark .footer-logo img{height:52px} .footer-social-link{width:38px;height:38px} .footer-col-nav h5{display:none} .footer-col-nav{text-align:right} .footer-col-nav ul{grid-template-columns:1fr;gap:0} .footer-col li{font-size:13px;padding:4px 0} / Footer-bottom: stack the copyright + "by mlaynee" so neither wraps against a tight phone width. / .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px} .section{padding:56px 0} } / Sub-iPhone-12 narrow phones (iPhone SE 375, small Android 360). Width-only — does NOT use max-height, which on iOS Safari would oscillate between matching/not-matching as the URL bar collapses on scroll, causing every property here to flip and reflow the hero. */ @media (max-width: 380px){ .hero-logotype{max-width:160px} .hero-meta .date{font-size:clamp(24px,6vw,28px)} }