/* ========================================================================== enw-site-v2.css — site-wide design layer ========================================================================== Loaded from h2.php, after the bundle and after any page sheet, so it is the last word in the cascade on every template that uses the shared shell. Scope, deliberately narrow: this does NOT re-lay-out any page. It adjusts the four components every template already shares — section headers, cards, the book card, and focus states — so pages stop looking like different products. Anything that needs a structural change belongs in that page's own sheet. The direction matches the book detail refresh: flat surfaces, one hairline, one soft shadow, in place of the clay system's 24px radii and stacked inset highlights. Every colour comes from --enw-* tokens so all nine palettes and both schemes keep working. Browser floor: custom properties, flex, grid, clamp(). No color-mix(), no :has(), no container queries. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Section headers One scale for every "Editor's Choice" / "More to do" / "Best Deals" head. -------------------------------------------------------------------------- */ .enw-section__head { margin-block-end: 22px; } .enw-section__title { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: var(--enw-text, #0f172a); } .enw-section__sub { margin-block-start: 8px; font-size: 14.5px; line-height: 1.6; font-weight: 500; color: var(--enw-text-muted, #64748b); max-width: 70ch; } /* -------------------------------------------------------------------------- 2. Cards The clay system draws every card with a 24px radius plus two inset highlights and a coloured drop shadow. At a grid of 288 cards that reads as noise, and it is the single biggest mismatch with the book page. One surface rule instead: hairline border, 16px radius, shadow that only suggests depth. -------------------------------------------------------------------------- */ .book-card, .enw-card, .enw-tile { border-radius: 16px; border: 1px solid var(--enw-border, #e7ebf0); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 28px -24px rgba(15, 23, 42, .45); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .book-card:hover, .enw-card:hover, .enw-tile:hover { border-color: var(--enw-border, #d8dee8); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 34px -24px rgba(15, 23, 42, .5); } /* The cover link is the card's largest surface; keeping its own radius clipped to the card stops the cover corners from poking past the new 16px radius. */ .book-card-img { border-radius: 15px 15px 0 0; overflow: hidden; } .book-card-body { padding: 14px; border-top-color: var(--enw-border, #eef1f5); } .book-card-title { font-size: 13px; line-height: 1.45; letter-spacing: -.005em; } .book-card-btn { border-radius: 9px; font-weight: 700; letter-spacing: .01em; } .book-card-price { border-radius: 7px; letter-spacing: .01em; } /* -------------------------------------------------------------------------- 2b. Shelf headers Country sections and author shelves cap a grid with a saturated gradient bar. Flattened to the palette's accent — the same treatment the book page's related shelves already get — and squared to the card radius below it, so the header and its grid read as one object. -------------------------------------------------------------------------- */ .country-section-header, .author-header { border-radius: 16px 16px 0 0; background: var(--enw-accent, #059669); padding: 16px 22px; } .country-section-header h2, .country-name, .author-name { font-size: 17px; letter-spacing: -.01em; font-weight: 800; } .book-grid { border-radius: 0 0 16px 16px; } /* -------------------------------------------------------------------------- 2c. Bespoke blocks that were drawing themselves -------------------------------------------------------------------------- */ /* The deals hero was a card with a red-tinted border and no shadow, sitting directly above the card grid it introduces. One surface rule now. */ .deals-hero { border-radius: 16px; border-color: var(--enw-border, #e7ebf0); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 28px -24px rgba(15, 23, 42, .45); padding: 26px 28px; } .deals-hero-icon { font-size: 40px; } /* Page titles had three different scales across templates (24px here, a clamp(28px, 4vw, 52px) there). One scale, keeping each page's own colour. */ .page-title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } /* Content headings that carry no class of their own — the sub-sections inside About, Contact, the blog and the tools pages — were whatever the browser defaulted them to. Scoped to classless h2 so component headings keep theirs. */ .enw-container h2:not([class]) { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; margin-block: 32px 14px; } /* -------------------------------------------------------------------------- 2d. The PDF search field `.mini-search` (the /ebooks/ hero field) drew a permanent 3px red halo — #dc2626 at 25% — as its resting state, so the section's search box looked like a validation error the moment the page opened, on every topic page. It is a field, not an alert: one hairline at rest, and the keyboard ring that every other control on the site already gets. -------------------------------------------------------------------------- */ .mini-search { border: 1px solid var(--enw-border, #e3e8ef); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 30px -26px rgba(15, 23, 42, .55); } .mini-search:focus-within { border-color: var(--enw-primary, #2F6FED); outline: 2px solid var(--enw-primary, #2F6FED); outline-offset: 1px; } /* The button is flush inside a rounded box; it inherited the parent's radius on its left corners only by accident of overflow:hidden. */ .mini-search button { border-radius: 0 11px 11px 0; } /* -------------------------------------------------------------------------- 2e. The book cross-sell band Its heading was an

carrying a 📚 — an emoji glyph inside a heading, in both senses: unreadable as content to a screen reader's heading list, and drawn differently on every OS. The markup is now

with the site's own book icon, so the rule below gives it the

it replaced. -------------------------------------------------------------------------- */ .cross-cta h2 { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; color: var(--enw-on-header, #ffffff); font-family: Inter, sans-serif; font-size: 20px; font-weight: 800; } /* -------------------------------------------------------------------------- 2f. Empty states The shared empty state was 80px of padding around a 72px glyph. On a page whose whole body is that box — /ebooks/ with no term, before it had an index — it read as a screen of nothing. Bounded, but still generous. -------------------------------------------------------------------------- */ .empty-state { padding: clamp(28px, 4vw, 44px) 24px; } .empty-state .icon { font-size: 40px; margin-bottom: 14px; } .empty-state h2 { margin-bottom: 12px; color: var(--enw-text, #0d1f16); font-family: Inter, sans-serif; font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; line-height: 1.25; } /* -------------------------------------------------------------------------- 2g. Catalogue section bands `.pdf-section-heading` and `.books-section-heading` painted themselves `--enw-header` — a saturated royal blue — and held their title in white. That is fine as a 40px bar and wrong the moment anything else lands inside them: an ad injected into `.pdf-section-heading` on every PDF topic page became a flex row of its own, so a 13,000px list opened with a 372px blue block, and an unfilled slot was 300px of saturated blue with a title in the corner. Flat here, like every other section head on the site: surface, one hairline, ink title. Whatever else the page inserts reads on the page instead of on a band, and the two headings match the grid they introduce. -------------------------------------------------------------------------- */ .pdf-section-heading, .books-section-heading { background: var(--enw-surface, #ffffff); border-bottom: 1px solid var(--enw-border, #e3e8ef); border-radius: 16px 16px 0 0; padding: 14px 20px; } html .pdf-section-heading h2, html .books-section-heading h2 { color: var(--enw-text, #1e2a3a); font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .pdf-count, .books-count { color: var(--enw-text-muted, #6b7787); background: var(--enw-surface-2, #f4f6fa); border: 1px solid var(--enw-border, #e3e8ef); font-weight: 700; } /* -------------------------------------------------------------------------- 3. Buttons Shape is left alone — the pill is the site's own and the shared header depends on it. Only the weight and the focus ring are normalised, so a keyboard user gets the same affordance on every page. -------------------------------------------------------------------------- */ .enw-btn { font-weight: 700; letter-spacing: .01em; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--enw-primary, #2F6FED); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- 4. Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .book-card, .enw-card, .enw-tile { transition: none; } .book-card:hover, .enw-card:hover, .enw-tile:hover { transform: none; } } /* -------------------------------------------------------------------------- 5. Small screens -------------------------------------------------------------------------- */ @media (max-width: 640px) { .enw-section__head { margin-block-end: 16px; /* A title and a "see all" link side by side at 320px leaves ~200px for the title, so "Browse PDF topics" broke after one word. Let the link drop. */ flex-wrap: wrap; gap: 6px 16px; } .enw-section__sub { font-size: 13.5px; } .book-card-body { padding: 11px; } .book-card-title { font-size: 12.5px; } } /* -------------------------------------------------------------------------- 6. One page title Seven templates had grown seven scales — 18px on the search page, 27px on About and the account pages, 37/38px on the catalogue pages, 48px on the blog, 50px on the app page. `main h1` is the one selector all of them share (each page's own sheet is loaded before this one), so one rule settles the whole family: same size, same weight, same leading, same tracking. Colour stays per page — that is a decision, not an accident. -------------------------------------------------------------------------- */ body h1, body main h1, body h1.page-title, body h1.enw-section__title, body .results-title, body .bd-title, body .enw-blog-hero__title, body .books-hero h1, body .page-header h1, body .pdf-hero h1, body .mini-hero .results-title, body .results-strip .results-title, body .series-head h1 { font-size: clamp(28px, 2.5vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } /* A page title is a block, not a line of running text: it should never inherit a paragraph's bottom margin and leave the lead 4px under it. */ main h1 { margin-block: 0 10px; } /* -------------------------------------------------------------------------- 7. Directory rows The category/author/publisher card is a flex row of name + count. The name had no min-width, so a long one ("Antiques & Collectibles") pushed the count pill past the card's edge and made it wrap onto two lines. The name shrinks, the pill never does. -------------------------------------------------------------------------- */ .cat-card { gap: 12px; } .cat-card-name { flex: 1 1 auto; min-inline-size: 0; line-height: 1.35; } .cat-card-count { flex: none; white-space: nowrap; border-radius: 999px; } .cat-card:hover { transform: translateY(-1px); } /* The count line above a grid ("144,933 authors starting with A"). It was a space-between flex row, so its three runs were flung to the left, centre and right edges of the page and stopped reading as one sentence. */ .results-meta { display: block; font-size: 13.5px; color: var(--enw-text-muted, #64748b); } /* -------------------------------------------------------------------------- 8. Buttons the clay system still embosses `.enw-magnetic` is the old inset-highlight recipe: two inset shadows, one dark and one light, on a ghost button. On a flat card it reads as a raised plastic key. The primary buttons are already flat, so the secondaries match them here rather than the other way round. -------------------------------------------------------------------------- */ .enw-magnetic { box-shadow: none; } .enw-magnetic:hover, .enw-magnetic:focus-visible { box-shadow: none; transform: none; } /* -------------------------------------------------------------------------- 9. The footer's bottom band The app badge, the social pair and the AMP chip were three separate centred blocks, each with its own top margin: 250px of blue with a badge floating in the middle of it, and a footer taller than the viewport — which is how the column headings ended up permanently under the sticky header at full scroll. One row, aligned to the same 4-column grid as the links above it. -------------------------------------------------------------------------- */ .enw-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--enw-sp-4, 16px) var(--enw-sp-5, 20px); margin-block-start: var(--enw-sp-8, 32px); padding-block-start: var(--enw-sp-5, 20px); border-block-start: 1px solid color-mix(in srgb, var(--enw-on-header, #fff) 24%, transparent); } .enw-footer__brand > * { margin: 0; } .enw-footer__brand .enw-footer__app { text-align: start; } .enw-footer__brand .enw-footer__app img { height: 48px; } .enw-footer__brand .enw-social { margin: 0; margin-inline-start: auto; } .enw-footer__brand .enw-footer__amp { margin: 0; } /* The legal rows were separated from the brand row by a top margin twice the height of the row itself. */ .enw-footer__brand + .enw-footer__legal { margin-block-start: var(--enw-sp-5, 20px); } @media (max-width: 640px) { .enw-footer__brand { gap: var(--enw-sp-3, 12px); } .enw-footer__brand .enw-social { margin-inline-start: 0; } } /* -------------------------------------------------------------------------- 10. Hero search field (books.php, the ebooks hub) The field and its button are one control, so they share one rounded frame instead of the button sitting on the input's corner with a seam between. -------------------------------------------------------------------------- */ .books-hero .hero-search-form input:focus-visible, .pdf-search-form input:focus-visible { outline: 2px solid var(--enw-primary, #2F6FED); outline-offset: -3px; } /* -------------------------------------------------------------------------- 11. Content tables (the cookie policy, and any future policy page) The cookie tables were four inline-styled columns in a 1440px container: the "Purpose" run ran the width of the screen and the "Lifetime" column fell off the right edge. A policy page is read, not scanned — one measure, one header row, wrapping cells. -------------------------------------------------------------------------- */ .enw-container table { width: 100%; border-collapse: collapse; font-size: 14px; } .enw-container th, .enw-container td { padding: 10px 12px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--enw-border, #e7ebf0); } .enw-container th { background: var(--enw-surface-2, #f6f8fb); color: var(--enw-text, #0f172a); font-weight: 700; white-space: nowrap; } .enw-container td code { padding: 1px 6px; border: 1px solid var(--enw-border, #e7ebf0); border-radius: 6px; background: var(--enw-surface-2, #f6f8fb); font-size: 12.5px; white-space: nowrap; } /* A heading with an inline SVG icon (donate's heart) broke onto its own line, because a global `svg { display:block }` outranked the heading's own inline styling. Icons sit in the line, not above it. */ h1 svg, h2 svg, h3 svg, .enw-section__title svg { display: inline-block; vertical-align: -.15em; margin-inline-end: 6px; } /* -------------------------------------------------------------------------- 12. Section headings, without the emoji Every section head on the home page carried a colour emoji in a `.icon` span — 📚 🆕 🗂️ ✍️ 🏛️ 🔍 ✉️. They are decorative (aria-hidden), they render differently on every platform, and beside the flat type they read as stickers. Hidden, not removed: the markup still carries the meaning for anyone reading it, and one class restores them if that is ever wanted. -------------------------------------------------------------------------- */ .section-hd h2 .icon { display: none; } /* -------------------------------------------------------------------------- 13. Series page enw-series.css is scoped to the book page's "Book 3 of 8" block as well, so it could not be widened there. Here, on the page that owns them: the 820px column becomes the site's own measure, the letter rail stops wrapping into a ragged second row, and the cards join the same surface rule as every other card on the site. -------------------------------------------------------------------------- */ .series-page { max-width: var(--enw-page, 1400px); padding: 32px 24px 64px; } .series-crumbs { margin-block-end: 18px; font-size: 13.5px; color: var(--enw-text-muted, #64748b); } .series-head h1 { color: var(--enw-text, #0f172a); margin-block-end: 10px; } .series-lede { max-width: 70ch; font-size: 15.5px; color: var(--enw-text-muted, #64748b); margin-block-end: 26px; } .series-letters { justify-content: flex-start; gap: 6px; padding: 10px 12px; margin-block-end: 24px; border: 1px solid var(--enw-border, #e7ebf0); border-radius: 14px; background: var(--enw-surface, #fff); } .series-letters a { display: grid; place-items: center; min-inline-size: 32px; block-size: 32px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--enw-text-muted, #475569); border-color: var(--enw-border, #e7ebf0); } .series-letters a[aria-current='page'] { background: var(--enw-primary, #2f6fed); border-color: var(--enw-primary, #2f6fed); color: var(--enw-on-primary, #fff); } .series-dir { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .series-dir a { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--enw-border, #e7ebf0); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 28px -24px rgba(15, 23, 42, .45); } .series-dir a:hover, .series-dir a:focus-visible { border-color: var(--enw-primary, #2f6fed); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 34px -24px rgba(15, 23, 42, .5); } .series-item-link { border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 28px -24px rgba(15, 23, 42, .45); } @media (max-width: 640px) { .series-page { padding: 20px 16px 48px; } } /* -------------------------------------------------------------------------- 14. The ebooks hub's header Its search field is centred with `margin-inline:auto`, which was fine when it sat above the title — the two were a stack of centred blocks. With the title first (see ebooks/index.php) the field needs its own space under it, and the PDF icon in the title should sit on the baseline, not above it. -------------------------------------------------------------------------- */ .mini-hero .results-title { display: flex; align-items: center; gap: 10px; } .mini-hero .results-title .ico { flex: none; inline-size: 26px; block-size: 34px; } .mini-hero .mini-search { margin-block: 18px 0; } /* The ebook hub wraps its trail in `.breadcrumb-wrap` but not in the `.breadcrumb-inner` that pads it on the search page, so its "Home › Free PDFs" line started flush against the window edge. */ .breadcrumb-wrap > .breadcrumb { max-inline-size: var(--enw-page, 1400px); margin-inline: auto; padding: 10px 24px; } /* Same story for the results line on the hub: it is not the directory row this layer reshapes for authors and publishers, it is a sentence with a link. */ .main-wrap .results-meta { font-size: 14px; } /* The series trail was picking up the shared `.breadcrumb` card treatment, so "Home › Series" sat in a white box above the title. A trail is type, not a surface. */ .series-crumbs { background: transparent; border: 0; border-radius: 0; padding: 0; } /* The ebooks hub's AMP chip shares the results row with the count line, and the row is a flex container — the chip was growing into a full-width pale bar. It is a chip: as wide as its label. The field under the title aligns with the title rather than floating to the middle of the page. */ .main-wrap .results-meta .amp-link { flex: none; align-self: center; } .mini-hero .mini-search { margin-inline: 0; max-inline-size: 640px; } @media (max-width: 640px) { .main-wrap .results-meta { flex-wrap: wrap; } } /* The hub's results line really is a two-item row — the count and the AMP chip — so the block rule the directory pages need is undone here. */ .main-wrap .results-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } /* -------------------------------------------------------------------------- 12. Footer: four equal columns, a plate under the badge, and a phone layout that is not two screens of links. Measured on the live site at 1440px, before this block: the grid was `1.6fr 1fr 1fr 1fr` — tracks of 397/248/248/248 — and the wide first track held the SHORTEST column (Browse, 7 links against Tools' 10). So a third of the footer's width was empty blue while the other three columns wrapped, and the whole band stood 794px tall: taller than a 900px laptop viewport. On a 390px phone the four groups stack, so the footer was 1808px — more than two full screens of links after the page had already ended. Two tracks of ~160px hold every label in this footer, so the phone gets two. Nothing here changes which links the footer prints; that list is enw_footer() in includes/enw_ui.php and it is the same on every page. -------------------------------------------------------------------------- */ @media (min-width: 900px) { .enw-footer .enw-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--enw-sp-8, 32px) var(--enw-sp-10, 40px); } } /* A link row is 24px of text, not a menu item: the drawer's rows are the ones that need a 44px target, and this list was borrowing their rhythm. */ .enw-footer .enw-drawer__list li + li, .enw-footer ul li + li { margin-block-start: 5px; } .enw-footer .enw-footer__link { display: inline-block; padding-block: 2px; line-height: 1.45; font-size: 15px; } /* The column headings were the same size AND weight as the body font (measured live: 15px/400 for the links, 15px/700 for the heading), so the four groups read as twenty-eight links in a row rather than four lists. One step up in size and weight is enough to separate them — no caps, no rule. */ .enw-footer .enw-footer__title { margin-block-end: 10px; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--enw-on-header, #fff); } @media (max-width: 899px) { .enw-footer .enw-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--enw-sp-6, 24px) var(--enw-sp-4, 16px); } .enw-footer .enw-footer__link { font-size: 14.5px; } } /* Two tracks need room for "Compare two lists" and "Shared shelves" at 14.5px; under 360px a folded phone is better served by one full-width column. */ @media (max-width: 359px) { .enw-footer .enw-footer__grid { grid-template-columns: 1fr; } } /* THE BADGE SITS ON A PLATE. The official Play badge is a black tile with a transparent margin. On the footer's blue band that reads as a black rectangle with an unreadable wordmark in it — and it is a badge, so shrinking it is not an option either. A white rounded plate is how the mark is meant to be used, and it makes the same asset legible on all eight palettes. */ .enw-footer__brand .enw-footer__app { display: flex; align-items: center; background: #fff; border-radius: 10px; padding: 5px 7px; line-height: 0; } .enw-footer__brand .enw-footer__app img { height: 38px; width: auto; } @media (max-width: 640px) { .enw-footer__brand .enw-footer__app img { height: 34px; } } /* The two legal rows: one measure, one weight, and the year row quieter than the affiliate disclosure — which is the one a reader is entitled to notice. */ .enw-footer .enw-footer__legal { font-size: 13px; line-height: 1.65; color: color-mix(in oklab, var(--enw-on-header, #fff) 80%, transparent); } /* The second row is a line of its own, not a continuation of the sentence above it: the affiliate disclosure and the copyright are two thoughts, and with every gap removed the phone read them as one run ("…DMCA and takedown © 2026 EbookNetworking.net…"). Eight pixels and no rule — the rule is the first row's, and two rules 30px apart is a table. */ .enw-footer .enw-footer__legal + .enw-footer__legal { margin-block-start: 8px; padding-block-start: 0; border-block-start: 0; } .enw-footer .enw-footer__legal strong { color: var(--enw-on-header, #fff); } .enw-footer__legal .enw-consent-open-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- 13. Auto ads inside the footer Measured on the live /ebooks/ hub: Google's auto-placement script inserted a `div.google-auto-placed` between the footer's link columns and its brand row — inside the