/* Shared light theme. * * The site's dark palette names every white step after its alpha, so light is a * mechanical inversion of the ink plus a handful of explicit surface decisions. * Load AFTER theme.js (which sets data-theme before first paint). * * Generated by scripts/gen_theme_css.py — regenerate rather than hand-editing, * or a new token added to a page will silently stay dark on light backgrounds. */ :root[data-theme="light"] { --t-w0: rgba(0,0,0,0); --t-w14: rgba(0,0,0,0.014); --t-w15: rgba(0,0,0,0.015); --t-w20: rgba(0,0,0,0.02); --t-w25: rgba(0,0,0,0.025); --t-w28: rgba(0,0,0,0.028); --t-w30: rgba(0,0,0,0.03); --t-w35: rgba(0,0,0,0.035); --t-w40: rgba(0,0,0,0.04); --t-w45: rgba(0,0,0,0.045); --t-w50: rgba(0,0,0,0.05); --t-w60: rgba(0,0,0,0.06); --t-w70: rgba(0,0,0,0.07); --t-w80: rgba(0,0,0,0.08); --t-w90: rgba(0,0,0,0.09); --t-w100: rgba(0,0,0,0.1); --t-w110: rgba(0,0,0,0.11); --t-w120: rgba(0,0,0,0.12); --t-w130: rgba(0,0,0,0.13); --t-w140: rgba(0,0,0,0.14); --t-w150: rgba(0,0,0,0.15); --t-w160: rgba(0,0,0,0.16); --t-w180: rgba(0,0,0,0.18); --t-w200: rgba(0,0,0,0.2); --t-w220: rgba(0,0,0,0.22); --t-w240: rgba(0,0,0,0.24); --t-w260: rgba(0,0,0,0.26); --t-w280: rgba(0,0,0,0.28); --t-w300: rgba(0,0,0,0.3); --t-w320: rgba(0,0,0,0.32); --t-w340: rgba(0,0,0,0.34); --t-w350: rgba(0,0,0,0.5); --t-w380: rgba(0,0,0,0.53); --t-w400: rgba(0,0,0,0.55); --t-w420: rgba(0,0,0,0.57); --t-w450: rgba(0,0,0,0.6); --t-w500: rgba(0,0,0,0.65); --t-w550: rgba(0,0,0,0.7); --t-w560: rgba(0,0,0,0.71); --t-w580: rgba(0,0,0,0.73); --t-w600: rgba(0,0,0,0.75); --t-w620: rgba(0,0,0,0.77); --t-w650: rgba(0,0,0,0.8); --t-w660: rgba(0,0,0,0.81); --t-w680: rgba(0,0,0,0.83); --t-w700: rgba(0,0,0,0.85); --t-w720: rgba(0,0,0,0.87); --t-w750: rgba(0,0,0,0.9); --t-w780: rgba(0,0,0,0.9); --t-w800: rgba(0,0,0,0.9); --t-w820: rgba(0,0,0,0.9); --t-w840: rgba(0,0,0,0.9); --t-w850: rgba(0,0,0,0.9); --t-w860: rgba(0,0,0,0.9); --t-w880: rgba(0,0,0,0.9); --t-w900: rgba(0,0,0,0.9); --t-w920: rgba(0,0,0,0.92); --t-w940: rgba(0,0,0,0.94); --t-w950: rgba(0,0,0,0.95); --t-w960: rgba(0,0,0,0.96); --t-w970: rgba(0,0,0,0.97); --t-fg: #0B0D12; --t-night: #FAF7F2; --t-panel: #FFFFFF; --t-surface: #FFFFFF; --t-surface2: #F4F1EA; --t-glass: rgba(255,255,255,0.93); --t-panelsolid: rgba(255,255,255,0.97); --t-sh1: rgba(0,0,0,0.07); --t-sh2: rgba(0,0,0,0.12); --t-a2: #4257C4; --t-a3: #35459E; --boom-indigo-200: #4257C4; --boom-indigo-300: #35459E; --t-i350: rgba(66,87,196,0.30); --t-i380: rgba(66,87,196,0.34); --t-g1a: #12141C; --t-g1b: #1B2440; --t-g1c: #35459E; --t-g1d: #4257C4; --t-g2a: #12141C; --t-g2c: #35459E; --t-glow: 0 0 0 1px rgba(66,87,196,0.16), 0 14px 40px rgba(66,87,196,0.16); --t-h1: #FFFFFF; --t-h2: #FFFFFF; --t-h3: #FFFFFF; --t-h4: #FFFFFF; --t-h5: #FFFFFF; --t-h6: #FFFFFF; --t-h7: #FFFFFF; --t-h8: #FFFFFF; --t-h9: #FFFFFF; --t-h10: #FFFFFF; --t-h11: #FFFFFF; --t-h12: #FFFFFF; --t-h13: #FFFFFF; --t-h14: #FFFFFF; --t-h15: #FFFFFF; --t-h16: #FFFFFF; --t-h17: #FFFFFF; --t-h18: #FFFFFF; --t-h19: #FFFFFF; --t-h20: #FFFFFF; --t-h21: #FFFFFF; --t-h22: #FFFFFF; --t-h23: #FFFFFF; --t-h24: #FFFFFF; --t-h25: #FFFFFF; --t-h26: #FFFFFF; --t-h27: #FFFFFF; --t-h28: #FFFFFF; --t-h29: #FFFFFF; --t-h30: #FFFFFF; } /* --------------------------------------------------------------------------- Second token family. The --t-* palette covers home/bam/apps/ai-pms; the other 32 pages (solutions, features, company, case studies...) ship a different but equally tidy set — --ink / --text / --peri / --coral. One block themes all of them, which is why they were worth doing before the untokenised stragglers. */ :root[data-theme="light"] { --ink: #FAF7F2; --ink-2: #F3F0E9; --card: rgba(255,255,255,0.96); --line: rgba(18,20,43,0.12); --line-strong: rgba(18,20,43,0.26); --text: #12142B; --text-dim: rgba(18,20,43,0.78); --text-faint: rgba(18,20,43,0.66); --indigo: #4257C4; --indigo-2: #35459E; --peri: #3F52BF; --peri-soft: #5A6DD4; --coral: #C4433B; --coral-soft: #B03B34; --coral-pale: #9A332D; --green: #2E7D55; } /* Those pages paint the page from --ink, so the body needs no special casing — but the solid CTA keeps a white label, and its gradient must stay dark enough to carry it. */ :root[data-theme="light"] .btn-solid { color: #fff !important; } /* nav.js ships its own fixed bar, mega-menu and mobile drawer with hardcoded near-black fills — it renders on 32 pages, so it gets its own light ground rather than being fixed page by page. */ /* nav.js now renders a floating pill to match home: the bar itself is a transparent gutter and .bn-in is the visible surface. */ :root[data-theme="light"] .bn { background: transparent !important; } :root[data-theme="light"] .bn-in { background: rgba(255,255,255,0.94) !important; border-color: rgba(18,20,43,0.10) !important; box-shadow: 0 10px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important; } :root[data-theme="light"] .mega, :root[data-theme="light"] .drawer { background: rgba(255,255,255,0.98) !important; } :root[data-theme="light"] .bn a, :root[data-theme="light"] .bn .bn-login, :root[data-theme="light"] .mega a, :root[data-theme="light"] .drawer a { color: var(--text); } /* .bn-cta is the wrapper, not the button: it also holds "Sign in", which was inheriting white and rendering at 1.1:1 on the light pill. Only the solid CTA keeps white ink. */ :root[data-theme="light"] .bn-demo, :root[data-theme="light"] .bn-demo * { color: #fff !important; } :root[data-theme="light"] .bn-login { color: var(--text) !important; } :root[data-theme="light"] .burger span { background: var(--text) !important; } /* The periwinkle display numbers ("Free", "$10 or $20", "Get a quote") sit on white here, where the dark theme's tint is far too pale to read. */ :root[data-theme="light"] { --peri: #37489F; --peri-soft: #4657C9; } /* Hardcoded pale ink that bypasses the tokens. nav.js writes its link colour as a literal near-white, and the pricing tiers fill their big numbers with a pale periwinkle GRADIENT — both need explicit light values, not a token swap. */ /* Everything in the bar, the mega-menu and the mobile drawer, except the solid CTAs which keep their white labels. nav.js writes these as literal near-whites (#F4F6FF, rgba(238,241,255,...)), so a token swap alone never reaches them. */ /* .promo is a deliberately dark card inside the light panel — its ink must stay white, or the mega-menu recolour paints dark text on a navy gradient. */ :root[data-theme="light"] .promo, :root[data-theme="light"] .promo * { color: #fff !important; } :root[data-theme="light"] .promo .pk { color: #FFB4AF !important; } /* Exclude only the solid CTA, not the whole .bn-cta cluster. Excluding the wrapper left every control added to it later — the language switcher — with no light-ink rule at all, so it inherited white and rendered at 1.0:1. */ :root[data-theme="light"] .bn *:not(.bn-demo):not(.bn-demo *):not(.bn-bam), :root[data-theme="light"] .mega *:not(.d):not(.mh):not(.mega-foot a):not(.d-demo):not(.d-demo *):not(.promo):not(.promo *), :root[data-theme="light"] .drawer *:not(.d):not(.mh):not(.d-demo):not(.d-demo *):not(.bn-bam) { color: var(--text) !important; } /* Supporting copy stays quieter than the link titles rather than going flat. */ :root[data-theme="light"] .mega .d, :root[data-theme="light"] .drawer .d { color: var(--text-dim) !important; } :root[data-theme="light"] .mega .mh, :root[data-theme="light"] .drawer .mh, :root[data-theme="light"] .mega-foot a { color: var(--peri) !important; } /* background-image, NOT background: the shorthand resets background-clip, which is what turns clipped gradient TEXT into a solid painted block. */ /* Display numbers across these pages are filled with a CLIPPED pale gradient, so they never pass through `color:` and stay washed out on cream. Use background-image, never the `background` shorthand — the shorthand resets background-clip and turns clipped text into a solid painted block. */ /* The clip and the transparent fill are declared HERE rather than relied on from the page. Not every `.price .n` is clipped gradient text — the comparison page styles its tier prices with a plain rule — and painting a gradient onto one of those produced a solid indigo block behind inherited dark ink at 2.40:1. Setting all three together means this rule can only ever produce clipped text, whatever the page underneath declares. */ :root[data-theme="light"] .price .n, :root[data-theme="light"] .stat .n, :root[data-theme="light"] .kpi .n, :root[data-theme="light"] .metric .n { background-image: linear-gradient(120deg, #37489F, #5A6DD4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } :root[data-theme="light"] { background: var(--t-night); } :root[data-theme="light"] body { background: var(--t-night); color: var(--t-fg); } /* Set dressing authored for a black page. !important is load-bearing: the designs ship display/opacity as INLINE styles, which beat any plain selector. */ :root[data-theme="light"] [data-stars="1"] { display: none !important; } :root[data-theme="light"] [data-bmvignette="1"] { display: none !important; } :root[data-theme="light"] [data-bmgrain="1"] { opacity: 0.04 !important; mix-blend-mode: multiply; } :root[data-theme="light"] [data-bmglow="1"] { opacity: 0.22 !important; } :root[data-theme="light"] [data-bmsky="1"] { background: linear-gradient(180deg, #FDFBF7 0%, #F7F4EE 44%, #F1EFF8 78%, #EAEAF6 100%) !important; } /* Blur over cream mostly samples neighbouring dark shadows and smears them. */ :root[data-theme="light"] [style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Only a white wordmark and white-forced customer logos ship in assets/. */ :root[data-theme="light"] img[src*="boom-logo-white"] { filter: brightness(0); } :root[data-theme="light"] img[src*="assets/customers/"] { filter: brightness(0) !important; opacity: 0.72 !important; } /* Floating nav sits over dark product shots; it needs its own opaque ground. */ :root[data-theme="light"] [data-nav-bar="1"] { background: rgba(255,255,255,0.94) !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 10px 34px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important; } :root[data-theme="light"] [data-nav-panel="1"] { background: rgba(255,255,255,0.98) !important; border-color: rgba(0,0,0,0.10) !important; box-shadow: 0 30px 90px rgba(0,0,0,0.16) !important; } /* --- text legibility ---------------------------------------------------- The faint tokens are shared by hairlines, dividers and text. Raising the token itself would thicken every rule on the site, so these target the TEXT uses only: the designs ship colour as an inline style, so matching on that attribute hits exactly the spans that carry words and nothing else. Values are the WCAG AA floor on white (4.5:1 body, 3:1 large). */ :root[data-theme="light"] [style*="color: var(--t-w180)"], :root[data-theme="light"] [style*="color:var(--t-w180)"], :root[data-theme="light"] [style*="color: var(--t-w200)"], :root[data-theme="light"] [style*="color:var(--t-w200)"], :root[data-theme="light"] [style*="color: var(--t-w250)"], :root[data-theme="light"] [style*="color:var(--t-w250)"], :root[data-theme="light"] [style*="color: var(--t-w300)"], :root[data-theme="light"] [style*="color:var(--t-w300)"], :root[data-theme="light"] [style*="color: var(--t-w320)"], :root[data-theme="light"] [style*="color:var(--t-w320)"], :root[data-theme="light"] [style*="color: var(--t-w340)"], :root[data-theme="light"] [style*="color:var(--t-w340)"], :root[data-theme="light"] [style*="color: var(--t-w350)"], :root[data-theme="light"] [style*="color:var(--t-w350)"], :root[data-theme="light"] [style*="color: var(--t-w380)"], :root[data-theme="light"] [style*="color:var(--t-w380)"] { color: rgba(0,0,0,0.62) !important; } /* The emerald accent reads as a label ("Read-only", "What BAM reads") at body size, where #059669 lands at 3.3-3.8:1 on the light grounds. Emerald-700 clears 4.5:1 on white and on the pale mint chip. Overriding the token rather than the text uses: the same token also paints small solid chips, which only get better with a deeper green behind their white labels. */ :root[data-theme="light"] { --boom-success: #047857; } /* Counters that sit ON the solid indigo accent, not on the page. The light inversion turns their ink black, which lands at 4.01:1 over indigo; white is what the surface was designed to carry. */ :root[data-theme="light"] [data-fx-count] { color: #fff !important; } /* The article CTA panel on the 80 blog posts. Its ground is a radial indigo glow over rgba(9,12,32,0.6) — dark navy, which left the light theme's ink at 1.00:1 on it. Same treatment as .final: keep the glow, pale the ground. Scoped by data-section because .cta is a generic name elsewhere. */ :root[data-theme="light"] .cta[data-section="article-cta"] { background: radial-gradient(600px 300px at 50% 0%, rgba(66,87,196,0.16), rgba(66,87,196,0.05)) !important; border-color: rgba(18,20,43,0.10) !important; } /* The "Add Boom Apps" CTA is a deliberately black button on the light page. Its label was --t-fg, which light mode makes near-black too: 1.10:1 on its own background. The button stays black; the label goes white. */ :root[data-theme="light"] [data-cta-label] { color: #fff !important; } /* "Meet BAM" is the one nav item that is meant to stand out. It carried an inline coral, which the light-ink sweep above overrode — so it rendered the same dark as Product/Solutions/Pricing and stopped reading as special. Coral-700 keeps the accent and clears AA on the light pill. */ :root[data-theme="light"] .bn .bn-bam, :root[data-theme="light"] .drawer .bn-bam { color: #C4433B !important; } /* The outline variant clears the button's accent background but inherits its white label, which lands at 1.07:1 on cream. Ink follows the ground it is actually on, so the ghost keeps body ink. */ :root[data-theme="light"] .btn.ghost { color: var(--text) !important; } /* KPI caption ("OCCUPANCY", "ADR", "REVPAR"): a pale periwinkle authored for a black card, left at 1.43:1 on the light one. Kept periwinkle rather than flattened to body ink — it is a label, and the tint is doing work. */ :root[data-theme="light"] .kl { color: #4657C9 !important; } /* The closing CTA band on 22 pages. Its gradient is two --t-h tokens (already lifted to white) plus a LITERAL #2A36A8 the tokenizer never saw, so light mode rendered it half indigo, half white with dark ink across both — 1.89:1 at the indigo end. Two of the three stops were already light, so a pale indigo tint is the band this design asks for, not a dark one. */ :root[data-theme="light"] .final { background: linear-gradient(165deg,#E9ECFA 0%,#F6F5FB 42%,var(--t-h4,#FFFFFF) 100%) !important; border-top-color: rgba(18,20,43,0.10) !important; } /* Surfaces that stay dark on the light page keep the ink they were designed with. Generated from the same step list as the light block. */ :root[data-theme="light"] [aria-label="A night on your portfolio"] { --t-w0: rgba(255,255,255,0); --t-w14: rgba(255,255,255,0.014); --t-w15: rgba(255,255,255,0.015); --t-w20: rgba(255,255,255,0.02); --t-w25: rgba(255,255,255,0.025); --t-w28: rgba(255,255,255,0.028); --t-w30: rgba(255,255,255,0.03); --t-w35: rgba(255,255,255,0.035); --t-w40: rgba(255,255,255,0.04); --t-w45: rgba(255,255,255,0.045); --t-w50: rgba(255,255,255,0.05); --t-w60: rgba(255,255,255,0.06); --t-w70: rgba(255,255,255,0.07); --t-w80: rgba(255,255,255,0.08); --t-w90: rgba(255,255,255,0.09); --t-w100: rgba(255,255,255,0.1); --t-w110: rgba(255,255,255,0.11); --t-w120: rgba(255,255,255,0.12); --t-w130: rgba(255,255,255,0.13); --t-w140: rgba(255,255,255,0.14); --t-w150: rgba(255,255,255,0.15); --t-w160: rgba(255,255,255,0.16); --t-w180: rgba(255,255,255,0.18); --t-w200: rgba(255,255,255,0.2); --t-w220: rgba(255,255,255,0.22); --t-w240: rgba(255,255,255,0.24); --t-w260: rgba(255,255,255,0.26); --t-w280: rgba(255,255,255,0.28); --t-w300: rgba(255,255,255,0.3); --t-w320: rgba(255,255,255,0.32); --t-w340: rgba(255,255,255,0.34); --t-w350: rgba(255,255,255,0.35); --t-w380: rgba(255,255,255,0.38); --t-w400: rgba(255,255,255,0.4); --t-w420: rgba(255,255,255,0.42); --t-w450: rgba(255,255,255,0.45); --t-w500: rgba(255,255,255,0.5); --t-w550: rgba(255,255,255,0.55); --t-w560: rgba(255,255,255,0.56); --t-w580: rgba(255,255,255,0.58); --t-w600: rgba(255,255,255,0.6); --t-w620: rgba(255,255,255,0.62); --t-w650: rgba(255,255,255,0.65); --t-w660: rgba(255,255,255,0.66); --t-w680: rgba(255,255,255,0.68); --t-w700: rgba(255,255,255,0.7); --t-w720: rgba(255,255,255,0.72); --t-w750: rgba(255,255,255,0.75); --t-w780: rgba(255,255,255,0.78); --t-w800: rgba(255,255,255,0.8); --t-w820: rgba(255,255,255,0.82); --t-w840: rgba(255,255,255,0.84); --t-w850: rgba(255,255,255,0.85); --t-w860: rgba(255,255,255,0.86); --t-w880: rgba(255,255,255,0.88); --t-w900: rgba(255,255,255,0.9); --t-w920: rgba(255,255,255,0.92); --t-w940: rgba(255,255,255,0.94); --t-w950: rgba(255,255,255,0.95); --t-w960: rgba(255,255,255,0.96); --t-w970: rgba(255,255,255,0.97); --t-fg: #F4F6FF; }