/* ═══════════════════════════════════════════ RESET + TOKENS NLC-DEV-20260916: shared MU foundation/tokens (legacy-wordpress/shared/ site-foundation.css) load before this file, per index.html's own order, establishing the site-wide typography/palette baseline. The :root tokens below remain Homepage's own explicit, already-approved naming (--ink/--cream/--nlc-blue, etc.) rather than being merged into or renamed to the shared --nlc-* names -- this is a deliberate decision already recorded in decision-log.md (2026-08-26): Homepage's --nlc-blue and the shared --nlc-accent* family are value-identical (#076ec6) but are kept as two named systems rather than forcing a sitewide rename. Documented Homepage typography exceptions vs. the shared foundation's generic clamp values (measured in NLC-DEV-20260916-homepage- architecture-parity-audit-report.md, Section 6 and confirmed again in the disposable-build preflight): .nlc-hero-h1 uses clamp(4rem, 9.5vw, 11rem) -- the live-accurate hero scale -- rather than the shared foundation's generic h1 clamp(3.4rem, 9vw, 7.75rem). This is an intentional, evidence-based Homepage-specific refinement for its first-screen hero, not an accidental divergence, and is not changed by this task. Root wrapper: (see index.html) is this file's scoping boundary. Every Homepage-specific selector below already uses a distinctive "nlc-" (single-hyphen) naming convention that does not collide with the shared foundation/nav-harness/service-page family's own "nlc-service__" (double-underscore BEM) naming -- confirmed by a direct diff of every class name in both files finding zero overlap outside the intentionally shared #nlcServiceNav/.nlc-service-nav__* component itself. Given that confirmed zero-collision result, this task scopes via the body-level .nlc-home wrapper class rather than mechanically re-nesting every one of this file's ~150 existing selectors under an added ".nlc-home " ancestor combinator, which would be pure defensive churn with no collision to actually prevent today and carries real risk of introducing a selector or specificity error across a large, already-working, animated page. If a future page or shared file ever introduces an actually-colliding "nlc-" class name, that is the point to revisit this decision, not before. ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #0a0a0a; --ink-deep: #060606; --surface: #111010; --card: #141312; --rule: rgba(255, 255, 255, 0.07); --nlc-rule-blue: rgba(7, 110, 198, 0.25); --nlc-blue: #076ec6; --nlc-blue-dim: rgba(7, 110, 198, 0.12); --nlc-blue-ghost: rgba(7, 110, 198, 0.04); /* NLC-DEV-20260917-homepage-shared-system-adoption-C01: page-level alias of the shared bright-accent value (legacy-wordpress/shared/tokens.css --nlc-accent-bright / --nlc-focus, both #69b5f5). Previously only defined inside this file's #nlcServiceNav token-alias block, which is out of scope for selectors outside the nav (.nlc-hero-tag, .nlc-label, and the sitewide focus-visible rule) -- added here so those adopted shared values actually resolve instead of silently falling back. */ --nlc-accent-bright: #69b5f5; --nlc-focus: #69b5f5; /* NLC-DEV-20260917-homepage-booker-hero-integration: page-level aliases for the shared floating-Booker-trigger rule (legacy-wordpress/shared/ service-page.css), which references --nlc-accent/--nlc-accent-deep/ --nlc-on-accent-alt/--nlc-cream -- tokens defined only inside the .nlc-service-scoped block in shared/site-foundation.css. Homepage does not carry .nlc-service (per the locked contract) and uses its own separately-named token set, so these are name bridges only, at the exact literal values already used in shared/service-page.css / shared/site-foundation.css -- no new color, no new value. Verified working, byte-for-byte, in the accepted sitewide-Booker-contract prototype's homepage-booker-adapter.css (C01-C03). */ --nlc-accent: var(--nlc-blue); --nlc-accent-deep: #055aa4; --nlc-on-accent-alt: #ffffff; /* NLC-DEV-20260917-homepage-booker-hero-integration-C01: additional aliases for the shared button contract (legacy-wordpress/shared/ service-page.css .nlc-service__button / --primary / --secondary), same name-bridge pattern as the four aliases above -- exact literal values already used in shared/service-page.css / shared/tokens.css. */ --nlc-rule-strong: rgba(7, 110, 198, 0.55); --nlc-radius: 2px; --cream: #f2ebd9; --nlc-cream: var(--cream); --cream-dim: #b8ae9c; --cream-ghost: #a19587; --display: "Playfair Display", Georgia, serif; --head: "Syne", sans-serif; --body: "DM Sans", sans-serif; } /* ═══════════════════════════════════════════ LIGHT THEME TOKENS Warm parchment — not clinical white. Reads like Wallpaper or Monocle in print. ═══════════════════════════════════════════ */ [data-theme="light"] { --ink: #f5f0e6; --ink-deep: #ede8dc; --surface: #eae4d8; --card: #e4ddd0; --rule: rgba(7, 110, 198, 0.1); --nlc-rule-blue: rgba(7, 110, 198, 0.3); --nlc-blue: #076ec6; --nlc-blue-dim: rgba(7, 110, 198, 0.15); --nlc-blue-ghost: rgba(7, 110, 198, 0.05); --cream: #1a1612; --cream-dim: #1c1915; --cream-ghost: #6e6258; } /* ── Auto-detect device preference ── Applied first, manual toggle overrides */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ink: #f5f0e6; --ink-deep: #ede8dc; --surface: #eae4d8; --card: #e4ddd0; --rule: rgba(26, 22, 18, 0.1); --nlc-rule-blue: rgba(7, 110, 198, 0.3); --nlc-blue: #076ec6; --nlc-blue-dim: rgba(7, 110, 198, 0.15); --nlc-blue-ghost: rgba(7, 110, 198, 0.05); --cream: #1a1612; --cream-dim: #1c1915; --cream-ghost: #6e6258; } } /* ── Light mode adjustments for specific elements ── */ [data-theme="light"] .nlc-hero-bloom, :root:not([data-theme="dark"]) .nlc-hero-bloom { background: radial-gradient(ellipse 55% 45% at 78% 28%, rgba(168,120,48,0.07) 0%, transparent 65%), radial-gradient(ellipse 35% 55% at 12% 85%, rgba(168,120,48,0.04) 0%, transparent 55%); } [data-theme="light"] .nlc-hero-year, :root:not([data-theme="dark"]) .nlc-hero-year { color: rgba(168,120,48,0.05); } [data-theme="light"] .nlc-standard-quote-mark, :root:not([data-theme="dark"]) .nlc-standard-quote-mark { color: rgba(168,120,48,0.06); } /* Ticker stays gold on gold in light — invert it */ [data-theme="light"] .nlc-ticker-wrap, :root:not([data-theme="dark"]) .nlc-ticker-wrap { background: #1A1612; } [data-theme="light"] .nlc-ticker-item, :root:not([data-theme="dark"]) .nlc-ticker-item { color: #F5F0E6; } [data-theme="light"] .nlc-ticker-dot, :root:not([data-theme="dark"]) .nlc-ticker-dot { background: rgba(245,240,230,0.4); } /* NLC-DEV-20260918-homepage-light-mode-label-parity: light-mode label color, using the exact Corporate/shared light-mode label token (legacy-wordpress/shared/service-page.css:1696-1698, "[data-theme=\"light\"] .nlc-service__kicker { color: var(--nlc-accent-deep); }") -- --nlc-accent-deep resolves to #055aa4 in both the shared file and this file's own already-existing :root alias (added in an earlier task for button hover states). No new color or token is introduced; this only extends an existing alias to a new selector. Dark mode is untouched -- .nlc-hero-tag/.nlc-label's own base color: var(--nlc-accent-bright) rule (unchanged) still applies whenever data-theme="dark" is set, matching the exact same selector-precedence pattern already used for every other light-mode override in this section. Applied to both .nlc-hero-tag and .nlc-label together (and their decorative ::before lines), matching this codebase's own established "changed together, not hero-only" convention for shared label properties. */ [data-theme="light"] .nlc-hero-tag, :root:not([data-theme="dark"]) .nlc-hero-tag, [data-theme="light"] .nlc-label, :root:not([data-theme="dark"]) .nlc-label { color: var(--nlc-accent-deep); } [data-theme="light"] .nlc-hero-tag::before, :root:not([data-theme="dark"]) .nlc-hero-tag::before, [data-theme="light"] .nlc-label::before, :root:not([data-theme="dark"]) .nlc-label::before { background: var(--nlc-accent-deep); } /* NLC-DEV-20260916: overflow-x:hidden added on html (in addition to the existing body rule) to resolve the measured horizontal overflow named in the disposable-build preflight report (Section 3, a consistent ~17-32px overflow at every required viewport). Root cause identified: several decorative elements (.nlc-hero-year, .nlc-standard-quote-mark, .nlc-featured-ghost) are deliberately oversized, absolutely positioned "bleed" elements that intentionally extend past their container's edge as a visual design element -- body alone having overflow-x:hidden did not reliably suppress document.documentElement.scrollWidth reporting their true rendered width in every tested viewport. Adding the same rule to html closes that gap without changing any element's own size, position, or opacity -- the bleed elements still render exactly as designed, visually clipped at the viewport edge exactly as their own "ghost/bleed" intent already implied, only now also correctly excluded from the scrollable content width. No layout, copy, or asset was changed to achieve this. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--ink); color: var(--cream); font-family: var(--body); font-weight: 300; overflow-x: hidden; transition: background 0.4s, color 0.4s; } /* ═══════════════════════════════════════════ NAV — NLC-DEV-20260917-homepage-shared-system-adoption-C01 The full .nlc-service-nav__* rule set (previously a scoped copy here, confirmed byte-identical in substance to the source) is now supplied by legacy-wordpress/shared/nav-harness.css, referenced directly in index.html's after site-foundation.css. NLC-DEV-20260918-homepage-shared-nav-wordmark-correction: the Homepage-only logo-image brand override (.nlc-home-nav-brand/ .nlc-home-nav-logo) that previously lived here has been removed. Homepage's nav brand markup is now the plain shared text wordmark (NYC Luxury Club, byte-identical to Corporate's own), which shared/nav-harness.css already styles completely at every breakpoint -- there is nothing left for this file to add for the nav brand. .nlc-hero's own nav-clearing top padding (further below, unchanged) still has no shared rule to replace it, since it targets .nlc-hero rather than .nlc-service. ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ HERO ═══════════════════════════════════════════ */ .nlc-hero { min-height: 100vh; max-height: 100vh; position: relative; overflow: visible; display: grid; grid-template-columns: 1fr; align-items: end; /* padding-top clears the fixed nav (approx 5.5rem nav height + 0.5rem buffer) */ padding: 6rem 3rem 5rem; background: var(--ink-deep); /* 1920px max-width with auto margins centers on ultra-wide screens */ box-sizing: border-box; } /* NLC-DEV-20260918-homepage-responsive-hero-threshold-correction: short- height overflow protection, approved via the accepted comparison report. min-height: 100vh + align-items: end above forces hero content to the BOTTOM of a full-viewport-height box; at short viewport heights (any width) the content itself needs more room than that box provides, and with overflow: visible the excess spills past the hero's own max-height: 100vh boundary, landing on top of .nlc-ticker-wrap directly below it -- confirmed by direct measurement in the accepted comparison report (e.g. 1920x700: content bottom measured 144px past the hero's own clipped bottom edge, exactly at the ticker's own top edge). 820px is not an arbitrary value: it is the same constant already load-bearing in the shared system's own hero rule (legacy-wordpress/ shared/service-page.css: .nlc-service__hero { min-height: min(820px, 92vh); }). Removing the height/alignment constraints lets the hero box size to its own content instead of clipping it. Confirmed in the comparison report to leave 1366x912 and 1920x912 (both 912px tall, i.e. taller than this 820px threshold) completely unaffected. */ @media (max-height: 820px) { .nlc-hero { min-height: auto; max-height: none; align-items: start; } } /* NLC-DEV-20260918-homepage-responsive-hero-threshold-correction: tablet- height gap correction, approved via the accepted comparison report. 768x1024 (height 1024px) does not trigger the 820px rule above, yet still bottom-anchors content, producing a measured ~305px empty gap between the nav and the hero content -- confirmed disproportionate compared to 1366x912/1920x912's own much smaller ~17-22px gaps. A pure height threshold cannot fix this without also affecting 1366x912/1920x912, since 1024px (the height that needs fixing) is numerically GREATER than 912px (the height that must stay untouched) -- confirmed algebraically and by measurement in the accepted comparison report, which is why this rule adds a max-width: 1199px condition (the same constant already used by this file's own existing .nlc-hero-right / .nlc-hero-inner stat-panel breakpoint below) to exclude both required desktop viewports by width, not just height. Confirmed in the comparison report to be byte-identical to unmodified behavior at 1366x912 and 1920x912 (both wider than 1199px). */ @media (max-height: 1024px) and (max-width: 1199px) { .nlc-hero { min-height: auto; max-height: none; align-items: start; } } /* Grain texture */ .nlc-hero-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.4; } /* Atmospheric gold bloom */ .nlc-hero-bloom { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 45% at 78% 28%, rgba(201,168,76,0.09) 0%, transparent 65%), radial-gradient(ellipse 35% 55% at 12% 85%, rgba(201,168,76,0.05) 0%, transparent 55%), radial-gradient(ellipse 80% 30% at 50% 100%, rgba(201,168,76,0.04) 0%, transparent 60%); } /* Large ghost number — design element */ .nlc-hero-year { position: absolute; top: 50%; right: -2rem; transform: translateY(-50%); font-family: var(--display); font-size: clamp(14rem, 22vw, 28rem); font-weight: 900; color: rgba(201,168,76,0.03); line-height: 1; letter-spacing: -0.04em; pointer-events: none; z-index: 0; user-select: none; } .nlc-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: end; max-width: 1600px; width: 100%; } .nlc-hero-left { display: flex; flex-direction: column; } /* NLC-DEV-20260917-homepage-shared-system-adoption-C01: font-size, weight, letter-spacing, and color adopted from the shared .nlc-service__kicker treatment (legacy-wordpress/shared/service-page.css) so the Homepage eyebrow reads as part of the same site as the newer pages. Spacing (margin-bottom, gap), the decorative line's width, and layout behavior remain Homepage-specific, matching .nlc-label below (same change, applied together per the accepted preflight). */ /* NLC-DEV-20260918-homepage-shared-mobile-hero-parity-correction: line-height: 1.35 added, the exact shared value (legacy-wordpress/ shared/service-page.css .nlc-service__kicker) -- the one remaining gap identified in the accepted audit; every other property here (font-size, weight, letter-spacing, color) was already adopted in a prior task and is unchanged. Applied to .nlc-label below too, matching the established "changed together, not hero-only" convention already used for every other shared label property on this page. */ .nlc-hero-tag { font-family: var(--head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.35; text-transform: uppercase; color: var(--nlc-accent-bright); margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; opacity: 0; animation: aUp 0.7s 0.2s forwards; } .nlc-hero-tag::before { content: ''; width: 28px; height: 1px; background: var(--nlc-accent-bright); flex-shrink: 0; } .nlc-hero-h1 { font-family: var(--display); /* NLC-DEV-20260917: max corrected from 11rem to 8.5rem, matching the live Homepage's directly measured hero clamp (live renders 129.77px at 1366px viewport width, exactly 9.5vw; live renders a flat 136px at 1920px, matching only clamp(..., 8.5rem) = 136px, not 11rem = 176px). Confirmed via docs/project-hub/execution-reports/ NLC-DEV-20260917-homepage-live-mirror-preflight-report.md, Section 5. */ font-size: clamp(4rem, 9.5vw, 8.5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: var(--cream); opacity: 0; animation: aUp 0.9s 0.35s forwards; } .nlc-hero-h1 em { font-style: italic; font-weight: 400; color: var(--nlc-blue); display: block; } /* Vertical rule between h1 and sub */ .nlc-hero-rule { width: 1px; height: 32px; background: linear-gradient(to bottom, var(--nlc-blue), transparent); margin: 1rem 0; opacity: 0; animation: aFade 0.8s 0.7s forwards; } /* NLC-DEV-20260918-homepage-shared-contract-correction: font-size and line-height now use the exact shared Corporate paragraph contract (legacy-wordpress/shared/service-page.css .nlc-service__copy: font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.75;), replacing the previous fixed 0.88rem/1.85 values, per the accepted preflight's Objective 1 and the packet's core rule that the shared contract overrides Homepage-specific styling for the same role. color and max-width were already at parity (color resolves to the same hex as the shared --nlc-cream-dim token; max-width already matches Corporate's own hero-context effective width) and are unchanged here. The locked Homepage container width and headline scale (.nlc-hero-inner, .nlc-hero-h1) are untouched -- neither selector is referenced by this rule. */ .nlc-hero-sub { font-family: var(--body); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.75; color: var(--cream-dim); max-width: 40rem; opacity: 0; animation: aUp 0.8s 0.8s forwards; } .nlc-hero-actions { margin-top: 2.5rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; opacity: 0; animation: aUp 0.8s 1s forwards; } /* NLC-DEV-20260918-homepage-shared-mobile-hero-parity-correction: align-items changed from flex-start to stretch, adopting Corporate's exact shared mobile action-group mechanism (legacy-wordpress/shared/ service-page.css .nlc-service__actions, same @media (max-width: 640px) breakpoint). Confirmed in the accepted audit, by direct measurement on Corporate (not inferred from source alone), that align-items: stretch alone -- with no width rule needed on any of the three items below -- makes Book Online (.btn-primary), Request a Quote (.btn-outline), and the phone link (.nlc-text-link) all become full-width, since none of those three classes declares its own explicit width. Button height (53.59px), typography, and the phone link's own core-style underline are all untouched by this change -- only the cross-axis sizing behavior is affected. See the .nlc-amex-wrap rule immediately below for the one necessary exception this change requires. */ @media (max-width: 640px) { .nlc-hero-actions { flex-direction: column; align-items: stretch; } /* NLC-DEV-20260918-homepage-shared-mobile-hero-parity-correction: the AMEX trigger has no shared-system equivalent to observe this exact interaction on (Corporate's own action group never holds a small badge-trigger), so this is a new, Homepage-only exception, not a shared-file value: without it, align-items: stretch above would also stretch this small logo button to the full container width, which is visually wrong. align-self: flex-start opts .nlc-amex-wrap out of the stretch while leaving the three items above (which have no such override) to stretch normally. */ .nlc-amex-wrap { align-self: flex-start; } } /* Right side — vertical stats */ .nlc-hero-right { display: flex; flex-direction: column; gap: 2.5rem; padding-bottom: 0.5rem; opacity: 0; animation: aFade 1s 1.2s forwards; border-left: 1px solid var(--rule); padding-left: 3rem; } .nlc-stat-num { font-family: var(--display); font-size: 2.8rem; font-weight: 700; color: var(--cream); line-height: 1; margin-bottom: 0.3rem; } .nlc-stat-num span { color: var(--cream-dim); font-size: 1.2rem; } .nlc-stat-label { font-family: var(--head); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-ghost); } /* Scroll line */ .nlc-scroll { position: absolute; bottom: 2.5rem; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; opacity: 0; animation: aFade 1s 1.5s forwards; } .nlc-scroll-line { width: 1px; height: 52px; background: linear-gradient(to bottom, var(--nlc-blue), transparent); animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: top center; } .nlc-scroll-text { font-family: var(--head); font-size: 0.55rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--cream-ghost); } /* ═══════════════════════════════════════════ FOCUS-VISIBLE (NLC-DEV-20260826-14) ═══════════════════════════════════════════ */ a:focus-visible, button:focus-visible { outline: 3px solid var(--nlc-focus); outline-offset: 4px; } /* ═══════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════ */ /* NLC-DEV-20260917-homepage-booker-hero-integration-C01: replaced with the verified Corporate-style shared button treatment (legacy-wordpress/ shared/service-page.css .nlc-service__button / --primary / --secondary), reproduced here (not referenced) for the same reason as the floating- Booker-trigger rule above -- Homepage has no .nlc-service scope for the shared file's other rules to resolve against. Base properties (border, radius, font, letter-spacing, line-height, min-height, padding, transition) are shared verbatim by both .btn-primary and .btn-outline, matching the shared file's own base-rule-plus-modifier structure, so both buttons are the same height within any action group by construction. The previous sweep-hover ::after overlay and .btn-primary span z-index trick are removed -- the shared treatment uses a plain background-color transition, not a sweep animation; the existing wrappers in markup are harmless and left in place (not a markup/copy change). Applying this at the class level (not a new modifier class) means every existing Homepage button using .btn-primary/ .btn-outline (fleet CTAs, "Make a Reservation," "View World Cup Packages," "View All Events," social follow links) receives the same shared treatment consistently, per the packet's own "other Homepage CTA buttons that use the same existing CTA role" instruction -- none of their destinations, labels, or surrounding copy change. */ .btn-primary, .btn-outline { font-family: var(--head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 3.35rem; padding: 0.9rem 1.4rem; border: 1px solid transparent; border-radius: var(--nlc-radius); transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .btn-primary { background: var(--nlc-accent); color: var(--nlc-on-accent-alt); } .btn-primary:hover { background: var(--nlc-accent-deep); } .btn-outline { background: transparent; border-color: var(--nlc-rule-strong); color: var(--cream); } .btn-outline:hover { border-color: var(--nlc-accent-bright); color: var(--nlc-accent-bright); } /* NLC-DEV-20260918-homepage-shared-contract-correction: .btn-ghost (arrow-only text link, no underline) is retired -- its one call site (the hero phone link) now uses .nlc-text-link below, the exact core .nlc-service__text-link treatment (legacy-wordpress/shared/ service-page.css), reproduced here since Homepage has no .nlc-service scope for that shared rule to resolve against. Per the packet's core rule ("the shared/core system overrides Homepage-specific styling wherever the same element or role exists... do not preserve or recreate Homepage-specific visual differences"), no arrow is added -- the core contract has none -- and this is not combined with the retired .btn-ghost treatment in any way. */ .nlc-text-link { border-bottom: 1px solid var(--nlc-rule-strong); color: var(--nlc-cream); display: inline-flex; font-family: var(--head); font-size: 0.72rem; font-weight: 700; gap: 0.75rem; letter-spacing: 0.14em; padding-bottom: 0.45rem; text-decoration: none; text-transform: uppercase; } .nlc-text-link:hover { border-color: var(--nlc-accent-bright); color: var(--nlc-accent-bright); } /* ═══════════════════════════════════════════ SECTION BASE ═══════════════════════════════════════════ */ .nlc-section { padding: 8rem 3rem; position: relative; overflow: visible; } .nlc-section-tight { padding: 5rem 3rem; } /* Max-width container — all inner content capped at 1920px */ .nlc-inner { max-width: 1920px; margin: 0 auto; width: 100%; } /* NLC-DEV-20260917-homepage-shared-system-adoption-C01: same shared-kicker adoption as .nlc-hero-tag above -- applied together, not hero-only, so every section eyebrow on the page changes consistently. */ .nlc-label { font-family: var(--head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.35; text-transform: uppercase; color: var(--nlc-accent-bright); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.85rem; } .nlc-label::before { content: ''; width: 24px; height: 1px; background: var(--nlc-accent-bright); flex-shrink: 0; } .nlc-title { font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 700; line-height: 1.08; color: var(--cream); } .nlc-title em { font-style: italic; font-weight: 400; color: var(--nlc-blue); } .nlc-title-xl { font-family: var(--display); font-size: clamp(3rem, 6vw, 6rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.025em; color: var(--cream); } .nlc-title-xl em { font-style: italic; font-weight: 400; color: var(--nlc-blue); } /* ═══════════════════════════════════════════ TICKER — City coverage ═══════════════════════════════════════════ */ .nlc-ticker-wrap { background: var(--nlc-blue); overflow: hidden; padding: 0; border-top: 1px solid rgba(201,168,76,0.3); border-bottom: 1px solid rgba(201,168,76,0.3); } .nlc-ticker-track { display: flex; align-items: center; animation: ticker 28s linear infinite; white-space: nowrap; padding: 0.9rem 0; } .nlc-ticker-track:hover { animation-play-state: paused; } .nlc-ticker-item { font-family: var(--head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); padding: 0 2.5rem; flex-shrink: 0; } .nlc-ticker-dot { width: 4px; height: 4px; background: rgba(10,10,10,0.4); border-radius: 50%; flex-shrink: 0; } /* ═══════════════════════════════════════════ SERVICES — Four Pillars ═══════════════════════════════════════════ */ .nlc-services { background: var(--ink); border-top: 1px solid var(--rule); } .nlc-services-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 5rem; } .nlc-services-intro { font-size: 0.88rem; line-height: 1.9; color: var(--cream-dim); max-width: 420px; align-self: end; } .nlc-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); overflow: visible; } .nlc-service-card { background: var(--card); padding: 2.5rem 2rem; position: relative; overflow: visible; transition: background 0.4s; text-decoration: none; display: block; } .nlc-service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--nlc-blue); transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.23,1,0.32,1); } .nlc-service-card:hover { background: #1a1815; } .nlc-service-card:hover::after { transform: scaleX(1); } .nlc-service-num { font-family: var(--display); font-size: 3.5rem; font-weight: 900; color: var(--nlc-blue-ghost); line-height: 1; margin-bottom: 1.5rem; transition: color 0.3s; } .nlc-service-card:hover .nlc-service-num { color: var(--nlc-blue-dim); } .nlc-service-icon { font-size: 1.5rem; margin-bottom: 1.25rem; display: block; } .nlc-service-name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--cream); margin-bottom: 0.75rem; line-height: 1.2; transition: color 0.3s; } .nlc-service-card:hover .nlc-service-name { color: var(--nlc-blue); } .nlc-service-desc { font-size: 0.75rem; line-height: 1.75; color: var(--cream-ghost); margin-bottom: 2rem; } .nlc-service-link { font-family: var(--head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nlc-blue); display: flex; align-items: center; gap: 0.5rem; transition: gap 0.3s; } .nlc-service-card:hover .nlc-service-link { gap: 0.85rem; } /* ═══════════════════════════════════════════ THE STANDARD — Principal commitment ═══════════════════════════════════════════ */ .nlc-standard { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .nlc-standard-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; } .nlc-standard-left { position: relative; } /* Large decorative quote mark */ .nlc-standard-quote-mark { font-family: var(--display); font-size: 18rem; font-weight: 900; color: rgba(201,168,76,0.04); line-height: 0.8; position: absolute; top: -2rem; left: -1.5rem; pointer-events: none; user-select: none; z-index: 0; } .nlc-standard-quote { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-style: italic; font-weight: 400; line-height: 1.55; color: var(--cream); margin-bottom: 2rem; } .nlc-standard-attr { font-family: var(--head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nlc-blue); position: relative; z-index: 1; display: flex; align-items: center; gap: 0.85rem; } .nlc-standard-attr::before { content: ''; width: 20px; height: 1px; background: var(--nlc-blue); } .nlc-standard-right { display: flex; flex-direction: column; gap: 0; } .nlc-standard-title { font-family: var(--display); font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 2rem; } .nlc-standard-title em { font-style: italic; font-weight: 400; color: var(--nlc-blue); display: block; } .nlc-standard-body { font-size: 0.88rem; line-height: 1.9; color: var(--cream-dim); margin-bottom: 3rem; } .nlc-pillars { display: flex; flex-direction: column; gap: 0; margin-bottom: 3rem; } .nlc-pillar { display: flex; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); align-items: flex-start; } .nlc-pillar:first-child { border-top: 1px solid var(--rule); } .nlc-pillar-icon { font-size: 0.65rem; color: var(--nlc-blue); margin-top: 0.2rem; flex-shrink: 0; } .nlc-pillar-text { font-size: 0.8rem; line-height: 1.65; color: var(--cream-dim); } .nlc-pillar-text strong { display: block; font-family: var(--head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); margin-bottom: 0.2rem; } /* ═══════════════════════════════════════════ EVENTS CREDENTIAL STRIP ═══════════════════════════════════════════ */ .nlc-events { background: var(--ink-deep); border-top: 1px solid var(--rule); padding: 6rem 3rem; overflow: hidden; } .nlc-events-header { display: grid; grid-template-columns: auto 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; } .nlc-events-title-block { max-width: 500px; } .nlc-events-body { font-size: 0.85rem; line-height: 1.85; color: var(--cream-dim); max-width: 400px; align-self: end; } /* Event marquee rows — two opposite directions */ .nlc-events-marquee { overflow: hidden; margin-bottom: 1.5rem; } .nlc-events-track { display: flex; gap: 0; white-space: nowrap; animation: marqueeL 35s linear infinite; } .nlc-events-track.reverse { animation: marqueeR 40s linear infinite; } .nlc-events-track:hover { animation-play-state: paused; } .nlc-event-pill { display: inline-flex; align-items: center; gap: 0.75rem; border: 1px solid var(--rule); padding: 0.6rem 1.4rem; margin-right: 0.75rem; flex-shrink: 0; text-decoration: none; transition: border-color 0.3s, background 0.3s; } .nlc-event-pill:hover { border-color: var(--nlc-rule-blue); background: var(--nlc-blue-ghost); } .nlc-event-pill-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--nlc-blue); flex-shrink: 0; } .nlc-event-pill-name { font-family: var(--head); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); transition: color 0.3s; } .nlc-event-pill:hover .nlc-event-pill-name { color: var(--nlc-blue); } /* NLC-DEV-20260918-homepage-remove-fifa-ridebits-sections: the "FEATURED EVENT — World Cup (Swappable)" CSS block (.nlc-featured and its descendants) was removed here — the live inspector capture confirmed no FIFA/World Cup content exists on the live Homepage. Preserved byte-for- byte in backups/homepage-fifa-section-archived-NLC-DEV-20260918-homepage- remove-fifa-ridebits-sections-20260918-1335.html for future event campaigns. */ /* ═══════════════════════════════════════════ CITIES GRID ═══════════════════════════════════════════ */ .nlc-cities { background: var(--surface); border-top: 1px solid var(--rule); } .nlc-cities-header { margin-bottom: 4rem; } .nlc-cities-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); overflow: visible; height: auto; } .nlc-city-card { background: var(--card); padding: 2.25rem 1.75rem; position: relative; overflow: visible; transition: background 0.4s; text-decoration: none; display: block; } .nlc-city-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--nlc-blue); transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.23,1,0.32,1); z-index: 2; } .nlc-city-card:hover { background: #1a1815; } .nlc-city-card:hover::after { transform: scaleX(1); } .nlc-city-name { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--cream); margin-bottom: 0.2rem; transition: color 0.3s; line-height: 1.1; } .nlc-city-card:hover .nlc-city-name { color: var(--nlc-blue); } .nlc-city-state { font-family: var(--head); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--nlc-blue); margin-bottom: 1.25rem; } .nlc-city-detail { font-size: 0.68rem; line-height: 1.7; color: #7A7268; margin-bottom: 0.3rem; } .nlc-city-detail strong { display: block; font-family: var(--head); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #B8AE9C; margin-bottom: 0.1rem; } .nlc-city-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; font-family: var(--head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nlc-blue); transition: gap 0.3s; } .nlc-city-card:hover .nlc-city-link { gap: 0.75rem; } /* ═══════════════════════════════════════════ FLEET ═══════════════════════════════════════════ */ .nlc-fleet { background: var(--ink); border-top: 1px solid var(--rule); } .nlc-fleet-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; } .nlc-fleet-intro { font-size: 0.88rem; line-height: 1.9; color: var(--cream-dim); align-self: end; } .nlc-fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; overflow: visible; } .nlc-fleet-card { background: var(--card); border: 1px solid var(--rule); padding: 2.5rem; position: relative; overflow: visible; transition: border-color 0.3s, transform 0.3s; } .nlc-fleet-card:hover { border-color: var(--nlc-rule-blue); transform: translateY(-3px); } .nlc-fleet-card.primary { border-color: rgba(201,168,76,0.18); background: #141210; } /* NLC-DEV-20260918-homepage-signature-card-light-mode: the dark-mode-only gold-tinted border/dark background above is preserved unchanged for dark mode. In light mode it previously still applied (hardcoded, not theme-aware), creating a dark card with insufficient contrast that did not match the Sprinter/Sedan cards. This override resets both properties back to the same values the base .nlc-fleet-card rule (and therefore Sprinter/Sedan) already use in light mode -- var(--card) and var(--rule) -- so all three cards share an identical light-mode surface. No new color or token is introduced; the Signature badge, image, copy, and CTA are unaffected since none of them are targeted by this rule. */ [data-theme="light"] .nlc-fleet-card.primary, :root:not([data-theme="dark"]) .nlc-fleet-card.primary { background: var(--card); border-color: var(--rule); } /* SVG vehicle silhouette placeholder */ .nlc-fleet-visual { width: 100%; display: block; margin-bottom: 2rem; border-bottom: 1px solid var(--rule); padding-bottom: 2rem; } /* NLC-DEV-20260917-homepage-live-mirror-C02: corrected to match live's measured fleet-photo rendering exactly -- each photo renders at the full card content width with height:auto preserving its own natural aspect ratio (confirmed live formula: height = width * naturalH/naturalW at all four required viewports). The prior height:120px fixed frame + object-fit:contain produced a much smaller, letterboxed-looking image than live's actual full-width photograph. See the C02 preflight/ execution reports for exact measurements. */ .nlc-fleet-visual img { display: block; width: 100%; height: auto; } .nlc-fleet-tag { position: absolute; top: 0; left: 1.75rem; font-family: var(--head); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink); background: var(--nlc-blue); padding: 0.25rem 0.85rem; } .nlc-fleet-name { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--cream); margin-bottom: 0.4rem; } .nlc-fleet-cap { font-family: var(--head); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nlc-blue); margin-bottom: 1.5rem; } .nlc-fleet-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); } .nlc-fleet-features li { font-size: 0.72rem; line-height: 1.5; color: var(--cream-dim); display: flex; gap: 0.65rem; align-items: flex-start; } .nlc-fleet-features li::before { content: '—'; color: var(--nlc-blue); flex-shrink: 0; } /* ═══════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════ */ .nlc-test { background: var(--surface); border-top: 1px solid var(--rule); } .nlc-test-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 4rem; overflow: visible; height: auto; } .nlc-test-card { border: 1px solid var(--rule); background: var(--card); padding: 2.25rem; position: relative; overflow: visible; transition: border-color 0.3s; } .nlc-test-card:hover { border-color: var(--nlc-rule-blue); } /* NLC-DEV-20260918-homepage-testimonial-light-card-correction: the .nlc-test-card.featured dark override (hardcoded #141210 background, gold-tinted border, "Founder's Letter" badge) was removed along with the `featured` class in index.html. It pinned a dark presentation regardless of theme, causing insufficient contrast in light mode and not matching live. The base .nlc-test-card rule above already uses theme-aware tokens (var(--card), var(--rule)) that were confirmed, by direct live-browser inspection, to match the live card's colors exactly in both themes (light mode: background rgb(228,221,208) = var(--card), border rgba(7,110,198,0.1) = var(--rule) -- both already defined identically in this file's own :root light-mode block). No new color was introduced. */ .nlc-test-mark { font-family: var(--display); font-size: 5rem; color: var(--nlc-blue-dim); position: absolute; top: 0.75rem; left: 1.5rem; line-height: 1; pointer-events: none; } /* NLC-DEV-20260918-homepage-testimonial-live-parity: font-size/font-style/ font-weight/line-height reused verbatim from the shared Philosophy quote contract (.nlc-standard-quote, styles.css ~line 795-802: font-size: clamp(1.4rem, 2.5vw, 2rem); font-style: italic; font-weight: 400; line-height: 1.55;). font-family and color were already identical between the two rules. padding-top/margin-bottom are layout spacing, not typography, and are kept as this section's own existing values. The prior featured-card-specific font-size override (1.1rem) is removed so the reused clamp value applies uniformly to the one remaining card. */ .nlc-test-text { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-style: italic; font-weight: 400; line-height: 1.55; color: var(--cream); padding-top: 2.5rem; margin-bottom: 1.5rem; } /* NLC-DEV-20260918-homepage-testimonial-live-parity: raised from 0.62rem (~9.92px) to 1rem (16px, confirmed root font-size is unscaled 16px — no html/:root font-size override exists in this file) so attribution text meets the required 16px floor at every viewport; not reduced at any smaller breakpoint. */ .nlc-test-author { font-family: var(--head); font-size: 1rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nlc-blue); } /* NLC-DEV-20260918-homepage-testimonial-live-parity: raised from 0.6rem (~9.6px) to 1rem (16px) for the same reason as .nlc-test-author above. */ .nlc-test-role { font-size: 1rem; color: var(--cream-ghost); margin-top: 0.25rem; } /* ═══════════════════════════════════════════ BOOKING / FINAL CTA ═══════════════════════════════════════════ */ .nlc-book { background: var(--ink-deep); border-top: 1px solid var(--rule); } .nlc-book-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; overflow: visible; } .nlc-book-left h2 { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.025em; color: var(--cream); margin-bottom: 1.5rem; } .nlc-book-left h2 em { font-style: italic; font-weight: 400; color: var(--nlc-blue); } .nlc-book-sub { font-size: 0.85rem; line-height: 1.85; color: var(--cream-dim); margin-bottom: 2.5rem; max-width: 420px; } .nlc-book-right { display: flex; flex-direction: column; justify-content: center; gap: 1rem; } /* NLC-DEV-20260918-homepage-booking-cta-replacement: .nlc-contact-btn/-icon/ -text/-label/-arr CSS removed — the Direct Contact phone/WhatsApp/email rows that used these selectors were replaced with the Corporate closing CTA pattern (.nlc-book-actions below); confirmed via grep this CSS had no other user. */ .nlc-book-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.85rem; } @media (max-width: 640px) { .nlc-book-actions { flex-direction: column; align-items: stretch; } } /* NLC-DEV-20260918-homepage-remove-fifa-ridebits-sections: .nlc-ridebits-wrap/ -zone/-label/-sub CSS removed — the placeholder markup that used these selectors ("RideBits Booking Widget" / "Booking system loads here") was removed from index.html; confirmed via grep this CSS had no other user. */ /* ═══════════════════════════════════════════ FOOTER — NLC-DEV-20260916: raw inline footer and its CSS removed from this static source. A global footer will be provided by the approved MU global-footer component at WordPress integration time; see index.html's own note at the same location for the full rationale. ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ REVEAL ═══════════════════════════════════════════ */ .reveal { opacity: 0; transition: opacity 0.9s cubic-bezier(0.23,1,0.32,1); } .reveal.visible { opacity: 1; } .rd1 { transition-delay: 0.1s; } .rd2 { transition-delay: 0.2s; } .rd3 { transition-delay: 0.3s; } .rd4 { transition-delay: 0.4s; } /* ═══════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════ */ @keyframes aUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes aFade { from { opacity: 0; } to { opacity: 1; } } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes scrollPulse { 0% { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1) translateY(8px); } } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1199px) { .nlc-hero-inner { grid-template-columns: 1fr; } .nlc-hero-right { display: none; } .nlc-services-grid { grid-template-columns: repeat(2,1fr); } .nlc-standard-inner { grid-template-columns: 1fr; gap: 4rem; } .nlc-cities-grid { grid-template-columns: repeat(3,1fr); } .nlc-fleet-grid { grid-template-columns: 1fr 1fr; } .nlc-test-grid { grid-template-columns: 1fr; } .nlc-book-inner { grid-template-columns: 1fr; } .nlc-services-header { grid-template-columns: 1fr; gap: 2rem; } .nlc-fleet-header { grid-template-columns: 1fr; gap: 2rem; } .nlc-events-header { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 767px) { .nlc-section { padding: 5rem 1.5rem; } .nlc-section-tight { padding: 3rem 1.5rem; } /* Mobile: keep top clearance for fixed nav, remove max-height so tall content isn't clipped. NLC-DEV-20260918-homepage-shared-mobile-hero-parity-correction: top padding raised from 5rem to 6.5rem. The prior 5rem (80px) was LESS than the mobile nav's own measured real height (85px at 390px width, nav is position: fixed so it does not participate in normal flow) -- a genuine, measured overlap (-5px gap), first found in the original hero-spacing audit and now corrected to match Corporate's own measured mobile gap (+19px at the same 390px width, confirmed via shared/service-page.css's fluid clamp(6rem, 11vw, 10rem) hero padding-top resolving to a larger effective value there). 6.5rem (104px) = 85px nav height + 19px, the exact Corporate gap value, not an arbitrary buffer. This value is scoped to this max-width: 767px rule only -- the desktop base .nlc-hero padding (padding: 6rem 3rem 5rem) and the separate height-based hero-flow rules added in the immediately prior correction are both untouched. */ .nlc-hero { padding: 6.5rem 1.5rem 4rem; max-height: none; min-height: 100svh; } .nlc-services-grid { grid-template-columns: 1fr; } .nlc-cities-grid { grid-template-columns: repeat(2,1fr); } .nlc-fleet-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ EXTERNALIZED INLINE STYLES (NLC-DEV-20260825-13) Mechanically moved out of index.html attributes, one class per distinct declaration set, to satisfy the local no-inline-CSS rule. No values changed. ═══════════════════════════════════════════ */ .nlc-events-viewall { margin-top: 3rem; text-align: center; } .nlc-cities-also-available { margin-top: 1px; background: var(--card); border: 1px solid var(--rule); border-top: none; padding: 1.25rem 2rem; display: flex; align-items: center; gap: 1rem; opacity: 0.45; } .nlc-cities-also-available-label { font-family: var(--head); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-ghost); } .nlc-cities-also-available-divider { width: 1px; height: 16px; background: var(--rule); } .nlc-cities-also-available-list { font-family: var(--display); font-size: 0.88rem; color: var(--cream-ghost); } .nlc-btn-block { display: block; text-align: center; } .nlc-book-contact-copy { font-size: 0.82rem; line-height: 1.85; color: var(--cream-dim); margin-top: 0.5rem; } /* NLC-DEV-20260918-homepage-booking-cta-replacement: .nlc-book-contact-block/ .nlc-book-follow/-label/-links CSS removed — the wrapping block and the Follow/social-links row were removed from index.html along with the Direct Contact block; confirmed via grep this CSS had no other user. */ /* ═══════════════════════════════════════════ FLOATING BOOK ONLINE TRIGGER NLC-DEV-20260917-homepage-booker-hero-integration Byte-identical (structure and values) to the shared .nlc-service__floating-booker rule in legacy-wordpress/shared/ service-page.css, already verified working end-to-end through real WordPress in the accepted C01-C03 execution reports. Reproduced here, not referenced, because Homepage does not load shared/service-page.css (it has no .nlc-service scope for that file's other rules to resolve against) -- this is the same token-alias-plus-verbatim-copy pattern already proven in the prototype's homepage-booker-adapter.css. The WordPress/Divi cascade-hardening block (which forces its rules with a priority keyword) from the shared file is intentionally NOT copied: Homepage is not a Divi paste target, and that priority keyword is explicitly forbidden here. ═══════════════════════════════════════════ */ .nlc-service__floating-booker { align-items: center; background: var(--nlc-accent); border-bottom: 2px solid rgba(255, 255, 255, 0.35); border-left: 4px solid var(--nlc-cream); border-radius: 4px; border-right: 2px solid rgba(255, 255, 255, 0.35); border-top: 2px solid rgba(255, 255, 255, 0.35); bottom: 20px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); color: var(--nlc-on-accent-alt); display: inline-flex; font-family: var(--display); font-size: clamp(0.95rem, 1.5vw, 1rem); font-weight: 700; gap: 0.5rem; justify-content: center; letter-spacing: 2px; /* NLC-DEV-20260918-homepage-floating-booker-parity: line-height added -- Corporate's page inherits line-height: 1.6 from the shared .nlc-service wrapper rule (shared/service-page.css), which this rule was never explicitly given when reproduced here (Homepage has no .nlc-service scope to inherit from, and Homepage's own body does not set a matching global line-height). Without it this button rendered 49px tall instead of Corporate's measured 54px. Setting it explicitly here, scoped to this one button only, closes the gap without touching Homepage's global body line-height or any shared file. */ line-height: 1.6; min-height: 3rem; opacity: 1; padding: 0.75rem 1.25rem; pointer-events: auto; position: fixed; right: 20px; text-decoration: none; text-transform: capitalize; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease, background-color 180ms ease; white-space: nowrap; z-index: 60; } .nlc-service__floating-booker-icon { flex-shrink: 0; height: 14px; width: 14px; } .nlc-service__floating-booker--pending { opacity: 0; pointer-events: none; transform: translateY(12px); } .nlc-service__floating-booker:hover, .nlc-service__floating-booker:focus-visible { background: var(--nlc-accent-deep); } /* NLC-DEV-20260918-homepage-floating-booker-parity: light-mode left-border fix, matching Corporate/shared exactly (shared/service-page.css lines 1978-1984, "Promoted from Corporate Car's page-local fix"). The base rule's border-left: 4px solid var(--nlc-cream) resolves to a near-black value in light mode (this file's own [data-theme="light"] token block redefines --cream to a dark ink value), reading as a dark artifact against the accent panel -- the exact defect the shared rule below exists to prevent. var(--rule) is this file's own existing token (already defined for both light-mode paths in this file's own :root overrides); no new color or token is introduced. Both selectors are used, matching this file's own established dual-selector convention for light-mode overrides (explicit toggle + prefers-color-scheme fallback), rather than the shared file's single [data-theme="light"] selector, since Homepage additionally supports the auto-detect path. */ [data-theme="light"] .nlc-service__floating-booker, :root:not([data-theme="dark"]) .nlc-service__floating-booker { border-left-color: var(--rule); } @media (max-width: 480px) { .nlc-service__floating-booker { bottom: max(14px, env(safe-area-inset-bottom, 14px)); font-size: 0.85rem; letter-spacing: 1.4px; min-height: 2.75rem; padding: 0.6rem 0.9rem; right: 14px; } .nlc-service__floating-booker-icon { height: 12px; width: 12px; } } /* ═══════════════════════════════════════════ AMEX INFORMATIONAL TRIGGER + POPOVER NLC-DEV-20260917-homepage-booker-hero-integration New, Homepage-owned UI -- no shared popover/dialog pattern exists anywhere in the codebase to reuse (confirmed in the accepted preflight). Reuses the existing shared AMEX badge asset only (../../shared/assets/ american-express-accepted-card-badge.png, same file already used on Contact), not Contact's own link-through-to-payment-page pattern or its quote-funnel.css styling (a file Homepage does not and should not load). All new rules scoped under .nlc-home, per the packet's requirement. ═══════════════════════════════════════════ */ .nlc-home .nlc-amex-wrap { position: relative; display: inline-flex; } .nlc-home .nlc-amex-trigger { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; padding: 0; line-height: 0; } .nlc-home .nlc-amex-trigger img { display: block; height: 2.8rem; width: auto; } /* NLC-DEV-20260917-homepage-booker-hero-integration-C01: popover now anchored ABOVE its trigger (bottom: calc(100% + ...), not top:), per the accepted correction. Left-aligned to the trigger's own left edge (left: 0), matching the trigger's already-left-aligned position in the hero's left-hand column at every measured viewport -- confirmed by direct measurement this task that a centered (left: 50% / translateX (-50%)) approach pushes the popover off the LEFT edge of the viewport at desktop widths, since the trigger sits near the page's own left edge and half a centered ~22rem-wide popover extends further left than that edge allows. Left-alignment plus the existing width: min(22rem, calc(100vw - Nrem)) viewport clamp keeps the popover fully on-screen horizontally at every measured viewport, confirmed by measurement. The AMEX trigger sits well below the fixed nav (inside the hero's own ~6rem top padding), so anchoring above it does not collide with the nav bar at any of the four required viewports -- confirmed by measurement, not assumed. z-index raised to 70 (above the floating Booker trigger's 60, below the nav's 200) so the popover always paints above the floating trigger if their boxes ever came near each other, without ever competing with the nav. */ .nlc-home .nlc-amex-popover { position: absolute; bottom: calc(100% + 1rem); top: auto; left: 0; z-index: 70; /* NLC-DEV-20260918-homepage-shared-contract-correction: widened from 22rem to 26rem (desktop ceiling) so "American Express® accepted" (measured natural width ~312px, before the new logo added in this same correction) fits on one line wherever this ceiling is not itself viewport-clamped. Re-measured after implementation -- see the execution report for the confirmed one-line result at 768px+. */ width: min(32rem, calc(100vw - 3rem)); max-height: calc(100vh - 8rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45); padding: 1.75rem; } /* NLC-DEV-20260918-homepage-shared-contract-correction: measured mobile centering, not a guessed offset. .nlc-amex-wrap (this popover's containing block) is the first flex item inside .nlc-hero-actions -> .nlc-hero-left -> .nlc-hero-inner (width: 100%, no added offset) -> .nlc-hero, so the wrap's own left edge sits exactly at .nlc-hero's own left padding. At this same max-width: 767px breakpoint, .nlc-hero's padding is declared elsewhere in this file as `5rem 1.5rem 4rem` -- i.e. a horizontal padding of exactly 1.5rem, confirmed by direct read of that rule, not assumed. `left: calc(50vw - 1.5rem)` therefore lands at the viewport's own horizontal center, measured from this element's actual containing block (not the viewport, since position stays absolute per the approved model); `transform: translateX(-50%)` then shifts left by exactly half of whatever the popover's own rendered width is, centering it -- this does not depend on knowing the popover's width in advance, only on the two already-declared, already-measured values used above (the hero's own 1.5rem padding and the viewport-relative vw unit). Vertical placement (anchored above the trigger) is unchanged -- already confirmed comfortably within the 390x844 viewport in the prior C01 execution report and re-confirmed this task. */ @media (max-width: 767px) { .nlc-home .nlc-amex-popover { left: calc(50vw - 1.5rem); transform: translateX(-50%); } } .nlc-home .nlc-amex-popover-close { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; color: var(--cream-ghost); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.25rem; } .nlc-home .nlc-amex-popover-close:hover { color: var(--cream); } /* NLC-DEV-20260918-homepage-shared-contract-correction: new logo-plus- title row. The close button's own top/right offset (0.75rem) is unchanged; padding-right on this row (not the title itself) reserves room so neither the logo nor the title text run under it. */ .nlc-home .nlc-amex-popover-head { align-items: center; display: flex; gap: 0.85rem; margin-bottom: 0.75rem; padding-right: 1.5rem; } .nlc-home .nlc-amex-popover-logo { display: block; flex-shrink: 0; height: 1.6rem; width: auto; } .nlc-home .nlc-amex-popover-title { font-family: var(--head); font-size: 1.1rem; font-weight: 700; color: var(--cream); margin: 0; } /* NLC-DEV-20260918-homepage-shared-contract-correction: body text now uses the exact shared Corporate paragraph scale (same clamp/line-height adopted for .nlc-hero-sub above), replacing the previous fixed 0.85rem/1.7 values, per the accepted preflight's Objective 5. */ .nlc-home .nlc-amex-popover-body { font-family: var(--body); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.75; color: var(--cream-dim); margin-bottom: 1.5rem; } /* NLC-DEV-20260917-homepage-booker-hero-integration-C01: popover actions are now full-width and stacked (not side-by-side), each inheriting the shared .btn-primary/.btn-outline base rule's min-height: 3.35rem directly -- the previous font-size/padding override that shrank them below the hero buttons' size is removed, so these are now exactly the same height as the hero action buttons, per the accepted correction. */ .nlc-home .nlc-amex-popover-actions { display: flex; flex-direction: column; gap: 0.75rem; } .nlc-home .nlc-amex-popover-actions .nlc-amex-popover-action { width: 100%; } /* NLC-DEV-20260917-homepage-booker-hero-integration-C01: no separate position: fixed mobile fallback is used. One was attempted (viewport- centered, then top-anchored) and measured, at this exact 390px viewport, to render far outside the viewport despite computationally correct top/left/right/bottom values. Root cause, confirmed by direct inspection: .nlc-hero-actions (an ancestor of this popover) carries a pre-existing entrance animation (animation: aUp ... forwards, defined above) whose keyframes animate `transform`. Per the CSS spec, once that animation completes under a `forwards` fill mode, the element's computed transform is the identity matrix, not the literal keyword `none` -- and any non-`none` transform on an ancestor makes it the containing block for `position: fixed` descendants. This is a real, spec-correct, cross-browser behavior (verified stable regardless of how long after page load the popover was opened), not a tool artifact, and not something this bounded correction may fix by editing the pre-existing hero animation (out of scope: "do not change... unique editorial treatments"). The fix is simpler than a mobile-specific branch: `position: absolute` (used by the one, viewport-width-aware rule above, anchored to .nlc-amex-wrap's own position: relative) is unaffected by this ancestor-transform behavior, since a nearer `position: relative` ancestor always wins over a further transform- established containing block. The same single rule above already measures correctly within the viewport at all four required viewports (see the execution report) -- no separate ≤480px override is needed once `position: fixed` is removed from the equation. */ /* NLC-DEV-20260918-homepage-booking-cta-replacement: .nlc-book-follow-btn CSS removed along with the Follow/social-links row (see above). */