/* Worldclass Management — shared stylesheet Organised block by block; each section maps to one Gutenberg block. */ :root{ --ink:#0a0a0c; --ink-2:#141419; --paper:#ffffff; /* Neutral grey — equal channels, no hue. Was #f0f0f4, which carried a slight blue-violet cast from the old palette. Same lightness. */ --paper-2:#f0f0f0; --line:#dcdce4; /* Brand accents. The names are historical: --teal is the LIGHT accent (kickers, hover states, links on dark), --violet the DEEP one (buttons, links on light, focus rings). The current pair matches the PDF brochure. The -rgb twins carry the same colour as bare channels so the translucent washes below can be written rgba(var(--teal-rgb),.12) — that way a palette swap is these five lines and nothing else. LEGACY SET — restore by pasting over the five lines below: --teal:#2fb89a; --teal-rgb:47,184,154; --violet:#5a4bc4; --violet-rgb:90,75,196; --grad:linear-gradient(100deg,#2fb89a 0%,#3f7fbf 45%,#6a4fd0 100%); (Full pre-swap copies also sit in assets/css/site.css.brand-teal-violet.bak and artist-services.html.brand-teal-violet.bak, from when that page carried the ramp again as an inline SVG gradient. The .srow__icon paint server still needs one, but site.js now reads its stops back out of --grad, so a swap here reaches it too.) */ --teal:#bf70df; --teal-rgb:191,112,223; --violet:#1c49a7; --violet-rgb:28,73,167; --grad:linear-gradient(100deg,#bf70df 0%,#6d5cc3 45%,#1c49a7 100%); --text-dark:#0f0f14; --text-mute:#55555f; /* Height of the bar in its top-of-page state: 18px padding, the 170px logo, 18px again. Page headers start UNDER the fixed bar, so they pad past this or the eyebrow line runs into the logo — which is exactly what happened when the logo grew and the padding stayed put. Anything clearing the bar should measure from here, not from a copied number. */ --nav-h-top:206px; /* And the bar's height on a narrow screen once scrolled — now set by the 44px menu button rather than the wordmark, which is shallower. Anything that parks itself directly beneath the bar measures from here. */ --nav-h-mobile:56px; /* Inner bevel, taken off the logo artwork: a light rim catching the top edge and a dark one under the bottom, as if lit from above. One pair of inset shadows, shared by every FILLED button so the four of them cannot drift apart. Outlined buttons (.btn-ghost, .btn-line) deliberately skip it — there is no body to catch the light, and on white the highlight is invisible anyway. Keep both stops subtle: past about .3 on the top rim it stops reading as a machined edge and starts reading as a gel button. --bevel-ink is the same idea for near-black buttons, where the lower shadow has nothing left to darken. */ --bevel:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.28); --bevel-ink:inset 0 1px 0 rgba(255,255,255,.10); } /* --violet is deliberately dark — it carries links and buttons on the white bands, where it reads at 8:1. But it also terminates --grad, and a gradient headline on the near-black sections fades out over its last third: #1c49a7 on --ink is 2.4:1, under the 3:1 large-text floor. So the dark bands run a ramp whose end stop is lifted to #2f63cf (3.6:1) — same hue, enough light to stay legible. Redefining the property rather than the rule means every descendant that paints with var(--grad) — headline fills, the 3px bars, .btn-primary — picks the lifted ramp up automatically. The brand colours themselves are untouched: this is the wash only. */ .hero,.elite,.events,.page-head,.artists,.ahero,.abook, .sbar,.srow--dark,.media--dark,footer,.nav{ --grad:linear-gradient(100deg,#bf70df 0%,#7769d7 45%,#2f63cf 100%)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Inter',sans-serif;color:var(--text-dark);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden} /* Cormorant defaults to old-style figures, where the 1 has no base serif and reads as an I (and digits sit at mixed heights). Lining figures give even, cap-height numerals — the right set for display use. */ .serif{font-family:'Cormorant Garamond',serif; font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1} /* background-clip:text paints the gradient only within the element's own box. Where line-height is under 1, that box ends up shorter than the glyphs and the tops of caps and the tails of descenders get no fill at all — they just vanish. Pad the box out to cover them, then pull it back with matching negative margins so nothing actually moves. */ .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; padding-top:.16em;padding-bottom:.2em;margin-top:-.16em;margin-bottom:-.2em} /* ========================================================== BLOCK: wcl/nav Mirrors core/navigation: .nav__item--has-children ↔ .has-child, .nav__submenu ↔ .wp-block-navigation__submenu-container ========================================================== */ /* Fixed rather than absolute so it rides along on scroll. The states are INVERTED on purpose: the bar carries its background by default, and JS removes it via .is-top while the page is at the top. That way, if the script never runs, you get a solid legible bar rather than white nav text invisible on a light section. The scrolled ground is FLAT ink, not the 88% it used to be. Once the page moves, the bar travels over the light sections, and a translucent ground let them bleed up through it — enough to wash out light-on-transparent logo artwork exactly where it needed to hold. Opaque also makes the backdrop blur pointless, so that is gone with it. At the top of the page the bar still disappears: the hero behind it is dark and full-bleed, and the transparency is the point of that treatment. */ .nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center; justify-content:space-between;padding:9px 48px; background:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.35); transition:padding .25s ease,background-color .25s ease,box-shadow .25s ease} .nav.is-top{padding:18px 48px;background:transparent;box-shadow:none} /* TWO lockups, one visible per state. At the top of the page the bar is tall and transparent over the hero, so the full badge has room; once it goes sticky the bar is 100px of ink across the whole screen, and a badge that deep either forces the bar taller or shrinks the wordmark under it to nothing. The wide cut is the same artwork set as one line — it fills a shallow bar instead of fighting it. Swapped by display, not opacity: both would otherwise occupy the flex row and the brand would keep the width of the wider one. */ .nav__logo{width:100px;transition:width .25s ease} .nav.is-top .nav__logo{width:170px} /* .nav-scoped so it outranks the display:block in the brand-lockup block further down the file — same source-order trap the logo width hit. */ .nav .nav__logo--word{display:none} .nav:not(.is-top) .nav__logo--mark{display:none} .nav:not(.is-top) .nav__logo--word{display:block;width:230px} /* Anchor targets must clear the bar in its scrolled state, which is what you're in whenever an in-page anchor fires. That bar is 70px tall now the scrolled state carries the wordmark (9px padding + a 52px lockup), so this leaves a deliberate ~20px gap. It tracks the SCROLLED lockup — grow that and this grows with it. */ section[id],header[id]{scroll-margin-top:90px} @media(prefers-reduced-motion:reduce){ .nav,.nav__logo{transition:none} } .nav .brand{font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:3px;color:#fff;font-weight:600} .nav .brand small{display:block;font-family:'Inter';font-size:9px;letter-spacing:6px;font-weight:300;color:#b9b7c8;margin-top:-2px} .nav__menu{display:flex;gap:30px;list-style:none} .nav a{color:#e8e7ef;text-decoration:none;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:400;opacity:.85;transition:opacity .2s} /* The brand is a link, so the rule above was dimming the logo to 85% and lifting it to full only on hover. Menu items earn that treatment; the identity does not — it stays at full strength in every state. */ .nav a.nav__brand,.nav a.nav__brand:hover{opacity:1} .nav a:hover{opacity:1} .nav__item{position:relative} /* Parent with a submenu */ .nav__item--has-children > .nav__link{display:inline-flex;align-items:center;gap:7px;padding-bottom:14px;margin-bottom:-14px} .nav__caret{width:8px;height:8px;flex:0 0 auto;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .25s ease,opacity .2s;opacity:.65} .nav__item--has-children:hover .nav__caret, .nav__item--has-children.is-open .nav__caret{transform:rotate(180deg);opacity:1} /* Submenu panel */ .nav__submenu{position:absolute;top:100%;left:-18px;min-width:218px;list-style:none;display:block; padding:8px;margin-top:12px;border-radius:4px; background:rgba(14,14,18,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility .22s} /* Gradient hairline picks up the brand ramp used on buttons and hover bars */ .nav__submenu::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);border-radius:4px 4px 0 0} /* focus-within is scoped to the panel, not the whole item — otherwise Escape can't close it, since returning focus to the trigger would reopen it */ .nav__item--has-children:hover .nav__submenu, .nav__item--has-children.is-open .nav__submenu, .nav__submenu:focus-within{opacity:1;visibility:visible;transform:translateY(0)} /* Bridges the gap between trigger and panel so the pointer can travel down */ .nav__submenu::after{content:'';position:absolute;left:0;right:0;top:-12px;height:12px} .nav__submenu a{display:block;position:relative;padding:12px 16px 12px 18px;border-radius:2px;opacity:1; white-space:nowrap; font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:1px;text-transform:none; color:#fff;line-height:1.15;font-weight:600;transition:background .2s,color .2s} .nav__submenu a:hover,.nav__submenu a:focus-visible{background:rgba(255,255,255,.05)} /* Same left-bar motif as the roster cards */ .nav__submenu a::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--grad);border-radius:2px;transform:scaleY(0);transform-origin:center;transition:transform .25s ease} .nav__submenu a:hover::before,.nav__submenu a:focus-visible::before{transform:scaleY(1)} .nav__toggle{display:none} @media(prefers-reduced-motion:reduce){ .nav__submenu,.nav__caret,.nav__submenu a::before{transition:none} } /* ========================================================== BLOCK: wcl/hero Block attributes → eyebrow, heading, sub, ctaPrimary, ctaSecondary, mediaType (video|vimeo), mediaSrc, posterSrc Self-contained: no styles leak in or out of .hero ========================================================== */ .hero{position:relative;min-height:100vh;background:var(--ink);display:flex;align-items:center;overflow:hidden} /* Media layer — swap