/* nidhisoni.com — one stylesheet, no dependencies, built to last. Light is the default. Dark mode activates when . All colors live in the two :root blocks below — change once, changes everywhere. */ :root { --paper: #ffffff; /* background */ --ink: #1a1a1a; /* body text */ --faint: #6f6f6f; /* dates, captions, small print */ --hairline:#e6e6e6; /* dividers */ --brass: #9a7b2d; /* the one accent — a nod to the goldsmiths of Vadodara */ --card: #faf8f3; /* subtle panel fill */ } html[data-theme="dark"] { --paper: #14120e; /* warm near-black */ --ink: #ece7db; --faint: #948c7c; --hairline:#2c2822; --brass: #cca94f; /* brighter brass reads better on dark */ --card: #1c1913; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.65; transition: background-color 0.25s ease, color 0.25s ease; } .page { max-width: 660px; margin: 0 auto; padding: 44px 24px 88px; } /* ---- Header ---- */ .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .site-name { font-size: 17px; font-weight: normal; letter-spacing: 0.02em; margin: 0; } .site-name a { text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--brass); padding-bottom: 2px; } /* Theme toggle button */ .theme-toggle { border: 1px solid var(--hairline); background: transparent; color: var(--faint); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--brass); border-color: var(--brass); } .theme-toggle .moon { display: inline; } .theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .moon { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: inline; } nav { margin-top: 22px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; } nav a { color: var(--faint); text-decoration: none; margin-right: 20px; display: inline-block; margin-bottom: 6px; } nav a:hover, nav a:focus { color: var(--brass); } nav a[aria-current="page"] { color: var(--ink); } main { margin-top: 52px; } /* ---- Text ---- */ h1 { font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0 0 10px; } h2 { font-size: 19px; font-weight: normal; margin: 44px 0 12px; } p { margin: 0 0 20px; } a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover, a:focus { color: var(--brass); } .lead { font-size: 19px; } .meta { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; letter-spacing: 0.05em; color: var(--faint); } hr { border: none; border-top: 1px solid var(--hairline); margin: 44px 0; } ul { padding-left: 20px; } li { margin-bottom: 8px; } blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--brass); color: var(--faint); } /* ---- Work list ---- */ .entry { margin-bottom: 30px; } .entry .role { margin: 0 0 2px; } .entry .org { color: var(--brass); } .entry .dates { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12.5px; letter-spacing: 0.05em; color: var(--faint); margin: 0; } /* ---- Bookshelf ---- */ .books { list-style: none; padding: 0; counter-reset: b; } .books li { padding: 9px 0; border-bottom: 1px solid var(--hairline); display: flex; gap: 16px; align-items: baseline; } .books li::before { counter-increment: b; content: counter(b, decimal-leading-zero); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: var(--faint); min-width: 26px; flex-shrink: 0; } .books .author { color: var(--faint); font-style: italic; } /* ---- Writing / blog index ---- */ .post-list { list-style: none; padding: 0; } .post-list li { margin-bottom: 16px; display: flex; gap: 18px; align-items: baseline; } .post-list .date { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: var(--faint); min-width: 84px; flex-shrink: 0; } /* ---- Footer + social ---- */ footer { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12.5px; color: var(--faint); } footer a { color: var(--faint); } .social { display: flex; gap: 18px; margin-bottom: 16px; } .social a { color: var(--faint); display: inline-flex; align-items: center; text-decoration: none; transition: color 0.2s ease; } .social a:hover, .social a:focus { color: var(--brass); } .social svg { width: 20px; height: 20px; fill: currentColor; display: block; } /* ---- Small screens ---- */ @media (max-width: 540px) { .page { padding: 30px 20px 64px; } .post-list li { flex-direction: column; gap: 2px; } nav a { margin-right: 16px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }