/* ===================================================================== OTTO JAKOB — Design System · colors_and_type.css Quiet editorial minimalism for museum-grade art jewelry. Gallery white + near-black ink · high-contrast Didone + grotesque. --------------------------------------------------------------------- FONTS: · Bodoni Antiqua → the client's licensed serif — display, wordmark, piece names, descriptions, biography. Local woff2 files in static/fonts (converted from the OTFs in static/fonts/Bodoni). Replaces the former Bodoni Moda Google-font stand-in everywhere. · Archivo → neutral grotesque (UI, labels, body, captions). ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); /* --------------------------------------------------------------------- Bodoni Antiqua — the client's licensed cut (local files in static/fonts, converted from the OTFs in static/fonts/Bodoni). Used site-wide for all serif type: the wordmark (Regular), display headings, piece NAMES (small-caps variant), piece DESCRIPTIONS, and the BIOGRAPHY text. URLs are relative to this file (served at /static/css/). --------------------------------------------------------------------- */ @font-face { font-family: 'Bodoni Antiqua'; src: url('../fonts/bodoni-ant-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Bodoni Antiqua'; src: url('../fonts/bodoni-ant-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Bodoni Antiqua'; src: url('../fonts/bodoni-ant-demibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Bodoni Antiqua SC'; /* small caps — for piece names */ src: url('../fonts/bodoni-ant-sc-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------------- COLOR — base palette Pure gallery white & near-black ink, warmed by a faint stone undertone so large white fields read as paper, not screen. --------------------------------------------------------------- */ --paper: #FFFFFF; /* true white — image mats, cards */ --paper-warm: #FAF9F6; /* page ground — warm gallery paper */ --paper-stone: #F2F0EA; /* recessed wells, hover fills */ --ink: #131210; /* near-black ink — primary text & rules */ --ink-soft: #3A3733; /* secondary text */ --ink-mute: #79746C; /* captions, meta, placeholder */ --ink-faint: #ADA89E; /* disabled, hairline labels */ --line: #E4E1D9; /* hairline border on paper */ --line-strong: #CFCABE; /* emphasized hairline */ /* Gallery-dark — for moody full-bleed hero moments (real brand mode) */ --noir: #0C0B0A; /* deepest ground */ --noir-soft: #16140F; /* dark panel */ --on-noir: #F4F1E9; /* text on noir */ --on-noir-mute: #9A938414; /* placeholder slot on noir (low alpha) */ /* Patina gold — the wordmark accent. RESERVED & sparse: active links, focus, the wordmark, a single hairline flourish. Never a fill. */ --gold: #9A8763; /* muted antique gold */ --gold-deep: #7E6C49; /* gold on white (AA-safe for small text) */ --gold-light: #C8B894; /* gold on noir */ /* Semantic surface roles */ --bg: var(--paper-warm); --surface: var(--paper); --surface-sunk: var(--paper-stone); --border: var(--line); --focus-ring: var(--gold); /* --------------------------------------------------------------- TYPE — families --------------------------------------------------------------- */ /* Serif = the client's Bodoni Antiqua (Regular at weight 400 → the wordmark). Didot/Georgia are only load-failure fallbacks. */ --serif: 'Bodoni Antiqua', 'Didot', 'GFS Didot', Georgia, serif; /* @kind font */ --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @kind font */ /* Bodoni Antiqua — piece descriptions + biography (--antiqua), and piece names in small caps (--antiqua-sc). */ --antiqua: 'Bodoni Antiqua', Georgia, serif; /* @kind font */ --antiqua-sc: 'Bodoni Antiqua SC', 'Bodoni Antiqua', Georgia, serif; /* @kind font */ /* Fluid display scale — editorial, set tight & large. clamp(min, vw, max) so heroes breathe on wide gallery screens. */ --fs-display: clamp(3.5rem, 8vw, 8.5rem); /* @kind font */ /* hero word */ --fs-h1: clamp(2.5rem, 5vw, 4.5rem); /* @kind font */ /* page title */ --fs-h2: clamp(1.75rem, 3vw, 2.75rem); /* @kind font */ /* section */ --fs-h3: clamp(1.25rem, 2vw, 1.625rem); /* @kind font */ /* piece title */ --fs-lead: 1.25rem; /* intro para @kind font */ --fs-body: 1rem; /* 16px body @kind font */ --fs-sm: 0.8125rem; /* 13px caption @kind font */ --fs-label: 0.6875rem; /* 11px label @kind font */ --fs-micro: 0.625rem; /* 10px ref @kind font */ /* Weights */ --w-light: 300; /* @kind font */ --w-reg: 400; /* @kind font */ --w-med: 500; /* @kind font */ --w-semi: 600; /* @kind font */ /* Tracking — the editorial signature is wide-tracked tiny sans labels */ --track-label: 0.22em; /* @kind font */ --track-nav: 0.16em; /* @kind font */ --track-body: 0.005em; /* @kind font */ --track-tight: -0.01em; /* @kind font */ --track-display:-0.02em; /* @kind font */ /* Line heights */ --lh-display: 0.98; /* @kind font */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.32; /* @kind font */ --lh-body: 1.62; /* @kind font */ /* --------------------------------------------------------------- SPACING — base-8 with an editorial top end for gallery margins --------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 224px; --page-margin: clamp(20px, 6vw, 120px); /* generous gallery gutter @kind spacing */ --maxw: 1600px; /* @kind spacing */ /* --------------------------------------------------------------- RADII — sharp. Luxury editorial keeps corners square. --------------------------------------------------------------- */ --r-none: 0px; --r-xs: 1px; --r-sm: 2px; /* the most we ever round — chips, inputs */ --r-pill: 999px; /* rare: filter pills only */ /* --------------------------------------------------------------- ELEVATION — near-flat. Whitespace & hairlines do the work. Shadows reserved for true overlays (menus, search panel). --------------------------------------------------------------- */ --shadow-none: none; --shadow-overlay: 0 24px 60px -24px rgba(19,18,16,0.22), 0 2px 6px -2px rgba(19,18,16,0.10); --shadow-noir-overlay: 0 30px 80px -20px rgba(0,0,0,0.65); /* --------------------------------------------------------------- MOTION — slow, refined, no bounce. Long fades & gentle reveals. --------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* gentle ease-out */ --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --dur-fast: 220ms; /* @kind other */ --dur: 420ms; /* @kind other */ --dur-slow: 720ms; /* @kind other */ /* image fade-ins / hero reveals */ } /* ===================================================================== SEMANTIC ELEMENT STYLES — apply these classes or mirror in components ===================================================================== */ .oj-display { font-family: var(--serif); font-weight: var(--w-reg); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--ink); } .oj-h1 { font-family: var(--serif); font-weight: var(--w-reg); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--ink); } .oj-h2 { font-family: var(--serif); font-weight: var(--w-reg); font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--ink); } .oj-h3 { font-family: var(--serif); font-weight: var(--w-reg); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); } /* Italic Didone — used for emphasis & the occasional gallery caption */ .oj-italic { font-style: italic; } .oj-lead { font-family: var(--sans); font-weight: var(--w-light); font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink-soft); } .oj-body { font-family: var(--sans); font-weight: var(--w-reg); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--track-body); color: var(--ink-soft); } .oj-sm { font-family: var(--sans); font-weight: var(--w-reg); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink-mute); } /* The editorial signature: tiny, wide-tracked, uppercase sans label */ .oj-label { font-family: var(--sans); font-weight: var(--w-med); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); } .oj-nav { font-family: var(--sans); font-weight: var(--w-med); font-size: var(--fs-sm); letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ink); } /* Catalog reference numbers — monospaced figures via tabular nums */ .oj-ref { font-family: var(--sans); font-weight: var(--w-reg); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-faint); } /* The wordmark — lowercase Didone, gently tracked */ .oj-wordmark { font-family: var(--serif); font-weight: var(--w-reg); font-style: normal; letter-spacing: 0.02em; color: var(--ink); text-transform: lowercase; } /* Links — underline appears on hover via patina gold */ .oj-link { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--gold-deep), var(--gold-deep)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease); } .oj-link:hover { background-size: 100% 1px; }