/* ===================================================================== base.css — fonts, reset, base typography, layout primitives, the watermark + decoration devices, buttons, focus, skip link. Section composition lives in sections.css. Consumes tokens.css only — no hardcoded colours here. ===================================================================== */ /* --------------------------------------------------------------------- FONTS (all self-hosted or system — nothing external; CSP font-src 'self') --------------------------------------------------------------------- DESIGN-SPEC-PENPOT §3: the display face is Bodoni 72 Oldstyle (macOS/URW), which is not in the repo and cannot be fetched programmatically. The spec's single-face recipe put the not-yet-licensed woff2 in the same src list as the local() names; that would 404 on every visitor who does not have the font installed. Split into two faces instead — same resolution order, zero failed requests: 1. "TBW Display" local() only. Resolves instantly for the designer/client on macOS. When the licensed web font arrives, append its url() to THIS rule's src — a genuine one-line drop-in. 2. "TBW Display Fallback" the shipped Bodoni Moda woff2. Used by everyone who does not have Bodoni 72 Oldstyle. --font-display lists them in that order (tokens.css), so an unresolvable face simply falls through to the next family. */ @font-face { font-family: "TBW Display"; font-style: normal; font-weight: 400; font-display: swap; /* Drop-in point: add , url("/assets/fonts/bodoni-72-oldstyle.woff2") format("woff2") here when the web-licensed file arrives (DESIGN-SPEC-PENPOT §3). */ src: local("Bodoni 72 Oldstyle Book"), local("Bodoni 72 Oldstyle"), local("Bodoni 72"); } @font-face { font-family: "TBW Display Fallback"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/bodoni-moda-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 600; /* variable weight axis */ font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Buttons only, weight 600 only (spec §3). Latin subset, SIL OFL 1.1. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------- RESET (minimal, modern) --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Belt-and-braces against a decoration ever widening the page (every decoration-bearing section also clips). This MUST live on , not : per spec, clip on one axis computes the other to `auto`, and on that makes the body its own scroll container — measured, it broke window.scrollTo() and full-page capture. 's overflow propagates to the viewport instead, so scrolling behaves normally. */ overflow-x: clip; } body { min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-intro); color: var(--body); background-color: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } ul, ol { list-style: none; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; } /* --------------------------------------------------------------------- BASE TYPOGRAPHY (spec §3 measured scale) Letter-spacing is 0 everywhere in the design; the -0.005em below is the metric-tuning allowance from DESIGN-DIRECTIVES §3.2 for the substituted display face. At 52px that is 0.26px per character — imperceptible on the real Bodoni 72 Oldstyle, so it is applied unconditionally (CSS cannot detect which face resolved). --------------------------------------------------------------------- */ h1, h2, h3, .section-kicker { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.005em; color: var(--ink); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-card); } p { text-wrap: pretty; } a { color: var(--rose-deep); } /* Section intro paragraph — Manrope 400/16, line-height 1.75 */ .section-intro { font-size: var(--fs-body); line-height: var(--lh-intro); color: var(--body); } /* Inlined SVG glyphs (src/View/partials/icons/, rendered by icon()). All are 24×24 with fill="currentColor", so the colour is set by the parent. */ .icon { width: 24px; height: 24px; flex: none; } /* --------------------------------------------------------------------- LAYOUT PRIMITIVES (§3.1 / §5.2) .container gives exactly 1140 + 150px gutters at 1440 with no special case. .bleed-grid is the full-bleed technique for panels that break the gutter on ONE side (Meet Yolande, Contact) — deliberately NOT 100vw + negative margins, which includes the scrollbar and causes horizontal scroll. --------------------------------------------------------------------- */ .container { width: min(var(--container), 100% - (2 * var(--gutter))); margin-inline: auto; } .bleed-grid { display: grid; grid-template-columns: [full-start] 1fr [content-start] min(var(--container), 100% - (2 * var(--gutter))) [content-end] 1fr [full-end]; } /* :not(.decor) matters: an absolutely-positioned grid child WITH a grid placement is positioned against its grid area, not the container's padding box — which would break every decoration percentage. Leaving the decor spans at `grid-column: auto` keeps the padding box as their containing block. */ .bleed-grid > :not(.decor) { grid-column: content; } /* --------------------------------------------------------------------- SECTION SHELL (§5.1) — every section that owns decoration position:relative + overflow:hidden crops the negative-x / past-1440 placements exactly as the design does, and makes horizontal overflow impossible. Direct children sit above the decoration layer. --------------------------------------------------------------------- */ .section { position: relative; overflow: hidden; } .section > * { position: relative; z-index: 1; } /* --------------------------------------------------------------------- THE WATERMARK DEVICE (spec §4, DESIGN-DIRECTIVES §3.3) A pale ghost word behind the section heading. aria-hidden, never a heading, in flow with one em-based negative pull so the overlap stays proportional at every width. The pull lives ONLY here, so it can overlap only the H2 that immediately follows it — never body copy. --------------------------------------------------------------------- */ .section-watermark { display: block; font-family: var(--font-body); font-size: var(--fs-wm); font-weight: 600; line-height: var(--lh-display); letter-spacing: 0; color: var(--wm-light); margin-bottom: -0.5em; pointer-events: none; user-select: none; -webkit-user-select: none; } .section-watermark--on-rose { color: var(--wm-rose); } .section-watermark--on-tint { color: var(--wm-white); } /* Below 600px a 36px ghost word crowds a 28px H2. It is aria-hidden decoration, so nothing is lost by hiding it (§3.3). */ @media (max-width: 599.98px) { .section-watermark { display: none; } } /* A watermark-bearing stack. These use adjacent-sibling margins rather than flex `gap`, because a gap is added ON TOP of the watermark's negative pull and pushes the H2 straight back down — measured: it turned the ruled 42px H2-top offset into 54–62px. The rule below zeroes the margin only for the element that directly follows a watermark, so the pull is the sole thing between them; every other pair keeps --stack-gap (the design's Frame gap). */ .stack { display: flex; flex-direction: column; } .stack > * + * { margin-block-start: var(--stack-gap, 0px); } .stack > .section-watermark + * { margin-block-start: 0; } /* --------------------------------------------------------------------- THE DECORATION LAYER (§3.5 / §4.3) Every placement is a CSS background-image DECLARED INSIDE A MEDIA QUERY (see sections.css) so a phone never fetches desktop art. Rotation is baked into every asset — no CSS transform. Everything here is inert. --------------------------------------------------------------------- */ .decor { position: absolute; z-index: 0; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; user-select: none; -webkit-user-select: none; } /* --------------------------------------------------------------------- BUTTONS — Inter 600/16, 52 tall, radius 6, padding 16/24 (spec §5.2) A4/A5: primary fill and secondary label+stroke are --rose-deep, not the design's --rose (which is 2.95:1 with white). --------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; /* The design's padding is 16/24 with no border. The 1px transparent border below keeps primary and secondary the same size (the secondary variant has a real 1px stroke), so the padding is reduced by 1 on each axis to land on the measured 203 × 52 for `Book a Consultation`. */ padding: 15px 23px; font-family: var(--font-button); font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-tight); letter-spacing: 0; border: 1px solid transparent; border-radius: var(--r-button); text-align: center; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } .button--primary { background-color: var(--rose-deep); color: var(--white); } /* white on #9A5763 = 5.36:1 · on #7C4650 = 7.37:1 — both clear AA. */ .button--primary:hover { background-color: var(--rose-deep-hover); } .button--primary:active { background-color: var(--rose-deep-active); } .button--secondary { background-color: var(--white); border-color: var(--rose-deep); color: var(--rose-deep); } /* A hover that changes the BACKGROUND has to re-clear the floor against the new background: --rose-deep on --tint is only 4.295:1, so A5's "hover: fill --tint" as written broke AA for the label. Label AND stroke move with the fill (A5 couples them), to --rose-deep-hover: 4.878:1 on --tint for the label, and the same 4.878:1 for the 1px stroke (floor 3:1, SC 1.4.11). Ratio recorded here because the rule that changes a background owns the ratio it creates. */ .button--secondary:hover { background-color: var(--tint); border-color: var(--rose-deep-hover); color: var(--rose-deep-hover); } .button[disabled], .button:disabled { opacity: 0.55; cursor: not-allowed; } /* --------------------------------------------------------------------- FOCUS + SKIP LINK (§2.5) Every interactive element gets a visible ring. .on-rose flips the ring to white on the two deep-rose surfaces, where --focus would vanish. --------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .on-rose { --focus: var(--white); } .skip-link { position: absolute; left: var(--sp-8); top: -4rem; z-index: 100; padding: var(--sp-8) var(--sp-16); background: var(--rose-deep); color: var(--white); border-radius: var(--r-button); text-decoration: none; transition: top 120ms ease; } .skip-link:focus { top: var(--sp-8); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- ERROR PAGE (src/View/errors/error.php) --------------------------------------------------------------------- */ .error-page { padding-block: 96px; text-align: center; } .error-page__status { font-family: var(--font-display); font-size: var(--fs-wm); line-height: 1; color: var(--rose-pill); } .error-page__heading { margin-block-start: var(--sp-12); } .error-page .section-intro { max-width: 60ch; margin: var(--sp-16) auto 0; } .error-page__debug { margin-block-start: var(--sp-32); padding: var(--sp-16); overflow-x: auto; text-align: left; background: var(--tint); border-radius: var(--r-row); color: var(--ink); } /* --------------------------------------------------------------------- MOTION — the design specifies none, and none is shipped (§5.10). This block only neutralises the transitions above for users who ask. --------------------------------------------------------------------- */ @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; } }