@charset "UTF-8";
/* ==========================================================================
BBG Group — brand override layer
--------------------------------------------------------------------------
New file. Nothing in the vendor template (_variables / _common /
_components / style.scss) is modified; this sheet is loaded *after*
the template stylesheet and re-skins it, then adds the `bbg-*` system.
Palette : deep navy · slate grey · warm white · black / white
Voice : corporate, considered, quiet. Credibility before spectacle.
Build : npm run css (see theme/tools/bbg-build.mjs)
========================================================================== */
/* --------------------------------------------------------------- 1. tokens */
:root {
/* deep sea navy ------------------------------------------------ */
--bbg-navy-950: #08131f;
--bbg-navy-900: #0b1a2d;
--bbg-navy-800: #102542;
--bbg-navy-700: #16324f;
--bbg-navy-600: #1d4166;
--bbg-navy-500: #27547e;
/* slate grey --------------------------------------------------- */
--bbg-slate-900: #29323c;
--bbg-slate-800: #343e49;
--bbg-slate-700: #3f4a57;
--bbg-slate-600: #5a6875;
--bbg-slate-500: #74818e;
--bbg-slate-400: #8f9aa6;
--bbg-slate-300: #b4bcc5;
--bbg-slate-200: #d3d8de;
--bbg-slate-100: #e7eaee;
--bbg-slate-50: #f2f4f6;
/* warm white --------------------------------------------------- */
--bbg-warm-50: #fbf9f6;
--bbg-warm-100: #f5f2ec;
--bbg-warm-200: #eae5dc;
--bbg-warm-300: #dbd4c7;
--bbg-black: #0a0b0c;
--bbg-white: #ffffff;
/* one restrained interactive hue, used sparingly ---------------- */
--bbg-accent: #2e5c8a;
--bbg-accent-hover: #27547e;
/* semantic ----------------------------------------------------- */
--bbg-bg: var(--bbg-warm-50);
--bbg-bg-alt: var(--bbg-white);
--bbg-ink: var(--bbg-navy-900);
--bbg-ink-muted: var(--bbg-slate-600);
--bbg-ink-subtle: var(--bbg-slate-500);
--bbg-rule: rgba(11, 26, 45, .12);
--bbg-rule-strong: rgba(11, 26, 45, .22);
--bbg-rule-light: rgba(255, 255, 255, .16);
/* type --------------------------------------------------------- */
--bbg-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
--bbg-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--bbg-font-cjk: "";
/* spacing ------------------------------------------------------ */
--bbg-s1: 4px;
--bbg-s2: 8px;
--bbg-s3: 12px;
--bbg-s4: 16px;
--bbg-s5: 24px;
--bbg-s6: 32px;
--bbg-s7: 48px;
--bbg-s8: 64px;
--bbg-s9: 96px;
--bbg-s10: 128px;
--bbg-container: 1240px;
--bbg-container-narrow: 780px;
/* motion — short, unshowy ------------------------------------- */
--bbg-t-fast: .18s cubic-bezier(.22, .61, .36, 1);
--bbg-t: .28s cubic-bezier(.22, .61, .36, 1);
--bbg-t-slow: .5s cubic-bezier(.22, .61, .36, 1);
--bbg-shadow-sm: 0 1px 2px rgba(11, 26, 45, .06),
0 2px 8px rgba(11, 26, 45, .04);
--bbg-shadow: 0 2px 4px rgba(11, 26, 45, .05),
0 12px 28px rgba(11, 26, 45, .08);
--bbg-shadow-lg: 0 4px 8px rgba(11, 26, 45, .06),
0 24px 56px rgba(11, 26, 45, .12);
--bbg-header-h: 84px;
--bbg-header-h-sm: 64px;
}
/* per-locale CJK stacks: set on ---------------- */
html[data-locale=zh] {
--bbg-font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
html[data-locale=yue] {
--bbg-font-cjk: "Noto Sans TC", "PingFang HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html[data-locale=ko] {
--bbg-font-cjk: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* CJK: serif display faces have poor CJK coverage — fall back to the
locale sans and drop the latin letter-spacing, which harms hanzi. */
html[data-locale=zh],
html[data-locale=yue],
html[data-locale=ko] {
--bbg-font-display: var(--bbg-font-cjk), Georgia, serif;
--bbg-font-body: var(--bbg-font-cjk), Inter, "Segoe UI", sans-serif;
}
html[data-locale=zh] .bbg-eyebrow,
html[data-locale=yue] .bbg-eyebrow,
html[data-locale=ko] .bbg-eyebrow {
letter-spacing: 0.08em;
}
html[data-locale=zh] .bbg-h1, html[data-locale=zh] .bbg-h2,
html[data-locale=yue] .bbg-h1, html[data-locale=yue] .bbg-h2,
html[data-locale=ko] .bbg-h1, html[data-locale=ko] .bbg-h2 {
letter-spacing: 0;
line-height: 1.28;
}
html[data-locale=zh] .bbg-prose p,
html[data-locale=yue] .bbg-prose p,
html[data-locale=ko] .bbg-prose p {
line-height: 1.95;
}
/* ----------------------------------------------------------- 2. base reset */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body.bbg {
margin: 0;
background: var(--bbg-bg);
color: var(--bbg-ink);
font-family: var(--bbg-font-body);
font-size: 16px;
line-height: 1.75;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1;
overflow-x: hidden;
}
/* Wrapped in :where() so these carry zero specificity — a plain
`body.bbg a { color: inherit }` would out-rank every component rule
(.bbg-btn, .bbg-link …) and silently strip their colours. */
:where(body.bbg img, body.bbg svg) {
max-width: 100%;
height: auto;
display: block;
}
:where(body.bbg a) {
color: inherit;
text-decoration: none;
}
body.bbg ::selection {
background: var(--bbg-navy-800);
color: var(--bbg-warm-50);
}
/* visible, on-brand focus ring — never remove without replacing */
body.bbg :focus-visible {
outline: 2px solid var(--bbg-accent);
outline-offset: 3px;
border-radius: 2px;
}
body.bbg :focus:not(:focus-visible) {
outline: none;
}
.bbg-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--bbg-navy-900);
color: var(--bbg-warm-50);
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
}
.bbg-skip:focus {
left: 12px;
top: 12px;
}
.bbg-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------- 3. typography */
.bbg-display, .bbg-h1, .bbg-h2, .bbg-h3, .bbg-h4 {
font-family: var(--bbg-font-display);
color: var(--bbg-ink);
font-weight: 600;
margin: 0;
text-wrap: balance;
}
.bbg-display {
font-size: clamp(2.5rem, 1.7rem + 3.1vw, 4rem);
line-height: 1.08;
letter-spacing: -0.022em;
}
.bbg-h1 {
font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
line-height: 1.14;
letter-spacing: -0.02em;
}
.bbg-h2 {
font-size: clamp(1.625rem, 1.32rem + 1.3vw, 2.375rem);
line-height: 1.2;
letter-spacing: -0.016em;
}
.bbg-h3 {
font-size: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
line-height: 1.32;
letter-spacing: -0.01em;
}
.bbg-h4 {
font-size: 1.125rem;
line-height: 1.45;
letter-spacing: -0.006em;
font-weight: 600;
}
.bbg-lead {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.68;
color: var(--bbg-ink-muted);
font-weight: 400;
margin: 0;
text-wrap: pretty;
}
/* small-caps label with a hairline — the workhorse section marker */
.bbg-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--bbg-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bbg-ink-subtle);
margin: 0 0 var(--bbg-s4);
}
.bbg-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.55;
flex: none;
}
.bbg-eyebrow--plain::before {
display: none;
}
.bbg-eyebrow--center {
justify-content: center;
}
.bbg-prose {
color: var(--bbg-slate-700);
font-size: 1.0625rem;
line-height: 1.8;
}
.bbg-prose > * + * {
margin-top: 1.35em;
}
.bbg-prose p {
margin: 0;
text-wrap: pretty;
}
.bbg-prose h2 {
font-family: var(--bbg-font-display);
font-size: 1.75rem;
line-height: 1.25;
color: var(--bbg-ink);
margin-top: 2em;
font-weight: 600;
}
.bbg-prose h3 {
font-family: var(--bbg-font-display);
font-size: 1.3125rem;
line-height: 1.35;
color: var(--bbg-ink);
margin-top: 1.8em;
font-weight: 600;
}
.bbg-prose a {
color: var(--bbg-accent);
border-bottom: 1px solid rgba(46, 92, 138, 0.34);
transition: border-color var(--bbg-t-fast), color var(--bbg-t-fast);
}
.bbg-prose a:hover {
color: var(--bbg-accent-hover);
border-bottom-color: currentColor;
}
.bbg-prose ul, .bbg-prose ol {
margin: 1.35em 0;
padding-left: 0;
list-style: none;
}
.bbg-prose ol {
counter-reset: bbg-ol;
}
.bbg-prose li {
position: relative;
padding-left: 28px;
margin-bottom: 0.7em;
}
.bbg-prose ul > li::before {
content: "";
position: absolute;
left: 2px;
top: 0.72em;
width: 7px;
height: 1px;
background: var(--bbg-slate-400);
}
.bbg-prose ol > li {
counter-increment: bbg-ol;
}
.bbg-prose ol > li::before {
content: counter(bbg-ol, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--bbg-font-body);
font-size: 0.8125rem;
font-weight: 600;
color: var(--bbg-slate-400);
letter-spacing: 0.04em;
}
.bbg-prose blockquote {
margin: 2em 0;
padding: 4px 0 4px 28px;
border-left: 2px solid var(--bbg-navy-700);
font-family: var(--bbg-font-display);
font-size: 1.25rem;
line-height: 1.55;
color: var(--bbg-ink);
font-style: normal;
}
.bbg-prose img {
margin: 2em 0;
width: 100%;
}
.bbg-prose hr {
border: 0;
border-top: 1px solid var(--bbg-rule);
margin: 2.5em 0;
}
.bbg-prose strong {
color: var(--bbg-ink);
font-weight: 600;
}
/* ------------------------------------------------------------- 4. layout */
.bbg-container {
width: 100%;
max-width: var(--bbg-container);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
}
.bbg-container--narrow {
max-width: var(--bbg-container-narrow);
}
.bbg-container--wide {
max-width: 1480px;
}
.bbg-section {
padding-block: clamp(56px, 8vw, 112px);
position: relative;
}
.bbg-section--tight {
padding-block: clamp(40px, 5.5vw, 72px);
}
.bbg-section--flush-top {
padding-top: 0;
}
.bbg-section--flush-bottom {
padding-bottom: 0;
}
.bbg-section--warm {
background: var(--bbg-warm-100);
}
.bbg-section--white {
background: var(--bbg-white);
}
.bbg-section--navy {
background: var(--bbg-navy-900);
color: var(--bbg-warm-100);
}
.bbg-section--navy .bbg-h1,
.bbg-section--navy .bbg-h2,
.bbg-section--navy .bbg-h3,
.bbg-section--navy .bbg-h4,
.bbg-section--navy .bbg-display {
color: var(--bbg-warm-50);
}
.bbg-section--navy .bbg-lead {
color: rgba(245, 242, 236, 0.74);
}
.bbg-section--navy .bbg-eyebrow {
color: rgba(245, 242, 236, 0.58);
}
.bbg-section--navy .bbg-prose {
color: rgba(245, 242, 236, 0.78);
}
.bbg-rule-top {
border-top: 1px solid var(--bbg-rule);
}
.bbg-rule-bottom {
border-bottom: 1px solid var(--bbg-rule);
}
.bbg-grid {
display: grid;
gap: clamp(20px, 3vw, 32px);
}
.bbg-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bbg-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bbg-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bbg-grid--sidebar {
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(32px, 5vw, 72px);
}
.bbg-grid--split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
@media (max-width: 1023px) {
.bbg-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bbg-grid--sidebar {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 899px) {
.bbg-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bbg-grid--split {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 639px) {
.bbg-grid--2, .bbg-grid--3, .bbg-grid--4 {
grid-template-columns: minmax(0, 1fr);
}
}
.bbg-stack > * + * {
margin-top: var(--bbg-s5);
}
.bbg-measure {
max-width: 62ch;
}
.bbg-measure-sm {
max-width: 48ch;
}
.bbg-center {
text-align: center;
}
.bbg-mt-0 {
margin-top: 0 !important;
}
.bbg-mt-4 {
margin-top: var(--bbg-s4);
}
.bbg-mt-5 {
margin-top: var(--bbg-s5);
}
.bbg-mt-6 {
margin-top: var(--bbg-s6);
}
.bbg-mt-7 {
margin-top: var(--bbg-s7);
}
/* ------------------------------------------------------------ 5. buttons */
.bbg-btn {
--_bg: var(--bbg-navy-800);
--_fg: var(--bbg-warm-50);
--_bd: var(--bbg-navy-800);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--bbg-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
padding: 17px 30px;
background: var(--_bg);
color: var(--_fg);
border: 1px solid var(--_bd);
border-radius: 2px;
cursor: pointer;
text-align: center;
transition: background var(--bbg-t), border-color var(--bbg-t), color var(--bbg-t), transform var(--bbg-t-fast);
-webkit-appearance: none;
appearance: none;
}
.bbg-btn:hover {
--_bg: var(--bbg-navy-600);
--_bd: var(--bbg-navy-600);
}
.bbg-btn:active {
transform: translateY(1px);
}
.bbg-btn--ghost {
--_bg: transparent;
--_fg: var(--bbg-navy-800);
--_bd: var(--bbg-rule-strong);
}
.bbg-btn--ghost:hover {
--_bg: var(--bbg-navy-800);
--_fg: var(--bbg-warm-50);
--_bd: var(--bbg-navy-800);
}
.bbg-btn--on-dark {
--_bg: var(--bbg-warm-50);
--_fg: var(--bbg-navy-900);
--_bd: var(--bbg-warm-50);
}
.bbg-btn--on-dark:hover {
--_bg: var(--bbg-white);
--_bd: var(--bbg-white);
}
.bbg-btn--ghost-dark {
--_bg: transparent;
--_fg: var(--bbg-warm-50);
--_bd: rgba(255, 255, 255, .34);
}
.bbg-btn--ghost-dark:hover {
--_bg: var(--bbg-warm-50);
--_fg: var(--bbg-navy-900);
--_bd: var(--bbg-warm-50);
}
.bbg-btn--sm {
padding: 12px 20px;
font-size: 0.8125rem;
}
.bbg-btn--block {
display: flex;
width: 100%;
}
.bbg-btn[disabled], .bbg-btn[aria-disabled=true] {
opacity: 0.5;
pointer-events: none;
}
/* quiet text link with a moving rule */
.bbg-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bbg-navy-700);
padding-bottom: 4px;
border-bottom: 1px solid var(--bbg-rule-strong);
transition: color var(--bbg-t-fast), border-color var(--bbg-t-fast);
}
.bbg-link:hover {
color: var(--bbg-accent);
border-bottom-color: var(--bbg-accent);
}
.bbg-link svg, .bbg-link .bbg-arrow {
transition: transform var(--bbg-t);
}
.bbg-link:hover svg, .bbg-link:hover .bbg-arrow {
transform: translateX(4px);
}
.bbg-link--light {
color: var(--bbg-warm-100);
border-bottom-color: rgba(255, 255, 255, 0.28);
}
.bbg-link--light:hover {
color: var(--bbg-white);
border-bottom-color: var(--bbg-white);
}
/* -------------------------------------------------------------- 6. header */
.bbg-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 90;
height: var(--bbg-header-h);
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--bbg-t), border-color var(--bbg-t), height var(--bbg-t), box-shadow var(--bbg-t);
}
.bbg-header__inner {
width: 100%;
max-width: var(--bbg-container);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 40px);
}
/* solid by default (interior pages); transparent only over a hero */
.bbg-header--solid,
.bbg-header.is-scrolled {
background: var(--bbg-navy-900);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.bbg-header.is-scrolled {
height: var(--bbg-header-h-sm);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(8, 19, 31, 0.28);
}
.bbg-header--over-hero:not(.is-scrolled) {
background: linear-gradient(to bottom, rgba(8, 19, 31, 0.52), rgba(8, 19, 31, 0));
border-bottom-color: transparent;
}
/* wordmark, set in type so it stays crisp and translatable */
.bbg-logo {
display: inline-flex;
flex-direction: column;
gap: 3px;
flex: none;
}
.bbg-logo__mark {
font-family: var(--bbg-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
color: var(--bbg-warm-50);
transition: font-size var(--bbg-t);
}
.bbg-logo__tag {
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245, 242, 236, 0.56);
white-space: nowrap;
transition: opacity var(--bbg-t);
}
.bbg-header.is-scrolled .bbg-logo__mark {
font-size: 1.5rem;
}
.bbg-header.is-scrolled .bbg-logo__tag {
opacity: 0;
height: 0;
overflow: hidden;
}
.bbg-logo:hover .bbg-logo__mark {
color: var(--bbg-white);
}
/* primary nav */
.bbg-nav {
margin-left: auto;
}
.bbg-nav__list {
display: flex;
align-items: center;
gap: clamp(4px, 1.4vw, 18px);
list-style: none;
margin: 0;
padding: 0;
}
.bbg-nav__item {
position: relative;
}
.bbg-nav__link {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
color: rgba(245, 242, 236, 0.8);
transition: color var(--bbg-t-fast);
white-space: nowrap;
}
.bbg-nav__link:hover,
.bbg-nav__item.is-open > .bbg-nav__link {
color: var(--bbg-white);
}
.bbg-nav__item.is-active > .bbg-nav__link {
color: var(--bbg-white);
}
.bbg-nav__item.is-active > .bbg-nav__link::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 1px;
background: rgba(255, 255, 255, 0.6);
}
.bbg-nav__caret {
width: 8px;
height: 8px;
opacity: 0.6;
transition: transform var(--bbg-t-fast);
}
.bbg-nav__item.is-open .bbg-nav__caret {
transform: rotate(180deg);
}
.bbg-nav__sub {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 232px;
padding: 8px;
background: var(--bbg-white);
border: 1px solid var(--bbg-rule);
border-radius: 3px;
box-shadow: var(--bbg-shadow);
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--bbg-t), transform var(--bbg-t), visibility var(--bbg-t);
}
.bbg-nav__item.is-open > .bbg-nav__sub,
.bbg-nav__item:hover > .bbg-nav__sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bbg-nav__sub a {
display: block;
padding: 10px 14px;
font-size: 0.875rem;
color: var(--bbg-slate-700);
border-radius: 2px;
transition: background var(--bbg-t-fast), color var(--bbg-t-fast);
}
.bbg-nav__sub a:hover {
background: var(--bbg-warm-100);
color: var(--bbg-navy-800);
}
.bbg-header__actions {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
/* language switcher */
.bbg-lang {
position: relative;
}
.bbg-lang__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2px;
color: rgba(245, 242, 236, 0.88);
font-family: var(--bbg-font-body);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: border-color var(--bbg-t-fast), background var(--bbg-t-fast), color var(--bbg-t-fast);
}
.bbg-lang__toggle:hover {
border-color: rgba(255, 255, 255, 0.42);
color: var(--bbg-white);
}
.bbg-lang__globe {
width: 15px;
height: 15px;
opacity: 0.8;
flex: none;
}
.bbg-lang__current {
letter-spacing: 0.02em;
}
.bbg-lang__caret {
width: 8px;
height: 8px;
opacity: 0.7;
transition: transform var(--bbg-t-fast);
}
.bbg-lang.is-open .bbg-lang__caret {
transform: rotate(180deg);
}
.bbg-lang__menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 208px;
padding: 6px;
background: var(--bbg-white);
border: 1px solid var(--bbg-rule);
border-radius: 3px;
box-shadow: var(--bbg-shadow);
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--bbg-t), transform var(--bbg-t), visibility var(--bbg-t);
z-index: 5;
}
.bbg-lang.is-open .bbg-lang__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bbg-lang__menu a {
display: flex;
align-items: baseline;
gap: 8px;
padding: 9px 12px;
border-radius: 2px;
font-size: 0.875rem;
color: var(--bbg-slate-700);
transition: background var(--bbg-t-fast), color var(--bbg-t-fast);
}
.bbg-lang__menu a:hover {
background: var(--bbg-warm-100);
color: var(--bbg-navy-800);
}
.bbg-lang__menu li.is-current a {
color: var(--bbg-navy-800);
font-weight: 600;
background: var(--bbg-warm-100);
}
.bbg-lang__native {
font-weight: inherit;
}
.bbg-lang__en {
font-size: 0.75rem;
color: var(--bbg-slate-400);
margin-left: auto;
}
/* burger */
.bbg-burger {
display: none;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
padding: 0;
}
.bbg-burger span {
display: block;
position: relative;
width: 18px;
height: 1.5px;
background: var(--bbg-warm-50);
transition: background var(--bbg-t-fast);
}
.bbg-burger span::before, .bbg-burger span::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 1.5px;
background: var(--bbg-warm-50);
transition: transform var(--bbg-t);
}
.bbg-burger span::before {
top: -6px;
}
.bbg-burger span::after {
top: 6px;
}
.bbg-burger.is-open span {
background: transparent;
}
.bbg-burger.is-open span::before {
transform: translateY(6px) rotate(45deg);
}
.bbg-burger.is-open span::after {
transform: translateY(-6px) rotate(-45deg);
}
/* mobile drawer */
.bbg-drawer {
position: fixed;
inset: 0;
z-index: 89;
background: var(--bbg-navy-900);
padding: calc(var(--bbg-header-h) + 24px) 0 40px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--bbg-t), transform var(--bbg-t), visibility var(--bbg-t);
}
.bbg-drawer.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bbg-drawer__list {
list-style: none;
margin: 0;
padding: 0 clamp(20px, 6vw, 40px);
}
.bbg-drawer__list > li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bbg-drawer__list > li > a {
display: block;
padding: 18px 0;
font-family: var(--bbg-font-display);
font-size: 1.375rem;
color: var(--bbg-warm-50);
}
.bbg-drawer__sub {
list-style: none;
margin: 0 0 14px;
padding: 0 0 0 2px;
}
.bbg-drawer__sub a {
display: block;
padding: 8px 0;
font-size: 0.9375rem;
color: rgba(245, 242, 236, 0.62);
}
.bbg-drawer__sub a:hover {
color: var(--bbg-white);
}
.bbg-lang__short {
display: none;
letter-spacing: 0.04em;
}
@media (max-width: 1099px) {
.bbg-nav {
display: none;
}
.bbg-burger {
display: inline-flex;
}
}
@media (min-width: 1100px) {
.bbg-drawer {
display: none;
}
}
/* Narrow phones: the full wordmark tagline plus the spelled-out language
name pushes the burger off the edge, so both contract. */
@media (max-width: 599px) {
.bbg-logo__tag {
display: none;
}
.bbg-lang__current {
display: none;
}
.bbg-lang__short {
display: inline;
}
.bbg-lang__toggle {
padding: 9px 10px;
gap: 6px;
}
.bbg-header__inner {
gap: 12px;
}
}
body.bbg-locked {
overflow: hidden;
}
/* ---------------------------------------------------------------- 7. hero */
.bbg-hero {
position: relative;
min-height: clamp(520px, 78vh, 760px);
display: flex;
align-items: flex-end;
padding-top: var(--bbg-header-h);
background: var(--bbg-navy-950);
overflow: hidden;
}
.bbg-hero__media {
position: absolute;
inset: 0;
}
.bbg-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
/* two-stop scrim: readable type, image still legible */
.bbg-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(8, 19, 31, 0.88) 0%, rgba(8, 19, 31, 0.66) 42%, rgba(8, 19, 31, 0.28) 72%, rgba(8, 19, 31, 0.18) 100%), linear-gradient(to top, rgba(8, 19, 31, 0.72) 0%, rgba(8, 19, 31, 0) 46%);
}
.bbg-hero__inner {
position: relative;
width: 100%;
padding-block: clamp(48px, 7vw, 88px);
}
.bbg-hero__content {
max-width: 720px;
}
.bbg-hero .bbg-eyebrow {
color: rgba(245, 242, 236, 0.68);
}
.bbg-hero__title {
color: var(--bbg-warm-50);
margin-bottom: var(--bbg-s5);
}
.bbg-hero__text {
color: rgba(245, 242, 236, 0.8);
font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
line-height: 1.7;
max-width: 56ch;
margin: 0 0 var(--bbg-s7);
text-wrap: pretty;
}
.bbg-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* compact page header for interior pages */
.bbg-pagehead {
position: relative;
padding-top: calc(var(--bbg-header-h) + clamp(40px, 6vw, 72px));
padding-bottom: clamp(40px, 6vw, 72px);
background: var(--bbg-navy-900);
color: var(--bbg-warm-50);
overflow: hidden;
}
.bbg-pagehead__media {
position: absolute;
inset: 0;
opacity: 0.3;
}
.bbg-pagehead__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bbg-pagehead__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--bbg-navy-950) 8%, rgba(8, 19, 31, 0.3) 100%);
}
.bbg-pagehead__inner {
position: relative;
}
.bbg-pagehead__title {
color: var(--bbg-warm-50);
margin: 0;
}
.bbg-pagehead__text {
color: rgba(245, 242, 236, 0.74);
margin: var(--bbg-s4) 0 0;
max-width: 60ch;
font-size: 1.0625rem;
line-height: 1.7;
}
.bbg-pagehead .bbg-eyebrow {
color: rgba(245, 242, 236, 0.56);
}
.bbg-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 0 0 var(--bbg-s5);
padding: 0;
font-size: 0.8125rem;
color: rgba(245, 242, 236, 0.56);
}
.bbg-breadcrumb a {
color: inherit;
transition: color var(--bbg-t-fast);
}
.bbg-breadcrumb a:hover {
color: var(--bbg-warm-50);
}
.bbg-breadcrumb li + li::before {
content: "/";
margin-right: 8px;
opacity: 0.5;
}
.bbg-breadcrumb [aria-current] {
color: rgba(245, 242, 236, 0.9);
}
/* --------------------------------------------------------------- 8. stats */
.bbg-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--bbg-rule);
}
.bbg-stats--on-dark {
border-top-color: var(--bbg-rule-light);
}
.bbg-stat {
padding: clamp(24px, 3.4vw, 40px) clamp(16px, 2vw, 28px) 0;
border-right: 1px solid var(--bbg-rule);
}
.bbg-stats--on-dark .bbg-stat {
border-right-color: var(--bbg-rule-light);
}
.bbg-stat:last-child {
border-right: 0;
}
.bbg-stat__value {
font-family: var(--bbg-font-display);
font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
line-height: 1;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--bbg-ink);
display: flex;
align-items: baseline;
gap: 2px;
}
.bbg-stats--on-dark .bbg-stat__value {
color: var(--bbg-warm-50);
}
.bbg-stat__suffix {
font-size: 0.5em;
font-weight: 600;
opacity: 0.7;
}
.bbg-stat__label {
margin-top: 10px;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--bbg-ink-subtle);
letter-spacing: 0.02em;
}
.bbg-stats--on-dark .bbg-stat__label {
color: rgba(245, 242, 236, 0.6);
}
@media (max-width: 767px) {
.bbg-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bbg-stat:nth-child(2n) {
border-right: 0;
}
.bbg-stat:nth-child(n+3) {
border-top: 1px solid var(--bbg-rule);
}
.bbg-stats--on-dark .bbg-stat:nth-child(n+3) {
border-top-color: var(--bbg-rule-light);
}
}
/* ------------------------------------------------------- 9. project cards */
.bbg-card {
display: flex;
flex-direction: column;
background: var(--bbg-white);
border: 1px solid var(--bbg-rule);
border-radius: 3px;
overflow: hidden;
transition: border-color var(--bbg-t), box-shadow var(--bbg-t), transform var(--bbg-t);
}
.bbg-card:hover {
border-color: var(--bbg-rule-strong);
box-shadow: var(--bbg-shadow);
transform: translateY(-3px);
}
.bbg-card__media {
position: relative;
aspect-ratio: 3/2;
overflow: hidden;
background: var(--bbg-slate-100);
}
.bbg-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--bbg-t-slow);
}
.bbg-card:hover .bbg-card__media img {
transform: scale(1.035);
}
.bbg-card__body {
padding: clamp(20px, 2.4vw, 28px);
display: flex;
flex-direction: column;
flex: 1;
}
.bbg-card__title {
font-family: var(--bbg-font-display);
font-size: 1.25rem;
line-height: 1.3;
font-weight: 600;
color: var(--bbg-ink);
margin: 0;
}
.bbg-card__loc {
margin-top: 8px;
font-size: 0.875rem;
color: var(--bbg-ink-subtle);
display: flex;
align-items: center;
gap: 7px;
}
.bbg-card__loc svg {
width: 13px;
height: 13px;
flex: none;
opacity: 0.75;
}
.bbg-card__text {
margin: 14px 0 0;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--bbg-slate-600);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bbg-card__foot {
margin-top: auto;
padding-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bbg-card__more {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bbg-navy-700);
display: inline-flex;
align-items: center;
gap: 8px;
}
.bbg-card__more svg {
width: 14px;
height: 9px;
transition: transform var(--bbg-t);
}
.bbg-card:hover .bbg-card__more svg {
transform: translateX(4px);
}
/* status pill */
.bbg-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 2px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--bbg-slate-100);
color: var(--bbg-slate-700);
border: 1px solid transparent;
white-space: nowrap;
}
.bbg-tag::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.bbg-tag--completed {
background: rgba(29, 65, 102, 0.08);
color: var(--bbg-navy-600);
}
.bbg-tag--construction {
background: rgba(90, 104, 117, 0.12);
color: var(--bbg-slate-700);
}
.bbg-tag--selling {
background: rgba(46, 92, 138, 0.1);
color: var(--bbg-accent);
}
.bbg-tag--floating {
position: absolute;
left: 14px;
top: 14px;
z-index: 2;
background: rgba(11, 26, 45, 0.82);
color: var(--bbg-warm-50);
backdrop-filter: blur(6px);
}
/* filter tabs */
.bbg-filter {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--bbg-rule);
margin-bottom: clamp(28px, 4vw, 44px);
}
.bbg-filter a {
padding: 12px 18px;
margin-bottom: -1px;
font-size: 0.875rem;
font-weight: 500;
color: var(--bbg-ink-subtle);
border-bottom: 2px solid transparent;
transition: color var(--bbg-t-fast), border-color var(--bbg-t-fast);
white-space: nowrap;
}
.bbg-filter a:hover {
color: var(--bbg-navy-700);
}
.bbg-filter a.is-active {
color: var(--bbg-navy-800);
border-bottom-color: var(--bbg-navy-800);
font-weight: 600;
}
.bbg-filter__count {
font-size: 0.75rem;
opacity: 0.6;
margin-left: 5px;
}
/* ------------------------------------------------------- 10. project meta */
.bbg-spec {
border-top: 1px solid var(--bbg-rule);
margin: 0;
}
.bbg-spec__row {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 16px;
padding: 15px 0;
border-bottom: 1px solid var(--bbg-rule);
}
.bbg-spec__k {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bbg-ink-subtle);
margin: 0;
padding-top: 3px;
}
.bbg-spec__v {
font-size: 0.9375rem;
color: var(--bbg-slate-800);
margin: 0;
line-height: 1.6;
}
@media (max-width: 599px) {
.bbg-spec__row {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
.bbg-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 20px);
}
.bbg-gallery img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 3px;
}
.bbg-gallery > *:first-child:nth-last-child(odd) {
grid-column: 1/-1;
}
@media (max-width: 599px) {
.bbg-gallery {
grid-template-columns: minmax(0, 1fr);
}
}
/* --------------------------------------------------------- 11. news cards */
.bbg-news {
display: flex;
gap: clamp(20px, 3vw, 32px);
padding: clamp(20px, 2.6vw, 28px) 0;
border-bottom: 1px solid var(--bbg-rule);
}
.bbg-news__media {
flex: none;
width: clamp(140px, 22vw, 260px);
aspect-ratio: 3/2;
overflow: hidden;
border-radius: 3px;
background: var(--bbg-slate-100);
}
.bbg-news__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--bbg-t-slow);
}
.bbg-news:hover .bbg-news__media img {
transform: scale(1.035);
}
.bbg-news__body {
flex: 1;
min-width: 0;
}
.bbg-news__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bbg-ink-subtle);
margin-bottom: 10px;
}
.bbg-news__meta span + span::before {
content: "·";
margin-right: 10px;
opacity: 0.6;
}
.bbg-news__title {
font-family: var(--bbg-font-display);
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
line-height: 1.32;
font-weight: 600;
color: var(--bbg-ink);
margin: 0;
transition: color var(--bbg-t-fast);
}
.bbg-news:hover .bbg-news__title {
color: var(--bbg-navy-600);
}
.bbg-news__text {
margin: 10px 0 0;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--bbg-slate-600);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 639px) {
.bbg-news {
flex-direction: column;
gap: 14px;
}
.bbg-news__media {
width: 100%;
}
}
/* ----------------------------------------------------------- 12. partners */
.bbg-partner-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: clamp(22px, 2.6vw, 32px);
background: var(--bbg-white);
border: 1px solid var(--bbg-rule);
border-radius: 3px;
}
.bbg-partner-card__logo {
height: 76px;
display: flex;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid var(--bbg-rule);
}
.bbg-partner-card__logo img {
max-height: 58px;
width: auto;
object-fit: contain;
}
.bbg-partner-card__name {
font-family: var(--bbg-font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--bbg-ink);
margin: 0;
}
.bbg-partner-card__role {
font-size: 0.8125rem;
color: var(--bbg-ink-subtle);
margin: 5px 0 0;
letter-spacing: 0.04em;
}
.bbg-partner-card__text {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--bbg-slate-600);
margin: 0;
}
/* Stand-in where no usable vector logo exists. */
.bbg-partner-card__wordmark {
font-family: var(--bbg-font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--bbg-slate-700);
}
/* --------------------------------------------------------------- 13. team */
.bbg-founder {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
/* The portrait was shot on a white studio backdrop. Left bare on the warm
section it reads as a brighter rectangle floating on the page, so it sits
in an explicit white card instead — the white then looks intended. */
.bbg-founder__photo {
position: relative;
background: var(--bbg-white);
border: 1px solid var(--bbg-rule);
border-radius: 3px;
padding: 10px;
box-shadow: var(--bbg-shadow-sm);
}
.bbg-founder__photo img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: 2px;
display: block;
}
.bbg-founder__name {
font-family: var(--bbg-font-display);
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.bbg-founder__role {
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bbg-ink-subtle);
margin: 7px 0 0;
}
.bbg-founder__quote {
font-family: var(--bbg-font-display);
font-size: clamp(1.1875rem, 1.02rem + 0.7vw, 1.625rem);
line-height: 1.5;
color: var(--bbg-ink);
margin: 0;
padding-left: 22px;
border-left: 2px solid var(--bbg-navy-700);
text-wrap: pretty;
}
.bbg-founder__bio {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--bbg-slate-600);
margin: 0;
max-width: 60ch;
}
/* Positions held — a plain rule-separated list, not bullets. */
.bbg-rolelist {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.bbg-rolelist li {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--bbg-slate-700);
padding: 9px 0 9px 18px;
border-top: 1px solid var(--bbg-rule);
position: relative;
}
.bbg-rolelist li::before {
content: "";
position: absolute;
left: 0;
top: 17px;
width: 8px;
height: 1px;
background: var(--bbg-slate-400);
}
@media (max-width: 767px) {
.bbg-founder {
grid-template-columns: minmax(0, 1fr);
}
.bbg-founder__photo {
max-width: 280px;
}
}
/* pillar / value list */
.bbg-pillar {
padding-top: 26px;
border-top: 1px solid var(--bbg-rule);
}
.bbg-section--navy .bbg-pillar {
border-top-color: var(--bbg-rule-light);
}
.bbg-pillar__num {
font-family: var(--bbg-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--bbg-slate-400);
display: block;
margin-bottom: 14px;
}
.bbg-section--navy .bbg-pillar__num {
color: rgba(245, 242, 236, 0.45);
}
.bbg-pillar__title {
font-family: var(--bbg-font-display);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.35;
margin: 0;
}
.bbg-pillar__text {
margin: 12px 0 0;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--bbg-slate-600);
}
.bbg-section--navy .bbg-pillar__text {
color: rgba(245, 242, 236, 0.7);
}
/* timeline */
.bbg-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.bbg-timeline li {
position: relative;
padding: 0 0 32px 30px;
border-left: 1px solid var(--bbg-rule);
}
.bbg-timeline li:last-child {
padding-bottom: 0;
border-left-color: transparent;
}
.bbg-timeline li::before {
content: "";
position: absolute;
left: -4.5px;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bbg-navy-700);
box-shadow: 0 0 0 4px var(--bbg-bg);
}
.bbg-timeline__year {
font-family: var(--bbg-font-display);
font-size: 1.125rem;
font-weight: 600;
color: var(--bbg-navy-700);
display: block;
}
.bbg-timeline__text {
margin: 6px 0 0;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--bbg-slate-600);
}
/* ---------------------------------------------------------------- 14. CTA */
.bbg-cta {
position: relative;
overflow: hidden;
background: var(--bbg-navy-900);
color: var(--bbg-warm-50);
}
.bbg-cta__media {
position: absolute;
inset: 0;
opacity: 0.22;
}
.bbg-cta__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bbg-cta__inner {
position: relative;
padding-block: clamp(52px, 7vw, 96px);
}
.bbg-cta__title {
color: var(--bbg-warm-50);
margin: 0 0 var(--bbg-s4);
}
.bbg-cta__text {
color: rgba(245, 242, 236, 0.74);
max-width: 54ch;
margin: 0 0 var(--bbg-s6);
font-size: 1.0625rem;
line-height: 1.7;
}
/* --------------------------------------------------------------- 15. form */
.bbg-field {
display: block;
margin-bottom: var(--bbg-s5);
}
.bbg-label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bbg-slate-700);
margin-bottom: 9px;
}
.bbg-label .bbg-req {
color: #a4443a;
margin-left: 3px;
}
.bbg-input, .bbg-textarea, .bbg-select {
display: block;
width: 100%;
padding: 14px 16px;
font-family: var(--bbg-font-body);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--bbg-ink);
background: var(--bbg-white);
border: 1px solid var(--bbg-slate-200);
border-radius: 2px;
transition: border-color var(--bbg-t-fast), box-shadow var(--bbg-t-fast);
-webkit-appearance: none;
appearance: none;
}
.bbg-input::placeholder, .bbg-textarea::placeholder {
color: var(--bbg-slate-400);
}
.bbg-input:focus, .bbg-textarea:focus, .bbg-select:focus {
outline: none;
border-color: var(--bbg-navy-600);
box-shadow: 0 0 0 3px rgba(29, 65, 102, 0.1);
}
.bbg-textarea {
min-height: 148px;
resize: vertical;
}
.bbg-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 10px 6px;
padding-right: 40px;
}
.bbg-input.is-invalid, .bbg-textarea.is-invalid, .bbg-select.is-invalid {
border-color: #a4443a;
}
.bbg-error {
display: block;
margin-top: 7px;
font-size: 0.8125rem;
color: #a4443a;
}
.bbg-help {
display: block;
margin-top: 7px;
font-size: 0.8125rem;
color: var(--bbg-ink-subtle);
}
.bbg-alert {
padding: 16px 18px;
border-radius: 2px;
border: 1px solid;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: var(--bbg-s5);
}
.bbg-alert--ok {
background: rgba(29, 65, 102, 0.05);
border-color: rgba(29, 65, 102, 0.25);
color: var(--bbg-navy-700);
}
.bbg-alert--err {
background: rgba(164, 68, 58, 0.05);
border-color: rgba(164, 68, 58, 0.28);
color: #8c3a31;
}
/* contact detail block */
.bbg-detail {
padding: 22px 0;
border-bottom: 1px solid var(--bbg-rule);
}
.bbg-detail:first-child {
padding-top: 0;
}
.bbg-detail__k {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bbg-ink-subtle);
margin: 0 0 8px;
}
.bbg-detail__v {
font-size: 1rem;
line-height: 1.65;
color: var(--bbg-slate-800);
margin: 0;
}
.bbg-detail__v a {
transition: color var(--bbg-t-fast);
}
.bbg-detail__v a:hover {
color: var(--bbg-accent);
}
.bbg-map {
width: 100%;
aspect-ratio: 16/9;
border: 0;
border-radius: 3px;
filter: grayscale(1) contrast(0.94);
transition: filter var(--bbg-t-slow);
background: var(--bbg-slate-100);
}
.bbg-map:hover {
filter: grayscale(0.35) contrast(1);
}
/* --------------------------------------------------------- 16. pagination */
.bbg-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: clamp(32px, 4vw, 52px);
}
.bbg-pagination a, .bbg-pagination span {
min-width: 42px;
height: 42px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: var(--bbg-slate-700);
border: 1px solid var(--bbg-rule);
border-radius: 2px;
transition: border-color var(--bbg-t-fast), background var(--bbg-t-fast), color var(--bbg-t-fast);
}
.bbg-pagination a:hover {
border-color: var(--bbg-navy-700);
color: var(--bbg-navy-800);
}
.bbg-pagination .is-active {
background: var(--bbg-navy-800);
border-color: var(--bbg-navy-800);
color: var(--bbg-warm-50);
font-weight: 600;
}
.bbg-pagination .is-disabled {
opacity: 0.4;
pointer-events: none;
}
.bbg-empty {
padding: clamp(48px, 8vw, 88px) 0;
text-align: center;
color: var(--bbg-ink-subtle);
}
.bbg-empty__title {
font-family: var(--bbg-font-display);
font-size: 1.375rem;
color: var(--bbg-ink);
margin: 0 0 10px;
}
/* ------------------------------------------------------------- 17. footer */
.bbg-footer {
background: var(--bbg-navy-950);
color: rgba(245, 242, 236, 0.7);
padding-top: clamp(48px, 6vw, 80px);
}
.bbg-footer__top {
display: grid;
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px);
padding-bottom: clamp(36px, 5vw, 60px);
}
.bbg-footer__brand .bbg-logo__mark {
font-size: 1.625rem;
}
.bbg-footer__text {
margin: var(--bbg-s5) 0 0;
font-size: 0.9375rem;
line-height: 1.75;
color: rgba(245, 242, 236, 0.6);
max-width: 40ch;
}
.bbg-footer__h {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 242, 236, 0.5);
margin: 0 0 var(--bbg-s4);
}
.bbg-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.bbg-footer__list li + li {
margin-top: 11px;
}
.bbg-footer__list a {
font-size: 0.9375rem;
color: rgba(245, 242, 236, 0.72);
transition: color var(--bbg-t-fast);
}
.bbg-footer__list a:hover {
color: var(--bbg-warm-50);
}
.bbg-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8125rem;
color: rgba(245, 242, 236, 0.48);
}
.bbg-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.bbg-footer__legal a {
transition: color var(--bbg-t-fast);
}
.bbg-footer__legal a:hover {
color: var(--bbg-warm-50);
}
@media (max-width: 899px) {
.bbg-footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 559px) {
.bbg-footer__top {
grid-template-columns: minmax(0, 1fr);
}
}
/* ------------------------------------------------------------- 18. motion */
.bbg-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bbg-reveal.is-in {
opacity: 1;
transform: none;
}
.bbg-reveal[data-d="1"] {
transition-delay: 0.06s;
}
.bbg-reveal[data-d="2"] {
transition-delay: 0.12s;
}
.bbg-reveal[data-d="3"] {
transition-delay: 0.18s;
}
.bbg-reveal[data-d="4"] {
transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
.bbg-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.bbg *, body.bbg *::before, body.bbg *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* thin scroll progress bar */
.bbg-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
z-index: 95;
background: var(--bbg-accent);
width: 0;
transition: width 0.1s linear;
}
/* Reveal starts at opacity 0; if the script never runs, the page must not
stay blank. The