/* ============================================================
filipknazek.com — jeden web, dva svety
Základ: eko-koučink V2 vizuálny systém
Outfit + Poppins · zaoblené tvary · kruhové fotorámy · pill prvky
Vetvy: [data-branch="priroda"] (teplá) · [data-branch="workshopy"] (chladná)
============================================================ */
:root {
/* --- základ (prírodná vetva + rozcestník) --- */
--c-dark: #414B3B; /* olive */
--c-dark-deep: #333C2E;
--c-dark-soft: #55614C;
--c-cream: #F6F6E9;
--c-cream-2: #ECEDDB;
--c-cream-3: #E5E9D7;
--c-accent: #8CA87C; /* sage */
--c-accent-deep: #74905F;
--c-brass: #AB8742; /* zlatá niť naprieč oboma svetmi */
--c-brass-deep: #8E6E31;
--c-text: #414B3B;
--c-text-soft: #62705A;
--c-text-mute: #8C9683;
--c-line: rgba(65, 75, 59, 0.16);
--c-line-strong: rgba(65, 75, 59, 0.34);
--c-on-dark: #F6F6E9;
--c-on-dark-soft: rgba(246, 246, 233, 0.78);
--c-on-dark-mute: rgba(246, 246, 233, 0.55);
--c-line-dark: rgba(246, 246, 233, 0.18);
--orb-a: rgba(140, 168, 124, 0.5);
--orb-b: rgba(171, 135, 66, 0.34);
--f-display: "Outfit", "Poppins", -apple-system, sans-serif;
--f-text: "Poppins", -apple-system, sans-serif;
--container: 1240px;
--r-sm: 14px;
--r: 24px;
--r-lg: 36px;
--r-xl: 52px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--f-text);
font-size: 16px;
line-height: 1.7;
color: var(--c-text);
background: var(--c-cream);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent-deep); }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--c-accent); color: var(--c-cream); }
:focus-visible { outline: 3px solid var(--c-brass); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-dark); color: var(--c-cream); padding: 14px 20px; z-index: 200; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }
/* ---------- Typografia ---------- */
.eyebrow {
font-family: var(--f-text);
font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--c-brass);
display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--c-brass); }
h1, h2, h3 {
font-family: var(--f-display);
color: var(--c-dark);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.025em;
text-transform: uppercase;
}
h1 { font-size: clamp(38px, 6.2vw, 88px); }
h2 { font-size: clamp(28px, 4vw, 54px); }
h3 { font-size: clamp(19px, 1.9vw, 25px); letter-spacing: -0.015em; }
h4 { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--c-dark); letter-spacing: -0.01em; }
.accent { color: var(--c-accent); }
.accent-brass { color: var(--c-brass); }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
section { padding: clamp(64px, 8vw, 118px) 0; position: relative; }
section.compact { padding: clamp(44px, 5.5vw, 78px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 4.5vw, 62px); max-width: 800px; }
.section-head p { color: var(--c-text-soft); max-width: 620px; }
.on-dark { background: var(--c-dark); color: var(--c-on-dark); }
.on-dark h2, .on-dark h3, .on-dark h4 { color: var(--c-on-dark); }
.on-dark .section-head p, .on-dark p { color: var(--c-on-dark-soft); }
.on-dark .eyebrow { color: var(--c-accent); }
.on-dark .eyebrow::before { background: var(--c-accent); }
/* ---------- Dekor ---------- */
.dots {
position: absolute; width: 96px; height: 96px;
background-image: radial-gradient(currentColor 2.2px, transparent 2.2px);
background-size: 19px 19px; opacity: 0.5; pointer-events: none;
}
.orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: orb-drift ease-in-out infinite alternate; }
.orb-1 { width: 460px; height: 460px; background: radial-gradient(circle, var(--orb-a), transparent 70%); top: -8%; left: -6%; animation-duration: 20s; }
.orb-2 { width: 380px; height: 380px; background: radial-gradient(circle, var(--orb-b), transparent 70%); top: 45%; right: -8%; animation-duration: 26s; animation-delay: -9s; }
.orb-3 { width: 320px; height: 320px; background: radial-gradient(circle, var(--orb-a), transparent 70%); bottom: -4%; left: 32%; animation-duration: 23s; animation-delay: -14s; }
@keyframes orb-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(56px,-46px) scale(1.14); } }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--c-cream) 88%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
border-bottom: 1px solid var(--c-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand { display: flex; align-items: center; gap: 13px; font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--c-dark); letter-spacing: 0.02em; text-transform: uppercase; }
.brand-mark {
width: 44px; height: 44px;
background: var(--c-dark); color: var(--c-cream);
border-radius: 50%; display: grid; place-items: center;
flex-shrink: 0; transition: transform .3s;
}
.brand:hover .brand-mark { transform: rotate(-12deg); }
.brand-mark svg { width: 24px; height: 24px; }
.brand-sub { display: block; font-family: var(--f-text); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; color: var(--c-text-mute); text-transform: uppercase; }
.nav-primary { display: flex; align-items: center; gap: 28px; }
.nav-primary a { font-size: 14px; font-weight: 500; color: var(--c-text-soft); }
.nav-primary a:hover, .nav-primary a.is-active { color: var(--c-dark); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.menu-toggle { display: none; }
.lang-switch { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--c-text-mute); letter-spacing: .08em; }
.lang-switch a.is-active { color: var(--c-dark); }
/* prepínač sveta v hlavičke */
.branch-switch {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: .06em;
color: var(--c-text-mute); text-transform: uppercase;
padding: 9px 16px; border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--c-line);
transition: box-shadow .2s, color .2s;
}
.branch-switch:hover { color: var(--c-dark); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.branch-switch svg { width: 15px; height: 15px; }
/* ---------- Tlačidlá ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 30px;
font-family: var(--f-display); font-size: 14px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
background: var(--c-dark); color: var(--c-cream);
border-radius: 999px;
transition: transform .25s cubic-bezier(.2,.8,.3,1.2), background .2s, box-shadow .25s;
}
.btn:hover { background: var(--c-dark-deep); color: var(--c-cream); box-shadow: 0 14px 30px -16px rgba(0,0,0,.55); }
.btn.btn-accent { background: var(--c-accent); color: var(--c-dark); }
.btn.btn-accent:hover { background: var(--c-accent-deep); color: var(--c-cream); }
.btn.btn-brass { background: var(--c-brass); color: var(--c-cream); }
.btn.btn-brass:hover { background: var(--c-brass-deep); color: var(--c-cream); }
.btn.btn-cream { background: var(--c-cream); color: var(--c-dark); }
.btn.btn-cream:hover { background: #fff; color: var(--c-dark); }
.btn.btn-ghost { background: transparent; color: var(--c-dark); box-shadow: inset 0 0 0 2px var(--c-line-strong); }
.btn.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--c-dark); background: transparent; color: var(--c-dark); }
.on-dark .btn.btn-ghost, .hero .btn.btn-ghost, .contact-panel .btn.btn-ghost { color: var(--c-cream); box-shadow: inset 0 0 0 2px var(--c-line-dark); }
.on-dark .btn.btn-ghost:hover, .hero .btn.btn-ghost:hover, .contact-panel .btn.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--c-accent); color: var(--c-accent); background: transparent; }
.btn-arrow { transition: transform .2s; }
.btn:hover .btn-arrow { transform: translateX(4px); }
/* ---------- Hero ---------- */
.hero {
background: var(--c-dark); color: var(--c-on-dark);
border-radius: 0 0 var(--r-xl) var(--r-xl);
padding: clamp(56px, 7.5vw, 112px) 0 clamp(52px, 6.5vw, 92px);
overflow: hidden; z-index: 2;
}
.hero h1, .hero h2 { color: var(--c-on-dark); }
.hero .eyebrow { color: var(--c-accent); }
.hero .eyebrow::before { background: var(--c-accent); }
.hero-eyebrow { margin-bottom: 26px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 8px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .2s; }
.hero h1 .sm { font-size: 0.52em; font-weight: 500; letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
@keyframes rise { to { transform: translateY(0); } }
.hero-sub { max-width: 540px; color: var(--c-on-dark-soft); font-size: 17px; margin: 24px 0 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-visual { position: relative; aspect-ratio: 1; }
.photo-circle {
position: absolute; inset: 6% 8% 6% 4%;
border-radius: 50%; overflow: hidden;
border: 12px solid var(--c-brass);
box-shadow: 0 30px 70px -34px rgba(0,0,0,0.6);
}
.photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual::before {
content: ""; position: absolute; inset: -4% 16% 12% -8%;
border-radius: 50%; border: 10px solid var(--c-accent); opacity: 0.85;
}
.hero-dots { top: 2%; right: 2%; color: var(--c-accent); }
.hero-badge {
position: absolute; left: -4%; bottom: 6%;
background: var(--c-accent); color: var(--c-dark);
font-family: var(--f-display); font-weight: 800; font-size: 13px;
letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
padding: 20px 26px; border-radius: var(--r-lg); line-height: 1.35;
z-index: 3; animation: bob 5s ease-in-out infinite alternate;
}
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(9px); } }
/* ---------- ROZCESTNÍK: dvoje dvere ---------- */
.doors { z-index: 2; }
.doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.door {
position: relative; overflow: hidden;
border-radius: var(--r-xl);
min-height: clamp(380px, 46vw, 520px);
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(28px, 3.4vw, 46px);
color: var(--c-on-dark);
isolation: isolate;
transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.door::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(175deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.82) 100%);
}
.door img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.door:hover { transform: translateY(-8px); }
.door:hover img { transform: scale(1.07); }
.door .eyebrow { color: #fff; margin-bottom: 14px; }
.door .eyebrow::before { background: var(--c-brass); }
.door h2 { color: #fff; margin-bottom: 14px; }
.door p { color: rgba(255,255,255,.86); max-width: 40ch; margin-bottom: 24px; font-size: 15.5px; }
.door-cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-display); font-weight: 700; font-size: 14px;
letter-spacing: .05em; text-transform: uppercase;
padding: 15px 28px; border-radius: 999px;
background: var(--c-cream); color: var(--c-dark);
align-self: flex-start;
transition: gap .2s, background .2s;
}
.door:hover .door-cta { gap: 16px; background: #fff; }
.door-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.door-list span {
font-size: 12px; font-weight: 600; letter-spacing: .04em;
padding: 7px 14px; border-radius: 999px;
background: rgba(255,255,255,.14); color: #fff;
backdrop-filter: blur(4px);
}
/* farebný podpis dverí */
.door--work .eyebrow::before { background: var(--c-brass); }
.door--nature .eyebrow::before { background: var(--c-accent); }
/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 18px 0; background: var(--c-accent); color: var(--c-dark); position: relative; z-index: 2; }
.marquee-track {
display: flex; gap: 52px; width: max-content; white-space: nowrap;
animation: marquee 28s linear infinite;
font-family: var(--f-display); font-weight: 700;
font-size: clamp(15px, 1.7vw, 21px); letter-spacing: 0.03em; text-transform: uppercase;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 52px; }
.marquee-track .m-dot { color: var(--c-cream); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* ---------- Štatistiky ---------- */
.stats { z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stats-grid.four { grid-template-columns: repeat(4, 1fr); }
.stat-card { background: var(--c-cream-2); border-radius: var(--r-lg); padding: 38px 32px; transition: transform .3s; position: relative; overflow: hidden; }
.stat-card:nth-child(2) { background: var(--c-accent); }
.stat-card:nth-child(2) .stat-num { color: var(--c-cream); }
.stat-card:nth-child(2) p { color: rgba(246,246,233,0.88); }
.stat-card:hover { transform: translateY(-7px); }
.stat-num {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(42px, 5vw, 70px); color: var(--c-dark);
line-height: 1; letter-spacing: -0.04em;
display: flex; align-items: baseline; gap: 3px;
}
.stat-num .unit { font-size: 0.36em; font-weight: 700; color: var(--c-brass); }
.stat-card p { margin-top: 14px; color: var(--c-text-soft); font-size: 15px; }
/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.bento-cell {
background: var(--c-cream-2); border-radius: var(--r-lg); padding: 36px;
display: flex; flex-direction: column; gap: 14px;
transition: transform .3s; overflow: hidden; position: relative;
}
.bento-cell:hover { transform: translateY(-5px); }
.bento-main { grid-column: span 7; background: var(--c-dark); color: var(--c-on-dark); }
.bento-main p { color: var(--c-on-dark-soft); }
.bento-side { grid-column: span 5; }
.bento-third { grid-column: span 4; }
/* metódy: nízky pás na celú šírku pod citátom aj fotkou, text bez obmedzenia šírky */
.bento-methods { grid-column: span 12; padding-block: clamp(20px, 2.2vw, 28px); }
.bento-methods h4 { font-size: clamp(17px, 1.5vw, 20px); margin-bottom: 6px; }
.bento-cell.bento-methods p { font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.6; max-width: none; color: var(--c-text); }
.bento-photo { padding: 0; min-height: 320px; background: var(--c-cream-3); }
.bento-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 1.2s ease; }
.bento-photo:hover img { transform: scale(1.06); }
.bento-cell p { color: var(--c-text-soft); font-size: 15px; }
.bento-num { font-family: var(--f-display); font-weight: 800; font-size: 34px; color: var(--c-brass); letter-spacing: -0.03em; }
.bento-more {
display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
font-size: 13px; font-weight: 500; color: var(--c-text-mute);
}
.bento-more .ar { transition: transform .25s ease; }
.bento-more:hover { color: var(--c-brass); text-decoration: underline; text-underline-offset: 3px; }
.bento-more:hover .ar { transform: translateX(4px); }
.big-quote { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.35; letter-spacing: -0.02em; color: var(--c-dark); }
.on-dark .big-quote { color: var(--c-on-dark); }
.bento-dots { bottom: 14px; right: 14px; color: var(--c-accent); width: 76px; height: 76px; }
/* ---------- Formáty / služby (riadky) ---------- */
.formats { z-index: 2; border-radius: var(--r-xl); margin: 0 clamp(0px, 2vw, 24px); }
.format-list { display: flex; flex-direction: column; gap: 8px; }
.format-row {
display: grid; grid-template-columns: 78px minmax(190px, 1fr) minmax(0, 1.4fr) auto;
gap: clamp(18px, 3vw, 44px); align-items: center;
padding: 26px 24px; border-radius: var(--r);
transition: background .25s, transform .25s;
}
.format-row:hover { background: rgba(255,255,255,.08); transform: translateX(6px); }
.format-num {
font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--c-accent);
width: 56px; height: 56px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--c-accent) 50%, transparent);
display: grid; place-items: center;
}
.format-row h3 { font-size: clamp(18px, 2vw, 26px); }
.format-row p { color: var(--c-on-dark-soft); font-size: 15px; }
.format-tag {
font-family: var(--f-display); font-size: 12px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--c-dark); background: var(--c-accent);
padding: 10px 20px; border-radius: 999px; white-space: nowrap;
}
/* ---------- Karty služieb (workshopy) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
background: var(--c-cream-2); border-radius: var(--r-lg); padding: 38px 34px;
display: flex; flex-direction: column; gap: 14px; transition: transform .3s, background .3s;
}
.svc-card:hover { transform: translateY(-7px); background: var(--c-cream-3); }
.svc-num { font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brass); }
.svc-card p { color: var(--c-text-soft); font-size: 15px; }
.svc-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.svc-card li {
font-size: 12.5px; font-weight: 600; color: var(--c-text-soft);
background: var(--c-cream); padding: 8px 15px; border-radius: 999px;
}
/* ---------- Témy (pills) ---------- */
.topic-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-tag {
display: inline-flex; align-items: center; gap: 11px;
background: var(--c-cream-2); border-radius: 999px;
padding: 13px 22px 13px 14px;
font-size: 14.5px; font-weight: 500; color: var(--c-text);
transition: background .25s, transform .25s, color .25s;
}
.topic-tag:hover { background: var(--c-dark); color: var(--c-on-dark); transform: translateY(-3px); }
.topic-num {
font-family: var(--f-display); font-weight: 800; font-size: 11px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--c-brass); color: var(--c-cream);
display: grid; place-items: center; flex-shrink: 0;
}
/* ---------- Prístup (číslovaný zoznam) ---------- */
.approach-list { list-style: none; counter-reset: ap; display: grid; gap: 4px; }
.approach-list li {
counter-increment: ap;
display: grid; grid-template-columns: 64px 1fr; gap: 8px 24px;
padding: 26px 22px; border-radius: var(--r);
transition: background .25s;
}
.approach-list li:hover { background: var(--c-cream-2); }
.approach-list li::before {
content: counter(ap, decimal-leading-zero);
grid-row: span 2;
font-family: var(--f-display); font-weight: 800; font-size: 20px;
color: var(--c-accent);
width: 54px; height: 54px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
display: grid; place-items: center;
}
.approach-list p { color: var(--c-text-soft); font-size: 15px; }
.lede { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 2vw, 27px); line-height: 1.35; letter-spacing: -.02em; color: var(--c-brass); }
/* ---------- Kroky ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; }
.step-card {
background: var(--c-cream-2); border-radius: var(--r); padding: 30px 24px;
display: flex; flex-direction: column; gap: 12px;
counter-increment: step; transition: transform .3s, background .3s;
}
.step-card:hover { transform: translateY(-7px); background: var(--c-cream-3); }
.step-card::before {
content: counter(step);
font-family: var(--f-display); font-weight: 800; font-size: 20px;
color: var(--c-cream); background: var(--c-brass);
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center;
}
.step-card h4 { font-size: 16px; }
.step-card p { color: var(--c-text-soft); font-size: 13.5px; line-height: 1.6; }
/* ---------- Fotopás ---------- */
.photo-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.photo-band figure { margin: 0; }
.pb-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.pb-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.photo-band figure:hover .pb-img img { transform: scale(1.06); }
.photo-band figcaption { margin-top: 14px; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); }
/* ---------- Klienti ---------- */
.client-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.client {
background: var(--c-cream-2); border-radius: var(--r); padding: 26px 18px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; min-height: 130px; transition: transform .3s, background .3s;
}
.client:hover { transform: translateY(-5px); background: var(--c-cream-3); }
.client-wordmark { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--c-dark); line-height: 1.1; }
.client-wordmark em { color: var(--c-brass); font-style: normal; }
.client-note { font-size: 11px; color: var(--c-text-mute); line-height: 1.35; }
/* ---------- Referencie ---------- */
.tm-rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
.tm-rail::-webkit-scrollbar { height: 6px; }
.tm-rail::-webkit-scrollbar-thumb { background: var(--c-line-dark); border-radius: 3px; }
.tm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tm-card {
min-width: min(400px, 82vw); scroll-snap-align: start;
background: var(--c-cream); color: var(--c-text);
border-radius: var(--r-lg); padding: 34px 30px;
display: flex; flex-direction: column; gap: 20px; margin: 0;
}
.tm-grid .tm-card { min-width: 0; background: var(--c-cream-2); }
.tm-card blockquote { font-size: 16px; line-height: 1.6; color: var(--c-text); }
.tm-card blockquote::before {
content: "\201C"; display: block; color: var(--c-brass);
font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: 0.5; margin-bottom: 14px;
}
.tm-person { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.tm-avatar {
width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
background: var(--c-accent); color: var(--c-cream);
display: grid; place-items: center;
font-family: var(--f-display); font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tm-name { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--c-dark); display: block; }
.tm-role { font-size: 12.5px; color: var(--c-text-mute); }
/* ---------- Cenník ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.price-card {
background: var(--c-cream-2); border-radius: var(--r-lg); padding: 44px 40px;
display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: transform .3s;
}
.price-card:hover { transform: translateY(-6px); }
.price-card.featured { background: var(--c-dark); color: var(--c-on-dark); }
.price-card.featured h3 { color: var(--c-on-dark); }
.price-card.featured p { color: var(--c-on-dark-soft); }
.price-card.featured .price-num { color: var(--c-cream); }
.price-card.featured .price-tag { color: var(--c-accent); }
.price-badge {
position: absolute; top: 26px; right: 26px;
background: var(--c-brass); color: var(--c-cream);
font-family: var(--f-display); font-size: 10.5px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px;
}
.price-tag { font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-brass); }
.price-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 4vw, 54px); color: var(--c-dark); letter-spacing: -0.035em; line-height: 1; }
.price-num small { font-size: 15px; font-weight: 500; color: var(--c-text-mute); letter-spacing: 0; font-family: var(--f-text); }
.price-card.featured .price-num small { color: var(--c-on-dark-mute); }
.price-card p { color: var(--c-text-soft); font-size: 15px; }
.price-note { margin-top: 26px; text-align: center; color: var(--c-text-soft); font-size: 15px; }
.price-note a { color: var(--c-brass); font-weight: 600; }
/* ---------- Výstupy ---------- */
.out-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.out-card {
background: var(--c-cream-2); border-radius: var(--r); padding: 28px 22px;
display: flex; flex-direction: column; gap: 10px; min-height: 140px;
transition: transform .3s, background .3s;
}
.out-card:hover { transform: translateY(-6px); background: var(--c-cream-3); }
.out-tag { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brass); }
.out-card h4 { font-size: 16px; margin-top: auto; }
/* ---------- Credentials ---------- */
.creds { list-style: none; display: grid; gap: 9px; margin-top: 26px; }
.creds li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--c-text-soft); }
.creds li::before {
content: ""; position: absolute; left: 0; top: 10px;
width: 9px; height: 9px; border-radius: 50%; background: var(--c-brass);
}
/* ---------- Split (o mne) ---------- */
.split-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(32px, 5vw, 68px); align-items: center; }
.split-media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-text p { color: var(--c-text-soft); margin-bottom: 14px; }
/* ---------- Cross-sell (decentný most medzi svetmi) ---------- */
.cross { z-index: 2; }
.cross-panel {
display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 40px);
align-items: center;
background: var(--c-cream-2); border-radius: var(--r-xl);
padding: clamp(28px, 3.4vw, 46px);
}
.cross-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--c-brass); color: var(--c-cream);
display: grid; place-items: center; flex-shrink: 0;
}
.cross-icon svg { width: 30px; height: 30px; }
.cross-panel h3 { margin-bottom: 6px; }
.cross-panel p { color: var(--c-text-soft); font-size: 15px; max-width: 62ch; }
/* ---------- Kontakt ---------- */
.contact-panel {
background: var(--c-dark); color: var(--c-on-dark);
border-radius: var(--r-xl); padding: clamp(36px, 5.5vw, 72px);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(32px, 4.5vw, 62px); position: relative; overflow: hidden;
}
.contact-panel h2 { color: var(--c-on-dark); }
.contact-panel .eyebrow { color: var(--c-accent); }
.contact-panel .eyebrow::before { background: var(--c-accent); }
.contact-panel > div > p { color: var(--c-on-dark-soft); font-size: 16.5px; margin-top: 16px; max-width: 420px; }
.contact-dots { top: 26px; right: 26px; color: var(--c-accent); }
.contact-info { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; position: relative; z-index: 2; }
.contact-row { display: flex; align-items: center; gap: 14px; }
.contact-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: var(--c-dark); display: grid; place-items: center; flex-shrink: 0; }
.contact-icon svg { width: 21px; height: 21px; }
.contact-info a { font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.6vw, 21px); color: var(--c-cream); }
.contact-info a:hover { color: var(--c-accent); }
.contact-info .lbl { display: block; font-family: var(--f-text); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-on-dark-mute); }
.contact-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; position: relative; z-index: 2; }
.contact-socials a { font-size: 12.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--c-line-dark); color: var(--c-on-dark-soft); }
.contact-socials a:hover { color: var(--c-cream); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
form.contact-form { display: grid; gap: 15px; position: relative; z-index: 2; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-on-dark-mute); }
.field input, .field textarea, .field select {
font: 15px var(--f-text); padding: 15px 18px;
border: 2px solid var(--c-line-dark);
background: color-mix(in srgb, var(--c-cream) 7%, transparent);
color: var(--c-cream); border-radius: var(--r-sm); outline: none;
transition: border .2s, background .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-on-dark-mute); }
.field select option { background: var(--c-dark); color: var(--c-cream); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-cream) 12%, transparent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.honey { position: absolute; left: -9999px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--c-on-dark-soft); }
.consent input { margin-top: 3px; accent-color: var(--c-accent); }
.form-status { font-size: 13px; font-weight: 600; color: var(--c-accent); min-height: 18px; }
.form-status.is-error { color: #E8A87C; }
/* ---------- Footer ---------- */
.site-footer { padding: 54px 0 30px; border-top: 1px solid var(--c-line); position: relative; z-index: 2; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.footer-brand p { color: var(--c-text-mute); font-size: 13px; margin-top: 12px; max-width: 340px; }
.footer-links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; color: var(--c-text-soft); flex-wrap: wrap; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-links a:hover { color: var(--c-dark); }
.footer-bot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--c-text-mute); }
.footer-bot a { color: var(--c-text-soft); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
.orbs { display: none; }
.hero h1 .line > span { transform: none; }
html { scroll-behavior: auto; }
}
/* ---------- Responzívne ---------- */
@media (max-width: 1080px) {
.out-grid { grid-template-columns: repeat(3, 1fr); }
.client-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.bento-main, .bento-side, .bento-third, .bento-methods { grid-column: span 12; }
.svc-grid { grid-template-columns: 1fr; }
.stats-grid.four { grid-template-columns: repeat(2, 1fr); }
.format-row { grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; gap: 16px 20px; }
.format-row h3 { grid-column: 2; }
.format-row p { grid-column: 1 / -1; }
.format-tag { grid-column: 1 / -1; justify-self: start; }
.format-num { width: 48px; height: 48px; font-size: 18px; }
.doors-grid { grid-template-columns: 1fr; }
.split-grid { grid-template-columns: 1fr; }
.tm-grid { grid-template-columns: 1fr; }
.cross-panel { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 960px) {
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--c-cream); }
.nav-primary {
position: fixed; inset: 80px 0 0 0;
flex-direction: column; align-items: flex-start; gap: 0;
padding: 32px clamp(20px, 4vw, 48px);
background: var(--c-cream);
transform: translateY(-110%); transition: transform .35s ease;
z-index: 49; border-bottom: 1px solid var(--c-line);
overflow-y: auto;
}
.nav-primary.open { transform: translateY(0); }
.nav-primary a { width: 100%; padding: 17px 0; font-size: 21px; font-family: var(--f-display); font-weight: 700; color: var(--c-dark); border-bottom: 1px solid var(--c-line); text-transform: uppercase; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--c-dark); color: var(--c-cream); border-radius: 50%; }
.menu-toggle svg { width: 20px; height: 20px; }
.header-cta, .branch-switch { display: none; }
/* Modifikátory (.hero--duo/panel/solo) su definovane nizsie v subore a maju
vyssiu specificitu, takze by holy .hero-grid prebili. Preto .hero.hero--x. */
.hero-grid,
.hero.hero--duo .hero-grid,
.hero.hero--panel .hero-grid,
.hero.hero--solo .hero-grid { grid-template-columns: 1fr; }
.hero-visual { max-width: 440px; margin-inline: auto; width: 100%; }
.stats-grid, .stats-grid.four, .pricing-grid, .form-row { grid-template-columns: 1fr; }
.steps-grid, .photo-band-grid, .out-grid { grid-template-columns: 1fr; }
.client-logos { grid-template-columns: repeat(2, 1fr); }
.contact-panel { grid-template-columns: 1fr; }
.brand-sub { display: none; }
.hero-badge { font-size: 11px; padding: 16px 20px; left: 0; }
.formats, .testimonials-dark { margin: 0; border-radius: var(--r-lg); }
.approach-list li { grid-template-columns: 48px 1fr; }
.approach-list li::before { width: 44px; height: 44px; font-size: 16px; }
}
/* ============================================================
ROZCESTNÍK — vlastná identita (zastrešujúca značka)
Espresso + mosadz. Ani olivová (príroda), ani navy (firmy).
Vetvy sa hlásia len farebným podpisom na dverách.
============================================================ */
[data-branch="home"] {
/* rozcestník nesie farby stránky O mně (= základ :root): oliva, šalvia, mosadz */
--c-dark: #414B3B;
--c-dark-deep: #333C2E;
--c-dark-soft: #55614C;
--c-cream: #F6F6E9;
--c-cream-2: #ECEDDB;
--c-cream-3: #E5E9D7;
--c-accent: #8CA87C;
--c-accent-deep: #74905F;
--c-brass: #AB8742;
--c-brass-deep: #8E6E31;
--c-text: #414B3B;
--c-text-soft: #62705A;
--c-text-mute: #8C9683;
--c-line: rgba(65, 75, 59, 0.16);
--c-line-strong: rgba(65, 75, 59, 0.34);
--c-on-dark: #F6F6E9;
--c-on-dark-soft: rgba(246, 246, 233, 0.78);
--c-on-dark-mute: rgba(246, 246, 233, 0.55);
--c-line-dark: rgba(246, 246, 233, 0.18);
--orb-a: rgba(140, 168, 124, 0.5);
--orb-b: rgba(171, 135, 66, 0.34);
}
/* ---------- HERO variant A: rozcestník (duo panely) ---------- */
.hero--duo .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
/* rotujúce slovo */
.rotator {
display: inline-grid;
vertical-align: bottom;
text-align: left;
}
.rotator > span {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(0.35em);
color: var(--c-accent);
animation: rot 9s cubic-bezier(.4,0,.2,1) infinite;
}
.rotator > span:nth-child(1) { animation-delay: 0s; }
.rotator > span:nth-child(2) { animation-delay: 3s; }
.rotator > span:nth-child(3) { animation-delay: 6s; }
@keyframes rot {
0% { opacity: 0; transform: translateY(0.35em); }
5%, 30% { opacity: 1; transform: translateY(0); }
35%,100%{ opacity: 0; transform: translateY(-0.3em); }
}
/* dva prekrývajúce sa panely namiesto kruhu */
.hero-duo { position: relative; aspect-ratio: 1 / 0.98; }
.duo-panel {
position: absolute; margin: 0;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 32px 70px -30px rgba(0,0,0,.62);
transition: transform .5s cubic-bezier(.2,.8,.3,1);
will-change: transform;
}
.duo-panel img { width: 100%; height: 100%; object-fit: cover; }
.duo-panel figcaption {
position: absolute; left: 16px; bottom: 16px;
font-family: var(--f-display); font-weight: 700;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
padding: 9px 16px; border-radius: 999px;
background: rgba(255,255,255,.92); color: #252220;
backdrop-filter: blur(6px);
}
.duo-panel--work {
inset: 0 34% 26% 0;
border: 7px solid var(--c-brass);
transform: translateY(var(--pa, 0px)) rotate(-2.2deg);
z-index: 2;
}
.duo-panel--nature {
inset: 24% 0 0 32%;
border: 7px solid var(--c-accent);
transform: translateY(var(--pb, 0px)) rotate(2.4deg);
z-index: 1;
}
.hero-duo:hover .duo-panel--work { transform: translateY(var(--pa, 0px)) rotate(-3.4deg) scale(1.02); }
.hero-duo:hover .duo-panel--nature { transform: translateY(var(--pb, 0px)) rotate(3.6deg) scale(1.02); }
.duo-dots { top: -4%; right: 4%; color: var(--c-accent); z-index: 3; }
/* ---------- HERO variant B: workshopy (panel + čipy) ---------- */
.hero--panel .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
.hero-panel { position: relative; }
.hero-panel-img {
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 4.6;
box-shadow: 0 30px 70px -32px rgba(0,0,0,.6);
}
.hero-panel-img img { width: 100%; height: 100%; object-fit: cover; }
/* plávajúce dátové čipy */
.hero-chip {
position: absolute;
background: var(--c-cream); color: var(--c-dark);
border-radius: var(--r-sm);
padding: 14px 18px;
box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
display: grid; gap: 2px;
animation: chip-bob 6s ease-in-out infinite alternate;
}
.hero-chip b { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1; }
.hero-chip span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-mute); }
.hero-chip--1 { top: 8%; left: -12%; animation-delay: -1s; }
.hero-chip--2 { bottom: 16%; right: -10%; animation-delay: -3.5s; }
.hero-chip--3 { bottom: -4%; left: 6%; background: var(--c-accent); color: var(--c-dark); animation-delay: -2s; }
.hero-chip--3 span { color: rgba(37,34,32,.62); }
@keyframes chip-bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
/* ---------- Marquee mien klientov (rozcestník) ---------- */
.namebar { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--c-line); position: relative; z-index: 2; }
.namebar-label {
text-align: center; font-size: 10.5px; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase;
color: var(--c-text-mute); margin-bottom: 16px;
}
.namebar-track {
display: flex; gap: 56px; width: max-content; white-space: nowrap;
animation: marquee 42s linear infinite;
font-family: var(--f-display); font-weight: 700;
font-size: clamp(17px, 2vw, 27px);
letter-spacing: -.01em; color: var(--c-text-mute);
}
.namebar-track span { display: inline-flex; align-items: center; gap: 56px; }
.namebar-track i { color: var(--c-accent); font-style: normal; font-size: .7em; }
.namebar:hover .namebar-track { animation-play-state: paused; }
/* ---------- Inline počítadlá v riadku ---------- */
.figure-line {
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(24px, 5vw, 72px);
text-align: center;
}
.figure-line > div { display: grid; gap: 4px; }
.figure-line b {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.04em;
color: var(--c-dark); line-height: 1;
}
.figure-line b .unit { color: var(--c-accent); }
.figure-line span { font-size: 13px; color: var(--c-text-soft); }
/* ---------- Rozhodovací pomocník (len rozcestník) ---------- */
.decide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.decide-col {
background: var(--c-cream-2); border-radius: var(--r-lg);
padding: 34px 32px; display: flex; flex-direction: column; gap: 16px;
border-top: 5px solid var(--c-accent);
}
.decide-col--work { border-top-color: var(--c-brass); }
.decide-col--nature { border-top-color: var(--c-accent); }
.decide-col h3 { font-size: clamp(17px, 1.7vw, 22px); }
.decide-col ul { list-style: none; display: grid; gap: 11px; }
.decide-col li { position: relative; padding-left: 26px; font-size: 15px; color: var(--c-text-soft); }
.decide-col li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45;
}
.decide-col .btn { margin-top: auto; align-self: flex-start; }
/* ---------- Striedajúce sa citáty ---------- */
.quote-rotator { position: relative; min-height: 190px; max-width: 780px; margin-inline: auto; text-align: center; }
.quote-rotator figure {
position: absolute; inset: 0; margin: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
opacity: 0; transition: opacity .9s ease;
}
.quote-rotator figure.is-on { opacity: 1; }
.quote-rotator blockquote {
font-family: var(--f-display); font-weight: 600;
font-size: clamp(18px, 2.1vw, 27px); line-height: 1.4; letter-spacing: -.02em;
color: var(--c-on-dark);
}
.quote-rotator .tm-person { margin: 0; }
.quote-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.quote-dots button {
width: 9px; height: 9px; border-radius: 50%;
background: var(--c-line-dark); padding: 0;
transition: background .3s, transform .3s;
}
.quote-dots button.is-on { background: var(--c-accent); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
.rotator > span:nth-child(1) { opacity: 1; }
.rotator > span:nth-child(2), .rotator > span:nth-child(3) { display: none; }
.quote-rotator figure { position: relative; opacity: 1; }
.quote-rotator { min-height: 0; display: grid; gap: 34px; }
.quote-dots { display: none; }
}
@media (max-width: 1000px) {
.decide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.hero-duo { max-width: 460px; margin-inline: auto; width: 100%; aspect-ratio: 1 / 1.05; }
.hero-panel { max-width: 400px; margin-inline: auto; }
.hero-chip--1 { left: -4%; }
.hero-chip--2 { right: -2%; }
.hero-chip { padding: 11px 14px; }
.hero-chip b { font-size: 18px; }
.figure-line { gap: 22px 34px; }
}
/* ============================================================
ROZCESTNÍK v2 — jedna silná fotka + svety klikateľné hneď hore
============================================================ */
.hero--solo .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: center; }
.hero-solo { position: relative; }
.hero-solo-img {
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 4 / 4.7;
border: 8px solid var(--c-accent);
box-shadow: 0 36px 80px -34px rgba(0,0,0,.65);
}
.hero-solo-img img {
width: 100%; height: 100%; object-fit: cover;
animation: kenburns 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-2%); } }
.hero-solo::after {
content: "";
position: absolute; inset: 6% -5% -5% 55%;
border-radius: var(--r-xl);
border: 2px dashed color-mix(in srgb, var(--c-accent) 55%, transparent);
z-index: -1;
animation: bob 7s ease-in-out infinite alternate;
}
.hero-solo-badge {
position: absolute; left: -7%; bottom: 9%;
background: var(--c-cream); color: var(--c-dark);
border-radius: var(--r-lg);
padding: 18px 24px;
box-shadow: 0 22px 48px -20px rgba(0,0,0,.6);
display: grid; gap: 2px;
animation: bob 5.5s ease-in-out infinite alternate;
}
.hero-solo-badge b { font-family: var(--f-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.hero-solo-badge span { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mute); }
.hero-solo-dots { top: -3%; right: -2%; color: var(--c-accent); }
/* dve rýchle dvere priamo v hero */
.hero-worlds { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.world-pill {
display: inline-flex; align-items: center; gap: 12px;
padding: 15px 24px;
border-radius: 999px;
font-family: var(--f-display); font-size: 14px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
color: var(--c-on-dark);
box-shadow: inset 0 0 0 2px var(--c-line-dark);
transition: transform .25s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s, background .25s;
}
.world-pill::before {
content: "";
width: 11px; height: 11px; border-radius: 50%;
background: var(--wp, var(--c-accent));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp, var(--c-accent)) 25%, transparent);
}
.world-pill:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px var(--wp, var(--c-accent)); color: var(--c-on-dark); }
.world-pill .btn-arrow { color: var(--wp, var(--c-accent)); }
.world-pill--work { --wp: var(--c-brass); }
.world-pill--nature { --wp: var(--c-accent); }
/* "Vyberte, pokud…" zoznam vnútri dverí */
.door-pick { list-style: none; display: grid; gap: 9px; margin-bottom: 26px; }
.door-pick li {
position: relative; padding-left: 30px;
font-size: 14.5px; color: rgba(255,255,255,.9);
}
.door-pick li::before {
content: "";
position: absolute; left: 0; top: 4px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--c-brass);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.door-pick-label {
font-family: var(--f-display); font-weight: 700;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--c-brass);
margin-bottom: 12px;
}
@media (max-width: 820px) {
.hero-solo { max-width: 420px; margin-inline: auto; }
.hero-solo-badge { left: 0; padding: 13px 17px; }
.hero-solo-badge b { font-size: 17px; }
.hero-worlds { margin-top: 26px; }
.world-pill { width: 100%; justify-content: flex-start; }
}
/* ============================================================
ROZCESTNÍK — tri farebné palety (prepínač v hlavičke)
Prepínajú sa atribútom data-palette na
============================================================ */
/* --- ULTRA: vysoký kontrast, elektrická limetka --- */
[data-branch="home"][data-palette="ultra"] {
--c-dark: #101014;
--c-dark-deep: #000;
--c-dark-soft: #26262E;
--c-cream: #F3F3F0;
--c-cream-2: #E7E7E2;
--c-cream-3: #D9D9D2;
--c-accent: #CDF564;
--c-accent-deep: #B2DE3E;
--c-brass: #CDF564;
--c-brass-deep: #B2DE3E;
--c-text: #101014;
--c-text-soft: #4A4A55;
--c-text-mute: #7C7C88;
--c-line: rgba(16, 16, 20, 0.14);
--c-line-strong: rgba(16, 16, 20, 0.3);
--c-on-dark: #F3F3F0;
--c-on-dark-soft: rgba(243, 243, 240, 0.76);
--c-on-dark-mute: rgba(243, 243, 240, 0.5);
--c-line-dark: rgba(243, 243, 240, 0.18);
--orb-a: rgba(205, 245, 100, 0.3);
--orb-b: rgba(205, 245, 100, 0.14);
}
[data-palette="ultra"] .btn { color: #101014; }
[data-palette="ultra"] .btn:hover { color: #101014; }
[data-palette="ultra"] .btn.btn-brass, [data-palette="ultra"] .btn.btn-accent { background: #CDF564; color: #101014; }
[data-palette="ultra"] .world-pill--work { --wp: #CDF564; }
[data-palette="ultra"] .world-pill--nature { --wp: var(--c-accent); }
/* --- JEMNÁ: teplá, tlmená, редakčná --- */
[data-branch="home"][data-palette="soft"] {
--c-dark: #4E443C;
--c-dark-deep: #3B332D;
--c-dark-soft: #6B5F55;
--c-cream: #FBF7F2;
--c-cream-2: #F2EBE1;
--c-cream-3: #E8DDCE;
--c-accent: #CE9C7F;
--c-accent-deep: #B37F60;
--c-brass: #B8926B;
--c-brass-deep: #9A7752;
--c-text: #4E443C;
--c-text-soft: #7A6C60;
--c-text-mute: #A39485;
--c-line: rgba(78, 68, 60, 0.13);
--c-line-strong: rgba(78, 68, 60, 0.27);
--c-on-dark: #FBF7F2;
--c-on-dark-soft: rgba(251, 247, 242, 0.78);
--c-on-dark-mute: rgba(251, 247, 242, 0.52);
--c-line-dark: rgba(251, 247, 242, 0.18);
--orb-a: rgba(206, 156, 127, 0.3);
--orb-b: rgba(184, 146, 107, 0.2);
}
/* --- BUSINESS: inštitucionálna navy + platina --- */
[data-branch="home"][data-palette="business"] {
--c-dark: #101F3C;
--c-dark-deep: #09152B;
--c-dark-soft: #23375C;
--c-cream: #F6F7F9;
--c-cream-2: #EBEEF2;
--c-cream-3: #DDE2E9;
--c-accent: #C3A567;
--c-accent-deep: #A98A4C;
--c-brass: #C3A567;
--c-brass-deep: #A98A4C;
--c-text: #101F3C;
--c-text-soft: #44526C;
--c-text-mute: #7C879B;
--c-line: rgba(16, 31, 60, 0.13);
--c-line-strong: rgba(16, 31, 60, 0.28);
--c-on-dark: #F6F7F9;
--c-on-dark-soft: rgba(246, 247, 249, 0.78);
--c-on-dark-mute: rgba(246, 247, 249, 0.52);
--c-line-dark: rgba(246, 247, 249, 0.18);
--orb-a: rgba(195, 165, 103, 0.24);
--orb-b: rgba(35, 55, 92, 0.3);
}
[data-palette="business"] .world-pill--work { --wp: #C3A567; }
/* prepínač paliet */
.palette-switch { display: inline-flex; align-items: center; gap: 7px; }
.palette-switch button {
width: 22px; height: 22px; border-radius: 50%;
padding: 0; position: relative;
box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
transition: transform .2s, box-shadow .2s;
}
.palette-switch button:hover { transform: scale(1.14); }
.palette-switch button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--c-dark), 0 0 0 3px var(--c-cream); }
.pal-espresso { background: linear-gradient(135deg, #414B3B 50%, #8CA87C 50%); }
.pal-ultra { background: linear-gradient(135deg, #101014 50%, #CDF564 50%); }
.pal-soft { background: linear-gradient(135deg, #4E443C 50%, #CE9C7F 50%); }
.pal-papir { background: linear-gradient(135deg, #1F2D23 50%, #B5482C 50%); }
.pal-business { background: linear-gradient(135deg, #101F3C 50%, #C3A567 50%); }
/* ============================================================
ROZCESTNÍK — oblúkový rám (portál), odlišný od kruhu aj obdĺžnika
============================================================ */
.hero-arch { position: relative; }
.hero-arch-img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: 999px 999px var(--r-lg) var(--r-lg);
border: 9px solid var(--c-accent);
box-shadow: 0 36px 80px -34px rgba(0,0,0,.66);
}
.hero-arch-img img {
width: 100%; height: 100%; object-fit: cover;
animation: kenburns 24s ease-in-out infinite alternate;
will-change: transform;
}
/* druhý, podriadený záber v kruhu */
.hero-arch-inset {
position: absolute; right: -6%; bottom: 8%;
width: 34%; aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
border: 6px solid var(--c-brass);
box-shadow: 0 20px 44px -18px rgba(0,0,0,.6);
animation: bob 6.5s ease-in-out infinite alternate;
}
.hero-arch-inset img { width: 100%; height: 100%; object-fit: cover; }
.hero-arch-dots { top: 4%; left: -6%; color: var(--c-accent); }
/* ============================================================
DVERE v2 — nadpis na fotke, body pod ňou na svetlom podklade
============================================================ */
.doors-grid--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.door-card {
display: flex; flex-direction: column;
background: var(--c-cream-2);
border-radius: var(--r-xl);
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.door-card:hover { transform: translateY(-7px); box-shadow: 0 28px 60px -30px rgba(0,0,0,.4); }
.door-media {
position: relative; display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.door-media img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.door-card:hover .door-media img { transform: scale(1.06); }
.door-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.78) 100%);
}
.door-head {
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 2; padding: clamp(20px, 2.6vw, 32px);
}
.door-head .eyebrow { color: #fff; margin-bottom: 10px; }
.door-head h3 {
color: #fff;
font-size: clamp(21px, 2.5vw, 33px);
line-height: 1.08;
text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.door-body {
padding: clamp(24px, 2.8vw, 34px);
display: flex; flex-direction: column; gap: 16px; flex: 1;
}
.door-body .door-pick-label { margin: 0; }
.door-body .door-pick { margin: 0; }
.door-body .door-pick li { color: var(--c-text-soft); }
.door-body .btn { align-self: flex-start; margin-top: auto; }
.door--work .door-head .eyebrow::before { background: var(--c-accent); }
/* ============================================================
Namebar — viditeľný pás, nie biele na bielom
============================================================ */
.namebar {
background: var(--c-cream-3);
border-block: 1px solid var(--c-line);
}
[data-branch="home"] .namebar-track { color: var(--c-text-soft); }
/* ============================================================
O mne — kompaktný blok na konci rozcestníka
============================================================ */
.mini-about-grid {
display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
gap: clamp(28px, 4.5vw, 60px); align-items: center;
}
.mini-about-photo {
border-radius: 999px 999px var(--r-lg) var(--r-lg);
overflow: hidden; aspect-ratio: 4/4.4; max-width: 300px;
border: 7px solid var(--c-cream-3);
}
.mini-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.mini-about-facts { list-style: none; display: grid; gap: 10px; margin: 22px 0 26px; }
.mini-about-facts li { position: relative; padding-left: 28px; color: var(--c-text-soft); font-size: 15px; }
.mini-about-facts li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--c-brass);
}
@media (max-width: 1000px) {
.doors-grid--split { grid-template-columns: 1fr; }
.mini-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.hero-arch { max-width: 380px; margin-inline: auto; }
.hero-arch-inset { right: -2%; width: 38%; }
.palette-switch { display: none; }
}
/* Fotka na ľavej strane — odlíšenie vetiev navzájom */
.hero--media-left .hero-grid > div:first-child { order: 2; }
.hero--media-left .hero-panel { order: 1; }
@media (max-width: 820px) {
.hero--media-left .hero-grid > div:first-child { order: 1; }
.hero--media-left .hero-panel { order: 2; }
}
/* ============================================================
OPRAVY v3 — machuľový hero, menšie dvere 2×2, viditeľný prepínač
============================================================ */
/* --- Prepínač paliet: jasne viditeľný, s popiskom --- */
.palette-switch {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 12px;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
}
.palette-switch::before {
content: "Paleta";
font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--c-text-mute);
margin-right: 2px;
}
.palette-switch button {
width: 24px; height: 24px; border-radius: 50%;
padding: 0; flex-shrink: 0;
box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.22);
transition: transform .2s, box-shadow .2s;
}
.palette-switch button:hover { transform: scale(1.16); }
.palette-switch button[aria-pressed="true"] {
box-shadow: inset 0 0 0 2px var(--c-cream), 0 0 0 2.5px var(--c-dark);
}
/* --- HERO: organická machuľa, nie kruh ani obdĺžnik --- */
.hero-blob { position: relative; aspect-ratio: 1 / 1.02; }
.hero-blob-img {
position: absolute; inset: 0;
overflow: hidden;
border-radius: 58% 42% 46% 54% / 48% 55% 45% 52%;
border: 10px solid var(--c-accent);
box-shadow: 0 36px 84px -34px rgba(0,0,0,.66);
animation: morph 16s ease-in-out infinite;
will-change: border-radius;
}
.hero-blob-img img {
width: 100%; height: 100%; object-fit: cover;
animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes morph {
0%, 100% { border-radius: 58% 42% 46% 54% / 48% 55% 45% 52%; }
25% { border-radius: 45% 55% 62% 38% / 58% 44% 56% 42%; }
50% { border-radius: 62% 38% 38% 62% / 42% 60% 40% 58%; }
75% { border-radius: 40% 60% 55% 45% / 52% 38% 62% 48%; }
}
/* obrysová machuľa za fotkou, otáča sa opačne */
.hero-blob::before {
content: "";
position: absolute; inset: -7% -9% -5% -7%;
border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%;
border: 2px dashed color-mix(in srgb, var(--c-brass) 60%, transparent);
animation: morph 20s ease-in-out infinite reverse;
pointer-events: none;
}
.hero-blob-dots { top: 0; right: -4%; color: var(--c-accent); z-index: 3; }
/* --- DVERE: 2×2 — hore rámčeky s fotkou, dole rozpis --- */
.doors-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2vw, 24px);
align-items: start;
}
.door-tile {
position: relative; display: block;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 5 / 4;
border: 6px solid var(--c-cream-3);
transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.door-tile img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.door-tile::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.02) 40%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.84) 100%);
}
.door-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -26px rgba(0,0,0,.45); }
.door-tile:hover img { transform: scale(1.07); }
.door-tile--work:hover { border-color: var(--c-brass); }
.door-tile--nature:hover { border-color: var(--c-accent); }
.door-tile-label {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: clamp(18px, 2.2vw, 26px);
}
.door-tile-label .eyebrow { color: #fff; margin-bottom: 8px; font-size: 11px; }
.door-tile--work .door-tile-label .eyebrow::before { background: var(--c-brass); }
.door-tile--nature .door-tile-label .eyebrow::before { background: var(--c-accent); }
.door-tile-label h3 {
color: #fff; font-size: clamp(18px, 2.1vw, 27px); line-height: 1.1;
text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.door-detail {
background: var(--c-cream-2);
border-radius: var(--r-lg);
padding: clamp(24px, 2.8vw, 34px);
display: flex; flex-direction: column; gap: 14px;
border-top: 5px solid var(--c-accent);
height: 100%;
}
.door-detail--work { border-top-color: var(--c-brass); }
.door-detail--nature { border-top-color: var(--c-accent); }
.door-detail .door-pick-label { margin: 0; }
.door-detail .door-pick { margin: 0; }
.door-detail .door-pick li { color: var(--c-text-soft); }
.door-detail .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 820px) {
.hero-blob { max-width: 380px; margin-inline: auto; }
/* align-items: start z mriežky by v stĺpci zmrštil dlaždice na nulovú šírku
(obsah je absolute) — z fotky ostala len bodka. Na mobile ako na /o-mne/:
veľká fotka s nadpisom, pod ňou rozpis. */
.doors-pair { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.door-tile { aspect-ratio: auto; min-height: clamp(240px, 62vw, 340px); border-width: 4px; }
.door-tile-label h3 { font-size: clamp(24px, 6.4vw, 30px); }
.door-detail { height: auto; margin-bottom: 18px; }
.door-tile--work { order: 1; }
.door-detail--work { order: 2; }
.door-tile--nature { order: 3; }
.door-detail--nature{ order: 4; }
.palette-switch { display: inline-flex; }
.palette-switch::before { display: none; }
}
/* ============================================================
v4 — kompaktnejšie medzery, nadpisy na plnú šírku,
menšie referencie, améba v hero, nové palety
============================================================ */
/* --- Medzery: všade tesnejšie --- */
section { padding: clamp(42px, 5.2vw, 76px) 0; }
section.compact { padding: clamp(30px, 3.6vw, 52px) 0; }
/* --- Nadpisy sekcií na celú šírku --- */
.section-head {
max-width: none;
margin-bottom: clamp(18px, 2.2vw, 30px);
gap: 12px;
}
.section-head p { max-width: 78ch; }
/* zelený/tmavý blok formátov nech nemá toľko vzduchu */
.formats { padding: clamp(38px, 4.6vw, 64px) 0; }
.approach-list li { padding: 18px 20px; }
.article p { margin-bottom: .8em; }
/* --- Referencie výrazne menšie --- */
.tm-card {
min-width: min(300px, 78vw);
padding: 24px 22px;
gap: 14px;
border-radius: var(--r);
}
.tm-card blockquote { font-size: 14px; line-height: 1.55; }
.tm-card blockquote::before { font-size: 32px; margin-bottom: 9px; }
.tm-avatar { width: 38px; height: 38px; font-size: 12.5px; }
.tm-name { font-size: 12.5px; }
.tm-role { font-size: 11px; }
.tm-rail { gap: 14px; }
.tm-grid { gap: 14px; }
/* rotátor citátov na rozcestníku — kompaktný */
.quote-rotator { min-height: 132px; max-width: 640px; }
.quote-rotator blockquote { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.5; }
.quote-rotator figure { gap: 14px; }
.quote-dots { margin-top: 16px; }
/* --- HERO améba: vyššie, výraznejšie vyčnelky --- */
[data-branch="home"] .hero-grid { align-items: start; }
.hero-blob { aspect-ratio: 1 / 1.04; margin-top: 4px; }
.hero-blob-img {
border-radius: 68% 32% 55% 45% / 38% 62% 38% 62%;
animation: amoeba 18s ease-in-out infinite;
}
@keyframes amoeba {
0%, 100% { border-radius: 68% 32% 55% 45% / 38% 62% 38% 62%; }
17% { border-radius: 34% 66% 38% 62% / 63% 34% 66% 37%; }
34% { border-radius: 59% 41% 71% 29% / 32% 68% 32% 68%; }
50% { border-radius: 28% 72% 44% 56% / 68% 30% 70% 32%; }
67% { border-radius: 72% 28% 33% 67% / 41% 71% 29% 59%; }
84% { border-radius: 42% 58% 66% 34% / 59% 36% 64% 41%; }
}
.hero-blob::before {
inset: -9% -11% -7% -9%;
animation: amoeba 24s ease-in-out infinite reverse;
}
/* ============================================================
PALETY — doplnenie
============================================================ */
/* --- TERAKOTA: tehlová + okrová žltá --- */
[data-branch="home"][data-palette="terracotta"] {
--c-dark: #3E1F17;
--c-dark-deep: #2C1410;
--c-dark-soft: #5C3226;
--c-cream: #FCF4E9;
--c-cream-2: #F4E7D5;
--c-cream-3: #EAD8BF;
--c-accent: #E0A02E;
--c-accent-deep: #C1841C;
--c-brass: #C4552D;
--c-brass-deep: #A34222;
--c-text: #3E1F17;
--c-text-soft: #6E4B3D;
--c-text-mute: #9C7A68;
--c-line: rgba(62, 31, 23, 0.14);
--c-line-strong: rgba(62, 31, 23, 0.3);
--c-on-dark: #FCF4E9;
--c-on-dark-soft: rgba(252, 244, 233, 0.78);
--c-on-dark-mute: rgba(252, 244, 233, 0.52);
--c-line-dark: rgba(252, 244, 233, 0.18);
--orb-a: rgba(224, 160, 46, 0.32);
--orb-b: rgba(196, 85, 45, 0.26);
}
[data-palette="terracotta"] .btn.btn-accent { color: #3E1F17; }
[data-palette="terracotta"] .world-pill--work { --wp: #E0A02E; }
[data-palette="terracotta"] .world-pill--nature { --wp: #C4552D; }
.pal-terracotta { background: linear-gradient(135deg, #3E1F17 50%, #E0A02E 50%); }
/* ============================================================
WORKSHOPY — navy + zlatá (paleta, ktorá sadla na business)
============================================================ */
[data-branch="workshopy"] {
--c-dark: #101F3C;
--c-dark-deep: #09152B;
--c-dark-soft: #23375C;
--c-cream: #F6F7F9;
--c-cream-2: #EBEEF2;
--c-cream-3: #DDE2E9;
--c-accent: #AB8742; /* zlatohnedá zo stránky O mně — spája vetvy */
--c-accent-deep: #8E6E31;
--c-brass: #AB8742;
--c-brass-deep: #8E6E31;
--c-text: #101F3C;
--c-text-soft: #44526C;
--c-text-mute: #7C879B;
--c-line: rgba(16, 31, 60, 0.13);
--c-line-strong: rgba(16, 31, 60, 0.28);
--c-on-dark: #F6F7F9;
--c-on-dark-soft: rgba(246, 247, 249, 0.78);
--c-on-dark-mute: rgba(246, 247, 249, 0.52);
--c-line-dark: rgba(246, 247, 249, 0.18);
--orb-a: rgba(171, 135, 66, 0.26);
--orb-b: rgba(35, 55, 92, 0.3);
}
/* --- PRÍRODA: jemná šalviová z O mně, tmavá zelená zo „Zlatého lesa“, mosadz --- */
[data-branch="priroda"] {
--c-dark: #2F4A31;
--c-dark-deep: #22371F;
--c-dark-soft: #446548;
--c-brass: #AB8742; /* mosadz ako na O mně a vo workshopoch — žiadna žltá */
--c-brass-deep: #8E6E31;
--c-text: #263B28;
--c-text-soft: #4E6650;
--c-text-mute: #869781;
--c-line: rgba(38, 59, 40, 0.15);
--c-line-strong: rgba(38, 59, 40, 0.32);
--orb-a: rgba(140, 168, 124, 0.48);
--orb-b: rgba(171, 135, 66, 0.3);
}
/* podpisy firemnej vetvy prefarbiť na zlatú */
.door-tile--work:hover { border-color: var(--c-brass); }
.door-tile--work .door-tile-label .eyebrow::before { background: var(--c-brass); }
.door-detail--work { border-top-color: var(--c-brass); }
[data-branch="home"] .world-pill--work { --wp: #AB8742; }
/* ============================================================
v5 — palety inšpirované dodanými Coolors sadami
Spoločný podpis: žltá #F0D264
============================================================ */
/* --- UHEL: uhlová + koralová + žltá (prvá sada) --- */
[data-branch="home"][data-palette="uhel"] {
--c-dark: #3D3E39;
--c-dark-deep: #2C2D28;
--c-dark-soft: #565750;
--c-cream: #FAF7EF;
--c-cream-2: #F1ECDD;
--c-cream-3: #E5DCC6;
--c-accent: #E36B4C;
--c-accent-deep: #C4522F;
--c-brass: #B98A1C;
--c-brass-deep: #98700F;
--c-text: #33342F;
--c-text-soft: #5D5F57;
--c-text-mute: #8C8E83;
--c-line: rgba(51, 52, 47, 0.14);
--c-line-strong: rgba(51, 52, 47, 0.3);
--c-on-dark: #FAF7EF;
--c-on-dark-soft: rgba(250, 247, 239, 0.78);
--c-on-dark-mute: rgba(250, 247, 239, 0.52);
--c-line-dark: rgba(250, 247, 239, 0.18);
--orb-a: rgba(227, 107, 76, 0.28);
--orb-b: rgba(240, 210, 100, 0.26);
}
[data-palette="uhel"] .hero .eyebrow, [data-palette="uhel"] .on-dark .eyebrow { color: #F0D264; }
[data-palette="uhel"] .hero .eyebrow::before, [data-palette="uhel"] .on-dark .eyebrow::before { background: #F0D264; }
[data-palette="uhel"] .world-pill--work { --wp: #F0D264; }
[data-palette="uhel"] .world-pill--nature { --wp: #E36B4C; }
.pal-uhel { background: linear-gradient(135deg, #3D3E39 33%, #E36B4C 33% 66%, #F0D264 66%); }
/* --- LAGUNA: tyrkysová + žltá + červená (druhá sada) --- */
[data-branch="home"][data-palette="laguna"] {
--c-dark: #0B5157;
--c-dark-deep: #063C41;
--c-dark-soft: #196C72;
--c-cream: #F0F8FB;
--c-cream-2: #DFEFF6;
--c-cream-3: #C9E4F0;
--c-accent: #06A3A3;
--c-accent-deep: #04807F;
--c-brass: #C08E14;
--c-brass-deep: #9E7309;
--c-text: #103A3E;
--c-text-soft: #3D5F65;
--c-text-mute: #7796A0;
--c-line: rgba(16, 58, 62, 0.14);
--c-line-strong: rgba(16, 58, 62, 0.3);
--c-on-dark: #F0F8FB;
--c-on-dark-soft: rgba(240, 248, 251, 0.8);
--c-on-dark-mute: rgba(240, 248, 251, 0.55);
--c-line-dark: rgba(240, 248, 251, 0.2);
--orb-a: rgba(6, 163, 163, 0.3);
--orb-b: rgba(240, 210, 100, 0.26);
}
[data-palette="laguna"] .hero .eyebrow, [data-palette="laguna"] .on-dark .eyebrow { color: #F0D264; }
[data-palette="laguna"] .hero .eyebrow::before, [data-palette="laguna"] .on-dark .eyebrow::before { background: #F0D264; }
[data-palette="laguna"] .world-pill--work { --wp: #F0D264; }
[data-palette="laguna"] .world-pill--nature { --wp: #06A3A3; }
[data-palette="laguna"] .btn.btn-accent { color: #F0F8FB; }
.pal-laguna { background: linear-gradient(135deg, #0B5157 33%, #06A3A3 33% 66%, #F0D264 66%); }
/* --- NOIR: takmer čierna + ružovočervená + žltá (tretia sada) --- */
[data-branch="home"][data-palette="noir"] {
--c-dark: #0A1114;
--c-dark-deep: #000;
--c-dark-soft: #1F2A2E;
--c-cream: #F8F5F3;
--c-cream-2: #EEE8E6;
--c-cream-3: #E0D6D4;
--c-accent: #EA4E5F;
--c-accent-deep: #C93548;
--c-brass: #BC9018;
--c-brass-deep: #9A750D;
--c-text: #0A1114;
--c-text-soft: #4A5054;
--c-text-mute: #85898C;
--c-line: rgba(10, 17, 20, 0.13);
--c-line-strong: rgba(10, 17, 20, 0.3);
--c-on-dark: #F8F5F3;
--c-on-dark-soft: rgba(248, 245, 243, 0.78);
--c-on-dark-mute: rgba(248, 245, 243, 0.5);
--c-line-dark: rgba(248, 245, 243, 0.18);
--orb-a: rgba(234, 78, 95, 0.24);
--orb-b: rgba(240, 210, 100, 0.22);
}
[data-palette="noir"] .hero .eyebrow, [data-palette="noir"] .on-dark .eyebrow { color: #F0D264; }
[data-palette="noir"] .hero .eyebrow::before, [data-palette="noir"] .on-dark .eyebrow::before { background: #F0D264; }
[data-palette="noir"] .world-pill--work { --wp: #F0D264; }
[data-palette="noir"] .world-pill--nature { --wp: #7F947F; }
[data-palette="noir"] .btn.btn-accent { color: #F8F5F3; }
.pal-noir { background: linear-gradient(135deg, #0A1114 33%, #EA4E5F 33% 66%, #F0D264 66%); }
/* --- JADEIT: nefrit + les + žltá (štvrtá sada) --- */
[data-branch="home"][data-palette="jadeit"] {
--c-dark: #3E3823;
--c-dark-deep: #2B2718;
--c-dark-soft: #575030;
--c-cream: #F1FBF7;
--c-cream-2: #DFF3EB;
--c-cream-3: #C6E8DA;
--c-accent: #4FA37F;
--c-accent-deep: #3C8265;
--c-brass: #B7911F;
--c-brass-deep: #967613;
--c-text: #2F3222;
--c-text-soft: #55604C;
--c-text-mute: #879184;
--c-line: rgba(47, 50, 34, 0.14);
--c-line-strong: rgba(47, 50, 34, 0.3);
--c-on-dark: #F1FBF7;
--c-on-dark-soft: rgba(241, 251, 247, 0.8);
--c-on-dark-mute: rgba(241, 251, 247, 0.54);
--c-line-dark: rgba(241, 251, 247, 0.2);
--orb-a: rgba(79, 163, 127, 0.3);
--orb-b: rgba(240, 210, 100, 0.24);
}
[data-palette="jadeit"] .hero .eyebrow, [data-palette="jadeit"] .on-dark .eyebrow { color: #F0D264; }
[data-palette="jadeit"] .hero .eyebrow::before, [data-palette="jadeit"] .on-dark .eyebrow::before { background: #F0D264; }
[data-palette="jadeit"] .world-pill--work { --wp: #F0D264; }
[data-palette="jadeit"] .world-pill--nature { --wp: #4C7238; }
.pal-jadeit { background: linear-gradient(135deg, #3E3823 33%, #4FA37F 33% 66%, #F0D264 66%); }
/* ============================================================
Prepínač paliet — rozbaľovací panel s názvami
============================================================ */
.palette-picker { position: relative; }
.palette-trigger {
display: inline-flex; align-items: center; gap: 9px;
padding: 9px 16px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--c-text-soft);
box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
transition: box-shadow .2s, color .2s;
}
.palette-trigger:hover { color: var(--c-dark); box-shadow: inset 0 0 0 1.5px var(--c-line-strong), 0 0 0 3px var(--c-cream-2); }
.palette-trigger .dot {
width: 15px; height: 15px; border-radius: 50%;
background: linear-gradient(135deg, var(--c-dark) 50%, var(--c-accent) 50%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.palette-panel {
position: absolute; top: calc(100% + 12px); right: 0;
width: 250px; z-index: 80;
background: var(--c-cream); border-radius: var(--r);
box-shadow: 0 24px 56px -18px rgba(0,0,0,.34), inset 0 0 0 1px var(--c-line);
padding: 10px;
display: none;
}
.palette-panel.open { display: block; animation: pal-in .22s ease; }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.palette-panel button {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 9px 11px; border-radius: 12px;
text-align: left; font: 500 13.5px var(--f-text); color: var(--c-text);
transition: background .18s;
}
.palette-panel button:hover { background: var(--c-cream-2); }
.palette-panel button[aria-pressed="true"] { background: var(--c-cream-3); font-weight: 700; }
.palette-panel button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--c-accent); font-weight: 800; }
.pal-chip {
width: 34px; height: 22px; border-radius: 7px; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
@media (max-width: 820px) {
.palette-picker { display: none; }
}
/* ============================================================
v6 — šesť nových paliet
Tri stavajú na žltej #F0D264, tri idú vlastným smerom.
============================================================ */
/* --- JADEIT NOC: tmavší brat jadeitu, žltá ako druhý hlas --- */
[data-branch="home"][data-palette="jadeit-noc"] {
--c-dark: #16302A;
--c-dark-deep: #0E211D;
--c-dark-soft: #27473E;
--c-cream: #F2FAF6;
--c-cream-2: #E0F1E8;
--c-cream-3: #C8E4D6;
--c-accent: #4FA37F;
--c-accent-deep: #3C8265;
--c-brass: #B8901B;
--c-brass-deep: #96740F;
--c-text: #16302A;
--c-text-soft: #456055;
--c-text-mute: #7E9A8D;
--c-line: rgba(22, 48, 42, 0.14);
--c-line-strong: rgba(22, 48, 42, 0.3);
--c-on-dark: #F2FAF6;
--c-on-dark-soft: rgba(242, 250, 246, 0.8);
--c-on-dark-mute: rgba(242, 250, 246, 0.54);
--c-line-dark: rgba(242, 250, 246, 0.2);
--orb-a: rgba(79, 163, 127, 0.32);
--orb-b: rgba(240, 210, 100, 0.3);
}
[data-palette="jadeit-noc"] .hero .eyebrow,
[data-palette="jadeit-noc"] .on-dark .eyebrow { color: #F0D264; }
[data-palette="jadeit-noc"] .hero .eyebrow::before,
[data-palette="jadeit-noc"] .on-dark .eyebrow::before { background: #F0D264; }
[data-palette="jadeit-noc"] .hero-badge { background: #F0D264; }
[data-palette="jadeit-noc"] .world-pill--work { --wp: #F0D264; }
.pal-jadeit-noc { background: linear-gradient(135deg, #16302A 33%, #4FA37F 33% 66%, #F0D264 66%); }
/* --- ZLATÝ LES: žltá vedie, les drží ⟶ žltá naplno --- */
[data-branch="home"][data-palette="zlaty-les"] {
--c-dark: #2F4A31;
--c-dark-deep: #22371F;
--c-dark-soft: #446548;
--c-cream: #FBF9EC;
--c-cream-2: #F3EFD6;
--c-cream-3: #E6DFB9;
--c-accent: #F0D264;
--c-accent-deep: #B8901B;
--c-brass: #5E8A4C;
--c-brass-deep: #486D39;
--c-text: #263B28;
--c-text-soft: #4E6650;
--c-text-mute: #869781;
--c-line: rgba(38, 59, 40, 0.14);
--c-line-strong: rgba(38, 59, 40, 0.3);
--c-on-dark: #FBF9EC;
--c-on-dark-soft: rgba(251, 249, 236, 0.8);
--c-on-dark-mute: rgba(251, 249, 236, 0.54);
--c-line-dark: rgba(251, 249, 236, 0.2);
--orb-a: rgba(240, 210, 100, 0.42);
--orb-b: rgba(94, 138, 76, 0.26);
}
.pal-zlaty-les { background: linear-gradient(135deg, #2F4A31 33%, #5E8A4C 33% 66%, #F0D264 66%); }
/* --- POLNOC: takmer čierna, žltá kričí ⟶ žltá naplno --- */
[data-branch="home"][data-palette="polnoc"] {
--c-dark: #0D0D10;
--c-dark-deep: #000;
--c-dark-soft: #24242B;
--c-cream: #F7F6F2;
--c-cream-2: #EDEBE3;
--c-cream-3: #DFDCCE;
--c-accent: #F0D264;
--c-accent-deep: #B8901B;
--c-brass: #7C7C85;
--c-brass-deep: #5F5F68;
--c-text: #0D0D10;
--c-text-soft: #494950;
--c-text-mute: #85858E;
--c-line: rgba(13, 13, 16, 0.13);
--c-line-strong: rgba(13, 13, 16, 0.3);
--c-on-dark: #F7F6F2;
--c-on-dark-soft: rgba(247, 246, 242, 0.78);
--c-on-dark-mute: rgba(247, 246, 242, 0.5);
--c-line-dark: rgba(247, 246, 242, 0.18);
--orb-a: rgba(240, 210, 100, 0.36);
--orb-b: rgba(240, 210, 100, 0.16);
}
.pal-polnoc { background: linear-gradient(135deg, #0D0D10 50%, #F0D264 50%); }
/* --- INKOUST: indigo + zvončeková modrá + prach ruže --- */
[data-branch="home"][data-palette="inkoust"] {
--c-dark: #1B2440;
--c-dark-deep: #121930;
--c-dark-soft: #2E3C60;
--c-cream: #F5F6FA;
--c-cream-2: #E8EBF3;
--c-cream-3: #D6DCEA;
--c-accent: #6E86E0;
--c-accent-deep: #5468BD;
--c-brass: #B07886;
--c-brass-deep: #925E6C;
--c-text: #1B2440;
--c-text-soft: #47527A;
--c-text-mute: #838CAC;
--c-line: rgba(27, 36, 64, 0.13);
--c-line-strong: rgba(27, 36, 64, 0.3);
--c-on-dark: #F5F6FA;
--c-on-dark-soft: rgba(245, 246, 250, 0.8);
--c-on-dark-mute: rgba(245, 246, 250, 0.54);
--c-line-dark: rgba(245, 246, 250, 0.2);
--orb-a: rgba(110, 134, 224, 0.32);
--orb-b: rgba(176, 120, 134, 0.26);
}
.pal-inkoust { background: linear-gradient(135deg, #1B2440 33%, #6E86E0 33% 66%, #B07886 66%); }
/* --- KORÁL: víno + koral + popolavá ruža --- */
[data-branch="home"][data-palette="koral"] {
--c-dark: #3B1F2B;
--c-dark-deep: #2B1520;
--c-dark-soft: #573243;
--c-cream: #FDF6F3;
--c-cream-2: #F7E8E3;
--c-cream-3: #EFD5CE;
--c-accent: #E8735C;
--c-accent-deep: #C6553F;
--c-brass: #A9707E;
--c-brass-deep: #8B5665;
--c-text: #3B1F2B;
--c-text-soft: #6B4B57;
--c-text-mute: #A08089;
--c-line: rgba(59, 31, 43, 0.13);
--c-line-strong: rgba(59, 31, 43, 0.3);
--c-on-dark: #FDF6F3;
--c-on-dark-soft: rgba(253, 246, 243, 0.8);
--c-on-dark-mute: rgba(253, 246, 243, 0.54);
--c-line-dark: rgba(253, 246, 243, 0.2);
--orb-a: rgba(232, 115, 92, 0.32);
--orb-b: rgba(169, 112, 126, 0.28);
}
.pal-koral { background: linear-gradient(135deg, #3B1F2B 33%, #E8735C 33% 66%, #A9707E 66%); }
/* --- MEĎ: bridlicový tyrkys + medená + bledá modrozelená --- */
[data-branch="home"][data-palette="med"] {
--c-dark: #23383D;
--c-dark-deep: #17272B;
--c-dark-soft: #365055;
--c-cream: #F5F8F8;
--c-cream-2: #E5EDEE;
--c-cream-3: #D0DEE0;
--c-accent: #C87A4B;
--c-accent-deep: #A65E33;
--c-brass: #6E9096;
--c-brass-deep: #567479;
--c-text: #23383D;
--c-text-soft: #4B6469;
--c-text-mute: #85999D;
--c-line: rgba(35, 56, 61, 0.13);
--c-line-strong: rgba(35, 56, 61, 0.3);
--c-on-dark: #F5F8F8;
--c-on-dark-soft: rgba(245, 248, 248, 0.8);
--c-on-dark-mute: rgba(245, 248, 248, 0.54);
--c-line-dark: rgba(245, 248, 248, 0.2);
--orb-a: rgba(200, 122, 75, 0.3);
--orb-b: rgba(110, 144, 150, 0.3);
}
.pal-med { background: linear-gradient(135deg, #23383D 33%, #C87A4B 33% 66%, #6E9096 66%); }
/* --- Doladenie žltých paliet: tmavý text na žltej, hrubší rám --- */
[data-palette="zlaty-les"] .btn.btn-accent,
[data-palette="polnoc"] .btn.btn-accent { color: var(--c-dark); font-weight: 800; }
[data-palette="zlaty-les"] .hero-blob-img,
[data-palette="polnoc"] .hero-blob-img { border-width: 13px; }
[data-palette="zlaty-les"] .world-pill--work,
[data-palette="polnoc"] .world-pill--work { --wp: #F0D264; }
/* panel s 15 paletami — nech sa zmestí */
.palette-panel { max-height: 70vh; overflow-y: auto; }
/* ============================================================
v7 — améba cez SVG clip-path (skutočné laloky, nie border-radius)
============================================================ */
.hero-amoeba {
position: relative;
aspect-ratio: 1;
color: var(--c-accent); /* farbí ring cez currentColor */
margin-top: 2px;
}
.amoeba-svg {
width: 100%; height: 100%;
overflow: visible;
filter: drop-shadow(0 30px 54px rgba(0,0,0,.42));
}
.amoeba-ring { opacity: .95; }
.hero-amoeba-dots { top: -2%; right: -4%; color: var(--c-accent); z-index: 3; }
/* jemné, pomalé nadýchnutie celej améby */
.amoeba-svg { animation: amoeba-breathe 12s ease-in-out infinite alternate; }
@keyframes amoeba-breathe {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1.03) rotate(2.2deg); }
}
@media (prefers-reduced-motion: reduce) {
.amoeba-svg { animation: none; }
}
@media (max-width: 820px) {
.hero-amoeba { max-width: 360px; margin-inline: auto; }
}
/* améba je živá cez JS — CSS len rám a tiene */
.hero-amoeba { cursor: crosshair; }
.amoeba-svg { animation: none; }
/* ============================================================
v8 — celoobrazovkový hero s fotkou a textom cez ňu
Serif len tu, ako podpis úvodnej obrazovky.
============================================================ */
[data-hero="cover"] .site-header {
position: fixed; left: 0; right: 0; top: 0;
background: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom-color: transparent;
transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}
[data-hero="cover"] .site-header .brand,
[data-hero="cover"] .nav-primary a,
[data-hero="cover"] .lang-switch,
[data-hero="cover"] .lang-switch a,
[data-hero="cover"] .palette-trigger { color: rgba(255,255,255,.92); }
[data-hero="cover"] .brand-sub { color: rgba(255,255,255,.6); }
[data-hero="cover"] .brand-mark { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); }
[data-hero="cover"] .palette-trigger { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); }
[data-hero="cover"] .menu-toggle { background: rgba(255,255,255,.18); color: #fff; }
[data-hero="cover"] .branch-switch { color: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); }
[data-hero="cover"] .branch-switch:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
[data-hero="cover"] .header-cta { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
[data-hero="cover"] .header-cta:hover { background: rgba(255,255,255,.28); color: #fff; }
/* po odscrollovaní sa hlavička usadí */
[data-hero="cover"] .site-header.is-stuck {
background: color-mix(in srgb, var(--c-cream) 92%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
border-bottom-color: var(--c-line);
}
[data-hero="cover"] .site-header.is-stuck .brand,
[data-hero="cover"] .site-header.is-stuck .palette-trigger { color: var(--c-dark); }
[data-hero="cover"] .site-header.is-stuck .nav-primary a,
[data-hero="cover"] .site-header.is-stuck .lang-switch { color: var(--c-text-soft); }
[data-hero="cover"] .site-header.is-stuck .brand-sub { color: var(--c-text-mute); }
[data-hero="cover"] .site-header.is-stuck .brand-mark { background: var(--c-dark); color: var(--c-cream); }
[data-hero="cover"] .site-header.is-stuck .palette-trigger { box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
[data-hero="cover"] .site-header.is-stuck .menu-toggle { background: var(--c-dark); }
[data-hero="cover"] .site-header.is-stuck .branch-switch { color: var(--c-text-mute); box-shadow: inset 0 0 0 1.5px var(--c-line); }
[data-hero="cover"] .site-header.is-stuck .header-cta { background: var(--c-dark); color: var(--c-cream); backdrop-filter: none; box-shadow: none; }
/* --- samotný cover --- */
.hero-cover {
position: relative;
min-height: 100svh;
display: flex; align-items: center;
padding: 120px 0 96px;
overflow: hidden;
border-radius: 0;
background: var(--c-dark);
}
.hero-cover-media { position: absolute; inset: 0; z-index: 0; }
.hero-cover-media img {
width: 100%; height: 100%; object-fit: cover;
animation: cover-drift 30s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes cover-drift {
/* jemnejší pohyb — pri 1.14 fotka viditeľne stráca ostrosť */
from { transform: scale(1.02) translate3d(0, 0, 0); }
to { transform: scale(1.07) translate3d(-1%, -1%, 0); }
}
.hero-cover-media::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(105deg, rgba(18,22,18,.72) 0%, rgba(18,22,18,.42) 46%, rgba(18,22,18,.18) 100%),
linear-gradient(180deg, rgba(18,22,18,.34) 0%, transparent 30%, rgba(18,22,18,.44) 100%);
}
.hero-cover .wrap { position: relative; z-index: 2; }
.hero-cover-inner { max-width: 940px; }
.hero-cover .eyebrow {
color: rgba(255,255,255,.9);
margin-bottom: clamp(22px, 3vw, 36px);
}
.hero-cover .eyebrow::before { background: var(--c-accent); }
.hero-cover h1 {
/* rovnaká sústava ako ostatné hero nadpisy: Outfit 800, verzálky */
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(32px, 4.6vw, 62px);
line-height: 1.06;
letter-spacing: -0.028em;
text-transform: uppercase;
color: #fff;
margin-bottom: clamp(24px, 3.4vw, 42px);
text-shadow: 0 2px 40px rgba(0,0,0,.34);
}
.hero-cover h1 em { font-style: normal; color: var(--c-accent); }
.cover-sub {
font-size: clamp(15.5px, 1.35vw, 19px);
line-height: 1.62;
color: rgba(255,255,255,.88);
max-width: 50ch;
margin-bottom: clamp(34px, 4vw, 52px);
}
.cover-actions { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); align-items: center; }
.cover-link {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--f-display);
font-size: 12.5px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: #fff;
padding-bottom: 9px;
border-bottom: 1px solid rgba(255,255,255,.45);
transition: border-color .3s, gap .3s, color .3s;
}
.cover-link:hover { color: #fff; border-bottom-color: var(--c-accent); gap: 22px; }
.cover-link .ar { transition: transform .3s; }
.cover-link:hover .ar { transform: translateX(5px); }
.cover-scroll {
position: absolute; left: 50%; bottom: 34px;
transform: translateX(-50%);
z-index: 2;
font-family: var(--f-display);
font-size: 10.5px; font-weight: 700;
letter-spacing: .38em; text-transform: uppercase;
color: rgba(255,255,255,.72);
display: grid; justify-items: center; gap: 12px;
}
.cover-scroll::after {
content: ""; width: 1px; height: 42px;
background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
animation: scroll-cue 2.4s ease-in-out infinite;
}
@keyframes scroll-cue {
0%, 100% { opacity: .3; transform: scaleY(.55); transform-origin: top; }
50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) {
.hero-cover-media img, .cover-scroll::after { animation: none; }
}
@media (max-width: 820px) {
.hero-cover { min-height: 92svh; padding: 108px 0 84px; }
.cover-sub { max-width: none; }
.cover-actions { gap: 18px; }
}
/* cover s textom ukotveným dole — keď je dianie v strede fotky */
.hero-cover--bottom { align-items: flex-end; padding-bottom: clamp(96px, 11vw, 150px); }
.hero-cover--bottom .hero-cover-media::after {
background:
linear-gradient(180deg, rgba(16,20,18,.42) 0%, transparent 26%, rgba(16,20,18,.52) 58%, rgba(16,20,18,.86) 100%);
}
/* cover s textom hore — keď je hore obloha (príroda) */
.hero-cover--top { align-items: flex-start; padding-top: clamp(150px, 17vw, 230px); }
.hero-cover--top .hero-cover-media::after {
background:
linear-gradient(160deg, rgba(14,26,34,.7) 0%, rgba(14,26,34,.42) 44%, rgba(14,26,34,.12) 74%),
linear-gradient(180deg, rgba(14,26,34,.34) 0%, transparent 42%, rgba(14,26,34,.36) 100%);
}
/* Príroda: text sedí nad horami — potrebuje pevnejší podklad */
.hero-cover--top .hero-cover-media::after {
background:
linear-gradient(155deg, rgba(12,20,26,.82) 0%, rgba(12,20,26,.55) 40%, rgba(12,20,26,.14) 72%),
linear-gradient(180deg, rgba(12,20,26,.46) 0%, transparent 40%, rgba(12,20,26,.4) 100%);
}
.hero-cover--top .hero-cover-inner { max-width: 780px; }
/* ============================================================
NÁHĽAD RESPONZIVITY — vývojárska pomôcka, len lokálne.
Celé UI vkladá script.js; na ostrej doméne sa nevykreslí.
Farby cez tokeny, aby ladilo s aktívnou vetvou aj paletou.
============================================================ */
.rp-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 9000;
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px 11px 14px;
background: var(--c-dark); color: var(--c-cream);
border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
font-family: var(--f-display, inherit); font-weight: 700; font-size: 13px;
letter-spacing: .06em; text-transform: uppercase;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
opacity: .55; cursor: pointer;
transition: opacity .18s ease, transform .18s ease;
}
.rp-fab:hover, .rp-fab:focus-visible { opacity: 1; transform: translateY(-2px); }
.rp-fab-ico {
width: 13px; height: 20px; flex: none;
border: 2px solid var(--c-brass); border-radius: 3px;
}
.rp-overlay {
position: fixed; inset: 0; z-index: 9500;
display: flex; flex-direction: column;
background: #14120f;
}
/* Jeden riadok aj v nízkom okne — zalomená lišta ukrajovala z náhľadu.
Pri nedostatku miesta sa posúvajú samotné čipy, nie celá lišta. */
.rp-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
padding: 10px 14px;
background: var(--c-dark); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rp-group {
display: flex; gap: 7px; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.rp-group::-webkit-scrollbar { display: none; }
.rp-chip, .rp-act { flex: none; }
.rp-chip {
display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
padding: 8px 14px; cursor: pointer;
background: transparent; color: var(--c-cream);
border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
transition: background .15s ease, border-color .15s ease;
}
.rp-chip strong { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.rp-chip em { font-style: normal; font-size: 10.5px; opacity: .6; }
.rp-chip:hover { background: rgba(255, 255, 255, .09); }
.rp-chip[aria-pressed="true"] {
background: var(--c-brass); border-color: var(--c-brass); color: #1b1710;
}
.rp-size {
margin-left: auto; font-size: 12px; letter-spacing: .05em;
color: var(--c-cream); opacity: .62; white-space: nowrap;
}
.rp-act {
padding: 9px 15px; cursor: pointer; font-size: 12px; font-weight: 600;
background: rgba(255, 255, 255, .1); color: var(--c-cream);
border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
}
.rp-act:hover { background: rgba(255, 255, 255, .2); }
.rp-close { background: var(--c-brass); border-color: var(--c-brass); color: #1b1710; }
.rp-stage { position: relative; flex: 1; overflow: hidden; }
.rp-frame {
position: absolute; left: 50%; top: 50%;
transform-origin: center center;
background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
}
.rp-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) {
.rp-size { display: none; }
.rp-fab span:last-child { display: none; }
.rp-fab { padding: 12px; }
}
@media print { .rp-fab, .rp-overlay { display: none !important; } }
/* ---------- Štatistika: predpona "o" + odkaz na detail ---------- */
.stat-num .pre { font-size: .5em; font-weight: 700; margin-right: .18em; color: var(--c-brass); } /* rovnako ako % */
.stat-more {
display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
font-family: var(--f-display); font-weight: 700; font-size: 13px;
letter-spacing: .04em; color: var(--c-brass); text-decoration: none;
}
.stat-more .ar { transition: transform .25s ease; }
.stat-more:hover { color: var(--c-brass-deep); }
.stat-more:hover .ar { transform: translateX(4px); }
/* ---------- Benefity prírody — rozbaľovací rebrík ---------- */
.bene-ladder { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); }
.bene-row {
background: var(--c-surface, var(--c-cream-2));
border: 1.5px solid var(--c-line, var(--c-cream-3));
border-radius: var(--r-lg); overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease;
}
.bene-row[open] { border-color: var(--c-accent); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.bene-row:hover { border-color: var(--c-accent); }
.bene-row summary {
list-style: none; cursor: pointer;
display: grid; grid-template-columns: minmax(104px, 150px) 1fr auto;
gap: clamp(12px, 2vw, 26px); align-items: center;
padding: clamp(14px, 1.9vw, 20px) clamp(16px, 2.2vw, 26px);
}
.bene-row summary::-webkit-details-marker { display: none; }
.bene-time {
font-family: var(--f-display); font-weight: 800;
font-size: clamp(15px, 1.5vw, 19px); color: var(--c-accent-deep, var(--c-accent));
letter-spacing: -.01em;
}
.bene-head { font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); color: var(--c-dark); }
.bene-ar {
width: 30px; height: 30px; flex: none; border-radius: 50%;
display: grid; place-items: center;
background: var(--c-brass); color: var(--c-cream);
font-weight: 700; font-size: 17px; line-height: 1;
transition: transform .3s ease, background .25s ease;
}
.bene-row[open] .bene-ar { transform: rotate(45deg); background: var(--c-accent-deep, var(--c-accent)); }
.bene-body { padding: 0 clamp(16px, 2.2vw, 26px) clamp(16px, 2.2vw, 22px); }
.bene-body p {
margin: 0; color: var(--c-text-soft); font-size: 15px; line-height: 1.6;
max-width: 70ch; animation: bene-in .35s ease both;
}
@keyframes bene-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* plynulé rozbalenie tam, kde to prehliadač podporuje */
@supports selector(details::details-content) {
.bene-row::details-content {
block-size: 0; overflow: hidden;
transition: block-size .35s ease, content-visibility .35s;
transition-behavior: allow-discrete;
}
.bene-row[open]::details-content { block-size: auto; }
}
/* ---------- Finská štúdia ---------- */
.bene-study {
background: var(--c-dark); color: var(--c-on-dark);
border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px);
}
.bene-study-head h3 {
font-family: var(--f-display); font-weight: 800; color: var(--c-cream);
font-size: clamp(21px, 2.3vw, 31px); margin: 10px 0 10px; letter-spacing: -.02em;
}
.bene-study-head .eyebrow { color: var(--c-accent); }
.bene-study-head .eyebrow::before { background: var(--c-accent); }
.bene-study-head > p { color: var(--c-on-dark-mute); max-width: 68ch; margin: 0; }
.bene-stat-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(12px, 1.8vw, 20px); margin: clamp(20px, 2.8vw, 32px) 0 clamp(16px, 2vw, 24px);
}
.bene-stat {
background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14);
border-radius: var(--r-lg); padding: clamp(16px, 2vw, 22px);
}
.bene-stat b {
display: block; font-family: var(--f-display); font-weight: 800;
font-size: clamp(26px, 3vw, 38px); color: var(--c-accent); letter-spacing: -.03em; margin-bottom: 6px;
}
.bene-stat span { font-size: 14px; line-height: 1.5; color: var(--c-on-dark-mute); }
.bene-note { font-size: 14.5px; line-height: 1.65; color: var(--c-on-dark-mute); margin: 0; max-width: 92ch; }
@media (max-width: 640px) {
.bene-row summary { grid-template-columns: 1fr auto; row-gap: 4px; }
.bene-time { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.bene-body p { animation: none; opacity: 1 !important; transform: none !important; }
.bene-ar, .stat-more .ar { transition: none; }
}
/* Hlavná bunka benta má tmavé pozadie — text musí byť svetlý */
.bento-main { color: var(--c-on-dark); }
.bento-main p { color: var(--c-on-dark-mute); }
.bento-main .big-quote { color: var(--c-cream); }
/* .bento-cell p (15px) má vyššiu špecificitu a citát zmenšovalo na veľkosť textu */
.bento-cell .big-quote { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; margin-bottom: 18px; }
/* ---------- Benefity: zavreté je to len pečeť v rohu karty „10 min“ ----------
sedí v mriežke štatistík cez všetky stĺpce, zavretý má nulovú výšku.
Summary (pečeť) je absolútne posunuté hore do pravého dolného rohu tretej
karty a trochu z nej presahuje; obsah sa rozloží na plnú šírku pod kartami.
--seal = veľkosť, 22px = gap mriežky .stats-grid. */
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bene-wrap {
--seal: clamp(132px, 11.5vw, 156px);
grid-column: 1 / -1; position: relative; z-index: 3;
margin-top: -22px; /* zavretý nepridá do mriežky medzeru */
}
.bene-toggle {
list-style: none; cursor: pointer;
position: absolute; z-index: 2;
width: var(--seal); aspect-ratio: 1; border-radius: 50%;
top: calc(var(--seal) * -.72); /* ~ štvrtina pečate pod kartou */
right: calc(var(--seal) * -.2); /* a kúsok mimo jej pravý okraj */
transition: translate .3s ease;
-webkit-tap-highlight-color: transparent;
}
.bene-toggle::-webkit-details-marker { display: none; }
.bene-toggle:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 6px; }
/* text karty nesmie zájsť pod pečeť */
.stats-grid:has(.bene-wrap) .stat-card:nth-child(3) p { padding-right: calc(var(--seal, 110px) * .55); }
/* karta sa pri hoveri dvíha — pečeť s ňou */
.stats-grid:has(.stat-card:nth-child(3):hover) .bene-toggle { translate: 0 -7px; }
/* vrstva 1 — magnetický posun za kurzorom (JS nastavuje --mx, --my, --tilt) */
.bene-seal {
position: relative; display: block; width: 100%; height: 100%;
transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--tilt, 0deg));
transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.bene-toggle.is-tracking .bene-seal { transition-duration: .12s; }
/* vrstva 2 — dýchanie, pečiatkovanie, stav otvorené */
.bene-seal svg {
display: block; width: 100%; height: 100%; overflow: visible;
filter: drop-shadow(0 12px 20px rgba(0,0,0,.18));
transition: transform .6s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.bene-wrap:not([open]) .bene-seal svg { animation: seal-breathe 4.5s ease-in-out infinite; }
.bene-toggle:hover .bene-seal svg {
animation: none; transform: scale(1.1) rotate(-8deg);
filter: drop-shadow(0 18px 26px rgba(0,0,0,.24));
}
.bene-toggle.is-stamping .bene-seal svg { animation: seal-stamp .55s cubic-bezier(.34,1.56,.64,1); }
.bene-wrap[open] .bene-seal svg { transform: scale(.82) rotate(24deg); }
/* pulzujúca aura — pozvánka na klik, len kým je zavretá */
.bene-seal::before, .bene-seal::after {
content: ""; position: absolute; inset: 6%; border-radius: 50%;
border: 2px solid var(--c-brass); opacity: 0; pointer-events: none;
}
.bene-wrap:not([open]) .bene-seal::before { animation: seal-halo 2.8s ease-out infinite; }
.bene-wrap:not([open]) .bene-seal::after { animation: seal-halo 2.8s ease-out 1.4s infinite; }
.bene-seal-edge { fill: var(--c-brass); }
/* text stojí — musí sa dať prečítať; začína vľavo a ide cez vrch */
.bene-seal-text text, .bene-seal-text circle {
fill: var(--c-cream); font-family: var(--f-display); font-weight: 800;
font-size: 9.4px; letter-spacing: .6px;
}
.bene-seal-ring {
fill: none; stroke: var(--c-cream); stroke-opacity: .45;
stroke-width: 1.2; stroke-dasharray: 2 3;
}
.bene-seal-leaf { transform-origin: 50px 50px; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.bene-toggle:hover .bene-seal-leaf { transform: rotate(14deg) scale(1.08); }
.bene-wrap[open] .bene-seal-leaf { transform: rotate(-38deg) scale(.92); }
.bene-seal-leaf path {
fill: none; stroke: var(--c-cream); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
}
.bene-seal-leaf path:first-child { fill: var(--c-cream); fill-opacity: .14; }
/* lístky, ktoré pri rozlomení vyletia (vytvára ich JS) */
.seal-burst {
position: absolute; left: 50%; top: 50%;
width: 14px; height: 14px; margin: -7px 0 0 -7px;
border-radius: 0 100% 0 100%;
background: var(--c-accent); pointer-events: none;
animation: seal-burst .9s cubic-bezier(.2,.7,.3,1) forwards;
}
.seal-burst:nth-child(even) { background: var(--c-brass); width: 10px; height: 10px; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@keyframes seal-breathe {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(-6deg) scale(1.04); }
}
@keyframes seal-halo {
0% { transform: scale(1); opacity: .55; }
100% { transform: scale(1.55); opacity: 0; }
}
@keyframes seal-stamp {
0% { transform: scale(1.1) rotate(-8deg); }
35% { transform: scale(.78) rotate(4deg); }
70% { transform: scale(1.12) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); }
}
@keyframes seal-burst {
0% { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; }
100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--spin)) scale(1); opacity: 0; }
}
/* rozložený obsah */
.bene-wrap-body {
margin-top: calc(22px + var(--seal) * .45);
border: 1.5px solid var(--c-accent);
border-radius: var(--r-xl);
background: var(--c-surface, var(--c-cream-2));
box-shadow: 0 16px 44px rgba(0,0,0,.08);
padding: clamp(24px, 3.4vw, 46px) clamp(18px, 2.6vw, 40px);
}
.bene-body-head { display: grid; gap: 12px; margin-bottom: 14px; }
.bene-body-head h2 { margin: 0; }
.bene-intro { color: var(--c-text-soft); max-width: 72ch; margin: 0 0 clamp(18px, 2.4vw, 26px); }
.bene-close {
display: flex; align-items: center; gap: 10px; margin: clamp(22px, 3vw, 32px) auto 0;
padding: 12px 22px; border: 1.5px solid var(--c-brass); border-radius: 999px;
background: transparent; color: var(--c-dark); cursor: pointer;
font: 700 12.5px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
transition: background .25s ease, color .25s ease;
}
.bene-close[hidden] { display: none; }
.bene-close .ar { transition: transform .25s ease; }
.bene-close:hover { background: var(--c-brass); color: var(--c-cream); }
.bene-close:hover .ar { transform: translateY(-3px); }
.bene-close:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 3px; }
@media (max-width: 960px) {
/* karty pod sebou — presah doprava len taký, aby nevznikol vodorovný scroll */
.bene-wrap { --seal: 128px; }
.bene-toggle { right: -10px; }
/* karta je na celú šírku a nízka — text nad pečať, nie vedľa nej */
.stats-grid:has(.bene-wrap) .stat-card:nth-child(3) { padding-bottom: 124px; }
.stats-grid:has(.bene-wrap) .stat-card:nth-child(3) p { padding-right: 0; }
}
@supports selector(details::details-content) {
.bene-wrap::details-content {
block-size: 0; overflow: hidden;
transition: block-size .4s ease, content-visibility .4s;
transition-behavior: allow-discrete;
}
.bene-wrap[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
.bene-wrap, .bene-seal, .bene-seal svg, .bene-seal-leaf, .bene-toggle { transition: none; }
.bene-wrap:not([open]) .bene-seal svg,
.bene-seal::before, .bene-seal::after, .bene-toggle.is-stamping .bene-seal svg { animation: none !important; }
.seal-burst { display: none; }
}
/* Kotvy (#formy, #benefity, #kontakt …) sa nesmú schovať pod lepkavú hlavičku.
scroll-margin-top rešpektuje aj natívny skok z odkazu, aj scrollIntoView(). */
section[id], .bene-wrap, #main { scroll-margin-top: clamp(84px, 9vh, 108px); }
/* ============================================================
EDITORIAL — len rozcestník ([data-style="editorial"])
Tlačené členenie namiesto rovnakých zaoblených kariet:
vlasové linky, visiace číslice, asymetrické dvojstrany.
============================================================ */
/* Vlasová linka so štítkom — nahrádza opakované „eyebrow + h2 + p“ */
[data-style="editorial"] .ed-rule {
display: flex; align-items: center; gap: 20px;
margin: 0 0 clamp(26px, 4vw, 48px);
}
[data-style="editorial"] .ed-rule span {
font: 600 11px/1 var(--f-text); letter-spacing: .26em;
text-transform: uppercase; color: var(--c-text-mute); white-space: nowrap;
}
[data-style="editorial"] .ed-rule::after {
content: ""; flex: 1; height: 1px; background: var(--c-line, var(--c-cream-3));
}
/* Editoriálny odkaz — podčiarknutie, nie pilulka */
[data-style="editorial"] .ed-link {
display: inline-flex; align-items: center; gap: 10px;
font: 700 13px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
color: var(--c-dark); text-decoration: none;
padding-bottom: 8px; border-bottom: 2px solid var(--c-brass);
transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
[data-style="editorial"] .ed-link:hover { gap: 17px; color: var(--c-brass-deep, var(--c-brass)); }
[data-style="editorial"] .ed-link--lg { font-size: 15px; padding-bottom: 10px; }
/* ---------- Hero: obsah ako tiráž čísla ---------- */
[data-style="editorial"] .cover-index { gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
[data-style="editorial"] .cover-index i {
font-style: normal; font-weight: 800; font-size: .76em;
letter-spacing: .06em; opacity: .62; margin-right: 4px;
}
[data-style="editorial"] .cover-meta {
margin: clamp(18px, 2.4vw, 28px) 0 0;
font: 500 12.5px/1.5 var(--f-text); letter-spacing: .12em;
text-transform: uppercase; color: rgba(255,255,255,.62);
}
/* ---------- Pás inštitúcií — jemnejší, tlačený ---------- */
[data-style="editorial"] .namebar {
border-block: 1px solid var(--c-line, var(--c-cream-3));
background: transparent; padding-block: 15px;
}
[data-style="editorial"] .namebar-label {
font-size: 10.5px; letter-spacing: .26em; color: var(--c-text-mute);
}
[data-style="editorial"] .namebar-track span {
font-size: 13px; letter-spacing: .04em; color: var(--c-text-soft);
}
[data-style="editorial"] .namebar-track i { color: var(--c-brass); opacity: .5; }
/* ---------- Dvojstrany ---------- */
[data-style="editorial"] .doors-ed { padding-block: clamp(46px, 6vw, 86px); }
[data-style="editorial"] .spread {
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: clamp(26px, 5vw, 78px); align-items: center;
padding: clamp(34px, 5vw, 72px) 0;
border-top: 1px solid var(--c-line, var(--c-cream-3));
}
[data-style="editorial"] .spread:last-child { border-bottom: 1px solid var(--c-line, var(--c-cream-3)); }
[data-style="editorial"] .spread--flip .spread-media { order: 2; }
[data-style="editorial"] .spread-media {
display: block; overflow: hidden; border-radius: 3px;
aspect-ratio: 5/4; background: var(--c-cream-2);
}
[data-style="editorial"] .spread-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .9s cubic-bezier(.2,.7,.2,1); filter: saturate(.94);
}
[data-style="editorial"] .spread-media:hover img { transform: scale(1.04); }
[data-style="editorial"] .spread-num {
display: block; font: 800 clamp(46px, 6.2vw, 88px)/1 var(--f-display);
letter-spacing: -.045em; color: var(--c-brass); opacity: .26; margin-bottom: 6px;
}
@supports (-webkit-text-stroke: 1px red) {
[data-style="editorial"] .spread-num {
color: transparent; opacity: 1; -webkit-text-stroke: 1.6px var(--c-brass);
}
}
[data-style="editorial"] .spread-kicker {
font: 600 11px/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase;
color: var(--c-accent-deep, var(--c-accent)); margin: 0 0 14px;
}
[data-style="editorial"] .spread h2 {
font-family: var(--f-display); font-weight: 800; text-transform: none;
font-size: clamp(30px, 4.3vw, 58px); line-height: 1.02; letter-spacing: -.035em;
color: var(--c-dark); margin: 0 0 16px;
}
[data-style="editorial"] .spread h2 a { color: inherit; text-decoration: none; }
[data-style="editorial"] .spread h2 a:hover { color: var(--c-brass-deep, var(--c-brass)); }
[data-style="editorial"] .spread-lede {
font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55;
color: var(--c-text-soft); max-width: 46ch; margin: 0 0 clamp(20px, 2.6vw, 30px);
}
[data-style="editorial"] .spread-pick {
font: 600 10.5px/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
color: var(--c-text-mute); margin: 0 0 10px;
}
[data-style="editorial"] .spread-list {
list-style: none; margin: 0 0 clamp(24px, 3vw, 34px); padding: 0;
counter-reset: pick; border-top: 1px solid var(--c-line, var(--c-cream-3));
}
[data-style="editorial"] .spread-list li {
position: relative; padding: 10px 0 10px 34px;
border-bottom: 1px solid var(--c-line, var(--c-cream-3));
font-size: 14.5px; line-height: 1.45; color: var(--c-text-soft);
}
[data-style="editorial"] .spread-list li::before {
counter-increment: pick; content: counter(pick, decimal-leading-zero);
position: absolute; left: 0; top: 12px;
font: 600 10px/1 var(--f-text); letter-spacing: .08em; color: var(--c-text-mute);
}
/* ---------- Pull-quote ---------- */
[data-style="editorial"] .quotes-ed { padding-block: clamp(46px, 6.5vw, 96px); }
[data-style="editorial"] .quotes-ed .quote-rotator { position: relative; padding-top: clamp(10px, 2vw, 22px); }
[data-style="editorial"] .quotes-ed .quote-rotator::before {
content: "„"; position: absolute; top: clamp(-26px, -2.6vw, -10px); left: -4px;
font: 800 clamp(70px, 9vw, 140px)/1 var(--f-display);
color: var(--c-brass); opacity: .17; pointer-events: none;
}
/* Figúry skladám do jednej bunky mriežky namiesto absolútneho pozicovania —
kontajner tak dorastie na najvyšší citát a nič sa neprekrýva. */
[data-style="editorial"] .quotes-ed .quote-rotator {
display: grid; min-height: 0; max-width: none;
margin-inline: 0; text-align: left;
}
[data-style="editorial"] .quotes-ed .quote-rotator figure {
position: relative; inset: auto; grid-area: 1 / 1;
align-items: flex-start; justify-content: flex-start;
text-align: left; gap: clamp(18px, 2.4vw, 28px);
pointer-events: none;
}
[data-style="editorial"] .quotes-ed .quote-rotator figure.is-on { pointer-events: auto; }
[data-style="editorial"] .quotes-ed blockquote {
font-family: var(--f-display); font-weight: 500; text-transform: none;
font-size: clamp(20px, 2.7vw, 36px); line-height: 1.26; letter-spacing: -.024em;
color: var(--c-dark); max-width: 28ch; margin: 0;
}
[data-style="editorial"] .quotes-ed-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .34fr);
gap: clamp(26px, 5vw, 72px); align-items: start;
}
[data-style="editorial"] .quotes-ed-note {
border-top: 1px solid var(--c-line, var(--c-cream-3)); padding-top: 14px;
}
[data-style="editorial"] .quotes-ed-note p {
margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--c-text-mute);
}
/* Bodky → číslovaný index. Pôvodné používali --c-line-dark, čo je
priesvitná biela pre tmavé sekcie — na kréme bola neviditeľná. */
[data-style="editorial"] .quotes-ed .quote-dots {
justify-content: flex-start; gap: 16px; counter-reset: qd;
margin-top: clamp(24px, 3vw, 36px);
}
[data-style="editorial"] .quotes-ed .quote-dots button {
width: auto; height: auto; border-radius: 0; background: none;
transform: none; padding: 0 0 5px; border-bottom: 2px solid transparent;
font: 600 11px/1 var(--f-text); letter-spacing: .12em; color: var(--c-text-mute);
transition: color .3s ease, border-color .3s ease;
}
[data-style="editorial"] .quotes-ed .quote-dots button::before {
counter-increment: qd; content: counter(qd, decimal-leading-zero);
}
[data-style="editorial"] .quotes-ed .quote-dots button:hover { color: var(--c-dark); }
[data-style="editorial"] .quotes-ed .quote-dots button.is-on {
background: none; transform: none;
color: var(--c-dark); border-bottom-color: var(--c-brass);
}
@media (max-width: 900px) {
[data-style="editorial"] .quotes-ed-grid { grid-template-columns: 1fr; }
}
[data-style="editorial"] .quotes-ed .tm-person { gap: 14px; }
[data-style="editorial"] .quotes-ed .tm-name { color: var(--c-dark) !important; font-size: 14.5px; }
[data-style="editorial"] .quotes-ed .tm-role { color: var(--c-text-mute) !important; font-size: 12.5px; }
[data-style="editorial"] .quotes-ed .quote-dots { margin-top: clamp(22px, 3vw, 34px); }
/* ---------- Kdo vás povede ---------- */
[data-style="editorial"] .about-ed { padding-block: clamp(46px, 6vw, 88px); border-top: 1px solid var(--c-line, var(--c-cream-3)); }
[data-style="editorial"] .about-ed-grid {
display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
gap: clamp(26px, 5vw, 76px); align-items: start;
}
[data-style="editorial"] .about-ed-photo { position: sticky; top: 108px; }
[data-style="editorial"] .about-ed-photo img {
width: 100%; aspect-ratio: 4/4.7; object-fit: cover;
border-radius: 3px; display: block; filter: saturate(.95);
}
[data-style="editorial"] .about-ed-cap {
display: block; margin-top: 10px;
font: 500 11px/1.4 var(--f-text); letter-spacing: .14em;
text-transform: uppercase; color: var(--c-text-mute);
}
[data-style="editorial"] .about-ed-text h2 {
font-family: var(--f-display); font-weight: 700; text-transform: none;
font-size: clamp(21px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.028em;
color: var(--c-dark); margin: 0 0 18px; max-width: 24ch;
}
[data-style="editorial"] .about-ed-lede {
font-size: clamp(15px, 1.45vw, 17px); line-height: 1.6;
color: var(--c-text-soft); max-width: 54ch; margin: 0 0 clamp(24px, 3vw, 34px);
}
[data-style="editorial"] .about-ed-facts {
list-style: none; counter-reset: fact; margin: 0 0 clamp(26px, 3.4vw, 38px); padding: 0;
border-top: 1px solid var(--c-line, var(--c-cream-3));
}
[data-style="editorial"] .about-ed-facts li {
position: relative; padding: 13px 0 13px 42px;
border-bottom: 1px solid var(--c-line, var(--c-cream-3));
font-size: 15px; line-height: 1.5; color: var(--c-text-soft);
}
[data-style="editorial"] .about-ed-facts li::before {
counter-increment: fact; content: counter(fact, decimal-leading-zero);
position: absolute; left: 0; top: 15px;
font: 700 11px/1 var(--f-display); letter-spacing: .06em; color: var(--c-brass);
}
/* ---------- Záverečná výzva ---------- */
[data-style="editorial"] .cta-ed {
padding-block: clamp(50px, 7vw, 104px);
border-top: 1px solid var(--c-line, var(--c-cream-3));
}
[data-style="editorial"] .cta-ed-inner { max-width: 54ch; }
[data-style="editorial"] .cta-ed h2 {
font-family: var(--f-display); font-weight: 800; text-transform: none;
font-size: clamp(28px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.038em;
color: var(--c-dark); margin: 0 0 18px;
}
[data-style="editorial"] .cta-ed p {
font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55;
color: var(--c-text-soft); margin: 0 0 clamp(24px, 3vw, 34px);
}
[data-style="editorial"] .cta-ed-note {
margin: 18px 0 0 !important;
font: 500 12px/1.4 var(--f-text) !important; letter-spacing: .14em;
text-transform: uppercase; color: var(--c-text-mute);
}
/* ---------- Responzivita ---------- */
@media (max-width: 900px) {
[data-style="editorial"] .spread,
[data-style="editorial"] .about-ed-grid { grid-template-columns: 1fr; }
[data-style="editorial"] .spread--flip .spread-media { order: 0; }
[data-style="editorial"] .about-ed-photo { position: static; max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
[data-style="editorial"] .spread-media img,
[data-style="editorial"] .ed-link { transition: none; }
}
/* ---------- Paleta „Papír“ — hlboká zelená + tehlová na kostenom papieri ---------- */
[data-branch="home"][data-palette="papir"] {
--c-dark: #1F2D23;
--c-dark-deep: #16211A;
--c-dark-soft: #3A4C3E;
--c-cream: #F4F0E6;
--c-cream-2: #EBE5D7;
--c-cream-3: #DCD4C1;
--c-accent: #B5482C;
--c-accent-deep: #94351E;
--c-brass: #A8762A;
--c-brass-deep: #875D1B;
--c-text: #22301F;
--c-text-soft: #4E5C4B;
--c-text-mute: #8A9184;
--c-line: rgba(31, 45, 35, 0.16);
--c-line-strong: rgba(31, 45, 35, 0.32);
--c-on-dark: #F4F0E6;
--c-on-dark-soft: rgba(244, 240, 230, 0.78);
--c-on-dark-mute: rgba(244, 240, 230, 0.56);
--c-line-dark: rgba(244, 240, 230, 0.2);
--orb-a: rgba(181, 72, 44, 0.22);
--orb-b: rgba(168, 118, 42, 0.16);
}
/* ============================================================
EDITORIAL — pätkový hlas (len rozcestník)
============================================================ */
[data-style="editorial"] {
--f-display: "Fraunces", Georgia, "Times New Roman", serif;
--f-text: "Archivo", -apple-system, "Segoe UI", sans-serif;
}
/* Papierová textúra cez celú stránku — jemné zrno, nie šum */
[data-style="editorial"] body::after {
content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
opacity: .045; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Štítky a odkazy zostávajú groteskom — pätka patrí nadpisom */
[data-style="editorial"] .ed-link,
[data-style="editorial"] .eyebrow,
[data-style="editorial"] .spread-kicker,
[data-style="editorial"] .spread-pick,
[data-style="editorial"] .cover-meta,
[data-style="editorial"] .about-ed-cap,
[data-style="editorial"] .cta-ed-note { font-family: var(--f-text); }
/* Hero — pätkové verzálky znesú menšiu váhu a viac prestrku */
[data-style="editorial"] .hero-cover h1 {
font-weight: 600; letter-spacing: -.012em; line-height: 1.04;
font-size: clamp(34px, 5vw, 70px);
}
[data-style="editorial"] .hero-cover h1 em { font-style: italic; }
/* Nadpisy dvojstrán, bloku o mne a výzvy */
[data-style="editorial"] .spread h2 {
font-weight: 600; letter-spacing: -.018em; font-size: clamp(32px, 4.6vw, 62px);
}
[data-style="editorial"] .about-ed-text h2 { font-weight: 500; letter-spacing: -.014em; }
[data-style="editorial"] .cta-ed h2 { font-weight: 600; letter-spacing: -.02em; }
/* Pull-quote kurzívou — klasický sadzobný prvok */
[data-style="editorial"] .quotes-ed blockquote {
font-weight: 400; font-style: italic; letter-spacing: -.012em;
font-size: clamp(21px, 2.8vw, 38px); line-height: 1.3;
}
[data-style="editorial"] .quotes-ed .quote-rotator::before { opacity: .2; }
/* Obrysová číslica — pätka drží ťah lepšie pri väčšej hrúbke */
[data-style="editorial"] .spread-num { font-weight: 600; }
@supports (-webkit-text-stroke: 1px red) {
[data-style="editorial"] .spread-num { -webkit-text-stroke-width: 1.3px; }
}
/* Jednotné tónovanie fotiek — aby pôsobili autorsky, nie ako fotobanka */
[data-style="editorial"] .spread-media { position: relative; }
[data-style="editorial"] .spread-media::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: var(--c-dark); mix-blend-mode: color; opacity: .16;
}
[data-style="editorial"] .spread-media img,
[data-style="editorial"] .about-ed-photo img { filter: contrast(1.07) saturate(.76); }
[data-style="editorial"] .hero-cover-media img { filter: contrast(1.05) saturate(.84); }
/* ---------- Prepínač vetiev: hranatý rámček so šípkou, kompaktný ---------- */
.branch-switch {
border-radius: 7px; padding: 8px 13px;
font-size: 11.5px; letter-spacing: .08em; gap: 9px;
white-space: nowrap;
}
.branch-switch .bs-ar {
font-size: 13px; line-height: 1; opacity: .6;
transition: transform .25s ease, opacity .25s ease;
}
.branch-switch:hover .bs-ar { transform: translateX(3px); opacity: 1; }
/* Hlavičkové CTA zladené s prepínačom — rovnaká výška, bez roztiahnutia */
.header-cta {
border-radius: 7px; padding: 9px 17px;
font-size: 12px; letter-spacing: .05em; white-space: nowrap;
}
.header-cta .btn-arrow { margin-left: 2px; }
/* ---------- Doplnkový zoznam inštitúcií pod logami ---------- */
.client-more {
margin: clamp(20px, 2.6vw, 30px) auto 0; max-width: 88ch; text-align: center;
font-size: 14.5px; line-height: 1.7; color: var(--c-text-soft);
}
.client-more strong { font-weight: 600; color: var(--c-text); }
/* ---------- Odkaz na „O mně“ v kontaktnom paneli ---------- */
.contact-about {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: clamp(20px, 2.6vw, 28px); padding-top: clamp(18px, 2.4vw, 24px);
border-top: 1px solid var(--c-line);
}
.contact-about p { margin: 0; font-size: 14px; color: var(--c-text-mute); flex: 1; min-width: 180px; }
.contact-panel .contact-about { border-top-color: var(--c-line-dark); }
.contact-panel .contact-about p { color: var(--c-on-dark-mute); }
/* Položky hlavného menu sa nesmú zalamovať do dvoch riadkov */
.nav-primary a { white-space: nowrap; }
@media (max-width: 960px) { .nav-primary a { white-space: normal; } }
/* ---------- Zarovnanie riadkov formátov do spoločných stĺpcov ----------
Každý .format-row bol samostatná mriežka, takže si šírky stĺpcov počítal
nezávisle — popisy ani zelené štítky na seba medzi riadkami nenadväzovali.
Subgrid ich zviaže do jednej sústavy stĺpcov. */
@supports (grid-template-columns: subgrid) {
.format-list {
display: grid;
grid-template-columns: 78px minmax(190px, 1fr) minmax(0, 1.4fr) max-content;
}
.format-row {
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: start;
}
.format-row .format-num { align-self: center; }
.format-row h3, .format-row p { align-self: center; }
.format-row .format-tag { align-self: center; justify-self: start; }
}
/* ---------- Dlaždice klientov sú teraz odkazy ---------- */
a.client { text-decoration: none; position: relative; }
a.client::after {
content: "↗"; position: absolute; top: 10px; right: 12px;
font-size: 12px; color: var(--c-brass);
opacity: 0; transform: translate(-3px, 3px);
transition: opacity .25s ease, transform .25s ease;
}
a.client:hover::after { opacity: 1; transform: none; }
a.client:hover .client-wordmark { color: var(--c-brass); }
a.client .client-wordmark { transition: color .25s ease; }
a.client:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; }
/* ---------- Logá klientov: jednotná optická výška, odbarvené ----------
Stiahnuté logá majú rôzne pomery strán aj farebnosť. Odbarvenie a pevná
výška ich zjednotí; plná farba sa ukáže až pri nájazde myšou. */
.client-logo {
display: flex; align-items: center; justify-content: center;
height: 46px; width: 100%; margin-bottom: 12px; overflow: hidden;
}
/* Pevná výška priamo na ![]()
: SVG bez vlastných rozmerov by sa inak
roztiahlo na celú šírku rodiča a vyliezlo z dlaždice. */
.client-logo img {
height: 46px; width: auto; max-width: 100%; object-fit: contain;
filter: grayscale(1) contrast(.9); opacity: .72;
transition: filter .3s ease, opacity .3s ease;
}
a.client:hover .client-logo img { filter: none; opacity: 1; }
/* textová značka tam, kde logo nie je dostupné — rovnaká výška */
a.client .client-wordmark { display: grid; place-items: center; height: 42px; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .client-logo img { transition: none; } }
/* Logá dodávané v bielej (na tmavý podklad) sa musia prevrátiť,
inak sú na svetlej dlaždici neviditeľné. */
.client-logo img.is-light { filter: invert(1) grayscale(1) contrast(.9); }
a.client:hover .client-logo img.is-light { filter: invert(1); }
/* ---------- Pás dôvery: logá pod hero, statický, posúvateľný šípkami ----------
Zámerne sa nehýbe sám — pohyblivý je pás tém, tieto dve veci sa nesmú pliesť. */
.logo-bar {
padding-block: clamp(22px, 3vw, 34px);
border-bottom: 1px solid var(--c-line);
background: var(--c-cream);
}
.logo-bar-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: clamp(14px, 1.8vw, 20px);
}
.logo-bar-label {
margin: 0; font: 600 11px/1 var(--f-text); letter-spacing: .24em;
text-transform: uppercase; color: var(--c-text-mute);
}
.logo-bar-nav { display: flex; gap: 8px; }
.lb-btn {
width: 34px; height: 34px; border-radius: 50%; flex: none;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--c-text-soft);
box-shadow: inset 0 0 0 1.5px var(--c-line);
transition: background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.lb-btn svg { width: 16px; height: 16px; }
.lb-btn:hover:not(:disabled) { background: var(--c-dark); color: var(--c-cream); box-shadow: none; }
.lb-btn:disabled { opacity: .3; cursor: default; }
.lb-btn:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 2px; }
.logo-bar-track {
display: flex; align-items: center; gap: clamp(26px, 4vw, 54px);
overflow-x: auto; scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none; -ms-overflow-style: none;
padding-bottom: 2px;
}
.logo-bar-track::-webkit-scrollbar { display: none; }
.logo-bar-track:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 4px; border-radius: 4px; }
.logo-chip {
flex: none; scroll-snap-align: start;
display: grid; place-items: center; height: 40px;
}
.logo-chip img {
height: 40px; width: auto; max-width: 160px; object-fit: contain;
filter: grayscale(1) contrast(.9); opacity: .62;
transition: filter .3s ease, opacity .3s ease;
}
.logo-chip:hover img { filter: none; opacity: 1; }
.logo-chip img.is-light { filter: invert(1) grayscale(1) contrast(.9); }
.logo-chip:hover img.is-light { filter: invert(1); }
@media (max-width: 560px) {
.logo-chip, .logo-chip img { height: 32px; }
.logo-bar-track { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.logo-bar-track { scroll-behavior: auto; }
.logo-chip img { transition: none; }
}
/* ---------- Značkový pás s logami ---------- */
.marquee--logos {
display: flex; align-items: stretch; padding: 0;
}
.m-label {
flex: none; margin: 0; display: flex; align-items: center;
padding: 0 clamp(16px, 2.4vw, 30px);
background: var(--c-accent); position: relative; z-index: 2;
font: 600 10.5px/1 var(--f-text); letter-spacing: .2em;
text-transform: uppercase; color: var(--c-dark); white-space: nowrap;
box-shadow: 10px 0 14px -6px var(--c-accent);
}
.m-viewport { overflow: hidden; flex: 1; min-width: 0; }
.marquee--logos .marquee-track {
gap: 0; animation-duration: 70s;
padding-block: 17px; /* vzduch nad a pod logom */
}
.marquee--logos .m-run { display: inline-flex; align-items: center; gap: 0; flex: none; }
.marquee--logos .m-dot {
flex: none; color: var(--c-cream); opacity: .85;
padding: 0 clamp(20px, 2.6vw, 38px); font-size: 13px; line-height: 1;
}
.m-logo { display: grid; place-items: center; flex: none; height: 28px; }
.m-logo img {
height: 28px; width: auto; max-width: 132px; object-fit: contain;
/* grayscale + stmavenie namiesto brightness(0): ploché stmavenie by
zlepilo logá s vyplnenými plochami (vlajka Erasmu, štít UPOL) do bloku */
filter: grayscale(1) brightness(.42) contrast(1.15);
opacity: .85; transition: opacity .25s ease, filter .25s ease;
}
.m-logo img.is-light { filter: invert(1) grayscale(1) brightness(.42) contrast(1.15); }
.m-logo:hover img { opacity: 1; filter: grayscale(1) brightness(.2) contrast(1.2); }
.m-logo:hover img.is-light { filter: invert(1) grayscale(1) brightness(.2) contrast(1.2); }
.m-logo:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 720px) {
.m-label { display: none; }
}
@media (max-width: 560px) {
.m-logo, .m-logo img { height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
.marquee--logos .marquee-track { animation: none; }
.m-logo img { transition: none; }
}
/* ---------- Pás spoluprác s logami (rozcestník + firemný web) ----------
Rovnaký komponent ako textový namebar, len nesie logá. Medzery aj
hviezdičky zostávajú, rýchlosť je mierne nižšia (42 s → 58 s). */
.namebar--logos .namebar-track { animation-duration: 58s; }
.nb-logo { display: inline-grid; place-items: center; height: 30px; vertical-align: middle; }
.nb-logo img {
height: 30px; width: auto; max-width: 140px; object-fit: contain;
/* odbarvenie so stmavením — ploché brightness(0) by zlepilo logá
s vyplnenými plochami (vlajka Erasmu, štít UPOL) do čierneho bloku */
filter: grayscale(1) contrast(1.05) brightness(.55);
opacity: .72; transition: opacity .25s ease, filter .25s ease;
}
.nb-logo img.is-light { filter: invert(1) grayscale(1) contrast(1.05) brightness(.55); }
.nb-logo:hover img { opacity: 1; filter: none; }
.nb-logo:hover img.is-light { filter: invert(1); }
.nb-logo:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 560px) { .nb-logo, .nb-logo img { height: 24px; } }
@media (prefers-reduced-motion: reduce) {
.namebar--logos .namebar-track { animation: none; }
.nb-logo img { transition: none; }
}
/* ---------- Firemný web: pás zlatý, hviezdičky modré (opak rozcestníka) ---------- */
[data-branch="workshopy"] .namebar--logos {
background: var(--c-accent); /* zlatohnedá #AB8742 */
border-block-color: color-mix(in srgb, var(--c-dark) 22%, transparent);
}
[data-branch="workshopy"] .namebar--logos .namebar-label { color: var(--c-dark); opacity: .72; }
[data-branch="workshopy"] .namebar--logos .namebar-track i { color: var(--c-cream-2); }
/* na zlatej potrebujú logá väčší kontrast než na krémovej */
[data-branch="workshopy"] .namebar--logos .nb-logo img {
filter: grayscale(1) contrast(1.1) brightness(.32); opacity: .8;
}
[data-branch="workshopy"] .namebar--logos .nb-logo img.is-light {
filter: invert(1) grayscale(1) contrast(1.1) brightness(.32);
}
[data-branch="workshopy"] .namebar--logos .nb-logo:hover img { filter: none; opacity: 1; }
[data-branch="workshopy"] .namebar--logos .nb-logo:hover img.is-light { filter: invert(1); }
/* ---------- Booklety: karty sú odkazy na PDF ---------- */
a.out-card { text-decoration: none; display: block; }
.out-open {
display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
font: 700 12px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase;
color: var(--c-brass); opacity: 0; transform: translateY(4px);
transition: opacity .25s ease, transform .25s ease;
}
a.out-card:hover .out-open, a.out-card:focus-visible .out-open { opacity: 1; transform: none; }
a.out-card:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; }
@media (hover: none) { .out-open { opacity: 1; transform: none; } }
/* ---------- Témata: prevrátené farby — tmavomodrý podklad ---------- */
[data-branch="workshopy"] .topics {
background: var(--c-dark); color: var(--c-on-dark);
border-radius: var(--r-xl); margin: 0 clamp(0px, 2vw, 24px);
}
[data-branch="workshopy"] .topics .section-head h2 { color: var(--c-cream); }
[data-branch="workshopy"] .topics .section-head > p { color: var(--c-on-dark-mute); }
[data-branch="workshopy"] .topics .eyebrow { color: var(--c-accent); }
[data-branch="workshopy"] .topics .eyebrow::before { background: var(--c-accent); }
[data-branch="workshopy"] .topics .topic-tag {
background: rgba(255,255,255,.07); color: var(--c-on-dark);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
[data-branch="workshopy"] .topics .topic-tag:hover {
background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px var(--c-accent);
}
/* krúžok má zlaté pozadie — číslo v ňom musí byť tmavé, nie zlaté */
[data-branch="workshopy"] .topics .topic-num { background: var(--c-accent); color: var(--c-dark); }
/* ---------- Laguna: pás pod hero žltý, nie modrý ----------
V tejto palete je --c-accent tyrkysová, takže pás pôsobil modro.
Berie sa preto --c-brass (#C08E14) a text sa prevráti na tmavý. */
[data-palette="laguna"] .namebar--logos {
background: var(--c-brass);
border-block-color: color-mix(in srgb, var(--c-dark) 24%, transparent);
}
[data-palette="laguna"] .namebar--logos .namebar-label { color: var(--c-dark); opacity: .75; }
[data-palette="laguna"] .namebar--logos .namebar-track i { color: var(--c-cream); }
[data-palette="laguna"] .namebar--logos .nb-logo img {
filter: grayscale(1) contrast(1.1) brightness(.3); opacity: .82;
}
[data-palette="laguna"] .namebar--logos .nb-logo img.is-light {
filter: invert(1) grayscale(1) contrast(1.1) brightness(.3);
}
[data-palette="laguna"] .namebar--logos .nb-logo:hover img { filter: none; opacity: 1; }
[data-palette="laguna"] .namebar--logos .nb-logo:hover img.is-light { filter: invert(1); }
/* ---------- Výstupy: karty s obálkou bookletu / náhľadom videa ---------- */
a.out-card { text-decoration: none; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.out-cover {
position: relative; display: block; aspect-ratio: 4/3;
background: var(--c-cream-3); overflow: hidden;
}
.out-cover img {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
a.out-card:hover .out-cover img { transform: scale(1.04); }
.out-card--video .out-cover img { object-position: center center; }
.out-play {
position: absolute; inset: 0; display: grid; place-items: center;
background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}
.out-play svg {
width: 26px; height: 26px; color: var(--c-cream);
background: rgba(0,0,0,.55); border-radius: 50%;
padding: 12px; box-sizing: content-box;
transition: background .25s ease, transform .25s ease;
}
a.out-card:hover .out-play svg { background: var(--c-accent); transform: scale(1.08); }
.out-body { padding: clamp(16px, 2vw, 22px); display: grid; gap: 8px; }
.out-body h4 { margin: 0; }
.out-open {
display: inline-flex; align-items: center; gap: 8px;
font: 700 12px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase;
color: var(--c-brass);
}
a.out-card:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; }
/* ---------- Výstupy: všetkých 7 v jednom riadku, cik-cak ----------
Posun a náklon idú cez samostatné vlastnosti translate/rotate, nie cez
transform — ten patrí .reveal animácii a hover efektu karty. */
.out-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 16px);
padding-block: 26px 30px;
}
.out-grid > .out-card {
translate: 0 -16px; rotate: -2deg;
transition: transform .3s, background .3s, translate .45s cubic-bezier(.34,1.56,.64,1),
rotate .45s cubic-bezier(.34,1.56,.64,1), scale .45s cubic-bezier(.34,1.56,.64,1),
box-shadow .3s ease;
}
.out-grid > .out-card:nth-child(even) { translate: 0 16px; rotate: 1.8deg; }
.out-grid > .out-card:nth-child(3n) { rotate: -.8deg; }
.out-grid > .out-card:hover, .out-grid > .out-card:focus-visible {
rotate: 0deg; scale: 1.06; z-index: 2;
box-shadow: 0 18px 36px rgba(0,0,0,.14);
}
/* malé štvorčeky: obálka vyplní celú kartu, názov leží na nej dole */
.out-grid { align-items: start; }
.out-grid > .out-card { position: relative; aspect-ratio: 1; }
.out-grid .out-cover { position: absolute; inset: 0; aspect-ratio: auto; }
.out-grid .out-body {
position: absolute; inset: auto 0 0; z-index: 1;
padding: 26px 12px 11px; gap: 4px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-dark) 86%, transparent) 58%);
}
.out-grid .out-body h4 { font-size: clamp(12.5px, 1vw, 14px); line-height: 1.2; color: var(--c-cream); }
.out-grid .out-open {
font-size: 10px; color: var(--c-accent);
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height .3s ease, opacity .3s ease;
}
.out-grid > .out-card:hover .out-open,
.out-grid > .out-card:focus-visible .out-open { max-height: 20px; opacity: 1; }
/* play vpravo hore, aby nezakrýval obálku ani názov */
.out-grid .out-play { place-items: start end; padding: 9px; background: none; }
.out-grid .out-play svg { width: 13px; height: 13px; padding: 8px; }
/* pod 1080px by sa 7 kariet nevošlo — riadok ostane, len sa dá posúvať */
@media (max-width: 1080px) {
.out-grid {
grid-template-columns: none; grid-auto-flow: column;
grid-auto-columns: clamp(132px, 36vw, 160px);
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
padding-inline: 6px; margin-inline: -6px;
}
.out-grid::-webkit-scrollbar { display: none; }
.out-grid > .out-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
.out-grid > .out-card { transition: none; }
}
/* ---------- Reference: tmavomodré pozadie ---------- */
[data-branch="workshopy"] .testimonials {
background: var(--c-dark); color: var(--c-on-dark);
border-radius: var(--r-xl); margin: 0 clamp(0px, 2vw, 24px);
}
[data-branch="workshopy"] .testimonials .section-head h2 { color: var(--c-cream); }
[data-branch="workshopy"] .testimonials .section-head > p { color: var(--c-on-dark-mute); }
[data-branch="workshopy"] .testimonials .eyebrow { color: var(--c-accent); }
[data-branch="workshopy"] .testimonials .eyebrow::before { background: var(--c-accent); }
[data-branch="workshopy"] .testimonials .tm-card {
background: rgba(255,255,255,.06); color: var(--c-on-dark);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
[data-branch="workshopy"] .testimonials .tm-card blockquote { color: var(--c-on-dark); }
[data-branch="workshopy"] .testimonials .tm-name { color: var(--c-cream); }
[data-branch="workshopy"] .testimonials .tm-role { color: var(--c-on-dark-mute); }
/* ---------- Firemný hero: postava vpravo, ľavá strana tmavá ----------
portret-atelier-hero.jpg = originál orezaný sprava (prázdne tmavé pozadie),
takže pri zarovnaní doprava stojí postava bližšie k pravému okraju.
Portrét sa nedá dostatočne odsunúť výrezom (okno je takmer také široké
ako fotka), preto sa vykresľuje celý a doľava sa dopĺňa tmavé pole. */
[data-branch="workshopy"] .hero-cover-media { background: #0B1628; }
[data-branch="workshopy"] .hero-cover-media img {
/* box = presne fotka pri pravom okraji, aby sa jej ľavý kraj dal rozpustiť */
position: absolute; top: 0; right: 0; left: auto;
width: auto; height: 100%; max-width: none;
object-fit: cover;
animation: none;
filter: brightness(1.16) contrast(.97) saturate(1.03);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%);
}
[data-branch="workshopy"] .hero-cover-media::after {
/* modrá preteká cez čierne pozadie fotky až k postave, nech sa zlejú */
background:
linear-gradient(90deg, #0B1628 0%, #0D1B30 24%, rgba(13,27,48,.86) 40%, rgba(13,27,48,.5) 56%, rgba(13,27,48,.3) 72%, rgba(13,27,48,.22) 100%),
linear-gradient(180deg, rgba(11,22,40,.44) 0%, transparent 30%, rgba(11,22,40,.3) 100%);
}
@media (max-width: 860px) {
/* Na mobile by cover z postavy nechal len stred. Fotka je preto menšia,
sedí pri spodnom okraji a postava (41–91 % šírky orezu portret-atelier-hero) je celá,
posunutá doprava. Horný okraj sa rozplýva do tmavého podkladu. */
[data-branch="workshopy"] .hero-cover-media { background: #120E0B; }
[data-branch="workshopy"] .hero-cover-media img {
position: absolute; top: auto; bottom: 0; right: auto; left: 52%;
width: 184vw; max-width: none; height: auto;
object-fit: fill;
transform: translateX(-66%); /* stred postavy je v orezanej fotke na 66 % */
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}
/* text hore, aby tvár pod ním ostala voľná */
[data-branch="workshopy"] .hero-cover { align-items: flex-start; padding-top: 104px; }
[data-branch="workshopy"] .hero-cover-media::after {
background:
linear-gradient(180deg, rgba(12,9,7,.7) 0%, rgba(12,9,7,.45) 38%, rgba(12,9,7,0) 58%, rgba(12,9,7,.55) 100%),
linear-gradient(90deg, rgba(12,9,7,.55) 0%, rgba(12,9,7,.15) 60%, transparent 100%);
}
}
/* ---------- Rozcestník: fotka na celú plochu, bez tmavého pruhu ----------
Široký 16:9 záber pokryje hero celý; postava stojí v pravej polovici,
text vľavo leží na pestrej projekčnej stene a drží ho len plynulý scrim. */
[data-branch="home"] .hero-cover-media { background: var(--c-dark-deep); }
[data-branch="home"] .hero-cover-media img {
object-fit: cover;
object-position: 70% 30%; /* Filip pri flipcharte stojí na 52–68 % šírky (fotka orezaná pod pás) */
/* bez scale() — každé zväčšenie fotku viditeľne rozmazalo; postavu od textu
odsunie len posun doprava, medzera vľavo splynie s tmavým prechodom */
transform: translateX(8%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%);
mask-image: linear-gradient(90deg, transparent 0%, #000 9%);
filter: brightness(1.06) contrast(1.03);
animation: none;
}
[data-branch="home"] .hero-cover-media::after {
/* fotka má vlastný tmavozelený prechod vľavo — scrim len drží text, postavu nechá svetlú */
background:
linear-gradient(90deg,
color-mix(in srgb, var(--c-dark-deep) 88%, transparent) 0%,
color-mix(in srgb, var(--c-dark-deep) 74%, transparent) 30%,
color-mix(in srgb, var(--c-dark) 40%, transparent) 46%,
color-mix(in srgb, var(--c-dark) 12%, transparent) 58%,
transparent 68%),
linear-gradient(180deg, color-mix(in srgb, var(--c-dark-deep) 34%, transparent) 0%, transparent 18%, transparent 78%, color-mix(in srgb, var(--c-dark-deep) 30%, transparent) 100%);
}
@media (max-width: 1100px) and (min-width: 861px) {
/* fotka je teraz cez celú plochu — užší stĺpec, aby odsek nezašiel k ruke s mikrofónom */
[data-branch="home"] .hero-cover .hero-cover-inner { max-width: 50%; }
/* užšie okno — postavu treba odsunúť od odseku ešte viac */
[data-branch="home"] .hero-cover-media img { transform: translateX(14%); }
}
@media (max-width: 860px) {
/* na mobile fotka len v hornej časti — tvár nad textom, nie pod nadpisom;
spodok fotky sa rozplynie do tmavozelenej a text sedí dole na nej */
[data-branch="home"] .hero-cover { align-items: flex-end; min-height: max(92svh, 760px); }
/* „Scroll“ by pri texte dole ležal na druhom odkaze */
[data-branch="home"] .cover-scroll { display: none; }
[data-branch="home"] .hero-cover-media img {
height: 62%;
object-position: 60% 25%; /* tvár pri flipcharte je na 60 % šírky */
transform: none;
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
[data-branch="home"] .hero-cover-media::after {
background: linear-gradient(180deg,
color-mix(in srgb, var(--c-dark-deep) 32%, transparent) 0%,
transparent 14%,
transparent 34%,
color-mix(in srgb, var(--c-dark-deep) 70%, transparent) 52%,
var(--c-dark-deep) 66%);
}
}
/* Textový blok hero nesmie dosiahnuť k postave na fotke */
[data-branch="home"] .hero-cover-inner,
[data-branch="workshopy"] .hero-cover-inner { max-width: min(46%, 560px); }
@media (max-width: 1100px) {
[data-branch="home"] .hero-cover-inner,
[data-branch="workshopy"] .hero-cover-inner { max-width: 62%; }
}
@media (max-width: 860px) {
[data-branch="home"] .hero-cover-inner,
[data-branch="workshopy"] .hero-cover-inner { max-width: none; }
}
/* Nadpis sa musí zmestiť do zúženého stĺpca, inak presahuje k postave */
[data-branch="home"] .hero-cover h1,
[data-branch="workshopy"] .hero-cover h1 {
font-size: clamp(28px, 3.7vw, 54px);
}
[data-branch="home"] .hero-cover .cover-sub,
[data-branch="workshopy"] .hero-cover .cover-sub { font-size: clamp(14px, 1.3vw, 16.5px); }
@media (max-width: 860px) {
[data-branch="home"] .hero-cover h1,
[data-branch="workshopy"] .hero-cover h1 { font-size: clamp(30px, 7.4vw, 48px); }
}
/* Rozcestník: nadpis presne na dva riadky —
delí, zalamovať sa nesmie */
[data-branch="home"] .hero-cover h1 {
font-size: clamp(25px, 3.05vw, 44px);
white-space: nowrap;
}
@media (max-width: 860px) {
[data-branch="home"] .hero-cover h1 { font-size: clamp(26px, 6.6vw, 42px); }
}
/* ---------- Mobilné menu: kompaktný panel, vždy čitateľný ----------
Na stránkach s cover hero je hlavička priehľadná a odkazy biele —
v otvorenom krémovom paneli boli preto neviditeľné. Panel teraz nie je
na celú obrazovku, ale karta pod hlavičkou, a farby si nastavuje sám. */
@media (max-width: 960px) {
.nav-primary,
[data-hero="cover"] .nav-primary {
inset: 76px 12px auto 12px;
max-height: calc(100svh - 96px);
padding: 6px 18px;
gap: 0;
background: var(--c-cream);
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
box-shadow: 0 24px 50px -18px rgba(0,0,0,.35);
transform: translateY(-12px); opacity: 0; visibility: hidden;
transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
.nav-primary.open,
[data-hero="cover"] .nav-primary.open {
transform: none; opacity: 1; visibility: visible;
transition: transform .25s ease, opacity .25s ease, visibility 0s;
}
.nav-primary a,
[data-hero="cover"] .nav-primary a,
[data-hero="cover"] .site-header.is-stuck .nav-primary a {
padding: 14px 2px; font-size: 15px; letter-spacing: .04em;
color: var(--c-dark);
border-bottom: 1px solid var(--c-line);
}
.nav-primary a:last-child { border-bottom: 0; }
.nav-primary a:hover, .nav-primary a.is-active { color: var(--c-brass); }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
.nav-primary, [data-hero="cover"] .nav-primary { transition: none; }
}
/* ---------- Referencie: dajú sa posúvať (šípky + potiahnutie prstom) ----------
Citáty boli absolute v pevnej min-height — dlhé citáty na mobile pretiekli
do ďalšieho obsahu. Teraz ležia v jednej bunke mriežky, výšku dá najdlhší. */
.quote-rotator { display: grid; min-height: 0; touch-action: pan-y; }
.quote-rotator figure { position: relative; inset: auto; grid-area: 1 / 1; pointer-events: none; }
.quote-rotator figure.is-on { pointer-events: auto; }
.quote-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.quote-nav .quote-dots { margin: 0; }
.quote-arrow {
width: 42px; height: 42px; border-radius: 50%; flex: none;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--c-on-dark);
border: 1.5px solid var(--c-line-dark);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.quote-arrow:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-dark); }
.quote-arrow:active { transform: scale(.92); }
.quote-arrow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.quote-arrow svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
.quote-rotator blockquote { font-size: 17px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
/* aj bez animácie sa listuje — nie všetky citáty pod sebou */
.quote-rotator figure { opacity: 0; }
.quote-rotator figure.is-on { opacity: 1; }
.quote-rotator { display: grid; }
.quote-nav .quote-dots { display: flex; }
}
/* ---------- Úvod: „Na čem stojí moje práce“ — zbalené, hravé ----------
Svetlá karta medzi dverami a tmavými referenciami. Zavretá ukazuje
rozhádzané štítky oblastí (na hover sa „rozsypú“), otvorená vysype
deväť riadkov postupne za sebou. */
.roots {
position: relative; overflow: hidden;
background: var(--c-cream-2);
border-radius: var(--r-xl);
border: 1.5px solid var(--c-line);
transition: border-color .3s ease, box-shadow .3s ease;
}
.roots::before { /* mosadzná niť hore */
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
background: linear-gradient(90deg, var(--c-brass), var(--c-accent));
}
.roots:hover, .roots[open] { border-color: var(--c-brass); box-shadow: 0 22px 50px -30px rgba(0,0,0,.35); }
.roots-toggle {
list-style: none; cursor: pointer;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto;
align-items: center; gap: clamp(18px, 3vw, 40px);
padding: clamp(26px, 3.6vw, 48px);
}
.roots-toggle::-webkit-details-marker { display: none; }
.roots-head { display: grid; gap: 10px; min-width: 0; }
.roots-h {
font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(26px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -.03em;
color: var(--c-dark);
}
.roots-sub { color: var(--c-text-soft); font-size: 15px; max-width: 46ch; }
.roots-hint {
font: 700 11.5px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
color: var(--c-brass);
}
.roots-hint .when-open, .roots[open] .roots-hint .when-closed { display: none; }
.roots[open] .roots-hint .when-open { display: inline; }
/* rozhádzané štítky */
.roots-chips { display: flex; flex-wrap: wrap; gap: 20px 14px; justify-content: center; padding-block: 6px; }
.roots-chip {
font: 700 11.5px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
padding: 9px 15px; border-radius: 999px; white-space: nowrap;
background: var(--c-cream); color: var(--c-text);
box-shadow: inset 0 0 0 1.5px var(--c-line-strong);
/* náklon max ~3° a posun max 4 px — pri medzere 20 px sa riadky nedotknú */
rotate: calc((var(--i) - 4) * .75deg);
translate: 0 calc(sin(var(--i) * 1.7) * 4px);
transition: rotate .5s cubic-bezier(.34,1.56,.64,1), translate .5s cubic-bezier(.34,1.56,.64,1),
background .3s ease, color .3s ease;
}
.roots-chip:nth-child(3n+1) { background: var(--c-accent); color: var(--c-dark); box-shadow: none; }
.roots-chip:nth-child(3n+2) { background: var(--c-brass); color: var(--c-cream); box-shadow: none; }
.roots-toggle:hover .roots-chip {
rotate: calc((var(--i) - 4) * -.9deg);
translate: 0 calc(cos(var(--i) * 2.3) * 5px);
}
.roots[open] .roots-chip { rotate: 0deg; translate: 0 0; }
.roots-ar {
width: clamp(48px, 4.8vw, 60px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center;
background: var(--c-dark); color: var(--c-cream);
font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1;
transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.roots-toggle:hover .roots-ar { transform: scale(1.1) rotate(90deg); background: var(--c-brass); }
.roots[open] .roots-ar { transform: rotate(45deg); }
.roots-toggle:focus-visible { outline: 2px solid var(--c-brass); outline-offset: -6px; border-radius: var(--r-xl); }
/* otvorený obsah — riadky na svetlom podklade */
.roots-body { padding: 0 clamp(18px, 3vw, 40px) clamp(26px, 3.6vw, 44px); }
.roots .format-row h3 { color: var(--c-dark); }
.roots .format-row p { color: var(--c-text-soft); }
.roots .format-row:hover { background: var(--c-cream); }
.roots .format-num { color: var(--c-brass); border-color: color-mix(in srgb, var(--c-brass) 55%, transparent); }
.roots[open] .format-row { animation: roots-in .55s cubic-bezier(.2,.8,.3,1) both; }
.roots[open] .format-row:nth-child(1) { animation-delay: .04s; }
.roots[open] .format-row:nth-child(2) { animation-delay: .1s; }
.roots[open] .format-row:nth-child(3) { animation-delay: .16s; }
.roots[open] .format-row:nth-child(4) { animation-delay: .22s; }
.roots[open] .format-row:nth-child(5) { animation-delay: .28s; }
.roots[open] .format-row:nth-child(6) { animation-delay: .34s; }
.roots[open] .format-row:nth-child(7) { animation-delay: .4s; }
.roots[open] .format-row:nth-child(8) { animation-delay: .46s; }
.roots[open] .format-row:nth-child(9) { animation-delay: .52s; }
@keyframes roots-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.roots-more { margin-top: clamp(22px, 3vw, 32px); }
.roots .btn.btn-ghost { color: var(--c-dark); box-shadow: inset 0 0 0 2px var(--c-line-strong); }
.roots .btn.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--c-brass); color: var(--c-brass); }
@supports selector(details::details-content) {
.roots::details-content {
block-size: 0; overflow: hidden;
transition: block-size .45s ease, content-visibility .45s;
transition-behavior: allow-discrete;
}
.roots[open]::details-content { block-size: auto; }
}
@media (max-width: 860px) {
.roots-toggle { grid-template-columns: 1fr auto; }
.roots-chips { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.roots::details-content, .roots-ar, .roots-chip { transition: none; }
.roots[open] .format-row { animation: none; }
}
/* usadená hlavička: odkazy jazykov ostávali biele na krémovej */
[data-hero="cover"] .site-header.is-stuck .lang-switch a { color: var(--c-text-soft); }
[data-hero="cover"] .site-header.is-stuck .lang-switch a.is-active { color: var(--c-dark); }
/* Kontaktný panel na mobile: 1fr = minmax(auto, 1fr), takže najdlhšia možnosť
v