/* * Pushtimarg Satsang, redesigned 2026-07-23 around one idea: the words matter, * the chrome does not. White page, near-black ink, hairline rules, a single * orange accent (#ff9340, the app's real default accent, see CLAUDE.md), and * the system font stack, which also gives Gujarati its native script rendering * on every platform. No external font, framework or CDN: the strict CSP * forbids anything else, and `style-src 'self'` means an inline style="" * attribute is silently DROPPED, not errored. Everything visual lives here. * * Light is the default, deliberately. There is no prefers-color-scheme media * query anywhere in this file: dark mode applies only when the visitor turns * it on with the header toggle, which sets data-theme="dark" on * (theme.js, remembered in localStorage). */ :root { --bg: #ffffff; --bg-soft: #f7f5f2; --ink: #1c1917; --muted: #78716c; --line: #e8e4df; --accent: #ff9340; /* The accent darkened until it holds 4.5:1 on white, for text and icons. Raw #ff9340 is a fill colour only: as text on white it is unreadable. */ --accent-ink: #a14e0b; /* The observance category's mark (Krishna, 2026-07-23: purple). */ --observance: #8b5cf6; color-scheme: light; } :root[data-theme="dark"] { --bg: #171412; --bg-soft: #201d1a; --ink: #f0ebe6; --muted: #a49c94; --line: #2e2a26; --accent: #ff9340; --accent-ink: #ffb070; --observance: #a78bfa; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Gujarati", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; display: flex; min-height: 100vh; flex-direction: column; /* A single long unbreakable title or Gujarati compound breaks rather than forcing a horizontal scroll on a narrow phone. */ overflow-wrap: break-word; } .shell { width: 100%; max-width: 60rem; margin-inline: auto; /* max() with the safe-area insets: the head declares viewport-fit=cover, so in landscape on a notched iphone the notch / rounded corner would otherwise clip the header and the left edge of content. The clamp is the normal padding; the inset only ever widens it. */ padding-left: max(clamp(1.25rem, 4vw, 2rem), env(safe-area-inset-left)); padding-right: max(clamp(1.25rem, 4vw, 2rem), env(safe-area-inset-right)); } main.shell { flex: 1; padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem); } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin: 0 0 0.5em; } h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); font-weight: 700; } h2 { font-size: 1.25rem; font-weight: 650; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 0.15s ease; } a:hover { color: var(--accent-ink); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: #1c1917; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; z-index: 10; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; gap: 1.25rem; min-height: 3.5rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.95rem; text-decoration: none; white-space: nowrap; } .brand img { width: 26px; height: 26px; border-radius: 6px; } .site-nav { display: flex; gap: 1.1rem; margin-left: auto; } .site-nav a { text-decoration: none; font-size: 0.9rem; color: var(--muted); /* Enlarge the hit area toward the ~44px touch guidance; the header height alone does not grow a text link's tappable box. */ display: inline-block; padding-block: 0.6rem; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } .header-tools { display: flex; align-items: center; gap: 0.75rem; } .language-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .language-switch a { padding: 0.15rem 0.65rem; font-size: 0.78rem; text-decoration: none; color: var(--muted); } .language-switch a[aria-current="true"] { background: var(--ink); color: var(--bg); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; } .theme-toggle:hover { color: var(--ink); } .theme-toggle[hidden] { display: none; } /* Light shows the moon (the mode a press switches to), dark shows the sun. */ .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } /* --------------------------------------------------------- install banner */ .install-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem clamp(1.25rem, 4vw, 2rem); border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: 0.85rem; } .install-banner[hidden] { display: none; } .install-banner img { width: 34px; height: 34px; border-radius: 8px; } .install-copy { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .install-copy span { color: var(--muted); font-size: 0.78rem; } .install-banner > a { margin-left: auto; text-decoration: none; font-weight: 600; color: var(--accent-ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.9rem; white-space: nowrap; } .banner-close { border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0.3rem; cursor: pointer; } /* ------------------------------------------------------------------ home */ .hero { padding-block: clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem); max-width: 44rem; } .hero img { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 1.5rem; } .eyebrow { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9em; } .lead { font-size: 1.1rem; color: var(--muted); max-width: 36rem; } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .btn { display: inline-block; text-decoration: none; font-size: 0.92rem; font-weight: 600; border-radius: 999px; padding: 0.55rem 1.35rem; transition: opacity 0.15s ease; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { color: var(--bg); opacity: 0.85; } .btn-quiet { border: 1px solid var(--line); color: var(--ink); } .stats-line { margin-top: 2rem; font-size: 0.85rem; color: var(--muted); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: clamp(2rem, 5vw, 3rem) 0 0.75rem; } .section-head h2 { margin: 0; } /* -------------------------------------------------------------- list rows */ /* One pattern for every list on the site: quiet rows divided by hairlines. Categories, kirtans and utsav days all use it, which is most of why the site reads as one thing. */ .row-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .row-list li { border-bottom: 1px solid var(--line); } .row-list a, .row-list .row-plain { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.8rem 0.15rem; text-decoration: none; } .row-list a:hover .row-title { color: var(--accent-ink); } .row-title { min-width: 0; transition: color 0.15s ease; } .row-meta { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .row-chevron { margin-left: auto; color: var(--line); font-size: 1rem; line-height: 1; } .row-list a:hover .row-chevron { color: var(--accent-ink); } /* Two columns of rows on wider screens. */ @media (min-width: 44rem) { .row-list.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; border-top: 0; } .row-list.two-col li:nth-child(-n+2) { border-top: 1px solid var(--line); } } /* ---------------------------------------------------------------- library */ .page-head { max-width: 44rem; } .back-link { display: inline-block; font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-bottom: 1.25rem; } .back-link:hover { color: var(--ink); } .search-field { display: block; margin: 1.5rem 0 0.4rem; } /* An author `display` beats the UA's [hidden] rule, so every hidden-able element with its own display needs this re-assertion or `hidden` silently does nothing (same trap as .install-banner[hidden] below). Without it the utsav search box, meant to be invisible until utsav-search.js wires it up, sat visible and dead on every no-JS visit. */ .search-field[hidden] { display: none; } .search-field input { width: 100%; max-width: 26rem; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1.1rem; } .search-field input::placeholder { color: var(--muted); } .search-field input:focus { outline: none; border-color: var(--accent-ink); } .library-count { font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; } .library-empty { padding: 2.5rem 0; color: var(--muted); } .library-empty h2 { color: var(--ink); } /* ------------------------------------------------------------ kirtan page */ .kirtan-article { max-width: 42rem; } .kirtan-article header { margin-bottom: 2rem; } .kirtan-meta { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0; } /* The player, pinned to the bottom of the screen like the app's mini player so it stays in reach while reading. body.has-player reserves the space it covers; the safe-area inset keeps it clear of the iPhone home indicator. */ .player-bar { position: fixed; inset: auto 0 0 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); padding-block: 0.6rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); } .player-bar audio { width: 100%; max-width: 42rem; height: 2.5rem; display: block; } /* Reserve the player-bar height PLUS the home-indicator inset. The bar insets its own bottom padding, but the space reserved here was flat, so the last ~21px of the footer sat behind the bar on notched iPhones. */ body.has-player { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } .note { font-size: 0.82rem; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 0.75rem; margin: 0 0 1rem; } .lyrics { font-size: 1.05rem; line-height: 1.9; } .lyrics p { margin: 0 0 0.4em; } .lyrics-empty { color: var(--muted); } /* ------------------------------------------------------------ utsav pages */ .utsav-month { margin: 2.25rem 0 0.4rem; font-size: 0.95rem; } /* The Calendar/List view switch, same pill as the language switch. */ .list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 0.75rem; } .list-tools .search-field { margin: 0; flex: 1; min-width: 12rem; } .list-tools .search-field input { max-width: 18rem; } .view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .view-switch a { padding: 0.25rem 1rem; font-size: 0.82rem; text-decoration: none; color: var(--muted); } .view-switch a[aria-current="true"] { background: var(--ink); color: var(--bg); } /* The month grids, the app's table_calendar view redrawn in the site's idiom: no cell borders, just numbers, with the category dots under event days. Tapping a marked day opens its observances in the .cal-events panel below the grid (utsav-calendar.js); without JavaScript the same tap lands on the list view anchored at that day. */ .year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 1.5rem 3rem; align-items: start; } /* utsav-search.js hides the grids while a query is active; without this the `hidden` it sets loses to the display:grid above and the twelve month cards render alongside the search results. */ .year-grid[hidden] { display: none; } .month-card .utsav-month { margin-top: 1rem; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; max-width: 21rem; margin: 0.5rem 0 1.25rem; } .cal-dow { text-align: center; font-size: 0.62rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-block: 0.3rem; } .cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: none; border-radius: 8px; } a.cal-day { color: var(--ink); font-weight: 600; background: var(--bg-soft); } a.cal-day:hover { background: var(--line); color: var(--ink); } a.cal-day.is-selected { background: var(--ink); color: var(--bg); } .cal-day.is-today { outline: 1.5px solid var(--accent); outline-offset: -1.5px; } .cal-dots { display: flex; gap: 3px; height: 5px; } .cal-dots .dot { width: 5px; height: 5px; } /* Landing spot for a tapped calendar day. The scroll margin keeps the row clear of the sticky header. */ .row-list li { scroll-margin-top: 4.5rem; } .row-list li:target { background: var(--bg-soft); } .dot { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 999px; } /* Ekadashi takes the accent, utsavs take ink, observances take purple. */ .dot-ekadashi { background: var(--accent); } .dot-utsav { background: var(--ink); } .dot-observance { background: var(--observance); } .utsav-day { flex: none; width: 1.7rem; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; color: var(--muted); margin: 1.25rem 0 0.75rem; } .legend span { display: inline-flex; align-items: center; gap: 0.45rem; } .chip { display: inline-block; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.7rem; margin-bottom: 1rem; } .prose { max-width: 42rem; } .prose h2 { margin-top: 2.25rem; } .prose ul { margin: 0 0 1em; padding-left: 1.15em; } .prose li { margin: 0 0 0.4em; } .prose code { font-size: 0.85em; background: var(--bg-soft); border-radius: 4px; padding: 0.1em 0.4em; /* The package name is a 38-char unbreakable token; let it wrap rather than overflow the measure at 320px or under browser zoom. */ overflow-wrap: anywhere; } .legal-page .kirtan-meta { margin-bottom: 1.5rem; } .legal-crosslink { margin-top: 2.5rem; } /* -------------------------------------------------------------- app strip */ .app-section { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .app-section img { width: 52px; height: 52px; border-radius: 12px; } .app-section .app-copy { flex: 1; min-width: 14rem; } .app-section h2 { margin: 0 0 0.2em; font-size: 1.05rem; } .app-section p { margin: 0; font-size: 0.88rem; color: var(--muted); } .app-section .actions { margin: 0; } /* ------------------------------------------------------------------- 404 */ .status-page { max-width: 34rem; padding-block: clamp(2rem, 8vw, 5rem); } /* ---------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--line); padding-block: 1.5rem; font-size: 0.85rem; color: var(--muted); } .footer-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem; } .footer-brand { display: flex; flex-direction: column; } .footer-brand strong { color: var(--ink); font-size: 0.9rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer-nav a { text-decoration: none; color: var(--muted); } .footer-nav a:hover { color: var(--ink); } .footer-note { margin-left: auto; } @media (max-width: 40rem) { /* The full header row (brand text, two nav links, language switch, theme toggle) is wider than a phone, and it does not wrap, so without this the WHOLE page gained a horizontal scroll. Icon-only brand keeps it on one line; the wordmark is in the hero and the footer anyway. */ .brand span { display: none; } .header-row { gap: 0.9rem; } .site-nav { gap: 0.9rem; } .footer-note { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }