@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../**/*.tsx';
/* Editorial brief — Modern Romantic Luxury (per docs/UI.md from /wedding) */
/* Tailwind v4 tokens (light, default). Dark mode redefines the same variables
below under `[data-theme="dark"]`. */
@theme {
--font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--font-serif: 'Playfair Display', 'Canela', Georgia, serif;
/* Base — calm neutral palette */
--color-background: #FAF9F7; /* Ivory White */
--color-foreground: #1C1C1C; /* Charcoal Black */
--color-muted: #F3EDE4; /* Soft Champagne */
--color-muted-foreground: #8C7B75; /* Warm Taupe */
--color-border: #EAEAEA; /* Border light */
--color-card: #FFFFFF; /* Cards on ivory */
/* Accent — Brushed Gold (atelier accent, replaces dusty rose) */
--color-primary: #B89668;
--color-primary-foreground: #FFFFFF;
--color-primary-hover: #9E7E54;
/* Editorial CTA — Charcoal (primary button per UI.md spec) */
--color-ink: #1C1C1C;
--color-ink-foreground: #FAF9F7;
/* Sidebar — keep dark, refined for app shell */
--color-sidebar: #1C1C1C;
--color-sidebar-foreground: #FAF9F7;
/* Semantic */
--color-success: oklch(0.50 0.13 145);
--color-success-muted: oklch(0.955 0.035 145);
--color-danger: oklch(0.53 0.17 25);
--color-danger-muted: oklch(0.975 0.025 25);
}
/* Dark mode — warm dark with the same dusty-rose accent. Applied by toggling
`data-theme="dark"` on the element (see resources/views/app.blade.php). */
[data-theme="dark"] {
--color-background: #14130F;
--color-foreground: #F3EDE4;
--color-muted: #1F1D1A;
--color-muted-foreground: #B0A498;
--color-border: #2A2723;
--color-card: #1B1916;
--color-primary: #C9A878;
--color-primary-foreground: #14130F;
--color-primary-hover: #B89668;
--color-ink: #F3EDE4;
--color-ink-foreground: #14130F;
--color-sidebar: #0C0B0A;
--color-sidebar-foreground: #F3EDE4;
--color-success: oklch(0.62 0.13 145);
--color-success-muted: oklch(0.20 0.05 145);
--color-danger: oklch(0.66 0.17 25);
--color-danger-muted: oklch(0.22 0.05 25);
color-scheme: dark;
}
@layer utilities {
.input {
@apply w-full border border-border rounded-xl px-3.5 py-3 text-[15px] bg-card text-foreground
outline-none transition-all duration-200
focus:ring-2 focus:ring-primary/15 focus:border-primary/40
placeholder:text-muted-foreground/50
disabled:opacity-50 disabled:pointer-events-none;
}
/* Charcoal CTA — primary action across landing per UI.md spec */
.btn-charcoal,
.btn-ink {
@apply inline-flex items-center justify-center bg-foreground text-background
rounded-xl px-6 py-3 text-[15px] font-medium tracking-tight
transition-all duration-200
hover:bg-foreground/90 hover:shadow-[0_10px_30px_-12px_rgba(0,0,0,0.35)]
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground
disabled:opacity-50 disabled:pointer-events-none;
}
.btn-outline {
@apply inline-flex items-center justify-center bg-transparent text-foreground
border border-border rounded-xl px-6 py-3 text-[15px] font-medium tracking-tight
transition-all duration-200
hover:bg-foreground/[0.04] hover:border-foreground/20;
}
/* Premium card — per UI.md spec */
.card-premium {
@apply bg-card border border-border rounded-2xl;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* Subtle paper grain — masks the "AI perfect" feel */
.grain {
position: relative;
isolation: isolate;
}
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
z-index: 0;
}
}
@layer base {
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body {
background: var(--color-background);
color: var(--color-foreground);
}
body {
font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
letter-spacing: -0.005em;
}
/* Editorial heading defaults — tight letter-spacing per UI.md spec */
h1, h2, h3 {
letter-spacing: -0.02em;
}
::selection {
background: rgba(184, 150, 104, 0.28);
color: #1C1C1C;
}
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ken-burns {
from { transform: scale(1.02); }
to { transform: scale(1.10); }
}
.animate-fade-up { animation: fade-up 0.55s cubic-bezier(.2,.7,.2,1) both; }
.animate-fade-in { animation: fade-in 0.4s ease-out both; }
.animate-ken { animation: ken-burns 14s ease-out both alternate infinite; }
/* ─────────────────────────────────────────────────────────────────────────────
* Atelier — dark editorial palette scoped to the landing page.
* Inverts the default ivory theme so the marketing surface reads as a private
* atelier (espresso ground, ivory type, brushed-gold accent) without touching
* the dashboard / auth / app surfaces that rely on the default tokens.
* ────────────────────────────────────────────────────────────────────────── */
.atelier {
--color-background: #0E0C0A; /* Espresso — deeper than charcoal */
--color-foreground: #EDE5D6; /* Warm ivory */
--color-muted: #15120E; /* One step lighter for alt bands */
--color-muted-foreground: #8A8074; /* Stone */
--color-border: #28221B; /* Hairline brown-black */
--color-card: #181410; /* Vellum panel */
--color-primary: #B89668; /* Brushed gold (warm, not yellow) */
--color-primary-foreground: #0E0C0A;
--color-primary-hover: #C9A878;
--color-ink: #EDE5D6; /* Buttons invert */
--color-ink-foreground: #0E0C0A;
background: var(--color-background);
color: var(--color-foreground);
color-scheme: dark;
}
/* Thin gold rule — eyebrow underline used across sections */
.atelier-rule {
display: inline-block;
width: 56px;
height: 1px;
background: var(--color-primary);
vertical-align: middle;
}
/* Brushed-gold primary CTA (atelier-only) */
.atelier .btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: var(--color-primary-foreground);
border-radius: 2px;
padding: 0.95rem 1.6rem;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: all 200ms ease;
}
.atelier .btn-gold:hover { background: var(--color-primary-hover); }
.atelier .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--color-foreground);
border: 1px solid rgba(237, 229, 214, 0.18);
border-radius: 2px;
padding: 0.9rem 1.6rem;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: all 200ms ease;
}
.atelier .btn-ghost:hover { border-color: rgba(237, 229, 214, 0.45); background: rgba(237, 229, 214, 0.04); }
/* Vellum panel — soft inner glow card for atelier surfaces */
.atelier .vellum {
background: linear-gradient(180deg, #1A1611 0%, #14110D 100%);
border: 1px solid var(--color-border);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(237, 229, 214, 0.04), 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
/* Sharper paper grain on dark — keeps the photo from feeling stock */
.atelier-grain { position: relative; isolation: isolate; }
.atelier-grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.10;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
z-index: 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
* Atelier Light — ivory ground + brushed-gold accent. Scoped wrapper for
* auth and guest-facing pages so they read as part of the atelier system
* without inverting to dark mode (dashboard surfaces stay untouched).
* ────────────────────────────────────────────────────────────────────────── */
.atelier-light {
--color-primary: #B89668; /* Brushed gold replaces dusty rose */
--color-primary-foreground: #FFFFFF;
--color-primary-hover: #9E7E54;
}
.atelier-light .btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-foreground);
color: var(--color-background);
border-radius: 2px;
padding: 0.95rem 1.6rem;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all 200ms ease;
}
.atelier-light .btn-gold:hover { background: #000; }
.atelier-light .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--color-foreground);
border: 1px solid var(--color-border);
border-radius: 2px;
padding: 0.9rem 1.6rem;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all 200ms ease;
}
.atelier-light .btn-ghost:hover { border-color: rgba(28, 28, 28, 0.45); background: rgba(28, 28, 28, 0.03); }
/* Vellum-on-ivory panel — slightly warmed card */
.atelier-light .vellum {
background: #FBFAF6;
border: 1px solid var(--color-border);
border-radius: 4px;
}
/* Vertical numeric label — magazine column marker */
.atelier .v-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-muted-foreground);
}