/* Theme Name: Golo Child Template: golo Description: Child theme for Miami Beach Drive Version: 2.0.0 */ /* ============================================================ PERFORMANCE — Prevent scrollbar-gutter CLS. Reserves space for the scrollbar so its appearance/removal cannot shift page content horizontally. ============================================================ */ html { scrollbar-gutter: stable; } /* ============================================================ FIX — Phantom horizontal scroll site-wide. The parent theme's nav ".sub-menu" dropdowns (e.g. the "Wellness" flyout) extend past the viewport edge even while closed, which inflates document scrollWidth and lets desktop users pan left/right into empty space with nothing to see. Clipping at the root is safer than chasing the exact submenu positioning bug in the parent theme (which we can't edit). ============================================================ */ html, body { /* `hidden` makes the other axis compute to `auto`, turning into a second vertical scroll container. On archive grids its fractional 1px overflow swallowed the first wheel/touch gesture. `clip` keeps the horizontal containment without creating that nested scrollport. */ overflow-x: clip; max-width: 100%; } /* ============================================================ PERFORMANCE — Reserve aspect-ratio space for lazy images. Prevents layout shift when Slick/Elementor lazy images load. Browsers that understand attr() will use width/height attrs; older browsers fall back to the explicit ratio below. ============================================================ */ .golo-listing-item img, .golo-place-thumbnail img, .slick-slide img, .elementor-widget-image img, .wp-post-image, .post-thumbnail img { display: block; width: 100%; height: auto; } /* ============================================================ CLS — Carousel skeleton to hold column height before Slick initialises. Prevents the page from jumping when the carousel tiles snap into their grid positions. ============================================================ */ .golo-carousel-wrap:not(.slick-initialized) { min-height: 340px; overflow: hidden; } /* ============================================================ FONTS — Override Jost @font-face to use font-display:optional. Golo's font.css (golo_font handle) declares Jost with font-display block/swap by default, blocking text rendering and placing Jost in the critical request chain (confirmed audit 2026-05-25: 4,748ms chain depth). 'optional' means the browser renders text immediately in the system fallback font and only swaps to Jost if it is already in the cache — eliminating both the font-swap CLS and the LCP delay. CSS cascade rule: a later @font-face with the same font-family, weight, style, and stretch overrides the earlier one. These declarations must include a src to be valid; we re-state the same file paths that Golo uses (relative to the theme's assets/fonts/ dir). 'font-display:optional' is the only property we are changing. ============================================================ */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: optional; src: url('../golo/assets/fonts/Jost-Light.woff2') format('woff2'), url('../golo/assets/fonts/Jost-Light.woff') format('woff'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: optional; src: url('../golo/assets/fonts/Jost-Book.woff2') format('woff2'), url('../golo/assets/fonts/Jost-Book.woff') format('woff'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: optional; src: url('../golo/assets/fonts/Jost-Medium.woff2') format('woff2'), url('../golo/assets/fonts/Jost-Medium.woff') format('woff'); } @font-face { font-family: 'Jost'; font-style: italic; font-weight: 400; font-display: optional; src: url('../golo/assets/fonts/Jost-BookItalic.woff2') format('woff2'), url('../golo/assets/fonts/Jost-BookItalic.woff') format('woff'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: optional; src: url('../golo/assets/fonts/Jost-Bold.woff2') format('woff2'), url('../golo/assets/fonts/Jost-Bold.woff') format('woff'); } /* ============================================================ TRIBE EVENTS — hide breadcrumbs (consolidated from wp_head inline in functions.php) ============================================================ */ .tribe-events-header__title .tribe-events-header__breadcrumbs tribe-events-c-breadcrumbs { display: none !important; } /* ============================================================ CONTACT FORM 7 — keep the accessibility summary available to screen readers without rendering it visibly under each field. Some promo/Elementor layouts lose CF7's default clipping rules, which causes duplicate validation messages on screen. ============================================================ */ .wpcf7 .screen-reader-response { position: absolute !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; } /* ============================================================ CONTACT FORM 7 — render inline errors as the field value so the message reads like a red value inside the input instead of a floating overlay or below-field tip. ============================================================ */ .wpcf7 .wpcf7-form-control-wrap { position: relative; display: block; } .wpcf7 .wpcf7-form-control-wrap.mbd-cf7-has-inline-error .wpcf7-form-control { color: #d93636 !important; -webkit-text-fill-color: #d93636 !important; caret-color: #d93636 !important; font-weight: 800; letter-spacing: 0.01em; } .wpcf7 .wpcf7-form-control-wrap .wpcf7-not-valid-tip { display: none !important; } .wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #ff7f7f !important; box-shadow: 0 0 0 4px rgba(217, 54, 54, 0.18) !important; } .wpcf7 form.invalid .wpcf7-form-control, .wpcf7 form.unaccepted .wpcf7-form-control, .wpcf7 form.payment-required .wpcf7-form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { margin: 28px 0 0; padding: 20px 22px; border: 1px solid rgba(255, 184, 0, 0.75); border-left: 6px solid #ffb800; border-radius: 16px; background: rgba(24, 18, 6, 0.96); color: #fff6cf; font-size: 19px; font-weight: 700; line-height: 1.5; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28); } /* ============================================================ A11y — hero heading contrast fix (mobile only). The homepage hero (.elementor-element-9a06a56) uses the global primary color (#EC268F) as its background with white heading text. At the mobile heading size (16px) this is ~4.0:1, below the 4.5:1 WCAG AA threshold for normal-size text (it passes at the larger desktop size, which qualifies as "large text"). Darken the hero background slightly on mobile only to restore AA contrast without touching the global color variable used elsewhere on the site. ============================================================ */ @media (max-width: 767px) { .elementor-element-9a06a56 { background-color: #C8207A !important; } } /* ============================================================ PERFORMANCE — composite the place-card hover zoom. Golo's style.min.css sets `transition: 1.5s ...` on place thumbnails with no property specified, which defaults to `all`. The only property that actually changes on hover is `transform` (scale3d), so the browser's main thread treats this as a non-composited animation on every place card (carousel tiles on Restaurants/Clubs/Bars/Hotels). Scoping the transition to `transform` keeps the exact same hover-zoom effect (same duration/easing) but lets it run on the compositor thread. ============================================================ */ .place-item .place-thumb .entry-thumb img, .place-item:hover .place-thumb .entry-thumb img { transition: transform 1.5s cubic-bezier(0, 0, 0.2, 1) !important; } /* ============================================================ ACCESSIBILITY — desktop header "For Business" nav button contrast. Same #EC268F global primary color used against white text here (rgb(255,255,255) on rgb(236,38,143) = 4.01:1, below the 4.5:1 WCAG AA threshold for normal-size text at 15px/500 weight). Reuses the same darkened shade (#C8207A) already established above for the identical mobile hero contrast fix. ============================================================ */ .desktop-menu .add-place.golo-button > a { background-color: #C8207A !important; } /* ============================================================ ACCESSIBILITY — restore a visible keyboard focus indicator. Parent theme's style.min.css sets a:focus{outline:none} globally with no replacement (flagged sitewide on nav links: logo, Explore, News, Restaurants, Bars, etc. — WCAG AA 2.4.7 / F78). Using :focus-visible restores an outline only for real keyboard navigation, leaving the existing mouse-click experience unchanged. ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #EC268F !important; outline-offset: 2px !important; } /* ============================================================ MAP INFOWINDOW — remove the empty Google InfoWindow header. On the places map, Google renders a ~48px header row (.gm-style-iw-chr / .gm-style-iw-ch) that only holds the close button; with no title it shows as blank space above the marker popup content. Collapse it and float the close button over the content. Scoped to the places map (.golo-map-filter) only. ============================================================ */ .golo-map-filter .gm-style-iw-ch { display: none !important; } .golo-map-filter .gm-style-iw-chr { height: 0 !important; min-height: 0 !important; } .golo-map-filter .gm-style-iw-chr .gm-ui-hover-effect { position: absolute !important; top: 2px !important; right: 2px !important; z-index: 5; } .golo-map-filter .gm-style-iw-c { padding-top: 0 !important; } /* ============================================================ REVIEW LIST — hide the reviewer avatar circle. Place reviews (golo-framework/single-place/review.php) fall back to get_avatar_url() for any commenter without a Gravatar-linked photo, which renders as the same generic branded circle for every guest reviewer — most place reviews are guest submissions, so this showed on nearly every review. Scoped to the review list only — leaves the "leave a review"/"reply" forms' own current-user avatar preview (.reviewForm/.repreviewForm) untouched. ============================================================ */ .reviews-list .entry-avatar { display: none !important; } /* ============================================================ PLACE CATEGORY ARCHIVES — font-independent solid icons. iOS WebKit intermittently rejects Line Awesome's solid font while still applying its private-use glyph CSS, which renders the archive controls, status, and address icons as empty boxes. Use local SVG masks for the six visible solid icons. This also covers AJAX-refreshed cards because it is class-based rather than a one-time markup replacement. ============================================================ */ body.tax-place-categories i.las.la-border-all::before, body.tax-place-categories i.las.la-list::before, body.tax-place-categories i.las.la-filter::before, body.tax-place-categories i.las.la-map-marked-alt::before, body.tax-place-categories i.las.la-door-open::before, body.tax-place-categories i.las.la-door-closed::before, body.tax-place-categories i.las.la-map-marker::before { display: inline-block; width: 1em; height: 1em; content: ""; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } body.tax-place-categories i.las.la-border-all::before { -webkit-mask-image: url("assets/icons/archive-grid.svg"); mask-image: url("assets/icons/archive-grid.svg"); } body.tax-place-categories i.las.la-list::before { -webkit-mask-image: url("assets/icons/archive-list.svg"); mask-image: url("assets/icons/archive-list.svg"); } body.tax-place-categories i.las.la-filter::before { -webkit-mask-image: url("assets/icons/archive-filter.svg"); mask-image: url("assets/icons/archive-filter.svg"); } body.tax-place-categories i.las.la-map-marked-alt::before { -webkit-mask-image: url("assets/icons/archive-map.svg"); mask-image: url("assets/icons/archive-map.svg"); } body.tax-place-categories i.las.la-door-open::before { -webkit-mask-image: url("assets/icons/archive-door-open.svg"); mask-image: url("assets/icons/archive-door-open.svg"); } body.tax-place-categories i.las.la-door-closed::before { -webkit-mask-image: url("assets/icons/archive-door-closed.svg"); mask-image: url("assets/icons/archive-door-closed.svg"); } body.tax-place-categories i.las.la-map-marker::before { -webkit-mask-image: url("assets/icons/archive-marker.svg"); mask-image: url("assets/icons/archive-marker.svg"); } /* ============================================================ STYLE — Place-category archive intro heading + description. Previously unstyled (relied on browser defaults), which read as "default text dump" once it became a single visible block above the grid (layout-column.php). Matches the page's existing H1/body tokens (Jost, #2d2d2d / #5d5d5d) and adds a brand-accent left rule so it reads as an intentional editorial lead-in rather than plain paragraph text. ============================================================ */ .archive-place-intro-heading { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 600; color: #2d2d2d; margin: 28px 0 12px; } .taxonomy-description { font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.7; color: #5d5d5d; max-width: 780px; margin-bottom: 32px; padding-left: 16px; border-left: 3px solid #C8207A; } .taxonomy-description p { margin: 0; }