/* ========================================================================== Consulting Notes — stylesheet Colours, fonts and spacing all live here. Change a value once and it updates everywhere on the site. ========================================================================== */ /* --- The colour palette. Change these to re-skin the whole site. --------- */ :root { --bg-primary: #faf8f5; /* page background (warm off-white) */ --bg-dark: #1a1a18; /* footer background */ --bg-card: #ffffff; /* white cards */ --bg-hover: #f0ece6; /* row hover */ --accent: #2b4c3f; /* deep green — links, buttons */ --accent-hover: #1f3a30; --accent-muted: #e8f0ec; /* pale green section background */ --text-primary: #1a1a18; --text-secondary:#5c5c56; --text-tertiary: #8a8a84; --text-light: #faf8f5; --border: #e5e2dc; --border-dark: #3a3a36; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --measure: 44rem; /* comfortable reading width */ } /* --- Self-hosted fonts (no internet needed) ----------------------------- */ @font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/inter-latin-400-italic.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family:"Playfair Display"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/playfair-display-latin-600-normal.woff2") format("woff2"); } @font-face { font-family:"Playfair Display"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/playfair-display-latin-700-normal.woff2") format("woff2"); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } .wrap-narrow{ max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--text-light); padding: 0.5rem 1rem; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; color: var(--text-light); } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 245, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .site-header.is-scrolled { border-bottom-color: var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 3.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; } .brand:hover { color: var(--text-primary); } .brand svg { flex: none; } .site-nav { display: flex; gap: 1.5rem; font-size: 0.875rem; } .site-nav a { color: var(--text-secondary); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-primary); } /* --- Home hero ---------------------------------------------------------- */ .hero { position: relative; max-width: 52rem; margin: 0 auto; padding: 6rem 1.5rem 4rem; } .hero h1 { font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.15; margin: 0; } .hero p { margin: 1.25rem 0 0; max-width: 34rem; color: var(--text-secondary); } .hero-art { position: absolute; top: 4rem; right: -16rem; width: 31rem; opacity: 0.4; pointer-events: none; } @media (max-width: 1200px) { .hero-art { display: none; } } /* --- Article list ------------------------------------------------------- */ .entries { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem 6rem; } .entry { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 1rem; margin: 0 -1rem; border-bottom: 1px solid var(--border); color: inherit; transition: background-color 0.2s ease; } .entry:hover { background: var(--bg-hover); color: inherit; } .entry-date { flex: none; width: 7.5rem; padding-top: 0.25rem; text-align: right; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .entry-body { flex: 1; min-width: 0; } .entry-body h2 { margin: 0; font-size: 1.75rem; line-height: 1.3; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s ease; display: inline; } .entry:hover .entry-body h2 { background-size: 100% 1px; } .entry-meta { margin: 0.5rem 0 0; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .entry-summary { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--text-secondary); } .entry-thumb { flex: none; width: 10rem; } .entry-thumb img { height: 6rem; width: 100%; object-fit: cover; border-radius: 4px; } @media (max-width: 800px) { .entry-thumb { display: none; } } @media (max-width: 640px) { .entry { flex-direction: column; gap: 0.25rem; } .entry-date { width: auto; text-align: left; } .entry-body h2 { font-size: 1.375rem; } } /* --- Article page ------------------------------------------------------- */ .article-head { max-width: 52rem; margin: 0 auto; padding: 4rem 1.5rem 2rem; text-align: center; } .article-head h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.2; margin: 0; } .article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: left; } .article-meta > div { min-width: 9rem; } .article-meta dt { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 0.5rem; } .article-meta dd { margin: 0; font-size: 0.875rem; color: var(--text-primary); } .article-meta .note { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.25rem; } .abstract { max-width: var(--measure); margin: 2.5rem auto 0; padding: 0 1.5rem; font-size: 1rem; color: var(--text-secondary); } .abstract p { margin: 0; } /* two-column layout: sticky contents + body */ .article-layout { max-width: 68rem; margin: 3rem auto 0; padding: 0 1.5rem 5rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; } @media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; gap: 2rem; } .toc { position: static !important; max-height: none !important; } } .toc { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } .toc h2 { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 1rem; } .toc ol { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .toc li { margin-bottom: 0.5rem; } .toc li li { margin-left: 1rem; font-size: 0.8125rem; } .toc a { color: var(--text-secondary); } .toc a:hover { color: var(--text-primary); } .toc a.is-active { color: var(--accent); font-weight: 500; } .article-body { min-width: 0; font-size: 1rem; } .article-body h2 { font-size: 1.75rem; margin: 3rem 0 1rem; scroll-margin-top: 5rem; } .article-body h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; margin: 2rem 0 0.75rem; scroll-margin-top: 5rem; } .article-body p { margin: 0 0 1.25rem; } .article-body > *:first-child { margin-top: 0; } /* tables */ .article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0.5rem; font-size: 0.875rem; } .article-body th, .article-body td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border); } .article-body th { text-align: right; font-weight: 500; color: var(--text-primary); } .article-body th:first-child, .article-body td:first-child { text-align: left; } .article-body td { text-align: right; color: var(--text-secondary); } .article-body thead th { border-bottom-width: 1px; } .table-scroll { overflow-x: auto; } figure { margin: 2rem 0; } figure img { width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); } figcaption, .caption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-tertiary); } /* maths */ .math-block { overflow-x: auto; overflow-y: hidden; margin: 1.75rem 0; padding: 0.25rem 0; } /* references */ .references { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .references h2 { margin-top: 0; } .references ol { padding-left: 1.25rem; font-size: 0.875rem; color: var(--text-secondary); } .references li { margin-bottom: 0.75rem; } /* --- About page --------------------------------------------------------- */ .about-intro { max-width: 52rem; margin: 0 auto; padding: 5rem 1.5rem 4rem; text-align: center; } .about-intro h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); margin: 0; } .about-intro .kicker { margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .about-intro .prose { max-width: 36rem; margin: 1.5rem auto 0; text-align: left; } .band { padding: 4rem 1.5rem; background: var(--accent-muted); } .band h2 { font-size: 1.875rem; text-align: center; margin: 0 0 3rem; } .band-inner { max-width: 56rem; margin: 0 auto; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; } .card { background: var(--bg-card); border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .card svg { color: var(--accent); margin-bottom: 1rem; } .card h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; } .card p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); } .timeline { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem; } .timeline h2 { font-size: 1.875rem; text-align: center; margin: 0 0 3rem; } .timeline-item { display: flex; gap: 2rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .timeline-when { flex: none; width: 9rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-tertiary); padding-top: 0.15rem; } .timeline-what h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.35rem; } .timeline-what p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); } @media (max-width: 640px) { .timeline-item { flex-direction: column; gap: 0.25rem; } .timeline-when { width: auto; } } .contact { text-align: center; padding: 4rem 1.5rem; } .contact h2 { font-size: 1.875rem; margin: 0 0 0.75rem; } .contact p { margin: 0 auto 1.5rem; max-width: 30rem; color: var(--text-secondary); } .button { display: inline-block; background: var(--accent); color: var(--text-light); padding: 0.75rem 1.5rem; border-radius: 6px; font-size: 0.9375rem; font-weight: 500; } .button:hover { background: var(--accent-hover); color: var(--text-light); } /* --- Footer ------------------------------------------------------------- */ .site-footer { background: var(--bg-dark); color: var(--text-light); padding: 3.5rem 1.5rem; margin-top: 0; } .site-footer .wrap-narrow { padding: 0; } .site-footer p { margin: 0 0 1.5rem; font-size: 0.875rem; color: #b8b8b0; max-width: 36rem; } .site-footer a { color: var(--text-light); font-size: 0.875rem; } .site-footer a:hover { color: #b8b8b0; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; } .footer-legal { padding-top: 1.5rem; border-top: 1px solid var(--border-dark); font-size: 0.8125rem; color: var(--text-tertiary); } /* --- Gentle fade-in on scroll (disabled if JS is off) ------------------- */ .js .reveal { opacity: 0; transform: translateY(16px); } .js .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } } /* --- Print -------------------------------------------------------------- */ @media print { .site-header, .toc, .site-footer, .hero-art { display: none; } .article-layout { display: block; } body { background: #fff; } } /* --- "This is sample content" banner ------------------------------------ Delete the