:root{ /* The two tokens the KURA page needs that colors_and_type.css does not define. Everything else it uses -- brand colours, fg/bg ramps, overlays, borders, radii, shadows, type and the two shared easings -- comes from the design system, so this page stays in step with the rest of the site. */ --border-subtle: rgba(255, 255, 255, 0.06); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* colors_and_type.css is the shared design system, and as well as the tokens this page wants it ships a `.hero` *typography* utility (display face at --fs-hero). The export uses .hero for its hero
, so that utility lands on the section: its 4rem font-size then cascades into the children that size in em and the hero renders 12px shorter than gokura.ai does. The export's own .hero rules are pure layout and declare no font properties, so the utility's type is handed back to inheritance here -- the hero's real type still comes from the `.hero h1` / `.hero p.hero-sub` rules further down. */ .hero { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } html { scroll-behavior: smooth; font-size: 16px; background: var(--bg-deep); /* Prevent horizontal scroll WITHOUT breaking position:sticky on descendants. `overflow-x: hidden` on turns it into a scroll container and kills sticky positioning anywhere in the page. `overflow-x: clip` just clips, without establishing a scroll container, so sticky keeps working. */ overflow-x: clip; max-width: 100vw; } body { font-family: var(--ff-body); background: var(--bg-deep); color: var(--fg-1); line-height: 1.5; overflow-x: clip; max-width: 100vw; -webkit-font-smoothing: antialiased; transition: background 0.4s var(--ease-default); } /* ───────── HEX BG ───────── */ #hex-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 90%); mask-image: linear-gradient(to bottom, #000 40%, transparent 90%); opacity: 0.85; } /* The nav bar is the shared Singlespot one now (markup in kura.html, styles in nav.css). The export's own .nav / .nav-logo / .nav-links / .nav-cta rules and its navSlide entrance are gone with the element they styled. The KURA brand mark used to sit beside the Singlespot logo in the nav; it now lives centered above the hero headline instead (see .hero-kura-mark below), so it stays here rather than in nav.css. */ /* ───────── LAYOUT ───────── */ .content { position: relative; z-index: 1; } section { position: relative; padding: 96px 48px; } .container { max-width: 1200px; margin: 0 auto; } .gradient-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--kura-purple) 25%, var(--atlas-cyan) 50%, var(--ss-mint) 75%, transparent); opacity: 0.3; } /* ───────── OVERLINE ───────── */ .overline { font-family: var(--ff-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ss-mint); margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; } .overline::before { content: ''; width: 20px; height: 1px; background: currentColor; } .overline--purple { color: var(--kura-purple); } .overline--cyan { color: var(--atlas-cyan); } /* ───────── HERO ───────── */ .hero { min-height: auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 150px 24px 60px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(127, 90, 240, 0.14) 0%, rgba(9, 165, 233, 0.06) 40%, transparent 70%); animation: heroGlow 6s ease-in-out infinite alternate; pointer-events: none; } @keyframes heroGlow { 0% { opacity: 0.6; transform: translateX(-50%) scale(1); } 100% { opacity: 1; transform: translateX(-50%) scale(1.15); } } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px; background: linear-gradient(to top, var(--bg-deep), transparent); z-index: 1; pointer-events: none; } .hero-inner { position: relative; z-index: 2; max-width: 920px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; background: var(--overlay-purple); border: 1px solid var(--border-purple); border-radius: var(--radius-full); font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--kura-purple); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 32px; opacity: 0; transform: translateY(-16px) scale(0.95); animation: badgeIn 0.7s var(--ease-out-expo) 0.8s forwards; } @keyframes badgeIn { to { opacity: 1; transform: translateY(0) scale(1); } } .hero-badge .pulse { width: 6px; height: 6px; background: var(--ss-mint); border-radius: 50%; animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(44,182,125,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(44,182,125,0); } } .hero-kura-mark { display: flex; align-items: center; justify-content: center; color: var(--fg-1); margin-bottom: 36px; opacity: 0; transform: translateY(-10px); animation: heroMarkIn 0.6s var(--ease-out-expo) 0.3s forwards; } .hero-kura-mark svg { height: 88px; width: auto; display: block; } .hero-kura-mark-dot { animation: pulse 2.4s ease infinite; transform-origin: center; } @keyframes heroMarkIn { to { opacity: 1; transform: translateY(0); } } .hero h1 { font-family: var(--ff-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 24px; text-shadow: 0 0 60px rgba(255,255,255,0.2), 0 0 140px rgba(127,90,240,0.15); } .hero h1 .word { display: inline-block; opacity: 0; transform: translateY(40px); animation: wordReveal 0.7s var(--ease-out-expo) forwards; margin-right: 0.28em; } @keyframes wordReveal { to { opacity: 1; transform: translateY(0); } } .gradient-text { background: var(--gradient-hero); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero p.hero-sub { font-size: 0.9375rem; color: var(--fg-3); max-width: 580px; margin: 0 auto 36px; line-height: 1.7; opacity: 0; transform: translateY(24px); animation: fadeUp 0.8s var(--ease-out-expo) 1.8s forwards; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s var(--ease-out-expo) 2.1s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ───────── BUTTONS ───────── */ .btn-primary { font-family: var(--ff-body); font-weight: 500; font-size: 0.9375rem; padding: 13px 28px; background: var(--ss-mint); color: var(--bg-deep); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.4s var(--ease-out-expo); text-decoration: none; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%); background-size: 200% 100%; animation: btnShine 3s ease infinite; } @keyframes btnShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .btn-primary:hover { box-shadow: var(--shadow-glow-mint); transform: translateY(-2px); } .btn-primary svg { position: relative; z-index: 1; } .btn-ghost { font-family: var(--ff-body); font-weight: 500; font-size: 0.9375rem; padding: 13px 28px; background: transparent; color: var(--fg-2); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.4s var(--ease-out-expo); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-ghost:hover { border-color: var(--kura-purple); color: var(--fg-1); background: var(--overlay-purple); } /* ───────── LOGO TICKER ───────── */ .logo-ticker { width: 100%; max-width: 720px; margin: 48px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); opacity: 0; animation: fadeUp 0.8s var(--ease-out-expo) 2.4s forwards; } .logo-ticker-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: tickerScroll 24s linear infinite; } .logo-ticker-track img { height: 28px; width: auto; opacity: 0.25; transition: opacity 0.3s; } .logo-ticker:hover .logo-ticker-track { animation-play-state: paused; } .logo-ticker:hover .logo-ticker-track img { opacity: 0.5; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ───────── ANNOUNCE BAR ───────── */ .announce-bar { max-width: 600px; margin: 32px auto 0; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-full); font-family: var(--ff-body); font-size: 0.8125rem; color: var(--fg-3); opacity: 0; animation: fadeUp 0.8s var(--ease-out-expo) 2.7s forwards; } .announce-bar .badge { font-family: var(--ff-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-full); background: var(--overlay-purple); border: 1px solid var(--border-purple); color: var(--kura-purple); flex-shrink: 0; } .announce-bar .announce-text { flex: 1; color: var(--fg-2); } .announce-bar .announce-cta { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--ss-mint); text-decoration: none; white-space: nowrap; transition: color 0.3s; padding: 4px 12px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 4px; } .announce-bar .announce-cta:hover { color: var(--mint-bright); } /* ───────── SECTION HEADER ───────── */ .section-header { max-width: 620px; margin-bottom: 56px; } .section-header.centered { text-align: center; margin-left: auto; margin-right: auto; } .section-header h2 { font-family: var(--ff-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 14px; color: var(--fg-1); } .section-header p { font-size: 0.9375rem; color: var(--fg-3); line-height: 1.65; } .section-header.centered p { margin-left: auto; margin-right: auto; } /* ───────── REVEALS ───────── */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .reveal.visible { opacity: 1; transform: translateY(0); } .stagger-children > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; } .stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; } .stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; } .stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; } .stagger-children.visible > * { opacity: 1; transform: translateY(0); } /* Parks every CSS animation inside a section that is scrolled out of view. Set by initSectionAnimationGating() in kura.js. The page carries ~29 infinite animations across seven sections and the compositor keeps all of them ticking off-screen; several sit on blurred elements, where a frame costs a re-raster of a blurred layer. Decorative loops resume mid-cycle, which is invisible. Reveals are transitions, not animations, so they are untouched, and the one one-shot group (the hero entrance) lives in a section that is on screen at load. The nav sits outside every
, so its slide-in never pauses. */ .anim-idle, .anim-idle *, .anim-idle::before, .anim-idle::after, .anim-idle *::before, .anim-idle *::after { animation-play-state: paused !important; } /* ───────── BLUEPRINT IFRAME WRAPPER ───────── */ .blueprint-frame { position: relative; max-width: 1200px; margin: 48px auto; padding: 0 24px; overflow: hidden; max-height: 900px; opacity: 1; transition: max-height 0.6s var(--ease-out-expo), opacity 0.4s ease, margin 0.6s var(--ease-out-expo); } .blueprint-frame iframe { width: 100%; height: 720px; border: none; display: block; background: transparent; border-radius: var(--radius-lg); } .blueprint-label { position: absolute; top: 8px; left: 36px; font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-4); display: inline-flex; align-items: center; gap: 8px; z-index: 2; } .blueprint-label .pulse-dot { width: 6px; height: 6px; background: var(--ss-mint); border-radius: 50%; animation: pulse 2s ease infinite; } /* ───────── DEFINITION (What Kura is) ───────── */ .definition { position: relative; padding-top: 40px; } #definition-hex-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 70%, transparent 100%); opacity: 0.75; } .definition > .container { position: relative; z-index: 1; } .definition::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: linear-gradient(to bottom, rgba(127,90,240,0.035) 0%, transparent 100%); pointer-events: none; } .definition::after { content: ''; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 500px; background: radial-gradient(ellipse, rgba(127,90,240,0.04), transparent 70%); pointer-events: none; } .definition-grid { display: block; max-width: 1200px; margin: 0; } .definition-content { text-align: left; max-width: 760px; padding-left: 18px; } /* Hex-shaped flow node — echoes the super-hexes from the intro section */ .flow-node { position: relative; display: block; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05); border-top-color: rgba(255,255,255,0.08); border-radius: 6px; margin-bottom: 10px; transition: all 0.45s var(--ease-out-expo); cursor: default; backdrop-filter: blur(6px); opacity: 0; transform: translateX(16px); } .flow-node .flow-node-row { /* scan-line overflow container */ overflow: hidden; border-radius: 6px; } .flow-node-row { display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 18px; position: relative; } .flow-node-head { flex: 1; min-width: 0; } .flow-caret { flex-shrink: 0; width: 18px; height: 18px; color: var(--fg-4); opacity: 0.5; transition: transform 0.45s var(--ease-out-expo), opacity 0.35s, color 0.35s; } .flow-caret svg { width: 100%; height: 100%; stroke-width: 1.5; } /* Accordion body — absolutely positioned overlay so sibling nodes don't shift */ .flow-details { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: rgba(15,12,22,0.95); border: 1px solid rgba(255,255,255,0.07); border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out-expo); pointer-events: none; } .flow-details-inner { overflow: hidden; min-height: 0; } .flow-details-inner > * { opacity: 0; transform: translateY(-4px); transition: opacity 0.35s 0.05s, transform 0.4s 0.05s var(--ease-out-expo); } .flow-node:hover .flow-details { grid-template-rows: 1fr; pointer-events: auto; } .flow-node:hover { z-index: 6; } .flow-node:hover .flow-details-inner > * { opacity: 1; transform: translateY(0); } .flow-node:hover .flow-caret { opacity: 1; color: var(--fg-2); transform: rotate(180deg); } .flow-details-inner { padding: 14px 18px 18px 74px; } .flow-details-inner p { font-size: 0.8125rem; color: var(--fg-3); line-height: 1.6; margin: 0 0 12px 0; } .flow-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .flow-chips li { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; color: var(--fg-3); } .flow-metric { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; background: rgba(255,255,255,0.025); border-left: 2px solid rgba(255,255,255,0.15); border-radius: 2px; } .flow-node.cy .flow-metric { border-left-color: var(--atlas-cyan); } .flow-node.pu .flow-metric { border-left-color: var(--kura-purple); } .flow-node.mi .flow-metric { border-left-color: var(--ss-mint); } .flow-metric-label { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); } .flow-metric-val { font-family: var(--ff-display); font-size: 0.9375rem; font-weight: 500; color: var(--fg-1); letter-spacing: -0.01em; } /* Stagger reveal when .flow-diagram becomes visible */ .flow-diagram.visible .flow-node { opacity: 1; transform: translateX(0); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo), border-color 0.45s, background 0.45s; } .flow-diagram .flow-node:nth-of-type(1) { transition-delay: 0.05s; } .flow-diagram .flow-node:nth-of-type(2) { transition-delay: 0.18s; } .flow-diagram .flow-node:nth-of-type(3) { transition-delay: 0.31s; } .flow-diagram .flow-node:nth-of-type(4) { transition-delay: 0.44s; } .flow-diagram.visible .flow-connector { opacity: 0.5; transition: opacity 0.6s var(--ease-out-expo); } .flow-diagram .flow-connector { opacity: 0; } .flow-diagram .flow-connector:nth-of-type(2) { transition-delay: 0.14s; } .flow-diagram .flow-connector:nth-of-type(4) { transition-delay: 0.27s; } .flow-diagram .flow-connector:nth-of-type(6) { transition-delay: 0.4s; } /* Scan-line removed per design feedback */ @keyframes flowScan { 0%, 70%, 100% { left: -40%; opacity: 0; } 72% { opacity: 1; } 98% { left: 120%; opacity: 0.7; } } .flow-node::before { /* subtle left edge in the node's accent color */ content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px; border-radius: 2px; opacity: 0.55; transition: opacity 0.4s, top 0.4s, bottom 0.4s; } .flow-node.cy::before { background: var(--atlas-cyan); } .flow-node.pu::before { background: var(--kura-purple); } .flow-node.mi::before { background: var(--ss-mint); } .flow-node:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.035); transform: translateX(4px); } .flow-node:hover::before { opacity: 1; top: 8%; bottom: 8%; } /* Active pulse — toggled by JS when the signal reaches this node */ .flow-node.pulse-active { border-color: rgba(255,255,255,0.2) !important; background: rgba(255,255,255,0.04) !important; } .flow-node.pulse-active::before { opacity: 1; top: 4%; bottom: 4%; } .flow-node.pulse-active .flow-hex::after { opacity: 1; transform: scale(1.3); } /* Hex glyph replaces the rounded-square icon */ .flow-hex { width: 40px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; } .flow-hex::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: filter 0.5s, background 0.5s; } /* Halo ring that expands when the signal visits this node */ .flow-hex::after { content: ''; position: absolute; inset: -6px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); opacity: 0; transform: scale(0.9); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); pointer-events: none; } .flow-hex.pu::before { background: rgba(127,90,240,0.14); box-shadow: inset 0 0 0 1px rgba(127,90,240,0.4); } .flow-hex.cy::before { background: rgba(9,165,233,0.14); box-shadow: inset 0 0 0 1px rgba(9,165,233,0.4); } .flow-hex.mi::before { background: rgba(44,182,125,0.14); box-shadow: inset 0 0 0 1px rgba(44,182,125,0.4); } .flow-hex.pu::after { background: rgba(127,90,240,0.22); } .flow-hex.cy::after { background: rgba(9,165,233,0.22); } .flow-hex.mi::after { background: rgba(44,182,125,0.22); } .flow-hex svg { width: 16px; height: 16px; position: relative; z-index: 1; stroke-width: 1.5; } .flow-hex.pu svg { color: var(--kura-purple); } .flow-hex.cy svg { color: var(--atlas-cyan); } .flow-hex.mi svg { color: var(--ss-mint); } .flow-node:hover .flow-hex::before { filter: brightness(1.3); } .flow-connector { width: 2px; height: 18px; margin-left: 37px; position: relative; overflow: hidden; background: linear-gradient(to bottom, rgba(127,90,240,0.35), rgba(9,165,233,0.35), rgba(44,182,125,0.35)); opacity: 0.5; } .flow-pulse { position: absolute; top: -100%; left: -2px; width: calc(100% + 4px); height: 50%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7)); animation: flowPulse 2.8s ease-in-out infinite; } @keyframes flowPulse { 0% { top: -60%; opacity: 0.9; } 100% { top: 160%; opacity: 0; } } .flow-node .label { font-family: var(--ff-body); font-size: 0.9375rem; font-weight: 500; color: var(--fg-1); letter-spacing: -0.005em; } .flow-node .desc { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-4); margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase; } .definition-content .overline { margin-bottom: 20px; } .definition-content .overline::before { display: none; } .definition-content h2 { font-family: var(--ff-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 22px; color: var(--fg-1); text-wrap: pretty; } .definition-content h2 .muted { color: var(--fg-3); font-weight: 400; } .definition-content .lead { font-size: 0.9375rem; color: var(--fg-3); line-height: 1.65; margin-bottom: 32px; max-width: 640px; } .definition-content .lead strong { color: var(--ss-mint); font-weight: 500; } .def-cards { display: grid; gap: 2px; } .def-card { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 16px; padding: 18px 4px 18px 8px; border-top: 1px solid rgba(255,255,255,0.05); transition: border-color 0.35s; } .def-card:first-child { border-top: 1px solid rgba(255,255,255,0.08); } .def-card:hover { border-color: rgba(255,255,255,0.14); } /* Small hex dot replaces the 01/02/03 number to avoid echoing the intro's numbering */ .def-dot { width: 12px; height: 14px; margin-top: 5px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); position: relative; transition: transform 0.4s var(--ease-out-expo); } .def-card:nth-child(1) .def-dot { background: rgba(127,90,240,0.8); box-shadow: 0 0 10px rgba(127,90,240,0.4); } .def-card:nth-child(2) .def-dot { background: rgba(9,165,233,0.8); box-shadow: 0 0 10px rgba(9,165,233,0.4); } .def-card:nth-child(3) .def-dot { background: rgba(44,182,125,0.8); box-shadow: 0 0 10px rgba(44,182,125,0.4); } .def-card:hover .def-dot { transform: scale(1.15); } .def-card h4 { font-family: var(--ff-body); font-size: 1rem; font-weight: 600; margin-bottom: 6px; color: var(--fg-1); letter-spacing: -0.008em; } .def-card p { font-size: 0.875rem; color: var(--fg-3); line-height: 1.6; max-width: 520px; } /* ───────── KURA-SCROLL (Composio-style sidebar + scroll-synced panels) ───────── */ .kura-scroll { display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-top: 96px; align-items: start; position: relative; } .kura-scroll-nav { position: sticky; top: 120px; align-self: start; } .ks-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; --ks-accent: var(--kura-purple); } .ks-item { --ks-accent: var(--kura-purple); position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: stretch; gap: 0; padding: 0; cursor: pointer; color: var(--fg-3); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.015); transition: border-color 0.35s var(--ease-out-expo), background-color 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo); } .ks-item[data-accent="cyan"] { --ks-accent: var(--ss-mint); } .ks-item[data-accent="mint"] { --ks-accent: var(--ss-mint); } .ks-item[data-accent="purple"] { --ks-accent: var(--ss-mint); } /* All scroll-nav items share the brand green accent */ .ks-item { --ks-accent: var(--ss-mint); } .ks-num { display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--fg-4); background: rgba(255,255,255,0.025); border-right: 1px solid rgba(255,255,255,0.06); transition: color 0.35s, background-color 0.35s, border-color 0.35s; } .ks-label { display: flex; align-items: center; padding: 12px 16px; font-family: var(--ff-display); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-3); transition: color 0.35s; } /* Hover — subtle lift, no color change */ .ks-item:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); } .ks-item:hover .ks-label { color: var(--fg-1); } .ks-item:hover .ks-num { color: var(--fg-2); } /* Active — solid accent chip on the number, accent border, soft halo */ .ks-item.is-active { border-color: var(--ks-accent); background: rgba(255,255,255,0.02); box-shadow: 0 0 0 1px var(--ks-accent) inset, 0 8px 28px -14px color-mix(in oklab, var(--ks-accent) 70%, transparent); } .ks-item.is-active .ks-num { background: var(--ks-accent); color: #0a0a0f; border-right-color: transparent; font-weight: 700; } .ks-item.is-active .ks-label { color: var(--fg-3); } .kura-scroll-panels { display: grid; gap: 40px; } .ks-panel { position: relative; padding: 40px 44px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(255,255,255,0.10); border-left-color: rgba(255,255,255,0.10); border-radius: 4px; display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 56px; row-gap: 24px; align-items: center; overflow: hidden; scroll-margin-top: 120px; } .ks-panel::before { content: none; } /* All panels share the brand green accent */ .ks-panel[data-accent="purple"] { --accent: var(--ss-mint); } .ks-panel[data-accent="cyan"] { --accent: var(--ss-mint); } .ks-panel[data-accent="mint"] { --accent: var(--ss-mint); } /* Left column: visual spans both rows */ .ks-panel .ks-visual { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; } /* Right column: head + bullets stack */ .ks-panel .ks-panel-head { grid-column: 2; grid-row: 1; align-self: end; } .ks-panel .ks-bullets { grid-column: 2; grid-row: 2; align-self: start; } /* Fallback when a panel has no visual — text spans full width */ .ks-panel:not(:has(.ks-visual)) { grid-template-columns: 1fr; } .ks-panel:not(:has(.ks-visual)) .ks-panel-head, .ks-panel:not(:has(.ks-visual)) .ks-bullets { grid-column: 1; max-width: 720px; } .ks-panel-head { max-width: 460px; } .ks-panel-num { display: inline-block; font-family: var(--ff-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent, var(--kura-purple)); margin-bottom: 16px; padding: 3px 7px; background: rgba(255,255,255,0.04); border-radius: 3px; } .ks-panel h3 { font-family: var(--ff-display); font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--fg-1); margin-bottom: 12px; } .ks-panel-head > p { font-size: 0.875rem; color: var(--fg-3); line-height: 1.6; } .ks-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 460px; } .ks-bullets li { position: relative; padding-left: 14px; font-size: 0.8125rem; color: var(--fg-2); line-height: 1.5; } .ks-bullets li::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent, var(--kura-purple)); opacity: 0.8; border-radius: 2px; clip-path: none; height: auto; } /* Visuals */ .ks-visual { margin-top: 0; padding: 28px 24px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04); border-radius: 3px; position: relative; overflow: hidden; } /* 01 — Decisioning: old vs new */ .ks-visual--decisioning { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 14px; padding: 20px 18px; } .dec-col { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px 14px 12px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-sm); min-width: 0; } .dec-col--dynamic { border-color: rgba(127,90,240,0.35); background: rgba(127,90,240,0.04); } .dec-col-head { display: grid; gap: 4px; } .dec-tag { font-family: var(--ff-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); } .dec-tag--new { color: var(--kura-purple); } .dec-meta { font-family: var(--ff-mono); font-size: 0.625rem; color: var(--fg-4); letter-spacing: 0.04em; } .dec-sample { position: relative; height: 140px; background: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 20% 100%, linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 20%, rgba(0,0,0,0.25); border-radius: 4px; overflow: hidden; } /* Static "data package" variant — no grid, sealed-package icon instead */ .dec-sample[data-kind="static"] { background: rgba(0,0,0,0.25); display: grid; place-items: center; } .dec-package { display: grid; place-items: center; width: 100%; padding: 4px 12px; color: var(--fg-3); } .dec-package-icon { width: 100%; max-width: 180px; height: auto; color: var(--fg-3); opacity: 0.85; } .dec-dot { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--fg-3); opacity: 0.55; } .dec-col--static .dec-hull { position: absolute; inset: 8px 4px 8px 8px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 4px; pointer-events: none; } .dec-filter-label { position: absolute; top: 8px; right: 10px; font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); padding: 2px 6px; background: rgba(0,0,0,0.4); border-radius: 2px; } .dec-col--dynamic .dec-dot { opacity: 0; transition: opacity 0.25s ease, transform 0.35s ease, background 0.2s ease, box-shadow 0.25s ease; } .dec-col--dynamic .dec-dot.is-seen { opacity: 0.8; } .dec-col--dynamic .dec-dot.is-pass { background: var(--kura-purple); box-shadow: 0 0 10px rgba(127,90,240,0.75); opacity: 1; transform: scale(1.25); } .dec-col--dynamic .dec-dot.is-fail { background: rgba(224,92,92,0.55); opacity: 0.35; transform: scale(0.8); } .dec-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(127,90,240,0.9), transparent); box-shadow: 0 0 12px rgba(127,90,240,0.6); animation: decScan 3.2s linear infinite; pointer-events: none; } @keyframes decScan { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100% + 100px)); } } .dec-threshold { position: absolute; bottom: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; background: rgba(127,90,240,0.12); border: 1px solid rgba(127,90,240,0.40); border-radius: 3px; font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kura-purple); } .dec-threshold-val { color: var(--fg-1); font-weight: 700; letter-spacing: 0; text-transform: none; } .dec-footnote { font-family: var(--ff-mono); font-size: 0.625rem; color: var(--fg-4); line-height: 1.5; display: inline-flex; align-items: center; gap: 6px; } .dec-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kura-purple); box-shadow: 0 0 8px var(--kura-purple); animation: decPulse 1.8s ease-in-out infinite; } @keyframes decPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .ks-vis-col { display: grid; gap: 10px; position: relative; } .ks-vis-tag { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); } .ks-vis-tag--new { color: var(--ss-mint); } .ks-vis-stack { display: grid; gap: 6px; } .ks-vis-row { height: 16px; border-radius: 3px; background: rgba(255,255,255,0.05); } .ks-vis-row.muted { opacity: 0.4; } .ks-vis-cross { position: absolute; inset: 22px 0 0 0; background-image: linear-gradient(135deg, transparent 48%, rgba(224,92,92,0.4) 49%, rgba(224,92,92,0.4) 51%, transparent 52%); pointer-events: none; } .ks-vis-bid { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 4px 8px; background: rgba(255,255,255,0.02); border-left: 2px solid rgba(44,182,125,0.5); border-radius: 2px; font-family: var(--ff-mono); font-size: 0.6875rem; } .ks-vis-score { color: var(--ss-mint); font-weight: 700; } .ks-vis-bar { display: inline-block; height: 6px; border-radius: 2px; background: linear-gradient(90deg, rgba(44,182,125,0.3), rgba(44,182,125,0.7)); } .ks-vis-arrow { display: flex; align-items: center; justify-content: center; color: var(--fg-4); } .ks-vis-arrow svg { width: 40px; height: 20px; } /* 02 — Scoring meter */ .ks-visual--scoring { display: grid; gap: 20px; } .ks-vis-meter { position: relative; height: 96px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; overflow: hidden; } .ks-vis-meter-track { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 4%, rgba(255,255,255,0.025) 4% 4.2%); } .ks-vis-meter-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(155,155,155,0.15), rgba(155,155,155,0.35)); transition: width 0.9s var(--ease-out-expo), background 0.3s ease, box-shadow 0.3s ease; } .ks-vis-meter.is-pass .ks-vis-meter-fill { background: linear-gradient(90deg, rgba(9,229,163,0.35), rgba(9,229,163,0.7)); box-shadow: 0 0 24px rgba(9,229,163,0.35); } .ks-vis-meter.is-fail .ks-vis-meter-fill { background: linear-gradient(90deg, rgba(224,92,92,0.25), rgba(224,92,92,0.55)); box-shadow: 0 0 18px rgba(224,92,92,0.25); } /* threshold tick */ .ks-vis-meter-head { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.25); left: 70%; box-shadow: 0 0 6px rgba(255,255,255,0.15); } .ks-vis-meter-head::after { content: 'threshold · 0.70'; position: absolute; top: 4px; left: 6px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--fg-4); white-space: nowrap; text-transform: uppercase; } /* big score number inside the bar */ .ks-vis-meter-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-1); pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .ks-vis-meter.is-pass .ks-vis-meter-value { color: var(--mint-bright); } .ks-vis-meter.is-fail .ks-vis-meter-value { color: #F09090; } .ks-vis-meter-label { position: absolute; bottom: 6px; right: 10px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--fg-4); text-transform: uppercase; } .ks-vis-ticker { display: grid; gap: 4px; font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-3); height: 108px; overflow: hidden; grid-auto-rows: 24px; align-content: start; margin-top: 10px; } .ks-vis-tick-row { display: grid; grid-template-columns: 52px 1fr 60px; align-items: center; gap: 12px; padding: 4px 10px; background: rgba(255,255,255,0.02); border-radius: 2px; border-left: 2px solid transparent; opacity: 0; transform: translateY(6px); animation: ksTickIn 0.4s var(--ease-out-expo) forwards; } .ks-vis-tick-row.high { border-left-color: var(--mint-bright); } .ks-vis-tick-row.low { border-left-color: rgba(224,92,92,0.5); opacity: 0.55; } .ks-vis-tick-score { color: var(--mint-bright); font-weight: 700; } .ks-vis-tick-row.low .ks-vis-tick-score { color: #F09090; } .ks-vis-tick-meta { color: var(--fg-4); font-size: 0.625rem; } .ks-vis-tick-ms { color: var(--fg-4); text-align: right; } @keyframes ksTickIn { to { opacity: 1; transform: translateY(0); } } /* 03 — Curation funnel */ .ks-visual--curation { display: grid; grid-template-rows: auto 24px auto 24px auto; align-items: center; gap: 0; max-width: 520px; margin-left: auto; margin-right: auto; } .ks-vis-funnel { display: grid; grid-template-rows: auto 24px auto 24px auto; align-items: center; width: 100%; } .ks-vis-funnel-in, .ks-vis-funnel-in, .ks-vis-funnel-out { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md); font-family: var(--ff-mono); font-size: 0.75rem; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; } .ks-vis-funnel-out { background: rgba(44,182,125,0.06); border-color: rgba(44,182,125,0.3); } .ks-vis-count { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; color: var(--fg-1); letter-spacing: -0.02em; text-transform: none; } .ks-vis-count--mint { color: var(--ss-mint); } .ks-vis-funnel-line { width: 1px; height: 100%; justify-self: center; background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent); position: relative; } .ks-vis-funnel-line::after { content: ''; position: absolute; left: -3px; top: 30%; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-mint); box-shadow: 0 0 8px var(--ss-mint); animation: ksFunnelDrop 2.4s ease-in-out infinite; } @keyframes ksFunnelDrop { 0%, 100% { top: 10%; opacity: 0; } 40% { opacity: 1; } 80% { top: 90%; opacity: 0; } } .ks-vis-funnel-filter { display: flex; align-items: center; justify-content: center; padding: 10px 18px; background: rgba(44,182,125,0.06); border: 1px dashed rgba(44,182,125,0.35); border-radius: var(--radius-md); font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--ss-mint); letter-spacing: 0.08em; text-transform: uppercase; } .ks-vis-threshold { white-space: nowrap; } /* 03 — Curation: bids converging into a PMP */ .ks-visual--curation { padding: 0; background: transparent; border: none; width: 100%; min-width: 0; align-self: stretch; display: flex; } .cur-stage { position: relative; width: 100%; flex: 1; min-height: 280px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; } .cur-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cur-pmp { filter: drop-shadow(0 0 10px rgba(127,90,240,0.45)); } @keyframes curPmpPulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } .cur-pmp-label { position: absolute; left: 50%; top: 50%; /* sit above the hex */ transform: translate(-50%, calc(-50% - 64px)); display: grid; place-items: center; pointer-events: none; text-align: center; } .cur-pmp-tag { font-family: var(--ff-mono); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.32em; color: var(--kura-purple); text-transform: uppercase; line-height: 1; text-shadow: 0 0 14px rgba(127,90,240,0.55); } .cur-pmp-id { font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.12em; color: var(--fg-4); text-transform: uppercase; line-height: 1; } .cur-pmp-count { margin-top: 4px; display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--ff-mono); font-size: 0.8125rem; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; } .cur-pmp-count-unit { font-weight: 400; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); } .cur-legend { position: absolute; left: 10px; bottom: 8px; display: grid; gap: 4px; pointer-events: none; } .cur-leg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); } .cur-leg-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .cur-leg--in .cur-leg-dot { background: var(--mint-bright); box-shadow: 0 0 6px rgba(9,229,163,0.75); } .cur-leg--out .cur-leg-dot { background: rgba(224,92,92,0.7); } .cur-bid { fill: rgba(180,180,200,0.6); transition: none; } .cur-bid.is-pass { fill: var(--mint-bright); filter: drop-shadow(0 0 4px rgba(9,229,163,0.85)); } .cur-bid.is-fail { fill: rgba(224,92,92,0.7); } .cur-trail { fill: none; stroke-width: 1; stroke-linecap: round; opacity: 0; } .cur-trail.is-pass { stroke: rgba(9,229,163,0.5); } .cur-trail.is-fail { stroke: rgba(224,92,92,0.35); } .cur-land { fill: none; stroke: rgba(9,229,163,0.7); stroke-width: 1.2; opacity: 0; transform-origin: center; } /* 04 — Learning chart */ .ks-visual--learning { display: grid; gap: 14px; } .ks-visual--learning svg { width: 100%; height: 140px; display: block; } .ks-vis-learn-axis { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); } .ks-vis-learn-labels { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); } .ks-vis-learn-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; } .ks-vis-dot { width: 8px; height: 8px; border-radius: 50%; } .ks-vis-learn-metric { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; color: var(--kura-purple); letter-spacing: -0.02em; } .ks-vis-learn-metric span { font-family: var(--ff-mono); font-size: 0.625rem; color: var(--fg-4); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 8px; } @media (max-width: 1080px) { /* Grid items default to a content-based automatic minimum width, so the 280px-sidebar-plus-panel grid doesn't actually shrink to 1 column here — it just squashes both tracks and lets the flex/text content inside overflow past the section's own padding. min-width: 0 is what lets the tracks (and the scrollable .ks-list within) actually respect that. */ .kura-scroll { grid-template-columns: 1fr; gap: 32px; } .kura-scroll-nav { position: relative; top: auto; min-width: 0; } .ks-list { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; } .ks-list::-webkit-scrollbar { display: none; } .ks-item { flex: 0 0 auto; grid-template-columns: 40px auto; } .ks-label { padding: 10px 14px; font-size: 0.75rem; white-space: nowrap; } .kura-scroll-panels { gap: 20px; min-width: 0; } .ks-panel { padding: 28px 22px; grid-template-columns: 1fr; row-gap: 24px; min-width: 0; } .ks-panel .ks-visual { grid-column: 1; grid-row: auto; } .ks-panel .ks-panel-head { grid-column: 1; grid-row: auto; align-self: auto; } .ks-panel .ks-bullets { grid-column: 1; grid-row: auto; align-self: auto; max-width: 100%; } .ks-panel-head { max-width: 100%; } .ks-visual--decisioning { grid-template-columns: 1fr; } .ks-vis-arrow { transform: rotate(90deg); } } /* ───────── HOW (3 figures) ───────── */ .how-statement { max-width: 980px; margin-bottom: 72px; } .how-statement h2 { font-family: var(--ff-display); font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; color: var(--fg-1); } .how-statement h2 .muted { color: var(--fg-4); } .how-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .how-fig { position: relative; } .how-fig-label { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); } .how-fig-visual { width: 100%; aspect-ratio: 1 / 0.85; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; } .how-fig-visual svg { width: 80%; max-width: 280px; height: auto; opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); } .how-fig.visible .how-fig-visual svg { opacity: 1; transform: translateY(0); } .how-fig-visual svg .draw-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s var(--ease-out-expo); } .how-fig.visible .how-fig-visual svg .draw-line { stroke-dashoffset: 0; } .svg-glow-dot { animation: svgGlow 3s ease-in-out infinite; } @keyframes svgGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .how-fig-visual:hover svg { transform: translateY(-6px); transition: transform 0.5s var(--ease-spring); } .how-fig h3 { font-family: var(--ff-display); font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; color: var(--fg-1); } .how-fig p { font-size: 0.875rem; color: var(--fg-3); line-height: 1.6; } /* ───────── VS ───────── */ .vs-grid { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: stretch; } .vs-col { padding: 32px 28px; border-radius: var(--radius-lg); transition: all 0.5s var(--ease-out-expo); } .vs-col.old { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.08); } .vs-col.new { background: var(--bg-card); border: 1px solid var(--border-mint); border-top-color: rgba(44,182,125,0.4); border-left-color: rgba(44,182,125,0.4); position: relative; overflow: hidden; } .vs-col.new::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(44,182,125,0.08), transparent, rgba(127,90,240,0.05), transparent); animation: conicSpin 10s linear infinite; } @keyframes conicSpin { to { transform: rotate(360deg); } } .vs-col.new > * { position: relative; z-index: 1; } .vs-col:hover { transform: translateY(-3px); } .vs-col.new:hover { box-shadow: var(--shadow-glow-mint); } .vs-col h3 { font-family: var(--ff-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 6px; } .vs-col.old h3 { color: var(--fg-3); } .vs-col.new h3 { color: var(--ss-mint); } .vs-sub { font-size: 0.75rem; color: var(--fg-4); margin-bottom: 24px; font-family: var(--ff-mono); letter-spacing: 0.05em; } .vs-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--overlay-subtle); } .vs-item:last-child { border-bottom: none; } .vs-icon { width: 20px; height: 20px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .vs-icon svg { width: 12px; height: 12px; stroke-width: 2; } .vs-col.old .vs-icon { background: rgba(224,92,92,0.1); color: var(--negative); } .vs-col.new .vs-icon { background: var(--overlay-mint); color: var(--ss-mint); } .vs-item span.vs-text { font-size: 0.875rem; color: var(--fg-2); line-height: 1.5; } .vs-divider { display: flex; align-items: center; justify-content: center; } .vs-divider-badge { font-family: var(--ff-mono); font-size: 0.6875rem; font-weight: 700; color: var(--fg-4); writing-mode: vertical-rl; letter-spacing: 0.2em; } /* ───────── CHANNELS ───────── */ .channels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .channel-card { text-align: center; padding: 36px 20px 32px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.08); border-radius: var(--radius-lg); transition: all 0.5s var(--ease-out-expo); position: relative; overflow: hidden; } .channel-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--atlas-cyan), var(--ss-mint)); transform: scaleX(0); transition: transform 0.5s var(--ease-out-expo); transform-origin: left; } .channel-card:hover::before { transform: scaleX(1); } .channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(255,255,255,0.1); } .channel-icon { width: 40px; height: 40px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--overlay-cyan); color: var(--atlas-cyan); transition: all 0.5s var(--ease-spring); } .channel-icon svg { width: 20px; height: 20px; stroke-width: 1.5; } .channel-card:hover .channel-icon { transform: scale(1.12); background: var(--overlay-mint); color: var(--ss-mint); } .channel-card h3 { font-family: var(--ff-display); font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: var(--fg-1); } .channel-card p { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-4); letter-spacing: 0.03em; } /* ───────── DASHBOARD ───────── */ .dashboard-section { position: relative; } .dashboard-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(9,165,233,0.05), transparent 60%); pointer-events: none; } .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .dash-panel { padding: 28px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.08); border-radius: var(--radius-xl); transition: all 0.4s var(--ease-out-expo); position: relative; overflow: hidden; } .dash-panel::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; } .dash-panel.media::after { background: linear-gradient(90deg, var(--atlas-cyan), transparent 70%); box-shadow: 0 0 12px var(--atlas-cyan); } .dash-panel.offline::after { background: linear-gradient(90deg, var(--ss-mint), transparent 70%); box-shadow: 0 0 12px var(--ss-mint); } .dash-panel:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-3px); box-shadow: var(--shadow-card); } .dash-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .dash-panel h3 { font-family: var(--ff-display); font-size: 1rem; font-weight: 600; } .dash-panel.media h3 { color: var(--atlas-cyan); } .dash-panel.offline h3 { color: var(--ss-mint); } .dash-panel-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-mono); font-size: 0.625rem; color: var(--fg-4); letter-spacing: 0.12em; text-transform: uppercase; } .dash-panel-live .pulse-dot { width: 6px; height: 6px; background: var(--ss-mint); border-radius: 50%; animation: pulse 2s ease infinite; } .dash-panel > p { font-size: 0.8125rem; color: var(--fg-4); margin-bottom: 24px; } .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kpi { padding: 14px 16px; background: var(--overlay-subtle); border-radius: var(--radius-md); border-left: 3px solid transparent; transition: all 0.3s; } .kpi:hover { background: rgba(97, 97, 108, 0.12); } .dash-panel.media .kpi { border-left-color: rgba(9,165,233,0.5); } .dash-panel.offline .kpi { border-left-color: rgba(44,182,125,0.5); } .kpi-label { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.1em; color: var(--fg-4); text-transform: uppercase; margin-bottom: 6px; font-weight: 400; } .kpi-value { font-family: var(--ff-mono); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; color: var(--fg-1); } .kpi-value[data-target] { opacity: 0; transform: translateY(6px); transition: all 0.6s var(--ease-out-expo); } .kpi-value[data-target].counted { opacity: 1; transform: translateY(0); } /* ───────── ACTIVATION ───────── */ .activation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .activation-card { padding: 36px 32px; background: var(--bg-card); border-radius: var(--radius-xl); transition: all 0.5s var(--ease-out-expo); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.08); } .activation-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .activation-card:nth-child(1):hover { border-top-color: var(--border-mint); border-left-color: var(--border-mint); box-shadow: var(--shadow-glow-mint); } .activation-card:nth-child(2):hover { border-top-color: var(--border-purple); border-left-color: var(--border-purple); box-shadow: var(--shadow-glow-purple); } .act-tag { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .act-tag::before { content: ''; width: 16px; height: 1px; background: currentColor; } .activation-card:nth-child(1) .act-tag { color: var(--ss-mint); } .activation-card:nth-child(2) .act-tag { color: var(--kura-purple); } .activation-card h3 { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; line-height: 1.3; color: var(--fg-1); } .activation-card p { font-size: 0.9375rem; color: var(--fg-3); line-height: 1.65; } /* ───────── E2E TIMELINE ───────── */ .e2e-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .e2e-grid::before { content: ''; position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, var(--kura-purple), var(--atlas-cyan), var(--ss-mint), var(--kura-purple)); background-size: 200% 100%; animation: e2eLine 6s linear infinite; opacity: 0.35; } @keyframes e2eLine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .e2e-card { padding: 0 16px; text-align: center; position: relative; } .e2e-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--fg-4); margin: 0 auto 24px; position: relative; z-index: 1; transition: all 0.4s var(--ease-out-expo); } .e2e-card:nth-child(1) .e2e-dot { border-color: var(--kura-purple); } .e2e-card:nth-child(2) .e2e-dot { border-color: var(--atlas-cyan); } .e2e-card:nth-child(3) .e2e-dot { border-color: var(--ss-mint); } .e2e-card:nth-child(4) .e2e-dot { border-color: var(--kura-purple); } .e2e-card:hover .e2e-dot { transform: scale(1.4); box-shadow: 0 0 16px currentColor; } .e2e-card:nth-child(1):hover .e2e-dot { box-shadow: 0 0 16px var(--kura-purple); } .e2e-card:nth-child(2):hover .e2e-dot { box-shadow: 0 0 16px var(--atlas-cyan); } .e2e-card:nth-child(3):hover .e2e-dot { box-shadow: 0 0 16px var(--ss-mint); } .e2e-card:nth-child(4):hover .e2e-dot { box-shadow: 0 0 16px var(--kura-purple); } .e2e-card h4 { font-family: var(--ff-display); font-size: 0.9375rem; font-weight: 600; margin-bottom: 8px; color: var(--fg-1); } .e2e-card p { font-size: 0.8125rem; color: var(--fg-3); line-height: 1.55; } /* ───────── CTA ───────── */ /* ───────── TRUST / GDPR ───────── */ .trust-section { position: relative; padding-top: 120px; padding-bottom: 120px; } .trust-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 500px; background: radial-gradient(ellipse, rgba(44,182,125,0.05), transparent 60%); pointer-events: none; } .trust-header { max-width: 720px; margin: 0 auto 56px; text-align: center; position: relative; } .trust-header .overline { justify-content: center; } .trust-header .overline::before { display: none; } .trust-header h2 { font-family: var(--ff-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; max-width: 640px; margin-left: auto; margin-right: auto; color: var(--fg-1); margin-bottom: 18px; } .trust-header h2 .muted { color: var(--fg-1); font-weight: 400; } .trust-header p { font-size: 0.9375rem; color: var(--fg-3); line-height: 1.65; max-width: 560px; margin: 0 auto; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; position: relative; } .trust-card { padding: 28px 26px; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.08); border-left-color: rgba(255,255,255,0.08); border-radius: var(--radius-xl); transition: all 0.4s var(--ease-out-expo); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; } .trust-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(127,90,240,0.35), transparent 70%); } .trust-card:hover { border-color: rgba(127,90,240,0.2); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); } .trust-card.is-primary::after { background: linear-gradient(90deg, var(--kura-purple), transparent 60%); box-shadow: 0 0 14px var(--kura-purple); } .trust-card.is-primary { border-color: rgba(127,90,240,0.18); } .trust-badge { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(127,90,240,0.08); border: 1px solid rgba(127,90,240,0.2); color: var(--kura-purple); flex-shrink: 0; } .trust-card.is-primary .trust-badge { background: rgba(127,90,240,0.14); border-color: rgba(127,90,240,0.35); } .trust-badge svg { width: 22px; height: 22px; } .trust-card h3 { font-family: var(--ff-display); font-size: 1rem; font-weight: 600; color: var(--fg-1); letter-spacing: -0.005em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .trust-card h3 .trust-mono { font-family: var(--ff-mono); font-size: 0.625rem; font-weight: 500; color: var(--kura-purple); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; background: rgba(127,90,240,0.1); border: 1px solid rgba(127,90,240,0.22); border-radius: 4px; } .trust-card p { font-size: 0.8125rem; color: var(--fg-3); line-height: 1.6; margin: 0; } .trust-card-meta { margin-top: auto; padding-top: 8px; font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; } .trust-commitments { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; position: relative; padding: 18px 22px; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .trust-commitment { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--fg-3); letter-spacing: 0.05em; padding: 6px 12px; } .trust-commitment::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--kura-purple); box-shadow: 0 0 8px rgba(127,90,240,0.6); } .trust-commitment + .trust-commitment { border-left: 1px solid rgba(255,255,255,0.06); } @media (max-width: 1040px) { .trust-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; } .trust-commitment + .trust-commitment { border-left: none; } } .cta-section { text-align: center; padding: 140px 48px; position: relative; overflow: hidden; min-height: 80vh; display: flex; align-items: center; justify-content: center; } .cta-section > .reveal { width: 100%; position: relative; } .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 500px; background: radial-gradient(ellipse, rgba(127,90,240,0.1), rgba(9,165,233,0.05) 40%, transparent 70%); animation: ctaGlow 5s ease-in-out infinite alternate; pointer-events: none; } @keyframes ctaGlow { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.2); } } .cta-section h2 { font-family: var(--ff-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; margin: 0 auto 24px; position: relative; max-width: 640px; color: var(--fg-1); } .cta-section p { font-size: 0.9375rem; color: var(--fg-3); margin-bottom: 36px; max-width: 460px; margin-left: auto; margin-right: auto; position: relative; } .cta-section .hero-actions { position: relative; opacity: 1; transform: none; animation: none; } /* ───────── FOOTER ───────── The same shared footer as contact.html — its own rules rather than the site-wide hv30-hv35 hover classes, which live in styles.css, a stylesheet this page does not load. */ .site-footer { width: 100%; margin-top: 110px; border-top: 1px solid rgba(255,255,255,0.06); } .site-footer a { text-decoration: none; } .footer-pad { max-width: 1000px; margin: 0 auto; padding: 64px 48px 48px; } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .footer-logo { height: 22px; width: auto; display: block; } .footer-heading { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-4); } .footer-col { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .footer-col a { font-size: 13px; color: var(--fg-3); transition: color .3s ease; } .footer-col a:hover { color: var(--fg-1); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); margin-top: 64px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; } @media (max-width: 768px) { .footer-pad { padding: 48px 24px 40px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } /* ───────── INTRO SECTION ───────── */ .intro-section { position: relative; padding: 72px 48px 32px; overflow: hidden; } .intro-stage { position: relative; width: 100%; aspect-ratio: 1400 / 580; max-height: 620px; margin: 0 0 0 0; overflow: hidden; transition: opacity 0.22s ease; } @media (max-width: 1024px) { .intro-stage { aspect-ratio: 1400 / 820; max-height: none; } } @media (max-width: 768px) { .intro-stage { aspect-ratio: 4 / 7; max-height: none; } } /* Super-hex zones — absolutely positioned, sized + placed by JS to match the traced giant hexagons */ .intro-superhexes { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .super-hex { position: absolute; transform: translate(-50%, -50%); /* width/left/top are set by JS to match the super-hex diameter */ display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: default; transition: transform 0.35s var(--ease-out-expo); } .super-hex-default, .super-hex-detail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 14%; text-align: center; transition: opacity 0.9s var(--ease-out-expo); } .super-hex-default { gap: 10px; opacity: 1; } .super-hex-detail { gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.9s var(--ease-out-expo) 0.2s; } .super-hex:hover .super-hex-default { opacity: 0; transition: opacity 0.5s var(--ease-out-expo); } .super-hex:hover .super-hex-detail { opacity: 1; } /* Resize-triggered layout swap (see the .is-resizing toggle in kura.js) — crossing the 800px breakpoint flips .super-hex between absolute hover-hexes and stacked cards. Rather than let the two states render on top of each other mid-swap, crossfade the whole stage: .is-resizing fades .intro-stage to 0 (transition on the base rule above), kura.js repositions everything while it's invisible, then removes the class to fade back in. The inner elements still get transition:none so that invisible swap is an instant cut, not a second animation racing the outer fade. */ .is-resizing .intro-stage { opacity: 0; } .is-resizing .super-hex, .is-resizing .super-hex-default, .is-resizing .super-hex-detail { transition: none !important; } .super-hex-num { font-family: var(--ff-mono); font-size: clamp(2.6rem, 5.2vw, 4.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; transition: color 0.4s, text-shadow 0.4s; } .super-hex-title { font-family: var(--ff-display); font-size: clamp(0.8125rem, 1.1vw, 1rem); font-weight: 600; line-height: 1.3; color: var(--fg-1); letter-spacing: -0.01em; max-width: 90%; } .super-hex-eyebrow { font-family: var(--ff-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.4s; } .super-hex-detail p { font-size: clamp(0.8125rem, 0.95vw, 0.9375rem); color: var(--fg-2); line-height: 1.55; max-width: 92%; } .super-hex[data-accent="purple"] .super-hex-num, .super-hex[data-accent="purple"] .super-hex-eyebrow { color: var(--kura-purple); } .super-hex[data-accent="cyan"] .super-hex-num, .super-hex[data-accent="cyan"] .super-hex-eyebrow { color: var(--atlas-cyan); } .super-hex[data-accent="mint"] .super-hex-num, .super-hex[data-accent="mint"] .super-hex-eyebrow { color: var(--ss-mint); } .super-hex[data-accent="purple"] .super-hex-num { text-shadow: 0 0 16px rgba(127,90,240,0.55); } .super-hex[data-accent="cyan"] .super-hex-num { text-shadow: 0 0 16px rgba(9,165,233,0.55); } .super-hex[data-accent="mint"] .super-hex-num { text-shadow: 0 0 16px rgba(44,182,125,0.55); } /* ── INTRO SECTION MOBILE — stack the 3 super-hexes vertically, always-visible text. The hover-to-reveal hex layout needs room the 3-across row doesn't have below 800px; JS also skips positioning/beam-building below this width (window.innerWidth <= 800 in kura.js) so the two must stay in sync. ── */ @media (max-width: 800px) { .intro-section { padding: 56px 20px 24px; } .intro-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .intro-header p.intro-sub { font-size: 0.9375rem; } .intro-stage { aspect-ratio: auto; max-height: none; height: auto; min-height: 0; margin-top: 32px; overflow: visible; padding: 8px 0; } /* Let the canvas fill a fixed visible area behind the stacked cards */ .intro-hex-bg { position: absolute; inset: 0; height: 100%; opacity: 0.5; } .intro-beam-svg { display: none; } .intro-superhexes { position: relative; inset: auto; display: flex; flex-direction: column; gap: 16px; z-index: 3; } /* Override JS-set inline positioning/sizing for each card */ .super-hex { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; transform: none !important; clip-path: none !important; display: block; padding: 24px 22px; background: rgba(13, 12, 16, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; cursor: default; } .super-hex[data-accent="purple"] { border-color: rgba(127, 90, 240, 0.35); } .super-hex[data-accent="cyan"] { border-color: rgba(9, 165, 233, 0.35); } .super-hex[data-accent="mint"] { border-color: rgba(44, 182, 125, 0.35); } /* Hide the default (number-only) state, always show detail on mobile */ .super-hex-default { display: none; } .super-hex-detail { position: relative; inset: auto; opacity: 1 !important; pointer-events: auto; padding: 0; text-align: left; align-items: flex-start; gap: 10px; transition: none; } .super-hex-detail p { font-size: 0.9375rem; max-width: 100%; text-align: left; color: var(--fg-2); line-height: 1.55; } .super-hex-eyebrow { font-size: 0.6875rem; letter-spacing: 0.16em; } } .intro-hex-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 75%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 75%, transparent 100%); opacity: 0.75; } .intro-beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; } .intro-content { position: relative; z-index: 2; } .intro-header { max-width: 820px; margin: 0 auto -20px; text-align: center; } .intro-header .overline { margin-left: auto; margin-right: auto; } .intro-header .overline::before { display: none; } .intro-header h2 { font-family: var(--ff-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 22px; color: var(--fg-1); } .intro-header h2 .muted { color: var(--fg-3); font-weight: 400; } .intro-gradient-tail { background: var(--gradient-hero); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 8s ease infinite; } .intro-sub { font-size: 0.9375rem; color: var(--fg-3); max-width: 640px; margin: 0 auto; line-height: 1.65; } } /* ───────── RESPONSIVE ───────── */ @media (max-width: 1024px) { section { padding: 72px 32px; } .channels-grid { grid-template-columns: repeat(2, 1fr); } .e2e-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .e2e-grid::before { display: none; } .definition-grid { grid-template-columns: 1fr; gap: 48px; } .vs-grid { grid-template-columns: 1fr; gap: 16px; } .vs-divider { display: none; } .dashboard-grid, .activation-grid { grid-template-columns: 1fr; } .how-figures { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 1080px) { /* The widget's fixed 300px+1fr+300px grid doesn't fit below 1080px and isn't worth making responsive (it's a recorded-feeling live animation, not reflowable content) — collapse it away instead, animated via the max-height/opacity transition on .blueprint-frame above. */ .blueprint-frame { max-height: 0; opacity: 0; margin: 0 auto; pointer-events: none; } .blueprint-frame + .gradient-line { display: none; } } @media (max-width: 768px) { section { padding: 64px 20px; } .channels-grid, .e2e-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions a { width: 100%; justify-content: center; } .how-figures { grid-template-columns: 1fr; } .cta-section { padding: 96px 20px; } } /* ═══════════════════════════════════════════════════ MOBILE OVERHAUL — ≤ 720px ═══════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Blueprint iframe is already collapsed below 1080px — see above. */ /* ── HERO — leave structure alone, just tighten padding ── */ .hero { padding: 120px 20px 48px; } .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); } .hero p.hero-sub { font-size: 0.9375rem; } .announce-bar { flex-wrap: wrap; justify-content: center; row-gap: 6px; max-width: 100%; } /* Intro section's own mobile layout switches at 800px — see below. */ /* ── WHAT KURA IS / KURA-SCROLL — stack cards, hide sidebar nav ── */ .definition { padding-top: 16px; } .definition h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .definition p.lead { font-size: 0.9375rem; } .kura-scroll { margin-top: 48px; gap: 20px; } .kura-scroll-nav { display: none; } .kura-scroll-panels { gap: 16px; } .ks-panel { padding: 24px 20px; grid-template-columns: 1fr; row-gap: 20px; scroll-margin-top: 80px; } /* Text on top, visual below */ .ks-panel .ks-panel-head { grid-column: 1; grid-row: 1; align-self: auto; max-width: 100%; } .ks-panel .ks-visual { grid-column: 1; grid-row: 3; align-self: auto; padding: 18px 14px; } .ks-panel .ks-bullets { grid-column: 1; grid-row: 2; align-self: auto; max-width: 100%; } .ks-panel h3 { font-size: 1.125rem; } .ks-panel-head > p { font-size: 0.875rem; } .ks-bullets li { font-size: 0.8125rem; } /* Cap visual heights so the cards don't get awful */ .ks-visual--decisioning { grid-template-columns: 1fr; gap: 10px; padding: 14px 12px; } .dec-sample { height: 120px; } .ks-visual--scoring { gap: 10px; } .ks-vis-arrow { transform: rotate(90deg); } /* ── OUTCOMES — stack 1 per row, drop nowrap on headline ── */ .outcomes-section { padding-top: 56px; padding-bottom: 56px; } .outcomes-section .section-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); white-space: normal; } .outcomes-section .section-header p { font-size: 0.9375rem; } .outcomes-grid { grid-template-columns: 1fr; gap: 16px; } .outcome-card { padding: 28px 22px 24px; } .card-picto { width: 110px; height: 110px; margin-bottom: 20px; } .outcomes-footer { font-size: 0.8125rem; padding: 0 4px; } /* ── DASHBOARD — screenshot mockup doesn't fit small screens, hide it and keep the copy ── */ .dashboard-section { padding-top: 56px; padding-bottom: 56px; } .dashboard-section .section-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .dashboard-section .section-header p { font-size: 0.9375rem; } .dash-mockup { display: none; } /* ── TRUST / COMPLIANCE — stack cards ── */ .trust-section { padding-top: 64px; padding-bottom: 64px; } .trust-header { margin-bottom: 40px; } .trust-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); } .trust-header p { font-size: 0.9375rem; } .trust-grid { grid-template-columns: 1fr; gap: 14px; } .trust-card { padding: 22px 20px; } .trust-commitments { flex-direction: column; gap: 14px; padding: 18px; } .trust-commitment { padding: 0; border-left: none !important; } .trust-commitment + .trust-commitment { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } /* ── CTA ── */ .cta-section { padding: 72px 20px; min-height: 0; } .cta-section h2 { font-size: clamp(2rem, 8vw, 2.75rem); } } /* ═══════════════════════════════════════════════════ OUTCOMES SECTION ═══════════════════════════════════════════════════ */ .outcomes-section { position: relative; overflow: hidden; } .outcomes-section::before { content: ''; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 1100px; height: 600px; background: radial-gradient(ellipse, rgba(44, 182, 125, 0.05) 0%, rgba(9, 165, 233, 0.03) 40%, transparent 70%); pointer-events: none; z-index: 0; } .outcomes-section .container { position: relative; z-index: 1; } .outcomes-section .section-header { max-width: 100%; } .outcomes-section .section-header .overline::before { display: none; } .outcomes-section .section-header p { max-width: 720px; } .outcomes-section .section-header h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; } @media (min-width: 721px) { .outcomes-section .section-header h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); white-space: nowrap; } } .dashboard-section .section-header { max-width: 880px; } .dashboard-section .section-header .overline::before { display: none; } .dashboard-section .section-header h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; } .outcomes-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; } .outcome-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 36px 32px 32px; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .outcome-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--card-accent), transparent 55%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.2; transition: opacity 0.5s; pointer-events: none; } .outcome-card:hover { transform: translateY(-4px); } .outcome-card:hover::before { opacity: 0.7; } .outcome-card.is-store { --card-accent: var(--ss-mint); } .outcome-card.is-intent { --card-accent: var(--atlas-cyan); } .outcome-card.is-attention { --card-accent: var(--kura-purple); } .outcome-card::after { content: ''; position: absolute; top: -50%; right: -40%; width: 320px; height: 320px; background: radial-gradient(circle, var(--card-accent) 0%, transparent 60%); opacity: 0.08; pointer-events: none; z-index: 0; } .outcome-card > * { position: relative; z-index: 1; } .card-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 32px; width: fit-content; } .badge-available { color: var(--bg-deep); background: var(--ss-mint); } .badge-available::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bg-deep); animation: availablePulse 2s ease-in-out infinite; } @keyframes availablePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } } .badge-soon { color: var(--card-accent); background: transparent; border: 1px solid var(--card-accent); opacity: 0.85; } .card-picto { width: 160px; height: 160px; margin: 0 auto 36px; position: relative; display: flex; align-items: center; justify-content: center; } .card-picto svg { width: 100%; height: 100%; overflow: visible; } .picto-hex { fill: none; stroke: var(--card-accent); stroke-width: 1.2; opacity: 0.5; animation: pictoHexBreathe 5s ease-in-out infinite; } .outcome-card.is-intent .picto-hex { animation-delay: 1.2s; } .outcome-card.is-attention .picto-hex { animation-delay: 2.4s; } @keyframes pictoHexBreathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.75; } } .picto-hex-inner { fill: var(--card-accent); opacity: 0.04; } .picto-stroke { fill: none; stroke: var(--card-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .picto-fill { fill: var(--card-accent); } .card-picto::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, var(--card-accent) 0%, transparent 65%); opacity: 0; animation: pictoBreathe 5s ease-in-out infinite; pointer-events: none; z-index: -1; filter: blur(20px); } .outcome-card.is-intent .card-picto::before { animation-delay: 1.2s; } .outcome-card.is-attention .card-picto::before { animation-delay: 2.4s; } @keyframes pictoBreathe { 0%, 100% { opacity: 0.05; transform: scale(0.9); } 50% { opacity: 0.28; transform: scale(1.05); } } /* Picto 1 — Store Visit */ .sv-particle { fill: var(--card-accent); opacity: 0; animation: svParticleFlow 3.2s linear infinite; } @keyframes svParticleFlow { 0% { opacity: 0; } 15% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { opacity: 0; } } .sv-particle-1 { animation-delay: 0s; } .sv-particle-2 { animation-delay: 0.4s; } .sv-particle-3 { animation-delay: 0.8s; } .sv-particle-4 { animation-delay: 1.2s; } .sv-particle-5 { animation-delay: 1.6s; } .sv-particle-6 { animation-delay: 2.0s; } .sv-trail-1 { animation: svTrail1 3.2s linear infinite; } .sv-trail-2 { animation: svTrail2 3.2s linear infinite; } .sv-trail-3 { animation: svTrail3 3.2s linear infinite; } .sv-trail-4 { animation: svTrail4 3.2s linear infinite; } .sv-trail-5 { animation: svTrail5 3.2s linear infinite; } .sv-trail-6 { animation: svTrail6 3.2s linear infinite; } @keyframes svTrail1 { 0% { transform: translate(-50px, -50px); } 100% { transform: translate(0, 0); } } @keyframes svTrail2 { 0% { transform: translate( 50px, -50px); } 100% { transform: translate(0, 0); } } @keyframes svTrail3 { 0% { transform: translate(-60px, 10px); } 100% { transform: translate(0, 0); } } @keyframes svTrail4 { 0% { transform: translate( 60px, 10px); } 100% { transform: translate(0, 0); } } @keyframes svTrail5 { 0% { transform: translate(-40px, 50px); } 100% { transform: translate(0, 0); } } @keyframes svTrail6 { 0% { transform: translate( 40px, 50px); } 100% { transform: translate(0, 0); } } .sv-center-pulse { fill: var(--card-accent); transform-origin: 70px 70px; animation: svCenterPulse 2s ease-in-out infinite; } @keyframes svCenterPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.7; } } .sv-ring { fill: none; stroke: var(--card-accent); stroke-width: 1; transform-origin: 70px 70px; animation: svRing 2.6s ease-out infinite; opacity: 0; } .sv-ring.delay-1 { animation-delay: 0.8s; } .sv-ring.delay-2 { animation-delay: 1.6s; } @keyframes svRing { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } /* Picto 2 — Purchase Intent */ .pi-sweep { transform-origin: 70px 70px; animation: piSweep 4s linear infinite; } @keyframes piSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pi-blip { fill: var(--card-accent); opacity: 0; animation: piBlip 4s linear infinite; transform-origin: center; } @keyframes piBlip { 0% { opacity: 0; transform: scale(0); } 5% { opacity: 1; transform: scale(1); } 60% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(0.8); } } .pi-blip-1 { animation-delay: 0.3s; } .pi-blip-2 { animation-delay: 1.2s; } .pi-blip-3 { animation-delay: 2.5s; } .pi-blip-4 { animation-delay: 3.2s; } /* Picto 3 — Ad Attention */ .aa-wave { fill: none; stroke: var(--card-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 180; stroke-dashoffset: 180; animation: aaWaveDraw 3s ease-in-out infinite; } @keyframes aaWaveDraw { 0% { stroke-dashoffset: 180; opacity: 0.3; } 40% { stroke-dashoffset: 0; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -180; opacity: 0.3; } } .aa-baseline { stroke: var(--card-accent); stroke-width: 0.5; opacity: 0.2; stroke-dasharray: 2 3; } .aa-pulse-dot { fill: var(--card-accent); animation: aaPulseDot 3s ease-in-out infinite; transform-origin: center; } @keyframes aaPulseDot { 0%, 100% { opacity: 0; transform: scale(0.5); } 45%, 60% { opacity: 1; transform: scale(1.2); } } .aa-grid-line { stroke: var(--card-accent); stroke-width: 0.4; opacity: 0.15; stroke-dasharray: 1 2; } .card-outcome-title { font-family: var(--ff-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 12px; color: var(--fg-1); } .card-outcome-desc { font-size: 0.9375rem; line-height: 1.65; color: var(--fg-3); flex: 1; } .card-outcome-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--card-accent); text-decoration: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1); align-self: flex-start; } .card-outcome-cta:hover { gap: 14px; } .card-outcome-cta::after { content: '→'; } .outcomes-footer { margin-top: 52px; text-align: center; font-size: 0.9375rem; color: var(--fg-3); } .outcomes-footer a { color: var(--fg-1); text-decoration: none; font-family: var(--ff-mono); font-size: 0.8125rem; margin-left: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; gap: 6px; } .outcomes-footer a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } @media (max-width: 900px) { .outcomes-grid { grid-template-columns: 1fr; gap: 16px; } .card-picto { width: 120px; height: 120px; margin-bottom: 28px; } } @media (max-width: 640px) { .outcome-card { padding: 28px 24px 24px; } .outcomes-footer a { display: block; margin: 12px auto 0; width: fit-content; } } /* ═══════════════════════════════════════════════════════ DASHBOARD MOCKUP — Linear-style floating app screenshot ═══════════════════════════════════════════════════════ */ .dash-mockup { position: relative; margin: 64px auto 0; max-width: 1280px; perspective: 2400px; padding: 0 20px; } .dash-mockup-glow { position: absolute; inset: -10% 10% -10% 10%; background: radial-gradient(ellipse at 30% 40%, rgba(127, 90, 240, 0.28), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(9, 229, 163, 0.22), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(9, 165, 233, 0.18), transparent 65%); filter: blur(60px); z-index: 0; opacity: 0.9; pointer-events: none; } .dash-app { position: relative; z-index: 1; background: linear-gradient(180deg, #1a1a22 0%, #121218 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 80px 160px -40px rgba(127, 90, 240, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.02); transform: rotateX(4deg); transform-origin: 50% 100%; transition: transform 1.2s var(--ease-out-expo); } .dash-mockup.reveal.is-visible .dash-app { transform: rotateX(2deg); } /* Chrome */ .dash-chrome { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: rgba(9, 6, 15, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .dash-chrome-dots { display: flex; gap: 6px; } .dash-chrome-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); } .dash-chrome-dots span:nth-child(1) { background: #ff5f57; } .dash-chrome-dots span:nth-child(2) { background: #febc2e; } .dash-chrome-dots span:nth-child(3) { background: #28c840; } .dash-chrome-url { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); margin: 0 auto; } .dash-chrome-spacer { width: 50px; } /* Body layout */ .dash-body { display: grid; grid-template-columns: 200px 1fr; min-height: 560px; } /* Sidebar */ .dash-sidebar { background: rgba(9, 6, 15, 0.35); border-right: 1px solid rgba(255, 255, 255, 0.04); padding: 20px 14px; display: flex; flex-direction: column; gap: 20px; } .dash-logo { display: flex; align-items: center; padding: 0 6px 8px; color: var(--fg-1); } .dash-logo svg { height: 18px; width: auto; display: block; } .dash-nav-group { display: flex; flex-direction: column; gap: 2px; } .dash-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-4); padding: 0 8px 6px; font-weight: 500; } .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; color: var(--fg-3); cursor: default; position: relative; } .dash-nav-item svg { color: var(--fg-4); flex-shrink: 0; } .dash-nav-item.active { background: rgba(127, 90, 240, 0.12); color: var(--fg-1); } .dash-nav-item.active svg { color: var(--kura-purple); } .dash-nav-badge { margin-left: auto; font-family: var(--ff-mono); font-size: 10px; padding: 2px 6px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; color: var(--fg-2); } /* Main */ .dash-main { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; } .dash-main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .dash-breadcrumb { font-size: 11.5px; color: var(--fg-4); margin-bottom: 4px; font-family: var(--ff-mono); } .dash-breadcrumb span { margin: 0 4px; } .dash-breadcrumb-cur { color: var(--fg-2); } .dash-main-title { font-family: var(--ff-display); font-size: 20px; font-weight: 500; color: var(--fg-1); margin: 0; letter-spacing: -0.01em; } .dash-main-actions { display: flex; gap: 8px; } .dash-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(9, 229, 163, 0.1); border: 1px solid rgba(9, 229, 163, 0.25); border-radius: var(--radius-full); font-size: 11px; color: var(--mint-bright); font-family: var(--ff-mono); } .dash-range-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; font-size: 11.5px; color: var(--fg-2); } /* Tabs */ .dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dash-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 12.5px; color: var(--fg-3); border-bottom: 2px solid transparent; margin-bottom: -1px; } .dash-tab.active { color: var(--fg-1); border-bottom-color: var(--atlas-cyan); } .dash-tab-dot { width: 6px; height: 6px; border-radius: 50%; } .dash-tab-dot--cyan { background: var(--atlas-cyan); } .dash-tab-dot--mint { background: var(--mint-bright); } /* KPIs strip */ .dash-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; } .dash-kpi { padding: 14px 16px; background: rgba(13, 12, 16, 0.55); display: flex; flex-direction: column; gap: 6px; } .dash-kpi--accent { background: linear-gradient(135deg, rgba(127, 90, 240, 0.12), rgba(9, 229, 163, 0.08)); } .dash-kpi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); font-weight: 500; } .dash-kpi-value { font-family: var(--ff-display); font-size: 22px; font-weight: 500; color: var(--fg-1); letter-spacing: -0.02em; line-height: 1; } .dash-kpi-value span { font-size: 14px; color: var(--fg-3); font-weight: 400; } .dash-kpi-delta { font-size: 10.5px; color: var(--fg-3); font-family: var(--ff-mono); } .dash-kpi-delta.up { color: var(--mint-bright); } .dash-kpi-delta.down { color: var(--chart-orange); } /* Row with chart + offline card */ .dash-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; } .dash-card { background: rgba(13, 12, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 16px 18px; } .dash-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .dash-card-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-4); margin-bottom: 3px; } .dash-card-title { font-family: var(--ff-display); font-size: 14px; color: var(--fg-1); font-weight: 500; } .dash-legend { display: flex; gap: 12px; font-size: 11px; color: var(--fg-3); } .dash-legend span { display: inline-flex; align-items: center; gap: 5px; } .dash-legend i { width: 8px; height: 2px; border-radius: 1px; display: inline-block; } /* Chart */ .dash-chart { width: 100%; height: 180px; display: block; } .dash-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--fg-4); font-family: var(--ff-mono); } /* Offline card */ .dash-big-stat { margin-bottom: 14px; } .dash-big-value { font-family: var(--ff-display); font-size: 32px; font-weight: 500; color: var(--fg-1); letter-spacing: -0.02em; line-height: 1; } .dash-big-delta { font-size: 11.5px; color: var(--mint-bright); margin-top: 4px; font-family: var(--ff-mono); } .dash-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .dash-mini-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); margin-bottom: 4px; } .dash-mini-val { font-family: var(--ff-display); font-size: 16px; color: var(--fg-1); font-weight: 500; } .dash-catchment { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .dash-catchment-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); margin-bottom: 8px; } .dash-catchment-bar { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 6px; } .dash-catchment-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--atlas-cyan), var(--mint-bright)); border-radius: var(--radius-full); } .dash-catchment-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-4); font-family: var(--ff-mono); } /* Table */ .dash-table-card { padding: 16px 18px 8px; } .dash-table { display: flex; flex-direction: column; } .dash-th, .dash-tr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; align-items: center; gap: 12px; padding: 10px 4px; font-size: 12px; } .dash-th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dash-tr { color: var(--fg-2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .dash-tr:last-child { border-bottom: none; } .dash-td-name { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-1); } .dash-tag { width: 4px; height: 20px; border-radius: 2px; display: inline-block; } .dash-tag--cyan { background: var(--atlas-cyan); } .dash-tag--purple { background: var(--kura-purple); } .dash-tag--mint { background: var(--mint-bright); } .dash-tag--orange { background: var(--chart-orange); } .dash-status { font-family: var(--ff-mono); font-size: 11px; } .dash-status.on { color: var(--mint-bright); } .dash-status.paused { color: var(--fg-4); } /* Responsive */ @media (max-width: 1024px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } .dash-kpi:nth-child(4), .dash-kpi:nth-child(5) { border-top: 1px solid rgba(255,255,255,0.05); } .dash-row { grid-template-columns: 1fr; } .dash-body { grid-template-columns: 64px 1fr; } .dash-logo span, .dash-nav-item:not(.active) span, .dash-nav-label, .dash-nav-badge { display: none; } .dash-nav-item { justify-content: center; padding: 8px; } } @media (max-width: 720px) { /* Dashboard responsive rules are handled by the primary MOBILE OVERHAUL block above. */ }