/* ──────────────────────────────────────────────────────────
Prasang — Design System (aligned with frontend-astro)
A luxury atelier for wedding invitation creation.
────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
/* ── Palette: warm paper, deep claret, antique gold ── */
--color-bg: #faf6f0;
--color-bg-deep: #f3ece1;
--color-bg-veil: #ede4d4;
--color-surface: #fffdf8;
--color-surface-soft: #faf5ea;
--color-ink: #1c1410;
--color-ink-soft: #5a4a3e;
--color-ink-muted: #9a8a7c;
--color-claret: #6b1a2c;
--color-claret-deep: #4a0f1d;
--color-claret-bright:#8b2a3e;
--color-claret-soft: #f4e1e4;
--color-gold: #b08840;
--color-gold-bright: #d4a857;
--color-gold-soft: #e8d9b8;
--color-gold-hair: rgba(176, 136, 64, 0.32);
--color-line: rgba(28, 20, 16, 0.10);
--color-line-soft: rgba(28, 20, 16, 0.05);
--color-line-strong: rgba(28, 20, 16, 0.18);
--color-success: #2f6b3e;
--color-error: #962133;
/* ── Typography ── */
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--tracking-tight: -0.02em;
--tracking-wide: 0.04em;
--tracking-display: 0.18em;
--tracking-eyebrow: 0.32em;
/* ── Shadows ── */
--shadow-sm: 0 1px 2px rgba(28, 20, 16, 0.05);
--shadow-md: 0 4px 16px rgba(28, 20, 16, 0.06), 0 1px 2px rgba(28, 20, 16, 0.04);
--shadow-lg: 0 14px 40px rgba(28, 20, 16, 0.10), 0 3px 10px rgba(28, 20, 16, 0.05);
--shadow-xl: 0 24px 70px rgba(28, 20, 16, 0.14), 0 6px 18px rgba(28, 20, 16, 0.06);
--shadow-paper: 0 1px 0 rgba(255, 253, 248, 0.6) inset, 0 24px 60px rgba(28, 20, 16, 0.08), 0 2px 6px rgba(28, 20, 16, 0.04);
--shadow-foil: 0 1px 0 rgba(212, 168, 87, 0.5) inset, 0 10px 30px rgba(107, 26, 44, 0.22), 0 2px 6px rgba(28, 20, 16, 0.08);
--shadow-glow: 0 0 0 3px rgba(176, 136, 64, 0.18);
/* ── Motion ── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--duration-fast: 200ms;
--duration-normal: 320ms;
--duration-slow: 600ms;
--duration-luxe: 900ms;
/* ── Radii ── */
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--space-xs: 6px;
--space-sm: 10px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 72px;
--space-4xl: 96px;
}
/* ──────────────────────────────────────────────────────────
Paper grain — subtle SVG noise applied to the page
────────────────────────────────────────────────────────── */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.32;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* ──────────────────────────────────────────────────────────
Reset & Base
────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
position: relative;
overflow-x: hidden;
}
body > * { position: relative; z-index: 1; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--color-ink); }
h1 {
margin-bottom: 14px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5.6vw, 68px);
line-height: 1.04;
letter-spacing: var(--tracking-tight);
text-wrap: balance;
font-feature-settings: 'lnum' 1, 'liga' 1, 'dlig' 1;
}
h1 em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
h2 {
margin-bottom: 6px;
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
letter-spacing: var(--tracking-wide);
}
h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 17px;
letter-spacing: 0.01em;
color: var(--color-ink-soft);
}
p { color: var(--color-ink-soft); line-height: 1.65; }
::selection { background: var(--color-claret); color: var(--color-bg); }
/* ──────────────────────────────────────────────────────────
Eyebrow label — gold caps with hairline rules
────────────────────────────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
color: var(--color-gold);
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
content: '';
width: 28px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold-hair), transparent);
}
.eyebrow--solo::before { display: none; }
.eyebrow--solo::after { display: none; }
.eyebrow--left::before { display: none; }
/* ──────────────────────────────────────────────────────────
Ornament utilities
────────────────────────────────────────────────────────── */
.ornament {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
color: var(--color-gold);
}
/* ──────────────────────────────────────────────────────────
Container & utility
────────────────────────────────────────────────────────── */
.container {
width: min(1280px, calc(100% - 48px));
margin: 0 auto;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-claret);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
cursor: pointer;
background: transparent;
border: 0;
padding: 6px 0;
border-bottom: 1px solid var(--color-gold-hair);
transition: color var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.text-link:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
/* ──────────────────────────────────────────────────────────
Top Bar
────────────────────────────────────────────────────────── */
.top-bar {
background: var(--color-claret-deep);
color: var(--color-gold-soft);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
padding: 0.6rem 0;
position: relative;
z-index: 31;
border-bottom: 1px solid rgba(176, 136, 64, 0.2);
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
font-style: normal;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.top-bar-content > span:first-child {
color: var(--color-gold);
}
.top-bar-links {
display: flex;
gap: var(--space-lg);
}
.top-bar-links a {
color: var(--color-gold-soft);
transition: color var(--duration-normal) var(--ease-out);
}
.top-bar-links a:hover { color: var(--color-gold-bright); }
@media (max-width: 640px) {
.top-bar-content > span:first-child { display: none; }
}
/* ──────────────────────────────────────────────────────────
Navigation
────────────────────────────────────────────────────────── */
.navbar {
position: sticky;
top: 0;
z-index: 30;
height: 76px;
padding: 0 clamp(20px, 4vw, 64px);
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(250, 246, 240, 0.78);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--color-line);
transition: background var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.navbar::after {
content: '';
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--color-gold);
opacity: 0.6;
}
.navbar.scrolled {
background: rgba(250, 246, 240, 0.96);
box-shadow: var(--shadow-md);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: 0 auto;
gap: var(--space-lg);
padding: 0;
}
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
letter-spacing: 0.02em;
font-variant-caps: all-small-caps;
color: var(--color-ink);
transition: color var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.logo-icon {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
color: var(--color-gold);
font-size: 1.5rem;
transition: transform var(--duration-normal) var(--ease-spring);
}
.logo:hover { color: var(--color-claret); }
.logo:hover .logo-icon { transform: rotate(45deg); }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
justify-content: center;
}
.nav-links a {
position: relative;
padding: 10px 16px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink-soft);
transition: color var(--duration-normal) var(--ease-out);
}
.nav-links a::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 4px;
height: 1px;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--duration-normal) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:hover::after { transform: scaleX(0.7); }
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.auth-text-link {
position: relative;
display: inline-flex;
align-items: center;
min-width: 72px;
}
.auth-nav-link {
min-width: 104px;
}
.auth-nav-skeleton,
.auth-text-skeleton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
cursor: default;
isolation: isolate;
}
.auth-nav-skeleton {
width: 104px;
min-height: 42px;
border: 1px solid var(--color-gold);
border-radius: 9px;
background: rgba(255, 253, 248, 0.38);
}
.auth-nav-skeleton > span,
.auth-text-skeleton > span {
position: relative;
z-index: 1;
display: block;
width: 58px;
height: 8px;
border-radius: 999px;
background: rgba(176, 136, 64, 0.18);
overflow: hidden;
}
.auth-nav-skeleton > span::after,
.auth-text-skeleton > span::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 253, 248, 0.82) 45%,
rgba(255, 255, 255, 0) 100%
);
animation: authButtonShimmer 1.35s ease-in-out infinite;
transform: translateX(-120%);
}
.auth-text-skeleton {
width: 72px;
height: 14px;
vertical-align: middle;
}
.auth-text-skeleton > span {
width: 52px;
background: rgba(232, 217, 184, 0.26);
}
.nav-search {
position: relative;
width: 42px;
height: 42px;
padding: 0;
display: inline-grid;
place-items: center;
color: var(--color-claret);
background: transparent;
border: 1px solid var(--color-gold-hair);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(176, 136, 64, 0);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
overflow: hidden;
isolation: isolate;
}
.nav-search::before {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px dashed var(--color-gold-hair);
pointer-events: none;
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out),
inset var(--duration-normal) var(--ease-out);
}
.nav-search::after {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 60%;
height: 220%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0) 35%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 65%,
transparent 100%);
transform: translateX(-120%) rotate(18deg);
transition: transform 700ms var(--ease-out);
pointer-events: none;
z-index: 0;
opacity: 0;
}
.nav-search svg {
position: relative;
z-index: 1;
transition: transform 500ms var(--ease-out);
}
.nav-search:hover {
color: var(--color-claret-deep);
background: var(--color-surface-soft);
border-color: var(--color-gold);
transform: translateY(-1px) rotate(-4deg);
box-shadow:
0 6px 14px -8px rgba(107, 26, 44, 0.3),
0 0 0 6px rgba(176, 136, 64, 0.08);
}
.nav-search:hover::before {
inset: 2px;
opacity: 0.9;
}
.nav-search:hover::after {
opacity: 1;
transform: translateX(180%) rotate(18deg);
}
.nav-search:hover svg {
transform: rotate(8deg) scale(1.08);
}
.nav-search:active {
transform: translateY(0) rotate(-2deg) scale(0.97);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 4px 10px -6px rgba(107, 26, 44, 0.4);
}
.nav-search:focus-visible {
outline: none;
box-shadow:
0 0 0 3px var(--color-surface),
0 0 0 5px var(--color-gold),
0 6px 14px -8px rgba(107, 26, 44, 0.4);
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: 0;
cursor: pointer;
padding: 10px;
}
.mobile-menu-btn span {
display: block;
width: 22px;
height: 1.5px;
background: var(--color-ink-soft);
transition: all var(--duration-normal) var(--ease-out);
border-radius: 999px;
}
.mobile-menu-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ──────────────────────────────────────────────────────────
Buttons — atelier style
────────────────────────────────────────────────────────── */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: 0 28px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--radius-sm);
text-decoration: none;
white-space: nowrap;
transition: transform var(--duration-fast) var(--ease-spring),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out);
overflow: hidden;
}
.btn-primary {
color: #fdf6e3;
background: linear-gradient(180deg, var(--color-claret-bright) 0%, var(--color-claret) 50%, var(--color-claret-deep) 100%);
border-color: var(--color-claret-deep);
box-shadow: var(--shadow-foil);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%, transparent 30%,
rgba(212, 168, 87, 0.28) 45%,
rgba(255, 240, 200, 0.45) 50%,
rgba(212, 168, 87, 0.28) 55%,
transparent 70%, transparent 100%);
transform: skewX(-18deg);
transition: left var(--duration-luxe) var(--ease-out);
pointer-events: none;
}
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 50%, rgba(0, 0, 0, 0.18) 100%);
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover {
border-color: var(--color-gold);
box-shadow: 0 1px 0 rgba(212, 168, 87, 0.7) inset, 0 16px 40px rgba(107, 26, 44, 0.32), 0 3px 10px rgba(28, 20, 16, 0.10);
transform: translateY(-1px);
}
.btn-primary:hover::before { left: 140%; }
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 0 rgba(212, 168, 87, 0.4) inset, 0 6px 16px rgba(107, 26, 44, 0.20);
}
.btn-ghost {
position: relative;
background: transparent;
color: var(--color-claret);
border: 1px solid var(--color-gold);
min-height: 42px;
padding: 0 20px;
overflow: hidden;
isolation: isolate;
transition: color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.btn-ghost::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(120deg,
var(--color-claret-soft) 0%,
var(--color-gold-soft) 50%,
var(--color-claret-soft) 100%);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out);
z-index: -1;
}
.btn-ghost::after {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 35%;
height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 70%,
transparent 100%);
transform: translateX(0) skewX(-18deg);
transition: transform 800ms var(--ease-out);
pointer-events: none;
z-index: -1;
}
.btn-ghost:hover {
color: var(--color-claret-deep);
border-color: var(--color-gold);
transform: translateY(-1px);
box-shadow:
0 8px 18px -10px rgba(107, 26, 44, 0.45),
0 0 0 4px rgba(176, 136, 64, 0.1);
}
.btn-ghost:hover::before {
opacity: 1;
}
.btn-ghost:hover::after {
transform: translateX(360%) skewX(-18deg);
}
.btn-ghost:active {
transform: translateY(0);
box-shadow: 0 3px 8px -6px rgba(107, 26, 44, 0.4);
}
.btn-outline {
background: transparent;
color: var(--color-ink-soft);
border: 1px solid var(--color-line-strong);
min-height: 42px;
padding: 0 20px;
}
.btn-outline:hover {
border-color: var(--color-gold);
color: var(--color-claret);
background: var(--color-surface-soft);
}
.btn-outline-light {
background: transparent;
color: var(--color-bg);
border: 1px solid rgba(250, 246, 240, 0.35);
min-height: 42px;
padding: 0 20px;
}
.btn-outline-light:hover {
background: rgba(250, 246, 240, 0.08);
color: var(--color-gold-bright);
border-color: var(--color-gold);
transform: translateY(-1px);
}
@keyframes authButtonShimmer {
0% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
.btn-lg {
min-height: 54px;
padding: 0 36px;
font-size: 12px;
}
.btn-full {
width: 100%;
}
.btn-full-mobile {
width: auto;
}
@media (max-width: 768px) {
.btn-full-mobile { width: 100%; }
}
/* ──────────────────────────────────────────────────────────
Hero
────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, #8b2a3e 0%, #4a0f1d 60%, #2a0c14 100%),
var(--color-claret-deep);
overflow: hidden;
padding: var(--space-3xl) 0;
color: var(--color-bg);
}
.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.mandala-pattern {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
opacity: 0.06;
border: 1px solid var(--color-gold);
background-image:
radial-gradient(circle at 50% 50%, transparent 30%, var(--color-gold) 31%, transparent 32%),
radial-gradient(circle at 50% 50%, transparent 45%, var(--color-gold) 46%, transparent 47%),
radial-gradient(circle at 50% 50%, transparent 60%, var(--color-gold) 61%, transparent 62%);
}
.mandala-1 { top: -200px; right: -200px; animation: spin 60s linear infinite; }
.mandala-2 { bottom: -300px; left: -300px; width: 800px; height: 800px; animation: spin 80s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.floating-elements {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
color: var(--color-gold);
}
.float-item {
position: absolute;
width: 24px;
height: 24px;
animation: float 6s ease-in-out infinite;
}
.float-item:nth-child(2) { animation-delay: -1s; animation-duration: 7s; }
.float-item:nth-child(3) { animation-delay: -2s; animation-duration: 5s; }
.float-item:nth-child(4) { animation-delay: -3s; animation-duration: 8s; }
.float-item:nth-child(5) { animation-delay: -4s; animation-duration: 6s; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-4xl);
align-items: center;
}
.hero-text {
text-align: left;
position: relative;
z-index: 1;
}
.hero .eyebrow {
color: var(--color-gold);
margin-bottom: 24px;
}
.hero .eyebrow::before,
.hero .eyebrow::after {
background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.5), transparent);
}
.hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5.6vw, 68px);
line-height: 1.04;
letter-spacing: var(--tracking-tight);
color: var(--color-bg);
margin-bottom: 24px;
text-wrap: balance;
}
.hero-title em {
font-style: italic;
color: var(--color-gold-soft);
font-weight: 400;
}
.hero-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 19px;
line-height: 1.6;
color: rgba(250, 246, 240, 0.78);
margin-bottom: var(--space-2xl);
max-width: 520px;
font-weight: 400;
}
.hero-cta {
display: flex;
gap: 14px;
margin-bottom: var(--space-3xl);
flex-wrap: wrap;
}
.hero-stats {
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
padding-top: 8px;
}
.stat {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.stat-number {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
color: var(--color-gold-bright);
line-height: 1;
letter-spacing: var(--tracking-tight);
}
.stat-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(250, 246, 240, 0.65);
white-space: nowrap;
}
.stat-divider {
width: 1px;
height: 36px;
background: rgba(212, 168, 87, 0.35);
flex-shrink: 0;
}
/* Hero collage */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 460px;
}
.hero-collage {
position: relative;
width: 100%;
max-width: 460px;
height: 460px;
}
.collage-card {
position: absolute;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface);
padding: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 168, 87, 0.4);
transition: transform var(--duration-slow) var(--ease-out);
}
.collage-card::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid var(--color-gold-soft);
border-radius: calc(var(--radius-lg) - 4px);
pointer-events: none;
z-index: 3;
}
.collage-card:hover { transform: translateY(-8px) scale(1.02) !important; }
.collage-1 { top: 0; left: 0; width: 50%; transform: rotate(-3deg); }
.collage-2 { top: 5%; right: 0; width: 50%; transform: rotate(2deg); }
.collage-3 { bottom: 5%; left: 8%; width: 50%; transform: rotate(2deg); }
.collage-4 { bottom: 0; right: 5%; width: 50%; transform: rotate(-2deg); }
.mini-invite {
width: 100%;
aspect-ratio: 3/4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
padding: var(--space-lg);
position: relative;
border-radius: calc(var(--radius-lg) - 8px);
}
.mini-wedding { background: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%); }
.mini-engagement { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.mini-birthday { background: linear-gradient(135deg, #c25a3a 0%, #e0835a 100%); }
.mini-baby { background: linear-gradient(135deg, #c98aa1 0%, #e0a5b8 100%); }
.mini-ornament {
font-family: var(--font-display);
font-size: 28px;
margin-bottom: var(--space-sm);
opacity: 0.85;
}
.mini-title {
font-family: var(--font-body);
font-size: 9px;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
opacity: 0.85;
margin: 0 0 6px;
}
.mini-names {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
font-style: italic;
margin: 0;
}
/* ──────────────────────────────────────────────────────────
Section styles
────────────────────────────────────────────────────────── */
section {
padding: 96px 0;
position: relative;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 64px;
}
.section-header .eyebrow {
margin-bottom: 18px;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
margin: 0 0 12px;
text-wrap: balance;
}
.section-title em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
.section-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
line-height: 1.6;
color: var(--color-ink-soft);
margin: 16px auto 0;
max-width: 540px;
}
.section-header-left {
text-align: left;
max-width: 100%;
margin-bottom: 40px;
}
.section-header-left .eyebrow {
margin-bottom: 8px;
}
/* ──────────────────────────────────────────────────────────
Categories
────────────────────────────────────────────────────────── */
.categories {
background: var(--color-bg);
padding-top: 104px;
padding-bottom: 80px;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
:root {
--category-palette-1: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%);
--category-palette-2: linear-gradient(135deg, #b08840 0%, #d4a857 100%);
--category-palette-3: linear-gradient(135deg, #c25a3a 0%, #e0835a 100%);
--category-palette-4: linear-gradient(135deg, #2d5a6b 0%, #4a8ba3 100%);
--category-palette-5: linear-gradient(135deg, #c98aa1 0%, #e0a5b8 100%);
--category-palette-6: linear-gradient(135deg, #2f6b3e 0%, #4a8c5a 100%);
--category-palette-7: linear-gradient(135deg, #4a7c59 0%, #8fbf6f 100%);
--category-palette-8: linear-gradient(135deg, #6b3a8b 0%, #8b5ca8 100%);
--category-palette-9: linear-gradient(135deg, #b08840 0%, #d4a857 100%);
--category-palette-10: linear-gradient(135deg, #5c2e5c 0%, #8b4f8b 100%);
}
.category-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
overflow: hidden;
text-align: center;
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
cursor: pointer;
box-shadow: var(--shadow-sm);
animation: fadeSlideUp var(--duration-luxe) var(--ease-out) both;
}
.category-card:nth-child(1) { animation-delay: 80ms; }
.category-card:nth-child(2) { animation-delay: 140ms; }
.category-card:nth-child(3) { animation-delay: 200ms; }
.category-card:nth-child(4) { animation-delay: 260ms; }
.category-card:nth-child(5) { animation-delay: 320ms; }
.category-card:nth-child(6) { animation-delay: 380ms; }
.category-card:nth-child(7) { animation-delay: 440ms; }
.category-card:nth-child(8) { animation-delay: 500ms; }
.category-card:nth-child(9) { animation-delay: 560ms; }
.category-card:nth-child(10) { animation-delay: 620ms; }
.category-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gold);
}
.category-image {
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: var(--category-palette, var(--category-palette-1));
}
.category-image::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(232, 217, 184, 0.4);
border-radius: var(--radius-sm);
pointer-events: none;
z-index: 2;
transition: inset var(--duration-normal) var(--ease-out);
}
.category-card:hover .category-image::before { inset: 12px; }
.category-image::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L23 17 L35 20 L23 23 L20 35 L17 23 L5 20 L17 17 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E");
opacity: 0.5;
}
.category-emoji {
font-size: 2.5rem;
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
transition: transform var(--duration-normal) var(--ease-spring);
}
.category-card:hover .category-emoji { transform: scale(1.15); }
.cat-wedding { background: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%); }
.cat-engagement { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.cat-birthday { background: linear-gradient(135deg, #c25a3a 0%, #e0835a 100%); }
.cat-anniversary { background: linear-gradient(135deg, #2d5a6b 0%, #4a8ba3 100%); }
.cat-baby { background: linear-gradient(135deg, #c98aa1 0%, #e0a5b8 100%); }
.cat-house { background: linear-gradient(135deg, #2f6b3e 0%, #4a8c5a 100%); }
.cat-mehendi { background: linear-gradient(135deg, #4a7c59 0%, #8fbf6f 100%); }
.cat-naming { background: linear-gradient(135deg, #6b3a8b 0%, #8b5ca8 100%); }
.cat-pooja { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.cat-reception { background: linear-gradient(135deg, #5c2e5c 0%, #8b4f8b 100%); }
.categories-state {
padding: 32px;
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
color: var(--color-ink-muted);
text-align: center;
}
.category-card--skeleton {
min-height: 260px;
border-color: var(--color-line);
background: linear-gradient(100deg, var(--color-surface) 20%, #f7f0e3 50%, var(--color-surface) 80%);
background-size: 220% 100%;
animation: categorySkeleton 1.5s ease-in-out infinite;
}
@keyframes categorySkeleton {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
.category-info {
padding: 18px 16px 20px;
border-top: 1px solid var(--color-line);
}
.category-info h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
font-style: italic;
color: var(--color-ink);
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.category-info p {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-ink-muted);
margin: 0;
}
/* ──────────────────────────────────────────────────────────
Category catalog page
────────────────────────────────────────────────────────── */
.category-page {
min-height: 65vh;
background: var(--color-bg);
}
.category-page-hero {
position: relative;
padding: 64px 0 48px;
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(212, 168, 87, 0.14), transparent 55%),
var(--color-bg);
border-bottom: 1px solid var(--color-line);
}
.category-page-hero--empty { padding: 120px 0 96px; }
.category-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 5px 12px;
border: 1px solid var(--color-gold-soft);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.category-breadcrumb a {
color: var(--color-ink-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.category-breadcrumb a:hover { color: var(--color-burgundy); }
.category-breadcrumb span[aria-hidden="true"] { opacity: 0.45; }
.category-breadcrumb [aria-current="page"] { color: var(--color-burgundy); font-weight: 500; }
.category-page-icon {
margin: 4px 0 4px;
font-size: clamp(2.25rem, 5vw, 3.25rem);
filter: drop-shadow(0 6px 12px rgba(71, 39, 20, 0.14));
}
.category-page-hero h1,
.category-catalog-header h2 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 500;
line-height: 1.05;
color: var(--color-ink);
}
.category-page-hero h1 em,
.category-catalog-header h2 em {
color: var(--color-burgundy);
font-weight: 400;
}
.category-page-hero > .container > p:not(.eyebrow) {
max-width: 520px;
margin: 12px auto 0;
color: var(--color-ink-muted);
font-size: 0.95rem;
}
.category-catalog {
padding: 56px 0 112px;
background: var(--color-bg);
}
.category-catalog-header {
margin-bottom: 32px;
}
.category-catalog-header h2 {
margin-top: 8px;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.category-template-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
/* Reuse the home TemplateCard inside the category grid */
.category-template-grid .template-card {
flex: 0 0 auto;
width: 100%;
animation-delay: 0ms;
}
.category-template-grid .template-card:nth-child(1) { animation-delay: 60ms; }
.category-template-grid .template-card:nth-child(2) { animation-delay: 110ms; }
.category-template-grid .template-card:nth-child(3) { animation-delay: 160ms; }
.category-template-grid .template-card:nth-child(4) { animation-delay: 210ms; }
.category-template-grid .template-card:nth-child(5) { animation-delay: 260ms; }
.category-template-grid .template-card:nth-child(n+6) { animation-delay: 300ms; }
.category-catalog-state {
padding: 72px 24px;
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(212, 168, 87, 0.12), transparent 60%),
var(--color-surface);
}
.category-catalog-state > span {
display: block;
margin-bottom: 14px;
color: var(--color-gold);
font-size: 2.25rem;
}
.category-catalog-state h3 {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 500;
color: var(--color-ink);
}
.category-catalog-state p {
margin: 10px auto 22px;
max-width: 460px;
color: var(--color-ink-muted);
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 1180px) {
.category-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.category-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.category-page-hero { padding: 48px 0 36px; }
.category-catalog { padding: 40px 0 80px; }
.category-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 440px) {
.category-template-grid { grid-template-columns: 1fr; }
.category-breadcrumb { font-size: 0.65rem; padding: 5px 12px; }
}
/* Content-first category catalog */
.category-page-body { background: var(--color-bg); }
.category-intro {
padding: 34px 0 28px;
border-bottom: 1px solid var(--color-line);
background:
radial-gradient(circle at 16% 20%, rgba(176, 136, 64, 0.12), transparent 24%),
linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
.category-intro .category-breadcrumb {
display: flex;
width: fit-content;
margin: 0 0 22px;
padding: 0;
border: 0;
background: transparent;
font-family: var(--font-body);
font-size: 0.68rem;
letter-spacing: 0.1em;
}
.category-intro-copy {
display: flex;
align-items: center;
gap: 22px;
max-width: 960px;
}
.category-intro-emoji {
display: grid;
flex: 0 0 82px;
width: 82px;
height: 82px;
place-items: center;
border: 1px solid var(--color-gold-hair);
border-radius: 50%;
background: transparent;
box-shadow: var(--shadow-sm);
font-size: 2.25rem;
}
.category-intro-copy h1 {
margin: 4px 0 6px;
font-family: var(--font-display);
font-size: clamp(2.35rem, 4.5vw, 4rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.025em;
}
.category-intro-copy h1 em {
color: var(--color-claret);
font-weight: 400;
}
.category-intro-copy > div > p:last-child {
max-width: 720px;
color: var(--color-ink-muted);
font-size: 0.9rem;
}
.category-rail {
position: relative;
border-bottom: 1px solid var(--color-line);
background: var(--color-surface);
}
.category-rail-inner {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
padding-top: 14px;
padding-bottom: 14px;
}
.category-rail-label {
flex: 0 0 auto;
color: var(--color-gold);
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.category-rail-scroll {
display: flex;
min-width: 0;
gap: 9px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.category-rail-scroll::-webkit-scrollbar { display: none; }
.category-rail-scroll a {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
padding: 9px 14px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-surface-soft);
color: var(--color-ink-soft);
font-size: 0.75rem;
white-space: nowrap;
scroll-snap-align: start;
transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.category-rail-scroll a:hover {
border-color: var(--color-gold);
background: var(--color-surface);
color: var(--color-claret);
}
.category-catalog {
padding: 42px 0 112px;
background: var(--color-bg);
}
.category-catalog-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 26px;
}
.category-catalog-toolbar h2 {
margin-top: 5px;
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.2vw, 2.75rem);
font-weight: 500;
line-height: 1;
}
.category-catalog-toolbar h2 em {
color: var(--color-claret);
font-weight: 400;
}
.category-sort {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-ink-muted);
font-size: 0.75rem;
white-space: nowrap;
}
.category-sort select {
min-width: 132px;
padding: 10px 34px 10px 13px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-ink);
font: inherit;
}
.category-catalog-layout {
display: grid;
grid-template-columns: 226px minmax(0, 1fr);
align-items: start;
gap: 28px;
}
.category-filter-panel {
position: sticky;
top: 92px;
overflow: hidden;
border: 1px solid var(--color-gold-hair);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.category-filter-heading {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 18px;
border-bottom: 1px solid var(--color-line);
}
.category-filter-heading > div {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.category-filter-heading h3 {
margin: 0;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
line-height: 1;
}
.category-filter-icon {
display: block;
flex: 0 0 20px;
width: 20px;
height: 20px;
color: var(--color-claret);
}
.category-filter-close { display: none; border: 0; background: transparent; color: var(--color-ink); font-size: 1.8rem; }
.category-filter-body { padding: 20px 18px; }
.category-filter-body fieldset { padding: 0; border: 0; }
.category-filter-body legend { margin-bottom: 13px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.category-filter-options { display: flex; flex-direction: column; gap: 9px; }
.category-filter-options label { display: flex; align-items: center; gap: 9px; color: var(--color-ink-soft); font-size: 0.78rem; cursor: pointer; }
.category-filter-options input { width: 15px; height: 15px; accent-color: var(--color-claret); }
.category-filter-empty { color: var(--color-ink-muted); font-size: 0.75rem; line-height: 1.5; }
.category-filter-reset { margin-top: 20px; padding: 0; border: 0; background: transparent; color: var(--color-claret); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.category-results { min-width: 0; }
.category-results-summary { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 14px; color: var(--color-ink-muted); font-size: 0.72rem; }
.category-results-summary strong { color: var(--color-ink); }
.category-results-summary button { display: none; }
.category-template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 320px);
justify-content: start;
gap: 22px;
}
.category-template-entry {
width: 320px;
min-width: 0;
}
.category-template-entry[hidden] { display: none; }
.category-template-entry .template-card {
width: 320px;
max-width: 320px;
height: 100%;
}
.category-template-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--color-gold-hair);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal);
}
.category-template-card:hover {
transform: translateY(-4px);
border-color: var(--color-gold);
box-shadow: var(--shadow-lg);
}
.category-template-card[hidden] { display: none; }
.category-template-media {
position: relative;
aspect-ratio: 9 / 14;
overflow: hidden;
background: var(--color-bg-deep);
}
.category-template-media::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
pointer-events: none;
}
.category-template-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.category-template-card:hover .category-template-media img { transform: scale(1.025); }
.category-template-placeholder {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background:
radial-gradient(circle at 50% 38%, rgba(212, 168, 87, 0.22), transparent 32%),
linear-gradient(145deg, var(--color-claret-deep), var(--color-claret-bright));
color: var(--color-gold-soft);
}
.category-template-placeholder span { font-size: 3rem; }
.category-template-placeholder small { font-family: var(--font-display); font-size: 1rem; font-style: italic; }
.category-template-number {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid rgba(232, 217, 184, 0.55);
border-radius: 50%;
background: rgba(28, 20, 16, 0.72);
color: var(--color-gold-soft);
font-family: var(--font-display);
font-size: 0.7rem;
backdrop-filter: blur(8px);
}
.category-template-content { padding: 17px 17px 19px; }
.category-template-content h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.12; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-template-content > p { display: -webkit-box; overflow: hidden; margin-top: 7px; color: var(--color-ink-muted); font-size: 0.72rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-template-locales { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 0; padding: 0; list-style: none; }
.category-template-locales li { padding: 4px 7px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-surface-soft); color: var(--color-ink-muted); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.category-no-results { padding: 72px 24px; border: 1px solid var(--color-gold-hair); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; }
.category-no-results[hidden] { display: none; }
.category-no-results > span { color: var(--color-gold); font-size: 2rem; }
.category-no-results h3 { margin: 8px 0 14px; font-family: var(--font-display); font-size: 1.5rem; }
.category-no-results button { border: 0; background: transparent; color: var(--color-claret); font-weight: 600; }
.category-mobile-controls,
.category-filter-backdrop { display: none; }
@media (min-width: 1450px) {
.category-template-grid { grid-template-columns: repeat(auto-fill, 320px); }
}
@media (max-width: 980px) {
.category-catalog-layout { grid-template-columns: 1fr; }
.category-filter-panel {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 1002;
max-height: min(72vh, 560px);
border-radius: 24px 24px 0 0;
transform: translateY(105%);
transition: transform 300ms var(--ease-out);
}
.category-filter-panel.is-open { transform: translateY(0); }
.category-filter-close { display: block; }
.category-filter-backdrop { position: fixed; inset: 0; z-index: 1001; display: block; background: rgba(28, 20, 16, 0.48); backdrop-filter: blur(3px); }
.category-filter-backdrop[hidden] { display: none; }
.has-filter-drawer { overflow: hidden; }
.category-results-summary button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--color-gold-hair); border-radius: 999px; background: var(--color-surface); color: var(--color-claret); font-size: 0.66rem; font-weight: 600; }
}
@media (max-width: 700px) {
.category-intro { padding: 24px 0 22px; }
.category-intro .category-breadcrumb { margin-bottom: 16px; }
.category-intro-copy { align-items: flex-start; gap: 13px; }
.category-intro-emoji { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.45rem; }
.category-intro-copy h1 { margin-top: 2px; font-size: clamp(1.85rem, 8vw, 2.5rem); }
.category-intro-copy > div > p:last-child { margin-top: 7px; font-size: 0.78rem; line-height: 1.5; }
.category-intro-copy .eyebrow { display: none; }
.category-rail-inner { display: block; padding-top: 12px; padding-bottom: 12px; }
.category-rail-label { display: block; margin-bottom: 8px; }
.category-rail-scroll { margin-right: calc(var(--space-lg) * -1); padding-right: var(--space-lg); }
.category-rail-scroll a { padding: 8px 12px; font-size: 0.68rem; }
.category-catalog { padding: 30px 0 100px; }
.category-catalog-toolbar { align-items: center; margin-bottom: 18px; }
.category-catalog-toolbar h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
.category-sort { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.category-results-summary { margin-bottom: 12px; }
.category-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.category-template-entry,
.category-template-entry .template-card {
width: 100%;
max-width: none;
}
.category-template-card { border-radius: var(--radius-md); }
.category-template-media { aspect-ratio: 9 / 14; }
.category-template-content { padding: 12px 11px 14px; }
.category-template-content h3 { font-size: 1rem; }
.category-template-content > p { display: none; }
.category-template-locales { margin-top: 9px; }
.category-template-locales li { padding: 3px 5px; font-size: 0.48rem; }
.category-template-number { right: 8px; bottom: 8px; width: 27px; height: 27px; font-size: 0.6rem; }
.category-mobile-controls {
position: fixed;
right: 50%;
bottom: 18px;
z-index: 1000;
display: flex;
align-items: center;
padding: 7px;
border: 1px solid var(--color-gold-hair);
border-radius: 999px;
background: rgba(74, 15, 29, 0.94);
box-shadow: 0 14px 40px rgba(28, 20, 16, 0.3);
transform: translateX(50%);
backdrop-filter: blur(12px);
}
.category-mobile-controls button { min-width: 94px; padding: 10px 14px; border: 0; background: transparent; color: var(--color-gold-soft); font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; }
.category-mobile-controls > span { width: 1px; height: 24px; background: rgba(232, 217, 184, 0.3); }
}
@media (max-width: 370px) {
.category-template-grid { grid-template-columns: 1fr; }
.category-template-entry,
.category-template-entry .template-card {
width: min(100%, 320px);
max-width: 320px;
}
}
/* ──────────────────────────────────────────────────────────
Trending marquee
────────────────────────────────────────────────────────── */
.trending-section {
background: var(--color-claret-deep);
padding: 80px 0;
overflow: hidden;
color: var(--color-bg);
position: relative;
}
.trending-section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.trending-section .container { position: relative; z-index: 1; }
.trending-section .section-header { margin-bottom: 40px; }
.trending-section .section-title { color: var(--color-bg); }
.trending-section .section-title em { color: var(--color-gold-bright); }
.trending-section .eyebrow { color: var(--color-gold-bright); }
.trending-marquee {
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
gap: 12px;
width: max-content;
animation: marquee 40s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trend-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 20px;
background: rgba(176, 136, 64, 0.08);
border: 1px solid var(--color-gold-hair);
border-radius: 999px;
color: var(--color-gold-soft);
font-family: var(--font-display);
font-size: 17px;
font-style: italic;
font-weight: 400;
white-space: nowrap;
transition: all var(--duration-fast) var(--ease-out);
flex-shrink: 0;
}
.trend-tag:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
border-color: var(--color-gold);
transform: translateY(-2px);
}
.trend-tag .hash { color: var(--color-gold); font-weight: 600; }
.trend-tag:hover .hash { color: var(--color-claret-deep); }
/* ──────────────────────────────────────────────────────────
Trending templates
────────────────────────────────────────────────────────── */
.trending-templates {
background: var(--color-bg);
padding: 80px 0;
}
.trending-templates .container {
padding: 0;
width: 100%;
max-width: 100%;
}
.tt-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
padding: 0 24px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.tt-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 400;
line-height: 1.1;
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
margin: 4px 0 0;
text-wrap: balance;
}
.tt-title em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
.tt-viewall {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-claret);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
padding-bottom: 4px;
border-bottom: 1px solid var(--color-gold-hair);
transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
white-space: nowrap;
}
.tt-viewall:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
.tt-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 8px 24px 32px;
scroll-padding-inline: 24px;
}
.tt-scroll::-webkit-scrollbar { display: none; }
.tt-scroll > * {
flex: 0 0 280px;
scroll-snap-align: start;
}
@media (min-width: 1024px) {
.tt-scroll > * { flex: 0 0 300px; }
}
/* ──────────────────────────────────────────────────────────
Template showcase
────────────────────────────────────────────────────────── */
.template-showcase {
background: var(--color-bg);
padding: 80px 0;
}
.template-showcase-alt { background: var(--color-bg-deep); }
.showcase-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 24px;
flex-wrap: wrap;
}
.showcase-header .eyebrow { margin-bottom: 8px; }
.showcase-title {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 400;
line-height: 1.1;
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
margin: 0;
}
.showcase-title em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
/* Carousel */
.carousel-wrapper {
position: relative;
margin: 0 -8px;
}
.template-carousel {
display: flex;
gap: 28px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 8px 8px 32px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.template-carousel::-webkit-scrollbar { display: none; }
/* Template card */
.template-card {
position: relative;
flex: 0 0 320px;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
scroll-snap-align: start;
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
animation: fadeSlideUp var(--duration-luxe) var(--ease-out) both;
}
.template-card:nth-child(1) { animation-delay: 80ms; }
.template-card:nth-child(2) { animation-delay: 140ms; }
.template-card:nth-child(3) { animation-delay: 200ms; }
.template-card:nth-child(4) { animation-delay: 260ms; }
.template-card:nth-child(5) { animation-delay: 320ms; }
.template-card:nth-child(6) { animation-delay: 380ms; }
.template-card:nth-child(n+7) { animation-delay: 440ms; }
.template-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gold);
}
/* Template thumb */
.template-thumb {
position: relative;
aspect-ratio: 9/16;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--color-bg-deep);
}
.template-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(28, 20, 16, 0.25) 100%);
pointer-events: none;
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out);
z-index: 2;
}
.template-card:hover .template-thumb::after { opacity: 1; }
.thumb-image,
.thumb-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.thumb-video {
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out);
}
.template-card:hover .thumb-video { opacity: 1; }
.template-card.has-thumb-media .template-corners { z-index: 3; }
.template-card.has-thumb-media .thumb-play,
.template-card.has-thumb-media .lang-chip-wrap { z-index: 7; }
.thumb-inner {
position: relative;
z-index: 2;
text-align: center;
color: var(--color-bg);
padding: var(--space-lg);
}
.thumb-inner::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(232, 217, 184, 0.5);
border-radius: var(--radius-xs);
pointer-events: none;
}
.thumb-ornament {
font-family: var(--font-display);
font-size: 28px;
margin-bottom: var(--space-sm);
opacity: 0.9;
}
.thumb-inner h4 {
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
font-weight: 500;
margin: 0 0 4px;
color: var(--color-bg);
}
.thumb-inner p {
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-gold-soft);
margin: 0;
}
/* Thumb backgrounds — using new palette */
.thumb-wedding-1 { background: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%); }
.thumb-wedding-2 { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.thumb-wedding-3 { background: linear-gradient(135deg, #4a0f1d 0%, #6b1a2c 100%); }
.thumb-wedding-4 { background: linear-gradient(135deg, #6b3a8b 0%, #8b5ca8 100%); }
.thumb-wedding-5 { background: linear-gradient(135deg, #4a6070 0%, #6a8090 100%); }
.thumb-wedding-6 { background: linear-gradient(135deg, #2f6b3e 0%, #4a8c5a 100%); }
.thumb-wedding-7 { background: linear-gradient(135deg, #8a5e1c 0%, #b08840 100%); }
.thumb-eng-1 { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.thumb-eng-2 { background: linear-gradient(135deg, #c98aa1 0%, #e0a5b8 100%); }
.thumb-eng-3 { background: linear-gradient(135deg, #3a2050 0%, #5c3a7c 100%); }
.thumb-eng-4 { background: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%); }
.thumb-eng-5 { background: linear-gradient(135deg, #2d5a6b 0%, #4a8ba3 100%); }
.thumb-eng-6 { background: linear-gradient(135deg, #8a5e1c 0%, #b08840 100%); }
.thumb-bday-1 { background: linear-gradient(135deg, #c98aa1 0%, #e0a5b8 100%); }
.thumb-bday-2 { background: linear-gradient(135deg, #d55a8a 0%, #e58aaa 100%); }
.thumb-bday-3 { background: linear-gradient(135deg, #4a3a7c 0%, #6a5a9c 100%); }
.thumb-bday-4 { background: linear-gradient(135deg, #b08840 0%, #d4a857 100%); }
.thumb-bday-5 { background: linear-gradient(135deg, #d5a8c8 0%, #e8c5d8 100%); }
.thumb-bday-6 { background: linear-gradient(135deg, #4a78c2 0%, #6a98e2 100%); }
.thumb-house-1 { background: linear-gradient(135deg, #6b1a2c 0%, #8b2a3e 100%); }
.thumb-house-2 { background: linear-gradient(135deg, #2f6b3e 0%, #4a8c5a 100%); }
.thumb-house-3 { background: linear-gradient(135deg, #8a5e1c 0%, #b08840 100%); }
.thumb-house-4 { background: linear-gradient(135deg, #962133 0%, #c44d56 100%); }
.thumb-house-5 { background: linear-gradient(135deg, #4a0f1d 0%, #6b1a2c 100%); }
.thumb-house-6 { background: linear-gradient(135deg, #4a6070 0%, #6a8090 100%); }
/* Template corners (gold hairline on hover) */
.template-corners {
position: absolute;
inset: 12px;
pointer-events: none;
z-index: 4;
}
.template-corner {
position: absolute;
width: 18px;
height: 18px;
color: var(--color-gold-bright);
opacity: 0;
transform: scale(0.6);
transition: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-spring);
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.template-corner--tl { top: 0; left: 0; transform-origin: top left; }
.template-corner--tr { top: 0; right: 0; transform-origin: top right; }
.template-corner--bl { bottom: 0; left: 0; transform-origin: bottom left; }
.template-corner--br { bottom: 0; right: 0; transform-origin: bottom right; }
.template-card:hover .template-corner { opacity: 1; transform: scale(1); }
.template-corner circle { color: var(--color-gold-bright); }
/* Language chip + popover */
.lang-chip-wrap {
position: absolute;
top: 14px;
right: 14px;
z-index: 6;
outline: none;
}
.lang-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px 5px 8px;
background: var(--color-gold);
color: var(--color-claret-deep);
border-radius: 999px;
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
line-height: 1;
box-shadow: 0 2px 10px rgba(28, 20, 16, 0.28), inset 0 1px 0 rgba(255, 253, 248, 0.5);
cursor: help;
transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out);
}
.lang-chip svg {
opacity: 0.85;
}
.lang-chip-wrap:hover .lang-chip,
.lang-chip-wrap:focus-visible .lang-chip {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(28, 20, 16, 0.32), inset 0 1px 0 rgba(255, 253, 248, 0.5);
}
.lang-popover {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 180px;
padding: 14px 16px 12px;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-4px) scale(0.96);
transform-origin: top right;
transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring), visibility 0s linear var(--duration-normal);
pointer-events: none;
}
.lang-popover::before {
content: "";
position: absolute;
top: -6px;
right: 14px;
width: 12px;
height: 12px;
background: var(--color-surface);
border-top: 1px solid var(--color-gold-soft);
border-left: 1px solid var(--color-gold-soft);
transform: rotate(45deg);
}
.lang-chip-wrap:hover .lang-popover,
.lang-chip-wrap:focus-visible .lang-popover {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition-delay: 0s, 0s, 0s;
pointer-events: auto;
}
.lang-popover-title {
display: block;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-line);
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-ink-muted);
}
.lang-popover-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.lang-popover-list li {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 12px;
color: var(--color-ink);
}
.lang-popover-script {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 24px;
padding: 0 6px;
background: var(--color-claret);
color: var(--color-gold-soft);
border-radius: 6px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
font-style: italic;
line-height: 1;
}
.lang-popover-name {
font-weight: 500;
letter-spacing: 0.01em;
}
.thumb-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 56px;
height: 56px;
background: rgba(255, 253, 248, 0.95);
color: var(--color-claret);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
z-index: 5;
opacity: 0;
transition: all var(--duration-normal) var(--ease-spring);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.template-card:hover .thumb-play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Template meta */
.template-meta {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.template-name {
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
font-style: italic;
color: var(--color-ink);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.template-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 12px;
gap: 8px;
}
.template-langs {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
min-width: 0;
flex: 1 1 auto;
}
.template-language {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-surface-soft);
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink-soft);
font-style: normal;
white-space: nowrap;
line-height: 1;
transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}
.template-card:hover .template-language {
border-color: var(--color-gold-hair);
}
.template-language--primary {
background: var(--color-claret);
color: var(--color-gold-soft);
border-color: var(--color-claret-deep);
}
.template-language--more {
background: var(--color-surface);
color: var(--color-ink-muted);
}
.template-language--overflow {
background: var(--color-gold-soft);
color: var(--color-claret-deep);
border-color: var(--color-gold-hair);
font-weight: 700;
}
.template-price {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--color-claret);
letter-spacing: -0.01em;
flex-shrink: 0;
white-space: nowrap;
}
.template-edit {
display: block;
text-align: center;
background: transparent;
color: var(--color-claret);
padding: 11px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-gold);
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
transition: all var(--duration-normal) var(--ease-out);
margin-top: 8px;
white-space: nowrap;
flex: 1 1 auto;
}
.template-edit:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
}
.template-actions {
display: flex;
align-items: stretch;
gap: 8px;
margin-top: 8px;
}
.template-actions .template-edit {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
min-height: 46px;
}
.template-play {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 46px;
min-height: 46px;
padding: 0;
background: var(--color-claret);
color: var(--color-gold-soft);
border: 1px solid var(--color-claret-deep);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-spring), color var(--duration-normal) var(--ease-out);
}
.template-play:hover {
background: var(--color-gold-bright);
color: var(--color-claret-deep);
transform: translateY(-1px);
}
.template-play-icon--pause {
display: none;
}
.template-play.is-playing {
background: var(--color-gold);
color: var(--color-claret-deep);
}
.template-play.is-playing .template-play-icon--play {
display: none;
}
.template-play.is-playing .template-play-icon--pause {
display: block;
}
.template-card.is-previewing .thumb-image { opacity: 0; }
.template-card.is-previewing .thumb-video { opacity: 1; }
.template-card.is-previewing .thumb-play,
.template-card.is-previewing .template-corners { opacity: 0; }
/* Carousel buttons */
.carousel-btn {
position: absolute;
top: 35%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-surface);
color: var(--color-claret);
border: 1px solid var(--color-gold-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: var(--shadow-md);
transition: all var(--duration-fast) var(--ease-out);
}
.carousel-btn:hover {
background: var(--color-claret);
color: var(--color-gold-bright);
border-color: var(--color-claret);
}
.carousel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.carousel-prev { left: -16px; }
.carousel-next { right: -16px; }
@media (max-width: 768px) {
.carousel-btn { display: none; }
}
/* ──────────────────────────────────────────────────────────
How It Works
────────────────────────────────────────────────────────── */
.how-it-works {
background: var(--color-bg);
padding: 104px 0;
}
.steps-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 1000px;
margin: 0 auto 48px;
position: relative;
}
.step-card {
position: relative;
padding: 36px 28px 32px;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: left;
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
animation: fadeSlideUp var(--duration-luxe) var(--ease-out) both;
}
.step-card:nth-child(1) { animation-delay: 100ms; }
.step-card:nth-child(2) { animation-delay: 200ms; }
.step-card:nth-child(3) { animation-delay: 300ms; }
.step-card::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid var(--color-gold-soft);
border-radius: calc(var(--radius-lg) - 4px);
pointer-events: none;
opacity: 0.5;
}
.step-card > * { position: relative; }
.step-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-gold);
}
.step-number {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 18px;
color: var(--color-gold);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.step-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
line-height: 1.15;
color: var(--color-ink);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.step-title em {
font-style: italic;
color: var(--color-claret);
font-weight: 500;
}
.step-desc {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
line-height: 1.6;
color: var(--color-ink-soft);
margin: 0;
}
.how-cta {
text-align: center;
margin-top: 16px;
}
/* ──────────────────────────────────────────────────────────
Features Strip
────────────────────────────────────────────────────────── */
.features-strip {
background: var(--color-claret-deep);
padding: 64px 0;
color: var(--color-bg);
position: relative;
overflow: hidden;
}
.features-strip::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.4;
mix-blend-mode: overlay;
}
.features-strip .container { position: relative; z-index: 1; }
.strip-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 32px;
}
.strip-item {
text-align: center;
position: relative;
}
.strip-item:not(:last-child)::after {
content: '';
position: absolute;
right: -16px;
top: 10%;
bottom: 10%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--color-gold-hair), transparent);
}
.strip-icon {
width: 36px;
height: 36px;
margin: 0 auto 12px;
display: grid;
place-items: center;
color: var(--color-gold-bright);
background: rgba(176, 136, 64, 0.12);
border: 1px solid var(--color-gold-hair);
border-radius: 50%;
font-size: 1.1rem;
}
.strip-item h4 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
font-style: italic;
color: var(--color-gold-bright);
margin: 0 0 4px;
}
.strip-item p {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: rgba(250, 246, 240, 0.65);
margin: 0;
line-height: 1.4;
}
/* ──────────────────────────────────────────────────────────
Testimonials
────────────────────────────────────────────────────────── */
.testimonials {
background: var(--color-bg-deep);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
padding: 36px 32px 32px;
box-shadow: var(--shadow-sm);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
animation: fadeSlideUp var(--duration-luxe) var(--ease-out) both;
}
.testimonial-card::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid var(--color-gold-soft);
border-radius: calc(var(--radius-lg) - 4px);
pointer-events: none;
opacity: 0.5;
}
.testimonial-card:nth-child(1) { animation-delay: 100ms; }
.testimonial-card:nth-child(2) { animation-delay: 200ms; }
.testimonial-card:nth-child(3) { animation-delay: 300ms; }
.testimonial-card > * { position: relative; }
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.testimonial-stars {
color: var(--color-gold);
font-size: 14px;
letter-spacing: 4px;
margin-bottom: 16px;
}
.testimonial-text {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: var(--color-ink-soft);
margin: 0 0 24px;
flex: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--color-line);
}
.author-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--color-gold);
background: var(--color-surface-soft);
}
.author-info h4 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--color-ink);
margin: 0;
}
.author-info p {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-ink-muted);
margin: 2px 0 0;
}
/* ──────────────────────────────────────────────────────────
FAQ
────────────────────────────────────────────────────────── */
.faq {
background: var(--color-bg);
}
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--duration-normal) var(--ease-out);
}
.faq-item.active {
border-color: var(--color-gold);
box-shadow: var(--shadow-sm);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: transparent;
border: none;
text-align: left;
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--color-ink);
cursor: pointer;
transition: color var(--duration-normal) var(--ease-out);
gap: 20px;
}
.faq-question:hover { color: var(--color-claret); }
.faq-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
color: var(--color-gold);
border: 1px solid var(--color-gold-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 300;
font-family: var(--font-body);
transition: all var(--duration-normal) var(--ease-spring);
}
.faq-item.active .faq-icon {
background: var(--color-gold);
color: var(--color-claret-deep);
border-color: var(--color-gold);
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--duration-normal) var(--ease-out);
}
.faq-answer p {
padding: 0 24px 20px;
color: var(--color-ink-soft);
line-height: 1.7;
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
margin: 0;
}
.faq-item.active .faq-answer { max-height: 300px; }
/* ──────────────────────────────────────────────────────────
CTA
────────────────────────────────────────────────────────── */
.cta-section {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, #8b2a3e 0%, #4a0f1d 60%, #2a0c14 100%),
var(--color-claret-deep);
padding: 120px 0;
position: relative;
overflow: hidden;
color: var(--color-bg);
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.cta-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.cta-content {
text-align: center;
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
}
.cta-ornament {
width: 32px;
height: 32px;
color: var(--color-gold-bright);
margin: 0 auto 24px;
display: block;
opacity: 0.7;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 400;
line-height: 1.08;
letter-spacing: var(--tracking-tight);
color: var(--color-bg);
margin: 0 0 16px;
text-wrap: balance;
}
.cta-title em {
font-style: italic;
color: var(--color-gold-soft);
font-weight: 400;
}
.cta-subtitle {
font-family: var(--font-display);
font-style: italic;
font-size: 19px;
line-height: 1.6;
color: rgba(250, 246, 240, 0.8);
margin: 0 auto 36px;
max-width: 520px;
}
.cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
margin-bottom: 36px;
flex-wrap: wrap;
}
.cta-trust {
display: flex;
align-items: center;
gap: 28px;
justify-content: center;
flex-wrap: wrap;
padding-top: 32px;
position: relative;
}
.cta-trust::before,
.cta-trust::after {
content: '';
flex: 0 0 40px;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold-hair), transparent);
opacity: 0.7;
}
.trust-item {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: rgba(250, 246, 240, 0.7);
}
/* ──────────────────────────────────────────────────────────
Footer
────────────────────────────────────────────────────────── */
.footer {
background: var(--color-claret-deep);
color: var(--color-bg);
padding: 80px 0 32px;
border-top: 1px solid var(--color-gold-hair);
position: relative;
}
.footer::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.35;
mix-blend-mode: overlay;
}
.footer .container { position: relative; z-index: 1; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
font-variant-caps: all-small-caps;
letter-spacing: 0.02em;
color: var(--color-bg);
margin-bottom: 16px;
}
.footer-logo .logo-icon { color: var(--color-gold); font-size: 1.5rem; }
.footer-desc {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
line-height: 1.6;
color: rgba(250, 246, 240, 0.7);
margin: 0 0 24px;
max-width: 320px;
}
.social-links {
display: flex;
gap: 10px;
}
.social-link {
width: 40px;
height: 40px;
padding: 0;
display: inline-grid;
place-items: center;
color: var(--color-gold-soft);
background: rgba(176, 136, 64, 0.08);
border: 1px solid var(--color-gold-hair);
border-radius: var(--radius-sm);
transition: all var(--duration-normal) var(--ease-out);
}
.social-link:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
border-color: var(--color-gold);
transform: translateY(-2px);
}
.footer-links h4 {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-gold);
margin: 0 0 18px;
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
font-family: var(--font-display);
font-size: 17px;
font-style: italic;
color: rgba(250, 246, 240, 0.7);
transition: color var(--duration-normal) var(--ease-out);
}
.footer-links ul li a:hover { color: var(--color-gold-bright); }
.footer-newsletter h4 {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-gold);
margin: 0 0 10px;
}
.footer-newsletter p {
font-family: var(--font-display);
font-style: italic;
font-size: 16px;
color: rgba(250, 246, 240, 0.7);
margin: 0 0 16px;
}
.newsletter-form {
display: flex;
gap: 8px;
}
.newsletter-input {
flex: 1;
padding: 10px 0;
color: var(--color-bg);
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-gold-hair);
border-radius: 0;
outline: none;
font-family: var(--font-display);
font-size: 16px;
font-style: italic;
transition: border-color var(--duration-normal) var(--ease-out);
}
.newsletter-input::placeholder {
color: rgba(250, 246, 240, 0.45);
font-style: italic;
}
.newsletter-input:focus { border-bottom-color: var(--color-gold); }
.newsletter-btn {
padding: 10px 18px;
background: transparent;
color: var(--color-gold-soft);
border: 1px solid var(--color-gold-hair);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
white-space: nowrap;
}
.newsletter-btn:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
border-color: var(--color-gold);
}
.footer-bottom {
padding-top: 32px;
border-top: 1px solid rgba(212, 168, 87, 0.2);
text-align: center;
}
.copyright {
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: rgba(250, 246, 240, 0.5);
margin: 0;
}
/* ──────────────────────────────────────────────────────────
Product page
────────────────────────────────────────────────────────── */
.product-body .navbar {
background: rgba(250, 246, 240, 0.88);
}
.product-hero {
position: relative;
padding: 64px 0 56px;
color: var(--color-ink);
background:
radial-gradient(ellipse 70% 58% at 22% 8%, rgba(212, 168, 87, 0.18), transparent 60%),
radial-gradient(ellipse 52% 42% at 88% 12%, rgba(122, 31, 48, 0.10), transparent 62%),
linear-gradient(180deg, #fff9f0 0%, #f7efe3 100%);
overflow: hidden;
}
.product-hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.24;
mix-blend-mode: multiply;
}
.product-hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.product-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
gap: clamp(28px, 3.5vw, 52px);
align-items: center;
}
.product-preview-wrap {
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
}
.product-back {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(72, 31, 22, 0.62);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
transition: color var(--duration-normal) var(--ease-out);
}
.product-back:hover { color: var(--color-claret); }
.product-preview-shell {
width: min(100%, 340px);
margin: 0 auto;
padding: 14px;
background: rgba(255, 253, 248, 0.72);
border: 1px solid rgba(122, 31, 48, 0.12);
border-radius: 30px;
box-shadow:
0 28px 70px rgba(74, 15, 29, 0.14),
0 1px 0 rgba(255, 255, 255, 0.8) inset;
backdrop-filter: blur(18px);
}
.product-phone {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.product-phone::before {
display: none;
}
.product-video-card {
position: relative;
min-height: auto;
aspect-ratio: 9 / 16;
display: grid;
place-items: center;
overflow: hidden;
border: 0;
border-radius: 20px;
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 253, 248, 0.18) inset;
}
.product-video-card::before {
content: '';
position: absolute;
inset: 16px;
border: 1px solid rgba(232, 217, 184, 0.42);
border-radius: 17px;
pointer-events: none;
z-index: 2;
}
.product-video-card::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 18%, rgba(212, 168, 87, 0.28), transparent 24%),
linear-gradient(180deg, rgba(28, 20, 16, 0.02), rgba(28, 20, 16, 0.32));
pointer-events: none;
}
.product-badge {
position: absolute;
top: 28px;
left: 24px;
z-index: 3;
padding: 6px 12px;
color: var(--color-claret-deep);
background: var(--color-gold-bright);
border-radius: 999px;
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.product-video-content {
position: relative;
z-index: 2;
width: 78%;
text-align: center;
color: var(--color-bg);
}
.product-kicker {
display: block;
margin-bottom: 20px;
color: var(--color-gold-soft);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.product-flourish {
color: var(--color-gold-bright);
font-family: var(--font-display);
font-size: 44px;
line-height: 1;
margin-bottom: 18px;
}
.product-video-content h2 {
color: var(--color-bg);
font-size: clamp(42px, 5vw, 60px);
line-height: 0.9;
font-style: italic;
letter-spacing: 0;
margin: 0 0 24px;
}
.product-video-content p {
margin: 0 0 8px;
color: var(--color-gold-soft);
font-size: 11px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.product-video-content small {
color: rgba(250, 246, 240, 0.74);
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
}
.product-play {
position: absolute;
right: 24px;
bottom: 24px;
z-index: 5;
width: 58px;
height: 58px;
display: grid;
place-items: center;
color: var(--color-claret);
background: rgba(255, 253, 248, 0.95);
border: 1px solid rgba(212, 168, 87, 0.6);
border-radius: 50%;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
cursor: pointer;
transition: transform var(--duration-normal) var(--ease-spring), background var(--duration-normal) var(--ease-out);
}
.product-play:hover {
transform: scale(1.06);
background: var(--color-gold-bright);
}
.product-preview-note {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.product-preview-note span {
padding: 6px 10px;
color: var(--color-claret);
border: 1px solid rgba(122, 31, 48, 0.14);
border-radius: 999px;
background: rgba(255, 253, 248, 0.62);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.product-summary {
min-width: 0;
}
.product-summary h1 {
max-width: 720px;
color: var(--color-ink);
font-size: clamp(44px, 6vw, 76px);
}
.product-summary h1 em {
color: var(--color-claret);
}
.product-summary .eyebrow {
color: var(--color-claret);
}
.product-subtitle {
max-width: 640px;
margin: 0 0 24px;
color: rgba(72, 31, 22, 0.70);
font-family: var(--font-display);
font-size: 20px;
font-style: italic;
}
.product-rating {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 26px;
color: rgba(72, 31, 22, 0.64);
font-size: 12px;
font-weight: 500;
}
.rating-stars {
color: var(--color-gold-deep);
letter-spacing: 3px;
}
.product-price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
max-width: 600px;
padding: 22px 0;
border-top: 1px solid rgba(122, 31, 48, 0.14);
border-bottom: 1px solid rgba(122, 31, 48, 0.14);
margin-bottom: 24px;
}
.product-price-label {
display: block;
margin-bottom: 4px;
color: rgba(72, 31, 22, 0.54);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.product-price-row strong {
color: var(--color-claret);
font-family: var(--font-display);
font-size: 46px;
font-weight: 500;
line-height: 1;
}
.product-original-price {
display: inline-block;
margin-left: 12px;
color: rgba(72, 31, 22, 0.46);
font-size: 18px;
text-decoration: line-through;
}
.product-save {
color: var(--color-gold-deep);
font-family: var(--font-display);
font-size: 17px;
font-style: italic;
text-align: right;
}
.product-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.product-actions .btn-outline {
color: var(--color-claret);
border-color: rgba(122, 31, 48, 0.26);
}
.product-actions .btn-outline:hover {
color: var(--color-bg);
background: var(--color-claret);
border-color: var(--color-claret);
}
.product-specs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 620px;
margin: 0;
}
.product-specs div {
padding: 14px 16px;
background: rgba(255, 253, 248, 0.62);
border: 1px solid rgba(122, 31, 48, 0.12);
border-radius: var(--radius-sm);
}
.product-specs dt {
margin-bottom: 4px;
color: rgba(72, 31, 22, 0.54);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.product-specs dd {
margin: 0;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 17px;
font-style: italic;
}
.product-section {
background: var(--color-bg);
padding: 64px 0 96px;
}
.product-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.product-copy .section-title {
max-width: 680px;
}
.product-copy-subtitle {
margin-left: 0;
}
.customization-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 36px;
}
.customization-item {
position: relative;
padding: 28px 26px 26px;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.customization-item::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid var(--color-line-soft);
border-radius: calc(var(--radius-lg) - 4px);
pointer-events: none;
}
.customization-item > * {
position: relative;
}
.customization-item span {
display: inline-block;
margin-bottom: 18px;
color: var(--color-gold);
font-family: var(--font-mono);
font-size: 11px;
}
.customization-item h3 {
margin: 0 0 8px;
color: var(--color-ink);
font-size: 23px;
font-style: italic;
}
.customization-item p {
margin: 0;
color: var(--color-ink-soft);
}
.product-includes {
position: sticky;
top: 104px;
padding: 32px;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-paper);
}
.product-includes h3 {
margin: 0 0 22px;
color: var(--color-ink);
font-size: 27px;
font-style: italic;
}
.product-includes ul {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
}
.product-includes li {
position: relative;
padding-left: 28px;
color: var(--color-ink-soft);
line-height: 1.55;
}
.product-includes li::before {
content: '✦';
position: absolute;
left: 0;
top: 0;
color: var(--color-gold);
}
.product-strip {
padding: 58px 0;
}
.product-strip .strip-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
align-items: stretch;
}
.product-strip .strip-item {
min-width: 0;
height: 100%;
}
/* ──────────────────────────────────────────────────────────
Customize Now Modal — "Atelier" redesign
────────────────────────────────────────────────────────── */
.has-product-modal {
overflow: hidden;
}
.pem[hidden] {
display: none;
}
.pem {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: clamp(12px, 2vw, 28px);
}
.pem__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 50% 30%, rgba(212, 168, 87, 0.16), transparent 70%),
rgba(28, 20, 16, 0.62);
backdrop-filter: blur(14px) saturate(0.9);
-webkit-backdrop-filter: blur(14px) saturate(0.9);
animation: pemBackdropIn 240ms var(--ease-out);
}
.pem__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(1040px, 100%);
max-height: min(88vh, 880px);
overflow: hidden;
background: var(--color-bg);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-xl);
box-shadow:
0 1px 0 rgba(255, 253, 248, 0.6) inset,
0 30px 80px rgba(28, 20, 16, 0.32),
0 10px 24px rgba(28, 20, 16, 0.18);
animation: pemPanelIn 380ms var(--ease-spring);
}
.pem__panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.18;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
.pem__panel > * {
position: relative;
z-index: 1;
}
/* ── Progress bar at top of panel ── */
.pem__progress-track {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(176, 136, 64, 0.12);
z-index: 3;
overflow: hidden;
}
.pem__progress-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-claret) 100%);
box-shadow: 0 0 10px rgba(176, 136, 64, 0.45);
transition: width 320ms var(--ease-out);
}
/* ── Header ── */
.pem__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 26px 28px 14px;
border-bottom: 1px solid var(--color-line-soft);
}
.pem__heading {
min-width: 0;
}
.pem__heading .eyebrow {
margin-bottom: 8px;
}
.pem__heading h2 {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 500;
line-height: 1.05;
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
}
.pem__heading h2 em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
.pem__subtitle {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
color: var(--color-ink-soft);
transition: color 220ms var(--ease-out);
}
.pem__close {
flex-shrink: 0;
display: grid;
place-items: center;
width: 40px;
height: 40px;
color: var(--color-claret);
background: var(--color-surface);
border: 1px solid var(--color-gold-hair);
border-radius: 50%;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-spring),
border-color var(--duration-normal) var(--ease-out),
color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out);
}
.pem__close:hover {
color: var(--color-claret-deep);
border-color: var(--color-claret);
transform: rotate(90deg);
}
.pem__close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-glow);
}
.pem__close:active {
transform: rotate(90deg) scale(0.94);
}
/* ── Body (two-column split) ── */
.pem__body {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 0;
flex: 1;
min-height: 0;
}
.pem__body--no-extras {
grid-template-columns: minmax(0, 1fr);
}
.pem__list-wrap {
display: flex;
flex-direction: column;
min-height: 0;
padding: 18px 18px 18px 24px;
border-right: 1px solid var(--color-line-soft);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-gold-hair) transparent;
}
.pem__body--no-extras .pem__list-wrap {
padding-right: 24px;
border-right: 0;
}
.pem__list-wrap::-webkit-scrollbar {
width: 6px;
}
.pem__list-wrap::-webkit-scrollbar-thumb {
background: var(--color-gold-hair);
border-radius: 999px;
}
/* ── Chapter heads (subtle dividers) ── */
.pem__list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── Event Row ── */
.pem-row {
position: relative;
display: grid;
grid-template-columns: 28px 48px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 14px 12px 10px;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition:
transform var(--duration-fast) var(--ease-spring),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
background var(--duration-normal) var(--ease-out),
opacity var(--duration-normal) var(--ease-out);
animation: pemRowIn 360ms var(--ease-spring) both;
isolation: isolate;
}
.pem-row::before {
content: '';
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 3px;
background: linear-gradient(180deg, transparent, var(--color-gold), transparent);
border-radius: 0 4px 4px 0;
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out);
}
.pem-row[data-selected="true"]::before {
opacity: 1;
}
.pem-row[data-locked="true"] {
background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
border-color: var(--color-gold-soft);
}
.pem-row[data-locked="true"]::before {
background: linear-gradient(180deg, transparent, var(--color-claret), transparent);
opacity: 1;
}
.pem-row.is-unselected {
opacity: 0.62;
}
.pem-row.is-unselected .pem-row__tile {
filter: saturate(0.4) brightness(1.05);
}
.pem-row.is-dragging {
opacity: 0.78;
transform: scale(1.015) translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--color-claret);
z-index: 4;
}
.pem-row.is-removing {
animation: pemRowOut 280ms var(--ease-spring) forwards;
}
.pem-row__drag {
display: grid;
place-items: center;
width: 28px;
height: 40px;
color: var(--color-gold);
background: transparent;
border: 0;
border-radius: 6px;
cursor: grab;
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.pem-row__drag:hover {
color: var(--color-claret);
background: rgba(176, 136, 64, 0.1);
}
.pem-row__drag:active {
cursor: grabbing;
}
.pem-row__drag:disabled {
cursor: not-allowed;
opacity: 0;
pointer-events: none;
}
.pem-row:hover .pem-row__drag:not(:disabled),
.pem-row__drag:focus-visible {
opacity: 1;
}
.pem-row__mobile-move {
display: none;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-gold);
background: rgba(176, 136, 64, 0.1);
border: 1px solid var(--color-gold-hair);
border-radius: 6px;
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pem-row__mobile-move:active {
background: rgba(176, 136, 64, 0.22);
color: var(--color-claret);
}
/* ── Tile (icon container) ── */
.pem-row__tile {
position: relative;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-gold-soft) 0%, var(--color-claret-soft) 100%);
color: var(--color-claret-deep);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 0 0 1px var(--color-gold-hair) inset;
flex-shrink: 0;
transition: transform var(--duration-normal) var(--ease-spring), filter var(--duration-normal) var(--ease-out);
}
.pem-row__tile::after {
content: '';
position: absolute;
inset: 4px;
border: 1px dashed rgba(176, 136, 64, 0.4);
border-radius: 4px;
pointer-events: none;
opacity: 0.7;
}
.pem-row__icon {
position: relative;
z-index: 1;
}
.pem-row[data-event-kind="mehendi"] .pem-row__tile {
background: linear-gradient(135deg, #d8e4cf 0%, #9bb888 100%);
color: #4a6741;
}
.pem-row[data-event-kind="haldi"] .pem-row__tile {
background: linear-gradient(135deg, #f4e3b8 0%, #d4a857 100%);
color: #6b4f1c;
}
.pem-row[data-event-kind="sangeet"] .pem-row__tile {
background: linear-gradient(135deg, #e3c8d8 0%, #a16b8f 100%);
color: #5a2a47;
}
.pem-row[data-event-kind="wedding"] .pem-row__tile {
background: linear-gradient(135deg, #d4a5af 0%, #8b2a3e 100%);
color: #faf5ea;
}
.pem-row[data-event-kind="reception"] .pem-row__tile {
background: linear-gradient(135deg, #e8c8a8 0%, #b0855a 100%);
color: #4a2e1c;
}
.pem-row[data-event-kind="save"] .pem-row__tile {
background: linear-gradient(135deg, #c8a8a8 0%, #6b1a2c 100%);
color: #faf5ea;
}
.pem-row[data-event-kind="intro"] .pem-row__tile {
background: linear-gradient(135deg, #faf5ea 0%, #d4a857 100%);
color: var(--color-claret-deep);
}
.pem-row[data-event-kind="custom"] .pem-row__tile {
background: linear-gradient(135deg, #e8d9b8 0%, #b08840 100%);
color: #4a0f1d;
}
.pem-row[data-event-kind="default"] .pem-row__tile {
background: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-gold-soft) 100%);
color: var(--color-claret-deep);
}
.pem-row:hover .pem-row__tile {
transform: scale(1.05);
}
/* ── Row body ── */
.pem-row__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pem-row__title {
margin: 0;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
line-height: 1.2;
color: var(--color-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pem-row__status {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pem-row__pill {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
}
.pem-row__pill--locked {
color: var(--color-claret-deep);
background: var(--color-claret-soft);
border: 1px solid rgba(107, 26, 44, 0.16);
}
.pem-row__pill--optional {
color: var(--color-claret);
background: rgba(212, 168, 87, 0.14);
border: 1px solid var(--color-gold-hair);
}
.pem-row__pill--anchor {
color: var(--color-gold);
background: rgba(176, 136, 64, 0.08);
border: 1px solid rgba(176, 136, 64, 0.22);
}
/* ── Switch toggle ── */
.pem-row__switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.pem-row__switch input[type="checkbox"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.pem-row__switch input[type="checkbox"]:disabled {
cursor: not-allowed;
}
.pem-row__track {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
background: rgba(28, 20, 16, 0.16);
border: 1px solid var(--color-line-strong);
border-radius: 999px;
transition: background var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
flex-shrink: 0;
}
.pem-row__thumb {
position: absolute;
top: 50%;
left: 2px;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: var(--color-surface);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(28, 20, 16, 0.25);
transition: transform var(--duration-normal) var(--ease-spring), background var(--duration-normal) var(--ease-out);
}
.pem-row__switch input:checked + .pem-row__track {
background: linear-gradient(180deg, var(--color-claret-bright) 0%, var(--color-claret) 100%);
border-color: var(--color-claret-deep);
box-shadow: 0 0 0 3px rgba(176, 136, 64, 0.18);
}
.pem-row__switch input:checked + .pem-row__track .pem-row__thumb {
transform: translateY(-50%) translateX(18px);
background: var(--color-surface);
}
.pem-row__switch input:disabled + .pem-row__track {
opacity: 0.55;
}
.pem-row__switch input:focus-visible + .pem-row__track {
box-shadow: 0 0 0 3px var(--color-glow);
}
/* ── Extras row (chips) ── */
.pem-extras {
margin-top: 16px;
padding: 16px;
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
position: relative;
}
.pem-extras::before {
content: '';
position: absolute;
top: -1px;
left: 24px;
right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold) 50%, transparent);
opacity: 0.4;
}
.pem-extras__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 12px;
}
.pem-extras__eyebrow {
margin: 0;
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-claret);
}
.pem-extras__counter {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--color-ink-muted);
}
.pem-extras__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.pem-extra-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 10px;
background: var(--color-bg);
border: 1px solid var(--color-gold-soft);
border-radius: 999px;
color: var(--color-claret);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-spring),
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.pem-extra-chip:hover {
border-color: var(--color-claret);
background: var(--color-claret-soft);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.pem-extra-chip:active {
transform: translateY(0);
}
.pem-extra-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-glow);
}
.pem-extra-chip__icon {
display: grid;
place-items: center;
width: 18px;
height: 18px;
background: linear-gradient(180deg, var(--color-claret-bright) 0%, var(--color-claret-deep) 100%);
color: var(--color-gold-soft);
border-radius: 50%;
flex-shrink: 0;
transition: transform var(--duration-fast) var(--ease-spring);
}
.pem-extra-chip:hover .pem-extra-chip__icon {
transform: rotate(90deg);
}
.pem-extra-chip__label {
white-space: nowrap;
}
.pem-extras__add {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--color-bg);
border: 1px dashed var(--color-claret);
border-radius: 999px;
animation: pemAddSlide 280ms var(--ease-spring);
}
.pem-extras__add[hidden] {
display: none;
}
.pem-extras__add-icon {
display: grid;
place-items: center;
width: 22px;
height: 22px;
background: linear-gradient(135deg, var(--color-gold-soft) 0%, var(--color-claret-soft) 100%);
color: var(--color-claret-deep);
border-radius: 50%;
flex-shrink: 0;
}
.pem-extras__input {
flex: 1;
min-width: 0;
padding: 4px 6px;
background: transparent;
border: 0;
font-family: var(--font-display);
font-size: 14px;
color: var(--color-ink);
outline: none;
}
.pem-extras__input::placeholder {
color: var(--color-ink-muted);
font-style: italic;
}
.pem-extras__input:focus {
border-bottom: 1px solid var(--color-claret);
}
.pem-extras__confirm,
.pem-extras__cancel {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid transparent;
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.pem-extras__confirm {
background: linear-gradient(180deg, var(--color-claret-bright) 0%, var(--color-claret) 100%);
color: var(--color-gold-soft);
}
.pem-extras__confirm:hover {
transform: scale(1.06);
}
.pem-extras__cancel {
background: transparent;
color: var(--color-ink-muted);
border-color: var(--color-line);
}
.pem-extras__cancel:hover {
color: var(--color-claret);
border-color: var(--color-claret);
}
.pem-extras__counter-char {
font-family: var(--font-mono);
font-size: 9px;
color: var(--color-ink-muted);
margin-right: 4px;
white-space: nowrap;
}
.pem-extras__counter-char.is-full {
color: var(--color-error);
font-weight: 700;
}
/* ── Custom row (added via extras) ── */
.pem-row.is-custom {
border-style: dashed;
border-color: var(--color-claret);
}
.pem-row.is-custom .pem-row__title-input {
flex: 1;
min-width: 0;
padding: 2px 4px;
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-ink);
outline: none;
transition: border-color var(--duration-fast) var(--ease-out);
}
.pem-row.is-custom .pem-row__title-input:focus {
border-bottom-color: var(--color-claret);
}
.pem-row__remove {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--color-line);
color: var(--color-ink-muted);
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.pem-row__remove:hover {
color: var(--color-claret);
border-color: var(--color-claret);
background: var(--color-claret-soft);
transform: scale(1.06);
}
.pem-row__remove-pending {
background: var(--color-claret) !important;
color: var(--color-gold-soft) !important;
border-color: var(--color-claret-deep) !important;
animation: pemPulse 800ms ease-in-out infinite;
}
/* ── Drag ghost placeholder ── */
.pem-row.is-drag-ghost {
pointer-events: none;
opacity: 0;
height: 6px;
padding: 0;
margin: -2px 0;
border: 1px dashed var(--color-claret);
border-radius: 4px;
background: transparent;
box-shadow: none;
animation: none;
}
.pem-row.is-drop-blocked {
pointer-events: none;
opacity: 0.55;
filter: grayscale(0.5);
}
/* ── Sticky Right Rail ── */
.pem-rail {
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-bg) 100%);
position: relative;
}
.pem-rail::before {
content: '';
position: absolute;
top: 16px;
bottom: 16px;
left: 0;
width: 1px;
background: linear-gradient(180deg, transparent, var(--color-gold-hair), transparent);
}
.pem-rail__sticky {
flex: 1;
display: flex;
flex-direction: column;
padding: 26px 24px 22px;
gap: 14px;
min-height: 0;
overflow-y: auto;
}
.pem-rail__eyebrow {
margin: 0;
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-gold);
}
.pem-rail__title {
margin: 0;
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--color-ink);
letter-spacing: 0.01em;
}
.pem-rail__count {
margin: 0;
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--color-ink-soft);
display: flex;
align-items: baseline;
gap: 4px;
}
.pem-rail__count > span:first-child {
font-size: 26px;
color: var(--color-claret);
font-weight: 600;
font-variant-numeric: tabular-nums;
transition: color var(--duration-normal) var(--ease-out);
}
.pem-rail__count.is-full > span:first-child {
color: var(--color-gold);
}
.pem-rail__count.is-full {
animation: pemPulse 600ms var(--ease-spring);
}
.pem-rail__count-sep {
font-size: 13px;
color: var(--color-ink-muted);
}
.pem-rail__count-label {
font-size: 13px;
color: var(--color-ink-muted);
font-style: italic;
margin-left: 4px;
}
/* ── Phone preview in rail ── */
.pem-rail__preview {
display: none;
}
/* ── Rail chips ── */
.pem-rail__chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-height: 24px;
padding: 4px 0;
}
.pem-rail-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: var(--color-claret-soft);
border: 1px solid rgba(107, 26, 44, 0.18);
border-radius: 999px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
color: var(--color-claret-deep);
animation: pemChipIn 280ms var(--ease-spring);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.pem-rail-chip.is-removing {
animation: pemChipOut 220ms var(--ease-out) forwards;
}
.pem-rail-chip__index {
font-family: var(--font-mono);
font-size: 8px;
color: var(--color-claret);
opacity: 0.7;
}
.pem-rail__chips-empty {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-ink-muted);
}
/* ── Continue button + secondary ── */
.pem-rail__cta {
margin-top: 4px;
padding: 0 18px;
min-height: 50px;
}
.pem-rail__cta > svg {
transition: transform var(--duration-normal) var(--ease-spring);
}
.pem-rail__cta:hover > svg {
transform: translateX(4px);
}
.pem-rail__secondary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px dashed var(--color-line);
}
.pem-rail__link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 0;
background: transparent;
border: 0;
color: var(--color-claret);
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px solid transparent;
transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pem-rail__link:hover {
color: var(--color-claret-deep);
border-bottom-color: var(--color-gold);
}
.pem-rail__link--muted {
color: var(--color-ink-muted);
}
.pem-rail__link--muted:hover {
color: var(--color-claret);
}
.pem-rail__message {
margin: 0;
padding: 8px 12px;
font-family: var(--font-display);
font-style: italic;
font-size: 12px;
color: var(--color-claret-deep);
background: var(--color-claret-soft);
border-radius: var(--radius-sm);
border-left: 2px solid var(--color-claret);
animation: pemMessageIn 240ms var(--ease-out);
}
.pem-rail__message:empty {
display: none;
}
/* ── Footer ── */
.pem__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding: 10px 18px;
border-top: 1px solid var(--color-line-soft);
background: var(--color-surface-soft);
}
.pem__footer-hint {
display: none;
}
.pem__footer-close {
min-height: 34px;
padding: 0 16px;
font-size: 10px;
}
/* ── Stagger entrance for rows ── */
.pem-row { animation-delay: calc(var(--pem-row-index, 0) * 30ms); }
.pem-row:nth-child(1) { --pem-row-index: 0; }
.pem-row:nth-child(2) { --pem-row-index: 1; }
.pem-row:nth-child(3) { --pem-row-index: 2; }
.pem-row:nth-child(4) { --pem-row-index: 3; }
.pem-row:nth-child(5) { --pem-row-index: 4; }
.pem-row:nth-child(6) { --pem-row-index: 5; }
.pem-row:nth-child(7) { --pem-row-index: 6; }
.pem-row:nth-child(8) { --pem-row-index: 7; }
.pem-row:nth-child(9) { --pem-row-index: 8; }
.pem-row:nth-child(10) { --pem-row-index: 8; }
/* ── Responsive: tablet ── */
@media (max-width: 980px) {
.pem {
padding: 0;
}
.pem__panel {
width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
}
.pem__body {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto;
}
.pem__list-wrap {
border-right: 0;
border-bottom: 1px solid var(--color-line-soft);
padding: 14px 16px;
}
.pem-rail {
background: var(--color-surface);
}
.pem-rail::before {
display: none;
}
.pem-rail__sticky {
padding: 16px 18px;
}
.pem-rail__chips {
max-height: 56px;
overflow-y: auto;
}
.pem__progress-track {
height: 2px;
}
}
/* ── Responsive: mobile drag fallback ── */
@media (hover: none), (max-width: 640px) {
.pem-row__drag {
display: none;
}
.pem-row {
grid-template-columns: 24px 24px 42px minmax(0, 1fr) auto;
gap: 8px;
padding: 10px 10px 10px 8px;
}
.pem-row__mobile-move {
display: grid;
}
.pem-row__tile {
width: 42px;
height: 42px;
}
.pem-row__title {
font-size: 15px;
}
.pem-row__switch .pem-row__track {
width: 38px;
height: 22px;
}
.pem-row__thumb {
width: 16px;
height: 16px;
}
.pem-row__switch input:checked + .pem-row__track .pem-row__thumb {
transform: translateY(-50%) translateX(16px);
}
}
@media (max-width: 480px) {
.pem__header {
padding: 18px 18px 10px;
}
.pem__heading h2 {
font-size: 24px;
}
.pem__subtitle {
font-size: 13px;
}
.pem__footer {
padding: 8px 14px;
}
.pem-rail__sticky {
padding: 14px 16px;
}
.pem-extras__chips {
gap: 6px;
}
.pem-extra-chip {
padding: 6px 10px 6px 8px;
font-size: 11px;
}
}
/* ── Animations ── */
@keyframes pemBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pemPanelIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes pemRowIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pem-row[data-selected="false"] {
animation: pemRowIn 360ms var(--ease-spring) both;
}
@keyframes pemRowOut {
to {
opacity: 0;
transform: scale(0.92);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border-width: 0;
}
}
@keyframes pemAddSlide {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pemChipIn {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pemChipOut {
to {
opacity: 0;
transform: scale(0.85);
}
}
@keyframes pemMessageIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pemPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.pem__backdrop,
.pem__panel,
.pem-row,
.pem-rail-chip,
.pem-rail__message,
.pem-rail__count.is-full,
.pem-row__remove-pending {
animation: none !important;
}
.pem-row.is-dragging {
transform: none;
}
}
.product-error-state {
min-height: 58vh;
display: grid;
align-items: center;
padding: 80px 0;
}
.product-error-state h1 {
color: var(--color-ink);
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.related-grid .template-card {
width: 100%;
flex: none;
}
.product-body .footer-grid {
grid-template-columns: 2fr 1fr 1fr 2fr;
}
/* ──────────────────────────────────────────────────────────
Scroll to top
────────────────────────────────────────────────────────── */
.scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-claret);
color: var(--color-gold-bright);
border: 1px solid var(--color-gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-foil);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--duration-normal) var(--ease-out);
z-index: 999;
}
.scroll-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
transform: translateY(-3px);
}
/* ──────────────────────────────────────────────────────────
Animations
────────────────────────────────────────────────────────── */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ──────────────────────────────────────────────────────────
Responsive
────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.template-grid { gap: 24px; }
.product-hero-grid { grid-template-columns: 1fr; }
.product-preview-shell { width: min(100%, 340px); }
}
@media (max-width: 1024px) {
.hero-title { font-size: clamp(36px, 5vw, 56px); }
.hero-content { gap: 48px; }
.categories-grid { grid-template-columns: repeat(4, 1fr); }
.strip-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.product-detail-grid { grid-template-columns: 1fr; }
.product-includes { position: static; }
.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-body .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 76px;
left: 0;
right: 0;
background: rgba(250, 246, 240, 0.98);
flex-direction: column;
padding: 24px;
gap: 4px;
border-bottom: 1px solid var(--color-line);
box-shadow: var(--shadow-md);
}
.nav-links.active { display: flex; }
.nav-actions .btn-ghost,
.nav-actions .btn-primary { display: none; }
.nav-search { display: none; }
.mobile-menu-btn { display: flex; }
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text { text-align: center; }
.hero-cta { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-visual { display: none; }
.hero-title { font-size: 40px; }
.hero-subtitle { margin-left: auto; margin-right: auto; }
.section-title { font-size: 32px; }
.showcase-title { font-size: 28px; }
.section-subtitle { font-size: 16px; }
.trending-templates { padding: 72px 0 56px; }
.tt-header { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
.tt-grid { grid-template-columns: 1fr; gap: 20px; }
.tt-featured-thumb { aspect-ratio: 16 / 10; }
.tt-featured-ornament { font-size: 44px; }
.tt-featured-inner h3 { font-size: 26px; }
.tt-featured-meta { padding: 20px 22px 22px; }
.tt-name { font-size: 22px; }
.tt-price { font-size: 24px; }
.tt-row { grid-template-columns: auto 80px 1fr auto; gap: 14px; padding: 12px 14px 12px 12px; }
.tt-row-thumb { width: 80px; height: 80px; }
.tt-row-ornament { font-size: 28px; }
.tt-row-name { font-size: 16px; }
.tt-row-foot { gap: 8px; flex-wrap: wrap; }
.categories-grid { grid-template-columns: repeat(3, 1fr); }
.category-image { aspect-ratio: 1/1; }
.category-emoji { font-size: 2rem; }
.steps-container { grid-template-columns: 1fr; gap: 16px; }
.strip-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.strip-item:not(:last-child)::after { display: none; }
.testimonials-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 40px; }
.newsletter-form { flex-direction: column; }
.showcase-header { flex-direction: column; align-items: flex-start; }
.template-card { flex: 0 0 78vw; max-width: 320px; }
.template-carousel { gap: 16px; padding: 8px 20px 32px; scroll-padding-inline: 20px; }
.template-meta { padding: 16px 18px 18px; gap: 8px; }
.template-name { font-size: 19px; }
.template-row { flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.template-langs { flex: 1 1 auto; min-width: 0; row-gap: 4px; }
.template-price { font-size: 22px; margin-left: auto; flex-shrink: 0; }
.template-edit { white-space: nowrap; padding: 12px 18px; font-size: 11px; }
.lang-popover { right: -10px; }
.lang-chip-wrap { top: 10px; right: 10px; }
.cta-title { font-size: 36px; }
.cta-buttons { flex-direction: column; }
.btn-lg { width: 100%; }
.cta-trust { flex-direction: column; gap: 8px; }
.product-hero {
padding: 40px 0 44px;
}
.product-summary h1 {
font-size: 42px;
}
.product-subtitle {
font-size: 18px;
}
.product-price-row {
align-items: flex-start;
flex-direction: column;
}
.product-save {
text-align: left;
}
.product-actions .btn {
width: 100%;
}
.product-specs,
.customization-grid,
.related-grid {
grid-template-columns: 1fr;
}
.product-video-card {
min-height: auto;
}
.product-section {
padding: 52px 0 72px;
}
.product-body .footer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container { width: calc(100% - 28px); }
.hero-title { font-size: 32px; }
.categories-grid { grid-template-columns: repeat(2, 1fr); }
.template-card { flex: 0 0 82vw; max-width: 320px; }
.template-carousel { gap: 14px; padding: 8px 16px 32px; scroll-padding-inline: 16px; }
.template-meta { padding: 14px 16px 16px; }
.template-name { font-size: 18px; }
.template-language { font-size: 9px; padding: 0 6px; height: 18px; }
.template-edit { white-space: nowrap; padding: 12px 16px; font-size: 10px; }
.hero-stats { gap: 28px; justify-content: flex-start; }
.stat-number { font-size: 26px; }
.stat-divider { display: none; }
.product-preview-shell {
width: min(100%, 320px);
}
.product-phone {
width: min(100%, 320px);
}
.product-video-card {
border-radius: 20px;
}
.product-video-content h2 {
font-size: 38px;
}
.product-badge {
left: 20px;
top: 38px;
}
.product-play {
right: 18px;
bottom: 18px;
width: 50px;
height: 50px;
}
}
@media (hover: none) {
.template-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--color-gold-soft); }
.template-card:hover .template-corner { opacity: 0; transform: scale(0.6); }
.template-card:hover .thumb-play { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
.btn-primary:hover { transform: none; }
.btn-primary:hover::before { left: -120%; }
.btn-ghost:hover, .btn-outline-light:hover { transform: none; }
.step-card:hover, .testimonial-card:hover, .category-card:hover { transform: none; }
.collage-card:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn-primary::before { display: none; }
.mandala-1, .mandala-2 { animation: none; }
.marquee-track { animation: none; }
}
/* ──────────────────────────────────────────────────────────
Auth pages — Claret radial shell with gold grain
────────────────────────────────────────────────────────── */
.auth-body {
background: var(--color-bg);
}
.auth-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 12px 24px;
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, #8b2a3e 0%, #4a0f1d 60%, #2a0c14 100%),
var(--color-claret-deep);
color: var(--color-bg);
}
.auth-shell::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.auth-shell::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.45) 100%);
}
.auth-back {
position: absolute;
top: 24px;
left: 24px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
color: var(--color-gold-soft);
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
border: 1px solid var(--color-gold-hair);
border-radius: var(--radius-sm);
background: rgba(176, 136, 64, 0.08);
transition: all var(--duration-normal) var(--ease-out);
}
.auth-back:hover {
background: var(--color-gold);
color: var(--color-claret-deep);
border-color: var(--color-gold);
transform: translateY(-1px);
}
.auth-surface {
position: relative;
z-index: 1;
width: min(440px, 100%);
padding: 18px 36px 14px;
background: var(--color-surface);
border: 1px solid var(--color-gold-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-paper);
animation: fadeSlideUp var(--duration-luxe) var(--ease-out) both;
text-align: left;
}
.auth-surface::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
right: 12px;
bottom: 12px;
border: 1px solid var(--color-gold-soft);
border-radius: calc(var(--radius-xl) - 6px);
pointer-events: none;
opacity: 0.45;
}
.auth-surface > * { position: relative; }
.auth-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
margin-bottom: 6px;
background: var(--color-surface-soft);
border: 1px solid var(--color-gold-soft);
border-radius: 50%;
color: var(--color-gold);
}
.auth-icon svg { width: 18px; height: 18px; }
.auth-surface .eyebrow {
margin-bottom: 4px;
color: var(--color-gold);
font-size: 9px;
}
.auth-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
line-height: 1.05;
letter-spacing: var(--tracking-tight);
color: var(--color-ink);
margin: 0 0 4px;
text-wrap: balance;
}
.auth-title em {
font-style: italic;
color: var(--color-claret);
font-weight: 400;
}
.auth-copy {
margin: 0 0 12px;
color: var(--color-ink-soft);
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
line-height: 1.4;
}
/* Social buttons */
.auth-social {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.social-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 38px;
padding: 0 16px;
background: var(--color-surface);
color: var(--color-ink);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-out);
overflow: hidden;
}
.social-button::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
pointer-events: none;
opacity: 0.5;
}
.social-button:hover {
border-color: var(--color-gold);
background: var(--color-surface-soft);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.social-button:active { transform: translateY(0); }
.social-icon { flex-shrink: 0; position: relative; z-index: 1; }
.social-button > span { position: relative; z-index: 1; }
.social-button.is-loading {
pointer-events: none;
opacity: 0.7;
}
.social-button.is-loading::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
border: 1.5px solid var(--color-line-strong);
border-top-color: var(--color-claret);
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Divider */
.auth-divider {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 14px;
text-align: center;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-gold-hair), transparent);
}
.auth-divider span {
padding: 0 16px;
color: var(--color-ink-muted);
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
/* Form */
.auth-form {
display: grid;
gap: 7px;
}
.auth-form label {
display: grid;
gap: 2px;
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-ink-soft);
}
.auth-form label > span {
display: flex;
justify-content: space-between;
align-items: center;
}
.auth-form label > span small {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: none;
color: var(--color-ink-muted);
font-style: normal;
}
.auth-form label > span small[data-overflow="true"] { color: var(--color-error); }
.auth-form input {
width: 100%;
padding: 4px 0;
color: var(--color-ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-line-strong);
border-radius: 0;
outline: none;
font-family: var(--font-display);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.005em;
transition: border-color var(--duration-normal) var(--ease-out);
position: relative;
z-index: 1;
}
.auth-form input::placeholder {
color: var(--color-ink-muted);
font-style: italic;
font-family: var(--font-display);
}
.auth-form input:hover { border-bottom-color: var(--color-ink-soft); }
.auth-form input:focus { border-bottom-color: transparent; }
.auth-form input:focus,
.auth-form input:not(:placeholder-shown) { border-bottom-color: var(--color-gold); }
.auth-form input:focus {
outline: none;
}
.auth-inline-link {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-claret);
border-bottom: 1px solid var(--color-gold-hair);
transition: all var(--duration-normal) var(--ease-out);
}
.auth-inline-link:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
/* Password field with eye toggle */
.password-field {
position: relative;
}
.password-field input {
padding-right: 36px;
}
.password-toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
background: transparent;
border: 0;
color: var(--color-ink-muted);
cursor: pointer;
border-radius: 50%;
transition: all var(--duration-fast) var(--ease-out);
}
.password-toggle svg {
transition: transform var(--duration-fast) var(--ease-spring);
}
.password-toggle:hover {
color: var(--color-claret);
background: var(--color-bg-deep);
}
.password-toggle:hover svg {
transform: scale(1.15);
}
.password-toggle:focus-visible {
outline: 2px solid var(--color-gold-hair);
outline-offset: 1px;
}
.password-toggle:active {
transform: translateY(-50%) scale(0.92);
}
.password-toggle.is-shown {
color: var(--color-claret);
background: rgba(176, 136, 64, 0.14);
}
.password-toggle.is-shown svg {
transform: scale(1.05);
}
.password-toggle .eye-off { display: none; }
.password-toggle.is-shown .eye-on { display: none; }
.password-toggle.is-shown .eye-off { display: block; }
/* Password strength meter — inline with field, not below */
.password-strength {
display: flex;
gap: 3px;
margin-top: 3px;
height: 2px;
}
.strength-bar {
flex: 1;
background: var(--color-line);
border-radius: 999px;
transition: background var(--duration-normal) var(--ease-out);
}
.password-strength[data-score="1"] .strength-bar:nth-child(-n+1) { background: var(--color-error); }
.password-strength[data-score="2"] .strength-bar:nth-child(-n+2) { background: var(--color-warning); }
.password-strength[data-score="3"] .strength-bar:nth-child(-n+3) { background: var(--color-gold); }
.password-strength[data-score="4"] .strength-bar { background: var(--color-success); }
/* Checkbox */
.auth-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
font-size: 11px;
font-family: var(--font-body);
font-weight: 400;
color: var(--color-ink-soft);
line-height: 1.3;
padding: 0;
}
.auth-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.checkbox-mark {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-xs);
background: var(--color-surface);
position: relative;
transition: all var(--duration-fast) var(--ease-out);
margin-top: 1px;
}
.auth-checkbox input[type="checkbox"]:checked + .checkbox-mark {
background: var(--color-gold);
border-color: var(--color-gold);
}
.auth-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--color-claret-deep);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.checkbox-label { flex: 1; }
.auth-checkbox input[type="checkbox"]:focus-visible + .checkbox-mark {
outline: 2px solid var(--color-gold-hair);
outline-offset: 2px;
}
/* Submit button with loading */
.btn.is-loading {
pointer-events: none;
color: transparent !important;
position: relative;
}
.btn.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
border: 1.5px solid rgba(253, 246, 227, 0.3);
border-top-color: #fdf6e3;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading .spinner--small {
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
/* Form error */
.form-error {
margin: 0;
min-height: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-error);
line-height: 1.3;
text-align: center;
transition: min-height var(--duration-normal) var(--ease-out);
}
.form-error:not(:empty) { min-height: 16px; margin-top: -4px; }
.form-error.is-info { color: var(--color-claret); }
/* Footer */
.auth-footer {
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid var(--color-line);
color: var(--color-ink-muted);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
text-align: center;
}
.auth-footer-link {
display: inline-block;
margin-left: 4px;
font-style: normal;
}
@media (max-width: 540px) {
.auth-shell { padding: 24px 16px; }
.auth-back {
top: 16px;
left: 16px;
padding: 6px 12px;
font-size: 9px;
}
.auth-surface { padding: 48px 28px 32px; }
.auth-surface::before { top: 8px; left: 8px; right: 8px; bottom: 8px; }
.auth-title { font-size: 30px; }
.auth-copy { font-size: 15px; }
}
/* Video editor */
.video-editor-body {
background: var(--color-bg);
}
.video-editor {
display: grid;
grid-template-columns: minmax(320px, 0.82fr) minmax(440px, 1.18fr);
justify-content: stretch;
gap: 28px;
width: min(1440px, calc(100vw - 40px));
margin: 0 auto;
padding: 34px 0 64px;
}
.video-editor__preview {
position: sticky;
top: 24px;
align-self: start;
display: grid;
gap: 12px;
place-items: center;
padding: 0;
min-height: calc(100vh - 96px);
}
.ve-preview-shell {
width: min(430px, 100%);
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: 22px;
background: var(--color-surface);
box-shadow: 0 28px 80px rgba(28, 20, 16, 0.24);
}
.ve-preview-shell > div {
width: 100% !important;
height: 100% !important;
background: transparent !important;
}
.video-editor__panel {
display: grid;
gap: 18px;
align-content: start;
padding: 0;
}
.ve-header,
.ve-section,
.ve-event-card {
background: rgba(255, 253, 248, 0.82);
border: 1px solid var(--color-line);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(28, 20, 16, 0.06);
}
.ve-header {
padding: 24px;
}
.ve-header h1 {
margin: 6px 0 16px;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 56px);
line-height: 0.95;
}
.ve-header__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.ve-stepper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
gap: 8px;
margin-top: 18px;
}
.ve-step {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-ink-muted);
font-size: 12px;
font-weight: 800;
text-align: left;
cursor: pointer;
}
.ve-step span {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(28, 20, 16, 0.08);
color: var(--color-ink-muted);
font-size: 11px;
}
.ve-step.is-active {
border-color: var(--color-claret);
background: rgba(122, 31, 58, 0.07);
color: var(--color-claret);
}
.ve-step.is-active span,
.ve-step.is-complete span {
background: var(--color-claret);
color: #fffefa;
}
.ve-step:disabled {
cursor: default;
opacity: 0.58;
}
.ve-language-editions {
display: grid;
gap: 10px;
margin: 0 0 14px;
}
.ve-language-editions__head {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--color-claret);
font-size: 11px;
font-weight: 800;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.ve-language-select {
position: relative;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 28px;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 8px 14px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 254, 250, 0.96), rgba(212, 168, 87, 0.08));
color: var(--color-ink);
overflow: hidden;
}
.ve-language-select::after {
content: '';
justify-self: center;
width: 9px;
height: 9px;
border-right: 2px solid var(--color-claret);
border-bottom: 2px solid var(--color-claret);
transform: rotate(45deg) translateY(-2px);
pointer-events: none;
}
.ve-language-select > svg {
justify-self: center;
color: var(--color-claret);
}
.ve-language-select__value {
display: block;
min-width: 0;
}
.ve-language-select__value strong {
min-width: 0;
overflow: hidden;
color: var(--color-ink);
font-size: 16px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.ve-language-select select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.ve-language-select:focus-within {
border-color: var(--color-claret);
box-shadow: 0 0 0 3px var(--color-glow);
}
.ve-language {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
}
.ve-preview-toggle {
display: inline-grid;
grid-template-columns: auto 38px;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 10px 0 14px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-ink-soft);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.ve-preview-toggle:hover {
border-color: var(--color-gold-soft);
background: var(--color-surface);
color: var(--color-ink);
}
.ve-preview-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-glow);
}
.ve-preview-toggle.is-on {
color: var(--color-claret);
}
.ve-preview-switch {
position: relative;
display: inline-flex;
align-items: center;
width: 38px;
height: 22px;
flex-shrink: 0;
padding: 0;
border: 1px solid var(--color-line-strong);
border-radius: 999px;
background: rgba(28, 20, 16, 0.16);
transition: background var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.ve-preview-switch__thumb {
position: absolute;
top: 50%;
left: 2px;
width: 16px;
height: 16px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--color-surface);
box-shadow: 0 1px 3px rgba(28, 20, 16, 0.25);
transition: transform var(--duration-normal) var(--ease-spring);
}
.ve-preview-toggle.is-on .ve-preview-switch {
background: linear-gradient(180deg, var(--color-claret-bright) 0%, var(--color-claret) 100%);
border-color: var(--color-claret-deep);
box-shadow: 0 0 0 3px rgba(176, 136, 64, 0.18);
}
.ve-preview-toggle.is-on .ve-preview-switch__thumb {
transform: translateY(-50%) translateX(16px);
}
.ve-language select,
.ve-extra-add select,
.ve-extra-add input,
.ve-field input,
.ve-field textarea {
width: 100%;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-ink);
font: inherit;
}
.ve-language select {
border: 0;
background: transparent;
}
.ve-section {
padding: 20px;
}
.ve-step-body {
display: grid;
gap: 18px;
}
.ve-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.ve-section h2 {
margin: 0;
font-family: var(--font-display);
font-size: 24px;
}
.ve-section__head p,
.ve-empty-note {
margin: 5px 0 0;
color: var(--color-ink-muted);
font-size: 14px;
line-height: 1.45;
}
.ve-count-pill,
.ve-missing-pill {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 9px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: #fffefa;
color: var(--color-ink-muted);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.ve-missing-pill {
border-color: rgba(183, 49, 49, 0.24);
background: rgba(183, 49, 49, 0.08);
color: var(--color-error);
}
.ve-side-toggle {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ve-side-toggle button {
min-height: 42px;
padding: 9px 12px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-ink-muted);
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.ve-side-toggle button.is-selected {
border-color: var(--color-claret);
background: rgba(122, 31, 58, 0.07);
color: var(--color-claret);
}
.ve-field-group {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: rgba(255, 254, 250, 0.62);
}
.ve-field-group__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ve-field-group__head h3 {
margin: 0;
font-size: 15px;
}
.ve-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ve-field {
display: grid;
gap: 7px;
min-width: 0;
}
.ve-field__label {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: var(--color-ink);
line-height: 1.25;
}
.ve-field__label > span {
min-width: 0;
}
.ve-field__label em {
flex: 0 0 auto;
padding: 2px 6px;
border: 1px solid rgba(122, 31, 58, 0.16);
border-radius: 999px;
background: rgba(122, 31, 58, 0.06);
color: var(--color-claret);
font-size: 10px;
font-style: normal;
font-weight: 800;
}
.ve-field input,
.ve-field textarea {
min-height: 44px;
padding: 10px 12px;
}
.ve-field.is-missing input,
.ve-field.is-missing textarea {
border-color: rgba(183, 49, 49, 0.72);
background: rgba(183, 49, 49, 0.04);
box-shadow: 0 0 0 3px rgba(183, 49, 49, 0.08);
}
.ve-field textarea {
min-height: 96px;
resize: vertical;
}
.ve-field__hint {
display: flex;
justify-content: space-between;
gap: 10px;
min-height: 16px;
color: var(--color-ink-muted);
font-size: 12px;
}
.ve-field.is-missing .ve-field__hint {
color: var(--color-error);
font-weight: 700;
}
.ve-field__hint > span {
min-width: 0;
}
.ve-field__hint em {
flex: 0 0 auto;
font-style: normal;
}
.ve-field__hint em[data-overflow="true"],
.ve-error {
color: var(--color-error);
}
.ve-event-picker {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ve-event-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 12px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-ink);
cursor: pointer;
}
.ve-event-chip.is-selected {
border-color: var(--color-gold);
background: rgba(212, 168, 87, 0.15);
}
.ve-event-chip:disabled {
cursor: default;
opacity: 0.82;
}
.ve-event-chip small {
color: var(--color-ink-muted);
font-size: 11px;
}
.ve-extra-event-panel {
display: grid;
gap: 14px;
padding: 16px;
border: 1px solid rgba(176, 136, 64, 0.32);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 254, 250, 0.88), rgba(212, 168, 87, 0.08));
}
.ve-extra-event-panel__copy {
display: grid;
gap: 6px;
}
.ve-extra-event-panel__eyebrow {
color: var(--color-claret);
font-size: 11px;
font-weight: 800;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.ve-extra-event-panel h3 {
margin: 0;
font-size: 18px;
}
.ve-extra-event-panel p {
margin: 0;
color: var(--color-ink-muted);
font-size: 14px;
line-height: 1.45;
}
.ve-extra-event-meter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.ve-extra-event-meter span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 9px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: #fffefa;
color: var(--color-ink);
font-size: 12px;
font-weight: 800;
}
.ve-extra-event-limit {
color: var(--color-error);
font-weight: 700;
}
.ve-extra-add {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.ve-extra-add select {
grid-column: 1 / -1;
min-height: 42px;
padding: 8px 10px;
}
.ve-extra-add input {
min-height: 42px;
padding: 8px 10px;
}
.ve-image-upload {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 92px;
padding: 12px;
border: 1px dashed rgba(122, 31, 58, 0.28);
border-radius: 8px;
background: rgba(255, 254, 250, 0.76);
}
.ve-image-upload.has-image {
grid-template-columns: 68px minmax(0, 1fr) 36px auto;
border-style: solid;
border-color: rgba(176, 136, 64, 0.34);
}
.ve-image-upload input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ve-image-upload img,
.ve-image-upload__icon {
width: 52px;
height: 52px;
border-radius: 8px;
}
.ve-image-upload img {
object-fit: cover;
background: var(--color-line);
}
.ve-image-upload.has-image img {
width: 68px;
height: 68px;
}
.ve-image-upload__icon {
display: grid;
place-items: center;
border: 1px solid rgba(122, 31, 58, 0.16);
background: rgba(122, 31, 58, 0.07);
color: var(--color-claret);
}
.ve-image-upload__meta {
display: grid;
gap: 4px;
min-width: 0;
}
.ve-image-upload__meta strong {
overflow: hidden;
color: var(--color-ink);
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ve-image-upload__meta span {
color: var(--color-ink-muted);
font-size: 12px;
line-height: 1.4;
}
.ve-image-upload__remove {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-claret);
cursor: pointer;
}
.ve-audio-dropzone {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 132px;
padding: 18px;
border: 1px dashed rgba(122, 31, 58, 0.34);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255, 254, 250, 0.96), rgba(212, 168, 87, 0.12)),
#fffefa;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.ve-audio-dropzone.is-drag-active {
border-color: var(--color-claret);
background: rgba(122, 31, 58, 0.07);
box-shadow: 0 0 0 3px rgba(176, 136, 64, 0.16);
}
.ve-audio-dropzone input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ve-audio-dropzone__icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(122, 31, 58, 0.16);
border-radius: 8px;
background: rgba(122, 31, 58, 0.07);
color: var(--color-claret);
}
.ve-audio-dropzone__copy {
display: grid;
gap: 5px;
min-width: 0;
}
.ve-audio-dropzone__copy strong {
color: var(--color-ink);
font-size: 18px;
}
.ve-audio-dropzone__copy span {
color: var(--color-ink-muted);
font-size: 13px;
line-height: 1.45;
}
.ve-audio-card {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 36px;
align-items: center;
gap: 14px;
padding: 14px;
border: 1px solid rgba(176, 136, 64, 0.32);
border-radius: 8px;
background: #fffefa;
}
.ve-audio-card audio {
display: none;
}
.ve-audio-card__play,
.ve-audio-card__remove {
display: inline-grid;
place-items: center;
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-claret);
cursor: pointer;
}
.ve-audio-card__play {
width: 48px;
height: 48px;
background: linear-gradient(180deg, var(--color-claret-bright), var(--color-claret));
color: #fffefa;
box-shadow: 0 10px 20px rgba(122, 31, 58, 0.18);
}
.ve-audio-card__play:disabled {
cursor: wait;
opacity: 0.58;
}
.ve-audio-card__remove {
width: 36px;
height: 36px;
}
.ve-audio-card__meta {
display: grid;
gap: 4px;
min-width: 0;
}
.ve-audio-card__meta > span {
color: var(--color-claret);
font-size: 11px;
font-weight: 800;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}
.ve-audio-card__meta strong {
overflow: hidden;
color: var(--color-ink);
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ve-audio-card__meta p {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
}
.ve-audio-card__meta p span,
.ve-audio-original span {
color: var(--color-ink-muted);
font-size: 12px;
}
.ve-audio-card__meta p span {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ve-audio-original {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: rgba(255, 254, 250, 0.72);
}
.ve-audio-original svg {
color: var(--color-claret);
}
.ve-audio-original div {
display: grid;
gap: 3px;
min-width: 0;
}
.ve-audio-original strong {
color: var(--color-ink);
font-size: 14px;
}
.ve-audio-original-button {
justify-self: start;
min-height: 36px;
padding: 7px 12px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-claret);
font-weight: 800;
cursor: pointer;
}
.ve-active-events {
display: grid;
gap: 14px;
}
.ve-event-summary-list {
display: grid;
gap: 12px;
}
.ve-event-card {
padding: 16px;
box-shadow: none;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.ve-event-card[draggable="true"] {
cursor: grab;
}
.ve-event-card.is-dragging {
opacity: 0.58;
transform: scale(0.995);
}
.ve-event-card.is-drag-over {
border-color: var(--color-claret);
background: rgba(122, 31, 58, 0.07);
box-shadow: 0 0 0 3px rgba(176, 136, 64, 0.16);
}
.ve-event-card__head {
display: flex;
align-items: center;
gap: 8px;
}
.ve-drag-handle {
display: inline-grid;
place-items: center;
width: 28px;
height: 32px;
flex: 0 0 auto;
border-radius: 8px;
color: var(--color-ink-muted);
cursor: grab;
}
.ve-drag-handle.is-disabled {
cursor: default;
opacity: 0.35;
}
.ve-event-card__head h3 {
margin: 0;
font-size: 16px;
}
.ve-event-card__summary {
flex: 1 1 auto;
min-width: 0;
}
.ve-event-card__summary p {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 5px 0 0;
color: var(--color-ink-muted);
font-size: 13px;
}
.ve-event-edit-panel {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--color-line);
}
.ve-event-card__head button,
.ve-icon-button {
min-height: 32px;
padding: 6px 10px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
color: var(--color-ink);
}
.ve-event-card__head button:disabled {
opacity: 0.45;
}
.ve-icon-button {
display: inline-grid;
place-items: center;
width: 34px;
padding: 0;
}
.ve-error {
margin: 0;
padding: 12px 14px;
border: 1px solid rgba(183, 49, 49, 0.24);
border-radius: 8px;
background: rgba(183, 49, 49, 0.08);
}
.ve-review-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.ve-review-card {
display: grid;
gap: 8px;
min-height: 110px;
padding: 14px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: #fffefa;
}
.ve-review-card span {
color: var(--color-ink-muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.ve-review-card strong {
color: var(--color-ink);
font-size: 16px;
}
.ve-review-card button {
justify-self: start;
align-self: end;
min-height: 30px;
padding: 5px 10px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-claret);
font-size: 12px;
font-weight: 800;
}
.ve-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
padding: 0 0 16px;
}
@media (max-width: 980px) {
.video-editor {
grid-template-columns: 1fr;
}
.video-editor__preview {
position: relative;
top: auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
height: auto;
}
.ve-preview-shell {
width: min(320px, 100%);
}
}
@media (max-width: 640px) {
.video-editor {
width: min(100vw - 24px, 1440px);
gap: 16px;
padding-top: 12px;
padding-bottom: 40px;
}
.ve-preview-shell {
width: min(280px, 100%);
}
.ve-header {
padding: 18px;
}
.ve-stepper,
.ve-side-toggle,
.ve-review-grid {
grid-template-columns: 1fr;
}
.ve-step {
min-height: 38px;
}
.ve-section {
padding: 16px;
}
.ve-section__head,
.ve-event-card__head {
flex-wrap: wrap;
}
.ve-fields,
.ve-extra-add,
.ve-image-upload,
.ve-image-upload.has-image,
.ve-audio-dropzone,
.ve-audio-card {
grid-template-columns: 1fr;
}
.ve-image-upload,
.ve-audio-dropzone {
align-items: stretch;
}
.ve-image-upload .btn,
.ve-audio-dropzone .btn {
width: 100%;
}
.ve-audio-card__play,
.ve-audio-card__remove {
width: 100%;
}
.ve-event-card__summary {
flex-basis: calc(100% - 28px);
}
}
.dashboard-page {
width: min(1180px, calc(100vw - 40px));
margin: 0 auto;
padding: 28px 0 72px;
}
.dashboard-page section {
padding: 0;
}
.dashboard-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 32px;
align-items: center;
padding: 24px 0 22px;
}
.dashboard-hero h1 {
margin: 4px 0 10px;
font-family: var(--font-display);
font-size: clamp(36px, 4.6vw, 62px);
line-height: 0.98;
}
.dashboard-hero p {
max-width: 690px;
margin-bottom: 0;
color: var(--color-ink-soft);
}
.dashboard-hero__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
align-self: center;
}
.dashboard-error {
margin-bottom: 16px;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 0 0 22px;
}
.dashboard-stat {
display: flex;
gap: 12px;
min-width: 0;
padding: 16px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: rgba(255, 253, 248, 0.84);
box-shadow: var(--shadow-sm);
}
.dashboard-stat svg {
flex: 0 0 auto;
color: var(--color-gold);
}
.dashboard-stat div {
min-width: 0;
}
.dashboard-stat strong {
display: block;
margin-bottom: 1px;
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
}
.dashboard-stat span {
display: block;
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
}
.dashboard-stat p {
margin: 3px 0 0;
color: var(--color-ink-muted);
font-size: 12px;
line-height: 1.35;
}
.dashboard-grid {
display: block;
}
.dashboard-main {
display: grid;
gap: 16px;
}
.dashboard-panel {
padding: 18px;
border: 1px solid var(--color-line);
border-radius: 8px;
background: rgba(255, 253, 248, 0.9);
box-shadow: var(--shadow-md);
}
.dashboard-render-section {
padding: 0;
}
.dashboard-panel--compact {
padding: 18px;
}
.dashboard-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.dashboard-panel__head h2 {
margin: 2px 0 0;
font-family: var(--font-display);
font-size: 34px;
line-height: 1.05;
}
.dashboard-panel__head > span,
.dashboard-panel__head > svg {
flex: 0 0 auto;
color: var(--color-ink-muted);
font-size: 12px;
font-weight: 700;
}
.dashboard-render-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.dashboard-render {
position: relative;
display: grid;
grid-template-rows: auto minmax(58px, auto) auto;
gap: 12px;
overflow: hidden;
padding: 10px;
border: 1px solid var(--color-gold-soft);
border-radius: 8px;
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.dashboard-render:hover {
transform: translateY(-2px);
border-color: var(--color-gold);
box-shadow: var(--shadow-md);
}
.dashboard-render.is-highlighted {
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(212, 168, 87, 0.14);
}
.dashboard-render--empty {
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto;
align-items: start;
min-height: 180px;
padding: 18px;
}
.dashboard-render--empty svg {
color: var(--color-gold);
}
.dashboard-render__preview {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 13;
border-radius: 6px;
background:
radial-gradient(circle at 50% 20%, rgba(212, 168, 87, 0.22), transparent 34%),
linear-gradient(145deg, var(--color-claret-deep), var(--color-ink));
}
.dashboard-render__preview video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: #111;
}
.dashboard-render__preview video::-webkit-media-controls-fullscreen-button,
.dashboard-video-modal video::-webkit-media-controls-fullscreen-button {
display: none;
}
.dashboard-render__placeholder {
display: grid;
place-items: center;
align-content: center;
gap: 12px;
height: 100%;
padding: 24px;
color: var(--color-gold-bright);
text-align: center;
}
.dashboard-render__placeholder span {
color: rgba(255, 253, 248, 0.82);
font-size: 13px;
font-weight: 700;
}
.dashboard-render__meta {
min-width: 0;
padding: 0 2px;
}
.dashboard-render h3 {
margin: 0;
overflow: hidden;
color: var(--color-ink);
font-size: 16px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-render p {
margin: 4px 0 0;
color: var(--color-ink-muted);
font-size: 14px;
line-height: 1.35;
}
.dashboard-status {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 5px 9px;
border-radius: 999px;
background: rgba(255, 253, 248, 0.9);
color: var(--color-ink-soft);
font-size: 12px;
font-weight: 700;
box-shadow: var(--shadow-sm);
text-transform: uppercase;
white-space: nowrap;
}
.dashboard-status--completed {
background: rgba(235, 249, 241, 0.94);
color: #1c845a;
}
.dashboard-status--failed,
.dashboard-status--timed_out {
background: rgba(255, 236, 238, 0.94);
color: var(--color-error);
}
.dashboard-render__error {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid rgba(150, 33, 51, 0.22);
border-radius: 999px;
background: rgba(255, 253, 248, 0.92);
color: var(--color-error);
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.dashboard-render__error:hover,
.dashboard-render__error[aria-expanded='true'] {
background: var(--color-error);
color: #fff;
}
.dashboard-render__fullscreen {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 253, 248, 0.42);
border-radius: 999px;
background: rgba(28, 20, 16, 0.62);
color: #fff;
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.dashboard-render__fullscreen:hover {
background: var(--color-claret);
}
.dashboard-render__actions {
display: flex;
align-items: center;
justify-content: stretch;
min-height: 44px;
}
.dashboard-render__actions .btn {
width: 100%;
min-height: 44px;
padding: 0 14px;
}
.dashboard-render__error-copy {
position: absolute;
top: 54px;
right: 10px;
left: 10px;
z-index: 5;
margin: 0;
padding: 10px 12px;
border-radius: 8px;
background: rgba(255, 253, 248, 0.96);
color: var(--color-error);
font-size: 13px;
line-height: 1.45;
box-shadow: var(--shadow-md);
}
.dashboard-spin {
animation: dashboard-spin 900ms linear infinite;
}
.dashboard-video-modal {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: 24px;
background: rgba(0, 0, 0, 0.9);
}
.dashboard-video-modal__frame {
width: min(92vw, calc(92vh * 9 / 16));
max-height: 92vh;
aspect-ratio: 9 / 16;
border-radius: 8px;
overflow: hidden;
background: #000;
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
}
.dashboard-video-modal__frame video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #000;
}
.dashboard-video-modal__close {
position: fixed;
top: 18px;
right: 18px;
z-index: 81;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
}
.dashboard-video-modal__close:hover {
background: rgba(255, 255, 255, 0.22);
}
@keyframes dashboard-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 920px) {
.dashboard-hero {
grid-template-columns: 1fr;
}
.dashboard-hero__actions {
justify-content: flex-start;
}
.dashboard-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.dashboard-page {
width: min(100vw - 24px, 1180px);
padding-top: 22px;
}
.dashboard-hero {
padding-top: 18px;
}
.dashboard-stats,
.dashboard-render-list {
grid-template-columns: 1fr;
}
.dashboard-render__meta,
.dashboard-panel__head {
align-items: start;
flex-direction: column;
}
}