/* ========================================================= SpaWhiz v1 — /assets/app.css (ONE FILE ONLY) ========================================================= GOALS / RULES (your non-negotiables): ------------------------------------ ------------------------------------ 1) ONE stylesheet only: all CSS lives here. 2) Strict scoping: page CSS MUST be under a body namespace: .page- ... No unscoped page rules. 3) Global CSS is limited to: - app-shell layout (sticky footer / base layout) - tiny opt-in utilities (.u-*) - infra bridges (Bootstrap → tokens) 4) Theme via tokens only: - Colors come from CSS variables (--bg, --surface, --text, --muted, --primary, etc.) - No hardcoded palette colors in component/page rules. 5) Multiple palettes later: - Palettes swap token VALUES only - No palette-specific rules outside token blocks 6) Header/footer behave like components: - Keep clearly labeled sections here - Use tokens only 7) Each PHP page sets $pageBodyClass; header prints: HOW TO ADD A NEW PALETTE LATER: -------------------------------- Add a selector block that overrides tokens only, e.g.: .theme-purple { --bg: ...; --primary: ...; --primary-rgb: ...; --focus: ...; ... } Then you can set without changing CSS rules. ========================================================= */ /* ====================================================== THEME BLOCKS — THE ONLY PLACE HARDCODED COLORS MAY EXIST ------------------------------------------------------ Rules: - Hex / rgb / hsl values are LEGAL here - Variables ONLY (no selectors, no components) - theme-default = base reality - All other themes override tokens only ====================================================== */ /* ====================================================== THEME TOKENS — DEFAULT PALETTE (SOURCE OF TRUTH) ====================================================== */ body.theme-default{ /* Core surfaces */ --bg: #EDEBE6; --surface: #FFFFFF; /* Text */ --text: #3E3A34; --muted: #6F6A61; /* Brand */ --primary: #C5A582; --primary-hover: #B69570; --primary-contrast: #3E3A34; --accent: #D8CFC4; --accent-contrast: #3E3A34; /* Functional highlight (ex: Analytics/Insights) */ --focus: #D4AF37; --focus-hover: #C9A227; --focus-contrast: #3E3A34; /* RGB tuples for translucency math */ --text-rgb: 62, 58, 52; --surface-rgb: 255, 255, 255; --primary-rgb: 197, 165, 130; --focus-rgb: 212, 175, 55; /* ================================================== EXTENDED UI TOKENS (derived; palette-safe) Used by: Gallery + future “premium” components ================================================== */ /* Soft surfaces / overlays derived from text (dark) */ --surface-2: rgba(var(--text-rgb), .04); --surface-3: rgba(var(--text-rgb), .08); /* Stronger border option */ --border-strong: rgba(var(--text-rgb), .28); /* Primary tint background (chips, highlights) */ --primary-soft: rgba(var(--primary-rgb), .18); /* Larger shadow for “lifted” hover tiles */ --shadow-lg: 0 18px 40px rgba(var(--text-rgb), .18); /* Small elevation (cards, overlays, lists) */ --shadow-sm: 0 6px 14px rgba(var(--text-rgb), .08); /* Dark fade overlay (thumb gradient end) */ --overlay: rgba(var(--text-rgb), .35); /* Modal surface (dark, but derived so it matches palette mood) */ --modal-bg: rgba(var(--text-rgb), .92); /* UI chrome */ --border: rgba(var(--text-rgb), .18); --shadow: 0 8px 20px rgba(var(--text-rgb), .08); /* Neutral sandbox surface (do NOT override in palettes) */ --preview-bg: var(--bg); /* Page-level semantic overrides */ --nav-brand-color: var(--text) --page-login-h1: var(--primary); --page-about-h1: var(--primary); --page-location-h1: var(--primary); /* ================================================== BUTTON ROLE TOKENS (semantic → style) ================================================== */ /* Role: NAV / manage (calm) */ --btn-nav-bg: var(--surface); --btn-nav-hover-bg: rgba(var(--primary-rgb), .10); --btn-nav-text: var(--text); --btn-nav-border: var(--accent); /* Role: INSIGHT (highlight) */ --btn-insight-bg: var(--focus); --btn-insight-hover-bg: var(--focus-hover); --btn-insight-text: var(--focus-contrast); --btn-insight-border: var(--focus); /* Role: CREATE (primary filled) */ --btn-create-bg: var(--primary); --btn-create-hover-bg: var(--primary-hover); --btn-create-text: var(--primary-contrast); --btn-create-border: var(--primary); /* Role: SEND (same as create for now; can diverge later) */ --btn-send-bg: var(--primary); --btn-send-hover-bg: var(--primary-hover); --btn-send-text: var(--primary-contrast); --btn-send-border: var(--primary); /* Semantic/UI tokens */ --on-primary: var(--primary-contrast); --success: var(--primary); --warning-soft: rgba(var(--focus-rgb), .14); --warning-border: rgba(var(--focus-rgb), .55); --danger: #B91C1C; --danger-soft: rgba(185, 28, 28, .08); --danger-border: rgba(185, 28, 28, .25); --backdrop: rgba(var(--text-rgb), .55); --star-empty: rgba(var(--text-rgb), .14); --star-filled: var(--focus); --star-glow: rgba(var(--focus-rgb), .65); } /* ====================================================== PALETTES — TOKEN OVERRIDES ONLY (NO RULES) ====================================================== */ /* Rejuvenating Spa (from your palette image) */ body.theme-rejuvenating{ --bs-navbar-brand-color: #d2e7c6; /* sampled blocks: #769358, #D5D593, #BAE5D6 */ --bg: #769358; --surface: #D5D593; --text: #2C3A24; /* softer dark olive */ --text-rgb: 44, 58, 36; --muted: rgba(44, 58, 36, .65); --primary: #3F5A2A; /* herbal green */ --primary-rgb: 63, 90, 42; --primary-hover: rgba(63, 90, 42, .85); --primary-contrast: #E6E9B8; /* light herbal cream */ --accent: #BAE5D6; --accent-contrast: #1F2A1A; --focus: #BAE5D6; --focus-hover: rgba(186, 229, 214, .85); --focus-contrast: #1F2A1A; --text-rgb: 44, 58, 36; --surface-rgb: 213, 213, 147; --primary-rgb: 63, 90, 42; --focus-rgb: 186, 229, 214; --border: rgba(var(--text-rgb), .22); --shadow: 0 10px 26px rgba(var(--text-rgb), .12); --btn-nav-bg: var(--surface); --btn-nav-hover-bg: rgba(var(--focus-rgb), .22); --btn-nav-text: var(--text); --btn-nav-border: rgba(var(--text-rgb), .18); --btn-insight-bg: var(--focus); --btn-insight-hover-bg: var(--focus-hover); --btn-insight-text: var(--focus-contrast); --btn-insight-border: var(--focus); --btn-create-bg: var(--primary); --btn-create-hover-bg: var(--primary-hover); --btn-create-text: var(--primary-contrast); --btn-create-border: var(--primary); --btn-send-bg: var(--primary); --btn-send-hover-bg: var(--primary-hover); --btn-send-text: var(--primary-contrast); --btn-send-border: var(--primary); /* Semantic/UI tokens */ --on-primary: var(--primary-contrast); --success: var(--primary); --warning-soft: rgba(var(--focus-rgb), .14); --warning-border: rgba(var(--focus-rgb), .55); --danger: #B91C1C; --danger-soft: rgba(185, 28, 28, .10); --danger-border: rgba(185, 28, 28, .30); --backdrop: rgba(var(--text-rgb), .55); --star-empty: rgba(var(--text-rgb), .18); --star-filled: var(--focus); --star-glow: rgba(var(--focus-rgb), .65); /* ...existing rejuvenating tokens... */ --nav-brand-color: #d2e7c6; --page-login-h1: var(--primary-contrast); --page-about-h1: var(--primary-contrast); --page-location-h1: var(--primary-contrast); } /* ====================================================== THEME TOKENS — ENCHANTED WATERS (purple / teal / lavender) ====================================================== */ body.theme-enchanted-waters{ /* Core surfaces (make BG + SURFACE actually different) */ --bg: #EAE5F6; /* lavender background (noticeably tinted) */ --surface: #FBFAFF; /* off-white lavender surface */ /* Text */ --text: #2E293B; /* deep ink */ --muted: rgba(46, 41, 59, .72); /* Brand (teal forward) */ --primary: #2CB1BC; /* teal */ --primary-hover: #2497A0; --primary-contrast: #FFFFFF; /* Accent (purple) */ --accent: #5530B8; /* deep royal purple */ --accent-contrast: #FFFFFF; /* Focus (lavender highlight) */ --focus: #CDB7F6; --focus-hover: #BFA3F2; --focus-contrast: #2E293B; /* RGB tuples */ --text-rgb: 46, 41, 59; --surface-rgb: 251, 250, 255; --primary-rgb: 44, 177, 188; --focus-rgb: 205, 183, 246; /* UI chrome */ --border: rgba(var(--text-rgb), .16); --shadow: 0 10px 24px rgba(var(--text-rgb), .10); /* Extended tokens */ --surface-2: rgba(var(--text-rgb), .04); --surface-3: rgba(var(--text-rgb), .08); --border-strong: rgba(var(--text-rgb), .26); --primary-soft: rgba(var(--primary-rgb), .18); --shadow-lg: 0 18px 40px rgba(var(--text-rgb), .18); --shadow-sm: 0 6px 14px rgba(var(--text-rgb), .10); --overlay: rgba(var(--text-rgb), .35); --modal-bg: rgba(var(--text-rgb), .92); /* Button roles */ --btn-nav-bg: var(--surface); --btn-nav-hover-bg: rgba(var(--primary-rgb), .10); --btn-nav-text: var(--text); --btn-nav-border: rgba(var(--text-rgb), .18); --btn-insight-bg: var(--focus); --btn-insight-hover-bg: var(--focus-hover); --btn-insight-text: var(--focus-contrast); --btn-insight-border: var(--focus); --btn-create-bg: var(--primary); --btn-create-hover-bg: var(--primary-hover); --btn-create-text: var(--primary-contrast); --btn-create-border: var(--primary); --btn-send-bg: var(--primary); --btn-send-hover-bg: var(--primary-hover); --btn-send-text: var(--primary-contrast); --btn-send-border: var(--primary); /* Optional: navbar brand tint token */ --nav-brand-color: #E7DBFF; } /* ====================================================== THEME TOKENS — CHIC (charcoal / fuchsia / white) ====================================================== */ body.theme-chic{ /* Core surfaces */ --bg: #787474; /* warm charcoal */ --surface: #FFFFFF; /* clean white cards */ /* Text */ --text: #1F1F23; /* near-black for readability on light surfaces */ --muted: rgba(31, 31, 35, .65); /* Brand (fuchsia) */ --primary: #E312A4; /* bold fuchsia */ --primary-hover: #C70F8F; --primary-contrast: #FFFFFF; /* Accent (cool gray framing) */ --accent: #6F6E6E; /* darker charcoal for borders */ --accent-contrast: #1F1F23; /* Focus / insight (lighter fuchsia) */ --focus: #F06BC8; --focus-hover: #E84DBB; --focus-contrast: #1F1F23; /* RGB tuples */ --text-rgb: 31, 31, 35; --surface-rgb: 255, 255, 255; --primary-rgb: 227, 18, 164; --focus-rgb: 240, 107, 200; /* UI chrome */ --border: rgba(31, 31, 35, .18); --shadow: 0 10px 24px rgba(0, 0, 0, .18); /* Extended tokens */ --surface-2: rgba(31, 31, 35, .04); --surface-3: rgba(31, 31, 35, .08); --border-strong: rgba(31, 31, 35, .30); --primary-soft: rgba(var(--primary-rgb), .20); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .22); --shadow-sm: 0 6px 14px rgba(0, 0, 0, .14); --overlay: rgba(31, 31, 35, .45); --modal-bg: rgba(31, 31, 35, .94); /* Button role tokens */ --btn-nav-bg: var(--surface); --btn-nav-hover-bg: rgba(var(--primary-rgb), .12); --btn-nav-text: var(--text); --btn-nav-border: var(--accent); --btn-insight-bg: var(--focus); --btn-insight-hover-bg: var(--focus-hover); --btn-insight-text: var(--focus-contrast); --btn-insight-border: var(--focus); --btn-create-bg: var(--primary); --btn-create-hover-bg: var(--primary-hover); --btn-create-text: var(--primary-contrast); --btn-create-border: var(--primary); --btn-send-bg: var(--primary); --btn-send-hover-bg: var(--primary-hover); --btn-send-text: var(--primary-contrast); --btn-send-border: var(--primary); /* Brand polish */ --nav-brand-color: #E312A4; } /* ====================================================== GLOBAL: Bootstrap → SpaWhiz token bridge ====================================================== */ body{ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-border-color: var(--border); } /* Bootstrap button harmonization (token-based; global) */ .btn-primary{ --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-color: var(--primary-contrast); --bs-btn-hover-color: var(--primary-contrast); } .btn-outline-primary{ --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary-contrast); } /* Secondary should be calm against --bg */ .btn-secondary{ --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--text); --bs-btn-hover-bg: rgba(var(--primary-rgb), .10); --bs-btn-hover-border-color: rgba(var(--primary-rgb), .35); --bs-btn-hover-color: var(--text); } .btn-outline-secondary{ --bs-btn-border-color: var(--accent); --bs-btn-color: var(--text); --bs-btn-hover-bg: rgba(var(--primary-rgb), .10); --bs-btn-hover-border-color: rgba(var(--primary-rgb), .35); --bs-btn-hover-color: var(--text); } /* ====================================================== GLOBAL: App shell layout ====================================================== */ html, body{ height: 100%; } body{ min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } main{ flex: 1 0 auto; } footer{ flex-shrink: 0; } .page-wrap{ width: 100%; } h1, h2, h3, h4, h5, h6{ color: var(--text); } /* ====================================================== GLOBAL: Tiny opt-in utilities (.u-*) ====================================================== */ .u-flex{ display: flex; } .u-flex-center{ display: flex; align-items: center; justify-content: center; } .u-gap-sm{ gap: 0.5rem; } .u-gap-md{ gap: 1rem; } .u-muted{ color: var(--muted) !important; } /* ====================================================== GLOBAL: Semantic button roles (contract-approved) ====================================================== */ .btn-admin, .btn-insight, .btn-create, .btn-send{ --bs-btn-bg: var(--btn-create-bg); --bs-btn-border-color: var(--btn-create-border); --bs-btn-color: var(--btn-create-text); --bs-btn-hover-bg: var(--btn-create-hover-bg); --bs-btn-hover-border-color: var(--btn-create-border); --bs-btn-hover-color: var(--btn-create-text); --bs-btn-active-bg: var(--btn-create-hover-bg); --bs-btn-active-border-color: var(--btn-create-border); --bs-btn-active-color: var(--btn-create-text); } /* Role: NAV / manage */ .btn-admin{ --bs-btn-bg: var(--btn-nav-bg); --bs-btn-border-color: var(--btn-nav-border); --bs-btn-color: var(--btn-nav-text); --bs-btn-hover-bg: var(--btn-nav-hover-bg); --bs-btn-hover-border-color: var(--btn-nav-border); --bs-btn-hover-color: var(--btn-nav-text); } /* Role: INSIGHT / highlight */ .btn-insight{ --bs-btn-bg: var(--btn-insight-bg); --bs-btn-border-color: var(--btn-insight-border); --bs-btn-color: var(--btn-insight-text); --bs-btn-hover-bg: var(--btn-insight-hover-bg); --bs-btn-hover-border-color: var(--btn-insight-border); --bs-btn-hover-color: var(--btn-insight-text); } /* Role: CREATE / primary filled */ .btn-create{ --bs-btn-bg: var(--btn-create-bg); --bs-btn-border-color: var(--btn-create-border); --bs-btn-color: var(--btn-create-text); --bs-btn-hover-bg: var(--btn-create-hover-bg); --bs-btn-hover-border-color: var(--btn-create-border); --bs-btn-hover-color: var(--btn-create-text); } /* Role: SEND / same as create (for now) */ .btn-send{ --bs-btn-bg: var(--btn-send-bg); --bs-btn-border-color: var(--btn-send-border); --bs-btn-color: var(--btn-send-text); --bs-btn-hover-bg: var(--btn-send-hover-bg); --bs-btn-hover-border-color: var(--btn-send-border); --bs-btn-hover-color: var(--btn-send-text); } /* ====================================================== HEADER: Site Header / Navigation (component) Applies to includes/header.php ====================================================== */ .navbar{ background-color: var(--primary) !important; /* Bootstrap navbar vars (token-based) */ --bs-navbar-color: var(--primary-contrast); --bs-navbar-hover-color: var(--primary-contrast); --bs-navbar-active-color: var(--primary-contrast); --bs-navbar-brand-color: var(--primary-contrast); --bs-navbar-brand-hover-color: var(--primary-contrast); border-bottom: none; } /* Brand label */ .navbar .navbar-brand span{ color: var(--nav-brand-color) !important; } /* Nav links (Dashboard links are nav-links now → no more button hacks) */ .navbar .nav-link{ color: var(--primary-contrast) !important; font-weight: 500; } .navbar .nav-link.active{ color: var(--primary-contrast) !important; text-decoration: underline; text-underline-offset: 4px; } .navbar .nav-link:hover{ color: var(--primary-contrast) !important; text-decoration: underline; text-underline-offset: 4px; } /* Header buttons that remain (Login/Register, Logout) */ .navbar .btn{ --bs-btn-color: var(--primary-contrast); --bs-btn-hover-color: var(--primary-contrast); } /* Subtle outline for auth buttons (Login / Register / Logout) */ .navbar .btn{ border: 1px solid color-mix(in srgb, var(--primary-contrast) 35%, transparent); background: transparent; } /* Hover: slightly more presence */ .navbar .btn:hover{ border-color: color-mix(in srgb, var(--primary-contrast) 55%, transparent); } /* ========================= Login Page ========================= */ .page-login .login-card { max-width: 480px; /* or 480, 500 — your call */ margin-inline: auto; } /* Login card secondary actions */ .page-login .login-card-links{ margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); } .page-login .login-card-links a{ color: var(--primary); text-decoration: none; font-weight: 500; } .page-login .login-card-links a:hover{ color: var(--primary-hover); text-decoration: underline; } .page-login .login-card-sep{ color: var(--muted); } .page-login h1{ color: var(--page-login-h1); } /* ========================= Register Page ========================= */ .page-register .register-card{ background-color: var(--surface); opacity: 1; } /* ========================= Privacy Page ========================= */ .page-privacy .privacy-card{ background-color: var(--surface); opacity: 1; } /* ====================================================== FOOTER: Site Footer (component) Applies to includes/footer.php ====================================================== */ .site-footer{ background-color: var(--primary) !important; color: var(--primary-contrast); border-top: none; } .site-footer a, .site-footer a.footer-brand-link{ color: var(--primary-contrast); } .site-footer a:hover{ text-decoration: underline; text-underline-offset: 4px; } /* ====================================================== PAGE: Main Index (index.php) Body class: .page-main-index ====================================================== */ .page-main-index .main-index{ padding-top: 3rem; padding-bottom: 3rem; text-align: center; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); max-width: 760px; margin: 2rem auto; padding-left: 1.5rem; padding-right: 1.5rem; } .page-main-index .main-index-logo{ max-width: 180px; margin: 0 auto 1.5rem; display: block; } .page-main-index h1{ color: var(--primary); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 0.75rem; } .page-main-index .lead{ color: var(--muted); } /* ====================================================== PAGE: Verify Pending (verify_pending.php) Body class: .page-verify-pending ====================================================== */ .page-verify-pending .verify-card{ background: var(--surface); border-radius: 1rem; box-shadow: var(--shadow); padding: 2rem; } .page-verify-pending h1{ color: var(--text); } .page-verify-pending .lead, .page-verify-pending p.text-muted{ color: var(--muted); } /* If verify page uses btn-primary, keep it on-brand */ .page-verify-pending .btn-primary{ background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .page-verify-pending .btn-primary:hover{ background: var(--primary-hover); border-color: var(--primary-hover); } .page-verify-pending hr{ border-color: var(--border); } .page-verify-pending a{ color: var(--primary); } .page-verify-pending a:hover{ color: var(--primary-hover); text-decoration: underline; } /* ========================================================= PAGE: Gallery Scope: .page-gallery Contract: token-only colors, no hardcoded palette values ========================================================= */ .page-gallery .sw-gallery { padding-top: 8px; } .page-gallery .sw-gallery__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 14px; } .page-gallery .sw-gallery__meta{ color: var(--muted); font-size: 0.875rem; } .page-gallery .sw-gallery__filters{ display:flex; gap: 8px; flex-wrap: wrap; } /* Filter chips */ .page-gallery .sw-chip{ appearance:none; border-radius: 999px; padding: 6px 12px; font-size: 0.875rem; line-height: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: background .16s ease, border-color .16s ease, transform .16s ease; } .page-gallery .sw-chip:hover{ background: var(--surface-2); border-color: var(--border-strong); } .page-gallery .sw-chip.is-active{ background: var(--primary-soft); border-color: var(--primary); color: var(--text); } /* Tiles */ .page-gallery .sw-tile{ border-radius: 18px; overflow:hidden; border: 1px solid var(--border); background: var(--surface); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; position: relative; } .page-gallery .sw-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .page-gallery .sw-thumb{ width:100%; aspect-ratio: 1 / 1; background: var(--surface-2); position: relative; } .page-gallery .sw-thumb img, .page-gallery .sw-thumb video{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.001); } .page-gallery .sw-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, var(--overlay) 100%); pointer-events:none; } /* Badges / play */ .page-gallery .sw-badge{ position:absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); } .page-gallery .sw-play{ position:absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; display:grid; place-items:center; color: var(--text); background: var(--primary-soft); border: 1px solid var(--primary); font-size: 14px; } /* Open button reset */ .page-gallery .sw-gallery__open{ width:100%; text-align:left; padding:0; border:0; background: transparent; } /* Filter hiding (no runtime inline style) */ .page-gallery .is-hidden{ display:none !important; } /* Modal (token-only) */ .page-gallery .sw-modal{ background: var(--modal-bg); border: 1px solid var(--border); border-radius: 18px; } .page-gallery .sw-lightbox{ position: relative; min-height: 50vh; display: grid; place-items: center; } .page-gallery .sw-lightbox img, .page-gallery .sw-lightbox video{ max-width:100%; width:100%; border-radius: 14px; } .page-gallery .sw-modal__badge{ display:inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; background: var(--primary-soft); border: 1px solid var(--primary); color: var(--text); } .page-gallery .sw-modal__count{ color: var(--muted); font-size: 0.875rem; } .page-gallery .sw-modal__hint{ color: var(--muted); font-size: 0.875rem; } /* Nav buttons */ .page-gallery .sw-navbtn{ position:absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; display:grid; place-items:center; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); font-size: 18px; cursor: pointer; user-select:none; } .page-gallery .sw-navbtn:hover{ background: var(--primary-soft); border-color: var(--primary); } .page-gallery .sw-navbtn.prev{ left: 10px; } .page-gallery .sw-navbtn.next{ right: 10px; } .page-gallery .sw-navbtn:disabled{ opacity: .35; cursor: default; } /* Slightly smaller arrows on tiny screens */ @media (max-width: 575px){ .page-gallery .sw-navbtn{ width: 40px; height: 40px; } } /* ========================= Gallery modal sizing ========================= */ /* Keep the modal from going “full cinema screen” */ .page-gallery #swGalleryModal .modal-dialog{ max-width: 1000px; /* manageable on desktop */ } /* Make the modal body respect viewport height */ .page-gallery #swGalleryModal .modal-body{ max-height: 80vh; overflow: hidden; } /* Lightbox area: center and constrain */ .page-gallery .sw-lightbox{ min-height: 0; /* override the 50vh behavior */ max-height: 70vh; /* main cap */ display: grid; place-items: center; } /* Media should fit inside the lightbox */ .page-gallery #swMediaHost{ display: grid; place-items: center; } /* The actual image/video sizing rule (the important part) */ .page-gallery #swMediaHost img, .page-gallery #swMediaHost video{ width: auto !important; height: auto !important; max-width: 100%; max-height: 70vh; /* keeps it on-screen */ object-fit: contain; /* no cropping */ border-radius: 14px; } /* ========================================================= User Dashboard page — scoped (CSS contract) ========================================================= */ .page-dashboard .er-dashboard-welcome { color: var(--primary); } .page-dashboard .er-dashboard-table-head { background-color: var(--primary); } .page-dashboard .er-dashboard-appointment-row { cursor: pointer; } .page-dashboard .er-dashboard-price-wrap { display: flex; align-items: center; gap: 6px; } .page-dashboard .er-dashboard-price-was { text-decoration: line-through; color: var(--muted); } .page-dashboard .er-dashboard-price-now { color: var(--success); font-weight: 600; } .page-dashboard .er-dashboard-price-regular { font-weight: 500; } .page-dashboard .er-dashboard-progress { height: 6px; } .page-dashboard .er-dashboard-policy { background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 10px; padding: 12px 14px; margin-top: 10px; } .page-dashboard .er-dashboard-policy-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; } .page-dashboard .er-dashboard-cancel-err { margin-top: 8px; } /* RSS render cards (was inline background/body styling) */ .page-dashboard .er-dashboard-rss-card { background: var(--surface-2); } .page-dashboard .er-dashboard-rss-body { line-height: 1.3; } /* ========================================================= Dashboard — Upcoming Appointments “pop-over” (er-modal) ========================================================= */ .page-dashboard .er-modal[hidden] { display: none !important; } .page-dashboard .er-modal { position: fixed; inset: 0; z-index: 1055; /* above most Bootstrap content */ } .page-dashboard .er-modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(2px); } .page-dashboard .er-modal-card { position: relative; z-index: 1; width: min(560px, calc(100vw - 28px)); margin: 10vh auto 0; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; } .page-dashboard .er-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .page-dashboard .er-modal-body { padding: 14px 16px; } .page-dashboard .er-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); } .page-dashboard .modal-title { margin: 0; font-weight: 700; font-size: 1.05rem; } .page-dashboard .modal-x { appearance: none; border: 0; background: transparent; font-size: 26px; line-height: 1; padding: 0 6px; cursor: pointer; color: var(--muted); } .page-dashboard .modal-x:hover { color: var(--text); } .page-dashboard .modal-info { margin: 0; color: var(--text); } .page-dashboard .form-error { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: 12px; padding: 10px 12px; } /* body lock when modal is open (your JS toggles modal-open) */ body.modal-open { overflow: hidden; } /* Nice hover affordance for clickable rows */ .page-dashboard .appointment-row:hover { background: var(--primary-soft); } /* ========================================================= Dashboard — Loyalty stars (TOP row) ========================================================= */ .page-dashboard .loyalty-stars { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: nowrap; } .page-dashboard .loyalty-star { font-size: 1.9rem; /* BIG stars (top row) */ line-height: 1; color: var(--star-empty); /* empty = gray */ transition: transform 0.12s ease, text-shadow 0.12s ease, color 0.12s ease; } .page-dashboard .loyalty-star.filled { color: var(--star-filled); /* gold */ text-shadow: 0 0 6px var(--star-glow); transform: translateY(-1px); } /* Reward-ready pulse */ .page-dashboard .loyalty-star.eligible { animation: loyalty-star-pulse 1.1s ease-in-out infinite alternate; } @keyframes loyalty-star-pulse { from { text-shadow: 0 0 6px var(--star-glow); transform: translateY(-1px) scale(1); } to { text-shadow: 0 0 14px var(--star-glow); transform: translateY(-2px) scale(1.06); } } /* ========================================================= Dashboard — Quick Action buttons visibility fix (token-only) ========================================================= */ .page-dashboard .btn.btn-purple-magenta { background: var(--primary); border: 1px solid var(--primary); color: var(--on-primary); /* if you already have --on-primary, this will be overridden */ } .page-dashboard .btn.btn-purple-magenta:hover { filter: brightness(0.95); color: var(--on-primary); } .page-dashboard .btn.btn-manage-bookings { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .page-dashboard .btn.btn-manage-bookings:hover { filter: brightness(0.98); color: var(--text); } /* In case a global rule nuked button chrome */ .page-dashboard .btn { border-radius: 12px; } /* ========================================================= Admin Dashboard (scoped) ========================================================= */ .page-admin-dashboard .card-surface { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .page-admin-dashboard .section-title { color: var(--text); } /* Quick actions: nav-link contract */ .page-admin-dashboard .admin-quick-actions .nav-link { display: inline-flex; align-items: center; gap: .25rem; padding: .6rem 1rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; } .page-admin-dashboard .admin-quick-actions .nav-link:hover { background: var(--surface-2); } /* Role buttons (semantic) */ .page-admin-dashboard .btn-admin, .page-admin-dashboard .btn-create, .page-admin-dashboard .btn-send, .page-admin-dashboard .btn-manage { border-radius: 999px; } /* If your token bridge already defines these, keep minimal. */ .page-admin-dashboard .btn-create { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .page-admin-dashboard .btn-send { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .page-admin-dashboard .btn-manage { background: var(--surface); border: 1px solid var(--border); color: var(--text); } /* Status pills */ .page-admin-dashboard .pill { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .page-admin-dashboard .pill-pill, .page-admin-dashboard .pill-pill-active {} /* Use tokenized accents for status */ .page-admin-dashboard .pill-pill-scheduled, .page-admin-dashboard .pill-scheduled { background: var(--surface-2); color: var(--text); } .page-admin-dashboard .pill-pill-active, .page-admin-dashboard .pill-active { background: var(--surface-2); color: var(--text); } .page-admin-dashboard .pill-pill-expired, .page-admin-dashboard .pill-expired { background: var(--surface-2); color: var(--muted); } /* Badges (tokenized) */ .page-admin-dashboard .badge { border-radius: 999px; font-weight: 700; } .page-admin-dashboard .badge-ok { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: .25rem .5rem; } .page-admin-dashboard .badge-bad { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: .25rem .5rem; } .page-admin-dashboard .badge-neutral, .page-admin-dashboard .badge-info { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: .15rem .4rem; } /* Overlays (no inline styles) */ .page-admin-dashboard .admin-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: 1rem; } .page-admin-dashboard .admin-overlay-card { max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow-sm); text-align: center; } /* Inbox / thread heights (no inline max-height) */ .page-admin-dashboard .rx-list { border: 1px solid var(--border); border-radius: 1rem; overflow: auto; max-height: 420px; background: var(--surface); } .page-admin-dashboard .rx-thread { border: 1px solid var(--border); border-radius: 1rem; overflow: auto; padding: .5rem; max-height: 360px; background: var(--surface); } /* Active inbox row */ .page-admin-dashboard .rx-item-active { background: var(--surface-2); border-left: 4px solid var(--primary); } /* SMS bubbles (no inline font-size) */ .page-admin-dashboard .rx-bubble { padding: .35rem .5rem; border-radius: .9rem; font-size: .9rem; max-width: 92%; } .page-admin-dashboard .rx-bubble-in { background: var(--surface-2); color: var(--text); } .page-admin-dashboard .rx-bubble-out { background: var(--primary); color: var(--on-primary); } .page-admin-dashboard .rx-bubble-ts { margin-top: .25rem; font-size: .75rem; color: var(--muted); } .page-admin-dashboard .rx-bubble-out .rx-bubble-ts { color: color-mix(in srgb, var(--on-primary) 70%, transparent); } /* Promo modal header accents */ .page-admin-dashboard .promo-modal-header .promo-header-bar { width: 10px; height: 24px; border-radius: 999px; background: var(--primary); } /* Promo modal: ensure fields visually separate from modal surface */ .page-admin-dashboard #promoModal .modal-content { background: var(--surface); } .page-admin-dashboard #promoModal .modal-body { background: var(--surface-2); } /* Inputs/selects/textarea inside promo modal */ .page-admin-dashboard #promoModal .form-control, .page-admin-dashboard #promoModal .form-select, .page-admin-dashboard #promoModal textarea.form-control { background: var(--surface); color: var(--text); border: 1px solid var(--border); } /* Stronger focus state (still tokens) */ .page-admin-dashboard #promoModal .form-control:focus, .page-admin-dashboard #promoModal .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 25%, transparent); } /* Placeholder contrast */ .page-admin-dashboard #promoModal .form-control::placeholder { color: var(--muted); } /* ====================================================== MERGED FIXES: remove inline styles from dashboard.php ====================================================== */ /* Promo modal header (you already use these classes in HTML) */ .page-admin-dashboard .promo-modal-header{ background: var(--surface); border-bottom: 1px solid var(--border); } .page-admin-dashboard .promo-header-bar{ width: 10px; height: 26px; border-radius: 999px; background: var(--primary); } /* Text Blast / RX overlays (replaces inline rgba + radius) */ .page-admin-dashboard .dash-overlay{ background: rgba(var(--surface-rgb), .75); border-radius: 1rem; } .page-admin-dashboard .dash-overlay-card{ background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); max-width: 420px; } /* RX inbox + thread sizing (replaces inline max-heights) */ .page-admin-dashboard #rx-list{ max-height: 420px; } .page-admin-dashboard #rx-thread{ max-height: 360px; } /* Make RX list items feel clickable without relying on inline / random classes */ .page-admin-dashboard .rx-item{ border-radius: .6rem; transition: background .12s ease; } /* RX message bubbles + timestamp (replaces inline font-size on timestamp) */ .page-admin-dashboard .rx-bubble{ max-width: 88%; border: 1px solid var(--border); background: rgba(var(--text-rgb), .04); color: var(--text); } .page-admin-dashboard .rx-bubble.is-out{ background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .page-admin-dashboard .rx-ts{ font-size: .75rem; opacity: .85; } /* Promotions table action buttons (optional: keeps them token-based) */ .page-admin-dashboard .promo-edit{ --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary-contrast); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: var(--primary-contrast); } /* If you keep the text-blast "Send Blast Now" as btn-manage, define it */ .page-admin-dashboard .btn-manage{ --bs-btn-bg: var(--btn-create-bg); --bs-btn-border-color: var(--btn-create-border); --bs-btn-color: var(--btn-create-text); --bs-btn-hover-bg: var(--btn-create-hover-bg); --bs-btn-hover-border-color: var(--btn-create-border); --bs-btn-hover-color: var(--btn-create-text); } /* ====================================================== PAGE: Admin Appearance (admin/appearance.php) Body class: .page-admin-appearance ====================================================== */ .page-admin-appearance .palette-tile{ display: block; border: 1px solid rgba(var(--text-rgb), .08); border-radius: 1rem; padding: 1rem; background: var(--surface); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .page-admin-appearance .palette-tile:hover{ transform: translateY(-1px); box-shadow: var(--shadow); } .page-admin-appearance .palette-tile.is-selected{ border-color: var(--primary); box-shadow: 0 12px 34px rgba(var(--text-rgb), .10); } .page-admin-appearance .palette-radio{ position: absolute; opacity: 0; pointer-events: none; } .page-admin-appearance .palette-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .page-admin-appearance .palette-name{ font-weight: 700; font-size: 1.05rem; } .page-admin-appearance .palette-preview{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: .75rem; border-radius: .9rem; background: transparent; border: 1px solid rgba(var(--text-rgb), .10); } } .page-admin-appearance .palette-swatch{ display: grid; gap: .4rem; } .page-admin-appearance .swatch-chip{ height: 52px; border-radius: .75rem; border: 1px solid rgba(var(--text-rgb), .18); background: var(--surface); } .page-admin-appearance .palette-foot{ margin-top: .75rem; color: var(--muted); } .page-admin-appearance .card-body{ background-color: var(--preview-bg); border-radius: 1.5rem; border: 1px solid rgba(var(--text-rgb), .14); box-shadow: var(--shadow); } /* ========================================================= Page: Services Scope: .page-services ========================================================= */ .page-services .services-title { font-weight: 700; margin: 0 0 .25rem 0; color: var(--primary); } .page-services .services-subtext { margin: 0; color: var(--muted); } .page-services .services-brand { color: var(--text); } .page-services .services-banner { margin-top: .5rem; padding: .6rem .8rem; border-radius: var(--radius, .75rem); background: var(--surface); color: var(--text); border: 1px solid var(--border); } .page-services .services-badge{ background: var(--focus); border: 1px solid var(--focus); font-weight: 400; } .page-services .services-badge--pill { margin-left: .5rem; vertical-align: middle; } .page-services .services-tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, .75rem); overflow: hidden; } .page-services table thead th { background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--border); } .page-services table tbody td { border-top: 1px solid var(--border); } .page-services .services-price-old { color: var(--muted); text-decoration: line-through; margin-right: .35rem; } .page-services .services-price-new { font-weight: 700; color: var(--text); } .page-services .services-addonbox { border: 1px solid var(--border); border-radius: var(--radius, .75rem); padding: .5rem .65rem; background: var(--surface); } .page-services .services-addonitem { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px dashed var(--border); margin: 0; } .page-services .services-addonitem:last-child { border-bottom: none; } .page-services .services-addonname { font-weight: 600; color: var(--text); } .page-services .services-addondesc { display: block; margin-top: .15rem; color: var(--muted); font-size: .875rem; } .page-services .services-addonprice { white-space: nowrap; font-weight: 600; color: var(--text); } .page-services .services-modalcard { padding: .85rem; border-radius: var(--radius, .75rem); background: var(--surface); border: 1px solid var(--border); } .page-services .services-modal-footer { border-top: 1px solid var(--border); } .page-services .services-success { color: var(--success, var(--primary)); } /* Subtle pulse for promo button (tokenized) */ .page-services .services-pulse { position: relative; } .page-services .services-pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--primary); opacity: .45; animation: services-pulse-ring 1.6s ease-out infinite; } .page-services .services-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); padding: 1.25rem; } /* Optional: tighten spacing so the card feels intentional */ .page-services .services-card .services-title{ margin-top: 0; } /* If your table wrapper already has its own border/shadow, you can flatten it so you don't get “card inside card” */ .page-services .services-card .services-tablewrap{ box-shadow: none; } @keyframes services-pulse-ring { 0% { transform: scale(.9); opacity: .55; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } } /* ====================================================== PAGE: About (default spa filler) Scope: .page-about Layout: image | content | image ====================================================== */ .page-about .about{ padding-top: 1.5rem; padding-bottom: 2.5rem; } .page-about .about-wrap{ max-width: 1100px; margin-inline: auto; } .page-about .about-title{ margin: 0 0 1.25rem 0; font-weight: 800; color: var(--page-about-h1); } /* --- GRID LAYOUT --- */ .page-about .about-triple{ display: grid; gap: 1.25rem; } /* Desktop: side-by-side */ @media (min-width: 992px){ .page-about .about-triple{ grid-template-columns: 300px 1fr 300px; /* +15% */ align-items: start; } } /* --- IMAGES --- */ .page-about .about-photo{ margin: 0; } .page-about .about-photo__frame{ width: 100%; max-width: 300px; /* +15% */ margin-inline: auto; aspect-ratio: 3 / 4; border-radius: 1rem; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .page-about .about-photo__frame img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* --- CENTER CONTENT --- */ .page-about .about-center{ display: grid; gap: 1.25rem; } .page-about .about-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); padding: 1.25rem; } .page-about .about-h2{ margin: 0 0 .75rem 0; font-weight: 800; color: var(--text); } .page-about .about-p{ margin: 0 0 1rem 0; color: var(--text); line-height: 1.65; } .page-about .about-p:last-child{ margin-bottom: 0; } .page-about .about-muted{ color: var(--muted); font-size: .95rem; } .page-about .about-actions{ margin-top: 1.1rem; } /* One-image layout: make the single image more prominent */ @media (min-width: 992px){ .page-about .about-triple.about-triple--one{ grid-template-columns: 420px 1fr; /* bigger image column */ gap: 1.75rem; } .page-about .about-triple.about-triple--one .about-photo__frame{ max-width: 420px; } } /* ====================================================== PAGE: Locations Scope: .page-locations ====================================================== */ .page-locations .locations{ padding-bottom: 2.25rem; } .page-locations .loc-hero{ position: relative; padding: 2rem 0 1.25rem; } .page-locations .loc-hero__bg{ position:absolute; inset: 0; background: radial-gradient(900px 280px at 20% 0%, rgba(var(--primary-rgb), .18), transparent 60%), radial-gradient(900px 280px at 80% 0%, rgba(var(--text-rgb), .06), transparent 60%); pointer-events:none; } .page-locations .loc-hero__content{ position: relative; z-index: 1; } .page-locations .loc-title{ margin: 0 0 .5rem 0; font-weight: 900; color: var(--page-location-h1); } .page-locations .loc-title__sub{ display:block; font-weight: 700; color: var(--muted); margin-top: .25rem; font-size: .95rem; } .page-locations .loc-sub{ margin: 0 0 1rem 0; color: var(--muted); max-width: 64ch; } .page-locations .loc-badges{ display:flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .page-locations .loc-badge{ display:inline-flex; align-items:center; padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: .85rem; } .page-locations .loc-cta{ display:flex; flex-wrap: wrap; gap: .6rem; } .page-locations .loc-body{ padding-top: .75rem; } .page-locations .loc-grid{ display:grid; gap: 1rem; } @media (min-width: 992px){ .page-locations .loc-grid{ grid-template-columns: 1.35fr .9fr; gap: 1.25rem; align-items: start; } } .page-locations .loc-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); overflow: hidden; } .page-locations .loc-card__media{ background: rgba(var(--text-rgb), .04); } .page-locations .loc-card__media iframe{ display:block; width: 100%; height: 360px; border: 0; } @media (min-width: 992px){ .page-locations .loc-card__media iframe{ height: 420px; } } .page-locations .loc-map-placeholder{ height: 360px; background: linear-gradient(180deg, rgba(var(--text-rgb), .06), rgba(var(--text-rgb), .02)); } @media (min-width: 992px){ .page-locations .loc-map-placeholder{ height: 420px; } } .page-locations .loc-card__footer{ display:flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: 1rem; border-top: 1px solid var(--border); } .page-locations .loc-address{ display:flex; gap: .75rem; align-items: flex-start; } .page-locations .loc-pin{ width: 14px; height: 14px; margin-top: .3rem; border-radius: 999px; background: rgba(var(--primary-rgb), .9); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18); } .page-locations .loc-address__text{ color: var(--text); } .page-locations .loc-muted{ color: var(--muted); } .page-locations .loc-actions{ display:flex; gap: .5rem; flex-wrap: wrap; } .page-locations .loc-noscript{ padding: .85rem 1rem; color: var(--muted); border-top: 1px solid var(--border); } .page-locations .loc-card--details{ padding: 1rem; } .page-locations .loc-card__title{ margin: 0 0 .75rem 0; font-weight: 900; color: var(--text); } .page-locations .loc-list{ list-style: none; padding: 0; margin: 0 0 1rem 0; display: grid; gap: .65rem; } .page-locations .loc-list li{ display:flex; justify-content: space-between; gap: .75rem; padding-bottom: .65rem; border-bottom: 1px dashed var(--border); } .page-locations .loc-list li:last-child{ border-bottom: 0; padding-bottom: 0; } .page-locations .loc-list span{ color: var(--muted); font-weight: 700; } .page-locations .loc-list strong{ color: var(--text); text-align: right; } .page-locations .loc-hours{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .page-locations .loc-hours__title{ margin: 0 0 .5rem 0; font-weight: 900; color: var(--text); } .page-locations .loc-hours__body{ margin: 0 0 .85rem 0; color: var(--muted); line-height: 1.6; } .page-locations .loc-note{ margin-top: 1rem; padding: .85rem 1rem; border-radius: .9rem; border: 1px solid var(--border); background: rgba(var(--primary-rgb), .10); color: var(--text); } /* ====================================================== PAGE: Admin Manage Services Scope: .page-admin-manage-services ====================================================== */ .page-admin-manage-services .ms-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); } .page-admin-manage-services .ms-card .card-header{ background: rgba(var(--text-rgb), .04); border-bottom: 1px solid var(--border); } .page-admin-manage-services .ms-list{ display: grid; gap: .85rem; } .page-admin-manage-services .ms-item{ border: 1px solid var(--border); border-radius: 1rem; padding: .9rem; background: var(--surface); } .page-admin-manage-services .ms-item + .ms-item{ margin-top: .25rem; } /* Button roles (page-scoped, contract-safe) */ .page-admin-manage-services .btn-admin{ --bs-btn-bg: var(--btn-nav-bg); --bs-btn-border-color: var(--btn-nav-border); --bs-btn-color: var(--btn-nav-text); --bs-btn-hover-bg: var(--btn-nav-hover-bg); --bs-btn-hover-border-color: var(--btn-nav-border); --bs-btn-hover-color: var(--btn-nav-text); } .page-admin-manage-services .btn-create{ --bs-btn-bg: var(--btn-create-bg); --bs-btn-border-color: var(--btn-create-border); --bs-btn-color: var(--btn-create-text); --bs-btn-hover-bg: var(--btn-create-hover-bg); --bs-btn-hover-border-color: var(--btn-create-hover-bg); --bs-btn-hover-color: var(--btn-create-text); } .page-admin-manage-services .btn-nav{ --bs-btn-bg: var(--btn-nav-bg); --bs-btn-border-color: var(--btn-nav-border); --bs-btn-color: var(--btn-nav-text); --bs-btn-hover-bg: var(--btn-nav-hover-bg); --bs-btn-hover-border-color: var(--btn-nav-border); --bs-btn-hover-color: var(--btn-nav-text); } /* ====================================================== PAGE: Admin Appointments Calendar File: /admin/appointments_calendar.php Body class: .page-admin-appointments-calendar Contract: token-only colors, fully scoped ====================================================== */ .page-admin-appointments-calendar .er-page-title{ font-weight: 700; letter-spacing: 0.03em; } .page-admin-appointments-calendar .er-label-sm{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .page-admin-appointments-calendar .er-card-subtitle{ font-size: 0.8rem; color: var(--muted); } /* Scroll panes */ .page-admin-appointments-calendar .er-slot-list{ max-height: 350px; overflow-y: auto; } .page-admin-appointments-calendar .er-slot-empty, .page-admin-appointments-calendar .er-booking-empty{ font-size: 0.9rem; color: var(--muted); } /* Booking rows */ .page-admin-appointments-calendar .er-booking-row{ cursor: pointer; transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease; border-radius: .75rem; padding-inline: .5rem; margin-inline: -.5rem; /* lets hover bg feel “full width” inside card */ } .page-admin-appointments-calendar .er-booking-row:hover{ background: var(--surface-2); box-shadow: var(--shadow); transform: translateY(-1px); } .page-admin-appointments-calendar .er-booking-time{ font-weight: 700; } .page-admin-appointments-calendar .er-booking-client{ font-weight: 600; } /* Status badges */ .page-admin-appointments-calendar .er-badge-status{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } /* Keep status “different” without hardcoded colors */ .page-admin-appointments-calendar .er-badge-upcoming{ background: rgba(var(--primary-rgb), .14); border-color: rgba(var(--primary-rgb), .35); color: var(--text); } .page-admin-appointments-calendar .er-badge-completed{ background: rgba(var(--text-rgb), .06); border-color: rgba(var(--text-rgb), .18); color: var(--muted); } .page-admin-appointments-calendar .er-badge-cancelled{ background: rgba(var(--text-rgb), .06); border-color: rgba(var(--text-rgb), .18); color: var(--muted); } /* Availability rows */ .page-admin-appointments-calendar .er-availability-row{ border-radius: 0.75rem; border: 1px solid var(--border); padding: 0.6rem 0.9rem; margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: space-between; background: var(--surface); transition: background-color .12s ease, transform .06s ease; } .page-admin-appointments-calendar .er-availability-row:hover{ background: var(--surface-2); } .page-admin-appointments-calendar .er-availability-time{ font-weight: 600; } .page-admin-appointments-calendar .er-availability-controls .btn{ padding-inline: 0.55rem; } /* Small select widths */ .page-admin-appointments-calendar .er-time-select{ max-width: 5rem; } .page-admin-appointments-calendar .er-time-select-min{ max-width: 4rem; } .page-admin-appointments-calendar .er-time-select-ampm{ max-width: 5rem; } /* ====================================================== Button skins for legacy classes used on this page (No palette hardcodes; just token-based) ====================================================== */ .page-admin-appointments-calendar .btn-purple-magenta{ --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary-contrast); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: var(--primary-contrast); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-active-color: var(--primary-contrast); } .page-admin-appointments-calendar .btn-outline-purple-magenta{ --bs-btn-bg: transparent; --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary-contrast); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-active-color: var(--primary-contrast); } /* Work-week/month buttons: pill look */ .page-admin-appointments-calendar #btnWorkWeek, .page-admin-appointments-calendar #btnWorkMonth{ border-radius: 999px; font-weight: 600; } /* Slot picker buttons (admin modal) */ .page-admin-appointments-calendar .er-slot-btn{ border-radius: 999px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.9rem; font-size: 0.9rem; border-width: 1px; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, border-color 0.15s ease; } .page-admin-appointments-calendar .er-slot-time{ font-weight: 800; line-height: 1.2; } .page-admin-appointments-calendar .er-slot-meta{ font-size: 0.78rem; color: var(--muted); } .page-admin-appointments-calendar .er-slot-chevron{ display: flex; align-items: center; margin-left: 0.4rem; font-size: 1.1rem; opacity: 0.6; transition: opacity 0.15s ease, transform 0.08s ease; } .page-admin-appointments-calendar .er-slot-btn:hover{ background: var(--surface-2); border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); } .page-admin-appointments-calendar .er-slot-btn:hover .er-slot-chevron{ opacity: 1; transform: translateX(2px); } .page-admin-appointments-calendar .er-slot-btn.er-slot-selected{ background: var(--primary); color: var(--primary-contrast) !important; border-color: var(--primary); box-shadow: var(--shadow-lg); } .page-admin-appointments-calendar .er-slot-btn.er-slot-selected .er-slot-meta{ color: color-mix(in srgb, var(--primary-contrast) 75%, transparent); } .page-admin-appointments-calendar .er-slot-btn.er-slot-selected .er-slot-chevron{ opacity: 1; transform: translateX(3px); } /* ====================================================== Time Controls modal: force readable inputs on token surfaces ====================================================== */ .page-admin-appointments-calendar #timeControlsModal .form-label, .page-admin-appointments-calendar #timeControlsModal .form-check-label, .page-admin-appointments-calendar #timeControlsModal .form-text{ color: var(--text) !important; } .page-admin-appointments-calendar #timeControlsModal .form-control, .page-admin-appointments-calendar #timeControlsModal .form-check-input{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } .page-admin-appointments-calendar #timeControlsModal .form-check-input:checked{ background: var(--primary) !important; border-color: var(--primary) !important; } /* ========================================================= PAGE: Confirm Booking File: /confirm_booking.php (or confirm_bookings.php) Body class: .page-confirm-booking ========================================================= */ /* Add-ons scroll area (replaces inline style) */ .page-confirm-booking .er-addons-scroll{ max-height: 400px; overflow-y: auto; } /* Make add-on checkboxes visible everywhere (side panel + modal) */ .page-confirm-booking .form-check-input.addon-checkbox, .page-confirm-booking .form-check-input.modal-addon-checkbox{ width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; border: 2px solid var(--primary) !important; background-color: var(--surface) !important; box-shadow: none !important; appearance: auto; -webkit-appearance: auto; } /* Checked state */ .page-confirm-booking .form-check-input.addon-checkbox:checked, .page-confirm-booking .form-check-input.modal-addon-checkbox:checked{ background-color: var(--primary) !important; border-color: var(--primary) !important; } /* Focus ring */ .page-confirm-booking .form-check-input.addon-checkbox:focus, .page-confirm-booking .form-check-input.modal-addon-checkbox:focus{ box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary) 25%, transparent) !important; } /* Slot picker styling */ .page-confirm-booking .er-slot-card-header-sub{ font-size: 0.85rem; color: var(--muted); } .page-confirm-booking .er-slot-list-empty{ font-size: 0.9rem; color: var(--muted); } .page-confirm-booking .er-slot-list{ max-height: 380px; overflow-y: auto; } .page-confirm-booking .er-slot-btn{ border-radius: 999px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; padding-inline: 0.9rem; } .page-confirm-booking .er-slot-time{ font-weight: 700; } .page-confirm-booking .er-slot-meta{ font-size: 0.8rem; color: var(--muted); } /* Selected state: keep it simple + token-only */ .page-confirm-booking .er-slot-btn.er-slot-selected{ background: var(--primary); color: var(--primary-contrast) !important; border-color: transparent; box-shadow: var(--shadow-sm); } .page-confirm-booking .er-slot-btn.er-slot-selected .er-slot-meta{ color: color-mix(in srgb, var(--primary-contrast) 75%, transparent); } .page-confirm-booking .er-slot-btn{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: .55rem .95rem; text-align: left; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; } .page-confirm-booking .er-slot-btn:hover{ background: var(--surface-2); border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); } /* Nice keyboard focus too */ .page-confirm-booking .er-slot-btn:focus-visible{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25); } /* Selected slot */ .page-confirm-booking .er-slot-btn.er-slot-selected{ background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); box-shadow: var(--shadow-lg); } .page-confirm-booking .er-slot-btn.er-slot-selected .er-slot-meta{ color: color-mix(in srgb, var(--primary-contrast) 75%, transparent); } /* Optional: soften disabled look if you ever disable buttons */ .page-confirm-booking .er-slot-btn:disabled{ opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; } /* ========================================================= PAGE: Forgot Password File: /forgot_password.php Body class: .page-forgot-password ========================================================= */ .page-forgot-password .btn-sw-primary { background-color: var(--primary); color: var(--on-primary); border: none; } .page-forgot-password .btn-sw-primary:hover { filter: brightness(0.95); } /* ========================================================= PAGE: Manage Bookings (Admin) File: /admin/manage_bookings.php Body class: .page-admin-manage-bookings ========================================================= */ /* Card container */ .page-admin-manage-bookings .table-container{ background: var(--surface); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow); } /* Table layout */ .page-admin-manage-bookings .table{ background: transparent; /* container owns the surface */ border-collapse: separate; border-spacing: 0; margin-bottom: 0; } /* Header band */ .page-admin-manage-bookings .table thead th{ background: var(--surface-2); font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--border); padding: .85rem 1rem; } /* Body cell spacing (this fixes “cramped”) */ .page-admin-manage-bookings .table > :not(caption) > * > *{ padding: .95rem 1rem; vertical-align: middle; border-bottom-color: var(--border); } /* Zebra striping (ER-style) */ .page-admin-manage-bookings .table tbody tr:nth-child(even) > *{ background: var(--surface-2); } /* Hover lift / glow */ .page-admin-manage-bookings .table tbody tr{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .page-admin-manage-bookings .table tbody tr:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); filter: brightness(1.01); position: relative; z-index: 2; } /* Ensure hovered row cells match lifted row */ .page-admin-manage-bookings .table tbody tr:hover > *{ background: var(--surface); } /* Reduce ugly wrapping (ER feel) */ .page-admin-manage-bookings td:nth-child(2), /* Date */ .page-admin-manage-bookings td:nth-child(3){ /* Time */ white-space: nowrap; } /* ========================================================= PAGE: Admin Live Session Card hierarchy + empty / next states ========================================================= */ /* Base admin card refinement (optional, but nice) */ .page-admin-live-session .card { background: var(--surface); border: 1px solid var(--border); } /* SECONDARY card (Next Appointment, empty states, etc.) */ .page-admin-live-session .sw-card-secondary { background: var(--surface); border: 1px dashed var(--border); box-shadow: var(--shadow-sm); } /* Slight visual separation from main content */ .page-admin-live-session .sw-card-secondary + .sw-card-secondary { margin-top: 1rem; } /* Headings inside secondary cards */ .page-admin-live-session .sw-card-secondary h2, .page-admin-live-session .sw-card-secondary .fw-semibold { color: var(--text); } /* Muted helper text */ .page-admin-live-session .sw-card-secondary .text-muted, .page-admin-live-session .sw-card-secondary .small { color: var(--muted); } .page-admin-live-session .sw-empty-state { background: var(--surface); border: 1px dashed var(--border); padding: 1.5rem; box-shadow: var(--shadow-sm); } .page-admin-live-session .sw-empty-state .fw-semibold { color: var(--text); } .page-admin-live-session .sw-empty-state .small { color: var(--muted); } .page-admin-live-session .sw-empty-state { background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%); border: 1px dashed var(--border); padding: 1.5rem; } /* =========================== Admin Analytics theme fixes =========================== */ .page-admin-analytics { color: var(--text); } /* Your custom "text-*" helpers used by analytics.php */ .page-admin-analytics .text-teal { color: var(--primary) !important; } .page-admin-analytics .text-purple { color: var(--accent) !important; } /* Card/container styling */ .page-admin-analytics .table-container { background: var(--surface); border: 1px solid var(--border); } /* Make Bootstrap primary buttons match SpaWhiz tokens */ .page-admin-analytics .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .page-admin-analytics .btn-outline-primary:hover, .page-admin-analytics .btn-outline-primary.active, .page-admin-analytics .btn-check:checked + .btn-outline-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .page-admin-analytics .btn-primary { background: var(--primary); border-color: var(--primary); } .page-admin-analytics .btn-primary:hover { filter: brightness(0.96); } /* ========================= Intake Page ========================= */ .page-intake .intake-wrapper{ /* Bootstrap variable overrides (page-scoped, token-only) */ --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-focus-ring-color: var(--primary-soft); --bs-secondary-color: var(--muted); /* Card surface */ background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow); /* Layout */ max-width: 860px; margin-inline: auto; margin-top: 2rem; padding: 2rem; } /* Page title */ .page-intake h1{ color: var(--primary); } /* ALL form field labels */ .page-intake .form-label{ color: var(--primary); } /* ========================================================= Utilities (added during contract compliance sweep) ========================================================= */ .u-hidden{ display:none !important; } .u-fs-11{ font-size:.7rem !important; } .u-fs-12{ font-size:.75rem !important; } .u-mb-0{ margin-bottom:0 !important; } .u-scroll-y{ overflow-y:auto !important; } .u-object-cover{ object-fit:cover !important; } .u-maxw-600{ max-width:600px !important; } .u-h-220{ height:220px !important; } .u-h-260{ height:260px !important; } .u-h-280{ height:280px !important; } .u-h-320{ height:320px !important; } .u-minh-260{ min-height:260px !important; } .u-maxh-220{ max-height:220px !important; } .u-maxh-230{ max-height:230px !important; } .u-maxh-280{ max-height:280px !important; } .u-maxh-380{ max-height:380px !important; } .u-maxh-420{ max-height:420px !important; } /* Attention button (token-safe) */ .btn-attention{ background: var(--focus); border: 1px solid rgba(var(--focus-rgb), .40); color: var(--bg); font-weight: 800; box-shadow: 0 10px 22px rgba(var(--focus-rgb), .22); } .btn-attention:hover{ filter: brightness(1.02); box-shadow: 0 12px 26px rgba(var(--focus-rgb), .26); color: var(--bg); } /* ========================================================= Admin pages — scoped (CSS contract) ========================================================= */ /* Admin Dashboard: archived promo tables default hidden (JS toggles inline) */ body.page-admin-dashboard #public-archived-wrap, body.page-admin-dashboard #private-archived-wrap{ display:none; } /* Admin Clients: delete button hidden until editing a note */ body.page-admin-clients #cn-delete-btn{ display:none; } /* Admin Client Intake View (was inline