/* Google Fonts sa načítavajú v cez inc/fonts_head.php (nie @import — PageSpeed render-blocking reťaz). */ :root{ /* paleta inšpirovaná Pantone Farbou roka 2025 (Mocha Mousse 17-1230, #A47764) a Farbou roka 2026 (Cloud Dancer 11-4201, #F0EEE9) */ --ink: #14120f; --ink-2: #1d1a15; --line-dark: #37322a; --paper: #f0eee9; /* Cloud Dancer — PANTONE 11-4201, farba roka 2026 */ --paper-2: #e6e0d6; --line: #dcd4c6; --text: #17140f; --text-muted: #5c5646; --paper-text: #f0eee9; --paper-text-muted: #c8bfa9; --accent: #a47764; /* Mocha Mousse — PANTONE 17-1230, farba roka 2025 */ --accent-2: #7a5644; /* tmavší odtieň Mocha Mousse — pre malý text a hover, kvôli kontrastu */ --accent-warm: #e3a468; /* teplý zvýrazňujúci odtieň — len pre logo gradient/živosť */ --accent-ink: #1a1208; --error: #c0392b; --success: #2f7a4d; --radius: 3px; --shadow: 0 1px 2px rgba(20,18,15,.05), 0 14px 30px rgba(20,18,15,.08); } /* ---------- tmavý režim — rovnaké hodnoty ako design-tokens.css (--color-* ekvivalenty), len namapované na tieto staršie názvy premenných, aby sa dark mode dostal aj do sekcií verejného webu/portálu, ktoré ešte používajú tento starší token systém. ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #14120f; --paper-2: #1d1a15; --line: #37322a; --text: #f0eee9; --text-muted: #b6ac96; --ink: #1d1a15; --ink-2: #221f19; --line-dark: #4a4437; --paper-text: #f0eee9; --paper-text-muted: #c8bfa9; --accent: #e3a468; --accent-2: #e3a468; --accent-warm: #a47764; --accent-ink: #1a1208; --error: #e6584a; --success: #4caf7d; } } :root[data-theme="dark"] { --paper: #14120f; --paper-2: #1d1a15; --line: #37322a; --text: #f0eee9; --text-muted: #b6ac96; --ink: #1d1a15; --ink-2: #221f19; --line-dark: #4a4437; --paper-text: #f0eee9; --paper-text-muted: #c8bfa9; --accent: #e3a468; --accent-2: #e3a468; --accent-warm: #a47764; --accent-ink: #1a1208; --error: #e6584a; --success: #4caf7d; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* Plynulý scroll je pre kotvy na verejnom webe. V paneloch (admin/tvorca/portál) žiadne kotvy nie sú a prehliadač ním animuje aj obnovu pozície pri späť/dopredu — pôsobí to ako nechcený posun stránky. `is-app-shell` nastavuje inc/nav_boot.php. Rovnako ho vypíname pri prefers-reduced-motion. */ html.is-app-shell{ scroll-behavior:auto; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--text); font-family:'Work Sans',ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ul{ margin:0; padding:0; } .wrap{ max-width:1200px; margin:0 auto; padding:0 32px; } @media (max-width:640px){ .wrap{ padding:0 20px; } } h1,h2,h3,h4{ font-family:'Archivo',ui-sans-serif,system-ui,sans-serif; /* PageSpeed: jedno písmo nadpisov (Archivo je načítané pre logo), Inter (95 kB) sa už nesťahuje */ font-optical-sizing:auto; font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance; } p{ margin:0 0 1em; color:var(--text-muted); max-width:60ch; } p:last-child{ margin-bottom:0; } .mono{ font-family:'Work Sans'; letter-spacing:.08em; text-transform:uppercase; font-size:12px; } strong{ color:var(--text); font-weight:600; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); } .eyebrow::before{ content:""; width:16px; height:2px; background:var(--accent); display:inline-block; } .eyebrow.on-ink{ color:#d7ad98; } .badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:100px; border:1px solid; font-family:'Work Sans'; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .badge-live{ color:#8fd6ab; border-color:#3a6b4d; background:rgba(31,122,77,.15); } .badge-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#4cd787; flex-shrink:0; animation:rec-blink 1.6s ease-in-out infinite; } .badge-ready{ color:#d7ad98; border-color:var(--line-dark); background:rgba(164,119,100,.14); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--radius); font-weight:600; font-size:14px; letter-spacing:.03em; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; font-family:'Work Sans'; } .btn-outline{ border-color:var(--line); color:var(--text); background:transparent; } .btn-outline:hover{ border-color:var(--text); } .btn-outline.on-ink{ border-color:var(--line-dark); color:var(--paper-text); } .btn-outline.on-ink:hover{ border-color:var(--paper-text-muted); } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-header .wrap{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; height:78px; } .logo{ display:inline-flex; align-items:center; gap:9px; font-family:'Archivo'; font-weight:900; font-size:20px; color:var(--text); letter-spacing:-.01em; } /* ---------- logo: ikonová značka + animovaný gradient na "Pixel" ---------- */ .logo-mark{ width:26px; height:26px; flex-shrink:0; transition:transform .45s cubic-bezier(.16,1,.3,1); } .logo-custom{ height:32px; width:auto; max-width:180px; display:block; object-fit:contain; } .logo:hover .logo-mark{ transform:rotate(-10deg) scale(1.1); } .logo-mark-bg{ fill:url(#logoGrad); } .logo-mark-dot{ transform-origin:center; animation:logo-dot-pulse 3.4s ease-in-out infinite; } .logo-mark-dot-a{ fill:var(--paper); } .logo-mark-dot-b{ fill:var(--accent-ink); opacity:.85; animation-delay:.5s; } .footer-brand .logo-mark-dot-a{ fill:var(--ink); } .footer-brand .logo-mark-dot-b{ fill:var(--paper); opacity:.8; } @keyframes logo-dot-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.8); opacity:.65; } } .logo-grad-stop-1{ stop-color:var(--accent); } .logo-grad-stop-2{ stop-color:var(--accent-warm); } .logo-grad-stop-3{ stop-color:var(--accent-2); } .logo-shine{ background-image:linear-gradient(110deg, var(--accent) 10%, var(--accent-warm) 32%, var(--accent) 50%, var(--accent-warm) 72%, var(--accent) 90%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:logo-shine 7s ease-in-out infinite; } .logo:hover .logo-shine{ animation-duration:1.6s; } @keyframes logo-shine{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } } @media (prefers-reduced-motion:reduce){ .logo-mark, .logo-mark-dot, .logo-shine{ animation:none !important; transition:none !important; } .logo-shine{ background-position:50% 50%; } } .main-nav{ display:flex; align-items:center; gap:22px; flex:1; min-width:0; } .main-nav > a{ font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap; } .main-nav > a:hover{ color:var(--text); border-color:var(--accent); } .header-actions{ display:flex; align-items:center; gap:16px; } /* ---------- nav podmenu (Služby, Viac) ---------- */ .nav-item{ position:relative; display:flex; align-items:center; gap:2px; } .nav-link{ font-family:'Work Sans'; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap; background:none; border-width:0 0 1.5px; border-style:solid; border-color:transparent; cursor:pointer; } .nav-link-button{ padding-right:0; } .nav-item:hover .nav-link, .nav-item:focus-within .nav-link{ color:var(--text); border-color:var(--accent); } .nav-caret{ display:flex; align-items:center; justify-content:center; background:none; border:none; padding:4px 2px; cursor:pointer; color:var(--text-muted); } .nav-caret svg{ width:13px; height:13px; transition:transform .2s ease; } .nav-item:hover .nav-caret svg, .nav-item.is-expanded .nav-caret svg{ transform:rotate(180deg); } .nav-dropdown{ list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:-14px; min-width:230px; background:var(--paper); border:1.5px solid var(--line); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:60; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-expanded .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown li a{ display:block; padding:9px 12px; border-radius:var(--radius); font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); } .nav-dropdown li a:hover{ background:var(--paper-2); color:var(--text); } /* ---------- prepínač "Portál" v header-actions (klient / influencer) — rovnaký .nav-item/ .nav-dropdown mechanizmus ako "Pre firmy", len napravo pri okraji hlavičky, preto dropdown zarovnaný doprava namiesto doľava, a tlačidlo si drží vzhľad primárneho ep-btn. ---------- */ .nav-item-portal-caret{ width:13px; height:13px; margin-left:2px; transition:transform .2s ease; flex-shrink:0; } .nav-item-portal.is-expanded .nav-item-portal-caret{ transform:rotate(180deg); } .nav-item-portal .nav-dropdown{ left:auto; right:0; min-width:220px; } /* ---------- mega menu v1.37.1 — plnošírkový panel pod hlavičkou: intro skupiny | zoznam s ikonami | „Neviete si vybrať?“ ---------- */ .main-nav{ justify-content:center; gap:2px; } .main-nav > a, .nav-link{ font-size:12px; letter-spacing:.06em; padding:8px 10px; border-bottom:0; border-radius:8px; } .main-nav > a:hover, .nav-item:hover .nav-link, .nav-item:focus-within .nav-link, .nav-item.is-expanded .nav-link{ color:var(--text); background:var(--paper-2); border-color:transparent; } .nav-item{ gap:0; } .nav-caret{ padding:8px 6px 8px 0; margin-left:-6px; } .nav-item--mega{ position:static; } .nav-mega-panel{ left:0; right:0; top:100%; padding:0; min-width:0; border-left:0; border-right:0; border-top:1px solid var(--line); background:var(--paper); box-shadow:0 24px 48px -24px rgba(20,18,15,.35); transform:none; transition:opacity .14s ease; /* skrytie okamžite (visibility bez prechodu) — dva panely sa nikdy neprekryjú */ } /* Ovládanie myšou: položky menu sú vysoké ako celá hlavička (žiadna medzera medzi položkou a panelom, cez ktorú by hover „vypadol“), panel sa otvára aj cez triedu .is-hover z JS s krátkym oneskorením pri odchode (main.js). */ @media (min-width:1261px){ .main-nav{ align-self:stretch; } .main-nav > a, .nav-item{ height:100%; display:flex; align-items:center; } .nav-item--mega .nav-link, .nav-item--mega .nav-caret{ height:auto; } } .nav-item.is-hover .nav-mega-panel, .nav-item.is-hover .nav-dropdown{ opacity:1; visibility:visible; transform:none; } .nav-item:hover .nav-mega-panel, .nav-item:focus-within .nav-mega-panel, .nav-item.is-expanded .nav-mega-panel{ transform:none; } .nav-mega-intro .text-link{ color:var(--accent-2); font-weight:700; font-size:13.5px; } .nav-mega-intro .text-link:hover{ color:var(--text); } .nav-mega-inner{ max-width:1200px; margin:0 auto; padding:28px 32px 30px; display:grid; grid-template-columns:240px minmax(0,1fr) 250px; gap:36px; } .nav-mega-intro{ padding-right:28px; border-right:1px solid var(--line); } .nav-mega-intro-title{ margin:0 0 8px; font-family:'Archivo'; font-size:17px; font-weight:800; letter-spacing:.02em; color:var(--text); text-transform:uppercase; } .nav-mega-intro-text{ margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--text-muted); max-width:none; } .nav-mega-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:2px; align-content:start; } .nav-mega-list--two{ grid-template-columns:1fr 1fr; column-gap:18px; } .nav-mega-list li a{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--text); text-transform:none; letter-spacing:0; text-decoration:none; } .nav-mega-list li a:hover{ background:var(--paper-2); } .nav-mega-icon{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--accent-2); } .nav-mega-list li a:hover .nav-mega-icon{ background:var(--accent); color:var(--accent-ink); } .nav-mega-icon svg{ width:15px; height:15px; } .nav-mega-highlight{ padding:18px; border-radius:var(--radius); background:var(--paper-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; align-self:start; } .nav-mega-highlight-eyebrow{ margin:0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); } .nav-mega-highlight-text{ margin:0; font-size:13px; line-height:1.5; color:var(--text-muted); } .nav-mega-highlight .ep-btn{ align-self:flex-start; margin-top:4px; } .header-actions{ gap:8px; justify-self:end; flex-shrink:0; } @media (max-width:1400px){ .nav-mega-inner{ grid-template-columns:220px minmax(0,1fr) 230px; gap:28px; } } @media (max-width:1260px){ .nav-item--mega{ position:relative; } .nav-mega-panel{ position:static; border:0; box-shadow:none; background:transparent; } .nav-mega-inner{ display:block; padding:0 0 6px; } .nav-mega-intro, .nav-mega-highlight{ display:none; } .nav-mega-list, .nav-mega-list--two{ grid-template-columns:1fr; gap:0; } .nav-mega-list li a{ padding:10px 6px; } .nav-mega-icon{ display:none; } } /* ---------- hlavné menu v1.37.0: 6 skupín + „Prihlásiť“ mini-panel + „Vyžiadať ponuku“ ---------- */ .main-nav .mobile-nav-cta{ display:none !important; } .header-cta{ white-space:nowrap; } .header-login{ white-space:nowrap; } .nav-dropdown-login{ left:auto; right:0; min-width:340px; padding:14px; } .nav-login-title{ margin:0 0 10px; padding:0 4px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .nav-login-card{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:var(--radius); border:1.5px solid var(--line); background:var(--paper-2); margin-bottom:8px; text-decoration:none; transition:border-color .15s ease; } .nav-login-card:hover{ border-color:var(--accent); } .nav-login-card-icon{ width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nav-login-card-icon svg{ width:16px; height:16px; } .nav-login-card-text{ display:flex; flex-direction:column; gap:2px; min-width:0; } .nav-login-card-text strong{ font-size:13.5px; color:var(--text); } .nav-login-card-text span{ font-size:12px; line-height:1.4; color:var(--text-muted); } .nav-login-card-text em{ font-style:normal; font-size:12px; font-weight:700; color:var(--accent-2); margin-top:3px; } .nav-login-hint{ margin:6px 0 0; padding:0 4px; font-size:12px; color:var(--text-muted); } .nav-login-hint a{ color:var(--accent-2); font-weight:600; } /* 1261–1600 px (notebooky a bežné monitory, dlhé HU/DE/RO štítky): užšie položky, jazyk len vlajkou, tesnejšie akcie — všetko ostáva viditeľné */ @media (max-width:1600px){ .main-nav > a, .nav-link{ font-size:12px; letter-spacing:.04em; padding:8px 5px; } .header-actions{ gap:6px; } .header-cta, .header-login{ padding-left:13px; padding-right:13px; } .header-actions .lang-code{ display:none; } .header-actions .lang-current{ padding:9px 10px; } .site-header .wrap{ gap:16px; } } @media (max-width:1260px){ .header-cta{ display:none !important; } .main-nav .mobile-nav-cta{ display:inline-flex !important; justify-content:center; margin-top:8px; } } @media (max-width:1260px){ .mobile-nav-utility{ display:flex !important; align-items:center; gap:10px; padding:6px 0 16px; border-bottom:1px solid var(--line); margin-bottom:6px; } .mobile-nav-utility .theme-options, .mobile-nav-utility .lang-options{ left:0; right:auto; } } @media (max-width:760px){ .main-nav .mobile-nav-cta{ display:inline-flex !important; justify-content:center; margin-top:8px; } .nav-dropdown-login{ min-width:280px; } } .lang-switch{ position:relative; } .lang-current{ background:transparent; border:1.5px solid var(--line); color:var(--text); border-radius:var(--radius); padding:9px 14px; font-size:12.5px; font-weight:600; letter-spacing:.03em; cursor:pointer; } .lang-current:hover{ border-color:var(--text); } .lang-options{ list-style:none; position:absolute; right:0; top:calc(100% + 8px); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-width:170px; padding:4px; display:none; z-index:60; } .lang-switch.open .lang-options{ display:block; } .lang-options a{ display:block; padding:9px 12px; font-size:13.5px; color:var(--text-muted); } .lang-options a:hover{ background:var(--paper-2); color:var(--text); } .theme-switch{ position:relative; } .theme-current{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:transparent; border:1.5px solid var(--line); color:var(--text); border-radius:var(--radius); cursor:pointer; } .theme-current:hover{ border-color:var(--text); } .theme-current svg{ width:18px; height:18px; } .theme-options{ list-style:none; position:absolute; right:0; top:calc(100% + 8px); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-width:160px; padding:4px; display:none; z-index:60; } .theme-switch.open .theme-options{ display:block; } .theme-options button{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none; padding:9px 12px; font-size:13.5px; color:var(--text-muted); font-family:inherit; text-align:left; cursor:pointer; border-radius:var(--radius); } .theme-options button svg{ width:16px; height:16px; flex-shrink:0; } .theme-options button:hover{ background:var(--paper-2); color:var(--text); } .theme-options button[aria-checked="true"]{ color:var(--accent-2); font-weight:600; } /* druhá kópia prepínača témy/jazyka vnútri #main-nav — na úzkych šírkach sa do hornej lišty spolu s logom, hamburgerom a tlačidlom Portál už nezmestia (pozri @media max-width:600px nižšie); táto kópia žije v mobilnom výsuvnom menu, kde je na ňu vždy dosť miesta. Skrytá inde. */ .mobile-nav-utility{ display:none; } .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:40px; height:40px; border-radius:var(--radius); border:1.5px solid var(--line); background:transparent; cursor:pointer; padding:0; } .nav-toggle span{ width:16px; height:1.5px; background:var(--text); } /* Zatemnenie za mobilným výsuvným menu (.main-nav) — predtým chýbalo, takže obsah stránky pod menu ostával plne viditeľný a interaktívny bez akéhokoľvek vizuálneho oddelenia (rovnaký vzor ako .portal-drawer-backdrop/.drawer-backdrop, tu chýbal). */ .main-nav-backdrop{ position:fixed; inset:0; z-index:45; background:rgba(20,18,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s ease; } .main-nav-backdrop.is-open{ opacity:1; pointer-events:auto; } /* v1.37.0: hamburger už od 1260 px — šesť skupín menu + Prihlásiť sa vodorovne zmestí len na širších obrazovkách (nemecké/rumunské štítky sú dlhšie ako slovenské). */ @media (max-width:1260px){ .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:6px 32px 20px; background:var(--paper); border-bottom:1px solid var(--line); max-height:calc(100vh - 78px); overflow-y:auto; } .main-nav > a{ padding:14px 0; border-bottom:1px solid var(--line); } .nav-toggle{ display:flex; } .site-header.nav-open .main-nav{ display:flex; } .nav-item{ flex-direction:column; align-items:stretch; border-bottom:1px solid var(--line); } .nav-item .nav-link{ padding:14px 0; border-bottom:none; flex:1; text-align:left; } .nav-item .nav-caret{ position:absolute; right:0; top:2px; padding:12px 4px; } .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; padding:0 0 10px 4px; display:none; background:transparent; } .nav-item.is-expanded .nav-dropdown{ display:block; } .nav-dropdown li a{ padding:10px 4px; font-size:13.5px; } /* .nav-item-portal žije v .header-actions, nie v .main-nav — vyššie pravidlá v tomto bloku (stĺpcové .nav-item, statický .nav-dropdown) sú mienené pre vysúvacie mobilné menu a portál tlačidlu by rozbili vzhľad; tu sa mu vracia pôvodné "plávajúce" správanie dropdownu. */ .nav-item-portal{ flex-direction:row; align-items:center; border-bottom:none; } .nav-item-portal .nav-dropdown{ position:absolute; top:100%; right:0; left:auto; min-width:220px; display:block; opacity:0; visibility:hidden; transform:translateY(-4px); border:1.5px solid var(--line); box-shadow:var(--shadow); background:var(--paper); padding:8px; transition:opacity .18s ease, transform .18s ease, visibility .18s; } .nav-item-portal.is-expanded .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .nav-item-portal .nav-dropdown li a{ padding:9px 12px; font-size:13px; } } /* na úzkych mobilných šírkach sa logo + hamburger + prepínač témy + prepínač jazyka + tlačidlo Portál naraz do hornej lišty nezmestia (reálne pretečenie potvrdené pri 375px) — prepínače témy a jazyka sa presúvajú do vysúvacieho menu (.mobile-nav-utility, vykreslené vnútri #main-nav) a v hornej lište ostáva len to nutné: hamburger a CTA Portál. */ @media (max-width:600px){ .header-actions .theme-switch, .header-actions .lang-switch{ display:none; } .mobile-nav-utility{ display:flex; align-items:center; gap:10px; padding:6px 0 16px; border-bottom:1px solid var(--line); margin-bottom:6px; } .mobile-nav-utility .theme-options, .mobile-nav-utility .lang-options{ left:0; right:auto; } } /* ---------- hero (fotografia z reálneho eventu na pozadí) ---------- */ .hero{ background-color:var(--ink); background-image:var(--hero-grad, linear-gradient(100deg, rgba(20,18,15,.92) 0%, rgba(20,18,15,.78) 38%, rgba(20,18,15,.4) 68%, transparent 100%)), var(--hero-img, none); background-size:cover; background-position:center 40%; background-repeat:no-repeat; color:var(--paper-text); position:relative; overflow:hidden; min-height:540px; display:flex; align-items:flex-end; padding-top:56px; } .hero.hero-sm{ min-height:400px; padding-top:44px; } .hero.hero-sm .wrap{ padding-bottom:40px; } .hero.hero-sm h1{ font-size:clamp(28px,3.6vw,44px); } section.on-ink{ background-color:var(--ink); color:var(--paper-text); background-image:radial-gradient(rgba(240,238,233,.06) 1px, transparent 1px); background-size:22px 22px; } section.on-ink h2{ color:var(--paper-text); } section.on-ink p{ color:var(--paper-text-muted); } /* .ep-btn--secondary je zdieľaná komponenta (assets/css/components.css, pôvodne pre admin/portál) — jej text farba (--color-text) sleduje SVETLÝ/TMAVÝ REŽIM CELÉHO webu, nie tmavú sekciu, v ktorej práve sedí. Marketingové tmavé sekcie/pásy (.on-ink, .influencer-band, .portal-banner) sú vždy tmavé bez ohľadu na zvolený režim, takže so svetlým režimom (predvolené) vychádzal takmer čierny text na tmavom pozadí — takmer nečitateľné (nahlásené priamo na tlačidle "Vytvoriť si účet"). Prepíšeme na vlastné --paper-text/--accent-2 tokeny webu, ktoré sa už správne prispôsobujú. v1.63.1 — do zoznamu pribudol aj .hero: ten je vždy tmavý (background-color:var(--ink)), len doteraz v ňom žiadna stránka sekundárne tlačidlo nemala, takže sa na to neprišlo. */ /* v1.115.0 — zoznam tmavých plôch je odteraz TU, na jednom mieste, a platí pre všetky prvky, ktoré si farbu berú z globálneho pravidla (sekundárne tlačidlo, ). Doteraz sa dopĺňal po jednom vždy, keď to niekde prasklo (v1.63.1 tlačidlo v .hero), a znovu to prasklo na dvoch miestach: číslo v .team-stats na /tim a tlačidlo v .live-shop-section na domovskej a /live-shopping. NOVÁ TMAVÁ PLOCHA PATRÍ DO TÝCHTO ZOZNAMOV. */ .on-ink .ep-btn--secondary, .influencer-band .ep-btn--secondary, .portal-banner .ep-btn--secondary, .hero .ep-btn--secondary, .live-shop-section .ep-btn--secondary, .newsletter-band .ep-btn--secondary, .sysmap-center .ep-btn--secondary, .live-card .ep-btn--secondary, .live-demo .ep-btn--secondary{ border-color:var(--line-dark); color:var(--paper-text); } .on-ink .ep-btn--secondary:hover, .influencer-band .ep-btn--secondary:hover, .portal-banner .ep-btn--secondary:hover, .hero .ep-btn--secondary:hover, .live-shop-section .ep-btn--secondary:hover, .newsletter-band .ep-btn--secondary:hover, .sysmap-center .ep-btn--secondary:hover, .live-card .ep-btn--secondary:hover, .live-demo .ep-btn--secondary:hover{ border-color:var(--accent); color:var(--accent-2); } /* strong{ color:var(--text) } je globálne pravidlo; --text je v svetlom režime takmer čierny, kým --ink ostáva tmavý v oboch. Na tmavej ploche preto text zmizol. Dediť farbu plochy je správne v oboch režimoch. */ .on-ink strong, .influencer-band strong, .portal-banner strong, .hero strong, .live-shop-section strong, .live-card strong, .live-demo strong, .newsletter-band strong, .sysmap-center strong, .team-stats strong, .site-footer strong{ color:inherit; } .tag-cloud{ list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; } .tag-cloud li{ padding:10px 20px; border:1.5px solid var(--line); border-radius:var(--radius); font-size:13.5px; font-weight:600; color:var(--text-muted); } .hero .wrap{ position:relative; z-index:2; pointer-events:none; width:100%; padding-bottom:48px; } .hero .btn, .hero .ep-btn, .hero .text-link{ pointer-events:auto; } .hero-copy{ max-width:720px; } .hero h1{ color:var(--paper-text); font-size:clamp(30px,4vw,52px); max-width:14ch; margin:18px 0 20px; text-shadow:0 2px 24px rgba(0,0,0,.35); } .hero h1 em{ font-style:normal; color:var(--accent); } .hero .lede{ color:var(--paper-text-muted); font-size:16px; max-width:48ch; margin-bottom:32px; } .hero-ctas{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; } /* hero — tri piliere EVENT · INFLUENCE · OS (namiesto radu ikon služieb) */ .hero-pillars{ list-style:none; margin:0 0 30px; padding:0; display:flex; gap:12px; flex-wrap:wrap; pointer-events:auto; } .hero-pillars li a{ display:flex; flex-direction:column; gap:4px; padding:12px 16px; min-width:200px; border-radius:10px; text-decoration:none; background:rgba(20,18,15,.55); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px); transition:border-color .15s ease, background .15s ease; } .hero-pillars li a:hover{ border-color:var(--accent); background:rgba(20,18,15,.75); } .hero-pillar-name{ font-family:'Archivo'; font-weight:800; font-size:13px; letter-spacing:.12em; color:var(--accent); } .hero-pillar-tags{ font-size:12px; line-height:1.45; color:var(--paper-text-muted); } @media (max-width:640px){ .hero-pillars{ flex-direction:column; } .hero-pillars li a{ min-width:0; } } /* sekcia „Jeden systém, tri piliere“ */ .pillars-section{ padding-bottom:0; } .pillar-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .pillar-card{ position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 26px; border-radius:var(--radius); background:var(--paper-2); border:1.5px solid var(--line); overflow:hidden; } .pillar-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); } .pillar-index{ font-family:'Archivo'; font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--text-muted); } .pillar-card h3{ font-family:'Archivo'; font-size:clamp(26px,3vw,34px); font-weight:900; letter-spacing:.06em; margin:0; line-height:1; } .pillar-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .pillar-tags li{ font-size:12px; font-weight:700; letter-spacing:.04em; padding:5px 10px; border-radius:20px; border:1px solid var(--line); color:var(--text); background:var(--surface, transparent); } .pillar-card p{ font-size:14px; line-height:1.55; color:var(--text-muted); margin:0; max-width:none; } .pillar-formats{ font-size:13px; } .pillar-formats span{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px; color:var(--accent-2); margin-right:6px; } .pillar-formats a{ color:var(--text); font-weight:600; border-bottom:1.5px solid var(--accent); } .pillar-card .text-link{ margin-top:auto; align-self:flex-start; } @media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr; } } .hero-icons{ list-style:none; display:flex; flex-wrap:nowrap; gap:0; margin:32px 0; padding:16px 20px; background:rgba(20,18,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(240,238,233,.12); border-radius:var(--radius); } .hero-icons li{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; padding:2px 16px; border-right:1px solid rgba(240,238,233,.14); } .hero-icons li:first-child{ padding-left:0; } .hero-icons li:last-child{ border-right:none; padding-right:0; } .hero-icons svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; } .hero-icons span{ font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.4; color:var(--paper-text); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.4); } @media (max-width:900px){ .hero-icons{ flex-wrap:wrap; gap:16px 0; } .hero-icons li{ flex:none; padding:2px 14px; width:calc(50% - 0px); border-right:none; } .hero-icons span{ white-space:normal; } } /* .text-link: predvolene pre svetlé plochy (text farbou textu, linka akcentom); na tmavých plochách (hero, section.on-ink, .on-ink) svetlý variant — predtým bol svetlý predvolený, takže na kartách pilierov a inde bol text neviditeľný. */ .text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; letter-spacing:.03em; color:var(--text); border-bottom:1.5px solid var(--accent); padding-bottom:3px; } .text-link.on-ink, .hero .text-link, section.on-ink .text-link, .on-ink .text-link{ color:var(--paper-text); border-bottom-color:var(--line-dark); } .text-link span{ color:var(--accent); transition:transform .2s ease; } .text-link:hover{ border-color:var(--accent); } .text-link:hover span{ transform:translateX(4px); } /* @keyframes rec-blink is still used by .badge-live::before above — kept even though the .rec-tag/.rec-dot hero "recording" indicator markup that used to pair with it was removed. */ @keyframes rec-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } } @media (max-width:700px){ /* na užšom displeji je obsah vyšší (zalamuje sa) a zasahuje aj do svetlejšej hornej časti fotky — preto tu potrebuje jednotnejšie, tmavšie prekrytie ako na desktope */ .hero{ background-image:linear-gradient(to top, rgba(20,18,15,.97) 0%, rgba(20,18,15,.94) 40%, rgba(20,18,15,.85) 65%, rgba(20,18,15,.6) 100%), var(--hero-img-m, var(--hero-img, url('/assets/img/hero-gala-960.webp')))!important; min-height:auto; padding-top:40px; } .hero .wrap{ padding-bottom:32px; } } /* žiara, ktorá sleduje kurzor cez pixel pole */ .hero-glow{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(164,119,100,.45), transparent 70%); transition:opacity .35s ease; } .hero:hover .hero-glow{ opacity:1; } @media (max-width:900px){ .hero-glow{ display:none; } } /* veľký, priehľadný ikonový vodoznak v hero sekcii detailu služby */ .hero-icon-mark{ position:absolute; z-index:0; right:-30px; bottom:-40px; width:320px; height:320px; opacity:.07; color:var(--paper-text); pointer-events:none; } @media (max-width:900px){ .hero-icon-mark{ display:none; } } .service-breadcrumb{ font-size:12.5px; margin-bottom:18px; } /* „naladenie signálu" pri načítaní hero obsahu */ /* PageSpeed: kratšie a bez dlhých oneskorení — nadpis hero je viditeľný do ~0,3 s od vykreslenia (LCP) */ .tune-in{ animation:tune-in .45s cubic-bezier(.2,.7,.3,1) both; } .tune-1{ animation-delay:0s; } .tune-2{ animation-delay:.04s; } .tune-3{ animation-delay:.08s; } .tune-4{ animation-delay:.12s; } .tune-5{ animation-delay:.16s; } @keyframes tune-in{ 0%{ opacity:0; filter:blur(7px); transform:translateY(10px); } 60%{ filter:blur(0); } 100%{ opacity:1; filter:blur(0); transform:translateY(0); } } /* postupné odhaľovanie obsahu pri scrollovaní */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; transition-delay:calc(var(--stagger, 0) * .09s); } .reveal.is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .tune-in{ animation:none; opacity:1; } .reveal{ opacity:1; transform:none; transition:none; } .hero-glow{ display:none; } } .trust-strip{ border-bottom:1px solid var(--line); background:var(--paper-2); overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); } .trust-marquee{ display:flex; width:max-content; animation:trust-scroll 26s linear infinite; } .trust-marquee:hover{ animation-play-state:paused; } .trust-track{ display:flex; gap:44px; padding:18px 44px 18px 0; white-space:nowrap; font-family:'Archivo'; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); flex-shrink:0; } @keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .trust-marquee{ animation:none; } .trust-marquee .trust-track[aria-hidden]{ display:none; } } /* ---------- sections ---------- */ section{ padding:88px 0; } /* section.on-ink{ background/color } already defined once, grouped with its h2/p rules near .hero above — see line ~267 */ .section-head{ max-width:680px; margin-bottom:48px; display:flex; flex-direction:column; gap:14px; } .section-head h2{ font-size:clamp(28px,3.4vw,42px); } .on-ink .section-head h2{ color:var(--paper-text); } .section-head p{ font-size:16px; } .on-ink .section-head p{ color:var(--paper-text-muted); } /* ---------- service blocks (matrix grid) ---------- */ .service-blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--line); border:1.5px solid var(--line); } @media (max-width:900px){ .service-blocks{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .service-blocks{ grid-template-columns:1fr; } } .service-block{ background:var(--paper); padding:36px 32px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; transition:background-color .2s ease; color:var(--text); } .service-block::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .service-block:hover{ background:var(--paper-2); } .service-block:hover::before{ transform:scaleX(1); } .service-block-head{ display:flex; align-items:center; justify-content:space-between; } .service-block-num{ font-family:'Archivo'; font-weight:900; font-size:28px; color:var(--text); letter-spacing:-.01em; } .service-block-title{ font-size:19px; margin:0; } .service-block-desc{ font-size:14px; margin:0; color:var(--text-muted); flex:1; } .service-block-link{ margin-top:8px; padding-top:14px; border-top:1px solid var(--line); font-family:'Archivo'; font-weight:700; font-size:12.5px; letter-spacing:.03em; color:var(--text); } .service-block:hover .service-block-link{ color:var(--accent-2); } /* ---------- badge tag color modifiers (used on the "tag" span inside .service-block, see .service-blocks/.service-block above and inc/pages/services-list.php / home.php) ---------- */ .tag-live{ color:var(--success); } .tag-ready{ color:var(--accent-2); } .cue-link{ font-family:'Archivo'; font-weight:700; font-size:13px; letter-spacing:.03em; white-space:nowrap; border-bottom:1.5px solid var(--accent); padding-bottom:2px; } /* ---------- "Čo vám prinášame" hodnotová mriežka (homepage) ---------- */ .value-prop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } @media (max-width:1024px){ .value-prop-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .value-prop-grid{ grid-template-columns:1fr; } } .value-prop-card{ display:flex; flex-direction:column; gap:12px; } .value-prop-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius); background:var(--paper-2); border:1.5px solid var(--line); color:var(--accent-2); } .value-prop-icon svg{ width:22px; height:22px; } .value-prop-card h3{ font-size:17px; margin:0; } .value-prop-card p{ font-size:14px; color:var(--text-muted); margin:0; } /* ---------- /platforma — 3 paralelné "track" karty (influenceri / manažéri / firmy) ---------- */ .platform-track-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; margin-top:40px; } @media (max-width:900px){ .platform-track-grid{ grid-template-columns:1fr; } } .platform-track-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:16px; } .platform-track-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius); background:var(--paper); border:1.5px solid var(--line); color:var(--accent-2); } .platform-track-icon svg{ width:22px; height:22px; } .platform-track-card h3{ font-size:19px; margin:0; } .platform-track-card > p{ font-size:14px; color:var(--text-muted); margin:0; } .platform-track-list{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0; } .platform-track-list li{ position:relative; padding-left:22px; font-size:13.5px; line-height:1.5; color:var(--text-muted); } .platform-track-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent-2); font-weight:700; } .platform-track-card .ep-btn{ margin-top:auto; align-self:flex-start; } /* ---------- krátka poznámka s odkazom na /platforma (na /influenceri, /kampane) ---------- */ .platform-note{ font-size:13.5px; color:var(--text-muted); margin:20px 0 0; } .platform-note a{ text-decoration:underline; text-underline-offset:2px; color:var(--text); } /* ---------- Influencer Marketplace band (homepage) — rovnaký tmavý-pás vzor ako .flagship-band/ .portal-banner nižšie, len jednoduchší (jeden stĺpec copy + CTA, dekoratívna ikona namiesto fotky). ---------- */ .influencer-band{ background-image:radial-gradient(rgba(240,238,233,.06) 1px, transparent 1px), linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 70%); background-size:22px 22px, auto; position:relative; overflow:hidden; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); } .influencer-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:64px 0; position:relative; z-index:1; } .influencer-band-copy{ display:flex; flex-direction:column; gap:14px; max-width:640px; } .influencer-band h2{ color:var(--paper-text); font-size:clamp(26px,3.4vw,38px); margin:0; } .influencer-band-copy p{ color:var(--paper-text-muted); font-size:15.5px; margin:0; } .influencer-band-note{ font-size:14px; opacity:.82; max-width:62ch; margin:0 0 14px; } .influencer-band-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; } .influencer-band-mark{ width:280px; height:280px; color:var(--accent); opacity:.14; flex-shrink:0; } @media (max-width:900px){ .influencer-band-inner{ flex-direction:column; align-items:flex-start; padding:48px 0; } .influencer-band-mark{ position:absolute; right:-40px; bottom:-40px; width:200px; height:200px; z-index:0; } } @media (max-width:520px){ .influencer-band-mark{ display:none; } } .portal-banner-ctas{ display:flex; gap:12px; flex-wrap:wrap; } /* ---------- flagship band ---------- */ .flagship-band{ background-color:var(--ink); color:var(--paper-text); background-image:radial-gradient(rgba(240,238,233,.06) 1px, transparent 1px); background-size:22px 22px; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; } @media (max-width:860px){ .flagship-band{ grid-template-columns:1fr; } } .flagship-content{ padding:56px 48px 56px max(32px, calc((100vw - 1200px)/2 + 32px)); display:flex; flex-direction:column; justify-content:center; gap:16px; } .flagship-band h2{ color:var(--paper-text); font-size:clamp(26px,3.6vw,40px); max-width:16ch; margin:0; } .flagship-band p{ color:var(--paper-text-muted); font-size:15.5px; max-width:52ch; margin:0; } .flagship-content .btn{ align-self:flex-start; margin-top:6px; } /* ---------- registračný banner "Portál 2.0" ---------- */ .portal-banner{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 60%, #241f18 100%); border-radius:calc(var(--radius) * 2); color:var(--paper-text); padding:52px 48px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; } @media (max-width:820px){ .portal-banner{ grid-template-columns:1fr; padding:40px 28px; } } .portal-banner-mark{ position:absolute; top:-40px; right:-30px; width:260px; height:260px; color:var(--accent); opacity:.14; stroke:var(--accent); stroke-width:.6; pointer-events:none; } @media (max-width:640px){ .portal-banner-mark{ width:180px; height:180px; } } .portal-banner-copy{ position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; } .portal-banner h2{ color:var(--paper-text); font-size:clamp(24px,3vw,34px); margin:0; max-width:18ch; } .portal-banner-copy p{ color:var(--paper-text-muted); font-size:15px; max-width:46ch; margin:0; } .portal-banner-form{ position:relative; z-index:1; } .flagship-points{ list-style:none; margin:2px 0; padding:0; display:flex; flex-direction:column; gap:12px; } .flagship-points li{ display:flex; align-items:center; gap:12px; } .flagship-points svg{ width:20px; height:20px; color:var(--accent); flex-shrink:0; } .flagship-points span{ font-size:14px; color:var(--paper-text-muted); } .flagship-media{ background-size:cover; background-position:center; min-height:320px; position:relative; } .flagship-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(200deg, rgba(20,18,15,.04) 0%, rgba(20,18,15,.55) 100%), linear-gradient(90deg, rgba(20,18,15,.55) 0%, transparent 16%); } @media (max-width:860px){ .flagship-media{ min-height:220px; } .flagship-media::after{ background:linear-gradient(200deg, rgba(20,18,15,.1) 0%, rgba(20,18,15,.6) 100%); } } /* ---------- process (matrix grid, same language as service-blocks) ---------- */ .process-blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--line); border:1.5px solid var(--line); list-style:none; margin:0; padding:0; counter-reset:step; } @media (max-width:900px){ .process-blocks{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .process-blocks{ grid-template-columns:1fr; } } .process-block{ background:var(--paper); padding:32px 28px; display:flex; flex-direction:column; gap:10px; counter-increment:step; position:relative; } .process-block-head{ display:flex; align-items:center; justify-content:space-between; } .process-block-num{ font-family:'Archivo'; font-weight:900; font-size:26px; color:var(--text); letter-spacing:-.01em; } .process-block-mark{ font-family:'Archivo'; font-weight:700; font-size:17px; color:var(--accent-2); } .process-block-mark.is-done{ color:var(--success); } /* ---------- process-detail (podrobný riadkový proces na /ako-pracujeme) ---------- */ .process-detail{ border-top:1.5px solid var(--line); } .process-detail-row{ display:grid; grid-template-columns:88px 1fr; gap:28px; padding:36px 0; border-bottom:1.5px solid var(--line); } .process-detail-num{ font-family:'Archivo'; font-weight:900; font-size:34px; color:var(--line-dark); line-height:1; } .process-detail-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .process-detail-head h3{ font-size:20px; margin:0; } .process-detail-duration{ font-family:'IBM Plex Mono','Work Sans',monospace; font-size:12px; letter-spacing:.04em; color:var(--text-faint,var(--text-muted)); white-space:nowrap; } .process-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:640px){ .process-detail-row{ grid-template-columns:1fr; gap:12px; } .process-detail-grid{ grid-template-columns:1fr; } } .process-detail-label{ font-family:'IBM Plex Mono','Work Sans',monospace; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin:0 0 4px; } .process-detail-grid p:not(.process-detail-label){ font-size:14.5px; margin:0; } .process-block h3{ font-size:16px; margin:0; } .process-block p{ font-size:14px; margin:0; } /* ---------- generic content page ---------- */ .page-content{ max-width:760px; } .page-content h1{ font-size:clamp(30px,4vw,46px); margin-bottom:20px; } .page-content h3{ font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin:2.4em 0 1.1em; padding-top:2em; border-top:1.5px solid var(--line); } .page-content h3:first-of-type{ margin-top:1.6em; padding-top:0; border-top:none; } .page-content ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 1.3em; padding-left:0; } .page-content ul li{ position:relative; padding:12px 16px 12px 38px; color:var(--text-muted); background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); } .page-content ul li::before{ content:""; position:absolute; left:16px; top:1.15em; width:8px; height:8px; border-radius:50%; background:var(--accent-2); } .page-content .lede{ font-size:18px; color:var(--text-muted); } /* ---------- brandová hero + stat/team karty (o-nas, tim, partneri, kariera, terminy) ---------- */ .stat-row{ display:flex; flex-wrap:wrap; gap:32px; border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); padding:28px 0; margin:8px 0 40px; } .stat-row .stat{ flex:1; min-width:150px; } .stat-num{ font-family:'Archivo'; font-weight:900; font-size:clamp(28px,3vw,38px); color:var(--accent); line-height:1; } .stat-label{ font-size:12.5px; color:var(--text-muted); margin-top:6px; } .team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px; } @media (max-width:640px){ .team-grid{ grid-template-columns:1fr; } } .team-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; } .team-avatar, .team-avatar-initials{ width:72px; height:72px; border-radius:50%; flex-shrink:0; object-fit:cover; } .team-avatar-initials{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-family:'Archivo'; font-weight:900; font-size:22px; } .team-card h2{ font-size:17px; margin:0; } .team-card .role{ font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin:2px 0 0; display:block; } .team-card p{ font-size:14.5px; color:var(--text-muted); margin:0; } /* ---------- detail služby: dvojstĺpcový layout s CTA kartou ---------- */ .service-layout{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; } @media (max-width:900px){ .service-layout{ grid-template-columns:1fr; } } .service-copy{ max-width:none; } .service-copy h2{ font-size:24px; margin-bottom:.7em; } .cta-card{ position:sticky; top:110px; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:18px; } .cta-card h3{ font-size:19px; margin:0; } .cta-card p{ font-size:14px; margin:0; } .cta-card .btn{ width:100%; } .cta-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .cta-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-muted); } .cta-list svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--accent-2); } @media (max-width:900px){ .cta-card{ position:static; } } /* ---------- FAQ ---------- */ .faq-item{ border-bottom:1.5px solid var(--line); padding:22px 0; } .faq-item h3{ font-size:17px; margin-bottom:8px; } .faq-item p{ font-size:14.5px; } /* ---------- planner (event planner, /kalkulator) — dopĺňa .inquiry-form/.chip-group nižšie ---------- */ .planner-step-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; } .planner-step-icon{ flex-shrink:0; width:44px; height:44px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; } .planner-step-icon svg{ width:22px; height:22px; } .is-wizard .planner-step-head .inquiry-step-title{ margin:0 0 4px; } .planner-step-desc{ font-size:13.5px; color:var(--text-muted); margin:0; max-width:56ch; } /* Otázka nie je karta (v1.129.0). Každá mala vlastný rámček s výplňou, takže krok bol stena šiestich rámčekov vnorených v rámčeku kroku — hranica prestane niečo znamenať, keď ju má všetko. Otázku odteraz oddeľuje vlas a priestor; rámčeky si nechávajú odpovede, ktoré ich potrebujú, lebo sú klikacie. */ .planner-item{ padding:0; background:none; border:0; border-radius:0; } .planner-item + .planner-item{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); } .planner-item > label:first-child, .planner-item > .chip-group:first-child{ margin-top:0; } .planner-item label{ margin-bottom:10px; } .planner-item input[type="text"], .planner-item input[type="number"], .planner-item textarea{ margin-top:2px; } .planner-item-help{ font-size:12px; color:var(--text-muted); margin:-4px 0 10px; } .planner-form .wizard-nav{ position:sticky; bottom:0; background:var(--paper); padding:14px 0; margin-top:0; border-top:1.5px solid var(--line); z-index:5; } @media (max-width:640px){ .planner-step-icon{ width:38px; height:38px; } .planner-step-icon svg{ width:19px; height:19px; } .planner-form .wizard-nav{ padding:14px 20px; margin:24px -20px 0; } .planner-form .wizard-next, .planner-form button[type="submit"]{ width:100%; } } /* ---------- contact ---------- */ /* kontakt — rozloženie: hero (nadpis + fakty) → tím | formulár (dva rovnako vysoké stĺpce) → oddelenia v jednom rade */ .contact-hero{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:40px; } .contact-hero .section-head{ margin-bottom:0; } .contact-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0; padding:20px 22px; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); } .contact-facts dt{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:6px; } .contact-facts dd{ margin:0; font-size:13.5px; line-height:1.5; color:var(--text); } .contact-facts a{ color:var(--text); font-weight:600; border-bottom:1.5px solid var(--accent); } .contact-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:32px; align-items:stretch; } .contact-team{ display:flex; flex-direction:column; gap:16px; } .contact-team .contact-team-head{ margin-bottom:4px; } .contact-person{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:22px 24px; display:flex; flex-direction:column; gap:14px; flex:1; } .contact-person-head{ display:flex; align-items:center; gap:16px; } .contact-person-head .team-avatar, .contact-person-head .team-avatar-initials{ width:60px; height:60px; } .contact-person-head .team-avatar-initials{ font-size:19px; } .contact-person-head .role{ font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); display:block; margin-top:3px; } .contact-person-lines{ display:flex; flex-direction:column; gap:4px; } .contact-person-lines a{ font-size:14.5px; color:var(--text); } .contact-person-lines a:hover{ color:var(--accent-2); } .contact-person .contact-quick-actions{ margin-top:0; } .contact-form-panel{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:28px 30px; display:flex; flex-direction:column; } .contact-form-panel form.contact-form{ flex:1; } .contact-form-grow{ flex:1; display:flex; flex-direction:column; } .contact-form-grow textarea{ flex:1; min-height:150px; resize:vertical; } .contact-form-panel h2{ font-size:clamp(19px,2.2vw,23px); margin:0 0 20px; } .contact-form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .contact-form-panel form.contact-form button[type="submit"]{ align-self:flex-start; } .contact-departments{ margin-top:44px; padding-top:32px; } .contact-departments .dept-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } @media (max-width:1100px){ .contact-departments .dept-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:960px){ .contact-hero{ grid-template-columns:1fr; gap:24px; } .contact-main{ grid-template-columns:1fr; } } @media (max-width:640px){ .contact-facts{ grid-template-columns:1fr; } .contact-form-row{ grid-template-columns:1fr; } .contact-departments .dept-grid{ grid-template-columns:1fr; } .contact-form-panel{ padding:22px 20px; } } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } } .contact-card{ border-bottom:1.5px solid var(--line); padding:20px 0; } .contact-card h2, .contact-card .contact-card-name{ font-size:16px; margin:0 0 4px; } .contact-card .role{ font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px; display:block; } .contact-quick-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .quick-action{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid var(--line); border-radius:100px; font-family:'Work Sans'; font-size:12.5px; font-weight:600; color:var(--text); transition:border-color .15s ease, color .15s ease; } .quick-action svg{ width:15px; height:15px; flex-shrink:0; } .quick-action:hover{ border-color:var(--accent-2); color:var(--accent-2); } /* Priame volanie kliknutím má zmysel len na dotykovom/mobilnom zariadení — na desktope tel: odkaz väčšinou nič neurobí alebo len otvorí nechcenú appku, preto sa tlačidlo zobrazí len pod rovnakým breakpointom ako zalomenie .contact-grid vyššie. */ .quick-action--call{ display:none; } @media (max-width:820px){ .quick-action--call{ display:inline-flex; } } /* kontakt — „Váš kontaktný tím“ + oddelenia: dve reálne kontaktné osoby ostávajú, pod nimi organizácia (5 oddelení) s tlačidlom, ktoré predvyplní oddelenie vo formulári. Nepridávajú sa žiadne fiktívne e-maily — správa ide cez formulár a oddelenie sa zapíše do leadu. */ .contact-team-head{ margin-bottom:6px; } .contact-team-head h2{ font-size:clamp(19px,2.2vw,23px); margin:0 0 8px; } .contact-team-head p{ font-size:14.5px; color:var(--text-muted); margin:0; max-width:none; } .contact-departments{ margin-top:30px; padding-top:26px; border-top:1.5px solid var(--line); } .contact-departments h3{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); margin:0 0 6px; } .contact-departments > p{ font-size:13.5px; color:var(--text-muted); margin:0 0 16px; max-width:none; } .dept-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .dept-card{ display:flex; flex-direction:column; gap:6px; padding:16px 16px 14px; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper-2); transition:border-color .15s ease; } .dept-card:hover{ border-color:var(--accent); } .dept-card strong{ font-family:'Archivo'; font-size:14.5px; font-weight:700; color:var(--text); } .dept-card p{ font-size:13px; color:var(--text-muted); margin:0; line-height:1.45; } .dept-card button{ align-self:flex-start; margin-top:4px; background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--accent-2); border-bottom:1.5px solid var(--accent); line-height:1.6; } .dept-card button:hover{ color:var(--text); } form.contact-form select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; } @media (max-width:520px){ .dept-grid{ grid-template-columns:1fr; } } form.contact-form{ display:flex; flex-direction:column; gap:16px; } form.contact-form label{ font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:8px; } form.contact-form input, form.contact-form textarea, form.contact-form select{ width:100%; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:13px 14px; color:var(--text); font-family:'Work Sans'; font-size:14.5px; } form.contact-form input:focus, form.contact-form textarea:focus, form.contact-form select:focus{ outline:none; border-color:var(--accent); } .form-alert{ padding:14px 16px; border-radius:var(--radius); font-size:14px; border:1.5px solid; } .form-alert.success{ background:#eef6f0; color:#1f7a4d; border-color:#bfe0cb; } .form-alert.error{ background:#fdeeea; color:var(--error); border-color:#f3c4b7; } .hp-field{ position:absolute; left:-9999px; } /* ---------- podrobný dopytový dotazník ---------- */ .inquiry-form{ max-width:760px; } /* Plánovač je širší než bežný dopytový formulár: 760 px stačí na dvojicu polí, ale nie na mriežku jedenástich možností — tá by ostala dvojstĺpcová a odpovede by sa ťahali cez štyri riadky. */ .planner-form{ max-width:920px; } .inquiry-step{ padding:28px 0; border-top:1.5px solid var(--line); } .inquiry-step:first-child{ border-top:none; padding-top:0; } .inquiry-step-title{ font-family:'Archivo'; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); margin:0 0 20px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } } .form-spacer{ margin-top:20px; } /* .chip/.chip-group — jednotný "pill toggle" komponent pre celý web (verejný plánovač, dopytové formuláre v inc/pages/service-detail.php, zdravie-do-firiem.php, creator-application.php). Voľne zalamovaná skupina, každý pill sa prispôsobí dĺžke vlastného textu — nie pevný grid stĺpec, ktorý pri dlhšom texte (napr. "Performance/tanečníci") text orezával/nekonzistentne naťahoval. */ .chip-group{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ position:relative; cursor:pointer; text-transform:none; letter-spacing:normal; margin:0; } .chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; } .chip span{ display:flex; align-items:center; gap:8px; padding:11px 16px; background:var(--paper-2); border:1.5px solid var(--line-2, var(--line)); border-radius:8px; font-family:'Work Sans'; font-size:14px; font-weight:600; text-transform:none; letter-spacing:normal; color:var(--text); line-height:1.3; box-shadow:0 1px 2px rgba(20,18,15,.04); transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } .chip span::before{ content:''; flex-shrink:0; width:15px; height:15px; border-radius:5px; border:1.5px solid var(--line-2, var(--line)); background:var(--paper); transition:background-color .15s ease, border-color .15s ease; } .chip-group[role="radiogroup"] .chip span::before{ border-radius:50%; } .chip:hover span{ border-color:var(--accent-2); box-shadow:0 2px 6px rgba(20,18,15,.08); transform:translateY(-1px); } .chip input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 2px 8px rgba(164,119,100,.28); } .chip input:checked + span::before{ background:var(--accent-ink); border-color:var(--accent-ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3a468' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:11px; background-repeat:no-repeat; background-position:center; } .chip input:focus-visible + span{ outline:2px solid var(--accent-2); outline-offset:2px; } /* .chip-group--checklist (v1.124.0) — dlhý zoznam áno/nie otázok. Pill cloud je správny útvar pre pár krátkych volieb (jazyky v tíme, typ eventu). Pri dvadsiatich otázkach rôznej dĺžky sa z neho stane rozstrapkaná stena: každý riadok inej dĺžky, vpravo veľké diery a oko nemá kam skočiť. Toto je kontrolný zoznam, takže dostane mriežku s rovnako širokými bunkami — text sa v nich ZALAMUJE, nie orezáva ani naťahuje (to bol dôvod, prečo sa mriežka kedysi zavrhla; `minmax` s wrapom ten problém nemá). Modifikátor, nie zmena `.chip`: pill cloud inde ostáva taký, aký má byť. */ .chip-group--checklist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:8px; align-items:stretch; } .chip-group--checklist .chip{ display:block; height:100%; } .chip-group--checklist .chip span{ height:100%; align-items:flex-start; padding:12px 14px; gap:10px; background:var(--paper); border-color:var(--line); font-weight:500; line-height:1.35; box-shadow:none; min-height:46px; /* pohodlný cieľ na dotyk aj pri jednoriadkovom texte */ } .chip-group--checklist .chip span::before{ margin-top:1px; } .chip-group--checklist .chip:hover span{ border-color:var(--accent-2); background:var(--paper-2); transform:none; box-shadow:none; } /* Zaškrtnuté je jemné tónovanie, nie plná akcentová plocha: pri ôsmich zaškrtnutých z dvadsiatich by celá stránka zhnedla a prestalo by byť vidieť, čo je vybraté. */ .chip-group--checklist .chip input:checked + span{ background:color-mix(in srgb, var(--accent) 12%, var(--paper)); border-color:var(--accent); color:var(--text); font-weight:600; box-shadow:none; } .chip-group--checklist .chip input:checked + span::before{ background:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } @media (max-width:520px){ .chip-group--checklist{ grid-template-columns:1fr; } } /* .chip-group--options (v1.129.0) — odpovede na JEDNU otázku. Tá istá myšlienka ako kontrolný zoznam vyššie, iná mierka: nie dvadsať áno/nie otázok pod sebou, ale jedenásť možností jednej otázky. Voľne zalamované pilly tu dávali šírky od 95 do 295 px v troch riadkoch — roztrhaný pravý okraj a oko nevie, kde začína ďalší riadok. V mriežke sú bunky v riadku rovnako široké a text sa v nich zalamuje. `auto-fill`, nie `auto-fit`: auto-fit by pri štyroch možnostiach roztiahol každú cez štvrtinu šírky formulára a z „SK" by bola bunka so štyrmi prázdnymi pätinami. */ .chip-group--options{ display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:8px; align-items:stretch; } /* Krátke popisky (SK/CZ/EN, B2B/B2C) — užší stĺpec, nech sa ich zmestí viac do riadku. */ .chip-group--options-tight{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); } .chip-group--options .chip{ display:block; height:100%; } /* Pokojná bunka: svetlý podklad a vlasový rámček, žiadny tieň. Jedenásť tieňovaných blokov vedľa seba je šum — v mriežke oddeľuje bunky mriežka sama, tieň už nemá čo dodať. `anywhere` je poistka, nie riešenie: šírku stĺpca volí PHP podľa najdlhšieho popisku, takže sa za normálnych okolností neuplatní. Keď ale niekto v admine pridá voľbu s dlhým jednoslovným názvom, nech radšej zalomí slovo, než aby text vytiekol z bunky. */ .chip-group--options .chip span{ height:100%; align-items:center; min-height:52px; padding:12px 15px; gap:11px; background:var(--paper); border:1.5px solid var(--line); border-radius:10px; line-height:1.35; overflow-wrap:anywhere; box-shadow:none; } /* Značka výberu bola 15 px s bledým rámčekom — v bunke vysokej 52 px pôsobila ako vyblednutá dierka. Väčšia a s výraznejším obrysom hovorí jasnejšie „tu sa klikne". */ .chip-group--options .chip span::before{ width:18px; height:18px; border-width:2px; border-color:var(--line-2, var(--line)); } /* Bez nadskočenia: v mriežke by sa pri prechode myšou triasol celý riadok. */ .chip-group--options .chip:hover span{ border-color:var(--accent-2); background:var(--paper-2); transform:none; box-shadow:none; } /* Výber z viacerých naraz dostane jemné tónovanie — pri piatich vybratých z ôsmich by plná akcentová plocha zaliala celý krok. Pri výbere JEDNEJ možnosti (radiogroup) ostáva plná: práve preto, že je jediná, má byť vidieť na prvý pohľad. */ .chip-group--options:not([role="radiogroup"]) .chip input:checked + span{ background:color-mix(in srgb, var(--accent) 12%, var(--paper)); border-color:var(--accent); color:var(--text); box-shadow:none; } .chip-group--options:not([role="radiogroup"]) .chip input:checked + span::before{ background:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } @media (max-width:520px){ .chip-group--options{ grid-template-columns:1fr; } .chip-group--options-tight{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); } } .planner-substep + .planner-substep{ border-top:1.5px solid var(--line); padding-top:24px; margin-top:24px; } .planner-subcat-title{ font-family:'Archivo'; font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text); margin:0 0 6px; } .planner-subcat-desc{ font-size:12.5px; color:var(--text-muted); margin:0 0 14px; max-width:56ch; } .inquiry-form button[type="submit"]{ margin-top:32px; } /* ---------- wizard režim (JS vylepšenie dopytového formulára) ---------- */ .wizard-progress{ display:none; } .is-wizard .wizard-progress{ display:block; margin-bottom:32px; } .wizard-progress-track{ height:3px; background:var(--line); position:relative; overflow:hidden; } .wizard-progress-bar{ height:100%; background:var(--accent); width:0; transition:width .3s ease; } .wizard-progress-label{ margin:10px 0 0; font-family:'IBM Plex Mono','Work Sans',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .is-wizard .inquiry-step{ display:none; border-top:none; padding:0; animation:step-in .35s ease; } .is-wizard .inquiry-step.is-active{ display:block; } @keyframes step-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } .is-wizard .inquiry-step-title{ font-size:19px; } .wizard-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; } .wizard-back{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; font-family:'Work Sans'; font-weight:700; font-size:14px; letter-spacing:.03em; color:var(--text); border-bottom:1.5px solid var(--line); padding-bottom:3px; } .wizard-back span{ color:var(--accent-2); } .wizard-back:hover{ border-color:var(--accent-2); } /* ---------- vysúvací bočný panel pre dopytový formulár (JS vylepšenie) ---------- */ .drawer-backdrop{ position:fixed; inset:0; z-index:90; background:rgba(20,18,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .4s ease; } .drawer-backdrop.is-open{ opacity:1; pointer-events:auto; } .is-drawer{ position:fixed; top:0; right:0; z-index:91; width:min(560px, 92vw); height:100vh; height:100dvh; background:var(--paper); overflow-y:auto; box-shadow:-32px 0 64px rgba(20,18,15,.28); transform:translateX(100%); transition:transform .55s cubic-bezier(.16,1,.3,1); } .is-drawer.is-open{ transform:translateX(0); } .is-drawer .wrap{ padding-top:76px; padding-bottom:56px; } @media (max-width:640px){ .is-drawer{ width:100%; } } .drawer-close{ position:absolute; top:20px; right:20px; z-index:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--radius); font-size:15px; color:var(--text); cursor:pointer; } .drawer-close:hover{ border-color:var(--text); } .drawer-tab{ position:fixed; top:58%; right:0; z-index:80; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; background:var(--accent); color:var(--accent-ink); border:none; padding:22px 12px; border-radius:var(--radius) 0 0 var(--radius); font-family:'Work Sans'; font-weight:700; font-size:13px; letter-spacing:.05em; cursor:pointer; box-shadow:var(--shadow); transition:padding-right .2s ease, background-color .2s ease; } .drawer-tab:hover{ background:var(--accent-warm); padding-right:17px; } .drawer-tab.is-hidden{ transform:translateY(-50%) translateX(100%); } @media (max-width:640px){ .drawer-tab{ padding:18px 10px; font-size:12px; } } body.drawer-locked{ overflow:hidden; } /* ---------- vysúvací panel pre prihlásenie do klientského portálu (hlavička, zľava) ---------- */ .portal-drawer-backdrop{ position:fixed; inset:0; z-index:90; background:rgba(20,18,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .4s ease; } .portal-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; } .portal-drawer{ position:fixed; top:0; left:0; z-index:91; width:min(420px, 92vw); height:100vh; height:100dvh; background:var(--paper); overflow-y:auto; box-shadow:32px 0 64px rgba(20,18,15,.28); transform:translateX(-100%); transition:transform .5s cubic-bezier(.16,1,.3,1); padding:76px 32px 48px; } .portal-drawer.is-open{ transform:translateX(0); } @media (max-width:640px){ .portal-drawer{ width:100%; padding:76px 20px 40px; } } .portal-drawer .auth-switch{ margin-top:20px; font-size:13.5px; color:var(--text-muted); } .portal-drawer .auth-switch a{ font-weight:700; color:var(--text); border-bottom:1.5px solid var(--accent); } /* ---------- footer ---------- */ /* ---------- mobilná appka: spodná tab bar (len na mobile) ---------- Výška NIE JE natvrdo napísané číslo — .app-tabbar má vlastnú prirodzenú výšku a JS (assets/js/main.js) ju odmeria a zapíše do --tabbar-h na :root. Cookie banner aj rezervovaný spodný padding stránky z tejto premennej čítajú, takže sa nemôžu rozísť s reálnou výškou lišty (presne toto — natvrdo napísaných "64px", ktoré sa reálne líšilo — spôsobilo predošlý bug, kde sa cookie banner prekrýval s lištou). */ :root{ --tabbar-h: 0px; } @media (max-width:760px){ :root{ --tabbar-h:71px; } .app-tabbar{ height:calc(71px + env(safe-area-inset-bottom)); box-sizing:border-box; } } .app-tabbar{ display:none; } @media (max-width:760px){ body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } .app-tabbar{ display:flex; align-items:stretch; justify-content:space-around; position:fixed; left:0; right:0; bottom:0; z-index:75; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(20,18,15,.06); } .app-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 2px; background:none; border:none; cursor:pointer; font-family:'Work Sans'; font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--text-muted); position:relative; } .app-tab svg{ width:22px; height:22px; } .app-tab.is-active{ color:var(--accent-2); } .app-tab:active{ transform:scale(.92); } .app-tab-raised{ color:var(--text-muted); } .app-tab-fab{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; margin-top:-30px; background:var(--accent); color:var(--paper-text); box-shadow:0 8px 20px rgba(164,119,100,.5), 0 0 0 5px var(--paper); transition:transform .15s ease; } .app-tab-fab svg{ width:20px; height:20px; } .app-tab-raised:active .app-tab-fab{ transform:scale(.9); } /* keď je otvorené mobilné menu, spodná tab bar sa schová, aby neprekrývala rozbalený zoznam */ .site-header.nav-open ~ .app-tabbar{ display:none; } } /* ---------- plávajúce rýchle spojenie (telefón + WhatsApp) — vpravo dole na každej stránke, nech klient nemusí hľadať /kontakt. Obe tlačidlá sú TRVALO viditeľné (žiadny klik na rozbalenie) — presne preto, aby bolo telefónne číslo vidieť rovnako rýchlo ako WhatsApp, nie schované za ďalším krokom. Medzi tab bar (z-index 75) a vysúvacie panely (90-91), nad tab bar posunuté presne o --tabbar-h rovnakým spôsobom ako cookie banner vyššie. ---------- */ .contact-fab{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:10px; } @media (max-width:760px){ .contact-fab{ bottom:calc(var(--tabbar-h) + 14px); } } .contact-fab-call{ display:flex; align-items:center; gap:8px; padding:11px 18px 11px 14px; border-radius:100px; background:var(--paper); border:1.5px solid var(--line); color:var(--text); font-family:'Work Sans'; font-size:13.5px; font-weight:700; white-space:nowrap; box-shadow:0 8px 20px rgba(20,18,15,.14); transition:border-color .15s ease, transform .15s ease; } .contact-fab-call:hover{ border-color:var(--accent-2); transform:translateY(-1px); } .contact-fab-call:active{ transform:scale(.97); } .contact-fab-call-icon{ width:17px; height:17px; flex-shrink:0; color:var(--accent-2); } .contact-fab-whatsapp{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.45); transition:transform .15s ease; } .contact-fab-whatsapp svg{ width:26px; height:26px; } .contact-fab-whatsapp:hover{ transform:scale(1.06); } .contact-fab-whatsapp:active{ transform:scale(.94); } /* ---------- verejný AI asistent (v1.15.0) — 3. plávajúce tlačidlo nad telefónnou pilulkou, panel je position:absolute vzhľadom na .contact-fab (samo position:fixed), takže sa po otvorení jednoducho "vysunie" z rovnakého rohu a prekryje tlačidlá pod sebou — žiadna extra logika na skrývanie tlačidiel. ---------- */ .chat-fab-toggle{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px rgba(164,119,100,.45); transition:transform .15s ease; } .chat-fab-toggle svg{ width:25px; height:25px; } .chat-fab-toggle:hover{ transform:scale(1.06); } .chat-fab-toggle:active{ transform:scale(.94); } /* Panel vizuálne prekryje ostatné tlačidlá (je väčší, rovnaký roh), ale bez tohto pravidla by ostali stále fokusovateľné klávesnicou spoza panelu — radšej ich naozaj skryť. */ .contact-fab.is-chat-open > .contact-fab-call, .contact-fab.is-chat-open > .contact-fab-whatsapp{ visibility:hidden; } .chat-fab-panel{ position:absolute; right:0; bottom:0; z-index:5; width:min(350px, calc(100vw - 40px)); height:min(70vh, 520px); display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:0 20px 48px rgba(20,18,15,.2); overflow:hidden; } .chat-fab-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-family:'Archivo'; font-weight:800; font-size:14px; } .chat-fab-close{ border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:15px; padding:4px; } .chat-fab-close:hover{ color:var(--text); } .chat-fab-thread{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; } .chat-fab-msg{ font-size:13.5px; line-height:1.5; padding:9px 12px; border-radius:12px; max-width:88%; white-space:pre-line; } .chat-fab-msg-bot{ background:var(--paper-2); color:var(--text); align-self:flex-start; border-bottom-left-radius:3px; } .chat-fab-msg-user{ background:var(--accent); color:var(--accent-ink); align-self:flex-end; border-bottom-right-radius:3px; } .chat-fab-msg-error{ background:#fdeeea; color:var(--error); align-self:flex-start; border-bottom-left-radius:3px; } .chat-fab-msg-typing{ display:flex; align-items:center; gap:4px; padding:14px 14px; } .chat-fab-msg-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:chat-fab-typing-bounce 1.2s infinite ease-in-out; } .chat-fab-msg-typing span:nth-child(2){ animation-delay:.15s; } .chat-fab-msg-typing span:nth-child(3){ animation-delay:.3s; } @keyframes chat-fab-typing-bounce{ 0%, 60%, 100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } } @media (prefers-reduced-motion: reduce){ .chat-fab-msg-typing span{ animation:none; opacity:.7; } } .chat-fab-disclaimer{ font-size:12px; color:var(--text-muted); padding:0 16px; margin:0 0 8px; } .chat-fab-form{ display:flex; align-items:flex-end; gap:8px; padding:0 16px 14px; } .chat-fab-input{ flex:1; resize:none; border:1.5px solid var(--line); border-radius:12px; padding:9px 12px; font-family:inherit; font-size:13.5px; color:var(--text); background:var(--paper); max-height:80px; } .chat-fab-input:focus{ outline:none; border-color:var(--accent-2); } .chat-fab-send{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--accent-ink); } .chat-fab-send svg{ width:17px; height:17px; } .chat-fab-send:disabled{ opacity:.5; cursor:default; } .chat-fab-handoff{ border-top:1px solid var(--line); padding:12px 16px; } .chat-fab-handoff p{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0 0 8px; } .chat-fab-handoff-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; } .chat-fab-handoff-actions a{ font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:100px; border:1.5px solid var(--line); color:var(--text); } .chat-fab-handoff-actions a:hover{ border-color:var(--accent-2); color:var(--accent-2); } .chat-fab-lead-toggle{ width:100%; text-align:left; border:none; background:none; cursor:pointer; font-family:'Work Sans'; font-size:12.5px; font-weight:700; color:var(--accent-2); padding:4px 0; } /* karta briefu v rozhovore (handoff) — asistent má dosť informácií, ponúka brief + orientačnú ponuku */ .chat-fab-brief{ align-self:stretch; max-width:100%; background:var(--paper-2); border:1.5px solid var(--accent); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .chat-fab-brief-title{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); } .chat-fab-brief-text{ font-size:13px; line-height:1.5; color:var(--text); white-space:pre-line; } .chat-fab-brief button{ align-self:flex-start; } .chat-fab-lead-hint{ font-size:12px; color:var(--text-muted); margin:0; } .chat-fab-lead-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px; } .chat-fab-lead-form.is-brief{ border:1.5px solid var(--accent); border-radius:12px; padding:12px; background:var(--paper-2); } .chat-fab-lead-form input, .chat-fab-lead-form textarea{ border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:12.5px; color:var(--text); background:var(--paper); resize:vertical; } .chat-fab-lead-form input:focus, .chat-fab-lead-form textarea:focus{ outline:none; border-color:var(--accent-2); } /* ---------- celkový "app" pocit na mobile: dotyk, zoom, feedback ---------- */ @media (max-width:760px){ html{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:contain; } .btn, .service-block, .chip span, .app-tab, .nav-toggle, .lang-current, .nav-caret, .drawer-tab, .cta-card .btn{ touch-action:manipulation; } .btn:active{ transform:scale(.96); } .service-block:active{ background:var(--paper-2); } /* zabráni automatickému priblíženiu Safari pri fokuse na formulárové pole (min. 16px) */ form.contact-form input, form.contact-form textarea, form.contact-form select{ font-size:16px; } .site-header{ padding-top:env(safe-area-inset-top); } } @media (max-width:600px){ .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; } .footer-social{ margin-left:0; } } /* ---------- fotogaléria (referencie) ---------- */ .gallery-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 36px; } .gallery-filter{ padding:8px 16px; border-radius:100px; border:1.5px solid var(--line); background:transparent; color:var(--text-muted); font-family:'Work Sans'; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease; } .gallery-filter:hover{ border-color:var(--accent-2); color:var(--text); } .gallery-filter.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .gallery-empty{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:80px 20px; color:var(--text-muted); text-align:center; border:1.5px dashed var(--line); border-radius:var(--radius); } .gallery-empty svg{ width:40px; height:40px; opacity:.5; } .photo-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; } .photo-gallery-item{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--paper-2); cursor:zoom-in; } .photo-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); } .photo-gallery-item:hover img{ transform:scale(1.06); } .photo-gallery-caption{ position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(to top, rgba(20,18,15,.85), transparent); color:var(--paper-text); font-size:12.5px; font-weight:600; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; } .photo-gallery-item:hover .photo-gallery-caption{ opacity:1; transform:translateY(0); } @media (max-width:640px){ .photo-gallery{ grid-template-columns:repeat(2, 1fr); gap:8px; } .photo-gallery-caption{ opacity:1; transform:none; padding:20px 10px 8px; font-size:12px; } } /* ---------- referencie: hodnotenia klientov ---------- */ .testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:32px; } @media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .testimonial-grid{ grid-template-columns:1fr; } } .testimonial-card{ margin:0; background:var(--paper); border:none; border-top:3px solid var(--accent); border-radius:0; padding:8px 4px 0; display:flex; flex-direction:column; gap:10px; position:relative; } .testimonial-card::before{ content:"“"; font-family:'Archivo',sans-serif; font-style:normal; font-weight:900; font-size:56px; line-height:1; color:var(--accent); opacity:.35; display:block; margin-bottom:-10px; } .testimonial-stars{ color:var(--accent); font-size:15px; letter-spacing:1px; } .testimonial-card blockquote{ margin:0; font-family:'Work Sans',sans-serif; font-style:normal; font-weight:500; font-size:17px; line-height:1.5; color:var(--text); flex:1; } .testimonial-card blockquote.is-quote-empty{ font-weight:400; font-style:italic; color:var(--text-muted); font-size:13.5px; } .testimonial-card figcaption{ font-size:12.5px; color:var(--text-muted); padding-top:6px; border-top:1px solid var(--line); } .testimonial-card figcaption strong{ color:var(--text); } /* ---------- lightbox ---------- */ .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(10,9,8,.96); display:flex; align-items:center; justify-content:center; padding:40px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox figure{ margin:0; max-width:min(1100px, 100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; } .lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); } .lightbox figcaption{ color:var(--paper-text-muted); font-size:13.5px; text-align:center; min-height:1.2em; } .lightbox-close{ position:absolute; top:24px; right:24px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--line-dark); color:var(--paper-text); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .lightbox-close:hover{ background:rgba(255,255,255,.16); } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--line-dark); color:var(--paper-text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .lightbox-nav:hover{ background:rgba(255,255,255,.16); } .lightbox-prev{ left:24px; } .lightbox-next{ right:24px; } @media (max-width:700px){ .lightbox{ padding:16px; } .lightbox-nav{ width:38px; height:38px; } .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } .lightbox-close{ top:12px; right:12px; } } /* ---------- magazín: zoznam článkov ---------- */ .magazine-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } @media (max-width:900px){ .magazine-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .magazine-grid{ grid-template-columns:1fr; } } .magazine-grid.has-featured{ grid-template-columns:1.4fr 1fr 1fr; } @media (max-width:900px){ .magazine-grid.has-featured{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .magazine-grid.has-featured{ grid-template-columns:1fr; } } .magazine-grid.has-featured .magazine-card:first-child{ grid-column:1 / -1; } .magazine-grid.has-featured .magazine-card:first-child .magazine-card-photo{ aspect-ratio:21/9; } @media (max-width:900px){ .magazine-grid.has-featured .magazine-card:first-child{ grid-column:auto; } .magazine-grid.has-featured .magazine-card:first-child .magazine-card-photo{ aspect-ratio:16/9; } } .magazine-card{ display:flex; flex-direction:column; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .magazine-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .magazine-card-photo{ aspect-ratio:16/9; overflow:hidden; background:var(--paper); } .magazine-card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); } .magazine-card:hover .magazine-card-photo img{ transform:scale(1.05); } .magazine-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; } .magazine-card-cat{ font-family:'Work Sans'; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); } .magazine-card-title{ font-size:19px; margin:0; } .magazine-card-excerpt{ font-size:14px; margin:0; color:var(--text-muted); flex:1; } .magazine-card-meta{ font-size:12px; color:var(--text-muted); display:flex; gap:8px; align-items:center; } /* ---------- magazín: vyhľadávanie, kategórie, index všetkých článkov ---------- */ .magazine-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .magazine-search{ flex:1; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:99px; padding:11px 18px; background:var(--paper-2); color:var(--text-muted); transition:border-color .15s ease; } .magazine-search:focus-within{ border-color:var(--accent); color:var(--text); } .magazine-search svg{ width:17px; height:17px; flex-shrink:0; } .magazine-search input{ flex:1; border:none; background:none; font-family:inherit; font-size:14.5px; color:var(--text); min-width:0; padding:0; } .magazine-search input:focus{ outline:none; } .magazine-search input::placeholder{ color:var(--text-muted); } .magazine-index-btn{ display:flex; align-items:center; gap:8px; flex-shrink:0; border:1.5px solid var(--line); border-radius:99px; padding:11px 18px; background:var(--paper-2); color:var(--text); font-family:'Work Sans'; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .15s ease, background .15s ease; } .magazine-index-btn:hover{ border-color:var(--accent); background:var(--paper); } .magazine-index-btn svg{ width:16px; height:16px; } @media (max-width:560px){ .magazine-index-btn span{ display:none; } .magazine-index-btn{ padding:11px; } } .marketplace-switch{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 24px; border:1px solid var(--color-line); border-radius:14px; background:var(--color-surface); margin-top:8px; } .marketplace-switch h2{ font-size:clamp(19px,2vw,24px); } .marketplace-switch p{ color:var(--color-text-muted); font-size:14.5px; } .magazine-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:28px; scrollbar-width:none; } .magazine-chips::-webkit-scrollbar{ display:none; } .magazine-chip{ flex-shrink:0; display:flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:99px; padding:8px 16px; font-family:'Work Sans'; font-size:12.5px; font-weight:600; color:var(--text-muted); white-space:nowrap; transition:border-color .15s ease, background .15s ease, color .15s ease; } .magazine-chip:hover{ border-color:var(--accent); color:var(--text); } .magazine-chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .magazine-chip-count{ opacity:.7; font-weight:500; } .magazine-no-results{ text-align:center; color:var(--text-muted); padding:48px 0; } .magazine-index-backdrop{ position:fixed; inset:0; z-index:90; background:rgba(20,18,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .4s ease; } .magazine-index-backdrop.is-open{ opacity:1; pointer-events:auto; } .magazine-index-drawer{ position:fixed; top:0; right:0; z-index:91; width:min(420px, 92vw); height:100vh; height:100dvh; background:var(--paper); overflow-y:auto; box-shadow:-32px 0 64px rgba(20,18,15,.28); transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); } .magazine-index-drawer.is-open{ transform:translateX(0); } @media (max-width:640px){ .magazine-index-drawer{ width:100%; } } .magazine-index-head{ position:sticky; top:0; z-index:2; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:24px 24px 20px; } .magazine-index-head h2{ font-size:19px; margin:0; } .magazine-index-head .drawer-close{ position:static; flex-shrink:0; } .magazine-index-body{ padding:16px 24px 48px; } .magazine-index-group{ margin-bottom:22px; } .magazine-index-group-label{ font-family:'Work Sans'; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin:0 0 10px; } .magazine-index-link{ display:block; padding:10px 0; font-size:14.5px; color:var(--text); border-bottom:1px solid var(--line); } .magazine-index-link:hover{ color:var(--accent-2); } .magazine-index-group:last-child .magazine-index-link:last-child{ border-bottom:none; } /* ---------- influenceri: marketplace zoznam + detail ---------- */ .creator-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } @media (max-width:1024px){ .creator-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:768px){ .creator-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .creator-grid{ grid-template-columns:1fr; } } .creator-card{ display:flex; flex-direction:column; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .creator-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .creator-card-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--paper); position:relative; } .creator-card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); } .creator-card:hover .creator-card-photo img{ transform:scale(1.05); } .creator-card-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:42px; color:var(--accent-2); background:var(--paper); } .creator-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .creator-card-name{ font-size:18px; margin:0; } .creator-card-niche{ font-family:'Work Sans'; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); } .creator-card-meta{ font-size:12.5px; color:var(--text-muted); } .creator-pill-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; } .creator-pill{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; padding:3px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:12px; color:var(--text-muted); } .creator-pill strong{ color:var(--text); font-weight:700; } /* ---------- influenceri: detail profilu ---------- */ .creator-hero{ display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; } .creator-hero-photo{ width:180px; height:180px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--paper-2); border:3px solid var(--paper-2); } .creator-hero-photo img{ width:100%; height:100%; object-fit:cover; } .creator-hero-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:56px; color:var(--accent-2); background:var(--paper); } .creator-hero-info{ flex:1; min-width:240px; } .creator-hero-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; } .creator-bio{ max-width:640px; } .creator-platform-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin:24px 0; } .creator-platform-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; text-decoration:none; display:block; transition:border-color .2s ease; } .creator-platform-card:hover{ border-color:var(--accent-2); } .creator-platform-card-name{ font-family:'Work Sans'; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .creator-platform-card-count{ font-family:'Archivo'; font-weight:800; font-size:24px; color:var(--text); margin-top:4px; } /* ---------- "Influencer karta" (bod 3): referencie/testimoniály ---------- */ .creator-testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:24px 0; } .creator-testimonial-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:22px; margin:0; } .creator-testimonial-card p{ font-size:15px; line-height:1.55; color:var(--text); margin:0 0 14px; } .creator-testimonial-card footer{ font-family:'Work Sans'; font-weight:700; font-size:12.5px; color:var(--text-muted); } /* ---------- CS-30: verejný Marketplace kampaní /kampane — mirror creator-card/creator-hero vzoru, ale fotka kampane je 16:9 (cover), nie 4:5 portrét, a hero fotka je štvorec, nie kruh. ---------- */ .campaign-card-photo{ aspect-ratio:16/9; overflow:hidden; background:var(--paper); position:relative; } .campaign-card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); } .creator-card:hover .campaign-card-photo img{ transform:scale(1.05); } .campaign-card-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.35; background:var(--paper); } .campaign-card-company{ font-size:12.5px; color:var(--text-muted); } .campaign-hero-photo{ width:180px; height:180px; border-radius:var(--radius); overflow:hidden; flex-shrink:0; background:var(--paper-2); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; } .campaign-hero-photo img{ width:100%; height:100%; object-fit:cover; } .campaign-hero-photo-fallback{ font-size:48px; opacity:.35; } .campaign-rules-box{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:20px 22px; white-space:pre-wrap; font-size:14px; line-height:1.7; color:var(--text-muted); } .campaign-terms-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; } .campaign-terms-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-2); margin-bottom:4px; } .campaign-terms-grid p{ margin:0; font-size:14px; color:var(--text-muted); line-height:1.6; } /* ---------- magazín: detail článku ---------- */ .article-hero{ aspect-ratio:21/9; max-height:460px; width:100%; overflow:hidden; background:var(--paper-2); } .article-hero img{ width:100%; height:100%; object-fit:cover; } @media (max-width:640px){ .article-hero{ aspect-ratio:4/3; } } .article-breadcrumb{ font-size:12.5px; color:var(--text-muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:18px; } .article-breadcrumb a{ color:var(--accent-2); font-weight:600; } .article-meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 28px; font-size:13px; color:var(--text-muted); font-family:'Work Sans'; font-weight:600; } .article-meta-row .tag{ font-size:12px; } .article-body{ max-width:720px; } .article-body h2{ font-size:24px; margin-top:1.5em; } .article-body h3{ font-size:19px; margin-top:1.4em; } .article-body p{ max-width:none; } .article-body ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 1.3em; padding-left:0; } .article-body ul li{ position:relative; padding-left:22px; color:var(--text-muted); } .article-body ul li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; background:var(--accent); } .article-author{ display:flex; align-items:center; gap:12px; padding:20px 0; margin-top:8px; border-top:1.5px solid var(--line); font-size:13.5px; color:var(--text-muted); } .article-author-avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:800; font-size:14px; flex-shrink:0; } /* ---------- portál: prihlásenie / registrácia ---------- */ .auth-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:36px 32px; } .auth-card .checkbox-field{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-muted); } .auth-card .checkbox-field input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; } .auth-card .checkbox-field a{ color:var(--accent-2); font-weight:600; } .auth-switch{ text-align:center; margin-top:22px; font-size:13.5px; color:var(--text-muted); } /* auth checkbox riadok (tvorca prihlásenie „ako manažér“, registrácia tvorcu — súhlas) — pôvodne inline v tvorca/prihlasenie.php */ /* Passkey blok sedí na SVETLOM povrchu (.portal-drawer má background:var(--paper), .auth-card tiež), takže musí používať bežné textové tokeny. Predtým tu boli --paper-text/--paper-text-muted, čo sú farby textu NA TMAVOM podklade — svetlý text na svetlom pozadí, prakticky neviditeľný. admin/login.php má vlastnú kópiu týchto štýlov a tú chybu nikdy nemal. */ .passkey-block{ text-align:center; padding:2px 0 18px; } .passkey-brand{ font-weight:800; letter-spacing:.04em; font-size:15px; color:var(--text); margin-bottom:14px; } .passkey-hint{ margin-top:10px; font-size:12px; color:var(--text-muted); letter-spacing:.02em; } /* Rovnaký prípad ako .passkey-brand vyššie — oddeľovač sedí na svetlom paneli, takže potrebuje --text-muted, nie --paper-text-muted (to je farba pre tmavý podklad). Bolo 1,58:1, teraz 6,30:1. */ .auth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); } .auth-check{ display:flex; align-items:center; gap:10px; margin:-4px 0 2px; } form.contact-form .auth-check input[type="checkbox"]{ width:18px; height:18px; margin:0; padding:0; flex:0 0 18px; accent-color:var(--accent); cursor:pointer; } form.contact-form .auth-check label{ margin:0; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; } /* odkazy na registráciu tvorcu / manažéra pod prihlasovacím formulárom (drawer na webe aj tvorca/prihlasenie.php) */ .creator-drawer-register{ display:flex; flex-direction:column; gap:8px; align-items:center; } .creator-drawer-register a{ font-weight:700; color:var(--accent-2); } .auth-switch a{ color:var(--accent-2); font-weight:700; } /* ---------- cookie súhlasový banner + panel nastavení ---------- */ .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:110; background:var(--paper); border-top:1.5px solid var(--line); box-shadow:0 -6px 24px rgba(20,18,15,.1); padding:18px 0; /* "Skrytý" posun ako 110% vlastnej výšky stačí len keď je `bottom:0`. Na mobile je `bottom` zdvihnuté o výšku tab bar (--tabbar-h, viď nižšie) — treba posunúť o presne toľko navyše, inak časť skrytého bannera ostane vidno nad tab bar (reálne sa to stalo). */ transform:translateY(calc(110% + var(--tabbar-h))); transition:transform .4s cubic-bezier(.16,1,.3,1); } .cookie-banner.is-visible{ transform:translateY(0); } .cookie-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .cookie-banner-text{ font-size:13.5px; color:var(--text-muted); max-width:56ch; margin:0; } .cookie-banner-text a{ font-weight:700; color:var(--text); border-bottom:1.5px solid var(--accent); } .cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; } .cookie-banner-actions .btn{ padding:11px 18px; font-size:13px; } @media (max-width:760px){ /* --tabbar-h (odmerané JS-om, viď .app-tabbar vyššie) — nikdy sa nerozíde so skutočnou výškou lišty. */ .cookie-banner{ bottom:var(--tabbar-h); } } @media (max-width:640px){ .cookie-banner-inner{ flex-direction:column; align-items:stretch; } .cookie-banner-actions{ justify-content:stretch; } .cookie-banner-actions .btn{ flex:1; } } .cookie-panel-backdrop{ position:fixed; inset:0; z-index:210; background:rgba(20,18,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s ease; } .cookie-panel-backdrop.is-open{ opacity:1; pointer-events:auto; } .cookie-panel{ position:relative; background:var(--paper); border-radius:var(--radius); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:36px 32px 32px; box-shadow:var(--shadow); } .cookie-panel h2{ font-size:21px; margin:0 0 20px; padding-right:32px; } .cookie-panel-close{ position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--radius); font-size:14px; color:var(--text); cursor:pointer; } .cookie-panel-close:hover{ border-color:var(--text); } .cookie-option{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 0; border-top:1.5px solid var(--line); } .cookie-option:first-of-type{ border-top:none; padding-top:0; } .cookie-option-copy h3{ font-size:15px; margin:0 0 4px; } .cookie-option-copy p{ font-size:12.5px; margin:0; color:var(--text-muted); } .cookie-panel-actions{ margin-top:24px; display:flex; justify-content:flex-end; } .cookie-panel-actions .btn{ width:100%; } .switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; margin-top:2px; } .switch input{ position:absolute; opacity:0; width:0; height:0; } .switch-track{ position:absolute; inset:0; background:var(--line); border-radius:100px; cursor:pointer; transition:background-color .2s ease; } .switch-track::before{ content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; background:var(--paper); border-radius:50%; box-shadow:0 1px 2px rgba(20,18,15,.25); transition:transform .2s ease; } .switch input:checked + .switch-track{ background:var(--accent); } .switch input:checked + .switch-track::before{ transform:translateX(18px); } .switch input:disabled + .switch-track{ opacity:.55; cursor:not-allowed; } /* ---------- v1.39.0 — prístupnosť, skip link, dotykové ciele, informačná cookie lišta ---------- */ .skip-link{ position:absolute; left:16px; top:-64px; z-index:1000; padding:12px 18px; background:var(--accent); color:var(--accent-ink); font-weight:700; border-radius:var(--radius); box-shadow:0 8px 24px rgba(20,18,15,.25); transition:top .15s ease; } .skip-link:focus{ top:16px; outline:2px solid var(--accent-ink); outline-offset:2px; } main:focus{ outline:none; } .section-head h1.h2{ font-size:clamp(28px,3.4vw,42px); } .cookie-banner--info .cookie-banner-text{ color:var(--text); } .cta-card-secondary{ margin-top:14px; } .service-blocks--related{ grid-template-columns:repeat(3, minmax(0,1fr)); } @media (max-width:960px){ .service-blocks--related{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .service-blocks--related{ grid-template-columns:1fr; } } /* dotykové ciele min. 44 px na mobile a tablete (audit: 26 cieľov pod 40 px) */ @media (max-width:1024px){ .footer-nav a, .footer-legal-links a, .footer-legal a, .lang-options a, .magazine-chip, .gallery-filter, .text-link, .cookie-banner-text a, .article-meta-row .tag, .tag-cloud li a, .breadcrumb a, .pillar-tags li, .hero-pillar-tags a, .contact-person-head a, .contact-card a, .chat-fab-close, .drawer-close, .lang-current{ min-height:44px; display:inline-flex; align-items:center; } .footer-legal-links a, .footer-nav a{ padding:0 4px; } .footer-nav{ gap:0; } .footer-legal-links{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; } .chat-fab-close{ min-width:44px; justify-content:center; } .footer-social a{ width:44px; height:44px; } .app-tab{ min-height:52px; } } /* ---------- v1.39.0 — newsletter / lead magnet ---------- */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .newsletter-band{ background:var(--ink); color:var(--paper-text); padding:64px 0; } .newsletter-band-inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; } .newsletter-band-copy h2{ font-size:clamp(24px,3vw,34px); margin:0 0 12px; color:var(--paper-text); } .newsletter-band-copy p{ color:var(--paper-text-muted); max-width:52ch; margin:0; } .newsletter-form label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.03em; margin-bottom:6px; color:var(--paper-text-muted); } .newsletter-fields{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; gap:12px; align-items:end; } .newsletter-fields input{ width:100%; padding:12px 14px; border-radius:var(--radius); border:1.5px solid var(--line-dark); background:rgba(255,255,255,.06); color:var(--paper-text); font-size:15px; } .newsletter-fields input:focus{ outline:2px solid var(--accent); outline-offset:1px; } .newsletter-consent{ font-size:12.5px; color:var(--paper-text-muted); margin:12px 0 0; max-width:60ch; } .newsletter-consent a{ color:var(--paper-text); border-bottom:1px solid var(--accent); } .newsletter-status{ margin:12px 0 0; font-weight:600; font-size:14px; } .newsletter-status.is-ok{ color:#9fd3a5; } .newsletter-status.is-error{ color:#f0a58d; } .newsletter-compact-row{ display:flex; gap:8px; } .newsletter-compact-row input{ flex:1; min-width:0; padding:11px 12px; border-radius:var(--radius); border:1.5px solid var(--line-dark); background:rgba(255,255,255,.06); color:var(--paper-text); font-size:14px; } .newsletter-compact-row .ep-btn{ flex-shrink:0; } .newsletter-status-wrap{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; } .newsletter-done{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; } .newsletter-status-wrap .newsletter-status, .footer-newsletter .newsletter-status.is-ok{ color:#7fbf88; } .footer-newsletter .newsletter-status.is-error{ color:#e0836a; } @media (max-width:900px){ .newsletter-band-inner{ grid-template-columns:1fr; gap:24px; } .newsletter-fields{ grid-template-columns:1fr; } } /* ---------- v1.39.0 — mestské landing pages ---------- */ .city-why-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; } .city-why-card{ padding:24px; border:1.5px solid var(--line); border-radius:var(--radius-lg); background:var(--surface, transparent); } .city-why-card h3{ font-size:17px; margin:0 0 8px; } .city-why-card p{ margin:0; font-size:14.5px; color:var(--text-muted); } .city-venues{ padding:64px 0; } .city-venues-inner{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:start; } .city-venue-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; } .city-venue-list li{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--paper-text); } .city-venue-list svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; } .city-venues-note{ margin:18px 0 0; color:var(--paper-text-muted); font-size:14.5px; } .city-logistics{ padding:24px; border:1.5px solid var(--line-dark); border-radius:var(--radius-lg); } .city-logistics h3{ margin:0 0 8px; font-size:17px; color:var(--paper-text); } .city-logistics p{ margin:0; color:var(--paper-text-muted); } @media (max-width:1024px){ .city-why-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .city-why-grid, .city-venues-inner, .city-venue-list{ grid-template-columns:1fr; } } @media (max-width:1024px){ .cue-link, .pillar-formats a, .newsletter-consent a, .nav-dropdown-login a, .auth-check a, .portal-login-links a, .logo{ min-height:44px; display:inline-flex; align-items:center; } } .nav-caret{ min-width:28px; min-height:28px; } /* mobil: menší hero variant (960 px WebP) namiesto 1600 px — LCP na 4G */ @media (max-width:760px){ .hero{ background-image:var(--hero-grad, linear-gradient(100deg, rgba(20,18,15,.92) 0%, rgba(20,18,15,.78) 38%, rgba(20,18,15,.4) 68%, transparent 100%)), var(--hero-img-m, var(--hero-img, none)); } } /* stabilná výška spodnej tab bary — pri načítaní webfontu sa nemení (CLS) */ .app-tab{height:58px;overflow:hidden} .app-tab span{line-height:1.15;display:block;text-align:center} /* PageSpeed krok C (content-visibility:auto) odstránený: v niektorých kontextoch (celostránkové snímky, tlač) ostávali sekcie prázdne; prínos bol malý. */ /* ---------- pätička v1.39.5: CTA pás (sprievodca), značka + kontakt, 4 stĺpce odkazov, právna lišta ---------- */ .site-footer{ background:var(--ink); color:var(--paper-text-muted); padding-top:8px; } .site-footer p{ color:var(--paper-text-muted); } .footer-cta{ margin-top:56px; padding:28px 32px; border:1px solid var(--line-dark); border-radius:var(--radius-lg); background:linear-gradient(135deg, rgba(164,119,100,.14), rgba(164,119,100,.03)); } .footer-cta .footer-newsletter{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:12px 40px; align-items:center; margin:0; } .footer-cta .footer-newsletter-title{ grid-column:1; font-family:'Archivo'; font-weight:800; font-size:20px; color:var(--paper-text); margin:0; } .footer-cta .footer-newsletter-desc{ grid-column:1; font-size:14px; margin:0; max-width:52ch; } .footer-cta .newsletter-form--compact{ grid-column:2; grid-row:1 / span 2; } .footer-cols{ display:grid; grid-template-columns:1.6fr repeat(4, minmax(0,1fr)); gap:40px 32px; padding:56px 0 44px; } .footer-brand .logo{ color:var(--paper-text); display:inline-flex; } .footer-brand .tagline{ font-size:14px; line-height:1.55; max-width:36ch; margin:16px 0 20px; } .footer-contact{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; } .footer-contact li{ display:flex; align-items:center; gap:10px; } .footer-contact svg{ width:16px; height:16px; color:var(--accent); flex-shrink:0; } .footer-contact a{ color:var(--paper-text); } .footer-contact a:hover{ color:var(--accent); } .footer-col h4{ font-family:'Work Sans'; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-text); margin:6px 0 16px; } .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; } .footer-col a{ color:var(--paper-text-muted); display:inline-block; padding:2px 0; } .footer-col a:hover{ color:var(--paper-text); } .footer-col .footer-more{ color:var(--accent); font-weight:700; margin-top:4px; } .footer-social{ display:flex; align-items:center; gap:10px; } .footer-social a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-dark); color:var(--paper-text-muted); transition:border-color .15s ease, color .15s ease; } .footer-social a:hover{ border-color:var(--accent); color:var(--paper-text); } .footer-social svg{ width:15px; height:15px; } .footer-bottom{ border-top:1px solid var(--line-dark); padding:22px 0 28px; font-size:12.5px; } .footer-legal-line{ margin:0 0 12px; line-height:1.6; color:#8f8672; max-width:none; } .footer-legal-line strong{ color:var(--paper-text-muted); font-weight:700; } .footer-bottom-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; } .footer-copyright{ margin:0; } .footer-legal-links{ margin:0; display:flex; gap:18px; } .footer-legal-links a{ color:var(--paper-text-muted); } .footer-legal-links a:hover{ color:var(--paper-text); } @media (max-width:1100px){ .footer-cols{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } } @media (max-width:900px){ .footer-cta .footer-newsletter{ grid-template-columns:1fr; } .footer-cta .newsletter-form--compact{ grid-column:1; grid-row:auto; } } @media (max-width:600px){ .footer-cols{ grid-template-columns:1fr; gap:32px; padding:40px 0 32px; } .footer-cta{ padding:22px 18px; margin-top:40px; } .newsletter-compact-row{ flex-direction:column; } .footer-bottom-row{ flex-direction:column; align-items:flex-start; } } /* ---------- platforma v1.39.6: mapa systému, cesta eventu, ukážky obrazoviek OS ---------- */ .sysmap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.95fr) minmax(0,1fr); grid-auto-rows:auto; gap:28px 48px; align-items:stretch; position:relative; } .sysmap-center{ grid-column:2; grid-row:1 / span var(--rows, 3); align-self:stretch; display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:var(--paper-text); border-radius:var(--radius-lg); padding:28px 26px; position:relative; box-shadow:0 20px 50px rgba(20,18,15,.18); } .sysmap-center-badge{ display:inline-block; align-self:flex-start; font-family:'Work Sans'; font-size:12px; font-weight:800; letter-spacing:.12em; padding:4px 10px; border-radius:999px; background:var(--accent); color:var(--accent-ink); margin-bottom:12px; } .sysmap-center h3{ margin:0 0 4px; font-size:22px; color:var(--paper-text); } .sysmap-center > p{ margin:0 0 16px; color:var(--paper-text-muted); font-size:14px; } .sysmap-modules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; } .sysmap-modules li{ font-size:12.5px; font-weight:600; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); color:var(--paper-text); } .sysmap-node{ position:relative; background:var(--surface, #fff); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:20px 20px 16px; } .sysmap-node--left{ grid-column:1; grid-row:var(--row); } .sysmap-node--right{ grid-column:3; grid-row:var(--row); } .sysmap-node::after{ content:""; position:absolute; top:50%; width:48px; height:2px; background:linear-gradient(90deg, var(--accent), rgba(164,119,100,.25)); } .sysmap-node--left::after{ right:-49px; } .sysmap-node--right::after{ left:-49px; transform:scaleX(-1); } .sysmap-node::before{ content:""; position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:-4px; } .sysmap-node--left::before{ right:-6px; } .sysmap-node--right::before{ left:-6px; } .sysmap-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(164,119,100,.12); color:var(--accent-2); margin-bottom:10px; } .sysmap-icon svg{ width:18px; height:18px; } .sysmap-node h3{ font-size:16.5px; margin:0 0 6px; } .sysmap-node > p{ font-size:13.5px; color:var(--text-muted); margin:0 0 12px; } .sysmap-flows{ margin:0; display:flex; flex-direction:column; gap:6px; font-size:12.5px; } .sysmap-flows div{ display:flex; gap:8px; align-items:baseline; } .sysmap-flows dt{ flex-shrink:0; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:12px; color:var(--accent-2); min-width:8.5ch; } .sysmap-flows dd{ margin:0; color:var(--text); } @media (max-width:1000px){ .sysmap{ grid-template-columns:1fr 1fr; gap:20px; } .sysmap-center{ grid-column:1 / -1; grid-row:1; } .sysmap-node--left, .sysmap-node--right{ grid-column:auto; grid-row:auto; } .sysmap-node::after, .sysmap-node::before{ display:none; } } @media (max-width:600px){ .sysmap{ grid-template-columns:1fr; } .sysmap-modules{ grid-template-columns:1fr 1fr; } } .sysflow-section{ background:var(--paper-2, #f3efe7); } .sysflow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; counter-reset:none; } .sysflow-step{ position:relative; background:var(--surface, #fff); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:18px 16px 16px; display:flex; flex-direction:column; gap:6px; } .sysflow-step:not(:last-child)::after{ content:"→"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:800; font-size:16px; z-index:1; } .sysflow-num{ width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--paper-text); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; } .sysflow-step strong{ font-size:15px; line-height:1.25; } .sysflow-where{ font-size:12.5px; color:var(--text-muted); line-height:1.4; } @media (max-width:1000px){ .sysflow{ grid-template-columns:repeat(3, minmax(0,1fr)); } .sysflow-step:nth-child(3)::after{ display:none; } } @media (max-width:600px){ .sysflow{ grid-template-columns:1fr 1fr; } .sysflow-step::after{ display:none !important; } } .osshots{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; } .osshot{ margin:0; display:flex; flex-direction:column; gap:14px; } .osshot-window{ background:#f6f2ea; color:var(--ink); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); } .osshot-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#e9e3d7; border-bottom:1px solid #ddd5c6; } .osshot-bar span{ width:9px; height:9px; border-radius:50%; background:#cfc6b5; } .osshot-bar span:first-child{ background:#d99a8a; } .osshot-bar em{ font-style:normal; margin-left:8px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6b6357; } .osshot-rows{ list-style:none; margin:0; padding:6px 0; } .osshot-rows li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; font-size:13px; border-bottom:1px solid #ece6da; } .osshot-rows li:last-child{ border-bottom:none; } .osshot-label{ color:#1c1915; font-weight:500; } .osshot-chip{ flex-shrink:0; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:#e4ddcf; color:#5a5246; } .osshot-chip--ok{ background:#dcefe0; color:#256b3f; } .osshot-chip--warn{ background:#f7e7c9; color:#8a5a12; } .osshot-chip--accent{ background:var(--accent); color:var(--accent-ink); } .osshot figcaption h3{ font-size:17px; margin:0 0 4px; color:var(--paper-text); } .osshot figcaption p{ font-size:13.5px; color:var(--paper-text-muted); margin:0; } .osshots-note{ margin:24px 0 0; font-size:12.5px; color:var(--paper-text-muted); } @media (max-width:1000px){ .osshots{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .osshots{ grid-template-columns:1fr; } } /* ---------- Tvorca portál — verejná stránka (v1.39.7) ---------- */ .cp-manager-link{ margin:18px 0 0; } .cp-feature-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; } .cp-feature{ background:var(--surface, #fff); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:22px 22px 20px; } .cp-feature h3{ font-size:17px; margin:0 0 6px; } .cp-feature p{ font-size:14px; color:var(--text-muted); margin:0; } @media (max-width:1000px){ .cp-feature-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .cp-feature-grid{ grid-template-columns:1fr; } } .cp-feature-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); } @media (max-width:1000px){ .cp-feature-grid--4{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .cp-feature-grid--4{ grid-template-columns:1fr; } } .cp-manager-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; font-size:13.5px; color:var(--text-muted); } .portal-banner-ctas .text-link{ align-self:center; } .sysflow--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } @media (max-width:600px){ .sysflow--3{ grid-template-columns:1fr; } } .reg-how{ margin:-6px 0 18px; } /* ---------- Kontakt v2 + Tím (v1.40.0) ---------- */ .team-page{ padding-top:8px; } .team-page .section-head{ max-width:760px; } .team-page .section-head h2{ font-size:clamp(26px,3.4vw,38px); } /* v1.113.0 — úvod ide cez celú šírku a fakty sú dve karty vedľa seba. Jeden vysoký stĺpec vpravo tlačil fakturačné údaje pod ohyb a vedľa nich ostávalo prázdne miesto; vedľa seba sa obe skupiny zmestia na jednu obrazovku. Tváre sú na strede a veľké — na kontaktnej stránke sú to ony, čo presvedčí návštevníka, že píše človeku, nie formuláru. */ .contact-hero--v2{ grid-template-columns:1fr; gap:28px; align-items:start; } .contact-hero-people{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 4px; text-align:center; } .contact-hero-people-row{ display:flex; align-items:center; } /* Fotky sú zabalené v . Rozmer aj prekryv preto patria priamemu potomkovi riadku — na samotnom sa obrázok scvrkne na šírku wrappera (z kruhov ovály) a záporný okraj neprekryje suseda, lebo prekrýva sa box wrappera, nie obrázok v ňom. */ .contact-hero-people-row > *{ flex:none; margin-right:-18px; } .contact-hero-people-row > :last-child{ margin-right:0; } .contact-hero-people-row picture{ display:block; width:76px; height:76px; } .contact-hero-people .team-avatar, .contact-hero-people .team-avatar-initials{ width:76px; height:76px; border:3px solid var(--paper); font-size:23px; } .contact-hero-people span{ margin-left:0; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); } .facts-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:6px 22px; display:flex; flex-direction:column; } /* V hlavičke kontaktu je karta len mriežkou — kartou je každá skupina zvlášť. */ /* align-items:stretch (predvolené) zámerne: obe karty musia byť rovnako vysoké, inak vedľa seba vyzerajú ako chyba sadzby. Kratšia sa dotiahne, obsah v nej ostáva hore. */ /* Rovnaká mriežka ako .contact-main nižšie (1fr : 1.15fr, gap 32) — Kontakt sedí nad „Váš kontaktný tím" a Fakturačné údaje presne nad „Napíšte nám". Karty preto NIE sú rovnako široké; rovnako vysoké ostávajú (align-items:stretch). Keď sa zmení .contact-main, musí sa zmeniť aj toto, inak sa stĺpce rozídu. */ .contact-hero--v2 .facts-card{ background:none; border:0; border-radius:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:32px; align-items:stretch; } .contact-hero--v2 .facts-group{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 22px; } /* Musí stáť ZA pravidlom vyššie: rovnaká špecifickosť rozhoduje poradím a spoločný blok @media (max-width:960px) je v súbore skôr, takže by prehral a karty by ostali vedľa seba. */ @media (max-width:960px){ .contact-hero--v2 .facts-card{ grid-template-columns:1fr; gap:20px; } } .facts-group{ padding:16px 0; } .facts-group + .facts-group{ border-top:1.5px solid var(--line); } .facts-title{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); margin:0 0 10px; } .facts-table{ margin:0; display:grid; gap:0; } .facts-table > div{ display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:12px; align-items:baseline; padding:7px 0; border-top:1px dashed var(--line); } .facts-table > div:first-child{ border-top:0; } .facts-table dt{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); } .facts-table dd{ margin:0; font-size:14px; line-height:1.45; color:var(--text); display:flex; align-items:center; gap:8px; min-width:0; } .facts-table dd span{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .facts-table a{ color:var(--text); font-weight:600; border-bottom:1.5px solid var(--accent); } .copy-btn{ flex-shrink:0; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; } .copy-btn svg{ width:14px; height:14px; } .copy-btn:hover{ color:var(--accent-2); border-color:var(--accent); } .copy-btn.is-copied::after{ content:attr(data-tip); position:absolute; left:50%; top:-30px; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11px; padding:3px 8px; border-radius:6px; white-space:nowrap; } .contact-langs{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:3px; letter-spacing:.04em; } .contact-team-more{ align-self:flex-start; font-weight:700; color:var(--accent-2); } /* v1.114.0 — pri oddelení stojí jeho adresa namiesto menoslovu ľudí (.dept-card-people/.dept-person sa už nepoužívajú, tvárami sa predstavujú len prvé kontaktné osoby hore). */ .dept-card-mail{ align-self:flex-start; margin-top:2px; font-size:13px; font-weight:600; color:var(--text); border-bottom:1.5px solid var(--accent); overflow-wrap:anywhere; } .team-dept-head .team-dept-mail{ margin:6px 0 0; } .team-dept-mail a{ font-size:14px; font-weight:600; color:var(--text); border-bottom:1.5px solid var(--accent); } .team-leads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:36px; } .team-lead-card{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:22px; background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:24px; } .team-lead-photo .team-avatar, .team-lead-photo .team-avatar-initials{ width:120px; height:120px; border-radius:22px; font-size:32px; } .team-lead-body h3{ font-size:20px; margin:0 0 4px; } .team-lead-body .role{ display:block; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px; } .team-lead-body p{ font-size:14.5px; color:var(--text-muted); margin:0 0 12px; } .team-lead-body .contact-quick-actions{ margin-top:12px; } .team-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 44px; } .team-stats > div{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:2px; } .team-stats strong{ font-family:var(--font-heading); font-size:34px; line-height:1; font-variant-numeric:tabular-nums; } .team-stats span{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.75; } .team-dept{ margin-top:36px; padding-top:28px; border-top:1.5px solid var(--line); } .team-dept-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; } .team-dept-head h3{ font-size:20px; margin:0 0 4px; } .team-dept-head p{ margin:0; font-size:14.5px; color:var(--text-muted); max-width:60ch; } .team-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .team-card h4{ font-size:16px; margin:0; } .team-card-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; font-size:13px; } .team-card-foot a{ color:var(--accent-2); font-weight:600; } /* Odznak jazyka v karte tímu. Volal sa `.chip` — rovnako ako prepínacie tlačidlo vo formulároch, a keďže stál v súbore nižšie, prebíjal mu pri rovnakej špecificite výplň, rámček aj polomer. Za každým prepínačom na celom webe tak presvital bledý pilulkový obrys o 2 px väčší než tlačidlo samo. Dva rôzne komponenty nesmú mať jedno meno; premenované je to, čo je na jednom mieste. */ .chip-row{ display:inline-flex; gap:4px; } .lang-chip{ font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--text-muted); } @media (max-width:900px){ .team-leads, .team-grid--3{ grid-template-columns:1fr 1fr; } .team-lead-card{ grid-template-columns:88px minmax(0,1fr); gap:16px; padding:18px; } .team-lead-photo .team-avatar, .team-lead-photo .team-avatar-initials{ width:88px; height:88px; font-size:24px; } } @media (max-width:640px){ .team-leads, .team-grid--3, .team-stats{ grid-template-columns:1fr; } .team-lead-card{ grid-template-columns:1fr; } .facts-table > div{ grid-template-columns:1fr; gap:2px; } .team-dept-head{ flex-direction:column; } .contact-hero-people-row > *{ margin-right:-14px; } .contact-hero-people-row > :last-child{ margin-right:0; } .contact-hero-people-row picture{ width:60px; height:60px; } .contact-hero-people .team-avatar, .contact-hero-people .team-avatar-initials{ width:60px; height:60px; font-size:19px; } } /* ── Hero detailu dopytu (v1.66.0) ────────────────────────────────────────── Vedie fotka z dopytu; fotka tvorcu je avatar pri mene. Rozpočet je jediné číslo, podľa ktorého sa značka rozhoduje, takže má typografickú prevahu — predtým bolo všetko rovnaké pilulky a hierarchia žiadna. */ .hero-request{ min-height:0; padding:96px 0 64px; align-items:flex-start; background-image:radial-gradient(1100px circle at 12% -10%, rgba(164,119,100,.35), transparent 60%); } .req-hero{ display:grid; grid-template-columns:minmax(240px, 340px) 1fr; gap:44px; align-items:start; margin-top:22px; } .req-hero-media{ position:relative; margin:0; border-radius:18px; overflow:hidden; background:var(--ink-2); border:1px solid var(--line-dark); aspect-ratio:4 / 3; } .req-hero-media img{ display:block; width:100%; height:100%; object-fit:cover; } .req-hero-count{ position:absolute; right:10px; bottom:10px; background:rgba(20,18,15,.72); color:var(--paper-text); font-size:11.5px; letter-spacing:.03em; padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px); } /* Zástupná dlaždica: iniciály + typ dopytu. Nie emoji — to je vždy priznanie, že sa na prázdny stav nemyslelo. */ .req-hero-ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background: radial-gradient(120% 90% at 50% 0%, rgba(227,164,104,.16), transparent 70%), repeating-linear-gradient(135deg, rgba(240,238,233,.05) 0 2px, transparent 2px 12px); } .req-hero-ph-initials{ font-family:var(--font-display, inherit); font-size:clamp(44px, 6vw, 68px); font-weight:800; letter-spacing:.02em; color:var(--paper-text); opacity:.9; line-height:1; } .req-hero-ph-kind{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-text-muted); } .req-hero-body{ min-width:0; } .req-hero-title{ margin:8px 0 0; font-size:clamp(30px, 4.2vw, 52px); line-height:1.06; text-wrap:balance; } .req-hero-author{ display:flex; align-items:center; gap:12px; margin-top:20px; } .req-hero-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line-dark); background:var(--ink-2); } .req-hero-avatar--ph{ display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--paper-text); letter-spacing:.02em; } .req-hero-author-name{ display:flex; flex-direction:column; gap:1px; font-size:15px; font-weight:600; color:var(--paper-text); } .req-hero-author-name a{ color:inherit; border-bottom:1px solid rgba(240,238,233,.35); } .req-hero-author-name a:hover{ border-bottom-color:var(--accent); color:var(--accent); } .req-hero-author-name small{ font-size:12px; font-weight:400; color:var(--paper-text-muted); letter-spacing:.02em; } .req-hero-facts{ display:flex; flex-wrap:wrap; gap:14px 36px; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line-dark); } .req-hero-fact dt{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-text-muted); margin:0 0 4px; } .req-hero-fact dd{ margin:0; font-size:16px; font-weight:600; color:var(--paper-text); } .req-hero-fact--lead dd{ font-size:clamp(22px, 2.6vw, 30px); font-weight:800; letter-spacing:-.01em; color:var(--accent); font-variant-numeric:tabular-nums; } .req-hero-trust{ display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:22px 0 0; padding:0; } .req-hero-trust li{ display:inline-flex; align-items:baseline; gap:6px; font-size:13px; color:var(--paper-text-muted); border:1px solid var(--line-dark); border-radius:999px; padding:6px 14px; } .req-hero-trust strong{ color:var(--paper-text); font-weight:700; font-variant-numeric:tabular-nums; } .req-hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; } @media (max-width: 900px){ .hero-request{ padding:80px 0 48px; } .req-hero{ grid-template-columns:1fr; gap:24px; } .req-hero-media{ max-width:min(360px, 100%); aspect-ratio:1; } .req-hero-facts{ gap:14px 24px; } } /* ── Karta dopytu v marketplace (v1.67.0) ─────────────────────────────────── Rovnaká hierarchia ako hero detailu: médium vedie, rozpočet je hlavné číslo, dôveryhodnosť tvorcu je tichý riadok. Médium je povinné (fotka dopytu → fotka tvorcu → typografická dlaždica), aby mriežka držala rytmus aj vtedy, keď tvorca fotku nepridal. */ .req-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; } .req-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--color-surface); border:1px solid var(--color-line); border-radius:16px; overflow:hidden; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .req-card:hover{ border-color:var(--color-accent); transform:translateY(-2px); box-shadow:var(--shadow-md); } .req-card:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } .req-card-media{ position:relative; aspect-ratio:4 / 3; background:var(--color-paper-2); overflow:hidden; } .req-card-media img{ display:block; width:100%; height:100%; object-fit:cover; } .req-card-ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display, inherit); font-size:46px; font-weight:800; letter-spacing:.02em; color:var(--color-faint); background: radial-gradient(120% 90% at 50% 0%, rgba(164,119,100,.14), transparent 70%), repeating-linear-gradient(135deg, rgba(20,18,15,.035) 0 2px, transparent 2px 12px); } .req-card-kind{ position:absolute; left:10px; top:10px; max-width:calc(100% - 20px); background:rgba(20,18,15,.72); color:#f0eee9; backdrop-filter:blur(4px); font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; padding:4px 10px; border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .req-card-body{ padding:16px 18px 12px; display:flex; flex-direction:column; gap:8px; flex:1; } .req-card-title{ margin:0; font-size:17px; line-height:1.25; font-weight:700; color:var(--color-text); text-wrap:balance; } .req-card-excerpt{ margin:0; font-size:13.5px; line-height:1.5; color:var(--color-text-muted); } .req-card-author{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:4px; min-width:0; } .req-card-avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--color-line); background:var(--color-paper-2); } .req-card-avatar--ph{ display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--color-faint); } .req-card-author-name{ font-size:13.5px; font-weight:600; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .req-card-reach{ font-size:12px; color:var(--color-text-muted); margin-left:auto; flex-shrink:0; font-variant-numeric:tabular-nums; } .req-card-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 18px 16px; border-top:1px solid var(--color-line); } .req-card-budget{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--color-accent); font-variant-numeric:tabular-nums; } .req-card-side{ display:flex; align-items:baseline; gap:10px; font-size:12px; color:var(--color-text-muted); flex-shrink:0; } .req-card-eps{ font-weight:700; color:var(--color-text); font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion: reduce){ .req-card:hover{ transform:none; } } /* ============ Domov: LIVE Shopping + e-shop pre tvorcov (v1.71.0) ============ */ .live-dot{ display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:999px; background:#d84a3a; vertical-align:middle; } .live-dot::after{ content:""; display:block; width:7px; height:7px; border-radius:999px; background:#d84a3a; animation:live-pulse 1.8s ease-out infinite; } @keyframes live-pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3); opacity:0; } } @media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none; } } .live-shop-section{ background:var(--ink); color:var(--paper-text); } .live-shop-section .section-head h2{ color:var(--paper-text); } .live-shop-section .section-head p,.live-shop-section .eyebrow{ color:var(--paper-text-muted); } .live-shop-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:28px; } .live-card{ padding:24px; border:1px solid var(--line-dark); border-radius:14px; background:var(--ink-2); } .live-card-ico{ display:block; font-size:22px; line-height:1; margin-bottom:12px; } .live-card h3{ margin:0 0 8px; font-size:17px; color:var(--paper-text); } .live-card p{ margin:0; font-size:14px; line-height:1.6; color:var(--paper-text-muted); } .live-demo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:28px; align-items:start; padding:28px; border:1px solid var(--line-dark); border-radius:16px; background:var(--ink-2); margin-bottom:22px; } .live-demo h3{ margin:0 0 16px; font-size:20px; color:var(--paper-text); } .live-flow{ list-style:none; margin:0; padding:0; counter-reset:lf; display:flex; flex-direction:column; gap:14px; } .live-flow li{ counter-increment:lf; position:relative; padding-left:38px; } .live-flow li::before{ content:counter(lf); position:absolute; left:0; top:1px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; } .live-flow strong{ display:block; font-size:14.5px; color:var(--paper-text); margin-bottom:3px; } .live-flow span{ font-size:13.5px; line-height:1.6; color:var(--paper-text-muted); } .live-mock{ border:1px solid var(--line-dark); border-radius:12px; overflow:hidden; background:#0e0c0a; font-size:12.5px; } .live-mock-video{ position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#2a231d,#14120f); display:flex; align-items:center; justify-content:center; } .live-mock-play{ font-size:26px; color:rgba(255,255,255,.35); } .live-mock-badge{ position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:999px; background:#d84a3a; color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; } .live-mock-badge .live-dot{ background:#fff; } .live-mock-badge .live-dot::after{ background:#fff; } .live-mock-viewers{ position:absolute; right:10px; top:10px; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.5); color:var(--paper-text); font-size:11px; font-weight:700; } .live-mock-strip{ display:flex; flex-direction:column; gap:1px; background:var(--line-dark); } .live-mock-prod{ display:grid; grid-template-columns:34px 1fr auto; gap:4px 10px; padding:10px 12px; background:#14120f; align-items:center; } .live-mock-code{ grid-row:span 2; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--accent); color:#fff; font-weight:800; font-size:12px; } .live-mock-name{ color:var(--paper-text); font-weight:700; } .live-mock-price{ color:var(--paper-text); font-weight:700; white-space:nowrap; } .live-mock-price s{ color:var(--paper-text-muted); font-weight:400; margin-right:4px; } .live-mock-bar{ grid-column:2 / -1; height:4px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; } .live-mock-bar i{ display:block; height:100%; background:var(--accent); } .live-mock-bar.is-hot i{ background:#d84a3a; } .live-mock-left{ grid-column:2 / -1; color:var(--paper-text-muted); font-size:11.5px; } .live-mock-prod.is-last .live-mock-left{ color:#e8927f; font-weight:700; } .live-mock-chat{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; background:#0e0c0a; } .live-mock-chat p{ margin:0; color:var(--paper-text-muted); line-height:1.5; } .live-mock-chat b{ color:var(--paper-text); margin-right:5px; } .live-mock-chat .is-sys{ padding:5px 9px; border-radius:8px; background:rgba(164,119,100,.18); color:#d9c3b6; font-size:11.5px; } .live-proof{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 32px; align-items:start; } .live-proof h3{ grid-column:1 / -1; margin:0; font-size:20px; color:var(--paper-text); } .live-proof ul{ margin:0; padding-left:20px; font-size:14px; line-height:1.7; color:var(--paper-text-muted); } .live-proof-stat{ margin:0; padding:16px 18px; border:1px solid var(--line-dark); border-left:3px solid var(--accent); border-radius:10px; background:var(--ink-2); font-size:15px; line-height:1.6; color:var(--paper-text); font-weight:600; } .live-ctas{ grid-column:1 / -1; display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; } .live-shop-section .live-ctas .text-link{ color:var(--paper-text); } .cshop-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:24px; } .cshop-card{ padding:26px 28px; background:var(--paper); border:1px solid var(--line); border-radius:14px; } .cshop-card h3{ margin:0 0 8px; font-size:18px; } .cshop-card-lead{ margin:0 0 12px; font-size:14.5px; line-height:1.6; color:var(--color-text-muted); } .cshop-card ul{ margin:0; padding-left:20px; font-size:14px; line-height:1.65; } .cshop-card li{ margin-bottom:7px; } .cshop-aplus{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:32px; align-items:center; padding:30px; border:1px solid var(--line); border-radius:16px; background:var(--paper); } .cshop-aplus h3{ margin:0 0 8px; font-size:20px; } .cshop-aplus p{ margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--color-text-muted); } .cshop-chain{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:18px; font-size:12.5px; } .cshop-chain span{ padding:4px 11px; border:1px solid var(--line); border-radius:999px; background:var(--paper-2); font-weight:700; } .cshop-chain i{ font-style:normal; color:var(--color-text-muted); } .cshop-wire{ display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); } .cshop-wire .cw{ display:flex; gap:6px; } .cshop-wire span,.cshop-wire i{ display:block; border-radius:3px; background:rgba(20,18,15,.14); } .cshop-wire .cw-hero{ flex-direction:column; gap:5px; height:56px; justify-content:center; padding:0 10px; background:rgba(164,119,100,.35); border-radius:6px; } .cshop-wire .cw-t{ height:8px; width:60%; background:rgba(20,18,15,.3); } .cshop-wire .cw-t2{ height:5px; width:40%; background:rgba(20,18,15,.22); } .cshop-wire .cw-b{ flex:1; height:30px; } .cshop-wire .cw-split{ height:52px; } .cshop-wire .cw-im{ flex:1; background:rgba(164,119,100,.4); } .cshop-wire .cw-lines{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; } .cshop-wire .cw-lines i{ height:5px; } .cshop-wire .cw-lines i:last-child{ width:60%; } .cshop-wire .cw-gal .cw-im.sm{ height:34px; } .cshop-wire .cw-faq{ flex-direction:column; gap:4px; } .cshop-wire .cw-faq i{ height:8px; } .cshop-wire .cw-cta{ align-items:center; justify-content:space-between; padding:10px; background:rgba(164,119,100,.18); border-radius:6px; } .cshop-wire .cw-btn{ width:52px; height:14px; background:var(--accent); border-radius:999px; } @media (max-width:1000px){ .live-shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .live-demo,.live-proof,.cshop-aplus{ grid-template-columns:1fr; } .cshop-grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .live-shop-grid{ grid-template-columns:1fr; } .live-demo,.cshop-aplus{ padding:20px; } .live-proof-stat{ font-size:14px; } }