/* ============================================================ danebalia.com — design system Warm paper & ink · sans display + serif body · section moods Self-contained: no Tailwind, no build step required. Fonts are loaded via in each template . ============================================================ */ :root { --canvas: oklch(0.925 0.012 78); --paper: oklch(0.985 0.006 88); --paper-2: oklch(0.962 0.011 84); --ink: oklch(0.27 0.014 56); --ink-soft: oklch(0.46 0.015 58); --ink-faint: oklch(0.62 0.012 62); --rule: oklch(0.89 0.013 80); --accent: oklch(0.585 0.142 42); --accent-soft: oklch(0.93 0.045 52); --tech: oklch(0.52 0.092 248); --tech-soft: oklch(0.93 0.032 248); --faith: oklch(0.56 0.105 78); --faith-soft: oklch(0.93 0.045 84); --creative: oklch(0.55 0.142 24); --creative-soft:oklch(0.93 0.05 28); --code-bg: oklch(0.255 0.014 56); --code-ink: oklch(0.9 0.012 86); --shadow: 0 1px 2px oklch(0.27 0.02 56/0.04), 0 12px 40px -12px oklch(0.27 0.02 56/0.16); --sans: 'Bricolage Grotesque', system-ui, sans-serif; --serif:'Newsreader', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* per-page section accent — overridden by .is-tech / .is-faith / .is-creative */ --sec: var(--accent); --sec-soft: var(--accent-soft); } [data-theme="dark"] { --canvas: oklch(0.155 0.009 60); --paper: oklch(0.225 0.011 58); --paper-2: oklch(0.27 0.013 58); --ink: oklch(0.93 0.012 86); --ink-soft: oklch(0.74 0.013 80); --ink-faint: oklch(0.58 0.012 70); --rule: oklch(0.34 0.013 62); --accent: oklch(0.72 0.13 48); --accent-soft: oklch(0.32 0.055 46); --tech: oklch(0.72 0.092 248); --tech-soft: oklch(0.32 0.045 248); --faith: oklch(0.79 0.105 84); --faith-soft: oklch(0.34 0.05 84); --creative: oklch(0.74 0.13 30); --creative-soft:oklch(0.34 0.055 30); --code-bg: oklch(0.165 0.01 60); --code-ink: oklch(0.86 0.012 86); --shadow: 0 1px 2px oklch(0 0 0/0.3), 0 16px 48px -16px oklch(0 0 0/0.6); } /* section moods — set on or a wrapper */ .is-tech { --sec: var(--tech); --sec-soft: var(--tech-soft); } .is-faith { --sec: var(--faith); --sec-soft: var(--faith-soft); } .is-creative { --sec: var(--creative); --sec-soft: var(--creative-soft); } /* ---------- reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; } .wrap-wide { max-width: 920px; margin: 0 auto; padding: 0 24px; } /* ---------- shared bits ---------- */ .kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sec); } .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sec); } .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-faint); } .hr { height: 1px; background: var(--rule); border: 0; margin: 0; } h1, h2, h3, h4 { font-family: var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 0; } /* ---------- top bar (nav) ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--canvas) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .topbar__inner { max-width: 920px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .wordmark { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -.01em; text-decoration: none; color: var(--ink); } .topbar a.nav { font-family: var(--mono); font-size: 12px; text-decoration: none; color: var(--ink-soft); padding: 6px 10px; border-radius: 7px; } .topbar a.nav:hover { background: var(--paper-2); color: var(--ink); } .theme-toggle { font-family: var(--mono); font-size: 12px; cursor: pointer; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 12px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ---------- landing masthead ---------- */ .masthead { padding: 80px 0 56px; } .masthead__avatar { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--rule); object-fit: cover; margin-bottom: 24px; } .masthead h1 { font-size: 46px; font-weight: 700; line-height: 1.04; margin: 0 0 16px; } .masthead p { font-size: 21px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 32ch; } .masthead__links { display: flex; gap: 22px; margin-top: 24px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; } .masthead__links a { color: var(--ink-faint); text-decoration: none; } .masthead__links a:hover { color: var(--accent); } /* ---------- featured book card ---------- */ .book-feature { display: flex; gap: 28px; align-items: stretch; padding: 26px; margin: 0 0 64px; border: 1px solid var(--rule); border-radius: 14px; background: linear-gradient(180deg, var(--accent-soft), transparent 90%); text-decoration: none; color: inherit; } .book-feature:hover { border-color: var(--accent); } .book-cover { flex-shrink: 0; border-radius: 4px 8px 8px 4px; color: oklch(0.97 0.02 80); background: linear-gradient(135deg, oklch(0.46 0.11 42), oklch(0.36 0.09 38)); box-shadow: var(--shadow), inset 4px 0 0 oklch(0 0 0/0.18); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 12px; } .book-cover.faith { background: linear-gradient(140deg, oklch(0.46 0.09 80), oklch(0.34 0.07 72)); } .book-cover .ttl { font-family: var(--sans); font-weight: 600; line-height: 1.1; } .book-feature__body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .book-feature__body h2 { font-size: 24px; font-weight: 700; line-height: 1.12; margin: 9px 0 6px; } .book-feature__body p { font-family: var(--serif); font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; } .progress { height: 5px; border-radius: 99px; background: var(--rule); overflow: hidden; max-width: 320px; } .progress > span { display: block; height: 100%; background: var(--sec); border-radius: 99px; } /* ---------- section blocks (landing) ---------- */ .section-block { margin-bottom: 56px; } .section-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 6px; } .section-block__head h3 { font-size: 27px; font-weight: 700; margin-top: 10px; } .section-block__head .more { font-family: var(--mono); font-size: 11px; text-decoration: none; color: var(--ink-faint); white-space: nowrap; } .section-block__head .more:hover { color: var(--sec); } .post-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 17px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); } .post-row:hover { color: var(--sec); } .post-row .t { font-family: var(--serif); font-size: 20px; } .post-row .m { white-space: nowrap; } /* ---------- article ---------- */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--sec); width: 0; z-index: 60; transition: width .1s linear; } .article-head { padding: 40px 0 0; text-align: center; } .article-head .crumbs { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 40px; } .article-head .crumbs a { text-decoration: none; color: var(--ink-faint); } .article-head .crumbs a:hover { color: var(--sec); } .article-head h1 { font-size: 44px; font-weight: 700; line-height: 1.08; margin: 20px 0 24px; } .article-head .byline { display: flex; align-items: center; justify-content: center; gap: 14px; } .kicker.center { justify-content: center; } .reading { display: grid; grid-template-columns: minmax(0, 680px) 200px; gap: 56px; justify-content: center; align-items: start; margin-top: 48px; } .rail { position: sticky; top: 88px; } .rail__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; } .rail__share { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; gap: 8px; font-family: var(--mono); font-size: 10.5px; } .rail__share a { color: var(--ink-faint); text-decoration: none; } .rail__share a:hover { color: var(--sec); } .author-card { max-width: 680px; margin: 64px auto 0; padding: 28px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); display: flex; gap: 20px; align-items: center; } .author-card .nm { font-family: var(--sans); font-weight: 600; font-size: 17px; } .author-card p { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; } .avatar-stub { flex-shrink: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); } /* ---------- prose (markdown body) ---------- */ .prose { font-family: var(--serif); font-size: 19px; line-height: 1.72; color: var(--ink); } .prose > p:first-child { font-size: 22px; line-height: 1.6; color: var(--ink); } .prose p { margin: 0 0 24px; color: var(--ink-soft); } .prose h2 { font-family: var(--sans); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 48px 0 18px; } .prose h3 { font-family: var(--sans); font-weight: 600; font-size: 22px; margin: 36px 0 14px; } .prose a { color: var(--sec); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose strong { color: var(--ink); font-weight: 600; } .prose em { font-style: italic; } .prose ul, .prose ol { margin: 0 0 24px; padding-left: 1.3em; color: var(--ink-soft); } .prose li { margin: 0 0 8px; } .prose img { border-radius: 10px; margin: 28px 0; border: 1px solid var(--rule); } .prose blockquote { margin: 36px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--sec); font-size: 25px; line-height: 1.45; font-style: italic; color: var(--ink); } .prose pre { background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 22px; margin: 28px 0; overflow: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; } .prose code { font-family: var(--mono); font-size: .85em; } .prose :not(pre) > code { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 6px; } .prose pre code { background: none; border: 0; padding: 0; } /* ---------- TOC (injected as nav.toc) — styled for the rail ---------- */ .toc { background: none; border: 0; padding: 0; margin: 0; } .toc-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; font-weight: 500; } .toc-list { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; } .toc-list ul { list-style: none; margin: 8px 0 0; padding-left: 14px; display: flex; flex-direction: column; gap: 10px; } .toc-list a { font-family: var(--serif); font-size: 15px; line-height: 1.3; color: var(--ink-soft); text-decoration: none; } .toc-list a:hover, .toc-list a.active { color: var(--sec); } /* ---------- book index ---------- */ .book-hero { padding: 36px 0 48px; background: linear-gradient(180deg, var(--sec-soft), transparent 70%); } .book-hero__inner { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; } .book-hero .cover { flex-shrink: 0; width: 188px; height: 272px; border-radius: 5px 10px 10px 5px; box-shadow: var(--shadow), inset 5px 0 0 oklch(0 0 0/0.2); display: flex; flex-direction: column; justify-content: space-between; padding: 24px 22px; color: oklch(0.97 0.02 86); background: linear-gradient(140deg, oklch(0.46 0.09 80), oklch(0.34 0.07 72)); } .book-hero h1 { font-size: 38px; font-weight: 700; line-height: 1.06; margin: 12px 0 14px; } .book-hero p.sub { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch; } .btn { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-decoration: none; color: var(--paper); background: var(--sec); padding: 11px 22px; border-radius: 9px; } .btn:hover { opacity: .88; } .part { margin-bottom: 44px; } .part__label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; } .part__label .l { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sec); } .part__label .ln { flex: 1; height: 1px; background: var(--rule); } .part h2 { font-size: 24px; font-weight: 700; margin: 0 0 4px; } .part .epigraph { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-faint); margin: 0 0 22px; } .chapter { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; } .chapter:hover { color: var(--sec); } .chapter .num { flex-shrink: 0; width: 34px; font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--sec); } .chapter .body { flex: 1; } .chapter .body .t { display: block; font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ink); } .chapter .body .d { display: block; font-family: var(--serif); font-size: 15px; color: var(--ink-soft); margin-top: 2px; } .chapter .rt { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; } .chapter.soon { opacity: .55; } .chapter .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 99px; padding: 3px 9px; white-space: nowrap; } /* shelf (multi-book) */ .shelf { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); } .shelf__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; } .shelf__row { display: flex; gap: 28px; flex-wrap: wrap; } .shelf__item { display: flex; gap: 14px; align-items: flex-end; text-decoration: none; color: inherit; } .shelf__item .mini { width: 60px; height: 88px; border-radius: 3px 6px 6px 3px; box-shadow: var(--shadow); background: linear-gradient(140deg, oklch(0.46 0.09 80), oklch(0.34 0.07 72)); } .shelf__item .mini.planned { background: none; border: 1px dashed var(--rule); box-shadow: none; } .shelf__item .nm { font-family: var(--sans); font-weight: 600; font-size: 14px; } .shelf__item .st { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 3px; } /* ---------- category / section ---------- */ .section-head { margin: 28px 0 44px; } .section-head h1 { font-size: 42px; font-weight: 700; margin: 14px 0 12px; } .section-head p { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 52ch; } .book-strip { display: flex; gap: 20px; align-items: center; padding: 20px 22px; margin-bottom: 48px; border: 1px solid var(--rule); border-radius: 13px; background: var(--sec-soft); text-decoration: none; color: inherit; } .book-strip:hover { border-color: var(--sec); } .book-strip .mini { flex-shrink: 0; width: 54px; height: 78px; border-radius: 3px 6px 6px 3px; box-shadow: var(--shadow); background: linear-gradient(140deg, oklch(0.46 0.09 80), oklch(0.34 0.07 72)); } .book-strip .t { font-family: var(--sans); font-weight: 700; font-size: 19px; margin: 5px 0 3px; } .book-strip .d { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); } .book-strip .open { font-family: var(--mono); font-size: 11px; color: var(--sec); white-space: nowrap; } .filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; } .filters h2 { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .02em; } .chips { display: flex; gap: 7px; font-family: var(--mono); font-size: 11px; } .chip { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--rule); color: var(--ink-soft); text-decoration: none; cursor: pointer; } .chip.active { background: var(--sec); color: var(--paper); border-color: var(--sec); } .year { margin-top: 36px; } .year__label { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 4px; } .entry { display: block; padding: 20px 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; } .entry:hover { color: var(--sec); } .entry .t { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--ink); margin: 6px 0 5px; } .entry .d { font-family: var(--serif); font-size: 16px; color: var(--ink-soft); margin: 0; } .entry:hover .t { color: var(--sec); } /* ---------- footers / chapter nav ---------- */ .site-footer { margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--rule); } .site-footer__inner { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); } .chapter-nav { max-width: 680px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; } .chapter-nav a { text-decoration: none; color: var(--ink-soft); } .chapter-nav a:hover { color: var(--sec); } .draft-badge { display: inline-block; margin-left: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 3px 10px; } /* ---------- responsive ---------- */ @media (max-width: 1000px) { .reading { grid-template-columns: 1fr; gap: 0; } .rail { position: static; top: auto; margin-bottom: 40px; } .toc-list { max-height: none; } } @media (max-width: 640px) { body { font-size: 18px; } .masthead h1 { font-size: 36px; } .article-head h1, .book-hero h1 { font-size: 32px; } .section-head h1 { font-size: 32px; } .book-feature, .book-hero__inner, .book-strip { flex-direction: column; align-items: flex-start; } }