/* ============================================================ Blog theme override — brings the Hugo-generated "KK's Notes" blog in line with kirankumar.ai's main-site palette/type. Loaded after reset/pygments/main.css (see each page's ), so this only needs to override, never duplicate, the theme. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&display=swap'); :root { --bg: #0d1015; --bg-elevated: #151a21; --text: #ece8e0; --text-dim: #8b93a1; --text-faint: #565f6c; --accent: #e8a33d; --accent-hover: #f4c169; --accent-2: #6f9bf0; --rule: rgba(236, 232, 224, 0.1); --rule-strong: rgba(236, 232, 224, 0.18); --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --font-body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } html, body { background-color: var(--bg) !important; } body { color: var(--text) !important; font-family: var(--font-body) !important; } a { color: var(--accent) !important; } a:hover { color: var(--accent-hover) !important; } /* ---------- header / nav ---------- */ section.header, section.icons { background-color: var(--bg) !important; } section.header .name { font-family: var(--font-mono) !important; color: var(--text) !important; letter-spacing: 0.06em; } section.header h3.self-intro { color: var(--text-dim) !important; } section.header nav { font-family: var(--font-mono) !important; letter-spacing: 0.08em; } section.header nav ul a { color: var(--text-dim) !important; } section.header nav ul a:hover { color: var(--text) !important; } /* the theme's social row is raster logo images hotlinked from third-party CDNs — replace with text pills matching the main site's social-row style instead of trying to recolor bitmaps */ section.icons .content a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--rule-strong); color: var(--text); padding: 8px 14px; border-radius: 2px; opacity: 1 !important; display: inline-flex; align-items: center; } section.icons .content a:hover { border-color: var(--accent); color: var(--accent) !important; } section.icons .content a .icon, section.icons .content a .flag { display: none; } section.icons .content a[href*="github"]::after { content: "GitHub"; } section.icons .content a[href*="linkedin"]::after { content: "LinkedIn"; } section.icons .content a[href^="mailto:"]::after { content: "Email"; } section.icons .content a[href*="index.xml"]::after { content: "RSS"; } /* ---------- headings ---------- */ section.main .content .page-heading, section.main .content .front-matter .page-heading { font-family: var(--font-display) !important; text-transform: none !important; font-weight: 500 !important; color: var(--text) !important; letter-spacing: -0.01em !important; } .page-heading a { color: var(--text) !important; } .page-heading a:hover { color: var(--accent) !important; } section.main .content .front-matter .meta, section.main .content .front-matter .date, section.main .content .front-matter .word-count, section.main .content .front-matter .reading-time { font-family: var(--font-mono) !important; color: var(--text-faint) !important; } section.main .content .markdown h1, section.main .content .markdown h2, section.main .content .markdown h3, section.main .content .markdown h4, section.main .content .markdown h5, section.main .content .markdown h6 { font-family: var(--font-display) !important; color: var(--text) !important; } /* ---------- post list ---------- */ section.main .container .content .post-item { border-bottom: 1px solid var(--rule); padding: 14px 0; } section.main .container .content .post-item a { color: var(--text) !important; } section.main .container .content .post-item a:hover { color: var(--accent) !important; } section.main .container .content .post-item .meta { font-family: var(--font-mono) !important; color: var(--text-faint) !important; } section.main .container .content .no-bullet .date { font-family: var(--font-display) !important; color: var(--text) !important; } /* ---------- article body ---------- */ section.main .content .markdown { color: var(--text-dim); } section.main .content .markdown p, section.main .content .markdown li, section.main .content .markdown dd { color: var(--text-dim); } section.main .content .markdown code, section.main .content .markdown pre { font-family: var(--font-mono) !important; background-color: var(--bg-elevated) !important; border: 1px solid var(--rule); } section.main .content .markdown code { color: var(--accent-2); } section.main .content .markdown pre code { color: var(--text); } section.main .content .markdown a code { color: var(--accent) !important; } section.main .content .markdown blockquote { border-left: 3px solid var(--accent); background-color: var(--bg-elevated); color: var(--text-dim) !important; } section.main .content .markdown hr { border-top: 1px solid var(--rule) !important; } section.main .content .markdown table { color: var(--text-dim); } section.main .content .markdown td, section.main .content .markdown th { border-color: var(--rule) !important; } section.main .content .markdown tbody tr:nth-child(odd) td, section.main .content .markdown tbody tr:nth-child(odd) th { background-color: var(--bg-elevated) !important; } section.main .content .markdown abbr { color: var(--text-faint) !important; } .back-to-posts a { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- misc ---------- */ hr { background-color: var(--rule) !important; } ::selection { background: rgba(232, 163, 61, 0.25); }