/* Theme Name: Sarasota Glass Child Theme URI: https://sarasotaglass.com Description: Lean GeneratePress child theme for Sarasota Glass & Mirror. Owns the global shell only — brand colors, typography, header/footer, and tracking hooks. All page and post content is built in the editor with GenerateBlocks; nothing page-specific belongs in this theme. Author: The Web Design Ninja Author URI: https://thewebdesignninja.com Template: generatepress Version: 1.9.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sarasotaglass-child */ /* ========================================================================= 1. BRAND TOKENS Single source of truth for the brand. Change a value here (or in theme.json / the GeneratePress Customizer) and it updates site-wide. ========================================================================= */ :root { /* Purple family */ --sg-purple: #8c4bcc; /* primary UI purple: utility bar, buttons, active nav */ --sg-purple-dark: #603090; /* deep logo purple: headings accents, hovers */ --sg-purple-darker: #4d2673; /* button/link hover */ /* Gold accent (logo swoosh) */ --sg-gold: #f0c000; --sg-gold-dark: #cca300; /* Neutrals */ --sg-ink: #212121; /* headings */ --sg-body: #404040; /* body text */ --sg-muted: #6b6b6b; --sg-line: #e4e4e4; --sg-bg: #ffffff; --sg-bg-alt: #f4f4f4; /* light section background */ --sg-bg-alt2: #f7f7f7; /* Feedback */ --sg-red: #e80000; /* required/urgency */ /* Type */ --sg-font-head: "Big Shoulders Display", "Source Sans Pro", system-ui, sans-serif; --sg-font-body: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Radius / spacing */ --sg-radius: 4px; --sg-radius-lg: 8px; } /* ========================================================================= 2. BASE TYPOGRAPHY (GeneratePress also sets these via the Customizer; these ensure the brand fonts/colors apply even before the Customizer is touched.) ========================================================================= */ body { font-family: var(--sg-font-body); color: var(--sg-body); font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .entry-title { font-family: var(--sg-font-head); color: var(--sg-ink); font-weight: 700; line-height: 1.15; } h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4.4rem); } h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); } h3 { font-size: 1.5rem; font-weight: 600; } a { color: var(--sg-purple); } a:hover, a:focus { color: var(--sg-purple-darker); } /* ========================================================================= 3. BUTTONS Applies to GenerateBlocks buttons (.gb-button), core buttons, WooCommerce buttons, and Ninja Forms submit — one consistent brand button. ========================================================================= */ .wp-block-button__link, .gb-button, button.button, .button, input[type="submit"], .wp-block-search__button, .woocommerce a.button, .woocommerce button.button, .nf-form-content input[type="button"], .nf-form-content .submit-wrap input { background-color: var(--sg-purple); color: #fff; border: 0; border-radius: var(--sg-radius); padding: 14px 30px; font-family: var(--sg-font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; text-transform: none; text-decoration: none; transition: background-color .15s ease, transform .05s ease; cursor: pointer; } .wp-block-button__link:hover, .gb-button:hover, button.button:hover, .button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .nf-form-content input[type="button"]:hover { background-color: var(--sg-purple-darker); color: #fff; } /* Secondary / gold button — add class .is-style-gold or .sg-btn-gold */ .sg-btn-gold, .is-style-gold > .wp-block-button__link { background-color: var(--sg-gold); color: var(--sg-ink); } .sg-btn-gold:hover, .is-style-gold > .wp-block-button__link:hover { background-color: var(--sg-gold-dark); color: var(--sg-ink); } /* Outline button — .sg-btn-outline OR the "Outline" block style */ .sg-btn-outline, .is-style-outline-purple > .wp-block-button__link { background: transparent; color: var(--sg-purple); box-shadow: inset 0 0 0 2px var(--sg-purple); } .sg-btn-outline:hover, .is-style-outline-purple > .wp-block-button__link:hover { background: var(--sg-purple); color: #fff; } /* ========================================================================= 4. HEADER — top utility bar + main nav The utility bar (showroom names + phones) sits above the logo/nav. Build it as a GeneratePress "Header" or a Hook Element into generate_before_header; these styles target it via .sg-topbar. ========================================================================= */ .sg-topbar { background: var(--sg-purple); color: #fff; font-family: var(--sg-font-body); font-size: .95rem; font-weight: 600; } .sg-topbar a { color: #fff; text-decoration: none; } .sg-topbar a:hover { color: var(--sg-gold); } .sg-topbar .sg-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 8px 0; flex-wrap: wrap; } .sg-topbar-item { white-space: nowrap; } .sg-topbar-social { margin-left: auto; } @media (max-width: 768px) { .sg-topbar { font-size: .85rem; } .sg-topbar .sg-topbar-inner { justify-content: center; gap: .35rem 1rem; } .sg-topbar-social { margin-left: 0; } } /* Logo sizing — the round "50 Years" mark */ .site-header .site-logo img, .site-header .header-image, .inside-header .site-logo img { max-height: 84px; width: auto; } @media (max-width: 768px) { .site-header .site-logo img, .site-header .header-image { max-height: 64px; } } /* We use the logo image, so hide the text title/tagline in the header */ .site-header .main-title, .site-header .site-description { position: absolute; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; } /* Header layout is handled by GeneratePress' native nav-float-right; just vertically center the logo and nav on the same line. Do NOT set the header to display:flex here — it breaks GeneratePress' float layout and wraps the nav onto a second row. */ .inside-header { align-items: center; } .site-header .main-navigation { display: flex; align-items: center; } /* Primary navigation — active/current item gets a purple pill (matches live site) */ .main-navigation .main-nav ul li a { white-space: nowrap; } .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { background-color: var(--sg-purple); color: #fff; border-radius: var(--sg-radius); } .main-navigation .main-nav ul li a { font-family: var(--sg-font-body); font-weight: 600; } .main-navigation .main-nav ul li a:hover { color: var(--sg-purple); } /* ========================================================================= 5. SECTIONS / UTILITY HELPERS for GenerateBlocks patterns ========================================================================= */ .sg-section-alt { background: var(--sg-bg-alt); } .sg-eyebrow { font-family: var(--sg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sg-purple); font-size: .8rem; } .sg-gold-rule { height: 4px; width: 64px; background: var(--sg-gold); border: 0; margin: 1rem 0; } /* Service cards */ .sg-card { background: #fff; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; } .sg-card:hover { box-shadow: 0 10px 30px rgba(96,48,144,.12); transform: translateY(-2px); } /* Page-building utility classes (keep block markup lean & reusable across pages) */ .sg-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; } .sg-sec-sm { padding-top: 1rem; padding-bottom: 1rem; } .sg-card .sg-card-body, .sg-card-body { padding: 1rem 1.25rem 1.25rem; } .sg-card-pad { padding: 1.5rem; } .sg-hero .wp-block-cover__inner-container { width: 100%; } .sg-hero { min-height: 520px; } .sg-badges { gap: 2rem; align-items: center; } .sg-badges img { max-height: 84px; width: auto; } /* Hide the theme page-title on all static pages — each rebuilt page carries its own hero H1. (Blog posts and WooCommerce templates are unaffected.) */ .page .entry-header, .page .page-header { display: none; } .page .entry-content { margin-top: 0; } /* Full-width heroes sit flush under the nav (remove container top gap) */ .page .site-main { margin-top: 0; } .page .inside-article { padding-top: 0; border-radius: 0; } /* Blog & posts — readable reading column */ .single-post .inside-article, .blog .site-main article .inside-article, .archive .site-main article .inside-article { max-width: 800px; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); padding: 2rem; margin-bottom: 2rem; } .single-post .entry-title, .blog .entry-title, .archive .entry-title { font-size: clamp(1.6rem, 3vw, 2.4rem); } .blog .entry-title a, .archive .entry-title a { color: var(--sg-ink); } .blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--sg-purple); } .single-post .entry-content { font-size: 1.06rem; } .single-post .entry-content p, .single-post .entry-content li { margin-bottom: 1.15rem; line-height: 1.7; } .single-post .entry-content h2 { margin-top: 2rem; } .entry-meta { color: var(--sg-muted); font-size: .9rem; } .blog .site-main, .archive .site-main { padding-top: 2rem; } .wp-block-columns { align-items: stretch; } .sg-card { display: flex; flex-direction: column; } .sg-card > .wp-block-image { margin: 0; } .sg-card > .wp-block-image img { width: 100%; height: 210px; object-fit: cover; display: block; } .sg-card .sg-card-body { flex: 1 1 auto; } /* Full-width, no-sidebar layout (block section designs are full-width). Also enforced in PHP via the generate_sidebar_layout filter; this CSS is the belt-and-braces so full-bleed sections break out even if a page is still on a sidebar layout. */ #right-sidebar, #left-sidebar { display: none !important; } .site-content .content-area { width: 100% !important; } .entry-content .alignfull { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .entry-content > .alignfull:first-child { margin-top: 0; } /* ========================================================================= 6. FOOTER ========================================================================= */ .site-footer, .sg-footer { background: var(--sg-ink); color: #cfcfcf; } .sg-footer { padding: 3rem 0; font-family: var(--sg-font-body); } .sg-footer a { color: #fff; text-decoration: none; } .sg-footer a:hover { color: var(--sg-gold); } .sg-footer h4 { color: #fff; font-family: var(--sg-font-head); font-size: 1.1rem; margin: 0 0 .75rem; } .sg-footer p { margin: 0 0 .75rem; line-height: 1.6; } .sg-footer .sg-muted { color: #9a9a9a; font-size: .9rem; } .sg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .sg-footer-links { list-style: none; margin: 0; padding: 0; } .sg-footer-links li { margin: 0 0 .4rem; } @media (max-width: 880px) { .sg-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } @media (max-width: 500px) { .sg-footer-grid { grid-template-columns: 1fr; } } .site-info { background: #171717; color: #9a9a9a; text-align: center; padding: 1rem 0; font-size: .9rem; } .site-info a { color: #cfcfcf; text-decoration: none; } .site-info a:hover { color: var(--sg-gold); } /* ========================================================================= 7. FORMS (Ninja Forms "Get a Quote") ========================================================================= */ .nf-form-content input:not([type=button]), .nf-form-content textarea, .nf-form-content select { border: 1px solid var(--sg-line); border-radius: var(--sg-radius); } .nf-form-content .nf-field-label .required, .ninja-forms-req-symbol { color: var(--sg-red); } /* ========================================================================= 8. ACCESSIBILITY ========================================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--sg-gold); outline-offset: 2px; } /* ========================================================================= 10. CONCEPT C — STORM BOLD (approved direction, applied sitewide) Dark, bold, hurricane-tough treatment: near-black topbar, gold hero CTA, uppercase Big Shoulders Display hero headline. Applies to both the homepage hero (.sg-hero) and every service-page hero (.sg-pagehero). Content sections (cards, body copy) stay on the existing light backgrounds for readability across all pages. ========================================================================= */ :root { --sg-dark: #100d16; --sg-dark-panel: #17131f; } /* Topbar goes near-black instead of purple */ .sg-topbar { background: var(--sg-dark); } .sg-topbar a:hover { color: var(--sg-gold); } /* Hero: uppercase display headline, badge-style eyebrow */ .sg-hero h1, .sg-pagehero h1, .sg-hero .entry-title, .sg-pagehero .entry-title { font-family: var(--sg-font-head); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 800; } .sg-hero .sg-eyebrow, .sg-pagehero .sg-eyebrow { display: inline-flex; align-items: center; border: 1px solid rgba(240,192,0,.45); padding: .35rem .8rem; border-radius: var(--sg-radius); } /* Hero CTA goes gold (only inside the hero — buttons elsewhere stay purple) */ .sg-hero .wp-block-button__link, .sg-pagehero .wp-block-button__link, .sg-hero .wp-element-button, .sg-pagehero .wp-element-button, .sg-hero .gb-button, .sg-pagehero .gb-button { background-color: var(--sg-gold) !important; color: var(--sg-ink) !important; } .sg-hero .wp-block-button__link:hover, .sg-pagehero .wp-block-button__link:hover, .sg-hero .wp-element-button:hover, .sg-pagehero .wp-element-button:hover, .sg-hero .gb-button:hover, .sg-pagehero .gb-button:hover { background-color: var(--sg-gold-dark) !important; color: var(--sg-ink) !important; } .sg-hero .is-style-outline-purple > .wp-block-button__link, .sg-pagehero .is-style-outline-purple > .wp-block-button__link { background-color: transparent !important; color: #fff !important; } /* Footer headings pick up the new display font */ .sg-footer h4 { font-family: var(--sg-font-head); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; } /* ========================================================================= 11. FIX — WP core's .wp-element-button global style was beating our brand button colors sitewide (not just the hero), because block-library core CSS loads after this stylesheet. Re-assert the three button tiers with !important so purple/gold/outline actually render as intended on every Gutenberg button block on the site. ========================================================================= */ .wp-element-button { background-color: var(--sg-purple) !important; color: #fff !important; } .wp-element-button:hover { background-color: var(--sg-purple-darker) !important; } .is-style-gold > .wp-block-button__link.wp-element-button, .sg-btn-gold.wp-element-button { background-color: var(--sg-gold) !important; color: var(--sg-ink) !important; } .is-style-gold > .wp-block-button__link.wp-element-button:hover, .sg-btn-gold.wp-element-button:hover { background-color: var(--sg-gold-dark) !important; color: var(--sg-ink) !important; } .is-style-outline-purple > .wp-block-button__link.wp-element-button { background-color: transparent !important; color: var(--sg-purple) !important; border: 2px solid var(--sg-purple) !important; } .is-style-outline-purple > .wp-block-button__link.wp-element-button:hover { background-color: var(--sg-purple) !important; color: #fff !important; } /* ========================================================================= 12. NINJA FORMS SUBMIT BUTTON FIX Ninja Forms ships its own CSS for input[type=submit] that loads after ours and wins on specificity, so the button showed the plugin default dark grey instead of brand purple. Re-assert with !important. ========================================================================= */ .nf-form-content input[type=submit], .nf-form-content .submit-wrap input { background-color: var(--sg-purple) !important; color: #fff !important; border: 0 !important; border-radius: var(--sg-radius) !important; font-family: var(--sg-font-body) !important; font-weight: 600 !important; transition: background-color .15s ease !important; } .nf-form-content input[type=submit]:hover, .nf-form-content .submit-wrap input:hover { background-color: var(--sg-purple-darker) !important; } /* ========================================================================= 13. SCROLL REVEAL (Glasso-style right-to-left slide-in on scroll) Elements get .sg-reveal + .sg-in added by JS (see functions.php, front-page only) as they scroll into view. Respects reduced motion. ========================================================================= */ .sg-reveal { opacity: 0; transform: translateX(56px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .sg-reveal.sg-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sg-reveal { transition: none; transform: none; opacity: 1; } } /* ============================================================ 14. HOMEPAGE HERO CONTACT FORM (right column) ============================================================ */ .sg-hero .wp-block-cover__inner-container { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 2.5rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; } .sg-hero .wp-block-cover__inner-container > .wp-block-group:first-child { grid-column: 1; } .sg-hero-form { grid-column: 2; background: rgba(16,13,22,0.86); border: 1px solid rgba(240,192,0,0.3); border-radius: var(--sg-radius-lg); padding: 1.75rem 1.75rem 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,0.35); backdrop-filter: blur(6px); } .sg-hero-form-title { font-family: var(--sg-font-head); color: #fff; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; font-size: 1.15rem; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(240,192,0,0.35); } .sg-hero-form label { color: #cfc7db; font-size: 0.85rem; font-weight: 600; } .sg-hero-form input[type=text], .sg-hero-form input[type=email], .sg-hero-form input[type=tel], .sg-hero-form textarea, .sg-hero-form select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: var(--sg-radius); } .sg-hero-form input::placeholder, .sg-hero-form textarea::placeholder { color: rgba(255,255,255,0.45); } .sg-hero-form .nf-form-content input[type=submit], .sg-hero-form .nf-form-content .submit-wrap input { width: 100%; } @media (max-width: 900px) { .sg-hero .wp-block-cover__inner-container { grid-template-columns: 1fr; padding: 2.5rem 1.5rem; } .sg-hero-form { grid-column: 1; margin-top: 1.5rem; } } /* -- hero form field fixes: force stacked full-width fields, fix contrast, hide redundant NF title -- */ .sg-hero-form .nf-form-title { display: none !important; } .sg-hero-form .nf-field-container, .sg-hero-form .nf-field-container > div, .sg-hero-form .nf-field-element, .sg-hero-form input:not([type=submit]):not([type=hidden]) { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important; } .sg-hero-form input:not([type=submit]):not([type=hidden]) { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.28) !important; color: #fff !important; padding: 0.65rem 0.8rem !important; border-radius: var(--sg-radius) !important; } .sg-hero-form .nf-field-container { margin-bottom: 0.85rem !important; } .sg-hero-form input::placeholder { color: rgba(255,255,255,0.5) !important; opacity: 1 !important; } .sg-hero-form .nf-field-hp { display: none !important; } .entry-content .sg-sec { padding-bottom: 3.5rem; } /* Remove padding only from an outer section that wraps other sections */ .entry-content > .sg-sec:has(> .sg-sec) { padding-bottom: 0; } .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex { padding-bottom: 40px; } .wp-block-buttons.is-content-justification-center.is-layout-flex { padding-bottom: 0px; } /* Single Product */ .woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0rem auto; padding: 0 1.5rem; align-items: start; box-sizing: border-box; } .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { float: none; width: 100%; margin: 0; } .woocommerce div.product div.images .woocommerce-product-gallery__trigger { background: #fff; border: none; box-sizing: content-box; border-radius: 100%; cursor: pointer; font-size: 2em; height: 36px; padding: 0; position: absolute; right: .5em; text-indent: -9999px; top: .5em; width: 36px; z-index: 0; } .woocommerce-product-gallery { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid #ece7db; background: #faf8f3; padding: 1.5rem; box-sizing: border-box; } .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; } .woocommerce-product-gallery__image img { width: 100%; height: auto; max-height: 380px; object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; transition: transform .4s cubic-bezier(.16,.6,.2,1); } .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img { transform: scale(1.04); } .flex-control-thumbs { display: flex !important; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0 !important; padding: 0 !important; list-style: none !important; } .flex-control-thumbs li { list-style: none; width: auto !important; margin: 0 !important; padding: 0 !important; } .flex-control-thumbs li img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; opacity: .7; transition: border-color .2s ease, opacity .2s ease; } .flex-control-thumbs li img:hover, .flex-control-thumbs li img.flex-active { border-color: #c9a24a; opacity: 1; } .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { float: none; width: 100%; clear: none; margin: 0; } .product_title.entry-title { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.25; margin: 0 0 1.5rem; } .woocommerce-product-details__short-description { border: 1px solid #ece7db; border-radius: 10px; overflow: hidden; } .woocommerce-product-details__short-description p { display: flex !important; align-items: baseline; gap: 10px; margin: 0 !important; padding: .85rem 1.1rem; font-size: .98rem; line-height: 1.5; border-bottom: 1px solid #f2eee2; } .woocommerce-product-details__short-description p:last-child { border-bottom: none; } .woocommerce-product-details__short-description p strong { color: #1a1a1a; font-weight: 600; white-space: nowrap; } .product_meta { margin-top: 1.5rem !important; padding-top: 1.25rem !important; border-top: 1px solid #ece7db; } .product_meta span.posted_in { display: flex !important; flex-flow: row wrap !important; align-items: center !important; gap: .4rem !important; font-size: 0 !important; line-height: normal !important; } .product_meta span.posted_in::before { content: "Categories:"; display: inline-block; font-size: .9rem; margin-right: .2rem; } .product_meta span.posted_in a { display: inline-flex !important; align-items: center !important; float: none !important; width: auto !important; height: auto !important; padding: .5rem .7rem !important; margin: 0 !important; border: 1px solid #e7e2d8; border-radius: 999px; font-size: .82rem !important; text-decoration: none !important; transition: background .2s ease, border-color .2s ease, color .2s ease; } .product_meta span.posted_in a:hover { background: #c9a24a; border-color: #c9a24a; color: #fff; } /* Related Products */ .related.products { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; margin: 0 0 3rem !important; padding: 2.5rem 0 0 !important; border-top: 1px solid #ece7db; box-sizing: border-box; } .related.products > h2 { width: min(1200px, calc(100% - 3rem)); margin: 0 auto 2rem !important; padding: 0; font-size: 1.7rem; box-sizing: border-box; } .related.products ul.products, .related.products ul.products.columns-4 { width: min(1200px, calc(100% - 3rem)); max-width: 1200px; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 2rem !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box; } .related.products ul.products li.product, .related.products ul.products li.product.first, .related.products ul.products li.product.last { float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; clear: none !important; grid-column: auto !important; grid-row: auto !important; position: static !important; margin: 0 !important; text-align: left !important; } .related.products ul.products::before, .related.products ul.products::after { display: none !important; } .related.products ul.products li.product a.woocommerce-loop-product__link { display: block; } .related.products ul.products li.product img { display: block !important; width: 100% !important; height: 220px !important; max-width: 100% !important; object-fit: cover; background: #faf8f3; transition: opacity .25s ease; padding: 0px; } .related.products ul.products li.product:hover img { opacity: .85; } .related.products ul.products li.product .woocommerce-loop-product__title { padding: 0 !important; font-size: 1rem !important; font-weight: 600; color: #1a1a1a; transition: color .2s ease; } .related.products ul.products li.product:hover .woocommerce-loop-product__title { color: #a9822f; } .related.products ul.products li.product a.button { display: inline-block; margin-top: .5rem; padding: 0; background: none; color: #a9822f; font-weight: 600; font-size: .88rem; border-radius: 0; text-decoration: none; } .related.products ul.products li.product a.button::after { content: " →"; transition: margin-left .2s ease; } .related.products ul.products li.product a.button:hover::after { margin-left: 4px; } /* Tablet */ @media (max-width: 992px) { .woocommerce div.product { grid-template-columns: 1fr; gap: 2rem; } .related.products { width: 100vw !important; margin-left: calc(50% - 50vw) !important; } .related.products ul.products, .related.products ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Mobile */ @media (max-width: 560px) { .woocommerce div.product { gap: 1.5rem; margin-top: 2rem; padding: 0 1rem; } .woocommerce-product-gallery { padding: 1rem; } .product_title.entry-title { font-size: 1.8rem; } .woocommerce-product-details__short-description p { padding: .75rem .9rem; font-size: .92rem; } .related.products { margin-top: 3rem !important; padding-top: 2rem !important; } .related.products > h2 { width: calc(100% - 2rem); font-size: 1.5rem; margin-bottom: 1.5rem !important; } .related.products ul.products, .related.products ul.products.columns-4 { width: calc(100% - 2rem); grid-template-columns: 1fr !important; gap: 2rem !important; } } .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0 auto; padding: 3rem 1rem 1rem; max-width: 1200px; font-size: .98rem; line-height: 1.5; } .woocommerce .woocommerce-breadcrumb a { color: #4a4a4a; text-decoration: none; font-weight: 500; transition: color .2s ease; } .woocommerce .woocommerce-breadcrumb a:hover { color: #a9822f; } .woocommerce .woocommerce-breadcrumb .breadcrumb-separator { color: #c9a24a; } .woocommerce .woocommerce-breadcrumb { text-transform: none; } @media (max-width: 992px) { .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb { margin: 0 1.5rem 1.25rem; } } @media (max-width: 560px) { .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb { margin: 0 1rem 1rem; padding: .65rem .8rem; font-size: .8rem; gap: .3rem; } } .woocommerce-products-header { max-width: 1200px; margin: 0 auto; text-align: center; } .woocommerce .entry-content, .woocommerce .product .entry-summary { margin-top: 0; margin: 0 auto; width: 100%; max-width: 1200px; padding-bottom: 1px; } .woocommerce-products-header__title { margin: 0 0 1rem !important; font-size: clamp(2rem, 4vw, 2.8rem) !important; line-height: 1.2; color: #1a1a1a; font-weight: 600; } .woocommerce-products-header__title::after { content: ""; display: block; width: 60px; height: 3px; margin: 1rem auto 2rem; background: #c9a24a; border-radius: 3px; } #product-category-description { max-width: 1200px; margin: 0 auto 2.5rem; } #nav-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; } #nav-buttons .one-fourth { width: auto !important; float: none !important; margin: 0 !important; } #nav-buttons .button { display: flex; align-items: center; justify-content: center; min-height: 54px; width: 100%; padding: .8rem 1rem !important; margin: 0 !important; background: #fff !important; color: #333 !important; border: 1px solid #e5dfd2 !important; border-radius: 8px !important; font-size: .88rem; font-weight: 600; line-height: 1.35; text-align: center; text-decoration: none !important; box-sizing: border-box; transition: all .25s ease; } #nav-buttons .button:hover { background: #c9a24a !important; border-color: #c9a24a !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); } #product-category-description > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0 !important; padding: 1.25rem 1.5rem !important; list-style: none !important; background: #faf8f3; border: 1px solid #ece7db; border-radius: 10px; box-sizing: border-box; } #product-category-description > ul li { margin: 0 !important; padding: .25rem 0 !important; color: #555; font-size: .88rem; line-height: 1.5; } #product-category-description > ul li strong { display: inline-block; min-width: 32px; color: #a9822f; font-weight: 700; } .woocommerce-result-count { margin: 0 !important; padding: 1rem 0; color: #666; font-size: .9rem; } .woocommerce-ordering { margin: 0 0 1.5rem !important; } .woocommerce-ordering select { min-width: 190px; padding: .7rem 2.5rem .7rem .9rem; color: #444; background: #fff; border: 1px solid #e2ddd2; border-radius: 7px; font-size: .88rem; cursor: pointer; outline: none; } .woocommerce-ordering select:focus { border-color: #c9a24a; } .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2rem !important; width: 100%; padding: 0 !important; list-style: none !important; box-sizing: border-box; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; } .woocommerce ul.products li.product, .woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last { float: none !important; clear: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 1.25rem !important; position: static !important; text-align: left; background: #fff; border: 1px solid #ece7db; border-radius: 12px; overflow: hidden; box-sizing: border-box; transition: transform .25s ease, box-shadow .25s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.08); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; color: inherit; text-decoration: none; } .woocommerce ul.products li.product img { display: block !important; width: 100% !important; height: 270px !important; max-width: 100% !important; margin: 0 !important; object-fit: contain; background: #faf8f3; box-sizing: border-box; transition: transform .35s ease; } .woocommerce ul.products li.product:hover img { transform: scale(1.03); } .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 1rem 1rem .35rem !important; padding: 0 !important; color: #1a1a1a; font-size: 1rem !important; font-weight: 600; line-height: 1.4; transition: color .2s ease; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: #a9822f; } .woocommerce ul.products li.product a.button { display: inline-block; margin: .2rem 1rem 0 !important; padding: 0 !important; background: none !important; color: #a9822f !important; border: none !important; font-size: .85rem; font-weight: 600; line-height: 1.5; text-decoration: none !important; box-shadow: none !important; } .woocommerce ul.products li.product a.button::after { content: " →"; transition: margin-left .2s ease; } .woocommerce ul.products li.product a.button:hover { background: none !important; color: #8d6d25 !important; } .woocommerce ul.products li.product a.button:hover::after { margin-left: 4px; } .woocommerce nav.woocommerce-pagination { margin: 3rem 0 4rem; text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; align-items: center; gap: .4rem; margin: 0 !important; padding: 0 !important; border: none !important; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { float: none !important; margin: 0 !important; border: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .7rem; color: #555; background: #fff; border: 1px solid #e5dfd2; border-radius: 7px; font-size: .88rem; text-decoration: none; box-sizing: border-box; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { color: #fff; background: #c9a24a; border-color: #c9a24a; } @media (max-width: 992px) { .woocommerce-products-header, #product-category-description { margin-left: 1.5rem; margin-right: 1.5rem; } #nav-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .woocommerce ul.products li.product img { height: 260px !important; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { float: right; } } @media (max-width: 560px) { .woocommerce-products-header, #product-category-description { margin-left: 1rem; margin-right: 1rem; } .woocommerce-products-header__title { font-size: 1.9rem !important; } #nav-buttons { grid-template-columns: 1fr; gap: .75rem; } #nav-buttons .button { min-height: 48px; } #product-category-description > ul { grid-template-columns: 1fr; padding: 1rem !important; gap: .4rem; } .woocommerce-result-count { padding: .75rem 0; } .woocommerce-ordering { margin-bottom: 1.25rem !important; } .woocommerce-ordering select { width: 100%; } .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .woocommerce ul.products li.product img { height: 280px !important; } .woocommerce nav.woocommerce-pagination { margin: 2rem 0 3rem; } } .oxy-tabs-contents-content-hidden { display: none; } /* Image card */ .wp-block-column:has(> .wp-images) { padding: 0 0 24px; overflow: hidden; background: #fff; border: 1px solid #e3e9ee; border-radius: 16px; box-shadow: 0 6px 24px rgba(20, 45, 65, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* Consistent image sizing */ .wp-block-column > .wp-images { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; } /* Heading */ .wp-block-column:has(> .wp-images) > h3.wp-block-heading { margin: 22px 24px 10px; color: #173b50; font-size: clamp(21px, 2vw, 26px); font-weight: 700; line-height: 1.3; } /* Description */ .wp-block-column:has(> .wp-images) > p.wp-block-paragraph { margin: 0 24px; color: #596873; font-size: 16px; line-height: 1.7; } /* Hover effect */ @media (hover: hover) { .wp-block-column:has(> .wp-images):hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(20, 45, 65, 0.14); } } /* Mobile spacing */ @media (max-width: 600px) { .wp-block-column:has(> .wp-images) > h3.wp-block-heading { margin: 18px 20px 8px; } .wp-block-column:has(> .wp-images) > p.wp-block-paragraph { margin: 0 20px; } } @media (prefers-reduced-motion: reduce) { .wp-block-column:has(> .wp-images) { transition: none; transform: none; } } ol.flex-control-nav.flex-control-thumbs img { max-height: 120px; min-width: 100px; object-fit: cover; height: 100% !important; } .custom-contact-form p { margin: 0; padding: 0; } .custom-contact-form br { display: none; } .custom-contact-form .wpcf7-form-control-wrap { display: block; } .custom-contact-form .custom-field { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 50px; margin: 0; padding: 12px; border: 1px solid #92929c; border-radius: 1px; background: #f7f7fb; color: #111; font: 16px Arial, sans-serif; box-shadow: none; } .custom-contact-form textarea.custom-message { height: 160px; min-height: 160px; resize: vertical; } .custom-contact-form .custom-field:focus-visible { outline: 2px solid #3186c7; outline-offset: 2px; } .custom-contact-form .custom-submit { height: 48px; padding: 0 30px; border: 0; border-radius: 3px; background: #3186c7; color: #fff; font: 600 16px Arial, sans-serif; cursor: pointer; } .sg-enquiry { font-family: inherit; font-size: 16px; line-height: 1.5; } .sg-enquiry p { margin: 0; padding: 0; } .sg-enquiry br { display: none; } .sg-enquiry .sg-field { margin-bottom: 52px; } .sg-enquiry label { display: block; margin: 0; } .sg-enquiry .sg-label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; } .sg-enquiry .sg-required { color: #e53935; } .sg-enquiry .wpcf7-form-control-wrap { display: block; } .sg-enquiry input[type="text"], .sg-enquiry input[type="email"], .sg-enquiry input[type="tel"] { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 50px; margin: 0; padding: 12px 15px; border: 1px solid #92929c; border-radius: 1px; background: #f7f7fb; color: #222; font: inherit; box-shadow: none; } .sg-enquiry input::placeholder { color: #777; opacity: 1; } .sg-enquiry input:focus-visible { outline: 2px solid #3186c7; outline-offset: 3px; } .sg-enquiry .sg-interests { min-width: 0; margin: 0; padding: 0; border: 0; } .sg-enquiry .sg-interests legend { float: none; width: 100%; margin: 0 0 5px; padding: 0; color: #000; font-size: 16px; font-weight: 500; } .sg-enquiry .wpcf7-checkbox .wpcf7-list-item { display: block; margin: 0 0 8px; } .sg-enquiry .wpcf7-checkbox label { display: flex; align-items: center; gap: 9px; font-weight: 400; cursor: pointer; } .sg-enquiry input[type="checkbox"] { appearance: auto; flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #3186c7; } .sg-enquiry input.sg-submit { appearance: none; width: auto; height: 48px; margin: 0; padding: 0 30px; border: 0; border-radius: 4px; background: #3186c7; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .sg-enquiry input.sg-submit:hover { background: #246da4; } .sg-enquiry .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; } .sg-project-form { font-family: inherit; font-size: 14px; line-height: 1.5; color: #000; } .sg-project-form .sg-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 54px; row-gap: 64px; } .sg-project-form .sg-project-full { grid-column: 1 / -1; } .sg-project-form p { margin: 0; padding: 0; } .sg-project-form br { display: none; } .sg-project-form label { display: block; min-width: 0; margin: 0; } .sg-project-form .sg-project-label { display: block; margin-bottom: 10px; font-weight: 500; } .sg-project-form .sg-project-label > span { color: #e53935; } .sg-project-form .wpcf7-form-control-wrap { display: block; } .sg-project-form input[type="text"], .sg-project-form input[type="tel"], .sg-project-form input[type="email"], .sg-project-form textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 45px; margin: 0; padding: 10px 12px; border: 1px solid #92929c; border-radius: 1px; background: #f7f7fb; color: #222; font: inherit; font-size: 16px; box-shadow: none; } .sg-project-form textarea { height: 144px; min-height: 144px; resize: vertical; } .sg-project-form input:focus-visible, .sg-project-form textarea:focus-visible { outline: 2px solid #3186c7; outline-offset: 3px; } .sg-project-form input.sg-project-submit { appearance: none; width: auto; height: 48px; margin: 0; padding: 0 30px; border: 0; border-radius: 4px; background: #3186c7; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .sg-project-form input.sg-project-submit:hover { background: #246da4; } .sg-project-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; } @media (max-width: 600px) { .sg-project-form .sg-project-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } } /* ========================================================================== 15. HERO TEXT BOX — customer request 2026-10: photos in full color, no dark tone over them; headline/subhead sit flush-left in a solid dark box. Change --sg-hero-box to switch the box color (black or purple). ========================================================================== */ :root { --sg-hero-box: rgba(96,48,144,0.94); } /* purple (customer choice). Black was rgba(16,13,22,0.92) */ /* Interior page heroes */ body .wp-block-cover.sg-pagehero::after { background: none !important; } body .wp-block-cover.sg-pagehero .wp-block-cover__inner-container > .wp-block-group { background: var(--sg-hero-box); box-sizing: border-box; width: auto; max-width: 560px; margin-left: max(1rem, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; padding: 2rem 2.25rem !important; border-left: 4px solid #f0c000; text-align: left; } body .wp-block-cover.sg-pagehero .wp-block-cover__inner-container > .wp-block-group > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left; } body .wp-block-cover.sg-pagehero .wp-block-buttons { justify-content: flex-start; } /* Homepage hero */ body section.hero { /* background: url("/wp-content/uploads/2026/10/Sarasota-Glass-impact-resistant-doors-windows-3.webp") center center / cover no-repeat !important; */ background-color: #100d16 !important; align-items: center; } body section.hero .hero-inner { box-sizing: border-box; width: auto; max-width: 640px; margin: 2rem auto 2rem max(1rem, calc((100% - 1180px) / 2)); padding: 2.25rem 2.5rem; background: var(--sg-hero-box); border-left: 4px solid #f0c000; text-align: left; } @media (max-width: 700px) { body .wp-block-cover.sg-pagehero .wp-block-cover__inner-container > .wp-block-group, body section.hero .hero-inner { margin-left: 1rem !important; margin-right: 1rem !important; max-width: calc(100% - 2rem); padding: 1.5rem !important; } } /* Purple box: keep accents readable (purple-on-purple would vanish) */ body section.hero .hero-inner h1 span, body .wp-block-cover.sg-pagehero .wp-block-group .has-purple-color { color: #f0c000 !important; } body .wp-block-cover.sg-pagehero .wp-block-group .is-style-outline-purple .wp-block-button__link, body .wp-block-cover.sg-pagehero .wp-block-group .is-style-outline .wp-block-button__link { color: #fff !important; border-color: #fff !important; background: transparent !important; } /****Additional CSS****/ :root{ --navy:#324158; --blue:#3D9BE9; --bg:#ffffff; } /* DOCUMENT LIBRARY */ .sg-documents { --docs-purple: #452461; --docs-purple-dark: #301842; --docs-muted: #686174; --docs-border: #e7e1ed; --docs-tint: #f8f5fb; box-sizing: border-box; padding: 64px 24px; background: #ffffff; color: #292333; } .sg-documents *, .sg-documents *::before, .sg-documents *::after { box-sizing: border-box; } /* Keep headings and document grids aligned */ .sg-documents > h2, .sg-documents > h3, .sg-documents > ul { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; } /* Main category headings */ .sg-documents > h2 { position: relative; margin-top: 64px; margin-bottom: 26px; padding-top: 32px; border-top: 1px solid var(--docs-border); color: var(--docs-purple-dark); font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -0.6px; } .sg-documents > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Product family headings */ .sg-documents > h3 { display: flex; align-items: center; gap: 14px; margin-top: 36px; margin-bottom: 18px; color: var(--docs-purple); font-size: 20px; line-height: 1.35; font-weight: 700; } .sg-documents > h3::before { content: ""; width: 5px; height: 22px; flex: 0 0 5px; border-radius: 6px; background: var(--docs-purple); } .sg-documents > h3::after { content: ""; height: 1px; flex: 1; background: var(--docs-border); } /* Document grids */ .sg-documents > ul.wp-block-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin-top: 0; margin-bottom: 0; list-style: none; } .sg-documents > ul.wp-block-list > li { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; } /* Clickable document card */ .sg-documents > ul.wp-block-list > li > a { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 80px; padding: 0px 42px 0px 20px; border: 1px solid var(--docs-border); border-radius: 14px; background: #ffffff; box-shadow: 0 3px 12px rgba(48, 24, 66, 0.025); color: #32283c; font-size: 15px; font-weight: 600; line-height: 1.55; text-align: left; text-decoration: none; overflow-wrap: anywhere; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease; } /* SVG PDF icon — no icon library or JavaScript required */ .sg-documents > ul.wp-block-list > li > a::before { content: ""; display: block; flex: 0 0 48px; width: 48px; height: 58px; border-radius: 10px; background-color: var(--docs-tint); background-position: center; background-repeat: no-repeat; background-size: 34px 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='42' viewBox='0 0 34 42' fill='none'%3E%3Cpath d='M8 2h13l9 9v27a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z' fill='%23ffffff' stroke='%23452461' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M21 2v9h9' fill='%23eee6f5'/%3E%3Cpath d='M21 2v9h9' stroke='%23452461' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 17h12M12 21h8' stroke='%23b5a2c5' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='1' y='25' width='29' height='13' rx='3' fill='%23452461'/%3E%3Ctext x='15.5' y='34.2' text-anchor='middle' font-family='Arial,sans-serif' font-size='8' font-weight='700' letter-spacing='.7' fill='%23ffffff'%3EPDF%3C/text%3E%3C/svg%3E"); } /* Arrow indicating an actionable link */ .sg-documents > ul.wp-block-list > li > a::after { content: ""; position: absolute; right: 18px; top: calc(50% - 8px); width: 16px; height: 16px; opacity: 0.6; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23452461' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform 180ms ease, opacity 180ms ease; } /* Hover states */ @media (hover: hover) { .sg-documents > ul.wp-block-list > li > a:hover { transform: translateY(-3px); border-color: #b9a3ca; background: #fcfaff; box-shadow: 0 10px 24px rgba(48, 24, 66, 0.09); color: var(--docs-purple); } .sg-documents > ul.wp-block-list > li > a:hover::after { transform: translateX(3px); opacity: 1; } } /* Keyboard accessibility */ .sg-documents > ul.wp-block-list > li > a:focus-visible { outline: 3px solid var(--docs-purple); outline-offset: 4px; border-color: var(--docs-purple); } /* Tablet */ @media (max-width: 1024px) { .sg-documents > ul.wp-block-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile */ @media (max-width: 640px) { .sg-documents { padding: 40px 18px; } .sg-documents > ul.wp-block-list { grid-template-columns: 1fr; gap: 12px; } .sg-documents > h2 { margin-top: 44px; margin-bottom: 20px; padding-top: 26px; font-size: 25px; } .sg-documents > h3 { margin-top: 28px; font-size: 18px; } .sg-documents > ul.wp-block-list > li > a { min-height: 100px; padding: 18px 40px 18px 16px; gap: 14px; } .sg-documents > ul.wp-block-list > li > a::before { flex-basis: 44px; width: 44px; height: 54px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .sg-documents > ul.wp-block-list > li > a, .sg-documents > ul.wp-block-list > li > a::after { transition: none; transform: none; } } *{box-sizing:border-box;} html,body{margin:0; overflow-x:clip;} body{ background:var(--bg); font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--navy); } /* */ .wp-block-cover.sg-pagehero { position: relative; } span.wpcf7-form-control-wrap input { border: 1px solid #c4c4c4; } .wp-block-cover.sg-pagehero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); pointer-events: none; } /* */ .sc-jQrDum.dMxEJG div { color: #000; } .sc-jUosCB.iegOs { color: #000; } .sc-fvxzrP.geRNns { color: #000; } .dxQEgo { gap: 3px; text-align: left !important; } .hero-trust { font-family: 'Work Sans',sans-serif; font-weight: 700; font-size: 1.05rem; margin: 1rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; } .sc-dlVxhl.kORBdL { color: #000; } .sc-hGPBjI.iqKFkK.rwlBrandResponseMessage { color: #000; } .sc-ieecCq.fNUaxr { color: #000; } .sc-iwjdpV.dhrhiq { color: #000; } /* */ .social-row { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 12px !important; } .social-row a, .social-row a::before, .social-row a::after { box-sizing: border-box !important; } .social-row a::before, .social-row a::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; } .social-row a > i, .social-row a > span, .social-row a > svg { display: none !important; } .social-row a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #8c4bcc !important; border-radius: 50% !important; background-color: #ffffff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; color: #8c4bcc !important; text-decoration: none !important; overflow: hidden !important; box-shadow: none !important; transform: none !important; transition: background-color .25s ease, border-color .25s ease, transform .25s ease !important; } .social-row a.facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c4bcc' d='M14.5 8H17V4.2c-.45-.06-1.98-.2-3.77-.2C9.49 4 7 6.3 7 10.5V13H3v4h4v7h4.5v-7h3.5l.5-4h-4v-2.1c0-1.15.31-1.9 2-1.9z'/%3E%3C/svg%3E") !important; } .social-row a.instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c4bcc' stroke-width='2'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%238c4bcc' stroke='none'/%3E%3C/svg%3E") !important; } .social-row a.tiktok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c4bcc' d='M15.2 3h3.1c.25 1.7 1.2 3.05 2.7 3.7v3.1c-1.2-.05-2.4-.4-3.4-1.05v6.65c0 3.65-2.65 5.6-5.65 5.6A5.95 5.95 0 0 1 6 15.05c0-3.25 2.55-5.7 5.75-5.7.35 0 .7.04 1.05.1v3.15a2.7 2.7 0 0 0-1.05-.2c-1.3 0-2.4 1.05-2.4 2.45 0 1.35 1.05 2.4 2.35 2.4 1.35 0 2.45-.85 2.45-2.6V3z'/%3E%3C/svg%3E") !important; } .social-row a.youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238c4bcc' d='M21.58 7.19a2.75 2.75 0 0 0-1.94-1.95C17.93 4.75 12 4.75 12 4.75s-5.93 0-7.64.49a2.75 2.75 0 0 0-1.94 1.95A28.2 28.2 0 0 0 1.94 12a28.2 28.2 0 0 0 .48 4.81 2.75 2.75 0 0 0 1.94 1.95c1.71.49 7.64.49 7.64.49s5.93 0 7.64-.49a2.75 2.75 0 0 0 1.94-1.95A28.2 28.2 0 0 0 22.06 12a28.2 28.2 0 0 0-.48-4.81z'/%3E%3Cpath fill='white' d='M10 8.7v6.6l5.7-3.3z'/%3E%3C/svg%3E") !important; } .social-row a:hover { background-color: #8c4bcc !important; border-color: #8c4bcc !important; transform: translateY(-3px) !important; } .social-row a.facebook:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M14.5 8H17V4.2c-.45-.06-1.98-.2-3.77-.2C9.49 4 7 6.3 7 10.5V13H3v4h4v7h4.5v-7h3.5l.5-4h-4v-2.1c0-1.15.31-1.9 2-1.9z'/%3E%3C/svg%3E") !important; } .social-row a.instagram:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='white' stroke='none'/%3E%3C/svg%3E") !important; } .social-row a.tiktok:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M15.2 3h3.1c.25 1.7 1.2 3.05 2.7 3.7v3.1c-1.2-.05-2.4-.4-3.4-1.05v6.65c0 3.65-2.65 5.6-5.65 5.6A5.95 5.95 0 0 1 6 15.05c0-3.25 2.55-5.7 5.75-5.7.35 0 .7.04 1.05.1v3.15a2.7 2.7 0 0 0-1.05-.2c-1.3 0-2.4 1.05-2.4 2.45 0 1.35 1.05 2.4 2.35 2.4 1.35 0 2.45-.85 2.45-2.6V3z'/%3E%3C/svg%3E") !important; } .social-row a.youtube:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21.58 7.19a2.75 2.75 0 0 0-1.94-1.95C17.93 4.75 12 4.75 12 4.75s-5.93 0-7.64.49a2.75 2.75 0 0 0-1.94 1.95A28.2 28.2 0 0 0 1.94 12a28.2 28.2 0 0 0 .48 4.81 2.75 2.75 0 0 0 1.94 1.95c1.71.49 7.64.49 7.64.49s5.93 0 7.64-.49a2.75 2.75 0 0 0 1.94-1.95A28.2 28.2 0 0 0 22.06 12a28.2 28.2 0 0 0-.48-4.81z'/%3E%3Cpath fill='%238c4bcc' d='M10 8.7v6.6l5.7-3.3z'/%3E%3C/svg%3E") !important; } /* */ /* filler so the sticky effect has room to demonstrate scrolling */ .spacer{ height:60px; } /* ============ THE SHOWCASE ============ */ .showcase{ position:relative; /* tall enough that scrolling through it drives the reveal; increase this if you add more products */ height:280vh; } .showcase-video-wrap{ position:sticky; top:0; height:100vh; overflow:hidden; /* fallback in case the video is slow to load or fails */ background: radial-gradient(90% 70% at 20% 15%, rgba(61,155,233,0.16), transparent 60%), radial-gradient(110% 90% at 85% 90%, rgba(61,155,233,0.10), transparent 55%), linear-gradient(160deg,#1c2635 0%, #263447 55%, #324158 100%); } .showcase-video{ position:absolute !important; inset:0 !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; margin:0 !important; } /* soft vignette so cards read clearly against the background, matching how the reference clip darkens toward the edges */ .showcase-video-wrap::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 45%, transparent 40%, rgba(10,14,20,0.45) 100%); pointer-events:none; } .showcase-heading{ position:absolute; top:68px; left:0; right:0; z-index:5; color:#fff; text-align:center; } .eyebrow{ color:var(--blue); font-weight:700; letter-spacing:0.06em; font-size:12.5px; text-transform:uppercase; margin:0 0 12px; } .showcase-heading h2{ font-size:clamp(26px,3.2vw,38px); line-height:1.2; margin:0; font-weight:700; letter-spacing:-0.01em; } .showcase-heading h2 span{color:var(--blue);} /* each card sits inside a full-width sticky "slot" pinned at the same vertical offset — the slot handles vertical pinning, and flexbox handles horizontal placement (left/center/right). Note: position:sticky's left/right properties are a SHIFT from the element's normal static position, not a distance from the viewport edge like position:absolute — using them directly for left/center/right placement was the bug that broke card 3. */ .card-slot{ position:sticky; top:22vh; width:100%; display:flex; pointer-events:none; } /* keeps the three cards within a fixed content width so their spacing stays consistent instead of growing wider on large monitors — the vw-based padding alone let gaps scale with the viewport, which is why they spread out on wide screens */ .cards-container{ max-width:1200px; margin:0 auto; } .card-slot[data-align="left"]{ justify-content:flex-start; padding-left:12px; } .card-slot[data-align="center"]{ justify-content:center; } .card-slot[data-align="right"]{ justify-content:flex-end; padding-right:12px; } .product-card{ pointer-events:auto; width:min(380px, 31%); background:rgba(255,255,255,0.94); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.5); border-radius:12px; overflow:hidden; box-shadow: 0 30px 60px rgba(10,14,20,0.35), 0 2px 0 rgba(255,255,255,0.6) inset; transition:box-shadow 0.3s ease; /* no CSS transition on transform on purpose — it's set directly from scroll position every frame (scrubbed), so the card's speed always matches the user's scroll speed exactly, in either direction, instead of racing ahead on a fixed timer */ will-change:transform, opacity; } .product-card:hover{ box-shadow: 0 34px 68px rgba(10,14,20,0.42), 0 2px 0 rgba(255,255,255,0.6) inset; } .card-thumb{ width:100%; height:220px; object-fit:cover; display:block; } .card-body{ padding:22px 22px 26px; } .card-index{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(61,155,233,0.12); color:var(--blue); font-size:12px; font-weight:700; margin-bottom:14px; } .card-title{ font-size:18.5px; font-weight:700; margin:0 0 4px; color:var(--navy); letter-spacing:-0.01em; } .card-divider{ width:34px; height:2px; background:var(--blue); border:0; margin:12px 0 14px; } .card-desc{ font-size:14px; line-height:1.62; color:#5b6675; margin:0 0 18px; } .card-link{ display:inline-flex; align-items:center; gap:6px; color:var(--navy); font-size:13.5px; font-weight:700; text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:3px; transition:color 0.2s ease, gap 0.2s ease; } .card-link:hover{ color:var(--blue); gap:10px; } @media (max-width:760px){ .showcase-video-wrap { height: 30vh; } .cards-container{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:0 20px; } /* on mobile there's no room to spread cards left/center/right, so drop the sticky/overlap trick entirely and let them stack normally, one after another, in document flow */ .card-slot{ position:static; top:auto; width:100%; justify-content:center; padding-left:0; padding-right:0; } .product-card{ width:min(400px, 100%); } .showcase-heading{ padding:0 24px; top:40px; } } /* ============ WORDPRESS THEME OVERRIDE GUARD ============ Many WP themes apply their own global color to headings/links (h2, h3, a) with !important, which beats our plain rules above. Everything below is scoped under .glasso-showcase-embed and forced to !important so it always wins, regardless of theme. */ .glasso-showcase-embed .showcase-heading .eyebrow{ color:var(--blue) !important; } .glasso-showcase-embed .showcase-heading h2, .glasso-showcase-embed .showcase-heading h2 *{ color:#ffffff !important; } .glasso-showcase-embed .showcase-heading h2 span{ color:var(--blue) !important; } .glasso-showcase-embed .product-card .card-title{ color:var(--navy) !important; } .glasso-showcase-embed .product-card .card-desc{ color:#5b6675 !important; } .glasso-showcase-embed .product-card .card-link, .glasso-showcase-embed .product-card .card-link:visited{ color:var(--navy) !important; } .glasso-showcase-embed .product-card .card-link:hover{ color:var(--blue) !important; } /* ========================================================================== SARASOTA GLASS & MIRROR — HOMEPAGE SECTIONS CSS Covers: Video Reviews, Certification Badges, Map/Hours, Location Tabs ========================================================================== */ article.product-card p:empty { display: none; } /* -------------------------------------------------------------------------- 1. VIDEO SECTION (section-161-1629) — "10 Reasons Why..." -------------------------------------------------------------------------- */ #section-161-1629 { padding: 60px 20px; text-align: center; } /* ============================ SOCIAL FOLLOW SECTION Replaces the "3 YouTube video cards" block. Drop this whole thing into a Custom HTML block/widget in that spot, or move the