/* YANTRA — App Shell Shared chrome for every page: the sidebar/topbar layout frame, section rhythm, and the right-rail Ma calligraphy. Page-specific content (hero, room grid, timer, journal, ...) lives in css/pages/. */ /* ================= App Shell ================= */ .yantra-app { display: flex; min-height: 100dvh; background: var(--surface-0); } /* ================= User preferences (Settings page) ================= Applied via data-yantra-theme/-font and .yantra-reduce-motion on by js/app.js, read from the real yantra_settings_prefs key. Full effect on pages that read the shared surface/color tokens directly (Home, Shoonya, every /features/ page); pages with their own page-scoped palette (Vajra's forge tokens, Annapurna's rasa tokens, Smriti's smriti tokens, Tarang's tar tokens) apply it more partially, since those bypass this semantic layer themselves. Only the 8 sacred colors are used below — no new hex. */ :root[data-yantra-theme="sepia"] { --surface-0: var(--color-cream); --surface-1: color-mix(in srgb, var(--color-stone) 35%, var(--color-cream)); --surface-2: var(--color-stone); } :root[data-yantra-theme="dark"] { --surface-0: var(--color-ink); --surface-1: color-mix(in srgb, var(--color-ink) 85%, var(--color-warm-gray)); --surface-2: color-mix(in srgb, var(--color-ink) 65%, var(--color-warm-gray)); --text-primary: var(--color-paper); --text-muted: var(--color-stone); --border-subtle: color-mix(in srgb, var(--color-warm-gray) 35%, var(--color-ink)); --border-strong: var(--color-warm-gray); } :root[data-yantra-font="small"] { font-size: 93.75%; } :root[data-yantra-font="large"] { font-size: 112.5%; } .yantra-reduce-motion *, .yantra-reduce-motion *::before, .yantra-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .yantra-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 56px; /* clears the mobile topbar */ } /* ---------- Mobile topbar ---------- */ .yantra-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-sm); height: 56px; padding-inline: var(--space-md); background: var(--surface-1); border-bottom: 1px solid var(--border-subtle); } .yantra-topbar__menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: var(--text-lg); color: var(--text-primary); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-paper); } .yantra-topbar__menu:hover { background: var(--surface-2); } .yantra-topbar__mark { font-family: var(--font-serif); font-size: var(--text-md); letter-spacing: var(--tracking-wide); color: var(--text-primary); } @media (min-width: 1024px) { .yantra-topbar { display: none; } .yantra-main { padding-top: 0; } } /* ================= Section Rhythm ================= */ .yantra-section { padding: var(--space-xl) var(--space-lg); } .yantra-section__header { margin-bottom: var(--space-lg); } .yantra-section__title { font-family: var(--font-serif); font-size: var(--text-xl); letter-spacing: var(--tracking-wide); color: var(--text-primary); } .yantra-section__subtitle { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--text-muted); } @media (min-width: 640px) { .yantra-section { padding: var(--space-2xl) var(--space-xl); } } /* ================= Section Nav (sticky pill tabs) ================= */ .yantra-room-nav { position: sticky; top: 0; z-index: var(--z-raised); display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); overflow-x: auto; background: var(--surface-0); border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; } .yantra-room-nav::-webkit-scrollbar { display: none; } .yantra-room-nav__link { flex-shrink: 0; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); border: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-paper), border-color var(--duration-fast) var(--ease-paper), color var(--duration-fast) var(--ease-paper); } .yantra-room-nav__link:hover { border-color: var(--border-strong); color: var(--text-primary); } .yantra-room-nav__link--active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } /* ================= Right Rail — Ma ================= */ .yantra-rail { display: none; } @media (min-width: 1280px) { .yantra-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); width: 84px; padding-block: var(--space-2xl); border-left: 1px solid var(--border-subtle); background: var(--surface-1); } /* text-orientation: mixed (not upright) — Devanagari has no upright glyph forms, so "upright" broke conjuncts/matras into disconnected pieces. "mixed" lets the browser shape the script normally and rotate the whole run 90°, which keeps it correct in this vertical rail. */ .yantra-rail__glyph { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-serif); font-size: var(--text-2xl); letter-spacing: var(--tracking-widest); color: var(--color-gold); } .yantra-rail__label { writing-mode: vertical-rl; text-orientation: mixed; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); } } /* ================= Hero Scene (shared photo-placeholder banner) ================= Every pillar dashboard opens with one of these: a placeholder gradient standing in for a real photograph, a page-header row (flow pill, notifications, avatar) across the top, and room for page-specific overlay content. Pages override sizing (aspect-ratio/max-height) and the placeholder gradient tint themselves; the shell here is generic. */ .yantra-hero-scene { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface-0); } .yantra-hero-scene__placeholder { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 45% at 78% 15%, rgba(185, 145, 73, 0.4) 0%, rgba(185, 145, 73, 0) 60%), linear-gradient(180deg, var(--color-cream) 0%, var(--color-paper) 55%, rgba(185, 145, 73, 0.14) 100%); } .yantra-hero-scene__mountains { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .yantra-hero-scene__mountains path { transition: opacity var(--duration-slow) var(--ease-paper); } /* These are CSS/SVG scenic stand-ins for real photographs — no image asset was available, so the mood is approximated with the same line-art language as the pillar icons. */ .yantra-hero-scene__placeholder-tag { position: absolute; bottom: var(--space-md); right: var(--space-md); z-index: 1; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border: 1px dashed var(--border-strong); border-radius: var(--radius-full); background: rgba(247, 243, 235, 0.6); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); white-space: nowrap; } .yantra-hero-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(247, 243, 235, 0) 45%, rgba(247, 243, 235, 0.92) 100% ); } .yantra-hero-scene__overlay { position: relative; z-index: 2; padding: var(--space-lg); color: var(--text-primary); } .yantra-hero-scene__quote { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); max-width: 32ch; } .yantra-hero-scene__quote p { font-family: var(--font-serif); font-style: italic; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); max-width: none; } .yantra-hero-scene__quote cite { display: block; margin-top: var(--space-xs); font-style: normal; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); } @media (min-width: 640px) { .yantra-hero-scene__overlay { padding: var(--space-2xl); } } /* ---------- Page header row (inside hero, top) ---------- */ .yantra-page-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0; } .yantra-page-header__flow { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-md); border-radius: var(--radius-full); background: rgba(247, 243, 235, 0.75); border: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-primary); white-space: nowrap; } .yantra-page-header__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(247, 243, 235, 0.75); border: 1px solid var(--border-subtle); color: var(--text-primary); position: relative; } .yantra-page-header__icon-btn svg { width: 18px; height: 18px; } .yantra-page-header__dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-vermillion); border: 1.5px solid var(--color-paper); } .yantra-page-header__avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-forest); color: var(--color-paper); font-family: var(--font-serif); font-size: var(--text-sm); border: 1px solid rgba(247, 243, 235, 0.75); } /* ---------- Small percentage ring + pill CTA ---------- */ /* Parameterized by --pillar-color and --value (0-100) — used on Home's pillar cards and reused wherever a compact progress ring is needed (e.g. Smriti's progress card). */ .yantra-card__ring-row { display: flex; justify-content: center; margin: var(--space-sm) 0; } .yantra-card__ring { --value: 0; --size: 56px; width: var(--size); height: var(--size); border-radius: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--pillar-color, var(--color-forest)) calc(var(--value) * 1%), var(--surface-2) 0); } .yantra-card__ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-1); } .yantra-card__ring-value { position: relative; z-index: 1; font-family: var(--font-serif); font-size: var(--text-xs); color: var(--text-primary); } .yantra-card__cta { display: inline-block; margin-top: var(--space-sm); padding: 6px var(--space-lg); border-radius: var(--radius-full); background: var(--pillar-color, var(--color-forest)); color: var(--color-paper); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-normal); } /* Hero-scene overlay modifier: center-bottom content instead of Home's left-aligned greeting flow. Used by any page whose hero banner holds only a short caption/quote (Shoonya, Vajra, ...). */ .yantra-hero-scene__overlay--center { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-xl); }