/* ============================================================================ * lumen-app-icons.css — iOS / Android app-icon style for the nav. * * Added 2026-06-15 21:43 per Yousef ("شكل الايقونات لازم نغيرهون عملهون شي * بيشبه ايقونات الموبايلت او الابليكيشينز"). * * Every icon (nav + radio + podcast + header actions + social) becomes * a rounded-square tile with a solid brand color background, a white * glyph in the center, and a soft drop shadow underneath. iOS / Android * home-screen aesthetic. * ========================================================================== */ /* ─── Base app-icon tile ────────────────────────────────────────────────── */ .site-nav--icons a.nav-icon, .social-bar__link, .nav-icon--cta, .site-action { /* shape: rounded square, iOS 22% squircle approximation */ width: 52px !important; height: 52px !important; border-radius: 14px !important; border: 0 !important; background: var(--app-bg, #B97F1A) !important; color: #FFFFFF !important; box-shadow: 0 2px 4px rgba(13, 17, 23, 0.10), 0 6px 14px -4px rgba(13, 17, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease !important; } .site-nav--icons a.nav-icon::before, .site-nav--icons a.nav-icon::after { content: none !important; } .site-action::before, .site-action::after { content: none !important; } .site-nav--icons a.nav-icon svg, .social-bar__link svg, .nav-icon--cta svg, .site-action svg { color: #FFFFFF !important; stroke: #FFFFFF !important; fill: currentColor; width: 28px !important; height: 28px !important; } /* SVGs that are filled-solid (not stroked) — keep them white-on-tile too */ .site-nav--icons a.nav-icon svg[fill="currentColor"], .social-bar__link svg[fill="currentColor"] { fill: #FFFFFF !important; stroke: none !important; } /* Hover lift + brighter */ .site-nav--icons a.nav-icon:hover, .social-bar__link:hover, .nav-icon--cta:hover, .site-action:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 4px 6px rgba(13, 17, 23, 0.14), 0 14px 24px -6px rgba(13, 17, 23, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important; } .site-nav--icons a.nav-icon:active, .social-bar__link:active, .nav-icon--cta:active, .site-action:active { transform: translateY(-1px) scale(0.98); } /* Active page — small white dot under icon (iOS dock indicator) */ .site-nav--icons a.nav-icon[aria-current="page"] { position: relative; } .site-nav--icons a.nav-icon[aria-current="page"]::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--app-bg); } /* ─── Per-icon background colors (the "app" colors) ─────────────────────── */ /* Nav icons — order on page: Learn / Devotionals / Sanctuary / Verse-Map / * Store / Safety / Year / About(Path) */ .site-nav--icons li:nth-of-type(1) a.nav-icon { --app-bg: #4477A0; background: linear-gradient(180deg, #5C90BC, #355F86) !important; } /* Learn — sky */ .site-nav--icons li:nth-of-type(2) a.nav-icon { --app-bg: #5A7C36; background: linear-gradient(180deg, #739850, #45612A) !important; } /* Devotionals — sage */ .site-nav--icons li:nth-of-type(3) a.nav-icon { --app-bg: #6E5BAA; background: linear-gradient(180deg, #8A72CC, #564088) !important; } /* Sanctuary — lavender */ .site-nav--icons li:nth-of-type(4) a.nav-icon { --app-bg: #1B3F65; background: linear-gradient(180deg, #2E5882, #122B47) !important; } /* Verse Map — navy */ .site-nav--icons li:nth-of-type(5) a.nav-icon { --app-bg: #B45D3F; background: linear-gradient(180deg, #D17B5A, #8E462E) !important; } /* Store — coral */ .site-nav--icons li:nth-of-type(6) a.nav-icon { --app-bg: #B7565E; background: linear-gradient(180deg, #D17078, #8E444A) !important; } /* Safety — rose */ .site-nav--icons li:nth-of-type(7) a.nav-icon { --app-bg: #B97F1A; background: linear-gradient(180deg, #DBA13D, #8B5E11) !important; } /* Year — gold */ .site-nav--icons li:nth-of-type(8) a.nav-icon { --app-bg: #8B5234; background: linear-gradient(180deg, #A66B4B, #6B3D26) !important; } /* About / Path — earth */ /* Header actions (Search / Login / Pray) — distinct tile colors */ .site-action--search { --app-bg: #5A6173; background: linear-gradient(180deg, #757C8E, #424857) !important; } .site-action--login { --app-bg: #4477A0; background: linear-gradient(180deg, #5C90BC, #355F86) !important; } .site-action--pray { --app-bg: #B97F1A; background: linear-gradient(180deg, #DBA13D, #8B5E11) !important; } .site-action--pray .site-action__label { color: #FFFFFF !important; } /* Radio CTA (Hymn — treble clef) — gold */ .nav-radio-cell .nav-icon--cta:not(.nav-icon--podcast) { --app-bg: #B97F1A; background: linear-gradient(180deg, #DBA13D, #8B5E11) !important; } /* Podcast CTA — navy */ .nav-radio-cell .nav-icon--cta.nav-icon--podcast { --app-bg: #1B3F65; background: linear-gradient(180deg, #2E5882, #122B47) !important; } /* Picker caret + shuffle next to radio — tiny sidekick tiles */ .nav-icon__picker-toggle, .nav-icon__shuffle { width: 34px !important; height: 34px !important; border-radius: 10px !important; border: 0 !important; background: #FFFFFF !important; color: var(--gold-deep, #B97F1A) !important; box-shadow: 0 1px 2px rgba(13, 17, 23, 0.08), 0 4px 10px -2px rgba(13, 17, 23, 0.15) !important; } .nav-icon__shuffle[aria-pressed="true"] { background: linear-gradient(180deg, #DBA13D, #8B5E11) !important; color: #FFFFFF !important; } .nav-radio-cell--podcast .nav-icon__picker-toggle { color: #1B3F65 !important; } /* ─── Social bar tiles — each platform its own brand color ─────────────── */ /* These map to whichever order the platforms appear; we color by `data-tip`. */ .social-bar__link[data-tip="YouTube"] { --app-bg: #FF0000; background: linear-gradient(180deg, #FF3B3B, #C70000) !important; } .social-bar__link[data-tip="Facebook"] { --app-bg: #1877F2; background: linear-gradient(180deg, #3F94FF, #115ABF) !important; } .social-bar__link[data-tip="Instagram"] { --app-bg: #E1306C; background: linear-gradient(180deg, #F77737, #C13584) !important; } .social-bar__link[data-tip="TikTok"] { --app-bg: #010101; background: linear-gradient(180deg, #2A2A2A, #000000) !important; } .social-bar__link[data-tip="X (Twitter)"] { --app-bg: #000000; background: linear-gradient(180deg, #222222, #000000) !important; } .social-bar__link[data-tip="Spotify"] { --app-bg: #1DB954; background: linear-gradient(180deg, #2EE368, #169C46) !important; } .social-bar__link[data-tip="Apple Podcasts"] { --app-bg: #A445F0; background: linear-gradient(180deg, #C275FF, #7723C8) !important; } .social-bar__link[data-tip="Email"] { --app-bg: #6E5BAA; background: linear-gradient(180deg, #8A72CC, #564088) !important; } /* Spacing between tiles (a tighter dock-like row) */ .site-nav--icons .site-nav__list { gap: 12px !important; } .social-bar__platforms { gap: 12px !important; } .social-bar__radios { gap: 12px !important; } .site-header__actions { gap: 12px !important; } /* The picker-toggle + shuffle sit on a small ear next to the gold tile */ .nav-radio-cell { gap: 6px !important; } /* Section side stripes etc. — already off in reset; this just guarantees * the new app-tiles aren't clipped by overflow:hidden anywhere. */ .site-header, .social-bar { overflow: visible !important; }