/* Magdalene - plain static export. Design tokens + custom components. Tailwind utility classes are provided by the Tailwind CDN script in each page's (JIT-compiles whatever classes appear in the HTML - no build step needed). This file holds only what Tailwind can't express: brand tokens, fonts, and the bespoke component classes. */ :root { --color-ivory: #fbf8f2; --color-bone: #efe7d8; --color-bone-dim: #e6dcc7; --color-ink: #2a2520; --color-ink-soft: #57504a; --color-gold: #b3821e; --color-gold-soft: #d9a743; --color-greige: #c7c4bb; --color-silver: #b8bcc2; --font-display: "Cormorant Garamond", "Iowan Old Style", serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; } html { background: var(--color-ivory); color-scheme: light; scroll-behavior: smooth; font-size: 115%; } body { background-color: var(--color-ivory); background-image: url('assets/marble-gold-bg.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; color: var(--color-ink); font-family: var(--font-body); } * { border-color: var(--color-greige); } .font-display { font-family: var(--font-display); } /* ---- Bolder headings so key moments in the copy stand out from body text ---- */ h1, h2, h3 { font-weight: 600; } /* ---- White marble + gold vein texture: single fixed backdrop on , shared by the whole page, so it never seams/cuts between sections. Sections stay transparent so the one texture reads through consistently instead of each getting its own separately-cropped copy. ---- */ section.bg-ivory, section.bg-bone, section.bg-white { background-color: transparent; } /* ---- CTA: gold thread underline ---- */ .thread-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .35rem; } .thread-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-gold); transform: scaleX(.35); transform-origin: left; transition: transform .45s cubic-bezier(.65,0,.35,1); } .thread-link:hover::after, .thread-link:focus-visible::after { transform: scaleX(1); } .thread-link .thread-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--color-gold); transform: translateX(0); transition: transform .45s cubic-bezier(.65,0,.35,1); } .thread-link:hover .thread-dot, .thread-link:focus-visible .thread-dot { transform: translateX(4px); } /* ---- CTA: frosted glass block, ink-gold wash on hover ---- */ .frame-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: .85rem; background: color-mix(in srgb, var(--color-ivory) 72%, transparent); backdrop-filter: blur(18px) saturate(200%); -webkit-backdrop-filter: blur(18px) saturate(200%); border: 1.5px solid color-mix(in srgb, var(--color-gold) 65%, white 35%); box-shadow: 0 1px 1px color-mix(in srgb, white 80%, transparent) inset, 0 12px 26px -14px color-mix(in srgb, var(--color-ink) 32%, transparent); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; display: inline-block; text-decoration: none; color: var(--color-ink); } .frame-cta::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 85%, var(--color-gold) 15%); transform: translateX(-101%); transition: transform .45s cubic-bezier(.65,0,.35,1); z-index: -1; } .frame-cta:hover::before, .frame-cta:focus-visible::before { transform: translateX(0); } .frame-cta:hover, .frame-cta:focus-visible { color: var(--color-ivory); border-color: color-mix(in srgb, var(--color-ink) 85%, var(--color-gold) 15%); transform: translateY(-2px); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--color-ink) 45%, transparent); } /* ---- Row CTA: sliding index numeral ---- */ .row-cta .row-cta-index { display: inline-block; transition: transform .4s cubic-bezier(.65,0,.35,1); } .row-cta:hover .row-cta-index, .row-cta:focus-within .row-cta-index { transform: translateX(6px); } /* ---- Glass surfaces (small badges/buttons - kept position-neutral so they never fight the Tailwind absolute/rounded-full utilities already on these elements) ---- */ .glass { background: color-mix(in srgb, var(--color-ivory) 66%, transparent); backdrop-filter: blur(20px) saturate(210%); -webkit-backdrop-filter: blur(20px) saturate(210%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-ink) 18%, white 82%), 0 1px 1px color-mix(in srgb, white 85%, transparent) inset, 0 22px 44px -16px color-mix(in srgb, var(--color-ink) 38%, transparent); } .glass-gold { background: color-mix(in srgb, var(--color-ivory) 88%, transparent); backdrop-filter: blur(18px) saturate(200%); -webkit-backdrop-filter: blur(18px) saturate(200%); border: 1.5px solid var(--color-gold); box-shadow: 0 1px 1px color-mix(in srgb, white 85%, transparent) inset, 0 18px 36px -16px color-mix(in srgb, var(--color-ink) 34%, transparent); } .glass-silver { background: color-mix(in srgb, var(--color-ivory) 88%, transparent); backdrop-filter: blur(18px) saturate(200%); -webkit-backdrop-filter: blur(18px) saturate(200%); border: 1.5px solid var(--color-silver); box-shadow: 0 1px 1px color-mix(in srgb, white 85%, transparent) inset, 0 18px 36px -16px color-mix(in srgb, var(--color-ink) 34%, transparent); } .bg-silver-white { background: linear-gradient(180deg, #ffffff 0%, #f4f4f2 55%, #eef0f1 100%); } /* ---- Liquid glass tiles: every card/tile on the site shares this treatment - translucent frosted body (the marble shows through, blurred and saturated), a diagonal specular sheen like iOS glass, a bright rim-light border and a soft floating shadow. Tag+class selectors beat the plain Tailwind background and border utility classes already on these elements (same specificity, so the more specific compound selector wins regardless of stylesheet order). ---- */ a.tile-interactive, div.tile-interactive, button.tile-interactive { position: relative; border-radius: 2rem; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--color-ivory) 82%, transparent) 0%, color-mix(in srgb, var(--color-ivory) 66%, transparent) 55%, color-mix(in srgb, var(--color-gold-soft) 26%, var(--color-ivory) 74%) 100%); border-width: 1.5px; border-color: color-mix(in srgb, var(--color-ink) 30%, var(--color-gold) 70%); box-shadow: 0 2px 1px color-mix(in srgb, white 90%, transparent) inset, 0 20px 42px -20px color-mix(in srgb, var(--color-ink) 42%, transparent); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .3s ease; } a.tile-interactive::before, div.tile-interactive::before, button.tile-interactive::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, color-mix(in srgb, white 60%, transparent) 0%, transparent 32%, transparent 68%, color-mix(in srgb, var(--color-gold-soft) 22%, transparent) 100%); opacity: .4; } a.tile-interactive:hover, div.tile-interactive:hover, button.tile-interactive:hover, a.tile-interactive:focus-within, div.tile-interactive:focus-within, button.tile-interactive:focus-within { transform: translateY(-5px); border-color: color-mix(in srgb, var(--color-gold) 75%, white 25%); box-shadow: 0 2px 1px color-mix(in srgb, white 90%, transparent) inset, 0 28px 50px -20px color-mix(in srgb, var(--color-ink) 48%, transparent); } .placeholder-frame { background-image: repeating-linear-gradient(135deg, var(--color-greige) 0px, var(--color-greige) 1px, transparent 1px, transparent 10px); } /* ---- Ambient glow blobs ---- */ .ambient-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ambient-glow span { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .32; } /* ---- Reveal on scroll (IntersectionObserver toggles .is-visible in script.js) ---- */ @keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; } .reveal.is-visible { animation: revealUp .8s cubic-bezier(.16,1,.3,1) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- Hero parallax (transform driven per-frame by script.js) ---- */ [data-parallax] { transform: scale(1.15); will-change: transform; } /* ---- Mobile nav ---- */ #mobile-menu { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .3s ease-out; } #mobile-menu.open { grid-template-rows: 1fr; } #mobile-menu > div { min-height: 0; } /* ---- Gallery lightbox ---- */ #lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(42,37,32,.9); padding: 1rem; } #lightbox.open { display: flex; } #lightbox img { max-height: 85vh; max-width: 100%; object-fit: contain; } /* Hide scrollbar on horizontal review/gallery rails but keep them scrollable */ .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* ---- FAQ accordion (native

- works without JS) ---- */ .faq-item summary { list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .faq-chevron { transition: transform .3s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); }