/* ========================================================================== VARIABLES This file is the control panel for the whole site's look. Change a value here and it updates everywhere the variable is used. Nothing in this file draws anything on screen by itself — it just defines names (custom properties) that other CSS files use. ========================================================================== */ :root { /* --- FONTS ---------------------------------------------------------- */ /* Loaded from Google Fonts in the of each page. --font-display = calligraphy/handwritten style, big titles ONLY (it's hard to read in long sentences, so keep it to short text like "The Story So Far") --font-secondary = elegant serif, used for headings and book titles --font-body = readable typewriter-style font, used for all paragraph text Want to try a different feel? Uncomment one of the alternates below and comment out the current line instead. */ --font-display: 'Homemade Apple', cursive; /* --font-display: 'Beau Rivage', cursive; ← thin elegant script, also tried and rejected */ /* --font-display: 'Mrs Saint Delafield', cursive; ← original, more ornate but harder to read */ /* --font-display: 'Pirata One', cursive; ← more gothic/blackletter */ --font-secondary: 'Playfair Display', Georgia, serif; /* --font-secondary: 'Cormorant Garamond', Georgia, serif; ← softer, rounder */ --font-body: 'Courier Prime', 'Courier New', monospace; /* --font-body: 'Special Elite', 'Courier New', monospace; ← more worn/inky */ /* --- COLOURS --------------------------------------------------------- Base palette: cream paper, cool near-black ink, muted grey-mauve. No more warm brown/sepia — ink now leans black with a blue-violet tinge, and the "sepia" role is a quiet cool grey instead. Every book section can override --color-accent (see the bottom of this file) so each genre gets its own quiet accent colour while everything else stays consistent. */ --color-white: #ffffff; /* true white — used deliberately, e.g. as a clean mat behind book cover art, not as a general page colour */ --color-paper: #f4ead9; /* main background, aged cream paper */ --color-paper-deep: #d8cdc6; /* deeper paper tone, for cards/panels — cool grey-beige rather than golden tan */ --color-parchment: #e9dcbf; /* warm cream, deeper than --color-paper — used ONLY by torn-paper (components.css, section 17), which needs to actually read as paper, not as the cooler grey-mauve --color-paper-deep */ --color-ink: #272636; /* main text colour — near-black with a blue-violet tinge, not brown */ --color-ink-soft: #4e4b54; /* secondary/muted text — same cool grey-mauve family as --color-sepia, just darker for text contrast */ --color-sepia: #898491; /* quiet grey-mauve, for borders, rules, decorative lines — replaces the old warm sepia */ --color-sepia-light: #b3aeb7; /* lighter tint of --color-sepia, for subtler borders/dividers */ --color-charcoal: #201f2b; /* header/footer/accordion backgrounds — near-black with a touch more grey than pure black, cool undertone to match --color-ink */ --color-accent: #6f7d54; /* default muted accent (moss green) */ --color-accent-deep: #52603d; /* darker version, for hover/active */ --color-border: rgba(39, 38, 54, 0.25); --color-focus: #3f5470; /* visible focus outline colour — kept consistent across all genres so focus is always easy to spot */ /* --- SPACING ----------------------------------------------------------- A small scale instead of random pixel values, so spacing stays consistent everywhere. */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; /* --- LAYOUT ------------------------------------------------------------ */ --container-width: 46rem; /* comfortable reading width, like an open book page */ --container-wide: 72rem; /* wider layout, for the homepage bookshelf etc. */ /* The one standard left/right margin between page content and the true viewport edge — .container, .container-wide, .site-nav, .split-panel and any full-bleed section (e.g. .chapter-header in components.css) all use this, so every page edge lines up the same amount. Don't invent a different edge value per element — change it here (or in the media queries below) if the whole site needs more or less breathing room. (Previously reused --space-lg for this; split out into its own variable since --space-lg is also used for a lot of unrelated internal component spacing that shouldn't move in lockstep with the page edge margin.) Scales with viewport width per spec: mobile (<576px): 16–24px tablet (768–992px): 30–40px desktop (1200–1400px): 40–60px large (>1400px): 60–120px Each tier is a clamp() fitted to hit its own named range at that tier's own boundary widths; the unnamed gaps between tiers (576–767px, 992–1199px) just hold the previous tier's upper bound flat rather than inventing an unspecified in-between value. */ --page-gutter: clamp(16px, 4vw, 24px); --radius-sm: 2px; --radius-md: 4px; --shadow-page: 0 2px 10px rgba(39, 38, 54, 0.18); --transition-fast: 150ms ease; /* Breakpoints (CSS can't store these as variables, used directly in media queries in other files — noted here so they're easy to find): tablet: min-width: 640px desktop: min-width: 960px */ } /* --page-gutter tiers — these breakpoints (576/768/992/1200/1400) are specific to the page-edge-margin spec above and deliberately don't match the 640/960 breakpoints components elsewhere use for their own internal responsive layout; don't consolidate the two. */ @media (min-width: 576px) { :root { --page-gutter: 24px; } /* holds mobile's upper bound through the unnamed 576–767px gap */ } @media (min-width: 768px) { :root { --page-gutter: clamp(30px, 4vw, 40px); } /* tablet: 30–40px */ } @media (min-width: 992px) { :root { --page-gutter: 40px; } /* holds tablet's upper bound through the unnamed 992–1199px gap */ } @media (min-width: 1200px) { :root { --page-gutter: clamp(40px, calc(10vw - 80px), 60px); } /* desktop standard: 40–60px */ } @media (min-width: 1400px) { :root { --page-gutter: clamp(60px, calc(6vw - 24px), 120px); } /* large desktop: 60–120px */ } /* ========================================================================== GENRE ACCENTS Each book section gets a data-genre attribute on the tag, e.g: This swaps --color-accent / --color-accent-deep for that page only. Nothing else changes — same fonts, same layout, same components — just a different quiet accent colour, per the brief ("same bookstore, slightly different genre treatment"). ========================================================================== */ [data-genre="resume"] { /* 1. Resume and Experience — charcoal/graphite (green retired per Kathryn's request) */ --color-accent: #5c5a63; --color-accent-deep: #3d3b43; } [data-genre="story"] { /* 2. The Story So Far — dusty terracotta */ --color-accent: #a3644f; --color-accent-deep: #7c4a3a; } [data-genre="writing"] { /* 3. Writing and Editing — ink blue */ --color-accent: #3f5470; --color-accent-deep: #2c3c50; } [data-genre="seo"] { /* 4. The Art of Websites and SEO — slate teal */ --color-accent: #3f6b6b; --color-accent-deep: #2b4d4d; } [data-genre="systems"] { /* 5. Guide to Systems and Processes — olive */ --color-accent: #6b6b3f; --color-accent-deep: #4d4d2b; } [data-genre="ux"] { /* 6. The Encyclopaedia of User Experience — burgundy */ --color-accent: #7a3f4d; --color-accent-deep: #5c2e39; } [data-genre="yoga"] { /* 7. A History of Yoga and Aerial — dusty plum */ --color-accent: #6f5a7d; --color-accent-deep: #51405c; } [data-genre="curiosities"] { /* 8. Collected Works: Art and Curiosities — brass */ --color-accent: #8a6a2f; --color-accent-deep: #6b5122; }