/* =========================================================================== THE VAULT — ADDITIONS Standalone stylesheet. Upload to public_html alongside styles.css. Loaded AFTER styles.css in each page's , so it can override it. =========================================================================== */ /* ----- Now Open banner --------------------------------------------------- Uses the same .coming-soon-banner base; .now-open just brightens it and makes room for the inline booking link. -------------------------------- */ .coming-soon-banner.now-open { background: linear-gradient(90deg, var(--aged-brass), var(--soft-gold) 50%, var(--aged-brass)); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.15rem; } .coming-soon-banner.now-open a { margin-left: 0.85rem; padding-left: 0.85rem; border-left: 1px solid rgba(15, 15, 18, 0.35); text-decoration: none; border-bottom: 1px solid rgba(15, 15, 18, 0.5); padding-bottom: 1px; } .coming-soon-banner.now-open a:hover { color: var(--smoked-black); border-bottom-color: var(--smoked-black); } @media (max-width: 560px) { .coming-soon-banner.now-open { font-size: 0.7rem; letter-spacing: 0.14em; } .coming-soon-banner.now-open a { margin-left: 0.5rem; padding-left: 0.5rem; } } /* ----- Clickable room posters ------------------------------------------- Wraps .room-poster in an anchor. The overlay label fades in on hover and is always visible on touch devices, which have no hover state. --------- */ .room-poster-link { display: block; color: inherit; } .room-poster-link:hover { color: inherit; } .room-poster-link:focus-visible { outline: 2px solid var(--soft-gold); outline-offset: 3px; } .room-title a { color: inherit; } .room-card:hover .room-title a { color: var(--soft-gold); } .room-book-overlay { position: absolute; left: 50%; bottom: 1.1rem; transform: translate(-50%, 8px); z-index: 3; display: inline-block; padding: 0.6rem 1.4rem; background: rgba(15, 15, 18, 0.82); border: 1px solid var(--soft-gold); border-radius: 4px; color: var(--soft-gold); font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; } .room-card:hover .room-book-overlay, .room-poster-link:focus-visible .room-book-overlay { opacity: 1; transform: translate(-50%, 0); } @media (hover: none) { .room-book-overlay { opacity: 1; transform: translate(-50%, 0); } } /* ----- Group page CTA pair ---------------------------------------------- Two buttons side by side under the party section. ---------------------- */ .group-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } /* ----- Reviews ----------------------------------------------------------- Continuous marquee. The track holds three identical sets of cards and slides exactly one third, so the loop is seamless. If you add or remove a card, add or remove it from all three sets. -------------------------- */ .reviews-section { background: var(--smoked-black); padding: 6rem 0 5rem; position: relative; overflow: hidden; border-top: 1px solid rgba(176, 141, 87, 0.15); } .reviews-header { text-align: center; margin-bottom: 3rem; } .reviews-header h2 { color: var(--warm-stone); margin-bottom: 1rem; } .reviews-header p { max-width: 520px; margin: 0 auto; color: rgba(241, 234, 226, 0.75); font-size: 0.95rem; } .reviews-marquee { position: relative; overflow: hidden; padding: 0.5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .reviews-track { display: flex; gap: 1.5rem; width: max-content; animation: reviewsScroll 70s linear infinite; } .reviews-marquee:hover .reviews-track { animation-play-state: paused; } @keyframes reviewsScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.3333%); } } .review-card { flex: 0 0 340px; width: 340px; margin: 0; padding: 1.75rem 1.6rem; background: var(--midnight-charcoal); border: 1px solid rgba(176, 141, 87, 0.28); border-radius: 4px; display: flex; flex-direction: column; transition: border-color 0.4s ease; } .reviews-marquee:hover .review-card { border-color: rgba(176, 141, 87, 0.18); } .reviews-marquee .review-card:hover { border-color: rgba(227, 193, 111, 0.6); } .review-stars { color: var(--soft-gold); letter-spacing: 0.28em; font-size: 0.82rem; margin-bottom: 0.9rem; } .review-text { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--warm-stone); margin: 0 0 1.1rem; flex-grow: 1; } .review-text::before { content: "\201C"; } .review-text::after { content: "\201D"; } .review-author { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aged-brass); font-weight: 500; } .reviews-cta { text-align: center; margin-top: 2.75rem; } .reviews-cta a { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--soft-gold); border-bottom: 1px solid rgba(227, 193, 111, 0.4); padding-bottom: 3px; } .reviews-cta a:hover { color: var(--warm-stone); border-bottom-color: var(--warm-stone); } @media (max-width: 560px) { .reviews-section { padding: 4.5rem 0 4rem; } .review-card { flex: 0 0 280px; width: 280px; padding: 1.5rem 1.35rem; } .review-text { font-size: 1rem; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; } .reviews-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; } .room-book-overlay { transition: none; } } /* ----- Groups page: private-booking note --------------------------------- Sits under the occasions line on groups.html. ------------------------- */ .party-private-note { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aged-brass); margin: 0 auto 2.5rem; max-width: 520px; }