/* ========================================================================== base.css — Apex Holding PURPOSE: Reset, element defaults, and the handful of layout primitives that every page and every world is built out of. Nothing here is a "component" — this file makes raw HTML behave, then hands over to components.css. Owns: box model, element normalisation, typographic defaults, links, lists, tables, forms, media, the global :focus-visible ring, selection + scrollbar, .sr-only / .skip-link / .visually-hidden-focusable, the .placeholder tag, and the primitives .section / .section__inner / .stack / .cluster / .grid-auto / .prose. Loaded SECOND, after tokens.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET Small, modern, opinionated. No normalize.css, no dead rules for engines nobody runs. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Strip default margins; vertical rhythm is set deliberately below and by the .stack primitive, never inherited by accident. */ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, fieldset, legend, pre { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Anchor jumps clear the fixed header instead of hiding under it. */ scroll-padding-top: calc(var(--header-h) + var(--space-5)); background-color: var(--w-base); color: var(--w-text); /* Worlds paint full-bleed atmosphere; never let a stray decorative element widen the document and produce a horizontal scrollbar. Declared on rather than : body overflow propagates to the viewport only when is `visible`, which makes the body version behave differently depending on rules elsewhere. This is the predictable place for it. */ overflow-x: clip; } body { min-height: 100svh; background-color: var(--w-base); color: var(--w-text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Scroll lock, set by core.js lockScroll() / unlockScroll(). Declared here because it is a document-level behaviour, not a component's business. */ body.is-locked { overflow: hidden; /* --scrollbar-gap is written by core.js so the page does not jump. */ padding-inline-end: var(--scrollbar-gap, 0px); } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY DEFAULTS Display face for headings, body face for prose. Sizes come off the fluid scale so nothing is hard-coded in px anywhere downstream. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--w-text); text-wrap: balance; } h1 { font-size: var(--step-5); line-height: var(--lh-tight); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } h4 { font-size: var(--step-2); } h5 { font-size: var(--step-1); } h6 { font-size: var(--step-0); font-family: var(--font-utility); letter-spacing: var(--track-wide); text-transform: uppercase; } p { text-wrap: pretty; max-width: 72ch; } /* Long words, URLs and Arabic/Latin mixes must never blow out a column. */ p, li, dd, dt, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } small { font-size: var(--step--1); color: var(--w-text-dim); } strong, b { font-weight: 600; } em, i { font-style: italic; } blockquote { font-family: var(--font-display); font-size: var(--step-2); line-height: var(--lh-snug); color: var(--w-text); padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--w-accent); } code, kbd, samp, pre { font-family: var(--font-utility); font-size: 0.9em; } code { padding: 0.1em 0.35em; border-radius: var(--radius-sm); background-color: var(--w-surface); color: var(--w-accent-soft); } pre { overflow-x: auto; padding: var(--space-5); border: 1px solid var(--w-line); border-radius: var(--radius-md); background-color: var(--w-surface); } pre code { padding: 0; background: none; color: inherit; } hr { height: 1px; margin-block: var(--space-8); border: 0; background-color: var(--w-line); } abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; } /* -------------------------------------------------------------------------- 3. LINKS Prose links use the LIFTED accent — the base accent falls under 4.5:1 on some world grounds at body size. Structural links (nav, cards, buttons) opt out of these defaults via their own component class. -------------------------------------------------------------------------- */ a { color: var(--w-accent-soft); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--w-accent-soft) 45%, transparent); transition: color var(--dur-micro) var(--ease-out-soft), text-decoration-color var(--dur-micro) var(--ease-out-soft); } a:hover { color: var(--w-accent); text-decoration-color: currentColor; } /* Any link carrying a component class manages its own colour + decoration. Wrapped in :where() so this rule contributes ZERO specificity — a plain .btn or .card__title selector must be able to set colour without having to out-specify the reset. Every attribute-based reset below does the same. */ a:where([class]) { color: inherit; text-decoration: none; } /* -------------------------------------------------------------------------- 4. LISTS, TABLES, MEDIA -------------------------------------------------------------------------- */ ul, ol { padding-inline-start: var(--space-5); } /* A list with a class is a UI construct, not prose. Strip the furniture. */ ul:where([class]), ol:where([class]) { padding-inline-start: 0; list-style: none; } /* Prose lists get breathing room; classed lists set their own gap. */ :where(ul:not([class]), ol:not([class])) > li + li { margin-block-start: var(--space-2); } dl { margin: 0; } dt { font-weight: 600; } dd { margin-inline-start: 0; color: var(--w-text-dim); } table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } caption { padding-block-end: var(--space-3); color: var(--w-text-dim); text-align: start; } th, td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--w-line); text-align: start; vertical-align: top; } th { font-family: var(--font-utility); font-weight: 400; font-size: var(--step--1); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--w-text-dim); } /* Wide tables scroll inside themselves rather than widening the page. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } img, svg, video, canvas, picture, iframe { display: block; max-width: 100%; } img, video { height: auto; } /* Every in-flow image carries width/height attributes or an aspect-ratio box, so this is the safety net that keeps CLS at zero either way. */ img[width][height] { height: auto; } /* Icons inherit their colour from text. Hand-authored artwork that declares its own fill (gradients, ridgelines, bottle silhouettes) is untouched — a fill attribute on the SVG or on its shapes always wins over this. */ svg:where(:not([fill])) { fill: currentColor; } /* A .media-frame is drawn as a dashed PENDING slot by components.css. The moment a real photograph is placed inside it, the frame has nothing left to promise: the dashes, the pending wash and the inset all retire so the photograph is the whole of the element. Higher specificity than the base .media-frame rule, so load order between the two files is irrelevant. Browsers without :has() simply keep the dashed frame — a cosmetic border around a real image, never a broken layout. */ .media-frame:has(> img) { border-style: none; background-image: none; padding: 0; } figure { margin: 0; } figcaption { margin-block-start: var(--space-3); font-family: var(--font-utility); font-size: var(--step--1); color: var(--w-text-dim); } /* -------------------------------------------------------------------------- 5. FORM NORMALISATION Component-level field styling lives in components.css; this is only the normalisation every control needs regardless of skin. -------------------------------------------------------------------------- */ input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; } button { cursor: pointer; -webkit-appearance: none; appearance: none; } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.5; } textarea { resize: vertical; min-height: 8rem; } fieldset { padding: 0; border: 0; } legend { padding: 0; } ::placeholder { color: var(--w-text-dim); opacity: 0.7; } /* Search + number spinners we never want. */ ::-webkit-search-decoration, ::-webkit-outer-spin-button, ::-webkit-inner-spin-button { -webkit-appearance: none; } /* -------------------------------------------------------------------------- 6. FOCUS — the single global ring Applied once, here, to everything focusable. No component may remove it. Browsers follow the element's own border-radius automatically. -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; } /* Suppress the legacy always-on ring only where :focus-visible has already taken responsibility for showing one. */ :focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- 7. SELECTION + SCROLLBAR -------------------------------------------------------------------------- */ ::selection { background-color: var(--w-accent); color: var(--w-base); text-shadow: none; } html { scrollbar-width: thin; scrollbar-color: var(--w-accent-2) var(--w-base-2); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background-color: var(--w-base-2); } ::-webkit-scrollbar-thumb { border: 3px solid var(--w-base-2); border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--w-text-dim) 55%, transparent); } ::-webkit-scrollbar-thumb:hover { background-color: var(--w-accent); } /* -------------------------------------------------------------------------- 8. ACCESSIBILITY UTILITIES -------------------------------------------------------------------------- */ /* Present to assistive tech, absent from the visual page. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Hidden until focused, then shown in place. For in-content shortcuts. */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* First focusable element on every page. Slides into view on focus. */ .skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-skip); display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-3) var(--space-5); border: 1px solid var(--w-accent); border-radius: var(--radius-sm); background-color: var(--w-surface); color: var(--w-text); font-family: var(--font-utility); font-size: var(--step--1); letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(calc(-100% - var(--space-6))); transition: transform var(--dur-micro) var(--ease-out-soft); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 9. THE PENDING-CONTENT TAG Currently UNUSED — no page emits this class. It is kept as a utility for marking a fact that is genuinely awaiting confirmation from the client, so that unverified content can never be mistaken for settled content. It reads unmistakably as awaiting input — dashed, tinted, monospace — while still sitting politely inside a sentence or a layout. Site copy states only what is verified; anything unconfirmed is written as real commercial copy instead ("Price on request", "By appointment"). -------------------------------------------------------------------------- */ .placeholder { display: inline-block; padding: 0.15em 0.5em; border: 1px dashed var(--w-accent-soft); border-radius: var(--radius-sm); background-color: color-mix(in srgb, var(--w-accent-soft) 8%, transparent); color: var(--w-accent-soft); font-family: var(--font-utility); font-size: 0.82em; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: var(--track-normal); text-transform: none; text-decoration: none; vertical-align: baseline; } /* Block form, for when the whole slot is pending (a stat value, a table cell, an image caption) and the tag should sit on its own line. */ .placeholder--block { display: block; width: fit-content; max-width: 100%; } /* -------------------------------------------------------------------------- 10. LAYOUT PRIMITIVES .section vertical rhythm band. Structure only — components.css adds .section__head and the section variants on top of this. .section__inner width-limited, gutter-padded inner wrapper. .stack vertical flow, one gap value, owned by the parent. .cluster horizontal wrap group (chips, buttons, meta rows). .grid-auto responsive card grid, no media queries needed. .prose a single readable column of running text. -------------------------------------------------------------------------- */ .section { position: relative; padding-block: var(--section-space, var(--space-11)); } .section__inner { width: 100%; max-width: var(--section-maxw, var(--maxw-content)); margin-inline: auto; padding-inline: var(--gutter); } /* Opt-in width variants, set on .section so the inner picks them up. */ .section--wide { --section-maxw: var(--maxw-wide); } .section--prose { --section-maxw: var(--maxw-prose); } .section--tight { --section-space: var(--space-8); } .section--flush { --section-space: 0; } /* The site header is fixed and transparent so it can float over hero art. A page whose first band is NOT a full-bleed hero uses this to clear it. Always prefer this over hardcoding --header-h maths at the call site — the header grows a second row on narrow viewports and this tracks that. */ .section--below-header { padding-block-start: calc(var(--header-h) + var(--space-9)); } .stack { display: flex; flex-direction: column; } .stack > * + * { margin-block-start: var(--stack-space, var(--space-5)); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, var(--space-4)); } .grid-auto { display: grid; gap: var(--grid-space, var(--space-6)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr)); } .prose { max-width: var(--maxw-prose); } .prose > * + * { margin-block-start: var(--space-5); } .prose h2, .prose h3 { margin-block-start: var(--space-8); } /* -------------------------------------------------------------------------- 11. SMOOTH SCROLLING Opt IN only when the visitor has not asked for reduced motion, so the preference is respected by construction rather than undone later. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }