/* ============================================================================ * lumen-church-icons.css — Christian / ecclesial icon language. * * Replaces the iOS-style icons (lumen-app-icons.css) with a deliberately * Christian aesthetic: * • Gothic-arch shape (rounded shoulders + pointed apex) * • Stained-glass gradient fills (warm centre, deeper edges, lead outline) * • Illuminated-gold border + soft inner halo * • Cream-and-gold glyph centred under the arch (not pure white) * * Added 2026-06-15 21:50 per Yousef ("شي فيه من الطابع الكنسي"). * * Loads AFTER lumen-app-icons.css and wins specificity battles. * ========================================================================== */ /* ─── Gothic arch shape (rounded top + pointed apex + flat base) ───────── */ .site-nav--icons a.nav-icon, .social-bar__link, .nav-icon--cta, .site-action { width: 56px !important; height: 64px !important; /* taller than wide → arch proportion */ border-radius: 28px 28px 8px 8px !important; clip-path: path('M0 28 C 0 12, 12 0, 28 0 C 44 0, 56 12, 56 28 L 56 56 C 56 60, 52 64, 48 64 L 8 64 C 4 64, 0 60, 0 56 Z') !important; -webkit-clip-path: path('M0 28 C 0 12, 12 0, 28 0 C 44 0, 56 12, 56 28 L 56 56 C 56 60, 52 64, 48 64 L 8 64 C 4 64, 0 60, 0 56 Z') !important; background: var(--church-stained, linear-gradient(180deg, #F8E5B1, #D4A843 50%, #8B5E11)) !important; color: #FFFEFB !important; border: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; box-shadow: 0 2px 4px rgba(13, 17, 23, 0.10), 0 8px 18px -4px rgba(13, 17, 23, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 0 rgba(0, 0, 0, 0.12) !important; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease !important; } /* Decorative lead-came outline that follows the arch */ .site-nav--icons a.nav-icon::before, .social-bar__link::before, .nav-icon--cta::before, .site-action::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 28px 28px 8px 8px !important; box-shadow: inset 0 0 0 1.5px rgba(255, 246, 220, 0.55), inset 0 0 0 3px rgba(13, 17, 23, 0.18) !important; pointer-events: none !important; clip-path: inherit !important; -webkit-clip-path: inherit !important; } .site-nav--icons a.nav-icon::after, .social-bar__link::after, .nav-icon--cta::after, .site-action::after { content: none !important; } /* Glyph color: cream-gold (illuminated manuscript) instead of pure white */ .site-nav--icons a.nav-icon svg, .social-bar__link svg, .nav-icon--cta svg, .site-action svg { color: #FFF6DC !important; stroke: #FFF6DC !important; width: 26px !important; height: 26px !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)) !important; transform: translateY(2px); /* sits a hair lower so it's under the arch peak */ } .site-nav--icons a.nav-icon svg[fill="currentColor"], .social-bar__link svg[fill="currentColor"] { fill: #FFF6DC !important; stroke: none !important; } /* Hover lift — like a candle being raised in the chancel */ .site-nav--icons a.nav-icon:hover, .social-bar__link:hover, .nav-icon--cta:hover, .site-action:hover { transform: translateY(-4px) !important; box-shadow: 0 4px 6px rgba(13, 17, 23, 0.14), 0 18px 28px -6px rgba(13, 17, 23, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important; filter: brightness(1.07) saturate(1.08); } .site-nav--icons a.nav-icon:active, .social-bar__link:active, .nav-icon--cta:active, .site-action:active { transform: translateY(-1px) !important; filter: brightness(0.96); } /* Active page indicator — small cross dot beneath the arch */ .site-nav--icons a.nav-icon[aria-current="page"] { box-shadow: 0 4px 6px rgba(13, 17, 23, 0.16), 0 18px 30px -6px rgba(13, 17, 23, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(244, 215, 122, 0.85) !important; } .site-nav--icons a.nav-icon[aria-current="page"]::after { content: '' !important; position: absolute !important; bottom: -14px !important; left: 50% !important; transform: translateX(-50%) !important; width: 8px !important; height: 8px !important; background: linear-gradient(#FFF6DC, #FFF6DC) center / 2.4px 8px no-repeat, linear-gradient(#FFF6DC, #FFF6DC) center / 8px 2.4px no-repeat, #B97F1A !important; border-radius: 50% !important; box-shadow: 0 2px 6px rgba(212, 168, 67, 0.45); } /* ─── Per-icon stained-glass gradients ──────────────────────────────────── */ /* Nav icons — Learn / Devotionals / Sanctuary / Verse-Map / Store / Safety * Year / About — each its own stained-glass colour family */ .site-nav--icons li:nth-of-type(1) a.nav-icon { --church-stained: linear-gradient(180deg, #CFE3F4 0%, #5C90BC 45%, #1F4A77 100%) !important; background: var(--church-stained) !important; } /* sapphire */ .site-nav--icons li:nth-of-type(2) a.nav-icon { --church-stained: linear-gradient(180deg, #DDEEC6 0%, #7DA655 45%, #3B5824 100%) !important; background: var(--church-stained) !important; } /* emerald */ .site-nav--icons li:nth-of-type(3) a.nav-icon { --church-stained: linear-gradient(180deg, #E0D0F5 0%, #8E73CC 45%, #4A3578 100%) !important; background: var(--church-stained) !important; } /* amethyst */ .site-nav--icons li:nth-of-type(4) a.nav-icon { --church-stained: linear-gradient(180deg, #4F77A3 0%, #1B3F65 50%, #08182C 100%) !important; background: var(--church-stained) !important; } /* midnight (heavens) */ .site-nav--icons li:nth-of-type(5) a.nav-icon { --church-stained: linear-gradient(180deg, #FFD3B5 0%, #D17B5A 45%, #6F2F19 100%) !important; background: var(--church-stained) !important; } /* carnelian */ .site-nav--icons li:nth-of-type(6) a.nav-icon { --church-stained: linear-gradient(180deg, #F6C2C5 0%, #C46168 45%, #6E2A30 100%) !important; background: var(--church-stained) !important; } /* garnet */ .site-nav--icons li:nth-of-type(7) a.nav-icon { --church-stained: linear-gradient(180deg, #F8E5B1 0%, #D4A843 45%, #8B5E11 100%) !important; background: var(--church-stained) !important; } /* illuminated gold */ .site-nav--icons li:nth-of-type(8) a.nav-icon { --church-stained: linear-gradient(180deg, #E2C3A6 0%, #A66B4B 45%, #5C341E 100%) !important; background: var(--church-stained) !important; } /* aged manuscript */ /* Header actions */ .site-action--search { --church-stained: linear-gradient(180deg, #D5D7DE 0%, #5A6173 45%, #2A2D38 100%) !important; background: var(--church-stained) !important; } .site-action--login { --church-stained: linear-gradient(180deg, #CFE3F4 0%, #5C90BC 45%, #1F4A77 100%) !important; background: var(--church-stained) !important; } .site-action--pray { --church-stained: linear-gradient(180deg, #FFE3A8 0%, #DBA13D 45%, #7A4F0E 100%) !important; background: var(--church-stained) !important; } .site-action--pray .site-action__label { color: #FFFEFB !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); font-size: 0.66rem !important; letter-spacing: 0.14em !important; } /* Radio CTA (Hymn — gold chalice) */ .nav-radio-cell .nav-icon--cta:not(.nav-icon--podcast) { --church-stained: linear-gradient(180deg, #F8E5B1 0%, #D4A843 45%, #8B5E11 100%) !important; background: var(--church-stained) !important; } /* Podcast CTA — midnight blue (heavens speaking) */ .nav-radio-cell .nav-icon--cta.nav-icon--podcast { --church-stained: linear-gradient(180deg, #4F77A3 0%, #1B3F65 50%, #08182C 100%) !important; background: var(--church-stained) !important; } /* Picker caret + shuffle — small cream tiles in arch shape */ .nav-icon__picker-toggle, .nav-icon__shuffle { width: 32px !important; height: 38px !important; border-radius: 16px 16px 6px 6px !important; clip-path: path('M0 16 C 0 7, 7 0, 16 0 C 25 0, 32 7, 32 16 L 32 32 C 32 35, 30 38, 27 38 L 5 38 C 2 38, 0 35, 0 32 Z') !important; -webkit-clip-path: path('M0 16 C 0 7, 7 0, 16 0 C 25 0, 32 7, 32 16 L 32 32 C 32 35, 30 38, 27 38 L 5 38 C 2 38, 0 35, 0 32 Z') !important; background: linear-gradient(180deg, #FFFEFB, #FBF6E9) !important; color: var(--gold-deep, #B97F1A) !important; border: 1px solid rgba(212, 168, 67, 0.35) !important; box-shadow: 0 2px 6px rgba(13, 17, 23, 0.10) !important; } .nav-icon__shuffle[aria-pressed="true"] { background: linear-gradient(180deg, #F8E5B1, #D4A843) !important; color: #6B3F08 !important; } .nav-radio-cell--podcast .nav-icon__picker-toggle { color: #1B3F65 !important; border-color: rgba(27, 63, 101, 0.35) !important; } /* Social bar tiles — platform colors but in the SAME church-arch shape */ .social-bar__link[data-tip="YouTube"] { --church-stained: linear-gradient(180deg, #FF6B6B 0%, #E50914 45%, #8A0000 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="Facebook"] { --church-stained: linear-gradient(180deg, #6BA6FF 0%, #1877F2 45%, #0A4798 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="Instagram"] { --church-stained: linear-gradient(180deg, #FFCBA0 0%, #E1306C 45%, #6A0B36 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="TikTok"] { --church-stained: linear-gradient(180deg, #3A3A3A 0%, #010101 50%, #000000 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="X (Twitter)"] { --church-stained: linear-gradient(180deg, #4A4A4A 0%, #000000 50%, #000000 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="Spotify"] { --church-stained: linear-gradient(180deg, #6CF096 0%, #1DB954 45%, #0B5C28 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="Apple Podcasts"] { --church-stained: linear-gradient(180deg, #DAB5F5 0%, #A445F0 45%, #4F1782 100%) !important; background: var(--church-stained) !important; } .social-bar__link[data-tip="Email"] { --church-stained: linear-gradient(180deg, #E0D0F5 0%, #8E73CC 45%, #4A3578 100%) !important; background: var(--church-stained) !important; } /* A subtle illuminated-rosette behind each tile on hover (a halo effect) */ .site-nav--icons a.nav-icon:hover, .nav-icon--cta:hover, .site-action:hover, .social-bar__link:hover { filter: brightness(1.10) saturate(1.10) drop-shadow(0 0 14px rgba(244, 215, 122, 0.55)); } /* Tighter dock spacing because arches read taller */ .site-nav--icons .site-nav__list { gap: 10px !important; align-items: flex-end !important; } .social-bar__platforms { gap: 10px !important; align-items: flex-end !important; } .social-bar__radios { gap: 10px !important; align-items: flex-end !important; } .site-header__actions { gap: 10px !important; align-items: flex-end !important; } .social-bar__inner { align-items: flex-end !important; }