/* ===================================================================== AI pre všetkých — landing page Čisté CSS (Bootstrap 5 z CDN len na grid/utility/accordion/navbar). ===================================================================== */ :root { --bg: #05060a; --bg-2: #090b12; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --text: #eef1f7; --muted: #9aa3b5; --cyan: #22d3ee; --violet: #a78bfa; --gold: #fbbf24; --rose: #fb7185; --green: #34d399; --grad: linear-gradient(120deg, #22d3ee 0%, #a78bfa 50%, #fbbf24 100%); --grad-soft: linear-gradient(120deg, rgba(34, 211, 238, .18), rgba(167, 139, 250, .18)); --panel: rgba(11, 13, 21, .9); --line: linear-gradient(155deg, rgba(255,255,255,.3), rgba(255,255,255,.07) 30%, rgba(255,255,255,.04) 70%, rgba(34,211,238,.3)); --tick: rgba(34,211,238,.85); --r-cut: 6px 26px 6px 26px; --r-cut-sm: 4px 16px 4px 16px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 22px; --radius-sm: 14px; --ease: cubic-bezier(.2, .7, .2, 1); --nav-h: 72px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(34, 211, 238, .35); color: #fff; } a { color: var(--cyan); text-decoration: none; } a:hover { color: #fff; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } code { font-family: var(--mono); font-size: .85em; background: rgba(255,255,255,.08); padding: .1em .4em; border-radius: 6px; color: #dbeafe; } .tiny { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; } .narrow { max-width: 880px; } /* ---------- globálne efekty ---------- */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .progress-bar-top { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1100; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); } .cursor-glow { position: fixed; left: 0; top: 0; width: 520px; height: 520px; z-index: 0; pointer-events: none; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 211, 238, .16) 0%, rgba(167, 139, 250, .08) 35%, transparent 65%); transition: opacity .6s; } body.has-cursor .cursor-glow { opacity: 1; } .glow-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: .55; animation: blobFloat 18s ease-in-out infinite alternate; } .blob-1 { width: 620px; height: 620px; right: -200px; top: -100px; background: radial-gradient(circle, rgba(167,139,250,.35), transparent 65%); } .blob-2 { width: 700px; height: 700px; left: -260px; bottom: -200px; background: radial-gradient(circle, rgba(34,211,238,.28), transparent 65%); animation-delay: -6s; } .blob-3 { width: 800px; height: 800px; right: -300px; top: 30%; background: radial-gradient(circle, rgba(251,191,36,.18), transparent 65%); animation-delay: -12s; } @keyframes blobFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px, -40px, 0) scale(1.15); } } /* ---------- typografia ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; } .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2s infinite; } .grad-text { background: var(--grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 6s ease infinite; } @keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .display-title { font-size: clamp(2.3rem, 5vw, 4.2rem); margin: 0 0 1.2rem; } .section-title { font-size: clamp(2rem, 4vw, 3.3rem); margin: 0 0 1.2rem; } .lead-text, .section-lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--muted); max-width: 720px; } .lead-text strong, .section-lead strong { color: var(--text); } .section { position: relative; padding: clamp(80px, 10vw, 140px) 0; } .section-head { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; } .section-head .section-lead { margin: 0 auto; } /* split-text (JS obalí písmená do spanov) */ .split .w { display: inline-block; white-space: nowrap; } .split .ch { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(6deg); transition: opacity .6s var(--ease), transform .7s var(--ease); } .split.in .ch { opacity: 1; transform: none; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* ---------- tlačidlá ---------- */ .btn { border-radius: 999px; font-weight: 700; letter-spacing: .01em; transition: transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s; } .btn-lg { padding: .95rem 1.7rem; font-size: 1.05rem; } .btn-glow { position: relative; overflow: hidden; color: #061018; border: 0; background: linear-gradient(120deg, #67e8f9, #22d3ee 40%, #a78bfa); box-shadow: 0 10px 40px -10px rgba(34, 211, 238, .7), inset 0 1px 0 rgba(255,255,255,.4); } .btn-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); } .btn-glow:hover { color: #061018; transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(34, 211, 238, .9); } .btn-glow:hover::after { transform: translateX(120%); } .btn-glow .arrow { display: inline-block; transition: transform .3s var(--ease); } .btn-glow:hover .arrow { transform: translateX(4px); } .btn-ghost { color: var(--text); border: 1px solid var(--border-strong); background: rgba(255,255,255,.04); backdrop-filter: blur(8px); } .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); transform: translateY(-2px); } /* ---------- dizajnový systém panelov (HUD štýl: gradientová linka, seknuté rohy, rohové značky, mono indexy) ---------- Každý panel skladá pozadie z 3 vrstiev: --pt (farebný nádych) + --pb (podklad) v padding-boxe a --pl (linka) v border-boxe. Varianty menia iba custom properties, nie background – preto sa nič nebije. */ .feature, .power, .bento-item, .who-card, .who-hero, .vs-bars, .gap-end, .compare-card, .honest, .included, .ai-variant, .cta-box, .price-card, .tl-body, .contact-form, .chain-meter div, .chain-node, .deal-strip, .project-card, .author-card { --pt: linear-gradient(transparent, transparent); --pb: linear-gradient(var(--panel), var(--panel)); --pl: var(--line); position: relative; border: 1px solid transparent; background: var(--pt) padding-box, var(--pb) padding-box, var(--pl) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -50px rgba(0,0,0,.9); } .feature::after, .power::after, .bento-item::after, .who-card::after, .vs-bars::after, .compare-card::after, .honest::after, .included::after, .ai-variant::after, .cta-box::after, .price-card::after, .tl-body::after, .contact-form::after, .deal-strip::after, .author-card::after, .project-card::after { content: ""; position: absolute; inset: 9px; pointer-events: none; opacity: .55; z-index: 2; transition: opacity .4s, inset .4s var(--ease); background: linear-gradient(var(--tick), var(--tick)) top left / 14px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) top left / 1px 14px no-repeat, linear-gradient(var(--tick), var(--tick)) bottom right / 14px 1px no-repeat, linear-gradient(var(--tick), var(--tick)) bottom right / 1px 14px no-repeat; } .feature:hover::after, .power:hover::after, .bento-item:hover::after, .who-card:hover::after, .cta-box:hover::after, .compare-card:hover::after, .price-card:hover::after, .price-card.selected::after, .tl-item.lit .tl-body::after, .project-card:hover::after, .author-card:hover::after { opacity: 1; inset: 5px; } .icon-tile, .feature-icon, .who-icon, .bento-icon { width: 52px; height: 52px; border-radius: 4px 16px 4px 16px; display: grid; place-items: center; font-size: 1.45rem; margin-bottom: 1rem; border: 1px solid transparent; background: linear-gradient(#0d1019, #0d1019) padding-box, var(--tile, var(--grad)) border-box; box-shadow: 0 0 30px -10px var(--tick), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .4s var(--ease), box-shadow .4s; } .feature:hover .feature-icon, .who-card:hover .who-icon, .bento-item:hover .bento-icon { transform: rotate(-6deg) scale(1.06); box-shadow: 0 0 40px -8px var(--tick), inset 0 1px 0 rgba(255,255,255,.1); } .idx { position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: rgba(255,255,255,.3); } /* ---------- nav ---------- */ .site-nav { padding: 14px 0; transition: background .4s, padding .4s, box-shadow .4s, border-color .4s; border-bottom: 1px solid transparent; z-index: 1050; } .site-nav.scrolled { padding: 8px 0; background: rgba(5, 6, 10, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--border); box-shadow: 0 10px 40px -20px rgba(0,0,0,.8); } .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.01em; } .brand em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-mark { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 180deg, #22d3ee, #a78bfa, #fbbf24, #22d3ee); box-shadow: 0 0 20px rgba(34,211,238,.6); animation: spin 8s linear infinite; position: relative; } .brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg); } @keyframes spin { to { transform: rotate(360deg); } } .site-nav .nav-link { color: var(--muted); font-weight: 600; font-size: .95rem; padding: .5rem .8rem; position: relative; } .site-nav .nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; } .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); } .navbar-toggler { border-color: var(--border-strong); } .navbar-collapse.show, .navbar-collapse.collapsing { background: rgba(5,6,10,.95); margin: 12px -12px 0; padding: 12px 20px 20px; border-radius: 16px; border: 1px solid var(--border); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 36px) 0 80px; overflow: hidden; overflow: clip; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; filter: saturate(1.15); } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(5,6,10,.25), rgba(5,6,10,.9) 70%), linear-gradient(to bottom, rgba(5,6,10,.35), var(--bg) 96%); } .hero-inner { position: relative; } .hero-typed { font-family: var(--mono); font-size: clamp(.95rem, 1.4vw, 1.15rem); color: #c7f9ff; background: rgba(8, 12, 20, .55); border: 1px solid rgba(34,211,238,.25); border-radius: 12px; padding: .8rem 1.1rem; display: inline-flex; gap: .5rem; align-items: center; margin: 1.4rem 0 2rem; min-height: 3.2rem; max-width: 100%; box-shadow: 0 0 40px -10px rgba(34,211,238,.35); backdrop-filter: blur(6px); } .hero-typed .prompt-sign { color: var(--cyan); } .hero-typed .caret { width: 9px; height: 1.2em; background: var(--cyan); display: inline-block; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.6rem; } .hero-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 760px; } .hero-stats li { display: flex; flex-direction: column; gap: .15rem; padding-left: 1rem; border-left: 1px solid var(--border-strong); } .hero-stats strong { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .hero-stats span:not([data-count]) { color: var(--muted); font-size: .85rem; } .hero-card { position: relative; perspective: 1000px; } .chat-window { border-radius: var(--radius); background: rgba(12, 15, 24, .75); border: 1px solid var(--border-strong); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset; overflow: hidden; transform-style: preserve-3d; } .chat-head, .terminal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--muted); } .chat-head span, .terminal-head span { width: 11px; height: 11px; border-radius: 50%; background: #3a3f4d; } .chat-head span:nth-child(1), .terminal-head span:nth-child(1) { background: #ff5f57; } .chat-head span:nth-child(2), .terminal-head span:nth-child(2) { background: #febc2e; } .chat-head span:nth-child(3), .terminal-head span:nth-child(3) { background: #28c840; } .chat-head em, .terminal-head em { margin-left: auto; font-style: normal; font-family: var(--mono); } .chat-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .msg { padding: .75rem 1rem; border-radius: 16px; font-size: .95rem; line-height: 1.5; max-width: 92%; } .msg.user { background: rgba(34,211,238,.14); border: 1px solid rgba(34,211,238,.25); align-self: flex-end; border-bottom-right-radius: 4px; } .msg.ai { background: rgba(255,255,255,.06); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; } .msg.live { align-self: flex-start; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.35); color: #a7f3d0; font-family: var(--mono); font-size: .85rem; display: flex; align-items: center; gap: .5rem; } .msg.faded { opacity: .55; } .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulseRing 1.8s infinite; display: inline-block; } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 100% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .float-chip { position: absolute; padding: .5rem .9rem; border-radius: 999px; background: rgba(12,15,24,.85); border: 1px solid var(--border-strong); font-size: .85rem; font-weight: 700; box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); animation: floatY 6s ease-in-out infinite; transform: translateZ(40px); } .chip-a { top: -18px; left: -30px; } .chip-b { right: -24px; top: 38%; animation-delay: -2s; } .chip-c { bottom: -18px; left: 12%; animation-delay: -4s; } @keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; display: block; } .scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s infinite; } @keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(16px); } } /* ---------- marquee ---------- */ .marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 40s linear infinite; } .marquee-track span { font-weight: 700; color: var(--muted); font-size: .95rem; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; } .marquee-track span::before { content: "✦"; color: var(--cyan); margin-right: 2.5rem; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- problém ---------- */ .compare-card { height: 100%; border-radius: var(--r-cut); padding: 26px; overflow: hidden; } .compare-card.bad { --tick: rgba(251,113,133,.9); --pl: linear-gradient(155deg, rgba(251,113,133,.85), rgba(251,113,133,.12) 35%, rgba(255,255,255,.05) 65%, rgba(251,113,133,.55)); --pt: radial-gradient(520px 260px at 100% 0%, rgba(251,113,133,.14), transparent 65%); } .compare-card.good { --tick: rgba(52,211,153,.9); --pl: linear-gradient(155deg, rgba(52,211,153,.9), rgba(52,211,153,.12) 35%, rgba(255,255,255,.05) 65%, rgba(52,211,153,.6)); --pt: radial-gradient(520px 260px at 100% 0%, rgba(52,211,153,.14), transparent 65%); } .compare-label { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem; } .bad .compare-label { background: rgba(251,113,133,.18); color: #fecdd3; } .good .compare-label { background: rgba(52,211,153,.18); color: #a7f3d0; } .fake-chat { display: flex; flex-direction: column; gap: 10px; position: relative; min-height: 230px; } .compare-note { margin: 1.2rem 0 0; color: var(--muted); font-weight: 600; } .code-fall { position: relative; height: 70px; overflow: hidden; font-family: var(--mono); font-size: .78rem; color: #fda4af; } .code-fall span { position: absolute; top: -20px; opacity: 0; animation: fall 4s linear infinite; } .code-fall span:nth-child(1) { left: 4%; animation-delay: 0s; } .code-fall span:nth-child(2) { left: 30%; animation-delay: .7s; } .code-fall span:nth-child(3) { left: 55%; animation-delay: 1.4s; } .code-fall span:nth-child(4) { left: 12%; animation-delay: 2.1s; } .code-fall span:nth-child(5) { left: 70%; animation-delay: 2.8s; } .code-fall span:nth-child(6) { left: 40%; animation-delay: 3.4s; } @keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(90px) rotate(-8deg); opacity: 0; } } .browser-mock { border-radius: 12px; border: 1px solid var(--border-strong); background: #0b0e16; overflow: hidden; transform: translateY(10px); animation: popIn .8s var(--ease) both; } .browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: .7rem; color: #a7f3d0; } .browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3f4d; } .browser-bar span { margin-left: 8px; background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 8px; flex: 1; } .browser-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; } .sk-line { height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.2), rgba(255,255,255,.08)); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; } .sk-block { height: 46px; border-radius: 8px; background: var(--grad-soft); } .w60 { width: 60%; } .w90 { width: 90%; } .w40 { width: 40%; } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } } /* ---------- riešenie / terminál ---------- */ .section-solution { overflow: hidden; overflow: clip; } .steps-mini { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 1.5rem; } .steps-mini::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--violet), var(--gold)); opacity: .35; } .step-mini { display: flex; gap: 14px; align-items: center; position: relative; } .step-mini span { width: 40px; height: 40px; border-radius: 4px 14px 4px 14px; display: grid; place-items: center; font-weight: 800; font-family: var(--mono); background: var(--grad); color: #061018; flex: none; box-shadow: 0 0 24px -6px rgba(34,211,238,.8); } .step-mini b { display: block; } .step-mini small { color: var(--muted); } .terminal { border-radius: var(--radius); border: 1px solid var(--border-strong); background: rgba(6, 8, 14, .92); box-shadow: 0 50px 100px -40px rgba(0,0,0,1), 0 0 60px -20px rgba(167,139,250,.35); overflow: hidden; } .terminal-body { margin: 0; padding: 20px 22px; min-height: 380px; font-family: var(--mono); font-size: .86rem; line-height: 1.7; color: #d6deeb; white-space: pre-wrap; word-break: break-word; } .terminal-body .t-user { color: #67e8f9; } .terminal-body .t-ai { color: #c4b5fd; } .terminal-body .t-ok { color: #6ee7b7; } .terminal-body .t-dim { color: #6b7280; } .terminal-body .t-url { color: #fde68a; text-decoration: underline; } .terminal-body .t-caret { display: inline-block; width: 8px; height: 1em; background: #67e8f9; vertical-align: -2px; animation: blink 1s steps(2) infinite; } /* ručne kreslený ukazovateľ „a takto to vyzerá…" → konzola */ .terminal-wrap { position: relative; } .peek { position: absolute; left: 6px; top: 100%; margin-top: 2px; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; z-index: 2; } .peek-text { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--gold); white-space: nowrap; margin-bottom: 10px; transform: rotate(-4deg); transform-origin: right bottom; text-shadow: 0 0 18px rgba(251,191,36,.35); } .peek-arrow { width: 130px; height: 84px; flex: none; overflow: visible; } .peek-arrow path { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.1s var(--ease) .35s; } .peek-arrow .peek-glow { stroke-width: 9; opacity: .16; } .peek-arrow .peek-head { stroke-dasharray: 40; stroke-dashoffset: 40; transition-duration: .35s; transition-delay: 1.3s; } .peek.in .peek-arrow path { stroke-dashoffset: 0; } .peek.in .peek-arrow { animation: peekNudge 1.8s ease-in-out 1.9s infinite; } @keyframes peekNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -7px); } } @keyframes peekNudgeDown { 0%, 100% { transform: scaleY(-1) translate(0, 0); } 50% { transform: scaleY(-1) translate(4px, -7px); } } /* ---------- tajomstvo ---------- */ .section-secret { overflow: clip; padding: clamp(40px, 5vw, 70px) 0 0; } .secret-bg { position: absolute; inset: 0; z-index: 0; opacity: .3; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent); } .secret-bg img { width: 100%; height: 118%; object-fit: cover; object-position: center 30%; filter: saturate(.6) contrast(1.05); will-change: transform; } .section-secret .container { position: relative; z-index: 1; } .scene { position: relative; } .scene-secret { height: 250vh; } .scene-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; } .chain { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 30px 0; } .chain-node { text-align: center; padding: 20px 12px 16px; border-radius: var(--r-cut-sm); --pb: linear-gradient(rgba(9,11,18,.85), rgba(9,11,18,.85)); --pl: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,.12)); transition: box-shadow .5s, transform .5s var(--ease), opacity .5s; opacity: .45; } .chain-node.active { opacity: 1; --pl: linear-gradient(155deg, var(--cyan), rgba(34,211,238,.25) 45%, var(--cyan)); --pt: radial-gradient(200px 120px at 50% 0%, rgba(34,211,238,.18), transparent 70%); box-shadow: 0 0 50px -12px rgba(34,211,238,.8); transform: translateY(-8px) scale(1.04); } .chain-node.passed { opacity: .8; --pl: linear-gradient(155deg, rgba(52,211,153,.5), rgba(255,255,255,.06) 45%, rgba(52,211,153,.3)); } .chain-node.passed::after { content: "✓"; position: absolute; top: 8px; right: 10px; color: var(--green); font-weight: 800; font-size: .8rem; } .node-icon { width: 54px; height: 54px; margin: 0 auto .5rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; border: 1px solid transparent; background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(140deg, rgba(255,255,255,.35), rgba(255,255,255,.05)) border-box; } .chain-node.active .node-icon { background: linear-gradient(#0d1019, #0d1019) padding-box, var(--grad) border-box; box-shadow: 0 0 26px -6px rgba(34,211,238,.9); } .chain-node b { display: block; font-size: .95rem; } .chain-node small { color: var(--muted); font-size: .78rem; display: block; line-height: 1.3; } .chain-doc { position: absolute; left: 0; top: 0; width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 12px; background: var(--grad); box-shadow: 0 10px 40px -10px rgba(34,211,238,1); transform: translate(-50%, -50%); z-index: 2; will-change: transform; } .chain-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; } .chain-meter div { padding: 16px 20px; border-radius: var(--r-cut-sm); --pb: linear-gradient(rgba(9,11,18,.8), rgba(9,11,18,.8)); } .chain-meter div::before { content: ""; position: absolute; left: 20px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .chain-meter small { padding-left: 14px; } .chain-meter small { color: var(--muted); display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; } .chain-meter strong { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-family: var(--mono); color: #fff; } /* karta tajomstva: žiadny modal – polohu aj priehľadnosť riadi scroll (priletí zľava, odletí doprava) */ .secret-reveal { position: absolute; inset: var(--secret-head, 150px) 0 0; display: grid; place-items: center; padding: 20px; pointer-events: none; z-index: 3; } .secret-reveal.show { pointer-events: auto; } .chain, .chain-meter { transition: opacity .5s var(--ease); } .scene-sticky.revealed .chain, .scene-sticky.revealed .chain-meter { opacity: .22; } .secret-card { position: relative; max-width: 760px; padding: clamp(28px, 4vw, 48px); border-radius: 6px 30px 6px 30px; border: 1px solid transparent; text-align: center; opacity: 0; will-change: transform, opacity; background: linear-gradient(rgba(10, 11, 18, .97), rgba(10, 11, 18, .97)) padding-box, linear-gradient(150deg, rgba(251,191,36,.9), rgba(251,191,36,.15) 40%, rgba(255,255,255,.08) 60%, rgba(251,191,36,.8)) border-box; box-shadow: 0 0 140px -30px rgba(251,191,36,.55), 0 60px 100px -40px #000, inset 0 1px 0 rgba(255,255,255,.08); } .secret-card::after { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .8; --c: rgba(251,191,36,.9); background: linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat; } .secret-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1rem; font-size: 1.3rem; } .secret-tag span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); } .secret-tag i { width: 54px; height: 2px; background: linear-gradient(90deg, rgba(251,191,36,.2), var(--gold)); position: relative; } .secret-tag i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--gold); } .secret-card .eyebrow { color: var(--gold); } .secret-card h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: 1rem; } .secret-card h3 em { font-style: normal; color: var(--gold); } .secret-card p { color: var(--muted); margin: 0; font-size: 1.05rem; } .secret-hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(8px); display: inline-flex; align-items: center; gap: 10px; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; background: rgba(9,11,18,.85); border: 1px solid rgba(251,191,36,.45); color: #fde68a; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); z-index: 4; pointer-events: none; } .secret-hint.on { opacity: 1; transform: translateX(-50%) translateY(0); } .secret-hint-chev { width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: chev 1.4s ease-in-out infinite; margin-top: -4px; } @keyframes chev { 0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: .5; } 50% { transform: translateY(3px) rotate(45deg); opacity: 1; } } .scene-secret .scene-progress { bottom: 16px; } /* porovnanie firma vs. AI – stĺpcový graf */ .vs-bars { margin-top: 32px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-cut); --tick: rgba(167,139,250,.85); --pt: linear-gradient(160deg, rgba(34,211,238,.09), rgba(167,139,250,.07) 55%, transparent); --pl: linear-gradient(155deg, var(--cyan), rgba(167,139,250,.55) 45%, rgba(255,255,255,.06) 75%, rgba(251,113,133,.5)); box-shadow: 0 50px 100px -60px rgba(34,211,238,.5), inset 0 1px 0 rgba(255,255,255,.07); } .vs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: .9rem; } .vs-title { font-weight: 800; font-size: 1.2rem; } .vs-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; font-weight: 600; color: var(--muted); } .vs-key { display: inline-flex; align-items: center; gap: 8px; } .vs-key i { width: 22px; height: 10px; border-radius: 999px; } .vs-key.old i { background: linear-gradient(90deg, rgba(251,113,133,.95), rgba(251,113,133,.5)); } .vs-key.new i { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(34,211,238,.6); } .vs-row { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 8px 24px; padding: 15px 0; border-top: 1px dashed rgba(255,255,255,.1); } .vs-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .vs-track { display: grid; gap: 9px; } .vs-bar { display: grid; grid-template-columns: 1fr minmax(120px, 36%); gap: 12px; align-items: center; } .vs-bar i { display: block; height: 12px; border-radius: 999px; width: 0; transition: width 1.3s var(--ease); } .vs-bars.in .vs-bar i { width: max(var(--w), 12px); } .vs-bar.old i { background: linear-gradient(90deg, rgba(251,113,133,.95), rgba(251,113,133,.45)); } .vs-bar.new i { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 18px -2px rgba(34,211,238,.75); transition-delay: .25s; } .vs-bar b { font-size: .88rem; font-weight: 700; color: var(--muted); line-height: 1.25; } .vs-bar.new b { color: #fff; } /* ---------- čo získate / bento ---------- */ .section-gains, .section-powers, .section-control { overflow: clip; } .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; z-index: 1; } .bento-item { padding: 28px; border-radius: var(--r-cut); overflow: hidden; transition: transform .45s var(--ease), box-shadow .4s; } .bento-item:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px -50px rgba(34,211,238,.55); } .bento-item.span-2 { --pt: radial-gradient(700px 320px at 0% 0%, rgba(34,211,238,.1), transparent 60%); } .bento-item.calc-item { --pt: radial-gradient(700px 320px at 100% 100%, rgba(167,139,250,.12), transparent 60%); --tick: rgba(167,139,250,.85); } .bento-item.span-2 { grid-column: span 2; } .bento-item.calc-item { grid-column: span 3; grid-row: span 2; } .bento-item h3 { font-size: 1.25rem; margin: .6rem 0 .5rem; } .bento-item p { color: var(--muted); margin: 0; font-size: .97rem; } .bento-item p b { color: #fff; } .bento-num { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .bento-icon { margin-bottom: 0; } .bento-item.has-bg { isolation: isolate; } .bento-item.has-bg .bento-bg { position: absolute; inset: 0; z-index: -1; opacity: .5; -webkit-mask-image: linear-gradient(to top, transparent 45%, #000); mask-image: linear-gradient(to top, transparent 45%, #000); } .bento-item.has-bg .bento-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); transition: transform .8s var(--ease); } .bento-item.has-bg:hover .bento-bg img { transform: scale(1.12); } .bento-item.has-bg .bento-icon, .bento-item.has-bg h3, .bento-item.has-bg p { position: relative; text-shadow: 0 2px 16px rgba(0,0,0,.8); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2rem; } .tag-cloud span { font-family: var(--mono); font-size: .75rem; padding: .3rem .6rem; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: #c7d2fe; animation: tagPop 4s ease-in-out infinite; } .tag-cloud span:nth-child(odd) { animation-delay: -2s; } .tag-cloud span::after { content: "vasadomena.sk"; color: var(--muted); } @keyframes tagPop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .spotlight { --mx: 50%; --my: 50%; } .spotlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(34,211,238,.14), transparent 45%); } .spotlight:hover::before { opacity: 1; } .tool-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0; } .tool-btn { border: 1px solid var(--border-strong); background: rgba(255,255,255,.04); color: var(--text); border-radius: 999px; padding: .45rem .9rem; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .3s var(--ease); display: inline-flex; gap: .5rem; align-items: center; } .tool-btn small { color: var(--muted); font-weight: 500; } .tool-btn:hover { border-color: #fff; transform: translateY(-2px); } .tool-btn.on { background: rgba(34,211,238,.18); border-color: var(--cyan); box-shadow: 0 0 20px -6px rgba(34,211,238,.8); } .tool-btn.on small { color: #c7f9ff; } .calc-result { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius-sm); background: rgba(5,6,10,.6); border: 1px solid var(--border); } .calc-result small { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } .calc-result strong { font-size: 1.5rem; font-family: var(--mono); } .calc-arrow { font-size: 1.6rem; color: var(--cyan); } .calc-save strong { color: var(--green); } .honest { display: grid; grid-template-columns: 240px 1fr; gap: clamp(20px, 3vw, 36px); align-items: center; margin-top: 40px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-cut); z-index: 1; --tick: rgba(251,191,36,.85); --pt: linear-gradient(160deg, rgba(251,191,36,.1), rgba(251,191,36,.02)); --pl: linear-gradient(155deg, rgba(251,191,36,.8), rgba(251,191,36,.12) 35%, rgba(255,255,255,.05) 65%, rgba(251,191,36,.5)); } .honest-media { position: relative; border-radius: var(--r-cut-sm); overflow: hidden; aspect-ratio: 1; border: 1px solid rgba(251,191,36,.3); box-shadow: 0 30px 60px -30px rgba(251,191,36,.4); } .honest-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .honest:hover .honest-media img { transform: scale(1.05); } .honest-media span { position: absolute; left: 10px; right: 10px; bottom: 10px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; text-align: center; padding: .35rem .5rem; border-radius: 8px; background: rgba(5,6,10,.72); backdrop-filter: blur(6px); border: 1px solid rgba(251,191,36,.3); } .honest-body .eyebrow { color: var(--gold); margin-bottom: .45rem; } .honest h3 { font-size: 1.35rem; margin-bottom: .9rem; } .honest-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; } .honest-col { padding: 16px 18px; border-radius: var(--r-cut-sm); border: 1px solid var(--border); background: rgba(5,6,10,.45); } .honest-col.yes { border-color: rgba(52,211,153,.35); background: linear-gradient(160deg, rgba(52,211,153,.1), rgba(5,6,10,.4)); } .honest-col.next { border-color: rgba(167,139,250,.35); background: linear-gradient(160deg, rgba(167,139,250,.12), rgba(5,6,10,.4)); } .honest-col > b { display: flex; align-items: center; gap: 10px; margin-bottom: .7rem; font-size: .95rem; } .honest-col > b i { font-style: normal; width: 26px; height: 26px; border-radius: 4px 9px 4px 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 800; flex: none; } .honest-col.yes > b i { background: rgba(52,211,153,.2); color: var(--green); border: 1px solid rgba(52,211,153,.5); } .honest-col.next > b i { background: rgba(167,139,250,.2); color: var(--violet); border: 1px solid rgba(167,139,250,.5); } .honest-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .honest-col li { position: relative; padding-left: 1.3rem; color: var(--muted); font-size: .92rem; } .honest-col li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; } .honest-col li strong { color: #fde68a; } .honest-col p { color: var(--muted); margin: 0; font-size: .92rem; } /* ---------- GPU scéna ---------- */ /* ---------- pre koho je to určené ---------- */ .section-who { overflow: clip; } .section-who .container { position: relative; z-index: 1; } .who-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 3.5vw, 44px); border-radius: var(--r-cut); overflow: hidden; margin-bottom: 26px; --pt: linear-gradient(135deg, rgba(34,211,238,.12), rgba(167,139,250,.08) 55%, rgba(251,191,36,.07)); --pl: linear-gradient(135deg, rgba(34,211,238,.85), rgba(167,139,250,.4) 50%, rgba(251,191,36,.65)); } .who-hero::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.18), transparent 60%); pointer-events: none; } .who-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #a5f3fc; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(34,211,238,.35); background: rgba(34,211,238,.1); margin-bottom: 1.1rem; } .who-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s infinite; } .who-title { font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.22; margin: 0 0 .9rem; min-height: 2.44em; } /* inline (nie inline-block), aby veta tiekla s textom a bodka nepadala na nový riadok → animuje sa len opacity/blur/spacing */ .who-word { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .4s var(--ease), filter .4s, letter-spacing .4s var(--ease); } .who-word.out { opacity: 0; filter: blur(6px); letter-spacing: .06em; } .who-word.enter { transition: none; opacity: 0; filter: blur(6px); letter-spacing: -.04em; } .who-hero-text > p { color: var(--muted); font-size: 1.02rem; margin: 0 0 1.2rem; } .who-req { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .who-req li { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; padding: .4rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(251,113,133,.6); } .who-req li i { font-style: normal; color: var(--rose); } .who-req li.yes { text-decoration: none; color: #d1fae5; border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.12); box-shadow: 0 0 24px -8px rgba(52,211,153,.6); } .who-req li.yes i { color: var(--green); } .who-hero-demo { position: relative; } .who-hero-demo .chat-window { transform: rotate(-1.2deg); transition: transform .6s var(--ease); } .who-hero:hover .who-hero-demo .chat-window { transform: rotate(0) translateY(-4px); } .who-hero .msg { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); } .who-hero.in .msg { opacity: 1; transform: none; } .who-hero.in .msg:nth-child(1) { transition-delay: .3s; } .who-hero.in .msg:nth-child(2) { transition-delay: 1.1s; } .who-hero.in .msg:nth-child(3) { transition-delay: 2s; } .who-hero .msg.ai b { color: #fff; font-family: var(--mono); font-size: .88em; } .who-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .who-card { grid-column: span 2; overflow: hidden; padding: 0; border-radius: var(--r-cut); transition: transform .45s var(--ease), box-shadow .4s; display: flex; flex-direction: column; --tick: rgba(167,139,250,.85); --tile: linear-gradient(140deg, var(--violet), rgba(34,211,238,.8)); --pl: linear-gradient(155deg, rgba(167,139,250,.5), rgba(255,255,255,.06) 32%, rgba(255,255,255,.04) 68%, rgba(167,139,250,.35)); } .who-card:nth-child(4) { grid-column: 2 / span 2; } .who-card:nth-child(5) { grid-column: 4 / span 2; } .who-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -40px rgba(167,139,250,.6); } .who-photo { position: relative; height: 200px; overflow: hidden; flex: none; } .who-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; filter: saturate(.92); transition: transform .9s var(--ease), filter .5s; } .who-card:hover .who-photo img { transform: scale(1.06); filter: saturate(1.08); } .who-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(11,13,21,.25), rgba(11,13,21,0) 35%, rgba(11,13,21,.55) 70%, rgba(11,13,21,.98) 100%); } .who-num { position: absolute; right: 16px; top: 8px; z-index: 1; font-family: var(--mono); font-size: 2.6rem; font-weight: 800; letter-spacing: -.06em; color: rgba(255,255,255,.28); line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.7); transition: color .4s; } .who-card:hover .who-num { color: rgba(196,181,253,.7); } .who-photo .who-icon { position: absolute; left: 20px; bottom: 12px; z-index: 2; margin: 0; box-shadow: 0 12px 30px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1); } .who-body { padding: 18px 24px 22px; display: flex; flex-direction: column; flex: 1; } .who-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; position: relative; } .who-card p { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; flex: 1; } .who-prompt { font-family: var(--mono); font-size: .78rem; color: #c7f9ff; padding: .55rem .8rem .55rem 1.9rem; border-radius: 12px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22); position: relative; line-height: 1.45; } .who-prompt::before { content: "›_"; position: absolute; left: .75rem; top: .55rem; color: var(--cyan); font-weight: 700; } .who-foot { text-align: center; color: var(--muted); margin: 32px auto 0; max-width: 640px; } .who-foot a { color: #a5f3fc; text-decoration: underline; text-underline-offset: 3px; } .section-gpu { padding-bottom: clamp(80px, 10vw, 140px); background: linear-gradient(to bottom, var(--bg), #03040a 30%, var(--bg)); } .scene-gpu { height: 500vh; } .scene-gpu .scene-sticky { background: #020308; } .gpu-bg { position: absolute; inset: 0; } .gpu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; } .gpu-dc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; } .gpu-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(2,3,8,.1), rgba(2,3,8,.85) 75%), linear-gradient(to bottom, var(--bg), transparent 15%, transparent 85%, var(--bg)); } /* --- 3D server klaster (čisté CSS objekty, žiadne obrázky) --- */ .gpu-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 42%; } .cluster { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; } .chassis { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; --co: 0; } .ch-face { position: absolute; backface-visibility: hidden; opacity: var(--co); } /* geometria: panel 600×340, hĺbka 460, uši 24, stavový pás 34, bay 58 (6 + 46 + 6), spodok 16 */ .ch-front { left: -300px; top: -170px; width: 600px; height: 340px; transform: translateZ(0); } .ch-top { left: -300px; top: -230px; width: 600px; height: 460px; transform: translateY(-170px) translateZ(-230px) rotateX(90deg); background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 45%), linear-gradient(180deg, #2c3443, #1c212d); border: 1px solid #3a4252; border-bottom: 2px solid rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); } .ch-top::after { content: ""; position: absolute; inset: 40px 40px 70px; border-radius: 6px; background: radial-gradient(circle, rgba(0,0,0,.55) 1.6px, transparent 2.2px) 0 0 / 11px 11px; opacity: .9; } .ch-side { left: -230px; top: -170px; width: 460px; height: 340px; transform: translateX(300px) translateZ(-230px) rotateY(90deg); background: linear-gradient(90deg, #262d3b, #181d28 35%, #1e2430); border-left: 2px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .ch-side::after { content: ""; position: absolute; left: 52%; right: 24px; top: 40px; bottom: 34px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 5px, transparent 5px 14px); border-radius: 4px; } .ch-back { left: -300px; top: -170px; width: 600px; height: 340px; transform: translateZ(-460px); background: radial-gradient(ellipse at 50% 50%, #0b0f18, #05070c 75%); } .ch-back .bp { position: absolute; left: 50%; width: 150px; height: 12px; margin-left: -75px; top: calc(58px + var(--i) * 58px); border-radius: 2px; background: repeating-linear-gradient(90deg, #6b5320 0 4px, #3a2c10 4px 6px); opacity: .7; transition: box-shadow .4s, opacity .4s; } .ch-back .bp.lit { opacity: 1; background: repeating-linear-gradient(90deg, #f0c460 0 4px, #8a6420 4px 6px); box-shadow: 0 0 22px rgba(34,211,238,.55), 0 0 6px rgba(251,191,36,.8); } .ch-shelf { left: -300px; top: -230px; width: 600px; height: 460px; transform: translateY(calc(-84px + var(--k) * 58px)) translateZ(-230px) rotateX(90deg); background: linear-gradient(90deg, transparent 0 34px, #232b39 34px 42px, transparent 42px 558px, #232b39 558px 566px, transparent 566px), linear-gradient(180deg, #080b11, #0e121b 70%, #141925); border-bottom: 3px solid #2a3242; } .ch-shadow { left: -480px; top: -360px; width: 960px; height: 720px; transform: translateY(178px) translateZ(-230px) rotateX(90deg); background: radial-gradient(ellipse at 50% 50%, rgba(34,211,238,.28), rgba(34,211,238,.06) 32%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.9), rgba(0,0,0,.5) 38%, transparent 68%); } /* predný panel */ .ch-ear { position: absolute; top: 0; width: 24px; height: 340px; background: radial-gradient(circle at 50% 34px, #05060a 3.5px, #3a4150 4.5px, transparent 6px), radial-gradient(circle at 50% 170px, #05060a 3.5px, #3a4150 4.5px, transparent 6px), radial-gradient(circle at 50% 306px, #05060a 3.5px, #3a4150 4.5px, transparent 6px), linear-gradient(90deg, #3a4253, #222835); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .ch-ear-l { left: -24px; border-radius: 8px 0 0 8px; } .ch-ear-r { right: -24px; border-radius: 0 8px 8px 0; } .ch-status { position: absolute; left: 0; top: 0; width: 600px; height: 34px; background: linear-gradient(180deg, #343c4d, #212734); border-bottom: 1px solid #0a0d14; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 2px 0 rgba(34,211,238,.25); display: flex; align-items: center; gap: 14px; padding: 0 16px; } .ch-name { font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #8b95a7; margin-right: auto; } .ch-leds { display: flex; gap: 7px; } .ch-leds i { width: 7px; height: 7px; border-radius: 50%; background: #1f2a2c; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); transition: background .3s, box-shadow .3s; } .ch-leds i.lit { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .ch-pwr { width: 9px; height: 9px; border-radius: 50%; background: #2a3a2a; margin-left: 4px; transition: background .3s, box-shadow .3s; } .chassis.on .ch-pwr { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; } .ch-bay { position: absolute; left: 0; width: 600px; height: 58px; top: calc(34px + var(--k) * 58px); border-style: solid; border-width: 6px 26px; border-color: #20262f #2a3140 #303948 #2a3140; background: transparent; } .ch-bay::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 4px 10px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.7); pointer-events: none; } .bay-num { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font: 700 9px/1 var(--mono); color: #6b7488; letter-spacing: .05em; } .bay-led { position: absolute; right: -18px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #1f2a2c; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); transition: background .3s, box-shadow .3s; } .ch-bay.lit .bay-led { background: var(--green); box-shadow: 0 0 9px var(--green); } .ch-bottom { position: absolute; left: 0; bottom: 0; width: 600px; height: 16px; background: linear-gradient(180deg, #252c3a, #161b25); border-top: 1px solid #3a4252; } /* GPU karta = 3D kváder 540×40×440 (vrch = grafika karty, predok = čelo s LED) */ .gpu-card { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; --ko: 0; } .cf { position: absolute; backface-visibility: hidden; opacity: var(--ko); } .cf-top { left: -270px; top: -220px; width: 540px; height: 440px; transform: translateY(-20px) rotateX(90deg); border-radius: 6px; border: 1px solid #2c3442; background: #0c1016; overflow: hidden; } .cf-front { left: -270px; top: -20px; width: 540px; height: 40px; transform: translateZ(220px); background: linear-gradient(180deg, #262d3b, #141821); border: 1px solid #3a4253; border-radius: 3px; } .cf-side { left: -220px; top: -20px; width: 440px; height: 40px; transform: translateX(270px) rotateY(90deg); background: linear-gradient(180deg, #1f2532, #12161f); border-top: 1px solid #343c4c; } .cf-left { left: -220px; top: -20px; width: 440px; height: 40px; transform: translateX(-270px) rotateY(-90deg); background: linear-gradient(180deg, #1f2532, #12161f); border-top: 1px solid #343c4c; } .cf-back { left: -270px; top: -20px; width: 540px; height: 40px; transform: translateZ(-220px) rotateY(180deg); background: #10141c; } .cf-bottom { left: -270px; top: -220px; width: 540px; height: 440px; transform: translateY(20px) rotateX(-90deg); background: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 14px 14px, #0a0e14; border-radius: 6px; } .cf-top > * { position: absolute; } .g-pcb { inset: 0; background: radial-gradient(circle at 18% 82%, rgba(34,211,238,.08), transparent 40%), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px), repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px), linear-gradient(180deg, #0e131b, #0a0e14); } .g-conn { left: 70px; top: 0; width: 300px; height: 16px; background: repeating-linear-gradient(90deg, #e6bd5e 0 5px, #8a6420 5px 7px); border-bottom: 2px solid #2e2308; } .g-conn::after { content: ""; position: absolute; left: 92px; top: 0; width: 7px; height: 100%; background: #0a0e14; } .g-shroud { left: 28px; top: 34px; right: 28px; bottom: 96px; border-radius: 10px; background: linear-gradient(115deg, transparent 40%, rgba(34,211,238,.16) 40.4%, transparent 41.4%), linear-gradient(115deg, transparent 64%, rgba(251,191,36,.14) 64.4%, transparent 65.4%), linear-gradient(160deg, #222937 0%, #12161f 48%, #1a2030 100%); border: 1px solid #353d4d; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.6); } .g-fins { left: 70px; top: 60px; width: 260px; height: 130px; border-radius: 4px; border: 2px solid #2b3240; background: repeating-linear-gradient(90deg, #d8ae52 0 4px, #6b4f17 4px 6px, #b48b3a 6px 8px); box-shadow: inset 0 0 26px rgba(0,0,0,.75); } .g-die { left: 360px; top: 70px; width: 110px; height: 110px; border-radius: 6px; border: 2px solid #e2b85a; background: linear-gradient(135deg, #1e1b4b, #0e7490 55%, #a78bfa); box-shadow: 0 0 30px rgba(34,211,238,.3), inset 0 0 24px rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .g-die b { font: 800 22px/1 var(--font); letter-spacing: .02em; } .g-die small { font: 600 8px/1 var(--mono); letter-spacing: .12em; color: #d8f7ff; } .g-hbm { left: 360px; top: 192px; width: 110px; height: 36px; background: repeating-linear-gradient(90deg, #1c2230 0 32px, transparent 32px 39px); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(226,184,90,.25); } .g-leds { left: 70px; top: 250px; display: flex; gap: 12px; } .g-leds i { width: 10px; height: 10px; border-radius: 50%; background: #123238; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); transition: background .3s, box-shadow .3s; } .gpu-card.on .g-leds i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan), 0 0 18px rgba(34,211,238,.6); animation: ledBlink 1.6s infinite; animation-delay: calc(var(--n) * -.22s); } @keyframes ledBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .g-label { left: 230px; top: 250px; font: 700 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #7f8aa0; white-space: nowrap; } .g-grille { left: 44px; right: 44px; top: 292px; height: 40px; border-radius: 6px; background: repeating-linear-gradient(90deg, #080b10 0 6px, transparent 6px 12px), linear-gradient(180deg, #171c26, #0f131b); box-shadow: inset 0 2px 6px rgba(0,0,0,.8); } .g-fan { top: 350px; width: 84px; height: 84px; border-radius: 50%; background: #0b0e14; border: 3px solid #2b3242; box-shadow: inset 0 0 0 2px #10141c, 0 6px 16px rgba(0,0,0,.6); transition: border-color .4s, box-shadow .4s; } .g-fan.a { left: 58px; } .g-fan.b { left: 228px; } .g-fan.c { left: 398px; } .g-fan i { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #2f3849 0deg 30deg, #0b0e14 30deg 51.4deg); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); animation: fanSpin .45s linear infinite; animation-play-state: paused; } .g-fan::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #56607a, #1c2230 70%); box-shadow: 0 0 0 1px #0b0e14; } .gpu-card.on .g-fan { border-color: rgba(34,211,238,.6); box-shadow: inset 0 0 0 2px #10141c, 0 0 18px rgba(34,211,238,.35); } .gpu-card.on .g-fan i { animation-play-state: running; } @keyframes fanSpin { to { transform: rotate(360deg); } } .g-screw { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7b8499, #2b3242 60%, #10141c); box-shadow: 0 0 0 1px #05060a; } .g-screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 2px; background: #0b0e14; transform: rotate(-30deg); } .g-screw.s1 { left: 12px; top: 22px; } .g-screw.s2 { right: 12px; top: 22px; } .g-screw.s3 { left: 12px; bottom: 12px; } .g-screw.s4 { right: 12px; bottom: 12px; } .g-sheen { inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 35%, transparent 55%, rgba(255,255,255,.04) 100%); pointer-events: none; } .cf-front > * { position: absolute; } .f-handle { left: 14px; top: 10px; width: 70px; height: 18px; border-radius: 9px; background: linear-gradient(180deg, #3d4659, #1f2632); border: 1px solid #4d576b; } .f-grille { left: 100px; right: 130px; top: 8px; bottom: 8px; border-radius: 3px; background: radial-gradient(circle, #070a0f 2px, transparent 2.6px) 0 0 / 8px 8px; opacity: .9; } .f-leds { right: 74px; top: 15px; display: flex; gap: 8px; } .f-leds i { width: 8px; height: 8px; border-radius: 50%; background: #1d3b2a; box-shadow: inset 0 1px 1px rgba(0,0,0,.8); transition: background .3s, box-shadow .3s; } .f-leds i + i { background: #123238; } .gpu-card.on .f-leds i { background: var(--green); box-shadow: 0 0 8px var(--green); } .gpu-card.on .f-leds i + i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 1.2s infinite; } .f-tag { right: 14px; top: 12px; font: 700 10px/16px var(--mono); letter-spacing: .12em; color: #9aa3b5; } .gpu-copy { position: absolute; left: 0; right: 0; bottom: 8vh; padding: 0 5vw; pointer-events: none; } .gpu-step { position: absolute; left: 5vw; right: 5vw; bottom: 0; max-width: 560px; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); } .gpu-step.active { opacity: 1; transform: none; } .gpu-step h3 { font-size: clamp(1.5rem, 3.2vw, 2.6rem); margin: .3rem 0 .5rem; text-shadow: 0 4px 30px #000; } .gpu-step p { color: #cbd5e1; margin: 0; text-shadow: 0 2px 20px #000; max-width: 520px; } .gpu-price { position: absolute; right: 5vw; top: calc(var(--nav-h) + 20px); text-align: right; padding: 16px 22px; border-radius: var(--radius-sm); background: rgba(5,6,10,.7); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px #000; transition: border-color .4s, box-shadow .4s; } .gpu-price small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; } .gpu-price strong { display: block; font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.4rem); color: #fff; line-height: 1.1; white-space: nowrap; } .gpu-price.final { border-color: var(--green); box-shadow: 0 0 80px -20px rgba(52,211,153,.9); } .gpu-price.final strong { color: var(--green); } .gpu-price.final .gpu-approx, .gpu-price.final .gpu-cur { display: none; } .scene-progress { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 160px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; } .scene-progress i { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left center; will-change: transform; } .section-gpu { counter-reset: feat; } .feature { padding: 28px 26px; border-radius: var(--r-cut); height: 100%; transition: transform .4s var(--ease), box-shadow .4s; counter-increment: feat; } .feature::before { content: counter(feat, decimal-leading-zero); position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: rgba(255,255,255,.3); } .feature:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -40px rgba(34,211,238,.6); } .feature h3 { font-size: 1.15rem; margin-bottom: .5rem; } .feature p { color: var(--muted); margin: 0; font-size: .95rem; } /* ---------- superschopnosti ---------- */ .orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; display: grid; place-items: center; } .orbit-core { width: 62%; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.15); animation: spin 26s linear infinite; } .ring-2 { inset: 12%; animation-duration: 20s; animation-direction: reverse; } .ring-3 { inset: 24%; animation-duration: 14s; } .orbit-chip { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: .4rem .8rem; border-radius: 999px; background: rgba(9,11,18,.9); border: 1px solid var(--border-strong); font-size: .8rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 30px -8px rgba(167,139,250,.9); animation: spin 26s linear infinite reverse; } .ring-2 .orbit-chip { animation-duration: 20s; animation-direction: normal; } .ring-3 .orbit-chip { animation-duration: 14s; } .power-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 1.8rem; counter-reset: power; } .power { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 18px 20px 18px 16px; border-radius: var(--r-cut-sm); counter-increment: power; transition: transform .35s var(--ease), box-shadow .35s; --tick: rgba(167,139,250,.85); --pl: linear-gradient(155deg, rgba(167,139,250,.55), rgba(255,255,255,.06) 32%, rgba(255,255,255,.04) 68%, rgba(167,139,250,.35)); } .power-ico { font-style: normal; grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; color: #ddd6fe; border-radius: 4px 12px 4px 12px; border: 1px solid transparent; background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(140deg, var(--violet), rgba(34,211,238,.7)) border-box; box-shadow: 0 0 26px -8px rgba(167,139,250,.8); transition: transform .35s var(--ease); } .power:hover { transform: translateX(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -40px rgba(167,139,250,.7); } .power:hover .power-ico { transform: rotate(-6deg) scale(1.06); } .power b { display: block; margin-bottom: .15rem; } .power span { color: var(--muted); font-size: .92rem; } /* ---------- ovládanie ---------- */ .control-media { position: relative; border-radius: var(--radius); overflow: visible; } .control-media img { border-radius: var(--radius); border: 1px solid var(--border-strong); box-shadow: 0 60px 100px -50px #000; width: 100%; } .control-badge { position: absolute; padding: .55rem 1rem; border-radius: 4px 14px 4px 14px; border: 1px solid transparent; background: linear-gradient(rgba(9,11,18,.94), rgba(9,11,18,.94)) padding-box, linear-gradient(140deg, var(--cyan), rgba(167,139,250,.6)) border-box; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 20px 40px -20px #000, 0 0 30px -10px rgba(34,211,238,.7); animation: floatY 5s ease-in-out infinite; } .control-badge.b1 { top: 6%; left: -14px; } .control-badge.b2 { bottom: 8%; right: -14px; animation-delay: -2.5s; } .check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; } .check-list li { padding-left: 2rem; position: relative; color: var(--muted); } .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 4px 8px 4px 8px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: linear-gradient(140deg, var(--green), var(--cyan)); color: #061018; } /* ---------- priebeh / timeline ---------- */ .timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0; } .timeline-line { position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.1); } .timeline-line i { display: block; width: 100%; height: 0; background: var(--grad); box-shadow: 0 0 20px rgba(34,211,238,.8); } .tl-item { position: relative; display: flex; gap: 26px; padding: 0 0 26px; } .tl-dot { width: 56px; height: 56px; flex: none; border-radius: 4px 18px 4px 18px; display: grid; place-items: center; font-weight: 800; font-family: var(--mono); border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.08)) border-box; transition: box-shadow .4s, background .4s, transform .4s var(--ease); z-index: 1; } .tl-item.lit .tl-dot { background: linear-gradient(rgba(20,40,52,1), rgba(20,40,52,1)) padding-box, linear-gradient(160deg, var(--cyan), var(--violet)) border-box; box-shadow: 0 0 34px -6px rgba(34,211,238,.9); color: #fff; transform: rotate(-6deg); } .tl-body { flex: 1; padding: 18px 22px; border-radius: var(--r-cut-sm); transition: transform .4s var(--ease), box-shadow .4s; } .tl-item.lit .tl-body { --pl: linear-gradient(155deg, rgba(34,211,238,.7), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%, rgba(167,139,250,.45)); --pt: radial-gradient(500px 200px at 0% 0%, rgba(34,211,238,.08), transparent 65%); } .tl-item:hover .tl-body { transform: translateX(4px); } .tl-body small { color: var(--cyan); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; } .tl-body h3 { font-size: 1.3rem; margin: .3rem 0 .4rem; } .tl-body p { color: var(--muted); margin: 0; } /* ---------- balíky ---------- */ .section-pricing { overflow: hidden; overflow: clip; background: linear-gradient(to bottom, var(--bg), #070812 20%, #070812 80%, var(--bg)); } .blob-4 { width: 700px; height: 700px; left: -320px; top: 55%; background: radial-gradient(circle, rgba(167,139,250,.2), transparent 65%); animation-delay: -6s; } .pricing-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent); } .section-pricing .container { position: relative; z-index: 1; } .pricing-perks { list-style: none; padding: 0; margin: 1.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pricing-perks li { display: inline-flex; align-items: center; gap: 8px; padding: .45rem .9rem .45rem .6rem; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.04); font-size: .86rem; font-weight: 600; color: #d5dbe7; } .pricing-perks li i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); font-size: .85rem; } .deal-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 16px 22px; margin-bottom: 40px; border-radius: var(--r-cut); --pt: linear-gradient(90deg, rgba(251,113,133,.08), transparent 45%, rgba(34,211,238,.1)); --pl: linear-gradient(90deg, rgba(251,113,133,.6), rgba(255,255,255,.08) 40%, rgba(255,255,255,.08) 60%, var(--cyan)); } .deal-item { display: flex; align-items: center; gap: 14px; } .deal-item.win { justify-content: flex-end; text-align: right; flex-direction: row-reverse; } .deal-ico { width: 46px; height: 46px; border-radius: 4px 14px 4px 14px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(251,113,133,.14); border: 1px solid rgba(251,113,133,.4); flex: none; } .deal-item.win .deal-ico { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.5); box-shadow: 0 0 30px -8px rgba(34,211,238,.8); } .deal-item small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; } .deal-item b { font-size: .98rem; color: #fecdd3; } .deal-item.win b { color: #a5f3fc; } .deal-vs { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: .78rem; color: #061018; background: var(--grad); box-shadow: 0 0 30px -6px rgba(167,139,250,.9); } .pricing-row { position: relative; z-index: 1; align-items: stretch; } .price-card { height: 100%; padding: 30px 28px 28px; border-radius: var(--r-cut); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; --acc: var(--cyan); --acc-rgb: 34,211,238; --tick: rgba(var(--acc-rgb), .9); --pl: linear-gradient(160deg, rgba(var(--acc-rgb), .9), rgba(var(--acc-rgb), .15) 30%, rgba(255,255,255,.05) 60%, rgba(var(--acc-rgb), .55)); --pt: radial-gradient(460px 280px at 50% 0%, rgba(var(--acc-rgb), .16), transparent 70%); } .price-card[data-pkg="rast"] { --acc: var(--violet); --acc-rgb: 167,139,250; } .price-card[data-pkg="vykon"] { --acc: var(--gold); --acc-rgb: 251,191,36; } .price-card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 50px 90px -50px rgba(var(--acc-rgb), .7); } .price-card.featured { --pb: linear-gradient(rgba(14,12,26,.96), rgba(14,12,26,.96)); --pl: linear-gradient(160deg, var(--violet), var(--cyan) 45%, rgba(251,191,36,.9)); box-shadow: 0 50px 100px -50px rgba(167,139,250,.85), 0 0 0 1px rgba(167,139,250,.2), inset 0 1px 0 rgba(255,255,255,.12); } .price-card.selected { box-shadow: 0 0 0 2px var(--acc), 0 50px 100px -50px rgba(var(--acc-rgb), .9), inset 0 1px 0 rgba(255,255,255,.1); } .price-chosen { position: absolute; right: 18px; top: 18px; z-index: 3; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #061018; background: var(--acc); padding: .3rem .6rem; border-radius: 4px 10px 4px 10px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease); } .price-card.selected .price-chosen { opacity: 1; transform: none; } .price-ribbon { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 3; background: linear-gradient(120deg, #c4b5fd, var(--violet) 50%, #22d3ee); color: #061018; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(167,139,250,.9); white-space: nowrap; } .price-top { display: flex; align-items: center; gap: 14px; } .price-icon { width: 50px; height: 50px; border-radius: 4px 16px 4px 16px; display: grid; place-items: center; font-size: 1.35rem; border: 1px solid transparent; background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(140deg, var(--acc), rgba(var(--acc-rgb), .3)) border-box; box-shadow: 0 0 30px -10px var(--acc); flex: none; } .price-name { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; } .price-vps { display: block; font-size: .72rem; color: var(--acc); text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); margin-top: .25rem; } .price-amount { margin: 1.3rem 0 .6rem; display: flex; align-items: baseline; gap: .35rem; } .price-amount strong { font-size: clamp(3rem, 4.4vw, 4.2rem); letter-spacing: -.05em; line-height: .95; background: linear-gradient(120deg, #fff 30%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; } .price-cur { font-size: 1.6rem; font-weight: 800; color: var(--acc); } .price-per { color: var(--muted); font-weight: 600; margin-left: .2rem; } .price-setup { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; padding: .3rem .75rem .3rem .4rem; border-radius: 999px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); color: #fde68a; font-size: .8rem; font-weight: 700; } .price-setup i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #061018; font-weight: 800; font-size: .8rem; } .price-for { color: var(--muted); margin: 1.1rem 0 .9rem; font-size: .95rem; min-height: 3em; } .price-note { font-family: var(--mono); font-size: .76rem; color: #c7d2fe; margin: .7rem 0 0; } .price-note::before { content: "▸ "; color: var(--acc); } .price-meter { display: grid; gap: 7px; margin: .9rem 0 0; padding: .85rem 0 0; border-top: 1px dashed rgba(255,255,255,.14); } .pm-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; } .pm-row small { font-size: .72rem; color: var(--muted); letter-spacing: .03em; } .pm-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .pm-seg i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); } .pm-seg i.on { background: linear-gradient(90deg, var(--acc), rgba(var(--acc-rgb), .55)); box-shadow: 0 0 12px -2px rgba(var(--acc-rgb), .85); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .price-card.in .pm-seg i.on { transform: none; } .pm-seg i:nth-child(2) { transition-delay: .15s; } .pm-seg i:nth-child(3) { transition-delay: .3s; } .pm-seg i:nth-child(4) { transition-delay: .45s; } .pm-sum { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); text-align: right; margin-top: 2px; } .price-ai { display: flex; align-items: center; gap: 10px; margin: .9rem 0 0; font-size: .86rem; color: #d5dbe7; } .price-ai i { font-style: normal; width: 30px; height: 30px; border-radius: 4px 10px 4px 10px; display: grid; place-items: center; background: rgba(var(--acc-rgb), .14); border: 1px solid rgba(var(--acc-rgb), .4); font-size: .95rem; flex: none; } .price-ai b { color: #fff; } .price-incl { list-style: none; padding: 1rem 0 0; margin: .9rem 0 1.4rem; display: grid; gap: .5rem; flex: 1; font-size: .92rem; border-top: 1px dashed rgba(255,255,255,.14); } .price-incl li { padding-left: 1.75rem; position: relative; color: #d5dbe7; } .price-incl li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 4px 7px 4px 7px; display: grid; place-items: center; font-size: .62rem; font-weight: 800; background: rgba(var(--acc-rgb), .2); color: var(--acc); } .btn-pick { position: relative; z-index: 3; color: #fff; border: 1px solid rgba(var(--acc-rgb), .6); background: linear-gradient(120deg, rgba(var(--acc-rgb), .24), rgba(var(--acc-rgb), .08)); box-shadow: 0 12px 30px -14px rgba(var(--acc-rgb), .8); padding: .8rem 1.2rem; } .btn-pick .arrow { display: inline-block; transition: transform .3s var(--ease); } .btn-pick:hover { color: #061018; background: var(--acc); border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(var(--acc-rgb), .95); } .btn-pick:hover .arrow { transform: translateX(4px); } .price-card.featured .btn-pick { color: #061018; border-color: transparent; background: linear-gradient(120deg, #c4b5fd, var(--violet) 50%, #22d3ee); box-shadow: 0 14px 40px -12px rgba(167,139,250,.9), inset 0 1px 0 rgba(255,255,255,.4); } .price-card.featured .btn-pick:hover { box-shadow: 0 20px 50px -12px rgba(167,139,250,1), inset 0 1px 0 rgba(255,255,255,.4); } .price-card.selected .btn-pick { background: var(--acc); color: #061018; border-color: var(--acc); } .price-card.featured.selected .btn-pick { background: linear-gradient(120deg, #c4b5fd, var(--violet) 50%, #22d3ee); } /* variant balíka: Claude / ChatGPT */ .ai-variant { z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding: 18px 24px; margin: 0 0 28px; border-radius: var(--r-cut); --ai-rgb: 217,119,87; --tick: rgba(var(--ai-rgb), .85); --pl: linear-gradient(155deg, rgba(var(--ai-rgb), .8), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%, rgba(var(--ai-rgb), .5)); --pt: radial-gradient(600px 220px at 0% 0%, rgba(var(--ai-rgb), .13), transparent 60%); } .ai-variant:has(.ai-switch[data-active="chatgpt"]) { --ai-rgb: 16,163,127; } .ai-variant-text b { display: block; font-size: 1.05rem; } .ai-variant-text span { color: var(--muted); font-size: .92rem; } .ai-variant .ai-switch-note { grid-column: 1 / -1; margin: 0; max-width: none; min-height: 0; font-size: .78rem; color: var(--muted); } .ai-variant .ai-switch-note:empty { display: none; } .ai-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--border-strong); --ai-rgb: 217,119,87; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); } .ai-switch[data-active="chatgpt"] { --ai-rgb: 16,163,127; } .ai-switch-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(120deg, rgba(var(--ai-rgb), 1), rgba(var(--ai-rgb), .72)); transition: transform .45s var(--ease), background .4s; box-shadow: 0 8px 30px -8px rgba(var(--ai-rgb), 1), inset 0 1px 0 rgba(255,255,255,.35); } .ai-switch[data-active="chatgpt"] .ai-switch-pill { transform: translateX(100%); } .ai-switch-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: none; border: 0; color: var(--muted); font-weight: 800; padding: .75rem 1.6rem; border-radius: 999px; min-width: 190px; transition: color .3s; cursor: pointer; } .ai-switch-btn .ai-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; transition: opacity .3s, box-shadow .3s; } .ai-switch-btn.active { color: #fff; } .ai-switch-btn.active .ai-dot { opacity: 1; box-shadow: 0 0 10px #fff; } .ai-switch-note { margin: 1rem auto 0; color: var(--muted); max-width: 640px; min-height: 1.6em; } /* v každom balíku */ .included { z-index: 1; margin-top: 24px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-cut); --pt: radial-gradient(800px 300px at 0% 0%, rgba(34,211,238,.09), transparent 60%); } .included-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: 1.2rem; } .included h3 { font-size: 1.3rem; margin: 0; } .included-tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); padding: .3rem .65rem; border: 1px solid rgba(34,211,238,.4); border-radius: 999px; background: rgba(34,211,238,.08); } .included-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; } .included-list li { position: relative; display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem .6rem .7rem; border-radius: var(--r-cut-sm); background: rgba(255,255,255,.035); border: 1px solid var(--border); color: #d5dbe7; transition: border-color .3s, transform .3s var(--ease), background .3s; } .included-list li:hover { border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.06); transform: translateX(4px); } .included-list li i { font-style: normal; width: 34px; height: 34px; border-radius: 4px 12px 4px 12px; display: grid; place-items: center; font-size: 1rem; background: var(--grad-soft); border: 1px solid var(--border); flex: none; } .included-list li::after { content: "✓"; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem; font-weight: 800; background: var(--grad); color: #061018; flex: none; } /* súhrn / zostava */ .pricing-tiny { position: relative; z-index: 1; text-align: center; margin: 1.3rem auto 0; max-width: 760px; } .pricing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px dashed rgba(255,255,255,.14); } .pricing-foot p { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ---------- projekty (referencie + lightbox galéria) ---------- */ .section-projects { overflow: clip; background: linear-gradient(180deg, transparent, rgba(34,211,238,.035) 35%, rgba(167,139,250,.04) 70%, transparent); } .blob-5 { width: 760px; height: 760px; right: -300px; top: 10%; background: radial-gradient(circle, rgba(52,211,153,.16), transparent 65%); animation-delay: -9s; } .projects-meta { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0; margin: -18px auto 40px; width: max-content; max-width: 100%; border: 1px solid transparent; border-radius: var(--r-cut-sm); background: linear-gradient(rgba(9,11,18,.85), rgba(9,11,18,.85)) padding-box, var(--line) border-box; } .projects-meta div { display: flex; align-items: baseline; gap: 8px; padding: 12px 22px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .projects-meta div + div { border-left: 1px solid var(--border); } .projects-meta b { font-family: var(--font); font-size: 1.35rem; letter-spacing: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .projects-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* karta projektu: akcent podľa data-acc, vrstvenie z panelového systému */ .project-card { --acc-rgb: 34,211,238; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-cut); --tick: rgba(var(--acc-rgb), .85); --pl: linear-gradient(160deg, rgba(var(--acc-rgb), .8), rgba(var(--acc-rgb), .12) 32%, rgba(255,255,255,.05) 65%, rgba(var(--acc-rgb), .45)); --pt: radial-gradient(520px 260px at 50% 0%, rgba(var(--acc-rgb), .1), transparent 70%); transition: transform .45s var(--ease), box-shadow .45s; } .project-card[data-acc="violet"] { --acc-rgb: 167,139,250; } .project-card[data-acc="gold"] { --acc-rgb: 251,191,36; } .project-card[data-acc="rose"] { --acc-rgb: 251,113,133; } .project-card[data-acc="green"] { --acc-rgb: 52,211,153; } .project-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px -40px rgba(var(--acc-rgb), .55); } .project-card.spotlight::before { z-index: 2; background: radial-gradient(460px circle at var(--mx) var(--my), rgba(var(--acc-rgb), .13), transparent 45%); } .project-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; --pt: radial-gradient(700px 400px at 20% 50%, rgba(var(--acc-rgb), .14), transparent 65%); } .project-card.featured .project-shot { aspect-ratio: auto; height: 100%; min-height: 420px; border-right: 1px solid var(--border); } /* náhľad (tlačidlo): browser mock alebo telefón na gradiente */ .project-shot { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; width: 100%; display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0b0e16; color: inherit; text-align: left; cursor: zoom-in; border-bottom: 1px solid var(--border); font: inherit; } .project-shot:focus-visible { outline: 2px solid rgba(var(--acc-rgb), .9); outline-offset: -2px; } .shot-browser img { position: absolute; left: 0; top: 30px; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top; transition: transform .8s var(--ease), filter .5s; will-change: transform; } .shot-bar { position: absolute; left: 0; top: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); z-index: 2; } .shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.14); } .shot-bar i:nth-child(1) { background: rgba(251,113,133,.7); } .shot-bar i:nth-child(2) { background: rgba(251,191,36,.7); } .shot-bar i:nth-child(3) { background: rgba(52,211,153,.7); } .shot-bar b { margin-left: 10px; flex: 1; text-align: center; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 6px; padding: 2px 10px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; } .shot-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 100%, rgba(var(--acc-rgb), .32), transparent 70%), radial-gradient(circle at 15% 15%, rgba(255,255,255,.05), transparent 30%), linear-gradient(160deg, #0d1019, #070911); } .shot-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 70% at 50% 90%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 90%, #000 30%, transparent 100%); } .shot-phone .phone { position: absolute; left: 50%; top: 11%; width: 44%; min-width: 150px; max-width: 220px; transform: translateX(-50%); padding: 7px; border-radius: 28px; background: #0b0d14; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 80px -30px rgba(0,0,0,1), 0 0 0 1px rgba(0,0,0,.6), 0 0 60px -20px rgba(var(--acc-rgb), .5); transition: transform .8s var(--ease); will-change: transform; z-index: 2; } .shot-phone .phone::before { content: ""; position: absolute; left: 50%; top: 13px; width: 28%; height: 5px; border-radius: 6px; background: #05060a; transform: translateX(-50%); z-index: 3; } .shot-phone .phone img { display: block; width: 100%; height: auto; border-radius: 21px; } .shot-phone .phone-2 { left: 74%; top: 22%; width: 38%; min-width: 130px; max-width: 190px; transform: translateX(-50%) rotate(8deg); opacity: .85; z-index: 1; filter: brightness(.8); } .shot-phone .phone-2 img { border-radius: 19px; } .project-card.featured .shot-phone .phone { width: 40%; min-width: 180px; max-width: 250px; left: 40%; top: 9%; } .project-card.featured .shot-phone .phone-2 { left: 68%; top: 18%; width: 34%; } .project-shot:hover .shot-browser img, .project-card:hover .shot-browser img { transform: scale(1.04) translateY(-2%); } .project-card:hover .shot-phone .phone { transform: translateX(-50%) translateY(-10px); } .project-card:hover .shot-phone .phone-2 { transform: translateX(-50%) translateY(-6px) rotate(10deg); } .shot-badge { position: absolute; right: 12px; top: 40px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 4px 10px 4px 10px; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #e8ecf6; background: rgba(5,6,10,.7); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); } .shot-phone .shot-badge { top: 12px; } .shot-badge i { width: 10px; height: 10px; border: 1.5px solid rgba(var(--acc-rgb), .95); border-radius: 2px; box-shadow: 2px 2px 0 -.5px rgba(var(--acc-rgb), .5); } .shot-badge em { font-style: normal; font-weight: 700; color: rgba(var(--acc-rgb), 1); } .shot-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 42px 16px 16px; font-weight: 700; font-size: .92rem; color: #fff; background: linear-gradient(transparent, rgba(5,6,10,.85)); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); } .shot-cta .arrow { display: inline-block; transition: transform .3s var(--ease); } .project-card:hover .shot-cta, .project-shot:focus-visible .shot-cta { opacity: 1; transform: none; } .project-card:hover .shot-cta .arrow { transform: translateX(4px); } @media (hover: none) { .shot-cta { opacity: 1; transform: none; padding-top: 30px; } } .project-body { position: relative; z-index: 1; padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .project-card.featured .project-body { padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 38px); justify-content: center; } .project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .project-tags span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--acc-rgb), 1); padding: 4px 8px; border-radius: 3px 8px 3px 8px; border: 1px solid rgba(var(--acc-rgb), .35); background: rgba(var(--acc-rgb), .07); } .project-body h3 { font-size: 1.2rem; margin: 0 0 .6rem; letter-spacing: -.01em; } .project-card.featured .project-body h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); } .project-body p { color: var(--muted); font-size: .94rem; line-height: 1.6; margin: 0 0 1rem; } .project-body p strong { color: var(--text); } .project-card.featured .project-body p { font-size: 1.02rem; } .project-card.featured .project-feats { margin-top: .4rem; } .project-feats { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .project-feats li { font-size: .76rem; font-weight: 600; color: #cbd2e0; padding: 5px 10px 5px 8px; border-radius: 4px 10px 4px 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); display: inline-flex; align-items: center; gap: 6px; } .project-feats li::before { content: "✓"; font-size: .7rem; color: rgba(var(--acc-rgb), 1); } .projects-cta { position: relative; z-index: 1; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 28px; border-radius: var(--r-cut); border: 1px solid transparent; background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(167,139,250,.06)) padding-box, linear-gradient(rgba(9,11,18,.9), rgba(9,11,18,.9)) padding-box, linear-gradient(90deg, var(--cyan), rgba(167,139,250,.5) 50%, var(--gold)) border-box; } .projects-cta b { display: block; font-size: 1.15rem; } .projects-cta > div > span { color: var(--muted); font-size: .94rem; } .projects-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; } .lightbox.open { opacity: 1; visibility: visible; transition: opacity .35s; } .lb-backdrop { position: absolute; inset: 0; background: rgba(3,4,8,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: zoom-out; } .lb-panel { position: relative; width: min(1320px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; transform: translateY(20px) scale(.98); transition: transform .45s var(--ease); } .lightbox.open .lb-panel { transform: none; } .lb-head { display: flex; align-items: center; gap: 16px; padding: 0 2px; } .lb-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; } .lb-title b { font-size: 1.15rem; } .lb-count { margin-left: auto; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: var(--muted); white-space: nowrap; } .lb-btn { appearance: none; -webkit-appearance: none; width: 46px; height: 46px; border-radius: 4px 14px 4px 14px; border: 1px solid transparent; background: linear-gradient(rgba(12,15,24,.9), rgba(12,15,24,.9)) padding-box, var(--line) border-box; color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), background .3s, box-shadow .3s; flex: 0 0 auto; } .lb-btn:hover { transform: translateY(-2px); background: linear-gradient(rgba(20,24,36,.95), rgba(20,24,36,.95)) padding-box, linear-gradient(155deg, var(--cyan), rgba(167,139,250,.6)) border-box; box-shadow: 0 0 30px -10px rgba(34,211,238,.7); } .lb-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .lb-btn[disabled] { opacity: .3; pointer-events: none; } .lb-close { font-size: 1.9rem; } .lb-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 0; } .lb-figure { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lb-frame { position: relative; display: inline-block; max-width: 100%; border-radius: 10px 22px 10px 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0b0e16; box-shadow: 0 60px 120px -40px #000, 0 0 0 1px rgba(0,0,0,.6), 0 0 90px -30px rgba(34,211,238,.35); transition: opacity .3s, transform .4s var(--ease); } .lb-frame.switching { opacity: 0; transform: translateX(var(--dir, 20px)) scale(.985); transition: none; } .lb-frame img { display: block; max-width: min(92vw, 1320px); max-height: calc(100vh - 210px); width: auto; height: auto; } .lb-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); } .lb-bar i { width: 8px; height: 8px; border-radius: 50%; } .lb-bar i:nth-child(1) { background: rgba(251,113,133,.7); } .lb-bar i:nth-child(2) { background: rgba(251,191,36,.7); } .lb-bar i:nth-child(3) { background: rgba(52,211,153,.7); } .lb-bar b { margin: 0 auto; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 6px; padding: 2px 12px; } .lb-frame.is-phone { border-radius: 40px; padding: 10px; border-color: rgba(255,255,255,.2); background: #0a0c13; } .lb-frame.is-phone .lb-bar { display: none; } .lb-frame.is-phone img { border-radius: 30px; max-height: calc(100vh - 230px); } .lb-frame.is-phone::before { content: ""; position: absolute; left: 50%; top: 19px; width: 72px; height: 7px; border-radius: 8px; background: #05060a; transform: translateX(-50%); z-index: 2; } .lb-spinner { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--cyan); animation: spin 1s linear infinite; opacity: 0; transition: opacity .2s; } .lb-frame.loading .lb-spinner { opacity: 1; } .lb-frame.loading img { opacity: .35; } @keyframes spin { to { transform: rotate(360deg); } } .lb-figure figcaption { color: var(--muted); font-size: .94rem; text-align: center; max-width: 720px; } .lb-figure figcaption b { color: var(--text); } .lb-dots { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .lb-dots button { appearance: none; -webkit-appearance: none; width: 26px; height: 6px; border: 0; padding: 0; border-radius: 3px; background: rgba(255,255,255,.16); cursor: pointer; transition: background .3s, width .3s var(--ease), box-shadow .3s; } .lb-dots button:hover { background: rgba(255,255,255,.4); } .lb-dots button[aria-selected="true"] { width: 44px; background: var(--grad); box-shadow: 0 0 14px -2px rgba(34,211,238,.8); } .lb-hint { text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(154,163,181,.6); } html.lb-open, html.lb-open body { overflow: hidden; } /* ---------- FAQ ---------- */ .faq-acc { counter-reset: faq; } .faq-acc .accordion-item { border: 1px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--line) border-box; margin-bottom: 10px; border-radius: var(--r-cut-sm) !important; overflow: hidden; counter-increment: faq; transition: box-shadow .4s; } .faq-acc .accordion-item:has(.accordion-button:not(.collapsed)) { background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(155deg, var(--cyan), rgba(255,255,255,.06) 40%, rgba(167,139,250,.5)) border-box; box-shadow: 0 30px 60px -40px rgba(34,211,238,.5); } .faq-acc .accordion-button { background: transparent; color: var(--text); font-weight: 700; font-size: 1.05rem; padding: 1.1rem 1.4rem 1.1rem 4.2rem; box-shadow: none; position: relative; } .faq-acc .accordion-button::before { content: counter(faq, decimal-leading-zero); position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--cyan); opacity: .75; } .faq-acc .accordion-button:not(.collapsed) { color: #fff; background: rgba(34,211,238,.06); } .faq-acc .accordion-button::after { width: 30px; height: 30px; margin-left: auto; border-radius: 50%; border: 1px solid var(--border-strong); background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat; filter: none; transition: transform .35s var(--ease), border-color .3s, background-color .3s; flex: none; } .faq-acc .accordion-button:not(.collapsed)::after { transform: rotate(45deg); border-color: var(--cyan); background-color: rgba(34,211,238,.15); background-image: linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)); } .faq-acc .accordion-button:focus { box-shadow: 0 0 0 2px rgba(34,211,238,.35); } .faq-acc .accordion-body { color: var(--muted); padding: 1rem 1.4rem 1.3rem 4.2rem; } /* ---------- kontakt ---------- */ .section-contact { overflow: hidden; overflow: clip; isolation: isolate; } .contact-bg { position: absolute; inset: 0; z-index: -1; } .contact-video { width: 100%; height: 100%; object-fit: cover; opacity: .45; } .contact-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg), rgba(5,6,10,.55) 30%, rgba(5,6,10,.7) 70%, var(--bg)); } .contact-form { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-cut); --pb: linear-gradient(rgba(9,11,18,.86), rgba(9,11,18,.86)); --pl: linear-gradient(155deg, rgba(34,211,238,.7), rgba(255,255,255,.08) 35%, rgba(255,255,255,.05) 65%, rgba(167,139,250,.6)); backdrop-filter: blur(16px); box-shadow: 0 60px 120px -50px #000, inset 0 1px 0 rgba(255,255,255,.08); } .form-label { font-weight: 700; font-size: .85rem; color: var(--muted); } .form-control, .form-select { background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); color: #fff; border-radius: 12px; padding: .75rem 1rem; } /* natívny rozbaľovací zoznam musí byť tmavý, inak je biely text na bielom */ .form-select { color-scheme: dark; } .form-select option, .form-select optgroup { background: #0d1019; color: #e7ecf5; } .form-control:focus, .form-select:focus { background: rgba(255,255,255,.07); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.2); color: #fff; } .form-control.is-invalid { border-color: var(--rose); } .form-hint { color: var(--muted); font-size: .85rem; max-width: 420px; } /* ---------- footer ---------- */ .site-footer { padding: 40px 0 30px; border-top: 1px solid var(--border); background: #030408; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 0; padding: 0; } .footer-links a { color: var(--muted); font-weight: 600; } .footer-legal { color: #5f6778; font-size: .78rem; margin: 0; max-width: 900px; } /* ---------- responzívne ---------- */ /* ---------- infografika: medzi chatom a živým webom ---------- */ .gap { display: grid; grid-template-columns: 230px 1fr 230px; align-items: center; gap: 18px; margin: 44px 0 48px; } .gap-end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 22px 16px 18px; border-radius: var(--r-cut); --tick: rgba(34,211,238,.85); --pl: linear-gradient(155deg, rgba(34,211,238,.75), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%, rgba(34,211,238,.35)); --pt: radial-gradient(300px 160px at 50% 0%, rgba(34,211,238,.12), transparent 65%); } .gap-end.good { --tick: rgba(52,211,153,.85); --pl: linear-gradient(155deg, rgba(52,211,153,.85), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%, rgba(52,211,153,.4)); --pt: radial-gradient(300px 160px at 50% 0%, rgba(52,211,153,.14), transparent 65%); box-shadow: 0 0 70px -20px rgba(52,211,153,.55), inset 0 1px 0 rgba(255,255,255,.07); } .gap-ico { width: 58px; height: 58px; border-radius: 4px 16px 4px 16px; display: grid; place-items: center; font-size: 1.65rem; margin-bottom: .6rem; border: 1px solid transparent; background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(140deg, var(--cyan), rgba(167,139,250,.8)) border-box; box-shadow: 0 0 30px -10px rgba(34,211,238,.8); } .gap-end.good .gap-ico { background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(140deg, var(--green), rgba(34,211,238,.8)) border-box; box-shadow: 0 0 30px -10px rgba(52,211,153,.9); } .gap-end b { font-size: 1.05rem; } .gap-end small { color: var(--muted); font-size: .8rem; } .gap-mid { position: relative; display: grid; gap: 14px; justify-items: center; padding: 8px 6px; } .gap-line { position: relative; width: 100%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(251,113,133,.75) 0 8px, transparent 8px 16px); } .gap-line::before, .gap-line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; } .gap-line::before { left: -2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); } .gap-line::after { right: -2px; background: var(--green); box-shadow: 0 0 12px var(--green); } .gap-line i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 2px rgba(255,255,255,.7); animation: gapDot 3.2s var(--ease) infinite; } @keyframes gapDot { 0% { left: 0; opacity: 0; transform: scale(1); } 8% { opacity: 1; } 42% { left: calc(50% - 6px); opacity: 1; } 52% { left: calc(50% - 6px); } 88% { left: calc(100% - 12px); opacity: 1; transform: scale(1); } 95% { left: calc(100% - 12px); opacity: 1; transform: scale(2.3); } 100% { left: calc(100% - 12px); opacity: 0; transform: scale(2.6); } } .gap-missing { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .gap-missing span { display: inline-flex; align-items: center; gap: 6px; padding: .38rem .7rem; border-radius: 999px; border: 1px dashed rgba(251,113,133,.6); background: rgba(251,113,133,.08); color: #fecdd3; font-size: .82rem; font-weight: 600; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .5s var(--ease), transform .6s var(--ease); } .gap-missing span i { font-style: normal; font-size: .95rem; } .gap.in .gap-missing span { opacity: 1; transform: none; } .gap.in .gap-missing span:nth-child(2) { transition-delay: .12s; } .gap.in .gap-missing span:nth-child(3) { transition-delay: .24s; } .gap.in .gap-missing span:nth-child(4) { transition-delay: .36s; } .gap.in .gap-missing span:nth-child(5) { transition-delay: .48s; } .gap-label { font-size: .88rem; color: var(--muted); text-align: center; } .gap-label b { color: #a5f3fc; } /* ---------- CTA pásy ---------- */ .cta-band { position: relative; padding: clamp(28px, 5vw, 64px) 0; overflow: clip; isolation: isolate; } .cta-band.compact { padding: clamp(18px, 3vw, 36px) 0; } .cta-band.has-img { padding: clamp(60px, 9vw, 130px) 0; } .cta-img { position: absolute; inset: 0; z-index: -1; } .cta-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; opacity: .92; filter: saturate(1.08); } .cta-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,6,10,.92), rgba(5,6,10,.7) 42%, rgba(5,6,10,.12) 72%, rgba(5,6,10,.4)), linear-gradient(to bottom, var(--bg), transparent 18%, transparent 82%, var(--bg)); } .cta-box { display: grid; grid-template-columns: 1.25fr auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r-cut); --tick: rgba(34,211,238,.85); --pt: linear-gradient(135deg, rgba(34,211,238,.13), rgba(167,139,250,.09) 55%, rgba(251,191,36,.06)); --pl: linear-gradient(155deg, var(--cyan), rgba(167,139,250,.55) 45%, rgba(255,255,255,.06) 75%, var(--gold)); box-shadow: 0 40px 90px -50px rgba(34,211,238,.6), inset 0 1px 0 rgba(255,255,255,.1); } .has-img .cta-box { grid-template-columns: 1fr; max-width: 640px; --pb: linear-gradient(rgba(9,11,18,.8), rgba(9,11,18,.8)); backdrop-filter: blur(14px); } .has-img .cta-actions { justify-content: start; } .has-img .cta-price { justify-self: start; } .cta-text .eyebrow { margin-bottom: .4rem; } .cta-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: .3rem 0 .6rem; line-height: 1.15; } .cta-text p { color: var(--muted); margin: 0; max-width: 560px; } .cta-actions { display: grid; grid-template-columns: auto auto; gap: 12px; align-items: center; justify-content: end; } .cta-actions .btn { white-space: nowrap; } .cta-price { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: baseline; gap: 6px; padding: .5rem 1rem; border-radius: 999px; border: 1px dashed rgba(255,255,255,.22); background: rgba(5,6,10,.5); font-family: var(--mono); white-space: nowrap; } .cta-price b { font-size: 1.1rem; color: #fff; } .cta-price small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cta-price i { font-style: normal; color: var(--cyan); font-weight: 800; margin: 0 4px; } .compact .cta-box { padding: clamp(18px, 2.5vw, 30px) clamp(20px, 3vw, 36px); } .compact .cta-text h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 .35rem; } .compact .cta-text p { font-size: .95rem; } /* ---------- FAQ: 3D prstenec ---------- */ .faq-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; } .faq-3d { position: sticky; top: calc(var(--nav-h) + 40px); } .faq-stage { position: relative; height: 360px; perspective: 900px; display: grid; place-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .faq-ring { position: relative; z-index: 1; width: 124px; height: 124px; transform-style: preserve-3d; will-change: transform; } .faq-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: var(--r-cut-sm); border: 1px solid rgba(34,211,238,.3); background: linear-gradient(160deg, rgba(16,18,30,.94), rgba(9,11,18,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -20px rgba(0,0,0,.9); transform: rotateY(calc(var(--i) * 45deg)) translateZ(190px); backface-visibility: hidden; font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.2; color: #d5dbe7; transition: border-color .4s, box-shadow .4s, color .4s, background .4s; } .faq-face i { font-style: normal; font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); } .faq-face.active { border-color: var(--cyan); color: #fff; box-shadow: 0 0 40px -6px rgba(34,211,238,.85), inset 0 0 0 1px rgba(34,211,238,.4), inset 0 1px 0 rgba(255,255,255,.1); background: linear-gradient(160deg, rgb(20,64,80), rgb(37,34,60)); } .faq-orb { position: absolute; z-index: 0; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--cyan) 30%, var(--violet) 70%, transparent 72%); box-shadow: 0 0 60px 10px rgba(34,211,238,.35), 0 0 120px 30px rgba(167,139,250,.2); animation: faqOrb 4s ease-in-out infinite; } @keyframes faqOrb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } .faq-shadow { position: absolute; left: 50%; bottom: 22px; width: 300px; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(34,211,238,.35), rgba(167,139,250,.15) 45%, transparent 70%); filter: blur(10px); pointer-events: none; } .faq-3d-hint { text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; } /* ---------- späť hore (desktop) ---------- */ .to-top { position: fixed; right: 26px; bottom: 26px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; background: rgba(9,11,18,.92); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none; transition: opacity .35s, transform .45s var(--ease), box-shadow .3s; box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 0 22px -4px rgba(34,211,238,.55), 0 16px 40px -14px rgba(34,211,238,.8), inset 0 1px 0 rgba(255,255,255,.08); } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top.show:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(34,211,238,.95), inset 0 1px 0 rgba(255,255,255,.12); } .to-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .tt-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; } .tt-ring { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .15s linear; } .tt-arrow, .tt-pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .25s, transform .3s var(--ease); } .tt-arrow { font-size: 1.3rem; font-weight: 800; line-height: 1; } .tt-pct { font-family: var(--mono); font-style: normal; font-size: .68rem; font-weight: 700; color: #a5f3fc; opacity: 0; transform: translate(-50%, -20%); } .to-top:hover .tt-arrow { opacity: 0; transform: translate(-50%, -90%); } .to-top:hover .tt-pct { opacity: 1; transform: translate(-50%, -50%); } @media (min-width: 992px) { .price-card.featured { transform: scale(1.04); } .price-card.featured:hover { transform: scale(1.04) translateY(-8px); } } @media (max-width: 1199px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } .project-card.featured .project-shot { min-height: 380px; } .bento { grid-template-columns: repeat(2, 1fr); } .bento-item.span-2 { grid-column: span 2; } .bento-item.calc-item { grid-column: span 2; grid-row: auto; } .who-grid { grid-template-columns: repeat(4, 1fr); } .who-card:nth-child(4) { grid-column: span 2; } .who-card:nth-child(5) { grid-column: 2 / span 2; } .gap { grid-template-columns: 200px 1fr 200px; gap: 14px; } .vs-row { grid-template-columns: 170px 1fr; } .faq-layout { grid-template-columns: 300px minmax(0, 1fr); } .faq-face { transform: rotateY(calc(var(--i) * 45deg)) translateZ(160px); } } @media (max-width: 991px) { .peek { position: static; margin: 4px 0 6px; align-items: flex-start; } .peek-text { margin: 6px 0 0; font-size: 1.45rem; transform: rotate(-3deg); transform-origin: left top; } .peek-arrow { width: 110px; height: 70px; transform: scaleY(-1); } .peek.in .peek-arrow { animation-name: peekNudgeDown; } .site-nav .navbar-collapse { background: rgba(7, 9, 14, .97); border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 14px; margin-top: 10px; box-shadow: 0 30px 60px -20px #000; } .site-nav .nav-link { padding: .6rem .5rem; border-bottom: 1px solid var(--border); } .site-nav .nav-link::after { display: none; } .site-nav .nav-item:last-child .nav-link { border-bottom: 0; } .hero { padding-top: calc(var(--nav-h) + 40px); } .hero-stats { grid-template-columns: repeat(2, 1fr); } .chain { grid-template-columns: repeat(3, 1fr); gap: 10px; } .chain-node { padding: 14px 8px 12px; } .node-icon { font-size: 1.5rem; } .chain-meter strong { font-size: 1.3rem; } .power-grid { grid-template-columns: 1fr; } .who-hero { grid-template-columns: 1fr; } .who-hero-demo .chat-window { transform: none; } .honest { grid-template-columns: 200px 1fr; } .cta-box { grid-template-columns: 1fr; } .cta-actions { justify-content: start; } .faq-layout { grid-template-columns: 1fr; } .faq-3d { position: static; } .faq-stage { height: 250px; } .faq-ring { width: 100px; height: 100px; } .faq-face { transform: rotateY(calc(var(--i) * 45deg)) translateZ(150px); font-size: .64rem; } .faq-face i { font-size: 1.4rem; } .faq-shadow { bottom: 10px; width: 240px; } .to-top { display: none; } .price-card { padding: 26px 22px 24px; } .price-card.featured { --pb: linear-gradient(rgba(14,12,26,.96), rgba(14,12,26,.96)); } .deal-strip { grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 14px 16px; } .deal-item b { font-size: .88rem; } .gpu-price { top: calc(var(--nav-h) + 10px); padding: 10px 14px; } .gpu-step h3 { font-size: 1.4rem; } .gpu-copy { bottom: 6vh; } } @media (max-width: 767px) { .projects-grid { grid-template-columns: 1fr; gap: 16px; } .project-card.featured { grid-column: auto; display: flex; } .project-card.featured .project-shot { aspect-ratio: 16 / 11; height: auto; min-height: 0; border-right: 0; } .project-card.featured .shot-phone .phone, .shot-phone .phone { width: 46%; min-width: 0; max-width: 200px; left: 42%; top: 9%; } .project-card.featured .shot-phone .phone-2, .shot-phone .phone-2 { left: 72%; top: 20%; width: 40%; min-width: 0; } .projects-meta { flex-wrap: wrap; justify-content: center; width: auto; } .projects-meta div { padding: 10px 14px; } .projects-meta div + div { border-left: 0; } .projects-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px; } .projects-cta-btns { justify-content: center; } .projects-cta-btns .btn { flex: 1; } .lightbox { padding: 10px; } .lb-stage { grid-template-columns: 1fr; } .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; } .lb-nav:hover { transform: translateY(-50%); } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-frame img { max-width: calc(100vw - 20px); max-height: calc(100vh - 200px); } .lb-frame.is-phone { padding: 6px; border-radius: 30px; } .lb-frame.is-phone img { border-radius: 24px; } .lb-frame.is-phone::before { top: 12px; width: 60px; height: 6px; } .lb-hint { display: none; } .lb-title b { font-size: 1rem; } body { font-size: 16px; } .row.g-5 { --bs-gutter-x: 1.5rem; } .hero-typed { white-space: normal; } .bento { grid-template-columns: 1fr; } .bento-item.span-2, .bento-item.calc-item { grid-column: span 1; grid-row: auto; } .calc-result { grid-template-columns: 1fr 1fr; } .calc-arrow { display: none; } .included-list { grid-template-columns: 1fr; } .honest { grid-template-columns: 1fr; gap: 18px; } .honest-media { aspect-ratio: 16 / 9; } .honest-cols { grid-template-columns: 1fr; } .gap { grid-template-columns: 1fr; gap: 12px; } .gap-end { display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "ico b" "ico small"; column-gap: 14px; row-gap: 0; text-align: left; align-items: center; padding: 14px 16px; } .gap-ico { grid-area: ico; width: 52px; height: 52px; margin: 0; font-size: 1.45rem; } .gap-end b { grid-area: b; align-self: end; } .gap-end small { grid-area: small; align-self: start; } .gap-mid { padding: 4px 0; gap: 10px; } .gap-line { width: 2px; height: 44px; background: repeating-linear-gradient(180deg, rgba(251,113,133,.75) 0 8px, transparent 8px 16px); } .gap-line::before { left: -4px; top: -2px; } .gap-line::after { left: -4px; right: auto; top: auto; bottom: -2px; } .gap-line i { display: none; } .vs-row { grid-template-columns: 1fr; gap: 8px; } .vs-bar { grid-template-columns: 1fr; gap: 3px; } .vs-bar b { font-size: .82rem; } .who-photo { height: 180px; } .cta-band { padding: 26px 0; } .cta-actions { grid-template-columns: 1fr; justify-content: stretch; } .cta-actions .btn { width: 100%; text-align: center; } .cta-price { justify-self: stretch; justify-content: center; } .ai-variant { grid-template-columns: 1fr; text-align: center; padding: 18px 16px; } .ai-variant .ai-switch { justify-self: center; } .pm-row { grid-template-columns: 104px 1fr; } .pricing-foot { flex-direction: column; align-items: stretch; text-align: center; } .pricing-foot .btn { width: 100%; text-align: center; } .who-grid { grid-template-columns: 1fr; } .who-card, .who-card:nth-child(4), .who-card:nth-child(5) { grid-column: auto; } .who-title { min-height: 0; } .chain { grid-template-columns: repeat(2, 1fr); } .chain-node small { display: none; } .chain-meter { grid-template-columns: repeat(3, 1fr); gap: 8px; } .chain-meter div { padding: 10px 12px; } .chain-meter strong { font-size: 1rem; } .scene-secret { height: 220vh; } .scene-gpu { height: 420vh; } .gpu-price { right: 4vw; } .gpu-price strong { font-size: 1.3rem; } .timeline-line { left: 21px; } .tl-dot { width: 44px; height: 44px; } .control-badge.b1 { left: 6px; } .control-badge.b2 { right: 6px; } .ai-switch-btn { min-width: 0; padding: .6rem 1rem; font-size: .9rem; } .deal-strip { grid-template-columns: 1fr; gap: 12px; text-align: left; } .deal-item.win { flex-direction: row; justify-content: flex-start; text-align: left; } .deal-vs { justify-self: center; width: 36px; height: 36px; } .pricing-perks li { font-size: .8rem; } .price-amount strong { font-size: 3rem; } .included-list li { padding: .55rem .7rem .55rem .55rem; } .cursor-glow { display: none; } } /* ---------- prístupnosť: menej pohybu ---------- */ @media (prefers-reduced-motion: reduce) { .lb-frame.switching { transform: none; } .shot-browser img, .shot-phone .phone { transition: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal, .split .ch { opacity: 1; transform: none; } .who-hero .msg { opacity: 1; transform: none; } .vs-bar i { width: max(var(--w), 12px); } .gap-missing span { opacity: 1; transform: none; } .gap-line i { display: none; } .pm-seg i.on { transform: none; } .faq-orb { animation: none; } .peek-arrow path { stroke-dashoffset: 0; } .peek.in .peek-arrow { animation: none; } .hero-video, .contact-video, .gpu-video { display: none; } .cursor-glow { display: none; } } /* ---- hero: sľuby pod CTA (online kúpa) ---- */ .hero-promise { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -1.5rem 0 2.4rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .hero-promise span { white-space: nowrap; } @media (max-width: 575.98px) { .hero-promise { gap: 6px 14px; margin-top: -1.2rem; font-size: .64rem; } } /* ============================================================ UKÁŽKA VÝSLEDKU Spúšťače („Pozrieť výsledok") + modal s klikateľným prototypom v ráme prehliadača. ============================================================================ */ /* — živá adresa v hero chate je tlačidlo — */ .msg.live.is-demo { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(52,211,153,.35); background: rgba(16,185,129,.1); font: inherit; color: inherit; cursor: pointer; text-align: left; transition: border-color .25s, background .25s, transform .25s; } .msg.live.is-demo .live-url { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .msg.live.is-demo em { font-style: normal; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-left: 1px solid rgba(255,255,255,.14); padding-left: 8px; } .msg.live.is-demo:hover { border-color: rgba(52,211,153,.75); background: rgba(16,185,129,.18); transform: translateY(-2px); } /* — pás pod konzolou v sekcii Riešenie — */ .result-strip { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 18px; width: 100%; margin-top: 20px; padding: 16px 18px; border-radius: var(--r-cut-sm, 4px 14px 4px 14px); cursor: pointer; text-align: left; border: 1px solid transparent; font: inherit; color: inherit; background: linear-gradient(140deg, rgba(52,211,153,.14), transparent 55%) padding-box, linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) padding-box, linear-gradient(120deg, rgba(52,211,153,.6), rgba(96,165,250,.35)) border-box; transition: transform .35s var(--ease), box-shadow .35s, filter .35s; } .result-strip:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -40px rgba(52,211,153,.6); } .result-strip .rs-shot { display: block; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0e1117; } .rs-shot .rs-bar { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: rgba(255,255,255,.06); font-style: normal; } .rs-shot .rs-bar em { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); } .rs-shot .rs-bar b { margin-left: 4px; font-family: var(--mono); font-size: .46rem; font-weight: 400; color: var(--muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; } .rs-shot .rs-body { display: block; padding: 8px 7px 10px; background: linear-gradient(160deg, #2a1d14, #12100e); font-style: normal; } .rs-shot .rs-body u, .rs-shot .rs-body s { display: block; border-radius: 2px; text-decoration: none; } .rs-shot .rs-body u { height: 4px; background: rgba(255,255,255,.26); margin-bottom: 4px; } .rs-shot .rs-body u.w70 { width: 70%; } .rs-shot .rs-body u.w40 { width: 40%; background: rgba(192,112,58,.85); height: 6px; } .rs-shot .rs-body s { height: 22px; background: linear-gradient(120deg, rgba(192,112,58,.5), rgba(255,255,255,.1)); margin: 6px 0; } .result-strip .rs-text { display: block; } .result-strip .rs-text b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.02rem; margin-bottom: .3rem; } .result-strip .rs-text small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; } .rs-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(52,211,153,.4); border-radius: 999px; padding: 2px 9px; } .result-strip .rs-go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 16px; white-space: nowrap; transition: border-color .3s, background .3s; } .result-strip:hover .rs-go { border-color: rgba(52,211,153,.8); background: rgba(52,211,153,.14); } .result-strip:hover .arrow { transform: translateX(4px); } /* — malé spúšťače v časovej osi a pod balíkmi — */ .tl-result, .foot-demo { display: inline-flex; align-items: center; gap: 8px; margin-top: .9rem; padding: 8px 15px; border-radius: 999px; border: 1px dashed rgba(52,211,153,.45); background: rgba(16,185,129,.08); color: #d7fbe9; font: inherit; font-size: .85rem; cursor: pointer; transition: border-color .3s, background .3s, transform .3s; } .tl-result:hover, .foot-demo:hover { border-style: solid; border-color: rgba(52,211,153,.9); background: rgba(16,185,129,.16); transform: translateY(-2px); } .foot-demo { margin-top: 1rem; color: var(--muted); } .foot-demo b { color: #d7fbe9; font-weight: 600; } /* — modal — */ .demo-modal { position: fixed; inset: 0; z-index: 3100; display: none; padding: clamp(8px, 1.4vw, 18px); } .demo-modal.open { display: grid; place-items: center; } .demo-backdrop { position: absolute; inset: 0; background: rgba(2,3,6,.95); backdrop-filter: blur(10px); animation: demoFade .3s ease both; } @keyframes demoFade { from { opacity: 0; } } .demo-shell { position: relative; width: min(1320px, 100%); height: calc(100dvh - clamp(16px, 2.8vw, 36px)); max-height: calc(100dvh - clamp(16px, 2.8vw, 36px)); display: flex; flex-direction: column; border-radius: 6px 22px 6px 22px; overflow: hidden; background: linear-gradient(180deg, #0f1218, #0a0c11); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 60px 120px -50px rgba(0,0,0,.9); animation: demoIn .42s var(--ease) both; } @keyframes demoIn { from { opacity: 0; transform: translateY(24px) scale(.985); } } .demo-top { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,.08); } .demo-head { flex: 1; min-width: 0; } .demo-head .eyebrow { margin-bottom: .25rem; } .demo-head h2 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); margin: 0; } .demo-close { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; font-size: .95rem; cursor: pointer; transition: background .25s, transform .25s; } .demo-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } .demo-tabs { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.06); } .demo-tabs::-webkit-scrollbar { display: none; } .demo-tab { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; transition: .25s; } .demo-tab:hover { color: #fff; border-color: rgba(255,255,255,.32); } .demo-tab[aria-selected="true"] { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.6); color: #d7fbe9; } .demo-browser { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 16px; border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; background: #fbf7f1; } .demo-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #15181f; border-bottom: 1px solid rgba(255,255,255,.08); } .demo-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); } .demo-bar > i:first-child { background: #ff5f57; } .demo-bar > i:nth-child(2) { background: #febc2e; } .demo-bar > i:nth-child(3) { background: #28c840; } .demo-url { flex: 1; margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.06); font-family: var(--mono); font-size: .72rem; color: #e7ecf5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-url b { color: var(--muted); font-weight: 400; } .demo-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #34d399; } .demo-stage { position: relative; flex: 1; min-height: 0; background: #fbf7f1; } .demo-stage iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; background: #fbf7f1; } .demo-load { position: absolute; inset: 0; display: grid; place-items: center; background: #fbf7f1; opacity: 0; pointer-events: none; transition: opacity .2s; } .demo-load.on { opacity: 1; } .demo-load span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(64,44,33,.2); border-top-color: #c0703a; animation: demoSpin .8s linear infinite; } @keyframes demoSpin { to { transform: rotate(360deg); } } .demo-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 20px 16px; border-top: 1px solid rgba(255,255,255,.08); } .demo-foot p { flex: 1; min-width: 240px; margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.55; } .demo-foot p b { color: #e7ecf5; } .demo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html.demo-open, html.demo-open body { overflow: hidden; } /* na desktope musí pás preskočiť absolútne pozicovanú šípku „a takto to vyzerá…" */ @media (min-width: 992px) { .result-strip { margin-top: 96px; } } @media (max-width: 991.98px) { .result-strip { grid-template-columns: 76px 1fr; gap: 14px; } .result-strip .rs-go { grid-column: 1 / -1; justify-content: center; } } .demo-note-sm { display: none; } @media (max-width: 575.98px) { .demo-shell { border-radius: 4px 14px 4px 14px; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); } .demo-top { padding: 10px 12px 8px; } .demo-head .eyebrow { display: none; } .demo-tabs { padding: 8px 12px; } .demo-tab { padding: 7px 12px; font-size: .79rem; } .demo-browser { margin: 0 8px; } .demo-foot { padding: 10px 12px 12px; gap: 10px; } .demo-note { display: none; } .demo-note-sm { display: block; flex: 1; min-width: 200px; margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.5; } .demo-note-sm b { color: #e7ecf5; } .demo-actions .btn { flex: 1; justify-content: center; } .result-strip { padding: 14px; } .result-strip .rs-text small { font-size: .82rem; } } /* ============================================================ KTO ZA TÝM STOJÍ 3D avatar (three.js) + vizitka. Avatar sa načíta až keď sa sekcia blíži. ============================================================================ */ .section-author { position: relative; overflow: clip; } .author-grid { display: grid; grid-template-columns: minmax(300px, .82fr) 1fr; gap: 34px; align-items: stretch; } .author-stage { display: flex; flex-direction: column; gap: 12px; } .av-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; min-height: 380px; border-radius: var(--r-cut); overflow: hidden; border: 1px solid transparent; background: radial-gradient(85% 60% at 50% 4%, rgba(34,211,238,.13), transparent 62%) padding-box, radial-gradient(70% 55% at 50% 106%, rgba(167,139,250,.14), transparent 68%) padding-box, linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box, linear-gradient(140deg, rgba(34,211,238,.5), rgba(167,139,250,.3) 45%, rgba(52,211,153,.45)) border-box; } .av-wrap::after { /* jemný podklad pod postavou */ content: ""; position: absolute; left: 50%; bottom: 6%; width: 62%; height: 70px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(96,165,250,.32), transparent 72%); filter: blur(6px); pointer-events: none; } .av-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; } .av-loading, .av-fallback { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--muted); font-size: .88rem; } .av-loading b { font-weight: 500; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .av-loading i { font-style: normal; color: #e7ecf5; } .av-spin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); border-top-color: var(--green); animation: avSpin .9s linear infinite; } @keyframes avSpin { to { transform: rotate(360deg); } } .av-fallback .av-mono { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 1.6rem; letter-spacing: .06em; color: #e7ecf5; background: linear-gradient(140deg, rgba(96,165,250,.3), rgba(167,139,250,.24)); border: 1px solid rgba(255,255,255,.16); } .av-fallback b { color: #e7ecf5; font-size: 1.05rem; } .av-fallback small { max-width: 30ch; line-height: 1.5; } .av-bubble { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 13px 16px; border-radius: 14px 14px 14px 4px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,13,19,.82); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .av-bubble.on { opacity: 1; transform: none; } .av-bubble p { margin: 0; font-size: .92rem; line-height: 1.5; color: #e7ecf5; min-height: 2.8em; } .av-bubble::after { content: ""; position: absolute; left: 18px; bottom: -7px; width: 12px; height: 12px; background: inherit; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); transform: rotate(45deg); } .av-note { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .av-wrap.av-failed + .av-note { opacity: .45; } .author-card { --pt: linear-gradient(150deg, rgba(34,211,238,.1), transparent 55%); --tick: rgba(52,211,153,.8); padding: 30px 30px 28px; border-radius: var(--r-cut); height: 100%; } .author-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; letter-spacing: -.02em; } .author-card h3 small { display: block; margin-top: .35rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; } .author-card > p { color: var(--muted); margin-bottom: 1rem; } .author-facts { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 10px; } .author-facts li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: .92rem; color: var(--muted); line-height: 1.5; } .author-facts li span { font-size: 1.05rem; line-height: 1.3; } .author-facts li i { font-style: normal; } .author-facts li b { color: #e7ecf5; font-weight: 600; } .author-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.5rem 0 1.3rem; } .author-stats div { padding: 14px 10px; border-radius: 4px 14px 4px 14px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); } .author-stats b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg, #fff 30%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .author-stats small { display: block; margin-top: .2rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .author-quote { margin: 0 0 1.5rem; padding: 14px 18px; border-left: 2px solid rgba(52,211,153,.6); border-radius: 0 10px 10px 0; background: rgba(52,211,153,.06); font-size: .97rem; line-height: 1.6; color: #dff5ea; } .author-cta { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 991.98px) { .author-grid { grid-template-columns: 1fr; gap: 24px; } .av-wrap { aspect-ratio: 1 / 1; min-height: 340px; max-height: 60vh; } .author-card { padding: 24px 22px; } } @media (max-width: 575.98px) { .av-wrap { min-height: 300px; } .av-bubble p { font-size: .86rem; } .author-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } .author-stats div { padding: 11px 5px; } .author-stats b { font-size: 1.2rem; } .author-cta .btn { flex: 1; justify-content: center; } } /* ---- „by TechWeb" značka a meno pod avatarom ---- */ .by-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); transition: color .25s, border-color .25s, background .25s; } .by-tag b { color: #e7ecf5; font-weight: 600; letter-spacing: .1em; } .by-tag:hover { color: #e7ecf5; border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.1); } .site-nav .by-tag { margin-right: auto; } .site-footer .brand { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .av-person { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .av-person b { font-size: .98rem; color: var(--text); } .av-person span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } @media (max-width: 991.98px) { .site-nav .by-tag { margin-right: 8px; font-size: .52rem; padding: 3px 8px; } } @media (max-width: 420px) { .site-nav .by-tag { display: none; } } /* ---- avatar: otázky a odpovede ---- */ .av-ask { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .av-ask input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; font: inherit; font-size: .92rem; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: border-color .25s, background .25s; } .av-ask input::placeholder { color: rgba(154,163,181,.85); } .av-ask input:focus { outline: none; border-color: rgba(34,211,238,.65); background: rgba(34,211,238,.07); } .av-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #04121a; background: linear-gradient(120deg, var(--cyan), var(--violet)); box-shadow: 0 14px 30px -14px rgba(34,211,238,.9); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: transform .25s, filter .25s; } .av-send:hover { transform: translateY(-2px); filter: brightness(1.08); } .av-send:disabled { opacity: .45; cursor: progress; transform: none; } .av-chips { display: flex; flex-wrap: wrap; gap: 6px; } .av-chip { padding: 6px 12px; border-radius: 999px; font: inherit; font-size: .78rem; cursor: pointer; color: var(--muted); border: 1px solid rgba(255,255,255,.12); background: transparent; transition: .22s; } .av-chip:hover { color: var(--text); border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.08); } .av-status { min-height: 1.1em; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); opacity: 0; transition: opacity .3s; } .av-status.on { opacity: 1; } .av-dots { display: inline-flex; gap: 5px; align-items: center; height: 1.4em; } .av-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); opacity: .35; animation: avDot 1.1s infinite; } .av-dots i:nth-child(2) { animation-delay: .18s; } .av-dots i:nth-child(3) { animation-delay: .36s; } @keyframes avDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .av-wrap.av-can-talk .av-bubble { bottom: 14px; } @media (max-width: 575.98px) { .av-ask input { padding: 10px 14px; font-size: .88rem; } .av-send { width: 40px; height: 40px; } .av-chip { font-size: .72rem; padding: 5px 10px; } } /* signál „avatar práve hovorí" (viditeľný aj na modeli bez mimiky) */ .av-speaking .av-bubble { border-color: rgba(34,211,238,.45); box-shadow: 0 0 0 1px rgba(34,211,238,.12), 0 20px 50px -30px rgba(34,211,238,.8); } .av-eq { position: absolute; right: 14px; top: 14px; z-index: 3; display: none; align-items: flex-end; gap: 3px; height: 18px; padding: 6px 9px; border-radius: 999px; background: rgba(10,13,19,.75); border: 1px solid rgba(34,211,238,.35); } .av-speaking .av-eq { display: flex; } .av-eq i { width: 3px; height: 5px; border-radius: 2px; background: var(--cyan); animation: avEq .9s ease-in-out infinite; } .av-eq i:nth-child(2) { animation-delay: .12s; } .av-eq i:nth-child(3) { animation-delay: .24s; } .av-eq i:nth-child(4) { animation-delay: .36s; } .av-eq i:nth-child(5) { animation-delay: .06s; } @keyframes avEq { 0%, 100% { height: 5px; opacity: .6; } 50% { height: 15px; opacity: 1; } } /* ============================================================ ÚPRAVY TEXTOV 21.9. Zvýraznenia, na ktoré si pýtal user: ukážky, „LIVE", nadpis Riešenie, lepkavá hlavička. ============================================================================ */ /* tlačidlo „Pozrieť ukážku" v hero chate */ .msg.live.is-demo .demo-cta { font-style: normal; font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #04121a; background: linear-gradient(120deg, var(--cyan), var(--green)); border: 0; border-left: 0; padding: 5px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(34,211,238,.9); animation: demoPulse 2.6s ease-in-out infinite; } @keyframes demoPulse { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 24px -12px rgba(34,211,238,.9); } 50% { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(52,211,153,1); } } /* ručne kreslená šípka priamo v toku (napr. „Príklad“ nad ukážkami) */ .peek.peek-inline { position: static; margin: -6px 0 2px 4px; align-items: flex-start; } .peek.peek-inline .peek-text { margin: 10px 0 0; transform: rotate(-4deg); transform-origin: left top; } .peek.peek-inline .peek-arrow { transform: scaleY(-1); width: 112px; height: 72px; } .peek.peek-inline.in .peek-arrow { animation-name: peekNudgeDown; } /* „Váš projekt je LIVE“ */ .gap-end.is-live { --pt: radial-gradient(120% 100% at 50% 0, rgba(52,211,153,.24), transparent 70%); } .live-title { font-size: 1.12rem; letter-spacing: -.01em; } .live-title em { font-style: normal; font-weight: 800; letter-spacing: .02em; padding: 1px 9px; margin-left: 4px; border-radius: 7px; background: linear-gradient(120deg, var(--green), var(--cyan)); background-size: 200% 100%; color: #04121a; animation: liveShift 3.4s linear infinite, livePop 2.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(52,211,153,.6); } @keyframes liveShift { to { background-position: 200% 0; } } @keyframes livePop { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 60% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } } .gap.in .gap-end.is-live { animation: liveLand .9s var(--ease) .9s both; } @keyframes liveLand { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } } /* sekcia Riešenie: výrazný „eyebrow“ a nadpis ako postupnosť */ .eyebrow-xl { font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .18em; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; margin-bottom: .6rem; } .eyebrow-xl::before { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--grad); margin-bottom: .7rem; } .solution-flow { line-height: 1.15; } .solution-flow i { font-style: normal; color: var(--cyan); padding: 0 .12em; opacity: .85; } /* pás s výsledkom: svetlé, pulzujúce tlačidlo */ .rs-go.is-bright { color: #06121a; background: #fff; border-color: #fff; font-weight: 700; box-shadow: 0 14px 34px -14px rgba(255,255,255,.75); animation: rsNudge 2.4s ease-in-out infinite; } .result-strip:hover .rs-go.is-bright { background: #fff; border-color: #fff; color: #06121a; } @keyframes rsNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } .rs-hint { display: block; margin-top: .45rem; color: #d7fbe9; font-weight: 600; } /* CTA pás „Chcete to tiež?“ — nižší, širší text, obrázok len ako pruh vpravo */ .cta-band.cta-slim { padding: clamp(34px, 4.2vw, 56px) 0; } .cta-band.cta-slim .cta-img { left: auto; right: 0; width: 30%; } .cta-band.cta-slim .cta-img img { object-position: 45% center; /* obrázok sa rozplynie do pozadia — žiadna ostrá hrana zľava ani zhora/zdola */ -webkit-mask-image: radial-gradient(135% 115% at 100% 50%, #000 34%, rgba(0,0,0,.65) 58%, transparent 82%); mask-image: radial-gradient(135% 115% at 100% 50%, #000 34%, rgba(0,0,0,.65) 58%, transparent 82%); } .cta-band.cta-slim .cta-img::after { background: linear-gradient(to right, rgba(5,6,10,.85), rgba(5,6,10,.35) 55%, transparent), linear-gradient(to bottom, rgba(5,6,10,.75), transparent 35%, rgba(5,6,10,.75)); } .cta-band.cta-slim .cta-box { max-width: 1020px; grid-template-columns: 1.3fr auto; align-items: center; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px); gap: clamp(18px, 2.6vw, 34px); } .cta-band.cta-slim .cta-text h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin: .2rem 0 .45rem; } .cta-band.cta-slim .cta-text p { margin: 0; } .cta-band.cta-slim .cta-actions { grid-template-columns: auto; justify-items: stretch; justify-content: end; gap: 10px; } .cta-band.cta-slim .cta-price { justify-self: center; } @media (max-width: 991.98px) { .cta-band.cta-slim .cta-box { grid-template-columns: 1fr; max-width: 680px; } .cta-band.cta-slim .cta-img { width: 100%; left: 0; } .cta-band.cta-slim .cta-img img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); } .cta-band.cta-slim .cta-img::after { background: linear-gradient(to right, rgba(5,6,10,.92), rgba(5,6,10,.7) 42%, rgba(5,6,10,.12) 72%, rgba(5,6,10,.4)), linear-gradient(to bottom, var(--bg), transparent 22%, var(--bg)); } .cta-band.cta-slim .cta-actions { justify-content: start; } } /* Tajomstvo: hlavička ostáva v lepkavej scéne */ .section-head-sticky { margin-bottom: clamp(18px, 3vh, 34px); } .section-head-sticky .section-title { margin-bottom: .5rem; } .section-head-sticky .section-lead { margin-bottom: 0; } .title-tight { font-size: clamp(1.45rem, 3.1vw, 2.5rem); } @media (min-width: 1200px) { .title-tight { white-space: nowrap; } } .lead-flow { font-weight: 500; color: #cfd6e6; } .lead-flow i { font-style: normal; color: var(--cyan); padding: 0 .15em; } .lead-flow b { color: #fff; } .scene-sticky .section-head-sticky { position: relative; z-index: 2; } /* výška hlavičky v lepkavej scéne (aby ju odhalenie neprekrylo) */ .scene-secret .scene-sticky { --secret-head: clamp(120px, 22vh, 200px); } .scene-sticky.revealed .section-head-sticky .section-lead { opacity: .35; transition: opacity .5s; } @media (max-width: 767.98px) { .scene-secret .scene-sticky { --secret-head: 118px; } } /* ============================================================ ÚPRAVY 21.9. (2. dávka) */ /* hlavičky sekcií: bez pevnej šírky, tesnejšie */ .section-head { max-width: none; margin-bottom: clamp(26px, 3.4vw, 44px); } .section-head .section-lead { max-width: 74ch; margin-left: auto; margin-right: auto; } .section-head .section-title { margin-bottom: .55rem; } .section-title-sm { font-size: clamp(1.5rem, 3.1vw, 2.5rem); } .lead-wide { max-width: 88ch !important; } /* tagy s pokračovaním */ .tag-cloud .more { font-family: var(--mono); letter-spacing: .1em; opacity: .7; } /* „Netreba“ vs „Stačí“ */ .who-req-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.2vw, 26px); align-items: center; margin-top: 1.4rem; } .who-req-label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5rem; } .who-req-no .who-req-label { color: var(--rose); } .who-req-yes .who-req-label { color: var(--green); } .who-req-no ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .who-req-no li { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(251,113,133,.85); text-decoration: line-through; text-decoration-color: rgba(251,113,133,.55); } .who-req-no li i { font-style: normal; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .68rem; color: #fff; background: rgba(251,113,133,.9); text-decoration: none; box-shadow: 0 0 16px -4px rgba(251,113,133,.9); } .who-req-split { width: 1px; align-self: stretch; background: linear-gradient(transparent, rgba(255,255,255,.18), transparent); } .who-req-yes b { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: #d7fbe9; } .who-req-yes b i { font-style: normal; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .85rem; color: #04121a; background: linear-gradient(120deg, var(--green), var(--cyan)); box-shadow: 0 0 26px -6px rgba(52,211,153,1); } @media (max-width: 575.98px) { .who-req-wrap { grid-template-columns: 1fr; gap: 12px; } .who-req-split { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); } } /* cena na jeden riadok */ .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .price-line b { color: #fff; font-weight: 700; } .price-line small { font-size: .82rem; color: var(--muted); } /* automatické posuvníky */ .auto-slider { position: relative; } .auto-slider > :first-child { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; /* miesto navyše, aby sa do posuvníka zmestil aj nadvihnutý hover a tieň kariet */ padding: 16px 4px 32px; margin: -16px 0 -24px; } .auto-slider > :first-child::-webkit-scrollbar { display: none; } .auto-slider > :first-child > * { scroll-snap-align: start; flex: 0 0 calc((100% - 36px) / 3); } .who-slider > :first-child > * { flex: 0 0 calc((100% - 36px) / 3); } .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .slider-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.2); transition: .25s; } .slider-dots button[aria-selected="true"] { width: 26px; border-radius: 999px; background: var(--grad); } .projects-slider .project-card { min-height: 100%; } .projects-slider .project-shot { aspect-ratio: 16 / 11; } @media (max-width: 991.98px) { .auto-slider > :first-child > *, .who-slider > :first-child > * { flex: 0 0 calc((100% - 18px) / 2); } } @media (max-width: 767.98px) { .auto-slider > :first-child > *, .who-slider > :first-child > * { flex: 0 0 86%; } } /* hlavička sekcie „Ako to funguje?“ ostáva vľavo hore počas celej scény */ .section-head-gpu { position: absolute; top: clamp(74px, 9vh, 110px); left: 0; right: 0; z-index: 6; padding: 0 clamp(16px, 4vw, 48px); margin: 0; text-align: left; pointer-events: none; } .section-head-gpu .eyebrow-xl { margin-bottom: .35rem; } .section-head-gpu .section-title { margin-bottom: .4rem; font-size: clamp(1.25rem, 2.4vw, 2rem); } .section-head-gpu .section-lead { max-width: 46ch; margin: 0; font-size: .9rem; color: rgba(190,199,214,.92); } /* jemný tmavý podklad, aby text nesplýval s grafikou servera */ .section-head-gpu::before { content: ""; position: absolute; left: 0; right: 40%; top: -26px; bottom: -34px; z-index: -1; pointer-events: none; background: radial-gradient(120% 130% at 0% 0%, rgba(2,3,8,.92), rgba(2,3,8,.6) 55%, transparent 78%); } @media (max-width: 1199.98px) { .section-head-gpu::before { right: 10%; } } @media (max-width: 991.98px) { .section-head-gpu { position: relative; top: 0; padding: 0 16px; margin-bottom: 14px; } .section-head-gpu .section-lead { display: none; } .scene-gpu .scene-sticky { flex-direction: column; justify-content: center; } } /* Scéna s grafickými kartami: krátke dobiehanie transformácií vyhladí skoky medzi snímkami scrollu (pohyb počíta JS, CSS medzi hodnotami plynulo interpoluje). */ .scene-gpu.is-smooth .gpu-card, .scene-gpu.is-smooth .cluster, .scene-gpu.is-smooth .chassis { transition: transform .13s linear; } .scene-gpu.is-smooth .gpu-stage { transition: opacity .2s linear; } @media (prefers-reduced-motion: reduce) { .scene-gpu.is-smooth .gpu-card, .scene-gpu.is-smooth .cluster, .scene-gpu.is-smooth .chassis { transition: none; } } /* posuvníky: ťahanie myšou a šípky */ .auto-slider > :first-child { cursor: grab; } .auto-slider > :first-child.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .auto-slider > :first-child.is-dragging * { pointer-events: none; } .slider-arrow { position: absolute; top: calc(50% - 22px); z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.18); background: rgba(10,13,19,.78); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); transition: background .25s, border-color .25s, opacity .25s, transform .25s; } .slider-arrow:hover { background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.6); transform: scale(1.06); } .slider-arrow:disabled { opacity: .25; cursor: default; transform: none; } .slider-prev { left: -10px; } .slider-next { right: -10px; } @media (max-width: 1399.98px) { .slider-prev { left: 4px; } .slider-next { right: 4px; } } @media (max-width: 767.98px) { .slider-arrow { width: 38px; height: 38px; font-size: 1.15rem; top: calc(50% - 19px); } } /* odkazy na rezerváciu konzultácie */ .pricing-consult { margin: .9rem 0 0; font-size: .92rem; color: var(--muted); } .pricing-consult a { color: #d7fbe9; border-bottom: 1px solid rgba(52,211,153,.5); text-decoration: none; } .pricing-consult a:hover { border-color: var(--green); } .av-book { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 15px; border-radius: 999px; font-size: .86rem; text-decoration: none; color: #d7fbe9; border: 1px solid rgba(52,211,153,.45); background: rgba(16,185,129,.1); transition: border-color .25s, background .25s, transform .25s; } .av-book:hover { color: #fff; border-color: var(--green); background: rgba(16,185,129,.18); transform: translateY(-2px); } .calc-hint { margin: .9rem 0 0; color: var(--muted); max-width: 62ch; }