/*
Theme Name: Radiowell
Description: Custom theme for Radiowell
Author: Axel
Author URI: https://oncotton.net
Version: 1.0.0
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
/* ============================================================
CRITICAL (ABOVE THE FOLD)
- variables
- base type
- header/nav (fixed)
- unified buttons
- unified Swiper arrows
============================================================ */
:root{
/* Header / layout */
--header-height: 72px;
--header-color: #fff;
--offcanvas-width: 560px;
/* Off-canvas palette */
--nav-bg: #ffffff;
--nav-fg: #111111;
/* Burger icon */
--burger-line-w: 32px;
--burger-line-h: 4px;
--burger-gap: 10px;
--burger-radius: 999px;
--burger-offset: calc(var(--burger-gap)/2 + var(--burger-line-h)/2);
}
b, strong {
}
.post-edit-link {position: relative; left: 10px; bottom: 10px; background: rgb(121, 25, 25); border-radius: 30px; padding: 5px 10px; color: #FFF; text-decoration: none; font-weight: 700; font-size: 10px;}
.wp-block-cover.sticky {
position: sticky;
top: 0;
z-index: -1
}
.wp-block-cover {
position: relative;
z-index: 2
}
h1 {padding: 40px 0 0}
h2 {text-transform: uppercase; padding: 0; margin: 0}
h2 strong {
color: var(--wp--preset--color--accent);
}
.hero-area h2 {font-size: clamp(3.5rem, 0.5rem + 7vw, 8.5rem)}
h2, h3 {text-transform: uppercase}
/* ----- Fixed Header ----- */
#radiowell-content { position: relative; padding-top: var(--header-height); }
body.admin-bar .site-header { top: 32px; }
.gap-20 { gap: 40px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.my-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.max-20 { max-width: 760px; margin: 0 auto; }
.wp-block-columns {gap: 40px}
/* ── Content-width constraint for non-alignfull blocks ── */
.wp-block-columns:not(.alignfull),
.wp-block-query:not(.alignfull) {
max-width: var(--wp--style--global--content-size, 1200px);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* Reset for blocks nested inside cover or columns (already constrained by parent) */
.wp-block-cover .wp-block-query:not(.alignfull),
.wp-block-columns .wp-block-columns:not(.alignfull) {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.height-100 {height: 420px}
.wp-block-buttons {
margin: 40px 0;
gap: 15px;
}
.wp-block-buttons a {
border-radius: 0
}
.wp-block-button:not(.is-style-outline) a {
background: var(--wp--preset--color--primary);
}
/* ── Shared base: arrow icon ── */
.wp-block-button__link,
.wp-block-post-excerpt__more-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.wp-block-button__link::after,
.wp-block-post-excerpt__more-link::after,
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-white-background-color::after
{
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-left: 0.6em;
flex-shrink: 0;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
transition: transform 0.25s ease;
}
/* White arrow on solid + white-colour outline buttons */
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.wp-block-button__link.has-white-color::after {
background-image: url("data:image/svg+xml;utf8,");
}
.cta a {text-decoration:none; border-bottom: solid 1px rgba(255, 255, 255, 0.479); padding-bottom: 4px}
.cta a:hover {opacity: .4}
.cta {margin-top: -30px; font-size: 0.825rem}
/* ── Solid button hover ── */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(22, 52, 92, 0.28);
background: var(--wp--preset--color--accent) !important;
}
/* ── Outline button hover ── */
.is-style-outline .wp-block-button__link {
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
transform 0.22s ease, box-shadow 0.22s ease;
}
.is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--primary) !important;
color: #fff !important;
border-color: var(--wp--preset--color--primary) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(22, 52, 92, 0.22);
}
/* White outline variant (on dark backgrounds) */
.is-style-outline .wp-block-button__link.has-white-color:hover {
background: #fff !important;
color: var(--wp--preset--color--primary) !important;
border-color: #fff !important;
}
/* Arrow flips colour after fill */
.is-style-outline .wp-block-button__link:hover::after {
background-image: url("data:image/svg+xml;utf8,");
}
.is-style-outline .wp-block-button__link.has-white-color:hover::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* ── Arrow slides right on hover (both types) ── */
.wp-block-button__link:hover::after,
.wp-block-post-excerpt__more-link:hover::after {
transform: translateX(5px);
}
.has-accent-background-color {color: #000 !important}
.wp-block-post-excerpt__excerpt {padding: 0 0 20px}
.wp-block-separator {border-top: 1px solid;margin:30px 0 0; padding-bottom: 30px}
/* Modern tick-style list */
.wp-block-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.wp-block-list li {
position: relative;
padding-left: 2rem;
margin-bottom: 0.75rem;
font-size: 1rem;
line-height: 1.4;
}
.wp-block-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #333
font-weight: 600;
font-size: 1.1rem;
}
/* Phone list override */
.wp-block-list.tel-list li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
.wp-block-list.address-list li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
.wp-block-list.address-list {margin: 40px 0}
body.page-id-26 :where(.wp-block-columns) {margin-bottom: 0}
/* Pill badge shown over featured image */
.radiowell-card__pill{
position:absolute;
top:12px;
right:12px;
display:inline-block;
padding:4px 10px;
font-size:0.825rem;
line-height:1;
border-radius:999px;
background: var(--wp--preset--color--dark);
color:#fff;
letter-spacing:.3px;
z-index:2;
}
.radiowell-card__pill--news{
background: var(--wp--preset--color--dark);
}
.radiowell-card__pill--project{
background: var(--wp--preset--color--dark);
}
.radiowell-ratio-4-3{
position:relative;
aspect-ratio:4 / 3;
overflow:hidden;
margin-bottom:12px;
}
.radiowell-ratio-4-3 img.radiowell-ratio-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.news-section h3 {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size: 0.825rem !important}
.news-section .wp-block-cover__inner-container {margin: 0 !important}
.news-section .wp-block-post {display: flex; justify-content: space-between;}
/* ========================================
BASE HEADER
======================================== */
.site-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 9999;
background: transparent;
transition: transform .36s ease, background-color .24s ease, box-shadow .24s ease;
will-change: transform, background-color, box-shadow;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0;
transition: background-color .3s ease, box-shadow .3s ease;
background: var(--wp--preset--color--black);
padding: 0 20px;
margin: 0;
}
.scrolled .header-container {
background: rgba(0, 0, 0, 1);
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.anim-right {
will-change: transform;
transition: transform 0.1s ease-out;
padding: 10px 80px 10px 10px;
color: #000000;
font-weight: 300
}
.anim-right.scroll-out {
transform: translateX(100vw); /* moves completely off screen to the right */
opacity: 0;
}
.site-branding svg {fill: #fff;}
img.custom-logo {
height: 44px; width: auto; display: block;
transition: filter 150ms ease;
}
body.scrolled .site-header {
position: fixed;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transform: translateY(0);
}
body.scrolled .header-inner { padding-block: 10px; }
.site-logo svg {
height: 20px;
width: auto;
display: block;
}
/* Respect radiowelln prefs */
@media (prefers-reduced-radiowelln: reduce){
.site-header, .header-container { transition: none; transform: none; }
}
/* ========================================
NAV & MEGA MENU FIXES
- Header/nav always above dropdown
- Dropdown pinned to header bottom (JS sets top)
- Mobile unaffected (falls back to off-canvas flow)
======================================== */
#site-navigation .menu > li > a { cursor: pointer; }
/* --- Fixed header base (already present) --- */
body.scrolled .site-header {
position: fixed;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transform: translateY(0);
}
/* --- Auto-hide on scroll down --- */
.site-header {
transform: translateY(0);
transition: transform .36s ease, background-color .24s ease, box-shadow .24s ease;
will-change: transform, background-color, box-shadow;
}
/* When user is scrolling down, slide header out of view */
body.nav-hide .site-header {
transform: translateY(-110%);
}
/* Keep header visible when overlays are open */
body.nav-open .site-header,
body.search-open .site-header {
transform: translateY(0) !important;
}
/* Mobile: hide header when search overlay is open.
The overlay is full-screen and has its own close button,
so the header is not needed — and its compositor layer
(will-change: transform) paints above the overlay on mobile. */
@media (max-width: 720px) {
body.search-open .site-header {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
}
/* Admin bar offset (WP) when fixed */
body.admin-bar .site-header {
top: 0;
}
body.admin-bar.scrolled .site-header {
top: 32px; /* WP admin bar height on desktop */
}
/* Respect radiowelln prefs */
@media (prefers-reduced-radiowelln: reduce){
.site-header { transition: none; transform: none; }
}
/* Optional: slightly tighter padding when scrolled */
body.scrolled .header-inner { padding-block: 10px; }
/* ========================================
HEADER ACTIONS (search + hamburger row)
======================================== */
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* ========================================
SEARCH BUTTON
======================================== */
.floating-search {
background: transparent;
width: 30px;
height: 30px;
padding: 0;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 0;
color: #fff
}
.floating-search svg {
width: 20px;
height: 20px;
display: block;
}
/* Prevent body scroll when search overlay is open */
body.no-scroll,
body.search-open {
overflow: hidden;
/* iOS momentum scroll lock */
-webkit-overflow-scrolling: auto;
}
.no-scroll .floating-search {
opacity: 0
}
/* GET A QUOTE button */
.btn-quote {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.btn-quote:hover {
background: #fff;
color: var(--wp--preset--color--primary);
}
@media (max-width: 720px) {
.btn-quote { display: none; }
}
.menu-navigation-container ul {font-family: var(--wp--preset--font-family--funnel-sans);
}
/* ========================================
HAMBURGER (mobile only)
======================================== */
.mobile-menu {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 20px;
height: 40px;
border: 0;
background: transparent;
cursor: pointer;
}
.mobile-menu .bar {
width: 24px;
height: 2px;
border-radius: 1px;
background: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu[aria-expanded="true"] .bar {
background: #000;
}
.search-hamburger {
display: flex;
align-items: center;
gap: 20px;
position: relative;
z-index: 999;
}
/* When nav is open */
body.nav-open .mobile-menu .bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
body.nav-open .mobile-menu .bar:nth-child(2) {
opacity: 0;
}
body.nav-open .mobile-menu .bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 721px){
.mobile-menu { display: none; }
}
#footer .wp-block-image img{
filter: brightness(0) invert(1);
}
/* ========================================
MOBILE OFF-CANVAS NAV
======================================== */
@media (max-width: 720px) {
/* Full-screen slide-in panel — sits just below the sticky header */
#site-navigation.offcanvas {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
z-index: 9998; /* header is 9999, stays above */
transform: translateX(100%);
transition: transform .38s cubic-bezier(.4,0,.2,1);
background: var(--wp--preset--color--black, #0a1628);
overflow: hidden;
}
#site-navigation.offcanvas.is-open {
transform: translateX(0);
}
/* Wrapper — fills all space above the pinned footer */
.mobile-menu-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 84px; /* matches footer height */
overflow: hidden;
}
/* Main menu scrolls within the wrapper */
.mobile-menu-wrapper > ul.menu {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
/* ── Main menu ── */
#site-navigation .sub-menu,
#site-navigation .mega-dropdown {
display: none !important;
}
/* Un-hide sub-menus that have been cloned into slide panels */
#site-navigation .submenu-panel .sub-menu {
display: block !important;
}
#site-navigation ul.menu {
display: block;
list-style: none;
margin: 0;
padding: 72px 0 24px; /* clears the header */
}
#site-navigation .menu > li {
position: relative;
border-bottom: 1px solid rgba(255,255,255,.07);
}
#site-navigation .menu > li > a {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 72px 20px 28px;
text-decoration: none;
font-size: 1.65rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.1;
}
/* Icon cloned from mega-dropdown (inserted by JS) */
.mobile-mega-icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
opacity: .65;
}
.mobile-mega-icon svg {
width: 22px;
height: 22px;
display: block;
}
/* ── Submenu toggle arrow ── */
.submenu-toggle {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: transparent;
border: 0;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.submenu-toggle::after {
content: '';
display: block;
width: 18px;
height: 18px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* ── Sub-panel ── slides in over the main menu ── */
.submenu-panel {
position: absolute;
inset: 0;
background: var(--wp--preset--color--black, #0a1628);
transform: translateX(100%);
transition: transform .38s cubic-bezier(.4,0,.2,1);
overflow-y: auto;
overscroll-behavior: contain;
}
.submenu-panel.is-active {
transform: translateX(0);
}
.submenu-panel ul {
list-style: none;
padding: 0;
margin: 0;
}
.submenu-panel li {
border-bottom: 1px solid rgba(255,255,255,.07);
}
.submenu-panel a {
display: block;
padding: 18px 28px;
text-decoration: none;
font-size: 1.15rem;
font-weight: 600;
color: rgba(255,255,255,.75);
letter-spacing: -0.01em;
}
/* Sub-panel header row (back button + title) */
.submenu-panel-header {
display: flex;
align-items: center;
gap: 14px;
padding: 0 20px;
height: 72px;
border-bottom: 1px solid rgba(255,255,255,.1);
margin-top: 60px
}
.submenu-back {
width: 36px;
height: 36px;
background: rgba(255,255,255,.1);
border: 0;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.submenu-back::before {
content: '';
display: block;
width: 18px;
height: 18px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.submenu-panel-title {
font-size: 1.25rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.025em;
}
/* ── Close button (always on top, top-right corner) ── */
.mobile-nav-close {
position: absolute;
top: 16px;
right: 18px;
z-index: 10; /* above sub-panels */
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
.mobile-nav-close svg {
width: 18px;
height: 18px;
display: block;
}
/* ── Footer: CTA + search ── */
.mobile-nav-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-top: 1px solid rgba(255,255,255,.1);
background: var(--wp--preset--color--black, #0a1628);
z-index: 1;
}
.mobile-nav-footer .btn-quote {
flex: 1;
display: block;
text-align: center;
padding: 15px 20px;
text-decoration: none;
}
.mobile-nav-footer .nav-search-btn {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255,255,255,.1);
border: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
.mobile-nav-footer .nav-search-btn svg {
width: 22px;
height: 22px;
display: block;
}
}
/* ========================================
OVERLAY (mobile nav backdrop)
======================================== */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: 999;
height: 100vh;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-overlay.is-active {
opacity: 1;
pointer-events: auto;
}
.nav-overlay[hidden] {
display:block;
}
/* ========================================
DESKTOP NAV + DROPDOWNS
======================================== */
@media (min-width: 721px){
#site-navigation { margin: 0 0 0 40px; font-size: 0.825rem; }
#site-navigation .menu {
display: flex;
align-items: center;
gap: 40px;
justify-content: start;
margin: 7px 0;
}
.header-actions {
gap: 20px;
margin-left: auto;
}
#site-navigation .menu > li {
position: relative;
list-style: none;
}
#site-navigation .menu > li > a {
display: inline-block;
padding: 10px 6px;
text-decoration: none;
}
.mc-signup-form {
width: 100%;
box-sizing: border-box;
}
.mc-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
width: 100%;
}
.mc-field {
flex: 1;
display: flex;
flex-direction: column;
}
.mc-field label {
font-size: 14px;
margin-bottom: 4px;
color: #333;
}
.mc-field input {
border: none;
border-bottom: 1px solid #444;
background: transparent;
padding: 8px 4px;
outline: none;
}
.mc-row button {
background-color: color(display-p3 0.69 0.839 0.722);
color: white;
border: none;
padding: 23px 50px;
border-radius: 0;
cursor: pointer;
align-self: center;
transition: background 0.2s ease;
flex-shrink: 0;
}
.mc-row button:hover {
background-color: #8cb698;
}
@media (max-width: 700px) {
.mc-row {
flex-direction: column;
align-items: stretch;
}
.mc-row button {
width: 100%;
}
}
/* ============================================================
GUTENBERG BLOCKS
============================================================ */
/* Style any Details inside a Group */
.wp-block-group details.wp-block-details {
border-top: 1px solid rgba(0,0,0,.15);
}
.wp-block-group details.wp-block-details:last-of-type {
border-bottom: 1px solid rgba(0,0,0,.15);
}
/* Summary row layout (text left, icon right) */
.wp-block-group details.wp-block-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(14px, 2vw, 22px) 0;
font-size: var(--wp--preset--font-size--medium); font-weight: 300;
cursor: pointer;
list-style: none;
outline: none;
}
/* Remove WebKit marker */
.wp-block-group details.wp-block-details > summary::-webkit-details-marker { display: none; }
/* Right-side + / – icon */
/* Right-side + / X icon */
.wp-block-group details.wp-block-details > summary::after {
content: "+";
display: inline-block;
font-weight: 300;
line-height: 1;
margin-left: 1rem;
opacity: .85;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* When open, rotate the + to form an X */
.wp-block-group details.wp-block-details[open] > summary::after {
transform: rotate(45deg); /* 45° makes + look like × */
opacity: 1;
}
/* The JS creates an inner wrapper to animate height */
.wp-block-group .radiowell-acc-panel {
overflow: hidden;
height: 0; /* will be animated by JS */
will-change: height;
}
.wp-block-group .radiowell-acc-panel > .radiowell-acc-inner {
padding: 0 0 clamp(14px, 2vw, 20px) 0;
}
/* Nice focus ring for keyboard users */
.wp-block-group details.wp-block-details > summary:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
/* Tidy inner spacing */
.wp-block-group .radiowell-acc-inner > *:first-child { margin-top: 0; }
.wp-block-group .radiowell-acc-inner > *:last-child { margin-bottom: 0; }
.wp-block-group {
margin: 80px auto!important;
}
.wp-block-cover__inner-container {margin: 20px auto !important}
#footer .wp-block-cover__inner-container {margin: 20px auto !important; max-width: var(--wp--style--global--content-size) !important;}
#footer .wp-block-heading {font-size: 1.125rem !important; margin-bottom: 20px}
#footer .wp-block-list {font-size: 1rem; }
#footer .wp-block-list li {padding-left: 0}
#footer .wp-block-list li::before {display: none; }
.container-news {max-width: var(--wp--style--global--content-size, 1200px);
margin-left: auto;
margin-right: auto;
padding-left: clamp(20px, 4vw, 48px);
padding-right: clamp(20px, 4vw, 48px);
box-sizing: border-box;}
.entry-header.news h1 {max-width: 660px; font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem)}
.hero-post-date {
display: block;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
margin-top: 0.5rem;
}
.hero-image {
position: relative;
}
.hero-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.4) 80%,
rgba(0, 0, 0, 0.1) 100%
);
pointer-events: none;
}
.hero-overlay {
position: relative;
z-index: 1;
}
/* Grid container */
.search-results-item {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
align-items: stretch;
}
/* Individual result cards */
.search-results-item article {
width: 100%;
}
/* Tablet breakpoint (optional) */
@media (max-width: 1024px) {
.search-results-item {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile breakpoint */
@media (max-width: 640px) {
.search-results-item {
grid-template-columns: 1fr;
}
}
.post-hero-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.post-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder styling */
.hero-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#e7e7e7 0%,
#e2e2e2 50%,
#d0d0d0 100%
);
color: #ffffff;
text-align: center;
}
.container + h2 { margin: 0; padding: 0
}
body.home .wp-block-columns.alignfull {
width: calc(100%);
margin: 0;
max-width: 100%;
gap: 0
}
.wp-block-gallery img {padding: 5px}
.wp-block-columns.alignfull {
width: calc(100%);
margin: 10px;
max-width: 100%;
gap: 10px
}
.wp-block-columns.alignfull.no-margin {
margin: 10px 0 !important;
width: calc(100%)
}
.widget {
width: var(--wp--style--global--content-size);
margin: 0 auto;
max-width: 100%;
padding-top: 100px
}
/* Ensure the post item can position children */
.wp-block-post {
position: relative;
}
/* Anchor the image as the positioning context */
.wp-block-post-featured-image {
position: relative;
}
/* Date pill styling */
.wp-block-post-date {
background: rgba(0, 0, 0, 0.75);
color: #ffffff;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 300;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Remove default margins */
.wp-block-post-date time {
margin: 0;
display: block;
}
/* Optional: ensure image stays clean */
.wp-block-post-featured-image img {
display: block;
}
#footer, .footer {
font-size: 0.825rem; line-height: 1.8rem;
background: var(--wp--preset--color--dark);
padding-top: 20px
}
.footer-contact .wp-block-columns {margin: 20px 0}
.footer ul {padding: 0; margin: 0}
.footer ul li {
padding: 10px 0;
list-style: none
}
.footer .wp-block-heading {
color: var(--wp--preset--color--primary);
}
.footer ul li a {
text-decoration: none
}
.footer-contact h2 {
margin-bottom: 40px
}
ul.styled-list {list-style: none; padding: 0}
ul.product-list h4, ul.styled-list li, ul.product-list h2, ul.product-list h3 {
border-bottom: solid 1px;
padding: 25px 20px 25px 0;
margin: 0;
}
.wp-block-query .wp-block-post-template {
gap: 20px
}
.taxonomy-project_category a {
text-decoration: none;
font-size: var(--wp--preset--font-size--extra-small)
}
.wp-block-query .wp-block-post-title {
margin: 0
}
.product h4, ul.styled-list li {font-size: var(--wp--preset--font-size--medium); font-weight: 300; padding: 0;}
ul.styled-list li {padding: 20px 0}
ul.product-list h4 a, ul.styled-list li a {
color: rgb(0,0,0) !important;
transition: color 0.2s ease;
}
ul.product-list h4 a:hover, ul.styled-list li a:hover {
color: var(--wp--preset--color--primary) !important;
}
ul.product-list li:first-child h4, ul.styled-list li:first-child {
border-top: solid 1px;
padding-top: 20px;
}
#search-backdrop.nav-overlay[hidden]{ display:block; } /* keep layout-free when hidden */
/* ===== Overlay shell ===== */
/* Keep "Search" heading visually hidden — it's for screen readers only */
#search-title.sr-only {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important;
white-space: nowrap !important; border: 0 !important;
}
.search-overlay {
position: fixed; inset: 0; z-index: 100000; /* above header (9999) and mobile nav (9998) */
isolation: isolate; /* own stacking context — prevents compositor-layer bleed-through */
display: grid; place-items: start center;
padding: clamp(24px, 4vw, 48px);
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
visibility: hidden; opacity: 0;
transition: opacity .25s ease, visibility 0s linear .25s;
pointer-events: none;
overflow-y: auto; /* allow scrolling when results are long */
-webkit-overflow-scrolling: touch;
}
.search-overlay.is-active {
visibility: visible; opacity: 1; pointer-events: auto;
transition: opacity .25s ease, visibility 0s;
}
/* Close button (top-right like your mock) */
.search-overlay__close{
position: fixed; top: 14px; right: 14px;
width: 34px; height: 34px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.9);
color: #fff; background: rgba(0,0,0,.35);
display: grid; place-items: center; font-size: 22px; line-height: 1;
cursor: pointer;
backdrop-filter: blur(3px);
}
/* Center box that holds the form + results */
.search-overlay__box{
width: min(920px, 92vw);
margin-top: clamp(8vh, 14vh, 24vh);
margin-left: auto;
margin-right: auto
}
/* Big pill input like screenshot */
.search-overlay__form{
position: relative;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
display: flex; align-items: center;
min-height: 76px;
padding: 0 64px 0 28px;
}
.search-overlay__input{
appearance: none; border: 0; outline: 0;
width: 100%;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.2;
background: transparent;
color: #111;
}
.search-overlay__input::placeholder{ color: #444; opacity: .7; }
.search-overlay__submit{
position: absolute; right: 18px;
display: inline-grid; place-items: center;
width: 44px; height: 44px; border-radius: 999px;
border: 0; background: #111; color: #fff; cursor: pointer;
}
/* Results list */
.search-overlay__results{ margin-top: 18px; }
.search-overlay__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.search-overlay__list li {background: #fff; border-radius: 10px; padding: 20px}
.search-item__link{
display: grid; gap: 4px;
padding: 12px 14px; border-radius: 12px;
text-decoration: none; color: inherit;
background: rgba(255,255,255,.9);
border: 1px solid rgba(0,0,0,.06);
}
.search-item a {text-decoration: none}
.search-item__link:hover{ background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.search-item__title{ font-weight: 700; display: block}
.search-item__type{ font-size: .85rem; opacity: .6; }
.search-item__excerpt{ opacity: .8; }
.search-overlay__empty{ color: #fff; opacity: .9; padding: 8px 2px; }
.search-overlay__hint{ color:#fff; opacity:.75; margin-top: 8px; font-size: .95rem; }
/* Search overlay — mobile */
@media (max-width: 720px) {
.search-overlay {
padding-top: 68px; /* dark zone at top — close button floats here */
align-content: start;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.search-overlay__box {
width: 100%;
flex-shrink: 0;
margin-top: 0;
padding: 28px 24px 36px; /* generous internal padding; no need to clear close btn */
box-sizing: border-box;
}
/* Hide the sr-only "Search" heading on mobile — redundant with the placeholder */
#search-title.sr-only {
display: none;
}
.search-overlay__form {
min-height: 60px;
padding: 0 56px 0 20px;
border-radius: 12px;
}
.search-overlay__input {
font-size: 18px;
}
.search-overlay__submit {
right: 10px;
width: 40px;
height: 40px;
}
/* Close button sits in the dark header zone above the white box */
.search-overlay__close {
position: fixed;
top: 18px;
right: 20px;
z-index: 100001; /* above overlay */
}
}
/* Reduced radiowelln */
@media (prefers-reduced-radiowelln: reduce){
.search-overlay,
.nav-overlay{ transition: none !important; }
}
.search-item__pill {
position: absolute;
top: 8px;
right: 12px;
background: #111;
color: #fff;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 999px;
line-height: 1.2;
}
.search-item {
position: relative;
}
.search-overlay__more {
display: block;
margin-top: 12px;
font-weight: 600;
text-align: center;
text-decoration: underline;
}
.search-overlay__summary, .search-overlay__summary a{color: #fff}
.search-overlay__list .type-itinerary .search-item__link {background: #eadfdf; color: #000}
.search-overlay__list .type-destination .search-item__link {background: #e2eadf; color: #000}
.search-overlay__list .type-page .search-item__link {background: #dfe6ea; color: #000}
.search-overlay__list .type-itinerary .search-item__pill{background: #9a8686}
.search-overlay__list .type-destination .search-item__pill{background: #657161}
.search-overlay__list .type-page .search-item__pill{background: #5f6b71}
/* Hide the header triggers while the SEARCH overlay is open */
body.search-open .floating-search,
body.search-open .mobile-menu{
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(.98);
transition: opacity .2s ease, visibility 0s linear .2s, transform .2s ease;
}
/* header-container is covered by the overlay (z-index: 100000) — no need to hide it */
/* Blur page content when search overlay is open */
#primary,
footer.footer {
transition: filter 0.3s ease;
}
body.search-open #primary,
body.search-open footer.footer {
filter: blur(8px);
pointer-events: none;
}
/* Return to normal when search closes */
body:not(.search-open) .floating-search{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
background: #fff;
border-radius: 50%;
color: #000
}
body:not(.search-open) .mobile-menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
border-radius: 50%;
color: #000
}
/* Fly up and fade out when body has .scrolling */
.reveal-ready.scrolling .floating-search{
transform-origin: 50% 0%;
will-change: transform, opacity;
animation: floatSearchFlyOut 360ms cubic-bezier(.22,.61,.36,1) forwards;
pointer-events: none; /* don't grab clicks while hidden */
}
/* When back at the top (no .scrolling), slide back in from top + fade */
.reveal-ready:not(.scrolling) .floating-search{
will-change: transform, opacity;
animation: floatSearchFlyIn 300ms cubic-bezier(.22,.61,.36,1) forwards;
pointer-events: auto;
}
@keyframes floatSearchFlyOut{
0% { opacity: 1; transform: translateY(0) scale(1); }
35% { opacity: 1; transform: translateY(-10px) scale(0.995); }
100% { opacity: 0; transform: translateY(calc(-100% - 40px)) scale(0.98); }
/* -100% = its own height; extra -40px guarantees it clears the top edge */
}
@keyframes floatSearchFlyIn{
0% { opacity: 0; transform: translateY(calc(-100% - 40px)) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Reduced radiowelln: just fade */
@media (prefers-reduced-radiowelln: reduce){
.reveal-ready.scrolling .floating-search{
animation: floatSearchFadeOut 200ms ease forwards;
}
.reveal-ready:not(.scrolling) .floating-search{
animation: floatSearchFadeIn 200ms ease forwards;
}
@keyframes floatSearchFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes floatSearchFadeIn { from{opacity:0} to{opacity:1} }
}
.reveal-ready.scrolling .reviews-slider .swiper-nav .reveal-up { opacity: 1 !important; transform: none !important; }
.footer-copyright {text-align: center;background: var(--wp--preset--color--dark);padding: 20px; margin: 0;
color: #fff; border-top: solid 1px #fff;font-size: 0.825rem;display: flex;justify-content: space-between;align-items: center
}
.footer-copyright a {color: #fff; text-decoration: none}
/* Overlay container */
.hero-overlay {
position: absolute;
inset: 0px;
display: flex;
align-items: start;
padding: min(6vw, 72px);
color: rgb(255, 255, 255);
z-index: 2;
flex-direction: column;
justify-content: center;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover; /* ensures no distortion, fills container */
object-position: center; /* keeps image centered */
display: block;
}
.hero-image {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.hero-icon img {
height: 100px;
width: 100px
}
/* Title + summary */
.hero-title {
font-size: clamp(2.2rem, 6vw, 5rem);
line-height: 1.05;
margin: 0;
display: flex;
align-items: center;
gap: 30px;
}
.grid-3 {grid-template-columns: repeat(3, minmax(0, 1fr));list-style: none; margin: 0; padding: 0}
.wp-post-image {max-width: 100%; height: auto}
.pa-materials, .pa-materials-heading, .finishes, .additional-details-heading, .additional-details-grid {max-width: var(--wp--style--global--content-size);margin: 0 auto; }
.pa-materials-heading {border-bottom: solid 1px #000000; padding: 10px 0!important; margin-bottom: 40px}
.pa-materials-grid, .finishes-grid, .additional-details-grid {display: flex; padding: 0; margin: 0 auto 20px; grid:24px}
.pa-materials-grid li, .finishes-grid li, .additional-details-item, .border-column .wp-block-column {list-style: none; border-left: solid 1px #000000; padding: 0 20px; margin: 40px 0}
.border-column .wp-block-columns .wp-block-column {border: none;padding: 0;margin: 0}
.border-column .wp-block-columns {gap: 10px}
.border-column .wp-block-column .wp-block-heading {font-size: 1rem; font-weight: 600}
.pa-mat-head {text-decoration: none; gap: 10px;display: flex;}
.pa-mat-desc {font-size: 0.825rem}
.material-icons-vertical { display: flex; gap: 6px; margin: 0 20px 20px}
.material-icon-wrap { line-height: 0;}
.finishes-title {display: block; font-family: var(--wp--preset--font-family--haffer);font-weight: 600;}
.finishes-desc {font-size: 0.825rem}
.child-products-with-icons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
max-width: var(--wp--style--global--content-size);
margin: 0 auto;
}
/* Each child product box */
.child-product {
background: var(--wp--preset--color--light);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Titles and links */
.child-product-title {
margin: 0;
font-size: 1.125rem;
}
.child-product-title a {
display: block;
padding: 16px 20px 0;
text-decoration: none;
color: inherit;
}
/* Product text */
.child-product-text p {
margin: 0 0 16px;
padding: 0 20px;
font-size: 0.825rem;
}
/* Image support if used */
.child-product img {
max-width: 100%;
height: auto;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Optional hover effect */
.child-product:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transform: translateY(-2px);
transition: all 0.2s ease-in-out;
}
/** RESPONSIVENESS **/
.itinerary-filters {margin: 40px 20px !important}
.wp-block-columns .wp-block-cover:not(.alignwide):not(.alignfull), .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: var(--wp--style--global--content-size);
margin-left: 0;
margin-right: 0;
border-radius: ;
}
.itinerary-slider.slider--show-1 .swiper-slide.itinerary-slide {
height: auto
}
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.destination-meta { grid-template-columns: 1fr; }
.travel-time.two-col { grid-template-columns: 1fr; }
.hero-image { height: 70vh; }
.reviews-slider{ grid-template-columns:100%; }
.reviews-slider .reviews-quote{ grid-column:1/-1; font-size: clamp(48px, 14vw, 96px); opacity:.12; }
.reviews-slider .reviews-nav{ grid-column:1/-1; padding: 8px 0 12px; }
.reviews-slider .reviews-swiper{ grid-column:1/-1; }
body:not(.home) .wp-block-columns-is-layout-flex {margin: 0 20px}
}
@media (max-width: 820px){
/* For the LCP element only */
.reveal-up.lcp-candidate {
opacity: 1; /* ensure paint */
transform: none; /* avoid transform-delayed paint */
transition: none; /* no animation on first view */
will-change: auto; /* avoid forcing a new composite layer */
}
.itinerary-card__body{
left: 20px;
right: 20px;
top: 50%;
bottom: auto; /* reset */
transform: translateY(-50%);
max-width: none;
padding-right: 20px;
}
.itinerary-card__body{ left:20px; right:20px; bottom:22vh; max-width:none; padding-right:20px; }
.itinerary-card__title{ font-size: clamp(1.9rem, 10vw, 3rem); }
body.admin-bar .site-header{ top: 46px; }
.swiper-nav {bottom: -40px; left: 0}
.itinerary-swiper .swiper-nav {bottom: 50px}
.itinerary-swiper .swiper-nav {
left: 30px
}
.search-overlay__box {padding-left: 20px}
.header-container {
padding: 10px 20px;
}
.floating-search {
/* position stays static/inline inside header-actions */
}
.scrolling .header-container {
background: #fff;
background-color: rgba(255, 255, 255, 0.95); /* or any color */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.scrolling .custom-logo.logo--invert, .scrolling .mobile-menu--on-light, .scrolling .mobile-menu {
filter: none !important;
color: #000;
}
.site-branding img.custom-logo {
height: 35px
}
.floating-search svg {width: 30px}
.footer {margin: 0 20px}
.footer ul li {padding: 5px 0}
}
/* ===== Minimal Gravity Forms Grid (Theme Framework compatible) ===== */
.gfield--type-honeypot {position: absolute; top:-100px; opacity: 0;}
h2.gform_submission_error {font-size: 23px;
font-weight: 600;color: #b00;}
.gform_required_legend {display: none}
.gform_wrapper .gfield_description.gfield_validation_message {color: #b00; font-weight: 600}
/* 12-col grid for each row container */
.gform_wrapper .gform-grid-row,
.gform_wrapper .gform_page .gform_page_fields .gform_fields {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px; /* space between fields */
}
/* Map GF width utility classes to grid spans */
.gform_wrapper .gfield--width-full { grid-column: span 12; }
.gform_wrapper .gfield--width-three-quarter{ grid-column: span 9; }
.gform_wrapper .gfield--width-two-thirds { grid-column: span 8; }
.gform_wrapper .gfield--width-half { grid-column: span 6; }
.gform_wrapper .gfield--width-third { grid-column: span 4; }
.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
/* Make individual fields grid items */
.gform_wrapper .gform_fields > .gfield {
min-width: 0; /* prevent overflow */
}
/* Complex fields (e.g., Name) use their own grid */
.gform_wrapper .ginput_complex.gform-grid-row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
}
/* Equal split for complex sub-fields when size is "auto" */
.gform_wrapper .ginput_complex .gform-grid-col--size-auto { grid-column: span 6; }
/* If GF outputs explicit sizes, support them too */
.gform_wrapper .ginput_complex .gform-grid-col--size-1 { grid-column: span 1; }
.gform_wrapper .ginput_complex .gform-grid-col--size-2 { grid-column: span 2; }
.gform_wrapper .ginput_complex .gform-grid-col--size-3 { grid-column: span 3; }
.gform_wrapper .ginput_complex .gform-grid-col--size-4 { grid-column: span 4; }
.gform_wrapper .ginput_complex .gform-grid-col--size-5 { grid-column: span 5; }
.gform_wrapper .ginput_complex .gform-grid-col--size-6 { grid-column: span 6; }
.gform_wrapper .ginput_complex .gform-grid-col--size-7 { grid-column: span 7; }
.gform_wrapper .ginput_complex .gform-grid-col--size-8 { grid-column: span 8; }
.gform_wrapper .ginput_complex .gform-grid-col--size-9 { grid-column: span 9; }
.gform_wrapper .ginput_complex .gform-grid-col--size-10{ grid-column: span 10; }
.gform_wrapper .ginput_complex .gform-grid-col--size-11{ grid-column: span 11; }
.gform_wrapper .ginput_complex .gform-grid-col--size-12{ grid-column: span 12; }
/* Page footers/buttons line up under the grid */
.gform_wrapper .gform-page-footer,
.gform_wrapper .gform_page_footer {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
}
/* ===== Basic input styling you can customize ===== */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
all: unset;
width: 100%;
padding: 10px 12px;
border: 1px solid #d6d6d6;
border-radius: 8px;
font-size: 16px;
line-height: 1.4;
box-sizing: border-box;
background: #fff;
}
.gform_wrapper select {
padding-right: 2.5em; /* make room for arrow */
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 0.7em center;
background-size: 1em;
}
.gform_wrapper .gform_page .gform_page_fields .gform_fields .gfield--type-section {
grid-column: 1 / -1; /* spans the entire grid */
width: 100%; /* ensures full width */
}
.gfield.number-nights {
width: 100px
}
.gfield--width-half.width-sm {
grid-column: span 3;
}
.gfield--width-half.width-sm.width-sm-last:after {
grid-column: span 6;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
outline: none;
border-color: #003376; /* match your theme color */
box-shadow: 0 0 0 3px rgba(0,51,118,.15);
}
.ginput_container_number .small {width: 90px !important}
/* Labels & sublabels spacing */
.gform_wrapper .gfield_label { font-weight: 600; margin-bottom: 6px; display:block; }
.gform_wrapper .gform-field-label--type-sub { font-size: 12px; color: #666; margin-top: 6px; display:block; }
/* Sections */
.gform_wrapper .gsection .gsection_title { font-size: 20px; margin: 10px 0; }
/* Datepicker icon alignment */
.gform_wrapper .ginput_container_date { display: flex; align-items: center; gap: 8px; }
/* Validation/help text */
.gform_wrapper .gfield_description { font-size: 13px; color: #666; margin-top: 6px; }
fieldset {
border: none;
padding: 0;
margin: 0
}
.gf_progressbar {background: #efefef; border-radius: 15px; margin-bottom: 20px}
.gform-theme--framework .gf_progressbar .percentbar_blue {
background: #003376;
border-radius: 15px;
color: #fff;
padding: 1px 15px 0; font-size: 0.825rem}
.gsection_title {
margin: 0;
padding: 0
}
.gform_next_button, .gform_previous_button, .gform_button {
all: unset; /* removes all inherited Gravity Forms button styles */
display: inline-block;
cursor: pointer;
padding: 10px 24px;
border: 1px solid #000;
border-radius: 30px;
font-size: 16px;
line-height: 1.2;
background: transparent;
color: #000;
text-align: center;
transition: all 0.2s ease;
}
.gform_wrapper input[type="submit"] {
background: var(--wp--preset--color--primary);
color: #fff
}
.gsection {width: 100%}
/* ===== Responsive: stack to 1 column on small screens ===== */
@media (max-width: 640px) {
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield--width-three-quarter,
.gform_wrapper .gfield--width-two-thirds,
.gform_wrapper .gfield--width-half,
.gform_wrapper .gfield--width-third,
.gform_wrapper .gfield--width-quarter {
grid-column: span 12;
}
.gform_wrapper .ginput_complex .gform-grid-col--size-auto { grid-column: span 12; }
.gform_wrapper .gform-page-footer,
.gform_wrapper .gform_page_footer { justify-content: stretch; }
.gform_wrapper .gform-page-footer .button,
.gform_wrapper .gform_page_footer .button { width: 100%; }
}
.wp-block-query h3 {font-weight: 400; font-size: 1rem}
/* ── Hero parallax ─────────────────────────────────────────── */
.wp-block-cover.alignfull {
overflow: hidden; /* clip gradient as it slides out */
}
.wp-block-cover.alignfull .wp-block-cover__gradient-background,
.wp-block-cover.alignfull h1.wp-block-heading,
.wp-block-cover.alignfull h2.wp-block-heading {
will-change: transform;
}
/* ============================================================
DESKTOP NAV: white links + MEGA MENU
============================================================ */
@media (min-width: 721px) {
/* ── Fix link colour ── */
#site-navigation .menu > li > a {
color: #fff !important;
}
/* ── Chevron on parent items ── */
.mega > a {
display: inline-flex !important;
align-items: center;
gap: 5px;
}
.mega > a::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid rgba(255,255,255,0.7);
border-bottom: 1.5px solid rgba(255,255,255,0.7);
transform: rotate(45deg) translateY(-1px);
transition: transform 0.22s ease;
flex-shrink: 0;
}
.mega.mega-open > a::after {
transform: rotate(-135deg) translateY(2px);
}
.mega.mega-open > a {
color: var(--wp--preset--color--accent) !important;
}
/* ── Mega panel (hidden by default, JS shows via mega-open) ── */
.mega-dropdown {
/* JS sets position:fixed + top/left/right at runtime */
position: fixed;
left: 0;
right: 0;
z-index: 9000;
background: rgb(9, 10, 13);
border-top: 2px solid var(--wp--preset--color--accent);
box-shadow: 0 32px 80px rgba(0,0,0,0.6);
/* two-column grid: title | sub-items */
display: grid;
grid-template-columns: 300px 300px;
align-items: start;
gap: 0;
padding: 48px max(24px, calc((100% - 1200px) / 2));
visibility: hidden;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition:
opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94),
visibility 0.22s;
}
/* ── JS adds mega-open to the when open ── */
.mega.mega-open > .mega-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ── Left: section title ── */
.mega-title {
padding-right: 48px;
border-right: 1px solid rgba(255,255,255,0.08);
align-self: start;
display: flex;
flex-direction: column;
gap: 16px;
}
.mega-icon {
color: var(--wp--preset--color--accent);
line-height: 0;
}
.mega-icon svg {
width: 40px;
height: 40px;
}
.mega-title a {
display: block;
color: #fff;
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: clamp(2rem, 2.8vw, 3.25rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
text-decoration: none;
transition: color 0.15s ease;
}
.mega-title a:hover {
color: var(--wp--preset--color--accent);
}
/* ── Right: vertical sub-item list ── */
.mega-dropdown .sub-menu {
display: flex !important;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0 0 0 48px;
gap: 0;
}
.mega-dropdown .sub-menu > li {
list-style: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mega-dropdown .sub-menu > li:last-child {
border-bottom: none;
}
/* ── Sub-menu links ── */
.mega-dropdown .sub-menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255,255,255,0.65);
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: 1.25rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
padding: 14px 0;
transition: color 0.15s ease;
}
.mega-dropdown .sub-menu > li > a::after {
content: '→';
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.15s ease, transform 0.15s ease;
font-size: 1rem;
}
.mega-dropdown .sub-menu > li > a:hover {
color: #fff;
}
.mega-dropdown .sub-menu > li > a:hover::after {
opacity: 1;
transform: translateX(0);
}
/* ── Page scrim behind open panel ── */
body.has-mega-open::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 8999;
pointer-events: none;
}
}
/* ============================================================
HOMEPAGE SECTIONS
Targeted directly at real WordPress block classes from page HTML
============================================================ */
/* ── H1 as section eyebrow / label ── */
/* On the homepage, H1 blocks act as small uppercase section labels */
h1.wp-block-heading {
color: #6b6a65;
text-transform: uppercase;
}
/* ── HOW IT WORKS — process step columns ── */
/* 4-column row that contains the .lrg-nr step numbers */
.wp-block-columns:has(.lrg-nr) {
gap: 0 !important;
align-items: stretch;
}
.wp-block-column:has(.lrg-nr) {
padding: 32px;
border-right: 1px solid var(--wp--preset--color--primary-medium);
}
.wp-block-column:has(.lrg-nr):first-child {
padding-left: 0;
}
.wp-block-column:has(.lrg-nr):last-child {
border-right: none;
padding-right: 0;
}
/* Large step number */
.lrg-nr {
font-family: var(--wp--preset--font-family--barlow-condensed) !important;
font-size: clamp(48px, 5vw, 72px) !important;
font-weight: 800 !important;
color: var(--wp--preset--color--primary-medium) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
margin-bottom: 14px;
}
/* Step H3 title */
.wp-block-column:has(.lrg-nr) h3.wp-block-heading {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.15;
margin-bottom: 12px;
}
/* Step description text */
.wp-block-column:has(.lrg-nr) .wp-block-paragraph:not(.lrg-nr) {
font-size: 13px;
color: #6b6a65;
line-height: 1.65;
}
/* ── SERVICE CARDS (Sell / Recycle full-width panels) ── */
/* Outer columns: stretch to equal height, zero gap */
.wp-block-columns.alignfull:has(> .wp-block-column > .wp-block-cover) {
gap: 0 !important;
align-items: stretch;
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover {
min-height: 100% !important;
height: 100%;
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-cover__inner-container {
padding: 48px;
max-width: none;
margin: 0;
}
/* "For Equipment Owners" tag — first paragraph inside card */
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-cover__inner-container > .wp-block-paragraph:first-child {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover.has-black-background-color .wp-block-cover__inner-container > .wp-block-paragraph:first-child {
color: var(--wp--preset--color--accent);
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover.has-primary-background-color .wp-block-cover__inner-container > .wp-block-paragraph:first-child {
color: rgba(255,255,255,0.5);
}
/* Card body paragraph */
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-cover__inner-container .wp-block-paragraph:not(:first-child) {
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: rgba(255,255,255,0.65);
}
/* Feature list inside card */
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-list {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-list li {
font-weight: 300;
color: rgba(255,255,255,0.5);
padding-left: 0;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 10px;
padding-left: 30px
}
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-list li::before {
content: '';
width: 16px;
height: 1px;
background: currentColor;
flex-shrink: 0;
top: auto;
}
/* ── STATS ROW ── */
/* Full-width columns on pale medium background */
.wp-block-columns.alignfull.has-primary-medium-background-color {
gap: 0 !important;
align-items: stretch;
}
.wp-block-columns.alignfull.has-primary-medium-background-color .wp-block-column {
padding: 48px 40px;
border-right: 1px solid rgba(0,0,0,0.08);
}
.wp-block-columns.alignfull.has-primary-medium-background-color .wp-block-column:last-child {
border-right: none;
}
/* Stat number — uses has-xl-font-size class from the block editor */
.wp-block-columns.alignfull.has-primary-medium-background-color .has-xl-font-size {
font-family: var(--wp--preset--font-family--barlow-condensed) !important;
font-size: clamp(40px, 4.5vw, 60px) !important;
font-weight: 800 !important;
color: var(--wp--preset--color--primary) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
margin-bottom: 8px;
}
/* Stat label — plain paragraph below the number */
.wp-block-columns.alignfull.has-primary-medium-background-color .wp-block-column .wp-block-paragraph:not(.has-xl-font-size) {
font-size: 12px;
font-weight: 300;
color: #6b6a65;
line-height: 1.5;
}
/* ── COMPANY / ABOUT SECTION ── */
/* Body paragraphs in the company two-column section */
.wp-block-columns:not(.alignfull) > .wp-block-column .wp-block-paragraph {
font-size: 15px;
font-weight: 300;
color: var(--wp--preset--color--primary);
line-height: 1.8;
}
/* ── TRUSTED PARTNERS / LOGO GALLERY ── */
/* Section: "Trusted by…" label above the carousel */
.trusted-partners .wp-block-cover__inner-container > .wp-block-paragraph:first-child {
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* ── Static grid (≤4 logos, no Swiper) ── */
.trusted-partners .wp-block-gallery:not(.swiper) {
display: flex !important;
gap: 2px !important;
flex-wrap: wrap;
}
.trusted-partners .wp-block-gallery:not(.swiper) .wp-block-image {
flex: 1 1 160px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.07);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.trusted-partners .wp-block-gallery:not(.swiper) img {
max-height: 38px;
width: auto;
height: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.5;
padding: 0;
transition: opacity 0.15s;
}
.trusted-partners .wp-block-gallery:not(.swiper) img:hover { opacity: 0.9; }
/* ── Swiper carousel (>4 logos) ── */
.trusted-partners .partners-swiper {
overflow: hidden;
position: relative;
width: 100%;
/* Override Gutenberg's flex-layout on the gallery */
display: block !important;
flex-wrap: unset !important;
/* Fade out left and right edges */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 12%,
black 88%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 12%,
black 88%,
transparent 100%
);
}
/* Force Swiper linear easing for constant-speed ticker */
.trusted-partners .partners-swiper .swiper-wrapper {
transition-timing-function: linear !important;
align-items: center;
}
/* Each slide: fixed width so slidesPerView:'auto' works */
.trusted-partners .partners-swiper .swiper-slide {
width: 180px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Logo image inside each slide */
.trusted-partners .partners-swiper .wp-block-image {
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.trusted-partners .partners-swiper img {
width: auto;
height: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.5;
padding: 0;
transition: opacity 0.2s ease;
display: block;
margin: 0 auto;
}
.trusted-partners .partners-swiper img:hover { opacity: 0.9; }
/* ── NEWS / PRESS GRID ── */
/* wp-block-query with is-layout-grid on the post-template */
.wp-block-query .wp-block-post-template.is-layout-grid {
gap: 2px !important;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post {
background: #fff;
border: 1px solid var(--wp--preset--color--primary-medium);
overflow: hidden;
}
/* Featured image */
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image {
position: static;
line-height: 0;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-featured-image img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
/* Date — override the absolute-positioned pill from earlier in the stylesheet */
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-date {
position: static;
background: none;
color: #6b6a65;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
padding: 16px 16px 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: block;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-date time {
display: inline;
}
/* Post title */
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-title {
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.15;
color: var(--wp--preset--color--primary);
margin: 8px 0;
padding: 0 16px;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-title a {
color: inherit;
text-decoration: none;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-title a:hover {
color: var(--wp--preset--color--accent);
}
/* Excerpt */
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
font-size: 13px;
font-weight: 300;
color: #6b6a65;
line-height: 1.6;
padding: 0 16px;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-excerpt__excerpt {
padding: 0;
}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-excerpt__more-link {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
display: inline-block;
padding: 12px 16px 16px;
}
.wp-block-post-excerpt__more-link {display: flex !important;
justify-content: start;}
.wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post-excerpt__more-link:hover {
opacity: 0.65;
}
/* ── FOOTER WP-BLOCK-COVER ── */
/* The last cover (60% dim, black overlay) contains the footer nav columns */
.wp-block-cover.has-background-dim-60 .wp-block-cover__inner-container {
max-width: var(--wp--style--global--content-size, 1200px) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(20px, 4vw, 48px) !important;
padding-right: clamp(20px, 4vw, 48px) !important;
box-sizing: border-box !important;
}
.wp-block-cover.has-background-dim-60 .wp-block-cover__inner-container > .wp-block-columns {
gap: 48px;
}
/* Column headings: small label style */
.wp-block-cover.has-background-dim-60 .wp-block-heading {
font-family: var(--wp--preset--font-family--barlow-condensed) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.4) !important;
margin-bottom: 12px !important;
}
/* Nav lists */
.wp-block-cover.has-background-dim-60 .wp-block-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.wp-block-cover.has-background-dim-60 .wp-block-list li {
padding: 0;
margin: 0;
border: none;
}
.wp-block-cover.has-background-dim-60 .wp-block-list li::before {
display: none;
}
.wp-block-cover.has-background-dim-60 .wp-block-list a,
.wp-block-cover.has-background-dim-60 .wp-block-list li {
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.6);
text-decoration: none;
line-height: 2;
transition: color 0.15s;
}
.wp-block-cover.has-background-dim-60 .wp-block-list a:hover {
color: #fff;
}
/* First column (logo + tagline) paragraph */
.wp-block-cover.has-background-dim-60 .wp-block-column:first-child .wp-block-paragraph {
font-size: 13px;
font-weight: 300;
color: rgba(255,255,255,0.5);
line-height: 1.7;
margin-bottom: 24px;
}
/* ── PHP FOOTER BAR ── */
.footer-copyright {
background: var(--wp--preset--color--black);
padding: 16px 24px;
margin-top: -40px
}
.footer-copyright p,
.footer-copyright a {
color: rgba(255,255,255,0.4);
font-size: 11px;
border: none;
}
.footer-copyright a:hover { color: #fff; }
.footer-trust-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 12px;
}
.footer-trust-icon {
height: 28px;
width: auto;
object-fit: contain;
display: block;
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
/* Stack process steps vertically */
.wp-block-column:has(.lrg-nr) {
border-right: none;
border-bottom: 1px solid var(--wp--preset--color--primary-medium);
padding: 24px 0;
}
.wp-block-column:has(.lrg-nr):last-child {
border-bottom: none;
}
/* Stack stats columns */
.wp-block-columns.alignfull.has-primary-medium-background-color .wp-block-column {
border-right: none;
border-bottom: 1px solid rgba(0,0,0,0.08);
padding: 32px 20px;
}
.wp-block-columns.alignfull.has-primary-medium-background-color .wp-block-column:last-child {
border-bottom: none;
}
/* News single column */
.wp-block-query .wp-block-post-template.is-layout-grid {
grid-template-columns: 1fr !important;
}
/* Footer reduce gap */
.wp-block-cover.has-background-dim-60 .wp-block-cover__inner-container > .wp-block-columns {
gap: 32px;
}
/* Service card cover inner padding */
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover .wp-block-cover__inner-container {
padding: 32px 24px;
}
.wp-block-columns:not(.alignfull), .wp-block-query:not(.alignfull) {
margin-left: 20px;
margin-right: 20px;
}
}
/* ============================================================
TESTIMONIALS [testimonial display=N]
============================================================ */
.testimonial-wrap {
position: relative;
}
/* Swiper container — give it a stable height so the fade doesn't collapse */
.testimonials-swiper {
overflow: hidden;
}
.testimonials-swiper .swiper-slide {
/* all slides sit stacked; Swiper fade handles visibility */
height: auto;
}
/* The blockquote card */
.testimonial-card {
margin: 0;
padding: 0 0 0 24px;
border-left: 3px solid var(--wp--preset--color--accent);
font-style: normal;
}
/* Opening quote mark */
.testimonial-card::before {
content: '\201C';
display: block;
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: clamp(3rem, 4vw, 5rem);
font-weight: 800;
line-height: 0.8;
color: var(--wp--preset--color--accent);
margin-bottom: 0.25em;
}
/* Quote body */
.testimonial-card__quote {
font-size: clamp(1rem, 1.2vw, 1.25rem);
line-height: 1.6;
color: inherit;
}
.testimonial-card__quote p {
margin: 0;
}
/* Attribution row */
.testimonial-card__footer {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 1.25rem;
}
.testimonial-card__author {
font-style: normal;
font-weight: 600;
font-size: 0.875rem;
color: inherit;
}
.testimonial-card__company {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.55;
}
/* ============================================================
SCROLL REVEAL
Gate: .radiowell-js is added by JS — without it nothing is hidden,
so if the script fails elements stay fully visible (progressive enhancement).
prefers-reduced-motion: entire block is skipped for accessibility.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
/* Hidden-until-revealed state */
.radiowell-js .rw-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
transition-delay: var(--rw-delay, 0ms);
}
/* Revealed state */
.radiowell-js .rw-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ── Cover inner-container children (service cards, etc.)
blockReveal adds .is-visible to .wp-block-cover__inner-container.
Scope to covers inside columns only — excludes the hero cover. ── */
.radiowell-js .wp-block-columns .wp-block-cover__inner-container > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 80ms; }
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 160ms; }
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 240ms; }
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 320ms; }
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 400ms; }
.radiowell-js .wp-block-columns .wp-block-cover__inner-container.is-visible > *:nth-child(n+6) { opacity: 1; transform: none; transition-delay: 460ms; }
}
/* ================================================================
QUOTE REQUEST FORM — #gform_wrapper_1
Scoped so other GF forms are unaffected.
================================================================ */
/* ── GF variable overrides ──────────────────────────────────── */
#gform_wrapper_1 {
--gf-color-primary: #1a1a1a;
--gf-ctrl-border-color: #c8c4be;
--gf-ctrl-label-color-primary: #1a1a1a;
--gf-ctrl-label-color-secondary: #1a1a1a;
--gf-radius: 0px;
}
/* ── 12-column grid on the fields container ─────────────────── */
/* GF single-page forms use #gform_fields_N directly —
not the .gform-grid-row/.gform_page path the base rule targets */
#gform_wrapper_1 #gform_fields_1 {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px 28px;
align-items: start;
}
/* ── Column spans ───────────────────────────────────────────── */
/* Default half = 6 cols (2-column layout) */
#gform_wrapper_1 .gfield--width-half { grid-column: span 6 !important; }
/* 3-column row: Manufacturer · Model # · Number (Quantity) */
#gform_wrapper_1 #field_1_6, /* Manufacturer */
#gform_wrapper_1 #field_1_7, /* Model # */
#gform_wrapper_1 #field_1_8 { /* Number */
grid-column: span 4 !important;
}
/* Full-width: notes, upload, disclaimer */
#gform_wrapper_1 .gfield--width-full { grid-column: 1 / -1 !important; }
#gform_wrapper_1 #field_1_11, /* Additional Notes */
#gform_wrapper_1 #field_1_12 { /* File upload */
grid-column: 1 / -1 !important;
}
/* Disclaimer stays left ~58%, footer button fills right */
#gform_wrapper_1 #field_1_13 {
grid-column: 1 / 8 !important;
}
/* ── Wrapper card ───────────────────────────────────────────── */
#gform_wrapper_1 {
background: #fff;
padding: 40px 48px 48px;
}
/* ── Heading row: title left, description right ─────────────── */
#gform_wrapper_1 .gform_heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 24px;
margin-bottom: 32px;
border-bottom: 1px solid #e0ddd7;
}
#gform_wrapper_1 .gform_title {
font-family: var(--wp--preset--font-family--barlow-condensed, sans-serif);
font-size: clamp(28px, 4vw, 40px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #1a1a1a;
margin: 0;
line-height: 1;
}
#gform_wrapper_1 .gform_description {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: #999;
margin: 0;
white-space: nowrap;
}
/* ── Field labels ───────────────────────────────────────────── */
#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 legend.gfield_label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
margin-bottom: 8px !important;
}
/* Replace "(Required)" text with a plain asterisk */
#gform_wrapper_1 .gfield_required .gfield_required_text {
font-size: 0;
letter-spacing: 0;
}
#gform_wrapper_1 .gfield_required .gfield_required_text::after {
content: ' *';
font-size: 13px;
color: #c0392b;
letter-spacing: 0;
}
/* ── Inputs, selects, textarea ──────────────────────────────── */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
border: 1px solid #c8c4be !important;
border-radius: 0 !important;
padding: 12px 14px !important;
font-size: 14px !important;
color: #1a1a1a !important;
background: #fff !important;
transition: border-color 0.15s !important;
box-shadow: none !important;
}
#gform_wrapper_1 input::placeholder,
#gform_wrapper_1 textarea::placeholder {
color: #aaa;
}
#gform_wrapper_1 input:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
border-color: #1a1a1a !important;
box-shadow: none !important;
outline: none !important;
}
/* Select: custom arrow, no double arrow */
#gform_wrapper_1 .ginput_container_select {
position: relative;
}
#gform_wrapper_1 select {
appearance: none !important;
-webkit-appearance: none !important;
padding-right: 36px !important;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.293 0.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' fill='%23666'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 10px !important;
}
/* Textarea */
#gform_wrapper_1 textarea {
resize: vertical;
min-height: 110px;
}
/* ── Address / ZIP-only field ───────────────────────────────── */
#gform_wrapper_1 .ginput_complex.ginput_container_address {
display: block !important;
}
#gform_wrapper_1 .ginput_container_address .address_zip {
display: block;
width: 100%;
}
#gform_wrapper_1 .ginput_container_address .address_zip input {
width: 100%;
box-sizing: border-box;
}
#gform_wrapper_1 .ginput_container_address .gform-field-label--type-sub {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #999;
margin-top: 6px;
display: block;
}
/* ── File upload dropzone ───────────────────────────────────── */
#gform_wrapper_1 .gform_drop_area {
border: 2px dashed #c8c4be !important;
border-radius: 0 !important;
background: transparent !important;
padding: 36px 24px !important;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
box-shadow: none !important;
}
#gform_wrapper_1 .gform_drop_instructions {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #555;
}
#gform_wrapper_1 .gform_button_select_files {
all: unset;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a1a1a;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(0,0,0,0.3);
}
#gform_wrapper_1 .gfield_description.gform_fileupload_rules {
font-size: 11px;
color: #aaa;
margin-top: 8px;
}
/* ── HTML disclaimer field ──────────────────────────────────── */
#gform_wrapper_1 #field_1_13 {
grid-column: 1 / 8 !important; /* ~58% of the 12-col grid */
display: flex;
align-items: center;
border-top: 1px solid #e0ddd7;
padding-top: 20px;
margin-top: 8px;
font-size: 12px;
color: #999;
line-height: 1.6;
min-height: 52px;
}
/* ── Footer / submit button ─────────────────────────────────── */
#gform_wrapper_1 .gform_footer {
all: unset;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
/* Pull up to sit beside the disclaimer on the same visual row */
margin-top: calc(-52px - 20px) !important;
padding-top: 20px !important;
box-sizing: border-box;
}
#gform_wrapper_1 #gform_submit_button_1 {
all: unset;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--wp--preset--color--accent);
color: #1a1a1a;
padding: 16px 28px;
font-family: var(--wp--preset--font-family--barlow-condensed, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, opacity 0.2s ease;
white-space: nowrap;
}
#gform_wrapper_1 #gform_submit_button_1::after {
content: '→';
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
}
#gform_wrapper_1 #gform_submit_button_1:hover {
opacity: 0.88;
}
/* ── Validation messages ────────────────────────────────────── */
#gform_wrapper_1 .gfield_description.gfield_validation_message {
font-size: 12px;
color: #c0392b;
margin-top: 6px;
letter-spacing: 0.5px;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
#gform_wrapper_1 {
padding: 28px 24px 36px;
}
#gform_wrapper_1 .gform_heading {
flex-direction: column;
gap: 8px;
}
#gform_wrapper_1 #field_1_13 {
grid-column: 1 / -1 !important;
margin-top: 24px;
}
#gform_wrapper_1 .gform_footer {
margin-top: 16px !important;
justify-content: stretch !important;
}
#gform_wrapper_1 #gform_submit_button_1 {
width: 100%;
justify-content: center;
}
}
/* ── Brands title label ──────────────────────────────────────── */
p.brands-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #999;
margin: 0 0 16px;
line-height: 1;
}
/* ── Brand pill list ─────────────────────────────────────────── */
ul.brand-pill {
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
}
/* Kill the global ✓ tick for brand pills */
ul.brand-pill li,
ul.brand-pill li::before {
padding-left: 0;
position: static;
content: none;
}
ul.brand-pill li {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 25px;
border: 1.5px solid #ccc9c2;
background: transparent;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.825rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast, #555);
line-height: 1;
white-space: nowrap;
}
/* ============================================================
SELL RADIOS — Shared: Section Eyebrow Label
============================================================ */
/* Eyebrow label — add class "section-label" to any paragraph used as a label */
p.section-label {
font-family: var(--wp--preset--font-family--barlow-condensed);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #999;
margin: 60px 0 10px !important;
line-height: 1;
}
/* ============================================================
SELL RADIOS — Section 1: Equipment We Accept
============================================================ */
/* Group block wrapper — add class "sell-equipment-section" to the Group */
.sell-equipment-section {
border: 2px dashed var(--wp--preset--color--accent);
padding: clamp(32px, 4vw, 60px);
margin-top: 60px;
margin-bottom: 80px;
}
/* Section headline */
.sell-equipment-section h2.wp-block-heading {
font-size: clamp(3.5rem, 6vw, 5.5rem);
line-height: 0.92;
letter-spacing: -0.01em;
}
/* Right-column descriptor text */
.sell-equipment-section .wp-block-column.is-vertically-aligned-bottom p {
color: #6b6a65;
font-size: 0.9375rem;
line-height: 1.65;
}
/* ── Equipment cards grid ──────────────────────────────────────────────
When sell-equipment-section is placed on wp-block-columns (the cards
block) override the wrapper dashed-border styles with card-grid styles.
─────────────────────────────────────────────────────────────────── */
.wp-block-columns.sell-equipment-section {
border: 1px solid #ccc9c2;
padding: 0 !important;
gap: 0 !important;
margin-top: 32px;
margin-bottom: 0;
}
/* Column — flex column so model list stays pinned to bottom */
.wp-block-columns.sell-equipment-section > .wp-block-column {
display: flex;
flex-direction: column;
padding: clamp(20px, 2.5vw, 36px);
border-right: 1px solid #ccc9c2;
}
.wp-block-columns.sell-equipment-section > .wp-block-column:last-child {
border-right: none;
}
/* Icon box */
.wp-block-columns.sell-equipment-section figure.wp-block-image {
width: 100% !important;
max-width: none !important;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc9c2;
min-height: 130px;
padding: 20px;
margin: 0 0 24px !important;
box-sizing: border-box;
}
.wp-block-columns.sell-equipment-section figure.wp-block-image img {
display: block;
margin: 0 !important;
}
/* Card title */
.wp-block-columns.sell-equipment-section h4.wp-block-heading {
font-size: 1rem !important;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
margin: 0 0 10px !important;
}
/* Card description — grows to fill space above model list */
.wp-block-columns.sell-equipment-section > .wp-block-column > p:not([class*="has-"]) {
font-size: 0.8125rem;
color: #4a4845;
line-height: 1.65;
margin-bottom: auto;
padding-bottom: 20px;
}
/* Model list — pinned to bottom, muted */
.wp-block-columns.sell-equipment-section > .wp-block-column > p[class*="has-primary-medium"] {
font-size: 0.75rem;
color: #aaa8a2 !important;
margin-top: 0;
margin-bottom: 0;
line-height: 1.4;
}
/* ============================================================
SELL RADIOS — Section 2: The Process
============================================================ */
/* Group wrapper — add class "sell-process-section" to the Group block */
.sell-process-section {
padding-top: 80px;
padding-bottom: 80px;
}
/* h2 headline size (matches equipment section) */
.sell-process-section h2.wp-block-heading {
font-size: clamp(3.5rem, 6vw, 5.5rem);
line-height: 0.92;
letter-spacing: -0.01em;
}
/* in h2 = navy (overrides global accent rule) */
.sell-process-section h2 strong {
color: var(--wp--preset--color--primary);
}
/* ── Process Timeline ──────────────────────────────────────────────────
Add class "sell-process-timeline" to the 5-column step block.
Dot positions assume 5 equal-width columns with default gap.
──────────────────────────────────────────────────────────────────── */
.sell-process-timeline {
position: relative;
padding-top: 48px;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 52px;
}
/* Lines use JS-measured CSS vars so any column gap works exactly */
.sell-process-timeline::before {
content: '';
position: absolute;
top: 24px;
left: var(--tl-line-start, 7px);
width: var(--tl-line-width, 80%);
height: 1px;
background: #d5d3cb;
z-index: 0;
}
.sell-process-timeline::after {
content: '';
position: absolute;
top: 23.5px;
left: var(--tl-line-start, 7px);
width: 0;
height: 2px;
background: var(--wp--preset--color--accent);
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
.sell-process-timeline.is-visible::after {
width: var(--tl-line-width, 80%);
transition: width 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* Prevent mid-word breaks in step titles */
.sell-process-timeline > .wp-block-column :is(h1,h2,h3,h4,h5,h6,strong) {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
/* Step columns */
.sell-process-timeline > .wp-block-column {
position: relative;
padding-left: 0;
padding-right: 0;
}
/* Dot — left-aligned to sit directly above column content */
.sell-process-timeline > .wp-block-column::before {
content: '';
position: absolute;
top: -31px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--wp--preset--color--black, #121212);
z-index: 2;
transition: background 0.35s ease;
}
.sell-process-timeline > .wp-block-column.dot-active::before {
background: var(--wp--preset--color--accent);
}
/* Step content reveal — JS adds .step-visible sequentially */
@media (prefers-reduced-motion: no-preference) {
.sell-process-timeline > .wp-block-column {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.sell-process-timeline > .wp-block-column.step-visible {
opacity: 1;
transform: none;
}
}
/* Neutralise scrollReveal on children — column handles group visibility */
.radiowell-js .sell-process-timeline .rw-reveal,
.radiowell-js .sell-process-timeline .rw-reveal.is-visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Mobile: stack vertically, disable dot/line chrome */
@media (max-width: 720px) {
.sell-process-timeline {
padding-top: 0;
gap: 40px !important;
margin-top: 32px;
}
.sell-process-timeline::before,
.sell-process-timeline::after { display: none; }
.sell-process-timeline > .wp-block-column::before { display: none; }
.sell-process-timeline > .wp-block-column {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
SELL RADIOS — Section 3: Compliance & Security
Add class "compliance-list" to the ol block
============================================================ */
ol.compliance-list {
counter-reset: compliance-step;
list-style: none;
margin: 0;
padding: 0;
border: 1.5px solid rgba(113, 208, 255, 0.15);
background: var(--wp--preset--color--primary-dark);
}
ol.compliance-list > li {
counter-increment: compliance-step;
position: relative;
padding: 28px 32px 28px 80px;
border-bottom: 1px solid rgba(113, 208, 255, 0.1);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.65;
}
ol.compliance-list > li:last-child {
border-bottom: none;
}
/* Step number: 01, 02… */
ol.compliance-list > li::before {
content: counter(compliance-step, decimal-leading-zero);
position: absolute;
left: 32px;
top: 28px;
font-family: var(--wp--preset--font-family--barlow-condensed);
font-weight: 800;
font-size: 1.05rem;
color: var(--wp--preset--color--accent);
line-height: 1.4;
letter-spacing: 0.02em;
}
/* Item title */
ol.compliance-list li strong {
display: block;
font-family: var(--wp--preset--font-family--barlow-condensed);
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 6px;
line-height: 1.2;
}
/* Remove the
that some items place after the */
ol.compliance-list li strong + br { display: none; }
/* ============================================================
SELL STEPS — 5-column benefit strip
============================================================ */
.wp-block-columns.sell-steps {
gap: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wp-block-columns.sell-steps > .wp-block-column {
padding: clamp(20px, 2.5vw, 32px);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.wp-block-columns.sell-steps > .wp-block-column:last-child {
border-right: none;
}
/* Number label: 01, 02… */
.wp-block-columns.sell-steps > .wp-block-column > p:first-child {
font-family: var(--wp--preset--font-family--barlow-condensed);
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--wp--preset--color--accent);
margin: 0 0 14px;
line-height: 1;
}
/* Heading */
.wp-block-columns.sell-steps > .wp-block-column > .wp-block-heading {
color: #ffffff;
font-size: clamp(1.1rem, 1vw + 0.6rem, 1.45rem);
margin: 0 0 12px;
line-height: 1.05;
}
/* Body text */
.wp-block-columns.sell-steps > .wp-block-column > p:not(:first-child) {
color: rgba(255, 255, 255, 0.55);
font-size: 0.875rem;
line-height: 1.6;
margin: 0;
}
/* ============================================================
FAQ ACCORDION — wp-block-details (site-wide)
============================================================ */
.wp-block-details {
border-top: 1px solid rgba(22,52,92,0.12);
}
.wp-block-details:last-child {
border-bottom: 1px solid rgba(22,52,92,0.12);
}
.wp-block-details summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 24px 0;
cursor: pointer;
list-style: none;
font-family: var(--wp--preset--font-family--barlow-condensed);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
user-select: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
content: '+';
font-family: var(--wp--preset--font-family--dm-sans);
font-weight: 300;
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
color: var(--wp--preset--color--primary);
opacity: 0.45;
}
.wp-block-details[open] > summary::after {
content: '×';
opacity: 0.7;
}
.wp-block-details > *:not(summary) {
overflow: hidden;
font-size: 0.9375rem;
color: #6b6a65;
line-height: 1.65;
margin: 0;
padding-bottom: 28px;
}