tuyenio
224166f1d4
- Tắt đường trang trí .public-hero-inner (đè ngang nút "Khám phá ngay/Tìm hiểu dự án") - Marquee tên di tích: vòng lặp khép kín phải→trái (track <ul> reset, dịch -50%), tên bấm được mở trang chi tiết, rê chuột để tạm dừng; tôn trọng prefers-reduced-motion Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1450 lines
34 KiB
CSS
1450 lines
34 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--card: rgb(244 238 222 / 0.08);
|
|
--ring: #c8a46a;
|
|
--input: #343a2f;
|
|
--muted: rgb(244 238 222 / 0.08);
|
|
--accent: rgb(200 164 106 / 0.18);
|
|
--border: rgb(215 199 157 / 0.22);
|
|
--radius: 0.25rem;
|
|
--chart-1: #c8a46a;
|
|
--chart-2: #8d9276;
|
|
--chart-3: #66715b;
|
|
--chart-4: #b9a889;
|
|
--chart-5: #d6c9aa;
|
|
--popover: #23271f;
|
|
--primary: #c8a46a;
|
|
--secondary-accent: #8d9276;
|
|
--tertiary-accent: #d6c9aa;
|
|
--sidebar: #1a1d18;
|
|
--font-mono: IBM Plex Mono, monospace;
|
|
--font-sans: var(--font-noto-sans), system-ui, sans-serif;
|
|
--secondary: rgb(244 238 222 / 0.12);
|
|
--background: #121510;
|
|
--font-serif: var(--font-noto-serif), Georgia, "Times New Roman", serif;
|
|
--foreground: #f0eadc;
|
|
--ink-on-light: #1c2419;
|
|
--ink-on-light-muted: #51604a;
|
|
--destructive: #d85a42;
|
|
--shadow-blur: 5px;
|
|
--shadow-color: hsl(95 16% 8%);
|
|
--sidebar-ring: #c8a46a;
|
|
--shadow-spread: 0px;
|
|
--shadow-opacity: 0.12;
|
|
--sidebar-accent: #d6c9aa;
|
|
--sidebar-border: #d6c9aa;
|
|
--card-foreground: #f4eedf;
|
|
--shadow-offset-x: 2px;
|
|
--shadow-offset-y: 3px;
|
|
--sidebar-primary: #c8a46a;
|
|
--muted-foreground: #c8c0ad;
|
|
--accent-foreground: #f4eedf;
|
|
--popover-foreground: #f4eedf;
|
|
--primary-foreground: #171a14;
|
|
--sidebar-foreground: #4a3f35;
|
|
--secondary-foreground: #f4eedf;
|
|
--destructive-foreground: #ffffff;
|
|
--sidebar-accent-foreground: #4a3f35;
|
|
--sidebar-primary-foreground: #171a14;
|
|
--tour-ink: #f8f2e5;
|
|
--tour-jade: #8d9276;
|
|
--tour-jade-soft: #32382f;
|
|
--tour-gold: #c8a46a;
|
|
--tour-gold-light: #e0cf9f;
|
|
--tour-coral: #c8a46a;
|
|
--tour-coral-soft: #3a3328;
|
|
--tour-teal: #8d9276;
|
|
--tour-teal-soft: #2b332b;
|
|
--tour-purple: #8d9276;
|
|
--tour-purple-soft: #32382f;
|
|
--tour-wood: #171a14;
|
|
--tour-glass: rgb(26 30 23 / 0.76);
|
|
--tour-shadow: 0 28px 90px rgb(0 0 0 / 0.34);
|
|
--surface-glass: rgb(244 238 222 / 0.075);
|
|
--surface-glass-strong: rgb(244 238 222 / 0.13);
|
|
--surface-band: rgb(244 238 222 / 0.035);
|
|
--surface-border: rgb(215 199 157 / 0.20);
|
|
--surface-shadow: 0 24px 72px rgb(0 0 0 / 0.26);
|
|
--accent-gradient: linear-gradient(135deg, #c8a46a 0%, #8d9276 100%);
|
|
--hero-gradient: linear-gradient(135deg, #f8f2e5 0%, #d6c9aa 100%);
|
|
--neon-glow: none;
|
|
}
|
|
|
|
.dark {
|
|
--card: #2b2f25;
|
|
--ring: #c8a46a;
|
|
--input: #343a2f;
|
|
--muted: #2b2f25;
|
|
--accent: #383a2f;
|
|
--border: #444535;
|
|
--popover: #23271f;
|
|
--primary: #c8a46a;
|
|
--sidebar: #1a1d18;
|
|
--secondary: #343a2f;
|
|
--background: #121510;
|
|
--foreground: #f0eadc;
|
|
--muted-foreground: #c8c0ad;
|
|
--primary-foreground: #171a14;
|
|
--tour-ink: #f8f2e5;
|
|
--tour-jade: #8d9276;
|
|
--tour-gold: #c8a46a;
|
|
--tour-gold-light: #e0cf9f;
|
|
--tour-wood: #171a14;
|
|
--tour-glass: rgb(26 30 23 / 0.82);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-card: var(--card);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-muted: var(--muted);
|
|
--color-accent: var(--accent);
|
|
--color-border: var(--border);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-popover: var(--popover);
|
|
--color-primary: var(--primary);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-font-mono: var(--font-mono);
|
|
--color-font-sans: var(--font-sans);
|
|
--color-secondary: var(--secondary);
|
|
--color-background: var(--background);
|
|
--color-font-serif: var(--font-serif);
|
|
--color-foreground: var(--foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(circle at 18% 8%, rgb(200 164 106 / 0.12), transparent 32rem),
|
|
radial-gradient(circle at 88% 22%, rgb(141 146 118 / 0.12), transparent 30rem),
|
|
linear-gradient(135deg, rgb(18 21 16), rgb(28 32 25) 54%, rgb(15 17 13)),
|
|
var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
body::before,
|
|
body::after,
|
|
.public-page::before,
|
|
.public-page::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::before {
|
|
background:
|
|
linear-gradient(90deg, rgb(215 199 157 / 0.028) 1px, transparent 1px),
|
|
linear-gradient(180deg, rgb(215 199 157 / 0.02) 1px, transparent 1px);
|
|
background-size: 88px 88px;
|
|
mask-image: linear-gradient(180deg, black, transparent 82%);
|
|
opacity: 0.42;
|
|
}
|
|
|
|
body::after {
|
|
background: radial-gradient(circle at 50% 50%, transparent 0%, rgb(18 21 16 / 0.34) 100%);
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
body:has(.landing-page) {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.font-display-vn {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.tour-welcome {
|
|
--card: #fffcf5;
|
|
--primary: #9d7d42;
|
|
--background: #f5f1e6;
|
|
--foreground: #4a3f35;
|
|
--muted-foreground: #7d6b56;
|
|
--tour-ink: #1d2b22;
|
|
--tour-jade: #315f50;
|
|
--tour-gold: #9d7d42;
|
|
--tour-gold-light: #e8cfaa;
|
|
--tour-wood: #3a2f27;
|
|
}
|
|
|
|
.public-page {
|
|
position: relative;
|
|
isolation: isolate;
|
|
--background: #f3f7f0;
|
|
--foreground: #24463a;
|
|
--muted-foreground: #61766b;
|
|
--primary: #8e5f0b;
|
|
--primary-foreground: #fff8e8;
|
|
--tour-ink: #0e3427;
|
|
--tour-jade: #245f4b;
|
|
--tour-jade-soft: #dceadd;
|
|
--tour-gold: #8e5f0b;
|
|
--tour-gold-light: #d6b468;
|
|
--tour-wood: #0f2f25;
|
|
--surface-glass: rgb(255 255 255 / 0.72);
|
|
--surface-glass-strong: rgb(255 255 255 / 0.92);
|
|
--surface-band: rgb(222 236 222 / 0.68);
|
|
--surface-border: rgb(25 76 55 / 0.16);
|
|
--surface-shadow: 0 24px 70px rgb(23 73 50 / 0.13);
|
|
background:
|
|
linear-gradient(115deg, rgb(255 255 255 / 0.94) 0%, rgb(243 247 240 / 0.94) 44%, rgb(227 239 224 / 0.98) 100%),
|
|
var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.public-page::before,
|
|
.public-page::after {
|
|
z-index: 0;
|
|
}
|
|
|
|
.public-page > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.public-page::before {
|
|
background:
|
|
linear-gradient(112deg, rgb(255 255 255 / 0.82) 0%, transparent 30%, rgb(182 222 188 / 0.18) 62%, transparent 100%),
|
|
repeating-linear-gradient(90deg, rgb(30 84 58 / 0.045) 0 1px, transparent 1px 84px),
|
|
repeating-linear-gradient(0deg, rgb(169 111 18 / 0.032) 0 1px, transparent 1px 84px);
|
|
background-size: 180% 100%, 84px 84px, 84px 84px;
|
|
filter: none;
|
|
opacity: 0.9;
|
|
animation: public-ambient-pan 18s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.public-page::after {
|
|
background:
|
|
linear-gradient(180deg, transparent 0%, rgb(244 248 239 / 0.36) 58%, rgb(244 248 239 / 0.86) 100%),
|
|
linear-gradient(90deg, rgb(255 255 255 / 0.5), transparent 28%, transparent 72%, rgb(255 255 255 / 0.38));
|
|
opacity: 0.84;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.public-page h1,
|
|
.public-page h2,
|
|
.public-page h3 {
|
|
overflow-wrap: break-word;
|
|
text-wrap: balance;
|
|
word-break: normal;
|
|
}
|
|
|
|
/* Tiêu đề hiển thị dùng serif trang trọng + tracking âm để có sức nặng thị giác. */
|
|
.public-page h1,
|
|
.public-page h2 {
|
|
font-family: var(--font-serif);
|
|
letter-spacing: -0.018em;
|
|
font-feature-settings: "liga" 1, "kern" 1;
|
|
}
|
|
|
|
.public-display {
|
|
font-family: var(--font-serif);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.public-display-italic {
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.public-page p,
|
|
.public-page dd {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.public-heading-safe {
|
|
display: block;
|
|
line-height: 1.1;
|
|
padding-block: 0.04em 0.12em;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.public-hero-inner::before,
|
|
.public-hero-inner::after {
|
|
content: none; /* gỡ đường hairline trang trí (đè lên nút CTA) */
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-hero-inner::before {
|
|
inset: 7rem auto auto -2rem;
|
|
width: min(42rem, 80vw);
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgb(142 95 11 / 0.42), transparent);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.public-hero-inner::after {
|
|
inset: auto auto 4.8rem 1rem;
|
|
width: min(34rem, 72vw);
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgb(14 52 39 / 0.5), rgb(214 180 104 / 0.36), transparent);
|
|
}
|
|
|
|
.public-hero-title {
|
|
max-width: min(15ch, 100%);
|
|
}
|
|
|
|
.public-subpage-hero {
|
|
min-height: min(760px, calc(100dvh - 72px));
|
|
}
|
|
|
|
.public-subpage-hero--compact {
|
|
min-height: auto;
|
|
}
|
|
|
|
.public-subpage-hero-image {
|
|
opacity: 0.62;
|
|
filter: saturate(1.08) contrast(1.05) brightness(1.02);
|
|
}
|
|
|
|
.public-subpage-hero::before,
|
|
.public-subpage-hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-subpage-hero::before {
|
|
z-index: 1;
|
|
background:
|
|
radial-gradient(ellipse at 24% 48%, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.88) 36%, rgb(243 247 240 / 0.48) 58%, transparent 78%),
|
|
linear-gradient(90deg, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.9) 40%, rgb(243 247 240 / 0.36) 72%, rgb(243 247 240 / 0.12) 100%),
|
|
linear-gradient(180deg, rgb(243 247 240 / 0.18), rgb(243 247 240 / 0.96) 100%);
|
|
}
|
|
|
|
.public-subpage-hero::after {
|
|
z-index: 2;
|
|
inset: auto 0 0 0;
|
|
height: 44%;
|
|
background: linear-gradient(180deg, transparent, rgb(243 247 240 / 0.98));
|
|
}
|
|
|
|
.public-subpage-hero-content {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.public-hero-photo {
|
|
min-height: min(34rem, 58vh);
|
|
}
|
|
|
|
.public-subpage-title {
|
|
max-width: min(14ch, 100%);
|
|
}
|
|
|
|
.public-subpage-copy {
|
|
max-width: 58ch;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.public-hero-rule {
|
|
position: relative;
|
|
}
|
|
|
|
.public-hero-rule::before,
|
|
.public-hero-rule::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
height: 1px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-hero-rule::before {
|
|
top: -2.2rem;
|
|
width: min(42rem, 86vw);
|
|
background: linear-gradient(90deg, transparent, rgb(142 95 11 / 0.42), transparent);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.public-hero-rule::after {
|
|
bottom: -2.2rem;
|
|
width: min(30rem, 70vw);
|
|
background: linear-gradient(90deg, rgb(14 52 39 / 0.42), rgb(214 180 104 / 0.34), transparent);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.public-image-stage {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 1px solid rgb(25 76 55 / 0.16);
|
|
background: rgb(255 255 255 / 0.34);
|
|
box-shadow:
|
|
0 34px 100px rgb(23 73 50 / 0.2),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.76);
|
|
transform-style: preserve-3d;
|
|
transition:
|
|
transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 320ms ease;
|
|
}
|
|
|
|
.public-image-stage::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
background:
|
|
linear-gradient(135deg, rgb(255 255 255 / 0.14), transparent 42%),
|
|
linear-gradient(180deg, transparent 58%, rgb(14 52 39 / 0.18));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-image-stage::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 1px;
|
|
z-index: 2;
|
|
border-radius: inherit;
|
|
border: 1px solid rgb(255 255 255 / 0.28);
|
|
background:
|
|
linear-gradient(120deg, rgb(255 255 255 / 0.22), transparent 32%, transparent 68%, rgb(255 255 255 / 0.1)),
|
|
radial-gradient(circle at 26% 18%, rgb(214 180 104 / 0.18), transparent 28%);
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 360ms ease,
|
|
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-image-stage:hover {
|
|
transform: translateY(-6px) rotateX(0.6deg) rotateY(-0.8deg);
|
|
border-color: rgb(169 111 18 / 0.28);
|
|
box-shadow:
|
|
0 42px 116px rgb(23 73 50 / 0.24),
|
|
0 0 0 1px rgb(214 180 104 / 0.16),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.84);
|
|
}
|
|
|
|
.public-image-stage:hover::after {
|
|
opacity: 0.94;
|
|
transform: translateX(1.2%);
|
|
}
|
|
|
|
.public-image-stage img,
|
|
.public-card img,
|
|
.public-media img {
|
|
filter: saturate(1.08) contrast(1.05);
|
|
}
|
|
|
|
.public-tour-showcase {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.public-tour-feature,
|
|
.public-tour-preview {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--surface-border);
|
|
background: rgb(14 52 39 / 0.12);
|
|
box-shadow:
|
|
0 26px 78px rgb(37 75 54 / 0.18),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.2);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.public-tour-feature {
|
|
min-height: clamp(25rem, 48vw, 32rem);
|
|
z-index: 2;
|
|
}
|
|
|
|
.public-tour-preview {
|
|
min-height: 17rem;
|
|
}
|
|
|
|
.public-tour-side {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.public-tour-showcase {
|
|
grid-template-columns: minmax(13rem, 0.78fr) minmax(24rem, 1.45fr) minmax(13rem, 0.78fr);
|
|
gap: 0;
|
|
}
|
|
|
|
.public-tour-feature {
|
|
min-height: 30rem;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.public-tour-side-left {
|
|
transform: translateX(1.5rem) rotate(-2.4deg);
|
|
}
|
|
|
|
.public-tour-side-right {
|
|
transform: translateX(-1.5rem) rotate(2.2deg);
|
|
}
|
|
|
|
.public-tour-side-right .public-tour-preview + .public-tour-preview {
|
|
margin-top: -1.25rem;
|
|
transform: rotate(-3.4deg) translateX(0.75rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 899px) {
|
|
.public-tour-feature,
|
|
.public-tour-preview {
|
|
min-height: 20rem;
|
|
}
|
|
}
|
|
|
|
.public-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.65rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgb(25 76 55 / 0.14);
|
|
background: rgb(255 255 255 / 0.76);
|
|
padding: 0.72rem 0.95rem;
|
|
color: var(--tour-ink);
|
|
font-size: 0.86rem;
|
|
font-weight: 750;
|
|
box-shadow:
|
|
0 14px 34px rgb(37 75 54 / 0.08),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.86);
|
|
}
|
|
|
|
.public-chip svg {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.public-soft-list {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--surface-border);
|
|
background:
|
|
linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(248 252 246 / 0.66)),
|
|
var(--surface-glass);
|
|
box-shadow:
|
|
0 22px 60px rgb(37 75 54 / 0.1),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.88);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.public-subpage-hero-image {
|
|
opacity: 0.44;
|
|
}
|
|
|
|
.public-subpage-hero::before {
|
|
background:
|
|
linear-gradient(180deg, rgb(243 247 240 / 0.84) 0%, rgb(243 247 240 / 0.78) 52%, rgb(243 247 240 / 0.96) 100%),
|
|
linear-gradient(90deg, rgb(243 247 240 / 0.94), rgb(243 247 240 / 0.64));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.public-page h1,
|
|
.public-page h2,
|
|
.public-page h3,
|
|
.public-page p {
|
|
max-width: 100%;
|
|
text-wrap: normal;
|
|
}
|
|
|
|
.public-header nav > a:first-child {
|
|
max-width: calc(100vw - 6rem);
|
|
}
|
|
|
|
.public-page .public-rise,
|
|
.public-page .public-hero-inner > div,
|
|
.public-page section > div {
|
|
min-width: 0;
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
.public-page .public-hero-inner {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.public-page .public-heading-safe {
|
|
font-size: clamp(1.85rem, 8.7vw, 2.35rem);
|
|
line-height: 1.12;
|
|
}
|
|
|
|
.public-page .public-hero-title {
|
|
max-width: min(10.4ch, 100%);
|
|
font-size: clamp(2.55rem, 12vw, 3.1rem);
|
|
}
|
|
|
|
.public-page .public-subpage-title {
|
|
max-width: min(11ch, 100%);
|
|
font-size: clamp(2.2rem, 10.5vw, 3rem);
|
|
}
|
|
|
|
.tour-welcome .welcome-title-plaque {
|
|
width: min(94vw, 25rem);
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.tour-welcome .welcome-title-plaque h1 {
|
|
max-width: 16ch;
|
|
font-size: clamp(1.62rem, 6.9vw, 2rem);
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.tour-welcome .welcome-title-plaque p {
|
|
max-width: 38ch;
|
|
font-size: 0.72rem;
|
|
line-height: 1.45;
|
|
}
|
|
}
|
|
|
|
.public-header {
|
|
overflow: hidden;
|
|
background-image:
|
|
linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(250 253 248 / 0.74)),
|
|
linear-gradient(90deg, transparent, rgb(214 180 104 / 0.08), transparent);
|
|
}
|
|
|
|
.public-header::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto 0 -18%;
|
|
width: 18%;
|
|
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
|
|
opacity: 0;
|
|
transform: skewX(-18deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-logo-mark {
|
|
transition:
|
|
transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 280ms ease,
|
|
border-color 280ms ease;
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.92),
|
|
0 10px 24px rgb(37 75 54 / 0.08);
|
|
}
|
|
|
|
.public-logo-mark:hover {
|
|
transform: translateY(-1px) scale(1.04);
|
|
border-color: rgb(142 95 11 / 0.28);
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.96),
|
|
0 14px 34px rgb(37 75 54 / 0.14);
|
|
}
|
|
|
|
.public-nav-link {
|
|
position: relative;
|
|
padding-block: 0.4rem;
|
|
}
|
|
|
|
.public-nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0.05rem;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
|
transform: scaleX(0);
|
|
transform-origin: center;
|
|
transition: transform 220ms ease;
|
|
}
|
|
|
|
.public-nav-link:hover::after,
|
|
.public-nav-link[aria-current="page"]::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.public-header-cta {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.public-header-cta::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -35% auto -35% -45%;
|
|
z-index: -1;
|
|
width: 34%;
|
|
background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.3), transparent);
|
|
transform: skewX(-18deg);
|
|
opacity: 0;
|
|
transition:
|
|
opacity 220ms ease,
|
|
transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-header-cta:hover::before {
|
|
opacity: 1;
|
|
transform: translateX(420%) skewX(-18deg);
|
|
}
|
|
|
|
.public-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--surface-border);
|
|
background: var(--surface-glass);
|
|
box-shadow:
|
|
var(--surface-shadow),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.88);
|
|
backdrop-filter: blur(18px) saturate(132%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(132%);
|
|
will-change: transform;
|
|
transition:
|
|
transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 280ms ease,
|
|
background-color 280ms ease;
|
|
}
|
|
|
|
.public-panel::before,
|
|
.public-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 auto 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, rgb(169 111 18 / 0.74), rgb(46 107 85 / 0.42), transparent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-panel::after,
|
|
.public-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -28% auto -28% -46%;
|
|
width: 36%;
|
|
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.58), transparent);
|
|
transform: skewX(-18deg);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-panel:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgb(169 111 18 / 0.34);
|
|
background: var(--surface-glass-strong);
|
|
box-shadow:
|
|
0 30px 84px rgb(42 86 60 / 0.18),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.96);
|
|
}
|
|
|
|
.public-panel:hover::before,
|
|
.public-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.public-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--surface-border);
|
|
background: linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(249 252 247 / 0.78));
|
|
box-shadow:
|
|
0 24px 66px rgb(37 75 54 / 0.13),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.9);
|
|
backdrop-filter: blur(12px) saturate(125%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(125%);
|
|
will-change: transform;
|
|
transition:
|
|
transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 280ms ease;
|
|
}
|
|
|
|
.public-card:hover {
|
|
transform: translateY(-7px) scale(1.006);
|
|
border-color: rgb(169 111 18 / 0.32);
|
|
box-shadow:
|
|
0 34px 96px rgb(37 75 54 / 0.2),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.96);
|
|
}
|
|
|
|
.public-card:hover img {
|
|
transform: scale(1.045) rotate(0.18deg);
|
|
}
|
|
|
|
.public-panel svg,
|
|
.public-card svg {
|
|
transition:
|
|
transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
color 260ms ease,
|
|
filter 260ms ease;
|
|
}
|
|
|
|
.public-panel:hover svg,
|
|
.public-card:hover svg {
|
|
transform: translateY(-1px) scale(1.08);
|
|
filter: drop-shadow(0 8px 18px rgb(142 95 11 / 0.18));
|
|
}
|
|
|
|
.public-media {
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 30px 86px rgb(37 75 54 / 0.18),
|
|
0 0 0 1px var(--surface-border),
|
|
inset 0 0 0 1px rgb(255 255 255 / 0.64);
|
|
transition:
|
|
box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-media::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(120deg, transparent 0%, rgb(255 255 255 / 0.28) 38%, transparent 62%),
|
|
linear-gradient(180deg, transparent 55%, rgb(18 50 37 / 0.16) 100%);
|
|
opacity: 0.55;
|
|
transform: translateX(-20%);
|
|
transition:
|
|
opacity 360ms ease,
|
|
transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-media:hover {
|
|
transform: translateY(-4px) scale(1.01);
|
|
box-shadow:
|
|
0 38px 104px rgb(37 75 54 / 0.24),
|
|
0 0 0 1px rgb(169 111 18 / 0.24),
|
|
inset 0 0 0 1px rgb(255 255 255 / 0.72);
|
|
}
|
|
|
|
.public-media:hover::after {
|
|
opacity: 0.72;
|
|
transform: translateX(22%);
|
|
}
|
|
|
|
.public-kicker {
|
|
color: var(--primary);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.public-cta,
|
|
.public-cta-secondary {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 3.05rem;
|
|
border-radius: 999px;
|
|
padding: 0.82rem 1.22rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 750;
|
|
line-height: 1;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
transition:
|
|
transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
border-color 240ms ease,
|
|
background-color 240ms ease,
|
|
box-shadow 240ms ease;
|
|
}
|
|
|
|
.public-cta {
|
|
gap: 0.76rem;
|
|
border: 1px solid rgb(214 180 104 / 0.42);
|
|
background:
|
|
linear-gradient(180deg, rgb(35 95 74), rgb(13 55 41)),
|
|
#123a2c;
|
|
color: #f7f0e0;
|
|
box-shadow:
|
|
0 18px 44px rgb(14 52 39 / 0.22),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.2),
|
|
inset 0 -1px 0 rgb(0 0 0 / 0.22);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.public-cta,
|
|
.public-cta-secondary {
|
|
width: 100%;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.public-cta::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -40% auto -40% -42%;
|
|
z-index: -1;
|
|
width: 36%;
|
|
background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.36), transparent);
|
|
transform: skewX(-18deg);
|
|
opacity: 0;
|
|
transition:
|
|
opacity 220ms ease,
|
|
transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-cta svg,
|
|
.public-cta-secondary svg {
|
|
color: var(--tour-gold-light);
|
|
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-cta:hover {
|
|
transform: translateY(-3px);
|
|
border-color: rgb(214 180 104 / 0.68);
|
|
background:
|
|
linear-gradient(180deg, rgb(42 112 86), rgb(15 63 47)),
|
|
#173f30;
|
|
box-shadow:
|
|
0 24px 58px rgb(14 52 39 / 0.28),
|
|
0 0 0 4px rgb(214 180 104 / 0.12),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.26);
|
|
}
|
|
|
|
.public-cta:hover::after {
|
|
opacity: 1;
|
|
transform: translateX(410%) skewX(-18deg);
|
|
}
|
|
|
|
.public-cta:hover svg,
|
|
.public-cta-secondary:hover svg {
|
|
transform: translateX(2px) scale(1.06);
|
|
}
|
|
|
|
.public-cta:focus-visible,
|
|
.public-cta-secondary:focus-visible {
|
|
outline: 2px solid rgb(224 207 159 / 0.86);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.public-cta:active,
|
|
.public-cta-secondary:active {
|
|
transform: translateY(-1px) scale(0.985);
|
|
}
|
|
|
|
.public-cta-secondary {
|
|
border: 1px solid rgb(14 52 39 / 0.18);
|
|
background: rgb(255 255 255 / 0.82);
|
|
color: var(--ink-on-light);
|
|
box-shadow:
|
|
0 14px 32px rgb(37 75 54 / 0.08),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.82);
|
|
}
|
|
|
|
.public-cta-secondary:hover {
|
|
background: rgb(255 255 255 / 0.95);
|
|
transform: translateY(-2px);
|
|
border-color: rgb(142 95 11 / 0.4);
|
|
box-shadow:
|
|
0 18px 40px rgb(37 75 54 / 0.12),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.92);
|
|
}
|
|
|
|
.public-line-item {
|
|
border-top: 1px solid var(--surface-border);
|
|
padding-top: 0.9rem;
|
|
}
|
|
|
|
.public-gradient-text {
|
|
color: transparent;
|
|
background: linear-gradient(90deg, #0e3427, #8e5f0b 54%, #245f4b);
|
|
background-size: 180% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: public-gradient-flow 8s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.public-shimmer::after {
|
|
content: "";
|
|
}
|
|
|
|
.public-glow {
|
|
box-shadow:
|
|
0 28px 80px rgb(37 75 54 / 0.16),
|
|
0 0 0 1px rgb(169 111 18 / 0.16),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.9);
|
|
}
|
|
|
|
.public-hover-lift {
|
|
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.public-map-frame {
|
|
min-height: 28rem;
|
|
background:
|
|
linear-gradient(135deg, rgb(255 255 255 / 0.88), rgb(245 250 242 / 0.76)),
|
|
var(--surface-glass);
|
|
}
|
|
|
|
.public-map-frame iframe {
|
|
display: block;
|
|
min-height: 28rem;
|
|
filter: saturate(0.94) contrast(1.03) sepia(0.06);
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.8),
|
|
0 24px 62px rgb(37 75 54 / 0.12);
|
|
transition:
|
|
filter 420ms ease,
|
|
transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-map-frame:hover iframe {
|
|
filter: saturate(1.08) contrast(1.05) sepia(0);
|
|
transform: scale(1.006);
|
|
}
|
|
|
|
.public-back-to-top {
|
|
--scroll-progress: 0%;
|
|
position: fixed !important;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
right: max(1rem, env(safe-area-inset-right)) !important;
|
|
bottom: max(1rem, env(safe-area-inset-bottom)) !important;
|
|
z-index: 80 !important;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 3.65rem;
|
|
height: 3.65rem;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: var(--primary-foreground);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translate3d(0, 1rem, 0) scale(0.86);
|
|
transform-origin: center;
|
|
transition:
|
|
opacity 280ms ease,
|
|
visibility 280ms ease,
|
|
transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.public-back-to-top[data-visible="true"] {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.public-back-to-top-ring {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 999px;
|
|
background:
|
|
conic-gradient(from -90deg, rgb(214 180 104) var(--scroll-progress), rgb(142 95 11 / 0.36) 0),
|
|
linear-gradient(135deg, #e6cf82 0%, #8e5f0b 48%, #f4d98c 100%);
|
|
box-shadow:
|
|
0 18px 42px rgb(14 52 39 / 0.3),
|
|
0 0 0 1px rgb(255 255 255 / 0.72),
|
|
inset 0 1px 0 rgb(255 255 255 / 0.62);
|
|
transition:
|
|
transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
|
|
filter 320ms ease;
|
|
}
|
|
|
|
.public-back-to-top-core {
|
|
position: relative;
|
|
display: inline-flex;
|
|
height: 3.18rem;
|
|
width: 3.18rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
border: 1px solid rgb(255 248 232 / 0.24);
|
|
background:
|
|
radial-gradient(circle at 32% 20%, rgb(255 255 255 / 0.16), transparent 28%),
|
|
linear-gradient(145deg, #1f6a50 0%, #0f4a37 48%, #073124 100%);
|
|
padding: 0;
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.2),
|
|
inset 0 -1px 0 rgb(0 0 0 / 0.22);
|
|
}
|
|
|
|
.public-back-to-top-core::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -42% auto -42% -44%;
|
|
width: 38%;
|
|
background: linear-gradient(90deg, transparent, rgb(255 248 232 / 0.4), transparent);
|
|
opacity: 0;
|
|
transform: skewX(-18deg);
|
|
transition:
|
|
opacity 220ms ease,
|
|
transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-back-to-top:hover,
|
|
.public-back-to-top:focus-visible {
|
|
transform: translate3d(0, -5px, 0) scale(1.025);
|
|
}
|
|
|
|
.public-back-to-top:hover .public-back-to-top-ring,
|
|
.public-back-to-top:focus-visible .public-back-to-top-ring {
|
|
filter: saturate(1.08) brightness(1.03);
|
|
transform: scale(1.04);
|
|
box-shadow:
|
|
0 24px 66px rgb(14 52 39 / 0.32),
|
|
0 0 0 4px rgb(214 180 104 / 0.14),
|
|
0 0 0 1px rgb(255 255 255 / 0.76);
|
|
}
|
|
|
|
.public-back-to-top:hover .public-back-to-top-core::before,
|
|
.public-back-to-top:focus-visible .public-back-to-top-core::before {
|
|
opacity: 1;
|
|
transform: translateX(410%) skewX(-18deg);
|
|
}
|
|
|
|
.public-back-to-top:focus-visible {
|
|
outline: 2px solid rgb(224 207 159 / 0.9);
|
|
outline-offset: 6px;
|
|
}
|
|
|
|
.public-back-to-top svg {
|
|
flex: 0 0 auto;
|
|
color: #ffffff;
|
|
filter: drop-shadow(0 5px 14px rgb(0 0 0 / 0.22));
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.public-back-to-top {
|
|
right: max(1.6rem, env(safe-area-inset-right)) !important;
|
|
bottom: max(1.6rem, env(safe-area-inset-bottom)) !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.public-header {
|
|
animation: public-header-drop 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.public-header::after {
|
|
animation: public-header-glint 7s ease-in-out 1.2s infinite;
|
|
}
|
|
|
|
.public-logo-mark {
|
|
animation: public-logo-breathe 4.8s ease-in-out infinite;
|
|
}
|
|
|
|
.public-header-cta,
|
|
.public-cta {
|
|
animation: public-cta-breathe 4.2s ease-in-out infinite;
|
|
}
|
|
|
|
.public-hero-inner::before {
|
|
animation: public-line-draw 980ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
|
|
}
|
|
|
|
.public-hero-inner::after {
|
|
animation: public-line-draw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
|
|
}
|
|
|
|
.public-subpage-hero-image {
|
|
animation: public-photo-breathe 12s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.public-hero-inner .public-image-stage {
|
|
animation: public-stage-float 7.2s ease-in-out 900ms infinite alternate;
|
|
}
|
|
|
|
.public-hero-rule::before {
|
|
animation: public-line-draw 980ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
|
|
}
|
|
|
|
.public-hero-rule::after {
|
|
animation: public-line-draw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
|
|
}
|
|
|
|
.public-page > section {
|
|
animation: public-section-reveal both;
|
|
animation-timeline: view();
|
|
animation-range: entry 0% cover 24%;
|
|
}
|
|
|
|
.public-rise,
|
|
.public-slide-up,
|
|
.public-fade-in,
|
|
.public-bounce-in,
|
|
.public-scale-in,
|
|
.public-rotate-in {
|
|
animation: public-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.public-stagger-item {
|
|
animation: public-stagger-reveal both;
|
|
animation-timeline: view();
|
|
animation-range: entry 0% cover 24%;
|
|
}
|
|
|
|
.public-card:nth-child(2n).public-stagger-item,
|
|
.public-panel:nth-child(2n).public-stagger-item {
|
|
animation-range: entry 0% cover 30%;
|
|
}
|
|
|
|
.public-panel:hover::after,
|
|
.public-card:hover::after {
|
|
animation: public-sheen 820ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.public-back-to-top[data-visible="true"] {
|
|
animation: public-back-to-top-float 4.8s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@keyframes public-section-reveal {
|
|
from {
|
|
opacity: 0.72;
|
|
transform: translateY(36px) scale(0.985);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes public-header-drop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-18px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes public-header-glint {
|
|
0%,
|
|
58%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(0) skewX(-18deg);
|
|
}
|
|
68% {
|
|
opacity: 0.62;
|
|
}
|
|
82% {
|
|
opacity: 0;
|
|
transform: translateX(760%) skewX(-18deg);
|
|
}
|
|
}
|
|
|
|
@keyframes public-logo-breathe {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.92),
|
|
0 10px 24px rgb(37 75 54 / 0.08);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
inset 0 1px 0 rgb(255 255 255 / 0.98),
|
|
0 16px 34px rgb(142 95 11 / 0.14);
|
|
}
|
|
}
|
|
|
|
@keyframes public-cta-breathe {
|
|
0%,
|
|
100% {
|
|
filter: saturate(1);
|
|
}
|
|
50% {
|
|
filter: saturate(1.08) brightness(1.03);
|
|
}
|
|
}
|
|
|
|
@keyframes public-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 24px, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes public-stagger-reveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 22px, 0) scale(0.985);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes public-ambient-pan {
|
|
from {
|
|
background-position: 0% 0%, 0 0, 0 0;
|
|
}
|
|
to {
|
|
background-position: 100% 0%, 84px 0, 0 84px;
|
|
}
|
|
}
|
|
|
|
@keyframes public-gradient-flow {
|
|
from {
|
|
background-position: 0% 50%;
|
|
}
|
|
to {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes public-line-draw {
|
|
from {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes public-sheen {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(0) skewX(-18deg);
|
|
}
|
|
18% {
|
|
opacity: 0.86;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(420%) skewX(-18deg);
|
|
}
|
|
}
|
|
|
|
@keyframes public-photo-breathe {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
to {
|
|
transform: scale(1.035);
|
|
}
|
|
}
|
|
|
|
@keyframes public-stage-float {
|
|
from {
|
|
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
|
|
}
|
|
to {
|
|
transform: translate3d(0, -10px, 0) rotateX(0.4deg) rotateY(-0.55deg);
|
|
}
|
|
}
|
|
|
|
@keyframes public-back-to-top-float {
|
|
0%,
|
|
100% {
|
|
filter: saturate(1);
|
|
}
|
|
50% {
|
|
filter: saturate(1.08) brightness(1.03);
|
|
}
|
|
}
|
|
|
|
/* Lớp nhiễu hạt phim cố định — tạo chiều sâu, chất liệu cao cấp cho nền tối. */
|
|
.site-grain {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
pointer-events: none;
|
|
opacity: 0.05;
|
|
mix-blend-mode: overlay;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
background-size: 160px 160px;
|
|
}
|
|
|
|
/* Dải tên di tích chạy ngang — gợi bề dày hệ thống di sản. Một dải/trang. */
|
|
.heritage-marquee {
|
|
position: relative;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
|
|
-webkit-mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
|
|
}
|
|
|
|
.heritage-marquee-track {
|
|
display: inline-flex;
|
|
width: max-content;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
will-change: transform;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.heritage-marquee-track {
|
|
animation: heritage-marquee 42s linear infinite;
|
|
}
|
|
|
|
.heritage-marquee:hover .heritage-marquee-track {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
@keyframes heritage-marquee {
|
|
to {
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
}
|