/* ========================================================================= Arthur Murray Mt. Pleasant — Homepage Built on the brand design system (see colors_and_type.css). This sheet only adds layout + page-specific composition. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; } img { max-width: 100%; } a { color: inherit; } /* Honor reduced-motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition-duration: 0.01ms !important; } } /* --- Palette: white-forward, per studio preference (GoDaddy-style) ------- * * Overrides the warm-cream defaults with a clean white field + soft grays. */ :root { --bg-page: #FFFFFF; --bg-surface: #FFFFFF; --bg-surface-alt: #F1EBE2; --border-hairline: #E8E6E1; --fg-secondary: #4A4A4A; --fg-tertiary: #767676; } body { background: #FFFFFF; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(24px, 3vw, 52px); } .wrap--narrow { max-width: 1040px; } /* Reusable bits ----------------------------------------------------------- */ .eyebrow { font-family: var(--font-sans); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--fg-secondary); margin: 0; } .rule-short { width: 44px; height: 1px; background: var(--am-ink); border: 0; margin: 0; } .hl-dot { color: var(--am-brass); } html[data-accent="brass"] .rule-short { background: var(--am-brass); } .section { padding: 84px 0; } .section--tight { padding: 60px 0; } .section--alt { background: var(--bg-surface-alt); } .center { text-align: center; } .stack { display: flex; flex-direction: column; } /* --- Headline type system (toggled by data-type on ) --------------- */ .display { font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: -0.01em; line-height: 1.05; color: var(--fg-primary); margin: 0; } .display em { font-style: italic; } /* Caps mode swaps the big display heads to tracked Montserrat caps */ html[data-type="caps"] .display { font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.14; } html[data-type="caps"] .display em { font-style: normal; } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; padding: 15px 30px; border-radius: var(--radius-pill); text-decoration: none; border: 1px solid transparent; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .btn--primary { background: var(--am-ink); color: var(--am-paper); } .btn--primary:hover { background: var(--am-ink-soft); } .btn--primary:active { transform: translateY(1px); box-shadow: var(--shadow-xs); } .btn--ghost { background: transparent; color: var(--am-ink); border-color: var(--am-ink); } .btn--ghost:hover { background: var(--am-linen); } .btn--ondark { background: var(--am-paper); color: var(--am-ink); } .btn--ondark:hover { background: var(--am-white); } .btn--lineghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); } .btn--lineghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; } .link-underline { font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; color: var(--am-ink); border-bottom: 1px solid var(--am-ink); padding-bottom: 4px; transition: color var(--dur-base), border-color var(--dur-base); } html[data-accent="brass"] .link-underline:hover { color: var(--am-brass); border-color: var(--am-brass); } .link-underline:hover { border-bottom-width: 2px; } /* ========================================================================= Announcement bar ========================================================================= */ .announce { background: var(--bg-surface); color: var(--fg-tertiary); font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; padding: 13px 20px; border-bottom: 1px solid var(--border-hairline); } .announce a { color: var(--am-ink); text-decoration: none; border-bottom: 1px solid var(--am-mist); } .announce .dot { opacity: 0.5; margin: 0 10px; } /* ========================================================================= Nav ========================================================================= */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-hairline); } .nav__inner { max-width: 1180px; margin: 0 auto; padding: 13px clamp(20px, 3vw, 44px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 2vw, 30px); } .nav__links { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 12px); } .nav__links--left { justify-content: flex-end; } .nav__links--right { justify-content: flex-start; } .nav__link { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-secondary); text-decoration: none; white-space: nowrap; padding: 8px 13px; border: 1px solid transparent; border-radius: var(--radius-sm); transition: color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .nav__link:hover { color: var(--am-ink); background: var(--bg-surface); border-color: var(--border-hairline); } .nav__link.is-active { color: var(--am-ink); border-color: var(--am-ink); } html[data-accent="brass"] .nav__link:hover { color: var(--am-brass-deep); border-color: var(--am-brass); } .nav__logo { display: block; justify-self: center; padding: 0; } .nav__logo img { height: 46px; width: auto; max-width: none; display: block; } .nav__cta { margin-left: 6px; } .nav__phone { font-family: var(--font-sans); font-size: 17px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-tertiary); text-decoration: none; } .nav__menu-btn { display: none; align-items: center; justify-content: center; gap: 9px; background: var(--bg-surface); border: 1px solid var(--am-ink); border-radius: var(--radius-sm); cursor: pointer; color: var(--am-ink); padding: 9px 22px; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .nav__menu-btn:hover { background: var(--am-linen); } .nav--open .nav__menu-btn { background: var(--am-ink); color: var(--am-paper); } .nav__menu-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; line-height: 1; } .nav__menu-rule { display: none; } .nav__mobile { display: none; } /* ========================================================================= HERO — full-bleed video (default) + split (tweak) ========================================================================= */ .hero { position: relative; } /* Full-bleed variant */ .hero--fullbleed { min-height: clamp(560px, 82vh, 820px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; border-bottom: 1px solid var(--border-hairline); } .hero__media { position: absolute; inset: 0; z-index: 0; background: #1b1813; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.42) 36%, rgba(10,10,10,0.12) 62%, rgba(10,10,10,0.0) 100%), linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.0) 40%, rgba(10,10,10,0.6) 100%); } .hero__poster-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a2620 0%, #4a4338 60%, #6b6253 100%); color: rgba(255,255,255,0.5); } .hero__poster-fallback span { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border: 1px dashed rgba(255,255,255,0.4); padding: 14px 22px; border-radius: 4px; } .hero__content { position: relative; z-index: 2; width: 100%; padding-bottom: 60px; padding-top: 92px; } .hero__eyebrow { color: rgba(255,255,255,0.82); } .hero--fullbleed .display { color: #fff; max-width: 15ch; font-size: clamp(36px, 4vw, 56px); text-shadow: 0 2px 28px rgba(0,0,0,0.5); } .hero__lede { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,0.94); max-width: 56ch; margin: 24px 0 0; text-shadow: 0 1px 16px rgba(0,0,0,0.55); } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 34px; } .hero__sub-meta { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--font-sans); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .hero__sub-meta .dot { opacity: 0.5; } .hero__sound { position: absolute; right: 28px; bottom: 28px; z-index: 3; width: 42px; height: 42px; border-radius: 999px; cursor: pointer; background: rgba(10,10,10,0.45); border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(6px); transition: background var(--dur-base); } .hero__sound:hover { background: rgba(10,10,10,0.7); } /* Split (editorial) variant */ .hero--split { background: var(--bg-page); border-bottom: 1px solid var(--border-hairline); color: var(--fg-primary); } .hero--split .hero__grid { max-width: 1120px; margin: 0 auto; padding: 60px clamp(24px, 3vw, 52px) 68px; display: grid; grid-template-columns: 0.92fr 1.18fr; gap: 56px; align-items: center; } .hero--split .display { font-size: clamp(32px, 3.2vw, 46px); max-width: 15ch; text-shadow: none; } .hero--split .hero__lede { color: var(--fg-secondary); text-shadow: none; } .hero--split .hero__eyebrow { color: var(--fg-tertiary); } .hero--split .hero__sub-meta { color: var(--fg-tertiary); } .hero__framewrap { position: relative; } .hero__framewrap::before { content: ""; position: absolute; right: -16px; top: -16px; width: 56%; height: 60%; background: var(--am-brass); opacity: 0.16; border-radius: var(--radius-md); z-index: 0; } .hero__frame { position: relative; z-index: 1; aspect-ratio: 4/5; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; background: #1b1813; } .hero__frame video, .hero__frame img { width: 100%; height: 100%; object-fit: cover; } .hero__frame .hero__poster-fallback span { color: rgba(255,255,255,0.7); } /* Highlight reel — two cross-fading videos, cropped to the vertical content */ .reel { position: absolute; inset: 0; background: #15120e; } .reel__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; opacity: 1; transition: opacity 0.5s ease-out; pointer-events: none; } .reel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; object-position: center; opacity: 0; transition: opacity 1.1s ease-in-out; pointer-events: none; } .reel__v::-webkit-media-controls, .reel__v::-webkit-media-controls-enclosure { display: none !important; } /* Portrait reel frame (footage is vertical) — capped height on desktop */ .hero__frame:has(.reel) { aspect-ratio: 9 / 16; } .hero--split .hero__grid:has(.reel) { grid-template-columns: 1.22fr 0.78fr; } .hero--split .hero__framewrap:has(.reel) { width: fit-content; margin: 0 auto; } .hero--split .hero__frame:has(.reel) { width: auto; height: min(70vh, 600px); aspect-ratio: 9 / 16; } .hero--split .hero__framewrap:has(.reel)::before { right: -20px; top: -20px; width: 76%; height: 62%; } .hero__caption { font-family: var(--font-body); font-size: 18px; font-style: italic; color: var(--fg-tertiary); text-align: right; margin-top: 12px; } .hero--split .hero__actions { margin-top: 30px; } /* --- Marquee divider (slow editorial scroll of dance styles) ------------- */ .marquee { overflow: hidden; background: var(--bg-surface); padding: 18px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); } .marquee__track { display: inline-flex; white-space: nowrap; animation: marquee-scroll 60s linear infinite; will-change: transform; } .marquee__item { font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-secondary); display: inline-flex; align-items: center; } .marquee__dot { color: var(--am-brass); margin: 0 24px; font-size: 19px; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================= Intro / value sections ========================================================================= */ .value { text-align: center; } .value .display { font-size: clamp(28px, 2.6vw, 40px); margin: 0 auto; max-width: 24ch; } .value__lede { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.65; color: var(--fg-secondary); max-width: 64ch; margin: 26px auto 0; } .value__actions { margin-top: 38px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Two-up reassurance block */ .reassure { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; } .reassure__media { position: relative; } .reassure__media::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 62%; height: 68%; background: var(--am-brass); opacity: 0.16; border-radius: var(--radius-md); z-index: 0; } .reassure__photo { position: relative; z-index: 1; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--border-hairline); } .reassure__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .reassure__photo--arch { border-radius: 180px 180px var(--radius-md) var(--radius-md); } .reassure__text .display { font-size: clamp(30px, 2.8vw, 42px); margin-top: 14px; } .reassure__text p { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--fg-secondary); margin-top: 18px; } .reassure__list { list-style: none; margin: 28px 0 0; padding: 0; } /* --- Full-bleed photo band (dark, high-contrast break) ------------------- */ .photoband { position: relative; min-height: 64vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; } .photoband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; } .photoband::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.72) 100%); } .photoband__content { position: relative; z-index: 2; padding: 68px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .photoband__eyebrow { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.7); } .photoband__title { color: #fff; font-size: clamp(32px, 3.6vw, 50px); text-shadow: 0 2px 24px rgba(0,0,0,0.5); } /* --- Circular accent photo in the visit/contact column ------------------- */ .visit__photo { width: 132px; height: 132px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border-hairline); margin-bottom: 24px; } .visit__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .reassure__list li { display: flex; gap: 16px; align-items: baseline; padding: 19px 0; border-top: 1px solid var(--border-hairline); font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); } .reassure__list li:last-child { border-bottom: 1px solid var(--border-hairline); } .reassure__num { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--am-ink); min-width: 30px; } html[data-accent="brass"] .reassure__num { color: var(--am-brass); } /* ========================================================================= Reviews ========================================================================= */ .reviews { background: var(--bg-page); } .reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 44px; } .reviews__title .display { font-size: clamp(28px, 2.6vw, 40px); } .gbadge { display: flex; align-items: center; gap: 18px; } .gbadge__logo { width: 40px; height: 40px; flex: none; } .gbadge__score { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--am-ink); } .gbadge__meta { display: flex; flex-direction: column; gap: 4px; } .gbadge__stars { color: #E7A93B; letter-spacing: 2px; font-size: 16px; } .gbadge__count { font-family: var(--font-sans); font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); text-decoration: none; } .gbadge__count:hover { color: var(--am-ink); } .reviews__viewport { overflow: hidden; } .wreviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .wreviews__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } } .reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; transition: transform var(--dur-slow) var(--ease-standard); } .rcard { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); } .rcard:hover { border-color: var(--am-ink-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); } .rcard__top { display: flex; align-items: center; gap: 14px; } .rcard__avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 17px; } .rcard__who { display: flex; flex-direction: column; gap: 3px; } .rcard__name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--am-ink); } .rcard__date { font-family: var(--font-body); font-size: 14px; color: var(--fg-tertiary); } .rcard__stars { color: #E7A93B; letter-spacing: 2px; font-size: 15px; } .rcard__body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); } .rcard__g { width: 16px; height: 16px; margin-top: 2px; opacity: 0.9; } .rcard__src { display: flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--font-body); font-size: 14px; color: var(--fg-tertiary); } .reviews__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; } .reviews__arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--am-mist); background: var(--bg-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--am-ink); transition: border-color var(--dur-base), background var(--dur-base); } .reviews__arrow:hover { border-color: var(--am-ink); background: var(--am-linen); } .reviews__dots { display: flex; gap: 9px; } .reviews__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--am-mist); transition: background var(--dur-base), transform var(--dur-base); } .reviews__dot[aria-current="true"] { background: var(--am-ink); transform: scale(1.15); } /* ========================================================================= Lead form ========================================================================= */ .lead { background: var(--bg-surface-alt); } .lead__grid { display: grid; grid-template-columns: 1fr; gap: 0; } html[data-form="split"] .lead__grid { grid-template-columns: 0.85fr 1fr; gap: 72px; align-items: start; } .lead__intro { text-align: center; } html[data-form="split"] .lead__intro { text-align: left; position: sticky; top: 112px; } .lead__intro .display { font-size: clamp(30px, 2.8vw, 42px); } .lead__intro p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); max-width: 48ch; margin: 22px auto 0; } html[data-form="split"] .lead__intro p { margin-left: 0; } .lead__intro hr { margin: 28px auto 0; } html[data-form="split"] .lead__intro hr { margin-left: 0; } .lead__contacts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; justify-content: center; } html[data-form="split"] .lead__contacts { justify-content: flex-start; } .form { margin: 46px auto 0; max-width: 880px; display: flex; flex-direction: column; gap: 22px; } html[data-form="split"] .form { margin-top: 6px; max-width: none; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-tertiary); } .field label .req { color: var(--am-error); margin-left: 3px; } .field input, .field textarea { font-family: var(--font-body); font-size: 16px; color: var(--fg-primary); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 14px 16px; outline: none; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .field input::placeholder, .field textarea::placeholder { color: var(--am-stone); } .field input:focus, .field textarea:focus { border-color: var(--am-ink); box-shadow: 0 0 0 3px rgba(10,10,10,0.05); } .field textarea { resize: vertical; min-height: 120px; } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Select (preferred means of contact) — custom caret, matches inputs */ .field__select { position: relative; } .field__select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--fg-tertiary); border-bottom: 1.5px solid var(--fg-tertiary); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .field select { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--fg-primary); background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 14px 44px 14px 16px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color var(--dur-base), box-shadow var(--dur-base); } .field select:focus { border-color: var(--am-ink); box-shadow: 0 0 0 3px rgba(10,10,10,0.05); } .field select:invalid { color: var(--am-stone); } .form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; } .form__note { font-family: var(--font-body); font-size: 18px; color: var(--fg-tertiary); max-width: 38ch; } .form__btn { border: 0; } .form__status { font-family: var(--font-sans); font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; } .form__status--err { color: var(--am-error); } .form--sent { text-align: center; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-surface); padding: 56px 40px; } .form--sent .display { font-size: 34px; } .form--sent p { font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); margin: 16px auto 0; max-width: 44ch; } /* contact chips (call / text / email) */ .chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-sans); font-size: 17px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-ink); border: 1px solid var(--am-mist); border-radius: var(--radius-pill); padding: 11px 18px; transition: border-color var(--dur-base), background var(--dur-base); } .chip:hover { border-color: var(--am-ink); background: var(--am-linen); } .chip svg { width: 16px; height: 16px; } /* direct-contact list (call · text · email with real values shown) */ .contactdirect { display: flex; flex-direction: column; gap: 0; margin: 28px 0 0; width: 100%; max-width: 420px; border-top: 1px solid var(--border-hairline); } .cdrow { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--am-ink); padding: 18px 4px; border-bottom: 1px solid var(--border-hairline); transition: padding-left var(--dur-base) var(--ease-standard), color var(--dur-base); } .cdrow:hover { padding-left: 12px; } html[data-accent="brass"] .cdrow:hover { color: var(--am-brass); } .cdrow__icon { flex: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--am-mist); display: flex; align-items: center; justify-content: center; color: var(--am-ink); transition: border-color var(--dur-base), background var(--dur-base); } .cdrow:hover .cdrow__icon { border-color: var(--am-ink); background: var(--am-linen); } .cdrow__icon svg { width: 18px; height: 18px; } .cdrow__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cdrow__label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-tertiary); } .cdrow__value { font-family: var(--font-body); font-size: 16px; color: var(--am-ink); overflow: hidden; text-overflow: ellipsis; } /* ========================================================================= Social + Contact ========================================================================= */ .social { background: var(--bg-page); text-align: center; } .social .display { font-size: clamp(30px, 3vw, 44px); } .social__icons { display: flex; gap: 18px; justify-content: center; margin: 34px 0 0; } .social__icon { width: 54px; height: 54px; border-radius: 999px; border: 1px solid var(--am-mist); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; color: var(--am-ink); transition: transform var(--dur-base), border-color var(--dur-base), background var(--dur-base); text-decoration: none; } .social__icon:hover { transform: translateY(-2px); border-color: var(--am-ink); } .social__icon svg { width: 24px; height: 24px; } .social__card { margin: 56px auto 0; max-width: 540px; } .social__name { font-family: var(--font-display); font-size: 26px; color: var(--am-ink); } .social__addr { font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); margin-top: 12px; line-height: 1.7; } .social__addr a { text-decoration: none; border-bottom: 1px solid var(--am-mist); } .social__addr a:hover { border-color: var(--am-ink); } /* ========================================================================= Hours + Map ========================================================================= */ .visit { background: var(--bg-page); } .visit__grid { display: grid; grid-template-columns: 0.78fr 1.45fr; gap: 56px; align-items: stretch; } .visit__hours .display { font-size: clamp(28px, 2.8vw, 40px); } .hours-block { text-align: center; background: var(--bg-surface-alt); } .hours-block .display { font-size: clamp(28px, 2.6vw, 40px); } .hours-block .hours-list { max-width: 600px; margin: 34px auto 0; text-align: left; } .visit__info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .visit__info .display { font-size: clamp(28px, 2.8vw, 42px); } .visit__name { font-family: var(--font-display); font-size: 23px; color: var(--am-ink); margin-top: 24px; } .visit__addr p { font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); line-height: 1.7; margin-top: 8px; } .visit__info .lead__contacts { justify-content: flex-start; margin-top: 26px; } .visit__info .visit__cta { margin-top: 24px; } .hours-list { list-style: none; margin: 30px 0 0; padding: 0; } .hours-list li { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); } .hours-list li:first-child { border-top: 1px solid var(--border-hairline); } .hours-list .day { font-family: var(--font-sans); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--am-ink); } .hours-list li.is-today { background: var(--am-linen); margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .hours-list .closed { color: var(--am-stone); } .visit__cta { margin-top: 30px; } .map { position: relative; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; min-height: 480px; background: var(--am-linen); } .map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; filter: grayscale(0.35) contrast(0.95); } .map__directions { position: absolute; left: 18px; top: 18px; z-index: 2; } /* ========================================================================= Footer ========================================================================= */ .footer { background: var(--bg-surface-alt); color: var(--fg-tertiary); border-top: 1px solid var(--border-hairline); } .footer__inner { max-width: 1360px; margin: 0 auto; padding: 56px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .footer__logo { height: 52px; } .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .footer__nav a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-secondary); text-decoration: none; transition: color var(--dur-base); } .footer__nav a:hover { color: var(--am-ink); } .footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; font-family: var(--font-body); font-size: 15px; color: var(--fg-tertiary); } .footer__bottom em { font-style: italic; } /* ========================================================================= Sticky form rail / floating CTA (form placement = "float") ========================================================================= */ .floatcta { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: none; box-shadow: var(--shadow-lg); } html[data-form="float"] .floatcta { display: inline-flex; } /* ========================================================================= Responsive ========================================================================= */ /* Nav collapses to a hamburger earlier than the rest of the layout, since the six uppercase links need real room to breathe at the larger type size. */ @media (max-width: 940px) { /* Logo centered, "Menu" trigger stacked underneath — same vertical rhythm as desktop, just collapsed to the type trigger instead of the link row. */ .nav__inner { display: flex; flex-direction: column; align-items: center; gap: 11px; } .nav__links { display: none; } .nav__menu-btn { display: flex; } .nav--open { position: fixed; top: 0; left: 0; right: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Editorial full-screen menu: serif links, lots of air, a slow fade. The sticky bar (logo + "Close") stays above it so it reads as one composition. */ .nav__mobile { display: flex; flex-direction: column; justify-content: center; overflow-y: auto; position: fixed; inset: 0; z-index: 55; background: var(--bg-page); padding: 128px 32px 56px; animation: navMenuIn var(--dur-slow) var(--ease-out); } .nav__mobile-close { position: absolute; top: 16px; right: 16px; z-index: 1; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--am-ink); font-size: 24px; line-height: 1; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; transition: color var(--dur-base) var(--ease-standard); } .nav__mobile-close:hover { color: var(--am-brass-deep); } .nav__mobile-close:active { color: var(--am-brass-deep); } .nav__mobile-inner { width: 100%; max-width: 440px; margin: 0 auto; text-align: center; } .nav__mobile-eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.26em; color: var(--fg-tertiary); margin: 0 0 26px; } .nav__mobile-links { display: flex; flex-direction: column; } .nav__mobile-links a { display: block; padding: 17px 4px; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 7vw, 30px); letter-spacing: -0.01em; line-height: 1.1; color: var(--am-ink); border-bottom: 1px solid var(--border-hairline); transition: color var(--dur-base) var(--ease-standard); } .nav__mobile-links a:first-child { border-top: 1px solid var(--border-hairline); } .nav__mobile-links a[aria-current="page"] { font-style: italic; color: var(--am-brass-deep); } .nav__mobile-links a:active { color: var(--am-brass-deep); } .nav__mobile-foot { margin-top: 38px; } .nav__mobile-foot-label { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--fg-tertiary); margin-bottom: 9px; } .nav__mobile-phone { font-family: var(--font-display); font-size: clamp(22px, 6vw, 26px); color: var(--am-ink); text-decoration: none; } } @keyframes navMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 920px) { .wrap { padding: 0 30px; } .section { padding: 92px 0; } .reviews__track { grid-auto-columns: calc((100% - 24px) / 2); } .reassure, .visit__grid { grid-template-columns: 1fr; gap: 40px; } html[data-form="split"] .lead__grid { grid-template-columns: 1fr; gap: 40px; } html[data-form="split"] .lead__intro { position: static; text-align: center; } html[data-form="split"] .lead__intro p { margin-left: auto; } html[data-form="split"] .lead__contacts { justify-content: center; } .hero--split .hero__grid { grid-template-columns: 1fr; gap: 40px; } /* Keep the reel frame a TRUE 9:16 box (sized by height, capped by width) so object-fit:cover crops the clip's baked-in side pillar-bars cleanly. A max-height clamp would make the box wider than 9:16 and let the bars show. */ /* Explicit width (height derived from aspect-ratio) so the frame can never collapse on iOS Safari, which doesn't reliably size a fit-content parent from an aspect-ratio-derived width. Still a true 9:16 box, so object-fit cover crops the clip's baked-in side pillar-bars cleanly. */ .hero--split .hero__framewrap:has(.reel) { width: min(76vw, 290px); max-width: 100%; margin: 0 auto; } .hero--split .hero__frame:has(.reel) { width: 100%; height: auto; aspect-ratio: 9 / 16; } .hero--split .hero__grid:has(.reel) { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wrap { padding: 0 22px; } .section { padding: 68px 0; } .reviews__track { grid-auto-columns: 100%; } .footer__top { grid-template-columns: 1fr; gap: 32px; text-align: left; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .footer__nav { flex-direction: column; align-items: center; gap: 16px; } .field--row { grid-template-columns: 1fr; gap: 18px; } .nav__inner { padding: 12px 22px; } .nav__logo img { height: 40px; } .nav__cta { padding: 12px 18px; letter-spacing: 0.12em; } .announce { font-size: 17px; letter-spacing: 0.08em; padding: 10px 16px; } .hero--fullbleed { min-height: clamp(520px, 88vh, 720px); } .hero__content { padding-top: 92px; padding-bottom: 52px; } .hero__lede { font-size: 17px; } .hero__actions { gap: 12px; } .hero__actions .btn { width: 100%; justify-content: center; } .value__lede, .reassure__body { font-size: 17px; } .reviews__head { gap: 22px; margin-bottom: 34px; } .gbadge { gap: 14px; } .gbadge__score { font-size: 34px; } .rcard { padding: 26px 24px 24px; } .form__foot { flex-direction: column; align-items: stretch; } .form__btn { width: 100%; justify-content: center; } .lead__contacts { gap: 10px; } .chip { flex: 1; justify-content: center; min-width: 0; } .contactdirect { max-width: none; } .cdrow { gap: 14px; padding: 16px 2px; } .cdrow__value { font-size: 16px; } .cdrow__icon { width: 40px; height: 40px; } .map, .map iframe { min-height: 340px; } .map__directions { left: 14px; top: 14px; padding: 12px 18px; } .social__icon { width: 50px; height: 50px; } .footer__logo { height: 64px; } .photoband { min-height: 54vh; } .photoband__content { padding: 60px 22px; } .visit__photo { width: 110px; height: 110px; } } /* ========================================================================= Sub-pages (Wedding Dances, Gift Certificates, FAQ) — shared layout ========================================================================= */ .nav__link.is-active { color: var(--am-ink); position: relative; } .nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: var(--am-ink); } html[data-accent="brass"] .nav__link.is-active { color: var(--am-brass); } html[data-accent="brass"] .nav__link.is-active::after { background: var(--am-brass); } .pagehead { padding: 60px 0 40px; text-align: center; } .pagehead .eyebrow { margin-bottom: 20px; } .pagehead .display { font-size: clamp(30px, 3.2vw, 44px); max-width: 18ch; margin: 0 auto; } .pagehead .rule-short { margin: 30px auto 0; } .pagehead__lede { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--fg-secondary); max-width: 60ch; margin: 26px auto 0; } /* Zigzag prose + image rows */ .prows { display: flex; flex-direction: column; gap: 104px; padding-bottom: 24px; } .prow { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .prow--flip .prow__media { order: 2; } .prow__media { position: relative; } .prow__media::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 60%; height: 64%; background: var(--am-brass); opacity: 0.14; border-radius: var(--radius-md); z-index: 0; } .prow--flip .prow__media::before { right: auto; left: -18px; } .prow__frame { position: relative; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--am-linen); } .prow__frame--portrait { aspect-ratio: 3 / 4; } .prow__frame image-slot, .prow__frame img { width: 100%; height: 100%; display: block; object-fit: cover; } .prow__text .eyebrow { margin-bottom: 16px; } .prow__text .display { font-size: clamp(26px, 2.6vw, 38px); } .prow__text p { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--fg-secondary); margin: 22px 0 0; max-width: 46ch; } /* FAQ accordion */ .faq { max-width: 880px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--border-hairline); } .faq__item:first-child { border-top: 1px solid var(--border-hairline); } .faq__q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.3vw, 29px); color: var(--am-ink); line-height: 1.2; transition: color var(--dur-base); } .faq__q:hover { color: var(--fg-tertiary); } html[data-accent="brass"] .faq__q:hover { color: var(--am-brass); } .faq__icon { flex: none; width: 20px; height: 20px; color: var(--fg-tertiary); transition: transform var(--dur-base) var(--ease-standard); } .faq__item.is-open .faq__icon { transform: rotate(180deg); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-standard); } .faq__item.is-open .faq__a { grid-template-rows: 1fr; } .faq__a-clip { overflow: hidden; } .faq__a p { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--fg-secondary); margin: 0; padding: 0 6px 32px; max-width: 72ch; } /* Closing CTA band */ .pagecta { background: var(--bg-surface-alt); text-align: center; padding: 72px 0; } .pagecta .eyebrow { margin-bottom: 18px; } .pagecta .display { font-size: clamp(28px, 3vw, 42px); max-width: 20ch; margin: 0 auto; } .pagecta p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); max-width: 52ch; margin: 20px auto 0; } .pagecta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .pagecta .lead__contacts { justify-content: center; margin-top: 26px; } @media (max-width: 920px) { .prows { gap: 64px; } .prow { grid-template-columns: 1fr; gap: 34px; } .prow--flip .prow__media { order: 0; } .prow__text p { max-width: none; } .pagehead { padding: 64px 0 44px; } } /* ========================================================================= Upcoming events ========================================================================= */ .events { max-width: 1040px; margin: 0 auto; border-top: 1px solid var(--border-hairline); } .evt { display: grid; grid-template-columns: 132px 1fr auto; gap: 40px; align-items: center; padding: 34px 4px; border-bottom: 1px solid var(--border-hairline); transition: background var(--dur-base) var(--ease-standard); } .evt:hover { background: var(--bg-surface-alt); } .evt__date { text-align: center; line-height: 1; } .evt__month { font-family: var(--font-sans); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--fg-tertiary); } .evt__day { font-family: var(--font-display); font-size: 56px; color: var(--am-ink); margin: 6px 0 4px; line-height: 0.9; } .evt__weekday { font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-secondary); } .evt__body { min-width: 0; } .evt__cat { font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-secondary); margin: 0 0 10px; } html[data-accent="brass"] .evt__cat { color: var(--am-brass-deep); } .evt__title { font-family: var(--font-display); font-size: 27px; color: var(--am-ink); margin: 0; line-height: 1.15; } .evt__time { font-family: var(--font-sans); font-size: 18px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-secondary); margin: 12px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .evt__time .dot { color: var(--am-stone); } .evt__desc { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); margin: 14px 0 0; max-width: 56ch; } .evt__tag { justify-self: end; white-space: nowrap; font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-tertiary); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 8px 16px; } .evt__tag--free { color: var(--am-ink); border-color: var(--am-ink); } .events__note { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-tertiary); text-align: center; max-width: 60ch; margin: 40px auto 0; } @media (max-width: 720px) { .evt { grid-template-columns: 84px 1fr; gap: 22px; padding: 28px 2px; } .evt__day { font-size: 42px; } .evt__tag { grid-column: 2; justify-self: start; margin-top: 14px; } } /* ========================================================================= Quick facts strip (wedding) ========================================================================= */ .quickfacts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); max-width: 1040px; margin: 0 auto; } .qfact { padding: 36px 30px; text-align: center; border-right: 1px solid var(--border-hairline); } .qfact:last-child { border-right: 0; } .qfact__label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-tertiary); } html[data-accent="brass"] .qfact__label { color: var(--am-brass-deep); } .qfact__title { font-family: var(--font-display); font-size: 25px; color: var(--am-ink); margin: 14px 0 0; } .qfact__text { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--fg-secondary); margin: 8px auto 0; max-width: 30ch; } @media (max-width: 720px) { .quickfacts { grid-template-columns: 1fr; } .qfact { border-right: 0; border-bottom: 1px solid var(--border-hairline); } .qfact:last-child { border-bottom: 0; } } /* Trimmed prow copy — bold lead-in for skimmers */ .prow__text p .lead-in { color: var(--am-ink); font-weight: 600; } /* ========================================================================= Occasions grid + how-it-works steps (gift certificates) ========================================================================= */ .gift-occasions { max-width: 1040px; margin: 0 auto; } .gift-occasions .occ-head { text-align: center; margin-bottom: 48px; } .gift-occasions .occ-head .display { font-size: clamp(26px, 2.6vw, 38px); } .gift-occasions .occ-head p { font-family: var(--font-body); font-size: 20px; line-height: 1.7; color: var(--fg-secondary); max-width: 56ch; margin: 18px auto 0; } .occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; } .occ { background: var(--bg-surface); padding: 32px 30px; transition: background var(--dur-base) var(--ease-standard); } .occ:hover { background: var(--bg-surface-alt); } .occ__title { font-family: var(--font-display); font-size: 24px; color: var(--am-ink); margin: 0; } .occ__text { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--fg-secondary); margin: 10px 0 0; } .occ__note { display: inline-block; margin-top: 14px; font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--am-ink); border: 1px solid var(--am-ink); border-radius: var(--radius-pill); padding: 5px 12px; } html[data-accent="brass"] .occ__note { color: var(--am-brass-deep); border-color: var(--am-brass); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1040px; margin: 0 auto; } .step { text-align: center; } .step__num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--am-ink); } html[data-accent="brass"] .step__num { color: var(--am-brass-deep); } .step__title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--am-ink); margin: 18px 0 0; } .step__text { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); margin: 12px auto 0; max-width: 32ch; } @media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: 36px; } } .steps__note { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-tertiary); text-align: center; max-width: 56ch; margin: 48px auto 0; } /* ========================================================================= Event flyers — each event compressed into a framed poster block ========================================================================= */ .flyers { display: flex; flex-direction: column; gap: 76px; max-width: 1280px; margin: 0 auto; } .flyer { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: stretch; border: 1px solid var(--am-ink); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface); } .flyer__media { position: relative; background: var(--am-linen); border-right: 1px solid var(--am-ink); display: flex; align-items: center; justify-content: center; padding: 40px 36px; } .flyer__media image-slot, .flyer__media img { width: 100%; aspect-ratio: 2 / 3; height: auto; display: block; object-fit: cover; } .flyer__body { padding: 64px 72px; } .flyer__date { display: flex; align-items: baseline; gap: 13px; margin-bottom: 28px; } .flyer__day { font-family: var(--font-display); font-size: 84px; line-height: 0.86; color: var(--am-ink); font-variant-numeric: lining-nums; } html[data-accent="brass"] .flyer__day { color: var(--am-brass-deep); } .flyer__mon { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-tertiary); line-height: 1.3; } .flyer .eyebrow { font-size: 16px; margin-bottom: 14px; } .flyer__title { font-family: var(--font-display); font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.02; color: var(--am-ink); margin: 0; } html[data-type="caps"] .flyer__title { font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(30px, 3.4vw, 48px); } .flyer__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(21px, 2vw, 28px); color: var(--fg-secondary); line-height: 1.4; margin: 18px 0 0; } .flyer__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 0; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--am-ink); } .flyer__meta .dot { color: var(--am-stone); } .flyer__desc { font-family: var(--font-body); font-size: 18px; line-height: 1.78; color: var(--fg-secondary); margin: 22px 0 0; } .flyer__incl { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; } .flyer__incl li { display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--am-ink); } .flyer__incl svg { width: 24px; height: 24px; flex: none; color: var(--am-ink); } html[data-accent="brass"] .flyer__incl svg { color: var(--am-brass-deep); } .flyer__foot { margin-top: 42px; } .flyer__fine { font-family: var(--font-body); font-size: 16px; color: var(--fg-tertiary); margin: 16px 0 0; } /* Linen poster variant (Grand Opening) — warm, not harsh */ .flyer--ink { grid-template-columns: 1.28fr 0.72fr; background: var(--bg-surface); border-color: var(--am-ink); } .flyer--ink .flyer__day { color: var(--am-brass-deep); } .flyer--ink .flyer__title { color: var(--am-ink); } .flyer--ink .eyebrow { color: var(--fg-tertiary); } .flyer--ink .flyer__tagline { color: var(--fg-secondary); } .flyer--ink .flyer__meta { color: var(--am-ink); } .flyer--ink .flyer__meta .dot { color: var(--am-stone); } .flyer--ink .flyer__desc { color: var(--fg-secondary); } .flyer--ink .countdown { justify-content: flex-start; margin-top: 28px; gap: 12px; } .flyer--ink .cd__num { color: var(--am-ink); border-color: var(--border-strong); } .flyer--ink .cd__label { color: var(--fg-tertiary); } .flyer--ink .flyer__foot { margin-top: 28px; } .flyer__aside { padding: 64px 56px; background: var(--am-linen); border-left: 1px solid var(--border-hairline); } .flyer__aside .eyebrow { color: var(--fg-tertiary); margin-bottom: 24px; } .flyer__sched { list-style: none; margin: 0; padding: 0; } .flyer__sched li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-hairline); } .flyer__sched li:first-child { border-top: 1px solid var(--border-hairline); } .flyer__sname { font-family: var(--font-display); font-size: 24px; color: var(--am-ink); line-height: 1.22; } .flyer__stime { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--fg-tertiary); white-space: nowrap; } .flyer__note { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--fg-tertiary); margin: 24px 0 0; } @media (max-width: 1000px) { .flyer, .flyer--ink { grid-template-columns: 1fr; } /* Grid items default to min-width:auto, which lets wide content (the countdown row) push the column — and the card's overflow:hidden then clips the schedule. min-width:0 lets the single column shrink to the viewport and reflow. */ .flyer__body, .flyer__aside { min-width: 0; } .flyer__media { border-right: 0; border-bottom: 1px solid var(--am-ink); display: flex; justify-content: center; padding: 40px 28px; } .flyer__media image-slot, .flyer__media img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 2 / 3; } .flyer__body { padding: 48px 40px; } .flyer__aside { border-left: 0; border-top: 1px solid var(--border-hairline); } } @media (max-width: 560px) { .flyer__body { padding: 34px 26px; } .flyer__aside { padding: 36px 26px; } .flyer__incl { grid-template-columns: 1fr; } .flyer__day { font-size: 64px; } } /* ========================================================================= Featured event (Upcoming Events) ========================================================================= */ .efeat { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; max-width: 1100px; margin: 0 auto; } .efeat__media { aspect-ratio: 2 / 3; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--am-linen); } .efeat__media image-slot, .efeat__media img { width: 100%; height: 100%; display: block; } .efeat__body .eyebrow { margin-bottom: 18px; } .efeat__title { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 46px); line-height: 1.04; color: var(--am-ink); margin: 0; } .efeat__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.6vw, 23px); color: var(--fg-secondary); line-height: 1.4; margin: 18px 0 0; } .efeat__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 26px 0 0; font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-ink); } .efeat__meta .dot { color: var(--am-stone); } .efeat__desc { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--fg-secondary); margin: 24px 0 0; max-width: 54ch; } .efeat__cta { margin-top: 32px; } .efeat__fineprint { font-family: var(--font-body); font-size: 16px; color: var(--fg-tertiary); margin: 16px 0 0; } @media (max-width: 860px) { .efeat { grid-template-columns: 1fr; gap: 34px; } .efeat__media { aspect-ratio: 2 / 3; max-width: 460px; margin: 0 auto; width: 100%; } } /* ========================================================================= Event masthead — repeated date-stamp header that delineates each event ========================================================================= */ .evt-head { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .evt-open { border-top: 1px solid var(--am-ink); } .evt-head__index { display: block; font-family: var(--font-sans); font-size: 18px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 18px; } .evt-head .eyebrow { margin-bottom: 14px; } .evt-head__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; color: var(--am-ink); margin: 0; } html[data-type="caps"] .evt-head__title { font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.12; font-size: clamp(26px, 3.4vw, 44px); } .evt-head__date { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .evt-head__mon { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-secondary); } .evt-head__day { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 72px); line-height: 0.86; color: var(--am-ink); margin: 6px 0 4px; font-variant-numeric: lining-nums; } html[data-accent="brass"] .evt-head__day { color: var(--am-brass-deep); } .evt-head__yr { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.2em; color: var(--fg-tertiary); } @media (max-width: 680px) { .evt-head { flex-direction: column; align-items: flex-start; gap: 26px; } .evt-head__date { flex-direction: row; align-items: baseline; gap: 12px; text-align: left; } .evt-head__day { font-size: 54px; margin: 0; } } /* What's included — 2×2 hairline grid */ .incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; max-width: 1100px; margin: 0 auto; } .incl__cell { background: var(--bg-surface); padding: 34px 32px; transition: background var(--dur-base) var(--ease-standard); } .incl__cell:hover { background: var(--bg-surface-alt); } .incl__icon { width: 24px; height: 24px; color: var(--am-ink); display: block; } html[data-accent="brass"] .incl__icon { color: var(--am-brass-deep); } .incl__title { font-family: var(--font-display); font-size: 23px; color: var(--am-ink); margin: 16px 0 0; } .incl__text { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--fg-secondary); margin: 8px 0 0; } /* "This one's for you if…" checklist */ .forif { max-width: 1040px; margin: 0 auto; } .forif__head { text-align: center; margin-bottom: 46px; } .forif__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 52px; } .forif__list li { display: flex; gap: 16px; align-items: flex-start; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--fg-primary); } .forif__check { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--am-ink); } html[data-accent="brass"] .forif__check { color: var(--am-brass); } @media (max-width: 720px) { .forif__list { grid-template-columns: 1fr; gap: 18px; } } /* ========================================================================= Grand opening — ink banner + countdown + schedule ========================================================================= */ .event-divide { border: 0; border-top: 1px solid var(--border-hairline); max-width: 1100px; margin: 0 auto; } .gobanner { background: var(--am-ink); color: var(--am-paper); text-align: center; padding: 64px 0; } .gobanner .eyebrow { color: rgba(250, 248, 244, 0.55); } .gobanner__title { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); color: var(--am-paper); line-height: 1.08; margin: 18px auto 0; max-width: 20ch; } .gobanner__meta { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 248, 244, 0.7); margin: 22px 0 0; } .countdown { display: flex; gap: 16px; justify-content: center; margin: 42px 0 0; } .cd { min-width: 76px; text-align: center; } .cd__num { display: block; font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--am-paper); border: 1px solid rgba(250, 248, 244, 0.26); border-radius: var(--radius-sm); padding: 16px 0; font-variant-numeric: tabular-nums; text-align: center; } .cd__label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 248, 244, 0.5); margin-top: 11px; text-align: center; } .gobanner__cta { margin-top: 42px; } @media (max-width: 560px) { /* Let the four cells share the row and the labels shrink so "MINUTES"/"SECONDS" never force the cell (and the whole flyer card) wider than the screen. */ .countdown { gap: 8px; flex-wrap: wrap; } .cd { min-width: 0; flex: 1 1 56px; } .cd__num { font-size: 30px; padding: 11px 0; } .cd__label { font-size: 11px; letter-spacing: 0.08em; } } .godetail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; max-width: 1100px; margin: 0 auto; } .godetail .display { font-size: clamp(26px, 2.6vw, 38px); } .godetail__desc { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--fg-secondary); margin: 20px 0 0; } .godetail__note { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--bg-surface-alt); padding: 24px 26px; margin: 28px 0 0; } .godetail__note .eyebrow { margin-bottom: 10px; } .godetail__note p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--fg-secondary); } .sched { list-style: none; margin: 0; padding: 0; } .sched li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--border-hairline); } .sched li:first-child { border-top: 1px solid var(--border-hairline); } .sched__name { font-family: var(--font-display); font-size: 23px; color: var(--am-ink); } .sched__time { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-secondary); white-space: nowrap; } @media (max-width: 860px) { .godetail { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================= Thank-you / confirmation page ========================================================================= */ .ty__hero { text-align: center; padding: 120px 0 110px; } .ty__eyebrow { color: var(--am-brass); } .ty__title { font-size: clamp(30px, 3.2vw, 42px); max-width: 16ch; margin: 22px auto 0; } .ty__hero .rule-short { margin: 30px auto 0; } .ty__lede { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.65; color: var(--fg-secondary); max-width: 56ch; margin: 28px auto 0; text-wrap: pretty; } .ty__next { max-width: 720px; margin: 56px auto 0; text-align: left; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); padding: 38px 0; } .ty__next-label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--fg-tertiary); margin: 0 0 26px; text-align: center; } .ty__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; counter-reset: ty; } .ty__steps li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--fg-secondary); } .ty__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--am-ink); border-radius: 50%; font-family: var(--font-display); font-size: 20px; color: var(--am-ink); } .ty__sooner { font-family: var(--font-body); font-size: 17px; color: var(--fg-secondary); margin: 52px 0 0; } .ty__hero .lead__contacts { justify-content: center; margin-top: 20px; } .ty__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 48px; } @media (max-width: 640px) { .ty__hero { padding: 72px 0 76px; } .ty__actions .btn { flex: 1; justify-content: center; } } /* ---- Phone: tighten display headings, labels & buttons so nothing shouts ---- */ @media (max-width: 600px) { .hero--split .display, .hero--fullbleed .display { font-size: 30px; } .pagehead .display { font-size: 29px; } .value .display { font-size: 26px; } .reviews__title .display, .lead__intro .display, .pagecta .display, .social .display, .hours-block .display, .visit__hours .display, .visit__info .display, .gift-occasions .occ-head .display { font-size: 25px; } .ty__title { font-size: 28px; } .flyer__title, .efeat__title, .evt-head__title, .gobanner__title { font-size: 27px; } .field label { font-size: 13px; } .btn { font-size: 13px; letter-spacing: 0.12em; padding: 15px 26px; } .marquee__item { font-size: 13px; } .value__actions .btn, .pagecta__actions .btn, .gobanner__cta .btn { width: 100%; justify-content: center; } }