/* ========================================================================== Hajj Guide Theme - Complete & Enhanced ========================================================================== */ /* --- 1. FONTS & VARIABLES --- */ /* ========================================================================== 1. GLOBAL SETTINGS & DEFAULT “ROYAL ISLAMIC” PALETTE ========================================================================== */ /* ========================================================================== 1. GLOBAL SETTINGS & DEFAULT “ROYAL ISLAMIC” PALETTE ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600;700&display=swap'); :root[data-theme="aurora-glacier-pro"] { --primary-green: #5fcbb0; --primary-gold: #a2ede4; --text-light: #f4fffd; --text-dark: #163232; --text-muted: #7fb9b5; --bg-start: #e2f9f6; --bg-mid: #b5ece2; --bg-end: #ffffff; --bg-gradient: linear-gradient(135deg, #e2f9f6 0%, #b5ece2 60%, #ffffff 100%); --bg-accent: rgba(162,237,228,0.18); --bg-card: rgba(255,255,255,0.92); --border: rgba(95,203,176,0.28); --font-base: 'Inter', sans-serif; --font-heading: 'Playfair Display', serif; --radius: 16px; --shadow-xs: 0 2px 8px rgba(95,203,176,0.08); --shadow-sm: 0 6px 18px rgba(22,50,50,0.06); --shadow-md: 0 12px 32px rgba(22,50,50,0.10); --transition: 0.25s cubic-bezier(.4,0,.2,1); /* ✅ Full Aliased Variables */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(162,237,228,0.2); --celestial-aurora-2: rgba(162,237,228,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-green); /* Optional: Header Styling */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-green); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: rgba(255, 255, 255, 0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } :root[data-theme="aurora-glacier"] { --primary-green: #69bfae; /* glacier mint */ --primary-gold: #87d7cf; /* mint pearl */ --text-light: #e8fdfc; /* polar white */ --text-dark: #1c3c3b; /* deep teal */ --text-muted: #80a8a3; /* seafoam gray */ --bg-start: #d1f0ec; /* arctic sky */ --bg-mid: #a6e4db; /* glacier body */ --bg-end: #ffffff; /* snow frost */ --bg-accent: rgba(135,215,207,0.1); --bg-card: rgba(255,255,255,0.85); --border: rgba(135,215,207,0.3); --font-base: 'Inter', sans-serif; --font-heading: 'Playfair Display', serif; --radius: 12px; --shadow-xs: 0 2px 6px rgba(0,0,0,0.04); --shadow-sm: 0 4px 12px rgba(0,0,0,0.08); --shadow-md: 0 8px 24px rgba(0,0,0,0.1); --transition: 0.3s ease-in-out; /* Aliased variables (compatibility layer) */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(135,215,207,0.2); --celestial-aurora-2: rgba(135,215,207,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* Header Override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-green); --hgj-hover-bg: rgba(135,215,207,0.15); --hgj-item-active-bg: rgba(255,255,255,0.4); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } :root[data-theme="divine-harmony"] { /* Primary Identity */ --primary-green: #2e8b7d; /* deep jade */ --primary-gold: #d6b56f; /* royal sand gold */ /* Typography Colors */ --text-light: #f8fdfc; /* pure ice white */ --text-dark: #1d2e2b; /* rich teal charcoal */ --text-muted: #8ca7a2; /* soft fog blue */ /* Background Gradient Spectrum */ --bg-start: #e3f5f2; /* snow jade */ --bg-mid: #c5e7df; /* soft mint sky */ --bg-end: #ffffff; /* cloud white */ --bg-gradient: linear-gradient(145deg, #e3f5f2 0%, #c5e7df 60%, #ffffff 100%); /* Elevation & Softness */ --bg-card: rgba(255, 255, 255, 0.94); --bg-accent: rgba(214,181,111,0.1); --border: rgba(46,139,125, 0.2); --radius: 18px; /* Shadows */ --shadow-xs: 0 2px 6px rgba(0,0,0,0.04); --shadow-sm: 0 6px 16px rgba(0,0,0,0.06); --shadow-md: 0 12px 32px rgba(0,0,0,0.08); /* Fonts */ --font-base: 'Inter', sans-serif; --font-heading: 'Playfair Display', serif; /* Animation */ --transition: 0.3s ease-in-out; /* Celestial Aliases (for app compatibility) */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-sm); --celestial-aurora-1: rgba(214,181,111,0.2); --celestial-aurora-2: rgba(214,181,111,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* Header UI */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: rgba(255,255,255,0.5); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 2. HEADER OVERRIDE FOR “ROYAL ISLAMIC” (fallback & explicit) ========================================================================== */ :root[data-theme="royal-islamic"] { --hgj-bg: var(--bg-start); --hgj-fg: var(--text-light); --hgj-border: var(--primary-gold); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(212,175,55,0.2); --hgj-item-active-bg: rgba(244,239,234,0.4); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 3. CELESTIAL THEME — Cosmic Indigo & Gold ========================================================================== */ :root[data-theme="celestial"] { --primary-green: #5E4AE3; /* vivid indigo */ --primary-gold: #FFD64C; /* bright gold */ --text-light: #F0F4FF; /* pale mist */ --text-dark: #1A1A28; /* deep night */ --text-muted: #A0A5B9; /* starlight gray */ --bg-start: #0D1B2A; /* midnight indigo */ --bg-mid: #20354A; /* twilight blue */ --bg-end: #455775; /* cosmic violet */ --bg-accent: rgba(240,244,255,0.08); --bg-card: rgba(32,53,74,0.88); --border: rgba(255,214,76,0.3); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,214,76,0.2); --celestial-aurora-2: rgba(255,214,76,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-start); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-card); --hgj-item-active-bg: rgba(32,53,74,0.6); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 4. MODERN GLASSMORPHISM — Frost & Neon ========================================================================== */ :root[data-theme="modern-glassmorphism"] { --primary-green: #64FFDA; /* neon mint */ --primary-gold: #18FFFF; /* neon aqua */ --text-light: #E0F7FA; /* pale frost */ --text-dark: #00251A; /* deep teal */ --text-muted: #4DB6AC; /* soft mint */ --bg-start: rgba(255,255,255,0.08); --bg-mid: rgba(255,255,255,0.16); --bg-end: rgba(255,255,255,0.08); --bg-accent: rgba(255,255,255,0.2); --bg-card: rgba(255,255,255,0.25); --border: rgba(24,255,255,0.3); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(24,255,255,0.2); --celestial-aurora-2: rgba(24,255,255,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-card); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-green); --hgj-hover-bg: rgba(255,255,255,0.2); --hgj-item-active-bg: rgba(255,255,255,0.3); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 5. MINIMALIST QURANIC — Ivory & Sage ========================================================================== */ :root[data-theme="minimalist-quranic"] { --primary-green: #00695C; /* deep sage */ --primary-gold: #CDA34F; /* muted gold */ --text-light: #F8F6F0; /* ivory */ --text-dark: #334E4A; /* charcoal */ --text-muted: #A1BFAE; /* soft sage */ --bg-start: #FBF9F3; /* ivory mist */ --bg-mid: #F5F2E8; /* parchment */ --bg-end: #FBF9F3; /* ivory */ --bg-accent: rgba(0,105,92,0.1); --bg-card: rgba(248,246,240,0.9); --border: rgba(205,163,79,0.3); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(205,163,79,0.2); --celestial-aurora-2: rgba(205,163,79,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-card); --hgj-fg: var(--primary-green); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-mid); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 6. NEO TRAVEL DASHBOARD — Turquoise & Slate ========================================================================== */ :root[data-theme="neo-travel-dashboard"] { --primary-green: #00B8D4; /* bright turquoise */ --primary-gold: #00838F; /* deep slate */ --text-light: #FFFFFF; --text-dark: #222222; --text-muted: #607D8B; --bg-start: #E1F5FE; /* soft sky */ --bg-mid: #B3E5FC; /* light blue */ --bg-end: #E1F5FE; /* soft sky */ --bg-accent: rgba(0,184,212,0.1); --bg-card: #FFFFFF; --border: rgba(0,131,143,0.3); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(0,131,143,0.2); --celestial-aurora-2: rgba(0,131,143,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--primary-gold); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-green); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-card); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 7. DUBAI NIGHT — Matte Black & Metallic Gold ========================================================================== */ :root[data-theme="dubai-night"] { --primary-green: #FFD700; /* metallic gold */ --primary-gold: #FFD700; --text-light: #E0E0E0; /* light silver */ --text-dark: #FFFFFF; /* pure white */ --text-muted: #BFA33D; /* antique gold */ --bg-start: #000000; /* deep black */ --bg-mid: #1A1A1A; /* charcoal */ --bg-end: #000000; /* deep black */ --bg-accent: rgba(255,215,0,0.2); --bg-card: rgba(26,26,26,0.9); --border: rgba(255,215,0,0.4); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,215,0,0.2); --celestial-aurora-2: rgba(255,215,0,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(255,215,0,0.2); --hgj-item-active-bg: rgba(255,215,0,0.1); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 8. SULTAN’S VELVET — Deep Burgundy & Gold Luxury ========================================================================== */ :root[data-theme="sultans-velvet"] { /* core palette */ --primary-green: #4b032e; /* dark velvet burgundy */ --primary-gold: #e6c07e; /* soft antique gold */ --text-light: #fefaf3; /* warm ivory */ --text-dark: #31191b; /* almost-black maroon */ --text-muted: #8b5e3c; /* muted cocoa */ /* page gradient */ --bg-start: #31191b; /* deepest velvet */ --bg-mid: #4b032e; /* mid velvet */ --bg-end: #fefaf3; /* ivory accent */ /* panels, cards, borders */ --bg-accent: rgba(254,250,243,0.2); /* ivory translucence */ --bg-card: rgba(254,250,243,0.9); /* frosted ivory */ --border: rgba(230,192,126,0.4); /* light gold border */ /* alias old “celestial-…” vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(230,192,126,0.2); --celestial-aurora-2: rgba(230,192,126,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-card); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 8. AURORA BOREALIS — Ethereal Greens & Purples ========================================================================== */ :root[data-theme="aurora-borealis"] { --primary-green: #80FFA0; --primary-gold: #D0FF70; --text-light: #EFFFF0; --text-dark: #0B3D3B; --text-muted: #A0C0A0; --bg-start: #061B1D; --bg-mid: #1A3F3E; --bg-end: #3E6E6A; --bg-accent: rgba(128,255,160,0.1); --bg-card: rgba(10,30,30,0.8); --border: rgba(128,255,160,0.3); /* celestial aliases */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(128,255,160,0.2); --celestial-aurora-2: rgba(128,255,160,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-green); --hgj-hover-bg: var(--bg-card); --hgj-item-active-bg: rgba(10,30,30,0.6); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 9. MIDNIGHT GALAXY — Cosmic Purples & Stardust Gold ========================================================================== */ :root[data-theme="midnight-galaxy"] { --primary-green: #C781FF; --primary-gold: #FFCB3C; --text-light: #F3F0FF; --text-dark: #1A1A28; --text-muted: #9B9BBF; --bg-start: #0D0826; --bg-mid: #210F45; --bg-end: #3A1962; --bg-accent: rgba(58,25,98,0.15); --bg-card: rgba(26,10,58,0.85); --border: rgba(255,203,60,0.3); /* celestial aliases */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,203,60,0.2); --celestial-aurora-2: rgba(255,203,60,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-start); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(26,10,58,0.6); --hgj-item-active-bg: rgba(26,10,58,0.4); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 10. LOTUS BLOSSOM — Soft Pinks & Champagne Gold ========================================================================== */ :root[data-theme="lotus-blossom"] { --primary-green: #D87CA2; --primary-gold: #F9D6B7; --text-light: #FFFFFF; --text-dark: #4A2E3A; --text-muted: #9E7F8D; --bg-start: #FFF5F8; --bg-mid: #FFE5EB; --bg-end: #FFF5F8; --bg-accent: rgba(216,124,162,0.1); --bg-card: rgba(255,245,248,0.9); --border: rgba(249,214,183,0.3); /* celestial aliases */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(249,214,183,0.2); --celestial-aurora-2: rgba(249,214,183,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-card); --hgj-fg: var(--primary-green); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-mid); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== 11. DESERT MIRAGE — Warm Sands & Twilight Purple ========================================================================== */ :root[data-theme="desert-mirage"] { --primary-green: #F8B26A; --primary-gold: #F0A500; --text-light: #FDFCF9; --text-dark: #5F3A1D; --text-muted: #A67C52; --bg-start: #302829; --bg-mid: #7E5A4F; --bg-end: #F2E1C7; --bg-accent: rgba(248,178,106,0.1); --bg-card: rgba(242,225,199,0.9); --border: rgba(240,165,0,0.3); /* celestial aliases */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(240,165,0,0.2); --celestial-aurora-2: rgba(240,165,0,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: rgba(242,225,199,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } :root[data-theme="golden-dynasty"] { --primary-green: #A68F6D; /* antique bronze */ --primary-gold: #FFD700; /* imperial gold */ --text-light: #FFFFFF; /* pure white */ --text-dark: #3E3A33; /* dark stone */ --text-muted: #B8A18B; /* soft taupe */ --bg-start: #FDFCF8; /* ivory marble */ --bg-mid: #EDE7E1; /* light marble */ --bg-end: #FDFCF8; --bg-accent: rgba(255,215,0,0.12); --bg-card: rgba(237,231,225,0.9); --border: rgba(255,215,0,0.4); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,215,0,0.2); --celestial-aurora-2: rgba(255,215,0,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-card); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } :root[data-theme="oceanic-opulence"] { --primary-green: #004F6E; /* deep navy */ --primary-gold: #FF6F61; /* coral gold */ --text-light: #EAF6F8; /* pale aqua */ --text-dark: #10202B; /* near-black navy */ --text-muted: #7A9BAE; /* sea mist */ --bg-start: #001F2D; /* abyssal blue */ --bg-mid: #003B54; /* deep navy */ --bg-end: #EAF6F8; /* pale aqua accent */ --bg-accent: rgba(255,111,97,0.12); --bg-card: rgba(234,246,248,0.9); --border: rgba(255,111,97,0.4); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,111,97,0.2); --celestial-aurora-2: rgba(255,111,97,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-card); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } :root[data-theme="regal-sapphire"] { --primary-green: #0F3D91; /* royal sapphire */ --primary-gold: #E5E4E2; /* platinum silver */ --text-light: #FFFFFF; /* white */ --text-dark: #1A1A1A; /* charcoal */ --text-muted: #B0B0B0; /* silver-gray */ --bg-start: #041E42; /* deep sapphire */ --bg-mid: #0F3D91; /* mid sapphire */ --bg-end: #E5E4E2; /* platinum accent */ --bg-accent: rgba(229,228,226,0.12); --bg-card: rgba(229,228,226,0.9); --border: rgba(229,228,226,0.4); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(229,228,226,0.2); --celestial-aurora-2: rgba(229,228,226,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: var(--bg-card); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } :root[data-theme="forest-elite"] { --primary-green: #0B3D02; /* dark evergreen */ --primary-gold: #BFA16A; /* antique gold */ --text-light: #F2F0E6; /* ivory cream */ --text-dark: #2B2B2B; /* dark slate */ --text-muted: #87907A; /* moss gray */ --bg-start: #0B3D02; /* darkest evergreen */ --bg-mid: #136F09; /* deep forest */ --bg-end: #F2F0E6; /* ivory accent */ --bg-accent: rgba(191,161,106,0.12); --bg-card: rgba(242,240,230,0.9); --border: rgba(191,161,106,0.4); /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(191,161,106,0.2); --celestial-aurora-2: rgba(191,161,106,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: var(--bg-accent); --hgj-item-active-bg: rgba(242,240,230,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Ruby Opulence — Deep Ruby & Warm Gold ========================================================================== */ :root[data-theme="ruby-opulence"] { --primary-green: #9B111E; /* deep ruby */ --primary-gold: #FFD700; /* warm gold */ --text-light: #FFFFFF; /* pure white */ --text-dark: #1A1A1A; /* charcoal */ --text-muted: #B8A18B; /* soft taupe */ --bg-start: #2A0A0A; /* onyx black */ --bg-mid: #3C1F1F; /* dark garnet */ --bg-end: #9B111E; /* deep ruby */ --bg-accent: rgba(242,242,242,0.1); /* pearl tint */ --bg-card: #3C1F1F; /* dark garnet */ --border: #FFD700; /* warm gold */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,215,0,0.2); --celestial-aurora-2: rgba(255,215,0,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(242,242,242,0.2); --hgj-item-active-bg: rgba(60,31,31,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Platinum Noir — Charcoal & Amber Platinum ========================================================================== */ :root[data-theme="platinum-noir"] { --primary-green: #212121; /* charcoal */ --primary-gold: #E0E0E0; /* platinum */ --text-light: #FFFFFF; /* pure white */ --text-dark: #EEEEEE; /* near-white */ --text-muted: #BDBDBD; /* soft silver */ --bg-start: #121212; /* jet black */ --bg-mid: #121212; /* jet black */ --bg-end: #E0E0E0; /* platinum accent */ --bg-accent: rgba(255,193,7,0.12); /* amber tint */ --bg-card: #1F1F1F; /* midnight */ --border: #FFC107; /* amber */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,193,7,0.2); --celestial-aurora-2: rgba(255,193,7,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(255,193,7,0.2); --hgj-item-active-bg: rgba(31,31,31,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Onyx Pearl — Deep Teal & Ice Blue ========================================================================== */ :root[data-theme="onyx-pearl"] { --primary-green: #0F4C75; /* deep teal */ --primary-gold: #BBE1FA; /* ice blue */ --text-light: #FFFFFF; /* pure white */ --text-dark: #D0E7F9; /* pale sky */ --text-muted: #6B8292; /* steel gray */ --bg-start: #1B262C; /* navy night */ --bg-mid: #1B262C; /* navy night */ --bg-end: #0A1018; /* black pearl */ --bg-accent: rgba(187,225,250,0.1); /* ice tint */ --bg-card: #0A1018; /* black pearl */ --border: #BBE1FA; /* ice blue */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(187,225,250,0.2); --celestial-aurora-2: rgba(187,225,250,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(10,16,24,0.6); --hgj-item-active-bg: rgba(10,16,24,0.4); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Neon Galaxy — Electric Pink & Neon Mint ========================================================================== */ :root[data-theme="neon-galaxy"] { --primary-green: #00F5D4; /* neon mint */ --primary-gold: #FF3C78; /* electric pink */ --text-light: #00F5D4; /* neon mint */ --text-dark: #FFFFFF; /* pure white */ --text-muted: #CCCCCC; /* light silver */ --bg-start: #0D0D0D; /* cosmic black */ --bg-mid: #0D0D0D; /* cosmic black */ --bg-end: #1A1A1A; /* stardust */ --bg-accent: rgba(0,245,212,0.1); --bg-card: #1A1A1A; /* stardust */ --border: #00F5D4; /* neon mint */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(0,245,212,0.2); --celestial-aurora-2: rgba(0,245,212,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(0,245,212,0.2); --hgj-item-active-bg: rgba(26,26,26,0.6); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Sakura Blossom — Petal Pink & Buttery Gold ========================================================================== */ :root[data-theme="sakura-blossom"] { --primary-green: #F8BBD0; /* petal pink */ --primary-gold: #FFF59D; /* buttery gold */ --text-light: #333333; /* dark charcoal */ --text-dark: #4A2E3A; /* rich mauve */ --text-muted: #9E7F8D; /* dusty rose */ --bg-start: #FFF3E0; /* ivory bloom */ --bg-mid: #FFF3E0; /* ivory bloom */ --bg-end: #FFF3E0; /* ivory bloom */ --bg-accent: rgba(248,187,208,0.1); --bg-card: #FFFFFF; /* pearl */ --border: #FF8A65; /* coral peach */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(248,187,208,0.2); --celestial-aurora-2: rgba(248,187,208,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-card); --hgj-fg: var(--text-dark); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(248,187,208,0.2); --hgj-item-active-bg: rgba(255,243,224,0.6); --hgj-shadow: var(--shadow-sm); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Golden Horizon — Radiant Gold & Molten Bronze ========================================================================== */ :root[data-theme="golden-horizon"] { --primary-green: #FFD700; /* radiant gold */ --primary-gold: #FF8F00; /* sunset amber */ --text-light: #F5F5F5; /* soft ivory */ --text-dark: #2E1A12; /* molten bronze */ --text-muted: #BCAAA4; /* dusty sand */ --bg-start: #3E2723; /* molten bronze */ --bg-mid: #5D4037; /* burnt sienna */ --bg-end: #3E2723; /* molten bronze */ --bg-accent: rgba(255,241,118,0.1); --bg-card: #5D4037; /* burnt sienna */ --border: #FFF176; /* soft gold */ /* alias celestial vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,241,118,0.2); --celestial-aurora-2: rgba(255,241,118,0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-gold); /* header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--border); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(255,241,118,0.2); --hgj-item-active-bg: rgba(93,64,55,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Eclipse Royale — Ultimate Ultra-Premium Black & Gold Fusion ========================================================================== */ :root[data-theme="eclipse-royale"] { /* Core palette */ --primary-green: #C9A66B; /* burnished gold */ --primary-gold: #FFD700; /* radiant gold */ --text-light: #F5F5F5; /* soft ivory */ --text-dark: #1A1A1A; /* deep onyx */ --text-muted: #888888; /* slate gray */ /* Background gradient */ --bg-start: #000000; /* pure black */ --bg-mid: #1C1C1C; /* charcoal glow */ --bg-end: #2E2E2E; /* dark graphite */ /* Panels & accents */ --bg-accent: rgba(255,215,0,0.12); /* gold shimmer */ --bg-card: rgba(28,28,28,0.85); /* frosted onyx */ --border: rgba(255,215,0,0.4); /* luminous gold */ /* Alias old “celestial-…” vars */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(255,215,0,0.25); --celestial-aurora-2: rgba(255,215,0,0.15); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-light); --celestial-link-fg: var(--primary-gold); /* Header override */ --hgj-bg: var(--bg-mid); --hgj-fg: var(--text-light); --hgj-border: var(--primary-gold); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(255,215,0,0.2); --hgj-item-active-bg: rgba(28,28,28,0.6); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Kaaba Silk — A Reverent Blend of Deep Black & Calligraphic Gold ========================================================================== */ :root[data-theme="kaaba-silk"] { /* --- Core Palette --- */ --primary-green: #CCA43D; /* Deep calligraphic gold (for titles) */ --primary-gold: #E4B843; /* Radiant gold accent (for links/icons) */ --text-light: #F5F0E1; /* Soft marble white (for body text) */ --text-dark: #1c1c1c; /* Deep charcoal (for light surfaces) */ --text-muted: #a0a0a0; /* Muted gray (for secondary info) */ /* --- Background & Surfaces --- */ /* A subtle gradient from deep black to velvet charcoal */ --bg-start: #0d0d0d; --bg-mid: #121212; --bg-end: #000000; /* --- Panels & Accents --- */ --bg-accent: rgba(204, 164, 61, 0.1); /* Faint gold aura */ --bg-card: rgba(28, 28, 28, 0.9); /* Frosted charcoal panel */ --border: rgba(204, 164, 61, 0.4); /* Glowing gold border */ /* --- Alias old component variables to the new theme --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-xs); --celestial-aurora-1: rgba(228, 184, 67, 0.2); --celestial-aurora-2: rgba(228, 184, 67, 0.1); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-light); /* Use light text on dark cards */ --celestial-link-fg: var(--primary-gold); /* --- Header-specific overrides for this theme --- */ --hgj-bg: #1a1a1a; /* Consistent dark header */ --hgj-fg: var(--text-light); --hgj-border: var(--primary-gold); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(228, 184, 67, 0.15); --hgj-item-active-bg: rgba(28, 28, 28, 0.7); --hgj-shadow: var(--shadow-md); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Masjid al-Haram Majesty — Sacred Luxury Beyond Compare ========================================================================== */ :root[data-theme="masjid-majesty"] { /* --- Core Sacred Palette --- */ --primary-green: #B8860B; /* Ancient golden bronze (mosque arches) */ --primary-gold: #DAA520; /* Luminous Kaaba gold (accents) */ --text-light: #FEFEFE; /* Pure marble white */ --text-dark: #2C1810; /* Deep mahogany (luxury wood) */ --text-muted: #8B7355; /* Warm sand tone */ /* --- Architectural Background Gradient --- */ --bg-start: #1A1611; /* Deep mosque shadow */ --bg-mid: #2D2419; /* Warm candlelit stone */ --bg-end: #3A2F1D; /* Golden hour marble */ /* --- Sacred Surfaces & Luminous Accents --- */ --bg-accent: rgba(218, 165, 32, 0.18); /* Ethereal gold glow */ --bg-card: rgba(45, 36, 25, 0.92); /* Polished obsidian panel */ --border: rgba(184, 134, 11, 0.6); /* Radiant bronze border */ /* --- Component Variable Mapping --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: 0 8px 32px rgba(184, 134, 11, 0.25); --celestial-aurora-1: rgba(218, 165, 32, 0.3); --celestial-aurora-2: rgba(218, 165, 32, 0.15); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-light); --celestial-link-fg: var(--primary-gold); /* --- Header Sacred Architecture --- */ --hgj-bg: linear-gradient(135deg, #1A1611 0%, #2D2419 100%); --hgj-fg: var(--text-light); --hgj-border: var(--primary-gold); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(218, 165, 32, 0.25); --hgj-item-active-bg: rgba(45, 36, 25, 0.8); --hgj-shadow: 0 4px 20px rgba(184, 134, 11, 0.4); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Medina Serenity — Tranquil Elegance with Pearl & Emerald Accents ========================================================================== */ :root[data-theme="medina-serenity"] { /* --- Peaceful Luxury Palette --- */ --primary-green: #2E8B57; /* Deep emerald (Prophet's dome) */ --primary-gold: #F0E68C; /* Soft pearl gold */ --text-light: #F8F8FF; /* Ghost white */ --text-dark: #1C3A1C; /* Forest green */ --text-muted: #708090; /* Slate gray */ /* --- Serene Background Flow --- */ --bg-start: #0F1419; /* Midnight blue */ --bg-mid: #1A2B1A; /* Deep forest */ --bg-end: #2F4F2F; /* Dark sea green */ /* --- Luminous Surfaces --- */ --bg-accent: rgba(240, 230, 140, 0.12); --bg-card: rgba(26, 43, 26, 0.88); --border: rgba(46, 139, 87, 0.5); /* --- Component Mapping --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: 0 6px 28px rgba(46, 139, 87, 0.2); --celestial-aurora-1: rgba(240, 230, 140, 0.25); --celestial-aurora-2: rgba(240, 230, 140, 0.12); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-light); --celestial-link-fg: var(--primary-gold); /* --- Header Tranquility --- */ --hgj-bg: linear-gradient(120deg, #0F1419 0%, #1A2B1A 100%); --hgj-fg: var(--text-light); --hgj-border: var(--primary-green); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(240, 230, 140, 0.18); --hgj-item-active-bg: rgba(26, 43, 26, 0.75); --hgj-shadow: 0 3px 16px rgba(46, 139, 87, 0.3); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Sacred Aurora Veil — Transcendent Dawn Luxury in Infinite Depths ========================================================================== */ :root[data-theme="sacred-aurora-veil"] { /* --- Ethereal Core Palette --- */ --primary-green: #0B3D3B; /* Deep emerald dawn (spiritual depth) */ --primary-gold: #E8B85B; /* Aurora gold radiance (divine highlights) */ --text-light: #FDFDFD; /* Luminous pearl (for sacred readability) */ --text-dark: #0A1A1A; /* Infinite void black (contrast elements) */ --text-muted: #7A8C8C; /* Misty silver (subtle annotations) */ /* --- Mystical Background Gradient --- */ --bg-start: #000011; /* Cosmic void with subtle blue tint */ --bg-mid: #001122; /* Midnight aurora transition */ --bg-end: #002233; /* Deep veil horizon */ /* --- Luminous Surfaces & Divine Accents --- */ --bg-accent: rgba(232, 184, 91, 0.15); /* Gentle aurora shimmer */ --bg-card: rgba(0, 17, 34, 0.88); /* Frosted obsidian glass */ --border: rgba(11, 61, 59, 0.5); /* Emerald-glow edging */ /* --- Component Variable Aliases --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: 0 10px 40px rgba(232, 184, 91, 0.2); --celestial-aurora-1: rgba(232, 184, 91, 0.28); --celestial-aurora-2: rgba(232, 184, 91, 0.12); --celestial-icon-fg: var(--primary-gold); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-light); --celestial-link-fg: var(--primary-gold); /* --- Header Overrides for Majestic Dawn --- */ --hgj-bg: linear-gradient(145deg, #000011 0%, #001122 100%); --hgj-fg: var(--text-light); --hgj-border: var(--primary-gold); --hgj-active: var(--primary-gold); --hgj-hover-bg: rgba(232, 184, 91, 0.22); --hgj-item-active-bg: rgba(0, 17, 34, 0.82); --hgj-shadow: 0 5px 24px rgba(11, 61, 59, 0.35); --hgj-fg-muted: var(--text-muted); } /* ========================================================================== Seafoam Professional Fixed — Perfect Balance Without Going White Maintains Readability and Clear Cards with Proper Light Background ========================================================================== */ :root[data-theme="seafoam-professional-fixed"] { /* --- Core Professional Palette (Keep What Works) --- */ --primary-green: #0D9488; /* teal green */ --primary-gold: #0F766E; /* darker teal */ --text-light: #FFFFFF; /* white for dark elements */ --text-dark: #1F2937; /* dark charcoal for readability */ --text-muted: #4B5563; /* medium gray for labels */ /* --- Fixed Light Background System (Not White!) --- */ --bg-start: #E6FFFA; /* light teal - NOT white */ --bg-mid: #B2F5EA; /* soft mint green */ --bg-end: #81E6D9; /* aqua accent */ /* --- Card & Surface System --- */ --bg-card: #FFFFFF; /* white cards for contrast */ --bg-accent: rgba(13, 148, 136, 0.05); --border: #14B8A6; /* clear teal border */ /* --- Keep Simple Settings --- */ --radius: 8px; --transition: 0.2s ease; /* --- Shadow System --- */ --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15); /* --- Component Variable Mapping --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-md); --celestial-aurora-1: rgba(13, 148, 136, 0.08); --celestial-aurora-2: rgba(13, 148, 136, 0.04); --celestial-icon-fg: var(--primary-green); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-green); /* --- Header System --- */ --hgj-bg: var(--primary-green); --hgj-fg: var(--text-light); --hgj-border: var(--primary-green); --hgj-active: var(--text-light); --hgj-hover-bg: rgba(255, 255, 255, 0.1); --hgj-item-active-bg: rgba(255, 255, 255, 0.15); --hgj-shadow: var(--shadow-lg); --hgj-fg-muted: rgba(255, 255, 255, 0.8); } /* Card Styling with Clear Boundaries */ [data-theme="seafoam-professional-fixed"] .card, [data-theme="seafoam-professional-fixed"] .panel { background: var(--bg-card); border: 2px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius); transition: var(--transition); } [data-theme="seafoam-professional-fixed"] .card:hover { border-color: var(--primary-gold); box-shadow: var(--shadow-lg); transform: translateY(-1px); } /* ========================================================================== Seafoam Professional Ultimate — Premium Enhanced Theme with All Features Complete Implementation of Visual Enhancements, Modern Features & Accessibility ========================================================================== */ :root[data-theme="seafoam-professional-ultimate"] { /* --- Core Professional Palette --- */ --primary-green: #0D9488; /* teal green */ --primary-gold: #0F766E; /* darker teal */ --text-light: #FFFFFF; /* white for dark elements */ --text-dark: #1F2937; /* dark charcoal for readability */ --text-muted: #4B5563; /* medium gray for labels */ /* --- Enhanced Background System --- */ --bg-start: #E6FFFA; /* light teal */ --bg-mid: #B2F5EA; /* soft mint green */ --bg-end: #81E6D9; /* aqua accent */ /* --- Advanced Card & Surface System --- */ --bg-card: #FFFFFF; /* white cards */ --bg-accent: rgba(13, 148, 136, 0.05); --border: #14B8A6; /* clear teal border */ --border-hover: #0D9488; /* darker on hover */ /* --- Enhanced Typography System --- */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Inter', sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; /* --- Advanced Visual Effects --- */ --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --radius-full: 9999px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.15s ease-out; --transition-slow: 0.4s ease-in-out; /* --- Enhanced Animation System --- */ --card-hover-scale: 1.02; --button-hover-lift: translateY(-3px); --icon-spin-duration: 0.6s; /* --- Advanced Shadow System --- */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18); --shadow-card: 0 3px 8px rgba(13, 148, 136, 0.15); --shadow-card-hover: 0 8px 25px rgba(13, 148, 136, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1); /* --- Gradient System --- */ --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(240, 253, 250, 0.8) 100%); --header-gradient: linear-gradient(135deg, #0D9488 0%, #14B8A6 50%, #0F766E 100%); --btn-primary-gradient: linear-gradient(45deg, #0D9488, #14B8A6); --btn-secondary-gradient: linear-gradient(45deg, #E6FFFA, #B2F5EA); /* --- Status & State Colors --- */ --status-success: #059669; /* darker teal-green */ --status-warning: #D97706; /* warm orange complement */ --status-error: #DC2626; /* red for errors */ --status-info: #0891B2; /* cyan-blue */ /* --- Badge System --- */ --badge-radius: 12px; --badge-padding: 0.25rem 0.75rem; --badge-font-size: 0.75rem; --badge-font-weight: 500; /* --- Skeleton Loading System --- */ --skeleton-base: #E6FFFA; --skeleton-highlight: #B2F5EA; /* --- Enhanced Form Elements --- */ --input-bg: #FFFFFF; --input-border: #94A3B8; --input-border-focus: var(--primary-green); --input-shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.1); --checkbox-checked: var(--primary-green); --checkbox-border: #CBD5E1; --radio-dot: var(--primary-green); /* --- Responsive Spacing System --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* --- Interactive States --- */ --btn-disabled-bg: #F1F5F9; --btn-disabled-text: #94A3B8; --btn-loading-opacity: 0.7; --link-hover: #0F766E; --link-active: #134E4A; --link-visited: #065F46; --card-selected: rgba(13, 148, 136, 0.15); --card-selected-border: var(--primary-green); /* --- Glassmorphism Effects --- */ --glass-bg: rgba(255, 255, 255, 0.9); --glass-backdrop: blur(10px) saturate(120%); --glass-border: rgba(20, 184, 166, 0.2); /* --- Custom Scrollbar --- */ --scrollbar-track: #E6FFFA; --scrollbar-thumb: var(--primary-green); --scrollbar-thumb-hover: var(--primary-gold); --scrollbar-width: 8px; /* --- Accessibility Features --- */ --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.3); --focus-outline: 2px solid var(--primary-green); --focus-outline-offset: 2px; --focus-transition: box-shadow 0.15s ease-out; /* --- Component Variable Mapping --- */ --celestial-card-bg: var(--bg-card); --celestial-border: var(--border); --celestial-shadow: var(--shadow-card); --celestial-aurora-1: rgba(13, 148, 136, 0.08); --celestial-aurora-2: rgba(13, 148, 136, 0.04); --celestial-icon-fg: var(--primary-green); --celestial-title-fg: var(--primary-green); --celestial-label-fg: var(--text-muted); --celestial-value-fg: var(--text-dark); --celestial-link-fg: var(--primary-green); /* --- Enhanced Header System --- */ --hgj-bg: var(--header-gradient); --hgj-fg: var(--text-light); --hgj-border: var(--primary-green); --hgj-active: var(--text-light); --hgj-hover-bg: rgba(255, 255, 255, 0.12); --hgj-item-active-bg: rgba(255, 255, 255, 0.18); --hgj-shadow: var(--shadow-lg); --hgj-fg-muted: rgba(255, 255, 255, 0.85); } /* ========================================================================== ENHANCED COMPONENT STYLES ========================================================================== */ /* --- Advanced Card Styling --- */ [data-theme="seafoam-professional-ultimate"] .card, [data-theme="seafoam-professional-ultimate"] .panel { background: var(--card-gradient); border: 2px solid var(--border); box-shadow: var(--shadow-card); border-radius: var(--radius); transition: var(--transition); position: relative; backdrop-filter: var(--glass-backdrop); } [data-theme="seafoam-professional-ultimate"] .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%); border-radius: var(--radius); pointer-events: none; } [data-theme="seafoam-professional-ultimate"] .card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); transform: var(--card-hover-scale) translateY(-2px); } [data-theme="seafoam-professional-ultimate"] .card.selected { background: var(--card-selected); border-color: var(--card-selected-border); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(13, 148, 136, 0.2); } /* --- Enhanced Typography --- */ [data-theme="seafoam-professional-ultimate"] .text-xs { font-size: var(--text-xs); } [data-theme="seafoam-professional-ultimate"] .text-sm { font-size: var(--text-sm); } [data-theme="seafoam-professional-ultimate"] .text-base { font-size: var(--text-base); } [data-theme="seafoam-professional-ultimate"] .text-lg { font-size: var(--text-lg); } [data-theme="seafoam-professional-ultimate"] .text-xl { font-size: var(--text-xl); } [data-theme="seafoam-professional-ultimate"] .text-2xl { font-size: var(--text-2xl); } [data-theme="seafoam-professional-ultimate"] .font-normal { font-weight: var(--font-weight-normal); } [data-theme="seafoam-professional-ultimate"] .font-medium { font-weight: var(--font-weight-medium); } [data-theme="seafoam-professional-ultimate"] .font-semibold { font-weight: var(--font-weight-semibold); } [data-theme="seafoam-professional-ultimate"] .font-bold { font-weight: var(--font-weight-bold); } [data-theme="seafoam-professional-ultimate"] .leading-tight { line-height: var(--leading-tight); } [data-theme="seafoam-professional-ultimate"] .leading-normal { line-height: var(--leading-normal); } [data-theme="seafoam-professional-ultimate"] .leading-relaxed { line-height: var(--leading-relaxed); } /* --- Premium Button System --- */ [data-theme="seafoam-professional-ultimate"] .btn { padding: var(--space-3) var(--space-6); border-radius: var(--radius); font-weight: var(--font-weight-medium); font-size: var(--text-sm); transition: var(--transition); border: none; cursor: pointer; position: relative; overflow: hidden; } [data-theme="seafoam-professional-ultimate"] .btn-primary { background: var(--btn-primary-gradient); color: var(--text-light); box-shadow: var(--shadow-sm); } [data-theme="seafoam-professional-ultimate"] .btn-primary:hover { transform: var(--button-hover-lift); box-shadow: var(--shadow-lg); } [data-theme="seafoam-professional-ultimate"] .btn-secondary { background: var(--btn-secondary-gradient); color: var(--primary-green); border: 1px solid var(--border); } [data-theme="seafoam-professional-ultimate"] .btn-secondary:hover { background: var(--bg-card); transform: translateY(-1px); box-shadow: var(--shadow-md); } [data-theme="seafoam-professional-ultimate"] .btn:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: not-allowed; transform: none; box-shadow: none; } [data-theme="seafoam-professional-ultimate"] .btn-loading { opacity: var(--btn-loading-opacity); cursor: wait; } /* --- Status Badges --- */ [data-theme="seafoam-professional-ultimate"] .badge { display: inline-flex; align-items: center; padding: var(--badge-padding); border-radius: var(--badge-radius); font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); text-transform: uppercase; letter-spacing: var(--tracking-wide); } [data-theme="seafoam-professional-ultimate"] .badge-success { background: rgba(5, 150, 105, 0.1); color: var(--status-success); border: 1px solid rgba(5, 150, 105, 0.2); } [data-theme="seafoam-professional-ultimate"] .badge-warning { background: rgba(217, 119, 6, 0.1); color: var(--status-warning); border: 1px solid rgba(217, 119, 6, 0.2); } [data-theme="seafoam-professional-ultimate"] .badge-error { background: rgba(220, 38, 38, 0.1); color: var(--status-error); border: 1px solid rgba(220, 38, 38, 0.2); } [data-theme="seafoam-professional-ultimate"] .badge-info { background: rgba(8, 145, 178, 0.1); color: var(--status-info); border: 1px solid rgba(8, 145, 178, 0.2); } /* --- Enhanced Form Elements --- */ [data-theme="seafoam-professional-ultimate"] .form-input { background: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--text-dark); transition: var(--transition); width: 100%; } [data-theme="seafoam-professional-ultimate"] .form-input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--input-shadow-focus); } [data-theme="seafoam-professional-ultimate"] .form-checkbox { appearance: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--checkbox-border); border-radius: var(--radius-sm); background: var(--input-bg); cursor: pointer; position: relative; transition: var(--transition); } [data-theme="seafoam-professional-ultimate"] .form-checkbox:checked { background: var(--checkbox-checked); border-color: var(--checkbox-checked); } [data-theme="seafoam-professional-ultimate"] .form-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 0.75rem; font-weight: bold; } /* --- Loading States --- */ [data-theme="seafoam-professional-ultimate"] .skeleton { background: var(--skeleton-base); border-radius: var(--radius); position: relative; overflow: hidden; } [data-theme="seafoam-professional-ultimate"] .skeleton::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent); animation: skeleton-pulse 1.5s ease-in-out infinite; } /* --- Custom Scrollbar --- */ [data-theme="seafoam-professional-ultimate"] ::-webkit-scrollbar { width: var(--scrollbar-width); } [data-theme="seafoam-professional-ultimate"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--radius-full); } [data-theme="seafoam-professional-ultimate"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); transition: var(--transition); } [data-theme="seafoam-professional-ultimate"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* --- Focus Management --- */ [data-theme="seafoam-professional-ultimate"] *:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); transition: var(--focus-transition); } [data-theme="seafoam-professional-ultimate"] .btn:focus-visible, [data-theme="seafoam-professional-ultimate"] .form-input:focus-visible { box-shadow: var(--focus-ring); } /* ========================================================================== ANIMATIONS & KEYFRAMES ========================================================================== */ @keyframes skeleton-pulse { 0% { left: -100%; } 100% { left: 100%; } } @keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } [data-theme="seafoam-professional-ultimate"] .icon-spin { animation: icon-spin var(--icon-spin-duration) linear infinite; } /* --- Utility Classes --- */ [data-theme="seafoam-professional-ultimate"] .glass { background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); } [data-theme="seafoam-professional-ultimate"] .rounded-sm { border-radius: var(--radius-sm); } [data-theme="seafoam-professional-ultimate"] .rounded { border-radius: var(--radius); } [data-theme="seafoam-professional-ultimate"] .rounded-lg { border-radius: var(--radius-lg); } [data-theme="seafoam-professional-ultimate"] .rounded-full { border-radius: var(--radius-full); } [data-theme="seafoam-professional-ultimate"] .shadow-xs { box-shadow: var(--shadow-xs); } [data-theme="seafoam-professional-ultimate"] .shadow-sm { box-shadow: var(--shadow-sm); } [data-theme="seafoam-professional-ultimate"] .shadow-md { box-shadow: var(--shadow-md); } [data-theme="seafoam-professional-ultimate"] .shadow-lg { box-shadow: var(--shadow-lg); } [data-theme="seafoam-professional-ultimate"] .shadow-xl { box-shadow: var(--shadow-xl); } /* --- Spacing Utilities --- */ [data-theme="seafoam-professional-ultimate"] .p-1 { padding: var(--space-1); } [data-theme="seafoam-professional-ultimate"] .p-2 { padding: var(--space-2); } [data-theme="seafoam-professional-ultimate"] .p-3 { padding: var(--space-3); } [data-theme="seafoam-professional-ultimate"] .p-4 { padding: var(--space-4); } [data-theme="seafoam-professional-ultimate"] .p-6 { padding: var(--space-6); } [data-theme="seafoam-professional-ultimate"] .p-8 { padding: var(--space-8); } [data-theme="seafoam-professional-ultimate"] .m-1 { margin: var(--space-1); } [data-theme="seafoam-professional-ultimate"] .m-2 { margin: var(--space-2); } [data-theme="seafoam-professional-ultimate"] .m-3 { margin: var(--space-3); } [data-theme="seafoam-professional-ultimate"] .m-4 { margin: var(--space-4); } [data-theme="seafoam-professional-ultimate"] .m-6 { margin: var(--space-6); } [data-theme="seafoam-professional-ultimate"] .m-8 { margin: var(--space-8); } /* --- Reduced Motion Support --- */ @media (prefers-reduced-motion: reduce) { [data-theme="seafoam-professional-ultimate"] * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /*@media (prefers-color-scheme: light) {*/ /* :root {*/ /* --bg-start: #f6f8fa;*/ /* --bg-mid: #edf2f7;*/ /* --bg-end: #e2e8f0;*/ /* --text-dark: #1a1a1a;*/ /* --text-light: #1a1a1a;*/ /* --bg-card: rgba(0, 0, 0, 0.05);*/ /* Light mode Celestial stays the same, as it's designed for a light BG */ /* }*/ /*}*/ /* --- 2. RESET & BASE STYLES --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom right, var(--bg-start), var(--bg-mid), var(--bg-end)) fixed; color: var(--text-light); line-height: 1.8; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 10 10'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08'%3E%3Cpath d='M0 5h10M5 0v10'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; z-index: -1; } /* ========================================================================== Modern Auto-Hiding Overlay Scrollbar ========================================================================== */ /* --- For Webkit browsers (Chrome, Safari, new Edge) --- */ ::-webkit-scrollbar { width: 8px; /* Width of the vertical scrollbar */ height: 8px; /* Height of the horizontal scrollbar */ } ::-webkit-scrollbar-track { /* Make the track completely transparent */ background: transparent; } ::-webkit-scrollbar-thumb { /* A subtle, semi-transparent color for the scrollbar thumb */ background-color: rgba(0, 0, 0, 0.4); /* Rounded corners for the thumb */ border-radius: 4px; } /* --- For Firefox --- */ body { /* Sets the color of the thumb and the (transparent) track */ scrollbar-color: rgba(0, 0, 0, 0.4) transparent; /* Makes the scrollbar thinner */ scrollbar-width: thin; } /* --- 3. TYPOGRAPHY & LAYOUT --- */ h1, h2, h3 { font-family: 'Amiri', serif; font-weight: 700; letter-spacing: 0.5px; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); padding-bottom: .5rem; position: relative; } h2::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 6rem; height: 3px; background-image: linear-gradient(to right, transparent, var(--primary-gold), transparent); transform: translateX(-50%); } h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); } p, li, td { color: var(--text-dark); line-height: 1.6; font-size: 1.05rem; max-width: 40em; margin-bottom: 1rem; } .container { max-width: 960px; margin: 0 auto; padding: 1rem; } /* --- Corrected main container to fix iPad color issue --- */ main.container { background: var(--bg-accent); backdrop-filter: blur(12px); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-md); margin-top: 2rem; animation: contentFadeIn 0.8s ease-out both; /* CRITICAL FIX: Set a new default text color for this entire block */ color: var(--text-dark); } .section-divider { height: 1px; background: linear-gradient(to right, transparent, var(--primary-gold), transparent); margin: 3rem 0; } /* --- 4. HEADER & NAVIGATION --- */ /*.header {*/ /* position: sticky; top: 0; width: 100%;*/ /* padding: 1rem 1.5rem;*/ /* background: rgba(0, 0, 0, 0.2);*/ /* backdrop-filter: blur(12px);*/ /* box-shadow: var(--shadow-sm);*/ /* z-index: 1000;*/ /*}*/ /*.header::after {*/ /* content: '';*/ /* position: absolute; bottom: -3px; left: 0;*/ /* width: 100%; height: 6px;*/ /* background: repeating-linear-gradient(45deg, var(--primary-gold) 0, var(--primary-gold) 10px, transparent 10px, transparent 20px);*/ /*}*/ /*.header h1 {*/ /* font-size: clamp(1.75rem, 4vw, 2.75rem);*/ /* color: var(--primary-gold);*/ /* text-align: center;*/ /* letter-spacing: 1px;*/ /*}*/ /*.nav {*/ /* display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;*/ /* margin: 1rem 0; padding: 0; list-style: none;*/ /*}*/ /*.nav li a {*/ /* position: relative; overflow: hidden;*/ /* display: inline-flex; align-items: center; gap: .5rem;*/ /* padding: .5rem 1rem;*/ /* background: var(--bg-accent);*/ /* color: var(--text-light);*/ /* border: 1px solid rgba(255, 255, 255, 0.3);*/ /* border-radius: 999px;*/ /* font-weight: 600; text-decoration: none;*/ /* box-shadow: var(--shadow-xs);*/ /* transition: color .5s ease, text-decoration-color .5s ease;*/ /*}*/ /*.nav li a::before {*/ /* content: ''; position: absolute; top: 50%; left: 50%;*/ /* width: 0; height: 0; background: rgba(212, 175, 55, 0.2);*/ /* border-radius: 50%; transform: translate(-50%, -50%);*/ /* transition: width .5s ease, height .5s ease;*/ /*}*/ /*.nav li a:hover,*/ /*.nav li a:focus-visible {*/ /* color: var(--primary-gold);*/ /* text-decoration: underline var(--primary-gold);*/ /*}*/ /*.nav li a:hover::before { width: 200%; height: 200%; }*/ /* --- 5. GRID SYSTEMS --- */ .grid, .zone-grid, .tools-grid, .video-grid, .amenities-list, .celestial-grid, .celestial-nav-grid, .celestial-video-grid { display: grid; gap: clamp(1rem, 2vw, 2rem); margin: 2rem 0; } .grid, .zone-grid { grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 20vw, 240px), 1fr)); } .tools-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .video-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .amenities-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .celestial-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .celestial-video-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Responsive Smart Grid for Main Nav */ .celestial-nav-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { .celestial-nav-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .celestial-nav-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1400px) { .celestial-nav-grid { grid-template-columns: repeat(4, 1fr); } } /* --- 6. UNIFIED CARD & TILE SYSTEM --- */ /* Base styles for all card-like elements */ .tile, .tool-item, .video-tile, .info-card, .amenities-list li, .celestial-card, .celestial-nav-card, .celestial-video-card { background: var(--bg-card); backdrop-filter: blur(8px); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); overflow: hidden; text-decoration: none; color: inherit; } .tile:hover, .tool-item:hover, .video-tile:hover, .info-card:hover, .amenities-list li:hover, .celestial-card:hover, .celestial-nav-card:hover, .celestial-video-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-md); background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)); } /* -- A. Dark/Gold Theme Tiles -- */ .tile { display: block; padding: 2rem 1rem; text-align: center; cursor: pointer; position: relative; min-height: 160px; border: 2px solid var(--primary-gold); } .tile-content { display: flex; flex-direction: column; align-items: center; } .tile-icon { width: 96px; height: 96px; margin-bottom: 0.85rem; background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform var(--transition); } .tile:hover .tile-icon { transform: scale(1.1); } .tile-label { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); } /* -- B. Celestial Nav Cards (Homepage) -- */ .celestial-nav-card { border: 1px solid var(--nav-card-border); border-radius: 24px; box-shadow: 0 10px 30px var(--celestial-shadow); aspect-ratio: 1 / 0.8; } .celestial-nav-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 20px 45px rgba(40, 60, 90, 0.18); } .celestial-nav-aurora { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, var(--nav-card-aurora-1), transparent 70%), radial-gradient(circle at 90% 80%, var(--nav-card-aurora-2), transparent 70%); filter: blur(30px); z-index: -1; } .celestial-nav-content { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: var(--nav-card-glass-bg); backdrop-filter: blur(12px) saturate(150%); text-align: center; padding: 1rem; } .celestial-nav-icon { font-size: 3rem; color: var(--nav-card-icon-fg); text-shadow: 0 2px 10px rgba(0,0,0,0.1); } .celestial-nav-title { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--nav-card-title-fg); } .celestial-nav-arrow { position: absolute; bottom: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--nav-card-arrow-fg); opacity: 0; transform: translateX(-10px); transition: opacity 0.2s, transform 0.2s; } .celestial-nav-card:hover .celestial-nav-arrow { opacity: 1; transform: translateX(0); } /* -- C. Celestial Data Cards (Zone Pages) -- */ .celestial-card { border: 1px solid var(--celestial-border); border-radius: 24px; box-shadow: 0 10px 30px var(--celestial-shadow); } .celestial-aurora-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, var(--celestial-aurora-1), transparent 50%), radial-gradient(circle at 80% 90%, var(--celestial-aurora-2), transparent 50%); filter: blur(40px); z-index: -1; } .celestial-content { padding: 1.75rem; background: var(--celestial-card-bg); backdrop-filter: blur(16px) saturate(180%); height: 100%; display: flex; flex-direction: column; } .celestial-header { display: flex; align-items: center; gap: 1rem; } .celestial-icon { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%); color: var(--celestial-icon-fg); border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .celestial-title { font-size: 1.3rem; font-weight: 700; color: var(--celestial-title-fg); } .celestial-area { font-size: 0.9rem; font-weight: 500; color: var(--celestial-area-fg); margin-top: 0.2rem; } .celestial-divider { height: 1px; background: var(--celestial-border); margin: 1.25rem 0; } .celestial-details { display: flex; flex-direction: column; gap: 1rem; } .celestial-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; } .celestial-label { display: flex; align-items: center; gap: 0.6rem; color: var(--celestial-label-fg); font-weight: 500; } .celestial-value { color: var(--celestial-value-fg); font-weight: 600; text-align: right; } .celestial-link { font-weight: 600; color: var(--celestial-link-fg); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; } .celestial-link:hover { border-color: var(--celestial-link-fg); } /* --- 7. OTHER COMPONENTS --- */ .breadcrumb { list-style: none; padding: 0; display: flex; font-size: 0.95rem; flex-wrap: wrap; gap: 0.4rem; } .breadcrumb li::after { content: "›"; color: #aaa; margin-left: 0.4rem; } .breadcrumb li:last-child::after { content: ""; } .breadcrumb li span { font-weight: bold; } .breadcrumb a { text-decoration: none; color: var(--primary-green); } .breadcrumb a:hover { text-decoration: underline; } ul.checklist { list-style: none; margin: 1rem 0; } ul.checklist li { position: relative; border-left: 6px solid var(--primary-gold); padding: 1.2rem 1rem 1.2rem 3.2rem; margin-bottom: 1.1rem; font-weight: 500; font-size: 1.06rem; } ul.checklist input[type="checkbox"] { position: absolute; left: 1.7rem; top: 1.4rem; width: 1.45em; height: 1.45em; accent-color: var(--primary-green); cursor: pointer; } ul.checklist label { cursor: pointer; user-select: none; } table { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; margin-top: 2rem; } th, td { padding: .75rem 1rem; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-dark); } th { background: rgba(255, 255, 255, 0.3); font-weight: 600; } tbody tr:hover { background: rgba(255, 255, 255, 0.4); } .pdf-link { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; background: var(--primary-gold); color: var(--text-dark); font-weight: 600; border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-xs); } .pdf-link:hover { background: var(--text-light); color: var(--text-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* --- 8. PREMIUM FOOTER --- */ .glass-footer { position: relative; overflow: hidden; margin: 5rem 0 0 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .footer-glow { position: absolute; top: 50%; left: 50%; width: 600px; height: 400px; background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 70%); transform: translate(-50%, -50%); filter: blur(50px); z-index: -1; } .footer-content { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; width: 100%; } .footer-nav a { text-decoration: none; color: #cbd5e1; font-weight: 500; transition: color 0.2s; } .footer-nav a:hover { color: #fff; } .footer-copy { margin: 0; font-size: 0.9rem; color: #64748b; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; width: 100%; } @media (min-width: 992px) { .footer-nav { justify-content: flex-start; } } /* --- 9. UTILITIES & ANIMATIONS --- */ .back-to-top { display: none; position: fixed; bottom: 2rem; right: 1.5rem; width: 48px; height: 48px; background: var(--primary-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; z-index: 999; box-shadow: var(--shadow-sm); cursor: pointer; transition: 0.3s; } .back-to-top:hover { transform: scale(1.1); } :focus-visible { outline: 3px solid var(--primary-gold); outline-offset: 3px; } @keyframes contentFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .tile { opacity: 0; transform: translateY(8px); animation: contentFadeIn 0.8s ease-out both; } .tile:nth-child(1) { animation-delay: 0.1s; } .tile:nth-child(2) { animation-delay: 0.2s; } .tile:nth-child(3) { animation-delay: 0.3s; } .tile:nth-child(4) { animation-delay: 0.4s; } .tile:nth-child(5) { animation-delay: 0.5s; } /* --- 10. RESPONSIVE & RTL --- */ [dir="rtl"] { direction: rtl; } html[dir="rtl"] .back-to-top { left: 1.5rem; right: auto; } /* ========================================================================== Consolidated & Enhanced Mobile Layout ========================================================================== */ /* --- Tablet & Mobile Breakpoint (768px and down) --- */ @media (max-width: 768px) { /* 1. Page Layout: Ensure full-width background and prevent overflow */ body { overflow-x: hidden; } /* Make main content container full-width on mobile */ .container, main.container { padding-left: 0; padding-right: 0; border-radius: 0; } /* 2. Grid & Card Layout: Full-width cards with consistent spacing */ .celestial-grid, .celestial-nav-grid, .celestial-video-grid { /* Use padding on the grid to create space, not the container */ padding-left: 1rem; padding-right: 1rem; /* A single, full-width column for all items */ grid-template-columns: 1fr; gap: 1.5rem; /* Reduced gap for a tighter mobile view */ } .tile, .celestial-nav-card, .celestial-card, .celestial-video-card { width: 100%; /* Make cards fill the grid column */ } /* 3. Card Internal Alignment: Professional two-column layout */ .celestial-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .celestial-label { flex-shrink: 0; /* Prevents the label from shrinking */ } .celestial-value { text-align: right; /* Aligns values cleanly */ } } /* --- Small Mobile Only Breakpoint (640px and down) --- */ @media (max-width: 640px) { /* 1. Navigation: Stack links vertically */ .nav { flex-direction: column; align-items: center; } /* 2. Tile Adjustments: Make dark-theme tiles more compact */ .tile { min-height: 120px; padding: 1rem; } .tile-icon { width: 48px; height: 48px; margin-bottom: .5rem; } /* 3. Table Layout: Convert tables to a vertical card-like list */ table, thead, tbody, th, td, tr { display: block; width: 100%; } th { display: none; } td { position: relative; padding-left: 50%; text-align: right; } td::before { content: attr(data-label); position: absolute; left: 1rem; font-weight: bold; color: var(--text-muted); } } /* ========================================================================== Definitive Card Flexibility Fix (CSS-Only Override) ========================================================================== */ /* * This block targets all card components that need to hold dynamic content. * It overrides any fixed height or aspect-ratio properties. */ .tile, .tool-item, .info-card, .celestial-card { /* Use Flexbox to control the internal layout and allow for flexible height */ display: flex; flex-direction: column; /* CRITICAL: Force the height to be determined by the content inside */ height: auto !important; aspect-ratio: auto !important; } /* * This targets the main content area inside the cards. The `flex-grow` * property is the key to making the layout work. It tells this area * to expand vertically, pushing everything else into place and ensuring * the card is tall enough to fit all content. */ .tile .tile-content, .celestial-card .celestial-content { /* Ensure the inner content wrapper is also a flex container */ display: flex; flex-direction: column; /* This tells the content block to grow and fill all available vertical space */ flex-grow: 1; } /* * For `.celestial-card`, this ensures the details section expands, * pushing the "View Details" link to the very bottom of the card. */ .celestial-card .celestial-details { flex-grow: 1; } /* ========================================================================== Definitive Desktop Fix for Cards in .celestial-nav-grid ========================================================================== */ /* * This media query targets desktop screens where the multi-column layout * is active and the layout is breaking. */ @media (min-width: 769px) { /* * This rule targets ANY card placed directly inside a .celestial-nav-grid. * It forces the card to have a flexible height. */ .celestial-nav-grid > * { /* CRITICAL: Force the card's height to be determined by its content */ height: auto !important; aspect-ratio: auto !important; /* Use Flexbox to properly structure the content vertically */ display: flex !important; flex-direction: column !important; } /* * This rule targets the main content area within the cards. * It makes the content area expand to fill any empty space, which ensures * that all cards in the same row have the same height. */ .celestial-nav-grid > * .tile-content, .celestial-nav-grid > * .celestial-content, .celestial-nav-grid > * .celestial-nav-content { display: flex !important; flex-direction: column !important; /* This tells the content block to grow and fill all available vertical space */ flex-grow: 1 !important; } }