/* ============================================================
MAJSTRI ZÁBAVY — SCROLL SPLIT LANDING PAGE
============================================================ */
/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* Brand palette */
--color-dark: #141619;
/* Single source of truth for every green accent in the UI */
--accent: #00FF00;
--color-text-muted: #4E5258;
}
html, body {
width: 100%;
background: #FFFFFF;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The page scrolls natively. Scroll is only trapped in two places, both of
which are gesture-driven state machines rather than scrubbed timelines:
1. the Welcome opening scene (until the Hero handoff finishes)
2. the staged Services -> Projects region
Everywhere else `.scroll-locked` is absent and scrolling is ordinary.
Never set overflow on html/body outside this class: `overflow-x:hidden`
computes overflow-y to `auto` and quietly makes its own scroller. */
html.scroll-locked,
html.scroll-locked body {
overflow: hidden;
touch-action: none;
height: 100%;
}
/* FAIL-OPEN (CA-003) -- statický koncový stav Hero bez GSAP.
Triedu `hero-static` pridá main.js iba vtedy, keď sa animačná knižnica
nenačítala alebo prechod Welcome -> Hero nedobehol. Pri normálnom
priebehu sa tieto pravidlá nikdy nepoužijú. Prebíjajú výhradne
POČIATOČNÉ (pred-animačné) skryté stavy: Welcome panely, hlavičku a
zaparkované karty služieb. Mobilný stoh (`.svc-mstack`) GSAP nepotrebuje,
preto má prednosť pred týmto statickým rozložením. */
html.hero-static .hero-clone { display: none; }
html.hero-static .site-header { opacity: 1; }
html.hero-static #sluzby:not(.svc-mstack) { height: auto; }
html.hero-static #sluzby:not(.svc-mstack) #svcStage {
position: static;
height: auto;
overflow: visible;
display: grid;
gap: clamp(16px, 2.4vh, 28px);
padding-block: clamp(32px, 6vh, 72px);
}
html.hero-static #sluzby:not(.svc-mstack) .svc-card {
position: relative;
inset: auto;
margin-inline: auto;
transform: none;
opacity: 1;
}
html.hero-static #sluzby:not(.svc-mstack) #svcHandoff { display: none; }
/* CA-018: skip link a hlavný landmark domovskej stránky (rovnaký vzor ako
`.sl-skip-link` na podstránkach). Viditeľný iba pri fokuse z klávesnice. */
.skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 140;
transform: translateY(-160%);
padding: 12px 18px;
border-radius: 999px;
color: #0b0d10;
background: var(--accent);
font-weight: 800;
text-decoration: none;
transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }
main#main-content:focus { outline: none; }
/* BLOCKED — CLIENT DATA: bloky so zástupným obsahom (hodnotenie + karusel
recenzií, Google CTA, prázdne sloty log) sú v HTML označené `hidden`;
ich vlastné `display: grid/flex` by atribút prebilo, preto explicitne. */
.reviews-top[hidden],
.reviews-cta[hidden],
.brand-logo-slot[hidden] { display: none; }
/* Menu overlay lock -- same idea, kept separate so the two can coexist. */
html.menu-open,
html.menu-open body {
overflow: hidden;
touch-action: none;
}
/* ── Skrytý natívny scrollbar ────────────────────────────────
Zvislý pruh vpravo rušil kompozíciu a navyše zavádzal: v pripnutých
sekciách (Služby, dotazník) sa scroll pozícia zámerne nemení, takže
ukazoval stav, ktorý nezodpovedal tomu, kde sa používateľ nachádza.
Skrýva sa IBA vykreslenie pruhu. Scrollovanie kolieskom, trackpadom,
dotykom, klávesnicou (šípky, PageUp/PageDown, Home/End) aj cez kotvy
v navigácii zostáva úplne nezmenené -- `overflow` sa nikde nemení.
Vedľajší efekt je žiaduci: obsah sa rozšíri o šírku pruhu (~15 px na
Windows), čím zmizne rozdiel medzi `100vw` a skutočnou šírkou obsahu,
ktorý inak spôsoboval jemný horizontálny pretok. */
html {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* staršie Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { /* Chromium, Safari */
width: 0;
height: 0;
display: none;
}
/* Smooth anchor scrolling is done in JS with GSAP, never with
`scroll-behavior: smooth`: a CSS smooth scroll restarted by the staged
region's pin listener fights itself and strands the page mid-animation. */
/* ── Transition scene wrapper (Welcome + Hero) ──────────── */
/* Normal-flow full-viewport block: the first screen of the document. The
Welcome clone panels are absolutely positioned inside it. */
.transition-scene {
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
height: 100svh;
overflow: hidden;
}
/* ============================================================
SCENE 2 — clean editorial layout + transparent WebM video
============================================================ */
.scene-two {
position: absolute;
inset: 0;
z-index: 10;
background: #FFFFFF;
display: flex;
align-items: center;
overflow: hidden;
}
/* ── Fixed site header ──────────────────────────────────── */
/* Sits above every section. Hidden during the Welcome scene; GSAP fades it
in on the Hero handoff. */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
background: transparent;
pointer-events: none;
opacity: 0; /* GSAP reveals it during the split */
}
.site-header-motion {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: clamp(18px, 2.6vw, 34px) clamp(20px, 5vw, 72px);
pointer-events: auto;
transform: translateY(0);
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.site-header.is-scroll-hidden .site-header-motion {
transform: translateY(calc(-100% - 48px));
pointer-events: none;
}
/* Dark sections need a light header treatment */
.site-header.on-dark .logo { color: #FFFFFF; }
.site-header.on-dark .menu-toggle {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
.site-header.on-dark .menu-line { background: #FFFFFF; }
.header-social {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: var(--color-dark);
}
.header-social-label {
font-size: 10px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.header-social-dot {
width: 6px;
height: 6px;
margin-right: 3px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px rgba(0, 255, 0, 0.45);
}
.header-social-link {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(17, 18, 20, 0.08);
border-radius: 50%;
color: #FFFFFF;
background: #111214;
box-shadow: 0 8px 20px rgba(17, 18, 20, 0.13);
transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.header-social-link svg {
width: 17px;
height: 17px;
}
.header-social-link:hover {
color: #111214;
background: var(--accent);
transform: translateY(-1px);
}
.header-social-link:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.site-header.on-dark .header-social-label { color: #FFFFFF; }
.site-header.on-dark .header-social-link {
border-color: rgba(255, 255, 255, 0.22);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.logo {
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: clamp(22px, 1.8vw, 27px);
letter-spacing: -0.04em;
color: var(--color-dark);
user-select: none;
line-height: 1;
}
/* Circular minimal hamburger button matching reference */
.menu-toggle {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.06);
outline: none;
cursor: pointer;
border-radius: 50%;
width: 48px;
height: 48px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4.5px;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.menu-toggle:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.menu-line {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--color-dark);
transition: width 0.25s ease;
}
.menu-toggle:hover .menu-line:nth-child(2) {
width: 13px;
}
/* ── Scene 2 Left Content Column ────────────────────────── */
/* ── Scene 2 Left Content Column ────────────────────────── */
.scene2-content {
position: relative;
z-index: 15;
max-width: 660px;
/* Moved more inward toward center to reduce empty center dead space */
margin-left: clamp(48px, 9.5vw, 160px);
padding-top: clamp(10px, 2vh, 25px);
pointer-events: auto;
}
.scene2-headline {
font-family: "Montserrat", sans-serif;
font-weight: 900;
/* Visibly enlarged, dominant editorial typography */
font-size: clamp(56px, 6.4vw, 94px);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--color-dark);
margin: 0 0 clamp(24px, 3vh, 36px) 0;
user-select: none;
}
.lime-dot {
color: var(--accent);
display: inline;
}
.scene2-copy {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 0 clamp(32px, 4.2vh, 48px) 0;
max-width: 490px;
}
/* ── Category Pills ─────────────────────────────────────── */
.category-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.category-pill {
display: inline-flex;
align-items: center;
gap: 11px;
height: 48px;
padding: 0 20px 0 6px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
cursor: default;
user-select: none;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.category-pill:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.pill-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-dark);
}
.pill-icon svg {
width: 17px;
height: 17px;
stroke: var(--color-dark);
}
.pill-text {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--color-dark);
letter-spacing: -0.015em;
}
/* ── Decorative Floating Glossy Lime Objects in Scene 2 ─── */
.scene2-blob {
position: absolute;
z-index: 12;
pointer-events: none;
}
.scene2-blob .cursor-wrapper {
pointer-events: auto;
}
.scene2-blob .cursor-wrapper img {
display: block;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 14px 28px rgba(0, 255, 0, 0.18));
}
/* 1. Main Glossy Blob — Upper-middle / transition space */
.scene2-blob--1 {
top: clamp(45px, 8vh, 100px);
left: clamp(380px, 36vw, 570px);
}
.scene2-blob--1 .cursor-wrapper img {
width: clamp(140px, 13vw, 205px);
height: auto;
}
/* 2. Top-Right Companion Blob — behind/above man's shoulder */
.scene2-blob--2 {
top: clamp(40px, 7vh, 85px);
right: clamp(60px, 9vw, 140px);
}
.scene2-blob--2 .cursor-wrapper img {
width: clamp(58px, 5.2vw, 82px);
height: auto;
transform: rotate(45deg);
opacity: 0.92;
}
/* 3. Transition Zone Blob — between copy/pills and man's arm */
.scene2-blob--3 {
top: clamp(420px, 54vh, 530px);
left: clamp(380px, 35vw, 540px);
}
.scene2-blob--3 .cursor-wrapper img {
width: clamp(68px, 6.5vw, 95px);
height: auto;
transform: rotate(135deg);
opacity: 0.92;
}
/* 4. Lower-Left Accent Blob — below category pills */
.scene2-blob--4 {
bottom: clamp(24px, 4.5vh, 55px);
left: clamp(50px, 7.5vw, 140px);
}
.scene2-blob--4 .cursor-wrapper img {
width: clamp(52px, 4.8vw, 72px);
height: auto;
transform: rotate(-35deg);
opacity: 0.85;
}
/* ── Glossy Lime Spheres in Scene 2 (Image B) ─────────────── */
.scene2-sphere {
position: absolute;
z-index: 14;
pointer-events: none;
}
.scene2-sphere .cursor-wrapper {
pointer-events: auto;
}
.scene2-sphere .cursor-wrapper img {
display: block;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 16px 36px rgba(0, 255, 0, 0.28));
}
/* 1. Large Sphere — Lower-right area */
.scene2-sphere--1 {
bottom: clamp(25px, 4.5vh, 70px);
right: clamp(15px, 2.5vw, 60px);
}
.scene2-sphere--1 .cursor-wrapper img {
width: clamp(100px, 9.8vw, 150px);
height: auto;
}
/* 2. Small Companion Sphere — Upper-mid / right transition */
.scene2-sphere--2 {
top: clamp(95px, 13vh, 150px);
right: clamp(220px, 20vw, 320px);
}
.scene2-sphere--2 .cursor-wrapper img {
width: clamp(44px, 3.8vw, 62px);
height: auto;
opacity: 0.95;
}
/* ── Floating Premium Info Cards in Scene 2 (Enlarged & Clustered) */
.hero-float-card {
position: absolute;
z-index: 16;
pointer-events: auto;
user-select: none;
}
.hero-float-card .ambient-wrapper {
pointer-events: auto;
}
.hero-float-card .card-inner {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 22px;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.08),
0 4px 10px rgba(0, 0, 0, 0.03);
padding: 16px 22px;
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}
.hero-float-card:hover .card-inner {
transform: translateY(-4px) scale(1.025);
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.12),
0 6px 16px rgba(0, 0, 0, 0.05);
}
.hero-float-card .card-header {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 3px;
}
.hero-float-card .card-icon-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-dark);
flex-shrink: 0;
}
.hero-float-card .card-icon-circle svg {
width: 15px;
height: 15px;
}
.hero-float-card .card-label {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 11px;
color: #6C727A;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hero-float-card .card-stat {
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: clamp(26px, 2.4vw, 34px);
color: var(--color-dark);
line-height: 1.04;
letter-spacing: -0.04em;
margin: 3px 0 2px 0;
}
.hero-float-card .card-sub {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 12.5px;
color: #4E5258;
line-height: 1.38;
}
.hero-float-card .card-quote {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13.5px;
color: var(--color-dark);
line-height: 1.38;
margin: 5px 0 6px 0;
}
.hero-float-card .card-author {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 11.5px;
color: #767B82;
letter-spacing: 0.01em;
}
/* Card 1: Social Proof / Stats — Upper-right cluster */
.hero-float-card--1 {
top: clamp(115px, 16vh, 175px);
right: clamp(24px, 3.5vw, 75px);
width: clamp(195px, 16vw, 245px);
}
/* Card 2: Experience / Year — Mid-right cluster (tight gap with card 1) */
.hero-float-card--2 {
top: clamp(270px, 37vh, 360px);
right: clamp(40px, 5vw, 105px);
width: clamp(205px, 17vw, 255px);
}
/* Card 3: Testimonial Quote — Lower-right cluster (tight gap with card 2) */
.hero-float-card--3 {
top: clamp(435px, 58vh, 545px);
right: clamp(20px, 3vw, 70px);
width: clamp(245px, 20vw, 305px);
}
/* ── Soft Atmospheric Bottom Mist / Fog ─────────────────── */
.scene2-bottom-mist {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: clamp(120px, 16vh, 190px);
background: linear-gradient(
to top,
#FFFFFF 0%,
rgba(255, 255, 255, 0.92) 28%,
rgba(255, 255, 255, 0.55) 60%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
z-index: 18;
}
/* ── Person Stage (Moved noticeably more toward the center) ── */
.person-stage {
position: absolute;
/* Shifted inward toward center-right for balanced composition */
right: clamp(30px, 5.5vw, 130px);
bottom: 0;
width: clamp(760px, 94vw, 1340px);
max-width: min(94vw, 1340px);
height: 100vh;
height: 100svh;
z-index: 11;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
overflow: visible;
}
/* Subtle lime radial glow — follows upper body of man */
.person-glow {
position: absolute;
right: 8%;
top: 4%;
width: clamp(500px, 54vw, 860px);
height: clamp(500px, 54vw, 860px);
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 255, 0, 0.38) 0%, rgba(0, 255, 0, 0.14) 42%, rgba(255, 255, 255, 0) 68%);
filter: blur(44px);
pointer-events: none;
z-index: 0;
}
.hero-person-video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
display: block;
pointer-events: none;
position: relative;
z-index: 1;
}
/* ── Premium Liquid-Glass Play Button with Lime Ambient Aura ── */
/*
The Play button is placed precisely at the center of the man's chest
(left: 50.5%, top: 66.5% of person-stage) which corresponds exactly to
the final pointing finger target in the transparent WebM video.
*/
.hero-play-button {
position: absolute;
left: 50.5%;
top: 66.5%;
transform: translate(-50%, -50%);
z-index: 10;
width: clamp(72px, 5.2vw, 82px);
aspect-ratio: 1;
border-radius: 50%;
padding: 0;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.42);
outline: none;
cursor: pointer;
pointer-events: auto;
/* Multi-stage liquid glass surface: subtle upper reflection, deep translucent core */
background: radial-gradient(
circle at 35% 28%,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.05) 36%,
rgba(20, 23, 28, 0.72) 70%,
rgba(10, 12, 14, 0.90) 100%
);
backdrop-filter: blur(16px) saturate(190%);
-webkit-backdrop-filter: blur(16px) saturate(190%);
/* Refined bevel highlights + atmospheric lime aura + subtle depth */
box-shadow:
0 0 28px rgba(0, 255, 0, 0.42),
0 14px 34px rgba(0, 0, 0, 0.35),
inset 0 1.5px 2px rgba(255, 255, 255, 0.70),
inset 0 -1.5px 2px rgba(0, 0, 0, 0.30);
display: flex;
align-items: center;
justify-content: center;
opacity: 0; /* GSAP reveals it during the split */
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.3s ease,
background 0.3s ease;
}
/* Subtle gloss lens sheen */
.play-button-glass {
position: absolute;
inset: 1px;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.04) 42%,
rgba(255, 255, 255, 0) 65%
);
pointer-events: none;
}
/* Pure, robust icon centering container */
.play-icon-wrap {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.hero-play-button .play-icon {
width: 32%;
height: 32%;
display: block;
margin: 0;
padding: 0;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.40));
}
.hero-play-button .play-icon path {
fill: #FFFFFF;
}
/* Hover micro-interaction: smooth, restrained, high-end */
.hero-play-button:hover {
transform: translate(-50%, -50%) scale(1.05);
border-color: rgba(255, 255, 255, 0.75);
box-shadow:
0 0 38px rgba(0, 255, 0, 0.68),
0 18px 42px rgba(0, 0, 0, 0.42),
inset 0 2px 2.5px rgba(255, 255, 255, 0.85),
inset 0 -1.5px 2px rgba(0, 0, 0, 0.25);
}
.hero-play-button:active {
transform: translate(-50%, -50%) scale(0.96);
box-shadow:
0 0 20px rgba(0, 255, 0, 0.35),
0 6px 16px rgba(0, 0, 0, 0.25);
}
/* ============================================================
HERO CLONES — lime split panels (Scene 1)
============================================================ */
.hero-clone {
position: absolute;
inset: 0;
z-index: 30;
/* Welcome ground: pure --accent (#00FF00) with neutral white/black shading
only. No second green hue anywhere in the stack. */
background:
radial-gradient(ellipse 58% 52% at 10% 12%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 58%),
radial-gradient(ellipse 95% 95% at 50% 45%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.12) 100%),
var(--accent);
will-change: transform;
}
.hero-left {
/* Clip to left 50% (+1px overlap to eliminate antialiasing seam) */
clip-path: inset(0 calc(50% - 1px) 0 0);
}
.hero-right {
/* Clip to right 50% (+1px overlap) */
clip-path: inset(0 0 0 calc(50% - 1px));
}
/* ── Hero content (full-viewport centered) ──────────────── */
.hero-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
pointer-events: none;
}
.hero-word {
display: block;
font-family: "Montserrat", Arial, sans-serif;
font-weight: 900;
font-size: clamp(120px, 17vw, 330px);
line-height: 0.9;
letter-spacing: -0.04em;
color: #ffffff;
white-space: nowrap;
user-select: none;
will-change: transform, opacity, filter;
}
/* ── Floating hero objects ───────────────────────────────── */
/* Base: full-viewport positioned container for each object */
.hero-object {
position: absolute;
pointer-events: none; /* cursor zone is set on cursor-wrapper itself */
}
/* Ambient wave layer — GSAP handles will-change internally during animation */
.ambient-wrapper {
pointer-events: none;
}
/* Cursor-push layer — GSAP handles will-change internally during animation.
NOTE: deliberately NO will-change here to avoid creating a new stacking
context that would prevent .cap-img mix-blend-mode:multiply from
compositing against the .hero-clone gradient background. */
.cursor-wrapper {
pointer-events: auto; /* receives pointer events for push interaction */
cursor: default;
}
.cursor-wrapper img {
display: block;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/* ── Blob — upper-left ───────────────────────────────────── */
/*
In the reference image (16:9 canvas):
- blob center ≈ 11% X, 28% Y
- blob visible size ≈ 18–20% of viewport width
We anchor the object box to top: 0, left: 0 and use padding/size
so the blob centre lands at the right spot.
*/
.hero-object--blob {
top: 0;
left: 0;
}
.hero-object--blob .cursor-wrapper img {
width: clamp(160px, 18vw, 280px);
height: auto;
}
/* Blob position: top-left corner of the image sits at ~2% left, -2% top
(blob is partially cropped at top/left in the reference) */
.hero-object--blob .ambient-wrapper {
position: relative;
top: clamp(-20px, -3vh, -10px);
left: clamp(-10px, -1.5vw, -4px);
}
/* ── Cap — lower-right (inward near the 'e' of 'Vitajte') ──── */
/*
Positioned in the lower-right area, moved inward so the top of the
cap sits right beneath / slightly overlapping the right side ('jte')
of 'Vitajte', matching the reference composition.
*/
.hero-object--cap {
bottom: clamp(10px, 3vh, 50px);
right: clamp(25px, 8vw, 140px);
}
.hero-object--cap .cursor-wrapper img {
width: clamp(250px, 33vw, 500px);
height: auto;
}
.hero-object--cap .ambient-wrapper {
/* No offset push — sits right at the target location */
}
/* Cap: standalone transparent PNG asset */
.cap-img {
/* True alpha transparency */
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.scene2-content {
margin-left: clamp(24px, 5vw, 60px);
max-width: 520px;
}
.scene2-headline {
font-size: clamp(40px, 5.5vw, 64px);
}
.scene2-blob--2, .scene2-blob--4, .scene2-sphere--2 {
display: none; /* Keep clean on smaller tablet viewports */
}
.hero-float-card--1 {
right: 20px;
top: 90px;
}
.hero-float-card--2 {
right: 15px;
top: 290px;
}
.hero-float-card--3 {
right: 100px;
bottom: 50px;
}
}
@media (max-width: 900px) {
.hero-word {
font-size: clamp(64px, 14vw, 160px);
letter-spacing: -0.03em;
}
.site-header-motion {
padding: 24px 28px;
}
.scene-two {
flex-direction: column;
justify-content: flex-end;
}
.scene2-content {
margin-left: 24px;
margin-right: 24px;
margin-bottom: 20px;
padding-top: 80px;
z-index: 20;
}
.person-stage {
width: 100vw;
height: 75vh;
right: 0;
}
.hero-float-card {
display: none; /* Hide floating overlay cards on mobile/small-tablet to keep layout clean */
}
.scene2-sphere--1 {
bottom: 20px;
right: 15px;
width: 80px;
}
}
@media (max-width: 600px) {
.hero-word {
font-size: clamp(48px, 12vw, 100px);
letter-spacing: -0.02em;
}
.site-header-motion {
padding: 20px 20px;
}
.logo {
font-size: 18px;
}
.scene2-headline {
font-size: clamp(32px, 8.5vw, 44px);
}
.scene2-copy {
font-size: 14px;
}
.category-pill {
height: 42px;
padding: 0 14px 0 5px;
}
.pill-icon {
width: 32px;
height: 32px;
}
.pill-text {
font-size: 13px;
}
.hero-play-button {
width: 58px;
}
}
/* ============================================================
STAGE 3 — Dark Services Section (sticky card stack)
Discrete steps -- ONE scroll gesture plays ONE complete GSAP timeline
(no scrub, no scroll distance):
step 1 light -> dark gradient over the Hero; card 1 settles in
step 2 card 2 rises from below, card 1 drops to depth 1
step 3 card 3 rises, cards 2/1 drop to depth 1/2
step 4 card 4 rises, cards 3/2/1 drop to depth 1/2/3
step 5 the Projects panel rises over card 4
The section is one viewport tall and scrolls into place natively (that
upward travel IS the "dark layer rises from the bottom" transition out of
About). Once its top reaches the viewport top main.js engages the staged
region: scroll locks and gestures drive the state machine.
============================================================ */
#sluzby {
position: relative;
z-index: 2;
height: 100vh;
height: 100svh;
/* Dark charcoal ground + subtle square grid, per the reference */
background-color: #111214;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 72px 72px;
background-position: center center;
}
#svcStage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
/* ── Service Cards ─────────────────────────────────────── */
/* Every card shares one uniform, centered box inside the sticky stage --
sized well under the viewport so the dark grid stays visible on all four
sides. Centering via inset:0 + margin:auto (rather than the old edge-gutter
layout) leaves generous, even space above/below for the depth-stack "peek"
offsets from main.js, so those numbers didn't need to change. */
#svcStage {
--svc-card-w: clamp(320px, 80vw, 1550px);
--svc-card-h: clamp(360px, 68vh, 740px);
}
.svc-card {
position: absolute;
inset: 0;
margin: auto;
width: var(--svc-card-w);
height: var(--svc-card-h);
border-radius: clamp(16px, 2vw, 28px);
overflow: hidden;
/* Base dark card surface */
background: linear-gradient(145deg, #1c1e26 0%, #13141b 100%);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(28px, 4vw, 60px);
will-change: transform, opacity;
transform-origin: center top;
}
/* Pre-JS resting state. The sticky stage sits ON TOP of the Hero, so the cards
must already be parked off-stage in plain CSS — otherwise they cover the
Welcome screen for the split second before GSAP takes over. These values
mirror the gsap.set()/fromTo() in initServicesScroll().
The park distance must be measured against the STAGE, not the card's own
height. The card is centered, so its top sits (100svh - cardH)/2 from the
stage top; to push that top past the stage bottom it must travel
(100svh + cardH)/2 — i.e. 50svh + 50% — plus a buffer so the card's upward
box-shadow bleed is clipped too. A flat percentage (the old 108%) is height-
relative and silently stops clearing the viewport whenever the card is
shorter than the stage. */
.svc-card {
transform: translateY(calc(50vh + 50% + 72px)); /* fallback: no svh support */
transform: translateY(calc(50svh + 50% + 72px));
}
.svc-card--1 {
transform: translateY(14%);
opacity: 0;
}
/* z-index stacking — higher index = visually in front */
.svc-card--1 { z-index: 11; }
.svc-card--2 { z-index: 12; }
.svc-card--3 { z-index: 13; }
.svc-card--4 { z-index: 14; }
/* ============================================================
CARD 1 — full visual redesign ("Show")
Light lime -> cream stage-glow gradient, glossy decorative sphere/blob
accents, dark dominant headline for contrast, pill CTA + glass icon button.
Purely presentational: no width/height/z-index/timing changes, so the
entrance, depth-stacking and reverse scroll behave exactly as before.
============================================================ */
.svc-card--1 {
/* overflow:visible only here so the decor images can bleed past the
rounded edge like the reference; cards 2-4 keep overflow:hidden. */
overflow: visible;
justify-content: space-between;
border: 1px solid rgba(20, 22, 26, 0.06);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 255, 0, 0.12);
background:
radial-gradient(ellipse 58% 52% at 16% 88%, rgba(0, 255, 0, 0.85) 0%, transparent 62%),
radial-gradient(ellipse 52% 58% at 88% 12%, rgba(255, 255, 255, 0.9) 0%, transparent 66%),
/* Same #00FF00 throughout, thinned with alpha over white — no second hue */
linear-gradient(135deg,
rgba(0, 255, 0, 1) 0%,
rgba(0, 255, 0, 0.72) 32%,
rgba(0, 255, 0, 0.30) 62%,
rgba(0, 255, 0, 0.08) 100%),
linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
}
/* The dark-card accent glow doesn't suit the new light gradient. */
.svc-card--1 .svc-card-accent {
display: none;
}
/* ── Card 1 decorative sphere/blob accents ─────────────── */
/* Absolute, out of flex flow, and a child of .svc-card--1 so it inherits
whatever y/scale transform GSAP applies during depth-stacking -- the
decorations move and shrink together with the card, never independently. */
.svc-card-decor {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.svc-decor {
position: absolute;
display: block;
/* CA-021: obrázky majú intrinsické width/height v HTML (rezervácia boxu);
výšku vždy odvodí pomer strán, nikdy atribút. */
height: auto;
user-select: none;
-webkit-user-drag: none;
}
.svc-decor--sphere-lg {
width: clamp(88px, 8.5vw, 165px);
top: -9%;
right: -6%;
filter: drop-shadow(0 16px 34px rgba(0, 255, 0, 0.3));
}
.svc-decor--sphere-sm {
width: clamp(44px, 4vw, 74px);
top: 44%;
right: -3%;
filter: drop-shadow(0 10px 22px rgba(0, 255, 0, 0.26));
}
.svc-decor--blob-lg {
width: clamp(150px, 15vw, 260px);
bottom: -12%;
left: 19%;
filter: drop-shadow(0 18px 38px rgba(0, 255, 0, 0.32));
}
.svc-decor--blob-sm {
width: clamp(48px, 4.4vw, 76px);
top: 9%;
left: 37%;
filter: drop-shadow(0 8px 18px rgba(0, 255, 0, 0.24));
}
/* ── Card 1 typography — dark text for contrast on the light gradient ── */
.svc-card--1 .svc-card-num {
color: rgba(20, 22, 26, 0.34);
opacity: 0.85;
}
.svc-card--1 .svc-card-title {
font-size: clamp(40px, 6.5vw, 92px);
color: #14161A;
}
.svc-card--1 .svc-card-desc {
color: rgba(20, 22, 26, 0.60);
max-width: min(520px, 50vw);
}
/* ── Card 1 CTA row ─────────────────────────────────────── */
.svc-card-actions {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: clamp(20px, 3vw, 36px);
}
.svc-btn-cta {
display: inline-flex;
align-items: center;
gap: clamp(8px, 0.9vw, 12px);
padding: clamp(12px, 1.3vw, 16px) clamp(20px, 2.2vw, 28px);
border-radius: 999px;
border: none;
background: linear-gradient(135deg, rgba(0, 255, 0, 0.88) 0%, var(--accent) 100%);
color: #14161A;
font-family: inherit;
font-weight: 800;
font-size: clamp(14px, 1vw, 16px);
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: 0 10px 26px rgba(0, 255, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0, 255, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.14);
}
.svc-btn-cta svg {
width: clamp(15px, 1.1vw, 18px);
height: clamp(15px, 1.1vw, 18px);
}
.svc-btn-icon {
width: clamp(44px, 3.6vw, 54px);
height: clamp(44px, 3.6vw, 54px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 22, 26, 0.05);
border: 1.5px solid rgba(20, 22, 26, 0.16);
color: rgba(20, 22, 26, 0.62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.svc-btn-icon:hover {
background: rgba(20, 22, 26, 0.1);
border-color: rgba(20, 22, 26, 0.26);
}
.svc-btn-icon svg {
width: 46%;
height: 46%;
}
/* Card content layout */
.svc-card-inner {
position: relative;
z-index: 2;
}
.svc-card-num {
display: block;
font-size: clamp(60px, 9vw, 120px);
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1;
color: var(--accent);
opacity: 0.20;
margin-bottom: 8px;
user-select: none;
}
.svc-card-title {
font-size: clamp(34px, 5.5vw, 76px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.04;
color: #FFFFFF;
margin-bottom: clamp(12px, 1.5vw, 20px);
}
.svc-card-desc {
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 500;
line-height: 1.65;
color: rgba(255, 255, 255, 0.50);
max-width: min(600px, 55vw);
}
/* Decorative accent gradient on the right side of each card */
.svc-card-accent {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(
ellipse 60% 70% at 85% 50%,
rgba(0, 255, 0, 0.06) 0%,
transparent 70%
);
pointer-events: none;
}
/* Mobile adjustments for service cards */
@media (max-width: 768px) {
#svcStage {
--svc-card-w: clamp(280px, 90vw, 480px);
--svc-card-h: clamp(400px, 64vh, 620px);
}
.svc-card {
padding: clamp(22px, 5vw, 36px);
}
.svc-card-num {
font-size: clamp(48px, 12vw, 80px);
}
.svc-card-title {
font-size: clamp(28px, 7vw, 48px);
}
.svc-card--1 .svc-card-title {
font-size: clamp(32px, 9vw, 56px);
}
.svc-card-desc {
font-size: 14px;
max-width: 100%;
}
.svc-card--1 .svc-card-desc {
max-width: 100%;
}
.svc-decor--sphere-lg { width: clamp(60px, 15vw, 90px); }
.svc-decor--sphere-sm { width: clamp(34px, 8vw, 48px); }
.svc-decor--blob-lg { width: clamp(100px, 26vw, 160px); }
.svc-decor--blob-sm { width: clamp(34px, 8vw, 50px); }
}
/* ============================================================
STAGE 4 — PROJECTS
Normally an ordinary section in the document flow, so scrolling continues
naturally from here into Referencie.
During the staged Services region it gets `.is-staged`, which promotes it
to a fixed full-viewport panel parked one viewport below the fold. The
step-5 timeline lifts it to translateY(0) and collapses its top corners;
the reverse plays it back down. Nothing here is scroll-scrubbed. On
release the class is removed and the document is scrolled to this
section's top, so the swap is visually seamless.
============================================================ */
#projekty {
position: relative;
z-index: 3; /* above #sluzby (2) and the Hero (1) */
min-height: 100vh;
min-height: 100svh;
padding: clamp(48px, 7vh, 104px) clamp(20px, 4vw, 76px) clamp(64px, 9vh, 128px);
overflow: hidden; /* clips the decor that bleeds past the edges */
/* Light editorial ground + subtle large square grid, per the reference */
background-color: #F7F7F5;
background-image:
linear-gradient(rgba(20, 22, 26, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 22, 26, 0.055) 1px, transparent 1px);
background-size: 150px 150px;
background-position: center top;
border-radius: 0;
}
/* Staged: promoted to a fixed panel for the rise over Card 04. Rounded
leading edge + shadow cast upward, both collapsed by main.js as it settles. */
#projekty.is-staged {
position: fixed;
inset: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: hidden; /* gestures drive the region, never inner scroll */
overscroll-behavior: contain;
touch-action: none;
transform: translateY(100%);
border-radius: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) 0 0;
box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.45);
}
.projects-inner {
position: relative;
z-index: 2;
max-width: 1640px;
margin: 0 auto;
}
/* ── Huge editorial headline ─────────────────────────────── */
.projects-title {
font-size: clamp(64px, 15vw, 250px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 0.88;
color: #111214;
text-align: center;
margin-bottom: clamp(28px, 4vh, 60px);
user-select: none;
}
/* ── Two project cards ───────────────────────────────────── */
.projects-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2vw, 34px);
}
.project-card {
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: clamp(18px, 1.8vw, 30px);
padding: clamp(22px, 2.4vw, 44px);
box-shadow:
0 18px 44px rgba(20, 22, 26, 0.07),
0 2px 8px rgba(20, 22, 26, 0.04);
}
.project-card-top {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
gap: clamp(16px, 2vw, 34px);
align-items: center;
}
.project-num {
display: block;
font-size: clamp(26px, 2.4vw, 44px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: var(--accent);
margin-bottom: clamp(4px, 0.6vw, 10px);
}
.project-name {
font-size: clamp(22px, 2.3vw, 42px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.06;
color: #111214;
}
.project-rule {
display: block;
width: clamp(28px, 2.6vw, 46px);
height: 3px;
border-radius: 2px;
background: #111214;
margin: clamp(12px, 1.4vw, 22px) 0;
}
.project-desc {
font-size: clamp(13px, 1vw, 17px);
font-weight: 500;
line-height: 1.75;
color: rgba(20, 22, 26, 0.55);
}
.project-card-media {
border-radius: clamp(12px, 1.2vw, 20px);
overflow: hidden;
aspect-ratio: 3 / 2;
background: #ECECE8;
}
.project-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Card footer: stats + arrow ──────────────────────────── */
.project-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(12px, 1.5vw, 24px);
margin-top: clamp(18px, 2.2vw, 34px);
padding-top: clamp(14px, 1.8vw, 26px);
border-top: 1px solid rgba(20, 22, 26, 0.09);
}
.project-stats {
display: flex;
align-items: center;
gap: clamp(14px, 1.8vw, 30px);
min-width: 0;
}
.project-stat {
display: flex;
align-items: center;
gap: clamp(8px, 0.8vw, 13px);
min-width: 0;
}
/* Divider between the two stats, like the reference */
.project-stat + .project-stat {
padding-left: clamp(14px, 1.8vw, 30px);
border-left: 1px solid rgba(20, 22, 26, 0.09);
}
.project-stat-icon {
flex: 0 0 auto;
width: clamp(30px, 2.4vw, 42px);
height: clamp(30px, 2.4vw, 42px);
border-radius: 50%;
background: var(--accent);
color: #14161A;
display: flex;
align-items: center;
justify-content: center;
}
.project-stat-icon svg {
width: 50%;
height: 50%;
}
.project-stat-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.project-stat-text strong {
font-size: clamp(15px, 1.25vw, 22px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: #111214;
}
.project-stat-text small {
font-size: clamp(11px, 0.82vw, 14px);
font-weight: 500;
line-height: 1.3;
color: rgba(20, 22, 26, 0.5);
}
.project-arrow {
flex: 0 0 auto;
width: clamp(44px, 3.4vw, 62px);
height: clamp(44px, 3.4vw, 62px);
border-radius: 50%;
border: 1.5px solid rgba(20, 22, 26, 0.16);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.project-arrow:hover {
background: var(--accent);
border-color: var(--accent);
color: #14161A;
transform: translateY(-2px);
}
.project-arrow svg {
width: 42%;
height: 42%;
}
/* ── Floating glossy decor ───────────────────────────────── */
.proj-decor {
position: absolute;
z-index: 1;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.proj-decor--sphere-tl {
width: clamp(46px, 5vw, 92px);
top: clamp(10px, 2.5vh, 40px);
left: clamp(-18px, 1vw, 40px);
filter: drop-shadow(0 12px 26px rgba(0, 255, 0, 0.28));
}
.proj-decor--blob-tr {
width: clamp(120px, 15vw, 290px);
top: clamp(-30px, 5vh, 90px);
right: clamp(-70px, -3vw, -20px);
filter: drop-shadow(0 18px 40px rgba(0, 255, 0, 0.3));
}
.proj-decor--blob-bl {
width: clamp(120px, 15vw, 280px);
bottom: clamp(-50px, -2vh, 20px);
left: clamp(-80px, -4vw, -20px);
filter: drop-shadow(0 18px 40px rgba(0, 255, 0, 0.3));
}
.proj-decor--sphere-br {
width: clamp(40px, 4.4vw, 82px);
bottom: clamp(30px, 8vh, 120px);
right: clamp(10px, 3vw, 90px);
filter: drop-shadow(0 12px 26px rgba(0, 255, 0, 0.28));
}
/* ── Projects: tablet / mobile ───────────────────────────── */
@media (max-width: 1024px) {
.project-card-top {
grid-template-columns: minmax(0, 1fr);
}
.project-card-media {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 768px) {
.projects-grid {
grid-template-columns: minmax(0, 1fr);
}
.projects-title {
font-size: clamp(48px, 17vw, 96px);
}
.project-card-foot {
flex-wrap: wrap;
}
.project-stat + .project-stat {
padding-left: clamp(10px, 3vw, 18px);
}
}
/* ============================================================
DECOR LEVITATION ISOLATION
Three systems must never write transforms to the same element:
A) step transitions -> the panel / card element
B) ambient levitation -> .svc-decor / .proj-decor ![]()
C) hover -> its own elements
The decor images are children of the panel that moves, so the panel's
transform and the image's levitation transform compose naturally instead
of overwriting each other. GSAP owns x/y/rotation on the ![]()
only.
Any static rotation therefore has to live on a wrapper, never on the img.
============================================================ */
.svc-decor,
.proj-decor {
will-change: transform;
}
/* ============================================================
SHARED SECTION PRIMITIVES
============================================================ */
.section-inner {
position: relative;
z-index: 2;
max-width: 1640px;
margin: 0 auto;
}
/* Light editorial ground + subtle grid, shared by About / Reviews */
.about,
.reviews {
position: relative;
padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 76px);
background-color: #F7F7F5;
background-image:
linear-gradient(rgba(20, 22, 26, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 22, 26, 0.055) 1px, transparent 1px);
background-size: 150px 150px;
background-position: center top;
overflow: hidden;
}
.giant-heading {
font-size: clamp(56px, 13vw, 230px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 0.88;
color: #111214;
text-transform: uppercase;
text-align: center;
margin-bottom: clamp(28px, 5vh, 68px);
user-select: none;
}
/* Vertical mask reveal -- the inner span is what GSAP moves */
[data-mask-reveal] { overflow: hidden; }
[data-mask-reveal] .mask-inner { display: block; }
.accent-dot { color: var(--accent); }
/* Placeholder slots for assets that are not supplied yet.
Deliberately obvious so they are easy to find and replace. */
.media-slot {
width: 100%;
height: 100%;
min-height: 180px;
border-radius: inherit;
border: 2px dashed rgba(20, 22, 26, 0.18);
background: rgba(20, 22, 26, 0.035);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
padding: 16px;
}
.media-slot span {
font-size: clamp(12px, 1vw, 15px);
font-weight: 800;
color: rgba(20, 22, 26, 0.55);
letter-spacing: -0.01em;
}
.media-slot small {
font-size: 11px;
font-weight: 600;
color: rgba(20, 22, 26, 0.35);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Shared accent button */
.btn-accent {
display: inline-flex;
align-items: center;
gap: clamp(8px, 0.9vw, 12px);
min-height: 48px;
padding: clamp(12px, 1.3vw, 16px) clamp(20px, 2.2vw, 30px);
border: none;
border-radius: 999px;
background: var(--accent);
color: #0B0D10;
font-family: inherit;
font-weight: 800;
font-size: clamp(13px, 1vw, 15px);
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow: 0 10px 26px rgba(0, 255, 0, 0.28);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(0, 255, 0, 0.4);
}
.btn-accent svg { width: 17px; height: 17px; }
.btn-light {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 14px 26px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid rgba(20, 22, 26, 0.10);
color: #111214;
font-weight: 800;
font-size: clamp(13px, 1vw, 15px);
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 12px 30px rgba(20, 22, 26, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(20, 22, 26, 0.13); }
.btn-light svg { width: 16px; height: 16px; }
.google-g {
font-weight: 900;
font-size: 18px;
color: #4285F4;
line-height: 1;
}
/* ============================================================
NAV OVERLAY
============================================================ */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 85;
background: rgba(11, 13, 16, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(24px, 4vh, 48px);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.nav-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav-list {
list-style: none;
text-align: center;
display: flex;
flex-direction: column;
gap: clamp(6px, 1.4vh, 16px);
}
.nav-list a {
display: block;
padding: 10px 24px;
font-size: clamp(28px, 5vw, 62px);
font-weight: 900;
letter-spacing: -0.04em;
color: #FFFFFF;
text-decoration: none;
transition: color 0.22s ease, transform 0.22s ease;
}
.nav-list a:hover,
.nav-list a:focus-visible { color: var(--accent); transform: translateX(6px); }
.nav-cta {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 52px;
padding: 15px 30px;
border-radius: 999px;
background: var(--accent);
color: #0B0D10;
font-weight: 800;
font-size: clamp(13px, 1.1vw, 16px);
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 12px 32px rgba(0, 255, 0, 0.32);
}
.nav-cta svg { width: 17px; height: 17px; }
/* Hamburger -> X */
.menu-line { transition: transform 0.28s ease, opacity 0.2s ease, width 0.25s ease; }
.menu-toggle.is-open .menu-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open .menu-line:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-toggle.is-open {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.menu-toggle.is-open .menu-line { background: #FFFFFF; }
/* ============================================================
SECTION 3 — ZAKLADATEL PROJEKTOV (compact belt)
============================================================ */
.founder {
position: relative;
padding: clamp(56px, 10vh, 130px) clamp(20px, 4vw, 76px);
background-color: #F7F7F5;
background-image:
linear-gradient(rgba(20, 22, 26, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 22, 26, 0.05) 1px, transparent 1px);
background-size: 150px 150px;
background-position: center center;
overflow: hidden;
}
.founder-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.founder-obj { position: absolute; }
.founder-obj img { display: block; width: 100%; height: auto; }
.founder-obj--l {
width: clamp(70px, 7vw, 130px);
left: clamp(-30px, 1vw, 40px);
top: 38%;
filter: drop-shadow(0 14px 30px rgba(0, 255, 0, 0.3));
}
.founder-obj--r {
width: clamp(90px, 9vw, 165px);
right: clamp(-40px, 0vw, 30px);
top: 40%;
filter: drop-shadow(0 16px 34px rgba(0, 255, 0, 0.3));
}
.founder-belt {
position: relative;
z-index: 2;
max-width: 1500px;
margin: 0 auto;
background: #111214;
border-radius: clamp(18px, 2vw, 30px);
box-shadow: 0 26px 60px rgba(20, 22, 26, 0.20);
overflow: hidden;
}
.founder-belt-inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(16px, 2vw, 34px);
padding: clamp(22px, 3vw, 40px) clamp(24px, 3.4vw, 56px);
}
.founder-role { display: flex; align-items: center; gap: 12px; min-width: 0; }
.founder-role-icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.founder-role-icon svg { width: 100%; height: 100%; }
.founder-role-text {
font-size: clamp(11px, 0.95vw, 14px);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.founder-brand {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 22px);
min-width: 0;
padding-left: clamp(16px, 2vw, 34px);
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.founder-brand-text { display: flex; flex-direction: column; min-width: 0; }
.founder-brand-text strong {
font-size: clamp(13px, 1.15vw, 19px);
font-weight: 800;
letter-spacing: -0.01em;
color: #FFFFFF;
text-transform: uppercase;
}
.founder-brand-text small {
font-size: clamp(11px, 0.9vw, 14px);
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
/* Placeholder slot for the real brand logos */
.brand-logo-slot {
flex: 0 0 auto;
width: clamp(46px, 4.4vw, 72px);
height: clamp(38px, 3.4vw, 56px);
border-radius: 10px;
border: 2px dashed rgba(255, 255, 255, 0.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
/* ============================================================
SECTION 4 — O MNE
============================================================ */
.about-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.about-obj { position: absolute; }
.about-obj img { display: block; width: 100%; height: auto; }
.about-obj--tl { width: clamp(50px, 5vw, 96px); top: clamp(10px, 3vh, 60px); left: clamp(-24px, 0vw, 30px); filter: drop-shadow(0 12px 26px rgba(0,255,0,0.28)); }
.about-obj--tr { width: clamp(96px, 11vw, 200px); top: clamp(-20px, 2vh, 50px); right: clamp(-60px, -2vw, 0px); filter: drop-shadow(0 18px 38px rgba(0,255,0,0.3)); }
.about-obj--bl { width: clamp(96px, 11vw, 210px); bottom: clamp(-40px, -1vh, 20px); left: clamp(-70px, -3vw, 0px); filter: drop-shadow(0 18px 38px rgba(0,255,0,0.3)); }
.about-obj--br { width: clamp(46px, 4.4vw, 84px); bottom: clamp(30px, 8vh, 120px); right: clamp(6px, 2vw, 70px); filter: drop-shadow(0 12px 26px rgba(0,255,0,0.28)); }
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 70px);
align-items: center;
}
.about-media {
border-radius: clamp(16px, 1.8vw, 28px);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: 0 26px 60px rgba(20, 22, 26, 0.14);
background: #ECECE8;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-lead {
font-size: clamp(22px, 2.4vw, 42px);
font-weight: 800;
line-height: 1.24;
letter-spacing: -0.03em;
color: #111214;
margin-bottom: clamp(16px, 2vh, 26px);
}
.about-more {
overflow: hidden;
margin-bottom: clamp(16px, 2vh, 26px);
}
.about-more p {
font-size: clamp(14px, 1.05vw, 17px);
font-weight: 500;
line-height: 1.75;
color: rgba(20, 22, 26, 0.6);
margin-bottom: 14px;
}
.about-more p:last-child { margin-bottom: 0; }
.about-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 20px);
margin-bottom: clamp(20px, 3vh, 34px);
}
.fact-card {
background: #FFFFFF;
border-radius: clamp(12px, 1.2vw, 20px);
padding: clamp(14px, 1.6vw, 24px);
box-shadow: 0 14px 34px rgba(20, 22, 26, 0.07);
display: flex;
flex-direction: column;
gap: 4px;
}
.fact-icon {
width: clamp(30px, 2.4vw, 42px);
height: clamp(30px, 2.4vw, 42px);
border-radius: 50%;
background: var(--accent);
color: #0B0D10;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.fact-icon svg { width: 50%; height: 50%; }
.fact-card strong {
font-size: clamp(15px, 1.35vw, 24px);
font-weight: 900;
letter-spacing: -0.02em;
color: #111214;
text-transform: uppercase;
}
.fact-card small {
font-size: clamp(11px, 0.85vw, 14px);
font-weight: 600;
color: rgba(20, 22, 26, 0.45);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ============================================================
SECTION 5 — extra service card content styles
============================================================ */
.svc-card-lead {
font-size: clamp(14px, 1.15vw, 19px);
font-weight: 800;
line-height: 1.4;
color: rgba(20, 22, 26, 0.9);
margin-bottom: 8px;
max-width: min(560px, 60%);
}
.svc-card--2 .svc-card-lead,
.svc-card--3 .svc-card-lead,
.svc-card--4 .svc-card-lead { color: rgba(255, 255, 255, 0.92); }
.svc-card-tag {
font-size: clamp(12px, 1vw, 15px);
font-weight: 900;
letter-spacing: 0.06em;
color: var(--accent);
}
.svc-card--2 .svc-btn-cta,
.svc-card--3 .svc-btn-cta,
.svc-card--4 .svc-btn-cta {
background: var(--accent);
color: #0B0D10;
box-shadow: 0 10px 26px rgba(0, 255, 0, 0.26);
}
.svc-card-title { text-transform: uppercase; }
/* ============================================================
SECTION 7 — REFERENCIE
============================================================ */
.reviews-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rev-obj { position: absolute; }
.rev-obj img { display: block; width: 100%; height: auto; }
.rev-obj--tl { width: clamp(46px, 4.4vw, 84px); top: clamp(14px, 3vh, 60px); left: clamp(-20px, 0vw, 28px); filter: drop-shadow(0 12px 26px rgba(0,255,0,0.28)); }
.rev-obj--tr { width: clamp(100px, 12vw, 215px); top: clamp(-24px, 1vh, 40px); right: clamp(-64px, -2vw, 0px); filter: drop-shadow(0 18px 38px rgba(0,255,0,0.3)); }
.rev-obj--br { width: clamp(44px, 4vw, 76px); bottom: clamp(60px, 14vh, 200px); right: clamp(4px, 1vw, 40px); filter: drop-shadow(0 12px 26px rgba(0,255,0,0.28)); }
.reviews-top {
display: grid;
grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr);
gap: clamp(20px, 3vw, 48px);
align-items: start;
margin-bottom: clamp(24px, 4vh, 48px);
}
.rating-score {
font-size: clamp(48px, 6.5vw, 110px);
font-weight: 900;
letter-spacing: -0.05em;
line-height: 0.9;
color: #111214;
display: flex;
align-items: center;
gap: 10px;
}
.rating-star { color: var(--accent); font-size: 0.72em; }
.rating-label {
font-size: clamp(14px, 1.4vw, 24px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.01em;
color: #111214;
margin-bottom: clamp(16px, 2.4vh, 28px);
}
.rating-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill {
min-height: 44px;
padding: 11px 20px;
border-radius: 999px;
border: 1px solid rgba(20, 22, 26, 0.10);
background: #FFFFFF;
color: #111214;
font-family: inherit;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 22px rgba(20, 22, 26, 0.06);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.filter-pill:hover { transform: translateY(-2px); }
.filter-pill.is-active {
background: var(--accent);
border-color: var(--accent);
color: #0B0D10;
}
.review-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 26px);
}
.review-card {
background: #FFFFFF;
border-radius: clamp(14px, 1.4vw, 22px);
padding: clamp(18px, 2vw, 32px);
box-shadow: 0 16px 40px rgba(20, 22, 26, 0.07);
display: flex;
flex-direction: column;
gap: 12px;
}
.review-stars { color: var(--accent); font-size: 17px; letter-spacing: 2px; }
.review-name {
font-size: clamp(14px, 1.15vw, 19px);
font-weight: 800;
letter-spacing: -0.01em;
color: #111214;
}
.review-text {
font-size: clamp(12.5px, 0.95vw, 15px);
font-weight: 500;
line-height: 1.7;
color: rgba(20, 22, 26, 0.6);
flex: 1;
}
.review-quote { font-size: 30px; font-weight: 900; color: var(--accent); line-height: 0.6; }
/* Honest marker: these are development placeholders, not real reviews. */
.review-notice {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 999px;
border: 1px dashed rgba(20, 22, 26, 0.25);
background: rgba(20, 22, 26, 0.04);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(20, 22, 26, 0.5);
justify-self: start;
}
.review-gallery {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 20px);
margin-bottom: clamp(24px, 4vh, 48px);
}
.gallery-item {
border-radius: clamp(12px, 1.2vw, 20px);
overflow: hidden;
aspect-ratio: 4 / 3;
background: #ECECE8;
box-shadow: 0 14px 34px rgba(20, 22, 26, 0.08);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reviews-cta { display: flex; justify-content: center; }
/* ============================================================
SECTION 8 — KONTAKT (interactive quote form)
============================================================ */
.contact {
position: relative;
padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 76px);
background-color: #0B0D10;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 90px 90px;
background-position: center top;
overflow: hidden;
}
.contact-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.con-obj { position: absolute; }
.con-obj img { display: block; width: 100%; height: auto; }
.con-obj--tl { width: clamp(90px, 10vw, 180px); top: clamp(-20px, 1vh, 40px); left: clamp(-50px, -2vw, 10px); filter: drop-shadow(0 18px 40px rgba(0,255,0,0.35)); }
.con-obj--tr { width: clamp(60px, 6vw, 118px); top: clamp(10px, 3vh, 70px); right: clamp(-16px, 1vw, 50px); filter: drop-shadow(0 14px 30px rgba(0,255,0,0.32)); }
.con-obj--bl { width: clamp(90px, 10vw, 190px); bottom: clamp(-30px, 0vh, 40px); left: clamp(-40px, -1vw, 20px); filter: drop-shadow(0 18px 40px rgba(0,255,0,0.35)); }
.con-obj--br { width: clamp(56px, 5.4vw, 105px); bottom: clamp(40px, 10vh, 150px); right: clamp(-10px, 1vw, 46px); filter: drop-shadow(0 14px 30px rgba(0,255,0,0.32)); }
.contact-grid {
position: relative;
z-index: 2;
max-width: 1640px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 90px);
align-items: center;
}
.contact-title {
font-size: clamp(48px, 8vw, 128px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 0.92;
color: #FFFFFF;
text-transform: uppercase;
margin-bottom: clamp(16px, 2.4vh, 28px);
}
.contact-sub {
font-size: clamp(14px, 1.15vw, 19px);
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
margin-bottom: clamp(26px, 4vh, 46px);
}
.contact-direct { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); flex-wrap: wrap; }
.direct-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
min-width: 64px;
}
.direct-icon {
width: clamp(48px, 4vw, 64px);
height: clamp(48px, 4vw, 64px);
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.16);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.direct-icon svg { width: 45%; height: 45%; }
.direct-item:hover .direct-icon {
background: rgba(0, 255, 0, 0.12);
border-color: rgba(0, 255, 0, 0.45);
transform: translateY(-3px);
}
.direct-label {
font-size: clamp(11px, 0.9vw, 14px);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FFFFFF;
}
/* Quote card */
.quote-card {
background: #F4F4F1;
border-radius: clamp(18px, 2vw, 32px);
padding: clamp(24px, 3vw, 48px);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
}
.quote-progress { margin-bottom: clamp(20px, 3vh, 34px); }
.quote-progress-label {
font-size: clamp(11px, 0.9vw, 14px);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #111214;
margin-bottom: 12px;
}
.quote-progress-track {
height: 5px;
border-radius: 3px;
background: rgba(20, 22, 26, 0.10);
overflow: hidden;
}
.quote-progress-bar {
height: 100%;
width: 12.5%;
border-radius: 3px;
background: var(--accent);
transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fixed-height viewport keeps the card from jumping between steps */
.quote-viewport {
position: relative;
overflow: hidden;
min-height: clamp(240px, 34vh, 330px);
}
.quote-step { will-change: transform, opacity; }
.quote-question {
font-size: clamp(19px, 1.9vw, 32px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.16;
color: #111214;
text-transform: uppercase;
margin-bottom: clamp(14px, 2vh, 22px);
}
.quote-help {
font-size: clamp(12.5px, 0.95vw, 15px);
font-weight: 500;
line-height: 1.6;
color: rgba(20, 22, 26, 0.55);
margin: -6px 0 clamp(14px, 2vh, 20px);
}
.quote-input,
.quote-textarea {
width: 100%;
min-height: 52px;
padding: 15px 18px;
border-radius: 14px;
border: 1.5px solid rgba(20, 22, 26, 0.12);
background: #FFFFFF;
font-family: inherit;
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 500;
color: #111214;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-textarea { min-height: clamp(120px, 18vh, 170px); resize: vertical; line-height: 1.6; }
.quote-input::placeholder,
.quote-textarea::placeholder { color: rgba(20, 22, 26, 0.34); }
.quote-input:focus,
.quote-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(0, 255, 0, 0.16);
}
.quote-field + .quote-field { margin-top: 12px; }
.quote-label {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(20, 22, 26, 0.55);
margin-bottom: 7px;
}
/* Option grid */
.quote-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.quote-option {
min-height: 52px;
padding: 14px 18px;
border-radius: 14px;
border: 1.5px solid rgba(20, 22, 26, 0.12);
background: #FFFFFF;
font-family: inherit;
font-size: clamp(13px, 1vw, 15px);
font-weight: 700;
color: #111214;
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quote-option:hover { transform: translateY(-2px); border-color: rgba(0, 255, 0, 0.55); }
.quote-option:focus-visible { outline: 3px solid rgba(0, 255, 0, 0.5); outline-offset: 2px; }
.quote-option.is-selected {
border-color: var(--accent);
background: rgba(0, 255, 0, 0.10);
}
/* Consent */
.quote-consent {
display: flex;
align-items: flex-start;
gap: 11px;
margin-top: 14px;
font-size: clamp(12px, 0.9vw, 14px);
font-weight: 500;
line-height: 1.55;
color: rgba(20, 22, 26, 0.6);
cursor: pointer;
}
.quote-consent input {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
accent-color: #00CC00;
cursor: pointer;
}
/* Inline validation -- reserved space so nothing shifts */
.quote-error {
min-height: 20px;
margin-top: 8px;
font-size: 12.5px;
font-weight: 700;
color: #C81E1E;
opacity: 0;
transition: opacity 0.2s ease;
}
.quote-error.is-visible { opacity: 1; }
/* Nav row */
.quote-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: clamp(18px, 2.6vh, 30px);
padding-top: clamp(16px, 2.2vh, 26px);
border-top: 1px solid rgba(20, 22, 26, 0.10);
}
.quote-back {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 12px 18px 12px 12px;
border: none;
border-radius: 999px;
background: transparent;
font-family: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(20, 22, 26, 0.5);
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease;
}
.quote-back-icon {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(20, 22, 26, 0.16);
display: flex;
align-items: center;
justify-content: center;
}
.quote-back-icon svg { width: 16px; height: 16px; }
.quote-back:hover { color: #111214; }
.quote-back:disabled { opacity: 0.35; cursor: not-allowed; }
.quote-next {
display: inline-flex;
align-items: center;
gap: 11px;
min-height: 52px;
padding: 15px 28px;
border: none;
border-radius: 999px;
background: var(--accent);
color: #0B0D10;
font-family: inherit;
font-size: clamp(13px, 1vw, 15px);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0, 255, 0, 0.3);
transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}
.quote-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 255, 0, 0.42); }
.quote-next:disabled { opacity: 0.6; cursor: progress; }
.quote-next svg { width: 17px; height: 17px; }
.quote-next.is-hidden { visibility: hidden; pointer-events: none; }
.quote-done { text-align: center; padding: clamp(20px, 5vh, 60px) 0; }
.quote-done h3 {
font-size: clamp(20px, 2.2vw, 36px);
font-weight: 900;
letter-spacing: -0.03em;
text-transform: uppercase;
color: #111214;
margin-bottom: 14px;
}
.quote-done p {
font-size: clamp(13px, 1vw, 16px);
font-weight: 500;
line-height: 1.7;
color: rgba(20, 22, 26, 0.6);
max-width: 460px;
margin: 0 auto;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: #0B0D10;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: clamp(32px, 5vh, 56px) clamp(20px, 4vw, 76px);
}
.footer-inner {
max-width: 1640px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.footer-brand {
font-size: clamp(16px, 1.4vw, 22px);
font-weight: 900;
letter-spacing: -0.03em;
color: #FFFFFF;
}
.footer-contact { display: flex; gap: 22px; }
.footer-contact a {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-contact a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.72);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer-social a svg { width: 19px; height: 19px; }
.footer-social a:hover { color: var(--accent); border-color: rgba(0, 255, 0, 0.45); background: rgba(0, 255, 0, 0.08); }
.footer-legal {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.about-grid,
.contact-grid { grid-template-columns: minmax(0, 1fr); }
.reviews-top { grid-template-columns: minmax(0, 1fr); }
.review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.founder-belt-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.founder-brand { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
}
@media (max-width: 768px) {
.review-cards { grid-template-columns: minmax(0, 1fr); }
.about-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fact-card { padding: 12px; }
.contact-intro { display: flex; flex-direction: column; }
.contact-direct { order: 3; margin-top: 26px; justify-content: space-between; width: 100%; }
.quote-card { padding: 20px; }
.quote-viewport { min-height: clamp(260px, 42vh, 380px); }
.quote-options { grid-template-columns: minmax(0, 1fr); }
.quote-nav { gap: 10px; }
.quote-next { padding: 14px 20px; flex: 1; justify-content: center; }
.footer-inner { flex-direction: column; text-align: center; }
.nav-list a { font-size: clamp(26px, 8vw, 40px); }
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* Projects hover expansion (desktop) — grid columns only, so the cards
own transform stays free for the staged Projects timeline. */
.projects-grid {
transition: grid-template-columns 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
.projects-grid { transition: none; }
}
/* ============================================================
FINAL REPAIR PASS
============================================================ */
/* ── Supplied Christian Alex logo ───────────────────────── */
/* Never recoloured, no extra outline/glow/shadow -- the artwork already
carries its own outline. */
.logo {
display: block;
line-height: 0;
}
.logo img {
width: clamp(112px, 11vw, 170px);
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.site-header.on-dark .logo img { filter: none; }
.footer-brand img {
width: clamp(120px, 12vw, 180px);
height: auto;
display: block;
}
/* ── O mne photograph ───────────────────────────────────── */
/* Explicit ratio + cover so there is no CLS and the speaker stays readable. */
.about-media {
position: relative;
aspect-ratio: 3 / 2;
}
.about-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%; /* keeps head + microphone in frame */
display: block;
transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-media:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
.about-media img { transition: none; }
.about-media:hover img { transform: none; }
}
/* Giant headings must never be clipped by the viewport edge. The mask
reveal needs overflow:hidden, so the safety margin lives on the section. */
.about,
.reviews {
padding-top: clamp(96px, 13vh, 190px);
}
.giant-heading {
padding-top: 0.06em; /* room for ascender inside the mask */
padding-bottom: 0.06em; /* and descenders, so nothing is shaved */
}
/* ── Referencie gallery ─────────────────────────────────── */
.gallery-item {
position: relative;
aspect-ratio: 2 / 1;
}
.gallery-item img {
transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 255, 0, 0) 55%, rgba(0, 255, 0, 0.16) 100%);
opacity: 0;
transition: opacity 460ms ease;
pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.gallery-item img { transition: none; }
.gallery-item:hover img { transform: none; }
}
/* ── Official multicolour Google G ──────────────────────── */
/* Supplied asset — never recoloured, never monochromed. */
.google-g {
width: 22px;
height: 22px;
display: inline-block;
flex: 0 0 auto;
vertical-align: middle;
}
.rating-label {
display: flex;
align-items: center;
gap: 9px;
}
.rating-label .google-g { width: 24px; height: 24px; }
/* ── Projects hover stability ───────────────────────────── */
/* Titles keep a stable minimum column so the line count can never change
while the grid ratio animates. */
.project-card-text { min-width: 0; }
.project-name {
text-wrap: balance;
overflow-wrap: normal;
}
.project-card {
transition: box-shadow 560ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: auto;
}
.project-card.is-active {
box-shadow: 0 26px 60px rgba(20, 22, 26, 0.13), 0 0 0 1px rgba(0, 255, 0, 0.18);
}
/* Media scales gently and stays anchored inside its own clip. */
.project-card-media { overflow: hidden; }
.project-card-media img {
transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
object-position: center center;
}
.project-card.is-active .project-card-media img { transform: scale(1.035); }
.project-arrow {
transition: background 380ms ease, border-color 380ms ease,
color 380ms ease, transform 380ms ease;
}
.project-card.is-active .project-arrow {
background: var(--accent);
border-color: var(--accent);
color: #0B0D10;
}
/* Touch: no hover resizing, whole card is a tap target. */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
.projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.project-card.is-active .project-card-media img { transform: none; }
}
@media (max-width: 768px) {
.projects-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
.project-card,
.project-card-media img,
.project-arrow { transition: none; }
}
/* ── Soft section handoffs ──────────────────────────────── */
/* A shared fog band at the light↔dark boundaries so no frame shows a hard
cut. The band belongs to the incoming section, so the outgoing one stays
readable through it while the two overlap. */
#sluzby::before,
.contact::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: clamp(90px, 13vh, 190px);
pointer-events: none;
z-index: 1;
}
#sluzby::before {
background: linear-gradient(180deg, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, 0.55) 45%, #111214 100%);
}
.contact::before {
background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0%, rgba(11, 13, 16, 0.6) 45%, #0B0D10 100%);
}
/* The fog must sit under the stage content, never over the cards. */
#svcStage { z-index: 2; }
.contact-grid { z-index: 2; }
/* Continuity orb carried across the O mne → Služby boundary. */
.handoff-orb {
position: absolute;
top: calc(-1 * clamp(40px, 6vh, 90px));
left: clamp(4%, 8vw, 14%);
width: clamp(64px, 7vw, 130px);
z-index: 3;
pointer-events: none;
}
.handoff-orb img { width: 100%; height: auto; display: block;
filter: drop-shadow(0 16px 34px rgba(0, 255, 0, 0.35)); }
/* ── Decorative layers never take pointer input ─────────── */
.svc-card-decor,
.proj-decor,
.founder-decor,
.about-decor,
.reviews-decor,
.contact-decor,
.handoff-orb { pointer-events: none; }
/* ── Visible focus states ───────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
}
/* ============================================================
HEADER CLEARANCE
The supplied logo is 4:3, so sizing it by WIDTH made the fixed header
~195px tall and the giant headings slid underneath it. Size the logo by
height instead, publish that height as a token, and give every anchored
section top padding + scroll-margin derived from it.
============================================================ */
:root {
--logo-h: clamp(40px, 3.4vw, 58px);
--header-pad: clamp(14px, 1.8vw, 26px);
--header-h: calc(var(--logo-h) + (2 * var(--header-pad)));
}
.site-header-motion { padding: var(--header-pad) clamp(20px, 5vw, 72px); }
.logo img {
height: var(--logo-h);
width: auto;
}
/* Anchored sections clear the fixed header, both on scroll and on jump. */
#o-mne, #sluzby, #projekty, #referencie, #kontakt, #zakladatel {
scroll-margin-top: var(--header-h);
}
.about, .reviews {
padding-top: calc(var(--header-h) + clamp(34px, 6vh, 96px));
}
#projekty { padding-top: calc(var(--header-h) + clamp(28px, 5vh, 80px)); }
.contact { padding-top: calc(var(--header-h) + clamp(34px, 6vh, 96px)); }
@media (max-width: 768px) {
:root { --logo-h: clamp(34px, 9vw, 46px); }
}
/* ============================================================
NEW HERO COMPOSITION
Rebuilt semantically -- no flattened mockup is used as a background.
============================================================ */
.scene-two {
display: block; /* was flex; the new layout is absolute */
background: #FBFCFB;
}
/* Subtle light-gray grid */
.hero-grid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(rgba(20, 22, 26, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 22, 26, 0.045) 1px, transparent 1px);
background-size: 132px 132px;
background-position: center center;
}
/* Soft green stage glow behind Christian */
.hero-stage-glow {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
width: clamp(420px, 46vw, 900px);
height: clamp(420px, 52vh, 820px);
z-index: 2;
pointer-events: none;
background: radial-gradient(circle,
rgba(0, 255, 0, 0.30) 0%,
rgba(0, 255, 0, 0.12) 40%,
rgba(0, 255, 0, 0) 68%);
filter: blur(30px);
}
/* Oversized backdrop wordmark hugging the bottom edge */
.hero-backdrop-name {
position: absolute;
left: 50%;
bottom: clamp(-26px, -1.6vw, -6px);
transform: translateX(-50%);
z-index: 3;
width: 100%;
text-align: center;
font-weight: 900;
font-size: clamp(72px, 15.5vw, 260px);
line-height: 0.82;
letter-spacing: -0.045em;
text-transform: uppercase;
color: #111214;
white-space: nowrap;
user-select: none;
pointer-events: none;
}
.hero-name-word,
.hero-reveal-line,
.hero-reveal-item {
will-change: transform, opacity, filter;
}
.hero-name-word { display: inline-block; }
.hero-reveal-line { display: block; }
/* ── Left column ─────────────────────────────────────────── */
.scene2-content {
position: absolute;
z-index: 16;
left: clamp(24px, 4.4vw, 84px);
top: 50%;
transform: translateY(-54%);
max-width: min(46vw, 640px);
margin-left: 0;
padding-top: 0;
}
.hero-eyebrow {
font-size: clamp(11px, 0.95vw, 15px);
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #111214;
margin-bottom: clamp(10px, 1.4vh, 20px);
}
.scene2-headline {
font-size: clamp(42px, 5.4vw, 88px);
line-height: 0.98;
letter-spacing: -0.045em;
margin-bottom: clamp(20px, 3vh, 38px);
}
/* ── Right column: proof cards + CTA ─────────────────────── */
.hero-proof {
position: absolute;
z-index: 16;
right: clamp(20px, 3.4vw, 66px);
top: 50%;
transform: translateY(-50%);
width: clamp(240px, 24vw, 350px);
display: flex;
flex-direction: column;
gap: clamp(10px, 1.4vh, 18px);
}
/* The three proof cards reuse .hero-float-card so the existing Welcome->Hero
entrance timeline keeps animating them unchanged -- only the internal
layout and placement changed. */
.hero-proof .hero-float-card {
position: static;
width: 100%;
}
.hero-proof .card-inner {
display: flex;
align-items: center;
gap: clamp(12px, 1.1vw, 18px);
background: #FFFFFF;
border-radius: clamp(14px, 1.3vw, 22px);
padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.5vw, 26px);
border: 1px solid rgba(20, 22, 26, 0.05);
box-shadow: 0 14px 34px rgba(20, 22, 26, 0.08), 0 2px 6px rgba(20, 22, 26, 0.04);
backdrop-filter: none;
}
.hero-proof .card-icon-circle {
flex: 0 0 auto;
width: clamp(38px, 3vw, 52px);
height: clamp(38px, 3vw, 52px);
border-radius: 50%;
background: var(--accent);
color: #0B0D10;
display: flex;
align-items: center;
justify-content: center;
}
.hero-proof .card-icon-circle svg { width: 48%; height: 48%; }
.hero-proof .card-copy { display: flex; flex-direction: column; min-width: 0; }
.hero-proof .card-label,
.hero-proof .card-sub {
font-size: clamp(10px, 0.78vw, 13px);
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(20, 22, 26, 0.45);
line-height: 1.3;
}
.hero-proof .card-stat {
font-size: clamp(18px, 1.7vw, 30px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.12;
color: #111214;
}
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(9px, 0.9vw, 14px);
min-height: 56px;
padding: clamp(15px, 1.5vw, 21px) clamp(18px, 1.8vw, 28px);
border-radius: clamp(14px, 1.3vw, 22px);
background: var(--accent);
color: #0B0D10;
font-weight: 800;
font-size: clamp(12px, 1vw, 16px);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 14px 34px rgba(0, 255, 0, 0.34);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0, 255, 0, 0.46); }
.hero-cta svg { width: clamp(15px, 1.1vw, 19px); height: clamp(15px, 1.1vw, 19px); }
/* Person sits above the backdrop type, below the columns */
.person-stage { z-index: 12; }
/* ── Hero responsive: stack vertically, never restore the old design ── */
@media (max-width: 1024px) {
.scene-two { overflow-y: auto; overflow-x: hidden; }
.hero-backdrop-name { font-size: clamp(52px, 15vw, 120px); bottom: 2px; opacity: 0.9; }
.scene2-content {
position: relative;
top: auto;
left: auto;
transform: none;
max-width: 100%;
padding: calc(var(--header-h) + 18px) clamp(20px, 6vw, 40px) 0;
}
.hero-proof {
position: relative;
top: auto;
right: auto;
transform: none;
width: auto;
margin: clamp(16px, 3vh, 28px) clamp(20px, 6vw, 40px) 0;
flex-direction: row;
flex-wrap: wrap;
}
.hero-proof .hero-float-card { flex: 1 1 46%; }
.hero-cta { flex: 1 1 100%; }
.person-stage { position: relative; margin-top: clamp(12px, 3vh, 30px); }
}
@media (max-width: 640px) {
.hero-proof { flex-direction: column; }
.hero-proof .hero-float-card { flex: 1 1 auto; }
}
/* ============================================================
DESKTOP CAPSULE NAVIGATION
============================================================ */
.capsule-nav {
display: none; /* desktop breakpoint turns it on */
align-items: center;
gap: clamp(10px, 1vw, 18px);
padding: 8px 8px 8px clamp(12px, 1vw, 18px);
background: #111214;
border-radius: 999px;
box-shadow: 0 14px 36px rgba(11, 13, 16, 0.28), 0 2px 8px rgba(11, 13, 16, 0.16);
}
.capsule-logo { display: block; line-height: 0; flex: 0 0 auto; }
.capsule-logo img { height: clamp(34px, 2.9vw, 46px); width: auto; display: block; }
.capsule-links {
list-style: none;
display: flex;
align-items: center;
gap: clamp(4px, 0.5vw, 10px);
}
.capsule-links a {
position: relative;
display: block;
padding: 12px clamp(12px, 1.1vw, 20px);
font-size: clamp(12px, 0.92vw, 15px);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
transition: color 0.22s ease, background 0.22s ease;
}
.capsule-links a:hover { color: var(--accent); }
/* Small #00FF00 active indicator under the current destination */
.capsule-links a::after {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
transform: translateX(-50%) scale(0);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.capsule-links a.is-current::after { transform: translateX(-50%) scale(1); }
.capsule-links a.is-current { color: #FFFFFF; }
.capsule-cta {
display: block;
padding: 13px clamp(16px, 1.5vw, 26px);
border-radius: 999px;
background: #FFFFFF;
color: #111214;
font-size: clamp(12px, 0.92vw, 15px);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.capsule-cta:hover { background: var(--accent); transform: translateY(-1px); }
.capsule-cta.is-current { background: var(--accent); }
.capsule-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Breakpoint switch -- the two navigations are never visible together. */
@media (min-width: 1025px) {
.site-header-motion { justify-content: flex-start; }
.capsule-nav { display: flex; }
.mobile-nav { display: none !important; }
/* Header height token now follows the capsule, so headings still clear it. */
:root { --logo-h: clamp(34px, 2.9vw, 46px); }
}
@media (max-width: 1024px) {
.capsule-nav { display: none !important; }
.mobile-nav { display: block; }
.menu-toggle.mobile-nav { display: flex; }
.site-header-motion > .logo.mobile-nav { order: 1; }
.header-social {
order: 2;
gap: 6px;
margin-left: auto;
margin-right: 12px;
}
.header-social-label,
.header-social-dot { display: none; }
.header-social-link { width: 38px; height: 38px; }
.menu-toggle.mobile-nav { order: 3; }
}
@media (max-width: 390px) {
.header-social { gap: 5px; margin-right: 8px; }
.header-social-link { width: 34px; height: 34px; }
.header-social-link svg { width: 15px; height: 15px; }
}
/* ============================================================
"VITAJTE" RAMP-UP REVEAL
Only this word. Each character sits in its own overflow-hidden mask and
rides up from 110% below with a short blur-to-sharp pass, staggered left
to right. The readable label lives on the parent via aria-label; the split
spans are decorative and hidden from assistive tech.
============================================================ */
.hero-word[data-rampup] { display: inline-block; }
.rampup-line {
display: inline-block;
overflow: hidden; /* the mask the characters ride out of */
vertical-align: top;
padding-bottom: 0.12em; /* room for descenders inside the mask */
}
.rampup-char {
display: inline-block;
will-change: transform, filter, opacity;
}
/* Pre-JS state: hidden below the mask so no flash of unstyled text. */
.hero-word[data-rampup]:not(.is-ready) .rampup-char {
transform: translateY(110%);
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.site-header-motion { transition-duration: 0.001ms !important; }
.hero-word[data-rampup] .rampup-char {
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
}
/* ============================================================
MOJE PROJEKTY — mascot composition
============================================================ */
.projects-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 4vw, 80px);
align-items: end;
/* The mascot layout has no hoverable width change, so the old grid
transition must not apply here. */
transition: none;
}
.project-mascot {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 2vh, 26px);
text-decoration: none;
/* Reserve the lift so hover never shifts the layout. */
padding-bottom: 10px;
}
.mascot-stage {
position: relative;
display: block;
width: 100%;
max-width: clamp(220px, 30vw, 460px);
aspect-ratio: 3 / 4;
}
/* Independent photo layer: always present, softly feathered, never affects
the sharp mascot or label above it. */
.project-background {
position: absolute;
left: 50%;
top: 50%;
width: min(clamp(440px, 34vw, 650px), 64vh);
height: auto;
aspect-ratio: 1;
object-fit: cover;
display: block;
z-index: 1;
pointer-events: none;
opacity: 0.10;
transform: translate(-50%, -50%) scale(1);
transform-origin: center;
will-change: opacity, transform;
-webkit-mask-image: radial-gradient(
ellipse 46% 50% at 50% 52%,
#000 0%,
#000 46%,
rgba(0, 0, 0, 0.90) 60%,
rgba(0, 0, 0, 0.44) 78%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 46% 50% at 50% 52%,
#000 0%,
#000 46%,
rgba(0, 0, 0, 0.90) 60%,
rgba(0, 0, 0, 0.44) 78%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition:
opacity 650ms cubic-bezier(0.4, 0, 0.2, 1),
transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
}
.project-background--stage { object-position: 50% 50%; }
.project-background--travel { object-position: 54% 50%; }
.mascot-glow {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 88%;
height: 78%;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 255, 0, 0.26) 0%, rgba(0, 255, 0, 0) 68%);
filter: blur(26px);
opacity: 0.85;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.mascot-shadow {
position: absolute;
left: 50%;
bottom: 1%;
transform: translateX(-50%);
width: 62%;
height: 26px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(20, 22, 26, 0.24) 0%, rgba(20, 22, 26, 0) 72%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
pointer-events: none;
z-index: 2;
}
.mascot-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
display: block;
z-index: 3;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.mascot-meta {
position: relative;
z-index: 4;
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 18px);
}
.mascot-num {
font-size: clamp(14px, 1.3vw, 22px);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--accent);
}
.mascot-name {
font-size: clamp(15px, 1.5vw, 26px);
font-weight: 900;
letter-spacing: -0.03em;
text-transform: uppercase;
color: #111214;
}
.mascot-arrow {
width: clamp(34px, 2.8vw, 46px);
height: clamp(34px, 2.8vw, 46px);
border-radius: 50%;
border: 1.5px solid rgba(20, 22, 26, 0.16);
display: flex;
align-items: center;
justify-content: center;
color: #111214;
flex: 0 0 auto;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.mascot-arrow svg { width: 44%; height: 44%; }
/* The mascot remains fixed; only its existing glow/arrow affordances react. */
.project-mascot:hover .mascot-img { transform: none; }
.project-mascot:hover .mascot-glow { opacity: 1; }
.project-mascot:hover .mascot-shadow { transform: translateX(-50%) scaleX(0.9); opacity: 0.75; }
.project-mascot:hover .mascot-arrow {
background: var(--accent);
border-color: var(--accent);
color: #0B0D10;
}
.project-mascot:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) {
.project-mascot:hover .project-background {
opacity: 1;
transform: translate(-50%, -50%) scale(1.02);
}
}
.project-mascot:focus-within .project-background {
opacity: 1;
transform: translate(-50%, -50%) scale(1.02);
}
@media (max-width: 768px) {
.projects-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; }
.mascot-stage { max-width: min(74vw, 320px); }
.project-background { width: min(82vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
.project-background, .mascot-img, .mascot-glow, .mascot-shadow, .mascot-arrow { transition: none; }
.project-mascot:hover .project-background,
.project-mascot:focus-within .project-background {
transform: translate(-50%, -50%) scale(1);
}
.project-mascot:hover .mascot-img { transform: none; }
}
/* ============================================================
SHARED LAYOUT COORDINATE SYSTEM
ROOT CAUSE of the global "sections settle 30-80px too low":
--header-h was DERIVED arithmetically (logo-h + 2 * header-pad = 98px at
1920) while the rendered capsule nav actually ends at 76px. Sections then
padded themselves by that inflated value AND added their own clamp() on
top, so every stage sat roughly 22-80px lower than the nav required.
Now there is exactly one source of truth: main.js measures the rendered
nav once and publishes --nav-h, and every stage derives its safe padding
from --stage-pad-top. Nothing adds navigation clearance twice.
Responsibilities are kept separate:
--nav-top / --nav-h : where the fixed nav actually is
--stage-pad-top : internal safe padding under the nav
--stage-h : viewport stage height (pinning geometry)
--section-pad-x : horizontal rhythm
Animated entrance transforms never encode any of these.
============================================================ */
:root {
--nav-top: clamp(14px, 1.8vw, 26px);
--nav-h: 62px; /* measured + overwritten by main.js */
--nav-gap: clamp(18px, 2.4vh, 40px);
--stage-pad-top: calc(var(--nav-top) + var(--nav-h) + var(--nav-gap));
--stage-h: 100svh;
--section-pad-x: clamp(20px, 4vw, 76px);
}
/* Anchor offset lives here ONLY -- never inside GSAP coordinates. */
html {
scroll-padding-top: calc(var(--nav-top) + var(--nav-h));
}
/* Single clearance rule for every stage; replaces the per-section
calc(var(--header-h) + clamp(...)) stack that double-counted the nav. */
.about,
.reviews,
.contact,
#projekty {
padding-top: var(--stage-pad-top);
}
/* ============================================================
HERO — Christian moved toward the centre column
Was: right: clamp(30px,5.5vw,130px) on a 1340px stage, putting the media
centre at 59.6% of the viewport. Now a centred percentage wrapper places
it at 51.5%. The play button lives INSIDE .person-stage (measured 7px off
the media centre), so it travels with him and the finger alignment is
preserved -- nothing repositions the button on its own.
============================================================ */
@media (min-width: 1025px) {
.person-stage {
left: 51.5%;
right: auto;
transform: translateX(-50%);
}
}
/* ============================================================
MOJE PROJEKTY — one stable 100svh composition
Was 1426px tall inside a 1080px viewport (overflow 346px), which is why
the heading and the mascots could never be on screen together. The stage
is now a fixed-height flex column: heading row, flexible mascot row,
label row -- all three always inside one viewport.
============================================================ */
#projekty {
height: var(--stage-h);
min-height: 0;
padding-bottom: clamp(30px, 5.2vh, 68px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.projects-inner {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
width: 100%;
}
/* Row 1 — complete two-line heading, never clipped by the nav */
.projects-title {
flex: 0 0 auto;
font-size: clamp(78px, 7.5vw, 142px);
line-height: 0.86;
margin-bottom: clamp(10px, 1.8vh, 28px);
padding-top: 0.04em;
padding-bottom: 0.04em;
}
/* Row 2 — both mascots, flexible, vertically centred */
.projects-grid {
flex: 1 1 auto;
min-height: 0;
align-items: center;
gap: clamp(20px, 4vw, 80px);
}
.project-mascot {
height: 100%;
min-height: 0;
justify-content: flex-end;
gap: clamp(10px, 1.6vh, 22px);
padding-bottom: 0;
}
.mascot-stage {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: none;
max-height: min(50svh, 520px);
aspect-ratio: auto;
}
/* contain keeps hats, hands, microphone, passport, suitcase and shoes whole */
.mascot-img {
object-fit: contain;
object-position: bottom center;
}
/* Row 3 — labels + arrows, always above the bottom edge */
.mascot-meta {
flex: 0 0 auto;
}
/* ============================================================
PROJECTS DECOR — persistent layer + separated transform layers
WHY THEY USED TO VANISH: the decor images were absolutely positioned
against #projekty itself. Once the section was released and scrolled, they
scrolled away with it, so they were only on screen for a single frame.
They now live in one sticky, full-stage layer that stays put for the whole
section, and each object is split so no two systems write the same
transform:
.project-decor-position -> placement / section transition (outer)
.project-decor-float -> continuous levitation (GSAP owns this only)
.project-decor-hover -> optional pointer reaction (inner)
============================================================ */
.projects-decor-layer {
position: absolute;
inset: 0;
z-index: 1; /* above the background, below heading/mascots */
pointer-events: none;
overflow: hidden; /* objects may crop at the edges, never vanish */
}
.project-decor-position { position: absolute; }
.project-decor-float { display: block; will-change: transform; }
.project-decor-hover { display: block; }
.project-decor-hover img,
img.project-decor-hover { display: block; width: 100%; height: auto; }
.projects-inner { position: relative; z-index: 2; }
/* Placement — mirrors the previous corners, still allowed to crop at edges */
.project-decor--tl {
width: clamp(60px, 6vw, 112px);
top: clamp(10px, 2vh, 46px);
left: clamp(-26px, -0.5vw, 24px);
}
.project-decor--tr {
width: clamp(120px, 13vw, 240px);
top: clamp(-30px, 1vh, 44px);
right: clamp(-70px, -2.5vw, 0px);
}
.project-decor--bl {
width: clamp(120px, 13vw, 250px);
bottom: clamp(-46px, -1vh, 24px);
left: clamp(-80px, -3.5vw, 0px);
}
.project-decor--br {
width: clamp(56px, 5.4vw, 100px);
bottom: clamp(40px, 9vh, 150px);
right: clamp(6px, 1.6vw, 56px);
}
.project-decor--tl img, .project-decor--br img {
filter: drop-shadow(0 12px 26px rgba(0, 255, 0, 0.30));
}
.project-decor--tr img, .project-decor--bl img {
filter: drop-shadow(0 18px 38px rgba(0, 255, 0, 0.32));
}
/* ── Projects responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
#projekty {
height: auto;
min-height: var(--stage-h);
display: block;
overflow: visible;
}
.projects-inner { display: block; }
.projects-grid { display: grid; }
.project-mascot { height: auto; }
.mascot-stage { max-height: min(46svh, 420px); }
.projects-decor-layer { position: absolute; }
}
/* ============================================================
JEDNOTNÝ MRIEŽKOVÝ SYSTÉM (opravuje príčinu všetkých troch prechodov)
PRÍČINA: každá sekcia mala vlastnú mriežku s inou veľkosťou
(72 / 90 / 132 / 150 px) a vlastným background-position
(center center vs center top). Na každej hranici sa preto mriežka
reštartovala, posunula aj zmenila veľkosť.
RIEŠENIE: jedna bunka (--grid-cell), jedna farba čiar a jeden
geometrický počiatok. --grid-y dopočíta main.js ako
-(pozícia sekcie v dokumente % bunka), takže všetky mriežky zdieľajú
spoločný počiatok bez ohľadu na to, kde sekcia začína.
Farba čiar je jedna neutrálna šedá s alfou - čitateľná na bielej aj
na čiernej ploche, takže sa v gradiente nemusí prepínať a nemôže
vzniknúť rozdiel v hrúbke ani v rozostupoch.
============================================================ */
:root {
--grid-cell: 132px;
--grid-ink: rgba(127, 131, 134, 0.20);
--grid-line: linear-gradient(var(--grid-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
}
/* Spoločná mriežka pre všetky plochy - identická geometria */
.transition-scene,
.founder,
.about,
.reviews,
#projekty {
background-image: var(--grid-line);
background-size: var(--grid-cell) var(--grid-cell);
background-position: 0 var(--grid-y, 0px);
background-repeat: repeat;
}
/* Hero má mriežku na vlastnej vrstve - zosúladíme ju s ostatnými */
.hero-grid {
background-image: var(--grid-line);
background-size: var(--grid-cell) var(--grid-cell);
background-position: 0 var(--grid-y, 0px);
}
/* ============================================================
HERO -> ZAKLADATEĽ: statická kompozícia + prirodzený scroll
============================================================ */
/* `clip` odstráni iba vodorovnú lištu a nevytvorí nový vertikálny scroller. */
html,
body {
overflow-x: clip;
}
/* Pôvodné mobilné správanie ostáva bez zásahu. */
.scene2-bottom-mist { display: none !important; }
.hero-person-video {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 42px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 42px), transparent 100%);
}
@media (min-width: 1025px) {
/* Žiadny Hero wrapper nesmie natrvalo odrezať spodok veľkého mena. */
.scene-two {
overflow: visible;
}
.hero-ready .transition-scene {
overflow: visible;
}
/* Poradie vrstiev: pozadie -> osoba -> lokálna biela hmla -> meno. */
.person-stage { z-index: 12; }
.scene2-bottom-mist {
display: block !important;
left: 50%;
right: auto;
bottom: -8px;
width: clamp(680px, 64vw, 1120px);
height: clamp(80px, 12vh, 132px);
transform: translateX(-50%);
z-index: 13;
background: radial-gradient(
ellipse at 50% 100%,
rgba(251, 252, 251, 0.98) 0%,
rgba(251, 252, 251, 0.86) 30%,
rgba(251, 252, 251, 0.42) 54%,
rgba(251, 252, 251, 0) 76%
);
filter: blur(10px);
}
.hero-backdrop-name { z-index: 14; }
/* Mäkké alfa ukončenie je iba na spodných 96 px média. */
.hero-person-video {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 96px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 96px), transparent 100%);
}
}
/* Všetky svetlé plochy zdieľajú jednu farbu - žiadny šev na hranici.
#projekty tu pôvodne chýbalo a zostalo na staršom #F7F7F5, takže na
hranici Projekty -> Referencie vznikol viditeľný vodorovný pruh
(rgb(247,247,245) vs rgb(251,252,251)). Na veľkej plochej ploche je
rozdiel štyroch bodov v každom kanáli dobre čitateľný. */
.transition-scene { background-color: #FBFCFB; }
.scene-two { background: transparent; }
.founder { background-color: #FBFCFB; }
.about { background-color: #FBFCFB; }
.reviews { background-color: #FBFCFB; }
#projekty { background-color: #FBFCFB; }
/* Zrušený zbytočný vertikálny priestor na hranici */
.founder { padding-top: clamp(40px, 6vh, 88px); }
/* Stará hmla na hranici sekcií sa už vôbec negeneruje. */
#sluzby::before { content: none !important; display: none !important; }
/* Prvá karta sa usadí hneď po gradiente - žiadny prázdny čierny pás.
Stage je posunutý tak, aby karta 01 začínala tesne pod prechodom. */
#svcStage { padding-top: 0; }
/* ============================================================
PRECHOD 3: Referencie -> dotazník (Soft Cover)
Kontakt je samostatný panel, ktorý sa vysunie zdola NAD Referencie.
Referencie zostávajú viditeľné, kým ich panel reálne neprekryje -
pozadie stránky sa nikdy neodkryje.
============================================================ */
.contact::before { display: none !important; }
.contact {
background-color: #0B0D10;
background-image:
var(--grid-line),
linear-gradient(180deg,
rgba(11, 13, 16, 0.55) 0px,
rgba(11, 13, 16, 0.92) 62px,
#0B0D10 108px);
background-size:
var(--grid-cell) var(--grid-cell),
var(--grid-cell) var(--grid-cell),
100% 100%;
background-position:
0 var(--grid-y, 0px),
0 var(--grid-y, 0px),
0 0;
background-repeat: repeat, repeat, no-repeat;
}
/* Panelový režim - aktivuje ho main.js na hranici */
#kontakt.is-cover {
position: fixed;
inset: 0;
z-index: 40; /* nad Referenciami, pod navigáciou (90) */
height: 100svh;
overflow: hidden;
transform: translateY(100%);
border-radius: 36px 36px 0 0;
box-shadow: 0 -26px 70px rgba(0, 0, 0, 0.5);
padding-top: var(--stage-pad-top);
}
/* Referencie počas prekrytia iba jemne ustúpia */
#referencie {
transform-origin: center 42%;
will-change: transform;
}
/* Obsah dotazníka nabieha až v druhej polovici príchodu panelu */
#kontakt.is-cover .contact-title,
#kontakt.is-cover .quote-card,
#kontakt.is-cover .contact-sub,
#kontakt.is-cover .contact-direct { will-change: transform, opacity; }
/* ============================================================
NAVIGÁCIA NAD VŠETKÝMI PRECHODOVÝMI VRSTVAMI
============================================================ */
.site-header { z-index: 90; }
.nav-overlay { z-index: 85; }
/* ============================================================
REDUKOVANÝ POHYB
============================================================ */
@media (prefers-reduced-motion: reduce) {
#kontakt.is-cover { transition: none; }
#referencie { transform: none !important; }
}
/* ============================================================
FINALIZÁCIA -- Services stage: gradient IBA ako dočasný overlay
PRÍČINA PRETRVÁVAJÚCEHO GRADIENTU: bielo-sivo-čierny prechod bol
zapečený priamo do background-image sekcie #sluzby, teda bol to
TRVALÝ background celej card stage. Preto zostával viditeľný ako
biely/sivý pás nad kartami 02-04 aj po usadení.
Teraz je stage plná čierna, mriežka je samostatná vrstva nad
gradientom a gradient je samostatný overlay, ktorého opacity riadi
výhradne canonical stav (IDLE = 1, SERVICE_01..04 = 0).
============================================================ */
#sluzby {
background-color: #111214;
background-image: none; /* žiadny gradient v pozadí stage */
}
/* Mriežka ako samostatná vrstva NAD gradientom -- jedna súvislá vrstva,
ktorá cez prechod iba mení farebný režim. Geometria (bunka, rozostupy,
hrúbka, origin) je zhodná so zvyškom webu. */
#sluzby::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: var(--grid-line);
background-size: var(--grid-cell) var(--grid-cell);
background-position: 0 var(--grid-y, 0px);
background-repeat: repeat;
}
/* Dočasný handoff overlay -- výhradne pre prechod O mne -> Card 01 */
#svcHandoff {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 340px;
z-index: 0; /* pod mriežkou aj pod kartami */
pointer-events: none;
opacity: 1; /* JS ho vypne v stavoch Card 01-04 */
background: linear-gradient(180deg,
#FBFCFB 0px,
#E4E6E5 84px,
#9A9DA0 162px,
#3A3D41 236px,
#111214 320px);
}
/* Karty vždy nad mriežkou aj overlayom */
#svcStage { z-index: 2; }
/* ============================================================
HERO -- jemne maskovaná mriežka (feather)
Maskuje sa IBA mriežková vrstva (.hero-grid). Texty, fotografia,
navigácia, karty, glow ani dekorácie nie sú maskou dotknuté.
Geometria mriežky (bunka, rozostupy, hrúbka, origin) zostáva presne
rovnaká -- mení sa len viditeľnosť. Žiadny blur, čiary zostávajú ostré.
============================================================ */
.hero-grid {
/* Nižší základný kontrast: ~0.075 namiesto 0.20 */
background-image:
linear-gradient(rgba(127, 131, 134, 0.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(127, 131, 134, 0.075) 1px, transparent 1px);
/* Dve veľmi mäkké elipsy: stred (Christian + glow + nadpis) a pravá
strana (štatistiky). Prechody sú dlhé, takže feather je ~250-400 px
a nevznikne rozpoznateľný kruh ani tvrdá hranica. */
-webkit-mask-image:
radial-gradient(ellipse 60% 64% at 50% 50%,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0.42) 30%,
rgba(0, 0, 0, 0.72) 62%,
rgba(0, 0, 0, 1) 100%),
radial-gradient(ellipse 30% 46% at 88% 46%,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.66) 48%,
rgba(0, 0, 0, 1) 100%);
mask-image:
radial-gradient(ellipse 60% 64% at 50% 50%,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0.42) 30%,
rgba(0, 0, 0, 0.72) 62%,
rgba(0, 0, 0, 1) 100%),
radial-gradient(ellipse 30% 46% at 88% 46%,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.66) 48%,
rgba(0, 0, 0, 1) 100%);
/* intersect = obe tlmenia sa násobia; bez podpory ostane `add`,
čo znamená len menej tlmenia, nikdy nie chybu */
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ============================================================
OSTATNÉ SVETLÉ PLOCHY -- jemnejšia mriežka v rovnakej geometrii
============================================================ */
:root { --grid-ink: rgba(127, 131, 134, 0.13); }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
#svcHandoff { transition: none; }
}
/* ============================================================
MOBILE + REDUCED MOTION -- native Services flow
The desktop state machine is intentionally disabled in these modes.
All four existing cards therefore need a real place in document flow;
inline GSAP parking transforms are neutralised here without changing the
desktop stack or creating a second controller.
============================================================ */
/* Spoločný základ: karty MIMO pripnutej scény.
Čiarka je tu zámerná a správna -- `usesStagedServices()` v main.js vracia
false aj pre desktop s redukovaným pohybom, takže aj tam musia karty ležať
v normálnom toku. Toto NIE je „mobilné rozloženie pre desktop": mení sa len
to, či scéna existuje, nie typografia ani skladba.
Mobilný vrstvený stoh je oddelene nižšie a viaže sa na
`(max-width: 1024px) and (prefers-reduced-motion: no-preference)`,
takže sa k desktopu s redukovaným pohybom nikdy nedostane. */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
#sluzby {
height: auto;
min-height: 100svh;
padding: var(--stage-pad-top) 0 clamp(44px, 8vh, 84px);
overflow: hidden;
}
#svcStage {
position: relative;
top: auto;
height: auto;
overflow: visible;
display: grid;
gap: clamp(18px, 4vw, 34px);
}
.svc-card {
position: relative;
inset: auto;
margin: 0 auto;
width: min(90vw, 760px);
height: auto;
min-height: clamp(400px, 64svh, 620px);
transform: none !important;
opacity: 1 !important;
}
#svcHandoff {
height: clamp(240px, 42svh, 340px);
}
/* The desktop one-line display size is wider than a phone viewport. */
.projects-title {
font-size: clamp(48px, 14.8vw, 96px);
}
}
/* ============================================================
FOOTER -- samostatný riadený krok (nie native scroll reveal)
Footer sa predtým odhalil okamžite natívnym scrollom po usadení
dotazníka (zvyšok momenta stačil). Teraz je to panel, ktorý sa
vysunie zdola vlastnou timeline a nikdy sa neodhalí sám.
============================================================ */
.site-footer.is-rise {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 45; /* nad panelom dotazníka (40), pod navigáciou (90) */
transform: translateY(100%);
will-change: transform;
}
/* Krátky mäkký horný okraj, aby odhalenie nevytvorilo ostrý rez */
.site-footer.is-rise::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -88px;
height: 88px;
pointer-events: none;
background: linear-gradient(180deg,
rgba(11, 13, 16, 0) 0%,
rgba(11, 13, 16, 0.72) 58%,
#0B0D10 100%);
}
@media (prefers-reduced-motion: reduce) {
.site-footer.is-rise { transition: none; }
}
/* ============================================================
KARUSELY — spoločný ovládač, dve rôzne mechaniky
Zdieľa sa len vizuálny jazyk ovládača (čierna kapsula, šípky,
počítadlo, bodky) a stavy fokusu. Mechaniky zostávajú oddelené:
O MNE je fyzický stoh riadený z-indexom a slotmi, Referencie sú
meraný horizontálny track s alfa maskou.
============================================================ */
.carousel-controls {
display: inline-flex;
align-items: center;
gap: clamp(10px, 1vw, 16px);
padding: 7px 10px;
border-radius: 999px;
background: #111214;
box-shadow: 0 12px 30px rgba(20, 22, 26, 0.22);
}
.carousel-btn {
width: 38px;
height: 38px;
flex: 0 0 auto;
display: grid;
place-items: center;
padding: 0;
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
background: transparent;
color: #FFFFFF;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.carousel-btn svg { width: 16px; height: 16px; }
.carousel-btn--next { border-color: var(--accent); }
.carousel-btn:hover { background: rgba(255, 255, 255, 0.12); }
.carousel-btn--next:hover { background: var(--accent); border-color: var(--accent); color: #0B0D10; }
.carousel-btn:active { transform: scale(0.94); }
.carousel-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.carousel-btn[disabled] { opacity: 0.4; cursor: default; }
.carousel-count {
color: #FFFFFF;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.carousel-dots { display: inline-flex; align-items: center; gap: 7px; }
.carousel-dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
transition: background 0.25s ease, transform 0.25s ease;
}
.carousel-dots i.is-on { background: var(--accent); transform: scale(1.2); }
/* Stav pre čítačky obrazovky -- nikdy nie vizuálne, aby neohlasoval
každý snímok animácie. */
.carousel-live {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
/* Dotykové ciele aspoň 44 x 44 px */
@media (hover: none) and (pointer: coarse) {
.carousel-btn { width: 44px; height: 44px; }
}
/* ============================================================
A — O MNE: fyzický stoh štyroch fotografií
============================================================ */
/* Rám sekcie prestáva byť samotnou fotografiou: rádius, tieň aj orez
sa presúvajú na jednotlivé karty, inak by rám orezal vyčnievajúce
okraje zadných kariet. */
.about-gallery {
overflow: visible;
aspect-ratio: auto;
background: none;
border-radius: 0;
box-shadow: none;
}
.gallery-deck {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2.2vh, 28px);
}
/* Stage je vysoký presne ako karta; karty sú v ňom absolútne, takže
ich sloty nemenia výšku sekcie. Padding dáva priestor vyčnievajúcim
rohom a tieňom bez toho, aby sa stoh dotkol textového stĺpca. */
.gallery-stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
}
.gallery-card {
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
border-radius: clamp(16px, 1.8vw, 28px);
background: #ECECE8;
box-shadow:
0 2px 6px rgba(20, 22, 26, 0.06),
0 22px 54px rgba(20, 22, 26, 0.16);
will-change: transform;
backface-visibility: hidden;
}
.gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Bezpečné výrezy: tváre, mikrofón a maskot musia zostať v ráme aj pri
zmene pomeru na malých obrazovkách. */
.gallery-card:nth-child(1) img { object-position: 50% 42%; }
.gallery-card:nth-child(2) img { object-position: 50% 46%; }
.gallery-card:nth-child(3) img { object-position: 50% 48%; }
.gallery-card:nth-child(4) img { object-position: 50% 44%; }
/* Bez JS zostáva viditeľná iba prvá fotografia a ovládač sa vôbec
nezobrazí -- žiadny prázdny rám ani obsah čakajúci na opacity. */
.gallery-card:not(:first-child) { display: none; }
.gallery-deck.is-ready .gallery-card { display: block; }
.carousel-controls[hidden] { display: none; }
/* ============================================================
B — REFERENCIE: meraný track + alfa feather
============================================================ */
.review-carousel {
--rev-gap: clamp(12px, 1.6vw, 26px);
--rev-per: 3;
/* Feather na ĽAVEJ hrane viewportu, teda presne vedľa pevného
bloku 5,0. Karta stráca krytie postupne -- text, pozadie aj tieň
naraz -- takže nevzniká biely panel ani rozmazanie. */
--rev-feather-left: clamp(36px, 6.5vw, 126px);
/* Medzera stĺpcov v .reviews-top. Presah viewportu doľava je širší než
ona, takže maska musí byť ÚPLNE priehľadná na celom kuse, ktorý leží
pod blokom 5,0 -- nábeh krytia začína presne na jeho pravej hrane. */
--rev-gap-col: clamp(20px, 3vw, 48px);
--rev-feather-right: clamp(20px, 2.4vw, 52px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(14px, 2vh, 24px);
}
.review-viewport {
position: relative;
/* Viewport presahuje vľavo o šírku feathera, takže prvá karta v pokoji
začína presne na hrane stĺpca a nie je vyblednutá. Presah je celý
v priehľadnej časti masky -- odchádzajúca karta v ňom zmizne skôr,
než by sa dostala nad blok 5,0. */
margin-left: calc(-1 * var(--rev-feather-left));
width: calc(100% + var(--rev-feather-left));
padding-left: var(--rev-feather-left);
/* overflow drží šírku dokumentu; maska dosiahne nulové krytie skôr,
než karta dorazí na túto hranu, takže orez nie je vidieť */
overflow: hidden;
padding-block: 8px; /* priestor pre tieň kariet */
-webkit-mask-image: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) calc(var(--rev-feather-left) - var(--rev-gap-col)),
rgba(0, 0, 0, 0.06) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.75),
rgba(0, 0, 0, 0.28) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.5),
rgba(0, 0, 0, 0.68) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.25),
rgba(0, 0, 0, 1) var(--rev-feather-left),
rgba(0, 0, 0, 1) calc(100% - var(--rev-feather-right)),
rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0) calc(var(--rev-feather-left) - var(--rev-gap-col)),
rgba(0, 0, 0, 0.06) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.75),
rgba(0, 0, 0, 0.28) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.5),
rgba(0, 0, 0, 0.68) calc(var(--rev-feather-left) - var(--rev-gap-col) * 0.25),
rgba(0, 0, 0, 1) var(--rev-feather-left),
rgba(0, 0, 0, 1) calc(100% - var(--rev-feather-right)),
rgba(0, 0, 0, 0) 100%);
}
.review-track {
display: flex;
gap: var(--rev-gap);
align-items: stretch;
will-change: transform;
}
/* Karta si drží pôvodný vzhľad; mení sa len spôsob, akým dostáva šírku. */
.review-track .review-card {
flex: 0 0 calc((100% - (var(--rev-per) - 1) * var(--rev-gap)) / var(--rev-per));
min-width: 0;
}
/* Karta úplne schovaná pod maskou nesmie prijímať kurzor ani fokus. */
.review-track .review-card[data-masked="true"] { pointer-events: none; }
/* Poznámka o ukážkových dátach je mimo tracku, nie jeho položkou. */
/* Poznámka o ukážkových dátach leží NAD viewportom, nie v trati --
inak by ju karusel posúval spolu s kartami. */
.review-carousel > .review-notice { grid-column: auto; margin-bottom: 14px; }
.review-notice[hidden] { display: none; }
/* Pevný blok s hodnotením musí prekrývať vrstvu karuselu tam, kde
presah viewportu zasahuje pod neho. */
.rating-block { position: relative; z-index: 2; }
/* Karta úplne schovaná pod perom alebo za orezom nesmie chytať kliknutia. */
.review-card.is-masked { pointer-events: none; }
.review-controls { align-self: center; }
@media (max-width: 1280px) { .review-carousel { --rev-per: 2; } }
@media (max-width: 860px) { .review-carousel { --rev-per: 1; } }
/* ============================================================
RESPONZIVITA KARUSELOV
============================================================ */
@media (max-width: 1024px) {
.gallery-stage { aspect-ratio: 3 / 2; }
}
/* Na telefóne naležato by stoh v pomere 3:2 prerástol celú výšku okna.
Tu ho viaže výška obrazovky, nie šírka; výrezy drží object-position. */
@media (orientation: landscape) and (max-height: 560px) {
.gallery-stage { aspect-ratio: auto; height: min(64vh, 300px); }
}
@media (max-width: 768px) {
.carousel-count { font-size: 12px; }
.carousel-dots i { width: 6px; height: 6px; }
}
/* ============================================================
REDUCED MOTION -- ovládanie zostáva plne funkčné
============================================================ */
@media (prefers-reduced-motion: reduce) {
.carousel-btn { transition: none; }
.gallery-card { will-change: auto; }
.review-track { will-change: auto; }
}
/* ============================================================
MOBILNÝ VRSTVENÝ STOH SLUŽIEB
Desktop má pripnutú scénu riadenú gestom (`SVC` automat v main.js).
Odmerané desktopové pokojové polohy pri 1440x900:
S1 karta 01 y=144 scale 1
S2 karta 01 y=103 scale 0.978 karta 02 y=144 scale 1
S3 karta 01 y=87 scale 0.958 karta 02 y=103 karta 03 y=144
S4 karta 01 y=73 scale 0.940 ... karta 04 y=144
Vo všetkých stavoch x = 0 a rotation = 0 -- karta prichádza ZVISLO zdola
(y ~ 972) a nikam neodlieta do strany. Mobil to isté prekladá do sticky
scény riadenej natívnym scrollom: neskoršia karta prekryje staršie a z
nich zostane hore tenký pruh.
Zmenšovanie starších kariet (0.978 / 0.958 / 0.940) sa na mobile ZÁMERNE
nepreberá -- na malej ploche by z pruhov spravilo vejár. Charakter drží
samotné vrstvenie.
Aktivuje sa iba keď JS pridá `.svc-mstack` na sekciu, takže bez JS
zostáva čitateľný zvislý zoznam.
CA-011: blok nie je viazaný na šírku -- bránou je výhradne trieda,
ktorú `mobileScenesActive()` v main.js pridá aj širokému dotykovému
tabletu a hybridu po prvom dotyku. Desktop s myšou triedu nikdy nedostane.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
#sluzby.svc-mstack {
/* Rozsah scrollu dopĺňa JS podľa výšky scény a počtu segmentov. */
height: auto;
overflow: visible;
}
.svc-mstack #svcStage {
position: sticky;
top: var(--mstack-top, 96px);
height: var(--mstack-h, 560px);
display: block;
overflow: visible;
gap: 0;
}
.svc-mstack .svc-card {
position: absolute;
left: 0;
right: 0;
top: 0;
margin-inline: auto;
/* Iba zvislý posun. Žiadny x, žiadna rotácia, žiadna mierka. */
transform: translate3d(0, var(--card-y, 0px), 0) !important;
opacity: 1 !important;
transition: none;
}
/* Neskoršia karta leží nad staršími. */
.svc-mstack .svc-card--1 { z-index: 11; }
.svc-mstack .svc-card--2 { z-index: 12; }
.svc-mstack .svc-card--3 { z-index: 13; }
.svc-mstack .svc-card--4 { z-index: 14; }
/* Dekoratívny pás medzi O mne a kartami zaberal na telefóne 340 px
prázdnej plochy. V stohu ho nahrádza samotná scéna. */
.svc-mstack ~ * #svcHandoff,
.svc-mstack #svcHandoff { display: none; }
}
/* ============================================================
PROJEKTY — postupné scény maskotov na mobile
Na desktope sa pozadie maskota (`.project-background`) odkrýva
hoverom: `opacity: 0.10 -> 1`, `scale: 1 -> 1.02`. Na dotykovom
zariadení hover neexistuje, takže sa dnes neodkryje nikdy.
Mobil preto riadi tie isté dve vlastnosti polohou scrollu. Žiadna nová
vizuálna reč: rovnaké pozadie, rovnaká maska, rovnaké hodnoty.
Bránou je trieda `.mascot-scenes` z main.js, nie šírka (CA-011).
============================================================ */
@media (prefers-reduced-motion: no-preference) {
.projects-grid.mascot-scenes {
display: block;
}
.mascot-scenes .project-mascot {
/* Každá scéna má vlastný rozsah scrollu; výšku dopĺňa JS. */
display: block;
position: relative;
min-height: var(--scene-h, 120svh);
}
/* `.mascot-stage` má v základe `flex: 1 1 auto` a `aspect-ratio: auto`,
takže výšku dostáva z flex rodiča. V scénach je rodič blokový, preto
jej ju musíme dať priamo -- inak maskot (position: absolute) zrúti
stage na nulovú výšku. */
.mascot-scenes .mascot-stage {
position: sticky;
top: var(--scene-top, 12svh);
flex: none;
height: var(--stage-h, 52svh);
max-height: none;
aspect-ratio: auto;
width: 100%;
max-width: min(74vw, 320px);
margin-inline: auto;
}
/* Popiska sa lepí hneď pod scénu, takže odkaz zostáva klikateľný
počas celého podržania, nie len kým je vo vrchnej časti výrezu. */
.mascot-scenes .mascot-meta {
position: sticky;
top: var(--meta-top, 60svh);
justify-content: center;
}
/* Progres scény prepisuje hover -- pozadie aj maskot majú vlastný obal,
takže si transformy neprepisujú. */
.mascot-scenes .project-background {
opacity: var(--bd-o, 0.1);
transform: translate(-50%, -50%) scale(var(--bd-s, 1));
transition: none;
}
.mascot-scenes .mascot-img {
transform: translateY(var(--mascot-y, 0px));
transition: none;
}
.mascot-scenes .mascot-meta {
opacity: var(--meta-o, 1);
transition: none;
}
}
/* ============================================================
MOBILNÉ HERO
Odmerané defekty pri 375x812: postava začínala na y=456 a 253 px z nej
bolo pod záhybom; tlačidlo prehrávania na y=832 bolo nedosiahnuteľné;
tri dôkazové karty mali `display: none` bez akejkoľvek náhrady;
sociálne ikony zaberali 30 % šírky hlavičky.
============================================================ */
@media (max-width: 1024px) {
/* Sociálne ikony patria do menu, nie do hlavičky -- v hlavičke brali
30 % šírky a mali ciele 34x34 px. */
.site-header .header-social { display: none; }
.nav-overlay .nav-social {
display: flex;
align-items: center;
gap: 14px;
margin-top: clamp(20px, 5vh, 34px);
}
.nav-overlay .nav-social a {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
}
.nav-overlay .nav-social svg { width: 22px; height: 22px; }
.nav-overlay .nav-social a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Postava sa musí zmestiť tak, aby tvár bola nad záhybom. */
.person-stage {
max-height: 46svh;
align-self: end;
}
.hero-person-media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%; /* ťažisko tváre v hornej tretine */
display: block;
}
/* Tlačidlo prehrávania patrí k videu; na mobile video nie je, takže
nemá čo ovládať. */
.hero-play-button { display: none; }
/* Dôkazové čísla nezmiznú -- presúvajú sa pod Hero do kompaktného
pásu, ktorý sa dá posunúť prstom. */
.hero-proof-strip {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 14px var(--section-pad-x) 2px;
margin: 0;
list-style: none;
touch-action: pan-x;
}
.hero-proof-strip::-webkit-scrollbar { display: none; }
.hero-proof-strip li {
scroll-snap-align: start;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 16px;
background: #fff;
box-shadow: 0 2px 6px rgba(20, 22, 26, 0.06), 0 14px 34px rgba(20, 22, 26, 0.08);
white-space: nowrap;
}
.hero-proof-strip strong {
font-size: 20px;
font-weight: 900;
letter-spacing: -0.02em;
}
.hero-proof-strip small {
color: var(--color-text-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Menej dekorácií: v prvom výreze ich bolo desať. */
.scene2-blob--2,
.scene2-blob--3,
.scene2-blob--4,
.scene2-sphere--2 { display: none; }
/* Mriežka smie byť na malej ploche jemnejšia, geometria sa nemení. */
.hero-grid { opacity: 0.7; }
}
/* Pás dôkazov je mobilný a tabletový -- nad 1024 px ho nesú plávajúce karty v Hero.
Zapísané ako min-width, aby na poradí pravidiel nezáležalo. */
@media (min-width: 1025px) {
.hero-proof-strip { display: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
.hero-proof-strip { overflow-x: visible; flex-wrap: wrap; }
}
/* Telefón naležato: postava by zabrala celý výrez, prednosť má text. */
@media (max-width: 1024px) and (max-height: 430px) {
.person-stage { display: none; }
.hero-proof-strip { display: none; } /* zapína ho len mobilná vetva */
#sluzby.svc-mstack { height: auto !important; }
.svc-mstack #svcStage { position: static; height: auto; display: grid; gap: 20px; }
.svc-mstack .svc-card {
position: relative;
transform: none !important;
min-height: clamp(320px, 78svh, 420px);
}
.mascot-scenes .project-mascot { min-height: 0; }
.mascot-scenes .mascot-stage { position: static; }
.mascot-scenes .project-background { opacity: 1; }
/* Pôvodná chyba, nie regresia: #projekty je 100svh a `.mascot-stage` má
`flex: 1 1 auto` s `min-height: 0`. Na 390 px vysokom výreze nezostane
žiadna voľná výška, takže maskot (position: absolute) sa zrúti na nulu
a sekcia je prázdna. Pravidlá zámerne NIE sú viazané na `.mascot-scenes`
-- tá je v tomto režime odpojená. */
#projekty { height: auto; min-height: 0; }
.mascot-stage {
flex: none;
height: clamp(150px, 44svh, 210px);
aspect-ratio: auto;
max-height: none;
}
.project-background { opacity: 1; width: min(52vw, 300px); }
}
/* Postava: statický výrez na mobile, video na desktope. Prepínač je čisto
deklaratívny, aby ani jedna vetva nikdy nevykreslila obe naraz. */
.hero-person-media { display: none; }
@media (max-width: 1024px) {
.hero-person-video { display: none !important; }
.hero-person-media {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
}
}
/* `.mascot-stage` má `flex: 1 1 auto` s `min-height: 0`, takže výšku dostáva
len z voľného miesta vo flex rodičovi. #projekty je 100svh, čo na telefóne
po nadpise nestačí -- maskot (position: absolute) sa potom zrúti na nulu a
sekcia je prázdna. Explicitná výška to rieši aj bez JS, aj pri redukovanom
pohybe; scény si ju nižšie prepíšu vlastnou hodnotou. */
@media (max-width: 768px) {
#projekty { height: auto; min-height: 100svh; }
.mascot-stage {
flex: none;
height: clamp(240px, 42svh, 380px);
aspect-ratio: auto;
max-height: none;
}
}
/* ============================================================
MOBILNÁ VIZUÁLNA INTEGRÁCIA — Hero, O mne, Ponuka na mieru
Jedna vetva pre celé mobilné rozloženie týchto troch miest, plus jeden
krátky override naležato. Desktop sa nedotýka ničoho z toho.
============================================================ */
/* Identitná linka a menný lockup patria mobilu/tabletu, tvrdenie desktopu. */
.hero-roles-line { display: none; }
.hero-line--name { display: none; }
@media (max-width: 1024px) {
/* ---------- 01 / HERO ---------- */
/* Desktopové Hero je absolútna kompozícia (`.scene2-content` vľavo,
`.hero-proof` vpravo, `.person-stage` na spodnej hrane). Na mobile sa
z toho stáva jeden stĺpec a poradie z návrhu -- hlavička -> role ->
meno -> portrét -> kartičky rolí -> CTA -- rieši `order`.
Aby `order` platil na všetky prvky naraz, `.scene2-content` dostáva
`display: contents`: prestáva generovať vlastný box, jeho deti sa stanú
položkami toho istého flexu ako `.person-stage` a `.hero-proof`. Nič sa
neposúva transformom ani zápornými okrajmi. GSAP animuje iba
`.hero-reveal-*` a `.hero-cta`, teda deti -- nie tento obal. */
.scene-two {
display: flex;
flex-direction: column;
/* Základné pravidlo zarovnáva stĺpec na spodok a centruje položky;
tu má stĺpec začínať hore a položky majú byť celoplošné. */
justify-content: flex-start;
align-items: stretch;
min-height: 100svh;
/* `overflow-y: auto` by z Hera spravilo vnorený scroller. */
overflow-x: clip;
overflow-y: visible;
padding: calc(var(--header-h) + 14px + env(safe-area-inset-top, 0px))
clamp(18px, 5.4vw, 32px)
calc(clamp(14px, 2.6vh, 24px) + env(safe-area-inset-bottom, 0px));
gap: clamp(8px, 1.5vh, 16px);
}
.scene2-content {
display: contents;
}
/* Eyebrow „Christian Alex" by nad menným lockupom bol doslovný duplikát. */
.hero-eyebrow { display: none; }
.hero-roles-line {
display: block;
order: 1;
margin: 0;
color: var(--color-text-muted);
font-size: clamp(10px, 2.9vw, 12px);
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.scene2-headline {
order: 2;
margin: 0;
font-size: clamp(40px, 13.4vw, 58px);
line-height: 0.9;
letter-spacing: -0.045em;
}
.hero-line--claim { display: none; }
.hero-line--name { display: block; }
/* Portrét dostáva všetok zvyšný priestor výrezu. `contain` drží proporcie,
takže okolo transparentného assetu nevzniká žiadny biely obdĺžnik. */
.person-stage {
order: 3;
position: relative;
flex: 1 1 auto;
min-height: 130px;
height: auto;
/* Skorší mobilný blok limitoval postavu na 46svh; tu ju drží tok. */
max-height: none;
align-self: auto;
width: 100%;
max-width: none;
right: auto;
bottom: auto;
margin: 0;
align-items: stretch;
justify-content: center;
/* Základné `z-index: 12` zakladá vlastný stacking context a `multiply`
na obrázku by potom miešal iba s obsahom tejto scény, nie s podkladom
Hera -- biely obdĺžnik by zostal. Na mobile sa nič neprekrýva, takže
poradie vykreslenia môže vyplynúť z DOM. */
z-index: auto;
}
.hero-person-media {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 50% 100%;
/* Asset je nepriehľadný výrez z videa s bielym pozadím (254,254,254).
`multiply` ho na svetlom podklade Hera pohltí, takže okolo postavy
nezostane biely obdĺžnik a mriežka pod ňou zostáva čitateľná. */
mix-blend-mode: multiply;
}
/* Zelená žiara musí spod portrétu preč: `multiply` by ju premietol do
tváre a pleti skutočnej fotografie. Podklad zostáva svetlý, takže z
assetu ostane čistý výrez. */
.person-glow,
.hero-stage-glow { display: none; }
/* Tri kartičky rolí. */
.category-pills {
order: 4;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(6px, 1.8vw, 10px);
margin: 0;
}
.category-pill {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(5px, 1.6vw, 8px);
min-width: 0;
min-height: 46px;
padding: 8px clamp(4px, 1.4vw, 8px);
border-radius: 14px;
background: #fff;
border: 1px solid rgba(20, 22, 26, 0.08);
box-shadow: 0 2px 6px rgba(20, 22, 26, 0.05), 0 10px 26px rgba(20, 22, 26, 0.06);
}
.category-pill .pill-icon {
display: grid;
place-items: center;
width: clamp(20px, 6vw, 24px);
height: clamp(20px, 6vw, 24px);
border-radius: 50%;
background: var(--accent);
color: #0B0D10;
flex: none;
}
.category-pill .pill-icon svg { width: 56%; height: 56%; }
/* Najdlhšie slovo je INFLUENCER; pri troch stĺpcoch na 320 px šírky
musí text zmenšovať spolu s výrezom, inak by vytiekol z kartičky. */
.category-pill .pill-text {
min-width: 0;
font-size: clamp(7.5px, 2.3vw, 10px);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
/* CTA je posledný riadok výrezu a je celoplošné. `.hero-proof` je jeho
obal, takže poradie nesie ten. */
.hero-proof {
order: 5;
margin: 0;
width: 100%;
}
/* Číselné dôkazy sú v samostatnom páse pod Hero. V samotnom Hero tak
ostáva len jedno CTA a tabletový medzistav sa výškovo nerozpadne. */
.hero-proof .hero-float-card { display: none; }
.hero-cta {
width: 100%;
justify-content: center;
min-height: 54px;
margin: 0;
}
/* Menný lockup preberá rolu obrieho wordmarku, takže ten na mobile
nemá čo opakovať. */
.hero-backdrop-name { display: none; }
/* Zelených objektov v prvom výreze zostávajú dva: prstenec CTA a ikony
v kartičkách. Guľa a bublina by boli tretí a štvrtý. */
.scene2-blob--1,
.scene2-sphere--1 { display: none; }
/* ---------- 02 / O MNE ---------- */
/* `MÔJ PRÍBEH` dostáva vlastný akčný riadok a centruje sa rozložením,
nie posunom ani zápornými okrajmi. */
.about-copy > #aboutToggle {
display: flex;
align-self: center;
justify-content: center;
margin-inline: auto;
margin-top: clamp(18px, 3.4vh, 30px);
min-height: 50px;
}
.about-copy {
display: flex;
flex-direction: column;
}
.about-facts { align-self: stretch; }
}
/* ---------- 03 + 04 / PONUKA NA MIERU ----------
Bránou je výhradne trieda `.is-mreveal`, ktorú nasadzuje
`mobileScenesActive()` v main.js -- rovnako ako pri stohu služieb a
scénach maskotov. Žiadna šírková hranica: široký dotykový tablet aj
hybrid po prvom dotyku dostanú tú istú natívnu vetvu (CA-011). */
@media (prefers-reduced-motion: no-preference) {
/* Pôvodný široký dotykový/tabletový prechod zostáva základom. Mobilná
oprava pod 1024 px ho nižšie prepíše bez zásahu do desktopu. */
.contact-cover.is-mreveal {
display: block;
position: relative;
z-index: 30; /* nad Projektami (3), pod hlavičkou (90) */
margin-top: calc(-1 * var(--cover-range, 50svh));
}
.is-mreveal #kontakt {
position: relative;
transform: translate3d(0, calc((1 - var(--cp, 1)) * var(--cover-range, 50svh)), 0);
/* Tvar listu. `clip-path` nespúšťa reflow a je to tá istá technika,
akou je postavený kontajnerový prechod na /sluzby/. */
clip-path: inset(
0 calc((1 - var(--cp, 1)) * 14px) 0 calc((1 - var(--cp, 1)) * 14px)
round calc((1 - var(--cp, 1)) * 30px) calc((1 - var(--cp, 1)) * 30px) 0 0);
will-change: transform, clip-path;
}
/* Obsah dosadá spolu s panelom, nie po ňom. */
.is-mreveal .contact-grid {
opacity: calc(0.88 + var(--cp, 1) * 0.12);
}
/* Pôvodný jemný odchod referencií na širokej dotykovej vetve. */
.is-mreveal-behind {
transform: scale(calc(1 - var(--cp-behind, 0) * 0.02));
transform-origin: 50% 100%;
will-change: transform;
}
}
/* Nový swipe/Safari variant je striktne mobilný. Nad 1024 px tak ostáva
doterajšia desktopová aj široká dotyková geometria bez zmeny. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
#sluzby.svc-mstack { padding: 0; }
.svc-mstack #svcStage {
/* Zaparkované karty nesmú presahovať do nasledujúcej sekcie. */
clip-path: inset(-32px -10vw -32px);
}
.contact-cover.is-mreveal { margin-top: 0; }
.is-mreveal #kontakt {
transform: none;
will-change: clip-path;
}
.is-mreveal-behind {
transform: none;
transform-origin: initial;
will-change: auto;
}
}
/* Naležato aj pri redukovanom pohybe je panel bežná sekcia v toku
a neinterpoluje sa nič. */
@media (max-width: 1024px) and (max-height: 480px),
(prefers-reduced-motion: reduce) {
.contact-cover.is-mreveal { margin-top: 0; z-index: auto; }
.is-mreveal #kontakt { transform: none; clip-path: none; }
.is-mreveal .contact-grid { opacity: 1; }
.is-mreveal-behind { transform: none; }
}
/* Obal kontaktu negeneruje box, kým ho mobilná vetva nezapne. Desktopový
cover tak vidí presne tú istú štruktúru ako predtým. */
.contact-cover { display: contents; }
/* ============================================================
REFERENCIE NA ÚZKOM VÝREZE — všetko na osi stránky
Pri 1024 px sa `.reviews-top` láme na jeden stĺpec: blok „5,0" už nestojí
vedľa karusela, ale nad ním. Celá sekcia sa preto skladá na stred a
všetko, čo bolo zarovnané doľava kvôli dvojstĺpcu, sa centruje.
============================================================ */
@media (max-width: 1024px) {
.reviews-top .rating-block { width: 100%; min-width: 0; text-align: center; }
.reviews-top .rating-score,
.reviews-top .rating-label {
width: max-content;
max-width: 100%;
margin-inline: auto;
}
/* The negative headline tracking belongs to the numerals, not the star.
Removing it on the final glyph keeps the combined mark on the axis. */
.reviews-top .rating-star { letter-spacing: 0; }
.reviews-top .rating-score,
.reviews-top .rating-label,
.reviews-top .rating-filters { justify-content: center; }
/* `.review-carousel` má `align-items: flex-start`, takže upozornenie sa
na širšom výreze zmrští na obsah a ostane vľavo. `align-self` ho vráti
na os -- rozložením, nie posunom. */
.review-notice {
align-self: center;
justify-content: center;
text-align: center;
}
/* Obsah recenzie je citát -- na stred je to prirodzené a zvyšok sekcie
je tam tiež. */
.review-card { text-align: center; }
/* Ľavý presah a feather existujú preto, aby karta mizla pod blokom „5,0".
V jednom stĺpci ten blok vedľa nej nie je, takže presah nemá čo
vyrovnávať a maska by len zmäkčila pravú hranu karty -- pri centrovanej
skladbe by tá asymetria bila do očí. Na jednu kartu vo výreze nie je
čo featherovať; susedné karty odreže `overflow: hidden`. */
.review-viewport {
margin-left: 0;
width: 100%;
padding-left: 0;
-webkit-mask-image: none;
mask-image: none;
}
}
/* Vstupný prílet kariet a CTA píše GSAP do inline transformu. `.hero-cta`
má vlastný `transition: transform 0.28s` kvôli hoveru, ktorý by ten prílet
dobrzdil a rozmazal. Prechod sa preto zapne až keď je Hero usadené --
presne vtedy, keď je na hover naozaj potrebný. */
html:not(.hero-ready) .hero-cta { transition: none; }
/* ============================================================
BIELY PRUH POD PRIPNUTÝM STOHOM SLUŽIEB
Pri vstupe do stohu dorovnáva `compensateDocHeight()` výšku dokumentu
zápisom `margin-bottom` na #sluzby -- pri 1440x900 je to celých 900 px.
Margin však leží MIMO boxu sekcie, takže sa v ňom nevykresľuje jej tmavé
pozadie, ale biele pozadie `body`. Sekcia je pritom presne taká vysoká
ako výrez, takže stačil posun scrollu o jediný pixel a pod tmavou scénou
sa objavil biely pruh.
Padding namiesto marginu použiť nejde: `.svc-decor--blob-lg` je ukotvený
na `bottom: -12%` a odsunul by sa mimo výrez. `#sluzby::after` je
obsadený vrstvou mriežky.
Kým je región pripnutý, výrez patrí výhradne #sluzby a #projekty -- oba
sú nepriehľadné a celoplošné -- takže podklad stránky smie byť tmavý.
Trieda `is-staged-region` vzniká v `pinScroll()` a zaniká v
`unpinScroll()`, teda v tom istom synchrónnom bloku ako ten margin;
tmavý podklad preto nikdy nesvieti pod svetlou sekciou. */
html.is-staged-region,
html.is-staged-region body { background-color: #111214; }
/* Aby dorovnávacia medzera nebola len tmavá plocha, pokračuje v nej aj
mriežka. Vrstva presahuje o výrez nadol; keď sekcia pripnutá nie je,
presah prekryje #projekty (z-index 3 nad z-index 2). */
html.is-staged-region #sluzby::after { bottom: -100svh; }
/* ============================================================
STOH SLUŽIEB — TÉMY POZADIA A ICH PRECHOD
Tri stavy: 01 tmavý, 02 zelený, 03 opäť tmavý. Farba prichádza zdola
ako fyzická vrstva pod kartami; mriežka zostáva na vlastnej vrstve
a iba krížovo stmieva farbu, takže sa jej geometria ani fáza nikdy
nepohnú.
Progres píše jediný vlastník: na desktope timeline automatu, na mobile
scrollový progres pripnutej scény. Obe vetvy zapisujú tie isté dve
premenné, takže nevznikajú dvaja zapisovatelia toho istého transformu.
============================================================ */
#sluzby {
--svc-feather: clamp(72px, 10vh, 132px);
--svc-green-p: 0; /* 0 = zelená vrstva je pod scénou, 1 = kryje ju celú */
--svc-darkb-p: 0; /* to isté pre návratovú tmavú vrstvu nad zelenou */
--svc-gridgreen: 0; /* krytie bielej mriežky na zelenej */
}
.svc-theme {
position: absolute;
left: 0;
right: 0;
/* Vrstva presahuje nahor presne o feather, takže v pokoji leží mäkká
hrana nad sekciou a plocha je celistvá. */
top: calc(-1 * var(--svc-feather));
height: calc(100% + var(--svc-feather));
z-index: 0;
pointer-events: none;
will-change: transform;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--svc-feather));
mask-image: linear-gradient(180deg, transparent 0, #000 var(--svc-feather));
}
.svc-theme--green {
background-color: var(--accent);
transform: translate3d(0, calc((1 - var(--svc-green-p)) * 100%), 0);
}
.svc-theme--dark-b {
background-color: #080B0D;
transform: translate3d(0, calc((1 - var(--svc-darkb-p)) * 100%), 0);
}
/* Biela mriežka na zelenej. Geometria je zhodná s tmavou mriežkou
(#sluzby::after), takže krížové stmievanie farby nemôže žiadnu čiaru
pohnúť -- líši sa iba farba a krytie. */
.svc-grid--green {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: var(--svc-gridgreen);
background-image:
linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
background-size: var(--grid-cell) var(--grid-cell);
background-position: 0 var(--grid-y, 0px);
background-repeat: repeat;
}
/* Tmavá mriežka ustupuje presne o toľko, o koľko nastúpi biela. */
#sluzby::after { opacity: calc(1 - var(--svc-gridgreen)); }
/* ── Karta 02 — čierna na zelenom ─────────────────────────── */
.svc-card--2 {
background: #08090C;
border: 1px solid rgba(255, 255, 255, 0.06);
/* Tieň oddeľuje čiernu kartu od sýtozelenej plochy bez sivého halo:
čistá čierna s nízkym krytím, žiadna sivá zložka. */
box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.4);
}
/* Referencia ukazuje plne sýte zelené číslo, nie stlmené ako na karte 01. */
.svc-card--2 .svc-card-num { color: var(--accent); opacity: 1; }
.svc-card--2 .svc-t-a { color: #fff; }
.svc-card--2 .svc-t-b { color: var(--accent); }
.svc-card--2 .svc-card-lead { color: #fff; }
.svc-card--2 .svc-card-desc { color: rgba(255, 255, 255, 0.62); }
.svc-card--2 .svc-card-tag { color: var(--accent); }
/* ── Karta 03 — biela na tmavom ───────────────────────────── */
.svc-card--3 {
background: #F7F7F4;
border: 1px solid rgba(8, 11, 13, 0.06);
box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 255, 0, 0.1);
}
.svc-card--3 .svc-card-num { color: var(--accent); opacity: 1; }
.svc-card--3 .svc-t-a { color: #08090C; }
.svc-card--3 .svc-t-b { color: var(--accent); }
.svc-card--3 .svc-card-lead { color: #08090C; }
.svc-card--3 .svc-card-desc { color: rgba(8, 11, 13, 0.58); }
.svc-card--3 .svc-card-tag { color: var(--accent); }
/* Zadné vrstvy stohu musia byť na tmavom pozadí čitateľné. */
.svc-card--2,
.svc-card--3 { overflow: hidden; }
/* ============================================================
POSLEDNÁ HOMEPAGE SEKCIA — SLUŽBY + SOCIÁLNE SIETE
============================================================ */
.contact-kicker {
margin: 0 0 clamp(14px, 2vh, 24px);
color: rgba(255, 255, 255, 0.72);
font-size: clamp(11px, 0.95vw, 15px);
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.contact-title-accent { color: var(--accent); }
.contact-cta {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: clamp(20px, 3vh, 34px);
min-height: 54px;
}
/* ============================================================
ZDIEĽANÝ SOCIAL BLOK
Jeden komponent pre domovskú stránku aj pre /sluzby/; líši sa iba
variant obalu. Karty tvoria jeden prekrytý balík, nie tri stĺpce.
Vstupná animácia píše do `.social-card__entrance`, hover do
`.social-card__hover`. Dva samostatné obaly znamenajú, že si hover
a entrance nikdy neprepíšu ten istý transform.
============================================================ */
.social-block {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2.4vh, 30px);
min-width: 0;
}
.social-label {
margin: 0;
color: #fff;
font-size: clamp(11px, 0.95vw, 15px);
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.social-stack {
--sc-w: clamp(150px, 15.4vw, 258px);
/* Rozostup je taky, aby bola citatelna hlavicka vsetkych troch kariet --
platforma musi byt identifikovatelna aj bez hoveru. */
--sc-spread: 72%;
position: relative;
width: calc(var(--sc-w) * 2.62);
max-width: 100%;
/* Vysku urcuje stredna karta, ktora zostava v toku -- ziadna magicka
konstanta, ktora by sa pri inom pomere pisma rozisla s obsahom.
`overflow: visible` necha pretiect natoceny okraj bocnych kariet
aj zdvih pri hoveri. */
overflow: visible;
}
.social-card {
/* `` je inline -- bez `display: block` by sa sirka ignorovala
a stredna karta (jedina v toku) by roztiahla cely blok. */
display: block;
width: var(--sc-w);
text-decoration: none;
border-radius: 0;
/* Bez JS aj pri redukovanom pohybe je vejár rovno na mieste. */
}
.social-card__entrance,
.social-card__hover {
display: block;
will-change: transform;
}
.social-card__content {
display: flex;
flex-direction: column;
gap: clamp(8px, 0.8vw, 14px);
padding: clamp(10px, 1vw, 16px);
border-radius: clamp(14px, 1.5vw, 24px);
background: #FBFCFB;
border: 1px solid rgba(8, 11, 13, 0.08);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.24);
}
.social-card__head {
display: flex;
align-items: center;
gap: clamp(6px, 0.6vw, 10px);
min-width: 0;
}
.social-card__logo { display: block; flex: none; }
.social-logo-svg { display: block; width: clamp(20px, 1.9vw, 30px); height: auto; }
.social-card__name {
color: #08090C;
font-size: clamp(9px, 0.82vw, 13px);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-card__media {
display: block;
overflow: hidden;
border-radius: clamp(6px, 0.6vw, 10px);
aspect-ratio: 5 / 7;
background: #E9EBE9;
}
.social-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.social-card__go { display: block; color: var(--accent); }
.social-card__go svg { width: clamp(15px, 1.3vw, 21px); height: auto; display: block; }
/* Vejár. Facebook je stredná a najvyššia karta. */
.social-card--instagram .social-card__entrance { transform: translateX(calc(-1 * var(--sc-spread))) rotate(-2.2deg); }
.social-card--facebook .social-card__entrance { transform: translateX(0) rotate(0deg); }
.social-card--tiktok .social-card__entrance { transform: translateX(var(--sc-spread)) rotate(2.2deg); }
/* Stredna karta drzi vysku bloku, bocne dve su nad nou absolutne. */
.social-card--facebook {
position: relative;
margin-inline: auto;
z-index: 3;
}
.social-card--instagram,
.social-card--tiktok {
position: absolute;
top: 0;
left: 50%;
margin-left: calc(var(--sc-w) / -2);
}
.social-card--instagram { z-index: 1; }
.social-card--tiktok { z-index: 2; }
.social-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
/* Aktívna karta má jemný zelený edge glow; ostatné sa iba stlmia (filter
rieši JS, aby sa hodnota nebila s entrance transformom). */
.social-card.is-social-active .social-card__content {
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 0, 0.35),
0 0 28px rgba(0, 255, 0, 0.22);
}
/* Layout poslednej homepage sekcie: text vľavo, social vpravo. */
@media (min-width: 1025px) {
.social-block--home { align-items: flex-start; }
}
/* Mobil a tablet: text -> CTA -> social stack pod sebou. */
@media (max-width: 1024px) {
.social-block { align-items: center; margin-top: clamp(26px, 5vh, 48px); }
.social-stack { --sc-w: clamp(126px, 30vw, 200px); --sc-spread: 66%; }
}
@media (max-width: 767px) {
.social-stack { --sc-w: clamp(112px, 31vw, 170px); --sc-spread: 62%; }
/* Dotykový cieľ nesmie klesnúť pod 44 px ani pri najmenšej karte. */
.social-card { min-width: 44px; }
}
/* Redukovaný pohyb: vejár je rovno na mieste, žiadny dobeh ani hover. */
@media (prefers-reduced-motion: reduce) {
.social-card__entrance,
.social-card__hover { transition: none !important; }
}
/* ============================================================
SOCIAL STACK — oddelená vizuálna a interakčná vrstva
Karty sa animujú (scale, posun, z-index), takže hitbox naviazaný priamo
na ne bol nestabilný: pri vodorovnom pohybe sa Facebook preskakoval,
lebo aktívna karta si pod kurzorom menila plochu.
Riešenie: vizuálna vrstva nemá pointer-events vôbec a odkazy vlastní
pevná mriežka troch rovnakých tretín nad celou kompozíciou. Tá sa
nehýbe a nemení šírku, takže poradie aktivácie je vždy
Instagram -> Facebook -> TikTok.
============================================================ */
.social-stack { isolation: isolate; }
.social-stack__visuals {
position: relative;
pointer-events: none;
}
.social-stack__interaction {
position: absolute;
inset: 0;
z-index: 100;
display: grid;
/* CA-022: stredná zóna má presne šírku vrchnej (Facebook) karty, bočné
zóny vypĺňajú zvyšok vejára. Hranice zón tak sedia na viditeľných
hranách kariet (predtým tri rovnaké tretiny nechávali 10-14 px okrajov
Facebooku v zónach Instagramu a TikToku). Vizuálne prekrytie sa nemení. */
grid-template-columns: minmax(0, 1fr) var(--sc-w) minmax(0, 1fr);
}
.social-stack__zone {
position: relative;
min-width: 0;
display: block;
/* Vlastný focus ring by bol obdĺžnik cez celú tretinu; ring kreslí
príslušná vizuálna karta (`.is-social-focus`). */
outline: none;
-webkit-tap-highlight-color: transparent;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* TikTok je v pokoji čiastočne za Facebookom, takže jeho hlavička patrí
na odkrytú pravú stranu karty. Platí v oboch použitiach komponentu. */
.social-card--tiktok .social-card__head {
justify-content: flex-end;
text-align: right;
}
/* Focus z klávesnice vyzerá rovnako ako hover a ring sedí na karte. */
.social-card.is-social-focus .social-card__content {
outline: 3px solid var(--accent);
outline-offset: 4px;
}