/* ═══════════════════════════════════════════════════════════════════════════ NATIONAL SERVICE PAGES — navy frame, cream reading band M2-S128-SVCPAGE-REBUILD · 2026-08-03 Scope: the 8 national service pages created 2026-07-25 (IDs 188358-188365), gated by body.ml-svc-light (added in mindlab-national-service-page.php). BAND ORDER — navy hero -> CREAM ARTICLE BAND -> navy bio + investment. Mr. Marc, 2026-08-03: "our hero and sidebars and bottom of article must remain our dark bg, you were only to serve light bg (beige color) for the article itself." This file paints ONLY the reading band. It sets no background on and touches no theme wrapper, so the page frame, header, footer, related-posts and every other surface stay navy. This mirrors the ratified hybrid template single-landing-page-lplook.php (.mllp-hero navy -> .mllp-article cream, body max-width 760px), per the cream-band decision RATIFIED by Mr. Marc 2026-07-27. Values are read off that template and Visual_Identity_Protocol.md §2.1 / §3.2 — none invented. TOKENS Navy #05141B --ml-navy page frame, hero, bio, CTA Cream #F4F3EE --ml-cream reading band + H1 on navy Gunmetal #2C3539 --ml-gunmetal body text ON CREAM only Dk Copper #8E5D4E --ml-copper-reading H2 on cream; button ground Md Blue #456C8A --ml-blue-med H3 on cream Copper #A56D5B --ml-copper H2 on navy Lt Blue #8BADC4 --ml-blue-light H3 / accent on navy Soft White #FFFFFFDE --ml-white-soft body text on navy Etch Lt #05141B2E borders on cream Shadow Lt #05141B26 shadows on cream MEASURED CONTRAST — recomputed with the WCAG sRGB relative-luminance formula and independently confirmed by the Tier-2 audit. Earlier revisions of this block carried four wrong rows; these are the adjudicated values. Gunmetal on Cream ......... 11.28:1 (was 1.48:1 — the caption defect) Dk Copper on Cream ......... 4.94:1 Md Blue on Cream ........... 5.02:1 Pure White on Navy ........ 18.42:1 hero H1 Soft White on Navy ........ 14.25:1 hero + tail body (alpha composited) Copper on Navy ............. 4.40:1 H2 on navy — LARGE TYPE ONLY (AA-large 3:1) White on Dk Copper ......... 5.49:1 buttons Dk Copper is used as the button GROUND rather than Copper, which §2.1 nominally assigns to buttons. Stated as a deliberate, measured deviation: white on Copper is 4.25:1 and navy on Copper is 4.40:1 — BOTH fail AA for button text — while white on Dk Copper is 5.49:1. Accessibility floor wins; flagged for Mr. Marc rather than silently taken. ═══════════════════════════════════════════════════════════════════════════ */ body.ml-svc-light { --mlsvc-navy: #05141B; --mlsvc-cream: #F4F3EE; --mlsvc-gunmetal: #2C3539; --mlsvc-copper: #A56D5B; --mlsvc-copper-rd: #8E5D4E; --mlsvc-copper-lt: #D09A8B; --mlsvc-blue-med: #456C8A; --mlsvc-blue-lt: #8BADC4; --mlsvc-white-soft: rgba(255, 255, 255, .87); --mlsvc-etch: #05141B2E; --mlsvc-shadow: #05141B26; } /* Deliberately NO background rule on body and NO repaint of .elementor, .elementor-section, .page-content or any theme wrapper. Navy is the default canvas (Visual Identity §2.3) and it stays that way. */ /* ═══ HERO — NAVY ═══════════════════════════════════════════════════════ All 8 pages carry a featured image that the default page template never rendered, which is why there was no hero. Two columns from 1024px so the H1 and the booking CTA sit inside the first screen; a single stacked column put the CTA at 851px on a 1280x800 viewport, below the fold. */ body.ml-svc-light .ml-svc-hero { background: var(--mlsvc-navy); padding: 40px 20px 44px; } body.ml-svc-light .ml-svc-hero__inner { max-width: 1140px; margin: 0 auto; } @media (min-width: 1024px) { body.ml-svc-light .ml-svc-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; } body.ml-svc-light .ml-svc-hero__figure { order: 2; margin: 0; aspect-ratio: 4 / 3; } body.ml-svc-light .ml-svc-hero__text { order: 1; } } body.ml-svc-light .ml-svc-hero__figure { margin: 0 0 24px; border-radius: 8px; overflow: hidden; box-shadow: 0 15px 40px -5px #00000099; aspect-ratio: 16 / 9; } body.ml-svc-light .ml-svc-hero__figure img { display: block; width: 100%; height: 100%; object-fit: cover; } /* !important throughout: the Elementor kit rule `.elementor-kit-* h1` (0,1,1) outranks a class-only selector and collapses the hero H1 to ~20px. Same tactic, same reason, as the ratified lplook template. */ body.ml-svc-light .ml-svc-hero__title { font-family: "Instrument Sans", system-ui, sans-serif !important; font-weight: 600 !important; font-size: clamp(2.1rem, 4.4vw, 3.15rem) !important; line-height: 1.12 !important; letter-spacing: -.01em; /* Pure White per Visual_Identity_Protocol §3.2 "Color (Dark BG)" for H1. The lplook template uses Cream here; the palette SOT is floor-protected and wins on conflict. Divergence flagged for Mr. Marc. */ color: #FFFFFF !important; margin: 0 0 14px; } body.ml-svc-light .ml-svc-hero__standfirst { color: var(--mlsvc-white-soft) !important; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 62ch; margin: 0 0 26px; } /* ═══ THE CREAM READING BAND — the article, and only the article ════════ */ body.ml-svc-light .ml-svc-band { background: var(--mlsvc-cream); padding: 56px 20px 64px; } body.ml-svc-light .ml-svc-band__inner { max-width: 760px; margin: 0 auto; color: var(--mlsvc-gunmetal); } body.ml-svc-light .ml-svc-band__inner, body.ml-svc-light .ml-svc-band__inner p, body.ml-svc-light .ml-svc-band__inner li, body.ml-svc-light .ml-svc-band__inner td, body.ml-svc-light .ml-svc-band__inner th, body.ml-svc-light .ml-svc-band__inner blockquote { color: var(--mlsvc-gunmetal) !important; } body.ml-svc-light .ml-svc-band__inner h1, body.ml-svc-light .ml-svc-band__inner h4, body.ml-svc-light .ml-svc-band__inner h5, body.ml-svc-light .ml-svc-band__inner h6 { color: var(--mlsvc-gunmetal) !important; } body.ml-svc-light .ml-svc-band__inner h2 { color: var(--mlsvc-copper-rd) !important; } body.ml-svc-light .ml-svc-band__inner h3 { color: var(--mlsvc-blue-med) !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-style: italic !important; } body.ml-svc-light .ml-svc-band__inner a { color: var(--mlsvc-copper-rd) !important; text-decoration-color: var(--mlsvc-etch); text-underline-offset: 2px; } body.ml-svc-light .ml-svc-band__inner a:hover, body.ml-svc-light .ml-svc-band__inner a:focus-visible { color: var(--mlsvc-gunmetal) !important; text-decoration-color: var(--mlsvc-copper-lt); } /* THE CAPTION FIX — the defect Mr. Marc reported. WordPress core ships .wp-element-caption at #333, authored for light grounds. On the navy ground it measured 1.48:1. Inside the cream band Gunmetal measures 11.28:1. Stated explicitly, not inherited from core. */ body.ml-svc-light .ml-svc-band__inner figcaption, body.ml-svc-light .ml-svc-band__inner .wp-element-caption { color: var(--mlsvc-gunmetal) !important; font-size: 15px; line-height: 1.5; opacity: 1; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--mlsvc-copper-rd); text-align: left; } body.ml-svc-light .ml-svc-band__inner .wp-block-image img { border-radius: 6px; box-shadow: 0 12px 30px -5px var(--mlsvc-shadow); max-width: 100%; height: auto; } body.ml-svc-light .ml-svc-band__inner hr, body.ml-svc-light .ml-svc-band__inner .wp-block-separator { border: 0; border-top: 1px solid var(--mlsvc-etch); opacity: 1; } /* ═══ CTA BUTTONS ═══════════════════════════════════════════════════════ Ground is Dk Copper, not Copper: white on Copper measures 4.25:1 and fails AA at button weight — the same failure already measured on the site header button. White on Dk Copper measures 5.49:1, and it reads correctly on both the navy and the cream surfaces. */ body.ml-svc-light .ml-svc-cta-btn { display: inline-block; background: var(--mlsvc-copper-rd) !important; color: #FFFFFF !important; font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600 !important; font-size: 17px !important; line-height: 1; padding: 17px 34px; border-radius: 4px; border: 0; text-decoration: none !important; transition: box-shadow .18s ease, transform .18s ease; } body.ml-svc-light .ml-svc-cta-btn:hover, body.ml-svc-light .ml-svc-cta-btn:focus-visible { color: #FFFFFF !important; transform: translateY(-2px); outline: 3px solid var(--mlsvc-gunmetal); outline-offset: 3px; } body.ml-svc-light .ml-svc-hero .ml-svc-cta-note { color: var(--mlsvc-white-soft) !important; } body.ml-svc-light .ml-svc-cta-note { display: block; margin-top: 10px; font-size: 14px; } /* ═══ BOTTOM OF ARTICLE — NAVY (bio + investment band) ══════════════════ */ body.ml-svc-light .ml-svc-about, body.ml-svc-light .ml-svc-cta-close { background: var(--mlsvc-navy); color: var(--mlsvc-white-soft); padding: 56px 20px; margin: 0; } body.ml-svc-light .ml-svc-about p, body.ml-svc-light .ml-svc-cta-close p { color: var(--mlsvc-white-soft) !important; } body.ml-svc-light .ml-svc-about h2, body.ml-svc-light .ml-svc-cta-close h2 { color: var(--mlsvc-copper) !important; margin-top: 0; } body.ml-svc-light .ml-svc-cta-close .ml-svc-cta-note { color: var(--mlsvc-white-soft) !important; } body.ml-svc-light .ml-svc-about__inner, body.ml-svc-light .ml-svc-cta-close__inner { max-width: 760px; margin: 0 auto; } body.ml-svc-light .ml-svc-about__inner { display: flex; gap: 28px; align-items: flex-start; } body.ml-svc-light .ml-svc-about__portrait { flex: 0 0 132px; width: 132px; height: 176px; border-radius: 6px; object-fit: cover; object-position: top center; box-shadow: 0 15px 40px -5px #00000099; } body.ml-svc-light .ml-svc-about__body p:last-child { margin-bottom: 0; } /* ═══ RELOCATED TAIL — the page's OWN bio / related / investment block ═════ Cohort A pages carry About Dr. Ceruto -> Related work -> Begin with a Strategy Call inside their own copy. That whole trailing block is cut out of the cream band and re-emitted here so it renders on navy, per the ratified band order. Dark-BG palette rows apply throughout. */ body.ml-svc-light .ml-svc-tail { background: var(--mlsvc-navy); padding: 56px 20px 64px; } body.ml-svc-light .ml-svc-tail__inner { max-width: 760px; margin: 0 auto; color: var(--mlsvc-white-soft); } body.ml-svc-light .ml-svc-tail__inner, body.ml-svc-light .ml-svc-tail__inner p, body.ml-svc-light .ml-svc-tail__inner li, body.ml-svc-light .ml-svc-tail__inner blockquote { color: var(--mlsvc-white-soft) !important; } body.ml-svc-light .ml-svc-tail__inner h1, body.ml-svc-light .ml-svc-tail__inner h4, body.ml-svc-light .ml-svc-tail__inner h5, body.ml-svc-light .ml-svc-tail__inner h6 { color: #FFFFFF !important; } body.ml-svc-light .ml-svc-tail__inner h2 { color: var(--mlsvc-copper) !important; } body.ml-svc-light .ml-svc-tail__inner h3 { color: var(--mlsvc-blue-lt) !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-style: italic !important; } body.ml-svc-light .ml-svc-tail__inner a { color: var(--mlsvc-blue-lt) !important; text-underline-offset: 2px; } body.ml-svc-light .ml-svc-tail__inner a:hover, body.ml-svc-light .ml-svc-tail__inner a:focus-visible { color: var(--mlsvc-copper-lt) !important; } body.ml-svc-light .ml-svc-tail__inner figcaption, body.ml-svc-light .ml-svc-tail__inner .wp-element-caption { color: var(--mlsvc-white-soft) !important; font-size: 15px; padding-left: 12px; border-left: 2px solid var(--mlsvc-copper); } body.ml-svc-light .ml-svc-tail__inner img { max-width: 100%; height: auto; border-radius: 6px; } body.ml-svc-light .ml-svc-tail__inner hr, body.ml-svc-light .ml-svc-tail__inner .wp-block-separator { border: 0; border-top: 1px solid #FFFFFF33; opacity: 1; } /* A tail immediately followed by the injected navy CTA should not double its padding. */ body.ml-svc-light .ml-svc-tail + .ml-svc-cta-close { padding-top: 0; } /* ═══ FLOATING PILL ═════════════════════════════════════════════════════ */ body.ml-svc-light .ml-svc-pill { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 10px; background: var(--mlsvc-copper-rd) !important; color: #FFFFFF !important; font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600 !important; font-size: 15px !important; padding: 13px 22px; border-radius: 999px; text-decoration: none !important; box-shadow: 0 15px 40px -5px #00000099; } /* The pill's own display rule outranks the UA `[hidden]{display:none}` rule, so the hidden attribute alone did NOT hide it — caught in a screenshot while a property read still reported hidden===true. Both forms explicit. */ body.ml-svc-light .ml-svc-pill[hidden], body.ml-svc-light .ml-svc-pill.is-hidden { display: none !important; } body.ml-svc-light .ml-svc-pill:hover, body.ml-svc-light .ml-svc-pill:focus-visible { color: #FFFFFF !important; outline: 2px solid var(--mlsvc-copper-lt); outline-offset: 3px; } body.ml-svc-light .ml-svc-pill__price { opacity: .9; font-weight: 500; } /* ═══ FAQ ACCORDION — lives inside the cream band ═══════════════════════ */ body.ml-svc-light .ml-svc-faq { margin: 40px 0; } body.ml-svc-light details.ml-svc-faq__item { border: 1px solid var(--mlsvc-etch); border-radius: 6px; background: #FFFFFF; margin-bottom: 10px; overflow: hidden; } body.ml-svc-light details.ml-svc-faq__item > summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative; font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--mlsvc-gunmetal) !important; } body.ml-svc-light details.ml-svc-faq__item > summary::-webkit-details-marker { display: none; } body.ml-svc-light details.ml-svc-faq__item > summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--mlsvc-copper-rd); } body.ml-svc-light details.ml-svc-faq__item[open] > summary::after { content: "\2212"; } body.ml-svc-light details.ml-svc-faq__item > summary:hover { background: var(--mlsvc-cream); } body.ml-svc-light details.ml-svc-faq__item > summary:focus-visible { /* Dk Copper, not Lt Copper: Lt Copper on the white card measures 2.42:1 and fails WCAG 1.4.11 (3:1 for non-text indicators). Dk Copper is 4.94:1 on cream and higher on white. */ outline: 3px solid var(--mlsvc-copper-rd); outline-offset: -3px; } body.ml-svc-light .ml-svc-faq__body { padding: 0 20px 18px; color: var(--mlsvc-gunmetal) !important; } body.ml-svc-light .ml-svc-faq__body p:last-child { margin-bottom: 0; } /* ═══ RESPONSIVE — verified at 390px ════════════════════════════════════ */ @media (max-width: 768px) { body.ml-svc-light .ml-svc-hero { padding: 28px 16px 32px; } body.ml-svc-light .ml-svc-hero__figure { aspect-ratio: 4 / 3; margin-bottom: 20px; } body.ml-svc-light .ml-svc-band { padding: 36px 16px 44px; } body.ml-svc-light .ml-svc-about, body.ml-svc-light .ml-svc-cta-close { padding: 36px 16px; } body.ml-svc-light .ml-svc-tail { padding: 36px 16px 44px; } body.ml-svc-light .ml-svc-about__inner { flex-direction: column; gap: 18px; } body.ml-svc-light .ml-svc-about__portrait { flex: 0 0 auto; width: 108px; height: 144px; } body.ml-svc-light .ml-svc-pill { right: 12px; left: 12px; bottom: 12px; justify-content: center; font-size: 15px !important; padding: 14px 18px; } body.ml-svc-light .ml-svc-cta-btn { display: block; text-align: center; padding: 16px 24px; } body.ml-svc-light details.ml-svc-faq__item > summary { padding: 14px 42px 14px 16px; font-size: 16px; } body.ml-svc-light .ml-svc-faq__body { padding: 0 16px 16px; } }