/* ========================================================================== NovaSeed Press — site styles Planting Stories That Grow Minds No external requests: fonts are system stacks, all art is local. Per-book accent colors are set with --accent on . ========================================================================== */ /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } img, picture, svg { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Tokens --------------------------------------------------------------- */ :root { /* Press brand — teals sampled directly from NovaSeedPress_logo.png */ --ink: #14172b; --ink-soft: #2b3050; --paper: #fbf8f2; --paper-warm: #f4eee3; --paper-edge: #e5dccb; --seed: #1a7181; /* deep teal — the book and the star */ --seed-deep: #12545f; /* darker, for link text contrast */ --seed-light: #63c7cd; /* light teal — the sprout */ --gold: #d99a2b; --text: #24263a; --text-muted: #5c6076; --text-faint: #8a8fa3; --accent: var(--seed); --accent-ink: #ffffff; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(20, 23, 43, .06), 0 2px 8px rgba(20, 23, 43, .05); --shadow-md: 0 4px 12px rgba(20, 23, 43, .08), 0 12px 32px rgba(20, 23, 43, .09); --shadow-book: 0 8px 18px rgba(20, 23, 43, .16), 0 26px 60px rgba(20, 23, 43, .20); --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* The logo sets "NovaSeed Press" in a geometric sans. The header wordmark matches that rather than the editorial serif, so the brand name reads the same everywhere it appears. Headlines stay serif. */ --font-brand: "Avenir Next", "Segoe UI", "Century Gothic", system-ui, -apple-system, sans-serif; /* The NovaSeed Kids logotype is set in Comic Sans MS. We do NOT self-host it — it is a licensed Microsoft font and shipping the .ttf as a webfont is a redistribution problem. This stack uses the reader's locally installed copy (present on essentially all Windows and macOS machines) and falls back to other friendly rounded faces elsewhere. */ --font-kids: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Chalkboard", "Marker Felt", "Segoe Print", cursive; --wrap: 1140px; --wrap-narrow: 720px; --gutter: clamp(1.25rem, 4vw, 2.5rem); } /* Per-book accents */ body[data-book="my-perfect-pet"] { --accent: #e0761f; /* the orange autumn canopy on the cover */ --accent-ink: #ffffff; --book-wash: linear-gradient(165deg, #fdf1e2 0%, #f6f9ef 55%, #eaf4fb 100%); } body[data-book="12-weeks"] { --accent: #6a5a99; /* the dusk sky on the cover */ --accent-ink: #ffffff; --book-wash: linear-gradient(165deg, #efeaf6 0%, #f6f1ea 60%, #fdf6ea 100%); } /* NovaSeed Kids™ — the imprint runs warmer than the press. Same bones, brighter skin. Orange sampled straight out of the paw mark. */ body[data-imprint="kids"] { --accent: #e98531; --accent-ink: #ffffff; } body[data-imprint="kids"] .hero { background: radial-gradient(120% 90% at 10% 0%, #fdeedd 0%, transparent 60%), radial-gradient(100% 80% at 92% 6%, #e6f4fb 0%, transparent 58%), radial-gradient(90% 70% at 60% 100%, #edf7e6 0%, transparent 60%), var(--paper); } body[data-imprint="kids"] .hero__eyebrow { color: #a2540f; background: #fdeedd; border-color: #f4d5b3; } /* --- Base ----------------------------------------------------------------- */ body { font-family: var(--font-body); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.6rem + 3.1vw, 4rem); } h2 { font-size: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem); } p { text-wrap: pretty; } a { color: var(--seed-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 10px; z-index: 200; text-decoration: none; } .skip-link:focus { transform: translate(-50%, 0); color: #fff; } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 248, 242, .88); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--paper-edge); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .85rem; } /* Wordmark — placeholder mark, swap the