/* Theme Name: Vallem Theme URI: https://vallem.com Author: Ettic Author URI: https://ettic.nl Description: Block theme for vallem.com. Version: 0.1.127 Requires at least: 7.0 Tested up to: 7.0.4 Requires PHP: 8.2 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: vallem */ /* Design tokens live in theme.json. Only add CSS here for what theme.json cannot express. */ /* Inter v4 carries an opsz axis (14-32). Browsers default to auto, this is belt and braces. */ body { font-optical-sizing: auto; } /* ---- The heading ladder -------------------------------------------------- * * theme.json can only style a heading by level, and the patterns pick by size. * section-lead-capture puts an h2 at 20px, section-pillars puts an h3 at 36px, * so level and size disagree across the theme and a level rule cannot say what * display type looks like. These can, because they key on the size preset: a * heading is treated for the size it is set at, whatever its level. * * Weight tops out at 500 and never reaches 600. That is the services bento's * own rule, `h1, h2, h3 { font-weight: 500 }` in the prototype the Stripe port * was signed off from, and it is what the four heroes already do by hand. The * 600 headings inherited until now arrived with the first typography commit, * 0f7c7ca on 2026-08-14, and was a default nobody revisited rather than a * decision. Nol on 2026-09-07: 600 is too much, cap it at 500. * * Tracking at 30px and below is Inter's Dynamic Metrics formula, the same * numbers theme.json carries per level. Above that the formula flattens at * -0.0223em because Inter expects the opsz axis to take over, and v4's axis * stops at 32. Nothing compensates between 36 and 72px, which is why every * display heading in the theme was hand-tightened. The display steps here are * those hand values made into a ladder: -0.028em at 48, which is the bento's * section title, and -0.035em at 72, which is the homepage hero. * * :is() weighs its heaviest branch, a type selector, so each rule is (0,1,1). * That clears theme.json's `:root :where(h2)` at (0,1,0) with no !important. * An inline style still beats it, which is why the patterns no longer write * weight, tracking or leading of their own onto a heading. * ------------------------------------------------------------------------- */ :is(h1, h2, h3, h4, h5, h6).has-display-hero-font-size { font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; } :is(h1, h2, h3, h4, h5, h6).has-display-large-font-size { font-weight: 500; letter-spacing: -0.032em; line-height: 1.05; } :is(h1, h2, h3, h4, h5, h6).has-display-medium-font-size { font-weight: 500; letter-spacing: -0.028em; line-height: 1.14; } :is(h1, h2, h3, h4, h5, h6).has-display-small-font-size { font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; } :is(h1, h2, h3, h4, h5, h6).has-xxx-large-font-size { font-weight: 500; letter-spacing: -0.0213em; line-height: 1.2; } :is(h1, h2, h3, h4, h5, h6).has-xx-large-font-size { font-weight: 500; letter-spacing: -0.0195em; line-height: 1.25; } :is(h1, h2, h3, h4, h5, h6).has-x-large-font-size { font-weight: 500; letter-spacing: -0.0167em; line-height: 1.3; } :is(h1, h2, h3, h4, h5, h6).has-large-font-size { font-weight: 500; letter-spacing: -0.0143em; line-height: 1.35; } /* WordPress puts a block gap between every root-level child. Sections here own their own vertical space, so the first one should meet the nav directly, and the last one should run straight into the footer rather than ending on a band of page background. Both cases are the same gap, so they are one rule. */ .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; } /* The same gap again, one level down, between the sections themselves. It is core's own theme.json that ships it: `styles.spacing.blockGap: "24px"` becomes `:root :where(.is-layout-constrained) > * { margin-block: 24px 0 }`, which is a margin-block SHORTHAND, so grepping for margin-block-start never finds it. Sections butt up, so it goes. Scoped to the full-width children of the post content. Spacing between paragraphs, list items and buttons inside a section is untouched, because of the child combinator, and an ordinary block dropped between two sections keeps its gap because it is not alignfull. That also keeps the rule off blog post paragraphs the day a single.html arrives, since those are direct children of post-content too. Three classes beat core's (0,1,0) outright rather than depending on which stylesheet the editor prints last. */ .wp-block-post-content.is-layout-constrained > .alignfull { margin-block-start: 0; } /* Colouring part of a heading uses core's Highlight format, which is a . The browser default for is a yellow plate, and core suppresses it with an inline `background-color: transparent` rather than with a rule. That inline style is the one thing kses strips from a , so the moment content is saved by anyone without unfiltered_html, or inserted programmatically, the yellow comes back and a two-tone quote turns into a highlighter pen. Caught by rendering the quote in a real install, not by reading the markup, which was correct. Only marks that carry a text colour are neutralised; a genuine highlight sets its own background inline and still wins over this. */ .wp-site-blocks mark.has-inline-color { background-color: transparent; } /* ---- The `border` slug collides with core's border flag ------------------- * * The palette has a colour whose slug is `border`, so theme.json generates its * text-colour class as * * .has-border-color { color: var(--wp--preset--color--border) !important } * * and core's border support writes that *same class name* onto every block that * carries a border colour, purely as a flag that one is set. See `qF()` in * wp-includes/js/dist/block-editor.min.js: `{"has-border-color": borderColor || * style?.border?.color}`, alongside the real one, `has-$slug-border-color`. * * So any block with a hairline repaints its own text, and everything inside it * that has not set a colour of its own, to #D4D4D8. Silently, at !important, * with nothing wrong in the markup. It was already happening on the comparison * section's right-hand card, whose list was reading grey-lilac on navy instead * of white, and it is what turned every price and tick list on the pricing * cards to pale grey the first time they rendered. * * Told apart by `has-text-color`. Core writes that alongside every text-colour * preset and never alongside the border flag, so a lone `has-border-color` is * always the flag. `!important` because core's rule carries one: with two, the * higher specificity decides, and (0,2,0) beats (0,1,0). * * The second rule is the case the first cannot reach. A block that sets a text * colour AND a border colour carries both classes, so `has-text-color` no * longer separates them, and the winner is whichever preset theme.json prints * later. Everything declared after `border` in the palette already wins on * source order; the six declared before it lose. `base` on a bordered card in a * dark section is a real combination, so those six are re-asserted here. * * All of this is a stopgap. The fix is to rename the slug, which is a decision * about the palette rather than about CSS: a slug is stored in the markup of * every block that uses it, so renaming is not free and is Nol's call. * ------------------------------------------------------------------------- */ .has-border-color:not(.has-text-color) { color: inherit !important; } .has-border-color.has-base-color { color: var(--wp--preset--color--base) !important; } .has-border-color.has-base-muted-color { color: var(--wp--preset--color--base-muted) !important; } .has-border-color.has-canvas-color { color: var(--wp--preset--color--canvas) !important; } .has-border-color.has-surface-color { color: var(--wp--preset--color--surface) !important; } .has-border-color.has-surface-alt-color { color: var(--wp--preset--color--surface-alt) !important; } .has-border-color.has-surface-dark-color { color: var(--wp--preset--color--surface-dark) !important; } /* The tick. One green and one glyph, shared by the comparison list and the intro section's points, because they are the same mark making the same point and two copies drift the moment either is retuned. Point both at a palette slug once the greens are settled; see docs/pattern-types.md. */ :root { --vallem-tick-color: #89ed75; --vallem-tick-glyph: url("data:image/svg+xml,"); /* The arrow, for the same reason as the tick: one glyph, more than one place. Drawn rather than typed because U+2192 is outside the unicode-range of both Inter subsets we ship, so a text arrow would come from the OS fallback and change shape per platform. It is always used as a mask, so the stroke colour inside it never shows and the colour stays a property of whatever is using it. Used by the mega menu's panel titles and by the arrow-lead button variation. */ --vallem-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11m-4.5-4.5L13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* The stars, hoisted here the day a second section needed them. One data URI holding all five, on a 100x24 viewBox at a 20-unit pitch, so `contain` sizes a row off its height alone and no box needs a width. Always used as a mask, so the fill inside it never shows and the colour belongs to whatever is drawing them. Height stays local to each row, because the demo CTA sets them beside a 14px score and the CTA plate sets them alone above a 36px heading. Five is the count in both places: five outlines beside a varying score is the convention, it is not a number to correct. Used by the demo CTA's rating row and by the CTA plate with the logo band. */ --vallem-stars-glyph: url("data:image/svg+xml,"); /* The dot field, hoisted here the day a second plate drew one, same rule as the tick, the arrow and the stars: one thing, more than one place, so it moves to :root. Used by the CTA plate with the logo band and by the quote plate. Mixed out of currentcolor rather than out of a palette slug, so it recolours with whatever plate is drawing it and needs no light and dark variant. --vallem-dot-ink is how much of that colour reaches the dot; 9% is the value both plates use and the one to turn if a third plate needs a fainter field. It is always a plate's own background-image and never a ::before, and that is what makes the Achtergrond-paneel work: WordPress writes a chosen image as an inline background-image with a background-size beside it (block-supports/background.php), inline beats the stylesheet, and the dots are replaced outright. A ::before would sit on top of the upload. The pitch stays local to each plate, because that is the one number the two sections set differently. */ --vallem-dot-ink: 9%; --vallem-dot-field: radial-gradient( color-mix(in srgb, currentcolor var(--vallem-dot-ink), transparent) 1px, transparent 1.1px ); } /* ------------------------------------------------------------------------- * * Buttons * * Four decisions, kept apart on purpose so they never fight for the same * control: * * look a block style variation, styles/blocks/button-*.json * shape the border radius control * size the font size control, because every dimension is in em * motion here, and automatic, so no pattern has to opt in * * Size is the one worth spelling out. theme.json sets the padding and the corner * in em, so picking Klein or Groot in the editor moves the padding, the corner * and the roll together. There is no size variation to register and nothing * that can be set to a size the type does not match. * ------------------------------------------------------------------------- */ .wp-block-button__link { /* The roll travels exactly one line box, so the second copy of a character lands flush outside the clip whatever line height the button ends up with. The em value is the fallback for browsers without lh (before Chrome 109, Safari 16.4, Firefox 120) and matches theme.json's 1.35. */ --vallem-roll: 1.35em; /* The logo row rolls on this curve. One motion, used twice. */ --vallem-roll-time: 600ms; --vallem-roll-ease: cubic-bezier(0.625, 0.05, 0, 1); /* How far the button gives on hover. Small on purpose: it should read as the button taking the press, not as an animation. */ --vallem-press: 0.98; transition: transform var(--vallem-roll-time) var(--vallem-roll-ease), background-color 200ms ease, color 200ms ease; } @supports (height: 1lh) { .wp-block-button__link { --vallem-roll: 1lh; } } /* Outline. Owned outright rather than adjusted, because core's own rule is three classes deep and its colours are guarded by :not() selectors, so half of it lands and half of it does not depending on what the editor set. One hairline at a fraction of the label's own colour, which means it reads on any background without anybody choosing a border colour. Anything set in the editor is an inline style and still wins over this. */ .wp-site-blocks .wp-block-button.is-style-outline > .wp-block-button__link, .wp-site-blocks .wp-block-button > .wp-block-button__link.is-style-outline { border: 1px solid color-mix(in srgb, currentcolor 28%, transparent); padding: var(--wp--custom--button-padding-block) var(--wp--custom--button-padding-inline); background-color: transparent; } /* Subtle. Outline without the hairline: a tertiary action that reads as copy until the pointer arrives. Its colours are here for the same reason as outline's, and taking the label from currentcolor is what lets one variation serve a light section and a dark one. */ .wp-site-blocks .wp-block-button.is-style-subtle > .wp-block-button__link { color: currentcolor; background-color: transparent; } /* The button gives a little under the pointer. A transform, because it is the only way to change a button's size that the page cannot see: it happens after layout, so nothing around it can move no matter what. This started as a border that grew inward with the padding giving back exactly what it took, which keeps the label pin sharp and matches the reference. It cannot be made to hold. Border widths are snapped to whole device pixels and padding is not, so the two only balance when the frame lands on a whole pixel: an em frame drifted at 14, 18 and 20px, and a 2px frame drifted again at 125% display scaling, which is a normal Windows setting. Measured 16 of 18 buttons moving their neighbours. Sharper text is not worth a layout that is right on some machines. */ .wp-block-button__link:focus-visible { transform: scale(var(--vallem-press)); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover { transform: scale(var(--vallem-press)); } } /* WordPress emits pseudo states for elements but not for block style variations, so a variation's hover colour cannot live in its own file with the rest of its look. Verified against the generated stylesheet, not assumed. Four classes clears both the variation and theme.json's own button hover; a colour set in the editor still wins over all of it. */ .wp-block-button.is-style-primary > .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-dark); } .wp-block-button.is-style-inverted > .wp-block-button__link:hover { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); } .wp-site-blocks .wp-block-button.is-style-outline > .wp-block-button__link:hover { background-color: color-mix(in srgb, currentcolor 8%, transparent); border-color: color-mix(in srgb, currentcolor 55%, transparent); } .wp-site-blocks .wp-block-button.is-style-subtle > .wp-block-button__link:hover { background-color: color-mix(in srgb, currentcolor 8%, transparent); } /* The roll. Each character hides a second copy of itself one line below, drawn as a shadow rather than as more markup, and hover slides the pair up so the copy lands where the original was. assets/js/text-roll.js does the splitting; without it the label is an ordinary label and the button is unharmed. */ .vallem-roll__w { display: inline-block; white-space: nowrap; } /* Inline boxes cannot be transformed, so each character needs its own block. This one is the clip and never moves, the one inside it is what rolls; a single element cannot be both. No will-change anywhere: it rasterises the span to the size of its own box, which shears the overhang off an f and cuts the descender off a j. */ .vallem-roll__c { display: inline-block; overflow: hidden; vertical-align: bottom; } /* The hair of rotation is what keeps the two copies rasterising identically mid-transition. */ .vallem-roll__r { display: inline-block; text-shadow: 0 var(--vallem-roll) currentcolor; transform: translateY(0) rotate(0.001deg); transition: transform var(--vallem-roll-time) var(--vallem-roll-ease); } .wp-block-button__link:focus-visible .vallem-roll__r { transform: translateY(calc(-1 * var(--vallem-roll))) rotate(0.001deg); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover .vallem-roll__r { transform: translateY(calc(-1 * var(--vallem-roll))) rotate(0.001deg); } } /* Reduced motion takes the movement away rather than making it instant. A character that snaps a line upward is the same event compressed, not a quieter one. The colour change theme.json puts on :hover stays, so the button still answers the pointer. */ @media (prefers-reduced-motion: reduce) { .wp-block-button__link { --vallem-press: 1; transition: background-color 200ms ease, color 200ms ease; } .vallem-roll__r { transition: none; } .wp-block-button__link:hover .vallem-roll__r, .wp-block-button__link:focus-visible .vallem-roll__r { transform: none; } } /* Header. Top bar and nav are ordinary sections in the flow. Once the nav has scrolled past, the bar detaches into a floating pill. Two layouts, picked in the editor: default sits above the next section, the "Over de sectie" block style sits on top of it. Behaviour in assets/js/header.js */ :root { --vallem-topbar-height: 36px; --vallem-nav-height: 64px; --vallem-nav-height-compact: 56px; --vallem-nav-width: 1376px; --vallem-nav-radius: 12px; /* Where the page's content starts, and the line every section is set to. It is the nav bar's 1376px shell less the spacing-20 the bar pads its own contents by, so a section's heading begins on the same vertical as the logo. The bar itself is transparent until the nav sticks, so this line, not the shell, is the width of the navigation as anyone actually sees it. Written out rather than calculated from the two: the eight patterns carry the same number as a literal in their layout.contentSize attribute, which cannot take a var(), and a calc here would let the two drift apart in silence. Change this and change those. */ --vallem-content-line: 1344px; --vallem-ease: cubic-bezier(0.22, 1, 0.36, 1); /* The light plate. A hairline frame drawn per side so the joint between the bar and an open panel can be left open, and a lift that carries both. */ --vallem-nav-hairline: rgb(24 24 27 / 8%); --vallem-nav-lift: 0 1px 2px rgb(24 24 27 / 4%), 0 12px 32px rgb(24 24 27 / 8%); } .vallem-topbar { position: relative; z-index: 1; min-height: var(--vallem-topbar-height); display: flex; align-items: center; } /* The constrained layout centres its child with auto margins, which in a flex parent leaves the row hugging its contents. Stretch it so the phone number sits hard left and the links hard right. */ .vallem-topbar > * { flex: 1; max-width: var(--vallem-nav-width); /* Matches the nav bar's inner padding so both rows start on the same line. */ padding-inline: var(--wp--preset--spacing--20); } .vallem-topbar a { color: inherit; text-decoration: none; opacity: 0.75; transition: opacity 150ms ease; } .vallem-topbar a:hover, .vallem-topbar a:focus-visible { opacity: 1; } .vallem-topbar p { margin: 0; white-space: nowrap; } /* Default: the nav is an ordinary section in the flow. It reserves its own height so nothing jumps when the bar detaches on scroll. */ .vallem-nav { position: relative; z-index: 100; min-height: var(--vallem-nav-height); padding-inline: var(--wp--preset--spacing--50); } /* The shell holds the bar and the panel stack together so the mega menu travels with the bar when it detaches. Everything that used to position the bar positions the shell now. */ /* The scrim is inserted as the nav's first child, which makes the shell a second child and hands it the flow layout's block gap. That pushed the whole bar down by 24px. Neither of these two is in the flow in any real sense. */ .vallem-nav .vallem-nav__shell, .vallem-nav .vallem-nav__backdrop { margin-block: 0; } .vallem-nav__shell { position: relative; z-index: 1; max-width: var(--vallem-nav-width); margin-inline: auto; } .vallem-nav__bar { min-height: var(--vallem-nav-height); padding-inline: var(--wp--preset--spacing--20); border-radius: var(--vallem-nav-radius); color: var(--wp--preset--color--contrast); background-color: transparent; transition: background-color 300ms var(--vallem-ease), box-shadow 300ms var(--vallem-ease), min-height 300ms var(--vallem-ease), color 300ms var(--vallem-ease); } /* Overlay: the nav sits on top of whatever section follows it instead of above it. Applied per template via the "Over de sectie" block style. */ .vallem-nav.is-style-overlay { position: absolute; inset-inline: 0; min-height: 0; } .vallem-nav.is-style-overlay + * { --vallem-overlay-clearance: var(--vallem-nav-height); } /* Light contents wherever the bar is transparent over something dark. */ .vallem-nav.is-on-dark .vallem-nav__bar { color: var(--wp--preset--color--base); } /* Detached: the shell leaves the flow and floats. It slides with `top` rather than a transform, which keeps the shell out of the way as a containing block. Desktop only. The phone has its own arrangement further down, where the nav is sticky and the pill never happens. */ .vallem-nav.is-stuck .vallem-nav__shell { position: fixed; inset-inline: var(--wp--preset--spacing--50); top: calc(var(--vallem-admin-offset, 0px) + 8px); transition: top 450ms var(--vallem-ease); } .vallem-nav.is-stuck.is-hidden .vallem-nav__shell { top: -140px; } /* The pill is a light plate, so it has to draw its own frame and lift instead of borrowing contrast from whatever is behind it. After the on-dark rule because both states can be true at once and the plate is what the eye reads. */ .vallem-nav.is-stuck .vallem-nav__bar { min-height: var(--vallem-nav-height-compact); color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--vallem-nav-hairline), var(--vallem-nav-lift); } /* Suppress the slide for the frame the bar detaches in, so it does not animate in from wherever it happened to be sitting. */ .vallem-nav.no-transition .vallem-nav__shell, .vallem-nav.no-transition .vallem-nav__bar { transition: none; } /* The admin bar shifts the document but not fixed elements. */ .admin-bar { --vallem-admin-offset: 32px; } @media (width <= 782px) { .admin-bar { --vallem-admin-offset: 46px; } } .vallem-nav__logo { display: flex; align-items: center; flex-shrink: 0; color: inherit; } .vallem-nav__logo svg { display: block; width: auto; height: 22px; } /* Nav links inherit the bar colour so they flip with it. */ .vallem-nav__menu .wp-block-navigation-item__content { padding: 6px 10px; border-radius: 6px; color: inherit; font-weight: 500; text-decoration: none; transition: background-color 150ms ease; } .vallem-nav__menu .wp-block-navigation-item__content:hover, .vallem-nav__menu .wp-block-navigation-item__content:focus-visible { background-color: currentcolor; } /* Tint only the background, not the text, on hover. */ .vallem-nav__menu .wp-block-navigation-item__content:hover { background-color: color-mix(in srgb, currentcolor 10%, transparent); } /* The bar's button is the ordinary button, scaled to the bar rather than to the type. Overriding the token rather than the padding is what keeps it in the system: theme.json sets the padding from this variable, so the bar sets a size without owning a second copy of how a button is built. */ .vallem-nav__cta { --wp--custom--button-padding-block: 0.45em; --wp--custom--button-padding-inline: 1.15em; } .vallem-nav__cta .wp-block-button__link { white-space: nowrap; } /* The button inverts the bar, not the page: over a dark section the bar is transparent, so the ordinary dark plate would disappear into it. Colour has to come from here because it follows a state, the same reason the logo row's scheme does. Everything else about it is the ordinary button. */ .vallem-nav.is-on-dark .vallem-nav__cta .wp-block-button__link { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); } .vallem-nav.is-on-dark .vallem-nav__cta .wp-block-button__link:hover { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--surface); } /* The pill and an open panel both bring their own light plate, so the ordinary dark button is right again even while the pill floats over a dark section. Both of these have to sit after the on-dark rule to win the tie. */ .vallem-nav.is-stuck .vallem-nav__cta .wp-block-button__link, .vallem-nav.is-menu-open .vallem-nav__cta .wp-block-button__link { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--contrast); } .vallem-nav.is-stuck .vallem-nav__cta .wp-block-button__link:hover, .vallem-nav.is-menu-open .vallem-nav__cta .wp-block-button__link:hover { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--primary); } @media (width <= 781px) { .vallem-topbar__lead { overflow: hidden; text-overflow: ellipsis; } /* Contact stays reachable on mobile, just tighter. Through the token again, for the same reason. */ .vallem-nav__cta { --wp--custom--button-padding-inline: 0.85em; } .vallem-nav__logo svg { height: 19px; } .vallem-nav__bar { padding-inline: var(--wp--preset--spacing--10); } } /* Respect a reduced-motion preference: keep the states, drop the sliding. */ @media (prefers-reduced-motion: reduce) { .vallem-nav { transition: none; } } /* Mega menu. A nav item opens a panel when it carries a class of the form `opens-` and a group in the panel stack carries the matching anchor `panel-`. Both are ordinary editor fields, so the wiring is visible in the Site Editor and nothing in the JS knows the site's menu. Panels are plain blocks, so everything inside stays editable. Behaviour in assets/js/nav-mega.js. Desktop only: below 600px these same panels are read by assets/js/nav-drawer.js and rebuilt as the drawer's second level. Selectors carry the `.vallem-nav` prefix wherever they override a core layout default, because core's layout CSS is a single class and may print after this file. */ /* Open: the bar takes the same plate as the panel so the two read as one card, whatever was behind them. Its bottom edge is left unframed, and the panel's top edge likewise, so the joint between them does not show. */ .vallem-nav.is-menu-open .vallem-nav__bar { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: inset 0 1px 0 var(--vallem-nav-hairline), inset 1px 0 0 var(--vallem-nav-hairline), inset -1px 0 0 var(--vallem-nav-hairline); } /* The clip box. Height is animated from 0 to the measured panel height, which is what produces the morph between panels of different sizes. It overlaps the bar by a pixel so no hairline seam shows at fractional device pixels. */ .vallem-nav .vallem-nav__panels { position: absolute; z-index: 1; inset-inline: 0; top: calc(100% - 1px); height: 0; margin: 0; overflow: hidden; pointer-events: none; background-color: var(--wp--preset--color--base); border-end-start-radius: var(--vallem-nav-radius); border-end-end-radius: var(--vallem-nav-radius); box-shadow: inset 1px 0 0 var(--vallem-nav-hairline), inset -1px 0 0 var(--vallem-nav-hairline), inset 0 -1px 0 var(--vallem-nav-hairline), var(--vallem-nav-lift); } /* Panels stack on top of each other so the clip box measures whichever one is being asked for, not the tallest. Grid rather than the flex layout the block declares, because the columns pad themselves and flex only shares out what is left after that padding, which leaves a column two tracks wide 48px short of two tracks. Equal tracks are what grid is for. Auto flow keeps it count-agnostic, so a column added in the editor still lands on a track of its own. */ .vallem-nav .vallem-nav__panel { position: absolute; inset: 0 0 auto; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; align-items: stretch; visibility: hidden; opacity: 0; } /* No dividing rules between columns. The rule under each header groups the list below it, which is what the columns were being asked to do. min-width so a long word cannot push a track wider than its share. */ .vallem-nav .vallem-nav__panel-col { min-width: 0; margin: 0; padding: 40px 24px; } .vallem-nav .vallem-nav__panel-col > * { margin-block: 0; } /* Selected through the column so this outweighs the item's own `margin: 0`, which would otherwise win on source order. 20px, the same as the gap between two items, so the split column below can hand both jobs to one row gap and still line its first link up with the plain column beside it. */ .vallem-nav .vallem-nav__panel-col > .vallem-nav__panel-label + * { margin-block-start: 20px; } /* Producten runs its items two up over two of the panel's tracks, so the three tracks the panel was drawn on all keep the width they had. The label is left a direct child and spanned, so its rule still runs the whole column rather than stopping at the first track. */ .vallem-nav .vallem-nav__panel-col.is--split { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; align-content: start; } .vallem-nav .vallem-nav__panel-col.is--split > .vallem-nav__panel-label { grid-column: 1 / -1; } /* The row gap already spaces these. Left in place the margins would add to it, and only on the items that happen to start a row, which staggers the two tracks against each other. */ .vallem-nav .vallem-nav__panel-col.is--split > .vallem-nav__panel-label + *, .vallem-nav .vallem-nav__panel-col.is--split > .vallem-nav__panel-item + .vallem-nav__panel-item { margin-block-start: 0; } /* No preset font size on the label, so the editor's own choice wins the moment anyone makes one. Preset size classes carry !important. The padding is the room the rule sits in. */ .vallem-nav__panel-label { position: relative; padding-block-end: 12px; color: var(--wp--preset--color--contrast); font-size: 15px; font-weight: 500; line-height: 1.35; } /* The resting rule, and the accent that wipes over it while the column is hovered. Both are pseudo elements because GSAP owns the label's own transform and would fight anything set here. */ .vallem-nav__panel-label::before, .vallem-nav__panel-label::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; } .vallem-nav__panel-label::before { height: 1px; background-color: var(--wp--preset--color--border); } .vallem-nav__panel-label::after { height: 2px; background-image: linear-gradient( 90deg, var(--wp--preset--color--primary), var(--wp--preset--color--violet) ); transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .vallem-nav .vallem-nav__panel-col:hover .vallem-nav__panel-label::after, .vallem-nav .vallem-nav__panel-col:focus-within .vallem-nav__panel-label::after { transform: scaleX(1); } /* The card's label is an eyebrow over a heading, not a column header, so it takes neither the rule nor the accent. */ .vallem-nav .vallem-nav__panel-col.is--card .vallem-nav__panel-label::before, .vallem-nav .vallem-nav__panel-col.is--card .vallem-nav__panel-label::after { content: none; } /* The card column uses the same class for an eyebrow above a heading, and that one still wants to be the quieter of the two. */ .vallem-nav .vallem-nav__panel-col.is--card .vallem-nav__panel-label { padding-block-end: 0; color: var(--wp--preset--color--contrast-muted); font-size: 14px; font-weight: 500; } .vallem-nav .vallem-nav__panel-col.is--card > .vallem-nav__panel-label + * { margin-block-start: 8px; } .vallem-nav .vallem-nav__panel-item { position: relative; margin: 0; } .vallem-nav .vallem-nav__panel-item + .vallem-nav__panel-item { margin-block-start: 20px; } .vallem-nav .vallem-nav__panel-item > * { margin-block: 0; } .vallem-nav__panel-title { font-size: 15px; font-weight: 500; line-height: 1.35; } /* Blue is the hover state, not the resting one. A column of ten blue links was more colour than the panel could carry. */ .vallem-nav__panel-title a { color: var(--wp--preset--color--contrast); text-decoration: none; transition: color 150ms ease; } /* The whole item is the hit area, not just the words. Out of the inline flow, which is why it is ::before and leaves the arrow to ::after. */ .vallem-nav__panel-title a::before { content: ""; position: absolute; inset: 0; } /* The arrow is --vallem-arrow, declared once on :root. Its space is held whether or not it shows, so nothing reflows under the pointer. */ .vallem-nav__panel-title a::after { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-inline-start: 0.3em; vertical-align: -0.02em; background-color: currentColor; -webkit-mask: var(--vallem-arrow) center / contain no-repeat; mask: var(--vallem-arrow) center / contain no-repeat; opacity: 0; transform: translateX(-0.25em); transition: opacity 150ms ease, transform 150ms ease; } /* Hooked on the item, not the link, so the sibling description follows too. */ .vallem-nav .vallem-nav__panel-item:hover .vallem-nav__panel-title a, .vallem-nav__panel-title a:focus-visible { color: var(--wp--preset--color--primary); } .vallem-nav .vallem-nav__panel-item:hover .vallem-nav__panel-title a::after, .vallem-nav__panel-title a:focus-visible::after { opacity: 1; transform: translateX(0); } .vallem-nav__panel-desc { color: var(--wp--preset--color--contrast-muted); line-height: 1.4; transition: color 150ms ease; } .vallem-nav .vallem-nav__panel-item:hover .vallem-nav__panel-desc { color: var(--wp--preset--color--contrast); } /* There is no plate for a focus ring to sit on now, so it goes on the hit area, which is the whole item. */ .vallem-nav__panel-title a:focus-visible { outline: none; } .vallem-nav__panel-title a:focus-visible::before { border-radius: 4px; outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; } .vallem-nav .vallem-nav__panel-col.is--card .vallem-nav__panel-cta { margin-block-start: 20px; } /* The toggle replaces the item's link at runtime and keeps core's content class, so it inherits the nav link's padding, radius and hover plate. Three classes because core sets `display: block` on the item content at two, which left the chevron inline and sitting on the text baseline. Longhands rather than `font: inherit`: the shorthand also resets the weight, which outranked the content class and left the three toggles at 400 while the one plain link stayed at 500. */ .vallem-nav .vallem-nav__menu .vallem-nav__toggle { appearance: none; border: 0; background: none; font-family: inherit; font-size: inherit; font-style: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; } /* Sized and spaced like the reference: no gap, the glyph's own padding inside the viewBox is the whole of the space between it and the label. */ .vallem-nav__chevron { width: 1.25em; height: 1.25em; flex: none; } .vallem-nav__backdrop { position: fixed; z-index: 0; inset: 0; visibility: hidden; opacity: 0; background-color: rgb(24 24 27 / 28%); } /* Below the drawer breakpoint a panel has nowhere to hang, so none of them are drawn. They stay in the document: the drawer reads its second level straight out of them, and display:none hides a subtree without emptying it. */ @media (width < 600px) { .vallem-nav .vallem-nav__panels { display: none; } } @media (prefers-reduced-motion: reduce) { .vallem-nav__chevron { transition: none; } /* The arrow still arrives, it just does not travel to get there. */ .vallem-nav__panel-title a::after { transform: none; transition: opacity 150ms ease; } /* Same for the header accent: it appears, it does not wipe. */ .vallem-nav__panel-label::after { transition: none; } } /* ------------------------------------------------------------------------- * * Mobile drawer. * * Below 600px the bar goes full bleed and fixed, transparent over whatever it * sits on until the page scrolls, then a white plate. The menu becomes a dark * panel hanging off the bar's bottom edge with two levels and a pinned footer. * Built by assets/js/nav-drawer.js from the nav block and the mega menu panels. * * The panel is not a full-screen overlay. It is anchored under the bar, and the * bar is pushed down by --vallem-nav-top, which counts down from the top line's * height to zero over the first 36px of scroll. That one number places the bar, * places the panel and sizes it, and it is why the top line stays visible above * an open panel at the top of the page and is gone once you have scrolled. * * Everything that would strand a visitor without JavaScript hangs off * .is-drawer-ready, which nav-drawer.js sets once it has built the panel. Without * it the bar stays in the flow and the menu stays an ordinary list. * ------------------------------------------------------------------------- */ :root { --vallem-drawer-line: rgb(255 255 255 / 20%); /* the dashed rules */ --vallem-drawer-hair: rgb(255 255 255 / 8%); /* section and footer edges */ --vallem-drawer-fill: rgb(255 255 255 / 4%); /* the card plate */ /* A step above the card it sits on, so a pressed row reads as lifted rather than as the plate it is already on. */ --vallem-drawer-press: rgb(255 255 255 / 10%); /* Not contrast-muted. That token is 3.65:1 on the dark panel, which fails, and a company selling compliance does not ship failing body text. White at 60% over contrast is 6.6:1. */ --vallem-drawer-muted: rgb(255 255 255 / 60%); --vallem-drawer-radius: 12px; } /* Two classes, not one. Both of these are block wrappers, so core's layout CSS reaches them as `.wp-block-buttons.is-layout-flex` and sets display:flex at the same weight a single class carries. A one-class hide loses that tie and the buttons turn up under the header on a desktop. All three are the drawer's, and the drawer only exists below its breakpoint. The panel is built once and then left in the document, so this is what keeps it out of the header on the way back up: turning a phone to landscape crosses 600px, and without this the panel becomes an ordinary block in the flow and spills a bulleted copy of the menu under the logo. The CTA is off here because the JS moves it into the panel's footer, and the burger because the JS builds it. */ .vallem-nav__drawer, .vallem-nav .vallem-nav__drawer-cta, .vallem-nav__burger { display: none; } /* The editor canvas, where all of this has to stay reachable: nothing moves the buttons into a footer there and nothing carries the top line's links into a panel, so hidden would mean uneditable. Written twice for the same reason as the about hero's swap, and inert on the front end. */ body.editor-styles-wrapper .vallem-nav .vallem-nav__drawer-cta, .editor-styles-wrapper .vallem-nav .vallem-nav__drawer-cta { display: flex; } body.editor-styles-wrapper .vallem-topbar .vallem-topbar__links, .editor-styles-wrapper .vallem-topbar .vallem-topbar__links { display: flex; } @media (width < 600px) { /* The top line carries one thing on a phone. Academy is not dropped, nav-drawer.js carries it into the panel. */ .vallem-topbar .vallem-topbar__links { display: none; } .vallem-topbar__lead::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-inline-start: 0.4em; vertical-align: -0.05em; background-color: currentcolor; -webkit-mask: var(--vallem-arrow) center / contain no-repeat; mask: var(--vallem-arrow) center / contain no-repeat; opacity: 0.6; } /* Ungated, both of these. The bar is this tall on a phone whether or not the drawer ever builds, so nothing shifts and nothing animates its height when the class arrives. */ .vallem-nav { min-height: var(--vallem-nav-height-compact); padding-inline: 0; } .vallem-nav .vallem-nav__bar { min-height: var(--vallem-nav-height-compact); padding-inline: var(--wp--preset--spacing--20); border-radius: 0; } .vallem-nav .vallem-nav__shell { max-width: none; } /* Sticky rather than fixed. The bar starts in the flow under the top line and pins itself the moment that line has scrolled away, which is the whole behaviour, done by the compositor. A fixed bar offset by a scroll handler lags behind the line it is meant to sit under during a fast flick on iOS, which opens and closes a gap at exactly the moment the two have to look joined. On the template part, not on the nav. Sticky travels only inside its own parent, and the nav's parent is this wrapper, which is exactly as tall as the header: a sticky nav has nowhere to go and scrolls away with it. Sticking the wrapper at minus the top line's height parks that line off screen and lands the bar on zero, which is the same result somewhere it can happen. No admin bar offset. Below 600px core sets #wpadminbar to position:absolute, wp-includes/css/admin-bar.css, so it scrolls away like anything else. Reserving 46px for it left the bar floating 46px down the screen. */ header.wp-block-template-part:has(> .vallem-nav.is-drawer-ready) { position: sticky; z-index: 100; top: calc(-1 * var(--vallem-topbar-h, var(--vallem-topbar-height))); } /* The pill belongs to the desktop header. header.js drops these classes on this side of the breakpoint, so this only covers the frame in between. */ .vallem-nav.is-drawer-ready.is-stuck .vallem-nav__shell, .vallem-nav.is-drawer-ready.is-stuck.is-hidden .vallem-nav__shell { position: relative; inset-inline: auto; top: auto; } /* A white bar on a near white canvas needs the hairline to have an edge at all. The reference gets away without one because its page is grey. */ .vallem-nav.is-drawer-ready.is-scrolled .vallem-nav__bar { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); box-shadow: inset 0 -1px 0 var(--vallem-nav-hairline); } /* Open, the bar is the panel's top edge, so it takes the panel's plate. */ .vallem-nav.is-drawer-ready.is-drawer-open .vallem-nav__bar { color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--contrast); box-shadow: none; } .vallem-nav.is-drawer-ready.is-stuck .vallem-nav__bar { border-radius: 0; box-shadow: inset 0 -1px 0 var(--vallem-nav-hairline); } /* Not gated on the drawer being ready. Core used to hide this list itself below 600px and show its own burger instead, and dropping its overlay took that with it. Left until the JS runs, five links wrap into five rows in a bar built for one, so the header lands on top of the page. Without JS there is no menu on a phone, which is what core's overlay also came to. */ .vallem-nav .vallem-nav__menu, .vallem-nav .vallem-nav__cta { display: none; } /* Belt and braces. The nav block ships with Overlay Menu set to "Never", so none of this is rendered, but flipping that back in the editor would put core's burger next to ours and its overlay behind our drawer. */ .vallem-nav .wp-block-navigation__responsive-container-open, .vallem-nav .wp-block-navigation__responsive-container-close { display: none; } .vallem-nav.is-drawer-ready .vallem-nav__burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-end: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .vallem-nav__burger svg { width: 20px; height: 20px; } /* --- The panel ---------------------------------------------------------- */ .vallem-nav__drawer { position: absolute; z-index: 2; inset-inline: 0; top: 100%; /* The shell is a flow group, so core hands every child after the first a block gap. On an absolutely positioned box that is not spacing, it is a 24px drop, and the page showed through the gap under the bar. */ margin: 0; display: flex; flex-direction: column; /* Spelled out, like everywhere else in this file: there is no global reset, and the height below has to include the top border or the panel overhangs the bottom of the screen by it. */ box-sizing: border-box; /* --vallem-nav-top is how far down the screen the bar currently sits, measured in header.js. The panel starts under the bar and ends at the bottom of the viewport, so its height is whatever is left. dvh, not vh: the bar is anchored to the visible viewport, and only dvh agrees with it while a mobile browser's toolbars come and go. */ height: calc( 100dvh - var(--vallem-nav-height-compact) - var(--vallem-nav-top, 0px) ); overflow: hidden; color: var(--wp--preset--color--base); background-color: var(--wp--preset--color--contrast); border-top: 1px solid var(--vallem-drawer-hair); border-end-start-radius: var(--vallem-drawer-radius); border-end-end-radius: var(--vallem-drawer-radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); opacity: 0; translate: 0 -12px; pointer-events: none; /* visibility carries the closed panel's links out of the tab order. The JS also marks the panel inert, which is the better tool, but this is the one that has always worked everywhere. It is in the transition so it holds until the fade has finished rather than cutting it off. */ visibility: hidden; transition: opacity 300ms var(--vallem-ease), translate 300ms var(--vallem-ease), visibility 300ms; } .vallem-nav__drawer:focus { outline: none; } .vallem-nav__drawer.is-open { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; } /* Both levels sit side by side on one track twice the panel's width, so the drill-down is one transform and neither level has to be measured. */ .vallem-nav__drawer-track { display: flex; flex: 1; min-height: 0; width: 200%; transition: transform 300ms ease-out; } .vallem-nav__drawer.is-drilled .vallem-nav__drawer-track { transform: translateX(-50%); } /* Closing resets the drill, and a 300ms slide underneath a 300ms fade shows as a ghost of the first level sweeping back in: the fade is on an ease that is most of the way done by the halfway mark, the slide is not. Nothing is being watched while the panel is shut, so the reset is instant. */ .vallem-nav__drawer:not(.is-open) .vallem-nav__drawer-track { transition: none; } .vallem-nav__drawer-level { display: flex; flex: none; flex-direction: column; width: 50%; min-height: 0; } /* The footer is pinned over this, so the padding is what keeps the last row reachable rather than hidden underneath it. The footer is 88px plus whatever the safe area adds, so the reserve tracks the same inset with a few pixels in hand for a label that wraps to two lines. */ .vallem-nav__drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--wp--preset--spacing--20) calc(112px + env(safe-area-inset-bottom)); } /* --- First level -------------------------------------------------------- */ .vallem-nav__drawer-list, .vallem-nav__drawer-aside, .vallem-nav__drawer-card, .vallem-nav__drawer-links { margin: 0; padding: 0; list-style: none; } .vallem-nav__drawer-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; /* Both, explicitly. A button is border-box by user agent default and an anchor is content-box, so this one min-height was measuring the border box on the rows with a chevron and the content box on the rest: 69px against 105px for the same declaration. */ box-sizing: border-box; min-height: 64px; padding: 20px 0; border: 0; border-block-end: 1px dashed var(--vallem-drawer-line); border-radius: 0; background: none; color: inherit; font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: inherit; text-align: start; text-decoration: none; cursor: pointer; } .vallem-nav__drawer-item svg { flex: none; width: 24px; height: 24px; opacity: 0.55; } .vallem-nav__drawer-item:active { opacity: 0.7; } /* The top line's other links, kept quieter than the menu proper. */ .vallem-nav__drawer-aside { display: flex; flex-direction: column; gap: 16px; margin-block-start: 28px; } /* --- Second level ------------------------------------------------------- */ .vallem-nav__drawer-back { display: flex; flex: none; align-items: center; gap: 8px; padding: 20px var(--wp--preset--spacing--20); border: 0; background: none; color: inherit; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.1; letter-spacing: 0.72px; text-transform: uppercase; cursor: pointer; } .vallem-nav__drawer-back svg { flex: none; width: 24px; height: 24px; } /* The browser's own ring is a blue that belongs to no part of this panel, and the rows sit on a dark plate where it barely reads. Keyboard only: focus moves on its own when you drill in, and a thumb should not be handed a ring for it. */ .vallem-nav__drawer-item:focus-visible, .vallem-nav__drawer-back:focus-visible, .vallem-nav__drawer-row:focus-visible, .vallem-nav__drawer-link:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: -2px; border-radius: 4px; } .vallem-nav__drawer-sub { display: flex; flex-direction: column; gap: 24px; padding-block-start: 4px; } .vallem-nav__drawer-section { display: flex; flex-direction: column; gap: 20px; padding-block-start: 24px; border-block-start: 1px solid var(--vallem-drawer-hair); } .vallem-nav__drawer-section:first-child { padding-block-start: 0; border-block-start: 0; } .vallem-nav__drawer-eyebrow { margin: 0; color: var(--vallem-drawer-muted); font-size: 12px; font-weight: 500; line-height: 1.1; letter-spacing: 0.72px; text-transform: uppercase; } /* A column whose items carry descriptions becomes a card, one whose items are bare titles becomes a plain list. The shape follows the content, so a column written in the editor lands right without anyone tagging it. */ .vallem-nav__drawer-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; background-color: var(--vallem-drawer-fill); border-radius: 8px; } .vallem-nav__drawer-row { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; color: inherit; text-decoration: none; } .vallem-nav__drawer-row:active { background-color: var(--vallem-drawer-press); } .vallem-nav__drawer-row-title { font-size: 16px; font-weight: 500; line-height: 1.5; } .vallem-nav__drawer-row-desc { color: var(--vallem-drawer-muted); font-size: 14px; line-height: 1.5; } .vallem-nav__drawer-links { display: flex; flex-direction: column; gap: 16px; } .vallem-nav__drawer-link { color: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; text-decoration: none; } .vallem-nav__drawer-link:active { opacity: 0.7; } /* --- Footer ------------------------------------------------------------- */ .vallem-nav__drawer-foot { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: 16px var(--wp--preset--spacing--20) max(20px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--vallem-drawer-hair); background-color: var(--wp--preset--color--contrast); border-end-start-radius: var(--vallem-drawer-radius); border-end-end-radius: var(--vallem-drawer-radius); } .vallem-nav .vallem-nav__drawer-foot .vallem-nav__drawer-cta { display: flex; gap: 12px; margin: 0; /* Two buttons side by side on a 390px screen leave about 125px of label each at the ordinary padding, and "Contact opnemen" is wider than that, so it wrapped. Through the token, the way the bar's button is sized, rather than by overriding the padding itself. */ --wp--custom--button-padding-inline: 0.75em; } .vallem-nav__drawer-foot .wp-block-button { flex: 1; } .vallem-nav__drawer-foot .wp-block-button__link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 51px; padding-block: 0; border-radius: 8px; } /* theme.json's button is a dark plate with light text, which is invisible on this panel. Same inversion the bar's button makes over a dark section. The hover has to be written out for the same reason it is written out for the bar's button: overriding the resting colour here outranks theme.json's own :hover, so without this the button would have no hover at all. Outline needs none, its hover is built out of currentcolor and follows the flip. */ .vallem-nav__drawer-foot .wp-block-button:not(.is-style-outline) .wp-block-button__link { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); } .vallem-nav__drawer-foot .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--surface); } .vallem-nav__drawer-foot .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--base); border-color: rgb(255 255 255 / 40%); } } @media (width < 600px) and (prefers-reduced-motion: reduce) { .vallem-nav__drawer, .vallem-nav__drawer-track { transition: none; } } /* ------------------------------------------------------------------------- * * Section rhythm. * * The top and bottom padding of every full-width section, kept here rather than * as spacing attributes in the pattern markup. Patterns are unsynced, so a value * written into a block is copied into the page and a later edit only reaches new * inserts. Here one change reaches every page that already exists. * * Single class each, deliberately. A heavier selector outranks core's * `.has-global-padding > .alignfull` rule and cancels the negative margins that * make a full-width section full width. See the note above .vallem-academy__band. * * The editor's Dimensions panel reads empty for these sections. Setting a value * there still wins, because block spacing serialises to an inline style. * * Three steps are in use, 60, 70 and 80. That is inherited, not designed. * ------------------------------------------------------------------------- */ .vallem-academy { padding-block: var(--wp--preset--spacing--60); padding-inline: var(--wp--preset--spacing--50); } .vallem-compare { padding-block: var(--wp--preset--spacing--80); } .vallem-faq { padding-block: var(--wp--preset--spacing--70); } .vallem-feature-band { padding-block: var(--wp--preset--spacing--70); } /* The inline padding is the page gutter, held here because the outer group is .alignfull and has had core's root padding cancelled by the negative margins that make it full width. Below the content line that gutter is the only thing keeping the plate off the edge of the screen. Same as .vallem-academy. */ .vallem-feature-box { padding-block: var(--wp--preset--spacing--70); padding-inline: var(--wp--preset--spacing--50); } .vallem-feature-duo { padding-block: var(--wp--preset--spacing--70); } .vallem-feature-tabs { padding-block: var(--wp--preset--spacing--70); } /* The media's negative block margin in the hero-split block names this same step by hand, because it has to swallow the bottom padding before it can bleed past the plate. Change the step here and change it there. */ .vallem-hero-split { padding-block: var(--wp--preset--spacing--70); } .vallem-howto { padding-block: var(--wp--preset--spacing--70); } .vallem-intro-split { padding-block: var(--wp--preset--spacing--70); } .vallem-logos { padding-block: var(--wp--preset--spacing--60); } /* The inline padding is the page gutter, for the same reason as .vallem-feature-box: the group is .alignfull, so core's root padding has been cancelled by the negative margins that make it full width, and below the content line this gutter is the only thing keeping the cards off the edge. */ .vallem-partner-cards { padding-block: var(--wp--preset--spacing--70); padding-inline: var(--wp--preset--spacing--50); } .vallem-process { padding-block: var(--wp--preset--spacing--80); } .vallem-proof { padding-block: var(--wp--preset--spacing--80); } .vallem-reassurance { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--80); } .vallem-reviews { padding-block: var(--wp--preset--spacing--70); } .vallem-signup { padding-block: var(--wp--preset--spacing--70); } .vallem-statement { padding-block: var(--wp--preset--spacing--70); } /* Hero, home. One-off section, see patterns/hero-home.php */ /* On the content line. Capped here rather than through wideSize, because wideSize also caps fluid typography and moving it would be a global type change smuggled in as a layout fix. Three classes are needed to outrank core's `.has-global-padding > .alignfull` negative margins, which would otherwise pin this to the left edge. No inline padding. The plate edge is the line, so the gradient starts where every section's text starts. The padding this replaces was 32px below 1440 and zero above it, which made the plate jump 64px wider across that one pixel of viewport. */ .wp-block-group.vallem-hero.alignfull { max-width: var(--vallem-content-line); margin-inline: auto; } .vallem-hero__pill-divider { border-left: 1px solid rgb(255 255 255 / 20%); padding-left: 12px; } .vallem-hero__pill-divider a { color: inherit; text-decoration: none; } .vallem-hero__media { position: relative; overflow: hidden; } .vallem-hero__photo, .vallem-hero__card { margin: 0; } .vallem-hero__photo img { display: block; width: 100%; } /* Overlaps the photo and is clipped by the media group, as in the design. The asset is a transparent composition of three plates that carry their own shadows and rounded corners, so there is no frame here: a border and radius would draw a box around the empty space between the plates. The bottom plate runs past the photo and the media group's overflow cuts it. */ .vallem-hero__card { position: absolute; top: 22%; left: 3%; width: 44%; } .vallem-hero__card img { display: block; width: 100%; height: auto; } /* Mobile. At 390px the root gutter plus the plate's own 40px padding left a 262px column, so the photo rendered 242 by 77. The hero becomes the page here: full bleed, 24px gutter, photo to both edges. Copy goes to 342px, the photo to 370 by 168. The !importants all answer inline styles on the blocks or core's layout rules, neither of which a stylesheet can reach otherwise. */ @media (width <= 781px) { /* Three classes to outrank core's `.has-global-padding > .alignfull`, as above. The radius goes too, it only reads as a card away from the edge. */ .wp-block-group.vallem-hero.alignfull { max-width: none; margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)); } .vallem-hero .vallem-dark-section { border-radius: 0 !important; padding-inline: var(--wp--preset--spacing--30) !important; } /* The pill wraps to four lines under 640px. Published pages have no class on it, so the second selector leans on it being the plate's first child. */ .vallem-hero__pill, .vallem-hero .vallem-dark-section > .wp-block-group:first-child { display: none; } /* A hidden child still counts, so core's block gap would sit above the heading that is now first. */ .vallem-hero .vallem-dark-section > .wp-block-group:first-child + * { margin-block-start: 0; } /* Cancels the padding set above, so the two have to move together. */ .wp-block-group.vallem-hero__media.alignwide { max-width: none; margin-inline: calc(-1 * var(--wp--preset--spacing--30)) !important; } /* 3.15 is a desktop crop, 117px tall once the photo is full width, which leaves the card nothing to sit on. 1.5 gives it the room. */ .vallem-hero__photo img { aspect-ratio: 1.5 !important; } /* Anchored to the bottom instead of 22% down, so the clip at the bottom edge stays the same few pixels whatever the photo height. The clamp is what keeps it honest across the range: 78% is right on a phone and far too much by 781px, where 26rem lands it near the desktop proportion. */ .vallem-hero__card { top: auto; bottom: -3%; left: 4%; width: clamp(15rem, 78%, 26rem); } } /* ------------------------------------------------------------------------- * * Form confirmation. Theme wide. * * After a form goes through, Jetpack replaces it with a summary of what was * submitted. That summary is a sibling of the form inside * .jetpack-contact-form-container rather than a child of it, which is what the * scoping here is for. * * Only the rhythm is touched. Jetpack ships 24px of padding on every row and * 8px between a label and its value, which reads as a list of separate cards * rather than as one receipt. Its own rules sit at two classes, so these carry * three instead of relying on which stylesheet happens to load last. * * The heading above this is set in functions.php, not here: it is an attribute, * not a style. * ------------------------------------------------------------------------- */ .jetpack-contact-form-container .contact-form-submission .jetpack_forms_contact-form-success-summary { padding-block: 12px; } .jetpack-contact-form-container .contact-form-submission .field-name-wrapper { margin-block-end: 2px; } /* ------------------------------------------------------------------------- * * Hero, partners. See patterns/hero-partners.php * * Three children on one grid cell row: the plate, the photo, and the card over * the seam between them. Overlap is done with grid areas rather than absolute * positioning, so the tallest of the three sets the height of the section and * nothing has to be measured. * * 62/38 is a ratio, not the content line, because snapping the seam to the * 1344px line would leave the photo only as wide as the page gutter. * ------------------------------------------------------------------------- */ .vallem-partner-hero { /* Where the copy starts and the card ends: the content line, or the page gutter once the viewport is narrower than it. Measured against 100vw because the plate is 62% of the viewport, not the full width of it, so a percentage here would resolve against the wrong box. */ --vallem-partner-hero-inset: max( var(--wp--preset--spacing--50), calc((100vw - var(--vallem-content-line)) / 2) ); display: grid; grid-template-columns: 62fr 38fr; align-items: stretch; /* Holds its shape before anyone has filled it in, scaled to the window. svh so browser chrome sliding away does not resize it. Dimensions in the editor still wins over this, because block spacing serialises inline. */ min-block-size: 80vh; min-block-size: 80svh; } .vallem-partner-hero__panel { grid-area: 1 / 1 / 2 / 2; display: flex; align-items: center; padding-block: var(--wp--preset--spacing--80); padding-inline: var(--vallem-partner-hero-inset) var(--wp--preset--spacing--60); } /* Short enough to hold the heading to three lines at the top of the scale. */ .vallem-partner-hero__copy { max-width: 34rem; } /* Tinted so the column still reads as a place for a photo while it is empty, rather than as a gap the plate stops short of. */ .vallem-partner-hero__media { grid-area: 1 / 2 / 2 / 3; align-self: stretch; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--surface); } /* Out of flow, so the photo fills the column instead of sizing it. A percentage height cannot resolve while the row is still being measured, so an in-flow img falls back to its own aspect ratio and a portrait shot makes the section as tall as itself. Absolute takes it out of that measurement: the section decides the height, then cover crops to fit. */ .vallem-partner-hero__media { position: relative; display: block; } .vallem-partner-hero__media img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Spans both columns so it can sit over the seam, then is pinned to the content line on the right. The block margin is what keeps air above and below it once the form is taller than the copy. */ .vallem-partner-hero__card { grid-area: 1 / 1 / 2 / 3; align-self: center; justify-self: end; inline-size: min(40rem, calc(100vw - 2 * var(--wp--preset--spacing--50))); margin-block: var(--wp--preset--spacing--60); margin-inline-end: var(--vallem-partner-hero-inset); box-shadow: 0 1px 2px rgb(7 26 58 / 8%), 0 24px 48px rgb(7 26 58 / 16%); } /* ---- The form ----------------------------------------------------------- * * * Shared with the event lead form and with the demo section, which is why every * selector below is scoped to all three section classes rather than to the hero * alone. See the lead capture section further down for the pieces that are only * that form's, and patterns/section-lead-capture.php and * patterns/section-demo-cta.php for what they are. :is() takes the highest * specificity of its arguments and all three are single classes, so adding a * scope changes no weights. * * Styled through Jetpack's own custom properties rather than by out-specifying * its rules. Its field CSS is written with :where(), so it carries no * specificity and there is nothing there to fight. What it does instead is * compute the whole property set from the form block's attributes and write it * as an inline style on a .jetpack-contact-form-container div that it wraps the * form in. An inline style beats any stylesheet rule, so these have to be * declared on an element inside that container. Declared on the card they are * inherited past and silently ignored. * * The alternative is to set the matching attributes on the form block in the * pattern, borderRadius and borderColor and fieldBackgroundColor and the rest, * and let Jetpack write them into that inline style itself. Those attributes * take literal numbers and hex, so none of the theme's presets could be * referenced. That is why the look lives here instead. * * The written rules are keyed on .grunion-field, which Jetpack adds to every * control unconditionally (class-contact-form-field.php, render_field): the * text inputs, the select's wrapper div and the phone field's wrapper alike. * wp-block-jetpack-input looks like the better hook on its own and is not, it * is only added once a field has migrated to its inner blocks, so it is missing * from a freshly inserted pattern. It is matched alongside because the editor * canvas is React, not Jetpack's PHP: grunion-field does not exist there, and * add_editor_style() puts this file in front of both. * * Do not try to frame the