/* ========================================================= STORIA BREAKOUT BAR ========================================================= */ .storia-breakout-bar { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; z-index: 1000 !important; box-sizing: border-box !important; background-color: transparent !important; } /* ========================================================= 2. REMOVE WORDPRESS STICKY CONTAINMENT ========================================================= */ @media screen and (max-width: 781px) { .wp-block-group(> .storia-breakout-bar), .wp-block-group(.storia-breakout-bar) { display: contents !important; } } /* ========================================================= 3. STICKY WHITE BUTTON GROUP — DESKTOP BASE ========================================================= */ .storia-breakout-bar.is-stuck { position: fixed !important; top: 123px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 20px !important; padding-right: 20px !important; padding-bottom: 20px !important; padding-left: 20px !important; background-color: #ffffff !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; z-index: 1000 !important; box-sizing: border-box !important; } /* ========================================================= 4. BUTTON CONTAINER BASE ========================================================= */ .storia-breakout-bar .wp-block-buttons { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ========================================================= 5. PREVENT PAGE CONTAINERS FROM CLIPPING ========================================================= */ .site-content, .site-main, #page, article, .entry-content, .wp-site-blocks, .wp-block-post-content, main.wp-block-group { overflow: visible !important; overflow-x: visible !important; contain: none !important; perspective: none !important; transform: none !important; } /* ========================================================= 6. UNIVERSAL NAVIGATION BAR — ALWAYS STAYS AT TOP ========================================================= */ header, .site-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; z-index: 1000000 !important; overflow: visible !important; isolation: auto !important; transform: none !important; box-sizing: border-box !important; } .wp-block-template-part { overflow: visible !important; contain: none !important; transform: none !important; perspective: none !important; } /* --------------------------------------------------------- NAVIGATION ITSELF --------------------------------------------------------- */ header .wp-block-navigation, .site-header .wp-block-navigation, .wp-block-navigation { position: relative !important; z-index: 1000001 !important; overflow: visible !important; } .wp-block-navigation__responsive-container { z-index: 1000002 !important; overflow: visible !important; } .wp-block-navigation, nav.wp-block-navigation, .wp-block-navigation__responsive-container { width: 100% !important; max-width: none !important; } /* ========================================================= 7. DESKTOP NAVIGATION ========================================================= */ @media screen and (min-width: 782px) { .wp-block-site-title, .site-title, header h1 { display: inline-block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; animation: none !important; } .wp-block-navigation, nav.wp-block-navigation, .wp-block-navigation__responsive-container { display: inline-block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 1000001 !important; overflow: visible !important; } .wp-block-navigation ul.wp-block-navigation__container, .wp-block-navigation .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; gap: 40px !important; } .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item { position: relative !important; margin-left: 0px !important; padding: 0 !important; overflow: visible !important; transform: none !important; } .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item { margin-left: 6px !important; } /* ===================================================== DROPDOWN PARENT ITEMS ===================================================== */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu { position: relative !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; overflow: visible !important; z-index: 1000005 !important; } .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu { position: relative !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; z-index: 1000009 !important; opacity: 1 !important; } /* ===================================================== ACTUAL DROPDOWN MENU ===================================================== */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { position: absolute !important; top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; width: max-content !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; z-index: 1000010 !important; overflow: visible !important; } .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; transform: none !important; width: max-content !important; min-width: max-content !important; margin: 0 !important; z-index: 1000010 !important; } /* ===================================================== LOCK ALL ITEMS INSIDE DROPDOWNS ===================================================== */ .wp-block-navigation__submenu-container .wp-block-navigation-item, .wp-block-navigation__submenu-container .wp-block-navigation-submenu { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; z-index: auto !important; } .wp-block-navigation__submenu-container .wp-block-navigation-item, .wp-block-navigation__submenu-container .wp-block-navigation-item, .wp-block-navigation__submenu-container .wp-block-navigation-submenu, .wp-block-navigation__submenu-container .wp-block-navigation-submenu { position: static !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } /* ===================================================== SUBMENU LINK DIMENSIONS ===================================================== */ .wp-block-navigation__submenu-container .wp-block-navigation-item__content { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; white-space: nowrap !important; /* Smooth slate-purple fade. */ transition: color 0.3s ease, opacity 0.3s ease !important; } /* ===================================================== SUBMENU BUTTONS — FADE TO SLATE PURPLE ===================================================== */ .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__submenu-container .wp-block-navigation-item__content { position: static !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; font-size: inherit !important; letter-spacing: inherit !important; color: #5d588e !important; opacity: 1 !important; } .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation__submenu-container .wp-block-navigation-item__content * { color: #5d588e !important; opacity: 1 !important; } } /* ========================================================= 8. MOBILE NAVIGATION ========================================================= */ @media screen and (max-width: 781px) { header, .site-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; z-index: 1000000 !important; transform: none !important; overflow: visible !important; } .wp-block-site-title, .site-title, header h1 { text-align: center !important; margin: 0 auto 10px auto !important; display: block !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; animation: none !important; } .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; box-sizing: border-box !important; z-index: 2000000 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { position: relative !important; display: block !important; width: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: relative !important; display: block !important; width: 100% !important; min-height: 100% !important; margin: 0 !important; padding: calc(75px + env(safe-area-inset-top)) 30px calc(40px + env(safe-area-inset-bottom)) 30px !important; box-sizing: border-box !important; overflow: visible !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed !important; top: calc(18px + env(safe-area-inset-top)) !important; right: 18px !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 8px !important; border: 0 !important; background: transparent !important; color: #ffffff !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; pointer-events: auto !important; transform: none !important; z-index: 2100000 !important; box-sizing: border-box !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { display: block !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; opacity: 1 !important; visibility: visible !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; pointer-events: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg path, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg line, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg polyline { stroke: #ffffff !important; fill: none !important; opacity: 1 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after { content: "×" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -52%) !important; display: block !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 42px !important; font-weight: 300 !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 15px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { white-space: normal !important; display: block !important; text-align: left !important; width: 100% !important; margin: 0 !important; transform: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: relative !important; top: 0 !important; left: 0 !important; right: auto !important; transform: none !important; display: block !important; width: 100% !important; box-shadow: none !important; text-align: left !important; margin-top: 10px !important; margin-bottom: 5px !important; padding-left: 25px !important; box-sizing: border-box !important; z-index: auto !important; overflow: visible !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { transform: none !important; translate: none !important; scale: none !important; rotate: none !important; transition: color 0.3s ease, opacity 0.3s ease !important; } /* ----------------------------------------------------- MOBILE SUBMENU — SLATE PURPLE ON INTERACTION ----------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #5d588e !important; opacity: 1 !important; transform: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content * { color: #5d588e !important; opacity: 1 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open a, .wp-block-navigation__responsive-container.is-menu-open button { pointer-events: auto !important; } } /* ========================================================= 9. HEADER CONTENT — STATIC AND ALWAYS VISIBLE ========================================================= */ header .wp-block-group, .site-header .wp-block-group, header > div { position: relative !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; gap: 0 !important; overflow: visible !important; z-index: 1000000 !important; } .wp-block-site-title, .site-title, header h1, header h1 a { opacity: 1 !important; visibility: visible !important; animation: none !important; } /* ========================================================= 9A. MOBILE — DO NOT LET HEADER FLEX RULE BREAK MENU ========================================================= */ @media screen and (max-width: 781px) { header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog, header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: block !important; flex-direction: initial !important; justify-content: initial !important; align-items: initial !important; max-width: none !important; gap: 0 !important; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; align-items: center !important; justify-content: center !important; } } /* ========================================================= 10. JORDAN MEDIA COMPOSER + ASTUTE COPYWRITER BUTTONS ========================================================= */ .homepage-jordan-button .wp-block-button__link, .homepage-astute-button .wp-block-button__link { background-color: #ffffff !important; color: #5d588e !important; border: 2px solid #5d588e !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } .homepage-jordan-button .wp-block-button__link, .homepage-astute-button .wp-block-button__link { background-color: #5d588e !important; color: #ffffff !important; border: 2px solid #ffffff !important; transform: none !important; } .homepage-jordan-button .wp-block-button__link *, .homepage-astute-button .wp-block-button__link * { color: #ffffff !important; } /* ========================================================= 11. WHITE AUTO-SCROLL BUTTON APPEARANCE ========================================================= */ .storia-breakout-bar .wp-block-button__link { background-color: #ffffff !important; color: #5d588e !important; border: 2px solid #5d588e !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } .storia-breakout-bar .wp-block-button__link { background-color: #5d588e !important; color: #ffffff !important; border: 2px solid #ffffff !important; transform: none !important; } .storia-breakout-bar .wp-block-button__link * { color: #ffffff !important; } .storia-breakout-bar .wp-block-button__link() { background-color: #ffffff !important; color: #5d588e !important; border-color: #5d588e !important; } /* ========================================================= 12. KEEP WHITE BUTTONS BELOW NAVIGATION ========================================================= */ .storia-breakout-bar .wp-block-buttons, .storia-breakout-bar .wp-block-button, .storia-breakout-bar .wp-block-button__link { position: relative !important; z-index: 1 !important; } .storia-breakout-bar .wp-block-buttons { isolation: auto !important; } /* ========================================================= 13. DESKTOP — FIVE BUTTONS ACROSS ========================================================= */ @media screen and (min-width: 782px) { .storia-breakout-bar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; column-gap: 15px !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; z-index: 1000 !important; } .storia-breakout-bar.is-stuck { top: 85px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; padding-top: 20px !important; padding-right: 20px !important; padding-bottom: 20px !important; padding-left: 20px !important; } .storia-breakout-bar > *, .storia-breakout-bar.is-stuck > * { grid-column: auto !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .storia-breakout-bar .wp-block-buttons, .storia-breakout-bar.is-stuck .wp-block-buttons { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .storia-breakout-bar .wp-block-button, .storia-breakout-bar.is-stuck .wp-block-button { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .storia-breakout-bar .wp-block-button__link, .storia-breakout-bar.is-stuck .wp-block-button__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 65px !important; margin: 0 !important; padding: 10px 8px !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; transform: none !important; } .page-id-854 .storia-breakout-bar { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================= 14. MOBILE — TRUE STICKY + 2 + 2 + 1 ========================================================= */ @media screen and (max-width: 781px) { .storia-breakout-bar, .storia-breakout-bar.is-stuck { position: -webkit-sticky !important; position: sticky !important; top: 120px !important; bottom: auto !important; left: auto !important; right: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; column-gap: 14px !important; row-gap: 7px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 20px !important; padding-right: 20px !important; padding-bottom: 20px !important; padding-left: 20px !important; background-color: #ffffff !important; box-sizing: border-box !important; z-index: 1000 !important; transform: none !important; overflow: visible !important; } .storia-breakout-bar.is-stuck { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; } html body [id*="career" i][id*="milestone" i], html body [id*="milestone" i][id*="scroll" i] { scroll-margin-top: 300px !important; } html body [id] { scroll-margin-top: 280px !important; } .storia-breakout-bar > *, .storia-breakout-bar.is-stuck > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; box-sizing: border-box !important; } .storia-breakout-bar>(1), .storia-breakout-bar.is-stuck>(1) { grid-column: 1 !important; grid-row: 1 !important; } .storia-breakout-bar>(2), .storia-breakout-bar.is-stuck>(2) { grid-column: 2 !important; grid-row: 1 !important; } .storia-breakout-bar>(3), .storia-breakout-bar.is-stuck>(3) { grid-column: 1 !important; grid-row: 2 !important; } .storia-breakout-bar>(4), .storia-breakout-bar.is-stuck>(4) { grid-column: 2 !important; grid-row: 2 !important; } .storia-breakout-bar>(5), .storia-breakout-bar.is-stuck>(5) { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 75% !important; max-width: 75% !important; justify-self: center !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; } .storia-breakout-bar .wp-block-buttons, .storia-breakout-bar.is-stuck .wp-block-buttons { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .storia-breakout-bar .wp-block-button, .storia-breakout-bar.is-stuck .wp-block-button { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .storia-breakout-bar .wp-block-button__link, .storia-breakout-bar.is-stuck .wp-block-button__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 70px !important; margin: 0 !important; padding: 10px 8px !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; transform: none !important; } } /* ========================================================= 15. ANCHOR SCROLLING ========================================================= */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: 120px; } #drama-appletv-sbs-anchor { scroll-margin-top: -280px !important; } #drama-piano-anchor { scroll-margin-top: -160px !important; } #kids-amazon-prime-anchor { /* Audio Collection page only: place "Kids" just below the desktop navigation bar. */ scroll-margin-top: -280px !important; } @media screen and (max-width: 768px) { id(#drama-piano-anchor)(#kids-amazon-prime-anchor) { scroll-margin-top: 150px !important; } #drama-appletv-sbs-anchor { scroll-margin-top: -880px !important; } #drama-piano-anchor { scroll-margin-top: -250px !important; } #kids-amazon-prime-anchor { /* MOBILE ONLY: Move Kids: Amazon Prime 2.7cm farther DOWN than its current landing point. */ scroll-margin-top: calc(-220px - 4.6cm) !important; } } /* ========================================================= 16. TOP-LEVEL NAVIGATION — PERMANENT SOLID WHITE ========================================================= */ /* Keeps: Home Booking Jordan Media Composer permanently solid white. Dropdown items are intentionally excluded. */ /* --------------------------------------------------------- TOP-LEVEL NAVIGATION ITEMS THEMSELVES --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item { opacity: 1 !important; visibility: visible !important; animation: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; will-change: auto !important; } .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item { opacity: 1 !important; visibility: visible !important; animation: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; text-decoration-color: currentColor !important; will-change: auto !important; } /* --------------------------------------------------------- CURRENT / ACTIVE PAGE STATES --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item.current_page_ancestor .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; transform: none !important; filter: none !important; } /* --------------------------------------------------------- CONTENT INSIDE TOP-LEVEL NAVIGATION LINKS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content * { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- JORDAN MEDIA COMPOSER DROPDOWN ARROW --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; } .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* ========================================================= 16A. DROPDOWN ITEMS — SLATE PURPLE HOVER FADE ========================================================= */ /* This affects only links INSIDE dropdown menus. It does NOT alter: Home Booking Jordan Media Composer in the main navigation bar. */ .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { transition: color 0.3s ease, opacity 0.3s ease !important; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #5d588e !important; opacity: 1 !important; filter: none !important; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content * { color: #5d588e !important; opacity: 1 !important; filter: none !important; } /* ========================================================= 17. MOBILE HOMEPAGE MILESTONE IMAGES — 3 + 3 + 3 + 3 ========================================================= */ @media screen and (max-width: 781px) { body.page-id-667 .wp-block-gallery, body.page-id-667 figure.wp-block-gallery, body.page-id-667 .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 10px !important; padding-right: 10px !important; column-gap: 10px !important; row-gap: 15px !important; align-items: center !important; justify-items: center !important; box-sizing: border-box !important; } body.page-id-667 .wp-block-gallery figure.wp-block-image, body.page-id-667 .wp-block-gallery.has-nested-images figure.wp-block-image, body.page-id-667 figure.wp-block-gallery figure.wp-block-image { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; flex-basis: auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } body.page-id-667 .wp-block-gallery.has-nested-images figure.wp-block-image(#individual-image), body.page-id-667 .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 0 !important; } body.page-id-667 .wp-block-gallery figure.wp-block-image a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-667 .wp-block-gallery figure.wp-block-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin-left: auto !important; margin-right: auto !important; object-fit: contain !important; box-sizing: border-box !important; } } /* ========================================================= 18. DESKTOP — CENTRE THE ST KILDA MILESTONE ROW ========================================================= */ @media screen and (min-width: 782px) { body.page-id-667 .homepage-beijing-row, body.page-id-667 .wp-block-group.homepage-beijing-row, body.page-id-667 .homepage-beijing-row.is-layout-flex, body.page-id-667 .homepage-beijing-row.wp-block-group-is-layout-flex { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; left: auto !important; right: auto !important; gap: 50px !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; transform: none !important; overflow: visible !important; } body.page-id-667 .homepage-beijing-row { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 1 28% !important; width: 28% !important; max-width: 28% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; transform: none !important; } body.page-id-667 .homepage-beijing-row figure.wp-block-image, body.page-id-667 .homepage-beijing-row .wp-block-image { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 1 28% !important; width: 28% !important; max-width: 28% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-667 .homepage-beijing-row figure.wp-block-image a, body.page-id-667 .homepage-beijing-row .wp-block-image a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-667 .homepage-beijing-row img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; object-fit: contain !important; float: none !important; transform: none !important; box-sizing: border-box !important; } body.page-id-667 .homepage-beijing-row.is-content-justification-left, body.page-id-667 .homepage-beijing-row.is-content-justification-right, body.page-id-667 .homepage-beijing-row.is-content-justification-space-between, body.page-id-667 .homepage-beijing-row.is-content-justification-center { justify-content: center !important; } body.page-id-667 .homepage-beijing-row.is-layout-flex, body.page-id-667 .homepage-beijing-row.wp-block-group-is-layout-flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; gap: 50px !important; } } /* ========================================================= 19. ABOUT PAGE — CIRCULAR / OVAL MEDIA & TEXT IMAGES ========================================================= */ body.page-id-830 .wp-block-media-text .wp-block-media-text__media { overflow: visible !important; background: transparent !important; box-sizing: border-box !important; } body.page-id-830 .wp-block-media-text .wp-block-media-text__media img { display: block !important; border-radius: 50% !important; width: 100% !important; max-width: 100% !important; height: auto !important; overflow: hidden !important; object-fit: cover !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.page-id-830 .wp-block-media-text .wp-block-media-text__media a { display: block !important; width: 100% !important; max-width: 100% !important; border-radius: 50% !important; overflow: hidden !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.page-id-830 .wp-block-media-text .wp-block-media-text__media a img { border-radius: 50% !important; overflow: hidden !important; } @media screen and (max-width: 781px) { body.page-id-830 .wp-block-media-text .wp-block-media-text__media img, body.page-id-830 .wp-block-media-text .wp-block-media-text__media a, body.page-id-830 .wp-block-media-text .wp-block-media-text__media a img { border-radius: 50% !important; overflow: hidden !important; } } /* ========================================================= 20. ABOUT PAGE — APPLE TV OVAL HEIGHT MATCHES SBS CIRCLE ========================================================= */ body.page-id-830 .wp-block-media-text.about-apple-tv .wp-block-media-text__media { display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; box-sizing: border-box !important; } body.page-id-830 .wp-block-media-text.about-apple-tv .wp-block-media-text__media img { display: block !important; height: 260px !important; width: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 50% !important; overflow: hidden !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.page-id-830 .wp-block-media-text.about-apple-tv .wp-block-media-text__media a { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; border-radius: 50% !important; overflow: visible !important; box-sizing: border-box !important; } @media screen and (max-width: 781px) { body.page-id-830 .wp-block-media-text.about-apple-tv .wp-block-media-text__media img { height: 400px !important; width: auto !important; max-width: 100% !important; border-radius: 50% !important; object-fit: cover !important; } } /* ========================================================= 21. SHOWREEL AND FILMS PAGE ONLY FINAL BUTTON COLOUR FIX ========================================================= */ /* ONLY affects the Showreel and Films page (page ID 667). */ /* ---------- NORMAL STATE (ALL 5 BUTTONS) ---------- */ body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link, body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar .wp-block-button__link { background: #ffffff !important; background-color: #ffffff !important; color: #5d588e !important; border: 2px solid #5d588e !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } body.page-id-667 .storia-breakout-bar .wp-block-button__link *, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link * { color: #5d588e !important; } /* ---------- HOVER / FOCUS / ACTIVE ---------- */ body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar .wp-block-button__link, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link { background: #5d588e !important; background-color: #5d588e !important; color: #ffffff !important; border: 2px solid #5d588e !important; } body.page-id-667 .storia-breakout-bar .wp-block-button__link *, body.page-id-667 .storia-breakout-bar .wp-block-button__link *, body.page-id-667 .storia-breakout-bar .wp-block-button__link *, body.page-id-667 .storia-breakout-bar .wp-block-button__link *, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link *, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link *, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link *, body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button__link * { color: #ffffff !important; } /* ========================================================= 22. FINAL UNIVERSAL NAVIGATION TOP-LEVEL COLOUR LOCK ========================================================= */ /* FINAL OVERRIDE: Keeps the TOP-LEVEL navigation buttons permanently solid white, including: Home Booking Jordan Media Composer They remain white during: normal visited hover focus focus-visible active This deliberately DOES NOT target links inside dropdown menus, so the existing slate-purple dropdown hover behaviour remains unchanged. */ /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — NORMAL STATE --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; text-decoration-color: #ffffff !important; will-change: auto !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — VISITED --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — HOVER --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; text-decoration-color: #ffffff !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — FOCUS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — FOCUS VISIBLE --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION LINKS — ACTIVE / CLICK --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION ITEM WRAPPERS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu { opacity: 1 !important; visibility: visible !important; animation: none !important; filter: none !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } /* --------------------------------------------------------- TOP-LEVEL NAVIGATION ITEM WRAPPERS — HOVER / FOCUS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu { opacity: 1 !important; visibility: visible !important; animation: none !important; filter: none !important; } /* --------------------------------------------------------- TEXT / SPANS INSIDE TOP-LEVEL LINKS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content *, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- TEXT / SPANS INSIDE TOP-LEVEL LINKS — HOVER --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content *, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- JORDAN MEDIA COMPOSER TOP-LEVEL DROPDOWN ARROW --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- DROPDOWN ARROW — HOVER / FOCUS --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- DROPDOWN ARROW SVG --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg, .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } /* --------------------------------------------------------- DESKTOP EXTRA-SPECIFIC FINAL LOCK --------------------------------------------------------- */ @media screen and (min-width: 782px) { header .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } header .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; filter: none !important; } } /* ========================================================= 23. JORDAN MEDIA COMPOSER SUBMENU — SLATE PURPLE HOVER ========================================================= */ /* ONLY affects links inside the Jordan Media Composer dropdown submenu. Normal: White text Hover / focus: Fades smoothly to slate purple (#5d588e) Does NOT affect: Home Booking Top-level Jordan Media Composer Top-level dropdown arrow */ /* --------------------------------------------------------- SUBMENU LINKS — NORMAL WHITE --------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; transition: color 0.3s ease !important; animation: none !important; filter: none !important; transform: none !important; } /* Keep anything nested inside the submenu link white normally */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content * { color: #ffffff !important; opacity: 1 !important; transition: color 0.3s ease !important; animation: none !important; filter: none !important; } /* --------------------------------------------------------- SUBMENU LINKS — HOVER / FOCUS / ACTIVE FADE TO SLATE PURPLE --------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #5d588e !important; opacity: 1 !important; visibility: visible !important; transition: color 0.3s ease !important; animation: none !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- NESTED TEXT — HOVER / FOCUS / ACTIVE --------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content *, .site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content * { color: #5d588e !important; opacity: 1 !important; transition: color 0.3s ease !important; animation: none !important; filter: none !important; } /* ========================================================= 24. DROPDOWN — OPEN ONLY FROM TOP-LEVEL BUTTON ========================================================= */ /* PURPOSE: The Jordan Media Composer submenu must NOT open simply because the mouse enters the invisible area occupied by the dropdown. It can initially open ONLY when the mouse is actually over the visible Jordan Media Composer top-level button. Once opened, the submenu itself becomes interactive so the mouse can move down into it and its links can be clicked normally. */ /* --------------------------------------------------------- CLOSED SUBMENU Completely remove the invisible dropdown from mouse interaction. --------------------------------------------------------- */ @media screen and (min-width: 782px) { .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; display: block !important; /* * Keep its positioning exactly where it already is. * We do NOT move the dropdown. */ top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; transform: none !important; /* * Prevent the hidden submenu from creating an * interactive hover zone. */ z-index: 1000010 !important; } /* ----------------------------------------------------- 2. OPEN ONLY WHEN THE ACTUAL TOP-LEVEL LINK IS HOVERED ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item__content ~ .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ----------------------------------------------------- 3. ALSO OPEN WHEN THE TOP-LEVEL LINK HAS KEYBOARD FOCUS ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item__content ~ .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item__content ~ .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ----------------------------------------------------- 4. KEEP THE MENU OPEN AFTER IT HAS OPENED AND THE MOUSE MOVES FROM THE BUTTON INTO THE SUBMENU ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ----------------------------------------------------- 5. KEYBOARD ACCESSIBILITY Keep submenu open while one of its links has focus. ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ----------------------------------------------------- 6. WORDPRESS SUBMENU TOGGLE BUTTON If WordPress renders a separate arrow/button, hovering it may also legitimately open the submenu. ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon ~ .wp-block-navigation__submenu-container, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-icon ~ .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ----------------------------------------------------- 7. IMPORTANT: Neutralise WordPress's generic parent-hover opening behaviour. The parent itself can cover the dropdown's invisible area. We therefore do NOT use the generic .wp-block-navigation-submenu trigger to open it. ----------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation__submenu-container { /* * Do not define visibility here. * * Opening is controlled exclusively by: * * - the visible top-level link * - the visible arrow * - the already-open submenu * - keyboard focus */ } } /* ========================================================= 25. HOME NAVIGATION BUTTON — NO FADE ON PAGE LOAD ========================================================= */ /* Keeps the Home button permanently solid white. Removes page-load fades, transitions and animations from the Home navigation item only. */ @media screen and (min-width: 782px) { /* HOME — navigation item wrapper */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item { opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; transition-duration: 0s !important; transition-delay: 0s !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; will-change: auto !important; } /* HOME — actual link */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-fill-mode: none !important; transition: none !important; transition-property: none !important; transition-duration: 0s !important; transition-delay: 0s !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; will-change: auto !important; } /* HOME — text/span inside link */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content * { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; transition-duration: 0s !important; transition-delay: 0s !important; filter: none !important; } /* HOME — every interaction state */ .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; transition-property: none !important; transition-duration: 0s !important; transition-delay: 0s !important; transform: none !important; filter: none !important; } } IMPORTANT: This deliberately does NOT use body.page-id-667. The previous page-ID selector was preventing the rule from matching this page, allowing the earlier purple-fill rule to remain in control. NORMAL: white fill / slate-purple text / slate-purple border HOVER: slate-purple fill / white text / white border ========================================================= */ /* NORMAL — force all five links back to white */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important; } /* NORMAL — force any nested button text to slate purple */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link *, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link * { color: #5d588e !important; opacity: 1 !important; transition: color 0.35s ease !important; } /* HOVER — slate-purple fill, white text, white border */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* HOVER — nested text becomes white too */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link *, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link * { color: #ffffff !important; } /* KEYBOARD FOCUS — same visual state as hover */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; } html body .storia-breakout-bar .wp-block-button .wp-block-button__link *, html body .storia-breakout-bar .wp-block-button .wp-block-button__link *, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link *, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link * { color: #ffffff !important; } /* EXPLICIT NON-HOVER STATE This defeats the earlier global rule that permanently sets these buttons to slate purple. */ html body .storia-breakout-bar .wp-block-button .wp-block-button__link()()(), html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link()()() { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; } html body .storia-breakout-bar .wp-block-button .wp-block-button__link()()() *, html body .storia-breakout-bar.is-stuck .wp-block-button .wp-block-button__link()()() * { color: #5d588e !important; } Each button now has its OWN stopping position, calibrated from the five screenshots supplied on 15 September 2026. The selectors deliberately match likely variations of the WordPress anchor IDs, so they do not depend on one exact spelling/capitalisation pattern. ========================================================= */ html { scroll-padding-top: 0 !important; } /* Safe fallback for any other anchor on the page. */ html body [id] { scroll-margin-top: 280px !important; } /* --------------------------------------------------------- FULL SHOWREEL Desired result: "Cinematic Power. Visceral Impact." sits immediately below the white five-button group. --------------------------------------------------------- */ html body [id*="showreel" i][id*="scroll" i], html body [id*="full-showreel" i], html body [id*="full_showreel" i] { scroll-margin-top: 275px !important; } /* --------------------------------------------------------- 2. CAREER MILESTONES Desired result: the complete Apple TV logo begins immediately below the white five-button group. --------------------------------------------------------- */ html body [id*="career" i][id*="milestone" i], html body [id*="milestone" i][id*="scroll" i] { scroll-margin-top: 300px !important; } /* --------------------------------------------------------- 3. SPOTLIGHT SCENES Desired result: "Selected Spotlight Scenes" sits immediately below the white five-button group. --------------------------------------------------------- */ html body [id*="spotlight" i][id*="scroll" i], html body [id*="spotlight-scenes" i], html body [id*="selected-spotlight" i] { scroll-margin-top: 220px !important; } html body #crowning-scroll, html body #all-review-scroll, html body #all-testimonial-scroll { scroll-margin-top: 200px !important; } /* --------------------------------------------------------- 4. CONTACT ME Desired result: the final film/video image sits immediately below the white five-button group, as in screenshot 4. --------------------------------------------------------- */ html body [id*="contact" i][id*="scroll" i], html body [id*="contact-me" i], html body [id*="contact_me" i] { scroll-margin-top: 220px !important; } /* --------------------------------------------------------- 5. LOOKING FOR THE FULL STORY? Desired result: "Looking For The Full Story?" sits immediately below the white five-button group. --------------------------------------------------------- */ html body [id*="full-story" i], html body [id*="full_story" i], html body [id*="story" i][id*="scroll" i], html body [id*="looking-for-the-full-story" i] { scroll-margin-top: 200px !important; } /* Never apply destination spacing to the sticky button bar. */ html body .storia-breakout-bar, html body .storia-breakout-bar[id] { scroll-margin-top: 0 !important; } IMPORTANT: No page-ID or .homepage-jordan-button dependency is used. The previous attempts could fail if those selectors were not present on the rendered page. This targets the WordPress BUTTON link in page content whose destination contains "jordanmediacomposer". It does NOT target the navigation menu item because that item is not a .wp-block-button__link. ========================================================= */ /* NORMAL — white fill / slate-purple text / slate-purple border / html body a.wp-block-button__link[href="jordanmediacomposer" i], html body .wp-block-button a.wp-block-button__link[href*="jordanmediacomposer" i] { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: background-color 0.30s ease, color 0.30s ease, border-color 0.30s ease !important; } /* NORMAL — nested text / html body a.wp-block-button__link[href="jordanmediacomposer" i] , html body .wp-block-button a.wp-block-button__link[href="jordanmediacomposer" i] * { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; transition: color 0.30s ease !important; } /* HOVER — slate-purple fill / white text / white border / html body a.wp-block-button__link[href="jordanmediacomposer" i], html body .wp-block-button a.wp-block-button__link[href*="jordanmediacomposer" i] { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* HOVER — nested text / html body a.wp-block-button__link[href="jordanmediacomposer" i] , html body .wp-block-button a.wp-block-button__link[href="jordanmediacomposer" i] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* KEYBOARD FOCUS — same appearance as hover / html body a.wp-block-button__link[href="jordanmediacomposer" i], html body a.wp-block-button__link[href*="jordanmediacomposer" i], html body .wp-block-button a.wp-block-button__link[href*="jordanmediacomposer" i], html body .wp-block-button a.wp-block-button__link[href*="jordanmediacomposer" i] { background: #5d588e !important; background-color: #5d588e !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; } html body a.wp-block-button__link[href*="jordanmediacomposer" i] , html body a.wp-block-button__link[href="jordanmediacomposer" i] , html body .wp-block-button a.wp-block-button__link[href="jordanmediacomposer" i] , html body .wp-block-button a.wp-block-button__link[href="jordanmediacomposer" i] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } EMAIL AT ALL TIMES: slate purple fill white text white border Hover / focus / active remain exactly the same. ========================================================= */ /* EMAIL — normal, visited, hover, focus and active */ html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i], html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-width: 2px !important; border-style: solid !important; border-color: #ffffff !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; } /* EMAIL — keep any nested text permanently white */ html body a.wp-block-button__link[href^="mailto:" i] *, html body a.wp-block-button__link[href^="mailto:" i] *, html body a.wp-block-button__link[href^="mailto:" i] *, html body a.wp-block-button__link[href^="mailto:" i] *, html body a.wp-block-button__link[href^="mailto:" i] *, html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] *, html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] *, html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] *, html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] *, html body .wp-block-button a.wp-block-button__link[href^="mailto:" i] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; transition: none !important; } Applies to the four main CTA buttons: Watch Showreel Listen To Audio Discuss Your Media Book A Temp Score Meeting PERMANENT APPEARANCE: slate-purple fill white text white border Hover / focus / active remain exactly the same. ========================================================= */ /* --------------------------------------------------------- ALL FOUR BUTTONS — EVERY STATE --------------------------------------------------------- */ html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link, html body .wp-block-buttons .wp-block-button .wp-block-button__link { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-width: 2px !important; border-style: solid !important; border-color: #ffffff !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* --------------------------------------------------------- KEEP ALL TEXT INSIDE THE FOUR BUTTONS WHITE --------------------------------------------------------- */ html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link *, html body .wp-block-buttons .wp-block-button .wp-block-button__link * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* --------------------------------------------------------- SMOOTH BUT VISUALLY IDENTICAL INTERACTION --------------------------------------------------------- */ html body .wp-block-buttons .wp-block-button .wp-block-button__link { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } FINAL BEHAVIOUR: The submenu is physically removed from display by default. It cannot appear because of current-page, focus, aria-expanded, WordPress parent-hover, or the larger invisible submenu area. It opens only when the pointer is directly over the top-level Jordan Media Composer link/text or its arrow. Once opened, it remains available while the pointer is over the visible submenu so its links can still be clicked. Mobile navigation is untouched. ========================================================= */ @media screen and (min-width: 782px) { /* Parent stays in its normal fixed position. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu { position: relative !important; overflow: visible !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; z-index: 1000009 !important; } /* ===================================================== A. ABSOLUTE CLOSED STATE display:none is intentional: the invisible dropdown cannot itself create a hover area. ===================================================== */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; /* Equal grey space on both sides of the longest submenu label. */ margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; box-sizing: border-box !important; z-index: 1000010 !important; } /* ===================================================== B. OPEN ONLY FROM THE ACTUAL TOP-LEVEL LINK/TEXT ===================================================== */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation-item__content:hover ) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation-item__content:hover ) > .wp-block-navigation__submenu-container { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ===================================================== C. THE ARROW COUNTS AS PART OF THE BUTTON ===================================================== */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation__submenu-icon:hover ) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation__submenu-icon:hover ) > .wp-block-navigation__submenu-container { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ===================================================== D. KEEP THE ALREADY-VISIBLE MENU USABLE while the pointer is actually over the visible submenu. This does not create the original giant hover zone, because the submenu is display:none before opening. ===================================================== */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation__submenu-container:hover ) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has( > .wp-block-navigation__submenu-container:hover ) > .wp-block-navigation__submenu-container { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ===================================================== E. LOCK THE OPEN SUBMENU'S POSITION AND SIZE ===================================================== */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; /* Keep the resized submenu centred under its parent button. */ margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } /* Lock each submenu item so nothing shifts on hover. */ html body header .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover, html body .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; box-sizing: border-box !important; } /* Lock submenu links; Section 32 controls their colour fade. */ html body header .wp-block-navigation__submenu-container .wp-block-navigation-item__content, html body .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; margin: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; white-space: nowrap !important; box-sizing: border-box !important; } } /* ========================================================= AUDIO COLLECTION PAGE — NON-TOP-ROW ANCHOR LANDING ========================================================= Applies only on the Audio Collection page and only on desktop. Deliberately excluded and left unchanged: Drama: Apple TV, SBS, Best Australian Short Film Drama: More Kids: Amazon Prime ========================================================= */ @media screen and (min-width: 769px) { html body:has(#kids-amazon-prime-anchor) [id$="-anchor"]:not(#drama-appletv-sbs-anchor):not(#drama-piano-anchor):not( #kids-amazon-prime-anchor ) { /* All Audio Collection buttons EXCEPT the top row: CURRENT effective landing = 180px. Add exactly 1.5cm so every destination lands 1.5cm farther DOWN. */ scroll-margin-top: calc(140px - 1.5cm) !important; } .page-id-943 h2 { line-height: inherit !important; } } /* --------------------------------------------------------- MOBILE — ALL AUDIO COLLECTION BUTTONS EXCEPT TOP 3 --------------------------------------------------------- Keep the three top-row destinations unchanged. For every other -anchor destination, move the scrolling point 0.8cm farther DOWN on mobile only. --------------------------------------------------------- */ @media screen and (max-width: 781px) { html body:has(#kids-amazon-prime-anchor) [id$="-anchor"]:not(#drama-appletv-sbs-anchor):not(#drama-piano-anchor):not( #kids-amazon-prime-anchor ) { scroll-margin-top: calc(120px - 0.8cm) !important; } } @media screen and (min-width: 782px) { /* ----------------------------------------------------- SUBMENU BUTTON TEXT — NORMAL ----------------------------------------------------- */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; transition-property: color, -webkit-text-fill-color !important; transition-duration: 0.3s, 0.3s !important; transition-timing-function: ease, ease !important; transition-delay: 0s, 0s !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } /* ----------------------------------------------------- SUBMENU BUTTON TEXT — HOVER ----------------------------------------------------- */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; } /* ----------------------------------------------------- KEYBOARD FOCUS — SAME SLATE-PURPLE FADE ----------------------------------------------------- */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; opacity: 1 !important; } } Keeps the top-level Home navigation link solid white at ALL times, including: initial page load normal state visited state hover focus active/current-page state It also disables transitions, animations and opacity effects on Home only. ========================================================= */ @media screen and (min-width: 782px) { /* HOME — top-level navigation item wrapper */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child { opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-fill-mode: none !important; transition: none !important; transition-property: none !important; transition-duration: 0s !important; transition-delay: 0s !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; will-change: auto !important; } /* HOME — actual link in every possible state */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:link, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:visited, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:hover, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:focus, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:focus-visible, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:active, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:link, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:visited, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:hover, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:focus, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:focus-visible, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-fill-mode: none !important; transition: none !important; transition-property: none !important; transition-duration: 0s !important; transition-delay: 0s !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; text-shadow: none !important; will-change: auto !important; } /* HOME — any nested text/span must also remain white */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content *, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; transform: none !important; filter: none !important; } } This targets only the homepage content button linking to /jordanmediacomposer/. It does not target the navigation item, the Email button, or any element on another page. ========================================================= */ /* NORMAL / VISITED — white fill, slate-purple text and slate-purple border. */ html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i], html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:visited { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; } /* NORMAL / VISITED — force any nested text to slate purple too. */ html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i] *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i] *, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i] *, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i] * { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; transition: color 0.3s ease !important; } /* HOVER / KEYBOARD FOCUS / ACTIVE — retain existing inverse interaction. */ html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:active { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; /* Keep the visible purple rectangle at exactly the same outer size. A normal white border on a white page visually disappears and makes the button look as though it has moved/shrunk by the border width. Use a transparent 2px border so the purple background paints through the full border-box, and draw the requested white edge as an outline outside the box. The outline never changes layout or position. */ border: 2px solid transparent !important; border-color: transparent !important; outline: 2px solid #ffffff !important; outline-offset: 0 !important; background-clip: border-box !important; box-sizing: border-box !important; opacity: 1 !important; filter: none !important; transform: none !important; } /* HOVER / FOCUS / ACTIVE — nested text follows the inverse state. */ html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:hover *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:hover *, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:hover *, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:hover *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus *, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus *, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus-visible *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus-visible *, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus-visible *, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus-visible *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:active *, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:active *, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:active *, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= HOMEPAGE JORDAN MEDIA COMPOSER BUTTON — POSITION LOCK ========================================================= ONLY affects the Jordan Media Composer content button on the homepage (the button beside Email). Keeps the button in exactly the same physical position in: - normal - visited - hover - focus - focus-visible - active Colour behaviour remains unchanged. ========================================================= */ /* Lock the WordPress button wrapper itself so a theme hover rule cannot nudge the whole button vertically. */ html body.home .wp-block-button:has(> a.wp-block-button__link[href="jordanmediacomposer" i]), html body.home .wp-block-button:has( > a.wp-block-button__link[href="jordanmediacomposer/" i] ), html body.home .wp-block-button:has( > a.wp-block-button__link[href="/jordanmediacomposer/" i] ), html body.home .wp-block-button:has( > a.wp-block-button__link[href$="/jordanmediacomposer/" i] ), html body.home .wp-block-button:has( > a.wp-block-button__link[href="jordanmediacomposer" i] ):hover, html body.home .wp-block-button:has( > a.wp-block-button__link[href="jordanmediacomposer/" i] ):hover, html body.home .wp-block-button:has( > a.wp-block-button__link[href="/jordanmediacomposer/" i] ):hover, html body.home .wp-block-button:has( > a.wp-block-button__link[href$="/jordanmediacomposer/" i] ):hover, html body.home .wp-block-button:has( > a.wp-block-button__link[href="jordanmediacomposer" i] ):focus-within, html body.home .wp-block-button:has( > a.wp-block-button__link[href="jordanmediacomposer/" i] ):focus-within, html body.home .wp-block-button:has( > a.wp-block-button__link[href="/jordanmediacomposer/" i] ):focus-within, html body.home .wp-block-button:has( > a.wp-block-button__link[href$="/jordanmediacomposer/" i] ):focus-within { position: relative !important; top: 0 !important; bottom: auto !important; left: auto !important; right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; animation: none !important; } /* Lock the button link itself as well. */ html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i], html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i], html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:visited, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:hover, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:focus-visible, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href="jordanmediacomposer/" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href="/jordanmediacomposer/" i]:active, html body.home .wp-block-button > a.wp-block-button__link[href$="/jordanmediacomposer/" i]:active { position: relative !important; top: 0 !important; bottom: auto !important; left: auto !important; right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important; animation: none !important; vertical-align: middle !important; box-sizing: border-box !important; box-shadow: none !important; } /* ========================================================= SHOWREEL & FILMS PAGE ONLY FIVE WHITE BUTTON — ANCHOR LANDING POSITION FIX ========================================================= */ /* IMPORTANT: This section ONLY affects page ID 667: www.jordanmediacomposer.com/showreelandfilms It does NOT change: any other webpage the universal navigation bar the white button group's position button colours button sizes galleries images any other existing CSS */ /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media screen and (min-width: 782px) { /* * Universal navigation = approximately 123px * Sticky white button group = approximately 109px * * Therefore the anchor needs approximately 232px * clearance from the top of the viewport. */ /* ===================================================== FULL SHOWREEL + CAREER MILESTONES JAVASCRIPT-CONTROLLED DESKTOP LANDING ===================================================== The old padding / negative-margin anchor offsets have been removed. They were changing the anchor box itself and fighting the exact JavaScript landing calculation. The footer JavaScript now places: - "Cinematic Power. Visceral Impact." directly beneath the white button group when Full Showreel is clicked. - the TOP EDGE of the Apple TV image directly beneath the white button group when Career Milestones is clicked. These two CSS anchor margins are neutralised on desktop. ===================================================== */ body.page-id-667 #showreel-2-scroll, body.page-id-667 #career-milestones-scroll { scroll-margin-top: 0 !important; scroll-margin-block-start: 0 !important; } /* OTHER THREE BUTTONS — UNCHANGED */ body.page-id-667 #full-story-scroll, body.page-id-667 #contact-scroll, body.page-id-667 #spotlight-scenes-scroll { scroll-margin-top: 1px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media screen and (max-width: 781px) { body.page-id-667 #career-milestones-scroll, body.page-id-667 #showreel-2-scroll, body.page-id-667 #full-story-scroll, body.page-id-667 #contact-scroll, body.page-id-667 #spotlight-scenes-scroll { scroll-margin-top: 120px !important; } } IMPORTANT: On desktop, Full Showreel and Career Milestones are now positioned by the footer JavaScript using the ACTUAL bottom edge of the sticky white button group. The old padding / negative-margin anchor hack has been removed. Mobile remains unchanged. ========================================================= */ body.page-id-667 { scroll-behavior: smooth; } /* ========================================================= SHOWREEL & FILMS — NATIVE ANCHOR SCROLLING ========================================================= Keep native/smooth anchor scrolling enabled so the two manual anchor-position controls above determine the destination geometry. ========================================================= */ body.page-id-667 { scroll-behavior: smooth !important; } /* ========================================================= FINAL DESKTOP JORDAN MEDIA COMPOSER SUBMENU FIX ========================================================= ONLY affects the desktop top-level dropdown submenu. - Hidden when nothing is hovered/focused. - Opens from the visible top-level link (or its arrow). - Remains usable while the pointer is over the visible menu. - Width is content-based with equal 20px left/right padding. ========================================================= */ @media screen and (min-width: 782px) { /* CLOSED STATE — overrides all earlier generic parent-hover rules. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: 100% !important; left: calc(50% - 130px) !important; right: auto !important; transform: none !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; margin: 0 !important; padding-left: 0px !important; padding-right: 0px !important; box-sizing: border-box !important; z-index: 1000010 !important; } /* OPEN ONLY when the visible top-level text/link is hovered. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation-item__content:hover) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation-item__content:hover) > .wp-block-navigation__submenu-container, /* The arrow is part of the visible Jordan Media Composer control. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation__submenu-icon:hover) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation__submenu-icon:hover) > .wp-block-navigation__submenu-container, /* Once opened, keep it open only while the pointer is over the visible submenu. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation__submenu-container:hover) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation__submenu-container:hover) > .wp-block-navigation__submenu-container, /* Keyboard accessibility. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation-item__content:focus) > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:has(> .wp-block-navigation-item__content:focus) > .wp-block-navigation__submenu-container { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Equal horizontal inset: x on the left and x on the right. */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; box-sizing: border-box !important; } } /* ========================================================= FINAL DESKTOP SUBMENU — EXACT EQUAL LEFT/RIGHT TEXT INSET ========================================================= ONLY affects the desktop Jordan Media Composer dropdown. The submenu itself keeps equal 20px left/right padding, while submenu items/links contribute no extra horizontal padding. Therefore the first and last letters have the same distance (x) from the grey submenu's two edges. ========================================================= */ @media screen and (min-width: 782px) { html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { padding-left: 20px !important; padding-right: 20px !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item { padding-left: 0 !important; padding-right: 0 !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================= FINAL DESKTOP SUBMENU — EXACT x = x EDGE SPACING ========================================================= ONLY affects the desktop Jordan Media Composer dropdown. The grey submenu shrink-wraps its longest text line and adds exactly the same 20px inset to the left and right edges. ========================================================= */ @media screen and (min-width: 782px) { html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { width: fit-content !important; min-width: 0 !important; max-width: none !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: content-box !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { width: max-content !important; min-width: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; } } /* ========================================================= FINAL DESKTOP SUBMENU — TRUE EQUAL x ON BOTH SIDES ========================================================= Jordan Media Composer dropdown only. The previous version put the 20px spacing on the submenu container. WordPress's intrinsic submenu sizing can make that appear unequal. This version puts the SAME 20px directly on BOTH SIDES of every submenu link. The grey box then shrink-wraps the padded longest link. Result for "Jordan Media Composer": left grey edge -> 20px -> J ... r -> 20px -> right grey edge To change x later, change BOTH 20px values in the padding declaration below together. ========================================================= */ @media screen and (min-width: 782px) { html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { width: max-content !important; min-width: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item { width: max-content !important; min-width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: block !important; width: max-content !important; min-width: 100% !important; max-width: none !important; /* x = 20px on BOTH sides */ padding-left: -100px !important; padding-right: 20px !important; margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; } } /* ========================================================= FINAL DESKTOP JORDAN MEDIA COMPOSER SUBMENU CENTRING ========================================================= ONLY changes the horizontal position of the desktop dropdown. The exact centre of the grey submenu is aligned with the exact centre of its Jordan Media Composer parent navigation button. ========================================================= */ @media screen and (min-width: 782px) { html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { position: absolute !important; /* Parent button centre */ left: calc(50% - 130px) !important; right: auto !important; /* Submenu's own centre placed on that point */ transform: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================= FINAL DESKTOP JORDAN MEDIA COMPOSER SUBMENU CENTRING — V3 ========================================================= ONLY changes the horizontal position of the desktop Jordan Media Composer grey submenu. The previous percentage transform is visibly not being applied by the current WordPress navigation layout. Therefore this rule uses a direct pixel correction instead. The existing grey submenu width is 260px. Half = 130px. The submenu's left edge is currently landing on the centre of the parent Jordan Media Composer control, so moving it left edge at parent-centre minus 130px centres the 260px submenu. ========================================================= */ @media screen and (min-width: 782px) { html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { position: absolute !important; left: calc(50% - 130px) !important; right: auto !important; /* Keep the existing 260px submenu width and centre it directly. */ width: 260px !important; min-width: 260px !important; max-width: 260px !important; /* Cancel the percentage-based positioning method. */ transform: none !important; translate: none !important; /* No transform or negative margin is needed: left already contains the correction. */ margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================= FINAL DESKTOP SUBMENU FILL FADE — DEFINITIVE OVERRIDE ========================================================= ONLY affects the grey Jordan Media Composer submenu on desktop. NORMAL: text white, fill transparent HOVER / FOCUS: fill fades to slate purple (#5d588e) over 0.30 seconds; text stays white throughout This final rule deliberately overrides any earlier transition:none or white-text locks that accidentally reach submenu descendants. ========================================================= */ @media screen and (min-width: 782px) { /* NORMAL — link + any nested text */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content *, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: transparent !important; transition-property: color, -webkit-text-fill-color, background-color !important; transition-duration: 0.3s, 0.3s, 0.3s !important; transition-timing-function: ease, ease, ease !important; transition-delay: 0s, 0s, 0s !important; } /* HOVER THE WHOLE SUBMENU ITEM — fade the fill to slate purple, text stays white */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #5d588e !important; transition-property: color, -webkit-text-fill-color, background-color !important; transition-duration: 0.3s, 0.3s, 0.3s !important; transition-timing-function: ease, ease, ease !important; transition-delay: 0s, 0s, 0s !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content *, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transition-property: color, -webkit-text-fill-color !important; transition-duration: 0.3s, 0.3s !important; transition-timing-function: ease, ease !important; transition-delay: 0s, 0s !important; } /* KEYBOARD FOCUS — same fill fade, text stays white */ html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: #5d588e !important; transition-property: color, -webkit-text-fill-color, background-color !important; transition-duration: 0.15s, 0.15s, 0.15s !important; transition-timing-function: ease, ease, ease !important; } html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus *, html body header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible *, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus *, html body .site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transition-property: color, -webkit-text-fill-color !important; transition-duration: 0.15s, 0.15s !important; transition-timing-function: ease, ease !important; } } /* ========================================================= FINAL SHOWREEL WHITE BUTTON BAR FIX ========================================================= ONLY addresses: 1. Desktop: all five white-group buttons in ONE row. 2. All five buttons: NORMAL = white fill / slate-purple text / slate-purple border HOVER = slate-purple fill / white text / white border Anchor positions are deliberately NOT changed here. ========================================================= */ /* --------------------------------------------------------- DESKTOP — FORCE ALL FIVE BUTTONS INTO ONE ROW --------------------------------------------------------- */ @media screen and (min-width: 782px) { html body .storia-breakout-bar, html body .storia-breakout-bar.is-stuck { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; grid-auto-flow: column !important; column-gap: 15px !important; row-gap: 0 !important; align-items: stretch !important; box-sizing: border-box !important; } /* WordPress can wrap the five buttons inside one or more .wp-block-buttons containers. display: contents removes those visual wrapper boxes so the five actual buttons become the five grid items. */ html body .storia-breakout-bar .wp-block-buttons, html body .storia-breakout-bar.is-stuck .wp-block-buttons { display: contents !important; } html body .storia-breakout-bar .wp-block-button, html body .storia-breakout-bar.is-stuck .wp-block-button { display: block !important; grid-column: auto !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; } html body .storia-breakout-bar .wp-block-button > .wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button > .wp-block-button__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 65px !important; margin: 0 !important; padding: 10px 8px !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; transform: none !important; } } /* --------------------------------------------------------- ALL FIVE BUTTONS — NORMAL / VISITED --------------------------------------------------------- */ html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:visited, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:visited { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link *, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link * { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; } /* --------------------------------------------------------- ALL FIVE BUTTONS — HOVER / FOCUS / ACTIVE --------------------------------------------------------- */ html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:hover, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus-visible, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:active, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:hover, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus-visible, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:active { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; opacity: 1 !important; filter: none !important; transform: none !important; } html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:hover *, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus *, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus-visible *, html body .storia-breakout-bar .wp-block-button > a.wp-block-button__link:active *, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:hover *, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus *, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus-visible *, html body .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= SHOWREEL & FILMS — DESKTOP CAREER MILESTONES APPLE TV TARGET ========================================================= DESKTOP ONLY. MOBILE IS UNCHANGED. Career Milestones is positioned by JavaScript against the ACTUAL Apple TV oval image, not against the WordPress anchor. The JavaScript reads the Career Milestones button's real href dynamically, so it does not depend on a guessed anchor ID. These rules neutralise older desktop scroll-margin values attached to milestone anchors. ========================================================= */ @media screen and (min-width: 782px) { html body.page-id-667 #career-milestones-scroll, html body.page-id-667 #awards-and-milestones-scroll, html body.page-id-667 [id*="career" i][id*="milestone" i], html body.page-id-667 [id*="award" i][id*="milestone" i], html body.page-id-667 [id*="milestone" i][id*="scroll" i] { scroll-margin-top: 0 !important; scroll-margin-block-start: 0 !important; } } /* ========================================================= SHOWREEL & FILMS — MOBILE WHITE BUTTON GROUP FINAL FIX ========================================================= MOBILE ONLY. Desktop remains untouched. Mobile layout: Row 1: Full Showreel | Career Milestones Row 2: Spotlight Scenes | Contact Me Row 3: Looking For The Full Story? — FULL WIDTH JavaScript keeps the bar fixed directly beneath the mobile header at all times and moves the five REAL button elements into .storia-mobile-grid, so WordPress wrapper structure can no longer force the fifth button back to the left. ========================================================= */ @media screen and (max-width: 781px) { html body .storia-breakout-bar.mobile-always-visible { position: fixed !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 20px !important; background: #ffffff !important; box-sizing: border-box !important; z-index: 999999 !important; transform: none !important; translate: none !important; overflow: visible !important; /* CRITICAL MOBILE FIX: the old mobile CSS makes .storia-breakout-bar itself a two-column grid. That caused .storia-mobile-grid to occupy only the LEFT HALF of the white group. Make the OUTER white group a normal block. The INNER .storia-mobile-grid below is the only two-column grid. */ display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: initial !important; column-gap: 0 !important; row-gap: 0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; } html body .storia-breakout-bar.mobile-always-visible > .storia-mobile-grid { display: grid !important; position: relative !important; left: 0 !important; right: auto !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; grid-auto-flow: row !important; column-gap: 14px !important; row-gap: 20px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body .storia-mobile-grid > .wp-block-button { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body .storia-mobile-grid > .wp-block-button:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; } html body .storia-mobile-grid > .wp-block-button:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } html body .storia-mobile-grid > .wp-block-button:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; } html body .storia-mobile-grid > .wp-block-button:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } /* Fifth button fills the ENTIRE third row. */ html body .storia-mobile-grid > .wp-block-button:nth-child(5) { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } html body .storia-mobile-grid > .wp-block-button > .wp-block-button__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 70px !important; margin: 0 !important; padding: 10px 8px !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; transform: none !important; } /* Spacer preserves the original page layout while the actual white button group is fixed above the page. */ html body .storia-mobile-fixed-spacer { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; visibility: hidden !important; } } /* ========================================================= SHOWREEL & FILMS — FINAL MOBILE VISUAL-TARGET SCROLL FIX ========================================================= MOBILE ONLY. DESKTOP IS UNCHANGED. IMPORTANT: The three problem buttons were not actually meant to land on the physical anchor elements themselves. The JavaScript now targets the VISUAL content shown in the desired screenshots: - Career Milestones -> Apple TV image - Spotlight Scenes -> "Selected Spotlight Scenes" - Contact Me -> "Ready To Shape The Sonic Identity Of Your Film?" Fine tuning is therefore done in JavaScript against those visual targets, not against the old anchor positions. ========================================================= */ @media screen and (max-width: 781px) { html:has(body.page-id-667), body.page-id-667 { scroll-behavior: auto !important; overflow-anchor: none !important; } /* Neutralise every older mobile scroll-margin rule for the five white-group destinations. The new JavaScript controls the final mobile viewport position directly. */ html body.page-id-667 #showreel-2-scroll, html body.page-id-667 #career-milestones-scroll, html body.page-id-667 #spotlight-scenes-scroll, html body.page-id-667 #contact-scroll, html body.page-id-667 #full-story-scroll { scroll-margin-top: 0 !important; scroll-margin-block-start: 0 !important; overflow-anchor: none !important; } /* Invisible extra scroll room for destinations close to the bottom of the page (especially Contact / Full Story). JavaScript changes the height only when necessary. */ html body.page-id-667 .storia-mobile-scroll-reserve { display: block !important; width: 1px !important; height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; } } /* ========================================================= SHOWREEL & FILMS — MOBILE BUTTON RELEASE RESET ========================================================= MOBILE ONLY. DESKTOP HOVER BEHAVIOUR IS UNCHANGED. iPhone/Safari can keep :hover or :focus after a tap. On mobile: - resting / released / focused = WHITE - while finger is physically pressing (:active) = PURPLE ========================================================= */ @media screen and (max-width: 781px) { /* Buttons 1–5: released/resting state, including sticky mobile :hover and :focus states. */ html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:visited, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:hover, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus-visible, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:visited, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:hover, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus-visible { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; border: 2px solid #5d588e !important; border-color: #5d588e !important; opacity: 1 !important; filter: none !important; transform: none !important; } html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link *, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:visited *, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:hover *, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus *, html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:focus-visible *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:visited *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:hover *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:focus-visible * { color: #5d588e !important; -webkit-text-fill-color: #5d588e !important; } /* Buttons 1–5: only while the finger is physically down. */ html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:active, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:active { background: #5d588e !important; background-color: #5d588e !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 2px solid #ffffff !important; border-color: #ffffff !important; } html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link:active *, html body.page-id-667 .storia-breakout-bar.is-stuck .wp-block-button > a.wp-block-button__link:active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } } .allnbtn:hover { background: #5d588e !important; color: #ffffff !important; } /* ========================================================= SHOWREEL & FILMS — MOBILE CORRECT LAYOUT FROM FIRST PAINT ========================================================= MOBILE ONLY. DESKTOP IS UNCHANGED. ROOT FIX: Before JavaScript creates .storia-mobile-grid, WordPress's original nested wrappers can briefly render the five buttons as five full-width rows. Hide only that temporary, incorrect pre-initialised state. JavaScript adds .mobile-layout-ready immediately after it has created the correct 2 + 2 + 1 layout, then the bar is shown. This prevents the incorrect 1 + 1 + 1 + 1 + 1 arrangement from ever being visible to the visitor. ========================================================= */ @media screen and (max-width: 781px) { html body.page-id-667 .storia-breakout-bar:not(.mobile-layout-ready) { visibility: hidden !important; } .newonewrap a { white-space: nowrap !important; } .ttcen { text-align: center !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready { visibility: visible !important; } /* Once ready, enforce the outer/inner relationship one final time: outer white bar = full-width block; inner mobile grid = the ONLY 2-column grid. */ html body.page-id-667 .storia-breakout-bar.mobile-layout-ready { display: block !important; width: 100vw !important; max-width: 100vw !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; grid-auto-flow: row !important; column-gap: 14px !important; row-gap: 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid > .wp-block-button:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid > .wp-block-button:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid > .wp-block-button:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid > .wp-block-button:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; } html body.page-id-667 .storia-breakout-bar.mobile-layout-ready > .storia-mobile-grid > .wp-block-button:nth-child(5) { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================= SHOWREEL & FILMS — DESKTOP SMOOTH SCROLL ========================================================= DESKTOP ONLY. MOBILE IS UNCHANGED. Native anchor movements on this page should animate smoothly. The custom Career / Full Showreel JavaScript temporarily switches this to "auto" internally only while it performs its own frame-by-frame smooth animation. ========================================================= */ @media screen and (min-width: 782px) { html:has(body.page-id-667), body.page-id-667 { scroll-behavior: smooth !important; } } /* ========================================================= FINAL MOBILE NAVIGATION COLOUR FIX ALL LINKS IN THE OPEN MOBILE MENU STAY WHITE ========================================================= */ @media screen and (max-width: 781px) { .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content *, .wp-block-navigation__responsive-container.is-menu-open a, .wp-block-navigation__responsive-container.is-menu-open a *, .wp-block-navigation__responsive-container.is-menu-open button, .wp-block-navigation__responsive-container.is-menu-open button *, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } } /* ========================================================= SHOWREEL & FILMS — MOBILE TAP/SCROLL ANTI-JITTER ========================================================= MOBILE ONLY. DESKTOP IS UNCHANGED. The JavaScript now performs one smooth scroll instead of repeatedly rebuilding/repositioning the fixed white bar. These rules also remove Safari's extra tap-flash/transition work while a white-group button is being pressed. ========================================================= */ @media screen and (max-width: 781px) { html body.page-id-667 .storia-breakout-bar.mobile-always-visible, html body.page-id-667 .storia-breakout-bar.mobile-always-visible > .storia-mobile-grid { animation: none !important; transition: none !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } html body.page-id-667 .storia-breakout-bar .wp-block-button > a.wp-block-button__link { transition: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; touch-action: manipulation !important; } } .wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) { margin: 0; width: calc(30% - var(--wp--style--unstable-gallery-gap, 16px) / 2); } .dghp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; align-items: center; } .dghp > figure { display: flex; justify-content: center; align-items: center; margin: 0; } @media (max-width: 767px) { .dghp { grid-template-columns: repeat(6, 1fr); } /* Normally 3 items per row */ .dghp > figure { grid-column: span 2; } /* If 2 items remain, make both 50% */ .dghp > figure:nth-child(3n + 1):nth-last-child(2), .dghp > figure:nth-child(3n + 1):nth-last-child(2) + figure { grid-column: span 3; } /* If only 1 item remains, make it full width */ .dghp > figure:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } } @media (min-width: 1024px) { /* 60 columns: each item spans 12, so there are 5 per row */ .dghp { grid-template-columns: repeat(60, minmax(0, 1fr)); } .dghp > figure { grid-column: span 12; } /* 4 items in the last row: each 25% */ .dghp > figure:nth-child(5n + 1):nth-last-child(4), .dghp > figure:nth-child(5n + 1):nth-last-child(4) ~ figure { grid-column: span 15; } /* 3 items in the last row: each 33.33% */ .dghp > figure:nth-child(5n + 1):nth-last-child(3), .dghp > figure:nth-child(5n + 1):nth-last-child(3) ~ figure { grid-column: span 20; } /* 2 items in the last row: each 50% */ .dghp > figure:nth-child(5n + 1):nth-last-child(2), .dghp > figure:nth-child(5n + 1):nth-last-child(2) ~ figure { grid-column: span 30; } /* 1 item in the last row: full width */ .dghp > figure:last-child:nth-child(5n + 1) { grid-column: 1 / -1; } } .page-id-854 .wp-block-heading { margin-top: 7rem !important; } /* ========================================================= MOBILE MENU — CENTRED SINGLE STACK ========================================================= MOBILE ONLY. DESKTOP IS UNCHANGED. Hides the "Jordan Media Composer" parent label (and its dropdown arrow) in the open mobile menu, then stacks every item — including the dropdown items — in one centred column. ========================================================= */ @media screen and (max-width: 781px) { .page-id-854 .storia-breakout-bar { position: fixed !important; top: 80px !important; } .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { text-align: center !important; } /* Hide the parent label + arrow */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle { display: none !important; } /* Dropdown items join the main stack */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px !important; text-align: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: inline-block !important; padding: 0 !important; text-align: center !important; } .page-id-886 [id*="milestone" i][id*="scroll" i] { scroll-margin-top: 220px !important; } } @media screen and (max-width: 781px) { .storia-breakout-bar .wp-block-button__link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 35px !important; margin: 0 !important; padding: 0px 4px !important; box-sizing: border-box !important; text-align: center !important; white-space: normal !important; transform: none !important; font-size: 10px !important; /* white-space: nowrap !important; */ line-height:1 !important; } .storia-breakout-bar { position: -webkit-sticky !important; position: sticky !important; top: 120px !important; bottom: auto !important; left: auto !important; right: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; column-gap: 5px !important; row-gap: 7px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 10px !important; padding-right: 10px !important; padding-bottom: 0px !important; padding-left: 10px !important; background-color: #ffffff !important; box-sizing: border-box !important; z-index: 1000 !important; transform: none !important; overflow: visible !important; } html body #career-milestone-scroll { scroll-margin-top: 180px !important; } html body #crowning-scroll, html body #all-review-scroll, html body #all-testimonial-scroll { scroll-margin-top: 180px !important; } .btnfomob { position: fixed !important; top: 80px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0px !important; background: #ffffff !important; box-sizing: border-box !important; z-index: 999999 !important; transform: none !important; translate: none !important; overflow: visible !important; } .btnfomob .storia-breakout-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .btnfomob .storia-breakout-bar > :last-child { grid-column: 1 / -1 !important; } .compbtn .wp-block-button__link { text-align: center !important; } html body #full-story-scroll { scroll-margin-top: 220px !important; } html body #showreel-2-scroll { scroll-margin-top: 210px !important; } .addsbtn { margin-top: 70px !important; } }