/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* ========================================================================== Union Grove Family Dental — ported from the live Rooster Grin site, 2026-08-20. See agency/playbooks/bricks-port-live-site.md. WHY THIS IS HERE AND NOT IN THE THEME STYLE The source steps its type scale at 1680 / 1280 / 768 / 600. Bricks' breakpoints are 1279 / 991 / 767 / 478. Rebinding Bricks' breakpoints globally to match would change how every element's responsive controls behave; carrying the source's own media queries here is the same technique the build playbook uses for section CSS — keep the block whole, rebind the selectors. Base (desktop) sizes stay in the theme style. Selectors are `:root`-prefixed (0,1,1), and that prefix is load-bearing: Bricks prints its theme-style CSS into the head AFTER this stylesheet's (measured: offset 14195 vs 13017). Drop the prefix and the theme style's own bare `h1` wins on source order, and the entire scale stops working — every heading sticks at its desktop size. SCOPED TO THE PORTED SECTIONS. These rules used to target bare `h1`..`h4`, which meant they also hit Bricks-native components — whose element styles emit as `.brxe-` (0,1,0) and lose to `:root h2` (0,1,1). The Inner Page Hero Bar's subtitle is the case in point: set to 23px on the element, it rendered at the h2 scale's 54px on wide screens. Scoping by the section class the port actually uses means native components are simply not matched, and manage their own type without having to out-specify anything. ========================================================================== */ /* letter-spacing in em so it tracks the responsive size (source: 0.03125em / 0.0625em). Bricks' theme style stores letter-spacing in px only. */ :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h2 { letter-spacing: 0.03125em; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h3 { letter-spacing: 0.0625em; line-height: normal; } @media screen and (min-width: 1680px) { :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h1 { font-size: 64px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h2 { font-size: 54px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h3 { font-size: 28px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h4 { font-size: 28px; } } @media screen and (max-width: 1280px) { :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h1 { font-size: 44px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h2 { font-size: 38px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h3 { font-size: 20px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h4 { font-size: 20px; } } @media screen and (max-width: 768px) { :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h1 { font-size: 34px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h2 { font-size: 30px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h3 { font-size: 18px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h4 { font-size: 18px; } } @media screen and (max-width: 600px) { :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h1 { font-size: 28px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h2 { font-size: 25px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h3 { font-size: 16px; } :root :is(.block-accordion, .block-appt-banner, .block-contact-form, .block-gallery, .block-icon-banner, .block-image-text, .block-left-right, .block-map, .block-quote-banner, .block-team-members, .block-testimonials, .block-text, .hero-home) h4 { font-size: 16px; } } /* Buttons — the theme style carries face, text, radius and padding. The drop-shadow and the :active state have no theme-style control. Source: filter: drop-shadow(4px 4px 4px rgba(61,95,57,.6)), and an inset shadow on hover. Matched exactly, including the odd 4px offset. */ :root .bricks-button[class*="primary"] { filter: drop-shadow(4px 4px 4px rgba(61, 95, 57, 0.6)); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } :root .bricks-button[class*="primary"]:hover { box-shadow: inset 4px 4px 4px rgba(51, 51, 51, 0.3); filter: drop-shadow(4px 4px 4px rgba(61, 95, 57, 0.35)); } :root .bricks-button[class*="primary"]:active { background-color: var(--bricks-color-df6400); /* Sage */ } /* Hero title and nav/footer text are #333 in the source, while section headings and body copy inherit black. Not a mistake to normalise — the fidelity contract says match. Ink is applied per component, not globally. */ .ug-ink, .ug-ink :is(h1, h2, h3, h4, p, a, li) { color: var(--bricks-color-2f1d7d); } /* Footer band */ .ug-footer { background-color: var(--bricks-color-92c054); padding: 75px 0 0; } .ug-footer, .ug-footer :is(a, li, p, h3, h4) { color: var(--bricks-color-2f1d7d); } /* Screen-reader-only. Used for the h1 on pages the source ships without one (payment-plans) — visible copy is never invented, but the document still needs a heading. */ .ug-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Inner Page Hero Bar — empty-element guards. These live here rather than as element custom CSS on the component: a save from the Bricks builder rewrites the component from whatever the open tab held, which silently drops custom CSS written by script. Stylesheet rules are out of that blast radius. /payment-plans ships no hero title in the CMS, and about/contact/faq/ payment-plans have no hero CTA. Bricks still renders the elements, which showed as an empty

and a blank cream pill. display:none also removes the empty heading from the accessibility tree. */ .brxe-vqkdaq:empty { display: none; } .brxe-xsfadc:empty { display: none; } /* CTA Appointment Banner — empty subtitle guard. Only /patient-info has a subtitle; the other six banners leave the property blank and Bricks still renders the

. Zero-height, but an empty heading in the accessibility tree. Same reason as the hero bar's guards: kept in the stylesheet so a builder save on the component cannot drop it. */