/* ========================================================================== ZenWine — custom component styles for Blocksy -------------------------------------------------------------------------- Paste into: Appearance → Customize → Additional CSS Keep this file as your master copy. Edit here, then paste the whole thing. Colours and fonts are set in Blocksy's own panels (see the build guide). This file only covers the pieces Blocksy can't do on its own. Class contract — add these under a block's Advanced → Additional CSS class: zw-label a letterspaced eyebrow line (Paragraph) zw-hero the homepage hero (Cover) zw-marquee the scrolling rose band (Custom HTML) zw-doors the three-door row (Columns) zw-door each door (Column) zw-frame matted photo frame (Image / Post Featured Image) zw-statement the big rose pull-quote band (Group) zw-creds the credentials row (Columns) zw-events upcoming classes (Query Loop) zw-trips the travel band (Query Loop) zw-tiers the price chips (Columns) ========================================================================== */ :root{ --zw-plum:#3A1A2B; --zw-foxglove:#B8446E; --zw-foxglove-deep:#93325A; --zw-foxglove-pale:#E9A8BF; --zw-champagne:#D9B36B; --zw-champagne-soft:#EBD3A0; --zw-blush:#FBEFF2; --zw-chalk:#F5F3ED; --zw-forest:#1E2D21; --zw-ink:#2E1F27; --zw-ink-soft:#7A6570; --zw-frame-r:22px; } /* -------------------------------------------------------------------------- 1. Type character Blocksy loads Fraunces and Jost. These rules add the personality its font picker can't reach: the soft/wonky axes, and the gold italic accent. -------------------------------------------------------------------------- */ h1, h2, h3, h4, .zw-statement blockquote{ font-variation-settings:"SOFT" 42, "WONK" 1; letter-spacing:-0.02em; text-wrap:balance; } /* Wrap a word in italics in the editor and it turns champagne gold. This is what makes every headline feel considered rather than typed. */ h1 em, h2 em, h3 em, .zw-gold{ font-style:italic; font-weight:500; color:var(--zw-champagne); font-variation-settings:"SOFT" 60, "WONK" 1; } /* Eyebrow label above a heading */ .zw-label{ font-size:0.71rem !important; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--zw-foxglove); margin-bottom:16px !important; } .zw-label-gold{ color:var(--zw-champagne); } /* -------------------------------------------------------------------------- 1b. Dark bands Blocksy paints every heading Plum. On a dark background that's invisible. Put zw-dark on any Group with a dark background — Credentials and Travel — and everything inside flips to light type. -------------------------------------------------------------------------- */ .zw-dark h1, .zw-dark h2, .zw-dark h3, .zw-dark h4{ color:#fff; } .zw-dark p{ color:rgba(255,255,255,.78); } .zw-dark .zw-label{ color:var(--zw-champagne); } /* Buttons are excluded — they carry their own colours. Without the file-button exclusion the PDF download came out gold text on a gold background. */ .zw-dark a:not(.wp-block-button__link):not(.wp-block-file__button){ color:var(--zw-champagne); } .zw-dark .zw-link{ color:var(--zw-champagne); } .zw-dark /* The zw-link was designed as plain styled text with a champagne rule that slides in on hover. Once a real goes inside it, Blocksy underlines that anchor and you get two underlines fighting. This strips the theme's one and lets the animated rule do the work. !important is needed: Blocksy sets the underline from a selector with higher specificity than a bare .zw-link a. */ .zw-link a, .entry-content .zw-link a, .zw-door .zw-link a{ color:inherit !important; text-decoration:none !important; background-image:none !important; box-shadow:none !important; border-bottom:0 !important; } .zw-link a:hover, .zw-link a:focus{ color:inherit !important; text-decoration:none !important; } /* Make the whole line clickable rather than just the words. */ .zw-link a{ display:inline-block; } .zw-link::after{ background:var(--zw-champagne); } /* -------------------------------------------------------------------------- 2. Matted photo frame A hairline set in from the edge, the way a print is matted before framing. -------------------------------------------------------------------------- */ .zw-frame img{ border-radius:var(--zw-frame-r); display:block; width:100%; height:auto; } .zw-frame{ position:relative; } .zw-frame::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(235,211,160,.5); border-radius:calc(var(--zw-frame-r) - 10px); pointer-events:none; } /* -------------------------------------------------------------------------- 3. Hero Applied to a Cover block. Keeps the headline readable over any photo and drifts the image slowly so the page feels alive on arrival. -------------------------------------------------------------------------- */ .zw-hero{ overflow:hidden; } .zw-hero .wp-block-cover__image-background{ animation:zw-drift 26s ease-in-out infinite alternate; } .zw-hero h1{ font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02; letter-spacing:-0.03em; max-width:20ch; color:#fff; /* stops long words snapping mid-syllable at big sizes */ overflow-wrap:normal; word-break:normal; hyphens:none; } .zw-hero p{ max-width:44ch; } /* The eyebrow over a photo needs more presence than it does on a flat background — it was disappearing at the small size. */ .zw-hero .zw-label{ color:var(--zw-champagne-soft); font-size:.82rem; letter-spacing:.18em; text-shadow:0 1px 12px rgba(20,10,14,.7); } .zw-hero h1, .zw-hero .zw-facts{ text-shadow:0 2px 22px rgba(20,10,14,.55); } @keyframes zw-drift{ from{ transform:scale(1); } to{ transform:scale(1.09); } } /* -------------------------------------------------------------------------- 4. Marquee Use a Custom HTML block — the snippet is in the build guide. -------------------------------------------------------------------------- */ .zw-marquee{ background:var(--zw-foxglove); color:#fff; overflow:hidden; padding-block:15px; /* A full-width Group still constrains its children to the content width when "Inner blocks use content width" is on. This overrides that, so the band runs edge to edge whether or not that setting is switched off. */ max-width:none; width:100%; margin-left:0; margin-right:0; } .zw-marquee-track{ display:flex; width:max-content; animation:zw-slide 38s linear infinite; } .zw-marquee span{ font-family:Fraunces, Georgia, serif; font-style:italic; font-size:1.18rem; padding-inline:22px; white-space:nowrap; } .zw-marquee span::after{ content:"\2726"; color:var(--zw-champagne-soft); font-style:normal; padding-left:22px; font-size:0.8em; vertical-align:2px; } @keyframes zw-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* -------------------------------------------------------------------------- 5. The three doors -------------------------------------------------------------------------- */ .zw-door img{ transition:transform .55s cubic-bezier(.2,.7,.3,1); } .zw-door:hover img{ transform:scale(1.06); } .zw-door .zw-frame{ overflow:hidden; border-radius:var(--zw-frame-r); } .zw-door h3{ transition:color .22s ease; } .zw-door:hover h3{ color:var(--zw-foxglove); } /* Underline that draws in on hover — used on text links throughout */ .zw-link{ display:inline-block; font-size:0.76rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--zw-foxglove); text-decoration:none; padding-bottom:5px; position:relative; } /* The zw-link was designed as plain styled text with a champagne rule that slides in on hover. Once a real goes inside it, Blocksy underlines that anchor and you get two underlines fighting. This strips the theme's one and lets the animated rule do the work. !important is needed: Blocksy sets the underline from a selector with higher specificity than a bare .zw-link a. */ .zw-link a, .entry-content .zw-link a, .zw-door .zw-link a{ color:inherit !important; text-decoration:none !important; background-image:none !important; box-shadow:none !important; border-bottom:0 !important; } .zw-link a:hover, .zw-link a:focus{ color:inherit !important; text-decoration:none !important; } /* Make the whole line clickable rather than just the words. */ .zw-link a{ display:inline-block; } .zw-link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--zw-champagne); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .zw-link:hover::after, .zw-door:hover /* The zw-link was designed as plain styled text with a champagne rule that slides in on hover. Once a real goes inside it, Blocksy underlines that anchor and you get two underlines fighting. This strips the theme's one and lets the animated rule do the work. !important is needed: Blocksy sets the underline from a selector with higher specificity than a bare .zw-link a. */ .zw-link a, .entry-content .zw-link a, .zw-door .zw-link a{ color:inherit !important; text-decoration:none !important; background-image:none !important; box-shadow:none !important; border-bottom:0 !important; } .zw-link a:hover, .zw-link a:focus{ color:inherit !important; text-decoration:none !important; } /* Make the whole line clickable rather than just the words. */ .zw-link a{ display:inline-block; } .zw-link::after{ transform:scaleX(1); } /* Read More, dressed as an outline button. Inside a Query Loop a normal Button block can't link to each post — it takes one fixed URL — so the Read More block does the job instead. This makes it look like a button. */ .zw-btnlink{ display:inline-block; border:1.5px solid var(--zw-foxglove); color:var(--zw-foxglove); border-radius:999px; padding:10px 22px; font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; transition:background .22s ease, color .22s ease; } /* Applies with or without the class, so a missed one still looks right. */ .zw-events .wp-block-read-more, .zw-trips .wp-block-read-more{ display:inline-block; border:1.5px solid var(--zw-foxglove); color:var(--zw-foxglove); border-radius:999px; padding:10px 22px; font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; transition:background .22s ease, color .22s ease; } .zw-btnlink:hover, .zw-events .wp-block-read-more:hover, .zw-trips .wp-block-read-more:hover{ background:var(--zw-foxglove); color:#fff; } .zw-dark .zw-btnlink, .zw-dark .wp-block-read-more{ border-color:var(--zw-champagne); color:var(--zw-champagne); } .zw-dark .zw-btnlink:hover, .zw-dark .wp-block-read-more:hover{ background:var(--zw-champagne); color:var(--zw-plum); } /* -------------------------------------------------------------------------- 6. Statement band -------------------------------------------------------------------------- */ .zw-statement{ background:var(--zw-foxglove); color:#fff; text-align:center; position:relative; overflow:hidden; } .zw-statement::before, .zw-statement::after{ content:""; position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%); pointer-events:none; } .zw-statement::before{ width:440px; height:440px; top:-180px; left:-120px; } .zw-statement::after{ width:520px; height:520px; bottom:-260px; right:-140px; } .zw-statement > *{ position:relative; z-index:2; } .zw-statement h2, .zw-statement blockquote{ font-size:clamp(1.9rem,5.2vw,3.6rem); line-height:1.08; max-width:17ch; margin-inline:auto; color:#fff; } /* -------------------------------------------------------------------------- 7. Credentials -------------------------------------------------------------------------- */ /* --- "Meet Kat" photo row ------------------------------------------------ Put zw-meet on the two-column block holding the photo and the intro text. It sets the column widths, centres the two against each other and keeps the photo from towering over the words — so there's no dead space underneath. */ .zw-meet{ align-items:center !important; } .zw-meet > .wp-block-column{ flex-grow:0; } .zw-meet > .wp-block-column:first-child{ flex-basis:36% !important; } .zw-meet > .wp-block-column:last-child{ flex-basis:64% !important; } .zw-meet .zw-frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } @media (max-width:781px){ /* Both :first-child and :last-child above are !important AND more specific than a bare .zw-meet > .wp-block-column, so the stacking rule has to name them too or the 36/64 split survives onto a phone. */ .zw-meet > .wp-block-column:first-child, .zw-meet > .wp-block-column:last-child{ flex-basis:100% !important; } .zw-meet .zw-frame img{ aspect-ratio:3/2; } } /* When a photo-and-text row sits above the credentials, the credentials get separated off underneath rather than crowding it. */ .wp-block-columns + .zw-creds, .wp-block-columns + .zw-cred{ margin-top:46px; padding-top:34px; border-top:1px solid rgba(255,255,255,.18); } /* zw-cred and zw-creds both work — easy class to mistype. */ .zw-creds h3, .zw-cred h3{ font-size:2.3rem; color:var(--zw-champagne); margin-bottom:8px; line-height:1.1; } .zw-creds p, .zw-cred p{ color:rgba(255,255,255,.72); font-size:0.93rem; line-height:1.6; } /* -------------------------------------------------------------------------- 8. Upcoming classes (Query Loop over event products) -------------------------------------------------------------------------- */ .zw-events .wp-block-post-template{ list-style:none; margin:0; padding:0; } .zw-events li.wp-block-post{ display:grid; grid-template-columns:200px minmax(0,1fr) auto; grid-template-areas: "img title cta" "img excerpt cta"; align-items:center; column-gap:28px; row-gap:6px; border-top:1px solid #F3DCE3; padding:24px 0; margin:0; } .zw-events li.wp-block-post:last-child{ border-bottom:1px solid #F3DCE3; } .zw-events .wp-block-post-featured-image{ grid-area:img; margin:0; } .zw-events .wp-block-post-featured-image img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; } .zw-events .wp-block-post-title{ grid-area:title; margin:0; font-size:1.3rem; align-self:end; } .zw-events .wp-block-post-title a{ color:var(--zw-ink); text-decoration:none; } .zw-events .wp-block-post-title a:hover{ color:var(--zw-foxglove); } .zw-events .wp-block-post-excerpt{ grid-area:excerpt; margin:0; align-self:start; } /* The event meta line — venue, date, time, price. WordPress strips bold and italics out of excerpts, so this line can't carry formatting. It's styled as one uniform meta line instead, which is why the short description should read: Thu 22 Oct · 6–8pm · Barrel Dogs, Buckley · $60 */ .zw-events .wp-block-post-excerpt p{ margin:0; font-size:0.79rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--zw-ink-soft); line-height:1.55; } .zw-events .wp-block-read-more{ grid-area:cta; justify-self:end; } /* The price. WooCommerce's own price block isn't available with Woo Blocks switched off, so put the price in the product's short description wrapped in bold — "Cedar & Cider, Tacoma · 6:30pm · **$85**" — and it renders like this. Works with core blocks only. */ .zw-events .price, .zw-events .woocommerce-Price-amount, .zw-events strong{ font-family:Fraunces, Georgia, serif; font-size:1.45rem; font-weight:600; color:var(--zw-foxglove); font-variant-numeric:tabular-nums; white-space:nowrap; } @media (max-width:700px){ .zw-events li.wp-block-post{ grid-template-columns:minmax(0,1fr); grid-template-areas:"img" "title" "excerpt" "cta"; row-gap:12px; } .zw-events .wp-block-read-more{ justify-self:start; } } /* -------------------------------------------------------------------------- 9. Travel band One trip renders as a full-width feature; two or three become cards. Nothing to change when trips come and go — the Query Loop handles it. -------------------------------------------------------------------------- */ /* Two or three trips — a row of cards */ .zw-trips .wp-block-post-template{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:clamp(24px,3vw,38px); } .zw-trips li.wp-block-post{ display:flex; flex-direction:column; gap:12px; margin:0; } .zw-trips .wp-block-post-featured-image{ margin:0; } .zw-trips .wp-block-post-featured-image img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--zw-frame-r); display:block; } .zw-trips .wp-block-post-title{ margin:0; font-size:1.5rem; } .zw-trips .wp-block-post-title a{ color:#fff; text-decoration:none; } .zw-trips .wp-block-post-title a:hover{ color:var(--zw-champagne); } .zw-trips .wp-block-post-excerpt{ margin:0; } .zw-trips .wp-block-post-excerpt p{ margin:0; color:rgba(255,255,255,.74); font-size:0.95rem; line-height:1.6; } .zw-trips .wp-block-read-more{ align-self:flex-start; } /* One trip — opens out into the full-width feature. Automatic: :only-child. */ @media (min-width:760px){ .zw-trips li.wp-block-post:only-child{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas: "title img" "excerpt img" "cta img"; column-gap:clamp(32px,5vw,64px); row-gap:18px; align-content:center; } .zw-trips li.wp-block-post:only-child .wp-block-post-featured-image{ grid-area:img; align-self:center; } .zw-trips li.wp-block-post:only-child .wp-block-post-featured-image img{ aspect-ratio:4/5; } .zw-trips li.wp-block-post:only-child .wp-block-post-title{ grid-area:title; font-size:clamp(2rem,4.4vw,3.1rem); align-self:end; } .zw-trips li.wp-block-post:only-child .wp-block-post-excerpt{ grid-area:excerpt; } .zw-trips li.wp-block-post:only-child .wp-block-post-excerpt p{ font-size:1.02rem; } .zw-trips li.wp-block-post:only-child .wp-block-read-more{ grid-area:cta; justify-self:start; align-self:start; } } /* -------------------------------------------------------------------------- 10. Price chips -------------------------------------------------------------------------- */ .zw-tiers .wp-block-column{ border:1px solid #E3DDD8; padding:16px 22px; border-radius:16px; background:#fff; transition:border-color .22s ease, transform .22s ease; } .zw-tiers .wp-block-column:hover{ border-color:var(--zw-foxglove); transform:translateY(-2px); } /* Accepts bold or italic — whichever you reached for. */ .zw-tiers strong, .zw-tiers em{ display:block; font-family:Fraunces, Georgia, serif; font-size:1.62rem; font-weight:600; font-style:normal; color:var(--zw-foxglove); font-variant-numeric:tabular-nums; } /* The one-paragraph alternative to the zw-tiers columns. Put zw-price on a single Paragraph reading: **$99** Three bottles · **$235** Six bottles */ .zw-price{ font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--zw-ink-soft); } .zw-price strong, .zw-price em{ font-family:Fraunces, Georgia, serif; font-size:1.5rem; font-weight:600; font-style:normal; letter-spacing:-0.01em; text-transform:none; color:var(--zw-foxglove); font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- 11. Buttons — pill shape, brand colours Blocksy sets the palette; this sets the shape and the lift on hover. -------------------------------------------------------------------------- */ .wp-block-button__link{ border-radius:999px; font-size:0.82rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:15px 30px; transition:background .22s ease, color .22s ease, transform .22s ease; } .wp-block-button__link:hover{ transform:translateY(-2px); } .is-style-outline .wp-block-button__link{ border-width:1.5px; } /* Outline buttons sitting on a photo or a dark band need light type, otherwise they're rose-on-dark and effectively invisible. */ /* !important here on purpose: Blocksy sets button colours from its own palette at a specificity that otherwise wins, which is why the outline button kept coming out rose-on-photo. */ .zw-hero .is-style-outline .wp-block-button__link, .zw-dark .is-style-outline .wp-block-button__link{ color:#fff !important; border-color:#fff !important; background:rgba(26,13,19,.34) !important; backdrop-filter:blur(2px); } .zw-hero .is-style-outline .wp-block-button__link:hover, .zw-dark .is-style-outline .wp-block-button__link:hover{ background:#fff !important; color:var(--zw-plum) !important; } /* The filled button sits on photography too, so give it a little lift. */ .zw-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link{ box-shadow:0 6px 24px rgba(20,10,14,.35); } /* -------------------------------------------------------------------------- 11b. File block — the PDF download on a trip page -------------------------------------------------------------------------- */ .wp-block-file{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 20px; border-top:1px solid #E3DDD8; border-bottom:1px solid #E3DDD8; padding:20px 0; } .wp-block-file__button{ background:var(--zw-foxglove); color:#fff; border-radius:999px; padding:11px 24px; font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none; transition:background .22s ease; } .wp-block-file__button:hover{ background:var(--zw-foxglove-deep); color:#fff; } .zw-dark .wp-block-file{ border-color:rgba(255,255,255,.18); } .zw-dark .wp-block-file__button{ background:var(--zw-champagne); color:var(--zw-plum); } /* ========================================================================== TRIP PAGES Everything below is for /travel/ pages. Nothing here affects the homepage. ========================================================================== */ /* Hero fact line, under the trip title */ .zw-facts{ font-size:clamp(1rem,1.9vw,1.2rem); color:rgba(255,255,255,.92); letter-spacing:.01em; } /* --- Four regions -------------------------------------------------------- */ .zw-regions h3{ border-top:2px solid var(--zw-foxglove); padding-top:15px; margin:26px 0 6px; font-size:1.25rem; } .zw-regions h3:first-child{ margin-top:0; } .zw-regions p{ font-size:.95rem; color:var(--zw-ink-soft); margin-bottom:0; } /* --- Stacked rows -------------------------------------------------------- Named zw-days because the trip itinerary was the first thing to use it, but it's the generic "heading, small meta line, paragraph" pattern. It works anywhere — the corporate page uses it for the session formats. One H3 per row, then one paragraph that opens with the meta text in bold: H3 How to Taste Like a Somm P **90 minutes · 6–30 people**The one that changes how… */ .zw-days h3{ border-top:1px solid var(--zw-rule, #E3DDD8); padding-top:20px; margin:0 0 8px; font-size:1.3rem; } .zw-days p{ font-size:.96rem; color:var(--zw-ink-soft); margin:0 0 26px; } .zw-days p strong{ display:block; font-family:var(--zw-body, inherit); font-size:.69rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--zw-ink-soft); margin-bottom:6px; } /* The wine day. Put zw-wineday on that day's heading. */ h3.zw-wineday{ background:rgba(217,179,107,.16); border-top-color:var(--zw-champagne); border-radius:10px 10px 0 0; padding:20px 18px 10px; margin-inline:-18px; } h3.zw-wineday + p{ background:rgba(217,179,107,.16); border-radius:0 0 10px 10px; padding:0 18px 18px; margin-inline:-18px; } h3.zw-wineday + p strong{ color:var(--zw-foxglove); } /* --- Tick lists ---------------------------------------------------------- */ .zw-ticks{ list-style:none; margin:0 0 1.3em; padding:0; display:flex; flex-direction:column; gap:11px; } .zw-ticks li{ padding-left:24px; position:relative; font-size:.97rem; } .zw-ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:11px; height:1.5px; background:var(--zw-foxglove); } .zw-dark .zw-ticks li::before{ background:var(--zw-champagne); } .zw-ticks-out li::before{ background:var(--zw-foxglove-pale); } /* --- Cabin cards --------------------------------------------------------- */ .zw-cabins .wp-block-column{ border:1px solid var(--zw-rule, #E3DDD8); border-radius:16px; padding:20px; background:#fff; } .zw-cabins .wp-block-column.zw-pick{ border-color:var(--zw-foxglove); border-width:2px; } .zw-cabins h3{ font-size:1.05rem; margin:4px 0; } /* Each card is one paragraph with line breaks. ::first-line picks out the deck name on its own without needing separate blocks. */ .zw-cabins p{ margin:0; font-size:.88rem; line-height:1.8; color:var(--zw-ink); text-transform:none; } .zw-cabins p::first-line{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zw-foxglove); } .zw-cabins p strong{ display:block; font-family:Fraunces, Georgia, serif; font-size:1.9rem; font-weight:600; color:var(--zw-foxglove); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:8px; } /* The price is already on its own line, so the line break after it would otherwise leave a blank gap above "per person". */ .zw-cabins p strong + br{ display:none; } /* --- Aside (the "Travelling solo?" notes) -------------------------------- */ .zw-aside{ border-left:2px solid var(--zw-foxglove); padding:14px 0 14px 18px; margin:24px 0; } .zw-aside p{ font-size:.95rem; color:var(--zw-ink-soft); margin:0; } .zw-aside p strong{ display:block; font-family:Fraunces, Georgia, serif; font-size:1.06rem; font-weight:600; color:var(--zw-ink); margin-bottom:5px; } .zw-dark .zw-aside p strong{ color:#fff; } /* --- Credential pills ---------------------------------------------------- */ .zw-pills{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .zw-pills li{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--zw-champagne); color:var(--zw-champagne); padding:7px 14px; border-radius:999px; } /* --- FAQ (core Details blocks inside a group) ---------------------------- */ .zw-faq .wp-block-details{ border-bottom:1px solid var(--zw-rule, #E3DDD8); padding:16px 0; } .zw-faq .wp-block-details summary{ font-family:Fraunces, Georgia, serif; font-size:1.1rem; font-weight:600; cursor:pointer; list-style:none; } .zw-faq .wp-block-details summary::-webkit-details-marker{ display:none; } .zw-faq .wp-block-details summary::after{ content:" +"; color:var(--zw-foxglove); font-weight:400; } .zw-faq .wp-block-details[open] summary::after{ content:" –"; } .zw-faq .wp-block-details p{ font-size:.97rem; color:var(--zw-ink-soft); margin-top:11px; } /* Plain headings-and-paragraphs work too, if you'd rather not use Details. */ .zw-faq h3{ border-top:1px solid var(--zw-rule, #E3DDD8); padding-top:18px; margin:0 0 8px; font-size:1.12rem; } .zw-faq > p{ font-size:.97rem; color:var(--zw-ink-soft); margin:0 0 24px; } /* --- Terms line ---------------------------------------------------------- */ .zw-terms{ border-top:1px solid var(--zw-rule, #E3DDD8); padding-top:18px; margin-top:22px; font-size:.94rem; color:var(--zw-ink-soft); } /* ========================================================================== EVENT PAGES Corporate and private tastings. Three new patterns; everything else on those pages reuses classes that already exist above. ========================================================================== */ /* --- Where we can do it — a row of plain cards --------------------------- */ .zw-where .wp-block-column{ border:1px solid var(--zw-rule, #E3DDD8); border-radius:16px; padding:20px; background:#fff; } .zw-where h3{ font-size:1.05rem; margin:0 0 6px; } .zw-where p{ font-size:.9rem; color:var(--zw-ink-soft); margin:0; } /* --- The big price box (corporate / private events) --- Distinct from .zw-price, which is the small inline price line on the seasonal box. Put zw-pricebox on a Group containing two paragraphs. ------------------------------------------------------- */ .zw-pricebox{ border:2px solid var(--zw-foxglove); border-radius:20px; padding:clamp(22px,3vw,34px); background:#fff; } .zw-pricebox p{ margin:0; } .zw-pricebox p strong{ display:block; font-family:Fraunces, Georgia, serif; font-size:clamp(2.4rem,6vw,3.5rem); font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--zw-foxglove); font-variant-numeric:tabular-nums; } .zw-pricebox p + p{ margin-top:10px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zw-ink-soft); } /* --- Split band: copy one side, photo the other --------------------------- Put zw-split on a two-column Columns block and zw-frame on the Image inside it. Works with the photo in either column, so alternate the side band to band and the page gets a rhythm instead of a stack. Stacks to one column on a phone, photo on top. */ .zw-split{ align-items:center !important; } .zw-split > .wp-block-column{ flex-grow:0; } .zw-split > .wp-block-column:first-child{ flex-basis:54% !important; } .zw-split > .wp-block-column:last-child{ flex-basis:46% !important; } .zw-split .zw-frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; } @media (max-width:781px){ /* Both :first-child and :last-child are !important and more specific than a bare .zw-split > .wp-block-column, so the stacking rule names them. */ .zw-split > .wp-block-column:first-child, .zw-split > .wp-block-column:last-child{ flex-basis:100% !important; } .zw-split .zw-frame img{ aspect-ratio:3/2; } } /* --- Full-bleed photo strip ----------------------------------------------- One Image block set to Full width, class zw-strip, NOT zw-frame — the strip is square-cornered and edge to edge on purpose. Crops tall photos to a wide band rather than letting them eat a whole screen. */ .zw-strip{ margin:0 !important; } /* figure.zw-strip, not .zw-strip: WordPress core ships .wp-block-image img { height:auto } at the same specificity and later in the cascade, which wins and lets the photo render at full height. The element selector and !important are both needed to hold the crop. */ figure.zw-strip img{ width:100% !important; height:clamp(200px,32vw,400px) !important; object-fit:cover !important; object-position:center; display:block; border-radius:0; max-width:100%; } .zw-strip::after{ display:none; } /* --- Pull-line ------------------------------------------------------------ A single line of the page's own voice, set large with a champagne rule down the left. The cite rule below is only used if you ever add a real attributed testimonial — leave the citation off and it's a statement. */ .zw-quote{ border-left:3px solid var(--zw-champagne); padding:2px 0 2px clamp(18px,3vw,28px); margin:0; } .zw-quote p{ font-family:Fraunces, Georgia, serif; font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:500; line-height:1.35; letter-spacing:-.01em; margin:0; } .zw-quote cite{ display:block; margin-top:14px; font-family:var(--zw-body, inherit); font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zw-foxglove); } .zw-dark .zw-quote p{ color:#fff; } .zw-dark .zw-quote cite{ color:var(--zw-champagne); } /* -------------------------------------------------------------------------- 12. Accessibility -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .zw-hero .wp-block-cover__image-background, .zw-marquee-track{ animation:none !important; } *{ transition:none !important; } } :focus-visible{ outline:2px solid var(--zw-champagne); outline-offset:3px; } /* -------------------------------------------------------------------------- 14. Transparent header over the hero Blocksy's transparent header is switched on site-wide, and it writes data-transparent-row="yes" on each header row while the page is at the top, flipping it to "no" the moment the sticky row detaches and turns white. Keying off ="yes" therefore turns the white treatment off at exactly the moment the white bar appears — no scroll listener, no second logo file. The body:has(.zw-hero) guard matters: because transparent is site-wide, without it the logo and nav would go white on the cart, checkout and product pages, which have white backgrounds and no hero. -------------------------------------------------------------------------- */ body:has(.zw-hero) .ct-header [data-transparent-row="yes"] img.default-logo, body:has(.zw-hero) .ct-header [data-transparent-row="yes"] .site-logo-container img{ /* Turns any dark logo pure white, so one logo file serves both states. The drop-shadow keeps it readable over a bright photo. */ filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(20,10,14,.45)); } body:has(.zw-hero) .ct-header [data-transparent-row="yes"] a, body:has(.zw-hero) .ct-header [data-transparent-row="yes"] a:hover, body:has(.zw-hero) .ct-header [data-transparent-row="yes"] a:focus{ color:#ffffff !important; text-shadow:0 1px 12px rgba(20,10,14,.5); } body:has(.zw-hero) .ct-header [data-transparent-row="yes"] svg{ fill:#ffffff !important; color:#ffffff !important; filter:drop-shadow(0 1px 8px rgba(20,10,14,.45)); } /* --- Pull the hero up under the header ------------------------------------ Blocksy puts 60px of padding on the content container so page content clears the header. With a transparent header that padding is exactly what stops the photo reaching the top — the header ends up floating over a white strip instead of the image. Zeroing it only on pages that open with a hero leaves every other page (cart, checkout, products) spaced correctly. */ body:has(.zw-hero) .ct-container-full{ padding-top:0 !important; } /* --- Scrim behind the header ---------------------------------------------- White type on a photograph is only reliable if you guarantee something dark underneath it. This is a soft gradient across the top of the hero — dark enough to hold the logo and nav, gone by a fifth of the way down, and it reads as depth rather than as a bar. It also means a bright photo swapped in later can't break the header. */ body:has(.zw-hero) .zw-hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(140px,20vh,220px); background:linear-gradient(to bottom, rgba(20,10,14,.60) 0%, rgba(20,10,14,.26) 55%, rgba(20,10,14,0) 100%); pointer-events:none; z-index:1; } /* --- Hero content: clear the header, and put it on one axis ---------------- Two problems solved together, because they have the same cause. 1. The eyebrow sat behind the menu. Once the hero was pulled up under the transparent header, the first line inside it started at the very top of the photo — the same 70px band the nav floats in. The hero now carries its own top padding: enough to clear the header, plus breathing room. 2. Everything in the hero started at a different left edge. Blocksy defines no content-size, so a Cover block's "constrained" inner container gets the full width of the page and each child then centres itself inside whatever max-width it happens to have — 20ch for the headline, 44ch for the paragraph, 1024px for the buttons. Four children, four left edges. Giving the inner container Blocksy's own container width and switching off the auto side margins puts the eyebrow, headline, copy and buttons on one line with the logo above and every section below. :not(.has-text-align-center) leaves a deliberately centred hero centred — the auto margins are what centre a centred block, so they have to stay. -------------------------------------------------------------------------- */ body:has(.zw-hero) .zw-hero{ padding-top:clamp(118px,13vh,165px) !important; padding-bottom:clamp(48px,7vh,80px) !important; padding-left:20px !important; padding-right:20px !important; } body:has(.zw-hero) .zw-hero > .wp-block-cover__inner-container{ width:100%; max-width:var(--theme-normal-container-max-width, 1024px); margin-inline:auto; } body:has(.zw-hero) .zw-hero > .wp-block-cover__inner-container > *:not(.has-text-align-center){ margin-inline:0 !important; } /* Blocksy gives h1 a 110px top margin. In a hero that strands the eyebrow at the top of the photo instead of sitting it on the headline like an eyebrow should. Only inside the hero — the margin is right everywhere else. */ body:has(.zw-hero) .zw-hero .wp-block-cover__inner-container > h1, body:has(.zw-hero) .zw-hero .wp-block-cover__inner-container > h2{ margin-top:.25em !important; } body:has(.zw-hero) .zw-hero .zw-label{ margin-bottom:0 !important; } /* Below 999px Blocksy shows two header rows (50px + 70px = 120px), not one, so the desktop clearance isn't enough and has to be stated outright. */ @media (max-width:999px){ body:has(.zw-hero) .zw-hero{ padding-top:152px !important; padding-bottom:56px !important; } } /* ========================================================================== 15. Product descriptions -------------------------------------------------------------------------- The long description on a product page renders inside .woocommerce-Tabs-panel--description, which WooCommerce also tags .entry-content — so the site's type is already reaching it. What it doesn't get is a reading measure or any rhythm between sections, which is why a long description reads as a wall. Everything here is driven by plain HTML tags —

,

,