/* BaP Data — blog hero image styles Add to any article page. Requires Instrument Serif font — add to the Google Fonts import in . */ /* ------------------------------------------------------------------ */ /* Scaler wrapper — reserves proportional space, scales hero to fit */ /* ------------------------------------------------------------------ */ .bh-section { padding: 48px 0 0; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); } .bh-scaler { width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 1200 / 630; overflow: hidden; position: relative; display: block; } /* The 1200×630 canvas — scaled via JS to fit its wrapper */ .bh-hero { position: absolute; width: 1200px; height: 630px; top: 0; left: 0; transform-origin: top left; overflow: hidden; /* design tokens scoped to hero only */ --bh-cream: #F4F1EA; --bh-cream-2: #ECE8DF; --bh-paper: #FBF9F4; --bh-ink: #1C1916; --bh-muted: #7A736B; --bh-hairline: #D5CFC5; --bh-hairline-2: #B8B1A5; --bh-accent: #B5482F; /* shorthand aliases used inline in each hero's HTML */ --accent: var(--bh-accent); --cream: var(--bh-cream); --cream-2: var(--bh-cream-2); --paper: var(--bh-paper); --ink: var(--bh-ink); --muted: var(--bh-muted); --hairline: var(--bh-hairline); --hairline-2:var(--bh-hairline-2); --bh-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --bh-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --bh-font-sans: "Manrope", -apple-system, system-ui, sans-serif; background: var(--bh-cream); color: var(--bh-ink); font-family: var(--bh-font-sans); } /* paper grain texture overlay */ .bh-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 10; background-image: radial-gradient(circle at 25% 30%, rgba(0,0,0,.018) 0 1px, transparent 2px), radial-gradient(circle at 70% 80%, rgba(0,0,0,.015) 0 1px, transparent 2px), radial-gradient(circle at 90% 15%, rgba(0,0,0,.012) 0 1px, transparent 2px); background-size: 7px 7px, 11px 11px, 13px 13px; mix-blend-mode: multiply; opacity: .6; } /* ------------------------------------------------------------------ */ /* Chrome — frame + crop marks (shared by all heroes) */ /* ------------------------------------------------------------------ */ .bh-frame { position: absolute; inset: 28px; border: 1px solid var(--bh-hairline); pointer-events: none; z-index: 1; } .bh-crop { position: absolute; width: 12px; height: 12px; border: 1px solid var(--bh-ink); z-index: 1; } .bh-crop.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; } .bh-crop.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; } .bh-crop.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; } .bh-crop.br { bottom: 16px; right: 16px; border-left: none; border-top: none; } /* ------------------------------------------------------------------ */ /* Top / bottom meta bars */ /* ------------------------------------------------------------------ */ .bh-top-meta { position: absolute; top: 56px; left: 56px; right: 56px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--bh-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; z-index: 2; } .bh-top-meta .left { color: var(--bh-ink); } .bh-top-meta .right { color: var(--bh-muted); } .bh-bottom-meta { position: absolute; bottom: 56px; left: 56px; right: 56px; display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--bh-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bh-muted); z-index: 2; } /* ------------------------------------------------------------------ */ /* Typography utilities */ /* ------------------------------------------------------------------ */ .bh-headline { font-family: var(--bh-font-serif); font-weight: 400; color: var(--bh-ink); line-height: .92; letter-spacing: -.015em; } .bh-meta { font-family: var(--bh-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bh-muted); } .bh-italic { font-style: italic; } .bh-tnum { font-variant-numeric: tabular-nums; } /* inline accent colour helpers */ .bh-c-accent { color: var(--bh-accent) !important; } .bh-c-muted { color: var(--bh-muted) !important; } .bh-c-ink { color: var(--bh-ink) !important; } /* small accent dot */ .bh-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bh-accent); vertical-align: middle; } /* rule lines */ .bh-rule { height: 1px; background: var(--bh-hairline); width: 100%; } .bh-rule-ink { background: var(--bh-ink); } .bh-rule-accent{ background: var(--bh-accent); }