/* ============================================================= Aurum AI — Design Tokens v4.2 Typography Lift (rev2) Aurum Solutions Sdn Bhd ============================================================= Single source of truth for color, typography, spacing, radius, shadow, and motion tokens. STRICT RULES - No blue, no purple, no teal. Gold + black only. - Geist Sans for body + UI headings (weights 400, 500, 600, 700). - Geist Sans italic for emphasis spans (.v6-em). - Geist Mono italic for control-terminal accents (numbers, section tickers). - Radii: 8px, 16px, 100px (pill). Nothing else. Typography decision (2026-06-11, v4.2 rev2): - Inter excluded per the $10K Checklist criterion #2. - Outfit retired - too templated for premium AI. - Instrument Serif italic tried in rev1, rejected as too editorial for an AI surveillance brand (reads as fashion magazine). - Settled on Geist Sans (Vercel, free) for the whole site PLUS Geist Mono italic for the gold accent span on the hero. Typography upgrade (2026-06-14, v6 typography lift): - Fraunces retired 2026-07-01: site uses Geist Sans + Geist Mono only. ============================================================= */ :root { /* ---------- BASE COLOR TOKENS ---------- */ /* Gold scale */ --gold: #C9A84C; --gold-dark: #8B6914; --gold-deep: #5C3D00; /* Gold alpha — fills, borders, glow */ --gold-subtle: rgba(201, 168, 76, 0.08); --gold-faint: rgba(201, 168, 76, 0.05); --gold-border: rgba(201, 168, 76, 0.20); --gold-glow: rgba(201, 168, 76, 0.15); /* Black scale */ --black: #0A0A0A; --surface: #111111; --surface-alt: #1A1200; /* White / muted */ --white: #FFFFFF; --text-muted: #999999; /* v4.6: was #888 (borderline AA); bumped to #999 (passes AA 4.5:1 on #0A0A0A) */ --text-muted-dim: #7A7A7A; /* v4.6: was #555 (failed AA); bumped to #7A7A7A (passes AA Large 3:1, used only for non-essential text) */ --text-soft: rgba(255, 255, 255, 0.72); /* v4.6: bumped 0.68 to 0.72 for AA Normal */ /* Functional */ --whatsapp: #25D366; /* ---------- TYPOGRAPHY TOKENS ---------- */ --font-display: 'Geist', 'Helvetica Neue', sans-serif; --font-heading: 'Geist', 'Helvetica Neue', sans-serif; --font-body: 'Geist', 'Helvetica Neue', sans-serif; --font-mono: 'Geist Mono', 'Courier New', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale */ --fs-d1: clamp(40px, 5.5vw, 64px); --fs-h2: clamp(28px, 3.5vw, 42px); --fs-h3: clamp(18px, 2.5vw, 24px); --fs-h4: 16px; --fs-body: 15px; --fs-body-lg: 18px; --fs-body-md: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-label: 11px; --fs-micro: 10px; --lh-tight: 1.15; --lh-snug: 1.5; --lh-relaxed: 1.7; --lh-loose: 1.8; --ls-display: -1.5px; --ls-tight: -0.5px; --ls-label: 4px; --ls-label-sm: 2px; --ls-cta: 0.5px; /* ---------- LAYOUT ---------- */ --max-w: 1160px; --section-pad: 110px; --section-pad-sm: 72px; --wrap-pad-x: 24px; /* ---------- RADIUS ---------- */ --radius: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 100px; --radius-badge: 4px; /* ---------- SHADOW / GLOW ---------- */ --glow-soft: 0 0 32px rgba(201, 168, 76, 0.08); --glow-med: 0 0 48px rgba(201, 168, 76, 0.12); --glow-strong: 0 0 64px rgba(201, 168, 76, 0.18); --glow-whatsapp: 0 4px 20px rgba(37, 211, 102, 0.38); --glow-whatsapp-hover: 0 6px 28px rgba(37, 211, 102, 0.50); /* ---------- GLASS SURFACE ---------- */ --glass-bg: rgba(255, 255, 255, 0.025); --glass-border: rgba(201, 168, 76, 0.12); --glass-blur: blur(20px); /* ---------- MOTION ---------- */ /* Legacy (kept for backward compat with rules across v4 to v6 iterations). */ --ease: 0.3s ease; --ease-slow: 0.7s ease; --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-tilt: 0.12s ease; --ease-tilt-out: 0.5s ease; /* v6 TYPOGRAPHY LIFT (2026-06-14) — formal motion token system. The $10K Checklist criterion #6 ("Motion that whispers") asks for hand-crafted, considered easings, not AOS-fade-up slop. The tokens below replace ad-hoc 0.3s ease everywhere they get adopted. Signature curve: expo-out (0.16, 1, 0.3, 1) — the deliberate spring that makes hover and reveal land like they were sculpted. */ /* Easing curves */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* SIGNATURE entry */ --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0); /* exit (60-70% of enter dur) */ --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* state interpolation */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ /* Durations — 4-tier scale, no in-between values */ --dur-instant: 120ms; /* button press, ripple, focus ring */ --dur-quick: 240ms; /* hover state, small ui transitions */ --dur-considered: 480ms; /* card reveal, panel expand */ --dur-cinematic: 880ms; /* hero scroll moments, large transitions */ --lift-sm: translateY(-2px); --lift-md: translateY(-4px); --lift-lg: translateY(-6px); /* ---------- BORDERS ---------- */ --border-hairline: 0.5px solid #1e1c00; --border-default: 1px solid var(--gold-border); --border-strong: 1.5px solid var(--gold); --border-glass: 1px solid var(--glass-border); /* ---------- BLUR ---------- */ --blur-nav: blur(20px); } /* ============================================================= SEMANTIC BASE STYLES ============================================================= */ html { scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* v4.1 Tone Rebalance — ambient gold warmth across the page. Subtle warm radial bloom at top, plus warm graphite tint at edges. Keeps brand identity intact (black + gold) but lifts the cold "dark web" feel called out by Chairman in 2026-05-25 board meeting. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(201, 168, 76, 0.10) 0%, transparent 55%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%), linear-gradient(180deg, #141210 0%, #0A0A0A 35%, #0A0A0A 70%, #110F0C 100%); } /* Thin gold section divider — drop between major sections to add premium gold accent without changing layout. Usage:
between sections. */ .section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.25) 25%, rgba(201, 168, 76, 0.45) 50%, rgba(201, 168, 76, 0.25) 75%, transparent 100%); margin: 0 auto; max-width: 1160px; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-medium); line-height: var(--lh-tight); margin: 0; } h1, .d1 { font-size: var(--fs-d1); letter-spacing: var(--ls-display); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); } .gold { color: var(--gold); } .muted { color: var(--text-muted); } .soft { color: var(--text-soft); } .label { font-family: var(--font-heading); font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); } p { margin: 0; color: var(--text-soft); line-height: var(--lh-relaxed); } .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--wrap-pad-x); } section { padding: var(--section-pad) 0; } @media (max-width: 900px) { section { padding: var(--section-pad-sm) 0; } } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-body); letter-spacing: var(--ls-cta); border: none; cursor: pointer; white-space: nowrap; /* v4.3 rev3: prevent "Request Demo" wrapping to 2 lines in cramped nav */ transition: opacity var(--ease), transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease); text-decoration: none; } .btn-gold { background: var(--gold); color: var(--black); } .btn-gold:hover { opacity: 0.88; transform: var(--lift-sm); box-shadow: 0 8px 24px rgba(201,168,76,0.25); } .btn-outline { background: transparent; color: var(--gold); border: 1.5px solid var(--gold-border); } .btn-outline:hover { border-color: var(--gold); background: var(--gold-subtle); transform: var(--lift-sm); } /* Logo — image-based wordmark (Aurum AI brand identity, locked 2026-05-22) */ .logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } .logo-img { /* v4.3 rev3: with the tight viewBox (213:32 aspect ratio) the SVG now renders proportionally. 36px height = ~240px width, which fits the nav cleanly alongside nav links and the CTA button. Old broken SVG @ 44px square = ~4px tall wordmark in a black box. Fixed SVG @ 36px tall = real 36px wordmark, correct proportions. */ height: 36px; width: auto; display: block; transition: opacity var(--ease); } .logo:hover .logo-img { opacity: 0.85; } .logo--footer .logo-img { height: 32px; } @media (max-width: 900px) { .logo-img { height: 32px; } } @media (max-width: 600px) { .logo-img { height: 28px; } .logo--footer .logo-img { height: 26px; } } /* Legacy text-wordmark classes (AlertPro era) kept inert so any third-party reuse doesn't render stale text */ .logo-word, .logo-alert, .logo-pro, .logo-badge { display: none; } /* Pulse dot */ .pulse-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } } /* Scroll reveal */ .up { opacity: 0; transform: translateY(32px); transition: opacity var(--ease-slow), transform var(--ease-slow); } .up.show { opacity: 1; transform: translateY(0); } .d1s { transition-delay: 0.08s; } .d2s { transition-delay: 0.16s; } .d3s { transition-delay: 0.24s; } .d4s { transition-delay: 0.32s; } .d5s { transition-delay: 0.40s; }