/* ========================================================================== तन्तुवाय — Tantuvāya A study resource for Pāṇinian grammar. Data sourced from ashtadhyayi.com. Every color is drawn from the locked eight-color palette. No exceptions. ========================================================================== */ /* ---- Fonts (bundled locally, no CDN) ---- */ @font-face{font-family:"Noto Serif Devanagari";src:url("../fonts/noto-serif-dev.woff2") format("woff2");font-weight:100 900;font-display:swap;} @font-face{font-family:"Spectral";src:url("../fonts/spectral.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Spectral";src:url("../fonts/spectral-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Spectral";src:url("../fonts/spectral-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;} @font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap;} @font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap;} /* ========================================================================== PALETTE (the only colors permitted anywhere on this site) Anchors: #F8F5EE milk · #2B323F slate-ink Cool set: #3E5C76 steel · #5B8A9E cyan-stone · #6E7F76 sage · #7C6F9A lavender-slate · #9AA7B4 mist · #1F4E5F teal-indigo The signature thread is lavender-slate. No warm hue appears anywhere. ========================================================================== */ :root{ /* the eight defined colors */ --milk:#F8F5EE; --slate:#2B323F; --steel:#3E5C76; --cyan:#5B8A9E; --sage:#6E7F76; --lav:#7C6F9A; --mist:#9AA7B4; --teal-i:#1F4E5F; /* ---- semantic aliases (old warm names remapped to cool, so the whole cascade re-skins from one place; no warm value remains) ---- */ --forest:var(--slate); --olive:var(--sage); --teal-d:var(--steel); --teal-v:var(--cyan); --parch:var(--milk); --amber:var(--lav); --burnt:var(--lav); --crimson:var(--teal-i); /* tints derived ONLY by mixing the defined palette colors together */ --canvas: var(--milk); --canvas-warm: color-mix(in srgb, var(--milk) 92%, var(--steel) 8%); --panel: color-mix(in srgb, var(--milk) 86%, var(--steel) 14%); --panel-raise: color-mix(in srgb, var(--milk) 78%, var(--steel) 22%); --ink: var(--slate); --ink-soft: color-mix(in srgb, var(--slate) 78%, var(--milk) 22%); --ink-faint: color-mix(in srgb, var(--slate) 52%, var(--milk) 48%); --line: color-mix(in srgb, var(--mist) 55%, var(--milk) 45%); --line-strong: color-mix(in srgb, var(--mist) 85%, var(--slate) 15%); --thread: var(--lav); --link: var(--steel); --link-hot: var(--cyan); --shadow: color-mix(in srgb, var(--slate) 22%, transparent); --shadow-soft: color-mix(in srgb, var(--slate) 10%, transparent); /* type roles */ --dev:"Noto Serif Devanagari", serif; --serif:"Spectral", Georgia, serif; --display:"Fraunces","Spectral",serif; --mono:"JetBrains Mono", ui-monospace, monospace; --maxw:1180px; --rad:14px; --rad-sm:9px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:160ms; --t:260ms; --t-slow:420ms; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} /* The gradient background lives on html::before as a fixed pseudo-element. This is the iOS-safe pattern: background-attachment:fixed on is broken on iOS Safari/Chrome — it disrupts compositing and causes position:fixed children (including the loader) to scroll with the page, which is the exact "loader stuck but content scrollable" bug. */ html::before{ content:""; position:fixed; inset:0; z-index:-1; background:var(--canvas); background-image: radial-gradient(circle at 18% -10%, color-mix(in srgb,var(--steel) 10%, transparent), transparent 42%), radial-gradient(circle at 110% 8%, color-mix(in srgb,var(--lav) 9%, transparent), transparent 46%); pointer-events:none; } body{ margin:0; background:transparent; color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; } ::selection{background:color-mix(in srgb,var(--lav) 38%, transparent);color:var(--slate);} /* scrollbar — palette only */ *{scrollbar-width:thin;scrollbar-color:var(--olive) transparent;} *::-webkit-scrollbar{width:11px;height:11px;} *::-webkit-scrollbar-track{background:transparent;} *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--olive) 70%, var(--parch));border-radius:20px;border:3px solid var(--canvas);} *::-webkit-scrollbar-thumb:hover{background:var(--olive);} a{color:var(--link);text-decoration:none;transition:color var(--t-fast) var(--ease);} a:hover{color:var(--link-hot);} :focus-visible{outline:2.5px solid var(--teal-v);outline-offset:3px;border-radius:4px;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px);} /* ---- Devanagari helpers ---- */ .dev{font-family:var(--dev);font-feature-settings:"kern" 1;line-height:1.5;} .tr{font-family:var(--mono);font-style:normal;letter-spacing:.02em;color:var(--ink-faint);} .ref{font-family:var(--mono);font-size:.82em;letter-spacing:.04em;} /* ========================================================================== LOADER — a single golden thread weaving the glyph ॐ, then a soft dissolve ========================================================================== */ #loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background:var(--canvas); -webkit-transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow); transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow);} #loader.done{opacity:0;visibility:hidden;pointer-events:none;} .loader-mark{display:flex;flex-direction:column;align-items:center;gap:26px;} .loader-mark svg{width:128px;height:128px;overflow:visible;} .loader-thread{fill:none;stroke:var(--thread);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 2px 6px var(--shadow-soft));} .loader-weft{fill:none;stroke:var(--olive);stroke-width:1.2;opacity:.5;} .loader-word{font-family:var(--display);font-weight:300;letter-spacing:.42em; text-transform:uppercase;font-size:13px;color:var(--ink-faint); opacity:0;animation:fadeUp 1s var(--ease) .5s forwards;padding-left:.42em;} @keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:.9;transform:none;}} /* ========================================================================== HEADER ========================================================================== */ header.site{position:sticky;top:0;z-index:200; background:color-mix(in srgb,var(--canvas) 86%, transparent); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--line); transition:box-shadow var(--t) var(--ease),background var(--t);} header.site.scrolled{box-shadow:0 6px 26px -16px var(--shadow);} .nav{display:flex;align-items:center;gap:30px;height:72px;} .brand{display:flex;align-items:baseline;gap:12px;margin-right:auto;} .brand .glyph{font-family:var(--dev);font-size:30px;color:var(--burnt);line-height:1; transition:transform var(--t) var(--ease-out),color var(--t);} .brand:hover .glyph{transform:rotate(-8deg) scale(1.08);color:var(--amber);} .brand .name{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);letter-spacing:.01em;} .brand .name small{display:block;font-family:var(--mono);font-weight:400;font-size:10px; letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px;} .nav-links{display:flex;gap:6px;} .nav-links a{position:relative;padding:9px 15px;border-radius:var(--rad-sm);font-size:15px; font-weight:500;color:var(--ink-soft);transition:color var(--t-fast) var(--ease),background var(--t-fast);} .nav-links a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px; background:var(--amber);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform var(--t) var(--ease-out);} .nav-links a:hover{color:var(--forest);background:color-mix(in srgb,var(--amber) 16%,transparent);} .nav-links a.active{color:var(--forest);} .nav-links a.active::after{transform:scaleX(1);} .nav-search-btn{display:none;} .burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--rad-sm); width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;gap:4px;flex-direction:column; transition:border-color var(--t-fast);} .burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px; transition:transform var(--t) var(--ease),opacity var(--t);} .burger:hover{border-color:var(--olive);} .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* ========================================================================== BUTTONS / TAGS / CHIPS ========================================================================== */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:500; font-size:15px;padding:11px 20px;border-radius:var(--rad-sm);cursor:pointer;border:1px solid transparent; transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);} .btn:active{transform:translateY(1px) scale(.99);} .btn-primary{background:var(--teal-d);color:var(--parch);} .btn-primary:hover{background:var(--teal-v);box-shadow:0 8px 22px -12px var(--teal-d);transform:translateY(-1px);} .btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink);} .btn-ghost:hover{border-color:var(--olive);background:color-mix(in srgb,var(--olive) 12%,transparent);transform:translateY(-1px);} .tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px; font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px; border:1px solid;transition:all var(--t-fast) var(--ease);} .tag-S{color:var(--steel);border-color:color-mix(in srgb,var(--steel) 42%,transparent);background:color-mix(in srgb,var(--steel) 10%,transparent);} .tag-V{color:var(--teal-i);border-color:color-mix(in srgb,var(--teal-i) 42%,transparent);background:color-mix(in srgb,var(--teal-i) 9%,transparent);} .tag-AD{color:var(--lav);border-color:color-mix(in srgb,var(--lav) 46%,transparent);background:color-mix(in srgb,var(--lav) 12%,transparent);} .tag-AT{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 50%,transparent);background:color-mix(in srgb,var(--sage) 13%,transparent);} .tag-P{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 46%,transparent);background:color-mix(in srgb,var(--cyan) 11%,transparent);} /* ========================================================================== GENERIC SECTIONS / CARDS ========================================================================== */ .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase; color:var(--burnt);display:inline-flex;align-items:center;gap:10px;} .eyebrow::before{content:"";width:26px;height:1px;background:var(--burnt);opacity:.6;} .section-title{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px); line-height:1.12;color:var(--ink);margin:14px 0 0;letter-spacing:-.01em;} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad); padding:24px;transition:transform var(--t) var(--ease-out),box-shadow var(--t),border-color var(--t); will-change:transform;} .card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -24px var(--shadow);border-color:var(--line-strong);} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-out);} .reveal.in{opacity:1;transform:none;} /* ========================================================================== FOOTER ========================================================================== */ footer.site{margin-top:90px;border-top:1px solid var(--line); background:color-mix(in srgb,var(--parch) 60%, var(--forest) 6%);} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:54px 0 30px;} .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint);margin:0 0 16px;} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .foot a{color:var(--ink-soft);font-size:15px;} .foot a:hover{color:var(--link-hot);} .foot .brand .glyph{font-size:34px;} .foot p{color:var(--ink-soft);font-size:14.5px;max-width:32ch;} .foot-bar{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between; align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-faint);} .foot-bar a{color:var(--ink-faint);} /* ========================================================================== RESPONSIVE ========================================================================== */ @media(max-width:860px){ /* Remove backdrop-filter from the header on mobile. backdrop-filter creates a stacking context (CSS spec), which would trap any position:fixed descendant inside the header — preventing the sidebar from escaping to cover the full viewport. With no backdrop-filter, the header's stacking context is gone and the fixed sidebar anchors to the viewport correctly. */ header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--canvas);} /* Right-side slide-in sidebar. position:fixed with no backdrop-filter on the parent means this correctly anchors to the full viewport on iOS. */ .nav-links{ position:fixed;top:0;right:0;bottom:0; width:min(75vw,280px); display:flex;flex-direction:column;align-items:stretch;gap:4px; padding:calc(72px + 20px) 18px 32px; background:var(--canvas); border-left:1px solid var(--line); box-shadow:-16px 0 48px -20px var(--shadow); transform:translateX(100%); pointer-events:none; -webkit-transition:transform 340ms cubic-bezier(.16,1,.3,1); transition:transform 340ms cubic-bezier(.16,1,.3,1); overflow-y:auto; z-index:300; } .nav-links.open{ transform:translateX(0); pointer-events:auto; } .nav-links.closing{ -webkit-transition:transform 280ms cubic-bezier(.4,0,1,1); transition:transform 280ms cubic-bezier(.4,0,1,1); } .nav-links a{ display:block;padding:15px 18px;font-size:17px; border-radius:var(--rad-sm);color:var(--ink-soft);font-weight:500; } .nav-links a::after{display:none;} .nav-links a:hover,.nav-links a.active{ background:color-mix(in srgb,var(--steel) 10%,transparent); color:var(--steel); } /* Backdrop sits below the header (z-199 < header z-200) so the burger button remains clickable above the dim while the sidebar is open. The sidebar (z-300) sits above the backdrop. */ .nav-backdrop{ position:fixed;inset:0;z-index:199; background:color-mix(in srgb,var(--slate) 50%,transparent); opacity:0;pointer-events:none; -webkit-transition:opacity 280ms ease; transition:opacity 280ms ease; } .nav-backdrop.show{opacity:1;pointer-events:auto;} .burger{display:flex;} .foot{grid-template-columns:1fr 1fr;gap:30px;} } /* lock page scroll while the mobile sidebar is open */ html.nav-locked{overflow:hidden;} .nav-backdrop{display:none;} @media(max-width:860px){ .nav-backdrop{display:block;} } @media(max-width:560px){ .foot{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important;} .reveal{opacity:1;transform:none;} }