/** * tokens.css — Roomvo listing/product design tokens. * * Single source of truth for fonts, colours, button styling, image framing and * radii used across the PLP listing, filter widget, toolbar, hero and single * product templates. Every custom stylesheet consumes these `--rv-*` variables * instead of hardcoding values, so the listing follows the site's global config. * * Mapping strategy (3-layer token model): * Kadence Customizer global → --global-* → our --rv-* → CSS rules * * Tokens default to the matching Kadence global palette / typography variable so * that when a client edits the global config (Customizer › Global Styles), the * listing and product pages follow automatically. The second value in each * var() is a literal fallback equal to the live design, used only when the * Kadence global is absent (e.g. block-editor preview context). * * Phase 2 (Customizer "Listing & Product" section) overrides the framing tokens * (--rv-img-radius / --rv-img-border-* / --rv-btn-radius) via an inline :root * block in ; the defaults below preserve the current appearance. * * NOTE for design review: the cards / wishlist previously used a slightly darker * orange (#e33505) than the global accent palette1 (#f95204). Wiring --rv-accent * to palette1 makes them follow the global brand colour — confirm this is the * intended single brand orange. */ :root { /* ---- Typography ---------------------------------------------------- */ /* Live global body font is Montserrat. */ --rv-font: var(--global-body-font-family, 'Montserrat', sans-serif); /* Per-group font families (Customizer "Listing & Product Style" › Fonts). * Each defaults to --rv-font, so an untouched site follows the Kadence * global body font exactly as before. Picking a family in the Customizer * re-points the group token (and loads that Google font). Groups: * title → product + category titles (listing) and related heading * breadcrumb → listing hero + PDP summary breadcrumbs * filter → filter widget title + options * controls → "Show more", sort, active-filter pills, pagination, card CTA * pdp → single-product summary / details / extras * The four "title" groups (category / card / product name / related heading) * each have their own family + size + weight, see the Titles block below. */ --rv-breadcrumb-font: var(--rv-font); --rv-filter-title-font: var(--rv-font); --rv-filter-option-font: var(--rv-font); --rv-filter-reset-font: var(--rv-font); --rv-controls-font: var(--rv-font); /* Toolbar (above the grid) — default to the shared controls font so an * untouched site keeps inheriting it; a Customizer choice re-points each. */ --rv-toolbar-filter-btn-font: var(--rv-controls-font); --rv-toolbar-pill-font: var(--rv-controls-font); --rv-toolbar-reset-font: var(--rv-controls-font); --rv-toolbar-count-font: var(--rv-controls-font); --rv-toolbar-sort-font: var(--rv-controls-font); --rv-pagination-font: var(--rv-controls-font); --rv-pdp-font: var(--rv-font); /* ---- Titles — four independent groups (family + size + weight) ----- * Each is a distinct Customizer control so the client can style them * separately. Defaults equal the original hardcoded values. */ /* Category / archive title (listing hero, .plp-hero__title) */ --rv-cat-title-font: var(--rv-font); --rv-cat-title-size: 40px; --rv-cat-title-weight: 600; /* Product preview title in a listing card (.plp-product-title) */ --rv-card-title-font: var(--rv-font); --rv-card-title-size: 15px; --rv-card-title-weight: 500; /* Brand line in a listing card (.plp-product-brand) */ --rv-card-brand-font: var(--rv-font); --rv-card-brand-size: 12px; --rv-card-brand-weight: 500; /* "See this in my room" card button (.plp-product-see-in-room) — * family defaults to the shared controls font, as before. */ --rv-card-room-btn-font: var(--rv-controls-font); --rv-card-room-btn-size: 14px; --rv-card-room-btn-weight: 600; /* Product name on the product page (.rv-product-summary__title) — * follows the general PDP font by default, size/weight below in the PDP block. */ --rv-prodname-font: var(--rv-pdp-font); /* Related-products heading (.woocommerce section.products>h2, "Other * products you might like") — matches the live Kadence global h2 (40/600). */ --rv-related-title-font: var(--rv-font); --rv-related-title-size: 40px; --rv-related-title-weight: 600; /* Per-group font sizes (Customizer-controllable). Defaults equal the * original hardcoded values, so the untouched site renders as before. * Family + colour follow the group / global tokens above. */ --rv-breadcrumb-size: 14px; /* breadcrumbs (listing + PDP) */ --rv-breadcrumb-weight: 500; /* breadcrumbs (listing + PDP) */ --rv-filter-title-size: 14px; /* filter group heading */ --rv-filter-title-weight: 700; /* filter group heading */ --rv-filter-option-size: 14px; /* filter term label */ --rv-filter-option-weight: 500; /* filter term label */ --rv-filter-reset-size: 13px; /* filter "Reset Filters" button */ --rv-filter-reset-weight: 600; /* filter "Reset Filters" button */ --rv-showmore-size: 13px; /* filter "Show more" button */ --rv-pagination-size: 14px; /* pagination page numbers */ --rv-pagination-weight: 500; /* pagination page numbers */ /* Toolbar left-side controls (above the grid) */ --rv-toolbar-filter-btn-size: 14px; /* mobile "Filter" button */ --rv-toolbar-filter-btn-weight: 500; /* mobile "Filter" button */ --rv-toolbar-pill-size: 12px; /* active-filter pills */ --rv-toolbar-pill-weight: 500; /* active-filter pills */ --rv-toolbar-reset-size: 12px; /* "Reset All" link */ --rv-toolbar-reset-weight: 500; /* "Reset All" link */ /* Toolbar right-side controls (above the grid) */ --rv-toolbar-count-size: 14px; /* "46 items" count */ --rv-toolbar-count-weight: 500; /* "46 items" count */ --rv-toolbar-sort-size: 14px; /* sort label + dropdown */ --rv-toolbar-sort-weight: 500; /* sort label + dropdown */ /* ---- Brand / accent ----------------------------------------------- */ /* Live: palette1 #f95204 (accent), palette4 #d4581e (darker brand orange). */ --rv-accent: var(--global-palette1, #f95204); --rv-accent-hover: var(--global-palette4, #d4581e); /* ---- Text --------------------------------------------------------- */ --rv-text: var(--global-palette3, #1e1f20); /* strongest text */ --rv-text-muted: rgba(0, 0, 0, 0.35); /* secondary / labels */ /* ---- Surfaces ----------------------------------------------------- */ --rv-surface: var(--global-palette9, #ffffff); /* white background */ --rv-surface-soft: var(--global-palette8, #f2f1f0); /* pills / chips bg */ /* ---- Borders ------------------------------------------------------ */ --rv-border: rgba(225, 225, 225, 1); /* ---- Listing card button (e.g. "See in my room") ------------------ */ --rv-btn-bg: #1f242b; --rv-btn-bg-hover: #000; --rv-btn-text: #ffffff; /* ---- Primary / product button (Customizer-controllable) ----------- * Colour of the product-page CTA. Deliberately shared as the single * "one config" accent that also drives the pagination active state, the * filter checkbox and the product swatch outline (per client request). * Defaults to --rv-accent so an untouched site follows the brand colour; * the Customizer "Product button colour" control overrides it. */ --rv-btn-primary: var(--rv-accent); --rv-btn-primary-text: #ffffff; /* ---- Secondary buttons (Customizer-controllable colours) ----------- * Defaults equal the previous hardcoded values, so an untouched site is * unchanged; the Customizer colour controls override each. */ --rv-filter-reset-bg: var(--rv-surface); /* filter "Reset Filters" button */ --rv-filter-reset-text: var(--rv-text); --rv-toolbar-filter-btn-bg: var(--rv-surface-soft); /* mobile "Filter" button */ --rv-toolbar-filter-btn-text: var(--rv-text); /* Filter checkbox (square brand-style). The CHECKED fill/border follows the * "one config" product-button accent (--rv-btn-primary); these cover the rest. */ --rv-filter-checkbox-border: rgba(0, 0, 0, 0.65); /* unchecked border */ --rv-filter-checkbox-bg: var(--rv-surface); /* unchecked background */ --rv-filter-checkbox-check: #ffffff; /* checkmark tick */ --rv-filter-checkbox-focus: rgba(238, 99, 51, .35);/* focus outline */ /* ---- Image framing + radii (Customizer-controllable, Phase 2) ----- */ --rv-img-radius: 6px; --rv-btn-radius: 6px; --rv-img-border-width: 0px; --rv-img-border-color: var(--rv-border); /* ---- PDP product title (Customizer-controllable) ----------------- * The product

deliberately keeps its own size in the compact summary * column instead of the global H1 (which would be too large here). These * tokens expose that size / weight in the "Listing & Product Style" * Customizer section. Defaults preserve the original 28px / 600. */ --rv-pdp-title-size: 28px; --rv-pdp-title-weight: 600; /* Other PDP text sizes (Customizer-controllable). Defaults preserve the * original design. Family + colour still follow the Kadence globals. */ --rv-pdp-brand-size: 12px; /* brand line above the title */ --rv-pdp-brand-weight: 500; /* brand line above the title */ --rv-pdp-specs-size: 14px; /* Specifications labels + values */ --rv-pdp-section-title-size: 20px; /* section subheadings, e.g. "Specifications" */ /* Summary attribute rows (e.g. "Size: 2" x 6""). Family defaults to the PDP * font so an untouched site keeps inheriting it; a Customizer choice * re-points each independently. */ --rv-pdp-brand-font: var(--rv-pdp-font); --rv-pdp-attr-label-font: var(--rv-pdp-font); --rv-pdp-attr-label-size: 12px; --rv-pdp-attr-label-weight: 500; --rv-pdp-attr-value-font: var(--rv-pdp-font); --rv-pdp-attr-value-size: 14px; --rv-pdp-attr-value-weight: 500; /* Product CTA button (e.g. "Request an Estimate", .rv-product-summary__cta). * Fully independent controls. Colours default to the shared "one config" * product-button accent, so it still tracks that until overridden here. */ --rv-product-cta-font: var(--rv-pdp-font); --rv-product-cta-size: 16px; --rv-product-cta-weight: 500; --rv-product-cta-bg: var(--rv-btn-primary); --rv-product-cta-text: var(--rv-btn-primary-text); --rv-product-cta-hover-bg: var(--rv-accent-hover); }