/** * WordPress core blocks — The Catalogue. * * Ported from the handover block-library reference * (ThemeDev/EyeRevolution-Catalogue-Handover/03-catalogue/blocks.html). * Tokens (--serif, --ink, --gold, …) are defined on :root in catalogue.css. * Authored-content text blocks are scoped to .wp-block-post-content so they * style article/page bodies without reaching into the brand components; block * rules keyed by their own .wp-block-* class are global (unambiguous). * * @package eye-revolution */ /* ---------- text blocks (article body) ---------- Vertical rhythm: a heading opens a new group, so it carries generous space ABOVE (separating it from the previous group) and tight space BELOW (binding it to the text it introduces). gap-above > gap-below = Gestalt proximity, the cue that says the layout is considered. First child resets so it doesn't double up on the reading column's own top padding. */ .wp-block-post-content>:first-child{margin-top:0} /* Full-bleed band sections stack flush — kill the block-gap strip that otherwise reveals the page background between consecutive full-width bands (the homepage, and any page built from full-bleed sections). */ .wp-block-post-content > .alignfull + .alignfull{margin-block-start:0} .wp-block-post-content h1.wp-block-heading{font-family:var(--sans);font-weight:300;font-size:clamp(34px,5vw,52px);letter-spacing:.014em;line-height:1.2;color:var(--ink);margin:var(--space-lg) 0 1.4em} .wp-block-post-content h2.wp-block-heading{font-family:var(--sans);font-weight:300;font-size:clamp(30px,1.7rem + 2.2vw,43px);letter-spacing:.07em;line-height:1.3;color:var(--ink);margin:var(--space-md) 0 1em} .wp-block-post-content h3.wp-block-heading{font-family:var(--sans);font-weight:400;font-size:21px;letter-spacing:.048em;line-height:1.6;color:var(--ink);margin:var(--space-sm) 0 .6em} .wp-block-post-content h4.wp-block-heading{font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:.03em;color:var(--ink);margin:var(--space-sm) 0 .6em} .wp-block-post-content h5.wp-block-heading{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:var(--space-sm) 0 1.4em} .wp-block-post-content h6.wp-block-heading{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:var(--space-sm) 0 1.4em} /* two headings in a row: the second binds to the first, not a fresh group */ .wp-block-post-content :is(h1,h2,h3,h4,h5,h6)+:is(h2,h3,h4,h5,h6){margin-top:var(--space-xs)} .wp-block-post-content p{font-size:clamp(16px,12px + 1.15vw,18.5px);font-weight:300;line-height:2;letter-spacing:.03em;color:var(--ink-2);margin:0 0 1.5em} .wp-block-post-content p.has-large-font-size{font-size:23px;line-height:1.5} .wp-block-post-content p.has-drop-cap:first-letter{font-family:var(--sans);font-weight:500;font-size:3.5em;line-height:.78;float:left;margin:.06em .12em 0 0;color:var(--ink)} .wp-block-post-content ul,.wp-block-post-content ol{font-size:clamp(16px,12px + 1.15vw,18.5px);font-weight:300;line-height:2;letter-spacing:.03em;color:var(--ink-2);margin:0 0 1.5em;padding-left:1.4em} .wp-block-post-content li{margin:.35em 0} .wp-block-post-content ul li::marker{color:var(--gold-line)} .wp-block-post-content ol li::marker{color:var(--gold);font-family:var(--sans);font-style:italic;font-weight:500} .wp-block-post-content ul ul,.wp-block-post-content ol ol{margin:.35em 0} /* ---------- quotes ---------- */ .wp-block-quote{border-left:2px solid var(--gold-line);padding:2px 0 2px 26px;margin:1.6em 0} .wp-block-quote p{font-family:var(--sans);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--ink);margin:0 0 .4em} .wp-block-quote cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} .wp-block-pullquote{border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);padding:36px 24px;margin:2em 0;text-align:center} .wp-block-pullquote p{font-family:var(--sans);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.28;color:var(--ink);margin:0} .wp-block-pullquote cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)} /* ---------- table ---------- */ .wp-block-table{margin:1.6em 0} .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px} .wp-block-table th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-align:left;padding:0 14px 11px 0;border-bottom:1px solid var(--ink)} .wp-block-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-weight:300} .wp-block-table figcaption{font-family:var(--sans);font-style:italic;font-size:13.5px;color:var(--ink-3);margin-top:10px;text-align:center} /* ---------- code / verse ---------- */ .wp-block-code,.wp-block-preformatted{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px;font-family:ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.6;color:var(--ink);overflow:auto;margin:1.4em 0;white-space:pre} .wp-block-verse{font-family:var(--sans);font-size:18px;line-height:1.7;color:var(--ink);white-space:pre-wrap;margin:1.4em 0;font-style:italic} /* ---------- media ---------- */ .wp-block-image{margin:var(--space-md) 0} .wp-block-image img{display:block;width:100%;border-radius:0} .wp-block-image figcaption{font-family:var(--sans);font-style:italic;font-size:14.5px;color:var(--ink-3);margin-top:var(--space-2xs);text-align:center} .wp-block-image.alignright{float:right;max-width:46%;margin:.4em 0 1.2em 30px} .wp-block-image.alignleft{float:left;max-width:46%;margin:.4em 30px 1.2em 0} .wp-block-image.alignright img,.wp-block-image.alignleft img{border-radius:2px} /* Gallery: defer to the WordPress core block. Its native flex layout honours the block's own column count, gap and "Crop images to fit" (is-cropped) setting at the images' natural proportions — no forced square crop, no grid override. We only set the vertical rhythm and stop the single-image margin (above) from leaking into the gallery cells. An align:full gallery still breaks out of the reading column via .textspine .alignfull (catalogue.css). */ .wp-block-gallery.has-nested-images{margin-block:var(--space-md)} .wp-block-gallery.has-nested-images figure.wp-block-image{margin:0} /* ---------- client logo wall (.client-logos) ---------- ~80 client logos in one gallery block. The core flex gallery mis-serves them two ways. Figures carry flex-grow, so a short final row stretches its logos to fill the width (the "last row balloons"). And the only responsive step is 6-col at >=600px then 2-col below it, which snaps instead of flowing. We re-cast it as an auto-fill grid: columns step 5,4,3,2 as the viewport narrows, every cell is a uniform fixed box, and each logo is capped then scaled to fit. The caps sit at the logos' native 135 x 100, so they show full size; widening the track to 180px trades the old 6-up for a calmer ~5-up that gives them the room. The img caps use !important to neutralise the per-image inline width/height the editor baked into 62 of the 80 logos (and left off the other 17), so all 80 render alike. */ .wp-block-gallery.client-logos{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px 24px;align-items:center;justify-items:center} .wp-block-gallery.client-logos figure.wp-block-image{width:auto!important;flex:none;margin:0;height:120px;display:flex;align-items:center;justify-content:center} .wp-block-gallery.client-logos figure.wp-block-image img{width:auto!important;height:auto!important;max-width:135px;max-height:100px;object-fit:contain} @media (max-width:600px){ .wp-block-gallery.client-logos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 16px} .wp-block-gallery.client-logos figure.wp-block-image{height:90px} .wp-block-gallery.client-logos figure.wp-block-image img{max-width:120px;max-height:72px} } .wp-block-cover{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink);text-align:center} .wp-block-cover img.wp-block-cover__image-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* The donor theme darkened every cover with a top-to-bottom scrim so white display type would sit on it. On a photographer's site the photograph is the content, so the featured-image hero opts out entirely — it was reading as a blue-grey colour cast over the image. Any other cover that genuinely carries text over it keeps the scrim. */ .wp-block-cover:not(.FeaturedCoverImage) .wp-block-cover__background{background:linear-gradient(180deg,rgba(18,18,20,.3),rgba(18,18,20,.62))!important;opacity:1!important} .FeaturedCoverImage .wp-block-cover__background{background:none!important;opacity:0!important} /* the cover's own ink ground shows at the edges while the image decodes */ .FeaturedCoverImage{background-color:transparent!important} .wp-block-cover .wp-block-cover__inner-container{position:relative;z-index:1;color:#fff;padding:48px 32px;max-width:34ch} .wp-block-cover h1,.wp-block-cover h2,.wp-block-cover h3{font-family:var(--sans);font-weight:500;color:#fff;letter-spacing:-.01em;line-height:1.12} .wp-block-cover p{color:rgba(255,255,255,.9);font-weight:300} .wp-block-media-text{margin:var(--space-md) 0} .wp-block-media-text__media img{width:100%;display:block} .wp-block-media-text h3{font-family:var(--sans);font-weight:500;font-size:28px;color:var(--ink);letter-spacing:-.01em;margin-bottom:.4em} /* ---------- layout ---------- */ .wp-block-columns h4{font-family:var(--sans);font-weight:500;font-size:21px;color:var(--ink);margin-bottom:.3em} .wp-block-button__link{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:.01em;padding:13px 26px;border-radius:7px;text-decoration:none;transition:.18s} .wp-block-button__link:hover{background:#000} .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--ink);border:1px solid var(--ink)} .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--ink);color:var(--paper)} .wp-block-button.is-gold .wp-block-button__link{background:var(--gold);color:var(--paper)} hr.wp-block-separator{border:0;border-top:1px solid var(--gold-line);max-width:80px;margin:2.4em auto;opacity:.75} hr.wp-block-separator.is-style-wide{max-width:100%} hr.wp-block-separator.is-style-dots{border:0;max-width:none;text-align:center;line-height:1;height:auto} hr.wp-block-separator.is-style-dots::before{content:"···";color:var(--gold);font-size:26px;letter-spacing:.5em;padding-left:.5em} .wp-block-group.has-panel{background:var(--panel);border-radius:14px;padding:34px 36px;margin:1.8em 0} .wp-block-group.has-panel h3{font-family:var(--sans);font-weight:500;font-size:24px;color:var(--ink);margin-bottom:.4em} /* ---------- widget / query ---------- */ .wp-block-latest-posts{list-style:none;padding:0;margin:1.6em 0} .wp-block-latest-posts.is-grid{display:grid;gap:0} .wp-block-latest-posts li{display:flex;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)} .wp-block-latest-posts__post-date{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;flex:0 0 96px} .wp-block-latest-posts__post-title{font-family:var(--sans);font-weight:500;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:-.005em} .wp-block-latest-posts__post-title:hover{color:var(--gold)} .wp-block-latest-posts__post-excerpt{font-size:15px;color:var(--ink-3);margin-top:4px;font-weight:300} .wp-block-categories-list,.wp-block-archives-list{list-style:none;padding:0;margin:1.4em 0;columns:2;column-gap:40px} .wp-block-categories-list li,.wp-block-archives-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;break-inside:avoid} .wp-block-categories-list a,.wp-block-archives-list a{color:var(--ink-2);text-decoration:none} .wp-block-categories-list a:hover,.wp-block-archives-list a:hover{color:var(--gold)} .wp-block-tag-cloud{margin:1.4em 0;display:flex;flex-wrap:wrap;gap:9px} .wp-block-tag-cloud a{display:inline-block;font-family:var(--sans);font-size:12.5px!important;letter-spacing:.02em;color:var(--ink-2);border:1px solid var(--line);border-radius:980px;padding:6px 15px;text-decoration:none;transition:.15s} .wp-block-tag-cloud a:hover{border-color:var(--gold-line);color:var(--gold)} .wp-block-search__inside-wrapper{display:flex;max-width:440px;border:1px solid var(--gold-line);border-radius:9px;overflow:hidden} .wp-block-search input.wp-block-search__input{flex:1;border:0;background:#fff;padding:13px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none} .wp-block-search button.wp-block-search__button{margin:0;border:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:0 22px;cursor:pointer} .wp-block-details{border-top:1px solid var(--line);margin:0} .wp-block-details summary{font-family:var(--sans);font-weight:500;font-size:20px;color:var(--ink);padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .wp-block-details summary::-webkit-details-marker{display:none} .wp-block-details summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:300} .wp-block-details[open]>summary::after{content:"–"} .wp-block-details p{font-size:16px;line-height:1.65;color:var(--ink-2);padding-bottom:20px;max-width:64ch} /* ---------- FAQ accordion (Yoast FAQ block — progressively enhanced) ---------- No JS: every answer stays visible (content always reachable, AAA). The deferred yoast-faq-toggle.js marks each .schema-faq-section .is-enhanced and turns the block into a single-open accordion: a gold +/- marker on the right of each question, click / Enter / Space slides the answer open, and opening one closes whichever was open before. Scoped under .schema-faq to win over the .wp-block-post-content p / strong body rules. */ .schema-faq{margin:1.8em 0} .schema-faq .schema-faq-section{border-top:1px solid var(--gold-line)} .schema-faq .schema-faq-section:last-child{border-bottom:1px solid var(--gold-line)} .schema-faq .schema-faq-question{margin:0;font-family:var(--sans);font-weight:500;font-size:clamp(19px,2.2vw,22px);line-height:1.32;color:var(--ink);padding:20px 0} .schema-faq .schema-faq-question strong{font-weight:inherit} .schema-faq .schema-faq-answer{margin:0;padding:0 0 22px;font-size:16px;font-weight:300;line-height:1.7;color:var(--ink-2);max-width:68ch} .schema-faq .schema-faq-answer a{color:var(--gold);border-bottom:1px solid var(--gold-soft)} .schema-faq .schema-faq-answer a:hover{border-color:var(--gold)} /* enhanced (JS available): collapse into the interactive single-open accordion */ /* left-group the question (some questions store the "?" as a separate text node after a nested , so justify:space-between would fling it to the middle); only the +/- marker is pushed right, via margin-left:auto. */ .schema-faq .is-enhanced.schema-faq-section .schema-faq-question{display:flex;align-items:baseline;cursor:pointer;-webkit-user-select:none;user-select:none} .schema-faq .is-enhanced.schema-faq-section .schema-faq-question::after{content:"+";flex:0 0 auto;margin-left:auto;padding-left:26px;color:var(--gold);font-weight:300;font-size:24px;line-height:1} .schema-faq .is-enhanced.schema-faq-section.is-open .schema-faq-question::after{content:"–"} .schema-faq .is-enhanced.schema-faq-section .schema-faq-question:hover{color:var(--gold)} .schema-faq .is-enhanced.schema-faq-section .schema-faq-answer{max-height:0;overflow:hidden;opacity:0;padding:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease} .schema-faq .is-enhanced.schema-faq-section.is-open .schema-faq-answer{opacity:1} .schema-faq .is-enhanced.schema-faq-section .schema-faq-answer-inner{display:block;padding-bottom:22px} @media (prefers-reduced-motion:reduce){ .schema-faq .is-enhanced.schema-faq-section .schema-faq-answer{transition:opacity .2s ease} } @media (max-width:680px){ .wp-block-categories-list,.wp-block-archives-list{columns:1} .wp-block-image.alignright,.wp-block-image.alignleft{float:none;max-width:100%;margin:1.2em 0} } /* ---------- readable measure for running text ---------- theme.json sets contentSize:800px. At the 18px body size that is 86 characters per line on posts and 90 on the homepage; the readable range is 45–75. Rather than narrow contentSize globally — which would shrink photographs too, on a site whose product is photographs — the cap applies to running text only. Images, figures and anything alignwide or alignfull keep their full width. 620px lands in the high 60s. A px value is used deliberately: em and ch resolve against each element's own font-size, so a heading would get a far wider cap than a paragraph and the shared left edge would break. max-width is applied at any depth, because homepage copy sits inside groups rather than directly in the content wrapper. It is a no-op in narrow containers (a column at 355px is already under the cap). Auto margins are applied ONLY where the surrounding layout is itself centred, so left-aligned and grid content is not nudged out of place. */ :root{--measure:645px} /* Lists are only capped when they are prose (.wp-block-list or an unclassed ul/ol). Query loops, latest-posts and navigation also render as