/* ============================================================ Aura Photobooth Co. — v17 shared styles Only HOME has the white border + rounded dark frame. About, Packages, Contact = full-width regular pages. Mobile menu lives outside .page-wrapper as a fixed element. Card slide-up transitions universal on .page-wrapper. ============================================================ */ @view-transition { navigation: auto; } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg:#fafaf7; --bg-soft:#f4f3ef; --bg-card:#ffffff; --ink:#0a0a0a; --ink-soft:#2a2a2a; --ink-dim:#5a5a5a; --ink-mute:#8a8a8a; --ink-faint:#b8b8b8; --line:rgba(10,10,10,0.08); --line-strong:rgba(10,10,10,0.18); --swift: cubic-bezier(0.32, 0.72, 0, 1); --enter: cubic-bezier(0.16, 1, 0.3, 1); --exit: cubic-bezier(0.7, 0, 0.84, 0); --t-hover: 200ms; --t-nav: 260ms; --t-state: 380ms; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; --frame-pad: clamp(0.75rem, 1.8vw, 1.5rem); --frame-inset: clamp(2.25rem, 3.5vw, 3rem); --brand-size: clamp(40px, 4.6vw, 60px); } html { background: var(--bg); } /* Screen-reader-only utility — used for SEO-critical headings/intros that should be indexable but invisible (e.g. on the locked-viewport home). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.65; font-weight: 400; } /* HOME: white border padding + locked viewport NOTE: overflow lives on , not body, so position:fixed children (like .mobile-menu) aren't accidentally clipped by mobile browsers. */ html:has(body.page-framed) { height: 100%; overflow: hidden; } body.page-framed { padding: var(--frame-pad); height: 100vh; min-height: 100vh; } /* ABOUT: white frame ONLY around the banner video. The rest of the page flows normally in body width. The banner itself becomes the rounded card. */ body.page-framed-scroll { min-height: 100vh; background: var(--bg); } /* OTHER PAGES: full-width, normal scroll */ body.page-full { /* no padding, body scrolls */ } h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 300; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); } em { font-style: italic; font-weight: 300; color: var(--ink-soft); } a { color: inherit; text-decoration: none; cursor: pointer; transition: opacity var(--t-hover) var(--swift); } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--ink); color: var(--bg); } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } @view-transition { navigation: none; } } .bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.02; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ PAGE WRAPPER — universal transition target ============================================================ */ .page-wrapper { view-transition-name: page-wrapper; position: relative; } /* Framed variant (home) — fills body's padding-inset zone */ body.page-framed .page-wrapper { width: 100%; height: 100%; border-radius: var(--r-2xl); overflow: hidden; background: var(--ink); box-shadow: 0 1px 1px rgba(255,255,255,0.55) inset, 0 24px 48px -16px rgba(10,10,10,0.16), 0 50px 100px -40px rgba(10,10,10,0.18); } /* Full variant (packages, contact) — fills viewport, scrolls naturally */ body.page-full .page-wrapper { width: 100%; min-height: 100vh; background: var(--bg); } /* Framed-scroll variant (about) — wrapper is normal flow. The banner card is what gets the rounded corners and shadow (see .about-banner below). */ body.page-framed-scroll .page-wrapper { width: 100%; min-height: 100vh; background: var(--bg); } /* ============================================================ FRAME (home + about hero) — video, nav-over-video, hero overlay. These styles apply to BOTH .page-wrapper.frame (home, fills the body) and .about-banner (about, fills the first viewport inside its wrapper). ============================================================ */ .page-wrapper.frame video, .page-wrapper.frame .frame-fill, .about-banner video, .about-banner .frame-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .page-wrapper.frame .frame-fill, .about-banner .frame-fill { background: radial-gradient(ellipse at 30% 30%, #2a2a2a 0%, transparent 55%), radial-gradient(ellipse at 70% 70%, #1a1a1a 0%, transparent 55%), linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); animation: drift 14s var(--swift) infinite alternate; } @keyframes drift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 30% 20%, 70% 80%, 0 0; } } .page-wrapper.frame::before, .about-banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, rgba(0,0,0,0.30), transparent); pointer-events: none; z-index: 2; } .page-wrapper.frame::after, .about-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(0deg, rgba(0,0,0,0.40), transparent); pointer-events: none; z-index: 2; } .page-wrapper.frame .frame-nav, .about-banner .frame-nav { position: absolute; top: var(--frame-inset); left: var(--frame-inset); height: var(--brand-size); z-index: 4; display: flex; align-items: center; } .frame-nav .nav-links { display: flex; gap: clamp(1.5rem, 2.6vw, 2.5rem); align-items: center; } .frame-nav .nav-link { display: inline-block; font-size: 0.95rem; letter-spacing: 0.015em; text-transform: lowercase; font-weight: 400; color: rgba(255,255,255,0.92); padding: 0 0 0.15em; border-bottom: 1px solid transparent; transition: transform var(--t-nav) var(--swift), border-color var(--t-nav) var(--swift), color var(--t-nav) var(--swift); transform-origin: center; } .frame-nav .nav-link::after { display: none !important; } .frame-nav .nav-link__text { display: inline-block; transition: none; transform: none !important; } .frame-nav .nav-link:hover { transform: scale(1.10); } .frame-nav .nav-link.active { color: rgba(255,255,255,0.62); border-bottom-color: rgba(255,255,255,0.42); } .frame-nav .nav-link.active .nav-link__text { font-style: italic; } .page-wrapper.frame .frame-brand, .about-banner .frame-brand { position: absolute; top: var(--frame-inset); right: var(--frame-inset); height: var(--brand-size); max-width: 30vw; z-index: 4; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; transition: opacity var(--t-hover) var(--swift); } .frame-brand:hover { opacity: 0.75; } .frame-brand img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right center; } .page-wrapper.frame .frame-content, .about-banner .frame-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: var(--frame-inset); color: var(--bg); pointer-events: none; } .frame-content > * { pointer-events: auto; } .frame-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255,255,255,0.78); margin-bottom: 1.5rem; } .frame-headline { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.75rem, 7vw, 7rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 18ch; color: var(--bg); margin-bottom: 1.5rem; } .frame-headline em { color: rgba(255,255,255,0.7); } .frame-sub { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 480px; margin-bottom: 2rem; font-weight: 400; } .frame-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .btn-frame { padding: 0.78rem 1.55rem; border: 1px solid rgba(255,255,255,0.55); border-radius: var(--r-pill); font-size: 0.86rem; color: var(--bg); text-transform: lowercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: background var(--t-hover) var(--swift), color var(--t-hover) var(--swift), border-color var(--t-hover) var(--swift); } .btn-frame::after { content: '→'; transition: transform var(--t-hover) var(--swift); } .btn-frame:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); } .btn-frame:hover::after { transform: translateX(3px); } .btn-frame.solid { background: var(--bg); color: var(--ink); border-color: var(--bg); } .btn-frame.solid:hover { background: rgba(255,255,255,0.85); } /* ============================================================ ABOUT BANNER — the rounded "card" that holds the hero video. The video, gradients, nav, brand, and hero text are all handled by the unified .frame styles above. This rule sizes the card, gives it its rounded corners, shadow, and the white margin that visually matches the page background ("frame" effect). ============================================================ */ .about-banner { position: relative; margin: var(--frame-pad); height: calc(100vh - 2 * var(--frame-pad)); border-radius: var(--r-2xl); overflow: hidden; background: var(--ink); box-shadow: 0 1px 1px rgba(255,255,255,0.55) inset, 0 24px 48px -16px rgba(10,10,10,0.16), 0 50px 100px -40px rgba(10,10,10,0.18); } .about-banner-scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 0.64rem; letter-spacing: 0.4em; text-transform: lowercase; color: rgba(255,255,255,0.7); font-weight: 400; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; animation: float 3s var(--swift) infinite; } .about-banner-scroll-cue::after { content: ''; width: 1px; height: 28px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); } @keyframes float { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ============================================================ PAGE NAV (inner pages — about, packages, contact) ============================================================ */ .page-nav { position: sticky; top: 0; z-index: 50; padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.5rem, 4vw, 2.5rem); display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); background: rgba(250,250,247,0.0); transition: background var(--t-state) var(--swift), backdrop-filter var(--t-state) var(--swift); } .page-nav.scrolled { background: rgba(250,250,247,0.88); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--line); } /* On about (where banner is dark), nav text is white until scrolled */ .page-nav.over-banner .nav-link { color: rgba(255,255,255,0.92); } .page-nav.over-banner .page-brand img { filter: brightness(0) invert(1); } .page-nav.over-banner.scrolled .nav-link { color: var(--ink); } .page-nav.over-banner.scrolled .page-brand img { filter: brightness(0); } .page-nav .nav-links { display: flex; align-items: center; gap: clamp(0.25rem, 0.6vw, 0.5rem); } .page-brand { margin-left: auto; display: flex; align-items: center; height: clamp(40px, 4.6vw, 60px); max-width: 30vw; overflow: hidden; transition: opacity var(--t-hover) var(--swift); } .page-brand:hover { opacity: 0.6; } .page-brand img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right center; display: block; filter: brightness(0); transition: filter var(--t-state) var(--swift); } .page-nav .nav-link { display: inline-flex; align-items: center; padding: 0.55em 1.1em; border-radius: var(--r-pill); font-size: 0.95rem; letter-spacing: 0.015em; text-transform: lowercase; font-weight: 400; color: var(--ink); background: transparent; border: none; transform-origin: center; transition: transform var(--t-nav) var(--swift), background var(--t-hover) var(--swift), color var(--t-hover) var(--swift); } .page-nav .nav-link::after { display: none !important; } .page-nav .nav-link__text { transition: none; transform: none !important; font-style: normal !important; display: inline-block; } .page-nav .nav-link:hover { transform: scale(1.10); } .page-nav .nav-link.active { background: var(--ink); color: var(--bg); } .page-nav.over-banner:not(.scrolled) .nav-link.active { background: rgba(255,255,255,0.92); color: var(--ink); } .nav-toggle { display: none; background: none; border: none; width: 36px; height: 36px; align-items: center; justify-content: center; color: currentColor; } .nav-toggle svg { width: 24px; height: 24px; } .inner-page { min-height: 100vh; display: flex; flex-direction: column; } .inner-page .page-content { padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem); flex: 1; } .page-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; max-width: 1320px; margin: 0 auto 5rem; } .page-title { font-size: clamp(2.5rem, 6.5vw, 6.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 0.98; max-width: 18ch; } .page-tag { font-size: 0.78rem; color: var(--ink-mute); text-transform: lowercase; } .btn-primary { padding: 0.9rem 1.9rem; background: var(--ink); color: var(--bg); font-size: 0.86rem; border-radius: var(--r-pill); border: none; text-transform: lowercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: background var(--t-hover) var(--swift); } .btn-primary::after { content: '→'; transition: transform var(--t-hover) var(--swift); } .btn-primary:hover { background: var(--ink-soft); } .btn-primary:hover::after { transform: translateX(3px); } .btn-ghost { padding: 0.9rem 1.4rem; font-size: 0.86rem; color: var(--ink-dim); text-transform: lowercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: color var(--t-hover) var(--swift); } .btn-ghost::after { content: '↗'; transition: transform var(--t-hover) var(--swift); } .btn-ghost:hover { color: var(--ink); } .btn-ghost:hover::after { transform: translate(2px, -2px); } footer.site-footer { padding: 2.5rem clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-mute); } footer.site-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; } footer.site-footer .footer-nav a { font-size: 0.84rem; color: var(--ink-mute); text-transform: lowercase; letter-spacing: 0.01em; transition: color var(--t-hover) var(--swift); } footer.site-footer .footer-nav a:hover { color: var(--ink); } @media (max-width: 700px) { footer.site-footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } /* ============================================================ CARD SLIDE-UP — universal on .page-wrapper ============================================================ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-old(page-wrapper) { animation: page-recede 850ms cubic-bezier(0.65, 0, 0.35, 1) both; transform-origin: center center; } ::view-transition-new(page-wrapper) { animation: card-slide-up 850ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center top; box-shadow: 0 -12px 60px -10px rgba(0,0,0,0.22); } @keyframes page-recede { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0.35; transform: scale(0.94) translateY(-12px); } } @keyframes card-slide-up { 0% { transform: translateY(100%); border-top-left-radius: 36px; border-top-right-radius: 36px; } 100% { transform: translateY(0); border-top-left-radius: 0; border-top-right-radius: 0; } } /* ============================================================ IO REVEALS ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 80ms; } .reveal-delay-2 { transition-delay: 160ms; } .reveal-delay-3 { transition-delay: 240ms; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* ============================================================ REVIEWS SECTION ============================================================ */ .reviews-section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg-soft); } .reviews-shell { max-width: 1320px; margin: 0 auto; } .reviews-header { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem; } .reviews-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .reviews-link { font-size: 0.85rem; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--t-hover) var(--swift); } .reviews-link:hover { color: var(--ink); } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .review-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; display: flex; flex-direction: column; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .review-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .review-stars { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 1rem; } .review-quote { font-family: 'Cormorant Garamond', serif; font-size: 1.18rem; line-height: 1.5; font-weight: 300; font-style: italic; color: var(--ink-soft); margin-bottom: 1.5rem; flex: 1; } .review-meta { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } .review-author { font-size: 0.92rem; color: var(--ink); font-weight: 500; } .review-event { font-size: 0.78rem; color: var(--ink-mute); text-transform: lowercase; } .about-content { padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 4vw, 3rem); max-width: 1320px; margin: 0 auto; } .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; } .about-left h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; } .about-right p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.5rem; } .about-right p:last-child { margin-bottom: 0; } .about-right strong { color: var(--ink); font-weight: 500; } @media(max-width:1024px){ .about-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ============================================================ MOBILE MENU — fixed, separate from .page-wrapper, can't be clipped z-index is ridiculously high on purpose: this must sit above the home page's white frame, the sticky inner-page nav, and any view-transition pseudos. ============================================================ */ .mobile-menu { position: fixed; inset: 0 0 auto 0; width: 100vw; max-width: 100%; z-index: 99999; background: var(--bg); padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3); border-radius: 0 0 var(--r-lg) var(--r-lg); transform: translateY(-105%); visibility: hidden; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms; pointer-events: none; } .mobile-menu.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .mobile-menu-close { align-self: flex-end; background: none; border: none; width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 0.5rem; } .mobile-menu-close svg { width: 22px; height: 22px; } .mobile-menu-link { font-size: 1.4rem; color: var(--ink); text-transform: lowercase; font-weight: 400; padding: 0.4em 0; border-bottom: 1px solid var(--line); letter-spacing: 0; } .mobile-menu-link:last-of-type { border-bottom: none; } .mobile-menu-link.active { font-style: italic; color: var(--ink-dim); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { /* Home + about hero: pull frame-nav and frame-brand in from the white border so neither button can be clipped by the wrapper's rounded corners. */ body.page-framed .page-wrapper .frame-nav, body.page-framed-scroll .about-banner .frame-nav { top: clamp(1.25rem, 3vw, 1.75rem); left: clamp(1.25rem, 3vw, 1.75rem); height: clamp(36px, 9vw, 44px); width: clamp(36px, 9vw, 44px); } body.page-framed .page-wrapper .frame-brand, body.page-framed-scroll .about-banner .frame-brand { top: clamp(1.25rem, 3vw, 1.75rem); right: clamp(1.25rem, 3vw, 1.75rem); height: clamp(32px, 8vw, 44px); max-width: 45vw; } /* Hide desktop inline nav-links on mobile */ .nav-links { display: none !important; } /* Show toggle on mobile */ .nav-toggle { display: inline-flex; width: clamp(36px, 9vw, 44px); height: clamp(36px, 9vw, 44px); } /* HOME + about toggle: sit inside frame-nav as a flex child. */ .page-wrapper.frame .frame-nav .nav-toggle, .about-banner .frame-nav .nav-toggle { position: static; transform: none; margin: 0; } .page-wrapper.frame .frame-nav .nav-toggle svg, .about-banner .frame-nav .nav-toggle svg { stroke: #fff; width: 24px; height: 24px; } /* INNER PAGE nav (about, packages, contact): Force a clean left-brand / right-toggle layout. Two items with `margin-left: auto` was producing brand-in-the-middle + toggle-far-right. */ .page-nav .page-brand { margin-left: 0; margin-right: auto; } .page-nav .nav-toggle { margin-left: auto; } .page-nav.over-banner:not(.scrolled) .nav-toggle svg { stroke: #fff; } /* Framed-scroll (about) sits inside a rounded card — bump horizontal padding so neither the brand nor the toggle kisses the rounded corner. */ body.page-framed-scroll .page-nav { padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.75rem, 5.5vw, 2.5rem); } } /* ============================================================ SHARED SECTION ATOMS ============================================================ */ .section-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.5rem; } /* ============================================================ WHY AURA — three-pillar trust section on /about ============================================================ */ .why-aura { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .why-aura-shell { max-width: 1320px; margin: 0 auto; } .why-aura-header { margin-bottom: 4rem; max-width: 50ch; } .why-aura-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .why-aura-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .why-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.25rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .why-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .why-card-num { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 300; color: var(--ink-mute); letter-spacing: 0.02em; } .why-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); } .why-card p { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.7; } @media (max-width: 900px) { .why-aura-grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* ============================================================ SERVING — local SEO copy block on /about ============================================================ */ .serving { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg-soft); } .serving-shell { max-width: 880px; margin: 0 auto; text-align: center; } .serving-shell h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 2rem; } .serving-shell p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.5rem; } .serving-shell strong { color: var(--ink); font-weight: 500; } .serving-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; } /* ============================================================ SERVICE LANDING PAGES — shared atoms (weddings, corporate, proms, birthdays) ============================================================ */ /* Page-hero lead paragraph that follows .page-title */ .page-lead { max-width: 60ch; font-size: 1.12rem; color: var(--ink-soft); line-height: 1.7; margin: 0 0 1rem; } .page-lead strong { color: var(--ink); font-weight: 500; } /* Generic content section */ .service-section { padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); } .service-section.alt { background: var(--bg-soft); } .service-shell { max-width: 1320px; margin: 0 auto; } .service-shell > header { margin-bottom: 3rem; max-width: 50ch; } .service-shell > header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .service-shell > header p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1.25rem; } /* Features grid — 3 columns on desktop, 1 on mobile */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .feature-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.85rem 2.15rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .feature-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .feature-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; line-height: 1.15; color: var(--ink); } .feature-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.7; } .feature-card .feature-icon { width: 38px; height: 38px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--ink-mute); letter-spacing: 0.02em; } @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; gap: 1rem; } } /* Recommended-package callout — large hero card promoting one of the 3 packages */ .package-callout { position: relative; background: var(--ink); color: var(--bg); border-radius: var(--r-2xl); padding: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; overflow: hidden; isolation: isolate; } .package-callout::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(255,255,255,0.04) 0%, transparent 55%); z-index: -1; } .package-callout h3 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; color: var(--bg); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.25rem; } .package-callout h3 em { color: rgba(255,255,255,0.7); } .package-callout p { color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1rem; } .package-callout .callout-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255,255,255,0.62); margin-bottom: 1rem; } .callout-meta { display: flex; flex-direction: column; gap: 1rem; padding-left: clamp(0rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,0.18); } .callout-meta .price { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; letter-spacing: -0.025em; color: var(--bg); } .callout-meta .price small { font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); font-family: 'Inter', sans-serif; text-transform: lowercase; display: block; margin-top: 0.35rem; } .callout-meta ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .callout-meta li { font-size: 0.92rem; color: rgba(255,255,255,0.82); padding-left: 1.1rem; position: relative; line-height: 1.55; } .callout-meta li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1px; background: rgba(255,255,255,0.4); } .callout-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; } .callout-actions .btn-light { padding: 0.9rem 1.7rem; background: var(--bg); color: var(--ink); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: background var(--t-hover) var(--swift), transform var(--t-hover) var(--swift); } .callout-actions .btn-light:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); } .callout-actions .btn-light::after { content: '→'; transition: transform var(--t-hover) var(--swift); } .callout-actions .btn-light:hover::after { transform: translateX(3px); } .callout-actions .btn-outline { padding: 0.9rem 1.7rem; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; color: var(--bg); transition: background var(--t-hover) var(--swift), border-color var(--t-hover) var(--swift); } .callout-actions .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: var(--bg); } @media (max-width: 900px) { .package-callout { grid-template-columns: 1fr; } .callout-meta { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.75rem; } } /* Venue grid — extracted from areas.html so service pages can reuse */ .venues-section { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); border-top: 1px solid var(--line); } .venues-shell { max-width: 1320px; margin: 0 auto; } .venues-shell > header { margin-bottom: 2.5rem; max-width: 50ch; } .venues-shell > header h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; } .venues-shell > header p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1rem; } .venues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .venue-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .venue-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .venue-card h3 { font-size: 1.1rem; font-family: 'Cormorant Garamond', serif; font-weight: 400; margin-bottom: 0.75rem; } .venue-card h3 a { border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .venue-card h3 a:hover { opacity: 0.7; } .venue-card p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; } /* CTA strip — centered call to action at the bottom of service pages */ .cta-strip { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); text-align: center; } .cta-strip-shell { max-width: 720px; margin: 0 auto; } .cta-strip h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 1.25rem; } .cta-strip p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 2rem; } .cta-strip-actions { display: inline-flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } /* ============================================================ FAQ — visible accordion on /contact ============================================================ */ .faq-section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .faq-shell { max-width: 880px; margin: 0 auto; } .faq-header { margin-bottom: 3rem; } .faq-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .faq-item { border-bottom: 1px solid var(--line); padding: 1.5rem 0; } .faq-item summary { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; transition: color var(--t-hover) var(--swift); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 300; color: var(--ink-mute); transition: transform var(--t-state) var(--swift); flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { color: var(--ink-soft); } .faq-item p { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); line-height: 1.7; } .feature-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .feature-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; line-height: 1.15; color: var(--ink); } .feature-card p { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.7; } .feature-card .feature-icon { width: 38px; height: 38px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--ink-mute); letter-spacing: 0.02em; } @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; gap: 1rem; } } /* Recommended-package callout */ .package-callout { position: relative; background: var(--ink); color: var(--bg); border-radius: var(--r-2xl); padding: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; overflow: hidden; isolation: isolate; } .package-callout::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(255,255,255,0.04) 0%, transparent 55%); z-index: -1; } .package-callout h3 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; color: var(--bg); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.25rem; } .package-callout h3 em { color: rgba(255,255,255,0.7); } .package-callout p { color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1rem; } .package-callout .callout-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255,255,255,0.62); margin-bottom: 1rem; } .callout-meta { display: flex; flex-direction: column; gap: 1rem; padding-left: clamp(0rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,0.18); } .callout-meta .price { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; letter-spacing: -0.025em; color: var(--bg); } .callout-meta .price small { font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); font-family: 'Inter', sans-serif; text-transform: lowercase; display: block; margin-top: 0.35rem; } .callout-meta ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .callout-meta li { font-size: 0.92rem; color: rgba(255,255,255,0.82); padding-left: 1.1rem; position: relative; line-height: 1.55; } .callout-meta li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1px; background: rgba(255,255,255,0.4); } .callout-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; } .callout-actions .btn-light { padding: 0.9rem 1.7rem; background: var(--bg); color: var(--ink); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; display: inline-flex; align-items: center; gap: 0.5rem; transition: background var(--t-hover) var(--swift), transform var(--t-hover) var(--swift); } .callout-actions .btn-light:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); } .callout-actions .btn-light::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .callout-actions .btn-light:hover::after { transform: translateX(3px); } .callout-actions .btn-outline { padding: 0.9rem 1.7rem; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; color: var(--bg); transition: background var(--t-hover) var(--swift), border-color var(--t-hover) var(--swift); } .callout-actions .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: var(--bg); } @media (max-width: 900px) { .package-callout { grid-template-columns: 1fr; } .callout-meta { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.75rem; } } /* Venues grid */ .venues-section { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); border-top: 1px solid var(--line); } .venues-shell { max-width: 1320px; margin: 0 auto; } .venues-shell > header { margin-bottom: 2.5rem; max-width: 50ch; } .venues-shell > header h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; } .venues-shell > header p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1rem; } .venues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .venue-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .venue-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .venue-card h3 { font-size: 1.1rem; font-family: 'Cormorant Garamond', serif; font-weight: 400; margin-bottom: 0.75rem; } .venue-card h3 a { border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .venue-card h3 a:hover { opacity: 0.7; } .venue-card p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; } /* CTA strip */ .cta-strip { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); text-align: center; } .cta-strip-shell { max-width: 720px; margin: 0 auto; } .cta-strip h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 1.25rem; } .cta-strip p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 2rem; } .cta-strip-actions { display: inline-flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } /* ============================================================ FAQ — visible accordion on /contact + service pages ============================================================ */ .faq-section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .faq-shell { max-width: 880px; margin: 0 auto; } .faq-header { margin-bottom: 3rem; } .faq-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .faq-list { display: flex; flex-direction: column; gap: 0.5rem; } .faq-item { border-bottom: 1px solid var(--line); padding: 1.5rem 0; } .faq-item summary { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 400; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; transition: color var(--t-hover) var(--swift); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 300; color: var(--ink-mute); transition: transform var(--t-state) var(--swift); flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { color: var(--ink-soft); } .faq-item p { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); line-height: 1.7; } /* ============================================================ BLOG INDEX — post list + cards ============================================================ */ .blog-intro { padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); max-width: 1320px; margin: 0 auto; } .blog-intro p { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.75; max-width: 70ch; } .blog-intro p a { border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .blog-intro p a:hover { opacity: 0.6; } .post-list-shell { padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); max-width: 1320px; margin: 0 auto; } .post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .post-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .post-card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .post-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); } .post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .post-card:hover .post-card-media img { transform: scale(1.04); } .post-card-body { display: flex; flex-direction: column; padding: 1.75rem 1.85rem 2rem; gap: 0.9rem; flex: 1; } .post-card-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.74rem; text-transform: lowercase; letter-spacing: 0.08em; color: var(--ink-mute); } .post-card-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-faint); } .post-card-category { color: var(--ink); border: 1px solid var(--line); padding: 0.25em 0.7em; border-radius: 999px; } .post-card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.18; color: var(--ink); } .post-card-excerpt { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.65; flex: 1; } .post-card-readmore { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--ink); text-transform: lowercase; margin-top: 0.25rem; } .post-card-readmore::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .post-card:hover .post-card-readmore::after { transform: translateX(3px); } @media (max-width: 900px) { .post-list { grid-template-columns: 1fr; gap: 1.25rem; } } /* Why-trust block at the bottom of the blog index */ .blog-trust { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); border-top: 1px solid var(--line); } .blog-trust-shell { max-width: 880px; margin: 0 auto; } .blog-trust h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.5rem; } .blog-trust p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.25rem; } .blog-trust p:last-of-type { margin-bottom: 0; } .blog-trust strong { color: var(--ink); font-weight: 500; } /* ============================================================ BLOG POST — single article layout ============================================================ */ .post-article { max-width: 820px; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); } .post-article header { margin-bottom: 2.5rem; } .post-article .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.75rem; } .post-article .post-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-faint); } .post-article .post-meta .post-category { color: var(--ink); border: 1px solid var(--line); padding: 0.25em 0.7em; border-radius: 999px; } .post-article h1.post-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); margin-bottom: 1.25rem; } .post-article h1.post-title em { color: var(--ink-soft); } .post-article .post-lede { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.6; max-width: 60ch; } .post-hero-image { width: 100%; margin: 0 auto 3rem; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); aspect-ratio: 16/9; } .post-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Prose typography — applied inside .post-prose */ .post-prose { font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); } .post-prose > * + * { margin-top: 1.25em; } .post-prose h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin-top: 2.5em; } .post-prose h2:first-child { margin-top: 0; } .post-prose h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); margin-top: 2em; } .post-prose p { color: var(--ink-soft); } .post-prose p strong { color: var(--ink); font-weight: 500; } .post-prose a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .post-prose a:hover { opacity: 0.6; } .post-prose ul, .post-prose ol { padding-left: 1.4em; } .post-prose li { margin: 0.3em 0; } .post-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em auto; width: 60%; } .post-prose blockquote { border-left: 2px solid var(--ink); padding-left: 1.4em; margin: 1.5em 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--ink); line-height: 1.4; } /* Inline image gallery (for the corporate kids post) */ .post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 2.5em 0; } .post-gallery img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-md); background: var(--bg-soft); } @media (max-width: 600px) { .post-gallery { grid-template-columns: 1fr; } } /* Post CTA — at the bottom of every post */ .post-cta { background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 2.25rem 2rem 2.5rem; margin: 3rem 0 0; text-align: center; } .post-cta h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; font-weight: 400; color: var(--bg); margin-bottom: 0.75rem; } .post-cta p { color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 50ch; margin-left: auto; margin-right: auto; } .post-cta-actions { display: inline-flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .post-cta-actions a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; } .post-cta-actions .pill-solid { background: var(--bg); color: var(--ink); } .post-cta-actions .pill-solid::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .post-cta-actions .pill-solid:hover::after { transform: translateX(3px); } .post-cta-actions .pill-ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--bg); } .post-cta-actions .pill-ghost:hover { background: rgba(255,255,255,0.08); } /* Related posts strip */ .post-related { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); } .post-related-shell { max-width: 1320px; margin: 0 auto; } .post-related-shell > h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 2rem; font-family: 'Cormorant Garamond', serif; } .post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .post-related-grid { grid-template-columns: 1fr; } } x; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--t-state) var(--swift), transform var(--t-state) var(--swift); } .post-card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .post-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); } .post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .post-card:hover .post-card-media img { transform: scale(1.04); } .post-card-body { display: flex; flex-direction: column; padding: 1.75rem 1.85rem 2rem; gap: 0.9rem; flex: 1; } .post-card-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.74rem; text-transform: lowercase; letter-spacing: 0.08em; color: var(--ink-mute); } .post-card-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-faint); } .post-card-category { color: var(--ink); border: 1px solid var(--line); padding: 0.25em 0.7em; border-radius: 999px; } .post-card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.18; color: var(--ink); } .post-card-excerpt { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.65; flex: 1; } .post-card-readmore { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--ink); text-transform: lowercase; margin-top: 0.25rem; } .post-card-readmore::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .post-card:hover .post-card-readmore::after { transform: translateX(3px); } @media (max-width: 900px) { .post-list { grid-template-columns: 1fr; gap: 1.25rem; } } .blog-trust { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); border-top: 1px solid var(--line); } .blog-trust-shell { max-width: 880px; margin: 0 auto; } .blog-trust h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1.5rem; } .blog-trust p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.25rem; } .blog-trust p:last-of-type { margin-bottom: 0; } .blog-trust strong { color: var(--ink); font-weight: 500; } /* ============================================================ BLOG POST — single article layout ============================================================ */ .post-article { max-width: 820px; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); } .post-article header { margin-bottom: 2.5rem; } .post-article .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.75rem; } .post-article .post-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-faint); } .post-article .post-meta .post-category { color: var(--ink); border: 1px solid var(--line); padding: 0.25em 0.7em; border-radius: 999px; } .post-article h1.post-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); margin-bottom: 1.25rem; } .post-article h1.post-title em { color: var(--ink-soft); } .post-article .post-lede { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.6; max-width: 60ch; } .post-hero-image { width: 100%; margin: 0 auto 3rem; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); aspect-ratio: 16/9; } .post-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .post-prose { font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); } .post-prose > * + * { margin-top: 1.25em; } .post-prose h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin-top: 2.5em; } .post-prose h2:first-child { margin-top: 0; } .post-prose h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); margin-top: 2em; } .post-prose p { color: var(--ink-soft); } .post-prose p strong { color: var(--ink); font-weight: 500; } .post-prose a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .post-prose a:hover { opacity: 0.6; } .post-prose ul, .post-prose ol { padding-left: 1.4em; } .post-prose li { margin: 0.3em 0; } .post-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em auto; width: 60%; } .post-prose blockquote { border-left: 2px solid var(--ink); padding-left: 1.4em; margin: 1.5em 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--ink); line-height: 1.4; } .post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 2.5em 0; } .post-gallery img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-md); background: var(--bg-soft); } @media (max-width: 600px) { .post-gallery { grid-template-columns: 1fr; } } .post-cta { background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 2.25rem 2rem 2.5rem; margin: 3rem 0 0; text-align: center; } .post-cta h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; font-weight: 400; color: var(--bg); margin-bottom: 0.75rem; } .post-cta p { color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 50ch; margin-left: auto; margin-right: auto; } .post-cta-actions { display: inline-flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .post-cta-actions a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; } .post-cta-actions .pill-solid { background: var(--bg); color: var(--ink); } .post-cta-actions .pill-solid::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .post-cta-actions .pill-solid:hover::after { transform: translateX(3px); } .post-cta-actions .pill-ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--bg); } .post-cta-actions .pill-ghost:hover { background: rgba(255,255,255,0.08); } .post-related { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 3rem); background: var(--bg-soft); } .post-related-shell { max-width: 1320px; margin: 0 auto; } .post-related-shell > h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 2rem; font-family: 'Cormorant Garamond', serif; } .post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .post-related-grid { grid-template-columns: 1fr; } } /* ============================================================ TEAM — founder bios on /about ============================================================ */ .team-section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .team-shell { max-width: 1320px; margin: 0 auto; } .team-header { margin-bottom: 3.5rem; max-width: 50ch; } .team-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .team-header p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1.25rem; max-width: 60ch; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; } @media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 2rem; } } .team-member { display: flex; flex-direction: column; gap: 1.5rem; } .team-portrait { width: 100%; aspect-ratio: 4/5; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%); border: 1px solid var(--line); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .team-portrait::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(10,10,10,0.02) 18px, rgba(10,10,10,0.02) 19px); pointer-events: none; } .team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-portrait .placeholder-mark { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; font-style: italic; color: var(--ink-faint); letter-spacing: -0.02em; position: relative; z-index: 1; } .team-info { display: flex; flex-direction: column; gap: 0.6rem; } .team-info .team-role { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); } .team-info h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.85rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } .team-info .team-bio p { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 0.85rem; } .team-info .team-bio p:last-child { margin-bottom: 0; } .team-info .team-bio strong { color: var(--ink); font-weight: 500; } .team-socials { display: flex; gap: 1rem; margin-top: 0.5rem; } .team-socials a { font-size: 0.84rem; color: var(--ink-mute); text-transform: lowercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--line); padding-bottom: 0.1em; transition: color var(--t-hover) var(--swift), border-color var(--t-hover) var(--swift); } .team-socials a:hover { color: var(--ink); border-color: var(--ink); } /* ============================================================ BOOTH DETAILS — deep-dive copy on /packages, after each 3D scene ============================================================ */ .booth-details { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .booth-details.alt { background: var(--bg-soft); } .booth-details-shell { max-width: 880px; margin: 0 auto; } .booth-details-header { margin-bottom: 2.5rem; } .booth-details-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.25rem; } .booth-details h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); } .booth-details h2 em { color: var(--ink-soft); } .booth-details-body p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.25rem; } .booth-details-body p:last-of-type { margin-bottom: 0; } .booth-details-body strong { color: var(--ink); font-weight: 500; } .booth-details-body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .booth-details-body a:hover { opacity: 0.6; } .booth-details-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; padding: 0.85rem 1.7rem; border: 1px solid var(--ink); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; color: var(--ink); transition: background var(--t-hover) var(--swift), color var(--t-hover) var(--swift); } .booth-details-cta::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .booth-details-cta:hover { background: var(--ink); color: var(--bg); } .booth-details-cta:hover::after { transform: translateX(3px); } /* ============================================================ TEAM — founder bios on /about ============================================================ */ .team-section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .team-shell { max-width: 1320px; margin: 0 auto; } .team-header { margin-bottom: 3.5rem; max-width: 50ch; } .team-header h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; } .team-header p { font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; margin-top: 1.25rem; max-width: 60ch; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; } @media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; gap: 2rem; } } .team-member { display: flex; flex-direction: column; gap: 1.5rem; } .team-portrait { width: 100%; aspect-ratio: 4/5; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%); border: 1px solid var(--line); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .team-portrait::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(10,10,10,0.02) 18px, rgba(10,10,10,0.02) 19px); pointer-events: none; } .team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-portrait .placeholder-mark { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; font-style: italic; color: var(--ink-faint); letter-spacing: -0.02em; position: relative; z-index: 1; } .team-info { display: flex; flex-direction: column; gap: 0.6rem; } .team-info .team-role { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); } .team-info h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.85rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } .team-info .team-bio p { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 0.85rem; } .team-info .team-bio p:last-child { margin-bottom: 0; } .team-info .team-bio strong { color: var(--ink); font-weight: 500; } .team-socials { display: flex; gap: 1rem; margin-top: 0.5rem; } .team-socials a { font-size: 0.84rem; color: var(--ink-mute); text-transform: lowercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--line); padding-bottom: 0.1em; transition: color var(--t-hover) var(--swift), border-color var(--t-hover) var(--swift); } .team-socials a:hover { color: var(--ink); border-color: var(--ink); } /* ============================================================ BOOTH DETAILS — deep-dive copy on /packages ============================================================ */ .booth-details { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .booth-details.alt { background: var(--bg-soft); } .booth-details-shell { max-width: 880px; margin: 0 auto; } .booth-details-header { margin-bottom: 2.5rem; } .booth-details-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.25rem; } .booth-details h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); } .booth-details h2 em { color: var(--ink-soft); } .booth-details-body p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.25rem; } .booth-details-body p:last-of-type { margin-bottom: 0; } .booth-details-body strong { color: var(--ink); font-weight: 500; } .booth-details-body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .booth-details-body a:hover { opacity: 0.6; } .booth-details-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; padding: 0.85rem 1.7rem; border: 1px solid var(--ink); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; color: var(--ink); transition: background var(--t-hover) var(--swift), color var(--t-hover) var(--swift); } .booth-details-cta::after { content: '\2192'; transition: transform var(--t-hover) var(--swift); } .booth-details-cta:hover { background: var(--ink); color: var(--bg); } .booth-details-cta:hover::after { transform: translateX(3px); } ============ */ .booth-details { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); background: var(--bg); } .booth-details.alt { background: var(--bg-soft); } .booth-details-shell { max-width: 880px; margin: 0 auto; } .booth-details-header { margin-bottom: 2.5rem; } .booth-details-eyebrow { display: inline-block; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--ink-mute); margin-bottom: 1.25rem; } .booth-details h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); } .booth-details h2 em { color: var(--ink-soft); } .booth-details-body p { font-size: 1.06rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.25rem; } .booth-details-body p:last-of-type { margin-bottom: 0; } .booth-details-body strong { color: var(--ink); font-weight: 500; } .booth-details-body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: opacity var(--t-hover) var(--swift); } .booth-details-body a:hover { opacity: 0.6; } .booth-details-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; padding: 0.85rem 1.7rem; border: 1px solid var(--ink); border-radius: var(--r-pill); font-size: 0.86rem; text-transform: lowercase; color: var(--ink); transition: background var(--t-hover) var(--swift), color var(--t-hover) var(--swift); } .booth-details-cta::after { content: "\2192"; transition: transform var(--t-hover) var(--swift); } .booth-details-cta:hover { background: var(--ink); color: var(--bg); } .booth-details-cta:hover::after { transform: translateX(3px); } /* =========================================================================== FLUENT FORMS — styled to match v17 contact form design =========================================================================== */ .aura-contact-form, .fluentform .ff-el-group, .fluentform form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: clamp(2rem, 5vw, 4rem); box-shadow: 0 20px 60px -30px rgba(10,10,10,0.12); } .fluentform .ff-el-group, .fluentform form > .ff-el-group { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 1.5rem; } .fluentform label, .fluentform .ff-el-input--label label { font-size: 0.74rem !important; color: var(--ink-mute) !important; text-transform: lowercase !important; margin-bottom: 0.45rem !important; letter-spacing: 0.02em !important; font-weight: 400 !important; } .fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="date"], .fluentform select, .fluentform textarea { width: 100% !important; padding: 0.95rem 1.05rem !important; background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; font-family: 'Inter', sans-serif !important; font-size: 0.96rem !important; color: var(--ink) !important; transition: border-color var(--t-hover) var(--swift), background var(--t-hover) var(--swift) !important; box-shadow: none !important; height: auto !important; } .fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus { outline: none !important; border-color: var(--ink) !important; background: var(--bg-card) !important; } .fluentform textarea { resize: vertical; min-height: 140px; } .fluentform .ff-btn, .fluentform .ff-btn-submit, .fluentform button[type="submit"] { padding: 0.9rem 1.9rem !important; background: var(--ink) !important; color: var(--bg) !important; font-size: 0.86rem !important; border-radius: var(--r-pill) !important; border: none !important; text-transform: lowercase !important; transition: background var(--t-hover) var(--swift) !important; height: auto !important; font-family: 'Inter', sans-serif !important; letter-spacing: 0; } .fluentform .ff-btn:hover, .fluentform button[type="submit"]:hover { background: var(--ink-soft) !important; } .fluentform .ff-el-name { display: grid; grid-template-columns: 1fr; gap: 0; } .fluentform .ff-el-group .error, .fluentform .text-danger { color: #b00020 !important; font-size: 0.78rem !important; margin-top: 0.4rem !important; } .fluentform .ff-el-form-control-wrapper > div { display: flex; flex-direction: column; } .ff-message-success { background: var(--bg-card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; padding: 1.5rem !important; border-radius: var(--r-md) !important; }