/* * Real design direction from Planning/Design Direction.md: trust-first clarity-led minimalism, * bold typography over stock imagery, "one trusted dev shop" positioning (Elegant-Themes-style, * not a ThemeForest multi-vendor feel). Dark navy + a single accent - deliberately distinct from * Tipped2Win's purple/pink and Mimi Joi's pink, since this is its own real business. * * Rebrand (2026-08-25, Leon's direct request): accent swapped from the original warm gold * (#f5a623) to an electric blue with a glow treatment, matching the approved homepage mockup * (Claude Artifact "LC Web Design Homepage Build"). Applied site-wide across every real page via * this shared stylesheet - deliberately NOT touched on any of the standalone demo pages * (Dog Groomer/Silverbark/Willowbrook/Barkers Yard/Vets/Pet Shop/Plumbers/Gardeners/Mobile * Detailing/Window Cleaners), which each keep their own separate *-chrome.php identity. */ /* Batch 1 (2026-08-05) - homepage/main-site redesign, static mockup approved by Leon at Planning/batch-1-mockup.html. Keeps the existing navy/amber identity (Leon explicitly rejected the audit's light cream system), adds a formal type scale (Space Grotesk/DM Sans) and two new sparing accent tokens (blue for links, dark mint-tinted panel for reassurance content). */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* 2026-08-27: typeface swapped from Space Grotesk/DM Sans to Bricolage Grotesque/IBM Plex Sans + Mono, matching the approved concept exactly (Claude Home BUILD/homepage-redesign-v1.html / Claude Artifact "LC Web Design Homepage Build") - Leon's explicit instruction to build the site like that concept and no other. Colour tokens below are unchanged from the 2026-08-25 rebrand, which already matched. */ /* Real bug fix, 2026-08-09 (found during 0.0.7 mobile verification): Astra's own mobile header row (.ast-builder-grid-row-has-sides) renders ~40px wider than the viewport on narrow screens - a pre-existing core Astra layout quirk, not something this theme's CSS caused, but it forces a site-wide horizontal scroll on every page. Clamping overflow on the two root elements is the standard safe fix: it doesn't touch Astra's own layout math, just stops the extra width from creating a scrollbar/shift. */ html, body { overflow-x: hidden; max-width: 100%; } :root { /* 2026-08-27: bg/panel/text/muted corrected to the concept's EXACT hex values (was a navy-tinted approximation - #0b1120/#131b2e/#ffffff/#b9c2d6 - that only coincidentally looked "close enough" next to the correct accent blue). These four were the actual source of "still looks different" feedback: concept is a neutral near-black, not a blue-tinted navy, and text is soft off-white, not pure white. Source: Claude Home BUILD/homepage-redesign-v1.html :root block, verbatim. */ --lcwd-bg: #0a0c10; --lcwd-panel: #12151b; --lcwd-accent: #4172e8; --lcwd-accent-text: #050914; --lcwd-text: #eef0f3; --lcwd-muted: #9aa3b0; --lcwd-accent-blue: #7ba0ff; --lcwd-accent-soft: rgba(65, 114, 232, .13); --lcwd-accent-line: rgba(65, 114, 232, .4); --lcwd-accent-glow: rgba(65, 114, 232, .55); --lcwd-accent-mint-bg: #1f3d33; --lcwd-accent-mint-text: #7fe0bd; --font-heading: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* Glow utilities, matching the approved mockup's electric-blue treatment. */ .lcwd-glow-ring { box-shadow: 0 0 0 1px var(--lcwd-accent-line), 0 0 32px -6px var(--lcwd-accent-glow); } .lcwd-glow-pulse { animation: lcwd-pulse 3.2s ease-in-out infinite; } @keyframes lcwd-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--lcwd-accent-line), 0 0 18px -4px var(--lcwd-accent-glow); } 50% { box-shadow: 0 0 0 1px var(--lcwd-accent-line), 0 0 38px -2px var(--lcwd-accent-glow); } } @media (prefers-reduced-motion: reduce) { .lcwd-glow-pulse { animation: none; } } body { background-color: var(--lcwd-bg) !important; font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } .lcwd-link-blue { color: var(--lcwd-accent-blue) !important; } .lcwd-reassure-panel { background-color: var(--lcwd-accent-mint-bg) !important; border: 1px solid rgba(127, 224, 189, 0.25); color: var(--lcwd-accent-mint-text) !important; } .lcwd-reassure-panel h2, .lcwd-reassure-panel h3 { color: var(--lcwd-accent-mint-text) !important; } /* LC Web Design logo uploaded as a wide PNG, but Astra never had a header "Logo Width" set, so left unconstrained it renders far too large (same real bug already found and fixed on Tipped2Win's logo, same fix here). */ /* Real bug found and fixed 2026-07-31: `width: auto` alone wasn't enough, Astra's own base `img { max-width: 100% }` rule was capping the logo to its flex container's own (narrower) width before the aspect-ratio could resolve, badly squashing it. Explicit width + `max-width: none` defeats that cap so the logo actually renders at its real intended size. */ /* Logo swapped 2026-08-01 for the real brand kit's horizontal lockup (icon + "LC WEB DESIGN" + tagline, transparent background) - width recalculated for its actual aspect ratio (468x129, ~3.63:1) at the same 60px header height as before (218px, not the old logo's 208px - those 2 logos weren't quite the same aspect ratio, and reusing the old width would have mildly squashed this one). */ .site-logo-img, .custom-logo-link { max-width: none !important; } .site-logo-img img.custom-logo, .ast-site-identity img.custom-logo { /* Bumped up 2026-08-05 (Leon's direct request, "logo bit too small") - same 468x129 (~3.63:1) aspect ratio as the 2026-08-01 bump, just larger again. */ height: 88px !important; width: 320px !important; max-width: none !important; max-height: 88px !important; } #masthead, .site-header, .ast-primary-header-bar, .main-header-bar, .ast-above-header, .ast-below-header-bar { background-color: var(--lcwd-panel) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Batch 1 - sticky header with a soft blur, matching the approved mockup. Astra's own "Sticky Header" module is a Pro-only feature on this install, so this is a plain CSS sticky rule instead - scoped to #masthead only, doesn't touch anything else in Astra's layout. */ #masthead { position: sticky; top: 0; z-index: 999; background-color: rgba(19, 27, 46, 0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Batch 1 - "Get a Quote" nav CTA. The live menu's real last item is the Get a Quote link (set via `wp menu item`), styled here as a filled amber button instead of a plain text link, matching the approved mockup. Scoped to :last-child so no menu-item CSS-class plumbing was needed. Real bug fixed 2026-08-05 (Leon: "get a quote button is too big"): Astra's own `.main-header-menu .menu-item { display:flex; flex-direction:column }` rule made the
  • stretch to match the full header row height (driven by the 80px+ logo), and since the anchor filled that stretched
  • , the amber button rendered ~100px tall - only visible on this item because it's the only nav link with a background box, every plain-text link was stretching the same way but invisibly. `align-self: center` on the
  • stops it matching sibling height; the anchor keeps its own natural button size. */ .main-header-menu > li:last-child { align-self: center; } .main-header-menu > li:last-child > a { background-color: var(--lcwd-accent) !important; color: var(--lcwd-accent-text) !important; font-weight: 700; padding: 10px 20px !important; border-radius: 8px; margin-left: 6px; line-height: normal; box-shadow: 0 0 0 1px var(--lcwd-accent-line), 0 0 20px -6px var(--lcwd-accent-glow); transition: filter .15s ease, box-shadow .15s ease; } .main-header-menu > li:last-child > a:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--lcwd-accent-line), 0 0 32px -4px var(--lcwd-accent-glow); } /* Batch 1 - announcement bar, added via functions.php's `lcwd_announcement_bar` (astra_header_before hook, guarded to real LC Web Design pages only - never fires on standalone demo pages). */ .lcwd-announce { background-color: var(--lcwd-accent) !important; color: var(--lcwd-accent-text) !important; text-align: center; font-weight: 700; font-size: 14px; padding: 8px 16px; } .lcwd-announce a { color: var(--lcwd-accent-text) !important; text-decoration: underline; margin-left: 8px; white-space: nowrap; } /* Site title text hidden 2026-08-01 (Leon's direct request, "remove the white writing next to my logo") - the logo image itself already has the "LC WEB DESIGN" wordmark baked in, so Astra's separate site-title text next to it was purely redundant. */ .ast-site-identity .site-title, .ast-site-identity .site-description { display: none !important; } .main-header-menu li a, .main-header-menu > li > a, .ast-primary-menu-first > li > a { color: var(--lcwd-text) !important; } .main-header-menu li a:hover, .main-header-menu li.current-menu-item > a { color: var(--lcwd-accent) !important; } /* Real bug fix, 2026-08-05 (Leon: "contact page quote button text cant read"): "Get a Quote" and "Contact" both link to /contact/, so WordPress's URL-based current-menu-item matching marks the Get a Quote button as "current" too when viewing that page - stacking the line above's amber TEXT with the button's own amber BACKGROUND (astra-chrome.css line ~94) made it fully invisible. :last-child is always the Get a Quote button, exclude it from the current-page colour override. */ .main-header-menu li.current-menu-item:last-child > a { color: var(--lcwd-accent-text) !important; } /* Mobile menu - real bug found 2026-07-30 (Leon: "colours are messed up... maybe mobile"): the hamburger toggle icon and the off-canvas menu panel use Astra's own default styling, which these selectors never covered - the toggle rendered in Astra's default blue, and the open panel was a plain white box, both clashing hard against this site's dark navy/gold theme. */ .ast-mobile-header-wrap, .ast-mobile-header-content { background-color: var(--lcwd-panel) !important; } /* Real bug fix, 2026-08-05 (Leon: "text is still white and unreadable on some nav menus"): the wrapper above was already dark, but the