/* ========================================================================== MAHAVENUES — Modern Navy & White Theme Custom overrides layered on top of the base template (style.green.min.css). This file is intentionally the single source of truth for the visual refresh — colors, type, buttons, cards, nav, footer, hero, forms, and the new venue search / filter UI. Loaded last in Site.Master, so plain selectors here win by source order; a handful of rules use !important only where individual pages still carry legacy inline styles (e.g. style="background-color:antiquewhite") that inline CSS cannot otherwise be beaten by. ========================================================================== */ :root { --mv-navy-900: #0b1e35; --mv-navy-800: #102a4a; --mv-navy-700: #16345c; --mv-navy-600: #1d4372; --mv-navy-500: #24528a; --mv-navy-100: #eaf0f8; --mv-navy-50: #f5f8fc; --mv-ink: #1c2733; --mv-muted: #667082; --mv-line: #e3e8f0; --mv-white: #ffffff; --mv-gold: #b8924a; --mv-radius-lg: 16px; --mv-radius-md: 10px; --mv-radius-sm: 6px; --mv-shadow-sm: 0 2px 10px rgba(16, 42, 74, 0.06); --mv-shadow-md: 0 10px 30px rgba(16, 42, 74, 0.10); --mv-shadow-lg: 0 20px 50px rgba(16, 42, 74, 0.16); } /* ========================================================================== DARK THEME — admin-controlled, site-wide (see SiteSettingsRepository.cs, Admin/ThemeSettings.aspx). Not a per-visitor preference: Site.Master and Admin/AdminShell.Master both render data-theme="<%: CurrentTheme %>" on from the one server-side setting, on every request, so this block is either fully active or fully inactive for everyone at once. Redefines the SAME --mv-* tokens above rather than introducing new "semantic" names, so every existing var(--mv-*) rule in this file - and every var(--mv-navy-*, #fallback) used inline across PropertyDetail.aspx/ VenueDetail.aspx/Home.aspx/AdminLogin.aspx - repaints automatically with zero further edits. --mv-white deliberately becomes "the current theme's surface color" (not literally white) since the large majority of card/toolbar/panel backgrounds already read var(--mv-white). IMPORTANT - only 6 of the 12 color tokens are redefined below, not all of them. --mv-navy-500 through --mv-navy-900 are this site's fixed brand accent scale (verified by grep: buttons, badges, hover/active states, the hero gradient, the lightbox backdrop, the admin sidebar/toolbar-head gradient, the "antiquewhite" modal-header override just below all set background-color to one of these with white text on top) - inverting them would turn e.g. .btn-primary into a pale button with illegible white text, and the .mfp-bg lightbox backdrop into a light overlay instead of a darkened one. A brand accent color staying consistent across light/dark is normal (most products keep their primary CTA color fixed and only invert page chrome/surfaces), so --mv-navy-500..900 and --mv-gold are intentionally left out of THIS block, unchanged between Light and Dark specifically (--mv-navy-500..900 - but not --mv-gold - DO change with the selected accent color; see the ACCENT COLOR block right below this one). Only the "page chrome" tokens flip here: --mv-navy-50/--mv-navy-100 (light section-tint backgrounds), --mv-white (card/toolbar surfaces), --mv-ink (body text), --mv-muted (secondary text), --mv-line (borders), and the 3 shadow tokens (need darker, higher-opacity shadows to read on a dark surface). --mv-radius-* is layout, not color, left alone too. Also deliberately NOT touched: color:#fff hardcoded elsewhere in this file where it sits on one of the fixed-navy elements above (buttons, hero, footer, admin sidebar, badges) - those stay white-on-navy in both themes for the same reason navy-500..900 stay fixed. See the vendor- stylesheet and legacy-inline-color override blocks near the end of this file for style.green.min.css and antiquewhite-pattern handling. */ html[data-theme="dark"] { --mv-navy-50: #0e1826; /* page background - the deepest surface */ --mv-navy-100: #17233a; /* subtle section-tint background - one step up */ --mv-white: #1e2c45; /* card/toolbar/panel surface - one step up again, for depth */ --mv-ink: #e8ecf2; --mv-muted: #9aa6b8; --mv-line: #33415c; --mv-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --mv-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --mv-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); } /* ========================================================================== ACCENT COLOR — admin-controlled, site-wide (2026-08-23 addition, see SiteSettingsRepository.cs, Admin/ThemeSettings.aspx). Independent of the Light/Dark block above: that one flips page chrome (surfaces/text/ borders); this one flips --mv-navy-500 through --mv-navy-900, the SAME fixed brand-accent scale the comment above deliberately left untouched by Light/Dark, because it's what buttons/badges/hover-active states/the hero gradient/the lightbox backdrop/the admin sidebar-toolbar-head gradient all read. Both blocks can be active at once (e.g. data-theme="dark" + data-accent="Maroon") since they redefine disjoint sets of tokens - no conflict. The token names stay "--mv-navy-*" even when the accent isn't navy - same reasoning as --mv-white staying "white" in dark mode above: every existing var(--mv-navy-*) rule in this file, and every inline var(--mv-navy-*, #fallback) call across PropertyDetail.aspx/ VenueDetail.aspx/Home.aspx, repaints for free with zero further edits only if the token names don't change. "Navy" itself needs no block - it's the :root default above. Maroon/ Grey/Pink/Gold each redefine all 5 shades with the same lightness curve as the original navy scale (roughly 12%/18%/22%/28%/34% L for 900/800/700/600/500), so contrast against the white text these backgrounds carry stays as good or better than navy's own (verified: all 20 of those shades are >=5.5:1 against white, navy's own range is 7.9:1-16.8:1). --mv-gold (a separate, always-on token used for star ratings/testimonial quotes/subtitle text - see the plain var(--mv-gold) rules elsewhere in this file) is deliberately NOT touched by any of these blocks, including the "Gold" accent itself - a 5-star rating staying gold regardless of the chosen accent is the universally-expected convention, so it's left as the one truly fixed color in the whole system. "Brown" (added same day as a follow-up) breaks from that shared lightness curve on purpose: the user supplied a specific reference button color (a warm coffee-brown) to match, sampled at #8c6d33 - pinned exactly to --mv-navy-700 below since that's the shade .btn-primary/.mv-mobile-bar-cta/the hero CTA/etc. actually render (see the var(--mv-navy-700) rules elsewhere in this file), so the 700 shade is what needs to visually match the reference, not 900 or 500. The other 4 shades are then built outward from that fixed anchor at the SAME hue or an adjustment in saturation (not sharing the 12%/18%/22%/28%/34% curve above), individually contrast-checked against white (7.47:1 / 5.98:1 / 4.83:1(anchor) / 4.01:1 / 3.41:1 for 900/800/700/600/500) rather than assumed - this hue sits at a much higher relative luminance than navy/maroon/grey/pink at the same L, so reusing their L values here would have made --mv-navy-500 (used as the lightest stop of the hero gradient, under large white heading text) fail contrast; 3.41:1 is the deliberate floor, still >=3:1 for large/bold text per WCAG AA. */ html[data-accent="Maroon"] { --mv-navy-900: #360a10; --mv-navy-800: #4b0f17; --mv-navy-700: #5d151f; --mv-navy-600: #731c27; --mv-navy-500: #8b2331; } html[data-accent="Grey"] { --mv-navy-900: #1b1f24; --mv-navy-800: #272c32; --mv-navy-700: #33383f; --mv-navy-600: #40464f; --mv-navy-500: #4f565f; } html[data-accent="Pink"] { --mv-navy-900: #340c1e; --mv-navy-800: #48122a; --mv-navy-700: #5a1836; --mv-navy-600: #6f1f43; --mv-navy-500: #872752; } html[data-accent="Gold"] { --mv-navy-900: #372409; --mv-navy-800: #4b330e; --mv-navy-700: #5d4015; --mv-navy-600: #72501d; --mv-navy-500: #876127; } html[data-accent="Brown"] { --mv-navy-900: #6a5121; --mv-navy-800: #7b5f29; --mv-navy-700: #8c6d33; /* the reference "Book Now" button color, exactly */ --mv-navy-600: #9b7a3c; --mv-navy-500: #a88645; } /* -------------------------------------------------------------------- Base / typography -------------------------------------------------------------------- */ body { color: var(--mv-ink); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .hero-heading { font-family: 'Playfair Display', Georgia, serif; color: var(--mv-navy-800); font-weight: 700; letter-spacing: 0; } h4.text-black-50 { color: var(--mv-navy-800) !important; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.15rem; } .subtitle { color: var(--mv-gold); letter-spacing: 0.18em; font-weight: 600; font-size: 0.78rem; } .text-primary { color: var(--mv-navy-700) !important; } .text-secondary { color: var(--mv-gold) !important; } .text-muted { color: var(--mv-muted) !important; } /* Form labels - the base theme's .form-label (style.default.css / style.green.min.css) is a fairly low-contrast gray (#6c757d), which is what made "NAME *", "MOBILE NO *" etc. hard to read on the enquiry/ booking/listing forms. This is a single global override, so it applies everywhere a label is used - the public site's enquiry forms and the Admin panel's forms alike, both of which load this stylesheet - rather than needing a separate fix on every page. The heavier weight is a small extra readability boost for the small uppercase text. inline-flex + gap is the same icon-then-text layout .mv-admin-nav-link already uses for its sidebar icons (see custom.css's admin-shell rules) - reused here so a label's icon (.form-label-icon, added right after the opening