/* ============================================================================= 02-page-styles-rev21.css · Academy · → child theme stylesheet Every rule scoped under .bnl-page--academy — that class must be on the page container in Bricks or none of this applies. Brace count and depth-walk both asserted at build (standard §4). rev21: carousel arrows and thumb sliders removed (16 dead rules deleted with them), and --radius-lg defined — it had been used since rev18 without ever being declared, so the price card and the leak panel were silently falling back to square corners. ============================================================================= */ /* ===== PREVIEW TOKEN STAND-INS — real values live in tokens.css v1.1 ===== */ :root{ --color-primary:#00A9B5; --color-pink:#E3056B; --color-orange:#FA6A1E; --color-white:#FFFFFF; --color-black-true:#000000; --color-bg:#0A0A0A; --color-bg-elevated:#161616; --color-bg-section:#101014; --color-text:#F5F5F5; --color-text-muted:#B8B8B8; --color-border:#3A3A3A; --gradient-brand:linear-gradient(135deg,#00A9B5 0%,#E3056B 100%); --font-heading:'Chakra Petch','Rajdhani',sans-serif; --font-body:'Inter','Helvetica Neue',sans-serif; --font-weight-semibold:600; --font-weight-bold:700; --text-small:13px; --text-body:16px; --text-h1:clamp(32px,5vw,48px); --text-h3:19px; --line-height-body:1.6; --line-height-heading:1.18; --space-xs:4px; --space-sm:8px; --space-md:16px; --space-ml:24px; --space-lg:32px; --space-xl:64px; --space-2xl:96px; --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px; --width-content:1100px; --shadow-glow-teal:0 0 28px rgba(0,169,181,.45); --focus-ring:2px solid #E3056B; --focus-ring-offset:3px; --font-heading-proposed:'Sora',var(--font-heading),sans-serif; --glow-ambient-teal:0 0 48px -12px color-mix(in srgb, var(--color-primary) 55%, transparent); --glow-ambient-pink:0 0 56px -10px color-mix(in srgb, var(--color-pink) 45%, transparent); /* ---- BRAND MARK COLOURS, sampled from the logo ---- */ --bn-magenta:#FF20E7; --bn-pink:#FF5FA8; --bn-orange:#FBA24A; --bn-yellow:#F6C636; --bn-flow:linear-gradient(90deg,#FF20E7 0%,#FF5FA8 22%,#FBA24A 44%,#F6C636 58%,#FBA24A 72%,#FF5FA8 86%,#FF20E7 100%); /* ---- Aluminium system ---- */ --al-raw:#6E757D; --al-brushed:#AFB7BF; --al-chrome:#EDF1F4; --chrome-ramp:linear-gradient(177deg,#F6FAFC 0%,#C7CFD6 11%,#7B838B 25%,#F1F5F8 39%, #545B63 53%,#CBD3D9 67%,#79818A 82%,#EBF0F4 100%); --chrome-ramp-h:linear-gradient(96deg,#EDF1F4 0%,#838B93 22%,#F2F6F8 40%,#5C636B 58%,#C4CCD2 78%,#E9EEF2 100%); --chrome-pink-ramp:linear-gradient(168deg,#F8FBFD 0%,#CAD2D9 14%,#7E868E 28%,#F1F5F8 44%, #6B7178 58%,#D4B4C4 74%,#E3056B 100%); --panel-premium: radial-gradient(120% 70% at 50% 118%, color-mix(in srgb, var(--color-pink) 30%, transparent), transparent 68%), repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 1px, rgba(0,0,0,.20) 1px, rgba(0,0,0,.20) 2px, transparent 2px, transparent 9px), linear-gradient(163deg,#333A42 0%,#1C2126 26%,#3E4650 54%,#1F242A 78%,#2C3239 100%); /* smooth premium panel — no channel lines (used where lines read as noise) */ --panel-smooth: radial-gradient(110% 80% at 18% 0%, rgba(255,255,255,.07), transparent 60%), radial-gradient(120% 90% at 88% 108%, color-mix(in srgb, var(--color-pink) 26%, transparent), transparent 66%), linear-gradient(157deg,#22272D 0%,#15191D 45%,#262C33 100%); --panel-seam:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); --edge-hi:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.6); --machined:0 1px 0 rgba(255,255,255,.10), 0 18px 44px -20px rgba(0,0,0,.88); --glow-pill:0 0 0 1px rgba(255,255,255,.10), 0 6px 18px -6px rgba(0,0,0,.9), 0 0 26px -6px color-mix(in srgb, var(--color-pink) 42%, transparent); } html{background:var(--color-bg);} body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body); font-size:var(--text-body);line-height:var(--line-height-body);overflow-x:clip;margin:0;} .preview-band{background:var(--color-black-true);color:var(--color-text-muted); font-family:var(--font-heading);letter-spacing:.05em;text-transform:uppercase; font-size:var(--text-small);padding:var(--space-md);text-align:center;border-bottom:1px solid var(--color-border);} .preview-band--footer{border-bottom:0;border-top:1px solid var(--color-border);} /* =================== PAGE =================== */ .bnl-page--academy{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body); font-size:var(--text-body);line-height:var(--line-height-body);overflow-x:clip;padding-bottom:84px;} .bnl-page--academy img{max-width:100%;} .bnl-page--academy section[id]{scroll-margin-top:90px;} .bnl-page--academy .bnl-crumbs{padding:var(--space-md) var(--space-md) 0;max-width:var(--width-content);margin:0 auto;} .bnl-page--academy .bnl-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-xs); font-size:var(--text-small);color:var(--color-text-muted);margin:0;padding:0;} .bnl-page--academy .bnl-crumbs li + li::before{content:"/";margin:0 var(--space-xs);color:var(--color-border);} .bnl-page--academy .bnl-crumbs a{color:var(--color-text-muted);text-decoration:none;} .bnl-page--academy .bnl-crumbs [aria-current]{color:var(--color-text);} .bnl-page--academy .bnl-section{padding:var(--space-xl) var(--space-md);} .bnl-page--academy .bnl-section__inner{max-width:var(--width-content);margin:0 auto;} .bnl-page--academy .bnl-section--alt{ background: radial-gradient(90% 52% at 12% 26%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 62%), radial-gradient(85% 48% at 88% 74%, color-mix(in srgb, var(--color-pink) 10%, transparent), transparent 62%), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-bg-section) 55%, transparent) 9%, color-mix(in srgb, var(--color-bg-section) 82%, transparent) 22%, color-mix(in srgb, var(--color-bg-section) 82%, transparent) 78%, color-mix(in srgb, var(--color-bg-section) 55%, transparent) 91%, transparent 100%);} .bnl-page--academy .bnl-section--metal{position:relative;background:var(--panel-premium);box-shadow:var(--edge-hi);} .bnl-page--academy .bnl-section--metal::before, .bnl-page--academy .bnl-section--metal::after{content:"";position:absolute;left:0;right:0;height:1px;} .bnl-page--academy .bnl-section--metal::before{top:0;background:var(--chrome-ramp-h);opacity:.8;} .bnl-page--academy .bnl-section--metal::after{bottom:0;background:var(--chrome-ramp-h);opacity:.35;} /* smooth deep band — replaces the channel-line background where it read as noise */ .bnl-page--academy .bnl-section--deep{position:relative;background:var(--panel-smooth);box-shadow:var(--edge-hi);} .bnl-page--academy .bnl-section--deep::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:var(--chrome-ramp-h);opacity:.6;} /* Type */ .bnl-page--academy .bnl-heading{font-family:var(--font-heading-proposed);font-weight:var(--font-weight-bold); line-height:var(--line-height-heading);letter-spacing:-0.02em;margin:0 0 var(--space-ml);} .bnl-page--academy .bnl-heading--section{font-size:clamp(30px,4.6vw,46px);} .bnl-page--academy .bnl-heading--center{text-align:center;} .bnl-page--academy .bnl-lede{color:var(--color-text-muted);margin:0 0 var(--space-lg);} .bnl-page--academy .bnl-lede--center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;} .bnl-page--academy .bnl-gradient-text{background:var(--gradient-brand);-webkit-background-clip:text; background-clip:text;color:var(--color-pink);-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-chrome-text{background:var(--chrome-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-brushed);-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));} .bnl-page--academy .bnl-chrome-pink{background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-brushed);-webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(227,5,107,.28));} .bnl-page--academy .bnl-link{color:var(--color-primary);} .bnl-page--academy .bnl-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;} .bnl-page--academy .bnl-eyebrow{font-family:var(--font-heading-proposed);font-size:12px; font-weight:var(--font-weight-semibold);letter-spacing:.2em;text-transform:uppercase; color:var(--al-brushed);margin:0 0 var(--space-sm);} .bnl-page--academy .bnl-rule{height:1px;background:var(--chrome-ramp-h);opacity:.5;margin:var(--space-lg) 0;border:0;} /* ---- Pills ---- */ .bnl-page--academy .bnl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; height:46px;padding:0 26px;border-radius:var(--radius-pill);font-family:var(--font-heading-proposed); font-size:15px;font-weight:var(--font-weight-bold);letter-spacing:.005em;line-height:1; white-space:nowrap;text-decoration:none;position:relative;isolation:isolate;border:0;cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;} .bnl-page--academy .bnl-btn svg{width:16px;height:16px;flex:none;} .bnl-page--academy .bnl-btn--primary{color:#0A0C0E; background:linear-gradient(180deg,#FFFFFF 0%,#D6DDE3 38%,#9AA2AA 54%,#E6ECF0 100%); box-shadow:var(--glow-pill), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.28);} .bnl-page--academy .bnl-btn--primary:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 10px 26px -8px rgba(0,0,0,.95), 0 0 36px -4px color-mix(in srgb, var(--color-pink) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.95);} .bnl-page--academy .bnl-btn--secondary{color:var(--al-chrome);background:color-mix(in srgb,#FFFFFF 5%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-brushed) 46%, transparent), inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px -8px rgba(175,183,191,.6);backdrop-filter:blur(6px);} .bnl-page--academy .bnl-btn--secondary:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--al-brushed), inset 0 1px 0 rgba(255,255,255,.28), 0 0 30px -6px rgba(0,169,181,.7);} /* live brand-gradient pill — the one that never leaves the screen */ .bnl-page--academy .bnl-btn--flow{color:#12060F;background:var(--bn-flow);background-size:220% 100%; background-position:0% 50%; box-shadow:0 6px 22px -6px rgba(0,0,0,.95), 0 0 30px -6px rgba(255,32,231,.55), inset 0 1px 0 rgba(255,255,255,.55);} .bnl-page--academy .bnl-btn--flow:hover{transform:translateY(-1px); box-shadow:0 10px 28px -8px rgba(0,0,0,.95), 0 0 44px -6px rgba(255,32,231,.75), inset 0 1px 0 rgba(255,255,255,.7);} @media (prefers-reduced-motion: no-preference){ .bnl-page--academy .bnl-btn--flow{animation:bnl-flow 7s linear infinite;} } @keyframes bnl-flow{from{background-position:0% 50%;} to{background-position:220% 50%;}} .bnl-page--academy .bnl-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .bnl-page--academy .bnl-btn:focus-visible, .bnl-page--academy .bnl-link:focus-visible, .bnl-page--academy .bnl-faq__q:focus-visible, .bnl-page--academy .bnl-wl__opt:focus-visible, .bnl-page--academy .bnl-fact:focus-visible, .bnl-page--academy input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);} /* ---- Media slots ---- */ .bnl-page--academy .bnl-slot{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.35rem;width:100%;margin-inline:auto;min-height:170px;aspect-ratio:16/9;overflow:hidden; background:repeating-linear-gradient(45deg,#1b1e21,#1b1e21 12px,#212528 12px,#212528 24px); border:1px dashed rgba(255,255,255,.28);border-radius:12px;padding:1rem;text-align:center;} /* background slots: label hoisted + dimmed so it can't read through a headline */ .bnl-page--academy .bnl-slot--bg{justify-content:flex-start;padding-top:14px;} .bnl-page--academy .bnl-slot--bg .bnl-slot__n{opacity:.28;font-size:.56rem;} .bnl-page--academy .bnl-slot--bg .bnl-slot__d, .bnl-page--academy .bnl-slot--bg .bnl-slot__s{display:none;} .bnl-page--academy .bnl-slot__n{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#ff4d9d;font-weight:700;} .bnl-page--academy .bnl-slot__d{font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.82);max-width:46ch;} .bnl-page--academy .bnl-slot__s{font-size:.66rem;color:rgba(255,255,255,.45);font-style:italic;} /* ---- HERO ---- */ .bnl-page--academy .bnl-hero{padding:0;} .bnl-page--academy .bnl-hero__media-frame{position:relative;height:min(66vh,620px);overflow:hidden;} .bnl-page--academy .bnl-hero__media-frame .bnl-slot{height:100%;aspect-ratio:auto;border-radius:0;border:0;max-width:none;} .bnl-page--academy .bnl-hero__media-frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 58%, transparent) 20%, transparent 46%);} .bnl-page--academy .bnl-hero__play{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4; width:72px;height:72px;display:grid;place-items:center;border-radius:var(--radius-pill); background:linear-gradient(180deg,#FFFFFF 0%,#C9D1D8 46%,#8B939B 60%,#E3E9ED 100%);color:#0A0C0E; box-shadow:var(--machined), inset 0 1px 0 rgba(255,255,255,.95), 0 0 40px -8px rgba(255,32,231,.5);border:0;cursor:pointer;} .bnl-page--academy .bnl-hero__play svg{width:24px;height:24px;margin-left:3px;} .bnl-page--academy .bnl-hero__content{position:relative;z-index:2;max-width:var(--width-content); margin:-44px auto 0;padding:0 var(--space-md) var(--space-lg);} .bnl-page--academy .bnl-hero__inner{max-width:790px;} .bnl-page--academy .bnl-hero__title{font-family:var(--font-heading-proposed);font-size:var(--text-h1); font-weight:800;line-height:var(--line-height-heading);letter-spacing:-0.028em;margin:0 0 var(--space-md);} .bnl-page--academy .bnl-hero__eyebrow{font-family:var(--font-heading-proposed);font-size:12px; font-weight:var(--font-weight-semibold);letter-spacing:.22em;text-transform:uppercase; color:var(--al-brushed);margin:0 0 var(--space-sm);text-shadow:0 2px 12px rgba(0,0,0,.85);} .bnl-page--academy .bnl-hero__fine{font-family:var(--font-heading-proposed);font-size:var(--text-small); color:var(--color-text-muted);margin:var(--space-ml) 0 0;} /* ============ THE STAMP ============ */ .bnl-page--academy .bnl-stampzone{position:relative;display:grid;place-items:center;} .bnl-page--academy .bnl-stampzone--hero{position:absolute;right:5%;bottom:9%;z-index:3; width:clamp(150px,20vw,238px);height:clamp(150px,20vw,238px);pointer-events:none;} .bnl-page--academy .bnl-stampblock{margin:0 auto var(--space-ml);width:max-content;} .bnl-page--academy .bnl-stampzone--price{width:clamp(170px,26vw,214px);height:clamp(170px,26vw,214px);} .bnl-page--academy .bnl-stampzone--tile{width:clamp(84px,22vw,96px);height:clamp(84px,22vw,96px);flex:0 0 auto;} .bnl-page--academy .bnl-stamp{grid-area:1/1;width:100%;height:100%;transform:rotate(-3.5deg); filter:drop-shadow(0 6px 10px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(255,32,231,.22));} .bnl-page--academy .bnl-stamp__ink{grid-area:1/1;width:100%;height:100%;border-radius:50%; pointer-events:none;opacity:0;} /* soft cast shadow that swells under the stamp as it lands */ .bnl-page--academy .bnl-stamp__cast{grid-area:1/1;align-self:end;justify-self:center; width:78%;height:12%;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side, rgba(0,0,0,.85), transparent 72%); transform:translateY(38%) scale(.6);} /* CERTIFIED, set beneath the stamp rather than inside it */ .bnl-page--academy .bnl-stamp__word{display:block;margin-top:10px;text-align:center; font-family:var(--font-heading-proposed);font-size:11px;font-weight:800;letter-spacing:.44em; text-indent:.44em;text-transform:uppercase; background:var(--chrome-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-chrome);-webkit-text-fill-color:transparent;} /* stamper handle — presses, then lifts */ .bnl-page--academy .bnl-stamper{grid-area:1/1;width:58%;height:58%;align-self:start;justify-self:center; transform:translateY(-118%);opacity:0;pointer-events:none;color:#C9D1D8; filter:drop-shadow(0 14px 18px rgba(0,0,0,.92)) drop-shadow(0 2px 2px rgba(0,0,0,.7));} @media (prefers-reduced-motion: no-preference){ .bnl-page--academy .bnl-stampzone[data-stamp] .bnl-stamp{transform:scale(2.05) rotate(-13deg);opacity:0;filter:blur(3px);} .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp{animation:bnl-stamp .68s cubic-bezier(.2,1.25,.34,1) forwards;} .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp__ink{animation:bnl-shock .78s ease-out .30s forwards;} .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamper{animation:bnl-press .78s cubic-bezier(.3,1,.4,1) forwards;} .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp__cast{animation:bnl-cast .78s ease-out .26s forwards;} } @keyframes bnl-stamp{ 0%{transform:scale(2.05) rotate(-13deg);opacity:0;filter:blur(3px);} 42%{opacity:.85;} 58%{transform:scale(.955) rotate(-1.5deg);opacity:1;filter:blur(0);} 74%{transform:scale(1.035) rotate(-4.4deg);} 100%{transform:scale(1) rotate(-3.5deg);opacity:1;filter:blur(0);} } @keyframes bnl-shock{ 0%{opacity:.85;transform:scale(.72);box-shadow:0 0 0 2px rgba(255,32,231,.85), 0 0 40px 6px rgba(255,32,231,.5);} 100%{opacity:0;transform:scale(1.6);box-shadow:0 0 0 1px rgba(255,32,231,0), 0 0 60px 10px rgba(255,32,231,0);} } @keyframes bnl-cast{ 0%{opacity:0;transform:translateY(38%) scale(.6);} 40%{opacity:.9;transform:translateY(38%) scale(1.05);} 100%{opacity:.45;transform:translateY(38%) scale(1);} } @keyframes bnl-press{ 0%{transform:translateY(-118%);opacity:0;} 34%{opacity:.95;} 55%{transform:translateY(-30%);opacity:.95;} 70%{transform:translateY(-38%);opacity:.7;} 100%{transform:translateY(-118%);opacity:0;} } @media (max-width:760px){.bnl-page--academy .bnl-stampzone--hero{display:none;}} /* ---- Talk ---- */ .bnl-page--academy .bnl-talk{display:grid;gap:14px;grid-template-columns:1fr;} /* the call option is inert until a real number exists — a tel: link to a placeholder dials a wrong number, which is worse than no link */ .bnl-page--academy [data-pending-phone]{pointer-events:none;opacity:.62;} .bnl-page--academy .bnl-talk__opt{display:flex;align-items:center;gap:var(--space-md);border-radius:14px; padding:var(--space-ml);text-decoration:none;color:inherit;background:var(--color-bg-elevated); box-shadow:var(--machined);border:1px solid color-mix(in srgb, var(--al-raw) 40%, transparent); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;} .bnl-page--academy .bnl-talk__opt:hover{transform:translateY(-2px);border-color:var(--al-brushed); box-shadow:var(--machined), 0 0 34px -12px rgba(255,32,231,.6);} .bnl-page--academy .bnl-talk__t{font-family:var(--font-heading-proposed);font-weight:var(--font-weight-bold);margin:0 0 3px;font-size:16px;} .bnl-page--academy .bnl-talk__b{margin:0;color:var(--color-text-muted);font-size:var(--text-small);} /* ---- Medallion icons ---- */ .bnl-page--academy .bnl-med{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center; border-radius:var(--radius-pill); background:linear-gradient(180deg,#F6FAFC 0%,#C2CAD1 34%,#6F777F 52%,#DCE3E8 78%,#8F979F 100%); box-shadow:var(--machined), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.4);} .bnl-page--academy .bnl-med::after{content:"";position:absolute;inset:4px;border-radius:var(--radius-pill); background:linear-gradient(180deg,#15181B 0%,#22272C 60%,#101314 100%); box-shadow:inset 0 1px 2px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.10);} .bnl-page--academy .bnl-med__g{position:relative;z-index:2;display:grid;place-items:center;width:26px;height:26px;color:var(--color-primary);} .bnl-page--academy .bnl-med__g svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px color-mix(in srgb, var(--color-primary) 75%, transparent));} .bnl-page--academy .bnl-med--pink .bnl-med__g{color:var(--color-pink);} .bnl-page--academy .bnl-med--pink .bnl-med__g svg{filter:drop-shadow(0 0 7px color-mix(in srgb, var(--color-pink) 75%, transparent));} /* genie medallion — portrait sits dead centre inside the bezel */ .bnl-page--academy .bnl-med--genie::after{inset:3px;background:#0E1114;} .bnl-page--academy .bnl-genieface{position:relative;z-index:2;width:calc(100% - 9px);height:calc(100% - 9px); border-radius:50%;overflow:hidden;display:grid;place-items:center; background:radial-gradient(circle at 50% 38%, #1b2a33, #0d1114 70%);} .bnl-page--academy .bnl-genieface img{width:100%;height:100%;object-fit:cover;display:block;} .bnl-page--academy .bnl-genieface span{font-family:var(--font-heading-proposed);font-size:8.5px;font-weight:800; letter-spacing:.1em;color:#ff4d9d;text-align:center;line-height:1;} /* ---- Growth chart ---- */ .bnl-page--academy .bnl-growth{display:grid;gap:var(--space-lg);grid-template-columns:1fr;align-items:center;} .bnl-page--academy .bnl-growth__chart{border-radius:var(--radius-md);padding:var(--space-ml); background:var(--panel-smooth);box-shadow:var(--edge-hi),var(--machined);} .bnl-page--academy .bnl-growth__chart svg{width:100%;height:auto;display:block;} .bnl-page--academy .bnl-growth__key{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md); padding-top:var(--space-md);border-top:1px solid rgba(255,255,255,.08); font-size:12px;color:var(--color-text-muted);} .bnl-page--academy .bnl-growth__key i{display:inline-block;width:20px;height:3px;border-radius:2px;margin-right:8px;vertical-align:middle;} .bnl-page--academy .bnl-facts{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;gap:var(--space-md);} .bnl-page--academy .bnl-facts li{position:relative;padding-left:34px;color:var(--color-text-muted);} .bnl-page--academy .bnl-facts li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%; background:var(--bn-flow);background-size:200% 100%;box-shadow:0 0 16px -4px rgba(255,32,231,.8);} .bnl-page--academy .bnl-facts b{color:var(--color-text);} .bnl-page--academy .bnl-src{font-size:11.5px;color:var(--color-text-muted);margin-top:var(--space-ml);opacity:.75;} /* ---- Model — sized so controls + chart + result fit one phone screen ---- */ .bnl-page--academy .bnl-model{display:grid;grid-template-columns:1fr;border-radius:var(--radius-md); background:var(--panel-smooth);box-shadow:var(--edge-hi),var(--machined);overflow:hidden;} .bnl-page--academy .bnl-model__panel{padding:16px 16px 12px;} .bnl-page--academy .bnl-model__field{margin-bottom:11px;} .bnl-page--academy .bnl-model__lbl{display:flex;align-items:baseline;justify-content:space-between;gap:8px; font-family:var(--font-heading-proposed);font-size:9.5px;font-weight:800;letter-spacing:.11em; text-transform:uppercase;color:var(--al-brushed);margin:0 0 6px;} .bnl-page--academy .bnl-model__val{white-space:nowrap;font-size:9.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);} .bnl-page--academy .bnl-model__val b{color:var(--color-primary);font-size:13px;margin-right:8px;} .bnl-page--academy .bnl-model__val i{font-style:normal;font-weight:800;color:var(--al-chrome);} .bnl-page--academy .bnl-model__range{-webkit-appearance:none;appearance:none;width:100%;height:3px;display:block; border-radius:var(--radius-pill);outline:none;margin:0;background:linear-gradient(90deg,var(--al-raw),var(--al-brushed));} .bnl-page--academy .bnl-model__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px; border-radius:50%;cursor:pointer;border:0; background:linear-gradient(180deg,#FFFFFF 0%,#C2CAD1 45%,#7C848C 62%,#E2E8ED 100%); box-shadow:0 3px 9px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.95), 0 0 16px -5px rgba(255,32,231,.75);} .bnl-page--academy .bnl-model__range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;cursor:pointer;border:0; background:linear-gradient(180deg,#FFFFFF 0%,#C2CAD1 45%,#7C848C 62%,#E2E8ED 100%);box-shadow:0 3px 9px rgba(0,0,0,.8);} .bnl-page--academy .bnl-model__chart{padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.08);} .bnl-page--academy .bnl-model__chart svg{width:100%;height:auto;display:block;} .bnl-page--academy .bnl-seg{transition:width .5s cubic-bezier(.22,.61,.36,1), x .5s cubic-bezier(.22,.61,.36,1);} .bnl-page--academy .bnl-model__out{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px; padding-top:11px;border-top:1px solid rgba(255,255,255,.09);} .bnl-page--academy .bnl-model__fig{font-family:var(--font-heading-proposed);font-weight:800; font-size:clamp(20px,4.4vw,26px);letter-spacing:-0.03em;line-height:1;margin:0;} .bnl-page--academy .bnl-model__fig--lit{color:var(--color-primary);} .bnl-page--academy .bnl-model__cap{display:block;margin-top:5px;color:var(--color-text-muted);font-size:10.5px;line-height:1.35;} .bnl-page--academy .bnl-model__assume{margin-top:9px;font-size:12px;color:var(--color-text-muted);} .bnl-page--academy .bnl-model__assume summary{cursor:pointer;color:var(--al-brushed);font-family:var(--font-heading-proposed); letter-spacing:.09em;text-transform:uppercase;font-size:9.5px;font-weight:800;} .bnl-page--academy .bnl-model__assume input{width:88px;background:var(--color-bg);color:var(--color-text); border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:5px 7px;font:inherit;font-size:12px;} .bnl-page--academy .bnl-model__assume td{padding:5px 9px 5px 0;font-size:12px;} /* ---- Value tiles ---- */ .bnl-page--academy .bnl-val{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:var(--space-md);} .bnl-page--academy .bnl-val__tile{position:relative;padding:var(--space-ml);border-radius:14px;background:var(--color-bg-elevated); border:1px solid color-mix(in srgb, var(--al-raw) 42%, transparent);box-shadow:var(--machined);} .bnl-page--academy .bnl-val__tile--key{border:0;background:var(--panel-premium); box-shadow:var(--edge-hi),var(--machined),0 0 48px -16px rgba(255,32,231,.6);} .bnl-page--academy .bnl-val__tile--key::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:var(--panel-seam);} .bnl-page--academy .bnl-val__hd{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);min-width:0;} .bnl-page--academy .bnl-val__hd .bnl-val__t{min-width:0;} .bnl-page--academy .bnl-val__t{font-family:var(--font-heading-proposed);font-size:var(--text-h3);font-weight:var(--font-weight-bold); letter-spacing:-0.015em;margin:0;} .bnl-page--academy .bnl-val__b{margin:0;color:var(--color-text-muted);font-size:.95rem;} .bnl-page--academy .bnl-val__tag{display:inline-flex;align-items:center;height:26px;margin-top:var(--space-md);padding:0 13px; border-radius:var(--radius-pill);font-family:var(--font-heading-proposed);font-size:10.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;} .bnl-page--academy .bnl-val__tag--inc{color:var(--color-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 50%, transparent), 0 0 16px -6px color-mix(in srgb, var(--color-primary) 70%, transparent);} .bnl-page--academy .bnl-val__tag--rate{color:var(--color-orange); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-orange) 55%, transparent), 0 0 16px -6px color-mix(in srgb, var(--color-orange) 70%, transparent);} .bnl-page--academy .bnl-val__tag--exam{color:var(--al-chrome); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--al-brushed) 62%, transparent), 0 0 18px -6px rgba(255,32,231,.7);} /* ---- Included / billed separately matrix ---- */ .bnl-page--academy .bnl-incl{display:grid;gap:var(--space-md);grid-template-columns:1fr;} .bnl-page--academy .bnl-incl__col{border-radius:14px;padding:var(--space-ml);background:var(--color-bg-elevated); border:1px solid color-mix(in srgb, var(--al-raw) 42%, transparent);box-shadow:var(--machined);} .bnl-page--academy .bnl-incl__col--in{background:var(--panel-smooth);border:0;box-shadow:var(--edge-hi),var(--machined);} .bnl-page--academy .bnl-incl__k{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md); margin:0 0 var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid rgba(255,255,255,.09);} .bnl-page--academy .bnl-incl__t{font-family:var(--font-heading-proposed);font-size:15px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;margin:0;} .bnl-page--academy .bnl-incl__p{font-family:var(--font-heading-proposed);font-size:13px;font-weight:700;margin:0; color:var(--color-primary);white-space:nowrap;} .bnl-page--academy .bnl-incl__p--paid{color:var(--color-orange);} .bnl-page--academy .bnl-incl__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;} .bnl-page--academy .bnl-incl__list li{position:relative;padding-left:28px;font-size:14.5px;color:var(--color-text-muted);} .bnl-page--academy .bnl-incl__list li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%; background:linear-gradient(180deg,#FFFFFF 0%,#8E969E 100%);} .bnl-page--academy .bnl-incl__col--out .bnl-incl__list li::before{background:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-orange) 65%, transparent);} .bnl-page--academy .bnl-incl__when{display:block;margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.42); font-family:var(--font-heading-proposed);letter-spacing:.06em;text-transform:uppercase;} /* ---- Auto-running fact carousel (compare) ---- */ .bnl-page--academy .bnl-ticker{--fw:148px;overflow:hidden;padding:var(--space-sm) 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);} .bnl-page--academy .bnl-ticker__track{display:flex;gap:10px;width:max-content;} @media (prefers-reduced-motion: no-preference){ .bnl-page--academy .bnl-ticker__track{animation:bnl-run 54s linear infinite;} .bnl-page--academy .bnl-ticker:hover .bnl-ticker__track, .bnl-page--academy .bnl-ticker:focus-within .bnl-ticker__track{animation-play-state:paused;} } @keyframes bnl-run{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 5px));}} .bnl-page--academy .bnl-fact{flex:0 0 var(--fw);border-radius:12px;padding:14px;background:var(--color-bg-elevated); border:1px solid color-mix(in srgb, var(--al-raw) 45%, transparent);box-shadow:var(--machined); transition:border-color .2s ease, box-shadow .2s ease;} .bnl-page--academy .bnl-fact[open], .bnl-page--academy .bnl-fact:hover{border-color:var(--al-brushed);box-shadow:var(--machined),0 0 34px -12px rgba(255,32,231,.6);} .bnl-page--academy .bnl-fact__q{cursor:pointer;list-style:none;display:block;} .bnl-page--academy .bnl-fact__q::-webkit-details-marker{display:none;} .bnl-page--academy .bnl-fact__k{display:block;font-family:var(--font-heading-proposed);font-size:8.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:7px;} .bnl-page--academy .bnl-fact__h{display:block;font-family:var(--font-heading-proposed);font-size:13.5px;font-weight:800; letter-spacing:-0.015em;line-height:1.2;margin-bottom:7px; background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-chrome);-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-fact__vs{display:block;font-size:11px;line-height:1.35;color:var(--color-text-muted);} .bnl-page--academy .bnl-fact__more{margin:10px 0 0;padding-top:10px; border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;line-height:1.45;color:var(--color-text-muted);} .bnl-page--academy .bnl-fact__cue{display:inline-flex;align-items:center;gap:6px;margin-top:9px; font-family:var(--font-heading-proposed);font-size:9.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--color-primary);} .bnl-page--academy .bnl-fact[open] .bnl-fact__cue{display:none;} /* ---- White-label ---- */ .bnl-page--academy .bnl-wl{max-width:940px;margin:0 auto;} .bnl-page--academy .bnl-wl__radio{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;} .bnl-page--academy .bnl-wl__stage{position:relative;border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-md); border:1px solid color-mix(in srgb, var(--al-raw) 50%, transparent);background:var(--color-bg-elevated); transition:border-color .45s ease, box-shadow .45s ease;padding:var(--space-lg);box-shadow:var(--machined);} .bnl-page--academy .bnl-wl__var{display:none;} .bnl-page--academy .bnl-wl__reel{display:flex;gap:10px;justify-content:safe center;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 10px; scrollbar-width:thin;scrollbar-color:var(--al-raw) transparent;} .bnl-page--academy .bnl-wl__reel::-webkit-scrollbar{height:5px;} .bnl-page--academy .bnl-wl__reel::-webkit-scrollbar-thumb{background:var(--al-raw);border-radius:3px;} .bnl-page--academy .bnl-wl__reel:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;} .bnl-page--academy .bnl-wl__pg{flex:0 0 auto;margin:0;scroll-snap-align:center;} .bnl-page--academy .bnl-wl__pg img{display:block;width:auto;height:clamp(290px,42vh,486px);border-radius:6px; box-shadow:0 14px 34px -14px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.13);} .bnl-page--academy .bnl-wl__cap{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--color-text-muted);} .bnl-page--academy .bnl-wl__cap b{color:var(--al-chrome);font-family:var(--font-heading-proposed);font-weight:800;} .bnl-page--academy .bnl-wl__swipe{display:inline-block;margin-left:4px;font-family:var(--font-heading-proposed); font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);} /* segmented control — one recessed track, one machined slider */ .bnl-page--academy .bnl-wl__picker{display:flex;justify-content:center;margin-top:var(--space-md);} .bnl-page--academy #white-label{padding-top:var(--space-xl);padding-bottom:var(--space-xl);} .bnl-page--academy #white-label .bnl-lede{margin-bottom:0;} .bnl-page--academy .bnl-wl__seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill); background:linear-gradient(180deg,#0C0F11 0%,#171B1F 100%); box-shadow:inset 0 2px 6px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.06);} .bnl-page--academy .bnl-wl__opt{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px; border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-heading-proposed);font-size:13px; font-weight:800;letter-spacing:.01em;white-space:nowrap;color:var(--color-text-muted); transition:color .25s ease, box-shadow .25s ease, background .25s ease;} .bnl-page--academy .bnl-wl__opt:hover{color:var(--color-text);} .bnl-page--academy #wl-bnl:checked ~ .bnl-wl__stage .bnl-wl__var--bnl{display:block;} .bnl-page--academy #wl-you:checked ~ .bnl-wl__stage{border-color:color-mix(in srgb, var(--al-brushed) 70%, transparent); box-shadow:var(--machined), 0 0 40px -14px rgba(255,32,231,.65);} .bnl-page--academy #wl-you:checked ~ .bnl-wl__stage .bnl-wl__var--you{display:block;} .bnl-page--academy #wl-bnl:checked ~ .bnl-wl__picker label[for="wl-bnl"], .bnl-page--academy #wl-you:checked ~ .bnl-wl__picker label[for="wl-you"]{color:#0A0C0E; background:linear-gradient(180deg,#FFFFFF 0%,#DCE3E8 44%,#A7AFB7 58%,#F0F4F7 100%); box-shadow:0 3px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.95), 0 0 24px -8px rgba(255,32,231,.65);} /* ---- Warranty ---- */ .bnl-page--academy .bnl-lever{max-width:820px;} .bnl-page--academy .bnl-lever__list{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:var(--space-md);} .bnl-page--academy .bnl-lever__list li{position:relative;padding-left:34px;color:var(--color-text-muted);} .bnl-page--academy .bnl-lever__list li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%; background:linear-gradient(180deg,#FFFFFF 0%,#8E969E 100%);box-shadow:var(--machined);} /* ---- Genie ---- */ .bnl-page--academy .bnl-genie{max-width:780px;margin:0 auto;border-radius:var(--radius-md); border:1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border));background:var(--color-bg-elevated); box-shadow:var(--glow-ambient-teal);overflow:hidden;} .bnl-page--academy .bnl-genie__hd{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-ml); border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-primary) 7%, transparent);} .bnl-page--academy .bnl-genie__name{font-family:var(--font-heading-proposed);font-weight:800;margin:0;line-height:1.2;font-size:17px;} .bnl-page--academy .bnl-genie__tier{font-size:var(--text-small);color:var(--color-primary);} .bnl-page--academy .bnl-genie__body{padding:var(--space-ml);} .bnl-page--academy .bnl-genie__lbl{font-family:var(--font-heading-proposed);font-size:12px;letter-spacing:.14em; text-transform:uppercase;margin:0 0 var(--space-sm);} .bnl-page--academy .bnl-genie__lbl--yes{color:var(--color-primary);} .bnl-page--academy .bnl-genie__lbl--no{color:var(--color-text-muted);margin-top:var(--space-ml);} .bnl-page--academy .bnl-genie__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm);} .bnl-page--academy .bnl-genie__list li{padding-left:26px;position:relative;color:var(--color-text-muted);font-size:.95rem;} .bnl-page--academy .bnl-genie__list--yes li::before{content:"\2713";position:absolute;left:0;color:var(--color-primary);font-weight:700;} .bnl-page--academy .bnl-genie__list--no li::before{content:"\2014";position:absolute;left:0;color:var(--color-border);font-weight:700;} /* ---- Steps ---- */ .bnl-page--academy .bnl-steps{list-style:none;counter-reset:bnl-step;margin:0;padding:0;display:grid;gap:var(--space-ml);} .bnl-page--academy .bnl-steps__item{counter-increment:bnl-step;position:relative;padding-left:var(--space-xl);color:var(--color-text-muted);} .bnl-page--academy .bnl-steps__item::before{content:counter(bnl-step);position:absolute;left:0;top:0;width:42px;height:42px; display:grid;place-items:center;border-radius:var(--radius-pill); background:linear-gradient(180deg,#FFFFFF 0%,#C2CAD1 44%,#7C848C 60%,#E2E8ED 100%);color:#0A0C0E; font-family:var(--font-heading-proposed);font-weight:800; box-shadow:var(--machined), inset 0 1px 0 rgba(255,255,255,.9), 0 0 24px -10px rgba(255,32,231,.7);} .bnl-page--academy .bnl-steps__title{display:block;color:var(--color-text);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-xs);} /* ---- Curriculum ---- */ .bnl-page--academy .bnl-mod{border-bottom:1px solid var(--color-border);padding:var(--space-md) 0;} .bnl-page--academy .bnl-mod__q{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--space-md);list-style:none;} .bnl-page--academy .bnl-mod__q::-webkit-details-marker{display:none;} .bnl-page--academy .bnl-mod__n{font-family:var(--font-heading-proposed);font-size:var(--text-small);font-weight:800; color:var(--al-brushed);flex:none;width:34px;letter-spacing:.06em;} .bnl-page--academy .bnl-mod__t{font-family:var(--font-heading-proposed);font-size:var(--text-h3); font-weight:var(--font-weight-semibold);letter-spacing:-0.015em;margin:0;} .bnl-page--academy .bnl-mod__a{color:var(--color-text-muted);margin:var(--space-sm) 0 0 50px;font-size:.95rem;} /* ---- Tracks ---- */ .bnl-page--academy .bnl-track{display:grid;grid-template-columns:1fr;gap:var(--space-md);} .bnl-page--academy .bnl-track__card{border-radius:14px;padding:var(--space-ml);background:var(--color-bg-elevated); display:flex;flex-direction:column;border:1px solid color-mix(in srgb, var(--al-raw) 42%, transparent);box-shadow:var(--machined);} .bnl-page--academy .bnl-track__card--lead{border:0;background:var(--panel-premium); box-shadow:var(--edge-hi),var(--machined),0 0 48px -16px rgba(255,32,231,.6);} .bnl-page--academy .bnl-track__who{font-family:var(--font-heading-proposed);font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-sm);} .bnl-page--academy .bnl-track__card--lead .bnl-track__who{color:var(--al-chrome);} .bnl-page--academy .bnl-track__t{font-family:var(--font-heading-proposed);font-size:var(--text-h3);font-weight:800; margin:0 0 var(--space-sm);letter-spacing:-0.015em;} .bnl-page--academy .bnl-track__b{color:var(--color-text-muted);font-size:.95rem;margin:0 0 var(--space-ml);flex:1;} .bnl-page--academy .bnl-track__price--tbc{font-size:13px;letter-spacing:0;text-transform:none;color:var(--color-text-muted);-webkit-text-fill-color:currentColor;background:none;} .bnl-page--academy .bnl-track__price{font-family:var(--font-heading-proposed);font-weight:800;font-size:28px; letter-spacing:-0.035em;margin:0 0 var(--space-md);} .bnl-page--academy .bnl-track__go{font-family:var(--font-heading-proposed);font-size:13.5px; font-weight:var(--font-weight-semibold);color:var(--color-primary);text-decoration:none;} .bnl-page--academy .bnl-track__go:hover{text-decoration:underline;} /* ---- Graduates ---- */ .bnl-page--academy .bnl-grads{display:grid;grid-template-columns:1fr;gap:var(--space-md);} .bnl-page--academy .bnl-grad{border-radius:14px;overflow:hidden;background:var(--color-bg-elevated); border:1px solid color-mix(in srgb, var(--al-raw) 42%, transparent);box-shadow:var(--machined);display:flex;flex-direction:column;} .bnl-page--academy .bnl-grad__ph{position:relative;aspect-ratio:4/5;overflow:hidden; background: radial-gradient(120% 92% at 50% 116%, rgba(255,32,231,.55), transparent 62%), radial-gradient(90% 70% at 78% -10%, rgba(246,198,54,.20), transparent 58%), linear-gradient(165deg,#2A3038 0%,#14181C 55%,#22272E 100%);} /* rev7: the portrait now ARRIVES on its own dark gradient, cut out and composited, so the frame no longer has to letterbox it. cover + top-biased so the face is never the thing that gets cropped. */ .bnl-page--academy .bnl-grad__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;} .bnl-page--academy .bnl-grad__ph .bnl-slot{height:100%;aspect-ratio:auto;border-radius:0;border:0;max-width:none;} .bnl-page--academy .bnl-grad__badge{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center; height:26px;padding:0 12px;border-radius:var(--radius-pill);font-family:var(--font-heading-proposed);font-size:10px; font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#12060F;background:var(--bn-flow);background-size:200% 100%; box-shadow:0 4px 14px -4px rgba(0,0,0,.9);} .bnl-page--academy .bnl-grad__body{padding:var(--space-ml);} .bnl-page--academy .bnl-grad__n{font-family:var(--font-heading-proposed);font-size:20px;font-weight:800; letter-spacing:-0.02em;margin:0 0 4px;} .bnl-page--academy .bnl-grad__c{font-family:var(--font-heading-proposed);font-size:13.5px;font-weight:700;margin:0 0 2px; background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-chrome);-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-grad__l{font-size:12.5px;color:var(--color-text-muted);margin:0; font-family:var(--font-heading-proposed);letter-spacing:.08em;text-transform:uppercase;} /* ---- Price ---- */ .bnl-page--academy .bnl-price{position:relative;overflow:hidden;max-width:640px;margin:0 auto;border-radius:var(--radius-md); padding:var(--space-xl) var(--space-lg);text-align:center;background:var(--panel-premium); box-shadow:var(--edge-hi),var(--machined), 0 0 60px -18px rgba(255,32,231,.7);} .bnl-page--academy .bnl-price::before{content:"";position:absolute;top:0;left:16%;right:16%;height:1px;background:var(--panel-seam);} .bnl-page--academy .bnl-price__fig{font-family:var(--font-heading-proposed);font-weight:800;font-size:clamp(46px,7vw,76px); letter-spacing:-0.04em;line-height:1;margin:0; background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-chrome);-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-price__unit{display:block;font-family:var(--font-heading-proposed);font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--color-text-muted);margin-top:var(--space-md);-webkit-text-fill-color:var(--color-text-muted);} .bnl-page--academy .bnl-price__list{list-style:none;margin:var(--space-lg) auto;padding:0;display:grid;gap:var(--space-sm); text-align:left;max-width:420px;} .bnl-page--academy .bnl-price__list li{position:relative;padding-left:30px;color:var(--color-text-muted);font-size:.95rem;} .bnl-page--academy .bnl-price__list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%; background:linear-gradient(180deg,#FFFFFF 0%,#8E969E 100%);} .bnl-page--academy .bnl-price__fine{font-size:var(--text-small);color:var(--color-text-muted);margin:var(--space-md) 0 0;} /* ---- FAQ ---- */ .bnl-page--academy .bnl-faq__item{border-bottom:1px solid var(--color-border);padding:var(--space-md) 0;} .bnl-page--academy .bnl-faq__q{cursor:pointer;min-height:44px;display:flex;align-items:center;} .bnl-page--academy .bnl-faq__q-text{font-family:var(--font-heading-proposed);font-size:var(--text-h3); font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);letter-spacing:-0.015em;margin:0;display:inline;} .bnl-page--academy .bnl-faq__a{color:var(--color-text-muted);margin:var(--space-sm) 0 0;} /* ---- Closer ---- */ .bnl-page--academy .bnl-closer{position:relative;display:grid;grid-template-columns:1fr;min-height:min(72vh,640px); overflow:hidden;isolation:isolate;} .bnl-page--academy .bnl-closer__bg{grid-area:1/1;overflow:hidden;z-index:0;} .bnl-page--academy .bnl-closer__bg .bnl-slot{height:100%;width:100%;aspect-ratio:auto;border-radius:0;border:0;max-width:none;} .bnl-page--academy .bnl-closer__scrim{grid-area:1/1;z-index:1;pointer-events:none; background:linear-gradient(0deg, var(--color-bg) 4%, transparent 52%), linear-gradient(180deg, var(--color-bg) 4%, transparent 52%), color-mix(in srgb, var(--color-bg) 62%, transparent);} .bnl-page--academy .bnl-closer__content{grid-area:1/1;z-index:2;align-self:center;justify-self:center;text-align:center; padding:var(--space-2xl) var(--space-md);max-width:820px;} .bnl-page--academy .bnl-closer__title{font-family:var(--font-heading-proposed);font-weight:800; font-size:clamp(34px,6vw,64px);letter-spacing:-0.03em;line-height:1.08;margin:0;} /* ---- Sticky enrol — always on screen ---- */ .bnl-page--academy .bnl-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:9px var(--space-md); padding-bottom:max(11px, env(safe-area-inset-bottom));background:color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter:blur(12px);border-top:1px solid var(--color-border);} /* rev6: the bar was a full-bleed slab. Gradient stays, pill shrinks — capped width, centred, shorter, so it reads as a button and not a second footer. */ .bnl-page--academy .bnl-sticky-cta .bnl-btn{display:flex;width:auto;max-width:340px;margin:0 auto; height:46px;min-height:46px;padding:0 26px;font-size:14.5px;} /* ---- Responsive ---- */ @media (min-width: 620px){ .bnl-page--academy .bnl-talk{grid-template-columns:repeat(3,1fr);} .bnl-page--academy .bnl-incl{grid-template-columns:1.25fr .95fr;} .bnl-page--academy .bnl-grads{grid-template-columns:repeat(3,1fr);} } @media (min-width: 768px){ .bnl-page--academy .bnl-section{padding:var(--space-2xl) var(--space-lg);} .bnl-page--academy .bnl-hero__content{margin-top:-76px;padding:0 var(--space-lg) var(--space-xl);} .bnl-page--academy .bnl-track{grid-template-columns:repeat(3,1fr);} .bnl-page--academy .bnl-model{grid-template-columns:minmax(280px,.92fr) 1.08fr;} .bnl-page--academy .bnl-model__chart{border-top:0;border-left:1px solid rgba(255,255,255,.08);} .bnl-page--academy .bnl-growth{grid-template-columns:1.02fr .98fr;} .bnl-page--academy .bnl-ticker{--fw:212px;} } @media (min-width: 900px){ .bnl-page--academy{padding-bottom:0;} /* the enrol pill stays, but becomes a floating billet bottom-right */ .bnl-page--academy .bnl-sticky-cta{left:auto;right:26px;bottom:26px;padding:0;background:none; backdrop-filter:none;border:0;} .bnl-page--academy .bnl-sticky-cta .bnl-btn{width:auto;max-width:none;margin:0;height:48px;min-height:48px;padding:0 28px;font-size:15px;} .bnl-page--academy .bnl-ticker{--fw:252px;} } @media (prefers-reduced-motion: reduce){ .bnl-page--academy *{animation:none !important;transition:none !important;} .bnl-page--academy .bnl-stampzone[data-stamp] .bnl-stamp{transform:rotate(-3.5deg);opacity:1;filter:none;} } /* ============================================================================= rev6 · CREDENTIAL COVERFLOW Geometry taken from the home page's #doors rotator (rev31), which is the best carousel on the site. Rewritten rather than copied: the home block's rules are spread across ten media queries and the standard records an unclosed @media that travels with that block whenever it is copied (BRI-324/327/329). This is one self-contained section, brace-checked. ============================================================================= */ .bnl-page--academy .bnl-rot{margin:0;} .bnl-page--academy .bnl-rot__stage{ position:relative;height:352px;perspective:1100px;perspective-origin:50% 46%; transform-style:preserve-3d;touch-action:pan-y;cursor:grab; user-select:none;-webkit-user-select:none;} .bnl-page--academy .bnl-rot__stage.is-drag{cursor:grabbing;} .bnl-page--academy .bnl-rot__glow{ position:absolute;left:50%;top:8px;width:min(760px,94vw);height:250px; margin-left:max(-380px,-47vw);pointer-events:none;border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,32,231,.13) 0%, transparent 68%);} .bnl-page--academy .bnl-rot__item{ --w:76vw;position:absolute;left:50%;top:0;width:var(--w);height:330px; margin-left:calc(var(--w) / -2);transform-style:preserve-3d; transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease; will-change:transform;} .bnl-page--academy .bnl-rot__stage.is-drag .bnl-rot__item{transition:none;} .bnl-page--academy .bnl-rot__item[data-pos="0"]{ transform:translateX(0) translateZ(0) rotateY(-9deg) rotateX(3.5deg) scale(1); opacity:1;filter:none;z-index:5;} .bnl-page--academy .bnl-rot__item[data-pos="1"]{ transform:translateX(70%) translateZ(-140px) rotateY(-46deg) rotateX(5deg) scale(.9); opacity:.6;filter:blur(.8px);z-index:3;} .bnl-page--academy .bnl-rot__item[data-pos="-1"]{ transform:translateX(-70%) translateZ(-140px) rotateY(32deg) rotateX(5deg) scale(.9); opacity:.6;filter:blur(.8px);z-index:3;} .bnl-page--academy .bnl-rot__item[data-pos="2"], .bnl-page--academy .bnl-rot__item[data-pos="-2"]{ transform:translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82); opacity:.14;filter:blur(2.5px);z-index:1;} /* the card face — same machined language as the rest of the page */ .bnl-page--academy .bnl-ccard{height:100%;transform-style:preserve-3d;} .bnl-page--academy .bnl-ccard__inner{ position:relative;display:flex;flex-direction:column;height:100%; border-radius:var(--radius-md);background:var(--panel-premium); box-shadow:var(--edge-hi),var(--machined); transform-style:preserve-3d;isolation:isolate;overflow:hidden;} .bnl-page--academy .bnl-ccard__inner::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 34%, transparent 58%);} .bnl-page--academy .bnl-ccard__bevel{ position:absolute;left:9%;right:9%;top:0;height:1px;z-index:4;pointer-events:none; background:var(--panel-seam);opacity:.55;} .bnl-page--academy .bnl-ccard__body{ padding:20px 22px 22px;display:flex;flex-direction:column;flex:1; transform-style:preserve-3d;position:relative;z-index:1;} .bnl-page--academy .bnl-ccard__k{ margin:0 0 10px;font-family:var(--font-heading-proposed);font-size:9.5px;font-weight:800; letter-spacing:.17em;text-transform:uppercase;color:var(--al-brushed);} .bnl-page--academy .bnl-ccard__n{ margin:0;font-family:var(--font-heading-proposed);font-weight:800;line-height:.86; font-size:clamp(52px,15vw,76px);letter-spacing:-.05em; background:var(--chrome-ramp);-webkit-background-clip:text;background-clip:text; color:var(--al-chrome);-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-ccard--key .bnl-ccard__n{background:var(--chrome-pink-ramp); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .bnl-page--academy .bnl-ccard__t{ margin:8px 0 0;font-family:var(--font-heading-proposed);font-weight:800; font-size:clamp(17px,4.6vw,21px);letter-spacing:-.02em;line-height:1.12;color:var(--color-text);} .bnl-page--academy .bnl-ccard__rule{ height:2px;width:54px;border-radius:2px;margin:12px 0 12px; background:linear-gradient(90deg,var(--al-chrome),transparent);} .bnl-page--academy .bnl-ccard--key .bnl-ccard__rule{background:var(--bn-flow);} .bnl-page--academy .bnl-ccard__b{ margin:0;font-size:13.5px;line-height:1.5;color:var(--color-text-muted);} .bnl-page--academy .bnl-ccard__b strong{color:var(--color-text);} /* controls sit directly under the card, not across a gap */ .bnl-page--academy .bnl-rot__ctrl{ display:flex;align-items:center;justify-content:center;gap:12px;margin-top:var(--space-md);} .bnl-page--academy .bnl-rot__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;} .bnl-page--academy .bnl-rot__dot{ cursor:pointer;font:inherit;font-family:var(--font-heading-proposed);font-weight:700; font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;min-height:44px; display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--radius-pill); background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted); transition:color .25s ease,border-color .25s ease,box-shadow .25s ease;} .bnl-page--academy .bnl-rot__dot::before{ content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;} .bnl-page--academy .bnl-rot__dot[aria-selected="true"]{ color:var(--color-text);border-color:var(--bn-pink);box-shadow:0 0 18px -6px var(--bn-magenta);} .bnl-page--academy .bnl-rot__dot[aria-selected="true"]::before{opacity:1;background:var(--bn-pink);} .bnl-page--academy .bnl-rot__hint{ margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--color-text-muted);} .bnl-page--academy .bnl-rot.is-manual .bnl-rot__hint{visibility:hidden;} /* two graduates, not three */ .bnl-page--academy .bnl-grads--two{grid-template-columns:1fr 1fr;gap:var(--space-sm); max-width:640px;margin-inline:auto;} @media (min-width:720px){ .bnl-page--academy .bnl-rot__stage{height:420px;perspective:1500px;} .bnl-page--academy .bnl-rot__item{--w:404px;height:392px;} .bnl-page--academy .bnl-rot__item[data-pos="1"]{ transform:translateX(76%) translateZ(-170px) rotateY(-44deg) rotateX(4deg) scale(.9);} .bnl-page--academy .bnl-rot__item[data-pos="-1"]{ transform:translateX(-76%) translateZ(-170px) rotateY(30deg) rotateX(4deg) scale(.9);} .bnl-page--academy .bnl-rot__item[data-pos="2"], .bnl-page--academy .bnl-rot__item[data-pos="-2"]{ transform:translateX(0) translateZ(-440px) rotateY(-9deg) rotateX(3deg) scale(.82);} .bnl-page--academy .bnl-rot__dot{font-size:11.5px;padding:9px 15px;} .bnl-page--academy .bnl-grads--two{grid-template-columns:1fr 1fr;} } @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-rot__item{transition:none;} } /* ============================================================================= rev7 · GRADUATE CARDS The portraits used to be photographs on a white studio wall, dropped into a 3:4 frame with object-fit:contain. Three problems at once: the white read as a hole in a near-black page, Edbert's frame clipped the Shine On banner behind him so a half logo sat in the corner, and the card ran nearly a full phone screen. Both subjects are now cut out (u2net human segmentation, alpha matting) and composited onto one shared studio gradient — graphite ramp, magenta bloom low and a cool key from top right, plus a contact shadow so they sit on it rather than float. Same gradient, same face size, same eye line for both, so the two read as a set. Measured after compositing: mean luma 38 / 70, corner luma 13-48 where the white wall was ~250. Face 34.5% of frame width on both, eye line 35.8/35.9%. ============================================================================= */ .bnl-page--academy .bnl-grad{border-radius:var(--radius-md);overflow:hidden; background:var(--color-bg-elevated);box-shadow:var(--edge-hi),var(--machined);} .bnl-page--academy .bnl-grad__body{padding:12px 13px 14px;} .bnl-page--academy .bnl-grad__n{font-size:15.5px;} .bnl-page--academy .bnl-grad__c{font-size:11.5px;line-height:1.25;} .bnl-page--academy .bnl-grad__l{font-size:10px;letter-spacing:.09em;} .bnl-page--academy .bnl-grad__badge{height:22px;padding:0 9px;font-size:8.5px;left:9px;top:9px;} @media (min-width:720px){ .bnl-page--academy .bnl-grad__body{padding:16px 17px 18px;} .bnl-page--academy .bnl-grad__n{font-size:19px;} .bnl-page--academy .bnl-grad__c{font-size:13px;} .bnl-page--academy .bnl-grad__l{font-size:11.5px;} .bnl-page--academy .bnl-grad__badge{height:26px;padding:0 12px;font-size:10px;left:12px;top:12px;} } /* ============================================================================= rev9 · TEAM CARD — US Aluminum A whole crew, so it spans the graduate grid rather than sitting in one column. The photo is landscape and graded to the page (contrast +6%, gamma 1.12, cooled, vignette, magenta floor bloom) so a bright warehouse shot does not punch a hole in a near-black layout. Measured after grading: mean luma 71, p98 181. The copy says "each certified individually" on purpose. The FAQ states that certification is issued to a person, not a company — so a team card has to read as proof of that answer, not as a contradiction of it. No headcount is stated. The photograph was taken at the Brighter Nights warehouse and almost certainly includes Brighter Nights staff alongside the US Aluminum crew, so "nine installers" would have been a claim the picture does not support. "Their entire team" carries the point without inventing a number. ============================================================================= */ .bnl-page--academy .bnl-grad--team{grid-column:1 / -1;} .bnl-page--academy .bnl-grad__ph--team{aspect-ratio:960/586;} .bnl-page--academy .bnl-grad__ph--team img{object-position:50% 42%;} .bnl-page--academy .bnl-grad__body--team{display:flex;align-items:flex-start;gap:14px;} .bnl-page--academy .bnl-grad__logo{ flex:0 0 auto;width:auto;height:44px;border-radius:4px;display:block; background:#fff;padding:3px;box-shadow:0 2px 10px -3px rgba(0,0,0,.8);} .bnl-page--academy .bnl-grad__b{ margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--color-text-muted);} .bnl-page--academy .bnl-grad--team .bnl-grad__c{font-size:12.5px;} @media (min-width:720px){ .bnl-page--academy .bnl-grad__logo{height:54px;} .bnl-page--academy .bnl-grad__b{font-size:13px;} .bnl-page--academy .bnl-grad--team .bnl-grad__c{font-size:13.5px;} .bnl-page--academy .bnl-grad__body--team{gap:18px;align-items:center;} } /* rev10 · the team card leads with completeness, so the badge and the claim line carry more weight than on an individual card */ .bnl-page--academy .bnl-grad__badge--team{ background:var(--bn-flow);color:#0A0A0A;font-weight:800; box-shadow:0 4px 16px -4px rgba(255,32,231,.7);} .bnl-page--academy .bnl-grad--team .bnl-grad__c{ font-size:14px;font-weight:800;letter-spacing:-.01em;} .bnl-page--academy .bnl-grad__teamtext{min-width:0;} .bnl-page--academy .bnl-grad--team .bnl-grad__l{margin-top:3px;} .bnl-page--academy .bnl-grad--team .bnl-grad__b{margin-top:9px;max-width:62ch;} @media (min-width:720px){ .bnl-page--academy .bnl-grad--team .bnl-grad__c{font-size:16px;} } /* ============================================================================= rev11 · THE STORY REEL Native CSS scroll-snap, not a carousel library. Chrome's own guidance and web.dev both land in the same place: a scroll container with snap points is more accessible and faster than any JS slider, because the browser owns the scrolling, the focus order and the keyboard handling. The only JavaScript here is what CSS genuinely cannot express — activating video sources on approach, and pausing loops that scroll away. Tiles share one HEIGHT and vary in width. Photographs are landscape, clips are 9:16 portrait; forcing them into one aspect ratio would either letterbox the clips or crop the rooms. Equal height is what makes a mixed reel read as deliberate instead of ragged. ============================================================================= */ .bnl-page--academy .bnl-story{--th:clamp(300px,52vw,440px);margin-top:var(--space-ml);} .bnl-page--academy .bnl-story__reel{ display:flex;gap:12px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:2px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--al-raw) transparent;} .bnl-page--academy .bnl-story__reel::-webkit-scrollbar{height:5px;} .bnl-page--academy .bnl-story__reel::-webkit-scrollbar-thumb{background:var(--al-raw);border-radius:3px;} .bnl-page--academy .bnl-story__reel:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;} .bnl-page--academy .bnl-story__t{ position:relative;flex:0 0 auto;margin:0;scroll-snap-align:center; display:flex;flex-direction:column;border-radius:12px;overflow:hidden; background:var(--color-bg-elevated);box-shadow:var(--edge-hi),var(--machined);} .bnl-page--academy .bnl-story__t img, .bnl-page--academy .bnl-story__v{ display:block;height:var(--th);width:auto;max-width:78vw;object-fit:cover;background:#0B0D10;} .bnl-page--academy .bnl-story__t--v .bnl-story__v{aspect-ratio:9/16;} /* the act label rides the top-left of each tile, so the arc is readable while scrolling */ .bnl-page--academy .bnl-story__t::before{ content:attr(data-act);position:absolute;left:9px;top:9px;z-index:2; padding:4px 9px;border-radius:var(--radius-pill); font-family:var(--font-heading-proposed);font-size:8.5px;font-weight:800; letter-spacing:.15em;text-transform:uppercase;color:var(--al-chrome); background:rgba(10,10,10,.72);backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);} .bnl-page--academy .bnl-story__c{ padding:10px 12px 12px;font-size:11.5px;line-height:1.45;color:var(--color-text-muted); max-width:min(78vw,var(--th));} .bnl-page--academy .bnl-story__c b{ display:block;margin-bottom:3px;color:var(--al-chrome); font-family:var(--font-heading-proposed);font-weight:800;font-size:12.5px;letter-spacing:-.01em;} /* play affordance for the two clips that carry sound */ .bnl-page--academy .bnl-story__play{ position:absolute;left:50%;top:calc(var(--th) / 2);transform:translate(-50%,-50%); z-index:3;width:56px;height:56px;border-radius:50%;cursor:pointer;border:0; display:grid;place-items:center;background:rgba(10,10,10,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 26px -8px rgba(0,0,0,.9); backdrop-filter:blur(4px);transition:background .2s ease,transform .2s ease;} .bnl-page--academy .bnl-story__play span{ width:0;height:0;margin-left:4px; border-left:16px solid var(--al-chrome);border-top:10px solid transparent;border-bottom:10px solid transparent;} .bnl-page--academy .bnl-story__play:hover{background:rgba(10,10,10,.72);transform:translate(-50%,-50%) scale(1.06);} .bnl-page--academy .bnl-story__t.is-playing .bnl-story__play{display:none;} .bnl-page--academy .bnl-story__hint{ margin:8px 0 0;text-align:center;font-size:11.5px;color:var(--color-text-muted);} @media (min-width:720px){ .bnl-page--academy .bnl-story{--th:460px;} .bnl-page--academy .bnl-story__t img, .bnl-page--academy .bnl-story__v{max-width:none;} .bnl-page--academy .bnl-story__c{font-size:12.5px;max-width:var(--th);} } @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-story__reel{scroll-behavior:auto;} } /* ============================================================================= rev12 · THE GENIE COMES OUT OF THE LAMP The lamp is the brand mark itself, at the same measured transform the seal uses. The figure is the supplied artwork, keyed off its black ground by luminance — neon on black means luminance IS the matte, so no hand-cut path. Timing is deliberately unhurried: smoke starts, the figure takes 2.4s to rise and settle, and the whole thing only fires once, when the section is scrolled to. A fast pop reads as a glitch; a slow rise reads as an arrival. ============================================================================= */ .bnl-page--academy .bnl-genie__stage{ position:relative;height:clamp(230px,48vw,300px);margin:0 auto var(--space-md); display:grid;place-items:end center;overflow:hidden;} .bnl-page--academy .bnl-genie__lamp{ position:absolute;left:50%;bottom:0;width:96px;height:96px;margin-left:-48px;z-index:2; filter:drop-shadow(0 0 22px rgba(255,32,231,.45));} .bnl-page--academy .bnl-genie__glow{ position:absolute;left:50%;bottom:-26px;width:260px;height:120px;margin-left:-130px;z-index:1; border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side, rgba(255,32,231,.5), rgba(251,162,74,.18) 55%, transparent 78%);} .bnl-page--academy .bnl-genie__fig{ position:absolute;left:50%;bottom:52px;z-index:3; width:clamp(210px,44vw,280px);height:auto; /* the artwork's smoke tail sits at 51% of its width, so it is pinned there */ margin-left:calc(clamp(210px,44vw,280px) * -0.51); transform-origin:51% 100%; opacity:0;transform:translateY(38%) scale(.42); /* SCREEN, not alpha. The art was drawn on pure black; keying it and compositing over this page's grey panel mixed the neon with grey and muted it — that is the "filter over it" look. Under screen blending black contributes nothing, so the figure renders exactly as drawn, at full vibrance, and needs no matte. */ mix-blend-mode:screen; filter:saturate(1.12) contrast(1.04);} .bnl-page--academy .bnl-genie__stage{background:#000;border-radius:var(--radius-md);} .bnl-page--academy .bnl-genie__smoke{ position:absolute;left:50%;bottom:44px;z-index:2;pointer-events:none; width:120px;height:120px;margin-left:-60px;border-radius:50%;opacity:0; background:radial-gradient(closest-side, rgba(214,150,255,.34), rgba(140,90,220,.14) 52%, transparent 76%); filter:blur(9px);} .bnl-page--academy [data-genie].is-out .bnl-genie__glow{animation:bnl-lampglow 2.8s ease-out .15s forwards;} .bnl-page--academy [data-genie].is-out .bnl-genie__fig{animation:bnl-genierise 2.4s cubic-bezier(.16,.72,.24,1) .45s forwards;} .bnl-page--academy [data-genie].is-out .bnl-genie__smoke--a{animation:bnl-smoke 3.1s ease-out .10s forwards;} .bnl-page--academy [data-genie].is-out .bnl-genie__smoke--b{animation:bnl-smoke 3.4s ease-out .55s forwards;} .bnl-page--academy [data-genie].is-out .bnl-genie__smoke--c{animation:bnl-smoke 3.0s ease-out 1.0s forwards;} @keyframes bnl-genierise{ 0% {opacity:0;transform:translateY(38%) scale(.42);} 22% {opacity:.85;} 70% {transform:translateY(-6%) scale(1.03);} 100%{opacity:1;transform:translateY(0) scale(1);} } @keyframes bnl-lampglow{ 0%{opacity:0;transform:scale(.5);} 45%{opacity:1;transform:scale(1.05);} 100%{opacity:.7;transform:scale(1);} } @keyframes bnl-smoke{ 0% {opacity:0;transform:translate(0,0) scale(.35);} 25% {opacity:.75;} 100%{opacity:0;transform:translate(var(--dx,-18px),-150px) scale(2.1);} } .bnl-page--academy .bnl-genie__smoke--b{--dx:22px;} .bnl-page--academy .bnl-genie__smoke--c{--dx:-4px;} /* it must never move for someone who asked for stillness — it simply is there */ @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-genie__fig{opacity:1;transform:none;animation:none!important;} .bnl-page--academy .bnl-genie__glow{opacity:.7;animation:none!important;} .bnl-page--academy .bnl-genie__smoke{display:none;} } .bnl-page--academy .bnl-genie__hd{justify-content:center;text-align:center;} /* ============================================================================= rev12 · THE WHITE-LABEL CONTROL SLIDES It was two pills that swapped their fill instantly, which read as two buttons rather than one switch. There is now a single machined thumb that travels between the two positions, plus a nudge arrow that pulses on the inactive side until the control has been used once — so the affordance is visible without a caption explaining it. ============================================================================= */ .bnl-page--academy .bnl-wl__seg{position:relative;isolation:isolate;} .bnl-page--academy .bnl-wl__thumb{ position:absolute;top:4px;left:4px;z-index:0; width:calc(50% - 4px);height:calc(100% - 8px);border-radius:var(--radius-pill); background:linear-gradient(180deg,#FFFFFF 0%,#DCE3E8 44%,#A7AFB7 58%,#F0F4F7 100%); box-shadow:0 3px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.95), 0 0 24px -8px rgba(255,32,231,.65); transition:transform .42s cubic-bezier(.22,.61,.36,1);} .bnl-page--academy .bnl-wl__opt{position:relative;z-index:1;flex:1 1 0;min-width:0; background:none!important;box-shadow:none!important;} .bnl-page--academy #wl-you:checked ~ .bnl-wl__picker .bnl-wl__thumb{transform:translateX(100%);} /* the arrow tells you it moves; it stops once you have moved it */ .bnl-page--academy .bnl-wl__nudge{ display:inline-block;margin-left:6px;color:var(--bn-pink); animation:bnl-nudge 1.5s ease-in-out infinite;} .bnl-page--academy #wl-you:checked ~ .bnl-wl__picker .bnl-wl__nudge{display:none;} @keyframes bnl-nudge{0%,100%{transform:translateX(0);opacity:.55;}50%{transform:translateX(4px);opacity:1;}} @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-wl__thumb{transition:none;} .bnl-page--academy .bnl-wl__nudge{animation:none;} } /* ============================================================================= rev12 · WHAT-YOU-GET BECOMES A CARD REEL It was a stacked grid: six long tiles a visitor had to scroll past vertically, which buried the last three. As a horizontal reel the six read as a set you can weigh against each other, and the section stops eating a screen and a half. Same scroll-snap mechanics as the catalog and story reels — one pattern, learned once, three places. ============================================================================= */ .bnl-page--academy .bnl-val--reel{ display:flex;grid-template-columns:none;gap:12px; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding:2px 2px 14px; scrollbar-width:thin;scrollbar-color:var(--al-raw) transparent;} .bnl-page--academy .bnl-val--reel::-webkit-scrollbar{height:5px;} .bnl-page--academy .bnl-val--reel::-webkit-scrollbar-thumb{background:var(--al-raw);border-radius:3px;} .bnl-page--academy .bnl-val--reel:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;} .bnl-page--academy .bnl-val--reel .bnl-val__tile{ flex:0 0 auto;width:min(80vw,320px);scroll-snap-align:center; display:flex;flex-direction:column;} .bnl-page--academy .bnl-val--reel .bnl-val__b{flex:1;} .bnl-page--academy .bnl-val__hint{ margin:6px 0 0;text-align:center;font-size:11.5px;color:var(--color-text-muted);} @media (min-width:720px){ .bnl-page--academy .bnl-val--reel .bnl-val__tile{width:340px;} } /* ============================================================================= rev13 · THE MARKET CHART IS INTERACTIVE It was a static picture of two lines with the endpoints labelled. The whole argument of the section is the widening gap, and a static chart makes a reader take that on faith. Scrubbing the year makes the gap something they open themselves — and the readout names it in points, which the picture never did. Both series are computed from the stated CAGRs (6.5% / 3.5%), so the curve and the copy cannot drift apart. ============================================================================= */ .bnl-page--academy .bnl-mkt__read{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;} .bnl-page--academy .bnl-mkt__yr,.bnl-page--academy .bnl-mkt__v{ border-radius:10px;padding:9px 10px;background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);} .bnl-page--academy .bnl-mkt__read span,.bnl-page--academy .bnl-mkt__yrk{ display:block;font-family:var(--font-heading-proposed);font-size:8.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:3px;} .bnl-page--academy .bnl-mkt__read b{ font-family:var(--font-heading-proposed);font-size:clamp(15px,4.2vw,20px);font-weight:800; letter-spacing:-.03em;color:var(--al-chrome);line-height:1;} .bnl-page--academy .bnl-mkt__v--perm b{color:var(--bn-magenta);} .bnl-page--academy .bnl-mkt__v--gap b{ background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--bn-pink);} .bnl-page--academy .bnl-mkt__range{ -webkit-appearance:none;appearance:none;width:100%;height:3px;display:block;margin:14px 0 0; border-radius:var(--radius-pill);outline:none; background:linear-gradient(90deg,var(--al-raw),var(--bn-magenta));} .bnl-page--academy .bnl-mkt__range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;cursor:pointer;border:0; background:linear-gradient(180deg,#FFFFFF 0%,#C2CAD1 45%,#7C848C 62%,#E2E8ED 100%); box-shadow:0 3px 9px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.95), 0 0 16px -5px rgba(255,32,231,.75);} .bnl-page--academy .bnl-mkt__range::-moz-range-thumb{ width:26px;height:26px;border-radius:50%;cursor:pointer;border:0; background:linear-gradient(180deg,#FFFFFF 0%,#C2CAD1 45%,#7C848C 62%,#E2E8ED 100%);} @media (min-width:560px){ .bnl-page--academy .bnl-mkt__read{grid-template-columns:repeat(4,1fr);} } /* ============================================================================= rev13 · WHAT-YOU-GET IS THE HOME-PAGE COVERFLOW The scroll-snap strip was a reel, not a carousel — it had no autoplay, no arrows and no position indicator. This is the #doors rotator from the home page: same two-axis geometry, same easing, same data-pos state machine, with a thumb slider added so position is draggable as well as visible. Rewritten rather than copied — the home block's rules span ten media queries and carry the unclosed @media recorded in BRI-324/327/329. ============================================================================= */ .bnl-page--academy .bnl-rot--val .bnl-rot__stage{height:clamp(392px,88vw,440px);} .bnl-page--academy .bnl-rot--val .bnl-rot__item{--w:78vw;height:clamp(370px,84vw,418px);} .bnl-page--academy .bnl-vcard{height:100%;display:block;} .bnl-page--academy .bnl-vcard .bnl-val__tile{ height:100%;display:flex;flex-direction:column;margin:0;} .bnl-page--academy .bnl-vcard .bnl-val__b{flex:1;} /* the scrub bar: position you can see and drag{margin-top:12px;padding:0 4px;} @media (min-width:720px){ .bnl-page--academy .bnl-rot--val .bnl-rot__stage{height:452px;} .bnl-page--academy .bnl-rot--val .bnl-rot__item{--w:394px;height:428px;} } /* ============================================================================= rev13 · THE CALLBACK LEAK (BRI-336, condensed) The full calculator lives at /callback-leak/ and prices four callback categories out to five years. That is too much machinery to repeat here, and two calculators competing on one page is worse than one — so this is the short version: four inputs, three figures, and a link through. The $342.50 truck-roll default is carried over unchanged from BRI-336 §9, as is the reasoning for one tech rather than two. If that number is revised there it must be revised here{ display:grid;gap:14px;margin-top:var(--space-ml); padding:var(--space-md);border-radius:var(--radius-md); background:var(--panel-premium);box-shadow:var(--edge-hi),var(--machined);} .bnl-page--academy .bnl-leakcalc__fig--win b{ background:var(--chrome-pink-ramp);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--bn-pink);} .bnl-page--academy .bnl-leakcalc__src{ margin:12px auto 0;max-width:64ch;text-align:center;font-size:11.5px;line-height:1.55; color:var(--color-text-muted);} .bnl-page--academy .bnl-leakcalc__src b{color:var(--al-brushed);} .bnl-page--academy .bnl-leakcalc__cta{margin-top:var(--space-md);text-align:center;} .bnl-page--academy .bnl-leakcalc__ctan{ margin:9px auto 0;max-width:52ch;font-size:11.5px;color:var(--color-text-muted);} /* ============================================================================= rev13 · THE STAMP WAS BEING CLIPPED .bnl-price carries overflow:hidden (it has to — a gradient panel with a radius and a ::before seam). The stamp enters at scale(2.05), so a 214px seal is 439px wide mid-flight and the top of it, plus the stamper handle above it, was cut by the card edge. It read as a seal with its head sliced off. Two changes, not one, because either alone still clips at some viewport: · headroom above the stampblock, so the landed seal and its caption clear · a smaller entry scale, so the in-flight seal fits the card it lands on overflow becomes `clip` rather than `hidden` per BRI-336 §4 — same containment, without turning the card into a scroll container. ============================================================================= */ .bnl-page--academy .bnl-price{overflow:clip;} @supports not (overflow:clip){ .bnl-page--academy .bnl-price{overflow:hidden;} } .bnl-page--academy .bnl-stampblock{ padding-top:clamp(54px,13vw,92px); margin-bottom:clamp(6px,2vw,14px);} .bnl-page--academy .bnl-stampzone[data-stamp] .bnl-stamp{ transform:scale(1.58) rotate(-13deg);} .bnl-page--academy .bnl-stampzone--hero{bottom:13%;} /* ============================================================================= rev15 · FIXES 1 · COVERFLOW BLEED-THROUGH. The front card used --panel-premium, which is a translucent gradient. The card parked behind it at translateZ(-360px) sits dead centre, so its body copy read straight through the front one — that is why the Genie card said "The contractoreowner Genie". Two texts, one box. Every rotator card now gets an opaque base beneath its panel, and the far cards are taken out of the accessibility tree as well as the paint. 2 · MODULES. They were already
, but nothing on screen said so, so eleven openable modules read as a flat list of titles. 3 · CONTACT OPTIONS. Two of the three did nothing on tap. ============================================================================= */ .bnl-page--academy .bnl-rot__item{background:#0A0B0D;border-radius:14px;} .bnl-page--academy .bnl-vcard, .bnl-page--academy .bnl-vcard .bnl-val__tile{background-color:#0C0D10;} .bnl-page--academy .bnl-rot__item[data-pos="2"], .bnl-page--academy .bnl-rot__item[data-pos="-2"], .bnl-page--academy .bnl-rot__item[data-pos="3"], .bnl-page--academy .bnl-rot__item[data-pos="-3"]{visibility:hidden;pointer-events:none;} /* ---- modules: say out loud that they open ---- */ .bnl-page--academy .bnl-mod__q{justify-content:space-between;} .bnl-page--academy .bnl-mod__cue{ margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; color:var(--color-primary);font-family:var(--font-heading-proposed); font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;} .bnl-page--academy .bnl-mod__cue i{font-style:normal;} .bnl-page--academy .bnl-mod__cue svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;} .bnl-page--academy .bnl-mod[open] .bnl-mod__cue svg{transform:rotate(180deg);} .bnl-page--academy .bnl-mod[open] .bnl-mod__cue i{visibility:hidden;} .bnl-page--academy .bnl-mod:hover .bnl-mod__t{color:var(--al-chrome);} @media (max-width:520px){ .bnl-page--academy .bnl-mod__cue i{display:none;} } .bnl-page--academy .bnl-mod__bar{display:flex;justify-content:flex-end;margin:var(--space-md) 0 2px;} .bnl-page--academy .bnl-mod__all{ min-height:44px;padding:0 16px;border-radius:var(--radius-pill);cursor:pointer; border:1px solid var(--color-border);background:rgba(255,255,255,.04); color:var(--al-chrome);font-family:var(--font-heading-proposed); font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;} .bnl-page--academy .bnl-mod__all:hover{background:rgba(255,255,255,.08);} /* ---- contact options ---- */ .bnl-page--academy button.bnl-talk__opt{ width:100%;text-align:left;border:1px solid var(--color-border);cursor:pointer;font:inherit;} .bnl-page--academy .bnl-talk__tag{ margin-left:auto;flex:0 0 auto;padding:5px 10px;border-radius:var(--radius-pill); font-family:var(--font-heading-proposed);font-size:8.5px;font-weight:800; letter-spacing:.13em;text-transform:uppercase;color:var(--bn-yellow); background:rgba(246,198,54,.12);box-shadow:inset 0 0 0 1px rgba(246,198,54,.34);} .bnl-page--academy .bnl-talk__go{ margin-left:auto;flex:0 0 auto;color:var(--color-primary);font-size:19px;line-height:1;} .bnl-page--academy .bnl-talk__notice{ margin:12px auto 0;max-width:52ch;padding:11px 14px;border-radius:10px;text-align:center; font-size:12.5px;line-height:1.55;color:var(--color-text-muted); background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);} .bnl-page--academy .bnl-talk__notice b{color:var(--al-chrome);} /* ============================================================================= rev16 · FIVE MEASURED FIXES ============================================================================= */ /* 1 · THE GENIE'S HEAD WAS BEING CUT OFF — measured, not guessed. The artwork is 420x494, so it is 1.176x taller than it is wide. Anchored at bottom:52px it needed 299px of stage at 390px viewport and 381px at desktop. The stage was clamp(230px,48vw,300px) with overflow:hidden — short by 69px on a phone and 81px on desktop, which is exactly where his head was going. Stage now sized from the figure's own geometry, with headroom for the 1.03 overshoot at 70% of the rise. */ .bnl-page--academy .bnl-genie__stage{ height:clamp(330px,74vw,410px);} .bnl-page--academy .bnl-genie__fig{bottom:44px;} /* 2 · THE CARD WAS OVERLAPPING ITS OWN CONTROLS — which is why the slider could not be dragged. The stage is a fixed-height box holding absolutely positioned cards; the card content ran past that height and, with overflow visible, painted straight over the pills and the scrub bar below. Anything under a card swallows the pointer, so the arrows, the names and the thumb were all dead. Card clipped, controls lifted above the stage, and the stage given the taller of the two heights so nothing spills. */ .bnl-page--academy .bnl-rot__item{overflow:hidden;} .bnl-page--academy .bnl-rot__ctrl, .bnl-page--academy .bnl-rot__hint{position:relative;z-index:20;} .bnl-page--academy .bnl-rot__stage{z-index:1;} /* 3 · DEAD SPACE INSIDE THE CARDS. .bnl-val__b carried flex:1, which shoved the INCLUDED tag to the floor and left a hole in the middle of every card. The text now sits under the heading and the tag follows it. Cards shrink to suit, so the reel stops being taller than it needs to be. */ .bnl-page--academy .bnl-vcard .bnl-val__b{flex:0 0 auto;} .bnl-page--academy .bnl-vcard .bnl-val__tile{ padding:var(--space-md);gap:2px;justify-content:flex-start;} .bnl-page--academy .bnl-vcard .bnl-val__tag{margin-top:12px;align-self:flex-start;} .bnl-page--academy .bnl-rot--val .bnl-rot__item{height:clamp(300px,74vw,342px);} .bnl-page--academy .bnl-rot--val .bnl-rot__stage{height:clamp(318px,78vw,362px);} /* 4 · THE TRACK CTAs BECOME PILLS. They were bare text links under a $1,000 card — the least emphatic thing in the section was the thing you press. */ .bnl-page--academy .bnl-track__go{ align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px; min-height:46px;padding:0 22px;border-radius:var(--radius-pill); font-family:var(--font-heading-proposed);font-size:12.5px;font-weight:800; letter-spacing:.06em;text-decoration:none;color:#0A0A0A; background:var(--bn-flow);background-size:220% 100%; box-shadow:0 6px 22px -6px rgba(255,32,231,.75), 0 0 34px -10px rgba(251,162,74,.7), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .2s ease, box-shadow .25s ease, background-position .5s ease;} .bnl-page--academy .bnl-track__go:hover{ transform:translateY(-1px);background-position:100% 0; box-shadow:0 8px 28px -6px rgba(255,32,231,.9), 0 0 46px -8px rgba(251,162,74,.85), inset 0 1px 0 rgba(255,255,255,.6);} .bnl-page--academy .bnl-track__card--lead .bnl-track__go{ box-shadow:0 6px 24px -5px rgba(255,32,231,.95), 0 0 52px -10px rgba(255,95,168,.85), inset 0 1px 0 rgba(255,255,255,.55);} /* 5 · THE GAP ABOVE "TWO WAYS THROUGH THE ACADEMY". The credential section is the #compare fact ticker, which closes with a full section pad; #tracks then opens with another. Two full section pads stack into most of a dead screen on a phone. The seam between those two specific sections is collapsed — not the global section padding, which every other band still needs. */ .bnl-page--academy #compare{padding-bottom:var(--space-md);} .bnl-page--academy #tracks{padding-top:var(--space-md);} @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-track__go{transition:none;} } /* 6 · THE SLIDERS WERE 4px TALL. The thumb was drawn 44x22, but a range input only hit-tests inside its own box — and the box was the height of the track, 3 to 4px. On a phone that is a 4px target against a 44px minimum, so the drag almost never started. Every range now stands 44px tall with a transparent box and the visible track painted into it, .bnl-page--academy .bnl-mkt__range, .bnl-page--academy .bnl-model__range{ height:44px;background-color:transparent;background-repeat:no-repeat; background-position:center;border-radius:0;touch-action:pan-y;} .bnl-page--academy .bnl-mkt__range{ background-image:linear-gradient(90deg,var(--al-raw),var(--bn-magenta)); background-size:100% 4px;} .bnl-page--academy .bnl-model__range{ background-image:linear-gradient(90deg,var(--al-raw),var(--color-primary)); background-size:100% 4px;} /* the track is painted by the background, so the native runnable track is hidden */ .bnl-page--academy input[type=range]::-webkit-slider-runnable-track{background:transparent;height:44px;} .bnl-page--academy input[type=range]::-moz-range-track{background:transparent;height:44px;} .bnl-page--academy input[type=range]::-webkit-slider-thumb{margin-top:0;} /* ============================================================================= rev17 · THE COMPARISON STRIP IS NOW A CONTROL, NOT A MARQUEE This is the slider that could not be grabbed — and it was never a slider. It was a CSS marquee: two copies of seven cards translated by a 54s linear keyframe. There was nothing to drag, no arrows and no position, so a thumb had nothing to take hold of. Every previous fix went to the coverflow, which was not the element in the screenshot. Rebuilt as a real scroll container: 7 cards (the duplicate set was only there to hide the loop seam), native horizontal scrolling with snap, arrows, and a range input bound to scrollLeft in both directions. It drifts on its own until you touch it, then it is yours and stays put. ============================================================================= */ .bnl-page--academy .bnl-ticker{ position:relative;display:flex;align-items:center;gap:8px; overflow:visible;padding:var(--space-sm) 0;-webkit-mask-image:none;mask-image:none;} .bnl-page--academy .bnl-ticker__track{ display:flex;gap:10px;width:auto;flex:1 1 auto;min-width:0; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;scroll-behavior:smooth; padding:2px 2px 10px;animation:none!important; scrollbar-width:thin;scrollbar-color:var(--al-raw) transparent;} .bnl-page--academy .bnl-ticker__track::-webkit-scrollbar{height:5px;} .bnl-page--academy .bnl-ticker__track::-webkit-scrollbar-thumb{background:var(--al-raw);border-radius:3px;} .bnl-page--academy .bnl-ticker__track:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;} .bnl-page--academy .bnl-ticker .bnl-fact{scroll-snap-align:center;} .bnl-page--academy .bnl-ticker__hint{ margin:4px auto 0;max-width:var(--width-content);padding:0 var(--space-md); text-align:center;font-size:11.5px;color:var(--color-text-muted);} /* ============================================================================= rev17 · THE CLOSER LANDS IN TWO BEATS, AND IT IS BIG One line broken by a
read as a single lump at body-ish size on a closing panel. "Learn it once." now arrives first and "Own the market." follows it, so the promise and the payoff are two separate moments rather than one sentence. ============================================================================= */ .bnl-page--academy .bnl-closer__title{ font-size:clamp(42px,13vw,104px);line-height:.94;letter-spacing:-.045em;} .bnl-page--academy .bnl-closer__l{ display:block;opacity:0;transform:translateY(26px);} .bnl-page--academy .bnl-closer.is-in .bnl-closer__l--a{ animation:bnl-closein .85s cubic-bezier(.2,.75,.3,1) .1s forwards;} .bnl-page--academy .bnl-closer.is-in .bnl-closer__l--b{ animation:bnl-closein .85s cubic-bezier(.2,.75,.3,1) .62s forwards;} @keyframes bnl-closein{to{opacity:1;transform:translateY(0);}} @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-closer__l{opacity:1;transform:none;animation:none!important;} } /* ============================================================================= rev17 · THE STAMP ACTUALLY STAMPS It faded in from a scale. A stamp is a press: the die drops, hits, the whole thing recoils a little, the ink blooms outward from the contact, and the paper takes the shock. Timings are short and unequal on purpose — a symmetrical ease reads as a UI transition, not an impact. ============================================================================= */ @keyframes bnl-stamp{ 0% {transform:translateY(-56px) scale(1.58) rotate(-13deg);opacity:0;filter:blur(3px);} 38% {opacity:1;filter:blur(0);} 56% {transform:translateY(0) scale(.965) rotate(-3.5deg);} /* contact, die squashes */ 68% {transform:translateY(-9px) scale(1.028) rotate(-3.5deg);} /* recoil */ 80% {transform:translateY(0) scale(.99) rotate(-3.5deg);} 90% {transform:translateY(-2px) scale(1.004) rotate(-3.5deg);} 100% {transform:translateY(0) scale(1) rotate(-3.5deg);opacity:1;} } @keyframes bnl-shock{ 0% {opacity:0;transform:scale(.34);} 46% {opacity:.85;} 100%{opacity:0;transform:scale(1.9);} } .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp{ animation:bnl-stamp .92s cubic-bezier(.34,.9,.3,1) forwards;} .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp__ink{ animation:bnl-shock .86s cubic-bezier(.2,.8,.3,1) .50s forwards;} /* ============================================================================= rev18 · THE BLURRED SEALS — A REGRESSION I INTRODUCED IN rev17 The rest state is transform:scale(1.58) … ; filter:blur(3px) and the press animation runs with `forwards`. My rewritten keyframes set filter:blur(0) at 38% and then never mentioned filter again. A property that appears in SOME keyframes still interpolates across the whole timeline: the browser builds the missing 100% stop from the UNDERLYING value — blur(3px). So every seal flew in, sharpened halfway, and then smoothly went back out of focus and stayed there. That is why the hero seal, the price seal and the credential-card medallion were all soft at rest. filter is now declared at every stop that needs it, including 100%, so nothing is inferred. ============================================================================= */ @keyframes bnl-stamp{ 0% {transform:translateY(-58px) scale(1.62) rotate(-13deg);opacity:0;filter:blur(4px);} 34% {opacity:1;filter:blur(1.2px);} 50% {filter:blur(0);} 56% {transform:translateY(0) scale(.962) rotate(-3.5deg);filter:blur(0);} /* contact */ 68% {transform:translateY(-10px) scale(1.03) rotate(-3.5deg);filter:blur(0);} /* recoil */ 80% {transform:translateY(0) scale(.988) rotate(-3.5deg);filter:blur(0);} 90% {transform:translateY(-2px) scale(1.005) rotate(-3.5deg);filter:blur(0);} 100% {transform:translateY(0) scale(1) rotate(-3.5deg);opacity:1;filter:blur(0);} } /* belt and braces: whatever the animation leaves behind, the settled state is sharp */ .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp{filter:blur(0)!important;} /* the ink shock reads as the impact, so it fires on contact, not on entry */ .bnl-page--academy .bnl-stampzone[data-stamp].is-stamped .bnl-stamp__ink{ animation:bnl-shock .8s cubic-bezier(.2,.85,.3,1) .50s forwards;} /* ============================================================================= rev18 · THE CALLBACK CTA WAS AN UNSTYLED LINK It carried .bnl-btn--ghost, a class that does not exist in this stylesheet, so it fell through to the browser default and rendered as dark blue underlined text — the one link on the page that looked like it came from a different site. ============================================================================= */ .bnl-page--academy .bnl-btn--leak{ color:var(--al-chrome);text-decoration:none; background:color-mix(in srgb, var(--bn-magenta) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bn-pink) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.16), 0 0 30px -8px rgba(255,32,231,.65);} .bnl-page--academy .bnl-btn--leak:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--bn-magenta) 20%, transparent); box-shadow:inset 0 0 0 1px var(--bn-pink), inset 0 1px 0 rgba(255,255,255,.24), 0 0 44px -6px rgba(255,32,231,.9);} .bnl-page--academy .bnl-btn--leak svg{ fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} /* ============================================================================= rev18 · THE GENIE HAS TO COME OUT OF THE LAMP The bulb sat at 96px with the figure's tail ending 44px above the floor, so there was clear air between the smoke and the mark — he was floating above a logo rather than rising from it. The lamp is bigger, the figure sits lower so the tail runs INTO it, and a bloom at the mouth of the bulb hides the seam where artwork meets vector. ============================================================================= */ .bnl-page--academy .bnl-genie__lamp{ width:128px;height:128px;margin-left:-64px;bottom:6px; filter:drop-shadow(0 0 26px rgba(255,32,231,.6)) drop-shadow(0 0 60px rgba(251,162,74,.3));} .bnl-page--academy .bnl-genie__fig{bottom:74px;} .bnl-page--academy .bnl-genie__glow{ width:300px;margin-left:-150px;bottom:-14px;height:132px;} /* the mouth of the bulb — where the smoke enters */ .bnl-page--academy .bnl-genie__stage::after{ content:"";position:absolute;left:50%;bottom:74px;width:132px;height:74px; margin-left:-66px;z-index:2;pointer-events:none;border-radius:50%; background:radial-gradient(closest-side, rgba(255,140,220,.5), rgba(251,162,74,.2) 55%, transparent 78%); filter:blur(9px);opacity:0;} .bnl-page--academy [data-genie].is-out .bnl-genie__stage::after, .bnl-page--academy [data-genie].is-out::after{opacity:1;transition:opacity 1.4s ease .5s;} .bnl-page--academy .bnl-genie__smoke{bottom:70px;} /* ============================================================================= rev18 · THE CLOSER WAS MOSTLY EMPTY min-height:min(72vh,640px) with a 2xl pad on top of that, wrapped round an image slot that has no image yet. On a phone that is most of a screen of black above the line and most of another below it. Height now follows the type. ============================================================================= */ .bnl-page--academy .bnl-closer{min-height:0;} .bnl-page--academy .bnl-closer__content{ padding:clamp(34px,9vw,64px) var(--space-md);} .bnl-page--academy .bnl-closer__title{margin:0;} /* the closer now sits immediately above the price card, so the two read as one beat: the promise, then what it costs. No section gap between them. */ .bnl-page--academy .bnl-closer{padding-bottom:0;} .bnl-page--academy #price{padding-top:clamp(12px,3vw,28px);padding-bottom:clamp(18px,4.5vw,40px);} /* ============================================================================= rev19 · THE CALLBACK LEAK — REBUILT AS A DIFFERENT INSTRUMENT ----------------------------------------------------------------------------- It was a near-clone of the profitability model in #math: same panel, same stack of four sliders on the left, same row of stat tiles on the right. Two calculators that look identical read as one calculator shown twice, and the reader stops treating the second one as new information. So this is a different instrument, not a restyle: · a PIPE with a breach in it, not a bar chart · STEPPERS, not sliders — a different gesture entirely (and it sidesteps the 44px drag problem: a button is a tap, and taps are exact) · ONE headline number that is a LOSS, in warning red, with the recovery sitting under it in brand gradient — loss above, gain below · vertical flow, meter first. #math is a two-column model; this is a gauge. The range inputs survive underneath, visually hidden but focusable, so keyboard and assistive tech keep a real, labelled control. ============================================================================= */ .bnl-page--academy .bnl-leak2{ margin-top:var(--space-lg);display:grid;gap:18px; border-radius:var(--radius-lg);padding:var(--space-md); background: radial-gradient(120% 80% at 50% 0%, rgba(255,72,72,.13), transparent 62%), linear-gradient(180deg, #14090C 0%, #0C0D10 58%); box-shadow:inset 0 0 0 1px rgba(255,120,120,.16), var(--machined);} /* ---- the pipe ---- */ .bnl-page--academy .bnl-leak2__pipe{ position:relative;height:34px;border-radius:8px;overflow:visible; background:linear-gradient(180deg,#2A2F36,#171B21 46%,#0E1116); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.07);} .bnl-page--academy .bnl-leak2__flow{ position:absolute;inset:5px 6px;border-radius:5px; background:linear-gradient(90deg,#3C444D,#5A636D 45%,#3C444D); background-size:200% 100%;animation:bnl-lkflow 5.5s linear infinite;} @keyframes bnl-lkflow{to{background-position:-200% 0;}} /* the breach: a bright wound whose width tracks the callback rate */ .bnl-page--academy .bnl-leak2__breach{ position:absolute;top:4px;bottom:4px;left:50%;width:12%;transform:translateX(-50%); border-radius:5px;background:linear-gradient(90deg,transparent,#FF4848 30%,#FFB0B0 50%,#FF4848 70%,transparent); box-shadow:0 0 24px rgba(255,72,72,.75); transition:width .35s cubic-bezier(.2,.75,.3,1);} .bnl-page--academy .bnl-leak2__drip{ position:absolute;left:50%;top:26px;width:5px;height:5px;margin-left:-2.5px; border-radius:50%;background:#FF6A6A;box-shadow:0 0 10px rgba(255,72,72,.9); animation:bnl-lkdrip 1.9s cubic-bezier(.45,.05,.75,.6) infinite;} .bnl-page--academy .bnl-leak2__drip--2{animation-delay:.62s;margin-left:-13px;} .bnl-page--academy .bnl-leak2__drip--3{animation-delay:1.24s;margin-left:8px;} @keyframes bnl-lkdrip{ 0% {transform:translateY(0) scale(.6);opacity:0;} 18% {opacity:1;transform:translateY(4px) scale(1);} 100%{transform:translateY(30px) scale(.7);opacity:0;} } /* ---- what pooled up ---- */ .bnl-page--academy .bnl-leak2__pool{ margin-top:16px;display:grid;gap:12px;text-align:center;} .bnl-page--academy .bnl-leak2__poollbl{ display:block;font-family:var(--font-heading-proposed);font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:5px;} .bnl-page--academy .bnl-leak2__big{ font-family:var(--font-heading-proposed);font-weight:800;line-height:1; font-size:clamp(38px,11vw,60px);letter-spacing:-.035em; color:#FF7A7A;text-shadow:0 0 34px rgba(255,72,72,.45); font-variant-numeric:tabular-nums;} .bnl-page--academy .bnl-leak2__caught{ padding-top:12px;border-top:1px solid rgba(255,255,255,.09);} .bnl-page--academy .bnl-leak2__big--win{ font-size:clamp(30px,8.4vw,46px);color:transparent;text-shadow:none; background:var(--bn-flow);background-size:220% 100%; -webkit-background-clip:text;background-clip:text; animation:bnl-flow 7s linear infinite;} /* ---- the recovery split ---- */ .bnl-page--academy .bnl-leak2__split{ position:relative;height:12px;border-radius:var(--radius-pill);margin-top:4px; background:rgba(255,72,72,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);} .bnl-page--academy .bnl-leak2__splitfill{ position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-pill); background:var(--bn-flow);box-shadow:0 0 18px -2px rgba(255,32,231,.6); transition:width .35s cubic-bezier(.2,.75,.3,1);} .bnl-page--academy .bnl-leak2__splitmark{ display:block;margin-top:9px;text-align:center; font-family:var(--font-heading-proposed);font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--al-brushed);} .bnl-page--academy .bnl-leak2__note{ margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--color-text-muted);} .bnl-page--academy .bnl-leak2__note b{color:var(--al-chrome);} /* ---- the dials: steppers ---- */ .bnl-page--academy .bnl-leak2__dials{ display:grid;grid-template-columns:1fr;gap:10px;} .bnl-page--academy .bnl-leak2__dial{ border-radius:12px;padding:12px 14px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1);} .bnl-page--academy .bnl-leak2__dk{ display:block;font-family:var(--font-heading-proposed);font-size:10.5px;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:9px;} .bnl-page--academy .bnl-leak2__spin{ display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:8px;} .bnl-page--academy .bnl-leak2__step{ width:46px;height:46px;border:0;border-radius:12px;cursor:pointer; font-family:var(--font-heading-proposed);font-size:22px;font-weight:700;line-height:1; color:var(--al-chrome);background:linear-gradient(180deg,#242A31,#161A1F); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.16), 0 2px 8px -2px rgba(0,0,0,.9); transition:transform .12s ease, box-shadow .18s ease, background .18s ease;} .bnl-page--academy .bnl-leak2__step:hover{ background:linear-gradient(180deg,#2E353D,#1B2026); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-pink) 60%,transparent), inset 0 1px 0 rgba(255,255,255,.2), 0 0 22px -6px rgba(255,32,231,.7);} .bnl-page--academy .bnl-leak2__step:active{transform:translateY(1px) scale(.97);} .bnl-page--academy .bnl-leak2__step[disabled]{opacity:.32;cursor:default;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);} .bnl-page--academy .bnl-leak2__step:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);} .bnl-page--academy .bnl-leak2__dv{ text-align:center;font-family:var(--font-heading-proposed);font-weight:800; font-size:clamp(21px,5.6vw,26px);letter-spacing:-.02em;color:var(--al-chrome); font-variant-numeric:tabular-nums;} /* the real control stays for keyboard and assistive tech — visually hidden, still focusable */ .bnl-page--academy .bnl-leak2__native{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} .bnl-page--academy .bnl-leak2__native:focus-visible{ position:static;width:100%;height:44px;margin:10px 0 0;clip:auto;clip-path:none; background-color:transparent; background-image:linear-gradient(var(--bn-pink),var(--bn-pink)); background-size:100% 4px;background-position:0 50%;background-repeat:no-repeat; outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);} @media (min-width:640px){ .bnl-page--academy .bnl-leak2__dials{grid-template-columns:1fr 1fr;gap:12px;} } @media (min-width:900px){ .bnl-page--academy .bnl-leak2{grid-template-columns:1.15fr .95fr;gap:26px;align-items:center;padding:var(--space-lg);} .bnl-page--academy .bnl-leak2__dials{grid-template-columns:1fr;} } @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-leak2__flow, .bnl-page--academy .bnl-leak2__drip, .bnl-page--academy .bnl-leak2__big--win{animation:none!important;} .bnl-page--academy .bnl-leak2__drip{opacity:.55;} .bnl-page--academy .bnl-leak2__breach, .bnl-page--academy .bnl-leak2__splitfill{transition:none;} } /* ============================================================================= rev19 · HERO FILM ----------------------------------------------------------------------------- The source is 50s of handheld portrait b-roll of a finished home cycling through colours — no speech, only outdoor ambience. That is not a film you click to watch; it is atmosphere. So it autoplays MUTED and loops, and the old play button is repurposed as a pause control rather than deleted. That button is not decoration. WCAG 2.2.2 requires a pause mechanism for anything that moves for more than five seconds. Removing it would fail. The source is HLG 10-bit HDR (bt2020). Browsers that cannot read HLG render it washed and grey, so it was tone-mapped to bt709 SDR at encode time rather than left for the client to guess at. ============================================================================= */ /* the frame is position:relative, not a grid — these stack by absolute inset, not grid-area. A grid-area here would have been silently inert. */ .bnl-page--academy .bnl-hero__video{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:50% 42%; display:block;background:#07080A;} .bnl-page--academy .bnl-hero__vscrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(0deg, var(--color-bg) 2%, rgba(7,8,10,.55) 34%, transparent 72%), radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(7,8,10,.6) 100%);} /* as a pause control it belongs out of the way, not centred over the shot */ .bnl-page--academy .bnl-hero__play{ z-index:4;left:auto;top:auto;right:14px;bottom:14px;transform:none; width:46px;height:46px;} .bnl-page--academy .bnl-hero__play:active{transform:scale(.95);} .bnl-page--academy .bnl-hero__ico{width:18px;height:18px;margin-left:0;fill:currentColor;} .bnl-page--academy .bnl-hero__ico--play{margin-left:2px;} .bnl-page--academy .bnl-hero__ico--pause{display:none;} .bnl-page--academy .bnl-hero__play[aria-pressed="true"] .bnl-hero__ico--play{display:none;} .bnl-page--academy .bnl-hero__play[aria-pressed="true"] .bnl-hero__ico--pause{display:block;} /* while it is running the control recedes; it returns on hover, focus or pause */ .bnl-page--academy .bnl-hero__play[aria-pressed="true"]{opacity:.42;} .bnl-page--academy .bnl-hero__play:hover, .bnl-page--academy .bnl-hero__play:focus-visible{opacity:1;} @media (prefers-reduced-motion:reduce){ .bnl-page--academy .bnl-hero__play[aria-pressed="true"]{opacity:1;} } /* ============================================================================= rev20 · THE PRICE CARD HAD TO FIT ONE PHONE SCREEN ----------------------------------------------------------------------------- Measured, not eyeballed: 924px tall on a 390x844 iPhone with a 67px sticky bar, so 777px of room and 147px of overflow. The seal and the price never appeared on screen together, which is the one pairing the whole card exists to make. Where the height went, and what each cut buys back at 390px wide: card padding 128px -> 52px (76) stamp block 252px -> ~190px (62) price figure 85px -> ~62px (23) benefit list 340px -> ~250px (90) The meta line also became three pills — as one centred sentence it wrapped and orphaned the word "FEE" on its own line. ============================================================================= */ .bnl-page--academy .bnl-price{ padding:clamp(26px,6.5vw,46px) clamp(18px,5vw,34px); border-radius:var(--radius-lg);} /* a hard specular edge — the card should read as machined metal, not a panel */ .bnl-page--academy .bnl-price::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.7);} .bnl-page--academy .bnl-stampblock{ padding-top:clamp(30px,8vw,64px); margin-bottom:clamp(2px,1vw,10px);} .bnl-page--academy .bnl-stampzone--price{ width:clamp(150px,40vw,208px);height:clamp(150px,40vw,208px);} .bnl-page--academy .bnl-price__fig{ font-size:clamp(46px,13.5vw,78px);margin:2px 0 0;} /* ---- terms as pills ---- */ .bnl-page--academy .bnl-price__terms{ list-style:none;margin:11px 0 0;padding:0; display:flex;flex-wrap:wrap;justify-content:center;gap:6px;} .bnl-page--academy .bnl-price__terms li{ font-family:var(--font-heading-proposed);font-size:9.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--al-brushed); padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.14);} /* ---- the list, tightened ---- */ .bnl-page--academy .bnl-price__list{ margin:clamp(14px,4vw,22px) auto;gap:9px;max-width:400px;} .bnl-page--academy .bnl-price__list li{ padding-left:24px;font-size:.9rem;line-height:1.38;color:var(--al-brushed);} .bnl-page--academy .bnl-price__list li::before{ top:6px;width:9px;height:9px; background:linear-gradient(180deg,#FFFFFF,#98A0A8); box-shadow:0 0 0 3px rgba(255,255,255,.06);} .bnl-page--academy .bnl-price__fine{margin:clamp(10px,3vw,16px) 0 0;font-size:12.5px;} /* ============================================================================= rev20 · THE RECOVERY IS GREEN, AND ITS LABEL HAD FALLEN INTO THE BAR ----------------------------------------------------------------------------- Two things. The recovered figure was running the brand gradient, the same gradient the ENROL button uses — so the money coming back read as another piece of brand furniture. Money returning is green. The loss above it stays red, and the pair now tells the story without reading the labels. And the "% recovered" caption was a block inside a 12px-tall bar, so it rendered across the bar's own fill and the number vanished underneath it. It is lifted out on absolute positioning with room reserved below. ============================================================================= */ .bnl-page--academy .bnl-leak2__big--win{ background:linear-gradient(180deg,#B6FFD2 0%,#37E58B 46%,#12B866 100%); background-size:100% 100%;-webkit-background-clip:text;background-clip:text; color:transparent;animation:none; filter:drop-shadow(0 0 26px rgba(55,229,139,.42));} .bnl-page--academy .bnl-leak2__caught{ border-top-color:rgba(55,229,139,.22);} .bnl-page--academy .bnl-leak2__split{ overflow:visible;margin-bottom:30px;} .bnl-page--academy .bnl-leak2__splitfill{ background:linear-gradient(90deg,#12B866,#37E58B 60%,#8BFFC0); box-shadow:0 0 18px -2px rgba(55,229,139,.65);} .bnl-page--academy .bnl-leak2__splitmark{ position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0; color:#7BE9AF;} .bnl-page--academy .bnl-leak2__note{margin-top:4px;} /* ============================================================================= rev21 · THE ARITHMETIC WAS RIGHT, THE CHAIN WAS INVISIBLE ----------------------------------------------------------------------------- 60 installs x 12% = 7.2 callbacks x $340 = $2,448. Correct to the cent — but the page only ever printed the $2,448. A reader who does the mental step and lands on "7.2 jobs" has no figure to check it against, so the total reads wrong even though it is not. The chain is now on the page above the money. The second half is a real understatement, not a display bug. The $150-$500 band is the truck roll ALONE. It does not price the install that did not get booked because the van was out fixing something already paid for. The dial now runs to $1,200 so a contractor can load their own slot cost in, and the note says plainly that the default is a floor. ⚠️ The $342.50 DEFAULT is unchanged — it has to agree with /callback-leak/ (BRI-336). If that page adopts a fully-loaded figure, change both together. ============================================================================= */ .bnl-page--academy .bnl-leak2__chain{ margin:14px 0 2px;text-align:center; font-family:var(--font-heading-proposed);font-size:12.5px;font-weight:600; letter-spacing:.06em;color:var(--color-text-muted);} .bnl-page--academy .bnl-leak2__chain b{ color:var(--al-chrome);font-weight:800;font-variant-numeric:tabular-nums;} .bnl-page--academy .bnl-leakcalc__src--warn{ margin-top:10px;color:var(--al-brushed);} .bnl-page--academy .bnl-leakcalc__src--warn b{color:#FF9E9E;}