/* --------------------------------------------------------------------------- dakshgargas.com — single stylesheet for the whole site. Implements the Claude Design handoff ("Site Handoff" spec, V1 · Aug 15 2026). System in one breath: warm paper/ink palettes (never pure #000/#FFF), no accent color — hierarchy is weight, size, and the gray ramp. Inter Tight for everything, Geist Mono strictly for metadata (dates, indices, labels, counts). Motion budget 150–300ms plain ease, one hover effect per element. --------------------------------------------------------------------------- */ /* --- Tokens (spec §01) ----------------------------------------------------- */ :root { --bg: #f6f5f2; --ink: #171614; --body: #55524c; --mut: #9a968e; --line: #dedbd4; --tick: #c9c5bd; --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --measure: 620px; } /* Dark (OLED). Theme follows prefers-color-scheme with a manual override stored as data-theme on ; absence of the attribute means "auto". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a09; --ink: #eae6df; --body: #a7a39a; --mut: #6f6c65; --line: #26251f; --tick: #3a3833; } } :root[data-theme="dark"] { --bg: #0a0a09; --ink: #eae6df; --body: #a7a39a; --mut: #6f6c65; --line: #26251f; --tick: #3a3833; } /* --- Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.85; -webkit-font-smoothing: antialiased; /* Theme switch crossfades over 300ms (spec §01). */ transition: background-color .3s ease, color .3s ease; overflow-x: hidden; /* horizontal overflow is a defect (spec §05) */ } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } /* Mono metadata label — the only role Geist Mono plays. */ .m-label { font: 500 10px var(--mono); letter-spacing: 2px; color: var(--mut); text-transform: uppercase; } .m-index { font: 500 9.5px var(--mono); letter-spacing: 3px; color: var(--mut); } .m-date { font: 400 10px var(--mono); letter-spacing: 1.5px; color: var(--mut); text-transform: uppercase; } /* Mono link — hairline underline warms to ink on hover (About »ELSEWHERE«). */ .m-link { font: 400 12px var(--mono); color: var(--body); border-bottom: 1px solid var(--tick); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; } .m-link:hover { color: var(--ink); border-color: var(--ink); } /* --- Zoom transitions (spec §04) ------------------------------------------- Camera metaphor: forward pushes in (home scales up and fades as the section rises from 0.92), back pulls out (section sinks to 0.92, home settles from 1.10). Only opacity/transform animate. */ @keyframes zi-enter { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: scale(1) } } @keyframes zi-exit { from { opacity: 1; transform: scale(1) } to { opacity: 0; transform: scale(1.1) } } @keyframes zo-enter { from { opacity: 0; transform: scale(1.1)} to { opacity: 1; transform: scale(1) } } @keyframes zo-exit { from { opacity: 1; transform: scale(1) } to { opacity: 0; transform: scale(.92) } } .view { will-change: opacity, transform; } .view[hidden] { display: none; } .view-home { transform-origin: 50% 44%; } .view-section { transform-origin: 50% 32%; } .anim-zi-enter { animation: zi-enter .3s ease both; } .anim-zi-exit { animation: zi-exit .22s ease both; } .anim-zo-enter { animation: zo-enter .3s ease both; } .anim-zo-exit { animation: zo-exit .22s ease both; } /* --- Home (spec §03) -------------------------------------------------------- One 1px meridian, full viewport height, centered. Content sits on the line as plates: bg-colored padding interrupts the line, never strikes text. */ .view-home { position: fixed; inset: 0; overflow: hidden; } .meridian { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); transition: background-color .3s ease; } .name-plate { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); background: var(--bg); /* asymmetric padding optically centers the letter-spaced caps on the line */ padding: 10px 22px 10px 28px; font-size: 12px; font-weight: 500; letter-spacing: 6px; white-space: nowrap; transition: background-color .3s ease; z-index: 2; } .home-nav { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .home-nav a { background: var(--bg); padding: 13px 26px; font-size: 20px; font-weight: 400; transition: font-weight .15s, background-color .3s ease; } .home-nav a:hover { font-weight: 500; } /* --- Section pages (spec §05) ---------------------------------------------- */ .view-section { min-height: 100dvh; padding: 72px 72px 80px; } /* The section header (index + title) IS the back button. */ .sec-head { display: inline-block; transition: opacity .2s ease; } .sec-head:hover { opacity: .6; } .sec-head h1 { margin: 8px 0 0; font-size: 21px; font-weight: 500; letter-spacing: -.2px; } .sec-bar { display: flex; justify-content: space-between; align-items: flex-end; } /* NEXT → thread at the foot of every section. */ .next-link { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 96px; } .next-link .nl-target { font-size: 15px; font-weight: 400; transition: font-weight .15s; } .next-link:hover .nl-target { font-weight: 500; } /* About */ .about-col { max-width: var(--measure); margin-top: 72px; display: flex; flex-direction: column; gap: 64px; } .about-col p { margin: 16px 0 0; color: var(--body); text-wrap: pretty; } .elsewhere { display: flex; gap: 24px; margin-top: 16px; } /* Learnings */ .notes-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 56px 44px; } .note-card { display: block; transition: transform .2s ease; } .note-card:hover { transform: translateY(-2px); } .note-cover { aspect-ratio: 3 / 2; /* covers are 3:2, radius 5 (spec §06) */ border-radius: 5px; overflow: hidden; background: var(--line); transition: background-color .3s ease; } .note-cover img { width: 100%; height: 100%; object-fit: cover; } .note-card .nc-title { margin-top: 15px; font-size: 15.5px; font-weight: 500; line-height: 1.4; letter-spacing: -.1px; } .note-card .m-date { display: block; margin-top: 7px; } /* Apps */ .app-groups { margin-top: 64px; display: flex; flex-direction: column; gap: 72px; } .app-group > .m-label { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .app-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 44px 48px; } /* The whole row is the link; hovering it nudges the name (one effect). */ .app-row { display: flex; gap: 16px; align-items: flex-start; } .app-icon { width: 48px; height: 48px; flex: none; border-radius: 11px; /* macOS-like squircle (spec §06) */ overflow: hidden; } .app-icon img { width: 100%; height: 100%; object-fit: cover; } .app-body { min-width: 0; } .app-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .app-name { display: inline-block; font-size: 15.5px; font-weight: 500; transition: transform .2s ease; } .app-row:hover .app-name { transform: translateX(2px); } .app-tag { font: 400 9px var(--mono); letter-spacing: 1.5px; color: var(--mut); text-transform: uppercase; } .app-row p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--body); text-wrap: pretty; } /* --- Post pages (writing/*.html) -------------------------------------------- Same editorial frame as a section page; long-form body in the 620px measure. */ .post-page { min-height: 100dvh; padding: 72px 72px 80px; } .back-link { display: inline-block; font: 500 9.5px var(--mono); letter-spacing: 3px; color: var(--mut); text-transform: uppercase; transition: color .2s ease; } .back-link:hover { color: var(--ink); } .post-header { max-width: var(--measure); } .post-header h1 { margin: 10px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -.2px; line-height: 1.35; } .post-header .m-date { display: block; margin-top: 12px; } .post { max-width: var(--measure); margin-top: 56px; color: var(--body); } .post p { margin: 0 0 1.4em; text-wrap: pretty; } .post h2 { /* In-post headings render as mono labels, like INTRO / CV / ELSEWHERE. */ font: 500 10px var(--mono); letter-spacing: 2px; color: var(--mut); text-transform: uppercase; margin: 3.2em 0 1.1em; } .post h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 2.2em 0 .7em; } .post a { color: var(--ink); border-bottom: 1px solid var(--tick); transition: border-color .2s ease; } .post a:hover { border-color: var(--ink); } .post ul, .post ol { margin: 0 0 1.4em; padding-left: 1.3em; } .post li { margin-bottom: .45em; } .post li::marker { color: var(--mut); } .post code { font: 400 12.5px var(--mono); color: var(--ink); } .post pre { border: 1px solid var(--line); border-radius: 5px; padding: 18px 20px; margin: 0 0 1.6em; overflow-x: auto; /* long lines scroll inside the block */ line-height: 1.7; transition: border-color .3s ease; } .post pre code { display: block; } .post blockquote { margin: 0 0 1.4em; padding-left: 18px; border-left: 1px solid var(--tick); color: var(--mut); } .post figure { margin: 2.2em 0; } .post figure img { border-radius: 5px; } .post figcaption { margin-top: 10px; font: 400 10px var(--mono); letter-spacing: 1.5px; color: var(--mut); text-transform: uppercase; } .post .table-wrap { overflow-x: auto; margin: 0 0 1.6em; } .post table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .post th, .post td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); } .post th { font: 500 10px var(--mono); letter-spacing: 1.5px; color: var(--mut); text-transform: uppercase; } .post hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; } /* --- Theme toggle ------------------------------------------------------------ The manual override the spec requires. Deliberately quiet: fixed mono label, bottom-right, muted until hovered. Cycles AUTO → LIGHT → DARK. */ .theme-toggle { position: fixed; right: 20px; bottom: 16px; z-index: 5; border: 0; background: var(--bg); padding: 6px 8px; font: 500 9.5px var(--mono); letter-spacing: 2px; color: var(--mut); cursor: pointer; transition: color .2s ease, background-color .3s ease; } .theme-toggle:hover { color: var(--ink); } /* --- Utility ----------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--ink); font: 500 10px var(--mono); letter-spacing: 2px; z-index: 10; } :focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } /* --- Mobile (spec §08 + mobile variant) -------------------------------------- */ @media (max-width: 640px) { .name-plate { top: 148px; padding: 10px 18px 10px 23px; font-size: 11px; letter-spacing: 5px; } .home-nav a { padding: 14px 24px; font-size: 19px; } /* hit targets ≥ 44px */ .view-section, .post-page { padding: 84px 26px 72px; } .view-section { transform-origin: 50% 24%; } .sec-head h1 { margin-top: 7px; font-size: 20px; } .about-col { margin-top: 52px; gap: 48px; } .about-col p { margin-top: 14px; font-size: 15px; line-height: 1.8; } .elsewhere { flex-direction: column; align-items: flex-start; gap: 16px; } .elsewhere .m-link { font-size: 12.5px; padding-bottom: 3px; } .notes-grid { margin-top: 44px; grid-template-columns: 1fr; gap: 44px; } .note-card:hover { transform: none; } .note-card .nc-title { margin-top: 14px; font-size: 16px; } .app-groups { margin-top: 48px; gap: 52px; } .app-group > .m-label { padding-bottom: 12px; } .app-grid { margin-top: 26px; grid-template-columns: 1fr; gap: 30px; } .app-row { gap: 15px; } .app-icon { width: 46px; height: 46px; border-radius: 10px; } .app-row p { margin-top: 5px; line-height: 1.6; } .next-link { margin-top: 64px; padding: 6px 0; } .post-header h1 { font-size: 21px; } .post { margin-top: 44px; } } /* Reduced motion: swap the zoom for pure crossfades and drop movement-based hovers. Fades are kept — they don't trigger vestibular issues; scaling and translation do. (With Reduce Motion on, you get fades, not nothing.) */ @keyframes rm-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes rm-fade-out { from { opacity: 1 } to { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .anim-zi-enter, .anim-zo-enter { animation: rm-fade-in .3s ease both; } .anim-zi-exit, .anim-zo-exit { animation: rm-fade-out .22s ease both; } .note-card:hover { transform: none; } .app-row:hover .app-name { transform: none; } .card:hover { transform: none; } }