/* ========================================================================= Vemar — main stylesheet Design tokens (light / dark), layout primitives, components, WP Cargo skin ========================================================================= */ /* ---------- 1. Tokens ------------------------------------------------- */ :root { --vg-primary: #f0521c; --vg-primary-strong: #d4420f; --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 12%, transparent); --vg-accent: #ffc247; --vg-navy: #0b1f3a; --vg-bg: #f5f6f8; --vg-surface: #ffffff; --vg-surface-2: #eef1f5; --vg-surface-3: #e4e8ee; --vg-text: #0b1220; --vg-muted: #5c6675; --vg-border: #e2e6ec; --vg-border-strong: #cfd5de; --vg-glass: rgba(255, 255, 255, 0.78); --vg-glass-border: rgba(255, 255, 255, 0.6); --vg-on-dark: #ffffff; --vg-on-dark-muted: rgba(255, 255, 255, 0.72); --vg-shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.06), 0 1px 3px rgba(10, 20, 40, 0.08); --vg-shadow-md: 0 12px 32px -12px rgba(10, 20, 40, 0.28); --vg-shadow-lg: 0 32px 64px -24px rgba(10, 20, 40, 0.4); --vg-r-sm: 10px; --vg-r-md: 16px; --vg-r-lg: 24px; --vg-r-xl: 32px; --vg-ink: #0b1220; /* dark ink used on light/accent surfaces in both modes */ --vg-ink-deep: #0b0f17; /* footer / dark bands */ --vg-navy-deep: #071120; --vg-whatsapp: #25d366; --vg-success: #16a34a; --vg-error: #dc2626; --vg-header-h: 92px; --vg-ease: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vg-primary: #ff5f2b; --vg-primary-strong: #ff7a4d; --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 16%, transparent); --vg-bg: #0b0f17; --vg-surface: #111827; --vg-surface-2: #182132; --vg-surface-3: #202b3f; --vg-text: #f1f4f9; --vg-muted: #9aa4b4; --vg-border: #1f2a3d; --vg-border-strong: #2c3a52; --vg-glass: rgba(17, 24, 39, 0.78); --vg-glass-border: rgba(255, 255, 255, 0.1); --vg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --vg-shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7); --vg-shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8); color-scheme: dark; } } :root[data-theme="dark"] { --vg-primary: #ff5f2b; --vg-primary-strong: #ff7a4d; --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 16%, transparent); --vg-bg: #0b0f17; --vg-surface: #111827; --vg-surface-2: #182132; --vg-surface-3: #202b3f; --vg-text: #f1f4f9; --vg-muted: #9aa4b4; --vg-border: #1f2a3d; --vg-border-strong: #2c3a52; --vg-glass: rgba(17, 24, 39, 0.78); --vg-glass-border: rgba(255, 255, 255, 0.1); --vg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --vg-shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7); --vg-shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8); color-scheme: dark; } /* ---------- 2. Base --------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* `html body` outranks third-party resets (e.g. WP Cargo's Bootstrap) that set their own body font. */ html body, html body input, html body button, html body select, html body textarea { font-family: var(--wp--preset--font-family--body); } body { background: var(--vg-bg); color: var(--vg-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.25s var(--vg-ease), color 0.25s var(--vg-ease); overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--vg-primary); color: var(--vg-on-dark); } :focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 3px; border-radius: 4px; } a { transition: color 0.2s var(--vg-ease); } p:empty { display: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1 0 auto; } .wp-site-blocks > * + * { margin-block-start: 0; } /* Buttons (core) */ .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.6em; transition: transform 0.2s var(--vg-ease), background-color 0.2s var(--vg-ease), color 0.2s, box-shadow 0.2s, border-color 0.2s; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--vg-primary) 55%, transparent); line-height: 1.2; } .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button__link:active { transform: translateY(0); } .is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--vg-text) !important; border: 1.5px solid var(--vg-border-strong) !important; box-shadow: none; padding: calc(0.8rem - 1.5px) calc(1.5rem - 1.5px); } .is-style-outline .wp-block-button__link:hover { border-color: var(--vg-text) !important; } .is-style-ghost .wp-block-button__link { background: transparent !important; color: var(--vg-text) !important; box-shadow: none; padding-left: 0.4rem; padding-right: 0.4rem; } .is-style-ghost .wp-block-button__link:hover { color: var(--vg-primary) !important; } .is-style-white .wp-block-button__link { background: var(--vg-on-dark) !important; color: var(--vg-ink) !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); } .is-style-white .wp-block-button__link:hover { background: color-mix(in srgb, var(--vg-on-dark) 92%, var(--vg-ink)) !important; } .is-style-dark .wp-block-button__link { background: var(--vg-ink) !important; color: var(--vg-on-dark) !important; box-shadow: none; } :root[data-theme="dark"] .is-style-dark .wp-block-button__link { background: var(--vg-on-dark) !important; color: var(--vg-ink) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-style-dark .wp-block-button__link { background: var(--vg-on-dark) !important; color: var(--vg-ink) !important; } } .is-style-arrow .wp-block-button__link::after, .vg-btn--arrow::after { content: ""; width: 0.9em; height: 0.9em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 0.25s var(--vg-ease); } .is-style-arrow .wp-block-button__link:hover::after, .vg-btn--arrow:hover::after { transform: translate(2px, -2px); } /* Paragraph / heading styles */ .is-style-eyebrow, .vg-eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--wp--preset--font-family--heading); font-size: 0.78rem !important; font-weight: 600; letter-spacing: 0.02em; color: var(--vg-primary); background: var(--vg-primary-soft); border: 1px solid color-mix(in srgb, var(--vg-primary) 25%, transparent); border-radius: 999px; padding: 0.35em 0.9em; margin: 0 0 1rem; } .is-style-eyebrow::before, .vg-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .is-style-lead { font-size: var(--wp--preset--font-size--large); color: var(--vg-muted); line-height: 1.5; } .is-style-small-muted { font-size: var(--wp--preset--font-size--small); color: var(--vg-muted); } .is-style-display { font-size: var(--wp--preset--font-size--display) !important; font-weight: 500; letter-spacing: -0.035em; } .has-muted-color { color: var(--vg-muted) !important; } .is-style-checks { list-style: none; padding-left: 0; } .is-style-checks li { position: relative; padding-left: 1.9rem; margin-bottom: 0.55rem; } .is-style-checks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--vg-primary-soft); -webkit-mask: none; } .is-style-checks li::after { content: ""; position: absolute; left: 0.32rem; top: 0.5em; width: 0.6rem; height: 0.6rem; background: var(--vg-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .is-style-rounded-lg img, .is-style-rounded-lg { border-radius: var(--vg-r-lg); overflow: hidden; } /* Group styles */ .is-style-card, .vg-card { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-r-lg); box-shadow: var(--vg-shadow-sm); transition: transform 0.3s var(--vg-ease), box-shadow 0.3s var(--vg-ease), border-color 0.3s; } .is-style-card-soft { background: var(--vg-surface-2); border-radius: var(--vg-r-lg); } .is-style-glass, .vg-glass { background: var(--vg-glass); border: 1px solid var(--vg-glass-border); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-radius: var(--vg-r-lg); box-shadow: var(--vg-shadow-lg); } .is-style-band-navy, .is-style-band-dark { background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--vg-primary) 22%, transparent), transparent 55%), linear-gradient(160deg, var(--vg-navy) 0%, var(--vg-navy-deep) 100%); color: var(--vg-on-dark); border-radius: var(--vg-r-xl); } .is-style-band-dark { background: radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--vg-primary) 25%, transparent), transparent 55%), var(--vg-ink-deep); } .is-style-band-navy *:where(h1,h2,h3,h4,h5,h6,p,li,a), .is-style-band-dark *:where(h1,h2,h3,h4,h5,h6,p,li,a) { color: inherit; } .is-style-band-navy .has-muted-color, .is-style-band-dark .has-muted-color { color: var(--vg-on-dark-muted) !important; } .is-style-band-navy .is-style-eyebrow, .is-style-band-dark .is-style-eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: var(--vg-accent); } .is-style-cards > .wp-block-column { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-r-lg); padding: 1.75rem; box-shadow: var(--vg-shadow-sm); } /* Sections */ .vg-section { padding-block: var(--wp--preset--spacing--60); } .vg-section--tight { padding-block: var(--wp--preset--spacing--50); } .vg-section-head { max-width: 640px; } .vg-section-head.is-center { margin-inline: auto; text-align: center; } .vg-section-head.is-center .is-style-eyebrow { margin-inline: auto; } /* ---------- 3. Header ------------------------------------------------- */ .vg-header { position: sticky; top: 0; z-index: 60; padding-block: 0.85rem; border-bottom: 1px solid transparent; transition: border-color 0.3s, padding 0.3s; } /* The blurred backdrop lives on a pseudo-element: a backdrop-filter on the header itself would turn it into the containing block of the fixed-position mobile menu overlay. */ .vg-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--vg-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); transition: background-color 0.3s var(--vg-ease), opacity 0.3s; } .vg-header.is-scrolled { border-bottom-color: var(--vg-border); padding-block: 0.55rem; } body.vg-has-hero .vg-header:not(.is-scrolled)::before { opacity: 0; } .vg-header > .wp-block-group { align-items: center; } .vg-header .wp-block-site-logo img { height: 40px; width: auto; } .vg-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--vg-text) !important; } .vg-brand__mark { width: 38px; height: 38px; flex: none; } /* Pill nav (reference look) */ .vg-nav-pill { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: 999px; padding: 0.3rem; box-shadow: var(--vg-shadow-sm); } .vg-nav-pill .wp-block-navigation__container { gap: 0.15rem; } .vg-nav-pill .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.95rem !important; border-radius: 999px; color: var(--vg-text); transition: background-color 0.2s, color 0.2s; } .vg-nav-pill .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding-right: 0.35rem !important; border-radius: 999px 0 0 999px; } .vg-nav-pill .wp-block-navigation-submenu__toggle { display: inline-flex; align-items: center; justify-content: center; width: auto !important; height: auto !important; padding: 0.55rem 0.7rem 0.55rem 0.1rem !important; border-radius: 0 999px 999px 0; color: var(--vg-text); background: transparent; border: 0; cursor: pointer; } .vg-nav-pill .wp-block-navigation__submenu-icon svg { width: 12px !important; height: 12px !important; display: block; } .vg-nav-pill .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle { background: var(--vg-surface-2); } .vg-nav-pill .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .vg-nav-pill .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .vg-nav-pill .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { background: var(--vg-surface-2); color: var(--vg-text); } .vg-nav-pill .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--vg-primary); } /* Submenus */ .wp-block-navigation .wp-block-navigation__submenu-container { background: var(--vg-surface) !important; border: 1px solid var(--vg-border) !important; border-radius: var(--vg-r-md); box-shadow: var(--vg-shadow-md); padding: 0.4rem; min-width: 260px !important; color: var(--vg-text) !important; margin-top: 0.75rem !important; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 0.8rem !important; border-radius: var(--vg-r-sm); display: flex; gap: 0.7rem; align-items: center; color: var(--vg-text) !important; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--vg-surface-2); } .vg-menu-icon { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--vg-primary-soft); color: var(--vg-primary); } .vg-menu-icon svg { width: 18px; height: 18px; } .vg-menu-label { display: flex; flex-direction: column; line-height: 1.2; } .vg-menu-label small { color: var(--vg-muted); font-size: 0.75rem; font-weight: 400; margin-top: 2px; } .vg-services-submenu .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; min-width: 560px !important; } .vg-services-submenu .wp-block-navigation__submenu-container .vg-submenu-footer { grid-column: 1 / -1; border-top: 1px solid var(--vg-border); margin-top: 0.3rem; padding-top: 0.3rem; } .vg-services-submenu .vg-submenu-footer .wp-block-navigation-item__content { color: var(--vg-primary) !important; font-weight: 600; } @media (max-width: 1100px) { .vg-services-submenu .wp-block-navigation__submenu-container { min-width: 420px !important; grid-template-columns: 1fr; } } /* Transparent header on hero pages */ body.vg-has-hero .vg-header:not(.is-scrolled) .vg-brand, body.vg-has-hero .vg-header:not(.is-scrolled) .wp-block-site-title a { color: var(--vg-on-dark) !important; } body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); } body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill .wp-block-navigation-item__content, body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill .wp-block-navigation-submenu__toggle, body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill .wp-block-navigation__submenu-icon { color: var(--vg-on-dark); } body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill .wp-block-navigation-item:hover > .wp-block-navigation-item__content, body.vg-has-hero .vg-header:not(.is-scrolled) .vg-nav-pill .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { background: rgba(255,255,255,.16); color: var(--vg-on-dark); } body.vg-has-hero .vg-header:not(.is-scrolled) .vg-theme-toggle, body.vg-has-hero .vg-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: var(--vg-on-dark); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); } /* Over the hero photo the header is transparent: use the logo made for dark backgrounds */ body.vg-has-hero .vg-header:not(.is-scrolled) .vg-logo-light { display: none; } body.vg-has-hero .vg-header:not(.is-scrolled) .vg-logo-dark { display: block; } /* Mobile nav */ .wp-block-navigation__responsive-container-open { border: 1px solid var(--vg-border); border-radius: 999px; padding: 0.45rem !important; background: var(--vg-surface); } .wp-block-navigation__responsive-container.is-menu-open { background: var(--vg-bg) !important; color: var(--vg-text) !important; padding: 1.5rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.25rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: 0.6rem 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static; box-shadow: none; border: 0 !important; background: transparent !important; padding-left: 0.5rem; min-width: 0 !important; display: block !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; } .wp-block-navigation__responsive-container-close { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: 999px; padding: 0.45rem !important; } .vg-services-submenu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { grid-template-columns: 1fr; min-width: 0 !important; } @media (max-width: 1100px) { .vg-header-cta .wp-block-button__link { padding: 0.65rem 1.1rem; font-size: 0.85rem; } } @media (max-width: 860px) { .vg-header .vg-header-cta { display: none; } } /* Theme toggle */ .vg-theme-toggle { appearance: none; border: 1px solid var(--vg-border); background: var(--vg-surface); color: var(--vg-text); width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.2s; } .vg-theme-toggle:hover { transform: rotate(-12deg); } .vg-theme-toggle svg { width: 18px; height: 18px; } .vg-theme-toggle .vg-icon-moon { display: none; } :root[data-theme="dark"] .vg-theme-toggle .vg-icon-moon { display: block; } :root[data-theme="dark"] .vg-theme-toggle .vg-icon-sun { display: none; } /* Logo variants */ .vg-logo-dark { display: none; } :root[data-theme="dark"] .vg-logo-light { display: none; } :root[data-theme="dark"] .vg-logo-dark { display: block; } /* Logo image sizes (the artwork is ~2.7:1 and includes a small tagline) */ .vg-brand .vg-logo { height: 52px; width: auto; max-width: none; vertical-align: middle; } .vg-footer .vg-brand .vg-logo { height: 72px; } @media (max-width: 600px) { .vg-brand .vg-logo { height: 42px; } .vg-footer .vg-brand .vg-logo { height: 60px; } } /* The open mobile menu has a light panel (dark in dark mode), whatever the hero header shows */ :root:not([data-theme="dark"]) body .vg-header .is-menu-open .vg-mobile-top .vg-logo-light { display: block; } :root:not([data-theme="dark"]) body .vg-header .is-menu-open .vg-mobile-top .vg-logo-dark { display: none; } .vg-loader__logo { width: min(240px, 60vw); height: auto; animation: vg-loader-pulse 1.4s ease-in-out infinite; } /* ---------- 4. Hero --------------------------------------------------- */ /* On hero pages the sticky header overlaps the hero: pull following content up by the header height. */ body.vg-has-hero .vg-header { margin-bottom: calc(-1 * var(--vg-header-h)); } .vg-hero { position: relative; min-height: min(92vh, 900px); border-radius: 0 0 var(--vg-r-xl) var(--vg-r-xl); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; padding-top: calc(var(--vg-header-h) + 1rem) !important; } .vg-hero > .wp-block-cover__inner-container > .vg-hero__grid { max-width: var(--wp--style--global--wide-size, 1240px) !important; width: 100%; margin-inline: auto; } .vg-hero .wp-block-cover__image-background { object-position: 60% 50%; } @keyframes vg-kenburns { from { transform: scale(1.02) } to { transform: scale(1.1) } } @media (prefers-reduced-motion: reduce) { .vg-hero-slides.has-kenburns .vg-hero-slide.is-active { animation: none; } .vg-hero-slide { transition: none; } } .vg-hero .wp-block-cover__inner-container { width: 100%; } .vg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 3rem; align-items: end; } .vg-hero__title { color: var(--vg-on-dark); font-weight: 400; text-wrap: balance; font-size: clamp(2.4rem, 4.3vw, 3.9rem) !important; line-height: 1.08; } .vg-hero__title strong, .vg-hero__title em { font-style: normal; font-weight: 600; color: var(--vg-accent); } .vg-hero .vg-eyebrow, .vg-hero .is-style-eyebrow { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: var(--vg-on-dark); backdrop-filter: blur(8px); } .vg-hero__lead { color: rgba(255,255,255,.82); max-width: 520px; } .vg-hero__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; color: rgba(255,255,255,.7); font-size: 0.85rem; margin-top: 1rem; } .vg-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .vg-hero__meta svg { width: 16px; height: 16px; color: var(--vg-accent); } @media (max-width: 960px) { .vg-hero { min-height: 0; border-radius: 0 0 var(--vg-r-lg) var(--vg-r-lg); } .vg-hero__grid { grid-template-columns: 1fr; } } /* Tracking / quote widget */ .vg-widget { padding: 1rem; color: var(--vg-text); } .vg-widget__tabs { display: flex; gap: 0.35rem; background: var(--vg-surface-2); border-radius: 999px; padding: 0.3rem; margin-bottom: 1rem; } .vg-widget__tab { flex: 1; appearance: none; border: 0; background: transparent; color: var(--vg-muted); font: inherit; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 0.9rem; border-radius: 999px; cursor: pointer; transition: all 0.25s var(--vg-ease); } .vg-widget__tab[aria-selected="true"] { background: var(--vg-accent); color: var(--vg-ink); box-shadow: var(--vg-shadow-sm); } .vg-widget__panel[hidden] { display: none; } .vg-widget__panel { display: grid; gap: 0.6rem; } .vg-field { position: relative; display: flex; align-items: center; gap: 0.6rem; background: var(--vg-surface-2); border: 1px solid transparent; border-radius: var(--vg-r-sm); padding: 0.75rem 0.9rem; transition: border-color 0.2s, background-color 0.2s; } .vg-field:focus-within { border-color: var(--vg-primary); background: var(--vg-surface); } .vg-field svg { width: 18px; height: 18px; color: var(--vg-muted); flex: none; } .vg-field input, .vg-field select { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--vg-text); font: inherit; font-size: 0.92rem; } .vg-field select { appearance: none; cursor: pointer; } .vg-field input::placeholder { color: var(--vg-muted); } .vg-widget__row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; } .vg-widget__swap { appearance: none; border: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--vg-accent); color: var(--vg-ink); display: grid; place-items: center; cursor: pointer; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); box-shadow: var(--vg-shadow-sm); z-index: 2; } .vg-widget__swap svg { width: 16px; height: 16px; color: var(--vg-ink); } .vg-widget__route { position: relative; display: grid; gap: 0.6rem; } .vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; appearance: none; border: 0; cursor: pointer; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.92rem; padding: 0.8rem 1.4rem; border-radius: 999px; background: var(--vg-primary); color: var(--vg-on-dark); text-decoration: none; transition: transform 0.2s var(--vg-ease), background-color 0.2s; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--vg-primary) 55%, transparent); } .vg-btn:hover { background: var(--vg-primary-strong); color: var(--vg-on-dark); transform: translateY(-1px); } .vg-btn--block { width: 100%; box-sizing: border-box; } .vg-btn { box-sizing: border-box; } .vg-btn--outline { background: transparent; color: var(--vg-text); border: 1.5px solid var(--vg-border-strong); box-shadow: none; } .vg-btn--outline:hover { background: var(--vg-surface-2); color: var(--vg-text); } .vg-btn--dark { background: var(--vg-ink); color: var(--vg-on-dark); box-shadow: none; } .vg-btn--sm { padding: 0.55rem 1rem; font-size: 0.85rem; } .vg-btn svg { width: 16px; height: 16px; } .vg-widget__hint { font-size: 0.78rem; color: var(--vg-muted); margin: 0.2rem 0 0; } .vg-widget__hint a { color: var(--vg-primary); } /* ---------- 5. Partners marquee -------------------------------------- */ .vg-partners { text-align: center; } .vg-partners__title { color: var(--vg-muted); font-size: 0.9rem; margin: 0 0 1.5rem; } .vg-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .vg-marquee__track { display: flex; gap: 4rem; width: max-content; animation: vg-marquee 40s linear infinite; align-items: center; } .vg-marquee:hover .vg-marquee__track { animation-play-state: paused; } @keyframes vg-marquee { to { transform: translateX(-50%); } } .vg-partner { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: var(--vg-text); opacity: 0.75; white-space: nowrap; transition: opacity 0.2s; filter: grayscale(1); } .vg-partner:hover { opacity: 1; filter: none; } .vg-partner img { height: 34px; width: auto; } .vg-partner svg { height: 30px; width: auto; } .vg-partners.is-grid .vg-marquee { -webkit-mask: none; mask: none; } .vg-partners.is-grid .vg-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.5rem; } @media (prefers-reduced-motion: reduce) { .vg-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } } /* ---------- 6. Bento / media grid ----------------------------------- */ .vg-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.75rem; aspect-ratio: 1 / 1.05; } .vg-bento > * { border-radius: var(--vg-r-md); overflow: hidden; margin: 0 !important; } .vg-bento > *:first-child { grid-row: 1 / 3; } .vg-bento img, .vg-bento figure, .vg-bento .wp-block-image { width: 100%; height: 100%; object-fit: cover; } .vg-bento .wp-block-image img { height: 100%; object-fit: cover; transition: transform 0.6s var(--vg-ease); } .vg-bento .wp-block-image:hover img { transform: scale(1.04); } /* ---------- 7. Services grid ---------------------------------------- */ .vg-services { display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--vg-cols, 3), minmax(0, 1fr)); } @media (max-width: 1000px) { .vg-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .vg-services { grid-template-columns: 1fr; } } .vg-service { display: flex; flex-direction: column; padding: 1.6rem; text-decoration: none; color: inherit; position: relative; overflow: hidden; } .vg-service:hover { transform: translateY(-4px); box-shadow: var(--vg-shadow-md); border-color: var(--vg-border-strong); } .vg-service__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--vg-primary-soft); color: var(--vg-primary); margin-bottom: 1.25rem; } .vg-service__icon svg { width: 26px; height: 26px; } .vg-service h3 { font-size: 1.2rem; margin: 0 0 0.5rem; font-weight: 600; } .vg-service p { color: var(--vg-muted); font-size: 0.95rem; margin: 0 0 1.25rem; flex: 1; } .vg-service__more { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.9rem; color: var(--vg-primary); } .vg-service__more::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 0.25s; } .vg-service:hover .vg-service__more::after { transform: translateX(3px); } .vg-service.has-image { padding: 0; } .vg-service.has-image .vg-service__media { aspect-ratio: 16/10; overflow: hidden; } .vg-service.has-image .vg-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--vg-ease); } .vg-service.has-image:hover .vg-service__media img { transform: scale(1.05); } .vg-service.has-image .vg-service__body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .vg-service.has-image .vg-service__icon { position: absolute; top: 1rem; left: 1rem; margin: 0; width: 44px; height: 44px; background: var(--vg-glass); backdrop-filter: blur(10px); } .vg-service--row { flex-direction: row; align-items: flex-start; gap: 1.25rem; } .vg-service--row .vg-service__icon { margin: 0; flex: none; } .vg-service--row p { margin-bottom: 0.5rem; } /* Service list (footer) */ .vg-services-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .vg-services-list a { color: var(--vg-muted); font-size: 0.95rem; } .vg-services-list a:hover { color: var(--vg-primary); } /* ---------- 8. Stats -------------------------------------------------- */ .vg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--vg-r-md); overflow: hidden; } .vg-stat { padding: 1.75rem 2rem; background: rgba(5,10,20,.35); backdrop-filter: blur(6px); } .vg-stat__value { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--vg-on-dark); } .vg-stat__value span { color: var(--vg-accent); } .vg-stat__label { color: var(--vg-on-dark-muted); font-size: 0.92rem; margin-top: 0.7rem; } @media (max-width: 600px) { .vg-stats { grid-template-columns: 1fr 1fr !important; } .vg-stat { padding: 1.25rem 1.1rem; } } .vg-stats.is-light { background: var(--vg-border); border-color: var(--vg-border); } .vg-stats.is-light .vg-stat { background: var(--vg-surface); backdrop-filter: none; } .vg-stats.is-light .vg-stat__value { color: var(--vg-text); } .vg-stats.is-light .vg-stat__label { color: var(--vg-muted); } /* ---------- 9. Process steps ---------------------------------------- */ .vg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: step; } @media (max-width: 960px) { .vg-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .vg-steps { grid-template-columns: 1fr; } } .vg-step { position: relative; padding: 1.6rem; counter-increment: step; } .vg-step::before { content: "0" counter(step); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.85rem; color: var(--vg-primary); letter-spacing: 0.08em; display: block; margin-bottom: 1rem; } .vg-step h3 { font-size: 1.15rem; margin: 0 0 0.5rem; } .vg-step p { color: var(--vg-muted); font-size: 0.95rem; margin: 0; } /* ---------- 10. Feature rows / why us -------------------------------- */ .vg-feature { display: flex; gap: 1rem; align-items: flex-start; } .vg-feature__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--vg-primary-soft); color: var(--vg-primary); display: grid; place-items: center; } .vg-feature__icon svg { width: 22px; height: 22px; } .vg-feature h4 { margin: 0 0 0.25rem; font-size: 1.05rem; } .vg-feature p { margin: 0; color: var(--vg-muted); font-size: 0.95rem; } /* ---------- 11. Testimonials --------------------------------------- */ .vg-testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } @media (max-width: 960px) { .vg-testimonials { grid-template-columns: 1fr; } } .vg-testimonial { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .vg-testimonial__stars { display: flex; gap: 2px; color: var(--vg-accent); } .vg-testimonial__stars svg { width: 16px; height: 16px; } .vg-testimonial blockquote { margin: 0; padding: 0; border: 0; font-size: 1.02rem; line-height: 1.6; flex: 1; } .vg-testimonial blockquote p { margin: 0; } .vg-testimonial__author { display: flex; align-items: center; gap: 0.8rem; } .vg-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--vg-primary-soft); color: var(--vg-primary); display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; overflow: hidden; flex: none; } .vg-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; } .vg-testimonial__name { font-weight: 600; font-size: 0.95rem; } .vg-testimonial__role { color: var(--vg-muted); font-size: 0.85rem; } /* Testimonials carousel: scroll-snap track (swipe / trackpad / keyboard) + arrows and dots from main.js */ .vg-testimonials.is-carousel { display: block; --vg-gap: 1.25rem; } .vg-carousel__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--vg-per-view, 3) - 1) * var(--vg-gap)) / var(--vg-per-view, 3)); gap: var(--vg-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: .35rem .1rem 1rem; margin: -.35rem -.1rem -1rem; outline: none; } .vg-carousel__track::-webkit-scrollbar { display: none; } .vg-carousel__track:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vg-primary) 35%, transparent); border-radius: var(--vg-r-md); } .vg-carousel__track > .vg-testimonial { scroll-snap-align: start; min-width: 0; } @media (max-width: 1100px) { .vg-carousel__track { grid-auto-columns: calc((100% - var(--vg-gap)) / 2); } } @media (max-width: 700px) { .vg-carousel__track { grid-auto-columns: 86%; } } .vg-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .vg-carousel__btn { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vg-border); background: var(--vg-surface); color: var(--vg-text); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s; } .vg-carousel__btn:hover:not(:disabled) { background: var(--vg-primary); border-color: var(--vg-primary); color: var(--vg-on-dark); } .vg-carousel__btn:disabled { opacity: .35; cursor: default; } .vg-carousel__btn svg { width: 18px; height: 18px; } .vg-carousel__btn[data-dir="-1"] svg { transform: rotate(180deg); } .vg-carousel__dots { display: flex; gap: .5rem; } .vg-carousel__dots button { appearance: none; border: 0; padding: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--vg-border-strong, var(--vg-border)); cursor: pointer; transition: width .25s var(--vg-ease), background-color .25s; } .vg-carousel__dots button[aria-current="true"] { width: 24px; background: var(--vg-primary); } @media (prefers-reduced-motion: reduce) { .vg-carousel__track { scroll-behavior: auto; } .vg-carousel__dots button { transition: none; } } /* ---------- 12. FAQ -------------------------------------------------- */ .vg-faq { display: grid; gap: 0.75rem; } .vg-faq details { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-r-md); padding: 0 1.4rem; transition: border-color 0.2s, box-shadow 0.3s var(--vg-ease), transform 0.3s var(--vg-ease); box-sizing: border-box; } .vg-faq details:hover { border-color: var(--vg-border-strong); } .vg-faq details[open] { box-shadow: var(--vg-shadow-md); } .vg-faq details[open] { border-color: var(--vg-border-strong); } .vg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.05rem; } .vg-faq summary::-webkit-details-marker { display: none; } .vg-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--vg-surface-2); -webkit-mask: none; position: relative; transition: transform 0.35s var(--vg-ease), background-color 0.2s; } .vg-faq summary::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000 0 0); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: var(--vg-muted); } .vg-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--vg-primary-soft); } .vg-faq .vg-faq__body { padding: 0 0 1.25rem; color: var(--vg-muted); } .vg-faq .vg-faq__body p:last-child { margin-bottom: 0; } /* ---------- 13. Forms ----------------------------------------------- */ .vg-form { display: grid; gap: 1rem; } .vg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .vg-form__grid { grid-template-columns: 1fr; } } .vg-form__group { display: grid; gap: 0.4rem; } .vg-form__group.is-full { grid-column: 1 / -1; } .vg-form label { font-size: 0.85rem; font-weight: 600; font-family: var(--wp--preset--font-family--heading); } .vg-form label span { color: var(--vg-primary); } .vg-form input:not([type="checkbox"]):not([type="radio"]), .vg-form select, .vg-form textarea { width: 100%; background: var(--vg-surface); border: 1px solid var(--vg-border-strong); border-radius: var(--vg-r-sm); padding: 0.8rem 1rem; font: inherit; font-size: 0.95rem; color: var(--vg-text); transition: border-color 0.2s, box-shadow 0.2s; } .vg-form input:focus, .vg-form select:focus, .vg-form textarea:focus { outline: 0; border-color: var(--vg-primary); box-shadow: 0 0 0 4px var(--vg-primary-soft); } .vg-form textarea { min-height: 140px; resize: vertical; } .vg-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px; padding-right: 2.5rem; } .vg-form .vg-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--vg-muted); font-weight: 400; font-family: inherit; } .vg-form .vg-consent input { margin-top: 0.25rem; accent-color: var(--vg-primary); } .vg-form__footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .vg-form__notice { padding: 1rem 1.25rem; border-radius: var(--vg-r-sm); font-size: 0.95rem; } .vg-form__notice.is-success { background: color-mix(in srgb, var(--vg-success) 12%, transparent); color: var(--vg-success); border: 1px solid color-mix(in srgb, var(--vg-success) 30%, transparent); } .vg-form__notice.is-error { background: color-mix(in srgb, var(--vg-error) 10%, transparent); color: var(--vg-error); border: 1px solid color-mix(in srgb, var(--vg-error) 30%, transparent); } .vg-form .vg-hp { position: absolute; left: -9999px; } .vg-form [aria-busy="true"] { opacity: 0.6; pointer-events: none; } .vg-form__section-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vg-muted); grid-column: 1 / -1; margin-top: 0.5rem; } .vg-radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; } .vg-radio-card { position: relative; } .vg-radio-card input { position: absolute; opacity: 0; inset: 0; } .vg-radio-card span { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; border: 1px solid var(--vg-border-strong); border-radius: var(--vg-r-sm); font-size: 0.9rem; cursor: pointer; transition: all 0.2s; background: var(--vg-surface); } .vg-radio-card span svg { width: 18px; height: 18px; color: var(--vg-muted); } .vg-radio-card input:checked + span { border-color: var(--vg-primary); background: var(--vg-primary-soft); color: var(--vg-primary); font-weight: 600; } .vg-radio-card input:checked + span svg { color: var(--vg-primary); } /* ---------- 14. Contact cards / offices ------------------------------ */ .vg-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } @media (max-width: 960px) { .vg-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .vg-offices { grid-template-columns: 1fr; } } .vg-office { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; } .vg-office:hover { transform: translateY(-3px); box-shadow: var(--vg-shadow-md); } .vg-office__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .vg-office__code { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 0.6rem; border-radius: 8px; background: var(--vg-surface-2); color: var(--vg-text); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; } .vg-office__badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-primary); background: var(--vg-primary-soft); padding: 0.3rem 0.65rem; border-radius: 999px; } .vg-office h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; } .vg-office h3 small { display: block; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 0.85rem; color: var(--vg-muted); margin-top: 0.2rem; } .vg-office__body { display: grid; gap: 0.75rem; flex: 1; } .vg-office__addr, .vg-office__hours { margin: 0; display: flex; gap: 0.55rem; align-items: flex-start; color: var(--vg-muted); font-size: 0.92rem; line-height: 1.5; } .vg-office__addr svg, .vg-office__hours svg, .vg-office__links svg { width: 16px; height: 16px; flex: none; margin-top: 0.2rem; color: var(--vg-primary); } .vg-office__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .vg-office__links a { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; } .vg-office__hours { padding-top: 0.9rem; border-top: 1px solid var(--vg-border); font-size: 0.85rem; } /* Headquarters: featured card spanning two columns, contact details beside the address */ @media (min-width: 961px) { .vg-office.is-hq { grid-column: span 2; background: linear-gradient(135deg, var(--vg-surface) 0%, color-mix(in srgb, var(--vg-primary) 6%, var(--vg-surface)) 100%); } .vg-office.is-hq .vg-office__body { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; align-items: start; } } .vg-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .vg-contact-list li { display: flex; gap: 0.9rem; align-items: flex-start; } .vg-contact-list .vg-feature__icon { width: 42px; height: 42px; } .vg-contact-list strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vg-muted); margin-bottom: 0.15rem; } .vg-contact-list a { font-weight: 500; } .vg-map { border-radius: var(--vg-r-lg); overflow: hidden; border: 1px solid var(--vg-border); aspect-ratio: 16/9; background: var(--vg-surface-2); } .vg-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); } :root[data-theme="dark"] .vg-map iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.6); } /* ---------- 15. Team ------------------------------------------------- */ .vg-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .vg-member { overflow: hidden; } .vg-member__photo { aspect-ratio: 1; background: var(--vg-surface-2); display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-size: 2.5rem; font-weight: 600; color: var(--vg-primary); overflow: hidden; } .vg-member__photo img { width: 100%; height: 100%; object-fit: cover; } .vg-member__photo:has(.vg-member__silhouette) { place-items: end center; background: linear-gradient(160deg, var(--vg-surface-2), color-mix(in srgb, var(--vg-primary) 10%, var(--vg-surface-2))); } .vg-member__silhouette { width: 78%; height: auto; display: block; fill: color-mix(in srgb, var(--vg-muted) 45%, transparent); } .vg-member__body { padding: 1.25rem 1.4rem; } .vg-member h3 { margin: 0; font-size: 1.05rem; } .vg-member p { margin: 0.2rem 0 0; color: var(--vg-muted); font-size: 0.9rem; } .vg-member a { display: inline-flex; margin-top: 0.6rem; color: var(--vg-muted); } .vg-member a svg { width: 18px; height: 18px; } /* ---------- 16. Blog / query loops ---------------------------------- */ .vg-post-card { overflow: hidden; display: flex; flex-direction: column; height: 100%; } .vg-post-card:hover { transform: translateY(-3px); box-shadow: var(--vg-shadow-md); } .vg-post-card .wp-block-post-featured-image { aspect-ratio: 16/10; overflow: hidden; margin: 0; } .vg-post-card .wp-block-post-featured-image img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.6s var(--vg-ease); } .vg-post-card:hover .wp-block-post-featured-image img { transform: scale(1.04); } .vg-post-card__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .vg-post-card .wp-block-post-title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0; } .vg-post-card .wp-block-post-excerpt { color: var(--vg-muted); font-size: 0.93rem; } .vg-post-card .wp-block-post-excerpt__excerpt { margin-bottom: 0; } .vg-post-card .wp-block-post-terms { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .vg-post-card .wp-block-post-terms a { color: var(--vg-primary); } .vg-post-card .wp-block-post-date { font-size: 0.82rem; color: var(--vg-muted); } .vg-post-card .vg-post-meta { display: flex; gap: 0.75rem; align-items: center; font-size: 0.82rem; color: var(--vg-muted); } .wp-block-query-pagination { margin-top: 2.5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; } .wp-block-query-pagination-numbers .page-numbers { padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--vg-border); margin-right: 0.3rem; } .wp-block-query-pagination-numbers .page-numbers.current { background: var(--vg-primary); color: var(--vg-on-dark); border-color: var(--vg-primary); } /* Single post / page prose */ .vg-prose { font-size: 1.08rem; line-height: 1.75; } .vg-prose > * { margin-block: 1.25em; } .vg-prose h2 { margin-top: 2em; } .vg-prose figure img { border-radius: var(--vg-r-md); } .vg-prose .wp-block-table table { border-collapse: collapse; width: 100%; } .vg-prose .wp-block-table td, .vg-prose .wp-block-table th { border: 1px solid var(--vg-border); padding: 0.6rem 0.9rem; } .vg-prose .wp-block-table th { background: var(--vg-surface-2); } .vg-page-head { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); } .vg-page-head .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 500; letter-spacing: -0.03em; } .vg-post-hero .wp-block-post-featured-image img { border-radius: var(--vg-r-xl); aspect-ratio: 21/9; object-fit: cover; } .vg-post-meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--vg-muted); font-size: 0.9rem; align-items: center; } .vg-post-meta-row .wp-block-post-terms a { color: var(--vg-primary); font-weight: 600; } .vg-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--vg-border); font-family: var(--wp--preset--font-family--heading); font-weight: 600; } /* Page header band (self-contained, does not rely on core cover CSS) */ .vg-band { border-radius: var(--vg-r-xl); overflow: hidden; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 300px; margin-top: 0.5rem; color: var(--vg-on-dark); } .vg-band.has-image { min-height: min(56vh, 520px); } .vg-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .vg-band__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,10,20,.2) 0%, rgba(5,10,20,.85) 100%); } .vg-band:not(.has-image) { background: radial-gradient(900px 500px at 10% -10%, color-mix(in srgb, var(--vg-primary) 25%, transparent), transparent 55%), linear-gradient(160deg, var(--vg-navy) 0%, var(--vg-navy-deep) 100%); } .vg-band__content { position: relative; width: 100%; max-width: 900px; padding: var(--wp--preset--spacing--50) clamp(1.25rem, 4vw, 3rem); } .vg-band h1 { color: var(--vg-on-dark); margin: 0 0 0.75rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: clamp(2rem, 3.6vw, 3.2rem); } .vg-band h1 .vg-service__icon { margin: 0; background: color-mix(in srgb, var(--vg-on-dark) 14%, transparent); color: var(--vg-on-dark); backdrop-filter: blur(8px); } .vg-band .is-style-eyebrow { background: color-mix(in srgb, var(--vg-on-dark) 12%, transparent); border-color: color-mix(in srgb, var(--vg-on-dark) 22%, transparent); color: var(--vg-on-dark); } .vg-band__lead { color: var(--vg-on-dark-muted); max-width: 640px; font-size: var(--wp--preset--font-size--large); line-height: 1.5; margin: 0 0 1rem; } .vg-band__chip { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; background: color-mix(in srgb, var(--vg-on-dark) 12%, transparent); padding: 0.4rem 0.9rem; border-radius: 999px; margin: 0; } .vg-band__chip svg { width: 16px; height: 16px; color: var(--vg-accent); } /* ---------- 17. Footer ---------------------------------------------- */ .vg-footer { background: var(--vg-ink-deep); color: var(--vg-on-dark); margin-top: var(--wp--preset--spacing--60); border-radius: var(--vg-r-xl) var(--vg-r-xl) 0 0; } :root[data-theme="dark"] .vg-footer { background: var(--vg-ink-deep); border-top: 1px solid var(--vg-border); } .vg-footer a { color: rgba(255,255,255,.72); } .vg-footer a:hover { color: var(--vg-on-dark); } .vg-footer h4, .vg-footer h3 { color: var(--vg-on-dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 1rem; } .vg-footer p { color: rgba(255,255,255,.7); } .vg-footer .vg-services-list a { color: rgba(255,255,255,.72); } .vg-footer .wp-block-navigation .wp-block-navigation-item__content { color: rgba(255,255,255,.72); padding: 0.15rem 0; } .vg-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--vg-on-dark); } .vg-footer .wp-block-navigation .wp-block-navigation__container { gap: 0.5rem; } .vg-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; margin-top: 2.5rem; font-size: 0.85rem; color: rgba(255,255,255,.55); } .vg-footer .vg-brand { color: var(--vg-on-dark) !important; } .vg-footer .vg-contact-list strong { color: rgba(255,255,255,.5); } .vg-footer .vg-contact-list .vg-feature__icon { background: rgba(255,255,255,.08); color: var(--vg-accent); } .vg-social { display: flex; gap: 0.5rem; } .vg-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); transition: all 0.2s; } .vg-social a:hover { background: var(--vg-primary); border-color: var(--vg-primary); color: var(--vg-on-dark); } .vg-social svg { width: 16px; height: 16px; } .vg-footer { position: relative; overflow: hidden; } .vg-footer::after { content: ""; position: absolute; right: -20%; bottom: -40%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--vg-primary) 28%, transparent), transparent 60%); pointer-events: none; } .vg-footer > * { position: relative; z-index: 1; } .vg-footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; } .vg-footer-badges span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.7); } /* ---------- 18. Floating WhatsApp / CTA ----------------------------- */ .vg-wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--vg-whatsapp); color: var(--vg-on-dark) !important; padding: 0.75rem 1.1rem 0.75rem 0.8rem; border-radius: 999px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.9rem; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--vg-whatsapp) 70%, transparent); text-decoration: none; transition: transform 0.25s var(--vg-ease); } .vg-wa-fab:hover { transform: translateY(-2px) scale(1.02); } .vg-wa-fab svg { width: 22px; height: 22px; } @media (max-width: 640px) { .vg-wa-fab span { display: none; } .vg-wa-fab { padding: 0.85rem; } } /* ---------- 19. CTA band -------------------------------------------- */ .vg-cta { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--vg-shadow-lg); } .vg-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); } .vg-cta::after { content: ""; position: absolute; right: -8%; top: -60%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--vg-primary) 45%, transparent), transparent 62%); pointer-events: none; filter: blur(10px); } .vg-cta > * { position: relative; z-index: 1; } .vg-cta .vg-cta__row { gap: 1.5rem 3rem; max-width: none !important; } .vg-cta .vg-cta__copy { flex: 1 1 520px; max-width: 700px; } .vg-cta .vg-cta__copy > * { margin-block: 0 !important; } .vg-cta .vg-cta__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; max-width: 24ch; text-wrap: balance; margin: .9rem 0 .8rem !important; } .vg-cta .vg-cta__text { font-size: .95rem; max-width: 56ch; line-height: 1.6; } .vg-cta .is-style-eyebrow { margin-bottom: 0; } .vg-cta .vg-cta__actions { flex: none; gap: .75rem; } .vg-cta .wp-block-button__link { white-space: nowrap; } @media (max-width: 900px) { .vg-cta .vg-cta__actions { width: 100%; } } /* ---------- 20. Reveal animation ------------------------------------ */ .vg-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--vg-ease), transform 0.7s var(--vg-ease); } .vg-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vg-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- 21. WP Cargo skin --------------------------------------- */ .vg-track-page .wpcargo-track form { max-width: 720px; margin: 0 auto; } .wpcargo-track table#wpcargo-track-table { border: 0; width: 100%; } .wpcargo-track table#wpcargo-track-table th, .wpcargo-track table#wpcargo-track-table td { border: 0; padding: 0.35rem; background: transparent; } .wpcargo-track .track_form_th h4 { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--vg-text); } .wpcargo-track .track_form_td h4 { font-size: 0.85rem; color: var(--vg-muted); font-weight: 400; margin: 0.25rem 0 0; } .wpcargo-track input.input_track_num { width: 100%; background: var(--vg-surface); border: 1px solid var(--vg-border-strong); border-radius: 999px; padding: 0.95rem 1.4rem; font: inherit; color: var(--vg-text); } .wpcargo-track input.input_track_num:focus { outline: 0; border-color: var(--vg-primary); box-shadow: 0 0 0 4px var(--vg-primary-soft); } .wpcargo-track input#submit_wpcargo { background: var(--vg-primary) !important; color: var(--vg-on-dark) !important; border: 0 !important; border-radius: 999px !important; padding: 0.95rem 1.6rem !important; font-family: var(--wp--preset--font-family--heading); font-weight: 600; cursor: pointer; white-space: nowrap; } .wpcargo-track input#submit_wpcargo:hover { background: var(--vg-primary-strong) !important; } .wpcargo-track .submit-track { width: 1%; } #wpcargo-result-wrapper { margin-top: 2rem; } #wpcargo-result-wrapper .wpcargo-wrap-details { background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-r-lg); padding: 2rem; color: var(--vg-text); box-shadow: var(--vg-shadow-sm); } #wpcargo-result-wrapper .comp_logo img[src=""] { display: none; } #wpcargo-result-wrapper .shipment-number .wpcargo-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem !important; font-weight: 700; letter-spacing: -0.02em; } #wpcargo-result-wrapper .detail-section { margin-bottom: 1.5rem; } #wpcargo-result-wrapper .header-title, #wpcargo-result-wrapper p.header-title { font-family: var(--wp--preset--font-family--heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vg-muted); margin: 1.5rem 0 0.75rem; } #wpcargo-result-wrapper table.wpcargo-table, #wpcargo-result-wrapper table { width: 100%; border-collapse: collapse; color: var(--vg-text); font-size: 0.93rem; } #wpcargo-result-wrapper table td, #wpcargo-result-wrapper table th { border: 1px solid var(--vg-border) !important; padding: 0.65rem 0.9rem !important; background: transparent !important; color: var(--vg-text) !important; } #wpcargo-result-wrapper table th { background: var(--vg-surface-2) !important; font-weight: 600; text-align: left; } #wpcargo-result-wrapper table.wpcargo-table thead th { font-family: var(--wp--preset--font-family--heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } #wpcargo-result-wrapper .history-row td:first-child { white-space: nowrap; } #wpcargo-result-wrapper .wpcargo-status, #wpcargo-result-wrapper td.status { font-weight: 600; } #wpcargo-result-wrapper a.btn, #wpcargo-result-wrapper .wpcargo-btn { display: inline-flex; background: var(--vg-surface-2); color: var(--vg-text); border: 1px solid var(--vg-border-strong); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; } #wpcargo-result-wrapper h3[style] { color: var(--vg-primary) !important; font-family: var(--wp--preset--font-family--heading); } .wpcargo-result .wpcargo-col-md-6, .wpcargo-result .wpcargo-col-md-12 { padding: 0; } .vg-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--vg-primary-soft); color: var(--vg-primary); } .vg-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .delivered .vg-status-pill { background: color-mix(in srgb, var(--vg-success) 14%, transparent); color: var(--vg-success); } /* ---------- 22. Utilities ------------------------------------------- */ .vg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 860px) { .vg-grid-2 { grid-template-columns: 1fr; gap: 2rem; } } .vg-mt-0 { margin-top: 0 !important; } .vg-text-muted { color: var(--vg-muted); } .vg-text-center { text-align: center; } .vg-hidden { display: none !important; } .vg-inline-icon { display: inline-flex; align-items: center; gap: 0.45rem; } .vg-inline-icon svg { width: 16px; height: 16px; } .vg-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--vg-surface-2); color: var(--vg-muted); } .vg-divider { height: 1px; background: var(--vg-border); border: 0; margin: 0; } .vg-icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .vg-icon-list li { display: flex; gap: 0.7rem; align-items: flex-start; } .vg-icon-list li svg { width: 20px; height: 20px; color: var(--vg-primary); flex: none; margin-top: 0.15rem; } .wp-block-search__input { border: 1px solid var(--vg-border-strong); border-radius: 999px; padding: 0.7rem 1.1rem; background: var(--vg-surface); color: var(--vg-text); } .wp-block-search__button { border-radius: 999px; background: var(--vg-primary); color: var(--vg-on-dark); border: 0; padding: 0.7rem 1.2rem; } .wp-block-search__button-inside .wp-block-search__inside-wrapper { border: 1px solid var(--vg-border-strong); border-radius: 999px; background: var(--vg-surface); } .wp-block-search__button-inside .wp-block-search__input { border: 0; } .vg-404 { text-align: center; padding-block: var(--wp--preset--spacing--70); } .vg-404 .vg-404__code { font-family: var(--wp--preset--font-family--heading); font-size: clamp(5rem, 15vw, 10rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--vg-primary); } /* ---------- 23. Late overrides ------------------------------------- */ .vg-footer a, .vg-services-list a, .vg-contact-list a, .vg-office a, .vg-member a { text-decoration: none; } .wp-block-post-title a, .vg-post-card h3 a { color: inherit; text-decoration: none; } .wp-block-post-title a:hover { color: var(--vg-primary); } .wp-block-post-terms a { text-decoration: none; } /* WP Cargo status bar + print button */ #wpcargo-result-wrapper #shipment-status { background: var(--vg-primary-soft) !important; color: var(--vg-primary) !important; border-radius: var(--vg-r-sm); padding: 0.75rem 1rem; margin: 1.25rem 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; } #wpcargo-result-wrapper #shipment-status.delivered { background: color-mix(in srgb, var(--vg-success) 14%, transparent) !important; color: var(--vg-success) !important; } #wpcargo-result-wrapper #shipment-status p { margin: 0; color: inherit; } .wpcargo-print-btn { text-align: right; max-width: 720px; margin: 0 auto; } .wpcargo-print-btn a.wpcargo-print { background: transparent !important; border: 1px solid var(--vg-border-strong) !important; color: var(--vg-text) !important; box-shadow: none !important; border-radius: 999px !important; padding: 0.5rem 1rem !important; font-size: 0.85rem; cursor: pointer; } #wpcargo-result-wrapper .wpcargo-wrap-details { max-width: 900px; margin: 0 auto; } /* Mobile header */ @media (max-width: 600px) { .vg-brand { font-size: 1.05rem; } .vg-brand__name { white-space: nowrap; } .vg-brand__mark { width: 32px; height: 32px; } } /* Hamburger up to 1199px: brand ("… B.V.") + pill nav + theme toggle only fit on one row from ~1160px. Core switches at 600px, so re-apply its mobile behaviour for tablets (keep in sync with the 1199px blocks below and main.js). */ @media (max-width: 1199px) { body .vg-header nav.vg-nav-pill { margin-left: auto; } body .vg-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } body .vg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } body .vg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: grid; } /* the menu overlay lives inside the header (z-index 60), so the floating WhatsApp button (80) would sit on top */ body:has(.vg-header .is-menu-open) .vg-wa-fab { display: none; } } .wp-block-navigation__responsive-container.is-menu-open { z-index: 100; } .wp-block-navigation__responsive-container.is-menu-open .vg-menu-icon { display: none; } .wp-block-navigation__responsive-container.is-menu-open .vg-menu-label small { display: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.35rem 0 !important; } /* Mobile overlay: neutralise pill / hero-state colours inside the open menu */ .vg-nav-pill:has(.wp-block-navigation__responsive-container.is-menu-open) { background: transparent; border-color: transparent; box-shadow: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { color: var(--vg-text) !important; background: transparent !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { border-radius: 0; padding: 0.6rem 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-left: 1rem !important; border-left: 2px solid var(--vg-border) !important; margin: 0.25rem 0 0.75rem !important; } .wp-block-navigation__responsive-container.is-menu-open .vg-submenu-footer .wp-block-navigation-item__content { color: var(--vg-primary) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; } body .vg-header .vg-nav-pill:has(.wp-block-navigation__responsive-container.is-menu-open) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; } /* Hero widget: keep form controls inside the card (intrinsic widths of date/select inputs must not grow the grid) */ .vg-widget { overflow: visible; } /* dropdowns (place typeahead) must be able to extend below the card */ .vg-widget__panel, .vg-widget__route, .vg-widget__row, .vg-widget__panel > *, .vg-field { min-width: 0; max-width: 100%; } .vg-widget__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vg-field input, .vg-field select { width: 100%; min-width: 0; max-width: 100%; } .vg-field input[type="date"] { -webkit-appearance: none; appearance: none; } .vg-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; } .vg-widget__swap { right: 0.6rem; } /* ---------- Hero slides & shade ------------------------------------ */ .vg-hero .wp-block-cover__inner-container { position: static; } /* let the slides span the whole cover */ .vg-hero .vg-hero__grid { position: relative; z-index: 3; } .vg-hero-slides { position: absolute; inset: -12% 0 0 0; z-index: 1; overflow: hidden; pointer-events: none; } .vg-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 1.6s var(--vg-ease); will-change: opacity, transform; } .vg-hero-slide.is-active { opacity: 1; } .vg-hero-slides.has-kenburns .vg-hero-slide.is-active { animation: vg-kenburns 14s ease-in-out forwards; } /* Shade: always dark (the hero copy is white in both colour schemes). Strength via --vg-shade (0-0.9). */ .vg-hero-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(5,10,20, calc(var(--vg-shade, .55) * .85)) 0%, rgba(5,10,20, calc(var(--vg-shade, .55) * .45)) 35%, rgba(5,10,20, calc(var(--vg-shade, .55) * .6)) 60%, rgba(5,10,20, min(.94, calc(var(--vg-shade, .55) + .35))) 100%), linear-gradient(90deg, rgba(5,10,20, calc(var(--vg-shade, .55) * .7)) 0%, rgba(5,10,20, 0) 55%); } .vg-hero:has(.vg-hero-slides) .wp-block-cover__image-background { opacity: 0; } /* the cover's own image is only a fallback */ .vg-hero .wp-block-cover__background { z-index: 1; } .vg-hero .vg-hero-slides { max-width: none !important; margin: 0 !important; width: 100%; } /* ---------- Sticky header (WP wraps template parts in a div; make the wrapper transparent to layout) */ .wp-block-template-part:has(> .vg-header) { display: contents; } .vg-header { top: var(--wp-admin--admin-bar--height, 0px); } /* The nav block's classes are duplicated on the inner