/** * Landing — Exploring Veneto * * Art direction of an editorial product page (reference: instax.eu): a sticky * bar with a permanent CTA, a two-column hero, full-bleed bands alternating * light and dark, oversized display type, and an FAQ set like a spec table. * * Loaded only on the front page (see functions.php), and into the block editor * canvas via add_editor_style(). * * CONVENTIONS * - Every rule hooks onto an `ev-*` class set from the block's * "Advanced → Additional CSS class" field. Nothing is styled inline in the * markup, so the whole look is retunable from this one file. * - The markup contains no custom HTML blocks: everything is a native block. * Icons and purely decorative type therefore live here, not in the page. * - Only the official ev-* palette. The brand is one green family plus an amber * accent, so the scroll rhythm comes from VALUE (light/dark alternation), * not from hue. * * SECTIONS * 0 Tokens * 1 Shared primitives * 2 WordPress layout corrections * 3 Icon system * 4 Scroll reveal * 5 Sticky top bar * 6 Hero * 7 Phone mockup * 8 Benefit strip * 9 Feature bands * 10 Tile grid * 11 Closing CTA * 12 Spec / FAQ accordion * 13 Buttons * 14 Reduced motion */ /* ========================================================================== 0. Tokens ========================================================================== */ :root { /* Mirrors of the theme.json palette, so this file can be read on its own. */ --ev-green: #1b5e3f; --ev-green-light: #2e7d52; --ev-mint: #e8f3ec; --ev-cream: #f7f4ed; --ev-amber: #e8a13a; --ev-ink: #1c2620; /* Fluid sizes. clamp() covers 360px → 1920px with no breakpoint bookkeeping: minimum, preferred (viewport-relative), maximum. */ --ev-size-mega: clamp(4rem, 17vw, 14rem); /* hero wordmark */ --ev-size-h2: clamp(2.2rem, 6vw, 4.5rem); /* section headlines */ --ev-size-h3: clamp(1.4rem, 2.6vw, 2rem); /* card headings */ --ev-size-lead: clamp(1.05rem, 1.5vw, 1.3rem); --ev-gutter: clamp(1.25rem, 5vw, 4rem); --ev-section-y: clamp(4.5rem, 11vw, 9rem); --ev-tile-pad: clamp(1.5rem, 3vw, 2rem); --ev-radius: 18px; --ev-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* The hero's scroll cue is a pseudo-element, so it cannot carry an .ev-ico--* class; its mask has to be reachable as a plain variable. */ --ev-ico-chevron: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); } /* ========================================================================== 1. Shared primitives ========================================================================== */ /* The small tracked-out label above every headline. It is what makes the page read as a product page rather than a brochure. */ .ev-eyebrow { font-size: clamp(0.75rem, 1.1vw, 0.875rem); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.75rem; } .ev-h2 { font-size: var(--ev-size-h2); font-weight: 800; line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; } .ev-lead { font-size: var(--ev-size-lead); line-height: 1.65; max-width: 46ch; text-wrap: pretty; } .ev-lead.has-text-align-center { margin-inline: auto; } .ev-section { padding-block: var(--ev-section-y); padding-inline: var(--ev-gutter); /* `clip`, deliberately NOT `hidden`. `hidden` on one axis forces the other to `auto`, which would crop anything designed to break out of a band vertically (see section 11). `clip` contains horizontal bleed while leaving overflow-y visible. */ overflow-x: clip; } /* ========================================================================== 2. WordPress layout corrections -------------------------------------------------------------------------- Two things core does that fight a full-bleed landing. ========================================================================== */ /* (a) Block gap. The flow/constrained layout puts `margin-block-start` equal to the block gap (~32px) on every child after the first. Ordinary pages want that breathing room; between colour bands it reads as a white stripe. `alignfull` does NOT prevent it: alignfull neutralises the horizontal padding, not the vertical gap — two separate mechanisms. Scoped with :has() to the landing's own
, so no other page loses its spacing. The markup also sets blockGap to 0 on that group; this rule is what holds if someone re-adds spacing from the editor sidebar. */ main:has(> .ev-topbar) > * { margin-block: 0; } /* (b) DO NOT "fix" alignfull here. The topbar and strip escape the constrained
through `alignfull` in the markup, and alignfull works by giving the element a NEGATIVE inline margin to climb out of the parent's padding. Writing `margin-inline: 0` or `width: 100%` cancels exactly that mechanism and leaves those blocks 64px narrower than the bands beside them. This note is here because that regression has already happened once. */ /* ========================================================================== 3. Icon system -------------------------------------------------------------------------- Gutenberg core has no icon block, and WordPress refuses SVG uploads by default (an SVG can carry script). Inlining would mean custom HTML blocks, which is what this markup deliberately avoids. So icons are CSS masks: an .ev-ico--* class sets --ev-ico, and the component paints it with `background: currentColor` through that mask. Each icon inherits the text colour, so one definition works on light and dark bands alike. Applying one is a class in the block sidebar. To add an icon, copy a line below and swap the SVG path (lucide.dev). ========================================================================== */ .ev-ico--ticket { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%2F%3E%3Cpath%20d%3D%22M13%205v2%22%2F%3E%3Cpath%20d%3D%22M13%2017v2%22%2F%3E%3Cpath%20d%3D%22M13%2011v2%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--users { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--globe { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--gift { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M20%2011v8a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-8%22%2F%3E%3Cpath%20d%3D%22M7.5%207a1%201%200%200%201%200-5A4.8%208%200%200%201%2012%207a4.8%208%200%200%201%204.5-5%201%201%200%200%201%200%205%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--help { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--camera { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.997%204a2%202%200%200%201%201.76%201.05l.486.9A2%202%200%200%200%2018.003%207H20a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V9a2%202%200%200%201%202-2h1.997a2%202%200%200%200%201.759-1.048l.489-.904A2%202%200%200%201%2010.004%204z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--pin { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--compass { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16.24%207.76-1.804%205.411a2%202%200%200%201-1.265%201.265L7.76%2016.24l1.804-5.411a2%202%200%200%201%201.265-1.265z%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--cap { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--phone { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E"); } .ev-ico--chevron { --ev-ico: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); } /* Default painter: an inline square carrying the mask. Components that want a different treatment (the tiles, section 10) override it. */ .ev-ico::before, [class*="ev-ico--"]::before { content: ""; display: inline-block; width: var(--ev-ico-size, 1.25em); height: var(--ev-ico-size, 1.25em); flex-shrink: 0; background: currentColor; -webkit-mask: var(--ev-ico) center / contain no-repeat; mask: var(--ev-ico) center / contain no-repeat; } /* ========================================================================== 4. Scroll reveal -------------------------------------------------------------------------- landing.js adds .is-in when an element enters the viewport. The *hidden* start state is gated behind .ev-reveal on , which the script also adds — so if the script is blocked or throws, the page stays VISIBLE rather than permanently blank. Progressive enhancement, not a dependency. ========================================================================== */ html.ev-reveal .ev-anim { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ev-ease), transform 0.7s var(--ev-ease); } html.ev-reveal .ev-anim.is-in { opacity: 1; transform: none; } /* Stagger the children of a revealed group: each card lands a beat later, which reads as intentional rather than as lag. */ html.ev-reveal .ev-anim.is-in > * { animation: ev-rise 0.6s var(--ev-ease) backwards; } html.ev-reveal .ev-anim.is-in > :nth-child(2) { animation-delay: 0.08s; } html.ev-reveal .ev-anim.is-in > :nth-child(3) { animation-delay: 0.16s; } html.ev-reveal .ev-anim.is-in > :nth-child(4) { animation-delay: 0.24s; } @keyframes ev-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ========================================================================== 5. Sticky top bar -------------------------------------------------------------------------- A slim product bar pinned at the top — name, price, CTA. It is the page's only persistent call to action. ========================================================================== */ /* Jumping to #installa must not park the heading under the bar. scroll-padding on the scroll container is the one-line fix; without it every in-page anchor lands about 60px too high. */ html:has(.ev-topbar) { scroll-padding-top: 5rem; } .ev-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: 0.7rem var(--ev-gutter); background: color-mix(in srgb, var(--ev-ink) 92%, transparent); backdrop-filter: blur(10px); color: #fff; transition: background 0.3s var(--ev-ease); } .ev-topbar__name { margin: 0; font-weight: 800; font-size: clamp(0.95rem, 1.6vw, 1.15rem); text-transform: uppercase; letter-spacing: 0.04em; } .ev-topbar__price { margin: 0; font-size: 0.85rem; opacity: 0.7; } /* The CTA is pushed right by `auto`, not by a spacer element: a spacer would have to be an empty block, and the point of this markup is that every node is a real block with real content. */ .ev-topbar__cta { margin-inline-start: auto; } /* On the narrowest phones the CTA matters more than the label. */ @media (max-width: 30rem) { .ev-topbar__price { display: none; } } /* ========================================================================== 6. Hero -------------------------------------------------------------------------- Copy left, device right, with a giant wordmark set behind both. The wordmark and the scroll cue are pseudo-elements: pure decoration, so keeping them out of the markup means one less thing an editor can break — and the wordmark is not announced to screen readers as if it were content. ========================================================================== */ .ev-hero { position: relative; display: grid; place-items: center; min-height: min(100svh, 900px); padding-block: clamp(3rem, 8vw, 6rem); padding-inline: var(--ev-gutter); background: radial-gradient(ellipse at 50% 0%, var(--ev-green-light) 0%, var(--ev-green) 55%, var(--ev-ink) 100%); color: #fff; text-align: center; overflow: clip; } /* The oversized decorative wordmark. */ .ev-hero::before { content: "VENETO"; position: absolute; inset-block-start: 50%; inset-inline: 0; translate: 0 -50%; font-size: var(--ev-size-mega); font-weight: 900; line-height: 0.8; text-transform: uppercase; letter-spacing: -0.03em; color: #fff; opacity: 0.07; pointer-events: none; user-select: none; white-space: nowrap; } /* Scroll cue: a slow, small bounce, painted with the shared chevron mask. Purely an affordance that there is more below. */ .ev-hero::after { content: ""; position: absolute; inset-block-end: 1.5rem; inset-inline-start: 50%; width: 26px; height: 26px; margin-inline-start: -13px; background: #fff; opacity: 0.6; -webkit-mask: var(--ev-ico-chevron) center / contain no-repeat; mask: var(--ev-ico-chevron) center / contain no-repeat; animation: ev-cue 2.4s var(--ev-ease) infinite; } @keyframes ev-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } .ev-hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; align-items: center; gap: clamp(2rem, 5vw, 4rem); max-width: 68rem; width: 100%; } .ev-hero__copy { display: grid; justify-items: center; gap: 1.25rem; } .ev-hero__title { margin: 0; font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; } .ev-hero__sub { margin: 0; font-size: var(--ev-size-lead); line-height: 1.6; color: var(--ev-mint); max-width: 40ch; } /* On phones the device sits under the copy and is scaled down, so the CTAs still land above the fold on a ~700px-tall screen. Qualified with .ev-hero on purpose: the generic .ev-phone width is declared later in this file and would otherwise win on source order alone. */ .ev-hero .ev-phone { width: min(210px, 52vw); } @media (min-width: 56rem) { /* Side by side. Stacked, the hero ran ~1100px tall and buried the buttons below the fold. */ .ev-hero { text-align: start; } .ev-hero__inner { grid-template-columns: 1.1fr 0.9fr; } .ev-hero__copy { justify-items: start; } .ev-hero__copy .wp-block-buttons { justify-content: flex-start; } .ev-hero .ev-phone { width: min(300px, 26vw); } } /* ========================================================================== 7. Phone mockup -------------------------------------------------------------------------- Modelled on a Motorola Moto G84: punch-hole camera, slim even bezel, modest corner radii. Drawn entirely in CSS, so the only asset needed is a plain screenshot — and because the device is a core Image block rather than custom HTML, those screenshots stay swappable from the media library in one click. ========================================================================== */ .ev-phone { position: relative; width: min(280px, 68vw); /* 20:9 — the G84's actual panel (2400x1080). Screenshots must match this ratio or object-fit: cover will crop them. */ aspect-ratio: 9 / 20; margin: 0; /*
ships with UA + block margins */ padding: 7px; border-radius: 26px; background: linear-gradient(160deg, #3a3f3c, #141815 60%); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 8px 20px -8px rgba(0, 0, 0, 0.4); flex-shrink: 0; } /* Qualified with .wp-block-image so it outranks the core rule setting `height: auto` on block images, which would collapse the screen. */ .wp-block-image.ev-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; background: var(--ev-mint); /* visible while the screenshot loads */ } /* Punch-hole camera. Sized in px because it is a physical feature of the device, not something that should scale with the layout — in `em` it would be a speck on mobile and a porthole on desktop. */ .ev-phone::after { content: ""; position: absolute; inset-block-start: 15px; inset-inline-start: 50%; width: 8px; height: 8px; margin-inline-start: -4px; border-radius: 50%; background: #0c0f0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } /* ========================================================================== 8. Benefit strip -------------------------------------------------------------------------- The "specs at a glance" ribbon under the hero. ========================================================================== */ .ev-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem clamp(1.25rem, 4vw, 3rem); padding: 1.5rem var(--ev-gutter); background: var(--ev-ink); color: var(--ev-mint); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; } .ev-strip__item { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; } /* ========================================================================== 9. Feature bands -------------------------------------------------------------------------- Two columns where the device column is STICKY: the phone holds still while the copy scrolls past it. Below 56rem sticky is dropped and the band becomes a plain stack — a pinned phone in a single column would just cover the text. ========================================================================== */ .ev-feature { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; justify-items: center; max-width: 68rem; margin-inline: auto; text-align: center; } /* Gutenberg's flow layout puts vertical margins on every child; inside a grid they fight the `gap` and knock the columns out of alignment. */ .ev-feature > * { margin-block: 0; } .ev-feature__text { max-width: 34rem; } /* Oversized step number, set as a graphic element rather than a list marker. */ .ev-feature__num { display: block; font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.04em; opacity: 0.22; margin-bottom: 0.5rem; } @media (min-width: 56rem) { .ev-feature { grid-template-columns: 1fr 1fr; justify-items: start; text-align: start; } .ev-feature__media { position: sticky; top: 6rem; /* clears the sticky topbar */ justify-self: center; } /* Zig-zag: add this class to a band to swap the columns. */ .ev-feature--flip .ev-feature__media { order: 2; } } /* Band colours. Alternate light and dark down the page — with a single-hue brand that value contrast is the only thing giving the scroll its rhythm. */ .ev-feature--amber { background: var(--ev-amber); color: var(--ev-ink); } .ev-feature--green { background: var(--ev-green); color: #fff; } .ev-feature--cream { background: var(--ev-cream); color: var(--ev-ink); } .ev-feature--mint { background: var(--ev-mint); color: var(--ev-ink); } .ev-feature--ink { background: var(--ev-ink); color: #fff; } /* ========================================================================== 10. Tile grid ========================================================================== */ .ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 5vw, 3.5rem); } .ev-grid > * { margin-block: 0; } .ev-tile { position: relative; padding: var(--ev-tile-pad); border-radius: var(--ev-radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: transform 0.35s var(--ev-ease), background 0.35s var(--ev-ease); } .ev-tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); } /* The icon is drawn in two layers so the tile needs no icon element in the markup: ::before is the rounded chip, ::after is the glyph on top of it. Both are declared in full rather than leaning on the generic painter in section 3, so a tile without an .ev-ico--* class degrades to an empty chip instead of an unstyled box. */ .ev-tile::before { content: ""; display: block; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.12); -webkit-mask: none; mask: none; } .ev-tile::after { content: ""; position: absolute; /* Centred in the chip: tile padding, then the chip's own inset. */ inset-block-start: calc(var(--ev-tile-pad) + 14px); inset-inline-start: calc(var(--ev-tile-pad) + 12px); width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--ev-ico) center / contain no-repeat; mask: var(--ev-ico) center / contain no-repeat; } .ev-tile h3 { margin: 0 0 0.5rem; font-size: var(--ev-size-h3); font-weight: 700; line-height: 1.1; text-transform: uppercase; } /* Light variant, for tiles on cream or mint bands. */ .ev-tile--light { background: #fff; border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .ev-tile--light:hover { background: #fff; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.2); } .ev-tile--light::before { background: var(--ev-mint); } .ev-tile--light::after { background: var(--ev-green); } /* ========================================================================== 11. Closing CTA -------------------------------------------------------------------------- Copy left, artwork right. The illustration stands on the band's bottom edge and overhangs the top, overlapping the section above. Three things make that work: 1. `.ev-section` uses `overflow-x: clip`, not `hidden` (see section 1). 2. The band is `position: relative`, so it paints in the positioned layer, above the background of the section it overlaps. 3. On desktop the image leaves the grid flow and is sized against the band: `height: calc(100% + 4rem)` with its bottom pinned to the bottom edge, so the overhang is ALWAYS 4rem. Letting the artwork's own height decide would change the overhang every time someone swapped the file. Needs a PNG with a transparent background; on a solid one it reads as a rectangle straddling two bands. ========================================================================== */ .ev-cta { position: relative; } .ev-cta__inner { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); max-width: 62rem; margin-inline: auto; } .ev-cta__inner > * { margin-block: 0; } .ev-cta__text { text-align: start; } .ev-cta__text .wp-block-buttons { justify-content: flex-start; } .ev-cta__media { width: min(300px, 70%); justify-self: center; /* Meets the bottom edge by cancelling exactly the band's bottom padding — no more, or the artwork slides down into the footer. */ margin-block-start: 0; margin-block-end: calc(-1 * var(--ev-section-y)); } .ev-cta__media img { display: block; width: 100%; height: 100%; /* `contain` + bottom origin: the artwork keeps its proportions and stays planted on the bottom edge whatever shape the PNG turns out to be. */ object-fit: contain; object-position: bottom center; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35)); } @media (min-width: 56rem) { /* The left alignment of the copy only reads as deliberate once something occupies the other column. */ .ev-cta__inner { grid-template-columns: 1.15fr 0.85fr; } /* Out of flow, pinned to the band. The empty second grid track still reserves the width, so the copy never runs underneath. Kept to desktop: in a single column an absolutely positioned image lands on the text. */ .ev-cta__media { position: absolute; inset-block-end: 0; inset-inline-end: var(--ev-gutter); width: min(380px, 34%); height: calc(100% + 4rem); margin: 0; } } /* ========================================================================== 12. Spec / FAQ accordion -------------------------------------------------------------------------- Set like a technical-specification table: hairline rules, no boxes, a rotating marker. Uses the native
block (WordPress 6.1+). ========================================================================== */ .ev-specs { max-width: 48rem; margin-inline: auto; } .ev-specs .wp-block-details { margin: 0; padding: 1.25rem 0; border: 0; border-block-end: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0; } .ev-specs .wp-block-details summary { display: flex; align-items: center; gap: 1rem; list-style: none; cursor: pointer; font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .ev-specs .wp-block-details summary::-webkit-details-marker { display: none; } /* A "+" that rotates into an "×" when the row opens. */ .ev-specs .wp-block-details summary::after { content: "+"; margin-inline-start: auto; font-size: 1.6rem; font-weight: 400; line-height: 1; transition: rotate 0.3s var(--ev-ease); } .ev-specs .wp-block-details[open] summary::after { rotate: 45deg; } .ev-specs .wp-block-details p { margin-block-start: 0.85rem; line-height: 1.7; opacity: 0.85; } /* ========================================================================== 13. Buttons ========================================================================== */ .ev-section .wp-element-button, .ev-hero .wp-element-button, .ev-topbar .wp-element-button { border-radius: 999px; padding: 0.95rem 2.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; transition: transform 0.25s var(--ev-ease), box-shadow 0.25s var(--ev-ease); } .ev-section .wp-element-button:hover, .ev-hero .wp-element-button:hover, .ev-topbar .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.45); } /* Compact override: the full section padding would overflow a 40px-tall bar. */ .ev-topbar .wp-element-button { padding: 0.5rem 1.4rem; font-size: 0.8rem; } /* ========================================================================== 14. Reduced motion -------------------------------------------------------------------------- Everything decorative stops. The reveal must resolve to VISIBLE, not to its hidden start state, or the page would be blank for these users. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html.ev-reveal .ev-anim, html.ev-reveal .ev-anim.is-in, html.ev-reveal .ev-anim.is-in > * { opacity: 1; transform: none; transition: none; animation: none; } /* The scroll cue is .ev-hero::after — this used to target a .ev-hero__cue element that no longer exists, so the bounce kept running for users who had asked for no motion. */ .ev-hero::after { animation: none; } .ev-tile:hover, .ev-section .wp-element-button:hover, .ev-hero .wp-element-button:hover, .ev-topbar .wp-element-button:hover { transform: none; } .ev-feature__media { position: static; } }