/* ========================================================================== SUZO — Type themes Eight typographic directions for evaluating brand tonality, spanning feminine → editorial → Japanese minimal → contemporary → masculine → warm handcraft → Japanese serif → stone-carved roman. Each theme only ever redefines tokens from tokens.css. No component knows a theme exists, and no theme touches colour, spacing or layout — so what you are comparing really is the typography, with every other variable held still. Applied by setting `data-type-theme` on . The unset state is `mincho`, whose webfonts are hard-coded into every page's so the default needs no JS to render correctly. ⚠️ This is an evaluation tool, not a storefront feature. To ship a chosen direction: copy that theme's declarations into :root in tokens.css, hard-code its into each page's , then delete this file and components/type-switcher.js. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · ATELIER — editorial luxury (no webfont) High-contrast didone against a neutral grotesque. The reference register for contemporary fine jewellery: By Pariah, Sophie Bille Brahe. Reads expensive and slightly feminine without committing to either. -------------------------------------------------------------------------- */ [data-type-theme="atelier"] { --font-display: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --display-weight: 400; --display-tracking: -0.02em; --display-line: 1; --display-transform: none; --heading-weight: 400; --heading-line: 1.08; --h1-tracking: -0.015em; --h2-tracking: -0.01em; --tracking-label: 0.16em; } /* -------------------------------------------------------------------------- 2 · ROSEWATER — feminine, romantic Cormorant at weight 300 is the most delicate thing that still holds at display size: extreme stroke contrast, calligraphic detail, hairline serifs. Paired with Jost, a geometric sans whose circular bowls keep it soft rather than technical. Tracking goes POSITIVE — a light didone at 88px closes up on itself, so negative tracking would clot it. Caps get more air than any other theme. Register: bridal, delicate, gift. -------------------------------------------------------------------------- */ [data-type-theme="rosewater"] { --font-display: "Cormorant Garamond", Didot, Georgia, serif; --font-sans: "Jost", "Inter", -apple-system, sans-serif; --display-weight: 300; --display-tracking: 0.005em; --display-line: 1.04; --display-transform: none; --heading-weight: 300; --heading-line: 1.12; --h1-tracking: 0.005em; --h2-tracking: 0.01em; --tracking-label: 0.22em; /* Cormorant runs small on the body — it needs a size up to match. */ --fs-display: clamp(3rem, 1.7rem + 6vw, 6.25rem); --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); } /* -------------------------------------------------------------------------- 3 · KANSO — Japanese minimal (簡素 — "simplicity, elimination of clutter") No serif anywhere. Zen Kaku Gothic New at 300, wide tracking, and a display size deliberately cut down — the Japanese minimal register gets its authority from restraint and air, not scale. Everything is positive-tracked; nothing is tight. Register: Muji, Hirotaka, quiet precision. -------------------------------------------------------------------------- */ [data-type-theme="kanso"] { --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; --display-weight: 300; --display-tracking: 0.06em; --display-line: 1.28; --display-transform: none; --heading-weight: 300; --heading-line: 1.4; --h1-tracking: 0.05em; --h2-tracking: 0.045em; --tracking-label: 0.3em; /* Restraint is the point — the hero headline drops roughly a third. */ --fs-display: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); --fs-h2: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); } /* -------------------------------------------------------------------------- 4 · STUDIO — contemporary, unisex Instrument Serif is a modern high-contrast display face with none of the didone's period baggage, and Space Grotesk gives it a body voice with real character — slightly odd terminals, wide apertures. The current "new luxury" register: reads design-led rather than heritage. The most gender-neutral of the eight. -------------------------------------------------------------------------- */ [data-type-theme="studio"] { --font-display: "Instrument Serif", "Didot", Georgia, serif; --font-sans: "Space Grotesk", "Inter", -apple-system, sans-serif; --display-weight: 400; --display-tracking: -0.012em; --display-line: 0.98; --display-transform: none; --heading-weight: 400; --heading-line: 1.06; --h1-tracking: -0.012em; --h2-tracking: -0.008em; --tracking-label: 0.12em; } /* -------------------------------------------------------------------------- 5 · ANVIL — masculine, industrial Condensed uppercase display, tight and vertical. Oswald compresses to fit more mass per line, which is what men's hardware brands trade on — Miansai, Le Gramme, Bunney. Barlow keeps the body slightly squared to match. This is the only theme that sets `--display-transform`, and it is what does most of the work: uppercase alone shifts the register further than the face does. -------------------------------------------------------------------------- */ [data-type-theme="anvil"] { --font-display: "Oswald", "Archivo Narrow", "Helvetica Neue", sans-serif; --font-sans: "Barlow", "Inter", -apple-system, sans-serif; --display-weight: 500; --display-tracking: 0.005em; --display-line: 0.95; --display-transform: uppercase; --heading-weight: 500; --heading-line: 1.05; --h1-tracking: 0.01em; --h2-tracking: 0.015em; --tracking-label: 0.14em; } /* -------------------------------------------------------------------------- 6 · CRAFT — warm handcraft Fraunces is a soft "wonky" old-style serif — gentle ink traps, warm curves, none of the didone's coldness. Paired with Work Sans, a friendly grotesque. The register for hand-made goods at a considered price: warm, human, design-led without being austere. The closest match to SUZO's own voice. -------------------------------------------------------------------------- */ [data-type-theme="craft"] { --font-display: "Fraunces", "Georgia", serif; --font-sans: "Work Sans", "Inter", -apple-system, sans-serif; --display-weight: 400; --display-tracking: -0.01em; --display-line: 1.02; --display-transform: none; --heading-weight: 400; --heading-line: 1.1; --h1-tracking: -0.008em; --h2-tracking: -0.005em; --tracking-label: 0.14em; } /* -------------------------------------------------------------------------- 7 · MINCHO — Japanese serif (明朝 — the literary register · DEFAULT) Where Kanso is gothic (sans), Mincho is the serif voice of Japanese restraint: Shippori Mincho's brush-rooted strokes read quiet, literary, slightly ceremonial. Positive tracking and a cut-down display, like Kanso — authority from stillness, not scale. Body stays in Zen Kaku for legibility. -------------------------------------------------------------------------- */ :root, [data-type-theme="mincho"] { --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif; --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; --display-weight: 400; --display-tracking: 0.05em; --display-line: 1.3; --display-transform: none; --heading-weight: 400; --heading-line: 1.4; --h1-tracking: 0.045em; --h2-tracking: 0.04em; --tracking-label: 0.26em; /* Same restraint as Kanso — the hero headline drops roughly a third. */ --fs-display: clamp(1.875rem, 1.25rem + 2.8vw, 3.5rem); --fs-h1: clamp(1.5rem, 1.15rem + 1.7vw, 2.375rem); --fs-h2: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); } /* -------------------------------------------------------------------------- 8 · STONE — stone-carved roman Marcellus is a flared roman built on inscriptional capitals — the letterform language of stone carving, which is literally the product. Set in caps with air, it reads lapidary and timeless rather than industrial. Karla keeps the body plain so the display carries all the character. -------------------------------------------------------------------------- */ [data-type-theme="stone"] { --font-display: "Marcellus", "Optima", "Trajan Pro", Georgia, serif; --font-sans: "Karla", "Inter", -apple-system, sans-serif; --display-weight: 400; --display-tracking: 0.06em; --display-line: 1.1; --display-transform: uppercase; --heading-weight: 400; --heading-line: 1.15; --h1-tracking: 0.05em; --h2-tracking: 0.04em; --tracking-label: 0.2em; /* Caps carry more visual mass — the display steps down a size to breathe. */ --fs-display: clamp(2rem, 1.3rem + 3.2vw, 4rem); --fs-h1: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem); } /* ========================================================================== Switcher UI Deliberately opts OUT of the theme it is switching — it uses a fixed system stack, so the control stays legible while the page around it changes. ========================================================================== */ .sd-typeswitch { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 400; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; text-transform: none; letter-spacing: normal; } .sd-typeswitch__toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line-gold); border-radius: var(--radius-pill); background: rgba(14, 12, 11, 0.92); backdrop-filter: blur(10px); color: var(--text); font-size: 13px; line-height: 1; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .sd-typeswitch__toggle:hover { border-color: var(--gold); background: var(--ink-600); } .sd-typeswitch__toggle b { font-family: Georgia, serif; font-size: 15px; font-weight: 400; color: var(--gold); } .sd-typeswitch__current { color: var(--text-muted); } .sd-typeswitch__panel { position: absolute; right: 0; bottom: calc(100% + var(--space-3)); width: min(360px, calc(100vw - var(--space-8))); max-height: min(640px, calc(100vh - var(--space-11))); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-700); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .sd-typeswitch__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; } .sd-typeswitch__head { display: block; padding: var(--space-3) var(--space-3) var(--space-2); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .sd-typeswitch__opt { display: block; width: 100%; padding: var(--space-3); border-radius: var(--radius-sm); text-align: left; color: var(--text); transition: background var(--dur-fast) var(--ease); } .sd-typeswitch__opt:hover { background: var(--ink-600); } .sd-typeswitch__opt[aria-pressed="true"] { background: var(--ink-500); box-shadow: inset 2px 0 0 var(--gold); } /* Each row previews itself in the face it will apply. */ .sd-typeswitch__name { display: block; font-size: 21px; line-height: 1.2; } .sd-typeswitch__desc { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--text-muted); } .sd-typeswitch__opt[data-theme="atelier"] .sd-typeswitch__name { font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; } .sd-typeswitch__opt[data-theme="rosewater"] .sd-typeswitch__name { font-family: "Cormorant Garamond", Didot, Georgia, serif; font-weight: 300; font-size: 24px; } .sd-typeswitch__opt[data-theme="kanso"] .sd-typeswitch__name { font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-weight: 300; font-size: 18px; letter-spacing: 0.12em; } .sd-typeswitch__opt[data-theme="studio"] .sd-typeswitch__name { font-family: "Instrument Serif", Georgia, serif; } .sd-typeswitch__opt[data-theme="anvil"] .sd-typeswitch__name { font-family: "Oswald", "Archivo Narrow", sans-serif; font-weight: 500; font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; } .sd-typeswitch__opt[data-theme="craft"] .sd-typeswitch__name { font-family: "Fraunces", Georgia, serif; } .sd-typeswitch__opt[data-theme="mincho"] .sd-typeswitch__name { font-family: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif; font-size: 18px; letter-spacing: 0.1em; } .sd-typeswitch__opt[data-theme="stone"] .sd-typeswitch__name { font-family: "Marcellus", "Optima", Georgia, serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.08em; } /* --- Size scale ----------------------------------------------------------- */ .sd-typeswitch__sizes { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); } .sd-typeswitch__sizehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .sd-typeswitch__mini { padding: var(--space-2) var(--space-3); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); transition: color var(--dur-fast) var(--ease); } .sd-typeswitch__mini:hover { color: var(--gold); } .sd-typeswitch__row { display: grid; grid-template-columns: 52px 1fr 54px; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-3); } .sd-typeswitch__rowlabel { font-size: 11px; color: var(--text-muted); cursor: default; } /* A changed row is marked, so you can tell a value you set from one that is simply the theme's default at this viewport. */ .sd-typeswitch__row[data-overridden] .sd-typeswitch__rowlabel { color: var(--gold); } .sd-typeswitch__range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; } .sd-typeswitch__range::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); } .sd-typeswitch__range::-moz-range-track { height: 1px; background: var(--line-strong); } .sd-typeswitch__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--cream); transition: background var(--dur-fast) var(--ease); } .sd-typeswitch__range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--cream); } .sd-typeswitch__range:hover::-webkit-slider-thumb, .sd-typeswitch__range:active::-webkit-slider-thumb { background: var(--gold); } .sd-typeswitch__range:hover::-moz-range-thumb { background: var(--gold); } .sd-typeswitch__num { width: 100%; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ink-600); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; } .sd-typeswitch__num:focus { outline: none; border-color: var(--gold); } .sd-typeswitch__copy { display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .sd-typeswitch__copy:hover { color: var(--gold); border-color: var(--line-gold); } @media (max-width: 640px) { .sd-typeswitch { right: var(--space-4); bottom: var(--space-4); } }