/* ================================================================ RENTVALA — Selectable site skins (themes) Loaded after tokens.css. The active skin is set on by the inline head script from the `site_theme` setting (no flash). Each skin only re-paints the BRAND palette + a few structural tokens; light/dark neutrals still come from tokens.css. Skins: r360 (default) · acres99 · housing · sqyards · mint ================================================================ */ /* Shared structural hooks every skin can tune */ :root{ --hero-grad: linear-gradient(120deg, rgba(11,57,49,.62), rgba(11,57,49,.30)); --btn-radius: var(--r-pill); --card-radius: var(--r-lg); } /* ── 360realtors look — brand Red (#ED1C24) + Deep Navy (DEFAULT) ─── */ html[data-skin="r360"]{ --primary: #ED1C24; --primary-d: #C8161D; --primary-dd: #18233C; --primary-ink: #C8161D; --primary-l: #FDE7E7; --primary-ll: #FEF5F5; --accent: #18233C; --accent-ink: #18233C; --warm-mint: #FBD7D8; --bg-mint: #FDE7E7; --mint-banner:#18233C; --sh-mint: 0 10px 30px rgba(237,28,36,.22); --hero-grad: linear-gradient(115deg, rgba(24,35,60,.82), rgba(24,35,60,.46)); --btn-radius: 6px; --card-radius: 10px; } html[data-skin="r360"][data-theme="dark"]{ --primary-dd:#24375C; --primary-l:#3A1313; --primary-ll:#240D0D; } /* ── 99acres look — Royal Blue + Coral Red ───────────────────── */ html[data-skin="acres99"]{ --primary: #0B5CAB; --primary-d: #094B8C; --primary-dd: #06325E; --primary-ink: #0A4E92; --primary-l: #E2EEF9; --primary-ll: #F2F8FD; --accent: #E8431F; --accent-ink: #B8330F; --warm-mint: #CFE3F5; --bg-mint: #E2EEF9; --mint-banner:#06325E; --sh-mint: 0 10px 30px rgba(11,92,171,.20); --hero-grad: linear-gradient(115deg, rgba(6,50,94,.78), rgba(11,92,171,.42)); --btn-radius: 6px; --card-radius: 8px; } html[data-skin="acres99"][data-theme="dark"]{ --primary-l:#0E2236; --primary-ll:#0A1825; } /* ── Housing.com look — Indigo-Blue + Teal, very rounded ──────── */ html[data-skin="housing"]{ --primary: #3B4FE4; --primary-d: #2C3CC4; --primary-dd: #1B2A7A; --primary-ink: #2E3EC8; --primary-l: #E7EAFD; --primary-ll: #F3F4FE; --accent: #00B8A9; --accent-ink: #00897B; --warm-mint: #D7DBFB; --bg-mint: #E7EAFD; --mint-banner:#1B2A7A; --sh-mint: 0 12px 34px rgba(59,79,228,.22); --hero-grad: linear-gradient(120deg, rgba(27,42,122,.74), rgba(0,184,169,.40)); --btn-radius: 999px; --card-radius: 18px; } html[data-skin="housing"][data-theme="dark"]{ --primary-l:#161A38; --primary-ll:#0F1226; } /* ── Square Yards look — Premium Navy + Gold ─────────────────── */ html[data-skin="sqyards"]{ --primary: #234E70; --primary-d: #1A3C58; --primary-dd: #122B41; --primary-ink: #1C4366; --primary-l: #E5ECF2; --primary-ll: #F2F6F9; --accent: #E0A82E; --accent-ink: #9C7314; --warm-yellow:#E0A82E; --warm-mint: #D7E2EC; --bg-mint: #E5ECF2; --mint-banner:#122B41; --sh-mint: 0 12px 34px rgba(35,78,112,.22); --hero-grad: linear-gradient(115deg, rgba(18,43,65,.82), rgba(35,78,112,.50)); --btn-radius: 8px; --card-radius: 10px; } html[data-skin="sqyards"][data-theme="dark"]{ --primary-l:#13202B; --primary-ll:#0D161E; } /* ── Rentvala Classic — the original mint (explicit = :root) ─── */ html[data-skin="mint"]{ --primary: #5FC7A4; --primary-d: #3FB58F; --primary-dd: #1F7A6E; --primary-ink: #17745A; --primary-l: #D8F0E7; --primary-ll: #F1FAF6; --accent: #FFE51F; --accent-ink: #8A6D00; --hero-grad: linear-gradient(120deg, rgba(11,57,49,.55), rgba(11,57,49,.20)); --btn-radius: 999px; --card-radius: 22px; } /* ── Decorative tile colours follow each skin (no cross-theme mixing) ── */ html[data-skin="r360"] { --warm-sand:#FDE7E7; --warm-peach:#FBD7D8; --warm-blush:#E7EAF2; --warm-mint:#DDE3EC; --warm-yellow:#F6CFD0; } html[data-skin="acres99"]{ --warm-sand:#E2EEF9; --warm-peach:#FCE2DB; --warm-blush:#E9EEF6; --warm-mint:#D9E8F7; --warm-yellow:#FBE0D8; } html[data-skin="housing"]{ --warm-sand:#E7EAFD; --warm-peach:#D6F4F0; --warm-blush:#ECEEFE; --warm-mint:#D7DBFB; --warm-yellow:#CFF3EE; } html[data-skin="sqyards"]{ --warm-sand:#E5ECF2; --warm-peach:#F7ECD2; --warm-blush:#E8EDF2; --warm-mint:#D7E2EC; --warm-yellow:#F3E2BB; } /* (mint skin keeps the original warm defaults from tokens.css) */ /* Skin-driven structural utilities (consumed by hero / buttons / cards) */ .btn, .stz-search .search-btn, .rv-hero-tab { border-radius: var(--btn-radius); } .prop-card, .cat-card, .stz-hero-card { border-radius: var(--card-radius); } /* Hero-card fallback background tint follows the active skin */ .stz-hero-card { background-color: var(--primary-l); } /* Admin sidebar accent follows the skin too (admin uses --primary) */ .sidebar .sb-link.active, .sidebar .sb-link.active i { color: var(--primary) !important; }