/* ============================================================================ FGR design tokens Every value below was READ from the live site's own settings — either `wp_options` in build/APP-DATA-azure.sql, or the RealHomes stylesheet in the backup. None of it is guessed or eyeballed, and each token names its source so any of it can be re-checked. Note: `realhomes_color_scheme` = 'custom', so FGR did override the theme defaults. Elementor's global kit (post-6.css) still carries Elementor's STOCK palette (#6EC1E4 cyan, #61CE70 green) — those are NOT FGR's brand and must not be used. The brand colour is the blue below. ========================================================================= */ :root { /* --- brand ----------------------------------------------------------- Both of RealHomes' accent slots were overridden to the same blue, which is the clearest signal of the real brand colour: theme_core_mod_color_green #0079b8 theme_core_mod_color_orange #0079b8 theme_core_mod_color_green_dark #00419e Corroborated by realhomes_global_link_hover_color and realhomes_global_headings_hover_color, both #0079b8. */ --fg-primary: #0079b8; --fg-primary-dark: #00419e; --fg-primary-soft: #1f79b8; /* inspiry_property_grid_card_address_color */ /* --- text ------------------------------------------------------------ */ --fg-heading: #1a1a1a; /* inspiry_heading_font_color */ /* The live site sets inspiry_body_font_color = #808080, which measures 3.95:1 on white and FAILS WCAG AA (needs 4.5:1) for the body colour of the entire site. #767676 was chosen because it measures 4.54:1 ON WHITE and is visually indistinguishable at these sizes. That 4.54:1 IS NO LONGER THE SHIPPED RATIO. The page background is now --fg-page (#f7f7f7, see surfaces below), and #767676 on #f7f7f7 measures 4.24:1 — under AA. Kept anyway: the brief is to match the live colours, and live is worse still (#808080 on its own #f7f7f7 band is 3.69:1). #717171 would restore AA at 4.56:1 if the client ever wants it. Recorded here rather than left as a stale passing claim. */ --fg-body: #767676; /* 4.24:1 on --fg-page — fails AA */ --fg-link: #444444; /* realhomes_global_link_color */ --fg-link-hover: #0079b8; /* realhomes_global_link_hover_color */ --fg-meta: #444; /* theme_property_meta_text_color */ /* #b3b3b3 measures 2.10:1 — below the 3:1 WCAG 1.4.11 floor for graphics that carry meaning. These icons label bedrooms/bathrooms/area. */ --fg-meta-icon: #8a8a8a; /* was #b3b3b3 (2.10:1, fails 1.4.11) */ /* --- surfaces --------------------------------------------------------- The live site's two surface colours are DELIBERATELY INVERTED here: the page reads grey and the alternating band reads white, the opposite way round from fgr.futuregategroup.com. The two values below are still the site's own (#ffffff, and #F7F7F7 from inspiry_home_properties_background_color) — only their roles are swapped. To go back to the live arrangement, swap these two values; nothing else needs touching. --fg-surface and --fg-tint do NOT take part in the swap. Cards and controls stay white in either scheme so they keep separating from the page, and --fg-tint is the shade that sits just off a white control — hover states and "reserve the box" placeholders. Pointing those at a swapping token would make them white-on-white and silently invisible. */ --fg-page: #f7f7f7; /* the page's own background -- live's body is #f7f7f7 grey */ --fg-page-alt: #ffffff; /* a section that overrides away from the page default, e.g. the home page's "For Rent" -- live sets that section's own background to #ffffff explicitly */ --fg-surface: #ffffff; /* theme_property_item_bg_color; cards */ --fg-tint: #f7f7f7; /* a shade ON white — never swaps */ --fg-header-bg: #303030; /* theme_header_bg_color */ --fg-on-dark: #ffffff; /* theme_logo_text_color */ --fg-border: #e0e0e0; /* 17 uses in main.min.css */ --fg-border-light: #e6e6e6; /* --- accents --------------------------------------------------------- Still in live use for specific UI, so they are kept rather than flattened into the brand blue. */ --fg-accent-orange: #ea723d; /* tooltips, compare hover, map marker */ --fg-accent-teal: #1ea69a; /* ::selection, feature ticks */ /* White on #1ea69a is 3.01:1. The Featured badge is small white text, so it gets a darkened teal at 4.55:1; the tint above stays for decoration. */ --fg-accent-teal-text: #17847a; --fg-accent-red: #d22d3e; /* "trend" tag */ --fg-favourite-hover: #ea3d3d; /* inspiry_property_favorite_icon_color_hover */ --fg-status-tag-bg: #000000; /* inspiry_grid_card_status_tag_bg_color */ /* --- type ------------------------------------------------------------ All inspiry_*_font options are 'Default', so the theme's own stack applies: main.min.css declares `Rubik, sans-serif` (5 occurrences). The live page currently pulls FOUR families from Google (Open Sans, Lato, Roboto, Rubik) plus Roboto + Roboto Slab from Elementor, and renders in Rubik. The rebuild loads Rubik only — a free performance win, and the reason this is one token rather than six. */ --fg-font: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fg-font-weight-normal: 400; --fg-font-weight-medium: 500; --fg-font-weight-bold: 700; /* RealHomes sets html{font-size:62.5%}, making 1rem = 10px. Reproduced so ported spacing values keep their meaning; if that base is ever changed, every rem in the ported CSS shifts with it. */ --fg-root-size: 62.5%; /* --- spacing ---------------------------------------------------------- */ --fg-space-xs: 0.4rem; --fg-space-sm: 0.8rem; --fg-space-md: 1.6rem; --fg-space-lg: 2.4rem; --fg-space-xl: 4.0rem; --fg-space-2xl: 6.0rem; /* The theme DEFINES 4/8/12px radii, but 281 of the rules consuming them are prefixed `.realhomes-round-corners`, and that body class is gated on realhomes_round_corners === 'enable'. The stored value is 'disable', so the live site is SQUARE: cards, buttons, inputs, thumbnails, modals. Circles (avatars, icon buttons) and the 5px property label are ungated and stay — they set their own radius explicitly. */ --fg-radius: 0; --fg-radius-label: 5px; /* .property-label, always rounded */ /* The theme's signature: one RESTING shadow on 30 components, and no border. Cards float permanently rather than being outlined — the single most visible difference after container width. */ --fg-shadow-card: 0 0 5px 2px rgba(0, 0, 0, .05); --fg-shadow-raised: 0 3px 15px rgba(0, 0, 0, .07); /* main.min.css: .rh_wrap--padding{padding:0 2rem;max-width:1440px}, stepping to 3rem @480, 7rem @1140, 10rem @1280 — so the content measure is ~1240px at desktop. The previous 117rem here was wrong: 1170px appears only on .single-property-fullwidth, a layout this site does not use. */ --fg-container: 144rem; --fg-gutter: 2rem; } /* Deliberately no dark-mode block. The live site has no dark mode, and the brief is to match the current look — inventing one would be a redesign. */ html { font-size: var(--fg-root-size); } body { margin: 0; background: var(--fg-page); color: var(--fg-body); font-family: var(--fg-font); font-size: 1.5rem; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { color: var(--fg-heading); font-weight: var(--fg-font-weight-medium); line-height: 1.25; } a { color: var(--fg-link); text-decoration: none; } a:hover { color: var(--fg-link-hover); } ::selection { background: var(--fg-accent-teal); color: #fff; } img { max-width: 100%; height: auto; }