/* ============================================================================= Forward Oral Surgery build (a fork of our own earlier practice 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 (BUILD-SPEC tier 3): paper ground, near-black ink, one deep ink navy accent, a cool mist tint, a calmed gold for the review stars only. 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"); } :root { /* --- colour, extra tokens. DNA.md section 2 ------------------------------- */ --ground-light: #F6F5F1; /* DEVIATIONS.json light-balance: the paper ground (BUILD-SPEC --paper), the reference's #EAE8E8 lightened because the brief asks for white space */ --ground-dark: #131A21; /* the near-black ink used for the footer and the menu overlay (white text on it 16:1) */ --tint-surface: #E3E8ED; /* the cool mist tint: quiet bands, chips and circles (ink on it 13:1) */ --ink-faded-dark: rgba(246,245,241,.4); /* DNA.md section 2 Faded ink on dark. Measured about 3.3:1 on --ground-dark: same limit */ --hairline-light: rgba(19,26,33,.14); /* DNA.md section 2 Hairline on light, 1px solid */ --hairline-dark: rgba(246,245,241,.18); /* DNA.md section 2 Hairline on dark, 1px solid */ --white: #FFFFFF; /* DNA.md section 2 White: founder cards, ring stage, footer strip */ --navy: #1D2B3A; /* THE accent: deep ink navy. Fill of the call controls (header pill, form submit circle, phone-panel call), the one dark moment and links; white text on it 14:1, as text on paper 12:1 */ --spruce: var(--navy); /* legacy name kept so inner.css and the inner renderers keep working; it IS the navy */ --gold: #A9844F; /* the review stars only (a graphic: 3.4:1 on white, 3.3:1 on paper), never a fill behind text */ --mist: var(--tint-surface); /* 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: #131A21; /* near-black: headings and body on light (16:1 on --ground) */ --ink-invert: #F6F5F1; /* 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(19,26,33,.78); /* secondary text on light: about 7.7:1 on --ground */ --ink-2-dark: rgba(246,245,241,.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(246,245,241,.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: 8.2; /* "Forward" + "Oral Surgery" in Instrument Serif at -0.04em measure about 8.1em together; 100cqi / 9.4 leaves a gap between them */ --ink-reveal-light: rgba(19,26,33,.64); /* D12 only: unrevealed words on light */ --ink-reveal-dark: var(--ink-faded-dark); /* D12 only: unrevealed words on dark */ --photo-black: #06090D; /* DNA.md section 2 Photo black: video and photo grounds */ --scrim-hero: rgba(6,9,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(6,9,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(6,9,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: var(--navy); /* the one action fill, call controls only */ --cta-ink: #FFFFFF; /* white text on the navy fill (14:1) */ --line: #131A21; /* 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 */ } }