/* * CaryTamura design tokens. * * WHERE THE VALUES LIVE (Phase 52.3J). Colours and font families are edited in * Elementor — Site Settings › Global Colors / Global Fonts — and this file * READS them. Before 52.3J the arrow pointed the other way: the kit held * var(--ct-*) and this file held the values, so editing a Global in Elementor * changed nothing on the page. Everything else here (sizes, spacing, layout, * the colours no component uses yet) is still defined in this file. * * PROVENANCE. Every value below was read from the live site * (https://carytamura.com/) — its own CSS custom properties, its Google Fonts * requests, and a frequency analysis of the colours in its markup — not * estimated from a screenshot. Where a token was derived from the supplied * reference captures instead, it says so and gives both readings. * * These are SITE tokens. They must not migrate into the VM Business Listings * plugin, which stays vertical-neutral and reusable for other brokerages. */ /* ------------------------------------------------------------- font files -- * The two families are self-hosted: the six files the site draws with, as * Google Fonts serves them (Lato v25, Playfair Display v40; Latin subset, the * same unicode-range). Elementor's own Google Fonts stylesheets are switched * off in functions.php. Lato has no 500 or 600: the browser draws 500 with * 400 and 600 with 700, as it did before. Playfair Display is one variable * file for every weight from 400 to 900. * * A family, weight or italic newly chosen in Elementor's Global Fonts is NOT * loaded automatically: add its file to assets/fonts/ and declare it here. */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/lato-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display-variable.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Typography families and the bound colours are declared on body, below — * they are read from Elementor and Elementor declares its globals there. */ /* ---- Typography: scale (FACT — live --global-h*-font-size) ---------- */ --ct-size-h1: 70px; --ct-size-h2: 43px; --ct-size-h3: 30px; --ct-size-h4: 21px; --ct-size-h5: 17px; --ct-size-h6: 16px; /* ---- Typography: rhythm -------------------------------------------- * Letter-spacing values observed live: 1.5px is the dominant tracking on * uppercase display text; 0.5px and 3px also occur. Line heights are * IMPLEMENTATION DECISIONS — the live CSS expresses them per component * rather than as tokens. */ /* Buttons: their OWN tracking, measured on the buttons themselves in * 52.3G (1.5px). Until 52.3K they borrowed --ct-track-display because the * number happened to match; once display tracking became editable in * Elementor, that borrowing would have let a heading edit move every * button. Same value, separate role. */ --ct-track-button: 1.5px; --ct-leading-display: 1.15; --ct-leading-body: 1.7; /* ---- Colour: defined here, not yet bound ----------------------------- * Declared and measured, but NO component consumes them yet, so there is * no role for an administrator to edit. Each becomes an Elementor global * the day a component first uses it — not before, or Site Settings fills * with colours that change nothing. */ --ct-dark-alt: #1a1a1a; /* dark text/surface (x15) */ --ct-muted-alt: #7a7a7a; /* muted text, live (x5) */ --ct-border-soft: #c6c6c6; /* lighter divider, live */ --ct-overlay: rgba(0, 0, 0, 0.25); --ct-overlay-strong: rgba(0, 0, 0, 0.45); /* ---- Spacing -------------------------------------------------------- * FACT — the live site drives section rhythm from * --global-section-padding, observed at both 64px and 96px, and applies it * through calc(n / 4 * var(--global-section-padding)). */ --ct-section-padding: 96px; --ct-section-padding-compact: 64px; --ct-body-padding: 12px; --ct-gap: 24px; /* IMPLEMENTATION DECISION */ /* ---- Layout --------------------------------------------------------- * --ct-container is the GLOBAL container and is owned by the Elementor kit * (container_width = 1200): the kit is what actually constrains a page, so * the token mirrors it rather than competing with it. * * A frequency count over the live CSS gives 1280px x9, 1024px x8, * 1200px x7 — so 1280 is the most common width, NOT 1200 as an earlier * comment here claimed. That is not a contradiction: the site genuinely * uses three widths for three purposes, which is why three tokens exist. * The global default stays 1200 because the kit says so. */ --ct-container: 1200px; --ct-container-narrow: 1024px; --ct-container-wide: 1280px; /* ---- Breakpoints (IMPLEMENTATION DECISIONS, aligned to Elementor) --- */ --ct-bp-tablet: 1024px; --ct-bp-mobile: 767px; /* ---- Components (IMPLEMENTATION DECISIONS unless noted) ------------- */ --ct-radius: 0; /* reference buttons/cards show no radius */ --ct-border-width: 1px; --ct-transition: 200ms ease; /* ---- 2026 redesign: editorial layout system ------------------------- * DESIGN DECISIONS, not measurements. The client asked for a site whose * structure no longer mirrors carytamura.com, so from here on the layout * is designed rather than copied: left-aligned, sentence-case headings * under a small eyebrow, generous fluid spacing, warm paper sections, * image panels instead of full-bleed photo bands. The brand — red accent, * Playfair Display over Lato, the monogram — is unchanged. * * Fluid sizes are clamp(min, preferred, max) so one value serves phone to * desktop without per-breakpoint overrides. */ --ct-type-display: clamp(46px, 6.4vw, 96px); /* the home hero name */ --ct-type-h1: clamp(38px, 4.6vw, 68px); /* page titles */ --ct-type-h2: clamp(30px, 3.4vw, 50px); /* section titles */ --ct-type-h3: clamp(22px, 1.9vw, 28px); /* card and item titles */ --ct-type-lead: clamp(18px, 1.45vw, 21px); /* intro paragraphs */ --ct-type-small: 14px; --ct-type-eyebrow: 12px; --ct-track-eyebrow: 2.4px; --ct-track-heading: -0.01em; --ct-leading-heading: 1.12; --ct-max: 1320px; /* content measure */ --ct-measure: 62ch; /* comfortable line length */ --ct-gutter: clamp(20px, 5vw, 72px); /* page side gutter */ --ct-space-section: clamp(72px, 9vw, 140px); /* between sections */ --ct-space-block: clamp(32px, 4vw, 56px); /* heading to content */ --ct-header-h: 84px; /* the sticky header bar */ --ct-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } @media (max-width: 1024px) { :root { --ct-header-h: 72px; } } /* * THE BINDING — every token an administrator can reach through Elementor. * * Declared on body, not :root, and that is load-bearing: Elementor declares * its globals on the kit class (.elementor-kit-N), which it puts on . A * var() is resolved on the element that declares it, so on :root these would * find no global and resolve to nothing. On body they find it, and every * element below inherits the resolved value. Verified: the kit class and the * kit stylesheet are present on every page type this site renders. * * NO FALLBACK VALUES, deliberately. var(--e-global-color-accent, #ED2127) * would put the accent in two places, and the day someone edits one of them * the site has two accents. Elementor is the single source. * * The comment on each line is PROVENANCE — the value measured in 52.3F/G and * entered into Elementor in 52.3J. It is history, not a second definition. * * Colours: Site Settings › Global Colors. */ body { --ct-ink: var(--e-global-color-primary); /* Ink — headings, values. FACT #000000 */ --ct-label: var(--e-global-color-secondary); /* Label — REFERENCE-derived #666666 (the live homepage uses #848484) */ --ct-ink-body: var(--e-global-color-text); /* Body — body copy. FACT rgba(0,0,0,0.8), measured on the homepage and a property page */ --ct-accent: var(--e-global-color-accent); /* Accent — buttons, icons. FACT #ED2127 (x11) */ --ct-surface: var(--e-global-color-ctsurface); /* Card Surface — FACT #EBE7E0 (--infoBgColor) */ --ct-dark: var(--e-global-color-ctdark); /* Dark Panel — FACT #171819 (--bgColor) */ --ct-muted: var(--e-global-color-ctmuted); /* Muted — FACT #848484 (x12) */ --ct-border: var(--e-global-color-ctborder); /* Border — FACT #d5d5d5 */ --ct-canvas: var(--e-global-color-ctcanvas); /* Canvas — FACT #ffffff (--global-background-color) */ --ct-hairline: var(--e-global-color-cthairline); /* Hairline — REFERENCE-derived #f1f1f1 */ --ct-surface-alt: var(--e-global-color-ctsurfacealt); /* Light Section — FACT #f8f8f8 */ --ct-on-dark: var(--e-global-color-ctondark); /* On Dark — #ffffff */ --ct-on-dark-muted: var(--e-global-color-ctondarkmuted); /* On Dark Muted — REFERENCE-derived #7d7d7d */ --ct-paper: var(--e-global-color-ctpaper); /* Paper — 2026 redesign #F6F3EE: warm section ground, hero title band, footer */ --ct-accent-strong: var(--e-global-color-ctaccentstrong); /* Accent Strong — 2026 redesign #C8161C: the brand red deepened so white button labels pass WCAG AA (5.8:1; #ED2127 gives 4.0:1) */ /* Families: Site Settings › Global Fonts — Display, Body and Label. FACT — * the live site requests exactly Playfair Display and Lato from Google * Fonts. Elementor loads whichever family a global names, so changing one * in Site Settings changes both what is requested and what is drawn. * * Family is bound here; Phase 52.3K bound four further properties in the * block below, each only where one role draws one value. The Section * Heading global has no component in its role (its 1.2px tracking matches * nothing drawn), so it is left unbound rather than assigned by guesswork. * * The generic names after each var() are the system fallback stack used * while a web font loads or if it fails. They are not a second choice of * typeface, which is why they stay in this file. */ --ct-font-display: var(--e-global-typography-primary-font-family), Georgia, 'Times New Roman', serif; --ct-font-body: var(--e-global-typography-text-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --ct-font-label: var(--e-global-typography-accent-font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Typography properties beyond family (Phase 52.3K) — bound ONLY where * the audit measured one role drawing one value everywhere it appears. * Body size 16px on body copy, inputs and the consent line. * Label size 13px on every label: nav, phone, badge, hero meta, * stat/fact labels, agent kicker/position, form labels. * Display spacing 1.5px on every display heading (title, fact and form * headings, agent name, footer name). * Label spacing 1.6px on every label, and on the footer eyebrow, * which 52.3F deliberately set in label tracking. * NOT bound — the globals' values differ from what renders, or one role * draws several values: weights (Display global 400 vs headings drawn at * 500; Label global 500 vs labels drawn at 400/700), every line height * (1 / 1.15 / 1.7 by component, and the globals are em where the tokens * are unitless), display sizes (70/43/30/21 by component), and * text-transform (set per component). */ --ct-size-body: var(--e-global-typography-text-font-size); --ct-size-label: var(--e-global-typography-accent-font-size); --ct-track-display: var(--e-global-typography-primary-letter-spacing); --ct-track-label: var(--e-global-typography-accent-letter-spacing); } /* * Bind the verified families to the document. * * Deliberately minimal: this is the FOUNDATION, not the design. It sets the * two families and nothing else, so the template phase starts from correct * typefaces without inheriting styling decisions nobody has made yet. */ body { font-family: var(--ct-font-body); font-size: var(--ct-size-body); line-height: var(--ct-leading-body); color: var(--ct-ink-body); background-color: var(--ct-canvas); } h1, h2, h3, h4, h5, h6 { font-family: var(--ct-font-display); line-height: var(--ct-leading-display); /* Stated, not inherited. Body copy is --ct-ink-body (80% black, measured); * headings are pure black. Without this they would inherit the body value * and quietly lose the contrast the live site gives them. */ color: var(--ct-ink); }