/* ═══════════════════════════════════════════════════════════
IVAE Gallery — Design System
═══════════════════════════════════════════════════════════ */
/* Fonts loaded via in — NOT @import (which forces a CSS waterfall). */
:root {
/* ── "Light Editorial" redesign tokens (warm ivory, espresso counterpoint,
one thread of gold per viewport). Contrasts verified WCAG 2.1 AA. ── */
--c-bg: #faf8f5; /* warm off-white canvas (never pure #fff) */
--c-bg-raise: #ffffff; /* cards/inputs that float over ivory */
--c-bg-sink: #f2eee7; /* sunk sections / placeholders */
--c-bg-tint: #efeae1; /* subtle hover of light surfaces */
--c-ink-bg: #16130f; /* espresso: dark text on gold / dark bands */
--c-text: #1c1a17; /* warm near-black · serif titles (16.4:1 AAA) */
--c-text-body: #46423b; /* body (9.4:1 AAA) */
--c-text-soft: #6e685f; /* captions/meta (5.2:1 AA) */
--c-text-faint: #a39c90; /* decorative / disabled (never functional text) */
--c-accent: #c4a35a; /* gold scalpel: eyebrow, hairline, download CTA */
--c-accent-deep: #a8894a; /* legible gold text on ivory (≥24px) */
--c-accent-press: #97793e; /* pressed/active CTA */
--c-line: rgba(28,26,23,0.10);
--c-line-gold: rgba(196,163,90,0.42);
/* ── Legacy aliases — production components inherit the redesign palette. ── */
--ink: var(--c-text);
--ink2: var(--c-ink-bg);
--cream: var(--c-bg);
--sand: var(--c-bg-sink);
--gold: var(--c-accent);
--gold2: var(--c-accent-deep);
--slate: var(--c-text-soft); /* retoned warm — the old navy #5a6a7a clashed with the ivory/espresso system */
--muted: var(--c-text-soft);
--muted2: var(--c-text-faint);
--border: var(--c-line-gold);
--border-l: var(--c-line);
--danger: #b23b2e;
--success: #4f7a52;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Mobile/touch baseline — eliminate 300ms tap delay, smooth scrolling, no double-tap zoom on UI */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
button, a, [role="button"], .photo-cell, .photo-expand, .lightbox-nav,
.lightbox-close, .gt-icon, .gt-tab, .ss-btn, .ss-close, .gt-drop-btn,
.gt-drop-link, .photo-select, .scene-chip, .btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Syne', sans-serif;
font-weight: 400; /* Syne 400 is now loaded — don't inherit an absent weight (faux) */
background: var(--cream);
color: var(--ink);
line-height: 1.6;
min-height: 100vh; /* fallback */
min-height: 100dvh; /* iOS Safari: respect dynamic viewport (no jumps when toolbar shows/hides) */
-webkit-overflow-scrolling: touch;
overflow-x: hidden; /* guard full-bleed scene-nav breakout from leaking horizontal scroll on <360px */
}
/* ── TYPOGRAPHY ── */
h1, h2, h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
line-height: 1.15;
}
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(24px, 3.5vw, 38px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold2); }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold2);
}
.eyebrow::after {
content: ''; display: block; width: 36px; height: 1px;
background: var(--gold2); opacity: 0.55;
}
p { color: var(--muted); font-size: 14px; line-height: 1.85; }
/* ── LAYOUT ── */
.page { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.page-narrow { max-width: 480px; margin: 0 auto; padding: 40px 24px; }
/* ── HEADER ── */
.app-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(22,19,15,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 64px;
display: flex; align-items: center; justify-content: space-between;
}
.app-header .logo {
font-family: 'Syne', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--cream); text-decoration: none;
}
.app-header .logo span { color: var(--gold); }
.app-header nav { display: flex; align-items: center; gap: 20px; }
.app-header nav a {
font-size: 10px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(249,248,247,0.95); text-decoration: none;
text-shadow: 0 1px 3px rgba(0,0,0,0.45);
transition: color 0.25s;
}
.app-header nav a:hover { color: var(--cream); }
.header-user {
font-size: 11px; color: var(--gold);
font-weight: 500; letter-spacing: 0.05em;
}
body { padding-top: 64px; }
/* ── BUTTONS ── */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Syne', sans-serif;
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 16px 36px;
border: none; cursor: pointer;
border-radius: 4px;
text-decoration: none;
transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s;
}
.btn-gold {
/* WCAG AA fix: dark espresso text on gold (≈8.7:1), was ivory-on-gold (2.27:1 fail). */
background: var(--gold); color: var(--c-ink-bg);
border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold2); border-color: var(--gold2); color: var(--c-ink-bg); }
.btn-outline {
background: transparent; color: var(--gold);
border: 1px solid var(--border);
}
.btn-outline:hover { background: rgba(196,163,90,0.08); border-color: rgba(196,163,90,0.5); }
.btn-danger {
background: transparent; color: var(--danger);
border: 1px solid rgba(192,57,43,0.3);
}
.btn-danger:hover { background: rgba(192,57,43,0.08); }
.btn-sm { padding: 10px 20px; font-size: 9px; }
/* ── FORMS ── */
.form-group { margin-bottom: 24px; }
.form-label {
display: block; margin-bottom: 8px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--muted);
}
.form-input {
width: 100%; padding: 14px 16px;
font-family: 'Syne', sans-serif;
font-size: 14px; color: var(--ink);
background: white;
border: 1px solid var(--border-l);
border-radius: 4px;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,163,90,0.4); }
.form-input::placeholder { color: var(--muted2); }
select.form-input { cursor: pointer; }
textarea.form-input { min-height: 100px; resize: vertical; }
/* ── CARDS ── */
.card {
background: white;
border: 1px solid var(--border-l);
padding: 32px;
transition: border-color 0.3s;
}
.card:hover { border-color: var(--border); }
/* ── AUTH PAGES (Login/Register — Luxury Premium) ── */
.auth-page {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: white;
padding: 24px;
}
.auth-page body { padding-top: 0; }
.auth-card {
width: 100%; max-width: 420px;
padding: 48px 40px;
background: white;
border: none;
border-radius: 0;
}
.auth-logo {
text-align: center; margin-bottom: 40px;
}
.auth-logo a {
font-family: 'Syne', sans-serif;
font-size: 14px; font-weight: 700;
letter-spacing: 0.35em; text-transform: uppercase;
color: #1a1a1a; text-decoration: none;
}
.auth-logo a span { color: var(--gold); }
.auth-card h2 {
font-family: 'Cormorant Garamond', serif;
text-align: center;
color: #1a1a1a;
margin-bottom: 8px;
font-size: 32px; font-weight: 300;
letter-spacing: 0.5px;
}
.auth-subtitle {
text-align: center;
font-size: 12px;
color: #bbb;
margin-bottom: 36px;
letter-spacing: 0.3px;
}
.auth-card .form-label { color: #999; }
.auth-card .form-input {
background: #fafafa;
border: 1px solid #e8e8e8;
color: #333;
border-radius: 6px;
height: 48px;
font-size: 13px;
transition: background 0.35s cubic-bezier(.4,0,.2,1), border-color 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
}
.auth-card .form-input:focus {
background: #fff;
border-color: var(--gold2);
box-shadow: 0 0 0 4px rgba(196,163,90,0.4);
transform: translateY(-1px);
}
.auth-card .form-input::placeholder { color: #c5c5c5; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.auth-card .btn-gold {
background: var(--c-ink-bg); border-color: var(--c-ink-bg); color: white;
padding: 16px 36px; border-radius: 6px;
position: relative; overflow: hidden;
transition: background 0.4s cubic-bezier(.4,0,.2,1), border-color 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s cubic-bezier(.4,0,.2,1);
}
.auth-card .btn-gold::after {
content: '';
position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
transition: left 0.6s ease;
}
.auth-card .btn-gold:hover {
background: #2a2a2a; border-color: #2a2a2a;
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.auth-card .btn-gold:hover::after { left: 100%; }
.auth-link {
display: block; text-align: center;
margin-top: 24px;
font-size: 12px; color: #bbb;
}
.auth-link a {
color: #666; text-decoration: none; font-weight: 500;
transition: color 0.2s;
position: relative;
}
.auth-link a::after {
content: '';
position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
background: var(--gold2);
transition: width 0.3s ease;
}
.auth-link a:hover { color: #1a1a1a; }
.auth-link a:hover::after { width: 100%; }
.auth-error {
background: #fdf6f6;
border: 1px solid #f0dada;
color: #b91c1c;
padding: 12px 16px;
font-size: 12px;
margin-bottom: 20px;
border-radius: 6px;
display: none;
animation: authShake 0.4s ease;
}
.auth-error.show { display: block; }
@keyframes authShake {
0%,100% { transform: translateX(0); }
20%,60% { transform: translateX(-4px); }
40%,80% { transform: translateX(4px); }
}
.auth-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #16a34a;
padding: 12px 16px;
font-size: 12px;
margin-bottom: 20px;
border-radius: 6px;
display: none;
animation: authSlideIn 0.3s ease;
}
.auth-success.show { display: block; }
@keyframes authSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Social Login Buttons ── */
.social-login { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.social-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
font-family: 'Syne', sans-serif; text-decoration: none;
transition: background 0.3s cubic-bezier(.4,0,.2,1), border-color 0.3s cubic-bezier(.4,0,.2,1), transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1); cursor: pointer; border: 1px solid #e0e0e0;
}
.social-google { background: #fff; color: #3c4043; }
.social-google:hover {
background: #f8f9fa; border-color: #dadce0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transform: translateY(-1px);
}
.auth-divider {
display: flex; align-items: center; gap: 12px; margin: 28px 0;
}
.auth-divider::before, .auth-divider::after {
content: ''; flex: 1; height: 1px; background: #e5e5e5;
}
.auth-divider span {
font-size: 11px; color: #aaa; letter-spacing: 0.3px; font-family: 'Syne', sans-serif;
white-space: nowrap;
}
.forgot-link {
font-size: 12px; color: #999; text-decoration: none; font-family: 'Syne', sans-serif;
transition: color 0.2s;
}
.forgot-link:hover { color: var(--gold2); }
/* ── AUTH SPLIT SCREEN (White premium with animated gold accents) ── */
.auth-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand {
background: #fafaf8;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.auth-brand::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 25% 30%, rgba(196,163,90,0.07) 0%, transparent 55%),
radial-gradient(ellipse at 75% 65%, rgba(168,137,74,0.05) 0%, transparent 55%),
radial-gradient(ellipse at 50% 90%, rgba(196,163,90,0.04) 0%, transparent 50%);
animation: brandGlow 10s ease-in-out infinite alternate;
}
@keyframes brandGlow {
0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
50% { opacity: 1; transform: scale(1.06) rotate(0.5deg); }
100% { opacity: 0.6; transform: scale(1.02) rotate(-0.3deg); }
}
.auth-brand::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4a35a' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.6;
}
.auth-brand-content {
position: relative;
z-index: 2;
text-align: center;
animation: brandFadeIn 1s ease 0.3s both;
}
@keyframes brandFadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-brand-logo {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #1a1a1a;
}
.auth-brand-logo span { color: var(--gold2); }
.auth-brand-line {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold2), transparent);
opacity: 0.3;
margin: 24px auto;
animation: brandLineIn 1.2s ease 0.8s both;
}
@keyframes brandLineIn {
from { width: 0; opacity: 0; }
to { width: 40px; opacity: 0.3; }
}
.auth-brand-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 300;
font-style: italic;
color: #999;
letter-spacing: 1.5px;
}
.auth-brand-location {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #ccc;
margin-top: 12px;
}
.auth-side {
background: white;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-left: 1px solid rgba(0,0,0,0.04);
overflow-y: auto;
min-height: 0;
}
.auth-side .auth-card {
max-width: 380px;
width: 100%;
animation: authCardIn 0.6s ease 0.2s both;
}
@keyframes authCardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── STAT CARDS ── */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2px;
margin-bottom: 48px;
}
.stat-card {
background: white;
border: 1px solid var(--border-l);
padding: 28px 24px;
}
.stat-card .stat-n {
font-family: 'Cormorant Garamond', serif;
font-size: 42px; font-weight: 300;
color: var(--ink); line-height: 1;
}
.stat-card .stat-l {
font-size: 9.5px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin-top: 8px;
}
/* ── GALLERY GRID (cards — Pic-Time style) ── */
.gallery-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
}
.gallery-card {
background: white;
border: none;
border-radius: 0;
overflow: hidden;
text-decoration: none; color: inherit;
transition: box-shadow 0.3s, transform 0.3s;
display: block;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.gallery-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.gallery-card-img {
height: 260px;
background: #f0ede8;
overflow: hidden;
position: relative;
}
.gallery-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.gallery-card:hover .gallery-card-img img { transform: scale(1.03); }
.gallery-card-body { padding: 20px 22px; }
.gallery-card-title {
font-family: 'Syne', sans-serif;
font-size: 14px; font-weight: 700;
color: #1a1a1a; margin-bottom: 4px;
line-height: 1.3;
letter-spacing: -0.2px;
text-transform: uppercase;
}
.gallery-card-meta {
font-size: 11px; color: #bbb;
display: flex; gap: 16px;
letter-spacing: 0.2px;
}
.gallery-card-status {
display: inline-block;
font-size: 9px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
padding: 4px 10px;
margin-top: 10px;
}
.status-draft { background: var(--sand); color: var(--muted); }
.status-published { background: rgba(196,163,90,0.12); color: var(--gold2); }
.status-archived { background: rgba(110,104,95,0.1); color: var(--slate); }
/* ── GALLERY TOOLBAR (Pic-Time style) ── */
.gallery-toolbar {
position: sticky;
top: 0;
z-index: 90;
/* Installed PWA (standalone) sits under the status bar / notch — pad the sticky
toolbar so the clock/battery never overlaps the actions. 0 in a normal browser. */
padding-top: env(safe-area-inset-top, 0px);
/* Warm lino chrome — the calm, light counterpoint to the dark cover. */
background: color-mix(in srgb, var(--c-bg, #faf8f5) 96%, transparent);
backdrop-filter: saturate(1.04) blur(10px);
-webkit-backdrop-filter: saturate(1.04) blur(10px);
border-bottom: 1px solid var(--c-line, rgba(28,26,23,0.10));
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 56px;
}
.gt-left {
display: flex;
align-items: center;
gap: 28px;
}
/* "PHOTOS BY · IVAE" — author signature, tiny spaced caps */
.gt-credit {
font-family: 'Syne', sans-serif;
font-size: 8px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--c-text-faint, #a39c90);
line-height: 1.5;
white-space: nowrap;
}
.gt-credit strong {
display: block;
color: var(--c-text-soft, #6e685f);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.22em;
}
.gt-tabs {
display: flex;
gap: 26px;
height: 56px;
align-items: center;
}
/* Gallery / Shop in Cormorant ITALIC — editorial wedding-magazine chrome,
never shouting caps. Active = a single gold hairline underline. */
.gt-tab {
background: none;
border: none;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 19px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
color: var(--c-text-soft, #6e685f);
cursor: pointer;
padding: 0 1px 3px;
height: auto;
display: flex;
align-items: center;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.gt-tab:hover { color: var(--c-text, #1c1a17); }
.gt-tab.active {
color: var(--c-text, #1c1a17);
border-bottom-color: var(--c-accent, #c4a35a);
}
.gt-right {
display: flex;
align-items: center;
gap: 8px;
}
.gt-icon {
background: none;
border: none;
color: var(--c-text-soft, #6e685f);
cursor: pointer;
padding: 8px;
transition: color 0.2s;
display: flex;
align-items: center;
}
.gt-icon:hover { color: var(--c-text, #1c1a17); }
/* a11y: keyboard focus ring on the toolbar icon buttons (Download / Favorites /
Slideshow / Cart). a11y.css's focus-visible set omits .gt-icon, so without this
a keyboard user landing on these controls sees nothing. :focus-visible keeps
the ring keyboard-only (pointer users never see it). */
.gt-icon:focus-visible {
outline: 2px solid var(--c-accent, #c4a35a);
outline-offset: 2px;
border-radius: 4px;
color: var(--c-text, #1c1a17);
}
.gt-sep {
width: 1px;
height: 20px;
background: var(--c-line, rgba(28,26,23,0.10));
margin: 0 4px;
}
.gt-user {
display: flex;
align-items: center;
gap: 5px;
color: var(--c-text-soft, #6e685f);
padding: 8px 0 8px 8px;
}
.gt-user-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--c-text-soft, #6e685f);
}
/* Download dropdown */
.gt-icon-wrap { position: relative; }
.gt-dropdown {
display: none;
position: absolute;
top: calc(100% + 12px);
right: -40px;
background: #fff;
min-width: 300px;
box-shadow: 0 6px 30px rgba(0,0,0,0.12);
border-radius: 2px;
padding: 20px 0;
z-index: 100;
}
.gt-dropdown.open { display: block; }
.gt-drop-arrow {
position: absolute;
top: -8px;
right: 52px;
width: 16px;
height: 16px;
background: #fff;
transform: rotate(45deg);
box-shadow: -2px -2px 4px rgba(0,0,0,0.04);
}
.gt-drop-btn {
display: block;
width: 100%;
padding: 16px 28px;
background: #f5f5f3;
border: none;
font-family: 'Syne', sans-serif;
font-size: 14px;
color: #333;
cursor: pointer;
text-align: center;
margin: 8px auto;
max-width: calc(100% - 40px);
border-radius: 2px;
transition: background 0.2s;
}
.gt-drop-btn:hover { background: #eee; }
.gt-drop-note {
padding: 16px 28px 8px;
font-size: 13px;
color: #777;
line-height: 1.6;
}
.gt-drop-link {
background: none;
border: none;
padding: 4px 28px 8px;
font-family: 'Syne', sans-serif;
font-size: 13px;
color: #333;
font-weight: 600;
cursor: pointer;
}
.gt-drop-link:hover { text-decoration: underline; }
/* Preferences Modal */
.gt-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
}
.gt-modal {
background: #fff;
width: 520px;
max-width: 92vw;
padding: 48px 44px;
border-radius: 2px;
}
.gt-modal-title {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 500;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.gt-modal-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #ccc;
font-size: 11px;
color: #999;
cursor: help;
vertical-align: middle;
margin-left: 4px;
}
.gt-toggle-group {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #e8e8e8;
}
.gt-toggle-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.gt-toggle {
padding: 16px 12px;
background: #fff;
border: none;
border-right: 1px solid #e8e8e8;
font-family: 'Syne', sans-serif;
font-size: 13px;
color: #999;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.gt-toggle:last-child { border-right: none; }
.gt-toggle.active {
background: #f5f5f3;
color: #333;
font-weight: 500;
}
.gt-toggle:hover:not(.active) { background: #fafafa; }
.gt-toggle-disabled, .gt-toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.gt-toggle-disabled:hover { background: #fff; }
.gt-modal-continue {
display: block;
width: 100%;
margin-top: 36px;
padding: 18px;
background: var(--c-ink-bg);
color: #fff;
border: none;
font-family: 'Syne', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}
.gt-modal-continue:hover { background: var(--c-ink-bg); opacity: 0.92; }
@media (max-width: 600px) {
/* MOBILE TOOLBAR (99% of traffic) — the desktop toolbar packed credit + two
italic tabs + 4 icons + 2 separators + a user name into a no-wrap flex row.
On a 375px phone that summed past the viewport and forced HORIZONTAL SCROLL
(the wall stopped being full-bleed; the page slid sideways). Pic-Time's mobile
chrome is minimal, so we strip the row to essentials and harden it against any
overflow: the toolbar clips, children never grow, gaps tighten. */
.gallery-toolbar {
padding: 0 12px;
height: 48px;
gap: 8px;
overflow: hidden; /* belt: nothing can push the page sideways */
}
.gt-credit { display: none; }
/* Keep only the active "GALLERY" tab; SHOP is a dead/“coming soon” label that
just ate width. The single tab reads as the section title. */
.gt-tabs { gap: 0; height: 48px; flex: 0 1 auto; min-width: 0; }
.gt-tab:not(.active) { display: none; }
.gt-tab.active { font-size: 17px; }
.gt-left { gap: 0; min-width: 0; flex: 0 1 auto; overflow: hidden; }
/* Right cluster: let it shrink, tighten the icon gaps, drop one separator. */
.gt-right { gap: 2px; flex: 0 0 auto; }
.gt-sep { margin: 0 2px; }
.gt-sep:first-of-type { display: none; } /* one divider is enough on mobile */
/* User: keep the avatar icon, hide the name text (it overflowed at the edge). */
.gt-user { padding: 8px 0 8px 4px; }
.gt-user-name { display: none; }
.gt-dropdown { right: -8px; min-width: min(260px, calc(100vw - 24px)); }
}
/* ── GALLERY GRID WRAPPER (Pic-Time: capped width, breathing room) ── */
.gallery-grid-wrap {
/* FULL-BLEED (owner fix #1): the grid runs edge-to-edge, 100vw, zero side
gutters. No max-width cap, no horizontal padding — the photos go a sangre.
Only top/bottom breathing room. Mobile is canonical (99% of clients). */
width: 100%;
max-width: none;
margin: 0;
padding: 28px 0 64px; /* 0 left/right = full-bleed */
background: var(--c-bg, #faf8f5);
box-sizing: border-box;
/* SAFETY NET against the grid-collapse the owner saw: if the JS ever (re)renders
a transient empty grid, this reserves a full viewport of height so the page
can never snap to the ~594px "almost-empty" state. With photos present the
real row heights far exceed this, so it has no effect in the happy path. */
min-height: 80vh;
}
@media (min-width: 1024px) {
/* Desktop keeps full-bleed but a touch more top air. Still 0 side padding. */
.gallery-grid-wrap { padding: 40px 0 80px; }
}
/* ── PHOTO GRID (TRUE COLUMN MASONRY · Pic-Time / India-Earl) ──
BUG #1 FIX: the wall is built as balanced COLUMNS of photos at native aspect,
not justified rows. On a 375px phone that guarantees a clean 2-column masonry
with varied heights (the look the owner asked for) instead of the old
one-photo-per-full-width-row stack. justified-layout.js (masonryColumns) does
the shortest-column placement; the renderer writes the exact column width + gap
inline so the columns tile edge-to-edge, full-bleed, with no right-edge sliver. */
.photo-grid {
display: block;
width: 100%;
}
.masonry-wall {
display: flex;
align-items: flex-start; /* columns hang from the top, independent heights */
justify-content: center; /* center the tiled columns inside the full-bleed wrap */
width: 100%;
/* FALLBACK gutter only — the renderer writes the engine's exact gap inline
(wall.style.gap / col.style.gap), and that inline value always wins so the
rendered gutters match the width math exactly (full-bleed, owner fix #1). */
gap: 3px;
}
.masonry-col {
display: flex;
flex-direction: column;
flex: 0 0 auto; /* fixed width handed in inline by the renderer */
gap: 3px; /* fallback; renderer overrides inline */
min-width: 0;
}
.masonry-col .photo-cell { width: 100%; }
/* ── PRESENTATION MODES (Visual Storytelling) ──────────────────────────────────
'rows' = justified editorial bands (Pic-Time classic); 'story' = one large
photo per row. Both reuse .photo-cell (overflow:hidden + object-fit:cover); each
cell's box already matches the photo's native aspect, so "cover" never crops.
The renderer hands exact pixel widths/heights inline so rows tile full-bleed. */
.rows-wall { display: flex; flex-direction: column; width: 100%; }
.rows-row { display: flex; align-items: stretch; justify-content: flex-start; }
.rows-row:last-child { margin-bottom: 0 !important; }
.rows-row .photo-cell { flex: 0 0 auto; }
.story-wall { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.story-wall .photo-cell { width: 100%; max-width: 1200px; }
@media (min-width: 1024px) { .story-wall { gap: 12px; } }
/* PERF (off-screen layout/paint skip): a large wedding wall is 400-800 cells, all
built synchronously in one renderGrid() pass. content-visibility:auto lets the
browser skip layout + paint + decode for cells outside the viewport, cutting the
initial main-thread cost and scroll jank on low-end phones — without any JS,
IntersectionObserver, or change to client isolation / watermark / Workers / R2.
SAFE BECAUSE the renderer writes the cell's EXACT box: height is inline
(cell.style.height = displayHeight, gallery.html ~L1247) and width is 100% of the
column, so the laid-out size the browser remembers is correct → no scroll jump,
no CLS. contain-intrinsic-size only supplies a placeholder BEFORE first render;
`auto` then locks in the real measured size, so the 320px fallback never strands.
NON-STRANDING: content-visibility skips *rendering*, it never sets opacity:0. A
contained cell still has the base opacity:1 (owner fix #2) — when it scrolls into
view it paints normally and the fadeInUpSafe entrance plays as a flourish, exactly
like an in-viewport cell. iOS Safari < 18 ignores the property (graceful no-op). */
@media (max-width: 720px) {
.masonry-col .photo-cell {
content-visibility: auto;
contain-intrinsic-size: auto 320px;
}
}
/* Legacy justified-row rules kept as a no-JS / fallback safety net only. */
.justified-row {
display: flex;
flex-wrap: nowrap;
gap: 12px;
margin-bottom: 12px;
width: 100%;
}
.justified-row:last-child { margin-bottom: 0; }
.photo-cell {
position: relative;
overflow: hidden;
cursor: pointer;
/* Warm placeholder while the thumb loads (blur-up tone, never grey #f5). */
background: var(--c-bg-sink, #ece5d8);
border-radius: 0; /* photos always a sangre, no radius */
flex-shrink: 0;
}
.photo-cell img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
/* owner fix #2 ("las fotos deben verse"): the photo is VISIBLE BY DEFAULT.
opacity:1 baseline, no JS gate, no observer — so a cached / errored / late
thumb can NEVER be left blank or borrosa (the failure the owner reported).
The .is-loaded class is a pure flourish: it fades the warm placeholder out
UNDER an already-visible photo. If JS never adds it, the photo still shows.
The transform transition powers the gentle hover zoom only. */
opacity: 1;
transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}
/* Optional polish: until the thumb paints, the cell shows its warm placeholder
background through a faintly-soft image; once .is-loaded lands the photo is
crisp. This NEVER hides the photo — it only softens the first paint moment. */
.photo-cell:not(.is-loaded) img { filter: saturate(0.96); }
.photo-cell.is-loaded img { filter: none; }
/* Foto-forward hover: a whisper of zoom, only on real pointer devices. */
@media (hover: hover) and (pointer: fine) {
.photo-cell:hover img { transform: scale(1.035); }
}
/* Touch press feedback (99% mobile): a quick, subtle scale-down so a tap reads as
a deliberate press, not a dead spot. Scoped to no-hover so it never fights the
desktop hover zoom. */
@media (hover: none) {
.photo-cell:active img { transform: scale(0.985); transition: transform 0.12s ease; }
}
.photo-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0);
display: flex; align-items: flex-end; justify-content: space-between;
padding: 12px;
transition: background 0.25s;
z-index: 3; /* above the .selected gold wash (::after, z-index:2) so the heart stays tappable */
/* CLICKABILITY FIX (owner: "el boton EXPANDIR no abre el lightbox"):
the overlay is inset:0 over the WHOLE cell and was the LAST child at the
SAME z-index as .photo-expand → equal z-index + later in DOM made the
overlay win hit-testing and SWALLOW the expand button's click (and any
direct cell-tap target). Verified via document.elementFromPoint over the
expand button → it returned .photo-overlay, not the button. The overlay is
purely a visual scrim; only its .photo-select child is interactive. So the
scrim itself must be transparent to pointer events — its child re-enables
them below. This lets the expand button AND the cell tap receive clicks,
while the favorite heart stays fully clickable. No visual change. */
pointer-events: none;
}
/* Re-enable pointer events ONLY on the favorite heart — NOT the empty spacer
(overlay's first child), so a tap anywhere else on the cell still
bubbles to the cell handler and opens the lightbox. */
.photo-overlay .photo-select { pointer-events: auto; }
.photo-cell:hover .photo-overlay { background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 50%); }
/* Expand icon — a DESKTOP-HOVER affordance only (Pic-Time style).
On a hover-capable pointer it fades in over the cell; on TOUCH it is hidden
entirely (see the mobile block) because tapping the photo already opens the
lightbox, so a box-with-arrows icon stamped on every thumbnail is pure noise
— the busy, "horrible" wall the owner saw on mobile (99% of traffic). */
.photo-expand {
position: absolute; top: 8px; right: 8px;
width: 28px; height: 28px; border-radius: 4px;
background: rgba(255,255,255,0.92);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
border: none; color: #555;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity 0.2s;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
z-index: 3;
}
.photo-expand svg { width: 14px; height: 14px; }
/* Only ever reveal it on a real hover pointer — never auto-on. */
@media (hover: hover) and (pointer: fine) {
.photo-cell:hover .photo-expand { opacity: 1; }
.photo-expand:hover { background: white; color: #1a1a1a; }
}
.photo-select {
width: 36px; height: 36px;
border: none;
border-radius: 50%;
background: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
opacity: 0;
color: rgba(255,255,255,0.9);
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.photo-cell:hover .photo-select { opacity: 1; }
/* Selected state in GOLD (not Instagram-rosa) to match the editorial palette and
the gold cell outline below — one coherent "this is chosen" signal. The deep
gold reads clearly over photos; the drop-shadow keeps it legible on light shots. */
.photo-select.selected {
color: var(--gold, #c4a35a);
opacity: 1;
transform: scale(1.12);
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}
.photo-select:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
opacity: 1;
}
.photo-select svg { width: 22px; height: 22px; }
/* Selected cell: a clear, unmissable gold frame (3px inset) PLUS a soft warm wash
so the chosen photo reads as "picked" even between near-gapless mobile gutters
(the old 2px inset alone was easy to miss — the owner's proofing complaint). */
.photo-cell.selected {
outline: 3px solid var(--gold);
outline-offset: -3px;
}
.photo-cell.selected::after {
content: '';
position: absolute; inset: 0;
background: rgba(196,163,90,0.14);
pointer-events: none;
z-index: 2;
}
/* ── WATERMARK · GRID — ultra-subtle CORNER signature ──
Pic-Time rule (and owner's brief): NO giant centered badge. A whisper of a
signature in the bottom-right corner, barely visible, never covering the
photo. Admin still controls --wm-op; we cap the effective opacity low. */
.wm-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
pointer-events: none;
z-index: 2;
}
.wm-badge {
/* Match the ADMIN PREVIEW exactly: warm off-white translucent PLATE + dark
text, centered (Vianey: "se tiene que ver así"). NOT white text/no plate. */
background: rgba(250,248,245,0.86);
width: 55%;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
opacity: clamp(0.15, var(--wm-op, 0.3), 0.85);
text-align: center;
}
.wm-badge .wm-title {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-size: clamp(15px, 3.4vw, 32px);
font-weight: 300;
letter-spacing: 0.33em;
text-transform: uppercase;
color: #1c1a17;
line-height: 1;
}
.wm-badge .wm-sub {
font-family: 'Syne', 'Helvetica Neue', sans-serif;
font-size: clamp(8px, 1.4vw, 13px);
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #6e685f;
line-height: 1;
margin-top: 4px;
}
/* ── WATERMARK · LIGHTBOX — ultra-subtle CORNER signature ──
Owner's brief: NEVER the giant centered "IVAE STUDIOS" plate. The lightbox
mark is the same whisper-of-a-signature as the grid, parked in the
bottom-right corner over the open photo — never a 340px white badge that
covers the image. Admin still controls --wm-op; we hard-cap it low so it can
never blow up, even if a legacy gallery has a high stored opacity. */
.lightbox-wm {
position: absolute;
inset: 0;
display: flex;
align-items: center; /* big + centered per owner */
justify-content: center;
padding: clamp(14px, 4vw, 40px);
pointer-events: none;
z-index: 2;
}
.wm-badge-lg {
/* Same PLATE + dark-text design as the grid / admin preview, scaled up. */
background: rgba(250,248,245,0.86);
width: clamp(180px, 42%, 420px);
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
opacity: clamp(0.15, var(--wm-op, 0.3), 0.85);
}
.wm-badge-lg .wm-title {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-size: clamp(28px, 5vw, 58px);
font-weight: 300;
letter-spacing: 0.34em;
text-transform: uppercase;
color: #1c1a17;
line-height: 1;
}
.wm-badge-lg .wm-sub {
font-family: 'Syne', 'Helvetica Neue', sans-serif;
font-size: clamp(11px, 1.8vw, 18px);
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: #6e685f;
line-height: 1;
margin-top: 6px;
}
/* ── SCENE SECTION HEADERS (editorial chapter dividers) ── */
.scene-section-header {
display: flex;
align-items: center;
gap: 24px;
/* Generous air around the divider — Pic-Time never butts two scenes. */
padding: 56px clamp(16px, 5vw, 48px) 26px;
width: 100%;
}
.scene-section-line {
flex: 1;
height: 1px;
background: var(--c-line, rgba(28,26,23,0.10));
}
/* Chapter title in serif, mixed-case, not shouting caps. A whisper of gold? No —
keep it ink; the hairlines carry the structure. */
.scene-section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(20px, 3vw, 28px);
font-weight: 300;
color: var(--c-text, #1c1a17);
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
/* Now an
(a11y landmark) — restate the line-height the old
inherited from body so the header keeps the exact same height. */
line-height: 1.6;
margin: 0;
}
/* ── SELECTION BAR (Pic-Time style — clean white) ── */
.selection-bar {
position: fixed; bottom: 0; left: 0; right: 0;
background: white;
border-top: 1px solid #eee;
/* iOS safe-area: keep the Save/Clear buttons clear of the home indicator. */
padding: 14px 32px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
display: flex; align-items: center; justify-content: space-between;
z-index: 50;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(.25,0,.15,1);
box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
}
.selection-bar.show { transform: translateY(0); }
.selection-count {
color: #333;
font-size: 13px; font-weight: 500;
}
.selection-count strong { color: #1a1a1a; font-weight: 700; }
.selection-bar .btn { padding: 11px 24px; }
.selection-bar .btn-outline { border-color: #ddd; color: #888; }
.selection-bar .btn-outline:hover { border-color: #999; color: #333; background: #fafafa; }
/* Dark variant of the gold CTA — white text (the base .btn-gold now uses dark text on
gold, so this override MUST restate the light text for its dark background). */
.selection-bar .btn-gold { background: var(--c-ink-bg); border-color: var(--c-ink-bg); color: #fff; }
.selection-bar .btn-gold:hover { background: #333; border-color: #333; color: #fff; }
/* ── UPLOAD ZONE ── */
.upload-zone {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 60px 24px;
text-align: center;
cursor: pointer;
transition: border-color 0.3s, background 0.3s;
margin-bottom: 24px;
}
.upload-zone:hover, .upload-zone.dragover {
border-color: var(--gold);
background: rgba(196,163,90,0.04);
}
.upload-zone-icon {
width: 48px; height: 48px;
margin: 0 auto 16px;
color: var(--muted2);
}
.upload-zone-text {
font-size: 14px; color: var(--muted);
}
.upload-zone-text strong { color: var(--gold2); }
.upload-zone input[type="file"] { display: none; }
/* Upload progress */
.upload-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.upload-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: white; border: 1px solid var(--border-l);
border-radius: 4px;
font-size: 12px;
}
.upload-item-name { flex: 1; color: var(--ink); font-weight: 500; }
.upload-item-progress {
width: 120px; height: 4px;
background: var(--sand);
overflow: hidden;
}
.upload-item-bar {
height: 100%; background: var(--gold);
width: 0%; transition: width 0.3s;
}
.upload-item-status { font-size: 10px; color: var(--muted2); width: 60px; text-align: right; }
/* ── LIGHTBOX (Pic-Time style: clean white bg) ── */
.lightbox {
position: fixed; inset: 0;
/* SPEC: lightbox = pure black. The photo floats, all chrome recedes. */
background: #000;
z-index: 200;
display: none;
flex-direction: column;
animation: lbFadeIn 0.3s ease;
}
.lightbox.open { display: flex; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid rgba(250,248,245,0.10);
flex-shrink: 0;
}
.lightbox-topbar-left-wrap {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.lightbox-logo {
height: 22px;
max-width: 140px;
object-fit: contain;
display: block;
opacity: 0.92;
}
.lightbox-topbar-left {
font-family: 'Syne', sans-serif;
font-size: 10px; font-weight: 500;
letter-spacing: 0.5px; text-transform: uppercase;
color: rgba(250,248,245,0.55);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lightbox-topbar-right {
display: flex; align-items: center; gap: 14px;
}
.lightbox-body {
flex: 1;
display: flex; align-items: center; justify-content: center;
position: relative;
padding: 20px 60px;
overflow: hidden;
}
.lightbox-body img {
max-width: 100%; max-height: 100%;
object-fit: contain;
transform-origin: center center;
transition: transform 0.25s cubic-bezier(.4,0,.2,1);
cursor: zoom-in;
user-select: none;
-webkit-user-drag: none;
/* We fully own touch gestures (pinch/pan/swipe) in JS — stop the browser from
hijacking them with its own page pinch-zoom/scroll. Mobile is canonical. */
touch-action: none;
}
.lightbox-body img.zoomed { cursor: grab; transition: none; }
.lightbox-body img.loading-img { opacity: 0.4; filter: blur(4px); }
.lightbox-body { position: relative; }
.lightbox-body:has(img.loading-img)::after {
content: '';
position: absolute;
width: 32px; height: 32px;
border: 2px solid rgba(250,248,245,0.18);
border-top-color: var(--c-accent);
border-radius: 50%;
animation: lbSpin 0.8s linear infinite;
z-index: 3;
pointer-events: none;
}
@keyframes lbSpin { to { transform: rotate(360deg); } }
.lightbox-close {
width: 36px; height: 36px;
background: none; border: none;
color: rgba(250,248,245,0.55); cursor: pointer;
font-size: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.lightbox-close:hover { color: #faf8f5; background: rgba(250,248,245,0.08); }
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: none; border: none;
color: rgba(250,248,245,0.4); cursor: pointer;
font-size: 40px; width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
transition: color 0.15s;
z-index: 2;
}
.lightbox-nav:hover { color: #faf8f5; background: rgba(250,248,245,0.06); border-radius: 50%; }
.lightbox-nav:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 50%; color: #faf8f5; }
.lightbox-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-bottombar {
display: flex; align-items: center; justify-content: center;
gap: 12px;
padding: 14px 24px;
border-top: 1px solid rgba(250,248,245,0.10);
flex-shrink: 0;
}
.lightbox-bottombar .btn-sm {
font-size: 9px; padding: 9px 18px;
border-radius: 4px;
}
/* Light chrome on the black lightbox: outlined ghost buttons in ivory. */
.lightbox-bottombar .btn-outline {
border-color: rgba(250,248,245,0.30); color: rgba(250,248,245,0.82); background: transparent;
}
.lightbox-bottombar .btn-outline:hover { border-color: rgba(250,248,245,0.6); color: #faf8f5; background: rgba(250,248,245,0.06); }
/* Favorited state in the lightbox: gold (the one accent that passes on black). */
.lightbox-bottombar .btn-gold {
background: transparent; border-color: var(--c-accent); color: var(--c-accent);
}
.lightbox-bottombar .btn-gold:hover { background: rgba(196,163,90,0.12); border-color: var(--c-accent); color: var(--c-accent); }
.lightbox-dl-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 18px; font-family: 'Syne', sans-serif;
font-size: 9px; font-weight: 600; letter-spacing: 0.15em;
text-transform: uppercase; color: rgba(250,248,245,0.82); background: transparent;
border: 1px solid rgba(250,248,245,0.30); cursor: pointer; border-radius: 4px;
transition: background 0.2s, color 0.2s, border-color 0.2s; text-decoration: none;
}
.lightbox-dl-btn:hover { border-color: rgba(250,248,245,0.6); color: #faf8f5; background: rgba(250,248,245,0.06); }
.lightbox-dl-btn svg { width: 12px; height: 12px; }
/* ── CLIENTS TABLE ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
text-align: left; padding: 12px 16px;
font-size: 9.5px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--muted); border-bottom: 1px solid var(--border-l);
}
.data-table td {
padding: 14px 16px; font-size: 13px;
border-bottom: 1px solid var(--border-l);
color: var(--ink);
}
.data-table tr:hover td { background: rgba(196,163,90,0.03); }
/* ── EMPTY STATE ── */
.empty-state {
text-align: center;
padding: 80px 24px;
color: var(--muted2);
}
.empty-state h3 { color: var(--muted); margin-bottom: 8px; }
/* ── TOAST NOTIFICATIONS ── */
.toast {
position: fixed; top: 80px; right: 24px;
background: var(--ink);
color: var(--cream);
padding: 14px 24px;
font-size: 13px;
border-left: 3px solid var(--gold);
border-radius: 4px;
z-index: 300;
transform: translateX(120%);
transition: transform 0.4s cubic-bezier(.25,0,.15,1);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.toast.show { transform: translateX(0); }
/* ── PAGE HEADER ── */
.page-header {
display: flex; align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px; gap: 20px;
}
.page-header h1 { margin-top: 8px; }
/* ═══════════════════════════════════════════════════════════
ADMIN SIDEBAR LAYOUT
═══════════════════════════════════════════════════════════ */
.admin-layout {
display: grid;
grid-template-columns: 186px 1fr;
min-height: 100vh;
}
.admin-sidebar {
background: #f2f2f2;
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0;
width: 186px; z-index: 100;
overflow-y: auto;
}
.sidebar-logo {
padding: 20px 18px 16px;
}
.sidebar-logo a {
font-family: 'Syne', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: #333; text-decoration: none;
}
.sidebar-logo a span { color: var(--gold); }
.sidebar-nav { padding: 0; flex: 1; }
.sidebar-new-btn {
display: block;
padding: 12px 20px;
margin: 12px 14px 8px;
background: var(--c-ink-bg); color: white;
border-left: none;
text-align: center;
font-family: 'Syne', sans-serif;
font-size: 10px; font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
transition: background 0.2s;
}
.sidebar-new-btn:hover { background: #333; }
.sidebar-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 18px;
font-size: 13px; font-weight: 400;
color: #444;
text-decoration: none;
transition: color 0.2s, background 0.2s, border-color 0.2s;
border-left: 3px solid transparent;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar-link:hover { color: #111; background: rgba(0,0,0,0.03); }
.sidebar-link.active {
color: #111;
border-left-color: #333;
background: rgba(0,0,0,0.04);
font-weight: 600;
}
.sidebar-link svg { width: 16px; height: 16px; opacity: 0.5; }
.sidebar-link.active svg { opacity: 0.8; }
.sidebar-section {
padding: 14px 18px 6px;
font-size: 9px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: #bbb;
}
.sidebar-galleries { padding: 2px 0; overflow-y: auto; max-height: 300px; }
.sidebar-gallery-item {
display: block;
padding: 9px 18px;
font-size: 12px; color: #868686;
text-decoration: none;
transition: color 0.2s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-gallery-item:hover { color: #333; }
.sidebar-footer {
padding: 12px 18px;
border-top: 1px solid #ddd;
margin-top: auto;
}
.sidebar-user {
font-size: 11px; color: #666;
font-weight: 500; margin-bottom: 6px;
}
.sidebar-logout {
font-size: 10px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: #aaa;
text-decoration: none;
transition: color 0.2s;
}
.sidebar-logout:hover { color: #333; }
.admin-main {
padding: 40px 48px;
margin-left: 186px;
min-height: 100vh;
}
/* Mobile sidebar toggle */
.sidebar-toggle {
display: none;
position: fixed; top: 16px; left: 16px;
z-index: 200;
width: 40px; height: 40px;
background: var(--ink); border: 1px solid var(--border);
color: var(--cream); cursor: pointer;
align-items: center; justify-content: center;
font-size: 18px;
}
/* ═══════════════════════════════════════════════════════════
WIZARD LAYOUT (New Gallery)
═══════════════════════════════════════════════════════════ */
.wizard-layout {
display: grid;
grid-template-columns: 220px 1fr 360px;
min-height: 100vh;
}
/* Step sidebar */
.wizard-sidebar {
background: white;
border-right: 1px solid var(--border-l);
padding: 0;
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0;
width: 220px; z-index: 100;
}
.wizard-back {
display: flex; align-items: center; gap: 6px;
padding: 20px 24px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted); text-decoration: none;
transition: color 0.2s;
}
.wizard-back:hover { color: var(--ink); }
.wizard-back svg { width: 14px; height: 14px; }
.wizard-gallery-name {
padding: 0 24px 4px;
font-family: 'Syne', sans-serif;
font-size: 16px; font-weight: 700;
color: var(--ink);
}
.wizard-status {
padding: 0 24px 20px;
font-size: 11px; color: var(--muted2);
display: flex; align-items: center; gap: 6px;
}
.wizard-status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--muted2);
}
.wizard-status-dot.online { background: var(--success); }
.step-list {
list-style: none; padding: 0; margin: 0;
border-top: 1px solid var(--border-l);
}
.step-item {
display: block;
padding: 14px 24px;
font-size: 13px; color: var(--muted2);
cursor: pointer;
border-left: 2px solid transparent;
transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.step-item:hover { color: var(--ink); background: rgba(0,0,0,0.02); }
.step-item.active {
color: var(--ink); font-weight: 600;
border-left-color: var(--ink);
background: rgba(0,0,0,0.02);
}
.step-item.done { color: var(--muted); }
.step-item.done::before { content: '✓ '; color: var(--success); }
.wizard-continue {
margin-top: auto;
padding: 20px 24px;
}
.wizard-continue .btn { width: 100%; justify-content: center; }
/* Main form area */
.wizard-main {
padding: 40px 48px;
margin-left: 220px;
margin-right: 360px;
}
/* Cover preview panel */
.wizard-preview {
background: var(--sand);
border-left: 1px solid var(--border-l);
padding: 40px 24px;
position: fixed; top: 0; right: 0; bottom: 0;
width: 360px; overflow-y: auto;
}
.cover-frame {
background: white;
border: 1px solid var(--border-l);
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.cover-frame-desktop {
aspect-ratio: 16/10;
position: relative;
}
.cover-frame-mobile {
width: 120px; aspect-ratio: 9/16;
position: absolute; top: 16px; right: -20px;
border: 1px solid var(--border-l);
background: white;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
overflow: hidden;
}
.cover-frames {
position: relative;
margin-bottom: 32px;
}
/* Cover content inside frames */
.cover-inner {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.cover-inner.has-image { justify-content: flex-end; padding-bottom: 20%; }
.cover-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.7);
}
.cover-title {
font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-weight: 300;
color: var(--ink);
position: relative; z-index: 1;
}
.cover-inner.has-image .cover-title { color: white; font-size: 20px; }
.cover-subtitle {
font-size: 9px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--muted2);
margin-top: 4px;
position: relative; z-index: 1;
}
.cover-inner.has-image .cover-subtitle { color: rgba(255,255,255,0.7); }
.cover-date {
font-size: 10px; color: var(--gold);
margin-top: 8px;
position: relative; z-index: 1;
}
.cover-inner.has-image .cover-date { color: var(--gold); }
/* Mobile frame cover */
.cover-frame-mobile .cover-inner { padding: 16px 8px; }
.cover-frame-mobile .cover-title { font-size: 14px; }
.cover-frame-mobile .cover-subtitle { font-size: 7px; }
/* Cover templates */
.cover-templates-label {
font-size: 11px; color: var(--muted);
margin-bottom: 12px;
}
.cover-templates {
display: flex; gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 24px;
}
.cover-template {
flex: 0 0 80px; height: 56px;
border: 2px solid var(--border-l);
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s;
background: var(--cream);
display: flex; align-items: center; justify-content: center;
font-size: 8px; color: var(--muted2);
text-transform: uppercase; letter-spacing: 0.1em;
}
.cover-template:hover { border-color: var(--muted); }
.cover-template.active { border-color: var(--ink); }
/* Color picker */
.color-section { margin-top: 16px; }
.color-section-label {
font-size: 11px; color: var(--muted);
margin-bottom: 12px;
}
.color-swatches {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.color-swatch {
width: 100%; aspect-ratio: 1;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ink); }
/* Wizard step content */
.wizard-step { display: none; }
.wizard-step.active { display: block; }
/* ── LOADING STATES ── */
.btn.loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.btn.loading::after {
content: '';
position: absolute;
width: 16px; height: 16px;
top: 50%; left: 50%;
margin: -8px 0 0 -8px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
}
.btn-outline.loading::after { border-color: rgba(196,163,90,0.3); border-top-color: var(--gold); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Page loading overlay */
.page-loader {
position: fixed; inset: 0;
background: var(--cream);
display: flex; align-items: center; justify-content: center;
z-index: 500;
transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
}
.page-loader.fade-out { opacity: 0; pointer-events: none; }
.page-loader-spinner {
width: 24px; height: 24px;
border: 1.5px solid rgba(196,163,90,0.15);
border-top-color: var(--gold);
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
.auth-page .page-loader { background: white; }
.auth-page .page-loader-spinner { border-color: #e8e8e8; border-top-color: #999; }
.client-galleries-page .page-loader { background: white; }
.client-galleries-page .page-loader-spinner { border-color: #e8e8e8; border-top-color: var(--gold2); }
/* Skeleton loading for photo grid */
.skeleton {
background: linear-gradient(90deg, var(--sand) 25%, #e8e5e0 50%, var(--sand) 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.photo-cell.skeleton-cell {
background: none;
height: 220px;
}
.photo-cell.skeleton-cell:nth-child(2) { height: 280px; }
.photo-cell.skeleton-cell:nth-child(3) { height: 200px; }
.photo-cell.skeleton-cell:nth-child(4) { height: 260px; }
.photo-cell.skeleton-cell:nth-child(5) { height: 240px; }
.photo-cell.skeleton-cell:nth-child(6) { height: 300px; }
.photo-cell.skeleton-cell::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, var(--sand) 25%, #e8e5e0 50%, var(--sand) 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 2px;
}
.skeleton-cell {
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeletonShimmer 1.5s ease infinite;
}
@keyframes skeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── IMPROVED LIGHTBOX ── */
.lightbox-counter {
font-size: 11px; font-weight: 500;
letter-spacing: 0.1em;
/* WCAG AA: lift 0.5 -> 0.72 alpha for the 11px counter over the dark lightbox. */
color: rgba(250,248,245,0.72);
}
/* Keep BOTH the transform (zoom/pan, double-tap) AND the opacity (load fade)
transitions — the earlier rule (line ~1147) only set transform and this block
used to overwrite it with opacity-only, which killed the smooth zoom. When the
image is actively zoomed, img.zoomed sets transition:none so dragging the pan
never lags (that rule still wins by source order during a zoom session). */
.lightbox-body img {
transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}
.lightbox-body img.zoomed { transition: none; }
.lightbox-body img.loading-img {
opacity: 0.3;
}
/* Heart icon for favorites */
.photo-select svg.heart-icon {
width: 22px; height: 22px;
stroke-width: 2;
transition: transform 0.25s ease, fill 0.25s ease;
}
.photo-select.selected svg.heart-icon {
animation: heartPop 0.35s ease;
}
@keyframes heartPop {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* ── GALLERY CARD COUNT BADGE ── */
.gallery-card-img .card-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: linear-gradient(135deg, #ede8df 0%, #e0ddd5 100%);
color: var(--muted2);
}
.gallery-card-img .card-placeholder svg {
width: 32px; height: 32px; opacity: 0.3;
margin-bottom: 8px;
}
.gallery-card-img .card-placeholder span {
font-size: 9px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
opacity: 0.4;
}
.gallery-card-count {
position: absolute; bottom: 10px; right: 10px;
background: rgba(22,19,15,0.7);
backdrop-filter: blur(6px);
color: white;
font-size: 10px; font-weight: 500;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: 3px;
}
/* ── FADE IN ANIMATION ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 0.5s ease both;
}
.gallery-card { animation: fadeInUp 0.5s ease both; }
.gallery-card:nth-child(1) { animation-delay: 0.05s; }
.gallery-card:nth-child(2) { animation-delay: 0.1s; }
.gallery-card:nth-child(3) { animation-delay: 0.15s; }
.gallery-card:nth-child(4) { animation-delay: 0.2s; }
.gallery-card:nth-child(5) { animation-delay: 0.25s; }
.gallery-card:nth-child(6) { animation-delay: 0.3s; }
/* GRID-COLLAPSE FIX (bug #1, the owner's "se ve casi vacía" after ENTER GALLERY):
the photo wall was using `animation: fadeInUp 0.4s ease both` on every cell.
`animation-fill-mode: both` holds the cell at the `from` keyframe — opacity:0 —
until the animation actually runs to completion. CSS animations are THROTTLED /
PAUSED while the tab is backgrounded and during iOS Safari's scroll-momentum
reflow (exactly what ENTER GALLERY's scrollIntoView triggers), and a re-render
mid-flight restarts the animation from opacity:0. Any of those left a full,
correctly-sized grid of cells stranded INVISIBLE — 10 cells in the DOM, a blank
page on screen. Verified in the harness: cells=10, rows=6, heights correct,
zeroOpacity=10.
The wall is now VISIBLE BY DEFAULT (opacity:1, no transform offset). The entrance
is a pure, NON-STRANDING enhancement: it animates only the FIRST paint via a
`from`-only keyframe (fadeInUpSafe ends implicitly at the element's own opacity:1
/ transform:none), and we use `animation-fill-mode: none` so a paused/interrupted/
reduced-motion animation can NEVER hold the cell at opacity:0 — the worst case is
"the photo simply appears without a fade", never "the photo is hidden". */
.photo-cell {
opacity: 1; /* baseline: ALWAYS visible, never gated by animation */
/* fill-mode is INTENTIONALLY omitted (defaults to `none`). With `none`, a paused/
throttled/not-yet-started animation does NOT apply the `from` keyframe, so the
cell falls back to its base opacity:1 instead of being stranded invisible. The
keyframe also resolves to opacity:1, so the only observable difference vs the old
`both` is: a backgrounded tab shows the wall instantly (correct) rather than a
blank page. This is the actual fix for the grid-collapse the owner reported. */
animation: fadeInUpSafe 0.45s cubic-bezier(.22,1,.36,1);
}
/* The safe entrance: a brief lift that RESOLVES to the element's own values. Crucially
it never carries a fill-mode, so it can only ever be a flourish ON TOP of an
already-visible cell — it can never hide one. */
@keyframes fadeInUpSafe {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.photo-cell:nth-child(1) { animation-delay: 0.02s; }
.photo-cell:nth-child(2) { animation-delay: 0.04s; }
.photo-cell:nth-child(3) { animation-delay: 0.06s; }
.photo-cell:nth-child(4) { animation-delay: 0.08s; }
.photo-cell:nth-child(5) { animation-delay: 0.1s; }
.photo-cell:nth-child(6) { animation-delay: 0.12s; }
.photo-cell:nth-child(7) { animation-delay: 0.14s; }
.photo-cell:nth-child(8) { animation-delay: 0.16s; }
/* HARD BACKSTOP: if the user prefers reduced motion (or the UA throttles the
animation while hidden), drop the entrance entirely so nothing can strand the
cell at opacity:0. The wall is shown instantly — the correct, accessible default. */
@media (prefers-reduced-motion: reduce) {
.photo-cell { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* When JS has marked a cell loaded, it is unconditionally visible regardless of the
animation's state — a second belt against the invisible-grid failure. */
.photo-cell.is-loaded { opacity: 1; }
/* ── PASSWORD VALIDATION ── */
.password-match {
font-size: 11px; margin-top: 6px;
transition: color 0.2s, opacity 0.2s;
}
.password-match.match { color: var(--success); }
.password-match.no-match { color: var(--danger); }
.password-strength {
height: 3px; margin-top: 8px;
background: #f0f0f0;
overflow: hidden;
border-radius: 2px;
}
.password-strength-bar {
height: 100%;
width: 0%;
transition: width 0.3s, background 0.3s;
}
.password-strength-bar.weak { width: 33%; background: var(--danger); }
.password-strength-bar.medium { width: 66%; background: var(--gold); }
.password-strength-bar.strong { width: 100%; background: var(--success); }
/* ── EMPTY STATE IMPROVED ── */
.empty-state svg {
width: 48px; height: 48px;
color: var(--muted2);
opacity: 0.4;
margin-bottom: 16px;
}
/* ── SELECTION BAR IMPROVED ── */
.selection-bar .btn-save {
background: transparent;
color: var(--gold);
border: 1px solid var(--border);
font-family: 'Syne', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
padding: 10px 20px;
cursor: pointer;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.selection-bar .btn-save:hover {
background: rgba(196,163,90,0.1);
border-color: var(--gold);
}
/* ── AUTO-SAVE INDICATOR ── */
.autosave-indicator {
/* Sits BELOW the toast (also top:80px/right:24px, z-index:300) so the green
"Saved" confirmation never stacks on the same pixel as a toast message.
safe-area keeps it clear of the iOS notch. */
position: fixed; top: max(124px, calc(env(safe-area-inset-top, 0px) + 108px)); right: 24px;
font-size: 11px;
color: var(--success);
display: flex; align-items: center; gap: 6px;
opacity: 0; transition: opacity 0.3s;
z-index: 150;
}
.autosave-indicator.show { opacity: 1; }
.autosave-indicator svg { width: 14px; height: 14px; }
/* ═══════════════════════════════════════════════════════════
GALLERY COVER — Pic-Time cinematic fullscreen (client view)
───────────────────────────────────────────────────────────
Owner's 3 mandatory fixes:
(1) FULL-BLEED: photo a sangre, 100vw, zero side margin.
(2) Photo visible (handled in grid + the cover img reveals on load).
(3) Couple name CENTERED in the upper-middle third, NOT at the bottom.
Warm espresso field, serif-light name, one gold gesture (rule + "&").
─────────────────────────────────────────────────────────── */
.gallery-hero,
.gallery-hero-design,
.cover {
position: relative;
width: 100vw; /* full-bleed — no side gutters */
max-width: 100%;
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100svh; /* absorb iOS Safari URL bar */
overflow: hidden;
isolation: isolate;
background: #14110d; /* warm espresso under the photo, never #000 */
display: block;
}
/* ── Layer 1 · FULL-BLEED PHOTO (Ken Burns) ── */
.cover__media {
position: absolute;
inset: 0;
z-index: 0;
}
.cover__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 38%; /* faces sit a touch high; JS injects focal % */
/* Photo reveal + slow Ken Burns drift. The image fades in (fix #2) and
then drifts imperceptibly — cinematic, never static. */
opacity: 0;
transform: scale(1.04);
animation:
coverImgReveal 1100ms cubic-bezier(0.22,1,0.36,1) 60ms forwards,
coverKen 16000ms cubic-bezier(0.33,0,0.20,1) 200ms forwards;
will-change: transform, opacity;
}
.cover__img--placeholder {
opacity: 1;
animation: none;
background: linear-gradient(180deg,#2a211a 0%,#1a140f 60%,#14110d 100%);
}
@keyframes coverImgReveal { to { opacity: 1; } }
/* Backstop (owner fix #2): once the photo has loaded, JS adds .is-shown. This
guarantees the cover is visible even if the reveal animation is blocked —
the Ken Burns drift still runs, the photo is simply never left at opacity:0. */
.cover__img.is-shown { opacity: 1; }
@keyframes coverKen {
from { transform: scale(1.02) translateY(0); }
to { transform: scale(1.09) translateY(-1.4%); }
}
/* Directional scrim: soft top → denser bottom, plus a gentle top wash so the
centered name always reads. Keeps the photo bright in the middle. */
.cover__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(20,17,13,0.42) 0%,
rgba(20,17,13,0.12) 26%,
rgba(20,17,13,0.10) 52%,
rgba(20,17,13,0.34) 78%,
rgba(20,17,13,0.72) 100%);
}
.cover__vignette {
position: absolute;
inset: 0;
background: radial-gradient(130% 100% at 50% 40%, transparent 50%, rgba(12,10,7,0.55) 100%);
mix-blend-mode: multiply;
opacity: 0.9;
}
/* ── Layer 2 · CONTENT — name centered in the upper-middle third (fix #3) ── */
.cover__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
/* Pull the block into the upper-middle: above optical center, never bottom. */
justify-content: center;
padding-top: 6vh; /* nudge toward the upper third */
padding-bottom: 18vh; /* leaves room for the ENTER cue below */
padding-left: clamp(1.25rem, 6vw, 3.5rem);
padding-right: clamp(1.25rem, 6vw, 3.5rem);
text-align: center;
}
.cover__text {
width: 100%;
max-width: 22ch;
display: flex;
flex-direction: column;
align-items: center;
}
/* The single gold gesture — a short hairline above the eyebrow */
.cover__rule {
display: block;
width: 40px;
height: 1px;
background: var(--c-accent);
margin-bottom: 22px;
transform-origin: center;
animation: coverRise 1100ms cubic-bezier(0.22,1,0.36,1) 560ms both;
}
/* Eyebrow = the date, spaced caps in the UI sans */
.cover__eyebrow {
margin: 0 0 18px;
font-family: 'Syne', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(247,243,236,0.74);
line-height: 1;
text-indent: 0.42em; /* compensate the tracking so it stays centered */
animation: coverRise 1100ms cubic-bezier(0.22,1,0.36,1) 680ms both;
}
/* Couple name — serif LIGHT, mixed-case, the typographic heroine */
.cover__title {
margin: 0;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-weight: 300;
font-size: clamp(2.75rem, 13vw, 6.5rem);
line-height: 1.0;
letter-spacing: 0.005em;
color: #f7f3ec; /* warm ivory, never pure white */
text-shadow: 0 1px 30px rgba(0,0,0,0.32);
text-wrap: balance;
}
.cover__name-line {
display: block;
/* LCP: the couple's name is the hero's largest text. Keep the editorial fade-up
but start it almost immediately (120/240ms stagger, was 760/900ms) so the name
is not an empty hole for >1.5s on slow mobile. */
animation: coverRise 1100ms cubic-bezier(0.22,1,0.36,1) 120ms both;
}
.cover__name-line:last-child { animation-delay: 240ms; }
/* The ampersand — italic, smaller, gold: the bisagra that joins two names */
.cover__amp {
display: block;
font-style: italic;
font-weight: 400;
font-size: 0.42em;
line-height: 1.1;
color: var(--c-accent);
margin: 0.04em 0;
animation: coverRise 1100ms cubic-bezier(0.22,1,0.36,1) 180ms both;
}
/* Optional description — small serif italic under the name. Balance the wrap so
a venue like "Dreams Natura Resort & Spa" never orphans the "&"/last word on
its own line (the parent .cover__text caps width tight for the name). */
.cover__place {
margin: 18px 0 0;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1rem, 3.6vw, 1.2rem);
letter-spacing: 0.03em;
color: rgba(247,243,236,0.74);
line-height: 1.4;
max-width: 34ch;
text-wrap: balance;
animation: coverRise 1100ms cubic-bezier(0.22,1,0.36,1) 320ms both;
}
@keyframes coverRise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cover__img {
animation: none;
opacity: 1;
transform: none;
}
.cover__rule, .cover__eyebrow, .cover__name-line, .cover__amp, .cover__place {
animation: none;
}
}
/* ── TRANSPARENT HEADER (gallery view) ── */
.app-header-transparent {
background: transparent;
backdrop-filter: none;
border-bottom: none;
position: absolute;
z-index: 10;
}
/* ═══════════════════════════════════════════════════════════
CLIENT GALLERIES PAGE (Pic-Time inspired)
═══════════════════════════════════════════════════════════ */
.client-galleries-page {
background: #fff;
padding-top: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.client-header {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 40px; height: 56px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.client-header-logo {
font-family: 'Syne', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 0.3em; text-transform: uppercase;
color: #1a1a1a; text-decoration: none;
}
.client-header-logo span { color: var(--gold2); }
.client-header-nav {
display: flex; align-items: center; gap: 20px;
}
.client-header-user {
font-size: 11px; color: #999; font-weight: 500;
letter-spacing: 0.02em;
}
.client-header-logout {
font-size: 9px; font-weight: 600;
letter-spacing: 0.15em; text-transform: uppercase;
color: #aaa; text-decoration: none;
transition: color 0.2s;
}
.client-header-logout:hover { color: #666; }
.client-main {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 40px 60px;
}
.client-hero {
text-align: center;
padding: 64px 24px 52px;
position: relative;
}
.client-hero-eyebrow {
font-size: 9px; font-weight: 600;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--gold2);
margin-bottom: 14px;
animation: heroFadeIn 0.6s ease 0.1s both;
}
.client-hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: 48px; font-weight: 300;
color: #1a1a1a;
margin-bottom: 12px;
letter-spacing: 1.5px;
animation: heroFadeIn 0.6s ease 0.2s both;
}
.client-hero-sub {
font-size: 13px; color: #999;
letter-spacing: 0.3px;
animation: heroFadeIn 0.6s ease 0.3s both;
}
@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Client Gallery Grid ── */
.client-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 32px;
}
.cl-card {
display: block;
text-decoration: none; color: inherit;
border-radius: 0;
overflow: visible;
background: transparent;
transition: transform 0.5s cubic-bezier(.4,0,.2,1);
animation: clCardIn 0.7s ease both;
}
@keyframes clCardIn {
from { opacity: 0; transform: translateY(30px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-card:hover {
transform: translateY(-6px);
}
.cl-card-img {
position: relative;
height: 300px;
background: #f5f3f0;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transition: box-shadow 0.5s ease;
}
.cl-card:hover .cl-card-img {
box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
.cl-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(.25,.46,.45,.94);
}
.cl-card:hover .cl-card-img img {
transform: scale(1.06);
}
.cl-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(15,15,15,0) 100%);
display: flex; align-items: center; justify-content: center;
transition: background 0.5s ease;
}
.cl-card:hover .cl-card-overlay {
background: linear-gradient(180deg, transparent 20%, rgba(15,15,15,0.35) 100%);
}
.cl-card-view {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.4,0,.2,1);
font-size: 9px; font-weight: 600;
letter-spacing: 0.25em; text-transform: uppercase;
color: #fff;
padding: 12px 28px;
border: 1px solid rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
background: rgba(255,255,255,0.06);
}
.cl-card:hover .cl-card-view {
opacity: 1;
transform: translateY(0);
}
.cl-card-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f5f3f0 0%, #ede8df 100%);
color: #ccc;
}
.cl-card-body {
padding: 22px 4px 8px;
}
.cl-card-title {
font-family: 'Cormorant Garamond', serif;
font-size: 22px; font-weight: 400;
color: #1a1a1a;
letter-spacing: 0.5px;
margin-bottom: 8px;
transition: color 0.3s;
}
.cl-card:hover .cl-card-title { color: var(--gold2); }
.cl-card-meta {
display: flex; align-items: center; gap: 12px;
font-size: 11px; color: #bbb;
letter-spacing: 0.2px;
}
.cl-card-badge {
font-size: 9px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: #ccc;
padding: 3px 0;
border-left: 1px solid #e5e5e5;
padding-left: 12px;
}
/* ── Client Empty State ── */
.client-empty {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
text-align: center;
}
.client-empty-icon {
color: #ddd;
margin-bottom: 20px;
}
.client-empty h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-weight: 300;
color: #999;
margin-bottom: 8px;
}
.client-empty p {
font-size: 13px; color: #ccc;
}
/* ── Client Footer ── */
.client-footer {
text-align: center;
padding: 40px 24px 32px;
border-top: 1px solid #f0f0f0;
margin-top: auto;
}
.client-footer-logo {
font-family: 'Syne', sans-serif;
font-size: 9px; font-weight: 700;
letter-spacing: 0.25em; text-transform: uppercase;
color: #aaa;
}
.client-footer-logo span { color: var(--gold2); opacity: 0.6; }
.client-footer-text {
font-size: 11px; color: #e0e0e0;
margin-top: 6px;
letter-spacing: 0.3px;
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.gallery-grid-wrap { padding: 24px 0 56px; } /* keep full-bleed on tablet */
.gallery-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.client-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.cl-card-img { height: 240px; }
.client-main { padding: 0 24px 48px; }
}
@media (max-width: 767px) {
.app-header { padding: 0 12px; height: 52px; }
.app-header .logo { font-size: 10px; letter-spacing: 0.2em; }
.app-header nav { gap: 12px; }
.app-header nav a { font-size: 11px; letter-spacing: 0.1em; }
.header-user { font-size: 9px; }
.page, .page-narrow { padding: 24px 16px; }
/* iOS Safari auto-zooms (and never zooms back) on any focused control whose
font-size is < 16px. Every client + email-gate input was 13–14px, so the
primary device zoomed in on focus — disorienting on the 99% path. Force the
16px floor on mobile only (desktop keeps its tighter premium proportions). */
.form-input,
textarea.form-input,
select.form-input,
.email-gate-modal input,
.email-gate-modal textarea { font-size: 16px; }
.auth-card .form-input { font-size: 16px; }
.auth-card { padding: 36px 24px; }
.auth-split { grid-template-columns: 1fr; }
.auth-brand { display: none; }
.auth-side { padding: 24px; border-left: none; }
/* Touch: tapping the cell opens the lightbox, so hide the redundant expand box
entirely — keeps the masonry wall clean (the owner's mobile complaint). */
.photo-expand { display: none; }
.gallery-cards { grid-template-columns: 1fr; gap: 16px; }
.gallery-card-img { height: 220px; }
/* Fallback mobile gutter (no-JS). JS overrides inline with the engine's 3px. */
.justified-row { gap: 3px; margin-bottom: 3px; } /* near-gapless, a sangre */
.gallery-grid-wrap { padding: 18px 0 40px; } /* full-bleed: 0 sides */
.photo-select { opacity: 1; }
.page-header { flex-direction: column; align-items: flex-start; }
.stats-grid { grid-template-columns: 1fr 1fr; }
/* Stack the bar on mobile and let the action buttons fill the row so two
long CTAs ("Download Selected" + "Submit Final Selections") never squeeze
or overflow at 375px (99% of traffic). The count sits on its own line. */
.selection-bar {
flex-direction: column; align-items: stretch;
gap: 10px; padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.selection-count { text-align: center; }
.selection-bar > div { display: flex; gap: 10px; width: 100%; }
.selection-bar > div .btn { flex: 1 1 0; padding: 13px 12px; white-space: nowrap; }
.data-table { font-size: 12px; }
.data-table th, .data-table td { padding: 10px 8px; }
/* Cover stays full-bleed cinematic on mobile — name centered/upper-third. */
.gallery-hero, .gallery-hero-design, .cover {
min-height: 100vh; min-height: 100svh; padding: 0;
}
.cover__content { padding-top: 4vh; padding-bottom: 16vh; }
.lightbox-body { padding: 20px 56px; }
/* WCAG: 44×44 minimum tap target on mobile */
.lightbox-nav { font-size: 28px; width: 48px; height: 48px; }
.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }
/* iOS notch: viewport-fit=cover lets the topbar slide under the notch/status bar
and the bottombar under the home indicator. Pad both bars by the safe-area
insets so the Close/counter and the Favorite/Download controls stay tappable
and visible on notched iPhones (the 99% device). max() keeps the base 12/14px. */
.lightbox-topbar {
padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
}
.lightbox-bottombar {
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.lightbox-close { width: 44px; height: 44px; font-size: 28px; }
/* The counter text ("3 / 12 photos") is set as plain textContent (no inner
span), so the old `span{display:none}` rule was dead. Instead, keep the
counter compact and let the filename (topbar-left) ellipsize so nothing
overflows the narrow topbar at 375px. */
.lightbox-counter { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0; }
.lightbox-topbar-left { font-size: 9px; }
/* Toolbar icon hit area */
.gt-icon { padding: 10px; min-width: 44px; min-height: 44px; }
.gt-tab { padding: 12px 14px; min-height: 44px; }
/* WCAG tap target on mobile (99% of traffic) — was 36px. */
.photo-select { width: 44px; height: 44px; }
.photo-select svg { width: 20px; height: 20px; }
/* Expand box stays hidden on touch (the cell tap opens the lightbox); kept
out of the way so the wall reads as clean photos, not stamped icons. */
.photo-expand { display: none; }
/* Client galleries mobile */
.client-header { padding: 0 16px; height: 50px; }
.client-header-logo { font-size: 10px; letter-spacing: 0.2em; }
.client-header-nav { gap: 12px; }
.client-main { padding: 0 16px 36px; }
.client-hero { padding: 36px 16px 28px; }
.client-hero-title { font-size: 30px; }
.client-gallery-grid { grid-template-columns: 1fr; gap: 24px; }
.cl-card-img { height: 220px; }
.cl-card-view { opacity: 1; transform: translateY(0); }
.cl-card-overlay { background: rgba(22,19,15,0.08); }
/* Admin sidebar mobile */
.admin-layout { grid-template-columns: 1fr; }
.admin-sidebar { transform: translateX(-100%); transition: transform 0.3s; width: 186px; }
.admin-sidebar.open { transform: translateX(0); }
.admin-main { margin-left: 0; padding: 24px 16px; padding-top: 64px; }
.sidebar-toggle { display: flex; }
/* Wizard mobile */
.wizard-layout { grid-template-columns: 1fr; }
.wizard-sidebar { position: relative; width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-l); }
.wizard-sidebar { position: sticky; top: 0; z-index: 50; }
.wizard-back, .wizard-gallery-name, .wizard-status, .wizard-continue { display: none; }
.step-list { display: flex; border-top: none; }
.step-item { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; padding: 14px 16px; font-size: 11px; }
.step-item.active { border-bottom-color: var(--ink); border-left-color: transparent; }
.wizard-main { margin-left: 0; margin-right: 0; padding: 24px 16px; }
.wizard-preview { position: relative; width: 100%; padding: 24px 16px; border-left: none; border-top: 1px solid var(--border-l); }
}
/* (justified-row layout adapts via JS targetRowHeight; no column-count fallback) */
/* ═══════════════════════════════════════════════════════════
ENTER GALLERY CTA (cinematic landing — Pic-Time style)
═══════════════════════════════════════════════════════════ */
.enter-gallery-cta {
position: absolute;
bottom: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 18px 42px;
/* QA-fix 2026-06-22: a translucent dark scrim + text-shadow so the CTA stays
legible on LIGHT covers (was transparent + near-white text = invisible, WCAG AA fail). */
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.6);
color: #ffffff;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
text-decoration: none;
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.enter-gallery-cta:hover {
background: rgba(255,255,255,0.92);
color: #1a1a1a;
border-color: rgba(255,255,255,0.92);
transform: translateX(-50%) translateY(-2px);
}
/* Solid-ink CTA over LIGHT cover fields (classic/album/masthead/panel + custom
light bg) — the translucent scrim read as a dirty grey slab on cream.
.cover-light is set at runtime by tuneCoverCta() (gallery.html), which
samples what actually sits under the button. */
.cover-light .enter-gallery-cta {
background: #1A1410;
border-color: #1A1410;
color: #F3ECE4;
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cover-light .enter-gallery-cta:hover {
background: #33291F;
border-color: #33291F;
color: #F3ECE4;
}
.enter-gallery-cta-text { display: block; }
.enter-gallery-cta-arrow {
width: 18px;
height: 18px;
stroke-width: 1.5;
opacity: 0.85;
will-change: transform;
animation: ctaBounce 2.4s ease-in-out infinite;
}
/* GPU-only bounce (transform, no opacity) — avoids repaint flicker on low-end mobile. */
@keyframes ctaBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
.enter-gallery-cta-arrow { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
SCENE NAVIGATION (sticky chip bar)
═══════════════════════════════════════════════════════════ */
.scene-nav {
position: sticky;
/* Sit FLUSH below the sticky gallery toolbar. The toolbar is 56px tall on
desktop (.gallery-toolbar height:56px) and 48px on mobile (overridden below),
so the chip bar must dock at exactly those values — the old 52px desktop
value let the toolbar's bottom hairline overlap the chips by 4px. */
top: 56px;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 18px 24px;
margin: 0 0 28px; /* grid-wrap is already full-bleed (0 side padding) */
background: color-mix(in srgb, var(--c-bg, #faf8f5) 94%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--c-line);
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch; /* momentum scroll for the chapter chips on iOS */
scrollbar-width: none;
-ms-overflow-style: none;
}
.scene-nav::-webkit-scrollbar { display: none; }
.scene-nav:empty { display: none; }
/* Light Editorial chip: no pill — a single gold underline marks the active scene.
NOTE: the redesign source ships `.scene-nav { display:none !important }` (it swaps
chips for chapter covers). Production keeps the functional chip bar, so that rule
is intentionally NOT imported here — state lives in `.active`, never `!important`. */
.scene-chip {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* WCAG tap target */
padding: 8px 16px;
background: transparent;
border: none;
font-family: 'Syne', sans-serif;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-text-faint);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
scroll-snap-align: start;
transition: color 0.2s ease;
}
.scene-chip::after {
content: '';
position: absolute;
bottom: 4px; left: 16px; right: 16px;
height: 2px;
background: var(--c-accent);
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.26s cubic-bezier(0.22,1,0.36,1);
}
.scene-chip:hover { color: var(--c-text-soft); }
.scene-chip.active { color: var(--c-text); font-weight: 700; }
.scene-chip.active::after { transform: scaleX(1); }
.scene-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(196,163,90,0.18);
border-radius: 4px;
}
.scene-anchor {
scroll-margin-top: 80px;
display: block;
width: 1px;
height: 1px;
margin-top: -1px;
}
/* ═══════════════════════════════════════════════════════════
MOBILE OVERRIDES (justified-row, scene-nav, lightbox, CTA)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Sit below 48px-tall mobile toolbar; cancel desktop margin breakout */
.scene-nav { top: 48px; padding: 12px 16px; gap: 4px; margin: 0 0 18px; }
.scene-chip { padding: 6px 12px; font-size: 9.5px; letter-spacing: 0.14em; }
.enter-gallery-cta {
/* Safe-area aware so the chevron never collides with the couple name or the
iPhone home indicator. max() keeps a 28px floor on non-notch devices. */
bottom: max(28px, env(safe-area-inset-bottom, 0px) + 16px);
padding: 13px 26px;
font-size: 10px;
letter-spacing: 0.28em;
}
.enter-gallery-cta-arrow { width: 13px; height: 13px; }
/* Perf: backdrop-filter blur is GPU-expensive on low-end phones and causes
scroll jank over the hero. Drop the live blur on the CTA on mobile. */
.enter-gallery-cta { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Avoid animating a blur filter on the lightbox loading image on mobile —
a flat opacity dim is cheaper and just as clear. */
.lightbox-body img.loading-img { filter: none; opacity: 0.3; }
}
/* ═══════════════════════════════════════════════════════════
PHASE 3 — EMAIL GATE MODAL
═══════════════════════════════════════════════════════════ */
.email-gate-overlay {
position: fixed;
inset: 0;
background: rgba(20, 18, 14, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: egFade 0.4s ease;
}
@keyframes egFade { from { opacity: 0; } to { opacity: 1; } }
.email-gate-modal {
background: #fdfbf6;
max-width: 460px;
width: 100%;
padding: 56px 48px 44px;
border-radius: 2px;
box-shadow: 0 24px 80px rgba(0,0,0,0.4);
text-align: center;
animation: egRise 0.5s cubic-bezier(.2,.8,.2,1);
}
@keyframes egRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.email-gate-brand {
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
color: #1c1c1c;
margin-bottom: 28px;
text-transform: uppercase;
}
.email-gate-brand span { color: var(--c-accent); }
.email-gate-title {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 400;
color: #1c1c1c;
letter-spacing: 0.02em;
margin: 0 0 12px;
line-height: 1.2;
}
.email-gate-sub {
font-size: 13px;
color: #777;
letter-spacing: 0.02em;
margin: 0 0 28px;
line-height: 1.55;
}
.email-gate-modal input,
.email-gate-modal textarea {
display: block;
width: 100%;
padding: 14px 16px;
border: 1px solid #e5dfd6;
border-radius: 2px;
font-family: inherit;
font-size: 14px;
color: #1c1c1c;
background: #fff;
margin-bottom: 12px;
transition: border-color 0.15s;
box-sizing: border-box;
}
.email-gate-modal input:focus,
.email-gate-modal textarea:focus {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(196,163,90,0.18); /* a11y: visible keyboard focus ring */
}
.email-gate-cta {
display: block;
width: 100%;
padding: 16px 24px;
background: var(--c-ink-bg);
color: #fff;
border: none;
border-radius: 2px;
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
cursor: pointer;
margin-top: 8px;
transition: background 0.2s;
}
/* WCAG AA fix: dark espresso text on the gold hover (was inherited #fff on gold = 2.27:1 fail). */
.email-gate-cta:hover { background: var(--c-accent); color: var(--c-ink-bg); }
.email-gate-cta:disabled { opacity: 0.6; cursor: wait; }
.email-gate-cancel {
display: block;
width: 100%;
padding: 12px;
background: transparent;
color: #888;
border: none;
font-family: 'Syne', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
cursor: pointer;
margin-top: 8px;
text-transform: uppercase;
}
.email-gate-cancel:hover { color: #1c1c1c; }
.email-gate-err {
font-size: 12px;
color: #c0392b;
margin: 12px 0 0;
letter-spacing: 0.02em;
}
.email-gate-fineprint {
font-size: 10.5px;
color: #aaa;
margin: 28px 0 0;
letter-spacing: 0.02em;
line-height: 1.5;
}
/* ── TOUCH FEEDBACK (coarse pointers) ──
A subtle press-scale on the interactive chrome so taps feel acknowledged.
.photo-cell keeps its own :active treatment; .lightbox-nav restates its
translateY centering so the scale doesn't knock it off-axis. */
@media (hover: none) {
.btn:active, .gt-icon:active, .gt-tab:active,
.lightbox-close:active, .lightbox-dl-btn:active, .scene-chip:active {
transform: scale(0.96);
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.96); }
}