/* ==========================================================================
COMPONENTS
Reusable pieces you'll duplicate across pages. Each one is its own
labelled section below — find the one you want, copy the matching
HTML from style-guide.html, and edit the text/content.
Everything here reads its colours/fonts/spacing from variables.css.
Don't hard-code a colour or font here — use a var(--...) instead, so
the whole site stays consistent.
Contents:
1. Layout containers
2. Skip link (accessibility)
3. Global navigation
4. Buttons
5. Display title (calligraphy font, big moments only)
6. Page frame (wraps chapters / long reading content)
7. Book illustration wrapper
8. Catalogue list (homepage "8 sections" list)
9. Cross-reference note
10. Publication line (page numbers / edition details)
11. Pull quote
12. Ornament divider
13. Tag / badge
14. Accordion
15. Return-to-shelf link
16. Site footer
17. Torn paper
18. Icon box
19. Text box
20. Split panel (dark, text + image)
21. Shelf hero (homepage bookshelf + hotspots)
22. Book info panel
========================================================================== */
/* --- 1. LAYOUT CONTAINERS ----------------------------------------------
Wrap page content in one of these so it doesn't stretch edge-to-edge.
.container = narrow, for reading (chapters, CV text, etc.)
.container-wide = wide, for the homepage bookshelf / grids */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--page-gutter);
}
.container-wide {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 var(--page-gutter);
}
/* --- 2. SKIP LINK --------------------------------------------------------
Hidden until a keyboard user tabs to it — lets them jump straight to
the main content instead of tabbing through the whole nav every time.
Put Skip to content as the very
first thing inside , and give your main content id="main". */
.skip-link {
position: absolute;
top: var(--space-md);
left: var(--space-md);
background-color: var(--color-ink);
color: var(--color-paper);
padding: 0.75em 1.25em;
z-index: 100;
text-decoration: none;
border-radius: var(--radius-sm);
/* translateY (a % of the element's OWN height) instead of a fixed
top offset — a fixed offset like "-3rem" has to guess the link's
rendered height, and if it guesses too small, a sliver of the
link peeks into view permanently. -150% always clears it. */
transform: translateY(-150%);
transition: transform var(--transition-fast);
}
.skip-link:focus {
transform: translateY(0);
}
/* --- 3. GLOBAL NAVIGATION ------------------------------------------------
Dark charcoal bar used identically on every page (one of the two
"bookends" of dark colour — see variables.css). Wraps naturally onto
a second line on narrow screens, so no JS menu toggle is needed. */
.site-nav {
background-color: var(--color-charcoal);
}
.site-nav__inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: var(--space-md) var(--page-gutter);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.site-nav__home {
font-family: var(--font-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.95rem;
color: var(--color-paper);
text-decoration: none;
}
.site-nav__links {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-md) var(--space-lg);
margin: 0;
padding: 0;
}
.site-nav__links a {
font-family: var(--font-secondary);
font-size: 0.85rem;
letter-spacing: 0.03em;
color: var(--color-paper);
opacity: 0.8;
text-decoration: none;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
opacity: 1;
text-decoration: underline;
text-underline-offset: 0.25em;
}
/* --- 4. BUTTONS -----------------------------------------------------------
Flat and ink-bordered on purpose — no gradients, bevels or drop
shadows. Charcoal only — the per-genre accent colour is kept out of
buttons and links so they stay identical and predictable everywhere;
the accent is reserved for small decorative touches instead. */
.btn {
display: inline-block;
padding: 0.65em 1.6em;
border: 1.5px solid var(--color-ink);
border-radius: var(--radius-sm);
background-color: transparent;
color: var(--color-ink);
font-family: var(--font-secondary);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover,
.btn:focus-visible {
background-color: var(--color-ink);
color: var(--color-paper);
}
/* For a .btn sitting on a dark background (e.g. inside .text-box--dark
or .book-info-panel) — same shape, paper-coloured instead of ink. */
.btn--light {
border-color: var(--color-paper);
color: var(--color-paper);
}
.btn--light:hover,
.btn--light:focus-visible {
background-color: var(--color-paper);
color: var(--color-charcoal);
}
/* --- 5. DISPLAY TITLE -----------------------------------------------------
The calligraphy font (--font-display), for rare "big moment" titles
only — a homepage headline or a chapter opener, never body content or
navigation, because it's hard to read at small sizes or in long runs. */
.display-title {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.03em;
word-spacing: 0.25em;
font-size: 3.5rem;
line-height: 1.5;
margin: 0 0 var(--space-md);
color: var(--color-ink);
}
@media (max-width: 640px) {
.display-title {
font-size: 2.4rem;
}
}
/* --- 6. PAGE FRAME ---------------------------------------------------------
A quiet double-ruled border for wrapping a block of reading content —
a chapter, a CV section, an excerpt. Built with plain CSS (not the
book illustration) so it stays crisp and reliable at any length or
screen size. */
.page-frame {
position: relative;
max-width: var(--container-width);
margin: 0 auto;
padding: var(--space-2xl) var(--space-xl);
background-color: var(--color-paper);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-page);
}
.page-frame::before {
content: "";
position: absolute;
inset: var(--space-sm);
border: 1px solid var(--color-border);
pointer-events: none;
}
@media (max-width: 640px) {
.page-frame {
padding: var(--space-xl) var(--space-md);
}
.page-frame::before {
inset: var(--space-xs);
}
}
/* --- 7. BOOK ILLUSTRATION WRAPPER ------------------------------------------
For showing the hand-drawn artwork itself (bookshelf, open book) —
just centres it and caps its width. Doesn't try to place text inside
the drawing, which would break on resize; use .page-frame for that. */
.book-illustration {
max-width: 640px;
margin: 0 auto;
}
.book-illustration img {
width: 100%;
height: auto;
}
/* --- 8. CATALOGUE LIST ------------------------------------------------------
The "card catalogue" style list of the 8 sections on the homepage —
a full-width list of rows (like a library ledger), each with a book
cover on the left. Structure: cover → title → what it contains →
"Read the book" link.
Cover images: use .catalogue-row__cover with an once you have
the real covers. Until then, leave it as an empty placeholder box —
see style-guide.html for the placeholder markup. */
.catalogue-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border);
}
.catalogue-row {
display: flex;
align-items: center;
gap: var(--space-lg);
/* Vertical padding is --space-xl, not the smaller --space-lg used
elsewhere — the hover lift + 20% grow on the cover (below) needs
more headroom than --space-lg gives, or the raised cover pops
over the divider line of the row above it. */
padding: var(--space-xl) 0;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.catalogue-row__cover {
flex-shrink: 0;
width: 180px; /* 100px → 120px → 150px → 120px → 180px (+50%) */
aspect-ratio: 8 / 9; /* matches the covers' own artboard proportions — they show the whole angled book, not a flat rectangle, so don't force a taller "book cover" ratio or it'll crop the art */
background-color: transparent; /* the art sits directly on the page — no mat behind it */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
font-family: var(--font-secondary);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-ink-soft);
}
/* Once a cover is placeholder-only (no image yet), add this modifier so
the box reads as "not real content" rather than a filled card. */
.catalogue-row__cover--empty {
border: 1px dashed var(--color-border);
}
.catalogue-row__cover img {
width: 100%;
height: 100%;
object-fit: contain; /* shows the whole illustration — never crops it */
display: block;
transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
/* Lifts the book up 20% larger on hover/focus of the whole row — the
transform lives on the IMAGE, not on .catalogue-row__cover (which
stays a fixed SIZE always, so the row's hoverable area never
changes — scaling the box itself was the earlier approach, and it
let the enlarged box spill outside its own hoverable area, causing
the hover state to flicker on/off as the mouse crossed that
boundary).
Both the rise (hover in) and settle (hover out) use the SAME easing
curve — cubic-bezier(0.22, 1, 0.36, 1), a gentle "ease-out" shape —
so the motion looks like one continuous lift/lower rather than a
fast snap in one direction. Plain "ease-out" was tried first and
still read as jerky, because its curve is too aggressive at the
start of the reverse (lowering) direction.
.catalogue-row__cover's overflow switches to visible during hover so
the zoomed image isn't clipped back down to the original frame (it
was already filling that frame via object-fit:contain, so scaling
it up with overflow still hidden cropped the corners off). This is
safe from the same flicker bug because overflow doesn't change the
box's own size or hit-test area — only .catalogue-row's hover state
(unaffected by any of this) controls when the zoom happens. */
.catalogue-row:hover .catalogue-row__cover,
.catalogue-row:focus-visible .catalogue-row__cover {
overflow: visible;
}
.catalogue-row:hover .catalogue-row__cover img,
.catalogue-row:focus-visible .catalogue-row__cover img {
transform: translateY(-10px) scale(1.2);
}
.catalogue-row__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35em;
}
.catalogue-row__meta {
font-family: var(--font-secondary);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-ink-soft);
}
.catalogue-row__title {
font-family: var(--font-secondary);
font-size: 1.3rem;
margin: 0;
color: var(--color-ink);
}
.catalogue-row__desc {
margin: 0;
font-size: 0.9rem;
color: var(--color-ink-soft);
max-width: 42em;
}
.catalogue-row__cta {
align-self: flex-start;
margin-top: 0.35em;
font-family: var(--font-secondary);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-ink);
}
.catalogue-row:hover .catalogue-row__title,
.catalogue-row:focus-visible .catalogue-row__title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 480px) {
.catalogue-row {
align-items: flex-start;
}
.catalogue-row__cover {
width: 116px;
}
}
/* Dark variant — a full-width charcoal strip, for breaking up a page
that's otherwise all cream. This is just for a section HEADING (like
the homepage's "The Card Catalogue" title + intro line) — not for
wrapping the book list itself. The list's cover art is black
linework on transparent PNGs, which would nearly disappear on a dark
background, so keep .catalogue-list on the normal cream page outside
this wrapper.
Markup: wrap just the heading/intro in it, e.g.
…
…
*/
.catalogue-section--dark {
background-color: var(--color-charcoal);
padding: var(--space-2xl) 0;
}
.catalogue-section--dark h2 {
color: var(--color-paper);
}
.catalogue-section--dark .catalogue-section__intro {
color: var(--color-paper);
opacity: 0.75;
}
/* --- 9. CROSS-REFERENCE NOTE -----------------------------------------------
For lines like "See also: Guide to Systems and Processes." */
.cross-reference {
font-family: var(--font-secondary);
font-style: italic;
font-size: 0.9rem;
color: var(--color-ink-soft);
border-left: 2px solid var(--color-accent);
padding-left: var(--space-sm);
margin: var(--space-lg) 0;
}
/* Collected Works specifically doesn't want the italic + side-rule
treatment (Kathryn's call, from the 3-option link-style artifact,
"Option A" — plain small-caps text link) — scoped to this page's
own genre attribute so Resume's "Further reading → LinkedIn" links
keep the original style untouched. */
[data-genre="curiosities"] .cross-reference {
font-style: normal;
border-left: none;
padding-left: 0;
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-ink);
}
[data-genre="curiosities"] .cross-reference a {
color: inherit;
text-decoration: none;
}
[data-genre="curiosities"] .cross-reference a:hover {
color: var(--color-accent-deep);
}
/* --- 10. PUBLICATION LINE ---------------------------------------------------
Small-caps meta line for subtle "page numbers / publication detail"
flourishes at the bottom of a section — the two spans (volume title,
"End of Volume") sit centered together as one line, under a rule
that's only 75% of the container's width rather than the full
measure, so it reads as a deliberate closing flourish instead of
just another full-width divider. */
.publication-line {
max-width: none; /* overrides the global p{max-width:38em} readability cap — at this element's own 0.75rem font-size that cap resolves to just 456px, which silently left-aligned this whole block instead of letting text-align:center work across its actual container width */
text-align: center;
font-family: var(--font-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-ink-soft);
margin-top: var(--space-xl);
}
.publication-line::before {
content: "";
display: block;
width: 75%;
margin: 0 auto var(--space-sm);
border-top: 1px solid var(--color-border);
}
.publication-line span:not(:last-child)::after {
content: "·";
margin: 0 0.6em;
}
/* --- 10a. END OF VOLUME ------------------------------------------------------
The closing block used at the bottom of every book page: the open-
book ornament (.ornament-divider, section 5) sitting above
.publication-line (section 10). Grouped into one named component —
rather than each page copying the image and the line separately —
so "what a volume's ending looks like" is one thing to edit, not
four drifting copies.
—
alt is empty and the image is decorative, so screen readers skip it. */
.ornament-divider {
display: block;
max-width: 200px;
width: 45%;
height: auto;
margin: var(--space-md) auto;
}
/* --- 13. TAG / BADGE ----------------------------------------------------------
For tool names, skill tags, categories. */
.tag {
display: inline-block;
padding: 0.25em 0.75em;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-ink-soft);
background-color: var(--color-paper-deep);
text-decoration: none; /* harmless on a ; needed so a linked doesn't show an underline under the pill */
}
/* Wrapper for a wrapped row of .tag elements — e.g. a tools/skills
cloud (Key Skills, Resume and Experience). */
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 var(--space-md);
}
/* Accent-colored variant, for when the tags are the point (e.g. named
tools) rather than incidental labels. */
.tag--accent {
border-color: var(--color-accent);
color: var(--color-accent-deep);
background-color: var(--color-paper);
}
a.tag:hover,
a.tag:focus-visible {
border-color: var(--color-ink-soft);
}
/* --- 14. ACCORDION -------------------------------------------------------------
Accessible expand/collapse for the CV sections. Needs a little JS —
see js/main.js. Markup pattern: