/* Hallmark · genre: modern-minimal · nav: N9 edge-aligned masthead · footer: Ft4 dense colophon · design-system: design.md · designed-as-app * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 * * Reset, typography, chrome, and controls. Loaded after tokens.css and before * pages.css; shared byte-identical by all 12 locale pages, 404.html, and the * root language notice. * * Every colour and font resolves through a token name — nothing in this file * restates a brand value (gate 48). Layout is written in logical properties * throughout, which is the whole reason dir="rtl" plus a font binding is all * the two RTL locales need. */ /* ==================== Reset ==================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* gate 34: clip on BOTH html and body, never hidden */ overflow-x: clip; /* clip on one axis makes the other compute to auto, so is the scroll * box — the drawer lock has to land here, and the gutter has to be reserved * up front or locking it shifts the page by a scrollbar width. */ scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-block-start: 6rem; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--accent-dark) var(--bg); } body { overflow-x: clip; min-height: 100vh; background-color: var(--bg); color: var(--text); font-family: var(--font-locale); font-size: var(--text-md); font-weight: 400; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; } img, svg, picture { display: block; max-width: 100%; } ul { list-style: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ==================== Focus — instant, never transitioned ==================== */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-input); } /* Only remove the ring for pointer users who never asked for it. */ :focus:not(:focus-visible) { outline: none; } ::selection { background-color: var(--accent); color: var(--accent-ink); } /* ==================== Scrollbar ==================== */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--accent-dark); border: 2px solid var(--bg); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ==================== Skip link ==================== */ .skip-link { position: absolute; inset-block-start: var(--space-2xs); inset-inline-start: var(--space-2xs); z-index: var(--z-loader); padding: var(--space-2xs) var(--space-sm); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-input); font-weight: 700; text-decoration: none; transform: translateY(-250%); } .skip-link:focus-visible { transform: translateY(0); } /* ==================== Typography ==================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; /* headers are roman — gate 38a */ font-weight: 700; line-height: 1.06; letter-spacing: var(--track-display); /* gate 51: long words and locale compounds break instead of overflowing */ overflow-wrap: anywhere; min-width: 0; text-wrap: balance; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.015em; } h4 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.01em; } p { max-width: var(--measure); text-wrap: pretty; } .lede { font-size: var(--text-lg); line-height: 1.55; color: var(--text-dim); } .dim { color: var(--text-dim); } .accent { color: var(--accent-text); } .outlier { font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-outlier); text-transform: uppercase; color: var(--text-dim); } /* ==================== Layout shell ==================== */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } main { display: block; } /* ==================== Controls · primary CTA ==================== * One-line label always (gate 49). --accent-ink on --accent is the only * AA-clearing pairing in this palette. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-md); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius-input); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .btn:hover, .btn.is-hover { background: var(--accent-glow); border-color: var(--accent-glow); } .btn:active, .btn.is-active { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text); } .btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-3); border-color: var(--hairline); color: var(--text-dim); cursor: not-allowed; } .btn[data-state="loading"] { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text); cursor: progress; } .btn[data-state="error"] { background: var(--danger); border-color: var(--danger); color: var(--bg); } .btn[data-state="success"] { background: var(--success); border-color: var(--success); color: var(--bg); } /* ==================== Controls · secondary link ==================== * Text with a rule under it. No outlined pills anywhere in this system. */ .link { display: inline-block; padding-block-end: 2px; border-block-end: 1px solid var(--hairline-strong); color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .link:hover, .link.is-hover { color: var(--accent-text); border-block-end-color: var(--accent); } .link:active { color: var(--accent); } /* ==================== N9 · Edge-aligned minimal masthead ==================== * Wordmark hard to the inline-start edge, four text links and the locale * disclosure hard to the inline-end edge. No filled CTA in the bar — the call * to action belongs to the page, not the chrome. */ .masthead { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--chrome); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid var(--hairline); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.25rem; } .wordmark { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--text); flex-shrink: 0; } .wordmark img { width: 2.5rem; height: 2.5rem; transition: opacity var(--dur-short) var(--ease-out); } .wordmark:hover img { opacity: 0.8; } .wordmark-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; } .masthead-end { display: flex; align-items: center; gap: var(--space-md); } .nav { display: flex; align-items: center; gap: var(--space-md); } .nav a { position: relative; padding-block: var(--space-3xs); color: var(--text-dim); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; /* gate 49 */ transition: color var(--dur-short) var(--ease-out); } .nav a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px; background: var(--accent); scale: 0 1; /* transform-origin takes no logical keywords — physical value plus an RTL flip. */ transform-origin: 0 50%; transition: scale var(--dur-short) var(--ease-out); } [dir="rtl"] .nav a::after { transform-origin: 100% 50%; } .nav a:hover { color: var(--text); } .nav a:hover::after { scale: 1 1; } .nav a[aria-current="page"] { color: var(--text); } .nav a[aria-current="page"]::after { scale: 1 1; height: 2px; } /* ==================== Locale disclosure ==================== */ .locale { position: relative; flex-shrink: 0; } .locale-btn { display: flex; align-items: center; gap: var(--space-3xs); padding: var(--space-3xs) var(--space-2xs); border: 1px solid var(--hairline); border-radius: var(--radius-input); color: var(--text-dim); font-size: var(--text-xs); font-weight: 600; /* The label is a two-letter Latin code sitting next to an 18px flag. It has * to align to the flag, not to the body leading — the RTL locales run a * 1.85 line-height and a face with Arabic-script ascenders, which pushed the * code visibly off-centre. line-height: 1 makes the text box hug the glyphs * so align-items has something honest to centre. */ line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .locale-btn span { display: block; line-height: 1; } .locale-btn:hover { border-color: var(--hairline-strong); color: var(--text); } .locale-btn img { width: 1.125rem; height: 1.125rem; border-radius: 2px; } .locale-btn svg { width: 0.625rem; height: 0.625rem; transition: rotate var(--dur-short) var(--ease-out); } .locale-btn[aria-expanded="true"] { border-color: var(--accent-hairline); color: var(--text); } .locale-btn[aria-expanded="true"] svg { rotate: 180deg; } .locale-menu { position: absolute; inset-block-start: calc(100% + var(--space-2xs)); inset-inline-end: 0; z-index: var(--z-overlay); display: none; flex-direction: column; min-width: 11rem; padding: var(--space-3xs); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card); } .locale-menu[data-open="true"] { display: flex; } .locale-menu a { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); color: var(--text-dim); font-size: var(--text-sm); line-height: 1.3; /* the row is one line — leading only misaligns the flag */ text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .locale-menu a:hover { background: var(--tint-hover); color: var(--text); } .locale-menu a[aria-current="true"] { color: var(--accent-text); background: var(--accent-wash); } .locale-menu img { width: 1.125rem; height: 1.125rem; border-radius: 2px; } /* ==================== Drawer toggle ==================== */ .drawer-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; padding: var(--space-2xs); flex-shrink: 0; } .drawer-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: translate var(--dur-short) var(--ease-out), rotate var(--dur-short) var(--ease-out), opacity var(--dur-fast) linear; } .drawer-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; } .drawer-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .drawer-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; } /* ==================== Drawer ==================== */ .scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); } .scrim[data-open="true"] { opacity: 1; pointer-events: auto; } .drawer { --drawer-shift: 101%; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; gap: var(--space-3xs); width: min(20rem, 84vw); padding: calc(var(--space-3xl) + var(--space-2xs)) var(--space-md) var(--space-lg); background: var(--card); border-inline-start: 1px solid var(--hairline); translate: var(--drawer-shift) 0; visibility: hidden; transition: translate var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); } [dir="rtl"] .drawer { --drawer-shift: -101%; } .drawer[data-open="true"] { translate: 0 0; visibility: visible; transition: translate var(--dur-long) var(--ease-out), visibility 0s linear 0s; } /* The drawer sits above the masthead, so the hamburger that opened it is * underneath the panel and cannot be clicked again. The panel carries its own * dismiss — sitting in the top padding, at the inline-end, roughly where the * hamburger was. Scrim-click and Escape still work; this is the visible one. */ .drawer-close { position: absolute; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--hairline); border-radius: var(--radius-input); color: var(--text-dim); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .drawer-close:hover { border-color: var(--hairline-strong); color: var(--text); } .drawer-close svg { width: 0.875rem; height: 0.875rem; } .drawer a { padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-input); color: var(--text); font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .drawer a:hover { background: var(--tint-hover); color: var(--text); } .drawer a[aria-current="page"] { color: var(--accent-text); background: var(--accent-wash); } .drawer .btn { margin-block-start: auto; justify-content: center; } /* ==================== Ft4 · Dense colophon ==================== * A book colophon, not a sitemap. Label / value rows on hairlines, then one * closing line. No four link columns, no social icon row, no tiny copyright * tail floating under a grey slab. */ .colophon { margin-block-start: var(--space-3xl); border-block-start: 1px solid var(--hairline); background: var(--card); } .colophon-inner { padding-block: var(--space-xl) var(--space-md); } .colophon-rows { display: grid; gap: 0; } .colophon-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-block-start: 1px solid var(--hairline); font-size: var(--text-sm); } .colophon-row:first-child { border-block-start: none; } .colophon-row dt { font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-outlier); text-transform: uppercase; color: var(--text); } .colophon-row dd { color: var(--text-dim); } .colophon-row a { color: var(--text); text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; white-space: nowrap; /* gate 49 — the row wraps between links, never inside one */ transition: text-decoration-color var(--dur-short) var(--ease-out); } .colophon-row a:hover { text-decoration-color: var(--accent); } .colophon-close { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: 1px solid var(--hairline); color: var(--text-dim); font-size: var(--text-xs); } /* ==================== Loader ==================== * Shown only when JS is running and reduced-motion is off. It is added by * script and removed by script; nothing in CSS ever hides page content, so a * failed script or a no-JS reader gets the whole page immediately. */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; background: var(--bg); } .loader-mark { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; } .loader-rule { width: min(15rem, 50vw); height: 2px; margin-block-start: var(--space-sm); background: var(--hairline); overflow: hidden; } /* The rule is driven by GSAP's scaleX, which writes to `transform` — so the * closed state has to live on `transform` too. The CSS `scale` property is a * separate slot and would multiply against the tween instead of yielding to it. */ .loader-rule span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); } [dir="rtl"] .loader-rule span { transform-origin: 100% 50%; } /* ==================== Utilities ==================== */ /* Set on while the drawer is open. Only the block axis is locked, so the * inline-axis clip from gate 34 survives. */ .no-scroll { overflow-y: hidden; } /* ==================== Responsive · drawer takeover at 900px ==================== * Raised from the old 768px breakpoint: between 769 and 900 the five nav links * plus the locale button wrapped onto a second line. The drawer now takes over * before that can happen. */ @media (max-width: 900px) { .nav { display: none; } .drawer-toggle { display: flex; } } @media (max-width: 768px) { html { scroll-padding-block-start: 5rem; } .masthead-inner { min-height: 3.75rem; } .wordmark img { width: 2.125rem; height: 2.125rem; } /* gate 52 — label / value stack instead of a squeezed 9rem column */ .colophon-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } .colophon-inner { padding-block: var(--space-lg) var(--space-md); } } @media (max-width: 420px) { .wordmark-text { font-size: var(--text-base); } .locale-btn span { display: none; } .drawer { width: min(18rem, 88vw); } } /* 320px floor — the masthead is the only row that can run out of room. */ @media (max-width: 340px) { .masthead-end { gap: var(--space-2xs); } .wordmark img { width: 1.875rem; height: 1.875rem; } } /* ==================== Reduced motion ==================== * The loader is skipped in JS, reveals resolve instantly, autoplay never * starts. Here we only flatten what CSS owns. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* The drawer must still leave the viewport, just without the slide. */ .drawer { transition: none; } }