/* ========================================================================= stephen-bosch.com — personal webpage stylesheet ------------------------------------------------------------------------- A standalone site, separate from the In Transit travel blog. It has its own look on purpose: cleaner and more typographic than 2intransit.com. Structure of this file: 1. Design tokens (colours, fonts, spacing) — change these to re-theme. 2. Base / resets 3. Layout helpers (container, sections) 4. Navigation 5. Buttons 6. Hero (intro + photo) 7. About 8. Projects 9. Notes (list + individual note pages) 10. Footer 11. Responsive tweaks ========================================================================= */ /* ============================ 1. DESIGN TOKENS ========================== */ :root { /* Colours — matched to the logo: orange #E1701F + dark #24262B. */ --bg: #ffffff; /* page background */ --bg-alt: #f7f6f4; /* tinted section background (warm) */ --ink: #24262B; /* main text (matches the logo's dark) */ --ink-soft: #6b6a72; /* muted / secondary text */ --line: #e7e4df; /* borders and dividers (warm) */ --accent: #E1701F; /* primary accent (logo orange) */ --accent-dark: #c25f14; /* accent on hover */ --accent-soft: #fbeadd; /* very light accent tint */ /* Fonts — loaded from Google Fonts in the page */ --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Spacing scale */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem; --maxw: 1080px; /* max content width */ --radius: 10px; /* rounded-corner size */ } /* ============================ 2. BASE / RESET =========================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; font-weight: 600; } h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); letter-spacing: -0.01em; } h3 { font-size: 1.2rem; } p { color: var(--ink-soft); } a { color: var(--accent); text-decoration: none; transition: color 150ms ease; } a:hover { color: var(--accent-dark); } /* Small monospace label above section headings, e.g. "01 / ABOUT" */ .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: var(--sp-2); } /* ============================ 3. LAYOUT ================================= */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-3); } .container--narrow { max-width: 720px; } .section { padding-block: var(--sp-6); } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .section-lead { max-width: 620px; margin-top: var(--sp-2); } /* ============================ 4. NAVIGATION ============================= */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; } .nav-logo span { color: var(--accent); } /* Logo height is tuned so the "stephen bosch" wordmark inside the SVG renders at ~0.92rem — the same size as the nav links to its right. */ .nav-logo img { height: 44px; width: auto; display: block; } .nav-links { list-style: none; display: flex; gap: var(--sp-3); align-items: center; } .nav-links a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; } .nav-links a:hover { color: var(--ink); } /* ============================ 5. BUTTONS =============================== */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; padding: 0.7rem 1.3rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; } /* ============================ 6. HERO ================================== */ .hero { padding-block: var(--sp-5); } /* Two columns: intro text on the left, photo on the right. Collapses to a single column on narrow screens (see section 11). */ .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-5); align-items: center; } .hero h1 .accent { color: var(--accent); } .hero-sub { font-size: 1.15rem; max-width: 50ch; margin-top: var(--sp-3); } /* Row of small text links (email / GitHub) under the intro */ .hero-links { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; } .hero-links a { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); } .hero-links a:hover { color: var(--accent); } /* The photo. Slightly rotated for a casual, snapshot feel. */ .hero-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(36,38,43,0.12); transform: rotate(1.5deg); aspect-ratio: 3 / 4; background: var(--accent-soft); /* centres the placeholder text when there's no image yet */ display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.82rem; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================ 7. ABOUT ================================= */ .about-body p + p { margin-top: var(--sp-2); } /* ============================ 8. PROJECTS ============================= */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } .card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(36,38,43,0.06); } .card--featured { grid-column: 1 / -1; } .card-media { height: 200px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.82rem; border-bottom: 1px solid var(--line); } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } .card-year { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: var(--sp-1); } .card-body h3 { margin-bottom: var(--sp-1); } .card-body p { font-size: 0.92rem; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-2); } .card-links { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: auto; padding-top: var(--sp-3); } /* Small pill used for project tags */ .chip { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); padding: 0.25rem 0.6rem; border-radius: 6px; } /* ============================ 9. NOTES =============================== */ /* The list of notes shown on the home page */ .note-list { margin-top: var(--sp-4); border-top: 1px solid var(--line); } .note-item { border-bottom: 1px solid var(--line); } .note-item a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--ink); } .note-item a:hover { color: var(--accent); } .note-item h3 { font-size: 1.05rem; font-weight: 500; } .note-item p { font-size: 0.92rem; margin-top: 0.2rem; } .note-date { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; } /* An individual note page */ .note-header { padding-block: var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--line); } .note-header h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); } .note-header .note-date { display: block; margin-bottom: var(--sp-2); } /* Body text of a note — comfortable reading measure */ .prose { padding-block: var(--sp-4) var(--sp-6); } .prose p { font-size: 1.05rem; color: var(--ink); } .prose p + p { margin-top: var(--sp-3); } .prose h2 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); } .prose ul, .prose ol { margin: var(--sp-2) 0 var(--sp-2) var(--sp-3); color: var(--ink); } .prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--sp-2); margin: var(--sp-3) 0; color: var(--ink-soft); font-style: italic; } .back-link { font-family: var(--font-mono); font-size: 0.85rem; } /* ============================ 10. FOOTER ============================== */ .footer { border-top: 1px solid var(--line); padding-block: var(--sp-4); } .footer-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-3); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft); } .footer-links { display: flex; gap: var(--sp-3); } .footer-links a { color: var(--ink-soft); } .footer-links a:hover { color: var(--accent); } /* ============================ 11. RESPONSIVE ========================== */ @media (max-width: 780px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .hero-photo { max-width: 280px; transform: rotate(1deg); } .note-item a { flex-direction: column; gap: 0.25rem; } .nav-links { gap: var(--sp-2); } .nav-links a { font-size: 0.85rem; } .nav-logo img { height: 36px; } :root { --sp-6: 4rem; --sp-5: 3rem; } }