@charset "UTF-8"; /* ============================================================================ Baccarat Bro Fresh — WordPress glue for the baczim design system. The design tokens + components live in baczim-source.css (loaded first). This file maps GeneratePress/WordPress structures onto that design and styles the SEO/interlink layer (breadcrumbs, byline, page hero, cards, related, author box) + the WP content surface (.entry-content -> .prose). ============================================================================ */ /* ---- GeneratePress neutralisation: we render our own .nav + .foot ---- */ #masthead { display: none; } /* Full-bleed: GP's container caps content at 1200px, which clamps our hero/ section backgrounds. Remove the cap so sections span the viewport and the inner .wrap / .bbro-container constrains the content (as in the reference). */ #page.grid-container, .grid-container.container, body:not(.x) .grid-container { max-width: none !important; padding: 0 !important; } .site-content { padding: 0 !important; background: transparent; } .site-content .content-area, .separate-containers .site-main { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* Our page-level mains must be full width so their sections bleed edge-to-edge (GP gives
a contained width by default). */ .site-content > main, .bbro-home, #main, .bbro-portal, .bbro-authorarchive, main.site-main { width: 100% !important; max-width: none !important; margin: 0 !important; } .separate-containers .inside-article { padding: 0; } .entry-header, .page-header-image, .generate-page-header, .footer-widgets, .site-info { display: none; } #page, .site { background: var(--cream); } /* Thai/Lao glyph coverage: Playfair/Hanken have no Thai or Lao glyphs, so without these companions that text falls back to random system fonts. Per-character fallback keeps Latin in Playfair/Hanken, Thai in Noto Serif/Sans Thai, and Lao in Noto Serif/Sans Lao. Vietnamese + Malay + Indonesian are covered natively by Playfair + Hanken (Latin). */ :root { --display: 'Playfair Display', 'Noto Serif Thai', 'Noto Serif Lao', 'Noto Serif KR', Georgia, serif; --sans: 'Hanken Grotesk', 'Noto Sans Thai', 'Noto Sans Lao', 'Noto Sans KR', system-ui, -apple-system, sans-serif; --mono: 'Space Mono', 'Noto Sans Thai', 'Noto Sans Lao', 'Noto Sans KR', ui-monospace, monospace; } /* WP body uses the cream bg + sans already from baczim-source */ body.bbro-edition { padding-bottom: 0; } @media (max-width:640px){ body.bbro-edition { padding-bottom: 68px; } } /* The portal landing has no mobile tab bar, so the global 68px tab-bar spacer would just be empty space under its footer. Zero it out. */ body.bbro-portal-page { padding-bottom: 0 !important; } /* ---- skip link ---- */ .bbro-skip { position:absolute; left:-9999px; top:0; z-index:999; background:var(--gold); color:#211806; padding:10px 16px; font-family:var(--mono); font-weight:700; } .bbro-skip:focus { left:8px; top:8px; } /* ============================================================ PAGE HERO (generic interior pages) — same .page-hero structure as the bespoke baczim templates (hero__felt + breadcrumb + eyebrow + H1 + lede), plus the byline row. Visual rules live in components.css (.page-hero). ============================================================ */ html { scroll-padding-top: 90px; } /* anchor jumps clear the sticky nav */ /* double-class beats components.css's `.page-hero { padding: 40px 0 8px }` regardless of stylesheet order — the byline needs air below it */ .page-hero.bbro-pagehero { padding-bottom: 34px; } .bbro-pagehero h1 { max-width: 22ch; } .bbro-lang-th .bbro-pagehero h1 { line-height: 1.18; } /* Lao + Thai: tall stacked glyphs (tone marks above + vowels below) overflow the tight 1.06 display line-height and collide with the zero-gap eyebrow above the title. Give headings room + a little breathing space under eyebrows. Latin editions (en/vi/ms/id) are unaffected. */ .bbro-lang-th h1, .bbro-lang-th h2, .bbro-lang-th h3, .bbro-lang-th h4, .bbro-lang-lo h1, .bbro-lang-lo h2, .bbro-lang-lo h3, .bbro-lang-lo h4 { line-height: 1.28; } .bbro-lang-th .eyebrow, .bbro-lang-lo .eyebrow { line-height: 1.5; margin-bottom: 6px; } /* breadcrumbs -> mono trail */ .bbro-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px 8px; margin:0; padding:0; list-style:none; } .bbro-breadcrumbs li { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-faint); } .bbro-breadcrumbs li:not(:last-child)::after { content:"/"; opacity:.5; } .bbro-breadcrumbs a { color:var(--ink-faint); } .bbro-breadcrumbs a:hover { color:var(--felt); } .bbro-breadcrumbs [aria-current="page"] span { color:var(--ink-soft); } /* byline */ .bbro-byline { margin: 16px 0 0; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:.95rem; color:var(--ink-soft); } .bbro-byline__author { color:var(--felt); font-weight:700; } .bbro-byline__author:hover { color:var(--felt-bright); } .bbro-byline__role, .bbro-byline__date { color:var(--ink-faint); } .bbro-byline--review { font-size:.88rem; color:var(--ink-faint); } .bbro-byline__check { color:var(--felt); font-weight:800; } /* ============================================================ CONTENT SURFACE (.entry-content -> prose) Generic pages render via content-page.php: a .wrap layout on the cream background (TOC sidebar when the page has 3+ H2s, narrow column otherwise). The .inside-article wrapper is transparent + uncapped — no white panel. ============================================================ */ .bbro-edition:not(.home) .site-main { background: var(--cream); } .bbro-edition:not(.home) .inside-article { background: transparent; border: 0; box-shadow: none; max-width: none; margin: 0; padding: 0; } .bbro-edition .entry-content { font-size: 1.12rem; line-height: 1.75; color: var(--ink); } .bbro-edition .entry-content > * + * { margin-top: 1.3rem; } /* The owl above only reaches DIRECT children; paragraphs and lists nested inside components (callouts, takeaway boxes, panels…) would otherwise collapse together because the design resets p/ul/ol to margin:0. Give the flow elements breathing room at any depth — same 1.3rem as the owl, so the vertical rhythm is identical everywhere. (Components with tighter internal spacing, like the bro-callout bubble, override with more specific rules.) */ .entry-content p + p, .prose p + p, .entry-content p + ul, .prose p + ul, .entry-content p + ol, .prose p + ol, .entry-content ul + p, .prose ul + p, .entry-content ol + p, .prose ol + p, .entry-content ul + ul, .prose ul + ul, .entry-content ol + ol, .prose ol + ol { margin-top: 1.3rem; } /* …and a paragraph/list directly following ANY block (component div, table, figure…) at the top level of the flow. (0,1,1) ties the design's `.prose p { margin:0 }` reset and wins by load order. Direct children only, so component internals keep their own tighter spacing. */ .entry-content > * + p, .prose > * + p, .entry-content > * + ul, .prose > * + ul, .entry-content > * + ol, .prose > * + ol { margin-top: 1.3rem; } .entry-content > p:first-of-type, .entry-content .bbro-lede { font-size: 1.24rem; line-height: 1.6; color: var(--ink); } .entry-content h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3.4vw,2rem); line-height: 1.1; color: var(--ink); margin-top: 2.6rem; } .entry-content h3 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin-top: 2rem; } .entry-content p, .entry-content li { color: var(--ink); } .entry-content a { color: var(--felt); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; font-weight: 600; } .entry-content a:hover { color: var(--felt-bright); } .entry-content ul, .entry-content ol { padding-left: 1.3em; } .entry-content li + li { margin-top: .5rem; } .entry-content blockquote { padding: 6px 0 6px 24px; border-left: 4px solid var(--gold); font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--felt-deep); margin: 1.6rem 0; } .entry-content :where(h1,h2,h3) a { text-decoration: none; } .entry-content img { border-radius: var(--r); } .entry-content table { width:100%; border-collapse:collapse; font-size:.98rem; background:var(--paper); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin:1.6rem 0; } .entry-content th, .entry-content td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft); } .entry-content thead th { background:var(--felt-tint); font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--felt-deep); font-weight:700; } .entry-content tbody tr:last-child td { border-bottom:0; } /* ============================================================ CARDS from template-tags (.bbro-lcards) -> .card grid ============================================================ */ .bbro-lcards { display:grid; grid-template-columns:1fr; gap:22px; margin:1.6rem 0 0; padding:0; list-style:none; } /* beat the generic .entry-content ul/li rules (list padding + li spacing) */ .entry-content .bbro-lcards, .prose .bbro-lcards { padding:0; list-style:none; } .entry-content .bbro-lcards li, .prose .bbro-lcards li, .entry-content .bbro-lcards li + li, .prose .bbro-lcards li + li { margin:0; } @media (min-width:600px){ .bbro-lcards { grid-template-columns:repeat(2,1fr); } } @media (min-width:860px){ .bbro-lcards { grid-template-columns:repeat(3,1fr); } } .bbro-lcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .25s, border-color .2s; } .bbro-lcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); } .bbro-lcard__link { display:block; padding:24px; color:var(--ink); } .bbro-lcard__title { font-family:var(--display); font-weight:800; font-size:1.3rem; line-height:1.1; margin:0 0 .4em; color:var(--ink); } .bbro-lcard__excerpt { margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.55; } .bbro-lcard__cta { display:inline-block; margin-top:.8em; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; } /* card links inside prose/entry-content must not inherit the underlined text-link style */ .entry-content a.bbro-lcard__link, .prose a.bbro-lcard__link { text-decoration: none; font-weight: inherit; color: var(--ink); } .entry-content .bbro-authorbox a, .prose .bbro-authorbox a { text-decoration: none; } .bbro-eyebrow { font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin:0 0 .8em; } .bbro-related { margin: 3rem 0 0; max-width: none; padding: 2rem 0 0; border-top: 1px solid var(--line); } .bbro-related__title { font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--ink); margin:0 0 1.2rem; } /* author box (E-E-A-T) -> bro-callout-ish card */ .bbro-authorbox { display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:start; margin:3rem auto 0; max-width:820px; padding:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); box-shadow:var(--shadow-sm); } .bbro-authorbox__avatar { width:64px; height:64px; border-radius:16px; display:inline-grid; place-items:center; background:var(--felt); color:#fff; font-family:var(--display); font-weight:800; font-size:1.3rem; } .bbro-authorbox.is-bro .bbro-authorbox__avatar { background:transparent; border-radius:50%; } .bbro-authorbox.is-bro .bbro-authorbox__avatar .bro-emblem { width:64px; height:64px; } /* custom profile photos (bbro_avatar user meta) */ .bbro-authorbox__avatar.has-photo { background:transparent; overflow:hidden; border:2px solid var(--gold); } .bbro-authorbox__avatar.has-photo img, .bbro-authorhero__avatar.has-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; } .bbro-authorhero__avatar.has-photo { background:transparent; overflow:hidden; border:2px solid var(--gold); } .bbro-authorbox__eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin:0 0 .3em; } .bbro-authorbox__name { font-family:var(--display); font-weight:800; font-size:1.25rem; margin:0 0 .4em; color:var(--ink); } .bbro-authorbox__name a { color:var(--ink); } .bbro-authorbox__role { color:var(--ink-soft); font-weight:400; font-family:var(--sans); font-size:.95rem; } .bbro-authorbox__bio { margin:0 0 .7em; color:var(--ink-soft); font-size:.96rem; line-height:1.6; } .bbro-authorbox__link { font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--felt); font-weight:700; } /* ============================================================ AUTHOR ARCHIVE ============================================================ */ .bbro-authorhero { border-bottom:1px solid var(--line); background: var(--felt-tint); } .bbro-authorhero .bbro-container { max-width:var(--maxw); margin:0 auto; padding:40px 24px 34px; } .bbro-authorhero__head { display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:center; margin-top:16px; } .bbro-authorhero__avatar { width:72px; height:72px; border-radius:18px; display:inline-grid; place-items:center; background:var(--felt); color:#fff; font-family:var(--display); font-weight:800; font-size:1.6rem; } .bbro-authorhero__name { font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,5vw,2.6rem); margin:0; color:var(--ink); } .bbro-authorhero__role { margin:.3em 0 0; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; } .bbro-authorhero__exp { margin:.5em 0 0; color:var(--ink-soft); } .bbro-authorhero__bio { margin:1em 0 0; color:var(--ink-soft); line-height:1.65; max-width:70ch; } .bbro-authorarchive .wrap, .bbro-authorarchive .bbro-container { max-width:var(--maxw); margin:0 auto; padding-inline:24px; } .bbro-authorarchive .bbro-section { padding:48px 0; } .bbro-section__title { font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--ink); margin:0 0 1.4rem; } /* ============================================================ PORTAL (bare root /) ============================================================ */ .bbro-portal { min-height:72vh; display:flex; align-items:center; justify-content:center; padding:48px 24px; text-align:center; } .bbro-portal__inner { width:100%; max-width:640px; } .bbro-portal__emblem { display:block; width:78px; height:78px; margin:0 auto .7rem; filter:drop-shadow(0 8px 18px rgba(10,58,43,.18)); } .bbro-portal__logo { display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; font-size:2rem; color:var(--ink); line-height:1; } .bbro-portal__logo strong { color:var(--felt); } .bbro-portal__hub { display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-top:.45rem; } .bbro-portal__tagline { color:var(--ink-soft); margin:.8rem 0 0; } .bbro-portal__heading { font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin:1.6rem 0 1.2rem; } .bbro-portal__langs { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .bbro-portal__lang { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:14px; padding:16px 18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .2s, border-color .2s; } .bbro-portal__lang:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--gold); } .bbro-portal__flag { font-size:1.6rem; } .bbro-portal__langname { font-family:var(--display); font-weight:800; font-size:1.15rem; text-align:left; } .bbro-portal__langen { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .bbro-portal__note { color:var(--ink-faint); font-size:.85rem; margin:1.4rem 0 0; } /* Featured (English) edition card — full width above the grid. */ .bbro-portal__feature { margin-bottom:14px; padding:18px 22px; background:var(--gold-tint); border-color:#e8d9b4; } .bbro-portal__feature .bbro-portal__flag { font-size:1.9rem; } .bbro-portal__featuremain { display:flex; flex-direction:column; gap:1px; text-align:left; min-width:0; } .bbro-portal__feature .bbro-portal__langname { font-size:1.3rem; } .bbro-portal__featurehint { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; } .bbro-portal__arr { font-size:1.25rem; color:var(--felt); font-weight:700; transition:transform .15s; } .bbro-portal__feature:hover .bbro-portal__arr { transform:translateX(3px); } /* Sticky footer on the portal: fill the viewport, pin the footer to the bottom (no leftover whitespace under it), and let the chooser centre in the middle. */ body.bbro-portal-page { min-height:100vh; display:flex; flex-direction:column; } body.bbro-portal-page #page { flex:1 0 auto; display:flex; flex-direction:column; } body.bbro-portal-page #content { flex:1 0 auto; display:flex; flex-direction:column; } body.bbro-portal-page .bbro-portal { flex:1 0 auto; min-height:0; } body.bbro-portal-page .site-footer { flex-shrink:0; } @media (min-width:560px){ .bbro-portal__langs { grid-template-columns:1fr 1fr; } } /* ============================================================ Language picker = the baczim region dropdown. Base styles (.region__btn, .region__menu, .region.open) come from baczim-source.css; these rows are elements (navigation) instead of the demo's