/* ---------------------------------------------------------------- */ /* Fonts */ /* ---------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------- */ /* Theme (light / dark) */ /* ---------------------------------------------------------------- */ /* * Colors are plain custom properties (no light-dark(), which isn't * supported everywhere yet and silently drops declarations that have no * var() fallback in unsupported browsers). By default :root holds the * light palette; the "prefers-color-scheme: dark" query overrides it * when the OS/browser is set to dark. The .theme-toggle button lets * people override that choice manually by setting data-theme="light"/ * "dark" on (see the inline script in index.html) — those * attribute selectors have higher specificity than the plain ":root" * used in the media query, so a manual choice always wins over the * system setting, regardless of source order. * * The literal shadow values (which can't be as easily deduplicated, * since they contain multiple comma-separated layers) are defined once * each as --shadow-cover-light/-dark and --shadow-cover-hover-light/ * -dark, and every state below just points --shadow-cover / * --shadow-cover-hover at the right one — only the pointer is repeated, * never the literal values. */ :root { color-scheme: light dark; --color-bg: #ffffff; --color-text: #1a1a1a; --color-text-muted: #5b5b5b; --color-text-subtle: #8a8a8a; --color-accent: #8a3d2b; --color-accent-contrast: #ffffff; --color-thalia: #005ea8; --color-thalia-contrast: #ffffff; --color-goodreads: #6b7f1f; --color-goodreads-contrast: #ffffff; --color-border: #e5e5e5; --color-border-subtle: #eeeeee; --color-surface-hover: #eeeeee; --color-hover-text: #333333; --color-success: #2e7d32; --color-highlight-bg: #f1f7f0; --color-highlight-border: #5a8a5a; --color-highlight-heading: #3f6b3f; --color-highlight-text: #3a3a3a; --color-placeholder-bg: #fdf1e3; --color-placeholder-border: #f0d6ac; --color-placeholder-text: #a15b1f; --cover-glow: 0 0 0 12px rgba(255, 255, 255, 0.25), 0 0 10px 14px rgba(255, 255, 255, 0.15); /* Literal shadow values, defined once each */ --shadow-cover-light: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.18), 0 20px 34px -12px rgba(0, 0, 0, 0.22); --shadow-cover-dark: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -4px rgba(0, 0, 0, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-cover-hover-light: 0 2px 4px rgba(0, 0, 0, 0.1), 0 14px 22px -6px rgba(0, 0, 0, 0.22), 0 28px 46px -14px rgba(0, 0, 0, 0.28); --shadow-cover-hover-dark: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 26px -6px rgba(0, 0, 0, 0.55), 0 28px 50px -14px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08); /* Active pointers: default to light, overridden below per state */ --shadow-cover: var(--shadow-cover-light); --shadow-cover-hover: var(--shadow-cover-hover-light); } @media (prefers-color-scheme: dark) { :root { --color-bg: #17130f; --color-text: #ece7e0; --color-text-muted: #b9b0a3; --color-text-subtle: #8f8579; --color-accent: #e2916b; --color-accent-contrast: #17130f; --color-thalia: #6bb3f0; --color-thalia-contrast: #0c1f2e; --color-goodreads: #a8cf5e; --color-goodreads-contrast: #10200a; --color-border: #332c24; --color-border-subtle: #2a241d; --color-surface-hover: #2a241d; --color-hover-text: #f2ede6; --color-success: #6fcf7a; --color-highlight-bg: #1c2419; --color-highlight-border: #4f7a4f; --color-highlight-heading: #8fbf8f; --color-highlight-text: #cfd8cc; --color-placeholder-bg: #2b2013; --color-placeholder-border: #5a431f; --color-placeholder-text: #e0ab5f; --cover-glow: 0 0 0 12px rgba(255, 255, 255, 0.06), 0 0 10px 13px rgba(255, 255, 255, 0.04); --shadow-cover: var(--shadow-cover-dark); --shadow-cover-hover: var(--shadow-cover-hover-dark); } } /* Manual override via the toggle button, independent of system setting */ :root[data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-text: #1a1a1a; --color-text-muted: #5b5b5b; --color-text-subtle: #8a8a8a; --color-accent: #8a3d2b; --color-accent-contrast: #ffffff; --color-thalia: #005ea8; --color-thalia-contrast: #ffffff; --color-goodreads: #6b7f1f; --color-goodreads-contrast: #ffffff; --color-border: #e5e5e5; --color-border-subtle: #eeeeee; --color-surface-hover: #eeeeee; --color-hover-text: #333333; --color-success: #2e7d32; --color-highlight-bg: #f1f7f0; --color-highlight-border: #5a8a5a; --color-highlight-heading: #3f6b3f; --color-highlight-text: #3a3a3a; --color-placeholder-bg: #fdf1e3; --color-placeholder-border: #f0d6ac; --color-placeholder-text: #a15b1f; --cover-glow: 0 0 0 12px rgba(255, 255, 255, 0.25), 0 0 10px 14px rgba(255, 255, 255, 0.15); --shadow-cover: var(--shadow-cover-light); --shadow-cover-hover: var(--shadow-cover-hover-light); } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #17130f; --color-text: #ece7e0; --color-text-muted: #b9b0a3; --color-text-subtle: #8f8579; --color-accent: #e2916b; --color-accent-contrast: #17130f; --color-thalia: #6bb3f0; --color-thalia-contrast: #0c1f2e; --color-goodreads: #a8cf5e; --color-goodreads-contrast: #10200a; --color-border: #332c24; --color-border-subtle: #2a241d; --color-surface-hover: #2a241d; --color-hover-text: #f2ede6; --color-success: #6fcf7a; --color-highlight-bg: #1c2419; --color-highlight-border: #4f7a4f; --color-highlight-heading: #8fbf8f; --color-highlight-text: #cfd8cc; --color-placeholder-bg: #2b2013; --color-placeholder-border: #5a431f; --color-placeholder-text: #e0ab5f; --cover-glow: 0 0 0 12px rgba(255, 255, 255, 0.06), 0 0 10px 13px rgba(255, 255, 255, 0.04); --shadow-cover: var(--shadow-cover-dark); --shadow-cover-hover: var(--shadow-cover-hover-dark); } /* ---------------------------------------------------------------- */ /* Reset / base */ /* ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.6; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } a { color: var(--color-accent); } a:focus-visible, button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* ---------------------------------------------------------------- */ /* Theme toggle button */ /* ---------------------------------------------------------------- */ .theme-toggle { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; border: none; background: none; color: var(--color-text); cursor: pointer; } .theme-toggle-label { font-size: 0.95rem; font-weight: 500; } .theme-toggle-switch { position: relative; display: inline-flex; align-items: center; width: 64px; height: 34px; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.15); transition: background-color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover .theme-toggle-switch, .theme-toggle:focus-visible .theme-toggle-switch { border-color: var(--color-accent); } .theme-toggle-thumb { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateX(0); transition: transform 0.2s ease, background-color 0.15s ease, color 0.15s ease; } .theme-toggle[aria-checked="true"] .theme-toggle-thumb { transform: translateX(30px); } .theme-toggle-thumb svg { fill: currentColor; } .theme-toggle-thumb .icon-sun { display: none; } .theme-toggle-thumb .icon-moon { display: inline; } .theme-toggle[aria-checked="true"] .theme-toggle-thumb .icon-sun { display: inline; } .theme-toggle[aria-checked="true"] .theme-toggle-thumb .icon-moon { display: none; } /* ---------------------------------------------------------------- */ /* Layout container */ /* ---------------------------------------------------------------- */ .container { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; } /* ---------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------- */ .site-header { padding-top: 3rem; padding-bottom: 2.5rem; } .site-header h1 { font-size: 2rem; font-weight: 700; margin: 0 0 0.75rem; line-height: 1.25; } .site-header .intro { margin: 0; color: var(--color-text-muted); font-size: 1.05rem; max-width: 640px; } .site-header .intro .placeholder-note { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-placeholder-text); background: var(--color-placeholder-bg); border: 1px solid var(--color-placeholder-border); border-radius: 4px; padding: 0.35rem 0.6rem; } /* ---------------------------------------------------------------- */ /* Book list */ /* ---------------------------------------------------------------- */ main { padding-bottom: 3rem; } .book { padding: 2rem 0; border-bottom: 1px solid var(--color-border); } .book:first-of-type { border-top: 1px solid var(--color-border); } .book-cover { position: relative; margin: 0 0 1.25rem; text-align: center; } .book-cover img { position: relative; z-index: 1; margin: 0 auto; max-width: 220px; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-cover), var(--cover-glow); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Lift the cover on pointer devices that can actually hover */ @media (hover: hover) and (pointer: fine) { .book-cover img:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-cover-hover), var(--cover-glow); } } /* Scroll-driven "pop" as covers enter the viewport – pure CSS, no JS. Only transform is animated so it can run on the compositor instead of forcing a paint on every scroll frame. Browsers without support simply skip it (progressive enhancement). */ @media (max-width: 699px) { @supports (animation-timeline: view()) { .book-cover img { animation: cover-scroll-pop linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } } } @keyframes cover-scroll-pop { from { transform: scale(0.9) translateY(14px); } to { transform: scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce) { .book-cover img { animation: none !important; transition: none !important; } body, .theme-toggle-switch, .theme-toggle-thumb { transition: none !important; } } .book-body h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.25rem; text-align: center; } .book-body .author { margin: 0 0 1rem; color: var(--color-text-muted); font-weight: 500; text-align: center; } .book-body .marketing { margin: 0 0 1rem; } .book-body .marketing p { color: var(--color-text-muted); margin: 0 0 0.85rem; } .book-body .marketing p:last-child { margin-bottom: 0; } .book-body .why-interested { margin: 0 0 1.25rem; padding: 0.85rem 1rem; background-color: var(--color-highlight-bg); border-left: 3px solid var(--color-highlight-border); border-radius: 4px; } .book-body .why-interested h3 { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--color-highlight-heading); } .book-body .why-interested p { margin: 0; color: var(--color-highlight-text); } /* Meta list */ .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; margin: 0 0 1.25rem; padding: 0.75rem 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); } .meta div { display: flex; align-items: baseline; gap: 0.4rem; } .meta dt { color: var(--color-text-subtle); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } .meta dd { margin: 0; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; } .copy-isbn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--color-text-subtle); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .copy-isbn:hover, .copy-isbn:focus-visible { background-color: var(--color-surface-hover); color: var(--color-hover-text); } .copy-isbn svg { fill: currentColor; } .copy-isbn .icon-check { display: none; } .copy-isbn.copied { color: var(--color-success); } .copy-isbn.copied .icon-copy { display: none; } .copy-isbn.copied .icon-check { display: inline; } /* Links */ .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; } .links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border: 1px solid var(--color-accent); border-radius: 999px; text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--color-accent); transition: background-color 0.15s ease, color 0.15s ease; } .links a .link-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; } .links a:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); } .links a.link-thalia { border-color: var(--color-thalia); color: var(--color-thalia); } .links a.link-thalia:hover { background-color: var(--color-thalia); color: var(--color-thalia-contrast); } .links a.link-goodreads { border-color: var(--color-goodreads); color: var(--color-goodreads); } .links a.link-goodreads:hover { background-color: var(--color-goodreads); color: var(--color-goodreads-contrast); } /* ---------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------- */ .site-footer { padding: 2rem 0 3rem; color: var(--color-text-subtle); font-size: 0.85rem; } /* ---------------------------------------------------------------- */ /* Desktop layout (>= 700px): cover left, text right */ /* ---------------------------------------------------------------- */ @media (min-width: 700px) { .book { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; } .book-cover { margin: 0; text-align: left; } .book-cover img { max-width: 200px; } .book-body h2, .book-body .author { text-align: left; } .meta, .links { justify-content: flex-start; } }