/* ===== Per-domain theme overrides ===== * * The corporate site renders the same markup for every customer domain; * a single CSS-variable-driven theme picks the visual identity (hero * palette, accent buttons, CTA gradient, hero geometry tint). * * The CSS variables in :root are the DEFAULTS — themes.css below overrides * them per [data-theme=X] selector on . The Tailwind `accent` colour * is set separately in includes/header.php so utility classes like * `bg-accent` / `text-accent` track the theme as well. * * For Tailwind utility classes that we don't fully own (e.g. `bg-violet-50`, * `hover:bg-violet-700`, `text-purple-200`) we override them with a * higher-specificity selector `html[data-theme=X] .bg-violet-50` so the * existing markup picks up the theme without a refactor — Tailwind CDN * compiles utilities at runtime, our overrides win on specificity (1 id- * less attribute selector + 1 class beats 1 class). * * Default tokens (the violet preset) — keeps an unset domain matching the * historical look while themes.css is being built out. */ :root { --t1-accent: #7c3aed; --t1-accent-strong: #6d28d9; --t1-accent-soft: #f5f3ff; --t1-accent-softer: #ede9fe; --t1-hero-bg: #0b0f1a; --t1-hero-glow: rgba(124, 58, 237, 0.30); --t1-hero-glow-2: rgba(139, 92, 246, 0.15); --t1-cta-from: #6d28d9; --t1-cta-to: #4c1d95; --t1-cta-soft: #ddd6fe; --t1-headline-from: #a78bfa; --t1-headline-to: #d8b4fe; --t1-stat-from: #f59e0b; --t1-stat-to: #fbbf24; } /* ── Theme presets ── kept alphabetical after `violet` (the default). * Each block sets the seven palette tokens consumed by style.css and the * Tailwind-utility overrides below. */ html[data-theme="violet"] { /* canonical default — kept explicit so the override block below has a seed */ } html[data-theme="emerald"] { --t1-accent: #047857; /* WCAG AA: 5.45:1 on white */ --t1-accent-strong: #065f46; --t1-accent-soft: #ecfdf5; --t1-accent-softer: #d1fae5; --t1-hero-bg: #0a1410; --t1-hero-glow: rgba(16, 185, 129, 0.30); --t1-hero-glow-2: rgba(52, 211, 153, 0.15); --t1-cta-from: #047857; --t1-cta-to: #064e3b; --t1-cta-soft: #a7f3d0; --t1-headline-from: #6ee7b7; --t1-headline-to: #a7f3d0; --t1-stat-from: #fbbf24; --t1-stat-to: #fde68a; } html[data-theme="ocean"] { --t1-accent: #0369a1; /* WCAG AA: 5.39:1 on white */ --t1-accent-strong: #075985; --t1-accent-soft: #f0f9ff; --t1-accent-softer: #e0f2fe; --t1-hero-bg: #08111c; --t1-hero-glow: rgba(14, 165, 233, 0.30); --t1-hero-glow-2: rgba(56, 189, 248, 0.15); --t1-cta-from: #0369a1; --t1-cta-to: #0c4a6e; --t1-cta-soft: #bae6fd; --t1-headline-from: #7dd3fc; --t1-headline-to: #bae6fd; --t1-stat-from: #facc15; --t1-stat-to: #fde047; } html[data-theme="sunset"] { --t1-accent: #c2410c; /* WCAG AA: 5.06:1 on white */ --t1-accent-strong: #9a3412; --t1-accent-soft: #fff7ed; --t1-accent-softer: #ffedd5; --t1-hero-bg: #1a0d12; --t1-hero-glow: rgba(249, 115, 22, 0.28); --t1-hero-glow-2: rgba(244, 63, 94, 0.15); --t1-cta-from: #c2410c; --t1-cta-to: #9a3412; --t1-cta-soft: #fed7aa; --t1-headline-from: #fdba74; --t1-headline-to: #fcd34d; --t1-stat-from: #f43f5e; --t1-stat-to: #fb7185; } html[data-theme="slate"] { --t1-accent: #0f172a; --t1-accent-strong: #000000; --t1-accent-soft: #f8fafc; --t1-accent-softer: #e2e8f0; --t1-hero-bg: #020617; --t1-hero-glow: rgba(148, 163, 184, 0.18); --t1-hero-glow-2: rgba(100, 116, 139, 0.12); --t1-cta-from: #1e293b; --t1-cta-to: #020617; --t1-cta-soft: #cbd5e1; --t1-headline-from: #cbd5e1; --t1-headline-to: #f1f5f9; --t1-stat-from: #facc15; --t1-stat-to: #fde68a; } html[data-theme="gold"] { --t1-accent: #b45309; --t1-accent-strong: #92400e; --t1-accent-soft: #fffbeb; --t1-accent-softer: #fef3c7; --t1-hero-bg: #0c0a08; --t1-hero-glow: rgba(217, 119, 6, 0.28); --t1-hero-glow-2: rgba(245, 158, 11, 0.14); --t1-cta-from: #92400e; --t1-cta-to: #451a03; --t1-cta-soft: #fde68a; --t1-headline-from: #fcd34d; --t1-headline-to: #fde68a; --t1-stat-from: #f59e0b; --t1-stat-to: #fbbf24; } html[data-theme="crimson"] { --t1-accent: #dc2626; --t1-accent-strong: #b91c1c; --t1-accent-soft: #fef2f2; --t1-accent-softer: #fee2e2; --t1-hero-bg: #160808; --t1-hero-glow: rgba(239, 68, 68, 0.28); --t1-hero-glow-2: rgba(244, 63, 94, 0.15); --t1-cta-from: #b91c1c; --t1-cta-to: #7f1d1d; --t1-cta-soft: #fecaca; --t1-headline-from: #fca5a5; --t1-headline-to: #fda4af; --t1-stat-from: #fbbf24; --t1-stat-to: #fde68a; } html[data-theme="teal"] { --t1-accent: #0f766e; /* WCAG AA: 5.81:1 on white */ --t1-accent-strong: #115e59; --t1-accent-soft: #f0fdfa; --t1-accent-softer: #ccfbf1; --t1-hero-bg: #08171a; --t1-hero-glow: rgba(20, 184, 166, 0.28); --t1-hero-glow-2: rgba(45, 212, 191, 0.15); --t1-cta-from: #0f766e; --t1-cta-to: #134e4a; --t1-cta-soft: #99f6e4; --t1-headline-from: #5eead4; --t1-headline-to: #99f6e4; --t1-stat-from: #fbbf24; --t1-stat-to: #fde68a; } /* ── Theme-aware semantic classes ── used by index.php / about.php / etc. * for the hand-crafted gradients that don't translate cleanly to a * single Tailwind utility. */ .theme-headline-gradient { background: linear-gradient(to right, var(--t1-headline-from), var(--t1-headline-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .theme-stat-gradient { background: linear-gradient(135deg, var(--t1-stat-from), var(--t1-stat-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .theme-icon-bg { background-color: var(--t1-accent-soft); } .theme-icon-bg-100 { background-color: var(--t1-accent-softer); } /* ── Tailwind utility overrides ── for hardcoded violet/purple/amber * classes scattered across index.php / about.php / careers.php / contact.php. * Higher specificity (`html[data-theme]` attribute selector + utility class) * beats Tailwind's single-class rule, so existing markup just works on every * theme without a markup migration. */ html[data-theme] .bg-violet-50 { background-color: var(--t1-accent-soft); } html[data-theme] .bg-violet-100 { background-color: var(--t1-accent-softer); } html[data-theme] .text-violet-400 { color: var(--t1-headline-from); } html[data-theme] .text-purple-200 { color: var(--t1-cta-soft); } html[data-theme] .hover\:bg-violet-700:hover { background-color: var(--t1-accent-strong); } html[data-theme] .hover\:text-violet-700:hover { color: var(--t1-accent-strong); } /* Hero h1 gradient span — `from-violet-400 to-purple-300` is the only place * we use Tailwind's gradient text utility on the homepage. Driving it via * the same headline tokens keeps the headline reading like the theme. */ html[data-theme] .from-violet-400 { --tw-gradient-from: var(--t1-headline-from) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme] .to-purple-300 { --tw-gradient-to: var(--t1-headline-to) var(--tw-gradient-to-position); } /* Stats h2 gradient span — `from-amber-400 to-yellow-300` */ html[data-theme] .from-amber-400 { --tw-gradient-from: var(--t1-stat-from) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html[data-theme] .to-yellow-300 { --tw-gradient-to: var(--t1-stat-to) var(--tw-gradient-to-position); } /* ============================================================ * LAYOUT VARIANTS — per-theme structural overrides * * Each theme below pushes beyond palette swaps to give the corporate * site a genuinely different shape: hero decoration, card geometry, * button radius, hover behaviour, section accents. The markup in * index.php / about.php / careers.php / contact.php is unchanged — * everything below leans on existing semantic classes (`feature-card`, * `industry-card`, `btn-primary`, `dashboard-mockup`, the Tailwind * `rounded-xl` / `rounded-2xl` utilities) plus the universal hero * elements (`.hero-bg`, `.hero-glow*`, `.geo-shape`, `.grid-pattern`). * * Default (violet) keeps the original look. Each non-violet theme * makes a deliberate departure. * ============================================================ */ /* ───── EMERALD: organic / soft / dot pattern ───── */ html[data-theme="emerald"] .geo-shape { display: none; } html[data-theme="emerald"] .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(110, 231, 183, 0.16) 1.5px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } html[data-theme="emerald"] .feature-card, html[data-theme="emerald"] .industry-card { border-radius: 1.75rem; border-width: 1.5px; } html[data-theme="emerald"] .feature-card .rounded-xl, html[data-theme="emerald"] .industry-card .rounded-xl { border-radius: 9999px; /* circular icon containers */ } html[data-theme="emerald"] .btn-primary, html[data-theme="emerald"] .rounded-xl.bg-accent { border-radius: 0.75rem; } /* ───── OCEAN: corporate SaaS / clean / pill buttons ───── */ html[data-theme="ocean"] .geo-shape { display: none; } html[data-theme="ocean"] .hero-bg { background: linear-gradient(180deg, var(--t1-hero-bg) 0%, #0a1828 100%); } html[data-theme="ocean"] .hero-bg::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(125, 211, 252, 0.10)); pointer-events: none; /* Sits above .hero-glow (no z-index) but below content (.relative.z-10) * so the bottom-fade actually darkens the glow edge instead of being * obscured by it. */ z-index: 5; } html[data-theme="ocean"] .feature-card, html[data-theme="ocean"] .industry-card { border-radius: 0.5rem; border-top: 3px solid var(--t1-accent); } html[data-theme="ocean"] .feature-card:hover, html[data-theme="ocean"] .industry-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.18); } html[data-theme="ocean"] .btn-primary, html[data-theme="ocean"] section a.bg-accent, html[data-theme="ocean"] .cta-gradient a { border-radius: 9999px; } /* ───── SLATE: minimalist editorial / square corners / no glow ───── */ html[data-theme="slate"] .geo-shape, html[data-theme="slate"] .hero-glow, html[data-theme="slate"] .hero-glow-2 { display: none; } html[data-theme="slate"] .hero-bg { background: linear-gradient(180deg, #020617 0%, #0f172a 100%); } html[data-theme="slate"] .hero-bg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.4), transparent); } html[data-theme="slate"] .feature-card, html[data-theme="slate"] .industry-card { border-radius: 0; border-color: #e2e8f0; box-shadow: none; } html[data-theme="slate"] .feature-card:hover, html[data-theme="slate"] .industry-card:hover { transform: none; box-shadow: none; border-color: #475569; } html[data-theme="slate"] .btn-primary, html[data-theme="slate"] .rounded-xl { border-radius: 0.25rem; } html[data-theme="slate"] section h1, html[data-theme="slate"] section h2 { letter-spacing: -0.045em; } html[data-theme="slate"] .dashboard-mockup { border-radius: 0; } /* ───── GOLD: premium / financial / vignette + pill ───── */ html[data-theme="gold"] .geo-shape { display: none; } html[data-theme="gold"] .hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.55) 95%); pointer-events: none; /* Vignette must paint over .hero-glow, otherwise the radial glow swallows * the edge-darken and the vignette never shows. */ z-index: 5; } html[data-theme="gold"] .hero-bg::after { content: ''; position: absolute; left: 50%; top: 50%; width: 140%; height: 1px; background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.4), transparent); transform: translate(-50%, 220px); pointer-events: none; z-index: 5; } html[data-theme="gold"] .feature-card, html[data-theme="gold"] .industry-card { border: 1px solid rgba(180, 83, 9, 0.18); border-radius: 1rem; background: linear-gradient(180deg, #fff, #fffbeb); } html[data-theme="gold"] .btn-primary, html[data-theme="gold"] .rounded-xl.bg-accent { border-radius: 9999px; } /* ───── SUNSET: warm / asymmetric / angled overlay ───── */ html[data-theme="sunset"] .geo-shape { opacity: 0.06; } html[data-theme="sunset"] .hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 45%, rgba(244, 63, 94, 0.10) 100%), linear-gradient(245deg, transparent 60%, rgba(251, 146, 60, 0.08) 100%); pointer-events: none; } html[data-theme="sunset"] .feature-card, html[data-theme="sunset"] .industry-card { border-radius: 0.5rem 1.5rem 0.5rem 1.5rem; } html[data-theme="sunset"] .feature-card:hover, html[data-theme="sunset"] .industry-card:hover { transform: translateY(-4px) rotate(-0.4deg); } html[data-theme="sunset"] .btn-primary, html[data-theme="sunset"] .rounded-xl.bg-accent { border-radius: 0.5rem 1rem 0.5rem 1rem; } /* ───── CRIMSON: bold / high-energy / diagonal stripes ───── */ html[data-theme="crimson"] .geo-shape { display: none; } html[data-theme="crimson"] .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 14px, rgba(239, 68, 68, 0.05) 14px, rgba(239, 68, 68, 0.05) 28px ); pointer-events: none; } html[data-theme="crimson"] .feature-card { border-left: 4px solid var(--t1-accent); border-radius: 0.25rem; padding-left: 1.75rem; } html[data-theme="crimson"] .industry-card { border-left: 4px solid var(--t1-accent); border-radius: 0.25rem; } html[data-theme="crimson"] .feature-card:hover, html[data-theme="crimson"] .industry-card:hover { transform: translateX(4px); box-shadow: -8px 0 0 -4px var(--t1-accent), 0 12px 28px -10px rgba(0,0,0,0.12); } html[data-theme="crimson"] .btn-primary, html[data-theme="crimson"] .rounded-xl.bg-accent { border-radius: 0; } /* ───── TEAL: modern / orbital rings / ultra rounded ───── */ html[data-theme="teal"] .geo-shape { display: none; } html[data-theme="teal"] .hero-bg::before, html[data-theme="teal"] .hero-bg::after { content: ''; position: absolute; top: 50%; left: 50%; border: 1px solid rgba(45, 212, 191, 0.10); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } html[data-theme="teal"] .hero-bg::before { width: 700px; height: 700px; border-color: rgba(45, 212, 191, 0.10); box-shadow: inset 0 0 0 80px rgba(45, 212, 191, 0.04), inset 0 0 0 160px rgba(45, 212, 191, 0.02); } html[data-theme="teal"] .hero-bg::after { width: 1100px; height: 1100px; border-color: rgba(45, 212, 191, 0.06); } html[data-theme="teal"] .feature-card, html[data-theme="teal"] .industry-card { border-radius: 1.75rem; } html[data-theme="teal"] .feature-card .rounded-xl, html[data-theme="teal"] .industry-card .rounded-xl { border-radius: 9999px; } html[data-theme="teal"] .btn-primary, html[data-theme="teal"] .rounded-xl.bg-accent { border-radius: 9999px; } html[data-theme="teal"] .dashboard-mockup { border-radius: 1.5rem; } /* ============================================================ * STRUCTURAL VARIANTS — hero alignment, typography, section padding * * Below changes the *shape* of the page itself, not just the colour. * Each rule overrides Tailwind utility classes via the `html[data-theme]` * specificity boost (0,2,1 vs 0,1,0). No markup changes required — * everything keys off classes already present in index.php / about.php. * * The intent is that switching themes feels like loading a different * site, not the same site repainted. * ============================================================ */ /* ── SLATE: editorial / left-aligned hero / serif h1+h2 / huge type ── */ html[data-theme="slate"] section.hero-bg .text-center { text-align: left; } html[data-theme="slate"] section.hero-bg .max-w-4xl { margin-left: 0; margin-right: 0; max-width: 56rem; } html[data-theme="slate"] section.hero-bg .mx-auto { margin-left: 0; margin-right: auto; } html[data-theme="slate"] section.hero-bg .justify-center { justify-content: flex-start; } html[data-theme="slate"] section h1 { font-family: 'Times New Roman', Georgia, serif; font-weight: 700; letter-spacing: -0.045em; font-size: clamp(2.75rem, 6.5vw, 5.5rem); line-height: 0.96; } html[data-theme="slate"] section h2 { font-family: 'Times New Roman', Georgia, serif; font-weight: 700; letter-spacing: -0.035em; } html[data-theme="slate"] section.py-24 { padding-top: 7rem; padding-bottom: 7rem; } @media (min-width: 640px) { html[data-theme="slate"] section.sm\:py-32 { padding-top: 10rem; padding-bottom: 10rem; } } /* Section header alignment also flips to left */ html[data-theme="slate"] section#features .text-center, html[data-theme="slate"] section#industries .text-center, html[data-theme="slate"] section#stats .text-center { text-align: left; } html[data-theme="slate"] section#features .text-center .mx-auto, html[data-theme="slate"] section#industries .text-center .mx-auto, html[data-theme="slate"] section#stats .text-center .mx-auto { margin-left: 0; } /* Feature/industry icon containers go square in editorial mode */ html[data-theme="slate"] .feature-card .rounded-xl, html[data-theme="slate"] .industry-card .rounded-xl { border-radius: 0; } /* Section backgrounds — single editorial slate-50 ribbon */ html[data-theme="slate"] section#showcase { background: #ffffff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } html[data-theme="slate"] section#features, html[data-theme="slate"] section#industries { background: #f8fafc; } /* ── CRIMSON: dense / left-aligned / heavy weight / wider tracking on labels ── */ html[data-theme="crimson"] section.hero-bg .text-center { text-align: left; } html[data-theme="crimson"] section.hero-bg .max-w-4xl { margin-left: 0; } html[data-theme="crimson"] section.hero-bg .mx-auto { margin-left: 0; margin-right: auto; } html[data-theme="crimson"] section.hero-bg .justify-center { justify-content: flex-start; } html[data-theme="crimson"] section h1 { font-weight: 900; letter-spacing: -0.045em; } html[data-theme="crimson"] section h2 { font-weight: 800; } /* Tighter rhythm — denser, more energetic */ html[data-theme="crimson"] section.py-24 { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 640px) { html[data-theme="crimson"] section.sm\:py-32 { padding-top: 5.5rem; padding-bottom: 5.5rem; } } /* Wide-tracked all-caps eyebrow labels */ html[data-theme="crimson"] section .uppercase.tracking-widest { letter-spacing: 0.32em; font-weight: 800; } /* Square icon containers tilted 45° (rhombus) */ html[data-theme="crimson"] .feature-card .rounded-xl, html[data-theme="crimson"] .industry-card .rounded-xl { border-radius: 0.25rem; transform: rotate(45deg); } html[data-theme="crimson"] .feature-card .rounded-xl > svg, html[data-theme="crimson"] .industry-card .rounded-xl > svg { transform: rotate(-45deg); } /* ── SUNSET: asymmetric — slight horizontal offset, italic h1 span ── */ html[data-theme="sunset"] section.hero-bg .text-center { text-align: left; } html[data-theme="sunset"] section.hero-bg .max-w-4xl { margin-left: 6%; } html[data-theme="sunset"] section.hero-bg .mx-auto { margin-left: 6%; margin-right: auto; } html[data-theme="sunset"] section.hero-bg .justify-center { justify-content: flex-start; } html[data-theme="sunset"] section h1 .from-violet-400 { font-style: italic; font-weight: 600; } html[data-theme="sunset"] section#showcase { background: #fff7ed; } /* ── GOLD: serif headings, italic accent, premium spacing ── */ html[data-theme="gold"] section h1, html[data-theme="gold"] section h2 { font-family: 'Times New Roman', Georgia, serif; font-weight: 600; letter-spacing: -0.025em; } html[data-theme="gold"] section h1 .from-violet-400 { font-style: italic; font-weight: 500; } html[data-theme="gold"] section.py-24 { padding-top: 7rem; padding-bottom: 7rem; } @media (min-width: 640px) { html[data-theme="gold"] section.sm\:py-32 { padding-top: 9rem; padding-bottom: 9rem; } } html[data-theme="gold"] section#showcase { background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); } html[data-theme="gold"] section#features { background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%); } html[data-theme="gold"] section#industries { background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%); } /* ── OCEAN: very generous spacing, tinted showcase ── */ html[data-theme="ocean"] section.py-24 { padding-top: 7rem; padding-bottom: 7rem; } @media (min-width: 640px) { html[data-theme="ocean"] section.sm\:py-32 { padding-top: 10rem; padding-bottom: 10rem; } } html[data-theme="ocean"] section#showcase { background: #f0f9ff; } html[data-theme="ocean"] section#industries { background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%); } html[data-theme="ocean"] .feature-card, html[data-theme="ocean"] .industry-card { padding: 2.5rem; } /* ── EMERALD: compact h1, tinted showcase ── */ html[data-theme="emerald"] section h1 { font-size: clamp(2.25rem, 4.8vw, 3.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; } html[data-theme="emerald"] section#showcase { background: #ecfdf5; } html[data-theme="emerald"] section#industries { background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%); } html[data-theme="emerald"] .feature-card, html[data-theme="emerald"] .industry-card { padding: 2.25rem; } /* ── TEAL: extra roomy cards, tinted showcase ── */ html[data-theme="teal"] section#showcase { background: #f0fdfa; } html[data-theme="teal"] .feature-card, html[data-theme="teal"] .industry-card { padding: 3rem 2rem; } html[data-theme="teal"] section h1 { font-weight: 600; letter-spacing: -0.02em; } /* ── CRIMSON: tinted showcase, hot border underneath header ── */ html[data-theme="crimson"] section#showcase { background: #fef2f2; } html[data-theme="crimson"] section#industries { background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%); }