/* ============================================================ Buzl — Fully Managed Local SEO plan page SETTINGS FILE · the ONLY place raw colours / sizes live. Re-theme the whole page by editing the tokens below. ============================================================ */ :root { /* ---- Brand fonts (loaded via Google Fonts in ) ---- */ --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ---- Fluid type scale (rem base keeps browser-zoom working) ---- */ --fs-h1: clamp(1.5rem, 0.85rem + 3.25vw, 3rem); /* 24 → 48 */ --fs-h2: clamp(1rem, 0.55rem + 2.25vw, 2rem); /* 16 → 32 */ --fs-h3: clamp(1.125rem, 0.9rem + 1.1vw, 1.5rem); /* 18 → 24 */ --fs-h4: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); /* 16 → 18 */ --fs-metric: clamp(1.375rem, 0.9rem + 2.4vw, 1.75rem); /* 22 → 28 */ --fs-lead: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem); /* 16 → 19 */ --fs-body: 0.9375rem; /* 15 */ --fs-dash: 1rem; /* 16 */ --fs-nav: 0.8125rem; /* 13 */ --fs-caption: 0.75rem; /* 12 */ --fs-btn: 0.875rem; /* 14 */ --fs-badge: 0.625rem; /* 10 */ --lh-h1: 1.06; --lh-h2: 1.15; --lh-tight: 1.25; --lh-body: 1.7; --tr-h1: -0.5px; --tr-h2: -0.3px; --tr-nav: 0.5px; --tr-btn: 0.5px; --tr-badge: 1.5px; /* ---- Radius ---- */ --radius-sm: 0.5rem; --radius: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-pill: 999px; /* ---- Spacing ---- */ --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem); --space-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); /* ---- Shadows ---- */ --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 30px -12px rgba(15, 23, 42, 0.18); --shadow-lift: 0 20px 55px -20px rgba(0, 64, 255, 0.45); /* ---- Brand gradients (dark by nature → use *-fg = light text) ---- */ --grad-hero: linear-gradient(160deg, #0A0F3A 0%, #0040FF 62%, #3B5FF5 100%); --grad-beam: linear-gradient(135deg, #0040FF 0%, #3B5FF5 100%); --grad-deep: linear-gradient(135deg, #0A0F3A 0%, #1A2ABF 100%); --scrim: linear-gradient(180deg, rgba(10, 15, 58, 0.10), rgba(10, 15, 58, 0.62)); /* ============ LIGHT THEME (paired bg / fg tokens) ============ */ --bg: #FFFFFF; --fg: #0F172A; --surface: #EDF2FC; --surface-fg: #0F172A; /* clearly darker than bg */ --panel: #F8FAFC; --panel-fg: #0F172A; --primary: #0040FF; --primary-fg: #FFFFFF; --accent: #F59E0B; --accent-fg: #0F172A; --navy: #0F172A; --navy-fg: #F1F5FF; --muted-fg: #4A576F; /* secondary text on bg/surface — AAA on white */ --link: #0040FF; /* interactive text colour */ --border: #D7DFF0; --ring: #0040FF; --warning: #DC2626; --warning-fg: #FFFFFF; --on-gradient: #F1F5FF; /* paired text for gradient surfaces */ --on-gradient-muted: #C3CEF7; } /* ================= DARK THEME ================= */ [data-theme="dark"] { --bg: #0A0F1F; --fg: #E9EEFB; --surface: #121C36; --surface-fg: #E9EEFB; /* clearly lighter than bg */ --panel: #16223F; --panel-fg: #E9EEFB; --primary: #3B5FF5; --primary-fg: #FFFFFF; --accent: #F59E0B; --accent-fg: #0A0F1F; --navy: #060A18; --navy-fg: #E9EEFB; --muted-fg: #9FADCB; --link: #93A9FF; --border: #263356; --ring: #7E96FF; --warning: #F87171; --warning-fg: #0A0F1F; --on-gradient: #F1F5FF; --on-gradient-muted: #C3CEF7; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 34px -14px rgba(0, 0, 0, 0.6); --shadow-lift: 0 22px 60px -22px rgba(59, 95, 245, 0.6); } /* ============ HIGH-CONTRAST reinforcement ============ */ @media (prefers-contrast: more) { :root { --muted-fg: #1F2937; --border: #0F172A; --link: #0033CC; } [data-theme="dark"] { --fg: #FFFFFF; --muted-fg: #DCE4F7; --border: #7E96FF; --link: #C7D4FF; } } /* ============ Allowed plain CSS (Rule 2i) ============ */ /* Container-name so nested mockup cards can react to their own box */ .cq { container-type: inline-size; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); } /* Keyframes */ @keyframes buzl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes buzl-pin-drop { 0% { opacity: 0; transform: translateY(-14px) scale(0.9); } 60% { transform: translateY(2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes buzl-pulse-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes buzl-sheen { from { background-position: -140% 0; } to { background-position: 240% 0; } } .anim-rise { animation: buzl-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-pin { animation: buzl-pin-drop 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } .pulse-ring { animation: buzl-pulse-ring 2.4s ease-out infinite; } /* Reveal-on-scroll base (JS adds .is-in) */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-in { opacity: 1; transform: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } /* Save-data: drop heavy decorative layers (no Tailwind shortcut) */ @media (prefers-reduced-data: reduce) { .decor { display: none !important; } .pulse-ring { display: none !important; } } /* Explicit solid button utility classes */ .bg-whatsapp { background-color: #1FA855 !important; color: #ffffff !important; } .bg-brand { background-color: #0040FF !important; color: #ffffff !important; } .text-on-brand { color: #ffffff !important; }