/*
* ═══════════════════════════════════════════════════════════════
* FOUNDER'S DIARY - DESIGN SYSTEM
* ═══════════════════════════════════════════════════════════════
*
* A retro, hand-drawn aesthetic combining:
* - Leather-bound diary (index page)
* - Spiral notepad with pencil sketches (entries)
*
* Usage:
*
* or
*
*
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────────────────────
1. CSS VARIABLES (Design Tokens)
───────────────────────────────────────────────────────────── */
:root {
/* === Colors === */
/* Background */
--color-bg-dark: #2c2416;
--color-bg-paper: #faf8f4;
--color-bg-paper-aged: #f5f0e6;
--color-bg-paper-edge: #d4c4a8;
/* Text */
--color-ink: #2d2d2d;
--color-ink-light: #555;
--color-ink-muted: #888;
--color-ink-faint: #999;
/* Accents */
--color-margin-red: #e8a0a0;
--color-highlight-yellow: #fff9c4;
--color-highlight-yellow-dark: #f9a825;
/* Box colors */
--color-box1: #c44;
--color-box1-bg: rgba(200, 80, 80, 0.1);
--color-box2: #c90;
--color-box2-bg: rgba(200, 150, 0, 0.1);
--color-box3: #4a4;
--color-box3-bg: rgba(80, 150, 80, 0.1);
/* Status colors */
--color-wrong: #c88;
--color-wrong-bg: rgba(200, 100, 100, 0.1);
--color-right: #8b8;
--color-right-bg: rgba(100, 180, 100, 0.1);
/* === Typography === */
--font-handwriting: 'Caveat', cursive;
--font-casual: 'Patrick Hand', cursive;
--font-typewriter: 'Special Elite', monospace;
--font-serif: 'IM Fell English', serif;
/* === Spacing === */
--space-xs: 5px;
--space-sm: 10px;
--space-md: 15px;
--space-lg: 20px;
--space-xl: 30px;
--space-xxl: 40px;
/* === Borders (Sketchy) === */
--border-sketchy: 255px 15px 225px 15px/15px 225px 15px 255px;
--border-blob: 30% 70% 70% 30% / 30% 30% 70% 70%;
--border-torn: 2px 255px 2px 255px/255px 2px 255px 2px;
--border-wobbly: 5px 50px 5px 50px/50px 5px 50px 5px;
--border-card: 3px 40px 3px 40px/40px 3px 40px 3px;
/* === Shadows === */
--shadow-paper: 0 2px 10px rgba(0,0,0,0.2), 0 10px 40px rgba(0,0,0,0.3);
--shadow-card: 3px 3px 0 rgba(0,0,0,0.1);
--shadow-card-hover: 5px 5px 0 rgba(0,0,0,0.15);
/* === 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-dark);
min-height: 100vh;
line-height: 1.6;
}
/* ─────────────────────────────────────────────────────────────
4. DIARY PAGE (Leather-bound book)
───────────────────────────────────────────────────────────── */
.diary {
font-family: var(--font-serif);
max-width: 700px;
margin: 0 auto;
background: linear-gradient(to right,
var(--color-bg-paper-edge) 0%,
#e8dcc8 5%,
var(--color-bg-paper-aged) 10%,
var(--color-bg-paper) 50%,
var(--color-bg-paper-aged) 90%,
#e8dcc8 95%,
var(--color-bg-paper-edge) 100%
);
border-radius: 8px;
box-shadow: var(--shadow-paper), inset 0 0 80px rgba(139,109,76,0.1);
position: relative;
padding: 50px 60px;
overflow: hidden;
color: var(--color-ink);
}
/* Aged paper texture */
.diary::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
pointer-events: none;
}
/* Binding edge */
.diary::after {
content: '';
position: absolute;
left: 45px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom,
transparent 0%, #c4a882 5%, #b8956a 20%,
#c4a882 50%, #b8956a 80%, #c4a882 95%, transparent 100%
);
box-shadow: 1px 0 3px rgba(0,0,0,0.1);
}
/* Diary header */
.diary-header {
text-align: center;
margin-bottom: var(--space-xxl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-bg-paper-edge);
position: relative;
}
.diary-header h1 {
font-family: var(--font-handwriting);
font-size: 3.2rem;
font-weight: 600;
color: #3d2914;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
margin-bottom: 8px;
}
.diary-header .subtitle {
font-family: var(--font-typewriter);
font-size: 0.85rem;
color: #8b6b4a;
letter-spacing: 3px;
text-transform: uppercase;
}
.diary-header .decoration {
margin-top: var(--space-md);
color: #c4a882;
font-size: 1.2rem;
}
/* Diary footer */
.diary-footer {
margin-top: var(--space-xxl);
padding-top: 25px;
border-top: 1px solid var(--color-bg-paper-edge);
text-align: center;
}
.page-number {
font-family: var(--font-typewriter);
font-size: 0.85rem;
color: #b8a088;
}
/* ─────────────────────────────────────────────────────────────
5. ENTRY LIST (Diary index)
───────────────────────────────────────────────────────────── */
.entries {
list-style: none;
}
.entry-link {
display: block;
padding: 25px 20px;
border-bottom: 1px dashed var(--color-bg-paper-edge);
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.entry-link:hover {
background: rgba(212,196,168,0.3);
margin-left: -10px;
margin-right: -10px;
padding-left: 30px;
padding-right: 30px;
border-radius: 4px;
}
.entry-link:last-child {
border-bottom: none;
}
.entry-meta {
font-family: var(--font-typewriter);
font-size: 0.8rem;
color: #8b6b4a;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.entry-meta::before {
content: '✦';
font-size: 0.6rem;
}
.entry-num {
background: #3d2914;
color: var(--color-bg-paper-aged);
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
}
.entry-link h2 {
font-family: var(--font-handwriting);
font-size: 1.7rem;
color: #3d2914;
margin-bottom: 8px;
line-height: 1.2;
}
.entry-preview {
font-size: 0.95rem;
color: #6b5344;
line-height: 1.6;
font-style: italic;
}
.entry-tags {
margin-top: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tag {
font-family: var(--font-typewriter);
font-size: 0.7rem;
padding: 3px 10px;
background: rgba(61,41,20,0.1);
border: 1px solid var(--color-bg-paper-edge);
border-radius: 12px;
color: #6b5344;
}
/* ─────────────────────────────────────────────────────────────
6. NOTEPAD (Entry page container)
───────────────────────────────────────────────────────────── */
.notepad {
font-family: var(--font-casual);
font-size: 18px;
max-width: 800px;
margin: 0 auto;
background:
repeating-linear-gradient(
transparent,
transparent 31px,
#e0d6c8 31px,
#e0d6c8 32px
),
linear-gradient(to right,
var(--color-bg-paper-edge) 0%,
var(--color-bg-paper-aged) 3%,
var(--color-bg-paper) 50%,
var(--color-bg-paper-aged) 97%,
var(--color-bg-paper-edge) 100%
);
padding: 20px 50px 40px 80px;
border-radius: 4px;
box-shadow: var(--shadow-paper), inset 0 0 60px rgba(139,109,76,0.05);
position: relative;
color: var(--color-ink);
}
/* Red margin line */
.notepad::before {
content: '';
position: absolute;
left: 60px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-margin-red);
}
/* Spiral holes */
.notepad::after {
content: '';
position: absolute;
left: 15px;
top: 30px;
bottom: 30px;
width: 30px;
background-image: radial-gradient(circle, var(--color-bg-dark) 8px, transparent 8px);
background-size: 30px 40px;
background-position: 0 0;
}
/* Entry header */
.entry-header {
margin-bottom: 25px;
padding-bottom: var(--space-md);
}
.entry-number {
font-family: var(--font-typewriter);
font-size: 12px;
color: var(--color-ink-muted);
letter-spacing: 2px;
}
.entry-date {
font-family: var(--font-typewriter);
font-size: 13px;
color: #666;
float: right;
}
.notepad h1 {
font-family: var(--font-handwriting);
font-size: 2.8rem;
font-weight: 700;
color: var(--color-ink);
margin: 8px 0;
line-height: 1.1;
position: relative;
display: inline-block;
}
/* Pencil underline effect */
.notepad h1::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--color-ink-light) 0%, var(--color-ink-light) 20%, transparent 20%, transparent 25%,
var(--color-ink-light) 25%, var(--color-ink-light) 60%, transparent 60%, transparent 65%,
var(--color-ink-light) 65%, var(--color-ink-light) 100%
);
opacity: 0.6;
}
.notepad .subtitle {
font-family: var(--font-casual);
color: #666;
font-size: 1rem;
margin-top: 8px;
font-style: italic;
}
/* Entry footer */
.entry-footer {
margin-top: var(--space-xxl);
padding-top: var(--space-lg);
border-top: 2px solid #ddd;
text-align: center;
font-family: var(--font-typewriter);
font-size: 12px;
color: var(--color-ink-faint);
}
/* ─────────────────────────────────────────────────────────────
7. NAVIGATION
───────────────────────────────────────────────────────────── */
/* Back link */
.back-link {
display: inline-block;
font-family: var(--font-typewriter);
color: #666;
text-decoration: none;
font-size: 14px;
margin-bottom: var(--space-md);
padding: var(--space-xs) 0;
border-bottom: 1px dashed #999;
transition: color 0.2s;
}
.back-link:hover {
color: #333;
}
/* Tab navigation */
.nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 25px 0;
padding: var(--space-md) 0;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
.nav-tabs button {
font-family: var(--font-casual);
font-size: 16px;
padding: 8px 16px;
background: transparent;
border: 2px solid #aaa;
cursor: pointer;
color: var(--color-ink-light);
transition: all 0.2s;
border-radius: var(--border-sketchy);
}
.nav-tabs button:hover {
background: rgba(0,0,0,0.05);
border-color: #666;
}
.nav-tabs button.active {
background: var(--color-ink);
color: var(--color-bg-paper-aged);
border-color: var(--color-ink);
}
/* ─────────────────────────────────────────────────────────────
8. SECTIONS & CARDS
───────────────────────────────────────────────────────────── */
/* Sections (tab content) */
.section {
display: none;
animation: fadeIn 0.3s ease;
}
.section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Cards - sketchy boxes */
.card {
margin: 25px 0;
padding: var(--space-lg);
background: rgba(255,255,255,0.4);
border: 2px solid var(--color-ink-muted);
border-radius: var(--border-sketchy);
position: relative;
}
.card h2 {
font-family: var(--font-handwriting);
font-size: 1.6rem;
font-weight: 600;
color: #333;
margin-bottom: var(--space-md);
padding-bottom: 8px;
border-bottom: 2px dashed #ccc;
}
.card h3 {
font-family: var(--font-handwriting);
font-size: 1.3rem;
font-weight: 600;
color: #444;
margin: var(--space-md) 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-md);
text-align: center;
border: 3px solid;
border-radius: var(--border-blob);
}
.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-handwriting);
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.box-1 .box-num { color: #a33; }
.box-2 .box-num { color: #a70; }
.box-3 .box-num { color: #383; }
.box-title {
font-family: var(--font-handwriting);
font-weight: 600;
font-size: 1.2rem;
margin: var(--space-xs) 0;
}
.box-desc {
font-size: 0.85rem;
color: #666;
}
/* ─────────────────────────────────────────────────────────────
10. KEY POINTS (Highlighted insights)
───────────────────────────────────────────────────────────── */
.key-point {
background: linear-gradient(135deg, var(--color-highlight-yellow) 0%, #fff59d 100%);
padding: var(--space-md) var(--space-lg);
margin: var(--space-md) 0;
border-left: 4px solid var(--color-highlight-yellow-dark);
border-radius: var(--border-torn);
font-size: 1rem;
position: relative;
}
.key-point strong {
font-family: var(--font-handwriting);
font-size: 1.2rem;
}
/* Arrow doodle */
.key-point::before {
content: '→';
position: absolute;
left: -25px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: #666;
}
/* ─────────────────────────────────────────────────────────────
11. COMPARISON COLUMNS
───────────────────────────────────────────────────────────── */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin: var(--space-md) 0;
}
.compare-col {
padding: var(--space-md);
border: 2px solid #999;
border-radius: var(--border-wobbly);
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: 1.2rem;
margin-bottom: 8px;
padding-bottom: var(--space-xs);
border-bottom: 1px dashed currentColor;
}
/* ─────────────────────────────────────────────────────────────
12. EXAMPLES / CALLOUTS
───────────────────────────────────────────────────────────── */
.example {
background: rgba(0,0,0,0.03);
padding: 12px var(--space-md);
margin: 12px 0;
border-left: 3px solid var(--color-ink-muted);
font-style: italic;
}
.example-label {
font-family: var(--font-typewriter);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-ink-muted);
font-style: normal;
margin-bottom: var(--space-xs);
}
/* ─────────────────────────────────────────────────────────────
13. TIMELINE
───────────────────────────────────────────────────────────── */
.timeline {
position: relative;
margin: var(--space-lg) 0 var(--space-lg) var(--space-lg);
padding-left: 25px;
border-left: 3px solid var(--color-ink-muted);
}
.timeline-item {
position: relative;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px dashed #ccc;
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-item::before {
content: '●';
position: absolute;
left: -34px;
top: 0;
font-size: 1.2rem;
color: var(--color-ink-light);
}
.timeline-item strong {
font-family: var(--font-handwriting);
font-size: 1.4rem;
color: #333;
}
/* ─────────────────────────────────────────────────────────────
14. FLASHCARDS (Quiz)
───────────────────────────────────────────────────────────── */
.flashcard {
background: #fff;
border: 2px solid #aaa;
padding: 18px;
margin: 12px 0;
cursor: pointer;
border-radius: var(--border-card);
transition: all 0.2s;
box-shadow: var(--shadow-card);
}
.flashcard:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.flashcard .question {
font-family: var(--font-handwriting);
font-size: 1.3rem;
font-weight: 600;
color: #333;
}
.flashcard .hint {
font-family: var(--font-typewriter);
font-size: 11px;
color: var(--color-ink-faint);
margin-top: 8px;
}
.flashcard .answer {
display: none;
margin-top: 12px;
padding-top: 12px;
border-top: 2px dashed #ddd;
color: var(--color-ink-light);
}
.flashcard.revealed .answer {
display: block;
}
.flashcard.revealed .hint {
display: none;
}
/* ─────────────────────────────────────────────────────────────
15. 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 dashed #ddd;
}
.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: 1.2rem;
color: var(--color-box3);
}
.summary-list li strong {
font-family: var(--font-handwriting);
font-size: 1.15rem;
}
/* ─────────────────────────────────────────────────────────────
16. DECORATIONS
───────────────────────────────────────────────────────────── */
/* Coffee stain (for diary page) */
.coffee-stain {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(ellipse at center,
transparent 40%,
rgba(139,90,43,0.08) 50%,
rgba(139,90,43,0.12) 60%,
rgba(139,90,43,0.06) 70%,
transparent 75%
);
top: -20px;
right: 60px;
transform: rotate(-15deg);
pointer-events: none;
}
/* Ink splatter */
.ink-splatter {
position: absolute;
bottom: 30px;
left: 70px;
width: 8px;
height: 8px;
background: #3d2914;
border-radius: 50%;
opacity: 0.3;
}
.ink-splatter::before {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: #3d2914;
border-radius: 50%;
top: -8px;
left: 10px;
}
.ink-splatter::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background: #3d2914;
border-radius: 50%;
top: 5px;
left: 12px;
}
/* Doodles (subtle background icons) */
.doodle {
position: absolute;
font-size: 2rem;
opacity: 0.15;
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────────
17. RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.boxes-grid {
grid-template-columns: 1fr;
}
.compare {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
body {
padding: 15px 10px;
}
.diary {
padding: 30px 25px;
}
.diary::after {
left: 15px;
}
.diary-header h1 {
font-size: 2.4rem;
}
.notepad {
padding: 15px 20px 30px 50px;
}
.notepad::before {
left: 35px;
}
.notepad::after {
left: 5px;
width: 20px;
background-size: 20px 35px;
}
.notepad h1 {
font-size: 2rem;
}
.nav-tabs button {
font-size: 14px;
padding: 6px 12px;
}
.entry-link h2 {
font-size: 1.4rem;
}
}
/* ─────────────────────────────────────────────────────────────
18. 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); }