/* ========================================================================= Voltaire Tech — Colors & Type v4 Flagship brand (current direction). The V3 gold/black system is kept at the bottom as legacy for ports of the existing voltairtech.com site. ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* ==================== FLAGSHIP v4 (primary) ==================== */ /* ----- Core palette ----- */ --v-red: #E63946; /* Voltaire red — primary signal */ --v-red-deep: #C42E3A; --v-red-glow: rgba(230,57,70,0.45); --v-ink: #0A0A0A; /* near-black text & dark bg */ --v-ink-2: #161616; --v-ink-3: #1F1F1F; --v-ink-line: #2A2A2A; --v-paper: #F5F5F0; /* off-white page bg */ --v-paper-2: #ECECE5; --v-paper-line: #D8D8CF; --v-lime: #D9FF00; /* electric accent — micro-highlights only */ --v-lime-soft: rgba(217,255,0,0.18); /* On-ink neutrals */ --v-ink-fg: #F5F5F0; --v-ink-fg-2: rgba(245,245,240,0.72); --v-ink-fg-3: rgba(245,245,240,0.50); /* On-paper neutrals */ --v-paper-fg: #0A0A0A; --v-paper-fg-2: rgba(10,10,10,0.66); --v-paper-fg-3: rgba(10,10,10,0.40); /* ----- Semantic ----- */ --fg1: var(--v-paper-fg); --fg2: var(--v-paper-fg-2); --fg3: var(--v-paper-fg-3); --fg-accent: var(--v-red); --bg1: var(--v-paper); --bg2: var(--v-paper-2); --border: var(--v-paper-line); /* When .dark, flip */ --fg1-dark: var(--v-ink-fg); --fg2-dark: var(--v-ink-fg-2); --fg3-dark: var(--v-ink-fg-3); --bg1-dark: var(--v-ink); --bg2-dark: var(--v-ink-2); --border-dark: var(--v-ink-line); /* ----- Type families ----- */ --font-display: "Inter Tight", "Geist", "Satoshi", system-ui, -apple-system, sans-serif; --font-body: "Inter Tight", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ----- Type scale (flagship is BIG; "massive type") ----- */ --fs-mega: clamp(4rem, 12vw, 11rem); /* hero "Ship AI in 48 hours." */ --fs-display: clamp(2.6rem, 6.5vw, 5.5rem); /* section openers */ --fs-h1: clamp(1.8rem, 3.6vw, 2.6rem); --fs-h2: clamp(1.4rem, 2.4vw, 1.8rem); --fs-h3: 1.25rem; --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem); --fs-body: 1rem; --fs-meta: 0.8125rem; /* 13px */ --fs-mono: 0.75rem; /* 12px JetBrains labels */ --tracking-tight: -0.04em; /* big display headlines */ --tracking-mid: -0.02em; --tracking-label: 0.14em; /* mono labels, all-caps */ --tracking-wide: 0.22em; --lh-display: 0.92; --lh-tight: 1.05; --lh-body: 1.55; /* ----- Spacing ----- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: clamp(64px, 10vw, 128px); --container-max: 1440px; --gutter: clamp(20px, 4vw, 56px); /* ----- Radii ----- */ --r-0: 0px; --r-1: 4px; --r-2: 10px; --r-3: 18px; --r-4: 28px; --r-pill: 999px; /* ----- Borders ----- */ --bw: 1px; --bw-2: 2px; /* ----- Shadows / focus ----- */ --shadow-1: 0 1px 0 var(--v-paper-line); --shadow-2: 0 8px 24px rgba(10,10,10,0.08); --shadow-3: 0 24px 60px rgba(10,10,10,0.14); --shadow-red: 0 12px 40px rgba(230,57,70,0.30); --shadow-red-strong: 0 18px 60px rgba(230,57,70,0.50); --focus-ring: 0 0 0 3px rgba(230,57,70,0.35); /* ----- Motion ----- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 0.7, 0.2); --ease-emph: cubic-bezier(0.2, 0.9, 0.1, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; --dur-4: 700ms; } /* ----- Element defaults ----- */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-feature-settings: "ss01" on, "cv11" on; background: var(--bg1); color: var(--fg1); -webkit-font-smoothing: antialiased; } .h-mega { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-mega); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); } .h-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); } .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-mid); } .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tracking-mid); } .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; } .lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg2); } .body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); } .meta { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); color: var(--fg3); } .mono-lbl { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); color: var(--fg3); letter-spacing: var(--tracking-label); text-transform: uppercase; } ::selection { background: var(--v-red); color: var(--v-paper); } .dark ::selection { background: var(--v-lime); color: var(--v-ink); } /* ========================================================================= LEGACY v3 (kept for ports of the existing voltairtech.com site) ========================================================================= */ :root { --vt-gold: #D4AF37; --vt-gold-accent: #FFD700; --vt-gold-soft: rgba(212,175,55,0.10); --vt-gold-line: rgba(212,175,55,0.30); --vt-gold-glow: rgba(255,215,0,0.50); --vt-ai-red: #FF0000; --vt-black: #000000; --vt-black-2: #1A1A1A; --vt-black-3: #0A0A0A; --vt-white: #FFFFFF; --vt-white-80: rgba(255,255,255,0.80); --vt-white-60: rgba(255,255,255,0.60); --vt-whatsapp: #25D366; }