img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
/*# sourceURL=wp-emoji-styles-inline-css */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; /* Blue */
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; /* Red */
font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; /* Dark Gray 800 */
opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; /* Light Gray 100 */
top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}
@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/assistant/v24/2sDPZGJYnIjSi6H75xkZZE1I0yCmYzzQtuZnEGE.ttf) format('truetype');
}
@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/assistant/v24/2sDPZGJYnIjSi6H75xkZZE1I0yCmYzzQtjhgEGE.ttf) format('truetype');
}
@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/assistant/v24/2sDPZGJYnIjSi6H75xkZZE1I0yCmYzzQtgFgEGE.ttf) format('truetype');
}
/*!
Theme Name: Ronly
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called ronly, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ronly
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
ronly is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
/* Elements
--------------------------------------------- */
body {
background: #fff;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
/* Links
--------------------------------------------- */
a {
color: #4169e1;
}
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
select {
border: 1px solid #ccc;
}
textarea {
width: 100%;
}
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
/* Posts and pages
--------------------------------------------- */
.sticky {
display: block;
}
/* Scoped to the article element: body_class() also outputs .page/.post. */
article.post,
article.page {
margin: 0 0 1.5em;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/* Comments
--------------------------------------------- */
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/* Widgets
--------------------------------------------- */
.widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
}
/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure logo link wraps around logo image. */
.custom-logo-link {
display: inline-block;
}
/* Captions
--------------------------------------------- */
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
/* Galleries
--------------------------------------------- */
.gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
}
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
# 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;
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;
}
/* Alignments
--------------------------------------------- */
.alignleft {
/*rtl:ignore*/
float: left;
/*rtl:ignore*/
margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}
:root {
--teal: #0e4f5c;
--deep: #0a3742;
--ink: #14181a;
--rust: #b4551f;
--paper: #faf9f6;
--cream: #f4f2ec;
--line: #e4e2db;
--body: #41484c;
--muted: #6b7377;
--on: #cfe3e6
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
background: var(--paper);
color: var(--body);
font-family: Assistant,"Segoe UI",Arial,sans-serif;
line-height: 1.65
}
a {
color: inherit;
text-decoration: none
}
/* style.css (Underscores) sets a:hover/:focus/:active to #191970; match specificity (0,1,1)
and win on order, so links keep their inherited colour in every state. :visited is pinned
so a mailto/tel link can never fall back to a browser default. */
a:visited,
a:hover,
a:focus,
a:active {
color: inherit;
}
img {
max-width: 100%;
display: block
}
.utility {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 9px 48px;
background: var(--teal);
color: var(--on);
font-size: 14px
}
.utility-contact {
display: flex;
gap: 20px;
align-items: center
}
.utility strong {
color: #fff
}
.utility-search {
display: flex;
width: 316px;
height: 34px;
border: 1px solid rgba(255,255,255,.45);
border-radius: 2px;
overflow: hidden;
background: #fff
}
.utility-search input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
padding: 5px 12px;
background: #fff;
color: var(--ink);
font: inherit
}
.utility-search input:focus {
box-shadow: inset 0 0 0 2px var(--on)
}
.utility-search button {
flex: none;
border: 0;
padding: 0 16px;
background: var(--deep);
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer
}
.utility-search button:hover {
background: var(--rust)
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 22px 48px;
border-bottom: 1px solid var(--line);
background: var(--paper)
}
.brand {
display: flex;
align-items: center;
gap: 14px
}
.brand img {
height: 40px;
width: auto
}
.brand small {
padding-right: 14px;
border-right: 1px solid var(--line);
font: 10px/1.5 "Courier New",monospace;
letter-spacing: .1em;
color: #7c8388
}
.site-nav {
display: flex;
order: -1;
gap: 25px;
align-items: center;
font-weight: 600
}
.site-nav a:hover,
.site-nav a[aria-current=page] {
color: var(--teal)
}
@media(min-width:1101px) {
.site-nav>ul>li.current-menu-item>a,
.site-nav>ul>li.current_page_item>a,
.site-nav>ul>li>a[aria-current="page"] {
font-weight: 700;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px
}
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 21px;
background: var(--teal);
color: #fff !important;
font-weight: 700;
border: 0;
border-radius: 2px;
cursor: pointer
}
.button.rust {
background: var(--rust)
}
/* WhatsApp CTA. Replaces the rust treatment on this button only; .button.rust stays for the about CTA.
The dark ink label needs !important solely to beat `.button { color:#fff !important }` above;
white on #25d366 is 1.9:1 and unreadable. */
.button.button--whatsapp {
gap: 10px;
background: #25d366;
color: #062c1b !important;
}
.button.button--whatsapp:hover,
.button.button--whatsapp:active {
background: #20ba5a;
color: #062c1b !important;
}
.button.button--whatsapp:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.button.button--whatsapp svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.crumbs {
padding: 12px 48px;
background: var(--cream);
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--muted)
}
.hero {
padding: 74px 48px;
background: var(--deep);
color: #fff
}
.hero .inner,
.section .inner {
max-width: 1144px;
margin: auto
}
.eyebrow {
font: 12px "Courier New",monospace;
letter-spacing: .12em;
color: #9cc0c7;
font-weight: 700
}
.hero h1 {
max-width: 850px;
margin: 13px 0 16px;
font-size: clamp(38px,5vw,62px);
line-height: 1.08
}
.hero p {
max-width: 760px;
margin: 0;
color: #d6e6e9;
font-size: 19px
}
.section {
padding: 68px 48px
}
.section.alt {
background: var(--cream)
}
.section h2 {
margin: 0 0 18px;
color: var(--ink);
font-size: 34px;
line-height: 1.2
}
.section p {
max-width: 760px
}
.split {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 54px;
align-items: start
}
.fact {
padding: 24px 0;
border-top: 1px solid var(--line)
}
.fact:first-child {
border-top: 0
}
.fact h3 {
margin: 0 0 5px;
color: var(--teal)
}
.portrait {
background: #ece9e1;
padding: 18px
}
.portrait img {
width: 100%;
min-height: 390px;
object-fit: cover;
filter: grayscale(15%)
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
background: none;
border: 0
}
.product {
display: flex;
flex-direction: column;
padding: 0;
background: #fff;
border: 0;
border-radius: 0;
box-shadow: 0 1px 4px rgba(10,55,66,.07);
transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.product h3 {
margin: 5px 0 9px;
padding-left: 24px;
padding-right: 24px;
color: var(--ink);
font-size: 20px
}
.product > .eyebrow,
.product p {
padding-left: 24px;
padding-right: 24px
}
.product .product-card-english {
margin: -2px 0 5px
}
.product > span[style*="margin-top"] {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px
}
.product img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
height: auto;
/* object-fit: contain; */
margin: 0 0 18px;
background: var(--paper);
object-fit: cover
}
body.page-template-page-home-php .product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
background: none;
border: 0;
}
body.page-template-page-home-php .product {
padding: 0;
background: #fff;
border: 0;
border-radius: 0;
box-shadow: 0 1px 4px rgba(10,55,66,.07);
}
body.page-template-page-home-php .product img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
height: auto;
object-fit: cover;
margin: 0 0 18px;
background: var(--paper);
}
body.page-template-page-home-php .product h3,
body.page-template-page-home-php .product p {
padding-left: 24px;
padding-right: 24px;
}
body.page-template-page-home-php .product p {
padding-bottom: 24px;
}
.home-categories .product p {
padding-bottom: 24px;
}
.section + .home-categories {
padding-top: 0;
}
.product:hover,
body.page-template-page-home-php .product:hover {
box-shadow: 0 6px 16px rgba(10,55,66,.12);
transform: translateY(-2px);
}
.product:focus-visible,
body.page-template-page-home-php .product:focus-visible {
outline: 3px solid var(--teal);
outline-offset: 3px;
box-shadow: 0 6px 16px rgba(10,55,66,.12);
}
.contact-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
background: var(--teal);
color: #fff
}
.contact-info,
.contact-form {
padding: 56px 48px
}
.contact-form {
background: var(--deep)
}
.contact-info h2,
.contact-form h2 {
color: #fff
}
.details {
display: grid;
gap: 12px;
margin: 28px 0
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}
.form-grid label {
display: grid;
gap: 6px;
color: var(--on);
font-size: 14px
}
.form-grid .wide {
grid-column: 1/-1
}
.form-grid input,
.form-grid textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid #2a6673;
background: var(--teal);
color: #fff;
font: inherit;
resize: vertical
}
.site-footer {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 25px 48px;
background: var(--ink);
color: #8f9699;
font-size: 14px
}
@media(max-width:820px) {
.utility {
padding: 8px 20px;
justify-content: flex-start
}
.utility-contact {
display: none
}
.utility-search {
width: min(316px,100%)
}
.site-header {
padding: 18px 20px;
align-items: flex-start
}
.site-nav {
flex-wrap: wrap;
gap: 12px;
font-size: 14px
}
.brand small {
display: none
}
.crumbs,
.hero,
.section {
padding-right: 20px;
padding-left: 20px
}
.split,
.contact-grid {
grid-template-columns: 1fr
}
.product-grid {
grid-template-columns: 1fr 1fr;
gap: 18px
}
body.page-template-page-home-php .product-grid {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.contact-info,
.contact-form {
padding: 40px 20px
}
.form-grid {
grid-template-columns: 1fr
}
.site-footer {
padding: 22px 20px;
flex-direction: column
}
}
@media(max-width:540px) {
.site-header {
display: flex;
align-items: center
}
.product-grid {
grid-template-columns: 1fr;
gap: 16px
}
body.page-template-page-home-php .product-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.site-nav .button {
width: 100%
}
}
.home-hero {
position: relative;
overflow: hidden;
background-image: url('/wp-content/themes/ronly/assets/home-hero-water-quality-team.png');
background-size: cover;
background-position: 50% 43%;
padding: 80px 48px 64px
}
.home-hero .inner {
max-width: 1144px;
margin: auto
}
.home-hero h1 {
max-width: 19em;
margin: 14px 0 16px;
color: #fff;
font-size: clamp(38px,5vw,56px);
line-height: 1.1
}
.home-hero .eyebrow {
color: #d4e7ea
}
.home-hero p {
max-width: 33em;
color: #d6e6e9;
font-size: 19.5px;
margin: 0 0 30px
}
.search-box {
display: flex;
max-width: 660px;
box-shadow: 0 8px 28px rgba(0,0,0,.18);
border-radius: 2px;
overflow: hidden
}
.search-box input {
flex: 1;
border: 0;
outline: none;
padding: 17px 20px;
font-size: 17px;
background: rgba(255, 255, 255, 0.5);
border-radius: 0
}
.search-box input::placeholder {
color: #454545
}
.search-box button {
border: 0;
background: var(--rust);
color: #fff;
font-weight: 700;
font-size: 16px;
padding: 0 30px;
cursor: pointer;
border-radius: 0
}
/* ממודר לעמוד הבית בלבד — ההירו ב-.home-hero. */
body.page-template-page-home-php .home-hero .search-box input {
transition: background-color .18s ease;
}
body.page-template-page-home-php .home-hero .search-box input:focus {
background-color: rgba(255, 255, 255, 0.68);
color: var(--ink);
box-shadow: inset 0 0 0 2px var(--teal);
}
body.page-template-page-home-php .home-hero .search-box button {
transition: filter .18s ease;
}
body.page-template-page-home-php .home-hero .search-box button:hover {
filter: brightness(.92);
}
body.page-template-page-home-php .home-hero .search-box button:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px #fff;
}
@media (prefers-reduced-motion: reduce) {
body.page-template-page-home-php .home-hero .search-box input,
body.page-template-page-home-php .home-hero .search-box button {
transition: none;
}
}
.dark-split {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--ink);
color: #fff
}
.dark-split>div {
padding: 60px 48px
}
.dark-split .col-a {
border-left: 1px solid #2a2f32
}
.dark-split-figure-col {
display: flex;
flex-direction: column;
}
.dark-split-figure {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.dark-split-figure img {
flex: 1;
object-fit: cover;
width: 100%;
display: block;
}
.reason {
display: flex;
gap: 16px;
padding: 17px 0;
border-top: 1px solid #2a2f32
}
.reason span:first-child {
font: 12px "Courier New",monospace;
color: #6e7679;
padding-top: 4px;
flex: none
}
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: #2a2f32;
border: 1px solid #2a2f32
}
.field-grid a {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 22px;
background: #1b2023;
color: #fff
}
.field-grid a:hover {
background: #232a2d
}
.testimonials-section .eyebrow {
display: block;
margin-bottom: 8px;
color: var(--rust)
}
.testimonials-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px
}
.testimonials-heading h2 {
margin-bottom: 0
}
.testimonials-controls {
display: flex;
align-items: center;
gap: 8px;
flex: none
}
.testimonials-controls[hidden] {
display: none
}
.testimonials-state {
width: 58px;
flex: none;
color: var(--teal);
font: 700 14px/14px Assistant,"Segoe UI",Arial,sans-serif;
direction: ltr;
text-align: center;
font-variant-numeric: tabular-nums
}
.testimonials-button {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--line);
border-radius: 2px;
background: #fff;
color: var(--teal);
font: 700 22px/1 Assistant,"Segoe UI",Arial,sans-serif;
cursor: pointer
}
.testimonials-button:hover,
.testimonials-button:focus-visible {
border-color: var(--teal);
background: var(--teal);
color: #fff
}
.testimonials-button:focus-visible {
outline: 2px solid var(--rust);
outline-offset: 2px
}
.testimonials-button:active {
border-color: var(--deep);
background: var(--deep);
color: #fff
}
.testimonials-button:disabled {
border-color: var(--line);
background: var(--cream);
color: var(--muted);
cursor: not-allowed
}
.testimonials-slider {
width: 100%
}
.testimonials-viewport {
width: 100%;
overflow: hidden;
touch-action: pan-y
}
.testimonials-track {
--cards-per-view: 3;
display: flex;
align-items: stretch;
gap: 20px;
direction: rtl;
transition: transform .45s ease,height .3s ease;
will-change: transform
}
.testimonials-track .quote-card {
flex: 0 0 calc((100% - (20px * (var(--cards-per-view) - 1))) / var(--cards-per-view));
min-width: 0;
margin: 0
}
.quote-card {
background: #fff;
padding: 28px 26px;
border-top: 3px solid var(--teal);
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 400px
}
.quote-card blockquote {
margin: 0;
flex: none;
font-size: 17px;
line-height: 1.65;
font-weight: 400;
color: var(--body)
}
.quote-card figcaption {
margin-top: auto;
flex: none;
padding-top: 16px;
border-top: 1px solid var(--line);
color: var(--teal);
font-size: 16px;
line-height: 24px;
font-weight: 800
}
@media(max-width:1100px) {
.testimonials-track {
--cards-per-view: 2
}
}
@media(max-width:900px) {
.dark-split,
.field-grid {
grid-template-columns: 1fr
}
.dark-split .col-a {
border-left: 0;
border-bottom: 1px solid #2a2f32
}
.home-hero {
padding: 52px 20px
}
.dark-split-figure {
flex: none;
}
.dark-split-figure img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
}
@media(max-width:768px) {
.testimonials-heading {
display: grid;
grid-template-columns: 1fr;
align-items: start;
justify-items: start;
gap: 16px;
margin-bottom: 22px
}
.testimonials-heading h2 {
font-size: 30px;
line-height: 36px
}
.testimonials-controls {
width: 100%;
justify-content: flex-start
}
.testimonials-track {
--cards-per-view: 1
}
.testimonials-track .quote-card {
padding: 24px 20px;
min-height: 300px
}
}
@media(max-width:480px) {
.testimonials-track .quote-card {
min-height: 360px
}
}
@media (prefers-reduced-motion: reduce) {
.testimonials-track {
transition: none
}
}
@media (prefers-reduced-motion: reduce) {
.product,
.tile-grid .tile,
.tile-grid .tile-thumb { transition: none }
.product:hover,
body.page-template-page-home-php .product:hover,
.tile-grid .tile:hover { transform: none }
}
.image-hero {
position: relative;
display: grid;
align-items: end;
min-height: 420px;
background: var(--deep);
color: #fff;
background-size: cover;
background-position: center
}
.image-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,rgba(8,32,38,.95) 0%,rgba(8,32,38,.66) 54%,rgba(8,32,38,.32) 100%)
}
.image-hero .inner {
position: relative;
padding: 64px 48px 46px;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 1144px;
margin: auto;
width: 100%
}
.image-hero h1 {
margin: 0;
font-weight: 900;
font-size: clamp(32px,4.5vw,46px);
line-height: 1.1;
letter-spacing: -.02em
}
.image-hero p {
margin: 0;
font-size: 18.5px;
line-height: 1.65;
color: #d6e6e9;
max-width: 44em
}
/* ── Default tile-grid (unchanged) ───────────────────────── */
.tile-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 24px;
background: none;
border: 0
}
.tile-grid .tile {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 0;
box-shadow: 0 1px 4px rgba(10,55,66,.07);
transition: transform .18s ease-out, box-shadow .18s ease-out,
background-color .18s ease-out, border-color .18s ease-out;
}
.tile-grid .tile:hover {
background: var(--cream);
border-color: var(--teal);
box-shadow: 0 6px 16px rgba(10,55,66,.12);
transform: translateY(-2px);
}
.tile-grid .tile:hover .tile-thumb {
background: var(--cream)
}
.tile-grid .tile img {
max-width: 100%;
max-height: 100%;
object-fit: contain
}
nav#site-navigation.site-nav {
width: auto
}
.tile-grid .tile-thumb {
height: 152px;
background: var(--paper);
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: background-color .18s ease-out;
}
/* ── Subcategory: white products section (white canvas below paper hero) ─────────────────────── */
body.tax-product_category #primary > .split-hero + #products.section {
background: #fff
}
body.tax-product_category #primary > .split-hero + #products.section .tile-grid .tile {
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 1px 4px rgba(10,55,66,.07);
}
body.tax-product_category #primary > .split-hero + #products.section .tile-grid .tile-thumb {
background: #fff
}
body.tax-product_category #primary > .split-hero + #products.section .tile-grid .tile:hover {
background: var(--cream);
border-color: var(--teal);
box-shadow: 0 6px 16px rgba(10,55,66,.12);
}
body.tax-product_category #primary > .split-hero + #products.section .tile-grid .tile:hover .tile-thumb {
background: #fff
}
.tile-grid .tile-body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1
}
.tile-grid .tile-body h3 {
margin: 0;
font-weight: 700;
font-size: 17px;
color: var(--ink);
line-height: 1.3
}
.tile-grid ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
font-size: 13.5px;
line-height: 1.5;
color: var(--muted)
}
.tile-grid li {
display: flex;
gap: 9px;
align-items: flex-start
}
.tile-grid li::before {
content: "";
width: 6px;
height: 6px;
background: var(--rust);
display: block;
flex: none;
margin-top: 6px
}
.tile-grid .tile-link {
margin-top: auto;
padding-top: 14px;
font-size: 13.5px;
font-weight: 700;
color: var(--teal)
}
.card-more {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 5px;
direction: rtl;
}
.card-more__icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
transform: translateX(0);
transition: transform 160ms ease-out;
}
.product:hover .card-more__icon,
.tile-grid .tile:hover .card-more__icon {
transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
.card-more__icon {
transition: none;
}
}
.cta-tile {
display: flex;
flex-direction: column;
justify-content: center;
gap: 11px;
background: var(--teal);
color: #fff;
padding: 32px 28px;
border: 1px solid var(--teal);
border-radius: 0;
box-shadow: none
}
.cta-tile .eyebrow {
color: #8fb6bd
}
.anchor-nav {
display: flex;
align-items: center;
gap: 22px;
padding: 15px 48px;
background: var(--cream);
border-bottom: 1px solid var(--line);
font-size: 14.5px;
font-weight: 600;
overflow-x: auto;
white-space: nowrap
}
.anchor-nav a {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--body)
}
.anchor-nav a span:first-child {
font: 10.5px "Courier New",monospace;
letter-spacing: .08em;
color: #9aa0a3
}
.detail-row {
display: grid;
grid-template-columns: 230px minmax(0,1fr);
gap: 40px;
padding: 44px 0;
border-top: 1px solid var(--line);
scroll-margin-top: 20px
}
.detail-row:first-child {
border-top: 0
}
.detail-row .tag {
display: flex;
flex-direction: column;
gap: 8px
}
.detail-row .tag span:first-child {
font: 12px "Courier New",monospace;
color: #9aa0a3
}
.detail-row .tag span:last-child {
font: 11px "Courier New",monospace;
letter-spacing: .1em;
color: var(--rust)
}
.detail-row .content {
display: flex;
flex-direction: column;
gap: 18px
}
.detail-row h2 {
margin: 0;
font-weight: 700;
font-size: 26px;
letter-spacing: -.01em;
color: var(--ink);
line-height: 1.3
}
.detail-row p {
margin: 0;
font-size: 17px;
line-height: 1.7;
color: #565d61;
max-width: 64ch
}
.detail-row ul {
margin: 4px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
font-size: 17px;
line-height: 1.6;
color: var(--ink)
}
.detail-row li {
display: flex;
gap: 12px;
align-items: flex-start
}
.detail-row li::before {
content: "";
width: 7px;
height: 7px;
background: var(--rust);
display: block;
flex: none;
margin-top: 7px
}
.compare-imgs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 10px
}
.compare-imgs img {
width: 100%;
height: auto;
background: #fff;
border: 1px solid var(--line)
}
.inquiry-btn {
margin-top: 10px;
border: 1px solid var(--rust);
background: var(--rust);
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 9px 12px;
border-radius: 2px;
cursor: pointer;
width: 100%;
transition: background-color .18s ease
}
.inquiry-btn:hover {
filter: brightness(.92)
}
.inquiry-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(20,24,26,.55);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px
}
.inquiry-overlay.is-open {
display: flex
}
body.inquiry-open {
overflow: hidden
}
.inquiry-close {
border: 0;
background: none;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: var(--muted)
}
.inquiry-form-fields {
display: flex;
flex-direction: column;
gap: 14px
}
.inquiry-form .wpcf7-form-control-wrap {
display: block
}
.inquiry-form .wpcf7-spinner {
margin: 8px
}
.inquiry-form {
background: var(--paper);
width: 100%;
max-width: 480px;
border-radius: 3px;
box-shadow: 0 30px 90px rgba(0,0,0,.35);
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px
}
.inquiry-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: var(--body)
}
.inquiry-form input,
.inquiry-form textarea {
border: 1px solid var(--line);
padding: 11px 12px;
border-radius: 2px;
font: inherit
}
.inquiry-form input[readonly] {
background: var(--cream);
color: var(--ink);
font-weight: 700
}
.split-hero {
display: grid;
grid-template-columns: 60fr 40fr;
padding: 0;
background: var(--paper);
color: var(--body);
border-bottom: 1px solid var(--line)
}
.split-hero>div:first-child {
padding: 40px 48px;
display: flex;
flex-direction: column;
gap: 18px;
justify-content: center
}
.split-hero>div:last-child {
background: #efede7;
overflow: hidden;
min-height: 280px;
position: relative
}
.split-hero>div:last-child img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%
}
@media(min-width:821px) {
.split-hero>div:last-child img {
position: absolute;
inset: 0
}
}
@media(max-width:820px) {
.tile-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px
}
.detail-row {
grid-template-columns: 1fr;
gap: 14px
}
.compare-imgs {
grid-template-columns: 1fr
}
.anchor-nav {
gap: 16px;
padding: 13px 20px
}
.split-hero {
grid-template-columns: 1fr
}
.split-hero>div:first-child {
padding: 32px 20px
}
}
@media(max-width:540px) {
.tile-grid {
grid-template-columns: 1fr;
gap: 16px
}
}
/* WordPress primary menu. */
.site-header {
position: relative
}
.site-nav>ul {
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none
}
.site-nav li {
position: relative;
float: none;
margin: 0
}
.site-nav li a {
display: block
}
.site-nav .menu-item-has-children::after {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 100%;
height: 22px
}
.site-nav .menu-item-has-children>.sub-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
left: auto;
z-index: 1000;
min-width: 290px;
margin: 0;
padding: 10px 0;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 12px 28px rgba(10,55,66,.14);
list-style: none
}
.site-nav li:hover>.sub-menu,
.site-nav li.focus>.sub-menu,
.site-nav li:focus-within>.sub-menu {
display: block
}
.site-nav .sub-menu li {
float: none;
width: 100%
}
.site-nav .sub-menu a {
padding: 9px 18px;
white-space: nowrap
}
.site-nav .sub-menu a:hover {
background: var(--cream)
}
.site-nav li.button {
min-height: 0;
padding: 0;
background: none;
color: inherit
}
.site-nav li.button>a {
min-height: 44px;
padding: 10px 21px;
background: var(--teal);
color: #fff
}
@media(min-width:1101px) {
.site-nav #menu-item-497::after {
display: none;
top: 100%;
right: 0;
left: auto;
width: 290px;
height: 32px;
transform: none;
pointer-events: auto;
z-index: 999
}
.site-nav #menu-item-497:hover::after,
.site-nav #menu-item-497.focus::after,
.site-nav #menu-item-497:focus-within::after {
display: block
}
.site-nav #menu-item-497>.sub-menu {
top: 100%;
right: 0;
left: auto;
width: 290px;
min-width: 290px;
max-width: calc(100vw - 32px);
transform: none
}
.site-nav #menu-item-497>.sub-menu a {
width: 100%;
box-sizing: border-box;
direction: rtl;
text-align: right
}
}
@media(max-width:1100px) {
.site-header {
gap: 18px;
padding-right: 20px;
padding-left: 20px
}
.site-nav .menu-item-has-children::after {
display: none
}
.site-nav .menu-toggle {
display: block !important
}
.site-nav>ul {
display: none
}
.site-nav.toggled>ul {
display: flex;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 1000;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px 24px;
background: var(--paper);
border-top: 1px solid var(--line);
box-shadow: 0 12px 28px rgba(10,55,66,.14);
max-height: calc(100vh - var(--sticky-admin-offset) - 65px);
max-height: calc(100dvh - var(--sticky-admin-offset) - 65px);
overflow-y: auto;
overscroll-behavior: contain
}
.site-nav.toggled>ul>li {
width: 100%;
border-top: 1px solid var(--line)
}
.site-nav.toggled>ul>li:first-child {
border-top: 0
}
.site-nav.toggled>ul>li>a {
display: block;
padding: 14px 0;
text-align: right;
font-size: 16px;
line-height: 1.5
}
.site-nav .menu-item-has-children>.sub-menu {
position: static;
display: none;
width: 100%;
min-width: 0;
margin: 0;
padding: 2px 0 12px;
border: 0;
box-shadow: none
}
.site-nav li.focus>.sub-menu {
display: block
}
.site-nav .sub-menu li {
border-top: 0
}
.site-nav .sub-menu a {
display: block;
padding: 11px 18px 11px 0;
text-align: right;
white-space: normal;
color: var(--body);
font-size: 16px;
line-height: 1.5;
font-weight: 500
}
.site-nav .sub-menu a:hover {
background: var(--cream)
}
.site-nav.toggled>ul>li.button {
border-top: 0;
padding-top: 6px;
padding-bottom: 6px
}
.site-nav li.button>a,
.site-nav.toggled>ul>li.button>a {
display: flex;
width: 100%;
padding: 13px 21px;
justify-content: center;
text-align: center
}
}
/* Hamburger button. */
.menu-toggle {
position: relative;
width: 44px;
height: 44px;
padding: 0;
/* border:1px solid var(--line); */
border-radius: 2px;
background: var(--paper);
color: transparent;
font-size: 0;
cursor: pointer;
flex: none;
border: none !important;
}
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
content: "";
position: absolute;
right: 2px;
left: 2px;
height: 4px;
background: var(--teal);
border-radius: 2px;
transition: transform .2s ease,opacity .2s ease
}
.menu-toggle::before {
top: 9px
}
.menu-toggle span {
top: 20px;
display: block
}
.menu-toggle::after {
top: 31px
}
.menu-toggle:hover {
border-color: var(--teal)
}
/* סיבוב כפתור המבורגר, דורון, 2026-09-21. */
#site-navigation .menu-toggle {
transform:rotate(0);
transition: 0.4s ease all;
}
#site-navigation.toggled .menu-toggle {
transform:rotate(-270deg);
}
/* הושבת לבחינה, דורון, 2026-09-21. איפוס ה-duration ביטל את אנימציית הפתיחה של ההמבורגר בעוד הסגירה נשארה מונפשת. להחזרה: להסיר את ההערה משלוש ההצהרות. */
.site-nav.toggled .menu-toggle::before,
.menu-toggle[aria-expanded="true"]::before {
transform: translateY(11px) rotate(45deg);
/*transition-duration: 0s*/
}
.site-nav.toggled .menu-toggle::after,
.menu-toggle[aria-expanded="true"]::after {
transform: translateY(-11px) rotate(-45deg);
/*transition-duration: 0s*/
}
.site-nav.toggled .menu-toggle span,
.menu-toggle[aria-expanded="true"] span {
opacity: 0;
/*transition-duration: 0s*/
}
/* Site footer. */
.site-footer {
display: block;
padding: 0;
background: var(--ink);
color: #aeb5b8;
font-size: 15px;
max-width: 100vw;
overflow-x: hidden
}
.site-footer * {
max-width: 100%;
box-sizing: border-box
}
.footer-main {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
gap: 56px;
max-width: 1240px;
margin: 0 auto;
padding: 64px 48px 52px
}
.footer-main>* {
min-width: 0
}
.footer-main a,
.footer-main li,
.footer-main p {
overflow-wrap: anywhere
}
.footer-main h2 {
margin: 0 0 20px;
color: #fff;
font-size: 17px
}
.footer-main ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none
}
.footer-main a {
transition: color .2s ease
}
.footer-main nav a:hover,
.footer-contact a:hover {
color: #fff
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
min-width: 0
}
.footer-brand>* {
min-width: 0;
max-width: 100%
}
.footer-brand>a:first-child {
display: block;
width: 244px;
max-width: 100%;
padding: 0;
background: transparent;
border-radius: 0;
margin: 0 0 16px
}
/* Logo ships dark on transparent; brightness(0) invert(1) renders it white on the ink footer. */
.footer-brand>a:first-child img {
display: block;
width: 244px;
max-width: 100%;
height: auto;
filter: brightness(0) invert(1);
opacity: 1
}
.footer-brand p {
max-width: 32em;
margin: 0;
line-height: 1.7;
overflow-wrap: break-word
}
.footer-maker {
display: inline-block;
margin-top: 4px;
padding: 7px 10px;
background: #fff;
border-radius: 2px
}
.footer-maker img {
width: auto;
height: 25px
}
.footer-contact .button {
margin-top: 22px;
color: #fff
}
.product .product-placeholder,
.product-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
background: var(--teal);
border: 1px dashed var(--rust);
color: #fff;
font-size: 13px;
font-weight: 700;
text-align: center
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 24px;
padding: 20px 48px;
border-top: 1px solid #2a3033;
color: #81898d;
font-size: 13px
}
@media(max-width:980px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 42px
}
}
@media(max-width:767px) {
.footer-brand>a:first-child,
.footer-brand>a:first-child img {
width: 216px
}
}
@media(max-width:600px) {
.footer-main {
grid-template-columns: 1fr;
gap: 34px;
padding: 46px 20px 38px
}
.footer-bottom {
flex-direction: column;
padding: 18px 20px
}
}
/* Utility-bar search: compact, geometric and legible on the teal field. */
.utility-search {
direction: rtl;
display: flex;
width: clamp(280px,24vw,340px);
height: 36px;
border: 1px solid rgba(255,255,255,.5);
border-radius: 2px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(10,55,66,.16);
transition: border-color .18s ease,box-shadow .18s ease;
}
.utility-search:focus-within {
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,.24),0 3px 12px rgba(10,55,66,.2)
}
.utility-search input[type="search"] {
min-width: 0;
flex: 1;
height: 100%;
padding: 7px 13px;
border: 0;
border-radius: 0;
outline: 0;
background: #fff;
color: var(--ink);
font: 600 14px/1.4 Assistant,"Segoe UI",Arial,sans-serif;
text-align: right;
caret-color: var(--rust);
-webkit-appearance: none;
appearance: none;
}
.utility-search input[type="search"]::placeholder {
color: #747c7f;
font-weight: 400;
opacity: 1
}
.utility-search input[type="search"]::-webkit-search-cancel-button {
margin-right: 7px;
cursor: pointer
}
.utility-search button {
flex: none;
min-width: 72px;
height: 100%;
padding: 0 16px;
border: 0;
border-radius: 0;
background: var(--rust);
color: #fff;
font: 700 14px/1 Assistant,"Segoe UI",Arial,sans-serif;
cursor: pointer;
transition: background-color .18s ease;
}
.utility-search button:hover {
background: #964314
}
.utility-search button:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px
}
/* Desktop utility-bar search only.
Do not apply to .mobile-menu-search or .search-box. */
@media (min-width: 1101px) {
.utility { padding-block: 7px; }
}
.utility > .utility-search {
height: 30px;
border: 0;
border-bottom: 1px solid #8fb6be;
border-radius: 0;
overflow: visible;
background: transparent;
box-shadow: none;
transition: border-color 180ms ease;
}
.utility > .utility-search:hover { border-bottom-color: #cfe3e6; }
.utility > .utility-search:focus-within {
border: 0;
border-bottom: 2px solid #fff;
box-shadow: none;
}
.utility > .utility-search input[type="search"] {
height: 100%;
padding-block: 3px 4px;
padding-inline: 0 8px;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
color: #fff;
caret-color: #fff;
}
.utility > .utility-search input[type="search"]::placeholder {
color: #b9d3d8;
opacity: 1;
}
.utility > .utility-search input[type="search"]:focus { box-shadow: none; }
.utility > .utility-search input[type="search"]::-webkit-search-cancel-button {
filter: brightness(0) invert(1);
opacity: .8;
}
.utility > .utility-search button {
display: grid;
place-items: center;
width: 30px;
min-width: 30px;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #cfe3e6;
cursor: pointer;
transition: color 180ms ease;
}
.utility > .utility-search button:hover { background: transparent; color: #fff; }
.utility > .utility-search button:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
background: transparent;
color: #fff;
}
.utility > .utility-search button svg { display: block; width: 18px; height: 18px; }
@media(max-width:760px) {
.utility {
flex-wrap: wrap
}
.utility-search {
order: 2;
width: min(316px,100%);
height: 40px
}
}
@media(max-width:480px) {
.utility-search input[type="search"] {
padding-right: 12px;
padding-left: 9px;
font-size: 14px
}
.utility-search button {
min-width: 68px;
padding-right: 13px;
padding-left: 13px
}
}
/* Reusable manufacturer partners. */
.partners-eyebrow {
color: var(--rust)
}
.partners-section h2 {
margin-bottom: 28px
}
.partner-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 1px;
border: 1px solid var(--line);
background: var(--line)
}
.partner-card {
display: flex;
min-width: 0;
min-height: 272px;
flex-direction: column;
padding: 32px 28px 30px;
background: #fff;
outline: 0;
transition: background-color .18s ease,box-shadow .18s ease
}
.partner-card:hover {
background: #fdfcf9
}
.partner-card:focus-visible {
box-shadow: inset 0 0 0 3px var(--teal)
}
.partner-logo {
display: flex;
height: 64px;
align-items: center;
justify-content: flex-start;
margin-bottom: 23px
}
.partner-logo img {
width: auto;
max-width: 190px;
max-height: 44px;
object-fit: contain;
object-position: right center
}
.partner-card:nth-child(2) .partner-logo img {
max-width: 174px;
max-height: 39px
}
.partner-card:nth-child(3) .partner-logo img {
max-width: 100px;
max-height: 52px
}
.partner-card:nth-child(4) .partner-logo img {
max-width: 150px;
max-height: 47px
}
.partner-content {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
align-items: flex-start;
text-align: right
}
.partner-country {
color: var(--rust);
font: 11px "Courier New",monospace;
letter-spacing: .1em;
font-weight: 700
}
.partner-content h3 {
width: 100%;
margin: 7px 0 10px;
color: var(--ink);
font-size: 20px;
line-height: 1.3;
text-align: right
}
.partner-content p {
margin: 0;
color: var(--body);
font-size: 16px;
line-height: 1.65
}
@media(max-width:900px) {
.partner-grid {
grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media(max-width:560px) {
.partner-grid {
grid-template-columns: 1fr
}
.partner-card {
min-height: 0
}
}
/* Search follows the navigation breakpoint: utility on desktop, hamburger panel below 1100px. */
.mobile-menu-search {
display: none
}
@media(max-width:1100px) {
.utility>.utility-search {
display: none
}
.site-nav.toggled .mobile-menu-search {
position: absolute;
top: calc(100% + 8px);
right: 24px;
left: 24px;
z-index: 1001;
display: flex;
width: auto;
max-width: none;
height: 46px;
box-shadow: 0 1px 4px rgba(10,55,66,.07)
}
.site-nav.toggled .mobile-menu-search input[type="search"]::placeholder {
color: #626a6d
}
.site-nav.toggled>ul>li>a {
font-weight: 600
}
.site-nav.toggled>ul>li.current-menu-item>a,
.site-nav.toggled>ul>li.current_page_item>a,
.site-nav.toggled>ul>li>a[aria-current="page"] {
font-weight: 700;
padding-right: 12px;
border-right: 3px solid var(--teal)
}
.site-nav.toggled>ul {
padding-top: 60px
}
body:has(.site-nav.toggled) .search-box {
visibility: hidden
}
}
@media(max-width:820px) {
.utility {
display: none
}
}
/* ==== Product inquiry modal (CF7) - normalized ==== */
.inquiry-form {
direction: rtl;
text-align: right;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow: hidden
}
.inquiry-form>div:first-child {
flex: 0 0 auto;
min-height: 44px;
align-items: center
}
.inquiry-form>div:first-child>h3 {
margin: 0;
font-size: 20px;
line-height: 1.3;
color: var(--ink);
text-align: right
}
.inquiry-overlay {
overflow-y: auto;
overscroll-behavior: contain
}
.inquiry-form>.wpcf7 {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain
}
.inquiry-form form {
margin: 0
}
.inquiry-form-fields,
.inquiry-form form p {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0
}
.inquiry-form-fields br,
.inquiry-form form br {
display: none
}
.inquiry-form label {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
font-size: 14px;
line-height: 1.45;
color: var(--body);
text-align: right
}
.inquiry-form .wpcf7-form-control-wrap {
display: block;
width: 100%;
text-align: right
}
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="url"],
.inquiry-form input[type="number"],
.inquiry-form select,
.inquiry-form textarea,
.inquiry-form .wpcf7-form-control:not(.wpcf7-submit) {
display: block;
width: 100%;
max-width: 100%;
min-width: 0
}
.inquiry-form input,
.inquiry-form textarea {
border: 1px solid var(--line);
padding: 11px 12px;
border-radius: 2px;
font: inherit;
font-size: 15px;
line-height: 1.4;
background: #fff;
color: var(--ink);
min-height: 44px;
direction: rtl;
text-align: right
}
.inquiry-form textarea {
height: 96px;
min-height: 96px;
resize: vertical
}
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"] {
direction: ltr;
text-align: right
}
.inquiry-form input[readonly] {
background: var(--cream);
color: var(--ink);
-webkit-text-fill-color: var(--ink);
font-weight: 700;
cursor: default
}
.inquiry-form ::placeholder {
color: var(--muted);
opacity: 1
}
.inquiry-form input:focus,
.inquiry-form textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(14,79,92,.14)
}
.inquiry-form input:focus-visible,
.inquiry-form textarea:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 1px;
border-color: var(--teal)
}
.inquiry-form input.wpcf7-not-valid,
.inquiry-form textarea.wpcf7-not-valid {
border-color: var(--rust);
box-shadow: 0 0 0 3px rgba(180,85,31,.12)
}
.inquiry-form .wpcf7-not-valid-tip {
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.4;
color: var(--rust);
text-align: right
}
.inquiry-form .wpcf7-response-output {
margin: 14px 0 0;
padding: 10px 12px;
border-width: 1px;
border-radius: 2px;
font-size: 13px;
line-height: 1.5;
text-align: right
}
.inquiry-form input[type="submit"],
.inquiry-form .wpcf7-submit,
.inquiry-form input.wpcf7-submit {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
margin-top: 4px;
background: var(--teal);
color: #fff;
border: 1px solid var(--teal);
border-radius: 2px;
padding: 13px 20px;
min-height: 48px;
font-family: inherit;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease
}
.inquiry-form input[type="submit"]:hover,
.inquiry-form .wpcf7-submit:hover {
background: var(--deep);
border-color: var(--deep);
color: #fff
}
.inquiry-form input[type="submit"]:active,
.inquiry-form .wpcf7-submit:active {
background: #082c35;
border-color: #082c35;
transform: translateY(1px)
}
.inquiry-form input[type="submit"]:focus-visible,
.inquiry-form .wpcf7-submit:focus-visible {
outline: 2px solid var(--rust);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--paper)
}
.inquiry-form input[type="submit"]:disabled,
.inquiry-form .wpcf7-submit:disabled {
background: var(--muted);
border-color: var(--muted);
color: #fff;
cursor: not-allowed;
opacity: 1;
transform: none
}
.inquiry-form form.submitting input[type="submit"] {
opacity: .65;
cursor: progress;
pointer-events: none
}
.inquiry-form .wpcf7-spinner {
display: none;
margin: 0 auto
}
.inquiry-form form.submitting .wpcf7-spinner {
display: block;
align-self: center;
margin: 0 auto
}
.inquiry-close {
flex: 0 0 auto;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: none;
padding: 0;
font-size: 26px;
line-height: 1;
color: var(--muted);
border-radius: 2px;
cursor: pointer;
margin-inline-end: -10px;
margin-block: -10px;
transition: background-color .15s ease, color .15s ease
}
.inquiry-close:hover {
background: var(--cream);
color: var(--ink)
}
.inquiry-close:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
color: var(--ink)
}
@media(max-width:820px) {
.inquiry-overlay {
padding: 12px
}
.inquiry-form {
max-width: 100%;
padding: 20px;
gap: 12px;
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px)
}
.inquiry-form>div:first-child>h3 {
font-size: 18px
}
.inquiry-form-fields,
.inquiry-form form p {
gap: 12px
}
.inquiry-form input,
.inquiry-form textarea {
font-size: 16px;
padding: 12px
}
.inquiry-form textarea {
height: 88px;
min-height: 88px
}
.inquiry-form input[type="submit"],
.inquiry-form .wpcf7-submit {
font-size: 16px;
padding: 14px 18px;
min-height: 48px
}
}
@media(max-width:540px) {
.inquiry-overlay {
padding: 8px
}
.inquiry-form {
padding: 16px;
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px)
}
.inquiry-close {
margin-inline-end: -6px
}
}
@media(prefers-reduced-motion:reduce) {
.inquiry-form input[type="submit"],
.inquiry-form .wpcf7-submit,
.inquiry-close {
transition: none
}
.inquiry-form input[type="submit"]:active {
transform: none
}
}
/* ==========================================================================
Sticky header stack
Appended after line 2222 so it wins over the earlier duplicate blocks
by source order. No priority flags are used anywhere below.
========================================================================== */
:root {
--sticky-desktop-height: 95px;
--sticky-mobile-height: 65px;
--sticky-admin-offset: 0px;
--sticky-z: 900;
}
/* WordPress renders the admin bar 32px tall down to 783px. Below 782px it is
position:absolute and scrolls away, so the offset drops back to 0. */
body.admin-bar {
--sticky-admin-offset: 32px;
}
@media(max-width:782px) {
body.admin-bar {
--sticky-admin-offset: 0px;
}
}
/* --- Transitions ------------------------------------------------------- */
.site-header-stack .utility {
transition: padding-top 220ms cubic-bezier(.2, 0, 0, 1),
padding-bottom 220ms cubic-bezier(.2, 0, 0, 1),
background-color 220ms cubic-bezier(.2, 0, 0, 1);
}
.site-header-stack .site-header {
transition: padding-top 220ms cubic-bezier(.2, 0, 0, 1),
padding-bottom 220ms cubic-bezier(.2, 0, 0, 1),
background-color 220ms cubic-bezier(.2, 0, 0, 1),
border-color 220ms cubic-bezier(.2, 0, 0, 1),
box-shadow 220ms cubic-bezier(.2, 0, 0, 1);
}
.site-header-stack .brand img {
transition: height 220ms cubic-bezier(.2, 0, 0, 1);
}
/* --- Condensed surface, both breakpoints ------------------------------- */
.site-header-stack.is-condensed .utility {
background-color: #0e4f5c;
}
.site-header-stack.is-condensed .site-header {
background-color: #faf9f6;
border-bottom-color: rgba(10, 55, 66, .14);
box-shadow: 0 6px 18px rgba(10, 55, 66, .12);
}
/* --- Desktop, 1101px and up -------------------------------------------- */
@media(min-width:1101px) {
.site-header-stack {
position: sticky;
top: var(--sticky-admin-offset);
z-index: var(--sticky-z);
isolation: isolate;
}
.site-header-stack.is-condensed .utility {
padding-top: 4px;
padding-bottom: 4px;
}
.site-header-stack.is-condensed .site-header {
padding-top: 12px;
padding-bottom: 12px;
}
.site-header-stack.is-condensed .brand img {
height: 32px;
width: auto;
}
}
/* --- 1100px and down: only the header sticks --------------------------- */
@media(max-width:1100px) {
/* display:contents rather than position:static. A static wrapper still
forms the containing block for its sticky child, and because the wrapper
is only as tall as the header itself the sticky header immediately
reaches its containing block's bottom edge and scrolls away. Removing
the wrapper box makes #page the containing block, so the header sticks
for the full page. Verified at 900px and 500px. */
.site-header-stack {
display: contents;
isolation: auto;
}
.site-header-stack .site-header {
position: sticky;
top: var(--sticky-admin-offset);
z-index: var(--sticky-z);
}
.site-header-stack.is-condensed .site-header {
padding-top: 10px;
padding-bottom: 10px;
}
.site-header-stack.is-condensed .brand img {
height: 32px;
}
}
/* --- Background scroll lock while the mobile menu is open --------------- */
body.menu-open {
overflow: hidden;
}
/* --- Root scroll behaviour --------------------------------------------- */
/* scroll-padding-top is the mobile anchor offset and is raised per breakpoint
below. */
html {
scroll-padding-top: 81px;
}
/* Reserve the scrollbar gutter only while the menu is open AND the page
actually needs a scrollbar (the .has-scrollbar class is maintained by
navigation.js, and is recomputed on resize while the menu stays open).
A long page keeps its width and does not shift; a short page gains no
gutter and therefore no visible strip. */
html.has-scrollbar:has(body.menu-open) {
scrollbar-gutter: stable;
}
/* While focus is inside the sticky header, drop the scroll padding. Otherwise
focusing a header control makes the browser scroll the page to satisfy the
padding, throwing a keyboard user back up the document. The skip link sits
outside .site-header-stack, so it is unaffected. */
html:has(.site-header-stack :focus) {
scroll-padding-top: 0;
}
/* --- Anchor offsets ---------------------------------------------------- */
#primary,
.site-main [id],
.detail-row {
scroll-margin-top: 81px;
}
@media(min-width:783px) and (max-width:1100px) {
html:has(body.admin-bar) {
scroll-padding-top: 113px;
}
body.admin-bar #primary,
body.admin-bar .site-main [id],
body.admin-bar .detail-row {
scroll-margin-top: 113px;
}
}
@media(min-width:1101px) {
html {
scroll-padding-top: 111px;
}
#primary,
.site-main [id],
.detail-row {
scroll-margin-top: 111px;
}
html:has(body.admin-bar) {
scroll-padding-top: 143px;
}
body.admin-bar #primary,
body.admin-bar .site-main [id],
body.admin-bar .detail-row {
scroll-margin-top: 143px;
}
}
/* --- Skip link --------------------------------------------------------- */
.skip-link:focus {
position: fixed;
top: calc(var(--sticky-admin-offset) + 8px);
right: 8px;
left: auto;
z-index: 100000;
}
/* --- Reduced motion ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
.site-header-stack .utility,
.site-header-stack .site-header,
.site-header-stack .brand img {
transition: none;
}
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
transition: none;
}
}
/* Contact form component shared by home and contact templates.
page-home.php and page-contact.php use .contact-grid.contact-grid--form.
page-about.php uses .contact-grid without the modifier and is unaffected. */
body.page-template-page-contact-php .hero h1 {
margin: 0 0 16px;
}
body.page-template-page-contact-php .contact-info h2 {
margin: 0;
}
.contact-grid.contact-grid--form .form-grid {
display: block;
}
.contact-grid.contact-grid--form .form-grid > p:first-child {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
row-gap: 18px;
margin: 0;
}
.contact-grid.contact-grid--form .form-grid > p:first-child > br {
display: none;
}
.contact-grid.contact-grid--form .form-grid > p:first-child > label:has([data-name="your-message"]) {
grid-column: 1 / -1;
}
.contact-grid.contact-grid--form .form-grid > .wide {
width: 100%;
margin-top: 18px;
}
.contact-grid.contact-grid--form .form-grid > .wide > p {
margin: 0;
}
.contact-grid.contact-grid--form .contact-form {
background: #f4f2ec;
}
.contact-grid.contact-grid--form .contact-form h2 {
color: #0a3742;
margin: 0 0 8px;
}
body.page-template-page-home-php .contact-grid.contact-grid--form .contact-form h2 {
margin-bottom: 28px;
}
body.page-template-page-contact-php .contact-grid.contact-grid--form .contact-form > h2 + p {
color: #41484c;
margin: 0 0 28px;
}
.contact-grid.contact-grid--form .form-grid label {
color: #24383e;
font-size: 14px;
gap: 6px;
}
.contact-grid.contact-grid--form .form-grid input:not(.wpcf7-submit),
.contact-grid.contact-grid--form .form-grid textarea {
background: #ffffff;
border: 1px solid #758f95;
color: #0a3742;
padding: 13px 14px;
border-radius: 2px;
resize: vertical;
}
.contact-grid.contact-grid--form .form-grid textarea::placeholder {
color: #66777b;
opacity: 1;
}
.contact-grid.contact-grid--form .form-grid input:not(.wpcf7-submit):focus,
.contact-grid.contact-grid--form .form-grid textarea:focus {
border: 2px solid #0e4f5c;
outline: 3px solid #0e4f5c;
outline-offset: 2px;
padding: 12px 13px;
}
.contact-grid.contact-grid--form input.wpcf7-submit {
background: #0e4f5c;
border: 1px solid #0e4f5c;
color: #ffffff;
width: 100%;
min-height: 54px;
font-weight: 700;
}
.contact-grid.contact-grid--form input.wpcf7-submit:hover {
background: #0a3742;
border: 1px solid #0a3742;
color: #ffffff;
}
.contact-grid.contact-grid--form input.wpcf7-submit:focus-visible {
outline: 3px solid #0a3742;
outline-offset: 3px;
}
.contact-grid.contact-grid--form .wpcf7 form .wpcf7-response-output {
margin: 12px 0 16px;
padding: 10px 12px;
border-width: 1px;
border-radius: 2px;
font-size: 13px;
line-height: 1.5;
text-align: right;
}
.contact-grid.contact-grid--form .wpcf7 form.invalid .wpcf7-response-output,
.contact-grid.contact-grid--form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-grid.contact-grid--form .wpcf7 form.payment-required .wpcf7-response-output {
color: #6b4a00;
background-color: #fff4d6;
border-color: #b77900;
}
.contact-grid.contact-grid--form .wpcf7 form.failed .wpcf7-response-output,
.contact-grid.contact-grid--form .wpcf7 form.aborted .wpcf7-response-output {
color: #7a1f1f;
background-color: #fdecec;
border-color: #b42323;
}
.contact-grid.contact-grid--form .wpcf7 form.spam .wpcf7-response-output {
color: #7a2e0b;
background-color: #fff0e8;
border-color: #c2410c;
}
.contact-grid.contact-grid--form .wpcf7 form.sent .wpcf7-response-output {
color: #1f5a2a;
background-color: #eaf6ec;
border-color: #2e7d32;
}
.contact-grid.contact-grid--form .wpcf7-not-valid-tip {
color: #b42323;
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.4;
text-align: right;
}
.contact-grid.contact-grid--form .details {
display: grid;
row-gap: 14px;
margin: 24px 0 28px;
text-align: right;
}
.contact-grid.contact-grid--form .details > a,
.contact-grid.contact-grid--form .details > span {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 12px;
align-items: baseline;
direction: rtl;
text-align: right;
}
.contact-grid.contact-grid--form .details strong {
text-align: right;
}
.contact-grid.contact-grid--form .details .detail-value {
min-width: 0;
text-align: right;
}
.contact-grid.contact-grid--form .details .detail-value[dir="ltr"] {
unicode-bidi: isolate;
}
@media (min-width: 1200px) {
.contact-grid.contact-grid--form {
grid-template-columns: .9fr 1.1fr;
}
.contact-grid.contact-grid--form .form-grid > p:first-child {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-template-page-contact-php .hero {
padding: 74px 48px;
}
.contact-grid.contact-grid--form > .contact-info,
.contact-grid.contact-grid--form > .contact-form {
padding: 56px 48px;
}
}
@media (min-width: 821px) and (max-width: 1199px) {
.contact-grid.contact-grid--form {
grid-template-columns: .9fr 1.1fr;
}
.contact-grid.contact-grid--form .form-grid > p:first-child {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-template-page-contact-php .hero {
padding: 64px 32px;
}
.contact-grid.contact-grid--form > .contact-info,
.contact-grid.contact-grid--form > .contact-form {
padding: 48px 32px;
}
}
@media (min-width: 601px) and (max-width: 820px) {
.contact-grid.contact-grid--form {
grid-template-columns: 1fr;
}
.contact-grid.contact-grid--form .form-grid > p:first-child {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-template-page-contact-php .hero {
padding: 56px 32px;
}
.contact-grid.contact-grid--form > .contact-info,
.contact-grid.contact-grid--form > .contact-form {
padding: 48px 32px;
}
}
@media (max-width: 600px) {
.contact-grid.contact-grid--form {
grid-template-columns: 1fr;
}
.contact-grid.contact-grid--form .form-grid > p:first-child {
grid-template-columns: minmax(0, 1fr);
}
body.page-template-page-contact-php .hero {
padding: 44px 20px;
}
.contact-grid.contact-grid--form > .contact-info,
.contact-grid.contact-grid--form > .contact-form {
padding: 40px 20px;
}
}
/* ----------------------------------------------------------------
Hero slideshow
---------------------------------------------------------------- */
/* Slides fill the hero on top of the section's inline background.
background-size and background-position match the .home-hero rule. */
.hero-slides {
position: absolute;
inset: 0;
z-index: 1;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: 50% 43%;
opacity: 0;
transition: opacity 1200ms ease-in-out;
}
.hero-slide.active {
opacity: 1;
}
/* Gradient overlay sits above the slides at all times.
The gradients are byte-identical to RONLY_HOME_HERO_GRADIENTS. */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background-image: linear-gradient(to left,rgba(8,32,38,.72) 0%,rgba(8,32,38,.38) 48%,rgba(8,32,38,.12) 100%),linear-gradient(to top,rgba(8,32,38,.94) 0%,rgba(8,32,38,.62) 46%,rgba(8,32,38,.3) 100%);
}
/* Hero text and search form above everything. */
.home-hero .inner {
position: relative;
z-index: 3;
}
/* Reduced motion: image 1 only, no timer, no transition. */
@media (prefers-reduced-motion: reduce) {
.hero-slide {
opacity: 1;
transition: none;
}
.hero-slides .hero-slide:not(:first-child) {
display: none;
}
}