/* ============================================ Compass Financial Technologies - Modern CSS ============================================ */ /* --- CSS Variables --- */ :root { /* Core colors — deeper, richer dark for premium feel */ --bg-primary: #07080c; --bg-secondary: #0d0f16; --bg-tertiary: #141720; --bg-elevated: #1a1e2b; /* Surface colors with glass effect — stronger depth */ --glass-bg: rgba(255, 255, 255, 0.035); --glass-border: rgba(255, 255, 255, 0.07); --glass-hover: rgba(255, 255, 255, 0.08); /* Accent colors — indigo + warm gold (Singapore twilight) */ --accent-primary: #6366f1; --accent-secondary: #8b5cf6; --accent-tertiary: #a78bfa; --accent-warm: #f59e0b; --accent-warm-glow: rgba(245, 158, 11, 0.12); --accent-glow: rgba(99, 102, 241, 0.2); /* Gradient */ --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a78bfa 100%); --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%); --gradient-text: linear-gradient(135deg, #e0e7ff 0%, #6366f1 45%, #8b5cf6 70%, #a78bfa 100%); --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Text colors */ --text-primary: #fafafa; --text-secondary: #9ca3af; --text-tertiary: #6b7280; --text-muted: #4b5563; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.07); --border-medium: rgba(255, 255, 255, 0.12); /* Scrim — the RGB components (no alpha) of --bg-primary, for translucent dark-to-transparent overlays (nav scrim, mobile menu, section-background tint) that need an alpha channel var(--bg-primary) alone can't provide. Keep this in sync with --bg-primary in every theme override below. */ --scrim-rgb: 7, 8, 12; /* Header scrim — same idea, but for the top navbar specifically. Defaults to the same value as --scrim-rgb (identical look), but a theme can override just this one to keep the header a deliberately dark/branded bar instead of following the rest of the page's own background. */ --header-scrim-rgb: 7, 8, 12; /* Spacing */ --section-padding: 120px; --container-max: 1200px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.15); --shadow-warm-glow: 0 0 60px rgba(245, 158, 11, 0.08); /* Market/data semantics */ --price-up: #22c55e; --price-down: #ef4444; /* Section wave divider */ --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q360,50 720,30 Q1080,10 1440,30 L1440,60 L0,60 Z' fill='black'/%3E%3C/svg%3E"); } /* --- Theme Presets --- The default look (midnight-indigo) needs no override block — it's the :root above. Each preset here is selected by stamping data-theme="" on (see settings.theme); an unrecognized or missing value simply matches no block and falls back to the default, so this is safe by construction. */ :root[data-theme="slate-teal"] { --bg-primary: #05090a; --bg-secondary: #0a1012; --bg-tertiary: #101a1d; --bg-elevated: #162226; --scrim-rgb: 5, 9, 10; --header-scrim-rgb: 5, 9, 10; --accent-primary: #14b8a6; --accent-secondary: #0ea5e9; --accent-tertiary: #67e8f9; --accent-glow: rgba(20, 184, 166, 0.2); --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 60%, #67e8f9 100%); --gradient-subtle: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%); --gradient-text: linear-gradient(135deg, #ccfbf1 0%, #14b8a6 45%, #0ea5e9 70%, #67e8f9 100%); --shadow-glow: 0 0 60px rgba(20, 184, 166, 0.15); } :root[data-theme="warm-amber"] { --bg-primary: #0c0805; --bg-secondary: #120c07; --bg-tertiary: #19110a; --bg-elevated: #21160d; --scrim-rgb: 12, 8, 5; --header-scrim-rgb: 12, 8, 5; --accent-primary: #f59e0b; --accent-secondary: #ea580c; --accent-tertiary: #fbbf24; --accent-glow: rgba(245, 158, 11, 0.2); --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #ea580c 60%, #fbbf24 100%); --gradient-subtle: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(234, 88, 12, 0.08) 100%); --gradient-text: linear-gradient(135deg, #fef3c7 0%, #f59e0b 45%, #ea580c 70%, #fbbf24 100%); --shadow-glow: 0 0 60px rgba(245, 158, 11, 0.15); } :root[data-theme="emerald"] { --bg-primary: #050a07; --bg-secondary: #0a120d; --bg-tertiary: #101a14; --bg-elevated: #16221a; --scrim-rgb: 5, 10, 7; --header-scrim-rgb: 5, 10, 7; --accent-primary: #10b981; --accent-secondary: #16a34a; --accent-tertiary: #6ee7b7; --accent-glow: rgba(16, 185, 129, 0.2); --gradient-primary: linear-gradient(135deg, #10b981 0%, #16a34a 60%, #6ee7b7 100%); --gradient-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(22, 163, 74, 0.08) 100%); --gradient-text: linear-gradient(135deg, #d1fae5 0%, #10b981 45%, #16a34a 70%, #6ee7b7 100%); --shadow-glow: 0 0 60px rgba(16, 185, 129, 0.15); } /* daylight is the one light preset — text/glass/border variables flip direction (dark-on-light instead of light-on-dark), and the two non-variable-driven "lighten" selectors below get an explicit dark-tinted counterpart. Hero visual panels (.terminal-panel / .hero-visual-panel and everything inside them) are deliberately left dark in every theme, including this one — a dark accent card, not a light-mode gap. */ :root[data-theme="daylight"] { --bg-primary: #f5f6fa; /* Noticeably more than a shade off --bg-primary — this is what makes alternating sections (.solutions, .technology, .trust-strip, product cards, etc.) actually read as separate bands instead of blurring into one flat page, the way the original near-white value did. */ --bg-secondary: #e4e7f0; --bg-tertiary: #d8dce8; --bg-elevated: #ffffff; --scrim-rgb: 245, 246, 250; /* Matches you.co/biz's own sticky-header background (rgb(240,240,240)) — their header reads as distinct via purple link/logo text color, not via a colored background block. */ --header-scrim-rgb: 240, 240, 240; --glass-bg: rgba(0, 0, 0, 0.03); --glass-border: rgba(0, 0, 0, 0.08); --glass-hover: rgba(0, 0, 0, 0.06); /* Accents matched to the you.co/biz Elementor kit: primary purple #6D37AC, deep purple #3E296A, accent teal #00D6A9 (their global colors). The "warm" slot maps to their teal accent, darkened slightly where it carries text so it stays readable on the light background. */ --accent-primary: #6d37ac; --accent-secondary: #8a53c9; --accent-tertiary: #5a2d91; --accent-warm: #00a98a; --accent-warm-glow: rgba(0, 214, 169, 0.15); --accent-glow: rgba(109, 55, 172, 0.15); --gradient-primary: linear-gradient(135deg, #6d37ac 0%, #8a53c9 60%, #5a2d91 100%); --gradient-subtle: linear-gradient(135deg, rgba(109, 55, 172, 0.08) 0%, rgba(62, 41, 106, 0.06) 100%); --gradient-text: linear-gradient(135deg, #3e296a 0%, #6d37ac 45%, #8a53c9 70%, #5a2d91 100%); --gradient-warm: linear-gradient(135deg, #00d6a9 0%, #00a98a 100%); --shadow-glow: 0 0 60px rgba(109, 55, 172, 0.12); /* Heading/body colors matched to the you.co/biz reference: headings in the same muted indigo used for the bold section bands (#3E296A) so type and section color read as one deliberate system, body text in a neutral warm gray instead of the cooler navy-tinted gray used before. */ --text-primary: #3e296a; --text-secondary: #3a3a3a; --text-tertiary: #6b6b6b; --text-muted: #9a9a9a; --border-subtle: rgba(0, 0, 0, 0.08); --border-medium: rgba(0, 0, 0, 0.14); } [data-theme="daylight"] .btn-outline:hover { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); } [data-theme="daylight"] .ticker-strip { background: rgba(0, 0, 0, 0.02); } /* A light-tinted overlay doesn't suppress a busy/colorful photo anywhere near as effectively as the default dark tint does (the ::after wash still lets plenty of the image's own color and contrast show through) — so on top of that wash, mute the image layer itself, the same technique .hero-bg already uses successfully via its own opacity. */ [data-theme="daylight"] .module-section-bg { opacity: 0.1; } /* Bold alternating sections — now that the header itself is light (see below), Hero needs to open on the bold color instead of another light block, so the whole alternation shifts by one: Hero, Solutions, Testimonials, and About are bold; Products, Technology, and Contact stay light in between (Footer, further below, is also bold — About and Footer end up adjacent, both bold, since 7 content sections is an odd count and alternation has to break somewhere; that was chosen over leaving Contact and About adjacent and both light). Where a section has its own background IMAGE configured, that image sits on top of this flat color in the DOM, so its own overlay is tinted purple too here instead of fighting to hide the image under a flat color that would never actually be visible. */ [data-theme="daylight"] .hero, [data-theme="daylight"] .solutions, [data-theme="daylight"] .testimonials, [data-theme="daylight"] .about { background: linear-gradient(135deg, #3e296a 0%, #35235a 100%); } [data-theme="daylight"] .solutions .module-section-bg::after, [data-theme="daylight"] .testimonials .module-section-bg::after, [data-theme="daylight"] .about .module-section-bg::after, [data-theme="daylight"] .hero-bg::after { background: linear-gradient(135deg, rgba(62, 41, 106, 0.82) 0%, rgba(53, 35, 90, 0.82) 100%); } [data-theme="daylight"] .solutions::before { background: #3e296a; } /* Tags on the dark purple bands: plain light text, no pill (see .section-tag) */ [data-theme="daylight"] .hero-badge, [data-theme="daylight"] .solutions .section-tag, [data-theme="daylight"] .testimonials .section-tag, [data-theme="daylight"] .about .section-tag { color: rgba(255, 255, 255, 0.85); } [data-theme="daylight"] .hero-title, [data-theme="daylight"] .solutions .section-title, [data-theme="daylight"] .testimonials .section-title, [data-theme="daylight"] .about .section-title { color: #fff; } [data-theme="daylight"] .hero-subtitle, [data-theme="daylight"] .solutions .section-subtitle, [data-theme="daylight"] .testimonials .section-subtitle { color: rgba(255, 255, 255, 0.75); } /* The gradient heading line normally reads dark-purple-on-light; against the now-bold hero it needs a light gradient instead so it still reads as an accented highlight rather than vanishing into the background. */ [data-theme="daylight"] .title-gradient { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="daylight"] .stat-number { color: #fff; } [data-theme="daylight"] .stat-label { color: rgba(255, 255, 255, 0.65); } [data-theme="daylight"] .stat-divider { background: rgba(255, 255, 255, 0.25); } [data-theme="daylight"] .hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.4); } [data-theme="daylight"] .hero .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); } /* Solutions cards keep all their existing internals (icons, text, tags) unchanged — only the card surface itself switches to solid white, so it still pops the same way against a bold background. */ [data-theme="daylight"] .solutions .solution-card { background: #fff; border-color: rgba(255, 255, 255, 0.3); } /* About's paragraphs sit directly on the section background (no card), so they need their own light override. The value-item mini-cards switch to solid white like the other card grids; the code-block visual already renders as a light --bg-secondary/--bg-tertiary card (the same "light island floating on bold" treatment used for the Contact form) and just needs a light-tinted border/shadow to stay legible against the new background. */ [data-theme="daylight"] .about-text { color: rgba(255, 255, 255, 0.75); } [data-theme="daylight"] .about .value-item { background: #fff; border-color: rgba(255, 255, 255, 0.3); } [data-theme="daylight"] .about .visual-card { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); } /* Testimonials has no card wrapper at all — its text sits directly on the section background — so every text/control color needs its own light-on-bold override here. */ [data-theme="daylight"] .testimonials .testimonial-quote { color: #fff; } [data-theme="daylight"] .testimonials .testimonial-text { color: rgba(255, 255, 255, 0.85); } [data-theme="daylight"] .testimonials .testimonial-name { color: #fff; } [data-theme="daylight"] .testimonials .testimonial-role { color: rgba(255, 255, 255, 0.6); } [data-theme="daylight"] .testimonials .testimonial-arrow { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; } [data-theme="daylight"] .testimonials .testimonial-dot { background: rgba(255, 255, 255, 0.3); } [data-theme="daylight"] .testimonials .testimonial-dot.active { background: #fff; } /* Footer gets the same bold treatment as Products/Technology/Contact — same principle, applied to the page's closing band instead of a content section. */ [data-theme="daylight"] .footer { background: linear-gradient(180deg, #3e296a 0%, #35235a 100%); border-top-color: rgba(255, 255, 255, 0.15); } [data-theme="daylight"] .footer .nav-brand { color: #fff; } [data-theme="daylight"] .footer-tagline, [data-theme="daylight"] .footer-links a { color: rgba(255, 255, 255, 0.65); } [data-theme="daylight"] .footer-links h4 { color: #fff; } [data-theme="daylight"] .footer-links a:hover { color: #fff; } [data-theme="daylight"] .footer-bottom { color: rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.15); } [data-theme="daylight"] .footer-legal a { color: rgba(255, 255, 255, 0.55); } [data-theme="daylight"] .footer-legal a:hover { color: #fff; } /* you.co/biz's own header is transparent-over-white at the top and a light neutral gray once sticky/scrolled (rgb(240,240,240)) — not a colored bar. Its "pop" comes entirely from the nav links themselves being a saturated purple, not from the background. --header-scrim-rgb is set to that light gray above, so .navbar.scrolled::before (light, blurred) already does the right thing once scrolled. The unscrolled base .navbar gradient, though, assumed "transparent over white" would always hold — true for you.co/biz, not for us: hero (and other alternating sections) render as a bold dark band in this theme, and it's no longer guaranteed hero stays second (behind a lighter section like the ticker strip) rather than first. A translucent gradient over that dark band reads as a washed-out indigo header instead of the light one this theme is supposed to have, so make it solid instead of relying on whatever happens to be behind it. */ [data-theme="daylight"] .navbar { background: rgba(var(--header-scrim-rgb), 0.95); } [data-theme="daylight"] .navbar .nav-brand, [data-theme="daylight"] .navbar .nav-link { color: #6d37ac; } [data-theme="daylight"] .navbar .nav-link:hover, [data-theme="daylight"] .navbar .nav-link.active { color: #3e296a; background: rgba(109, 55, 172, 0.1); } [data-theme="daylight"] .navbar .hamburger span { background: #6d37ac; } /* ink is the second light preset — a minimalist monochrome look in the style of modern developer-tool landing pages (hermes-agent.org was the reference): pure white page, near-black "ink" (Tailwind gray-900 #111827) doing the job an accent color normally does — headings, solid dark buttons, icon tiles — a neutral gray text scale, hairline gray borders, and terminal green as the only real color note. Unlike daylight there are no bold color bands: every section stays light, and the always-dark hero terminal panel provides the page's dark accent, the same role the dark code blocks play on the reference site. */ :root[data-theme="ink"] { --bg-primary: #ffffff; /* gray-50 — the alternating section band color of the reference look; one visible step off white without reading as a different color. */ --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-elevated: #ffffff; --scrim-rgb: 255, 255, 255; --header-scrim-rgb: 255, 255, 255; --glass-bg: rgba(17, 24, 39, 0.02); --glass-border: rgba(17, 24, 39, 0.08); --glass-hover: rgba(17, 24, 39, 0.05); /* The "accent" is ink itself — gray-900 through gray-600 — so every component that colors itself from the accent slots (buttons, icon tiles, link hovers, gradients) comes out monochrome by construction. The warm slot carries the one deliberate color: terminal green. */ --accent-primary: #111827; --accent-secondary: #374151; --accent-tertiary: #4b5563; --accent-warm: #16a34a; --accent-warm-glow: rgba(22, 163, 74, 0.12); --accent-glow: rgba(17, 24, 39, 0.1); --gradient-primary: linear-gradient(135deg, #111827 0%, #1f2937 100%); --gradient-subtle: linear-gradient(135deg, rgba(17, 24, 39, 0.05) 0%, rgba(17, 24, 39, 0.02) 100%); /* Headings on the reference site are flat near-black, not gradient — a barely-there ink-to-gray ramp keeps the .title-gradient markup working while reading as solid bold type. */ --gradient-text: linear-gradient(135deg, #111827 0%, #1f2937 60%, #374151 100%); --gradient-warm: linear-gradient(135deg, #16a34a 0%, #15803d 100%); --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #6b7280; --text-muted: #9ca3af; --border-subtle: rgba(17, 24, 39, 0.08); --border-medium: rgba(17, 24, 39, 0.15); /* Light-mode shadows: soft gray, no colored glow. */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06); --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08); --shadow-lg: 0 12px 48px rgba(17, 24, 39, 0.12); --shadow-glow: 0 0 60px rgba(17, 24, 39, 0.06); --shadow-warm-glow: 0 0 60px rgba(22, 163, 74, 0.06); } /* Same three light-mode fixes daylight needs (white-tinted hardcodes that vanish or glare on a light page), with ink-tinted values. */ [data-theme="ink"] .btn-outline:hover { border-color: rgba(17, 24, 39, 0.25); background: rgba(17, 24, 39, 0.03); } [data-theme="ink"] .ticker-strip { background: rgba(17, 24, 39, 0.02); } [data-theme="ink"] .module-section-bg { opacity: 0.1; } /* The scrolled-navbar backdrop and bottom accent line hardcode an indigo/amber tint; on a monochrome white header that reads as a stray color wash, so both go neutral here. */ [data-theme="ink"] .navbar.scrolled::before { background: rgba(var(--header-scrim-rgb), 0.92); } [data-theme="ink"] .navbar::after { background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.18), transparent); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* html, not just body, is the actual page-level scrolling root — without this, decorative elements that intentionally bleed off-screen (see .bg-orbs) can still cause the whole page to scroll horizontally. */ overflow-x: hidden; } /* Accessible, consistent focus states */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-tertiary); outline-offset: 3px; border-radius: 4px; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* you.co/biz body copy renders at 15px (Astra's 1rem), not the browser default 16px. Set on body, not html, so the site's rem-based component sizes (already matched to the reference in px) are unaffected. */ font-size: 0.9375rem; background-color: var(--bg-primary); color: var(--text-secondary); line-height: 1.6; overflow-x: hidden; padding-top: 48px; } /* --- Noise Texture Overlay --- */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* --- Background Orbs --- */ .bg-orbs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.3; animation: orbFloat 20s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%); top: -200px; right: -100px; animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%); bottom: -150px; left: -100px; animation-delay: -7s; } .orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -14s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.02); } } /* --- Container --- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* --- Navigation --- */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 6px 0; transition: all var(--transition-base); background-color: rgba(var(--header-scrim-rgb), 0.95); } .navbar.scrolled { padding: 4px 0; } /* --- Mobile menu fullscreen overlay --- */ .mobile-menu-overlay { display: none; } /* --- Market/System Ticker Strip --- */ .ticker-strip { position: relative; z-index: 2; margin-top: 8px; padding: 10px 0; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border-subtle); } .ticker-track { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .ticker-content { display: flex; gap: 40px; width: max-content; animation: marqueeScroll 38s linear infinite; } .ticker-strip:hover .ticker-content { animation-play-state: paused; } .ticker-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; letter-spacing: 0.02em; white-space: nowrap; } .ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--price-up); box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); flex-shrink: 0; } .ticker-label { color: var(--text-tertiary); font-weight: 600; } .ticker-value { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; } .ticker-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; } .ticker-delta.good { color: var(--price-up); } .ticker-delta.bad { color: var(--price-down); } @media (max-width: 768px) { .ticker-strip { margin-top: 8px; } } .nav-container { display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: 1.4rem; letter-spacing: normal; } .brand-icon { flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9375rem; font-weight: 400; padding: 8px 16px; border-radius: 8px; transition: all var(--transition-fast); position: relative; } .nav-link:hover { color: var(--text-primary); background: var(--glass-hover); } .nav-link.active { color: var(--text-primary); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: none; cursor: pointer; transition: all var(--transition-base); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); color: white; padding: 10px 20px; border-radius: 10px; box-shadow: 0 2px 12px var(--accent-glow); position: relative; overflow: hidden; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35); } .btn-primary:active { transform: translateY(0); } .btn-primary::after { content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.7s ease; pointer-events: none; } .btn-primary:hover::after { left: 130%; } .btn-outline { background: transparent; color: var(--text-secondary); padding: 10px 20px; border-radius: 10px; border: 1px solid var(--border-medium); transition: all var(--transition-base); } .btn-outline:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); } .btn-sm { padding: 8px 16px; font-size: 0.85rem; } .btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: 12px; } .btn-full { width: 100%; justify-content: center; } /* --- Hamburger --- */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: all var(--transition-base); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* --- Hero Section --- */ .hero { min-height: 100vh; display: flex; /* Vertical centering comes from .hero-container's own auto margins below, not align-items — see the comment there for why. */ justify-content: center; padding: 24px 24px 80px; position: relative; overflow: hidden; } @keyframes drawChartLine { to { stroke-dashoffset: 0; } } /* An optional, subtle backdrop image (swappable in the WYSIWYG editor) — kept low-opacity so it reads as texture behind the terminal panel rather than competing with it as the hero's primary visual. */ .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; background-repeat: no-repeat; z-index: 0; opacity: 0.16; will-change: transform; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--scrim-rgb), 0.4) 40%, var(--bg-primary) 100%); } .hero .hero-container { position: relative; z-index: 1; /* Center vertically via auto margins instead of the parent's align-items: when content is taller than the available space (long heading/paragraph, hero-grid stacked to one column on tablet, a big stats row — any of which is now possible since hero can no longer assume a module like the ticker strip is reserving clearance above it), align-items: center overflows symmetrically past BOTH padding edges, pushing content above padding-top and behind the fixed navbar. Auto margins resolve to 0 instead of going negative, so the box can only ever overflow the bottom padding — the top always respects padding-top. */ margin-top: auto; margin-bottom: auto; } /* Per-section background image, used by products/solutions/about/technology/ contact/rich-text/marquee/testimonials in addition to the hero. */ .module-section-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .module-section-bg::after { content: ''; position: absolute; inset: 0; background: rgba(var(--scrim-rgb), 0.85); } .rich-text-section, .marquee-section, .testimonials { position: relative; } /* .marquee-track has no explicit z-index of its own, so without this it would render behind (invisible under) a z-indexed .module-section-bg sibling. */ .marquee-track { position: relative; z-index: 1; } .hero-container { margin: 0 auto; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 64px; text-align: left; max-width: 1200px; } .hero-copy { min-width: 0; } /* Same plain-eyebrow treatment as .section-tag — the badge text is a tagline, not live status, so it gets no pill chrome either. */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-tertiary); margin-bottom: 28px; animation: fadeInDown 0.6s ease-out; } .badge-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero-title { font-size: clamp(2rem, 3.8vw, 3.125rem); /* Poppins 600 with default tracking is the you.co/biz heading voice — heavier weights + negative tracking read as a different typeface. */ font-weight: 600; line-height: 1.15; letter-spacing: normal; color: var(--text-primary); margin-bottom: 20px; animation: fadeInUp 0.6s ease-out 0.1s both; } .title-line { display: block; } .title-gradient { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Typing animation for hero gradient text */ .typed-text { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; animation: typing 1.8s steps(30, end) 0.8s forwards; vertical-align: bottom; } .typed-text::after { content: ''; display: inline-block; width: 3px; height: 1.15em; background: var(--accent-tertiary); margin-left: 4px; vertical-align: text-bottom; border-radius: 2px; animation: blink 0.8s step-end 2.6s infinite; opacity: 0; } @keyframes typing { from { max-width: 0; } to { max-width: 2000px; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .hero-subtitle { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-secondary); max-width: 560px; margin: 0 0 36px; line-height: 1.7; animation: fadeInUp 0.6s ease-out 0.2s both; } .hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 64px; animation: fadeInUp 0.6s ease-out 0.3s both; flex-wrap: wrap; } .hero-stats { display: flex; align-items: center; justify-content: flex-start; gap: 32px; padding: 32px 0 0; border-top: 1px solid var(--border-subtle); animation: fadeInUp 0.6s ease-out 0.4s both; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .stat-number { font-size: 2.4rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-unit { font-size: 1.2rem; font-weight: 600; color: var(--accent-warm); margin-left: 2px; } .stat-suffix { color: var(--accent-warm); font-weight: 600; } .stat-label { font-size: 0.85rem; color: var(--text-tertiary); margin-top: 4px; } .stat-divider { width: 1px; height: 48px; background: var(--border-subtle); } .hero-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1000px; height: 500px; background: radial-gradient(ellipse, rgba(99, 102, 241, 0.1) 0%, rgba(245, 158, 11, 0.03) 40%, transparent 70%); pointer-events: none; } /* --- Hero Visual: live matching-engine terminal panel --- */ .hero-visual { position: relative; animation: fadeInUp 0.7s ease-out 0.35s both; } .terminal-glow { position: absolute; inset: -40px; background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.08) 45%, transparent 72%); filter: blur(20px); pointer-events: none; z-index: 0; } .terminal-panel { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(20, 23, 32, 0.92) 0%, rgba(13, 15, 22, 0.92) 100%); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; animation: terminalFloat 6s ease-in-out infinite; } @keyframes terminalFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .terminal-topbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border-subtle); } .terminal-dots { display: flex; gap: 6px; flex-shrink: 0; } .terminal-dots span { width: 9px; height: 9px; border-radius: 50%; } .terminal-dots span:nth-child(1) { background: #ef4444; } .terminal-dots span:nth-child(2) { background: #eab308; } .terminal-dots span:nth-child(3) { background: #22c55e; } .terminal-symbol { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-tertiary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .terminal-live { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: #22c55e; flex-shrink: 0; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; } .terminal-chart-wrap { padding: 18px 18px 4px; } .terminal-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .terminal-price { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .terminal-delta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 100px; } .terminal-delta.up { color: #22c55e; background: rgba(34, 197, 94, 0.1); } .terminal-delta.down { color: #ef4444; background: rgba(239, 68, 68, 0.1); } .terminal-chart { width: 100%; height: 100px; display: block; } .terminal-chart-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawChartLine 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; } .terminal-orderbook { padding: 8px 18px 18px; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; } .ob-col { display: flex; flex-direction: column; gap: 3px; } .ob-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; border-radius: 4px; overflow: hidden; } .ob-bar { position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; } .ob-asks .ob-bar { background: rgba(239, 68, 68, 0.12); } .ob-bids .ob-bar { background: rgba(34, 197, 94, 0.12); } .ob-price { position: relative; z-index: 1; color: var(--text-secondary); } .ob-asks .ob-price { color: #f87171; } .ob-bids .ob-price { color: #4ade80; } .ob-size { position: relative; z-index: 1; color: var(--text-tertiary); } .ob-spread { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; margin: 4px 0; color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; border-top: 1px dashed var(--border-subtle); border-bottom: 1px dashed var(--border-subtle); } /* --- Hero Visual: shared chrome for the non-terminal variants (stat-panel, image-showcase, feature-grid) --- */ .hero-visual-glow { position: absolute; inset: -40px; background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.08) 45%, transparent 72%); filter: blur(20px); pointer-events: none; z-index: 0; } .hero-visual-panel { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(20, 23, 32, 0.92) 0%, rgba(13, 15, 22, 0.92) 100%); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; padding: 28px; } /* --- Hero Visual: stat-panel variant --- */ .stat-panel-header { margin-bottom: 20px; } .stat-panel-title { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .stat-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .stat-panel-item { position: relative; padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); border-radius: 12px; } .stat-panel-value { display: block; font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-panel-label { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-tertiary); } /* --- Hero Visual: image-showcase variant --- */ .hero-showcase-frame { padding: 12px; } .hero-showcase-image { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; } .cms-edit-mode .hero-showcase-image { border: 1px dashed var(--border-subtle); cursor: pointer; } .hero-showcase-empty-label { font-size: 0.85rem; color: var(--text-tertiary); } .hero-showcase-caption { margin-top: 14px; padding: 0 4px; font-size: 0.85rem; color: var(--text-tertiary); text-align: center; } /* --- Hero Visual: feature-grid variant --- */ .feature-grid-list { display: flex; flex-direction: column; gap: 18px; } .feature-grid-item { position: relative; display: flex; align-items: flex-start; gap: 14px; } .feature-grid-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(99, 102, 241, 0.1); color: var(--accent-tertiary); } .feature-grid-text h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .feature-grid-text p { font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.5; } /* --- Section Headers --- */ /* Plain uppercase eyebrow — deliberately no pill/background chrome so the quietest element in each section stays quiet (matches the you.co/biz reference, which uses no badge decoration on section labels). */ .section-tag { display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-tertiary); margin-bottom: 14px; } .section-title { font-size: clamp(1.75rem, 3vw, 2.3125rem); font-weight: 600; color: var(--text-primary); letter-spacing: normal; line-height: 1.15; margin-bottom: 16px; } .section-subtitle { font-size: 1rem; color: var(--text-tertiary); line-height: 1.75; max-width: 560px; margin: 0 auto; } .section-header { text-align: center; max-width: 640px; margin: 0 auto 64px; } .section-title-left { text-align: left; } .section-subtitle { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; } /* --- Products Section --- */ .products { padding: var(--section-padding) 0; position: relative; } .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .product-card { position: relative; background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 2px; overflow: hidden; transition: all var(--transition-slow); } .product-card:hover { border-color: rgba(99, 102, 241, 0.2); transform: translateY(-2px); } .card-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.06), transparent 40%); opacity: 0; transition: opacity var(--transition-base); pointer-events: none; } .product-card:hover .card-glow { opacity: 1; } .card-content { position: relative; padding: 32px; background: var(--bg-secondary); border-radius: 14px; height: 100%; } .product-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.2); } .product-icon svg { width: 28px; height: 28px; } .product-name { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; letter-spacing: normal; } .product-desc { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .product-features { list-style: none; padding: 0; margin: 0 0 20px 0; } .product-features li { font-size: 0.9rem; color: var(--text-secondary); padding: 6px 0; display: flex; align-items: center; gap: 8px; } .check-icon { color: #22c55e; font-weight: bold; } .card-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px; font-size: 1.5rem; } .icon-engine { background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.05) 100%); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.2); } .icon-oms { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); } .icon-risk { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); } .icon-scan { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); } .card-title { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; letter-spacing: normal; } .card-description { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; } .card-features { list-style: none; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; } .card-features li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-secondary); } .card-features li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; background: var(--accent-primary); border-radius: 50%; } .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all var(--transition-fast); } .card-link:hover { gap: 10px; color: var(--accent-tertiary); } .feature-hidden { display: none; } .product-card.expanded .feature-hidden { display: flex; } .card-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0; transition: color var(--transition-fast); margin-bottom: 24px; } .card-toggle:hover { color: var(--accent-tertiary); } .card-toggle svg { transition: transform var(--transition-fast); } .product-card.expanded .card-toggle svg { transform: rotate(180deg); } /* --- Solutions Section --- */ .solutions { padding: var(--section-padding) 0; background: var(--bg-secondary); position: relative; } .solutions::before { content: ''; position: absolute; top: -30px; left: 0; right: 0; height: 60px; background: var(--bg-secondary); -webkit-mask: var(--wave-mask) no-repeat bottom / 100% 100%; mask: var(--wave-mask) no-repeat bottom / 100% 100%; } .solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .solution-card { background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 36px; transition: all var(--transition-slow); } .solution-card:hover { border-color: rgba(99, 102, 241, 0.2); transform: translateY(-2px); background: var(--glass-hover); } .solution-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--gradient-subtle); border: 1px solid rgba(99, 102, 241, 0.15); color: var(--accent-primary); margin-bottom: 20px; } .solution-card h3 { font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; letter-spacing: normal; } .solution-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; } .solution-tags { display: flex; flex-wrap: wrap; gap: 8px; } .solution-tags span { font-size: 0.8rem; padding: 4px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 100px; color: var(--text-tertiary); font-weight: 500; } /* --- About Section --- */ .about { padding: var(--section-padding) 0; position: relative; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } /* No code-block visual configured (not every industry wants a fake terminal) — the content column takes the full width and centers itself instead of leaving an empty second column. */ .about-grid.about-grid-full { grid-template-columns: 1fr; justify-items: center; text-align: center; } .about-grid-full .about-content { max-width: 720px; } .about-content { max-width: 520px; } .about-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; } .about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .value-item { text-align: center; padding: 24px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; transition: all var(--transition-base); } .value-item:hover { border-color: rgba(99, 102, 241, 0.2); background: var(--glass-hover); } .value-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--gradient-subtle); border: 1px solid rgba(99, 102, 241, 0.15); color: var(--accent-primary); margin: 0 auto 12px; } .value-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .value-item p { font-size: 0.8rem; color: var(--text-tertiary); } /* --- Code Block Visual --- */ .about-visual { position: sticky; top: 120px; } .visual-card { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); } .code-block { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; } .code-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-subtle); } .code-dot { width: 12px; height: 12px; border-radius: 50%; } .code-red { background: #ef4444; } .code-yellow { background: #eab308; } .code-green { background: #22c55e; } .code-filename { margin-left: 8px; font-size: 0.75rem; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; } .code-content { padding: 20px; line-height: 1.8; overflow-x: auto; } .code-line { white-space: pre; color: var(--text-secondary); } .code-comment { color: var(--text-muted); font-style: italic; } .code-keyword { color: #c084fc; } .code-class { color: #67e8f9; } .code-function { color: #fbbf24; } .code-property { color: #60a5fa; } .code-constant { color: #f472b6; } /* --- Technology Section --- */ .technology { padding: var(--section-padding) 0; background: var(--bg-secondary); position: relative; } .technology::before { content: ''; position: absolute; top: -30px; left: 0; right: 0; height: 60px; background: var(--bg-secondary); -webkit-mask: var(--wave-mask) no-repeat bottom / 100% 100%; mask: var(--wave-mask) no-repeat bottom / 100% 100%; } .tech-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .tech-item { position: relative; text-align: center; padding: 32px 20px; background: var(--glass-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-border); border-radius: 14px; transition: all var(--transition-base); } .tech-item:hover { border-color: rgba(99, 102, 241, 0.2); transform: translateY(-2px); background: var(--glass-hover); } .tech-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%); border: 1px solid rgba(99, 102, 241, 0.15); color: var(--accent-tertiary); font-weight: 800; font-size: 0.9rem; margin: 0 auto 16px; font-family: 'JetBrains Mono', monospace; transition: all var(--transition-base); } .tech-item:hover .tech-icon { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.1) 100%); border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); } .tech-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .tech-item p { font-size: 0.8rem; color: var(--text-tertiary); } .tech-item { cursor: pointer; } .tech-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease; opacity: 0; padding: 0 20px; } .tech-detail p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; } .tech-item.expanded .tech-detail { max-height: 200px; opacity: 1; padding: 0 20px 20px; } .tech-item.expanded::after { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); z-index: -1; opacity: 0.4; } /* --- Logo Marquee --- */ .marquee-section { padding: 60px 0; overflow: hidden; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .marquee-track { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee-content { display: flex; gap: 48px; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-section:hover .marquee-content { animation-play-state: paused; } .marquee-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 48px; opacity: 0.5; transition: opacity var(--transition-base); } .marquee-item:hover { opacity: 0.9; } .marquee-item svg { height: 100%; width: auto; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Testimonials Carousel --- */ .testimonials { padding: 100px 0; background: var(--bg-primary); } .testimonial-carousel { max-width: 720px; margin: 0 auto; position: relative; } .testimonial-track { position: relative; overflow: hidden; } .testimonial-card { text-align: center; padding: 0 20px; display: none; } .testimonial-card.active { display: block; animation: fadeSlideIn 0.5s ease-out; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .testimonial-quote { margin-bottom: 24px; color: var(--accent-primary); opacity: 0.3; } .testimonial-text { font-size: 1.2rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 32px; font-style: italic; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 14px; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #fff; flex-shrink: 0; } .testimonial-info { display: flex; flex-direction: column; align-items: flex-start; } .testimonial-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .testimonial-role { font-size: 0.8rem; color: var(--text-tertiary); } .testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .testimonial-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-base); } .testimonial-arrow:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, transparent); } .testimonial-dots { display: flex; gap: 8px; } .testimonial-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border-subtle); cursor: pointer; transition: all var(--transition-base); padding: 0; } .testimonial-dot.active { background: var(--accent-primary); width: 24px; border-radius: 4px; } /* --- Rich Text Module --- */ .rich-text-section { padding: 60px 0; } /* --- Legal Pages (Privacy Policy, Terms of Service, Cookie Policy) --- */ .legal-page { padding: 160px 0 var(--section-padding); position: relative; } .legal-header { max-width: 760px; margin: 0 auto 32px; } .legal-header .section-title { margin-top: 12px; } .legal-updated { color: var(--text-tertiary); font-size: 0.85rem; margin-top: 10px; } .legal-content { padding-top: 12px; border-top: 1px solid var(--border-subtle); } .rich-text-content { max-width: 760px; margin: 0 auto; color: var(--text-secondary); font-size: 1rem; line-height: 1.8; } .rich-text-content h1, .rich-text-content h2, .rich-text-content h3, .rich-text-content h4 { color: var(--text-primary); font-weight: 600; letter-spacing: normal; margin: 28px 0 14px; } .rich-text-content p { margin-bottom: 16px; } .rich-text-content a { color: var(--accent-tertiary); } .rich-text-content ul, .rich-text-content ol { margin: 0 0 16px 20px; } .rich-text-content img { max-width: 100%; border-radius: 12px; } /* --- Contact Section --- */ .contact { padding: var(--section-padding) 0; position: relative; } .contact::before { content: ''; position: absolute; top: -30px; left: 0; right: 0; height: 60px; background: var(--bg-primary); -webkit-mask: var(--wave-mask) no-repeat bottom / 100% 100%; mask: var(--wave-mask) no-repeat bottom / 100% 100%; pointer-events: none; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 40px; } .contact-details { display: flex; flex-direction: column; gap: 24px; } .contact-item { display: flex; align-items: flex-start; gap: 16px; } .contact-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .contact-item p { font-size: 0.9rem; color: var(--text-secondary); } /* --- Contact Form --- */ .contact-form-wrapper { background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border: 1px solid var(--glass-border); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-md); } .contact-form .btn-primary { padding: 14px 28px; border-radius: 12px; font-size: 1rem; } .contact-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.15); color: var(--accent-tertiary); flex-shrink: 0; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .form-group input, .form-group select, .form-group textarea { font-family: inherit; /* Must stay >= 16px — iOS Safari auto-zooms the whole page on focus for any input with a smaller computed font-size. */ font-size: 1rem; padding: 12px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-primary); transition: all var(--transition-fast); outline: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); } .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .form-group select option { background: var(--bg-tertiary); color: var(--text-primary); } .form-group textarea { resize: vertical; min-height: 100px; } /* --- Trust / Compliance Strip --- */ .trust-strip { padding: 36px 0; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 1; } .trust-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 36px; } .trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-tertiary); white-space: nowrap; } .trust-item svg { color: var(--accent-tertiary); flex-shrink: 0; } /* --- Footer --- */ .footer { padding: 80px 0 40px; background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border-top: 1px solid var(--border-subtle); position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), rgba(245, 158, 11, 0.1), transparent); } .footer-links h4 { color: var(--text-primary); } .footer-links a { color: var(--text-tertiary); } .footer-links a:hover { color: var(--text-primary); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 60px; } .footer-brand { max-width: 280px; } .footer-tagline { margin-top: 16px; font-size: 0.9rem; color: var(--text-tertiary); line-height: 1.7; } .footer-links h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } .footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: var(--text-tertiary); text-decoration: none; font-size: 0.9rem; transition: color var(--transition-fast); } .footer-links a:hover { color: var(--text-primary); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--border-subtle); font-size: 0.85rem; color: var(--text-muted); } .footer-legal { display: flex; gap: 24px; } .footer-legal a { color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); } .footer-legal a:hover { color: var(--text-secondary); } /* --- Section Dots --- */ .section-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 800; display: flex; flex-direction: column; gap: 16px; } .dot-item { position: relative; display: flex; align-items: center; justify-content: flex-end; text-decoration: none; gap: 12px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); border: 2px solid transparent; transition: all var(--transition-base); flex-shrink: 0; } .dot-item:hover .dot { background: var(--accent-primary); border-color: var(--accent-glow); box-shadow: 0 0 12px var(--accent-glow); } .dot-item.active .dot { background: var(--accent-primary); border-color: transparent; box-shadow: 0 0 14px var(--accent-glow); transform: scale(1.3); } .dot-label { font-size: 0.75rem; color: var(--text-tertiary); opacity: 0; transform: translateX(8px); transition: all var(--transition-base); white-space: nowrap; pointer-events: none; } .dot-item:hover .dot-label, .dot-item.active .dot-label { opacity: 1; transform: translateX(0); color: var(--text-primary); } @media (max-width: 768px) { .section-dots { display: none; } } /* Hide section dots navigation */ .section-dots { display: none !important; } /* --- Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* Section fade transition */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-medium), transparent); margin: 0; border: none; opacity: 0.5; } /* Count-up stat number */ .stat-number .stat-unit { transition: color 0.3s; } .stat-number.counting { color: var(--accent-primary); } /* --- Responsive --- */ @media (max-width: 1024px) { :root { --section-padding: 80px; } .products-grid { grid-template-columns: repeat(2, 1fr); } .solutions-grid { grid-template-columns: repeat(3, 1fr); } .tech-grid { grid-template-columns: repeat(3, 1fr); } .about-grid { gap: 48px; } .contact-grid { gap: 48px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .hero-visual { max-width: 460px; width: 100%; margin: 0 auto; } } @media (max-width: 768px) { .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--scrim-rgb), 0.95); backdrop-filter: blur(24px); flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 999; } .nav-links.active { display: flex; } .nav-link { font-size: 1.2rem; padding: 12px 24px; color: var(--text-primary); } .hamburger span { background: var(--text-primary); } .nav-links.active { display: flex; } .nav-link { font-size: 1.2rem; padding: 12px 24px; } .hamburger { display: flex; z-index: 1001; } .nav-actions .btn { display: none; } /* Top padding must clear the fixed .navbar on its own — historically the ticker strip (with its own margin-top) sat between the navbar and hero and provided that clearance for free, but the ticker is now an optional module (per-industry/per-site), so hero can no longer assume something else is buying it space. 48px used to be fine when hero was rarely first; now that it commonly is, that's less than the navbar's own mobile height (~64-80px depending on whether the logo/company name wraps), so hero content rendered partly hidden behind the navbar. */ .hero { padding: 100px 24px 60px; } .hero-stats { gap: 24px; } .stat-divider { display: none; } .stat-number { font-size: 2rem; } /* minmax(0, 1fr) rather than bare 1fr: a plain 1fr track defaults to min-width:auto, so if anything nested inside is wider than the viewport (e.g. a long word, or a further nested multi-column grid), the whole column refuses to shrink and its text overflows instead of wrapping. minmax(0, 1fr) distributes space identically but allows the track to shrink to fit, which is what lets text wrap correctly. */ .products-grid { grid-template-columns: minmax(0, 1fr); } .solutions-grid { grid-template-columns: minmax(0, 1fr); } .about-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .about-visual { position: static; } .about-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .form-row { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } } @media (max-width: 480px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 0.95rem; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; justify-content: center; } /* the order book's dense rows of small numbers get cramped on the narrowest phones — keep the panel to its chart + price, which still reads as a live product visual without the clutter. */ .terminal-orderbook { display: none; } .about-values { grid-template-columns: minmax(0, 1fr); } .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form-wrapper { padding: 24px; } }