/* ========================================================================== Neonrocket – dočasná téma Jeden súbor, bez buildu. Poradie: tokeny → základ → rozloženie → hlavička → tlačidlá → hero → obsah → stĺpec → výpisy → recenzie → pätička → ostatné. Farby žijú len v tokenoch na :root; tmavá téma ich iba predefinuje. ========================================================================== */ @property --ang { syntax: ''; inherits: false; initial-value: 0deg; } /* ---------- Tokeny: svetlá téma (predvolená) ---------- */ :root { --bg: #F6F5FA; --surface: #FFFFFF; --surface-2: #EEEBF6; --ink: #15121F; --text: #2B2738; --muted: #5E586E; --line: #E4E0EE; --line-2: #D3CEE0; --brand: #5D1AE8; --brand-2: #DE2683; --ok: #1a9d52; --link: #5D1AE8; --link-hover: #640E69; --link-underline: rgb(93 26 232 / .45); --focus: #5D1AE8; --logo: #5D1AE8; --mark: rgb(93 26 232 / .12); --r1: #5D1AE8; --r2: #B229FF; --r3: #DE2683; --grad: linear-gradient(100deg, #5D1AE8 0%, #B229FF 55%, #DE2683 100%); --btn-fill: #5D1AE8; --btn-ink: #FFFFFF; --btn-shadow: 0 8px 22px -10px rgb(93 26 232 / .65); --btn-glow: 0 12px 30px -8px rgb(93 26 232 / .55), 0 0 0 4px rgb(178 41 255 / .10); /* okraj plného tlačidla: vo svetlej v farbe výplne, teda bez farebného obrysu (Milo 28. 9.); tmavá téma token zruší (initial) a tlačidlo dostane gradientový obrys z var(--ang) */ --btn-edge: linear-gradient(var(--btn-fill), var(--btn-fill)); /* prepínač témy: poloha jazdca (0 svetlá, 1 tmavá) a farby — sedí už pred JS */ --mode: 0; --mode-sun: #C77700; --mode-moon: var(--muted); --mode-thumb: #FFFFFF; --mode-glow: 0 1px 2px rgb(21 18 31 / .14), 0 4px 12px -3px rgb(222 38 131 / .35); --ghost-fill: #FFFFFF; --ghost-ink: #5D1AE8; --shadow-1: 0 1px 2px rgb(21 18 31 / .05), 0 6px 16px -8px rgb(21 18 31 / .10); --shadow-2: 0 1px 2px rgb(21 18 31 / .05), 0 14px 34px -14px rgb(93 26 232 / .28), 0 34px 64px -34px rgb(21 18 31 / .25); --gridline: rgb(93 26 232 / .075); --space-1: 93 26 232; --space-2: 222 38 131; --space-a: .6; --dot: rgb(93 26 232 / .20); --aura-1: rgb(93 26 232 / .13); --aura-2: rgb(222 38 131 / .08); --orbit: rgb(93 26 232 / .38); --orbit-faint: rgb(93 26 232 / .17); --halo: rgb(93 26 232 / .07); --sat: #DE2683; --check-bg: #EFE8FE; --spot: rgb(93 26 232 / .06); --row-hover: rgb(93 26 232 / .035); --header-bg: rgb(246 245 250 / .82); /* hlavička na mobile: kapsula zo skla, jej gradientový okraj a tieň, karta menu, stmavenie stránky */ --capsule-bg: rgb(255 255 255 / .74); --capsule-edge: linear-gradient(100deg, rgb(93 26 232 / .34), rgb(178 41 255 / .14) 50%, rgb(222 38 131 / .3)); --capsule-shadow: 0 1px 2px rgb(21 18 31 / .05), 0 10px 28px -12px rgb(93 26 232 / .3); --sheet-bg: rgb(255 255 255 / .95); --scrim: rgb(21 18 31 / .28); --code-bg: #EEEBF6; --star: #F2B01E; --tile: #FFFFFF; /* doska pod farebným logom klienta (prípadová štúdia) — svetlá v oboch témach */ --on-grad: #FFFFFF; /* ikona či text na gradiente */ --off: #767186; /* zhasnutý veľký text (≥ 3 : 1 aj na --claims-bg v najsilnejšej žiare), napr. ešte nerozsvietená zásada */ --glow: 0 0 .6em rgb(93 26 232 / .16); /* žiara rozsvieteného nápisu */ --claims-bg: #EEEBF6; /* pás zásad na titulke (vo svetlej = --surface-2, v tmavej o stupeň tmavší než stránka) */ --danger: #B0175F; /* chyba vo formulári: 6,7 : 1 na bielej (#DE2683 má len 4,46 : 1) */ --must: #C0141B; /* záväzky voči klientovi v internom manuáli (skutočná červená; 6,3 : 1 na bielej) */ --adv-fill: linear-gradient(100deg, #5D1AE8 0%, #A21CAF 100%); --adv-ink: #FFFFFF; /* tlačidlo poradcu v menu: výplň (biela na oboch koncoch ≥ 6 : 1), odlišná od obrysových položiek okolo */ --adv-glow: 0 10px 26px -12px rgb(162 28 175 / .7); --adv-glow-2: 0 14px 30px -10px rgb(162 28 175 / .75); /* ikony pre masku (farbu dáva background) — odkazy na WhatsApp a Messenger v texte Kontaktu */ --i-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 20.4l1.2-4.2a8.4 8.4 0 1 1 3.1 3.1Z'/%3E%3Cpath fill='%23000' stroke='none' d='M9.3 7.9c.2-.3.4-.3.6-.3h.4c.2 0 .3 0 .5.3l.7 1.6c0 .2 0 .3-.1.5l-.4.5c-.1.1-.2.3-.1.5.4.8 1 1.5 1.8 2 .3.2.6.3.9.4.2.1.3 0 .5-.1l.5-.6c.1-.2.3-.2.5-.1l1.5.7c.2.1.3.2.3.4 0 .4-.1 1-.6 1.3-.4.3-1.1.5-1.9.3-1.3-.3-2.5-1-3.5-2-.8-.8-1.4-1.7-1.7-2.6-.3-.9-.2-1.6.2-2Z'/%3E%3C/svg%3E"); --i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath d='M0 36V21C0 9.4 6.2 2.2 18.6 0l2 5.1C13.4 7.2 10 11.2 9.6 17H19v19H0Zm27 0V21C27 9.4 33.2 2.2 45.6 0l2 5.1C40.4 7.2 37 11.2 36.6 17H46v19H27Z'/%3E%3C/svg%3E"); --i-msg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3c-4.9 0-8.7 3.6-8.7 8.2 0 2.5 1.1 4.7 3 6.2v3l2.8-1.5c.9.2 1.9.4 2.9.4 4.9 0 8.7-3.6 8.7-8.1S16.9 3.3 12 3.3Z'/%3E%3Cpath d='m7.4 13.7 3.1-3.3 2.3 2.1 3.8-4'/%3E%3C/svg%3E"); /* tvar signálu, ktorý sa zľava zo šumu vyčistí (maska; farbu dáva --grad) — claim značky */ --signal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 12.3L5 7.4L10 22.3L15 11.7L20 16.3L25 6.1L30 18.5L35 9.1L40 30.6L45 33.8L50 29.7L55 20L60 23.8L65 29.6L70 22.5L75 9.4L80 10.8L85 31.3L90 30.5L95 29.5L100 21.2L105 12.4L110 21.2L115 14.5L120 30L125 27.2L130 12.5L135 27.1L140 19.3L145 10.9L150 10.2L155 20.7L160 26.5L165 26.7L170 23.4L175 17.8L180 21.6L185 23.5L190 23.7L195 23.7L200 28.2L205 19.2L210 13.6L215 15.2L220 19.2L225 14.5L230 23.9L235 21.3L240 24.1L245 18.5L250 16.4L255 17.2L260 14.3L265 17.5L270 18.2L275 24L280 24.6L285 17.1L290 23.3L294 19.7L298 18.7L302 17.6L306 16.6L310 16.3L314 17L318 18.8L322 21.4L326 24.5L330 27.4L334 28.5L338 28.1L342 26.3L346 23.5L350 20L354 16.5L358 13.7L362 11.9L366 11.5L370 12.6L374 15L378 18.2L382 21.8L386 25L390 27.4L394 28.5L398 28.1L402 26.3L406 23.5L410 20L414 16.5L418 13.7L422 11.9L426 11.5L430 12.6L434 15L438 18.2L442 21.8L446 25L450 27.4L454 28.5L458 28.1L462 26.3L466 23.5L470 20L474 16.5L478 13.7L482 11.9L486 11.5L490 12.6L494 15L498 18.2L502 21.8L506 25L510 27.4L514 28.5L518 28.1L522 26.3L526 23.5L530 20L534 16.5L538 13.7L542 11.9L546 11.5L550 12.6L554 15L558 18.2L562 21.8L566 25L570 27.4L574 28.5L578 28.1L582 26.3L586 23.5L590 20L594 16.5L598 13.7' fill='none' stroke='url(%23f)' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); /* pätička je tmavá v oboch témach */ --f-bg: #131314; --f-ink: #E3E3E3; --f-text: #C4C7C5; --f-muted: #9AA0A6; --f-line: #3C4043; /* „… Fallback" = rovnako široké záložné písmo z fonts.css (proti CLS pri načítaní fontu) */ --font-display: "Archivo", "Archivo Fallback", "Segoe UI", system-ui, sans-serif; --font-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace; /* šírky obsahu = theme.json (ULOHY.md bod 21) */ --nr-width-content: 760px; --nr-width-wide: 1060px; --nr-container: 1240px; --gutter: clamp(16px, 4vw, 40px); interpolate-size: allow-keywords; } /* ---------- Tokeny: tmavá téma (pastel) ---------- */ @media not (prefers-color-scheme: light) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #131314; --surface: #202124; --surface-2: #28292D; --ink: #E3E3E3; --text: #C4C7C5; --muted: #9AA0A6; --line: #3C4043; --line-2: #4A4E53; --brand: #A98BFF; --brand-2: #F28DBA; --ok: #4ade80; --link: #A98BFF; --link-hover: #D29BFF; --link-underline: rgb(169 139 255 / .45); --focus: #D29BFF; --logo: #A98BFF; --mark: rgb(169 139 255 / .16); --r1: #A98BFF; --r2: #D29BFF; --r3: #F28DBA; --grad: linear-gradient(100deg, #A98BFF 0%, #D29BFF 50%, #F28DBA 100%); --btn-fill: #1B1B1E; --btn-ink: #E3E3E3; --btn-shadow: 0 0 22px -6px rgb(169 139 255 / .35), 0 0 44px -14px rgb(242 141 186 / .30); --btn-glow: 0 0 28px -4px rgb(169 139 255 / .50), 0 0 56px -10px rgb(242 141 186 / .40); --ghost-fill: #1B1B1E; --ghost-ink: #E3E3E3; --shadow-1: 0 0 0 1px rgb(255 255 255 / .02), 0 8px 24px -14px rgb(0 0 0 / .6); --shadow-2: 0 0 0 1px rgb(169 139 255 / .18), 0 18px 48px -20px rgb(169 139 255 / .30); --gridline: rgb(169 139 255 / .07); --space-1: 226 220 255; --space-2: 242 141 186; --space-a: .8; --dot: rgb(169 139 255 / .22); --aura-1: rgb(169 139 255 / .12); --aura-2: rgb(242 141 186 / .07); --orbit: rgb(169 139 255 / .50); --orbit-faint: rgb(169 139 255 / .20); --halo: rgb(169 139 255 / .09); --sat: #F28DBA; --check-bg: rgb(169 139 255 / .14); --spot: rgb(169 139 255 / .09); --row-hover: rgb(169 139 255 / .05); --header-bg: rgb(19 19 20 / .8); --code-bg: #28292D; --star: #F5C451; --on-grad: #131314; --tile: #ECEAF2; --capsule-bg: rgb(32 33 36 / .72); --capsule-edge: linear-gradient(100deg, rgb(169 139 255 / .55), rgb(210 155 255 / .2) 50%, rgb(242 141 186 / .5)); --capsule-shadow: 0 14px 34px -16px rgb(0 0 0 / .9), 0 0 26px -12px rgb(169 139 255 / .45); --sheet-bg: rgb(32 33 36 / .96); --scrim: rgb(0 0 0 / .55); --off: #6E7278; --glow: 0 0 .5em rgb(169 139 255 / .38), 0 0 1.4em rgb(242 141 186 / .2); --claims-bg: #0F0F11; --btn-edge: initial; --danger: #F28DBA; --must: #FF7A7A; --adv-fill: var(--grad); --adv-ink: var(--on-grad); --adv-glow: 0 0 22px -6px rgb(169 139 255 / .45); --adv-glow-2: 0 0 30px -4px rgb(242 141 186 / .55); --mode: 1; --mode-sun: var(--muted); --mode-moon: #D29BFF; --mode-thumb: #34303F; --mode-glow: 0 0 0 1px rgb(169 139 255 / .35), 0 0 14px -2px rgb(169 139 255 / .6); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #131314; --surface: #202124; --surface-2: #28292D; --ink: #E3E3E3; --text: #C4C7C5; --muted: #9AA0A6; --line: #3C4043; --line-2: #4A4E53; --brand: #A98BFF; --brand-2: #F28DBA; --ok: #4ade80; --link: #A98BFF; --link-hover: #D29BFF; --link-underline: rgb(169 139 255 / .45); --focus: #D29BFF; --logo: #A98BFF; --mark: rgb(169 139 255 / .16); --r1: #A98BFF; --r2: #D29BFF; --r3: #F28DBA; --grad: linear-gradient(100deg, #A98BFF 0%, #D29BFF 50%, #F28DBA 100%); --btn-fill: #1B1B1E; --btn-ink: #E3E3E3; --btn-shadow: 0 0 22px -6px rgb(169 139 255 / .35), 0 0 44px -14px rgb(242 141 186 / .30); --btn-glow: 0 0 28px -4px rgb(169 139 255 / .50), 0 0 56px -10px rgb(242 141 186 / .40); --ghost-fill: #1B1B1E; --ghost-ink: #E3E3E3; --shadow-1: 0 0 0 1px rgb(255 255 255 / .02), 0 8px 24px -14px rgb(0 0 0 / .6); --shadow-2: 0 0 0 1px rgb(169 139 255 / .18), 0 18px 48px -20px rgb(169 139 255 / .30); --gridline: rgb(169 139 255 / .07); --space-1: 226 220 255; --space-2: 242 141 186; --space-a: .8; --dot: rgb(169 139 255 / .22); --aura-1: rgb(169 139 255 / .12); --aura-2: rgb(242 141 186 / .07); --orbit: rgb(169 139 255 / .50); --orbit-faint: rgb(169 139 255 / .20); --halo: rgb(169 139 255 / .09); --sat: #F28DBA; --check-bg: rgb(169 139 255 / .14); --spot: rgb(169 139 255 / .09); --row-hover: rgb(169 139 255 / .05); --header-bg: rgb(19 19 20 / .8); --code-bg: #28292D; --star: #F5C451; --on-grad: #131314; --tile: #ECEAF2; --capsule-bg: rgb(32 33 36 / .72); --capsule-edge: linear-gradient(100deg, rgb(169 139 255 / .55), rgb(210 155 255 / .2) 50%, rgb(242 141 186 / .5)); --capsule-shadow: 0 14px 34px -16px rgb(0 0 0 / .9), 0 0 26px -12px rgb(169 139 255 / .45); --sheet-bg: rgb(32 33 36 / .96); --scrim: rgb(0 0 0 / .55); --off: #6E7278; --glow: 0 0 .5em rgb(169 139 255 / .38), 0 0 1.4em rgb(242 141 186 / .2); --claims-bg: #0F0F11; --btn-edge: initial; --danger: #F28DBA; --must: #FF7A7A; --adv-fill: var(--grad); --adv-ink: var(--on-grad); --adv-glow: 0 0 22px -6px rgb(169 139 255 / .45); --adv-glow-2: 0 0 30px -4px rgb(242 141 186 / .55); --mode: 1; --mode-sun: var(--muted); --mode-moon: #D29BFF; --mode-thumb: #34303F; --mode-glow: 0 0 0 1px rgb(169 139 255 / .35), 0 0 14px -2px rgb(169 139 255 / .6); } /* ---------- Základ ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; } img { height: auto; } a { color: var(--link); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--mark); } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .nr-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; transition: top .15s; } .nr-skip:focus { top: 12px; } .nr-main:focus { outline: none; } .nr-icon { width: 18px; height: 18px; flex: none; } /* ---------- Rozloženie ---------- */ .nr-wrap { max-width: var(--nr-container); margin-inline: auto; padding-inline: var(--gutter); } .nr-content { padding-block: clamp(40px, 6vw, 80px); } .nr-layout { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "body" "aside"; } .nr-layout > .nr-body { grid-area: body; min-width: 0; } .nr-rail, .nr-rail__sticky { display: contents; } .nr-rail .nr-toc { grid-area: toc; } .nr-rail .nr-aside { grid-area: aside; display: grid; gap: 16px; align-content: start; } @media (min-width: 64em) { .nr-layout { grid-template-columns: minmax(0, 1fr) 316px; grid-template-areas: "body rail"; gap: 56px; } .nr-rail { display: block; grid-area: rail; } .nr-rail__sticky { display: grid; gap: 16px; align-content: start; position: sticky; top: 90px; } .nr-rail .nr-toc, .nr-rail .nr-aside { grid-area: auto; } } /* ---------- Hlavička ---------- */ .nr-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid var(--line); } .admin-bar .nr-header { top: var(--wp-admin--admin-bar--height, 32px); } .nr-header__in { display: flex; align-items: center; gap: 16px; min-height: 68px; } .nr-logo { display: inline-flex; align-items: center; color: var(--logo); text-decoration: none; flex: none; } .nr-wordmark { display: block; height: 18px; width: auto; aspect-ratio: 1249.5 / 94.45; fill: currentColor; } .nr-logo--lg .nr-wordmark { height: 24px; } .nr-wordmark--2row { aspect-ratio: 1099.32 / 277.84; } .nr-logo--lg .nr-wordmark--2row { height: 52px; } /* v hlavičke sú obe logá: dvojriadkové na mobile a tablete, jednoriadkové na desktope */ .nr-header .nr-wordmark:not(.nr-wordmark--2row) { display: none; } .nr-header .nr-wordmark--2row { height: clamp(28px, 8.4vw, 34px); } /* Logo s efektmi (inc/svg.php, nrd_wordmark_fx + assets/js/logo-fx.js): nad písmenami náhodne preletujú pixelové meteority a občas naskočí glitch (RGB posun + rezy) — samé od seba aj pri prechode myšou. Meteority animuje skript (WAAPI), glitch len CSS (transform/opacity/clip-path). */ .nr-wm { overflow: visible; } .wm-gl { opacity: 0; pointer-events: none; } .wm-gl--a { fill: var(--brand-2); } .wm-gl--b { fill: #22B8E8; } .wm-met { opacity: 0; fill: var(--brand-2); pointer-events: none; } .wm-halo { opacity: .22; } @media (prefers-reduced-motion: no-preference) { .nr-logo.is-gl .wm-gl--a { animation: wm-ga .7s steps(1, end) 1; } .nr-logo.is-gl .wm-gl--b { animation: wm-gb .7s steps(1, end) 1; } .nr-logo.is-gl .wm-base { animation: wm-gj .7s steps(1, end) 1; } @media (hover: hover) { .nr-logo:hover .wm-gl--a, .nr-logo:focus-visible .wm-gl--a { animation: wm-ga 1.2s steps(1, end) infinite; } .nr-logo:hover .wm-gl--b, .nr-logo:focus-visible .wm-gl--b { animation: wm-gb 1.2s steps(1, end) infinite; } .nr-logo:hover .wm-base, .nr-logo:focus-visible .wm-base { animation: wm-gj 1.2s steps(1, end) infinite; } } } @keyframes wm-ga { 0% { opacity: 1; transform: translate(calc(var(--u) * -1.3px), 0); clip-path: inset(10% 0 55% 0); } 8% { opacity: 1; transform: translate(calc(var(--u) * 1.6px), 0); clip-path: inset(58% 0 8% 0); } 16% { opacity: 1; transform: translate(calc(var(--u) * -.8px), 0); clip-path: inset(30% 0 40% 0); } 24%, 54% { opacity: 0; } 58% { opacity: 1; transform: translate(calc(var(--u) * 1.2px), 0); clip-path: inset(0 0 70% 0); } 68% { opacity: 1; transform: translate(calc(var(--u) * -1.5px), 0); clip-path: inset(75% 0 0 0); } 76%, 100% { opacity: 0; } } @keyframes wm-gb { 0% { opacity: 1; transform: translate(calc(var(--u) * 1.3px), 0); clip-path: inset(50% 0 15% 0); } 8% { opacity: 1; transform: translate(calc(var(--u) * -1.4px), 0); clip-path: inset(5% 0 62% 0); } 16% { opacity: 1; transform: translate(calc(var(--u) * .9px), 0); clip-path: inset(40% 0 30% 0); } 24%, 54% { opacity: 0; } 58% { opacity: 1; transform: translate(calc(var(--u) * -1.1px), 0); clip-path: inset(65% 0 5% 0); } 68% { opacity: 1; transform: translate(calc(var(--u) * 1.6px), 0); clip-path: inset(0 0 78% 0); } 76%, 100% { opacity: 0; } } @keyframes wm-gj { 0%, 24%, 54%, 76%, 100% { transform: translate(0, 0); } 8% { transform: translate(calc(var(--u) * .6px), 0); } 16% { transform: translate(calc(var(--u) * -.5px), 0); } 58% { transform: translate(calc(var(--u) * -.6px), 0); } 68% { transform: translate(calc(var(--u) * .5px), 0); } } .nr-nav { display: none; margin-inline-start: auto; } .nr-nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; } .nr-nav a, .nr-nav summary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; cursor: pointer; list-style: none; } .nr-nav summary::-webkit-details-marker { display: none; } .nr-nav > ul > li > a, .nr-nav summary { white-space: nowrap; } /* menší desktop: s položkou Cenník (29. 9.) by sa menu pri 992 px nezmestilo */ @media (min-width: 62em) and (max-width: 79.99em) { .nr-header__in { gap: 12px; } .nr-nav > ul > li > a, .nr-nav summary { padding-inline: 8px; font-size: .9rem; gap: 4px; } } .nr-nav a:hover, .nr-nav summary:hover, .nr-nav [open] > summary { background: var(--surface-2); color: var(--ink); } .nr-nav a[aria-current="page"], .nr-nav summary.is-current { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } .nr-nav summary .nr-icon { width: 14px; height: 14px; transition: transform .2s; } .nr-nav [open] > summary .nr-icon { transform: rotate(180deg); } .nr-mega { position: relative; } .nr-mega__panel { position: absolute; top: calc(100% + 10px); left: -12px; width: min(620px, 80vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); } .nr-nav .nr-mega__panel a { display: grid; gap: 2px; border-radius: 12px; padding: 10px 12px; } .nr-mega__panel a b { font-weight: 600; color: var(--ink); } .nr-mega__panel a small { font: 400 .68rem/1.3 var(--font-mono); color: var(--muted); } /* „Všetky služby" (Milo 29. 9.): ostáva dole, ale zvýraznené — gradientový obrys a ikona ako v mobilnom menu */ .nr-nav .nr-mega__panel a.is-all { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 6px; border: 1.5px solid transparent; border-radius: 14px; background: radial-gradient(70% 140% at 100% 0%, var(--aura-1), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; } .nr-nav .nr-mega__panel a.is-all:hover { background: radial-gradient(70% 140% at 100% 0%, var(--aura-1), transparent 70%) padding-box, linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; } .nr-mega__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: var(--on-grad); } .nr-mega__ico .nr-icon { width: 19px; height: 19px; } .nr-mega__txt { display: grid; gap: 2px; } /* Cenník (Milo 29. 9.): komplet mimo HUB-ov navrchu cez celú šírku s gradientovým obrysom, pod ním cenníky HUB-ov; malý riadok = najnižšia cena z kariet stránky (inc/pricing.php) */ .nr-mega__panel--prices { width: min(540px, 80vw); } .nr-nav .nr-mega__panel--prices a.is-bundle { grid-column: 1 / -1; margin-bottom: 4px; border: 1.5px solid transparent; background: radial-gradient(70% 140% at 100% 0%, var(--aura-1), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; } .nr-nav .nr-mega__panel--prices a.is-bundle:hover { background: radial-gradient(70% 140% at 100% 0%, var(--aura-1), transparent 70%) padding-box, linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; } .nr-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } /* prepínač témy: dráha so slnkom a mesiacom, jazdec pod aktívnou ikonou (--mode z tokenov) */ .nr-mode { appearance: none; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; } .nr-mode:focus-visible { outline-offset: 3px; border-radius: 999px; } .nr-mode__track { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 70px; height: 38px; padding: 4px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 2px 5px rgb(0 0 0 / .06); transition: box-shadow .25s; } .nr-mode:hover .nr-mode__track { box-shadow: inset 0 0 0 1px var(--brand), inset 0 2px 5px rgb(0 0 0 / .06); } .nr-mode__thumb { position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--mode-thumb); box-shadow: var(--mode-glow); transform: translateX(calc(var(--mode) * 32px)); transition: transform .42s cubic-bezier(.3, 1.35, .5, 1), background-color .3s, box-shadow .3s; } .nr-mode__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; transition: color .3s, transform .5s cubic-bezier(.3, 1.35, .5, 1); } .nr-mode__icon .nr-icon { width: 17px; height: 17px; } .nr-mode__icon--sun { color: var(--mode-sun); transform: rotate(calc(var(--mode) * -90deg)) scale(calc(1 - var(--mode) * .12)); } .nr-mode__icon--moon { color: var(--mode-moon); transform: rotate(calc((1 - var(--mode)) * 35deg)) scale(calc(.88 + var(--mode) * .12)); } .nr-tools > .nr-mode { display: none; } /* menu: okrúhle tlačidlo s dvoma čiarami (kratšia sa pri hover dotiahne), po otvorení krížik; gradientový prstenec pri hover a pri otvorenom menu */ .nr-burger { appearance: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .nr-burger:focus-visible { border-radius: 50%; } .nr-burger::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--ang), var(--r1), var(--r2), var(--r3), var(--r1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .3s; } .nr-burger[aria-expanded="true"]::before { opacity: 1; animation: nr-ang 3.2s linear infinite; } .nr-burger__lines { position: relative; width: 20px; height: 14px; } .nr-burger__lines i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: top .35s cubic-bezier(.3, 1.35, .5, 1), transform .35s cubic-bezier(.3, 1.35, .5, 1), width .25s ease; } .nr-burger__lines i:first-child { top: 2px; width: 20px; } .nr-burger__lines i:last-child { top: 10px; width: 12px; } .nr-burger[aria-expanded="true"] .nr-burger__lines i { top: 6px; width: 20px; } .nr-burger[aria-expanded="true"] .nr-burger__lines i:first-child { transform: rotate(45deg); } .nr-burger[aria-expanded="true"] .nr-burger__lines i:last-child { transform: rotate(-45deg); } @media (hover: hover) { .nr-burger:hover::before { opacity: 1; animation: nr-ang 3.2s linear infinite; } .nr-burger:hover .nr-burger__lines i:last-child { width: 20px; } } @media (min-width: 62em) { .nr-header .nr-wordmark:not(.nr-wordmark--2row) { display: block; } .nr-header .nr-wordmark--2row { display: none; } .nr-nav { display: block; } .nr-tools { gap: 10px; margin-inline-start: 8px; } .nr-tools > .nr-mode { display: inline-flex; } .nr-burger, .nr-sheet { display: none !important; } } /* Mobil a tablet (Milo 29. 9.): hlavička je plávajúca kapsula zo skla s gradientovým okrajom, v nej dvojriadkové logo, Konzultácia a menu. Výška ostáva 68 px (8 + 60) ako predtým, obsah pod hlavičkou sa neposúva. Menu je karta pod kapsulou, stránka za ňou stmavne a neroluje; klik na stmavenú plochu menu zavrie (main.js). */ @media not all and (min-width: 62em) { .nr-header { --hpad: clamp(6px, 2.6vw, 12px); padding: 8px var(--hpad) 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } .nr-header__in { position: relative; gap: 10px; min-height: 60px; padding: 0 8px 0 clamp(12px, 4vw, 18px); border-radius: 20px; background: var(--capsule-bg); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: var(--capsule-shadow); } .nr-header__in::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--capsule-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .nr-tools > .nr-btn { min-height: 40px; padding: 8px 16px; font-size: .9rem; } .nr-header::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .nr-header.is-open::after { opacity: 1; visibility: visible; transition: opacity .3s; } .nr-menu-open { overflow: hidden; } .nr-header .nr-progress { left: calc(var(--hpad) + 18px); right: calc(var(--hpad) + 18px); bottom: 0; border-radius: 2px; } } .nr-sheet { position: absolute; top: calc(100% + 8px); left: var(--hpad, 12px); right: var(--hpad, 12px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 24px; background: var(--sheet-bg); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--shadow-2); transform-origin: 100% 0; animation: nr-sheet-in .34s cubic-bezier(.2, .9, .25, 1); } .nr-sheet[hidden] { display: none; } @media (min-width: 36em) { .nr-sheet { left: auto; width: 400px; } } @keyframes nr-sheet-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } } .nr-sheet ul { list-style: none; margin: 0; padding: 0; } .nr-sheet__t { display: flex; justify-content: space-between; margin: 0 4px 10px; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-sheet__t span { color: var(--brand); } /* služby ako dlaždice s ikonou HUB-u; pri otvorení nabehnú postupne */ .nr-sheet__hubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .nr-sheet__hubs li { animation: nr-tile-in .4s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); } @keyframes nr-tile-in { from { opacity: 0; transform: translateY(6px); } } .nr-sheet__hubs a { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 58px; padding: 8px 10px 8px 8px; border-radius: 16px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .88rem; line-height: 1.22; transition: box-shadow .2s; } .nr-sheet__hubs a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--brand); } .nr-sheet__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); } .nr-sheet__ico .nr-icon { width: 19px; height: 19px; } .nr-sheet__hubs .is-all .nr-sheet__ico { background: var(--grad); color: var(--on-grad); box-shadow: none; } .nr-sheet__hubs a.is-all { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; } /* cenníky: riadky s najnižšou cenou, komplet s gradientovým obrysom */ .nr-sheet__t--prices { margin-top: 16px; } .nr-sheet__prices { display: grid; gap: 4px; } .nr-sheet__prices a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1.5px solid transparent; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.25; transition: box-shadow .2s; } .nr-sheet__prices small { flex: none; font: 500 .7rem/1.2 var(--font-mono); color: var(--muted); white-space: nowrap; } .nr-sheet__prices a.is-bundle { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; } .nr-sheet__prices a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--brand); } .nr-sheet__links { margin-top: 10px !important; } .nr-sheet__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; } .nr-sheet__links a .nr-icon { width: 16px; height: 16px; color: var(--muted); transition: transform .2s, color .2s; } .nr-sheet__links a[aria-current="page"], .nr-sheet__links a[aria-current="page"] .nr-icon { color: var(--link); } @media (hover: hover) { .nr-sheet__hubs a:hover, .nr-sheet__prices a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); } .nr-sheet__links a:hover .nr-icon { color: var(--link); transform: translateX(3px); } } .nr-sheet__row { display: flex; justify-content: space-between; align-items: center; margin: 14px 4px 0; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* priebeh čítania článku — čisté CSS, bez JS */ .nr-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } @supports (animation-timeline: view()) { body:has(.nr-article-scope) { timeline-scope: --article; } .nr-article-scope { view-timeline: --article block; } .nr-progress { animation: nr-grow linear both; animation-timeline: --article; animation-range: contain 0% contain 100%; } } @keyframes nr-grow { to { transform: scaleX(1); } } /* ---------- Tlačidlá (aj core/button z obsahu) ---------- */ .nr-btn, .wp-block-button__link { --ang: 0deg; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 22px; border-radius: 999px; font: 600 .98rem/1.2 var(--font-body); text-decoration: none; color: var(--btn-ink); border: 1.5px solid transparent; background: linear-gradient(var(--btn-fill), var(--btn-fill)) padding-box, var(--btn-edge, conic-gradient(from var(--ang), var(--r1), var(--r2), var(--r3), var(--r1))) border-box; box-shadow: var(--btn-shadow); transition: box-shadow .35s ease, transform .2s ease; cursor: pointer; } .nr-btn:hover, .wp-block-button__link:hover { box-shadow: var(--btn-glow); transform: translateY(-1px); animation: nr-ang 2.8s linear infinite; color: var(--btn-ink); } .nr-btn .nr-icon { width: 16px; height: 16px; } .nr-btn--ghost, .is-style-outline > .wp-block-button__link { color: var(--ghost-ink); background: linear-gradient(var(--ghost-fill), var(--ghost-fill)) padding-box, conic-gradient(from var(--ang), var(--r1), var(--r2), var(--r3), var(--r1)) border-box; box-shadow: none; } .nr-btn--ghost:hover, .is-style-outline > .wp-block-button__link:hover { box-shadow: 0 0 0 4px var(--mark); color: var(--ghost-ink); } @keyframes nr-ang { to { --ang: 360deg; } } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .nr-prose .wp-block-button__link { color: var(--btn-ink); text-decoration: none; } .nr-prose .is-style-outline > .wp-block-button__link { color: var(--ghost-ink); } /* ---------- Hero ---------- */ .nr-hero { position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); } .nr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 38%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 72% 38%, #000 25%, transparent 78%); } .nr-hero::after { content: ""; position: absolute; z-index: -2; inset: -20% -10% auto 35%; height: 120%; background: radial-gradient(closest-side, var(--aura-1), transparent), radial-gradient(closest-side at 80% 70%, var(--aura-2), transparent); pointer-events: none; } .nr-hero--dots::before { background-image: radial-gradient(var(--dot) 1.1px, transparent 1.6px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(170deg, #000 5%, transparent 65%); mask-image: linear-gradient(170deg, #000 5%, transparent 65%); } /* Veľké obrazovky (≥ 64em): namiesto mriežky pohľad z paluby lode — hviezdy vyletujúce z jedného bodu s paralaxou (assets/js/space.js). Canvas je matný, dozadu a mierne stlmený pod textom vľavo. */ .nr-space { display: none; } @media (min-width: 64em) { .nr-hero::before { display: none; } .nr-space { display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; -webkit-mask-image: radial-gradient(ellipse 85% 100% at var(--sx, 70%) var(--sy, 42%), #000 20%, rgb(0 0 0 / .5) 65%, transparent 100%); mask-image: radial-gradient(ellipse 85% 100% at var(--sx, 70%) var(--sy, 42%), #000 20%, rgb(0 0 0 / .5) 65%, transparent 100%); } .nr-space.is-on { opacity: 1; } } @media print { .nr-space { display: none !important; } } .nr-hero__in { display: grid; gap: 36px; padding-block: clamp(36px, 6vw, 88px); align-items: center; } .nr-hero--low .nr-hero__in { padding-block: clamp(32px, 4.5vw, 64px); } @media (min-width: 62em) { .nr-hero__in:not(.nr-hero__in--single) { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; } } .nr-hero__copy { display: grid; gap: 18px; align-content: start; min-width: 0; } .nr-hero__in--single .nr-hero__copy { max-width: 880px; } .nr-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .nr-signal { width: 18px; height: 12px; flex: none; fill: currentColor; } .nr-h1 { margin: 0; font-family: var(--font-display); font-stretch: 116%; font-weight: 770; font-size: clamp(2.25rem, 1.3rem + 3.3vw, 4.4rem); line-height: 1.02; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; hyphens: manual; } .nr-h1--long { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.15rem); font-stretch: 110%; } /* pointa claimu v H1 titulky (nrd_h1_claim): gradient ako pri claime na Našej filozofii; bez podpory background-clip zostane farba značky */ .nr-h1__hl { color: var(--brand); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .nr-h1__hl { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; } } .nr-h1--article { font-size: clamp(2rem, 1.25rem + 2.2vw, 3.35rem); font-stretch: 108%; max-width: 16em; } .nr-hero .nr-lead { margin: 0; font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem); line-height: 1.58; color: var(--text); max-width: 40em; } .nr-hero .nr-lead a { color: var(--link); } /* Cenníky: zvýraznený podnadpis „Ceny sú orientačné…" na začiatku perexu (Milo, 5. 10. 2026) */ .nr-lead__note { display: block; width: fit-content; max-width: 100%; margin-bottom: 14px; padding: 6px 14px; border-radius: 10px; background: var(--mark); color: var(--brand); font: 600 .84rem/1.4 var(--font-mono); letter-spacing: .03em; } .nr-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } /* omrvinky z Rank Math */ .nr-crumbs, .nr-crumbs p { margin: 0; } .nr-crumbs p { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 400 .72rem/1.5 var(--font-mono); color: var(--muted); } .nr-crumbs a { color: var(--muted); text-decoration: none; } .nr-crumbs a:hover { color: var(--link); } .nr-crumbs .separator { font-size: 0; } .nr-crumbs .separator::before { content: "/"; font-size: .72rem; color: var(--line-2); } .nr-crumbs .last { color: var(--ink); } /* telemetria */ .nr-telemetry { display: flex; flex-wrap: wrap; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); width: fit-content; max-width: 100%; overflow: clip; } .nr-telemetry > div { padding: 10px 18px 11px; display: grid; gap: 3px; border-left: 1px solid var(--line); } /* HUB a silo: vedľa telemetrie odkaz na cenník HUB-u v tvare bunky telemetrie (inc/pricing.php) */ .nr-hero__stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 4px; } .nr-hero__stats > .nr-telemetry { margin: 0; } .nr-pricechip { display: grid; gap: 3px; align-content: center; padding: 10px 18px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; } .nr-pricechip__t { display: inline-flex; align-items: center; gap: 6px; font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .nr-pricechip__t .nr-icon { width: 12px; height: 12px; transition: transform .2s; } .nr-pricechip b { font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: var(--ink); white-space: nowrap; } .nr-pricechip:hover { border-color: var(--brand); box-shadow: 0 0 0 4px var(--mark); color: var(--ink); } .nr-pricechip:hover .nr-icon { transform: translateX(3px); } .nr-telemetry > div:first-child { border-left: 0; } .nr-telemetry dt { font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-telemetry dd { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.32rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } /* počítadlo: text v HTML ostáva správny, animuje sa len zobrazenie (::after) */ @property --n { syntax: ""; inherits: false; initial-value: 0; } .nr-telemetry dd.is-counting { position: relative; color: transparent; } .nr-telemetry dd.is-counting::after { content: counter(nrn, decimal-leading-zero); counter-reset: nrn var(--n); position: absolute; inset: 0; color: var(--ink); animation: nr-count 1.4s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes nr-count { from { --n: 0; } to { --n: var(--to); } } .nr-telemetry dd small { font-family: var(--font-body); font-stretch: 100%; font-weight: 500; font-size: .82rem; color: var(--text); } /* titulka: telemetria a hodnotenie z Google vedľa seba, rovnako vysoké (keď sa nezmestia, pod sebou) */ .nr-hero__proof { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 4px; } .nr-hero__proof .nr-telemetry { margin: 0; } .nr-rstat { display: grid; gap: 4px; align-content: center; padding: 10px 18px 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color .2s; } a.nr-rstat:hover { border-color: var(--brand); color: var(--ink); } .nr-rstat__t { display: flex; align-items: center; gap: 7px; font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-rstat__t .nr-gr__g { width: 16px; height: 16px; font-size: .56rem; } .nr-rstat__v { display: flex; align-items: center; gap: 10px; } .nr-rstat__v b { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.32rem; line-height: 1.1; color: var(--ink); } .nr-rstat .nr-meter .nr-icon { width: 15px; height: 15px; } /* ---------- Pás s logami klientov pod hero titulky (Milo 29. 9.) ---------- Logá = jednofarebné masky z assets/img/k/ (bez mien — nemajú byť dohľadateľné), farba z témy, pri hover gradient. Rozmer --w × --h z inc/data/klienti.php (rovnaká plocha), --ks zmenší na mobile. Rad stojí — najcennejší klienti na začiatku ostanú vidieť (Milo 29. 9.); šípky ho posúvajú po stranách (main.js, data-carousel="page"), prstom či touchpadom sa dá potiahnuť. Okraj sa zjemní len tam, kde ďalšie logá sú: vpravo, kým nie je koniec (.is-end), vľavo až po posunutí (.is-scrolled). */ .nr-clients { --ks: .78; --kgap: 36px; --fade: 40px; padding-block: 4px 26px; } @media (min-width: 48em) { .nr-clients { --ks: .9; --kgap: 44px; } } @media (min-width: 62em) { .nr-clients { --ks: 1; --kgap: 52px; --fade: 56px; padding-block: 6px 34px; } } /* HUB, silo, cenník: samostatný pruh nad sekciou dôvery — čiara nad ním, pod ním čiara sekcie */ .nr-clients--band { padding-block: 20px 22px; border-top: 1px solid var(--line); background: var(--bg); } @media (min-width: 62em) { .nr-clients--band { padding-block: 26px 28px; } } /* v hero je pás posledný riadok nad deliacou čiarou — hero pod obsahom nechá menej miesta */ .nr-hero--home:has(.nr-clients) .nr-hero__in { padding-bottom: clamp(28px, 4vw, 56px); } /* mobil: nadpis a šípky v jednom riadku, logá pod nimi od okraja po okraj; desktop: všetko v jednom riadku */ .nr-clients__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t ctrl" "list list"; gap: 8px 16px; align-items: center; } @media (min-width: 62em) { .nr-clients__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t list ctrl"; gap: 32px; } } .nr-clients__t { grid-area: t; margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 500 .66rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .nr-clients__t .nr-signal { fill: var(--brand); } .nr-clients__ctrl { grid-area: ctrl; display: flex; gap: 8px; } .nr-clients__list { grid-area: list; position: relative; display: flex; align-items: center; gap: var(--kgap); margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl, 0px), #000 calc(100% - var(--fr, var(--fade))), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fl, 0px), #000 calc(100% - var(--fr, var(--fade))), transparent); } .nr-clients__list::-webkit-scrollbar { display: none; } @media (min-width: 62em) { .nr-clients__list { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } } .nr-clients.is-scrolled .nr-clients__list { --fl: var(--fade); } .nr-clients.is-end .nr-clients__list { --fr: 0px; } .nr-clients__list li { flex: none; scroll-snap-align: start; width: calc(var(--w) * var(--ks) * 1px); height: calc(var(--h) * var(--ks) * 1px); background: var(--muted); -webkit-mask: var(--k) center / contain no-repeat; mask: var(--k) center / contain no-repeat; } @media (hover: hover) { .nr-clients__list li:hover { background: var(--grad); } } /* orbita = skutočná štruktúra webu */ .nr-orbit { position: relative; min-width: 0; } .o-svg { width: 100%; height: auto; display: block; overflow: visible; } .o-ring { fill: none; stroke: var(--orbit-faint); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; } .o-ring--main { stroke-dasharray: none; stroke-width: 3; } /* hlavný prstenec hrubší, 1.25 → 3, a v plnom gradiente --r1 → --r3 ako trajektória sila — farbu dáva atribút style v inc/svg.php (Milo 6. 10. 2026) */ .o-ticks { stroke: var(--orbit-faint); stroke-width: 1; fill: none; } .o-spoke { stroke: var(--orbit-faint); stroke-width: 1; stroke-dasharray: 3 5; } .o-halo { fill: var(--halo); } .o-pins { stroke: var(--orbit); stroke-width: 2; fill: none; stroke-linecap: square; } .o-sats { transform-box: fill-box; transform-origin: center; animation: o-spin var(--spd, 80s) linear infinite; } .o-sat-ring { fill: none; stroke: var(--line-2); stroke-width: 1; } .o-sat { fill: var(--sat); } .o-post-ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; } .o-post-core { fill: var(--sat); } .o-node-core { fill: var(--surface); stroke: var(--brand); stroke-width: 2; transition: fill .2s, stroke-width .2s; } .o-node a:hover .o-node-core, .o-node a:focus-visible .o-node-core { fill: var(--brand); stroke-width: 4; } .o-node a:focus-visible { outline: none; } .o-label { font-family: var(--font-body); font-size: 16px; font-weight: 600; fill: var(--ink); } .o-node a:hover .o-label { fill: var(--link); } .o-count { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); letter-spacing: .04em; } .o-core-txt { font-family: var(--font-mono); font-size: 14px; font-weight: 600; fill: #FFFFFF; letter-spacing: .08em; } .o-packet { fill: var(--brand-2); } /* impulzy zo stredu (Milo 6. 10. 2026): kružnica sa z čipu rozpína a stráca sa v dvoch tretinách cesty k hlavnému prstencu (r 60 → 150, prstenec je na 225 × 200), tri za sebou s odstupom 1,5 s (--pdel z inc/svg.php). Len transform a opacity, bez filtrov. Pred prvým impulzom je neviditeľná (opacity 0, bez fill-mode); v orbite mimo obrazovky stojí (.is-paused), pri znížení pohybu sa nekreslí. */ .o-pulse { fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: o-pulse 4.5s cubic-bezier(.2, .6, .35, 1) var(--pdel, 0s) infinite; } .nr-orbit.is-paused .o-sats, .nr-orbit.is-paused .o-pulse { animation-play-state: paused; } @keyframes o-spin { to { transform: rotate(360deg); } } @keyframes o-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.5); opacity: 0; } } .nr-orbit__list { display: none; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; } @media (max-width: 38em) { .o-label, .o-count { display: none; } .nr-orbit__list { display: flex; } } /* trajektória sila */ .nr-traj { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); padding: 18px 18px 12px; display: grid; gap: 8px; min-width: 0; } .nr-traj__label { font: 500 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; } .t-svg { width: 100%; height: auto; display: block; overflow: visible; } .t-track { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; } .t-path { fill: none; stroke-width: 2.5; stroke-linecap: round; } .t-node { fill: var(--surface); stroke: var(--brand); stroke-width: 2; } .t-now { stroke: var(--surface); stroke-width: 3; } .t-pulse { fill: none; stroke: var(--brand); stroke-width: 1; opacity: .5; } .t-dot { fill: var(--sat); } .t-tick { stroke: var(--line); stroke-width: 1; } .t-txt { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: var(--ink); } .t-sub { font-family: var(--font-mono); font-size: 9.5px; fill: var(--muted); letter-spacing: .06em; } .t-link:hover .t-txt { fill: var(--link); } /* ---------- Obsah (the_content) ---------- */ .nr-prose { font-size: 1.0625rem; line-height: 1.74; color: var(--text); counter-reset: nr-tab; } .nr-prose > * { margin-block: 0; } .nr-prose > * + * { margin-block-start: 1.15em; } .nr-prose > :first-child { margin-block-start: 0; } .nr-prose p:empty { display: none; } .nr-nobr { white-space: nowrap; } /* „e-shop" v nadpise sa nezalomí za spojovníkom (inc/content.php) */ .nr-prose:not(.nr-prose--page) p, .nr-prose:not(.nr-prose--page) li { max-width: 48em; } /* jednostĺpcové stránky: text 760 px, tabuľky a citácie širšie (mechanizmus WP, nie full-bleed grid) */ .nr-prose--page > * { max-width: var(--nr-width-content); margin-inline: auto; } .nr-prose--wide > .wp-block-table, .nr-prose--wide > .wp-block-quote, .nr-prose--page > .alignwide { max-width: var(--nr-width-wide); } .nr-prose h2 { font-family: var(--font-display); font-stretch: 108%; font-weight: 720; font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); line-height: 1.14; letter-spacing: -.016em; color: var(--ink); text-wrap: balance; margin-block-start: 2.1em; scroll-margin-top: 96px; } .nr-prose h2::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--grad); margin-bottom: .62em; } .nr-prose h3 { font-family: var(--font-display); font-stretch: 104%; font-weight: 660; font-size: 1.24rem; line-height: 1.25; color: var(--ink); margin-block-start: 1.7em; scroll-margin-top: 96px; } .nr-prose h4 { font-size: 1.05rem; color: var(--ink); margin-block-start: 1.5em; } .nr-prose h2 + *, .nr-prose h3 + * { margin-block-start: .7em; } /* tlačidlo z obsahu (core/button) je tiež — štýl odkazu v texte by mu pri hover prefarbil písmo na farbu pozadia */ .nr-prose a:where(:not(.wp-block-button__link)) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--link-underline); } .nr-prose a:where(:not(.wp-block-button__link)):hover { color: var(--link-hover); text-decoration-color: currentColor; } .nr-prose strong { color: var(--ink); font-weight: 650; } .nr-prose p > strong { background: linear-gradient(transparent 60%, var(--mark) 0); padding-inline: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .nr-prose code { font-family: var(--font-mono); font-size: .82em; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } .nr-prose .nr-lead, .nr-body.nr-prose > p:first-child, .nr-body > .nr-prose > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--ink); } .nr-prose ul:not([class*="is-style"]):not(.nr-tech):not(.nr-profiles) { padding-left: 1.2em; } .nr-prose ul:not([class*="is-style"]) li::marker { color: var(--brand); } .nr-prose li + li { margin-top: .45em; } /* číslovaný zoznam = postup, kroky spojené čiarou */ .nr-prose ol.wp-block-list { list-style: none; padding: 0; counter-reset: nr-step; display: grid; gap: 16px; } .nr-prose ol.wp-block-list > li { counter-increment: nr-step; position: relative; padding-left: 54px; min-height: 36px; margin: 0; } .nr-prose ol.wp-block-list > li::before { content: counter(nr-step, decimal-leading-zero); position: absolute; left: 0; top: -3px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 .7rem/1 var(--font-mono); color: var(--brand); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); } .nr-prose ol.wp-block-list > li:not(:last-child)::after { content: ""; position: absolute; left: 17.5px; top: 36px; bottom: -16px; width: 1px; background: repeating-linear-gradient(var(--line-2) 0 3px, transparent 3px 7px); } /* is-style-nr-checklist */ .nr-prose .is-style-nr-checklist { list-style: none; padding: 20px 22px; display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-1); } .nr-prose .is-style-nr-checklist li { position: relative; padding-left: 38px; margin: 0; } .nr-prose .is-style-nr-checklist li::before { content: ""; position: absolute; left: 0; top: .18em; width: 24px; height: 24px; border-radius: 8px; background: var(--check-bg); box-shadow: inset 0 0 0 1px var(--orbit-faint); } .nr-prose .is-style-nr-checklist li::after { content: ""; position: absolute; left: 7.5px; top: calc(.18em + 7px); width: 10px; height: 5.5px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); } /* core/table */ .nr-prose .wp-block-table { counter-increment: nr-tab; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); margin-inline: auto; -webkit-overflow-scrolling: touch; } .nr-prose .wp-block-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; } .nr-prose .wp-block-table th { font: 600 .66rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: left; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .nr-prose .wp-block-table td { padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; } .nr-prose .wp-block-table tbody tr:first-child td { border-top: 0; } .nr-prose .wp-block-table td:first-child { font-weight: 600; color: var(--ink); } .nr-prose .wp-block-table tbody tr:hover { background: var(--row-hover); } .nr-prose .wp-block-table figcaption { padding: 12px 18px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); margin: 0; } .nr-prose .wp-block-table figcaption::before { content: "TAB. " counter(nr-tab) " "; font: 600 .66rem/1 var(--font-mono); letter-spacing: .06em; color: var(--brand); } /* Interný manuál (súkromná stránka): to, čo klientovi sľubujeme a v akej lehote to musíme dodržať, je ČERVENÉ (skupina .nr-must; 5. 10. 2026, Milo). Text, rám aj tabuľky v nej majú farbu --must (svetlá aj tmavá téma ju majú samostatne, kontrast nad 5 : 1). Na verejných stránkach sa trieda nepoužíva. */ .nr-prose .nr-must { margin-block: 1.6em; padding: 18px 22px; border: 2px solid var(--must); border-left-width: 10px; border-radius: 16px; background: color-mix(in srgb, var(--must) 6%, var(--surface)); } .nr-prose .nr-must > :first-child { margin-top: 0; } .nr-prose .nr-must > :last-child { margin-bottom: 0; } .nr-prose .nr-must :is(h3, h4, p, li, strong, em, code, th, td, a) { color: var(--must); } .nr-prose .nr-must .nr-must__t { font: 700 .74rem/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; } .nr-prose .nr-must .wp-block-table { border-color: var(--must); background: transparent; box-shadow: none; } .nr-prose .nr-must .wp-block-table th { background: color-mix(in srgb, var(--must) 12%, transparent); border-bottom: 1px solid var(--must); } .nr-prose .nr-must .wp-block-table td { border-top-color: color-mix(in srgb, var(--must) 32%, transparent); } .nr-prose .nr-must .wp-block-table td:first-child { color: var(--must); } /* téma farbí prvý stĺpec tabuľky na --ink so silnejším selektorom */ .nr-prose .nr-must .wp-block-table tbody tr:hover { background: color-mix(in srgb, var(--must) 9%, transparent); } /* core/quote = postreh z praxe */ .nr-prose .wp-block-quote { position: relative; margin-inline: auto; padding: 26px 30px 28px; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(var(--dot) .9px, transparent 1.4px) 0 0 / 16px 16px, var(--surface); box-shadow: var(--shadow-1); overflow: clip; } .nr-prose .wp-block-quote::before { content: "// postreh z praxe"; display: block; font: 500 .66rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .nr-prose .wp-block-quote p { margin: 0; max-width: 33em; font-family: var(--font-display); font-stretch: 102%; font-weight: 600; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.42; color: var(--ink); text-wrap: pretty; } .nr-prose .wp-block-quote p + p { margin-top: .6em; } .nr-prose .wp-block-quote cite { display: block; margin-top: 12px; font: 400 .8rem/1.4 var(--font-mono); color: var(--muted); font-style: normal; } /* core/quote + is-style-nr-motto = claim značky (Naša filozofia): širší rámček s gradientovým obrysom, pointa (strong) v gradiente a pod textom signál, ktorý sa zo šumu vyčistí — tvar dáva maska (SVG), farbu gradient z tokenov, takže sedí v oboch témach */ .nr-prose--page > .is-style-nr-motto { max-width: var(--nr-width-wide); } .nr-prose > .is-style-nr-motto { margin-block: 2.2em; } .nr-prose .is-style-nr-motto { padding: clamp(24px, 4vw, 48px) clamp(22px, 4.4vw, 56px) clamp(80px, 8.5vw, 100px); border: 1.5px solid transparent; border-radius: 28px; background: radial-gradient(70% 90% at 0% 0%, var(--aura-1), transparent 70%) padding-box, radial-gradient(60% 80% at 100% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-prose .is-style-nr-motto::before { content: "// signál > šum"; content: "// signál > šum" / ""; margin-bottom: 18px; } .nr-prose .is-style-nr-motto p { max-width: 25em; font-stretch: 108%; font-weight: 700; font-size: clamp(1.35rem, 1.02rem + 1.3vw, 2.1rem); line-height: 1.24; letter-spacing: -.014em; text-wrap: balance; } .is-style-nr-motto p > strong { font-weight: inherit; padding: 0; color: var(--brand); background: none; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .is-style-nr-motto p > strong { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; } } .nr-prose .is-style-nr-motto::after { content: ""; position: absolute; left: clamp(22px, 4.4vw, 56px); right: clamp(22px, 4.4vw, 56px); bottom: clamp(22px, 3vw, 34px); height: clamp(30px, 4vw, 42px); background: var(--grad); -webkit-mask: var(--signal) center / 100% 100% no-repeat; mask: var(--signal) center / 100% 100% no-repeat; pointer-events: none; } /* Hero s claimom značky (Naša filozofia, nrd_hero_motto): claim je hlavný nápis, H1 nad ním len ako štítok; pod claimom signál zo šumu, ktorý sa pri načítaní raz vykreslí zľava doprava. Text sa nehýbe ani neskrýva (je to LCP). */ .nr-eyebrow--h1 { margin: 0; font-size: .8rem; } .nr-hero--motto .nr-hero__copy { max-width: var(--nr-width-wide); gap: 14px; } .nr-hero--motto .is-style-nr-motto { margin: 4px 0 0; padding: 0; border: 0; } .nr-hero--motto .is-style-nr-motto p { margin: 0; max-width: 21em; font-family: var(--font-display); font-stretch: 112%; font-weight: 740; font-size: clamp(1.7rem, 1rem + 2.35vw, 3rem); line-height: 1.1; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; } /* Autor citátu ( v bloku core/quote): pod claimom čiara v gradiente a meno v ink; nad claimom ozdobná úvodzovka (maska SVG + gradient, nezávislá od písma), ktorá z hero spraví čitateľný citát (čisto vzhľad, bez textu) */ .is-style-nr-motto cite { display: flex; align-items: center; gap: 12px; font: 500 .82rem/1.4 var(--font-mono); font-style: normal; letter-spacing: .04em; color: var(--ink); } .is-style-nr-motto cite::before { content: ""; flex: none; width: 34px; height: 2px; border-radius: 2px; background: var(--grad); } .nr-hero--motto .is-style-nr-motto cite { margin-top: clamp(18px, 2.2vw, 28px); } .nr-hero--motto .is-style-nr-motto::before { content: ""; display: block; width: clamp(40px, 2.6rem + 1.6vw, 62px); aspect-ratio: 4 / 3; margin: 0 0 clamp(12px, 1.6vw, 20px); background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6 16 12'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' d='M18 7h-3l-2 4v6h6v-6h-3zM10 7H7l-2 4v6h6v-6H8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6 16 12'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' d='M18 7h-3l-2 4v6h6v-6h-3zM10 7H7l-2 4v6h6v-6H8z'/%3E%3C/svg%3E") center / contain no-repeat; } .nr-wave { position: relative; margin-top: clamp(14px, 2.2vw, 26px); padding-top: clamp(40px, 4.6vw, 54px); display: flex; justify-content: space-between; font: 500 .62rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .nr-wave span:last-child { color: var(--brand); } .nr-wave::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(30px, 3.6vw, 42px); background: var(--grad); -webkit-mask: var(--signal) center / 100% 100% no-repeat; mask: var(--signal) center / 100% 100% no-repeat; } @media (prefers-reduced-motion: no-preference) { .nr-wave::before { animation: nr-wave-in 1.8s cubic-bezier(.3, .6, .2, 1) .2s both; } } @keyframes nr-wave-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* core/group + is-style-nr-case = prípadová štúdia v texte stránky služby (Milo 29. 9. 2026): karta s gradientovým obrysom a mriežkou v rohu, logo klienta na svetlej doske (farebné logá ostanú čitateľné aj v tmavej téme), štítok, „čo sme dodali" ako čipy a tlačidlo na článok. Obsah sú len core bloky (obrázok, H2, odsek, zoznam, tlačidlo) — bez témy je to obyčajný text. */ .nr-prose > .is-style-nr-case { margin-block-start: 2.8em; } .nr-prose--page > .is-style-nr-case { max-width: var(--nr-width-wide); } .nr-prose .is-style-nr-case { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-items: start; padding: clamp(22px, 3.6vw, 44px); border: 1.5px solid transparent; border-radius: 28px; background: radial-gradient(55% 75% at 100% 0%, var(--aura-1), transparent 70%) padding-box, radial-gradient(50% 70% at 0% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-prose .is-style-nr-case::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 55% 80% at 100% 0%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 55% 80% at 100% 0%, #000 15%, transparent 72%); } .nr-prose .is-style-nr-case::before { content: "// realizácia"; content: "// realizácia" / ""; font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .nr-prose .is-style-nr-case > * { margin: 0; min-width: 0; } .nr-prose .is-style-nr-case > h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.18; } .nr-prose .is-style-nr-case > h2::before { display: none; } .nr-prose .is-style-nr-case > p { max-width: 44em; } /* logo klienta: doska s pevným pomerom strán (CLS 0 aj bez rozmerov SVG) */ .nr-prose .is-style-nr-case > .wp-block-image:first-child { order: -1; justify-self: start; width: 172px; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 20px 22px; background: var(--tile); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-1); } .nr-prose .is-style-nr-case > .wp-block-image:first-child img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; } /* čo sme dodali: čipy namiesto boxu so zoznamom */ .nr-prose .is-style-nr-case > .is-style-nr-checklist { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-top: 4px; background: none; border: 0; border-radius: 0; box-shadow: none; } .nr-prose .is-style-nr-case > .is-style-nr-checklist li { display: inline-flex; align-items: center; gap: 8px; max-width: none; padding: 6px 13px 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .86rem; line-height: 1.35; font-weight: 500; color: var(--ink); } .nr-prose .is-style-nr-case > .is-style-nr-checklist li::before { position: static; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--check-bg); box-shadow: inset 0 0 0 1px var(--orbit-faint); } .nr-prose .is-style-nr-case > .is-style-nr-checklist li::after { left: 14.5px; top: 50%; width: 7px; height: 4px; margin-top: -3px; border-width: 0 0 1.6px 1.6px; } .nr-prose .is-style-nr-case > .wp-block-buttons { margin-top: 8px; } .nr-prose .is-style-nr-case .wp-block-button__link::after { content: "→"; content: "→" / ""; transition: transform .2s; } .nr-prose .is-style-nr-case .wp-block-button__link:hover::after { transform: translateX(3px); } @media (min-width: 48em) { .nr-prose .is-style-nr-case { grid-template-columns: 180px minmax(0, 1fr); column-gap: clamp(24px, 3.2vw, 44px); } .nr-prose .is-style-nr-case > *, .nr-prose .is-style-nr-case::before { grid-column: 2; } .nr-prose .is-style-nr-case > .wp-block-image:first-child { grid-column: 1; grid-row: 1 / span 5; width: 100%; } } /* core/group + is-style-nr-pricing = cenník (Milo 29. 9. 2026): balíky ako karty, stredná odporúčaná — gradientový obrys, vyššia, štítok. Viac sád (.nr-pricing-set) → taby z inc/pricing.php (data-tabs, rovnaký JS ako titulka a Kontakt); bez JS sú sady pod sebou. Obsah sú len core bloky — bez témy obyčajný text. */ .nr-prose--page > .is-style-nr-pricing { max-width: var(--nr-width-wide); } .nr-prose > .is-style-nr-pricing { margin-block-start: 1.8em; } .nr-prose .is-style-nr-pricing, .nr-prose .nr-pricing-set { display: grid; gap: 22px; min-width: 0; } .nr-prose .is-style-nr-pricing > *, .nr-prose .nr-pricing-set > * { margin: 0; min-width: 0; } .nr-prose .nr-pricing-set + .nr-pricing-set { margin-top: 2.2em; } .nr-prose .nr-pricing-set > .wp-block-heading { text-align: center; } .nr-prose .nr-pricing-set__intro { max-width: 40em; margin-inline: auto; text-align: center; font-size: .98rem; line-height: 1.6; color: var(--muted); text-wrap: balance; } .nr-prose .nr-pricing-set:focus-visible { outline-offset: 8px; border-radius: 24px; } /* taby: segmentový prepínač nad kartami */ .nr-pricing__tabs { display: none; } .js .nr-pricing__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; justify-self: center; width: min(100%, 660px); padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); } .nr-ptab { appearance: none; display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted); font: 600 .95rem/1.2 var(--font-body); text-align: center; text-wrap: balance; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .3s; } .nr-ptab:hover { color: var(--ink); } /* spôsob platby (cenník VPS servera): prepínač mesačná / ročná platba; bez JS sa nezobrazí (v karte ostáva text „ročne o 15 % menej") */ .nr-billing { display: none; } .js .nr-billing { display: flex; justify-self: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); } .nr-bill { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 6px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font: 600 .92rem/1.2 var(--font-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .3s; } .nr-bill:hover { color: var(--ink); } .nr-bill.is-active { color: var(--ink); background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-1); } .nr-bill__off { padding: 3px 7px; border-radius: 6px; background: var(--mark); color: var(--brand); font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .04em; white-space: nowrap; } /* zľava na prvé obdobie (mesačný paušál = prvý mesiac, hosting = prvý rok): cena sa neprečiarkuje, pod ňou je cena prvého obdobia */ .nr-prose .nr-plan__first { flex: 1 0 100%; padding: 6px 9px; border-radius: 7px; background: var(--mark); color: var(--brand); font: 600 .7rem/1.35 var(--font-mono); letter-spacing: .02em; text-transform: none; } .nr-prose .nr-plan__first[hidden] { display: none; } .nr-ptab[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-1); } .js [data-tabs] > .nr-pricing-set:not(.is-active) { display: none; } .js .nr-prose [data-tabs] > .nr-pricing-set > .wp-block-heading:first-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .js .nr-prose [data-tabs] > .nr-pricing-set { gap: 18px; margin-top: 0; } /* karty balíkov */ .nr-prose .nr-pricing-plans { display: grid; gap: 22px; align-items: stretch; } @media (min-width: 56em) { .nr-prose .nr-pricing-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: 16px; } /* jediná karta v sade (hosting e-shopu v cenníku VPS): v strede, nie vľavo v trojstĺpcovej mriežke */ .nr-prose .nr-pricing-plans:has(> .is-style-nr-plan:only-child) { grid-template-columns: minmax(0, 22rem); justify-content: center; } } .nr-prose .is-style-nr-plan { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 30px clamp(20px, 2.4vw, 28px) 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); } .nr-prose .is-style-nr-plan > * { margin: 0; min-width: 0; } .nr-prose .is-style-nr-plan > .wp-block-heading { font-family: var(--font-display); font-stretch: 108%; font-weight: 720; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); } .nr-prose .nr-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-prose .nr-plan__price > strong { padding: 0; background: none; font-family: var(--font-display); font-stretch: 112%; font-weight: 760; font-size: clamp(2.1rem, 1.7rem + 1vw, 2.6rem); line-height: 1; letter-spacing: -.025em; text-transform: none; color: var(--ink); white-space: nowrap; } /* Zľava (príležitosť alebo hra): prečiarknutá pôvodná cena, nová cena a štítok. Zľavy sa nesčítavajú. */ .nr-prose .nr-plan__price > s, .nr-plan__was { font: 500 1rem/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--brand-2); text-decoration-thickness: 2px; white-space: nowrap; } .nr-prose .nr-plan__off { padding: 4px 8px; border-radius: 7px; background: var(--mark); color: var(--brand); font: 600 .64rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; align-self: center; } .nr-pricechip b s { margin-right: 4px; font-weight: 500; font-size: .82em; opacity: .6; } .nr-prose .nr-plan__unit { font: 400 .72rem/1.45 var(--font-mono); letter-spacing: .02em; color: var(--muted); } .nr-prose .nr-plan__for { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .98rem; line-height: 1.55; color: var(--text); } .nr-prose .nr-plan__plus { font-size: .9rem; line-height: 1.4; font-weight: 650; color: var(--ink); } .nr-prose .is-style-nr-plan > .is-style-nr-checklist { gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: .96rem; line-height: 1.5; } .nr-prose .is-style-nr-plan > .is-style-nr-checklist li { padding-left: 30px; } .nr-prose .is-style-nr-plan > .is-style-nr-checklist li::before { top: .14em; width: 20px; height: 20px; border-radius: 7px; } .nr-prose .is-style-nr-plan > .is-style-nr-checklist li::after { left: 6px; top: calc(.14em + 6px); width: 8px; height: 4.5px; border-width: 0 0 1.8px 1.8px; } .nr-prose .is-style-nr-plan > .wp-block-buttons { margin-top: auto; padding-top: 14px; } .nr-prose .is-style-nr-plan .wp-block-button { flex: 1 1 auto; } .nr-prose .is-style-nr-plan .wp-block-button__link { width: 100%; } /* odporúčaný balík */ .nr-prose .nr-plan--top { border: 1.5px solid transparent; background: radial-gradient(70% 45% at 100% 0%, var(--aura-1), transparent 70%) padding-box, radial-gradient(60% 40% at 0% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } @media (max-width: 55.99em) { .nr-prose .nr-plan--top { margin-top: 8px; } } @media (min-width: 56em) { .nr-prose .nr-plan--top { margin-block: -16px; padding-block: 46px 40px; } } .nr-prose .nr-plan__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; background: var(--brand); color: var(--on-grad); font: 600 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--btn-shadow); } /* poznámka pod cenníkom: menšie písmo, prečo sú ceny orientačné */ .nr-prose > .is-style-nr-pricing + .nr-pricing-note { margin-block-start: 2.2em; } .nr-prose .nr-pricing-note { padding-left: 16px; border-left: 2px solid var(--line-2); font-size: .84rem; line-height: 1.65; color: var(--muted); } .nr-prose .nr-pricing-note::before { content: "// orientačné ceny"; content: "// orientačné ceny" / ""; display: block; margin-bottom: 6px; font: 500 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } /* core/separator */ .nr-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); margin-block: 3em; } /* core/details = FAQ */ .nr-prose .wp-block-details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s, box-shadow .2s; } .nr-prose .wp-block-details + .wp-block-details { margin-block-start: 10px; } .nr-prose .wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px 16px 22px; font-weight: 600; color: var(--ink); line-height: 1.4; border-radius: 16px; } .nr-prose .wp-block-details summary::-webkit-details-marker { display: none; } .nr-prose .wp-block-details summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--brand), var(--brand)) center / 11px 1.6px no-repeat, linear-gradient(var(--brand), var(--brand)) center / 1.6px 11px no-repeat, var(--surface); transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .nr-prose .wp-block-details[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); } .nr-prose .wp-block-details[open] summary::after { transform: rotate(135deg); } .nr-prose .wp-block-details > :not(summary) { margin: 0; padding: 0 22px 20px; } .nr-prose .wp-block-details::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete; } .nr-prose .wp-block-details[open]::details-content { height: auto; } /* .nr-back = návrat na HUB (aj odsek „← Späť na" bez triedy) */ .nr-prose .nr-back { display: flex; width: fit-content; align-items: center; gap: .35em; margin-block-start: 3em; padding: 10px 18px 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .95rem; color: var(--muted); transition: border-color .2s, transform .2s; } .nr-prose .nr-back a { color: var(--ink); font-weight: 600; text-decoration: none; } .nr-prose .nr-back:hover { border-color: var(--brand); transform: translateX(-3px); } /* obrázky, tlačidlá, zoznam stránok */ .nr-prose .wp-block-image img { border-radius: 16px; } .nr-prose .wp-block-image figcaption, .nr-prose .wp-element-caption { font-size: .86rem; color: var(--muted); margin-top: 8px; } .nr-prose .alignright { float: right; margin: .3em 0 1.2em 2em; max-width: min(45%, 380px); } .nr-prose .alignleft { float: left; margin: .3em 2em 1.2em 0; max-width: min(45%, 380px); } .nr-prose .alignright img, .nr-prose .alignleft img { width: 100%; height: auto !important; } .nr-prose::after { content: ""; display: table; clear: both; } /* Fotka vľavo na stránke (Naša filozofia, Jozef Bindas) nad 40 em: 2/3 šírky je v textovom stĺpci, 1/3 visí do okraja a horný okraj lícuje s vrchom prvého riadku odseku, pred ktorým fotka stojí. Float sa kladie na ľavý okraj kontajnera, stĺpec je vycentrovaný (--nr-width-content), preto posun = (100 % − šírka stĺpca) / 2 − 1/3 šírky fotky; v úzkom okne (posun by bol záporný) ostane fotka na okraji kontajnera, celá v texte. --nr-photo = šírka fotky v bloku (260 px). Horný odstup 1.6em = odstup odseku 1.15em + .46em (polovičné prerazenie riadku a výška písmen: vrch prvého riadku). */ @media (min-width: 40.0625em) { .nr-prose--page > .alignleft { --nr-photo: 260px; margin: 1.6em 2em 1.2em max(0px, calc((100% - var(--nr-width-content)) / 2 - var(--nr-photo) / 3)); } } @media (max-width: 40em) { .nr-prose .alignright, .nr-prose .alignleft { float: none; margin: .7em auto 1.2em; max-width: 100%; } } .nr-prose .wp-block-buttons { margin-block-start: 1.6em; } .nr-prose .wp-block-page-list { padding-left: 1.2em; } /* firemné údaje (shortcode na kontakte): karty s ikonou, telefón a e-mail väčšie */ .nr-company { margin: 1.4em 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .nr-company__row { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 15px 18px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); } .nr-company__row--share { grid-column: 1 / -1; } .nr-company dt { display: flex; align-items: center; gap: 8px; font: 500 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-company dt .nr-icon { width: 16px; height: 16px; color: var(--brand); } .nr-company dd { margin: 0; color: var(--ink); font-weight: 500; font-size: .98rem; line-height: 1.55; } .nr-company__row--phone dd, .nr-company__row--mail dd { font-family: var(--font-display); font-stretch: 104%; font-weight: 680; font-size: 1.14rem; line-height: 1.3; overflow-wrap: anywhere; } .nr-company dd a { color: var(--ink); text-decoration: none; } .nr-company dd a:hover { color: var(--link); } .nr-company dd .nr-company__map { display: inline-block; margin-top: 4px; font: 500 .72rem/1.5 var(--font-mono); letter-spacing: .03em; color: var(--link); } .nr-company__days { color: var(--muted); } /* ---------- Obsah stránky, stĺpec ---------- */ .nr-toc { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 6px 8px 10px; box-shadow: var(--shadow-1); } .nr-toc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 10px 10px; font: 600 .68rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .nr-toc summary::-webkit-details-marker { display: none; } .nr-toc summary small { font-weight: 400; color: var(--muted); letter-spacing: .04em; } .nr-toc ol { list-style: none; margin: 0 0 0 10px; padding: 0; border-left: 1px solid var(--line); display: grid; } .nr-toc ol ol { margin: 0 0 4px 14px; border-left: 0; } .nr-toc ol ol a { font-size: .84rem; padding-block: 4px; } .nr-toc a { display: block; padding: 7px 10px 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: .9rem; line-height: 1.35; } .nr-toc a:hover { color: var(--ink); } .nr-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--brand); font-weight: 600; } @media (min-width: 64em) { .nr-rail .nr-toc summary { pointer-events: none; } .nr-rail .nr-toc { max-height: calc(100vh - 140px); overflow: auto; } } .nr-toc--inline { max-width: var(--nr-width-content); margin-inline: auto; margin-bottom: 2.4em; } @media (min-width: 48em) { .nr-toc--inline nav > ol { display: block; columns: 2; column-gap: 32px; } .nr-toc--inline nav > ol > li { break-inside: avoid; } } .nr-box { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 16px 18px; display: grid; gap: 10px; } .nr-box__t { font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; display: flex; justify-content: space-between; gap: 12px; } .nr-box ul { list-style: none; margin: 0; padding: 0; display: grid; } .nr-box li + li { border-top: 1px solid var(--line); } .nr-box ul a { display: block; padding: 10px 0; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .94rem; line-height: 1.38; } .nr-box ul a:hover { color: var(--link); } .nr-box--cta { background: radial-gradient(120% 90% at 100% 0%, var(--aura-1), transparent 60%), var(--surface); } .nr-box--cta p { margin: 0; font-size: .95rem; line-height: 1.5; } .nr-box--cta b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.12rem; color: var(--ink); } .nr-box--cta .nr-btn { justify-self: start; } .nr-box__svc { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); } .nr-box__svc small { display: block; font: 400 .62rem/1.6 var(--font-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .nr-box__svc:hover { box-shadow: inset 0 0 0 1px var(--brand); } .nr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .92rem; color: var(--muted); } .nr-author { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; } .nr-author:hover span { color: var(--link); } .nr-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; object-fit: cover; font: 600 .78rem/1 var(--font-mono); color: #FFFFFF; background: linear-gradient(135deg, #5D1AE8, #B229FF 60%, #DE2683); } .nr-meta time, .nr-meta span { font-variant-numeric: tabular-nums; } .nr-cat { display: inline-flex; align-items: center; gap: 8px; font: 500 .7rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); text-decoration: none; border: 1px solid var(--line-2); background: var(--surface); padding: 8px 12px; border-radius: 999px; width: fit-content; } .nr-cat:hover { border-color: var(--brand); } .nr-tags { list-style: none; margin: 2.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .nr-postnav { margin-top: 2.4em; } .nr-postnav .nav-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .nr-postnav a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.35; } .nr-postnav a:hover { border-color: var(--brand); } .nr-postnav small { font: 500 .62rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-postnav .nav-next { text-align: right; } /* ---------- Výpisy: čipy, karty, stránkovanie ---------- */ .nr-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 22px; scrollbar-width: thin; } .nr-chips--wrap { flex-wrap: wrap; overflow: visible; } @media (min-width: 62em) { .nr-chips { flex-wrap: wrap; overflow: visible; } } .nr-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; font-size: .88rem; background: var(--surface); color: var(--text); text-decoration: none; } .nr-chip small { font: 400 .66rem/1 var(--font-mono); color: var(--muted); } .nr-chip:hover { border-color: var(--brand); color: var(--ink); } .nr-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .nr-chip[aria-current="page"] small { color: var(--bg); opacity: .75; } .nr-archive-svc { margin-bottom: 22px; max-width: 420px; } .nr-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } .nr-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(420px circle at var(--mx, 80%) var(--my, -10%), var(--spot), transparent 45%), var(--surface); box-shadow: var(--shadow-1); overflow: clip; transition: box-shadow .3s, transform .25s, border-color .3s; } .nr-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--line-2); } .nr-card:focus-within { box-shadow: var(--shadow-2); border-color: var(--brand); } .nr-card__glyph { height: 88px; border-bottom: 1px solid var(--line); background: radial-gradient(var(--dot) .9px, transparent 1.4px) 0 0 / 12px 12px; } .nr-card__glyph svg { width: 100%; height: 100%; display: block; } .nr-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .nr-card__cat { font: 500 .64rem/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--brand); } .nr-card__title { margin: 0; font-family: var(--font-display); font-stretch: 104%; font-weight: 680; font-size: 1.16rem; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; } .nr-card__title a { color: var(--ink); text-decoration: none; } .nr-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; } .nr-card__title a:focus-visible { outline: none; } .nr-card p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nr-card__meta { margin-top: auto; padding-top: 8px; font: 400 .66rem/1.3 var(--font-mono); color: var(--muted); display: flex; gap: 12px; } .nr-pager { margin-top: 32px; } .nr-pager .nav-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; } .nr-pager .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font: 500 .8rem/1 var(--font-mono); } .nr-pager .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); } .nr-pager .page-numbers.dots { border: 0; background: none; min-width: 0; padding: 0 4px; } .nr-pager a.page-numbers:hover { border-color: var(--brand); color: var(--ink); } /* tlačidlo „Načítať ďalšie články“ nad číslami strán: farebné, aby sa líšilo od neutrálnych čísel */ .nr-loadmore { margin-top: 36px; display: grid; justify-items: center; gap: 22px; } .nr-loadmore .nr-pager { margin-top: 0; } .nr-loadmore__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 12px 14px 12px 30px; border-radius: 999px; background: var(--grad) 0 50% / 160% 100%; color: var(--on-grad); text-decoration: none; font: 700 1rem/1.2 var(--font-body); box-shadow: 0 10px 28px -10px rgb(222 38 131 / .6), 0 0 0 4px rgb(178 41 255 / .10); transition: box-shadow .3s ease, transform .2s ease, background-position .5s ease, opacity .2s; } .nr-loadmore__btn small { font: 700 .68rem/1 var(--font-mono); letter-spacing: .04em; padding: 7px 10px; border-radius: 999px; background: rgb(255 255 255 / .24); color: inherit; } :root[data-theme="dark"] .nr-loadmore__btn small { background: rgb(0 0 0 / .18); } @media not (prefers-color-scheme: light) { :root:not([data-theme="light"]) .nr-loadmore__btn small { background: rgb(0 0 0 / .18); } } .nr-loadmore__btn:hover { background-position: 100% 50%; transform: translateY(-2px); color: var(--on-grad); box-shadow: 0 16px 36px -10px rgb(222 38 131 / .7), 0 0 0 5px rgb(178 41 255 / .16); } .nr-loadmore__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .nr-loadmore__btn.is-loading { opacity: .65; cursor: progress; pointer-events: none; } .nr-loadmore__s { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Blog: články v riadkoch + bočný stĺpec ---------- */ .nr-bloglayout { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 64em) { .nr-bloglayout { grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; } } .nr-bloglayout__main { min-width: 0; } .nr-rows { display: grid; gap: 16px; } .nr-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: clip; background: radial-gradient(420px circle at var(--mx, 80%) var(--my, -10%), var(--spot), transparent 45%), var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .3s, transform .25s, border-color .3s; } @media (min-width: 40em) { .nr-row { grid-template-columns: 184px minmax(0, 1fr); } .nr-row--lead { grid-template-columns: 248px minmax(0, 1fr); } } /* gradientový pruh vľavo sa vysunie zdola pri hoveri/fokuse */ .nr-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; z-index: 2; background: var(--grad); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .35s ease; } .nr-row:hover, .nr-row:focus-within { box-shadow: var(--shadow-2); border-color: var(--line-2); } .nr-row:hover { transform: translateY(-2px); } .nr-row:hover::before, .nr-row:focus-within::before { transform: scaleY(1); } .nr-row:focus-within { border-color: var(--brand); } .nr-row__vis { position: relative; min-height: 92px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(var(--dot) .9px, transparent 1.4px) 0 0 / 12px 12px, linear-gradient(160deg, var(--aura-1), transparent 72%); } @media (min-width: 40em) { .nr-row__vis { min-height: 0; border-bottom: 0; border-right: 1px solid var(--line); } } .nr-row__vis svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; display: block; transform-origin: 50% 100%; transition: transform .5s ease; } .nr-row:hover .nr-row__vis svg { transform: scaleY(1.12); } .nr-row__n { position: absolute; top: 12px; left: 16px; font: 800 1.7rem/1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; color: var(--brand); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .nr-row__n { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; } } .nr-row--lead .nr-row__n { font-size: 2.3rem; } .nr-row__badge { position: absolute; left: 14px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: var(--grad); color: var(--on-grad); font: 700 .6rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; box-shadow: 0 6px 16px -8px rgb(222 38 131 / .7); } .nr-row__body { padding: 18px 22px 18px; display: grid; gap: 8px; align-content: center; min-width: 0; } .nr-row--lead .nr-row__body { padding-block: 24px; gap: 10px; } .nr-row__top { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 500 .64rem/1.4 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .nr-row__cat { color: var(--brand); } .nr-row__top time { letter-spacing: .03em; } .nr-row__title { margin: 0; font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.012em; text-wrap: balance; } .nr-row--lead .nr-row__title { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); font-stretch: 110%; } .nr-row__title a { color: var(--ink); text-decoration: none; } .nr-row__title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; } .nr-row__title a:focus-visible { outline: none; } .nr-row__ex { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nr-row--lead .nr-row__ex { -webkit-line-clamp: 3; line-clamp: 3; font-size: 1rem; } .nr-row__meta { margin: 4px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 .68rem/1.3 var(--font-mono); color: var(--muted); } .nr-row__meta > span { display: inline-flex; align-items: center; gap: 6px; } .nr-row__meta .nr-icon { width: 14px; height: 14px; } .nr-row__go { color: var(--brand); font-weight: 600; } .nr-row__go .nr-icon { transition: transform .25s ease; } .nr-row:hover .nr-row__go .nr-icon { transform: translateX(4px); } .nr-blograil { display: grid; gap: 16px; align-content: start; min-width: 0; } .nr-blograil__stick { display: grid; gap: 16px; } @media (min-width: 64em) { .nr-blograil__stick { position: sticky; top: 90px; } } .nr-box ol { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: nr-rec; } .nr-box--recent li { counter-increment: nr-rec; } .nr-box--recent ol a { position: relative; display: grid; gap: 3px; padding: 11px 0 11px 30px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .94rem; line-height: 1.38; } .nr-box--recent ol a::before { content: counter(nr-rec, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 700 .68rem/1.2 var(--font-mono); color: var(--brand); } .nr-box--recent ol a:hover { color: var(--link); } .nr-box--recent time { font: 400 .64rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--muted); } .nr-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); align-self: center; } @media (prefers-reduced-motion: no-preference) { .nr-live { animation: nr-live 2.2s ease-out infinite; } } @keyframes nr-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } } .nr-box .nr-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .nr-box .nr-cloud li + li { border-top: 0; } .nr-box .nr-cloud__t { display: inline-flex; align-items: baseline; gap: 1px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font: 500 .74rem/1.2 var(--font-mono); text-decoration: none; transition: border-color .2s, background .2s, color .2s; } .nr-box .nr-cloud__t span { color: var(--brand); opacity: .7; } .nr-box .nr-cloud__t--2 { font-size: .8rem; } .nr-box .nr-cloud__t--3 { font-size: .9rem; color: var(--ink); } .nr-box .nr-cloud__t--4 { font-size: 1rem; font-weight: 700; color: var(--ink); } .nr-box .nr-cloud__t:hover { border-color: var(--brand); background: var(--mark); color: var(--ink); } .nr-box--svcs ul a { display: flex; align-items: center; gap: 10px; padding: 9px 0; } .nr-box--svcs ul .nr-icon { width: 18px; height: 18px; flex: none; color: var(--brand); transition: transform .2s ease; } .nr-box--svcs ul a:hover .nr-icon { transform: scale(1.15); } .nr-box--promo { position: relative; overflow: hidden; border-color: transparent; color: #E3E0F5; gap: 12px; background: radial-gradient(120% 90% at 100% 0%, rgb(222 38 131 / .5), transparent 58%), radial-gradient(90% 90% at 0% 100%, rgb(93 26 232 / .65), transparent 62%), #14101F; box-shadow: var(--shadow-2); } .nr-box--promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgb(255 255 255 / .16) .8px, transparent 1.3px) 0 0 / 14px 14px; mask-image: linear-gradient(200deg, #000, transparent 55%); -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%); } .nr-box--promo > * { position: relative; z-index: 1; } .nr-promo__tag { font: 600 .62rem/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: #F28DBA; } .nr-box--promo b { font-family: var(--font-display); font-stretch: 108%; font-size: 1.28rem; line-height: 1.2; color: #fff; } .nr-box--promo p { margin: 0; font-size: .92rem; line-height: 1.5; } .nr-box--promo .nr-btn { justify-self: start; --btn-edge: initial; --btn-fill: #1B1B1E; --btn-ink: #E3E3E3; --r1: #A98BFF; --r2: #D29BFF; --r3: #F28DBA; --btn-shadow: 0 0 22px -6px rgb(169 139 255 / .35), 0 0 44px -14px rgb(242 141 186 / .30); --btn-glow: 0 0 28px -4px rgb(169 139 255 / .5), 0 0 56px -10px rgb(242 141 186 / .4); } .nr-box--promo .nr-btn:hover { color: #E3E3E3; } .nr-empty { padding: 40px 0; } .nr-empty__t { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink); margin: 0 0 6px; } .nr-search { margin-bottom: 24px; max-width: 560px; } .search-form { display: flex; gap: 10px; } .search-form label { flex: 1; } .search-field { width: 100%; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; } .search-submit { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--btn-fill); color: var(--btn-ink); font: 600 .95rem/1 var(--font-body); cursor: pointer; } /* ---------- Recenzie z Google (pás pod obsahom, na titulke pod „Overené v praxi") ---------- */ .nr-proof { position: relative; isolation: isolate; overflow: clip; background: var(--surface-2); border-top: 1px solid var(--line); padding-block: clamp(48px, 6.5vw, 96px); } .nr-proof::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 55% 60% at 85% 10%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 60% at 85% 10%, #000 10%, transparent 70%); } /* karta hodnotenia vpravo hore: lícuje so štítkom a nadpisom ako na titulke (Milo 28. 9.) */ .nr-proof__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 18px 40px; margin-bottom: clamp(24px, 3.4vw, 40px); } .nr-proof__intro { display: grid; gap: 10px; justify-items: start; max-width: 40rem; } .nr-proof__head h2 { margin: 2px 0 0; font-family: var(--font-display); font-stretch: 110%; font-weight: 750; font-size: clamp(1.9rem, 1.25rem + 2.2vw, 3.05rem); line-height: 1.04; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; } .nr-proof__lead { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--text); } .nr-proof__where { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 500 .7rem/1.5 var(--font-mono); letter-spacing: .04em; color: var(--muted); } .nr-band--proof .nr-proof__where { margin-bottom: 20px; } .nr-proof__where .nr-icon { width: 15px; height: 15px; color: var(--brand); } .nr-proof__more { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: 600; text-decoration: none; } .nr-proof__more:hover { color: var(--link-hover); } .nr-proof__more .nr-icon { width: 16px; height: 16px; } /* šípky sliderov */ .nr-cbtn { appearance: none; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, opacity .2s, transform .2s; } .nr-cbtn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .nr-cbtn:disabled { opacity: .35; cursor: default; } .nr-cbtn .nr-icon { width: 18px; height: 18px; } html:not(.js) .nr-cbtn { display: none; } /* slider referencií: vľavo firmy (navigácia, len s JS a na širokej obrazovke), vpravo citát */ .nr-voices { display: grid; gap: 20px; } .nr-voices__nav { display: none; } @media (min-width: 62em) { .nr-voices { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; } .js .nr-voices__nav { display: grid; gap: 10px; align-content: start; position: sticky; top: 96px; } html:not(.js) .nr-voices { grid-template-columns: minmax(0, 1fr); } } .nr-voices__t { margin: 0 0 2px; padding-inline: 12px; display: flex; justify-content: space-between; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-voices__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .nr-voice-tab { appearance: none; width: 100%; margin: 0; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .3s; } .nr-voice-tab:hover { background: var(--surface); } .nr-voice-tab[aria-current="true"] { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-1); } .nr-voice-tab__mono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 .78rem/1 var(--font-mono); color: var(--brand); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .3s, background .3s; } .nr-voice-tab[aria-current="true"] .nr-voice-tab__mono { color: var(--on-grad); background: var(--grad); box-shadow: none; } .nr-voice-tab__txt { display: grid; gap: 1px; min-width: 0; } .nr-voice-tab b { font-weight: 650; font-size: .93rem; line-height: 1.25; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nr-voice-tab small { font: 400 .62rem/1.3 var(--font-mono); letter-spacing: .03em; color: var(--muted); } .nr-voices__stage { position: relative; isolation: isolate; min-width: 0; border: 1.5px solid transparent; border-radius: 28px; background: radial-gradient(60% 80% at 0% 0%, var(--aura-1), transparent 70%) padding-box, radial-gradient(50% 70% at 100% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); overflow: clip; } .nr-voices__track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; } .nr-voices__track:focus-visible { outline-offset: -4px; border-radius: 26px; } .js .nr-voices__track { scrollbar-width: none; } .js .nr-voices__track::-webkit-scrollbar { display: none; } /* slajdy majú výšku najdlhšieho citátu (pás sa nehýbe pri listovaní) — kratší citát je vo výške vycentrovaný */ .nr-voice { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; margin: 0; display: grid; gap: 18px; align-content: center; padding: clamp(24px, 4vw, 48px) clamp(20px, 4.4vw, 56px) 18px; } .nr-voice__mark { width: 46px; height: 34px; background: var(--grad); -webkit-mask: var(--i-quote) left center / contain no-repeat; mask: var(--i-quote) left center / contain no-repeat; } .nr-voice__q { margin: 0; } .nr-voice__q p { margin: 0; max-width: 38em; font-family: var(--font-display); font-stretch: 104%; font-weight: 620; font-size: clamp(1.06rem, .95rem + .75vw, 1.55rem); line-height: 1.46; letter-spacing: -.006em; color: var(--ink); text-wrap: pretty; } .nr-voice__tr { max-width: 46em; } .nr-voice__tr summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font: 600 .66rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--link); } .nr-voice__tr summary::-webkit-details-marker { display: none; } .nr-voice__tr summary::after { content: "+"; font-size: .9rem; line-height: 1; } .nr-voice__tr[open] summary::after { content: "−"; } .nr-voice__tr p { margin: 8px 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); } .nr-voice__who { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .nr-voice__mono { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font: 600 .92rem/1 var(--font-mono); letter-spacing: .02em; color: var(--on-grad); background: var(--grad); box-shadow: var(--btn-shadow); } .nr-voice__who b { display: block; font-weight: 650; font-size: 1.04rem; line-height: 1.3; color: var(--ink); } .nr-voice__who small { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.4; color: var(--muted); } .nr-voices__ctrl { display: flex; align-items: center; gap: 14px; padding: 4px clamp(22px, 4.4vw, 56px) clamp(22px, 3vw, 32px); } html:not(.js) .nr-voices__ctrl { display: none; } .nr-voices__count { font: 600 .74rem/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; } .nr-voices__count b { color: var(--ink); } .nr-voices__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; } .nr-voices__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, .125)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); } /* carousel recenzií z Google */ .nr-gr { margin-top: clamp(30px, 4.4vw, 52px); } .nr-voices + .nr-gr { padding-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--line); } .nr-gr__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; } .nr-gr__t { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink); } .nr-gr__g { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 var(--font-display); color: var(--brand); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); } .nr-gr__ctrl { display: flex; align-items: center; gap: 10px; } .nr-gr__ctrl .nr-proof__more { margin-right: 8px; } .nr-reviews { position: relative; list-style: none; margin: 0; padding: 4px 2px 14px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; } .nr-reviews:focus-visible { outline-offset: 2px; border-radius: 22px; } .js .nr-reviews { scrollbar-width: none; } .js .nr-reviews::-webkit-scrollbar { display: none; } .nr-review { flex: 0 0 min(86%, 350px); scroll-snap-align: start; display: grid; gap: 14px; align-content: start; padding: 22px 22px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); } @media (min-width: 62em) { .nr-review { flex-basis: calc((100% - 32px) / 3); } } .nr-gr__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } /* hviezdičky podľa hodnotenia: sivý základ, zlatá vrstva orezaná na --fill */ .nr-meter { display: inline-grid; vertical-align: middle; line-height: 0; } .nr-meter > span { grid-area: 1 / 1; display: inline-flex; gap: 2px; } .nr-meter__base { color: var(--line-2); } .nr-meter__fill { color: var(--star); clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0); } .nr-meter .nr-icon { width: 16px; height: 16px; stroke-width: 1.2; } .nr-meter--lg > span { gap: 3px; } .nr-meter--lg .nr-icon { width: 24px; height: 24px; } .nr-meter--lg .nr-meter__fill { filter: drop-shadow(0 2px 5px rgb(242 176 30 / .35)); } /* karta hodnotenia z Google: nízka a široká, aby lícovala s nadpisom sekcie (Milo 28. 9.) — vľavo 5,0 s deliacou čiarou, vpravo zdroj a pod ním hviezdičky s počtom recenzií */ .nr-rating { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "score t" "score side"; align-items: center; gap: 6px 20px; width: fit-content; max-width: 100%; padding: 12px 24px 12px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); } .nr-rating__t { grid-area: t; margin: 0; display: flex; align-items: center; gap: 8px; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-rating__t .nr-gr__g { width: 22px; height: 22px; font-size: .72rem; } .nr-rating__score { grid-area: score; align-self: stretch; margin: 0; padding-right: 20px; border-right: 1px solid var(--line); display: grid; grid-auto-flow: column; align-items: baseline; align-content: center; gap: 6px; } .nr-rating__score b { font-family: var(--font-display); font-stretch: 112%; font-weight: 780; font-size: clamp(2.4rem, 2rem + 1.6vw, 2.9rem); line-height: .9; letter-spacing: -.03em; color: var(--ink); } .nr-rating__score span { font: 500 .8rem/1 var(--font-mono); color: var(--muted); } .nr-rating__side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } .nr-rating__count { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: .95rem; color: var(--link); text-decoration: none; } .nr-rating__count .nr-icon { width: 15px; height: 15px; transition: transform .2s; } a.nr-rating__count:hover { color: var(--link-hover); } a.nr-rating__count:hover .nr-icon { transform: translateX(3px); } /* mobil: „Hodnotenie na Google" cez celú šírku navrchu (vedľa čísla by sa zalomilo), pod ním 5,0 | hviezdičky a počet */ @media (max-width: 32em) { .nr-rating { grid-template-areas: "t t" "score side"; gap: 10px 16px; padding-inline: 18px 20px; } .nr-rating__score { padding-right: 16px; } } /* odznak hodnotenia (pri recenziách a na Kontakte) */ .nr-rbadge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: fit-content; max-width: 100%; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .88rem; line-height: 1.3; box-shadow: var(--shadow-1); transition: border-color .2s; } .nr-rbadge b { font-family: var(--font-display); font-stretch: 108%; font-weight: 760; font-size: 1.06rem; } .nr-rbadge > span:not(.nr-meter):not(.screen-reader-text) { color: var(--muted); } a.nr-rbadge:hover { border-color: var(--brand); } .nr-contact__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* titulka „Overené v praxi": karta hodnotenia vpravo cez obe riadky hlavičky, číslo sekcie ostane nad nadpisom */ @media (min-width: 48em) { .nr-band--proof .nr-sec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 32px; row-gap: 14px; align-items: end; } .nr-band--proof .nr-sec__no { grid-column: 1; grid-row: 1; } .nr-band--proof .nr-sec__head h2 { grid-column: 1; grid-row: 2; } .nr-band--proof .nr-sec__aside { grid-column: 2; grid-row: 1 / span 2; } } .nr-review__head { display: flex; align-items: center; gap: 12px; line-height: 1.3; } .nr-review__head b { display: block; color: var(--ink); font-weight: 650; } .nr-review__head small { display: block; font: 400 .66rem/1.6 var(--font-mono); color: var(--muted); letter-spacing: .03em; } .nr-review .nr-avatar { width: 42px; height: 42px; font-size: .95rem; } .nr-stars { display: inline-flex; gap: 2px; color: var(--star); } .nr-stars .nr-icon { width: 18px; height: 18px; stroke-width: 1.2; } .nr-stars .is-off { color: var(--line-2); } .nr-review blockquote { margin: 0; } .nr-review blockquote p { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.6; } /* ========================================================================== Titulka a rozcestník /sluzby/: obsah ako sekcie s komponentmi (inc/sections.php, inc/home.php, inc/services.php). Text, nadpisy a odkazy sú z obsahu; tu sa rieši len ich obal. ========================================================================== */ /* ---------- Pásy a hlavičky sekcií ---------- */ .nr-band { position: relative; padding-block: clamp(56px, 7vw, 104px); } .nr-band--line { border-top: 1px solid var(--line); } .nr-band--alt { background: var(--surface-2); border-block: 1px solid var(--line); } .nr-band--alt + .nr-band--line { border-top: 0; } .nr-sec__head { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 28px; margin-bottom: clamp(26px, 3.4vw, 44px); } .nr-sec__no { flex-basis: 100%; display: inline-flex; align-items: center; gap: 12px; font: 600 .72rem/1 var(--font-mono); letter-spacing: .1em; color: var(--brand); } .nr-sec__no::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--grad); } .nr-sec__head h2 { flex: 1 1 18rem; margin: 0; font-family: var(--font-display); font-stretch: 110%; font-weight: 740; font-size: clamp(1.9rem, 1.25rem + 2.2vw, 3.05rem); line-height: 1.06; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; scroll-margin-top: 96px; } .nr-sec__aside { flex: none; max-width: 100%; } .nr-sec__intro { margin-bottom: clamp(22px, 3vw, 32px); } .nr-sec__outro { margin-top: clamp(22px, 3vw, 32px); } .nr-prose--left > * { margin-inline: 0; } /* ---------- Taby (oblasti služieb na titulke) ---------- Bez JS: zoznam tabov skrytý, panely pod sebou. S JS (.js z , teda ešte pred prvým vykreslením): vľavo taby, vpravo vybraný panel. */ .nr-tabs { display: grid; gap: 14px; } .nr-tabs__list { display: none; } .js .nr-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nr-tabs__panels { display: grid; gap: 16px; min-width: 0; } .js .nr-tabpanel:not(.is-active) { display: none; } @media (min-width: 62em) { .js .nr-tabs { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 24px; align-items: start; } .js .nr-tabs__list { grid-template-columns: minmax(0, 1fr); gap: 10px; position: sticky; top: 92px; } } .nr-tab { appearance: none; position: relative; overflow: clip; width: 100%; min-height: 66px; margin: 0; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon meta"; align-items: center; column-gap: 12px; row-gap: 3px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, box-shadow .3s, transform .2s; } .nr-tab:hover { border-color: var(--line-2); transform: translateY(-1px); } .nr-tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .nr-tab__icon { grid-area: icon; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--brand); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; } .nr-tab__icon .nr-icon { width: 20px; height: 20px; } .nr-tab__label { grid-area: label; font-weight: 650; font-size: .98rem; line-height: 1.25; color: var(--ink); } .nr-tab__meta { grid-area: meta; font: 400 .64rem/1.35 var(--font-mono); letter-spacing: .03em; color: var(--muted); } .nr-tab[aria-selected="true"] { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-tab[aria-selected="true"]::before { transform: scaleY(1); } .nr-tab[aria-selected="true"] .nr-tab__icon { color: var(--on-grad); background: var(--grad); box-shadow: none; } @media (max-width: 30em) { .nr-tab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "label" "meta"; align-content: start; row-gap: 6px; padding: 12px; } .nr-tab__icon { width: 34px; height: 34px; border-radius: 10px; } .nr-tab__label { font-size: .92rem; } } .nr-tabpanel { position: relative; isolation: isolate; overflow: clip; display: grid; gap: clamp(22px, 3vw, 32px); align-content: start; padding: clamp(20px, 3.2vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-1); } .nr-tabpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 75% at 100% 0%, #000 10%, transparent 70%); } .nr-tabpanel__text h3 { margin: 0 0 12px; font-family: var(--font-display); font-stretch: 108%; font-weight: 720; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); line-height: 1.1; letter-spacing: -.016em; color: var(--ink); text-wrap: balance; scroll-margin-top: 96px; } .nr-tabpanel__text .nr-prose { font-size: 1.06rem; max-width: 46em; } .nr-tabpanel__hubs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); min-width: 0; } /* ---------- Karta HUB-u a karty síl (titulka aj /sluzby/) ---------- */ .nr-hubcard { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); } .nr-hubcard__head { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 1.04rem; line-height: 1.25; } .nr-hubcard__head:hover .nr-hubcard__name { color: var(--link); } .nr-hubcard__head .nr-icon--arrow { margin-inline-start: auto; width: 18px; height: 18px; color: var(--brand); transition: transform .2s; } .nr-hubcard__head:hover .nr-icon--arrow { transform: translateX(3px); } .nr-hubcard__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--on-grad); background: var(--grad); } .nr-hubcard__icon .nr-icon { width: 19px; height: 19px; } .nr-hubcard__meta { margin: -4px 0 0; font: 400 .66rem/1.3 var(--font-mono); letter-spacing: .04em; color: var(--muted); } .nr-silos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .nr-silo { position: relative; display: grid; gap: 10px; align-content: space-between; padding: 13px 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s, transform .2s; } .nr-silo > a { color: var(--ink); font-weight: 600; font-size: .96rem; line-height: 1.3; text-decoration: none; } .nr-silo > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .nr-silo:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-2px); } .nr-silo:hover > a { color: var(--link); } .nr-silo > a:focus-visible { outline-offset: 4px; } @supports selector(:has(*)) { .nr-silo > a:focus-visible { outline: none; } .nr-silo:has(> a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } } .nr-silo__meta { display: flex; align-items: center; gap: 8px; min-height: 14px; font: 400 .64rem/1.2 var(--font-mono); letter-spacing: .03em; color: var(--muted); } .nr-silo__meta .nr-icon { width: 15px; height: 15px; color: var(--brand); } @media (min-width: 40em) { .nr-silos:not(.nr-silos--compact) .nr-silo { min-height: 76px; } } .nr-silos--compact .nr-silo { padding: 11px 12px 10px; gap: 8px; } .nr-silos--compact .nr-silo > a { font-size: .92rem; } .nr-bars { width: 22px; height: 14px; flex: none; } .nr-bars rect { fill: var(--line-2); } .nr-bars .is-on { fill: var(--brand); } /* ---------- Časová os krokov ---------- */ .nr-steps { list-style: none; margin: 0; padding: 0; display: grid; } .nr-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; } .nr-step:last-child { padding-bottom: 0; } .nr-step__no { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem/1 var(--font-mono); color: var(--brand); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); } .nr-step:first-child .nr-step__no { color: var(--on-grad); background: var(--grad); border-color: transparent; } .nr-step:not(:last-child)::before { content: ""; position: absolute; left: 23.5px; top: 56px; bottom: 8px; width: 1px; background: linear-gradient(var(--r1), var(--r3)); opacity: .55; } /* dátový paket po spojnici — len ozdoba */ .nr-step:not(:last-child)::after { content: ""; position: absolute; left: 20.5px; top: 56px; bottom: 8px; width: 7px; background: radial-gradient(circle at 3.5px 3.5px, var(--brand-2) 2.6px, transparent 3.2px) no-repeat; animation: nr-run-y 4.2s cubic-bezier(.5, 0, .3, 1) infinite; opacity: 0; } .nr-step:nth-child(2)::after { animation-delay: 1.4s; } .nr-step:nth-child(3)::after { animation-delay: 2.8s; } @keyframes nr-run-y { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 55% { opacity: 1; } 62%, 100% { transform: translateY(100%); opacity: 0; } } @keyframes nr-run-x { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 55% { opacity: 1; } 62%, 100% { transform: translateX(100%); opacity: 0; } } .nr-step__body { min-width: 0; padding-top: 11px; } .nr-step__body strong { display: block; font-family: var(--font-display); font-stretch: 104%; font-weight: 680; font-size: 1.16rem; line-height: 1.28; color: var(--ink); text-wrap: balance; } .nr-step__sep { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nr-step__d { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.62; color: var(--text); } @media (min-width: 56em) { .nr-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .nr-step { grid-template-columns: none; grid-template-rows: auto 1fr; row-gap: 20px; padding: 0 28px 0 0; } .nr-step:not(:last-child)::before { left: 58px; right: 10px; top: 23.5px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--r1), var(--r2) 60%, var(--r3)); } .nr-step:not(:last-child)::after { left: 58px; right: 10px; top: 20.5px; bottom: auto; width: auto; height: 7px; animation-name: nr-run-x; } .nr-step__body { padding-top: 0; } } /* ---------- FAQ v dvoch stĺpcoch ---------- */ .nr-faq { display: grid; gap: 26px; } .nr-faq__side .nr-sec__head { margin-bottom: 14px; } .nr-faq__count { margin: 0; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-faq__list { min-width: 0; } @media (min-width: 62em) { .nr-faq { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; } .nr-faq__side { position: sticky; top: 96px; } } /* ---------- Pracovná poznámka [TU …] — viditeľná, aby sa neprehliadla ---------- */ .nr-slot { padding: 14px 18px; border: 1.5px dashed var(--line-2); border-radius: 14px; font: 400 .8rem/1.55 var(--font-mono); color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--spot) 10px 20px); } /* ---------- Poloha: panel s radarom ---------- */ .nr-place { position: relative; display: grid; gap: 32px; padding: clamp(22px, 4vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(90% 120% at 0% 0%, var(--aura-1), transparent 55%), var(--surface); box-shadow: var(--shadow-2); overflow: clip; } .nr-place__text .nr-prose { font-size: 1.08rem; max-width: 40em; } .nr-place .wp-block-buttons { margin-block-start: 26px; } @media (min-width: 62em) { .nr-place { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 56px; } } .nr-radar { position: relative; isolation: isolate; width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 1; border-radius: 50%; overflow: hidden; color-scheme: dark; background: radial-gradient(closest-side, #1C1830 0%, #100E18 72%, #0B0A10 100%); box-shadow: 0 0 0 1px rgb(169 139 255 / .24), 0 30px 60px -30px rgb(93 26 232 / .55), inset 0 0 70px rgb(0 0 0 / .65); } .nr-radar__svg { position: absolute; inset: 0; width: 100%; height: 100%; } .r-ring { fill: none; stroke: rgb(169 139 255 / .22); stroke-width: 1; } .r-cross { fill: none; stroke: rgb(169 139 255 / .13); stroke-width: 1; } .r-tick { fill: none; stroke: rgb(169 139 255 / .38); stroke-width: 1; } .r-lbl { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; fill: #9AA0A6; } .r-dot { fill: #F28DBA; } .r-ping { fill: none; stroke: #F28DBA; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: nr-ping 2.8s ease-out infinite; } @keyframes nr-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(6.5); opacity: 0; } } .nr-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgb(169 139 255 / 0) 0deg 290deg, rgb(169 139 255 / .22) 352deg, rgb(210 155 255 / .6) 359.5deg, rgb(169 139 255 / 0) 360deg); animation: nr-sweep 7s linear infinite; } @keyframes nr-sweep { to { transform: rotate(1turn); } } .nr-radar__tag { position: absolute; left: 50%; top: calc(50% + 18px); transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; text-align: center; white-space: nowrap; } .nr-radar__tag b { font: 600 .84rem/1.2 var(--font-body); color: #E3E3E3; } .nr-radar__tag small { font: 400 .6rem/1.2 var(--font-mono); letter-spacing: .06em; color: #9AA0A6; } /* ---------- Prečo Neonrocket: zásady, ktoré sa rozsvietia ---------- Pás sleduje tému: vo svetlej svetlý (ako ostatné --alt pásy), v tmavej o stupeň tmavší než stránka, aby neón vynikol. Bez JS a pri obmedzení pohybu svietia všetky zásady hneď. S JS (.js z ) začínajú zhasnuté — stále čitateľné, veľký text má kontrast ≥ 3 : 1 — a main.js každú rozsvieti, keď k nej čitateľ dôjde. Mení sa len farba, žiara a priehľadnosť (CLS 0). */ .nr-band--claims { isolation: isolate; overflow: clip; background: radial-gradient(60% 55% at 0% 0%, var(--aura-1), transparent 70%), radial-gradient(50% 50% at 100% 100%, var(--aura-2), transparent 70%), var(--claims-bg); border-block: 1px solid var(--line); } .nr-band--claims + .nr-band--line { border-top: 0; } .nr-band--claims::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 65% 75% at 75% 40%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 65% 75% at 75% 40%, #000 15%, transparent 75%); } .nr-band--claims::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--r1), var(--r2), var(--r3), transparent); opacity: .6; } .nr-claims { display: grid; } .nr-claims__intro { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.58; max-width: 30em; } .nr-claims__intro p { color: var(--ink); } .nr-claims__meter { display: none; } .nr-claims__list { list-style: none; margin: clamp(30px, 6vw, 44px) 0 0; padding: 0; display: grid; } .nr-claim { padding-block: clamp(28px, 3.6vw, 44px); } .nr-claim:first-child { padding-top: 0; } .nr-claim:last-child { padding-bottom: 0; } /* „01 ········ [ OK ]" nad zásadou */ .nr-claim__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; } .nr-claim__no { color: var(--brand); transition: color .5s ease; } .nr-claim__rule { position: relative; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 7px); } .nr-claim__rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--r1), var(--r2) 60%, var(--r3)); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .nr-claim__ok { color: var(--brand); white-space: pre; transition: opacity .3s ease .55s; } .nr-claim h3 { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 740; font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); line-height: 1.08; letter-spacing: -.022em; color: var(--ink); text-shadow: var(--glow); text-wrap: balance; scroll-margin-top: 96px; transition: color .6s ease, text-shadow .9s ease; } .nr-claim__d { margin-top: 16px; font-size: 1.04rem; line-height: 1.7; color: var(--text); transition: color .6s ease; } .nr-claim__d p { max-width: 40em; } /* merač vľavo: koľko zásad už svieti (len vizuál) */ .nr-claims__bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; } .nr-claims__bars i { width: 6px; height: calc(34% + 66% * var(--i) / max(1, var(--total) - 1)); border-radius: 2px; background: var(--brand); background: color-mix(in oklab, var(--r1), var(--r3) calc(100% * var(--i) / max(1, var(--total) - 1))); box-shadow: 0 0 10px -2px var(--r2); transition: background-color .4s ease, box-shadow .4s ease; } .nr-claims__read { display: grid; gap: 4px; } .nr-claims__read small { font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-claims__read b { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.32rem; line-height: 1.1; color: var(--muted); font-variant-numeric: tabular-nums; } .nr-claims__read b span { color: var(--ink); } @media (min-width: 62em) { .nr-claims { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } .nr-claims__side { position: sticky; top: 96px; } .nr-claims__list { margin-top: 0; } .nr-claims__meter { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(26px, 3vw, 38px); padding: 12px 18px 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); } } /* zhasnuté a zapálenie — len keď pohyb nie je obmedzený */ @media (prefers-reduced-motion: no-preference) { .js .nr-claim:not(.is-lit) h3 { color: var(--off); text-shadow: none; } .js .nr-claim:not(.is-lit) .nr-claim__no, .js .nr-claim:not(.is-lit) .nr-claim__d { color: var(--muted); } .js .nr-claim:not(.is-lit) .nr-claim__rule::after { transform: scaleX(0); } .js .nr-claim:not(.is-lit) .nr-claim__ok { opacity: 0; transition-delay: 0s; } .js .nr-claims__bars i:not(.is-on) { background: var(--line-2); box-shadow: none; } .nr-claim.is-lit h3 { animation: nr-ignite .9s .15s both; } } /* neónka pri zapálení dvakrát zablikne (menej než 3 záblesky za sekundu) */ @keyframes nr-ignite { 0% { opacity: .55; } 9% { opacity: 1; } 15% { opacity: .5; } 24% { opacity: 1; } 31% { opacity: .75; } 42%, 100% { opacity: 1; } } /* ---------- Rozcestník /sluzby/: mapa služieb v hero ---------- */ .nr-board { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); } .nr-board__t { margin: 0; padding: 10px 12px 12px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font: 600 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-board ol { list-style: none; margin: 0; padding: 6px 0 0; display: grid; } .nr-board a { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) auto; grid-template-areas: "no icon name name" "no icon cells info"; align-items: center; column-gap: 12px; row-gap: 7px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background .2s; } .nr-board a:hover { background: var(--surface-2); } .nr-board a:hover .nr-board__name { color: var(--link); } .nr-board__no { grid-area: no; font: 500 .62rem/1 var(--font-mono); color: var(--muted); } .nr-board__icon { grid-area: icon; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } .nr-board__icon .nr-icon { width: 18px; height: 18px; } .nr-board__name { grid-area: name; font-weight: 600; font-size: .96rem; line-height: 1.25; } .nr-board__cells { grid-area: cells; display: flex; flex-wrap: wrap; gap: 4px; } .nr-board__cells i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); } .nr-board__cells .lv1, .nr-board__cells .lv2, .nr-board__cells .lv3, .nr-board__cells .lv4 { background: var(--brand); box-shadow: none; } .nr-board__cells .lv1 { opacity: .35; } .nr-board__cells .lv2 { opacity: .55; } .nr-board__cells .lv3 { opacity: .78; } .nr-board__cells .is-price { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand-2); opacity: 1; } .nr-board__cells .is-hub { width: 32px; background: var(--grad); box-shadow: none; } .nr-board__info { grid-area: info; font: 400 .62rem/1.2 var(--font-mono); letter-spacing: .03em; color: var(--muted); white-space: nowrap; } @media (max-width: 35.99em) { .nr-board__cells { gap: 3px; } .nr-board__cells i { width: 11px; height: 11px; border-radius: 3px; } .nr-board__cells .is-hub { width: 26px; } } @media (min-width: 36em) { .nr-board a { grid-template-columns: 20px 34px minmax(0, 1fr) 140px 132px; grid-template-areas: "no icon name cells info"; } .nr-board__cells { flex-wrap: nowrap; } .nr-board__info { text-align: right; } } /* ---------- Rozcestník /sluzby/: panely oblastí ---------- */ .nr-content--services { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); } .nr-hubs { display: grid; gap: 20px; } .nr-hub { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 26px; padding: clamp(20px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-1); } .nr-hub::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 45% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 45% 80% at 100% 0%, #000, transparent 70%); } .nr-hub__main { min-width: 0; } .nr-hub__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .nr-hub__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--on-grad); background: var(--grad); box-shadow: var(--btn-shadow); } .nr-hub__icon .nr-icon { width: 24px; height: 24px; } .nr-hub__no { font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); } .nr-hub__main > :is(h2, h3) { margin: 0 0 10px; font-family: var(--font-display); font-stretch: 108%; font-weight: 720; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); line-height: 1.1; letter-spacing: -.016em; color: var(--ink); text-wrap: balance; scroll-margin-top: 170px; } .nr-hub .nr-prose { font-size: 1.02rem; line-height: 1.66; } .nr-hub .nr-telemetry { margin-top: 20px; } .nr-hub__silos { min-width: 0; align-self: center; } .nr-hub__tail { min-width: 0; } @media (min-width: 62em) { .nr-hub { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 44px; align-items: start; } .nr-hub--solo { grid-template-columns: minmax(0, 1fr); } .nr-hub--solo .nr-prose { max-width: 46em; } .nr-hub__tail { grid-column: 1 / -1; } } /* ---------- Záverečný kontakt ---------- */ .nr-cta { position: relative; isolation: isolate; overflow: clip; margin-top: 20px; display: grid; gap: 22px 44px; align-items: center; padding: clamp(22px, 3.6vw, 40px); border: 1.5px solid transparent; border-radius: 26px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 140% at 0% 50%, var(--aura-1), transparent 70%), radial-gradient(50% 120% at 100% 50%, var(--aura-2), transparent 70%); } .nr-cta__main .wp-block-buttons { margin: 0; } .nr-cta__main .wp-block-button__link { min-height: 54px; padding-inline: 30px; font-size: 1.05rem; } @media (min-width: 48em) { .nr-cta { grid-template-columns: auto minmax(0, 1fr); } } /* ========================================================================== Kontakt, kanály a panel „Konzultácia zadarmo" (inc/contact.php, inc/kontakt.php, inc/form.php). Telefón, e-mail a profily sú z Rank Math, WhatsApp a Messenger z obsahu stránky Kontakt; tu je len ich obal. ========================================================================== */ /* ---------- Kanály: telefón, e-mail, WhatsApp, Messenger ---------- */ .nr-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .nr-channel { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 66px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .3s, transform .2s; } .nr-channel:hover { border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-2px); color: var(--ink); } .nr-channel__icon { position: relative; flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--on-grad); background: var(--grad); box-shadow: var(--btn-shadow); } .nr-channel__icon .nr-icon { width: 21px; height: 21px; } /* „ping" pri namierení: kanál je živý */ .nr-channel__icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .nr-channel:hover .nr-channel__icon::after, .nr-channel:focus-visible .nr-channel__icon::after { animation: nr-chping 1.1s ease-out; } } @keyframes nr-chping { from { opacity: .9; box-shadow: 0 0 0 0 var(--r2); } to { opacity: 0; box-shadow: 0 0 0 12px var(--r2); } } .nr-channel__txt { display: grid; gap: 3px; min-width: 0; } .nr-channel__txt small { font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-channel__txt b { font-weight: 650; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; } /* koniec rozcestníka /sluzby/: 2 × 2 */ .nr-channels--cta { grid-template-columns: minmax(0, 1fr); } @media (min-width: 36em) { .nr-channels--cta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* rýchly kontakt v hero Kontaktu: menšie dlaždice; stĺpec, keď by sa telefón či e-mail zalamoval */ .nr-channels--quick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: 8px; max-width: 34rem; } .nr-channels--quick .nr-channel { min-height: 58px; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 16px; } .nr-channels--quick .nr-channel__icon { width: 36px; height: 36px; border-radius: 11px; } .nr-channels--quick .nr-channel__icon .nr-icon { width: 18px; height: 18px; } .nr-channels--quick .nr-channel__txt b { font-size: .92rem; } /* mobil: štyri ikonové tlačidlá v rade (hodnota ostáva pre čítačky) */ @media (max-width: 30em) { .nr-channels--quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .nr-channels--quick .nr-channel { flex-direction: column; justify-content: center; gap: 7px; min-height: 78px; padding: 10px 4px 9px; text-align: center; } .nr-channels--quick .nr-channel__txt small { font-size: .55rem; letter-spacing: .04em; } .nr-channels--quick .nr-channel__txt b { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- Profily (Facebook, Instagram, X, LinkedIn, Google) ---------- */ .nr-profiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .nr-profiles > li, .nr-profiles > li + li { margin: 0; } .nr-profiles a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 550; line-height: 1.2; transition: border-color .2s, color .2s, transform .2s; } .nr-profiles a:hover { border-color: var(--brand); color: var(--link); } .nr-profiles .nr-icon { width: 18px; height: 18px; color: var(--brand); } .nr-profiles--icons a { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; } .nr-profiles--icons a:hover { transform: translateY(-2px); } /* ---------- Pracovná doba: stav počíta main.js, bez JS len hodiny ---------- */ .nr-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; width: fit-content; max-width: 100%; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 .7rem/1.35 var(--font-mono); letter-spacing: .03em; color: var(--muted); } .nr-status > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); } .nr-status [data-status-text] { color: var(--ink); font-weight: 600; } /* miesto na stav je vyhradené od prvého vykreslenia (.js z ), takže keď ho JS doplní, hodiny sa nepohnú (CLS 0) */ html:not(.js) .nr-status [data-status-text] { display: none; } .js .nr-status [data-status-text] { display: inline-block; min-width: calc(19ch + .6em); } .nr-status.is-open > i { background: var(--ok); } @media (prefers-reduced-motion: no-preference) { .nr-status.is-open > i { animation: nr-live 2.4s ease-out infinite; } } @keyframes nr-live { 0% { box-shadow: 0 0 0 0 var(--ok); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } } /* v karte pracovnej doby sú hodiny vypísané nad stavom — tam len stav, a až keď ho JS pozná */ .nr-status--row { margin-top: 10px; } .nr-status--row .nr-status__hours { display: none; } .js .nr-status--row [data-status-text] { min-width: 0; } .js .nr-status--row:not(.is-known) { visibility: hidden; } html:not(.js) .nr-status--row { display: none; } /* režim nedostupnosti (plugin neonrocket-dostupnost): pevný oznam namiesto stavu pracovnej doby, viditeľný aj bez JS */ .nr-status--away > i { background: transparent; box-shadow: inset 0 0 0 2px var(--brand-2); } .nr-status__away { color: var(--ink); font-weight: 600; } html:not(.js) .nr-status--row.nr-status--away { display: inline-flex; } .nr-away-note { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: .9rem; line-height: 1.5; max-width: 34rem; } .nr-ctaband__side .nr-away-note { max-width: none; } /* pevné upozornenie k obsahu webu (Podmienky použitia) — rámček pod textom, ktorý sa môže vymeniť za dokument z Complianz */ .nr-prose .nr-legal-note { margin-block-start: 2.6em; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: 16px; background: var(--surface); font-size: .96rem; line-height: 1.65; } .nr-prose .nr-legal-note h2 { margin-block-start: 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); } .nr-prose .nr-legal-note > * + * { margin-block-start: .85em; } .nr-prose .nr-legal-note h2 + * { margin-block-start: .7em; } /* v hero Kontaktu stojí oznam hneď pod stavom a hodnotenie z Google až za ním */ .nr-contact__trust .nr-away-note { flex: 1 0 100%; margin: 0; } .nr-away .nr-channels--quick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); } @media (max-width: 30em) { .nr-away .nr-channels--quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Kontakt: hero s konzolou ---------- */ .nr-hero--contact .nr-hero__in { align-items: start; } @media (min-width: 62em) { .nr-hero--contact .nr-hero__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } .nr-contact__copy { position: sticky; top: 96px; } } .nr-person { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; padding: 8px 22px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); } .nr-person__face { flex: none; width: 60px; height: 60px; padding: 2px; border-radius: 50%; object-fit: cover; background: var(--grad); display: grid; place-items: center; font: 600 1.1rem/1 var(--font-mono); color: var(--on-grad); } .nr-person__txt { display: grid; gap: 1px; min-width: 0; line-height: 1.25; } .nr-person__txt small { font: 500 .62rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .nr-person__txt b { font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 1.15rem; color: var(--ink); } .nr-person__txt span { font-size: .88rem; color: var(--muted); } .nr-console { position: relative; isolation: isolate; min-width: 0; border: 1.5px solid transparent; border-radius: 28px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-console::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 60% 40% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 40% at 100% 0%, #000 10%, transparent 70%); } .nr-console__bar { display: none; } .js .nr-console__bar { display: flex; gap: 6px; margin: 10px 10px 0; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); } .nr-ctab { appearance: none; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted); font: 600 .95rem/1.2 var(--font-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .3s; } .nr-ctab:hover { color: var(--ink); } .nr-ctab .nr-icon { width: 18px; height: 18px; } .nr-ctab[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-1); } .nr-ctab[aria-selected="true"] .nr-icon { color: var(--brand); } .nr-cpanel { padding: clamp(20px, 3vw, 34px); } .nr-cpanel + .nr-cpanel { border-top: 1px solid var(--line); } .js [data-tabs] .nr-cpanel:not(.is-active) { display: none; } .js [data-tabs] .nr-cpanel + .nr-cpanel { border-top: 0; } .nr-cpanel:focus-visible { outline-offset: -6px; border-radius: 26px; } .nr-cpanel > h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 720; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.1; letter-spacing: -.016em; color: var(--ink); scroll-margin-top: 150px; } .nr-cpanel__body { margin-top: 10px; font-size: 1.02rem; } /* odkazy na WhatsApp a Messenger v texte panela = čipy s ikonou */ .nr-cpanel--channels a:is([href^="https://wa.me/"], [href^="https://m.me/"]) { display: inline-flex; align-items: center; gap: 7px; margin: 2px 1px; padding: 3px 12px 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; line-height: 1.5; text-decoration: none; vertical-align: middle; transition: border-color .2s, color .2s; } .nr-cpanel--channels a:is([href^="https://wa.me/"], [href^="https://m.me/"]):hover { border-color: var(--brand); color: var(--link); } .nr-cpanel--channels a:is([href^="https://wa.me/"], [href^="https://m.me/"])::before { content: ""; flex: none; width: 17px; height: 17px; background: var(--brand); -webkit-mask: var(--i-wa) center / contain no-repeat; mask: var(--i-wa) center / contain no-repeat; } .nr-cpanel--channels a[href^="https://m.me/"]::before { -webkit-mask-image: var(--i-msg); mask-image: var(--i-msg); } /* ---------- Formulár (Contact Form 7, CSS pluginu sa nenačítava) ---------- */ .wpcf7 { margin-top: 22px; } .wpcf7 form { position: relative; } .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; word-break: normal !important; } .wpcf7 .hidden-fields-container { display: none; } .wpcf7 [inert] { opacity: .5; } .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { direction: ltr; } .wpcf7-form-control-wrap { position: relative; display: block; } .nr-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .nr-form__grid { display: grid; gap: 16px 18px; } @media (min-width: 40em) { .nr-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nr-field--full { grid-column: 1 / -1; } } .nr-prose .nr-field, .nr-field { margin: 0; display: grid; gap: 7px; align-content: start; max-width: none; } .nr-field > label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink); } .nr-req { color: var(--brand-2); font-weight: 700; } .nr-opt { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font: 500 .58rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; min-height: 50px; margin: 0; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 14px; background-color: var(--bg); color: var(--ink); font: 400 1rem/1.4 var(--font-body); transition: border-color .2s, box-shadow .2s, background-color .2s; } textarea.wpcf7-form-control { display: block; min-height: 136px; resize: vertical; line-height: 1.55; } .wpcf7-form-control::placeholder { color: var(--muted); opacity: 1; } .wpcf7-form-control:not(.wpcf7-submit):hover { border-color: var(--muted); } .wpcf7-form-control:not(.wpcf7-submit):focus { outline: none; border-color: var(--brand); background-color: var(--surface); box-shadow: 0 0 0 4px var(--mark); } select.wpcf7-form-control { -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 23px) 52%, calc(100% - 17px) 52%; background-size: 6px 6px; background-repeat: no-repeat; } select.wpcf7-form-control option { background-color: var(--surface); color: var(--ink); } .wpcf7-form-control.wpcf7-not-valid { border-color: var(--danger); } .wpcf7-form-control.wpcf7-not-valid:focus { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 18%, transparent); } .wpcf7-not-valid-tip { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .84rem; font-weight: 550; line-height: 1.35; color: var(--danger); } .wpcf7-not-valid-tip::before { content: "!"; flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 700 .7rem/1 var(--font-mono); color: var(--surface); background: var(--danger); } .wpcf7-turnstile { margin-top: 18px; min-height: 65px; } /* miesto pre widget, kým sa načíta (CLS) */ /* zľavový kód z hry: nápoveda pod poľom; tlačidlá vyzerajú ako odkazy a bez JS sa neukazujú */ /* obe verzie nápovedy stoja v jednej bunke mriežky a prepína sa len viditeľnosť — výška je stále rovnaká (CLS 0), aj keď JS po načítaní zmení stav podľa cookie */ /* Uplatnená zľava: jedna zľava pre celý dopyt (príležitosť alebo hra, platí najvyššia). */ .nr-discount { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand-2); border-radius: 12px; background: var(--mark); color: var(--ink); } .nr-discount[hidden] { display: none; } /* návštevník s cookie zo hry: súhrn odkryje main.js až po načítaní, miesto preňho je vyhradené od prvého vykreslenia (.nrd-disc nastavuje inc/head.php) */ html.nrd-disc .nr-discount[hidden] { display: flex; visibility: hidden; } .nr-discount__k { font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-discount__v { font-family: var(--font-display); font-stretch: 108%; font-weight: 740; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.01em; color: var(--brand); } .nr-discount__l { font-weight: 600; } .nr-discount__n { flex: 1 1 100%; font-size: .82rem; line-height: 1.45; color: var(--muted); } /* Vybraný balík z cenníka: pole len na čítanie (vzhľadom bližšie k informácii než k vstupu); main.js ho skryje, keď sa zmení služba */ .nr-field--pkg[hidden] { display: none; } .nr-field--pkg input[readonly], .nr-field--pkg input[readonly]:focus { background-color: var(--mark); cursor: default; font-weight: 600; } .nr-field__tip { display: grid; font-size: .84rem; line-height: 1.5; color: var(--muted); } .nr-field__tip > span { grid-area: 1 / 1; } .nr-field__tip > .nr-linkbtn { grid-row: 2; justify-self: start; } .nr-field__tip [hidden] { display: inline !important; visibility: hidden; } .nr-field__tip b { color: var(--ink); } .nr-linkbtn { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .nr-linkbtn:hover { color: var(--brand-2); } .nr-linkbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; } html:not(.js) .nr-linkbtn { display: none; } .nr-form__foot { position: relative; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; } .nr-form__foot .wpcf7-submit { margin-left: auto; } @media (max-width: 40em) { .nr-form__foot .wpcf7-submit { width: 100%; } } .nr-prose .nr-form__note, .nr-form__note { flex: 1 1 16rem; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted); } .nr-form__note .nr-req { margin-right: 2px; } .wpcf7-submit.nr-btn { min-height: 52px; padding-inline: 28px; font-size: 1rem; } .wpcf7-submit:disabled { cursor: not-allowed; opacity: .7; } /* spinner vkladá CF7 až skriptom — mimo toku, v pravom okraji tlačidla, aby nič neposunul */ .wpcf7-spinner { visibility: hidden; position: absolute; right: 16px; bottom: 15px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--btn-ink); } .wpcf7 form.submitting .wpcf7-submit { padding-right: 54px; } .wpcf7 form.submitting .wpcf7-spinner { visibility: visible; animation: nr-spin .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .wpcf7 form.submitting .wpcf7-spinner { animation-duration: 2.4s; } } @keyframes nr-spin { to { transform: rotate(360deg); } } .wpcf7 form .wpcf7-response-output { position: relative; margin: 18px 0 0; padding: 13px 16px 13px 46px; border: 1px solid var(--danger); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: .95rem; line-height: 1.5; } .wpcf7 form .wpcf7-response-output::before { content: "!"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--font-mono); color: var(--surface); background: var(--danger); } .wpcf7 form:is(.init, .resetting, .submitting) .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--brand); background: linear-gradient(var(--mark), var(--mark)), var(--surface); } .wpcf7 form.sent .wpcf7-response-output::before { content: "✓"; color: var(--on-grad); background: var(--grad); } /* ---------- Kontakt: kto sa ozve (orbita kanálov s portrétom) ---------- */ /* nižší pás než ostatné (Milo 29. 9.): orbita je vyššia než text, vzduch okolo textu by sa sčítal */ .nr-band--person { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); background: radial-gradient(55% 70% at 18% 50%, var(--aura-1), transparent 70%), var(--bg); overflow: clip; } /* medzera k ďalšej sekcii („Ako prebieha prvý kontakt") na polovicu (Milo 29. 9.) — delí ich len voľné miesto */ .nr-band--person + .nr-band { padding-top: clamp(12px, 1vw, 20px); } .nr-personband { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (min-width: 56em) { .nr-personband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .nr-linkorbit { position: relative; width: min(100%, 400px); aspect-ratio: 1; justify-self: center; } .nr-linkorbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .nr-linkorbit__face { position: absolute; left: 29%; top: 29%; width: 42%; height: 42%; padding: 3px; border-radius: 50%; object-fit: cover; background: var(--grad); box-shadow: var(--shadow-2); display: grid; place-items: center; font: 600 2.4rem/1 var(--font-mono); color: var(--on-grad); } .lo-ring { fill: none; stroke: var(--orbit-faint); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; } .lo-ring--main { stroke: var(--orbit); stroke-dasharray: none; stroke-width: 1.25; } .lo-ticks { fill: none; stroke: var(--orbit-faint); stroke-width: 1; } .lo-halo { fill: var(--halo); } .lo-spoke { stroke: var(--orbit-faint); stroke-width: 1; stroke-dasharray: 3 5; } .lo-pulse { fill: none; stroke: var(--brand); stroke-width: 1.2; opacity: .35; } .lo-node__ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; } .lo-node__core { fill: var(--surface); stroke: var(--brand); stroke-width: 2; } .lo-node .nr-icon { color: var(--brand); } .lo-lbl { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; fill: var(--muted); } .lo-pk { fill: var(--brand-2); opacity: 0; } .lo-pk--out { fill: var(--brand); } @media (prefers-reduced-motion: no-preference) { .lo-spin { animation: o-spin 140s linear infinite; } .lo-pulse { transform-origin: 0 0; animation: lo-pulse 3.2s ease-out infinite; } .lo-pk { animation: lo-pk 3.6s cubic-bezier(.45, 0, .3, 1) var(--d, 0s) infinite; } } @keyframes lo-pk { 0% { transform: translate(var(--x0), var(--y0)); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } } @keyframes lo-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.3); opacity: 0; } } @media (max-width: 30em) { .lo-lbl { display: none; } } .nr-personband__text { display: grid; gap: 14px; justify-items: start; max-width: 36rem; } .nr-personband__text h2 { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 750; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; } .nr-personband__role { margin: -4px 0 0; font: 500 .8rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--brand); } .nr-personband__bio { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--text); } .nr-more { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: 650; text-decoration: none; } .nr-more:hover { color: var(--link-hover); } .nr-more .nr-icon { width: 17px; height: 17px; transition: transform .2s; } .nr-more:hover .nr-icon { transform: translateX(3px); } /* ---------- Panel „Konzultácia zadarmo" nad pätičkou HUB-u, sila a cenníka ---------- */ .nr-ctaband { position: relative; padding-block: clamp(44px, 6vw, 88px); border-top: 1px solid var(--line); background: var(--bg); } .nr-ctaband__panel { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 30px; padding: clamp(24px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(66px, 7vw, 86px); border: 1.5px solid transparent; border-radius: 30px; background: radial-gradient(70% 120% at 0% 0%, var(--aura-1), transparent 65%) padding-box, radial-gradient(55% 90% at 100% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-2); } .nr-ctaband__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 50% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 50% 80% at 100% 0%, #000, transparent 70%); } @media (min-width: 62em) { .nr-ctaband__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } } .nr-ctaband h2 { margin: 12px 0 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 750; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); line-height: 1.04; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; } .nr-ctaband__main > p { margin: 14px 0 0; max-width: 34em; font-size: 1.08rem; line-height: 1.62; color: var(--text); } .nr-ctaband__go { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .nr-ctaband__go .nr-btn { min-height: 54px; padding-inline: 30px; font-size: 1.05rem; } .nr-ctaband__who { display: inline-flex; align-items: center; gap: 12px; line-height: 1.25; } .nr-ctaband__who small { display: block; font: 500 .62rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-ctaband__who b { display: block; color: var(--ink); font-weight: 650; } .nr-avatar--ring { width: 46px; height: 46px; padding: 2px; background: var(--grad); } .nr-ctaband__t { margin: 0 0 12px; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* dva stĺpce len tam, kde sa e-mail zmestí na riadok; inak pod sebou */ .nr-channels--band { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } /* signál na spodku panela sa vykreslí, keď panel príde do okna (len CSS) */ .nr-ctaband__signal { position: absolute; left: clamp(20px, 4vw, 52px); right: clamp(20px, 4vw, 52px); bottom: clamp(18px, 2.4vw, 28px); height: clamp(24px, 3vw, 34px); background: var(--grad); -webkit-mask: var(--signal) center / 100% 100% no-repeat; mask: var(--signal) center / 100% 100% no-repeat; opacity: .85; pointer-events: none; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .nr-ctaband__signal { animation: nr-wave-in linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; } } } /* ---------- Pätička (tmavá v oboch témach) ---------- */ .nr-footer { background: var(--f-bg); color: var(--f-text); position: relative; overflow: clip; isolation: isolate; color-scheme: dark; } .nr-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170'%3E%3Cg fill='none' stroke='%23A98BFF' stroke-opacity='.16'%3E%3Cpath d='M12 24L84 62L166 34L248 80M84 62L70 138L154 120L166 34M154 120L236 156M248 80L236 156M70 138L0 160'/%3E%3C/g%3E%3Cg fill='%23A98BFF' fill-opacity='.35'%3E%3Ccircle cx='12' cy='24' r='2'/%3E%3Ccircle cx='84' cy='62' r='2'/%3E%3Ccircle cx='166' cy='34' r='2'/%3E%3Ccircle cx='248' cy='80' r='2'/%3E%3Ccircle cx='70' cy='138' r='2'/%3E%3Ccircle cx='154' cy='120' r='2'/%3E%3Ccircle cx='236' cy='156' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 170px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); opacity: .8; } .nr-footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #A98BFF, #D29BFF, #F28DBA, transparent); opacity: .6; } .nr-footer a { color: var(--f-text); text-decoration: none; } .nr-footer a:hover { color: #FFFFFF; } .nr-footer__grid { display: grid; gap: 36px; padding-block: 64px 44px; } @media (min-width: 56em) { .nr-footer__grid { grid-template-columns: 1.35fr 1fr .8fr 1.2fr; } } .nr-footer__brand { display: grid; gap: 18px; align-content: start; justify-items: start; } .nr-footer .nr-logo { color: #A98BFF; } .nr-footer__brand p { margin: 0; max-width: 22.6em; font-size: .98rem; line-height: 1.55; } .nr-footer .nr-btn { --btn-edge: initial; --btn-fill: #1B1B1E; --btn-ink: #E3E3E3; --r1: #A98BFF; --r2: #D29BFF; --r3: #F28DBA; --btn-shadow: 0 0 22px -6px rgb(169 139 255 / .35), 0 0 44px -14px rgb(242 141 186 / .30); --btn-glow: 0 0 28px -4px rgb(169 139 255 / .5), 0 0 56px -10px rgb(242 141 186 / .4); } .nr-footer .nr-btn:hover { color: #E3E3E3; } .nr-footer .nr-profiles { display: flex; gap: 8px; margin-top: 2px; } .nr-footer .nr-profiles a { background: transparent; border-color: var(--f-line); color: var(--f-text); } .nr-footer .nr-profiles a:hover { border-color: #A98BFF; color: #FFFFFF; } .nr-footer .nr-profiles .nr-icon { color: #A98BFF; } .nr-footer h2 { margin: 0 0 14px; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--f-muted); } .nr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; } .nr-footer dl { margin: 0; display: grid; gap: 10px; font-size: .95rem; } .nr-footer dt { font: 500 .6rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--f-muted); } .nr-footer dd { margin: 2px 0 0; color: var(--f-ink); } .nr-footer__bar { border-top: 1px solid var(--f-line); padding-block: 18px 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: .84rem; color: var(--f-muted); } .nr-footer__bar ul { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; } .nr-footer__coords { margin-inline-start: auto; font: 400 .66rem/1.3 var(--font-mono); letter-spacing: .05em; color: var(--f-muted); display: inline-flex; gap: 8px; align-items: center; } .nr-footer__coords i { width: 7px; height: 7px; border-radius: 50%; background: #A98BFF; box-shadow: 0 0 0 3px rgb(169 139 255 / .18); } .nr-pi { appearance: none; border: 0; background: none; padding: 6px 8px; margin: -6px -8px -6px 2px; border-radius: 6px; font: 600 1rem/1 var(--font-display); color: var(--f-muted); opacity: .5; cursor: pointer; transition: opacity .2s, color .2s, text-shadow .2s; } .nr-pi:hover, .nr-pi:focus-visible { opacity: 1; color: #F28DBA; text-shadow: 0 0 14px rgb(242 141 186 / .8); } /* ---------- Obmedzenie pohybu ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .o-sats, .o-pulse { animation: none; } .nr-btn:hover, .wp-block-button__link:hover { animation: none; transform: none; } .nr-card, .nr-prose .nr-back, .nr-prose .wp-block-details summary::after, .nr-prose .wp-block-details::details-content, .nr-skip, .nr-tab, .nr-tab::before, .nr-silo, .nr-hubcard__head .nr-icon--arrow, .nr-channel, .nr-profiles a, .nr-ctab, .nr-more .nr-icon, .nr-cbtn, .nr-voice-tab, .nr-voice-tab__mono, .nr-voices__bar i, .nr-mode__thumb, .nr-mode__icon, .nr-ptab, .nr-bill, .nr-pricechip, .nr-pricechip__t .nr-icon,.nr-sheet__prices a { transition: none; } .nr-pricechip:hover .nr-icon { transform: none; } .nr-card:hover, .nr-tab:hover, .nr-silo:hover, .nr-channel:hover, .nr-profiles--icons a:hover, .nr-more:hover .nr-icon, .nr-cbtn:hover:not(:disabled) { transform: none; } .nr-step::after { display: none; } .r-ping, .nr-radar__sweep { animation: none; } .r-ping { opacity: .5; transform: scale(2.2); } .nr-sheet, .nr-sheet__hubs li, .nr-burger[aria-expanded="true"]::before, .nr-burger:hover::before { animation: none; } .nr-burger::before, .nr-burger__lines i, .nr-header::after, .nr-header.is-open::after, .nr-sheet__links a .nr-icon { transition: none; } .nr-sheet__links a:hover .nr-icon { transform: none; } } /* ---------- Tlač ---------- */ @media print { .nr-header, .nr-footer, .nr-rail, .nr-proof, .nr-orbit, .nr-traj, .nr-postnav, .nr-radar, .nr-board, .nr-tabs__list, .nr-claims__meter, .nr-claim__meta, .nr-wave, .nr-ctaband, .nr-linkorbit, .nr-console__bar, .nr-channels--quick, .nr-status, .nr-profiles, .nr-clients, .nr-pricing__tabs, .nr-billing { display: none !important; } .js .nr-tabpanel:not(.is-active), .js [data-tabs] > .nr-pricing-set:not(.is-active) { display: grid !important; } .js [data-tabs] .nr-cpanel:not(.is-active) { display: block !important; } .nr-voices__nav, .nr-voices__ctrl, .nr-gr__ctrl { display: none !important; } .nr-voices__track, .nr-reviews { display: grid !important; overflow: visible !important; gap: 16px; } .nr-hero::before, .nr-hero::after, .nr-band--claims::before, .nr-band--claims::after { display: none; } body { background: #fff; color: #000; } .nr-band--claims { background: none; } .nr-claim h3 { color: #000 !important; text-shadow: none !important; } } /* ---------- Prehľad „Čo všetko robíme" na cenníkoch: zelené fajky, nie rozsah balíka (Milo 2. 10. 2026) ---------- */ .nr-prose--page > .is-style-nr-offer { max-width: var(--nr-width-wide); } /* flex namiesto mriežky: neúplný posledný rad (napr. jedna karta) sa vycentruje, karty majú rovnakú šírku */ .nr-prose .is-style-nr-offer { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .nr-prose .is-style-nr-offer > .nr-offer__cat { flex: 0 1 calc((100% - 28px) / 3); } @media (max-width: 61.99em) { .nr-prose .is-style-nr-offer > .nr-offer__cat { flex-basis: calc((100% - 14px) / 2); } } @media (max-width: 39.99em) { .nr-prose .is-style-nr-offer > .nr-offer__cat { flex-basis: 100%; } } .nr-prose .is-style-nr-offer > * { margin: 0; min-width: 0; } .nr-prose .nr-offer__cat { padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); } .nr-prose .nr-offer__cat > * { margin: 0; } .nr-prose .nr-offer__cat > .wp-block-heading { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.06rem; line-height: 1.25; } .nr-prose .is-style-nr-offer-list { list-style: none; padding: 0; display: grid; gap: 9px; font-size: .94rem; line-height: 1.45; } .nr-prose .is-style-nr-offer-list li { position: relative; margin: 0; padding-left: 28px; } .nr-prose .is-style-nr-offer-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 19px; height: 19px; border-radius: 50%; background: rgb(26 157 82 / .14); box-shadow: inset 0 0 0 1px rgb(26 157 82 / .4); } .nr-prose .is-style-nr-offer-list li::after { content: ""; position: absolute; left: 6px; top: calc(.1em + 5.5px); width: 8px; height: 4.5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); } @media not (prefers-color-scheme: light) { :root:not([data-theme="light"]) .nr-prose .is-style-nr-offer-list li::before { background: rgb(74 222 128 / .14); box-shadow: inset 0 0 0 1px rgb(74 222 128 / .4); } } :root[data-theme="dark"] .nr-prose .is-style-nr-offer-list li::before { background: rgb(74 222 128 / .14); box-shadow: inset 0 0 0 1px rgb(74 222 128 / .4); } .nr-prose .nr-offer-note { margin-block-start: 1.6em; padding-left: 16px; border-left: 2px solid var(--line-2); font-size: .84rem; line-height: 1.65; color: var(--muted); } .nr-prose .nr-offer-note::before { content: "// poznámka"; content: "// poznámka" / ""; display: block; margin-bottom: 6px; font: 500 .64rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } /* ---------- Odznak Google Partner: oficiálny odznak sa nemení, upravuje sa len veľkosť a okolie (Milo 2. 10. 2026) ---------- */ .nr-partner { display: flex; align-items: center; gap: 14px; } .nr-partner__badge { flex: none; display: block; width: 92px; border-radius: 4px; line-height: 0; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .25s ease; } .nr-partner__badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .nr-partner__badge img { display: block; width: 100%; height: auto; aspect-ratio: 152 / 146; } .nr-partner__txt { margin: 0; display: grid; gap: 3px; font-size: .86rem; line-height: 1.4; color: var(--muted); } .nr-partner__txt b { color: var(--ink); font-weight: 650; font-size: .95rem; } .nr-partner--foot { margin-top: 20px; gap: 12px; } .nr-partner--foot .nr-partner__badge { width: 72px; box-shadow: 0 0 0 1px var(--f-line); } .nr-partner--foot .nr-partner__txt { color: var(--f-muted); font-size: .8rem; } .nr-partner--foot .nr-partner__txt b { color: var(--f-ink); font-size: .88rem; } .nr-prose .nr-partner-wrap { margin-block-start: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--line); } @media print { .nr-partner { display: none; } } /* ---------- Poradca: pás pod „Čo pre vás robíme" a pruh „Z poradcu" vo formulári (inc/poradca.php, assets/js/poradca.js) ---------- */ html:not(.js) .nr-advband { display: none; } /* poradca je skript; bez JS by tlačidlo viedlo len na formulár */ .nr-advband { padding-block: 0 clamp(44px, 5.4vw, 80px); } .nr-band--tabs + .nr-advband { margin-top: calc(clamp(56px, 7vw, 104px) / -2); } /* medzera nad pásom je polovica spodného odsadenia sekcie s tabmi (Milo 2. 10. 2026) */ .nr-advband__panel { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 20px 36px; align-items: center; padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.6vw, 48px); border: 1.5px solid transparent; border-radius: 28px; background: radial-gradient(70% 140% at 0% 0%, var(--aura-1), transparent 65%) padding-box, radial-gradient(50% 120% at 100% 100%, var(--aura-2), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: var(--shadow-1); } .nr-advband__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 45% 90% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 45% 90% at 100% 0%, #000, transparent 70%); } @media (min-width: 56em) { .nr-advband__panel { grid-template-columns: auto minmax(0, 1fr) auto; } } .nr-advband__orb { display: none; } @media (min-width: 56em) { .nr-advband__orb { display: block; width: 96px; height: 96px; } } .nr-advband__orb svg { display: block; width: 100%; height: 100%; overflow: visible; } .nr-advband__ring { fill: none; stroke: var(--orbit); stroke-width: 1.2; } .nr-advband__ring--b { stroke: var(--orbit-faint); } .nr-advband__ring--c { stroke: var(--orbit-faint); stroke-dasharray: 2 4; } .nr-advband__sat circle { fill: var(--sat); } .nr-advband__sat { transform-origin: 60px 60px; } .nr-advband__sat--b circle { fill: var(--brand); } @media (prefers-reduced-motion: no-preference) { .nr-advband__sat { animation: nr-orbit 9s linear infinite; } .nr-advband__sat--b { animation-duration: 5.5s; animation-direction: reverse; } } @keyframes nr-orbit { to { transform: rotate(360deg); } } .nr-advband__main > h2 { margin: 12px 0 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 750; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; } .nr-advband__main > p { margin: 10px 0 0; max-width: 38em; font-size: 1.04rem; line-height: 1.6; color: var(--text); } .nr-advband__go { display: grid; justify-items: start; gap: 10px; } @media (min-width: 56em) { .nr-advband__go { justify-items: center; } } .nr-advband__go small { font: 500 .64rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-btn--lg { min-height: 56px; padding-inline: 30px; font-size: 1.05rem; } .nr-btn--lg:hover { animation: nr-ang 2.8s linear infinite; } /* pruh „Z poradcu" vo formulári Kontakt: veta s výsledkom; miesto sa vyhradí už pri prvom vykreslení (html.nrd-adv z inc/head.php), aby formulár neposkočil */ .nr-field.nr-adv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; background: var(--mark); color: var(--ink); } .nr-field.nr-adv[hidden] { display: none; } html.nrd-adv .nr-field.nr-adv[hidden] { display: flex; visibility: hidden; } .nr-adv__k { font: 500 .66rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nr-adv__t { font-weight: 650; } .nr-adv__x { margin-left: auto; font-size: .88rem; } .nr-adv__n { flex: 1 1 100%; font-size: .82rem; line-height: 1.45; color: var(--muted); } /* ---------- Tlačidlo poradcu v menu (Milo 2. 10. 2026): v rozbaľovacom menu Služby pod „Všetky služby" a v mobilnom menu pod dlaždicami služieb ---------- Vyplnené gradientom (tokeny --adv-*), aby sa odlíšilo od obrysových položiek okolo; otvára okno poradcu (data-poradca, main.js). */ html:not(.js) .nr-advlink { display: none !important; } .nr-advlink { display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--adv-fill); color: var(--adv-ink); text-decoration: none; box-shadow: var(--adv-glow); transition: transform .2s ease, box-shadow .3s ease; } .nr-advlink > .nr-icon:last-child { flex: none; width: 16px; height: 16px; margin-left: auto; transition: transform .2s; } .nr-advlink small { display: block; font: 500 .66rem/1.3 var(--font-mono); letter-spacing: .02em; opacity: .92; } .nr-advlink :is(.nr-mega__ico, .nr-sheet__ico) { background: color-mix(in oklab, var(--adv-ink) 20%, transparent); color: var(--adv-ink); box-shadow: none; } .nr-nav .nr-mega__panel a.nr-advlink { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 16px 10px 12px; border-radius: 14px; color: var(--adv-ink); } .nr-nav .nr-mega__panel a.nr-advlink:hover { background: var(--adv-fill); color: var(--adv-ink); } /* prebije .nr-nav a:hover (svetlé pozadie by zhasol biele písmo) */ .nr-nav .nr-mega__panel a.nr-advlink b { color: var(--adv-ink); } .nr-nav .nr-mega__panel a.nr-advlink small { color: var(--adv-ink); } .nr-sheet__hubs li.nr-sheet__adv { grid-column: 1 / -1; } .nr-sheet__hubs a.nr-advlink { min-height: 62px; padding: 8px 16px 8px 8px; border: 0; border-radius: 16px; background: var(--adv-fill); color: var(--adv-ink); font-size: .95rem; box-shadow: var(--adv-glow); } .nr-advlink__t { display: grid; gap: 2px; } .nr-advlink__t small { color: var(--adv-ink); } @media (hover: hover) { .nr-advlink:hover, .nr-sheet__hubs a.nr-advlink:hover { transform: translateY(-1px); box-shadow: var(--adv-glow-2); } .nr-advlink:hover > .nr-icon:last-child { transform: translateX(3px); } } @media (prefers-reduced-motion: reduce) { .nr-advlink, .nr-advlink > .nr-icon:last-child { transition: none; } .nr-advlink:hover { transform: none; } } /* Hero titulky na mobile (Milo 2. 10. 2026): „Konzultácia" je už v hlavičke vedľa menu a HUB-y / Silá / Články len zaberajú miesto — na telefóne (pod 48 em) sa nezobrazujú. Hodnotenie z Google ostáva. Tlačidlo v hlavičke a telemetria na HUB-och a silách sa nemenia. */ @media (max-width: 47.99em) { .nr-hero--home .nr-hero__cta .nr-btn--consult, .nr-hero--home .nr-hero__proof .nr-telemetry { display: none; } } /* Orbita na telefóne (do 38 em, kde sa popisky v orbite skrývajú; Milo 2. 10. 2026): bez textov nemá logické opodstatnenie, preto sa nezobrazuje. Na titulke ide preč celá (čipy sa tam nezobrazujú už od rána — HUB-y sú v sekcii „Čo pre vás robíme"). Na HUB-och, silách a Službách sa skryje len obrázok a ostane zoznam čipov, ktorý je tam jediným odkazovým zoznamom. Tablet (od 38 em) a desktop sa nemenia: orbita s popiskami. Dnešné ranné pravidlá pre medzery okolo orbity na titulke (−50 % hore, −20 % čipy) tým odpadli. Pohyb orbity (motion.js) sa pri skrytej orbite sám pozastaví (IntersectionObserver) a hviezdy v hero (space.js, len od 64 em) sa na mobile nekreslia. */ @media (max-width: 38em) { .nr-hero--home .nr-orbit { display: none; } .nr-orbit .o-svg { display: none; } .nr-orbit__list { margin-top: 0; } } /* blog: riadky a tlačidlo „Načítať ďalšie“ bez pohybu */ @media (prefers-reduced-motion: reduce) { .nr-row, .nr-row::before, .nr-row__vis svg, .nr-row__go .nr-icon, .nr-loadmore__btn { transition: none; } .nr-row:hover, .nr-loadmore__btn:hover { transform: none; } .nr-row:hover .nr-row__vis svg, .nr-row:hover .nr-row__go .nr-icon { transform: none; } } /* najnovší článok blogu: plný gradientový pás vľavo, gradientový rám a farebný podklad — odlíšený nielen veľkosťou */ .nr-row--lead { border: 2px solid transparent; background: radial-gradient(520px circle at var(--mx, 85%) var(--my, -10%), var(--spot), transparent 50%) padding-box, linear-gradient(135deg, var(--aura-1), var(--aura-2) 140%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 18px 44px -18px rgb(178 41 255 / .45), 0 6px 18px -10px rgb(222 38 131 / .35); } .nr-row--lead:hover { border-color: transparent; box-shadow: 0 24px 54px -18px rgb(178 41 255 / .6), 0 8px 22px -10px rgb(222 38 131 / .5); } .nr-row--lead:focus-within { border-color: transparent; } .nr-row--lead::before { display: none; } .nr-row--lead .nr-row__vis { border: 0; background: var(--grad); } .nr-row--lead .nr-row__vis svg rect { fill: var(--on-grad); } .nr-row--lead .nr-row__n { color: var(--on-grad); background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; } .nr-row--lead .nr-row__badge { background: var(--on-grad); color: var(--brand); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45); } .nr-row--lead .nr-row__cat { color: var(--brand-2); } .nr-row--lead .nr-row__go { color: var(--brand-2); } /* Cenníky: zvýraznený blok „Čo nie je zahrnuté v cene" (platby tretím stranám) */ .nr-prose .nr-extra-costs { margin-block: 2em; padding: 20px 22px; border: 1px solid var(--brand-2); border-left-width: 4px; border-radius: 10px; background: color-mix(in srgb, var(--brand-2) 8%, var(--surface)); } .nr-prose .nr-extra-costs > * + * { margin-block-start: .8em; } .nr-prose .nr-extra-costs__title { margin: 0; font: 600 .78rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2); } .nr-prose .nr-extra-costs__title::before { content: "! "; font-weight: 700; } .nr-prose .nr-extra-costs ul { margin: 0; padding-left: 1.2em; } .nr-prose .nr-extra-costs li + li { margin-block-start: .35em; } /* ---------- Chat bublina vpravo dole (inc/chat.php, správanie v main.js) ---------- Malá, ale viditeľná: gradient poradcu (--adv-*) a satelit na obežnej dráhe. V pokoji sa bublina jemne vznáša po kruhu, po kliknutí sa nad ňou postupne vyrolujú kanály (zavolať, Messenger, WhatsApp). Bez JS sa nezobrazuje (kanály sú v pätičke a na Kontakte). */ html:not(.js) .nr-chat { display: none; } .nr-chat { position: fixed; z-index: 40; right: max(26px, env(safe-area-inset-right)); bottom: max(51px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; } .nr-chat > * { pointer-events: auto; } .nr-chat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: end; visibility: hidden; transition: visibility 0s .3s; } .nr-chat.is-open .nr-chat__list { visibility: visible; transition-delay: 0s; } .nr-chat__list li { opacity: 0; transform: translateY(26px) scale(.4); transform-origin: 100% 100%; transition: opacity .2s ease calc(var(--i) * 30ms), transform .22s ease calc(var(--i) * 30ms); } .nr-chat.is-open .nr-chat__list li { opacity: 1; transform: none; transition: opacity .25s ease calc(var(--rev) * 70ms + 60ms), transform .5s cubic-bezier(.3, 1.4, .5, 1) calc(var(--rev) * 70ms + 60ms); } .nr-chat__list li:nth-child(1) { --rev: 2; } .nr-chat__list li:nth-child(2) { --rev: 1; } .nr-chat__list li:nth-child(3) { --rev: 0; } /* vyroluje sa od bubliny nahor */ .nr-chat__act { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; color: var(--ink); font: 650 .9rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-2); transition: transform .2s ease, box-shadow .3s ease; } .nr-chat__act:hover { color: var(--ink); box-shadow: var(--adv-glow-2); } .nr-chat__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--adv-fill); color: var(--adv-ink); } .nr-chat__ico .nr-icon { width: 19px; height: 19px; } .nr-chat__fab { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--adv-fill); color: var(--adv-ink); cursor: pointer; box-shadow: var(--adv-glow), 0 0 0 4px var(--bg); transition: box-shadow .3s ease; } .nr-chat__fab:hover { box-shadow: var(--adv-glow-2), 0 0 0 4px var(--bg); } .nr-chat__fab:focus-visible, .nr-chat__act:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .nr-chat__icons { position: relative; display: grid; place-items: center; width: 26px; height: 26px; } .nr-chat__icons .nr-icon { grid-area: 1 / 1; width: 26px; height: 26px; transition: transform .35s cubic-bezier(.3, 1.35, .5, 1), opacity .2s; } .nr-chat__icons .nr-icon--close { opacity: 0; transform: rotate(-90deg) scale(.5); } .nr-chat.is-open .nr-chat__icons .nr-icon--chat { opacity: 0; transform: rotate(90deg) scale(.5); } .nr-chat.is-open .nr-chat__icons .nr-icon--close { opacity: 1; transform: none; } /* obežná dráha: slabý prstenec okolo bubliny a satelit, ktorý po ňom krúži */ .nr-chat__sat { position: absolute; inset: -9px; border: 1.2px dashed var(--orbit); border-radius: 50%; pointer-events: none; transition: opacity .25s; } .nr-chat__sat i { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--sat); box-shadow: 0 0 0 2px var(--bg); } .nr-chat.is-open .nr-chat__sat { opacity: 0; } @media (hover: hover) { .nr-chat__act:hover { transform: translateX(-3px); } } @media (prefers-reduced-motion: no-preference) { .nr-chat__fab { animation: nr-chat-float 7s linear infinite; } .nr-chat.is-open .nr-chat__fab, .nr-chat__fab:hover { animation-play-state: paused; } .nr-chat__sat { animation: nr-orbit 6s linear infinite; } } @keyframes nr-chat-float { 0%, 100% { transform: translate(0, -4px); } 25% { transform: translate(4px, 0); } 50% { transform: translate(0, 4px); } 75% { transform: translate(-4px, 0); } } @media (prefers-reduced-motion: reduce) { .nr-chat__list, .nr-chat__list li, .nr-chat__act, .nr-chat__icons .nr-icon { transition: none; } .nr-chat__act:hover { transform: none; } } @media (max-width: 30em) { .nr-chat__act { font-size: .86rem; } } @media print { .nr-chat { display: none; } }