/* ============================================================ HINDU DEITIES KNOWLEDGE UNIVERSE — PREMIUM DESIGN SYSTEM v2 Rebuilt 2026-08-21 to match the Shri Ganesh Knowledge Portal reference look (Master Prompt Reference C): dark plum header, serif+gold hero, overlapping virtue strip, sidebar + numbered white accordion rows. All v1 class hooks preserved. ============================================================ */ :root{ /* Neutrals */ --bg:#f3f4f8; --card:#ffffff; --ink:#1d2440; --navy:#26335e; --muted:#69718a; --line:#e7eaf2; /* Brand */ --plum-900:#170d26; --plum-800:#221336; --plum-700:#2c1a44; --purple:#6d3bbf; --purple2:#8a55e0; --gold:#e9bd6a; --gold-deep:#c9973d; --orange:#e0532f; --soft:#fff1e8; --soft2:#f3edff; /* Deity accent — overridden per page on */ --deity-accent:var(--purple); --deity-accent2:var(--purple2); --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --shadow-card:0 6px 22px rgba(24,17,46,.07); --shadow-pop:0 22px 48px rgba(24,17,46,.16); --font-devanagari:"Noto Sans Devanagari","Noto Serif Devanagari",system-ui,sans-serif; --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari","Noto Sans",sans-serif; --font-serif:Georgia,"Noto Serif Devanagari","Times New Roman",serif; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-ui);line-height:1.6;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } :focus{outline:none} :focus-visible{outline:3px solid var(--deity-accent);outline-offset:2px;border-radius:4px} .container{max-width:1200px;margin:0 auto;padding:0 20px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100} .skip-link:focus{left:0} /* ---------- Site header ---------- */ .site-header{ position:sticky;top:0;z-index:40; background:rgba(23,13,38,.96); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.07); color:#fff; } .site-header .bar{display:flex;align-items:center;gap:18px;padding:10px 20px;max-width:1200px;margin:0 auto} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-serif);font-weight:700;font-size:16px;letter-spacing:.02em;color:#f4ecdf} .brand .brand-mark{ width:42px;height:42px;flex:none;border-radius:50%; background:radial-gradient(circle at 32% 28%,#f6dfae,var(--gold) 55%,var(--gold-deep)); display:grid;place-items:center;color:#3a2205;font-size:21px; box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.5); } .brand small{display:block;font-family:var(--font-ui);font-weight:600;letter-spacing:.14em;font-size:9.5px;color:#c7b3e2;text-transform:uppercase} .main-nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto} .main-nav a{padding:9px 13px;border-radius:10px;font-size:13.5px;font-weight:600;color:#ece4f8;opacity:.88} .main-nav a:hover,.main-nav a:focus-visible{opacity:1;background:rgba(255,255,255,.10)} .main-nav a[aria-current="page"]{opacity:1;background:rgba(255,255,255,.16)} .site-header .bar::after{ content:"ॐ"; width:40px;height:40px;flex:none;border-radius:50%; background:radial-gradient(circle at 32% 28%,#f6dfae,var(--gold) 55%,var(--gold-deep)); color:#3a2205;font-size:19px;display:grid;place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.35); } .nav-toggle{display:none;background:rgba(255,255,255,.1);border:0;color:#fff;width:40px;height:40px;border-radius:10px} @media (max-width:920px){ .main-nav{position:absolute;top:100%;left:0;right:0;background:#241535;flex-direction:column;padding:8px;display:none;margin-left:0} .main-nav.open{display:flex} .nav-toggle{display:grid;place-items:center;margin-left:auto} .site-header .bar::after{display:none} } /* ---------- Hero ---------- */ .hero{ position:relative;overflow:hidden;color:#fff; background:linear-gradient(135deg,var(--plum-900),var(--plum-700) 60%,#3d2358); padding:58px 0 76px; } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(600px 300px at 85% 10%,rgba(233,189,106,.10),transparent 60%), radial-gradient(500px 380px at 10% 90%,rgba(138,85,224,.14),transparent 65%); } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;position:relative} .hero h1{ font-family:var(--font-serif); font-size:clamp(40px,5.6vw,62px);line-height:1.04;font-weight:700; letter-spacing:.01em;color:#fdfaf3; text-shadow:0 2px 24px rgba(0,0,0,.35); } .hero h1 span{ color:var(--gold); background:linear-gradient(180deg,#f3d391,var(--gold) 55%,#d19f45); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero h2{ margin-top:12px;font-family:var(--font-serif); font-size:clamp(17px,2vw,23px);color:#f0e7d6;font-weight:600;letter-spacing:.02em; } .hero p{margin-top:15px;max-width:54ch;color:#cfc4e2;font-size:15.5px;line-height:1.75} .hero-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .hero-fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-size:12.5px;color:#eee6f8} .hero-cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap} .cta-primary,.cta-secondary{border-radius:14px;padding:14px 24px;font-weight:700;font-size:14.5px;border:0;display:inline-flex;align-items:center;gap:8px} .cta-primary{ background:linear-gradient(135deg,var(--purple2),var(--purple)); color:#fff;box-shadow:0 10px 26px rgba(109,59,191,.42); } .cta-primary:hover{filter:brightness(1.07)} .cta-secondary{background:rgba(255,255,255,.05);color:#fff;border:1.5px solid rgba(255,255,255,.32)} .cta-secondary:hover{background:rgba(255,255,255,.12)} .hero-art{ position:relative;border-radius:26px;overflow:hidden; box-shadow:var(--shadow-pop), 0 0 0 1px rgba(255,255,255,.09); aspect-ratio:4/5;background:#241537 center/cover; } .hero-art img{width:100%;height:100%;object-fit:cover} .image-type-tag{position:absolute;left:14px;bottom:14px;background:rgba(16,9,28,.78);color:#e9dff5;font-size:10.5px;padding:5px 11px;border-radius:999px;letter-spacing:.03em;backdrop-filter:blur(6px)} @media (max-width:900px){ .hero{padding:40px 0 66px} .hero-grid{grid-template-columns:1fr} .hero-art{aspect-ratio:16/10} } /* ---------- Virtue strip (overlapping white card) ---------- */ .virtue-wrap{position:relative;z-index:6} .virtue-strip{ background:#fff;border-radius:var(--radius-lg); box-shadow:0 22px 50px rgba(23,14,44,.13); display:grid;grid-template-columns:repeat(4,1fr); padding:22px 6px;margin-top:-44px; } .virtue-item{display:flex;align-items:center;gap:13px;padding:4px 20px;border-left:1px solid #eef0f6;min-width:0} .virtue-item:first-child{border-left:0} .v-ic{ width:54px;height:54px;flex:none;border-radius:50%; background:linear-gradient(135deg,var(--deity-accent),var(--deity-accent2)); color:#fff;display:grid;place-items:center; box-shadow:0 8px 18px color-mix(in srgb,var(--deity-accent) 35%, transparent); font-size:22px;font-family:var(--font-serif); } .v-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .virtue-item b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3} .virtue-item small{display:block;font-size:11.8px;color:var(--muted);margin-top:2px;line-height:1.4} @media (max-width:900px){ .virtue-strip{grid-template-columns:repeat(2,1fr);row-gap:16px;padding:18px 4px;margin-top:-38px} .virtue-item:nth-child(3){border-left:0} } @media (max-width:520px){ .virtue-strip{grid-template-columns:1fr} .virtue-item{border-left:0;padding:4px 16px} } /* Home page facts strip inherits the same look */ .facts-strip{position:relative;z-index:6;background:transparent;border:0} .facts-strip .container{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; background:#fff;border-radius:var(--radius-lg); box-shadow:0 22px 50px rgba(23,14,44,.13); padding:22px 6px;margin-top:-44px; } .fact-item{display:flex;gap:13px;align-items:center;padding:4px 20px;border-left:1px solid #eef0f6} .fact-item:first-child{border-left:0} .fact-item .ic{ width:54px;height:54px;flex:none;border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--purple2)); display:grid;place-items:center;color:#fff;font-size:20px; box-shadow:0 8px 18px rgba(109,59,191,.3); } .fact-item h3{font-size:14.5px;color:var(--ink)} .fact-item p{font-size:11.8px;color:var(--muted);margin-top:2px} @media (max-width:900px){ .facts-strip .container{grid-template-columns:repeat(2,1fr);row-gap:16px;margin-top:-38px} .fact-item:nth-child(3){border-left:0} } @media (max-width:520px){ .facts-strip .container{grid-template-columns:1fr} .fact-item{border-left:0} } /* ---------- Portal layout: sidebar + main ---------- */ .portal-wrap{ display:grid;grid-template-columns:298px minmax(0,1fr); gap:24px;align-items:start; padding-top:30px;padding-bottom:70px; } .portal-sidebar{position:sticky;top:78px;display:flex;flex-direction:column;gap:15px} .portal-main{min-width:0;counter-reset:catnum} .side-card{background:#fff;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-card)} .side-title{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b84a3;margin-bottom:11px} .side-search{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:12px;padding:0 13px;height:46px;background:#fbfbfd} .side-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--ink)} .side-search .mag{color:#9aa2b6;font-size:15px} .side-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8b84a3;margin:13px 0 7px} .side-select{width:100%;height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;color:#343b4a;padding:0 10px;outline:0} .why-card h3{font-size:16px;font-family:var(--font-serif);color:var(--navy);margin-bottom:10px} .why-card li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:13.5px;color:#39415c;line-height:1.5} .why-card .chk{ width:21px;height:21px;flex:none;margin-top:1px;border-radius:50%; background:#e7f6ec;color:#1e9e57;display:grid;place-items:center;font-size:11.5px;font-weight:800; } .quote-card{ background:linear-gradient(180deg,#f7f2ff,#fffdf8); border:1px solid #ece4fb;text-align:center;padding:24px 16px; } .quote-card .q-mark{color:#9a6fd8;font-size:22px;margin-bottom:8px} .quote-card p{font-family:var(--font-serif);font-size:15px;line-height:2;color:#3c3158} .quote-card small{display:block;margin-top:10px;color:#8f86a6;font-size:12px} @media (max-width:980px){ .portal-wrap{grid-template-columns:1fr} .portal-sidebar{position:static;order:2} .portal-main{order:1} } /* ---------- Toolbar (index pages) ---------- */ .toolbar{position:sticky;top:62px;z-index:20;background:#f3f4f8f2;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 0} .search-row{display:flex;gap:10px} .search-box{flex:1;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:0 14px;height:48px;box-shadow:var(--shadow-card)} .search-box input{flex:1;border:0;outline:0;font-size:14px;background:transparent} .category-select-wrap{height:48px;border:1.5px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;gap:6px;padding:0 12px} .category-select-wrap select{border:0;outline:0;background:transparent;font-size:13px;font-weight:700;color:#343b4a} /* ---------- Accordion rows (screenshot style) ---------- */ .category-dropdown{ margin:0 0 12px;background:#fff; border:1px solid #edeff5;border-radius:var(--radius-md); overflow:hidden;box-shadow:var(--shadow-card); --accent:#6948c8; transition:box-shadow .18s, transform .18s; } .category-dropdown:hover{box-shadow:0 12px 30px rgba(24,17,46,.11)} .category-dropdown:nth-of-type(2n){--accent:#2a9a69} .category-dropdown:nth-of-type(3n){--accent:#3287c6} .category-dropdown:nth-of-type(4n){--accent:#d26d32} .category-dropdown:nth-of-type(5n){--accent:#bd841e} .category-dropdown:nth-of-type(6n){--accent:#8b4fc9} .category-dropdown:nth-of-type(7n){--accent:#278f86} .category-dropdown:nth-of-type(8n){--accent:#c65784} .category-dropdown:nth-of-type(9n){--accent:#5367c7} .category-dropdown:nth-of-type(10n){--accent:#74a83e} .category-summary{list-style:none;display:flex;align-items:center;gap:15px;padding:17px 18px;cursor:pointer;min-height:76px} .category-summary::-webkit-details-marker{display:none} .section-icon{ width:46px;height:46px;flex:none;border-radius:13px; display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 12%, #ffffff); color:var(--accent); } .section-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .category-info{flex:1;min-width:0} .category-info h3{ font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--navy); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; } .portal-main .category-dropdown{counter-increment:catnum} .portal-main .category-info h3::before{ content:counter(catnum,decimal-leading-zero) "."; color:var(--orange);font-weight:700;font-family:var(--font-serif); } .category-info small{display:block;color:#7d8598;margin-top:4px;font-size:12.5px;font-family:var(--font-ui)} .category-arrow{width:30px;height:30px;flex:none;display:grid;place-items:center;color:#9aa2b6;font-size:19px;transition:transform .22s} .category-dropdown[open] .category-arrow{transform:rotate(180deg)} .category-content{padding:2px 18px 18px;border-top:1px solid #f0f2f7} .topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:12px} .topic{background:#fbfbfd;border:1px solid var(--line);border-radius:13px;overflow:hidden} .topic-head{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:44px} .topic-head b{font-size:13.5px;color:var(--navy)} .topic-body{border-top:1px dashed var(--line);padding:13px 15px;font-size:13.8px;color:#3a4158;line-height:1.7} @media (max-width:640px){.topic-grid{grid-template-columns:1fr}} /* ---------- Long-form story reader ---------- */ .story-article{background:#fff;border:1px solid #edeff5;border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-card)} .story-article h2{font-family:var(--font-serif);font-size:25px;color:var(--navy);line-height:1.3} .story-article h3{margin-top:28px;font-size:17.5px;color:var(--deity-accent);font-family:var(--font-serif);font-weight:700} .story-article p{margin-top:12px;font-size:15.5px;color:#2e3550;max-width:76ch;line-height:1.85} .story-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0} .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--soft2);color:#5a3bc6} .badge.grade-A{background:#e6f7ec;color:#1e7d43} .badge.grade-B{background:#eaf3ff;color:#1e5fa8} .badge.grade-C{background:#fff6e0;color:#8a6200} .badge.grade-D{background:#f4eeff;color:#6b3fb8} .badge.grade-E{background:#ffe9e9;color:#a83030} .badge.img-type{background:var(--plum-800);color:#f1e9fb} .variant-block{margin-top:16px;padding:15px 17px;border-left:4px solid var(--gold-deep);background:#fffaf0;border-radius:0 12px 12px 0;font-size:14px} .variant-block h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#8a6200;margin-bottom:6px} .variant-block p{color:#4a4433} .source-note{margin-top:24px;padding:14px 17px;background:#f6f4fc;border-radius:12px;font-size:12.5px;color:#5c5470;line-height:1.7} /* ---------- Family graph ---------- */ .family-graph{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 10px;overflow-x:auto;background:#fff;border-radius:var(--radius-md);border:1px solid #edeff5;box-shadow:var(--shadow-card)} .fg-node{background:#fbfbfd;border:1.5px solid var(--line);border-radius:13px;padding:10px 17px;font-weight:700;font-size:13.5px;white-space:nowrap;color:var(--navy)} .fg-node.self{background:linear-gradient(135deg,var(--deity-accent),var(--deity-accent2));color:#fff;border:0;box-shadow:0 8px 18px color-mix(in srgb,var(--deity-accent) 30%, transparent)} .fg-link{font-size:11px;color:var(--muted);padding:2px 0} .fg-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} .family-list{margin-top:10px} .family-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px} .family-list a{font-weight:700;color:var(--deity-accent)} /* ---------- Cards (directory / related grids) ---------- */ .deity-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:15px} .deity-card{background:#fff;border:1px solid #edeff5;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .16s, box-shadow .16s} a.deity-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(24,17,46,.13)} .deity-card .thumb{aspect-ratio:16/9;background:var(--soft2) center/cover} .deity-card .body{padding:13px 15px} .deity-card h3{font-size:14.5px;font-family:var(--font-serif);color:var(--navy)} .deity-card p{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.55} .deity-card .cat-tag{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:700;color:#6d3bbf;background:var(--soft2);padding:3px 9px;border-radius:999px} /* ---------- Footer ---------- */ .site-footer{ background:linear-gradient(180deg,var(--plum-800),var(--plum-900)); color:#cbbfdd;padding:26px 0;margin-top:46px;font-size:12.5px; border-top:1px solid rgba(255,255,255,.06); } .site-footer .container{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center} .site-footer a{opacity:.85} .site-footer a:hover{opacity:1} .footer-om{ font-family:var(--font-serif);font-size:15px;font-weight:700; color:var(--gold);letter-spacing:.05em; } /* ---------- Section headings & utilities ---------- */ .section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:36px 0 15px;flex-wrap:wrap} .section-heading h2{font-family:var(--font-serif);font-size:23px;color:var(--navy)} .section-heading a{font-size:13px;font-weight:700;color:var(--deity-accent)} .section-heading small{font-size:12.5px} .muted{color:var(--muted)} .status-pending{font-style:italic;color:var(--muted);font-size:13px}