/* ===================================================================== Mihaiel's Readings — a shelf of book notes Gothic / old-European-library palette, kept restrained: deep ink and oxblood, aged brass accents, parchment paper — built with the same craft language as mihaiel.com: a floating pill nav, big confident display type, soft ambient gradients, and cards with real depth instead of flat boxes. Thin rules rather than heavy ornament. A light mode is provided via prefers-color-scheme and an explicit toggle (data-theme attribute on ). ===================================================================== */ /* ---- reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--color-bg); color: var(--color-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* belt-and-braces: no view should ever cause page-level horizontal scroll */ } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; } p { margin: 0; } img { max-width: 100%; display: block; } /* ---- design tokens ---------------------------------------------------- */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-ui: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1); --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1); /* dark "gothic library" palette — the default */ --color-bg: #15120e; --color-bg-alt: #1c170f; --color-surface: #241d15; --color-surface-raised: #2c2418; --color-ink: #eee2c9; --color-ink-muted: #b3a483; --color-border: rgba(214, 197, 158, 0.16); --color-oxblood: #a5404c; --color-oxblood-strong: #c05463; --color-oxblood-ink: #f4e3e0; --color-brass: #c7a565; --color-brass-soft: rgba(199, 165, 101, 0.32); --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.3), 0 24px 40px -20px rgba(0, 0, 0, 0.65); --shadow-lift: 0 30px 50px -22px rgba(0, 0, 0, 0.7); --shelf-board: linear-gradient(to bottom, #382c1a, #241c11); --glass-bg: rgba(28, 23, 15, 0.72); --ambient-1: rgba(165, 64, 76, 0.22); --ambient-2: rgba(199, 165, 101, 0.14); } :root[data-theme='light'] { --color-bg: #f4ecd9; --color-bg-alt: #ede0c3; --color-surface: #fffbf1; --color-surface-raised: #ffffff; --color-ink: #251f16; --color-ink-muted: #6b5f47; --color-border: rgba(37, 31, 22, 0.12); --color-oxblood: #832c37; --color-oxblood-strong: #6a232c; --color-oxblood-ink: #fff; --color-brass: #8a6a2f; --color-brass-soft: rgba(138, 106, 47, 0.2); --shadow-card: 0 1px 1px rgba(60, 45, 20, 0.04), 0 24px 40px -22px rgba(60, 45, 20, 0.28); --shadow-lift: 0 30px 50px -20px rgba(60, 45, 20, 0.35); --shelf-board: linear-gradient(to bottom, #dfcda0, #c3ac78); --glass-bg: rgba(255, 251, 241, 0.72); --ambient-1: rgba(131, 44, 55, 0.1); --ambient-2: rgba(138, 106, 47, 0.14); } /* Follow the OS preference until the user makes an explicit choice. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --color-bg: #f4ecd9; --color-bg-alt: #ede0c3; --color-surface: #fffbf1; --color-surface-raised: #ffffff; --color-ink: #251f16; --color-ink-muted: #6b5f47; --color-border: rgba(37, 31, 22, 0.12); --color-oxblood: #832c37; --color-oxblood-strong: #6a232c; --color-oxblood-ink: #fff; --color-brass: #8a6a2f; --color-brass-soft: rgba(138, 106, 47, 0.2); --shadow-card: 0 1px 1px rgba(60, 45, 20, 0.04), 0 24px 40px -22px rgba(60, 45, 20, 0.28); --shadow-lift: 0 30px 50px -20px rgba(60, 45, 20, 0.35); --shelf-board: linear-gradient(to bottom, #dfcda0, #c3ac78); --glass-bg: rgba(255, 251, 241, 0.72); --ambient-1: rgba(131, 44, 55, 0.1); --ambient-2: rgba(138, 106, 47, 0.14); } } /* Ambient gradient mesh: two soft, blurred glows fixed to the viewport. Restrained on purpose — this is a hint of atmosphere, not a hero image. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vmax 60vmax at 12% -10%, var(--ambient-1), transparent 60%), radial-gradient(50vmax 50vmax at 100% 30%, var(--ambient-2), transparent 55%); } /* ---- utility ---------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-oxblood); color: var(--color-oxblood-ink); padding: 0.75em 1.25em; border-radius: 0 0 var(--radius-sm) 0; z-index: 200; } .skip-link:focus { left: 0; top: 0; } :focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; } /* ---- header: floating pill nav ------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; padding: 1rem clamp(0.75rem, 4vw, 2rem) 0; } .site-header__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem 0.5rem 0.75rem; border-radius: var(--radius-pill); background: var(--glass-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; min-width: 0; } .brand__mark { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 30%; background: linear-gradient(160deg, var(--color-oxblood-strong), var(--color-oxblood)); color: var(--color-oxblood-ink); font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px -4px rgba(0, 0, 0, 0.5); } .brand__word { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-toggle { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface); } .theme-toggle__option { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: var(--radius-pill); color: var(--color-ink-muted); transition: background var(--transition-fast), color var(--transition-fast); } .theme-toggle__option svg { width: 15px; height: 15px; } .theme-toggle__option:hover { color: var(--color-ink); } .theme-toggle__option[aria-pressed='true'] { background: var(--color-surface-raised); color: var(--color-brass); box-shadow: var(--shadow-card); } .theme-toggle__option[aria-pressed='true']:hover { color: var(--color-brass); } main { display: block; } main:focus { outline: none; } /* ---- shelf hero ---------------------------------------------------------- */ .shelf-hero { max-width: 1100px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem); } .shelf-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 1rem; } .shelf-hero__title { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.02; letter-spacing: -0.01em; font-weight: 600; } .shelf-hero__title .accent { font-style: italic; font-weight: 500; color: var(--color-oxblood); } .shelf-hero__tagline { margin-top: 1.1rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.6; color: var(--color-ink-muted); } .shelf-hero__search { margin-top: 1.75rem; max-width: 420px; } /* ---- shelf view -------------------------------------------------------- */ .shelf-container { position: relative; /* positioning context for the JS-placed shelf boards below */ padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; max-width: 1100px; margin: 0 auto; } /* Boards are drawn by JS (layoutShelf in render.js) once it knows where CSS actually wrapped the row — one board per real line, not a fixed guess. This layer itself takes no layout space; its children are absolutely positioned against .shelf-container. */ .shelf-boards { position: relative; } .shelf__row { display: flex; align-items: flex-end; gap: 3.5rem 0.5rem; /* row-gap column-gap — vertical gap leaves room for a board plus breathing space below it */ flex-wrap: wrap; padding: 0 0.5rem; } .shelf__board { position: absolute; left: 0; right: 0; height: 14px; background: var(--shelf-board); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lift); } .spine { display: flex; } .spine__button { width: var(--spine-w, 44px); height: var(--spine-h, 220px); background: var(--spine-color, #4a4238); border-radius: 4px 4px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1rem 0.4rem; text-align: center; overflow: hidden; /* safety net: the JS sizes spines to fit title+author, this just guards the edge case */ box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.06), inset -2px 0 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25); /* Books lean from where they stand on the shelf, not from their center. */ transform: rotate(var(--lean, 0deg)); transform-origin: bottom center; transition: transform var(--transition), box-shadow var(--transition); } .spine__button:hover, .spine__button:focus-visible { transform: rotate(var(--lean, 0deg)) translateY(-10px); box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.08), inset -2px 0 0 rgba(0, 0, 0, 0.25), 0 18px 20px -12px rgba(0, 0, 0, 0.5); } .spine__title, .spine__author { writing-mode: vertical-rl; transform: rotate(180deg); color: #f2ead9; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); } .spine__title { font-family: var(--font-display); font-size: var(--title-font, 0.92rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; } .spine__author { font-family: var(--font-ui); font-size: var(--author-font, 0.7rem); opacity: 0.82; } /* Desktop shows the fitted/possibly-truncated variant; the untruncated "full" variant only appears in the mobile card layout (see below). */ .spine__title-full, .spine__author-full { display: none; } /* ---- reading view -------------------------------------------------------- */ .reading-view { max-width: 1100px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem; } .reading-view__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; } .reading-view__toolbar .icon-button { font-family: var(--font-ui); font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-pill); padding: 0.45em 1em; font-size: 0.82rem; color: var(--color-ink-muted); transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .reading-view__toolbar .icon-button:not(:disabled):hover { border-color: var(--color-brass); color: var(--color-ink); } .reading-view__toolbar .icon-button:disabled { opacity: 0.35; cursor: default; } .reading-view__toolbar .icon-button--close { margin-left: auto; background: var(--color-oxblood); border-color: var(--color-oxblood); color: var(--color-oxblood-ink); } .reading-view__toolbar .icon-button--close:hover { border-color: var(--color-oxblood-strong); background: var(--color-oxblood-strong); color: var(--color-oxblood-ink); } .reading-view__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; } .cover { min-width: 0; position: relative; overflow: hidden; background: var(--spine-color, #4a4238); border-radius: var(--radius-lg); padding: 2.5rem 1.75rem; min-height: 440px; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--spine-color, #4a4238) 60%, transparent), var(--shadow-card); position: sticky; top: 5.5rem; } .cover--photo { padding: 0; display: block; } .cover__photo { width: 100%; height: 100%; min-height: 440px; object-fit: cover; position: absolute; inset: 0; } .cover__inner { position: relative; text-align: center; color: #f4ecdb; } .cover__title { font-size: 1.6rem; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .cover__author { margin-top: 0.6rem; font-size: 1rem; opacity: 0.88; font-style: italic; font-family: var(--font-display); } .cover__year { margin-top: 0.3rem; font-family: var(--font-ui); font-size: 0.82rem; opacity: 0.7; letter-spacing: 0.06em; } .cover__ornament { width: 64px; height: 1px; margin: 1.1rem auto; background: rgba(244, 236, 219, 0.5); position: relative; } .cover__ornament::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: rgba(244, 236, 219, 0.75); } .notes-panel { min-width: 0; } .notes-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin: 0 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); } .notes-meta__item dt { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); margin-bottom: 0.25rem; } .notes-meta__item dd { margin: 0; } .notes-body { font-size: 1.05rem; line-height: 1.75; max-width: 68ch; } .notes-body > * + * { margin-top: 1.1em; } .notes-body h3, .notes-body h4, .notes-body h5 { margin-top: 1.6em; font-weight: 600; color: var(--color-ink); } .notes-body h3 { font-size: 1.3rem; } .notes-body h4 { font-size: 1.12rem; } .notes-body h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .notes-body blockquote { margin: 0; padding: 0.2em 0 0.2em 1.25em; border-left: 2px solid var(--color-oxblood); color: var(--color-ink-muted); font-style: italic; } .notes-body blockquote > * + * { margin-top: 0.75em; } .notes-body ul, .notes-body ol { padding-left: 1.4em; list-style: disc; } .notes-body ol { list-style: decimal; } .notes-body li + li { margin-top: 0.4em; } .notes-body code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; background: var(--color-surface-raised); padding: 0.1em 0.35em; border-radius: 4px; } /* ---- shelf search -------------------------------------------------------- */ .search-field { position: relative; display: flex; align-items: center; } .search-field__icon { position: absolute; left: 0.9em; width: 13px; height: 13px; border: 1.5px solid var(--color-ink-muted); border-radius: 50%; pointer-events: none; } .search-field__icon::after { content: ''; position: absolute; width: 6px; height: 1.5px; background: var(--color-ink-muted); top: 100%; left: 100%; transform-origin: 0 0; transform: rotate(45deg) translate(1px, 0); } .search-field input[type='search'] { width: 100%; font: inherit; font-family: var(--font-ui); font-size: 0.92rem; padding: 0.6em 0.9em 0.6em 2.4em; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); } .shelf-empty { color: var(--color-ink-muted); padding: 2rem 0; } .error { padding: 2rem clamp(1rem, 4vw, 2.5rem); color: var(--color-ink-muted); } /* ---- responsive: below 768px -------------------------------------------- */ @media (max-width: 768px) { .reading-view__grid { grid-template-columns: minmax(0, 1fr); } .cover { position: relative; /* still the containing block for the absolutely-positioned cover photo */ top: 0; /* cancel the desktop sticky offset, which would otherwise apply as a relative-position shift */ height: 260px; min-height: 260px; padding: 1.75rem 1.25rem; } .cover--photo { padding: 0; } .cover__photo { height: 260px; min-height: 0; } /* Shelf becomes a vertical list of cards: drop the vertical spine typography and shelf-board styling in favor of stacked rows. */ .shelf__row { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0; } .shelf-boards { display: none; } .shelf-container { padding-top: 0.5rem; } .spine__button { width: 100%; height: auto; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 0.5rem 0.75rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); flex-wrap: wrap; /* Leaning is a shelf metaphor; the mobile layout is a stacked card list, not a shelf, so neutralize it for both the base and hover transforms in one place (both reference this same custom property). !important is required here: the per-book lean is set via inline style on the element, which normally outranks any stylesheet rule regardless of media query — !important is one of the few things that legitimately overrides an inline style. */ --lean: 0deg !important; } .spine__title, .spine__author { writing-mode: horizontal-tb; transform: none; min-width: 0; text-align: left; } .spine__title { flex: 1 1 auto; font-size: 1rem; overflow-wrap: break-word; } .spine__author { flex: 0 1 auto; font-size: 0.8rem; } /* The card layout has plenty of horizontal room, so show the full untruncated title/author instead of the vertical-spine-fitted one. */ .spine__title-fitted, .spine__author-fitted { display: none; } .spine__title-full, .spine__author-full { display: inline; } } @media (max-width: 520px) { .brand__word { display: none; } } @media (max-width: 480px) { .site-header { padding: 0.75rem 0.6rem 0; } } /* ---- motion -------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } .spine__button:hover, .spine__button:focus-visible { /* Suppress the hover lift's motion, but keep the (static, not animated) resting lean rather than snapping the book upright. */ transform: rotate(var(--lean, 0deg)); } }