/* grantapoulton.com — three fixes, nothing cosmetic. Built entirely from the site's own variables, so it inherits the existing palette and type and adds no new design decisions. 1. the Book Two signup, now on the home page 2. functional text lifted off the sub-11px floor 3. justified columns hyphenate instead of opening rivers */ /* ═══ 1 · THE SIGNUP, ON THE HOME PAGE ═══════════════════════ The home page styles .btn and .eyebrow but has never had a form on it, so the field needs its own rules. Everything here uses the site's own tokens. */ #notify-home{padding:5.5rem 0;border-top:1px solid var(--rule)} #notify-home h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.9rem 0 .8rem} #notify-home .notify-lede{color:var(--paper);max-width:34rem;margin-bottom:1.6rem} #notify-home .field{display:flex;max-width:30rem;margin:0} #notify-home input[type=email]{ flex:1 1 auto;min-width:0;height:52px;padding:0 .9rem; font-family:var(--f-display);font-size:1rem; color:var(--paper);background:rgba(232,220,192,.06); border:1px solid var(--rule);border-right:0;border-radius:0} #notify-home input[type=email]::placeholder{color:var(--paper-dim);opacity:1} #notify-home input[type=email]:hover{border-color:var(--paper-dim)} #notify-home input[type=email]:focus{outline:none;border-color:var(--violet); background:rgba(232,220,192,.1)} #notify-home .btn{height:52px;min-height:52px;border-radius:0;white-space:nowrap} #notify-home .fineprint{ font-family:var(--f-util);font-size:.78rem;letter-spacing:.04em; color:var(--paper-dim);margin:.9rem 0 0;max-width:30rem;line-height:1.5} #notify-home .sr-only{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} @media(max-width:560px){ #notify-home .field{flex-wrap:wrap} #notify-home input[type=email]{flex:1 0 100%;border-right:1px solid var(--rule)} #notify-home .btn{flex:1 0 100%;margin-top:-1px} } /* ═══ 2 · NOTHING FUNCTIONAL BELOW 11px ══════════════════════ Labels, status words, meta rows and the footer credit were set at .62rem and .68rem — 9.9px and 10.9px. Readers of this genre are not twenty-five. */ .eyebrow,.vol,.st,.yr,.place,.olabel,.olabel-note,.grp-label, .reg-head,.reg-l,.reg-n,.reg-e,.reg-d,.count,.note,.fine,.off, #backHome,#topnav .brand,#topnav .links,.pg-folio,.pg-fns{ font-size:.74rem!important} .fineprint{font-size:.78rem!important} /* two sizes are carried in inline style attributes and need naming directly */ footer div[style*=".68rem"]{font-size:.78rem!important} footer div[style*=".62rem"]{font-size:.74rem!important} /* ═══ 3 · JUSTIFIED COLUMNS HYPHENATE ════════════════════════ Justification without hyphenation opens rivers of white down a column, which is exactly what justification is meant to prevent. */ p,li,blockquote,.ob-page p,.pgcard p,.excerpt p{ hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto} /* ═══ THE READING PAGES ══════════════════════════════════════ The reader was already properly set — justified, hyphenated, indented, with footnotes and a real three-dimensional turn. These three add the depth a printed book has and a web page usually does not. Nothing here touches the text, the pager or the turn. */ /* ── 1 · thickness: the top sheet of a stack, not a single card ── Three page edges in the paper's own colour, each with its own hairline of shadow, and one soft shadow under the whole block. Because a box-shadow is drawn outside the border box, these sit beyond the dark frame — which is exactly where the pages of a bound book sit relative to its cover. */ .pgcard, #openText.pgcard, #doorText.pgcard, #tasterText.pgcard, .excerpt .pgcard{ box-shadow: 0 3px 0 -1px #ded2b2, 0 4px 0 0 rgba(34,30,24,.20), 0 8px 0 -1px #d7cbab, 0 9px 0 0 rgba(34,30,24,.15), 0 13px 0 -1px #d0c4a4, 0 14px 0 0 rgba(34,30,24,.11), 0 28px 50px -18px rgba(0,0,0,.62) !important; } /* full screen on a phone is one sheet edge to edge: no stack, no shadow */ .pg-full .pgcard, .pg-full #openText.pgcard, .pg-full #doorText.pgcard, .pg-full #tasterText.pgcard{box-shadow:none!important} /* ── 2 · the gutter: paper curves into a binding ── A single dark stop reads as a smudge at the edge. Real paper lifts to catch the light just before it dives, so there is a pale band before the shadow. */ .pg-face--l{background: linear-gradient(to right, rgba(255,253,245,0) 70%, rgba(255,253,245,.55) 85%, rgba(34,30,24,.06) 94%, rgba(34,30,24,.26) 100%), var(--paper)!important} .pg-face--r{background: linear-gradient(to left, rgba(255,253,245,0) 70%, rgba(255,253,245,.55) 85%, rgba(34,30,24,.06) 94%, rgba(34,30,24,.26) 100%), var(--paper)!important} .ob-page.ob-left{background: linear-gradient(to right, rgba(255,253,245,0) 70%, rgba(255,253,245,.55) 85%, rgba(34,30,24,.06) 94%, rgba(34,30,24,.26) 100%), var(--paper)!important} .ob-page.ob-right{background: linear-gradient(to left, rgba(255,253,245,0) 70%, rgba(255,253,245,.55) 85%, rgba(34,30,24,.06) 94%, rgba(34,30,24,.26) 100%), var(--paper)!important} /* ── 3 · the typesetting a book has and a web page forgets ── */ /* the first line after a section break, in small capitals */ .pgcard .pg-body p.pg-div + p::first-line, .ob-page p.pg-div + p::first-line{ font-variant-caps:small-caps;letter-spacing:.03em} /* figures that sit on the line, as a book sets them */ .pgcard .pg-folio,.pgcard .pg-fns,.ob-page .pg-folio{ font-variant-numeric:oldstyle-nums} /* a footnote rule is a short rule, never the full measure */ .pgcard .pg-fns{border-top:0!important;position:relative;padding-top:1rem!important} .pgcard .pg-fns::before{content:"";position:absolute;top:0;left:0; width:32%;max-width:11rem;height:1px;background:rgba(34,30,24,.5)} /* the versal, on the opening page and nowhere else. reader.js adds .pg-first by watching the pager's own back button. */ .pgcard.pg-first .pg-body > p:first-child, .openbook.pg-first .ob-page.ob-left p:first-child{text-indent:0} .pgcard.pg-first .pg-body > p:first-child::first-letter, .openbook.pg-first .ob-page.ob-left p:first-child::first-letter{ float:left;font-size:3.2em;line-height:.8; margin:.04em .09em -.02em 0;font-weight:400;color:#221e18} /* a page that will turn when clicked shows the hand */ .pgcard.turnable, .openbook.turnable { cursor: pointer; }