/** * Al-Ansaar light theme — warm off-white body, light chrome, solemn hero * Apply with: */ html.theme-light { color-scheme: light; --header-height: clamp(4.75rem, 4rem + 2vw, 6rem); --logo-mark-header: clamp(3.5rem, 3rem + 2.5vw, 5.5rem); --logo-mark-footer: clamp(4.25rem, 3.5rem + 3vw, 6.25rem); --hero-brand-size: clamp(10rem, 28vw, 17.5rem); --brand-showcase-max: min(22rem, 88vw); --color-bg-deep: #f6f8f7; --color-bg-elevated: #ffffff; --color-bg-card: #ffffff; --color-bg-card-hover: #eef4f2; --color-text-primary: #0a1f1a; --color-text-secondary: #1a4d72; --color-text-muted: #4a635c; --color-text-arabic: #157a5c; --color-border: rgba(154, 130, 80, 0.38); --color-border-subtle: rgba(10, 31, 26, 0.1); --shadow-soft: 0 10px 40px rgba(12, 36, 30, 0.08); --shadow-gold: 0 4px 20px rgba(196, 168, 98, 0.18); --pattern-opacity: 0.045; } html.theme-light body { background: var(--color-bg-deep); } html.theme-light a { color: var(--color-teal-deep); } html.theme-light a:hover { color: var(--color-gold-muted); } html.theme-light.has-preview-banner { scroll-padding-bottom: 4rem; } html.theme-light.has-preview-banner body { padding-bottom: 3.5rem; } /* Preview switcher bar (preview.html only) */ .preview-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, #0c3a30, #123d32); color: #f6f8f7; font-size: var(--text-sm); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15); } .preview-banner a { color: var(--color-gold-light); font-weight: 500; text-decoration: underline; } .preview-banner a:hover { color: #fff; } html.theme-light .site-header { background: rgba(246, 248, 247, 0.94); border-bottom: 1px solid var(--color-border-subtle); backdrop-filter: blur(12px); } html.theme-light .site-header.is-scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 20px rgba(12, 36, 30, 0.06); } html.theme-light .site-nav a { color: var(--color-text-muted); } html.theme-light .site-nav a:hover { color: var(--color-teal-deep); } html.theme-light .menu-toggle { border-color: var(--color-border-subtle); color: var(--color-text-primary); } html.theme-light .mobile-nav { background: rgba(255, 255, 255, 0.98); } html.theme-light .mobile-nav a { color: var(--color-text-primary); border-bottom-color: var(--color-border-subtle); } html.theme-light .site-logo__arabic, html.theme-light .footer-logo__arabic { color: var(--color-gold-muted); } html.theme-light .hero { --color-text-primary: #fafcfb; --color-text-secondary: #c8e4f0; --color-text-muted: #a8c4bc; --color-text-arabic: #7fd4b0; --color-gold-light: #e8d4a8; --color-border-subtle: rgba(250, 252, 251, 0.12); } html.theme-light .hero__title { color: var(--color-text-primary); } html.theme-light .site-logo__emblem, html.theme-light .footer-logo__emblem { display: block; width: 100%; height: 100%; object-fit: contain; } html.theme-light .site-logo__mark { width: var(--logo-mark-header); height: var(--logo-mark-header); } html.theme-light .footer-logo__mark { width: var(--logo-mark-footer); height: var(--logo-mark-footer); } html.theme-light .brand-showcase { background: var(--color-bg-elevated); border-bottom-color: var(--color-border-subtle); } html.theme-light .hero__brand-emblem { filter: drop-shadow(0 16px 48px rgba(3, 6, 5, 0.55)); } html.theme-light .hero__scrim { background: linear-gradient( 165deg, rgba(8, 26, 22, 0.72) 0%, rgba(6, 18, 15, 0.9) 50%, rgba(3, 6, 5, 0.96) 100% ); } html.theme-light .hero__media img { filter: saturate(0.85) brightness(0.55); } html.theme-light .hero .btn--ghost { color: var(--color-text-primary); border-color: rgba(250, 252, 251, 0.35); } html.theme-light .hero .btn--ghost:hover { border-color: var(--color-gold); color: var(--color-gold-light); } html.theme-light .trust-bar { background: #ffffff; } html.theme-light .pattern-bg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%239A8250' stroke-width='0.45'%3E%3Cpath d='M40 0L50 10L40 20L30 10Z'/%3E%3Cpath d='M0 40L10 30L20 40L10 50Z'/%3E%3Cpath d='M40 60L50 70L40 80L30 70Z'/%3E%3Cpath d='M60 40L70 30L80 40L70 50Z'/%3E%3C/g%3E%3C/svg%3E"); } html.theme-light .remembrance { background: linear-gradient( 90deg, #e8f2ee 0%, #d4ebe3 50%, #e8f2ee 100% ); border-block-color: var(--color-border-subtle); } html.theme-light .remembrance__translation { color: var(--color-text-secondary); } html.theme-light .section--alt { background: linear-gradient(180deg, #eef4f2 0%, var(--color-bg-deep) 100%); } html.theme-light .service-card, html.theme-light .journey__step, html.theme-light .journey-band, html.theme-light .section-media, html.theme-light .contact-card, html.theme-light .qabristan-teaser__card { box-shadow: var(--shadow-soft); } html.theme-light .legal-panel { background: linear-gradient(145deg, #e8f2ee 0%, #ffffff 55%); } html.theme-light .legal-panel h3 { color: var(--color-teal-deep); } html.theme-light .contact-card a[href^="tel"], html.theme-light .contact-card a[href^="mailto"], html.theme-light .contact-card a[href^="https://wa.me"] { color: var(--color-teal-deep); } html.theme-light .btn--ghost { color: var(--color-text-primary); border-color: var(--color-border); } html.theme-light .btn--ghost:hover { color: var(--color-teal-deep); border-color: var(--color-gold); } html.theme-light .btn--urgent { background: rgba(196, 168, 98, 0.12); color: #7a5c28; border-color: rgba(196, 168, 98, 0.45); } html.theme-light .btn--urgent:hover { background: rgba(196, 168, 98, 0.22); color: var(--color-text-primary); } html.theme-light .btn--whatsapp { background: rgba(37, 211, 102, 0.1); color: #1a7a62; border-color: rgba(37, 211, 102, 0.4); } html.theme-light .btn--whatsapp:hover { background: rgba(37, 211, 102, 0.18); color: var(--color-teal-deep); } html.theme-light .contact-quick__person { background: var(--color-bg-card); border-color: var(--color-border-subtle); } html.theme-light .hero .contact-quick__person { background: rgba(3, 6, 5, 0.45); border-color: rgba(250, 252, 251, 0.12); } html.theme-light .hero .contact-quick__name { color: var(--color-text-primary); } html.theme-light .site-footer { background: #ffffff; border-top-color: var(--color-border-subtle); } html.theme-light .footer-nav a:hover { color: var(--color-teal-deep); }