/* Bonvibe — bespoke stylesheet. Prefix: bnv. Mobile-first (min-width only). Vanilla Bootstrap 5 grid loaded via in — no custom .row/.col*. */ :root { --bnv-sky: #4FC3E0; --bnv-sky-deep: #2E9DC2; --bnv-gold: #F2B90F; --bnv-gold-deep: #D99A0A; --bnv-amber: #E38A2E; --bnv-rose: #E8785A; --bnv-clover: #3E7A4B; --bnv-cream: #FFF7E4; --bnv-cream-deep: #FBE9C4; --bnv-ink: #241708; --bnv-ink-soft: #4A3420; --bnv-ink-softer: #6B4E2E; --bnv-white: #FFFFFF; --bnv-line: rgba(36,23,8,0.14); --bnv-shadow: 0 18px 40px rgba(36,23,8,0.28); --bnv-radius: 18px; --bnv-font-display: "Lilita One", "Arial Black", sans-serif; --bnv-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--bnv-font-body); font-size: 16px; line-height: 1.55; color: var(--bnv-ink); background: var(--bnv-cream); } /* Site-wide static backdrop — a fixed-position sibling pair right after instead of `background-attachment: fixed` on body itself, which has a real iOS Safari repaint/scroll-jank bug. Image is set inline via style="" per CLAUDE.md Golden Rule #1 (never url() in CSS). */ .bnv-site-bg { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center 38%; background-repeat: no-repeat; } .bnv-site-scrim { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36,23,8,.55) 0%, rgba(255,247,228,.88) 46%, var(--bnv-cream) 78%); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } h1, h2, h3, h4 { font-family: var(--bnv-font-display); color: var(--bnv-ink); margin: 0 0 .5em; line-height: 1.15; letter-spacing: .3px; } p { margin: 0 0 1em; } .bnv-container { width: 100%; } .bnv-skip-link { position: absolute; left: -999px; top: 0; background: var(--bnv-gold); color: var(--bnv-ink); padding: 12px 18px; z-index: 2000; font-weight: 700; border-radius: 0 0 10px 0; } .bnv-skip-link:focus { left: 0; } /* ---------- Eyebrow + heading accent device ---------- */ .bnv-eyebrow { display: block; font-family: var(--bnv-font-body); font-weight: 800; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bnv-clover); border-bottom: 3px solid var(--bnv-gold); padding-bottom: 6px; margin-bottom: 14px; max-width: max-content; } .bnv-eyebrow--light { color: var(--bnv-gold); border-bottom-color: var(--bnv-cream); } .bnv-h-accent { color: var(--bnv-clover); } .bnv-section-head { margin-bottom: 28px; max-width: 640px; } .bnv-section-head h2 { font-size: 1.9rem; } .bnv-section-head p { color: var(--bnv-ink-soft); font-size: 1.02rem; } /* ---------- Buttons ---------- */ .bnv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font-weight: 800; white-space: nowrap; font-size: 1rem; border: 2px solid transparent; cursor: pointer; touch-action: manipulation; } .bnv-btn[hidden] { display: none; } .bnv-btn--primary { background: var(--bnv-gold); color: var(--bnv-ink); box-shadow: 0 10px 24px rgba(217,154,10,0.4); } .bnv-btn--primary:hover { background: var(--bnv-gold-deep); } .bnv-btn--ghost { background: transparent; color: var(--bnv-ink); border-color: var(--bnv-ink); } .bnv-btn--ghost-light { background: transparent; color: var(--bnv-cream); border-color: var(--bnv-cream); } .bnv-btn--sm { min-height: 44px; padding: 9px 18px; font-size: .92rem; } .bnv-link-cta { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font-weight: 800; color: var(--bnv-ink); border-bottom: 2px solid var(--bnv-gold-deep); padding: 4px 2px; } /* ---------- Age note (non-badge, inline, required everywhere) ---------- */ .bnv-age-note { font-size: .85rem; color: var(--bnv-ink-soft); } /* ========================================================= NAV — split-brand-flank-nav: centered brand badge with two flanking pill link-clusters + a detached auth chip. NOT a single horizontal bar. ========================================================= */ /* The badge text and the "Play Responsibly" link both need real breathing room to stay on one line each — there isn't enough of it on a phone screen, so this whole strip stays hidden below 768px. The same 21+/ play-responsibly messaging already lives in the hero wayfinder badge and the mobile drawer, so nothing is lost, just decluttered. */ .bnv-topline { display: none; } @media (min-width: 768px) { .bnv-topline { background: var(--bnv-ink); color: var(--bnv-cream); font-size: .78rem; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } } .bnv-topline__badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .bnv-topline__coins { font-weight: 800; color: var(--bnv-gold); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .bnv-nav { position: sticky; top: 0; z-index: 900; background: var(--bnv-ink); padding: 8px 12px; min-height: 64px; } .bnv-nav__row { display: flex; align-items: center; max-width: 1240px; margin: 0 auto; gap: 14px; } .bnv-nav__brand { display: flex; align-items: center; gap: 8px; min-height: 44px; flex: 0 0 auto; } .bnv-nav__brand svg { width: 34px; height: 34px; } .bnv-nav__brand-word { display: flex; flex-direction: column; line-height: 1.05; } .bnv-nav__brand-name { font-family: var(--bnv-font-display); color: var(--bnv-cream); font-size: 1.3rem; } .bnv-nav__brand-tagline, .bnv-footer__medallion-tagline { font-family: var(--bnv-font-body); font-weight: 800; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } .bnv-nav__brand-tagline { font-size: .44rem; letter-spacing: .06em; } .bnv-nav__toggle { background: var(--bnv-gold); color: var(--bnv-ink); border: none; border-radius: 10px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .bnv-nav__auth-chip { display: none; } .bnv-nav__links { display: none; } .bnv-nav__drawer { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--bnv-ink); color: var(--bnv-cream); transform: translateX(100%); transition: transform .28s ease; z-index: 1000; padding: 20px; overflow-y: auto; } .bnv-nav__drawer.is-open { transform: translateX(0); } .bnv-nav__drawer-close { min-height: 44px; min-width: 44px; background: transparent; border: none; color: var(--bnv-cream); font-size: 1.4rem; } .bnv-nav__drawer-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 4px; } .bnv-nav__drawer-list a { display: block; min-height: 44px; display: flex; align-items: center; padding: 10px 6px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); } .bnv-nav__drawer-auth { display: grid; gap: 10px; margin-top: 16px; } .bnv-nav__scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .2s; } .bnv-nav__scrim.is-open { opacity: 1; pointer-events: auto; } /* Desktop nav — plain left-aligned logo, an inline link row that only takes the width its own links need (no shared pill background to stretch), and the auth buttons pinned to the far right via margin-left:auto. Nothing here is forced to fill a flex zone, so nothing stretches and nothing gets squeezed into wrapping — each piece just takes its natural width. */ @media (min-width: 992px) { .bnv-nav { padding: 10px 24px; } .bnv-nav__row { min-height: 56px; } .bnv-nav__toggle { display: none; } .bnv-nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .bnv-nav__links a { display: flex; align-items: center; white-space: nowrap; min-height: 40px; padding: 0 14px; color: var(--bnv-cream); font-weight: 700; font-size: .9rem; border-radius: 999px; transition: background .15s ease, color .15s ease; } .bnv-nav__links a:hover, .bnv-nav__links a.is-active { background: var(--bnv-gold); color: var(--bnv-ink); } .bnv-nav__auth-chip { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; } .bnv-nav__scrim, .bnv-nav__drawer { display: none; } } /* ---------- Age badge — wayfinder-post-badge, standalone construction ---------- */ .bnv-wayfinder-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--bnv-ink); color: var(--bnv-cream); border-radius: 10px; padding: 8px 14px; font-size: .82rem; font-weight: 700; position: relative; border-left: 4px solid var(--bnv-gold); } .bnv-wayfinder-badge__post { font-family: var(--bnv-font-display); color: var(--bnv-gold); font-size: 1rem; } /* ========================================================= HERO — hero-fullbleed-photo, text container right-anchored, floating CTA card, pill-row trust signals, stat-row-3 below-cta. ========================================================= */ .bnv-hero { position: relative; min-height: 39vh; display: flex; align-items: flex-end; overflow: hidden; } .bnv-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .bnv-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,23,8,.15) 0%, rgba(36,23,8,.55) 72%, rgba(36,23,8,.86) 100%); } .bnv-hero__inner { position: relative; z-index: 2; width: 100%; padding: 40px 18px 32px; } .bnv-hero__card { background: rgba(36,23,8,0.72); backdrop-filter: blur(6px); border-radius: var(--bnv-radius); padding: 26px 22px; max-width: 560px; margin-left: auto; box-shadow: var(--bnv-shadow); border: 1px solid rgba(255,255,255,.12); } .bnv-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .bnv-hero__pill { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 13px; border-radius: 999px; background: rgba(242,185,15,0.16); border: 1px solid var(--bnv-gold); color: var(--bnv-gold); font-size: .78rem; font-weight: 800; } .bnv-hero__h1 { color: var(--bnv-white); font-size: 2rem; margin-bottom: 14px; } .bnv-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; } .bnv-hero__cta .bnv-link-cta { color: var(--bnv-cream); border-bottom-color: var(--bnv-gold); } .bnv-hero__stats { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 480px) { .bnv-hero__stats { grid-template-columns: repeat(3, 1fr); } } .bnv-hero__stat { text-align: center; background: rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 6px; } .bnv-hero__stat b { display: block; font-family: var(--bnv-font-display); color: var(--bnv-gold); font-size: 1.15rem; } .bnv-hero__stat span { display: block; font-size: .72rem; color: var(--bnv-cream); opacity: .9; } .bnv-hero__age { margin-top: 16px; } @media (min-width: 768px) { .bnv-hero__h1 { font-size: 2.7rem; } .bnv-hero__card { padding: 34px; } } @media (min-width: 992px) { .bnv-hero { min-height: 43vh; } .bnv-hero__inner { padding: 60px 40px 56px; } .bnv-hero__h1 { font-size: 3.4rem; } .bnv-hero__card { max-width: 620px; } } /* ========================================================= HERO-SPLIT — hero-split-copy-visual, text container LEFT-anchored, stat-row-3 beside the headline, floating-card CTA, no pill row (trust_signal_style: omitted-from-hero). ========================================================= */ .bnv-hero-split { padding: 34px 0 10px; } .bnv-hero-split__grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; } .bnv-hero-split__copy { order: 1; } .bnv-hero-split__visual { order: 2; } .bnv-hero-split__visual img { border-radius: 20px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--bnv-shadow); } .bnv-hero-split__headline-row { margin-bottom: 14px; } .bnv-hero-split__h1 { font-size: 2rem; margin-bottom: 12px; } .bnv-hero-split__stats { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 360px; } .bnv-hero-split__stats .bnv-hero__stat { background: var(--bnv-cream-deep); text-align: left; padding: 8px 12px; display: flex; align-items: baseline; gap: 8px; } .bnv-hero-split__stats .bnv-hero__stat b { color: var(--bnv-clover); font-size: 1.05rem; } .bnv-hero-split__stats .bnv-hero__stat span { color: var(--bnv-ink-soft); } .bnv-hero-split__lead { font-size: 1.04rem; color: var(--bnv-ink-soft); margin-bottom: 18px; } .bnv-hero-split__cta-card { display: inline-block; background: var(--bnv-white); border-radius: 16px; padding: 14px 16px; box-shadow: var(--bnv-shadow); margin-bottom: 18px; position: relative; } @media (min-width: 768px) { .bnv-hero-split__h1 { font-size: 2.6rem; } } @media (min-width: 992px) { .bnv-hero-split__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } .bnv-hero-split__h1 { font-size: 3rem; } .bnv-hero-split__stats { grid-template-columns: repeat(3, 1fr); max-width: none; } .bnv-hero-split__cta-card { margin-right: -34px; } } /* ---------- Testimonial strip ---------- */ .bnv-testimonials { padding: 46px 0; } .bnv-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .bnv-testimonials__item { background: var(--bnv-white); border-radius: 16px; padding: 20px; margin: 0; box-shadow: 0 6px 16px rgba(36,23,8,.08); font-size: .96rem; color: var(--bnv-ink-soft); } .bnv-testimonials__item cite { display: block; margin-top: 10px; font-style: normal; font-weight: 800; color: var(--bnv-ink); font-size: .84rem; } @media (min-width: 768px) { .bnv-testimonials__grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- Jackpot band (jackpot-meter-band, single-figure style) ---------- */ .bnv-jackpot { padding: 10px 0 46px; } .bnv-jackpot__band { background: linear-gradient(120deg, var(--bnv-ink), #3a2812); border-radius: 22px; padding: 34px 22px; text-align: center; color: var(--bnv-cream); } .bnv-jackpot__figure { display: block; font-family: var(--bnv-font-display); font-size: 2.6rem; color: var(--bnv-gold); margin: 10px 0 6px; } .bnv-jackpot__label { display: block; font-weight: 700; opacity: .92; } .bnv-jackpot__note { margin: 12px auto 0; max-width: 460px; font-size: .82rem; opacity: .75; } @media (min-width: 768px) { .bnv-jackpot__figure { font-size: 3.6rem; } } /* ---------- FAQ teaser band ---------- */ .bnv-faq-teaser { padding: 46px 0; } /* ---------- VIP / rewards teaser band ---------- */ .bnv-vip-teaser { padding: 10px 0 50px; } .bnv-vip-teaser__band { background: linear-gradient(120deg, var(--bnv-clover), #2E5A38); border-radius: 22px; padding: 30px 22px; color: var(--bnv-cream); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .bnv-vip-teaser__band h3 { color: var(--bnv-white); font-size: 1.5rem; } @media (min-width: 768px) { .bnv-vip-teaser__band { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px; } } /* ---------- Stats strip (homepage block) ---------- */ .bnv-stats-strip { background: var(--bnv-ink); padding: 30px 0; } .bnv-stats-strip__grid { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: center; } .bnv-stats-strip__item b { display: block; font-family: var(--bnv-font-display); font-size: 1.6rem; color: var(--bnv-gold); } .bnv-stats-strip__item span { color: var(--bnv-cream); font-size: .84rem; } @media (min-width: 480px) { .bnv-stats-strip__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .bnv-stats-strip__grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================= GAME CARDS — hide-tag-swing-flap-card: a leather-tag flap pinned at the corner swings open on hover/focus to reveal the rating + Play control. Landscape (16:9) art. ========================================================= */ .bnv-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--bnv-ink); box-shadow: 0 10px 22px rgba(36,23,8,0.22); isolation: isolate; } .bnv-card__media { position: relative; aspect-ratio: 16 / 9; } .bnv-card__media img { width: 100%; height: 100%; object-fit: cover; } .bnv-card__cta { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--bnv-gold); color: var(--bnv-ink); font-weight: 800; font-size: .84rem; box-shadow: 0 6px 16px rgba(0,0,0,.35); } /* Hover-reveal only on real pointer devices — touch/mobile has no hover state to trigger it (and the invisible .bnv-card__link already makes the whole image tappable), so it stays hidden there instead of sitting stuck "on" from a sticky touch-hover. */ @media (hover: hover) and (pointer: fine) { .bnv-card:hover .bnv-card__cta, .bnv-card:focus-within .bnv-card__cta { display: inline-flex; } } .bnv-card__link { position: absolute; inset: 0; z-index: 3; } .bnv-card__link:focus { outline: 3px solid var(--bnv-gold); outline-offset: -3px; } .bnv-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 576px) { .bnv-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .bnv-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .bnv-grid--library { grid-template-columns: repeat(4, 1fr); } } /* ---------- game-catalog-stack: curated horizontal-scroll rows ---------- */ .bnv-catalog { padding: 52px 0; } .bnv-catalog__row { margin-bottom: 34px; } .bnv-catalog__row h3 { font-size: 1.3rem; margin-bottom: 14px; } .bnv-catalog__grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 576px) { .bnv-catalog__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .bnv-catalog__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .bnv-catalog__grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- recent-wins-ticker ---------- */ .bnv-ticker { background: var(--bnv-cream-deep); border-top: 1px solid var(--bnv-line); border-bottom: 1px solid var(--bnv-line); padding: 14px 0; overflow: hidden; } .bnv-ticker__label { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bnv-clover); margin-bottom: 8px; display: block; } .bnv-ticker__track { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; } .bnv-ticker__track::-webkit-scrollbar { display: none; } .bnv-ticker__item { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--bnv-white); border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 700; box-shadow: 0 3px 8px rgba(36,23,8,.08); } .bnv-ticker__item b { color: var(--bnv-clover); } /* ========================================================= FLAGSHIP SLOT — grassland-viewport-lever-rig ========================================================= */ .bnv-slot-section { padding: 56px 0; background: linear-gradient(180deg, var(--bnv-cream), var(--bnv-cream-deep)); } .bnv-slot { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--bnv-shadow); } .bnv-slot__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .bnv-slot__scrim { position: absolute; inset: 0; background: rgba(36,23,8,0.72); } .bnv-slot__inner { position: relative; z-index: 1; padding: 22px 16px 26px; display: flex; flex-direction: column; gap: 18px; } .bnv-slot__rig { position: relative; display: flex; align-items: stretch; gap: 10px; } .bnv-slot__viewport { flex: 1; background: repeating-linear-gradient(90deg, #7a5a2e 0 3px, #6b4d26 3px 6px); border: 6px solid var(--bnv-amber); border-radius: 14px; padding: 8px; box-shadow: inset 0 0 24px rgba(0,0,0,.55); } /* game-ui */ .bnv-slot__reels { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; } .bnv-slot__reels.is-spinning .bnv-slot__cell img { filter: blur(2.5px); } .bnv-slot__cell { aspect-ratio: 1 / 1; background: var(--bnv-ink); border-radius: 6px; overflow: hidden; position: relative; } .bnv-slot__cell img { width: 100%; height: 100%; object-fit: cover; } .bnv-slot__cell.is-win { outline: 3px solid var(--bnv-gold); box-shadow: 0 0 16px var(--bnv-gold); animation: bnv-cell-pulse 1s ease infinite; } @keyframes bnv-cell-pulse { 0%,100% { outline-color: var(--bnv-gold);} 50% { outline-color: var(--bnv-rose);} } /* ---------- HUD — coin credit meters, cabinet-console style ---------- */ /* Mobile-first: compact meters, centered so a wrapped 2nd line still sits dead-center under the first instead of hugging the left edge (that left-hugging is what made space-between look broken once the row wrapped). */ .bnv-slot__hud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.18)); border: 1px solid rgba(242,185,15,.35); border-radius: 14px; padding: 8px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 8px rgba(0,0,0,.4); } .bnv-slot__meter { display: flex; align-items: center; gap: 6px; } .bnv-slot__meter-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; font-size: .72rem; color: var(--bnv-ink); background: radial-gradient(circle at 35% 30%, #FFE9A8, var(--bnv-gold) 55%, var(--bnv-gold-deep) 100%); box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.6); } .bnv-slot__stat { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.32)); border-radius: 10px; padding: 5px 10px; text-align: center; min-width: 66px; border: 1px solid rgba(242,185,15,.25); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); } .bnv-slot__stat.is-pulsing { animation: bnv-stat-pulse .6s ease; } @keyframes bnv-stat-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 14px rgba(242,185,15,.7); } 100% { transform: scale(1); } } .bnv-slot__stat b { display: block; color: var(--bnv-gold); font-family: var(--bnv-font-display); font-size: 1rem; letter-spacing: .02em; text-shadow: 0 0 10px rgba(242,185,15,.45); } .bnv-slot__stat span { color: rgba(255,247,228,.65); font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .bnv-slot__bet-ctrl { display: flex; align-items: center; gap: 6px; } .bnv-slot__bet-btn { min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid rgba(242,185,15,.4); background: linear-gradient(180deg, #6b4d26, #3a2712); color: var(--bnv-cream); font-size: 1.3rem; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); } .bnv-slot__bet-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); } @media (min-width: 520px) { .bnv-slot__hud { justify-content: space-between; gap: 14px; padding: 10px 14px; } .bnv-slot__meter { gap: 8px; } .bnv-slot__meter-icon { width: 30px; height: 30px; font-size: .85rem; } .bnv-slot__stat { min-width: 84px; padding: 6px 14px; } .bnv-slot__stat b { font-size: 1.15rem; } .bnv-slot__stat span { font-size: .6rem; } .bnv-slot__bet-ctrl { gap: 8px; } } /* ---------- Controls — big glossy spin button flanked by auto/info dials ---------- */ .bnv-slot__controls { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 4px; } .bnv-slot__spin-btn { position: relative; flex: 0 0 auto; width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--bnv-gold-deep); background: radial-gradient(circle at 35% 28%, #FFE9A8, var(--bnv-gold) 55%, var(--bnv-gold-deep) 100%); color: var(--bnv-ink); font-family: var(--bnv-font-display); font-size: 1.05rem; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(242,185,15,.18), 0 8px 18px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.7), inset 0 -6px 10px rgba(217,154,10,.55); transition: transform .12s ease, box-shadow .12s ease; } .bnv-slot__spin-btn:active { transform: scale(.96); } .bnv-slot__spin-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45); pointer-events: none; } .bnv-slot__spin-btn.is-spinning { opacity: 1; } .bnv-slot__spin-btn.is-spinning .bnv-slot__spin-ring { animation: bnv-spin-ring-rotate .9s linear infinite; } @keyframes bnv-spin-ring-rotate { to { transform: rotate(360deg); } } .bnv-slot__auto-btn, .bnv-slot__info-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; min-width: 52px; border-radius: 50%; border: 2px solid rgba(242,185,15,.35); background: linear-gradient(180deg, #4A3420, #241708); color: var(--bnv-cream); box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } .bnv-slot__auto-icon, .bnv-slot__info-icon { font-size: 1.05rem; line-height: 1; } .bnv-slot__btn-label { font-size: .52rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .75; } .bnv-slot__auto-btn.is-active { background: linear-gradient(180deg, var(--bnv-rose), #b5523a); border-color: var(--bnv-rose); color: var(--bnv-white); } @media (min-width: 768px) { .bnv-slot__spin-btn { width: 100px; height: 100px; font-size: 1.2rem; } .bnv-slot__auto-btn, .bnv-slot__info-btn { min-height: 60px; min-width: 60px; } } .bnv-slot__win { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) translateY(-16px); opacity: 0; background: var(--bnv-gold); color: var(--bnv-ink); padding: 10px 22px; border-radius: 999px; font-weight: 800; z-index: 3; transition: opacity .25s, transform .25s; pointer-events: none; } .bnv-slot__win.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); animation: bnv-win-pop .5s ease; } @keyframes bnv-win-pop { 0% { transform: translateX(-50%) translateY(-16px) scale(.8); } 60% { transform: translateX(-50%) translateY(4px) scale(1.06);} 100% { transform: translateX(-50%) translateY(0) scale(1);} } .bnv-slot.is-flash::after { content: ""; position: absolute; inset: 0; background: rgba(242,185,15,.28); animation: bnv-flash .5s ease forwards; pointer-events: none; z-index: 2; } @keyframes bnv-flash { 0% { opacity: 1;} 100% { opacity: 0;} } .bnv-slot__note--legal { font-size: .82rem; color: var(--bnv-ink-soft); margin-top: 14px; } /* ---------- win-animation: dust-burst-shatter-scatter (physics: shatter) ---------- A single instant burst (not a tumbling cascade): jagged gold shard triangles fracture outward from center all at once, each spinning independently at a different rate before vanishing — a "shatter", not a gentle fall. */ .bnv-dust-mote { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; background: linear-gradient(135deg, #FCE3A0, var(--bnv-gold-deep)); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation: bnv-shard-shatter var(--bnv-dust-dur, 620ms) cubic-bezier(.15,.85,.35,1) var(--bnv-dust-delay, 0ms) forwards; pointer-events: none; } @keyframes bnv-shard-shatter { 0% { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(0.3); opacity: 0; } 8% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) rotate(20deg) scale(1.1); } 100% { transform: translate(-50%,-50%) translate(var(--bnv-dust-tx), var(--bnv-dust-ty)) rotate(var(--bnv-dust-rot, 400deg)) scale(.4); opacity: 0; } } /* ---------- Paytable dialog ---------- */ .bnv-paytable { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; } .bnv-paytable[hidden] { display: none !important; } .bnv-paytable__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); } .bnv-paytable__sheet { position: relative; z-index: 1; background: var(--bnv-cream); width: 100%; max-height: 84vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 20px; } .bnv-paytable__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* game-ui */ .bnv-paytable__row { display: grid; grid-template-columns: 40px 1fr repeat(3, 60px); align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bnv-line); } .bnv-paytable__row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; } .bnv-paytable__row .name { font-weight: 700; font-size: .86rem; } .bnv-paytable__row .val { text-align: right; font-weight: 800; color: var(--bnv-clover); font-size: .84rem; } .bnv-paytable__line { display: flex; align-items: center; gap: 10px; padding: 6px 0; } /* game-ui */ .bnv-paytable__line-grid { display: grid; grid-template-columns: repeat(5, 8px); grid-template-rows: repeat(3, 8px); gap: 2px; } .bnv-paytable__line-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--bnv-line); } .bnv-paytable__line-dot.is-on { background: var(--bnv-gold-deep); } .bnv-paytable__line-name { font-size: .82rem; } @media (min-width: 768px) { .bnv-paytable { align-items: center; justify-content: center; } .bnv-paytable__sheet { max-width: 520px; border-radius: 20px; } .bnv-slot__inner { padding: 30px; } } /* ---------- how-it-works-steps ---------- */ .bnv-steps { padding: 56px 0; } .bnv-steps__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .bnv-steps__item { background: var(--bnv-white); border-radius: 16px; padding: 22px; box-shadow: 0 6px 16px rgba(36,23,8,.08); } .bnv-steps__num { font-family: var(--bnv-font-display); color: var(--bnv-gold-deep); font-size: 1.7rem; display: block; margin-bottom: 6px; } @media (min-width: 768px) { .bnv-steps__grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- promo-band ---------- */ .bnv-promo { padding: 44px 0; } .bnv-promo__band { background: linear-gradient(120deg, var(--bnv-clover), #2E5A38); border-radius: 22px; padding: 30px 22px; color: var(--bnv-cream); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .bnv-promo__band h3 { color: var(--bnv-white); font-size: 1.5rem; } @media (min-width: 768px) { .bnv-promo__band { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px; } } /* ---------- generic page hero (secondary pages) ---------- */ .bnv-page-hero { background: var(--bnv-ink); color: var(--bnv-cream); padding: 46px 0 34px; } .bnv-page-hero h1 { color: var(--bnv-white); font-size: 2rem; } .bnv-page-hero p { color: var(--bnv-cream); opacity: .9; max-width: 620px; } .bnv-page-footnote { font-size: .88rem; color: var(--bnv-ink-soft); background: var(--bnv-cream-deep); border-radius: 12px; padding: 14px 16px; margin-top: 30px; } /* ---------- FAQ accordion ---------- */ .bnv-faq { padding: 50px 0; } .bnv-faq__item { border-bottom: 1px solid var(--bnv-line); } .bnv-faq__q { width: 100%; text-align: left; background: none; border: none; padding: 16px 4px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1rem; cursor: pointer; } .bnv-faq__q::after { content: "+"; font-size: 1.3rem; color: var(--bnv-gold-deep); } .bnv-faq__item[open] .bnv-faq__q::after { content: "\2212"; } .bnv-faq__a { padding: 0 4px 18px; color: var(--bnv-ink-soft); } /* ---------- Legal pages — sticky sidebar TOC + anchor-jump sections ---------- */ .bnv-legal { padding: 46px 0 70px; } .bnv-legal__layout { display: grid; grid-template-columns: 1fr; gap: 30px; } .bnv-legal__toc { background: var(--bnv-white); border-radius: 16px; padding: 18px; box-shadow: 0 6px 16px rgba(36,23,8,.08); align-self: start; } .bnv-legal__toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; } .bnv-legal__toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .bnv-legal__toc a { font-size: .9rem; font-weight: 700; } .bnv-legal__toc a:hover { color: var(--bnv-clover); } .bnv-legal__content section { margin-bottom: 30px; scroll-margin-top: 84px; } .bnv-legal__content h2 { font-size: 1.3rem; border-left: 4px solid var(--bnv-gold); padding-left: 12px; } .bnv-legal__content ul { padding-left: 20px; } @media (min-width: 992px) { .bnv-legal__layout { grid-template-columns: 260px 1fr; } .bnv-legal__toc { position: sticky; top: 84px; } } /* ---------- Game detail pages ---------- */ .bnv-gd { padding: 46px 0 60px; } .bnv-gd__facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0; } .bnv-gd__fact { background: var(--bnv-white); border-radius: 14px; padding: 14px 16px; box-shadow: 0 5px 14px rgba(36,23,8,.07); } .bnv-gd__fact b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bnv-clover); margin-bottom: 3px; } .bnv-gd__tips { display: grid; gap: 14px; margin: 24px 0; } .bnv-gd__tip { display: flex; gap: 12px; align-items: flex-start; } .bnv-gd__tip-n { font-family: var(--bnv-font-display); color: var(--bnv-gold-deep); font-size: 1.3rem; flex: 0 0 auto; } .bnv-related__heading { font-size: 1.3rem; margin-top: 40px; } @media (min-width: 768px) { .bnv-gd__facts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .bnv-gd__facts { grid-template-columns: repeat(4, 1fr); } } /* ========================================================= FOOTER — fence-rail-uneven-plank-columns: asymmetric-height vertical plank columns, brand in a corner medallion, RG band woven between plank tops. ========================================================= */ .bnv-footer { background: var(--bnv-ink); color: var(--bnv-cream); padding: 50px 0 0; margin-top: 60px; } .bnv-footer__medallion { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .bnv-footer__medallion svg { width: 40px; height: 40px; } .bnv-footer__medallion b { font-family: var(--bnv-font-display); font-size: 1.4rem; color: var(--bnv-cream); display: block; } .bnv-footer__medallion-word { display: flex; flex-direction: column; line-height: 1.15; } .bnv-footer__tagline { max-width: 460px; color: var(--bnv-cream); opacity: .82; font-size: .92rem; margin-bottom: 26px; } .bnv-footer__care-note { color: var(--bnv-cream); opacity: .82; font-size: .85rem; margin-top: 14px; margin-bottom: 0; } .bnv-footer__care-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bnv-gold); font-weight: 800; font-size: .88rem; margin-top: 8px; } .bnv-footer__planks { display: grid; grid-template-columns: 1fr; gap: 26px; margin-bottom: 30px; } .bnv-footer__plank { background: rgba(255,255,255,0.05); border-top: 4px solid var(--bnv-amber); border-radius: 0 0 10px 10px; padding: 18px 16px 22px; } .bnv-footer__plank:nth-child(2) { border-top-color: var(--bnv-clover); } .bnv-footer__plank h3 { color: var(--bnv-gold); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; } .bnv-footer__plank ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .bnv-footer__plank a { display: flex; align-items: center; min-height: 44px; color: var(--bnv-cream); opacity: .88; font-size: .92rem; } .bnv-footer__plank a:hover { opacity: 1; color: var(--bnv-gold); } .bnv-footer__rg { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 22px 18px; margin-bottom: 30px; } .bnv-footer__rg h3 { color: var(--bnv-white); font-size: 1rem; margin-bottom: 6px; } .bnv-footer__rg p { color: var(--bnv-cream); opacity: .85; font-size: .88rem; } .bnv-footer__orgs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .bnv-footer__org { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 14px; background: var(--bnv-ink-soft); border-radius: 10px; } .bnv-footer__org img { height: 22px; width: auto; filter: brightness(0) invert(1); } .bnv-footer__org--text { font-size: .8rem; font-weight: 800; color: var(--bnv-cream); } .bnv-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 16px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--bnv-cream); opacity: .75; } @media (min-width: 768px) { .bnv-footer__planks { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .bnv-footer__planks { grid-template-columns: repeat(3, 1fr); } } .bnv-footer__plank:nth-child(3) { border-top-color: var(--bnv-sky); } .bnv-footer__address { font-style: normal; display: grid; gap: 8px; margin: 4px 0 14px; } .bnv-footer__contact-row { display: flex; align-items: flex-start; gap: 8px; color: var(--bnv-cream); opacity: .88; font-size: .88rem; margin: 0; } .bnv-footer__contact-row a { color: var(--bnv-cream); } .bnv-footer__contact-row a:hover { color: var(--bnv-gold); } .bnv-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .bnv-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,0.08); color: var(--bnv-gold); } .bnv-footer__social svg { width: 20px; height: 20px; } .bnv-footer__social:hover { background: var(--bnv-gold); color: var(--bnv-ink); } .bnv-footer__map-wrap { margin: 8px 0 0; border-top: 1px solid rgba(255,255,255,0.12); } .bnv-footer__map { width: 100%; height: 220px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); } /* ========================================================= PROVIDER MARQUEE — infinite-loop tile band, homepage only. Tile list is duplicated 4x and the keyframe travels exactly one set's pixel width via calc() (NOT translateX(-50%), which half-gap-stutters once tile count/gap don't divide evenly). ========================================================= */ .bnv-providers { --bnv-ptile-w: 108px; --bnv-ptile-h: 64px; --bnv-ptile-gap: 12px; overflow: hidden; padding: 20px 0; background: rgba(36,23,8,.9); border-block: 1px solid rgba(242,185,15,.22); } @media (min-width: 640px) { .bnv-providers { --bnv-ptile-w: 130px; --bnv-ptile-h: 78px; } } .bnv-providers__track { display: flex; align-items: center; gap: var(--bnv-ptile-gap); width: max-content; animation: bnv-providers-scroll 129s linear infinite; } .bnv-providers:hover .bnv-providers__track { animation-play-state: paused; } @keyframes bnv-providers-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-18 * (var(--bnv-ptile-w) + var(--bnv-ptile-gap)))); } } .bnv-providers__tile { position: relative; flex: 0 0 auto; width: var(--bnv-ptile-w); height: var(--bnv-ptile-h); border-radius: 12px; background-size: cover; background-position: center; overflow: hidden; border: 1px solid rgba(242,185,15,.3); } .bnv-providers__scrim { position: absolute; inset: 0; background: rgba(20,13,5,.62); } .bnv-providers__chip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 76%; height: 56%; padding: 5px 8px; background: rgba(255,247,228,.95); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.35); } .bnv-providers__chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .bnv-providers__note { max-width: 720px; margin: 14px auto 0; padding: 0 20px; text-align: center; font-size: .8rem; color: var(--bnv-cream); opacity: .8; } /* ========================================================= THE SEASON page — full-bleed banner hero + horizontal season card strip (distinct from the flat page-hero+grid shape used elsewhere on the site). ========================================================= */ .bnv-season-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; } .bnv-season-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .bnv-season-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,23,8,.55) 0%, rgba(36,23,8,.92) 100%); } .bnv-season-hero__inner { position: relative; padding: 40px 0 28px; color: var(--bnv-cream); } .bnv-season-hero__inner h1 { color: var(--bnv-white); font-size: 2.1rem; } .bnv-season-hero__inner p { max-width: 560px; opacity: .9; } .bnv-season-hero__now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(242,185,15,.4); border-radius: 14px; padding: 10px 16px; } .bnv-season-hero__now-label { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bnv-gold); } .bnv-season-hero__now-name { font-family: var(--bnv-font-display); color: var(--bnv-white); } .bnv-season-hero__now-days { font-size: .82rem; opacity: .8; } .bnv-season-strip { padding: 34px 0 10px; } .bnv-season-strip__scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; } .bnv-season-card { scroll-snap-align: start; flex: 0 0 auto; width: 250px; background: var(--bnv-white); border-radius: var(--bnv-radius); padding: 18px; box-shadow: var(--bnv-shadow); border-top: 5px solid var(--bnv-amber); } .bnv-season-card.is-current { border-top-color: var(--bnv-clover); } .bnv-season-card__badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--bnv-cream-deep); color: var(--bnv-ink-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; } .bnv-season-card.is-current .bnv-season-card__badge { background: var(--bnv-clover); color: var(--bnv-white); } .bnv-season-card h3 { font-size: 1.05rem; margin-bottom: 2px; } .bnv-season-card__when { font-size: .78rem; font-weight: 800; color: var(--bnv-amber); margin-bottom: 8px; } .bnv-season-card p:last-child { font-size: .88rem; color: var(--bnv-ink-soft); margin-bottom: 0; } @media (min-width: 768px) { .bnv-season-strip__scroll { overflow-x: visible; flex-wrap: wrap; } .bnv-season-card { width: calc(25% - 12px); } } /* ========================================================= THE CLIMB page — vertical rank ladder (distinct from The Season's horizontal card strip and the site's flat-grid default). ========================================================= */ .bnv-climb-hero { padding: 40px 0 10px; } .bnv-climb-hero p { max-width: 560px; } .bnv-climb-hero__you { margin-top: 18px; background: var(--bnv-white); border-radius: 14px; padding: 14px 18px; box-shadow: var(--bnv-shadow); max-width: 420px; } .bnv-climb-hero__you-label { font-size: .82rem; font-weight: 800; color: var(--bnv-ink-soft); } .bnv-climb-hero__you-bar { height: 8px; border-radius: 999px; background: var(--bnv-cream-deep); margin-top: 8px; overflow: hidden; } .bnv-climb-hero__you-bar span { display: block; height: 100%; background: var(--bnv-gold); border-radius: 999px; } .bnv-climb { padding: 20px 0 10px; } .bnv-climb__ladder { position: relative; max-width: 640px; margin: 0 auto; padding-left: 36px; } .bnv-climb__ladder::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(180deg, var(--bnv-gold), var(--bnv-clover)); border-radius: 3px; } .bnv-climb__rung { position: relative; display: flex; gap: 16px; padding-bottom: 26px; } .bnv-climb__rung:last-child { padding-bottom: 0; } .bnv-climb__rung-badge { position: absolute; left: -36px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bnv-ink); color: var(--bnv-gold); font-family: var(--bnv-font-display); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .bnv-climb__rung.is-start .bnv-climb__rung-badge { background: var(--bnv-clover); color: var(--bnv-white); } .bnv-climb__rung-body { background: var(--bnv-white); border-radius: 14px; padding: 14px 18px; box-shadow: var(--bnv-shadow); flex: 1; } .bnv-climb__rung-body h3 { font-size: 1.02rem; margin-bottom: 2px; } .bnv-climb__rung-body p { font-size: .88rem; color: var(--bnv-ink-soft); margin-bottom: 0; } /* ========================================================= THE ROSTER page — games grouped into 4 labeled herds with a jump nav (distinct from a single flat 22-card grid). ========================================================= */ .bnv-roster-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .bnv-roster-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--bnv-cream); font-size: .84rem; font-weight: 800; } .bnv-roster-jump a:hover { background: var(--bnv-gold); color: var(--bnv-ink); } .bnv-roster-group { margin-bottom: 30px; scroll-margin-top: 80px; } .bnv-roster-group__h { font-size: 1.3rem; border-left: 5px solid var(--bnv-amber); padding-left: 12px; margin-bottom: 14px; } /* ========================================================= ASK US ANYTHING page — questions grouped into 3 labeled categories (distinct from the old flat 6-accordion list). ========================================================= */ .bnv-faq2 { padding: 34px 0; } .bnv-faq2__cat { margin-bottom: 26px; } .bnv-faq2__cat-h { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--bnv-clover); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--bnv-cream-deep); } /* ========================================================= DROP US A LINE page — split form + info-card aside (distinct from the old single centered form-and-paragraph stack). ========================================================= */ .bnv-contact2 { padding: 30px 0; } .bnv-contact2__grid { display: grid; gap: 22px; } .bnv-contact2__form { background: var(--bnv-white); border-radius: var(--bnv-radius); padding: 20px; box-shadow: var(--bnv-shadow); } .bnv-contact2__aside { display: grid; gap: 16px; } .bnv-contact2__card { background: var(--bnv-white); border-radius: var(--bnv-radius); padding: 18px 20px; box-shadow: var(--bnv-shadow); } .bnv-contact2__card h3 { font-size: 1rem; margin-bottom: 10px; } .bnv-contact2__card--muted { background: var(--bnv-cream-deep); box-shadow: none; } .bnv-contact2__card--muted p { font-size: .88rem; color: var(--bnv-ink-soft); margin-bottom: 0; } .bnv-contact2__row { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; margin-bottom: 8px; } .bnv-contact2__row a { font-weight: 800; color: var(--bnv-amber); } @media (min-width: 860px) { .bnv-contact2__grid { grid-template-columns: 1.3fr 1fr; align-items: start; } } /* ========================================================= AUTH MODAL — canvas-tent-flap-reveal: a canvas "tent-flap" panel rotates open via 3D transform to reveal the form; mode tabs styled as tent-stake tags. ========================================================= */ .bnv-auth { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 14px; perspective: 1400px; } .bnv-auth[hidden] { display: none !important; } .bnv-auth__scrim { position: absolute; inset: 0; background: rgba(20,13,5,.72); } .bnv-auth__flap { position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: repeating-linear-gradient(180deg, #EDE0C2 0 4px, #E7D8B4 4px 8px); border-radius: 18px; padding: 28px 24px 26px; box-shadow: 0 30px 60px rgba(0,0,0,.5); transform-origin: top center; animation: bnv-tent-open .38s ease-out; } @keyframes bnv-tent-open { 0% { transform: rotateX(-70deg); opacity: 0;} 100% { transform: rotateX(0deg); opacity: 1;} } .bnv-auth__close { position: absolute; top: 14px; right: 14px; min-width: 44px; min-height: 44px; border-radius: 10px; border: none; background: var(--bnv-ink); color: var(--bnv-cream); font-size: 1.2rem; } .bnv-auth__tabs { display: flex; gap: 8px; margin-bottom: 18px; } .bnv-auth__tab { flex: 1; min-height: 46px; border: none; border-radius: 10px 10px 0 0; background: rgba(36,23,8,.08); font-weight: 800; color: var(--bnv-ink-soft); position: relative; } .bnv-auth__tab.is-active { background: var(--bnv-ink); color: var(--bnv-cream); } .bnv-auth__tab::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--bnv-ink); opacity: 0; } .bnv-auth__tab.is-active::after { opacity: 1; } .bnv-auth__panes { display: grid; grid-template-columns: 1fr; gap: 20px; } .bnv-auth__form { display: grid; gap: 12px; } .bnv-auth__form label { font-size: .82rem; font-weight: 800; color: var(--bnv-ink-soft); } .bnv-auth__form input { width: 100%; min-height: 48px; border-radius: 10px; border: 2px solid var(--bnv-line); padding: 0 14px; font-size: 1rem; background: var(--bnv-white); } .bnv-auth__form input:focus { outline: none; border-color: var(--bnv-gold-deep); } .bnv-auth__submit { width: 100%; margin-top: 4px; } .bnv-auth__error { color: #B23A2E; font-size: .84rem; min-height: 1.2em; } .bnv-auth__providers { display: grid; gap: 10px; } .bnv-auth__provider { display: flex; align-items: center; gap: 10px; min-height: 48px; border-radius: 10px; border: 2px solid var(--bnv-line); background: var(--bnv-white); padding: 0 14px; font-weight: 700; position: relative; width: 100%; } .bnv-auth__provider svg { width: 20px; height: 20px; } .bnv-auth__notice-slot { min-height: 0; } /* equal-weight-button-list: all 4 sign-in methods presented as one vertical list of identically-styled buttons, ABOVE the email fields (not split into two side-by-side panes). */ .bnv-auth__method-list { display: grid; gap: 8px; margin-bottom: 18px; } .bnv-auth__method { min-height: 48px; border-radius: 10px; border: 2px solid var(--bnv-line); background: var(--bnv-white); font-weight: 800; font-size: .92rem; width: 100%; text-align: center; } .bnv-auth__method.is-active { border-color: var(--bnv-gold-deep); background: rgba(242,185,15,.12); } .bnv-auth__fine { font-size: .78rem; color: var(--bnv-ink-soft); margin-top: 16px; } .bnv-auth [data-auth-when="user"] { display: none; } .bnv-auth[data-auth-state="user"] [data-auth-when="user"] { display: block; } .bnv-auth[data-auth-state="user"] [data-auth-when="guest"] { display: none; } @media (min-width: 576px) { .bnv-auth__panes { grid-template-columns: 1.1fr .9fr; } } /* ---------- provider-notice: dust-poof-toast-rise ---------- */ .bnv-toast-region { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2500; width: min(92vw, 380px); } .bnv-toast { background: var(--bnv-ink); color: var(--bnv-cream); border-radius: 12px; padding: 12px 16px; margin-top: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.35); font-size: .88rem; font-weight: 700; animation: bnv-toast-rise .35s ease-out; } @keyframes bnv-toast-rise { 0% { opacity: 0; transform: translateY(16px);} 100% { opacity: 1; transform: translateY(0);} } .bnv-toast.is-leaving { animation: bnv-toast-fall .3s ease-in forwards; } @keyframes bnv-toast-fall { to { opacity: 0; transform: translateY(10px) scale(.96);} } .bnv-poof { position: relative; } .bnv-poof::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(242,185,15,.55), transparent 70%); animation: bnv-poof .5s ease-out; pointer-events: none; } @keyframes bnv-poof { 0% { opacity: 0; transform: scale(.3);} 40% { opacity: 1;} 100% { opacity: 0; transform: scale(2.1);} } /* ========================================================= COOKIE CONSENT ========================================================= */ .bnv-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1800; } .bnv-cookie[hidden] { display: none; } .bnv-cookie__panel { background: var(--bnv-white); border-radius: 16px 16px 0 0; padding: 20px; box-shadow: 0 -14px 30px rgba(0,0,0,.18); max-height: 70vh; overflow-y: auto; } .bnv-cookie__panel[hidden] { display: none; } .bnv-cookie__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .bnv-cookie__panel-intro { font-size: .88rem; color: var(--bnv-ink-soft); } .bnv-cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bnv-line); } .bnv-cookie__row-copy strong { display: block; font-size: .92rem; } .bnv-cookie__row-copy span { font-size: .8rem; color: var(--bnv-ink-soft); } .bnv-cookie__locked-badge { font-size: .72rem; font-weight: 800; background: var(--bnv-cream-deep); padding: 6px 10px; border-radius: 999px; } .bnv-cookie__toggle { width: 46px; height: 28px; min-height: 28px; border-radius: 999px; background: var(--bnv-line); border: none; position: relative; flex: 0 0 auto; } .bnv-cookie__toggle-dot { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bnv-white); transition: left .18s; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .bnv-cookie__toggle.is-on { background: var(--bnv-clover); } .bnv-cookie__toggle.is-on .bnv-cookie__toggle-dot { left: 21px; } .bnv-cookie__panel-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .bnv-cookie__bar { background: var(--bnv-ink); color: var(--bnv-cream); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .bnv-cookie__text { font-size: .84rem; margin: 0; } .bnv-cookie__text a { text-decoration: underline; color: var(--bnv-gold); } .bnv-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 768px) { .bnv-cookie__bar { flex-direction: row; align-items: center; justify-content: space-between; } .bnv-cookie__panel { max-width: 480px; margin-left: auto; border-radius: 16px; margin-bottom: 12px; } } /* ---------- Contact / forms ---------- */ .bnv-form-field { display: grid; gap: 6px; margin-bottom: 16px; } .bnv-form-field label { font-weight: 800; font-size: .88rem; } .bnv-form-field input, .bnv-form-field textarea { min-height: 48px; border-radius: 10px; border: 2px solid var(--bnv-line); padding: 10px 14px; font-size: 1rem; font-family: inherit; } .bnv-form-field textarea { min-height: 130px; } /* ---------- visually-hidden util ---------- */ .bnv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }