/* * bhr.css — BHR shared design system * Loaded by all pages under borneohistory.com. * Assumes Inter loaded via Google Fonts in each page's . * * Typography tokens * ───────────────── * --mono Courier New stack for labels / metadata * --lbl 0.72rem — eyebrow labels, meta text * --lbl-color #999 * --lbl-sp 0.08em * --section-h clamp(1.5rem,2vw,2rem) — "From the blog", "Collaborations", etc. * --page-h1 clamp(3rem,6vw,6rem) — hero h1 * --pad 28px — standard horizontal padding * --accent #ffe600 — yellow badge/tag colour */ /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100vh; } body { font-family: "Inter", system-ui, sans-serif; background: #fff; color: #000; display: flex; flex-direction: column; } a { color: inherit; } /* ── Tokens ──────────────────────────────────────────────────────────────── */ :root { --mono: "Courier New", Courier, monospace; --lbl: 0.72rem; <<<<<<< HEAD --lbl-color: #555; ======= --lbl-color: #999; >>>>>>> e4e71d5a0d43597a9659ac8e62528af0eaa3a6a1 --lbl-sp: 0.08em; --section-h: clamp(1.5rem, 2vw, 2rem); --page-h1: clamp(3rem, 6vw, 6rem); --pad: 28px; --accent: #ffe600; } /* ── Page wrapper ────────────────────────────────────────────────────────── */ .page { max-width: 2100px; margin: 0 auto; width: 100%; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; flex: 1; display: flex; flex-direction: column; } /* ── Topbar ──────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); border-bottom: 1px solid #000; } .topbar-name { font-size: .95rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; color: #000; } .topbar-right { display: flex; align-items: center; gap: 16px; } .topbar-link { font-size: .9rem; font-weight: 500; color: #000; text-decoration: none; letter-spacing: .01em; border-bottom: 1px solid #000; padding-bottom: 1px; } .topbar-link:hover { opacity: .6; } .topbar-badge { background: var(--accent); color: #000; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px var(--pad); border-top: 1px solid #000; margin-top: auto; background: #000; color: #fff; } .footer-left { font-size: 1rem; font-weight: 500; } .footer-right { display: flex; gap: 24px; font-size: .82rem; color: #aaa; flex-wrap: wrap; align-items: center; } .footer-right a { color: #aaa; text-decoration: none; } .footer-right a:hover { color: #fff; } /* ── Section eyebrow label ───────────────────────────────────────────────── */ /* Used as horizontal section headers: "From the blog", "Partnership ·..." */ .section-label { font-family: var(--mono); font-size: var(--lbl); letter-spacing: var(--lbl-sp); text-transform: uppercase; color: var(--lbl-color); padding: 14px var(--pad); border-bottom: 1px solid #ddd; } /* ── Meta label / value (right info panels) ──────────────────────────────── */ .meta-label { font-family: var(--mono); font-size: var(--lbl); letter-spacing: var(--lbl-sp); text-transform: uppercase; color: var(--lbl-color); margin-bottom: 4px; } .meta-value { font-size: .95rem; line-height: 1.5; } /* ── Page header right panel (cream bg, meta info) ───────────────────────── */ .page-header-right { padding: 52px var(--pad); background: #f7f7f5; display: flex; flex-direction: column; justify-content: center; gap: 24px; } /* ── Doc pages (Terms of Service, Privacy Policy) ────────────────────────── */ .doc-header { padding: 52px var(--pad) 36px; border-bottom: 1px solid #000; max-width: 860px; } .doc-label { font-family: var(--mono); font-size: var(--lbl); letter-spacing: var(--lbl-sp); text-transform: uppercase; color: var(--lbl-color); margin-bottom: 14px; } .doc-header h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: .95; letter-spacing: -.02em; margin-bottom: 20px; } .doc-header .updated { font-family: var(--mono); font-size: .78rem; color: #aaa; letter-spacing: .04em; } .doc-body { padding: 48px var(--pad) 64px; max-width: 760px; display: flex; flex-direction: column; gap: 40px; } .doc-section h2 { font-size: 1rem; font-weight: 500; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #e8e8e8; } .doc-section p, .doc-section li { font-size: .95rem; line-height: 1.75; color: #222; } .doc-section ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; } .doc-section p + p { margin-top: 12px; } /* ── Responsive base ─────────────────────────────────────────────────────── */ @media (max-width: 500px) { :root { --pad: 20px; } }