/* =========================================================================== LASER ME — ACCENT LAYER One stylesheet, site-wide. Closes the C-type rows from the 2026-09-04 parity audit: the bespoke system live used (italic blue second lines, navy inversion bands, text-link CTAs, rule-led eyebrows, ghosted card numerals) against the build's stock Divi rendering. PROVENANCE. Every colour, size and weight below is lifted from the retired theme's own stylesheets, not chosen here: #155d95 blue-700 theme-mockup.css:26 --gold (accent as TEXT on light) #1f78bd blue-600 theme-mockup.css:27 --gold2 (fills) #8fc0e8 light blue theme-mockup.css:69 accent on navy drama grounds #2f8fd6 button fill on navy theme-mockup.css:74 #0e2a44 navy ground mockup-system.css:45 --sys-navy rgba(255,255,255,0.03) ghost numeral shared.css:346 .card-num 11px / .28em eyebrow upgrades.css:21 .hero-pretitle 28px rule before the eyebrow shared.css:223 .hero-pretitle::before 76px avatar, .14em uppercase caption showpiece.css:137,139 .sp-testi__slide SCOPE. Every selector is anchored to an .lms-* class. Those classes exist only on Laser Me records. Do not widen them. SPECIFICITY. Divi's compiled CSS writes section backgrounds as `.et_pb_section_N.et_pb_section{...!important}` and buttons as `body #page-container .et_pb_section .et_pb_button_N{...!important}`. The rules here are deliberately one step heavier than each of those. That is why the selectors look longer than they need to. NOT IN SCOPE — the four structural items are untouched by design: home hero, the stats 2-then-1 asymmetry, the testimonial carousel, and the about-us hero. This layer restyles what is there; it moves nothing. =========================================================================== */ :root { --lms-navy: #0e2a44; --lms-blue-700: #155d95; /* accent text on light */ --lms-blue-600: #1f78bd; /* fills */ --lms-blue-on-navy:#8fc0e8; /* accent text on navy */ --lms-btn-on-navy: #2f8fd6; --lms-ink: #0E2A44; --lms-ink-soft: #4D6070; --lms-cream: #F6F2EA; --lms-ghost: rgba(255,255,255,0.03); } /* --------------------------------------------------------------------------- 1. THEME BUILDER HEADER The logo is now its own linked Image module (the Menu module offers no anchor for its logo — Divi's Menu.php wraps it in plain divs). Splitting the row into two columns is what makes the link possible; these rules put the two halves back on one line and size the wordmark, which is what 03-lms-header-css.php used to do for the Menu module's own logo. --------------------------------------------------------------------------- */ .lms-tb-header .et_pb_row.lms-tb-header-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 40px; /* Divi caps .et_pb_row at 1080px regardless of the module's max_width setting. The nav needs 912px and the wordmark 190px, so at 1080 the last item wrapped to a second line. Released to the module's intended 1440. */ width: 94% !important; max-width: 1440px !important; } /* Eight top-level items plus BOOK NOW must stay on one line. */ .lms-tb-header .lms-nav .et_pb_menu__menu > nav > ul { flex-wrap: nowrap; } .lms-tb-header .lms-tb-header-row > .et_pb_column { margin-bottom: 0 !important; float: none; } /* Divi forces .et_pb_column{width:100%!important} below 981px, which gave the logo column the whole row and squeezed the nav column to 0 — the hamburger then sat 52px outside the viewport and the page scrolled sideways. Both widths are !important so the flex sizing survives that breakpoint. */ .lms-tb-header .lms-tb-header-row > .et_pb_column:first-child { flex: 0 0 auto; width: auto !important; max-width: 60%; } .lms-tb-header .lms-tb-header-row > .et_pb_column:last-child { flex: 1 1 auto; width: auto !important; min-width: 0; } .lms-tb-header .lms-logo { margin-bottom: 0 !important; line-height: 0; } .lms-tb-header .lms-logo img { max-width: 190px; max-height: 46px; width: auto; height: auto; display: block; } /* Push the nav to the right edge of its column. */ .lms-tb-header .lms-nav .et_pb_menu__wrap { justify-content: flex-end; } .lms-tb-header .lms-nav .et_pb_menu__menu { margin-left: auto; } @media (max-width: 980px) { .lms-tb-header .lms-logo img { max-width: 150px; max-height: 38px; } .lms-tb-header .et_pb_row.lms-tb-header-row { gap: 16px; } /* The outlined BOOK NOW treatment belongs to the desktop bar; inside the mobile menu panel the items are stacked full-width links and a border would look wrong. */ .lms-tb-header .lms-nav .et_pb_menu__menu > nav > ul > li:last-child > a { border: 0; padding: 0 !important; } } @media (max-width: 480px) { .lms-tb-header .lms-logo img { max-width: 132px; max-height: 34px; } } /* BOOK NOW in the nav was a plain link; live rendered it as an outlined button. */ .lms-tb-header .lms-nav .et_pb_menu__menu > nav > ul > li:last-child > a { border: 2px solid var(--lms-blue-700); border-radius: 1px; padding: 10px 18px !important; color: var(--lms-blue-700) !important; transition: background-color .2s ease, color .2s ease; } .lms-tb-header .lms-nav .et_pb_menu__menu > nav > ul > li:last-child > a:hover { background: var(--lms-blue-700); color: #fff !important; opacity: 1; } /* --------------------------------------------------------------------------- 2. ACCENT — italic blue second lines Live set the second clause of a heading in italic accent on its own line, via . Hero headings break the line; body headings stay inline so short accents do not strand a word. --------------------------------------------------------------------------- */ .lms-section h1 em, .lms-section h2 em, .lms-section h3 em, .lms-prose h2 em, .lms-prose h3 em, .lms-closer h2 em { font-style: italic; color: var(--lms-blue-700) !important; font-weight: inherit; } .lms-hero h1 em, .lms-hero h2 em { font-style: italic; color: var(--lms-blue-700) !important; display: block; } /* On a navy ground the accent flips to the light blue live used there. */ .lms-cta h1 em, .lms-cta h2 em, .lms-cta h3 em, .lms-hero-video h1 em, .lms-hero-video h2 em, .lms-programs h1 em, .lms-programs h2 em, .lms-programs h3 em, .lms-testi-section h1 em, .lms-testi-section h2 em, .lms-testi-section h3 em { color: var(--lms-blue-on-navy) !important; } /* --------------------------------------------------------------------------- 3. NAVY INVERSION BANDS Live alternated light sections with navy ones. The build renders both of these on cream/white. Backgrounds and every inherited text colour are flipped here. --------------------------------------------------------------------------- */ body .lms-programs.et_pb_section, body .lms-testi-section.et_pb_section { background-color: var(--lms-navy) !important; } body .lms-programs .et_pb_text, body .lms-programs .et_pb_text p, body .lms-testi-section .et_pb_text, body .lms-testi-section .et_pb_text p { color: #B9C6D3 !important; } body .lms-programs .et_pb_text h1, body .lms-programs .et_pb_text h2, body .lms-programs .et_pb_text h3, body .lms-programs .et_pb_text h4, body .lms-testi-section .et_pb_text h1, body .lms-testi-section .et_pb_text h2, body .lms-testi-section .et_pb_text h3, body .lms-testi-section .et_pb_text h4 { color: #FFFFFF !important; } /* Programme cards sat ON the navy, not on cream. */ body .lms-programs .lms-grid > .et_pb_column { background-color: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10); position: relative; overflow: hidden; } /* --------------------------------------------------------------------------- 4. TEXT-LINK CTAs Live used a text link with a rule under it for the in-content secondary actions the build tags .lms-btn-ghost: Explore x5, Discover the Program x3, Meet the team. All nine are on the homepage, which is where the parity audit found them. DELIBERATELY NOT INCLUDED: .lms-btn-secondary. It carries "Call (636) 391-0015" in the closing CTA of 40 pages. Live paired a solid primary with an OUTLINED secondary there, not a text link, and demoting a phone CTA to a bare underline on every page would be a regression, not parity. Primary buttons are untouched. --------------------------------------------------------------------------- */ body #page-container .et_pb_section .lms-btn-ghost.et_pb_button { background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0 !important; padding: 2px 0 6px 0 !important; color: var(--lms-blue-700) !important; transition: color .2s ease, border-color .2s ease; } body #page-container .et_pb_section .lms-btn-ghost.et_pb_button:hover { color: var(--lms-blue-600) !important; border-bottom-color: var(--lms-blue-600) !important; background: transparent !important; padding: 2px 0 6px 0 !important; } /* Divi appends an arrow glyph on hover and animates padding to make room. A text link should not jump, so the glyph is suppressed on these two. */ body #page-container .et_pb_section .lms-btn-ghost.et_pb_button:after { display: none !important; } /* On the navy bands the same link has to read on dark. */ body .lms-programs .lms-btn-ghost.et_pb_button, body .lms-cta .lms-btn-ghost.et_pb_button, body .lms-testi-section .lms-btn-ghost.et_pb_button { color: var(--lms-blue-on-navy) !important; } body .lms-programs .lms-btn-ghost.et_pb_button:hover, body .lms-cta .lms-btn-ghost.et_pb_button:hover, body .lms-testi-section .lms-btn-ghost.et_pb_button:hover { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; } /* --------------------------------------------------------------------------- 5. EYEBROWS, STAT NUMERALS, GHOSTED CARD NUMERALS The stats layout is a structural item and is NOT touched — only the numeral treatment, which live set in italic accent. --------------------------------------------------------------------------- */ /* THREE CLASSES, ONE COMPONENT. The build tags the same element three different ways depending on which generator pass emitted it: .lms-eyebrow (home only), .hero-pretitle (39 pages) and .section-eyebrow (13 pages). They are the same component and live styled them identically, so all three are selected together. TWO TOKENS, because live used two. The retired theme re-pointed the accent on its navy "drama" grounds rather than using one colour everywhere: theme-mockup.css:26 --gold:#155d95 blue-700, accent as TEXT on light theme-mockup.css:49 "DRAMA SECTIONS: navy ground, light text, light-blue accent" theme-mockup.css:69 --gold:#8fc0e8 light blue accent, AA on navy Measured on this site's own navy, #0E2A44: #155d95 gives 2.12:1 and is effectively invisible; #8fc0e8 gives 7.59:1. On the light grounds the site actually uses, #155d95 ranges 5.73:1 (cream #EFE9DE) to 6.93:1 (white). Typographic values are live's, not chosen here: upgrades.css:21 11px, letter-spacing .28em shared.css:223 the 28px rule before the eyebrow --------------------------------------------------------------------------- */ /* -- a. the treatment itself, on every eyebrow regardless of ground --------- */ .lms-section .lms-eyebrow, .lms-section .hero-pretitle, .lms-section .section-eyebrow, .et-l--body .lms-hero .hero-pretitle { font-size: 11px !important; letter-spacing: .28em !important; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px !important; } .lms-section .lms-eyebrow::before, .lms-section .hero-pretitle::before, .lms-section .section-eyebrow::before, .et-l--body .lms-hero .hero-pretitle::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: 0 0 28px; } /* -- b. colour on LIGHT grounds: 87 of the 91 ------------------------------- */ .lms-section .lms-eyebrow, .lms-section .hero-pretitle, .lms-section .section-eyebrow { color: var(--lms-blue-700) !important; } /* -- c. colour on NAVY grounds: the remaining 4 ----------------------------- */ /* SPECIFICITY, deliberately. Section 3 of this file sets body .lms-programs .et_pb_text p { color:#B9C6D3 !important } (0,0,2,2) which out-weighed the previous `.lms-programs .lms-eyebrow` (0,0,2,0), so the navy override never actually applied and those eyebrows rendered #B9C6D3. Routing these through .et_pb_text puts them at (0,0,3,1) and higher, which beats it. Do not shorten these selectors. The fourth navy eyebrow is not on a page at all: /blog/ renders Theme Builder body layout 733, whose section is `lms-hero` with NO `lms-section`, so it is reached through Divi's own .et-l--body wrapper. Page 431's own hero-pretitle never renders — the body layout replaces it. */ body .lms-hero-video .et_pb_text .lms-eyebrow, body .lms-hero-video .et_pb_text .hero-pretitle, body .lms-hero-video .et_pb_text .section-eyebrow, body .lms-programs .et_pb_text .lms-eyebrow, body .lms-programs .et_pb_text .hero-pretitle, body .lms-programs .et_pb_text .section-eyebrow, body .lms-testi-section .et_pb_text .lms-eyebrow, body .lms-testi-section .et_pb_text .hero-pretitle, body .lms-testi-section .et_pb_text .section-eyebrow, body .lms-cta .et_pb_text .lms-eyebrow, body .lms-cta .et_pb_text .hero-pretitle, body .lms-cta .et_pb_text .section-eyebrow, body .et-l--body .lms-hero .et_pb_text .lms-eyebrow, body .et-l--body .lms-hero .et_pb_text .hero-pretitle, body .et-l--body .lms-hero .et_pb_text .section-eyebrow { color: var(--lms-blue-on-navy) !important; } /* -- d. centring. Divi marks a centred text module with .et_pb_text_align_center; the rule then sits on both sides so the eyebrow stays balanced. --------- */ .lms-section .et_pb_text_align_center .lms-eyebrow, .lms-section .et_pb_text_align_center .hero-pretitle, .lms-section .et_pb_text_align_center .section-eyebrow, .et-l--body .lms-hero .et_pb_text_align_center .hero-pretitle, .lms-programs .lms-eyebrow, .lms-testi-section .lms-eyebrow, .lms-services-section .lms-eyebrow { justify-content: center; } .lms-stats .stat-num { font-style: italic; font-weight: 300 !important; color: var(--lms-blue-700) !important; font-size: clamp(2.6rem, 5vw, 3.6rem) !important; line-height: 1 !important; font-variant-numeric: tabular-nums; margin-bottom: .25em; } .lms-stats .stat-label { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--lms-ink-soft) !important; } /* Large ghosted 01/02/03 behind each programme card. */ .lms-programs .lms-grid > .et_pb_column .card-num { position: absolute; bottom: 4px; right: 16px; margin: 0; font-style: italic; font-weight: 300 !important; font-size: 4.5rem !important; line-height: 1 !important; color: var(--lms-ghost) !important; pointer-events: none; z-index: 0; } .lms-programs .lms-grid > .et_pb_column .et_pb_text, .lms-programs .lms-grid > .et_pb_column .et_pb_button_module_wrapper { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 6. TESTIMONIAL Restored content, styled as live did: round avatar, italic quote, small letter-spaced caption in the accent. --------------------------------------------------------------------------- */ /* Divi did not compile the row's max_width for a row inserted outside the builder, so the module is capped and centred here instead of relying on the row. */ /* NOTE the class name. 04-lms-home-css.php already owns .lms-testi for a ROW of testimonial cards and makes it display:flex above 981px; reusing that name made the figure a flex item and shrink-wrapped it. This module is .lms-testi-quote. */ .lms-testi-section .lms-testi-quote { max-width: 760px; margin-left: auto !important; margin-right: auto !important; } .lms-testi-quote .lms-testi-slide { margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .lms-testi-quote .lms-testi-slide .lms-testi-avatar { line-height: 0; } .lms-testi-quote .lms-testi-slide img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-bottom: 1.75rem; } .lms-testi-quote .lms-testi-slide blockquote p { margin: 0; font: inherit; color: inherit; } .lms-testi-quote .lms-testi-slide blockquote { font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.5; color: rgba(255,255,255,0.88); margin: 0 0 1.5rem; padding: 0; border: 0; max-width: 46ch; } .lms-testi-quote .lms-testi-slide figcaption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lms-blue-on-navy); } @media (max-width: 767px) { .lms-testi-quote .lms-testi-slide .lms-testi-avatar { line-height: 0; } .lms-testi-quote .lms-testi-slide img { width: 64px; height: 64px; margin-bottom: 1.25rem; } .lms-programs .lms-grid > .et_pb_column .card-num { font-size: 3.2rem !important; } } /* === END LASER ME ACCENT LAYER === */