/* ================================================== THEMES.CSS - VASTUVITAA THEME VARIANTS ================================================== Four theme directions: vastu (calm), editorial, dark (luxury), gallery (minimal). Set | "editorial" | "dark" | "gallery"> to activate. Default (no data-theme) = original architectural theme. ================================================== */ /* ------------------------------------------------------------------------- 1. VASTU CALM — wellness & nature Sage/mint, cream, forest, sand, terracotta accent ----------------------------------------------------------------------------- */ [data-theme="vastu"] { --font-serif: 'Cormorant Garamond', serif; --font-sans: 'DM Sans', sans-serif; --cursive-font: 'DM Sans', sans-serif; --color-dark: #2D4A3E; --color-light: #F7F5F0; --color-gray: #6B7B6B; --color-accent: #7D9D7D; --text-dark: #2D4A3E; --text-accent-gold: #B87333; --text-light-gray: #6B7B6B; --bg-light-white: #F7F5F0; --bg-accent-light-beige: #E8E6E0; --accent-warm: #B87333; --accent-cool: #7D9D7D; --accent-earth: #D4C4A8; } [data-theme="vastu"] body { background-color: #F7F5F0; color: #2D4A3E; line-height: 1.7; } [data-theme="vastu"] .main-header { background-color: rgba(247, 245, 240, 0.95); border-bottom-color: rgba(125, 157, 125, 0.2); } [data-theme="vastu"] .hero-overlay { background: linear-gradient(180deg, rgba(45, 74, 62, 0.35) 0%, rgba(45, 74, 62, 0.5) 100%); } [data-theme="vastu"] .introduction-section { background-color: #F0EDE6; } [data-theme="vastu"] .introduction-section::before { opacity: 0.4; filter: blur(8px); } [data-theme="vastu"] .focus-grid .service-card { background-color: #F7F5F0; border-color: rgba(125, 157, 125, 0.25); border-radius: 12px; } [data-theme="vastu"] .focus-grid .service-card:hover { box-shadow: 0 12px 32px rgba(45, 74, 62, 0.12); border-color: #7D9D7D; } [data-theme="vastu"] .focus-grid .service-card .root { display: none; } [data-theme="vastu"] .focus-grid .service-icon { background-color: rgba(125, 157, 125, 0.15); color: #2D4A3E; } [data-theme="vastu"] .testimonial-section { background-color: #2D4A3E; background-image: linear-gradient(135deg, #2D4A3E 0%, #3D5A4E 100%); } [data-theme="vastu"] .testimonial-quote { color: #F7F5F0; } [data-theme="vastu"] .main-footer { background: #2D4A3E; } [data-theme="vastu"] .btn:hover::before { background-color: #2D4A3E; } /* Subtle organic shape background for vastu - decorative */ [data-theme="vastu"] .introduction-section::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 157, 125, 0.06) 0%, transparent 70%); top: -100px; right: -100px; pointer-events: none; z-index: 0; } /* ------------------------------------------------------------------------- 2. EDITORIAL / MAGAZINE Near-black, off-white, deep blue or burgundy accent, gold touches ----------------------------------------------------------------------------- */ [data-theme="editorial"] { --font-serif: 'Playfair Display', serif; --font-sans: 'Inter', sans-serif; --cursive-font: 'Inter', sans-serif; --color-dark: #0D0D0D; --color-light: #FAFAFA; --color-gray: #5C5C5C; --color-accent: #1E3A5F; --text-dark: #0D0D0D; --text-accent-gold: #C9A227; --text-light-gray: #5C5C5C; --bg-light-white: #FAFAFA; --bg-accent-light-beige: #F5F5F5; --accent-warm: #C9A227; --accent-cool: #1E3A5F; --accent-earth: #6B2D3C; } [data-theme="editorial"] body { background-color: #FAFAFA; color: #0D0D0D; } [data-theme="editorial"] .main-header { background-color: rgba(250, 250, 250, 0.98); border-bottom: 2px solid #0D0D0D; box-shadow: none; } [data-theme="editorial"] h1 { font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -0.02em; } [data-theme="editorial"] h2 { letter-spacing: 0.02em; font-size: 2.25rem; } [data-theme="editorial"] .hero-overlay { background-color: rgba(0, 0, 0, 0.25); } [data-theme="editorial"] .hero-content p { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.85rem; } [data-theme="editorial"] .introduction-section { background-color: #FAFAFA; } [data-theme="editorial"] .introduction-section::before { display: none; } [data-theme="editorial"] .focus-grid:hover .service-card { filter: none; opacity: 1; transform: none; } [data-theme="editorial"] .focus-grid .service-card { background-color: #FFF; border: 2px solid #e0e0e0; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } [data-theme="editorial"] .focus-grid .service-card:hover { border-color: #1E3A5F; box-shadow: 0 4px 16px rgba(30, 58, 95, 0.15); transform: none; } [data-theme="editorial"] .focus-grid .service-card .root { display: none; } [data-theme="editorial"] .testimonial-section { background-color: #1E3A5F; background-image: none; } [data-theme="editorial"] .main-footer { background: #0D0D0D; border-top: 2px solid #0D0D0D; } [data-theme="editorial"] .btn { border-width: 2px; } [data-theme="editorial"] .content-section { border-bottom: 1px solid #e8e8e8; } /* ------------------------------------------------------------------------- 3. DARK LUXURY Black/charcoal, warm off-white text, brass/gold, cool metal ----------------------------------------------------------------------------- */ [data-theme="dark"] { --font-serif: 'Cormorant Garamond', serif; --font-sans: 'Manrope', sans-serif; --cursive-font: 'Manrope', sans-serif; --color-dark: #E8E4DC; --color-light: #141414; --color-gray: #6B7B7C; --color-accent: #C9A227; --text-dark: #E8E4DC; --text-accent-gold: #C9A227; --text-light-gray: #9A9A9A; --bg-light-white: #141414; --bg-accent-light-beige: #1A1A1A; --accent-warm: #C9A227; --accent-cool: #6B7B7C; --accent-earth: #B8860B; } [data-theme="dark"] body { background-color: #0C0C0C; color: #E8E4DC; } [data-theme="dark"] a { color: #E8E4DC; } [data-theme="dark"] a:hover { color: #C9A227; } [data-theme="dark"] .main-header { background-color: rgba(12, 12, 12, 0.95); border-bottom: 1px solid rgba(201, 162, 39, 0.2); box-shadow: 0 2px 20px rgba(0,0,0,0.5); } [data-theme="dark"] .main-nav a.active { color: #C9A227 !important; } [data-theme="dark"] .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.7) 100%); } [data-theme="dark"] .hero-content h1 { color: #E8E4DC; text-shadow: 0 0 40px rgba(201, 162, 39, 0.15); } [data-theme="dark"] .hero-content p { color: rgba(232, 228, 220, 0.9); } [data-theme="dark"] .hero-content p::after { content: ''; display: block; width: 60px; height: 2px; background: #C9A227; margin: 1rem auto 0; } [data-theme="dark"] .introduction-section { background-color: #0C0C0C; } [data-theme="dark"] .introduction-section::before { opacity: 0.15; filter: blur(12px); } [data-theme="dark"] .intro-text h2, [data-theme="dark"] .intro-text .cursive { color: #E8E4DC; } [data-theme="dark"] .stat-number { color: #C9A227; } [data-theme="dark"] .stat-description { color: #9A9A9A; } [data-theme="dark"] .content-section { background-color: #0C0C0C; } [data-theme="dark"] .content-section.bg-light { background-color: #141414; } [data-theme="dark"] .focus-grid .service-card { background-color: #1A1A1A; border: 1px solid rgba(107, 123, 124, 0.3); border-radius: 8px; } [data-theme="dark"] .focus-grid .service-card:hover { border-color: rgba(201, 162, 39, 0.6); box-shadow: 0 0 30px rgba(201, 162, 39, 0.08); } [data-theme="dark"] .focus-grid .service-card .root { background-color: #C9A227; } [data-theme="dark"] .focus-grid .service-icon { background-color: rgba(201, 162, 39, 0.2); color: #C9A227; } [data-theme="dark"] .testimonial-section { background-color: #141414; background-image: none; border-top: 1px solid rgba(201, 162, 39, 0.2); } [data-theme="dark"] .main-footer { background: #0C0C0C; border-top: 1px solid rgba(107, 123, 124, 0.2); } [data-theme="dark"] .main-footer h3, [data-theme="dark"] .main-footer h4 { color: #C9A227 !important; } [data-theme="dark"] .main-footer a:hover { color: #C9A227 !important; } [data-theme="dark"] .btn { border-color: #C9A227; color: #C9A227; } [data-theme="dark"] .btn::after { background-color: transparent; } [data-theme="dark"] .btn:hover { color: #0C0C0C; } [data-theme="dark"] .btn:hover::before { background-color: #C9A227; } [data-theme="dark"] h2 { color: #E8E4DC; } [data-theme="dark"] .process-step { background: #1A1A1A; border-color: rgba(107, 123, 124, 0.3); } [data-theme="dark"] .process-step:hover { border-color: rgba(201, 162, 39, 0.5); } [data-theme="dark"] .process-step .step-number { color: rgba(201, 162, 39, 0.12); } [data-theme="dark"] .process-step h3 { color: #C9A227; } [data-theme="dark"] .process-step p { color: #9A9A9A; } [data-theme="dark"] .team-section { background-color: #141414; } [data-theme="dark"] .team-section h2 { color: #E8E4DC; } [data-theme="dark"] .team-info h3 { color: #E8E4DC; } [data-theme="dark"] .team-info p { color: #9A9A9A; } /* ------------------------------------------------------------------------- 4. GALLERY MINIMAL White/off-white, black text, restrained gray or blue accent ----------------------------------------------------------------------------- */ [data-theme="gallery"] { --font-serif: 'Instrument Serif', serif; --font-sans: 'IBM Plex Sans', sans-serif; --cursive-font: 'IBM Plex Sans', sans-serif; --color-dark: #1A1A1A; --color-light: #F8F8F6; --color-gray: #5C5C5C; --color-accent: #2C5F7D; --text-dark: #1A1A1A; --text-accent-gold: #5C5C5C; --text-light-gray: #5C5C5C; --bg-light-white: #FFF; --bg-accent-light-beige: #F8F8F6; --accent-warm: #5C5C5C; --accent-cool: #2C5F7D; --accent-earth: #5C5C5C; } [data-theme="gallery"] body { background-color: #FFF; color: #1A1A1A; } [data-theme="gallery"] .main-header { background-color: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: none; } [data-theme="gallery"] .hero-section { height: 70vh; min-height: 400px; } [data-theme="gallery"] .hero-overlay { background-color: rgba(0, 0, 0, 0.35); } [data-theme="gallery"] .introduction-section { background-color: #F8F8F6; padding: 4rem 0; } [data-theme="gallery"] .introduction-section::before { display: none; } [data-theme="gallery"] .intro-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 2rem 0; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); margin-top: 2rem; } [data-theme="gallery"] .intro-stats .stat-item { padding: 0 1.5rem; border-left: 1px solid rgba(0,0,0,0.1); } [data-theme="gallery"] .intro-stats .stat-item:first-child { border-left: none; } [data-theme="gallery"] .focus-grid:hover .service-card { filter: none; opacity: 1; transform: none; } [data-theme="gallery"] .focus-grid .service-card { background-color: #FFF; border: none; border-radius: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } [data-theme="gallery"] .focus-grid .service-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: transparent; } [data-theme="gallery"] .focus-grid .service-card .root { display: none; } [data-theme="gallery"] .focus-grid .service-icon { background-color: #F8F8F6; color: #1A1A1A; } [data-theme="gallery"] .testimonial-section { background-color: #F8F8F6; background-image: none; color: #1A1A1A; } [data-theme="gallery"] .testimonial-quote { color: #1A1A1A; } [data-theme="gallery"] .testimonial-author { color: #5C5C5C; } [data-theme="gallery"] .main-footer { background: #1A1A1A; } [data-theme="gallery"] .container { max-width: 1100px; } [data-theme="gallery"] .content-section { padding: 4rem 0; } /* ------------------------------------------------------------------------- THEME SWITCHER UI (floating control) ----------------------------------------------------------------------------- */ .theme-switcher { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; font-family: var(--font-sans); } .theme-switcher-trigger { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-dark); color: var(--color-light); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s; } .theme-switcher-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.25); } .theme-switcher-label { display: none; } @media (min-width: 480px) { .theme-switcher-label { display: inline; } } .theme-switcher-backdrop { position: fixed; inset: 0; z-index: 998; } .theme-switcher-dropdown { position: absolute; bottom: 100%; right: 0; margin-bottom: 0.5rem; list-style: none; padding: 0.25rem; background: var(--color-light); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); min-width: 160px; z-index: 1000; } .theme-switcher-dropdown button { display: block; width: 100%; padding: 0.5rem 0.75rem; text-align: left; background: none; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; color: var(--color-dark); transition: background 0.15s; } .theme-switcher-dropdown button:hover, .theme-switcher-dropdown button.active { background: rgba(0,0,0,0.06); } .theme-switcher-dropdown button.active { font-weight: 600; }