/* ============================================================ TAU × Vessel — brand layer ------------------------------------------------------------ Loaded last in (see layout/theme.liquid patch in INSTALL.md) so it overrides Vessel's generated variables. It does three things: 1. Swaps in TAU's typefaces (Newsreader / Hanken Grotesk / IBM Plex Mono) over whatever font handles are set in the theme editor. 2. Carries the small editorial details Vessel settings can't express — small-caps eyebrows, mono "elegant data", hairline rhythm, soft tactile radii. 3. Styles the custom TAU sections (tau-*). Everything keys off Vessel's own custom properties (--color-foreground, --color-border, --padding-*, …) so it inherits each section's color scheme automatically. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---- 1. Typefaces ------------------------------------------------ */ :root { --font-heading--family: 'Newsreader', Georgia, 'Times New Roman', serif !important; --font-accent--family: 'Newsreader', Georgia, serif !important; --font-body--family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important; --font-subheading--family: 'Hanken Grotesk', system-ui, sans-serif !important; /* TAU-specific families used by the custom sections */ --tau-serif: 'Newsreader', Georgia, serif; --tau-sans: 'Hanken Grotesk', system-ui, sans-serif; --tau-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* TAU brand seeds (for the few places that need clay/gold directly, independent of the active color scheme) */ --tau-clay: #be6b46; --tau-clay-deep: #a85a3d; --tau-gold: #c2a450; --tau-coffee: #5a4137; --tau-espresso: #221913; --tau-parchment: #f6efe1; } /* Headings get the serif's quiet, tight tracking */ h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.02em; } /* Newsreader reads large; nudge optical sizing on display heads */ h1 { font-optical-sizing: auto; } /* ---- 2. Editorial details --------------------------------------- */ /* Small-caps eyebrow / kicker / metadata */ .tau-eyebrow { font-family: var(--tau-sans); font-weight: 600; font-size: var(--font-size--2xs, 0.75rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tau-clay); margin: 0; } /* Elegant data — altitudes, lot codes, roast dates: mono, tabular */ .tau-data { font-family: var(--tau-mono); font-feature-settings: 'tnum' 1; letter-spacing: 0.01em; } /* A thin gold rule TAU uses to mark freshness / quiet emphasis */ .tau-rule-gold { height: 1px; width: 48px; background: var(--tau-gold); border: 0; margin: 0; } /* ::selection — soft gold wash */ ::selection { background: #f0e6cb; color: var(--tau-espresso); } /* ============================================================ 3. Custom section styles ============================================================ */ /* ---- Label Essentials ------------------------------------- */ .tau-essentials { display: grid; gap: var(--gap-xl, 1.25rem) var(--gap-2xl, 2rem); width: 100%; } .tau-essentials[data-columns='2'] { grid-template-columns: 1fr 1fr; } .tau-essentials[data-columns='1'] { grid-template-columns: 1fr; } .tau-essential { display: grid; grid-template-columns: 1.75rem 1fr; align-items: start; gap: 0.25rem 0.85rem; padding-block: var(--padding-sm, 0.7rem); border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-15)); } .tau-essential__icon { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--tau-clay); margin-block-start: 0.15rem; } .tau-essential__icon svg { width: 100%; height: 100%; display: block; } .tau-essential__term { font-family: var(--tau-sans); font-weight: 600; font-size: var(--font-size--2xs, 0.75rem); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); margin: 0; } .tau-essential__value { font-family: var(--tau-serif); font-size: var(--font-size--lg, 1.125rem); line-height: 1.35; color: var(--color-foreground-heading); margin: 0; text-wrap: pretty; } .tau-essential__value--mono { font-family: var(--tau-mono); font-size: var(--font-size--md, 1rem); letter-spacing: 0.01em; } @media (max-width: 749px) { .tau-essentials[data-columns='2'] { grid-template-columns: 1fr; } } /* ---- Freshness — "Dawn of the Roast" ---------------------- */ .tau-freshness { display: grid; gap: var(--gap-2xl, 2rem); text-align: center; justify-items: center; } .tau-freshness__lede { font-family: var(--tau-serif); font-style: italic; font-size: var(--font-size--xl, 1.25rem); line-height: 1.4; max-width: 34ch; color: var(--color-foreground); margin: 0; } .tau-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; width: min(100%, 640px); counter-reset: tau-step; } .tau-timeline__node { position: relative; display: grid; justify-items: center; gap: 0.5rem; padding-inline: 0.5rem; } /* connector line between nodes */ .tau-timeline__node::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 1px; background: rgb(var(--color-foreground-rgb) / var(--opacity-30)); } .tau-timeline__node:first-child::before { display: none; } .tau-timeline__dot { width: 15px; height: 15px; border-radius: 0; background: var(--color-background); border: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-40-60)); position: relative; z-index: 1; } .tau-timeline__node--active .tau-timeline__dot { background: var(--tau-gold); border-color: var(--tau-gold); box-shadow: 0 0 0 4px rgb(194 164 80 / 0.22); } .tau-timeline__label { font-family: var(--tau-sans); font-weight: 600; font-size: var(--font-size--3xs, 0.625rem); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); margin: 0; } .tau-timeline__date { font-family: var(--tau-mono); font-size: var(--font-size--md, 1rem); color: var(--color-foreground-heading); margin: 0; } .tau-freshness__note { font-family: var(--tau-sans); font-size: var(--font-size--sm, 0.875rem); color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); margin: 0; } /* ---- Origin story ----------------------------------------- */ .tau-origin { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap-3xl, 3rem); align-items: center; } .tau-origin--media-left { direction: rtl; } .tau-origin--media-left > * { direction: ltr; } .tau-origin__copy { display: grid; gap: var(--gap-lg, 1rem); align-content: center; } .tau-origin__title { font-family: var(--tau-serif); font-weight: 400; font-size: var(--font-size--h2, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; max-width: 18ch; text-wrap: balance; } .tau-origin__lede { font-family: var(--tau-serif); font-style: italic; font-size: var(--font-size--lg, 1.125rem); line-height: 1.5; color: var(--color-foreground); margin: 0; max-width: 46ch; } .tau-origin__body { font-family: var(--tau-sans); font-size: var(--font-size--md, 1rem); line-height: 1.7; color: rgb(var(--color-foreground-rgb) / var(--opacity-85)); max-width: 60ch; } .tau-origin__body > * + * { margin-block-start: 1em; } .tau-origin__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--style-border-radius-lg, 0); overflow: hidden; background: radial-gradient(120% 120% at 30% 10%, #decbaa 0%, #c9b896 40%, #5a4137 130%); } .tau-origin__media img { width: 100%; height: 100%; object-fit: cover; } .tau-origin__media-meta { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; background: rgb(34 25 19 / 0.55); border-radius: var(--style-border-radius-pills, 0); font-family: var(--tau-mono); font-size: var(--font-size--2xs, 0.75rem); color: #f6efe1; } @media (max-width: 749px) { .tau-origin { grid-template-columns: 1fr; } .tau-origin--media-left { direction: ltr; } } /* TAU essentials/data live calmly on dark schemes too — the vars (--color-foreground-rgb etc.) flip automatically. The clay accent is replaced by gold on dark surfaces for legibility. */ .color-scheme-4 .tau-eyebrow, .color-scheme-4 .tau-essential__icon, [data-tau-dark] .tau-eyebrow, [data-tau-dark] .tau-essential__icon { color: var(--tau-gold); }