/* Prayer-times city pages — branded to match the My Prayer Times marketing site. CSP-safe: same-origin stylesheet (style-src 'self'); Google Fonts whitelisted. */ :root { color-scheme: light dark; --bg: #F2F1ED; --bg-elevated: #F7F6F2; --surface: #FDFCFA; --surface-soft: #EDECE8; --ink: #1a2e26; --ink-70: rgba(26, 46, 38, 0.7); --ink-55: rgba(26, 46, 38, 0.55); --muted: #5d6e66; --line: #D9DCD8; --primary: #0d6b4e; --primary-dark: #0a5440; --gold: #9a7328; --danger: #c2410c; --shadow: 0 1px 2px rgba(26, 46, 38, 0.06), 0 8px 24px rgba(26, 46, 38, 0.06); } /* Explicit theme (set by the toggle via data-theme on , persisted in localStorage as 'mpt-theme' — shared with the landing page so the choice carries across navigation. Mirrors the landing's token values.) */ [data-theme="dark"] { color-scheme: dark; --bg: #0a1512; --bg-elevated: #0f1b17; --surface: #131f1a; --surface-soft: #182820; --ink: #e8f2ed; --ink-70: rgba(232, 242, 237, 0.76); --ink-55: rgba(232, 242, 237, 0.56); --muted: #95a8a0; --line: #365247; --primary: #5cc9a0; --primary-dark: #7fdcb6; --gold: #d4b05f; --danger: #f08a5d; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35); } /* System dark mode only applies when no explicit choice is stored. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a1512; --bg-elevated: #0f1b17; --surface: #131f1a; --surface-soft: #182820; --ink: #e8f2ed; --ink-70: rgba(232, 242, 237, 0.76); --ink-55: rgba(232, 242, 237, 0.56); --muted: #95a8a0; --line: #365247; --primary: #5cc9a0; --primary-dark: #7fdcb6; --gold: #d4b05f; --danger: #f08a5d; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px; } /* Nav */ .nav { border-bottom: 1px solid var(--line); background: var(--bg-elevated); position: sticky; top: 0; z-index: 10; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); } .brand img { width: 30px; height: 30px; border-radius: 8px; } .brand-text { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 700; } /* Nav right side: theme toggle + store buttons */ .nav-right { display: flex; align-items: center; gap: 8px; } .theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: var(--primary); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 2px; } .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .moon { display: none; } [data-theme="dark"] .theme-toggle .sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } } .nav-store { display: inline-flex; align-items: center; gap: 6px; } .nav-store a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: background 0.2s ease, transform 0.2s ease; } .nav-store a.android { background: var(--primary); color: #fff; } .nav-store a.android:hover { background: var(--primary-dark); transform: translateY(-1px); } .nav-store a.ios { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .nav-store a.ios:hover { border-color: var(--primary); transform: translateY(-1px); } /* dark mode: primary (mint) needs dark text for contrast, same as the landing */ [data-theme="dark"] .nav-store a.android { color: #0a1512; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-store a.android { color: #0a1512; } } .button-primary { display: inline-block; background: var(--primary); color: #fff !important; font-weight: 600; padding: 9px 16px; border-radius: 10px; font-size: 14px; } .button-primary:hover { background: var(--primary-dark); text-decoration: none; } /* Hero */ .hero { padding: 40px 0 8px; } .breadcrumbs { font-size: 13px; color: var(--ink-55); margin-bottom: 14px; } .breadcrumbs a { color: var(--ink-55); } .hero h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 8px; } .hero .sub { color: var(--muted); font-size: 16px; margin: 0 0 4px; } .hero .meta { color: var(--ink-55); font-size: 14px; } /* Today cards */ .today-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 26px 0 8px; } .tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; text-align: center; box-shadow: var(--shadow); } .tcard .name { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; } .tcard .time { font-size: 19px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; } .tcard.qada .time { color: var(--danger); font-size: 14px; font-style: italic; } .tcard.now { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13, 107, 78, 0.18), var(--shadow); } .facts { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 6px; font-size: 14px; color: var(--ink-70); } .facts b { color: var(--ink); } /* Section */ .section { padding: 30px 0; } .section h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; margin: 0 0 14px; } /* Monthly table */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } table.month { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); min-width: 560px; } table.month th, table.month td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--line); } table.month thead th { background: var(--surface-soft); color: var(--primary); font-weight: 600; position: sticky; top: 0; } table.month td.date { text-align: left; font-weight: 600; white-space: nowrap; } table.month td.date small { display: block; font-weight: 400; color: var(--ink-55); font-size: 12px; } table.month td { font-variant-numeric: tabular-nums; } table.month tr.fri { background: rgba(154, 115, 40, 0.08); } table.month tr.today { background: rgba(13, 107, 78, 0.10); outline: 2px solid var(--primary); outline-offset: -2px; } .qada { color: var(--danger); font-style: italic; font-weight: 600; } .legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } /* CTA band */ .cta { margin: 12px 0; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 18px; padding: 28px; color: #fff; text-align: center; } .cta h2 { color: #fff; margin: 0 0 8px; font-family: "Cormorant Garamond", Georgia, serif; } .cta p { margin: 0 0 16px; opacity: 0.92; } .cta .button-primary { background: #fff; color: var(--primary) !important; } .cta .button-primary:hover { background: #f0f0f0; } /* FAQ */ .faq details { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: var(--surface); } .faq summary { font-weight: 600; cursor: pointer; } .faq p { color: var(--ink-70); margin: 10px 0 0; } /* City index grid */ .city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .city-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); box-shadow: var(--shadow); } .city-card .c { font-weight: 600; } .city-card .k { font-size: 13px; color: var(--muted); } /* Footer */ .footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 26px 0; color: var(--muted); font-size: 14px; } .footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; } .footer a { color: var(--muted); margin-left: 16px; } .disclaimer { font-size: 12.5px; color: var(--ink-55); margin-top: 10px; } @media (max-width: 720px) { .today-grid { grid-template-columns: repeat(3, 1fr); } .hero { padding: 28px 0 4px; } } @media (max-width: 420px) { .today-grid { grid-template-columns: repeat(2, 1fr); } }