/* Highlight orange for hero section */ .highlight-orange { color: #ff5a1f; } /* ============================================================ DARK FORGE · DIGITAL — editorial + glass/HUD palette #2: charcoal + ember on deep black ============================================================ */ :root { --bg: #0a0a0a; --bg-2: #0e0e0e; --panel: #141414; --panel-2: #181818; --glass: rgba(24, 24, 24, 0.55); --glass-hi: rgba(32, 32, 32, 0.72); --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.14); --line-3: rgba(255, 138, 76, 0.22); --text: #f5f5f5; --text-2: #cfcfcf; --text-dim: #8a8a8a; --text-mute: #5a5a5a; --ember: #ff5a1f; --ember-2: #ffae6b; --ember-soft: rgba(255, 90, 31, 0.08); --ok: #74f0c2; --serif: "Fraunces", "Times New Roman", serif; --sans: "Inter", ui-sans-serif, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-e: 0 20px 60px rgba(255, 90, 31, 0.12); --shell: min(1280px, calc(100vw - 40px)); } /* ============================================================ LIGHT MODE — override every variable when [data-theme="light"] is set on ============================================================ */ [data-theme="light"] { --bg: #f5f3ef; --bg-2: #ede9e3; --panel: #e6e1da; --panel-2: #ddd8d0; --glass: rgba(245, 243, 239, 0.75); --glass-hi: rgba(255, 255, 255, 0.88); --line: rgba(0, 0, 0, 0.09); --line-2: rgba(0, 0, 0, 0.15); --line-3: rgba(255, 90, 31, 0.25); --text: #111111; --text-2: #333333; --text-dim: #666666; --text-mute: #999999; --ember: #e04d18; --ember-2: #c93d10; --ember-soft: rgba(224, 77, 24, 0.08); --ok: #1a9e6e; --shadow: 0 30px 80px rgba(0, 0, 0, 0.10); --shadow-e: 0 20px 60px rgba(224, 77, 24, 0.10); } /* Targeted overrides for elements with hardcoded dark rgba values */ [data-theme="light"] body::before { background: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(224, 77, 24, 0.06) 0%, transparent 70%); } [data-theme="light"] .topbar { background: rgba(245, 243, 239, 0.88); border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .topbar.scrolled { background: rgba(240, 237, 232, 0.96); } [data-theme="light"] .trk-wrap { background: linear-gradient(180deg, rgba(240, 237, 232, 0.82) 0%, rgba(232, 228, 222, 0.97) 100%); border-top-color: rgba(0,0,0,0.10); box-shadow: 0 -8px 32px -8px rgba(0,0,0,0.08); } [data-theme="light"] .forge-bubble { background: rgba(245, 243, 239, 0.96); } [data-theme="light"] .forge-bubble::after { background: rgba(245, 243, 239, 0.96); } [data-theme="light"] .scanlines { opacity: 0.03; } [data-theme="light"] .orb-canvas { opacity: 0.9; } /* colors handled per-frame in JS */ [data-theme="light"] .hud { opacity: 0.35; } [data-theme="light"] .intro { background: var(--bg); } [data-theme="light"] .forge-btn { background: rgba(245, 243, 239, 0.92); border-color: rgba(0,0,0,0.15); } [data-theme="light"] .revealable { background: var(--bg); } /* ── THEME TOGGLE PILL ─────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 0; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); cursor: pointer; position: relative; transition: border-color 0.2s, background 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--ember); } .tt-sun, .tt-moon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s; color: var(--text-mute); } .tt-sun svg, .tt-moon svg { width: 15px; height: 15px; } /* Dark mode (default): moon is active */ .tt-moon { background: var(--ember); color: #fff; } .tt-sun { background: transparent; } /* Light mode: sun is active */ [data-theme="light"] .tt-sun { background: var(--ember); color: #fff; } [data-theme="light"] .tt-moon { background: transparent; color: var(--text-mute); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { background: var(--bg); } body { font-family: var(--sans); color: var(--text); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; padding-bottom: 102px; /* leave room for the fixed ticker rail */ } /* Ambient field */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 900px 500px at 20% -10%, rgba(255, 90, 31, 0.08), transparent 55% ), radial-gradient( 700px 400px at 110% 10%, rgba(255, 90, 31, 0.05), transparent 55% ), radial-gradient( 800px 600px at 50% 140%, rgba(255, 174, 107, 0.05), transparent 60% ); } /* Grain */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 0.6px, transparent 0.6px), radial-gradient(rgba(255, 90, 31, 0.04) 0.4px, transparent 0.4px); background-size: 28px 28px, 14px 14px; opacity: 0.35; mix-blend-mode: overlay; } main { position: relative; z-index: 2; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea { font: inherit; color: inherit; } ::selection { background: var(--ember); color: #0a0a0a; } :focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; border-radius: 4px; } /* ============================================================ TYPE ============================================================ */ .display { font-family: var(--serif); font-weight: 300; font-style: italic; letter-spacing: -0.025em; line-height: 0.92; font-variation-settings: "opsz" 144; } .display em { font-style: italic; color: var(--ember); font-weight: 400; } .sec-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); } .sec-eyebrow span { width: 28px; height: 1px; background: var(--ember); display: inline-block; box-shadow: 0 0 8px var(--ember); } /* ============================================================ HUD — fixed frame of the page ============================================================ */ .hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; } .hud-c { position: absolute; width: 22px; height: 22px; border: 1px solid var(--ember); opacity: 0.55; } .hud-c.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; } .hud-c.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; } .hud-c.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; } .hud-c.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; } .hud-tick { position: absolute; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--text-mute); } .hud-tick.tl-t { top: 20px; left: 46px; } .hud-tick.tr-t { top: 20px; right: 46px; } .hud-tick.bl-t { bottom: 20px; left: 46px; color: var(--ok); animation: blink 2.4s ease-in-out infinite; } .hud-tick.br-t { bottom: 20px; right: 46px; } /* ============================================================ TOPBAR ============================================================ */ .topbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 36px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: rgba(12, 12, 12, 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); transition: border-color 0.3s, background 0.3s; } .topbar.scrolled { background: rgba(12, 12, 12, 0.82); border-color: var(--line-2); } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 26px; height: 26px; color: var(--ember); flex: none; } .brand-wm { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.22em; color: var(--text); font-weight: 600; } .brand-wm em { color: var(--text-dim); font-style: normal; font-weight: 400; } .nav { display: flex; gap: 2px; } .nav a { padding: 10px 14px; border-radius: 999px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s, background 0.2s; } .nav a:hover { color: var(--text); } .nav a.active { color: var(--ember); background: rgba(255, 90, 31, 0.06); } .cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border-radius: 999px; background: var(--ember); color: #0a0a0a; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; box-shadow: 0 10px 30px rgba(255, 90, 31, 0.25); transition: transform 0.2s, box-shadow 0.2s; } .cta:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(255, 90, 31, 0.35); } .cta-dot { width: 7px; height: 7px; border-radius: 50%; background: #0a0a0a; box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.25); } /* ============================================================ INTRO ANIMATION ============================================================ */ .intro { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at 50% 50%, #151515 0%, #070707 80%); display: grid; place-items: center; overflow: hidden; } .intro-grid { position: absolute; inset: -2px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%); opacity: 0.6; animation: gridFloat 20s linear infinite; } @keyframes gridFloat { to { background-position: 80px 80px; } } .intro-stack { position: relative; z-index: 2; padding: 0 5vw; width: 94vw; max-width: 1400px; box-sizing: border-box; } .intro-body { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1.55; letter-spacing: -0.02em; color: var(--text); text-align: left; } @media (max-width: 700px) { .intro-stack { padding: 0 6vw; width: 96vw; } .intro-body { font-size: clamp(1.15rem, 5vw, 1.4rem); line-height: 1.65; } } .intro-kicker { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; } .i-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.3; } } .intro-line { display: inline; opacity: 0; transition: opacity 0.55s ease; } .intro-line em { color: var(--ember); font-style: italic; font-weight: 400; } .intro-line.final { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.88em; letter-spacing: 0.01em; } .intro-line.in { opacity: 1; } .intro-progress { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 260px; height: 2px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; } .intro-progress i { display: block; height: 100%; background: var(--ember); width: 0; transition: width 0.1s linear; box-shadow: 0 0 10px var(--ember); } .intro-skip { position: absolute; bottom: 40px; right: 60px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--text-dim); padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; transition: color 0.2s, border-color 0.2s; } .intro-skip:hover { color: var(--text); border-color: var(--ember); } .intro.hide { animation: introOut 0.7s ease forwards; } @keyframes introOut { to { opacity: 0; transform: scale(1.04); visibility: hidden; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; padding: 150px 0 0; display: flex; flex-direction: column; justify-content: space-between; } .hero-inner { width: var(--shell); margin: 0 auto 0 max(48px, 5vw); /* left-aligned — closer to edge without touching it */ position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 40px; } .hero-content { min-width: 0; } .orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.9; pointer-events: none; } .scanlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.01) 0, rgba(255, 255, 255, 0.01) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: 0.7; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-3); background: rgba(255, 90, 31, 0.04); backdrop-filter: blur(10px); margin-bottom: 38px; position: relative; z-index: 3; } .hero-eyebrow .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember), 0 0 0 3px rgba(255, 90, 31, 0.12); animation: blink 1.8s ease-in-out infinite; } .eyebrow-text { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ember-2); } h1.display { font-size: clamp(3.4rem, 10vw, 9.2rem); margin-bottom: 42px; position: relative; z-index: 3; } h1.display .d-line { display: block; overflow: hidden; } h1.display .d-line i { display: inline-block; transform: translateY(100%); font-style: italic; } h1.display .d-line.shift { padding-left: 2.2em; } body.ready h1.display .d-line i { animation: rise 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; } body.ready h1.display .d-line:nth-child(2) i { animation-delay: 0.12s; } body.ready h1.display .d-line:nth-child(3) i { animation-delay: 0.24s; } .hero-sub { color: var(--text-2); font-size: 1.18rem; max-width: 55ch; margin-bottom: 42px; position: relative; z-index: 3; font-weight: 300; } .hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: relative; z-index: 3; } .btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 999px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s; position: relative; overflow: hidden; } .btn.primary { background: var(--ember); color: #0a0a0a; box-shadow: 0 14px 40px rgba(255, 90, 31, 0.25); } .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(255, 90, 31, 0.4); } .btn.ghost { color: var(--text); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); } .btn.ghost:hover { border-color: var(--ember); color: var(--ember-2); background: rgba(255, 90, 31, 0.05); } .btn.big { padding: 20px 28px; font-size: 0.82rem; } .btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 10, 10, 0.2); } .btn-arrow svg { width: 14px; height: 14px; transition: transform 0.2s; } .btn:hover .btn-arrow svg { transform: translateX(5px); } /* HUD panels floating in hero */ .hud-panel { position: absolute; z-index: 3; padding: 14px 16px; min-width: 220px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow); font-family: var(--mono); font-size: 0.72rem; } .hud-panel::before { content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); opacity: 0.6; } .hud-pair { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; flex-shrink: 0; } .hud-panel.p1 { position: relative; animation: float1 8s ease-in-out infinite; } .hud-panel.p2 { position: relative; animation: float1 10s ease-in-out infinite reverse; } @keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hp-label { color: var(--ember-2); font-size: 0.66rem; letter-spacing: 0.22em; margin-bottom: 10px; } .hp-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-dim); } .hp-v { color: var(--text); } .hp-v.ok { color: var(--ok); } .hp-wave { display: flex; align-items: flex-end; gap: 3px; margin-top: 10px; height: 22px; } .hp-wave i { flex: 1; background: var(--ember); opacity: 0.7; border-radius: 1px; animation: wv 1.4s ease-in-out infinite; } .hp-wave i:nth-child(1) { animation-delay: 0s; } .hp-wave i:nth-child(2) { animation-delay: 0.08s; } .hp-wave i:nth-child(3) { animation-delay: 0.16s; } .hp-wave i:nth-child(4) { animation-delay: 0.24s; } .hp-wave i:nth-child(5) { animation-delay: 0.32s; } .hp-wave i:nth-child(6) { animation-delay: 0.4s; } .hp-wave i:nth-child(7) { animation-delay: 0.48s; } .hp-wave i:nth-child(8) { animation-delay: 0.56s; } .hp-wave i:nth-child(9) { animation-delay: 0.48s; } .hp-wave i:nth-child(10) { animation-delay: 0.4s; } .hp-wave i:nth-child(11) { animation-delay: 0.32s; } .hp-wave i:nth-child(12) { animation-delay: 0.24s; } .hp-wave i:nth-child(13) { animation-delay: 0.16s; } .hp-wave i:nth-child(14) { animation-delay: 0.08s; } .hp-wave i:nth-child(15) { animation-delay: 0s; } .hp-wave i:nth-child(16) { animation-delay: 0.08s; } @keyframes wv { 0%, 100% { height: 20%; } 50% { height: 100%; } } .hp-log { display: flex; flex-direction: column; gap: 6px; font-size: 0.68rem; } .hp-line { display: flex; gap: 8px; color: var(--text-dim); } .hp-line .t { color: var(--text-mute); font-style: normal; flex: none; width: 36px; } .hp-line b { color: var(--text); font-weight: 500; } .hp-line em { font-style: normal; } .hp-line .ok { color: var(--ok); } .hero-meta { margin-top: 60px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--text-mute); position: relative; z-index: 3; } .hero-meta b { color: var(--text); font-weight: 500; } .hero-meta .sep { color: var(--ember); opacity: 0.6; } /* Jump strip at bottom of hero */ .jump-strip { width: var(--shell); margin: 80px auto 0; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .jump-item { display: block; padding: 22px 20px; border-right: 1px solid var(--line); transition: background 0.3s; position: relative; } .jump-item:last-child { border-right: 0; } .jump-item:hover { background: rgba(255, 90, 31, 0.04); } .jump-item.primary { background: rgba(255, 90, 31, 0.06); } .jump-item.primary:hover { background: rgba(255, 90, 31, 0.12); } .j-num { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--ember); margin-bottom: 12px; } .j-label { display: block; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: 4px; } .j-meta { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--text-mute); } /* ============================================================ TICKER RAIL — attached to bottom of hero, rolls right→left ============================================================ */ .trk-wrap { position: fixed; /* always visible, glued to the viewport bottom */ left: 0; right: 0; bottom: 0; width: 100%; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(8,8,8,0.7) 0%, rgba(0,0,0,0.92) 100%); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 -12px 40px -12px rgba(0,0,0,0.6); z-index: 45; } .trk-wrap::before, .trk-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 200px; z-index: 2; pointer-events: none; } .trk-wrap::before { left: 0; background: linear-gradient(to right, var(--bg) 10%, transparent 100%); } .trk-wrap::after { right: 0; background: linear-gradient(to left, var(--bg) 10%, transparent 100%); } .trk-rail { display: flex; width: max-content; will-change: transform; cursor: grab; } .trk-rail.dragging { cursor: grabbing; } .trk-wrap { user-select: none; touch-action: pan-y; } .trk-tk { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 24px 44px; border: none; border-right: 1px solid var(--line); background: transparent; cursor: pointer; flex-shrink: 0; text-align: left; position: relative; transition: background 0.25s; } .trk-tk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .trk-tk:hover { background: rgba(255, 90, 31, 0.05); } .trk-tk:hover::after { transform: scaleX(1); } .trk-pri { background: rgba(255, 90, 31, 0.06); } .trk-pri:hover { background: rgba(255, 90, 31, 0.12); } .trk-n { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.22em; color: var(--ember); } .trk-l { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.7rem; color: var(--text); white-space: nowrap; } .trk-m { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-mute); white-space: nowrap; } /* ============================================================ LOCKED REVEAL SECTIONS — hidden until a ticket is clicked ============================================================ */ .locked { display: none; position: relative; padding: 100px 0; background: linear-gradient(180deg, rgba(255,90,31,0.03) 0%, transparent 100%); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1); } .locked.unlocked { display: block; } .locked.unlocked.in { opacity: 1; transform: translateY(0); } .lk-shell { position: relative; } .lk-close { position: absolute; top: -40px; right: 0; width: 40px; height: 40px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--text-mute); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; transition: all 0.2s; } .lk-close:hover { border-color: var(--ember); color: var(--ember); background: rgba(255,90,31,0.1); } .lk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--ember); margin-bottom: 24px; } .lk-eyebrow span { width: 8px; height: 8px; background: var(--ember); border-radius: 50%; box-shadow: 0 0 12px var(--ember); } .lk-h { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 18px; } .lk-h em { color: var(--ember); font-style: italic; } .lk-lead { font-size: 1.05rem; color: var(--text-mute); max-width: 640px; line-height: 1.65; margin-bottom: 56px; } .lk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; } .lk-card { padding: 32px 28px; border: 1px solid var(--line); background: rgba(255,255,255,0.015); border-radius: 4px; transition: border-color 0.3s, transform 0.3s; } .lk-card:hover { border-color: rgba(255,90,31,0.3); transform: translateY(-2px); } .lk-card .lk-num { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ember); margin-bottom: 18px; } .lk-card h4 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.3rem; color: var(--text); margin-bottom: 12px; } .lk-card p { font-size: 0.92rem; color: var(--text-mute); line-height: 1.6; } .lk-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; } .lk-price { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; } @media (max-width: 860px) { .lk-grid { grid-template-columns: 1fr; } .trk-tk { padding: 14px 22px; gap: 4px; } .trk-l { font-size: 1rem; } .trk-n { font-size: 0.62rem; } .trk-m { font-size: 0.58rem; } .locked { padding: 70px 0; } } /* ============================================================ REVEALABLE SECTIONS — all real sections are hidden by default, and only one shows at a time when the user clicks a ticket. ============================================================ */ .revealable { display: none; position: relative; opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2,0.8,0.2,1); } .revealable.unlocked { display: block; } .revealable.unlocked.in { opacity: 1; transform: translateY(0); } /* Floating close button injected into each revealable section */ .rv-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-mute); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; z-index: 10; transition: all 0.2s; font-family: var(--mono); } .rv-close:hover { border-color: var(--ember); color: var(--ember); background: rgba(255,90,31,0.12); transform: rotate(90deg); } /* Active ticket gets a glowing dot */ .trk-tk.active::before { content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 160px 0; position: relative; } .shell { width: var(--shell); margin: 0 auto; } .sec-head { margin-bottom: 80px; max-width: 68ch; } .sec-head .display { font-size: clamp(2.8rem, 7vw, 6rem); margin-top: 18px; } .sec-head .sec-lead { color: var(--text-dim); font-size: 1.08rem; margin-top: 24px; max-width: 52ch; font-weight: 300; } .sec-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; max-width: none; } .sec-head-split .sec-lead { margin-top: 0; max-width: 38ch; text-align: right; } /* ============================================================ SERVICES ============================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .svc { padding: 34px 34px 28px; background: var(--bg-2); position: relative; min-height: 520px; display: flex; flex-direction: column; transition: background 0.3s; } .svc:hover { background: var(--panel); box-shadow: inset 0 0 60px rgba(255, 90, 31, 0.06), 0 0 40px rgba(255, 90, 31, 0.08); } .svc::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ember); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; } .svc:hover::after { transform: scaleY(1); } .svc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-mute); } .svc-num { color: var(--ember); } .svc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); } .svc-dot.ember { background: var(--ember); box-shadow: 0 0 8px var(--ember); } .svc-kind { margin-left: auto; color: var(--text-dim); } .svc-title { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 2.6rem; line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 14px; } .svc-title em { color: var(--ember); font-style: italic; } .svc-copy { color: var(--text-dim); font-size: 0.98rem; max-width: 40ch; margin-bottom: 24px; font-weight: 300; } .svc-demo { margin-top: auto; margin-bottom: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(10, 10, 10, 0.5); position: relative; } .svc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); } .tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-dim); } .svc-price { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--ember); font-weight: 600; } /* Demo: lighthouse */ .demo-bar { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.1em; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--line); } .db-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); } .db-url { flex: 1; color: var(--text); } .db-ok { color: var(--ok); letter-spacing: 0.22em; } .lh-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .lh { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; padding: 6px; } .lh svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .lh-bg { fill: none; stroke: var(--line-2); stroke-width: 3; } .lh-fg { fill: none; stroke: var(--ember); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--v) 100; animation: dashIn 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both; } @keyframes dashIn { from { stroke-dasharray: 0 100; } } .lh.a .lh-fg { stroke: var(--ok); } .lh.b .lh-fg { stroke: var(--ember-2); } .lh.c .lh-fg { stroke: #ffd166; } .lh b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.4rem; color: var(--text); line-height: 1; } .lh small { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; color: var(--text-mute); } /* Demo: flow */ .demo-flow { height: 170px; position: relative; overflow: hidden; } .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .flow-pulse path { stroke-dasharray: 30 200; animation: pulse 2.8s linear infinite; } .flow-pulse .p2 { animation-delay: 0.6s; } .flow-pulse .p3 { animation-delay: 1.2s; } @keyframes pulse { from { stroke-dashoffset: 230; } to { stroke-dashoffset: 0; } } .flow-nodes { position: absolute; inset: 0; } .fn { position: absolute; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(20, 20, 20, 0.9); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-dim); } .fn.active { border-color: var(--ember); color: var(--ember-2); box-shadow: 0 0 20px rgba(255, 90, 31, 0.3); } .fn.ok { border-color: var(--ok); color: var(--ok); } /* Demo: dashboard */ .dd-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .kpi { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 10, 10, 0.6); } .kpi span { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; color: var(--text-mute); margin-bottom: 4px; } .kpi b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--text); line-height: 1; } .kpi i { font-family: var(--mono); font-size: 0.66rem; font-style: normal; color: var(--ok); display: inline-block; margin-top: 4px; } .dd-chart { height: 70px; display: flex; align-items: flex-end; gap: 3px; } .dd-chart i { flex: 1; background: linear-gradient(180deg, var(--ember), rgba(255, 90, 31, 0.2)); border-radius: 2px 2px 0 0; transition: height 1s ease; } /* Demo: copy generator */ .copy-strip { padding: 14px; border: 1px dashed var(--line-2); border-radius: 6px; background: rgba(10, 10, 10, 0.6); margin-bottom: 10px; } .copy-strip small { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--text-mute); } .copy-line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.4rem; line-height: 1.1; margin-top: 8px; color: var(--text); min-height: 1.4em; } .copy-line::after { content: "▍"; color: var(--ember); animation: blink 1s steps(2) infinite; margin-left: 3px; } .copy-meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--text-mute); flex-wrap: wrap; } .copy-meta b { color: var(--text); } /* ============================================================ SCOPER ============================================================ */ .scoper { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient( 180deg, transparent, rgba(255, 90, 31, 0.025) 40%, transparent ); } .scoper-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; } .scoper-copy .display { font-size: clamp(3rem, 6.5vw, 5.6rem); margin-top: 22px; } .scoper-lead { color: var(--text-dim); font-size: 1.05rem; margin-top: 28px; max-width: 44ch; font-weight: 300; } .scoper-steps { margin-top: 40px; list-style: none; border-top: 1px solid var(--line); } .scoper-steps li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); } .scoper-steps li span { flex: none; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ember); padding-top: 4px; } .scoper-steps li b { color: var(--text); font-weight: 500; } .scoper-steps li div { font-size: 0.96rem; color: var(--text-dim); font-weight: 300; } .scoper-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; } .scoper-stats b { display: block; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 2.4rem; letter-spacing: -0.02em; color: var(--ember); } .scoper-stats span { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--text-mute); margin-top: 6px; } /* Panel */ .scoper-panel { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-hi), var(--glass)); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: var(--shadow); overflow: hidden; } .scoper-panel::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); } .scoper-panel::after { content: ""; position: absolute; top: -40%; right: -40%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255, 90, 31, 0.1), transparent 60%); pointer-events: none; } .sp-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .sp-av { width: 38px; height: 38px; border-radius: 10px; background: radial-gradient( circle at 35% 30%, var(--ember-2), var(--ember) 45%, #451203 90% ); display: grid; place-items: center; position: relative; flex: none; } .sp-av i { width: 10px; height: 10px; border-radius: 50%; background: #0a0a0a; box-shadow: 0 0 8px var(--ember), inset 0 0 3px var(--ember); } .sp-meta { flex: 1; } .sp-meta b { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--text); } .sp-v { color: var(--text-dim); font-size: 0.7rem; margin-left: 4px; } .sp-meta small { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--text-mute); letter-spacing: 0.12em; margin-top: 2px; } .sp-status { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--ok); display: inline-flex; align-items: center; gap: 8px; } .sp-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.6s ease-in-out infinite; } .sp-chat { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-height: 340px; max-height: 440px; overflow: auto; } .sp-chat::-webkit-scrollbar { width: 4px; } .sp-chat::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; } .msg { padding: 12px 16px; border-radius: 14px; max-width: 85%; font-size: 0.96rem; line-height: 1.5; animation: msgIn 0.35s ease; } @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } } .msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-top-left-radius: 4px; } .msg.user { align-self: flex-end; background: var(--ember); color: #0a0a0a; font-weight: 500; border-top-right-radius: 4px; } .msg .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .msg .chip { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); cursor: pointer; transition: all 0.2s; } .msg .chip:hover { border-color: var(--ember); color: var(--ember-2); background: var(--ember-soft); } .msg.scope { background: linear-gradient( 180deg, rgba(255, 90, 31, 0.04), rgba(255, 90, 31, 0.01) ); border: 1px solid var(--line-3); max-width: 100%; padding: 18px; } .scope-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } .scope-head b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--ember); } .scope-head .price { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 2rem; color: var(--text); } .scope-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; font-family: var(--mono); letter-spacing: 0.08em; } .scope-row span { color: var(--text-dim); } .scope-row b { color: var(--text); font-weight: 500; } .scope-ships { margin: 14px 0 4px 0; padding-left: 16px; } .scope-ships li { color: var(--text-2); font-size: 0.88rem; margin: 4px 0; } .scope-note { margin: 10px 0 12px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 6px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-mute); line-height: 1.5; text-transform: uppercase; } .pc-note { margin-top: 8px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--text-mute); line-height: 1.5; text-transform: uppercase; } .scope-cta { display: flex; gap: 8px; margin-top: 14px; } .scope-cta a { flex: 1; padding: 10px; text-align: center; border-radius: 999px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } .scope-cta .b1 { background: var(--ember); color: #0a0a0a; font-weight: 600; } .scope-cta .b2 { border: 1px solid var(--line-2); color: var(--text); } .typing { align-self: flex-start; padding: 14px 16px; border-radius: 14px; border-top-left-radius: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); display: inline-flex; gap: 5px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); animation: tdot 1.2s ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes tdot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } } .sp-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(10, 10, 10, 0.4); } .sp-prompt { font-family: var(--mono); color: var(--ember); font-size: 0.96rem; } .sp-input input { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono); font-size: 0.88rem; color: var(--text); padding: 6px 0; } .sp-input input::placeholder { color: var(--text-mute); } .sp-input button { width: 32px; height: 32px; border-radius: 8px; background: var(--ember); color: #0a0a0a; display: grid; place-items: center; } .sp-input button svg { width: 14px; height: 14px; } .sp-foot { display: flex; gap: 16px; padding: 10px 18px; background: rgba(10, 10, 10, 0.6); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-mute); } .sp-foot b { color: var(--text); font-weight: 500; } /* ============================================================ WORK · case files ============================================================ */ .case-list { border-top: 1px solid var(--line); } .case-row { display: grid; grid-template-columns: 60px 1.4fr 180px 140px 140px; gap: 24px; align-items: center; padding: 28px 8px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background 0.3s, padding 0.3s; } .case-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ember); transition: width 0.3s ease; } .case-row:hover { background: rgba(255, 90, 31, 0.03); padding-left: 20px; } .case-row:hover::before { width: 3px; } .cr-num { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.22em; color: var(--ember); } .cr-meta b { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.8rem; letter-spacing: -0.01em; } .cr-meta small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--text-mute); margin-top: 2px; display: block; } .cr-tags { display: flex; gap: 6px; flex-wrap: wrap; } .cr-tags span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--text-dim); } .cr-metric { text-align: right; } .cr-metric b { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.9rem; color: var(--ember); line-height: 1; } .cr-metric small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-mute); margin-top: 4px; } .cr-open { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--text-dim); justify-self: end; transition: color 0.2s; } .case-row:hover .cr-open { color: var(--ember); } .case-row[data-case="redline"] { border-left: 3px solid #ff5a1f; } .case-row[data-case="novapay"] { border-left: 3px solid #74f0c2; } .case-row[data-case="apex"] { border-left: 3px solid #ffae6b; } .case-row[data-case="orbital"] { border-left: 3px solid #a78bfa; } .case-row[data-case="helix"] { border-left: 3px solid #38bdf8; } .case-row[data-case="atlas"] { border-left: 3px solid #f472b6; } /* Dossier modal */ .dossier { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 40px 20px; } .dossier[aria-hidden="false"] { display: flex; } .dossier-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); cursor: pointer; animation: fade 0.3s ease; } @keyframes fade { from { opacity: 0; } } .dossier-card { position: relative; width: min(920px, 100%); max-height: 90vh; overflow: auto; padding: 40px; background: linear-gradient(180deg, #151515, #0e0e0e); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); animation: dossierIn 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); } @keyframes dossierIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } } .dossier-card::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); } .dossier-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 8px; color: var(--text-dim); border: 1px solid var(--line-2); display: grid; place-items: center; transition: all 0.2s; } .dossier-close:hover { border-color: var(--ember); color: var(--ember); } .dossier-close svg { width: 16px; height: 16px; } .d-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .d-id { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--ember); padding: 6px 10px; border: 1px solid var(--line-3); border-radius: 4px; } .d-status { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--ok); } .d-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1; } .d-sub { color: var(--text-dim); font-size: 1.05rem; margin-top: 14px; max-width: 60ch; font-weight: 300; } .d-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-top: 36px; } .d-block { margin-bottom: 24px; } .d-block small { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text-mute); margin-bottom: 10px; } .d-block p { color: var(--text-2); font-size: 0.96rem; font-weight: 300; } .d-block ul { list-style: none; padding: 0; } .d-block li { padding: 6px 0; color: var(--text-2); font-size: 0.96rem; padding-left: 18px; position: relative; font-weight: 300; } .d-block li::before { content: "▸"; color: var(--ember); position: absolute; left: 0; top: 6px; font-size: 0.72rem; } .d-tags { display: flex; flex-wrap: wrap; gap: 6px; } .d-tags span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text-dim); } .d-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .d-metrics > div { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 20, 20, 0.6); } .d-metrics b { display: block; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.8rem; color: var(--ember); line-height: 1; } .d-metrics span { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--text-mute); margin-top: 6px; } .d-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 28px; margin-top: 24px; border-top: 1px solid var(--line); } .d-next { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--text-mute); } .d-next b { color: var(--text); font-weight: 500; } /* ============================================================ LAB ============================================================ */ .lab { border-top: 1px solid var(--line); background: radial-gradient( ellipse at 50% 0%, rgba(255, 90, 31, 0.04), transparent 60% ); } .lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .lab-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; min-height: 480px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .lab-card:hover { border-color: var(--line-2); transform: translateY(-4px); } .lab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .lh-id { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ember); padding: 4px 8px; border: 1px solid var(--line-3); border-radius: 4px; } .lab-head b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.4rem; flex: 1; } .lh-status { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; } .lh-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.4s ease-in-out infinite; } .lab-copy { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 18px; font-weight: 300; } .lab-body { flex: 1; display: flex; flex-direction: column; gap: 12px; } /* Pricing chatbot demo */ .pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .pcc { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-dim); transition: all 0.2s; } .pcc:hover { border-color: var(--line-2); color: var(--text); } .pcc.on { background: var(--ember); color: #0a0a0a; border-color: transparent; font-weight: 600; } .pc-row { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: 12px; } .pc-row label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; } .pc-row input[type="range"] { width: 100%; height: 3px; appearance: none; background: var(--line); border-radius: 3px; outline: none; } .pc-row input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.2), 0 0 10px var(--ember); cursor: pointer; } .pc-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ember); cursor: pointer; } .pc-row span { font-family: var(--mono); font-size: 0.7rem; color: var(--text); text-align: right; } .pc-out { margin-top: auto; padding: 14px; border: 1px solid var(--line-3); border-radius: 8px; background: var(--ember-soft); } .pc-est small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--text-mute); display: block; } .pc-est b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.8rem; color: var(--text); display: block; margin: 4px 0 10px; } .pc-bar { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; margin-bottom: 10px; } .pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-2), var(--ember)); transition: width 0.5s ease; } .pc-tokens { display: flex; gap: 16px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-mute); } .pc-tokens b { color: var(--text); } /* Knowledge graph demo */ .kg-canvas { flex: 1; width: 100%; height: 240px; border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 10, 10, 0.4); } .kg-legend { display: flex; gap: 14px; margin-top: 8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-mute); } .kg-l.node { color: var(--text); } .kg-l.hot { color: var(--ember); } .kg-meta { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--text-mute); } .kg-meta b { color: var(--text); } /* KG chatbot */ .kg-chat { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(6, 6, 6, 0.7); overflow: hidden; margin-top: 2px; } .kg-chat-msgs { min-height: 80px; max-height: 130px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; } .kg-chat-msgs::-webkit-scrollbar { width: 3px; } .kg-chat-msgs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; } .kg-msg { font-family: var(--mono); font-size: 0.64rem; line-height: 1.5; animation: msgIn 0.25s ease; } .kg-msg.kg-user { align-self: flex-end; color: #0a0a0a; background: var(--ember); padding: 4px 10px; border-radius: 8px; border-bottom-right-radius: 2px; max-width: 90%; } .kg-msg.kg-bot { align-self: flex-start; color: var(--text-2); padding: 4px 0; max-width: 100%; } .kg-msg.kg-bot b { color: var(--ember-2); } .kg-msg.kg-bot em { font-style: normal; color: var(--ok); } .kg-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 6px 0; } .kg-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); animation: tdot 1.2s ease-in-out infinite; } .kg-typing i:nth-child(2) { animation-delay: 0.15s; } .kg-typing i:nth-child(3) { animation-delay: 0.3s; } .kg-chat-chips { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 10px 6px; } .kg-chip { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); transition: all 0.2s; } .kg-chip:hover { border-color: var(--ember); color: var(--ember-2); background: var(--ember-soft); } .kg-chat-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); background: rgba(10, 10, 10, 0.5); } .kg-prompt { font-family: var(--mono); color: var(--ember); font-size: 0.82rem; } .kg-chat-input input { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono); font-size: 0.72rem; color: var(--text); } .kg-chat-input input::placeholder { color: var(--text-mute); } .kg-chat-input button { width: 24px; height: 24px; border-radius: 6px; background: var(--ember); color: #0a0a0a; display: grid; place-items: center; flex: none; } .kg-chat-input button svg { width: 12px; height: 12px; } /* Agent orchestration */ .ao-body { gap: 10px; } .ao-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ao-agent { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 10, 10, 0.5); position: relative; } .ao-agent b { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text); } .ao-agent small { display: block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; color: var(--text-mute); margin-top: 2px; } .ao-agent .ao-state { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); } .ao-agent.active { border-color: var(--ember); background: rgba(255, 90, 31, 0.06); } .ao-agent.active .ao-state { background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: blink 1s ease-in-out infinite; } .ao-agent.done { border-color: var(--ok); } .ao-agent.done .ao-state { background: var(--ok); } .ao-log { flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #050505; max-height: 140px; overflow: hidden; font-family: var(--mono); font-size: 0.66rem; display: flex; flex-direction: column; gap: 3px; } .ao-log-line { display: flex; gap: 8px; color: var(--text-dim); animation: msgIn 0.3s ease; } .ao-log-line em { font-style: normal; color: var(--text-mute); flex: none; width: 36px; } .ao-log-line b { color: var(--text); font-weight: 500; } .ao-log-line.ok b { color: var(--ok); } .ao-log-line.em b { color: var(--ember); } /* ============================================================ FAQ ============================================================ */ .faq { border-top: 1px solid var(--line); } .faq-row { border-bottom: 1px solid var(--line); transition: background 0.3s; } .faq-row[open] { background: rgba(255, 90, 31, 0.02); } .faq-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: 20px; padding: 26px 10px; } .faq-row summary::-webkit-details-marker { display: none; } .f-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ember); } .f-q { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.6rem; letter-spacing: -0.01em; } .f-plus { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-dim); font-size: 1rem; transition: all 0.3s; } .faq-row[open] .f-plus { transform: rotate(45deg); background: var(--ember); color: #0a0a0a; border-color: transparent; } .f-a { padding: 0 10px 26px 110px; color: var(--text-dim); font-size: 1rem; line-height: 1.65; max-width: 70ch; font-weight: 300; animation: fadeUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* ============================================================ CLOSER ============================================================ */ .closer { padding: 180px 0; position: relative; overflow: hidden; border-top: 1px solid var(--line); background: radial-gradient( ellipse at 50% 100%, rgba(255, 90, 31, 0.1), transparent 60% ); } .closer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%); opacity: 0.4; } .closer-inner { position: relative; text-align: center; } .closer-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ember); margin-bottom: 30px; } .closer-eyebrow span { width: 30px; height: 1px; background: var(--ember); } .closer-display { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.98; letter-spacing: -0.025em; } .closer-display span { display: block; } .closer-display em { color: var(--ember); font-style: italic; } .closer-cta { display: flex; gap: 14px; justify-content: center; margin-top: 50px; flex-wrap: wrap; } .closer-meta { margin-top: 60px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--text-mute); } .closer-meta b { color: var(--text); font-weight: 500; } .closer-meta .sep { color: var(--ember); opacity: 0.6; } /* ============================================================ FOOTER ============================================================ */ footer { padding: 70px 0 20px; border-top: 1px solid var(--line); background: #070707; position: relative; } footer::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 90, 31, 0.55), transparent); pointer-events: none; } .foot { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } .foot-l p { color: var(--text-dim); font-size: 0.9rem; margin-top: 14px; max-width: 32ch; font-weight: 300; } .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .foot-cols h5 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text-mute); margin-bottom: 14px; } .foot-cols a, .foot-cols span { display: block; padding: 4px 0; color: var(--text-dim); font-size: 0.9rem; transition: color 0.2s; } .foot-cols a:hover { color: var(--ember-2); } .foot-cols span b { color: var(--text); font-weight: 500; } .ok-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 8px; box-shadow: 0 0 8px var(--ok); } .foot-mono { margin-top: 30px; padding-top: 20px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text-mute); text-align: center; } /* ============================================================ FORGE CHATBOT ============================================================ */ .forge-btn { position: fixed; right: 24px; bottom: 156px; /* clear gap above the fixed ticker rail */ z-index: 52; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(16, 16, 16, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: transform 0.2s, border-color 0.2s; } .forge-btn:hover { transform: translateY(-2px); border-color: var(--ember); } .fb-av { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient( circle at 35% 30%, var(--ember-2), var(--ember) 50%, #2a0a00 95% ); position: relative; flex: none; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3); } .fb-eye { position: absolute; top: 42%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; } .fb-eye.l { left: 28%; } .fb-eye.r { right: 28%; } .fb-txt b { display: block; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.15em; color: var(--text); } .fb-txt small { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--ok); margin-top: 2px; } .forge-panel { position: fixed; right: 24px; bottom: 156px; /* aligned with the lifted button, above the rail */ z-index: 53; width: min(400px, calc(100vw - 48px)); height: min(600px, calc(100vh - 48px)); display: none; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-md); background: linear-gradient( 180deg, rgba(24, 24, 24, 0.96), rgba(14, 14, 14, 0.98) ); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); overflow: hidden; transform-origin: bottom left; } .forge-panel.open { display: flex; animation: panelIn 0.35s cubic-bezier(0.2, 0.9, 0.2, 1); } @keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } } .forge-panel::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); } .fp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .fp-av { width: 36px; height: 36px; border-radius: 10px; flex: none; position: relative; background: radial-gradient( circle at 35% 30%, var(--ember-2), var(--ember) 50%, #2a0a00 95% ); } .fp-eye { position: absolute; top: 42%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; } .fp-eye.l { left: 28%; } .fp-eye.r { right: 28%; } .fp-meta { flex: 1; min-width: 0; } .fp-meta b { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--text); } .fp-meta small { display: block; font-family: var(--mono); font-size: 0.64rem; color: var(--ok); letter-spacing: 0.12em; margin-top: 2px; } .fp-head button { width: 30px; height: 30px; border-radius: 8px; color: var(--text-dim); transition: all 0.2s; } .fp-head button:hover { color: var(--ember); background: rgba(255, 90, 31, 0.06); } .fp-head button svg { width: 16px; height: 16px; } .fp-mute { font-size: .85rem; line-height: 1; } /* Proactive bubble */ /* Proactive bubble — emerges from the Ask Forge button */ .forge-bubble { position: fixed; bottom: 226px; /* sits just above the chat button (button bottom 156 + height ~58 + 12 gap) */ right: 24px; z-index: 51; /* above page, just under the chat panel */ background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line-2); border-radius: 14px 14px 4px 14px; padding: 12px 16px; font-family: var(--sans); font-size: .82rem; line-height: 1.45; color: var(--text); max-width: 240px; cursor: pointer; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 24px -4px rgba(255,90,31,0.18); opacity: 0; transform: translateY(8px) scale(0.94); transform-origin: bottom right; transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2,0.8,0.2,1); } .forge-bubble.show { opacity: 1; transform: translateY(0) scale(1); } /* Tail pointing down to the chat button */ .forge-bubble::after { content: ''; position: absolute; right: 22px; bottom: -8px; width: 14px; height: 14px; background: rgba(18, 18, 18, 0.92); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); border-bottom-right-radius: 3px; } .forge-bubble button { float: right; margin-left: 10px; margin-top: -2px; color: var(--text-mute); font-size: 1.05rem; line-height: 1; background: none; border: none; padding: 0 2px; cursor: pointer; transition: color 0.2s; } .forge-bubble button:hover { color: var(--ember); } /* Mobile — bubble sits above the smaller mobile button */ @media (max-width: 720px) { .forge-bubble { bottom: 196px; right: 14px; max-width: 220px; font-size: .76rem; } } /* Availability signal */ .fa-avail { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--ok); text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(116,240,194,.2); border-radius: 4px; margin-bottom: 4px; } /* CTA link inside chat */ .fc-cta { display: block; margin-top: 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); border: 1px solid rgba(255,90,31,.3); border-radius: 6px; padding: 5px 10px; text-align: center; transition: background .2s; } .fc-cta:hover { background: rgba(255,90,31,.08); } /* Email capture card */ .fc-email { flex-direction: column; gap: 8px; } .fce-row { display: flex; gap: 6px; margin-top: 6px; } .fce-row input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 10px; font-family: var(--mono); font-size: .72rem; color: var(--text); } .fce-row button { background: var(--ember); color: #0a0a0a; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; padding: 6px 12px; border-radius: 6px; } .fp-body { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .fp-body .msg { font-size: 0.9rem; } .fp-body::-webkit-scrollbar { width: 4px; } .fp-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; } .fp-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); } .fp-quick button { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); transition: all 0.2s; } .fp-quick button:hover { border-color: var(--ember); color: var(--ember-2); background: var(--ember-soft); } .fp-input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(10, 10, 10, 0.5); } .fp-input span { font-family: var(--mono); color: var(--ember); } .fp-input input { flex: 1; background: none; border: 0; outline: none; font-family: var(--mono); font-size: 0.84rem; color: var(--text); } .fp-input input::placeholder { color: var(--text-mute); } .fp-input button { width: 30px; height: 30px; border-radius: 8px; background: var(--ember); color: #0a0a0a; display: grid; place-items: center; } .fp-input button svg { width: 14px; height: 14px; } /* ============================================================ SECTION REVEAL ============================================================ */ .section { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; } .section.visible { opacity:1; transform:none; } /* ============================================================ HAMBURGER + MOBILE NAV ============================================================ */ .hamburger { display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:none; cursor:pointer; } .hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition: transform 0.25s, opacity 0.25s; } .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2){ opacity:0; } .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-nav { display:none; position:fixed; top:70px; left:0; right:0; z-index:80; background:rgba(10,10,10,0.86); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); padding:20px 24px 28px; flex-direction:column; gap:4px; border-bottom:1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0,0,0,0.4); } .mobile-nav.open { display:flex; } .mn-link { font-family:var(--mono); font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-2); padding:14px 0; border-bottom:1px solid var(--line); } .mn-link:last-child { border-bottom:none; } @media (max-width:1080px){ .hamburger{ display:flex; } } /* ============================================================ LAB + SCOPER HINTS ============================================================ */ .lab-hint { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--ember); text-transform:uppercase; margin-top:6px; margin-bottom:2px; opacity:0.8; } .scoper-hint { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--ember); text-transform:uppercase; margin-bottom:16px; opacity:0.8; } /* ============================================================ DOSSIER BANNER ============================================================ */ .d-banner { width:100%; height:80px; border-radius:8px; margin:12px 0 16px; background:linear-gradient(120deg, #1a1a1a, #2a2a2a); position:relative; overflow:hidden; } .d-banner::after { content:''; position:absolute; inset:0; background:inherit; opacity:0.6; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .topbar .nav { display: none; } .hero-inner { grid-template-columns: 1fr; } .hud-pair { margin: 28px 0 12px; flex-direction: row; gap: 10px; } .hud-panel.p1 { position: relative; } .hud-panel.p2 { display: none; } .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 0; padding: 28px 24px 24px; } .scoper-grid { grid-template-columns: 1fr; gap: 40px; } .lab-grid { grid-template-columns: 1fr; } .case-row { grid-template-columns: 40px 1fr auto; gap: 14px; } .cr-tags, .cr-open { display: none; } .d-grid { grid-template-columns: 1fr; } .foot { grid-template-columns: 1fr; gap: 30px; } .sec-head-split { flex-direction: column; align-items: flex-start; gap: 20px; } .sec-head-split .sec-lead { text-align: left; max-width: 60ch; } .jump-strip { grid-template-columns: 1fr 1fr; } .jump-item:nth-child(2) { border-right: 0; } .jump-item:nth-child(1), .jump-item:nth-child(2) { border-bottom: 1px solid var(--line); } .hud-tick.tl-t, .hud-tick.tr-t, .hud-tick.bl-t, .hud-tick.br-t { display: none; } .ao-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { :root { --shell: min(1280px, calc(100vw - 32px)); } /* ── TOPBAR ── */ .topbar { width: 100%; top: 0; padding: 10px 14px; border-radius: 0; gap: 10px; } .brand-wm { font-size: 0.7rem; } /* Hide "/ SOLUTIONS" on very small screens to save topbar space */ .brand-wm em { display: none; } .theme-toggle { padding: 3px; } .tt-sun, .tt-moon { width: 24px; height: 24px; } .tt-sun svg, .tt-moon svg { width: 12px; height: 12px; } .cta { padding: 8px 12px 8px 10px; font-size: 0.6rem; line-height: 1.1; white-space: nowrap; } .cta-dot { display: none; } /* ── HERO ── */ .hero { padding: 72px 0 0; min-height: 100dvh; /* exact viewport — fills to ticker rail */ display: flex; flex-direction: column; justify-content: center; /* vertically center content */ } /* CRITICAL: reset the desktop left-push that causes right-side overflow */ .hero-inner { margin: 0 auto; width: var(--shell); } h1.display { font-size: clamp(2.4rem, 9.5vw, 3rem); line-height: 1.06; } h1.display .d-line.shift { padding-left: 0; } .hero-sub { font-size: 0.96rem; line-height: 1.6; margin-top: 18px; max-width: 100%; } /* Stack CTA buttons, full width */ .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; } .btn { justify-content: center; width: 100%; padding: 15px 20px; } .hero-meta { margin-top: 32px; flex-wrap: wrap; gap: 8px 14px; } h1.display { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.04; } h1.display .d-line.shift { padding-left: 0; } .hero-sub { font-size: 0.98rem; margin-top: 18px; } .hero-cta-row { margin-top: 22px; } .hero-meta { margin-top: 48px; flex-wrap: wrap; gap: 8px 14px; } .section { padding: 64px 0; } .closer { padding: 80px 0; } .sec-head { margin-bottom: 36px; } .sec-head .display { font-size: clamp(2rem, 9vw, 2.8rem); margin-top: 14px; } .sec-head .sec-lead { font-size: 0.96rem; margin-top: 16px; } .jump-strip { grid-template-columns: 1fr; } .jump-item { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 18px; } .jump-item:last-child { border-bottom: 0; } .foot { padding: 48px 0 32px; } .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } /* Services */ .svc { padding: 24px 20px 22px; } .svc-title { font-size: 1.4rem; } .svc-copy { font-size: 0.94rem; margin-bottom: 18px; } .svc-demo { margin-bottom: 18px; } .svc-foot { flex-wrap: wrap; gap: 8px; align-items: center; } .svc-price { margin-left: auto; } /* Case rows */ .case-row { grid-template-columns: 34px 1fr 92px; padding: 18px 4px; gap: 10px; } .cr-num { font-size: 0.62rem; } .cr-metric b { font-size: 1.15rem; } .cr-meta b { font-size: 1.1rem; } .cr-meta small { font-size: 0.6rem; } /* Dossier modal */ .dossier-card { padding: 24px 18px; max-height: 90vh; } /* Scoper panel */ .scoper-panel { min-height: 480px; } .sp-input { padding: 10px 12px; } .sp-input input { font-size: 16px; } .sp-input button { width: 36px; height: 36px; } .scope-cta a { padding: 12px 10px; font-size: 0.66rem; } /* Lab cards */ .lab-card { padding: 22px 18px; } .lab-body { gap: 10px; } /* KG chatbot — touch friendly */ .kg-chat-msgs { min-height: 96px; max-height: 170px; padding: 12px 12px; } .kg-msg { font-size: 0.74rem; } .kg-chat-chips { padding: 0 10px 8px; gap: 6px; } .kg-chip { font-size: 0.62rem; padding: 7px 11px; } .kg-chat-input { padding: 10px 10px; } .kg-chat-input input { font-size: 16px; padding: 4px 0; } .kg-chat-input button { width: 34px; height: 34px; } .kg-chat-input button svg { width: 14px; height: 14px; } /* Pricing chatbot — bigger touch targets */ .pc-chips { flex-wrap: wrap; gap: 6px; } .pcc { padding: 8px 12px; font-size: 0.7rem; } .pc-row { gap: 10px; flex-wrap: wrap; } .pc-row label { min-width: 60px; } .pc-row input[type="range"] { flex: 1; min-width: 140px; height: 28px; } .pc-est b { font-size: 1.4rem; } /* Forge floating button — compact, anchored bottom-right */ .forge-btn { left: auto; right: 14px; bottom: 110px; /* above the rail on mobile too */ padding: 7px 12px 7px 7px; gap: 8px; } .forge-btn .fb-av { width: 30px; height: 30px; } .fb-txt b { font-size: 0.66rem; letter-spacing: 0.12em; } .fb-txt small { font-size: 0.54rem; } /* Forge panel — near full-screen */ .forge-panel { left: 8px; right: 8px; bottom: 8px; top: 8px; width: auto; height: auto; border-radius: 14px; } .fp-head { padding: 14px 14px; } .fp-meta b { font-size: 0.78rem; } .fp-meta small { font-size: 0.6rem; } .fp-body { padding: 16px 14px; gap: 8px; } .fp-body .msg { font-size: 0.92rem; line-height: 1.5; } .fp-quick { padding: 10px 10px; gap: 6px; } .fp-quick button { font-size: 0.6rem; padding: 7px 10px; } .fp-input { padding: 12px 12px; } .fp-input input { font-size: 16px; } .fp-input button { width: 36px; height: 36px; } .fp-input button svg { width: 16px; height: 16px; } /* Agent orchestration */ .ao-grid { grid-template-columns: repeat(2, 1fr); } /* FAQ */ .faq-row summary { padding: 18px 14px; gap: 10px; } .f-q { font-size: 0.94rem; } .f-a { padding: 0 14px 18px; font-size: 0.94rem; } } @media (max-width: 380px) { .forge-btn .fb-txt { display: none; } .forge-btn { padding: 6px; border-radius: 50%; } .case-row { grid-template-columns: 28px 1fr 84px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .intro { display: none; } } /* ============================================================ ACCESSIBILITY TOGGLE PILL ============================================================ */ .a11y-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); cursor: pointer; flex-shrink: 0; color: var(--text-mute); transition: border-color 0.2s, color 0.2s, background 0.2s; } .a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { border-color: var(--ember); color: var(--ember); background: var(--ember-soft); } .a11y-toggle svg { width: 16px; height: 16px; } /* ============================================================ LANGUAGE SWITCHER ============================================================ */ .lang-wrap { position: relative; } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 44px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); cursor: pointer; flex-shrink: 0; font-size: 1.15rem; line-height: 1; transition: border-color 0.2s, background 0.2s; } .lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: var(--ember); background: var(--ember-soft); } /* ── LANGUAGE PANEL ────────────────────────────────────── */ .lang-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 8px; width: 190px; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line); opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .lang-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .lang-panel-title { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); padding: 4px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } /* ── LANGUAGE OPTIONS ──────────────────────────────────── */ .lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-2); cursor: pointer; background: none; border: none; text-align: left; transition: background 0.15s, color 0.15s; } .lang-opt:hover { background: var(--ember-soft); color: var(--text); } .lang-opt.active { color: var(--ember); } .lang-opt.active::after { content: '✓'; margin-left: auto; font-size: 0.7rem; color: var(--ember); } .lo-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; } .lo-name { flex: 1; } /* Mobile */ @media (max-width: 620px) { .lang-toggle { height: 32px; min-width: 36px; padding: 4px 8px; font-size: 1rem; } .lang-panel { width: 175px; } } /* ── ACCESSIBILITY WRAP (relative anchor for the panel) ── */ .a11y-wrap { position: relative; } /* ── ACCESSIBILITY PANEL ────────────────────────────────── */ .a11y-panel { position: absolute; top: calc(100% + 10px); /* directly below the button */ right: 0; /* right-aligned with the button */ z-index: 200; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 16px; width: 230px; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line); opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .a11y-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .a11y-panel-title { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .a11y-row + .a11y-row { border-top: 1px solid var(--line); } .a11y-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-2); } /* Toggle switch */ .a11y-sw { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2); cursor: pointer; flex-shrink: 0; transition: background 0.22s, border-color 0.22s; } .a11y-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-mute); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s; } .a11y-sw[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); } .a11y-sw[aria-pressed="true"]::after { background: #fff; transform: translateX(18px); } /* Mobile */ @media (max-width: 620px) { .a11y-toggle { width: 32px; height: 32px; } .a11y-toggle svg { width: 13px; height: 13px; } .a11y-panel { width: 210px; } } /* ============================================================ ACCESSIBILITY STATE OVERRIDES ============================================================ */ /* — Larger Text — 20% font-size bump —————————————————————— */ html.a11y-text { font-size: 120%; } /* — High Contrast — max readability, yellow-on-black ——————— */ html.a11y-contrast { --bg: #000000; --bg-2: #000000; --panel: #111111; --panel-2: #111111; --glass: rgba(0, 0, 0, 0.98); --glass-hi: rgba(0, 0, 0, 0.99); --line: rgba(255, 255, 255, 0.35); --line-2: rgba(255, 255, 255, 0.55); --line-3: rgba(255, 255, 0, 0.5); --text: #ffffff; --text-2: #eeeeee; --text-dim: #cccccc; --text-mute: #999999; --ember: #ffff00; --ember-2: #ffd700; --ember-soft: rgba(255, 255, 0, 0.12); --ok: #00ff88; --shadow: 0 30px 80px rgba(0, 0, 0, 0.8); } html.a11y-contrast .highlight-orange { color: #ffff00; } html.a11y-contrast .orb-canvas, html.a11y-contrast .cursor-glow, html.a11y-contrast .scanlines { display: none !important; } html.a11y-contrast body::before, html.a11y-contrast body::after { display: none; } html.a11y-contrast .hud { opacity: 0.7; } /* — Reduce Motion — freeze all animations ———————————————— */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html.a11y-motion .orb-canvas, html.a11y-motion .cursor-glow { opacity: 0 !important; } /* ============================================================ SCROLL PROGRESS BAR ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--ember), var(--ember-2)); z-index: 9999; pointer-events: none; transition: width 0.1s linear; box-shadow: 0 0 8px rgba(255, 90, 31, 0.6); } /* ============================================================ FADE-UP KEYFRAME — shared by section stagger + FAQ answers ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ SECTION CHILD STAGGER — triggered when section gets .in ============================================================ */ .revealable.unlocked.in .sec-head { animation: fadeUp 0.55s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .revealable.unlocked.in .svc-grid, .revealable.unlocked.in .case-list, .revealable.unlocked.in .lab-grid, .revealable.unlocked.in .faq-list, .revealable.unlocked.in .scoper-wrap, .revealable.unlocked.in .scoper-steps, .revealable.unlocked.in .closer-display, .revealable.unlocked.in .closer-meta { animation: fadeUp 0.6s 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* ============================================================ FORGE CHATBOT — pulse ring ============================================================ */ .forge-btn { overflow: visible; } .forge-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 999px; border: 1.5px solid var(--ember); opacity: 0; animation: forgePulse 3.5s ease-out infinite; pointer-events: none; } @keyframes forgePulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } } /* ============================================================ MOBILE NAV — body overlay when open ============================================================ */ body.nav-open::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 79; pointer-events: none; } /* ============================================================ STYLE SWITCHER — dropdown UI ============================================================ */ .style-switcher-wrap { position: relative; flex-shrink: 0; } .style-switcher-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .style-switcher-btn:hover { border-color: var(--ember); color: var(--text); } .style-switcher-icon { font-size: 13px; } .style-switcher-caret { font-size: 9px; } .style-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 8px; z-index: 999; box-shadow: var(--shadow); } .style-panel.open { display: block; } .style-panel-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-mute); padding: 4px 8px 8px; } .style-option { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-2); font-family: var(--sans); font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; } .style-option:hover { background: var(--ember-soft); color: var(--text); } .style-option.active { color: var(--ember); font-weight: 600; } /* ============================================================ STYLE 2 — EDITORIAL MONO Warm cream, Fraunces serif, ink accent, generous whitespace ============================================================ */ [data-style="editorial"] { --bg: #F5F0E8; --bg-2: #EDE8DE; --panel: #E8E2D8; --panel-2: #DFD9CE; --glass: rgba(245, 240, 232, 0.80); --glass-hi: rgba(255, 255, 255, 0.90); --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.14); --line-3: rgba(26, 26, 26, 0.15); --text: #1A1A1A; --text-2: #2E2E2E; --text-dim: #5A5248; --text-mute: #9A9288; --ember: #1A1A1A; --ember-2: #3D3730; --ember-soft: rgba(26, 26, 26, 0.06); --ok: #2D6A4F; --sans: "Fraunces", "Times New Roman", serif; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --shadow: 0 20px 60px rgba(0, 0, 0, 0.08); --shadow-e: 0 12px 40px rgba(26, 26, 26, 0.10); } [data-style="editorial"] body::before { background: radial-gradient(900px 500px at 20% -10%, rgba(180, 140, 80, 0.06), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(140, 100, 60, 0.04), transparent 55%), radial-gradient(800px 600px at 50% 140%, rgba(160, 120, 70, 0.04), transparent 60%); } [data-style="editorial"] .topbar { background: rgba(245, 240, 232, 0.88); border-bottom-color: rgba(0, 0, 0, 0.10); } [data-style="editorial"] .topbar.scrolled { background: rgba(240, 234, 224, 0.96); } [data-style="editorial"] .trk-wrap { background: linear-gradient(180deg, rgba(240, 234, 224, 0.82) 0%, rgba(232, 226, 214, 0.97) 100%); border-top-color: rgba(0, 0, 0, 0.10); } [data-style="editorial"] .scanlines { opacity: 0; } [data-style="editorial"] .hud { opacity: 0.25; } [data-style="editorial"] .highlight-orange { color: #1A1A1A; } [data-style="editorial"] .forge-bubble { background: rgba(245, 240, 232, 0.96); } [data-style="editorial"] .revealable { background: var(--bg); } /* fix editorial btn.primary — ember is now black so text must be white */ [data-style="editorial"] .btn.primary { color: #fff; } [data-style="editorial"] .svc:hover { box-shadow: inset 0 0 60px rgba(26,26,26,0.04), 0 0 30px rgba(26,26,26,0.06); } [data-style="editorial"] .closer { background: radial-gradient(ellipse at 50% 100%, rgba(26,26,26,0.06), transparent 60%); border-top-color: rgba(0,0,0,0.12); } [data-style="editorial"] .scroll-progress { box-shadow: none; background: #1A1A1A; } /* ============================================================ STYLE 3 — NEO-BRUTALIST White, bold black borders, hard offset shadows, yellow accents ============================================================ */ [data-style="neobrutalist"] { --bg: #FFFFFF; --bg-2: #F5F5F5; --panel: #EEEEEE; --panel-2: #E5E5E5; --glass: #F5F5F5; --glass-hi: #FFFFFF; --line: rgba(0,0,0,0.15); --line-2: #000000; --line-3: #000000; --text: #000000; --text-2: #111111; --text-dim: #333333; --text-mute: #666666; --ember: #000000; --ember-2: #222222; --ember-soft: rgba(255,229,0,0.30); --ok: #007700; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --shadow: 4px 4px 0px #000000; --shadow-e: 6px 6px 0px #000000; } [data-style="neobrutalist"] body::before { background: none; } [data-style="neobrutalist"] body::after { opacity: 0; } [data-style="neobrutalist"] .scanlines { opacity: 0; } [data-style="neobrutalist"] .hud { opacity: 0; } [data-style="neobrutalist"] .scroll-progress { box-shadow: none; background: #000; height: 4px; } [data-style="neobrutalist"] .topbar { background: #FFFFFF; border-bottom: 3px solid #000; } [data-style="neobrutalist"] .topbar.scrolled { background: #FFFFFF; } [data-style="neobrutalist"] .btn { border-radius: 0; border: 2px solid #000; box-shadow: 4px 4px 0 #000; transition: box-shadow 0.1s, transform 0.1s; } [data-style="neobrutalist"] .btn.primary { background: #FFE500; color: #000; box-shadow: 4px 4px 0 #000; } [data-style="neobrutalist"] .btn.primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #000; } [data-style="neobrutalist"] .btn.ghost { background: #fff; color: #000; border: 2px solid #000; } [data-style="neobrutalist"] .btn.ghost:hover { background: #FFE500; color: #000; box-shadow: 4px 4px 0 #000; } [data-style="neobrutalist"] .btn-arrow { background: rgba(0,0,0,0.1); } [data-style="neobrutalist"] .svc { border: 3px solid #000; box-shadow: 5px 5px 0 #000; background: #fff; transition: box-shadow 0.1s, transform 0.1s; } [data-style="neobrutalist"] .svc:hover { background: #fff; box-shadow: 8px 8px 0 #000; transform: translate(-3px,-3px); } [data-style="neobrutalist"] .svc::after { display: none; } [data-style="neobrutalist"] .svc-num { color: #000; font-weight: 900; } [data-style="neobrutalist"] .svc-price { background: #FFE500; color: #000; padding: 2px 8px; border: 1px solid #000; } [data-style="neobrutalist"] .case-row { border: 2px solid #000 !important; box-shadow: 3px 3px 0 #000; background: #fff; border-left-width: 2px !important; transition: box-shadow 0.1s, transform 0.1s; } [data-style="neobrutalist"] .case-row:hover { box-shadow: 6px 6px 0 #000; transform: translate(-3px,-3px); background: #FFE500; } [data-style="neobrutalist"] .case-row::before { display: none; } [data-style="neobrutalist"] .cr-metric b { color: #000; } [data-style="neobrutalist"] .lab-card { border: 3px solid #000; box-shadow: 5px 5px 0 #000; background: #fff; backdrop-filter: none; transition: box-shadow 0.1s, transform 0.1s; } [data-style="neobrutalist"] .lab-card:hover { box-shadow: 8px 8px 0 #000; transform: translate(-3px,-3px); } [data-style="neobrutalist"] .faq-row { border: 2px solid #000; box-shadow: 3px 3px 0 #000; margin-bottom: 12px; } [data-style="neobrutalist"] .faq-row[open] { background: #FFE500; } [data-style="neobrutalist"] .f-n { color: #000; font-weight: 900; } [data-style="neobrutalist"] .closer { background: #FFE500; border-top: 3px solid #000; } [data-style="neobrutalist"] .closer::before { opacity: 0; } [data-style="neobrutalist"] .closer-eyebrow { color: #000; } [data-style="neobrutalist"] .closer-display { color: #000; } [data-style="neobrutalist"] .scoper-panel { border: 3px solid #000; box-shadow: 6px 6px 0 #000; } [data-style="neobrutalist"] .tag { border: 1px solid #000; background: #fff; color: #000; } [data-style="neobrutalist"] .cta { border: 2px solid #000; box-shadow: 3px 3px 0 #000; } [data-style="neobrutalist"] .highlight-orange { color: #000; } [data-style="neobrutalist"] footer { border-top: 3px solid #000; } [data-style="neobrutalist"] .trk-wrap { background: #FFE500; border-top: 3px solid #000; } [data-style="neobrutalist"] .trk-tk { color: #000; } [data-style="neobrutalist"] .trk-tk:hover { background: rgba(0,0,0,0.08); } [data-style="neobrutalist"] .dossier-card { border: 3px solid #000; box-shadow: 8px 8px 0 #000; border-radius: 0; } [data-style="neobrutalist"] .forge-btn { border: 2px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 0; } [data-style="neobrutalist"] .forge-panel { border: 2px solid #000; box-shadow: 6px 6px 0 #000; border-radius: 0; } [data-style="neobrutalist"] .style-switcher-btn { border: 2px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; } [data-style="neobrutalist"] .style-panel { border: 2px solid #000; border-radius: 0; box-shadow: 4px 4px 0 #000; } [data-style="neobrutalist"] .style-option.active { color: #000; font-weight: 900; } [data-style="neobrutalist"] .style-option:hover { background: #FFE500; color: #000; } /* ============================================================ STYLE 4 — GLASSMORPHISM + AURORA Deep purple base, vivid aurora blobs, frosted glass cards ============================================================ */ [data-style="glassmorphism"] { --bg: #0d0620; --bg-2: #0d0620; --panel: rgba(255,255,255,0.07); --panel-2: rgba(255,255,255,0.04); --glass: rgba(255,255,255,0.07); --glass-hi: rgba(255,255,255,0.14); --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.18); --line-3: rgba(34,211,238,0.30); --text: #F0FFFE; --text-2: #CBD5E1; --text-dim: #7FCECB; --text-mute: #4A8A87; --ember: #22D3EE; --ember-2: #67E8F9; --ember-soft: rgba(34,211,238,0.10); --ok: #4ADE80; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10); --shadow-e: 0 0 40px rgba(34,211,238,0.20), 0 0 80px rgba(34,211,238,0.08); } [data-style="glassmorphism"] body::before { background: radial-gradient(ellipse 80% 60% at 15% 25%, rgba(108,43,217,0.70), transparent 55%), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(14,165,233,0.60), transparent 50%), radial-gradient(ellipse 55% 65% at 50% 85%, rgba(236,72,153,0.50), transparent 55%), radial-gradient(ellipse 45% 35% at 75% 55%, rgba(34,211,238,0.35), transparent 45%), radial-gradient(ellipse 70% 40% at 30% 70%, rgba(167,139,250,0.40), transparent 50%); opacity: 1; } [data-style="glassmorphism"] body::after { opacity: 0; } [data-style="glassmorphism"] .topbar { background: rgba(13,6,32,0.55); border-bottom-color: rgba(255,255,255,0.10); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } [data-style="glassmorphism"] .topbar.scrolled { background: rgba(13,6,32,0.75); } [data-style="glassmorphism"] .btn.primary { background: #22D3EE; color: #0d0620; box-shadow: 0 0 24px rgba(34,211,238,0.40); } [data-style="glassmorphism"] .btn.primary:hover { box-shadow: 0 0 40px rgba(34,211,238,0.60); } [data-style="glassmorphism"] .btn.ghost { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); backdrop-filter: blur(10px); } [data-style="glassmorphism"] .btn.ghost:hover { background: rgba(34,211,238,0.12); border-color: #22D3EE; color: #22D3EE; } [data-style="glassmorphism"] .svc { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10); } [data-style="glassmorphism"] .svc:hover { background: rgba(255,255,255,0.11); box-shadow: 0 16px 48px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 30px rgba(34,211,238,0.10); } [data-style="glassmorphism"] .svc::after { background: #22D3EE; } [data-style="glassmorphism"] .case-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-style="glassmorphism"] .case-row:hover { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.30) !important; } [data-style="glassmorphism"] .case-row::before { background: rgba(34,211,238,0.08); } [data-style="glassmorphism"] .lab-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10); } [data-style="glassmorphism"] .lab-card:hover { background: rgba(255,255,255,0.10); border-color: rgba(34,211,238,0.30); } [data-style="glassmorphism"] .faq-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); backdrop-filter: blur(12px); } [data-style="glassmorphism"] .faq-row[open] { background: rgba(34,211,238,0.07); border-color: rgba(34,211,238,0.25); } [data-style="glassmorphism"] .closer { background: radial-gradient(ellipse at 50% 100%, rgba(34,211,238,0.12), transparent 60%); border-top-color: rgba(255,255,255,0.10); } [data-style="glassmorphism"] .scoper-panel { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } [data-style="glassmorphism"] .dossier-card { background: rgba(13,6,32,0.80); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); } [data-style="glassmorphism"] .trk-wrap { background: rgba(13,6,32,0.70); border-top-color: rgba(255,255,255,0.10); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-style="glassmorphism"] .forge-btn { background: rgba(13,6,32,0.80); border-color: rgba(34,211,238,0.40); backdrop-filter: blur(16px); } [data-style="glassmorphism"] .forge-panel { background: rgba(13,6,32,0.85); border-color: rgba(255,255,255,0.15); backdrop-filter: blur(24px); } [data-style="glassmorphism"] .style-panel { background: rgba(13,6,32,0.85); border-color: rgba(255,255,255,0.15); backdrop-filter: blur(24px); } [data-style="glassmorphism"] .scroll-progress { background: linear-gradient(90deg, #22D3EE, #67E8F9); box-shadow: 0 0 10px rgba(34,211,238,0.60); } /* ============================================================ STYLE 5 — BENTO GRID LIGHT Clean white, rounded modular tiles, soft shadows, Apple-style ============================================================ */ [data-style="bento"] { --bg: #F8F9FB; --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #F1F5F9; --glass: rgba(255,255,255,0.92); --glass-hi: rgba(255,255,255,0.98); --line: rgba(0,0,0,0.07); --line-2: rgba(0,0,0,0.12); --line-3: rgba(255,90,31,0.20); --text: #0F172A; --text-2: #1E293B; --text-dim: #475569; --text-mute: #94A3B8; --ember: #FF5A1F; --ember-2: #FFAE6B; --ember-soft: rgba(255,90,31,0.08); --ok: #10B981; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04); --shadow-e: 0 8px 28px rgba(255,90,31,0.14); } [data-style="bento"] body::before { background: radial-gradient(900px 500px at 20% -10%, rgba(255,90,31,0.04), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(255,174,107,0.03), transparent 55%); } [data-style="bento"] body::after { opacity: 0.1; } [data-style="bento"] .scanlines { opacity: 0; } [data-style="bento"] .hud { opacity: 0.15; } [data-style="bento"] .topbar { background: rgba(248,249,251,0.88); border-bottom-color: rgba(0,0,0,0.08); } [data-style="bento"] .topbar.scrolled { background: rgba(248,249,251,0.96); } [data-style="bento"] .btn.primary { background: #FF5A1F; color: #fff; box-shadow: 0 8px 24px rgba(255,90,31,0.28); border-radius: 14px; } [data-style="bento"] .btn.primary:hover { box-shadow: 0 14px 36px rgba(255,90,31,0.38); } [data-style="bento"] .btn.ghost { background: #fff; border-color: rgba(0,0,0,0.12); border-radius: 14px; } [data-style="bento"] .btn.ghost:hover { background: rgba(255,90,31,0.05); border-color: #FF5A1F; } [data-style="bento"] .btn-arrow { background: rgba(255,255,255,0.25); } [data-style="bento"] .svc { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--r-lg); box-shadow: var(--shadow); transition: box-shadow 0.3s, transform 0.3s; } [data-style="bento"] .svc:hover { background: #FFFFFF; box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-4px); } [data-style="bento"] .svc::after { background: #FF5A1F; } [data-style="bento"] .case-row { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: var(--r-md); box-shadow: var(--shadow); margin-bottom: 8px; transition: box-shadow 0.2s, transform 0.2s; } [data-style="bento"] .case-row:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-2px); } [data-style="bento"] .case-row::before { background: rgba(255,90,31,0.04); } [data-style="bento"] .lab-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--r-lg); box-shadow: var(--shadow); backdrop-filter: none; } [data-style="bento"] .lab-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.10); } [data-style="bento"] .faq-row { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--r-md); box-shadow: var(--shadow); margin-bottom: 8px; } [data-style="bento"] .faq-row[open] { background: #FFFFFF; border-color: rgba(255,90,31,0.25); } [data-style="bento"] .scoper-panel { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.10); } [data-style="bento"] .closer { background: radial-gradient(ellipse at 50% 100%, rgba(255,90,31,0.06), transparent 60%); border-top-color: rgba(0,0,0,0.08); } [data-style="bento"] .dossier-card { background: #FFFFFF; border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.15); } [data-style="bento"] .trk-wrap { background: rgba(248,249,251,0.95); border-top-color: rgba(0,0,0,0.08); box-shadow: 0 -4px 20px rgba(0,0,0,0.05); } [data-style="bento"] .trk-tk { color: #0F172A; } [data-style="bento"] .forge-btn { background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-radius: 999px; } [data-style="bento"] .forge-panel { background: #FFFFFF; border-color: rgba(0,0,0,0.10); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.14); } [data-style="bento"] .scroll-progress { background: linear-gradient(90deg, #FF5A1F, #FFAE6B); box-shadow: 0 0 8px rgba(255,90,31,0.40); } /* ============================================================ STYLE 6 — CYBERPUNK NEON Deepest black, neon cyan primary, magenta accents, grid glow ============================================================ */ [data-style="cyberpunk"] { --bg: #030303; --bg-2: #070707; --panel: #0D0D0D; --panel-2: #111111; --glass: rgba(0,255,240,0.04); --glass-hi: rgba(0,255,240,0.08); --line: rgba(0,255,240,0.10); --line-2: rgba(0,255,240,0.22); --line-3: rgba(0,255,240,0.40); --text: #E0FFF8; --text-2: #A8F0E8; --text-dim: #4ABFB7; --text-mute: #247A74; --ember: #00FFF0; --ember-2: #80FFEB; --ember-soft: rgba(0,255,240,0.08); --ok: #00FF88; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --shadow: 0 20px 60px rgba(0,0,0,0.85); --shadow-e: 0 0 30px rgba(0,255,240,0.25), 0 0 70px rgba(0,255,240,0.08); } [data-style="cyberpunk"] body::before { background: radial-gradient(900px 500px at 20% -10%, rgba(0,255,240,0.07), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(255,0,255,0.05), transparent 55%), radial-gradient(800px 600px at 50% 140%, rgba(0,255,136,0.05), transparent 60%); } [data-style="cyberpunk"] .topbar { background: rgba(3,3,3,0.90); border-bottom: 1px solid rgba(0,255,240,0.20); } [data-style="cyberpunk"] .topbar.scrolled { background: rgba(3,3,3,0.97); border-bottom-color: rgba(0,255,240,0.30); } [data-style="cyberpunk"] .btn.primary { background: #00FFF0; color: #030303; box-shadow: 0 0 20px rgba(0,255,240,0.45), 0 0 50px rgba(0,255,240,0.15); } [data-style="cyberpunk"] .btn.primary:hover { box-shadow: 0 0 35px rgba(0,255,240,0.65), 0 0 80px rgba(0,255,240,0.25); transform: translateY(-2px); } [data-style="cyberpunk"] .btn.ghost { border-color: rgba(0,255,240,0.35); color: #00FFF0; background: rgba(0,255,240,0.04); } [data-style="cyberpunk"] .btn.ghost:hover { border-color: #00FFF0; background: rgba(0,255,240,0.10); color: #00FFF0; box-shadow: 0 0 16px rgba(0,255,240,0.25); } [data-style="cyberpunk"] .btn-arrow { background: rgba(0,255,240,0.15); } [data-style="cyberpunk"] .hud { opacity: 0.80; } [data-style="cyberpunk"] .hud-tick { color: #00FFF0; } [data-style="cyberpunk"] .svc { border: 1px solid rgba(0,255,240,0.14); background: #070707; } [data-style="cyberpunk"] .svc:hover { background: #0A0A0A; box-shadow: inset 0 0 60px rgba(0,255,240,0.04), 0 0 40px rgba(0,255,240,0.10); border-color: rgba(0,255,240,0.35); } [data-style="cyberpunk"] .svc::after { background: #00FFF0; } [data-style="cyberpunk"] .svc-num { color: #00FFF0; } [data-style="cyberpunk"] .case-row { border-color: rgba(0,255,240,0.12) !important; background: #070707; } [data-style="cyberpunk"] .case-row:hover { background: #0A0A0A; border-color: rgba(0,255,240,0.35) !important; } [data-style="cyberpunk"] .case-row::before { background: rgba(0,255,240,0.06); } [data-style="cyberpunk"] .cr-metric b { color: #00FFF0; } [data-style="cyberpunk"] .case-row[data-case="redline"] { border-left: 3px solid #00FFF0 !important; } [data-style="cyberpunk"] .case-row[data-case="novapay"] { border-left: 3px solid #00FF88 !important; } [data-style="cyberpunk"] .case-row[data-case="apex"] { border-left: 3px solid #FF00FF !important; } [data-style="cyberpunk"] .case-row[data-case="orbital"] { border-left: 3px solid #A855F7 !important; } [data-style="cyberpunk"] .case-row[data-case="helix"] { border-left: 3px solid #22D3EE !important; } [data-style="cyberpunk"] .case-row[data-case="atlas"] { border-left: 3px solid #FF6FD8 !important; } [data-style="cyberpunk"] .lab-card { background: #070707; border-color: rgba(0,255,240,0.14); } [data-style="cyberpunk"] .lab-card:hover { border-color: rgba(0,255,240,0.35); box-shadow: 0 0 30px rgba(0,255,240,0.08); } [data-style="cyberpunk"] .faq-row { border-color: rgba(0,255,240,0.14); background: #070707; } [data-style="cyberpunk"] .faq-row[open] { background: rgba(0,255,240,0.04); border-color: rgba(0,255,240,0.30); } [data-style="cyberpunk"] .f-n { color: #00FFF0; } [data-style="cyberpunk"] .closer { background: radial-gradient(ellipse at 50% 100%, rgba(0,255,240,0.08), transparent 60%); border-top-color: rgba(0,255,240,0.20); } [data-style="cyberpunk"] .closer-eyebrow { color: #00FFF0; } [data-style="cyberpunk"] .scoper-panel { border-color: rgba(0,255,240,0.20); box-shadow: 0 0 40px rgba(0,255,240,0.08); } [data-style="cyberpunk"] .dossier-card { background: #0A0A0A; border: 1px solid rgba(0,255,240,0.25); box-shadow: 0 0 60px rgba(0,255,240,0.12), 0 40px 100px rgba(0,0,0,0.80); } [data-style="cyberpunk"] .trk-wrap { background: linear-gradient(180deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.98) 100%); border-top-color: rgba(0,255,240,0.20); box-shadow: 0 -8px 32px rgba(0,255,240,0.06); } [data-style="cyberpunk"] .trk-tk { color: #A8F0E8; } [data-style="cyberpunk"] .trk-tk:hover { background: rgba(0,255,240,0.06); } [data-style="cyberpunk"] .trk-pri { color: #00FFF0 !important; } [data-style="cyberpunk"] .forge-btn { border-color: rgba(0,255,240,0.40); box-shadow: 0 0 20px rgba(0,255,240,0.15); } [data-style="cyberpunk"] .forge-panel { background: #0A0A0A; border-color: rgba(0,255,240,0.22); box-shadow: 0 0 40px rgba(0,255,240,0.10); } [data-style="cyberpunk"] .scroll-progress { background: linear-gradient(90deg, #00FFF0, #00FF88); box-shadow: 0 0 12px rgba(0,255,240,0.70); } [data-style="cyberpunk"] .tag { border-color: rgba(0,255,240,0.20); color: #00FFF0; } [data-style="cyberpunk"] .highlight-orange { color: #00FFF0; } [data-style="cyberpunk"] .style-panel { background: #0A0A0A; border-color: rgba(0,255,240,0.22); } [data-style="cyberpunk"] .style-option.active { color: #00FFF0; } [data-style="cyberpunk"] .style-option:hover { background: rgba(0,255,240,0.08); color: #00FFF0; } /* ================================================================ DEEP STYLE TRANSFORMATIONS These overrides change layout, typography, spacing, and structure — not just colors. Each style is a completely different design. ================================================================ */ /* ================================================================ STYLE 2 — EDITORIAL MONO (deep overrides) Magazine spread. Think The New Yorker meets premium agency. Centered hero, editorial section layouts, generous whitespace. ================================================================ */ /* Body-level: serif tone throughout */ [data-style="editorial"] body { font-family: "Fraunces", "Times New Roman", serif; font-weight: 300; line-height: 1.7; } /* Display headlines — upright, large, editorial weight */ [data-style="editorial"] .display { font-style: normal; font-weight: 300; letter-spacing: -0.03em; line-height: 0.95; } [data-style="editorial"] .display em { font-style: italic; color: #1A1A1A; font-weight: 400; text-decoration: underline; text-decoration-color: rgba(26,26,26,0.25); text-underline-offset: 6px; } /* Hero — centered, magazine cover feel */ [data-style="editorial"] .hero { padding: 180px 0 0; } [data-style="editorial"] .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; width: var(--shell); max-width: 900px; } [data-style="editorial"] h1.display { font-size: clamp(3.8rem, 9vw, 8.5rem); font-style: normal; font-weight: 300; letter-spacing: -0.04em; margin-bottom: 48px; } [data-style="editorial"] .hero-sub { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; font-size: 1.35rem; line-height: 1.75; max-width: 56ch; color: #5A5248; margin-bottom: 52px; } [data-style="editorial"] .hero-cta-row { justify-content: center; } [data-style="editorial"] .hero-eyebrow { border-color: rgba(26,26,26,0.15); background: transparent; backdrop-filter: none; } /* Eyebrow labels — editorial divider style */ [data-style="editorial"] .sec-eyebrow { font-family: "Fraunces", serif; font-style: italic; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: none; color: #5A5248; gap: 16px; } [data-style="editorial"] .sec-eyebrow span { width: 48px; height: 1px; background: #1A1A1A; box-shadow: none; opacity: 0.4; } /* Buttons — refined, serif */ [data-style="editorial"] .btn { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 1rem; border-radius: 4px; padding: 14px 28px; } [data-style="editorial"] .btn.primary { background: #1A1A1A; color: #F5F0E8; } [data-style="editorial"] .btn.ghost { border-color: rgba(26,26,26,0.30); color: #1A1A1A; } [data-style="editorial"] .btn-arrow { background: rgba(245,240,232,0.2); } /* Sections — more generous breathing room */ [data-style="editorial"] .section { padding: 200px 0; } [data-style="editorial"] .sec-head { margin-bottom: 100px; max-width: 80ch; } [data-style="editorial"] .sec-head .display { font-size: clamp(3rem, 7vw, 6.5rem); font-style: normal; } [data-style="editorial"] .sec-head .sec-lead { font-family: "Fraunces", serif; font-style: italic; font-size: 1.2rem; line-height: 1.7; color: #5A5248; margin-top: 32px; } /* Services — editorial "departments" layout */ [data-style="editorial"] .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: transparent; border: none; border-radius: 0; border-top: 2px solid #1A1A1A; } [data-style="editorial"] .svc { background: transparent; border: none; border-bottom: 1px solid rgba(26,26,26,0.12); border-right: 1px solid rgba(26,26,26,0.12); padding: 52px 48px 40px; min-height: auto; } [data-style="editorial"] .svc:nth-child(even) { border-right: none; } [data-style="editorial"] .svc:hover { background: rgba(26,26,26,0.02); box-shadow: none; } [data-style="editorial"] .svc-head { font-family: "Fraunces", serif; font-style: italic; color: #5A5248; letter-spacing: 0.01em; } [data-style="editorial"] .svc-num { color: #9A9288; font-family: "Fraunces", serif; font-style: normal; font-size: 0.75rem; } [data-style="editorial"] .svc-title { font-family: "Fraunces", serif; font-weight: 300; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; margin: 20px 0 16px; } [data-style="editorial"] .svc-copy { font-style: italic; line-height: 1.7; color: #5A5248; } [data-style="editorial"] .tag { font-family: "Fraunces", serif; font-style: italic; font-size: 0.78rem; border-color: rgba(26,26,26,0.20); color: #5A5248; background: transparent; } /* Case files — editorial list */ [data-style="editorial"] .cr-num { font-family: "Fraunces", serif; font-style: italic; font-size: 0.9rem; letter-spacing: 0.02em; color: #9A9288; } [data-style="editorial"] .cr-meta b { font-size: 2.2rem; font-weight: 300; font-style: normal; letter-spacing: -0.02em; } [data-style="editorial"] .cr-metric b { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.6rem; color: #1A1A1A; font-style: italic; } /* FAQ — editorial questions */ [data-style="editorial"] .f-q { font-style: normal; font-size: 1.7rem; font-weight: 300; letter-spacing: -0.01em; } [data-style="editorial"] .faq-row summary { padding: 32px 10px; } [data-style="editorial"] .f-a { font-style: italic; font-size: 1.05rem; line-height: 1.75; color: #5A5248; } [data-style="editorial"] .f-plus { border-radius: 0; border-color: rgba(26,26,26,0.25); } [data-style="editorial"] .faq-row[open] .f-plus { background: #1A1A1A; } /* Closer — editorial CTA */ [data-style="editorial"] .closer { padding: 220px 0; } [data-style="editorial"] .closer-display { font-family: "Fraunces", serif; font-weight: 300; font-style: italic; font-size: clamp(3rem, 8vw, 7.5rem); letter-spacing: -0.04em; line-height: 0.9; color: #1A1A1A; } [data-style="editorial"] .closer-display span { display: block; } /* Footer */ [data-style="editorial"] footer { border-top: 2px solid #1A1A1A; font-family: "Fraunces", serif; } [data-style="editorial"] .foot-mono { font-family: "Fraunces", serif; font-style: italic; font-size: 0.8rem; letter-spacing: 0.04em; } /* ================================================================ STYLE 3 — NEO-BRUTALIST (deep overrides) Raw, bold, no-nonsense. Every element declares its presence. ================================================================ */ /* Body font — Inter Bold throughout */ [data-style="neobrutalist"] body { font-family: "Inter", sans-serif; } /* Display headlines — HEAVY, uppercase, confrontational */ [data-style="neobrutalist"] .display { font-family: "Inter", sans-serif; font-style: normal; font-weight: 900; letter-spacing: -0.04em; line-height: 0.88; text-transform: uppercase; } [data-style="neobrutalist"] .display em { font-style: normal; color: #000; background: #FFE500; padding: 2px 8px 0; display: inline; } /* Hero — left-aligned wall of text */ [data-style="neobrutalist"] .hero { padding: 140px 0 0; } [data-style="neobrutalist"] .hero-inner { display: block; width: var(--shell); margin: 0 auto; } [data-style="neobrutalist"] h1.display { font-size: clamp(4.5rem, 13vw, 12rem); font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 36px; color: #000; } [data-style="neobrutalist"] .hero-sub { font-family: "Inter", sans-serif; font-weight: 500; font-size: 1.1rem; line-height: 1.55; max-width: 48ch; color: #333; margin-bottom: 40px; } [data-style="neobrutalist"] .hero-eyebrow { background: #FFE500; border: 2px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; } [data-style="neobrutalist"] .eyebrow-text { font-family: "Inter", sans-serif; font-weight: 900; color: #000; text-transform: uppercase; } [data-style="neobrutalist"] .hero-eyebrow .live { background: #000; box-shadow: none; } /* Eyebrow labels — bold block numbers */ [data-style="neobrutalist"] .sec-eyebrow { font-family: "Inter", sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; font-weight: 900; color: #000; text-transform: uppercase; } [data-style="neobrutalist"] .sec-eyebrow span { width: 24px; height: 3px; background: #000; box-shadow: none; border-radius: 0; } /* Buttons — chunky, flat, direct */ [data-style="neobrutalist"] .btn { font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.82rem; padding: 18px 28px; } [data-style="neobrutalist"] .btn.big { padding: 22px 34px; } /* Sections — tighter, more punchy */ [data-style="neobrutalist"] .section { padding: 120px 0; } [data-style="neobrutalist"] .sec-head { margin-bottom: 60px; } [data-style="neobrutalist"] .sec-head .display { font-size: clamp(3rem, 8vw, 7rem); } [data-style="neobrutalist"] .sec-head .sec-lead { font-family: "Inter", sans-serif; font-weight: 500; font-style: normal; font-size: 1rem; color: #333; line-height: 1.6; } /* Services — stacked full-width cards */ [data-style="neobrutalist"] .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #000; border: 3px solid #000; border-radius: 0; overflow: hidden; } [data-style="neobrutalist"] .svc { padding: 40px 36px 32px; min-height: 460px; } [data-style="neobrutalist"] .svc-title { font-family: "Inter", sans-serif; font-weight: 900; font-size: 1.7rem; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; color: #000; } [data-style="neobrutalist"] .svc-title em { font-style: normal; background: #FFE500; padding: 0 4px; } [data-style="neobrutalist"] .svc-copy { font-family: "Inter", sans-serif; font-weight: 500; font-style: normal; color: #333; } [data-style="neobrutalist"] .svc-kind { font-weight: 900; letter-spacing: 0.15em; font-size: 0.7rem; } /* Case rows — bold table */ [data-style="neobrutalist"] .case-list { border: 3px solid #000; } [data-style="neobrutalist"] .case-row { border-bottom: 2px solid #000 !important; padding: 24px 20px; } [data-style="neobrutalist"] .case-row:last-child { border-bottom: none !important; } [data-style="neobrutalist"] .cr-num { font-family: "Inter", sans-serif; font-weight: 900; font-size: 1rem; color: #000; letter-spacing: 0; } [data-style="neobrutalist"] .cr-meta b { font-family: "Inter", sans-serif; font-weight: 900; font-style: normal; font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.02em; } [data-style="neobrutalist"] .cr-metric b { font-family: "Inter", sans-serif; font-weight: 900; font-size: 1.6rem; color: #000; } [data-style="neobrutalist"] .cr-tags span { border: 2px solid #000; border-radius: 0; background: #fff; color: #000; font-weight: 700; } /* FAQ — bold questions */ [data-style="neobrutalist"] .f-q { font-family: "Inter", sans-serif; font-style: normal; font-weight: 900; font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.02em; color: #000; } [data-style="neobrutalist"] .faq-row summary { padding: 24px 10px; } [data-style="neobrutalist"] .f-a { font-family: "Inter", sans-serif; font-weight: 400; font-style: normal; color: #333; } [data-style="neobrutalist"] .f-plus { border-color: #000; border-width: 2px; font-weight: 900; } /* Closer section — yellow blast */ [data-style="neobrutalist"] .closer-display { font-family: "Inter", sans-serif; font-weight: 900; font-style: normal; text-transform: uppercase; font-size: clamp(3.5rem, 10vw, 9rem); letter-spacing: -0.05em; line-height: 0.88; color: #000; } [data-style="neobrutalist"] .closer-display span { display: block; } [data-style="neobrutalist"] .closer-meta span { color: #000; font-weight: 700; } [data-style="neobrutalist"] .closer-meta b { color: #000; } [data-style="neobrutalist"] .closer-meta .sep { color: #000; } /* Nav CTA button */ [data-style="neobrutalist"] .cta { font-family: "Inter", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding: 8px 16px; border-radius: 0; background: #FFE500; color: #000; } /* Footer */ [data-style="neobrutalist"] footer { font-family: "Inter", sans-serif; } [data-style="neobrutalist"] .foot-mono { font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: 0.12em; font-size: 0.72rem; background: #FFE500; color: #000; padding: 16px 0; text-align: center; border-top: 3px solid #000; } [data-style="neobrutalist"] footer h5 { font-family: "Inter", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; } /* ================================================================ STYLE 4 — GLASSMORPHISM + AURORA (deep overrides) Premium SaaS, floating glass over a vivid aurora background. ================================================================ */ /* Body: aurora background is FIXED so it follows scroll */ [data-style="glassmorphism"] body::before { position: fixed; background: radial-gradient(ellipse 80% 60% at 15% 25%, rgba(108,43,217,0.75), transparent 55%), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(14,165,233,0.65), transparent 50%), radial-gradient(ellipse 55% 65% at 50% 90%, rgba(236,72,153,0.55), transparent 55%), radial-gradient(ellipse 45% 35% at 75% 55%, rgba(34,211,238,0.40), transparent 45%), radial-gradient(ellipse 70% 40% at 30% 70%, rgba(167,139,250,0.45), transparent 50%); opacity: 1; z-index: -1; } /* Display — clean sans-serif over the aurora */ [data-style="glassmorphism"] .display { font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; } [data-style="glassmorphism"] .display em { font-style: italic; color: #22D3EE; font-weight: 700; background: none; } /* Hero — centered, floating above aurora */ [data-style="glassmorphism"] .hero { padding: 160px 0 0; } [data-style="glassmorphism"] .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; width: var(--shell); max-width: 900px; } [data-style="glassmorphism"] h1.display { font-size: clamp(3.2rem, 9vw, 8.5rem); font-family: "Inter", sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.05em; margin-bottom: 36px; color: #fff; text-shadow: 0 0 80px rgba(34,211,238,0.25); } [data-style="glassmorphism"] .hero-sub { font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.7; max-width: 52ch; color: rgba(255,255,255,0.70); margin-bottom: 48px; } [data-style="glassmorphism"] .hero-cta-row { justify-content: center; } [data-style="glassmorphism"] .hero-eyebrow { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(12px); border-radius: 999px; } [data-style="glassmorphism"] .eyebrow-text { color: #67E8F9; } [data-style="glassmorphism"] .hero-eyebrow .live { background: #22D3EE; box-shadow: 0 0 10px #22D3EE; } /* Eyebrow labels — glass pill */ [data-style="glassmorphism"] .sec-eyebrow { font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; font-weight: 600; color: #67E8F9; background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.20); border-radius: 999px; padding: 4px 14px; display: inline-flex; gap: 8px; } [data-style="glassmorphism"] .sec-eyebrow span { width: 0; display: none; } /* Buttons */ [data-style="glassmorphism"] .btn { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 0.95rem; } /* Sections */ [data-style="glassmorphism"] .section { padding: 140px 0; } [data-style="glassmorphism"] .sec-head .display { font-size: clamp(2.8rem, 7vw, 6rem); } [data-style="glassmorphism"] .sec-head .sec-lead { font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,0.60); } /* Services — floating glass cards separated in space */ [data-style="glassmorphism"] .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; background: transparent; border: none; border-radius: 0; overflow: visible; } [data-style="glassmorphism"] .svc { border-radius: 24px; padding: 36px; min-height: 480px; } [data-style="glassmorphism"] .svc-title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.55rem; font-style: normal; letter-spacing: -0.02em; line-height: 1.2; color: #fff; } [data-style="glassmorphism"] .svc-title em { font-style: italic; color: #22D3EE; } [data-style="glassmorphism"] .svc-copy { font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; color: rgba(255,255,255,0.65); } [data-style="glassmorphism"] .svc-num { color: #22D3EE; } [data-style="glassmorphism"] .svc-kind { color: rgba(255,255,255,0.50); } [data-style="glassmorphism"] .tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.70); backdrop-filter: blur(8px); } /* Case rows — glass cards */ [data-style="glassmorphism"] .case-row { border-radius: 16px; padding: 24px 20px; margin-bottom: 10px; } [data-style="glassmorphism"] .cr-meta b { font-family: "Inter", sans-serif; font-weight: 600; font-style: normal; font-size: 1.5rem; color: #fff; } [data-style="glassmorphism"] .cr-num { color: #22D3EE; } [data-style="glassmorphism"] .cr-metric b { color: #22D3EE; font-family: "Inter", sans-serif; font-weight: 700; } [data-style="glassmorphism"] .cr-tags span { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.65); } /* FAQ */ [data-style="glassmorphism"] .faq-row { border-radius: 16px; margin-bottom: 10px; border-bottom: none !important; } [data-style="glassmorphism"] .f-q { font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: #fff; } [data-style="glassmorphism"] .f-a { color: rgba(255,255,255,0.60); font-family: "Inter", sans-serif; } [data-style="glassmorphism"] .f-plus { border-color: rgba(255,255,255,0.20); color: rgba(255,255,255,0.60); } [data-style="glassmorphism"] .faq-row[open] .f-plus { background: #22D3EE; color: #0d0620; } /* Closer */ [data-style="glassmorphism"] .closer { padding: 180px 0; } [data-style="glassmorphism"] .closer-display { font-family: "Inter", sans-serif; font-weight: 800; font-style: normal; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.05em; color: #fff; text-shadow: 0 0 80px rgba(34,211,238,0.30); } [data-style="glassmorphism"] .closer-meta span { color: rgba(255,255,255,0.60); } [data-style="glassmorphism"] .closer-meta b { color: #22D3EE; } /* Footer */ [data-style="glassmorphism"] footer { background: rgba(13,6,32,0.80); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.10); font-family: "Inter", sans-serif; } [data-style="glassmorphism"] .foot-mono { color: rgba(255,255,255,0.35); font-family: "Inter", sans-serif; } /* ================================================================ STYLE 5 — BENTO GRID LIGHT (deep overrides) Apple product page. Modular tiles, clean and organized. ================================================================ */ /* Display — clean Inter, product page style */ [data-style="bento"] .display { font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; } [data-style="bento"] .display em { font-style: normal; font-weight: 800; color: #FF5A1F; } /* Hero — centered, clean product hero */ [data-style="bento"] .hero { padding: 150px 0 0; background: #F8F9FB; } [data-style="bento"] .hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; width: var(--shell); max-width: 880px; } [data-style="bento"] h1.display { font-size: clamp(3.2rem, 9vw, 8rem); font-family: "Inter", sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.05em; margin-bottom: 32px; color: #0F172A; } [data-style="bento"] .hero-sub { font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.65; max-width: 50ch; color: #475569; margin-bottom: 44px; } [data-style="bento"] .hero-cta-row { justify-content: center; } [data-style="bento"] .hero-eyebrow { background: rgba(255,90,31,0.06); border-color: rgba(255,90,31,0.15); border-radius: 999px; } [data-style="bento"] .eyebrow-text { color: #FF5A1F; font-family: "Inter", sans-serif; } [data-style="bento"] .hero-eyebrow .live { background: #FF5A1F; box-shadow: 0 0 10px rgba(255,90,31,0.40); } /* Eyebrow labels — clean pill tags */ [data-style="bento"] .sec-eyebrow { font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.10em; font-weight: 600; color: #FF5A1F; background: rgba(255,90,31,0.06); border: 1px solid rgba(255,90,31,0.15); border-radius: 999px; padding: 4px 14px; display: inline-flex; gap: 6px; } [data-style="bento"] .sec-eyebrow span { display: none; } /* Buttons */ [data-style="bento"] .btn { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 0.95rem; } /* Sections — comfortable Apple spacing */ [data-style="bento"] .section { padding: 130px 0; } [data-style="bento"] .sec-head { margin-bottom: 60px; text-align: center; max-width: 72ch; margin-left: auto; margin-right: auto; } [data-style="bento"] .sec-head .display { font-size: clamp(2.6rem, 6.5vw, 5.5rem); } [data-style="bento"] .sec-head .sec-lead { font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; font-size: 1.1rem; line-height: 1.65; color: #475569; margin-top: 20px; } [data-style="bento"] .sec-head-split { flex-direction: column; align-items: center; text-align: center; } [data-style="bento"] .sec-head-split .sec-lead { text-align: center; max-width: 48ch; margin-top: 16px; } /* Services — TRUE bento grid layout */ [data-style="bento"] .svc-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; background: transparent; border: none; border-radius: 0; overflow: visible; } [data-style="bento"] .svc:nth-child(1) { grid-row: 1 / 3; } [data-style="bento"] .svc:nth-child(4) { grid-column: 2 / 4; } [data-style="bento"] .svc { padding: 32px 28px; min-height: 300px; } [data-style="bento"] .svc-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.4rem; font-style: normal; letter-spacing: -0.025em; line-height: 1.2; color: #0F172A; } [data-style="bento"] .svc-title em { font-style: normal; color: #FF5A1F; } [data-style="bento"] .svc-copy { font-family: "Inter", sans-serif; font-style: normal; font-weight: 400; font-size: 0.95rem; color: #475569; line-height: 1.6; } [data-style="bento"] .svc-num { color: #FF5A1F; font-weight: 600; } [data-style="bento"] .svc-kind { color: #94A3B8; font-weight: 600; } /* Case list — bento grid of tiles */ [data-style="bento"] .case-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } [data-style="bento"] .case-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 24px; border-bottom: none !important; } [data-style="bento"] .case-row:hover { padding-left: 24px; transform: translateY(-4px); } [data-style="bento"] .cr-num { font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; color: #FF5A1F; } [data-style="bento"] .cr-meta { order: 2; } [data-style="bento"] .cr-meta b { font-family: "Inter", sans-serif; font-weight: 700; font-style: normal; font-size: 1.3rem; letter-spacing: -0.02em; color: #0F172A; display: block; } [data-style="bento"] .cr-meta small { margin-top: 4px; } [data-style="bento"] .cr-tags { order: 3; } [data-style="bento"] .cr-metric { order: 4; margin-top: auto; } [data-style="bento"] .cr-metric b { font-family: "Inter", sans-serif; font-weight: 800; font-size: 2rem; color: #FF5A1F; } [data-style="bento"] .cr-open { order: 5; font-family: "Inter", sans-serif; font-size: 0.75rem; font-weight: 600; } /* FAQ */ [data-style="bento"] .faq-row { border-bottom: none !important; } [data-style="bento"] .f-q { font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: #0F172A; } [data-style="bento"] .f-plus { border-radius: 50%; border-color: rgba(0,0,0,0.15); } [data-style="bento"] .faq-row[open] .f-plus { background: #FF5A1F; } [data-style="bento"] .f-a { font-family: "Inter", sans-serif; font-style: normal; color: #475569; } /* Closer */ [data-style="bento"] .closer { padding: 160px 0; background: #FFFFFF; border-top: 1px solid rgba(0,0,0,0.08); } [data-style="bento"] .closer-display { font-family: "Inter", sans-serif; font-weight: 800; font-style: normal; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.05em; line-height: 0.90; color: #0F172A; } [data-style="bento"] .closer-eyebrow { color: #FF5A1F; } [data-style="bento"] .closer-meta span { color: #475569; } [data-style="bento"] .closer-meta b { color: #0F172A; } /* Footer */ [data-style="bento"] footer { background: #FFFFFF; border-top: 1px solid rgba(0,0,0,0.08); font-family: "Inter", sans-serif; } [data-style="bento"] .foot-mono { font-family: "Inter", sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: #94A3B8; background: #F8F9FB; border-top: 1px solid rgba(0,0,0,0.07); } [data-style="bento"] footer h5 { font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; color: #0F172A; } /* ================================================================ STYLE 6 — CYBERPUNK NEON (deep overrides) Terminal interface. Monospace everything. System output aesthetic. ================================================================ */ /* Body — monospace everywhere */ [data-style="cyberpunk"] body { font-family: "JetBrains Mono", monospace; line-height: 1.6; } /* Scanlines — much more visible */ [data-style="cyberpunk"] .scanlines { opacity: 1 !important; background: repeating-linear-gradient( to bottom, rgba(0,255,240,0.015) 0, rgba(0,255,240,0.015) 1px, transparent 1px, transparent 4px ); } /* Display — monospace terminal headings */ [data-style="cyberpunk"] .display { font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 700; letter-spacing: -0.01em; line-height: 0.95; } [data-style="cyberpunk"] .display em { font-style: normal; color: #00FFF0; text-shadow: 0 0 20px rgba(0,255,240,0.60); } /* Hero — terminal boot screen */ [data-style="cyberpunk"] .hero { padding: 150px 0 0; } [data-style="cyberpunk"] .hero-inner { display: block; width: var(--shell); margin: 0 auto; } [data-style="cyberpunk"] h1.display { font-size: clamp(2.6rem, 7vw, 6.5rem); font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 36px; color: #E0FFF8; } [data-style="cyberpunk"] .hero-sub { font-family: "JetBrains Mono", monospace; font-weight: 400; font-size: 0.95rem; line-height: 1.7; max-width: 62ch; color: #4ABFB7; margin-bottom: 44px; } [data-style="cyberpunk"] .hero-sub::before { content: "> "; color: #00FFF0; } [data-style="cyberpunk"] .hero-eyebrow { background: rgba(0,255,240,0.06); border: 1px solid rgba(0,255,240,0.25); border-radius: 4px; } [data-style="cyberpunk"] .eyebrow-text { font-family: "JetBrains Mono", monospace; color: #00FFF0; font-size: 0.72rem; } [data-style="cyberpunk"] .hero-eyebrow .live { background: #00FFF0; box-shadow: 0 0 10px #00FFF0, 0 0 20px rgba(0,255,240,0.50); } /* Eyebrow labels — terminal command style */ [data-style="cyberpunk"] .sec-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 500; color: #00FFF0; text-transform: none; gap: 0; } [data-style="cyberpunk"] .sec-eyebrow::before { content: "> "; color: #247A74; } [data-style="cyberpunk"] .sec-eyebrow span { display: none; } /* Buttons */ [data-style="cyberpunk"] .btn { font-family: "JetBrains Mono", monospace; font-weight: 600; letter-spacing: 0.08em; font-size: 0.78rem; border-radius: 6px; } /* Sections */ [data-style="cyberpunk"] .section { padding: 120px 0; } [data-style="cyberpunk"] .sec-head .display { font-size: clamp(2.4rem, 6vw, 5.5rem); } [data-style="cyberpunk"] .sec-head .sec-lead { font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 400; font-size: 0.9rem; line-height: 1.7; color: #4ABFB7; } [data-style="cyberpunk"] .sec-head .sec-lead::before { content: "// "; color: #247A74; } /* Services — terminal window cards */ [data-style="cyberpunk"] .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: rgba(0,255,240,0.08); border: 1px solid rgba(0,255,240,0.20); border-radius: 8px; overflow: hidden; } [data-style="cyberpunk"] .svc { padding: 0; min-height: 480px; display: flex; flex-direction: column; } /* Terminal title bar on each service card */ [data-style="cyberpunk"] .svc-head { background: rgba(0,255,240,0.08); border-bottom: 1px solid rgba(0,255,240,0.15); padding: 10px 20px; display: flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.10em; color: #4ABFB7; } [data-style="cyberpunk"] .svc-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #00FFF0; box-shadow: 0 0 8px #00FFF0; flex-shrink: 0; } /* Actual service card body content */ [data-style="cyberpunk"] .svc > *:not(.svc-head) { padding-left: 24px; padding-right: 24px; } [data-style="cyberpunk"] .svc > .svc-demo { padding: 16px 24px; } [data-style="cyberpunk"] .svc > .svc-foot { padding: 0 24px 24px; } [data-style="cyberpunk"] .svc-title { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.15rem; font-style: normal; letter-spacing: -0.01em; line-height: 1.3; color: #E0FFF8; margin-top: 20px; margin-bottom: 12px; } [data-style="cyberpunk"] .svc-title em { font-style: normal; color: #00FFF0; text-shadow: 0 0 16px rgba(0,255,240,0.40); } [data-style="cyberpunk"] .svc-copy { font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 400; font-size: 0.82rem; color: #4ABFB7; line-height: 1.7; } [data-style="cyberpunk"] .svc-price { font-family: "JetBrains Mono", monospace; font-weight: 700; color: #00FFF0; font-size: 0.8rem; } [data-style="cyberpunk"] .tag { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.06em; } /* Case rows — monospace table */ [data-style="cyberpunk"] .cr-num { font-family: "JetBrains Mono", monospace; font-weight: 500; letter-spacing: 0.04em; } [data-style="cyberpunk"] .cr-meta b { font-family: "JetBrains Mono", monospace; font-weight: 700; font-style: normal; font-size: 1.3rem; letter-spacing: -0.01em; color: #E0FFF8; } [data-style="cyberpunk"] .cr-meta small { font-family: "JetBrains Mono", monospace; color: #247A74; } [data-style="cyberpunk"] .cr-metric b { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.4rem; color: #00FFF0; text-shadow: 0 0 16px rgba(0,255,240,0.40); } [data-style="cyberpunk"] .cr-open { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: #00FFF0; letter-spacing: 0.06em; } [data-style="cyberpunk"] .cr-tags span { font-family: "JetBrains Mono", monospace; font-size: 0.65rem; border-radius: 4px; } /* FAQ — terminal Q&A */ [data-style="cyberpunk"] .f-q { font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: #E0FFF8; } [data-style="cyberpunk"] .f-q::before { content: "? "; color: #00FFF0; } [data-style="cyberpunk"] .f-plus { border-radius: 4px; border-color: rgba(0,255,240,0.25); color: #00FFF0; font-family: "JetBrains Mono", monospace; } [data-style="cyberpunk"] .faq-row[open] .f-plus { background: rgba(0,255,240,0.15); color: #00FFF0; border-color: rgba(0,255,240,0.40); transform: none; } [data-style="cyberpunk"] .f-a { font-family: "JetBrains Mono", monospace; font-style: normal; font-size: 0.88rem; color: #4ABFB7; line-height: 1.75; } [data-style="cyberpunk"] .f-a::before { content: ">>> "; color: #247A74; display: block; } [data-style="cyberpunk"] .f-n { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; } /* Closer — terminal shutdown screen */ [data-style="cyberpunk"] .closer { padding: 160px 0; } [data-style="cyberpunk"] .closer-display { font-family: "JetBrains Mono", monospace; font-weight: 700; font-style: normal; font-size: clamp(2.4rem, 6.5vw, 6rem); letter-spacing: -0.02em; line-height: 0.95; color: #E0FFF8; } [data-style="cyberpunk"] .closer-display em { font-style: normal; color: #00FFF0; text-shadow: 0 0 30px rgba(0,255,240,0.50); } [data-style="cyberpunk"] .closer-eyebrow { font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; } [data-style="cyberpunk"] .closer-meta span { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; color: #4ABFB7; } [data-style="cyberpunk"] .closer-meta b { color: #00FFF0; } /* Footer */ [data-style="cyberpunk"] footer { font-family: "JetBrains Mono", monospace; border-top: 1px solid rgba(0,255,240,0.15); } [data-style="cyberpunk"] .foot-mono { font-family: "JetBrains Mono", monospace; color: #247A74; font-size: 0.72rem; letter-spacing: 0.06em; } [data-style="cyberpunk"] footer h5 { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: #00FFF0; } [data-style="cyberpunk"] footer a { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; color: #4ABFB7; } [data-style="cyberpunk"] footer a:hover { color: #00FFF0; } /* Nav link */ [data-style="cyberpunk"] .nav-link { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; letter-spacing: 0.08em; } [data-style="cyberpunk"] .cta { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; border-radius: 4px; } /* Brand */ [data-style="cyberpunk"] .brand-wm { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; letter-spacing: 0.08em; } /* ================================================================ ELITE STYLE SYSTEM — v3 Deep visual transformations: animations, textures, layout restructuring, unique design signatures per style. ================================================================ */ /* ── SMOOTH STYLE TRANSITIONS ─────────────────────────────── */ .topbar, .svc, .lab-card, .case-row, .faq-row, .closer, footer, .btn, .dossier-card, .forge-btn, .forge-panel, .style-panel, .scoper-panel, body, html { transition: background 0.45s cubic-bezier(0.4,0,0.2,1), background-color 0.45s cubic-bezier(0.4,0,0.2,1), color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease; } /* ================================================================ KEYFRAMES — global, named uniquely to avoid conflicts ================================================================ */ /* Glassmorphism: aurora breathes */ @keyframes forge-aurora { 0%,100% { transform: scale(1) translate(0%, 0%); } 25% { transform: scale(1.05) translate(-2%, 1.5%); } 50% { transform: scale(1.02) translate(1.5%, -2%); } 75% { transform: scale(0.97) translate(-1%, -1%); } } /* Glassmorphism: button glow pulse */ @keyframes forge-glow-pulse { 0%,100% { box-shadow: 0 0 20px rgba(34,211,238,0.40), 0 0 50px rgba(34,211,238,0.15); } 50% { box-shadow: 0 0 35px rgba(34,211,238,0.65), 0 0 80px rgba(34,211,238,0.28); } } /* Cyberpunk: h1 glitch */ @keyframes forge-glitch { 0%,87%,100% { text-shadow: 0 0 22px rgba(0,255,240,0.55); transform: skewX(0); filter: none; } 88% { text-shadow: -5px 0 #FF00FF, 5px 0 #00FFF0, 0 0 35px rgba(0,255,240,0.90); transform: skewX(-3deg) translateX(-4px); filter: blur(0.5px); } 89.5% { text-shadow: 5px 0 #FF00FF, -5px 0 #00FFF0, 0 0 35px rgba(0,255,240,0.90); transform: skewX(3deg) translateX(4px); filter: none; } 91% { text-shadow: -2px 0 #FF00FF, 2px 0 #00FFF0; transform: skewX(-1deg); } 92% { text-shadow: 0 0 22px rgba(0,255,240,0.55); transform: skewX(0); } } /* Cyberpunk: neon flicker on scroll bar */ @keyframes neon-flicker { 0%,95%,100% { opacity: 1; } 96% { opacity: 0.6; } 97.5% { opacity: 1; } 98% { opacity: 0.7; } 99% { opacity: 1; } } /* Cyberpunk: blinking cursor */ @keyframes blink-cursor { 0%,49% { opacity: 1; } 50%,100%{ opacity: 0; } } /* Bento: tile rise */ @keyframes bento-rise { from { opacity:0; transform: translateY(18px) scale(0.98); } to { opacity:1; transform: translateY(0) scale(1); } } /* ================================================================ EDITORIAL MONO — Signature: The New Yorker meets Swiss agency Rules: thin horizontal lines, Fraunces serif, editorial spacing, oversized section numbers, generous cream whitespace. ================================================================ */ /* Subtle paper texture on the canvas */ [data-style="editorial"] body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: 1; background-size: 300px 300px; background-repeat: repeat; } /* Oversized watermark section numbers */ [data-style="editorial"] #services::before, [data-style="editorial"] #scoper::before, [data-style="editorial"] #work::before, [data-style="editorial"] #lab::before, [data-style="editorial"] #faq::before { content: ''; position: absolute; top: 60px; right: 0; font-family: "Fraunces", serif; font-size: clamp(14rem, 22vw, 22rem); font-weight: 300; line-height: 1; pointer-events: none; z-index: 0; letter-spacing: -0.08em; color: rgba(26,26,26,0.04); } [data-style="editorial"] #services::before { content: "01"; } [data-style="editorial"] #scoper::before { content: "02"; } [data-style="editorial"] #work::before { content: "03"; } [data-style="editorial"] #lab::before { content: "04"; } [data-style="editorial"] #faq::before { content: "05"; } /* Hero: masthead rule lines */ [data-style="editorial"] .hero::before { content: ''; position: absolute; top: 120px; left: 0; right: 0; height: 2px; background: #1A1A1A; opacity: 0.12; pointer-events: none; } /* Hero sub: editorial column intro */ [data-style="editorial"] .hero-sub { position: relative; padding-left: 28px; border-left: 2px solid rgba(26,26,26,0.25); } /* Section heads: editorial department header */ [data-style="editorial"] .sec-head::before { content: ''; display: block; width: 100%; height: 2px; background: #1A1A1A; margin-bottom: 32px; opacity: 0.12; } /* Service cards: huge ghost number top-right */ [data-style="editorial"] .svc-num { position: relative; } [data-style="editorial"] .svc::before { content: attr(data-num); position: absolute; top: 20px; right: 28px; font-family: "Fraunces", serif; font-size: 8rem; font-weight: 300; color: rgba(26,26,26,0.05); line-height: 1; pointer-events: none; } /* Demo blocks: editorial clipping box */ [data-style="editorial"] .svc-demo { background: rgba(26,26,26,0.03); border: 1px solid rgba(26,26,26,0.10); border-radius: 4px; } /* Case rows: large editorial article number */ [data-style="editorial"] .case-row { position: relative; } [data-style="editorial"] .case-list { border-top: 2px solid #1A1A1A; margin-top: 0; } /* Footer: masthead publication footer */ [data-style="editorial"] footer { background: #F5F0E8; border-top: 2px solid #1A1A1A; } [data-style="editorial"] footer::before { background: linear-gradient(90deg, transparent, rgba(26,26,26,0.20), transparent); height: 1px; } [data-style="editorial"] .foot-mono { border-top: 1px solid rgba(26,26,26,0.15); background: transparent; color: #9A9288; padding-top: 20px; letter-spacing: 0.10em; } /* CTA / Closer: editorial centerspread */ [data-style="editorial"] .closer::before { background-image: linear-gradient(rgba(26,26,26,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(26,26,26,0.08) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.4; } /* Brand: editorial masthead */ [data-style="editorial"] .brand-wm { font-family: "Fraunces", serif; font-weight: 400; font-style: italic; letter-spacing: 0.01em; font-size: 1rem; } /* Scoper: editorial form style */ [data-style="editorial"] .scoper-panel { border-radius: 4px; border: 1px solid rgba(26,26,26,0.15); } /* ================================================================ NEO-BRUTALIST — Signature: Bold, raw, direct. Rules: dot grid, hard shadows, thick black borders, color-coded card tops, yellow CTA inversion, zero decoration excess. ================================================================ */ /* Dot grid on the page (ICONIC neo-brutalist texture) */ [data-style="neobrutalist"] body::after { background-image: radial-gradient(rgba(0,0,0,0.14) 1.5px, transparent 1.5px); background-size: 28px 28px; mix-blend-mode: normal; opacity: 1; z-index: 0; background-color: transparent; } /* Hero: no canvas orb, clean */ [data-style="neobrutalist"] .orb-canvas { opacity: 0; } /* Hero: construction-tape top bar */ [data-style="neobrutalist"] .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient( -45deg, #FFE500 0px, #FFE500 16px, #000 16px, #000 32px ); z-index: 10; } /* Service cards: color-coded thick top borders */ [data-style="neobrutalist"] .svc:nth-child(1) { border-top: 6px solid #FF5A1F; } [data-style="neobrutalist"] .svc:nth-child(2) { border-top: 6px solid #84CC16; } [data-style="neobrutalist"] .svc:nth-child(3) { border-top: 6px solid #3B82F6; } [data-style="neobrutalist"] .svc:nth-child(4) { border-top: 6px solid #EC4899; } /* Demo blocks: raw bordered */ [data-style="neobrutalist"] .svc-demo { border: 2px solid #000; border-radius: 0; background: #f5f5f5; } /* Case metrics: GIANT numbers */ [data-style="neobrutalist"] .cr-metric b { font-size: 2.2rem; font-weight: 900; display: block; line-height: 1; } /* Closer / CTA: full inversion — black bg, white text */ [data-style="neobrutalist"] .closer { background: #000 !important; border-top: 6px solid #FFE500; } [data-style="neobrutalist"] .closer::before { opacity: 0; } [data-style="neobrutalist"] .closer-display { color: #fff; } [data-style="neobrutalist"] .closer-eyebrow { color: #FFE500; } [data-style="neobrutalist"] .closer-meta span { color: rgba(255,255,255,0.60); } [data-style="neobrutalist"] .closer-meta b { color: #FFE500; } [data-style="neobrutalist"] .closer-meta .sep { color: #FFE500; opacity: 1; } [data-style="neobrutalist"] .closer .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.4); background: transparent; } [data-style="neobrutalist"] .closer .btn.ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; } /* Scoper stats: giant numbers */ [data-style="neobrutalist"] .scoper-stats b { font-family: "Inter", sans-serif; font-weight: 900; font-size: 2.8rem; color: #000; letter-spacing: -0.04em; } /* Section heads: left ruled */ [data-style="neobrutalist"] .sec-head::before { content: ''; display: block; height: 6px; background: #000; width: 40px; margin-bottom: 24px; } /* Footer: punchy */ [data-style="neobrutalist"] footer { background: #fff; } /* Scroll bar: thick chunky */ [data-style="neobrutalist"] .scroll-progress { height: 6px; border-radius: 0; } /* Lab cards: same hard style */ [data-style="neobrutalist"] .svc-foot { border-top: 2px solid #000; padding-top: 14px; } [data-style="neobrutalist"] .lab-card .lab-head b { font-family: "Inter", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.08em; color: #000; } /* ================================================================ GLASSMORPHISM + AURORA — Signature: Living aurora, real glass. Rules: animated aurora background, frosted cards with noise, glowing edges, everything floats. ================================================================ */ /* Aurora BREATHES — slow animation */ [data-style="glassmorphism"] body::before { animation: forge-aurora 18s ease-in-out infinite; position: fixed !important; z-index: -1; } /* CRT-style dark vignette on page edges */ [data-style="glassmorphism"] body::after { background: radial-gradient(ellipse 130% 130% at 50% 50%, transparent 50%, rgba(0,0,0,0.70) 100%); mix-blend-mode: normal; opacity: 1; z-index: 0; background-size: 100% 100%; } /* Noise + shine on glass cards */ [data-style="glassmorphism"] .svc, [data-style="glassmorphism"] .lab-card, [data-style="glassmorphism"] .scoper-panel, [data-style="glassmorphism"] .dossier-card { position: relative; overflow: hidden; } [data-style="glassmorphism"] .svc::before, [data-style="glassmorphism"] .lab-card::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); background-size: 200px 200px; background-repeat: repeat; pointer-events: none; z-index: 1; border-radius: inherit; } /* Light refraction at card top edge */ [data-style="glassmorphism"] .svc::after, [data-style="glassmorphism"] .lab-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.50) 30%, rgba(34,211,238,0.35) 60%, transparent 100%); z-index: 2; pointer-events: none; } /* Override the ::after scale animation from base (svc left bar) */ [data-style="glassmorphism"] .svc-hover-bar::after { display: none; } /* Primary button: animated pulse */ [data-style="glassmorphism"] .btn.primary { animation: forge-glow-pulse 3s ease-in-out infinite; } [data-style="glassmorphism"] .btn.primary:hover { animation: none; box-shadow: 0 0 45px rgba(34,211,238,0.70), 0 0 90px rgba(34,211,238,0.30); } /* Hero: glow ring behind the heading */ [data-style="glassmorphism"] h1.display::before { content: ''; position: absolute; inset: -60px; background: radial-gradient(ellipse at center, rgba(108,43,217,0.25) 0%, transparent 65%); z-index: -1; pointer-events: none; } [data-style="glassmorphism"] h1.display { position: relative; } /* Scroll progress: cyan glow */ [data-style="glassmorphism"] .scroll-progress { height: 2px; box-shadow: 0 0 14px rgba(34,211,238,0.80); } /* Section dividers: subtle glass lines */ [data-style="glassmorphism"] .section { border-top: 1px solid rgba(255,255,255,0.07); } /* Orb canvas: show the aurora through more */ [data-style="glassmorphism"] .orb-canvas { opacity: 0; } /* Demo blocks inside cards */ [data-style="glassmorphism"] .svc-demo { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; } [data-style="glassmorphism"] .svc-foot { border-top-color: rgba(255,255,255,0.12); } /* ================================================================ BENTO GRID LIGHT — Signature: Apple product page. Rules: modular tiles, warm first tile, clean Inter, dot texture, elevated white cards, orange accents, centered hierarchy. ================================================================ */ /* Subtle dot grid page texture */ [data-style="bento"] body::after { background-image: radial-gradient(rgba(15,23,42,0.07) 1px, transparent 1px); background-size: 24px 24px; mix-blend-mode: normal; opacity: 1; z-index: 0; } /* Hero: no orb canvas */ [data-style="bento"] .orb-canvas { opacity: 0; } /* Hero bottom accent line */ [data-style="bento"] .hero::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: #FF5A1F; border-radius: 999px; } /* Bento tile color accents per card */ [data-style="bento"] .svc:nth-child(1) { background: linear-gradient(145deg, #fff7f4 0%, #ffffff 55%); border-color: rgba(255,90,31,0.14); } [data-style="bento"] .svc:nth-child(2) { background: linear-gradient(145deg, #f4fffe 0%, #ffffff 55%); border-color: rgba(16,185,129,0.12); } [data-style="bento"] .svc:nth-child(3) { background: linear-gradient(145deg, #f5f4ff 0%, #ffffff 55%); border-color: rgba(139,92,246,0.12); } [data-style="bento"] .svc:nth-child(4) { background: linear-gradient(145deg, #fffaf4 0%, #ffffff 55%); border-color: rgba(245,158,11,0.12); } /* Bento grid: ensure overflow visible for rounded corners */ [data-style="bento"] .svc-grid { overflow: visible; } /* Demo blocks: bento-native */ [data-style="bento"] .svc-demo { border-radius: 12px; border-color: rgba(0,0,0,0.07); background: rgba(248,249,251,0.80); } [data-style="bento"] .svc-foot { border-top-color: rgba(0,0,0,0.07); } /* Case tiles: accent top strip per card */ [data-style="bento"] .case-row[data-case="redline"]::before { background: #FF5A1F; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } [data-style="bento"] .case-row[data-case="novapay"]::before { background: #10B981; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } [data-style="bento"] .case-row[data-case="apex"]::before { background: #F59E0B; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } [data-style="bento"] .case-row[data-case="orbital"]::before { background: #8B5CF6; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } [data-style="bento"] .case-row[data-case="helix"]::before { background: #0EA5E9; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } [data-style="bento"] .case-row[data-case="atlas"]::before { background: #EC4899; width: 100% !important; height: 3px; top: 0; left: 0; bottom: auto; border-radius: 20px 20px 0 0; } /* Override border-left from base */ [data-style="bento"] .case-row[data-case] { border-left: none !important; overflow: hidden; } /* Scoper steps: numbered pill */ [data-style="bento"] .scoper-steps li span { background: #FF5A1F; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } /* Lab cards: product-page style */ [data-style="bento"] .lab-card .lab-head b { font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.95rem; color: #0F172A; } [data-style="bento"] .lh-status { background: rgba(16,185,129,0.10); color: #10B981; border-radius: 999px; padding: 2px 10px; font-size: 0.65rem; font-weight: 600; border: 1px solid rgba(16,185,129,0.20); } [data-style="bento"] .lh-status i { background: #10B981; } /* Footer: product page footer */ [data-style="bento"] footer::before { background: linear-gradient(90deg, transparent, rgba(255,90,31,0.25), transparent); } /* ================================================================ CYBERPUNK NEON — Signature: Terminal OS interface. Rules: glitch h1, CRT vignette + grid, monospace everything, neon glow on key text, terminal window cards, animated progress. ================================================================ */ /* Grid lines on every section */ [data-style="cyberpunk"] .section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,255,240,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,240,0.025) 1px, transparent 1px); background-size: 52px 52px; pointer-events: none; z-index: 0; } /* CRT vignette + neon blobs unified on body::before */ [data-style="cyberpunk"] body::before { background: radial-gradient(ellipse 130% 130% at 50% 50%, transparent 50%, rgba(0,0,0,0.75) 100%), radial-gradient(900px 500px at 20% -10%, rgba(0,255,240,0.07), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(255,0,255,0.05), transparent 55%), radial-gradient(800px 600px at 50% 140%, rgba(0,255,136,0.05), transparent 60%); position: fixed !important; z-index: 0; } /* Grid lines as body texture */ [data-style="cyberpunk"] body::after { background-image: linear-gradient(rgba(0,255,240,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,240,0.018) 1px, transparent 1px); background-size: 52px 52px; mix-blend-mode: normal; opacity: 1; z-index: 0; } /* Hero h1: GLITCH animation */ [data-style="cyberpunk"] h1.display { animation: forge-glitch 9s ease-in-out infinite; } /* Hero: blinking cursor after subtitle */ [data-style="cyberpunk"] .hero-sub::after { content: '█'; color: #00FFF0; font-size: 0.9em; margin-left: 4px; animation: blink-cursor 1.2s step-end infinite; text-shadow: 0 0 10px #00FFF0; } /* Scroll progress: animated neon flicker */ [data-style="cyberpunk"] .scroll-progress { animation: neon-flicker 7s ease-in-out infinite; height: 2px; } /* Section eyebrow: terminal prompt prefix */ [data-style="cyberpunk"] .sec-eyebrow::before { content: '> '; color: #00FFF0; font-weight: 700; } /* Service cards: terminal title bar + glow on hover */ [data-style="cyberpunk"] .svc:hover { box-shadow: inset 0 0 40px rgba(0,255,240,0.04), 0 0 30px rgba(0,255,240,0.12), 0 0 60px rgba(0,255,240,0.06); } /* Section numbers as terminal comments */ [data-style="cyberpunk"] #services::before, [data-style="cyberpunk"] #scoper::before, [data-style="cyberpunk"] #work::before, [data-style="cyberpunk"] #lab::before, [data-style="cyberpunk"] #faq::before { content: ''; position: absolute; top: 40px; right: 40px; font-family: "JetBrains Mono", monospace; font-size: clamp(10rem, 16vw, 18rem); font-weight: 700; line-height: 1; pointer-events: none; z-index: 0; letter-spacing: -0.04em; color: rgba(0,255,240,0.025); } [data-style="cyberpunk"] #services::before { content: "01"; } [data-style="cyberpunk"] #scoper::before { content: "02"; } [data-style="cyberpunk"] #work::before { content: "03"; } [data-style="cyberpunk"] #lab::before { content: "04"; } [data-style="cyberpunk"] #faq::before { content: "05"; } /* Case rows: left border matches neon case colors */ [data-style="cyberpunk"] .case-row { transition: border-color 0.2s, background 0.2s; } [data-style="cyberpunk"] .case-row:hover .cr-open { text-shadow: 0 0 12px rgba(0,255,240,0.60); } /* Scoper: terminal interface */ [data-style="cyberpunk"] .sp-head { border-bottom-color: rgba(0,255,240,0.15); background: rgba(0,255,240,0.05); } [data-style="cyberpunk"] .sp-status { color: #00FFF0; } [data-style="cyberpunk"] .sp-prompt { color: #00FFF0; text-shadow: 0 0 8px #00FFF0; } /* Lab cards: terminal window */ [data-style="cyberpunk"] .lab-head { border-bottom: 1px solid rgba(0,255,240,0.12); padding-bottom: 12px; } [data-style="cyberpunk"] .lab-head b { color: #E0FFF8; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; } [data-style="cyberpunk"] .lh-status { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.20); color: #00FF88; border-radius: 4px; font-family: "JetBrains Mono", monospace; } [data-style="cyberpunk"] .lh-status i { background: #00FF88; box-shadow: 0 0 6px #00FF88; } /* FAQ: terminal output */ [data-style="cyberpunk"] .faq-row summary:hover .f-q { color: #00FFF0; text-shadow: 0 0 10px rgba(0,255,240,0.30); } /* Closer: terminal shutdown */ [data-style="cyberpunk"] .closer::before { background-image: linear-gradient(rgba(0,255,240,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,240,0.04) 1px, transparent 1px); background-size: 52px 52px; opacity: 1; mask-image: none; } /* Brand wm: monospace */ [data-style="cyberpunk"] .brand-wm em { font-style: normal; color: #00FFF0; font-size: 0.75em; } /* Forge chatbot: neon eye */ [data-style="cyberpunk"] .fb-eye, [data-style="cyberpunk"] .fp-eye { background: #00FFF0; box-shadow: 0 0 6px #00FFF0; } /* HUD: fully visible, neon styled */ [data-style="cyberpunk"] .hud-c { border-color: rgba(0,255,240,0.55); } [data-style="cyberpunk"] .hud-tick { font-family: "JetBrains Mono", monospace; color: #00FFF0; font-size: 0.6rem; letter-spacing: 0.08em; } /* ============================================================ FIX 1 — CHATBOT (forge-panel) in light mode Panel uses a hardcoded dark gradient; override it for light ============================================================ */ [data-theme="light"] .forge-panel { background: linear-gradient(180deg, rgba(250,248,244,0.97), rgba(241,237,231,0.99)); } [data-theme="light"] .fp-input { background: rgba(0,0,0,0.04); } [data-theme="light"] .fce-row input { background: rgba(0,0,0,0.05); color: var(--text); } [data-theme="light"] .d-banner { background: linear-gradient(120deg, #E8E4DC, #D4CFC5); } /* ============================================================ FIX 2 — STYLE SWITCHER — guaranteed readability every theme ============================================================ */ [data-style="editorial"] .style-panel { background: #EDE7DC; border-color: rgba(0,0,0,0.18); } [data-style="editorial"] .style-option { color: #2E2A25; } [data-style="editorial"] .style-panel-title { color: #6E6258; } [data-style="editorial"] .style-switcher-btn { color: #4A4440; } [data-style="neobrutalist"] .style-option { color: #000; } [data-style="neobrutalist"] .style-panel-title { color: #333; } [data-style="glassmorphism"] .style-option { color: #E0F7FF; } [data-style="glassmorphism"] .style-panel-title { color: #7FCECB; } [data-style="glassmorphism"] .style-switcher-btn { color: #CBD5E1; } [data-style="bento"] .style-panel { background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.10); } [data-style="bento"] .style-option { color: #1E293B; } [data-style="bento"] .style-panel-title { color: #64748B; } [data-style="cyberpunk"] .style-option { color: #A8F0E8; } [data-style="cyberpunk"] .style-panel-title { color: #4ABFB7; } [data-style="cyberpunk"] .style-switcher-btn { color: #A8F0E8; border-color: rgba(0,255,240,0.30); } /* ============================================================ FIX 3 — LIGHT / DARK MODE per style Specificity [0,2,0] beats individual [data-style] and [data-theme] blocks, so these always win when both attributes are set. ============================================================ */ /* ── EDITORIAL: dark mode variant (base is light/cream) ─── */ [data-style="editorial"][data-theme="dark"] { --bg: #1A1410; --bg-2: #221E17; --panel: #2A2420; --panel-2: #322920; --glass: rgba(26,20,16,0.80); --glass-hi: rgba(42,36,28,0.90); --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.13); --line-3: rgba(200,160,90,0.20); --text: #F0E8DC; --text-2: #D4C8B4; --text-dim: #8C7D6A; --text-mute: #5A4D40; --shadow: 0 20px 60px rgba(0,0,0,0.60); --shadow-e: 0 12px 40px rgba(200,140,60,0.12); } [data-style="editorial"][data-theme="dark"] .topbar { background: rgba(26,20,16,0.88); border-bottom-color: rgba(255,255,255,0.08); } [data-style="editorial"][data-theme="dark"] .topbar.scrolled { background: rgba(26,20,16,0.96); } [data-style="editorial"][data-theme="dark"] .trk-wrap { background: linear-gradient(180deg, rgba(26,20,16,0.82) 0%, rgba(26,20,16,0.97) 100%); border-top-color: rgba(255,255,255,0.08); } [data-style="editorial"][data-theme="dark"] .revealable { background: #1A1410; } [data-style="editorial"][data-theme="dark"] .style-panel { background: #2A2420; border-color: rgba(255,255,255,0.13); } [data-style="editorial"][data-theme="dark"] .style-option { color: #D4C8B4; } [data-style="editorial"][data-theme="dark"] .style-panel-title { color: #8C7D6A; } [data-style="editorial"][data-theme="dark"] .style-switcher-btn { color: #8C7D6A; } [data-style="editorial"][data-theme="dark"] .forge-panel { background: linear-gradient(180deg, rgba(26,20,16,0.97), rgba(18,14,10,0.99)); } /* ── NEOBRUTALIST: dark mode variant (base is white/black) ─ */ [data-style="neobrutalist"][data-theme="dark"] { --bg: #0A0A0A; --bg-2: #111111; --panel: #1A1A1A; --panel-2: #222222; --glass: #1A1A1A; --glass-hi: #222222; --line: rgba(255,255,255,0.15); --line-2: #FFFFFF; --line-3: #FFFFFF; --text: #FFFFFF; --text-2: #EEEEEE; --text-dim: #AAAAAA; --text-mute: #666666; --ember: #FFE500; --ember-2: #FFEE55; --ember-soft: rgba(255,229,0,0.15); --ok: #00CC66; --shadow: 4px 4px 0px #FFFFFF; --shadow-e: 6px 6px 0px #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .topbar { background: #0A0A0A; border-bottom-color: #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .topbar.scrolled { background: #111111; } [data-style="neobrutalist"][data-theme="dark"] .trk-wrap { background: #111111; border-top-color: #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .hero::before { background: repeating-linear-gradient(-45deg,#FFE500 0px,#FFE500 16px,#111 16px,#111 32px); } [data-style="neobrutalist"][data-theme="dark"] .svc { background: #1A1A1A; border: 2px solid #FFFFFF; box-shadow: 4px 4px 0 #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .closer { background: #000 !important; border-top: 6px solid #FFE500; } [data-style="neobrutalist"][data-theme="dark"] .closer-display { color: #FFF; } [data-style="neobrutalist"][data-theme="dark"] .closer-eyebrow { color: #FFE500; } [data-style="neobrutalist"][data-theme="dark"] .style-panel { background: #1A1A1A; border: 2px solid #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .style-option { color: #EEE; } [data-style="neobrutalist"][data-theme="dark"] .style-option.active { color: #FFE500; } [data-style="neobrutalist"][data-theme="dark"] .style-option:hover { background: rgba(255,229,0,0.15); color: #FFE500; } [data-style="neobrutalist"][data-theme="dark"] .style-panel-title { color: #AAAAAA; } [data-style="neobrutalist"][data-theme="dark"] .forge-panel { background: linear-gradient(180deg, rgba(10,10,10,0.97), rgba(6,6,6,0.99)); border-color: #FFFFFF; } /* ── GLASSMORPHISM: light mode variant (base is dark space) ─ */ [data-style="glassmorphism"][data-theme="light"] { --bg: #EBE5F7; --bg-2: #DDD5F0; --panel: rgba(255,255,255,0.55); --panel-2: rgba(255,255,255,0.40); --glass: rgba(255,255,255,0.55); --glass-hi: rgba(255,255,255,0.80); --line: rgba(100,50,200,0.12); --line-2: rgba(100,50,200,0.22); --line-3: rgba(34,211,238,0.35); --text: #1A0A3A; --text-2: #2E1A50; --text-dim: #5A3A80; --text-mute: #8A6AAA; --shadow: 0 8px 32px rgba(100,50,200,0.18), inset 0 1px 0 rgba(255,255,255,0.70); --shadow-e: 0 0 40px rgba(34,211,238,0.16), 0 0 80px rgba(34,211,238,0.06); } [data-style="glassmorphism"][data-theme="light"] body::before { background: radial-gradient(ellipse 80% 60% at 15% 25%, rgba(108,43,217,0.28), transparent 55%), radial-gradient(ellipse 60% 50% at 85% 15%, rgba(14,165,233,0.22), transparent 50%), radial-gradient(ellipse 70% 60% at 60% 90%, rgba(236,72,153,0.16), transparent 55%); } [data-style="glassmorphism"][data-theme="light"] .topbar { background: rgba(235,229,247,0.88); border-bottom-color: rgba(100,50,200,0.18); } [data-style="glassmorphism"][data-theme="light"] .topbar.scrolled { background: rgba(225,218,242,0.96); } [data-style="glassmorphism"][data-theme="light"] .trk-wrap { background: linear-gradient(180deg, rgba(235,229,247,0.82) 0%, rgba(221,213,240,0.97) 100%); border-top-color: rgba(100,50,200,0.12); } [data-style="glassmorphism"][data-theme="light"] .svc { background: rgba(255,255,255,0.55); border: 1px solid rgba(100,50,200,0.18); } [data-style="glassmorphism"][data-theme="light"] .style-panel { background: rgba(235,229,247,0.96); border-color: rgba(100,50,200,0.25); } [data-style="glassmorphism"][data-theme="light"] .style-option { color: #2E1A50; } [data-style="glassmorphism"][data-theme="light"] .style-option.active { color: #22D3EE; } [data-style="glassmorphism"][data-theme="light"] .style-option:hover { background: rgba(34,211,238,0.08); color: #1A0A3A; } [data-style="glassmorphism"][data-theme="light"] .style-panel-title { color: #8A6AAA; } [data-style="glassmorphism"][data-theme="light"] .style-switcher-btn { color: #5A3A80; } [data-style="glassmorphism"][data-theme="light"] .forge-panel { background: linear-gradient(180deg, rgba(235,229,247,0.97), rgba(221,213,240,0.99)); } /* ── BENTO: dark mode variant (base is light/white) ────────── */ [data-style="bento"][data-theme="dark"] { --bg: #0F172A; --bg-2: #1E293B; --panel: #1E293B; --panel-2: #0F172A; --glass: rgba(30,41,59,0.92); --glass-hi: rgba(51,65,85,0.98); --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.12); --line-3: rgba(255,90,31,0.25); --text: #F1F5F9; --text-2: #CBD5E1; --text-dim: #94A3B8; --text-mute: #475569; --shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30); --shadow-e: 0 8px 28px rgba(255,90,31,0.22); } [data-style="bento"][data-theme="dark"] body::before { background: radial-gradient(900px 500px at 20% -10%, rgba(255,90,31,0.06), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(255,174,107,0.04), transparent 55%); } [data-style="bento"][data-theme="dark"] .topbar { background: rgba(15,23,42,0.92); border-bottom-color: rgba(255,255,255,0.10); } [data-style="bento"][data-theme="dark"] .topbar.scrolled { background: rgba(15,23,42,0.98); } [data-style="bento"][data-theme="dark"] .trk-wrap { background: linear-gradient(180deg, rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.97) 100%); border-top-color: rgba(255,255,255,0.10); } [data-style="bento"][data-theme="dark"] .svc { background: #1E293B; border: 1px solid rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .faq-row { background: #1E293B; border: 1px solid rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .closer { background: #0F172A; } [data-style="bento"][data-theme="dark"] .style-panel { background: #1E293B; border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.40); } [data-style="bento"][data-theme="dark"] .style-option { color: #CBD5E1; } [data-style="bento"][data-theme="dark"] .style-option.active { color: #FF5A1F; } [data-style="bento"][data-theme="dark"] .style-panel-title { color: #64748B; } [data-style="bento"][data-theme="dark"] .forge-panel { background: linear-gradient(180deg, rgba(15,23,42,0.97), rgba(9,15,28,0.99)); } /* ── CYBERPUNK: light mode variant (base is dark) ─────────── */ [data-style="cyberpunk"][data-theme="light"] { --bg: #E4FFFE; --bg-2: #CCFAF8; --panel: #B8F5F2; --panel-2: #A0EEEA; --glass: rgba(0,200,190,0.12); --glass-hi: rgba(0,200,190,0.22); --line: rgba(0,140,132,0.15); --line-2: rgba(0,140,132,0.28); --line-3: rgba(0,140,132,0.45); --text: #001514; --text-2: #002A28; --text-dim: #004A44; --text-mute: #006A62; --ember: #006058; --ember-2: #008A80; --ember-soft: rgba(0,96,88,0.08); --ok: #007A40; --shadow: 0 20px 60px rgba(0,70,66,0.15); --shadow-e: 0 0 30px rgba(0,200,180,0.15), 0 0 70px rgba(0,200,180,0.06); } [data-style="cyberpunk"][data-theme="light"] body::before { background: radial-gradient(900px 500px at 20% -10%, rgba(0,200,180,0.10), transparent 55%), radial-gradient(700px 400px at 110% 10%, rgba(0,160,200,0.07), transparent 55%); } [data-style="cyberpunk"][data-theme="light"] .topbar { background: rgba(228,255,254,0.92); border-bottom-color: rgba(0,140,132,0.22); } [data-style="cyberpunk"][data-theme="light"] .topbar.scrolled { background: rgba(204,250,248,0.98); } [data-style="cyberpunk"][data-theme="light"] .trk-wrap { background: linear-gradient(180deg, rgba(228,255,254,0.82) 0%, rgba(204,250,248,0.97) 100%); border-top-color: rgba(0,140,132,0.15); } [data-style="cyberpunk"][data-theme="light"] .svc { background: #B8F5F2; border: 1px solid rgba(0,140,132,0.22); } [data-style="cyberpunk"][data-theme="light"] .style-panel { background: #B8F5F2; border-color: rgba(0,140,132,0.30); } [data-style="cyberpunk"][data-theme="light"] .style-option { color: #002A28; } [data-style="cyberpunk"][data-theme="light"] .style-option.active { color: #006058; } [data-style="cyberpunk"][data-theme="light"] .style-option:hover { background: rgba(0,96,88,0.08); color: #001514; } [data-style="cyberpunk"][data-theme="light"] .style-panel-title { color: #006A62; } [data-style="cyberpunk"][data-theme="light"] .style-switcher-btn { color: #004A44; border-color: rgba(0,140,132,0.30); } [data-style="cyberpunk"][data-theme="light"] .forge-panel { background: linear-gradient(180deg, rgba(228,255,254,0.97), rgba(200,248,246,0.99)); } [data-style="cyberpunk"][data-theme="light"] h1.display { animation: none; } [data-style="cyberpunk"][data-theme="light"] .hero-sub::after { color: #006058; } /* ============================================================ CHATBOT — comprehensive light-mode fixes All hardcoded dark values inside the panel need overrides ============================================================ */ /* Panel outer container — light warm background */ [data-theme="light"] .forge-panel { background: linear-gradient(180deg, #FAF8F4 0%, #F2EDE5 100%); border-color: rgba(0,0,0,0.14); box-shadow: 0 20px 60px rgba(0,0,0,0.12); } /* Top accent line: keep the ember color */ [data-theme="light"] .forge-panel::before { background: linear-gradient(90deg, transparent, var(--ember), transparent); } /* Header */ [data-theme="light"] .fp-head { border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .fp-meta b { color: #111111; } [data-theme="light"] .fp-meta small { color: var(--ok); } [data-theme="light"] .fp-head button { color: #666666; } [data-theme="light"] .fp-head button:hover { color: var(--ember); background: rgba(0,0,0,0.05); } /* Bot message bubbles */ [data-theme="light"] .msg.bot { background: #EDEAE3; border-color: rgba(0,0,0,0.10); color: #1A1A1A; } /* User message bubbles — ember bg, keep dark text */ [data-theme="light"] .msg.user { background: var(--ember); color: #FFFFFF; } /* Scope / summary card */ [data-theme="light"] .msg.scope { background: linear-gradient(180deg, rgba(224,77,24,0.05), rgba(224,77,24,0.02)); border-color: rgba(224,77,24,0.22); } /* Chip buttons inside messages */ [data-theme="light"] .msg .chip { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); color: #333333; } [data-theme="light"] .msg .chip:hover { background: var(--ember-soft); border-color: var(--ember); color: var(--ember); } /* Availability badge */ [data-theme="light"] .fa-avail { color: var(--ok); border-color: rgba(26,158,110,0.30); } /* CTA link */ [data-theme="light"] .fc-cta { color: var(--ember); border-color: rgba(224,77,24,0.30); } [data-theme="light"] .fc-cta:hover { background: rgba(224,77,24,0.06); } /* Quick-reply strip */ [data-theme="light"] .fp-quick { border-top-color: rgba(0,0,0,0.10); } [data-theme="light"] .fp-quick button { color: #555555; border-color: rgba(0,0,0,0.15); background: #F2EDE5; } [data-theme="light"] .fp-quick button:hover { border-color: var(--ember); color: var(--ember); background: var(--ember-soft); } /* Input bar */ [data-theme="light"] .fp-input { background: #EDE8E0; border-top-color: rgba(0,0,0,0.10); } [data-theme="light"] .fp-input span { color: var(--ember); } [data-theme="light"] .fp-input input { color: #111111; } [data-theme="light"] .fp-input input::placeholder { color: #999999; } /* Email capture input */ [data-theme="light"] .fce-row input { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #111111; } /* Scrollbar track */ [data-theme="light"] .fp-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); } /* Floating chat button */ [data-theme="light"] .forge-btn { background: rgba(250,248,244,0.95); border-color: rgba(0,0,0,0.15); } [data-theme="light"] .fb-txt b { color: #111111; } /* Proactive bubble */ [data-theme="light"] .forge-bubble { background: rgba(250,248,244,0.97); color: #1A1A1A; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.14), 0 0 24px -4px rgba(224,77,24,0.10); } [data-theme="light"] .forge-bubble::after { background: rgba(250,248,244,0.97); } /* ============================================================ EDITORIAL — chatbot always warm/light regardless of theme toggle (editorial is inherently a paper/light design) ============================================================ */ [data-style="editorial"] .forge-panel { background: linear-gradient(180deg, #F5F0E8 0%, #EDE7DC 100%); border-color: rgba(26,26,26,0.14); box-shadow: 0 20px 60px rgba(0,0,0,0.08); } [data-style="editorial"] .forge-panel::before { background: linear-gradient(90deg, transparent, rgba(26,26,26,0.30), transparent); } [data-style="editorial"] .fp-head { border-bottom-color: rgba(26,26,26,0.10); } [data-style="editorial"] .fp-meta b { color: #1A1A1A; } [data-style="editorial"] .fp-meta small { color: #5A5248; } [data-style="editorial"] .fp-head button { color: #9A9288; } [data-style="editorial"] .msg.bot { background: rgba(26,26,26,0.04); border-color: rgba(26,26,26,0.10); color: #1A1A1A; } [data-style="editorial"] .msg.user { background: #1A1A1A; color: #F5F0E8; } [data-style="editorial"] .msg .chip { background: rgba(26,26,26,0.04); border-color: rgba(26,26,26,0.15); color: #2E2E2E; } [data-style="editorial"] .fa-avail { color: #2D6A4F; border-color: rgba(45,106,79,0.25); } [data-style="editorial"] .fp-quick { border-top-color: rgba(26,26,26,0.08); } [data-style="editorial"] .fp-quick button { color: #5A5248; border-color: rgba(26,26,26,0.15); background: transparent; } [data-style="editorial"] .fp-quick button:hover { border-color: #1A1A1A; color: #1A1A1A; background: rgba(26,26,26,0.04); } [data-style="editorial"] .fp-input { background: rgba(26,26,26,0.04); border-top-color: rgba(26,26,26,0.10); } [data-style="editorial"] .fp-input span { color: #1A1A1A; } [data-style="editorial"] .fp-input input { color: #1A1A1A; } [data-style="editorial"] .fp-input input::placeholder { color: #9A9288; } [data-style="editorial"] .fp-input button { background: #1A1A1A; color: #F5F0E8; } [data-style="editorial"] .fc-cta { color: #1A1A1A; border-color: rgba(26,26,26,0.25); } [data-style="editorial"] .forge-btn { background: rgba(245,240,232,0.95); border-color: rgba(26,26,26,0.15); } [data-style="editorial"] .fb-txt b { color: #1A1A1A; } [data-style="editorial"] .forge-bubble { background: rgba(245,240,232,0.97); color: #1A1A1A; } [data-style="editorial"] .forge-bubble::after { background: rgba(245,240,232,0.97); } /* ============================================================ EDITORIAL — comprehensive DARK MODE overrides Replaces every hardcoded #1A1A1A / #5A5248 / rgba(26,26,26) value so the dark toggle actually changes the whole page. ============================================================ */ /* --- display headlines --- */ [data-style="editorial"][data-theme="dark"] .display em { color: #F0E8DC; text-decoration-color: rgba(240,232,220,0.30); } /* --- hero --- */ [data-style="editorial"][data-theme="dark"] .hero-sub { color: #C4B8A8; border-left-color: rgba(240,232,220,0.30); } [data-style="editorial"][data-theme="dark"] .hero::before { background: #F0E8DC; opacity: 0.18; } [data-style="editorial"][data-theme="dark"] .hero-eyebrow { border-color: rgba(240,232,220,0.20); } /* --- eyebrow labels --- */ [data-style="editorial"][data-theme="dark"] .sec-eyebrow { color: #C4B8A8; } [data-style="editorial"][data-theme="dark"] .sec-eyebrow span { background: #F0E8DC; opacity: 0.5; } /* --- section lead --- */ [data-style="editorial"][data-theme="dark"] .sec-head .sec-lead { color: #C4B8A8; } [data-style="editorial"][data-theme="dark"] .sec-head::before { background: #F0E8DC; opacity: 0.15; } /* --- buttons --- */ [data-style="editorial"][data-theme="dark"] .btn.primary { background: #F0E8DC; color: #1A1410; } [data-style="editorial"][data-theme="dark"] .btn.ghost { border-color: rgba(240,232,220,0.35); color: #F0E8DC; } /* --- services grid --- */ [data-style="editorial"][data-theme="dark"] .svc-grid { border-top: 2px solid rgba(240,232,220,0.30); } [data-style="editorial"][data-theme="dark"] .svc { border-bottom-color: rgba(240,232,220,0.12); border-right-color: rgba(240,232,220,0.12); } [data-style="editorial"][data-theme="dark"] .svc:hover { background: rgba(240,232,220,0.03); } [data-style="editorial"][data-theme="dark"] .svc-head { color: #C4B8A8; } [data-style="editorial"][data-theme="dark"] .svc-num { color: #8C7D6A; } [data-style="editorial"][data-theme="dark"] .svc-copy { color: #C4B8A8; } [data-style="editorial"][data-theme="dark"] .svc-demo { background: rgba(240,232,220,0.04); border-color: rgba(240,232,220,0.12); } [data-style="editorial"][data-theme="dark"] .svc::before { color: rgba(240,232,220,0.07); } /* --- tags --- */ [data-style="editorial"][data-theme="dark"] .tag { border-color: rgba(240,232,220,0.22); color: #C4B8A8; } /* --- case study list --- */ [data-style="editorial"][data-theme="dark"] .case-list { border-top: 2px solid rgba(240,232,220,0.28); } [data-style="editorial"][data-theme="dark"] .cr-num { color: #8C7D6A; } [data-style="editorial"][data-theme="dark"] .cr-metric b { color: #F0E8DC; } /* --- FAQ --- */ [data-style="editorial"][data-theme="dark"] .f-a { color: #C4B8A8; } [data-style="editorial"][data-theme="dark"] .f-plus { border-color: rgba(240,232,220,0.28); } [data-style="editorial"][data-theme="dark"] .faq-row[open] .f-plus { background: #F0E8DC; } /* --- closer / CTA --- */ [data-style="editorial"][data-theme="dark"] .closer-display { color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .closer::before { background-image: linear-gradient(rgba(240,232,220,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(240,232,220,0.07) 1px, transparent 1px); background-size: 60px 60px; } /* --- section watermark numbers --- */ [data-style="editorial"][data-theme="dark"] #services::before, [data-style="editorial"][data-theme="dark"] #scoper::before, [data-style="editorial"][data-theme="dark"] #work::before, [data-style="editorial"][data-theme="dark"] #lab::before, [data-style="editorial"][data-theme="dark"] #faq::before { color: rgba(240,232,220,0.06); } /* --- scoper panel --- */ [data-style="editorial"][data-theme="dark"] .scoper-panel { border-color: rgba(240,232,220,0.18); } /* --- footer --- */ [data-style="editorial"][data-theme="dark"] footer { background: #221E17; border-top: 2px solid rgba(240,232,220,0.28); } [data-style="editorial"][data-theme="dark"] footer::before { background: linear-gradient(90deg, transparent, rgba(240,232,220,0.18), transparent); } [data-style="editorial"][data-theme="dark"] .foot-mono { border-top-color: rgba(240,232,220,0.14); color: #8C7D6A; } /* --- chatbot in editorial dark mode --- */ [data-style="editorial"][data-theme="dark"] .forge-panel { background: linear-gradient(180deg, #2A2420 0%, #221E17 100%); border-color: rgba(240,232,220,0.12); } [data-style="editorial"][data-theme="dark"] .forge-panel::before { background: linear-gradient(90deg, transparent, rgba(240,232,220,0.28), transparent); } [data-style="editorial"][data-theme="dark"] .fp-head { border-bottom-color: rgba(240,232,220,0.10); } [data-style="editorial"][data-theme="dark"] .fp-meta b { color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .fp-meta small { color: #8C7D6A; } [data-style="editorial"][data-theme="dark"] .msg.bot { background: rgba(240,232,220,0.05); border-color: rgba(240,232,220,0.10); color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .msg.user { background: #F0E8DC; color: #1A1410; } [data-style="editorial"][data-theme="dark"] .msg .chip { background: rgba(240,232,220,0.05); border-color: rgba(240,232,220,0.18); color: #D4C8B4; } [data-style="editorial"][data-theme="dark"] .fp-quick { border-top-color: rgba(240,232,220,0.08); } [data-style="editorial"][data-theme="dark"] .fp-quick button { color: #8C7D6A; border-color: rgba(240,232,220,0.15); } [data-style="editorial"][data-theme="dark"] .fp-quick button:hover { border-color: #F0E8DC; color: #F0E8DC; background: rgba(240,232,220,0.05); } [data-style="editorial"][data-theme="dark"] .fp-input { background: rgba(240,232,220,0.04); border-top-color: rgba(240,232,220,0.10); } [data-style="editorial"][data-theme="dark"] .fp-input span { color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .fp-input input { color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .fp-input input::placeholder { color: #5A4D40; } [data-style="editorial"][data-theme="dark"] .fp-input button { background: #F0E8DC; color: #1A1410; } [data-style="editorial"][data-theme="dark"] .forge-btn { background: rgba(42,36,28,0.95); border-color: rgba(240,232,220,0.15); } [data-style="editorial"][data-theme="dark"] .fb-txt b { color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .forge-bubble { background: rgba(42,36,28,0.96); color: #F0E8DC; } [data-style="editorial"][data-theme="dark"] .forge-bubble::after { background: rgba(42,36,28,0.96); } /* ============================================================ COMPREHENSIVE VISIBILITY FIXES Ensures all text is readable in every theme + mode combo. Specificity [0,2,0] or [0,2,1] always wins over single-attr blocks. ============================================================ */ /* ──────────────────────────────────────────────────────────── EDITORIAL DARK — hero text vs orb + page-wide coverage ──────────────────────────────────────────────────────────── */ /* Dim the orb so the large serif headline stays readable */ [data-style="editorial"][data-theme="dark"] .orb-canvas { opacity: 0.25; } /* Ensure hero text sits above orb */ [data-style="editorial"][data-theme="dark"] .hero-inner { position: relative; z-index: 3; } /* Subtle shadow lifts headline off dark orb glow */ [data-style="editorial"][data-theme="dark"] h1.display { text-shadow: 0 2px 40px rgba(26,20,16,0.80); } /* Revealable sections use dark bg */ [data-style="editorial"][data-theme="dark"] .revealable { background: #1A1410; } /* Scoper panel border visible on dark */ [data-style="editorial"][data-theme="dark"] .scoper-panel { background: rgba(240,232,220,0.04); border-color: rgba(240,232,220,0.18); } /* ──────────────────────────────────────────────────────────── NEOBRUTALIST DARK — hardcoded blacks become white/yellow ──────────────────────────────────────────────────────────── */ /* Service card numbers: was black on dark svc bg */ [data-style="neobrutalist"][data-theme="dark"] .svc-num { color: #FFE500; } /* Service hover: white card pops on dark, keep black shadow */ [data-style="neobrutalist"][data-theme="dark"] .svc:hover { background: #1A1A1A; box-shadow: 8px 8px 0 #FFFFFF; } /* Service price badge */ [data-style="neobrutalist"][data-theme="dark"] .svc-price { background: #FFE500; color: #000; border-color: #FFE500; } /* Case rows: white card with black border on dark bg */ [data-style="neobrutalist"][data-theme="dark"] .case-row { background: #FFFFFF; border-color: #FFFFFF !important; box-shadow: 3px 3px 0 #FFFFFF; } [data-style="neobrutalist"][data-theme="dark"] .case-row:hover { background: #FFE500; box-shadow: 6px 6px 0 #FFE500; } /* Text inside white case rows stays dark */ [data-style="neobrutalist"][data-theme="dark"] .cr-metric b { color: #000; } [data-style="neobrutalist"][data-theme="dark"] .cr-meta b { color: #000; } [data-style="neobrutalist"][data-theme="dark"] .cr-num { color: #333; } /* FAQ: yellow open row, black text inside */ [data-style="neobrutalist"][data-theme="dark"] .faq-row[open] { background: #FFE500; } [data-style="neobrutalist"][data-theme="dark"] .faq-row[open] .f-q, [data-style="neobrutalist"][data-theme="dark"] .faq-row[open] .f-a, [data-style="neobrutalist"][data-theme="dark"] .faq-row[open] .f-plus { color: #000; } /* Tags */ [data-style="neobrutalist"][data-theme="dark"] .tag { background: transparent; border-color: #FFFFFF; color: #FFFFFF; } /* Ticker */ [data-style="neobrutalist"][data-theme="dark"] .trk-wrap { background: #111111; border-top-color: #FFFFFF; } /* ──────────────────────────────────────────────────────────── GLASSMORPHISM LIGHT — white text on lavender = invisible ──────────────────────────────────────────────────────────── */ /* Closer section: hardcoded white text won't show on lavender */ [data-style="glassmorphism"][data-theme="light"] .closer-display { color: #1A0A3A; text-shadow: none; } [data-style="glassmorphism"][data-theme="light"] .closer-meta span { color: rgba(26,10,58,0.65); } [data-style="glassmorphism"][data-theme="light"] .closer-meta b { color: #0E86A0; } [data-style="glassmorphism"][data-theme="light"] .closer { background: none; border-top-color: rgba(100,50,200,0.15); } /* Footer: dark bg is fine on light page, but text colors */ [data-style="glassmorphism"][data-theme="light"] footer { background: rgba(235,229,247,0.90); border-top-color: rgba(100,50,200,0.18); } [data-style="glassmorphism"][data-theme="light"] .foot-mono { color: rgba(26,10,58,0.55); } /* Scoper panel */ [data-style="glassmorphism"][data-theme="light"] .scoper-panel { background: rgba(255,255,255,0.55); border-color: rgba(100,50,200,0.18); } /* Dossier modal on light */ [data-style="glassmorphism"][data-theme="light"] .dossier-card { background: rgba(235,229,247,0.96); border-color: rgba(100,50,200,0.22); color: #1A0A3A; } /* Lab cards with noise effect — keep dark bg for contrast on light */ [data-style="glassmorphism"][data-theme="light"] .lab-card { background: rgba(255,255,255,0.55); border-color: rgba(100,50,200,0.15); } /* Glassmorphism svc titles + copy on light */ [data-style="glassmorphism"][data-theme="light"] .svc-title { color: #1A0A3A; } [data-style="glassmorphism"][data-theme="light"] .svc-copy { color: #2E1A50; } /* FAQ on light */ [data-style="glassmorphism"][data-theme="light"] .f-q { color: #1A0A3A; } [data-style="glassmorphism"][data-theme="light"] .f-a { color: #2E1A50; } [data-style="glassmorphism"][data-theme="light"] .faq-row[open] { background: rgba(255,255,255,0.55); } /* Orb canvas stays visible but subtler on light */ [data-style="glassmorphism"][data-theme="light"] .orb-canvas { opacity: 0.60; } /* ──────────────────────────────────────────────────────────── BENTO DARK — hardcoded light colors invisible on navy ──────────────────────────────────────────────────────────── */ /* Ticker hardcoded dark navy text */ [data-style="bento"][data-theme="dark"] .trk-wrap { background: rgba(15,23,42,0.95); border-top-color: rgba(255,255,255,0.10); } [data-style="bento"][data-theme="dark"] .trk-tk { color: #CBD5E1; } /* Case rows: hardcoded dark text + white bg for nav */ [data-style="bento"][data-theme="dark"] .case-row { background: #1E293B; border-color: rgba(255,255,255,0.08) !important; } [data-style="bento"][data-theme="dark"] .cr-meta b { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .cr-num { color: #FF5A1F; } /* Lab cards */ [data-style="bento"][data-theme="dark"] .lab-card { background: #1E293B; border: 1px solid rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .lab-head b { color: #F1F5F9; } /* Bento forge-panel chatbot: keep white */ [data-style="bento"][data-theme="dark"] .forge-panel { background: linear-gradient(180deg, rgba(15,23,42,0.97), rgba(9,15,28,0.99)); border-radius: 24px; } [data-style="bento"][data-theme="dark"] .forge-btn { background: rgba(30,41,59,0.95); border-color: rgba(255,255,255,0.12); } [data-style="bento"][data-theme="dark"] .fb-txt b { color: #F1F5F9; } /* Tags in bento dark */ [data-style="bento"][data-theme="dark"] .tag { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #94A3B8; } /* Scoper panel */ [data-style="bento"][data-theme="dark"] .scoper-panel { background: #1E293B; border-color: rgba(255,255,255,0.10); } /* ──────────────────────────────────────────────────────────── CYBERPUNK LIGHT — neon on pale cyan needs toning down ──────────────────────────────────────────────────────────── */ /* Scanlines: turn off entirely — neon on pale = visual noise */ [data-style="cyberpunk"][data-theme="light"] .scanlines { opacity: 0 !important; } /* HUD elements: reduce to minimal */ [data-style="cyberpunk"][data-theme="light"] .hud { opacity: 0.20; } /* Section watermark numbers: dark teal instead of neon */ [data-style="cyberpunk"][data-theme="light"] #services::before, [data-style="cyberpunk"][data-theme="light"] #scoper::before, [data-style="cyberpunk"][data-theme="light"] #work::before, [data-style="cyberpunk"][data-theme="light"] #lab::before, [data-style="cyberpunk"][data-theme="light"] #faq::before { color: rgba(0,96,88,0.06); } /* Sec-eyebrow accent line */ [data-style="cyberpunk"][data-theme="light"] .sec-eyebrow::before { color: #006058; } /* Nav links: neon on pale bg */ [data-style="cyberpunk"][data-theme="light"] .nav-link { color: #004A44; } [data-style="cyberpunk"][data-theme="light"] .nav-link:hover { color: #006058; } /* Svc card hover glow: soften for light bg */ [data-style="cyberpunk"][data-theme="light"] .svc:hover { box-shadow: 4px 4px 0 rgba(0,96,88,0.35); border-color: rgba(0,96,88,0.40); } /* Svc head terminal bar */ [data-style="cyberpunk"][data-theme="light"] .svc-head { background: rgba(0,96,88,0.08); border-bottom-color: rgba(0,96,88,0.18); } [data-style="cyberpunk"][data-theme="light"] .svc-head::before { color: #006058; } /* Sec lead code prompt */ [data-style="cyberpunk"][data-theme="light"] .sec-head .sec-lead::before { color: #006058; } /* FAQ */ [data-style="cyberpunk"][data-theme="light"] .faq-row[open] .f-plus { background: #006058; } [data-style="cyberpunk"][data-theme="light"] .f-q { color: #001514; } [data-style="cyberpunk"][data-theme="light"] .f-a { color: #002A28; } /* Closer section */ [data-style="cyberpunk"][data-theme="light"] .closer-display { color: #001514; } [data-style="cyberpunk"][data-theme="light"] .closer-eyebrow { color: #006058; } [data-style="cyberpunk"][data-theme="light"] .closer::before { background: none; } /* Footer */ [data-style="cyberpunk"][data-theme="light"] footer { background: rgba(228,255,254,0.90); border-top-color: rgba(0,140,132,0.20); } [data-style="cyberpunk"][data-theme="light"] footer a { color: #004A44; } [data-style="cyberpunk"][data-theme="light"] footer a:hover { color: #006058; } /* Tags */ [data-style="cyberpunk"][data-theme="light"] .tag { border-color: rgba(0,96,88,0.25); color: #004A44; background: rgba(0,96,88,0.06); } /* Orb canvas: still visible but softened */ [data-style="cyberpunk"][data-theme="light"] .orb-canvas { opacity: 0.50; } /* ──────────────────────────────────────────────────────────── OPERATOR LIGHT — cover any remaining hardcoded darks ──────────────────────────────────────────────────────────── */ /* Mobile nav dropdown: hardcoded dark bg */ [data-theme="light"] .mobile-nav { background: rgba(245,243,239,0.96); border-bottom-color: rgba(0,0,0,0.10); } [data-theme="light"] .mn-link { color: #333333; border-bottom-color: rgba(0,0,0,0.08); } /* Dossier modal on light */ [data-theme="light"] .dossier-card { background: rgba(245,243,239,0.97); border-color: rgba(0,0,0,0.12); } [data-theme="light"] .dossier-close { color: #444444; } /* ============================================================ BENTO DARK MODE — comprehensive hardcoded value overrides Every #F8F9FB / #FFFFFF / #0F172A / #475569 in bento deep CSS is replaced here for dark mode. ============================================================ */ /* Hero section: hardcoded white background */ [data-style="bento"][data-theme="dark"] .hero { background: #0F172A; } /* Hero headline: hardcoded dark navy */ [data-style="bento"][data-theme="dark"] h1.display { color: #F1F5F9; } /* Hero sub-text: hardcoded slate */ [data-style="bento"][data-theme="dark"] .hero-sub { color: #94A3B8; } /* Section lead text */ [data-style="bento"][data-theme="dark"] .sec-head .sec-lead { color: #94A3B8; } /* Service card titles and copy */ [data-style="bento"][data-theme="dark"] .svc-title { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .svc-copy { color: #94A3B8; } /* Service tile per-card gradients → dark tinted */ [data-style="bento"][data-theme="dark"] .svc:nth-child(1) { background: linear-gradient(145deg, #1e2a3a 0%, #1E293B 55%); border-color: rgba(255,90,31,0.22); } [data-style="bento"][data-theme="dark"] .svc:nth-child(2) { background: linear-gradient(145deg, #0f2028 0%, #1E293B 55%); border-color: rgba(16,185,129,0.20); } [data-style="bento"][data-theme="dark"] .svc:nth-child(3) { background: linear-gradient(145deg, #16132a 0%, #1E293B 55%); border-color: rgba(139,92,246,0.20); } [data-style="bento"][data-theme="dark"] .svc:nth-child(4) { background: linear-gradient(145deg, #221a0f 0%, #1E293B 55%); border-color: rgba(245,158,11,0.20); } /* Demo blocks inside cards */ [data-style="bento"][data-theme="dark"] .svc-demo { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .svc-foot { border-top-color: rgba(255,255,255,0.08); } /* Dot grid: invert from dark-on-white to light-on-dark */ [data-style="bento"][data-theme="dark"] body::after { background-image: radial-gradient(rgba(241,245,249,0.07) 1px, transparent 1px); } /* Case row tiles */ [data-style="bento"][data-theme="dark"] .case-row { background: #1E293B; border-color: rgba(255,255,255,0.07) !important; } [data-style="bento"][data-theme="dark"] .cr-meta b { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .cr-meta small { color: #94A3B8; } /* FAQ question and answer text */ [data-style="bento"][data-theme="dark"] .f-q { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .f-a { color: #94A3B8; } [data-style="bento"][data-theme="dark"] .f-plus { border-color: rgba(255,255,255,0.18); } [data-style="bento"][data-theme="dark"] .faq-row { background: #1E293B; border-color: rgba(255,255,255,0.07); } /* Closer / CTA section: hardcoded white */ [data-style="bento"][data-theme="dark"] .closer { background: #0F172A; border-top-color: rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .closer-display { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .closer-meta span { color: #94A3B8; } [data-style="bento"][data-theme="dark"] .closer-meta b { color: #F1F5F9; } /* Footer: hardcoded white + light bg */ [data-style="bento"][data-theme="dark"] footer { background: #0F172A; border-top-color: rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .foot-mono { background: #0A111E; color: #475569; border-top-color: rgba(255,255,255,0.07); } [data-style="bento"][data-theme="dark"] footer h5 { color: #CBD5E1; } [data-style="bento"][data-theme="dark"] footer a { color: #94A3B8; } [data-style="bento"][data-theme="dark"] footer a:hover { color: #FF5A1F; } /* Scoper panel */ [data-style="bento"][data-theme="dark"] .scoper-panel { background: #1E293B; border-color: rgba(255,255,255,0.10); } [data-style="bento"][data-theme="dark"] .scoper-stats b { color: #F1F5F9; } /* Tags */ [data-style="bento"][data-theme="dark"] .tag { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #94A3B8; } /* Lab cards */ [data-style="bento"][data-theme="dark"] .lab-card { background: #1E293B; border-color: rgba(255,255,255,0.08); } [data-style="bento"][data-theme="dark"] .lab-head b { color: #F1F5F9; } [data-style="bento"][data-theme="dark"] .lh-status { background: rgba(255,255,255,0.06); } /* Dossier card modal */ [data-style="bento"][data-theme="dark"] .dossier-card { background: #1E293B; border-color: rgba(255,255,255,0.12); }