/* Angira Jyotish — mobile presentation layer for the website. * The mobile experience is the same premium editorial system as desktop, * recomposed for a narrow viewport — not an app shell. (2026-09-01: the * bottom tab bar and standalone launch mode were removed site-wide; the * owner's ruling is that both products stay websites, not apps.) * Desktop is untouched: every visual change lives inside the media query. * !important on the mobile overrides is deliberate: page stylesheets * (home.min.css / pages.min.css) are linked AFTER this partial in , * so equal-specificity rules there would otherwise win. */ /* Hero core-tool card is part of the mobile presentation layer only; it stays display:none above 768px so the desktop hero is pixel-identical. */ .aj-hero-toolcard { display: none; } /* The hero instrument's decorative chips intentionally bleed past the viewport edge at every width; unclipped, that bleed is a horizontal scrollbar on desktop and a sideways wobble on mobile. Clipping at all widths only removes the scroll — it changes no layout or visual. */ html, body { overflow-x: clip; } @media (max-width: 768px) { /* Tighter, higher-contrast hero so the first screen reads like an app home instead of an editorial spread. */ .hero h1 { font-size: clamp(1.9rem, 7.6vw, 2.5rem) !important; line-height: 1.12 !important; } .hero-lead { font-size: 1rem !important; color: var(--stone, #70665c) !important; } /* First-screen route to the daily Almanac, styled as an editorial feature card — the same border/shadow language as the site's other bordered blocks (see .lineage-copy blockquote in home.css), a serif display heading, no arrow chip, no compact flex row. Same link, same destination; only the presentation changed from app-tile to website card. Minimal markup lives in index.php (.hero-copy, after .hero-actions); colours/fonts reuse the house palette via CSS vars. */ .aj-hero-toolcard { display: block; margin-top: 24px; padding: 22px 24px; border: 1px solid rgba(160, 112, 48, .28); border-left: 3px solid var(--vermilion, #b94a2f); background: rgba(255, 253, 248, .92); box-shadow: 0 10px 26px rgba(61, 45, 29, .08); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease; } .aj-hero-toolcard:active { box-shadow: 0 6px 16px rgba(61, 45, 29, .1); } .aj-hero-toolcard__body { display: block; } .aj-hero-toolcard__eyebrow { display: block; margin-bottom: 8px; color: var(--vermilion, #b94a2f); font-family: var(--data, Consolas, "Courier New", monospace); font-size: .68rem; font-weight: 700; letter-spacing: .16em; } .aj-hero-toolcard__title { display: block; margin-bottom: 6px; color: var(--basalt, #171918); font-family: var(--display, "Iowan Old Style", "Palatino Linotype", serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; } .aj-hero-toolcard__desc { display: block; color: var(--stone, #70665c); font-size: .85rem; line-height: 1.5; } /* The arrow chip was the clearest app-tile tell — drop it. Markup is out of scope for this pass, so it stays in index.php but is hidden. */ .aj-hero-toolcard__arrow { display: none; } } /* ≤380px: the chronometer's edge time chips (.btrc-chip on candidates a/c) extend past the dial and clip at the viewport edge. Scaling the instrument optically is the least invasive fix — layout, tap targets and the reveal animation all keep working. The reveal variants carry the same scale so nothing jumps when the hero fades/slides in. !important because home.min.css is linked after this file. */ @media (max-width: 380px) { .hero-instrument.btrc { transform: scale(.9) !important; } .js-ready .hero-instrument.btrc[data-reveal] { transform: translateY(24px) scale(.9) !important; } .js-ready .hero-instrument.btrc[data-reveal].is-visible { transform: translateY(0) scale(.9) !important; } }