/*
* Dios Vas — Modern UI layer (staging only)
* Design tokens, motion and responsive fixes on top of the Neve theme.
*/
/* ---------------------------------------------------------------- tokens */
:root {
--dv-accent: #2563eb;
--dv-accent-2: #06b6d4;
--dv-accent-dark: #1d4ed8;
--dv-ink: #0f172a;
--dv-text: #334155;
--dv-muted: #64748b;
--dv-bg: #f6f8fb;
--dv-card: #ffffff;
--dv-dark: #0b1220;
--dv-radius: 16px;
--dv-radius-sm: 10px;
--dv-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
--dv-shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, 0.3);
--dv-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
--dv-ease: cubic-bezier(0.33, 1, 0.68, 1);
--dv-hover: 0.35s;
}
/* ------------------------------------------------------------ base reset */
html {
scroll-behavior: smooth;
}
/* "clip" (not "hidden") - hidden silently disables position:sticky */
html,
body.dv-modern {
overflow-x: clip !important;
max-width: 100vw;
}
body.dv-modern .wrapper {
overflow: visible !important;
}
body.dv-modern {
font-family: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif !important;
color: var(--dv-text);
background: #fff;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
animation: dv-page-in 0.6s var(--dv-ease) both;
}
@keyframes dv-page-in {
from { opacity: 0; }
to { opacity: 1; }
}
body.dv-modern h1,
body.dv-modern h2,
body.dv-modern h3,
body.dv-modern h4,
body.dv-modern h5 {
font-family: "Inter", "Roboto Condensed", sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
color: var(--dv-ink);
text-transform: none !important;
}
body.dv-modern h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem) !important; }
body.dv-modern h2 { font-size: clamp(1.45rem, 3.5vw, 2.1rem) !important; }
body.dv-modern h3 { font-size: clamp(1.2rem, 2.8vw, 1.6rem) !important; }
body.dv-modern p {
line-height: 1.65;
}
/* keep "medium/large" preset paragraphs sane on small screens */
body.dv-modern p.has-medium-font-size {
font-size: clamp(1rem, 0.9rem + 0.6vw, 1.15rem) !important;
}
body.dv-modern img {
height: auto;
max-width: 100%;
}
body.dv-modern .nv-content-wrap img,
body.dv-modern .entry-content img:not(.emoji) {
border-radius: var(--dv-radius-sm);
}
::selection {
background: var(--dv-accent);
color: #fff;
}
/* force smooth hover on interactive elements (Neve often has none / 0.1–0.3s) */
body.dv-modern a,
body.dv-modern button,
body.dv-modern .button,
body.dv-modern .wp-block-button__link,
body.dv-modern .wp-element-button,
body.dv-modern input[type="submit"],
body.dv-modern .dv-cat-card,
body.dv-modern .dv-cat-card__media img,
body.dv-modern ul.products li.product,
body.dv-modern ul.products li.product img,
body.dv-modern .wp-block-themeisle-blocks-service,
body.dv-modern #scroll-to-top,
body.dv-modern .navbar-toggle,
body.dv-modern .nav-ul .sub-menu li > .wrap {
transition-property: color, background-color, background, background-image, border-color, box-shadow, transform, opacity, filter !important;
transition-duration: var(--dv-hover) !important;
transition-timing-function: var(--dv-ease) !important;
}
/* ------------------------------------------------------- sticky header */
body.dv-modern .header {
position: sticky;
top: 0;
z-index: 998;
}
/* solid dark header: one constant color, no shifting on scroll */
body.dv-modern #header-grid {
background: #0d1526 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
transition: box-shadow 0.35s var(--dv-ease);
}
/* header rows paint their own background on top of the grid - clear them */
body.dv-modern #header-grid .header--row,
body.dv-modern #header-grid .header--row-inner {
background: transparent !important;
background-image: none !important;
}
body.dv-modern.dv-scrolled #header-grid {
box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.55);
}
body.dv-modern .site-title {
font-weight: 800 !important;
letter-spacing: -0.02em;
color: #ffffff !important;
transition: transform var(--dv-hover) var(--dv-ease), color var(--dv-hover) ease;
}
body.dv-modern .site-logo .brand:hover .site-title {
transform: scale(1.02);
}
/* menu links with smooth color + Neve underline (on .wrap, not the ) */
body.dv-modern .nav-ul > li > .wrap > a {
position: relative;
font-weight: 600;
}
body.dv-modern #header-grid .nav-ul li > .wrap > a,
body.dv-modern #header-grid .nav-ul li > .wrap .caret,
body.dv-modern #header-grid .nav-ul li > .wrap .caret-wrap,
body.dv-modern #header-grid .menu-item-nav-search .nv-icon,
body.dv-modern #header-grid .menu-item-nav-search a {
transition: color 0.4s var(--dv-ease) !important;
}
/* desktop menu sits on the dark header: light links, icons and carets */
body.dv-modern #header-grid .menu-desktop > li > .wrap > a,
body.dv-modern #header-grid .menu-desktop > li > .wrap .caret-wrap,
body.dv-modern #header-grid .menu-item-nav-search a {
color: #e2e8f0 !important;
}
body.dv-modern #header-grid .menu-desktop > li > .wrap > a:hover {
color: #7dd3fc !important;
}
/* dropdown panels are dark like the header: light links inside them */
body.dv-modern .menu-desktop .sub-menu a,
body.dv-modern .menu-desktop .sub-menu .caret-wrap {
color: #cbd5e1 !important;
}
/* mobile drawer: dark panel, light top-level links */
body.dv-modern .header-menu-sidebar .nav-ul > li > .wrap > a,
body.dv-modern .header-menu-sidebar .nav-ul > li > .wrap .caret-wrap,
body.dv-modern .header-menu-sidebar .navbar-toggle {
color: #e8edf5 !important;
}
/* drawer dropdown links are light, like the rest of the drawer */
body.dv-modern .header-menu-sidebar .sub-menu a,
body.dv-modern .header-menu-sidebar .sub-menu .caret-wrap,
body.dv-modern .header-menu-sidebar .sub-menu .navbar-toggle {
color: #cbd5e1 !important;
}
/* kill duplicate underlines on the ; slow Neve's real hover line on .wrap */
body.dv-modern #header-grid .menu-desktop > li > .wrap > a::before,
body.dv-modern #header-grid .menu-desktop > li > .wrap > a::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
opacity: 0 !important;
transform: none !important;
}
body.dv-modern #header-grid .menu-desktop > li > .wrap > a {
border: none !important;
box-shadow: none !important;
text-decoration: none !important;
}
body.dv-modern #header-grid .m-style > ul > li > .wrap,
body.dv-modern #header-grid .style-border-bottom > ul > li > .wrap {
position: relative;
}
body.dv-modern #header-grid .m-style > ul > li > .wrap::after,
body.dv-modern #header-grid .style-border-bottom > ul > li > .wrap::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 auto !important;
height: 2px !important;
width: 0 !important;
background: #7dd3fc !important;
background-color: #7dd3fc !important;
border: none !important;
box-shadow: none !important;
pointer-events: none !important;
transition: width 0.4s var(--dv-ease) !important;
}
body.dv-modern #header-grid .m-style > ul > li > .wrap:hover::after,
body.dv-modern #header-grid .style-border-bottom > ul > li > .wrap:hover::after,
body.dv-modern #header-grid .m-style > ul > li.current-menu-item > .wrap::after,
body.dv-modern #header-grid .m-style > ul > li.nv-active > .wrap::after {
width: 100% !important;
}
/* desktop dropdowns: dark floating card matching the header + slide-in */
body.dv-modern .menu-desktop .sub-menu {
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 14px !important;
box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6) !important;
padding: 8px !important;
background: #0d1526 !important;
transform: translateY(8px);
transition: opacity 0.35s var(--dv-ease), transform 0.35s var(--dv-ease), visibility 0.35s;
}
body.dv-modern .menu-desktop li:hover > .sub-menu,
body.dv-modern .menu-desktop li:focus-within > .sub-menu {
transform: translateY(0);
}
body.dv-modern .nav-ul .sub-menu li > .wrap {
border-radius: 8px;
transition: background var(--dv-hover) ease;
}
body.dv-modern .menu-desktop .sub-menu li > .wrap:hover {
background: rgba(255, 255, 255, 0.07);
}
body.dv-modern .menu-desktop .sub-menu a:hover {
color: #7db4ff !important;
}
/* drawer dropdowns: dark inset panel matching the drawer, not a white card */
body.dv-modern .header-menu-sidebar .sub-menu {
background: rgba(255, 255, 255, 0.06) !important;
border: none !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 6px 8px !important;
}
body.dv-modern .header-menu-sidebar .sub-menu li > .wrap:hover {
background: rgba(255, 255, 255, 0.07);
}
/* language flags */
body.dv-modern .nav-ul li .wrap a img {
border-radius: 4px;
transition: transform var(--dv-hover) var(--dv-ease);
}
body.dv-modern .nav-ul li .wrap a:hover img {
transform: translateY(-1px) scale(1.06);
}
/* mobile drawer panel: solid dark, matching the header */
body.dv-modern .header-menu-sidebar,
body.dv-modern .header-menu-sidebar-inner {
background: #0d1526 !important;
background-image: none !important;
box-shadow: var(--dv-shadow-lg);
}
body.dv-modern .header-menu-sidebar .nav-ul li > .wrap {
padding: 8px 10px !important;
border-radius: 10px;
}
body.dv-modern .menu-mobile > li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dv-modern .menu-mobile .sub-menu li {
border-bottom: none;
}
/* hamburger + buttons touch targets */
body.dv-modern .navbar-toggle,
body.dv-modern .menu-item-nav-search {
min-width: 44px;
min-height: 44px;
}
/* hamburger, drawer close and caret toggles: no square white outline */
body.dv-modern button.navbar-toggle {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 12px !important;
}
body.dv-modern button.navbar-toggle:focus-visible {
box-shadow: 0 0 0 2px rgba(125, 180, 255, 0.6) !important;
}
/* carets inside the white dropdown cards need no background */
body.dv-modern .header-menu-sidebar .sub-menu button.navbar-toggle,
body.dv-modern .menu-desktop .sub-menu button.navbar-toggle {
background: transparent !important;
}
/* ------------------------------------------------------------- buttons */
body.dv-modern .wp-block-button__link,
body.dv-modern .wp-element-button,
body.dv-modern button[type="submit"],
body.dv-modern input[type="submit"],
body.dv-modern .button,
body.dv-modern a.button {
background-image: var(--dv-gradient) !important;
background-color: var(--dv-accent) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 12px 26px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.55);
transition: transform var(--dv-hover) var(--dv-ease), box-shadow var(--dv-hover) var(--dv-ease), filter var(--dv-hover) ease !important;
}
body.dv-modern .wp-block-button__link:hover,
body.dv-modern .wp-element-button:hover,
body.dv-modern button[type="submit"]:hover,
body.dv-modern input[type="submit"]:hover,
body.dv-modern .button:hover,
body.dv-modern a.button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.55);
filter: brightness(1.04);
color: #fff !important;
}
body.dv-modern .wp-block-button__link:active,
body.dv-modern .button:active {
transform: translateY(0) scale(0.99);
}
/* cap oversized block-button font sizes so they stay button-shaped */
body.dv-modern .wp-block-button.has-custom-font-size .wp-block-button__link,
body.dv-modern .wp-block-button.has-large-font-size .wp-block-button__link {
font-size: 1.05rem !important;
}
/* hide "all products" button on the homepage hero for now */
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-button:has(a[href*="post_type=product"]),
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-buttons > .wp-block-button:nth-child(2) {
display: none !important;
}
/* ---------------------------------------------------- category grid */
body.dv-modern .dv-cat-section {
width: 100%;
background: #ffffff;
padding: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 1.75rem);
}
body.dv-modern .dv-cat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.85rem, 2vw, 1.35rem);
max-width: 72rem;
margin-inline: auto;
}
body.dv-modern .dv-cat-card {
display: flex;
flex-direction: column;
background: var(--dv-card);
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: var(--dv-radius);
overflow: hidden;
text-decoration: none !important;
color: inherit;
box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12);
transition: transform var(--dv-hover) var(--dv-ease), box-shadow var(--dv-hover) var(--dv-ease);
min-width: 0;
}
body.dv-modern .dv-cat-card:hover {
transform: translateY(-0.25rem);
box-shadow: var(--dv-shadow-lg);
color: inherit;
}
body.dv-modern .dv-cat-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #eef2f7;
}
body.dv-modern .dv-cat-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--dv-ease);
border-radius: 0 !important;
}
body.dv-modern .dv-cat-card:hover .dv-cat-card__media img {
transform: scale(1.04);
}
body.dv-modern .dv-cat-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem 0.65rem;
padding: 0.9rem 1rem 1.05rem;
}
body.dv-modern .dv-cat-card__title {
font-weight: 700;
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
color: var(--dv-ink);
line-height: 1.3;
}
body.dv-modern .dv-cat-card__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: rgba(37, 99, 235, 0.1);
color: var(--dv-accent-dark);
font-size: 0.8rem;
font-weight: 600;
}
/* desktop: lone last card on a 3-col row sits centered */
body.dv-modern .dv-cat-card:last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
width: calc((100% - 2 * clamp(0.85rem, 2vw, 1.35rem)) / 3);
justify-self: center;
}
/* mobile: 2 cards per row; center a leftover last card */
@media (max-width: 768px) {
body.dv-modern .dv-cat-section {
padding: 1rem 0.75rem 1.25rem;
}
body.dv-modern .dv-cat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
body.dv-modern .dv-cat-card {
border-radius: 0.85rem;
}
body.dv-modern .dv-cat-card__media {
aspect-ratio: 16 / 10;
}
body.dv-modern .dv-cat-card__meta {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem 0.45rem;
padding: 0.55rem 0.65rem 0.7rem;
}
body.dv-modern .dv-cat-card__title {
font-size: clamp(0.72rem, 3.2vw, 0.9rem);
line-height: 1.25;
word-break: break-word;
}
body.dv-modern .dv-cat-card__count {
font-size: 0.7rem;
min-width: 1.3rem;
padding: 0.1rem 0.4rem;
}
/* override desktop 3-col centering for 2-col mobile */
body.dv-modern .dv-cat-card:last-child:nth-child(3n + 1) {
grid-column: auto;
width: auto;
justify-self: auto;
}
body.dv-modern .dv-cat-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
width: calc((100% - 0.65rem) / 2);
justify-self: center;
}
}
/* ------------------------------------------------------------ homepage */
/*
* Hero photo is 4091×2135 with logo + headline baked in.
* MUST stay full-bleed (100vw). Never set width:100% — that traps it
* inside Neve’s content column and creates the white side gutters.
* aspect-ratio keeps the full image; no crop when the window resizes.
*/
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child {
--dv-hero-w: 4091;
--dv-hero-h: 2135;
position: relative !important;
isolation: isolate;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
left: auto !important;
right: auto !important;
aspect-ratio: 4091 / 2135;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
background-size: 100% 100% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #0d1526 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Otter --background shorthand often ends with /cover — override after it */
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child {
background-size: 100% 100% !important;
}
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child > .wp-block-themeisle-blocks-advanced-columns-overlay {
opacity: 0 !important;
}
/* soft fade: dark header at top, white page at bottom (soft corners / no hard cut) */
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(13, 21, 38, 0.72) 0%, rgba(13, 21, 38, 0) 16%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.55) 90%, #ffffff 100%);
}
/* kill the fixed WordPress spacer (was the empty white void) */
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child div.wp-block-spacer,
body.dv-modern.home div.wp-block-spacer[style*="height:601px"] {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* let Otter’s inner column fill the aspect box so absolute CTAs can pin to bottom */
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child .innerblocks-wrap,
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child .wp-block-themeisle-blocks-advanced-column {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1;
}
/* CTA pinned to lower center of the photo — not the top, not a circle */
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-buttons {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 5% !important;
top: auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0.65rem;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 1rem !important;
z-index: 2;
box-sizing: border-box !important;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-button {
width: auto !important;
max-width: none !important;
margin: 0 !important;
animation: dv-rise 0.9s var(--dv-ease) both;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-buttons .wp-block-button:nth-child(2) {
animation-delay: 0.18s;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-button__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 0.7em 1.6em !important;
border-radius: 999px !important;
font-size: 1.05rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
@keyframes dv-rise {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
body.dv-modern.home .nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns.alignfull:first-child {
background-color: #0d1526 !important;
margin-bottom: 0 !important;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-buttons {
bottom: 7% !important;
flex-direction: row !important;
gap: 0.5rem;
padding: 0 0.75rem !important;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-button {
width: auto !important;
max-width: none !important;
}
body.dv-modern.home .nv-content-wrap > .alignfull:first-child .wp-block-button__link {
padding: 0.4em 1.05em !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
white-space: nowrap !important;
box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.5) !important;
}
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66,
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66.has-light-bg {
background: #ffffff !important;
--background: #ffffff !important;
}
body.dv-modern.home .dv-cat-section {
padding-top: 1rem !important;
padding-bottom: 0.5rem !important;
}
/* cooperation block: Otter often ships a tall min-height + big padding → empty white void */
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 {
min-height: 0 !important;
height: auto !important;
padding-top: 0.75rem !important;
padding-bottom: 1rem !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 .innerblocks-wrap,
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 .wp-block-themeisle-blocks-advanced-column {
min-height: 0 !important;
height: auto !important;
justify-content: flex-start !important;
align-items: stretch !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 .wp-block-themeisle-blocks-service {
margin-top: 0 !important;
}
}
/* the decorative photo band was an empty block with 90px padding, which
rendered the photo as a thin random-looking slice; give it real height
and fade its top/bottom edges into the white page background */
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-ebdfb20d {
min-height: clamp(240px, 32vw, 460px) !important;
background-position: center !important;
position: relative;
}
/* top edge fades to the white page, bottom edge fades to the dark footer */
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-ebdfb20d::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0) 18%,
rgba(13, 21, 38, 0) 78%,
#0d1526 100%
);
}
/* the section above the photo band has a built-in 1px bottom border that
draws a hard line where the fade should be */
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-57bfef66 {
border-bottom: none !important;
min-height: 0 !important;
height: auto !important;
}
/* desktop: keep a modest gap under categories, not a white canyon */
body.dv-modern.home .dv-cat-section {
padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
}
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 {
padding-top: clamp(0.75rem, 2vw, 1.5rem) !important;
margin-top: 0 !important;
}
/* the empty spacer-only block after the photo band creates dead space */
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-a83673d2 {
display: none !important;
}
body.dv-modern.home .neve-main .single-page-container {
padding-bottom: 0 !important;
}
body.dv-modern.home .nv-content-wrap > *:last-child {
margin-bottom: 0 !important;
}
/* tighten the dead space around the info-card section on small screens */
@media (max-width: 768px) {
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-57bfef66,
body.dv-modern.home #wp-block-themeisle-blocks-advanced-columns-57bfef66 {
margin-top: 0 !important;
min-height: 0 !important;
height: auto !important;
padding-top: 0.75rem !important;
padding-bottom: 1rem !important;
}
body.dv-modern #wp-block-themeisle-blocks-advanced-columns-ebdfb20d {
min-height: 200px !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
/* feature strip below hero */
body.dv-modern .wp-block-themeisle-blocks-service {
background: var(--dv-card);
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: var(--dv-radius);
box-shadow: var(--dv-shadow);
padding: clamp(24px, 4vw, 48px) !important;
transition: transform var(--dv-hover) var(--dv-ease), box-shadow var(--dv-hover) var(--dv-ease);
}
body.dv-modern .wp-block-themeisle-blocks-service:hover {
transform: translateY(-4px);
box-shadow: var(--dv-shadow-lg);
}
body.dv-modern .wp-block-themeisle-blocks-font-awesome-icons .wp-block-themeisle-blocks-font-awesome-icons-container {
display: inline-grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--dv-accent) !important;
color: #fff !important;
box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.5);
}
body.dv-modern .wp-block-themeisle-blocks-font-awesome-icons i {
color: #fff !important;
font-size: 34px !important;
}
body.dv-modern .has-light-bg {
background: #ffffff !important;
}
/* ------------------------------------------------------- WooCommerce */
body.dv-modern ul.products li.product {
background: var(--dv-card);
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: var(--dv-radius) !important;
overflow: hidden;
padding: 0 0 18px !important;
box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12);
transition: transform var(--dv-hover) var(--dv-ease), box-shadow var(--dv-hover) var(--dv-ease);
}
body.dv-modern ul.products li.product:hover {
transform: translateY(-5px);
box-shadow: var(--dv-shadow-lg);
}
body.dv-modern ul.products li.product img {
border-radius: 0 !important;
transition: transform 0.5s var(--dv-ease);
width: 100%;
}
body.dv-modern ul.products li.product:hover img {
transform: scale(1.04);
}
body.dv-modern ul.products li.product .woocommerce-loop-product__title,
body.dv-modern ul.products li.product h2 {
font-size: 1.02rem !important;
font-weight: 700 !important;
padding: 12px 16px 0 !important;
color: var(--dv-ink) !important;
}
body.dv-modern ul.products li.product .price {
display: inline-block;
margin: 8px 16px 0 !important;
padding: 4px 14px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.1);
color: var(--dv-accent-dark) !important;
font-weight: 700 !important;
}
body.dv-modern ul.products li.product .star-rating {
margin: 8px 16px 0 !important;
}
/* category cards on the catalog page */
body.dv-modern ul.products li.product-category > a {
display: block;
}
body.dv-modern ul.products li.product-category .woocommerce-loop-category__title {
font-size: 1.05rem !important;
font-weight: 700 !important;
padding: 14px 16px 4px !important;
color: var(--dv-ink) !important;
}
body.dv-modern ul.products li.product-category mark.count {
background: rgba(37, 99, 235, 0.1);
color: var(--dv-accent-dark);
border-radius: 999px;
padding: 2px 10px;
font-size: 0.85rem;
font-weight: 600;
}
/* single product */
body.dv-modern .woocommerce-product-gallery {
border-radius: var(--dv-radius);
overflow: hidden;
box-shadow: var(--dv-shadow);
}
body.dv-modern .woocommerce div.product p.price {
color: var(--dv-accent-dark) !important;
font-weight: 800 !important;
font-size: 1.5rem !important;
}
body.dv-modern .woocommerce-tabs ul.tabs li {
border-radius: 10px 10px 0 0 !important;
}
/* ------------------------------------------------------------- forms */
body.dv-modern input[type="text"],
body.dv-modern input[type="email"],
body.dv-modern input[type="tel"],
body.dv-modern input[type="search"],
body.dv-modern input[type="password"],
body.dv-modern textarea,
body.dv-modern select {
border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
background: #fff !important;
transition: border-color var(--dv-hover) ease, box-shadow var(--dv-hover) ease;
}
body.dv-modern input:focus,
body.dv-modern textarea:focus,
body.dv-modern select:focus {
outline: none !important;
border-color: var(--dv-accent) !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}
body.dv-modern .contact-form {
border-left: none !important;
background: var(--dv-card);
border: 1px solid rgba(15, 23, 42, 0.06) !important;
border-radius: var(--dv-radius);
box-shadow: var(--dv-shadow);
padding: clamp(20px, 3vw, 36px);
}
/* ------------------------------------------------------------- footer */
body.dv-modern .site-footer {
background: #0d1526 !important;
color: rgba(255, 255, 255, 0.75);
position: relative;
}
/* the theme footer rows are empty (credit text is hidden by site CSS) */
body.dv-modern .site-footer .footer--row {
display: none !important;
}
/* injected compact contacts band */
body.dv-modern .dv-contacts {
background: #0d1526;
color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 26px 20px 30px;
}
body.dv-modern .dv-contacts-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 30px;
font-size: 0.95rem;
}
body.dv-modern .dv-contacts-row a,
body.dv-modern .dv-contacts-row span {
display: inline-flex;
align-items: center;
gap: 8px;
color: #e2e8f0 !important;
text-decoration: none !important;
transition: color var(--dv-hover) ease, transform var(--dv-hover) var(--dv-ease);
}
body.dv-modern .dv-contacts-row a:hover {
color: #7db4ff !important;
transform: translateY(-1px);
}
body.dv-modern .dv-contacts svg {
width: 16px;
height: 16px;
flex: none;
opacity: 0.75;
}
body.dv-modern .dv-contacts-legal {
margin-top: 14px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 640px) {
body.dv-modern .dv-contacts-row {
flex-direction: column;
gap: 12px;
}
}
body.dv-modern .site-footer a {
color: rgba(255, 255, 255, 0.85) !important;
transition: color var(--dv-hover) ease;
}
body.dv-modern .site-footer a:hover {
color: #fff !important;
}
body.dv-modern .site-footer p {
color: rgba(255, 255, 255, 0.65);
}
/* --------------------------------------------------------- scroll top */
body.dv-modern #scroll-to-top {
background: var(--dv-gradient) !important;
color: #fff !important;
border-radius: 50% !important;
width: 48px;
height: 48px;
box-shadow: 0 14px 28px -10px rgba(37, 99, 235, 0.6) !important;
transition: transform var(--dv-hover) var(--dv-ease), box-shadow var(--dv-hover) var(--dv-ease), opacity var(--dv-hover) ease !important;
}
body.dv-modern #scroll-to-top:hover {
transform: translateY(-3px);
}
/* ------------------------------------------------------ reveal motion */
body.dv-modern .dv-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s var(--dv-ease), transform 0.8s var(--dv-ease);
transition-delay: var(--dv-delay, 0s);
will-change: opacity, transform;
}
body.dv-modern .dv-reveal.dv-in {
opacity: 1;
transform: translateY(0);
}
/* -------------------------------------------------- responsive fixes */
@media (max-width: 960px) {
body.dv-modern .container {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 640px) {
body.dv-modern {
font-size: 15px;
}
body.dv-modern .wp-block-themeisle-blocks-service {
padding: 1rem 0.95rem !important;
}
body.dv-modern .wp-block-themeisle-blocks-service h3,
body.dv-modern .wp-block-themeisle-blocks-service h3.has-large-font-size {
font-size: 1rem !important;
line-height: 1.3 !important;
text-align: left !important;
margin-bottom: 0.55rem !important;
}
body.dv-modern .wp-block-themeisle-blocks-service p,
body.dv-modern .wp-block-themeisle-blocks-service p.has-medium-font-size,
body.dv-modern .wp-block-themeisle-blocks-service p.has-text-align-center {
font-size: 0.84rem !important;
line-height: 1.45 !important;
text-align: left !important;
margin: 0 !important;
}
body.dv-modern .wp-block-themeisle-blocks-font-awesome-icons .wp-block-themeisle-blocks-font-awesome-icons-container {
width: 64px;
height: 64px;
}
body.dv-modern .wp-block-themeisle-blocks-font-awesome-icons i {
font-size: 26px !important;
}
body.dv-modern .nv-content-wrap {
word-break: break-word;
}
body.dv-modern table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.dv-modern .wp-block-themeisle-blocks-advanced-columns {
padding-left: 16px !important;
padding-right: 16px !important;
}
body.dv-modern ul.products {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
body.dv-modern ul.products li.product {
width: 100% !important;
margin: 0 !important;
}
}
@media (max-width: 420px) {
body.dv-modern ul.products {
grid-template-columns: 1fr !important;
}
}
/* ---------------------------------------------------- about / interior pages */
body.dv-modern.page:not(.home) .neve-main {
background: #ffffff;
padding-bottom: 2rem;
}
/* giant hand-coded page titles (About uses a 60px paragraph) */
body.dv-modern.page-id-281 .neve-main > p.has-text-align-center,
body.dv-modern.page-id-281 .ticss-28f7ff21 {
font-size: clamp(1.6rem, 4.5vw, 2.35rem) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
color: var(--dv-ink) !important;
text-transform: none !important;
padding: 1.1rem 1rem 0.35rem !important;
margin: 0 auto !important;
max-width: 72rem;
}
/* leftover placeholder / invisible junk text on About */
body.dv-modern.page-id-281 p.has-nv-site-bg-color,
body.dv-modern.page-id-281 p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* THE FOREHEAD — hide by ID alone (no page-class dependency; Otter caches fight class selectors) */
#wp-block-themeisle-blocks-advanced-columns-376eb3a4 {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* About hero photo band — HIDDEN (was the huge white forehead: min-height 350–400px) */
body.dv-modern.page-id-281 #wp-block-themeisle-blocks-advanced-columns-376eb3a4 {
display: none !important;
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* certificate + story — soft rounded card; kill Neve alignwide overflow */
body.dv-modern.page-id-281 .wp-block-media-text,
body.dv-modern.page-id-281 .wp-block-media-text.alignwide {
max-width: 72rem;
width: auto !important;
margin: 0.5rem auto 1.75rem !important;
padding: clamp(0.75rem, 2.5vw, 1.25rem) !important;
gap: clamp(1rem, 2.5vw, 1.75rem) !important;
align-items: center !important;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 1.15rem !important;
box-shadow: var(--dv-shadow);
overflow: hidden;
box-sizing: border-box !important;
}
body.dv-modern.page-id-281 .wp-block-media-text__media {
border-radius: 0.9rem !important;
overflow: hidden !important;
margin: 0 !important;
}
body.dv-modern.page-id-281 .wp-block-media-text__media img,
body.dv-modern.page-id-281 .wp-block-media-text img,
body.dv-modern.page-id-281 .neve-main > .wp-block-image img,
body.dv-modern.page-id-281 .wp-block-image img {
border-radius: 0.9rem !important;
display: block;
width: 100%;
height: auto;
}
body.dv-modern.page-id-281 .wp-block-media-text__content {
padding: 0.25rem 0.35rem 0.35rem !important;
}
body.dv-modern.page-id-281 .wp-block-media-text p.has-medium-font-size,
body.dv-modern.page-id-281 .wp-block-media-text p {
font-size: clamp(0.92rem, 2.2vw, 1.05rem) !important;
line-height: 1.6 !important;
color: var(--dv-text) !important;
margin: 0 0 0.85rem !important;
}
body.dv-modern.page-id-281 .wp-block-themeisle-blocks-advanced-heading,
body.dv-modern.page-id-281 h2 {
font-size: clamp(1.25rem, 3vw, 1.7rem) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
text-align: center;
color: var(--dv-ink) !important;
text-transform: none !important;
margin: 1.5rem auto 1rem !important;
padding: 0 1rem;
}
/* gallery — rounded tiles with soft corners (WP nested gallery needs heavy overrides) */
body.dv-modern.page-id-281 .wp-block-gallery {
max-width: 72rem;
margin: 0 auto !important;
padding: 0 clamp(0.75rem, 2.5vw, 1.25rem) 1.5rem !important;
gap: clamp(0.65rem, 1.6vw, 1rem) !important;
}
body.dv-modern.page-id-281 .wp-block-gallery.has-nested-images figure.wp-block-image,
body.dv-modern.page-id-281 .wp-block-gallery .wp-block-image,
body.dv-modern.page-id-281 .wp-block-gallery figure {
border-radius: 0.9rem !important;
overflow: hidden !important;
box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.28) !important;
isolation: isolate;
}
body.dv-modern.page-id-281 .wp-block-gallery.has-nested-images figure.wp-block-image::after,
body.dv-modern.page-id-281 .wp-block-gallery .wp-block-image::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
background: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(255, 255, 255, 0.12) 100%);
}
body.dv-modern.page-id-281 .wp-block-gallery.has-nested-images figure.wp-block-image {
position: relative !important;
}
body.dv-modern.page-id-281 .wp-block-gallery.has-nested-images img,
body.dv-modern.page-id-281 .wp-block-gallery img {
border-radius: 0.9rem !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
@media (max-width: 768px) {
body.dv-modern.page-id-281 .neve-main > p.has-text-align-center,
body.dv-modern.page-id-281 .ticss-28f7ff21 {
font-size: clamp(1.45rem, 7vw, 1.85rem) !important;
padding: 0.85rem 1rem 0.25rem !important;
}
body.dv-modern.page-id-281 .wp-block-media-text,
body.dv-modern.page-id-281 .wp-block-media-text.alignwide {
width: calc(100% - 1.5rem) !important;
max-width: calc(100% - 1.5rem) !important;
margin-left: 0.75rem !important;
margin-right: 0.75rem !important;
padding: 0.75rem !important;
grid-template-columns: 1fr !important;
box-sizing: border-box !important;
}
body.dv-modern.page-id-281 .wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 100% !important;
}
body.dv-modern.page-id-281 .wp-block-media-text__media {
margin-bottom: 0.65rem !important;
border-radius: 0.8rem !important;
min-width: 0 !important;
}
body.dv-modern.page-id-281 .wp-block-media-text__content {
min-width: 0 !important;
max-width: 100% !important;
padding: 0.35rem 0 0 !important;
overflow-wrap: anywhere !important;
}
body.dv-modern.page-id-281 .wp-block-media-text__media img,
body.dv-modern.page-id-281 .wp-block-media-text img {
border-radius: 0.8rem !important;
max-width: 100% !important;
}
body.dv-modern.page-id-281 .wp-block-media-text p.has-medium-font-size,
body.dv-modern.page-id-281 .wp-block-media-text p {
font-size: 0.9rem !important;
line-height: 1.5 !important;
text-align: left !important;
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
body.dv-modern.page-id-281 .wp-block-gallery {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
gap: 0.55rem !important;
}
body.dv-modern.page-id-281 .wp-block-gallery.has-nested-images figure.wp-block-image,
body.dv-modern.page-id-281 .wp-block-gallery .wp-block-image,
body.dv-modern.page-id-281 .wp-block-gallery img {
border-radius: 0.75rem !important;
}
}
/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
body.dv-modern *,
body.dv-modern *::before,
body.dv-modern *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
body.dv-modern .dv-reveal {
opacity: 1;
transform: none;
}
}