/** * EasyIntrastat — Six design themes (soft blue + grey, professional) * Apply by setting data-theme on , e.g. * Logo unchanged; these override backgrounds, text, borders, accent blue, fonts and headers. */ /* ——— 1. Serenity ——— * Very light blue-grey background, soft slate text, gentle blue accents. * Minimal and calm; easy on the eyes. Source Sans 3 for a friendly, readable look. */ html[data-theme="serenity"] { --font-heading: 'Source Sans 3', system-ui, sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --h1-size: 2rem; --h2-size: 1.5rem; --h3-size: 1.2rem; --h1-weight: 700; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: 0; --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --secondary: #64748b; --success: #0d9488; --warning: #d97706; --error: #dc2626; --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --text-primary: #334155; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-focus: #3b82f6; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04); --radius: 8px; --radius-lg: 12px; --company-primary: #3b82f6; --company-primary-dark: #2563eb; --company-text: #334155; --company-text-muted: #94a3b8; --company-border: #e2e8f0; --company-bg: #f8fafc; } /* ——— 2. Mist ——— * Cool grey base with a hint of blue in surfaces; soft blue for actions. * Clean, corporate, and trustworthy. DM Sans for a geometric, corporate feel. */ html[data-theme="mist"] { --font-heading: 'DM Sans', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --h1-size: 2.05rem; --h2-size: 1.45rem; --h3-size: 1.15rem; --h1-weight: 700; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: -0.02em; --primary: #0ea5e9; --primary-dark: #0284c7; --primary-light: #38bdf8; --secondary: #64748b; --success: #059669; --warning: #ca8a04; --error: #b91c1c; --bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --border: #cbd5e1; --border-focus: #0ea5e9; --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05); --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08); --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04); --radius: 6px; --radius-lg: 10px; --company-primary: #0ea5e9; --company-primary-dark: #0284c7; --company-text: #1e293b; --company-text-muted: #64748b; --company-border: #cbd5e1; --company-bg: #f1f5f9; } /* ——— 3. Horizon ——— * Slightly warmer greys with a clear sky blue accent. Card-friendly. * Clear hierarchy and structure. Plus Jakarta Sans for a modern, clear hierarchy. */ html[data-theme="horizon"] { --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --h1-size: 2.1rem; --h2-size: 1.5rem; --h3-size: 1.2rem; --h1-weight: 700; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: -0.025em; --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --secondary: #475569; --success: #047857; --warning: #b45309; --error: #991b1b; --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --border: #e2e8f0; --border-focus: #2563eb; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --radius: 10px; --radius-lg: 14px; --company-primary: #2563eb; --company-primary-dark: #1d4ed8; --company-text: #1e293b; --company-text-muted: #64748b; --company-border: #e2e8f0; --company-bg: #f8fafc; } /* ——— 4. Slate ——— * Deeper greys, soft blue as accent only. Strong contrast. * Professional, document-oriented feel. IBM Plex Sans for a serious, document look. */ html[data-theme="slate"] { --font-heading: 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --h1-size: 1.95rem; --h2-size: 1.4rem; --h3-size: 1.15rem; --h1-weight: 600; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: 0.01em; --primary: #2563eb; --primary-dark: #1e40af; --primary-light: #3b82f6; --secondary: #475569; --success: #065f46; --warning: #92400e; --error: #7f1d1d; --bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --border: #cbd5e1; --border-focus: #2563eb; --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06); --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1); --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.05); --radius: 6px; --radius-lg: 8px; --company-primary: #2563eb; --company-primary-dark: #1e40af; --company-text: #0f172a; --company-text-muted: #64748b; --company-border: #cbd5e1; --company-bg: #f1f5f9; } /* ——— 5. Cloud ——— * Almost white with very soft blue tints; very light borders. * Airy, spacious, and minimal. Outfit for a light, airy feel. */ html[data-theme="cloud"] { --font-heading: 'Outfit', system-ui, sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --h1-size: 2.15rem; --h2-size: 1.55rem; --h3-size: 1.2rem; --h1-weight: 600; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: -0.02em; --primary: #0ea5e9; --primary-dark: #0284c7; --primary-light: #38bdf8; --secondary: #64748b; --success: #0d9488; --warning: #d97706; --error: #dc2626; --bg-primary: #fafbfc; --bg-secondary: #ffffff; --bg-tertiary: #f8fafc; --text-primary: #334155; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-focus: #0ea5e9; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04); --radius: 8px; --radius-lg: 12px; --company-primary: #0ea5e9; --company-primary-dark: #0284c7; --company-text: #334155; --company-text-muted: #94a3b8; --company-border: #e2e8f0; --company-bg: #fafbfc; } /* ——— 6. Navy Mist ——— * Soft navy-blue tones in headers/surfaces, light grey content. * Confident but still soft and approachable. Manrope for a confident, rounded look. */ html[data-theme="navy-mist"] { --font-heading: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --h1-size: 2rem; --h2-size: 1.5rem; --h3-size: 1.2rem; --h1-weight: 700; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: -0.02em; --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --secondary: #475569; --success: #059669; --warning: #d97706; --error: #dc2626; --bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e0e7ef; --text-primary: #1e293b; --text-secondary: #334155; --text-muted: #64748b; --border: #cbd5e1; --border-focus: #2563eb; --shadow-sm: 0 1px 2px 0 rgb(30 41 59 / 0.05); --shadow: 0 1px 3px 0 rgb(30 41 59 / 0.08), 0 1px 2px -1px rgb(30 41 59 / 0.08); --shadow-md: 0 4px 6px -1px rgb(30 41 59 / 0.08), 0 2px 4px -2px rgb(30 41 59 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(30 41 59 / 0.08), 0 4px 6px -4px rgb(30 41 59 / 0.04); --radius: 8px; --radius-lg: 12px; --company-primary: #2563eb; --company-primary-dark: #1d4ed8; --company-text: #1e293b; --company-text-muted: #64748b; --company-border: #cbd5e1; --company-bg: #f1f5f9; } /* ——— 7. Dark ——— * Dark mode: dark grey background, light text, blue accent. */ html[data-theme="dark"] { --font-heading: 'Source Sans 3', system-ui, sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --h1-size: 2rem; --h2-size: 1.5rem; --h3-size: 1.2rem; --h1-weight: 700; --h2-weight: 600; --h3-weight: 600; --heading-letter-spacing: 0; --primary: #60a5fa; --primary-dark: #3b82f6; --primary-light: #93c5fd; --secondary: #94a3b8; --success: #34d399; --warning: #fbbf24; --error: #f87171; --bg-primary: #1e293b; --bg-secondary: #0f172a; --bg-tertiary: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #475569; --border-focus: #60a5fa; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --radius: 8px; --radius-lg: 12px; --company-primary: #60a5fa; --company-primary-dark: #3b82f6; --company-text: #f1f5f9; --company-text-muted: #94a3b8; --company-border: #475569; --company-bg: #1e293b; --company-yellow: #facc15; } /* Dark mode: fix hardcoded light backgrounds so text stays readable */ html[data-theme="dark"] .company-hero--landing { background: linear-gradient(160deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .flow-step { background: var(--bg-secondary); border-color: var(--border); } html[data-theme="dark"] .flow-icon { background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(250, 204, 21, 0.15) 100%); } html[data-theme="dark"] .viz-pillar { background: var(--bg-secondary); border-color: var(--border); } html[data-theme="dark"] .viz-pillar-icon { background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(250, 204, 21, 0.15) 100%); } html[data-theme="dark"] .pricing-card--addon { background: rgba(96, 165, 250, 0.12); border-color: var(--company-primary); } html[data-theme="dark"] .knowledge-card:hover, html[data-theme="dark"] .pricing-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .flow-step:hover { border-color: rgba(96, 165, 250, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } html[data-theme="dark"] .website-container input, html[data-theme="dark"] .website-container textarea, html[data-theme="dark"] .website-container select { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-primary); } html[data-theme="dark"] .website-container input::placeholder, html[data-theme="dark"] .website-container textarea::placeholder { color: var(--text-muted); }