/* ========================================================================= THEME SYSTEM Dark mode is the default. Light mode is applied via [data-theme="light"] on the element. Company palette stays white/black/red in both: --accent (#ff0000) red never changes --primary flips: dark mode = black bg / white text light mode = light bg / black text ========================================================================= */ :root { /* Brand colors (constant across themes) */ --accent: #ff0000; /* Red */ --accent-soft: rgba(255, 0, 0, 0.3); --accent-glow: rgba(255, 0, 0, 0.6); --accent-box: rgba(255, 0, 0, 0.3); --accent-box-hover: rgba(255, 0, 0, 0.4); --accent-border-tint: rgba(255, 0, 0, 0.15); /* Dark theme (default) */ --primary: #000000; /* Black background */ --secondary: #ffffff; /* White text */ --text-muted: #aaa; --section-alt: #e8e8e8; /* Booking/portfolio light band */ --section-alt-text: #444; --section-alt-text-strong: #333; --header-bg: #000000; --header-bg-scrolled: rgba(0, 0, 0, 0.95); --mobile-nav-bg: #222222; --hero-overlay-1: rgba(0, 0, 0, 0.35); --hero-overlay-2: rgba(0, 0, 0, 0.55); --service-card-bg: rgba(255, 255, 255, 0.05); --service-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); --service-card-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.3); --service-text: #ddd; --calendar-container-bg: #4a4a4a; --form-control-bg: rgba(0, 0, 0, 0.6); --form-control-border: rgba(255, 255, 255, 0.1); --form-control-text: #ffffff; --form-label-text: var(--secondary); --quote-fields-bg: #000000; --quote-fields-text: #ffffff; --date-header-bg: rgba(0, 0, 0, 0.2); --date-placeholder-text: rgba(255, 255, 255, 0.6); --calendar-wrapper-bg: rgba(0, 0, 0, 0.2); --calendar-day-text: var(--secondary); --calendar-day-label-text: var(--secondary); --calendar-past-text: #666; --calendar-closed-bg: rgba(100, 100, 100, 0.3); --calendar-closed-text: #666; --calendar-today-bg: rgba(255, 0, 0, 0.3); --calendar-appt-bg: rgba(0, 0, 0, 0.5); --nav-button-bg: rgba(255, 255, 255, 0.1); --nav-button-text: #ffffff; --nav-button-disabled-bg: rgba(255, 255, 255, 0.05); --modal-overlay: rgba(0, 0, 0, 0.7); --modal-content-bg: linear-gradient(to bottom, #000000, #111111); --modal-body-text: var(--secondary); --footer-border: rgba(255, 255, 255, 0.1); --social-icon-bg: rgba(255, 255, 255, 0.1); --social-icon-text: #ffffff; --footer-link-text: #aaa; --copyright-text: #777; --film-bg-gradient: linear-gradient(180deg, #000 0%, #0a0a0a 100%); --film-subtitle-text: #bbb; --film-tab-text: #ccc; --film-tab-border: rgba(255, 255, 255, 0.2); --film-tab-hover-text: #fff; --film-tab-hover-border: rgba(255, 255, 255, 0.45); --film-card-bg: rgba(255, 255, 255, 0.04); --film-card-border: rgba(255, 255, 255, 0.08); --film-card-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.5); --film-title-text: #fff; --film-tier-essential-text: #b0b0b0; --film-tier-essential-border: rgba(255, 255, 255, 0.25); --film-tier-advanced-text: #fff; --film-tier-advanced-border: rgba(255, 255, 255, 0.45); /* Fix 7d: was #999; corrected to #bbb so the token carries the AA-compliant dark-theme tagline color itself. The former hardcoded dark-theme override `:root:not([data-theme="light"]) .film-tagline { color: #bbb; }` was removed (see the film-tagline rule below) — the base rule's var() now resolves to the identical color. */ --film-tagline-text: #bbb; --film-bar-label-text: #bbb; --film-bar-value-text: #fff; --film-bar-track-bg: rgba(255, 255, 255, 0.08); --film-bar-fill-uv: linear-gradient(to right, #5a5a5a, #d9d9d9); --film-bar-fill-ir: linear-gradient(to right, #7a0000, var(--accent)); --film-meta-border: rgba(255, 255, 255, 0.08); --film-meta-value-text: #fff; --film-meta-label-text: #888; --film-meta-label-border: #555; --film-bestfor-text: #aaa; /* Theme toggle control */ --toggle-bg: rgba(255, 255, 255, 0.1); --toggle-text: #ffffff; } /* ========================================================================= LIGHT THEME Uses the booking section's light background (#e8e8e8) as the dominant surface. Keeps the brand red. Most chrome (text, borders) flips to black so the black/white/red identity is preserved. ========================================================================= */ [data-theme="light"] { --primary: #e8e8e8; /* Light background */ --secondary: #000000; /* Black text */ --text-muted: #555; --section-alt: #ffffff; /* Booking/portfolio band flips to white */ --section-alt-text: #222; --section-alt-text-strong: #111; --header-bg: #ffffff; --header-bg-scrolled: rgba(255, 255, 255, 0.95); --mobile-nav-bg: #f0f0f0; --hero-overlay-1: rgba(255, 255, 255, 0.40); --hero-overlay-2: rgba(255, 255, 255, 0.55); --service-card-bg: rgba(0, 0, 0, 0.03); --service-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); --service-card-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.18); --service-text: #333; --calendar-container-bg: #ffffff; --form-control-bg: rgba(0, 0, 0, 0.04); --form-control-border: rgba(0, 0, 0, 0.15); --form-control-text: #000000; --form-label-text: var(--secondary); --quote-fields-bg: #ffffff; --quote-fields-text: #000000; --date-header-bg: rgba(0, 0, 0, 0.04); --date-placeholder-text: rgba(0, 0, 0, 0.55); --calendar-wrapper-bg: rgba(0, 0, 0, 0.03); --calendar-day-text: var(--secondary); --calendar-day-label-text: var(--secondary); --calendar-past-text: #aaa; --calendar-closed-bg: rgba(120, 120, 120, 0.18); --calendar-closed-text: #999; --calendar-today-bg: rgba(255, 0, 0, 0.18); --calendar-appt-bg: rgba(0, 0, 0, 0.06); --nav-button-bg: rgba(0, 0, 0, 0.08); --nav-button-text: #000000; --nav-button-disabled-bg: rgba(0, 0, 0, 0.04); --modal-overlay: rgba(0, 0, 0, 0.55); --modal-content-bg: linear-gradient(to bottom, #ffffff, #f5f5f5); --modal-body-text: var(--secondary); --footer-border: rgba(0, 0, 0, 0.12); --social-icon-bg: rgba(0, 0, 0, 0.08); --social-icon-text: #000000; --footer-link-text: #555; --copyright-text: #777; --film-bg-gradient: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%); --film-subtitle-text: #555; --film-tab-text: #444; --film-tab-border: rgba(0, 0, 0, 0.2); --film-tab-hover-text: #000; --film-tab-hover-border: rgba(0, 0, 0, 0.45); --film-card-bg: rgba(0, 0, 0, 0.025); --film-card-border: rgba(0, 0, 0, 0.1); --film-card-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.18); --film-title-text: #000; --film-tier-essential-text: #666; --film-tier-essential-border: rgba(0, 0, 0, 0.25); --film-tier-advanced-text: #000; --film-tier-advanced-border: rgba(0, 0, 0, 0.45); --film-tagline-text: #666; --film-bar-label-text: #444; --film-bar-value-text: #000; --film-bar-track-bg: rgba(0, 0, 0, 0.08); --film-bar-fill-uv: linear-gradient(to right, #bdbdbd, #5a5a5a); --film-bar-fill-ir: linear-gradient(to right, #ffb3b3, var(--accent)); --film-meta-border: rgba(0, 0, 0, 0.1); --film-meta-value-text: #000; --film-meta-label-text: #777; --film-meta-label-border: #aaa; --film-bestfor-text: #555; /* Theme toggle control */ --toggle-bg: rgba(0, 0, 0, 0.08); --toggle-text: #000000; } /* Focus styles for accessibility */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Skip to main content link for accessibility */ .skip-link { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; background: var(--accent); color: var(--secondary); padding: 8px 16px; z-index: 10000; text-decoration: none; font-weight: 600; } .skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; overflow: visible; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Raleway', sans-serif; color: var(--secondary); background-color: var(--primary); line-height: 1.6; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; /* Desktop: push ALL page content down by the 80px fixed header height so the header sits over the page background (its own solid bar) instead of overlaying the hero. This makes the hero start BELOW the header, so the hero background image never goes up behind the header and is never clipped by it. Mobile resets this to 0 (mobile clears its 90px header via `.hero { padding }` instead, keeping the mobile layout pixel-identical to before). */ padding-top: 80px; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 600; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header Styles */ header { background-color: var(--header-bg); position: fixed; top: 0; /* pin to viewport top explicitly. Without this, a fixed element with no `top` defaults to its static-position-y, which would shift down with `body { padding-top: 80px }` and leave the header floating 80px below the viewport top. `top: 0` keeps it pinned regardless of body padding. */ width: 100%; z-index: 1000; padding: 5px 0 0 0; transition: background-color 0.3s ease; height: 80px; } /* Semi-transparent header effect after page load */ header.scrolled { background-color: var(--header-bg-scrolled); backdrop-filter: blur(10px); } .header-bottom-border { height: 1px; background-color: var(--accent); width: 100%; position: fixed; top: 80px; z-index: 999; } .header-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 5px 0; } .logo { font-family: 'Baskervville', Georgia, 'Times New Roman', serif; font-size: 28px; /* Fix 5: was font-weight: 700 — faux-bold. fonts/google-fonts/fonts.css only declares Baskervville at weight 400, so 700 forced the browser to synthesize bold (double-stroke smear on the brand wordmark). Dropped to the real 400 face. The wordmark's presence comes from the 28px serif sizing and the per-word gap, not boldness, so the visual change is minimal and the text renders crisply. (.baskerville-font spans elsewhere inherit weight from their parent element — the h1-h4 headings' real Playfair 600 — so only this .logo rule needed the fix.) */ font-weight: 400; color: var(--secondary); text-decoration: none; display: flex; align-items: center; gap: 0.2em; /* Add consistent spacing between words */ } /* The branded "II" inside the logo — always the brand red. Scoped to .red-II (not the generic `span`) so the wrapping .baskerville-font span inherits the logo's theme text color. */ .logo .red-II { color: var(--accent); } /* ========================================================================= FADE II BLACK branded wordmark classes (Fix 11) - .baskerville-font: serif wordmark face. Inherits `color` from its parent so FADE / BLACK render in the correct theme text color (white on dark backgrounds, black on light backgrounds). Only the "II" gets a fixed color via .red-II. - .red-II: always the brand red. Kept as var(--accent) (#ff0000) for consistency with the rest of the site's red palette; the 3M red (#DA291C) was considered but would clash with the existing brand red used across CTAs, borders, and accents. ========================================================================= */ .baskerville-font { font-family: 'Baskervville', Georgia, 'Times New Roman', serif; } .red-II { color: var(--accent); } /* Desktop header layout */ .menu-toggle { display: none; } .header-main-content { display: flex; flex-direction: row; align-items: center; flex-grow: 1; justify-content: center; margin: 0; } /* Desktop navigation menu */ .nav-menu { display: block; } nav ul { display: flex; list-style: none; } nav ul li { margin: 0 0 0 30px; } nav ul li a { color: var(--secondary); text-decoration: none; font-weight: 500; font-size: 16px; transition: color 0.3s ease, background-color 0.3s ease; position: relative; display: block; padding: 10px 0; } nav ul li a:hover { color: var(--accent); } nav ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } nav ul li a:hover::after { width: 100%; } /* === Services dropdown submenu (desktop) === */ .has-submenu { position: relative; } .submenu { display: none; position: absolute; top: 100%; left: 0; flex-direction: column; background-color: var(--primary); border: 1px solid var(--accent-border-tint); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); width: max-content; min-width: 0; padding: 8px 0; margin: 0; list-style: none; z-index: 1001; } .has-submenu:hover .submenu, .has-submenu:focus-within .submenu, .has-submenu.submenu-open .submenu { display: flex; } /* Override `nav ul li { margin: 0 0 0 30px }` (higher specificity) so submenu

s have no left margin — otherwise the red link-hover bar starts 30px in from the black submenu background. */ .nav-menu .submenu li { margin: 0; } .nav-menu .submenu li a { display: block; padding: 10px 18px; font-size: 15px; white-space: nowrap; } .submenu li a:hover { background-color: var(--accent); color: #fff; } /* Hide the animated underline on submenu links */ .submenu li a::after { display: none; } /* Mobile Menu Toggle */ .menu-toggle { flex-direction: column; cursor: pointer; background-color: var(--mobile-nav-bg); padding: 5px; border-radius: 4px; align-self: flex-start; margin: 0 0 10px 0; z-index: 1001; } .menu-toggle .bar { width: 25px; height: 3px; background-color: var(--secondary); margin: 3px 0; transition: 0.3s; border-radius: 2px; } /* Animation for hamburger to X */ .menu-toggle.active .bar:nth-child(2) { opacity: 0; } .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .cta-button { background: var(--accent); /* Red bubble buttons ALWAYS use white text in both themes (red bg needs light text; var(--secondary) flips to black in light mode, which is unreadable on red). */ color: #ffffff; border: 2px solid var(--accent); padding: 12px 25px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; font-size: 16px; box-shadow: 0 4px 15px var(--accent-box); margin-top: 10px; text-decoration: none; display: inline-block; } /* Touch devices - prevent hover from sticking */ @media (hover: hover) { .cta-button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-box-hover); background: var(--primary); color: var(--accent); } } /* Touch devices - apply press effect instead of hover */ @media (hover: none) { .cta-button:active { transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-box-hover); background: var(--primary); color: var(--accent); } .cta-button:not(:active) { transform: none; box-shadow: 0 4px 15px var(--accent-box); background: var(--accent); color: #ffffff; } } /* ======================= Theme Toggle Button ======================= Desktop: pill button anchored to the top-right of the header. Mobile (<=1023px): icon-only circle in the top-right, mirroring the hamburger menu on the opposite side. (Extended from 768px to 1023px so landscape phones and small tablets use the icon toggle too.) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--toggle-bg); color: var(--toggle-text); border: 1px solid var(--accent-border-tint); border-radius: 30px; padding: 8px 14px; cursor: pointer; font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; line-height: 1; position: fixed; top: 25px; right: 20px; z-index: 1001; } .theme-toggle i { font-size: 14px; color: var(--accent); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .theme-toggle-label-dark { display: inline; } .theme-toggle .theme-toggle-label-light { display: none; } [data-theme="light"] .theme-toggle .theme-toggle-label-dark { display: none; } [data-theme="light"] .theme-toggle .theme-toggle-label-light { display: inline; } /* Mobile (<=1023px): icon-only circle in the top-right (matches hamburger style). Extended from 768px to 1023px so landscape phones and small tablets also get the compact icon toggle instead of the wide pill, which would otherwise overlap the nav links at these widths. */ @media (max-width: 1023px) { .theme-toggle { top: 18px; right: 14px; width: 38px; height: 38px; padding: 0; border-radius: 50%; gap: 0; font-size: 0; } .theme-toggle i { font-size: 18px; } /* Hide the text labels on mobile; only the icon shows */ .theme-toggle .theme-toggle-label-dark, .theme-toggle .theme-toggle-label-light { display: none; } } /* Hero Section */ .hero { /* Desktop: the hero now starts BELOW the fixed 80px header (cleared via `body { padding-top: 80px }`), so the background image never goes up behind the header and is never clipped by it. No background-position bias or height bump is needed — the original `center center` / `55vh` values show the full image properly. Mobile paints the image on a separate `.hero-image` element (hidden on desktop) and clears its 90px header via `.hero` `padding` (mobile `body` resets `padding-top` to 0). */ height: 55vh; min-height: 420px; background-color: var(--primary); /* Fix 1: the former background-image / -repeat / -position / -size declarations were removed. The .hero-bg-img child (position:absolute; inset:0; z-index:0) fully covers the section and paints above any element background, and the visible darkening gradient lives on the separate .hero-overlay element (z-index:1) — so the element's own background image (and the linear-gradient over it) was 100% occluded on desktop and pure download waste (~145 KB jpg on every homepage visit). With no background-image left, the -repeat/-position/-size companions were dead and went too. The solid background-color remains as the paint behind the while it loads (and on mobile, where the is in-flow). */ display: flex; align-items: center; justify-content: center; text-align: center; position: relative; /* overflow: hidden merged in from the former second .hero base rule that lived after the responsive blocks. Merging is cascade-safe: no media-query .hero rule declares position or overflow, so the consolidated rule produces identical computed styles at every breakpoint. Needed so the absolutely-positioned .hero-bg-img / .hero-overlay children never paint outside the section. */ overflow: hidden; transition: background-color 0.3s ease; } .hero-content { max-width: 800px; margin: 0 auto; padding-top: 0; /* header clearance now handled by `body { padding-top }`, so the hero text flex-centers normally without extra top padding (mobile keeps its own `padding-top: 0` override below). */ width: 100%; display: flex; flex-direction: column; align-items: center; } .hero-text { width: 100%; } /* Fix 9: the hero image is always dark, so hero text must ALWAYS be light/white regardless of the active theme (overrides the theme-variable-based color so light mode doesn't render black text over the dark hero image). */ .hero h1 { /* Fix 7b: former fixed 3.5rem + a 4-step media-query ladder (2.8rem <=1023px [dead — re-overridden to 2.2rem by the later <=1023px block], 2.2rem <=1023px, 1.8rem <=576px), replaced with a single fluid clamp(). Endpoints exactly reproduce the old ladder's min/max: 1.8rem floor (former 576px step) and 3.5rem ceiling (former desktop size, reached at ~1000px viewport width). The MQ font-size overrides for .hero h1 were removed; all other properties in those media queries are untouched. */ font-size: clamp(1.8rem, 1rem + 4vw, 3.5rem); margin: 0 0 15px; line-height: 1.2; color: #ffffff; } .hero h1 span { color: var(--accent); } .hero p { font-size: 1.2rem; margin: 0 0 30px; max-width: 600px; margin-left: auto; margin-right: auto; color: #ffffff; } /* Hero CTA Button */ .hero-cta { font-size: 1.2rem; padding: 16px 40px; } /* Force hero buttons to the dark-theme style (white text on red) in both themes so they stay readable over the always-dark hero image. */ .hero .cta-button, .hero-cta { color: #ffffff; } /* ========================================================================= INTRO FADE-TO-DARK (homepage "FADE II BLACK" brand transition) When .f2b-fade-active is on , color-related properties across the page transition from the light theme to the dark theme over 4s instead of the default 0.3s. The class is added by js/theme.js right before it flips data-theme off, and removed once the animation ends. ========================================================================= */ /* During the intro, the elements that visibly change theme-dependent colors transition over 4s. The former universal selector (`*`) was narrowed to this concrete element list — every tag that consumes theme variables in this stylesheet and exists in the page markup (sections, cards, nav links, form controls, icons, labels, …) — to avoid forcing style tracking on every DOM node. An element that changes color but is NOT listed here would flip in 0.3s instead of 4s (the original cause of the header logo text flipping to its dark-theme color instantly while the header background was still mid-fade); if a new themed component uses an element missing from this list, add it. !important is required because many of these elements have their OWN `transition` declarations with higher specificity (e.g. `.nav-menu ul li a { transition: color 0.3s ease; }` at specificity (0,2,1) vs this rule's (0,1,1), and `.cta-button`, `.menu-toggle .bar`, `.theme-toggle`, …). Without !important those higher-specificity rules would win and the element would flip in 0.3s instead of 4s, breaking the synchronized intro. !important is safe here because the class is ONLY present for the ~4s duration of the intro (js/theme.js removes it when the setTimeout fires); the moment it's removed, every element reverts to its own declared transition, so normal theme toggling (0.3s) is completely unaffected. */ html.f2b-fade-active, html.f2b-fade-active body, html.f2b-fade-active header, html.f2b-fade-active main, html.f2b-fade-active section, html.f2b-fade-active nav, html.f2b-fade-active ul, html.f2b-fade-active li, html.f2b-fade-active footer, html.f2b-fade-active form, html.f2b-fade-active h1, html.f2b-fade-active h2, html.f2b-fade-active h3, html.f2b-fade-active h4, html.f2b-fade-active p, html.f2b-fade-active a, html.f2b-fade-active span, html.f2b-fade-active div, html.f2b-fade-active i, html.f2b-fade-active strong, html.f2b-fade-active label, html.f2b-fade-active button, html.f2b-fade-active select, html.f2b-fade-active option, html.f2b-fade-active input { transition: background-color 4s ease, color 4s ease, border-color 4s ease, box-shadow 4s ease, fill 4s ease !important; } /* During the intro, DISABLE the CSS color transition on the logo (and its branded text spans) so js/theme.js can drive the logo's color via a requestAnimationFrame interpolation instead. This bypasses a mobile compositing quirk where the logo (inside the fixed-position

) had its CSS color transition stretched to ~6s while sibling elements (hamburger bars, theme icon) transitioned at the declared 4s — the JS rAF path sets the color explicitly each frame, immune to the mobile repaint-cadence difference. The "II" (.red-II) is the brand red (constant) so we exclude it from the JS interpolation by leaving its color alone (it has no transition to disable, but we list it for clarity — its color never changes). Scoped to .f2b-fade-active so this only applies during the ~4s intro; afterwards the logo reverts to inheriting var(--secondary) with the normal 0.3s transition. */ html.f2b-fade-active .logo, html.f2b-fade-active .logo .baskerville-font { transition: none !important; } /* Services Section */ .services { padding: 40px 0; background-color: var(--primary); transition: background-color 0.3s ease; } .section-title { text-align: center; margin: 0 0 60px; } .section-title h2 { font-size: 2.5rem; position: relative; display: inline-block; padding: 0 0 15px; color: var(--secondary); } .section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--accent); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } /* Fix 7: service cards use flexbox so the CTA button anchors to the bottom of each card and all three buttons line up horizontally regardless of paragraph length. */ .service-card { background: var(--service-card-bg); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-shadow: var(--service-card-shadow); border: 1px solid var(--accent-border-tint); display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--service-card-shadow-hover); border: 1px solid var(--accent); } .service-img { height: 200px; overflow: hidden; } .service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .service-card:hover .service-img img { transform: scale(1.1); } .service-content { padding: 25px; text-align: center; display: flex; flex-direction: column; flex: 1 1 auto; } .service-content h3 { font-size: 1.5rem; margin: 0 0 15px; color: var(--accent); } .service-content p { margin: 0 0 20px; color: var(--service-text); text-align: left; flex: 1 1 auto; } .service-content .cta-button { margin-left: auto; margin-right: auto; margin-top: auto; } /* Booking Section */ .booking { padding: 40px 0; background: var(--section-alt); scroll-margin-top: 100px; /* Header height (80px) + bottom border (1px) + gap (~19px) */ transition: background-color 0.3s ease; } /* Booking calendar section (outer wrapper) scroll offset for mobile/tablet (stacked layout). Class renamed from .calendar-container so it no longer collides with the #calendar-container calendar render-target div. */ .booking-calendar-section { scroll-margin-top: 100px; /* Matches desktop header offset */ } .booking-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .booking-info h2 { font-size: 2.5rem; margin: 0 0 20px; color: var(--section-alt-text-strong); } .booking-info p { margin: 0 0 30px; font-size: 1.1rem; color: var(--section-alt-text); } .features { margin: 0 0 30px; } .feature { display: flex; align-items: center; margin: 0 0 15px; } .feature i { color: var(--accent); font-size: 1.2rem; margin: 0 15px 0 0; } .feature span { color: var(--section-alt-text-strong); } .booking-calendar-section { background: var(--calendar-container-bg); border-radius: 15px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid var(--accent-border-tint); } /* Booking section calendar title header */ .booking-calendar-title { text-align: center; margin: 0 0 10px; } .booking-calendar-title h3 { font-size: 1.5rem; color: var(--secondary); margin: 0 auto; display: block; } .form-group { margin: 0 0 12px; } #quote-fields { background-color: var(--quote-fields-bg); border: 1px solid var(--accent); border-radius: 5px; padding: 15px; margin: 0 0 20px; text-align: center; } #quote-fields p { margin: 0; color: var(--quote-fields-text); font-style: italic; } .form-group label { display: block; margin: 0 0 8px; font-weight: 500; color: var(--form-label-text); } /* Label row: label on the left, price badge pinned to the right, vertically centered. min-height pins the row to EXACTLY one label line (16px font × 1.6 = 25.6px) so un-hiding the badge can never grow the row → zero layout shift of the select below / the booking column. align-items:center (not baseline) keeps the badge from contributing any extra height via baseline strut alignment. */ .service-type-label-row { display: flex; justify-content: space-between; /* label left, badge right edge */ align-items: center; /* center badge; never lets it stretch the row */ gap: 8px; margin: 0 0 8px; /* same gap the bare .form-group label used */ min-height: 25.6px; /* = 16px label font × 1.6 inherited line-height */ } /* The label inside the row drops its own bottom margin so the row owns the spacing. */ .service-type-label-row label { margin: 0; /* spacing now owned by the row, not the label */ /* keeps inherited .form-group label styles: font-weight:500; color:var(--form-label-text); */ } /* The price badge: solid brand-red pill, white text, label-sized. Contrast fix: white text on solid --accent (#ff0000) — the .cta-button brand pattern (background:var(--accent); color:#fff) readable in BOTH themes (--accent is defined once in :root and never overridden per theme). Height fix: badge total is clamped to ≤ one label line (25.6px) so toggling `hidden` produces zero layout shift. Math: 16px × 1.5 = 24.0px text line + 2×0 padding-block + 2×1px border = 26.0px content-box; box-sizing:border-box + max-height:25.6px folds the border inside → border-box = 25.6px = row min-height exactly. */ #service-price-range { box-sizing: border-box; /* border counts toward the 25.6px cap */ font-size: inherit; /* match the Service Type label's font-size (16px) */ font-weight: 600; /* semibold to read as a value chip */ color: #ffffff; /* white text on the solid red pill (AA on #ff0000) */ background: var(--accent); /* solid brand-red pill (#ff0000), both themes */ border: 1px solid var(--accent); border-radius: 999px; /* full pill */ padding: 0 10px; /* 0 block padding keeps the pill ≤ 25.6px */ white-space: nowrap; /* keep "$229 - $269" on one line */ flex-shrink: 0; /* never let the badge get squished by the label */ line-height: 1.5; /* 16px × 1.5 = 24px line ≤ 25.6px row */ max-height: 25.6px; /* hard cap = the row's min-height */ } /* Respect the hidden attribute even if a broad display rule could override it. */ #service-price-range[hidden] { display: none; } /* Narrow-viewport mitigation: let the badge wrap under the label if ever crowded. */ @media (max-width: 576px) { .service-type-label-row { flex-wrap: wrap; } #service-price-range { white-space: normal; } } .date-selection-header { display: flex; justify-content: center; align-items: center; padding: 10px; border: 1px solid var(--form-control-border); background: var(--date-header-bg); border-radius: 8px; margin: 0 0 10px; } .selected-date-value { font-weight: bold; color: var(--accent); text-align: center; width: 100%; } .selected-date-value.date-placeholder { color: var(--date-placeholder-text); font-weight: 500; } .form-control { width: 100%; padding: 10px; border: 1px solid var(--form-control-border); background: var(--form-control-bg); border-radius: 8px; color: var(--form-control-text); font-size: 16px; } /* Custom dropdown arrow for select elements */ select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff0000' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; cursor: pointer; } select.form-control option { color: #000; background: #fff; } .form-control:focus { outline: none; border-color: var(--accent); } .form-control.error { border-color: #ff0000; box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2); } .error-message { color: #ff0000; font-size: 0.875rem; margin: 5px 0 0; display: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Footer */ footer { background-color: var(--header-bg); padding: 60px 0 30px; border-top: 1px solid var(--accent); transition: background-color 0.3s ease; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin: 0 0 40px; } .footer-column h3 { font-size: 1.5rem; margin: 0 0 20px; position: relative; padding: 0 0 10px; color: var(--secondary); } .footer-column h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background: var(--accent); } .footer-column p { margin: 0 0 20px; color: var(--text-muted); } .social-links { display: flex; gap: 15px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--social-icon-bg); color: var(--social-icon-text); transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .social-links a:hover { background: var(--accent); transform: translateY(-3px); } .footer-links { list-style: none; } .footer-links li { margin: 0 0 12px; } .footer-links a { color: var(--footer-link-text); text-decoration: none; transition: color 0.3s ease, padding-left 0.3s ease; } @media (hover: hover) { .footer-links a:hover { color: var(--accent); padding-left: 5px; } } /* Touch devices: no sticky hover; show a brief active feedback while pressed */ .footer-links a:active { color: var(--accent); } .copyright { text-align: center; padding: 30px 0 0; border-top: 1px solid var(--footer-border); color: var(--copyright-text); font-size: 0.9rem; } /* Calendar Styles */ .calendar-wrapper { background: var(--calendar-wrapper-bg); border-radius: 8px; padding: 15px; margin: 10px 0 0; border: 1px solid var(--accent-border-tint); } /* Calendar header - combined styles from booking section and calendar widget */ .calendar-header { display: flex; justify-content: space-between; align-items: center; margin: 0 0 15px; } .month-year { font-size: 1.2rem; font-weight: 600; color: var(--secondary); } .nav-button { background: var(--nav-button-bg); border: none; color: var(--nav-button-text); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; touch-action: manipulation; /* Prevent double-tap zoom on mobile */ } .nav-button:hover { background: var(--accent); } .nav-button:disabled { opacity: 0.3; cursor: not-allowed; background: var(--nav-button-disabled-bg); } .calendar-day-labels { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; margin: 0 0 10px; color: var(--calendar-day-label-text); } .day-label { padding: 5px 0; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-day { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; margin: 2px; cursor: pointer; position: relative; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; color: var(--calendar-day-text); } .calendar-day:hover:not(.empty):not(.past) { background: var(--accent-soft); } .calendar-day.empty { background: transparent; cursor: default; } .calendar-day.past { color: var(--calendar-past-text); cursor: default; background: transparent; } .calendar-day.today { background: var(--calendar-today-bg); font-weight: bold; } .calendar-day.has-appointments { background: var(--calendar-appt-bg); border: 1px solid var(--accent); } .calendar-day.closed { background: var(--calendar-closed-bg); color: var(--calendar-closed-text); cursor: not-allowed; } /* Appointment-only days: selectable red circle (same visual treatment as an open day) but without the appointment-count bubble. Customers can request the date; the business arranges the exact time directly. */ .calendar-day.appointment-only { background: var(--calendar-appt-bg); border: 1px solid var(--accent); cursor: pointer; } .calendar-day.selected { background: var(--accent); color: var(--secondary); font-weight: bold; } .appointment-count { font-size: 0.7rem; position: absolute; bottom: 2px; left: 50%; /* explicit horizontal centering of the bubble */ transform: translateX(-50%); /* inside the (position: relative) day cell */ background: var(--accent); color: white; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } /* Custom Modal Styles */ .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--modal-overlay); backdrop-filter: blur(5px); animation: fadeIn 0.3s ease-out; } .modal-content { background: var(--modal-content-bg); margin: 10% auto; padding: 0; border: 1px solid var(--accent); border-radius: 15px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: slideIn 0.3s ease-out; position: relative; } .modal-header { padding: 15px 20px; border-bottom: 1px solid var(--accent-border-tint); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { margin: 0; color: var(--accent); font-size: 1.5rem; } .close-button { /* Reset UA