/*
* FOUNDER'S DIARY - DESIGN SYSTEM
*
* Clean editorial aesthetic inspired by long-form journalism.
*
* Usage:
*
* or
*
*/
/* ─────────────────────────────────────────────────────────────
1. CSS VARIABLES (Design Tokens)
───────────────────────────────────────────────────────────── */
:root {
/* === Colors === */
/* Background */
--color-bg-dark: #1A1A2E;
--color-bg-paper: #FAF8F5;
--color-bg-paper-aged: #F5F2ED;
--color-bg-paper-edge: #E8E4DF;
/* Text */
--color-ink: #1A1A2E;
--color-ink-dark: #1A1A2E;
--color-ink-warm: #5A5A6E;
--color-ink-light: #5A5A6E;
--color-ink-muted: #8A8A9A;
--color-ink-faint: #ACACAC;
--color-accent-brown: #6B7B8D;
--color-accent-tan: #B8C4D0;
--color-accent-warm: #8A8A9A;
/* Accents */
--color-margin-red: #D94F3D;
--color-highlight-yellow: rgba(217, 79, 61, 0.08);
--color-highlight-yellow-dark: #D94F3D;
/* Box colors */
--color-box1: #D94F3D;
--color-box1-bg: rgba(217, 79, 61, 0.08);
--color-box2: #C9963B;
--color-box2-bg: rgba(201, 150, 59, 0.08);
--color-box3: #4A7C59;
--color-box3-bg: rgba(74, 124, 89, 0.08);
/* Status colors */
--color-wrong: #D94F3D;
--color-wrong-bg: rgba(217, 79, 61, 0.06);
--color-right: #4A7C59;
--color-right-bg: rgba(74, 124, 89, 0.06);
/* === Typography === */
--font-handwriting: 'Libre Baskerville', Georgia, serif;
--font-casual: 'Source Sans 3', -apple-system, sans-serif;
--font-typewriter: 'Source Sans 3', -apple-system, sans-serif;
--font-serif: 'Libre Baskerville', Georgia, serif;
/* === Spacing === */
--space-xs: 5px;
--space-sm: 10px;
--space-md: 15px;
--space-lg: 20px;
--space-xl: 30px;
--space-xxl: 40px;
/* === Borders === */
--border-sketchy: 2px;
--border-blob: 2px;
--border-torn: 2px;
--border-wobbly: 2px;
--border-card: 2px;
/* === Shadows === */
--shadow-paper: 0 1px 3px rgba(0,0,0,0.08);
--shadow-card: 0 1px 3px rgba(0,0,0,0.06);
--shadow-card-hover: 0 4px 12px rgba(0,0,0,0.1);
/* === Line heights === */
--line-ruled: 32px;
}
/* ─────────────────────────────────────────────────────────────
2. FONT IMPORTS
───────────────────────────────────────────────────────────── */
/* Add to your HTML :
*/
/* ─────────────────────────────────────────────────────────────
3. BASE RESET & DEFAULTS
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--color-bg-paper);
min-height: 100vh;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* ─────────────────────────────────────────────────────────────
4. ENTRY LIST (Diary index)
───────────────────────────────────────────────────────────── */
.entries {
list-style: none;
}
.entry-link {
display: block;
padding: 28px 0;
border-bottom: 1px solid var(--color-bg-paper-edge);
transition: all 0.2s ease;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.entry-link:hover {
padding-left: 12px;
}
.entry-link:last-child {
border-bottom: none;
}
.entry-meta {
font-family: var(--font-typewriter);
font-size: 13px;
font-weight: 600;
color: var(--color-accent-brown);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: var(--space-sm);
letter-spacing: 0.5px;
}
.entry-meta::before {
content: none;
}
.entry-num {
background: var(--color-ink);
color: var(--color-bg-paper);
padding: 2px 8px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
.entry-link h2 {
font-family: var(--font-handwriting);
font-size: 1.25rem;
color: var(--color-ink);
margin-bottom: 8px;
line-height: 1.3;
}
.entry-preview {
font-size: 0.95rem;
color: var(--color-ink-light);
line-height: 1.7;
font-style: italic;
}
.entry-tags {
margin-top: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tag {
font-family: var(--font-typewriter);
font-size: 12px;
font-weight: 500;
padding: 3px 10px;
background: transparent;
border: 1px solid var(--color-bg-paper-edge);
border-radius: 2px;
color: var(--color-ink-light);
}
/* ─────────────────────────────────────────────────────────────
6. NOTEPAD (Entry page container)
───────────────────────────────────────────────────────────── */
.notepad {
font-family: var(--font-casual);
font-size: 18px;
max-width: 780px;
width: 100%;
margin: 0 auto;
padding: 80px 24px 120px;
position: relative;
color: var(--color-ink);
}
.entry-header {
margin-bottom: 40px;
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-bg-paper-edge);
}
.entry-number {
font-family: var(--font-typewriter);
font-size: 13px;
font-weight: 600;
color: var(--color-accent-brown);
letter-spacing: 2px;
text-transform: uppercase;
}
.entry-date {
font-family: var(--font-typewriter);
font-size: 13px;
color: var(--color-ink-muted);
float: right;
}
.notepad h1 {
font-family: var(--font-handwriting);
font-size: clamp(36px, 5vw, 52px);
font-weight: 700;
color: var(--color-ink);
margin: 12px 0;
line-height: 1.2;
position: relative;
display: inline-block;
}
.notepad h1::after {
content: none;
}
.notepad .subtitle {
font-family: var(--font-serif);
color: var(--color-ink-light);
font-size: 1.1rem;
margin-top: 12px;
font-style: italic;
line-height: 1.5;
}
.entry-footer {
margin-top: 80px;
padding-top: var(--space-lg);
border-top: 1px solid var(--color-bg-paper-edge);
text-align: center;
font-family: var(--font-typewriter);
font-size: 13px;
color: var(--color-ink-faint);
}
/* ─────────────────────────────────────────────────────────────
7. NAVIGATION
───────────────────────────────────────────────────────────── */
.back-link {
display: inline-block;
font-family: var(--font-typewriter);
color: var(--color-ink-muted);
text-decoration: none;
font-size: 14px;
margin-bottom: var(--space-lg);
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--color-bg-paper-edge);
transition: color 0.2s;
}
.back-link:hover {
color: var(--color-ink);
}
.nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 32px 0;
padding: 0;
border-top: none;
border-bottom: 1px solid var(--color-bg-paper-edge);
}
.nav-tabs button {
font-family: var(--font-casual);
font-size: 15px;
font-weight: 500;
padding: 10px 18px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--color-ink-muted);
transition: all 0.2s;
border-radius: 0;
}
.nav-tabs button:hover {
color: var(--color-ink);
}
.nav-tabs button.active {
background: transparent;
color: var(--color-ink);
border-bottom-color: var(--color-ink);
}
/* ─────────────────────────────────────────────────────────────
8. SECTIONS & CARDS
───────────────────────────────────────────────────────────── */
.section {
display: none;
animation: fadeIn 0.3s ease;
}
.section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
margin: 32px 0;
padding: 28px;
background: #fff;
border: 1px solid var(--color-bg-paper-edge);
border-radius: 2px;
position: relative;
}
.card h2 {
font-family: var(--font-handwriting);
font-size: 28px;
font-weight: 700;
color: var(--color-ink);
margin-bottom: var(--space-md);
padding-bottom: 12px;
border-bottom: 1px solid var(--color-bg-paper-edge);
}
.card h3 {
font-family: var(--font-handwriting);
font-size: 22px;
font-weight: 700;
color: var(--color-ink);
margin: var(--space-lg) 0 var(--space-sm);
}
/* ─────────────────────────────────────────────────────────────
9. THREE BOXES (Framework visual)
───────────────────────────────────────────────────────────── */
.boxes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.box {
padding: var(--space-lg);
text-align: center;
border: 1px solid;
border-radius: 2px;
}
.box-1 { border-color: var(--color-box1); background: var(--color-box1-bg); }
.box-2 { border-color: var(--color-box2); background: var(--color-box2-bg); }
.box-3 { border-color: var(--color-box3); background: var(--color-box3-bg); }
.box-num {
font-family: var(--font-casual);
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.box-1 .box-num { color: var(--color-box1); }
.box-2 .box-num { color: var(--color-box2); }
.box-3 .box-num { color: var(--color-box3); }
.box-title {
font-family: var(--font-handwriting);
font-weight: 700;
font-size: 1rem;
margin: var(--space-xs) 0;
}
.box-desc {
font-size: 0.85rem;
color: var(--color-ink-light);
}
/* ─────────────────────────────────────────────────────────────
10. KEY POINTS (Highlighted insights)
───────────────────────────────────────────────────────────── */
.key-point {
background: var(--color-highlight-yellow);
padding: 20px 24px;
margin: 24px 0;
border-left: 3px solid var(--color-highlight-yellow-dark);
border-radius: 2px;
font-size: 1rem;
position: relative;
}
.key-point strong {
font-family: var(--font-handwriting);
font-size: 1rem;
}
.key-point::before {
content: none;
}
/* ─────────────────────────────────────────────────────────────
11. COMPARISON COLUMNS
───────────────────────────────────────────────────────────── */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.compare-col {
padding: var(--space-lg);
border: 1px solid var(--color-bg-paper-edge);
border-radius: 2px;
font-size: 0.95rem;
}
.compare-col.wrong {
background: var(--color-wrong-bg);
border-color: var(--color-wrong);
}
.compare-col.right {
background: var(--color-right-bg);
border-color: var(--color-right);
}
.compare-col strong {
display: block;
font-family: var(--font-handwriting);
font-size: 1rem;
margin-bottom: 8px;
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-bg-paper-edge);
}
/* ─────────────────────────────────────────────────────────────
12. ASIDE (Personal voice callout — left bar, no label)
───────────────────────────────────────────────────────────── */
.aside {
border-left: 3px solid var(--color-ink);
padding: 2px 0 2px 16px;
margin: 14px 0;
font-style: italic;
color: var(--color-ink-light);
line-height: 1.65;
}
/* ─────────────────────────────────────────────────────────────
12b. NYANTRACE CALLOUT (Entry footer conversion element)
───────────────────────────────────────────────────────────── */
.nyantrace-callout {
border: 1px solid var(--color-ink);
border-radius: 2px;
padding: 20px 24px;
margin: 60px 0 32px;
display: flex;
flex-direction: column;
gap: 6px;
}
.nyantrace-callout-label {
font-family: var(--font-typewriter);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.nyantrace-callout-name {
font-family: var(--font-handwriting);
font-size: 1.4rem;
font-weight: 700;
color: var(--color-ink);
line-height: 1.2;
}
.nyantrace-callout p {
font-family: var(--font-casual);
font-size: 0.95rem;
color: var(--color-ink-light);
line-height: 1.6;
margin: 0;
}
.nyantrace-callout a {
font-family: var(--font-typewriter);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
border-bottom: 1px solid var(--color-ink-muted);
padding-bottom: 1px;
align-self: flex-start;
margin-top: 4px;
transition: border-color 0.2s;
}
.nyantrace-callout a:hover {
border-color: var(--color-ink);
}
/* ─────────────────────────────────────────────────────────────
13. EXAMPLES / CALLOUTS
───────────────────────────────────────────────────────────── */
.example {
background: rgba(0,0,0,0.02);
padding: 16px 20px;
margin: 16px 0;
border-left: 3px solid var(--color-bg-paper-edge);
font-style: italic;
}
.example-label {
font-family: var(--font-typewriter);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-ink-muted);
font-style: normal;
margin-bottom: var(--space-xs);
}
/* ─────────────────────────────────────────────────────────────
14. TIMELINE
───────────────────────────────────────────────────────────── */
.timeline {
position: relative;
margin: var(--space-lg) 0 var(--space-lg) var(--space-lg);
padding-left: 25px;
border-left: 2px solid var(--color-bg-paper-edge);
}
.timeline-item {
position: relative;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-bg-paper-edge);
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-item::before {
content: '';
position: absolute;
left: -32px;
top: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-ink-muted);
}
.timeline-item strong {
font-family: var(--font-handwriting);
font-size: 1.05rem;
color: var(--color-ink);
}
/* ─────────────────────────────────────────────────────────────
15. FLASHCARDS (Quiz)
───────────────────────────────────────────────────────────── */
.flashcard {
background: #fff;
border: 1px solid var(--color-bg-paper-edge);
padding: 20px 24px;
margin: 16px 0;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
box-shadow: var(--shadow-card);
}
.flashcard:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-card-hover);
}
.flashcard .question {
font-family: var(--font-handwriting);
font-size: 1rem;
font-weight: 700;
color: var(--color-ink);
}
.flashcard .hint {
font-family: var(--font-typewriter);
font-size: 12px;
color: var(--color-ink-faint);
margin-top: 8px;
}
.flashcard .answer {
display: none;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-bg-paper-edge);
color: var(--color-ink-light);
}
.flashcard.revealed .answer {
display: block;
}
.flashcard.revealed .hint {
display: none;
}
/* ─────────────────────────────────────────────────────────────
16. SUMMARY LIST
───────────────────────────────────────────────────────────── */
.summary-list {
list-style: none;
margin: var(--space-md) 0;
}
.summary-list li {
padding: var(--space-sm) 0 var(--space-sm) 30px;
position: relative;
border-bottom: 1px solid var(--color-bg-paper-edge);
}
.summary-list li:last-child {
border-bottom: none;
}
.summary-list li::before {
content: '✓';
position: absolute;
left: var(--space-xs);
top: var(--space-sm);
font-size: 1rem;
color: var(--color-box3);
font-weight: 700;
}
.summary-list li strong {
font-family: var(--font-handwriting);
font-size: 0.95rem;
}
/* ─────────────────────────────────────────────────────────────
17. DECORATIONS (hidden in editorial mode)
───────────────────────────────────────────────────────────── */
.coffee-stain,
.ink-splatter,
.ink-splatter::before,
.ink-splatter::after,
.doodle {
display: none;
}
/* ─────────────────────────────────────────────────────────────
18. RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.boxes-grid {
grid-template-columns: 1fr;
}
.compare {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.stat-bar .label { min-width: 90px; font-size: 0.75rem; }
.notepad {
padding: 40px 20px 60px;
}
.notepad h1 {
font-size: 1.8rem;
}
.nav-tabs button {
font-size: 14px;
padding: 8px 14px;
}
.entry-link h2 {
font-size: 1.3rem;
}
}
/* ─────────────────────────────────────────────────────────────
19. PROCESS FLOW (Horizontal step chains)
───────────────────────────────────────────────────────────── */
.process-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px 0;
flex-wrap: wrap;
}
.process-step {
background: #fff;
border: 1px solid var(--color-bg-paper-edge);
padding: 8px 16px;
border-radius: 2px;
font-family: var(--font-casual);
font-size: 0.95rem;
font-weight: 600;
text-align: center;
}
.process-arrow {
font-size: 1.1rem;
color: var(--color-ink-muted);
}
/* ─────────────────────────────────────────────────────────────
20. STAT BAR (Horizontal bar charts)
───────────────────────────────────────────────────────────── */
.stat-bar {
margin: 8px 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
}
.stat-bar .label {
min-width: 140px;
font-size: 0.85rem;
font-family: var(--font-casual);
color: var(--color-ink-light);
text-align: right;
}
.stat-bar .bar-track {
flex: 1;
height: 18px;
background: rgba(0,0,0,0.03);
border: 1px solid var(--color-bg-paper-edge);
border-radius: 2px;
overflow: hidden;
}
.stat-bar .bar-fill {
height: 100%;
border-radius: 2px;
background: var(--color-ink-muted);
opacity: 0.3;
}
.stat-bar .pct {
font-family: var(--font-casual);
font-weight: 700;
font-size: 0.95rem;
min-width: 36px;
color: var(--color-ink);
}
.stat-bar.challenge .bar-fill {
background: var(--color-box2);
opacity: 0.4;
}
/* ─────────────────────────────────────────────────────────────
21. UTILITIES
───────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--color-ink-muted); }
.text-small { font-size: 0.85rem; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
/* ─────────────────────────────────────────────────────────────
22. PAGINATION
───────────────────────────────────────────────────────────── */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.pagination-link {
font-family: var(--font-casual);
font-size: 0.95rem;
color: var(--color-ink-muted);
text-decoration: none;
padding: 8px 16px;
border-radius: 2px;
transition: all 0.2s ease;
}
.pagination-link:hover {
color: var(--color-ink);
background: var(--color-bg-paper-aged);
}
.pagination-link.disabled {
opacity: 0.3;
pointer-events: none;
}
.page-indicator {
font-family: var(--font-casual);
font-size: 0.9rem;
color: var(--color-ink-muted);
}