/* Theme Name: Hello Elementor Child - Sounds Amazing Theme URI: https://soundsamazing.com.au Description: Child theme for the Sounds Amazing build. Holds the site's custom CSS so the Hello Elementor parent stays updatable. Generated layout rules live in assets/css/laptop-responsive.css. Author: Sounds Amazing Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* Hand-written site tweaks. Anything to do with laptop widths belongs in assets/css/laptop-responsive.css instead - that file is generated. */ /* ---- "Scratch & win" badge: float it over the whole page ---- */ /* * It was position:absolute inside the hero at a hardcoded top:590px, so it * scrolled away with the hero - and because the hero's height is now fluid it * sat 57% down the hero at 1920 but 80% down at 1280. Worse, at page-y 789-922 * it was below the fold at load on every laptop tested (1280x800, 1366x768, * 1440x900, 1536x864); only a 1080px-tall screen ever showed it. * * Fixed positioning pins it to the viewport instead. Anchoring from the bottom * keeps it in the same place on any screen height: 158px at 1080px tall, which * is exactly where the 1920x1080 design put it, easing down to ~112px on a * 768px-tall laptop so it always clears the bottom edge. * * z-index stays under the header's 99 so it cannot cover the nav if the header * is ever made sticky. */ :root .elementor-30 .elementor-element.elementor-element-64d071b { position: fixed; top: auto; bottom: clamp(24px, 14.6vh, 158px); right: 52px; z-index: 90; } /* Elementor sets right:16px here; restate it so the rule above cannot win. */ @media (max-width: 767px) { :root .elementor-30 .elementor-element.elementor-element-64d071b { right: 16px; } } /* ---- Header on tablet and mobile (HFE template, post 36) ---- */ /* * Elementor's own tablet/mobile rules let the header row wrap, so the logo, * the hamburger (centred by HFE's margin:auto) and the search/cart cluster * each took a row of their own - 229px of header on a 390px phone. One row * instead: logo left, search + cart + hamburger right. The opened menu keeps * HFE's full-width dropdown. ":root" for the same reason as the laptop layer - * HFE prints this CSS a second time inline, after the theme's stylesheets. */ @media (max-width: 1024px) { :root .elementor-36 .elementor-element.elementor-element-e069e40 { --flex-wrap: nowrap; --justify-content: space-between; --align-items: center; --gap: 0 12px; --row-gap: 0; --column-gap: 12px; --min-height: 0; --padding-top: 10px; --padding-bottom: 10px; } :root .elementor-36 .elementor-element.elementor-element-018f37a { order: 1; flex: 0 0 auto; width: auto; } :root .elementor-36 .elementor-element.elementor-element-12b7182 { order: 2; flex: 0 0 auto; --width: auto; width: auto; margin-left: auto; --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0 14px; --column-gap: 14px; } :root .elementor-36 .elementor-element.elementor-element-5a29402 { order: 3; flex: 0 0 auto; width: auto; } :root .elementor-36 .elementor-element.elementor-element-5a29402 .hfe-nav-menu__toggle { margin: 0; } /* Announcement bar: tighter on small screens. */ :root .elementor-36 .elementor-element.elementor-element-c83ca51 { --row-gap: 6px; --padding-top: 8px; --padding-bottom: 8px; } } @media (max-width: 767px) { :root .elementor-36 .elementor-element.elementor-element-018f37a img { width: 130px; } } /* Closed, HFE's hidden dropdown still measures 350px wide and pushes the page into horizontal scroll; open, it hangs off the toggle and overlaps the row. Zero it while closed and pin it to the bottom of the header row while open (the widget goes static so the row is the containing block; !important beats the inline left/width HFE's script writes). */ @media (max-width: 1024px) { :root .elementor-36 .elementor-element.elementor-element-5a29402 { position: static; } :root .elementor-36 .elementor-element.elementor-element-5a29402 nav.hfe-dropdown:not(.menu-is-active) { width: 0 !important; min-width: 0; overflow: hidden; } :root .elementor-36 .elementor-element.elementor-element-5a29402 nav.hfe-dropdown.menu-is-active { position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; z-index: 20; } } /* ---- Home page (post 30): clickable cards ---- */ /* * Each product card and each "Four Instruments" card links its image box (an * Elementor container with a Link, so it renders as ) and its * title to the same place as the card's button - the same three targets the * shop grid gives its cards in content-product.php. The whole card is * deliberately not one big link: an inside an is invalid HTML and the * browser splits the outer one around the button. */ :root .elementor-30 a.e-con { color: inherit; text-decoration: none; } :root .elementor-30 .elementor-widget-heading .elementor-heading-title > a { color: inherit; text-decoration: none; transition: color 0.2s ease; } :root .elementor-30 .elementor-widget-heading .elementor-heading-title > a:hover, :root .elementor-30 .elementor-widget-heading .elementor-heading-title > a:focus-visible { color: #a67e48; } /* Same lift the shop grid gives its cards (.sa-card:hover in shop.css). */ :root .elementor-30 .elementor-element.elementor-element-cf0f841, :root .elementor-30 .elementor-element.elementor-element-81d8533, :root .elementor-30 .elementor-element.elementor-element-67c6e4e, :root .elementor-30 .elementor-element.elementor-element-938ac25, :root .elementor-30 .elementor-element.elementor-element-e361d43, :root .elementor-30 .elementor-element.elementor-element-70a3a2e, :root .elementor-30 .elementor-element.elementor-element-fa27d8e { transition: transform 0.25s ease, box-shadow 0.25s ease; } :root .elementor-30 .elementor-element.elementor-element-cf0f841:hover, :root .elementor-30 .elementor-element.elementor-element-81d8533:hover, :root .elementor-30 .elementor-element.elementor-element-67c6e4e:hover, :root .elementor-30 .elementor-element.elementor-element-938ac25:hover, :root .elementor-30 .elementor-element.elementor-element-e361d43:hover, :root .elementor-30 .elementor-element.elementor-element-70a3a2e:hover, :root .elementor-30 .elementor-element.elementor-element-fa27d8e:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 11, 22, 0.12); } @media (prefers-reduced-motion: reduce) { :root .elementor-30 .elementor-element.elementor-element-cf0f841, :root .elementor-30 .elementor-element.elementor-element-81d8533, :root .elementor-30 .elementor-element.elementor-element-67c6e4e, :root .elementor-30 .elementor-element.elementor-element-938ac25, :root .elementor-30 .elementor-element.elementor-element-e361d43, :root .elementor-30 .elementor-element.elementor-element-70a3a2e, :root .elementor-30 .elementor-element.elementor-element-fa27d8e { transition: none; } }