/* ============================================================ Books by Jenn Carson — SITE LAYER ------------------------------------------------------------ theme.css sets the tokens, base.css is the shared F35 kit, this file is everything that belongs to HER site only. Her brief, in her words: "light colors and washes — foresty feeling — most of my books are set in forests." She named LisaGlanz.com as the feel she wants, and janbrett.com as the one she does not. THE ONE IDEA. She wrote: "Every book starts as an idea on paper. The characters turn up in the sketchbook long before they turn up in a sentence." So the page is built the way she works — paper first, then a wash of color laid over it, then the line on top. The washes below are CSS gradients, never images: they carry the feeling without pretending to be painting she did not make. ============================================================ */ /* ---------- paper ---------- A flat #FDFBF6 reads as an off-white div. Two very soft washes at low opacity give it the unevenness of stock without ever resolving into a pattern you can name. */ body { background-color: var(--canvas); background-image: radial-gradient(58rem 40rem at 88% -8%, rgba(51, 96, 63, .052), transparent 62%), radial-gradient(46rem 34rem at -6% 22%, rgba(232, 182, 87, .060), transparent 60%); background-attachment: fixed; } /* ---------- brand ---------- */ .brand-mark { width: 30px; height: 30px; border-radius: 0; box-shadow: none; } .brand-text { font-family: var(--display); font-size: 1.24rem; letter-spacing: .01em; } /* ========================================================= WASH — the signature device A soft-edged block of color behind a section, the way a watercolor ground is laid down before anything is drawn. ========================================================= */ .wash { position: relative; isolation: isolate; } .wash::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none; background: radial-gradient(36rem 22rem at 22% 30%, rgba(51, 96, 63, .10), transparent 66%), radial-gradient(30rem 20rem at 78% 68%, rgba(232, 182, 87, .13), transparent 64%); filter: blur(6px); } .wash--deep::before { background: radial-gradient(40rem 26rem at 30% 20%, rgba(51, 96, 63, .17), transparent 68%), radial-gradient(34rem 22rem at 74% 76%, rgba(138, 90, 18, .10), transparent 66%); } /* A torn-paper edge between sections. Softer than a rule, and it never tiles visibly because it is one long shallow curve rather than a repeat. */ .edge { display: block; width: 100%; height: 42px; color: var(--surface-2); } .edge svg { display: block; width: 100%; height: 100%; } /* ========================================================= HERO ========================================================= */ .hero-book { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); } .hero-book .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } @media (max-width: 900px) { .hero-book .hero-grid { grid-template-columns: 1fr; } } .hero-book h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.06; text-wrap: balance; margin: .4rem 0 1rem; } /* The underline is a brush stroke, not a rule: thick, soft, sitting low and running a little past the word, the way a wash overshoots what it was meant to sit under. */ .hero-book h1 .accent { color: var(--brand-dark); background: linear-gradient(180deg, transparent 62%, rgba(232, 182, 87, .55) 62%, rgba(232, 182, 87, .28) 96%, transparent 96%); padding: 0 .12em; border-radius: 3px; } /* ========================================================= BOOK COVERS A cover is a physical object: it gets a spine, a shadow that sits under its bottom edge rather than evenly all round, and a small lift on hover. Never a flat rounded rectangle. ========================================================= */ .cover { position: relative; display: block; border-radius: 3px 6px 6px 3px; overflow: hidden; background: var(--surface-2); box-shadow: 0 1px 2px rgba(27,34,28,.14), 0 14px 28px -14px rgba(27,34,28,.42); transition: transform .34s var(--ease), box-shadow .34s var(--ease); } /* A real cover is NEVER cropped. Her picture books are square and her novels are portrait; forcing both into one ratio cut the title clean off the Pearl cover. Each cover renders at its own proportions and the shelf is allowed to be ragged, which is what a shelf looks like. */ .cover img { width: 100%; height: auto; display: block; } .cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; pointer-events: none; background: linear-gradient(90deg, rgba(27,34,28,.26), rgba(27,34,28,.05) 55%, transparent); } a.cover:hover, a.cover:focus-visible { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 2px 3px rgba(27,34,28,.16), 0 24px 44px -16px rgba(27,34,28,.5); } /* The state we are in for most books: she has the file, we do not have it yet. This must look DELIBERATE — never like a broken image. */ .cover--pending { aspect-ratio: var(--shape, 2 / 3); display: grid; place-items: center; padding: 1.4rem; text-align: center; background: radial-gradient(14rem 10rem at 40% 24%, rgba(51,96,63,.13), transparent 70%), radial-gradient(12rem 9rem at 70% 74%, rgba(232,182,87,.18), transparent 68%), var(--surface-2); border: 1px solid var(--line); } .cover--pending::after { display: none; } .cover--pending .ct { font-family: var(--display); font-size: 1.12rem; color: var(--brand-dark); line-height: 1.28; } .cover--pending .cn { margin-top: .5rem; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } /* ========================================================= THE SHELF — books.html ========================================================= */ .shelf { align-items: start; display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .shelf-item { display: flex; flex-direction: column; gap: .7rem; } .shelf-item h3 { font-size: 1.06rem; line-height: 1.25; margin: 0; } .shelf-item h3 a { color: var(--ink); text-decoration: none; } .shelf-item h3 a:hover { color: var(--brand-dark); text-decoration: underline; } .shelf-item .meta { font-size: .82rem; color: var(--muted); } .series-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; } .series-head h2 { margin: 0; } .series-head .n { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ========================================================= ONE BOOK — books/.html ========================================================= */ .book-lead { align-items: start; display: grid; gap: clamp(2rem, 5vw, 3.6rem); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } @media (max-width: 780px) { .book-lead { grid-template-columns: 1fr; max-width: 420px; } } .book-lead h1 { margin: .2rem 0 .6rem; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; } .book-facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; font-size: .92rem; } .book-facts li { display: flex; gap: .8rem; } .book-facts .k { flex: 0 0 7.2rem; color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .18rem; } .book-facts .v { color: var(--body); } /* Where her description will go. Not an error state — an honest, quiet placeholder that a reader understands and that one email from her fills in. */ .awaiting { border-left: 3px solid var(--line); padding: .2rem 0 .2rem 1rem; color: var(--muted); font-style: italic; max-width: 58ch; } /* ========================================================= MUSIC She writes songs that go with the books and wants them on the book pages. Native