/* fonts loaded via in for faster render */ :root { --bg: #f2f2ec; --surface: #e9e8e1; --text: #272a1f; --muted: #5c5f53; --primary: #617209; --primary-text: #faf8f8; --accent: #b37736; --border: #d7d8d2; --shadow: 0 24px 70px rgba(39, 42, 31, 0.14); --font-heading: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-body: var(--font-heading); --frame-home-photo: 16 / 9; --display: var(--font-heading); --frame-section-photo: 4 / 5; --frame-detail-photo: 16 / 7; --phone-screen-frame: min(844px, 100svh); --phone-photo-to-title-gap: 10px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } section[id], .detail-screen[id] { scroll-margin-top: 74px; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.68; overflow-x: hidden; } main { flex: 1; } img { display: block; max-width: 100%; image-orientation: from-image; } a { color: inherit; } .event-alert-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding: 10px clamp(18px, 5vw, 68px); background: var(--text); color: var(--primary-text); text-align: center; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: 0.02em; } .event-alert-bar strong { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.03em; } .event-alert-bar .button { min-height: 32px; padding: 6px 16px; font-size: 11px; } .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px clamp(18px, 5vw, 68px) 8px; background: rgba(242, 242, 236, 0.9); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); } .brand { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px); font-weight: 700; text-decoration: none; } .brand-dropdown { position: relative; display: inline-flex; align-items: center; } .brand-dropdown summary { list-style: none; cursor: pointer; } .brand-dropdown summary::-webkit-details-marker { display: none; } .brand-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 0; z-index: 40; display: grid; gap: 8px; width: min(320px, calc(100vw - 36px)); padding: 14px; border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; background: rgba(250, 250, 244, 0.98); box-shadow: 0 20px 48px rgba(39, 42, 31, 0.18); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; } .brand-dropdown:hover .brand-dropdown-menu, .brand-dropdown[open] .brand-dropdown-menu, .brand-dropdown:focus-within .brand-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .brand-dropdown-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; color: var(--text); text-decoration: none; } .brand-dropdown-menu a:hover { background: rgba(97, 114, 9, 0.08); } .brand-dropdown-menu strong { color: var(--primary); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; } .brand-dropdown-menu span { color: var(--muted); font-size: 13px; } nav { display: flex; align-items: center; gap: 22px; min-width: 0; font-size: 18px; font-weight: 600; } nav a { min-width: 0; text-decoration: none; } .nav-button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: 6px; background: var(--primary); color: var(--primary-text); font-family: inherit; font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none; text-decoration: none; border: 1px solid var(--primary); } .button:hover, .nav-button:hover { background: var(--accent); border-color: var(--accent); } .button.secondary { background: transparent; color: var(--primary); border-color: rgba(97, 114, 9, 0.42); } .button.secondary:hover { background: rgba(97, 114, 9, 0.08); border-color: var(--primary); } .button.ghost { background: rgba(250, 248, 248, 0.14); border-color: rgba(250, 248, 248, 0.72); } .button.ghost-dark { background: transparent; color: var(--primary); border-color: var(--primary); } .button.small { min-height: 40px; padding: 9px 14px; font-size: 14px; } .hero { position: relative; display: block; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--border); } .hero-media { position: relative; min-width: 0; min-height: 560px; height: clamp(560px, calc(100svh - 78px), 684px); aspect-ratio: auto; background: #15140f; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 11, 8, 0.55), rgba(12, 11, 8, 0.12) 65%); } .hero-overlay { position: absolute; left: clamp(20px, 6vw, 88px); right: clamp(20px, 6vw, 88px); bottom: clamp(46px, 8vw, 96px); z-index: 1; color: var(--primary-text); display: grid; justify-items: center; text-align: center; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42); } .hero-overlay h1 { color: inherit; font-size: clamp(48px, 5.3vw, 76px); } .hero-overlay p { margin: 24px 0 0; font-size: clamp(18px, 1.46vw, 21px); font-weight: 400; } .hero:after { content: none; } .welcome-panel { background: var(--bg); border-bottom: 1px solid var(--border); } .hero-copy { width: 100%; min-width: 0; max-width: 980px; margin: 0 auto; padding: clamp(64px, 8vw, 118px) clamp(24px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; color: var(--text); text-align: left; } .kicker { margin: 0 0 12px; color: var(--primary); font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; } .frame-number { display: block; width: auto; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; color: var(--primary); background: transparent; font-size: 13px; line-height: 1; font-weight: 700; } .section-more summary .frame-number { margin: 0; padding: 0; } .page-number { margin-top: 8px; margin-bottom: 0; } .page-number { display: none; } .hero .kicker { color: var(--primary); } .welcome-panel .hero-copy h2 { font-size: clamp(40px, 4.05vw, 58px); } .welcome-panel .hero-copy p:not(.kicker) { font-size: clamp(18px, 1.46vw, 21px); line-height: 1.6; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; overflow-wrap: break-word; } h1 { margin: 0; max-width: none; font-size: clamp(46px, 7.2vw, 76px); line-height: 1; white-space: normal; } h2 { margin: 0 0 22px; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.06; } h3 { margin: 0 0 10px; font-size: clamp(23px, 3vw, 34px); line-height: 1.1; } .event-card h3, .offer-grid strong { font-family: var(--font-body); } .intro h2, .section h2 { position: relative; display: inline-block; padding-bottom: 16px; } .intro h2::after, .section h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(180px, 54vw); height: 1px; background: linear-gradient(90deg, var(--primary), rgba(97, 114, 9, 0)); } .hero-copy p:not(.kicker) { width: auto; max-width: 100%; margin: 22px 0 0; font-size: clamp(18px, 1.65vw, 22px); overflow-wrap: break-word; word-break: normal; white-space: normal; } .hero-copy .trust-strip { margin-top: 0; color: var(--primary); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.35; font-weight: 700; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .intro, .section, footer { padding: clamp(52px, 8vw, 108px) clamp(20px, 7vw, 88px); } .narrow, .section-head { max-width: 780px; } .intro { background: var(--surface); } .intro .narrow { margin: 0 auto; } .intro p, .section p, .hero-copy p:not(.kicker), .split-copy p { font-size: clamp(16px, 1.55vw, 19px); line-height: 1.75; font-family: var(--font-body); } .section { border-top: 1px solid var(--border); } .section:nth-of-type(even):not(.mystic-community-section) { background: var(--surface); } .about-building-frame img { object-position: 76% center; transform: scale(1.06); transform-origin: 76% center; } .anchor-alias { position: relative; top: -74px; display: block; width: 1px; height: 1px; overflow: hidden; } .community-hub { background: linear-gradient(180deg, #f6f5ee, #e8e7dc); } .community-hub-layout { display: grid; grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 54px); align-items: center; width: min(100%, 1180px); margin: 0 auto; } .community-hub-media { min-width: 0; width: min(100%, 640px); justify-self: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow); } .community-hub-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .community-hub-copy { min-width: 0; } .community-hub-copy h2 { max-width: 760px; } .community-hub-copy p { max-width: 820px; } .hub-directory-card { display: grid; gap: 8px; margin-top: 18px; padding: 18px; border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .hub-directory-card > span { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; } .hub-directory-card strong { color: var(--primary); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.08; } .hub-directory-card p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.35; } .hub-directory-card ul { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; } .hub-directory-card li { position: relative; padding-left: 17px; color: var(--muted); font-size: 15px; line-height: 1.3; } .hub-directory-card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } .community-hub-actions, .dictionary-grid, .collab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; } .community-action-card, .dictionary-entry { display: grid; gap: 6px; min-width: 0; min-height: 138px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.72); color: var(--text); text-decoration: none; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .community-action-card strong, .dictionary-entry h2 { color: var(--primary); font-size: clamp(20px, 2vw, 25px); line-height: 1.08; } .community-action-card span, .dictionary-entry p { color: var(--muted); font-size: 16px; line-height: 1.35; } .dictionary-entry h2, .dictionary-entry p { margin: 0; } .dictionary-entry a { align-self: end; color: var(--primary); font-weight: 700; text-decoration: none; } .community-action-card.highlight { border-color: rgba(179, 119, 54, 0.48); background: rgba(255, 249, 238, 0.88); } .hub-intake-strip { display: grid; gap: 4px; margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.66); } .hub-intake-strip strong { color: var(--primary); font-size: 18px; line-height: 1.2; } .hub-intake-strip span { color: var(--muted); font-size: 16px; line-height: 1.35; } .community-interest-panel { position: relative; display: grid; gap: 18px; margin-top: 20px; padding: 22px; border: 1px solid rgba(179, 119, 54, 0.38); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 249, 238, 0.95), rgba(255, 255, 255, 0.78)); box-shadow: 0 20px 42px rgba(39, 42, 31, 0.13); overflow: hidden; } .community-interest-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--accent); } .community-interest-head { position: relative; display: grid; gap: 8px; padding-left: 8px; } .community-interest-head span { width: fit-content; padding: 7px 10px; border: 1px solid rgba(179, 119, 54, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; } .community-interest-head strong { color: var(--primary); font-size: clamp(24px, 2.45vw, 34px); line-height: 1.08; } .community-interest-head p { margin: 0; max-width: 62ch; color: var(--text); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.4; } .community-survey { display: grid; gap: 15px; } .community-survey fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } .community-survey legend, .community-survey label > span { color: var(--primary); font-size: 16px; font-weight: 700; line-height: 1.22; } .community-choice-grid, .community-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .community-choice { display: flex; align-items: flex-start; gap: 9px; min-width: 0; min-height: 52px; padding: 12px 13px; border: 1px solid rgba(179, 119, 54, 0.32); border-radius: 8px; background: rgba(255, 255, 255, 0.72); color: var(--text); box-shadow: 0 8px 18px rgba(39, 42, 31, 0.05); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .community-choice:has(input:checked) { border-color: rgba(179, 119, 54, 0.72); background: rgba(255, 249, 238, 0.96); transform: translateY(-1px); } .community-choice input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); } .community-choice span { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.24; } .community-field-grid label, .community-wide-field { display: grid; gap: 7px; min-width: 0; } .community-survey input[type="text"], .community-survey textarea { width: 100%; min-width: 0; border: 1px solid rgba(97, 114, 9, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.84); color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; } .community-survey input[type="text"] { min-height: 44px; padding: 10px 12px; } .community-survey textarea { min-height: 124px; padding: 11px 12px; resize: vertical; } .community-survey input:focus, .community-survey textarea:focus { border-color: rgba(179, 119, 54, 0.78); outline: 2px solid rgba(179, 119, 54, 0.16); } .community-survey-route { padding: 12px 14px; border: 1px solid rgba(97, 114, 9, 0.18); border-left: 5px solid var(--accent); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--primary); font-size: 16px; font-weight: 700; line-height: 1.3; } .community-survey-actions { display: flex; flex-wrap: wrap; gap: 10px; } .community-survey-actions .button:first-child { min-height: 46px; padding-inline: 22px; box-shadow: 0 12px 24px rgba(97, 114, 9, 0.2); } .production-screen { align-items: start; } .production-photo { position: sticky; top: 92px; } .production-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .production-tab { min-height: 40px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.76); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; } .production-tab.active { border-color: rgba(179, 119, 54, 0.68); background: var(--primary); color: #fffef8; } .production-summary { display: grid; gap: 4px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.7); } .production-summary strong { color: var(--primary); font-size: 20px; line-height: 1.15; } .production-summary span { color: var(--muted); font-size: 15px; line-height: 1.35; } .engine-command-strip { display: grid; gap: 8px; margin-top: 14px; padding: 15px 16px; border: 1px solid rgba(179, 119, 54, 0.42); border-radius: 8px; background: rgba(255, 249, 238, 0.9); } .engine-command-strip strong { color: var(--primary); font-size: clamp(20px, 2vw, 24px); line-height: 1.1; } .engine-command-strip span { color: var(--text); font-size: 16px; line-height: 1.35; } .production-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .production-card, .custom-builder, .batch-builder, .google-queue, .google-lanes, .page-factory, .approval-factory, .sitemap-builder, .profile-event-factory { display: grid; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .production-card h2, .custom-builder h2, .batch-builder h2, .google-queue h2, .google-lanes h2, .page-factory h2, .approval-factory h2, .sitemap-builder h2, .profile-event-factory h2 { margin: 0; color: var(--primary); font-size: clamp(20px, 2vw, 25px); line-height: 1.08; } .production-card textarea, .custom-builder textarea, .batch-builder textarea, .page-factory textarea, .approval-factory textarea, .sitemap-builder textarea, .profile-event-factory textarea { width: 100%; min-height: 176px; resize: vertical; padding: 12px; border: 1px solid rgba(39, 42, 31, 0.2); border-radius: 8px; background: rgba(255, 254, 248, 0.86); color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; } .production-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .search-output { display: grid; gap: 7px; } .search-output strong { color: var(--primary); font-size: 14px; letter-spacing: 0.06em; } .search-output p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.35; } .search-chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .search-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 9px; border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 999px; background: rgba(246, 245, 238, 0.9); color: var(--primary); font-size: 13px; font-weight: 700; text-decoration: none; } .custom-builder, .batch-builder, .google-queue, .google-lanes, .page-factory, .approval-factory, .sitemap-builder, .profile-event-factory { margin-top: 18px; } .custom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .custom-fields label { display: grid; gap: 6px; color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .custom-fields input, .custom-fields select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid rgba(39, 42, 31, 0.2); border-radius: 8px; background: rgba(255, 254, 248, 0.9); color: var(--text); font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; } .wide-label { display: grid; gap: 6px; color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .wide-label textarea { min-height: 110px; letter-spacing: 0; text-transform: none; } .google-queue p, .google-lanes p, .approval-factory p, .sitemap-builder p, .profile-event-factory p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.35; } .queue-list { display: grid; gap: 8px; } .queue-item { display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.5fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 10px; border: 1px solid rgba(97, 114, 9, 0.18); border-radius: 8px; background: rgba(255, 254, 248, 0.74); } .queue-item strong { color: var(--primary); font-size: 14px; line-height: 1.2; } .queue-item span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.25; } .queue-item a { color: var(--primary); font-size: 13px; font-weight: 700; text-decoration: none; } .lane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lane-card { display: grid; gap: 7px; min-width: 0; padding: 13px; border: 1px solid rgba(97, 114, 9, 0.18); border-radius: 8px; background: rgba(255, 254, 248, 0.74); } .lane-card strong { color: var(--primary); font-size: 18px; line-height: 1.1; } .lane-card span, .lane-card em { color: var(--muted); font-size: 14px; line-height: 1.35; } .lane-card em { font-style: normal; font-weight: 700; } .community-hub-note { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.54); color: var(--text); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.42; } .community-share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .copy-status { min-height: 1.4em; margin: 8px 0 0; color: var(--primary); font-size: 15px; font-weight: 700; line-height: 1.3; } .authority-grid, .action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } .authority-grid span, .action-card, .rental-card, .price-row { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--text); text-decoration: none; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .authority-grid span { display: grid; place-items: center; min-height: 58px; padding: 12px; color: var(--primary); font-size: 17px; font-weight: 700; text-align: center; } .action-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 78px; padding: 15px 16px; } .action-card strong, .rental-card summary strong, .price-row span { color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.18; } .action-card strong { grid-column: 1; } .action-card span, .rental-card p { color: var(--muted); font-size: 16px; line-height: 1.28; } .action-card > span:first-of-type { grid-column: 1; } .action-card span:last-child, .rental-card summary span, .price-row strong, .booking-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--primary); font-size: 17px; font-weight: 700; line-height: 1.2; text-align: right; white-space: nowrap; } .action-card.placeholder { border-style: dashed; background: rgba(233, 232, 225, 0.62); } .offering-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 1040px); margin-top: 22px; } .offering-path { min-width: 0; min-height: 92px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--text); text-decoration: none; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .offering-path strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 18px; line-height: 1.18; } .offering-path span { color: var(--muted); font-size: 15px; line-height: 1.3; } .home-offering-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 0; margin-bottom: 16px; } .home-offering-paths .offering-path { min-height: 76px; padding: 13px; } .featured-path { border-color: rgba(179, 119, 54, 0.5); background: rgba(255, 249, 238, 0.9); } .action-card:not(.placeholder):hover, .rental-card:hover, .price-row:hover, .offering-path:hover { border-color: var(--primary); box-shadow: 0 15px 34px rgba(97, 114, 9, 0.14); } .service-dialog { width: min(calc(100vw - 34px), 520px); padding: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(28, 29, 23, 0.28); } .service-dialog::backdrop, .program-dialog::backdrop { background: rgba(20, 19, 14, 0.46); } .service-dialog h3 { margin: 0 0 14px; padding-right: 64px; font-size: clamp(24px, 4vw, 34px); } .service-dialog p { margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.45; } .program-dialog { width: min(calc(100vw - 28px), 620px); height: min(844px, calc(100svh - 28px)); max-height: min(844px, calc(100svh - 28px)); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-shadow: 0 24px 70px rgba(28, 29, 23, 0.28); } .program-dialog-media { position: relative; aspect-ratio: var(--frame-detail-photo); overflow: hidden; } .program-dialog-media img { width: 100%; height: 100%; object-fit: cover; } .program-dialog-media span { position: absolute; left: 14px; bottom: 12px; max-width: calc(100% - 28px); padding: 7px 10px; border-radius: 999px; background: rgba(242, 242, 236, 0.88); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.1; } .program-dialog-copy { padding: 18px 20px 22px; } .program-dialog h3 { margin: 0 48px 10px 0; color: var(--text); font-size: clamp(28px, 8vw, 40px); line-height: 0.98; } .program-dialog h4 { margin: 14px 0 6px; color: var(--primary); font-size: 15px; line-height: 1.1; font-weight: 700; } .program-dialog p, .program-dialog li { color: var(--muted); font-size: 16px; line-height: 1.36; } .program-dialog p { margin: 0 0 8px; } .program-dialog ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; } .program-dialog .button { margin-top: 14px; } .dialog-close { position: absolute; top: 14px; right: 16px; z-index: 2; padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .rental-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } .rental-card summary { display: grid; gap: 4px; padding: 14px 16px; color: var(--text); cursor: pointer; list-style: none; } .rental-card summary::-webkit-details-marker { display: none; } .rental-card p { margin: 0; padding: 0 16px 10px; } .booking-link { display: block; margin: 0 16px 16px; text-decoration: none; } .booking-link:hover { color: var(--accent); } .price-list { display: grid; gap: 22px; margin-top: 24px; } .price-group { display: grid; gap: 10px; } .price-group h3 { margin: 0; } .price-list .action-grid { margin-top: 8px; } .price-list-preview { width: min(100%, 1040px); margin: 18px auto 0; grid-template-columns: 1fr; } .price-list-preview .price-group { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .price-list-preview h3 { font-size: clamp(21px, 2.2vw, 28px); } .price-list-preview .action-grid { gap: 6px; } .price-list-preview .action-card { min-height: 48px; padding: 8px 11px; } .price-list-preview .action-card strong { font-size: 16px; } .price-list-preview .action-card > span:first-of-type { display: none; } .price-list-preview .action-card > span:last-child { grid-row: 1; } .price-list-preview .action-card > span:only-of-type { display: block; grid-column: 2; grid-row: 1 / span 2; } .price-row { display: grid; gap: 6px; min-height: 76px; padding: 15px 16px; text-decoration: none; } .price-row:first-of-type { border-top: 1px solid var(--border); } .events-section { background: linear-gradient(180deg, var(--bg), #ece9df); } .gallery-section { background: linear-gradient(180deg, var(--bg), #edece4); content-visibility: auto; contain-intrinsic-size: auto 600px; } .gliding-gallery-section { display: grid; gap: clamp(12px, 1.8vw, 20px); overflow: hidden; background: linear-gradient(180deg, var(--bg), #edece4); } .gallery-story-heading { max-width: 900px; margin: 0 auto; text-align: center; } .gallery-story-heading.gratitude-note { justify-self: center; max-width: 780px; margin: 0 auto; padding: clamp(18px, 2.4vw, 28px); text-align: center; background: rgba(255, 255, 248, 0.74); border: 1px solid rgba(92, 99, 65, 0.18); border-radius: 8px; box-shadow: 0 14px 34px rgba(39, 42, 31, 0.11); } .gallery-story-heading.gratitude-note h2 { margin: 0 0 0.75rem; font-size: clamp(34px, 4vw, 52px); } .gallery-story-heading.gratitude-note .gratitude-photo { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 72%; margin: 0 0 clamp(14px, 2vw, 20px); border-radius: 8px; box-shadow: 0 18px 42px rgba(39, 42, 31, 0.18); } .gallery-story-heading.gratitude-note .gratitude-quote { margin: 0 auto; padding: 0 4px; max-width: 660px; border: 0; } .gallery-story-heading.gratitude-note .gratitude-quote p { margin: 0; color: var(--text); font-size: 18px; line-height: 1.6; font-style: italic; } .gallery-story-heading.gratitude-note .gratitude-quote cite { display: block; margin-top: 0.85rem; color: var(--muted); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; } .gallery-story-heading p:not(.kicker) { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.58; } .gallery-story-heading.gratitude-note p:not(.kicker) { max-width: none; margin: 0.72rem 0 0; color: var(--text); font-size: clamp(20px, 1.75vw, 25px); line-height: 1.5; } .gallery-story-heading.gratitude-note .gratitude-quote p { max-width: 660px; margin: 0 auto; color: var(--text); font-size: 18px; line-height: 1.6; font-style: italic; } .gallery-story-heading.gratitude-note p:last-child { margin-top: 1.2rem; color: var(--muted); font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; } .gliding-gallery-viewport { width: 100%; overflow: hidden; padding: 6px 0 18px; scrollbar-width: none; } .gliding-gallery-viewport::-webkit-scrollbar { display: none; } .gliding-gallery-track { display: flex; gap: clamp(16px, 2vw, 24px); width: max-content; padding: 0 clamp(18px, 5vw, 68px); scroll-snap-type: none; will-change: transform; animation: mystic-gallery-glide 78s linear infinite; } .gliding-gallery-section:hover .gliding-gallery-track, .gliding-gallery-section:focus-within .gliding-gallery-track { animation-play-state: paused; } @keyframes mystic-gallery-glide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% + 100vw), 0, 0); } } .gallery-testimonial-slide { width: clamp(292px, 34vw, 430px); flex: 0 0 auto; display: grid; gap: 12px; align-content: start; scroll-snap-align: start; } .gallery-testimonial-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 42px rgba(39, 42, 31, 0.18); } .gallery-testimonial-slide blockquote { margin: 0; padding: 0 4px; } .gallery-testimonial-slide blockquote p { margin: 0; color: var(--text); font-size: clamp(16px, 1.18vw, 18px); line-height: 1.48; font-style: italic; } .gallery-testimonial-slide blockquote cite { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.35; font-style: normal; } @media (prefers-reduced-motion: reduce) { .gliding-gallery-viewport { overflow-x: auto; } .gliding-gallery-track { animation: none; transform: none; scroll-snap-type: x mandatory; } } .programs-section { background: linear-gradient(180deg, var(--bg), #ece9df); } .gallery-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .gallery-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .gallery-section .section-hero-photo img { object-position: 76% center; transform: scale(1.28); } .gallery-photo-grid img:nth-child(4) { object-position: center 62%; } .book-menu-dialog { width: min(calc(100vw - 28px), 840px); max-height: min(760px, calc(100svh - 28px)); padding: clamp(22px, 4vw, 34px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: 0 24px 70px rgba(28, 29, 23, 0.28); } .book-menu-dialog::backdrop { background: rgba(20, 19, 14, 0.46); } .book-menu-dialog h3 { margin: 0 72px 20px 0; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; } .booking-direct-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); } .booking-direct-group { display: grid; gap: 8px; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .booking-direct-group h4 { margin: 0 0 4px; color: var(--text); font-size: clamp(20px, 2vw, 28px); line-height: 1; } .booking-direct-group a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(191, 184, 167, 0.72); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--text); text-decoration: none; } .booking-direct-group a:hover { border-color: var(--primary); box-shadow: 0 10px 22px rgba(97, 114, 9, 0.12); } .booking-direct-group strong { font-size: 15px; line-height: 1.18; } .booking-direct-group span { color: var(--primary); font-size: 15px; font-weight: 800; white-space: nowrap; } .mystic-spa-direct-button { display: inline-flex; grid-column: 1 / -1; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border: 1px solid var(--primary); border-radius: 6px; background: var(--primary); color: var(--primary-text); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-align: center; text-decoration: none; text-transform: uppercase; } .mystic-spa-direct-button:hover { background: var(--accent); border-color: var(--accent); } .about-spa-name { color: var(--primary); font-size: 1.62em; font-weight: 800; letter-spacing: 0; text-decoration-thickness: 1px; text-underline-offset: 0.12em; } .gallery-proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; } .gallery-proof-strip img { width: 100%; height: 100%; aspect-ratio: var(--frame-detail-photo); object-fit: cover; border-radius: 8px; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.1); } .interest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .interest-card { display: grid; align-content: start; gap: 5px; min-height: 104px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .interest-card strong { color: var(--text); font-size: 18px; line-height: 1.15; } .interest-card span { color: var(--muted); font-size: 15px; line-height: 1.26; } .program-grid { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; } .program-card { width: 100%; } .program-card strong { font-size: 17px; } .program-card span { text-align: right; } .feature-image.compact { width: min(100%, 920px); margin: 34px auto 0; aspect-ratio: var(--frame-home-photo); } .feature-image.compact img { height: clamp(260px, 30vw, 390px); min-height: 0; } .event-grid, .offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .event-card, .offer-grid a, .contact-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 16px 44px rgba(39, 42, 31, 0.1); } .event-card p, .offer-grid span, .split-copy p, .contact p, .map-section p { font-weight: 400; line-height: 1.72; } .event-card { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; } .event-card .button { margin-top: auto; } .event-date { margin: 0 0 12px; color: var(--muted); font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; letter-spacing: 0.01em; } .events-section .section-head { display: grid; gap: 12px; } .events-section .section-head p:not(.frame-number) { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.34; } .events-section .section-head .experience-authority, .events-detail-screen .experience-authority { max-width: 760px; color: var(--text); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.34; } .experience-trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .experience-trust-row span { padding: 7px 10px; border: 1px solid rgba(97, 114, 9, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.68); color: var(--primary); font-size: 14px; font-weight: 700; line-height: 1.1; } .events-detail-screen .detail-copy > p { margin-bottom: 14px; } .featured-event-card { display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 12px 0 12px; padding: 18px 20px; border: 1px solid rgba(179, 119, 54, 0.42); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 249, 238, 0.96), rgba(255, 255, 255, 0.78)); box-shadow: 0 16px 38px rgba(39, 42, 31, 0.1); } .featured-event-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.1); } .featured-event-card h3, .featured-event-card p { margin: 0; } .featured-event-card h3 { color: var(--text); font-size: clamp(24px, 2.5vw, 34px); } .featured-event-card p { color: var(--muted); font-size: 16px; line-height: 1.35; } .featured-event-card .event-date { color: var(--text); } .featured-event-card .event-location { margin-top: 4px; color: var(--primary); font-weight: 700; } .featured-event-card .event-discount-line, .event-discount-line { margin-top: 8px; color: var(--primary); font-weight: 700; } .discount-note { margin: 8px 0 0; color: var(--primary); font-size: clamp(16px, 1.25vw, 18px); font-weight: 700; line-height: 1.35; } .detail-discount-note { margin: 14px 0 16px; } .event-eyebrow { display: inline-flex; width: fit-content; margin-bottom: 6px; padding: 6px 9px; border-radius: 999px; background: var(--primary); color: var(--primary-text); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; line-height: 1; } .experience-flow, .experience-comfort-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; } .experience-comfort-row { margin-top: -6px; } .experience-flow span, .experience-comfort-row span { min-height: 40px; padding: 9px 10px; border: 1px solid rgba(97, 114, 9, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.72); color: var(--primary); font-size: 15px; font-weight: 700; line-height: 1.15; text-align: center; } .experience-comfort-row span { border-color: rgba(179, 119, 54, 0.22); background: rgba(255, 249, 238, 0.72); color: var(--text); } .event-ticket-card { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; overflow: hidden; text-decoration: none; } .event-card-image { width: calc(100% + 20px); margin: -10px -10px 5px; aspect-ratio: 16 / 7; object-fit: cover; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--surface); box-shadow: none; } .event-ticket-card strong { margin-top: 2px; } #private-offers-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } #private-offers-detail .visual-offer-card, .studio-rental-detail .visual-offer-card { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; overflow: hidden; } .visual-offer-card .offer-card-image { width: calc(100% + 20px); margin: -10px -10px 6px; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--surface); box-shadow: none; } .visual-offer-card strong, .visual-offer-card .offer-card-price, .visual-offer-card .offer-card-description { grid-column: auto; grid-row: auto; align-self: auto; text-align: left; white-space: normal; } .visual-offer-card strong { margin: 0; font-size: clamp(19px, 1.6vw, 23px); } .visual-offer-card .offer-card-price { color: var(--primary); font-size: 17px; font-weight: 700; line-height: 1.15; } .visual-offer-card .offer-card-description { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.35; } .event-ticket-card span { text-align: left; } .event-ticket-card span:not(.event-card-cta) { width: 100%; } .event-ticket-card .event-card-cta { display: inline-flex; width: fit-content; align-self: flex-end !important; grid-column: auto; grid-row: auto; margin-top: auto; padding: 7px 10px; border-radius: 6px; background: var(--primary); color: var(--primary-text) !important; font-size: 14px !important; font-weight: 700; line-height: 1.2 !important; text-align: left !important; white-space: normal !important; } .community-referral-card { display: grid; grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.05fr); gap: clamp(28px, 4vw, 48px); margin-top: 28px; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(179, 119, 54, 0.32); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 249, 238, 0.96), rgba(255, 255, 255, 0.84)), radial-gradient(circle at 8% 0%, rgba(179, 119, 54, 0.16), transparent 34%); box-shadow: 0 18px 46px rgba(39, 42, 31, 0.12); } .community-referral-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } .community-referral-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.16); } .community-referral-media img:first-child { object-position: center center; } .community-referral-media img:last-child { object-position: center center; } .community-referral-copy { display: grid; align-content: start; gap: 16px; } .community-referral-copy > span { color: var(--text); font-family: var(--display); font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: 0; line-height: 0.98; text-transform: none; } .community-referral-copy h3 { margin: 0; color: var(--text); font-size: clamp(30px, 4vw, 52px); line-height: 0.98; } .community-referral-copy p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; } .community-referral-copy .community-referral-note { margin-top: 6px; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--text); font-weight: 700; } .community-referral-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; } .community-referral-form label, .community-referral-wide { display: grid; gap: 6px; } .community-referral-form label span { color: var(--text); font-size: 13px; font-weight: 800; } .community-referral-form input, .community-referral-form textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: var(--text); font: inherit; font-size: 15px; } .community-referral-form input { min-height: 44px; padding: 0 12px; } .community-referral-form textarea { min-height: 94px; padding: 11px 12px; resize: vertical; } .community-referral-form input:focus, .community-referral-form textarea:focus { outline: 2px solid rgba(179, 119, 54, 0.28); outline-offset: 2px; } .community-referral-wide, .community-referral-form .button, .community-referral-form .copy-status { grid-column: 1 / -1; } .community-referral-form .button { width: fit-content; justify-self: end; } .split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 74px); align-items: center; } .split.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .split.reverse .split-copy { order: 2; } .split img { width: 100%; height: min(55vw, 640px); min-height: 360px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); } .studio-rental-photo { filter: brightness(1.05) saturate(1.05); } .split-copy p { color: var(--text); } .split-copy .button { margin-top: 12px; } .horizontal-feature { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 5vw, 58px); align-items: center; } .horizontal-feature.reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } .horizontal-feature .split-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .horizontal-feature img { width: min(100%, 640px); height: auto; min-height: 0; aspect-ratio: var(--frame-section-photo); justify-self: center; object-fit: cover; } .horizontal-feature h2 { margin-bottom: 18px; } .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; } .offer-grid a { display: grid; gap: 10px; text-decoration: none; } .offer-grid strong { font-size: 19px; font-weight: 600; line-height: 1.28; letter-spacing: 0.01em; } .offer-grid span { font-size: 17px; font-weight: 400; } .offer-grid span, .contact-card, footer { color: var(--muted); } .section-more { width: 100%; margin-top: 8px; text-align: left; } .section-more { display: none; } .read-more-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 8px; padding: 2px 0 8px; color: var(--primary); font-size: 18px; font-weight: 700; text-decoration: none; } .read-more-link::after { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 999px; font-size: 13px; line-height: 1; } .section-more.wide { max-width: 1040px; margin-left: auto; margin-right: auto; } .section-more summary { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 2px 0 8px; color: var(--primary); font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; } .section-more summary::-webkit-details-marker { display: none; } .section-more summary::after { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 999px; font-size: 13px; line-height: 1; } .section-more[open] summary::after { content: "-"; } .more-panel { margin-top: 10px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 12px 34px rgba(39, 42, 31, 0.08); } .more-panel p:first-child { margin-top: 0; } .more-panel p:last-child { margin-bottom: 0; } .inside-photo { width: 100%; margin: 0 0 20px; aspect-ratio: var(--frame-detail-photo); border-radius: 8px; overflow: hidden; box-shadow: 0 14px 36px rgba(39, 42, 31, 0.1); } .inside-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } #private-sound-healing-detail .inside-photo img { object-position: center 84%; } .detail-screen { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--bg), #eeeae0); } .detail-screen .inside-photo { width: min(100%, 980px); margin: 0 auto 22px; aspect-ratio: var(--frame-detail-photo); } .detail-copy { width: min(100%, 1040px); margin: 0 auto; } .detail-copy h2 { margin-bottom: 12px; } .detail-copy p { max-width: 920px; } .detail-copy .page-number { margin-top: 18px; } .feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 18px 0 22px; padding: 0; list-style: none; } .feature-list li { position: relative; padding-left: 18px; color: var(--text); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.42; } .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); } .compact-list { gap: 6px 12px; margin: 12px 0 14px; } .compact-list li { font-size: 16px; line-height: 1.25; } .private-session-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 20px; } .private-session-panel { padding: 18px; border: 1px solid rgba(97, 114, 9, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.68); box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .private-session-panel h3 { margin-bottom: 10px; color: var(--primary); font-size: clamp(22px, 2.2vw, 30px); } .private-session-panel .feature-list { grid-template-columns: 1fr; margin: 0; } .studio-rental-detail .detail-copy p { max-width: 960px; } .studio-rental-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px; } .studio-rental-proof-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 28px rgba(39, 42, 31, 0.08); } .studio-rental-contact-note { margin-top: 14px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.45; } #studio-rental .more-panel { padding: 14px; } #studio-rental .inside-photo { margin-bottom: 12px; } #studio-rental .more-panel p { margin: 0 0 8px; } .mini-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; } .mini-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 24px rgba(39, 42, 31, 0.08); } .detail-frame { background: linear-gradient(180deg, var(--bg), #eeeae0); } .detail-layout { display: grid; gap: clamp(24px, 4vw, 42px); margin-top: 34px; } .detail-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: clamp(22px, 4vw, 44px); align-items: center; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 16px 42px rgba(39, 42, 31, 0.08); } .detail-row img { width: 100%; height: clamp(260px, 34vw, 430px); object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); } .detail-row p { margin-top: 0; } .detail-row .kicker { margin-bottom: 10px; } .see-more { display: inline-flex; margin-top: 6px; color: var(--primary); font-size: 18px; font-weight: 700; text-decoration: none; } .see-more::after { content: " ->"; } .photo-lineup { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 5vw, 54px); } .photo-lineup figure { margin: 0; } .photo-lineup img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(39, 42, 31, 0.08); } .photo-lineup figcaption { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.35; } .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 34px; } .contact-card p { margin: 0 0 10px; font-size: 16px; } .contact-card a { color: var(--primary); font-weight: 700; } .connect-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow); } .connect-form label { display: grid; gap: 6px; color: var(--text); font-size: 14px; font-weight: 600; } .connect-form input { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font: inherit; padding: 10px 12px; } .connect-form input:focus { outline: 2px solid rgba(97, 114, 9, 0.28); border-color: var(--primary); } .map-section { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(24px, 5vw, 58px); align-items: center; background: var(--surface); } .map-section iframe { width: 100%; min-height: 360px; border: 0; border-radius: 8px; box-shadow: var(--shadow); } .map-section .button { margin-top: 14px; } .map-section p { font-size: clamp(19px, 1.8vw, 23px); } .contact-hub { background: var(--surface); } .contact-intro { max-width: 1080px; margin: 0 auto; } .contact-detail-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-top: 18px; } .contact-hub iframe { width: 100%; min-height: 360px; margin-top: 22px; border: 0; border-radius: 8px; box-shadow: var(--shadow); } @media (min-width: 861px) { .hero { min-height: auto; } .hero-media { min-height: 620px; height: calc(100svh - 78px); max-height: 860px; aspect-ratio: auto; } .section, .detail-screen { min-height: auto; padding-top: clamp(44px, 5.4vw, 78px); padding-bottom: clamp(44px, 5.4vw, 78px); } .detail-screen { justify-content: flex-start; } .detail-screen .inside-photo { width: min(100%, 880px); margin-bottom: 18px; } .events-detail-screen { padding-top: clamp(28px, 3.4vw, 48px); padding-bottom: clamp(36px, 4vw, 58px); } .events-detail-screen .inside-photo { width: min(100%, 720px); margin-bottom: 10px; } .events-detail-screen .action-grid { margin-top: 12px; } .event-grid, .offer-grid { max-width: 1040px; margin-left: auto; margin-right: auto; } .event-card, .offer-grid a { padding: 18px 24px; box-shadow: 0 12px 34px rgba(39, 42, 31, 0.09); } .event-card p, .offer-grid span { line-height: 1.5; } .event-date { margin-bottom: 8px; } .offer-grid a { gap: 6px; } } footer { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); align-items: stretch; gap: 0; overflow: hidden; background: var(--surface); color: #f5f2ea; font-size: clamp(16px, 1.2vw, 19px); padding: 0; border-top: 1px solid var(--border); } .footer-media { position: relative; min-width: 0; min-height: 430px; aspect-ratio: var(--frame-home-photo); background: linear-gradient(0deg, rgba(18, 16, 12, 0.18), rgba(18, 16, 12, 0.02) 56%), url("images/img_27.webp") center top / cover no-repeat; } footer a { color: inherit; text-decoration: none; font-weight: 600; } .footer-brand, .footer-contact, .footer-right, .footer-socials { display: grid; gap: 10px; } .footer-brand { position: relative; z-index: 2; max-width: 100%; gap: 12px; align-content: center; padding: 0; background: transparent; } .footer-brand > strong, .footer-contact strong { color: #fffaf0; font-weight: 700; } .footer-brand > strong { font-family: var(--font-heading); font-size: clamp(36px, 4vw, 54px); line-height: 0.95; } .footer-brand > span, .footer-contact span { color: rgba(245, 242, 234, 0.76); font-size: 16px; line-height: 1.35; } .footer-contact { grid-template-columns: 1fr; width: min(100%, 680px); margin-top: 8px; gap: 0; } .footer-contact a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(245, 242, 234, 0.16); } .footer-contact strong { font-size: 16px; } .footer-contact span { overflow-wrap: anywhere; } .footer-right { position: relative; z-index: 2; width: 100%; align-self: stretch; justify-self: stretch; margin: 0; gap: 18px; align-content: center; padding: clamp(34px, 5vw, 72px) clamp(24px, 6vw, 76px); border: 0; border-radius: 0; background: var(--text); box-shadow: none; } .footer-contact-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: stretch; max-width: 300px; } .footer-contact-icons a { display: inline-flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; min-height: 48px; border: 1px solid rgba(245, 242, 234, 0.34); border-radius: 8px; background: rgba(39, 42, 31, 0.78); color: #fffaf0; font-size: 22px; font-weight: 800; line-height: 1; } .footer-socials { position: static; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-items: stretch; } .footer-socials a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px; border: 1px solid rgba(245, 242, 234, 0.28); border-radius: 6px; background: rgba(39, 42, 31, 0.74); text-align: center; } .footer-map-card { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(245, 242, 234, 0.3); border-radius: 8px; background: rgba(39, 42, 31, 0.78); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); } .footer-map-card iframe { display: block; width: 100%; height: 220px; min-height: 0; border: 0; filter: saturate(0.92); } @media (max-width: 860px) { .site-header { align-items: flex-start; flex-direction: column; gap: 12px; } nav { width: 100%; gap: 10px; flex-wrap: wrap; overflow: visible; padding-bottom: 4px; } nav a { flex: 0 0 auto; white-space: nowrap; } .hero { width: 100%; } .hero-media { min-height: 560px; height: 72svh; aspect-ratio: auto; } .hero-copy { width: 100%; max-width: 100vw; } .event-grid, .offer-grid, .authority-grid, .action-grid, .featured-event-card, .community-hub-layout, .community-hub-actions, .collab-grid, .dictionary-grid, .production-grid, .community-choice-grid, .community-field-grid, .custom-fields, .lane-grid, .rental-options, .price-list-preview, .detail-row, .split, .split.reverse, .contact, .map-section, .contact-detail-grid { grid-template-columns: 1fr; } .split.reverse .split-copy { order: 0; } .community-hub-media { aspect-ratio: var(--frame-section-photo); } .experience-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-event-card .button { justify-self: start; } .production-photo { position: static; } .horizontal-feature > img { order: 0; } .split img { height: auto; min-height: 0; aspect-ratio: 3 / 4; object-fit: cover; } .detail-row { grid-template-columns: 1fr; } .detail-row img { height: auto; aspect-ratio: 4 / 3; } .photo-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer { grid-template-columns: 1fr; } .footer-media { width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; min-height: 320px; } .footer-right { width: 100%; padding: clamp(24px, 5vw, 42px); } .footer-contact-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 520px) { .site-header { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; } .brand { font-size: 21px; line-height: 1; } nav { width: auto; margin-left: auto; gap: 0; padding-bottom: 0; } nav a { display: none; } .nav-button { display: inline-flex; min-height: 44px; padding: 10px 14px; font-size: 13px; line-height: 1; } .hero { min-height: auto; } .hero-media { aspect-ratio: auto; height: 70svh; min-height: 520px; } .hero-copy { padding: 16px 24px 20px; overflow: hidden; max-width: 100%; } .hero-copy p:not(.kicker) { width: 100%; max-width: 100%; margin-top: 13px; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; } .hero-copy .trust-strip { margin-top: 0; font-size: 15px; line-height: 1.3; } .service-dialog { padding: 22px; } .program-dialog { width: calc(100vw - 18px); height: min(844px, calc(100svh - 18px)); max-height: min(844px, calc(100svh - 18px)); } .program-dialog-copy { padding: 16px 17px 18px; } .program-dialog h3 { margin-right: 48px; font-size: 32px; } .program-dialog p, .program-dialog li { font-size: 15px; line-height: 1.3; } .program-dialog h4 { margin-top: 10px; margin-bottom: 5px; font-size: 13px; } .program-dialog ul { gap: 3px; } .service-dialog h3 { padding-right: 52px; font-size: 24px; } .home-offering-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; } .home-offering-paths .offering-path { display: grid; place-items: center; min-height: 48px; padding: 7px 6px; text-align: center; } .home-offering-paths .offering-path strong { margin: 0; font-size: 12px; line-height: 1.12; } .home-offering-paths .offering-path span { display: none; } .community-hub-layout { gap: 14px; } .community-hub-media { aspect-ratio: var(--frame-section-photo); } .community-hub-copy .kicker { margin-bottom: 8px; } .community-hub-actions, .collab-grid, .dictionary-grid { gap: 8px; margin-top: 14px; } .community-action-card, .dictionary-entry { min-height: 0; padding: 12px; } .community-action-card strong, .dictionary-entry h2 { font-size: 20px; } .community-action-card span, .dictionary-entry p, .community-hub-note { font-size: 15px; line-height: 1.3; } .production-tabs, .production-actions { gap: 6px; } .production-tab { flex: 1 1 auto; min-height: 36px; padding: 8px 10px; font-size: 13px; } .production-card, .custom-builder, .batch-builder, .google-queue, .google-lanes, .page-factory, .approval-factory, .sitemap-builder, .profile-event-factory { padding: 12px; } .production-card textarea, .custom-builder textarea, .batch-builder textarea, .page-factory textarea, .approval-factory textarea, .sitemap-builder textarea, .profile-event-factory textarea { min-height: 152px; font-size: 14px; } .queue-item { grid-template-columns: 1fr; gap: 5px; } .lane-card { padding: 11px; } .community-hub-note { margin-top: 10px; padding: 11px 12px; } .experience-trust-row, .experience-flow { gap: 6px; } .experience-trust-row span { max-width: 100%; white-space: normal; } .experience-flow { grid-template-columns: 1fr; } .featured-event-card { padding: 14px; grid-template-columns: 1fr; gap: 10px; } .hero-actions { gap: 8px; margin-top: 12px; } .hero-actions .button { min-height: 34px; padding: 6px 9px; font-size: 13px; } h1 { max-width: none; font-size: clamp(38px, 10vw, 48px); } h2 { font-size: clamp(32px, 10vw, 44px); } .intro h2, .section h2 { display: block; width: 100%; max-width: 100%; } .intro, .section { position: relative; display: flex; flex-direction: column; min-height: var(--phone-screen-frame); padding-top: 24px; padding-bottom: 24px; } .intro > *, .section > * { width: 100%; } .intro .narrow, .section .split-copy, .section .section-head, .section .contact-intro { display: flex; flex-direction: column; flex: 0 0 auto; } .section > .page-number, .narrow > .page-number, .split-copy > .page-number, .section-head > .page-number, .contact-intro > .page-number { align-self: flex-start; margin-top: auto; } .section .section-head { order: -1; max-width: none; display: block; flex: 0 0 auto; } .section > .section-hero-photo, .section > .feature-image { order: 0; } .contact-intro h2 { order: -2; } .contact-intro > p, .contact-intro > .read-more-link { order: -1; } .contact-intro > .section-hero-photo { order: 0; } .section h2, .horizontal-feature h2, .detail-copy h2 { margin-top: 0; } .section-head p, .intro p, .section p, .split-copy p { font-size: 17px; line-height: 1.45; } .events-section .section-head p:not(.frame-number), .events-section .section-head .experience-authority { font-size: 16px; line-height: 1.34; } .section-hero-photo, .feature-image { margin: 0 0 var(--phone-photo-to-title-gap); width: 100%; aspect-ratio: var(--frame-section-photo); } .section-hero-photo img, .feature-image img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; } .horizontal-feature img { display: block; width: 100%; height: auto; min-height: 0; margin-bottom: var(--phone-photo-to-title-gap); aspect-ratio: var(--frame-section-photo); object-fit: cover; } .section-more { align-self: flex-start; margin-top: 6px; } .section-more summary { min-height: 34px; padding: 0 0 6px; font-size: 17px; } .more-panel { padding: 16px; } .inside-photo img { height: 100%; min-height: 0; } .authority-grid, .feature-list, .action-grid, .rental-options, .offering-paths { grid-template-columns: 1fr; gap: 7px; margin-top: 12px; } .home-offering-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; } .rental-card summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; } .rental-card summary strong { font-size: 17px; } .rental-card summary span { font-size: 15px; } .rental-card p { padding: 0 12px 8px; font-size: 14px; } .booking-link { margin: 0 12px 12px; font-size: 15px; } .price-list { gap: 12px; margin-top: 12px; } .price-list-preview h3 { font-size: 21px; } .price-list-preview .price-group { gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); } .price-list-preview .price-group:first-child { padding-top: 0; border-top: 0; } .price-row { gap: 3px; min-height: 56px; padding: 11px 13px; } .price-row span, .price-row strong { font-size: 17px; } .authority-grid span, .action-card, .rental-card, .price-row { min-height: 56px; } .action-card { min-height: 62px; padding: 9px 11px; gap: 2px 10px; } .action-card strong, .rental-card summary strong, .price-row span { font-size: 17px; } .action-card span, .rental-card p { font-size: 14px; } .action-card span:last-child, .rental-card summary span, .price-row strong, .booking-link { font-size: 15px; } .offering-path { min-height: 58px; padding: 9px 11px; } .offering-path strong { margin-bottom: 3px; font-size: 17px; } .offering-path span { font-size: 14px; } .gallery-detail .inside-photo { margin-bottom: 8px; } .gallery-detail .detail-copy p { margin-bottom: 8px; font-size: 15px; line-height: 1.32; } .gallery-proof-strip { gap: 6px; margin: 6px 0 8px; } .gallery-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; } .studio-rental-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 8px 0 10px; } .gallery-photo-grid img { aspect-ratio: 1 / 1; } .studio-rental-proof-grid img { aspect-ratio: 1 / 1; } .interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .interest-card { min-height: 72px; padding: 8px; gap: 3px; } .interest-card strong { font-size: 15px; line-height: 1.12; } .interest-card span { font-size: 13px; line-height: 1.18; } .program-grid { grid-template-columns: 1fr; gap: 5px; margin-top: 7px; } .programs-detail .inside-photo { margin-bottom: 8px; } .programs-detail .detail-copy p { margin-bottom: 7px; font-size: 14px; line-height: 1.26; } .program-card { min-height: 45px; padding: 6px 9px; gap: 2px 10px; } .program-card strong { font-size: 14px; line-height: 1.08; } .program-card span { font-size: 12px; line-height: 1.12; } .price-list-preview .action-grid { gap: 6px; margin-top: 6px; } .price-list-preview .action-card { min-height: 48px; padding: 8px 10px; } .price-list-preview .action-card strong { font-size: 15px; } .price-list-preview .action-card > span:last-child { font-size: 15px; } .price-list-preview .action-card:nth-child(n + 2) { display: none; } #our-offerings .more-panel { padding: 12px; } #our-offerings .more-panel .inside-photo { aspect-ratio: var(--frame-detail-photo); margin-bottom: 10px; } #our-offerings .more-panel p { margin: 0 0 7px; } #our-offerings .more-panel .price-list { gap: 8px; margin-top: 8px; } #our-offerings .more-panel .price-group { gap: 5px; } #our-offerings .more-panel .price-group h3 { font-size: 17px; } #our-offerings .more-panel .action-grid { gap: 4px; margin-top: 5px; } #our-offerings .more-panel .action-card { min-height: 34px; padding: 5px 8px; } #our-offerings .more-panel .action-card strong { font-size: 14px; } #our-offerings .more-panel .action-card > span:first-of-type { display: none; } #our-offerings .more-panel .action-card > span:last-child { grid-row: 1; font-size: 14px; } .detail-screen { justify-content: flex-start; } .detail-screen .inside-photo { margin-bottom: 12px; aspect-ratio: var(--frame-detail-photo); } .events-detail-screen .inside-photo, .studio-rental-detail .inside-photo { margin-bottom: 8px; aspect-ratio: 16 / 6; } .detail-copy h2 { margin-bottom: 8px; } .detail-copy p { margin: 0 0 8px; font-size: 16px; line-height: 1.38; } .events-detail-screen .detail-copy > p, .studio-rental-detail .detail-copy > p { margin-bottom: 6px; font-size: 15px; line-height: 1.28; } .events-detail-screen .experience-authority { font-size: 16px; line-height: 1.34; } .featured-event-card { gap: 8px; margin: 6px 0 8px; padding: 10px 11px; } .featured-event-card h3 { font-size: 22px; } .featured-event-card p { font-size: 13px; line-height: 1.18; } .featured-event-card .event-location { display: none; } .event-eyebrow { margin-bottom: 4px; padding: 4px 7px; font-size: 12px; } .events-detail-screen .action-grid, .studio-rental-detail .action-grid { gap: 5px; margin-top: 6px; } .community-referral-card { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; padding: 20px; } .community-referral-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .community-referral-media img { aspect-ratio: 1 / 1; } .community-referral-copy h3 { font-size: 27px; } .community-referral-copy p { font-size: 14px; line-height: 1.42; } .community-referral-form { grid-template-columns: 1fr; gap: 12px; } .community-referral-form input { min-height: 40px; } .community-referral-form textarea { min-height: 82px; } .private-session-panels { grid-template-columns: 1fr; gap: 8px; margin: 10px 0 12px; } .private-session-panel { padding: 10px 11px; } .private-session-panel h3 { margin-bottom: 6px; font-size: 20px; } .private-session-panel .feature-list { gap: 4px; } .private-session-panel .feature-list li { padding-left: 12px; font-size: 13px; line-height: 1.14; } .private-session-panel .feature-list li::before { top: 0.48em; width: 4px; height: 4px; } .event-ticket-card { min-height: 0; padding: 10px; gap: 5px; } .event-card-image { width: calc(100% + 20px); margin: -10px -10px 5px; aspect-ratio: 16 / 9; } .event-ticket-card strong { font-size: 19px; line-height: 1.12; } .event-ticket-card span { font-size: 15px; line-height: 1.28; } .studio-rental-detail .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; margin: 6px 0 8px; } .studio-rental-detail .feature-list li { padding-left: 12px; font-size: 13px; line-height: 1.16; } .studio-rental-detail .feature-list li::before { top: 0.48em; width: 4px; height: 4px; } .studio-rental-detail .studio-rental-proof-grid { gap: 4px; margin: 6px 0 8px; } .studio-rental-detail .action-card { min-height: 42px; padding: 7px 9px; } .studio-rental-detail .action-card strong { font-size: 14px; line-height: 1.08; } .studio-rental-detail .action-card span { font-size: 14px; } .studio-rental-contact-note { margin-top: 6px; font-size: 13px !important; line-height: 1.2 !important; } .offerings-detail .inside-photo { margin-bottom: 8px; aspect-ratio: var(--frame-detail-photo); } .offerings-detail .detail-copy p { font-size: 14px; line-height: 1.3; } .offerings-detail .price-list { gap: 10px; margin-top: 10px; } .offerings-detail .price-group { gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .offerings-detail .price-group:first-child { padding-top: 0; border-top: 0; } .offerings-detail .price-group h3 { font-size: 17px; } .offerings-detail .action-grid { gap: 5px; margin-top: 5px; } .offerings-detail .action-card { min-height: 40px; padding: 7px 9px; } .offerings-detail .action-card strong { font-size: 15px; } .offerings-detail .action-card > span:first-of-type { display: none; } .offerings-detail .action-card > span:last-child { grid-row: 1; font-size: 15px; } .offerings-detail .action-card > span:only-of-type { display: block; grid-column: 2; grid-row: 1 / span 2; } .booking-direct-menu { grid-template-columns: 1fr; gap: 10px; } .book-menu-dialog { padding: 18px; } .book-menu-dialog h3 { margin-bottom: 14px; font-size: 34px; } .booking-direct-group { padding: 13px; } .booking-direct-group a { min-height: 40px; padding: 9px 10px; } .booking-direct-group strong, .booking-direct-group span { font-size: 14px; } #about-us .more-panel { padding: 12px; } #about-us .more-panel .inside-photo { margin-bottom: 10px; } #about-us .more-panel p { margin: 0 0 7px; } .event-card, .offer-grid a { padding: 16px; } .button { width: 100%; } nav a { font-size: 12px; } nav .nav-button { width: auto; justify-self: start; } .photo-lineup { grid-template-columns: 1fr; } .gallery-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .intro, .section, footer { padding-inline: 18px; } } /* Mystic Community Three Lanes - Mobile */ @media (max-width: 768px) { .community-three-lanes { grid-template-columns: 1fr !important; } #community-resources { grid-template-columns: 1fr !important; } .community-lane { padding: 1.5rem !important; } } @media (max-width: 768px) { .hc-testimonial-grid { grid-template-columns: 1fr !important; } .hc-facilitator-grid { grid-template-columns: 1fr !important; } .hc-directory-grid { grid-template-columns: 1fr !important; } .hc-articles-grid { grid-template-columns: 1fr !important; } } /* Book under logo */ .brand-block { display: flex; flex-direction: row; align-items: center; gap: 18px; } .book-under-logo { font-size: 0.92rem !important; padding: 10px 16px !important; letter-spacing: 0 !important; background: var(--primary) !important; color: var(--primary-text) !important; border: 1px solid var(--primary) !important; border-radius: 6px !important; opacity: 1 !important; } .book-under-logo:hover { background: var(--accent) !important; border-color: var(--accent) !important; } @media (max-width: 900px) { .book-under-logo { display: inline-flex !important; font-size: 16px !important; } } /* Detail reveal layer: deeper section content stays tucked until a visitor clicks See More or matching navigation. */ .detail-screen:not(.is-open), section.detail-screen:not(.is-open) { display: none !important; } .detail-screen.is-open, section.detail-screen.is-open { display: flex !important; } /* locked patch removed — replaced by clean font system */ .feature-image, .section-hero-photo { width: min(100%, 680px); margin: 32px auto; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .feature-image img, .section-hero-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .section { padding: clamp(52px, 7vw, 96px) clamp(18px, 5vw, 68px); } /* ── UNIFIED SPLIT LAYOUT ── */ .split.horizontal-feature, .split.horizontal-feature.reverse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(52px, 7vw, 96px) clamp(18px, 5vw, 68px); } .split.reverse .split-copy { order: 2; } .split.photo-right img { order: 2; } @media (max-width: 768px) { .split.photo-right img { order: unset; } } .split.horizontal-feature img { width: 100%; aspect-ratio: var(--frame-section-photo); height: auto; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); } .split-copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; } .split-copy h2 { margin: 0; } .split-copy p { margin: 0; } .split-copy .read-more-link { margin-top: 8px; } @media (max-width: 768px) { .split.horizontal-feature, .split.horizontal-feature.reverse { grid-template-columns: 1fr; padding: clamp(40px, 8vw, 64px) clamp(18px, 5vw, 40px); } .split.reverse .split-copy { order: unset; } .split.horizontal-feature img { width: min(100%, 480px); height: auto; aspect-ratio: var(--frame-section-photo); margin: 0 auto; } } /* CLEAN FONT SYSTEM */ body, p, li, span, a, label, input, textarea, select, button { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .brand, .footer-brand > strong { font-family: var(--font-heading); font-weight: 600; line-height: 1.08; letter-spacing: 0; } h1 { font-size: clamp(44px, 5.6vw, 76px); } h2 { font-size: clamp(36px, 4.8vw, 62px); } h3 { font-size: clamp(24px, 2.6vw, 34px); } p, li { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; } .site-header nav a { font-size: 16px; line-height: 1.2; } .read-more-link { font-size: 16px; line-height: 1.2; } .nav-button, .button { font-size: 13px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } .kicker, .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ── COMMUNITY JOIN / EVENT VOTE ───────────────── */ .community-join-lead { font-size: clamp(20px, 2vw, 24px); font-style: italic; opacity: 0.88; line-height: 1.8; max-width: 600px; margin: 0 auto 2.5rem; } .community-join-form { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; margin: 0 auto 1rem; } .secret-input { padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; color: #f0ede4; font: inherit; font-size: 16px; text-align: center; letter-spacing: 0.02em; transition: border-color 0.2s; } .secret-input::placeholder { color: rgba(240,237,228,0.45); } .secret-input:focus { outline: none; border-color: rgba(255,255,255,0.4); } .community-join-note { font-size: 13px; opacity: 0.48; line-height: 1.7; max-width: 460px; margin: 1rem auto 0; } .reveal-story-block { max-width: 700px; margin: 0 auto 3rem; text-align: center; } .survey-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: clamp(1.6rem, 4vw, 2.8rem); max-width: 780px; margin: 0 auto 3rem; text-align: left; } .survey-card .kicker { color: rgba(240,237,228,0.5); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 0.6rem; display: block; } .survey-card h3 { margin-bottom: 1.5rem; } .survey-form { display: grid; gap: 1.6rem; } .survey-q { display: grid; gap: 0.4rem; font-size: 15px; color: rgba(240,237,228,0.85); line-height: 1.5; } .survey-q strong { font-size: 17px; font-weight: 700; color: #f0ede4; font-family: var(--font-heading); line-height: 1.3; } .survey-sub { font-size: 15px !important; color: rgba(240,237,228,0.5) !important; line-height: 1.4 !important; margin: 0 !important; font-style: italic; } .survey-radios, .survey-checks { display: grid; gap: 0.2rem; margin-top: 0.3rem; } .survey-radios label, .survey-checks label { display: flex; align-items: center; gap: 0.65rem; font-size: 15px; line-height: 1.3; color: rgba(240,237,228,0.82); cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 8px; transition: background 0.15s; } .survey-radios label:hover, .survey-checks label:hover { background: rgba(255,255,255,0.06); } .survey-radios input, .survey-checks input { accent-color: #a3b347; width: 16px; height: 16px; flex-shrink: 0; } .survey-textarea { width: 100%; min-height: 110px; padding: 0.9rem 1rem; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: #f0ede4; font: inherit; font-size: 15px; line-height: 1.6; resize: vertical; transition: border-color 0.2s; } .survey-textarea::placeholder { color: rgba(240,237,228,0.38); } .survey-textarea:focus { outline: none; border-color: rgba(255,255,255,0.35); } .survey-short { padding: 0.75rem 1rem; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; color: #f0ede4; font: inherit; font-size: 15px; letter-spacing: 0.03em; transition: border-color 0.2s; } .survey-short::placeholder { color: rgba(240,237,228,0.38); } .survey-short:focus { outline: none; border-color: rgba(255,255,255,0.35); } .reveal-thankyou { text-align: center; max-width: 680px; margin: 0 auto; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.1); } .reveal-thankyou .kicker { color: rgba(240,237,228,0.5); font-size: 12px; letter-spacing: 0.12em; display: block; margin-bottom: 0.6rem; } .reveal-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.8rem; } .button-ghost-light { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 6px; background: transparent; border: 1px solid rgba(240,237,228,0.4); color: #f0ede4; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .button-ghost-light:hover { background: rgba(255,255,255,0.09); border-color: rgba(240,237,228,0.7); } #community-survey-status { text-align:center; font-size:15px; color:rgba(163,179,71,0.9); min-height:1.4em; } .mystic-community-section { background: linear-gradient(180deg, rgba(28, 30, 20, 0.98), rgba(18, 19, 13, 0.99)), radial-gradient(circle at 12% 0%, rgba(179, 119, 54, 0.16), transparent 38%); color: #f0ede4; padding: clamp(54px, 8vw, 104px) clamp(18px, 6vw, 76px); } .mystic-community-section h2, .mystic-community-section h3, .mystic-community-section strong { color: #f0ede4; } .mystic-community-section .reveal-story-block { max-width: 860px; } .mystic-community-section .reveal-story-block h2 { font-size: clamp(42px, 6vw, 82px); line-height: 0.96; } .community-live-events, .community-vote-form { max-width: 1260px; margin-right: auto; margin-left: auto; } .community-section-heading { max-width: 760px; margin: 0 auto clamp(18px, 3vw, 32px); text-align: center; } .community-section-heading h3 { margin: 0; font-size: clamp(32px, 4.8vw, 64px); line-height: 0.98; } .community-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); } .community-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .community-event-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(12px, 1.6vw, 18px); border: 1px solid rgba(240, 237, 228, 0.16); border-radius: 8px; background: rgba(255, 255, 250, 0.075); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18); } .community-event-card.highlight { border-color: rgba(179, 119, 54, 0.56); background: rgba(255, 250, 240, 0.11); } .community-event-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; } .community-event-card span { color: rgba(240, 237, 228, 0.64); font-size: 13px; font-weight: 700; line-height: 1.35; } .community-event-card strong { font-family: var(--font-heading); font-size: clamp(22px, 2vw, 30px); line-height: 1.08; } .community-event-card p { margin: 0; color: rgba(240, 237, 228, 0.78); font-size: 15px; line-height: 1.48; } .community-event-card em { width: fit-content; margin-top: auto; padding: 6px 9px; border: 1px solid rgba(163, 179, 71, 0.38); border-radius: 999px; color: rgba(240, 237, 228, 0.88); font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .community-event-card .source-link { width: fit-content; color: rgba(240, 237, 228, 0.7); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .community-vote-form { margin-top: clamp(32px, 5vw, 64px); } .community-library-grid { margin-top: 22px; } .vote-card { position: relative; cursor: pointer; } .vote-card input { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; accent-color: var(--primary); } .vote-card:has(input:checked) { border-color: rgba(163, 179, 71, 0.82); background: rgba(163, 179, 71, 0.14); } .community-vote-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; } .community-vote-fields label { display: grid; gap: 7px; } .community-vote-fields label span { color: rgba(240, 237, 228, 0.72); font-size: 13px; font-weight: 800; } .community-vote-wide { grid-column: 1 / -1; } @media (max-width: 960px) { .community-card-grid, .community-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .mystic-community-section { padding: 42px 18px; } .community-card-grid, .community-card-grid--two, .community-vote-fields { grid-template-columns: 1fr; } .mystic-community-section .reveal-story-block h2 { font-size: 42px; } .community-event-card { padding: 14px; } } .button, .nav-button, .button.ghost, .button.ghost-dark, .button.small { letter-spacing: 0 !important; text-transform: none !important; } /* PREMIUM POLISH PASS */ .event-price-teaser { font-weight: 600; color: var(--accent); letter-spacing: 0.04em; } #events .experience-authority, #events-detail .experience-authority, #private-sound-healing .experience-authority, #studio-rental .experience-authority { max-width: 720px; color: var(--text); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.38; } #events .experience-trust-row, #events-detail .experience-trust-row, #private-sound-healing .experience-trust-row, #studio-rental .experience-trust-row { margin-top: 14px; margin-bottom: 4px; } #events .experience-trust-row span, #events-detail .experience-trust-row span, #private-sound-healing .experience-trust-row span, #studio-rental .experience-trust-row span { border-color: rgba(179, 119, 54, 0.28); background: rgba(255, 249, 238, 0.82); color: var(--text); } #events-detail .action-grid { max-width: 760px; gap: 16px; } #events-detail .event-ticket-card { border-color: rgba(97, 114, 9, 0.24); background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 42px rgba(39, 42, 31, 0.11); } #events-detail .event-card-image { aspect-ratio: 16 / 9; } #events-detail .event-ticket-card strong { color: var(--text); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.08; } #events-detail .event-card-cta { width: 100%; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(97, 114, 9, 0.14); color: var(--primary); text-align: left; } .featured-event-card { border-color: rgba(179, 119, 54, 0.52); box-shadow: 0 22px 50px rgba(39, 42, 31, 0.14); } .event-eyebrow { max-width: 100%; white-space: normal; } .button, .nav-button { transition: background 200ms ease, border-color 200ms ease, transform 150ms ease, box-shadow 200ms ease; } .button:hover, .nav-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(39, 42, 31, 0.18); } .site-header nav a { position: relative; transition: color 200ms ease; padding-bottom: 2px; } .site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--accent); transition: right 220ms ease; } .site-header nav a:hover { color: var(--accent); } .site-header nav a:hover::after { right: 0; } .split-copy h2, .detail-copy h2 { position: relative; padding-bottom: 16px; } .split-copy h2::after, .detail-copy h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 3px; background: #c9a227; border-radius: 2px; } h2, h3 { letter-spacing: 0.005em; } /* Centralized Mystic action language */ .button, .button.secondary, .button.ghost, .button.ghost-dark, .button.small, .button-ghost-light, .nav-button, .mystic-spa-direct-button { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-text) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .button:hover, .button.secondary:hover, .button.ghost:hover, .button.ghost-dark:hover, .button.small:hover, .button-ghost-light:hover, .nav-button:hover, .mystic-spa-direct-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--primary-text) !important; } .read-more-link { color: var(--primary) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .offerings-dropdown-menu a, .booking-direct-group a { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-text) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .offerings-dropdown-menu a strong, .offerings-dropdown-menu a span, .booking-direct-group a span, .booking-direct-group a strong { color: var(--primary-text) !important; text-transform: uppercase !important; } .action-card { transition: transform 200ms ease, box-shadow 200ms ease; } .action-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(39, 42, 31, 0.16); } /* TESTIMONIALS */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .testimonial-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #c9a227; border-radius: 8px; padding: 1.6rem 1.8rem; margin: 0; text-align: left; transition: transform 200ms ease, box-shadow 200ms ease; } .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(39, 42, 31, 0.16); } .testimonial-card p { font-size: 1.05rem; line-height: 1.75; font-style: italic; margin: 0 0 0.8rem; } .testimonial-card cite { display: block; font-style: normal; font-weight: 600; color: var(--primary); font-size: 0.9rem; letter-spacing: 0.04em; } /* Old-site premium scale restore */ .site-header nav a { font-size: clamp(17px, 1.2vw, 20px); } .nav-button, .button { min-height: 46px; padding: 10px 16px; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0.08em !important; text-transform: uppercase !important; } .book-under-logo { font-size: clamp(16px, 1.4vw, 20px) !important; } .button.small { min-height: 44px; padding: 10px 16px; font-size: 15px; } @media (max-width: 700px) { .site-header nav a { font-size: 16px; } .nav-button, .button { min-height: 44px; padding: 11px 16px; font-size: 16px; } .book-under-logo { font-size: 16px !important; } } /* COMMUNITY JOURNAL CTAs */ .journal-cta { margin-top: 1.4rem; } /* Final premium action consistency */ .button, .button.secondary, .button.ghost, .button.ghost-dark, .button.small, .button-ghost-light, .nav-button, .mystic-spa-direct-button { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-text) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .button:hover, .button.secondary:hover, .button.ghost:hover, .button.ghost-dark:hover, .button.small:hover, .button-ghost-light:hover, .nav-button:hover, .mystic-spa-direct-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--primary-text) !important; } .offerings-dropdown-menu .booking-direct-group a, #book-menu-dialog .booking-direct-group a { background: rgba(255, 255, 255, 0.72) !important; border-color: var(--border) !important; color: var(--text) !important; letter-spacing: 0 !important; text-transform: none !important; } .offerings-dropdown-menu .booking-direct-group a:hover, #book-menu-dialog .booking-direct-group a:hover { background: rgba(97, 114, 9, 0.08) !important; border-color: rgba(97, 114, 9, 0.34) !important; color: var(--text) !important; } .offerings-dropdown-menu .booking-direct-group a strong, #book-menu-dialog .booking-direct-group a strong { color: var(--primary) !important; font-family: var(--font-heading) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; } .offerings-dropdown-menu .booking-direct-group a span, #book-menu-dialog .booking-direct-group a span { color: var(--muted) !important; font-family: var(--font-body) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; } .read-more-link { color: var(--primary) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Floating event card */ #floating-event-card { position: fixed; bottom: 2rem; right: 2rem; z-index: 9998; background: linear-gradient(135deg, #1e1230, #0f1e2e); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 1.25rem 1.5rem; max-width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; } #floating-event-card.visible { opacity: 1; transform: translateY(0); pointer-events: all; } #floating-event-card .close-card { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none; color: rgba(255,255,255,0.35); cursor: pointer; font-size: 1rem; } #floating-event-card .eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; opacity: 0.5; margin-bottom: 0.4rem; } #floating-event-card h4 { font-size: 0.95rem; margin: 0 0 0.25rem; line-height: 1.3; } #floating-event-card p { font-size: 0.8rem; opacity: 0.65; margin: 0 0 1rem; } #floating-event-card a { display: block; text-align: center; font-size: 0.82rem; padding: 0.6rem 1rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; text-decoration: none; color: inherit; letter-spacing: 0.06em; } #floating-event-card a:hover { background: rgba(255,255,255,0.14); } @media (max-width: 600px) { #floating-event-card { bottom: 1rem; right: 1rem; left: 1rem; max-width: none; } } /* MOBILE READABILITY FIX - DO NOT CHANGE STRUCTURE */ @media (max-width: 768px) { body, p, li, input, textarea, button { font-size: 18px !important; line-height: 1.65 !important; } .section p, .content p, .card p { font-size: 18px !important; line-height: 1.65 !important; } h1 { font-size: 46px !important; line-height: 1.05 !important; } h2 { font-size: 40px !important; line-height: 1.1 !important; } } /* MYSTIC COMMUNITY - community gallery preview strip */ .community-gallery-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.6rem; max-width: 480px; } .community-gallery-preview img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; } @media (max-width: 768px) { .community-gallery-preview { max-width: none; } } /* JOURNAL NAV DROPDOWN */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--bg); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.5rem 0; min-width: 280px; white-space: normal; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; padding: 0.5rem 1rem; font-size: 0.95rem; line-height: 1.3; color: var(--text); text-decoration: none; } .nav-dropdown-menu a:hover { background: var(--surface); color: var(--accent); } .community-menu-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: default; } .community-nav-dropdown .nav-dropdown-menu { display: none; gap: 8px; padding: 12px; } .community-nav-dropdown:hover .nav-dropdown-menu, .community-nav-dropdown:focus-within .nav-dropdown-menu { display: grid; } .community-nav-dropdown .nav-dropdown-menu a { display: grid; gap: 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.58); } .community-nav-dropdown .nav-dropdown-menu strong { color: var(--primary); font-size: 15px; line-height: 1.15; } .community-nav-dropdown .nav-dropdown-menu span { color: var(--muted); font-size: 13px; line-height: 1.28; } @media (max-width: 900px) { .nav-dropdown-menu { position: static; box-shadow: none; border: none; min-width: 0; padding-left: 1rem; } } /* Header hover menus + mobile navigation polish */ .offerings-dropdown { position: relative; display: inline-flex; } .offerings-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(760px, calc(100vw - 32px)); max-height: min(680px, calc(100svh - 120px)); padding: 14px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 46px rgba(39, 42, 31, 0.18); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; } .offerings-dropdown:hover .offerings-dropdown-menu, .offerings-dropdown:focus-within .offerings-dropdown-menu, .book-menu-button:hover + .offerings-dropdown-menu, .book-menu-button:focus + .offerings-dropdown-menu, .offerings-dropdown-menu:hover { opacity: 1; pointer-events: auto; transform: translateY(0); } .offerings-dropdown-menu a { display: grid; gap: 3px; padding: 9px 10px; border-radius: 6px; color: var(--text); text-decoration: none; background: rgba(255, 255, 255, 0.62); } .offerings-dropdown-menu a:hover { background: rgba(97, 114, 9, 0.08); } .offerings-dropdown-menu strong { color: var(--primary); font-size: 15px; line-height: 1.2; } .offerings-dropdown-menu span { color: var(--muted); font-size: 13px; line-height: 1.35; } .offerings-dropdown-menu .booking-direct-group { min-width: 0; padding: 12px; } .offerings-dropdown-menu .booking-direct-group h4 { font-size: 17px; line-height: 1.2; } .nav-dropdown-menu { left: auto; right: 0; width: min(460px, calc(100vw - 32px)); min-width: 0; max-width: calc(100vw - 32px); } @media (max-width: 860px) { .event-alert-bar { display: none; } .site-header { align-items: stretch; gap: 8px; padding: 10px 14px 8px; } .brand-block { width: 100%; justify-content: space-between; gap: 12px; } .brand { font-size: 24px; line-height: 1; } .offerings-dropdown { margin-left: auto; } .offerings-dropdown-menu { right: 0; left: auto; grid-template-columns: 1fr; width: min(360px, calc(100vw - 24px)); max-height: min(620px, calc(100svh - 112px)); } .site-header > nav, .site-header nav { display: none !important; } } .mystic-community-section .survey-card h3 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.18; } .mystic-community-section .survey-q strong { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; } .mystic-community-section .survey-sub, .mystic-community-section .survey-checks label, .mystic-community-section .survey-textarea { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.5; } /* Mystic Community compact hub */ .community-shell { width: min(1120px, 100%); margin: 0 auto; } .mystic-community-section .community-compact-intro { max-width: 780px; margin: 0 auto; padding: 0; text-align: center; } .mystic-community-section .community-compact-intro h2 { font-size: clamp(38px, 5vw, 68px); } .community-compact-intro p:last-child { max-width: 640px; margin-right: auto; margin-left: auto; } .community-compact-live { margin-top: clamp(24px, 4vw, 42px); } .community-compact-heading h3 { font-size: clamp(28px, 3.6vw, 46px); } .community-live-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .community-live-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid rgba(240, 237, 228, 0.16); border-radius: 8px; background: rgba(255, 255, 250, 0.075); } .community-live-card.highlight { border-color: rgba(163, 179, 71, 0.5); background: rgba(163, 179, 71, 0.1); } .community-live-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; } .community-live-card div { display: grid; gap: 5px; min-width: 0; } .community-live-card span { color: rgba(240, 237, 228, 0.66); font-size: 12px; font-weight: 800; line-height: 1.25; } .community-live-card strong { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; } .community-live-card p { margin: 0; color: rgba(240, 237, 228, 0.76); font-size: 14px; line-height: 1.35; } .community-live-card a { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 38px; margin-top: 4px; padding: 8px 13px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } .community-library-drawer { max-width: 980px; margin: clamp(18px, 4vw, 34px) auto 0; border: 1px solid rgba(240, 237, 228, 0.2); border-radius: 8px; background: rgba(255, 255, 250, 0.08); overflow: clip; } .community-library-drawer summary { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; } .community-library-drawer summary::-webkit-details-marker { display: none; } .community-library-drawer summary span, .community-library-drawer summary em { color: rgba(240, 237, 228, 0.66); font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .community-library-drawer summary strong { font-size: clamp(24px, 2.5vw, 34px); line-height: 1; } .community-vote-form { margin-top: 0; border-width: 1px 0 0; border-radius: 0; background: rgba(18, 19, 13, 0.34); } .community-library-compact { display: grid; grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr); gap: 16px; align-items: start; margin-top: 18px; } .community-photo-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .community-photo-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } .community-vote-list { display: grid; gap: 8px; max-height: min(560px, 58svh); padding-right: 4px; overflow: auto; } .community-vote-list label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(240, 237, 228, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.05); cursor: pointer; } .community-vote-list input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); } .community-vote-list label:has(input:checked) { border-color: rgba(163, 179, 71, 0.76); background: rgba(163, 179, 71, 0.14); } .community-vote-list span { display: grid; gap: 3px; min-width: 0; } .community-vote-list strong { font-family: var(--font-heading); font-size: 19px; line-height: 1.08; } .community-vote-list small { color: rgba(240, 237, 228, 0.64); font-size: 12px; line-height: 1.35; } .community-source-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } .community-source-row a { padding: 7px 10px; border: 1px solid rgba(240, 237, 228, 0.16); border-radius: 999px; color: rgba(240, 237, 228, 0.76); font-size: 12px; font-weight: 800; text-decoration: none; } @media (max-width: 780px) { .community-live-row, .community-library-compact { grid-template-columns: 1fr; } .community-live-card { grid-template-columns: 94px minmax(0, 1fr); } .community-library-drawer summary { grid-template-columns: 1fr; gap: 6px; } .community-vote-list { max-height: 52svh; } } @media (max-width: 480px) { .community-live-card { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; } .community-live-card a { width: 100%; } .community-library-drawer summary { padding: 16px; } } /* COMMUNITY JOURNAL section - article spacing/dividers */ #community-journal #seo-content-library article { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid rgba(0,0,0,0.08); text-align: left; } #community-journal #seo-content-library article:first-child { margin-top: 1.6rem; padding-top: 1.6rem; } #community-journal #seo-content-library article h2 { font-size: 1.4rem; margin-bottom: 0.6rem; } /* COMMUNITY JOURNAL accordion - keeps 10 articles from becoming an endless scroll */ #community-journal .journal-entry summary { font-family: "Cormorant Garamond", serif; font-size: 1.4rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; position: relative; padding-right: 2rem; line-height: 1.3; } #community-journal .journal-entry summary::-webkit-details-marker { display: none; } #community-journal .journal-entry summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent); transition: transform 0.25s ease; } #community-journal .journal-entry[open] summary::after { content: "\2212"; } #community-journal .journal-entry summary:hover { color: var(--accent); } #community-journal .journal-entry-body { padding-top: 0.8rem; } #community-journal .journal-entry-body p, #community-journal .journal-cta .button { font-size: 17px; } /* Premium announcement + single special board */ .mystic-announcement { position: relative; overflow: hidden; padding-top: clamp(64px, 8vw, 116px); padding-bottom: clamp(62px, 8vw, 110px); background: linear-gradient(135deg, rgba(20, 22, 15, 0.96), rgba(48, 53, 32, 0.94)), radial-gradient(circle at 78% 18%, rgba(179, 119, 54, 0.24), transparent 34%); color: #f5f2ea; border-top: 1px solid rgba(245, 242, 234, 0.12); border-bottom: 1px solid rgba(245, 242, 234, 0.1); } .mystic-announcement::after { content: ""; position: absolute; right: clamp(22px, 8vw, 120px); bottom: clamp(18px, 5vw, 74px); width: clamp(130px, 18vw, 260px); height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 242, 234, 0.72)); } .mystic-announcement-copy { position: relative; z-index: 1; max-width: 920px; } .mystic-announcement .event-eyebrow { background: rgba(245, 242, 234, 0.12); color: #f5f2ea; border: 1px solid rgba(245, 242, 234, 0.2); } .mystic-announcement h2 { max-width: 760px; margin-top: 12px; color: #f5f2ea; font-size: clamp(46px, 6vw, 86px); line-height: 0.96; } .mystic-announcement h2::after { background: linear-gradient(90deg, rgba(245, 242, 234, 0.78), rgba(245, 242, 234, 0)); } .mystic-announcement p { max-width: 760px; color: rgba(245, 242, 234, 0.84); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5; } .mystic-announcement .button.secondary { background: transparent; color: #f5f2ea; border-color: rgba(245, 242, 234, 0.56); } .premium-offer-board { background: linear-gradient(180deg, #f7f5ee, var(--bg)); } .premium-board-head { display: grid; gap: 12px; max-width: 860px; margin-bottom: clamp(26px, 4vw, 44px); } .premium-board-head h2, .premium-board-head p { margin: 0; } .premium-board-head p { max-width: 760px; color: var(--muted); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; } .premium-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .premium-board-grid.single-special { grid-template-columns: minmax(0, 760px); } .premium-offer-card { display: grid; gap: 12px; min-height: 100%; padding: clamp(24px, 3.4vw, 42px); color: var(--text); text-decoration: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 238, 0.92)); border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; box-shadow: 0 22px 58px rgba(39, 42, 31, 0.13); transition: border-color 160ms ease, transform 160ms ease; } .premium-offer-card:hover { border-color: rgba(179, 119, 54, 0.5); transform: translateY(-2px); } .premium-offer-label { width: fit-content; padding: 6px 10px; border-radius: 999px; background: rgba(97, 114, 9, 0.1); color: var(--primary); font-size: 13px; font-weight: 700; line-height: 1; } .premium-offer-card strong { max-width: 620px; color: var(--text); font-family: var(--font-heading); font-size: clamp(34px, 4vw, 58px); font-weight: 600; line-height: 1.02; } .premium-offer-price { width: fit-content; padding: 9px 14px; border-radius: 999px; background: var(--primary); color: var(--primary-text); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1; box-shadow: 0 12px 26px rgba(97, 114, 9, 0.22); } .premium-offer-description { max-width: 620px; color: var(--muted); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.48; } .premium-offer-cta { margin-top: 6px; color: var(--primary); font-size: 17px; font-weight: 700; } .healing-experiences-board { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(290px, 0.88fr); gap: clamp(16px, 2.5vw, 26px); margin: clamp(24px, 4vw, 42px) 0 clamp(26px, 4vw, 46px); } .healing-experiences-board.event-feature-board { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .healing-board-card { display: grid; gap: 12px; min-width: 0; min-height: 100%; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(97, 114, 9, 0.22); border-radius: 8px; text-decoration: none; box-shadow: 0 22px 58px rgba(39, 42, 31, 0.13); } .event-board-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr); grid-template-areas: "image copy" "image cta"; column-gap: clamp(26px, 4vw, 58px); row-gap: clamp(16px, 2vw, 22px); min-height: 100%; margin: 0; padding: clamp(24px, 4vw, 48px); align-content: center; align-items: center; } .event-board-feature h3 { font-size: clamp(46px, 5vw, 72px); line-height: 0.92; } .event-board-feature p { max-width: 680px; font-size: clamp(17px, 1.35vw, 21px); } .event-board-feature .button { grid-area: cta; justify-self: start; align-self: start; width: fit-content; letter-spacing: 0.04em; text-transform: uppercase; } .event-board-feature .featured-event-image { grid-area: image; height: 100%; min-height: 360px; max-height: none; aspect-ratio: 4 / 3; object-position: center; } .event-board-feature > div { grid-area: copy; align-self: end; } .board-event-card { gap: 10px; color: var(--text); background: rgba(255, 255, 255, 0.9); transition: border-color 160ms ease, transform 160ms ease; } .board-event-card:hover { border-color: rgba(179, 119, 54, 0.5); transform: translateY(-2px); } .board-event-card .event-card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; } .board-event-card strong { color: var(--text); font-family: var(--font-heading); font-size: clamp(25px, 2.6vw, 34px); font-weight: 600; line-height: 1.02; } .board-event-card span { color: var(--muted); font-size: 16px; line-height: 1.35; } .board-event-card .event-card-cta { width: fit-content; margin-top: 4px; color: var(--primary); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .board-news { grid-column: 1 / -1; min-height: auto; padding: clamp(18px, 2.4vw, 26px); } .board-news h3 { font-size: clamp(28px, 3.2vw, 44px); } .board-news p { max-width: 760px; } .board-announcement { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(20, 22, 15, 0.97), rgba(48, 53, 32, 0.95)), radial-gradient(circle at 84% 12%, rgba(179, 119, 54, 0.22), transparent 32%); color: #f5f2ea; border-color: rgba(245, 242, 234, 0.16); } .board-announcement::after { content: ""; position: absolute; right: 22px; bottom: 22px; width: min(190px, 36vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 242, 234, 0.68)); } .board-announcement > * { position: relative; z-index: 1; } .board-announcement .event-eyebrow { width: fit-content; background: rgba(245, 242, 234, 0.12); color: #f5f2ea; border: 1px solid rgba(245, 242, 234, 0.2); } .board-announcement h3 { max-width: 620px; margin: 0; color: #f5f2ea; font-size: clamp(35px, 4.2vw, 58px); line-height: 0.98; } .board-announcement p { max-width: 690px; margin: 0; color: rgba(245, 242, 234, 0.84); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.48; } .board-announcement .button.secondary { color: #f5f2ea; border-color: rgba(245, 242, 234, 0.56); } .board-announcement .hero-actions { margin-top: 4px; } #mystic-website-launch-announcement { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(280px, 0.38fr); grid-template-areas: "copy contact" "actions contact"; gap: clamp(18px, 3vw, 34px); align-items: center; background: radial-gradient(circle at 86% 12%, rgba(179, 119, 54, 0.16), transparent 30%), linear-gradient(135deg, rgba(247, 248, 238, 0.98), rgba(232, 235, 219, 0.96)); color: var(--text); border-color: rgba(97, 114, 9, 0.24); } #mystic-website-launch-announcement::after { display: none; } #mystic-website-launch-announcement .launch-board-copy { grid-area: copy; display: grid; gap: 10px; } #mystic-website-launch-announcement .event-eyebrow { background: rgba(97, 114, 9, 0.1); color: var(--primary); border-color: rgba(97, 114, 9, 0.18); } #mystic-website-launch-announcement h3 { color: var(--text); } #mystic-website-launch-announcement p { color: var(--muted); } #mystic-website-launch-announcement p.launch-offer-line { color: var(--text); font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.28; } #mystic-website-launch-announcement .launch-contact-panel { grid-area: contact; display: grid; gap: 14px; justify-items: start; align-self: stretch; align-content: center; padding: clamp(20px, 2.8vw, 34px); border: 1px solid rgba(97, 114, 9, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.68); box-shadow: 0 18px 42px rgba(39, 42, 31, 0.12); } #mystic-website-launch-announcement .launch-contact-panel span { color: var(--primary); font-family: var(--font-heading); font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1; } #mystic-website-launch-announcement .launch-contact-panel p { color: var(--text); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.42; } #mystic-website-launch-announcement .launch-contact-panel .button { width: 100%; justify-content: center; letter-spacing: 0.04em; text-transform: uppercase; } #mystic-website-launch-announcement .hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; } #mystic-website-launch-announcement .button.secondary { color: var(--primary); border-color: rgba(97, 114, 9, 0.35); background: rgba(255, 255, 255, 0.58); letter-spacing: 0.04em; text-transform: uppercase; } #mystic-website-launch-announcement .button.secondary:hover { background: rgba(97, 114, 9, 0.1); } .board-special { align-content: start; color: var(--text); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 238, 0.92)); transition: border-color 160ms ease, transform 160ms ease; } .board-special:hover { border-color: rgba(179, 119, 54, 0.5); transform: translateY(-2px); } .board-special strong { max-width: 560px; color: var(--text); font-family: var(--font-heading); font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.02; } @media (max-width: 860px) { .mystic-announcement { padding-top: 54px; padding-bottom: 58px; } .mystic-announcement h2 { font-size: 46px; } .mystic-announcement p { font-size: 18px; } .mystic-announcement .hero-actions .button { width: 100%; } .premium-board-grid, .premium-board-grid.single-special { grid-template-columns: 1fr; } .healing-experiences-board { grid-template-columns: 1fr; } .healing-experiences-board.event-feature-board { grid-template-columns: 1fr; } .event-board-feature { grid-row: auto; grid-template-columns: 1fr; grid-template-areas: "image" "copy" "cta"; } .event-board-feature .featured-event-image { min-height: 0; aspect-ratio: 4 / 3; } .event-board-feature .button { width: 100%; justify-self: stretch; } .board-announcement .hero-actions .button { width: 100%; } #mystic-website-launch-announcement { grid-template-columns: 1fr; grid-template-areas: "copy" "actions" "contact"; } #mystic-website-launch-announcement .launch-contact-panel { justify-items: center; text-align: center; } #mystic-website-launch-announcement p.launch-offer-line { font-size: 22px; line-height: 1.26; } .premium-offer-card strong { font-size: 36px; } .board-special strong { font-size: 36px; } } /* Footer as the final Mystic entry point */ footer { display: block; padding: 0; background: var(--text); } .footer-community-entry { position: relative; min-height: 620px; height: auto; max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 760px); justify-content: center; align-items: center; gap: clamp(28px, 5vw, 82px); padding: clamp(36px, 5vw, 62px) clamp(28px, 7vw, 92px); overflow: hidden; background: linear-gradient(90deg, rgba(12, 11, 8, 0.12), rgba(12, 11, 8, 0.12) 50%, rgba(12, 11, 8, 0.34)), url("images/img_27.webp") center center / cover no-repeat; color: #fffaf0; text-align: left; } .footer-entry-board { grid-column: 2; position: relative; z-index: 1; width: min(760px, 100%); display: grid; gap: 10px; padding: clamp(18px, 2vw, 22px); border: 1px solid rgba(255, 250, 240, 0.22); border-radius: 8px; background: rgba(18, 16, 12, 0.58); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); backdrop-filter: blur(9px); text-shadow: 0 3px 18px rgba(0, 0, 0, 0.38); overflow: visible; } .footer-community-panel { width: 100%; display: grid; justify-items: start; gap: 8px; padding: 0; } .footer-community-panel .kicker, .footer-community-panel h2, .footer-community-panel p { color: #fffaf0; } .footer-community-panel h2 { margin: 0; padding: 0; font-size: clamp(31px, 3.1vw, 40px); line-height: 0.98; } .footer-community-panel h2::after { content: none; } .footer-community-panel .community-join-lead { max-width: 100%; margin: 0; font-size: clamp(15px, 1.18vw, 17px); line-height: 1.36; opacity: 0.9; } .footer-community-lanes { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .footer-community-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px; border: 1px solid rgba(255, 250, 240, 0.18); border-radius: 8px; background: rgba(255, 250, 240, 0.08); overflow: hidden; overflow-wrap: anywhere; } .footer-community-card h3 { margin: 0; color: #fffaf0; font-family: var(--font-heading); font-size: clamp(24px, 2.4vw, 31px); line-height: 1; } .footer-community-card p { margin: 0; color: rgba(255, 250, 240, 0.86); font-size: 14px; line-height: 1.36; } .footer-community-panel .community-join-form { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 3px 0 0; } .footer-community-panel .secret-input { width: 100%; min-height: 36px; padding: 8px 11px; border: 1px solid rgba(255, 250, 240, 0.42); border-radius: 6px; background: rgba(18, 16, 12, 0.46); color: #fffaf0; font: inherit; font-size: 14px; backdrop-filter: blur(8px); } .footer-community-panel .secret-input::placeholder { color: rgba(255, 250, 240, 0.72); } .footer-community-panel .button { grid-column: 1 / -1; justify-self: start; margin-top: 4px; min-width: 126px; min-height: 38px; white-space: normal; text-align: center; } .footer-community-panel .community-join-note { max-width: 100%; margin: 0; font-size: 12px; line-height: 1.34; color: rgba(255, 250, 240, 0.66); } .host-action-row { display: grid; gap: 8px; margin-top: 2px; } .host-action-row .button { grid-column: auto; width: 100%; justify-self: stretch; justify-content: center; } .host-action-row .button.secondary { background: rgba(255, 250, 240, 0.12); color: #fffaf0; border-color: rgba(255, 250, 240, 0.42); } .footer-contact-shell { width: 100%; background: transparent; color: #f5f2ea; border-top: 1px solid rgba(255, 250, 240, 0.18); padding-top: 10px; } .footer-contact-shell .footer-right { width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 8px; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .footer-contact-shell .footer-map-card { width: 100%; min-width: 0; } .footer-contact-shell .footer-map-card iframe { height: 96px; } .footer-contact-shell .footer-brand > strong { font-size: clamp(24px, 2.2vw, 29px); } .footer-contact-shell .footer-contact-icons { width: 100%; max-width: 204px; justify-self: start; } .footer-contact-shell .footer-brand { gap: 4px; } .footer-contact-shell .footer-brand > span { font-size: 13px; } @media (max-width: 720px) { .footer-community-entry { min-height: 560px; height: auto; max-height: none; grid-template-columns: 1fr; gap: 20px; padding: 38px 22px; background: linear-gradient(0deg, rgba(12, 11, 8, 0.78), rgba(12, 11, 8, 0.34) 48%, rgba(12, 11, 8, 0.64)), url("images/img_27.webp") 58% center / cover no-repeat; text-align: center; } .footer-entry-board { grid-column: 1; width: min(360px, 100%); max-height: none; overflow: visible; overscroll-behavior: contain; } .footer-community-panel { justify-items: center; gap: 14px; } .footer-community-panel .community-join-form { grid-template-columns: 1fr; } .footer-community-lanes { grid-template-columns: 1fr; } .footer-community-panel .button { justify-self: center; } .footer-contact-shell { width: 100%; padding-top: 14px; } .footer-contact-shell .footer-right { grid-template-columns: 1fr; gap: 12px; } .footer-contact-shell .footer-map-card iframe { height: 112px; } .footer-contact-shell .footer-contact-icons { max-width: 240px; justify-self: center; } } @media (max-width: 520px) { .footer-community-entry { min-height: 520px; height: auto; padding: 34px 18px; } .footer-entry-board { width: min(356px, 100%); max-height: none; } .footer-community-panel { gap: 10px; } } /* HEALING EXPERIENCES - Upcoming Gatherings (2 cards) + collaborator CTA */ .upcoming-gatherings-heading { margin-top: 1.8rem; margin-bottom: 0; font-size: 1.1rem; letter-spacing: 0.04em; } #events-detail .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-left: auto; margin-right: auto; gap: 16px; } @media (max-width: 768px) { #events-detail .action-grid { grid-template-columns: 1fr; max-width: none; } #private-offers-detail, .studio-rental-detail .action-grid { grid-template-columns: 1fr; } .upcoming-gatherings-heading { margin-top: 1.4rem; } } /* MYSTIC COMMUNITY SURVEY - compact on mobile, no endless-text wall */ @media (max-width: 768px) { .survey-card { padding: 1.2rem 1rem; } .survey-q { gap: 0.25rem; } .survey-card .survey-textarea { min-height: 56px !important; font-size: 15px !important; line-height: 1.4 !important; padding: 0.6rem 0.8rem !important; } .survey-card .survey-sub { font-size: 15px !important; margin-bottom: 0.2rem !important; } } /* PRE-LIVE MAIN PAGE POLISH - 2026-06-11 */ main .hero-media { min-height: 700px; height: 82svh; max-height: 920px; } main .hero-overlay { bottom: 72px; } main .hero-overlay h1 { font-size: 92px; line-height: 0.96; } main .hero-overlay p { margin-top: 20px; font-size: 24px; line-height: 1.35; } main .welcome-panel .hero-copy { max-width: 1080px; padding-top: 88px; padding-bottom: 96px; } main .welcome-panel .hero-copy h2 { max-width: 860px; font-size: 64px; line-height: 1.02; } main .welcome-panel .hero-copy p:not(.kicker) { max-width: 880px; font-size: 20px; line-height: 1.62; } main .section h2, main .split-copy h2, main .detail-copy h2 { font-size: 54px; line-height: 1.05; } main .split-copy p, main .detail-copy > p, main .section p, main .experience-authority { font-size: 19px; line-height: 1.64; } main .read-more-link, main .event-price-teaser { font-size: 18px; line-height: 1.25; } main #events .experience-authority, main #events-detail .experience-authority, main #private-sound-healing .experience-authority, main #studio-rental .experience-authority { font-size: 19px; line-height: 1.64; } main .feature-list li, main .compact-list li { font-size: 18px; line-height: 1.52; } main .action-card strong, main .visual-offer-card strong { font-size: 22px; line-height: 1.18; } main .offer-card-description, main .action-card span { font-size: 16px; line-height: 1.42; } @media (max-width: 1100px) { main .hero-media { min-height: 660px; height: 80svh; } main .hero-overlay h1 { font-size: 78px; } main .hero-overlay p { font-size: 22px; } main .welcome-panel .hero-copy h2, main .section h2, main .split-copy h2, main .detail-copy h2 { font-size: 48px; } } @media (max-width: 768px) { main .hero-media { min-height: 600px; height: 74svh; } main .hero-overlay { bottom: 54px; } main .hero-overlay h1 { font-size: 56px !important; line-height: 0.98 !important; } main .hero-overlay p { font-size: 20px !important; line-height: 1.35 !important; } main .welcome-panel .hero-copy { padding-top: 40px; padding-bottom: 46px; } main .welcome-panel .hero-copy h2, main .section h2, main .split-copy h2, main .detail-copy h2 { font-size: 40px !important; line-height: 1.08 !important; } main .welcome-panel .hero-copy p:not(.kicker), main .split-copy p, main .detail-copy > p, main .section p, main .experience-authority { font-size: 18px !important; line-height: 1.6 !important; } main .read-more-link, main .event-price-teaser { font-size: 17px !important; } main #events .experience-authority, main #events-detail .experience-authority, main #private-sound-healing .experience-authority, main #studio-rental .experience-authority { font-size: 18px !important; line-height: 1.6 !important; } } @media (max-width: 420px) { main .hero-media { min-height: 560px; height: 72svh; } main .hero-overlay h1 { font-size: 50px !important; } main .welcome-panel .hero-copy h2, main .section h2, main .split-copy h2, main .detail-copy h2 { font-size: 36px !important; } } /* Final override for the restored old-board/new-community additions */ main .mystic-announcement { background: linear-gradient(135deg, rgba(20, 22, 15, 0.97), rgba(48, 53, 32, 0.95)), radial-gradient(circle at 78% 18%, rgba(179, 119, 54, 0.24), transparent 34%) !important; color: #f5f2ea; } main .mystic-announcement h2 { color: #f5f2ea; font-size: clamp(46px, 6vw, 86px); line-height: 0.96; } main .mystic-announcement p { color: rgba(245, 242, 234, 0.84); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5; } main .mystic-announcement .button.secondary { color: #f5f2ea; border-color: rgba(245, 242, 234, 0.56); } main .premium-offer-card strong { font-size: clamp(34px, 4vw, 58px); line-height: 1.02; } @media (max-width: 768px) { main, main .section, main .welcome-panel, main .hero-copy, main .detail-copy, main .split-copy, main .premium-board-head, main .premium-offer-card, main .healing-board-card { width: 100%; max-width: 100%; min-width: 0; overflow: visible; } main .hero-overlay h1 { max-width: min(340px, calc(100vw - 36px)); white-space: normal !important; overflow-wrap: normal; text-align: center; } main .welcome-panel .hero-copy h2, main .mystic-announcement h2, main .premium-board-head h2, main .premium-offer-card strong, main .board-announcement h3, main .board-special strong { width: 100%; max-width: 100%; overflow-wrap: break-word; white-space: normal !important; } main .mystic-announcement h2 { font-size: 46px !important; } main .mystic-announcement p { font-size: 18px !important; } main .premium-offer-card strong { font-size: 36px !important; } main .board-announcement h3, main .board-special strong { font-size: 36px !important; } } main #story-gallery .gallery-story-heading.gratitude-note { justify-self: center; max-width: min(780px, calc(100vw - 36px)); margin-right: auto; margin-left: auto; text-align: center; } main #story-gallery .gallery-story-heading.gratitude-note h2 { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.02 !important; } main #story-gallery .gallery-story-heading.gratitude-note > p { font-size: clamp(21px, 1.9vw, 27px) !important; line-height: 1.5 !important; } main #story-gallery .gallery-story-heading.gratitude-note .gratitude-quote p { font-size: 18px !important; line-height: 1.6 !important; } main #story-gallery .gallery-story-heading.gratitude-note > p:last-child { font-size: clamp(20px, 1.55vw, 24px) !important; } @media (max-width: 860px) { main #mystic-website-launch-announcement p.launch-offer-line { font-size: 22px !important; line-height: 1.26 !important; } } /* Final premium polish pass - local review only */ main { background: linear-gradient(180deg, #f4f4ed 0%, #ecebe1 48%, #f6f4eb 100%); } main .section, main .welcome-panel { border-color: rgba(39, 42, 31, 0.09); } main .hero-media { min-height: 620px; height: clamp(620px, calc(100svh - 64px), 760px); } main .hero-media img { object-position: center 42%; filter: saturate(1.03) contrast(1.02); } main .hero-media::after { background: linear-gradient(180deg, rgba(12, 11, 8, 0.06), rgba(12, 11, 8, 0.28) 42%, rgba(12, 11, 8, 0.72)); } main .hero-overlay { bottom: clamp(54px, 8vw, 112px); } main .hero-overlay h1 { font-size: clamp(62px, 8vw, 118px); line-height: 0.9; } main .hero-overlay p { max-width: 680px; margin-top: 20px; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.45; } main .welcome-panel .hero-copy { max-width: 1080px; padding-top: clamp(74px, 8vw, 124px); padding-bottom: clamp(74px, 8vw, 124px); } main .welcome-panel .hero-copy h2 { font-size: clamp(50px, 6vw, 84px) !important; line-height: 0.96; } main .welcome-panel .hero-copy p:not(.kicker) { max-width: 900px; } main .button { box-shadow: 0 10px 22px rgba(39, 42, 31, 0.11); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; } main .button:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(39, 42, 31, 0.16); } main .button:not(.secondary):not(.ghost):not(.ghost-dark), .site-header .nav-button, .mystic-spa-direct-button { font-size: 16px !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } main .split.horizontal-feature, main .split.horizontal-feature.reverse, main .detail-screen { max-width: 1320px; margin-right: auto; margin-left: auto; } main .split.horizontal-feature > img, main .section-hero-photo img, main .inside-photo img { box-shadow: 0 22px 58px rgba(39, 42, 31, 0.16); } main .split-copy h2, main .detail-copy h2 { font-size: clamp(42px, 5vw, 72px); line-height: 0.98; } main .healing-experiences-board.event-feature-board { max-width: 1260px; margin: clamp(20px, 3vw, 34px) auto 0; gap: clamp(18px, 2.6vw, 32px); } main .event-board-feature { grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr); column-gap: clamp(34px, 5vw, 76px); padding: clamp(30px, 5vw, 64px); background: linear-gradient(135deg, rgba(255, 252, 246, 0.99), rgba(244, 242, 232, 0.98)); border-color: rgba(179, 119, 54, 0.34); box-shadow: 0 28px 76px rgba(39, 42, 31, 0.15); } main .event-board-feature .featured-event-image { min-height: 430px; aspect-ratio: 16 / 11; object-position: center; box-shadow: 0 24px 64px rgba(39, 42, 31, 0.18); } main .event-board-feature h3 { max-width: 620px; font-size: clamp(58px, 6.5vw, 94px); line-height: 0.88; } main .event-board-feature p { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.48; } main .board-event-card, main .visual-offer-card, main .private-session-panel { background: rgba(255, 255, 250, 0.88); border-color: rgba(97, 114, 9, 0.18); box-shadow: 0 18px 42px rgba(39, 42, 31, 0.1); } main .board-event-card:hover, main .visual-offer-card:hover { border-color: rgba(179, 119, 54, 0.46); transform: translateY(-3px); box-shadow: 0 26px 54px rgba(39, 42, 31, 0.15); } main .board-event-card .event-card-image, main .visual-offer-card .offer-card-image { filter: saturate(1.03) contrast(1.01); } main #mystic-website-launch-announcement { grid-template-columns: minmax(0, 0.58fr) minmax(340px, 0.42fr); padding: clamp(30px, 5vw, 58px); background: linear-gradient(135deg, rgba(251, 251, 244, 0.99), rgba(233, 235, 221, 0.98)); border-color: rgba(97, 114, 9, 0.3); box-shadow: 0 24px 68px rgba(39, 42, 31, 0.13); } main #mystic-website-launch-announcement h3 { max-width: 700px; font-size: clamp(46px, 5.2vw, 74px); line-height: 0.95; } main #mystic-website-launch-announcement p.launch-offer-line { max-width: 780px; font-size: clamp(24px, 2.2vw, 34px) !important; line-height: 1.22 !important; } main #mystic-website-launch-announcement .launch-contact-panel { min-height: 100%; background: linear-gradient(180deg, rgba(255, 253, 247, 0.94), rgba(244, 243, 232, 0.9)); border-color: rgba(179, 119, 54, 0.22); box-shadow: 0 22px 54px rgba(39, 42, 31, 0.13); } main #mystic-website-launch-announcement .launch-contact-panel span { font-size: clamp(34px, 3.8vw, 54px); } main #mystic-website-launch-announcement .button.secondary { background: rgba(255, 255, 255, 0.72); } main .detail-screen .inside-photo { max-width: min(100%, 1120px); margin-right: auto; margin-left: auto; } main .events-detail-screen .inside-photo, main .studio-rental-detail .inside-photo { aspect-ratio: 16 / 5.4; } main #story-gallery { gap: clamp(8px, 1.4vw, 16px); } main #story-gallery .gallery-story-heading.gratitude-note { max-width: min(920px, calc(100vw - 36px)); padding: clamp(22px, 3vw, 34px); background: linear-gradient(180deg, rgba(255, 255, 248, 0.9), rgba(244, 242, 232, 0.84)); border-color: rgba(97, 114, 9, 0.2); box-shadow: 0 22px 58px rgba(39, 42, 31, 0.13); } main #story-gallery .gallery-story-heading.gratitude-note .gratitude-photo { aspect-ratio: 16 / 7; object-position: center 80%; box-shadow: 0 22px 58px rgba(39, 42, 31, 0.18); } main #story-gallery .gallery-story-heading.gratitude-note .gratitude-quote p { max-width: 760px; font-size: clamp(19px, 1.55vw, 23px) !important; } main #about-us { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; max-width: 1320px; margin-right: auto; margin-left: auto; } main #about-us .inside-photo { grid-column: 2; grid-row: 1; justify-self: center; align-self: stretch; width: 100%; max-width: 640px; height: 100%; min-height: 100%; margin: 0; aspect-ratio: 4 / 5; border-radius: 8px; box-shadow: 0 24px 68px rgba(39, 42, 31, 0.17); } main #about-us .inside-photo img { object-position: 88% 56%; filter: saturate(1.04) contrast(1.03); } main #about-us .detail-copy { grid-column: 1; grid-row: 1; align-self: stretch; padding: clamp(26px, 4vw, 46px); border: 1px solid rgba(97, 114, 9, 0.16); border-radius: 8px; background: rgba(255, 255, 250, 0.78); box-shadow: 0 18px 46px rgba(39, 42, 31, 0.1); } main #about-us .detail-copy h2 { max-width: 700px; font-size: clamp(42px, 5vw, 72px); line-height: 0.98; } main #about-us .detail-copy p { max-width: 760px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; } main #about-us .hero-actions { margin-top: 22px !important; } main #about-us .button { min-width: min(100%, 280px); } main footer { background: #181912; } main .footer-community-entry { min-height: 720px; height: auto; max-height: none; background: linear-gradient(90deg, rgba(12, 11, 8, 0.15), rgba(12, 11, 8, 0.08) 42%, rgba(12, 11, 8, 0.52)), url("images/img_27.webp") center center / cover no-repeat; } main .footer-entry-board { width: min(760px, 100%); padding: clamp(24px, 3vw, 34px); background: rgba(17, 15, 11, 0.62); border-color: rgba(255, 250, 240, 0.28); box-shadow: 0 30px 86px rgba(0, 0, 0, 0.36); overflow: visible; } main .footer-community-panel h2 { font-size: clamp(40px, 4.2vw, 58px); line-height: 0.94; } main .footer-community-panel .community-join-lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.48; } main .footer-community-panel .secret-input { min-height: 42px; background: rgba(255, 250, 240, 0.1); border-color: rgba(255, 250, 240, 0.32); } main .footer-community-panel .secret-input:focus { outline: none; border-color: rgba(255, 250, 240, 0.78); background: rgba(255, 250, 240, 0.15); } main .footer-contact-shell { margin-top: 6px; } main .footer-contact-shell .footer-map-card iframe { height: 118px; } main .footer-contact-shell .footer-contact-icons a { background: rgba(255, 250, 240, 0.09); border-color: rgba(255, 250, 240, 0.26); } main .footer-contact-shell .footer-contact-icons a:hover { background: rgba(255, 250, 240, 0.16); border-color: rgba(255, 250, 240, 0.48); } @media (max-width: 980px) { main .hero-media { min-height: 560px; height: 72svh; } main .event-board-feature, main #mystic-website-launch-announcement { grid-template-columns: 1fr; } main .event-board-feature { grid-template-areas: "image" "copy" "cta"; } main .event-board-feature .featured-event-image { min-height: 0; aspect-ratio: 16 / 10; } main #mystic-website-launch-announcement { grid-template-areas: "copy" "actions" "contact"; } main #about-us { grid-template-columns: 1fr; } main #about-us .inside-photo { grid-column: 1; grid-row: 1; max-width: min(100%, 520px); justify-self: center; aspect-ratio: 16 / 9; } main #about-us .detail-copy { grid-column: 1; grid-row: 2; } main .footer-community-entry { min-height: 680px; height: auto; grid-template-columns: 1fr; justify-items: center; padding-top: 58px; padding-bottom: 58px; background: linear-gradient(0deg, rgba(12, 11, 8, 0.76), rgba(12, 11, 8, 0.28) 48%, rgba(12, 11, 8, 0.64)), url("images/img_27.webp") 58% center / cover no-repeat; } main .footer-entry-board { grid-column: 1; } } @media (max-width: 640px) { main .hero-media { min-height: 500px; height: 72svh; } main .hero-media img { object-position: 16% 42%; } main .hero-overlay h1 { font-size: clamp(56px, 18vw, 82px); } main .hero-overlay p { font-size: 18px; } main .welcome-panel .money-path-actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin-top: 22px; padding: 12px; border: 1px solid rgba(97, 114, 9, 0.18); border-radius: 8px; background: rgba(255, 255, 250, 0.7); box-shadow: 0 14px 34px rgba(39, 42, 31, 0.08); } main .welcome-panel .money-path-actions .button { width: 100%; min-height: 46px; justify-content: center; white-space: normal; text-align: center; line-height: 1.15; } main .healing-experiences-board.event-feature-board { width: 100%; max-width: 100%; overflow: hidden; } main .event-board-feature { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) !important; } main .event-board-feature > div, main .event-board-feature .button { min-width: 0; max-width: 100%; } main .event-board-feature .featured-event-image { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } main .event-board-feature .button { width: 100%; white-space: normal; text-align: center; } main .event-board-feature, main #mystic-website-launch-announcement, main .healing-board-card { padding: 20px; } main .event-board-feature h3, main #mystic-website-launch-announcement h3 { font-size: 40px !important; line-height: 0.98; } main #mystic-website-launch-announcement p.launch-offer-line { font-size: 22px !important; } main .events-detail-screen .inside-photo, main .studio-rental-detail .inside-photo { aspect-ratio: 16 / 8; } main #about-us { padding-right: 18px; padding-left: 18px; } main #about-us .inside-photo { max-width: min(100%, 420px); aspect-ratio: 4 / 3; } main #about-us .detail-copy { padding: 20px; } main #about-us .detail-copy h2 { font-size: 40px !important; } main .footer-community-entry { min-height: 640px; height: auto; padding: 34px 18px; } main .footer-entry-board { padding: 20px; } main .footer-community-panel h2 { font-size: 34px; } } /* Local type consistency */ main .split-copy p, main .detail-copy p, main .healing-board-card span, main .offer-card-description { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; } main .board-event-card strong, main .visual-offer-card strong { font-family: var(--font-heading); font-size: clamp(21px, 1.7vw, 26px); line-height: 1.12; } /* Intentional event board cleanup */ main .healing-experiences-board.event-feature-board { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(16px, 2vw, 24px); } main .event-board-feature { grid-column: auto; grid-template-columns: clamp(180px, 16vw, 230px) minmax(0, 1fr); grid-template-areas: "image copy" "image cta"; column-gap: clamp(16px, 2vw, 28px); row-gap: 12px; align-content: stretch; align-items: start; min-height: 100%; height: 100%; padding: clamp(16px, 2vw, 22px); background: rgba(255, 255, 250, 0.88); border-color: rgba(97, 114, 9, 0.18); box-shadow: 0 18px 42px rgba(39, 42, 31, 0.1); } main .event-board-feature .featured-event-image { grid-area: image; width: 100%; height: clamp(180px, 16vw, 230px); min-height: 0; margin: 0; aspect-ratio: 1; border: 0; object-fit: cover; object-position: center; border-radius: 8px; box-shadow: none; } main .event-board-feature .event-board-copy { grid-area: copy; align-self: start; } main .event-board-feature .event-board-actions { grid-area: cta; align-self: end; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } main .event-board-feature h3 { max-width: 100%; margin-bottom: 8px; font-size: clamp(25px, 2vw, 34px); line-height: 1.04; } main .event-board-feature p { max-width: 100%; margin: 0 0 6px; font-size: clamp(15px, 1.08vw, 17px); line-height: 1.36; } main .event-board-feature .button { width: fit-content; min-height: 38px; padding: 8px 12px; font-size: 12px; } main .board-event-card { padding: 16px; } main .board-event-card .event-card-image { aspect-ratio: 1; } main .event-ticket-card { grid-template-columns: clamp(180px, 16vw, 230px) minmax(0, 1fr); grid-template-areas: none; align-items: start; align-content: start; min-height: 100%; height: 100%; column-gap: clamp(16px, 2vw, 28px); row-gap: 6px; } main .event-ticket-card .event-card-image { grid-column: 1; grid-row: 1 / span 5; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } main .event-ticket-card strong { grid-column: 2; margin: 0; } main .event-ticket-card span { grid-column: 2; margin: 0; } main .event-ticket-card .event-card-cta { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 38px; margin-top: 4px; padding: 8px 12px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 12px; letter-spacing: 0.08em; } .offerings-dropdown-menu .booking-direct-group:first-child a { gap: 1px; padding: 7px 9px; } .offerings-dropdown-menu .booking-direct-group:first-child strong { font-size: 14px; line-height: 1.12; } .offerings-dropdown-menu .booking-direct-group:first-child span { font-size: 12px; line-height: 1.22; } main #mystic-website-launch-announcement { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr); padding: clamp(22px, 3vw, 34px); } main #mystic-website-launch-announcement h3 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; } main #mystic-website-launch-announcement p.launch-offer-line { font-size: clamp(18px, 1.55vw, 24px) !important; line-height: 1.3 !important; } main #mystic-website-launch-announcement .launch-contact-panel span { font-size: clamp(28px, 2.8vw, 40px); } main .healing-experiences-board.event-feature-board { align-items: stretch; } main .healing-experiences-board.event-feature-board > .board-event-card { min-height: 100%; height: 100%; align-self: stretch; } main .healing-experiences-board.event-feature-board > .event-ticket-card { display: grid; grid-template-columns: clamp(180px, 16vw, 230px) minmax(0, 1fr); grid-template-areas: "image title" "image description" "image date" "image discount" "image cta"; column-gap: clamp(16px, 2vw, 28px); row-gap: 8px; align-content: start; padding: clamp(16px, 2vw, 22px); } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-image { grid-area: image; width: 100%; height: clamp(180px, 16vw, 230px); margin: 0; aspect-ratio: 1; border: 0; border-radius: 8px; } main .healing-experiences-board.event-feature-board > .event-ticket-card strong { grid-area: title; margin: 0; } main .healing-experiences-board.event-feature-board > .event-ticket-card span { margin: 0; } main .healing-experiences-board.event-feature-board > .event-ticket-card span:nth-of-type(1) { grid-area: description; } main .healing-experiences-board.event-feature-board > .event-ticket-card span:nth-of-type(2) { grid-area: date; } main .healing-experiences-board.event-feature-board > .event-ticket-card span:nth-of-type(3) { grid-area: discount; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-cta { grid-area: cta; justify-self: start; align-self: start; min-width: min(100%, 260px); } @media (max-width: 760px) { main .healing-experiences-board.event-feature-board { grid-template-columns: 1fr; } main .event-board-feature { grid-template-columns: clamp(116px, 34vw, 140px) minmax(0, 1fr) !important; grid-template-areas: "image copy" "cta cta"; padding: 14px; } main .event-board-feature .featured-event-image { aspect-ratio: 1; } main .event-board-feature .featured-event-image, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-image { height: clamp(116px, 34vw, 140px); } main .event-board-feature h3, main #mystic-website-launch-announcement h3 { font-size: 34px !important; line-height: 1.02; } main .event-board-feature .event-location { display: none; } main .event-ticket-card { grid-template-columns: clamp(116px, 34vw, 140px) minmax(0, 1fr); grid-template-areas: none; } main .healing-experiences-board.event-feature-board > .event-ticket-card { grid-template-columns: clamp(116px, 34vw, 140px) minmax(0, 1fr); grid-template-areas: "image title" "image description" "image date" "image discount" "cta cta"; } main .event-board-feature .event-board-actions, main .event-board-feature .button, main .event-ticket-card .event-card-cta { width: 100%; } main #mystic-website-launch-announcement { grid-template-columns: 1fr; } } /* Premium protection and finish: visual-only, no copy changes */ ::selection { background: rgba(97, 114, 9, 0.22); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(179, 119, 54, 0.8); outline-offset: 4px; } img { -webkit-user-drag: none; user-select: none; } main .section, main .welcome-panel, main .healing-experiences-board, main .action-card, main .footer-entry-board { transform: translateZ(0); } main .section img, main .hero-media img { image-rendering: auto; } .brand-dropdown-menu, .offerings-dropdown-menu, .nav-dropdown-menu { will-change: opacity, transform; } /* Ultra premium finishing layer: structure only, no wording changes */ .site-header { background: linear-gradient(180deg, rgba(250, 250, 244, 0.98), rgba(241, 241, 232, 0.95)); border-bottom: 1px solid rgba(97, 114, 9, 0.15); box-shadow: 0 10px 34px rgba(39, 42, 31, 0.08); backdrop-filter: blur(14px); } .site-header .brand, .site-header nav a, .nav-dropdown button, .offerings-dropdown > .nav-button, .brand-dropdown summary { transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } .site-header .brand:hover, .site-header nav a:hover, .nav-dropdown button:hover, .offerings-dropdown > .nav-button:hover, .brand-dropdown summary:hover { transform: translateY(-1px); } .brand-dropdown-menu, .offerings-dropdown-menu, .nav-dropdown-menu { border-color: rgba(97, 114, 9, 0.2); background: linear-gradient(180deg, rgba(255, 255, 250, 0.98), rgba(244, 244, 235, 0.98)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 58px rgba(39, 42, 31, 0.18); } main .welcome-panel, main .detail-copy, main .event-board-feature, main .board-event-card, main .visual-offer-card, main #mystic-website-launch-announcement, main #story-gallery .gallery-story-heading.gratitude-note, main .footer-entry-board { position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 24px 58px rgba(39, 42, 31, 0.12); } main .board-event-card, main .visual-offer-card, main .event-board-feature { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } main .board-event-card:hover, main .visual-offer-card:hover, main .event-board-feature:hover { border-color: rgba(179, 119, 54, 0.42); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 70px rgba(39, 42, 31, 0.16); transform: translateY(-2px); } main .hero-media img, main .split.horizontal-feature > img, main .section-hero-photo img, main .inside-photo img, main .event-card-image, main .offer-card-image, main .featured-event-image { filter: saturate(1.04) contrast(1.02); } main .inside-photo, main .section-hero-photo, main .split.horizontal-feature > img, main .event-card-image, main .offer-card-image, main .featured-event-image, main .gratitude-photo { overflow: hidden; border: 1px solid rgba(97, 114, 9, 0.14); } main .button, main .event-card-cta, main .mystic-spa-direct-button { box-shadow: 0 10px 24px rgba(97, 114, 9, 0.16); } main .button:hover, main .event-card-cta:hover, main .mystic-spa-direct-button:hover { box-shadow: 0 16px 32px rgba(97, 114, 9, 0.24); } main .footer-entry-board { background: linear-gradient(180deg, rgba(20, 18, 14, 0.72), rgba(18, 15, 11, 0.64)); } /* Final client-facing event card and dropdown contract */ .nav-dropdown.is-open .nav-dropdown-menu, .brand-dropdown.is-open .brand-dropdown-menu, .offerings-dropdown.is-open .offerings-dropdown-menu { display: grid; opacity: 1; pointer-events: auto; transform: translateY(0); } main .events-detail-screen > .detail-copy > h2 { white-space: nowrap; } main .healing-experiences-board.event-feature-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: clamp(18px, 2vw, 26px) !important; } main .healing-experiences-board.event-feature-board > .event-board-feature, main .healing-experiences-board.event-feature-board > .event-ticket-card { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr auto !important; grid-template-areas: "image" "copy" "actions" !important; align-content: start !important; align-self: stretch !important; gap: 0 !important; min-height: 100% !important; height: 100% !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; background: rgba(255, 255, 250, 0.92) !important; } main .event-board-feature .featured-event-image, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-image { grid-area: image !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: center !important; box-shadow: none !important; } main .event-board-feature .event-board-copy, main .healing-experiences-board.event-feature-board > .event-ticket-card > strong, main .healing-experiences-board.event-feature-board > .event-ticket-card > span { grid-area: auto !important; } main .event-board-feature .event-board-copy, main .healing-experiences-board.event-feature-board > .event-ticket-card > strong, main .healing-experiences-board.event-feature-board > .event-ticket-card > span:not(.event-card-cta) { margin-right: clamp(18px, 2.2vw, 28px) !important; margin-left: clamp(18px, 2.2vw, 28px) !important; } main .event-board-feature .event-board-copy { grid-area: copy !important; display: grid !important; align-content: start !important; gap: 7px !important; padding-top: clamp(18px, 2vw, 26px) !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card > strong { padding-top: clamp(18px, 2vw, 26px) !important; } main .event-board-feature h3, main .healing-experiences-board.event-feature-board > .event-ticket-card strong { max-width: 100% !important; margin-bottom: 8px !important; font-size: clamp(32px, 2.85vw, 46px) !important; line-height: 1.02 !important; } main .event-board-feature p, main .healing-experiences-board.event-feature-board > .event-ticket-card span { font-size: clamp(17px, 1.2vw, 20px) !important; line-height: 1.42 !important; } main .event-board-feature .event-location { display: block !important; } main .event-board-feature .event-board-actions, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-actions { grid-area: actions !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-self: end !important; gap: 10px !important; margin-top: auto !important; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 30px) !important; } main .event-board-feature .event-board-actions .button, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-actions .button { min-width: min(100%, 180px) !important; min-height: 44px !important; padding: 11px 16px !important; font-size: 13px !important; line-height: 1.1 !important; } main .event-board-feature .event-board-actions .button.secondary, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-actions .button.secondary { background: var(--primary) !important; color: var(--primary-text) !important; border-color: var(--primary) !important; } @media (max-width: 860px) { main .events-detail-screen > .detail-copy > h2 { white-space: normal; } main .healing-experiences-board.event-feature-board { grid-template-columns: 1fr !important; } main .event-board-feature .event-board-actions, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-actions { justify-content: stretch !important; } main .event-board-feature .event-board-actions .button, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-card-actions .button { width: 100% !important; } } /* Desktop scale correction: nav, dropdowns, and About Us frame consistency */ @media (min-width: 1024px) { .site-header { min-height: 88px; padding-top: 12px; padding-bottom: 12px; } .site-header .brand, .brand-dropdown summary.brand { font-size: clamp(42px, 3.25vw, 58px) !important; line-height: 0.94 !important; } .site-header > nav, .site-header nav { gap: clamp(24px, 2vw, 36px) !important; font-size: clamp(21px, 1.35vw, 27px) !important; line-height: 1.05 !important; } .site-header nav a, .site-header .community-menu-trigger { font-size: clamp(21px, 1.35vw, 27px) !important; line-height: 1.05 !important; font-weight: 700 !important; } .site-header .nav-button, .offerings-dropdown > .nav-button { min-height: 66px !important; padding: 18px 28px !important; font-size: clamp(18px, 1.2vw, 22px) !important; line-height: 1 !important; letter-spacing: 0.1em !important; } .community-nav-dropdown .nav-dropdown-menu, .nav-dropdown-menu { right: 0 !important; left: auto !important; width: min(720px, calc(100vw - 96px)) !important; min-width: min(720px, calc(100vw - 96px)) !important; padding: 18px !important; gap: 12px !important; } .community-nav-dropdown .nav-dropdown-menu a, .nav-dropdown-menu a { padding: 14px 18px !important; border-radius: 8px !important; } .community-nav-dropdown .nav-dropdown-menu strong, .nav-dropdown-menu strong { font-size: clamp(20px, 1.35vw, 25px) !important; line-height: 1.1 !important; } .community-nav-dropdown .nav-dropdown-menu span, .nav-dropdown-menu span { font-size: clamp(17px, 1.05vw, 21px) !important; line-height: 1.25 !important; } main .section { padding-top: clamp(88px, 7vw, 124px); padding-bottom: clamp(88px, 7vw, 124px); } main #about-us { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(56px, 5vw, 86px) !important; align-items: stretch !important; max-width: 1460px !important; } main #about-us .detail-copy, main #about-us .inside-photo { min-height: clamp(720px, 62vw, 920px) !important; height: 100% !important; } main #about-us .detail-copy { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: clamp(58px, 4.5vw, 78px) !important; } main #about-us .detail-copy h2 { max-width: 820px !important; font-size: clamp(76px, 5.4vw, 104px) !important; line-height: 0.9 !important; margin-bottom: 34px !important; } main #about-us .detail-copy p { max-width: 820px !important; font-size: clamp(22px, 1.45vw, 27px) !important; line-height: 1.5 !important; } main #about-us .inside-photo { max-width: none !important; aspect-ratio: auto !important; } main #about-us .inside-photo img { object-fit: cover !important; object-position: 88% 56% !important; } main #story-gallery .gallery-story-heading.gratitude-note .gratitude-photo, main .gallery-testimonial-slide img, main .section-hero-photo img, main .inside-photo img { border-radius: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } @media (max-width: 720px) { .brand-dropdown { width: 100%; } .brand-dropdown-menu { left: 0; width: min(320px, calc(100vw - 28px)); } .brand-dropdown-menu { max-height: min(68vh, 420px); overflow-y: auto; } main .hero-actions.money-path-actions { gap: 10px; } } /* Fast laptop correction: keep the premium layout usable and matched */ @media (min-width: 1024px) { .site-header { gap: clamp(14px, 1.4vw, 22px) !important; padding-right: clamp(24px, 3.5vw, 48px) !important; padding-left: clamp(24px, 3.5vw, 48px) !important; } .site-header nav { flex-wrap: nowrap !important; gap: clamp(14px, 1.25vw, 22px) !important; } .site-header nav a, .site-header .community-menu-trigger { white-space: nowrap !important; } .site-header .nav-button, .offerings-dropdown > .nav-button { min-height: 60px !important; padding: 14px 22px !important; } .community-nav-dropdown .nav-dropdown-menu, .nav-dropdown-menu { width: min(560px, calc(100vw - 64px)) !important; min-width: min(560px, calc(100vw - 64px)) !important; max-height: min(72vh, 620px) !important; overflow-y: auto !important; padding: 12px !important; gap: 6px !important; } .community-nav-dropdown .nav-dropdown-menu a, .nav-dropdown-menu a { padding: 9px 12px !important; } .community-nav-dropdown .nav-dropdown-menu strong, .nav-dropdown-menu strong { font-size: clamp(20px, 1.08vw, 22px) !important; } .community-nav-dropdown .nav-dropdown-menu span, .nav-dropdown-menu span { font-size: clamp(17px, 0.95vw, 18px) !important; } main .event-board-feature .event-board-actions, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-actions { justify-content: flex-start !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy { grid-area: copy !important; display: grid !important; align-content: start !important; gap: 7px !important; padding-top: clamp(18px, 2vw, 26px) !important; margin-right: clamp(18px, 2.2vw, 28px) !important; margin-left: clamp(18px, 2.2vw, 28px) !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy h3, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy p { margin: 0 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy h3 { font-size: clamp(32px, 2.85vw, 46px) !important; line-height: 1.02 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy p { font-size: clamp(17px, 1.2vw, 20px) !important; line-height: 1.42 !important; } } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy { grid-area: copy !important; display: grid !important; grid-template-columns: 1fr !important; align-content: start !important; gap: 7px !important; padding-top: clamp(18px, 2vw, 26px) !important; margin-right: clamp(18px, 2.2vw, 28px) !important; margin-left: clamp(18px, 2.2vw, 28px) !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy > * { grid-area: auto !important; margin-right: 0 !important; margin-left: 0 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-eyebrow { width: fit-content !important; margin-bottom: 6px !important; color: var(--primary-text) !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy h3 { max-width: 100% !important; margin: 0 0 8px !important; font-size: clamp(32px, 2.85vw, 46px) !important; line-height: 1.02 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy p { margin: 0 !important; font-size: clamp(17px, 1.2vw, 20px) !important; line-height: 1.42 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy .event-location, main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-copy .event-discount-line { color: var(--primary) !important; font-weight: 700 !important; } main .healing-experiences-board.event-feature-board > .event-ticket-card .event-board-actions { grid-area: actions !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-self: end !important; gap: 10px !important; margin-top: auto !important; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 30px) !important; } /* Client-facing Our Story correction: match the section rhythm above */ @media (min-width: 1024px) { main #about-us { max-width: 1320px !important; gap: clamp(32px, 4vw, 56px) !important; align-items: stretch !important; padding-top: 95px !important; padding-bottom: 95px !important; } main #about-us .detail-copy, main #about-us .inside-photo { min-height: 0 !important; height: auto !important; } main #about-us .detail-copy { justify-content: start !important; padding: clamp(30px, 2.6vw, 38px) !important; } main #about-us .detail-copy h2 { font-size: clamp(56px, 5vw, 68px) !important; line-height: 0.98 !important; margin-bottom: 22px !important; } main #about-us .detail-copy p { font-size: clamp(18px, 1.25vw, 20px) !important; line-height: 1.36 !important; margin: 0 0 10px !important; } main #about-us .inside-photo { align-self: stretch !important; max-width: 560px !important; height: 100% !important; min-height: 100% !important; aspect-ratio: auto !important; } main #about-us .inside-photo img { height: 100% !important; min-height: 100% !important; object-fit: cover !important; } main #about-us .hero-actions { margin-top: 10px !important; } } @media (max-width: 720px) { main #about-us { gap: 18px !important; padding-top: 54px !important; padding-bottom: 54px !important; } main #about-us .inside-photo { max-width: 100% !important; aspect-ratio: 4 / 3 !important; } main #about-us .detail-copy { padding: 22px !important; } main #about-us .detail-copy h2 { font-size: 40px !important; line-height: 1 !important; } main #about-us .detail-copy p { font-size: 17px !important; line-height: 1.48 !important; } }