:root { --green-950: #082d24; --green-900: #0b3d31; --green-800: #105444; --green-100: #dceee7; --gold-500: #c49a35; --gold-300: #e8cf83; --cream: #faf7ef; --paper: #fffdf7; --ink: #17211d; --muted: #66736e; --line: #e5dfd0; --line-strong: #d6cdb8; --radius: 8px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --shadow: 0 18px 50px rgba(8, 45, 36, 0.1); color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: linear-gradient(180deg, rgba(8, 45, 36, 0.08), transparent 340px), var(--cream); color: var(--ink); font-size: 16px; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(196, 154, 53, 0.45); outline-offset: 2px; } .site-shell { min-height: 100vh; } .site-header { background: linear-gradient(135deg, rgba(8, 45, 36, 0.97), rgba(16, 84, 68, 0.96)), var(--green-900); color: white; padding: 12px clamp(16px, 4vw, 48px); position: sticky; top: 0; z-index: 20; box-shadow: 0 10px 30px rgba(8, 45, 36, 0.16); } .topbar { align-items: center; display: grid; gap: var(--space-4); grid-template-columns: minmax(220px, 1fr) auto auto; margin: 0 auto; max-width: 1168px; min-height: 48px; } .brand { align-items: center; display: inline-flex; gap: var(--space-3); min-width: 0; } .brand-mark { align-items: center; background: linear-gradient(145deg, var(--gold-300), var(--gold-500)); border-radius: 8px; color: var(--green-950); display: inline-flex; font-weight: 800; height: 40px; justify-content: center; width: 40px; } .brand strong, .brand small { display: block; } .brand small { color: rgba(255, 255, 255, 0.68); font-size: 12px; margin-top: 1px; } .nav-links { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; display: flex; padding: 4px; white-space: nowrap; } .nav-links a { border-radius: 999px; color: rgba(255, 255, 255, 0.76); padding: 8px 14px; transition: background-color 160ms ease, color 160ms ease; } .nav-links a.active { background: var(--paper); color: var(--green-900); } .daily-strip { margin: 0 auto var(--space-4); max-width: 1168px; } .compact-daily { background: rgba(255, 253, 247, 0.78); border: 1px solid rgba(196, 154, 53, 0.18); border-radius: 8px; box-shadow: 0 10px 30px rgba(8, 45, 36, 0.06); color: var(--muted); padding: 9px 12px; } .compact-daily .eyebrow { margin-bottom: 4px; } .compact-daily p { display: -webkit-box; font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; margin: 0; overflow: hidden; } .eyebrow { color: var(--gold-500); font-size: 12px; font-weight: 800; letter-spacing: 0; margin: 0 0 8px; text-transform: uppercase; } .daily-text { font-size: 15px; line-height: 1.55; margin: 0; } .daily-ref { color: var(--green-800); font-size: 13px; font-weight: 800; margin: 10px 0 0; } main { margin: 0 auto; max-width: 1248px; padding: var(--space-5) clamp(16px, 4vw, 48px) var(--space-6); } /* Ad containers stay hidden until real ad units are added. Add class "ads-on" to when AdSense code goes live. */ body:not(.ads-on) .ad-slot { display: none; } .ad-slot { align-items: center; background: repeating-linear-gradient( -45deg, rgba(196, 154, 53, 0.08), rgba(196, 154, 53, 0.08) 8px, rgba(8, 45, 36, 0.04) 8px, rgba(8, 45, 36, 0.04) 16px ); border: 1px dashed rgba(8, 45, 36, 0.2); border-radius: 8px; color: rgba(102, 115, 110, 0.8); display: flex; font-size: 12px; font-weight: 800; justify-content: center; text-transform: uppercase; } .ad-wide { min-height: 84px; } .ad-rect { min-height: 260px; } .ad-inline { margin: var(--space-4) 0; min-height: 84px; } .bottom-ad { margin-top: var(--space-5); } .page-hero { align-items: end; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(280px, auto); min-height: 148px; padding: var(--space-6) 0 var(--space-5); } h1, h2 { color: var(--green-950); line-height: 1.1; margin: 0; } h1 { font-size: clamp(32px, 4.2vw, 48px); letter-spacing: 0; } h2 { font-size: 22px; } .hero-copy { color: var(--muted); line-height: 1.55; margin: var(--space-3) 0 0; max-width: 720px; } .hero-actions, .location-form { align-items: end; display: flex; gap: var(--space-3); } .icon-button, .text-button { border: 0; cursor: pointer; } .icon-button { background: var(--green-900); border-radius: 8px; color: white; font-size: 28px; height: 44px; line-height: 1; width: 44px; transition: transform 160ms ease, background-color 160ms ease; } .icon-button:hover, .text-button:hover { background: var(--green-800); } .icon-button:active, .text-button:active { transform: translateY(1px); } .text-button { align-items: center; background: var(--green-900); border-radius: 8px; color: white; display: inline-flex; font-weight: 800; justify-content: center; min-height: 44px; padding: 0 var(--space-4); transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease; } .secondary-button { background: transparent; border: 1px solid rgba(8, 45, 36, 0.22); color: var(--green-900); min-width: 132px; } .secondary-button:hover { background: rgba(220, 238, 231, 0.72); border-color: rgba(8, 45, 36, 0.32); color: var(--green-950); } .full-width { width: 100%; } .location-form label { color: var(--muted); display: grid; font-size: 12px; font-weight: 800; gap: 6px; text-transform: uppercase; } .place-search > label { color: var(--muted); display: block; font-size: 12px; font-weight: 800; margin-bottom: 6px; text-transform: uppercase; } .location-form input, .place-search-box input { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 44px; padding: 0 12px; width: 160px; } .place-search-form { align-items: end; justify-self: end; min-width: min(100%, 600px); } .place-search { flex: 1 1 360px; position: relative; } .place-search-box { align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(8, 45, 36, 0.08); display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; } .place-search-box input { border: 0; border-radius: 0; font-size: 15px; min-width: 0; width: 100%; } .place-search-box input:focus { outline: 2px solid rgba(196, 154, 53, 0.38); outline-offset: -2px; } .place-search-box .text-button { border-radius: 0; height: 44px; min-width: 92px; } .place-results { background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 38px rgba(8, 45, 36, 0.14); display: none; left: 0; max-height: 280px; overflow: auto; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; } .place-results.open { display: block; } .place-result { align-items: start; background: white; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; display: grid; gap: 3px; padding: 11px 13px; text-align: left; width: 100%; } .place-result:hover { background: rgba(220, 238, 231, 0.72); } .place-result strong { color: var(--green-950); } .place-result span, .place-result.empty { color: var(--muted); font-size: 13px; font-weight: 600; } .content-grid, .tool-layout { align-items: start; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(280px, 312px); } .tool-main { display: grid; gap: var(--space-5); min-width: 0; } .tool-aside { display: grid; gap: var(--space-4); position: sticky; top: 88px; } .primary-panel, .info-panel, .next-prayer-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); } .primary-panel { padding: var(--space-4); } .calendar-board, .prayer-board { margin: 0 auto; min-width: 0; width: min(100%, 920px); } .calendar-board { overflow: hidden; } .prayer-board { padding: clamp(18px, 3vw, 28px); } .below-board { margin: 0 auto; width: min(100%, 920px); } .info-panel, .next-prayer-panel { padding: 18px; } .side-stack { display: grid; gap: 18px; } .weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; } .weekday-row { color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: var(--space-2); padding: 0 var(--space-2); text-align: center; text-transform: uppercase; } .calendar-grid { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .day-cell { background: white; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; min-height: 104px; padding: var(--space-3); position: relative; } .day-cell:nth-child(7n) { border-right: 0; } .day-cell:nth-last-child(-n + 7) { border-bottom: 0; } .day-cell.muted { background: rgba(250, 247, 239, 0.72); color: var(--muted); } .day-cell.today { background: var(--green-900); color: white; outline: 3px solid var(--gold-500); outline-offset: -3px; z-index: 1; } .day-cell.today .hijri-day, .day-cell.today .gregorian-day { color: white; } .day-cell.event { background: linear-gradient(180deg, rgba(232, 207, 131, 0.22), white 70%); } .hijri-day { color: var(--green-950); font-size: 23px; font-weight: 800; } .gregorian-day { color: var(--muted); font-size: 12px; margin-top: 3px; } .event-pill { background: rgba(196, 154, 53, 0.16); border: 1px solid rgba(196, 154, 53, 0.34); border-radius: 999px; color: #6e5211; display: inline-block; font-size: 11px; font-weight: 800; margin-top: var(--space-3); max-width: 100%; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; } .event-list, .prayer-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); } .event-row, .prayer-row { align-items: center; background: white; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 12px; justify-content: space-between; padding: var(--space-3) var(--space-4); } .prayer-list { gap: 0; margin-top: var(--space-5); } .prayer-row { border-left: 0; border-radius: 0; border-right: 0; border-top: 0; min-height: 60px; padding: 14px var(--space-5); } .prayer-row:first-child { border-top: 1px solid var(--line); } .event-row strong, .prayer-row strong { color: var(--green-950); } .event-row span, .prayer-row span { color: var(--muted); font-size: 13px; } .next-prayer-panel { background: radial-gradient(circle at 100% 0%, rgba(232, 207, 131, 0.18), transparent 34%), linear-gradient(135deg, var(--green-900), var(--green-800)); color: white; display: grid; min-height: 156px; place-content: center; text-align: center; } .next-prayer-panel h2 { color: white; font-size: clamp(30px, 4vw, 42px); } .next-prayer-panel p:last-child { color: rgba(255, 255, 255, 0.76); margin-bottom: 0; } .location-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: var(--space-4) 0 0; } .prayer-row.current { background: rgba(220, 238, 231, 0.9); border-color: rgba(16, 84, 68, 0.25); box-shadow: inset 4px 0 0 var(--gold-500); } .current-dot { animation: slowBlink 2.2s ease-in-out infinite; background: var(--gold-500); border-radius: 999px; display: inline-block; height: 8px; margin-left: 8px; width: 8px; } .site-footer { color: var(--muted); font-size: 13px; margin: 0 auto; max-width: 1240px; padding: 0 clamp(16px, 4vw, 48px) 34px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; } .site-footer a, .legal-page a { color: var(--green-800); font-weight: 800; } .seo-content { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); margin-top: var(--space-5); padding: clamp(20px, 3vw, 32px); } .seo-content h2, .seo-content h3, .legal-page h1, .legal-page h2 { color: var(--green-950); } .seo-content h2, .legal-page h1 { font-size: clamp(28px, 4vw, 42px); } .seo-content h3, .legal-page h2 { font-size: 20px; margin: 24px 0 8px; } .seo-content p, .legal-page p { color: var(--muted); line-height: 1.65; max-width: 860px; } .simple-header { align-items: center; background: var(--green-900); color: white; display: flex; gap: 18px; justify-content: space-between; padding: var(--space-4) clamp(16px, 4vw, 48px); } .simple-header .nav-links { flex: 0 0 auto; } .legal-page { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); margin: 28px auto; max-width: 960px; padding: clamp(22px, 4vw, 42px); } @keyframes slowBlink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media (max-width: 900px) { .topbar, .daily-strip, .page-hero, .content-grid, .tool-layout { grid-template-columns: 1fr; } .nav-links { justify-self: start; } .hero-actions, .location-form, .simple-header { flex-wrap: wrap; } .page-hero { align-items: start; min-height: 0; } .place-search-form { justify-self: stretch; min-width: 0; } .tool-aside { position: static; } .location-form input { width: min(42vw, 220px); } .ad-rect { min-height: 160px; } } @media (max-width: 620px) { .site-header { padding-top: 14px; } .brand small { display: none; } .nav-links { width: 100%; } .topbar { gap: var(--space-3); } .nav-links a { flex: 1; text-align: center; } .location-form { display: grid; grid-template-columns: 1fr; width: 100%; } .location-form input, .location-form button, .place-search { width: 100%; } .place-search-box { grid-template-columns: 1fr; } .place-search-box .text-button { border-radius: 0; width: 100%; } .day-cell { min-height: 84px; padding: var(--space-2); } .hijri-day { font-size: 20px; } .event-pill { border-radius: 6px; white-space: normal; } }