/* ========================================================================== River Shoals public site -- dark mode (September 2026) -------------------------------------------------------------------------- Loaded LAST in on every public page by includes/public-theme-head.php. assets/js/rs-public-theme.js sets html[data-rs-pub-theme="light|dark"] from the visitor's device setting or their stored choice, and puts data-bs-theme="dark" on in dark mode so Bootstrap's own components (forms, tables, dropdowns, alerts) follow. EVERY dark rule below is scoped under html[data-rs-pub-theme="dark"] (the $D shorthand in the comments), so the light site renders exactly as it did before this file existed. The only unscoped rules are the theme switches themselves (section 1), which are new elements. The look: a deep blue-green night, not an inverted day. Surfaces step up from the page in small, even increments; photos behind the old frosted cards become moonlit versions (images/brand/night/) under a dark veil; the river teal is lifted so it still reads as the accent on dark. Night photos: images/brand/night/ holds graded "day for night" versions of the day photos. Drop a real night photo over any of them, same file name, and it is used automatically. 1. Theme switches (nav bar picker, footer switch) -- both modes 2. Dark tokens 3. Modern public pages (public-site.css, .rsp-) 4. Public nav bar (rs-theme.css section 9) 5. Legacy public pages (style.css + rs-theme.css html:not rules) 6. Photo backgrounds -> night 7. Log-in, sign-up, password and invitation pages 8. Closings & estoppel (resale.css) 9. Covenants, privacy policy, alerts, forms, tables 10. Footer 11. Document share pages and e-mail confirmation ========================================================================== */ /* 1. Theme switches ======================================================== */ .rs-ticon { display: inline-block; vertical-align: -3px; flex-shrink: 0; } /* Nav bar picker. Outside the collapse, so on a phone it sits between the brand and the hamburger; from xl up it moves after the log-in buttons. */ .rs-themepick { position: relative; margin-left: auto; margin-right: 8px; } @media (min-width: 1200px) { .rs-themepick { order: 5; margin: 0 0 0 10px; } } .rs-themepick__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid #d3dbe1; background: #fff; color: #3a4852; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .rs-themepick__btn:hover { background: #f0f3f5; color: #17232b; } .rs-themepick__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 111, 107, .3); } .rs-themepick__btn .rs-ticon { width: 18px; height: 18px; } /* rs-theme.css's .rs-show-* use inline-block; the icon spans need flex. */ .rs-themepick__btn > span { display: inline-flex; } .rs-themepick__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 1040; min-width: 210px; padding: 6px; border-radius: 12px; border: 1px solid #e3e8ec; background: #fff; box-shadow: 0 10px 30px rgba(16, 24, 32, .14); } .rs-themepick.is-open .rs-themepick__menu { display: grid; gap: 2px; } .rs-themepick__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #17232b; font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; cursor: pointer; } .rs-themepick__menu button:hover { background: #f0f3f5; } .rs-themepick__menu button .rs-ticon { color: #66747e; } /* The mode actually in force is marked; "Match my device" only when no choice is stored. */ [data-rs-theme-source="chosen"][data-rs-pub-theme="light"] :is(.rs-themepick__menu, .rs-footer-theme) [data-rs-theme-set="light"], [data-rs-theme-source="chosen"][data-rs-pub-theme="dark"] :is(.rs-themepick__menu, .rs-footer-theme) [data-rs-theme-set="dark"], [data-rs-theme-source="device"] :is(.rs-themepick__menu, .rs-footer-theme) [data-rs-theme-set="auto"] { background: #e2f1ef; color: #17605c; font-weight: 650; } [data-rs-theme-source="chosen"][data-rs-pub-theme="light"] .rs-themepick__menu [data-rs-theme-set="light"] .rs-ticon, [data-rs-theme-source="chosen"][data-rs-pub-theme="dark"] .rs-themepick__menu [data-rs-theme-set="dark"] .rs-ticon, [data-rs-theme-source="device"] .rs-themepick__menu [data-rs-theme-set="auto"] .rs-ticon { color: inherit; } /* Footer switch: a small segmented control under the footer phrase. The footer is always charcoal, so it is styled for a dark ground in both modes. */ .rs-footer-theme { display: inline-flex; gap: 2px; margin: 10px auto 8px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); } .rs-footer-theme button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: #b5bcc5; font: 500 12.5px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; } .rs-footer-theme button .rs-ticon { width: 14px; height: 14px; } .rs-footer-theme button:hover { color: #fff; background: rgba(255, 255, 255, .08); } .rs-footer-theme button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(111, 207, 196, .6); } [data-rs-theme-source="chosen"][data-rs-pub-theme="light"] .rs-footer-theme [data-rs-theme-set="light"], [data-rs-theme-source="chosen"][data-rs-pub-theme="dark"] .rs-footer-theme [data-rs-theme-set="dark"], [data-rs-theme-source="device"] .rs-footer-theme [data-rs-theme-set="auto"] { background: rgba(111, 207, 196, .18); color: #bfeee8; } @media print { .rs-themepick, .rs-footer-theme { display: none !important; } } /* 2. Dark tokens =========================================================== */ html[data-rs-pub-theme="dark"] { color-scheme: dark; background: #0b1114; /* public-site.css (.rsp-) */ --rsp-ink: #e8eef1; --rsp-ink-2: #c2ccd2; --rsp-muted: #94a3ac; --rsp-line: #243138; --rsp-bg: #0d1417; --rsp-card: #131c20; --rsp-teal: #6fcfc4; --rsp-teal-deep: #0f3d3a; --rsp-teal-soft: rgba(111, 207, 196, .13); --rsp-sand: #3a3322; --rsp-sun: #f3c46b; --rsp-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4); /* rs-theme.css tokens -- repeated here for the pages that do not load rs-theme.css (log-in, sign-up, password pages). Same values as its [data-bs-theme="dark"] block. */ --rs-bg: #0e1316; --rs-surface: #151c20; --rs-surface-2: #1b2328; --rs-surface-3: #232d33; --rs-text: #e3e9ed; --rs-text-2: #c2ccd2; --rs-muted: #8f9da6; --rs-border: #29343b; --rs-border-strong: #37444c; --rs-accent: #4fb3a9; --rs-accent-hover: #6cc6bd; --rs-accent-soft: rgba(79, 179, 169, .14); --rs-accent-text: #82d3ca; --rs-on-accent: #0b1a19; --rs-danger: #f28b82; --rs-danger-soft: rgba(242, 139, 130, .14); --rs-warn: #f3c46b; --rs-warn-soft: rgba(243, 196, 107, .13); --rs-ok: #7fd49a; --rs-ok-soft: rgba(127, 212, 154, .13); --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --rs-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4); --rs-ring: 0 0 0 3px rgba(79, 179, 169, .35); /* Local to this file */ --pd-glass: rgba(17, 25, 29, .86); /* frosted card over a photo */ --pd-glass-line: rgba(255, 255, 255, .08); --pd-veil: linear-gradient(180deg, rgba(6, 11, 14, .30) 0%, rgba(6, 11, 14, .55) 100%); --pd-btn: #1d7a73; /* filled teal button: white text passes AA */ --pd-btn-hover: #176a64; --pd-link: #7fd6cb; --pd-link-hover: #a5e6de; --pd-input: #0f171a; --pd-input-line: #33424a; } html[data-rs-pub-theme="dark"] body { background-color: var(--rs-bg); color: var(--rs-text); -webkit-font-smoothing: antialiased; } /* Bootstrap's own variables, for pages whose only just got the attribute and for the few components that read them from html. */ html[data-rs-pub-theme="dark"] body { --bs-body-bg: var(--rs-surface); --bs-body-color: var(--rs-text); --bs-emphasis-color: var(--rs-text); --bs-secondary-color: var(--rs-muted); --bs-secondary-bg: var(--rs-surface-2); --bs-tertiary-bg: var(--rs-surface-2); --bs-border-color: var(--rs-border); --bs-border-color-translucent: var(--rs-border); --bs-link-color: var(--pd-link); --bs-link-color-rgb: 127, 214, 203; --bs-link-hover-color: var(--pd-link-hover); --bs-link-hover-color-rgb: 165, 230, 222; --bs-focus-ring-color: rgba(79, 179, 169, .35); } html[data-rs-pub-theme="dark"] ::selection { background: rgba(111, 207, 196, .35); color: #fff; } /* Photos in general: take the glare off, very slightly, so a sunlit picture does not punch a hole in a dark page. */ html[data-rs-pub-theme="dark"] :is(.rsp-split__img, .rsp-slides) img { filter: brightness(.88) saturate(.95); } /* 3. Modern public pages (public-site.css) ================================= */ html[data-rs-pub-theme="dark"] .rsp { background: var(--rsp-bg); color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] .rsp a { color: var(--pd-link); } html[data-rs-pub-theme="dark"] .rsp-section--white { background: #111a1e; } /* Hero: the moonlit photo. Night files that are missing fall back to the day photo (the second value), and the veil below keeps text legible on either. */ html[data-rs-pub-theme="dark"] .rsp-hero { background-color: #07100f; background-image: var(--rsp-hero-night-sm, var(--rsp-hero-sm)); } @media (min-width: 768px) { html[data-rs-pub-theme="dark"] .rsp-hero { background-image: var(--rsp-hero-night-lg, var(--rsp-hero-lg)); } } html[data-rs-pub-theme="dark"] .rsp-hero::before { background: linear-gradient(180deg, rgba(4, 10, 14, 0) 0%, rgba(4, 10, 14, .12) 40%, rgba(6, 14, 16, .80) 78%, var(--rsp-bg) 100%); } /* A faint moon-glow behind the headline. */ html[data-rs-pub-theme="dark"] .rsp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at 78% 12%, rgba(170, 205, 255, .10), transparent 70%); } html[data-rs-pub-theme="dark"] .rsp .rsp-hero .rsp-h1 { color: #f4f7f8; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); } html[data-rs-pub-theme="dark"] .rsp-hero__sub { color: rgba(232, 238, 241, .88); } html[data-rs-pub-theme="dark"] .rsp .rsp-h1, html[data-rs-pub-theme="dark"] .rsp .rsp-h2, html[data-rs-pub-theme="dark"] .rsp .rsp-h3 { color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] .rsp-eyebrow { color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] .rsp-hero .rsp-eyebrow, html[data-rs-pub-theme="dark"] .rsp-panel .rsp-eyebrow { color: var(--rsp-sun); } /* Buttons */ html[data-rs-pub-theme="dark"] .rsp-btn--primary { background: var(--pd-btn); color: #fff !important; } html[data-rs-pub-theme="dark"] .rsp-btn--primary:hover { background: var(--pd-btn-hover); } html[data-rs-pub-theme="dark"] .rsp-btn--light { background: #eef3f4; color: #0f1b20 !important; } html[data-rs-pub-theme="dark"] .rsp-btn--light:hover { background: #fff; } html[data-rs-pub-theme="dark"] .rsp-btn--ghost { border-color: rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .25); } html[data-rs-pub-theme="dark"] .rsp-btn--ghost:hover { background: rgba(255, 255, 255, .08); } html[data-rs-pub-theme="dark"] .rsp-btn--outline { background: transparent; border-color: var(--rs-border-strong); color: var(--rsp-ink) !important; } html[data-rs-pub-theme="dark"] .rsp-btn--outline:hover { border-color: var(--rsp-teal); color: var(--rsp-teal) !important; } /* Cards and stats */ html[data-rs-pub-theme="dark"] .rsp-stat, html[data-rs-pub-theme="dark"] .rsp-card { background: var(--rsp-card); } html[data-rs-pub-theme="dark"] .rsp-stat { border: 1px solid var(--rsp-line); } html[data-rs-pub-theme="dark"] .rsp-card--shadow { border-color: var(--rsp-line); } html[data-rs-pub-theme="dark"] .rsp-stat b { color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] .rsp-strip { background: #0f2a2a; border: 1px solid rgba(111, 207, 196, .16); } html[data-rs-pub-theme="dark"] .rsp-panel { background: linear-gradient(135deg, #154d49 0%, #0c2b29 100%); border: 1px solid rgba(111, 207, 196, .16); } html[data-rs-pub-theme="dark"] .rsp-panel a:not(.rsp-btn) { color: #e8f6f4; } html[data-rs-pub-theme="dark"] .rsp-quick a { background: var(--rsp-card); border-color: var(--rsp-line); color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] .rsp-quick a:hover { border-color: var(--rsp-teal); background: #16211f; } html[data-rs-pub-theme="dark"] .rsp-svc-nav a { background: var(--rsp-card); border-color: var(--rsp-line); color: var(--rsp-ink-2); } html[data-rs-pub-theme="dark"] .rsp-svc-nav a:hover { border-color: var(--rsp-teal); color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] .rsp-slides { background: #0f2a2a; } /* 4. Public nav bar ======================================================== */ html[data-rs-pub-theme="dark"] .rs-pubnav { background: rgba(11, 17, 20, .82); border-bottom-color: #1f2a30; } html[data-rs-pub-theme="dark"] .rs-pubnav .rs-brand__name { color: #eef3f5; } html[data-rs-pub-theme="dark"] .rs-pubnav .nav-link { color: #a9b6be !important; } html[data-rs-pub-theme="dark"] .rs-pubnav .nav-link:hover, html[data-rs-pub-theme="dark"] .rs-pubnav .nav-link:focus-visible { color: #eef3f5 !important; background: rgba(255, 255, 255, .06); } html[data-rs-pub-theme="dark"] .rs-pubnav .nav-link.is-active { color: #9fe3da !important; background: rgba(111, 207, 196, .13); } html[data-rs-pub-theme="dark"] .rs-pubnav .rs-pubnav__owners { color: #9fe3da !important; } html[data-rs-pub-theme="dark"] .rs-pubnav .rs-pubnav__admin { color: #f28b82 !important; } html[data-rs-pub-theme="dark"] .rs-pubnav .dropdown-menu { background: var(--rs-surface); border-color: var(--rs-border); box-shadow: var(--rs-shadow); } html[data-rs-pub-theme="dark"] .rs-pubnav .dropdown-item { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .rs-pubnav .dropdown-item:hover { background: var(--rs-surface-2); } html[data-rs-pub-theme="dark"] .rs-pubnav .dropdown-item i { color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .rs-pubnav__btn { background: transparent; border-color: #34434b; color: #e8eef1 !important; } html[data-rs-pub-theme="dark"] .rs-pubnav__btn:hover { background: rgba(255, 255, 255, .06); } html[data-rs-pub-theme="dark"] .rs-pubnav__btn--primary { background: var(--pd-btn); border-color: var(--pd-btn); color: #fff !important; } html[data-rs-pub-theme="dark"] .rs-pubnav__btn--primary:hover { background: var(--pd-btn-hover); border-color: var(--pd-btn-hover); } html[data-rs-pub-theme="dark"] .rs-pubnav .navbar-toggler { border-color: #34434b; } html[data-rs-pub-theme="dark"] .rs-themepick__btn { background: transparent; border-color: #34434b; color: #f3d38a; } html[data-rs-pub-theme="dark"] .rs-themepick__btn:hover { background: rgba(255, 255, 255, .06); color: #ffe3a1; } html[data-rs-pub-theme="dark"] .rs-themepick__menu { background: var(--rs-surface); border-color: var(--rs-border); box-shadow: var(--rs-shadow); } html[data-rs-pub-theme="dark"] .rs-themepick__menu button { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .rs-themepick__menu button:hover { background: var(--rs-surface-2); } html[data-rs-pub-theme="dark"] .rs-themepick__menu button .rs-ticon { color: var(--rs-muted); } html[data-rs-pub-theme="dark"][data-rs-theme-source="chosen"] .rs-themepick__menu [data-rs-theme-set="dark"], html[data-rs-pub-theme="dark"][data-rs-theme-source="device"] .rs-themepick__menu [data-rs-theme-set="auto"] { background: rgba(111, 207, 196, .13); color: #9fe3da; } /* 5. Legacy public pages =================================================== */ /* rs-theme.css turns style.css's containers into frosted white cards over a photo (html:not([data-bs-theme]) rules). In dark they are frosted night glass. rs-theme.css section 6 also reaches these through body's data-bs-theme and paints them solid with !important -- hence the !important here. */ html[data-rs-pub-theme="dark"] :is(.homeBackground, .aboutBackground, .transparentBackground, .transparentBackgroundNews, .prospectiveBG, .tableBackground, .linkContainerBG, .user-form-container) { background-color: var(--pd-glass) !important; border-color: var(--pd-glass-line) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .5) !important; color: var(--rs-text); } html[data-rs-pub-theme="dark"] :is(.banner, .proBanner, .contactBanner, .banner_news) { color: #f1f5f7; } html[data-rs-pub-theme="dark"] .banner_news { background: var(--pd-glass); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); } html[data-rs-pub-theme="dark"] :is(.homeText, .aboutText, .mngText, .proPara p, .lastPara, .linkP, .indent) { color: var(--rs-text-2); } html[data-rs-pub-theme="dark"] :is(.transparentBackground, .prospectiveBG, .tableBackground, .homeBackground, .aboutBackground) :is(h1, h2, h3, h4, h5) { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .proTop { color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .thankyou { color: var(--pd-link); } html[data-rs-pub-theme="dark"] .vidlink { background: var(--pd-btn); } html[data-rs-pub-theme="dark"] .vidlink:hover { background: var(--pd-btn-hover); } html[data-rs-pub-theme="dark"] :is(.managementBackground, .proBackground, #pageContainer) { color: var(--rs-text); } /* Links inside the old pages */ html[data-rs-pub-theme="dark"] :is(.homeBackground, .aboutBackground, .transparentBackground, .prospectiveBG, .tableBackground, .linkContainerBG, .mainContent) a:not(.btn) { color: var(--pd-link); } html[data-rs-pub-theme="dark"] :is(.homeBackground, .aboutBackground, .transparentBackground, .prospectiveBG, .tableBackground, .linkContainerBG, .mainContent) a:not(.btn):hover { color: var(--pd-link-hover); } /* Buttons: rs-theme.css makes .btn-primary / .btn-success teal and .btn-info a white pill. */ html[data-rs-pub-theme="dark"] :is(.btn-primary, .btn-success) { --bs-btn-bg: var(--pd-btn); --bs-btn-border-color: var(--pd-btn); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--pd-btn-hover); --bs-btn-hover-border-color: var(--pd-btn-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--pd-btn-hover); --bs-btn-active-border-color: var(--pd-btn-hover); --bs-btn-disabled-bg: var(--pd-btn); --bs-btn-disabled-border-color: var(--pd-btn); } html[data-rs-pub-theme="dark"] .btn-info { --bs-btn-bg: transparent; --bs-btn-border-color: var(--rs-border-strong); --bs-btn-color: var(--rs-text); --bs-btn-hover-bg: rgba(255, 255, 255, .06); --bs-btn-hover-border-color: #4a5a63; --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .1); color: var(--rs-text) !important; } html[data-rs-pub-theme="dark"] .btn-light { --bs-btn-bg: var(--rs-surface-2); --bs-btn-border-color: var(--rs-border-strong); --bs-btn-color: var(--rs-text); --bs-btn-hover-bg: var(--rs-surface-3); --bs-btn-hover-color: #fff; } html[data-rs-pub-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--rs-text-2); --bs-btn-border-color: var(--rs-border-strong); --bs-btn-hover-bg: var(--rs-surface-3); --bs-btn-hover-border-color: #4a5a63; --bs-btn-hover-color: #fff; } html[data-rs-pub-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--pd-link); --bs-btn-border-color: var(--rs-accent); --bs-btn-hover-bg: var(--pd-btn); --bs-btn-hover-border-color: var(--pd-btn); --bs-btn-hover-color: #fff; } /* The old steel-blue / navy slabs and odd colours in style.css, for the places rs-theme.css does not already restyle. */ html[data-rs-pub-theme="dark"] .backColor { background-color: #0f2a2a; } html[data-rs-pub-theme="dark"] :is(.managementBackground, .proBackground, .signInContainer, #pageContainer) { background-color: #0a1013; } html[data-rs-pub-theme="dark"] .requiredEntry, html[data-rs-pub-theme="dark"] .userNotificationTextRed { color: #f28b82; } html[data-rs-pub-theme="dark"] .leadEmp { background-color: rgba(243, 196, 107, .14); color: #f3c46b; } html[data-rs-pub-theme="dark"] fieldset { border-color: var(--rs-border-strong); } html[data-rs-pub-theme="dark"] legend { color: var(--pd-link); } html[data-rs-pub-theme="dark"] .vTitle { background-color: var(--rs-surface-2); color: var(--rs-text); } html[data-rs-pub-theme="dark"] .miniMapImg { border-color: var(--rs-border); filter: brightness(.85); } html[data-rs-pub-theme="dark"] .miniMapCaption { color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .miniMapPlaceholder { background: var(--rs-surface-2); border-color: var(--rs-border-strong); color: var(--rs-muted); } /* The news ticker style.css still carries */ html[data-rs-pub-theme="dark"] .ticker-wrapper-h { background-color: var(--rs-surface); border-color: var(--rs-border); } html[data-rs-pub-theme="dark"] .ticker-wrapper-h .heading { background-color: #0f3d3a; } html[data-rs-pub-theme="dark"] .news-ticker-h li a { color: var(--rs-text); } /* News cards (news.css paints every .card grey with a blue border) */ html[data-rs-pub-theme="dark"] .card { --bs-card-bg: var(--rs-surface); --bs-card-cap-bg: var(--rs-surface-2); --bs-card-border-color: var(--rs-border); background-color: var(--rs-surface); border-color: var(--rs-border); color: var(--rs-text); } html[data-rs-pub-theme="dark"] .card-title { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .nothing_found { background-color: var(--rs-surface-2); color: var(--rs-muted); } /* 6. Photo backgrounds -> night =========================================== */ /* Each keeps the day photo underneath: if the night file were ever missing, the day photo shows through the veil instead of a blank. */ html[data-rs-pub-theme="dark"] :is(#pageContainer, .proBackground, .signInContainer) { background-image: var(--pd-veil), url("/images/brand/night/frontgate-1200.jpg"), url("/images/frontgate_1200.jpg"); } html[data-rs-pub-theme="dark"] .managementBackground { background-image: var(--pd-veil), url("/images/brand/night/clubhouse-1200.jpg"), url("/images/clubhouse_web_1200.jpg"); } html[data-rs-pub-theme="dark"] .titleBox { background-image: linear-gradient(rgba(6, 11, 14, .55), rgba(6, 11, 14, .55)), url("/images/property.jpg"); } /* 7. Log-in, sign-up, password and invitation pages ======================== */ /* style.css / signup.css / resetpassword.css: a translucent white panel with black, drop-shadowed type, Google-blue submit buttons and yellow notices. In dark: night glass, light type, the site's teal. */ html[data-rs-pub-theme="dark"] .signInContainer :is(.column, .columnUp) { background-color: var(--pd-glass) !important; border: 1px solid var(--pd-glass-line) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--rs-text); } html[data-rs-pub-theme="dark"] .signInContainer :is(h1, h2, h3, h4, .signUp, .header h3, .columnUp h3) { color: #eef3f5 !important; text-shadow: none !important; } html[data-rs-pub-theme="dark"] .signInContainer :is(p, label, .lead, .form-text, small) { color: var(--rs-text-2) !important; } html[data-rs-pub-theme="dark"] .signInContainer a:not(.btn) { color: var(--pd-link); } html[data-rs-pub-theme="dark"] .signInContainer :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { background-color: var(--pd-input) !important; color: var(--rs-text) !important; border: 1px solid var(--pd-input-line) !important; box-shadow: none !important; } html[data-rs-pub-theme="dark"] .signInContainer :is(input, select, textarea)::placeholder { color: #7d8d96 !important; } html[data-rs-pub-theme="dark"] .signInContainer :is(input, select, textarea):focus { border-color: var(--rs-accent) !important; box-shadow: var(--rs-ring) !important; outline: none; } html[data-rs-pub-theme="dark"] .signInContainer input[type="checkbox"] { accent-color: var(--rs-accent); } html[data-rs-pub-theme="dark"] .signInContainer input[type="submit"] { background: var(--pd-btn) !important; color: #fff !important; border: 1px solid var(--pd-btn) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important; } html[data-rs-pub-theme="dark"] .signInContainer input[type="submit"]:hover { background: var(--pd-btn-hover) !important; border-color: var(--pd-btn-hover) !important; color: #fff !important; } /* The three coloured link buttons under the form (green / yellow / blue) become one teal primary and two quiet outlines. */ html[data-rs-pub-theme="dark"] .signInContainer .btn { box-shadow: none; } html[data-rs-pub-theme="dark"] .signInContainer :is(.btn-warning, .btn-primary, .btn-info) { --bs-btn-bg: transparent; --bs-btn-border-color: var(--rs-border-strong); --bs-btn-color: var(--rs-text); --bs-btn-hover-bg: rgba(255, 255, 255, .06); --bs-btn-hover-border-color: #4f6069; --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .1); --bs-btn-active-border-color: #4f6069; --bs-btn-active-color: #fff; } html[data-rs-pub-theme="dark"] .signInContainer .btn-success { --bs-btn-bg: var(--pd-btn); --bs-btn-border-color: var(--pd-btn); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--pd-btn-hover); --bs-btn-hover-border-color: var(--pd-btn-hover); --bs-btn-hover-color: #fff; } /* Notices: the yellow "privacy" strip and message buttons, and the red-on- yellow error boxes. */ html[data-rs-pub-theme="dark"] .signInContainer .privacyText, html[data-rs-pub-theme="dark"] .btnMsg { background-color: rgba(243, 196, 107, .12) !important; color: #f3d38a !important; } html[data-rs-pub-theme="dark"] .msgText { color: #f3d38a; } html[data-rs-pub-theme="dark"] .msgText:hover { color: #fff; } html[data-rs-pub-theme="dark"] :is(.errorMessage, .forgot_errors, .signInContainer .column .loginForm .errorMessage) { background-color: rgba(242, 139, 130, .12) !important; border-color: rgba(242, 139, 130, .45) !important; color: #ffb4ab !important; } html[data-rs-pub-theme="dark"] .errorSummary { background-color: rgba(242, 139, 130, .1); border-color: rgba(242, 139, 130, .5); color: #ffb4ab; } html[data-rs-pub-theme="dark"] .errorSummary :is(h4, .errorSummaryNote) { color: #ffcdc7; } /* 8. Closings & estoppel (resale.css) ===================================== */ html[data-rs-pub-theme="dark"] .rs-page { background: var(--rsp-bg); color: var(--rs-text); } html[data-rs-pub-theme="dark"] .rs-head { border-bottom-color: var(--rs-border); } html[data-rs-pub-theme="dark"] .rs-head h1 { color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] .rs-head::before, html[data-rs-pub-theme="dark"] .rs-step, html[data-rs-pub-theme="dark"] .rs-ref, html[data-rs-pub-theme="dark"] .rs-product .rs-price { color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] .rs-head .text-muted { color: var(--rs-text-2) !important; } html[data-rs-pub-theme="dark"] .rs-card { background: var(--rsp-card); border-color: var(--rsp-line); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } html[data-rs-pub-theme="dark"] .rs-card :is(h4, h5) { color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] :is(.rs-opt, .rs-product) { background: var(--rs-surface-2); border-color: var(--rsp-line); } html[data-rs-pub-theme="dark"] :is(.rs-opt, .rs-product):hover { border-color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] :is(.rs-opt, .rs-product):has(input:checked) { border-color: var(--rsp-teal); background: rgba(111, 207, 196, .1); } html[data-rs-pub-theme="dark"] :is(.rs-opt, .rs-product) input { accent-color: var(--rs-accent); } html[data-rs-pub-theme="dark"] :is(.rs-opt, .rs-product) .rs-blurb, html[data-rs-pub-theme="dark"] :is(.rs-mgmt, .rs-recap) dt, html[data-rs-pub-theme="dark"] .rs-kv td:first-child { color: var(--rsp-muted); } html[data-rs-pub-theme="dark"] .rs-who { background: rgba(243, 196, 107, .08); border-color: rgba(243, 196, 107, .22); border-left-color: #d9a93a; } html[data-rs-pub-theme="dark"] .rs-who h2 { color: #f3d38a; } html[data-rs-pub-theme="dark"] .rs-who p { color: #e2d7bd; } html[data-rs-pub-theme="dark"] .rs-legal { background: var(--rsp-card); border-color: var(--rsp-line); border-left-color: var(--rsp-teal); color: var(--rs-text-2); } html[data-rs-pub-theme="dark"] .rs-mgmt { background: var(--rs-surface-2); } html[data-rs-pub-theme="dark"] .rs-mgmt dd { color: var(--rsp-ink); } html[data-rs-pub-theme="dark"] .rs-track div { border-bottom-color: var(--rs-border-strong); color: #7d8d96; } html[data-rs-pub-theme="dark"] .rs-track div.on { border-bottom-color: var(--rsp-teal); color: var(--rsp-teal); } html[data-rs-pub-theme="dark"] .rs-track div.done { border-bottom-color: #7fd49a; color: #7fd49a; } html[data-rs-pub-theme="dark"] .rs-kv td { border-bottom-color: var(--rs-border); } html[data-rs-pub-theme="dark"] .rs-page .btn-primary { background: var(--pd-btn); border-color: var(--pd-btn); color: #fff; } html[data-rs-pub-theme="dark"] .rs-page .btn-primary:is(:hover, :focus) { background: var(--pd-btn-hover); border-color: var(--pd-btn-hover); } html[data-rs-pub-theme="dark"] .rs-page .btn-outline-primary { color: var(--pd-link); border-color: var(--rs-accent); } html[data-rs-pub-theme="dark"] .rs-page .btn-outline-primary:hover { background: var(--pd-btn); border-color: var(--pd-btn); color: #fff; } html[data-rs-pub-theme="dark"] .rs-page :is(.form-control, .form-select):focus { border-color: var(--rs-accent); box-shadow: var(--rs-ring); } html[data-rs-pub-theme="dark"] .rs-page a:not(.btn) { color: var(--pd-link); } /* Two inline teal headings on resale.php */ html[data-rs-pub-theme="dark"] [style*="color:#1f6f6b"] { color: var(--rsp-teal) !important; } /* 9. Covenants, privacy policy, alerts, forms, tables ====================== */ html[data-rs-pub-theme="dark"] :is(.covIntro, .covToc, .policyDoc, .mainContent) { background-color: var(--rs-surface) !important; border-color: var(--rs-border) !important; color: var(--rs-text); } html[data-rs-pub-theme="dark"] .covSearchBox { border-color: var(--rs-border); } html[data-rs-pub-theme="dark"] .covToc h4 { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .covToc a { color: var(--pd-link); } html[data-rs-pub-theme="dark"] :is(.covDisclaimer, .covDocTitle span, .covArticle h2 .covArtTitle) { color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .covDocument { color: var(--rs-text-2); } html[data-rs-pub-theme="dark"] .covArticle strong { color: var(--rs-text); } html[data-rs-pub-theme="dark"] .covArbitrationNotice { background-color: rgba(243, 196, 107, .09); border-color: rgba(243, 196, 107, .3); } html[data-rs-pub-theme="dark"] mark.covHit { background-color: rgba(243, 196, 107, .35); color: #fff; } html[data-rs-pub-theme="dark"] mark.covHitActive { background-color: #f3a93b; color: #111; } html[data-rs-pub-theme="dark"] :is(h1, h2, h3, h4, h5, h6) { color: inherit; } /* Keyboard hints () on the covenants intro stay legible. */ html[data-rs-pub-theme="dark"] kbd { background: #2a363d; color: #e8eef1; border: 1px solid #3a4a52; } /* Bootstrap alerts: tinted glass rather than pastel slabs. */ html[data-rs-pub-theme="dark"] .alert-success { --bs-alert-bg: rgba(127, 212, 154, .1); --bs-alert-border-color: rgba(127, 212, 154, .3); --bs-alert-color: #b6ebc6; --bs-alert-link-color: #d6f5df; } html[data-rs-pub-theme="dark"] .alert-info { --bs-alert-bg: rgba(120, 170, 230, .1); --bs-alert-border-color: rgba(120, 170, 230, .3); --bs-alert-color: #bcd5f3; --bs-alert-link-color: #dde9f9; } html[data-rs-pub-theme="dark"] .alert-warning { --bs-alert-bg: rgba(243, 196, 107, .1); --bs-alert-border-color: rgba(243, 196, 107, .35); --bs-alert-color: #f3d38a; --bs-alert-link-color: #fbe6b8; } html[data-rs-pub-theme="dark"] .alert-danger { --bs-alert-bg: rgba(242, 139, 130, .1); --bs-alert-border-color: rgba(242, 139, 130, .35); --bs-alert-color: #ffb4ab; --bs-alert-link-color: #ffd6d1; } html[data-rs-pub-theme="dark"] .alert-secondary, html[data-rs-pub-theme="dark"] .alert-light { --bs-alert-bg: var(--rs-surface-2); --bs-alert-border-color: var(--rs-border); --bs-alert-color: var(--rs-text-2); } html[data-rs-pub-theme="dark"] .alert-warning[style*="border"] { border-color: rgba(243, 196, 107, .5) !important; } html[data-rs-pub-theme="dark"] .alert code { color: #ffb4d0; } /* Forms */ html[data-rs-pub-theme="dark"] :is(.form-control, .form-select) { background-color: var(--pd-input); border-color: var(--pd-input-line); color: var(--rs-text); } html[data-rs-pub-theme="dark"] :is(.form-control, .form-select):focus { background-color: var(--pd-input); border-color: var(--rs-accent); box-shadow: var(--rs-ring); color: var(--rs-text); } html[data-rs-pub-theme="dark"] .form-control::placeholder { color: #7d8d96; } html[data-rs-pub-theme="dark"] .form-check-input:checked { background-color: var(--rs-accent); border-color: var(--rs-accent); } html[data-rs-pub-theme="dark"] .form-text { color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .text-muted { color: var(--rs-muted) !important; } html[data-rs-pub-theme="dark"] .text-dark:not(.badge):not(.btn) { color: var(--rs-text) !important; } html[data-rs-pub-theme="dark"] :is(.bg-white, .bg-body) { background-color: var(--rs-surface) !important; } html[data-rs-pub-theme="dark"] .bg-light { background-color: var(--rs-surface-2) !important; } /* Tables (rs-theme.css makes public tables white with a pale header) */ html[data-rs-pub-theme="dark"] .table { --bs-table-bg: var(--rs-surface); --bs-table-striped-bg: #182125; --bs-table-hover-bg: #1c262b; --bs-table-border-color: var(--rs-border); --bs-table-color: var(--rs-text); --bs-table-striped-color: var(--rs-text); --bs-table-hover-color: var(--rs-text); } html[data-rs-pub-theme="dark"] .table > thead :is(th, td) { --bs-table-bg: var(--rs-surface-2); color: var(--rs-muted); } html[data-rs-pub-theme="dark"] .table a { color: var(--pd-link); } /* 10. Footer ============================================================== */ html[data-rs-pub-theme="dark"] .copyright { background-color: #080d10 !important; border-top: 1px solid #1a2328; } html[data-rs-pub-theme="dark"] .copyright .copyText { color: #dfe6ea; } html[data-rs-pub-theme="dark"] .copyright .copySubText { color: #8a979f; } /* 11. Document share pages and e-mail confirmation ========================= */ /* share.php and includes/share-message.php define their own variables. */ html[data-rs-pub-theme="dark"] body:has(> .wrap) { --ink: #e6ecef; --muted: #93a3a8; --line: #26343a; --ground: #0d1417; --surface: #141d21; --accent: #1d7a73; --warn: #f2a07f; } html[data-rs-pub-theme="dark"] body:has(> .wrap) .row { border-bottom-color: #1e2a2f; } html[data-rs-pub-theme="dark"] body:has(> .wrap) .notice { background: rgba(242, 160, 127, .09); border-color: rgba(242, 160, 127, .3); } html[data-rs-pub-theme="dark"] body:has(> .wrap) .meta code { background: #1e292e; color: #d6e0e4; } html[data-rs-pub-theme="dark"] .ve-card { background: var(--rs-surface); border-color: var(--rs-border); color: var(--rs-text); }