/* ============================================================================
TrimmGo Design System — Colors & Typography
============================================================================
Source: extracted from production CSS (css/fooldal.css, kozmetikus.css,
szalonok.css, szolgaltatasok.css, penzugyek.css, vendegek.css,
bejelentkezes.css, elotte_utana.css). Variables are normalized for reuse.
============================================================================ */
:root {
/* -----------------------------------------------------------------
BRAND — copper / bronze gradient (matches the metallic logo)
----------------------------------------------------------------- */
--tg-copper-50: #fff9f3;
--tg-copper-100: #fdefde;
--tg-copper-200: #f0d4b4;
--tg-copper-300: #FAC697; /* gradient start, accent fills, focus ring */
--tg-copper-400: #E6B885;
--tg-copper-500: #c98856;
--tg-copper-600: #9a3412;
--tg-copper-700: #652410; /* gradient end, headings on cream, primary text */
--tg-copper-800: #4c2a1f;
--tg-copper-900: #2F2A26; /* darkest accent (select option bg) */
--tg-brand-gradient: linear-gradient(135deg, #FAC697 0%, #652410 100%);
--tg-brand-1: #D97757; /* copper accent (numbers, dots, small accents) */
--tg-brand-2: #9a3412; /* darker copper accent */
--tg-brand-gradient-soft: linear-gradient(135deg, #fff9f3 0%, #fdefde 100%);
--tg-brand-gradient-hover: linear-gradient(135deg, #E6B885 0%, #652410 100%);
/* -----------------------------------------------------------------
NEUTRALS — slate text + pearl backgrounds
----------------------------------------------------------------- */
--tg-fg-1: #1a202c; /* page titles, hero numbers */
--tg-fg-2: #2c3e50; /* h2/h3, primary body */
--tg-fg-3: #495057; /* body */
--tg-fg-4: #6c757d; /* muted, captions */
--tg-fg-5: #9ca3af; /* placeholders, disabled */
--tg-fg-inverse: #ffffff;
--tg-bg-app: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* default page wash */
--tg-bg-cream: #f8f9fa; /* secondary surface */
--tg-bg-card: #ffffff;
--tg-bg-muted: #e9ecef;
--tg-bg-rail: #f8f9fc; /* footer rails inside cards */
--tg-border-1: #e9ecef; /* default */
--tg-border-2: #dee2e6; /* slightly stronger */
--tg-border-3: #e3e6f0; /* card outline */
--tg-border-input: #e1e5e9;
/* -----------------------------------------------------------------
NAVY — calendar header / app chrome
----------------------------------------------------------------- */
--tg-navy-700: #304458; /* canonical chrome */
--tg-navy-800: #1f2937;
--tg-navy-900: #1a2d3d;
--tg-navy-950: #0f1c28;
--tg-navy-gradient: linear-gradient(145deg, #1a2d3d 0%, #0f1c28 100%);
/* -----------------------------------------------------------------
SEMANTIC — success / warn / danger / info
Each comes as solid + gradient + soft (toast/alert) tints.
----------------------------------------------------------------- */
/* Success — emerald (primary CTAs use this) */
--tg-success-50: #d4edda;
--tg-success-100: #c3e6cb;
--tg-success-300: #2ecc71;
--tg-success-500: #27ae60;
--tg-success-600: #229954;
--tg-success-700: #155724;
--tg-success-emerald-400: #10B981;
--tg-success-emerald-600: #059669;
--tg-success-emerald-700: #047857;
--tg-success-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
--tg-success-gradient-strong: linear-gradient(135deg, #27ae60 0%, #229954 100%);
/* Warning — amber (today button, pending) */
--tg-warn-50: #fff3cd;
--tg-warn-100: #ffeaa7;
--tg-warn-300: #fbbf24;
--tg-warn-500: #ffc107;
--tg-warn-600: #f59e0b;
--tg-warn-700: #d97706;
--tg-warn-800: #856404;
--tg-warn-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
/* Danger — red (logout, destroy, errors) */
--tg-danger-50: #f8d7da;
--tg-danger-100: #f5c6cb;
--tg-danger-500: #dc3545;
--tg-danger-600: #c82333;
--tg-danger-700: #721c24;
--tg-danger-800: #b91c1c;
--tg-danger-gradient: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
/* Info — sky blue (links, focus accent on login, "today" highlight) */
--tg-info-50: #d1ecf1;
--tg-info-300: #60a5fa;
--tg-info-500: #3b82f6;
--tg-info-600: #2563eb;
--tg-info-700: #224abe;
--tg-info-gradient: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
/* -----------------------------------------------------------------
BOOKING / CALENDAR TILES — semantic per-state tints
----------------------------------------------------------------- */
--tg-booking-confirmed-bg: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
--tg-booking-confirmed-bd: #28a745;
--tg-booking-pending-bg: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
--tg-booking-pending-bd: #ffc107;
--tg-worktime-bg: repeating-linear-gradient(45deg, #ecfdf5 0px, #ecfdf5 8px, #d1fae5 8px, #d1fae5 16px);
--tg-time-badge: linear-gradient(135deg, #FAC697 0%, #652410 100%);
/* -----------------------------------------------------------------
SALON CONTEXT — deterministic 4-hue palette (kék/zöld/narancs/lila)
(compact-calendar-header.kontextus-szalon-{0..3})
----------------------------------------------------------------- */
--tg-salon-0: #1e40af; /* kék */
--tg-salon-1: #047857; /* zöld */
--tg-salon-2: #ea580c; /* narancs */
--tg-salon-3: #7c3aed; /* lila */
/* -----------------------------------------------------------------
TYPOGRAPHY
----------------------------------------------------------------- */
--tg-font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Tahoma, Geneva, Verdana,
Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--tg-font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
/* Sizes (extracted from production rules) */
--tg-size-xxs: 0.7rem; /* 11.2 — legend, badge label */
--tg-size-xs: 0.78rem; /* small captions */
--tg-size-sm: 0.85rem; /* meta, button label */
--tg-size-base: 0.95rem; /* body */
--tg-size-md: 1rem; /* */
--tg-size-lg: 1.1rem; /* card title */
--tg-size-xl: 1.5rem; /* h2 */
--tg-size-2xl: 1.8rem; /* hero h1 (kartya) */
--tg-size-3xl: 2rem; /* page h1 */
--tg-size-display: 2.2rem; /* logo wordmark on login */
--tg-weight-regular: 400;
--tg-weight-medium: 500;
--tg-weight-semi: 600;
--tg-weight-bold: 700;
--tg-weight-black: 800;
--tg-leading-tight: 1.2;
--tg-leading-snug: 1.4;
--tg-leading-normal: 1.6;
/* -----------------------------------------------------------------
RADII + ELEVATION
----------------------------------------------------------------- */
--tg-radius-xs: 4px;
--tg-radius-sm: 6px;
--tg-radius-md: 8px;
--tg-radius-lg: 10px;
--tg-radius-xl: 12px; /* default card */
--tg-radius-2xl: 16px; /* page-header / login card */
--tg-radius-3xl: 20px; /* group sections */
--tg-radius-pill: 999px;
--tg-shadow-card: 0 4px 15px rgba(0, 0, 0, 0.1);
--tg-shadow-card-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
--tg-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05);
--tg-shadow-pop: 0 8px 25px rgba(0, 0, 0, 0.15);
--tg-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.1);
--tg-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
--tg-shadow-brand: 0 6px 20px rgba(250, 198, 151, 0.4);
--tg-shadow-success: 0 4px 16px rgba(39, 174, 96, 0.3);
--tg-shadow-danger: 0 4px 12px rgba(231, 76, 60, 0.3);
/* -----------------------------------------------------------------
MOTION
----------------------------------------------------------------- */
--tg-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--tg-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--tg-dur-fast: 0.2s;
--tg-dur-base: 0.3s;
--tg-dur-slow: 0.4s;
}
/* ============================================================================
SEMANTIC TYPE CLASSES — drop-in for prototype work
============================================================================ */
html, body { font-family: var(--tg-font-sans); color: var(--tg-fg-3); }
.tg-h1 {
font-size: var(--tg-size-3xl);
font-weight: var(--tg-weight-semi);
color: var(--tg-fg-2);
line-height: var(--tg-leading-tight);
letter-spacing: -0.5px;
}
.tg-h2 {
font-size: var(--tg-size-xl);
font-weight: var(--tg-weight-semi);
color: var(--tg-fg-2);
line-height: var(--tg-leading-snug);
}
.tg-h3 {
font-size: var(--tg-size-lg);
font-weight: var(--tg-weight-semi);
color: var(--tg-fg-2);
}
.tg-eyebrow {
font-size: var(--tg-size-xs);
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--tg-fg-4);
font-weight: var(--tg-weight-semi);
}
.tg-body {
font-size: var(--tg-size-base);
color: var(--tg-fg-3);
line-height: var(--tg-leading-normal);
}
.tg-meta {
font-size: var(--tg-size-sm);
color: var(--tg-fg-4);
}
.tg-mono {
font-family: var(--tg-font-mono);
font-size: var(--tg-size-sm);
color: var(--tg-fg-3);
}
.tg-display {
font-family: var(--tg-font-sans);
font-size: var(--tg-size-display);
font-weight: var(--tg-weight-bold);
letter-spacing: -1px;
background: var(--tg-brand-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
overflow-x: hidden;
overflow-x: clip; /* clip: levág, de nem lesz görgető tároló, így a position: sticky működik */
background: #fff;
color: var(--tg-fg-2);
font-family: var(--tg-font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============== NAV ============== */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
padding: 14px 40px;
display: flex; align-items: center; justify-content: space-between;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(255,255,255,0.72);
border-bottom: 1px solid rgba(0,0,0,0.06);
transition: background 0.3s ease;
}
.nav.on-dark {
background: rgba(15, 28, 40, 0.6);
border-bottom-color: rgba(255,255,255,0.08);
}
.nav.on-dark .nav-link { color: rgba(255,255,255,0.85); }
.nav.on-dark .nav-link:hover { color: #fff; }
.nav.on-dark .nav-cta { background: #fff; color: var(--tg-copper-700); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { height: 28px; }
.nav-links { display: flex; gap: 28px; }
.nav-link {
font-size: 14px; color: var(--tg-fg-3); text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.nav-link:hover { color: var(--tg-copper-700); }
.nav-cta {
padding: 8px 16px;
background: var(--tg-brand-gradient);
color: #fff; border: none; border-radius: 999px;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--tg-shadow-brand); }
/* ============== HERO ============== */
.hero {
position: relative;
min-height: 100vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 120px 24px 60px;
background: radial-gradient(ellipse at top, #fff9f3 0%, #fdefde 30%, #ffffff 80%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(250,198,151,0.45), transparent 35%),
radial-gradient(circle at 85% 80%, rgba(101,36,16,0.18), transparent 40%);
pointer-events: none;
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
font-weight: 600;
color: var(--tg-copper-600);
margin-bottom: 24px;
z-index: 2;
}
.hero h1 {
font-size: clamp(48px, 7.5vw, 104px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.95;
text-align: center;
color: var(--tg-fg-1);
max-width: 1100px;
z-index: 2;
}
.hero h1 .accent {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.hero-sub {
margin-top: 28px;
font-size: clamp(17px, 1.4vw, 22px);
color: var(--tg-fg-3);
max-width: 760px; text-align: center;
line-height: 1.5;
z-index: 2;
display: flex;
flex-direction: column;
gap: 18px;
}
.hero-sub-features {
font-size: clamp(14px, 1.05vw, 16px);
color: var(--tg-fg-4);
line-height: 1.55;
text-wrap: pretty;
}
.hero-sub-punch {
font-size: clamp(17px, 1.4vw, 22px);
color: var(--tg-fg-2);
font-weight: 500;
}
.hero-sub-punch strong {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
}
.hero-cta-row {
margin-top: 38px;
display: flex; gap: 14px;
z-index: 2;
}
/* Apple-style multi-device tagline */
.hero-tagline {
margin-top: 56px;
text-align: center;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.4em;
font-family: inherit;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
text-wrap: balance;
}
.hero-tagline-brand {
font-size: clamp(28px, 3.2vw, 44px);
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero-tagline-rest {
font-size: clamp(24px, 2.8vw, 38px);
color: var(--tg-fg-1);
font-weight: 800;
}
.btn-primary {
padding: 14px 28px;
background: var(--tg-brand-gradient);
color: #fff; border: none; border-radius: 999px;
font-size: 16px; font-weight: 600;
cursor: pointer;
box-shadow: var(--tg-shadow-brand);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(250,198,151,0.55); }
.btn-ghost {
padding: 14px 28px;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
color: var(--tg-copper-700);
border: 1px solid var(--tg-copper-300);
border-radius: 999px;
font-size: 16px; font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-ghost:hover { background: var(--tg-copper-100); }
.hero-meta {
margin-top: 22px;
font-size: 13px;
color: var(--tg-fg-4);
z-index: 2;
}
/* ============== HERO devices — uploaded mockup with screen overlays ============== */
.cal-header {
background: var(--tg-navy-gradient);
color: #fff;
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
font-size: 14px; font-weight: 600;
}
.cal-header-left { display: flex; align-items: center; gap: 12px; }
.cal-week-pill {
padding: 4px 12px;
background: rgba(255,255,255,0.15);
border-radius: 999px;
font-size: 12px;
}
.cal-today-btn {
background: var(--tg-warn-gradient);
color: #fff; border: none;
padding: 6px 14px; border-radius: 6px;
font-size: 12px; font-weight: 600;
cursor: pointer;
}
.cal-grid {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
background: #f8f9fc;
}
.cal-grid-header {
display: contents;
}
.cal-grid-header > div {
padding: 10px 8px;
background: #fff;
border-bottom: 1px solid var(--tg-border-1);
font-size: 12px; font-weight: 600;
color: var(--tg-fg-3);
text-align: center;
}
.cal-grid-header > div.is-today {
color: var(--tg-info-500);
background: linear-gradient(180deg, rgba(59,130,246,0.08), transparent);
}
.cal-grid-header > div.spacer { background: #fff; }
.cal-row {
display: contents;
}
.cal-time {
padding: 8px;
background: #fff;
border-bottom: 1px solid var(--tg-border-1);
font-size: 11px; color: var(--tg-fg-4);
text-align: right; padding-right: 10px;
font-variant-numeric: tabular-nums;
}
.cal-cell {
background: #fff;
border-bottom: 1px solid var(--tg-border-1);
border-left: 1px solid var(--tg-border-1);
min-height: 36px;
position: relative;
}
.cal-cell.worktime {
background: repeating-linear-gradient(45deg, #ecfdf5 0, #ecfdf5 6px, #d1fae5 6px, #d1fae5 12px);
}
.cal-cell.is-today { background: linear-gradient(180deg, rgba(59,130,246,0.05), rgba(59,130,246,0.02)); }
.cal-cell.is-today.worktime {
background: repeating-linear-gradient(45deg, #ecfdf5 0, #ecfdf5 6px, #d1fae5 6px, #d1fae5 12px), rgba(59,130,246,0.05);
}
.cal-tile {
position: absolute; left: 3px; right: 3px;
border-radius: 6px;
padding: 5px 7px;
font-size: 10.5px;
font-weight: 600;
color: #155724;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-left: 3px solid #28a745;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
opacity: 0; transform: scale(0.7) translateY(8px);
transition: opacity 0.5s var(--tg-ease-spring), transform 0.5s var(--tg-ease-spring);
pointer-events: none;
}
.cal-tile.pending {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border-left-color: #ffc107;
color: #856404;
}
.cal-tile.show {
opacity: 1;
transform: scale(1) translateY(0);
}
.cal-tile .tile-time {
display: inline-block;
background: var(--tg-brand-gradient);
color: #fff;
padding: 1px 5px;
border-radius: 4px;
font-size: 9px;
margin-right: 4px;
font-weight: 700;
}
/* ============== PATH PICKER (kétirányú: egyéni vs szalon) ============== */
.path-section {
position: relative;
padding: 140px 24px 160px;
background: linear-gradient(180deg, #ffffff 0%, #fff9f3 50%, #ffffff 100%);
overflow: hidden;
}
.path-head {
max-width: 1100px; margin: 0 auto 70px;
text-align: center;
}
.path-head .section-title { margin: 0 auto; }
.path-head .section-sub { margin: 24px auto 0; }
.path-toggle {
margin: 36px auto 0;
display: inline-flex;
background: #fff;
border: 1px solid var(--tg-border-2);
border-radius: 999px;
padding: 5px;
position: relative;
box-shadow: var(--tg-shadow-card-sm);
}
.path-toggle button {
position: relative;
z-index: 2;
background: transparent;
border: none;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
color: var(--tg-fg-3);
border-radius: 999px;
cursor: pointer;
transition: color 0.3s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: -0.005em;
}
.path-toggle button:hover { color: var(--tg-copper-700); }
.path-toggle button.active,
.path-toggle button.active:hover { color: #fff; }
.path-toggle button svg {
width: 16px; height: 16px;
flex-shrink: 0;
}
/* Segédszó a gombfelirat fölött (pl. ALKALMAZOTT / VÁLLALKOZÓ) – csak az aktív gombon látszik.
A gombok fix minimum magassága miatt a gombsor nem ugrál, amikor a segédszó megjelenik. */
.path-toggle button { min-height: 52px; }
.path-toggle .pt-cimke {
display: flex; flex-direction: column; align-items: flex-start;
line-height: 1.15;
}
.path-toggle .pt-seged {
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.path-toggle button.active .pt-seged {
max-height: 14px; opacity: 0.75;
margin-bottom: 1px;
}
@media (prefers-reduced-motion: reduce) {
.path-toggle .pt-seged { transition: none; }
}
.path-toggle .toggle-pill {
position: absolute;
top: 5px; bottom: 5px;
width: 0;
left: 0;
background: var(--tg-brand-gradient);
border-radius: 999px;
box-shadow: var(--tg-shadow-brand);
transition: transform 0.4s var(--tg-ease-spring), width 0.4s var(--tg-ease-spring);
z-index: 1;
pointer-events: none;
}
/* JS sets pill width + transform; keep static fallback rules out so they don't fight */
.path-toggle.path-toggle-3 button {
padding: 10px 16px;
font-size: 13px;
gap: 8px;
}
.path-toggle.path-toggle-3 button svg {
width: 14px; height: 14px;
}
.path-toggle.path-toggle-4 button svg {
width: 14px; height: 14px;
}
/* JS drives pill width + offset for any toggle count */
.path-stage {
max-width: 1240px; margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch;
}
.path-stage.path-stage-3 {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 1380px;
}
.path-stage.path-stage-4 {
grid-template-columns: none;
display: flex;
flex-wrap: nowrap;
gap: 28px;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 12.5% 32px;
margin-left: auto;
margin-right: auto;
scrollbar-width: thin;
scrollbar-color: rgba(101,36,16,0.25) transparent;
}
.path-stage.path-stage-4::-webkit-scrollbar { height: 8px; }
.path-stage.path-stage-4::-webkit-scrollbar-thumb {
background: rgba(101,36,16,0.20);
border-radius: 999px;
}
.path-stage.path-stage-4 .path-card {
flex: 0 0 75%;
min-width: 320px;
scroll-snap-align: center;
scroll-snap-align: center;
}
.path-card {
position: relative;
background: #fff;
border-radius: 30px;
border: 1.5px solid var(--tg-border-3);
padding: 44px 40px 40px;
box-shadow: var(--tg-shadow-card);
display: flex; flex-direction: column;
transition: transform 0.5s var(--tg-ease-standard),
border-color 0.5s,
box-shadow 0.5s,
opacity 0.5s;
overflow: hidden;
}
.path-card.dim {
opacity: 0.45;
transform: scale(0.97);
filter: saturate(0.7);
}
.path-card.featured {
border-color: var(--tg-copper-300);
box-shadow: 0 30px 70px -10px rgba(250,198,151,0.55), 0 8px 25px rgba(101,36,16,0.12);
transform: scale(1.015);
}
.path-card .path-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 8px;
background: var(--tg-copper-50);
border: 1px solid var(--tg-copper-200);
border-radius: 999px;
margin-bottom: 18px;
width: fit-content;
}
.path-card .path-badge .dot {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--tg-brand-gradient);
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(250,198,151,0.25);
}
.path-card .path-badge .label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--tg-copper-700);
}
.path-card .path-eyebrow {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 11px;
font-weight: 700;
color: var(--tg-copper-600);
margin-bottom: 8px;
}
.path-card h3 {
font-size: clamp(28px, 2.6vw, 36px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--tg-fg-1);
margin-bottom: 14px;
}
.path-card > p {
font-size: 16px;
color: var(--tg-fg-3);
line-height: 1.55;
margin-bottom: 26px;
}
.path-visual {
background: linear-gradient(135deg, #fff9f3, #fdefde);
border-radius: 14px;
padding: 18px;
margin-bottom: 24px;
border: 1px solid var(--tg-copper-200);
}
/* Alkalmazott visual — napi műszak / foglalások */
.alk-visual {
display: flex; flex-direction: column; gap: 12px;
}
.alk-day-card {
background: #fff;
border-radius: 14px;
border: 1.5px solid rgba(101,36,16,0.12);
box-shadow: var(--tg-shadow-card-sm);
padding: 16px 18px;
}
.alk-day-head {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(101,36,16,0.18);
margin-bottom: 10px;
}
.alk-day-name {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--tg-fg-2);
}
.alk-day-count {
font-size: 12px;
color: var(--tg-fg-4);
background: var(--tg-bg-2);
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.alk-slots {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.alk-slots li {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: var(--tg-bg-2);
font-size: 13px;
}
.alk-time {
font-family: var(--tg-font-mono);
font-weight: 700;
color: var(--tg-fg-1);
font-size: 13px;
}
.alk-name { color: var(--tg-fg-2); font-weight: 500; }
.alk-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
background: rgba(101,36,16,0.08);
color: var(--tg-fg-3);
}
.alk-tag-done { background: rgba(46, 125, 50, 0.10); color: #2e7d32; }
.alk-tag-now {
background: var(--tg-brand-gradient);
color: #fff;
box-shadow: 0 4px 10px rgba(217,119,87,0.30);
}
/* Átjárhatóság visual — karrier-utazás stages */
.atj-visual {
display: flex; flex-direction: column;
}
.atj-journey {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.atj-stage {
display: flex; align-items: flex-start; gap: 12px;
background: #fff;
border: 1.5px solid rgba(101,36,16,0.14);
border-radius: 12px;
padding: 12px 14px;
box-shadow: var(--tg-shadow-card-sm);
}
.atj-step {
flex: 0 0 auto;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--tg-bg-2);
color: var(--tg-fg-3);
font-weight: 800;
font-size: 13px;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid rgba(101,36,16,0.18);
}
.atj-stage-final {
border-color: var(--tg-copper-300);
background: linear-gradient(135deg, #fff9f3, #fdefde);
}
.atj-stage-final .atj-step {
background: var(--tg-brand-gradient);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(217,119,87,0.30);
}
.atj-stage-body { flex: 1; min-width: 0; }
.atj-stage-title {
font-size: 13px; font-weight: 700;
color: var(--tg-fg-1);
line-height: 1.3;
margin-bottom: 2px;
}
.atj-stage-desc {
font-size: 12px;
color: var(--tg-fg-3);
line-height: 1.4;
}
.atj-arrow {
list-style: none;
text-align: center;
color: var(--tg-copper-500);
font-size: 14px;
line-height: 1;
margin: 2px 0;
opacity: 0.7;
font-weight: 700;
}
/* Solo visual — saját foglalási link */
.solo-visual {
display: flex; flex-direction: column; gap: 12px;
}
.solo-link-card {
background: #fff;
border-radius: 12px;
padding: 14px 16px;
box-shadow: var(--tg-shadow-card-sm);
display: flex; align-items: center; gap: 12px;
border: 2px solid var(--tg-copper-300);
}
.solo-link-card .url {
flex: 1;
font-family: var(--tg-font-mono);
font-size: 13px;
color: var(--tg-fg-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.solo-link-card .url .you {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.solo-link-card .copy-btn {
background: var(--tg-brand-gradient);
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px; font-weight: 700;
font-family: inherit;
text-transform: uppercase; letter-spacing: 0.5px;
}
.solo-flow {
display: flex; align-items: center; gap: 10px; padding: 4px;
}
.solo-flow .node {
flex: 1;
background: #fff;
border-radius: 10px;
padding: 10px 8px;
text-align: center;
border: 1px solid var(--tg-border-1);
font-size: 11px;
color: var(--tg-fg-3);
font-weight: 600;
}
.solo-flow .node strong { display: block; color: var(--tg-fg-1); font-size: 12px; margin-bottom: 2px; font-weight: 700; }
.solo-flow .node.you {
border-color: var(--tg-copper-300);
background: linear-gradient(135deg, #fff9f3, #fdefde);
}
.solo-flow .arrow {
flex-shrink: 0;
color: var(--tg-copper-500);
font-size: 16px;
font-weight: 700;
line-height: 1;
}
/* Szalon visual — szalon ágazat */
.szalon-visual { padding: 16px; }
.szalon-tree {
display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative;
}
.szalon-owner {
background: #fff;
border-radius: 10px;
padding: 10px 16px;
box-shadow: var(--tg-shadow-card-sm);
border: 1.5px solid var(--tg-copper-300);
display: flex; align-items: center; gap: 10px;
min-width: 180px;
}
.szalon-owner .ownerav {
width: 30px; height: 30px;
background: var(--tg-brand-gradient);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
font-size: 11px; font-weight: 700;
position: relative;
}
.szalon-owner .ownerav::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid var(--tg-copper-300);
}
.szalon-owner-name { font-size: 12px; font-weight: 700; color: var(--tg-fg-1); }
.szalon-owner-role { font-size: 10px; color: var(--tg-copper-600); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.szalon-trunk {
width: 1.5px; height: 18px;
background: var(--tg-copper-300);
}
.szalon-branches {
display: flex; gap: 10px; align-items: flex-start; justify-content: center;
width: 100%;
position: relative;
}
.szalon-branches::before {
content: '';
position: absolute;
top: -8px; left: 18%; right: 18%;
height: 1.5px;
background: var(--tg-copper-300);
}
.szalon-member {
flex: 1;
background: #fff;
border-radius: 8px;
padding: 8px 4px;
text-align: center;
box-shadow: var(--tg-shadow-card-sm);
border: 1px solid var(--tg-border-3);
position: relative;
}
.szalon-member::before {
content: '';
position: absolute;
top: -8px; left: 50%;
width: 1.5px; height: 8px;
background: var(--tg-copper-300);
transform: translateX(-50%);
}
.szalon-member .av {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--tg-bg-cream);
color: var(--tg-copper-700);
margin: 0 auto 4px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
border: 1px solid var(--tg-copper-200);
}
.szalon-member-name { font-size: 11px; font-weight: 600; color: var(--tg-fg-2); }
.szalon-member-load { font-size: 9px; color: var(--tg-fg-4); margin-top: 1px; }
.szalon-stats-row {
display: flex; gap: 6px; margin-top: 12px;
padding: 8px;
background: rgba(255,255,255,0.7);
border-radius: 8px;
border: 1px solid var(--tg-border-1);
}
.szalon-stat {
flex: 1; text-align: center;
}
.szalon-stat .v {
font-size: 14px; font-weight: 800;
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
}
.szalon-stat .l { font-size: 9px; color: var(--tg-fg-4); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 1px; }
.path-feats {
list-style: none;
display: flex; flex-direction: column; gap: 12px;
margin-bottom: 28px;
flex: 1;
}
.path-feats li {
font-size: 14px;
color: var(--tg-fg-3);
display: flex; gap: 12px; align-items: flex-start;
line-height: 1.5;
}
.path-feats li::before {
content: '';
flex-shrink: 0;
margin-top: 4px;
width: 18px; height: 18px;
background: var(--tg-copper-100);
border-radius: 50%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 11px;
background-repeat: no-repeat;
background-position: center;
}
.path-feats li strong { color: var(--tg-fg-1); font-weight: 700; }
.path-cta {
padding: 14px;
border-radius: 999px;
font-size: 15px; font-weight: 600;
cursor: pointer;
border: none;
transition: transform 0.2s, box-shadow 0.2s;
width: 100%;
background: var(--tg-brand-gradient);
color: #fff;
box-shadow: var(--tg-shadow-brand);
font-family: inherit;
}
.path-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(250,198,151,0.55); }
.path-cta.outline {
background: #fff;
color: var(--tg-copper-700);
border: 1.5px solid var(--tg-copper-300);
box-shadow: none;
}
.path-cta.outline:hover { background: var(--tg-copper-50); }
@media (max-width: 1280px) {
.path-stage.path-stage-4 .path-card { flex: 0 0 80%; }
}
@media (max-width: 1100px) {
.path-stage.path-stage-3 { grid-template-columns: 1fr; gap: 24px; }
.path-stage.path-stage-4 .path-card { flex: 0 0 85%; min-width: 260px; }
}
@media (max-width: 900px) {
.path-stage { grid-template-columns: 1fr; gap: 24px; }
.path-card.dim { opacity: 1; transform: none; filter: none; }
.path-card.featured { transform: none; }
}
/* ============== SECTION SCAFFOLD ============== */
.section {
position: relative;
padding: 140px 24px;
}
.section-inner {
max-width: 1240px;
margin: 0 auto;
}
.section-eyebrow {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
font-weight: 700;
color: var(--tg-copper-600);
margin-bottom: 18px;
}
.section-title {
font-size: clamp(40px, 5vw, 72px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.02;
color: var(--tg-fg-1);
max-width: 900px;
}
.section-title .accent {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-sub {
margin-top: 24px;
font-size: clamp(18px, 1.4vw, 22px);
color: var(--tg-fg-3);
max-width: 680px;
line-height: 1.5;
}
/* ============== PINNED BOOKING ============== */
.pinned-section {
height: 350vh;
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}
.pinned-stage {
position: sticky; top: 0;
height: 100vh;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.pinned-content {
width: min(1300px, 95%);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
}
.pinned-text {
position: relative;
height: 360px;
}
.pinned-step {
position: absolute; inset: 0;
opacity: 0; transform: translateY(30px);
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex; flex-direction: column; justify-content: center;
}
.pinned-step.active { opacity: 1; transform: translateY(0); }
.pinned-step h2 {
font-size: clamp(36px, 4.4vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--tg-fg-1);
}
.pinned-step p {
margin-top: 20px;
font-size: 19px; color: var(--tg-fg-3);
line-height: 1.55;
max-width: 460px;
}
.pinned-step-num {
display: inline-block;
width: 38px; height: 38px;
background: var(--tg-brand-gradient);
color: #fff;
border-radius: 999px;
text-align: center; line-height: 38px;
font-weight: 700;
margin-bottom: 18px;
box-shadow: var(--tg-shadow-brand);
}
.step-progress {
margin-top: 30px;
display: flex; gap: 8px;
}
.step-progress span {
height: 3px; flex: 1;
background: var(--tg-border-1);
border-radius: 999px; overflow: hidden;
position: relative;
}
.step-progress span::after {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 0;
background: var(--tg-brand-gradient);
transition: width 0.4s ease;
}
.step-progress span.active::after { width: 100%; }
.step-progress span.complete::after { width: 100%; }
.laptop-mockup {
position: relative;
aspect-ratio: 16/10;
background: #1a1a1a;
border-radius: 18px 18px 4px 4px;
padding: 18px 18px 22px;
box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.laptop-mockup::after {
content: '';
position: absolute;
bottom: -14px; left: -8%; right: -8%;
height: 14px;
background: linear-gradient(180deg, #2a2a2a, #0d0d0d);
border-radius: 0 0 14px 14px;
}
.laptop-mockup::before {
content: '';
position: absolute;
bottom: -14px; left: 45%; right: 45%;
height: 14px;
background: #444;
border-radius: 0 0 8px 8px;
z-index: 2;
}
.laptop-screen {
width: 100%; height: 100%;
background: #fff;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.laptop-screen-content {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.laptop-screen-content.active { opacity: 1; }
/* booking step preview surfaces */
.bp-cal {
width: 100%; height: 100%;
display: flex; flex-direction: column;
}
.bp-cal-head {
background: var(--tg-navy-gradient);
color: #fff;
padding: 10px 16px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px;
}
.bp-cal-grid {
flex: 1;
display: grid;
grid-template-columns: 40px repeat(5, 1fr);
grid-template-rows: 22px repeat(8, 1fr);
background: #f8f9fc;
font-size: 10px;
}
.bp-cal-grid > div {
background: #fff;
border-right: 1px solid #f1f3f5;
border-bottom: 1px solid #f1f3f5;
padding: 2px 4px;
color: var(--tg-fg-4);
}
.bp-cal-grid .day-h { font-weight: 600; color: var(--tg-fg-2); text-align: center; }
.bp-cal-grid .time-h { text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.bp-cal-grid .work { background: repeating-linear-gradient(45deg, #ecfdf5 0, #ecfdf5 5px, #d1fae5 5px, #d1fae5 10px); }
.bp-tile {
grid-column: span 1;
grid-row: span 2;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-left: 3px solid #28a745;
border-radius: 4px;
padding: 4px 6px !important;
margin: 1px;
font-size: 9px;
font-weight: 600;
color: #155724 !important;
overflow: hidden;
}
.bp-tile.pending {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border-left-color: #ffc107;
color: #856404 !important;
}
.bp-tile .tt {
display: inline-block;
background: var(--tg-brand-gradient);
color: #fff;
padding: 0 4px;
border-radius: 3px;
margin-right: 3px;
}
.bp-modal {
width: 100%; height: 100%;
background: rgba(0,0,0,0.4);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.bp-modal-card {
width: 80%;
background: #fff;
border-radius: 12px;
padding: 18px;
box-shadow: var(--tg-shadow-modal);
}
.bp-modal-title { font-size: 14px; font-weight: 700; color: var(--tg-fg-1); margin-bottom: 12px; }
.bp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bp-field label { font-size: 10px; color: var(--tg-fg-4); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.bp-field input, .bp-field select {
padding: 7px 10px; font-size: 11px;
border: 1.5px solid var(--tg-border-1);
border-radius: 6px; background: #fff;
font-family: inherit;
}
.bp-field input:focus { outline: none; border-color: var(--tg-copper-300); }
.bp-modal-actions {
display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px;
}
.bp-modal-actions button {
padding: 7px 14px; font-size: 11px; font-weight: 600;
border: none; border-radius: 6px; cursor: pointer;
}
.bp-cancel { background: #e9ecef; color: var(--tg-fg-3); }
.bp-save { background: var(--tg-success-gradient); color: #fff; }
.bp-toast {
position: absolute;
top: 20px; right: 20px;
background: var(--tg-success-gradient);
color: #fff;
padding: 10px 16px;
border-radius: 8px;
font-size: 12px; font-weight: 600;
box-shadow: var(--tg-shadow-toast);
display: flex; align-items: center; gap: 8px;
transform: translateX(120%);
transition: transform 0.5s var(--tg-ease-spring);
}
.bp-toast.show { transform: translateX(0); }
/* ============== HORIZONTAL SCROLL FEATURES ============== */
.h-scroll-section {
height: 500vh;
position: relative;
background: var(--tg-navy-gradient);
}
.h-scroll-stage {
position: sticky; top: 0;
height: 100vh;
overflow: hidden;
display: flex; flex-direction: column;
justify-content: center;
}
.h-scroll-head {
padding: 0 60px 30px;
color: #fff;
}
.h-scroll-head .section-eyebrow { color: var(--tg-copper-300); }
.h-scroll-head .section-title { color: #fff; }
.h-scroll-track {
display: flex; gap: 28px;
padding: 0 60px;
will-change: transform;
}
.feature-card {
flex: 0 0 460px;
height: 540px;
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.4);
display: flex; flex-direction: column;
position: relative;
}
.feature-card-visual {
height: 320px;
background: linear-gradient(135deg, #fff9f3, #fdefde);
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.feature-card-body {
padding: 28px 30px;
flex: 1;
display: flex; flex-direction: column; gap: 10px;
}
.feature-card-eyebrow {
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 11px;
font-weight: 700;
color: var(--tg-copper-600);
}
.feature-card h3 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tg-fg-1);
line-height: 1.1;
}
.feature-card p {
font-size: 15px; color: var(--tg-fg-3); line-height: 1.5;
}
/* feature visuals */
.fv-guests {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.guest-chip {
background: #fff;
border-radius: 14px;
padding: 14px 10px;
text-align: center;
box-shadow: var(--tg-shadow-card-sm);
border: 1px solid var(--tg-border-3);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.guest-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--tg-brand-gradient);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.guest-name { font-size: 11px; font-weight: 600; color: var(--tg-fg-2); }
.guest-pet { font-size: 10px; color: var(--tg-fg-4); }
.guest-status {
font-size: 9px; padding: 2px 6px;
border-radius: 999px;
background: var(--tg-success-50); color: var(--tg-success-700);
font-weight: 600;
}
.fv-services {
display: flex; flex-direction: column; gap: 10px; width: 100%;
}
.svc-row {
background: #fff; border-radius: 12px;
border: 2px solid var(--tg-copper-300);
padding: 12px 14px;
display: flex; align-items: center; justify-content: space-between;
box-shadow: var(--tg-shadow-card-sm);
}
.svc-row .svc-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--tg-brand-gradient);
margin-right: 10px;
flex-shrink: 0;
}
.svc-name { font-size: 13px; font-weight: 600; color: var(--tg-fg-2); }
.svc-meta { font-size: 11px; color: var(--tg-fg-4); margin-top: 2px; }
.svc-price { font-size: 14px; font-weight: 700; color: var(--tg-copper-700); }
.fv-finance {
width: 100%;
display: flex; flex-direction: column; gap: 14px;
}
.fin-stat {
background: #fff; border-radius: 14px;
padding: 14px 18px;
box-shadow: var(--tg-shadow-card-sm);
border: 1px solid var(--tg-border-3);
display: flex; justify-content: space-between; align-items: center;
}
.fin-label { font-size: 11px; color: var(--tg-fg-4); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.fin-val { font-size: 22px; font-weight: 800; color: var(--tg-copper-700); font-variant-numeric: tabular-nums; margin-top: 4px; }
.fin-bar {
width: 80px; height: 6px;
background: var(--tg-border-1); border-radius: 999px; overflow: hidden;
}
.fin-bar > span {
display: block; height: 100%;
background: var(--tg-brand-gradient);
border-radius: 999px;
}
.fv-team {
width: 100%;
background: #fff;
border-radius: 14px;
padding: 14px;
box-shadow: var(--tg-shadow-card-sm);
border: 1px solid var(--tg-border-3);
}
.team-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 6px;
border-bottom: 1px solid var(--tg-border-1);
}
.team-row:last-child { border-bottom: none; }
.team-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--tg-brand-gradient);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px;
box-shadow: var(--tg-shadow-brand);
flex-shrink: 0;
position: relative;
}
.team-avatar.owner::after {
content: ''; position: absolute; top: -2px; right: -2px;
width: 14px; height: 14px;
background: #f59e0b url('data:image/svg+xml;utf8,') center/8px no-repeat;
border-radius: 50%;
}
.team-info { flex: 1; }
.team-name { font-size: 13px; font-weight: 600; color: var(--tg-fg-2); }
.team-role { font-size: 11px; color: var(--tg-fg-4); }
.team-cap {
width: 60px; height: 5px; background: var(--tg-border-1); border-radius: 999px; overflow: hidden;
}
.team-cap > span { display: block; height: 100%; background: var(--tg-brand-gradient); border-radius: 999px; }
.fv-photo {
width: 100%; height: 100%;
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
position: relative;
}
.photo-half {
border-radius: 12px;
overflow: hidden;
position: relative;
border: 2px solid #fff;
box-shadow: var(--tg-shadow-card-sm);
display: flex; align-items: flex-end; justify-content: flex-start;
padding: 10px;
}
.photo-half.before { background: linear-gradient(135deg, #c0c0c0, #6c757d); }
.photo-half.after { background: linear-gradient(135deg, var(--tg-copper-300), var(--tg-copper-700)); }
.photo-label {
background: rgba(255,255,255,0.95);
color: var(--tg-fg-2);
font-size: 10px; font-weight: 700;
padding: 3px 9px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.6px;
}
.photo-half.after .photo-label { color: var(--tg-copper-700); }
.h-scroll-progress {
position: absolute;
bottom: 30px; left: 60px; right: 60px;
height: 3px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
overflow: hidden;
}
.h-scroll-progress > span {
display: block; height: 100%; width: 0;
background: var(--tg-brand-gradient);
}
/* ============== STATS ============== */
.stats-section {
background: linear-gradient(180deg, #f8f9fc 0%, #fff9f3 100%);
padding: 160px 24px;
position: relative;
overflow: hidden;
}
.stats-grid {
max-width: 1200px; margin: 60px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.stat-card {
text-align: center;
padding: 30px 20px;
}
.stat-num {
font-size: clamp(56px, 6vw, 88px);
font-weight: 800;
letter-spacing: -0.04em;
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat-label {
margin-top: 12px;
font-size: 15px; color: var(--tg-fg-3);
font-weight: 500;
}
.stats-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
pointer-events: none;
}
.stats-bg-orb.a { width: 500px; height: 500px; top: -100px; left: -150px; background: radial-gradient(circle, var(--tg-copper-300), transparent); }
.stats-bg-orb.b { width: 400px; height: 400px; bottom: -100px; right: -100px; background: radial-gradient(circle, var(--tg-copper-500), transparent); opacity: 0.3; }
/* ============== PRICING ============== */
.pricing-section {
padding: 160px 24px;
background: #ffffff;
position: relative;
}
.pricing-head { text-align: center; }
.pricing-head .section-title { margin: 0 auto; }
.pricing-head .section-sub { margin: 24px auto 0; }
.pricing-grid {
max-width: 1200px; margin: 70px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.price-card {
background: #fff;
border-radius: 30px;
padding: 40px 32px;
border: 1px solid var(--tg-border-3);
box-shadow: var(--tg-shadow-card);
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
display: flex; flex-direction: column;
}
.price-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.price-card.featured {
background: linear-gradient(180deg, #fff9f3 0%, #ffffff 60%);
border-color: var(--tg-copper-300);
box-shadow: 0 20px 50px rgba(250,198,151,0.35);
}
.price-card.featured::before {
content: none;
display: none;
}
.price-name {
font-size: 14px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--tg-copper-600);
margin-bottom: 6px;
}
.price-tag {
display: flex; align-items: baseline; gap: 6px;
margin: 14px 0 4px;
}
.price-amt {
font-size: 56px; font-weight: 800;
letter-spacing: -0.03em;
color: var(--tg-fg-1);
font-variant-numeric: tabular-nums;
}
.price-cur { font-size: 18px; color: var(--tg-fg-3); font-weight: 600; }
.price-period { font-size: 14px; color: var(--tg-fg-4); margin-bottom: 22px; }
.price-rotator {
position: relative;
overflow: hidden;
height: 100px;
margin: 14px 0 22px;
}
.price-rotator-track {
display: flex; flex-direction: column;
animation: priceRotate 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.price-rot-row {
height: 100px;
flex-shrink: 0;
display: flex; flex-direction: column; align-items: flex-start;
}
.price-rot-row .price-tag { margin: 0; }
.price-rot-row .price-period { margin: 0; line-height: 1.5; }
@keyframes priceRotate {
0%, 42% { transform: translateY(0); }
50%, 92% { transform: translateY(-100px); }
100% { transform: translateY(-200px); }
}
@media (prefers-reduced-motion: reduce) {
.price-rotator-track { animation: none; }
}
.price-desc {
font-size: 14px; color: var(--tg-fg-3); line-height: 1.5;
padding-bottom: 24px;
border-bottom: 1px solid var(--tg-border-1);
margin-bottom: 24px;
}
.price-features {
list-style: none;
flex: 1;
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 28px;
}
.price-features li {
font-size: 13.5px; color: var(--tg-fg-3);
display: flex; gap: 10px; align-items: flex-start;
line-height: 1.4;
}
.price-features li::before {
content: '';
flex-shrink: 0;
margin-top: 1px;
width: 16px; height: 16px;
background-color: var(--tg-copper-100);
border-radius: 50%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
}
/* kikapcsolt funkció — szürke X, halvány szöveg */
.price-features li.off { color: var(--tg-fg-5); }
.price-features li.off::before {
background-color: #eceef0;
background-image: url('data:image/svg+xml;utf8,');
background-size: 9px;
}
/* csomag kapacitás fejléc-sor */
.price-features li.cap {
font-weight: 700; color: var(--tg-fg-1);
padding-bottom: 14px; margin-bottom: 2px;
border-bottom: 1px solid var(--tg-border-1);
font-size: 14px;
}
.price-features li.cap b { color: var(--tg-copper-700); }
.price-features li.cap::before {
background-color: var(--tg-copper-50);
background-image: url('data:image/svg+xml;utf8,');
background-size: 11px;
}
.price-cta {
padding: 14px;
border-radius: 999px;
font-size: 15px; font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
width: 100%;
text-align: center;
}
.price-cta.primary {
background: var(--tg-brand-gradient);
color: #fff;
box-shadow: var(--tg-shadow-brand);
}
.price-cta.primary:hover { transform: translateY(-2px); }
.price-cta.outline {
background: #fff;
color: var(--tg-copper-700);
border: 1.5px solid var(--tg-copper-300);
}
.price-cta.outline:hover { background: var(--tg-copper-50); }
/* ============== FINAL CTA ============== */
.final-cta {
position: relative;
padding: 180px 24px;
background: var(--tg-brand-gradient);
color: #fff;
text-align: center;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.25), transparent 40%),
radial-gradient(circle at 70% 50%, rgba(255,255,255,0.15), transparent 50%);
animation: ctaShimmer 6s ease-in-out infinite alternate;
}
@keyframes ctaShimmer {
0% { transform: translate(0, 0); }
100% { transform: translate(-3%, 2%); }
}
.final-cta-content { position: relative; z-index: 1; }
.final-cta h2 {
font-size: clamp(48px, 6vw, 92px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.0;
max-width: 1100px; margin: 0 auto;
}
.final-cta p {
margin-top: 26px;
font-size: 20px; max-width: 620px; margin-left: auto; margin-right: auto;
opacity: 0.92;
line-height: 1.5;
}
.final-cta-btns {
margin-top: 40px;
display: flex; gap: 14px; justify-content: center;
}
.final-cta-btn {
padding: 16px 32px;
background: #fff;
color: var(--tg-copper-700);
border: none; border-radius: 999px;
font-size: 16px; font-weight: 700;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.final-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }
.final-cta-btn.ghost {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
}
.final-cta-btn.ghost:hover { background: rgba(255,255,255,0.1); }
/* ============== FOOTER ============== */
.footer {
background: #1a2d3d;
color: rgba(255,255,255,0.7);
padding: 80px 24px 40px;
}
.footer-inner {
max-width: 1240px; margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 50px;
}
.footer-brand img { height: 34px; margin-bottom: 18px; filter: brightness(1.1); }
.footer-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer-links {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.footer-links a {
color: rgba(255,255,255,0.82);
text-decoration: none;
font-size: 14px; font-weight: 500;
padding: 9px 18px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-links a:hover {
color: #fff;
border-color: var(--tg-copper-300);
background: rgba(255,255,255,0.04);
}
.footer-bottom {
max-width: 1240px; margin: 56px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 13px; color: rgba(255,255,255,0.55);
}
/* ============== HERO INSIGHT BAND ============== */
.insight-band {
max-width: 1080px; margin: 0 auto;
padding: 8px 24px 96px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.insight-card {
background: #fff;
border: 1px solid var(--tg-border-1);
border-radius: 22px;
padding: 34px 30px;
text-align: center;
box-shadow: var(--tg-shadow-card-sm);
}
.insight-num {
font-size: clamp(34px, 4vw, 48px);
font-weight: 800; letter-spacing: -0.02em; line-height: 1;
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
margin-bottom: 12px;
}
.insight-card p { font-size: 14.5px; color: var(--tg-fg-3); line-height: 1.55; }
.insight-card p b { color: var(--tg-fg-1); font-weight: 700; }
/* ============== HOW TO START — 3 STEPS ============== */
.start-section { padding: 100px 24px; background: var(--tg-bg-cream); }
.start-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.start-head .section-title { margin: 0 auto; }
.start-head .section-sub { margin: 18px auto 0; color: var(--tg-fg-3); font-size: clamp(16px,1.2vw,18px); }
.start-grid {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.start-step {
position: relative;
background: #fff;
border: 1px solid var(--tg-border-1);
border-radius: 24px;
padding: 38px 32px 34px;
box-shadow: var(--tg-shadow-card-sm);
}
.start-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
border-radius: 14px;
background: var(--tg-brand-gradient);
color: #fff;
font-family: var(--tg-font-mono); font-size: 16px; font-weight: 700;
box-shadow: var(--tg-shadow-brand);
margin-bottom: 20px;
}
.start-step h3 {
font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
color: var(--tg-fg-1); margin-bottom: 10px;
}
.start-step p { font-size: 14.5px; color: var(--tg-fg-3); line-height: 1.55; }
/* ============== FAQ ============== */
.faq-section { padding: 100px 24px; }
.faq-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.faq-head .section-title { margin: 0 auto; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
background: #fff;
border: 1px solid var(--tg-border-1);
border-radius: 18px;
box-shadow: var(--tg-shadow-card-sm);
overflow: hidden;
}
.faq-item summary {
list-style: none; cursor: pointer;
padding: 22px 26px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-size: 16.5px; font-weight: 600; color: var(--tg-fg-1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: ''; flex-shrink: 0;
width: 22px; height: 22px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain; background-repeat: no-repeat; background-position: center;
transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item .faq-body {
padding: 0 26px 24px;
font-size: 15px; color: var(--tg-fg-3); line-height: 1.6; max-width: 660px;
}
/* ============== TRUST BAR ============== */
.trust-bar { background: var(--tg-bg-cream); padding: 56px 24px; border-top: 1px solid var(--tg-border-1); }
.trust-inner {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.trust-ico {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
background: var(--tg-copper-50); border: 1px solid var(--tg-copper-200);
display: flex; align-items: center; justify-content: center;
}
.trust-ico svg { width: 22px; height: 22px; stroke: var(--tg-copper-700); }
.trust-item span { font-size: 14.5px; font-weight: 600; color: var(--tg-fg-2); line-height: 1.3; }
@media (max-width: 900px) {
.insight-band, .start-grid { grid-template-columns: 1fr; }
.trust-inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
/* ============== UTILITY: reveal-on-scroll ============== */
/* Felbukkanás görgetéskor (Apple-stílusú scroll reveal) – a JS teszi rá a .felbukkan osztályt.
Önálló `translate` tulajdonság + animáció (nem transition), így nem írja felül az elemek
saját transform/transition szabályait (pl. kártyák hover-emelése). */
.felbukkan:not(.fb-lathato) { opacity: 0; translate: 0 30px; }
.felbukkan.fb-lathato {
animation: felbukkan 0.9s cubic-bezier(0.45, 0, 0.2, 1) var(--fb-kesleltetes, 0ms) backwards;
}
@keyframes felbukkan {
from { opacity: 0; translate: 0 30px; }
}
@media (max-width: 900px) {
.nav { padding: 12px 20px; }
.nav-links { display: none; }
.pinned-content { grid-template-columns: 1fr; gap: 30px; }
.pinned-text { height: 240px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; }
.feature-card { flex: 0 0 320px; height: 480px; }
}
/* ============================================================================
ANIMATED INTRO HERO
Phase 1 (0–2.6s): paw prints walk left → right
Phase 2 (2.8–5.4s): "TrimmGO / Kutyakozmetikai Menedzser" appears, fades
Phase 3 (5.6s–∞): pitch line settles in
============================================================================ */
.intro-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 640px;
overflow: hidden;
background: radial-gradient(ellipse at 30% 50%, #fff9f3 0%, #fdefde 35%, #ffffff 90%);
display: flex; align-items: center; justify-content: center;
isolation: isolate;
}
.intro-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 12% 50%, rgba(250,198,151,0.55), transparent 38%),
radial-gradient(circle at 88% 55%, rgba(101,36,16,0.10), transparent 42%);
pointer-events: none;
z-index: 0;
}
/* ---- PAW PRINTS ----
14 prints walk left → right in 7 pairs (one left foot + one right foot).
Each pair appears together, lingers, then fades out before the next pair.
Pair stride = 0.5s, pair duration = 0.9s → walk completes in 3.4s, then a
short tail-off (0.4s) before the brand text comes in.
Paws are rotated +90° so they "point" to the right (direction of travel).
*/
.intro-paws { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.paw {
position: absolute;
width: 46px; height: 46px;
fill: #652410;
opacity: 0;
filter: drop-shadow(0 2px 6px rgba(101,36,16,0.18));
transform-origin: 50% 50%;
/* base rotation: face right (+90°) — per-paw .paw-N tweaks the wiggle on top */
}
/* 7 pairs, evenly spaced from ~7% to ~93% across the viewport.
Each pair = "back paw" (above) + "front paw" (below), small horizontal
stagger to feel like a stride. Both members of a pair share the same
animation-delay so they appear together. */
/* Pair 1 — delay 0.0s */
.paw-1 { left: 7%; top: calc(50% - 36px); animation: pawStep 0.7s ease-out 0.0s forwards; --r: 78deg; }
.paw-2 { left: 11%; top: calc(50% + 14px); animation: pawStep 0.7s ease-out 0.0s forwards; --r: 100deg; }
/* Pair 2 — delay 0.35s */
.paw-3 { left: 20%; top: calc(50% - 38px); animation: pawStep 0.7s ease-out 0.35s forwards; --r: 82deg; }
.paw-4 { left: 24%; top: calc(50% + 12px); animation: pawStep 0.7s ease-out 0.35s forwards; --r: 96deg; }
/* Pair 3 — delay 0.7s */
.paw-5 { left: 33%; top: calc(50% - 34px); animation: pawStep 0.7s ease-out 0.7s forwards; --r: 86deg; }
.paw-6 { left: 37%; top: calc(50% + 16px); animation: pawStep 0.7s ease-out 0.7s forwards; --r: 99deg; }
/* Pair 4 — delay 1.05s */
.paw-7 { left: 46%; top: calc(50% - 36px); animation: pawStep 0.7s ease-out 1.05s forwards; --r: 84deg; }
.paw-8 { left: 50%; top: calc(50% + 14px); animation: pawStep 0.7s ease-out 1.05s forwards; --r: 97deg; }
/* Pair 5 — delay 1.4s */
.paw-9 { left: 59%; top: calc(50% - 38px); animation: pawStep 0.7s ease-out 1.4s forwards; --r: 81deg; }
.paw-10 { left: 63%; top: calc(50% + 12px); animation: pawStep 0.7s ease-out 1.4s forwards; --r: 95deg; }
/* Pair 6 — delay 1.75s */
.paw-11 { left: 72%; top: calc(50% - 34px); animation: pawStep 0.7s ease-out 1.75s forwards; --r: 83deg; }
.paw-12 { left: 76%; top: calc(50% + 16px); animation: pawStep 0.7s ease-out 1.75s forwards; --r: 98deg; }
/* Pair 7 — delay 2.1s */
.paw-13 { left: 85%; top: calc(50% - 36px); animation: pawStep 0.7s ease-out 2.1s forwards; --r: 85deg; }
.paw-14 { left: 89%; top: calc(50% + 14px); animation: pawStep 0.7s ease-out 2.1s forwards; --r: 96deg; }
@keyframes pawStep {
0% { opacity: 0; transform: scale(0.55) rotate(var(--r, 90deg)); }
25% { opacity: 1; transform: scale(1) rotate(var(--r, 90deg)); }
65% { opacity: 0.85; transform: scale(1) rotate(var(--r, 90deg)); }
100% { opacity: 0; transform: scale(0.95) rotate(var(--r, 90deg)); }
}
/* ---- TEXT PHASES ---- */
.intro-text {
position: relative;
z-index: 2;
text-align: center;
opacity: 0;
pointer-events: none;
padding: 0 24px;
max-width: 1100px;
}
/* Phase 2: brand reveal — emerges from background, fades */
.intro-text-1 {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0.86);
animation: brandReveal 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) 2.9s forwards;
}
.intro-brand {
font-size: clamp(72px, 11vw, 160px);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.92;
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.intro-logo {
display: block;
margin: 0 auto;
width: clamp(280px, 44vw, 640px);
height: auto;
filter: drop-shadow(0 12px 32px rgba(101, 36, 16, 0.18));
}
.intro-tag {
margin-top: 14px;
font-size: clamp(18px, 1.8vw, 26px);
font-weight: 500;
color: var(--tg-fg-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
@keyframes brandReveal {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); filter: blur(14px); }
25% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
75% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); filter: blur(0); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); filter: blur(8px); }
}
/* Phase 3: pitch — two snitts, appear sequentially */
.intro-text-2 {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 100%;
opacity: 1;
animation: pitchContainerIn 0.01s linear 5.0s forwards;
visibility: hidden;
}
@keyframes pitchContainerIn { to { visibility: visible; } }
.intro-pitch-line {
font-size: clamp(28px, 3.6vw, 60px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: #1a202c;
text-wrap: balance;
opacity: 0;
white-space: nowrap;
}
.intro-pitch-2 {
white-space: nowrap;
}
.intro-pitch-1 {
animation: pitchBeat 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 5.0s forwards;
}
.intro-pitch-2 {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) translateY(20px);
width: 100%;
animation: pitchIn 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 6.4s forwards;
}
.pitch-grad {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
}
.pitch-black { color: #1a202c; }
/* ---- WORD ROTATOR (typewriter) ----
- Container width locked to "kisállat" (longest word) via invisible sizer,
so "kozmetikusoknak" never jiggles as letters are typed/erased.
- Word is right-aligned: visible letters grow leftward from the caret;
gap between word and "kozmetikusoknak" stays constant.
- JS in #pitch-typewriter-script drives the loop. */
.pitch-rotator {
position: relative;
display: inline-block;
vertical-align: bottom;
text-align: right;
height: 1.1em;
line-height: 1.1em;
}
.pitch-rotator-sizer {
visibility: hidden;
display: inline-block;
pointer-events: none;
}
.pitch-rotator-text {
position: absolute;
inset: 0;
text-align: right;
color: #1a202c;
line-height: 1.1em;
}
.pitch-rotator-caret {
display: inline-block;
width: 0.07em;
height: 0.92em;
background: currentColor;
margin-left: 0.06em;
vertical-align: -0.08em;
border-radius: 1px;
/* caret only blinks once typewriter is armed (.is-armed is added by JS) */
opacity: 0;
}
.pitch-rotator.is-armed .pitch-rotator-caret {
animation: pitchCaretBlink 1s steps(2, end) infinite;
}
@keyframes pitchCaretBlink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* Two-row pitch-2 layout */
.pitch-row { display: block; text-align: center; }
.pitch-row-1 { margin-bottom: 0.15em; }
@keyframes pitchBeat {
0% { opacity: 0; transform: translateY(20px); }
18% { opacity: 1; transform: translateY(0); }
78% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes pitchIn {
0% { opacity: 0; transform: translate(-50%, -50%) translateY(20px); }
100% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
/* Scroll cue — appears with the pitch */
.intro-scroll-cue {
position: absolute;
bottom: 36px; left: 50%;
transform-origin: center bottom;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--tg-fg-4);
opacity: 0;
animation: cueZoomIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 10.0s forwards, cueBounce 1.8s ease-in-out 11.3s infinite;
z-index: 2;
}
/* Zooms out toward its resting spot: large + faint + blurred → small + sharp */
@keyframes cueZoomIn {
0% { opacity: 0; transform: translateX(-50%) scale(3.4); filter: blur(6px); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0); }
}
@keyframes cueBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* Reduce motion: skip the choreography, just show pitch */
@media (prefers-reduced-motion: reduce) {
.paw, .intro-text-1 { display: none; }
.intro-text-2 { visibility: visible; animation: none; }
.intro-pitch-1 { animation: none; opacity: 1; }
.intro-pitch-2 { animation: none; opacity: 1; transform: translate(-50%, -50%); }
.intro-scroll-cue { opacity: 1; animation: none; }
}
/* On smaller screens shrink paw size + spacing already handled by % */
@media (max-width: 720px) {
.paw { width: 34px; height: 34px; }
.intro-tag { font-size: 14px; }
}
/* ---- Adjust the OLD hero so it's no longer the first viewport ---- */
.hero {
min-height: auto !important;
padding-top: 80px !important;
padding-bottom: 60px !important;
}
/* ---- HERO H1 WORD ROTATOR ---- */
.hero-rotator {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
height: 0.95em;
line-height: 0.95;
text-align: left;
}
.hero-rotator-sizer {
visibility: hidden;
display: inline-block;
pointer-events: none;
height: 0;
overflow: hidden;
}
.hero-rotator-track {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
animation: heroRotateWords 9s cubic-bezier(0.65, 0, 0.35, 1) 1.5s infinite;
}
.hero-rotator-word {
display: block;
height: 0.95em;
line-height: 0.95;
white-space: nowrap;
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@keyframes heroRotateWords {
0%, 12% { transform: translateY(0); } /* szárítasz */
16%, 28% { transform: translateY(-0.95em); } /* nyírsz */
32%, 44% { transform: translateY(-1.9em); } /* fürdetsz */
48%, 60% { transform: translateY(-2.85em); } /* trimmelsz */
64%, 76% { transform: translateY(-3.8em); } /* ollózol */
80%, 92% { transform: translateY(-4.75em); } /* fésülsz */
96%, 100% { transform: translateY(-5.7em); } /* szárítasz (loop) */
}
/* ============================================================================
PAPER CALENDAR INTERLUDE
"Papír alapú naptárat használsz?" — title appears in 3 beats, last word
"hátrányai" pulses in with a strikethrough/scratch effect after a pause.
============================================================================ */
.paper-section {
position: relative;
padding: 140px 24px;
background: linear-gradient(180deg, #faf6ef 0%, #f4ebd9 100%);
overflow: hidden;
isolation: isolate;
}
.paper-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Real weekly-calendar look: 7 day columns + horizontal hour rows + header band */
.paper-calendar-bg {
position: absolute;
inset: 40px 24px;
border-radius: 6px;
background: #fffaf0;
box-shadow:
0 1px 0 rgba(101,36,16,0.10) inset,
0 8px 24px -8px rgba(101,36,16,0.20);
/* horizontal hour lines (every 56px) + vertical day columns (7 equal cols) */
background-image:
/* horizontal hour lines */
repeating-linear-gradient(
180deg,
transparent 0px, transparent 55px,
rgba(101,36,16,0.18) 55px, rgba(101,36,16,0.18) 56px
),
/* vertical day columns — using a fixed 7-col gradient that tiles */
linear-gradient(
90deg,
rgba(101,36,16,0.22) 0 1px, transparent 1px calc(100%/7),
rgba(101,36,16,0.22) calc(100%/7) calc(100%/7 + 1px), transparent calc(100%/7 + 1px) calc(200%/7),
rgba(101,36,16,0.22) calc(200%/7) calc(200%/7 + 1px), transparent calc(200%/7 + 1px) calc(300%/7),
rgba(101,36,16,0.22) calc(300%/7) calc(300%/7 + 1px), transparent calc(300%/7 + 1px) calc(400%/7),
rgba(101,36,16,0.22) calc(400%/7) calc(400%/7 + 1px), transparent calc(400%/7 + 1px) calc(500%/7),
rgba(101,36,16,0.22) calc(500%/7) calc(500%/7 + 1px), transparent calc(500%/7 + 1px) calc(600%/7),
rgba(101,36,16,0.22) calc(600%/7) calc(600%/7 + 1px), transparent calc(600%/7 + 1px) 100%
);
opacity: 0.55;
border: 1px solid rgba(101,36,16,0.20);
}
/* header band — like a real calendar: weekday labels strip across the top */
.paper-calendar-bg::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 48px;
background: linear-gradient(180deg, rgba(192,57,43,0.08), rgba(192,57,43,0.02));
border-bottom: 1.5px solid rgba(101,36,16,0.28);
}
/* "today" highlight — one day column tinted */
.paper-calendar-bg::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: calc(200%/7); width: calc(100%/7);
background: linear-gradient(180deg, rgba(217,119,87,0.10), rgba(217,119,87,0.04));
pointer-events: none;
}
/* Day labels (Mon-Sun) */
.paper-calendar-days {
position: absolute;
left: 24px; right: 24px; top: 40px;
height: 48px;
display: grid;
grid-template-columns: repeat(7, 1fr);
pointer-events: none;
z-index: 1;
}
.paper-calendar-days span {
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(101,36,16,0.45);
border-right: 1px solid rgba(101,36,16,0.10);
}
.paper-calendar-days span:last-child { border-right: 0; }
.paper-calendar-days span:nth-child(3) { color: rgba(192,57,43,0.65); }
.paper-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
z-index: 2;
}
.paper-orb-a { width: 480px; height: 480px; left: -120px; top: -120px;
background: radial-gradient(circle, rgba(250,198,151,0.55), transparent 70%); }
.paper-orb-b { width: 560px; height: 560px; right: -160px; bottom: -180px;
background: radial-gradient(circle, rgba(101,36,16,0.18), transparent 70%); }
.paper-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.paper-title {
font-size: clamp(32px, 4.4vw, 64px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--tg-fg-1);
text-wrap: balance;
}
.paper-title-line {
display: block;
opacity: 0;
transform: translateY(16px);
/* play once when the section scrolls into view */
}
.paper-section.is-visible .paper-title-line-1 {
animation: paperLineIn 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 0.0s forwards;
}
.paper-section.is-visible .paper-title-line-2 {
animation: paperLineIn 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards;
}
/* line-3 — appears later, with a deliberate pause for impact */
.paper-section.is-visible .paper-title-line-3 {
animation: paperLineIn 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 2.9s forwards;
}
@keyframes paperLineIn {
to { opacity: 1; transform: translateY(0); }
}
/* "hátrányai" — gradient + animated underline scratch */
.paper-flaw {
position: relative;
background: linear-gradient(135deg, #c0392b 0%, #7a1f12 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 800;
white-space: nowrap;
}
.paper-flaw::after {
content: '';
position: absolute;
left: 0; right: 100%;
bottom: 0.08em;
height: 0.09em;
background: linear-gradient(90deg, #c0392b 0%, #7a1f12 100%);
border-radius: 999px;
transform-origin: left;
}
.paper-section.is-visible .paper-flaw::after {
animation: paperScratch 0.7s cubic-bezier(0.65, 0, 0.35, 1) 3.7s forwards;
}
@keyframes paperScratch {
0% { right: 100%; }
100% { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.paper-title-line { opacity: 1; transform: none; animation: none !important; }
.paper-flaw::after { right: 0; animation: none !important; }
.paper-versus { opacity: 1; transform: none; animation: none !important; }
}
/* ----- versus block ----- */
.paper-versus {
margin-top: 72px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
text-align: left;
opacity: 0;
transform: translateY(20px);
}
.paper-section.is-visible .paper-versus {
animation: paperVersusIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 4.5s forwards;
}
@keyframes paperVersusIn {
to { opacity: 1; transform: translateY(0); }
}
/* LEFT — paper notepad */
.paper-pad {
position: relative;
background: #fffaf0;
border-radius: 30px;
padding: 56px 40px 36px;
box-shadow:
0 1px 0 rgba(101,36,16,0.10) inset,
0 18px 40px -20px rgba(101,36,16,0.35),
0 2px 6px rgba(101,36,16,0.10);
/* ruled-paper lines */
background-image:
linear-gradient(#fffaf0, #fffaf0),
repeating-linear-gradient(
180deg,
transparent 0px, transparent 47px,
rgba(101,36,16,0.16) 47px, rgba(101,36,16,0.16) 48px
);
background-clip: padding-box, padding-box;
border: 1px solid rgba(101,36,16,0.12);
/* slight paper tilt */
transform: rotate(-0.6deg);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.paper-pad:hover { transform: rotate(0deg); }
/* red margin line */
.paper-pad::before {
content: '';
position: absolute;
left: 56px; top: 0; bottom: 0;
width: 1.5px;
background: rgba(192, 57, 43, 0.45);
}
/* binding holes */
.paper-pad::after {
content: '';
position: absolute;
top: 18px; left: 14px;
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(101,36,16,0.16);
box-shadow:
0 calc((100% / 2) ) 0 0 rgba(101,36,16,0.14),
0 200px 0 0 rgba(101,36,16,0.14);
}
.paper-pad-tab {
position: absolute;
top: -14px; left: 32px;
background: linear-gradient(135deg, #c0392b, #7a1f12);
color: #fff8ef;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(122,31,18,0.35);
transform: rotate(-2deg);
}
.paper-args {
list-style: none;
margin: 0; padding: 0;
counter-reset: arg;
}
.paper-arg {
display: flex;
gap: 14px;
padding: 10px 8px 10px 28px;
margin-left: 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.25s ease, transform 0.25s ease;
color: #4a2511;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.5;
/* sit on the ruled lines */
min-height: 48px;
align-items: baseline;
}
.paper-arg:hover,
.paper-arg.is-active {
background: rgba(192, 57, 43, 0.08);
transform: translateX(4px);
}
.paper-arg.is-active .paper-arg-text {
color: #2a1408;
font-weight: 600;
}
.paper-arg-num {
flex: 0 0 auto;
font-weight: 700;
color: #c0392b;
font-size: 18px;
font-variant-numeric: tabular-nums;
}
.paper-arg-text {
flex: 1;
text-wrap: pretty;
}
/* Temporary edit-pin (checkbox-style). When checked, that argument's counter card stays open. */
.paper-arg-pin {
flex: 0 0 auto;
width: 22px; height: 22px;
border-radius: 6px;
border: 1.5px solid rgba(101,36,16,0.35);
background: #fffaf0;
cursor: pointer;
padding: 0;
display: flex; align-items: center; justify-content: center;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
color: transparent;
font-size: 14px;
line-height: 1;
align-self: center;
margin-left: 8px;
}
.paper-arg-pin:hover { border-color: #c0392b; transform: scale(1.06); }
.paper-arg-pin::before {
content: '✓';
font-weight: 800;
color: #fff;
transform: scale(0.5);
opacity: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.paper-arg.is-pinned .paper-arg-pin {
background: linear-gradient(135deg, #c0392b, #7a1f12);
border-color: #7a1f12;
}
.paper-arg.is-pinned .paper-arg-pin::before { transform: scale(1); opacity: 1; }
.paper-pad-hint {
margin-top: 24px;
padding-left: 28px;
font-size: 13px;
color: rgba(101,36,16,0.55);
font-style: italic;
}
/* RIGHT — TrimmGO counter card stack */
.paper-counter {
position: relative;
min-height: 360px;
display: flex;
align-items: stretch;
}
.paper-counter-card {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #fff7ec 0%, #fbe6c8 100%);
border-radius: 30px;
padding: 40px 36px;
border: 1px solid rgba(101,36,16,0.10);
box-shadow:
0 24px 60px -28px rgba(101,36,16,0.40),
0 2px 8px rgba(101,36,16,0.08);
display: flex;
flex-direction: column;
gap: 16px;
opacity: 0;
transform: translateY(12px) scale(0.985);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
.paper-counter-card.is-active {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* gradient corner badge for active card */
.paper-counter-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 110px; height: 110px;
background: var(--tg-brand-gradient);
opacity: 0.10;
border-radius: 0 22px 0 80px;
pointer-events: none;
}
.paper-counter-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tg-brand-2);
}
.paper-counter-headline {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.015em;
color: var(--tg-fg-1);
text-wrap: balance;
}
.paper-counter-body {
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.6;
color: var(--tg-fg-3);
text-wrap: pretty;
}
.paper-counter-prompt {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.45;
color: var(--tg-fg-2);
font-weight: 500;
text-wrap: balance;
}
.paper-counter-deco {
margin-top: auto;
color: var(--tg-brand-1);
opacity: 0.7;
}
@media (max-width: 880px) {
.paper-versus {
grid-template-columns: 1fr;
gap: 32px;
}
.paper-counter { min-height: 280px; }
.paper-pad { padding: 48px 28px 28px; }
.paper-pad::before { left: 44px; }
.paper-arg { padding-left: 20px; }
}
/* ============================================================================
PAPER USES — naptár mint papír naptár (3 use cases)
============================================================================ */
.paper-uses-section {
position: relative;
padding: 120px 24px 140px;
background: linear-gradient(180deg, #fffdf8 0%, #fdf5e8 100%);
overflow: hidden;
}
.paper-uses-section::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(101,36,16,0.05) 1px, transparent 1px);
background-size: 100% 32px;
pointer-events: none;
opacity: 0.6;
}
.paper-uses-head {
max-width: 880px;
margin: 0 auto 80px;
text-align: center;
position: relative;
}
.paper-uses-head .section-sub {
margin-top: 18px;
color: var(--tg-fg-3);
font-size: clamp(16px, 1.2vw, 18px);
text-wrap: pretty;
}
.paper-uses-stack {
max-width: 1180px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
position: relative;
}
.paper-use-card {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 60px;
align-items: center;
position: relative;
}
.paper-use-card.paper-use-flip {
grid-template-columns: 1.05fr 1fr;
}
.paper-use-card.paper-use-flip .paper-use-text { order: 2; }
.paper-use-card.paper-use-flip .paper-use-visual { order: 1; }
.paper-use-text { padding: 12px 4px; }
.paper-use-num {
display: inline-block;
font-family: var(--tg-font-mono, ui-monospace, monospace);
font-size: 14px;
font-weight: 700;
color: var(--tg-brand-1);
background: rgba(217,119,87,0.10);
border: 1.5px solid rgba(217,119,87,0.28);
padding: 4px 12px;
border-radius: 999px;
letter-spacing: 0.06em;
margin-bottom: 18px;
}
.paper-use-headline {
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 700;
line-height: 1.18;
color: var(--tg-fg-1);
letter-spacing: -0.015em;
margin-bottom: 16px;
text-wrap: balance;
}
.paper-use-body {
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6;
color: var(--tg-fg-2);
text-wrap: pretty;
margin-bottom: 22px;
}
.paper-use-body strong { color: var(--tg-fg-1); font-weight: 700; }
.paper-use-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--tg-fg-3);
background: #fff;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(101,36,16,0.10);
}
.paper-use-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--tg-brand-gradient);
}
.paper-use-visual {
position: relative;
}
.paper-use-shot {
position: relative;
background: #fff;
border-radius: 30px;
border: 1px solid rgba(101,36,16,0.15);
box-shadow:
0 30px 60px -15px rgba(101,36,16,0.18),
0 8px 20px rgba(101,36,16,0.06);
transform: rotate(-1.2deg);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
overflow: hidden;
}
.paper-use-card.paper-use-flip .paper-use-shot { transform: rotate(1.2deg); }
.paper-use-shot:hover { transform: rotate(0deg) translateY(-4px); }
.paper-shot-frame {
aspect-ratio: 16 / 10;
padding: 14px;
background:
repeating-linear-gradient(0deg,
transparent 0,
transparent 31px,
rgba(101,36,16,0.06) 31px,
rgba(101,36,16,0.06) 32px);
position: relative;
}
.paper-shot-frame::before {
content: '';
position: absolute;
left: 56px; top: 0; bottom: 0;
width: 1px;
background: rgba(217,119,87,0.30);
}
.paper-shot-inner {
position: relative;
width: 100%; height: 100%;
background: #fff;
border-radius: 8px;
border: 1px dashed rgba(101,36,16,0.22);
overflow: hidden;
}
.paper-shot-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px;
color: rgba(101,36,16,0.45);
text-align: center;
font-size: 14px;
line-height: 1.5;
}
.paper-shot-placeholder em {
font-style: normal;
font-weight: 600;
color: rgba(101,36,16,0.65);
font-size: 13px;
}
.paper-shot-corner {
position: absolute;
top: -1px; right: -1px;
width: 32px; height: 32px;
background: linear-gradient(225deg, #fdf5e8 0%, #fdf5e8 50%, #fff 50%);
border-radius: 0 16px 0 0;
box-shadow: -3px 3px 6px rgba(101,36,16,0.08);
}
/* USE 1 — booking flow animation (3 screenshots) */
.booking-flow {
position: relative;
width: 100%; height: 100%;
background: #1d2733;
overflow: hidden;
}
.booking-step {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
opacity: 0;
transform: scale(1.02);
animation: bookingStepFade 9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.booking-step-1 { animation-delay: 0s; }
.booking-step-2 { animation-delay: 3s; }
.booking-step-3 { animation-delay: 6s; }
@keyframes bookingStepFade {
0% { opacity: 0; transform: scale(1.04); }
3% { opacity: 1; transform: scale(1.00); }
30% { opacity: 1; transform: scale(1.00); }
36% { opacity: 0; transform: scale(0.99); }
100% { opacity: 0; transform: scale(0.99); }
}
/* Click pulse cursors — appear right before each step transition */
.booking-cursor {
position: absolute;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(217, 119, 87, 0.55);
border: 2px solid #fff;
box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.6);
opacity: 0;
z-index: 5;
pointer-events: none;
}
/* Single travelling cursor — starts on step 1, glides to step 2 position, fades on step 3 */
.booking-cursor-travel {
left: 36%; top: 46%;
opacity: 0;
animation:
bookingCursorTravel 9s cubic-bezier(0.55, 0, 0.25, 1) infinite,
bookingCursorPulse 9s ease-in-out infinite;
}
@keyframes bookingCursorTravel {
/* Step 1: 0–3s — pulse on cell */
0% { left: 36%; top: 46%; }
33% { left: 36%; top: 46%; }
/* Glide to step 2 position during transition (33–44% ≈ 1s glide) */
44% { left: 19%; top: 58%; }
/* Step 2: stays put — pulse fires here */
67% { left: 19%; top: 58%; }
/* Step 3: stays at last spot but faded out */
100% { left: 19%; top: 58%; }
}
@keyframes bookingCursorPulse {
/* Appear early in step 1 */
0%, 5% { opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 0 rgba(217,119,87,0.6); }
8% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,87,0.7); }
/* Step 1 click pulse */
14% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 18px rgba(217,119,87,0); }
20% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,87,0); }
/* Hold opacity through the glide (33% → 44%) */
33%, 44% { opacity: 0.95; transform: scale(1); }
/* Step 2 click pulse */
52% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 18px rgba(217,119,87,0); }
58% { opacity: 0.95; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,87,0); }
/* Fade out before step 3 starts (66% = 6s mark) */
66% { opacity: 0; transform: scale(0.6); }
100% { opacity: 0; transform: scale(0.6); }
}
@keyframes bookingClick {
0%, 5% { opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 0 rgba(217,119,87,0.6); }
8% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,87,0.7); }
14% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 18px rgba(217,119,87,0); }
20% { opacity: 0.9; transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,87,0); }
24%, 100% { opacity: 0; transform: scale(0.6); }
}
/* Step badges — small label in bottom-left */
.booking-step-badge {
position: absolute;
left: 14px; bottom: 14px;
background: rgba(20, 26, 36, 0.92);
color: #fff;
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
z-index: 6;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 6px 16px rgba(0,0,0,0.30);
/* Size to the longest label so the pill never reflows */
min-width: 0;
height: 32px;
display: inline-flex;
align-items: center;
overflow: hidden;
}
/* Invisible sizer — reserves width for the longest label */
.booking-step-badge::before {
content: "3 / 3 · Töltsd ki az adatokat és mentsd el.";
visibility: hidden;
white-space: nowrap;
}
.booking-step-badge span {
position: absolute;
left: 14px; right: 14px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
opacity: 0;
visibility: hidden;
animation: bookingBadgeShow 9s ease-in-out infinite;
}
.booking-step-badge .booking-step-badge-1 { animation-delay: 0s; }
.booking-step-badge .booking-step-badge-2 { animation-delay: 3s; }
.booking-step-badge .booking-step-badge-3 { animation-delay: 6s; }
@keyframes bookingBadgeShow {
0% { opacity: 0; visibility: hidden; }
3% { opacity: 0; visibility: visible; }
6% { opacity: 1; visibility: visible; }
32% { opacity: 1; visibility: visible; }
35% { opacity: 0; visibility: visible; }
36% { opacity: 0; visibility: hidden; }
100% { opacity: 0; visibility: hidden; }
}
/* USE 2–3 — áthelyezés és időtartam-nyújtás: a valódi naptárból készült videó */
.paper-use-video {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
background: #e9f7ee;
}
@media (max-width: 900px) {
.paper-uses-stack { gap: 56px; }
.paper-use-card,
.paper-use-card.paper-use-flip {
grid-template-columns: 1fr;
gap: 28px;
}
.paper-use-card.paper-use-flip .paper-use-text { order: 1; }
.paper-use-card.paper-use-flip .paper-use-visual { order: 2; }
}
/* USE 4 — live search & autofill demo */
.livesearch-demo {
position: relative;
width: 100%; height: 100%;
overflow: hidden;
background: #fff;
}
.ls-bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
background: #fff;
user-select: none;
pointer-events: none;
}
/* Search input overlay — positioned over the "Kutya neve" input field */
.livesearch-demo .ls-input-wrap {
position: absolute;
left: 22%; top: 27.5%;
animation: lsInputShow 7s ease-in-out infinite;
width: 56%;
height: 5.6%;
display: flex; align-items: center;
gap: 10px;
padding: 0 16px;
background: #fff;
border: 1.5px solid var(--tg-brand-1);
border-radius: 10px;
box-shadow: 0 0 0 4px rgba(217,119,87,0.15);
z-index: 4;
}
.livesearch-demo .ls-search-icon {
flex-shrink: 0;
width: 18px; height: 18px;
color: var(--tg-brand-1);
}
.livesearch-demo .ls-input {
flex: 1;
display: flex; align-items: center;
font-family: inherit;
font-size: clamp(14px, 1.6vw, 18px);
font-weight: 600;
color: var(--tg-text);
letter-spacing: 0.01em;
}
.livesearch-demo .ls-typed::after {
content: var(--ls-text, '');
}
.livesearch-demo .ls-typed {
animation: lsType 7s steps(1, end) infinite;
}
@keyframes lsType {
0%, 5% { --ls-text: ''; }
9% { --ls-text: 'B'; }
13% { --ls-text: 'Bo'; }
17%, 95% { --ls-text: 'Bod'; }
100% { --ls-text: ''; }
}
.livesearch-demo .ls-caret {
color: var(--tg-brand-1);
font-weight: 400;
margin-left: 1px;
animation: lsCaret 1s steps(2, end) infinite;
}
@keyframes lsCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lsInputShow {
0%, 2% { opacity: 0; transform: translateY(-4px); }
6%, 48% { opacity: 1; transform: translateY(0); }
52%, 100% { opacity: 0; transform: translateY(-4px); }
}
/* Suggestions dropdown — appears below input */
.livesearch-demo .ls-suggestions {
position: absolute;
left: 22%; top: 34.5%;
width: 56%;
background: #fff;
border: 1px solid rgba(101,36,16,0.10);
border-radius: 12px;
box-shadow: 0 18px 40px -10px rgba(101,36,16,0.22), 0 4px 12px rgba(101,36,16,0.08);
overflow: hidden;
z-index: 5;
opacity: 0;
transform: translateY(-8px);
animation: lsSuggestions 7s ease-in-out infinite;
}
@keyframes lsSuggestions {
0%, 22% { opacity: 0; transform: translateY(-8px); }
26%, 48% { opacity: 1; transform: translateY(0); }
55%, 100% { opacity: 0; transform: translateY(-4px); }
}
.livesearch-demo .ls-suggestion {
display: flex; align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(101,36,16,0.06);
transition: background 0.18s;
}
.livesearch-demo .ls-suggestion:last-child { border-bottom: 0; }
.livesearch-demo .ls-suggestion-1 {
background: rgba(217,119,87,0.10);
animation: lsHighlight 7s ease-in-out infinite;
}
@keyframes lsHighlight {
0%, 38% { background: rgba(217,119,87,0.10); }
44%, 48% { background: rgba(217,119,87,0.22); }
55%, 100% { background: rgba(217,119,87,0.10); }
}
.livesearch-demo .ls-avatar {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
.livesearch-demo .ls-info {
flex: 1;
display: flex; flex-direction: column;
gap: 1px;
min-width: 0;
}
.livesearch-demo .ls-name {
font-size: clamp(13px, 1.4vw, 15px);
font-weight: 700;
color: var(--tg-text);
}
.livesearch-demo .ls-meta {
font-size: clamp(11px, 1.1vw, 12px);
color: var(--tg-muted);
}
.livesearch-demo .ls-tag {
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--tg-brand-1);
background: rgba(217,119,87,0.14);
padding: 3px 8px;
border-radius: 999px;
}
/* Click cursor pointing at first suggestion */
.livesearch-demo::after {
content: '';
position: absolute;
left: 28%; top: 39%;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--tg-brand-gradient);
box-shadow: 0 4px 10px rgba(217,119,87,0.55);
z-index: 6;
opacity: 0;
animation: lsCursor 7s ease-in-out infinite;
}
@keyframes lsCursor {
0%, 35% { opacity: 0; transform: scale(0.6); left: 60%; top: 41%; }
40% { opacity: 1; transform: scale(1.1); left: 32%; top: 39%; }
50% { opacity: 1; transform: scale(0.85); left: 32%; top: 39%; }
52%, 100% { opacity: 0; transform: scale(0.6); }
}
/* Auto-fill ripple — highlights filled fields */
.livesearch-demo .ls-autofill {
position: absolute;
left: 22%;
width: 56%;
z-index: 3;
pointer-events: none;
}
.livesearch-demo .ls-autofill-row {
position: absolute;
left: 0;
width: 100%;
height: 5.6%;
border: 1.5px solid var(--tg-brand-1);
border-radius: 10px;
background: rgba(217,119,87,0.08);
box-shadow: 0 0 0 4px rgba(217,119,87,0.10);
display: flex; align-items: center;
padding: 0 16px;
opacity: 0;
}
.livesearch-demo .ls-row-label { display: none; }
.livesearch-demo .ls-row-value {
font-size: clamp(13px, 1.5vw, 16px);
font-weight: 600;
color: var(--tg-text);
}
/* Position rows over the actual fields in the screenshot:
"Fajta" ~y 41%, "Név" (under Gazdi 1 adatai) ~y 60%, "Telefon" ~y 75% */
.livesearch-demo .ls-row-1 { /* Fajta -> Vizsla */
top: 39.5%;
height: 75px;
animation: lsFill1 7s ease-out infinite;
}
.livesearch-demo .ls-row-2 { /* Név -> Kovács Anna (left half) */
top: 60.5%;
width: 26%;
height: 70px;
animation: lsFill2 7s ease-out infinite;
}
.livesearch-demo .ls-row-3 { /* Telefon */
top: 80%;
width: 30%;
height: 70px;
animation: lsFill3 7s ease-out infinite;
}
@keyframes lsFill1 {
0%, 54% { opacity: 0; transform: scale(0.98); }
58%, 92% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(217,119,87,0.16); }
100% { opacity: 0; }
}
@keyframes lsFill2 {
0%, 60% { opacity: 0; transform: scale(0.98); }
64%, 92% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(217,119,87,0.16); }
100% { opacity: 0; }
}
@keyframes lsFill3 {
0%, 66% { opacity: 0; transform: scale(0.98); }
70%, 92% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(217,119,87,0.16); }
100% { opacity: 0; }
}
@media (max-width: 900px) {
.livesearch-demo .ls-input-wrap,
.livesearch-demo .ls-suggestions,
.livesearch-demo .ls-autofill { left: 18%; width: 64%; }
}
/* ============== ALL FEATURES grid ============== */
.allfeat-section {
position: relative;
padding: 130px 24px 150px;
background: linear-gradient(180deg, #ffffff 0%, #fdf6ec 100%);
overflow: hidden;
}
.allfeat-head {
max-width: 820px; margin: 0 auto 64px; text-align: center;
}
.allfeat-head .section-sub {
margin-top: 18px; color: var(--tg-fg-3);
font-size: clamp(16px, 1.2vw, 18px); text-wrap: pretty;
}
.allfeat-groups {
max-width: 1200px; margin: 0 auto;
display: flex; flex-direction: column; gap: 56px;
}
.allfeat-group-head {
display: flex; align-items: center; gap: 16px;
margin-bottom: 24px;
}
.allfeat-group-num {
flex-shrink: 0;
font-family: var(--tg-font-mono, monospace);
font-size: 13px; font-weight: 700;
color: var(--tg-brand-1);
background: rgba(217,119,87,0.10);
border: 1.5px solid rgba(217,119,87,0.28);
padding: 5px 12px; border-radius: 999px;
letter-spacing: 0.04em;
}
.allfeat-group-title {
font-size: clamp(20px, 2vw, 28px);
font-weight: 700; letter-spacing: -0.015em;
color: var(--tg-fg-1);
}
.allfeat-group-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(101,36,16,0.18), transparent);
}
#path-stage :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) >:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) b { font-weight: 700 !important }
/* ============================================================================
Éles weboldal kiegészítések (a Claude Design prototípushoz képest)
============================================================================ */
.nav-brand img, .footer-brand img { width: auto; }
.nav-brand a { display: inline-flex; }
/* CTA gombok linkként (a regisztrációs oldalra visznek) */
a.nav-cta, a.final-cta-btn { display: inline-block; text-decoration: none; text-align: center; }
a.path-cta, a.price-cta { display: block; text-decoration: none; text-align: center; }
/* Funkció-képpanel: amíg nincs képernyőkép, mancs jelzi a helyét */
.feat-slide-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--tg-copper-500);
opacity: 0.22;
}
.feat-slide-placeholder svg { width: 34%; max-width: 160px; height: auto; fill: currentColor; }
/* Mobilon a 4 gombos „Kinek való?” kapcsoló vízszintesen görgethető */
@media (max-width: 720px) {
.path-toggle {
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.path-toggle::-webkit-scrollbar { display: none; }
.path-toggle button { flex-shrink: 0; }
}
/* Fejléc: Bejelentkezés + Regisztráció gomb */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-login {
padding: 7px 16px;
border: 1.5px solid rgba(101,36,16,0.28);
border-radius: 999px;
color: var(--tg-copper-700);
font-size: 14px; font-weight: 600;
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.nav-login:hover { border-color: var(--tg-copper-700); background: rgba(250,198,151,0.18); }
.nav-cta-extra { opacity: 0.85; font-weight: 500; }
.nav.on-dark .nav-login { color: #fff; border-color: rgba(255,255,255,0.45); }
.nav.on-dark .nav-login:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@media (max-width: 600px) {
.nav-actions { gap: 6px; }
.nav-login { padding: 7px 12px; font-size: 13px; }
.nav-cta { font-size: 13px; padding: 8px 12px; }
.nav-cta-extra { display: none; }
.nav-brand img { height: 22px; }
}
/* ============================================================================
HERO – eszközök (laptop + tablet + telefon), CSS-sel rajzolt keretek
Minden méret a konténer szélességéhez arányos (cqw), így bármilyen
képernyőn ugyanaz a kompozíció.
============================================================================ */
.eszkozok {
container-type: inline-size;
position: relative;
z-index: 2;
width: min(1120px, 96%);
margin-top: 40px;
aspect-ratio: 100 / 54;
}
.eszk { position: absolute; }
.eszk img { display: block; width: 100%; height: auto; }
/* Laptop */
.eszk-laptop { left: 13cqw; top: 0; width: 74cqw; }
.eszk-laptop-fedel {
position: relative;
background: #18181b;
padding: 1.3cqw 1.3cqw 1.6cqw;
border-radius: 1.6cqw 1.6cqw 0.5cqw 0.5cqw;
box-shadow: 0 0 0 0.12cqw #3f3f46 inset, 0 3cqw 5cqw -2cqw rgba(101,36,16,0.35);
}
.eszk-laptop-fedel img { border-radius: 0.3cqw; }
.eszk-kamera {
position: absolute; top: 0.45cqw; left: 50%;
width: 0.45cqw; height: 0.45cqw; margin-left: -0.225cqw;
border-radius: 50%; background: #3f3f46;
}
.eszk-laptop-alap {
position: relative;
width: 112%; margin-left: -6%;
height: 1.5cqw;
background: linear-gradient(180deg, #f4f4f5 0%, #c7c7cc 18%, #a1a1aa 70%, #71717a 100%);
border-radius: 0 0 1.4cqw 1.4cqw / 0 0 1.5cqw 1.5cqw;
box-shadow: 0 1.6cqw 2.4cqw -1cqw rgba(0,0,0,0.35);
}
.eszk-laptop-alap::before {
content: ''; position: absolute; top: 0; left: 50%;
width: 14%; height: 45%; transform: translateX(-50%);
background: #8e8e96;
border-radius: 0 0 0.8cqw 0.8cqw;
}
/* Tablet */
.eszk-tablet {
left: 1cqw; bottom: 0; width: 25cqw;
background: #18181b;
padding: 0.9cqw;
border-radius: 2.2cqw;
box-shadow: 0 0 0 0.12cqw #3f3f46 inset, 0 2.5cqw 4cqw -1.5cqw rgba(101,36,16,0.45);
}
.eszk-tablet-kepernyo {
background: #f8fafc;
border-radius: 1.3cqw;
overflow: hidden;
}
.eszk-tablet-kamera {
position: absolute; top: 0.32cqw; left: 50%;
width: 0.3cqw; height: 0.3cqw; margin-left: -0.15cqw;
border-radius: 50%; background: #3f3f46;
}
/* Telefon */
.eszk-telefon {
right: 2cqw; bottom: 0; width: 14cqw;
background: #18181b;
padding: 0.55cqw;
border-radius: 2.4cqw;
box-shadow: 0 0 0 0.12cqw #3f3f46 inset, 0 2.5cqw 4cqw -1.5cqw rgba(101,36,16,0.45);
}
.eszk-telefon-kepernyo {
background: #f8fafc;
border-radius: 1.9cqw;
overflow: hidden;
aspect-ratio: 9 / 19.5;
}
.eszk-allapotsor {
display: flex; align-items: center; justify-content: space-between;
height: 2.6cqw; padding: 0 1.05cqw 0 1.6cqw;
font-size: 0.85cqw; font-weight: 700; color: #111827;
}
.eszk-ikonok { display: flex; align-items: center; gap: 0.2cqw; }
.eszk-ikonok svg { display: block; fill: currentColor; height: 0.5cqw; width: auto; }
.eszk-ikonok .ikon-akku { height: 0.55cqw; }
/* Tablet: alacsonyabb sáv, kisebb betű, a kamera a keretben van */
.eszk-allapotsor--tablet {
height: 1.5cqw; padding: 0 1cqw;
font-size: 0.62cqw; font-weight: 600;
}
.eszk-allapotsor--tablet .eszk-ikonok svg { height: 0.5cqw; }
.eszk-allapotsor--tablet .eszk-ikonok .ikon-akku { height: 0.55cqw; }
.eszk-sziget {
position: absolute; z-index: 1;
top: 1.15cqw; left: 50%;
width: 4cqw; height: 1.1cqw; margin-left: -2cqw;
background: #0b0b0c; border-radius: 1cqw;
}
/* Mobilon a laptop szélesebb, a tablet kisebb, hogy a naptár olvasható maradjon */
@media (max-width: 600px) {
.eszkozok { width: 100%; aspect-ratio: 100 / 66; }
.eszk-laptop { left: 2cqw; width: 84cqw; }
.eszk-tablet { width: 27cqw; left: 0; }
.eszk-telefon { width: 17cqw; right: 0; }
}
/* ============================================================================
Videó lejátszás/szünet gomb (Apple-stílus) – a videó jobb alsó sarkában
============================================================================ */
.video-gomb {
position: absolute; right: 12px; bottom: 12px; z-index: 3;
width: 36px; height: 36px;
display: grid; place-items: center;
border: none; border-radius: 50%;
background: rgba(29, 29, 31, 0.55);
-webkit-backdrop-filter: blur(10px) saturate(1.6);
backdrop-filter: blur(10px) saturate(1.6);
color: #fff;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.video-gomb:hover { opacity: 1; background: rgba(29, 29, 31, 0.75); transform: scale(1.06); }
.video-gomb:focus-visible { outline: 2px solid #d97757; outline-offset: 3px; opacity: 1; }
.video-gomb svg { width: 16px; height: 16px; }
/* Felpörgő számok: egyforma széles számjegyek, hogy ne ugráljon a szöveg */
.szamlalo-szam { font-variant-numeric: tabular-nums; }
/* ============================================================================
Kigyulladó mondat – görgetés közben szavanként sötétedik (Apple-stílus)
============================================================================ */
.kigyullado-szekcio {
padding: 160px 24px 170px;
background: #fff;
}
.kigyullado-szoveg {
max-width: 1040px; margin: 0 auto;
font-size: clamp(30px, 4.2vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.14;
color: var(--tg-fg-1);
text-wrap: balance;
}
.kigyullado-szoveg .kiemelt { color: inherit; }
/* A JS szavakra bontja; a még „nem felolvasott” szavak halványak */
.kigyullado-szoveg .szo { color: rgba(26, 32, 44, 0.16); transition: color 0.25s ease; }
.kigyullado-szoveg .szo.ki { color: var(--tg-fg-1); }
.kigyullado-szoveg .szo.kiemelt-szo.ki {
background: var(--tg-brand-gradient);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 760px) {
.kigyullado-szekcio { padding: 110px 22px 120px; }
}
/* ============================================================================
Hero eszközök – görgetéshez kötött összeállás
A JS a --hero-p (0…1) változót állítja: 0-nál a tablet és a telefon kicsit
kifelé áll, a laptop picit kisebb; görgetéssel a végleges helyükre érnek.
JS nélkül / csökkentett mozgásnál / mobilon a változó 1 marad (végállapot).
============================================================================ */
.eszkozok { --hero-v: calc(1 - var(--hero-p, 1)); }
.eszk-laptop {
scale: calc(1 - 0.06 * var(--hero-v));
transform-origin: 50% 100%;
}
.eszk-tablet { translate: calc(-5cqw * var(--hero-v)) calc(3cqw * var(--hero-v)); rotate: calc(-2deg * var(--hero-v)); }
.eszk-telefon { translate: calc(5cqw * var(--hero-v)) calc(3cqw * var(--hero-v)); rotate: calc(2deg * var(--hero-v)); }
/* ============================================================================
Bento-rács – „dióhéjban” a legfontosabb funkciók, eltérő méretű csempékben
============================================================================ */
.bento {
max-width: 1200px;
margin: 0 auto 96px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 270px;
gap: 20px;
grid-template-areas:
"fogl fogl napt napt"
"fogl fogl emlk kuty"
"penz penz csap szin";
}
.bento-csempe {
position: relative;
overflow: hidden;
border-radius: 28px;
background: #fff;
border: 1px solid rgba(101, 36, 16, 0.08);
box-shadow: 0 1px 2px rgba(101, 36, 16, 0.04), 0 12px 32px -18px rgba(101, 36, 16, 0.25);
display: flex; flex-direction: column;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
.bento-csempe:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(101, 36, 16, 0.05), 0 22px 44px -20px rgba(101, 36, 16, 0.35); }
.bento-szoveg { position: relative; z-index: 2; padding: 26px 28px 0; }
.bento-cimke {
display: block;
font-size: 12px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: #9a4a26;
margin-bottom: 8px;
}
.bento-csempe h3 {
margin: 0;
font-size: clamp(19px, 1.6vw, 24px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.18;
color: var(--tg-fg-1);
text-wrap: balance;
}
.bento-csempe img {
display: block;
margin-top: auto;
width: 100%;
min-height: 0;
object-fit: cover;
object-position: center top;
}
/* Csempénként */
.bento-foglalas { grid-area: fogl; background: linear-gradient(180deg, #fff 0%, #fdf1e4 100%); }
.bento-foglalas h3 { font-size: clamp(26px, 2.6vw, 38px); max-width: 15ch; }
.bento-foglalas img {
width: 52%; margin: auto auto -40px;
border-radius: 28px 28px 0 0;
border: 6px solid #18181b; border-bottom: none;
box-shadow: 0 20px 40px -20px rgba(101, 36, 16, 0.5);
flex: 1 1 auto; height: 0;
}
.bento-naptar { grid-area: napt; }
.bento-naptar img { margin: 18px 0 0 28px; width: calc(100% - 28px); border-radius: 12px 0 0 0; box-shadow: -4px -4px 24px -12px rgba(101, 36, 16, 0.3); flex: 1 1 auto; height: 0; object-position: left 32%; }
.bento-emlekezteto { grid-area: emlk; }
.bento-kutya { grid-area: kuty; }
.bento-emlekezteto img,
.bento-kutya img { margin: 16px 18px 0; width: calc(100% - 36px); border-radius: 12px 12px 0 0; box-shadow: 0 -2px 20px -10px rgba(101, 36, 16, 0.3); flex: 1 1 auto; height: 0; }
.bento-penzugy { grid-area: penz; }
.bento-penzugy img { margin: 18px 28px 0; width: calc(100% - 56px); border-radius: 12px 12px 0 0; box-shadow: 0 -2px 20px -10px rgba(101, 36, 16, 0.3); flex: 1 1 auto; height: 0; }
.bento-szinkron { grid-area: szin; }
.bento-naptarak { list-style: none; margin: auto 28px 26px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bento-naptarak li {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
border-radius: 12px;
background: #fdf5ec;
font-size: 14px; font-weight: 700; color: var(--tg-fg-1);
}
.bento-naptarak li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tg-brand-gradient); flex-shrink: 0; }
.bento-csapat {
grid-area: csap;
background: var(--tg-brand-gradient);
border: none;
}
.bento-csapat .bento-cimke { color: rgba(255, 255, 255, 0.8); }
.bento-csapat h3 { color: #fff; }
.bento-csapat-avatarok { display: flex; margin: auto 28px 28px; }
.bento-csapat-avatarok span {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
font-size: 14px; font-weight: 800; color: #652410;
background: #fff;
border: 3px solid rgba(255, 255, 255, 0.55);
margin-left: -10px;
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
.bento-csapat-avatarok span:first-child { margin-left: 0; background: #fde8d4; }
@media (max-width: 980px) {
.bento {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 250px;
grid-template-areas:
"fogl fogl"
"fogl fogl"
"napt napt"
"emlk kuty"
"penz penz"
"csap szin";
}
.bento-foglalas img { width: 44%; }
}
@media (max-width: 560px) {
.bento {
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-template-areas: "fogl" "napt" "emlk" "kuty" "penz" "csap" "szin";
margin-bottom: 64px;
}
.bento-csempe { min-height: 300px; }
.bento-foglalas { min-height: 520px; }
.bento-foglalas img { width: 62%; }
}
/* ============================================================================
„Három lépés” – rögzített telefon (Apple-stílusú történetmesélés)
Asztali nézetben a lépések egymás alatt, a telefon mellettük a képernyőn
marad, és a kijelzője az épp középen lévő lépéshez vált.
============================================================================ */
.start-telefon { display: none; }
@media (min-width: 900px) {
.start-tortenet {
max-width: 1080px; margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 72px;
align-items: start;
}
.start-tortenet .start-grid {
max-width: none; margin: 0;
grid-template-columns: 1fr;
gap: 0;
}
.start-tortenet .start-step {
min-height: 62vh;
display: flex; flex-direction: column; justify-content: center;
background: transparent; border: none; box-shadow: none;
padding: 0 0 0 4px;
}
.start-tortenet .start-step h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 14px; }
.start-tortenet .start-step p { font-size: clamp(16px, 1.3vw, 19px); max-width: 30em; }
/* A nem aktív lépések halványak – a tartalmukat halványítjuk, hogy a felbukkanás animációval ne ütközzön */
.start-tortenet .start-step > * { transition: opacity 0.45s ease; }
.start-tortenet.js-aktiv .start-step:not(.aktiv) > * { opacity: 0.28; }
.start-telefon {
display: block;
position: sticky;
top: calc(50vh - 330px);
padding: 30px 0;
}
}
.start-telefon-keret {
position: relative;
width: 300px; margin: 0 auto;
background: #18181b;
padding: 12px;
border-radius: 54px;
box-shadow: 0 0 0 2px #3f3f46 inset, 0 40px 70px -30px rgba(101, 36, 16, 0.55);
}
.start-telefon-sziget {
position: absolute; z-index: 3;
top: 24px; left: 50%;
width: 92px; height: 26px; margin-left: -46px;
background: #0b0b0c; border-radius: 20px;
}
.start-telefon-kepernyo {
position: relative;
aspect-ratio: 9 / 19.5;
border-radius: 42px;
overflow: hidden;
background: #f8fafc;
}
.start-telefon-allapotsor {
position: absolute; z-index: 2; top: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
height: 48px; padding: 0 26px 0 34px;
font-size: 14px; font-weight: 700; color: #111827;
background: rgba(255, 255, 255, 0.92);
}
.start-telefon-allapotsor .eszk-ikonok { gap: 5px; }
.start-telefon-allapotsor .eszk-ikonok svg { height: 10px; }
.start-telefon-allapotsor .eszk-ikonok .ikon-akku { height: 11px; }
.start-telefon-kepernyo img {
position: absolute; left: 0; top: 48px;
width: 100%; height: calc(100% - 48px);
object-fit: cover; object-position: center top;
opacity: 0; scale: 1.04;
transition: opacity 0.55s ease, scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.start-telefon[data-aktiv="1"] img[data-lepes="1"],
.start-telefon[data-aktiv="2"] img[data-lepes="2"],
.start-telefon[data-aktiv="3"] img[data-lepes="3"] { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) {
.start-telefon-kepernyo img, .start-tortenet .start-step > * { transition: none; }
}
/* ============================================================================
Funkció-lista „nézd meg közelebbről” (Apple-stílus) – Naptár & Foglalás
Bal oldalt nyitható elemek, jobb oldalt rögzített képpanel, ami az épp
nyitott elemhez vált. Mobilon a képpanel a nyitott elem alá kerül (JS).
============================================================================ */
.ft {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 48px;
align-items: start;
}
.ft-lista { display: flex; flex-direction: column; gap: 6px; }
.ft-elem {
border-radius: 22px;
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.ft-elem.aktiv {
background: #fff;
box-shadow: 0 1px 2px rgba(101, 36, 16, 0.05), 0 14px 34px -20px rgba(101, 36, 16, 0.35);
}
.ft-gomb {
width: 100%;
display: flex; align-items: center; gap: 14px;
padding: 15px 20px;
background: none; border: none; border-radius: 22px;
font: inherit;
font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
text-align: left;
color: var(--tg-fg-3);
cursor: pointer;
transition: color 0.25s ease;
}
.ft-gomb:hover, .ft-elem.aktiv .ft-gomb { color: var(--tg-fg-1); }
.ft-gomb:focus-visible { outline: 2px solid #d97757; outline-offset: 2px; }
.ft-plusz {
position: relative; flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid rgba(101, 36, 16, 0.28);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, border-color 0.3s;
}
.ft-plusz::before, .ft-plusz::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: 12px; height: 2px; margin: -1px 0 0 -6px;
border-radius: 2px; background: #9a4a26;
transition: background 0.3s;
}
.ft-plusz::after { transform: rotate(90deg); }
.ft-elem.aktiv .ft-plusz { transform: rotate(45deg); background: var(--tg-brand-gradient); border-color: transparent; }
.ft-elem.aktiv .ft-plusz::before, .ft-elem.aktiv .ft-plusz::after { background: #fff; }
/* Puha lenyílás: 0fr → 1fr sormagasság-animáció */
.ft-leiras {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ft-elem.aktiv .ft-leiras { grid-template-rows: 1fr; }
.ft-leiras > div { overflow: hidden; padding: 0 22px 0 62px; }
.ft-leiras p {
font-size: 15.5px; line-height: 1.6; color: var(--tg-fg-3);
text-wrap: pretty;
margin-bottom: 10px;
}
.ft-leiras p:last-child { margin-bottom: 20px; }
.ft-media {
position: sticky; top: 96px;
height: 600px;
border-radius: 32px;
overflow: hidden;
background: linear-gradient(160deg, #fffaf4 0%, #f7e8d6 100%);
border: 1px solid rgba(101, 36, 16, 0.07);
}
.ft-kep {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 40px;
opacity: 0; scale: 0.97;
visibility: hidden;
transition: opacity 0.5s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s;
}
.ft-kep.aktiv { opacity: 1; scale: 1; visibility: visible; transition: opacity 0.5s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.ft-kep img, .ft-kep video {
display: block;
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
border-radius: 14px;
filter: drop-shadow(0 18px 30px rgba(101, 36, 16, 0.22)) drop-shadow(0 2px 6px rgba(101, 36, 16, 0.10));
}
.ft-kep .feat-slide-placeholder { position: static; width: 100%; }
.ft-kep .feat-slide-placeholder svg { width: 160px; max-width: 40%; }
@media (max-width: 899px) {
.ft { grid-template-columns: 1fr; gap: 0; }
.ft-media {
position: relative; top: auto;
height: auto;
margin: 0 14px 16px;
border-radius: 22px;
}
/* Mobilon csak a nyitott kép látszik, a panel a kép magasságához igazodik */
.ft-kep { position: static; display: none; padding: 20px; }
.ft-kep.aktiv { display: flex; }
.ft-kep img, .ft-kep video { max-height: 420px; }
.ft-kep .feat-slide-placeholder { padding: 40px 0; }
.ft-leiras > div { padding-left: 62px; }
}
@media (prefers-reduced-motion: reduce) {
.ft-leiras, .ft-kep, .ft-plusz, .ft-elem { transition: none; }
}