/* ============================================================================ Studio Krása — Éditorial — v2 styles.css ---------------------------------------------------------------------------- A luminous, editorial beauty-atelier template. Signature motifs: arched imagery, drawn gold hairlines, oversized high-contrast serif with italic accents, soft light blooms, kinetic type. Motion is transform/opacity only, reduced-motion aware, and every element is fully visible without JS. THEME CONTRACT preserved: all themeable values are :root tokens consumed via var(); curated presets remap them on body[data-palette|accent|heading]. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS ---------------------------------------------------------------------------- */ :root { --bg: #f6efe7; --surface: #fbf7f1; --surface-2: #f0e7db; --surface-3: #e8dccd; --ink: #2b2521; --ink-soft: #5b5149; --muted: #8c8072; --line: rgba(43, 37, 33, 0.12); --line-strong: rgba(43, 37, 33, 0.22); --on-dark: #faf6f0; --accent: #c2a06b; --accent-deep: #a3824f; --accent-ink: #2b2521; --accent-tint: rgba(194, 160, 107, 0.14); --display-font: "Cormorant Garamond", "Hanken Grotesk", Georgia, serif; --body-font: "Mulish", "Hanken Grotesk", system-ui, -apple-system, sans-serif; --display-weight: 500; --display-spacing: -0.01em; --radius: 18px; --radius-lg: 28px; --radius-sm: 12px; --radius-pill: 999px; --arch-top: 48% 48% 0 0 / 62% 62% 0 0; /* doorway arch */ --shadow-sm: 0 2px 10px rgba(40, 30, 20, 0.06); --shadow: 0 14px 40px -18px rgba(40, 30, 20, 0.30); --shadow-lg: 0 40px 90px -40px rgba(40, 30, 20, 0.45); --maxw: 1320px; --gutter: clamp(20px, 5vw, 72px); --section-y: clamp(84px, 12vw, 184px); --header-h: 96px; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: 0.9s; color-scheme: light; } /* ---------------------------------------------------------------------------- 2. THEME PRESETS ---------------------------------------------------------------------------- */ body[data-palette="nude"] { --bg: #f6efe7; --surface: #fbf7f1; --surface-2: #f0e7db; --surface-3: #e8dccd; --ink: #2b2521; --ink-soft: #5b5149; --muted: #8c8072; --line: rgba(43,37,33,.12); --line-strong: rgba(43,37,33,.22); } body[data-palette="blush"] { --bg: #f7ebe9; --surface: #fdf5f4; --surface-2: #f3e0dd; --surface-3: #ecd2ce; --ink: #312523; --ink-soft: #6b524e; --muted: #9c8480; --line: rgba(49,37,35,.12); --line-strong: rgba(49,37,35,.22); } body[data-palette="sage"] { --bg: #eaeee6; --surface: #f5f8f1; --surface-2: #dde6d6; --surface-3: #d2dcca; --ink: #232a21; --ink-soft: #4c5648; --muted: #7c8676; --line: rgba(35,42,33,.12); --line-strong: rgba(35,42,33,.22); } body[data-palette="noir"] { --bg: #1b1918; --surface: #232120; --surface-2: #2c2927; --surface-3: #38332f; --ink: #f3ece2; --ink-soft: #cabfb0; --muted: #9a8f82; --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.22); --shadow-sm: 0 2px 12px rgba(0,0,0,.35); --shadow: 0 18px 50px -20px rgba(0,0,0,.65); --shadow-lg: 0 50px 100px -45px rgba(0,0,0,.8); color-scheme: dark; } body[data-palette="lavender"] { --bg: #ece7f0; --surface: #f6f2f9; --surface-2: #e0d8e8; --surface-3: #d6cce0; --ink: #272231; --ink-soft: #564c64; --muted: #877e96; --line: rgba(39,34,49,.12); --line-strong: rgba(39,34,49,.22); } body[data-accent="champagne"] { --accent: #c2a06b; --accent-deep: #a3824f; --accent-ink: #2b2521; --accent-tint: rgba(194,160,107,.14); } body[data-accent="rose"] { --accent: #cf9a8e; --accent-deep: #a8746a; --accent-ink: #2b2018; --accent-tint: rgba(207,154,142,.16); } body[data-accent="bronze"] { --accent: #b3895a; --accent-deep: #8c6840; --accent-ink: #241c12; --accent-tint: rgba(179,137,90,.15); } body[data-accent="mauve"] { --accent: #a98ba0; --accent-deep: #856a7c; --accent-ink: #241b21; --accent-tint: rgba(169,139,160,.16); } body[data-palette="noir"] { --accent-ink: #1b1918; } body[data-heading="serif"] { --display-font: "Cormorant Garamond", Georgia, serif; --display-weight: 500; --display-spacing: -0.005em; } body[data-heading="sans"] { --display-font: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 600; --display-spacing: -0.025em; } /* ---------------------------------------------------------------------------- 3. BASE / RESET / TYPE ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--body-font); background: var(--bg); color: var(--ink); line-height: 1.6; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .7s var(--ease), color .7s var(--ease); } /* film grain */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: .04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body[data-palette="noir"]::after { mix-blend-mode: screen; opacity: .055; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 1.02; text-wrap: balance; } em.it, .it { font-style: italic; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--radius-sm); z-index: 1000; transition: top .25s var(--ease); } .skip-link:focus { top: 16px; } /* ---------------------------------------------------------------------------- 3a. CUSTOM CURSOR (fine-pointer only) ---------------------------------------------------------------------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; will-change: transform, opacity; } .cursor-dot { width: 7px; height: 7px; background: var(--accent); } .cursor-ring { width: 40px; height: 40px; border: 1px solid var(--accent); transition: width .35s var(--ease), height .35s var(--ease), background-color .35s var(--ease), opacity .3s, border-color .35s; } .cursor-ring.is-hover { width: 64px; height: 64px; background: var(--accent-tint); border-color: transparent; } .cursor-ring.is-view { width: 92px; height: 92px; background: var(--accent); border-color: transparent; } .cursor-ring .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--body-font); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); opacity: 0; transition: opacity .3s; } .cursor-ring.is-view .label { opacity: 1; } html.has-cursor, html.has-cursor body { cursor: none; } html.has-cursor a, html.has-cursor button, html.has-cursor .svc-row, html.has-cursor [data-lightbox] { cursor: none; } html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; } /* ---------------------------------------------------------------------------- 3b. SCROLL PROGRESS ---------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; background: var(--accent); transform: scaleX(0); transform-origin: left; } /* ---------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES ---------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(64px, 9vw, 130px); } .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--body-font); font-size: 12px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-deep); } .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent); } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 34px; height: 1px; background: var(--accent); } .index-num { font-family: var(--display-font); font-weight: 500; font-style: italic; font-size: clamp(18px, 2vw, 24px); color: var(--accent-deep); letter-spacing: 0; } .lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); line-height: 1.7; max-width: 56ch; } /* drawn gold hairline */ .rule { height: 1px; background: var(--line); position: relative; overflow: visible; } .rule::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(1); transform-origin: left; } .section-head h2 { font-size: clamp(38px, 6vw, 78px); margin-top: 20px; line-height: .98; } .section-head--center { text-align: center; margin-inline: auto; max-width: 880px; } /* reveal mask wrapper for headings */ .mask { display: block; overflow: hidden; } .mask > * { display: block; } /* Buttons */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 34px; border-radius: var(--radius-pill); font-family: var(--body-font); font-size: 14.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; white-space: nowrap; will-change: transform; transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn .btn-arrow { transition: transform .45s var(--ease); } .btn:hover .btn-arrow { transform: translateX(5px); } .btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px -14px var(--accent-deep); } .btn--accent:hover { box-shadow: 0 22px 44px -16px var(--accent-deep); } .btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); background: var(--accent-tint); } .btn--outline-light { border: 1px solid rgba(255,255,255,.55); color: var(--on-dark); } .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.12); } .btn--lg { padding: 20px 40px; font-size: 15.5px; } .btn--block { width: 100%; } /* arched image frame */ .arch { position: relative; overflow: hidden; border-radius: var(--arch-top); transition: transform .5s var(--ease); transform-style: preserve-3d; } .arch img { width: 100%; height: 100%; object-fit: cover; display: block; } .arch--soft { border-radius: 200px 200px var(--radius-lg) var(--radius-lg); } /* ---------------------------------------------------------------------------- 4a. HEADER ---------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 150; height: var(--header-h); display: flex; align-items: center; transition: height .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .site-header.is-condensed { height: 70px; background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 1px 0 var(--line), var(--shadow-sm); } .brand { font-family: var(--display-font); font-weight: var(--display-weight); font-size: 27px; letter-spacing: .01em; display: inline-flex; align-items: baseline; gap: 2px; transition: font-size .5s var(--ease); } .is-condensed .brand { font-size: 23px; } .brand .brand-dot { color: var(--accent); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { position: relative; padding: 10px 16px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .3s var(--ease); } .nav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } .header-cta { display: flex; align-items: center; gap: 14px; } .drawer-cta { display: none; } .menu-toggle { display: none; width: 48px; height: 48px; border-radius: var(--radius-sm); align-items: center; justify-content: center; } .menu-toggle span { position: relative; width: 24px; height: 1.6px; background: var(--ink); display: block; transition: transform .45s var(--ease), opacity .3s; } .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 24px; height: 1.6px; background: var(--ink); transition: transform .45s var(--ease); } .menu-toggle span::before { top: -7px; } .menu-toggle span::after { top: 7px; } body.menu-open .menu-toggle span { background: transparent; } body.menu-open .menu-toggle span::before { transform: translateY(7px) rotate(45deg); } body.menu-open .menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); } /* ---------------------------------------------------------------------------- 4b. HERO ---------------------------------------------------------------------------- */ .hero { position: relative; min-height: min(100vh, 1000px); display: flex; align-items: center; padding-top: calc(var(--header-h) + 10px); padding-bottom: clamp(40px, 6vh, 90px); margin-top: calc(var(--header-h) * -1); overflow: hidden; isolation: isolate; } .hero-blooms { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .bloom { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; } .bloom.b1 { width: 52vw; height: 52vw; left: -10vw; top: -16vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 55%, var(--surface)), transparent 68%); animation: drift1 18s var(--ease) infinite alternate; } .bloom.b2 { width: 44vw; height: 44vw; right: -8vw; top: 8vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--surface-3) 80%, var(--accent)), transparent 70%); animation: drift2 22s var(--ease) infinite alternate; } .bloom.b3 { width: 38vw; height: 38vw; left: 24vw; bottom: -16vw; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-tint), var(--surface)), transparent 72%); opacity: .7; animation: drift3 26s var(--ease) infinite alternate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), transparent 30%, color-mix(in srgb, var(--bg) 55%, transparent)); } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 72px); align-items: center; width: 100%; } .hero-copy { position: relative; z-index: 2; } .hero-eyebrow { margin-bottom: 26px; } .hero-title { font-size: clamp(46px, 7.8vw, 120px); line-height: .94; letter-spacing: -0.02em; } .hero-title .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .18em .06em .14em 0; margin: -.18em -.06em -.14em 0; } .hero-title .word { display: inline-block; } .hero-title .it { color: var(--accent-deep); } .hero-lead { margin-top: 30px; max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; } .hero-media { position: relative; z-index: 1; } .hero-arch { aspect-ratio: 0.82; box-shadow: var(--shadow-lg); will-change: transform; } .hero-arch img { transition: transform 1.2s var(--ease); will-change: transform; } .hero-badge { position: absolute; left: -34px; bottom: 34px; z-index: 3; width: 128px; height: 128px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; text-align: center; } .hero-badge .badge-spin { position: absolute; inset: 0; animation: spin 26s linear infinite; } .hero-badge .badge-spin svg { width: 100%; height: 100%; } .hero-badge .badge-spin text { font-family: var(--body-font); font-size: 8.4px; font-weight: 700; letter-spacing: .26em; fill: var(--ink-soft); text-transform: uppercase; } .hero-badge .badge-core { font-family: var(--display-font); font-style: italic; font-size: 30px; color: var(--accent-deep); } .hero-side { position: absolute; right: clamp(8px, 2vw, 24px); top: 50%; z-index: 4; writing-mode: vertical-rl; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); } .hero-side .ln { width: 1px; height: 60px; background: var(--line-strong); } .scroll-cue { position: absolute; left: var(--gutter); bottom: 30px; z-index: 4; display: flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } .scroll-cue .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bob 1.8s var(--ease) infinite; } /* ---- Hero variant: full-bleed scroll-scrubbed video ---- */ .hero--video { height: 260vh; min-height: 0; display: block; padding: 0; overflow: visible; isolation: auto; align-items: stretch; margin-top: calc(var(--header-h) * -1); } .hero--video::before { display: none; } /* drop the section gradient; feather handles it */ .hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; isolation: isolate; display: flex; align-items: center; } .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 42%; background: var(--bg); filter: saturate(0.92) contrast(1.02); } .hero-feather { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, transparent 32%, color-mix(in srgb, var(--bg) 55%, transparent) 58%, color-mix(in srgb, var(--bg) 90%, transparent) 82%, var(--bg) 100%), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 13%, transparent 30%), radial-gradient(110% 78% at 80% 50%, var(--accent-tint), transparent 60%); } .hero-sticky-inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; } .hero--video .hero-copy { max-width: 540px; text-align: left; padding-top: var(--header-h); } .hero--video .hero-title { font-size: clamp(38px, 4.8vw, 66px); padding-bottom: .14em; } .hero--video .hero-lead { margin-top: clamp(20px, 2.6vh, 32px); } .hero--video .scroll-cue { z-index: 3; color: var(--ink-soft); } @media (max-width: 1100px) { .hero-sticky { align-items: flex-end; } .hero-video { object-position: 28% 38%; } .hero-sticky-inner { justify-content: center; padding-bottom: clamp(74px, 16vh, 150px); } .hero--video .hero-copy { max-width: 600px; text-align: center; padding-top: 0; } .hero--video .hero-actions { justify-content: center; } .hero-feather { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 28%, color-mix(in srgb, var(--bg) 28%, transparent) 52%, transparent 74%), radial-gradient(130% 60% at 50% 100%, var(--accent-tint), transparent 60%); } } @media (max-width: 600px) { .hero--video { height: 220vh; } .hero--video .scroll-cue { display: none; } } /* ---------------------------------------------------------------------------- 4c. MARQUEE RIBBON ---------------------------------------------------------------------------- */ .marquee { border-block: 1px solid var(--line); overflow: hidden; background: var(--surface); } .marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--display-font); font-style: italic; font-size: clamp(24px, 3.4vw, 46px); color: var(--ink); padding: 20px 0; display: inline-flex; align-items: center; } .marquee-track span::after { content: "✦"; font-style: normal; font-size: .42em; color: var(--accent); margin: 0 clamp(28px, 4vw, 64px); transform: translateY(-0.3em); } /* ---------------------------------------------------------------------------- 4d. ABOUT ---------------------------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 100px); align-items: center; } .about-media { position: relative; } .about-arch { aspect-ratio: 0.84; box-shadow: var(--shadow); will-change: transform; } /* Výška obrázku ZE ŠÍŘKY (aspect-ratio na ), ne z výšky archu. Dřív obrázek spoléhal na height:100% / aspect-ratio rodiče, což iOS Safari v portrait orientaci nespočítal (arch ~0 výška) → portrét se nevykreslil. Self-sized img = bulletproof. */ .about-arch img { will-change: transform; height: auto; aspect-ratio: 0.84; } .about-sub { position: absolute; right: -28px; bottom: -36px; width: 44%; border-radius: var(--radius-lg); overflow: hidden; border: 8px solid var(--surface); box-shadow: var(--shadow); aspect-ratio: 1.1; } .about-sub img { width: 100%; height: 100%; object-fit: cover; } .about-head { display: flex; align-items: center; gap: 16px; } .about-statement { font-family: var(--display-font); font-weight: 500; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; margin-top: 26px; } .about-statement .it { color: var(--accent-deep); } .about-body { margin-top: 24px; color: var(--ink-soft); max-width: 52ch; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 48px; } .stat .num { font-family: var(--display-font); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 3px; white-space: nowrap; } .stat .num em { font-style: italic; color: var(--accent-deep); font-size: .62em; } .stat .rule { margin: 16px 0 12px; } .stat .label { font-size: 13px; color: var(--muted); max-width: 20ch; } /* ---------------------------------------------------------------------------- 4e. SERVICES — editorial index with cursor-following preview ---------------------------------------------------------------------------- */ .services-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 16px; } .filters { display: flex; flex-wrap: wrap; gap: 10px; } .filter-chip { padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color .3s, background-color .3s, border-color .3s, transform .3s var(--ease); } .filter-chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); } .filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .services { border-top: 1px solid var(--line); } .svc-row { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 3vw, 40px) 8px; border-bottom: 1px solid var(--line); transition: padding-left .5s var(--ease), background-color .5s var(--ease); } .svc-row .svc-idx { font-family: var(--display-font); font-style: italic; font-size: 17px; color: var(--accent-deep); flex: none; width: 30px; } .svc-thumb { display: none; flex: none; width: 66px; aspect-ratio: .8; border-radius: 40px 40px 8px 8px; overflow: hidden; } .svc-thumb img { width: 100%; height: 100%; object-fit: cover; } .svc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .svc-cat { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .svc-name { font-size: clamp(26px, 3.6vw, 46px); line-height: 1; color: var(--ink); transition: transform .5s var(--ease), color .4s; } .svc-desc { font-size: 14px; color: var(--ink-soft); max-width: 46ch; } .svc-meta { flex: none; display: flex; align-items: baseline; gap: clamp(18px, 3vw, 44px); } .svc-dur { font-size: 13px; color: var(--muted); white-space: nowrap; } .svc-price { font-family: var(--display-font); font-size: clamp(22px, 2.4vw, 32px); color: var(--ink); white-space: nowrap; } .svc-row:hover { padding-left: 26px; } .svc-row:hover .svc-name { color: var(--accent-deep); } .svc-row[hidden] { display: none; } /* floating preview that follows the cursor (desktop) */ .svc-preview { position: fixed; top: 0; left: 0; z-index: 90; width: 280px; aspect-ratio: 0.82; border-radius: 160px 160px 18px 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.86); box-shadow: var(--shadow-lg); transition: opacity .4s var(--ease), transform .5s var(--ease); } .svc-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .svc-preview img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------------------- 4f. GALLERY — arched, asymmetric ---------------------------------------------------------------------------- */ .gallery { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 28px); } .g-item { position: relative; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .g-item:hover img { transform: scale(1.07); } .g-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,12,.34), transparent 55%); opacity: 0; transition: opacity .5s var(--ease); } .g-item:hover::after { opacity: 1; } .g-1 { grid-column: span 5; aspect-ratio: .8; border-radius: 220px 220px 20px 20px; align-self: end; } .g-2 { grid-column: span 7; aspect-ratio: 1.42; border-radius: 20px; } .g-3 { grid-column: span 4; aspect-ratio: .9; border-radius: 20px; } .g-4 { grid-column: span 4; aspect-ratio: .9; border-radius: 200px 200px 20px 20px; } .g-5 { grid-column: span 4; aspect-ratio: .9; border-radius: 20px; } .g-item .g-tag { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .g-item:hover .g-tag { opacity: 1; transform: none; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 5vw; background: rgba(18,13,10,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox img { max-width: min(92vw, 1000px); max-height: 84vh; width: auto; border-radius: 20px; box-shadow: var(--shadow-lg); transform: scale(.95); transition: transform .55s var(--ease); } .lightbox.is-open img { transform: scale(1); } .lightbox-close { position: absolute; top: 22px; right: 26px; width: 54px; height: 54px; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background-color .3s, transform .35s var(--ease); } .lightbox-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: background-color .3s; } .lightbox-nav:hover { background: rgba(255,255,255,.14); } .lightbox-nav.prev { left: 3vw; } .lightbox-nav.next { right: 3vw; } /* ---------------------------------------------------------------------------- 4g. REVIEWS — carousel ---------------------------------------------------------------------------- */ .reviews-band { background: var(--surface-2); overflow: hidden; } .reviews-wrap { max-width: 980px; margin-inline: auto; text-align: center; position: relative; } .quote-mark { font-family: var(--display-font); font-style: italic; font-size: clamp(120px, 18vw, 240px); line-height: .5; color: var(--accent); opacity: .5; height: .42em; display: block; } .review-stage { position: relative; min-height: clamp(180px, 22vw, 250px); margin-top: 16px; } .review-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; } .review-slide.active { opacity: 1; transform: none; pointer-events: auto; position: relative; } .review-stars { color: var(--accent); letter-spacing: 5px; font-size: 17px; margin-bottom: 22px; } .review-text { font-family: var(--display-font); font-weight: 500; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.24; color: var(--ink); max-width: 30ch; } .review-by { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; align-items: center; } .review-name { font-weight: 700; font-size: 14.5px; letter-spacing: .02em; } .review-role { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; } .review-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 32px; } .review-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink); transition: border-color .3s, background-color .3s, transform .3s var(--ease); } .review-arrow:hover { border-color: var(--accent); background: var(--accent-tint); } .review-dots { display: flex; gap: 10px; } .review-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: transform .3s var(--ease), background-color .3s; } .review-dot.active { background: var(--accent); transform: scale(1.5); } /* ---------------------------------------------------------------------------- 4h. TEAM ---------------------------------------------------------------------------- */ .team { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); } .member .member-img { aspect-ratio: .82; border-radius: 200px 200px 20px 20px; overflow: hidden; box-shadow: var(--shadow-sm); } .member .member-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .member:hover .member-img img { transform: scale(1.05); } .member h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 24px; } .member .role { color: var(--accent-deep); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; margin-top: 8px; text-transform: uppercase; } .member p { color: var(--ink-soft); font-size: 14px; margin-top: 14px; max-width: 32ch; } /* ---------------------------------------------------------------------------- 4i. BOOKING / CONTACT ---------------------------------------------------------------------------- */ .book-band { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; } body[data-palette="noir"] .book-band { background: #131110; } .book-band .bloom { position: absolute; opacity: .22; } .book-band .eyebrow { color: var(--accent); } .book-band .eyebrow::before { background: var(--accent); } .book-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 5vw, 88px); align-items: start; position: relative; z-index: 1; } .book-intro h2 { font-size: clamp(38px, 5vw, 70px); margin-top: 18px; color: #fff; } body[data-palette="noir"] .book-intro h2 { color: var(--ink); } .book-intro .lede { color: rgba(255,255,255,.74); margin-top: 22px; } body[data-palette="noir"] .book-intro .lede { color: var(--ink-soft); } .contact-list { margin-top: 40px; } .contact-row { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); } body[data-palette="noir"] .contact-row { border-color: var(--line); } .contact-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); } body[data-palette="noir"] .contact-row:last-child { border-color: var(--line); } .contact-row .ic { flex: none; width: 22px; color: var(--accent); padding-top: 2px; } .contact-row .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; } body[data-palette="noir"] .contact-row .k { color: var(--muted); } .contact-row .v { font-size: 15.5px; margin-top: 4px; color: #fff; } body[data-palette="noir"] .contact-row .v { color: var(--ink); } .contact-row a.v:hover { color: var(--accent); } .book-form-card { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); box-shadow: var(--shadow-lg); } /* Telefonické objednání (místo rezervačního formuláře) */ .book-call { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; } .book-call-ic { font-size: 42px; line-height: 1; color: var(--accent-deep); } .book-call-h { font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(24px, 3vw, 32px); color: var(--ink); } .book-call-lead { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 40ch; } .book-call-btn { margin-top: 4px; font-size: 18px; letter-spacing: .01em; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { position: relative; margin-top: 22px; } .field:first-of-type { margin-top: 0; } .field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .field label .req { color: var(--accent-deep); } .field input, .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 15px 16px; font-size: 15px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .field textarea { resize: vertical; min-height: 116px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23998b78' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .form-note { font-size: 12.5px; color: var(--muted); } .form-success { display: none; margin-top: 22px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--accent-tint); border: 1px solid var(--accent); color: var(--ink); font-size: 14.5px; } .form-success.is-visible { display: block; } /* Rezervační kalendář (ADR-0037 F4) — vyber den → volné sloty → vyber čas */ .rc { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px 16px; } .rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rc-title { font-family: var(--display-font); font-size: 19px; font-weight: var(--display-weight); color: var(--ink); text-transform: capitalize; } .rc-nav { width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } .rc-nav:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-tint); } .rc-nav:disabled { opacity: .35; cursor: not-allowed; } .rc-dow, .rc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .rc-dow { margin-bottom: 6px; } .rc-dow span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rc-empty { aspect-ratio: 1; } .rc-day { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .rc-day:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); } .rc-day:disabled { color: var(--muted); opacity: .4; background: transparent; } .rc-day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); } .rc-slots { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 9px; } .rc-slot { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .rc-slot:hover { border-color: var(--accent); transform: translateY(-1px); } .rc-slot[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); } .rc-msg { font-size: 13.5px; color: var(--muted); margin: 2px 0; } .rc-msg--warn { color: var(--accent-deep); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .rc-day, .rc-slot, .rc-nav { transition: none; } .rc-day:hover:not(:disabled), .rc-slot:hover { transform: none; } } .map-area { margin-top: 28px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--shadow-sm); background: radial-gradient(120% 80% at 30% 20%, var(--accent-tint), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 22px, rgba(255,255,255,.02) 22px 44px); display: flex; align-items: center; justify-content: center; } .map-area span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.85); background: rgba(0,0,0,.3); padding: 8px 14px; border-radius: var(--radius-pill); } body[data-palette="noir"] .map-area span { color: var(--ink); background: var(--surface-2); } /* ---------------------------------------------------------------------------- 4j. FOOTER ---------------------------------------------------------------------------- */ .site-footer { background: var(--surface-2); color: var(--ink); } .footer-top { padding-block: clamp(60px, 8vw, 110px); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(24px, 3.4vw, 40px); } .footer-big { display: block; font-family: var(--display-font); font-weight: var(--display-weight); font-size: clamp(38px, 7.4vw, 104px); line-height: 1.04; letter-spacing: -.02em; max-width: 15ch; } .footer-big .it { color: var(--accent-deep); } .footer-cta { margin-top: 2px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(48px, 6vw, 76px); } .footer-brand p { margin-top: 16px; max-width: 32ch; font-size: 14px; color: var(--ink-soft); } .footer-socials { display: flex; gap: 12px; margin-top: 20px; } .footer-socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: border-color .3s, color .3s, transform .3s var(--ease); } .footer-socials a:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); } .footer-socials svg { width: 18px; height: 18px; display: block; } .footer-col h4 { font-family: var(--body-font); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; } .footer-col ul { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 11px; } .footer-col a, .footer-col li { font-size: 14px; color: var(--ink-soft); transition: color .3s; } .footer-col a:hover { color: var(--accent-deep); } .footer-bottom { border-top: 1px solid var(--line); padding-block: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); } /* ---------------------------------------------------------------------------- 5. MOTION — resilient: visible at rest, animation is additive (.in / .is-in) ---------------------------------------------------------------------------- */ @keyframes sk-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } } @keyframes sk-up { from { transform: translateY(108%); } to { transform: translateY(0); } } @keyframes sk-left { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } } @keyframes sk-right { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } } @keyframes sk-scale { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } @keyframes sk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes sk-word { from { transform: translateY(110%); } to { transform: translateY(0); } } html.js .reveal.in { animation: sk-rise .85s var(--ease) both; } html.js .reveal.in[data-reveal="left"] { animation-name: sk-left; } html.js .reveal.in[data-reveal="right"] { animation-name: sk-right; } html.js .reveal.in[data-reveal="scale"] { animation-name: sk-scale; } html.js .stagger.in > * { animation: sk-rise .78s var(--ease) both; } html.js .mask.in > * { animation: sk-up .95s var(--ease-out) both; } html.js .rule.in::before { animation: sk-draw 1.1s var(--ease) both; } /* hero entrance (is-in set by IO) */ html.js .hero.is-in .hero-title .word { animation: sk-word 1s var(--ease-out) both; } html.js .hero.is-in .hero-anim { animation: sk-rise 1s var(--ease) both; } /* blooms / marquee / badge / cue ambient motion */ @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, 4vw) scale(1.12); } } @keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5vw, 3vw) scale(1.1); } } @keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw, -4vw) scale(1.14); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ---------------------------------------------------------------------------- 6. RESPONSIVE ---------------------------------------------------------------------------- */ @media (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-media { max-width: 440px; } .hero-side { display: none; } .about-grid { grid-template-columns: 1fr; gap: 64px; } .about-media { max-width: 480px; } .book-grid { grid-template-columns: 1fr; } .team { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 920px) { :root { --header-h: 78px; } .nav, .header-cta .btn { display: none; } .menu-toggle { display: flex; } .nav.is-drawer { display: flex; position: fixed; inset: 0; z-index: 140; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 0 var(--gutter); background: var(--surface); transform: translateX(100%); transition: transform .6s var(--ease); } body.menu-open .nav.is-drawer { transform: none; } .nav.is-drawer a { font-family: var(--display-font); font-size: clamp(34px, 9vw, 52px); padding: 12px 0; color: var(--ink); } .nav.is-drawer a::after { display: none; } .nav.is-drawer .drawer-cta { display: block; margin-top: 28px; } .nav.is-drawer .drawer-cta a { font-family: var(--body-font); font-size: 16px; } .svc-row { gap: 16px; padding-left: 0; } .svc-row:hover { padding-left: 0; } .svc-row .svc-idx { display: none; } .svc-thumb { display: block; } .svc-name { font-size: clamp(24px, 7vw, 34px); } .svc-desc { display: none; } .svc-meta { flex-direction: column; align-items: flex-end; gap: 6px; } .svc-dur { display: none; } .gallery { grid-template-columns: repeat(2, 1fr); } .g-1,.g-2,.g-3,.g-4,.g-5 { grid-column: span 1; aspect-ratio: .9; align-self: auto; } .g-1 { border-radius: 160px 160px 16px 16px; } .g-4 { border-radius: 160px 160px 16px 16px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 600px) { .hero-title { font-size: clamp(46px, 15vw, 78px); } .form-row { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; gap: 24px; } .team { grid-template-columns: 1fr; max-width: 360px; } .gallery { grid-template-columns: 1fr; } .g-1,.g-2,.g-3,.g-4,.g-5 { grid-column: span 1; } .footer-grid { grid-template-columns: 1fr; } .about-sub { display: none; } .hero-badge { width: 100px; height: 100px; left: -14px; } } /* ---------------------------------------------------------------------------- 7. REDUCED MOTION ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.js .reveal.in, html.js .stagger.in > *, html.js .mask.in > *, html.js .hero.is-in .hero-anim, html.js .hero.is-in .hero-title .word { animation: none !important; opacity: 1 !important; transform: none !important; } .rule.in::before { animation: none !important; transform: scaleX(1) !important; } .bloom, .marquee-track, .badge-spin, .scroll-cue .dot { animation: none !important; } .cursor-dot, .cursor-ring { display: none !important; } html.has-cursor, html.has-cursor body { cursor: auto !important; } } /* ============================================================================ 8. MOTIV — BRONZOVÁ ELEGANCE (body[data-palette="bronz"]) Dark bronze leather ground · metallic gold display · gold swooshes + sparkle. Mirrors the salon's business card. Everything below is scoped to the motiv. ============================================================================ */ body[data-palette="bronz"] { --bg: #1b1009; --surface: #3a2414; --surface-2: #281910; --surface-3: #4b3019; --ink: #f4e4c2; --ink-soft: #d9be93; --muted: #b1956b; --line: rgba(231, 185, 91, .20); --line-strong: rgba(231, 185, 91, .44); --on-dark: #f4e4c2; --accent: #e7b95b; --accent-deep: #c79338; --accent-ink: #1b1009; --accent-tint: rgba(231, 185, 91, .15); --shadow-sm: 0 2px 14px rgba(0, 0, 0, .45); --shadow: 0 18px 50px -20px rgba(0, 0, 0, .72); --shadow-lg: 0 50px 100px -45px rgba(0, 0, 0, .85); color-scheme: dark; background-color: #1b1009; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"), radial-gradient(125% 95% at 50% -8%, #6f4628 0%, #4a2f1a 32%, #2c1b10 62%, #160d07 100%); background-size: 180px 180px, cover; background-blend-mode: soft-light, normal; background-attachment: fixed, fixed; } body[data-accent="zlato"] { --accent: #e7b95b; --accent-deep: #c79338; --accent-ink: #1b1009; --accent-tint: rgba(231, 185, 91, .15); } /* Metallic gold display type */ body[data-palette="bronz"] .hero-title, body[data-palette="bronz"] .about-statement, body[data-palette="bronz"] #servicesTitle, body[data-palette="bronz"] #galleryTitle, body[data-palette="bronz"] #teamTitle, body[data-palette="bronz"] #bookTitle, body[data-palette="bronz"] .footer-big, body[data-palette="bronz"] .brand { background: linear-gradient(174deg, #fbe7aa 0%, #e7b95b 36%, #b9802c 60%, #f3d289 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .42)); } body[data-palette="bronz"] .hero-title .word, body[data-palette="bronz"] .hero-title .it, body[data-palette="bronz"] .about-statement .it, body[data-palette="bronz"] .footer-big .it, body[data-palette="bronz"] #bookTitle .it { background: linear-gradient(174deg, #fbe7aa 0%, #e7b95b 36%, #b9802c 60%, #f3d289 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body[data-palette="bronz"] .brand-dot { color: var(--accent); -webkit-text-fill-color: var(--accent); } /* Tint the hero video into the bronze ground */ body[data-palette="bronz"] .hero-video { filter: sepia(.5) saturate(1.25) contrast(1.03) brightness(.66) hue-rotate(-6deg); } /* Keep hero copy above all the gold decoration */ body[data-palette="bronz"] .hero-sticky-inner { z-index: 5; } body[data-palette="bronz"] .hero--video .scroll-cue { z-index: 6; } /* Gold swoosh arcs framing the hero (like the card) */ body[data-palette="bronz"] .hero-sticky::before, body[data-palette="bronz"] .hero-sticky::after { content: ""; position: absolute; border-radius: 50%; border: 4px solid transparent; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 10px rgba(231, 185, 91, .35)); } body[data-palette="bronz"] .hero-sticky::before { width: 150vmax; height: 150vmax; left: -64vmax; top: -106vmax; border-top-color: var(--accent-deep); border-right-color: var(--accent); } body[data-palette="bronz"] .hero-sticky::after { width: 150vmax; height: 150vmax; right: -66vmax; bottom: -106vmax; border-bottom-color: var(--accent-deep); border-left-color: var(--accent); } /* Sparkles */ body[data-palette="bronz"] .hero-feather::before { content: ""; position: absolute; z-index: 2; pointer-events: none; width: 26px; height: 26px; top: 21%; left: 58%; background: radial-gradient(circle, #fff6da, #e7b95b 58%, transparent 72%); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 6px rgba(231, 185, 91, .7)); animation: bsparkle 3.6s var(--ease) infinite; } body[data-palette="bronz"] .hero-feather::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(circle, #fff5d8 0 1.4px, transparent 2.4px), radial-gradient(circle, #f3d489 0 1.6px, transparent 3px), radial-gradient(circle, #fff5d8 0 1.2px, transparent 2.2px); background-repeat: no-repeat; background-position: 50% 64%, 70% 30%, 86% 52%; } @keyframes bsparkle { 0%, 100% { transform: scale(.65) rotate(0deg); opacity: .45; } 50% { transform: scale(1) rotate(14deg); opacity: 1; } } /* Gold hairline above the footer for a finished, card-like edge */ body[data-palette="bronz"] .site-footer { border-top: 1px solid var(--line-strong); } @media (prefers-reduced-motion: reduce) { body[data-palette="bronz"] .hero-feather::before { animation: none !important; } } /* ---------------------------------------------------------------------------- 9. SINGLE-MEMBER TEAM → centered founder feature (portrait | bio) ---------------------------------------------------------------------------- */ .team.team--solo { display: block; max-width: 820px; margin-inline: auto; } .team--solo .member { display: grid; grid-template-columns: clamp(200px, 30vw, 300px) 1fr; column-gap: clamp(28px, 5vw, 64px); align-items: center; text-align: left; } .team--solo .member .member-img { grid-column: 1; grid-row: 1 / span 3; align-self: center; } .team--solo .member > h3 { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; } .team--solo .member > .role { grid-column: 2; grid-row: 2; margin-top: 8px; } .team--solo .member > p:not(.role) { grid-column: 2; grid-row: 3; align-self: start; margin-top: 14px; max-width: 42ch; } @media (max-width: 640px) { .team--solo .member { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; column-gap: 0; text-align: center; } .team--solo .member .member-img { grid-column: 1; grid-row: auto; max-width: 280px; margin-inline: auto; } .team--solo .member > h3, .team--solo .member > .role, .team--solo .member > p:not(.role) { grid-column: 1; grid-row: auto; } .team--solo .member > h3 { margin-top: 22px; } .team--solo .member > p:not(.role) { margin-inline: auto; } } /* ---------------------------------------------------------------------------- 10. BRONZE MOTIV — keep the booking/contact band dark so text is legible (.book-band uses var(--ink) as its background, which is light in bronz) ---------------------------------------------------------------------------- */ body[data-palette="bronz"] .book-band { background: linear-gradient(160deg, #241405 0%, #160c05 100%); } body[data-palette="bronz"] .book-intro .lede { color: var(--ink-soft); } body[data-palette="bronz"] .contact-row, body[data-palette="bronz"] .contact-row:last-child { border-color: var(--line); } body[data-palette="bronz"] .contact-row .k { color: var(--muted); } body[data-palette="bronz"] .contact-row .v { color: var(--ink); } body[data-palette="bronz"] .map-area span { color: var(--ink); background: var(--surface-2); } /* Contact rows: label above value (the .v margin-top implies a stacked layout) */ .contact-row > span { display: block; } .contact-row .k { display: block; } /* ═══ CMS re-render kompatibilita (cms-reader klonuje