/* ===================================================================== Salaada.com — design tokens and components. Designed for four viewing conditions, which drive every value here: 1. A phone outdoors in daylight → high contrast, >=44px tap targets 2. A TV read from 15+ metres → .tv-* scale, no weight below 600 3. A volunteer on a laptop → plain labels, visible focus rings 4. Arabic beside Latin script → logical properties, [dir=rtl] safe ===================================================================== */ :root { --brand-primary: #0F766E; --brand-secondary: #16A34A; --brand-accent: #D4AF37; --brand-bg: #F8FAFC; --brand-dark: #0F172A; --ink: #0F172A; --ink-muted: #475569; --ink-subtle: #64748B; --surface: #FFFFFF; --border: #E2E8F0; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 6px 20px -6px rgba(15, 23, 42, .12); --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .28); --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-dis: 'Poppins', var(--font-ui); --font-ar: 'Noto Sans Arabic', var(--font-ui); } /* --------------------------------------------------------------------- Dark theme. Almost everything below is a token swap: .card, .prayer-card, .btn-ghost, .empty-state and body all read --surface / --border / --ink, so they follow without being restated. Only the rules that hardcoded a colour need an override, and each one is listed here rather than scattered. The class is set on by an inline script in every page head, before first paint, so there is no flash of the wrong theme. `color-scheme` is set alongside it so form controls, scrollbars and the browser's own UI match. Not themed on purpose: .tv-* the display screen is always dark — it is a TV in a prayer hall, and a white screen at Fajr is unusable. .hero-* the hero is brand-coloured in both themes. --------------------------------------------------------------------- */ .dark { --ink: #E2E8F0; --ink-muted: #94A3B8; --ink-subtle: #94A3B8; --surface: #0F172A; --border: #1E293B; --brand-bg: #020617; /* Shadows do almost nothing on a dark ground; depth comes from the borders instead, so these are dialled back rather than removed. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75); } .dark .btn-ghost:hover { background: #1E293B; } .dark .field { background: #0B1220; border-color: #334155; color: var(--ink); } .dark .field::placeholder { color: #64748B; } .dark .field[aria-invalid="true"] { border-color: #F87171; background: #2A1215; } .dark .field-error { color: #FCA5A5; } .dark .prayer-card[data-state="active"] { background: linear-gradient(180deg, #0B2E2A 0%, var(--surface) 60%); box-shadow: 0 0 0 3px rgba(20, 184, 166, .22), var(--shadow-md); } .dark .badge-next { background: #422006; color: #FCD34D; } .dark .badge-active { background: #0B3B36; color: #5EEAD4; } .dark .skeleton { background: linear-gradient(90deg, #1E293B 25%, #334155 37%, #1E293B 63%); background-size: 400% 100%; } .dark .pattern-field { background-image: linear-gradient(45deg, rgba(45,212,191,.045) 25%, transparent 25%, transparent 75%, rgba(45,212,191,.045) 75%), linear-gradient(45deg, rgba(45,212,191,.045) 25%, transparent 25%, transparent 75%, rgba(45,212,191,.045) 75%); } /* The theme toggle itself. Sized to the same 44px target as .btn. */ .theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; font-size: 1.05rem; line-height: 1; } .theme-toggle:hover { background: #f1f5f9; } .dark .theme-toggle:hover { background: #1E293B; } /* Only one of the two glyphs is ever shown. */ .theme-toggle .icon-dark { display: none; } .dark .theme-toggle .icon-light { display: none; } .dark .theme-toggle .icon-dark { display: inline; } @media print { /* Ink on white, whatever the reader had on screen. */ .dark { --surface: #fff; --ink: #0F172A; --border: #94A3B8; --brand-bg: #fff; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--brand-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: var(--font-dis); letter-spacing: -0.02em; } :lang(ar), [dir="rtl"] { font-family: var(--font-ar); } /* Visible focus for keyboard users — a volunteer tabbing through a form must always be able to see where they are. */ :focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--brand-primary); color: #fff; padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { inset-inline-start: 0; } /* --------------------------------------------------------------------- Geometry — an eight-point Islamic star, used at low opacity only. Purely decorative, so it is aria-hidden wherever it appears. --------------------------------------------------------------------- */ .pattern-field { background-image: linear-gradient(45deg, rgba(15,118,110,.05) 25%, transparent 25%, transparent 75%, rgba(15,118,110,.05) 75%), linear-gradient(45deg, rgba(15,118,110,.05) 25%, transparent 25%, transparent 75%, rgba(15,118,110,.05) 75%); background-size: 48px 48px; background-position: 0 0, 24px 24px; } .hero-gradient { background: radial-gradient(1100px 520px at 78% -12%, rgba(212,175,55,.20), transparent 60%), radial-gradient(900px 460px at 8% 8%, rgba(22,163,74,.20), transparent 62%), linear-gradient(160deg, #0B4F49 0%, var(--brand-primary) 42%, #0A6058 100%); } /* --------------------------------------------------------------------- Cards, buttons, forms --------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; /* thumb target, outdoors, one-handed */ padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .975rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { background: #0d655e; } .btn-accent { background: var(--brand-accent); color: #3b2f05; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { background: #f1f5f9; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .field-label { display: block; font-weight: 600; font-size: .85rem; color: var(--ink-muted); margin-bottom: .35rem; } .field { width: 100%; min-height: 44px; padding: .6rem .85rem; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: .975rem; } .field:focus { border-color: var(--brand-primary); outline-offset: 0; } .field[aria-invalid="true"] { border-color: #DC2626; background: #FEF2F2; } .field-error { color: #B91C1C; font-size: .82rem; margin-top: .3rem; display: block; } /* --------------------------------------------------------------------- Prayer cards --------------------------------------------------------------------- */ .prayer-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.15rem 1.15rem 1.25rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .prayer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .prayer-card[data-state="active"] { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(15,118,110,.14), var(--shadow-md); background: linear-gradient(180deg, #F0FDF9 0%, #FFFFFF 60%); } .prayer-card[data-state="next"] { border-color: var(--brand-accent); } .prayer-card[data-state="past"] { opacity: .62; } .prayer-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .prayer-ar { font-family: var(--font-ar); color: var(--ink-subtle); font-size: .95rem; } .prayer-time { font-family: var(--font-dis); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.5rem); font-variant-numeric: tabular-nums; /* digits must not jitter each tick */ line-height: 1.05; letter-spacing: -.03em; } .prayer-iqamah { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-primary); } .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .22rem .6rem; border-radius: 999px; } .badge-next { background: #FEF3C7; color: #92400E; } .badge-active { background: #CCFBF1; color: #115E59; } /* --------------------------------------------------------------------- TV / display screen — read from 15+ metres. Everything scales from viewport width so it fills any panel size. --------------------------------------------------------------------- */ .tv { background: var(--brand-dark); color: #fff; } .tv-label { font-size: clamp(1rem, 2.1vw, 2rem); letter-spacing: .32em; text-transform: uppercase; color: #94A3B8; font-weight: 600; } .tv-prayer { font-size: clamp(2.6rem, 8vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .tv-count { font-size: clamp(3.4rem, 15vw, 15rem); font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .tv-cell { font-size: clamp(1.05rem, 2.4vw, 2.3rem); font-weight: 600; font-variant-numeric: tabular-nums; } .tv-cell-lg { font-size: clamp(1.4rem, 3.1vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; } .tv-tile { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; } .tv-tile[data-state="active"] { background: rgba(212,175,55,.17); border-color: rgba(212,175,55,.55); } .marquee { overflow: hidden; white-space: nowrap; } .marquee > span { display: inline-block; padding-inline-start: 100%; animation: marquee 32s linear infinite; } @keyframes marquee { to { transform: translateX(-100%); } } [dir="rtl"] .marquee > span { animation-name: marquee-rtl; } @keyframes marquee-rtl { to { transform: translateX(100%); } } /* --------------------------------------------------------------------- States --------------------------------------------------------------------- */ .skeleton { background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 37%, #E2E8F0 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 8px; color: transparent !important; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .empty-state { text-align: center; padding: 3rem 1.25rem; color: var(--ink-subtle); } .toast { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 80; max-width: min(92vw, 24rem); padding: .9rem 1.1rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); color: #fff; font-weight: 500; animation: toast-in .22s ease; } .toast-success { background: #15803D; } .toast-error { background: #B91C1C; } .toast-info { background: var(--brand-dark); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } } /* Respect users who ask for less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .marquee > span { animation: none; padding-inline-start: 0; } } @media print { .no-print { display: none !important; } body { background: #fff; } .card, .prayer-card { box-shadow: none; border-color: #94A3B8; } }