/* ======================================================================================== * tokens.css — CORE DESIGN TOKENS (L1 layer). * * All CSS custom properties for the anchor-dental theme. This file is enqueued before * framework.css and is the single source of truth for color, spacing, shadow, radius, * and transition tokens — plus asset-URL vars so upload paths are defined once. * * Moved verbatim from framework.css (:root blocks, lines 53–117) by Phase 1 refactor. * Do NOT put selector rules here — tokens only. * ======================================================================================== */ /************************************/ /*** 01. Global Variables ***/ /************************************/ :root{ /* TMJ Sleep Cleveland brand — dark green Primary, coral Accent (reskinned from the anchor-dental defaults; hues sourced from the live tmj-anchor tokens.css). */ --primary-color : #153b37; /* dark green — hero/heading/dark sections */ --primary-rgb : 21, 59, 55; /* fallback triplet of --primary-color; the live value is derived from the admin Primary in inc/colors.php (consumed by the .page-header overlay) */ --primary-light : #2a635c; /* mid green */ --secondary-color : #f8fafa; /* off-white (muted section bg) */ --text-color : #4a5f5c; /* muted green-gray body copy */ --accent-color : #e8a087; /* coral */ --accent-rgb : 232, 160, 135; /* must match --accent-color #e8a087 */ --white-color : #FFFFFF; --divider-color : #e8eeee; /* pale green-gray divider */ --dark-divider-color : #FFFFFF26; --error-color : rgb(230, 87, 87); --button-color : #e8a087; /* coral button */ --button-hover-color : #153b37; /* dark green on hover */ --button-text-color : #FFFFFF; /* Body font follows the admin "Body" font (Anchor Tools → Site Config → Fonts); falls back to the TMJ body face (Libre Franklin) if site-config is unavailable. */ --default-font : var(--anchor-font-body, "Libre Franklin", Helvetica, Arial, sans-serif); /* Heading font follows the admin "Heading" font; falls back to the TMJ display serif. */ --heading-font : var(--anchor-font-heading, "Cormorant Garamond", Georgia, serif); /* Vertical rhythm for sections (consumed by the .section utilities below and by the legacy section-name rules). Retune section spacing site-wide here. */ --section-space : 100px; /* default top & bottom */ --section-space-md : 70px; /* medium bottom step */ --section-space-sm : 50px; /* compact (common mobile value) */ --section-space-xs : 25px; /* tight (mobile tops/bottoms) */ --section-space-2xs : 20px; /* tightest (mobile bottoms) */ /* Shadows — --shadow-card is the 9× card shadow used across the template. */ --shadow-card : 0px 10px 30px 0px #00000008; --shadow-soft : 0px 4px 20px 0px #0000000D; --shadow-strong : 0px 10px 30px 0px #0000001A; /* Corner radii — TMJ uses a modest ~14px radius throughout (not the anchor-dental 40px pill look). --radius-md 14px is the dominant brand card radius. */ --radius-sm : 10px; --radius-md : 14px; --radius-lg : 18px; --radius-circle : 50%; --radius-pill : 9999px; /* Transition durations. */ --transition-base : 0.3s; --transition-medium : 0.4s; --transition-slow : 0.5s; /* Asset URLs — single source of truth for all upload-path references in framework.css and custom.css. Defined once here; consumed via var(--icon-*) / var(--bg-*). Repointed at TMJ upload assets (all verified present in this install's uploads). NOTE: primitives.css consumes NONE of these — they feed the L3 skin only, so several are provisional placeholders (TMJ-ICON / BG-DIAMOND) pending the TMJ L3 skin rewrite. */ --icon-eyebrow: url("/wp-content/uploads/2026/01/TMJ-ICON.svg"); --icon-plus: url("/wp-content/uploads/2026/01/TMJ-ICON.svg"); --icon-blockquote: url("/wp-content/uploads/2026/01/TMJ-ICON.svg"); --icon-arrow-white: url("/wp-content/uploads/2026/01/TMJ-ICON.svg"); --bg-hero-shape: url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp"); /* Site-wide hero — the default for every page that does not set its own, which right now is all 46 published pages. BANNED, DO NOT RESTORE: this token used to point at Hero2.webp, a stock dental waiting room — operatory chair, tooth-anatomy posters, scrubs. Client, 2026-09-01: that image is never to appear on this site or the Raleigh site. "These are TMJ practices, which strictly don't want dental chairs." An earlier note here already flagged it as off-positioning and deferred the fix; it was the hero on ~45 pages in the meantime. bin/check-banned-images.sh now fails if any reference to it comes back. Airway-Hero-copy.webp is the practice's own existing asset (it was the Divi site's home hero) and reads as relief and open breathing — on-message for TMJ/sleep/airway with no clinical equipment in frame. Chosen by rendering the three candidates in this exact box: the team photo (utah-about.jpg, also the CTA band) cuts heads off at the top and bisects a person on the gradient edge, because a wide 6-person group cannot survive a 60%-wide cover crop; the home page's pain-receptors illustration works but would make all 46 pages look like the home page. Any replacement must clear the same bar: no dental chair, no operatory, no tooth diagrams, and it has to hold up cropped to a tall 60%-wide box. */ --bg-hero-photo: url("/wp-content/uploads/2026/08/Airway-Hero-copy.webp"); /* Home hero only (see .home .s-hero__bg in tmj-sections.css). The pain-receptors illustration — jaw joint, airway, cervical spine and neural pathways in ONE frame, which is the "the symptom you notice may not be the whole problem" idea drawn rather than stated. Replaces Man-sleeping-peacefully.jpg, which only said "sleep" and left the other five evaluation domains unrepresented. No dental cues, so it clears the imagery ban. Ported from the Raleigh build 2026-08-25 at the client's request, together with .hero-callouts (tmj-lean.css §7). 1536x1024 intrinsic — .hero-callouts hard-codes that aspect ratio to reproduce background-size:cover, so DO NOT swap in a differently-proportioned file without updating `aspect-ratio` there or every marker slides off its anatomy. A bare file, not a media-library attachment (same as Raleigh) — it is referenced only from CSS, never picked in an editor. This deliberately does NOT override the shared --bg-hero-photo above: the markers name structures in THIS picture and would be nonsense over any other. */ --bg-hero-photo-home: url("/wp-content/uploads/2026/08/TMJ-Hero-Image-Female-with-Pain-Receptors.avif"); /* Portrait-friendly crop used by the mobile hero block. */ --bg-hero-photo-mobile: url("/wp-content/uploads/2026/08/Hero-Mobile.webp"); --bg-about-shape: url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp"); --bg-experience: url("/wp-content/uploads/2026/08/Airway-Hero-copy.webp"); --bg-expertise: url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp"); --bg-why-choose: url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp"); --bg-testimonial: url("/wp-content/uploads/2026/02/BG-DIAMOND_1.webp"); --bg-service-header:url("/wp-content/uploads/2026/08/Airway-Hero-copy.webp"); /* Full-bleed CTA band (.s-prf). The practice's own team photo — replaces the PRF-Injection clinical close-up, which read as a needle going into someone directly under "We Look Forward To Meeting You". Swap the practice's photo here and every one of the 25 pages using .s-prf picks it up. */ --bg-cta-band: url("/wp-content/uploads/2026/08/utah-about.jpg"); /* Type-scale tokens — consumed by primitives.css and any rule that needs a named size rather than a hard-coded px value. */ --fs-eyebrow: 14px; --fs-subtitle: 20px; --fs-subtitle-sm: 18px; --fs-title: 46px; --fs-display: 54px; } /* ---------------------------------------------------------------------------------------- RESPONSIVE SPACING — shrink the section-space scale at the theme's 991px breakpoint. Because every section-name padding rule (and the .section utilities) consume these tokens, this single override drives the mobile vertical rhythm for the whole site — theme pages AND Anchor blocks. Retune mobile spacing here. Verified to reproduce the previous hand-tuned per-section mobile padding exactly (the lone outlier, .our-doctors, keeps a literal override in the 991 block below). Desktop values are unchanged, so desktop rendering is identical. ---------------------------------------------------------------------------------------- */ @media (max-width: 991px){ :root{ --section-space : 50px; /* desktop 100 */ --section-space-md : 20px; /* desktop 70 */ --section-space-sm : 25px; /* desktop 50 */ --section-space-2xs: 0; /* desktop 20 */ /* --section-space-xs stays 25px — only the new .section--*-xs modifiers consume it */ } }