/* ========================================================================== Gauss AI — Brand Design Tokens v4.1 "Friendly Precision" Care without performance. Clean, honest, warm without trying hard. Like a well-organized kitchen of someone who cares about you. Gauss blue as protagonist, not WhatsApp green. The logo uses two blues: deep #1050A0 and cyan #3FA4E5. Fonts: Sora (display/brand) + Inter (body) Grid: 8px base unit Updated: 2026-03-20 ========================================================================== */ /* ---- Font Imports ---- */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* ======================================================================= 1. COLOR PRIMITIVES ======================================================================= */ /* --- Gauss Blue (brand core — from the logo) --- */ --gauss-blue-700: #1050A0; /* deep institutional */ --gauss-blue-600: #1558A0; /* primary brand */ /* --- Gauss Cyan (accent, highlights, energy) --- */ --gauss-cyan-500: #3FA4E5; /* --- Ink (text hierarchy) --- */ --gauss-ink-900: #0B1220; /* headings on light bg */ --gauss-ink-700: #374151; /* body text — warm, friendly */ --gauss-ink-500: #6B7280; /* secondary/muted text */ /* --- Sky (surfaces, backgrounds) --- */ --gauss-sky-50: #F9F9FF; /* page background — warm blue-white */ --gauss-sky-100: #EFF3FF; /* alt section background — bluer tint */ /* --- Neutral --- */ --gauss-line-200: #E2E8F0; /* borders — neutral, clean */ --gauss-white: #FFFFFF; /* cards, surfaces */ --gauss-surface-nested: #DEE9FD; /* interactive elements within cards */ --gauss-ghost-border: rgba(194, 198, 210, 0.15); /* outline-variant at 15% */ --gauss-black: #0B1220; /* dark sections, footer */ /* --- Success (Gauss's own green, NOT WhatsApp) --- */ --gauss-success: #18A957; /* --- Warm highlights (used sparingly) --- */ --gauss-amber-100: #FEF3C7; /* badge/tip box background */ --gauss-amber-500: #D4A853; /* warm highlight text */ /* ======================================================================= 2. GRADIENTS — The Gauss gradient is THE visual signature ======================================================================= */ /* Primary brand gradient — deep blue to cyan */ --gauss-gradient-brand: linear-gradient(135deg, #1050A0 0%, #3FA4E5 100%); /* Brand hover — darker shift */ --gauss-gradient-brand-hover: linear-gradient(135deg, #0D408A 0%, #2B8FD4 100%); /* Dark gradient — footer, dark sections */ --gauss-gradient-dark: linear-gradient(140deg, #050810 0%, #0B1220 50%, #0E1B33 100%); /* Subtle page flow — very soft vertical */ --gauss-gradient-subtle: linear-gradient(180deg, #F9F9FF 0%, #EFF3FF 100%); /* Accent gradient — cyan to green (WhatsApp CTA specifically) */ --gauss-gradient-accent: linear-gradient(135deg, #3FA4E5 0%, #18A957 100%); /* ======================================================================= 3. TYPOGRAPHY ======================================================================= */ /* Font stacks — two fonts, that's enough */ --font-display: 'Sora', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; /* Fluid type scale — slightly more generous for impact */ --text-display: clamp(2.75rem, 5.5vw, 3.75rem); /* 44px → 60px */ --text-h1: clamp(2.25rem, 4vw, 2.75rem); /* 36px → 44px */ --text-h2: clamp(1.75rem, 3.5vw, 2.25rem); /* 28px → 36px */ --text-h3: clamp(1.25rem, 2vw, 1.5rem); /* 20px → 24px */ --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-sm: 0.875rem; /* 14px */ --text-xs: 0.75rem; /* 12px */ /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; /* ======================================================================= 4. SPACING (8px base, generous section padding) ======================================================================= */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Section spacing — generous vertical rhythm */ --section-padding: clamp(5rem, 8vw, 7rem); /* ======================================================================= 5. SHAPES — Rounded, matching the logo's geometry ======================================================================= */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; /* cards */ --radius-xl: 28px; /* large cards, featured sections */ --radius-pill: 999px; --radius-bell: 8px 24px 8px 24px; /* signature "Bell Wave" asymmetric */ /* ======================================================================= 6. SHADOWS — Simple elevation, warm-tinted (NOT dramatic) ======================================================================= */ --shadow-sm: 0 1px 3px rgba(21, 88, 160, 0.05); --shadow-md: 0 4px 12px rgba(21, 88, 160, 0.06); --shadow-lg: 0 8px 30px rgba(21, 88, 160, 0.08); --shadow-xl: 0 20px 60px rgba(21, 88, 160, 0.10); --shadow-card: 0 2px 8px rgba(21, 88, 160, 0.04), 0 8px 24px rgba(21, 88, 160, 0.06); --shadow-card-hover: 0 4px 12px rgba(21, 88, 160, 0.06), 0 16px 40px rgba(21, 88, 160, 0.10); --shadow-phone: 0 12px 32px -4px rgba(21, 88, 160, 0.08), 0 20px 60px rgba(21, 88, 160, 0.10); --shadow-glow-green: 0 4px 20px rgba(37, 211, 102, 0.25); /* ======================================================================= 7. TRANSITIONS ======================================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; /* ======================================================================= 8. Z-INDEX SCALE ======================================================================= */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ======================================================================= 9. SEMANTIC ALIASES ======================================================================= */ /* Colors */ --color-primary: var(--gauss-blue-600); --color-primary-hover: var(--gauss-blue-700); --color-accent: var(--gauss-cyan-500); --color-success: var(--gauss-success); /* Text */ --color-text: var(--gauss-ink-900); --color-text-secondary: var(--gauss-ink-700); --color-text-muted: var(--gauss-ink-500); /* Backgrounds */ --color-bg: var(--gauss-sky-50); --color-bg-surface: var(--gauss-white); --color-bg-alt: var(--gauss-sky-100); /* Borders */ --color-border: var(--gauss-line-200); /* ======================================================================= 10. WHATSAPP (functional) ======================================================================= */ --whatsapp-green: #25D366; --whatsapp-green-hover: #1DA851; --whatsapp-bg: #ECE5DD; --chat-sent: #DCF8C6; --chat-received: #FFFFFF; /* ======================================================================= 11. LAYOUT ======================================================================= */ --container-max: 1200px; --container-narrow: 720px; --header-height: 72px; --header-height-shrink: 60px; } /* =========================================================================== REDUCED MOTION =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --ease-spring: ease; } }