/* ════════════════════════════════════════════════════════════════════ Bluvium light-system.css — shared light page foundation Opt-in: add class="ls-page" to and link this file LAST. Scoped under .ls-page so it (a) never leaks to already-converted pages and (b) outranks each page's inline dark `!important` chrome via the extra scope-class specificity. System: Source Serif 4 headings + Inter body · coral = primary action + the one hero highlight · teal = connective accent (eyebrows, secondary buttons, links, tags) · navy = punctuation bands only (callout / CTA). See project_hero_template_system + feedback_light_nav_checklist. ════════════════════════════════════════════════════════════════════ */ .ls-page { --ls-bg: #F4F7F9; --ls-surface: #EAEFF3; --ls-card: #FFFFFF; --ls-card-alt: #F6F9FB; --ls-navy: #0A1422; --ls-navy-warm: #122236; --ls-coral: #E8854A; --ls-coral-hover: #D67438; --ls-coral-deep: #B8602F; --ls-ink: #0D1B2A; --ls-teal: #2D8A9C; --ls-teal-deep: #246B7A; --ls-teal-bright: #54B6C9; --ls-text: #0D1B2A; --ls-text-sub: #46566A; --ls-text-faint: #5E6E80; --ls-line: rgba(13,27,42,0.10); --ls-line-strong: rgba(13,27,42,0.16); --ls-serif: 'Source Serif 4','Source Serif Pro',Georgia,serif; --ls-sans: 'Inter',system-ui,-apple-system,sans-serif; } body.ls-page { background: var(--ls-bg) !important; color: var(--ls-text); } .ls-page ::selection { background: var(--ls-teal-bright); color: #06222B; } /* ── NAV (light) ── */ .ls-page .nav { background: rgba(244,247,249,0.88) !important; border-bottom: 1px solid #E1E6EB !important; backdrop-filter: blur(12px); } .ls-page .nav.scrolled { background: rgba(244,247,249,0.95) !important; } .ls-page .nav-link { color: #46566A !important; } .ls-page .nav-link:hover { color: var(--ls-ink) !important; } .ls-page .nav-link.ls-active { color: var(--coral-text) !important; font-weight: 600; } .ls-page .nav .btn.btn-p, .ls-page .nav .btn.nav-cta { background: var(--ls-coral) !important; color: var(--ls-ink) !important; border: 1.5px solid var(--ls-coral) !important; border-radius: 8px !important; padding: 13px 24px !important; font-weight: 700 !important; } .ls-page .nav .btn.btn-p:hover, .ls-page .nav .btn.nav-cta:hover { background: var(--ls-coral-hover) !important; border-color: var(--ls-coral-hover) !important; } .ls-page .hamburger span { background: var(--ls-ink) !important; } /* mobile dropdown panel — style.css's panel is dark navy; light pages need it light */ @media (max-width: 1024px) { .ls-page .nav-links { background: rgba(244,247,249,0.98) !important; border-bottom: 1px solid #E1E6EB !important; } .ls-page .nav-links .nav-link { color: #46566A !important; border-bottom-color: #E1E6EB !important; } .ls-page .nav-links .nav-link:hover, .ls-page .nav-links .nav-link.ls-active { color: var(--ls-ink) !important; } } /* ── HERO (light editorial) ── */ .ls-page .page-hero { background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important; padding: 132px 0 44px !important; } /* standardize the hero → first-section gap (was 44px on some pages, 144px on others) */ .ls-page .page-hero + section { padding-top: 56px !important; } /* long-form content pages: kill the doubled section/article top padding after hero */ .ls-page .s-light:has(.content-wrap) { padding-top: 0 !important; } .ls-page .content-wrap { padding-top: 40px !important; margin-left: auto !important; margin-right: auto !important; } .ls-page .page-hero .hero-grid { opacity: 0 !important; } .ls-page .page-hero .breadcrumb, .ls-page .page-hero .breadcrumb a { color: var(--ls-text-faint) !important; } .ls-page .page-hero .breadcrumb a:hover { color: var(--ls-teal-deep) !important; } .ls-page .page-hero .label { color: var(--ls-teal-deep) !important; } .ls-page .page-hero .label::before { background: var(--ls-teal-deep) !important; } .ls-page .page-hero h1 { color: var(--ls-ink) !important; font-family: var(--ls-serif) !important; font-weight: 600 !important; letter-spacing: -0.02em; } .ls-page .page-hero h1 em { color: var(--coral-text) !important; -webkit-text-fill-color: var(--coral-text) !important; background: none !important; font-style: italic !important; } .ls-page .page-hero p { color: var(--ls-text-sub) !important; } /* ── TEXT-ONLY HEROES: single column, centered (no 2-col splits, no dead side space). Visual heroes (.cap-hero-grid w/ schematic) keep their 2-col layout. ── */ .ls-page .page-hero .page-hero-content { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; } .ls-page .page-hero .page-hero-content .breadcrumb, .ls-page .page-hero .page-hero-content > div:not(.hero-grid) { display: flex; justify-content: center; flex-wrap: wrap; } .ls-page .page-hero .page-hero-content p { margin-left: auto; margin-right: auto; } /* schematic/visual heroes keep their left-aligned copy column */ .ls-page .cap-hero-grid .page-hero-content { max-width: none !important; margin: 0 !important; text-align: left !important; } .ls-page .cap-hero-grid .page-hero-content .breadcrumb, .ls-page .cap-hero-grid .page-hero-content > div:not(.hero-grid) { justify-content: flex-start !important; } .ls-page .cap-hero-grid .page-hero-content p { margin-left: 0 !important; } /* collapse the old 2-col text-split into a single centered column */ .ls-page .cap-hero-text { display: block; max-width: 880px; margin: 0 auto; text-align: center; } .ls-page .cap-hero-text .cht-support { border-left: none !important; padding-left: 0 !important; padding-bottom: 0 !important; margin-top: 20px; } .ls-page .cap-hero-text .cht-support p { margin-left: auto; margin-right: auto; } .ls-page .cap-hero-text .cht-cta { display: flex; justify-content: center; margin-top: 26px; } /* ── SECTION BACKGROUNDS (rhythm) ── */ .ls-page .s-light { background: var(--ls-bg) !important; } .ls-page .s-surface { background: var(--ls-surface) !important; } .ls-page .s-dark { background: var(--ls-navy) !important; } /* ── TYPOGRAPHY / EYEBROWS ── */ .ls-page .s-title { font-family: var(--ls-serif) !important; font-weight: 600 !important; color: var(--ls-ink) !important; letter-spacing: -0.02em; } .ls-page .s-title em { font-style: normal !important; color: inherit !important; } .ls-page .s-label, .ls-page .label { color: var(--ls-teal-deep) !important; } .ls-page .s-label-teal { color: var(--ls-teal-deep) !important; } .ls-page .s-sub { color: var(--ls-text-sub) !important; } /* SAFETY NET: any heading on a LIGHT section is dark — catches stray inline white headings left from the v1 markup (em keeps its own accent color). */ .ls-page .s-light h2, .ls-page .s-surface h2, .ls-page .s-light h3, .ls-page .s-surface h3 { color: var(--ls-ink) !important; } .ls-page .s-light h2 em, .ls-page .s-surface h2 em { color: var(--ls-teal-deep) !important; } /* EXCEPTION: navy boxes/bands nested INSIDE a light section keep LIGHT headings (the safety net above must not darken text sitting on a dark box). */ .ls-page .managed-callout h2, .ls-page .managed-callout h3, .ls-page .s-dark h2, .ls-page .s-dark h3, .ls-page .cta h2, .ls-page .cta h3, .ls-page .cta-section h2, .ls-page .cta-section h3, .ls-page .cta-bar h2, .ls-page .cta-bar h3, .ls-page .cap-layer-core h2, .ls-page .cap-layer-core h3 { color: #F4F6FB !important; } /* …but WHITE cards nested in a navy section keep DARK headings (e.g. mv-card) */ .ls-page .mv-card h2, .ls-page .mv-card h3, .ls-page .mv-card h4 { color: var(--ls-ink) !important; } .ls-page .managed-callout h2 em, .ls-page .managed-callout h3 em, .ls-page .s-dark h2 em, .ls-page .cta h2 em, .ls-page .cta-section h2 em, .ls-page .cta-bar h2 em { color: var(--coral-text) !important; -webkit-text-fill-color: var(--coral-text) !important; } /* inline links on light content → DEEP teal (bright teal is unreadable on white). Excludes any button (class containing "btn") so CTAs keep their own colors. */ .ls-page .s-light a:not([class*="btn"]):not(.nav-link), .ls-page .s-surface a:not([class*="btn"]):not(.nav-link), .ls-page .article a:not([class*="btn"]) { color: var(--ls-teal-deep) !important; } .ls-page .s-light a:not([class*="btn"]):not(.nav-link):hover, .ls-page .s-surface a:not([class*="btn"]):not(.nav-link):hover, .ls-page .article a:not([class*="btn"]):hover { color: var(--ls-coral) !important; } /* ── Universal hover affordance: EVERY link & button reacts on mouseover ── */ .ls-page a, .ls-page .btn, .ls-page [class*="btn"], .ls-page .nav-cta { transition: color .15s ease, background-color .18s ease, border-color .18s ease, opacity .15s ease, transform .18s ease; } .ls-page a:not([class*="btn"]):not(.nav-cta):hover { opacity: .72; } /* on navy sections (callout / cta / s-dark) eyebrows + titles go light */ .ls-page .s-dark .s-title, .ls-page .cta .s-title { color: #F4F6FB !important; } .ls-page .s-dark .s-label, .ls-page .s-dark .label, .ls-page .s-dark .s-label-teal, .ls-page .cta .s-label, .ls-page .cta .label, .ls-page .cta-section .s-label, .ls-page .cta-section .label, .ls-page .cta-bar .s-label, .ls-page .cta-bar .label { color: var(--ls-teal-bright) !important; } .ls-page .s-dark .label::before, .ls-page .cta .label::before, .ls-page .cta-section .label::before, .ls-page .cta-bar .label::before { background: var(--ls-teal-bright) !important; } .ls-page .s-dark .s-sub, .ls-page .cta .s-sub { color: #B7C2D2 !important; } /* CTA bands are ALWAYS centered (system rule — no per-page inline text-align needed) */ .ls-page .cta-bar, .ls-page .cta-bar .wrap, .ls-page .cta, .ls-page .cta .wrap, .ls-page .cta-section, .ls-page .cta-section .wrap { text-align: center !important; } .ls-page .cta-bar p, .ls-page .cta p, .ls-page .cta-section p { margin-left: auto !important; margin-right: auto !important; } .ls-page .cta-bar > .wrap > div, .ls-page .cta > .wrap > div, .ls-page .cta-section > .wrap > div { justify-content: center; } /* ── ENGAGE / step-row component (Capability template) ── */ .ls-page .engage-step, .ls-page .s-surface .engage-step { background: #fff !important; border: 1px solid var(--ls-line) !important; box-shadow: 0 10px 30px -26px rgba(13,27,42,0.20); } .ls-page .engage-step h4 { color: var(--ls-text) !important; font-family: var(--ls-serif); font-weight: 600; } .ls-page .engage-step p { color: var(--ls-text-sub) !important; } .ls-page .engage-num { color: var(--ls-teal-deep) !important; } .ls-page .engage-step::after { color: var(--ls-text-faint) !important; } /* ── BUTTONS ── */ .ls-page .btn.btn-p { background: var(--ls-coral) !important; color: var(--ls-ink) !important; border: 1.5px solid var(--ls-coral) !important; border-radius: 8px !important; font-weight: 700 !important; } .ls-page .btn.btn-p:hover { background: var(--ls-coral-hover) !important; border-color: var(--ls-coral-hover) !important; } .ls-page .btn.btn-o { background: transparent !important; border: 1.5px solid rgba(36,107,122,0.40) !important; color: var(--ls-teal-deep) !important; border-radius: 8px !important; font-weight: 600 !important; } .ls-page .btn.btn-o:hover { background: rgba(45,138,156,0.07) !important; border-color: var(--ls-teal-deep) !important; } /* outline button on navy bands → bright teal */ .ls-page .s-dark .btn.btn-o, .ls-page .cta .btn.btn-o, .ls-page .cta-section .btn.btn-o, .ls-page .cta-bar .btn.btn-o { color: var(--ls-teal-bright) !important; border-color: rgba(84,182,201,0.45) !important; } .ls-page .s-dark .btn.btn-o:hover, .ls-page .cta .btn.btn-o:hover, .ls-page .cta-section .btn.btn-o:hover, .ls-page .cta-bar .btn.btn-o:hover { background: rgba(84,182,201,0.10) !important; border-color: var(--ls-teal-bright) !important; } /* ── CATEGORY TAGS — plain middot-separated text, never pills (v2 spec rule 4). Light-context teal color. Separator TRAILS each tag (::after) instead of leading the next (style-v2's ::before) so it never orphans at the start of a wrapped line. */ .ls-page .practice-tag, .ls-page .vertical-tag { background: transparent !important; border: none !important; padding: 0 !important; color: var(--ls-teal-deep) !important; } .ls-page .vertical-tag + .vertical-tag::before, .ls-page .practice-tag + .practice-tag::before { content: none !important; } .ls-page .vertical-tag:not(:last-child)::after, .ls-page .practice-tag:not(:last-child)::after { content: '·'; margin: 0 11px; color: rgba(13,27,42,0.30); font-weight: 400; } .ls-page .practice-label, .ls-page .practice-link { color: var(--ls-teal-deep) !important; } /* other style-v2 "pill" labels that are actually plain labels → no chip bar */ .ls-page .solution-card-tech, .ls-page .breakdown-card-who { background: transparent !important; border: none !important; padding: 0 !important; } /* ── NAVY PUNCTUATION BAND (callout / cta / cta-bar) ── */ .ls-page .cta { background: var(--ls-navy) !important; } .ls-page .cta h2, .ls-page .cta .s-title { color: #F4F6FB !important; } .ls-page .cta p { color: #B7C2D2 !important; } .ls-page .cta-bar { background: var(--ls-navy) !important; } .ls-page .cta-bar h2 { color: #F4F6FB !important; font-family: var(--ls-serif) !important; font-weight: 600 !important; } .ls-page .cta-bar h2 em { color: var(--ls-coral) !important; font-style: normal !important; } .ls-page .cta-bar p { color: #B7C2D2 !important; } /* ── FOOTER (sitewide dark navy) ── */ .ls-page .footer { background: var(--ls-navy) !important; } .ls-page .footer-tagline, .ls-page .footer-link, .ls-page .footer-copy, .ls-page .footer-social a { color: #9CA9BC !important; } .ls-page .footer-col-title { color: #FFFFFF !important; } .ls-page .footer-link:hover, .ls-page .footer-social a:hover { color: #FFFFFF !important; } .ls-page .footer-badge { background: rgba(84,182,201,0.12) !important; color: var(--ls-teal-bright) !important; border: 1px solid rgba(84,182,201,0.24) !important; } .ls-page .footer-bottom, .ls-page .footer-offices { border-color: rgba(255,255,255,0.10) !important; } /* ── MANAGED-SERVICES callout (stays navy; brand the accent) ── */ .ls-page .managed-callout h3 em { color: var(--coral-text) !important; font-style: italic !important; -webkit-text-fill-color: var(--coral-text) !important; } .ls-page .managed-callout .btn-cta { background: var(--ls-coral) !important; color: var(--ls-ink) !important; transition: background .18s, transform .18s !important; } .ls-page .btn-cta:hover, .ls-page .managed-callout .btn-cta:hover { background: var(--ls-coral-hover) !important; color: var(--ls-ink) !important; } /* ════════════════════════════════════════════════════════════════════ PER-TYPE HERO COMPOSITIONS (variety lever 1) — each page-type gets a distinct hero shape. Home = navy proof-panel (in index.html). Below: ════════════════════════════════════════════════════════════════════ */ /* ── CAPABILITY hero: copy + right-side "connected stack" schematic ── */ .ls-page .cap-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; } .ls-page .cap-hero-grid .page-hero-content { max-width: none; } .ls-page .cap-stack { background: #fff; border: 1px solid var(--ls-line); border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 30px 64px -34px rgba(13,27,42,0.32); } .ls-page .cap-stack-label { font-family: 'SF Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ls-text-faint); margin-bottom: 16px; } .ls-page .cap-layer { border-radius: 9px; padding: 15px 18px; font-weight: 600; font-size: 0.92rem; text-align: center; } .ls-page .cap-layer-t { background: rgba(45,138,156,0.07); border: 1px solid rgba(45,138,156,0.20); color: var(--ls-teal-deep); } .ls-page .cap-layer-core { background: var(--ls-navy); color: #F4F6FB; border: 1px solid var(--ls-navy); font-family: var(--ls-serif); font-weight: 600; font-size: 1.08rem; box-shadow: 0 12px 26px -14px rgba(13,27,42,0.5); } .ls-page .cap-conn { width: 2px; height: 20px; margin: 5px auto; background: linear-gradient(to bottom, rgba(45,138,156,0.5), rgba(45,138,156,0.15)); } .ls-page .cap-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ls-page .cap-chips span { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ls-text-sub); background: var(--ls-surface); border: 1px solid var(--ls-line); border-radius: 6px; padding: 6px 10px; } .ls-page .cap-stack-foot { text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ls-line); font-size: 0.8rem; color: var(--ls-text-faint); } /* integration-hub variant: core + grid of connected systems (data-and-integrations) */ .ls-page .cap-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ls-page .cap-hub-grid span { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.03em; color: var(--ls-text-sub); background: var(--ls-surface); border: 1px solid var(--ls-line); border-radius: 8px; padding: 12px 8px; text-align: center; } @media (max-width: 900px) { .ls-page .cap-hero-grid { grid-template-columns: 1fr; gap: 44px; } } /* ── TEXT-FORWARD hero (AI, CRM): editorial 2-col split, no schematic ── */ /* (single-column centered text hero defined above near .page-hero) */ /* ── HERO proof link (e.g. "Watch the ATTOM webinar →") ── */ .ls-page .page-hero .hero-proof-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; color: var(--ls-teal-deep); font-weight: 600; font-size: 0.92rem; text-decoration: none; } .ls-page .page-hero .hero-proof-link:hover { color: var(--ls-coral-deep); } /* ── ACCELERATORS / product callout cards (links to Labs products) ── */ .ls-page .accel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 8px; } .ls-page .accel-card { display: block; background: #fff; border: 1px solid var(--ls-line); border-radius: 12px; padding: 22px; text-decoration: none; position: relative; overflow: hidden; transition: all 0.2s; box-shadow: 0 10px 30px -26px rgba(13,27,42,0.22); } .ls-page .accel-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ls-coral); opacity: 0.6; } .ls-page .accel-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -20px rgba(13,27,42,0.22); border-color: rgba(36,107,122,0.30); } .ls-page .accel-card:hover::before { opacity: 1; } .ls-page .accel-tag { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ls-teal-deep); margin-bottom: 8px; } .ls-page .accel-card h4 { font-family: var(--ls-serif); font-size: 1.05rem; font-weight: 600; color: var(--ls-text); margin: 0 0 6px; } .ls-page .accel-card p { font-size: 0.85rem; color: var(--ls-text-sub); line-height: 1.5; margin: 0 0 10px; } .ls-page .accel-link { font-size: 0.82rem; font-weight: 600; color: var(--ls-teal-deep); } @media (max-width: 640px) { .ls-page .accel-grid { grid-template-columns: 1fr; } } /* ── GENERIC LIGHT CARD (helper for converted components) ── */ .ls-page .ls-card { background: #fff; border: 1px solid var(--ls-line); border-radius: 12px; box-shadow: 0 10px 30px -26px rgba(13,27,42,0.22); }