/* =========================================================
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;
}
.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: 30px !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: 50% !important;
right: auto !important;
transform: translateX(-50%) !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: 50% !important;
right: auto !important;
transform: translateX(-50%) !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: 123px !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;
}
}
/* =========================================================
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: 20px !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;
}
.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: -260px !important;
}
#drama-piano-anchor {
scroll-margin-top: -150px !important;
}
#kids-amazon-prime-anchor {
/* Audio Collection page only: place "Kids" just below the desktop navigation bar. */
scroll-margin-top: -250px !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: -750px !important;
}
#drama-piano-anchor {
scroll-margin-top: -230px !important;
}
#kids-amazon-prime-anchor {
scroll-margin-top: -200px !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: 50% !important;
right: auto !important;

transform: translateX(-50%) !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: 180px !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: 235px !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: 180px !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: 240px !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: 235px !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.30s ease,
    color 0.30s ease,
    border-color 0.30s 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: 50% !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: -130px !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: 50% !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: -130px !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;
}
}
Applies only on the Audio Collection page and only on
desktop. It moves every destination ending in "-anchor"
upward so its heading sits a few pixels below the universal
navigation bar.
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) {
    scroll-margin-top: 110px !important;
}
}
NORMAL:

White text

HOVER:

Text fades smoothly to slate purple (#5d588e)

This does NOT alter:

Home

Booking

Top-level Jordan Media Composer

Dropdown opening/closing

Dropdown size or position
========================================================= */

@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:
        color 0.30s ease,
        -webkit-text-fill-color 0.30s ease !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 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],
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] {
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;

transition:
    background-color 0.30s ease,
    color 0.30s ease,
    border-color 0.30s ease !important;
}
/* HOVER / KEYBOARD FOCUS / ACTIVE — slate-purple fill, white text and 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],
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],
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],
html body.home .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;
}

/* =========================================================
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.
 */

/* CAREER MILESTONES ONLY
   FINE-TUNE THIS NUMBER:
   larger = Career Milestones lands lower;
   smaller = Career Milestones lands higher. */
body.page-id-667 #career-milestones-scroll {
    scroll-margin-top: 24px !important;
}

/* OTHER FOUR BUTTONS — UNCHANGED */
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: 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:
CSS scroll-margin alone is not reliable here because the
white button group changes into a fixed element during the
same scroll. The actual landing calculation is therefore
handled by the companion JavaScript file supplied with this
CSS. This CSS section only enables smooth scrolling on page
ID 667 and does not alter any other page or element.
========================================================= */

body.page-id-667 {
scroll-behavior: smooth;
}

/* =========================================================
   SHOWREEL & FILMS — CAREER MILESTONES EXACT SCROLL FIX
   =========================================================
   This affects ONLY the Career Milestones button/anchor.
   The CSS scroll-margin rules above are left intact, but the
   actual +24px landing adjustment is performed by the small
   click script shown in the accompanying instructions.
   ========================================================= */

body.page-id-667 {
    scroll-behavior: auto !important;
}