/* * Biznopedia public shell — bz-* namespace only. * * Consumes exclusively the shared --cdl-* token contract, which resolves to Biznopedia * values because _Layout loads bz-tokens.css under . This sheet is * only ever served on the Biznopedia deployment; the four gradient/accent vars carry * bz-value fallbacks purely as a load-order safety net. * * Deliberately different treatments from cdl-public-shell.css: a dark gradient utility * topline, a pill search masthead, an underline-indicator nav rail, and a dark footer * brand band with a registry flag strip. Mobile-first throughout; every interactive * target is at least var(--cdl-touch-target) tall. */ /* --------------------------------------------------------------------------- * 1. Shared wrap + accessibility primitives * ------------------------------------------------------------------------ */ .bz-wrap { width: 100%; max-width: var(--cdl-page-max); margin-inline: auto; padding-inline: clamp(var(--cdl-space-4), 4vw, var(--cdl-space-8)); } .bz-skip-link { position: absolute; z-index: 3; top: var(--cdl-space-2); left: var(--cdl-space-3); padding: 0.75rem 1rem; color: var(--cdl-brand-deep); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 700; text-decoration: none; background: var(--cdl-surface); border: 2px solid var(--cdl-brand); border-radius: var(--cdl-radius-pill); box-shadow: var(--cdl-shadow-raised); transform: translateY(-200%); transition: transform var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-skip-link:focus { color: var(--cdl-brand-deep); transform: translateY(0); } /* Distinct focus treatment from the CDL shell: tight brand outline + soft accent halo. */ .bz-shell :focus-visible, .bz-base :focus-visible { outline: 2px solid var(--cdl-brand); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--cdl-accent-light, #60a5fa) 30%, transparent); } /* On the dark bands the brand outline would vanish; switch to the light accent. */ .bz-topline :focus-visible, .bz-base__band :focus-visible { outline-color: var(--cdl-accent-light, #60a5fa); box-shadow: 0 0 0 6px rgb(255 255 255 / 0.18); } /* --------------------------------------------------------------------------- * 2. Shell frame — the whole three-band header sticks; the negative top offset * lets the utility topline slide away while masthead + nav stay pinned. * ------------------------------------------------------------------------ */ .bz-shell { position: sticky; z-index: calc(var(--cdl-z-drawer) + 1); top: calc(-1 * var(--cdl-touch-target)); font-family: var(--cdl-font-ui); } /* --------------------------------------------------------------------------- * 3. Topline — slim dark utility bar: claim left, session right * ------------------------------------------------------------------------ */ .bz-topline { color: rgb(255 255 255 / 0.92); background: linear-gradient(90deg, var(--cdl-hero-grad-start, #12275a), var(--cdl-hero-grad-mid, #1d4ed8)); } .bz-topline__row { display: flex; align-items: center; justify-content: space-between; gap: var(--cdl-space-3); height: var(--cdl-touch-target); } .bz-topline__tag { display: flex; min-width: 0; align-items: center; gap: var(--cdl-space-2); margin: 0; font-size: var(--cdl-text-12); font-weight: 600; letter-spacing: 0.02em; } .bz-topline__tag span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bz-topline__tag i { flex-shrink: 0; color: var(--cdl-accent-light, #60a5fa); font-size: 1rem; } .bz-topline__session { display: flex; flex-shrink: 0; align-items: center; gap: var(--cdl-space-2); } .bz-topline__link { display: inline-flex; align-items: center; min-height: var(--cdl-touch-target); padding-inline: var(--cdl-space-2); color: rgb(255 255 255 / 0.92); font-size: var(--cdl-text-14); font-weight: 600; text-decoration: none; } .bz-topline__link:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--cdl-accent-light, #60a5fa); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } .bz-topline__cta { display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: var(--cdl-space-3); color: var(--cdl-brand-deep); font-size: var(--cdl-text-14); font-weight: 700; text-decoration: none; background: #fff; border-radius: var(--cdl-radius-pill); transition: background var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-topline__cta:hover { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); } .bz-topline__account-toggle { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--cdl-touch-target); padding-inline: var(--cdl-space-2); color: rgb(255 255 255 / 0.92); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 600; background: transparent; border: 0; } .bz-topline__account-toggle:hover { color: #fff; } .bz-topline__account-name { max-width: 9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* --------------------------------------------------------------------------- * 4. Masthead — brand left, pill search center-stage, drawer toggle (mobile) * ------------------------------------------------------------------------ */ .bz-masthead { background: rgb(255 255 255 / 0.88); border-bottom: 1px solid var(--cdl-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .bz-masthead__row { display: grid; grid-template-areas: "brand menu" "search search"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--cdl-space-3); padding-block: var(--cdl-space-2) var(--cdl-space-3); } .bz-masthead__brand { display: inline-flex; grid-area: brand; align-items: center; width: fit-content; min-height: var(--cdl-touch-target); color: var(--cdl-ink); font-family: var(--cdl-font-display); font-size: var(--cdl-text-20); text-decoration: none; } .bz-masthead__brand:hover { color: var(--cdl-ink); } .bz-masthead__search { grid-area: search; width: 100%; margin-top: var(--cdl-space-2); } .bz-masthead__search-box { display: flex; align-items: center; gap: var(--cdl-space-2); min-height: var(--cdl-touch-target); padding-left: var(--cdl-space-4); background: var(--cdl-surface); border: 1px solid var(--cdl-border-strong); border-radius: var(--cdl-radius-pill); box-shadow: var(--cdl-shadow-panel); transition: border-color var(--cdl-motion-fast) var(--cdl-ease-standard), box-shadow var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-masthead__search-box:focus-within { border-color: var(--cdl-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdl-accent-light, #60a5fa) 28%, transparent); } .bz-masthead__search-icon { flex-shrink: 0; color: var(--cdl-muted); font-size: 1.1rem; } .bz-masthead__search-input { flex: 1 1 auto; min-width: 0; min-height: calc(var(--cdl-touch-target) - 2px); padding: 0; color: var(--cdl-ink); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-16); background: transparent; border: 0; } .bz-masthead__search-input::placeholder { color: var(--cdl-muted-subtle); } .bz-masthead__search-input:focus { outline: none; box-shadow: none; } .bz-masthead__search-input::-webkit-search-decoration { display: none; } .bz-masthead__search-submit { flex-shrink: 0; align-self: stretch; margin: 3px; padding-inline: clamp(var(--cdl-space-3), 3vw, var(--cdl-space-5)); color: #fff; font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 700; background: linear-gradient(120deg, var(--cdl-brand), var(--cdl-hero-grad-end, #60a5fa)); border: 0; border-radius: var(--cdl-radius-pill); transition: filter var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-masthead__search-submit:hover { filter: brightness(1.08); } .bz-masthead__menu { display: inline-flex; grid-area: menu; align-items: center; gap: 0.375rem; min-width: var(--cdl-touch-target); min-height: var(--cdl-touch-target); padding-inline: var(--cdl-space-3); color: var(--cdl-brand-deep); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 700; background: var(--cdl-brand-tint); border: 1px solid color-mix(in srgb, var(--cdl-brand) 24%, var(--cdl-border)); border-radius: var(--cdl-radius-pill); } .bz-masthead__menu i { font-size: 1.2rem; } .bz-masthead__menu[aria-expanded="true"] { color: #fff; background: var(--cdl-brand); } /* --------------------------------------------------------------------------- * 5. Primary nav — bz-drawer on mobile, underline-indicator rail on desktop * ------------------------------------------------------------------------ */ .bz-nav { background: rgb(255 255 255 / 0.88); border-bottom: 1px solid var(--cdl-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .bz-nav__list { display: flex; flex-direction: column; gap: var(--cdl-space-1); margin: 0; padding: var(--cdl-space-3) 0; list-style: none; } .bz-nav__item { min-width: 0; } .bz-nav__link { position: relative; display: flex; align-items: center; gap: 0.375rem; width: 100%; min-height: var(--cdl-touch-target); padding: 0.5rem var(--cdl-space-3); color: var(--cdl-ink); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 600; text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: var(--cdl-radius-control); transition: color var(--cdl-motion-fast) var(--cdl-ease-standard), background var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-nav__link:hover { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); } .bz-nav__link.is-current, .bz-nav__link[aria-current="page"] { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); box-shadow: inset 3px 0 0 var(--cdl-brand); } .bz-nav__chevron { font-size: 1rem; transition: transform var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-nav__link[aria-expanded="true"] .bz-nav__chevron { transform: rotate(180deg); } /* --------------------------------------------------------------------------- * 6. Dropdown panels (Bootstrap dropdown mechanics, bz skin) * ------------------------------------------------------------------------ */ .bz-shell .bz-menu { min-width: 15rem; padding: var(--cdl-space-2); border: 1px solid var(--cdl-border); border-radius: var(--cdl-radius-panel); box-shadow: var(--cdl-shadow-raised); } .bz-shell .bz-menu__item { display: flex; align-items: center; min-height: var(--cdl-touch-target); padding: 0.5rem var(--cdl-space-3); color: var(--cdl-ink); font-family: var(--cdl-font-ui); font-size: var(--cdl-text-14); font-weight: 600; border-radius: 0.5rem; } .bz-shell .bz-menu__item:hover, .bz-shell .bz-menu__item:focus { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); box-shadow: inset 3px 0 0 var(--cdl-accent-light, #60a5fa); } .bz-shell .bz-menu__divider { margin-block: var(--cdl-space-2); border-color: var(--cdl-border); } .bz-shell .bz-menu__item--signout { color: var(--cdl-critical); } .bz-shell .bz-menu__item--signout:hover, .bz-shell .bz-menu__item--signout:focus { color: var(--cdl-critical); background: var(--cdl-critical-tint); box-shadow: inset 3px 0 0 var(--cdl-critical); } /* data-bs-display="static" skips Popper, so anchor the panels ourselves. */ .bz-shell .dropdown-menu { top: 100%; margin-top: 0.375rem; } .bz-shell .dropdown-menu-end { right: 0; left: auto; } /* Inside the mobile drawer the market-data panel flows in place of floating. */ @media (max-width: 61.99rem) { .bz-nav .dropdown-menu.bz-menu--nav { position: static; margin: var(--cdl-space-1) 0 var(--cdl-space-2) var(--cdl-space-4); padding: 0 0 0 var(--cdl-space-2); background: transparent; border: 0; border-left: 2px solid var(--cdl-border); border-radius: 0; box-shadow: none; } } /* --------------------------------------------------------------------------- * 7. Desktop shell (≥ 62rem): nav rail always expanded, underline indicator * ------------------------------------------------------------------------ */ @media (min-width: 62rem) { .bz-masthead__row { grid-template-areas: "brand search"; grid-template-columns: auto minmax(0, 1fr); padding-block: var(--cdl-space-3); } .bz-masthead__menu { display: none; } .bz-masthead__search { justify-self: center; width: min(100%, 38rem); margin-top: 0; } .bz-nav__drawer { display: block !important; height: auto !important; } .bz-nav__drawer.collapsing { transition: none; } .bz-nav__list { flex-direction: row; flex-wrap: wrap; gap: var(--cdl-space-2); padding: 0; } .bz-nav__link { width: auto; min-height: 3rem; padding: 0.5rem var(--cdl-space-2); border-radius: 0; background: transparent; } .bz-nav__link::after { content: ""; position: absolute; right: var(--cdl-space-2); bottom: 0; left: var(--cdl-space-2); height: 3px; background: transparent; border-radius: var(--cdl-radius-pill); transition: background var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-nav__link:hover { background: transparent; } .bz-nav__link.is-current, .bz-nav__link[aria-current="page"] { background: transparent; box-shadow: none; } .bz-nav__link:hover::after, .bz-nav__link.is-current::after, .bz-nav__link[aria-current="page"]::after { background: linear-gradient(90deg, var(--cdl-brand), var(--cdl-accent-light, #60a5fa)); } } /* --------------------------------------------------------------------------- * 8. Footer — dark brand band with flag strip, 3-column grid, legal bar * ------------------------------------------------------------------------ */ .bz-base { color: var(--cdl-muted); font-family: var(--cdl-font-ui); background: var(--cdl-surface); } .bz-base__band { color: rgb(255 255 255 / 0.9); background: radial-gradient(circle at 92% -20%, color-mix(in srgb, var(--cdl-accent-light, #60a5fa) 30%, transparent), transparent 42%), linear-gradient(135deg, var(--cdl-hero-grad-start, #12275a), var(--cdl-hero-grad-mid, #1d4ed8) 62%, var(--cdl-hero-grad-end, #60a5fa) 130%); } .bz-base__band-grid { display: grid; gap: clamp(var(--cdl-space-5), 4vw, var(--cdl-space-8)); padding-block: clamp(var(--cdl-space-6), 5vw, var(--cdl-space-10)); } .bz-base__brand { display: inline-flex; align-items: center; width: fit-content; min-height: var(--cdl-touch-target); color: #fff; font-family: var(--cdl-font-display); font-size: var(--cdl-text-20); text-decoration: none; } .bz-base__brand:hover { color: #fff; } /* The lockup accent tone is tuned for light surfaces; brighten it on the band. */ .bz-base__brand .cdl-brand-logo__accent { color: var(--cdl-accent-light, #60a5fa); } .bz-base__mission { max-width: 34rem; margin: var(--cdl-space-3) 0 0; color: rgb(255 255 255 / 0.78); font-size: var(--cdl-text-14); line-height: var(--cdl-leading-body); } .bz-base__flags { display: flex; flex-wrap: wrap; gap: var(--cdl-space-2); align-content: start; } .bz-base__flag { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--cdl-touch-target); padding-inline: var(--cdl-space-3); color: rgb(255 255 255 / 0.88); font-size: var(--cdl-text-12); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--cdl-radius-pill); transition: background var(--cdl-motion-fast) var(--cdl-ease-standard), border-color var(--cdl-motion-fast) var(--cdl-ease-standard); } .bz-base__flag:hover { color: #fff; background: rgb(255 255 255 / 0.18); border-color: rgb(255 255 255 / 0.34); } .bz-base__flag-emoji { font-size: 1.05rem; line-height: 1; } .bz-base__columns { display: grid; gap: clamp(var(--cdl-space-6), 4vw, var(--cdl-space-8)); padding-block: clamp(var(--cdl-space-6), 5vw, var(--cdl-space-10)); } .bz-base__col-title { margin: 0 0 var(--cdl-space-3); color: var(--cdl-ink); font-family: var(--cdl-font-display); font-size: var(--cdl-text-12); font-weight: 800; letter-spacing: var(--cdl-tracking-caps); text-transform: uppercase; } .bz-base__col-links { display: grid; gap: var(--cdl-space-1); margin: 0; padding: 0; list-style: none; } .bz-base__col-links a { display: inline-flex; align-items: center; width: fit-content; min-height: var(--cdl-touch-target); color: var(--cdl-muted); font-size: var(--cdl-text-14); text-decoration: none; } .bz-base__col-links a:hover { color: var(--cdl-brand-deep); text-decoration: underline; text-decoration-color: var(--cdl-accent-light, #60a5fa); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } .bz-base__legal { border-top: 1px solid var(--cdl-border); } .bz-base__legal-row { display: flex; flex-wrap: wrap; gap: var(--cdl-space-2) var(--cdl-space-5); align-items: center; justify-content: space-between; padding-block: var(--cdl-space-3); } .bz-base__copyright { margin: 0; font-size: var(--cdl-text-12); } .bz-base__legal-links { display: flex; flex-wrap: wrap; gap: var(--cdl-space-4); } .bz-base__legal-links a { display: inline-flex; align-items: center; min-height: var(--cdl-touch-target); color: var(--cdl-muted); font-size: var(--cdl-text-12); text-decoration: none; } .bz-base__legal-links a:hover, .bz-base__legal-links a[aria-current="page"] { color: var(--cdl-brand-deep); text-decoration: underline; text-decoration-color: var(--cdl-accent-light, #60a5fa); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } @media (min-width: 48rem) { .bz-base__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 62rem) { .bz-base__band-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } .bz-base__flags { justify-content: flex-end; } } /* --------------------------------------------------------------------------- * 9. Brand divergence — page-body heroes. The shared sheets paint a gradient * hero card (the CDL treatment); on Biznopedia the search and countries * heroes flatten into a light, left-aligned keyline band with no gradient * and no elevation, matching the flat token language in bz-tokens.css. * ------------------------------------------------------------------------ */ html[data-brand="bz"] .cdl-search-hero, html[data-brand="bz"] .cdl-public-hero { color: var(--cdl-ink); background: var(--cdl-surface); border: var(--cdl-card-border, 1px solid var(--cdl-border)); border-radius: var(--cdl-card-radius, 0.5rem); box-shadow: none; } html[data-brand="bz"] .cdl-public-hero::after { content: none; } html[data-brand="bz"] .cdl-search-hero__title, html[data-brand="bz"] .cdl-public-hero__title { color: var(--cdl-ink-strong); font-size: var(--cdl-h1-size, clamp(2.25rem, 4vw, 2.75rem)); letter-spacing: var(--cdl-h1-tracking, -0.01em); } html[data-brand="bz"] .cdl-search-hero__summary, html[data-brand="bz"] .cdl-public-hero__summary { color: var(--cdl-muted); } /* The countries header shares the same band treatment and heading scale. */ html[data-brand="bz"] .cdl-rankings__header { padding: clamp(var(--cdl-space-5), 4vw, var(--cdl-space-8)); background: var(--cdl-surface); border: var(--cdl-card-border, 1px solid var(--cdl-border)); border-radius: var(--cdl-card-radius, 0.5rem); } html[data-brand="bz"] .cdl-rankings__title { font-size: var(--cdl-h1-size, clamp(2.25rem, 4vw, 2.75rem)); letter-spacing: var(--cdl-h1-tracking, -0.01em); } /* Eyebrows drop the pill/washed-white treatments for the bz signature: small caps over an accent underline. */ html[data-brand="bz"] .cdl-search-eyebrow, html[data-brand="bz"] .cdl-rankings__eyebrow, html[data-brand="bz"] .cdl-public-hero__eyebrow { width: fit-content; padding: 0 0 0.25rem; color: var(--cdl-brand-deep); font-variant-caps: var(--cdl-eyebrow-variant, all-small-caps); letter-spacing: 0.04em; text-transform: var(--cdl-eyebrow-transform, none); background: transparent; border: 0; border-bottom: var(--cdl-eyebrow-underline, 2px solid var(--cdl-accent-light)); border-radius: 0; } /* Quiet/light hero actions were tuned for the dark gradient; restate them for the light band. */ html[data-brand="bz"] .cdl-search-hero .cdl-action--quiet, html[data-brand="bz"] .cdl-public-hero .cdl-action--quiet { color: var(--cdl-brand); } html[data-brand="bz"] .cdl-search-hero .cdl-action--quiet:hover, html[data-brand="bz"] .cdl-public-hero .cdl-action--quiet:hover { color: var(--cdl-brand-deep); background: var(--cdl-brand-tint); border-color: var(--cdl-brand-tint); } html[data-brand="bz"] .cdl-search-hero .cdl-action--light, html[data-brand="bz"] .cdl-public-hero .cdl-action--light { color: #fff; background: var(--cdl-brand); border-color: var(--cdl-brand); } html[data-brand="bz"] .cdl-search-hero .cdl-action--light:hover, html[data-brand="bz"] .cdl-public-hero .cdl-action--light:hover { color: #fff; background: var(--cdl-brand-deep); border-color: var(--cdl-brand-deep); } /* Hero proof metrics were translucent white cards; on the flat band they become quiet subtle-surface tiles. */ html[data-brand="bz"] .cdl-public-hero__proof .cdl-metric { color: var(--cdl-ink); background: var(--cdl-surface-subtle); border-color: var(--cdl-border); } html[data-brand="bz"] .cdl-public-hero__proof .cdl-metric__label, html[data-brand="bz"] .cdl-public-hero__proof .cdl-metric__detail { color: var(--cdl-muted); } /* --------------------------------------------------------------------------- * 10. Reduced motion * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .bz-skip-link, .bz-topline__cta, .bz-masthead__search-box, .bz-masthead__search-submit, .bz-nav__link, .bz-nav__link::after, .bz-nav__chevron, .bz-base__flag { transition: none; } }