/* ============================================ GLOBAL PRODUCT THEMING - IAT FUSION When [data-product-theme] is set on , the entire page (gradient overlay, navbar accent, hero badge, buttons, glass borders, scroll-bar, ambient glow rings) re-tints to the active product's palette. Theme variables are pushed in by products.js: --theme-primary, --theme-secondary, --theme-accent, *-rgb variants. ============================================ */ html[data-product-theme] { transition: background-color .9s ease; } /* ── Page-wide ambient gradient overlay ─────── */ html[data-product-theme] .gradient-overlay { background: radial-gradient(ellipse at 20% 10%, rgba(var(--theme-primary-rgb), .22) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(var(--theme-secondary-rgb), .20) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(var(--theme-accent-rgb), .18) 0%, transparent 70%), linear-gradient(135deg, rgba(var(--theme-accent-rgb), .35) 0%, rgba(var(--theme-primary-rgb), .20) 50%, rgba(var(--theme-secondary-rgb), .25) 100%); animation: themedShift 14s ease-in-out infinite; transition: background 1.2s cubic-bezier(.16,1,.3,1); opacity: 1; mix-blend-mode: normal; } @keyframes themedShift { 0%, 100% { filter: hue-rotate(0deg) saturate(1.05); } 50% { filter: hue-rotate(8deg) saturate(1.20); } } /* ── Body scrim that sits above shader, below content, to deepen the mood ── */ html[data-product-theme] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(var(--theme-primary-rgb), .12) 0%, transparent 50%), radial-gradient(circle at 50% 100%, rgba(var(--theme-accent-rgb), .25) 0%, transparent 60%); transition: background 1.2s ease; } /* ── Navbar is intentionally NOT themed. The top bar keeps the global IAT FUSION brand identity across every page and product. ── */ /* ── Products hero (badge, title, button) ───── */ html[data-product-theme] .products-hero-section .hero-badge { background: rgba(var(--theme-primary-rgb), .12) !important; border-color: rgba(var(--theme-primary-rgb), .45) !important; box-shadow: 0 0 30px rgba(var(--theme-primary-rgb), .25), inset 0 0 20px rgba(var(--theme-primary-rgb), .08); transition: all .9s ease; } html[data-product-theme] .products-hero-section .hero-badge i, html[data-product-theme] .products-hero-section .hero-badge span { color: var(--theme-primary) !important; transition: color .9s ease; } html[data-product-theme] .products-hero-section .title-highlight { background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), var(--theme-primary), var(--theme-accent), var(--theme-primary)) !important; background-size: 250% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 35px rgba(var(--theme-primary-rgb), .35)); animation: themedTextSlide 6s linear infinite; } @keyframes themedTextSlide { to { background-position: 250% center; } } html[data-product-theme] .products-hero-section .btn-primary { background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important; color: #0f172a !important; box-shadow: 0 12px 35px rgba(var(--theme-primary-rgb), .45), 0 0 80px rgba(var(--theme-primary-rgb), .15); transition: all .9s ease; } html[data-product-theme] .products-hero-section .btn-primary:hover { box-shadow: 0 18px 50px rgba(var(--theme-primary-rgb), .60), 0 0 100px rgba(var(--theme-secondary-rgb), .30); } /* ── Configurator panel border / glow ───────── */ html[data-product-theme] .configurator-wrap.glass-refract { box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 80px rgba(var(--theme-primary-rgb), .15), inset 0 1px 0 rgba(255,255,255,.30); transition: box-shadow .9s ease; } html[data-product-theme] .configurator-wrap.glass-refract::before { background: conic-gradient(from 180deg, rgba(var(--theme-primary-rgb), .65), rgba(var(--theme-secondary-rgb), .55), rgba(var(--theme-accent-rgb), .55), rgba(255,255,255,.45), rgba(var(--theme-primary-rgb), .65)) !important; } /* ── Glass-refract cards inherit the theme ──── */ html[data-product-theme] .glass-refract::before { background: conic-gradient(from 180deg, rgba(var(--theme-primary-rgb), .55), rgba(var(--theme-secondary-rgb), .50), rgba(var(--theme-accent-rgb), .55), rgba(255,255,255,.45), rgba(var(--theme-primary-rgb), .55)); } /* ── Scrollbar ──────────────────────────────── */ html[data-product-theme] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--theme-primary), var(--theme-secondary)) !important; } html[data-product-theme] ::-webkit-scrollbar-thumb:hover { background: var(--theme-secondary) !important; } /* ── Carousel arrows / progress ring inherit ── */ html[data-product-theme] .progress-ring-bar { stroke: var(--theme-primary) !important; filter: drop-shadow(0 0 6px rgba(var(--theme-primary-rgb), .6)); } /* ── Section background tint behind product tile ── */ html[data-product-theme] .products-section { background: radial-gradient(ellipse at 50% 0%, rgba(var(--theme-primary-rgb), .06) 0%, transparent 60%); transition: background 1s ease; } /* ── Floating ambient corner orbs (decorative) ─ */ html[data-product-theme] body::after { content: ''; position: fixed; pointer-events: none; z-index: -1; width: 50vmin; height: 50vmin; right: -15vmin; top: 30vh; background: radial-gradient(circle, rgba(var(--theme-primary-rgb), .35) 0%, rgba(var(--theme-primary-rgb), .10) 35%, transparent 70%); filter: blur(40px); animation: floatOrb 12s ease-in-out infinite alternate; transition: background 1.2s ease; } @keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); opacity: .85; } 100% { transform: translate(-8vw, 10vh) scale(1.15); opacity: 1; } } /* ── Per-product mood overrides (extra polish) ─ */ html[data-product-theme="loesche"] .gradient-overlay { filter: contrast(1.05) brightness(1.02); } html[data-product-theme="admitly"] .gradient-overlay { filter: saturate(1.20) contrast(1.05); } html[data-product-theme="legalai"] .gradient-overlay { filter: brightness(.95) contrast(1.10); } html[data-product-theme="medibridge"] .gradient-overlay { filter: saturate(1.10) brightness(1.05); } html[data-product-theme="speeddating"].gradient-overlay { filter: saturate(1.30) contrast(1.05); } html[data-product-theme="trucking"] .gradient-overlay { filter: contrast(1.08); } /* Reduce-motion friendly */ @media (prefers-reduced-motion: reduce) { html[data-product-theme] .gradient-overlay, html[data-product-theme] body::after, html[data-product-theme] .products-hero-section .title-highlight { animation: none !important; } }