style element", not the tag. * * SELECTOR DISCIPLINE: every rule scoped to a store wrapper class * (.c-store-product-detail, .c-store-product-list, .c-store-cart, * .c-store-checkout, .c-store-order-success) so non-store pages stay * unaffected. The token block on body is the one exception - CSS custom * properties don't render, they just sit unused elsewhere. * * TARGETS (framework class names this overlay depends on - grep against * GHL changelog when major updates land): * .c-store-product-detail, .c-store-product-list, .c-store-cart, * .c-store-checkout, .c-store-order-success, .c-product-details, * .hl-product-detail-product-name, .hl-product-detail-product-price, * .primary-btn, .secondary-btn, .write-review-btn, * .variant-dropdown, .hl-quantity-input, .quantity-container, * .ec-subscription-pill, .ec-review-stars, .star-rating, * .drawer, .drawer__content, .product-detail-container, * .hl-product-image, .ec-subscription-pills-container * * Design source: docs/plans/2026-06-03-shop-ghl-template-overlay-design.md */ /* ---- 1. Brand fonts (GHL Media URLs, uploaded 2026-06-08) ---- */ @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e7949e55f8519aa1c64.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e79da24932f1259cb8d.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Gotham';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e79f607d4002bc73b49.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Wild Spirit';src:url('https://assets.cdn.filesafe.space/ujOMNrQuS7ER8wa2aDAZ/media/6a267e7949e55f8519aa1c65.woff2') format('woff2');font-weight:400;font-display:swap} /* ---- 2. Token block - brand spine, single retune point ---- */ body { --sage: #cacd92; --sage-dark: #b5b87a; --sage-tint: rgba(202, 205, 146, 0.10); --sage-tint-20: rgba(217, 220, 178, 0.20); --body: #70706f; --heading: #352A2A; --tint-bg: #F7F8F0; --font-sans: 'Gotham', 'Helvetica Neue', Arial, sans-serif; --font-script: 'Wild Spirit', 'Brush Script MT', cursive; --radius-pill: 9999px; --radius-card: 0.75rem; } /* ---- 3. Reset - kill GHL defaults we always override (scoped to store) ---- */ .c-store-product-detail, .c-store-product-list, .c-store-cart, .c-store-checkout, .c-store-order-success { font-family: var(--font-sans); color: var(--body); -webkit-font-smoothing: antialiased; line-height: 1.5; } /* GHL sets per-element fonts on its native store components - product name and price render in Merriweather (serif), cards/pills in Lato, some controls in Inter - and those element-level rules beat the wrapper font above. Force the brand sans on every store descendant so the storefront is consistently Gotham. The store icons (box image, chevrons, stars) are SVG, not an icon font, so nothing breaks. The Wild Spirit accent (.tgpc-script) re-asserts itself: its two-class selector outranks this single-class universal rule, and it carries its own !important (see Typography below). */ .c-store-product-detail *, .c-store-product-list *, .c-store-cart *, .c-store-checkout *, .c-store-order-success * { font-family: var(--font-sans) !important; } /* ---- 4. Typography ---- */ /* Hide GHL's native product title - we render our own two-tone H1 via the pdp-title.html Custom Code block above this element */ .c-store-product-detail .hl-product-detail-product-name { display: none !important; } /* Our own H1 markup (rendered via Custom Code block) */ .c-store-product-detail .tgpc-h1, .c-store-product-list .tgpc-h1, .c-store-order-success .tgpc-h1 { font-family: var(--font-sans) !important; font-weight: 700; line-height: 1.15; color: var(--body); font-size: 2.25rem; margin: 0 0 1rem; text-align: center !important; } @media (min-width: 768px) { .c-store-product-detail .tgpc-h1, .c-store-product-list .tgpc-h1, .c-store-order-success .tgpc-h1 { font-size: 3rem; } } .c-store-product-detail .tgpc-h2, .c-store-product-list .tgpc-h2, .c-store-order-success .tgpc-h2 { font-family: var(--font-sans) !important; font-weight: 700; line-height: 1.15; color: var(--body); font-size: 1.875rem; margin: 0 0 0.75rem; text-align: center !important; } @media (min-width: 768px) { .c-store-product-detail .tgpc-h2, .c-store-product-list .tgpc-h2, .c-store-order-success .tgpc-h2 { font-size: 2.25rem; } } /* Two-tone helper - inside H1/H2 */ .c-store-product-detail .sage, .c-store-product-list .sage, .c-store-order-success .sage { color: var(--sage); } /* Lead paragraph */ .c-store-product-detail .tgpc-lead, .c-store-product-list .tgpc-lead, .c-store-order-success .tgpc-lead { font-size: 1.125rem; color: var(--body); text-align: center !important; margin: 0 auto !important; max-width: 42rem; } @media (min-width: 768px) { .c-store-product-detail .tgpc-lead, .c-store-product-list .tgpc-lead, .c-store-order-success .tgpc-lead { font-size: 1.25rem; } } /* Wild Spirit signature (use sparingly - DESIGN.md says max one per page) */ .c-store-product-detail .tgpc-script, .c-store-product-list .tgpc-script, .c-store-order-success .tgpc-script { font-family: var(--font-script) !important; font-weight: 400; color: var(--sage); line-height: 1; font-size: 2.75rem; display: block; margin-bottom: 1.25rem; } @media (min-width: 768px) { .c-store-product-detail .tgpc-script, .c-store-product-list .tgpc-script, .c-store-order-success .tgpc-script { font-size: 3.5rem; } } /* ---- 5. Buttons ---- */ /* GHL's primary Add-to-Cart button - sage pill. The cart "Checkout" (.hl-checkout-btn) and checkout "Make Payment" (.payment-btn) buttons ship blue/square from GHL; they get the same primary treatment here. */ .c-store-product-detail .primary-btn, .c-store-product-list .primary-btn, .c-store-cart .primary-btn, .c-store-checkout .primary-btn, .c-store-order-success .primary-btn, .c-store-cart .hl-checkout-btn, .c-store-checkout .payment-btn { background-color: var(--sage) !important; color: var(--body) !important; font-family: var(--font-sans) !important; font-weight: 500; font-size: 1.0625rem; padding: 1rem 2.5rem !important; border-radius: var(--radius-pill) !important; border: none !important; box-shadow: 0 10px 15px -3px rgba(202, 205, 146, 0.25); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; cursor: pointer; } .c-store-product-detail .primary-btn:hover, .c-store-product-list .primary-btn:hover, .c-store-cart .primary-btn:hover, .c-store-checkout .primary-btn:hover, .c-store-order-success .primary-btn:hover, .c-store-cart .hl-checkout-btn:hover, .c-store-checkout .payment-btn:hover { background-color: var(--sage-dark) !important; box-shadow: 0 20px 25px -5px rgba(202, 205, 146, 0.40); transform: scale(1.02); } /* GHL nests the button label in a child span with its own white colour - pull it to --body so it reads on sage. */ .c-store-cart .hl-checkout-btn *, .c-store-checkout .payment-btn * { color: var(--body) !important; } /* GHL's secondary (Buy Now / Outline) button - sage ghost. The cart/checkout "Continue Shopping" button (.hl-continue-btn) ships grey/square; same ghost treatment here. */ .c-store-product-detail .secondary-btn, .c-store-product-list .secondary-btn, .c-store-cart .secondary-btn, .c-store-checkout .secondary-btn, .c-store-order-success .secondary-btn, .c-store-cart .hl-continue-btn, .c-store-checkout .hl-continue-btn { background-color: transparent !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-weight: 500; font-size: 0.9375rem; padding: 0.75rem 1.75rem !important; border-radius: var(--radius-pill) !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; transition: background-color 0.2s ease, border-color 0.2s ease; cursor: pointer; } .c-store-product-detail .secondary-btn:hover, .c-store-product-list .secondary-btn:hover, .c-store-cart .secondary-btn:hover, .c-store-checkout .secondary-btn:hover, .c-store-order-success .secondary-btn:hover, .c-store-cart .hl-continue-btn:hover, .c-store-checkout .hl-continue-btn:hover { background-color: var(--sage-tint) !important; border-color: var(--sage) !important; } /* Write-a-review button - ghost variant */ .c-store-product-detail .write-review-btn { background-color: transparent !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-pill) !important; padding: 0.75rem 1.75rem !important; } /* Quantity +/- buttons - sage outline (when shown; we hide quantity by default) */ .c-store-product-detail .quantity-icon-button { color: var(--body) !important; border-color: rgba(202, 205, 146, 0.40) !important; } /* ---- 6. Form controls ---- */ /* Variant select. GHL renders a native with a custom JS component. */ /* The select's chain is .variants-wrapper-container > .variants-wrapper (a CSS grid whose column is sized to ~207px) > .prices-container > select. Widening .prices-container alone fails because it only fills the 207px grid track - force the grid to one full-width column so the whole chain reaches button width. */ .c-store-product-detail .variants-wrapper-container, .c-store-product-detail .prices-container { width: 100% !important; max-width: 100% !important; } .c-store-product-detail .variants-wrapper { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } .c-store-product-detail .variant-dropdown, .c-store-cart .variant-dropdown { width: 100% !important; font-family: var(--font-sans) !important; font-size: 0.9375rem !important; color: var(--body) !important; background-color: #fff !important; border: 1px solid rgba(202, 205, 146, 0.40) !important; border-radius: var(--radius-pill) !important; padding: 0.85rem 2.75rem 0.85rem 1.25rem !important; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b87a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 1rem; } .c-store-product-detail .variant-dropdown:hover, .c-store-cart .variant-dropdown:hover { border-color: var(--sage) !important; } .c-store-product-detail .hl-quantity-input { font-family: var(--font-sans) !important; color: var(--body) !important; } /* Hide the entire quantity block - digital products are 1-per-order */ .c-store-product-detail .quantity-container, .c-store-product-detail .hl-pdp-quantity { display: none !important; } /* ---- 7. Product Detail Page (PDP) ---- */ .c-store-product-detail .product-detail-container { font-family: var(--font-sans); color: var(--body); } /* Product image - rounded card style */ .c-store-product-detail .hl-product-image-container, .c-store-product-detail .image-wrapper { border-radius: var(--radius-card) !important; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .c-store-product-detail .hl-product-image { border-radius: 0 !important; /* outer wrapper holds the radius */ } /* Price */ .c-store-product-detail .hl-product-detail-product-price { font-family: var(--font-sans) !important; font-size: 2.25rem !important; font-weight: 700; color: var(--heading) !important; margin: 0.5rem 0 0; } /* Subscription pill - sage tint (override GHL's default coral) */ .c-store-product-detail .ec-subscription-pill { background-color: var(--sage-tint) !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-pill) !important; padding: 0.25rem 0.75rem !important; } /* ---- 8. Shop list / product grid ---- */ /* Card class verified via CDP probe 2026-06-08: GHL renders each grid item as an . See overlay-blocks/README.md. */ .c-store-product-list .hl-product-list-item { border-radius: var(--radius-card) !important; border: 1px solid rgba(202, 205, 146, 0.15) !important; background-color: #fff !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07); transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .c-store-product-list .hl-product-list-item:hover { border-color: rgba(202, 205, 146, 0.40) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10); } .c-store-product-list .hl-product-list-item img { transition: transform 0.5s ease; } .c-store-product-list .hl-product-list-item:hover img { transform: scale(1.03); } /* ---- 9. Cart drawer ---- */ .c-store-product-detail .drawer__content, .c-store-cart .drawer__content { font-family: var(--font-sans); color: var(--body); } /* The add-to-cart drawer's "Continue Shopping" is a GHL-blue underlined link (.continue-shopping-text, a div GHL clicks via JS), and its product name ships black. The "View Cart" button (.view-cart-btn.primary-btn) is already sage via the button rules. Bring the link and name to the brand spine. */ .c-store-product-detail .continue-shopping-text, .c-store-cart .continue-shopping-text { color: var(--body) !important; text-decoration-color: var(--body) !important; } .c-store-product-detail .continue-shopping-text:hover, .c-store-cart .continue-shopping-text:hover { color: var(--sage-dark) !important; text-decoration-color: var(--sage-dark) !important; } .c-store-product-detail .drawer__content .store-product-name, .c-store-cart .drawer__content .store-product-name { color: var(--heading) !important; } /* Cart line items. GHL ships the product name as a black link (risks turning browser-blue), the variant subtitle as slate-blue (#667085), and the subscription pill in its default coral - all off-brand. Bring them to the brand spine. The pill mirrors the PDP rule at the .c-store-product-detail selector above; GHL renders the cart pill unscoped to the PDP. */ .c-store-cart .hl-cart-product-name { color: var(--heading) !important; } .c-store-cart .cart-item-variant { color: var(--body) !important; } .c-store-cart .ec-subscription-pill { background-color: var(--sage-tint) !important; color: var(--sage-dark) !important; font-family: var(--font-sans) !important; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--radius-pill) !important; padding: 0.25rem 0.75rem !important; } /* ---- 10. Reviews block ---- */ .c-store-product-detail .ec-review-stars, .c-store-product-detail .ec-review-heading, .c-store-product-detail .star-rating { font-family: var(--font-sans) !important; color: var(--body) !important; } .c-store-product-detail .ec-progress-star { background-color: var(--sage) !important; } /* ---- 11. Custom pills (from our Custom Code blocks) ---- */ .c-store-product-detail .tgpc-pill, .c-store-product-list .tgpc-pill, .c-store-order-success .tgpc-pill { display: inline-flex; align-items: center; background: var(--sage-tint); color: var(--sage-dark); padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; } /* ---- 12. Hide-overrides for elements we replace via Custom Code blocks ---- */ /* Reviews block on PDP - hide for v1 launch (low signal, no reviews yet) */ .c-store-product-detail .ec-review-stars { display: none !important; } /* GHL's default cart drawer "title" - we leave drawer structural but restyle copy via inherits from body */ /* ---- Custom block utilities (used by overlay-blocks/*.html) ---- */ /* Trust row (pdp-trust.html) */ .c-store-product-detail .tgpc-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; } .c-store-product-detail .tgpc-trust__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--body); } .c-store-product-detail .tgpc-ico { width: 1.125rem; height: 1.125rem; flex: none; stroke: var(--sage-dark); } /* Feature checklist (pdp-whats-inside.html) */ .c-store-product-detail .tgpc-features { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; } @media (min-width: 768px) { .c-store-product-detail .tgpc-features { grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; } } .c-store-product-detail .tgpc-feat { display: flex; align-items: flex-start; gap: 0.75rem; } .c-store-product-detail .tgpc-feat .tgpc-ico { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; stroke: var(--sage); } /* Peak-end CTA panel (pdp-crosssell.html, list-peakend.html, success-keepgoing.html) */ .c-store-product-detail .tgpc-panel, .c-store-product-list .tgpc-panel, .c-store-order-success .tgpc-panel { position: relative; overflow: hidden; background: #fff; border: 2px solid rgba(202, 205, 146, 0.20); border-radius: var(--radius-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); padding: 2.5rem 1.5rem; text-align: center !important; } @media (min-width: 768px) { .c-store-product-detail .tgpc-panel, .c-store-product-list .tgpc-panel, .c-store-order-success .tgpc-panel { padding: 3.5rem; } } .c-store-product-detail .tgpc-panel__glow, .c-store-product-list .tgpc-panel__glow, .c-store-order-success .tgpc-panel__glow { position: absolute; top: 0; right: 0; width: 14rem; height: 14rem; background: var(--sage-tint); border-radius: 9999px; filter: blur(64px); margin: -5rem -5rem 0 0; } .c-store-product-detail .tgpc-panel__inner, .c-store-product-list .tgpc-panel__inner, .c-store-order-success .tgpc-panel__inner { position: relative; } .c-store-product-detail .tgpc-panel .tgpc-lead, .c-store-product-list .tgpc-panel .tgpc-lead, .c-store-order-success .tgpc-panel .tgpc-lead { margin: 1rem auto 2rem; max-width: 38rem; } /* 3-step block (success-steps.html) */ .c-store-order-success .tgpc-steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; } @media (min-width: 768px) { .c-store-order-success .tgpc-steps { grid-template-columns: repeat(3, 1fr); } } .c-store-order-success .tgpc-step { text-align: center; } .c-store-order-success .tgpc-step__num { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-pill); background: var(--sage); color: var(--body); font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .c-store-order-success .tgpc-step__title { font-size: 1.125rem; font-weight: 700; color: var(--body); margin-bottom: 0.5rem; } .c-store-order-success .tgpc-step__desc { font-size: 0.9375rem; color: var(--body); max-width: 18rem; margin: 0 auto; } /* ---- 13. Focus states - sage ring, never the browser/GHL blue ---- */ /* GHL/the browser draw a blue (#188bf6) focus-visible ring on buttons and the select. Remove it; restore a sage ring for keyboard accessibility only. */ .c-store-product-detail .primary-btn, .c-store-product-detail .secondary-btn, .c-store-product-detail .write-review-btn, .c-store-product-detail .variant-dropdown, .c-store-cart .primary-btn, .c-store-cart .secondary-btn, .c-store-cart .variant-dropdown, .c-store-checkout .primary-btn, .c-store-checkout .secondary-btn, .c-store-product-list .primary-btn, .c-store-order-success .primary-btn, .c-nav-menu-v2 .mega-menu-link, .c-nav-menu-v2 .search-nav-button, .c-nav-menu-v2 .nav-cart-button { outline: none !important; } .c-store-product-detail .primary-btn:focus-visible, .c-store-product-detail .secondary-btn:focus-visible, .c-store-product-detail .variant-dropdown:focus-visible, .c-store-cart .primary-btn:focus-visible, .c-store-cart .secondary-btn:focus-visible, .c-store-checkout .primary-btn:focus-visible, .c-store-product-list .primary-btn:focus-visible, .c-store-order-success .primary-btn:focus-visible, .c-nav-menu-v2 .mega-menu-link:focus-visible, .c-nav-menu-v2 .search-nav-button:focus-visible, .c-nav-menu-v2 .nav-cart-button:focus-visible { outline: 2px solid var(--sage-dark) !important; outline-offset: 2px !important; } /* Select: replace any blue focus glow with a sage one */ .c-store-product-detail .variant-dropdown:focus { border-color: var(--sage) !important; box-shadow: 0 0 0 3px var(--sage-tint) !important; } /* ---- 14. Header announcement bar ---- */ /* Remove the "Hey there-welcome in!" top banner (a page-builder section). Hidden by its GHL-generated section id. If the section is rebuilt in the editor this id changes - deleting the section in the builder is the permanent fix; this hide is the overlay-only equivalent. */ #section-pbRFnNx2ez, .section-pbRFnNx2ez { display: none !important; } /* "Our Products" page header - a large (~418px) heading-only overview section above the product grid. Removed per request. */ #section-230yKN4SEl, .section-230yKN4SEl { display: none !important; } /* GHL's native template footer - the "(c) My Store / Privacy policy" bar. The store-template pages (product details, cart, checkout) share one footer section, so this single id hides it on all of them; the builder pages (products list, home) already have it removed. Our own footer is injected separately (site-footer-inject.html). If GHL rebuilds the footer section this id changes - re-probe the live page and update. */ #section-XaYU6EW7oT, .section-XaYU6EW7oT { display: none !important; } /* ---- 15. Site nav / app bar ---- */ /* .c-nav-menu-v2 renders on every page of the store website. This overlay only loads on that site, so styling it globally is intentional (like the token block). The "My Store" wordmark text is a GHL nav setting - change the text in the builder; this only restyles it. */ .c-nav-menu-v2 { font-family: var(--font-sans) !important; } .c-nav-menu-v2 .menu-layout { font-family: var(--font-sans) !important; color: var(--heading) !important; font-weight: 700; } /* Brand logo - the SAME clean logo as the official website (apps/website/public/tgpc-logo.png, 1432x689, aspect 2.08:1), referenced from its public URL so the store and site stay in sync. Replaces the "My Store" text wordmark; the text is zeroed (not removed) so screen readers still announce it - update the wordmark text to the brand name in GHL nav settings for correct SR/SEO. Cleaner alternative: set this via GHL's native nav logo slot and delete this block. */ .c-nav-menu-v2 [class*="-headline"] { display: inline-block !important; width: 125px !important; height: 60px !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background-image: url('https://www.thegoodpropertycompany.co.uk/tgpc-logo.png'); background-repeat: no-repeat; background-position: left center; background-size: contain; } .c-nav-menu-v2 .mega-menu-link { font-family: var(--font-sans) !important; color: var(--body) !important; font-weight: 500; transition: color 0.2s ease; } .c-nav-menu-v2 .mega-menu-link:hover { color: var(--sage-dark) !important; } .c-nav-menu-v2 .search-nav-button, .c-nav-menu-v2 .nav-cart-button { color: var(--body) !important; transition: color 0.2s ease; } .c-nav-menu-v2 .search-nav-button:hover, .c-nav-menu-v2 .nav-cart-button:hover { color: var(--sage-dark) !important; } /* Make the search icon match the cart icon. GHL ships the search glyph at 16px with its path stroke hardcoded to var(--black), so it renders smaller and ignores the button colour. The cart glyph is 20px with stroke="currentColor". Force search to 20px + currentColor so both share size and colour (body, sage on hover). */ .c-nav-menu-v2 .search-nav-button svg { width: 20px !important; height: 20px !important; } .c-nav-menu-v2 .search-nav-button svg path { stroke: currentColor !important; } /* Kill GHL's dark hover background on nav links - match the website, which changes only the text colour on hover (no pill/background). GHL applies the black on .menu-item-title:hover (NOT .mega-menu-link), via a rule with no !important, so our class selector + !important wins without needing the hashed nav id. */ .c-nav-menu-v2 .mega-menu-link, .c-nav-menu-v2 .menu-item, .c-nav-menu-v2 .menu-item-title, .c-nav-menu-v2 .menu-item-builder-title, .c-nav-menu-v2 .menu-item > .mega-menu-link { background-color: transparent !important; border-radius: 0 !important; } .c-nav-menu-v2 .mega-menu-link:hover, .c-nav-menu-v2 .menu-item:hover, .c-nav-menu-v2 .menu-item-title:hover, .c-nav-menu-v2 .menu-item-builder-title:hover, .c-nav-menu-v2 .menu-item:hover > .mega-menu-link { background-color: transparent !important; color: var(--sage-dark) !important; } /* About submenu - branded white card with sage hover, not GHL's dark default. Submenu rows are .submenu-item (GHL also blacks these on hover). */ .c-nav-menu-v2 .submenu, .c-nav-menu-v2 .sub-menu-align { background-color: #fff !important; border: 1px solid rgba(202, 205, 146, 0.30) !important; border-radius: var(--radius-card) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10) !important; } .c-nav-menu-v2 .submenu .mega-menu-link, .c-nav-menu-v2 .submenu-item { color: var(--body) !important; background-color: transparent !important; } .c-nav-menu-v2 .submenu .mega-menu-link:hover, .c-nav-menu-v2 .submenu-item:hover { background-color: var(--sage-tint) !important; color: var(--sage-dark) !important; } /* ---- 16. Site footer ---- */ /* Styles the injected site footer (overlay-blocks/site-footer.html), a full replica of the official site footer. Like the nav (.c-nav-menu-v2), the footer renders on every page of the store website, so it is scoped to .tgpc-footer (globally, NOT under a store wrapper). That class exists only in the injected block, so these rules cannot reach any native or non-store DOM. */ .tgpc-footer { /* Full-bleed. GHL drops this block inside a ~1160px content column, so the background would only fill that centered box (white gutters either side). The negative-margin calc pulls the element out to the full viewport width. Using calc(50% - 50vw) rather than width:100vw avoids the scrollbar-width horizontal overflow. .tgpc-footer__inner keeps the content centered + capped. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background-color: var(--tint-bg); color: var(--body); font-family: var(--font-sans); padding: 4rem 0; } .tgpc-footer__inner { /* 1400px matches the official site footer's content cap (shadcn/ui container 2xl screen = 1400px) with the same 1.5rem (md:px-6) side padding, so the store footer spans the same width as thegoodpropertycompany.co.uk. */ max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } .tgpc-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } @media (min-width: 768px) { .tgpc-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Brand column spans both columns on mobile, one on desktop */ .tgpc-footer__brand { grid-column: span 2; } @media (min-width: 768px) { .tgpc-footer__brand { grid-column: span 1; } } .tgpc-footer__logo { display: inline-block; } .tgpc-footer__logo img { height: 40px; width: auto; display: block; } .tgpc-footer__blurb { max-width: 20rem; margin: 1rem 0 0; color: var(--body); line-height: 1.6; } .tgpc-footer__heading { margin: 0 0 1rem; color: var(--heading); font-size: 1.125rem; font-weight: 600; } .tgpc-footer__heading--contact { margin-top: 1.5rem; } .tgpc-footer__links { list-style: none; margin: 0; padding: 0; } .tgpc-footer__links li { margin-bottom: 0.75rem; } .tgpc-footer__links a, .tgpc-footer__email { display: inline-flex; align-items: center; color: var(--body); text-decoration: none; transition: color 0.2s ease; } .tgpc-footer__links a:hover, .tgpc-footer__email:hover { color: var(--sage-dark); } .tgpc-footer__chev { margin-right: 0.5rem; color: var(--sage); } /* Connect column - social + contact */ .tgpc-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tgpc-footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); color: var(--body); transition: color 0.2s ease, background-color 0.2s ease; } .tgpc-footer__social a:hover { color: var(--sage-dark); background-color: var(--sage-tint); } .tgpc-footer__rule { border: 0; border-top: 1px solid rgba(112, 112, 111, 0.2); margin: 2rem 0; } /* Registration block - demoted so it recedes */ .tgpc-footer__legal { font-size: 0.75rem; color: rgba(112, 112, 111, 0.75); line-height: 1.6; } .tgpc-footer__legal p { margin: 0 0 0.25rem; } .tgpc-footer__legal-name { font-weight: 600; color: rgba(53, 42, 42, 0.8); } .tgpc-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 768px) { .tgpc-footer__bottom { flex-direction: row; } } .tgpc-footer__copy { margin: 0; font-size: 0.875rem; color: var(--body); } .tgpc-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: 0.875rem; } .tgpc-footer__legal-links a { color: var(--body); text-decoration: none; transition: color 0.2s ease; } .tgpc-footer__legal-links a:hover { color: var(--sage-dark); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .c-store-product-detail *, .c-store-product-list *, .c-store-cart *, .c-store-checkout *, .c-store-order-success *, .tgpc-footer * { transition: none !important; } }

Hey there—welcome in!

Customer Reviews

Average Ratings

Write a review