/* ============================================================================ Outdoor Books — editorial foundation ---------------------------------------------------------------------------- The brief: a contemporary outdoor literary magazine with the utility of a specialist bookshop. Typography carries the brand; the books carry the colour. This file defines the vocabulary only — type, palette, rules, links, covers. Nothing here restyles a page on its own; templates opt in by class. That way the change can land surface by surface and be judged surface by surface, rather than as one irreversible repaint of a live site. ========================================================================= */ /* ---- Type ----------------------------------------------------------------- Newsreader for anything that speaks — mastheads, headlines, book titles, pull quotes. A variable font, so one file covers 200-800 and there is no weight-per-file tax. Avenir Next stays for the working parts: navigation, metadata, ISBNs, filters, buttons. Books plus outdoors, not a shop platform. Self-hosted because the Content-Security-Policy admits no font host but our own — Google Fonts would be blocked outright, silently. -------------------------------------------------------------------------*/ @font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-roman.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; } :root { --ob-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --ob-sans: 'Avenir Next LT W02 Regular', 'Avenir Next', Avenir, 'Segoe UI', Helvetica, Arial, sans-serif; /* ---- Palette ---------------------------------------------------------- The identity is black, paper, books and landscape — not the predictable green outdoor aesthetic. So the accent work is done by near-black type on warm paper, and the colour on the page comes from the jackets. Near-black rather than #000 for anything large: pure black on a warm ground reads as a screen, while 1a-ish reads as ink and sits properly against paper. Clay is the single warm accent and appears in small amounts only — a rule beside an aside, a pull quote — never as a brand colour. --------------------------------------------------------------------*/ --ob-black: #1a1a1a; /* large dark areas: the bar, the footer */ --ob-black-soft: #24231f; /* a second dark, for layering */ --ob-paper: #faf8f4; /* warm off-white, the default ground */ --ob-paper-deep: #f3efe7; /* stone, for a section that sits back */ --ob-sand: #ebe5d9; /* a heavier band, used sparingly */ --ob-ink: #1f1e1c; /* body and headline type */ --ob-ink-soft: #57544d; /* secondary text */ --ob-ink-mute: #8a857a; /* metadata, counts, captions */ --ob-clay: #a1553a; /* the one warm accent, in small amounts */ --ob-rule: #ddd7ca; /* the thin printed rule */ --ob-rule-soft: #eae5da; /* ---- Three display sizes, and only three ----------------------------- The site had accumulated a dozen intermediate headline sizes — 1.45, 1.6, 1.75, 1.85, 1.95, 2.5, 2.9rem — each reasonable on its own page and collectively mush. Too many steps weaken a black-and-paper scheme, which depends on a small number of confident decisions rather than a gradient. 1 the page masthead: the hero, the Journal 2 what leads a section: section headings, the lead story, the lead book 3 an ordinary heading: a book title, a secondary story, a group name Anything that wants a fourth size wants to be one of these three instead. --------------------------------------------------------------------*/ --ob-display-1: clamp(2.75rem, 6.4vw, 4.5rem); --ob-display-2: clamp(1.9rem, 3.6vw, 2.7rem); --ob-display-3: clamp(1.3rem, 1.9vw, 1.6rem); /* Optical size follows the display step: a big cut for the masthead, a text cut for anything at reading size. */ --ob-opsz-1: 72; --ob-opsz-2: 54; --ob-opsz-3: 36; /* A scale rather than a pile of one-off sizes. */ --ob-step--1: 0.8125rem; --ob-step-0: 1rem; --ob-step-1: 1.1875rem; --ob-step-2: 1.5rem; --ob-step-3: 2rem; --ob-step-4: 2.75rem; --ob-step-5: clamp(2.75rem, 6vw, 4.5rem); /* masthead */ } /* ---- Editorial primitives ------------------------------------------------ */ .ob-ed { font-family: var(--ob-sans); color: var(--ob-ink); } .ob-ed h1, .ob-ed h2, .ob-ed h3, .ob-display { font-family: var(--ob-serif); color: var(--ob-ink); font-weight: 450; letter-spacing: -0.012em; text-wrap: balance; /* Same axis, a size down: display cuts for headings, text cuts for reading. */ font-optical-sizing: auto; font-variation-settings: 'opsz' var(--ob-opsz-2); } /* The masthead. "From Trails to Tales" is a statement, not a heading. */ .ob-masthead { font-family: var(--ob-serif); font-size: var(--ob-display-1); font-weight: 380; line-height: 1.04; letter-spacing: -0.022em; color: var(--ob-ink); margin: 0; text-wrap: balance; /* Newsreader carries an optical-size axis running 6 to 72 that DEFAULTS TO 18 — the text cut. Left alone it renders the 18pt design at 67px, where the serifs are heavy and the stems dark, and the masthead reads as something closer to blackletter than to a literary title. Asking for the 72pt cut thins the hairlines and opens the counters, which is the high contrast the direction called for. */ font-optical-sizing: auto; font-variation-settings: 'opsz' var(--ob-opsz-1); } /* A running-header label: the small caps line above a section, as a printed page carries one. */ .ob-eyebrow { font-family: var(--ob-sans); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-ink-mute); margin: 0 0 10px; } /* Thin rules, the way a book lays out a page. */ .ob-rule { border: 0; border-top: 1px solid var(--ob-rule); margin: 0; } .ob-rule--hair{ border: 0; border-top: 1px solid var(--ob-rule-soft); margin: 0; } /* Most navigation should be a text link with an arrow, not a filled button. Solid buttons are reserved for commercial intent — "View on Amazon UK". */ .ob-link { font-family: var(--ob-sans); font-size: var(--ob-step-0); color: var(--ob-ink); text-decoration: none; border-bottom: 1px solid var(--ob-rule); padding-bottom: 1px; transition: border-color .15s ease, color .15s ease; } .ob-link:hover, .ob-link:focus-visible { color: var(--ob-clay); border-bottom-color: var(--ob-clay); } .ob-link--arrow { border-bottom: 0; } /* margin rather than a space inside the content: a space is a single character width and left the arrow sitting against the last letter. */ .ob-link--arrow::after { content: '\2192'; display: inline-block; margin-left: 0.5em; transition: transform .15s ease; } .ob-link--arrow:hover::after { transform: translateX(3px); } /* Pull quote, for the Journal. */ .ob-pullquote { font-family: var(--ob-serif); font-style: italic; font-size: var(--ob-step-2); line-height: 1.45; color: var(--ob-ink-soft); border-left: 2px solid var(--ob-clay); padding-left: 22px; margin: 30px 0; } /* ---- Covers --------------------------------------------------------------- On a site about books the covers should do the visual work. No coloured panel behind them, no rounded card: the jacket sits on the page with room around it and a shadow just deep enough to lift it off, so six of them read as a shelf rather than as six database rows. -------------------------------------------------------------------------*/ .ob-jacket { display: block; position: relative; aspect-ratio: 2 / 3; background: transparent; } .ob-jacket img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 6px 14px rgba(26, 26, 26, 0.16)) drop-shadow(0 1px 2px rgba(26, 26, 26, 0.12)); transition: transform .2s ease, filter .2s ease; } .ob-jacket:hover img { transform: translateY(-3px); filter: drop-shadow(0 12px 22px rgba(26, 26, 26, 0.2)) drop-shadow(0 2px 3px rgba(26, 26, 26, 0.14)); } /* Metadata sits quietly beneath the jacket. */ .ob-jacket-title { font-family: var(--ob-serif); font-size: var(--ob-step-1); line-height: 1.25; color: var(--ob-ink); margin: 14px 0 2px; font-weight: 500; } .ob-jacket-title a{ color: inherit; text-decoration: none; } .ob-jacket-title a:hover { color: var(--ob-ink); } .ob-jacket-author { font-family: var(--ob-sans); font-size: var(--ob-step--1); color: var(--ob-ink-mute); margin: 0; } /* A shelf: covers aligned on a common baseline, with air between them. */ .ob-shelf { display: grid; gap: 34px 26px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } @media (max-width: 640px) { .ob-shelf { gap: 26px 18px; grid-template-columns: repeat(2, 1fr); } }