/* ================================================================== * * PharmaCoreMax — Theme Style Overrides * * Each theme is scoped to [data-theme-style="X"] on . * Default theme has NO rules here — it uses the existing CSS untouched. * * Themes available: * - premium : Inter font, soft shadows, modern SaaS feel * - editorial : Playfair Display serif + Inter, magazine-grade * - enterprise : Source Sans Pro, navy/gold, conservative B2B * * Each theme overrides: * 1. Typography (font stacks) * 2. Spacing & radius scale * 3. Shadow depth * 4. Landing-page hero treatment * 5. Card system * 6. Sidebar look * 7. Topbar refinements * 8. Buttons / inputs * ================================================================== */ /* ================================================================== * * THEME: PREMIUM CLINICAL — Inter, soft shadows, refined spacing * ================================================================== */ [data-theme-style="premium"] { /* Typography */ --pcm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --pcm-font-display: 'Inter', system-ui, sans-serif; /* Refined radius scale */ --pcm-radius-sm: 6px; --pcm-radius-md: 10px; --pcm-radius-lg: 14px; /* Soft modern shadows */ --pcm-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.06); --pcm-shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 32px -8px rgba(15, 23, 42, 0.08); --pcm-shadow-hero: 0 20px 60px -20px rgba(15, 23, 42, 0.18); } /* Apply font everywhere */ [data-theme-style="premium"] body, [data-theme-style="premium"] .app-body, [data-theme-style="premium"] .lp-body { font-family: var(--pcm-font-sans); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } [data-theme-style="premium"] h1, [data-theme-style="premium"] h2, [data-theme-style="premium"] h3, [data-theme-style="premium"] .lp-hero-title, [data-theme-style="premium"] .page-head h1 { font-family: var(--pcm-font-display) !important; letter-spacing: -0.025em; font-weight: 700; } /* ===== LANDING PAGE — Premium Clinical ===== */ [data-theme-style="premium"] .lp-hero { position: relative; overflow: hidden; } /* Ambient gradient mesh — replaces flat hero bg with subtle depth */ [data-theme-style="premium"] .lp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 600px at 0% 0%, rgba(15, 118, 110, 0.08), transparent 60%), radial-gradient(ellipse 600px 400px at 100% 0%, rgba(245, 158, 11, 0.06), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 100%, rgba(99, 102, 241, 0.04), transparent 60%); pointer-events: none; z-index: 0; } [data-theme-style="premium"] .lp-hero > * { position: relative; z-index: 1; } [data-theme-style="premium"] .lp-hero-badge { background: rgba(15, 118, 110, 0.08); border: 1px solid rgba(15, 118, 110, 0.16); backdrop-filter: blur(8px); color: var(--brand-primary); font-weight: 600; letter-spacing: 0.02em; } [data-theme-style="premium"] .lp-hero-title { line-height: 1.05; } /* Stat cards on hero — glass morphism */ [data-theme-style="premium"] .lp-hero-visual .lp-stat, [data-theme-style="premium"] .lp-stat { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--pcm-shadow-card); border-radius: var(--pcm-radius-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } [data-theme-style="premium"] .lp-stat:hover { transform: translateY(-2px); box-shadow: var(--pcm-shadow-card-hover); } /* Feature cards — soft elevation */ [data-theme-style="premium"] .lp-feature, [data-theme-style="premium"] .lp-section .lp-feature { background: white; border: 0; border-radius: var(--pcm-radius-lg); box-shadow: var(--pcm-shadow-card); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; } [data-theme-style="premium"] .lp-feature:hover { transform: translateY(-3px); box-shadow: var(--pcm-shadow-card-hover); } [data-theme-style="premium"] .lp-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(15, 118, 110, 0.04)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 24px; } /* Section padding */ [data-theme-style="premium"] .lp-section { padding: 120px 0; } [data-theme-style="premium"] .lp-section-head h2 { font-size: 44px; line-height: 1.1; } /* Buttons */ [data-theme-style="premium"] .btn, [data-theme-style="premium"] .lp-btn { border-radius: var(--pcm-radius-md); font-weight: 600; letter-spacing: -0.005em; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } [data-theme-style="premium"] .btn-primary, [data-theme-style="premium"] .lp-btn-primary { box-shadow: 0 1px 2px rgba(15, 118, 110, 0.1), 0 4px 8px -2px rgba(15, 118, 110, 0.2); } [data-theme-style="premium"] .btn-primary:hover, [data-theme-style="premium"] .lp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 118, 110, 0.15), 0 8px 16px -4px rgba(15, 118, 110, 0.25); } /* ===== INSIDE APP — Premium Clinical ===== */ /* Sidebar — refined */ [data-theme-style="premium"] .app-sidebar { box-shadow: 1px 0 0 rgba(15, 23, 42, 0.05); } [data-theme-style="premium"] .sidebar-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #94A3B8; padding-left: 16px; margin: 24px 0 8px; } [data-theme-style="premium"] .sidebar-link { border-radius: var(--pcm-radius-sm); margin: 1px 8px; padding: 8px 12px; font-weight: 500; transition: all 0.12s ease; } [data-theme-style="premium"] .sidebar-link:hover { transform: translateX(2px); } [data-theme-style="premium"] .sidebar-link.is-active { box-shadow: 0 1px 2px rgba(15, 118, 110, 0.08); font-weight: 600; } /* Topbar refinements */ [data-theme-style="premium"] .app-topbar { backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } [data-theme-style="premium"] .topbar-search { border-radius: var(--pcm-radius-md); transition: box-shadow 0.15s ease; } [data-theme-style="premium"] .topbar-search:focus-within { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); border-color: var(--brand-primary); } /* Cards — soft modern */ [data-theme-style="premium"] .card { border: 0; border-radius: var(--pcm-radius-lg); box-shadow: var(--pcm-shadow-card); transition: box-shadow 0.2s ease; } [data-theme-style="premium"] .card:hover { box-shadow: var(--pcm-shadow-card-hover); } [data-theme-style="premium"] .card-head { padding: 16px 20px 12px; border-bottom: 1px solid rgba(15, 23, 42, 0.05); } [data-theme-style="premium"] .card-body { padding: 20px; } [data-theme-style="premium"] .kpi-card { border: 0; box-shadow: var(--pcm-shadow-card); border-radius: var(--pcm-radius-lg); padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease; } [data-theme-style="premium"] .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--pcm-shadow-card-hover); } /* Form inputs */ [data-theme-style="premium"] .input, [data-theme-style="premium"] input[type="text"]:not([type="color"]), [data-theme-style="premium"] input[type="email"], [data-theme-style="premium"] input[type="tel"], [data-theme-style="premium"] input[type="number"], [data-theme-style="premium"] input[type="date"], [data-theme-style="premium"] input[type="search"], [data-theme-style="premium"] select, [data-theme-style="premium"] textarea { border-radius: var(--pcm-radius-sm); border-color: rgba(15, 23, 42, 0.12); transition: border-color 0.15s ease, box-shadow 0.15s ease; } [data-theme-style="premium"] .input:focus, [data-theme-style="premium"] input:not([type="color"]):focus, [data-theme-style="premium"] select:focus, [data-theme-style="premium"] textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); outline: none; } /* Tables — clean */ [data-theme-style="premium"] table { font-feature-settings: 'tnum'; } [data-theme-style="premium"] table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: #64748B; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } /* ================================================================== * * THEME: EDITORIAL PRO — Playfair serif + Inter * ================================================================== */ [data-theme-style="editorial"] { --pcm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pcm-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --pcm-radius-sm: 4px; --pcm-radius-md: 8px; --pcm-radius-lg: 12px; --pcm-shadow-card: 0 1px 2px rgba(30, 41, 59, 0.04), 0 4px 16px -4px rgba(30, 41, 59, 0.06); --pcm-bg-cream: #FAF6F2; --pcm-bg-cream-deeper: #F5EEE6; } [data-theme-style="editorial"] body, [data-theme-style="editorial"] .app-body, [data-theme-style="editorial"] .lp-body { font-family: var(--pcm-font-sans); -webkit-font-smoothing: antialiased; } [data-theme-style="editorial"] h1, [data-theme-style="editorial"] h2, [data-theme-style="editorial"] .lp-hero-title, [data-theme-style="editorial"] .lp-section-head h2, [data-theme-style="editorial"] .page-head h1 { font-family: var(--pcm-font-display) !important; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } [data-theme-style="editorial"] .lp-gradient-text { background: none !important; -webkit-text-fill-color: var(--brand-primary) !important; color: var(--brand-primary) !important; font-style: italic; } /* ===== LANDING — Editorial ===== */ [data-theme-style="editorial"] .lp-hero, [data-theme-style="editorial"] body.home { background: var(--pcm-bg-cream); } [data-theme-style="editorial"] .lp-section-alt { background: var(--pcm-bg-cream-deeper); } [data-theme-style="editorial"] .lp-hero-title { font-size: 64px; line-height: 1.05; } [data-theme-style="editorial"] .lp-hero-sub { font-size: 19px; line-height: 1.6; color: #475569; max-width: 540px; } [data-theme-style="editorial"] .lp-hero-badge { background: white; border: 1px solid rgba(15, 23, 42, 0.08); padding: 8px 14px; border-radius: 100px; font-weight: 500; letter-spacing: 0.02em; } [data-theme-style="editorial"] .lp-stat { background: white; border: 1px solid rgba(30, 41, 59, 0.06); box-shadow: var(--pcm-shadow-card); border-radius: var(--pcm-radius-md); } [data-theme-style="editorial"] .lp-section { padding: 140px 0; } [data-theme-style="editorial"] .lp-section-head h2 { font-size: 56px; } [data-theme-style="editorial"] .lp-feature { background: white; border: 1px solid rgba(30, 41, 59, 0.06); border-radius: var(--pcm-radius-lg); padding: 32px 28px; box-shadow: var(--pcm-shadow-card); } [data-theme-style="editorial"] .lp-feature h3 { font-family: var(--pcm-font-display); font-size: 22px; margin: 12px 0 6px; } [data-theme-style="editorial"] .lp-feature-icon { width: 40px; height: 40px; background: var(--pcm-bg-cream-deeper); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } /* ===== INSIDE — Editorial ===== */ [data-theme-style="editorial"] .page-head h1 { font-size: 32px; } [data-theme-style="editorial"] .card { border: 1px solid rgba(30, 41, 59, 0.06); border-radius: var(--pcm-radius-md); box-shadow: var(--pcm-shadow-card); } [data-theme-style="editorial"] .card-head h3 { font-family: var(--pcm-font-display); font-size: 18px; font-weight: 700; } [data-theme-style="editorial"] .sidebar-link { font-weight: 500; border-radius: var(--pcm-radius-sm); margin: 2px 8px; } [data-theme-style="editorial"] .sidebar-group-label { font-family: var(--pcm-font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8; margin: 20px 0 8px; padding-left: 16px; font-weight: 600; } [data-theme-style="editorial"] .kpi-card { background: white; border: 1px solid rgba(30, 41, 59, 0.08); border-radius: var(--pcm-radius-md); } [data-theme-style="editorial"] .kpi-card .kpi-value { font-family: var(--pcm-font-display); font-size: 32px; } /* ================================================================== * * THEME: TRUST ENTERPRISE — Source Sans 3, navy/gold accents * ================================================================== */ [data-theme-style="enterprise"] { --pcm-font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pcm-font-display: 'Source Sans 3', sans-serif; --pcm-radius-sm: 4px; --pcm-radius-md: 6px; --pcm-radius-lg: 8px; --pcm-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.04); /* v3.6.1: derive from the brand palette so Personalize + all themes flow through — was hardcoded #0F172A / #B45309. */ --pcm-navy: var(--brand-primary, #0F172A); --pcm-navy-deep: color-mix(in srgb, var(--brand-primary, #0F172A) 60%, black); --pcm-gold: var(--brand-accent, #B45309); --pcm-gold-light: color-mix(in srgb, var(--brand-accent, #B45309) 45%, white); } [data-theme-style="enterprise"] body, [data-theme-style="enterprise"] .app-body, [data-theme-style="enterprise"] .lp-body { font-family: var(--pcm-font-sans); -webkit-font-smoothing: antialiased; color: #1E293B; } [data-theme-style="enterprise"] h1, [data-theme-style="enterprise"] h2, [data-theme-style="enterprise"] h3, [data-theme-style="enterprise"] .lp-hero-title, [data-theme-style="enterprise"] .page-head h1 { font-family: var(--pcm-font-display) !important; font-weight: 700; letter-spacing: -0.02em; } /* Mute the gradient text — replace with solid gold accent */ [data-theme-style="enterprise"] .lp-gradient-text { background: none !important; -webkit-text-fill-color: var(--pcm-gold) !important; color: var(--pcm-gold) !important; } /* ===== LANDING — Enterprise ===== */ [data-theme-style="enterprise"] .lp-hero { background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%); border-bottom: 4px solid var(--pcm-navy); } [data-theme-style="enterprise"] .lp-hero-badge { background: var(--pcm-navy); color: white; border: 0; padding: 6px 14px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } [data-theme-style="enterprise"] .lp-hero-title { color: var(--pcm-navy); font-size: 56px; line-height: 1.08; } [data-theme-style="enterprise"] .lp-stat { background: white; border: 0; border-top: 3px solid var(--pcm-navy); border-radius: 0; box-shadow: var(--pcm-shadow-card); } [data-theme-style="enterprise"] .lp-stat-val { color: var(--pcm-navy); font-weight: 700; } [data-theme-style="enterprise"] .lp-section-head h2 { color: var(--pcm-navy); font-size: 42px; } [data-theme-style="enterprise"] .lp-feature { background: white; border: 1px solid #E2E8F0; border-left: 3px solid var(--pcm-navy); border-radius: 0 var(--pcm-radius-md) var(--pcm-radius-md) 0; padding: 24px; } [data-theme-style="enterprise"] .lp-feature h3 { color: var(--pcm-navy); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } [data-theme-style="enterprise"] .lp-feature-icon { width: 40px; height: 40px; background: var(--pcm-navy); color: var(--pcm-gold-light); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 18px; } /* Buttons */ [data-theme-style="enterprise"] .btn-primary, [data-theme-style="enterprise"] .lp-btn-primary { background: var(--pcm-navy); border-color: var(--pcm-navy); color: white; border-radius: var(--pcm-radius-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; padding: 12px 24px; } [data-theme-style="enterprise"] .btn-primary:hover, [data-theme-style="enterprise"] .lp-btn-primary:hover { background: var(--pcm-navy-deep); border-color: var(--pcm-navy-deep); } [data-theme-style="enterprise"] .btn-secondary, [data-theme-style="enterprise"] .lp-btn-secondary { background: white; border: 1px solid var(--pcm-navy); color: var(--pcm-navy); border-radius: var(--pcm-radius-sm); text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; font-weight: 600; } /* ===== INSIDE — Enterprise ===== */ [data-theme-style="enterprise"] .app-sidebar { background: var(--pcm-navy); color: #CBD5E1; } [data-theme-style="enterprise"] .sidebar-link { color: #CBD5E1; border-radius: 4px; margin: 0 8px; border-left: 3px solid transparent; } [data-theme-style="enterprise"] .sidebar-link:hover { background: rgba(255, 255, 255, 0.04); color: white; } [data-theme-style="enterprise"] .sidebar-link.is-active { background: rgba(180, 83, 9, 0.12); color: var(--pcm-gold-light); border-left-color: var(--pcm-gold-light); font-weight: 600; } [data-theme-style="enterprise"] .sidebar-group-label { color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding-left: 16px; margin: 20px 0 6px; } [data-theme-style="enterprise"] .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08); color: #64748B; } [data-theme-style="enterprise"] .app-topbar { background: white; border-bottom: 2px solid var(--pcm-navy); } [data-theme-style="enterprise"] .page-head h1 { color: var(--pcm-navy); font-size: 26px; text-transform: none; } [data-theme-style="enterprise"] .eyebrow { color: var(--pcm-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } [data-theme-style="enterprise"] .card { border: 1px solid #E2E8F0; border-top: 2px solid var(--pcm-navy); border-radius: 0 0 var(--pcm-radius-sm) var(--pcm-radius-sm); box-shadow: var(--pcm-shadow-card); } [data-theme-style="enterprise"] .card-head { background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%); border-bottom: 1px solid #E2E8F0; } [data-theme-style="enterprise"] .card-head h3 { color: var(--pcm-navy); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 13px; } [data-theme-style="enterprise"] .kpi-card { background: white; border: 1px solid #E2E8F0; border-top: 3px solid var(--pcm-navy); border-radius: 0; } [data-theme-style="enterprise"] .kpi-card .kpi-value { color: var(--pcm-navy); font-weight: 700; } /* Tables — formal */ [data-theme-style="enterprise"] table { border: 1px solid #E2E8F0; } [data-theme-style="enterprise"] table thead { background: var(--pcm-navy); color: white; } [data-theme-style="enterprise"] table thead th { color: white; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 600; padding: 10px 14px; } /* Buttons inside the app */ [data-theme-style="enterprise"] .btn-primary { background: var(--pcm-navy); border-color: var(--pcm-navy); } /* ================================================================== * * RESPONSIVE — clamp section paddings on small screens for all themes * ================================================================== */ @media (max-width: 720px) { [data-theme-style="premium"] .lp-section, [data-theme-style="editorial"] .lp-section, [data-theme-style="enterprise"] .lp-section { padding: 64px 0 !important; } [data-theme-style="premium"] .lp-section-head h2, [data-theme-style="editorial"] .lp-section-head h2, [data-theme-style="enterprise"] .lp-section-head h2 { font-size: 30px; } [data-theme-style="premium"] .lp-hero-title, [data-theme-style="editorial"] .lp-hero-title, [data-theme-style="enterprise"] .lp-hero-title { font-size: 36px !important; } } /* ================================================================== * * EXTENDED COVERAGE — all landing page sections per theme * (modules grid, compliance, CTA, footer, header, nav, dash-mock) * ================================================================== */ /* ============================================================ * * PREMIUM CLINICAL — full landing coverage * ============================================================ */ /* Top header / nav */ [data-theme-style="premium"] .lp-header { background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(15, 23, 42, 0.05); } [data-theme-style="premium"] .lp-brand { font-weight: 700; letter-spacing: -0.015em; } [data-theme-style="premium"] .lp-brand-mark { border-radius: 10px; box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.35); } [data-theme-style="premium"] .lp-nav-links a { font-weight: 500; transition: color 150ms ease; } /* Eyebrows — small caps refinement */ [data-theme-style="premium"] .lp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding: 4px 10px; background: rgba(15, 118, 110, 0.06); border-radius: 999px; } /* Hero trust signals */ [data-theme-style="premium"] .lp-hero-trust { border-top: 1px solid rgba(15, 23, 42, 0.06); padding-top: 20px; font-size: 12px; color: #64748B; } /* Dashboard mock — soften the 3D, lift it */ [data-theme-style="premium"] .lp-dash-mock { border-radius: 18px; border: 0; box-shadow: var(--pcm-shadow-hero), 0 1px 3px rgba(15, 23, 42, 0.04); transform: rotateY(-4deg) rotateX(2deg); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme-style="premium"] .lp-hero-visual:hover .lp-dash-mock { transform: rotateY(-2deg) rotateX(1deg) translateY(-4px); } [data-theme-style="premium"] .lp-dash-bar { background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent, #F59E0B)); border-radius: 6px; height: 6px; width: 55%; } [data-theme-style="premium"] .lp-dash-mock .lp-stat { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid rgba(15, 23, 42, 0.04); } [data-theme-style="premium"] .lp-stat-label { font-size: 10px; letter-spacing: 0.08em; font-weight: 600; color: #94A3B8; } [data-theme-style="premium"] .lp-stat-val { font-weight: 700; font-feature-settings: 'tnum'; letter-spacing: -0.02em; } [data-theme-style="premium"] .lp-dash-row { background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 100%); border-radius: 3px; height: 10px; } /* Alt section background */ [data-theme-style="premium"] .lp-section-alt { background: linear-gradient(180deg, #FAFBFC 0%, #F4F6F8 100%); } /* Modules grid */ [data-theme-style="premium"] .lp-modules { gap: 12px; } [data-theme-style="premium"] .lp-module { background: white; border: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); border-radius: 10px; padding: 14px 16px; transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme-style="premium"] .lp-module:hover { box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.12), 0 0 0 1px rgba(15, 118, 110, 0.2); transform: translateY(-1px); } [data-theme-style="premium"] .lp-module-icon { width: 36px; height: 36px; background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(15, 118, 110, 0.02)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; } [data-theme-style="premium"] .lp-module h4 { font-weight: 600; letter-spacing: -0.01em; } /* Compliance section */ [data-theme-style="premium"] .lp-compliance-grid { gap: 60px; } [data-theme-style="premium"] .lp-badge-card { background: white; border: 0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px -4px rgba(15, 23, 42, 0.05); border-radius: 12px; padding: 22px 20px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme-style="premium"] .lp-badge-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(15, 118, 110, 0.08), 0 16px 32px -8px rgba(15, 118, 110, 0.15); } [data-theme-style="premium"] .lp-badge-card strong { font-weight: 700; letter-spacing: -0.01em; font-size: 17px; } [data-theme-style="premium"] .lp-badge-card span { font-size: 11px; color: #64748B; } /* CTA section */ [data-theme-style="premium"] .lp-cta { padding: 100px 0; background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1), transparent 40%), radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.15), transparent 50%), linear-gradient(135deg, var(--brand-primary) 0%, #0D5F58 60%, #094842 100%); position: relative; overflow: hidden; } [data-theme-style="premium"] .lp-cta::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } [data-theme-style="premium"] .lp-cta > * { position: relative; z-index: 1; } [data-theme-style="premium"] .lp-cta h2 { font-size: 44px; letter-spacing: -0.025em; font-weight: 700; } [data-theme-style="premium"] .lp-cta .btn-primary { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1); font-weight: 600; } /* Footer */ [data-theme-style="premium"] .lp-footer { background: #0F172A; color: #94A3B8; border-top: 1px solid rgba(255, 255, 255, 0.05); } [data-theme-style="premium"] .lp-footer-brand { color: #F1F5F9; font-weight: 600; } [data-theme-style="premium"] .lp-footer-links a { color: #94A3B8; transition: color 150ms ease; font-size: 13px; } /* ============================================================ * * EDITORIAL PRO — full landing coverage * ============================================================ */ [data-theme-style="editorial"] .lp-header { background: rgba(250, 246, 242, 0.85); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(30, 41, 59, 0.08); } [data-theme-style="editorial"] .lp-brand { font-family: var(--pcm-font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; } [data-theme-style="editorial"] .lp-brand-mark { border-radius: 6px; } [data-theme-style="editorial"] .lp-eyebrow { font-family: var(--pcm-font-display); font-size: 13px; font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand-primary); } [data-theme-style="editorial"] .lp-hero-trust { border-top: 1px solid rgba(30, 41, 59, 0.08); padding-top: 20px; font-size: 12px; } /* Dash mock — less aggressive 3D */ [data-theme-style="editorial"] .lp-dash-mock { border: 1px solid rgba(30, 41, 59, 0.08); border-radius: 8px; transform: rotateY(-3deg) rotateX(2deg); box-shadow: 0 24px 48px -12px rgba(30, 41, 59, 0.15); } [data-theme-style="editorial"] .lp-stat-val { font-family: var(--pcm-font-display); font-weight: 700; letter-spacing: -0.02em; } [data-theme-style="editorial"] .lp-section-alt { background: var(--pcm-bg-cream-deeper); } /* Modules — cream cards */ [data-theme-style="editorial"] .lp-modules { gap: 16px; } [data-theme-style="editorial"] .lp-module { background: white; border: 1px solid rgba(30, 41, 59, 0.08); border-radius: 6px; padding: 18px; } [data-theme-style="editorial"] .lp-module:hover { border-color: var(--brand-primary); background: #FFFAF3; transform: translateX(0) translateY(-2px); box-shadow: 0 8px 24px -8px rgba(30, 41, 59, 0.1); } [data-theme-style="editorial"] .lp-module-icon { width: 36px; height: 36px; background: var(--pcm-bg-cream-deeper); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } [data-theme-style="editorial"] .lp-module h4 { font-family: var(--pcm-font-display); font-size: 15px; font-weight: 700; } /* Compliance badges */ [data-theme-style="editorial"] .lp-badge-card { background: white; border: 1px solid rgba(30, 41, 59, 0.08); border-radius: 8px; padding: 24px 22px; } [data-theme-style="editorial"] .lp-badge-card strong { font-family: var(--pcm-font-display); font-size: 24px; font-weight: 700; color: var(--brand-primary); letter-spacing: -0.01em; } /* CTA — cream, not gradient */ [data-theme-style="editorial"] .lp-cta { background: var(--pcm-bg-cream-deeper); color: #1E293B; padding: 120px 0; border-top: 1px solid rgba(30, 41, 59, 0.08); border-bottom: 1px solid rgba(30, 41, 59, 0.08); } [data-theme-style="editorial"] .lp-cta h2 { color: #0F172A; font-family: var(--pcm-font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } [data-theme-style="editorial"] .lp-cta h2 em { font-style: italic; color: var(--brand-primary); } [data-theme-style="editorial"] .lp-cta p { color: #475569; font-size: 19px; } [data-theme-style="editorial"] .lp-cta .btn-primary { background: #0F172A; color: white; } [data-theme-style="editorial"] .lp-cta .btn-primary:hover { background: var(--brand-primary); color: white; } /* Footer — cream tone */ [data-theme-style="editorial"] .lp-footer { background: #1E293B; color: #94A3B8; } [data-theme-style="editorial"] .lp-footer-brand { font-family: var(--pcm-font-display); color: #F1F5F9; } /* ============================================================ * * TRUST ENTERPRISE — full landing coverage * ============================================================ */ [data-theme-style="enterprise"] .lp-header { background: white; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #E2E8F0; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); } [data-theme-style="enterprise"] .lp-brand { color: var(--pcm-navy); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; font-size: 15px; } [data-theme-style="enterprise"] .lp-brand-mark { background: var(--pcm-navy); border-radius: 4px; color: var(--pcm-gold-light); } [data-theme-style="enterprise"] .lp-nav-links a { text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; font-weight: 700; color: #475569; } [data-theme-style="enterprise"] .lp-eyebrow { color: var(--pcm-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; } [data-theme-style="enterprise"] .lp-hero-trust { border-top: 2px solid var(--pcm-navy); padding-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #475569; } /* Dash mock — flat & formal */ [data-theme-style="enterprise"] .lp-dash-mock { border: 1px solid #E2E8F0; border-top: 3px solid var(--pcm-navy); border-radius: 4px; transform: rotateY(-3deg) rotateX(1deg); box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.2); } [data-theme-style="enterprise"] .lp-dash-bar { background: var(--pcm-navy); height: 4px; width: 80%; border-radius: 0; } [data-theme-style="enterprise"] .lp-dash-mock .lp-stat { background: #F8FAFC; border: 0; border-left: 3px solid var(--pcm-navy); border-radius: 0; padding: 12px 14px; } [data-theme-style="enterprise"] .lp-stat-label { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } [data-theme-style="enterprise"] .lp-stat-val { color: var(--pcm-navy); font-weight: 700; font-family: var(--pcm-font-display); font-feature-settings: 'tnum'; } [data-theme-style="enterprise"] .lp-stat-trend { color: var(--pcm-gold); font-weight: 700; } [data-theme-style="enterprise"] .lp-section-alt { background: #F1F5F9; } /* Modules — navy left accent */ [data-theme-style="enterprise"] .lp-modules { gap: 8px; } [data-theme-style="enterprise"] .lp-module { background: white; border: 1px solid #E2E8F0; border-left: 3px solid #CBD5E1; border-radius: 0; padding: 14px 16px; transition: border-left-color 150ms ease, background 150ms ease; } [data-theme-style="enterprise"] .lp-module:hover { border-left-color: var(--pcm-gold); background: #FFFBEB; transform: none; } [data-theme-style="enterprise"] .lp-module-icon { width: 32px; height: 32px; background: var(--pcm-navy); color: var(--pcm-gold-light); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 16px; } [data-theme-style="enterprise"] .lp-module h4 { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; color: var(--pcm-navy); font-weight: 700; } [data-theme-style="enterprise"] .lp-module p { font-size: 11px; color: #475569; } /* Compliance badges — formal */ [data-theme-style="enterprise"] .lp-badge-card { background: white; border: 1px solid #E2E8F0; border-top: 2px solid var(--pcm-navy); border-radius: 0; padding: 22px 20px; transition: border-top-color 150ms ease; } [data-theme-style="enterprise"] .lp-badge-card:hover { border-top-color: var(--pcm-gold); transform: none; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.1); } [data-theme-style="enterprise"] .lp-badge-card strong { color: var(--pcm-navy); text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; font-weight: 700; } [data-theme-style="enterprise"] .lp-badge-card span { color: #64748B; font-size: 11px; } /* CTA — solid navy */ [data-theme-style="enterprise"] .lp-cta { background: var(--pcm-navy); color: white; padding: 80px 0; border-top: 4px solid var(--pcm-gold); } [data-theme-style="enterprise"] .lp-cta h2 { color: white; font-size: 36px; font-weight: 700; text-transform: none; letter-spacing: -0.01em; } [data-theme-style="enterprise"] .lp-cta p { color: rgba(255, 255, 255, 0.75); font-size: 16px; } [data-theme-style="enterprise"] .lp-cta .btn-primary { background: var(--pcm-gold); color: white; border-color: var(--pcm-gold); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } [data-theme-style="enterprise"] .lp-cta .btn-primary:hover { background: #92400E; color: white; } [data-theme-style="enterprise"] .lp-cta .btn-secondary { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } /* Footer — formal */ [data-theme-style="enterprise"] .lp-footer { background: var(--pcm-navy-deep); color: #94A3B8; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } [data-theme-style="enterprise"] .lp-footer-brand { color: white; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; } [data-theme-style="enterprise"] .lp-footer-links a { color: #64748B; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-weight: 600; } /* ================================================================== * * REFINEMENT PASS — fix selectors, strengthen identity, add polish * ================================================================== */ /* ============================================================ * * EDITORIAL — fix cream background, refine hero typography * ============================================================ */ /* The body uses .landing-body class (not "home") */ [data-theme-style="editorial"] .landing-body { background: var(--pcm-bg-cream) !important; } [data-theme-style="editorial"] .lp-hero { background: transparent; } /* More elegant hero title — slightly muted, refined weight */ [data-theme-style="editorial"] .lp-hero-title { font-weight: 600; color: #1E293B; font-size: 60px; } [data-theme-style="editorial"] .lp-hero-title .lp-gradient-text { font-weight: 700; font-style: italic; color: var(--brand-primary) !important; -webkit-text-fill-color: var(--brand-primary) !important; } /* Refined section heads */ [data-theme-style="editorial"] .lp-section-head h2 { font-weight: 600; color: #1E293B; } /* Hero badge more editorial */ [data-theme-style="editorial"] .lp-hero-badge { background: white; color: #475569; border: 1px solid rgba(30, 41, 59, 0.1); font-family: var(--pcm-font-sans); text-transform: none; letter-spacing: 0.01em; font-weight: 500; box-shadow: 0 1px 2px rgba(30, 41, 59, 0.04); } /* Refined section padding for breathing room */ [data-theme-style="editorial"] .lp-section { padding: 100px 0; } /* ============================================================ * * PREMIUM — stronger ambient gradient, refined hero * ============================================================ */ /* Make the ambient mesh actually visible */ [data-theme-style="premium"] .lp-hero::before { background: radial-gradient(ellipse 700px 500px at 10% 10%, rgba(15, 118, 110, 0.15), transparent 55%), radial-gradient(ellipse 500px 400px at 90% 30%, rgba(245, 158, 11, 0.10), transparent 60%), radial-gradient(ellipse 600px 500px at 50% 100%, rgba(99, 102, 241, 0.08), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.5) 100%); } /* Hero title — refined */ [data-theme-style="premium"] .lp-hero-title { font-weight: 700; color: #0F172A; font-size: 54px; letter-spacing: -0.03em; line-height: 1.04; } /* Hero sub copy — better proportion */ [data-theme-style="premium"] .lp-hero-sub { color: #475569; font-size: 17px; line-height: 1.65; } /* Feature icons — slightly larger, more sophisticated */ [data-theme-style="premium"] .lp-feature-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(15, 118, 110, 0.02)); border-radius: 14px; font-size: 28px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.06); } [data-theme-style="premium"] .lp-feature h3 { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 8px; } /* Cards on premium hero look more "real-product" */ [data-theme-style="premium"] .lp-dash-mock { background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%); } /* ============================================================ * * ENTERPRISE — sharper hero identity, fix dash bar * ============================================================ */ /* Hero title clearly navy, larger */ [data-theme-style="enterprise"] .lp-hero-title { color: var(--pcm-navy); font-size: 56px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; } [data-theme-style="enterprise"] .lp-hero-title .lp-gradient-text { color: var(--pcm-gold) !important; -webkit-text-fill-color: var(--pcm-gold) !important; font-weight: 700; } [data-theme-style="enterprise"] .lp-hero-sub { color: #475569; font-size: 16px; } /* Dash bar — make visible */ [data-theme-style="enterprise"] .lp-dash-bar { height: 6px; background: linear-gradient(90deg, var(--pcm-navy) 0%, var(--pcm-gold) 100%); width: 70%; } /* Feature card refined */ [data-theme-style="enterprise"] .lp-feature { border-left-width: 4px; } [data-theme-style="enterprise"] .lp-feature:hover { border-left-color: var(--pcm-gold); transform: none; box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.1); } [data-theme-style="enterprise"] .lp-feature h3 { margin-bottom: 12px; font-size: 15px; } /* ============================================================ * * GLOBAL POLISH — subtle micro-animations across all 3 themes * ============================================================ */ /* Smooth all transitions */ [data-theme-style="premium"] .lp-feature, [data-theme-style="premium"] .lp-module, [data-theme-style="premium"] .lp-badge-card, [data-theme-style="premium"] .lp-stat, [data-theme-style="editorial"] .lp-feature, [data-theme-style="editorial"] .lp-module, [data-theme-style="editorial"] .lp-badge-card, [data-theme-style="enterprise"] .lp-feature, [data-theme-style="enterprise"] .lp-module, [data-theme-style="enterprise"] .lp-badge-card { will-change: transform, box-shadow; } /* Reduce motion respect */ @media (prefers-reduced-motion: reduce) { [data-theme-style="premium"] *, [data-theme-style="editorial"] *, [data-theme-style="enterprise"] * { transition: none !important; animation: none !important; } } /* ================================================================== * * THEME STYLE: MIDNIGHT — dark, focused, electric (v3.6.0) * Used by the "Midnight Pro" master theme. Space Grotesk typography, * dark landing + login. The app shell goes dark via [data-theme="dark"] * variables (theme mode), so here we only refine what those miss. * ================================================================== */ [data-theme-style="midnight"] { --mid-bg: #0B1120; --mid-panel: #111827; --mid-card: #1E293B; --mid-border: #293548; --mid-ink: #F1F5F9; --mid-soft: #94A3B8; } [data-theme-style="midnight"] body, [data-theme-style="midnight"] .app-body, [data-theme-style="midnight"] .lp-body { font-family: 'Space Grotesk', 'Manrope', -apple-system, sans-serif; letter-spacing: 0.005em; } [data-theme-style="midnight"] h1, [data-theme-style="midnight"] h2, [data-theme-style="midnight"] h3, [data-theme-style="midnight"] .lp-hero-title, [data-theme-style="midnight"] .page-head h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.02em; } /* ===== LANDING PAGE — Midnight ===== */ [data-theme-style="midnight"] body { background: var(--mid-bg); color: var(--mid-ink); } [data-theme-style="midnight"] .lp-header { background: rgba(11, 17, 32, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--mid-border); } [data-theme-style="midnight"] .lp-nav-links a { color: var(--mid-soft); } [data-theme-style="midnight"] .lp-nav-links a:hover { color: var(--mid-ink); } [data-theme-style="midnight"] .lp-hero { position: relative; background: var(--mid-bg); overflow: hidden; } [data-theme-style="midnight"] .lp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 20% 10%, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent), radial-gradient(ellipse 45% 40% at 85% 25%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent); pointer-events: none; } [data-theme-style="midnight"] .lp-hero > * { position: relative; z-index: 1; } [data-theme-style="midnight"] .lp-hero-title { color: var(--mid-ink); } [data-theme-style="midnight"] .lp-hero-sub { color: var(--mid-soft); } [data-theme-style="midnight"] .lp-hero-badge { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); color: #A5B4FC; border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent); } [data-theme-style="midnight"] .lp-gradient-text { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme-style="midnight"] .lp-dash-mock { background: var(--mid-panel); border: 1px solid var(--mid-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } [data-theme-style="midnight"] .lp-stat, [data-theme-style="midnight"] .lp-feature, [data-theme-style="midnight"] .lp-module, [data-theme-style="midnight"] .lp-badge-card { background: var(--mid-card); border: 1px solid var(--mid-border); color: var(--mid-ink); } [data-theme-style="midnight"] .lp-stat-label { color: var(--mid-soft); } [data-theme-style="midnight"] .lp-stat-val { color: var(--mid-ink); } [data-theme-style="midnight"] .lp-dash-row { background: var(--mid-border); } [data-theme-style="midnight"] .lp-feature:hover, [data-theme-style="midnight"] .lp-module:hover, [data-theme-style="midnight"] .lp-badge-card:hover { border-color: var(--brand-primary); box-shadow: 0 8px 30px color-mix(in srgb, var(--brand-primary) 25%, transparent); } [data-theme-style="midnight"] .lp-feature h3, [data-theme-style="midnight"] .lp-module strong { color: var(--mid-ink); } [data-theme-style="midnight"] .lp-feature p, [data-theme-style="midnight"] .lp-module span { color: var(--mid-soft); } [data-theme-style="midnight"] .lp-section { background: var(--mid-bg); } [data-theme-style="midnight"] .lp-section-alt, [data-theme-style="midnight"] .lp-section.alt { background: var(--mid-panel); } [data-theme-style="midnight"] .lp-section-head h2, [data-theme-style="midnight"] .lp-section h2 { color: var(--mid-ink); } [data-theme-style="midnight"] .lp-section p { color: var(--mid-soft); } [data-theme-style="midnight"] .lp-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 85%, black) 0%, color-mix(in srgb, var(--brand-primary) 55%, black) 100%); } [data-theme-style="midnight"] .lp-footer { background: #060B16; border-top: 1px solid var(--mid-border); color: var(--mid-soft); } /* ===== LOGIN / PUBLIC AUTH — Midnight ===== */ [data-theme-style="midnight"] .auth-layout { background: radial-gradient(ellipse 60% 50% at 15% 0%, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent), var(--mid-bg); } [data-theme-style="midnight"] .auth-bg { background: radial-gradient(ellipse 45% 40% at 85% 90%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent); } [data-theme-style="midnight"] .auth-card { background: var(--mid-panel); border: 1px solid var(--mid-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* ===== INSIDE APP — Midnight refinements over [data-theme="dark"] ===== */ [data-theme-style="midnight"] .app-sidebar .sidebar-link.is-active { background: color-mix(in srgb, var(--brand-primary) 22%, transparent) !important; color: #C7D2FE !important; box-shadow: inset 2px 0 0 var(--brand-primary); } [data-theme-style="midnight"] .btn-primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 60%, transparent), 0 4px 14px color-mix(in srgb, var(--brand-primary) 35%, transparent); } [data-theme-style="midnight"] .card { border-color: var(--mid-border); } @media (prefers-reduced-motion: reduce) { [data-theme-style="midnight"] * { transition: none !important; animation: none !important; } }