(legacy) */
.vjh-product-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
/* For ![]()
*/
object-fit: contain;
object-position: center;
/* For
with background-image (legacy backward compat) */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--gold-pale);
transition: transform .5s ease, opacity .3s ease;
}
.vjh-product-img-link:hover .vjh-product-img {
transform: scale(1.04);
opacity: .92;
}
.vjh-product-body {
padding: 24px 22px 26px;
display: flex; flex-direction: column; flex: 1;
}
.vjh-product-card h3 {
font-weight: 600;
font-size: 1.35rem;
color: var(--stone);
margin-bottom: 8px;
}
.vjh-product-card p {
font-size: 1rem;
font-weight: 300;
color: var(--stone-light);
line-height: 1.7;
margin-bottom: 16px;
flex: 1;
}
.vjh-product-link {
display: inline-block;
font-size: .85rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--forest);
text-decoration: none;
padding-top: 8px;
border-top: 1px solid var(--border);
transition: color .2s;
}
.vjh-product-link:hover { color: var(--green); }
.vjh-product-link::after { content: ' →'; }
/* ────────── MAP (responsive embedded Google map) ────────── */
.vjh-map-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--parchment);
}
.vjh-map-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ────────── WARRANTY SEAL (decorative badge for warranty hero) ────────── */
.vjh-warranty-seal {
width: clamp(180px, 22vw, 260px);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid var(--gold);
border-radius: 50%;
background: var(--forest);
box-shadow: 0 0 0 8px var(--forest), 0 0 0 10px rgba(181,169,154,.4), 0 6px 28px rgba(0,0,0,.3);
flex-shrink: 0;
margin: 0 auto;
}
.vjh-warranty-seal-inner {
text-align: center;
padding: 0 14px;
}
.vjh-warranty-seal .seal-eyebrow {
display: block;
font-family: 'Jost', sans-serif;
font-size: .75rem;
font-weight: 500;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.vjh-warranty-seal .seal-main {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.1rem);
color: var(--white);
line-height: 1.15;
}
.vjh-warranty-seal .seal-divider {
display: block;
width: 36px;
height: 1px;
background: var(--gold);
margin: 14px auto;
}
.vjh-warranty-seal .seal-sub {
display: block;
font-family: 'Jost', sans-serif;
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold-light);
}
/* ────────── VIDEO (responsive 16:9 embed) ────────── */
.vjh-video-section {
background: var(--cream);
padding: 56px 0 72px;
}
.vjh-video-wrap {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
aspect-ratio: 16 / 9;
background: var(--stone);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(26, 25, 25, 0.2);
}
.vjh-video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Video grid (2-wide, used for multiple Vimeo embeds side-by-side) */
.vjh-video-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 0 24px;
}
.vjh-video-grid .vjh-video-wrap { max-width: none; }
@media (max-width: 720px) {
.vjh-video-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* Lazy-loaded video facade — shows poster + play button until clicked.
Click handler swaps the facade with the real iframe (autoplay enabled). */
.vjh-video-lazy {
cursor: pointer;
background-color: var(--stone);
}
.vjh-video-lazy .vjh-video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
transition: opacity .25s ease;
}
.vjh-video-lazy::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
background: rgba(0, 0, 0, 0.55);
border-radius: 50%;
pointer-events: none;
transition: background .25s ease, transform .25s ease;
z-index: 1;
}
.vjh-video-lazy::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(calc(-50% + 3px), -50%);
width: 0; height: 0;
border-left: 22px solid #fff;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
pointer-events: none;
z-index: 2;
}
.vjh-video-lazy:hover::after {
background: var(--green);
transform: translate(-50%, -50%) scale(1.05);
}
.vjh-video-lazy:hover .vjh-video-poster { opacity: .92; }
/* Lightbox modifier — when added to .vjh-video-lazy, the video opens in a
centered modal overlay instead of swapping in place */
.vjh-video-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 24px;
cursor: zoom-out;
}
.vjh-video-modal-inner {
position: relative;
width: 100%;
max-width: 1200px;
aspect-ratio: 16 / 9;
background: var(--stone);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
cursor: default;
}
.vjh-video-modal-inner iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.vjh-video-modal-close {
position: absolute;
top: -44px;
right: -4px;
width: 36px;
height: 36px;
background: transparent;
border: 0;
color: white;
font-size: 32px;
line-height: 1;
cursor: pointer;
font-family: 'Jost', sans-serif;
font-weight: 300;
}
@media (max-width: 720px) {
.vjh-video-modal-close { top: -34px; right: 0; }
}
/* ────────── IN-STOCK GRID (image + caption cards) ────────── */
.vjh-stock-section {
background: var(--cream);
padding: 0 0 88px;
}
.vjh-stock-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vjh-stock-item {
display: block;
text-decoration: none;
color: inherit;
background: var(--white);
border: 1px solid var(--border);
overflow: hidden;
transition: opacity .3s ease, transform .3s ease;
cursor: zoom-in;
}
.vjh-stock-item:hover { opacity: .92; transform: translateY(-2px); }
.vjh-stock-img {
width: 100%;
aspect-ratio: 4 / 3;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--gold-pale);
}
.vjh-stock-caption {
padding: 14px 16px 18px;
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 500;
color: var(--stone);
line-height: 1.3;
}
@media (max-width: 720px) {
.vjh-stock-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 480px) {
.vjh-stock-grid { grid-template-columns: 1fr; }
}
/* Banner that spans the full width of the stock grid (used as a teaser between rows) */
.vjh-stock-banner {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--forest);
color: var(--white);
text-decoration: none;
padding: 32px 28px;
border-radius: 8px;
text-align: center;
transition: background .25s ease, transform .25s ease;
}
.vjh-stock-banner:hover {
background: var(--stone-mid);
transform: translateY(-2px);
}
.vjh-stock-banner .banner-eyebrow {
display: block;
font-family: 'Jost', sans-serif;
font-size: .8rem;
font-weight: 500;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 12px;
}
.vjh-stock-banner .banner-main {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
font-weight: 400;
line-height: 1.3;
color: var(--white);
}
/* ────────── COLLAGE (uniform image grid) ────────── */
.vjh-collage-section {
background: var(--cream);
padding: 0 0 88px;
}
.vjh-collage {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.vjh-collage-item {
display: block;
aspect-ratio: 4 / 3;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--gold-pale);
border: 1px solid var(--border);
overflow: hidden;
transition: opacity .3s ease;
cursor: zoom-in;
}
.vjh-collage-item:hover { opacity: .92; }
/* Lightbox overlay (used by collage click-to-zoom) */
.vjh-lightbox-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center;
z-index: 99999;
cursor: zoom-out;
padding: 24px;
}
.vjh-lightbox-overlay img {
max-width: 100%; max-height: 100%;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
@media (max-width: 720px) {
.vjh-collage { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.vjh-collage { grid-template-columns: 1fr; }
}
/* ────────── FEATURE BLOCK (image + text/button, side-by-side) ────────── */
.vjh-feature-section {
background: var(--cream);
padding: 0 0 88px;
}
.vjh-feature-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.vjh-feature-photo {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: var(--parchment);
border: 1px solid var(--border);
}
.vjh-feature-content .eyebrow {
display: block;
font-size: .8rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.vjh-feature-content h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--stone);
line-height: 1.2;
margin-bottom: 14px;
}
.vjh-feature-content h2 em { color: var(--gold); }
.vjh-feature-content p {
font-size: 1.05rem;
font-weight: 300;
color: var(--stone-light);
line-height: 1.75;
margin-bottom: 22px;
}
@media (max-width: 720px) {
.vjh-feature-inner { grid-template-columns: 1fr; }
}
/* ────────── SERVICE AREA ────────── */
.vjh-service-section { padding: 24px 0 22px; }
.vjh-service-section .vjh-sec-header { padding-bottom: 14px; }
.vjh-service-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 2px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 16px;
}
.vjh-service-grid div {
background: var(--cream);
padding: 16px 20px;
font-size: 1rem;
color: var(--stone);
font-weight: 400;
}
.vjh-service-note {
text-align: center;
margin-top: 28px;
font-size: 1rem;
color: var(--stone-light);
font-style: italic;
}
/* ────────── RESOURCES CALLOUT ────────── */
.vjh-resources-section {
background: var(--forest);
padding: 72px 24px;
position: relative;
overflow: hidden;
}
.vjh-resources-section::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}
.vjh-resources-inner {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
@media (max-width: 720px) { .vjh-resources-inner { grid-template-columns: 1fr; } }
.vjh-resource-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(181,169,154,.3);
padding: 28px 26px;
text-decoration: none;
transition: background .2s;
}
.vjh-resource-card:hover { background: rgba(255,255,255,.09); }
/* Light variant — section is cream, cards are outlined; fill on hover */
.vjh-resources-section.vjh-resources-section--light { background: var(--cream); }
.vjh-resources-section--light .vjh-resource-card {
background: transparent;
border: 2px solid var(--green);
border-radius: 14px;
transition: background .25s ease, border-color .25s ease;
}
.vjh-resources-section--light .vjh-resource-card .eyebrow,
.vjh-resources-section--light .vjh-resource-card h3,
.vjh-resources-section--light .vjh-resource-card p,
.vjh-resources-section--light .vjh-resource-card .vjh-resource-link {
transition: color .25s ease;
}
.vjh-resources-section--light .vjh-resource-card .eyebrow { color: var(--gold); }
.vjh-resources-section--light .vjh-resource-card h3 { color: var(--stone); }
.vjh-resources-section--light .vjh-resource-card p { color: var(--stone-light); }
.vjh-resources-section--light .vjh-resource-card .vjh-resource-link { color: var(--green); }
/* Hover — fill with the brighter green and flip text to light */
.vjh-resources-section--light .vjh-resource-card:hover {
background: var(--green);
border-color: var(--green);
}
.vjh-resources-section--light .vjh-resource-card:hover .eyebrow { color: var(--gold-light); }
.vjh-resources-section--light .vjh-resource-card:hover h3 { color: var(--white); }
.vjh-resources-section--light .vjh-resource-card:hover p { color: rgba(255,255,255,.75); }
.vjh-resources-section--light .vjh-resource-card:hover .vjh-resource-link { color: var(--gold-light); }
.vjh-resource-card .eyebrow {
display: block;
font-size: .8rem;
font-weight: 500;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 10px;
}
.vjh-resource-card h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1.45rem;
color: var(--white);
margin-bottom: 8px;
line-height: 1.3;
}
.vjh-resource-card p {
font-size: 1rem;
font-weight: 300;
color: rgba(255,255,255,.78);
line-height: 1.7;
}
.vjh-resource-link {
display: inline-block;
margin-top: 14px;
font-size: .82rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
}
.vjh-resource-link::after { content: ' →'; }
/* ────────── CONTACT / VISIT ────────── */
.vjh-contact-section { padding: 80px 0 88px; }
.vjh-contact-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 720px) { .vjh-contact-inner { grid-template-columns: 1fr; } }
.vjh-contact-photo {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: var(--parchment);
margin-bottom: 28px;
border: 1px solid var(--border);
}
.vjh-contact-left h2 {
font-weight: 300;
font-size: clamp(1.8rem, 4vw, 2.6rem);
color: var(--stone);
line-height: 1.2;
margin-bottom: 16px;
}
.vjh-contact-left h2 em { color: var(--gold); }
.vjh-contact-left p {
font-size: 1.05rem;
font-weight: 300;
color: var(--stone-light);
line-height: 1.75;
margin-bottom: 14px;
}
.vjh-contact-details {
list-style: none;
margin-top: 24px;
padding: 0;
}
.vjh-contact-details li {
padding: 14px 0;
border-bottom: 1px solid var(--border);
font-size: 1.05rem;
}
.vjh-contact-details li:last-child { border-bottom: none; }
.vjh-contact-details .label {
display: block;
font-size: .78rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 4px;
}
.vjh-contact-details a {
color: var(--stone);
text-decoration: none;
font-weight: 500;
transition: color .2s;
}
.vjh-contact-details a:hover { color: var(--green); }
.vjh-showrooms-box {
background: var(--parchment);
border-left: 4px solid var(--gold);
padding: 32px 30px;
}
.vjh-showrooms-box .eyebrow {
display: block;
font-size: .78rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.vjh-showrooms-box h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.55rem;
color: var(--stone);
margin-bottom: 12px;
line-height: 1.3;
}
.vjh-showrooms-box p {
font-size: 1rem;
font-weight: 300;
color: var(--stone-mid);
line-height: 1.75;
}
.vjh-showrooms-box .addr {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 1rem;
color: var(--stone);
}
.vjh-showrooms-box .addr a {
color: var(--forest);
font-weight: 500;
text-decoration: none;
}
.vjh-showrooms-box .addr a:hover { color: var(--green); }
/* ============================================================
GARDEN MEMORIALS PAGE — additions
============================================================ */
/* HERO H2 — sits between H1 and the subtitle paragraph */
.vjh-hero-h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.25;
color: rgba(255,255,255,.92);
margin-bottom: 20px;
}
.vjh-hero-h2 em { font-style: italic; color: var(--gold-light); }
/* CTA SECTION (visit us / call us buttons) */
.vjh-cta-section { background: var(--cream); padding: 0 0 96px; }
.vjh-cta-inner {
text-align: center;
background: var(--parchment);
border: 1px solid var(--border);
border-left: 4px solid var(--gold);
padding: 48px 32px;
}
.vjh-cta-inner h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
color: var(--stone);
margin-bottom: 28px;
line-height: 1.3;
}
.vjh-cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* SECONDARY (outline) BUTTON — pairs with .vjh-btn-primary */
.vjh-btn-secondary {
display: inline-block;
text-decoration: none;
padding: 13px 30px;
font-family: 'Jost', sans-serif;
font-size: .82rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
background: transparent;
color: var(--forest);
border: 1px solid var(--forest);
transition: background .2s, color .2s, transform .2s;
}
.vjh-btn-secondary:hover {
background: var(--forest);
color: var(--white);
transform: translateY(-2px);
}
/* ============================================================
FAQS PAGE — additions
Native
/