/* ============================================================================ * lumen-25-rainbow.css — bring the FULL brand palette into a beautiful, * deliberate visual language across every page. * * Added 2026-06-15 21:11 per Yousef ("استخدم كل قدراتك لحتى تخلي ال ٢٥ لون * اللي موجودين عنا يكونوا بطريقة حلوة كتير وبتخلي الويبسايت جميل"). * * Every named brand color from joy-palette-extended.css gets a job here. * The page becomes a living, breathing colour story, not a gold-and-cream wash. * ========================================================================== */ /* ─── 1. Hero sky — a true SUNRISE through the whole palette ────────────── */ .cinematic-hero, .page-hero, .store-hero, .rp-hero, .sanctuary-hero { background: linear-gradient(180deg, #FFEDDD 0%, /* peach-100 — first dawn */ #FFD4B8 12%, /* peach-200 — peach glow */ #FFBA92 22%, /* peach-300 — coral edge */ #F4A78B 30%, /* coral — true sunrise */ #F8BDC3 42%, /* rose-200 — rose dust */ #F09BA1 50%, /* rose-300 — heart-pink */ #D4C9E8 60%, /* lav-200 — first violet */ #B6A4D6 68%, /* lav-300 — soft purple */ #BDD9F2 78%, /* sky-300 — clearing sky */ #92BFE6 90%, /* sky-400 — blue depth */ #EAF1DD 100%) !important; /* sage-100 — landing */ } /* The brilliant sun in the middle */ .cinematic-hero::after, .page-hero::after, .store-hero::after, .rp-hero::after { background: radial-gradient(circle at center, #FFFEFB 0%, /* cream-100 white-hot core */ #FFF6DC 18%, /* gold-100 halo */ #F4D77A 35%, /* gold-200 warm */ #E8C067 50%, /* gold-300 burnish */ rgba(244, 167, 139, 0.35) 70%, /* coral fade */ rgba(244, 167, 139, 0) 100%); } /* ─── 2. Rays in 7 brand hues (each ray a different colour) ─────────────── */ .lumen-hero-scenery__rays { background: conic-gradient(from -90deg at 50% 30%, transparent 0deg, rgba(244, 215, 122, 0.32) 6deg, /* gold-200 */ transparent 18deg, transparent 30deg, rgba(244, 167, 139, 0.28) 36deg, /* coral */ transparent 48deg, transparent 60deg, rgba(240, 155, 161, 0.28) 66deg, /* rose-300 */ transparent 78deg, transparent 90deg, rgba(182, 164, 214, 0.26) 96deg, /* lav-300 */ transparent 108deg, transparent 120deg, rgba(146, 191, 230, 0.28) 126deg, /* sky-400 */ transparent 138deg, transparent 150deg, rgba(135, 168, 98, 0.24) 156deg, /* sage-400 */ transparent 168deg, transparent 180deg, rgba(181, 228, 202, 0.24) 186deg, /* mint-200 */ transparent 198deg, transparent 360deg) !important; mix-blend-mode: screen !important; } /* ─── 3. Multi-color mountains ─────────────────────────────────────────── */ .lumen-hero-scenery__mountains { background: linear-gradient(180deg, transparent 0%, rgba(178, 153, 110, 0.40) 100%), linear-gradient(90deg, rgba(168, 195, 133, 0.20) 0%, /* sage */ rgba(189, 217, 242, 0.18) 25%, /* sky */ rgba(182, 164, 214, 0.18) 50%, /* lav */ rgba(240, 155, 161, 0.18) 75%, /* rose */ rgba(244, 215, 122, 0.20) 100% /* gold */ ), repeating-linear-gradient(135deg, transparent 0px, rgba(178, 153, 110, 0.15) 30px, transparent 60px) !important; } /* ─── 4. Section accent stripes — left edge of each section a brand color */ main > section, main > .section { position: relative; } main > section:nth-of-type(8n+1)::before, main > .section:nth-of-type(8n+1)::before { background: linear-gradient(180deg, var(--jp-gold-400, #D4A843), var(--jp-gold-200, #F4D77A)); } main > section:nth-of-type(8n+2)::before, main > .section:nth-of-type(8n+2)::before { background: linear-gradient(180deg, var(--jp-rose-400, #DB7A82), var(--jp-rose-200, #F8BDC3)); } main > section:nth-of-type(8n+3)::before, main > .section:nth-of-type(8n+3)::before { background: linear-gradient(180deg, var(--jp-sky-400, #92BFE6), var(--jp-sky-200, #DEEAF6)); } main > section:nth-of-type(8n+4)::before, main > .section:nth-of-type(8n+4)::before { background: linear-gradient(180deg, var(--jp-sage-400, #87A862), var(--jp-sage-200, #C8DCB0)); } main > section:nth-of-type(8n+5)::before, main > .section:nth-of-type(8n+5)::before { background: linear-gradient(180deg, var(--jp-peach-300, #FFBA92), var(--jp-peach-100, #FFEDDD)); } main > section:nth-of-type(8n+6)::before, main > .section:nth-of-type(8n+6)::before { background: linear-gradient(180deg, var(--jp-lav-300, #B6A4D6), var(--jp-lav-100, #EFEAF7)); } main > section:nth-of-type(8n+7)::before, main > .section:nth-of-type(8n+7)::before { background: linear-gradient(180deg, var(--jp-coral, #F4A78B), var(--jp-peach-200, #FFD4B8)); } main > section:nth-of-type(8n+8)::before, main > .section:nth-of-type(8n+8)::before { background: linear-gradient(180deg, var(--jp-mint-200, #B5E4CA), var(--jp-mint-100, #DFF5E8)); } main > section::before, main > .section::before { content: ''; position: absolute; top: 12%; left: 0; width: 6px; height: 76%; border-radius: 0 4px 4px 0; opacity: 0.78; } /* ─── 5. H2 headings — gradient ink in different brand pairs per section ── */ main > section:nth-of-type(8n+1) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-gold-400, #D4A843)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+2) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-rose-400, #DB7A82)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+3) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-sky-400, #92BFE6)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+4) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-sage-400, #87A862)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+5) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-coral, #F4A78B)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+6) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-lav-300, #B6A4D6)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+7) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-peach-300, #FFBA92)); -webkit-background-clip: text; background-clip: text; color: transparent; } main > section:nth-of-type(8n+8) h2 { background: linear-gradient(90deg, var(--jp-ink, #2A2D38), var(--jp-mint-200, #B5E4CA)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ─── 6. Blockquote / verse cards — left brand bar in section colour ───── */ main blockquote, main .lumen-quote, .sanctuary-prayer__inner, .sanctuary-psalm__inner, .sanctuary-jesus-prayer__inner { padding: 1.25rem 1.5rem 1.25rem 1.6rem; border-left: 4px solid; border-radius: 10px; background: rgba(255, 254, 251, 0.55); } main > section:nth-of-type(8n+1) blockquote, main > section:nth-of-type(8n+1) .lumen-quote { border-left-color: var(--jp-gold-400, #D4A843); } main > section:nth-of-type(8n+2) blockquote, main > section:nth-of-type(8n+2) .lumen-quote { border-left-color: var(--jp-rose-400, #DB7A82); } main > section:nth-of-type(8n+3) blockquote, main > section:nth-of-type(8n+3) .lumen-quote { border-left-color: var(--jp-sky-400, #92BFE6); } main > section:nth-of-type(8n+4) blockquote, main > section:nth-of-type(8n+4) .lumen-quote { border-left-color: var(--jp-sage-400, #87A862); } main > section:nth-of-type(8n+5) blockquote, main > section:nth-of-type(8n+5) .lumen-quote { border-left-color: var(--jp-coral, #F4A78B); } main > section:nth-of-type(8n+6) blockquote, main > section:nth-of-type(8n+6) .lumen-quote { border-left-color: var(--jp-lav-300, #B6A4D6); } main > section:nth-of-type(8n+7) blockquote, main > section:nth-of-type(8n+7) .lumen-quote { border-left-color: var(--jp-peach-300, #FFBA92); } main > section:nth-of-type(8n+8) blockquote, main > section:nth-of-type(8n+8) .lumen-quote { border-left-color: var(--jp-mint-200, #B5E4CA); } /* ─── 7. Section kicker / chip — coloured to match the section accent ──── */ main > section:nth-of-type(8n+1) .kicker, main > section:nth-of-type(8n+1) .lumen-section__kicker, main > section:nth-of-type(8n+1) .sanctuary-prayer__kicker { color: #B97F1A; } main > section:nth-of-type(8n+2) .kicker, main > section:nth-of-type(8n+2) .lumen-section__kicker, main > section:nth-of-type(8n+2) .sanctuary-prayer__kicker { color: #B7565E; } main > section:nth-of-type(8n+3) .kicker, main > section:nth-of-type(8n+3) .lumen-section__kicker, main > section:nth-of-type(8n+3) .sanctuary-prayer__kicker { color: #4477A0; } main > section:nth-of-type(8n+4) .kicker, main > section:nth-of-type(8n+4) .lumen-section__kicker, main > section:nth-of-type(8n+4) .sanctuary-prayer__kicker { color: #5A7C36; } main > section:nth-of-type(8n+5) .kicker, main > section:nth-of-type(8n+5) .lumen-section__kicker, main > section:nth-of-type(8n+5) .sanctuary-prayer__kicker { color: #B45D3F; } main > section:nth-of-type(8n+6) .kicker, main > section:nth-of-type(8n+6) .lumen-section__kicker, main > section:nth-of-type(8n+6) .sanctuary-prayer__kicker { color: #6E5BAA; } main > section:nth-of-type(8n+7) .kicker, main > section:nth-of-type(8n+7) .lumen-section__kicker, main > section:nth-of-type(8n+7) .sanctuary-prayer__kicker { color: #B8703F; } main > section:nth-of-type(8n+8) .kicker, main > section:nth-of-type(8n+8) .lumen-section__kicker, main > section:nth-of-type(8n+8) .sanctuary-prayer__kicker { color: #4B8A6C; } /* ─── 8. Footer — sunrise gradient instead of flat peach ────────────────── */ .site-footer { background: radial-gradient(ellipse at 20% 0%, rgba(255, 246, 220, 0.45) 0%, transparent 50%), radial-gradient(ellipse at 80% 0%, rgba(189, 217, 242, 0.40) 0%, transparent 50%), linear-gradient(180deg, #FFEDDD 0%, #FFD4B8 30%, #F8BDC3 60%, #D4C9E8 100%) !important; color: var(--jp-ink, #2A2D38) !important; } /* ─── 9. Footer brand-mark cross — full rainbow stroke ──────────────────── */ .footer-mark__icon svg g line { stroke: url(#lumen-footer-cross-grad); } /* The gradient is injected by lumen-25.js as an SVG at body end. */ /* ─── 10. Multi-color signature ribbon at the very bottom of every page ── */ .lumen-signature-ribbon { width: 100vw; margin-left: calc(50% - 50vw); height: 10px; background: linear-gradient(90deg, #FFEDDD, #FFD4B8, #FFBA92, #F4A78B, #FBE5E7, #F8BDC3, #F09BA1, #DB7A82, #EFEAF7, #D4C9E8, #B6A4D6, #EEF5FB, #DEEAF6, #BDD9F2, #92BFE6, #EAF1DD, #C8DCB0, #A8C385, #87A862, #DFF5E8, #B5E4CA, #FFF6DC, #F4D77A, #E8C067, #D4A843); background-size: 200% 100%; opacity: 0.92; } @media (prefers-reduced-motion: no-preference) { .lumen-signature-ribbon { animation: lumen-25-flow 32s linear infinite; } @keyframes lumen-25-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } } } /* ─── 11. Nav icons — page-active accent rotates through palette ────────── */ .site-nav--icons a.nav-icon[aria-current="page"]::before, .site-nav--icons a.nav-icon[aria-current="page"]::after { border-color: var(--page-accent, var(--gold-deep, #b9892f)) !important; } /* ─── 12. Search modal "lumen-chip" — each Kicker color-coded by family ─── */ .lumen-search-item__kicker { background: var(--jp-cream-300, #FBF6E9); color: var(--jp-ink, #2A2D38); padding: 1px 8px; border-radius: 999px; font-size: 0.62rem; } .lumen-search-item[data-kicker*="Page"] .lumen-search-item__kicker { background: var(--jp-sky-200, #DEEAF6); color: #4477A0; } .lumen-search-item[data-kicker*="Hymn"] .lumen-search-item__kicker { background: var(--jp-gold-100, #FFF6DC); color: #B97F1A; } .lumen-search-item[data-kicker*="Episode"] .lumen-search-item__kicker { background: var(--jp-sage-100, #EAF1DD); color: #5A7C36; } .lumen-search-item[data-kicker*="Action"] .lumen-search-item__kicker { background: var(--jp-rose-100, #FBE5E7); color: #B7565E; } .lumen-search-item[data-kicker*="About"] .lumen-search-item__kicker { background: var(--jp-peach-100, #FFEDDD); color: #B8703F; } .lumen-search-item[data-kicker*="Legal"] .lumen-search-item__kicker { background: var(--jp-lav-100, #EFEAF7); color: #6E5BAA; } /* ─── 13. Selection — soft rainbow tint instead of system blue ──────────── */ ::selection { background: rgba(244, 215, 122, 0.55); color: var(--jp-ink, #2A2D38); } ::-moz-selection { background: rgba(244, 215, 122, 0.55); color: var(--jp-ink, #2A2D38); } /* ─── 14. Pretty divider — rainbow gradient with subtle waveform mask ──── */ hr, hr.lumen { border: none; height: 3px; background: linear-gradient(90deg, var(--jp-coral, #F4A78B), var(--jp-rose-300, #F09BA1), var(--jp-lav-300, #B6A4D6), var(--jp-sky-400, #92BFE6), var(--jp-sage-400, #87A862), var(--jp-gold-400, #D4A843)); background-size: 200% 100%; border-radius: 3px; margin: 3rem auto; max-width: 24rem; opacity: 0.8; } @media (prefers-reduced-motion: no-preference) { hr, hr.lumen { animation: lumen-25-flow 18s linear infinite; } } /* ─── 15. Mobile nav drawer & misc — kissed with palette ───────────────── */ .mobile-nav a:nth-child(8n+1) { border-left: 3px solid var(--jp-gold-400, #D4A843); } .mobile-nav a:nth-child(8n+2) { border-left: 3px solid var(--jp-rose-400, #DB7A82); } .mobile-nav a:nth-child(8n+3) { border-left: 3px solid var(--jp-sky-400, #92BFE6); } .mobile-nav a:nth-child(8n+4) { border-left: 3px solid var(--jp-sage-400, #87A862); } .mobile-nav a:nth-child(8n+5) { border-left: 3px solid var(--jp-coral, #F4A78B); } .mobile-nav a:nth-child(8n+6) { border-left: 3px solid var(--jp-lav-300, #B6A4D6); } .mobile-nav a:nth-child(8n+7) { border-left: 3px solid var(--jp-peach-300, #FFBA92); } .mobile-nav a:nth-child(8n+8) { border-left: 3px solid var(--jp-mint-200, #B5E4CA); } .mobile-nav a { padding-left: 12px; transition: background 180ms ease; } .mobile-nav a:hover { background: rgba(244, 215, 122, 0.12); } /* ─── 16. Tooltip — gentle gradient instead of flat ink ─────────────────── */ .lumen-floating-tip { background: linear-gradient(135deg, #11202F 0%, #2A1F35 100%); border-color: rgba(244, 215, 122, 0.45); }