/* overrides.css — static-rebuild fixes layered on top of Squarespace CSS. Loaded last in so it wins. */ /* --------------------------------------------------------------------------- Scroll-reveal animations — Squarespace ships content with opacity:0 and fades it in via JS on scroll. We stripped that JS, so every below-the-fold animated element would stay invisible. Force everything visible site-wide. --------------------------------------------------------------------------- */ [data-animation-role], .sqs-block, .sqs-block-content, .fluid-image-animation-wrapper, [data-animation-role] > *, section[data-animation] { opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; } /* --------------------------------------------------------------------------- Sticky header — pin to top. Squarespace shipped each page with a different header treatment (homepage "black"/transparent over the hero, inner pages "light", appointments/cart untyped) which made the nav look different on every page. We force ONE consistent solid-black header with white text on ALL pages, in every state, so the nav is identical site-wide. --------------------------------------------------------------------------- */ #header { position: sticky !important; top: 0 !important; z-index: 9999 !important; transition: background-color .3s ease, box-shadow .3s ease; } /* Solid black background on every page, every state (overrides the per-page transparent/light Squarespace header tweaks). */ #header, #header .header-background { background-color: #000 !important; } /* Slightly stronger shadow once scrolled, for depth. */ #header.scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .35); } /* White text/links/icons in the (always black) header. */ #header .header-title-text a, #header .header-title a, #header .header-nav-item a, #header .header-menu-nav-item a, #header .header-display-desktop a, #header .header-actions-action--social a, #header .header-actions-action--social svg, #header .header-burger-btn .burger-inner::before, #header .header-burger-btn .burger-inner::after, #header .header-burger-btn .burger-inner { color: #fff !important; fill: #fff !important; } #header .burger-inner, #header .burger-inner::before, #header .burger-inner::after { background-color: #fff !important; } /* --------------------------------------------------------------------------- Nav CTA button ("Request a Quote") — the Squarespace inverse-theme rules render its label white-on-white, making it invisible. Force black text in both the default and scrolled header states. --------------------------------------------------------------------------- */ #header .header-actions-action--cta .btn, #header.scrolled .header-actions-action--cta .btn, #header .header-menu-actions .sqs-button-element--primary, #header.scrolled .header-menu-actions .sqs-button-element--primary { color: #000 !important; } /* --------------------------------------------------------------------------- Gallery — Squarespace's GalleryGrid JS normally sizes/positions tiles. Without it the wrapper collapses to min-height:100px and tiles stack to 0. Rebuild as a clean responsive CSS grid so all photos show. --------------------------------------------------------------------------- */ .gallery-section-wrapper, .gallery, .gallery-grid-wrapper { min-height: 0 !important; height: auto !important; } .gallery-grid.gallery-grid--layout-grid, .gallery-grid { height: auto !important; position: static !important; } /* The actual flex/grid container holding the 34 tiles */ .gallery-grid-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto !important; gap: 18px !important; height: auto !important; width: 100% !important; position: static !important; } .gallery-grid-item { position: static !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } .gallery-grid-item-wrapper { position: relative !important; width: 100% !important; height: 300px !important; padding: 0 !important; /* kill Squarespace intrinsic-ratio padding-bottom */ opacity: 1 !important; /* defeat scroll-reveal opacity:0 on below-fold tiles */ aspect-ratio: auto !important; overflow: hidden !important; border-radius: 2px; } .gallery-grid-item-wrapper img, .gallery-grid-item img { position: static !important; display: block !important; inset: auto !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important; } @media (max-width: 900px) { .gallery-grid-wrapper { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .gallery-grid-wrapper { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------------- Rebuilt lead forms (.brc-form) — the Squarespace React form runtime was stripped, so the contact/about/home forms are rebuilt as plain HTML wired to the form-relay Worker. These styles give them clean, on-brand layout. --------------------------------------------------------------------------- */ .brc-form { width: 100%; } .brc-form .field-list { display: flex; flex-direction: column; gap: 18px; } .brc-form .brc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .brc-form .brc-field { display: flex; flex-direction: column; gap: 6px; } .brc-form label { font-size: 0.85rem; font-weight: 600; letter-spacing: .02em; } .brc-form .required { color: #c0392b; } .brc-form input, .brc-form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 2px; font: inherit; background: #fff; color: #111; box-sizing: border-box; } .brc-form textarea { resize: vertical; min-height: 120px; } .brc-form input:focus, .brc-form textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); } .brc-form .form-button-wrapper { margin-top: 22px; } .brc-form .form-submit-button { cursor: pointer; border: none; } .brc-form .form-submit-button[disabled] { opacity: .6; cursor: default; } .brc-form-message { margin-top: 14px; font-size: 0.92rem; min-height: 1.2em; } .brc-form-message--ok { color: #1e7e34; font-weight: 600; } .brc-form-message--err { color: #c0392b; font-weight: 600; } @media (max-width: 600px) { .brc-form .brc-row { grid-template-columns: 1fr; } }