/** * Theme Utilities * * Consolidated frontend styles for skip link, quote/pullquote blocks, * and hero header fallback. Extracted from inline PHP to improve * CSP compatibility and cacheability. */ /* ── Skip link ─────────────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 999999; } .skip-link:focus { left: 0; top: 0; width: auto; height: auto; padding: 1rem 1.5rem; background: var(--wp--preset--color--surface, #fff); color: var(--wp--preset--color--text, #1a1a1a); font-size: var(--wp--preset--font-size--sm, .875rem); font-weight: 600; text-decoration: none; box-shadow: var(--wp--preset--shadow--md); outline: 2px solid var(--wp--preset--color--accent, #FF6B35); outline-offset: 2px; } /* ── Quote & pullquote ─────────────────────────────────────────────────────── */ .wp-block-quote { border-left: none; padding-left: 0; } .wp-block-quote p { margin: 0 0 .5em; } .wp-block-quote cite, .wp-block-quote footer { display: block; margin-top: var(--wp--preset--spacing--sm, .75rem); font-family: var(--wp--preset--font-family--body, "Untitled Sans", system-ui, sans-serif); font-style: normal; font-weight: 700; font-size: var(--wp--preset--font-size--sm, .875rem); color: var(--wp--preset--color--text, #1a1a1a); } .wp-block-quote.is-style-large, .wp-block-quote.is-large { padding-left: 0; border-left: none; } .wp-block-quote.is-style-large p, .wp-block-quote.is-large p { font-size: var(--wp--preset--font-size--lg, 1.5rem); } .wp-block-quote.is-style-large cite, .wp-block-quote.is-large cite { font-size: var(--wp--preset--font-size--base, 1rem); } .wp-block-pullquote { border-top: none; border-bottom: none; padding: var(--wp--preset--spacing--xl, 3rem) 0; } .wp-block-pullquote blockquote { border-left: none; padding-left: 0; text-align: center; } .wp-block-pullquote blockquote p { font-family: var(--wp--preset--font-family--serif, "Tiempos Text", Georgia, serif); font-size: var(--wp--preset--font-size--xl, 2rem); line-height: 1.4; } .wp-block-pullquote cite { font-family: var(--wp--preset--font-family--body, "Untitled Sans", system-ui, sans-serif); font-style: normal; font-weight: 700; font-size: var(--wp--preset--font-size--sm, .875rem); color: var(--wp--preset--color--text-muted, #666); } /* ── Carousel pattern ─────────────────────────────────────────────────────── */ .agoodsite-carousel { position: relative; scroll-padding-inline: var(--wp--preset--spacing--md, 1.5rem); scrollbar-width: none; } .agoodsite-carousel::-webkit-scrollbar { display: none; } .agoodsite-carousel .carousel-item { min-width: 280px; } /* Fade edges to hint at scrollability */ .agoodsite-carousel::before, .agoodsite-carousel::after { content: ""; position: sticky; top: 0; z-index: 1; flex-shrink: 0; width: 2rem; height: 100%; pointer-events: none; } .agoodsite-carousel::before { left: 0; background: linear-gradient(to right, var(--wp--preset--color--surface, #fafafa), transparent); } .agoodsite-carousel::after { right: 0; background: linear-gradient(to left, var(--wp--preset--color--surface, #fafafa), transparent); } /* ── Hero header fallback ──────────────────────────────────────────────────── */ /* * Makes the header fixed + transparent on pages with a fullscreen hero. * JS (StickyHeader.js) adds .is-scrolled once the user scrolls past the hero. * Child themes that implement their own contrast approach should add * .has-hero-header to to opt out of the mix-blend-mode fallback. */ :is(body.home, body.single-portfolio) .wp-site-blocks { padding-top: 0 !important; } :is(body.home, body.single-portfolio) .wp-site-blocks > :is(.wp-block-template-part.is-sticky-header, header.wp-block-template-part) { position: fixed !important; top: var(--sticky-top-offset, 0px) !important; left: 0; right: 0; z-index: 100; backface-visibility: hidden; transform: translate3d(0, 0, 0); background: transparent !important; border: 0 !important; box-shadow: none !important; margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } :is(body.home, body.single-portfolio) .wp-site-blocks .site-header.site-header--mega:not(.is-scrolled) { background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(body.home, body.single-portfolio) .wp-site-blocks .site-header.site-header--mega.is-scrolled { background: var(--wp--preset--color--surface, #fafafa) !important; } :is(body.home, body.single-portfolio) main { margin-top: 0 !important; padding-top: 0 !important; } :is(body.home, body.single-portfolio) main > :first-child { margin-top: 0 !important; } /* WCAG 1.4.11 — focus indicators on transparent headers must be visible against any hero background. Double-ring technique: white outline + dark shadow works against both light and dark backgrounds without knowing the hero colour. */ :is(body.home, body.single-portfolio) .site-header--mega:not(.is-scrolled) :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.85); border-radius: 2px; } /* Contrast fallback: white text via mix-blend-mode:difference adapts against both dark and light hero images without requiring known background colors. Skipped when .has-hero-header is present (child theme handles contrast). */ :is(body.home, body.single-portfolio):not(.has-hero-header) .site-header.site-header--mega:not(.is-scrolled) :is(.wp-block-site-title a, .wp-block-navigation-item__content, .search-autocomplete__trigger, .search-autocomplete__trigger svg) { color: #fff !important; stroke: #fff !important; mix-blend-mode: difference; text-shadow: none !important; } :is(body.home, body.single-portfolio):not(.has-hero-header) .site-header.site-header--mega:not(.is-scrolled) .wp-block-navigation__responsive-container-open svg { fill: #fff !important; mix-blend-mode: difference; } :is(body.home, body.single-portfolio):not(.has-hero-header) .site-header.site-header--mega:not(.is-scrolled) :is(.mobile-nav__hamburger, .mobile-nav__trigger) { color: #fff !important; mix-blend-mode: difference; } :is(body.home, body.single-portfolio):not(.has-hero-header) .site-header.site-header--mega:not(.is-scrolled) .wp-block-navigation__submenu-container { mix-blend-mode: normal; }