/* BKK by XYZ — design system for NATIVE Elementor widgets. Loads on BKK Elementor pages (front-end) + the Elementor editor preview, so native Heading/Text/Button/Image/Counter widgets carry the v6 design via class, and stay fully editable in Elementor. */ /* ===== page base (file only enqueues on BKK pages) ===== */ /* Canvas (bkk-elpage) pages are NOT body.bkk-inner, so they never got the inner-page overflow guard. Clip horizontal bleed (decor glows) so no stray horizontal scrollbar appears. X-AXIS ONLY: on these pages is overflow:visible, so the body's overflow propagates to the viewport — if we clipped the Y axis here too, the viewport would inherit overflow-y:clip and the page could no longer scroll vertically. Use `clip` (not `hidden`) so no scroll container is created (keeps position:sticky working). */ body.bkk-elpage{ overflow-x:clip; background:#08080B; color:#F5F3EC; font-family:'Space Grotesk',-apple-system,sans-serif; -webkit-font-smoothing:antialiased; --bg:#08080B; --bg-2:#0E0E15; --panel:#13131C; --p2:#191922; --ink:#F5F3EC; --mut:#9A9AA8; --faint:#6A6A78; --gold:#FF2D2D; --gold2:#FF6B6B; --green:#39C57F; --line:rgba(255,255,255,0.09); } body.bkk-elpage ::selection{ background:#FF2D2D; color:#08080B; } .bkk-elpage .elementor-section{ position:relative; } /* kill Elementor default widget gaps we don't want */ .bkk-elpage .elementor-widget:not(:last-child){ margin-bottom:0; } .bkk-elpage .elementor-widget-heading .elementor-heading-title{ margin:0; } .bkk-elpage .elementor-widget-text-editor{ line-height:1.6; } /* ===== eyebrow / mono labels ===== */ .bkk-eyebrow .elementor-heading-title,.bkk-eyebrow .elementor-widget-container{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#FF2D2D; } /* ===== display headings (Archivo expanded) ===== */ .bkk-h1 .elementor-heading-title{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; text-transform:uppercase; line-height:0.9; letter-spacing:-0.02em; color:#F5F3EC; font-size:clamp(40px,6.6vw,104px); } .bkk-h2 .elementor-heading-title{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; text-transform:uppercase; line-height:0.92; letter-spacing:-0.015em; color:#F5F3EC; font-size:clamp(30px,6vw,61px); } .bkk-h3 .elementor-heading-title{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; line-height:1; letter-spacing:-0.01em; color:#F5F3EC; font-size:clamp(22px,2.6vw,34px); } .bkk-h4 .elementor-heading-title{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; line-height:1.05; color:#F5F3EC; font-size:clamp(18px,2vw,24px); } .bkk-red .elementor-heading-title,.bkk-red .elementor-heading-title *{ color:#FF2D2D; text-shadow:0 0 34px rgba(255,45,45,0.4); } /* ===== body copy ===== */ .bkk-body .elementor-widget-container{ font-family:'Space Grotesk',sans-serif; color:#9A9AA8; line-height:1.62; font-size:clamp(14px,1.4vw,17px); } .bkk-body .elementor-widget-container p{ margin:0 0 1em; } .bkk-body .elementor-widget-container p:last-child{ margin-bottom:0; } .bkk-body strong,.bkk-body b{ color:#F5F3EC; font-weight:600; } .bkk-body-sm .elementor-widget-container{ font-size:14px; line-height:1.6; color:#9A9AA8; font-family:'Space Grotesk',sans-serif; } /* ===== buttons (pill) ===== */ .bkk-btn-gold .elementor-button,.bkk-btn-line .elementor-button{ font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; border-radius:100px; padding:16px 28px; transition:transform .25s,box-shadow .25s,border-color .25s,background .25s; border:1px solid transparent; } .bkk-btn-gold .elementor-button{ color:#08080B; background:#FF2D2D; } .bkk-btn-gold .elementor-button:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,45,45,0.34); color:#08080B; background:#FF2D2D; } .bkk-btn-line .elementor-button{ color:#F5F3EC; background:rgba(8,8,11,0.4); border-color:rgba(255,255,255,0.09); } .bkk-btn-line .elementor-button:hover{ border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.05); color:#F5F3EC; } .bkk-btn-lg .elementor-button{ padding:20px 44px; font-size:15px; box-shadow:0 20px 60px rgba(255,45,45,0.4); } /* ===== cards / panels ===== */ .bkk-card .elementor-widget-wrap,.bkk-card.elementor-column > .elementor-widget-wrap{ } .bkk-card{ background:#13131C; border:1px solid rgba(255,255,255,0.09); border-radius:18px; } .bkk-card-pad > .elementor-widget-wrap,.bkk-card-pad > .elementor-element-populated{ padding:clamp(24px,2.8vw,38px) !important; } .bkk-card-feature{ background:linear-gradient(165deg,rgba(255,45,45,0.14),rgba(19,19,28,0.9)); border:1px solid rgba(255,45,45,0.5); box-shadow:0 24px 60px rgba(255,45,45,0.12); } .bkk-card-hover{ transition:border-color .35s,transform .35s; } .bkk-card-hover:hover{ border-color:rgba(255,45,45,0.45); transform:translateY(-4px); } /* ===== stats (native counter) ===== */ .bkk-stat .elementor-counter-number-wrapper{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; font-size:clamp(28px,3.4vw,44px); line-height:1; color:#FF2D2D; justify-content:flex-start; } .bkk-stat .elementor-counter-title{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#9A9AA8; margin-top:8px; text-align:left; } .bkk-stat-ink .elementor-counter-number-wrapper{ color:#F5F3EC; } /* ===== images ===== */ .bkk-logo .elementor-widget-container,.bkk-logo img{ width:auto; } .bkk-center{ text-align:center; } .bkk-center .elementor-heading-title,.bkk-center .elementor-widget-container{ text-align:center; } .bkk-center .elementor-button-wrapper{ text-align:center; } /* ===== section helpers ===== */ .bkk-dark > .elementor-container,.bkk-dark{ position:relative; } .bkk-sec-line{ border-top:1px solid rgba(255,255,255,0.09); } .bkk-pad > .elementor-container{ padding-top:clamp(60px,8vw,120px); padding-bottom:clamp(60px,8vw,120px); } .bkk-padx > .elementor-container{ padding-left:clamp(18px,4vw,52px); padding-right:clamp(18px,4vw,52px); } .bkk-maxw > .elementor-container{ max-width:1320px; } /* let the WebGL/decor html widgets sit behind content */ .bkk-elpage .elementor-widget-html .bkk-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; } /* ===== /tonight chromeless gate ===== */ .bkk-tonight-sec{ min-height:100vh; text-align:center; overflow:hidden; } .bkk-tonight-sec > .elementor-container{ min-height:100vh; align-items:center; justify-content:center; } .bkk-tonight-sec .elementor-column{ max-width:600px; } .bkk-tonight-sec .elementor-widget-wrap{ align-content:center; padding:clamp(40px,8vw,90px) clamp(18px,4vw,52px); } .bkk-tonight-sec .elementor-widget{ width:100% !important; } .bkk-tonight-sec .elementor-widget-image{ text-align:center; } .bkk-logo-72 img{ height:72px !important; width:auto !important; max-width:none !important; display:block; margin:0 auto clamp(20px,3vw,32px); } .bkk-logo-72{ text-align:center; } .bkk-logo-46 img{ height:46px !important; width:auto !important; max-width:none !important; display:block; } .bkk-logo-42 img{ height:42px !important; width:auto !important; max-width:none !important; display:block; } .bkk-tonight-sec .bkk-eyebrow{ margin-bottom:18px; } .bkk-tonight-sec .bkk-eyebrow .elementor-heading-title{ letter-spacing:0.24em; } .bkk-tonight-sec .bkk-h1 .elementor-heading-title{ font-size:clamp(42px,8vw,92px); } .bkk-tonight-sec .bkk-body{ margin:14px 0 34px; } .bkk-tonight-sec .bkk-body .elementor-widget-container{ font-size:clamp(14px,1.6vw,17px); } /* ===== /portal ===== */ .bkk-portal-navlabel .elementor-heading-title{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#9A9AA8; text-align:right; } .bkk-portal-navlabel{ display:flex; align-items:center; justify-content:flex-end; height:100%; } .bkk-elpage .bkk-logo-42 img{ height:42px !important; width:auto !important; max-width:none !important; } .bkk-portal-glow{ background:radial-gradient(ellipse at 50% -10%,rgba(255,45,45,0.12),transparent 60%); } .bkk-portal-pill{ display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:#FF2D2D; border:1px solid rgba(255,255,255,0.09); background:rgba(255,45,45,0.06); padding:8px 14px; border-radius:100px; margin-bottom:22px; } .bkk-portal-pill .dot{ width:6px; height:6px; border-radius:50%; background:#FF2D2D; box-shadow:0 0 10px #FF2D2D; animation:bkkPulse 2s infinite; } @keyframes bkkPulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} } .bkk-portal-h1 .elementor-heading-title{ font-size:clamp(36px,6vw,80px); line-height:0.92; } .bkk-portal-sub .elementor-widget-container{ max-width:52ch; margin:18px auto 0; } .bkk-portal-label .elementor-heading-title{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#9A9AA8; } .bkk-portal-label-gold .elementor-heading-title{ color:#FF2D2D; } .bkk-portal-label{ margin-bottom:14px; } /* member block */ .bkk-portal-mh{ margin:18px 0 8px; font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:clamp(24px,2.8vw,38px); color:#F5F3EC; } .bkk-portal-mp{ margin:0 0 20px; font-size:14.5px; line-height:1.6; color:#9A9AA8; } .bkk-portal-chip{ display:flex; align-items:center; gap:12px; background:#191922; border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:16px 18px; margin:0 0 16px; } .bkk-portal-chip .av{ width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.09); background:radial-gradient(120% 120% at 50% 30%,rgba(255,45,45,0.18),#161620 72%); font-family:'Archivo',sans-serif; font-stretch:125%; font-weight:900; font-size:14px; color:#FF2D2D; } .bkk-portal-chip .bd{ flex:1; } .bkk-portal-chip .n{ font-family:'Archivo',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:14px; color:#F5F3EC; } .bkk-portal-chip .s{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:#6A6A78; margin-top:2px; } .bkk-portal-chip .vf{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:#39C57F; } .bkk-portal-join{ display:block; text-align:center; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:#08080B; background:#FF2D2D; padding:17px; border-radius:100px; text-decoration:none; box-shadow:0 14px 40px rgba(255,45,45,0.28); } /* section B */ .bkk-portal-bwrap{ position:relative; } .bkk-portal-bdecor{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(ellipse at 80% 0%,#000,transparent 70%); mask-image:radial-gradient(ellipse at 80% 0%,#000,transparent 70%); pointer-events:none; } .bkk-portal-codeform{ position:relative; display:flex; flex-direction:column; } .bkk-portal-codeform label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#6A6A78; margin-bottom:8px; } .bkk-portal-codeform input{ width:100%; background:rgba(8,8,11,0.6); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:16px 18px; color:#F5F3EC; font-family:'Space Mono',monospace; font-size:15px; letter-spacing:0.1em; text-transform:uppercase; text-align:center; outline:none; margin-bottom:20px; } .bkk-portal-codeform input:focus{ border-color:#FF2D2D; } .bkk-portal-codeform button{ text-align:center; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:#08080B; background:#FF2D2D; padding:17px; border:0; border-radius:100px; cursor:pointer; box-shadow:0 14px 40px rgba(255,45,45,0.28); } .bkk-portal-codeform .hint{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.08em; color:#6A6A78; margin-top:12px; text-align:center; } /* hide login form for logged-in members */ body.logged-in .bkk-login-wrap{ display:none !important; } /* ===== portal top nav ===== */ .bkk-portal-nav{ display:flex; align-items:center; gap:20px; padding:14px clamp(18px,4vw,52px); border-bottom:1px solid var(--line); background:rgba(8,8,11,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .bkk-portal-nav .bpn-logo img{ height:40px; width:auto; display:block; } .bkk-portal-nav .bpn-links{ display:flex; gap:22px; align-items:center; margin-left:8px; flex:1; } .bkk-portal-nav .bpn-link{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mut); text-decoration:none; transition:color .2s; } .bkk-portal-nav .bpn-link:hover{ color:var(--gold); } .bkk-portal-nav .bpn-right{ display:flex; align-items:center; gap:16px; } .bkk-portal-nav .bpn-hi{ display:flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); } .bkk-portal-nav .bpn-hi img{ width:26px; height:26px; border-radius:50%; } .bkk-portal-nav .bpn-cta{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:#08080B; background:var(--gold); padding:9px 18px; border-radius:100px; text-decoration:none; white-space:nowrap; } @media(max-width:760px){ .bkk-portal-nav .bpn-links{ display:none; } } /* ===== signed-in member dashboard (portal Section A) ===== */ .bkk-dash{ display:flex; flex-direction:column; gap:18px; } .bkk-dash-saved{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#39C57F; } .bkk-dash-form{ display:flex; flex-direction:column; gap:12px; } .bkk-dash-id{ display:flex; align-items:center; gap:14px; } .bkk-dash-av{ position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; cursor:pointer; border:1px solid var(--line); display:block; } .bkk-dash-av img{ width:100%; height:100%; object-fit:cover; display:block; } .bkk-dash-av-edit{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(8,8,11,0.6); color:#F5F3EC; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:0.1em; text-transform:uppercase; opacity:0; transition:opacity .2s; } .bkk-dash-av:hover .bkk-dash-av-edit{ opacity:1; } .bkk-dash-name{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:20px; color:#F5F3EC; line-height:1; } .bkk-dash-handle{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#FF2D2D; margin-top:5px; } .bkk-dash-l{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#6A6A78; } .bkk-dash-sel,.bkk-dash-ta,.bkk-dash-in{ width:100%; background:#191922; border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:#F5F3EC; font-family:'Space Grotesk',sans-serif; font-size:14px; outline:none; } .bkk-dash-sel:focus,.bkk-dash-ta:focus,.bkk-dash-in:focus{ border-color:#FF2D2D; } /* member testimonial form */ .bkk-dash-tm{ margin-top:6px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; } .bkk-dash-tm form{ display:flex; flex-direction:column; gap:12px; } .bkk-tm-badge{ align-self:flex-start; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:5px 12px; border-radius:100px; border:1px solid var(--line); } .bkk-tm-badge.live{ color:#39C57F; border-color:rgba(57,197,127,0.4); } .bkk-tm-badge.pending{ color:#E2B23B; border-color:rgba(226,178,59,0.4); } .bkk-tm-note{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.04em; border-radius:10px; padding:10px 12px; } .bkk-tm-note.ok{ color:#39C57F; background:rgba(57,197,127,0.08); border:1px solid rgba(57,197,127,0.3); } .bkk-tm-note.warn{ color:#E2B23B; background:rgba(226,178,59,0.08); border:1px solid rgba(226,178,59,0.3); } .bkk-tm-fine{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:#6A6A78; } .bkk-dash-ta{ resize:vertical; min-height:74px; } .bkk-dash-save{ align-self:flex-start; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:#08080B; background:#FF2D2D; border:0; border-radius:100px; padding:12px 24px; cursor:pointer; transition:transform .2s; } .bkk-dash-save:hover{ transform:translateY(-2px); } .bkk-dash-sub{ background:#191922; border:1px solid var(--line); border-radius:14px; padding:18px; } .bkk-dash-plan{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:18px; color:#F5F3EC; margin:6px 0 4px; } .bkk-dash-status{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#9A9AA8; } .bkk-dash-status .ok{ color:#39C57F; } .bkk-dash-status .off{ color:#6A6A78; } .bkk-dash-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .bkk-dash-btn{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; border-radius:100px; padding:12px 18px; text-decoration:none; transition:transform .2s,border-color .2s,color .2s; } .bkk-dash-btn.gold{ color:#08080B; background:#FF2D2D; box-shadow:0 10px 30px rgba(255,45,45,0.2); } .bkk-dash-btn.gold:hover{ transform:translateY(-2px); } .bkk-dash-btn.line{ color:#F5F3EC; border:1px solid var(--line); } .bkk-dash-btn.line:hover{ border-color:#FF2D2D; color:#FF2D2D; } /* PMPro form theming on BKK pages */ body.bkk-elpage .pmpro_form,body.bkk-elpage #pmpro_account,body.bkk-elpage .pmpro_login_wrap,body.bkk-elpage .pmpro_card{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } body.bkk-elpage .pmpro_form_field label,body.bkk-elpage .pmpro_login_wrap label{ font-family:'Space Mono',monospace !important; font-size:10px !important; letter-spacing:0.14em !important; text-transform:uppercase !important; color:#6A6A78 !important; margin-bottom:8px !important; display:block !important; } body.bkk-elpage .pmpro_form input[type=text],body.bkk-elpage .pmpro_form input[type=email],body.bkk-elpage .pmpro_form input[type=password],body.bkk-elpage .pmpro_login_wrap input{ width:100% !important; background:#191922 !important; border:1px solid rgba(255,255,255,0.09) !important; border-radius:12px !important; padding:14px 16px !important; color:#F5F3EC !important; font-family:'Space Mono',monospace !important; font-size:13px !important; outline:none !important; margin-bottom:14px !important; } body.bkk-elpage .pmpro_btn,body.bkk-elpage .pmpro_login_wrap input[type=submit]{ width:100% !important; text-align:center !important; font-family:'Space Mono',monospace !important; font-size:13px !important; letter-spacing:0.08em !important; text-transform:uppercase !important; font-weight:700 !important; color:#08080B !important; background:#FF2D2D !important; padding:16px !important; border:0 !important; border-radius:100px !important; cursor:pointer !important; box-shadow:0 14px 40px rgba(255,45,45,0.22) !important; } body.bkk-elpage .pmpro_message,body.bkk-elpage .pmpro_error{ background:rgba(255,45,45,0.08) !important; border:1px solid rgba(255,45,45,0.4) !important; color:#F5F3EC !important; border-radius:12px !important; padding:12px 14px !important; } body.bkk-elpage .pmpro_login_wrap a{ color:#9A9AA8; } /* ===== custom login form ([bkk_login]) ===== */ .bkk-login2{ display:block; } .bkk-login2-err{ background:rgba(255,45,45,0.1); border:1px solid rgba(255,45,45,0.45); color:#F5F3EC; border-radius:12px; padding:12px 14px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.04em; margin-bottom:18px; } .bkk-login2-form{ display:block; } .bkk-login2-l{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#6A6A78; margin:0 0 8px; display:block; } .bkk-login2-in{ width:100%; background:#191922; border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:#F5F3EC; font-family:'Space Mono',monospace; font-size:14px; outline:none; margin:0 0 16px; transition:border-color .2s; } .bkk-login2-in:focus{ border-color:#FF2D2D; } .bkk-login2-in::placeholder{ color:#6A6A78; } .bkk-login2-pwrap{ position:relative; margin:0 0 18px; } .bkk-login2-pwrap .bkk-login2-in{ margin:0; padding-right:50px; } .bkk-login2-eye{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; padding:0; cursor:pointer; color:#6A6A78; transition:color .2s; } .bkk-login2-eye:hover{ color:#F5F3EC; } .bkk-login2-eye.on{ color:#FF2D2D; } .bkk-login2-eye svg{ width:19px; height:19px; display:block; } .bkk-login2-eye .e-off{ display:none; } .bkk-login2-eye.on .e-open{ display:none; } .bkk-login2-eye.on .e-off{ display:inline; } .bkk-login2-submit{ width:100%; text-align:center; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:#08080B; background:#FF2D2D; border:0; border-radius:100px; padding:16px; cursor:pointer; box-shadow:0 14px 40px rgba(255,45,45,0.22); transition:transform .2s; } .bkk-login2-submit:hover{ transform:translateY(-2px); } .bkk-login2-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; } .bkk-login2-remember{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; } .bkk-login2-remember input{ width:15px; height:15px; accent-color:#FF2D2D; cursor:pointer; margin:0; } .bkk-login2-remember span{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#9A9AA8; } .bkk-login2-lost{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#6A6A78; text-decoration:none; transition:color .2s; } .bkk-login2-lost:hover{ color:#FF2D2D; } .bkk-login2-cta{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); } .bkk-login2-cta-t{ font-family:'Archivo','Arial Narrow',sans-serif; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:16px; color:#F5F3EC; } .bkk-login2-cta-s{ font-size:13px; line-height:1.5; color:#9A9AA8; margin:6px 0 14px; } .bkk-login2-cta-btn{ display:inline-flex; align-items:center; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:#F5F3EC; border:1px solid var(--line); border-radius:100px; padding:11px 20px; text-decoration:none; transition:border-color .2s,color .2s,background .2s; } .bkk-login2-cta-btn:hover{ border-color:#FF2D2D; color:#FF2D2D; background:rgba(255,45,45,0.06); } /* ===== content hubs ===== */ /* Pin the hub topbar to the viewport. It's baked into its own ~64px section, so position:sticky has no scroll range and just scrolls away. position:fixed pins it across the whole page. Its decor + bar are the section's only children and both go out of flow, so the section collapses and the hero rises to the top — the hero's existing 70px top padding already clears the ~64px bar (no offset hack needed). */ .bkk-elpage .hub-topbar{ position:fixed !important; top:0; left:0; right:0; } .bkk-elpage .hub-kicker .elementor-heading-title{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#FF2D2D; } .bkk-elpage .hub-title .elementor-heading-title{ font-size:clamp(40px,6.4vw,104px); } .bkk-elpage .hub-tagline .elementor-widget-container{ max-width:52ch; font-size:clamp(15px,1.5vw,18px); line-height:1.65; } .bkk-elpage .hub-graphic{ position:relative; aspect-ratio:1/1; border-radius:22px; border:1px solid var(--line); overflow:hidden; background:radial-gradient(ellipse at 50% 36%,rgba(255,45,45,0.1),var(--panel) 70%); display:flex; align-items:center; justify-content:center; padding:clamp(28px,4vw,56px); } .bkk-elpage .hub-graphic > svg{ position:relative; width:100%; height:100%; max-width:340px; } .bkk-elpage .hub-masonry{ column-count:3; column-gap:16px; } .bkk-elpage .hub-masonry > *{ break-inside:avoid; -webkit-column-break-inside:avoid; } .bkk-elpage .hub-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .bkk-elpage .hub-spot{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start; } .bkk-elpage .hub-graphic svg *{ transform-box:fill-box; transform-origin:center; } @keyframes hubFlow{0%,100%{transform:translateX(0);}50%{transform:translateX(7px);}} @keyframes hubNib{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(-3px,4px) rotate(-5deg);}} @keyframes hubQuill{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-4px) rotate(3deg);}} @keyframes hubLineG{0%,100%{transform:scaleX(1);opacity:.7;}50%{transform:scaleX(1.08);opacity:1;}} @keyframes hubSpin360{to{transform:rotate(360deg);}} @keyframes hubPop{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.16);opacity:1;}} @keyframes hubFloatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} @keyframes hubTwinkle{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:1;transform:scale(1.5);}} @keyframes hubMag{0%,100%{transform:translate(0,0);}50%{transform:translate(-5px,-5px);}} .bkk-elpage .hub-graphic:hover svg.hg-creative-writing > g{animation:hubFlow 1.8s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-creative-writing > path{animation:hubNib 1.3s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-shakespeares-square > path{animation:hubQuill 1.6s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-shakespeares-square > g line{animation:hubLineG 1.4s ease-in-out infinite;transform-origin:left center;} .bkk-elpage .hub-graphic:hover svg.hg-illuminate > g{animation:hubSpin360 7s linear infinite;} .bkk-elpage .hub-graphic:hover svg.hg-illuminate > circle:last-of-type{animation:hubPop 1.5s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-fantasy-series > path{animation:hubFloatY 2.4s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-fantasy-series > g circle{animation:hubTwinkle 1.7s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-looking-lists > circle,.bkk-elpage .hub-graphic:hover svg.hg-looking-lists > line{animation:hubMag 1.6s ease-in-out infinite;} .bkk-elpage .hub-graphic:hover svg.hg-looking-lists > g rect{animation:hubPop 1.3s ease-in-out infinite;} .bkk-elpage .hub-topbar,.bkk-elpage .hub-chips{ font-family:'Space Grotesk',sans-serif; } .bkk-elpage .hub-title .elementor-heading-title{ margin-top:20px; } .bkk-elpage .hub-tagline .elementor-widget-container{ margin-top:24px; } .bkk-elpage .elementor-widget.hub-btn-inline{ display:inline-block !important; width:auto !important; vertical-align:top; margin:30px 12px 0 0 !important; } .bkk-elpage .hub-btn-inline .elementor-button{ width:auto; } @media (max-width:900px){ .bkk-elpage .hub-masonry{ column-count:2; } .bkk-elpage .hub-2,.bkk-elpage .hub-spot{ grid-template-columns:1fr !important; } .bkk-elpage .hub-topbar .hub-tabs{ display:none !important; } .bkk-elpage .hub-graphic{ max-width:320px; margin:0 auto; } } @media (max-width:560px){ .bkk-elpage .hub-masonry{ column-count:1; } } /* ===== homepage native tail (beats / mailing / footer) ===== */ .bkk-elpage .bkk-mb-16 .elementor-heading-title{ margin-bottom:16px; } .bkk-elpage .bkk-mb-24{ margin-bottom:24px; } .bkk-elpage .bkk-mb-24 .elementor-heading-title{ letter-spacing:0.3em; } .bkk-elpage .bkk-mail-h2 .elementor-heading-title{ font-size:clamp(30px,5.6vw,50px); line-height:0.9; } .bkk-elpage .bkk-mail-sub .elementor-widget-container{ max-width:48ch; margin:26px auto 0; font-size:clamp(15px,1.6vw,18px); } .bkk-elpage .bkk-foot-tag .elementor-widget-container{ max-width:34ch; font-size:14px; margin-top:14px; } .bkk-elpage .bkk-logo-46 img{ height:46px !important; width:auto !important; max-width:none !important; } .bkk-elpage .bkk-foot-inner > .elementor-container{ align-items:center; } @media (max-width:920px){ .bkk-elpage .elementor-section .elementor-column.bkk-col-half{ width:100% !important; } }