/* Rick van der Wal Dakdekkersbedrijf - theme styling ----------------------------------------------------------------- Source of default.css (compiled by compilerconfig.json, Web Compiler). Edit this file, not default.css. The layout and the mechanics (wrappers, row spacing, columns, header mechanics, mobile menu, form layout, floating labels) are in the core: _Codebase/_Core/Content/Stylesheets/core.scss. This file only holds how things look. Design: Figma "L2601796 Nieuwe website Rick van der Wal", mobile frame; the desktop version is derived from it. Sizes in pixels. Colours as CSS custom properties (--c-*) so they can be reused. Sections: 1. Tokens, fonts, base 2. Header (fixed bar over the hero) 3. Hero 4. Mobile menu 5. Counters under the hero 6. Services (servicesBlock) 7. Row backgrounds (lz-bg--, split left/right) 8. Services carousel (servicesCarouselBlock) 9. Column gap (2/3/4-column rows) 10. References carousel (referencesCarouselBlock) 11. About banner (blockBlock, full-width Banner with a photo) 12. Contact band (contactBlock) 13. Form fields 14. Checklist 15. Footer */ /* =============================================================================================================== 1. Tokens, fonts, base =============================================================================================================== */ /* Open Sans, self-hosted (variable font, weights 400-800). Fonts/ in this theme folder. */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/_Codebase/_Themes/DakdekkersbedrijfRickVanDerWall/Fonts/open-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/_Codebase/_Themes/DakdekkersbedrijfRickVanDerWall/Fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand (from the design) */ --c-blue: #005EAD; --c-blue-dark: #004A88; --c-sky: #91D9F8; --c-ink: #333333; --c-light: #F2F2F2; --c-white: #FFFFFF; --c-black: #000000; --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* The one shadow of the site: buttons, cards, coloured nested rows, the contact photo. The direction of the design's button shadow (down-right), but larger and much fainter, so it gives depth without drawing the eye. Written so it works both as a box-shadow and inside filter: drop-shadow() (no spread). */ --lz-shadow: 16px 16px 40px rgb(0 0 0 / 0.12); /* Height of the logo in the header bar, and of the bar itself: the logo plus 24px above and below it. core.scss uses --lz-header for the mobile menu and the sticky detail column; the hero starts its text below it (section 3), so a bigger logo moves the text down with it instead of into it. The logo grows with the screen: 112px wherever the navigation still fits next to it, down to 64px just above the hamburger breakpoint -- the logo is about 2.41 times as wide as it is high, and the rest of the bar (left gutter, 32px of air, the navigation and the phone icon, measured at ~920px with the navigation's tighter spacing under 1200px) takes about 1010px, so (screen - 1010px) / 2.41 is the highest the logo can be without pushing into the navigation. */ --lz-logo: clamp(64px, calc((100vw - 1010px) / 2.41), 112px); --lz-header: calc(var(--lz-logo) + 48px); /* The site's one vertical rhythm: the gap above every heading, paragraph, list, image and block in a column (h1-h6/p in core.scss and the rest of this file), not core's default 16px. core.scss uses --lz-flow to give a card/tile or nested row that starts a column the same gap as text, and every row's top padding subtracts it again (section 7), so the space above a row's first element stays exactly the padding picked. Change it here and all of that follows. */ --lz-flow: 40px; /* No automatic gap between top-level rows (core: --lz-section): the space around a row is only what its own padding settings say (section 7), plus the flow margin above its first element. Core's own corrections for that gap (coloured bands meeting, "Marge boven") follow this value by themselves. "Marge boven" moves a row up in steps of 40px (40/80/120), the site's own padding ladder, not core's --lz-space steps. */ --lz-row-gap: 0px; --lz-overlap-step: 80px; /* The site's 40/80/120 ladder for a row's padding and column gap settings (core: steps of --lz-space, 60/120/180), and no extra gap between stacked columns: the next column's first element already has the flow margin above it, a gap on top of that gave 72px where the rest of the page has 40. */ --lz-padding-step: 40px; --lz-column-gap-step: 40px; --lz-stack-gap: 0px; } @media (max-width: 1024px) { :root { /* Half the "Marge boven" step once columns start to stack: on a narrower screen there is less white space above a row for a card to slide into, and the full step would push it over the content of the row before. */ --lz-overlap-step: 40px; /* 80px, or less on a narrow phone: next to it only the phone button and the hamburger (2 x 40px + 8px between them, section 2) and the gutters, with at least 24px of air -- (screen - 172px) / 2.44 (the logo's own width : height) is as high as it can be. */ --lz-logo: clamp(56px, calc((100vw - 172px) / 2.44), 80px); --lz-header: calc(var(--lz-logo) + 36px); } } /* And a quarter of it on a phone: the white corner under the hero is small there, so a first row that slides up into the hero (a subpage's intro) ran its heading over the photo; with 20px steps it starts just under the hero instead. */ @media (max-width: 600px) { :root { --lz-overlap-step: 20px; } } body { background: var(--c-white); font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--c-ink); } #main { padding: 0 !important; } /* Running text a step softer than the headings, like the footer's own text: 80% of whatever colour it would have had (ink on a light section, light on a dark one -- the row decides, section 7), so a heading stands out from the text under it. Paragraphs and list items in the page content only, each once (not a paragraph inside a list item again), not in a navigation. Zero specificity, so anything that sets its own colour (buttons, labels, cards) keeps it. */ :where(#main) :where(p, li):where(:not(li *, p *, nav *)) { color: color-mix(in srgb, currentColor 80%, transparent); } /* A section heading is the same size as the "Over Rick van der Wal" banner title (section 11): every section on the page opens at the same weight. Two different sources render one, both covered here: Modules/title.cshtml (.module-title, above services/references/...) and an editor's own H2 typed directly into a Rich Text block (.rich-text h2 -- "Diensten", "Wat kan ik voor uw dak doen?", the section openers on this homepage are actually these, not .module-title). Scoped to .rich-text specifically, not a bare h2, so it doesn't also blow up the small h2s elsewhere (a card's own title, a footer column heading, a FAQ/downloads category). */ .module-title, .rich-text h2 { font-size: 40px; font-weight: 800; line-height: 1.2; } /* A card's own title (blockBlock's Card view, entriesBlock, featuresBlock, timelineBlock, the services/references carousel's own h3) -- the same size everywhere a card renders one, matching the section headings' own weight. */ h3 { font-size: 30px; font-weight: 800; line-height: 1.3; } /* Smaller screens: the headings step down a size (a long word like "Dakdekkersbedrijf" may also break, core.scss). */ @media (max-width: 1024px) { .module-title, .rich-text h2 { font-size: 34px; } h3 { font-size: 26px; } } @media (max-width: 600px) { .module-title, .rich-text h2 { font-size: 30px; } h3 { font-size: 24px; } } a { color: inherit; } :focus-visible { outline: 2px solid var(--c-sky); outline-offset: 3px; } /* Skip link */ .lz-skip { background: var(--c-white); color: var(--c-black); font-weight: 700; } /* Buttons of the design: a blue block with a drop shadow (primary) or an outlined one (secondary). Used by the hero and, later, by forms and blocks. */ .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]), .lz-menu__cta a, .buttons p.button a, p.button a { min-height: 52px; padding: 0 28px; background: var(--c-blue); box-shadow: var(--lz-shadow); font-size: 16px; font-weight: 700; color: var(--c-light); text-decoration: none; display: inline-flex; align-items: center; gap: 14px; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :hover:is(button, input[type=submit]), .lz-menu__cta a:hover, p.button a:hover, .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :focus-visible:is(button, input[type=submit]), .lz-menu__cta a:focus-visible, p.button a:focus-visible { background: var(--c-blue-dark); } .lz-contact p.button a, p.button.more a, .buttons p.link a, #header .phone, #header .navigation nav.primary > ul > li:last-child a { min-height: 52px; padding: 0 28px; background: transparent; box-shadow: none; border: 2px solid currentColor; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 14px; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .lz-contact p.button a:hover, p.button.more a:hover, .buttons p.link a:hover, #header .phone:hover, #header .navigation nav.primary > ul > li:last-child a:hover, .lz-contact p.button a:focus-visible, p.button.more a:focus-visible, .buttons p.link a:focus-visible, #header .phone:focus-visible, #header .navigation nav.primary > ul > li:last-child a:focus-visible { background: rgba(255, 255, 255, 0.12); } /* Every "p.button > a" on the site is the primary button (the one in the hero) unless something more specific says otherwise -- a buttonBlock with no view picked, a blockBlock's link, anything added later is styled out of the box. Deliberately at the lowest specificity that reaches it, so every existing variant still wins over it: .more and the contact band (outlined, %button-secondary), the banner's text link (section 11). On a dark row a blue button would vanish into the blue, so there it is white with dark blue text instead, like the form's submit button (section 13). */ :is(.lz-row, .lz-banner).lz-on-dark p.button:not(.more, .lz-contact p.button) a { background: var(--c-white); color: var(--c-blue-dark); } :is(.lz-row, .lz-banner).lz-on-dark p.button:not(.more, .lz-contact p.button) a:hover, :is(.lz-row, .lz-banner).lz-on-dark p.button:not(.more, .lz-contact p.button) a:focus-visible { background: var(--c-light); } /* A banner's label ("subtitle", optional) sits close against its title, not as a separate paragraph -- core's default gap (20px) reads as too loose for this site. */ .lz-label + .lz-banner__title { margin-top: 8px; } /* =============================================================================================================== 2. Header: the bar with the logo, the navigation and the telephone number. It sits at the top of the hero (not sticky) and stays transparent over the hero photo the whole way, no colour/height change on scroll. =============================================================================================================== */ #header { color: var(--c-light); /* The positioning box of the counters (section 5): the bar is fixed, so the bottom of this box is the bottom of the hero. */ /* Not sticky: sits at the top of the hero (.placeholder, its own positioning parent, is position: relative) and scrolls away with the rest of the page like everything else, instead of staying pinned to the viewport. default.js still adds .is-scrolled on scroll (core mechanic, not worth touching for this), it just no longer does anything here -- no colour, height or shadow change tied to it any more. */ /* Telephone: the icon only (below), as the same small outlined square as the phone button in the contact section (section 12) and as high as the "Offerte aanvragen" button next to it -- a button, not a loose icon. 16px from that button, the same as between the two buttons in the contact section (the bar's own gap is 32px, hence -16px). */ /* On hover/focus both outlined buttons in the bar ("Offerte aanvragen" and the phone) fill in: solid white, blue text. */ } #header > .placeholder { position: relative; } #header > .placeholder > .top { top: 0; right: 0; left: 0; position: absolute; transition: background-color 0.3s, height 0.3s; } #header .logo a { color: inherit; text-decoration: none; } #header .navigation { margin-left: auto; /* A text link gets the sky blue underline of the current page on hover/focus too, faded in; the current page and the section it sits in (aria-current "page" / "true", Views/master.cshtml) keep it. The button at the end sets its own text-decoration and is left out of this. */ /* The last item of the primary menu ("Offerte aanvragen") stands out as a button instead of a plain link -- outlined (%button-secondary), not solid: the header stays transparent over the hero photo the whole way down (no more colour change on scroll), and a solid blue button would all but disappear against that photo; the outline reads regardless. Its own height matches every other button on the site (%button-secondary's own 52px), no smaller custom one here. */ /* A little extra air between the last text link and the button, so the button reads as its own thing. */ } #header .navigation nav ul li { /* Dropdown under the item */ } #header .navigation nav ul li a { padding: 10px 18px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 8px; transition: text-decoration-color 0.2s ease; } #header .navigation nav ul li a:hover, #header .navigation nav ul li a:focus-visible, #header .navigation nav ul li a[aria-current] { text-decoration-color: var(--c-sky); } #header .navigation nav ul li ul { padding: 8px; background: var(--c-white); box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.35); } #header .navigation nav ul li ul a { color: var(--c-ink); white-space: nowrap; } #header .navigation nav.primary > ul > li:last-child { margin-left: 32px; } @media (max-width: 1199px) { #header .navigation nav.primary > ul > li:last-child { margin-left: 20px; } } #header .navigation nav.primary > ul > li:last-child a { padding: 0 20px; font-size: 14px; } #header .navigation li.search input { padding: 0 14px; background: transparent; border: 1px solid var(--c-light); font: inherit; color: var(--c-light); } #header .phone { width: 52px; margin-left: -16px; padding: 0; justify-content: center; gap: 0; color: inherit; white-space: nowrap; } #header .navigation nav.primary > ul > li:last-child a:hover, #header .navigation nav.primary > ul > li:last-child a:focus-visible, #header .phone:hover, #header .phone:focus-visible { background: var(--c-white); border-color: var(--c-white); color: var(--c-blue); } /* The logo (Images/logo.svg, inline) */ svg.lz-lockup, img.lz-lockup { height: var(--lz-logo); width: auto; display: block; } span.lz-lockup { font-size: 22px; font-weight: 700; } /* The phone in the bar is the icon only (the number stays for screen readers, and is written out in full in the footer): written out it adds ~170px to the bar, and next to the 112px logo and the navigation that never fits -- the bar is at most 1320px wide, whatever the screen. */ #header .phone span { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); position: absolute; white-space: nowrap; } /* Just above the hamburger breakpoint the navigation's own links sit a little closer together, so it still fits on one line next to the logo. */ @media (max-width: 1199px) { #header .navigation nav ul li a { padding-inline: 8px; } } /* With the hamburger (tablet, phone): the phone button and the hamburger a size smaller (40px) and closer together, so the logo can be bigger (--lz-logo, section 1). */ @media (max-width: 1024px) { #header > .placeholder > .top .wrapper { gap: 8px; } #header .phone { width: 40px; min-height: 40px; margin-left: auto; } #header .hamburger { width: 40px; height: 40px; } } /* =============================================================================================================== 3. Hero: the blue square of the logo, turned 20.1 degrees, as the background of the hero; the title, text and buttons on the left, the roof photo on the right, standing on the lower point of the square. The shape is a real square (--square wide) with its lower corner at --corner-x, measured from the left edge of the wrapper (1320px, centred), so it sits on the page grid and not on the edge of the screen: on screens wider than the square, white appears left and right of it. The corner is a square corner: the edges leave the point at 20.1 degrees (left) and 69.9 degrees (right), exactly like the squares in the logo. On a 1440px screen the square covers the whole hero except that corner; the point sits 300px from the right edge of the wrapper, so the navigation stays on the blue. Phone (up to 600px): the proportions of the design, with the point at 84% of the width and the edges running to the sides of the screen. The shape (gradient, photo, clip) is its own layer, div.hero-shape (Views/master.cshtml), under the text: the text and the buttons are not clipped, so a button may hang over the edge (a blue block, readable on white). =============================================================================================================== */ .buttons { margin-top: var(--lz-flow); gap: 16px; } #header > .placeholder > .bottom { --wrapper: 1320px; --corner-right: 300px; /* the point, measured from the right edge of the wrapper */ --square: 1340px; /* the side of the turned square: covers a 1440px screen, white appears beside it from about 1600px */ /* x of the point: left edge of the wrapper (0 when the screen is narrower than it) + wrapper - the distance from the right. */ --corner-x: calc(max(0px, (100% - var(--wrapper)) / 2) + var(--wrapper) - var(--corner-right)); /* The height follows the text: the shape's lower-left edge rises from the point P at 20.1 degrees (tan = 0.3659), so at the text's left edge (--text-left) it sits (P's x - that x) x 0.3659 above the hero's bottom. The bottom padding is at least that plus 24px, so the last line of text (and the buttons) always ends above the edge, on the blue -- a longer text pushes the bottom, and with it P and the whole shape, further down instead of running onto the white below the edge. min-height still sets the height for a short text. */ --text-left: calc(max(0px, (100% - var(--wrapper)) / 2) + var(--lz-gutter)); --edge-clear: calc((var(--corner-x) - var(--text-left)) * 0.3659 + var(--edge-gap, 24px)); min-height: 860px; padding: calc(var(--lz-header) + 40px) 0 max(80px, var(--edge-clear)); box-sizing: border-box; color: var(--c-light); display: flex; align-items: flex-start; position: relative; isolation: isolate; /* The square: from the point P the left corner L lies --square away at 20.1 degrees up-left, the right corner R at 69.9 degrees up-right, the top corner T opposite P. Everything above the hero is simply not painted -- the hero is the first thing on the page, so above the hero is above the page itself, nothing to scroll into. Behind it, a plain, complete square in the light blue of the logo -- not .hero-shape's own clip-path (that one is only ever a partial "corner" kite on screen, its own top and bottom corners are too far apart at hero scale to both fit), just a square, turned the same 20.1 degrees. --echo-square is its side; --echo-left/--echo-top position its centre, tied to the hero's own point (--corner-x) so it tracks the hero point at every breakpoint -- change only these three to move or resize it, nothing else here needs touching. */ --echo-square: 1320px; --echo-left: calc(var(--corner-x) - 240px); --echo-bottom: -660px; /* Phone and tablet (up to the hamburger menu, 1024px): the shape of the design; the same corner, the edges run to the sides of the screen (the square is far larger than the screen). The 1340px square of the desktop is too small for a tablet: its top-left edge ran through the screen and left a white corner behind the logo. */ /* Phone: the design's height and type sizes. */ } #header > .placeholder > .bottom::before { content: ""; width: var(--echo-square); height: var(--echo-square); background: var(--c-sky); opacity: 0.25; position: absolute; left: var(--echo-left); bottom: var(--echo-bottom); transform: translate(-50%, -50%) rotate(20.1deg); z-index: -2; } #header > .placeholder > .bottom .hero-shape { inset: 0; background: var(--c-blue); clip-path: polygon(calc(var(--corner-x) - var(--square) * 0.9391) calc(100% - var(--square) * 0.3436), calc(var(--corner-x) - var(--square) * 0.9391 + var(--square) * 0.3436) calc(100% - var(--square) * 0.3436 - var(--square) * 0.9391), calc(var(--corner-x) + var(--square) * 0.3436) calc(100% - var(--square) * 0.9391), var(--corner-x) 100%); overflow: clip; position: absolute; z-index: -1; /* Layers over the photo, for legible text: a dark radial glow behind the text column itself (65%; left, vertically centred, fading out well before the photo's own right side), the design's own two -- black fading out from the top (80%, to about a third of the height) and black fading out from the bottom left (50%, from about 81% up to 31%, tilted 13 degrees) -- and under all of them an even 40% black over the whole photo, so it is toned down everywhere, not only where the gradients reach. Layered first (painted first = underneath the other two, so it only really shows through where they don't already darken things). */ /* The photo fills the whole shape, anchored top right (it is a cut-out of the house with a transparent sky; scaled to cover, the roof runs under the text, as on the phone). On the phone the design proportions (78% high, right). background-size: cover scales against this element's OWN box; that box used to be inset: 0 -- the full width of the hero, not the square (--square) the clip-path actually reveals. On a wide screen that box is far wider than the square, so cover scaled the photo up much more than needed and only a small, heavily zoomed-in sliver of it ever showed through the clip. Boxed to the square itself instead (its bottom-right corner at the same point P the clip-path's own point sits on), so cover has the right box to scale against and the photo keeps its own aspect ratio -- a fixed background-size in both directions would have stretched it. */ } #header > .placeholder > .bottom .hero-shape::after { inset: 0; background: radial-gradient(ellipse 55% 65% at 22% 55%, rgba(0, 0, 0, 0.65) 0%, transparent 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.8) -6%, transparent 31%), linear-gradient(13deg, rgba(0, 0, 0, 0.5) 19%, transparent 69%), linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); position: absolute; content: ""; pointer-events: none; } #header > .placeholder > .bottom .hero-shape::before { width: var(--square); height: var(--square); right: calc(100% - var(--corner-x)); bottom: 0; background: var(--background-image) right top/cover no-repeat; position: absolute; content: ""; } #header > .placeholder > .bottom > .wrapper { position: relative; z-index: 2; } #header > .placeholder > .bottom .placeholder { max-width: 640px; /* The buttons go under each other when they no longer fit beside each other (core keeps them on one line). */ } #header > .placeholder > .bottom .placeholder h1 { margin: 0; font-size: 54px; font-weight: 800; line-height: 1.2; color: var(--c-light); } #header > .placeholder > .bottom .placeholder .lz-label { margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-sky); } #header > .placeholder > .bottom .placeholder .hero-text { max-width: 480px; margin: var(--lz-flow) 0 0; font-size: 20px; line-height: 1.6; } #header > .placeholder > .bottom .placeholder .buttons { flex-wrap: wrap; } @media (max-width: 1024px) { #header > .placeholder > .bottom { --corner-right: 200px; min-height: 760px; } #header > .placeholder > .bottom .placeholder h1 { font-size: 40px; } #header > .placeholder > .bottom .placeholder .hero-text { font-size: 17px; } } @media (max-width: 1024px) { #header > .placeholder > .bottom { --corner-right: 16vw; --corner-x: calc(100% - var(--corner-right)); --square: 3000px; padding-bottom: max(120px, var(--edge-clear)); /* --square is 3000px here only so the clip-path's own corner still lands correctly at this screen ratio (see the section comment above) -- it isn't a sensible photo box size at the same time (3000px wide on a phone screen), so unlike the desktop rule above, the photo box here stays the full width of the hero, reset back to the simpler "full width, bottom-anchored" box the design actually calls for on the phone. */ } #header > .placeholder > .bottom .hero-shape::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 78%; } } @media (max-width: 600px) { #header > .placeholder > .bottom { min-height: 560px; } #header > .placeholder > .bottom .placeholder h1 { font-size: 28px; } #header > .placeholder > .bottom .placeholder .hero-text { font-size: 15px; } #header > .placeholder > .bottom .placeholder .buttons a { min-height: 44px; padding: 0 20px; font-size: 14px; } } /* Subpages: the same square, a point closer to the right and a lower hero; only the title (and a label) above the edge. */ #header > .placeholder > .bottom.lz-hero--compact { --corner-right: 200px; --edge-gap: 56px; /* more air between the title and the shape's edge below it than the homepage's 24px */ min-height: 660px; padding: calc(var(--lz-header) + 32px) 0 max(40px, var(--edge-clear)); /* Phone and tablet: the shape as on the homepage (see there). */ } #header > .placeholder > .bottom.lz-hero--compact .placeholder h1 { font-size: 40px; } @media (max-width: 1024px) { #header > .placeholder > .bottom.lz-hero--compact { --corner-right: 160px; min-height: 520px; } } @media (max-width: 1024px) { #header > .placeholder > .bottom.lz-hero--compact { --corner-right: 16vw; padding-bottom: max(150px, var(--edge-clear)); /* Same reset as the homepage hero's own rule above: the photo box goes back to the full width of the hero instead of the desktop rule's --square-wide box. */ } #header > .placeholder > .bottom.lz-hero--compact .hero-shape::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 78%; } } @media (max-width: 600px) { #header > .placeholder > .bottom.lz-hero--compact { min-height: 0; } #header > .placeholder > .bottom.lz-hero--compact .placeholder h1 { font-size: 28px; } } /* A header photo picked on the page itself (headerImage; Views/master.cshtml adds .has-header-image): an ordinary, full-frame photo, not the theme's own cut-out house. The square photo box above is made for that cut-out (its transparent sky shows the blue behind it, on purpose) and stops at the point P, while the blue shape carries on to the right of P -- with a full photo that part would show as a blue gap. So a picked photo fills the whole shape instead (the hero's own box, which the clip-path then cuts to the shape), centred, at every screen size. After the subpage hero above on purpose: the phone rules there (photo at 78% height) weigh exactly as much as this one. */ #header > .placeholder.has-header-image > .bottom .hero-shape::before { inset: 0; width: auto; height: auto; background-position: center; } /* =============================================================================================================== 4. Mobile menu: a white panel under the header bar (the mechanics are in the core). =============================================================================================================== */ .overlay { background: rgba(0, 0, 0, 0.5); } .nav-menu { background: var(--c-white); /* No underlines anywhere in the panel (the browser's default on a link): hover and the current page are shown by the light blue background and blue text below instead. */ box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45); color: var(--c-ink); } .nav-menu a { text-decoration: none; } .nav-menu .menu-panel .panel-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .nav-menu .menu-panel .panel-header .panel-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .nav-menu .menu-panel li.menu-item a.menu-link { font-size: 17px; font-weight: 600; color: var(--c-ink); } .nav-menu .menu-panel li.menu-item a.menu-link:hover, .nav-menu .menu-panel li.menu-item a.menu-link:focus-visible, .nav-menu .menu-panel li.menu-item a.menu-link[aria-current] { background: rgba(0, 94, 173, 0.08); color: var(--c-blue); } .nav-menu .menu-panel .submenu-arrow:hover, .nav-menu .menu-panel .back-btn:hover { background: rgba(0, 94, 173, 0.08); } .lz-menu__cta a { min-height: 48px; box-shadow: none; } .nav-menu .lz-menu__footer { border-top: 1px solid rgba(0, 0, 0, 0.08); } .nav-menu .lz-menu__footer li i { color: var(--c-blue); } .nav-menu .lz-menu__footer li a { color: var(--c-ink); text-decoration: none; } /* =============================================================================================================== 5. Counters (block list "counters" on the homepage; markup in Views/master.cshtml), in the white corner at the bottom left of the hero under the button, two by two; on the phone under the hero. The numbers count up when they scroll into view (core: counter.js, on .number with data-target). Four across, two by two on the phone, as in the design: the number large and semibold, the label small underneath. =============================================================================================================== */ .hero-counters { /* Desktop and tablet: in the white corner at the bottom left of the hero, under the button. #header > .placeholder is the positioning box; its bottom is the bottom of the hero (the bar above it is fixed) -- kept inside that box (a negative bottom here once pushed the counters below it, into the next section, overlapping its own content; the echo square behind the hero (section 3) reaching up behind the counters here is not the same problem, it's z-index -2, well behind the counters' own 3, so it never actually sits on top of them, just visible past their edges). */ left: 0; right: 0; bottom: 24px; position: absolute; z-index: 3; pointer-events: none; /* Phone and tablet (up to 1024px): under the hero, as in the design (two by two). There the hero has the phone's shape (section 3), whose white corner is too small for them. Still a layer of their own (relative, keeping the z-index above): as a plain block in the flow they were painted under the hero's echo square reaching down (the hero is a positioned layer, a static block is not), which then lay over the figures. */ /* Phone: full width and a little smaller. */ } .hero-counters ul { max-width: 384px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; pointer-events: auto; } .hero-counters li p { margin: 0; } .hero-counters .value { font-size: 40px; font-weight: 800; line-height: 1; color: var(--c-blue-dark); font-variant-numeric: tabular-nums; } .hero-counters .title { margin-top: 10px; font-size: 14px; color: var(--c-ink); } .hero-counters .sub_title { margin-top: 2px; font-size: 13px; color: #666666; } @media (max-width: 1024px) { .hero-counters { padding: 32px 0 0; position: relative; } } @media (max-width: 600px) { .hero-counters ul { max-width: none; gap: 28px 24px; } .hero-counters .value { font-size: 32px; } .hero-counters .title { margin-top: 8px; font-size: 13px; } } /* =============================================================================================================== 6. Services (servicesBlock): the services as a list of links, as on the homepage in the design: one service per line, blue and bold, an arrow on the right, a thin line between them (and above the first and below the last). On hover the arrow moves a little to the right. No margin of its own: like every block in a column it follows what is above it by --lz-flow (core.scss). Markup: Views/Partials/Blockgrid/Components/servicesBlock.cshtml. =============================================================================================================== */ .services-list ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(0, 0, 0, 0.08); } .services-list li { margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .services-list a { padding: 16px 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--c-blue); text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.2s ease; } .services-list a::after { font-family: "Font Awesome 7 Pro"; font-weight: 400; /* regular: a little heavier than the site's other (light) icons, as in the design */ font-size: 16px; content: "\f061"; flex-shrink: 0; /* At rest 4px in from the right edge, so the hover movement below ends exactly on that edge instead of past it. */ transform: translateX(-4px); transition: transform 0.2s ease; } .services-list a:hover, .services-list a:focus-visible { color: var(--c-blue-dark); } .services-list a:hover::after, .services-list a:focus-visible::after { transform: none; } @media (max-width: 600px) { .services-list a { padding: 12px 0; font-size: 13px; } .services-list a::after { font-size: 14px; } } /* Features as a list (featuresBlock, variant "list"): one item per line, all under each other, a small blue icon in front -- a check when the item has none of its own (featuresBlock.cshtml) -- and the title at text size rather than the 30px of a card title, so it reads as a list of points, not a row of cards. */ .lz-services.lz-services--list ul { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lz-services.lz-services--list .lz-service { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; } .lz-services.lz-services--list .lz-service__icon { justify-content: center; align-self: start; padding-top: 3px; font-size: 17px; color: var(--c-blue); } .lz-services.lz-services--list h3 { font-size: 17px; font-weight: 700; line-height: 1.5; } .image { margin-top: var(--lz-flow); } .image picture img { width: 100%; height: auto; display: block; } /* =============================================================================================================== 7. Row backgrounds: a colour picked on a block grid row's "Background colour" (theme node, tab Branding; read by Views/master.cshtml -> ThemeColors.Style, which sets --lz-row-bg / --lz-row-left / --lz-row-right per row) paints the row, both top-level and nested inside a column, plus 40px of breathing room on the left and right (not for a full-width band: .lz-full already aligns its content to the page's gutter via .inner-wrapper, core.scss). Dark colours (IsDark) get light text. =============================================================================================================== */ /* 40px on both sides for any coloured row (solid or split); a full-width band is left out, it already aligns via .inner-wrapper. */ .lz-row:is([class*=lz-bg--], [class*=lz-bg-left--], [class*=lz-bg-right--]):not(.lz-full) { padding-inline: 40px; } .lz-row[class*=lz-bg--] { background: var(--lz-row-bg); color: var(--c-ink); } /* Light blue stays the house colour in Branding, but paints as a pale tint of it: 25% of the colour over white, the same way the square behind the hero is sky at 25% opacity (section 3). Mixed rather than an actual opacity, so the row stays opaque. Every place ThemeColors hands out that colour for a row (solid, left/right half) gets the same tint, or the halves would no longer match the band. */ .lz-row.lz-bg--light-blue, .lz-row.lz-bg-left--light-blue, .lz-row.lz-bg-right--light-blue { --lz-light-blue-tint: color-mix(in srgb, var(--lz-color-light-blue) 25%, var(--c-white)); } .lz-row.lz-bg--light-blue { --lz-row-bg: var(--lz-light-blue-tint); } .lz-row.lz-bg-left--light-blue { --lz-row-left: var(--lz-light-blue-tint); } .lz-row.lz-bg-right--light-blue { --lz-row-right: var(--lz-light-blue-tint); } .lz-row.lz-on-dark { color: var(--c-light); } /* A Block (blockBlock) with its own "Background colour" setting (blockBlock.cshtml): painted like a row, with the same 40px on the left and right, light blue as the same tint, light text on a dark colour. */ :is(.lz-banner, .lz-card-block)[class*=lz-bg--] { background: var(--lz-row-bg); color: var(--c-ink); } :is(.lz-banner, .lz-card-block).lz-bg--light-blue { --lz-row-bg: color-mix(in srgb, var(--lz-color-light-blue) 25%, var(--c-white)); } :is(.lz-banner, .lz-card-block).lz-bg--light-blue :where(h1, h2, h3, h4, h5, h6) { color: var(--c-blue-dark); } :is(.lz-banner, .lz-card-block).lz-on-dark { color: var(--c-light); } .lz-card-block { box-shadow: var(--lz-shadow); } .lz-card-block .lz-card-block__content { padding: 0 40px 40px 40px; } .lz-card-block .lz-card-block__content .rich-text ul { list-style: none; margin: var(--lz-flow) 0 0; padding: 0; } .lz-card-block .lz-card-block__content .rich-text ul li { position: relative; padding-left: 28px; } .lz-card-block .lz-card-block__content .rich-text ul li::before { content: "\f00c"; font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--c-blue-dark); } /* A nested row with its own colour (a white card in a blue band, say) is a panel lying on top of its row: the site's one shadow (--lz-shadow, section 1), like the buttons and the carousel cards. */ .lz-row.nested[class*=lz-bg--] { box-shadow: var(--lz-shadow); } /* Headings on a light blue row in dark blue; body text stays ink. Not inside anything with its own background in that row -- a nested coloured row (a white card: black headings, as anywhere on white) or the banner's white text panel -- there they just take that box's own text colour again. :where() keeps this at the row's own specificity, so a component that sets its own heading colour (a carousel card's white title on its photo, section 8) still wins. */ .lz-row.lz-bg--light-blue :where(h1, h2, h3, h4, h5, h6) { color: var(--c-blue-dark); } .lz-row.lz-bg--light-blue :where(.lz-row[class*=lz-bg--]:not(.lz-bg--light-blue), .lz-banner__text) :where(h1, h2, h3, h4, h5, h6) { color: inherit; } /* Every dark blue or light blue row gets the same square motif as the hero's own corner and its echo (section 3) -- the same 20.1 degree turn, big and very faint, on the left: atmosphere, not something to notice. White on the dark row, dark blue on the light one, so it shows against either. Painted as a background image of the row itself (an SVG of the already-turned square: its bounding box is side x (cos + sin) = 1.2827 x side, so 1154px here for a 900px square), not as a pseudo-element: a background is cropped at the row's own edge for free, with no overflow: hidden on the row (which clipped the banner photo that bleeds up past its row, section 11) and no stacking-context/z-index games to keep it above the row's own colour. */ .lz-row:is(.lz-bg--dark-blue, .lz-bg--light-blue) { background-repeat: no-repeat; background-size: 1154px 1154px; background-position: -487px 50%; } .lz-row.lz-bg--dark-blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='26.79,0 100,26.79 73.21,100 0,73.21' fill='%23fff' fill-opacity='.06'/%3E%3C/svg%3E"); } .lz-row.lz-bg--light-blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='26.79,0 100,26.79 73.21,100 0,73.21' fill='%23004A88' fill-opacity='.04'/%3E%3C/svg%3E"); } /* Not on a row holding a banner with a photo: that one has its own square, behind the person (section 11). And only on top-level rows: a nested row (a coloured panel inside a column) is just its colour. */ .lz-row:is(.lz-bg--dark-blue, .lz-bg--light-blue):has(.lz-banner--image), .lz-row.nested:is(.lz-bg--dark-blue, .lz-bg--light-blue) { background-image: none; } /* A 50/50 (or 33/67, 67/33) row: each half its own colour, painted as a gradient on the row so there is no seam between the two column areas. The split matches the layout's own column ratio; anything else falls back to 50/50. */ .lz-row:is([class*=lz-bg-left--], [class*=lz-bg-right--]) { --lz-split: 50%; background: linear-gradient(to right, var(--lz-row-left, transparent) var(--lz-split), var(--lz-row-right, transparent) var(--lz-split)); } .lz-row:has(> .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_4_8]) { --lz-split: 33.333%; } .lz-row:has(> .umb-block-grid__layout-container > [data-content-element-type-alias=twoColumns_8_4]) { --lz-split: 66.667%; } .lz-row.lz-on-dark-left .umb-block-grid__area-container > .umb-block-grid__area:first-child { color: var(--c-light); } .lz-row.lz-on-dark-right .umb-block-grid__area-container > .umb-block-grid__area:last-child { color: var(--c-light); } /* A row's top and bottom padding: core.scss, in steps of --lz-padding-step (40px here, section 1), so 40/80/120px above the first heading or paragraph and below the last element. */ /* =============================================================================================================== 8. Services carousel (servicesCarouselBlock): the same automatically-read services as section 6, as cards in a Glide slider (mechanics: core.scss resets Glide's own theme CSS to plain, unstyled arrows; slider.js auto-mounts any .glide and reads data-settings-numberofslides for how many cards show at once, 3 here, dropping to 1 under 576px). A card is the photo, aspect-ratio 3/4; on hover the title fades and slides in over it on a turned dark blue square (below). A service without an image (the "service" document type doesn't have one yet) falls back to a plain blue card with the title always shown, no hover change. The references carousel (section 10) reuses these same .services-carousel__* classes on its own cards, so this whole block is scoped to both .services-carousel and .references-carousel, not just the former. =============================================================================================================== */ /* Only the references carousel (section 10) lets neighbouring cards peek past the wrapper on both sides -- the glide container itself stays the wrapper's own width (Glide sizes its 2 visible slides off that, so they stay lined up with the rest of the page), it's only the track's own clipping that's turned off, so a slide sliding in or out can render beyond the track's own box instead of being cut off at it. html already clips horizontal overflow site-wide (core.scss, "overflow-x: clip"), so this never causes a scrollbar, only a cut at the screen edge itself, a plain hard cut, no fade. The services carousel (the one under "Wat kan ik voor uw dak doen?") stays fully clipped, no peek. */ .references-carousel .glide__track { overflow: visible; } /* The services cards are portrait, the references ones landscape. */ .services-carousel .services-carousel__card, .services-grid .services-carousel__card { aspect-ratio: 3/4; } .references-carousel .services-carousel__card, .references-grid .services-carousel__card { aspect-ratio: 4/3; } /* The same cards outside a carousel, as a plain grid: the services overview (servicesBlock on the "Diensten" page, three to a row like the carousel shows them) and the references block (referencesBlock, two to a row, like its carousel). Both drop to two, then one, on smaller screens. */ .services-grid, .references-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: var(--lz-flow) 0 0; padding: 0; list-style: none; } .services-grid > li, .references-grid > li { margin: 0; padding: 0; } @media (max-width: 900px) { .services-grid, .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .services-grid, .references-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } } .references-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 600px) { .references-grid { grid-template-columns: minmax(0, 1fr); } } .services-carousel, .references-carousel, .services-grid, .references-grid { /* A soft shadow under every card, so it reads as sitting a little in front of the page rather than flat on it -- part of the "more body" pass discussed alongside the square motif below. */ /* On hover/focus the photo zooms in a little, slowly, together with the text sliding in; the card's own overflow: hidden keeps the enlarged photo inside the card. */ /* A reference card the other way round: the photo sits a little zoomed in at rest and zooms out to the whole photo on hover/focus, as the text comes in -- a reference is about the result, so hovering shows all of it. */ /* Without a photo, the card is this colour by itself. */ /* At rest the card is just the photo. On hover/focus the text block -- title, and a reference's summary -- fades in and slides up from below, with the square motif (the hero's own 20.1 degree turn) as its backdrop: the square is the block's own ::before, so square and text move as one piece. The square is centred on the text and 115% of the block's width, which keeps the turned square around the whole text (checked for a one-line title and for a title plus summary); its lower part runs off the card's bottom/left edge and is cropped there (the card's own overflow: hidden), the same corner look as the hero. The block is z-index 2 and so its own stacking context: the -1 square paints behind the text, above the photo. */ /* Always shown where there is nothing to hover (touch screens), and on a card without a photo (nothing else there). */ /* A service card is a link, and its title is the only thing saying where to: here the square and title are always there, at rest in their normal place (32px from the bottom, the same as from the left), and slide straight up a little further on hover/focus -- the same movement, only the fade is gone. */ /* A reference card's summary (a service card never has one), under the title in the same block. Always exactly 4 lines high: a longer one is cut off after 4 (with an ellipsis), so it never outgrows the square or covers the whole photo; a shorter one still takes the room of 4, so every card is the same height and the titles line up. The title is cut off after 3. */ } .services-carousel .glide__slide, .references-carousel .glide__slide, .services-grid .glide__slide, .references-grid .glide__slide { height: auto; } .services-carousel .services-carousel__card, .references-carousel .services-carousel__card, .services-grid .services-carousel__card, .references-grid .services-carousel__card { position: relative; overflow: hidden; display: block; color: var(--c-light); text-decoration: none; box-sizing: border-box; box-shadow: var(--lz-shadow); } .services-carousel .services-carousel__image, .references-carousel .services-carousel__image, .services-grid .services-carousel__image, .references-grid .services-carousel__image { inset: 0; position: absolute; transition: transform 0.6s ease; } .services-carousel .services-carousel__image img, .services-carousel .services-carousel__image picture, .references-carousel .services-carousel__image img, .references-carousel .services-carousel__image picture, .services-grid .services-carousel__image img, .services-grid .services-carousel__image picture, .references-grid .services-carousel__image img, .references-grid .services-carousel__image picture { width: 100%; height: 100%; object-fit: cover; display: block; } .services-carousel .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image, .references-carousel .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image, .services-grid .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image, .references-grid .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image { transform: scale(1.06); } :is(.references-carousel, .references-grid) .services-carousel__image { transform: scale(1.06); } :is(.references-carousel, .references-grid) .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image { transform: none; } .services-carousel .services-carousel__card--no-image, .references-carousel .services-carousel__card--no-image, .services-grid .services-carousel__card--no-image, .references-grid .services-carousel__card--no-image { background: var(--c-blue); } .services-carousel .services-carousel__body, .references-carousel .services-carousel__body, .services-grid .services-carousel__body, .references-grid .services-carousel__body { position: absolute; z-index: 2; left: 0; bottom: 0; /* No fixed width: absolutely positioned with only "left" set, the block shrinks to its own text, so the square (a percentage of this width) hugs a short title instead of always spanning 440px of photo. The cap is where longer text starts wrapping instead. */ max-width: min(100%, 440px); box-sizing: border-box; padding: 32px; opacity: 0; transform: translateY(32px); transition: opacity 0.3s ease, transform 0.3s ease; } .services-carousel .services-carousel__body::before, .references-carousel .services-carousel__body::before, .services-grid .services-carousel__body::before, .references-grid .services-carousel__body::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 115%; aspect-ratio: 1; background: var(--c-blue-dark); opacity: 0.9; transform: translate(-50%, -50%) rotate(20.1deg); } .services-carousel .services-carousel__card:hover .services-carousel__body, .services-carousel .services-carousel__card:focus-visible .services-carousel__body, .references-carousel .services-carousel__card:hover .services-carousel__body, .references-carousel .services-carousel__card:focus-visible .services-carousel__body, .services-grid .services-carousel__card:hover .services-carousel__body, .services-grid .services-carousel__card:focus-visible .services-carousel__body, .references-grid .services-carousel__card:hover .services-carousel__body, .references-grid .services-carousel__card:focus-visible .services-carousel__body { opacity: 1; transform: none; } @media (hover: none) { .services-carousel .services-carousel__body, .references-carousel .services-carousel__body, .services-grid .services-carousel__body, .references-grid .services-carousel__body { opacity: 1; transform: none; } } .services-carousel .services-carousel__card--no-image .services-carousel__body, .references-carousel .services-carousel__card--no-image .services-carousel__body, .services-grid .services-carousel__card--no-image .services-carousel__body, .references-grid .services-carousel__card--no-image .services-carousel__body { opacity: 1; transform: none; } :is(.services-carousel, .services-grid) { /* On a (portrait) service card one fixed, narrower width, so every card has the same square and it covers well under half the photo: a long service name wraps onto a second line instead of widening it. A step smaller than a reference's: square, padding and title, so the photo shows more. */ /* Card + title: one class more than the shared title rule further down, which would otherwise win. */ } :is(.services-carousel, .services-grid) .services-carousel__body { width: min(100%, 220px); padding: 24px; } :is(.services-carousel, .services-grid) .services-carousel__card .services-carousel__title { font-size: 20px; } @media (max-width: 600px) { :is(.services-carousel, .services-grid) .services-carousel__body { width: min(100%, 190px); padding: 20px; } :is(.services-carousel, .services-grid) .services-carousel__card .services-carousel__title { font-size: 18px; } } :is(.services-carousel, .services-grid) .services-carousel__card:not(.services-carousel__card--no-image) .services-carousel__body { opacity: 1; transform: none; } :is(.services-carousel, .services-grid) .services-carousel__card:not(.services-carousel__card--no-image):is(:hover, :focus-visible) .services-carousel__body { transform: translateY(-16px); } .services-carousel .services-carousel__title, .references-carousel .services-carousel__title, .services-grid .services-carousel__title, .references-grid .services-carousel__title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.3; color: var(--c-light); } .services-carousel .services-carousel__summary, .references-carousel .services-carousel__summary, .services-grid .services-carousel__summary, .references-grid .services-carousel__summary { --summary-lines: 4; margin: 8px 0 0; font-size: 16px; line-height: 1.5; min-height: calc(1.5em * var(--summary-lines)); color: var(--c-light); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--summary-lines); line-clamp: var(--summary-lines); overflow: hidden; } .services-carousel .services-carousel__title, .references-carousel .services-carousel__title, .services-grid .services-carousel__title, .references-grid .services-carousel__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } @media (max-width: 600px) { .services-carousel .services-carousel__body, .references-carousel .services-carousel__body, .services-grid .services-carousel__body, .references-grid .services-carousel__body { padding: 24px; } .services-carousel .services-carousel__title, .references-carousel .services-carousel__title, .services-grid .services-carousel__title, .references-grid .services-carousel__title { font-size: 22px; } } /* A reference card where there is nothing to hover (a touch screen) or no room (a phone): the text can't wait for a hover there, and laid over the photo all the time -- title, the turned square and up to four lines of summary -- it covered practically the whole photo. So the text goes under the photo instead: the photo whole (4:3, not zoomed), below it a dark blue panel (the square's own colour) with the title and summary. The card grows with its text. */ @media (hover: none), (max-width: 600px) { :is(.references-carousel, .references-grid) .services-carousel__card { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--c-blue-dark); } :is(.references-carousel, .references-grid) .services-carousel__image { position: relative; inset: auto; aspect-ratio: 4/3; transform: none; } :is(.references-carousel, .references-grid) .services-carousel__card:is(:hover, :focus-visible) .services-carousel__image { transform: none; } :is(.references-carousel, .references-grid) .services-carousel__body { position: static; flex: 1; width: auto; max-width: none; padding: 24px; opacity: 1; transform: none; } :is(.references-carousel, .references-grid) .services-carousel__body::before { display: none; } } /* Under the carousel: the bullets (one per slide, current one highlighted) on the left, the arrows on the right, same line -- .glide__footer wraps both. The arrows: a plain square, blue outline, chevron icon, never over the cards (core.scss's own default position -- a plain top-right pair -- would sit on top of the cards' own top edge). core.scss's own rule is ".wrapper .glide .glide__arrows" (3 classes); matching that same specificity here, not just ".services-carousel .glide__arrows" (2), is what actually makes this win. */ .services-carousel .glide__footer, .references-carousel .glide__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--lz-flow); } .wrapper .services-carousel .glide__arrows, .wrapper .references-carousel .glide__arrows { position: static; margin-left: auto; } /* Glide's own bullets (glide.theme.min.css) are built for a dark full-bleed hero slider -- absolutely positioned, bottom-centre, white on translucent. Reset to a plain inline row of dots, in the site's own blue, the current one an elongated pill instead of just a colour change, so it reads at this small a size. */ .services-carousel .glide__bullets, .references-carousel .glide__bullets { position: static; transform: none; display: flex; align-items: center; gap: 8px; } .services-carousel .glide__bullet, .references-carousel .glide__bullet { width: 8px; height: 8px; margin: 0; padding: 0; border: none; border-radius: 4px; background: rgba(0, 94, 173, 0.25); box-shadow: none; cursor: pointer; transition: background-color 0.2s ease, width 0.2s ease; /* One bullet per slide (the carousel views): with 2 cards in view the last slide is never the first one shown, so its bullet has no position to stand for. Below 577px Glide shows 1 card at a time (core slider.js, breakpoint 576) and every bullet is a position. */ } .services-carousel .glide__bullet.glide__bullet--active, .references-carousel .glide__bullet.glide__bullet--active { width: 24px; background: var(--c-blue); } @media (min-width: 577px) { .services-carousel .glide__bullet:last-child, .references-carousel .glide__bullet:last-child { display: none; } } .services-carousel .glide__arrow, .references-carousel .glide__arrow { width: 44px; height: 44px; border: 1px solid var(--c-blue); font-size: 0; color: var(--c-blue); cursor: pointer; } .services-carousel .glide__arrow::after, .references-carousel .glide__arrow::after { font-family: "Font Awesome 7 Pro"; font-weight: 300; font-size: 16px; } .services-carousel .glide__arrow.glide__arrow--left::after, .references-carousel .glide__arrow.glide__arrow--left::after { content: "\f104"; } .services-carousel .glide__arrow.glide__arrow--right::after, .references-carousel .glide__arrow.glide__arrow--right::after { content: "\f105"; } .services-carousel .glide__arrow:hover, .services-carousel .glide__arrow:focus-visible, .references-carousel .glide__arrow:hover, .references-carousel .glide__arrow:focus-visible { background: var(--c-blue); color: var(--c-light); } .services-carousel .glide__arrow.glide__arrow--disabled, .references-carousel .glide__arrow.glide__arrow--disabled { opacity: 0.35; cursor: default; } .services-carousel .glide__arrow.glide__arrow--disabled:hover, .references-carousel .glide__arrow.glide__arrow--disabled:hover { background: transparent; color: var(--c-blue); } /* =============================================================================================================== 10. References carousel (referencesCarouselBlock): the cases of the site (document type "reference", found site-wide, same as core's referencesBlock) as cards in a Glide slider. The card itself is the same photo-and-title-overlay card as the services carousel (section 8, .services-carousel__card and friends) -- referencesCarouselBlock's markup uses those same classes, so there is nothing to style again here. =============================================================================================================== */ /* The "view all" link under a teaser carousel (servicesCarouselBlock, referencesCarouselBlock, off the overview page). */ p.button.more a { color: var(--c-blue); border-color: var(--c-blue); } p.button.more a:hover, p.button.more a:focus-visible { background: var(--c-blue); color: var(--c-light); } /* =============================================================================================================== 9. Column gap: nothing here any more. The row's "Column gap" setting and the gap between stacked columns are core mechanics (core.scss); this site only sets their sizes, --lz-column-gap-step and --lz-stack-gap (section 1). =============================================================================================================== */ /* =============================================================================================================== 11. About banner: the existing Block (blockBlock, "Banner" view with a photo) gets this look once its row is set to full width -- the body text in a white panel for contrast against the photo, the title directly on the row's own background. No new fields: pick "Banner" with an image, make the row full width, and set its own background colour (the row's "Background colour" setting, section 7) and its own top/bottom padding (the row's own padding setting) -- the block itself no longer hard-codes a colour or padding of its own. =============================================================================================================== */ .lz-row.lz-full .lz-banner--image { align-items: stretch; /* Core's own default split for a banner with a photo is roughly 55/45 (grid-template-columns: 6fr 5fr); here, about a third for the photo, two thirds for the text. Only side by side: once core stacks the banner ($bp-stack), it stays one column. */ /* The body text and, inside the same white panel below it, the link (blockBlock.cshtml nests the two together when there is text) -- one white panel, not two same-coloured elements next to each other. The panel gets its own breathing room from the title above it and from whatever comes after it below. The link itself is plain text with a chevron, not a button -- the white panel already reads as the call to action. */ /* Smaller than the full row height, with a bit of air above it -- the same 32px as the text panel above, minus the flow margin already sitting above everything else in the column (--lz-flow; this site's own margin-minus-flow convention, see the row's own padding-top ladder in section 7); a placeholder value until the actual photo of Rick is in. --photo-bleed drives both margin-top and height together so the bottom always stays flush with the row, whatever the top offset (positive gap above the photo, or negative so the photo overflows the section). */ --photo-bleed: calc(32px - var(--lz-flow)); /* Where the photo has to be cropped to fill its box (next to the text), it is cropped from the top down, not around the middle: it's a person, and the head has to stay. */ /* Stacked (tablet upright, phone): the photo at its own proportions, not cropped into core's landscape 4:3 box -- that cut a portrait off at the top and bottom -- no wider than 240px and centred, so a portrait doesn't run a whole screen high and the square behind it (below) shows around it. Right under the white text panel (which already has its own 32px below it). */ } @media (min-width: 901px) { .lz-row.lz-full .lz-banner--image { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } .lz-row.lz-full .lz-banner--image .lz-banner__title { font-size: 40px; font-weight: 800; line-height: 1.2; } @media (max-width: 1024px) { .lz-row.lz-full .lz-banner--image .lz-banner__title { font-size: 34px; } } @media (max-width: 600px) { .lz-row.lz-full .lz-banner--image .lz-banner__title { font-size: 30px; } } .lz-row.lz-full .lz-banner--image .lz-banner__text { background: var(--c-white); color: var(--c-ink); margin: 32px 0; padding: 18px 32px 32px; max-width: none; } .lz-row.lz-full .lz-banner--image .lz-banner__text p.button { margin: var(--lz-flow) 0 0; } .lz-row.lz-full .lz-banner--image p.button a { display: inline-flex; align-items: center; min-height: 0; padding: 0; background: none; box-shadow: none; gap: 6px; font-size: 16px; font-weight: 700; color: var(--c-blue-dark); text-decoration: none; transition: color 0.2s ease; } .lz-row.lz-full .lz-banner--image p.button a::after { font-family: "Font Awesome 7 Pro"; font-weight: 300; font-size: 14px; content: "\f105"; transition: transform 0.2s ease; } .lz-row.lz-full .lz-banner--image p.button a:hover, .lz-row.lz-full .lz-banner--image p.button a:focus-visible { background: none; color: var(--c-blue); } .lz-row.lz-full .lz-banner--image p.button a:hover::after, .lz-row.lz-full .lz-banner--image p.button a:focus-visible::after { transform: translateX(4px); } .lz-row.lz-full .lz-banner--image .lz-banner__image { aspect-ratio: auto; height: calc(100% - var(--photo-bleed)); margin-top: var(--photo-bleed); } .lz-row.lz-full .lz-banner--image .lz-banner__image img { object-position: center top; } @media (max-width: 900px) { .lz-row.lz-full .lz-banner--image .lz-banner__image { aspect-ratio: auto; width: 100%; max-width: 240px; height: auto; margin: 0 auto; } .lz-row.lz-full .lz-banner--image .lz-banner__image img { height: auto; } } /* With a coloured background AND a padding-top step, the photo breaks out of the section instead: it bleeds up past the row's own top padding by that step (this site's own 40/80/120 padding ladder, not the smaller value the row's padding-top actually renders at, section 7) -- a deliberate "photo overflows the colour band" look. Only at the two-column width; stacked, the photo is full width under the text and a negative margin would just overlap it. */ @media (min-width: 901px) { .lz-row.lz-full[class*=lz-bg--].padding-top-enkel .lz-banner--image { --photo-bleed: calc(var(--lz-padding-step) * -1); } .lz-row.lz-full[class*=lz-bg--].padding-top-dubbel .lz-banner--image { --photo-bleed: calc(var(--lz-padding-step) * -2); } .lz-row.lz-full[class*=lz-bg--].padding-top-drievoudig .lz-banner--image { --photo-bleed: calc(var(--lz-padding-step) * -3); } } /* The square motif behind the person: a turned square, like the others, its centre about in the middle of the photo so it sits mostly behind the person and shows on both sides. Drawn on the ROW (a ::before covering exactly the row's box, painted as a background image), not on the banner itself: a background never paints outside its own box, so the square is cropped exactly at the band while the photo -- in the banner, a different box -- still bleeds up past it. Side by side: the row is edge to edge (100vw, core .lz-full), so the photo's right edge sits the wrapper's side margin plus the gutter in from the row's right edge; the image's right edge is 225px right of that (half the turned square's 770px bounding box minus the 160px its centre sits left of the photo's right edge). Stacked (phone, tablet upright): the photo is centred at the bottom of the row, so the square is too, a smaller one, its centre about halfway up the photo. z-index: 0 makes the row a stacking context, so the -1 square paints above the row's own colour and below its content. The square is a mask over a plain colour rather than a coloured SVG, so its colour can be a CSS variable: on a light blue band it is exactly the faint square on the left of that band (section 7, dark blue at 4%), so the two read as one motif. On a dark band, faint white; on anything else, dark blue at 20%. */ .lz-row.lz-full[class*=lz-bg--]:has(.lz-banner--image) { --banner-square: var(--c-blue-dark); --banner-square-opacity: 0.2; --banner-square-position: right calc(max(0px, (100vw - var(--lz-wrapper)) / 2) + var(--lz-gutter) - 225px) center; --banner-square-size: 770px; position: relative; z-index: 0; } @media (max-width: 900px) { .lz-row.lz-full[class*=lz-bg--]:has(.lz-banner--image) { --banner-square-position: left 50% bottom -50px; --banner-square-size: 380px; } } .lz-row.lz-full[class*=lz-bg--]:has(.lz-banner--image).lz-bg--light-blue { --banner-square-opacity: 0.04; } .lz-row.lz-full[class*=lz-bg--]:has(.lz-banner--image).lz-on-dark { --banner-square: var(--c-white); --banner-square-opacity: 0.1; } .lz-row.lz-full[class*=lz-bg--]:has(.lz-banner--image)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--banner-square); opacity: var(--banner-square-opacity); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='26.79,0 100,26.79 73.21,100 0,73.21' fill='%23000'/%3E%3C/svg%3E") no-repeat var(--banner-square-position)/var(--banner-square-size) var(--banner-square-size); pointer-events: none; } /* The same banner without its photo (for now): nothing then stands on the band's bottom edge, and the text ran right into it. The flow margin below the copy as well, so the band ends with the same air as above the text. Only for a banner without a photo (and not a heading-only one), so it goes away by itself once the photo is picked again. */ .lz-row.lz-full .lz-banner:not(.lz-banner--image, .lz-banner--heading) .lz-banner__copy { margin-bottom: var(--lz-flow); } /* =============================================================================================================== 12. Contact (contactBlock): the call-to-action content, usually the last block on a page. The band around it is the row it sits in (full width, a background colour, its own padding -- section 7), so its colour, text colour and square motif come from there. Both buttons are outlined (in the row's own text colour), not the site's usual solid primary -- a solid blue button would vanish on the design's blue band. A "tel:" link (Views/Partials/Blockgrid/Components/contactBlock.cshtml) becomes the small square icon-only one. =============================================================================================================== */ .lz-contact { /* The optional free-standing photo (contactBlock "image", a cut-out with a transparent background): the right half of the page's content width, standing on the ROW's bottom edge and rising 80px above its top, so it reads as an object in front of the band rather than a picture inside it -- the same "breaks out of the band" idea as the banner photo (section 11). contain + bottom right: the photo keeps its own proportions and is never cropped. The drop shadow follows the cut-out's own outline, not a box. The text keeps to the left half next to it. Hidden once the page stacks: next to a one-column text there is no room for it. */ } .lz-contact h2 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.2; max-width: 20ch; } .lz-contact p { margin-top: var(--lz-flow); max-width: 480px; font-size: 17px; line-height: 1.6; } .lz-contact .buttons { margin-top: var(--lz-flow); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .lz-contact .buttons p { margin: 0; } .lz-contact p.button.lz-contact__phone a { width: 52px; padding: 0; justify-content: center; gap: 0; } .lz-contact p.button.lz-contact__phone a span { display: none; } .lz-contact.lz-contact--image .lz-contact__copy { max-width: 50%; } .lz-contact .lz-contact__image { position: absolute; right: calc(max(0px, (100% - var(--lz-wrapper)) / 2) + var(--lz-gutter)); top: -80px; bottom: 0; width: calc((min(100%, var(--lz-wrapper)) - 2 * var(--lz-gutter)) * 0.48); pointer-events: none; } .lz-contact .lz-contact__image img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; display: block; filter: drop-shadow(var(--lz-shadow)); } @media (max-width: 900px) { .lz-contact.lz-contact--image .lz-contact__copy { max-width: none; } .lz-contact .lz-contact__image { display: none; } } @media (max-width: 600px) { .lz-contact h2 { font-size: 28px; } } /* The photo is positioned against the ROW (the band), not against the column it sits in: the block grid's own wrappers between the two (core: position: relative on each) are taken out of the way, in a row holding such a photo only. */ .lz-row:has(> .inner-wrapper .lz-contact__image, > .umb-block-grid__layout-container .lz-contact__image) :is(.umb-block-grid__layout-container, .umb-block-grid__layout-item, .umb-block-grid__area-container, .umb-block-grid__area) { position: static; } /* =============================================================================================================== 13. Form fields: no border, filled instead -- light blue on a plain (white) section, white on a coloured row (the row's own background colour, section 7), so a field always reads against whatever section it sits in. --lz-field-bg is core's own hook (core.scss, floating labels): it already paints the label's own little patch over the border line, this just also paints the field itself and picks the colour. Fields sit close together (12px), much tighter than the site's flow margin between blocks (--lz-flow): a form reads as one unit, not a stack of separate elements. =============================================================================================================== */ .umbraco-forms-form { --lz-field-bg: var(--c-sky); /* --lz-field-bg is always a light colour (sky blue or white), so the field's own text and its floating label (which sits on a little patch of that same colour, core.scss) need ink, always -- not the row's own text colour, which switches to light on a dark row (section 7) and would otherwise put light text on this light background, unreadable. */ } .umbraco-forms-form .umbraco-forms-field { margin-top: 12px; } .umbraco-forms-form :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select) { background: var(--lz-field-bg); border: none; color: var(--c-ink); } .umbraco-forms-form :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select):focus { outline: none; } .umbraco-forms-form .umbraco-forms-label { color: var(--c-ink); } /* The submit button(s) under the form: core.scss only sets their size/layout ("the look of the buttons is in default.scss", its own comment) -- the site's usual solid primary button (border: none, since %button-primary itself doesn't set one and a