with inline `background-image: url(...)`.
URLs set inline on HTML resolve relative to the HTML file (not this CSS file),
which is why we DON'T use background-image here via a CSS custom property. */
.hero-bg-img {
position: absolute;
inset: -2%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -2;
transform: scale(1);
transition: opacity 0.7s ease;
will-change: transform, opacity;
pointer-events: none;
}
/* Ken-Burns animates only while .is-active — JS toggles the class on slide swap
to re-trigger the keyframe. */
.hero.is-active .hero-bg-img {
animation: kenBurns 14s ease-out forwards;
}
.hero.is-swapping .hero-bg-img { opacity: 0; }
/* When a video slide is active, hide the still-image layer entirely */
.hero.is-video .hero-bg-img { opacity: 0; }
/* Gradient overlay sits between background and content */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(20,30,60,0.78) 0%, rgba(20,30,60,0.5) 55%, rgba(20,30,60,0.25) 100%);
z-index: -1;
pointer-events: none;
}
/* ---- Video slide layer (YouTube embed covers full hero) ---- */
.hero-video {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
opacity: 0;
pointer-events: none;
background: var(--color-dark); /* dark navy while iframe loads — no flash */
transition: opacity 0.7s ease;
}
.hero-video iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78vh; /* 16:9 — sized off viewport height */
height: 56.25vw; /* 16:9 — sized off viewport width */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.hero.is-video .hero-video { opacity: 1; }
.hero .container { position: relative; z-index: 2; }
.hero-eyebrow {
/* Hero version: dùng cùng style với .section-eyebrow nhưng màu trắng-vàng nhạt
(vì hero bg dark) — tracked-out sans-serif lowercase để consistent. */
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
letter-spacing: 0.28em;
margin-bottom: 1em;
}
.hero-title {
color: #fff;
font-size: 5rem;
line-height: 1.1;
margin: 0 0 0.5em;
max-width: 800px;
}
.hero-title .accent { color: var(--color-main); font-style: italic; font-weight: 700; }
.hero-subtitle {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 2em;
max-width: 540px;
opacity: 0.95;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* ---- Staggered entrance animations (large text first → smaller blocks) ---- */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-actions {
opacity: 0;
transform: translateY(34px);
will-change: opacity, transform;
}
.hero.is-active .hero-title { animation: heroFadeUp 1.0s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.hero.is-active .hero-eyebrow { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.75s forwards; }
.hero.is-active .hero-subtitle { animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 1.15s forwards; }
.hero.is-active .hero-actions { animation: heroFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 1.55s forwards; }
/* Letter-by-letter shimmer on the accent word inside hero title */
.hero-title .accent, .section-title .accent{
background: linear-gradient(110deg, var(--color-main) 0%, var(--color-main-light) 35%, #f7f7f7 50%, #ffc300 65%, var(--color-main) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmerText 4s linear infinite;
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(34px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes kenBurns {
0% { transform: scale(1.0) translate(0, 0); }
100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@keyframes shimmerText {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* Page header (smaller hero for inner pages) */
.page-header {
background: var(--color-dark);
background-size: cover;
background-position: center;
color: #fff;
padding: 80px 0;
position: relative;
text-align: left;
}
.page-header::before {
content: "";
position: absolute;
inset: 0;
background: rgba(20,30,60,0.6);
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: #baad7b; font-size: 3.4rem; margin: 0; }
.page-header h1:hover { color: #baad7b;}
.page-header .breadcrumb-trail {
display: flex; gap: 8px; align-items: center;
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
margin-top: 10px;color: var(--color-main);
}
.page-header .breadcrumb-trail .active { color: var(--color-main); }
.page-header .breadcrumb-trail .sep { opacity: 0.5; }
.page-header .breadcrumb-trai a{color:white;}
/* ============================ Sections =================================== */
.section { padding: 90px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-dark); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-header { margin-bottom: 56px; }
.section-header.center { text-align: center; }
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.two-col img { width: 100%; height: auto; }
/* ============================ Feature list (Why Choose Us style) ========= */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
position: relative;
padding-left: 36px;
margin-bottom: 18px;
line-height: 1.6;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-main);
color: #fff;
text-align: center;
line-height: 24px;
font-weight: 700;
font-size: 12px;
}
.feature-list li strong {
display: block;
/* Slate #486173 — match .section-title color, không dùng --color-dark navy */
color: var(--color-secondary);
font-family: var(--font-heading);
/* Italic Playfair Display — match style của section title + reference design */
font-style: italic;
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 4px;
}
/* ============================ Reusable .img-frame ========================
Wrapper xung quanh ![]()
để có overflow:hidden + relative cho shine sweep.
Bất kỳ chỗ nào dùng ![]()
sẽ tự động có
- zoom 1.06x khi hover frame (hoặc cha có :hover)
- diagonal shine sweep
- subtle lift/shadow nếu parent là .card-like
Cards (service-card, person-card...) có hover state riêng override cái này. */
.img-frame {
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
}
.img-frame > img {
width: 100%;
height: auto;
display: block;
transition: transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.6s ease;
will-change: transform;
}
/* Diagonal light sweep */
.img-frame::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%, transparent 30%,
rgba(255,255,255,0.45) 50%,
transparent 70%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 3;
transition: left 0.9s cubic-bezier(0.22,1,0.36,1);
}
.img-frame:hover::after { left: 125%; }
.img-frame:hover > img {
transform: scale(1.06);
filter: brightness(1.05) saturate(1.05);
}
/* Two-col section's images use a thin gold border on hover for elegance */
.two-col > div > .img-frame {
box-shadow: 0 6px 18px rgba(20,30,60,0.08);
transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.two-col > div > .img-frame:hover {
box-shadow: 0 20px 40px rgba(20,30,60,0.18);
transform: translateY(-4px);
}
/* ============================ Stacked images (Experience section) ========
Layout 2 ảnh chồng nhau: ảnh chính top-right + ảnh nhỏ offset bottom-left.
Khi hover ảnh nhỏ (candle) → trượt nhẹ sang trái + shadow đậm hơn. */
.stacked-images {
position: relative;
width: 100%;
padding-bottom: 80px; /* để ảnh offset thò xuống dưới có chỗ */
}
.stacked-images .img-main {
position: relative;
width: 78%;
margin-left: auto; /* đẩy sang phải, dành chỗ cho ảnh nhỏ bên trái */
z-index: 2;
box-shadow: 0 18px 40px rgba(20,30,60,0.18);
}
.stacked-images .img-main > img {
aspect-ratio: 4 / 3.2;
object-fit: cover;
width: 100%;
height: auto;
}
.stacked-images .img-offset {
position: absolute;
left: 0;
bottom: 0;
width: 75%;
/* KHÔNG dùng aspect-ratio + object-fit cover — đó là nguyên nhân crop ảnh.
Frame sẽ size theo natural height của img (= width × intrinsic ratio).
Ảnh hiển thị FULL không bị crop. */
z-index: 1;
box-shadow: 0 12px 28px rgba(20,30,60,0.22);
transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s ease;
}
/* img hiển thị natural aspect ratio (710:580 landscape), không object-fit. */
.stacked-images .img-offset > img {
width: 100%;
height: auto;
display: block;
}
/* Slide-in khi user hover BẤT KỲ ảnh nào trong stack (hands HOẶC candle).
Behavior unified: cursor anywhere trong .stacked-images → candle slide trái. */
.stacked-images:hover .img-offset {
transform: translateX(-22px);
box-shadow: -10px 22px 40px rgba(20,30,60,0.28);
}
/* Disable scale-zoom on img bên trong stacked-images — translateX trên frame
đã đủ feedback, không cần thêm zoom trên img có thể ảnh hưởng object-position. */
.stacked-images .img-frame:hover > img {
transform: none;
filter: none;
}
/* Responsive: collapse stack on mobile — 2 ảnh xếp dọc, không overlap */
@media (max-width: 767px) {
.stacked-images { padding-bottom: 0; }
.stacked-images .img-main { width: 100%; margin-left: 0; margin-bottom: 16px; }
.stacked-images .img-offset {
position: static;
width: 70%;
margin: 0 auto;
}
.stacked-images:hover .img-offset { transform: none; }
}
/* ============================ Shared shimmer / shine ===================== */
/* Apply .shimmer-on-hover to any element with overflow:hidden to get a
diagonal light sweep across it when its parent is hovered. */
.shimmer-on-hover {
position: relative;
overflow: hidden;
}
.shimmer-on-hover::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%,
transparent 30%,
rgba(255, 255, 255, 0.45) 50%,
transparent 70%,
transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 3;
transition: left 0.9s cubic-bezier(0.22,1,0.36,1);
}
.shimmer-on-hover:hover::after,
:hover > .shimmer-on-hover::after,
*:hover > .shimmer-on-hover::after {
left: 125%;
}
/* Twinkle sparkles — small circles that fade in/out at random positions */
.sparkle-host { position: relative; }
.sparkle-host .sparkle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6),
0 0 12px 4px rgba(255, 230, 180, 0.35);
opacity: 0;
pointer-events: none;
z-index: 4;
}
.sparkle-host:hover .sparkle {
animation: twinkle 1.4s ease-out forwards;
}
.sparkle-host .sparkle:nth-child(1) { top: 18%; left: 22%; animation-delay: 0.05s; }
.sparkle-host .sparkle:nth-child(2) { top: 42%; left: 68%; animation-delay: 0.25s; width: 4px; height: 4px; }
.sparkle-host .sparkle:nth-child(3) { top: 70%; left: 30%; animation-delay: 0.45s; width: 8px; height: 8px; }
.sparkle-host .sparkle:nth-child(4) { top: 28%; left: 82%; animation-delay: 0.6s; width: 3px; height: 3px; }
.sparkle-host .sparkle:nth-child(5) { top: 60%; left: 12%; animation-delay: 0.35s; }
@keyframes twinkle {
0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
40% { opacity: 1; transform: scale(1.2) rotate(45deg); }
100% { opacity: 0; transform: scale(0.6) rotate(90deg); }
}
/* ============================ Service cards ==============================
Title-only layout: ảnh full-width + khối tiêu đề màu đậm overlap đáy ảnh,
chữ italic serif căn giữa. Không description, không "Xem thêm".
========================================================================== */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding-bottom: 28px; /* chừa chỗ cho title block đè xuống dưới */
}
.service-card {
position: relative;
background: transparent;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
will-change: transform;
}
.service-card .img-frame {
position: relative;
overflow: hidden;
}
.service-card img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), filter 0.6s ease;
}
.service-card:hover { transform: translateY(-6px); }
.service-card:hover img { transform: scale(1.06); filter: brightness(1.04) saturate(1.05); }
/* Khối tiêu đề: dark slate-blue, overlap đáy ảnh, inset 2 bên */
.service-card-body {
position: relative;
margin: -56px 28px -28px;
padding: 24px 22px;
background: var(--color-secondary);
text-align: center;
z-index: 2;
box-shadow: 0 10px 28px rgba(20, 30, 60, 0.18);
transition: background 0.4s ease, transform 0.4s ease;
}
.service-card:hover .service-card-body {
background: color-mix(in srgb, var(--color-secondary) 92%, var(--color-main) 8%);
}
.service-card h3 {
/* Đồng bộ với .section-title — Playfair Display italic, KHÔNG hardcode Georgia.
Dùng var(--font-heading) để mọi card kế thừa cùng heading font cua theme. */
margin: 0;
color: #fff;
font-family: var(--font-heading);
font-style: italic;
font-weight: 700;
font-size: 1.25rem;
line-height: 1.4;
letter-spacing: 0;
}
/* Responsive: stack 1-col trên mobile.
Title block dùng position:absolute (KHÔNG dùng negative margin) — tránh bị
clip bởi overflow của sgrid-viewport. Bottom: -X đẩy block thò xuống dưới
ảnh, parent .service-card có padding-bottom chừa chỗ. */
@media (max-width: 767px) {
.service-grid { grid-template-columns: 1fr; gap: 32px; }
.service-card {
position: relative;
padding-bottom: 130px;
}
.service-card-body {
position: absolute;
left: 8%;
right: 8%;
bottom: 0;
margin: 0;
padding: 22px 24px;
}
.service-card h3 {
font-size: 1.15rem;
line-height: 1.35;
white-space: normal;
}
}
/* ============================ Grid → mobile 1-item carousel ===============
Opt-in qua [data-mobile-carousel] — generic, dùng được cho .service-grid,
.news-grid, hoặc bất kỳ grid container nào.
Markup yêu cầu:
Desktop: viewport + track dùng display:contents → grid thấy children trực tiếp,
layout grid gốc không đổi. Arrows + dots ẩn.
Mobile : track flex-row, mỗi card 100% width, JS translate index.
========================================================================== */
[data-mobile-carousel] > .sgrid-viewport,
[data-mobile-carousel] > .sgrid-viewport > .sgrid-track {
display: contents;
}
[data-mobile-carousel] > .sgrid-arrow,
[data-mobile-carousel] > .sgrid-dots {
display: none;
}
@media (max-width: 767px) {
[data-mobile-carousel] {
display: block;
position: relative;
padding: 0;
overflow: visible;
}
[data-mobile-carousel] > .sgrid-viewport {
display: block;
overflow: hidden;
width: 100%;
}
[data-mobile-carousel] > .sgrid-viewport > .sgrid-track {
display: flex;
gap: 0;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
[data-mobile-carousel] > .sgrid-viewport > .sgrid-track > * {
flex: 0 0 100%;
min-width: 0;
padding: 0 12px;
box-sizing: border-box;
}
[data-mobile-carousel] > .sgrid-arrow {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 35%;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(186, 173, 123, 0.85);
border: 1px solid rgba(0, 0, 0, 0.08);
color: white;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
padding: 0;
}
[data-mobile-carousel] > .sgrid-arrow:disabled { opacity: 0.35; cursor: default; }
[data-mobile-carousel] > .sgrid-prev { left: 6px; }
[data-mobile-carousel] > .sgrid-next { right: 6px; }
[data-mobile-carousel] > .sgrid-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
/* Bar style mobile-only — đồng bộ với .hero-dot. */
[data-mobile-carousel] .sgrid-dot {
width: 15px;
height: 4px;
border-radius: 2px;
background: rgba(72, 97, 115, 0.35);
border: 0;
padding: 0;
cursor: pointer;
transition: background 0.25s ease,
width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-mobile-carousel] .sgrid-dot.is-active {
background: var(--color-main);
width: 15px;
transform: none;
}
}
/* Obituary carousel dots — bar style áp dụng MỌI viewport (mobile+desktop).
Tách ra khỏi @media mobile vì desktop cũng render carousel-dots khi list dài hơn slot. */
.obituary-carousel .carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.obituary-carousel .carousel-dot {
width: 15px;
height: 4px;
border-radius: 2px;
background: rgba(72, 97, 115, 0.35);
border: 0;
padding: 0;
cursor: pointer;
transition: background 0.25s ease,
width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.obituary-carousel .carousel-dot.is-active {
background: var(--color-main);
width: 15px;
transform: none;
}
/* ADS7 — Why Choose Us: 1 ảnh center + 6 feature item (3 trái, 3 phải).
Pattern Cách 1: dùng {isfist} cho ảnh center + render .why-item cho mọi item,
ẩn .why-item của item đầu bằng :first-of-type. */
.why-grid-ads7 {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 28px 36px;
align-items: start;
}
.why-grid-ads7 .why-center {
grid-column: 2;
grid-row: 1 / span 3;
margin: 0;
align-self: stretch;
}
.why-grid-ads7 .why-center img {
width: 100%;
height: 100%;
max-height: 520px;
object-fit: cover;
border-radius: 8px;
display: block;
}
.why-grid-ads7 .why-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.why-grid-ads7 .why-item .icon {
width: 44px; height: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.why-grid-ads7 .why-item .icon img {
width: 100%; height: 100%; object-fit: contain;
}
.why-grid-ads7 .why-item h4 {
margin: 0 0 6px;
font-size: 18px;
color: var(--color-secondary);
}
.why-grid-ads7 .why-item p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: rgba(72, 97, 115, 0.85);
}
/* Item đầu tiên (item 1) cũng render .why-item bên cạnh .why-center → ẩn đi. */
.why-grid-ads7 > .why-item:first-of-type { display: none; }
@media (max-width: 767px) {
.why-grid-ads7 {
grid-template-columns: 1fr;
gap: 22px;
}
.why-grid-ads7 .why-center {
grid-column: 1;
grid-row: auto;
order: -1;
}
.why-grid-ads7 .why-center img {
max-height: 280px;
}
}
/* Why-choose icon row */
.icon-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.icon-row .item .icon {
width: 72px; height: 72px;
margin: 0 auto 18px;
border-radius: 50%;
background: var(--color-bg-alt);
color: var(--color-main);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
}
.icon-row .item h4 {
font-family: var(--font-heading);
font-size: 1.2rem;
margin: 0 0 8px;
color: var(--color-dark);
}
.icon-row .item p { font-size: 0.92rem; color: var(--color-text-muted); }
/* ============================ Obituary cards (testimonials/team) ========= */
.person-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.person-card {
text-align: center;
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s ease;
will-change: transform;
}
.person-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 44px rgba(20,30,60,0.18);
}
.person-card .img-frame {
position: relative;
overflow: hidden;
}
/* Diagonal light sweep on hover */
.person-card .img-frame::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%,
transparent 30%,
rgba(255, 255, 255, 0.55) 50%,
transparent 70%,
transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 3;
transition: left 0.9s cubic-bezier(0.22,1,0.36,1);
}
.person-card:hover .img-frame::after { left: 125%; }
.person-card img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.6s ease;
}
.person-card:hover img {
transform: scale(1.08);
filter: brightness(1.06) saturate(1.08);
}
.person-card .body {
padding: 24px;
position: relative;
}
.person-card .body::before {
content: "";
position: absolute;
bottom: 0; left: 50%;
width: 0;
height: 2px;
background: var(--color-main);
transition: width 0.5s ease, left 0.5s ease;
}
.person-card:hover .body::before { width: 60%; left: 20%; }
.person-card h4 {
margin: 0 0 4px;
color: var(--color-dark);
transition: color 0.3s ease;
}
.person-card:hover h4 { color: var(--color-main); }
.person-card .date {
color: var(--color-main);
font-style: italic;
font-family: var(--font-heading);
font-size: 0.95rem;
}
/* ============================ Obituary section (intro + carousel) ======== */
.obituary-section {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: center;
}
.obituary-intro .section-title {
font-size: 4.2rem;
line-height: 1.1;
margin-bottom: 0.5em;
}
.obituary-intro .section-divider { display: none; } /* English design ko có divider */
.obituary-intro p {
margin-bottom: 1em;
color: var(--color-text);
line-height: 1.7;
}
.obituary-actions {
margin-top: 1.8em;
display: flex;
align-items: center;
gap: 22px;
}
.obituary-actions .or-sep {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.obituary-actions .text-link {
color: var(--color-secondary);
font-family: var(--font-heading);
font-style: italic;
font-size: 1.05rem;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
transition: color 0.25s ease;
}
.obituary-actions .text-link:hover { color: var(--color-main); }
/* Mobile: stack CTA + sep + text-link theo cột để khỏi chen 1 hàng */
@media (max-width: 600px) {
.obituary-actions {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.obituary-actions .btn-primary { width: auto; }
.obituary-actions .or-sep { margin-left: 2px; }
.obituary-actions .text-link { margin-left: 2px; }
}
/* Carousel container */
.obituary-carousel {
position: relative;
}
.obituary-carousel .carousel-viewport {
overflow: hidden;
}
.obituary-carousel .carousel-track {
display: flex;
gap: 24px;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
/* Obituary card — title block overlap+inset trên ảnh (giống service-card pattern).
Card không có shadow trên ảnh; shadow ở .info block để nhấn nó "nổi" lên trên ảnh. */
.obituary-card {
flex: 0 0 calc((100% - 24px) / 2); /* 2 cards visible per viewport */
background: transparent;
}
.obituary-card .img-wrap {
overflow: hidden;
position: relative;
}
.obituary-card .img-wrap img {
width: 100%;
height: 340px;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.obituary-card:hover .img-wrap img { transform: scale(1.05); }
.obituary-card .info {
position: relative;
margin: -50px 18px 0; /* overlap ảnh + inset 2 bên */
padding: 22px 18px 24px;
background: var(--color-secondary);
color: #fff;
text-align: center;
z-index: 2;
box-shadow: 0 10px 26px rgba(20,30,60,0.18);
}
.obituary-card .info h4 {
color: #fff;
font-family: var(--font-heading);
font-style: italic;
font-weight: 700;
font-size: 1.3rem;
line-height: 1.3;
margin: 0 0 12px;
}
.obituary-card .info .dates {
color: rgba(255, 255, 255, 0.88);
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
font-size: 0.95rem;
line-height: 1.55;
}
/* Carousel arrows — circular gold buttons floating on photo area */
.obituary-carousel .carousel-arrow {
position: absolute;
top: 42%; /* centered roughly on photo area, not on label panel */
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(186, 173, 123, 0.85);
color: #fff;
border: 0;
cursor: pointer;
font-size: 32px;
line-height: 1;
padding: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 14px rgba(20,30,60,0.25);
}
.obituary-carousel .carousel-arrow:hover {
background: var(--color-main);
transform: translateY(-50%) scale(1.08);
}
.obituary-carousel .carousel-prev { left: -12px; }
.obituary-carousel .carousel-next { right: -12px; }
.obituary-carousel .carousel-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 991px) {
.obituary-section { grid-template-columns: 1fr; gap: 50px; }
.obituary-intro .section-title { font-size: 2.6rem; }
}
@media (max-width: 600px) {
.obituary-card { flex: 0 0 100%; } /* 1 card per viewport on mobile */
.obituary-card .img-wrap img { height: 280px; }
.obituary-card .info { margin: -36px 12px 0; padding: 18px 14px; }
}
/* ============================ CTA banner (Eco Funeral) =================== */
.cta-banner {
position: relative;
padding: 120px 0;
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
}
.cta-banner::before {
content: "";
position: absolute;
inset: 0;
background: rgba(20,30,60,0.55);
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: 3rem; margin-bottom: 20px; }
/* ============================ News / Blog cards ========================== */
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.news-card {
background: var(--color-secondary);
color: #fff;
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s ease;
will-change: transform;
}
.news-card a{Color:white;}
.news-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 44px rgba(20,30,60,0.22);
}
.news-card .img-frame {
position: relative;
overflow: hidden;
}
.blog-card .card-title-overlay h4:hover,.news-card a:hover{
color: var(--color-main);
}
.news-card .img-frame::after {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%, transparent 30%,
rgba(255,255,255,0.5) 50%,
transparent 70%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 3;
transition: left 0.9s cubic-bezier(0.22,1,0.36,1);
}
.news-card:hover .img-frame::after { left: 125%; }
.news-card img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.6s ease;
}
.news-card:hover img {
transform: scale(1.08);
filter: brightness(1.05);
}
.news-card .body { padding: 26px; }
.news-card .meta {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-main);
margin-bottom: 10px;
}
.news-card h4 {
color: #fff;
font-size: 1.25rem;
margin: 0 0 14px;
line-height: 1.35;
transition: color 0.3s ease;
}
.news-card:hover h4 { color: var(--color-main); }
/* ============================ Team carousel cards ======================== */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.team-card { text-align: center; }
.team-card .img-frame {
position: relative;
overflow: hidden;
margin-bottom: 22px;
isolation: isolate;
}
/* Shine sweep across team image */
.team-card .img-frame::before {
content: "";
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%, transparent 30%,
rgba(255,255,255,0.55) 50%,
transparent 70%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 3;
transition: left 0.9s cubic-bezier(0.22,1,0.36,1);
}
.team-card:hover .img-frame::before { left: 125%; }
/* Gold tint overlay on hover */
.team-card .img-frame::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(186,173,123,0.35) 100%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 2;
pointer-events: none;
}
.team-card:hover .img-frame::after { opacity: 1; }
.team-card img {
width: 100%;
height: 320px;
object-fit: cover;
transition: transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.6s ease;
}
.team-card:hover img {
transform: scale(1.08);
filter: brightness(1.05) saturate(1.1);
}
.team-card h4 {
margin-top: 0;
margin-bottom: 4px;
font-size: 1.3rem;
transition: color 0.3s ease;
}
.team-card:hover h4 { color: var(--color-main); }
.team-card .role {
color: var(--color-main);
font-family: var(--font-heading);
font-style: italic;
font-size: 0.95rem;
}
.team-card .socials { margin-top: 12px; }
.team-card .socials a {
display: inline-block;
width: 32px; height: 32px;
line-height: 32px;
background: var(--color-bg-alt);
color: var(--color-secondary);
border-radius: 50%;
margin: 0 4px;
font-size: 13px;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease;
}
.team-card .socials a:hover {
background: var(--color-main);
color: #fff;
transform: translateY(-3px) rotate(-8deg);
box-shadow: 0 6px 16px rgba(186,173,123,0.5);
}
/* ============================ How it works steps ========================= */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
align-items: start;
text-align: center;
position: relative;
}
.steps::before {
content: "";
position: absolute;
top: 60px;
left: 16%;
right: 16%;
height: 1px;
background: var(--color-border);
z-index: 0;
}
.step {
position: relative;
z-index: 1;
}
.step .step-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 4px solid #fff;
box-shadow: var(--shadow-sm);
}
.step .num {
font-family: var(--font-heading);
font-style: italic;
color: var(--color-main);
font-size: 1.1rem;
margin-right: 6px;
}
.step h4 { display: inline-block; font-size: 1.4rem; margin: 0; }
/* ============================ Gallery (masonry) ==========================
⚠️ CSS gallery-grid đã chuyển sang component standalone tại
`gallery/gallery.css` (scope trong `.anp-gallery` wrapper).
Pages dùng gallery cần include `gallery/gallery.css` + wrap markup
trong `![]()
*/
overflow: hidden;
}
.pricing-card .pc-media img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: block;
border: 0;
vertical-align: top; /* triệt để bỏ baseline gap */
transition: transform .9s cubic-bezier(0.22,1,0.36,1),
filter .6s ease;
}
/* Diagonal shine sweep — chỉ chạy DURING hover.
Trước đây dùng transition left → un-hover ngược 125%→-75% qua màn hình tạo
vệt trắng phụ (reverse sweep). Đổi sang animation + opacity in/out fade →
default invisible, hover sweep 1 lượt rồi ẩn, un-hover mid-animation cũng ẩn. */
.pricing-card .pc-media::after {
content: "";
position: absolute;
top: -50%; left: -75%;
width: 50%; height: 200%;
background: linear-gradient(110deg,
transparent 0%, transparent 30%,
rgba(255,255,255,0.45) 50%,
transparent 70%, transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 2;
opacity: 0; /* ẩn mặc định */
}
@keyframes pricing-shine-sweep {
0% { left: -75%; opacity: 0; }
8% { opacity: 1; } /* fade-in nhanh ngay khi vào màn hình */
92% { opacity: 1; }
100% { left: 125%; opacity: 0; } /* fade-out trước khi rời */
}
.pricing-card:hover { transform: translateY(-10px); box-shadow: 0 24px 48px rgba(20,30,60,.22); }
.pricing-card-featured:hover { transform: translateY(-10px) scale(1.02); }
.pricing-card:hover .pc-media img { transform: scale(1.03); filter: brightness(1.04) saturate(1.06); }
.pricing-card:hover .pc-media::after {
animation: pricing-shine-sweep 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── "Chi tiết" CTA ────────────────────────────────────────────────────
Absolute positioned ĐÈ LÊN ảnh ở bottom-center.
.pricing-card-link là anchor (position:relative), .pricing-cta absolute
bottom + left:50% + translate(-50%) để center ngang.
Animation slide-up combine translateX(-50%) để giữ centering xuyên suốt. */
@keyframes pricing-cta-rise {
0% { opacity: 0; transform: translate(-50%, 28px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
/* Wrapper bao toàn bộ card (ảnh + button) — click ảnh OR button đều đi link.
position:relative để .pricing-cta absolute định vị đúng vùng card. */
.pricing-card-link {
display: block;
color: inherit;
text-decoration: none;
position: relative;
}
.pricing-card-link:hover,
.pricing-card-link:focus { text-decoration: none; color: inherit; }
.pricing-cta {
position: absolute;
left: 50%;
bottom: 24px;
z-index: 3;
display: inline-block;
padding: 20px 52px;
background: var(--color-main); /* gold #baad7b */
color: #fff;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
text-align: center;
cursor: pointer; /* không có cursor mặc định */
box-shadow: 0 6px 18px rgba(186, 173, 123, 0.40); /* match #baad7b */
opacity: 0;
transform: translate(-50%, 28px); /* combine với translateX để center */
animation: pricing-cta-rise 1.1s cubic-bezier(.22, 1, .36, 1) .6s forwards;
transition: background .25s ease, box-shadow .25s ease, color .25s ease, filter .25s ease;
}
/* Hover GIỮ tone gold (KHÔNG darken sang nâu) — chỉ brighten nhẹ + nâng shadow.
Hover-trigger trên .pricing-card-link (wrapper) thay vì .pricing-cta riêng
→ hover bất kỳ vùng nào của card đều fire hover state cho button. */
.pricing-card-link:hover .pricing-cta {
background: var(--color-main-light); /* lighter gold #ccc29c */
color: #fff;
box-shadow: 0 8px 22px rgba(186, 173, 123, 0.50);
filter: brightness(1.02);
}
/* Mobile */
@media (max-width: 991px) {
.pricing-grid { grid-template-columns: 1fr; gap: 22px; max-width: 420px; margin: 0 auto; }
.pricing-card-featured { transform: none; }
.pricing-card-featured:hover { transform: translateY(-8px); }
}
/* ============================ Hero listdata variant ====================== */
/* Slider hero render mỗi slide là 1 DOM element thay vì JS swap bg + text. */
.hero.hero-listdata { position: relative; overflow: hidden; min-height: 600px; padding: 0; }
.hero.hero-listdata .hero-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 1.2s ease-in-out;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.hero.hero-listdata .hero-slide.is-active { opacity: 1; z-index: 1; }
.hero.hero-listdata .hero-slide-bg {
position: absolute; inset: -2%;
background-size: cover; background-position: center;
z-index: 0; will-change: transform;
}
.hero.hero-listdata .hero-slide.is-active .hero-slide-bg {
animation: kenBurns 14s ease-out forwards;
}
.hero.hero-listdata .hero-slide::before {
content: ''; position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.45); z-index: 1;
}
.hero.hero-listdata .hero-content {
position: relative; z-index: 2; text-align: left; color: #fff;
padding: 60px 20px; max-width: 900px;
}
.hero.hero-listdata .hero-dots {
position: absolute; left: 0; right: 0; bottom: 28px;
display: flex; justify-content: center; gap: 10px; z-index: 5;
}
.hero.hero-listdata .hero-dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255, 255, 255, 0.45); border: 0; padding: 0; cursor: pointer;
transition: background .25s ease, transform .25s ease;
}
.hero.hero-listdata .hero-dot.is-active {
background: var(--color-main, #c5a572); transform: scale(1.25);
}
/* Override: base .hero CSS set opacity:0 cho text chờ animation entrance,
nhưng listdata variant không trigger animation đó → ép opacity:1 để hiện ngay. */
.hero.hero-listdata .hero-eyebrow,
.hero.hero-listdata .hero-title,
.hero.hero-listdata .hero-subtitle,
.hero.hero-listdata .hero-actions {
opacity: 1 !important; transform: none !important; animation: none !important;
}
/* Force accent span trong title cùng độ đậm với phần text ngoài (h1 default bold) */
.hero.hero-listdata .hero-title .accent { font-weight: 700 !important; }
/* ============================ Anp Contact Split widget =================== */
/* Widget split 2-col map + form. Dùng chung trang chủ + trang Contact.
JS handler ở /js/anp-contact-form.js bind theo IDs (#name, #phone, ...). */
.anp-contact-split {
--anp-contact-accent: #b8956a;
--anp-contact-border: #d8d8d8;
--anp-contact-muted: #8a8a8a;
--anp-contact-text: #2c2c2c;
display: flex; align-items: stretch; min-height: 640px;
font-family: inherit; color: var(--anp-contact-text); background: #fff;
}
.anp-contact-split *, .anp-contact-split *::before, .anp-contact-split *::after { box-sizing: border-box; }
.anp-contact-map { flex: 1 1 50%; position: relative; min-height: 100%; background: #eef0f2; }
.anp-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.anp-contact-side { flex: 1 1 50%; padding: 64px 56px; display: flex; flex-direction: column; gap: 28px; }
.anp-contact-title {
margin: 0; font-size: 38px; font-weight: 400; line-height: 1.2;
letter-spacing: 0.005em; color: inherit;
font-family: var(--font-heading);
}
.anp-contact-title em { font-style: italic; color: var(--anp-contact-accent); }
.anp-contact-rule { width: 56px; height: 1px; background: var(--anp-contact-accent); margin-top: 4px; }
.anp-contact-info {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: max-content 1fr;
row-gap: 10px; column-gap: 18px; font-size: 15px; line-height: 1.55;
}
.anp-contact-info .lbl { color: var(--anp-contact-accent); font-weight: 700; font-family: var(--font-heading);font-style: italic;}
.anp-contact-info a { color: inherit; text-decoration: none; }
.anp-contact-info a:hover { text-decoration: underline;color: var(--color-main);}
.anp-contact-form { display: flex; flex-direction: column; gap: 14px; }
.anp-contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anp-contact-form .field { display: flex; flex-direction: column; }
.anp-contact-form input,
.anp-contact-form textarea {
width: 100%; padding: 14px 18px;
border: 1px solid var(--anp-contact-border); border-radius: 4px; background: transparent;
font: inherit; font-size: 15px; color: inherit; outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.anp-contact-form input::placeholder,
.anp-contact-form textarea::placeholder { color: var(--anp-contact-muted); opacity: 1; }
.anp-contact-form input:focus,
.anp-contact-form textarea:focus {
border-color: var(--anp-contact-accent);
box-shadow: 0 0 0 2px rgba(184, 149, 106, 0.12);
}
.anp-contact-form textarea { resize: vertical; min-height: 150px; }
.anp-contact-btn {
align-self: flex-start; padding: 14px 40px;
background: var(--anp-contact-accent); color: #fff; border: none;
font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
cursor: pointer; transition: opacity .15s ease, transform .15s ease;
}
.anp-contact-btn:hover { opacity: .88;color: var(--color-main);background-color: transparent; }
.anp-contact-btn:active { transform: translateY(1px); }
.anp-contact-split .err-ct { display: none; }
@media (max-width: 991px) {
.anp-contact-split { flex-direction: column; min-height: 0; }
.anp-contact-map { min-height: 320px; flex: 0 0 auto; }
.anp-contact-side { padding: 40px 22px; gap: 22px; }
.anp-contact-title { font-size: 30px; }
.anp-contact-form .row2 { grid-template-columns: 1fr; }
.anp-contact-info { grid-template-columns: 1fr; row-gap: 4px; }
.anp-contact-info .lbl { margin-top: 8px; }
/* Nút submit dạng block full-width giống hero .btn-primary trên mobile. */
.anp-contact-btn {
align-self: stretch;
width: 48%;
padding: 16px 24px;
font-size: 12px;
}
}
/* ============================ Anp Contact form feedback ================== */
/* Auto-created bởi /js/anp-contact-form.js: .anp-contact-recaptcha (invisible
widget placeholder — KHÔNG cần chỗ trên layout, Google branded badge tự float
ở góc dưới phải page) + .anp-contact-form-feedback (success/error message). */
.anp-contact-form .anp-contact-recaptcha { display: none; }
.anp-contact-form-feedback {
margin-top: 12px; padding: 10px 14px;
font-size: 14px; border-radius: 4px;
min-height: 1.2em;
}
.anp-contact-form-feedback.success {
color: #1a7a4a;
background: rgba(26, 122, 74, 0.08);
border-left: 3px solid #1a7a4a;
}
.anp-contact-form-feedback.error {
color: #b91c1c;
background: rgba(185, 28, 28, 0.08);
border-left: 3px solid #b91c1c;
}
.section-title .accent {
color: var(--color-main);
font-style: italic;
font-weight: 700;
font-family: var(--font-heading);
}
/* ============================ Go-to-top button ===========================
Auto-inject bởi custom.js. Float bottom-right, hiện khi user scroll > 300px.
Color = theme bronze/gold (--color-main). Native smooth scroll.
========================================================================== */
.go-top {
position: fixed;
right: 18px;
bottom: 24px;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--color-main, #c5a572);
color: #fff;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 90;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity .3s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1),
background .25s ease, box-shadow .25s ease;
box-shadow: 0 6px 18px rgba(20, 30, 60, 0.22),
0 2px 4px rgba(20, 30, 60, 0.1);
padding: 0;
}
.go-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.go-top:hover {
background: color-mix(in srgb, var(--color-main, #c5a572) 88%, #fff 12%);
box-shadow: 0 10px 26px rgba(20, 30, 60, 0.28),
0 4px 8px rgba(20, 30, 60, 0.14);
transform: translateY(-3px);
}
.go-top:active { transform: translateY(0); }
.go-top svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 600px) {
.go-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
.go-top svg { width: 20px; height: 20px; }
}
.anp-contact-btn {
display: inline-block;
position: relative;
padding: 14px 32px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 2px solid var(--color-main);
border-radius: 6px;
cursor: pointer;
text-align: center;
line-height: 1.4;
overflow: hidden;
isolation: isolate;
background: var(--color-main);
color: #fff;
z-index: 1;
transition: color 0.4s ease,
border-color 0.4s ease,
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease;
}
/* Slide-fill ink trên hover (dark wash) */
.anp-contact-btn::before {
content: "";
position: absolute;
inset: 0;
background: #fff; /* fill TRẮNG trượt vào khi hover (giống .btn-outline) */
transform: translateX(-101%);
transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
z-index: -1;
}
.anp-contact-btn:hover::before { transform: translateX(0); }
/* Diagonal shimmer pass trên hover */
.anp-contact-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.35) 50%,
transparent 100%);
transform: skewX(-20deg);
pointer-events: none;
z-index: 1;
transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anp-contact-btn:hover::after { left: 150%; }
/* Hover: nền trắng (do ::before) + text navy đọc rõ + lift + shadow.
background-color + opacity ép lại để THẮNG rò rỉ từ block .anp-contact-btn cũ
(line ~2532: :hover{ background-color:transparent; opacity:.88 }) — nếu không nền
sẽ thành trong suốt + mờ thay vì trắng. */
.anp-contact-btn:hover {
color: var(--color-main);
border-color: #c5a572;
background-color: var(--color-main);
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(20, 30, 60, 0.18);
}
/* Disabled / loading state — copy từ pattern btn của theme */
.anp-contact-btn:disabled,
.anp-contact-btn[aria-busy="true"] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.anp-contact-btn:disabled::before,
.anp-contact-btn[aria-busy="true"]::before {
transform: translateX(-101%);
}
.stacked-images .img-frame.img-main {
position: relative;
left: auto;
bottom: auto;
width: 78%;
margin-left: auto;
z-index: 2;
box-shadow: 0 18px 40px rgba(20, 30, 60, 0.18);
transition: none;
}
.stacked-images:hover .img-frame.img-offset:not(.img-main) {
transform: translateX(-22px);
box-shadow: -10px 22px 40px rgba(20, 30, 60, 0.28);
}
.stacked-images:hover .img-frame.img-main {
transform: none;
}
@media (max-width: 767px) {
.stacked-images {
padding-bottom: 30px;
}
.stacked-images .img-main {
width: 70%;
margin-left: auto;
margin-bottom: 0;
}
.stacked-images .img-offset {
position: absolute;
left: 8%;
bottom: 0;
width: 85%;
margin: 0;
}
.stacked-images:hover .img-offset {
transform: translateX(-8px);
}
}
@media (max-width: 480px) {
.stacked-images { padding-bottom: 24px; }
.stacked-images .img-main { width: 72%; }
.stacked-images .img-offset { left: 6%; width: 85%; }
.stacked-images:hover .img-offset { transform: translateX(-6px); }
}
.obituary-card { cursor: pointer; max-width: 100%; }
.obituary-card.is-active .info { background: var(--color-main); }
.obit-long { display: none; }
.obituary-section { width: 100%; max-width: 100%; overflow: hidden; }
.obituary-carousel { width: 100%; max-width: 100%; overflow: hidden; min-width: 0; touch-action: pan-y; }
.obituary-carousel .carousel-viewport { overflow: hidden; max-width: 100%; width: 100%; }
.obituary-carousel .carousel-track { max-width: none; min-width: 0; }
.obituary-card .img-frame { max-width: 100%; }
.obituary-card .img-frame > .obit-trigger { display: block; }
.obituary-card .img-frame > .obit-trigger > img { width: 100%; height: auto; max-width: 100%; display: block; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
.obituary-card .img-frame:hover > .obit-trigger > img { transform: scale(1.06); filter: brightness(1.05) saturate(1.05); }
/* Bar-style cho .obituary-carousel dots định nghĩa ở block riêng trên cùng file (sau @media mobile carousel),
áp dụng cho cả mobile+desktop. Block dưới chỉ adjust kích thước arrows/cards cho mobile. */
@media (max-width: 600px) {
.obituary-card { flex: 0 0 100% !important; }
.obituary-carousel .carousel-arrow { width: 36px; height: 36px; font-size: 26px; }
.obituary-carousel .carousel-prev { left: 4px; }
.obituary-carousel .carousel-next { right: 4px; }
}
.obituary-actions .btn-primary:hover {
color: var(--color-secondary);
background: white;
}
.page-header .active{
color: var(--color-main);
}
.breadcrumb-trail a{
color: white;
}
.breadcrumb-trail .breadcrumb_last {
color: var(--color-main) !important;
}
.breadcrumb-trail .sep:first-child {
display: none;
}
.breadcrumb-trail a:hover{
color: var(--color-main);
}
...
`. Xem `gallery/README.md`. */
/* ============================ Contact form =============================== */
/* Light theme — nền cream để khớp tổng thể trang sáng, thay vì navy tối cũ */
.contact-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--color-bg-alt);
color: var(--color-text);
}
.contact-map { min-height: 480px; background: #e8e8e8; }
.contact-map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; }
.contact-form-panel { padding: 70px 60px; }
.contact-form-panel .section-eyebrow { color: var(--color-text); }
.contact-form-panel .section-title { color: var(--color-dark); }
.contact-info { margin-bottom: 30px; font-size: 0.95rem; }
.contact-info .row { display: flex; gap: 12px; margin-bottom: 8px; }
.contact-info .label { color: var(--color-main-dark); min-width: 90px; font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-control {
width: 100%;
padding: 14px 18px;
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-text);
font-family: var(--font-body);
font-size: 14px;
border-radius: 6px;
transition: var(--transition);
}
.form-control::placeholder { color: #9aa5b1; }
.form-control:focus {
outline: 0;
border-color: var(--color-main);
background: #fff;
box-shadow: 0 0 0 3px rgba(186, 173, 123, 0.15);
}
textarea.form-control { resize: vertical; min-height: 140px; }
/* ============================ Footer ===================================== */
.site-footer {
background: var(--color-dark);
color: rgba(255,255,255,0.7);
padding: 70px 0 30px;
font-size: 14px;
}
.footer-cols {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
.footer-cols h5 {
color: #fff;
font-size: 1.15rem;
margin-bottom: 18px;
font-family: var(--font-heading);
}
.footer-cols ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-cols ul li {
margin-bottom: 8px;
}
.footer-cols ul a {
color: rgba(255,255,255,0.65);
}
.footer-cols ul a:hover { color: var(--color-main); }
.site-footer .logo-block img { max-height: 50px; margin-bottom: 14px; }
.site-footer .copyright {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
}
.site-footer .socials a {
display: inline-block;
width: 34px; height: 34px;
line-height: 34px; text-align: center;
background: rgba(255,255,255,0.07);
border-radius: 50%;
color: rgba(255,255,255,0.7);
margin-left: 6px;
transition: var(--transition);
}
.site-footer .socials a:hover { background: var(--color-main); color: #fff; }
/* ============================ Utilities ================================== */
.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }
/* ============================ Article prose (blog detail) =================
Rich markup styling: lead paragraph, headings, lists, blockquote, figures,
links, share row. Tất cả nằm trong .article-content. */
.article-content {
font-size: 1.02rem;
line-height: 1.8;
color: var(--color-text);
}
.article-content p { margin: 0 0 1.3em; }
.article-content > p.lead {
font-family: var(--font-heading);
font-size: 1.25rem;
font-style: italic;
color: var(--color-secondary);
line-height: 1.65;
padding-left: 22px;
border-left: 3px solid var(--color-main);
margin: 0 0 2em;
}
.article-content h3 {
font-family: var(--font-heading);
font-style: italic;
font-weight: 700;
color: var(--color-secondary);
font-size: 1.55rem;
margin: 2em 0 0.6em;
line-height: 1.35;
}
.article-content h3 + p { margin-top: 0; }
.article-content ul,
.article-content ol {
margin: 0 0 1.5em;
padding-left: 1.4em;
}
.article-content ul li,
.article-content ol li {
margin-bottom: 0.5em;
line-height: 1.7;
}
.article-content ul li::marker { color: var(--color-main); }
.article-content strong { color: var(--color-dark); font-weight: 600; }
.article-content em {
color: var(--color-secondary);
font-style: italic;
}
.article-content a:not(.read-more) {
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.25s ease;
}
.article-content a:not(.read-more):hover { color: var(--color-main-dark); }
/* Figure (image + caption) */
.article-content figure {
margin: 2.2em 0;
padding: 0;
}
.article-content figure img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 12px 30px rgba(20,30,60,0.15);
cursor: zoom-in;
}
.article-content figure figcaption {
margin-top: 12px;
font-size: 0.9rem;
color: var(--color-text-muted);
font-style: italic;
text-align: center;
font-family: var(--font-heading);
}
/* Blockquote — editorial style với gold accent + decorative quote mark */
.article-content blockquote {
position: relative;
margin: 2.2em 0;
padding: 28px 32px 28px 56px;
background: var(--color-bg-alt);
border-left: 4px solid var(--color-main);
font-family: var(--font-heading);
font-style: italic;
color: var(--color-secondary);
}
.article-content blockquote::before {
content: "\201C"; /* " */
position: absolute;
top: 6px;
left: 18px;
font-size: 4rem;
line-height: 1;
color: var(--color-main);
font-family: Georgia, serif;
opacity: 0.6;
}
.article-content blockquote p {
margin: 0 0 12px;
font-size: 1.1rem;
line-height: 1.7;
}
.article-content blockquote cite {
display: block;
margin-top: 8px;
font-size: 0.9rem;
font-style: normal;
font-family: var(--font-body);
color: var(--color-text-muted);
}
/* Share row at bottom of article */
.article-content .article-share {
display: flex;
gap: 12px;
align-items: center;
}
.article-content .article-share a {
color: var(--color-main) !important;
text-decoration: none !important;
transition: color 0.25s ease;
}
.article-content .article-share a::after { content: " ›"; opacity: 0.5; }
.article-content .article-share a:hover { color: var(--color-main-dark) !important; }
/* Author bio card (outside .article-content) */
.article-author {
border-radius: 0;
}
.article-author h4 {
margin: 0;
font-family: var(--font-heading);
font-style: italic;
}
.article-author p {
margin: 0;
color: var(--color-text);
}
.article-meta {
font-size: 13px;
color: var(--color-text-muted);
letter-spacing: 0.05em;
margin-bottom: 24px;
text-transform: lowercase;
}
@media (max-width: 767px) {
.article-content { font-size: 1rem; }
.article-content h3 { font-size: 1.3rem; }
.article-content blockquote { padding: 22px 22px 22px 44px; }
.article-content blockquote::before { font-size: 3rem; }
.article-author { flex-direction: column; text-align: center; }
}
/* ============================ Scroll-reveal entrance ===================== */
[data-reveal] {
opacity: 0;
transform: translateY(34px);
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
transform 0.9s cubic-bezier(0.22,1,0.36,1);
will-change: opacity, transform;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger children inside an .is-visible parent */
[data-reveal].is-visible > * { animation: revealChildren 0.7s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes revealChildren {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================ Refined link / nav hovers =================== */
/* Primary nav: gold underline (SHORT) sát text menu cha + diamond ornament ở giữa.
Underline animate scaleX 0→1 từ center, có gap 12px cho diamond chèn vào. */
.primary-nav > li > a {
position: relative;
}
.primary-nav > li > a::after {
content: "";
position: absolute;
left: 16px; right: 16px;
bottom: 4px; /* sát chữ menu cha, KHÔNG ở header bottom */
height: 2px;
background: linear-gradient(to right,
var(--color-main) 0,
var(--color-main) calc(50% - 6px),
transparent calc(50% - 6px),
transparent calc(50% + 6px),
var(--color-main) calc(50% + 6px),
var(--color-main) 100%);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
z-index: 2;
}
.primary-nav > li:hover > a::after,
.primary-nav > li.active > a::after { transform: scaleX(1); }
/* Diamond ornament ở chính giữa line. */
.primary-nav > li { position: relative; }
.primary-nav > li::after {
content: "";
position: absolute;
left: 50%;
bottom: 1px; /* cao độ khớp với line trên (sát text) */
width: 6px; height: 6px;
background: white;
transform: translateX(-50%) rotate(45deg) scale(0);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
pointer-events: none;
z-index: 3;
}
.primary-nav > li:hover::after,
.primary-nav > li.active::after {
transform: translateX(-50%) rotate(45deg) scale(1);
}
/* Read-more text link with arrow slide */
a.read-more {
position: relative;
transition: color 0.3s ease, letter-spacing 0.3s ease;
}
a.read-more:hover { letter-spacing: 0.14em; }
/* Feature-list (check items) — icon pop on hover */
.feature-list li::before {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s ease;
}
.feature-list li:hover::before {
transform: scale(1.18) rotate(360deg);
background: var(--color-main-dark);
}
.feature-list li {
transition: transform 0.3s ease;
}
.feature-list li:hover { transform: translateX(4px); }
/* Icon-row (Why Choose Us) — icon orbit on hover */
.icon-row .item .icon {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.4s ease,
color 0.4s ease,
box-shadow 0.4s ease;
}
.icon-row .item:hover .icon {
transform: translateY(-6px) rotate(-8deg);
background: var(--color-main);
color: #fff;
box-shadow: 0 12px 28px rgba(186,173,123,0.45);
}
.icon-row .item h4 { transition: color 0.3s ease; }
.icon-row .item:hover h4 { color: var(--color-main); }
/* Footer socials — bounce-rotate */
.site-footer .socials a {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s ease,
color 0.3s ease;
}
.site-footer .socials a:hover {
background: var(--color-main);
color: #fff;
transform: translateY(-4px) scale(1.1);
}
/* Footer link underline-slide */
.footer-cols ul a {
position: relative;
transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-cols ul a::before {
content: "›";
position: absolute;
left: -14px;
opacity: 0;
color: var(--color-main);
transition: opacity 0.3s ease, left 0.3s ease;
}
.footer-cols ul a:hover {
color: var(--color-main);
padding-left: 14px;
}
.footer-cols ul a:hover::before { opacity: 1; left: 0; }
/* Site logo subtle pulse on hover */
.site-logo {
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.site-logo:hover { transform: translateY(-2px); }
.site-logo img {
transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
filter 0.4s ease;
}
.site-logo:hover img {
transform: rotate(-6deg) scale(1.05);
filter: drop-shadow(0 4px 8px rgba(186,173,123,0.4));
}
/* Contact form inputs — focus ring with gold underline */
.form-control {
position: relative;
}
.form-control:focus {
box-shadow: 0 0 0 1px var(--color-main), 0 0 16px rgba(186,173,123,0.25);
}
/* Header phone — gentle wiggle */
.header-phone .icon {
display: inline-block;
transition: transform 0.4s ease;
}
.header-phone:hover .icon { animation: phoneRing 0.6s ease; }
@keyframes phoneRing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
50% { transform: rotate(12deg); }
75% { transform: rotate(-8deg); }
}
/* Page header — subtle parallax / zoom on its bg */
.page-header {
background-position: center;
}
.page-header::before {
background: linear-gradient(135deg, rgba(20,30,60,0.75) 0%, rgba(20,30,60,0.45) 100%);
}
/* Section divider — animate width on reveal */
[data-reveal].is-visible .section-divider {
animation: dividerExpand 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
@keyframes dividerExpand {
from { width: 0; }
to { width: 80px; }
}
/* Steps row — number scale-up + image bounce */
.step .step-img {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.5s ease;
}
.step:hover .step-img {
transform: scale(1.08) translateY(-4px);
box-shadow: 0 16px 32px rgba(20,30,60,0.18);
}
.step .num {
transition: color 0.3s ease, transform 0.3s ease;
display: inline-block;
}
.step:hover .num {
color: var(--color-dark);
transform: scale(1.15);
}
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-reveal] { opacity: 1; transform: none; }
}
/* ============================ Pricing cards (pricing.html) =================
3-col grid; mỗi card = 1 ảnh demo*.png chiếm FULL content + border-radius.
"Get Started" button position-absolute ở vùng trống dưới ảnh (auto reveal chậm).
============================================================================ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 40px 0;
/* Mỗi card tự co theo chiều cao ảnh của nó — tránh viền trắng dưới đáy khi
ảnh Gold (ngắn hơn) bị stretch theo Basic/Premium */
align-items: start;
}
.pricing-card {
position: relative;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 16px;
overflow: hidden;
isolation: isolate;
/* Button đè LÊN ảnh (absolute) → card không cần padding-bottom hay text-align
(trước đây cần để chứa button ở normal flow phía dưới ảnh). */
transition: transform .5s cubic-bezier(0.22,1,0.36,1),
box-shadow .5s ease,
border-color .4s ease;
will-change: transform;
}
.pricing-card-featured {
background: var(--color-secondary); /* dark slate-blue match image bg của Gold */
border-color: transparent;
box-shadow: 0 14px 36px rgba(20,30,60,.22);
}
/* Image fills entire card content area — margin/padding 0 hoàn toàn */
.pricing-card .pc-media {
position: relative;
margin: 0;
padding: 0;
line-height: 0; /* xóa baseline gap dưới