/* ========================================================================== onurbulbul.com — Style sheet Cardo serif (Google Fonts) + Inter sans-serif Light + dark mode (auto-detect + manual toggle) ========================================================================== */ /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Theme tokens ──────────────────────────────────────────────────────── */ :root { --bg: #f5ecd9; --bg-soft: #ede2c9; --ink: #1a2847; --ink-soft: rgba(26, 40, 71, 0.65); --ink-faint: rgba(26, 40, 71, 0.18); --gold: #a8834a; --gold-soft: rgba(168, 131, 74, 0.45); } /* Manual theme override (set by JS via [data-theme] on ) */ :root[data-theme="dark"] { --bg: #0f1729; --bg-soft: #14203a; --ink: #ecdfbf; --ink-soft: rgba(236, 223, 191, 0.65); --ink-faint: rgba(236, 223, 191, 0.15); --gold: #c9a86a; --gold-soft: rgba(201, 168, 106, 0.4); } /* Auto dark mode if system prefers it AND user hasn't chosen manually */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0f1729; --bg-soft: #14203a; --ink: #ecdfbf; --ink-soft: rgba(236, 223, 191, 0.65); --ink-faint: rgba(236, 223, 191, 0.15); --gold: #c9a86a; --gold-soft: rgba(201, 168, 106, 0.4); } } /* ── Base ──────────────────────────────────────────────────────────────── */ html, body { background: var(--bg); color: var(--ink); } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; transition: background 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold-soft); color: var(--ink); } .wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 32px; } /* ── Header ────────────────────────────────────────────────────────────── */ header.site { padding: 28px 0 22px; border-bottom: 0.5px solid var(--ink-faint); } header.site .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .brand { font-family: 'Cardo', Garamond, serif; font-size: 16px; letter-spacing: 0.03em; } nav.primary { display: flex; align-items: center; gap: 22px; font-size: 13px; } nav.primary a { opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; padding-bottom: 2px; border-bottom: 1px solid transparent; } nav.primary a:hover { opacity: 1; } nav.primary a.current { opacity: 1; border-bottom-color: var(--ink); } .theme-toggle { background: none; border: none; cursor: pointer; color: var(--ink); padding: 4px; margin-left: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease; font: inherit; } .theme-toggle:hover { opacity: 1; } .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .moon { display: none; } :root:not([data-theme]) .theme-toggle .sun { display: block; } } /* ── Main ──────────────────────────────────────────────────────────────── */ main { flex: 1; padding: 88px 0 64px; } main.center { text-align: center; } /* ── Hero (home page) ──────────────────────────────────────────────────── */ h1.name { font-family: 'Cardo', Garamond, serif; font-size: clamp(36px, 4.8vw, 46px); font-weight: 400; letter-spacing: -0.005em; line-height: 1.1; margin-bottom: 14px; text-align: center; } .tagline { font-size: 11px; color: var(--gold); letter-spacing: 0.28em; text-transform: uppercase; text-align: center; } /* ── Page heading (other pages) ────────────────────────────────────────── */ h1.page { font-family: 'Cardo', Garamond, serif; font-size: 32px; font-weight: 400; letter-spacing: -0.005em; margin-bottom: 32px; } h2.section { font-family: 'Cardo', Garamond, serif; font-size: 13px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 48px; margin-bottom: 16px; } h2.section:first-child { margin-top: 0; } /* ── φ Ornament ────────────────────────────────────────────────────────── */ .ornament { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 40px auto 36px; } .ornament .line { display: block; width: 100px; height: 1px; background: var(--gold-soft); } .ornament svg { color: var(--gold); flex-shrink: 0; } /* ── Bio (home page) ───────────────────────────────────────────────────── */ .bio { max-width: 520px; margin: 0 auto; font-family: 'Cardo', Garamond, serif; font-size: 18px; line-height: 1.75; text-align: center; } /* ── Prose (about, research) ───────────────────────────────────────────── */ .prose { max-width: 640px; font-family: 'Cardo', Garamond, serif; font-size: 18px; line-height: 1.75; } .prose p { margin-bottom: 1.2em; } .prose p:last-child { margin-bottom: 0; } /* ── Entries (publications, talks) ─────────────────────────────────────── */ .entries { max-width: 760px; } .entries .entry { padding: 18px 0; border-bottom: 0.5px solid var(--ink-faint); } .entries .entry:last-child { border-bottom: none; } .entries .entry-title { font-family: 'Cardo', Garamond, serif; font-size: 17px; line-height: 1.45; margin-bottom: 6px; } .entries .entry-title em { font-style: italic; } .entries .entry-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.01em; } .entries .entry-meta em { font-style: italic; } /* ── Action buttons (home) ─────────────────────────────────────────────── */ .actions { display: flex; justify-content: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; } .btn { border: 0.5px solid var(--ink); color: var(--ink); padding: 10px 26px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-block; transition: background 0.2s ease, color 0.2s ease; } .btn:hover { background: var(--ink); color: var(--bg); } /* ── Contact list ──────────────────────────────────────────────────────── */ .contact-list { max-width: 480px; } .contact-list dt { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 28px; margin-bottom: 6px; font-weight: 500; } .contact-list dt:first-child { margin-top: 0; } .contact-list dd { font-family: 'Cardo', Garamond, serif; font-size: 18px; margin-bottom: 4px; } .contact-list a { border-bottom: 0.5px solid var(--ink-faint); transition: border-color 0.2s ease; } .contact-list a:hover { border-color: var(--ink); } .contact-list .pending { color: var(--ink-soft); font-style: italic; font-size: 14px; } /* ── CV summary panel ──────────────────────────────────────────────────── */ .cv-intro { max-width: 640px; font-family: 'Cardo', Garamond, serif; font-size: 18px; line-height: 1.75; margin-bottom: 32px; } .cv-download { display: inline-flex; align-items: center; gap: 10px; border: 0.5px solid var(--ink); color: var(--ink); padding: 12px 22px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .cv-download:hover { background: var(--ink); color: var(--bg); } .cv-download svg { stroke: currentColor; } .cv-toc { max-width: 640px; font-family: 'Cardo', Garamond, serif; font-size: 17px; line-height: 1.8; margin-top: 48px; } .cv-toc-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 0.5px solid var(--ink-faint); } .cv-toc-row:last-child { border-bottom: none; } .cv-toc-row .cv-period { color: var(--ink-soft); font-size: 14px; font-family: 'Inter', sans-serif; white-space: nowrap; align-self: center; } /* ── Footer ────────────────────────────────────────────────────────────── */ footer.site { padding: 32px 0 40px; text-align: center; border-top: 0.5px solid var(--ink-faint); margin-top: auto; } footer.site .profiles { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-soft); } footer.site .profiles a { color: var(--ink-soft); transition: color 0.2s ease; } footer.site .profiles a:hover { color: var(--ink); } footer.site .profiles .dot { opacity: 0.4; font-size: 9px; } footer.site .copyright { margin-top: 16px; font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-soft); opacity: 0.7; } /* ── Responsive (mobile) ───────────────────────────────────────────────── */ @media (max-width: 720px) { .wrap { padding: 0 22px; } header.site .row { flex-direction: column; align-items: flex-start; gap: 14px; } nav.primary { flex-wrap: wrap; gap: 14px; font-size: 12px; width: 100%; } main { padding: 64px 0 48px; } h1.name { font-size: 36px; } h1.page { font-size: 26px; margin-bottom: 24px; } .bio, .prose, .cv-intro { font-size: 16px; } .ornament .line { width: 60px; } .cv-toc-row { flex-direction: column; gap: 4px; padding: 10px 0; } .cv-toc-row .cv-period { font-size: 13px; } }