/* ═══════════════════════════════════════════════════════════════ Sanātana Dharma Codex — style.css v21 — Cool, young palette. Warm cream/terracotta retired site-wide. Base neutral: cool off-white / slate ink. Each section carries its own accent identity via [data-section]. ═══════════════════════════════════════════════════════════════ */ :root{ --bg: #F7F8FA; --bg2: #FFFFFF; --bg3: #EEF1F5; --bg4: #E3E8EF; --ink: #1E2430; --ink2: #3A4353; --ink3: #5B6577; --ink4: #8890A0; --ink5: #B0B7C3; --accent: #185FA5; --accent2: #124A81; --accent3: rgba(24,95,165,.08); --blue: #185FA5; --blue2: #124A81; --teal: #0F6E56; --green: #15803D; --amber: #6366F1; --saffron: var(--accent); --rule: #E1E5EC; --rule2: #EDF0F4; --shadow: 0 1px 3px rgba(30,36,48,.06); --shadow2: 0 4px 16px rgba(30,36,48,.10); --radius: 10px; --radius-lg: 14px; --nav-h: 58px; --tab-h: 46px; --max-w: 880px; } /* ── Per-section accent identity ────────────────────────────────── Every page carries data-section="slug" on . Overriding --accent/--accent2/--accent3 here cascades automatically through every existing var(--accent) usage site-wide — links, card borders, tab-bar active state, badges, canonical-def borders — with zero per-page markup changes needed. */ [data-section="texts"] {--accent:#4F46E5;--accent2:#3730A3;--accent3:rgba(79,70,229,.08);} [data-section="concepts"] {--accent:#0284C7;--accent2:#075985;--accent3:rgba(2,132,199,.08);} [data-section="darsanas"] {--accent:#7C3AED;--accent2:#5B21B6;--accent3:rgba(124,58,237,.08);} [data-section="deities"] {--accent:#C026D3;--accent2:#86198F;--accent3:rgba(192,38,211,.08);} [data-section="history"] {--accent:#334155;--accent2:#1E293B;--accent3:rgba(51,65,85,.08);} [data-section="mantras"] {--accent:#0F6E56;--accent2:#0A5744;--accent3:rgba(15,110,86,.08);} [data-section="sadhana"] {--accent:#059669;--accent2:#047857;--accent3:rgba(5,150,105,.08);} [data-section="practical-paths"]{--accent:#0369A1;--accent2:#0C4A6E;--accent3:rgba(3,105,161,.08);} [data-section="knowledge-systems"]{--accent:#0891B2;--accent2:#0E7490;--accent3:rgba(8,145,178,.08);} [data-section="kashmir-shaivism"]{--accent:#9333EA;--accent2:#6B21A8;--accent3:rgba(147,51,234,.08);} [data-section="life-framework"]{--accent:#16A34A;--accent2:#15803D;--accent3:rgba(22,163,74,.08);} [data-section="samskara"] {--accent:#6366F1;--accent2:#4338CA;--accent3:rgba(99,102,241,.08);} [data-section="devotional-traditions"]{--accent:#A21CAF;--accent2:#701A75;--accent3:rgba(162,28,175,.08);} [data-section="sacred-geography"]{--accent:#0D9488;--accent2:#0F766E;--accent3:rgba(13,148,136,.08);} [data-section="sacred-arts"] {--accent:#2563EB;--accent2:#1E3A8A;--accent3:rgba(37,99,235,.08);} [data-section="bhakti-saints"]{--accent:#7E22CE;--accent2:#581C87;--accent3:rgba(126,34,206,.08);} [data-section="sacred-sites"] {--accent:#0E9F6E;--accent2:#0B7A56;--accent3:rgba(14,159,110,.08);} [data-section="courses"] {--accent:#1D4ED8;--accent2:#172554;--accent3:rgba(29,78,216,.08);} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--tab-h) + 16px);} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; background:var(--bg);color:var(--ink2); font-size:16px;line-height:1.7;overflow-x:hidden; overflow-wrap:break-word;word-wrap:break-word; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block;} a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent2);} h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--ink);scroll-margin-top:calc(var(--nav-h) + var(--tab-h) + 16px);} strong{font-weight:600;color:var(--ink);} /* ── NAV ──────────────────────────────────────────────────────── */ /* Top strip — tiny bar, part of the page, scrolls away */ .topstrip{ display:flex;align-items:center;gap:8px; padding:6px 24px;background:var(--bg3); border-bottom:1px solid var(--rule2); font-size:11px; } .topstrip-back{color:var(--ink4);font-weight:500;letter-spacing:.01em;} .topstrip-back:hover{color:var(--accent);} .topstrip-sep{color:var(--ink5);opacity:.6;} .topstrip-ctx{color:var(--ink4);font-weight:500;} .topstrip-ctx:hover{color:var(--accent);} /* Main site nav — the website's own menu bar, scrolls away */ .sitenav{ display:flex;align-items:center;gap:14px; padding:14px 24px;background:var(--bg2); border-bottom:1px solid var(--rule); } .nav-logo{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .nav-logo em{font-style:normal;color:var(--accent);} .nav-link{font-size:13px;color:var(--ink3);padding:5px 11px;border-radius:6px;font-weight:500;} .nav-link:hover{color:var(--ink);background:var(--bg3);} .nav-links{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;} .hamburger{display:none;background:none;border:none;color:var(--ink3);font-size:20px;cursor:pointer;padding:8px;flex-direction:column;gap:4px;} .hamburger span{display:block;width:20px;height:2px;background:var(--ink3);border-radius:2px;} .mobile-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:260px;background:var(--bg2);z-index:200;padding:24px;border-left:1px solid var(--rule);box-shadow:var(--shadow2);} .mobile-drawer a{display:block;padding:10px 0;color:var(--ink2);font-size:15px;font-weight:500;border-bottom:1px solid var(--rule2);} .mobile-drawer a:hover{color:var(--accent);} .mobile-drawer .drawer-logo{font-weight:800;font-size:16px;color:var(--ink);margin-bottom:8px;border-bottom:2px solid var(--rule);} .mobile-drawer .drawer-back{margin-top:14px;color:var(--ink4);font-weight:500;border-bottom:none;} .drawer-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--ink3);font-size:22px;cursor:pointer;} .mobile-drawer.open{display:block;} /* ── BREADCRUMB ───────────────────────────────────────────────── */ .breadcrumb{ max-width:var(--max-w);margin:0 auto; padding:16px 24px 0; font-size:12px;color:var(--ink5); display:flex;align-items:center;gap:6px;flex-wrap:wrap; } .breadcrumb a{color:var(--ink4);} .breadcrumb a:hover{color:var(--accent);} .breadcrumb span{opacity:.5;} /* ── HUB HERO — gradient banner for section landing pages ─────── Applied via
wrapping the header content on each of the 18 section hub pages. Gradient colour is driven by --accent/--accent2, which already cascade per [data-section], so this needs no additional per-section CSS blocks. */ .hub-hero-wrap{max-width:var(--max-w);margin:0 auto;padding:24px 24px 8px;} .hub-hero{ background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%); border-radius:16px;padding:30px 28px;color:#fff; } .hub-hero .entry-label{color:rgba(255,255,255,.85);} .hub-hero .dv-title{color:rgba(255,255,255,.7);font-size:15px;margin-bottom:4px;} .hub-hero .page-title{color:#fff;font-size:clamp(26px,5vw,36px);font-weight:800;margin:2px 0 10px;letter-spacing:-.02em;} .hub-hero .page-deck{color:rgba(255,255,255,.88);font-size:15px;line-height:1.7;max-width:600px;} .hub-hero .page-deck strong{color:#fff;} /* ── PAGE HEADER ──────────────────────────────────────────────── */ .page-header{ max-width:var(--max-w);margin:0 auto; padding:20px 24px 24px; border-bottom:1px solid var(--rule); } .entry-label{ font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent);font-weight:700;margin-bottom:8px; } .page-badge{ display:inline-block;background:rgba(29,78,216,.08); border:1px solid rgba(29,78,216,.2);color:var(--blue); font-size:11px;padding:3px 10px;border-radius:12px; margin-bottom:8px;letter-spacing:.04em;font-weight:600; } .dv-title{font-size:17px;color:var(--ink5);margin-bottom:4px;} .page-title{ font-size:clamp(22px,4.5vw,36px);font-weight:800; color:var(--ink);line-height:1.2;margin-bottom:10px;letter-spacing:-.02em; } .page-deck{font-size:16px;color:var(--ink3);line-height:1.8;max-width:640px;} .page-deck strong{color:var(--ink2);} /* ── CANONICAL DEF ────────────────────────────────────────────── */ .canonical-def{max-width:var(--max-w);margin:0 auto;padding:0 24px;border-bottom:1px solid var(--rule);} .canonical-def-inner{ background:rgba(29,78,216,.04); border:1px solid rgba(29,78,216,.15); border-left:3px solid var(--blue); border-radius:var(--radius);padding:18px 20px;margin:20px 0; } cd-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:700;} .cd-text{font-size:15px;color:var(--ink2);line-height:1.75;margin-bottom:8px;} .cd-etym{font-size:13px;color:var(--ink4);padding-top:8px;border-top:1px solid var(--rule);line-height:1.6;} .one-sentence{ font-size:16px;color:var(--ink2);line-height:1.75; padding:14px 18px;background:rgba(29,78,216,.04); border-left:3px solid var(--blue);border-radius:var(--radius); margin:16px 24px;max-width:calc(var(--max-w) - 48px); } /* ── TAB BAR ──────────────────────────────────────────────────── */ .tab-bar{ position:sticky;top:var(--nav-h);z-index:90; background:rgba(247,248,250,.97);backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); } .tabs{ display:flex;max-width:var(--max-w);margin:0 auto; padding:0 24px;overflow-x:auto;scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none;} .tab-btn{ padding:0 16px;height:var(--tab-h);font-size:13px;font-weight:500; background:none;border:none;border-bottom:2px solid transparent; cursor:pointer;color:var(--ink4);transition:all .15s;white-space:nowrap;min-height:44px; } .tab-btn:hover{color:var(--ink);} .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);} /* ── CONTENT ──────────────────────────────────────────────────── */ .page-content{max-width:var(--max-w);margin:0 auto;padding:0 24px 80px;} .tab-panel{display:none;padding:32px 0;} .tab-panel.active{display:block;} .tab-panel p{margin-bottom:18px;line-height:1.8;color:var(--ink3);} .tab-panel h2{font-size:20px;font-weight:700;color:var(--ink);margin:36px 0 14px;letter-spacing:-.01em;} .tab-panel h2:first-child{margin-top:0;} .tab-panel h3{font-size:17px;font-weight:600;color:var(--ink2);margin:24px 0 10px;} .tab-panel ul,.tab-panel ol{padding-left:22px;margin-bottom:18px;} .tab-panel li{margin-bottom:8px;line-height:1.7;color:var(--ink3);} .skt,.iast{color:var(--accent);font-style:italic;} /* ── CALLOUTS ─────────────────────────────────────────────────── */ .callout{border-radius:var(--radius);padding:16px 18px;margin:22px 0;font-size:15px;line-height:1.75;} .callout strong{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-weight:700;opacity:.7;} .callout-amber{background:#EEF0FC;border-left:3px solid #6366F1;color:#312E81;} .callout-teal{background:#EEF5F2;border-left:3px solid var(--teal);color:#2E5249;} .callout-green{background:#EAF6F2;border-left:3px solid #0D9488;color:#134E4A;} .callout-blue{background:#EEF2F8;border-left:3px solid var(--blue);color:#2E456B;} .callout-red{background:#F3EEFB;border-left:3px solid #7C3AED;color:#4C1D95;} /* ── CARD GRID ────────────────────────────────────────────────── */ .card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;margin:16px 0; } .card{ background:var(--bg2);border:1px solid var(--rule); border-radius:var(--radius);padding:14px 16px; text-decoration:none;display:block; transition:border-color .15s, box-shadow .15s; } .card:hover{border-color:var(--accent);box-shadow:var(--shadow);} .card-dv{font-size:16px;color:var(--ink4);margin-bottom:4px;} .card-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;} .card-desc{font-size:13px;color:var(--ink4);line-height:1.5;} /* ── GUIDE ROW LIST (clarigital style) ───────────────────────── */ .guide-row{ display:flex;align-items:baseline;gap:14px; padding:14px 0;border-bottom:1px solid var(--rule); text-decoration:none; } .guide-row:hover .guide-row-title{color:var(--accent);} .guide-row-cat{ font-size:10px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--blue); background:rgba(29,78,216,.08);border:1px solid rgba(29,78,216,.15); padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0; } .guide-row-body{flex:1;} .guide-row-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:2px;display:block;} .guide-row-desc{font-size:13px;color:var(--ink4);line-height:1.5;} .guide-row-arrow{color:var(--ink5);font-size:14px;flex-shrink:0;} /* ── PILLS ────────────────────────────────────────────────────── */ .pills,.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;} .pill{ display:inline-flex;align-items:center; padding:6px 14px;min-height:36px; background:var(--bg2);border:1px solid var(--rule); border-radius:20px;font-size:13px;color:var(--ink3); transition:all .15s;text-decoration:none;font-weight:500; } .pill:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none;} /* ── RELATED ──────────────────────────────────────────────────── */ .related-section{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule);} .related-section h4{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);margin-bottom:12px;font-weight:600;} /* ── SECTION LAYOUT ───────────────────────────────────────────── */ .section{max-width:var(--max-w);margin:0 auto;padding:0 24px;} .section-header{display:flex;justify-content:space-between;align-items:baseline;margin:40px 0 14px;} .section-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em;} .section-link{font-size:13px;color:var(--accent);font-weight:500;} .section-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);font-weight:600;margin-bottom:8px;} /* ── SOURCES STRIP ────────────────────────────────────────────── */ .sources-strip{max-width:var(--max-w);margin:0 auto;padding:24px 24px 0;border-top:1px solid var(--rule);} .sources-strip h4{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);margin-bottom:12px;font-weight:600;} .sources-strip ol{padding-left:18px;} .sources-strip li{font-size:13px;color:var(--ink4);margin-bottom:7px;line-height:1.6;} .citation{font-size:11px;color:var(--ink5);vertical-align:super;} /* ── VERSE ────────────────────────────────────────────────────── */ .verse,.verse-block,.passage-block,.key-verse,.mahavakya,.mahavakya-block{ background:var(--bg3);border-left:3px solid var(--accent); border-radius:var(--radius);padding:16px 18px;margin:18px 0; } .v-ref,.kv-ref,.hb-ref,.pb-ref,.vb-lang,.fvb-label,.cd-label,.kv-dv{ font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:6px;font-weight:700; } .v-sk,.kv-iast,.iast-verse,.hb-verse,.vb-original,.kv-sk,.fvb-iast{ font-size:15px;font-style:italic;color:var(--ink);line-height:1.9;margin-bottom:5px; } .v-tr,.kv-tr,.verse-tr,.vb-trans,.fvb-tr{font-size:14px;color:var(--ink3);font-style:italic;margin-bottom:5px;} .v-note,.kv-note,.verse-src,.vb-note,.fvb-note{font-size:13px;color:var(--ink4);padding-top:8px;border-top:1px solid var(--rule);line-height:1.6;} .dv-verse,.fvb-dv{font-size:18px;color:var(--ink4);margin-bottom:4px;} .hymn-block{background:var(--bg3);border-radius:var(--radius);padding:16px 18px;margin:12px 0;border:1px solid var(--rule);} .hb-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px;} .hb-desc,.pb-note{font-size:13px;color:var(--ink4);margin-top:6px;} .final-verse-block{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;} /* ── PRINCIPLE LIST ───────────────────────────────────────────── */ .principle-list{display:flex;flex-direction:column;gap:8px;margin:16px 0;} .principle-item{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px;} .pi-num{font-size:13px;font-weight:700;color:var(--blue);min-width:28px;padding-top:1px;} .pi-content{font-size:14px;color:var(--ink3);line-height:1.7;} .pi-content strong{color:var(--ink);font-weight:600;} /* ── TEXT ROWS / DATA ROWS ────────────────────────────────────── */ .text-row,.tm-item,.v-row,.event{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:13px 16px;margin:8px 0;} .tr-name,.tm-label,.event-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:2px;} .tr-sk,.tr-label{font-size:13px;font-style:italic;color:var(--ink5);margin-bottom:5px;} .tr-body,.tm-value{font-size:14px;color:var(--ink3);line-height:1.65;} .tr-ref,.tr-def,.event-src{font-size:13px;color:var(--ink4);margin-top:4px;} .event-date{font-size:11px;color:var(--blue);font-weight:700;letter-spacing:.04em;margin-bottom:4px;} .event-desc{font-size:14px;color:var(--ink3);} /* ── TIMELINE ─────────────────────────────────────────────────── */ .era,.period-entry{background:var(--bg2);border-left:3px solid var(--blue);border-radius:var(--radius);padding:16px 18px;margin:12px 0;border:1px solid var(--rule);} .era-header{display:flex;gap:14px;align-items:baseline;margin-bottom:8px;} .era-date,.dates-badge{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.04em;} .era-name,.pc-title{font-size:16px;font-weight:700;color:var(--ink);} .era-events,.pc-desc{font-size:14px;color:var(--ink3);line-height:1.7;} /* ── STEPS / LIMBS ────────────────────────────────────────────── */ .step,.limb,.limb-row{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;margin:8px 0;} .step-num,.limb-num,.lr-num{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase;} .step-body,.limb-body,.lr-desc{font-size:14px;color:var(--ink3);line-height:1.7;} .limb-name,.lr-skt,.limb-sk{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px;} .limb-sub{font-size:13px;color:var(--ink5);font-style:italic;margin-bottom:6px;} /* ── CONCEPT BOX ──────────────────────────────────────────────── */ .concept-box{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;} .cb-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px;} .cb-sk{font-size:14px;font-style:italic;color:var(--ink4);margin-bottom:8px;} .cb-body{font-size:14px;color:var(--ink3);line-height:1.7;} /* ── CHAPTER NAV ──────────────────────────────────────────────── */ .chapter-nav{display:flex;align-items:center;gap:10px;background:var(--bg3);border-radius:var(--radius);padding:12px 16px;margin:20px 0;border:1px solid var(--rule);} .chapter-meta{display:flex;flex-direction:column;flex:1;} .chapter-num,.ch-num{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;} .cn-current,.ch-title{font-size:15px;font-weight:700;color:var(--ink);} .ch-subtitle,.ch-meta,.ch-why{font-size:13px;color:var(--ink4);} .next{font-size:13px;font-weight:600;color:var(--accent);} /* ── STATS / FACTS ────────────────────────────────────────────── */ .facts-bar,.key-facts{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0;padding:20px 24px;background:var(--bg2);border-radius:var(--radius);border:1px solid var(--rule);} .fv,.stat-num,.num,.lm-num,.lmi-n{font-size:26px;font-weight:800;color:var(--accent);line-height:1.1;} .fl,.stat-label,.lm-label,.lmi-l{font-size:10px;color:var(--ink5);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;} /* ── LEARNING PATH ────────────────────────────────────────────── */ .stage{max-width:var(--max-w);margin:0 auto;padding:12px 24px;} .stage-head{padding:28px 0 10px;border-top:1px solid var(--rule);} .stage:first-of-type .stage-head{border-top:none;} .stage-sk{font-size:14px;font-style:italic;color:var(--ink4);margin-bottom:2px;} .stage-title{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em;} .stage-blurb{font-size:14px;color:var(--ink3);line-height:1.75;max-width:580px;} .tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0;} .track{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;} .track-name{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--rule);} .lesson{display:block;padding:10px 0;border-bottom:1px solid var(--rule2);text-decoration:none;} .lesson:last-child{border-bottom:none;} .lesson-title{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px;} .lesson:hover .lesson-title{color:var(--accent);} .lesson-why{display:block;font-size:12px;color:var(--ink4);line-height:1.5;} .learn-hero,.learn-meta,.lm{max-width:var(--max-w);margin:0 auto;padding:28px 24px 20px;} .learn-hero h1{font-size:clamp(26px,5vw,40px);font-weight:800;color:var(--ink);margin:6px 0 12px;letter-spacing:-.02em;} .learn-hero p,.learn-meta p{font-size:16px;color:var(--ink3);line-height:1.8;max-width:600px;} .lm,.learn-meta{display:flex;gap:24px;flex-wrap:wrap;padding:16px 0;} .lmi,.learn-meta .lm-item{text-align:center;} .learn-guide,.guide-box{background:rgba(29,78,216,.05);border:1px solid rgba(29,78,216,.15);border-radius:var(--radius);padding:16px 18px;font-size:14px;color:var(--ink2);line-height:1.75;margin:16px 0;} .learn-guide strong,.guide-box strong{color:var(--blue);} .learn-end{max-width:var(--max-w);margin:0 auto;padding:20px 24px 50px;text-align:center;} /* ── COURSES ──────────────────────────────────────────────────── */ .courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;} .course-card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;text-decoration:none;display:block;transition:border-color .15s,box-shadow .15s;} .course-card:hover{border-color:var(--accent);box-shadow:var(--shadow);} .course-number{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;} .course-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;} .course-subtitle{font-size:14px;color:var(--ink3);} .course-meta{font-size:12px;color:var(--ink5);margin-top:10px;} .course-card-progress-bar{height:3px;background:var(--bg3);border-radius:2px;margin-top:10px;} .course-card-progress-fill{height:3px;background:var(--blue);border-radius:2px;} /* ── VARIOUS GRIDS ────────────────────────────────────────────── */ .deity-grid,.school-grid,.matha-grid,.arts-grid,.alvar-grid, .dosha-grid,.varna-grid,.avatar-grid,.kosa-grid,.rasa-grid, .practice-cards,.path-grid,.four-goals,.upaveda-cards,.framework-grid{ display:grid;gap:12px;margin:16px 0; } .deity-grid,.school-grid,.matha-grid,.dosha-grid,.varna-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));} .school-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} /* Generic card-like components */ .matha,.dcard,.p-card,.path-card,.goal-card,.school-card,.trad-card, .level-card,.art-card,.dev-card,.book-card,.kosa-card,.mv-card,.qual-card, .guna-card,.sch-card,.cc,.col-card,.aum-card,.uc-card,.festival-card, .tl-card,.cat-card,.deity-card,.fw-card,.comp-card,.saint-card, .reformer-card,.avatar-card,.period-card,.fp-card,.site-card,.sc-card{ background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px; } .saint-card{display:block;margin:14px 0;text-decoration:none;transition:border-color .15s;} .saint-card:hover{border-color:var(--accent);} .sc-desc{font-size:14px;color:var(--ink3);line-height:1.65;margin-bottom:8px;} .sc-link{font-size:13px;color:var(--accent);font-weight:600;} .trad-card,.period-card{display:block;margin:14px 0;text-decoration:none;transition:border-color .15s;} .trad-card:hover,.period-card:hover{border-color:var(--accent);} /* Generic name/title/desc pattern */ .m-name,.dc-name,.fc-name,.ac-name,.nk-name,.kc-name,.bk-name,.mv-dv, .school-name,.ln,.lt,.ld,.uc-dv,.gc-tag,.rc-name,.sc-name, .trad-card .tc-name,.period-card .pc-title{ font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px; } .m-loc,.ac-tm,.kc-desc,.bk-range,.mv-sch,.guna-eng,.fc-timing{ font-size:12px;color:var(--ink5);margin-bottom:6px; } .m-body,.ac-body,.kc-desc,.bk-desc,.guna-desc,.fc-body,.gc-desc,.sc-body{ font-size:14px;color:var(--ink3);line-height:1.65; } .ac-num,.ac-letter,.ac-state{font-size:11px;color:var(--blue);font-weight:700;letter-spacing:.06em;margin-bottom:4px;} .sc-dv,.dc-dv,.gc-dv,.mv-sk,.nk-sk,.rc-skt,.dv-title{font-size:16px;color:var(--ink4);margin-bottom:4px;} .sc-period,.dc-num,.rc-dates,.sc-meta{font-size:12px;color:var(--ink5);margin-bottom:8px;} .sc-tagline{font-size:14px;color:var(--ink3);font-style:italic;margin-bottom:8px;} /* Category/badge labels */ .site-badge,.deity-badge,.guide-badge,.samskara-badge,.text-badge, .ph-tag,.free-badge,.tattva-tag,.tag{ display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:2px 8px;border-radius:4px; background:rgba(29,78,216,.08);color:var(--blue); border:1px solid rgba(29,78,216,.15); } /* ── DARSANA NAV + TEXT NAV CONTAINERS ───────────────────────── */ .darsana-nav,.text-nav{ max-width:var(--max-w);margin:0 auto; padding:16px 24px 20px; border-bottom:1px solid var(--rule); } .darsana-nav h4,.text-nav h4{ font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink4);font-weight:700;margin:0 0 10px; } .darsana-pills,.text-pills{display:flex;flex-wrap:wrap;gap:8px;} .darsana-pill,.text-pill,.period-nav a,.text-nav a,.saint-nav a,.deity-nav a,.up-nav a, .sadhana-nav a,.ks-nav a,.samskara-nav a,.guide-nav a,.site-nav a, .snav-btn,.gn-btn,.dn-btn,.pn-btn,.kn-btn,.un-btn,.sn-btn{ display:inline-flex;align-items:center; padding:5px 12px;min-height:32px; background:var(--bg2);border:1px solid var(--rule); border-radius:20px;font-size:13px;color:var(--ink3); transition:all .15s;text-decoration:none;font-weight:500;cursor:pointer; } .darsana-pill:hover,.text-pill:hover,.period-nav a:hover,.saint-nav a:hover{background:var(--blue);color:#fff;border-color:var(--blue);} .darsana-pill.active,.text-pill.active{background:var(--accent3);border-color:var(--accent);color:var(--accent);font-weight:600;} /* ── TABLES ───────────────────────────────────────────────────── */ .data-table,.yuga-table,.pitha-table,.site-table,.school-table,.guna-table,.knowledge-table,.compare-table,.diff-table,.samskara-table{ width:100%;border-collapse:collapse;margin:16px 0;font-size:14px; } .data-table th,.yuga-table th,.pitha-table th,.school-table th,.guna-table th{ padding:10px 14px;text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase; background:var(--bg3);color:var(--ink4);border-bottom:2px solid var(--rule);font-weight:700; } .data-table td,.yuga-table td,.pitha-table td,.school-table td,.guna-table td{ padding:10px 14px;border-bottom:1px solid var(--rule);color:var(--ink3);vertical-align:top;line-height:1.6; } .data-table tr:hover td,.yuga-table tr:hover td{background:rgba(29,78,216,.03);} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} /* ── QUIZ ─────────────────────────────────────────────────────── */ .quiz-card,.q-card,.quiz-shell{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;} .q-text,.q-question,.q-body{font-size:16px;font-weight:600;color:var(--ink);margin:12px 0;} .q-opt{display:block;width:100%;padding:12px 16px;margin:8px 0;background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);text-align:left;font-size:14px;color:var(--ink2);cursor:pointer;transition:all .15s;} .q-opt:hover{border-color:var(--blue);background:rgba(29,78,216,.05);} .q-num,.q-number,.q-progress{font-size:12px;color:var(--ink5);font-weight:600;} .q-dot{width:8px;height:8px;border-radius:50%;background:var(--bg4);} .q-dot.active{background:var(--blue);} /* ── BUTTONS ──────────────────────────────────────────────────── */ .btn{ padding:10px 20px;background:var(--accent);border:none; border-radius:var(--radius);font-size:14px;color:#fff; cursor:pointer;font-weight:600;transition:background .15s; text-decoration:none;display:inline-block; } .btn:hover{background:var(--accent2);color:#fff;} .btn-secondary{background:var(--bg2);border:1px solid var(--rule);color:var(--ink2);} .btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--bg2);} /* ── VERIFIED / STATUS ────────────────────────────────────────── */ .verified-stamp{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green);background:#F0FDF4;border:1px solid #BBF7D0;border-radius:4px;padding:3px 8px;font-weight:600;} .provenance{font-size:13px;color:var(--ink5);} .coming-soon{opacity:.35;cursor:not-allowed;pointer-events:none;} /* ── HERO (homepage) ──────────────────────────────────────────── */ .hero{max-width:var(--max-w);margin:0 auto;padding:48px 24px 40px;} .hero-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px;} .hero-dv{font-size:20px;color:var(--ink4);margin-bottom:8px;} .hero-title{font-size:clamp(28px,5.5vw,50px);font-weight:800;color:var(--ink);line-height:1.1;margin-bottom:14px;letter-spacing:-.02em;} .hero-title em{font-style:normal;color:var(--accent);} .hero-deck{font-size:17px;color:var(--ink3);line-height:1.8;max-width:580px;margin-bottom:28px;} .hero-stats{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:32px;} .hero-stats .stat-num{font-size:28px;font-weight:800;color:var(--accent);} .hero-stats .stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink4);font-weight:600;} /* ── FOOTER ───────────────────────────────────────────────────── */ footer{background:var(--bg2);border-top:1px solid var(--rule);padding:40px 24px 28px;margin-top:60px;} .footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;} .footer-col h4{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);margin-bottom:12px;font-weight:700;} .footer-col ul{list-style:none;} .footer-col ul li{margin-bottom:8px;} .footer-col ul li a{font-size:13px;color:var(--ink3);} .footer-col ul li a:hover{color:var(--accent);} .footer-bottom{max-width:var(--max-w);margin:24px auto 0;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;} .footer-legal{display:flex;gap:18px;flex-wrap:wrap;} .footer-legal a{font-size:12px;color:var(--ink5);} .footer-legal a:hover{color:var(--accent);} .footer-brand,.footer-copy,.footer-disclaimer{font-size:12px;color:var(--ink5);} /* ── 404 ──────────────────────────────────────────────────────── */ .err-num{font-size:100px;font-weight:900;color:rgba(29,78,216,.1);line-height:1;} .err-sk{font-size:22px;color:var(--ink4);font-style:italic;margin-bottom:8px;} .err-title{font-size:clamp(20px,4vw,32px);font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:-.01em;} .err-body{font-size:15px;color:var(--ink3);line-height:1.8;max-width:420px;margin-bottom:32px;} .err-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .quick-links{max-width:460px;width:100%;} .ql-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink5);margin-bottom:12px;font-weight:600;} .ql-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;} .ql-item{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:11px 14px;font-size:13px;color:var(--ink3);transition:all .15s;text-decoration:none;} .ql-item:hover{border-color:var(--blue);color:var(--blue);} /* ── LEGAL PAGES ──────────────────────────────────────────────── */ .legal-body{max-width:var(--max-w);margin:0 auto;padding:28px 24px 80px;} .legal-body h1{font-size:clamp(26px,5vw,38px);font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em;} .legal-meta{font-size:12px;color:var(--ink5);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--rule);} .legal-body h2{font-size:18px;font-weight:700;color:var(--ink);margin:32px 0 10px;} .legal-body p{margin-bottom:14px;line-height:1.8;color:var(--ink3);} .legal-body ul,.legal-body ol{padding-left:20px;margin-bottom:14px;} .legal-body li{margin-bottom:7px;color:var(--ink3);line-height:1.7;} .notice{background:var(--bg3);border-left:3px solid var(--amber);border-radius:var(--radius);padding:16px 18px;margin:20px 0;font-size:14px;color:var(--ink2);line-height:1.8;} /* ── MISC COMPONENTS ──────────────────────────────────────────── */ .intro-text,.hub-body,.saints-body{font-size:16px;color:var(--ink3);line-height:1.8;} .saints-body{max-width:880px;margin:0 auto;padding:8px 24px 32px;} .mahavakya-block,.mahavakya{background:rgba(29,78,216,.04);border:1px solid rgba(29,78,216,.15);} .mv-iast,.mv-sk,.iast{font-style:italic;color:var(--ink);} .mv-tr,.mv-src{font-size:13px;color:var(--ink4);} .syllogism-box{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;margin:16px 0;} .sb-label,.sb-title{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;} .sb-body{font-size:14px;color:var(--ink3);line-height:1.7;} .pramana-card,.pramana-grid{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;} .pn{font-size:16px;font-weight:700;color:var(--ink);} .pt{font-size:13px;font-style:italic;color:var(--ink5);} .pd{font-size:14px;color:var(--ink3);line-height:1.65;} .tattva-row{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 16px;margin:8px 0;} .tattva-arrow{color:var(--ink5);font-size:12px;} .sattva{border-top:3px solid #8B5CF6;} .rajas{border-top:3px solid var(--accent);} .tamas{border-top:3px solid var(--ink4);} .vata{border-top:3px solid #60A5FA;} .pitta{border-top:3px solid #06B6D4;} .kapha{border-top:3px solid #34D399;} .advaita{border-top:3px solid #60A5FA;} .dvaita-advaita{border-top:3px solid #A78BFA;} .achintya{border-top:3px solid #34D399;} .suddha{border-top:3px solid #C084FC;} .comp-cols,.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .yoga,.ks,.advaita,.dvaita,.visishta,.vishist,.suddha,.achintya,.dvaita-advaita{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:14px;} .parvan-row{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 16px;margin:8px 0;} .parvan-num,.mandala-num,.kanda-num{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;} .kanda-name,.pn-name{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:2px;} .kanda-desc,.pn-desc,.mandala-desc{font-size:13px;color:var(--ink4);} .chariot-diagram,.cd-rows{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;} .cd-row{font-size:14px;color:var(--ink3);padding:8px 0;border-bottom:1px solid var(--rule);} .cd-row:last-child{border-bottom:none;} .cd-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;} .timeline-note,.dating-note{font-size:13px;color:var(--ink5);font-style:italic;padding:10px 0;} .facts-bar{background:rgba(29,78,216,.04);border:1px solid rgba(29,78,216,.1);} .five-pranas,.mantra-types,.eight-limbs,.three-gunas,.four-goals, .ninefold-list,.deepdive-cards,.six-cats,.eight-terms,.devotee-grid, .vibhuti-grid,.knowledge-list,.four-books,.four-states,.pranayama-grid, .limb-grid,.nine-rasas,.nakshatra-grid,.vedanga-list,.saptapadi-steps, .parts-grid,.steps,.ashrama-list,.section-grid,.upaveda-cards{ display:grid;gap:10px;margin:16px 0; } .nakshatra-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));} .dq-row{font-size:14px;color:var(--ink3);padding:10px 0;border-bottom:1px solid var(--rule);} .dq-ref{font-size:11px;color:var(--blue);font-weight:700;letter-spacing:.06em;} .ts-row{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:12px 16px;margin:8px 0;} .ts-label{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;} .ts-num{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:2px;} .ts-content{font-size:13px;color:var(--ink4);} .nk-sk,.nk-name,.nl-item,.nli-skt,.nli-en,.term-row,.rc-sk,.rc-bhava,.rc-desc{font-size:14px;color:var(--ink3);line-height:1.7;} .nk,.nk-num{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;} .va-label,.ar-label{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;} .va-content,.ar-content,.vl-skt,.vl-en,.ar-en,.ar-dv{font-size:14px;color:var(--ink3);line-height:1.7;} .vak-grid,.ashrama-list,.kanda-list,.mandala-grid,.parvan-grid{display:flex;flex-direction:column;gap:8px;} .om-symbol{font-size:40px;color:var(--ink4);text-align:center;padding:20px;} .four-quals,.school-cards,.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;} .course-card:hover{box-shadow:var(--shadow);} /* ── RESPONSIVE ───────────────────────────────────────────────── */ @media(max-width:768px){ .sitenav,.topstrip{padding-left:16px;padding-right:16px;} .sitenav .nav-links{display:none;} .sitenav .hamburger{display:flex;margin-left:auto;} .breadcrumb,.page-header,.page-content,.canonical-def,.darsana-nav,.text-nav,.sources-strip,.section,.stage,.learn-hero,.hero,.legal-body{padding-left:16px;padding-right:16px;} .tabs{padding:0 12px;} .tab-btn{padding:0 12px;font-size:12px;} .page-title{font-size:22px;} .hero-title{font-size:26px;} .card-grid{grid-template-columns:1fr;} .matha-grid,.dosha-grid,.school-trio,.four-quals,.comp-cols,.two-cols{grid-template-columns:1fr;} .footer-inner{grid-template-columns:1fr 1fr;} footer{padding:28px 16px 20px;} .footer-bottom{flex-direction:column;align-items:flex-start;} .data-table,.yuga-table,.pitha-table{font-size:12px;display:block;overflow-x:auto;} .tracks{grid-template-columns:1fr;} } @media(max-width:480px){ .footer-inner{grid-template-columns:1fr;} .page-header{padding:12px 16px 16px;} .hero-stats{gap:16px;} .ql-grid{grid-template-columns:1fr;} .school-trio,.nakshatra-grid{grid-template-columns:1fr;} } @media(max-width:375px){ body{font-size:15px;} .tab-btn{padding:0 8px;font-size:11px;} .page-title{font-size:20px;} .stage-title{font-size:18px;} } /* ── MISSING COMPONENT CSS (v12 audit fix) ────────────────────── */ /* text-meta — metadata bar (Period, Language, Date etc) on text/saint pages */ .text-meta{max-width:var(--max-w);margin:0 auto;padding:0 24px;border-bottom:1px solid var(--rule);} .text-meta-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:16px 0;} /* fact — child of .facts-bar, needs flex-column layout */ .fact{display:flex;flex-direction:column;} /* meta-item — inline key/value row inside .chapter-meta */ .meta-item{font-size:14px;color:var(--ink3);padding:3px 0;line-height:1.6;} .meta-item strong{color:var(--ink2);} /* parvan-row — needs flex so parvan-num and parvan-info sit side by side */ .parvan-row{display:flex;gap:14px;align-items:flex-start;} .parvan-info{flex:1;} /* mandala-row — Ṛg Veda mandala list: roman numeral + description */ .mandala-row{display:flex;gap:14px;align-items:flex-start; background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius); padding:12px 16px;margin:8px 0;} /* kanda-row — Rāmāyaṇa kāṇḍa list: number + name + description */ .kanda-row{display:flex;gap:14px;align-items:flex-start; background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius); padding:12px 16px;margin:8px 0;} /* time-row — cosmology time units: label + body */ .time-row{display:flex;gap:16px;align-items:flex-start; background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius); padding:12px 16px;margin:8px 0;} .tr-label{min-width:140px;font-size:13px;font-weight:700;color:var(--ink2);flex-shrink:0;} /* step-row — Saptapadī and ritual step lists: numbered step + content */ .step-row{display:flex;gap:14px;align-items:flex-start; background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius); padding:12px 16px;margin:8px 0;} .step-content{flex:1;font-size:14px;color:var(--ink3);line-height:1.7;} /* v-row — vibhūti grid rows: category + value two-column */ .v-row{display:flex;gap:0;align-items:stretch; background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius); margin:6px 0;overflow:hidden;} .v-cat{min-width:180px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink2); padding:10px 14px;background:var(--bg3);border-right:1px solid var(--rule);} .v-val{flex:1;font-size:14px;color:var(--ink3);padding:10px 14px;line-height:1.6;} /* event-body — timeline event content wrapper */ .event-body{flex:1;} /* stage-header — table section divider row */ .stage-header td{background:var(--bg3);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--ink4); padding:8px 14px;border-bottom:2px solid var(--rule);}