shrinks to fit-content instead of filling the page. * 2. Astra sets explicit colours on headings and links. An explicit colour * ALWAYS beats an inherited one regardless of specificity, so plugin * headings cannot rely on inheriting from .bb-shell — they must state * their own colour. * * Scoped to .bb-page, which the plugin adds to on pick views only, so * nothing here touches the rest of the site. */ .elementor-page .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; } .bb-page { background: var(--bb-ink); } /* Scope strictly to the content area. Astra reuses .ast-container in the header and footer, and #page wraps the whole document — neutralising either strips the header's own padding and blows the nav out to the viewport edge. */ .bb-page #content, .bb-page .site-content, .bb-page #content .ast-container, .bb-page #primary, .bb-page #main, .bb-page .site-main, .bb-page .ast-article-single { max-width: 100%; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; float: none; } .bb-page #content .ast-container { display: block; } /* Pick views are full-bleed; the theme sidebar has nothing to add here. */ .bb-page #secondary { display: none; } /* Headings and links must carry their own colour. :where() keeps this at zero specificity so the component rules below still win. */ .bb-shell :where(h1, h2, h3, h4, h5, h6) { color: var(--bb-text); } .bb-shell :where(a) { color: var(--bb-accent); } /* Numbers are the subject matter. They align in a column, always. */ .bb-num { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ══ Layout ══ */ .bb-shell { background: var(--bb-ink); color: var(--bb-text); padding: 48px 0 72px; width: 100%; flex: 1 1 auto; min-width: 0; } .bb-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; } .bb-container--narrow { max-width: 760px; } .bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bb-gap); margin-bottom: 36px; } .bb-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-dim); margin: 0 0 16px; font-weight: 700; } /* ══ Buttons ══ */ .bb-btn { display: inline-block; padding: 14px 28px; border: 0; border-radius: var(--bb-r-s); font-weight: 700; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .bb-btn--primary { background: var(--bb-accent); color: #fff; } .bb-btn--primary:hover, .bb-btn--primary:focus { background: #3D6BE8; color: #fff; } .bb-btn--ghost { background: transparent; color: var(--bb-text); border: 1px solid var(--bb-line); } .bb-btn--ghost:hover, .bb-btn--ghost:focus { border-color: var(--bb-dim); color: #fff; } .bb-btn--sm { padding: 10px 18px; font-size: 12px; } .bb-btn:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 3px; } /* ══ Tags ══ */ .bb-tag { display: inline-block; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--bb-line); background: var(--bb-raised); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--bb-text); } .bb-tag--quiet { background: transparent; color: var(--bb-dim); } .bb-tag--win { background: rgba(53,192,138,.12); border-color: rgba(53,192,138,.4); color: var(--bb-win); } .bb-tag--loss { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.4); color: var(--bb-loss); } .bb-tag--push, .bb-tag--void { background: rgba(229,168,59,.12); border-color: rgba(229,168,59,.4); color: var(--bb-push); } .bb-tag--pending { background: transparent; color: var(--bb-dim); } /* ══ Single pick ══ */ .bb-crumbs { margin-bottom: 24px; font-size: 13px; } .bb-crumbs a { color: var(--bb-dim); text-decoration: none; } .bb-crumbs a:hover { color: var(--bb-text); } .bb-single__head { padding-bottom: 28px; border-bottom: 1px solid var(--bb-line); } .bb-single__eyebrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .bb-single__title { color: var(--bb-text); margin: 0; font-size: clamp(28px, 5.2vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; } .bb-single__team { display: block; } .bb-single__at { display: block; font-size: .3em; font-weight: 700; color: var(--bb-faint); text-transform: uppercase; letter-spacing: .18em; margin: 6px 0 4px; } .bb-single__time { margin: 16px 0 0; color: var(--bb-dim); font-size: 14px; } .bb-single__body { margin-top: 32px; line-height: 1.75; } .bb-single__body h2, .bb-single__body h3 { margin-top: 1.8em; } /* The ticket — the one loud element on a pick page. */ .bb-ticket { margin: 32px 0 0; overflow: hidden; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); } .bb-ticket__main { padding: 28px 24px; text-align: center; border-bottom: 1px dashed var(--bb-line); } .bb-ticket__label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--bb-faint); margin-bottom: 10px; } .bb-ticket__selection { display: block; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: clamp(22px, 4.6vw, 34px); font-weight: 700; color: #fff; letter-spacing: -.02em; word-break: break-word; } .bb-ticket__figures { display: grid; grid-template-columns: 1fr 1fr; } .bb-ticket__figure { padding: 18px 24px; text-align: center; } .bb-ticket__figure + .bb-ticket__figure { border-left: 1px solid var(--bb-line); } .bb-ticket__value { display: block; font-size: 20px; font-weight: 700; color: var(--bb-text); } /* ══ The slip (pick card) ══ */ .bb-slip { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); padding: 18px; transition: border-color .15s ease; } .bb-slip:hover { border-color: #37414F; } .bb-slip--win { border-left: 3px solid var(--bb-win); } .bb-slip--loss { border-left: 3px solid var(--bb-loss); } .bb-slip--push, .bb-slip--void { border-left: 3px solid var(--bb-push); } .bb-slip--compact { padding: 15px; } /* Ungraded picks deliberately carry no coloured edge — absence is the signal. */ .bb-slip--pending { border-left: 1px solid var(--bb-line); } /* Result stamped across the corner, the way a settled ticket gets marked. */ .bb-slip__stamp { position: absolute; top: 16px; right: -30px; width: 120px; transform: rotate(34deg); transform-origin: center; text-align: center; padding: 3px 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .5; pointer-events: none; } .bb-slip__stamp--win { color: var(--bb-win); } .bb-slip__stamp--loss { color: var(--bb-loss); } .bb-slip__stamp--push, .bb-slip__stamp--void { color: var(--bb-push); } .bb-slip__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .bb-slip__league { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--bb-accent); } .bb-slip__time { font-family: var(--bb-mono); font-size: 11px; color: var(--bb-faint); } .bb-slip__matchup { color: var(--bb-text); margin: 0 0 16px; font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; padding-right: 52px; } .bb-slip__matchup a { color: var(--bb-text); text-decoration: none; } .bb-slip__matchup a:hover { color: #fff; } .bb-slip__matchup a:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 3px; border-radius: 2px; } .bb-slip__team { display: inline; } .bb-slip__at { color: var(--bb-faint); font-weight: 500; font-size: .82em; margin: 0 3px; } .bb-slip__body { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--bb-line); } .bb-slip__label { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--bb-faint); margin-bottom: 4px; } .bb-slip__selection { margin-bottom: 12px; } .bb-slip__value { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; color: #fff; word-break: break-word; } .bb-slip__figures { display: flex; gap: 26px; } .bb-slip__figure .bb-num { font-size: 14px; font-weight: 600; color: var(--bb-text); } .bb-slip__foot { margin-top: 14px; } .bb-slip__more { font-size: 13px; font-weight: 600; color: var(--bb-accent); text-decoration: none; } .bb-slip__more:hover { text-decoration: underline; } /* Locked: the information exists, redacted. Reads more honestly than a padlock. */ .bb-slip__body--locked { text-align: center; } .bb-slip__redacted { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 6px 0 16px; } .bb-slip__redacted span { display: block; height: 11px; border-radius: 2px; background: var(--bb-line); } .bb-slip__redacted span:nth-child(1) { width: 72%; } .bb-slip__redacted span:nth-child(2) { width: 52%; } .bb-slip__redacted span:nth-child(3) { width: 62%; } .bb-slip__unlock { display: inline-block; padding: 9px 18px; border-radius: var(--bb-r-s); background: rgba(76,125,255,.12); border: 1px solid rgba(76,125,255,.35); color: #93B0FF; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; } .bb-slip__unlock:hover { background: rgba(76,125,255,.2); color: #fff; } /* ══ Record block ══ */ .bb-record { color: var(--bb-text); } .bb-record__heading { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-dim); margin: 0 0 14px; font-weight: 700; } .bb-record__line { display: flex; align-items: baseline; gap: .1em; margin: 0; font-size: clamp(38px, 8.5vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.045em; } .bb-record__figure { font-weight: 800; } .bb-record__figure--win { color: var(--bb-win); } .bb-record__figure--loss { color: var(--bb-loss); } .bb-record__figure--push { color: var(--bb-push); } .bb-record__sep { color: var(--bb-line); font-weight: 400; } .bb-record__legend { display: flex; gap: .1em; margin: 8px 0 0; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-faint); } .bb-record__legend span { flex: 0 0 auto; min-width: 2.2ch; } .bb-record__legend span + span { margin-left: 1.15ch; } .bb-record__stats { display: flex; gap: 30px; flex-wrap: wrap; margin: 26px 0 0; } .bb-record__stat { flex: 0 0 auto; } .bb-record__stat-value { display: block; font-size: 22px; font-weight: 700; color: var(--bb-text); } .bb-record__stat-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--bb-faint); margin-top: 4px; } .bb-record__method { margin: 22px 0 0; font-size: 12px; line-height: 1.6; color: var(--bb-faint); max-width: 54ch; } /* ══ Archive ══ */ .bb-archive__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--bb-line); } .bb-archive__title { color: var(--bb-text); margin: 0; font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -.025em; } .bb-archive__record { display: flex; align-items: baseline; gap: 12px; } .bb-archive__record-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-faint); } .bb-archive__record-value { font-size: 24px; font-weight: 800; } .bb-archive__record-rate { font-size: 15px; color: var(--bb-win); font-weight: 700; } .bb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0 8px; } .bb-filter { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--bb-line); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--bb-dim); text-decoration: none; } .bb-filter:hover { color: var(--bb-text); border-color: var(--bb-dim); } .bb-filter.is-active { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; } .bb-filter--state { text-transform: uppercase; font-size: 11px; } .bb-filters__divider { width: 1px; height: 20px; background: var(--bb-line); margin: 0 4px; } .bb-daybreak { display: flex; align-items: center; gap: 14px; margin: 36px 0 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-dim); } .bb-daybreak__label { flex: 0 0 auto; } .bb-daybreak::after { content: ""; flex: 1; height: 1px; background: var(--bb-line); } .bb-pagination { display: flex; justify-content: center; margin-top: 8px; } .bb-pagination .page-numbers { display: inline-block; padding: 9px 15px; margin: 0 4px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-s); color: var(--bb-dim); text-decoration: none; font-size: 14px; } .bb-pagination .page-numbers:hover { color: var(--bb-text); border-color: var(--bb-dim); } .bb-pagination .page-numbers.current { background: var(--bb-accent); border-color: var(--bb-accent); color: #fff; } .bb-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bb-empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--bb-line); border-radius: var(--bb-r); } .bb-empty__title { color: var(--bb-text); margin: 0 0 8px; font-size: 20px; } .bb-empty__copy { margin: 0 0 22px; color: var(--bb-dim); } /* ══ Locked panel (BB_Access teaser) ══ */ .bb-locked { text-align: center; padding: 44px 24px; margin: 28px 0; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); } .bb-locked__badge { display: inline-block; padding: 5px 12px; margin-bottom: 18px; background: var(--bb-accent); color: #fff; border-radius: 100px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; } .bb-locked__teaser { font-size: 17px; line-height: 1.6; margin: 0 auto 22px; max-width: 46ch; } .bb-locked__title { font-size: 22px; margin: 0 0 8px; color: #fff; } .bb-locked__copy { color: var(--bb-dim); margin: 0 auto 26px; max-width: 46ch; } .bb-locked__alt { margin: 18px 0 0; font-size: 14px; } .bb-locked__alt a { color: var(--bb-dim); } /* ══ CTA ══ */ .bb-cta { text-align: center; padding: 48px 28px; margin: 44px 0 0; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); } .bb-cta__title { color: var(--bb-text); margin: 0 0 12px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em; } .bb-cta__copy { margin: 0 auto 26px; max-width: 52ch; color: var(--bb-dim); line-height: 1.65; } /* ══ Discussion / related ══ */ .bb-discussion { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--bb-line); } .bb-discussion__title { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-dim); margin: 0 0 20px; font-weight: 700; } .bb-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--bb-line); } /* Comment form and thread. WordPress and Astra render these with light-theme defaults, so every surface, field, and label has to be restated explicitly — inherited colour would lose to Astra's own rules. */ .bb-discussion .comments-area, .bb-discussion #respond, .bb-discussion .comment-respond, .bb-discussion .ast-comment-formwrap { background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; } .bb-discussion .comment-reply-title { color: var(--bb-text); font-size: 17px; margin: 0 0 14px; } .bb-discussion .comment-reply-title small { font-size: 13px; margin-left: 10px; } .bb-discussion .comment-reply-title small a { color: var(--bb-dim); } .bb-discussion .logged-in-as, .bb-discussion .comment-notes, .bb-discussion .required-field-message { color: var(--bb-faint); font-size: 13px; margin: 0 0 16px; } .bb-discussion .logged-in-as a { color: var(--bb-dim); } .bb-discussion .logged-in-as a:hover { color: var(--bb-text); } .bb-discussion .comment-form label { display: block; color: var(--bb-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; } .bb-discussion .comment-form input[type="text"], .bb-discussion .comment-form input[type="email"], .bb-discussion .comment-form input[type="url"], .bb-discussion .comment-form textarea { width: 100%; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-s); color: var(--bb-text); padding: 13px 15px; font-size: 15px; font-family: inherit; line-height: 1.6; } .bb-discussion .comment-form textarea { min-height: 130px; resize: vertical; } .bb-discussion .comment-form input:focus, .bb-discussion .comment-form textarea:focus { outline: none; border-color: var(--bb-accent); background: var(--bb-raised); } .bb-discussion .comment-form ::placeholder { color: var(--bb-faint); } .bb-discussion .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; } .bb-discussion .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; margin: 0; color: var(--bb-faint); } .bb-discussion .comment-form-cookies-consent input { margin-top: 3px; } .bb-discussion .form-submit { margin-bottom: 0; } .bb-discussion .comment-form input[type="submit"], .bb-discussion .comment-form .submit { background: var(--bb-accent); color: #fff; border: 0; border-radius: var(--bb-r-s); padding: 14px 28px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; width: auto; } .bb-discussion .comment-form input[type="submit"]:hover { background: #3D6BE8; } .bb-discussion .comment-list { list-style: none; margin: 0 0 36px; padding: 0; } .bb-discussion .comment-list ol.children { list-style: none; margin: 16px 0 0 24px; padding: 0; border-left: 1px solid var(--bb-line); padding-left: 20px; } .bb-discussion .comment-body, .bb-discussion .comment-content { background: transparent; border: 0; padding: 0; color: var(--bb-text); } .bb-discussion .comment-list li.comment { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--bb-line); } .bb-discussion .comment-author { color: var(--bb-text); font-weight: 700; font-size: 14px; } .bb-discussion .comment-author a, .bb-discussion .comment-author .fn { color: var(--bb-text); } .bb-discussion .comment-metadata, .bb-discussion .comment-metadata a { color: var(--bb-faint); font-size: 12px; } .bb-discussion .comment-content p { color: var(--bb-text); line-height: 1.7; } .bb-discussion .reply a { color: var(--bb-accent); font-size: 13px; font-weight: 600; } .bb-discussion .avatar { border-radius: 50%; } .bb-discussion .comments-title, .bb-discussion .comment-list + .comment-respond { color: var(--bb-text); } .bb-discussion .no-comments { color: var(--bb-faint); } /* ══ Account ══ */ .bb-account { color: var(--bb-text); } .bb-account__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--bb-line); } .bb-account__greeting { color: var(--bb-text); margin: 0 0 4px; font-size: clamp(22px, 3.6vw, 30px); font-weight: 800; letter-spacing: -.02em; } .bb-account__email { margin: 0; color: var(--bb-dim); font-size: 14px; } .bb-account__logout { font-size: 13px; color: var(--bb-dim); text-decoration: none; } .bb-account__logout:hover { color: var(--bb-text); } .bb-account__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bb-gap); margin-bottom: 44px; } .bb-account__picks { margin-top: 8px; } .bb-account__all { margin: 4px 0 0; font-size: 14px; } .bb-account__all a { color: var(--bb-accent); text-decoration: none; } .bb-panel { padding: 24px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r); } .bb-panel--center { text-align: center; padding: 48px 28px; } .bb-panel__title { color: var(--bb-text); margin: 0 0 8px; font-size: 22px; } .bb-panel__copy { margin: 0 0 24px; color: var(--bb-dim); } .bb-panel__label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--bb-faint); margin-bottom: 12px; } .bb-panel__meta { margin: 0 0 16px; font-size: 14px; color: var(--bb-dim); } .bb-panel__hint { margin: 10px 0 0; font-size: 12px; color: var(--bb-faint); } .bb-panel__alt { margin: 18px 0 0; font-size: 14px; } .bb-panel__alt a { color: var(--bb-dim); } .bb-status { margin: 0 0 8px; font-size: 20px; font-weight: 700; } .bb-status--on { color: var(--bb-win); } .bb-status--warn { color: var(--bb-push); } .bb-status--off { color: var(--bb-dim); } /* ══ Monthly table ══ */ .bb-table-wrap { overflow-x: auto; } .bb-table { width: 100%; border-collapse: collapse; color: var(--bb-text); } .bb-table th, .bb-table td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--bb-line); font-size: 14px; white-space: nowrap; } .bb-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--bb-faint); font-weight: 700; } .bb-table th:first-child, .bb-table td:first-child { text-align: left; } .bb-table tbody th { font-weight: 600; } .bb-pos { color: var(--bb-win); } .bb-neg { color: var(--bb-loss); } /* ══ Age gate ══ */ .bb-agegate { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(9,11,15,.97); padding: 24px; } html.bb-agegate-open { overflow: hidden; } .bb-agegate__panel { max-width: 460px; width: 100%; text-align: center; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: 10px; padding: 40px 32px; color: var(--bb-text); } .bb-agegate__title { font-size: 25px; margin: 0 0 16px; color: #fff; letter-spacing: -.02em; } .bb-agegate__copy { font-size: 14px; line-height: 1.65; color: var(--bb-dim); margin: 0 0 28px; } .bb-agegate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .bb-agegate__help { font-size: 12px; color: var(--bb-faint); margin: 26px 0 0; } /* ══ Responsive ══ */ @media screen and (max-width: 782px) { .bb-shell { padding: 32px 0 56px; } .bb-grid { grid-template-columns: 1fr; gap: 14px; } .bb-record__stats { gap: 22px; } .bb-archive__head { align-items: flex-start; } .bb-ticket__main { padding: 22px 18px; } .bb-agegate__panel { padding: 32px 20px; } .bb-agegate__actions .bb-btn { width: 100%; } .bb-cta { padding: 36px 20px; } } @media (prefers-reduced-motion: reduce) { .bb-btn, .bb-slip { transition: none; } } /* ══ Navigation (header/footer templates) ══ * * Elementor Free ships no navigation widget, so [bb_nav] supplies one. Styling * lives here rather than in the Elementor template so a single edit updates * every header instance. */ .bb-nav { display: flex; align-items: center; justify-content: flex-end; gap: 20px; width: 100%; } .bb-nav__panel { display: flex; align-items: center; gap: 28px; } .bb-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .bb-nav__list li { position: relative; margin: 0; } .bb-nav__list a { display: block; padding: 6px 0; color: var(--bb-dim); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -.005em; transition: color .15s ease; } .bb-nav__list a:hover, .bb-nav__list a:focus { color: var(--bb-text); } .bb-nav__list .current-menu-item > a, .bb-nav__list .current_page_item > a { color: var(--bb-text); } .bb-nav__list a:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 4px; border-radius: 2px; } /* Sub-menus */ .bb-nav__list .sub-menu { position: absolute; top: 100%; left: 0; z-index: 200; display: none; min-width: 200px; margin: 0; padding: 8px 0; list-style: none; background: var(--bb-raised); border: 1px solid var(--bb-line); border-radius: var(--bb-r-s); } .bb-nav__list li:hover > .sub-menu, .bb-nav__list li:focus-within > .sub-menu { display: block; } .bb-nav__list .sub-menu a { padding: 9px 16px; font-size: 14px; } .bb-nav__actions { display: flex; align-items: center; gap: 16px; } .bb-nav__link { color: var(--bb-dim); text-decoration: none; font-size: 15px; font-weight: 600; } .bb-nav__link:hover { color: var(--bb-text); } .bb-nav__cta { display: inline-block; padding: 11px 22px; border-radius: var(--bb-r-s); background: var(--bb-accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transition: background .15s ease; } .bb-nav__cta:hover, .bb-nav__cta:focus { background: #3D6BE8; color: #fff; } /* Toggle */ .bb-nav__toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--bb-line); border-radius: var(--bb-r-s); } .bb-nav__bars { display: block; width: 18px; } .bb-nav__bars span { display: block; height: 2px; background: var(--bb-text); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } .bb-nav__bars span + span { margin-top: 4px; } .bb-nav.is-open .bb-nav__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bb-nav.is-open .bb-nav__bars span:nth-child(2) { opacity: 0; } .bb-nav.is-open .bb-nav__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ══ Footer ══ */ .bb-footer-links { list-style: none; margin: 0; padding: 0; } .bb-footer-links li { margin: 0 0 10px; } .bb-footer-links a { color: var(--bb-dim); text-decoration: none; font-size: 15px; } .bb-footer-links a:hover { color: var(--bb-text); } @media screen and (max-width: 900px) { .bb-nav { justify-content: flex-end; } .bb-nav__toggle { display: inline-flex; } .bb-nav__panel { position: absolute; top: 100%; right: 0; left: 0; z-index: 300; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; background: var(--bb-surface); border-top: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); } .bb-nav.is-open .bb-nav__panel { display: flex; } .bb-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .bb-nav__list > li { border-bottom: 1px solid var(--bb-line); } .bb-nav__list a { padding: 14px 0; font-size: 16px; } .bb-nav__list .sub-menu { position: static; display: none; border: 0; padding: 0 0 8px 16px; background: transparent; min-width: 0; } .bb-nav__list li.is-expanded > .sub-menu { display: block; } .bb-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; } .bb-nav__cta { text-align: center; padding: 14px 22px; } .bb-nav__link { padding: 6px 0; } } @media (prefers-reduced-motion: reduce) { .bb-nav__list a, .bb-nav__cta, .bb-nav__bars span { transition: none; } }