/* ============================================================================= THE SCARE FACTOR — DESIGN TOKENS (production copy) SOURCE OF TRUTH: design-system/tokens/tsf-tokens.css — edit values THERE, then mirror them here. design-system/tools/token-audit.ps1 diffs the two copies' custom-property lines and fails when they drift. Differences from the source copy (intentional, production-only): - "Scare Factor Custom" @font-face uses ROOT-RELATIVE urls so the same file works on staging and production hosts. - No preview-only notes. Enqueued site-wide by Tylers-Code/global-setup.php at wp_enqueue_scripts priority 1 (handle: tsf-tokens) so it prints ahead of plugin styles. ========================================================================== */ /* ----------------------------------------------------------------------------- FONT REGISTRATION — serif --tsf-font-serif names "Roboto Slab" (promoted from the Dibs board's stack). No .woff2 for it is hosted on wp-content, so it is registered against a locally-installed copy only; the Georgia fallback carries every serif rule — which is the current live behaviour, not a regression. -------------------------------------------------------------------------- */ @font-face { font-family: "Roboto Slab"; font-weight: 400; font-style: normal; font-display: swap; src: local("Roboto Slab Regular"), local("RobotoSlab-Regular"), local("Roboto Slab"); } @font-face { font-family: "Roboto Slab"; font-weight: 700; font-style: normal; font-display: swap; src: local("Roboto Slab Bold"), local("RobotoSlab-Bold"); } :root { /* --------------------------------------------------------------------- BRAND — red Elementor --e-global-color-primary is #FF0000. The plugins independently drifted to #E10600 (reviews/archive) and #E01E2B (dibs). Both should converge on --tsf-red. --------------------------------------------------------------------- */ --tsf-red: #FF0000; /* primary. Elementor global-color-primary */ --tsf-red-hover: #C00000; /* Elementor button/input hover background */ --tsf-red-solid: #BB0000; /* Elementor button resting background */ --tsf-red-deep: #8F0000; /* deep fill, gradient stops */ --tsf-red-ink: #5C0000; /* hover glow / shadow tint */ --tsf-red-shadow: #500000; /* card hover box-shadow tint */ /* DEPRECATED — kept only so existing plugin CSS can be migrated, not extended. */ --tsf-red-legacy-reviews: #E10600; /* was --tsfrv-red / --arch-red */ --tsf-red-legacy-dibs: #E01E2B; /* was --red in .hd-root */ /* --------------------------------------------------------------------- BRAND — orange (accent + link colour) --------------------------------------------------------------------- */ --tsf-orange: #FF6600; /* Elementor --e-global-color-accent, links */ --tsf-orange-warm: #FF6A00; /* haunted-house category accent */ /* --------------------------------------------------------------------- SURFACES — dark ladder, lightest at the top of the stack --------------------------------------------------------------------- */ --tsf-bg: #131313; /* page background. Elementor body */ --tsf-surface: #0F0F0F; /* card base (.tsf-card) */ --tsf-surface-sunken: #0C0C0C; /* dibs --paper */ --tsf-surface-raised: #151515; /* dibs --paper2, inputs */ --tsf-surface-panel: #1A1A1A; /* review panels, toggle buttons */ --tsf-black: #000000; /* Elementor --e-global-color-secondary */ /* --------------------------------------------------------------------- BORDERS --------------------------------------------------------------------- */ --tsf-line: #3F3F3F; /* card border, 2px */ --tsf-line-soft: #2A2A2A; /* hairline dividers */ --tsf-line-strong: #333333; /* list-view row rule */ /* --------------------------------------------------------------------- TEXT --------------------------------------------------------------------- */ --tsf-text: #CBCBCB; /* body. Elementor --e-global-color-text */ --tsf-text-strong: #F2F2F2; /* emphasis */ --tsf-text-bright: #FFFFFF; /* scores, on-red labels */ --tsf-text-muted: #8A8A8A; /* captions, meta, labels */ --tsf-text-faint: #999999; /* list-view secondary */ /* --------------------------------------------------------------------- LISTING-TYPE ACCENTS — semantic, not drift. Each listing type owns an accent + a subtly tinted card surface. Keep all three in sync. --------------------------------------------------------------------- */ --tsf-type-haunt: #FF6A00; --tsf-type-haunt-surface: #1C1A24; --tsf-type-paranormal: #00B4B4; --tsf-type-paranormal-surface: #191C1F; --tsf-type-spooky: #C77DFF; --tsf-type-spooky-surface: #1C1C1C; /* --------------------------------------------------------------------- STATUS — from the Haunt Dibs board --------------------------------------------------------------------- */ --tsf-status-open: #5FB98A; /* slots available */ --tsf-status-lead: #CAA24A; /* lead / previously-dibbed */ --tsf-status-video: #C98A2A; /* video deliverable */ --tsf-status-partner: #6A8CAF; /* co-review */ --tsf-status-partner-text: #9FC0E0; /* --------------------------------------------------------------------- TYPOGRAPHY "Scare Factor Custom" is the family name Elementor registers site-wide. The plugins used to register the SAME woff2 under the name "Scare Factor" via their own @font-face — a duplicate download. Standardised on the Elementor name; the old plugin alias stays in the stack as fallback. --------------------------------------------------------------------- */ --tsf-font-display: "Scare Factor Custom", "Scare Factor", "Oswald", "Anton", Impact, sans-serif; --tsf-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --tsf-font-serif: "Roboto Slab", Georgia, "Times New Roman", serif; --tsf-weight-body: 400; --tsf-weight-medium: 500; /* Elementor accent typography */ --tsf-weight-strong: 600; /* Elementor primary typography */ --tsf-weight-bold: 700; /* Type scale — rem-based, 16px root. Display sizes are fluid. */ --tsf-size-3xs: 0.72rem; /* 11.5px — eyebrow labels, tracked uppercase */ --tsf-size-2xs: 0.75rem; /* 12px — pills */ --tsf-size-xs: 0.82rem; /* 13px — meta, table rows, controls */ --tsf-size-sm: 0.9rem; /* 14.4px — secondary body */ --tsf-size-base: 1rem; /* 16px — body */ --tsf-size-md: 1.15rem; /* 18.4px — card titles */ --tsf-size-lg: 1.25rem; /* 20px — listing card title */ --tsf-size-xl: 2rem; /* 32px — h2 */ --tsf-size-2xl: 2.5rem; /* 40px — h1 */ --tsf-size-score: clamp(2.1rem, 4.8vw, 3.4rem); /* final review score */ --tsf-leading-tight: 1.2; --tsf-leading-body: 1.6; --tsf-tracking-wide: 0.5px; /* buttons, pills */ --tsf-tracking-caps: 0.12em; /* uppercase eyebrow labels */ /* --------------------------------------------------------------------- SPACING — the 13px grid gap is the signature rhythm; the rest is a conventional ramp reconciled from observed values. --------------------------------------------------------------------- */ --tsf-space-1: 4px; --tsf-space-2: 6px; --tsf-space-3: 8px; --tsf-space-4: 10px; --tsf-space-5: 13px; /* grid gutter */ --tsf-space-6: 16px; --tsf-space-7: 20px; --tsf-space-8: 26px; --tsf-space-9: 30px; --tsf-space-10: 48px; --tsf-gutter: clamp(16px, 6vw, 80px); /* @kind spacing */ --tsf-content: 1200px; /* max content width */ /* --------------------------------------------------------------------- RADIUS --------------------------------------------------------------------- */ --tsf-radius-xs: 4px; --tsf-radius-sm: 8px; --tsf-radius-md: 10px; --tsf-radius-lg: 13px; /* brand radius — Elementor global button */ --tsf-radius-xl: 31px; /* cards, pills */ --tsf-radius-round: 50%; /* --------------------------------------------------------------------- ELEVATION --------------------------------------------------------------------- */ --tsf-shadow-card: 0 13px 50px -13px #000000; --tsf-shadow-card-hover: 0 13px 50px -13px var(--tsf-red-shadow); --tsf-shadow-text: 0 2px 8px rgba(0, 0, 0, 0.7); --tsf-shadow-overlay: 0 4px 20px rgba(0, 0, 0, 0.6); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --tsf-transition: 180ms ease-in-out; /* @kind other */ /* --------------------------------------------------------------------- DESTRUCTIVE — deliberately NOT the brand red. Delete-account, release- claim, and remove flows should never share a colour with primary calls to action. Promoted from the flat-UI values already used by the account danger zone, which had the right instinct. --------------------------------------------------------------------- */ --tsf-destructive: #C0392B; --tsf-destructive-hover: #E04B3B; --tsf-destructive-edge: #7A2420; --tsf-destructive-text: #FF8A7F; --tsf-destructive-wash: rgba(192, 57, 43, .055); /* --------------------------------------------------------------------- SITE CHROME — Elementor Theme Builder templates, not repo files. Documented here so code can match them; edit them in Elementor. --------------------------------------------------------------------- */ --tsf-footer-bg: #0B0B0B; /* one step below the page */ --tsf-nav-text: #F3F3F3; --tsf-nav-size: 15px; --tsf-nav-tracking: 1.5px; --tsf-header-height: 109px; /* header is position:static, NOT sticky */ /* --------------------------------------------------------------------- STAR RATING — the guest-review picker used #FFB300 while HA's bucket / XP accents use #FFB703. Four units apart and indistinguishable; both resolve here. --------------------------------------------------------------------- */ --tsf-star: #FFB703; /* was #FFB300 in tsf-reviews.css */ /* --------------------------------------------------------------------- BREAKPOINTS (reference — CSS custom properties can't be used in media queries; these document the values the codebase already uses) mobile max-width: 600px single-column card grid tablet max-width: 1024px two-column card grid list/grid toggle pivot 767px / 768px --------------------------------------------------------------------- */ } /* ============================================================================= HAUNT ADVISOR RECONCILIATION LAYER From the `wp_add_inline_style` blocks inside haunt-advisor/includes/. HA independently grew a FOURTH red family and a parallel surface ladder. The tokens below map HA's roles onto the canonical scale. Nothing here is a new value — each is the nearest canonical token to what HA already renders. ========================================================================== */ :root { /* --------------------------------------------------------------------- HA red family — what it used → what it resolves to #FF2B2B tabs, trip primary, load-more → --tsf-red #FF3B3B pins, fav active, toast accent → --ha-saved #FF2015 auth CTA (+#FF3B30 hover) → --tsf-red / --tsf-red-hover #FF6B6B list names, trip stop titles → --ha-link #FF5A5A input error, thumbs-down active → --ha-danger #C40000 trip primary hover → --tsf-red-hover --------------------------------------------------------------------- */ --ha-accent: var(--tsf-red); /* was #FF2B2B / #FF2015 */ --ha-accent-hover: var(--tsf-red-hover); /* was #C40000 / #FF3B30 */ --ha-link: #FF6B6B; /* soft red for titles on dark */ --ha-danger: #FF5A5A; /* validation, negative reaction */ /* --------------------------------------------------------------------- HA surface ladder → canonical. HA runs eight steps where the system has five; these collapse without a visible change. --------------------------------------------------------------------- */ --ha-surface-card: var(--tsf-surface-panel); /* was #161616 */ --ha-surface-control: #1B1B1B; /* buttons, mini controls */ --ha-surface-inset: var(--tsf-surface-sunken); /* was #0E0E0E */ --ha-scrim: rgba(0, 0, 0, .72); /* modal overlay + blur(4px)*/ --ha-chip: rgba(18, 18, 18, .6); /* glassy corner-icon chip */ /* HA borders → canonical */ --ha-line-hover: #666666; /* HA text → canonical */ --ha-text-faint: #6F6F6F; /* --------------------------------------------------------------------- HA semantic accents. These are NOT drift — they encode state and should be kept, but named rather than repeated as literals. --------------------------------------------------------------------- */ --ha-saved: #FF3B3B; /* favourite / bookmark active */ --ha-bucket: #FFB703; /* bucket-list active, XP "next rank", badge req */ --ha-visited: #37D67A; /* thumbs-up active, visited */ --ha-warn: #FFB37A; /* missing coords, origin warnings */ --ha-notes: #FF8A3D; /* card notes, trip chip names */ --ha-drag: var(--tsf-orange); /* drag-and-drop affordance (#FF6600) */ --ha-xp-fill: linear-gradient(90deg, var(--tsf-red), #FF7A3D); /* --------------------------------------------------------------------- FOCUS — brand-red ring; it is the only keyboard affordance in HA, so it must stay visible. --------------------------------------------------------------------- */ --ha-focus: var(--tsf-red); --ha-focus-ring: 0 0 0 3px rgba(255, 0, 0, .45); --ha-focus-legacy: #2684FF; /* DEPRECATED — replace on sight */ /* HA radius — trip chips/tabs that read fully rounded at their size. */ --ha-radius-pill: 20px; /* --------------------------------------------------------------------- DEPRECATED — the light-theme defaults that shipped before the dark-theme pass. Kept only for audit reference; nothing should point at these. --------------------------------------------------------------------- */ --ha-legacy-white: #FFFFFF; --ha-legacy-red: #C0392B; --ha-legacy-green: #27AE60; --ha-legacy-amber: #F39C12; --ha-legacy-border: #DDDDDD; --ha-legacy-text: #555555; } /* Brand display font — the single site-wide registration. Root-relative src so the same file resolves on production and staging. Elementor's own custom-font registration (same family, same files) merges with this; browsers download the woff2 once. */ @font-face { font-family: "Scare Factor Custom"; src: url("/wp-content/uploads/2026/03/ScareFactor-Regular.woff2") format("woff2"), url("/wp-content/uploads/2026/03/ScareFactor-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }