/* ===================================================================== MASTER DESIGN TOKENS — Template 3 Edit these variables to retheme the entire site in seconds. ===================================================================== */ :root { /* ------------------------------------------------------------------- BRAND COLORS ------------------------------------------------------------------- */ /* Primary palette — deep navy blues */ --color-primary: #6B21A8; /* Main brand purple */ --color-primary-2: #581C87; /* Secondary / lighter purple */ --color-primary-3: #1563c7; /* Accent / hover blue */ --color-primary-dark: #052e6a; /* Urgency / dark blue */ --color-primary-deep: #0a2a57; /* Deepest navy (footer, proof section) */ --color-primary-deeper: #0d3670; /* Footer gradient end */ --color-logo-navy: #0A2E66; /* Logo / SVG text color */ /* Accent — energetic orange */ --color-accent: #FF6B00; /* Main orange accent */ --color-accent-hover: #FF8533; /* Orange hover/light */ --color-accent-2: #FF6F00; /* Badge dot orange */ --color-accent-3: #FF3B3B; /* Ribbon / danger red */ /* Semantic / status colors */ --color-success: #22c55e; /* Checkmark / trust dot green */ --color-success-glow: #22e57a; /* List checkmark glow green */ --color-success-wa: #25D366; /* WhatsApp green */ --color-success-wa-2: #20bd5a; /* WhatsApp hover */ --color-success-wa-3: #34eb7a; /* WhatsApp gradient mid */ --color-success-wa-4: #7affa6; /* WhatsApp gradient end */ --color-error: #AE1C28; /* French flag red */ --color-stars: #FFC107; /* Review stars amber */ --color-highlight-gold: #FFD500; /* Gold highlight (CTA points) */ /* French tricolor (decorative dividers / flags) */ --color-flag-blue: #002395; --color-flag-white: #ffffff; --color-flag-red: #ED2939; /* ------------------------------------------------------------------- NEUTRAL / BACKGROUND COLORS ------------------------------------------------------------------- */ --color-bg-main: #ffffff; /* Page / section white background */ --color-bg-light: #f6f9ff; /* Light blue-tinted background */ --color-bg-light-2: #f0f5ff; /* Slightly stronger light bg */ --color-bg-light-3: #f8faff; /* Panel inner bg */ --color-bg-hero: #05070B; /* Hero dark background */ --color-bg-badge: #eff4ff; /* Hero badge background */ /* Card / glass surfaces */ --color-surface-card: rgba(255, 255, 255, 0.10); /* Glass card bg */ --color-surface-card-hover: rgba(255, 255, 255, 0.12); /* ------------------------------------------------------------------- TEXT COLORS ------------------------------------------------------------------- */ --color-text-base: #0B1220; /* Main body text (near black) */ --color-text-dark: #0b0f14; /* Footer / darkest text */ --color-text-heading: #0A2E66; /* Heading navy */ --color-text-muted: #475569; /* Muted / secondary text */ --color-text-muted-2: #64748b; /* Footer muted */ --color-text-muted-3: #4b5563; /* Benefit card text */ --color-text-medium: #1e2a3a; /* Section subheading */ --color-text-medium-2: #1f2b3a; /* Pricing / alt medium */ --color-text-medium-3: #2b3340; /* Card paragraph text */ --color-text-nav: #333333; /* Nav link color */ --color-text-white: #ffffff; /* White text */ --color-text-hero-sub: #EAF7FF; /* Hero subtitle light blue */ --color-text-light-blue:#dbeafe; /* Trust row text */ --color-text-ink: #101a2b; /* Table header ink */ --color-text-badge-navy:#17345f; /* Hero badge text */ /* ------------------------------------------------------------------- BORDER COLORS ------------------------------------------------------------------- */ --color-border-light: #dbe7ff; /* Standard card border */ --color-border-divider: #e9eef5; /* Footer divider */ --color-border-table: #f0f8ff; /* Table row border */ --color-border-badge: rgba(10, 46, 102, 0.12); /* Badge border */ --color-border-glass: rgba(255, 255, 255, 0.18); /* Glass border */ --color-border-scroll: #cfe0ff; /* Scrollbar thumb */ /* ------------------------------------------------------------------- TYPOGRAPHY ------------------------------------------------------------------- */ /* Font families */ --font-heading: 'Roboto', system-ui, -apple-system, sans-serif; --font-body: 'Roboto', system-ui, -apple-system, sans-serif; --font-logo: 'Arial Black', Impact, sans-serif; --font-system: Inter, system-ui, sans-serif; /* The Elementor runtime variable (kept for compatibility) */ --font-elementor: var(--e-global-typography-primary-font-family), sans-serif; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fw-ultra: 1000; /* ------------------------------------------------------------------- BORDER RADIUS ------------------------------------------------------------------- */ --radius-xs: 6px; /* Nav link hover */ --radius-sm: 8px; /* Button CTA */ --radius-md: 12px; /* Urgency badge / pay box */ --radius-card: 14px; /* Cards, pricing CTAs */ --radius-card-lg: 16px; /* FAQ, benefit cards */ --radius-section: 18px; /* VOD panel */ --radius-xl: 20px; /* Section cards */ --radius-2xl: 22px; /* Pricing cards */ --radius-circle: 50%; /* Circular icons */ --radius-pill: 999px; /* Badges, pills */ /* ------------------------------------------------------------------- BOX SHADOWS ------------------------------------------------------------------- */ --shadow-xs: 0 4px 15px rgba(53, 99, 233, 0.35); /* CTA button */ --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.12); /* Card small */ --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.16); /* Card hover */ --shadow-card: 0 8px 22px rgba(10, 46, 102, 0.12); /* Logo card */ --shadow-card-hover: 0 14px 28px rgba(10, 46, 102, 0.16); /* Logo card hover */ --shadow-card-blue: 0 8px 24px rgba(10, 46, 102, 0.12); /* Standard card */ --shadow-card-blue-2: 0 12px 32px rgba(10, 46, 102, 0.12); /* VOD panel */ --shadow-pricing: 0 10px 28px rgba(0, 0, 0, 0.12); /* Pricing card */ --shadow-pricing-feat: 0 14px 40px rgba(255, 107, 0, 0.18); /* Featured pricing */ --shadow-section: 0 5px 25px rgba(10, 46, 102, 0.10); /* Compare table */ --shadow-benefit: 0 5px 15px rgba(10, 46, 102, 0.10); /* Benefit card */ --shadow-cta: 0 14px 30px rgba(0, 0, 0, 0.22); /* CTA button */ --shadow-btn-white: 0 10px 22px rgba(255, 255, 255, 0.24);/* White button */ --shadow-btn-orange: 0 10px 30px rgba(255, 107, 0, 0.30); /* Orange button */ --shadow-btn-wa: 0 10px 30px rgba(37, 211, 102, 0.26); /* WhatsApp button */ --shadow-proof-card: 0 16px 42px rgba(0, 0, 0, 0.25); /* Testimonial card */ --shadow-icon: 0 8px 20px rgba(10, 46, 102, 0.18); /* Icon circle */ --shadow-faq: 0 6px 18px rgba(13, 54, 112, 0.08); /* FAQ item */ --shadow-faq-open: 0 10px 26px rgba(13, 54, 112, 0.12); /* FAQ open */ /* ------------------------------------------------------------------- SPACING & LAYOUT ------------------------------------------------------------------- */ --max-width-content: 1200px; /* Standard content max-width */ --max-width-wide: 1400px; /* Wide header/footer */ --max-width-narrow: 980px; /* Comparison table */ --max-width-pricing: 1100px; /* Pricing section */ --max-width-text: 860px; /* Long form text blocks */ /* ------------------------------------------------------------------- TRANSITION ------------------------------------------------------------------- */ --transition-fast: all 0.15s ease; --transition-base: all 0.3s ease; }