/* Aisleful — warm illustrated wedding brand (2026 redesign). Design system carried from the app mockup: - Palette: navy/forest ink, terracotta (meadow) accent, gold (sky), cream paper. - Type: Cormorant Garamond (serif display, incl. italic) + Inter (UI/body) — the pre-redesign type pairing, kept on the new palette/layout. - Signature material: "etched/sunk" surfaces using INSET shadows so cards and the nav pill read as pressed into the page, not floating above it. - Floating pill nav with the wordmark centred beneath it. NOTE: this is a re-skin of a functional app — every class/id below that the JS depends on (tiles, dl-btn, play-btn, gallery-grid.grid-N, metric, switch, qr-card colour variants, appnav, faq-item, ail- cookie, legal, discount, admin, checkout) is preserved. */ :root { /* Brand palette — light UK summer countryside: off-white paper, lake blues and fell greens. (Variable NAMES are kept from the original brand tokens so every rule that already references var(--meadow) etc. repaints without being touched individually; only the VALUES moved from navy/terracotta.) */ --ink: #1F3A4D; /* deep lake-blue — headlines, dark surfaces */ --forest: #1F3A4D; --nav-blue: #6C93E0; /* cornflower blue — top nav bar + logged-in page banners only */ --ink-2: #23394A; /* body ink */ --meadow: #3E7CA6; /* sky/lake blue — primary accent / CTA */ --meadow-deep: #2C5D80; --terracotta: #3E7CA6; --gold: #6B9C5E; /* fell/meadow green — secondary accent, small labels, numerals */ --sky: #6B9C5E; --paper: #F7FAF7; /* off-white page background, faint green cast */ --paper-2: #E7F0EC; /* pale duck-egg green-blue for panels/sections */ --paper-3: #FBFDFC; /* near-white etched highlight */ --body: #23394A; /* body text */ --ink-soft: #5B7480; /* soft blue-grey — secondary text */ --muted: #5B7480; --line: #DCE7E2; --white: #ffffff; --ok: #3f7d5a; --err: #B0524A; --danger: #B0524A; --blush: #BFE0C9; /* soft mint — accent dot/kicker on dark surfaces */ --blush-deep: #2C5D80; --radius: 18px; --radius-lg: 26px; --shadow: 0 14px 40px rgba(31, 58, 77, 0.12); --shadow-soft: 0 8px 24px rgba(31, 58, 77, 0.08); /* Etched / sunk surfaces — inset shadow signature. */ --etch: inset 4px 4px 9px rgba(62,124,166,0.09), inset -4px -4px 9px rgba(255,255,255,0.7); --etch-strong: inset 4px 4px 10px rgba(62,124,166,0.11), inset -4px -4px 10px rgba(255,255,255,0.75); --etch-dark: inset 4px 4px 10px rgba(20,45,58,0.20), inset -4px -4px 10px rgba(255,255,255,0.07); --etch-bg: linear-gradient(150deg, #EAF3EE 0%, #FBFDFC 60%); --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } /* The `hidden` attribute must always win over component display rules. */ [hidden] { display: none !important; } /* ---------- Smooth load ---------- Pre-paint hold (html.app-loading / html.auth-checking) + a pure-CSS opacity fade so the page never flashes or gets trapped hidden. Data regions use skeletons so layout is reserved and content swaps in place. */ html.auth-checking body, html.app-loading body { visibility: hidden; } /* Opacity-only fade — a transform on would make it the containing block for position:fixed children (cookie banner). Do NOT add a transform here. */ body { animation: page-fade-in .45s ease both; } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* ---------- Skeleton placeholders ---------- */ .skeleton, .sk { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(100deg, var(--paper-2) 30%, #d9ebe0 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; color: transparent !important; pointer-events: none; user-select: none; } .skeleton * { visibility: hidden; } @keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton, .sk { animation: none; } } .sk-line { height: .9em; border-radius: 6px; margin: 6px 0; } .sk-tile { aspect-ratio: 1; border-radius: 16px; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--body); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Sticky footer: full-height column so a short page pushes the footer to the bottom. footer.site gets margin-top:auto. flex is safe for fixed children. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.01em; } /* Every heading's spacing on the marketing pages is deliberately controlled by an explicit margin on the heading itself or on whatever follows it (see .flow h2, .hero-copy h1, .price-card h3 etc. below) -- so the browser's own default h1/h2/h3 margin must not also be in play, or it silently wins the collapse against a smaller intended gap (this is why e.g. the FAQ heading used to sit ~37px from its list instead of the 16px actually set). Reset here; anything that still wants heading margin sets it explicitly. */ h1, h2, h3 { margin: 0; } button { font-family: inherit; cursor: pointer; } /* ---------- Layout ---------- */ /* width:100% guards against the same shrink-to-fit-vs-flex-stretch trap fixed on .dash above (see its comment) — any non-wrapping, min-width-floored row dropped inside .container/.wrap (both are also direct children of the column-flex body) would blow these out the same way. */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 6vw; } .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 6vw; } @media (min-width: 1120px) { .container, .wrap { padding: 0 22px; } } /* 1120px reads well up to a normal laptop/monitor, but on a genuinely large screen it leaves huge dead margins either side (720px per side at 2560px wide) while the actual content never gets any bigger. Widen the column in two more steps rather than one big jump, and rather than go fully edge-to- edge (paragraph text at 2500px+ line length gets hard to read). */ @media (min-width: 1440px) { .container, .wrap { max-width: 1320px; } } @media (min-width: 1900px) { .container, .wrap { max-width: 1560px; } } @media (min-width: 2400px) { .container, .wrap { max-width: 1760px; } } /* ---------- Marketing top nav (index): floats over the hero mosaic ---------- */ /* No bar at all behind the nav -- header.site is fully transparent and so is .navbar itself. Each link/button is its own floating pill, one flat colour at 80% opacity so the mosaic shows through the button itself, not just the gaps. That 80% CANNOT just be per-pill background alpha once pills need to visually join up, though: two overlapping rgba(...,.8) shapes composite into something darker than either alone (that's alpha blending doing exactly what it's supposed to), so any overlap between a pill and a connecting bridge shows up as a visible seam/blotch -- bigger overlap just makes a bigger blotch, not a cleaner join. So js/site-nav.js instead builds .navpills: one absolutely-positioned layer containing a same-shape .navpill-bg duplicate of every real pill PLUS a bridge rect in each gap, all painted fully solid/opaque relative to each other (so overlaps between them are invisible -- solid colour over the same solid colour is just that colour) and given ONE shared opacity: .8 on the .navpills container itself. Opacity on a container flattens everything inside into a single layer first and blends THAT against the mosaic once, instead of blending each piece independently -- the only way to get one congruent, uniformly-translucent shape out of several overlapping pieces. The real /