/* Theme Name: GrowthStackPulse Theme URI: https://www.growthstackpulse.com Author: Jakub Zachveja Description: The GrowthStackPulse design system as a WordPress block theme. Tokens live in theme.json, components live in /patterns, page shapes live in /templates. Built from the nine locked page prototypes. Version: 0.15.0 Requires at least: 6.9 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: growthstackpulse */ /* ============================================================ TOKEN BRIDGE The values are defined ONCE, in theme.json. This block only gives them the short names the design CSS below already uses, so changing a colour means editing theme.json and nothing else. ============================================================ */ :root{ --surface:var(--wp--preset--color--surface); --panel:var(--wp--preset--color--panel); --ink:var(--wp--preset--color--ink); --mute:var(--wp--preset--color--mute); --rule:var(--wp--preset--color--rule); --accent:var(--wp--preset--color--accent); --deep:var(--wp--preset--color--deep); --tint:var(--wp--preset--color--tint); --accent-on-dark:var(--wp--preset--color--accent-on-dark); --serif:var(--wp--preset--font-family--serif); --sans:var(--wp--preset--font-family--sans); --mono:var(--wp--preset--font-family--mono); --maxw:1288px; --pad:40px; --measure:74ch; --media:840px; --rail:236px; } /* ============================================================ DESIGN SYSTEM -- lifted unchanged from the locked homepage prototype. Do not retype values here; they come from above. ============================================================ */ /* Ground: LOCKED to cool grey #F4F6F9, chosen 30 Aug 2026. */ *{box-sizing:border-box} body{ margin:0; background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:18px; line-height:1.6; letter-spacing:.1px; -webkit-font-smoothing:antialiased; } img{max-width:100%} a{text-decoration:none;color:inherit;transition:all .15s ease-in-out} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .eyebrow{ font-family:var(--sans);font-weight:700;font-size:13px;line-height:20px; letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin:0; } .btn{ font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.2px; background:var(--accent);color:#fff;border:0;border-radius:3px; padding:11px 18px;cursor:pointer;white-space:nowrap;display:inline-block; transition:all .15s ease-in-out; } .btn:hover{background:var(--deep);color:#fff} .btn-ghost{background:#fff;color:var(--accent);border:1px solid var(--rule);padding:10px 17px} .btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)} /* ---------------- header ---------------- Three-part bar: wordmark left, nav centred, actions right. Floats on the hero's own ground at the top, then turns solid on scroll. */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:40; background:transparent;border-bottom:1px solid transparent; transition:background .2s ease-in-out, border-color .2s ease-in-out; } .hdr{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px; height:88px; } .wordmark{ font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.6px; white-space:nowrap;line-height:1;justify-self:start;color:#fff; } .nav{display:flex;align-items:center;gap:30px;justify-self:center} .nav a{ font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.1px; white-space:nowrap;color:#EAF4F0; } .nav a:hover{color:#fff} .hdr-actions{display:flex;align-items:center;gap:18px;justify-self:end} .hdr-link{font-family:var(--sans);font-weight:700;font-size:14px;color:#EAF4F0;white-space:nowrap} .hdr-link:hover{color:#fff} .hdr-cta{ font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.2px;line-height:1; background:#fff;color:var(--accent); border-radius:3px;padding:11px 18px;white-space:nowrap; display:inline-flex;align-items:center; transition:all .15s ease-in-out; } .hdr-cta:hover{background:var(--tint);color:var(--deep)} /* scrolled past the hero */ .site-header.solid{background:var(--surface);border-bottom-color:var(--rule)} .site-header.solid .wordmark{color:var(--ink)} .site-header.solid .wordmark:hover{color:var(--accent)} .site-header.solid .nav a, .site-header.solid .hdr-link{color:var(--ink)} .site-header.solid .nav a:hover, .site-header.solid .hdr-link:hover{color:var(--accent)} .site-header.solid .hdr-cta{background:var(--accent);color:#fff} .site-header.solid .hdr-cta:hover{background:var(--deep)} .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:6px} .site-header.solid .menu-toggle{color:var(--ink)} /* ---------------- hero ---------------- The brand green, at full depth, built from the same recipe as the covers and the footer: a radial field with the house grain over it at the same size and opacity. Square edges. Green appears once at full scale here and once as a control on the newsletter button, and nowhere else. */ .hero{ position:relative;overflow:hidden; background:radial-gradient(130% 120% at 50% 8%, #0A8A66 0%, #00543F 44%, #02241B 100%); } .hero::after{ content:"";position:absolute;inset:0;background-image:var(--grain); background-size:108px;mix-blend-mode:overlay;opacity:.7;pointer-events:none; } .hero-in{ position:relative;z-index:1; padding:172px 0 128px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:22px; } .hero .eyebrow{color:#8FE3C4} /* Base H1 for every page that is NOT the green hero. Same scale, ink colour. */ h1{font-family:var(--serif);font-weight:500;font-size:54px;line-height:1.1;letter-spacing:-1.7px;margin:0;max-width:620px;text-wrap:balance;color:var(--ink)} .hero h1{ font-family:var(--serif);font-weight:500;font-size:54px;line-height:1.1; letter-spacing:-1.7px;margin:0;max-width:620px;text-wrap:balance;color:#fff; } .hero-sub{font-family:var(--sans);font-weight:400;font-size:20px;line-height:1.55;color:#BCD9CE;margin:0;max-width:56ch} .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px} .chip{ position:relative; font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.3px; border:1px solid rgba(255,255,255,.24);border-radius:50px;padding:9px 18px; background:transparent;color:#EAF4F0;transition:all .15s ease-in-out; } /* Hover revised 6 Sep 2026, his call, option C. The pill now behaves the same way here as it does on the 404: the house 4px lift plus a change to the element's own rule. The old white fill inversion is gone, so there is one pill gesture on the site rather than two. The ::after is the hit-area buffer. Without it the lift moves the pill out from under the cursor and hover flickers. His find, on the 404. */ .chip::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-6px} .chip:hover{border-color:#fff;color:#fff;transform:translateY(-4px)} /* ---------------- sections ---------------- */ section{padding:88px 0} .hero + section{padding-top:80px} section.alt{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap} .sec-head h2{margin:8px 0 0} .sec-head .sub{margin:8px 0 0;max-width:58ch} .more{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.2px;color:var(--accent);white-space:nowrap} .more:hover{color:var(--deep)} /* ---------------- one scale for every section heading ---------------- */ .sec-head h2, .tools-intro h2, .faq-aside h2, .author-card h2, .signup h2{ font-family:var(--serif);font-weight:500; font-size:32px;line-height:1.22;letter-spacing:-.5px; } /* :not(.eyebrow) matters. A container rule like ".faq-aside p" scores higher than ".eyebrow", so without it the eyebrow silently loses its green and renders mute. That is why "Common questions" was grey. */ .sec-head .sub, .tools-intro p:not(.eyebrow), .faq-aside p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--mute)} /* ---------------- article cards ---------------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:56px 16px} .card{ display:flex;flex-direction:column;gap:24px;padding-bottom:32px; border-bottom:1px solid var(--rule); transition:all .15s ease-in-out; } .card:hover{transform:translateY(-4px);border-bottom-color:var(--accent)} .cover{ --ox:50%;--oy:50%; /* fallback light source: an uncategorised post still blooms from its centre rather than not at all */ aspect-ratio:16/10;border-radius:8px;position:relative;overflow:hidden; display:flex;align-items:flex-end;padding:20px; } /* Same material as the footer: one quiet field of the category colour with the house grain over it at the same size and opacity. No second bloom, no contour layer. */ .cover::after{ content:"";position:absolute;inset:0;background-image:var(--grain); background-size:108px;mix-blend-mode:overlay;opacity:.7;pointer-events:none; } .cover b{ position:relative;z-index:1; font-family:var(--sans);font-weight:800;font-size:17px;line-height:1.25; color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35); } /* Each field carries its own numbers as tokens as well as painting itself, so anything that needs to REBUILD the field at a different origin can, without a second copy of the palette. --hx is where the light goes on hover. Added 18 Sep 2026 for the card-cover bloom. */ .g-growth {--c1:#0F7F5F;--c2:#061F1A;--ox:28%;--oy:22%;--hx:36%; background:radial-gradient(125% 115% at 28% 22%, #0F7F5F 0%, #061F1A 100%)} .g-martech {--c1:#11738D;--c2:#061A24;--ox:72%;--oy:22%;--hx:64%; background:radial-gradient(125% 115% at 72% 22%, #11738D 0%, #061A24 100%)} .g-salesops{--c1:#21529F;--c2:#0A1128;--ox:28%;--oy:78%;--hx:36%; background:radial-gradient(125% 115% at 28% 78%, #21529F 0%, #0A1128 100%)} .g-ai {--c1:#4F3792;--c2:#120C24;--ox:72%;--oy:78%;--hx:64%; background:radial-gradient(125% 115% at 72% 78%, #4F3792 0%, #120C24 100%)} .card-cat{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase} .c-growth{color:#007354}.c-martech{color:#0E6E85}.c-salesops{color:#0B63C5}.c-ai{color:#6B4BA8} .card h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.3px;margin:0} .card:hover h3{color:var(--accent)} .card-body{display:flex;flex-direction:column;gap:15px;flex:1;padding-right:32px} .byline{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px} .avatar{width:28px;height:28px;border-radius:50%;flex:none;background:var(--tint);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:13px;color:var(--accent)} .byline-txt{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.2px} .byline-date{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--mute)} /* ---------------- tools: full-width band, no box ---------------- */ .tools-band{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:92px 0} .tools-panel{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:80px;align-items:start} .tools-intro .eyebrow{color:var(--accent);margin:0 0 12px} .tools-intro h2{margin:0 0 14px} .tools-intro p:not(.eyebrow){margin:0 0 24px} .tools-intro .allt{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.2px;color:var(--accent);display:inline-flex;align-items:center;gap:8px} .tools-intro .allt:hover{color:var(--deep);gap:13px} .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px} /* LOCKED 2026-09-03. The 3px category left rule is gone, replaced by the grained category tile beside the text. His call, and his reasoning: the small square is the site's own mark, so the tools band is where it earns its keep. Same gesture as the article cards on hover: a 4px lift. */ .titem{ display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;align-items:start; transition:all .15s ease-in-out; } .titem:hover{transform:translateY(-4px)} .titem h3{ font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.35;letter-spacing:-.2px; margin:0;color:var(--ink);transition:all .15s ease-in-out; } .titem:hover h3{color:var(--tk)} .titem p{margin:11px 0 0;font-size:15px;line-height:1.6;color:var(--mute)} .titem .tkind{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--mute);display:block;margin-top:12px} .tk-growth {--tk:#007354} .tk-martech {--tk:#0E6E85} .tk-salesops{--tk:#0B63C5} .tk-ai {--tk:#6B4BA8} /* ---------------- author ---------------- */ .author-card{ background:var(--panel);border:1px solid var(--rule);border-radius:8px; border-top:2px solid var(--accent); padding:48px;display:grid;grid-template-columns:160px minmax(0,1fr);gap:44px;align-items:start; } /* The mark, not a face. Same gradient and grain as the article covers, so the block is made of the house material rather than waiting on a photo. */ .author-mono{ width:160px;height:190px;border-radius:8px;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; background:radial-gradient(125% 115% at 28% 22%, #0F7F5F 0%, #061F1A 100%); } .author-mono::after{ content:"";position:absolute;inset:0;background-image:var(--grain); background-size:108px;mix-blend-mode:overlay;opacity:.7;pointer-events:none; } .author-mono b{ position:relative;z-index:1;font-family:var(--serif);font-weight:500; font-size:88px;line-height:1;letter-spacing:-2px;color:#fff; } .author-body{display:flex;flex-direction:column;gap:22px} .author-head{display:flex;flex-direction:column;gap:6px} .author-card h2{margin:0} .author-role{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);margin:0} .author-card p.bio{margin:0;font-size:17px;line-height:1.65;max-width:62ch} .author-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* ---------------- faq: third pattern, split column ---------------- */ .faq-split{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start} .faq-aside{position:static} .faq-aside h2{margin:8px 0 14px} .faq-aside p:not(.eyebrow){margin:0 0 22px} .faq-list{border-top:1px solid var(--rule)} .faq-item{border-bottom:1px solid var(--rule)} .faq-item summary{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:24px 4px; font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.35;letter-spacing:-.2px; transition:all .15s ease-in-out; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--accent)} .faq-item summary .plus{ flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--rule); display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-weight:700;font-size:16px;color:var(--accent);line-height:1; } .faq-item[open] summary .plus{background:var(--accent);color:#fff;border-color:var(--accent)} .faq-item[open] summary .plus span{display:none} .faq-item[open] summary .plus::after{content:"\2013"} .faq-answer{padding:0 60px 26px 4px;margin:0;font-size:17px;line-height:1.65;color:var(--mute)} /* ---------------- newsletter CTA band ---------------- */ .signup{background:var(--panel);color:var(--ink);padding:68px 0 108px;border-top:1px solid var(--rule)} .signup-in{max-width:880px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .signup .eyebrow{color:var(--accent);margin:0} .signup h2{margin:0;max-width:none;color:var(--ink)} @media (min-width:900px){.signup h2{white-space:nowrap}} .signup p.lead{margin:0;font-size:17px;line-height:1.55;color:var(--mute);max-width:48ch} .signup-right{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:500px;margin-top:8px} .form{display:flex;gap:10px;width:100%} .form input[type=email]{ flex:1;min-width:0;font-family:var(--sans);font-size:16px;color:var(--ink); background:#fff;border:1px solid var(--rule);border-radius:3px;padding:14px 16px; } .form input[type=email]::placeholder{color:#8A8A8A} .form input[type=email]:focus{outline:2px solid var(--accent);outline-offset:2px} .form button{ font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.2px; background:var(--accent);color:#fff;border:0;border-radius:3px;padding:14px 24px;cursor:pointer;white-space:nowrap; transition:all .15s ease-in-out; } .form button:hover{background:var(--deep)} .signup small{font-size:12.5px;line-height:1.5;color:var(--mute)} .signup .status{margin:0;font-size:13px;font-weight:700;color:var(--accent);min-height:0} .signup .status:empty{display:none} /* newsletter form wiring (0.9.5) */ .signup .status.is-error{color:#B42318} .signup-note a{color:var(--mute);text-decoration:underline} .signup-note a:hover{color:var(--accent)} .signup-right p{margin:0} .gsp-nl button[disabled]{opacity:.7;cursor:progress} .gsp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .gsp-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .signup .gsp-nl[hidden],.signup .signup-note[hidden]{display:none!important} /* newsletter success state (0.9.7): the band's eyebrow, heading and lead swap to the confirmation; "Open {provider}" takes the form's place. No card, no box. */ .nl-done{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:nl-in .25s ease-out} .nl-done:focus{outline:none} .nl-email{font-weight:700;color:var(--ink);overflow-wrap:anywhere} .signup p.lead.nl-lead-done{max-width:none} .nl-open{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.2px; background:var(--accent);color:#fff;border-radius:3px;padding:14px 24px;white-space:nowrap} .nl-open:hover{background:var(--deep);color:#fff} .signup .nl-help{margin:0;font-size:12.5px;line-height:1.5;color:var(--mute)} .nl-retry{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer} .nl-retry:hover{color:var(--deep)} @keyframes nl-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.nl-done{animation:none}} @media (max-width:767px){.nl-open{width:100%}} /* ---------------- footer ---------------- */ .site-footer{ background:var(--ink);color:#fff; border-radius:32px 32px 0 0; margin-top:-40px;position:relative;z-index:1;overflow:hidden; padding:72px 0 36px; } /* Same grain as the covers, so the footer is made of the house material rather than being a flat fill. */ .site-footer::after{ content:"";position:absolute;inset:0;background-image:var(--grain); background-size:108px;mix-blend-mode:overlay;opacity:.7;pointer-events:none; } .site-footer > .wrap{position:relative;z-index:1} .foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px 32px} .foot-brand .wordmark{font-size:24px;color:#fff} .foot-brand a.wordmark:hover{color:var(--accent-on-dark)} .foot-brand p{margin:14px 0 0;font-size:15px;line-height:1.6;color:#A9ACC9;max-width:32ch} .foot-brand .contact{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--accent-on-dark);display:block} .foot-brand .place{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:#767A9E;display:block} /* Plain text, not a heading. These are navigation labels, and an
after the page's H2s put four empty levels into the document outline for nothing. 18 Sep 2026. */ .foot .foot-label{ font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.9px;text-transform:uppercase; margin:0 0 18px;padding-bottom:12px;color:#fff;border-bottom:1px solid #363A63; } .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .foot a{font-size:15px;color:#A9ACC9} .foot a:hover{color:var(--accent-on-dark)} .foot-base{margin-top:56px;padding-top:24px;border-top:1px solid #363A63;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-base p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:#767A9E} @media (max-width:1080px){ .tools-panel{grid-template-columns:1fr;gap:48px} } @media (max-width:1000px){ .foot-top{grid-template-columns:1fr 1fr} .faq-split{grid-template-columns:1fr;gap:32px} .faq-aside{position:static} } @media (max-width:900px){ .nav{display:none}.menu-toggle{display:block} h1{font-size:38px;letter-spacing:-1px} .hero-in{padding:132px 0 60px} section{padding:60px 0} .author-card{grid-template-columns:1fr;gap:28px;padding:32px} .author-mono{width:140px;height:166px} .author-mono b{font-size:76px} .tools-band{padding:60px 0} .tools-panel{grid-template-columns:1fr;gap:40px} .tgrid{gap:32px} } @media (max-width:768px){ :root{--pad:24px} .hero-sub{font-size:18px} .sec-head h2,.tools-intro h2,.faq-aside h2,.author-card h2,.signup h2{font-size:26px;letter-spacing:-.3px} .grid{gap:32px} .card-body{padding-right:0} .signup{padding:52px 0 88px} .form{flex-direction:column} .form button{width:100%} .site-footer{border-radius:24px 24px 0 0} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---------------- the tools item's tile, LOCKED 2026-09-03 ------------ 52px, 8px radius, the category's own cover gradient with the house grain at 108px and 0.7. No new material: the four gradients already exist in this file for the article covers. Rejected on the way here: the tile above the headline, which pushed the band 120px taller and made the tile read as decoration on its own line rather than a mark attached to the item. */ .ttile{ --ox:50%;--oy:50%; width:52px;height:52px;border-radius:8px;position:relative;overflow:hidden;flex:none; } .ttile::after{ content:"";position:absolute;inset:0;background-image:var(--grain); background-size:108px;mix-blend-mode:overlay;opacity:.7;pointer-events:none; } /* ---------------- statement, LOCKED 2026-09-05 ------------------------ The site's thesis, said once, in the publication's own voice. Centred, white ground, no mark, statement only. The type carries the argument: the vanity metrics are set in the faded tone and the sentence that matters is in --ink, so the emphasis is the point rather than decoration. Serif, one step below the hero at 44px. The faded tone is --ink at 45% rather than --mute. --mute is a neutral grey and --ink is a deep navy, so mixing them read as two colours in one sentence instead of one sentence with emphasis. Faded ink keeps both halves in a single hue and adds no token to the palette. Rejected on the way here: quote marks, which tell a reader someone said this and send them looking for a name, when nobody said it. The accent rule was the in-system alternative and was also not taken. */ .stmt-sec{padding:104px 0} .stmt-wrap{display:flex;flex-direction:column;align-items:center;text-align:center} .stmt{max-width:880px;margin:0} .stmt p{ font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.18; letter-spacing:-1.2px;margin:0;color:rgba(29,32,71,.45); } .stmt b{font-weight:500;color:var(--ink)} @media (max-width:900px){.stmt-sec{padding:72px 0}.stmt p{font-size:32px;letter-spacing:-.7px}.stmt{max-width:none}} /* ============================================================ BLOCK EDITOR BRIDGE Small rules that only exist because WordPress renders the markup slightly differently from the static prototype. ============================================================ */ /* WordPress cannot wrap a whole card in one link, so the title link is stretched to cover the card instead. Same result. */ .card{position:relative} .card .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:2} .card .byline,.card .card-cat{position:relative;z-index:3} /* Neutralise the block wrappers so his own layout rules win. */ /* REMOVED: .wp-block-group.wrap{max-width:none} outranked .wrap (0,2,0 beats 0,1,0) and stripped the 1288px page width. The layout type is "default", so WordPress never constrains these groups anyway and the rule was never needed. */ .wp-block-post-template{list-style:none;margin:0;padding:0} .wp-block-post-template.grid{display:grid} .wp-block-query{margin:0} .wp-block-post-title{margin:0} .wp-block-post-title a{color:inherit;text-decoration:none} .wp-block-post-excerpt__excerpt{margin:0} .wp-block-post-excerpt{margin:0} /* The editor canvas has no
/