/* ============================================================================= Halden Orthodontics build (a fork of our own earlier build): design tokens. The type, radius, spacing and motion values keep the measured DNA of the reference (dna/DNA.md sections 3 to 6, dna/MOTION.md section M6). The colour roles are this fork's own (DEVIATIONS.json: accent-spruce, light-balance): paper ground, ink, one spruce accent, a mist tint. Every value below names the line it comes from. A value with no DNA source says so on its line. Tracking (letter-spacing) trap: an em token set ONCE on body resolves at body's own size and every descendant inherits that fixed px. Put each type role's tracking on that role's own class (letter-spacing: var(--t-h2-track)) or declare it on every element. Never on body. Nothing in base.css hard-codes a colour, a radius, a font or a spacing number. If a value is not a token here, it does not belong in this system. ========================================================================== */ /* --- self-hosted fonts (SIL OFL, latin subset), font-display swap; the two painted above the fold are preloaded in the page head --- */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-tight-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-tight-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-tight-latin-700-normal.woff2) format("woff2"); } /* HEXAGON PALETTE (W1). Contrast computed with _work/w1_aa.py (WCAG 2.x): ink #231F20 on paper #F7F3EB 14.73, on tint #F1E6D6 13.22, on white 16.30; paper on ink 14.73. --cta fill orange #F7941E (their logo orange) with ink text 7.15; orange on ink 7.15. --spruce (kept as the name every stylesheet reads) is now the DEEPENED AMBER #9A5400 for small text and thin marks on light: 5.21 on paper, 4.68 on tint, 5.77 on white; paper text on a deep amber fill 5.21. Never the bright orange for small text on paper (2.1). Secondary text: ink at .78 on paper 7.42; paper at .66 on ink 7.14, at .82 on ink 10.29; reveal ink at .64 on paper 4.76. The faded ink on dark (.4, 3.52) is for quiet decoration only, as in the base. Their sun yellow and peach live only inside their logo. */ :root { /* --- colour, extra tokens. DNA.md section 2 ------------------------------- */ --ground-light: #F7F3EB; /* DEVIATIONS.json light-balance: the paper ground (BUILD-SPEC --paper), the reference's #EAE8E8 lightened because the brief asks for white space */ --ground-dark: #231F20; /* DEVIATIONS.json light-balance: the deep ink-green used for the one dark band and the footer (BUILD-SPEC --ink) */ --tint-surface: #F1E6D6; /* DEVIATIONS.json light-balance: the mist tint (BUILD-SPEC --mist), quiet bands, chips and circles */ --ink-faded-dark: rgba(247,243,235,.4); /* DNA.md section 2 Faded ink on dark. Measured about 3.3:1 on --ground-dark: same limit */ --hairline-light: rgba(35,31,32,.14); /* DNA.md section 2 Hairline on light, 1px solid */ --hairline-dark: rgba(247,243,235,.18); /* DNA.md section 2 Hairline on dark, 1px solid */ --white: #FFFFFF; /* DNA.md section 2 White: founder cards, ring stage, footer strip */ --spruce: #9A5400; /* DEVIATIONS.json accent-spruce: FILL of the call controls (header Book a Consultation pill, form submit circle, phone-panel call link), white text on it (9.9:1); also a quiet text accent on light (9.9:1 on paper) */ --mist: #F1E6D6; /* BUILD-SPEC --mist, the same value as --tint-surface */ /* --- colour, the names base.css reads ------------------------------------- */ --ground: var(--ground-light); /* DNA.md section 2 Light ground: the page background */ --anchor: var(--ground-dark); /* DNA.md section 2 Dark ground: the dark-surface role, about 4 parts to 1 of light by area */ --tint: var(--tint-surface); /* DNA.md section 2 Tint surface */ --ink: #231F20; /* BUILD-SPEC --ink: headings and body on light (16:1 on --ground) */ --ink-invert: #F7F3EB; /* ink on dark: the paper tone reused as text (15:1 on --anchor) */ /* DEVIATIONS.json faded-text-tone (planner ruling, 2 Nov): the measured faded tone (about 2:1 light, 3.3:1 dark) is used ONLY for the not-yet-revealed words of a scroll-darkening statement (D12, each word reaches full ink as it scrolls into place; reduced motion shows it in full ink). Every other secondary text takes the darker tone below, 4.5:1 or more on its ground. */ --ink-2-light: rgba(35,31,32,.78); /* secondary text on light: about 7.7:1 on --ground */ --ink-2-dark: rgba(247,243,235,.66); /* secondary text on dark: about 7:1 on --anchor */ --ink-quiet: var(--ink-2-light); /* secondary lines, card descriptions on light (4.5:1+) */ --ink-soft: var(--ink-2-dark); /* secondary lines on dark (4.5:1+) */ --ink-3-dark: rgba(247,243,235,.82); /* x02 footer: labels, link rest state and office text on dark, about 10:1 */ --foot-ellipse-w: 160%; /* F: the x02 ground ellipse is 1.6 times the footer width, centred */ --foot-ellipse-k: 9.1166; /* F: its height in --foot-curve units, so its edge meets x=0 exactly --foot-curve down: 2 / (1 - sqrt(1 - (1/1.6)^2)) */ --foot-name-fit: 9.4; /* "Halden" + "Orthodontics" in Instrument Serif at -0.04em measure about 8.4em together; 100cqi / 9.4 leaves a gap between them */ --ink-reveal-light: rgba(35,31,32,.64); /* D12 only: unrevealed words on light */ --ink-reveal-dark: var(--ink-faded-dark); /* D12 only: unrevealed words on dark */ --photo-black: #0F0D0D; /* DNA.md section 2 Photo black: video and photo grounds */ --scrim-hero: rgba(15,13,13,.45); /* NOT IN DNA.md as a token: Photo black at 45 percent over the whole hero clip, so the light headline and the giant line keep 3:1 or more over a pale stock clip (the reference site's own footage is darker) */ --scrim-top: rgba(15,13,13,.65); /* NOT IN DNA.md as a token: Photo black at 65 percent behind the transparent header at the top of a pale photo hero, so its light text keeps 4.5:1 (A3, measured 1.6:1 on the general dentistry hero without it) */ --scrim: rgba(15,13,13,.55); /* NOT IN DNA.md as a token: Photo black at 55 percent, under light text on a photo (by eye from h08/x03 crops, where the photo is darkened under the type) */ --cta: #F7941E; /* DEVIATIONS.json accent-spruce: the one action fill, call controls only */ --cta-ink: #231F20; /* DEVIATIONS.json accent-spruce: white text on the spruce fill (9.9:1) */ --line: #231F20; /* rule ink, 1px solid: the non-text boundary (16:1 on --ground) */ --err: #A8221A; /* NOT IN DNA.md (a form error shows only after a bad submit, nothing measures it): starter value kept, 5.36:1 on --ground */ /* --- fonts. DNA.md section 1 (both SIL OFL, self-hosted, swap) ---------------------- */ --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* DNA.md section 1 Display: every heading, card name, quote, counter. 400 and 400 italic only */ --body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* DNA.md section 1 Text: labels, buttons, body, form. 400, 500, 600, 700 */ --display-weight: 400; /* DNA.md section 3: every display role is 400, never bold */ /* --- type roles. DNA.md section 3 (1440 values) and 3b (phones) ------------- Each role has family, size, line-height (unitless ratio), weight, tracking. Serif roles: clamp(floor, vw rule, desktop). The vw slope is the measured 390 phone size divided by 3.9 (DNA.md 3b: phones are viewport-relative, 3.2vw-type multiples); the floor is the same rule at a 320px viewport; the cap is the desktop size, reached at the width where the slope meets it. 390 sizes are the measured ones in dna.json (byKey 390/*), which DNA.md 3b cites. Italic: ONE word or phrase in a heading may be Instrument Serif italic (DNA.md section 3), never a whole heading, never bold. No tracked uppercase anywhere, no monospace. */ --t-display-xxl-lh: .84; /* DNA.md 3 display-xxl 0.84 (231.84px) */ --t-display-xxl-track: -.04em; /* DNA.md 3 display-xxl -0.04em */ --t-display-l-family: var(--display); --t-display-l-size: clamp(58.88px, 18.4vw, 192px); /* DNA.md 3 display-l 192px; 390 = 71.76px */ --t-display-l-lh: .9; /* DNA.md 3 display-l 0.90 (172.8px) */ --t-display-l-track: -.05em; /* DNA.md 3 display-l -0.05em */ --t-display-family: var(--display); --t-display-size: clamp(58.88px, 18.4vw, 153px); /* DNA.md 3 display 153px; 390 = 71.76px (DNA.md 3b: 60 to 90px) */ --t-display-lh: .8; /* DNA.md 3 display 0.80 (122.4px) */ --t-display-track: -.03em; /* DNA.md 3 display -0.03em */ --t-h2-family: var(--display); --t-h2-size: clamp(40.11px, 12.5333vw, 83px); /* DNA.md 3 h2 83px; 390 = 48.88px */ --t-h2-lh: .93; /* DNA.md 3 h2 0.93 (77.19px) */ --t-h2-track: -.02em; /* DNA.md 3 h2 -0.02em */ --t-h4-family: var(--display); --t-h4-size: clamp(32.43px, 10.1333vw, 55px); /* DNA.md 3 h4 55px; 390 = 39.52px */ --t-h4-lh: .87; /* DNA.md 3 h4 0.87 (47.85px) */ --t-h4-track: -.03em; /* DNA.md 3 h4 -0.03em */ --t-h5-family: var(--display); --t-h5-size: clamp(20.48px, 6.4vw, 35px); /* DNA.md 3 h5 35px; 390 = 24.96px */ --t-h5-lh: .85; /* DNA.md 3 h5 0.85 (29.75px) */ --t-h5-track: -.03em; /* DNA.md 3 h5 -0.03em */ /* Sans roles: desktop px here; the phone block at the end of this file moves each to 1.04 times (DNA.md 3b: 12px becomes 12.48px, 15px becomes 15.6px). */ --t-p1-family: var(--body); --t-p1-size: 20px; /* DNA.md 3 p1 20px */ --t-p1-lh: 1.09; /* DNA.md 3 p1 1.09 (21.8px) */ --t-p1-weight: 600; --t-p1-track: -.02em; /* DNA.md 3 p1 -0.02em */ --t-p2-family: var(--body); --t-p2-size: 15px; /* DNA.md 3 p2 15px */ --t-p2-lh: 1.13; /* DNA.md 3 p2 1.13 (16.95px) */ --t-p2-weight: 700; --t-p3-family: var(--body); --t-p3-size: 15px; /* DNA.md 3 p3 15px */ --t-p3-lh: 1.05; /* DNA.md 3 p3 1.05 (15.75px) */ --t-p3-weight: 400; --t-p3-track: .01em; /* DNA.md 3 p3 +0.01em */ --t-c1-family: var(--body); --t-c1-size: 14px; /* DNA.md 3 c1 14px */ --t-c1-lh: 1.13; /* DNA.md 3 c1 1.13 (15.82px) */ --t-c1-weight: 700; --t-c1-track: -.02em; /* DNA.md 3 c1 -0.02em */ --t-c2-family: var(--body); --t-c2-size: 14px; /* DNA.md 3 c2 14px */ --t-c2-lh: 1.13; /* DNA.md 3 c2 1.13 (15.82px) */ --t-c2-weight: 500; --t-c2-track: -.01em; /* DNA.md 3 c2 -0.01em */ --t-c3-family: var(--body); --t-c3-size: 12px; /* DNA.md 3 c3 12px */ --t-c3-lh: 1.19; /* DNA.md 3 c3 1.19 (14.28px) */ --t-c3-weight: 500; --t-c3-track: normal; /* DNA.md 3 c3 normal */ /* --- radius. DNA.md section 4 --------------------------------------------- */ --r-pill: 64px; /* DNA.md 4 64px: every button (48px tall, pad 16px 24px) */ --r-field: 21000px; /* DNA.md 4 21000px: form inputs and the textarea, fully round at 64 to 80px tall */ --r-circle: 50%; /* DNA.md 4 50%: Go Back, concern check, FAQ toggle, phone and menu circles, form submit, key-indicator rings */ --r-card: 30px; /* DNA.md 4 30px: solution, specialist and tool cards (outer) */ --r-img: 22px; /* DNA.md 4 22px: the image inside a 30px card with 8px padding (nested rule: inner = outer minus padding) */ --r-chip: 24px; /* DNA.md 4 24px: benefit and highlight chips, solution card image */ --r-frame: 40px; /* DNA.md 4 40 / 42px: large photo frames (d01 image, contact photos); 42px where DETAILS.md says so */ /* --- shadow. DNA.md section 5: NO box shadows anywhere ---------------------- */ /* --- frame. DNA.md section 6 ------------------------------------------------ */ --pad-x: 32px; /* DNA.md 6 side padding at 1440 (16px below 1024, see the phone block) */ --content: 1376px; /* DNA.md 6 content width at 1440 (1376 plus 32px each side = 1440) */ --gap-8: 8px; /* DNA.md 6 gaps in use */ --gap-12: 12px; /* DNA.md 6 */ --gap-16: 16px; /* DNA.md 6 */ --gap-24: 24px; /* DNA.md 6 */ --gap-32: 32px; /* DNA.md 6 */ --gap-40: 40px; /* DNA.md 6 */ --hdr-h: 72px; /* DNA.md 7: the header bar, 72px, padding 12px 32px */ --btn-h: 48px; /* DNA.md 4 / DETAILS D01: pill 48px tall */ --circ: 48px; /* DETAILS D05: Go Back, FAQ toggle, phone and menu circles */ --circ-lg: 80px; /* DETAILS D05 / D14: the form submit */ --icon: 16px; /* DETAILS D03: the four-stroke plus, chevron, corner arrow */ --icon-sm: 12px; /* DNA.md 7: the header text buttons' 12px icons */ --chip-h: 122px; /* DETAILS D06 */ --ring: 365px; /* DETAILS D13 */ --field-h: 64px; /* DETAILS D14: fields 64px (textarea 80px = --circ-lg) */ --pad-sec: 128px; /* DNA.md 6: testimonials 128px bottom; the band rhythm used for section padding */ --gap-48: 48px; /* DETAILS D10: wide card pad 48px */ --gap-64: 64px; /* DETAILS D08 concern row pad */ --foot-curve: 72px; /* NOT IN DNA.md as a number: the x02 convex top rises about 72px at 1440 (by eye, x02 crop and the h08 crop where it overlaps) */ --t-404-size: 47vw; /* NOT IN DNA.md as a token: the 404 numeral on z01 spans about 57 percent of the width at 1440 (by eye, z01 crop); 85vw on phones */ /* --- motion. MOTION.md section M6 and M4. No spring, so no linear() curve --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* MOTION.md M6 */ --ease-io: ease-in-out; /* MOTION.md M6 */ --dur-fast: .3s; /* MOTION.md M6 (pills, form fields, toggle background) */ --dur-mid: .4s; /* MOTION.md M6 (FAQ answer grid-template-rows) */ --dur-link: .8s; /* MOTION.md M6 (underline link text roll) */ --stagger: .08s; /* NOT IN DNA.md: starter value kept, site.js reads it */ --rise-y: 22px; /* NOT IN DNA.md: starter value kept, base.css reads it */ /* --- the ONE breakpoint shared by CSS and JS (DNA.md section 6: 1024px; phone layout to 1023px). site.js reads this. Every media query in the build is max-width: 1023px / min-width: 1024px (the starter's 900px and 1000px queries were removed, DEVIATIONS.json single-breakpoint). */ } /* --- phones, DNA.md sections 3b and 6: one breakpoint, desktop from 1024 ----- */ @media (max-width: 1023px) { :root { --pad-x: 16px; /* DNA.md 6: about 16px each side at 390 */ --hdr-h: 72px; /* DNA.md 7: same bar height, logo + two circles */ --pad-sec: 80px; /* DNA.md 3b: phone spacing is viewport-relative; 80px is the measured 390 section rhythm (by eye, h05/h07 mobile crops) */ --ring: 260px; /* DETAILS D13 at 390 (by eye, s02 mobile crop) */ --foot-curve: 32px; --t-404-size: 85vw; /* z01 phone crop: the numeral spans the width */ --t-p1-size: clamp(20px, 5.3333vw, 20.8px); /* DNA.md 3b 1.04 times 20px */ --t-p2-size: clamp(15px, 4vw, 15.6px); /* DNA.md 3b 15px becomes 15.6px */ --t-p3-size: clamp(15px, 4vw, 15.6px); /* DNA.md 3b 15px becomes 15.6px */ --t-c1-size: clamp(14px, 3.7333vw, 14.56px); /* DNA.md 3b 1.04 times 14px */ --t-c2-size: clamp(14px, 3.7333vw, 14.56px); /* DNA.md 3b 1.04 times 14px */ --t-c3-size: clamp(12px, 3.2vw, 12.48px); /* DNA.md 3b 12px becomes 12.48px */ } } /* --- big screens. The reference design scales its whole 1440 layout with the viewport above 1440 (measured at 1920 and 2560 on the clone: type, gaps, pills, header and content width all grow by width / 1440, content stays full width less the side padding). Every 1440 size token becomes the same value in vw (N px / 14.4), so 1441px and up is the 1440 layout scaled. The practice's own photos keep their native-size caps (literal px in the renderers), so nothing is upscaled. --- */ @media (min-width: 1441px) { :root { --t-display-l-size: 13.3333vw; /* 192px at 1440 */ --t-display-size: 10.625vw; /* 153px at 1440 */ --t-h2-size: 5.7639vw; /* 83px at 1440 */ --t-h4-size: 3.8194vw; /* 55px at 1440 */ --t-h5-size: 2.4306vw; /* 35px at 1440 */ --t-p1-size: 1.3889vw; /* 20px at 1440 */ --t-p2-size: 1.0417vw; /* 15px at 1440 */ --t-p3-size: 1.0417vw; /* 15px at 1440 */ --t-c1-size: 0.9722vw; /* 14px at 1440 */ --t-c2-size: 0.9722vw; /* 14px at 1440 */ --t-c3-size: 0.8333vw; /* 12px at 1440 */ --r-pill: 4.4444vw; /* 64px at 1440 */ --r-card: 2.0833vw; /* 30px at 1440 */ --r-img: 1.5278vw; /* 22px at 1440 */ --r-chip: 1.6667vw; /* 24px at 1440 */ --r-frame: 2.7778vw; /* 40px at 1440 */ --pad-x: 2.2222vw; /* 32px at 1440 */ --content: 95.5556vw; /* 1376px at 1440 */ --gap-8: 0.5556vw; /* 8px at 1440 */ --gap-12: 0.8333vw; /* 12px at 1440 */ --gap-16: 1.1111vw; /* 16px at 1440 */ --gap-24: 1.6667vw; /* 24px at 1440 */ --gap-32: 2.2222vw; /* 32px at 1440 */ --gap-40: 2.7778vw; /* 40px at 1440 */ --gap-48: 3.3333vw; /* 48px at 1440 */ --gap-64: 4.4444vw; /* 64px at 1440 */ --hdr-h: 5.0vw; /* 72px at 1440 */ --btn-h: 3.3333vw; /* 48px at 1440 */ --circ: 3.3333vw; /* 48px at 1440 */ --circ-lg: 5.5556vw; /* 80px at 1440 */ --icon: 1.1111vw; /* 16px at 1440 */ --icon-sm: 0.8333vw; /* 12px at 1440 */ --chip-h: 8.4722vw; /* 122px at 1440 */ --ring: 25.3472vw; /* 365px at 1440 */ --field-h: 4.4444vw; /* 64px at 1440 */ --pad-sec: 8.8889vw; /* 128px at 1440 */ --foot-curve: 5.0vw; /* 72px at 1440 */ --rise-y: 1.5278vw; /* 22px at 1440 */ } }