/** * Raynez Resort & Suites — Dark theme enhancement ("Midnight & Gold") * * Loaded site-wide AFTER the other stylesheets (includes/header.php). * Everything is scoped to html[data-theme="dark"], so light mode is untouched. * * Why: the dark theme was near-pure black (#0a0a0a) with #1a1a1a cards and * grey borders, so sections and cards blended into one flat mass. It also * mixed three unrelated palettes (black pages, a slate-blue home page with * teal accents, navy nav/footer/room cards). This unifies everything on the * midnight navy the nav, footer and room cards already use, lifts the base a * few steps off black, and adds a few quiet gold design elements. */ html[data-theme="dark"] { /* ---- Midnight palette ---- */ --mg-base: #0e1526; /* page background (was #0a0a0a) */ --mg-raised: #131c31; /* alternate sections */ --mg-card: #18223b; /* cards / panels (was #1a1a1a) */ --mg-card-2: #1e2946; /* card gradient top / hover */ --mg-line: rgba(212, 175, 55, 0.16); --mg-line-soft: rgba(212, 175, 55, 0.09); --mg-text: #f1f3f8; --mg-text-2: #c3cad8; --mg-text-3: #8d97ab; /* ---- Shared theme.css tokens (most pages) ---- */ --color-black: var(--mg-base); --color-dark: var(--mg-card); --color-dark-light: var(--mg-card-2); --color-border: var(--mg-line); --color-text-primary: var(--mg-text); --color-text-secondary: var(--mg-text-2); --color-muted: var(--mg-text-3); /* ---- Home page tokens (was slate blue with teal hover accents) ---- Sections are slightly translucent so the page texture shows through. */ --rz-bg-primary: rgba(14, 21, 38, 0.82); --rz-bg-secondary: rgba(19, 28, 49, 0.88); --rz-bg-card: var(--mg-card); --rz-section-alt: var(--mg-raised); --rz-text-primary: var(--mg-text); --rz-text-secondary: var(--mg-text-2); --rz-text-muted: var(--mg-text-3); --rz-border: var(--mg-line); --rz-border-hover: #d4af37; /* was teal #14b8a6 — off-brand */ --rz-card-hover: var(--mg-card-2); --rz-shadow: 0 10px 30px -14px rgba(3, 7, 18, 0.7); --rz-shadow-hover: 0 22px 46px -18px rgba(3, 7, 18, 0.85), 0 0 0 1px rgba(212, 175, 55, 0.22); --rz-hero-overlay: rgba(14, 21, 38, 0.82); --rz-hero-text: var(--mg-text); --rz-hero-muted: var(--mg-text-2); /* home.php's older "cream/ink" token set, still used by several sections (e.g. .rz-amenities background) — was slate #1e293b */ --rz-cream: rgba(19, 28, 49, 0.88); --rz-cream-line: var(--mg-line-soft); --rz-cream-muted: var(--mg-text-2); --rz-black: var(--mg-base); --rz-ink: var(--mg-text); --rz-white: var(--mg-card); --rz-muted: var(--mg-text-3); /* ---- Room cards (room-card.css) ---- */ --rrc-card-bg: var(--mg-card); --rrc-line: var(--mg-line); --rrc-text-1: rgba(241, 243, 248, 0.68); --rrc-text-2: rgba(241, 243, 248, 0.56); --rrc-text-3: rgba(241, 243, 248, 0.46); --rrc-chip-bg: rgba(255, 255, 255, 0.05); --rrc-chip-border: rgba(212, 175, 55, 0.14); background-color: var(--mg-base); color-scheme: dark; } /* --------------------------------------------------------------------------- 1. Page backdrop — soft gold/indigo light pools, a faint diamond lattice (a quiet luxury-hotel motif) and fine film grain, instead of flat black. Fixed so it reads as ambience behind the content, not a pattern that scrolls with it. --------------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--mg-base); background-image: /* fine grain */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), /* diamond lattice */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 0L56 28L28 56L0 28Z' fill='none' stroke='%23D4AF37' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E"), /* light pools */ radial-gradient(ellipse 70% 45% at 12% -5%, rgba(212, 175, 55, 0.13), transparent 62%), radial-gradient(ellipse 55% 40% at 100% 35%, rgba(88, 110, 190, 0.14), transparent 65%), radial-gradient(ellipse 60% 45% at 0% 100%, rgba(212, 175, 55, 0.07), transparent 60%), linear-gradient(180deg, #111a2e 0%, var(--mg-base) 45%, #0b1120 100%); background-attachment: fixed; color: var(--mg-text); } /* --------------------------------------------------------------------------- 2. Section rhythm — a gold hairline where one top-level section meets the next, so long pages read as distinct chapters rather than one block. (Inset shadow: no pseudo-elements, so no clash with sections that already use ::before/::after for their own art.) --------------------------------------------------------------------------- */ html[data-theme="dark"] main > section + section, html[data-theme="dark"] body > section + section, html[data-theme="dark"] .rz-home-wrap > section + section { box-shadow: inset 0 1px 0 var(--mg-line-soft); } /* --------------------------------------------------------------------------- 3. Cards and panels — lifted surfaces with a subtle top-lit gradient and a gold-tinted edge. Limited to surfaces known to have a SOLID background (never photo cards, whose image would be painted over). --------------------------------------------------------------------------- */ html[data-theme="dark"] .card, html[data-theme="dark"] .content-section, html[data-theme="dark"] .rz-offer-card, html[data-theme="dark"] .rz-discover-card, html[data-theme="dark"] .rz-t-card, html[data-theme="dark"] .rz-amen-card, html[data-theme="dark"] .rz-location-card, html[data-theme="dark"] .rz-blog-card, html[data-theme="dark"] .contact-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .form-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .filters-section, html[data-theme="dark"] .pricing-box, html[data-theme="dark"] .spa-service-card, html[data-theme="dark"] .spa-pricing-card, html[data-theme="dark"] .spa-hours-card, html[data-theme="dark"] .spa-benefit-card, html[data-theme="dark"] .ct-feature-card, html[data-theme="dark"] .ct-direct-card, html[data-theme="dark"] .purpose-card, html[data-theme="dark"] .promise-card, html[data-theme="dark"] .founder-card, html[data-theme="dark"] .planning-card, html[data-theme="dark"] .menu-card { background-color: var(--mg-card); background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--mg-card-2) 0%, var(--mg-card) 100%); border-color: var(--mg-line); } /* Home page pieces that hard-code slate #0f172a instead of using tokens */ html[data-theme="dark"] .rz-hero, html[data-theme="dark"] .rz-hero-carousel { background-color: var(--mg-base); } html[data-theme="dark"] .rz-search-bar, html[data-theme="dark"] .rz-guest-popover { background-color: var(--mg-card); background-image: linear-gradient(180deg, var(--mg-card-2) 0%, var(--mg-card) 100%); border-color: var(--mg-line); box-shadow: 0 24px 50px -24px rgba(3, 7, 18, 0.9), inset 0 1px 0 rgba(212, 175, 55, 0.14); } /* The shared room card: same lift, keeping its own photo/media area intact */ html[data-theme="dark"] .rrc-card { background-image: linear-gradient(180deg, var(--mg-card-2) 0%, var(--mg-card) 100%); } html[data-theme="dark"] .rrc-card .rrc-body { background: transparent; } /* --------------------------------------------------------------------------- 4. Gold details --------------------------------------------------------------------------- */ /* A short gold rule under main section headings (only headings that are the first heading of a section header block, to avoid decorating every h2) */ html[data-theme="dark"] .rz-rg-head h2::after, html[data-theme="dark"] .rz-intl-head h2::after { content: ''; display: block; width: 56px; height: 2px; margin-top: 0.7rem; border-radius: 2px; background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0)); } html[data-theme="dark"] .rz-intl-head h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, rgba(212,175,55,0), #d4af37, rgba(212,175,55,0)); } /* Footer: a glowing gold horizon where the page meets the footer */ html[data-theme="dark"] .footer-cta-band { border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,0.55), rgba(212,175,55,0)) 1; box-shadow: 0 -24px 60px -30px rgba(212, 175, 55, 0.35); } /* Form fields on dark surfaces: readable, gold focus ring */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22); } /* Text selection + scrollbar in brand colours */ html[data-theme="dark"] ::selection { background: rgba(212, 175, 55, 0.35); color: #fff; } html[data-theme="dark"] { scrollbar-color: rgba(212, 175, 55, 0.45) var(--mg-base); } html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--mg-base); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(212,175,55,0.55), rgba(212,175,55,0.3)); border-radius: 10px; border: 2px solid var(--mg-base); } /* Horizontal rules pick up the gold hairline instead of grey */ html[data-theme="dark"] hr { border-color: var(--mg-line); opacity: 1; } @media (prefers-reduced-transparency: reduce) { html[data-theme="dark"] { --rz-bg-primary: var(--mg-base); --rz-bg-secondary: var(--mg-raised); --rz-cream: var(--mg-raised); } }