/* My Sādhana Today — the landing page. ──────────────────────────────────────────────────────────────────────────────────────────── The theme tokens are the app's own, from src/style.css, so the site and the app are one palette rather than two that nearly match. Dark is the default (:root) because dark is the app's default; light is an override on [data-theme="light"], set by the inline script in and by the toggle. Do not retune a value here on its own. If one moves, it moves in the app first and this file follows — the whole point is that a visitor who downloads the app recognises the screen. Three tokens are this file's own, and each says why beside it: --accent (both themes), --accent-ink, and --shadow-ink. They are the ones the app has not needed yet, and the accent pair is the only place the site's colour is not the app's byte for byte. */ :root { color-scheme: dark; --bg: #14131C; --surface: #1D1B29; --surface-2: #262436; --border: #322F45; --text: #ECE9F5; --muted: #9A95B5; /* The app's violet is #7C5CFF, and on this page it would be text: a link in the prose and the label of the one filled button. It lands at 4.31:1 as a link on --bg and 4.35:1 under white ink — both a whisker under 4.5:1, and a mid-tone violet cannot be rescued by choosing a better ink, because it is equally far from black and from white. So the hue is kept exactly and the value is moved: this tint clears 6.2:1 as a link and 7.0:1 with the page's own ground as ink on top of it. The same pass belongs in the app, and when it lands there this file should follow it rather than the other way round. */ --accent: #9A80FF; --accent-ink: #14131C; /* text on an --accent fill; a violet this light needs a dark ink */ --good: #54D18C; --warn: #F0A23B; --bad: #E8597A; /* Card and toast shadows. Tokenised because the colour is not the same on both grounds: over near-white a neutral black shadow greys the paper, so light uses the ink at a low alpha. The app draws no shadows at all — it is a window, not a page — so this pair is the landing's own. */ --shadow-ink: rgba(0, 0, 0, .45); --radius: 14px; /* One face, the system sans, everywhere. Unlike the two sister sites there is no serif here: the kit's wordmark is a bold condensed sans beside a script "my", and setting the headings in a Palatino would put a third voice on a page that already has two. Headings are separated by size and weight instead. */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --topbar-h: 60px; --page: 1120px; /* content column; the bands are centred inside it */ } [data-theme="light"] { color-scheme: light; --bg: #F5F3FB; --surface: #FFFFFF; --surface-2: #F0EDF8; --border: #E2DEF0; --text: #1C1A28; --muted: #6C6685; /* The app leaves --accent alone in light mode, so #7C5CFF lands on near-white at 3.97:1 as a link. Same hue, taken deep enough to clear it: 6.1:1 on --bg, 5.8:1 on a card, and 6.7:1 for white ink inside a primary button. */ --accent: #5B3FD6; --accent-ink: #FFFFFF; --good: #1F7A4C; --warn: #8A5200; --bad: #B3213F; --shadow-ink: rgba(28, 26, 40, .12); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* Anchored sections must not slide under the sticky bar. */ :target, section[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Theme-aware scrollbars (the default track is white, which glares in dark mode). */ * { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border: 3px solid var(--bg); border-radius: 8px; } a { color: var(--accent); } a:hover { text-decoration: none; } h1, h2, h3 { line-height: 1.25; } img { max-width: 100%; } /* Visually hidden but readable by assistive tech. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* Keyboard focus, once, in one place — every control below inherits it. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ── The brand ───────────────────────────────────────── */ /* Artwork in both slots, which is where this page parts from its two sister sites. Their wordmarks are plain letterforms with tracking and are set as live HTML text; this one is a script "my" beside a bold condensed "SĀDHANA TODAY" with a drawn macron, and no font stack reproduces it. So the kit's own cuts are used: the horizontal strip in the bar, the stacked lockup with the mālā above it in the hero. Both are one flat ink on a transparent ground — #455E75 for paper, #FFF4E2 for night — so the theme swap below is not decoration, it is the only thing keeping the mark visible. */ .brand { display: flex; align-items: center; text-decoration: none; } .brand-dark { display: block; } .brand-light { display: none; } [data-theme="light"] .brand-dark { display: none; } [data-theme="light"] .brand-light { display: block; } /* The strip is ~8.4:1 — always size it by width and let the height follow. */ .brand-word { width: 168px; height: auto; } /* The stacked lockup is ~0.92:1 and already carries the wordmark under the mālā, so it needs no text beside it and the hero copy below simply ranges left under it. */ .brand-lockup { width: 168px; height: auto; } /* ── Top bar ─────────────────────────────────────────── */ #topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 max(16px, calc((100% - var(--page)) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* `color-mix` is recent enough to want a floor: an opaque bar is a fine outcome without it. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { #topbar { background: var(--bg); } } .topnav { display: flex; gap: 4px; margin-left: auto; } .topnav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; } .topnav a:hover { background: var(--surface-2); color: var(--text); } .topbar-controls { display: flex; align-items: center; gap: 8px; } /* ── The language picker ─────────────────────────────── */ .lang { position: relative; } /* Flag only when closed, which is why this is a hand-built listbox and not a