/* ============================================================ JYOTISH SHIKHO (Learn) — page styles + language switching. app.js sets ; we show only that language. Before app.js runs (no data-lang) → English shows (good default + SEO). ============================================================ */ .lg { display: none; } body:not([data-lang]) .lg-en, body[data-lang="en"] .lg-en { display: revert; } body[data-lang="hi"] .lg-hi { display: revert; } body[data-lang="gu"] .lg-gu { display: revert; } .learn-main { max-width: 860px; margin: 0 auto; padding: 12px 20px 48px; } /* Hero */ .learn-hero { text-align: center; margin: 10px 0 26px; } .learn-sanskrit { font-family: 'Tiro Devanagari Hindi', serif; color: var(--vermillion, #c1272d); font-size: 1rem; margin: 0 0 6px; } .learn-title { font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: 2rem; font-weight: 700; color: var(--ink, #2a2140); margin: 0 0 6px; } .learn-sub { color: var(--ink-soft, #6b6480); font-size: 0.98rem; margin: 0; } /* Lessons grid */ .learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .learn-card { display: block; text-decoration: none; background: rgba(255, 253, 247, 0.8); border: 1px solid rgba(138, 109, 46, 0.2); border-radius: 16px; padding: 20px; transition: transform 0.15s ease, box-shadow 0.2s ease; } .learn-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(30, 12, 60, 0.14); } .learn-card-icon { font-size: 2rem; line-height: 1; margin-bottom: 8px; } .learn-card-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brass-deep, #8a6d2e); background: rgba(200, 164, 92, 0.15); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .learn-card-title { font-family: var(--font-display, serif); font-size: 1.25rem; font-weight: 700; color: var(--ink, #2a2140); margin: 0 0 6px; line-height: 1.25; } .learn-card-desc { font-size: 0.9rem; color: var(--ink-soft, #6b6480); line-height: 1.5; margin: 0 0 10px; } .learn-card-cta { font-weight: 700; color: var(--vermillion, #c1272d); font-size: 0.9rem; } /* Breadcrumb */ .learn-crumb { font-size: 0.84rem; color: var(--ink-soft, #6b6480); margin: 4px 0 16px; } .learn-crumb a { color: var(--vermillion, #c1272d); text-decoration: none; } .learn-crumb a:hover { text-decoration: underline; } /* Lesson article */ .lesson-article { background: rgba(255, 253, 247, 0.82); border: 1px solid rgba(138, 109, 46, 0.2); border-radius: 18px; padding: 26px 26px 20px; } .lesson-icon { font-size: 2.4rem; line-height: 1; } .lesson-title { font-family: var(--font-display, serif); font-size: 2rem; font-weight: 700; color: var(--ink, #2a2140); margin: 6px 0 16px; line-height: 1.2; } .lesson-body { color: var(--ink, #2a2140); line-height: 1.75; font-size: 1rem; } .lesson-body h2 { font-family: var(--font-display, serif); font-size: 1.4rem; font-weight: 700; color: var(--brass-deep, #8a6d2e); margin: 22px 0 8px; } .lesson-body p { margin: 0 0 12px; } .lesson-body ul { margin: 0 0 14px; padding-left: 22px; } .lesson-body li { margin-bottom: 6px; } .lesson-body strong { color: var(--ink, #2a2140); } .lesson-cta { margin: 22px 0 4px; padding: 14px 18px; border-radius: 12px; background: rgba(155, 92, 255, 0.09); border: 1px solid rgba(155, 92, 255, 0.25); font-size: 0.98rem; font-weight: 600; text-align: center; color: var(--ink, #2a2140); } .lesson-cta a { color: var(--vermillion, #c1272d); text-decoration: none; } .lesson-cta a:hover { text-decoration: underline; } .lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; } .lesson-nav a { font-size: 0.88rem; font-weight: 600; color: var(--vermillion, #c1272d); text-decoration: none; max-width: 46%; } .lesson-nav-next { text-align: right; } .lesson-nav a:hover { text-decoration: underline; } /* More lessons */ .learn-more { margin-top: 30px; } .learn-more-h { font-family: var(--font-display, serif); font-size: 1.4rem; font-weight: 700; color: var(--ink, #2a2140); margin: 0 0 12px; text-align: center; } .learn-more-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .learn-more-item { display: block; text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--ink, #2a2140); padding: 12px 14px; border-radius: 10px; background: rgba(200, 164, 92, 0.08); border: 1px solid rgba(138, 109, 46, 0.16); } .learn-more-item:hover { background: rgba(200, 164, 92, 0.16); } @media (max-width: 680px) { .learn-more-list { grid-template-columns: 1fr; } .learn-title, .lesson-title { font-size: 1.55rem; } /* ---------- app-like mobile look ---------- */ body.has-appnav .site-header { position: sticky; top: 0; z-index: 800; background: rgba(253, 249, 240, 0.94); backdrop-filter: blur(10px); box-shadow: 0 2px 14px rgba(30, 12, 60, 0.08); } .learn-main { padding: 10px 14px 30px; } .learn-hero { margin: 4px 0 14px; } .learn-sanskrit { font-size: 0.9rem; margin-bottom: 2px; } .learn-sub { font-size: 0.86rem; } /* Lesson list → app-style rows with a big icon tile */ .learn-grid { grid-template-columns: 1fr; gap: 10px; } .learn-card { display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 16px; box-shadow: 0 3px 12px rgba(30, 12, 60, 0.06); } .learn-card:active { transform: scale(0.985); } .learn-card-icon { grid-row: 1 / span 3; font-size: 1.7rem; width: 56px; height: 56px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(135deg, rgba(155, 92, 255, 0.14), rgba(200, 164, 92, 0.2)); border: 1px solid rgba(155, 92, 255, 0.18); } .learn-card-cat { margin-bottom: 2px; font-size: 0.66rem; padding: 2px 8px; } .learn-card-title { font-size: 1.05rem; margin-bottom: 2px; } .learn-card-desc { font-size: 0.82rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .learn-card-cta { display: none; } /* Lesson page reads like an app article */ .lesson-article { border-radius: 16px; padding: 18px 16px 14px; } .lesson-icon { font-size: 2rem; } .lesson-body { font-size: 0.98rem; } .lesson-body h2 { font-size: 1.2rem; } .learn-crumb { font-size: 0.78rem; } .lesson-nav { gap: 8px; } .lesson-nav a { font-size: 0.82rem; } /* room for the fixed bottom bar */ body.has-appnav { padding-bottom: 78px; } } @media (prefers-color-scheme: dark) { .learn-card, .lesson-article { background: rgba(30, 22, 50, 0.55); } .learn-more-item { background: rgba(255, 255, 255, 0.04); } }