/* BKK nav - loaded on EVERY page. * * Split out of bkk-home.css, which is enqueued only on home-design pages. The nav is * moving to the whole public site, and without these rules it renders as an unstyled, * transparent, full-width bar with all five dropdown panels hanging open - nothing in the * markup closes them, only `.bkk-v6 .bkk-mega-panel{visibility:hidden}` below. * * Selectors keep their `.bkk-v6` prefix on purpose: the Nav widget emits its own * `bkk-v6 bkk-v6-scope` wrapper, so they match wherever it is placed, and they stay inert * on pages carrying no BKK markup. * * The token block is COPIED, not moved - the page wrapper in bkk-home.css needs it too. */ /* BKK by XYZ — v6 homepage styles (companion to the [bkk_home] shortcode). Most styling is inline on the markup; this file holds what inline can't do: keyframes, media queries, :hover/:focus states, and scroll-reveal base states. */ /* The v6 wrapper's own declaration, previously written INLINE on the single markup blob (
). Moved here so the wrapper can be an ordinary Elementor container carrying just the `bkk-v6` class, which is what lets the homepage be built from widgets instead of one HTML block. This is additive and changes nothing on its own: while the inline attribute is still present it wins on specificity, and the values below are identical to it. Every token is required. body.bkk-elpage (bkk-elementor.css) declares most of them, but NOT --cyan or --bg2, both of which this page uses - so the set has to live here. */ .bkk-v6{ --bg:#08080B; --bg2:#0E0E15; --panel:#13131C; --ink:#F5F3EC; --mut:#9A9AA8; --faint:#6A6A78; --gold:#FF2D2D; --gold2:#FF6B6B; --cyan:#FF5C5C; --line:rgba(255,255,255,0.09); background:var(--bg); color:var(--ink); font-family:'Space Grotesk',-apple-system,sans-serif; position:relative; overflow-x:hidden; } /* Portable design scope for the BKK Elementor widgets. * * The original page has exactly ONE .bkk-v6, wrapping everything from the nav to #hubs. * A widget that ends up outside it loses the tokens, the heading cap and every responsive * rule below, and silently renders wrong - a bug we have shipped twice now, once at 61px * vs 69px on desktop and once as a 492px collapse on mobile. * * So a widget wraps itself in `bkk-v6 bkk-v6-scope`. It genuinely CARRIES .bkk-v6, so * every `.bkk-v6 ...` rule in this file matches its contents with no selector duplication. * display:contents then removes the wrapper's own box, so it contributes no background, no * containing block, no stacking context and no overflow edge - nested inside the real * .bkk-v6 it is completely inert, and standing alone it still styles its contents. * * Must come AFTER the .bkk-v6 block above so the display wins on equal specificity. * Widgets whose original markup sat OUTSIDE .bkk-v6 - the gallery and the mailing form - * must not emit it at all; see Section_Base::in_v6(). */ .bkk-v6-scope{ display:contents; } /* nav sign-in link reads "Portal" once WP marks the user logged-in (body.logged-in is set server-side per request, so this is per-user with no flash — both labels are baked, CSS just toggles which shows). */ .bkk-auth-in{ display:none; } body.logged-in .bkk-auth-out{ display:none; } body.logged-in .bkk-auth-in{ display:inline; } @keyframes bkkPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } } @keyframes bkkEq{ 0%,100%{ transform:scaleY(0.25); } 50%{ transform:scaleY(1); } } @keyframes bkkRing{ 0%{ transform:scale(0.66); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } } /* ===== nav ===== */ .bkk-v6 #bkk-nav .bkk-logo{ height:96px; width:auto; transition:height .35s ease; } .bkk-v6 #bkk-nav.scrolled{ background:rgba(8,8,11,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line) !important; } .bkk-v6 #bkk-nav.scrolled .bkk-logo{ height:61px; } .bkk-v6 .bkk-mega{ position:relative; } .bkk-v6 .bkk-mega-trig{ cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mut); text-decoration:none; transition:color .25s; } .bkk-v6 .bkk-mega:hover .bkk-mega-trig{ color:var(--gold); } .bkk-v6 .bkk-mega-trig span{ font-size:9px; transition:transform .25s; } .bkk-v6 .bkk-mega:hover .bkk-mega-trig span{ transform:rotate(180deg); } .bkk-v6 .bkk-mega-panel{ position:absolute; top:100%; left:0; width:min(280px,88vw); padding-top:18px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s,transform .25s,visibility .25s; z-index:95; } .bkk-v6 .bkk-mega:hover .bkk-mega-panel{ opacity:1; visibility:visible; transform:translateY(0); } .bkk-v6 .bkk-mega-inner{ background:rgba(13,13,21,0.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,0.55); } .bkk-v6 .bkk-mega-eyebrow{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; } .bkk-v6 .bkk-mega-link{ display:block; padding:9px 0; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mut); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.05); transition:color .2s,padding-left .2s; } .bkk-v6 .bkk-mega-link:hover{ color:var(--gold); padding-left:7px; } .bkk-v6 .bkk-signin{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--ink); border:1px solid var(--line); padding:9px 18px; border-radius:100px; text-decoration:none; white-space:nowrap; transition:border-color .25s,color .25s; } .bkk-v6 .bkk-signin:hover{ border-color:var(--gold); color:var(--gold); } .bkk-v6 .bkk-ptoggle{ cursor:pointer; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); color:var(--ink); font-size:12px; background:transparent; transition:all .25s; } .bkk-v6 .bkk-ptoggle svg{ width:15px !important; height:15px !important; min-width:15px !important; flex:0 0 15px !important; fill:currentColor !important; display:block !important; } .bkk-v6 .bkk-ptoggle:hover{ border-color:var(--gold); color:var(--gold); background:rgba(255,45,45,0.06); } .bkk-v6 .bkk-ptoggle.is-on{ border-color:var(--gold); color:var(--gold); background:rgba(255,45,45,0.1); } /* ===== shared hover states (base look stays inline) ===== */ .bkk-v6 .bkk-hv-gold{ transition:transform .25s,box-shadow .25s; } .bkk-v6 .bkk-hv-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,45,45,0.34); } .bkk-v6 .bkk-hv-outline:hover{ border-color:rgba(255,255,255,0.3) !important; background:rgba(255,255,255,0.05) !important; } .bkk-v6 .bkk-meter{ display:flex; align-items:flex-end; gap:2px; height:18px; } .bkk-v6 .bkk-meter i{ flex:1; height:100%; background:var(--gold); border-radius:1px; transform-origin:bottom; animation:bkkEq 0.9s ease-in-out infinite; } /* ===== nav now-playing pill ===== */ .bkk-v6 .bkk-navplayer.hidden{ display:none !important; } .bkk-v6 .bkk-navplayer:hover{ border-color:rgba(255,45,45,0.5) !important; background:rgba(255,45,45,0.06) !important; } .bkk-v6 .bkk-meter--nav{ height:14px; } /* Responsive nav, lifted out of media blocks in bkk-home.css that also carried layout rules for the rest of the page. Without these the nav keeps all its links at phone width, where there is no room for them and no menu button to collapse them into. */ @media (max-width:920px){ .bkk-v6 .bkk-navlinks > div:first-child{ display:none !important; } } @media (max-width:560px){ .bkk-v6 .bkk-signin{ display:none; } } /* ============================================================ keyboard access * * The dropdown panels opened on :hover only, so 25 of the nav's 27 links could not be * reached by keyboard or on a touch screen at all - the trigger is an , * so tapping it jumped to a section instead of revealing the menu. * * :focus-within is added ALONGSIDE :hover rather than replacing it, so pointer behaviour is * byte-identical and keyboard users get the same panel. A visible focus ring is added * because the theme sets none, and an invisible focus position is unusable regardless of * whether the panel opens. */ .bkk-v6 .bkk-mega:focus-within .bkk-mega-trig{ color:var(--gold); } .bkk-v6 .bkk-mega:focus-within .bkk-mega-trig span{ transform:rotate(180deg); } .bkk-v6 .bkk-mega:focus-within .bkk-mega-panel{ opacity:1; visibility:visible; transform:translateY(0); } .bkk-v6 #bkk-nav a:focus-visible, .bkk-v6 #bkk-nav button:focus-visible, .bkk-v6 .bkk-drawer a:focus-visible, .bkk-v6 .bkk-drawer button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } /* ================================================================ mobile menu * * Below 920px the nav had no menu at all: the links were set to display:none and there was * no button anywhere in the markup to bring them back. A phone visitor saw a logo, a music * toggle and Enroll. * * The button is hidden at desktop width, so nothing above 920px changes. The drawer's * contents are cloned from the real menus at runtime, so whatever the Nav widget renders - * including menus edited in Elementor - is what appears here, with nothing to keep in sync * by hand. */ .bkk-v6 .bkk-navtoggle{ display:none; } .bkk-v6 .bkk-drawer{ position:fixed; inset:0; z-index:88; background:rgba(8,8,11,0.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow-y:auto; overscroll-behavior:contain; opacity:0; transition:opacity .28s ease; } .bkk-v6 .bkk-drawer[hidden]{ display:none; } .bkk-v6 .bkk-drawer.is-open{ opacity:1; } .bkk-v6 .bkk-drawer-inner{ padding:118px clamp(22px,7vw,44px) 56px; display:flex; flex-direction:column; gap:26px; } .bkk-v6 .bkk-drawer-group{ border-bottom:1px solid var(--line); padding-bottom:20px; } .bkk-v6 .bkk-drawer-group:last-child{ border-bottom:0; } .bkk-v6 .bkk-drawer-title{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; } .bkk-v6 .bkk-drawer a{ display:block; padding:11px 0; font-family:'Archivo',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:20px; line-height:1.1; color:var(--ink); text-decoration:none; transition:color .2s, padding-left .2s; } .bkk-v6 .bkk-drawer a:hover{ color:var(--gold); padding-left:6px; } .bkk-v6 .bkk-drawer .bkk-drawer-cta{ display:inline-block; margin-top:6px; padding:13px 24px; border-radius:100px; background:var(--gold); color:#08080B; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; font-weight:700; text-transform:uppercase; } .bkk-v6 .bkk-drawer .bkk-drawer-cta:hover{ color:#08080B; padding-left:24px; } @media (max-width:920px){ /* Three bars that become a cross. Sized to match .bkk-ptoggle beside it. */ .bkk-v6 .bkk-navtoggle{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:30px; height:30px; padding:0; cursor:pointer; background:none; border:1px solid var(--line); border-radius:50%; align-items:center; transition:border-color .25s; } .bkk-v6 .bkk-navtoggle:hover{ border-color:var(--gold); } .bkk-v6 .bkk-navtoggle span{ display:block; width:13px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .28s ease, opacity .2s ease; } .bkk-v6 .bkk-navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .bkk-v6 .bkk-navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .bkk-v6 .bkk-navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } } /* The drawer is a phone/tablet affordance. If the viewport grows past the breakpoint while it is open - a rotated tablet, a resized window - it must not be left covering a desktop layout that already shows every link. The JS closes it on resize; this is the belt. */ @media (min-width:921px){ .bkk-v6 .bkk-drawer{ display:none !important; } } /* ===================================================== clearance and commerce * * These rules do nothing today: no page outside the homepage renders #bkk-nav yet. They * exist so Stage 1 can turn the nav on for a page without that page's content sliding * under it. * * .bkk-main reserves 70px, measured against the OLD 71px inner-page header. The BKK nav is * 129px unscrolled and 94px scrolled, so switching a page over without this leaves 59px of * its content permanently underneath the bar. Keying on :has(#bkk-nav) means the clearance * follows whichever header is actually on the page rather than a number somebody has to * remember to change twice. */ /* NOT `:has(#bkk-nav)`. `:has()` inherits the specificity of its most specific argument, so that selector scored as an ID and quietly outranked every later rule that tried to adjust it - including the one that stops the spacer and this padding from BOTH applying and leaving 258px of dead space at the top of the page. The body class carries no such surprise. */ body.bkk-has-sitenav .bkk-main{ padding-top:0; } /* Commerce gets the compact nav. * * Not taste - arithmetic. WooCommerce scrolls to its own error and validation messages with * a hardcoded offset of 100px (woocommerce.js `scrollTop: offset().top - 100`, used by * checkout.js on payment failure and by cart.js on every cart update). A 129px header puts * "your card was declined" behind the bar: the customer sees nothing happen and tries * again. At 94px the message clears the header, with no need to monkey-patch Woo's JS. * * A shorter header on a checkout page is also simply better - nobody is browsing there. */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account{ --bkk-header-h:94px; } body.woocommerce-cart #bkk-nav .bkk-logo, body.woocommerce-checkout #bkk-nav .bkk-logo, body.woocommerce-account #bkk-nav .bkk-logo{ height:61px; } /* ================================================ the nav on every public page * * Stage 1: inc/site-nav.php emits the bar on wp_body_open for every public page that is * not the homepage and not the portal, and adds .bkk-has-sitenav so these rules and the * spacer agree on one answer. * * The spacer, not padding on a wrapper: Elementor's Canvas template has no .bkk-main and * no reliable outer element to pad, and the pages that most needed a header - the hubs, * Plans, the shop - are all Canvas. An empty element of exactly the header's height works * the same on every template. */ .bkk-nav-spacer{ height:var(--bkk-header-h, 129px); flex:0 0 auto; } /* ---------------------------------------------- the WordPress admin bar * * Only administrators still see it (inc/admin-bar.php), but for them it was sitting ON TOP * of the site header: the bar is position:fixed at top:0 and so is #bkk-nav, so the bar's * 32px covered the header's 32px, clipping the brandmark. WordPress pushes the DOCUMENT * down with `html{margin-top:32px}` to make room, and a fixed element is positioned * against the viewport, so that push never reached the nav. * * The old rule here compensated in the wrong place - it padded the spacer by 32px, which * left the overlap AND added a 64px gap below the header. * * Measured behaviour of the bar, which is what these breakpoints follow: * >=783px fixed, 32px * 601-782 fixed, 46px * <=600 absolute, 46px - it scrolls away with the page */ /* !important because the nav carries `top:0` INLINE, and inline beats a stylesheet. */ body.admin-bar #bkk-nav{ top:32px !important; } /* The spacer sits in the flow, which already starts below the bar thanks to WordPress's margin on , so it only ever needs to be as tall as the header itself. */ body.admin-bar .bkk-nav-spacer{ height:var(--bkk-header-h, 129px); } @media screen and (max-width:782px){ body.admin-bar #bkk-nav{ top:46px !important; } } @media screen and (max-width:600px){ /* The bar stops being fixed here and scrolls away, so holding the header 46px down would leave a permanent empty strip. The header returns to the top and the spacer absorbs what the document margin already accounts for. */ body.admin-bar #bkk-nav{ top:0 !important; } body.admin-bar .bkk-nav-spacer{ height:calc(var(--bkk-header-h, 129px) - 46px); } } /* Pages that used to draw their own header stand down. * * The hub topbar carried a back-link, the hub tabs and a portal button. The nav now has * all three, so only the tabs are still worth having - they are the one thing it does not * do. Kept as a strip under the bar rather than sticky at top:0, where it sat behind the * fixed nav and could not be read at all. */ /* bkk-elementor.css pins this with `position:fixed !important`, so unpinning it takes the same force plus the .bkk-elpage scope - otherwise the hub tabs stay welded to the top of the viewport and land on top of the nav. */ body.bkk-has-sitenav .hub-topbar{ position:static !important; top:auto; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; padding-top:4px; padding-bottom:4px; justify-content:flex-start; } /* The back-link and the Member Portal button are both in the nav now. The tabs are the one thing it does not carry, so they are all that is left here. */ body.bkk-has-sitenav .hub-topbar > a:first-child, body.bkk-has-sitenav .hub-topbar > div > a:last-child{ display:none !important; } body.bkk-has-sitenav .bkk-portal-nav, body.bkk-has-sitenav #bkk-site-header{ display:none; } /* The releases archive prints a bare
for its title; that is a page heading, not site chrome, so it stays - but it must not sit under the bar. */ body.bkk-has-sitenav.post-type-archive .bkk-relgal{ padding-top:8px; } @media (max-width:900px){ body.bkk-has-sitenav .hub-topbar{ padding-left:clamp(14px,4vw,20px); padding-right:clamp(14px,4vw,20px); } } /* ============================================ WordPress's border-color booby trap * * Core ships `html :where([style*="border-color"]) { border-style: solid; }` in the block * global stylesheet. It is an ATTRIBUTE SUBSTRING match on the whole style attribute, so * it fires on any element whose inline style merely CONTAINS the text "border-color" - * including every element here that lists border-color in a `transition`. Those elements * declare a width for the one border they actually want and nothing for the other three, * so the browser fills those in with `medium`, which is 3px. * * The nav came out 132px tall instead of 129 on every page that loads the block styles, * with a 3px cream line across the top of the site. The homepage was fine only because it * strips the block stylesheet, which is why this went unnoticed. * * Zeroing the widths in a stylesheet is safe: an element that really wants a border * declares it inline, and inline wins. */ .bkk-v6 [style*="border-color"]{ border-width:0; } #bkk-nav{ border-top-width:0; border-left-width:0; border-right-width:0; } /* The Plans page opened with its own strip: a second BKK logo and a back-link, drawn directly under the nav. The logo is now a duplicate of the one two inches above it (and was hot-linked from the live site's CDN), so it goes; the back-link is the one thing on that strip the nav does not offer, so it stays. */ /* :first-of-type, not :first-child - the block opens with a