/*! Theme Name: sws-theme Theme URI: https://example.com/sws-theme/ Author: SWS Author URI: https://example.com/ Description: A minimalist WordPress starter theme for building sites with ACF dynamic blocks. Version: 1.5.3 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: sws-theme Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme is licensed under the GNU General Public License v2 or later. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Fonts # Base # Utilities - Accessibility -------------------------------------------------------------- This theme intentionally ships no project visual styles. Style your project with block styles (theme.json) and per-block stylesheets. The only rules below are accessibility helpers and the minimal behavior required by the theme's own navigation markup. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Fonts --------------------------------------------------------------*/ /* * Self-hosted variable fonts. Google Fonts is not loaded over CDN on purpose: * an extra origin in the LCP path costs more than it saves. * * One file per family per subset; the variable weight axis covers every weight * the design uses (Nunito 600-900 for headings, Manrope 400-700 for body). * Only the cyrillic and latin subsets ship - the site is Ukrainian, and the * cyrillic range already contains i, i, ye and g with upturn. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("fonts/nunito-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("fonts/nunito-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; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-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; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* * The only global typography rule in the theme. Section blocks set their own * heading font and background; body copy inherits from here, so without it * every paragraph would fall back to the browser default serif. * * No global box-sizing on purpose - see sws-kit/docs/core-blocks.md: the theme * rails measure width as content-box, and a global border-box would narrow all * of them by their own padding. WordPress already emits :where(body){margin:0}. */ body { background: #FBF7F1; color: #241E1A; font-family: Manrope, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* * Anchor navigation. The header is sticky at every width, so a target scrolled * flush to the top of the viewport would sit underneath it. scroll-padding-top * on the scroll container clears the header for every way of reaching an * element - an anchor click, scrollIntoView, the browser focusing a form field * - and leaves a small gap above it. * * --sws-header-h is measured by js/header-offset.js, which sets it inline on * and so outranks both declarations here. These are what the page uses * until that file runs - a cold load on /#anchor scrolls before any deferred * script - and if it never runs at all. * * What sticks is content-sized and differs by side of the breakpoint: below * 1024px the header row alone, two or three rows deep depending on which * contact fields the options carry; from 1024px up the topbar and the header * row together, one row each. Each fallback is the tallest shape on its side, * because the errors are not symmetric: overshooting is invisible - every * section carries 3rem+ of its own top padding over the same background - while * undershooting hides the heading. The mobile value is the one that shipped * before, measured at 156px; the desktop one covers ~41px of topbar over an * 80px header row. */ html { --sws-header-h: 10rem; scroll-padding-top: calc( var( --sws-header-h ) + 1.5rem ); } @media (min-width: 1024px) { html { --sws-header-h: 7.75rem; } } /* The offset always applies; only the animation is opt-in. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Navigation toggle --------------------------------------------- */ /* * Keep the menu available when JavaScript is disabled: navigation.js adds * .main-navigation--js, and only then does the burger take over. Everything * that collapses the menu is gated on that class, down in "Primary navigation". */ .menu-toggle { display: none; } /*-------------------------------------------------------------- # Topbar --------------------------------------------------------------*/ .site-topbar { background: #F6EFE4; border-bottom: 1px solid #EADFD1; font-size: 0.8125rem; color: #6E635B; } .site-topbar__inner { max-width: 73.75rem; margin-inline: auto; padding: 0.5625rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; } .site-topbar__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; margin: 0; padding: 0; list-style: none; } .site-topbar__messengers { display: flex; align-items: center; gap: 1rem; } .site-topbar__messengers-caption { color: #241E1A; } .site-topbar__messengers-list { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .site-topbar__messenger img { display: block; width: 1.375rem; height: 1.375rem; object-fit: contain; } .site-topbar__messenger:hover { opacity: .7; } /* * Clock and pin icons. The shapes come from the mockup; the colour does not - * the source files are #FFB800, a donor accent that appears nowhere in this * palette and washes out on the sand background. Masking them and painting with * currentColor keeps the shape and takes the topbar's own text colour. */ .site-topbar__fact--time, .site-topbar__fact--place { display: inline-flex; align-items: center; gap: 0.4375rem; } .site-topbar__fact--time::before, .site-topbar__fact--place::before { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .site-topbar__fact--time::before { -webkit-mask-image: url("img/clock.svg"); mask-image: url("img/clock.svg"); } .site-topbar__fact--place::before { -webkit-mask-image: url("img/place.svg"); mask-image: url("img/place.svg"); } /*-------------------------------------------------------------- # Site header --------------------------------------------------------------*/ /* * The wrapper around the topbar and the header row. It only does something * from 1024px up, where it takes over the sticky so the topbar rides along; * below that it must not exist as a box at all. A sticky element cannot travel * past its own containing block, and a wrapper that ends right under the header * would unstick the row below after the topbar's own height - some 36px of * scroll. display: contents drops the box and hands both strips back to #page, * which is exactly the layout that shipped before the wrapper existed. */ .site-head { display: contents; } /* * Sticky below 1024px only. From the breakpoint up the sticky moves to the * .site-head wrapper so the topbar sticks along with this row - the override * lives in the desktop media query down in "Primary navigation". */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 241, .92); backdrop-filter: blur(12px); border-bottom: 1px solid #EADFD1; } .site-header__inner { max-width: 73.75rem; margin-inline: auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .site-branding { display: flex; align-items: center; gap: 0.75rem; color: #241E1A; text-decoration: none; } .site-branding__media { flex: none; width: 2.5rem; height: 2.5rem; } .site-branding__media img { display: block; width: 100%; height: 100%; border-radius: 0.75rem; object-fit: contain; } .site-branding__name { display: block; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.011em; white-space: nowrap; } .site-branding__tagline { display: block; font-size: 0.71875rem; color: #6E635B; letter-spacing: .06em; text-transform: uppercase; } .site-header__actions { display: flex; align-items: center; gap: 1rem; } .site-header__phone { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1.0625rem; color: #241E1A; text-decoration: none; white-space: nowrap; } .site-header__phone:hover, .site-header__phone:focus-visible { color: #C2542B; } .site-header__cta { padding: 0.6875rem 1.25rem; border: 0; border-radius: 999px; background: #C2542B; color: #FFFFFF; font-weight: 700; font-size: 0.90625rem; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(194, 84, 43, .7); } .site-header__cta:hover, .site-header__cta:focus-visible { background: #A8441F; } /* * Narrow-screen copy of the topbar messengers. Hidden by default: below 1024px * this one is shown and the topbar copy is hidden instead. */ .site-header__messengers { display: none; align-items: center; gap: 1rem; } .site-header__messengers-caption { color: #241E1A; font-size: 0.8125rem; } .site-header__messengers-list { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .site-header__messenger img { display: block; width: 1.375rem; height: 1.375rem; object-fit: contain; } .site-header__messenger:hover { opacity: .7; } /*-------------------------------------------------------------- # Primary navigation --------------------------------------------------------------*/ .main-navigation ul { margin: 0; padding: 0; list-style: none; } /* Collapsing is gated on the JS marker so a no-script visitor keeps the menu. */ .main-navigation--js ul { display: none; } .main-navigation--js.toggled ul { display: grid; position: absolute; left: 0; right: 0; top: 100%; gap: 0.25rem; padding: 1rem; background: #FBF7F1; border-bottom: 1px solid #EADFD1; } .main-navigation a { display: block; padding: 0.5rem 0; color: #4A403A; font-size: 0.90625rem; font-weight: 600; text-decoration: none; } .main-navigation a:hover, .main-navigation a:focus-visible { color: #C2542B; } @media (min-width: 1024px) { .site-topbar__inner, .site-header__inner { padding-inline: 2rem; } .site-header__inner { padding-block: 1rem; } /* * From 1024px up the topbar rides along with the header: one sticky on the * wrapper instead of one per strip, so the two can never drift apart by a * pixel. The header's own z-index goes inert here - a static element does * not stack - and the wrapper holds the layer instead. The header keeps its * translucent fill and blur: a sticky ancestor with a z-index is not a * backdrop root, so the blur still reads the page scrolling underneath. * * Below the breakpoint nothing changes: the header row sticks on its own * and the topbar scrolls away - see the base rule in "Site header". */ /* * The admin bar is fixed to the viewport at this width, so pinning at 0 * would park the topbar behind it and hide 32 of its 41 pixels - the whole * point of the revision, invisible to everyone logged in. WordPress * publishes the bar's height on , and only when the bar is there: * for a logged-out visitor the variable does not exist and the fallback * puts this back at 0. */ .site-head { display: block; position: sticky; top: var( --wp-admin--admin-bar--height, 0px ); z-index: 50; } .site-header { position: static; } .main-navigation ul, .main-navigation--js ul, .main-navigation--js.toggled ul { display: flex; position: static; align-items: center; gap: 1.25rem; padding: 0; background: transparent; border: 0; } .main-navigation a { padding: 0; white-space: nowrap; } } @media (max-width: 1023px) { /* * Three facts in one row on a 375px screen: 370px of text against 343px of * space. Scale the type with the viewport instead of wrapping. vw, not cqw - * the topbar has no container of its own, it is always full-window. */ .site-topbar { font-size: clamp(0.5rem, 2.7vw, 0.8125rem); } .site-topbar__facts { flex-wrap: nowrap; gap: 0.75rem; } .site-topbar__fact { white-space: nowrap; } /* Icons follow the type: em keeps them proportional as the font shrinks. */ .site-topbar__fact--time, .site-topbar__fact--place { gap: 0.4em; } .site-topbar__fact--time::before, .site-topbar__fact--place::before { width: 1.1em; height: 1.1em; } /* The messengers move into the header on narrow screens. */ .site-topbar__messengers { display: none; } /* * The header stays put while the topbar scrolls away, and it lets the page * show through: lighter fill and a stronger blur than the desktop rule. */ .site-header { background: rgba(251, 247, 241, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .site-header__inner { position: relative; flex-wrap: wrap; } .site-header__phone { font-size: clamp(0.6875rem, 3.3vw, 0.9375rem); } /* * Row 1: logo and burger share the line via space-between. * Row 2: width 100% forces the wrap; the messenger icons, the phone and * the button share one centred line. The row still wraps, so where the * three do not fit the button drops to its own line - still centred. */ .site-header__actions { width: 100%; justify-content: center; flex-wrap: wrap; gap: clamp(0.5rem, 2.3vw, 1rem); } /* * Icons, phone and button share one line from 360px up, so every part of * the row scales with the viewport (the topbar trick). The row measures * 325px against the 328px a 360px screen offers, 338/343 at 375px and * 371/382 at 414px: on wider screens the icons (22px, up to 28px) and * the gaps grow first, so the spare width feeds the tap targets and the * air between elements, not the side margins. */ .site-header__cta { padding-inline: 0.625rem; font-size: clamp(0.6875rem, 3.1vw, 0.90625rem); } .site-header__messengers { display: flex; } .site-header__messengers-list { gap: clamp(0.3125rem, 1.5vw, 0.625rem); } .site-header__messenger img { width: clamp(1.375rem, 6.2vw, 1.75rem); height: clamp(1.375rem, 6.2vw, 1.75rem); } /* The dropdown now hangs off a sticky header - cap it and let it scroll. */ .main-navigation--js.toggled ul { max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; } } .main-navigation--js .menu-toggle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid #EADFD1; border-radius: 0.75rem; background: #FFFFFF; cursor: pointer; } /* * Desktop hides the burger. This rule sits after the one above on purpose: * a media query adds no specificity, so an earlier `display: none` would lose * to the later `display: flex` on source order alone. */ @media (min-width: 1024px) { .main-navigation--js .menu-toggle { display: none; } } .menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { display: block; width: 1.125rem; height: 2px; background: #241E1A; border-radius: 2px; } .menu-toggle__bar { position: relative; } .menu-toggle__bar::before, .menu-toggle__bar::after { content: ""; position: absolute; left: 0; } .menu-toggle__bar::before { top: -0.375rem; } .menu-toggle__bar::after { top: 0.375rem; width: 0.75rem; } /*-------------------------------------------------------------- # Site footer --------------------------------------------------------------*/ .site-footer { margin-top: 5.5rem; padding: 3.25rem 0 1.75rem; background: #26201C; color: #CFC4B9; } .site-footer__inner { max-width: 73.75rem; margin-inline: auto; padding-inline: 1rem; } .site-footer__cols { display: grid; gap: 2rem; } .site-footer__branding { display: flex; align-items: center; gap: 0.75rem; } .site-footer__logo { flex: none; width: 2.5rem; height: 2.5rem; } .site-footer__logo img { display: block; width: 100%; height: 100%; border-radius: 0.75rem; object-fit: contain; } .site-footer__brand-name { display: block; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1.125rem; color: #FFFFFF; } .site-footer__brand-tagline { display: block; font-size: 0.71875rem; color: #A2968B; letter-spacing: .06em; text-transform: uppercase; } .site-footer__slogan { margin: 1rem 0 0; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1rem; color: #F0C79A; } .site-footer__about { margin: 0.625rem 0 0; max-width: 20rem; font-size: 0.9375rem; line-height: 1.6; } .site-footer__col-title { margin: 0; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 0.9375rem; color: #FFFFFF; } .site-footer__menu { display: grid; gap: 0.625rem; margin: 0.875rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; } .site-footer__menu a { color: #CFC4B9; text-decoration: none; } .site-footer__menu a:hover, .site-footer__menu a:focus-visible, .site-footer__policy:hover, .site-footer__policy:focus-visible { color: #F0C79A; } .site-footer__phone { display: block; margin-top: 0.875rem; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 1.375rem; letter-spacing: -0.018em; color: #FFFFFF; text-decoration: none; } .site-footer__phone:hover, .site-footer__phone:focus-visible { color: #F0C79A; } .site-footer__orders { margin: 0.625rem 0 0; font-size: 0.90625rem; line-height: 1.55; } .site-footer__messengers { display: flex; gap: 0.625rem; margin: 1rem 0 0; padding: 0; list-style: none; } .site-footer__messenger { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 0.75rem; background: #3A312B; } .site-footer__messenger:hover, .site-footer__messenger:focus-visible { background: #4A403A; } .site-footer__messenger img { display: block; width: 1.25rem; height: 1.25rem; object-fit: contain; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #3A312B; font-size: 0.84375rem; color: #A2968B; } .site-footer__policy { color: #A2968B; text-decoration: none; } @media (min-width: 782px) { .site-footer__inner { padding-inline: 2rem; } .site-footer__cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } } /*-------------------------------------------------------------- # Lead modal --------------------------------------------------------------*/ /* * The dialog opts into border-box for itself and everything CF7 renders inside * it. The theme ships no global box-sizing on purpose - see * sws-kit/docs/core-blocks.md, the section rails measure as content-box - and * nothing inside the dialog uses those rails. With content-box a 100%-wide * input adds its own padding and border on top of the card, and the card added * its padding on top of the viewport: that is where the horizontal scrollbar * and the clipped right edge on narrow screens came from. */ .sws-lead, .sws-lead *, .sws-lead *::before, .sws-lead *::after { box-sizing: border-box; } .sws-lead { width: 27.5rem; max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); padding: 2rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 1.625rem; background: #FFFFFF; color: #241E1A; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); } .sws-lead::backdrop { background: rgba(38, 32, 28, .6); backdrop-filter: blur(4px); } /* * While the dialog is open the page behind it must stay put. --sws-lead-gap is * the width of the scrollbar the lock removes; js/lead-modal.js measures it and * sets it on the root element, so the layout does not jump sideways. */ .sws-lead-lock { overflow: hidden; padding-right: var( --sws-lead-gap, 0px ); } /* * Entry animation. Browsers without @starting-style or discrete transitions * skip straight to the end state, which is the dialog as it should look. */ @media (prefers-reduced-motion: no-preference) { .sws-lead, .sws-lead::backdrop { transition: opacity .18s ease-out, transform .18s ease-out, display .18s allow-discrete, overlay .18s allow-discrete; } .sws-lead:not([open]), .sws-lead:not([open])::backdrop { opacity: 0; } .sws-lead:not([open]) { transform: translateY(0.75rem); } @starting-style { .sws-lead[open], .sws-lead[open]::backdrop { opacity: 0; } .sws-lead[open] { transform: translateY(0.75rem); } } } .sws-lead__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .sws-lead__title { margin: 0; font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.023em; } .sws-lead__close { display: flex; flex: none; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; padding: 0; border: 0; border-radius: 999px; background: #F6EFE4; color: #4A403A; font-size: 1rem; line-height: 1; cursor: pointer; } .sws-lead__close:hover, .sws-lead__close:focus-visible { background: #EDE3D5; } .sws-lead__sub { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: #5B5049; } .sws-lead__body { margin-top: 1.375rem; } .sws-lead__note { margin: 0.75rem 0 0; font-size: 0.78125rem; color: #8C8078; text-align: center; } /* * Contact Form 7 markup lives inside .sws-lead__body — descendant selectors are * correct here. Its stylesheet is enqueued before the theme's, so the rules that * have to outweigh selectors like `.wpcf7 form .wpcf7-response-output` repeat a * class of their own. */ /* * CF7 runs autop over the form template, so every line break typed in the form * editor comes back as a
. The dialog spaces its rows with margins; those * breaks only tore holes between the fields. */ .sws-lead__body form br { display: none; } .sws-lead__field { margin: 0 0 0.625rem; } /* CF7 wraps every control in an inline span; the row is what needs to be block. */ .sws-lead__body .wpcf7-form-control-wrap { display: block; } .sws-lead__body input[type="text"], .sws-lead__body input[type="tel"] { width: 100%; padding: 0.875rem 1rem; border: 1px solid #EADFD1; border-radius: 0.875rem; background: #FBF7F1; font-family: inherit; font-size: 0.9375rem; line-height: 1.4; color: #241E1A; } .sws-lead__body input[type="text"]:focus, .sws-lead__body input[type="tel"]:focus { border-color: #C2542B; background: #FFFFFF; outline: none; } .sws-lead__body input::placeholder { color: #A99C90; } .sws-lead__body input.wpcf7-not-valid { border-color: #C2371C; background: #FFF7F5; } .sws-lead__submit { position: relative; margin: 0.875rem 0 0; } .sws-lead__body input[type="submit"] { display: block; width: 100%; padding: 1rem; border: 0; border-radius: 0.875rem; background: #C2542B; color: #FFFFFF; font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1.03125rem; line-height: 1.2; cursor: pointer; transition: background-color .15s ease; } .sws-lead__body input[type="submit"]:hover, .sws-lead__body input[type="submit"]:focus-visible { background: #A8441F; } /* * CF7 parks its spinner after the submit button with a 24px margin on each * side; next to a full-width button that margin is pure overflow, so the * spinner moves inside the button instead. */ .sws-lead__body .wpcf7-spinner { position: absolute; top: 50%; right: 1rem; margin: 0; transform: translateY(-50%); } /* Success state: CF7 shows its own response text, the form itself is hidden. */ .sws-lead.is-sent .sws-lead__body form > p { display: none; } .sws-lead .sws-lead__body form .wpcf7-response-output { margin: 1rem 0 0; padding: 1.125rem; border: 0; border-radius: 1rem; background: #EDF1E8; color: #3E5A3A; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; } .sws-lead .sws-lead__body form.invalid .wpcf7-response-output, .sws-lead .sws-lead__body form.unaccepted .wpcf7-response-output, .sws-lead .sws-lead__body form.spam .wpcf7-response-output, .sws-lead .sws-lead__body form.failed .wpcf7-response-output { background: #FBEAE6; color: #A8341C; } .sws-lead__body .wpcf7-not-valid-tip { margin-top: 0.375rem; font-size: 0.8125rem; color: #C2371C; } .sws-lead__fallback { margin: 0; font-size: 0.9375rem; line-height: 1.6; } @media (max-width: 30rem) { .sws-lead { padding: 1.5rem; border-radius: 1.25rem; } .sws-lead__title { font-size: 1.3125rem; } } /*-------------------------------------------------------------- # Image zoom --------------------------------------------------------------*/ /* * One dialog for every enlargeable picture on the site, mounted in footer.php * and driven by js/image-zoom.js. It borrows the lead modal's backdrop, radii * and entry animation on purpose - two overlays that behave alike read as one * system - and shares its scroll lock, .sws-lead-lock. */ .sws-zoom, .sws-zoom *, .sws-zoom *::before, .sws-zoom *::after { box-sizing: border-box; } .sws-zoom { /* * No padding: with the frame carrying the whole card, anything the pointer * hits outside it reports the dialog itself as the target, and the backdrop * click in the script needs no box arithmetic. */ width: min(48rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100svh - 2rem); padding: 0; border: 0; background: transparent; overflow: visible; } /* A dialog is display:none until it opens; the layout has to hang off [open]. */ .sws-zoom[open] { display: grid; gap: 0.875rem; justify-items: center; } .sws-zoom::backdrop { background: rgba(38, 32, 28, .78); backdrop-filter: blur(4px); } @media (prefers-reduced-motion: no-preference) { .sws-zoom, .sws-zoom::backdrop { transition: opacity .18s ease-out, transform .18s ease-out, display .18s allow-discrete, overlay .18s allow-discrete; } .sws-zoom:not([open]), .sws-zoom:not([open])::backdrop { opacity: 0; } .sws-zoom:not([open]) { transform: scale(.97); } @starting-style { .sws-zoom[open], .sws-zoom[open]::backdrop { opacity: 0; } .sws-zoom[open] { transform: scale(.97); } } } /* * The frame is the positioning context for the arrows and the cross, and the * light plate the pictures need: every gift PNG is a cutout on transparency, * and a steel funnel on the dark backdrop would be all but invisible. */ .sws-zoom__frame { position: relative; width: 100%; min-height: 0; padding: 1.5rem; border-radius: 1.625rem; background: #FFFFFF; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55); } .sws-zoom__stage { display: flex; align-items: center; justify-content: center; min-height: 12rem; } /* * Fit, never enlarge: the gift originals top out at 783px and stretching them * to the frame would only add blur. width/height stay auto so a picture smaller * than the frame keeps its own size and stays centred. */ .sws-zoom__img { display: block; max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100svh - 12rem); width: auto; height: auto; object-fit: contain; } .sws-zoom__nav, .sws-zoom__close { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer; line-height: 1; } .sws-zoom__nav { position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; transform: translateY(-50%); background: #FBF7F1; color: #241E1A; font-size: 1.5rem; box-shadow: 0 8px 20px -10px rgba(38, 32, 28, .6); } .sws-zoom__nav:hover, .sws-zoom__nav:focus-visible { background: #F0E6D8; } .sws-zoom__nav--prev { left: -1.375rem; } .sws-zoom__nav--next { right: -1.375rem; } /* Above the plate, over the backdrop - the frame has no room to spare. */ .sws-zoom__close { position: absolute; top: -3.25rem; right: 0; width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, .16); color: #FFFFFF; font-size: 1.0625rem; } .sws-zoom__close:hover, .sws-zoom__close:focus-visible { background: rgba(255, 255, 255, .3); } .sws-zoom__counter { margin: 0; color: #F0E6D8; font-size: 0.875rem; font-variant-numeric: tabular-nums; } /* * Narrow screens: there is no room beside the plate, so the arrows move onto * the bottom corners of the picture itself and the cross onto the top one. */ @media (max-width: 34rem) { .sws-zoom__frame { padding: 1rem; border-radius: 1.25rem; } .sws-zoom__nav { top: auto; bottom: 0.75rem; width: 2.5rem; height: 2.5rem; transform: none; background: rgba(38, 32, 28, .08); } .sws-zoom__nav--prev { left: 0.75rem; } .sws-zoom__nav--next { right: 0.75rem; } .sws-zoom__close { top: -3rem; } }