@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,300;0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=Amiri:wght@400;700&display=swap'); :root{ --bg-top: #0B1026; --bg-bottom: #1B2340; --text: #EDEBF5; --muted: #9098B8; --gold: #D4AF6A; --gold-soft: rgba(212,175,106,0.25); --card: rgba(255,255,255,0.045); --card-border: rgba(212,175,106,0.22); --serif: 'Literata', serif; --sans: 'IBM Plex Sans', sans-serif; --arabic: 'Amiri', serif; } html, body{ background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) !important; color: var(--text) !important; font-family: var(--sans) !important; } /* Bootstrap's h-100 utility forces height:100% (one viewport) on and , used for the sticky footer. That's fine when content is short, but this page is taller than one screen, so the background above was getting cut off at the one-viewport mark, leaving a visible seam on scroll. Overriding to min-height keeps the sticky-footer behavior for short content while letting the background stretch to the real page height. */ html.h-100, body.h-100{ height: auto !important; min-height: 100% !important; } #stars{ position: fixed; inset: 0; z-index: 0; pointer-events: none; } main{ position: relative; z-index: 1; } .container{ max-width: 720px !important; } h1, h1 strong{ font-family: var(--serif) !important; font-weight: 300 !important; color: var(--text) !important; } h4.text-center{ color: var(--muted) !important; font-family: var(--sans) !important; font-weight: 400 !important; } hr{ background-color: var(--gold-soft) !important; opacity: 1 !important; width: 60% !important; } /* ---- Calculator card ---- */ .calc-card{ background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 26px clamp(16px, 4vw, 30px); margin: 22px 0 34px 0; backdrop-filter: blur(6px); } .calc-card label{ color: var(--muted); font-size: 13px; } .calc-card input[type="time"]{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: var(--text); padding: 6px 10px; } .calc-card input[type="time"]::-webkit-calendar-picker-indicator{ filter: invert(0.8); } .btn-secondary{ background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; color: var(--text) !important; } .btn-secondary:hover{ background: rgba(255,255,255,0.08) !important; border-color: var(--gold) !important; } /* result box */ #placeholder{ border: none !important; box-shadow: none !important; background: transparent !important; color: var(--text) !important; padding-top: 16px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; } /* hide the sharia-midnight line but keep it in the DOM so the existing script (which writes into #midnight) doesn't error */ #placeholder > span.text-muted{ display: none !important; } #lastthird{ font-family: var(--serif); font-size: 26px; color: var(--gold); display: inline-block; margin-top: 4px; } blockquote{ border: none !important; box-shadow: none !important; border-left: 2px solid var(--gold) !important; border-radius: 0 !important; background: transparent !important; color: var(--text) !important; font-family: var(--serif) !important; font-style: italic !important; padding: 4px 0 4px 20px !important; } p.fs-5.fst-italic{ font-family: var(--serif) !important; color: var(--text) !important; border-left: 2px solid rgba(255,255,255,0.25); padding-left: 20px; font-style: italic !important; } /* ---- Accordion ---- */ h2.text-center{ font-family: var(--serif) !important; color: var(--text) !important; font-weight: 300 !important; } .accordion-item{ background: var(--card) !important; border: 1px solid var(--card-border) !important; border-radius: 10px !important; margin: 10px 0 !important; color: var(--text) !important; } .accordion-button{ background: transparent !important; color: var(--text) !important; font-family: var(--sans) !important; font-weight: 500 !important; } .accordion-button:not(.collapsed){ color: var(--gold) !important; box-shadow: none !important; } .accordion-button::after{ filter: invert(0.85) sepia(1) saturate(2) hue-rotate(0deg); } .accordion-button:focus{ border-color: var(--gold) !important; box-shadow: 0 0 0 2px var(--gold-soft) !important; } .accordion-body{ color: var(--muted) !important; font-family: var(--sans) !important; } .accordion-body h5{ color: var(--text) !important; font-family: var(--serif) !important; font-weight: 600 !important; } .accordion-body b{ color: var(--text) !important; } .accordion-body blockquote{ direction: rtl; font-family: var(--arabic) !important; font-size: 20px !important; line-height: 2 !important; color: var(--gold) !important; text-align: right; } /* links */ a{ color: var(--text) !important; } a:hover{ color: var(--gold) !important; } .link-primary{ color: var(--gold) !important; } /* footer */ footer.footer{ background: transparent !important; border-top: 1px solid rgba(255,255,255,0.08); color: var(--muted) !important; } footer.footer a{ color: var(--muted) !important; text-decoration: underline; text-underline-offset: 3px; } footer.footer a:hover{ color: var(--gold) !important; } .credit-line{ margin: 8px 0 0 0; font-size: 12px; opacity: 0.75; }