/* ============================================================ Book Site — single global stylesheet Layers keep specificity predictable. ============================================================ */ @layer reset, tokens, base, layout, components, utilities; /* ---------- reset ---------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :target { scroll-margin-top: 5rem; } } /* ---------- tokens ---------- */ @layer tokens { :root { color-scheme: light dark; /* spacing — 4px base */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* type scale (1.25) */ --text-xs: .8125rem; --text-sm: .9375rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; /* radii */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* containers */ --prose: 68ch; --layout: 1180px; /* motion */ --ease: cubic-bezier(.2, 0, 0, 1); --dur-hover: 150ms; --dur-enter: 420ms; /* fonts (overridable by theme block) */ --font-head: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* default accent (palette blocks override) */ --accent: #B5462E; --accent-hover: #9B3B25; --accent-contrast: #ffffff; } /* ----- palettes (data-palette on ) ----- */ /* Anatomy — warm cream + arterial terracotta (default) */ :root, [data-palette="anatomy"] { --bg: #FAF7F2; --bg-elevated: #FFFFFF; --surface-sunk: #F1ECE3; --border: #E7E0D2; --border-strong: #D6CDBB; --text: #1F1B16; --text-muted: #6B6357; --accent: #B5462E; --accent-hover: #9B3B25; --accent-soft: #F4E3DC; --accent-contrast: #fff; --shadow: 0 1px 2px rgba(31,27,22,.05), 0 8px 24px rgba(31,27,22,.06); } [data-palette="clinical"] { --bg: #F6F8F6; --bg-elevated: #FFFFFF; --surface-sunk: #EAF0EC; --border: #DCE5DE; --border-strong: #C6D3C9; --text: #182019; --text-muted: #5C6A60; --accent: #2F7D5B; --accent-hover: #266649; --accent-soft: #DCEDE3; --accent-contrast: #fff; --shadow: 0 1px 2px rgba(24,32,25,.05), 0 8px 24px rgba(24,32,25,.06); } [data-palette="amber"] { --bg: #FBF8F3; --bg-elevated: #FFFFFF; --surface-sunk: #F3ECE0; --border: #E8DFCE; --border-strong: #D8CBB2; --text: #1E1A12; --text-muted: #6B6149; --accent: #C2691B; --accent-hover: #A4570F; --accent-soft: #F6E6D2; --accent-contrast: #fff; --shadow: 0 1px 2px rgba(30,26,18,.05), 0 8px 24px rgba(30,26,18,.06); } @media (prefers-color-scheme: dark) { :root, [data-palette="anatomy"] { --bg: #1A1714; --bg-elevated: #221E1A; --surface-sunk: #14110E; --border: #322C25; --border-strong: #463E34; --text: #ECE6DA; --text-muted: #A89E8E; --accent: #E8896E; --accent-hover: #F09B82; --accent-soft: #3A271F; --accent-contrast: #1A1714; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } [data-palette="clinical"] { --bg: #131814; --bg-elevated: #1B221D; --surface-sunk: #0E120F; --border: #28332B; --border-strong: #39473C; --text: #E4EAE5; --text-muted: #95A398; --accent: #5FBF8E; --accent-hover: #74CF9F; --accent-soft: #1E2E25; --accent-contrast: #0E120F; } [data-palette="amber"] { --bg: #1A160F; --bg-elevated: #221D14; --surface-sunk: #130F09; --border: #322A1D; --border-strong: #463B28; --text: #ECE3D2; --text-muted: #A99B7E; --accent: #E8A05A; --accent-hover: #F2B070; --accent-soft: #3A2C18; --accent-contrast: #1A160F; } } /* fonts (data-font on ) */ [data-font="source"] { --font-head: "Source Serif 4", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; } [data-font="lora"] { --font-head: "Lora", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; } } /* ---------- base ---------- */ @layer base { body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background: var(--bg); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -.01em; color: var(--text); } h1 { font-size: clamp(2.4rem, 5vw, var(--text-5xl)); letter-spacing: -.02em; } h2 { font-size: clamp(1.6rem, 3vw, var(--text-3xl)); } h3 { font-size: var(--text-xl); } p { text-wrap: pretty; } a:hover { color: var(--accent); } strong { font-weight: 600; } ::selection { background: var(--accent-soft); color: var(--text); } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } } /* ---------- layout ---------- */ @layer layout { .layout { width: 100%; max-width: var(--layout); margin-inline: auto; padding-inline: var(--space-5); } .prose { max-width: var(--prose); } .prose p + p { margin-top: var(--space-5); } .section { padding-block: var(--space-16); } .section-lg { padding-block: var(--space-24); } .stack > * + * { margin-top: var(--space-4); } .center { text-align: center; } @media (min-width: 720px) { .layout { padding-inline: var(--space-8); } } } /* ---------- components ---------- */ @layer components { /* nav */ .nav { position: sticky; top: 0; z-index: 50; height: 56px; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-block-end: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease), transform .3s var(--ease); } .nav[data-scrolled="true"] { border-block-end-color: var(--border); } .nav[data-hidden="true"] { transform: translateY(-100%); } .nav .layout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .brand { font-family: var(--font-head); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; } .nav-links { display: flex; align-items: center; gap: var(--space-2); } .nav-links a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); } .nav-links a:hover { color: var(--text); background: var(--surface-sunk); } .nav-links a[aria-current="page"] { color: var(--accent); } .nav-toggle { display: none; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text); } @media (max-width: 640px) { .nav-toggle { display: inline-flex; } .nav-links { position: absolute; inset-inline: 0; top: 56px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-elevated); border-block-end: 1px solid var(--border); padding: var(--space-2); box-shadow: var(--shadow); display: none; } .nav-links[data-open="true"] { display: flex; } .nav-links a { padding: var(--space-3); font-size: var(--text-base); } } .skip-link { position: absolute; left: -9999px; top: var(--space-2); background: var(--accent); color: var(--accent-contrast); padding: var(--space-2) var(--space-4); border-radius: var(--radius); z-index: 100; } .skip-link:focus { left: var(--space-4); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding-inline: var(--space-5); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); } .btn-secondary { border: 1px solid var(--border-strong); color: var(--text); } .btn-secondary:hover { border-color: var(--text-muted); color: var(--text); background: var(--surface-sunk); } .btn-lg { height: 50px; padding-inline: var(--space-6); font-size: var(--text-base); } /* hero */ .hero { padding-block: var(--space-16) var(--space-12); } .hero-grid { display: grid; gap: var(--space-10); align-items: center; } .hero-cover { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface-sunk); max-height: 72vh; width: fit-content; margin-inline: auto; } .hero-cover img { max-height: 72vh; width: auto; object-fit: contain; } .hero-placeholder { aspect-ratio: 3/4; width: min(320px, 70vw); display: grid; place-items: center; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-6); text-align: center; } .hero h1 { margin-bottom: var(--space-4); } .hero .subtitle { font-size: var(--text-lg); color: var(--text-muted); margin-bottom: var(--space-3); } .hero .byline { font-size: var(--text-base); color: var(--text-muted); font-style: italic; margin-bottom: var(--space-6); } .hero .intro { font-size: var(--text-lg); margin-bottom: var(--space-8); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } @media (min-width: 880px) { .hero-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); } .hero-cover { margin-inline: 0; } } /* generic content section */ .content h2 { margin-bottom: var(--space-4); } .takeaways { margin-top: var(--space-6); display: grid; gap: var(--space-3); } .takeaway { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); } .takeaway .num { flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: var(--text-sm); display: grid; place-items: center; font-family: var(--font-body); } .divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-12); } /* gallery */ .gallery-head { padding-block: var(--space-12) var(--space-8); } .gallery-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .figure { margin: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .figure .frame { display: block; overflow: hidden; background: var(--surface-sunk); } .figure img { width: 100%; object-fit: cover; transition: transform .5s var(--ease); } .figure a:hover img { transform: scale(1.04); } .figure figcaption { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); } .figure .caption-text { color: var(--text); } .figure .attribution { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); } .gallery-empty { color: var(--text-muted); font-style: italic; padding-block: var(--space-12); text-align: center; } /* buy */ .buy-head { padding-block: var(--space-12) var(--space-6); } .disclosure { color: var(--text-muted); font-size: var(--text-sm); margin-block: var(--space-6); } .retailer-group { margin-top: var(--space-8); } .retailer-group h3 { color: var(--text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-body); margin-bottom: var(--space-3); } .retailer-list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .retailer-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 56px; padding-inline: var(--space-5); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); font-weight: 600; transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); } .retailer-btn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); background: var(--surface-sunk); } .retailer-btn .arrow { color: var(--text-muted); } .isbn { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-8); } /* footer */ .footer { background: var(--surface-sunk); border-block-start: 1px solid var(--border); margin-top: var(--space-24); } .footer .layout { padding-block: var(--space-12); display: grid; gap: var(--space-8); } .footer h4 { font-family: var(--font-body); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-3); } .footer a { color: var(--text-muted); font-size: var(--text-sm); } .footer a:hover { color: var(--accent); } .footer .foot-links { display: grid; gap: var(--space-2); } .footer .muted { color: var(--text-muted); font-size: var(--text-sm); } @media (min-width: 720px) { .footer .layout { grid-template-columns: 1.4fr 1fr 1fr; } } } /* ---------- utilities ---------- */ @layer utilities { [hidden] { display: none !important; } .reveal { opacity: 0; transform: translateY(12px); } .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); } .hero-enter { animation: heroIn var(--dur-enter) var(--ease) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } @view-transition { navigation: auto; }