/* Fonts now preloaded via in each page's for non-blocking, parallel font fetch. */ /* ============================================ BEAUSWORLD — shared styles Inspired by drakerelated.com/rooms ============================================ */ :root { --bw-ink: #ffffff; --bw-ink-dim: rgba(255, 255, 255, 0.7); --bw-pink: #ffd0e0; --bw-gold: #d4b896; --bw-cream: #f5ede0; --bw-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --bw-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --bw-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; } /* Pull-quote opening line inside modals */ .bw-modal-card .bw-pull { font-family: var(--bw-serif); font-style: italic; font-size: 19px; line-height: 1.35; font-weight: 400; color: #111; letter-spacing: 0.005em; } /* Gold accent for modal headlines (the Beau Dunn signature touch) */ .bw-modal-card h2 { font-family: var(--bw-serif); font-weight: 500; font-size: 26px; letter-spacing: 0.01em; color: #111; position: relative; padding-bottom: 12px; margin-bottom: 16px; } .bw-modal-card h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 1px; background: var(--bw-gold); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Body has NO animation. Earlier the `bwBodyFadeIn` keyframe animation would occasionally get stuck at `from { opacity: 0 }`, which made the ENTIRE page invisible because opacity compounds through children. The navigation fade-out is set inline via JS on portal click — that still works because inline styles override CSS without !important. */ body { opacity: 1; } /* Visually-hidden h1 for SEO/accessibility — present in DOM, not on screen */ .bw-h1, .bw-seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* SEO blocks expand internally — only the outer wrapper is hidden */ .bw-seo > * { white-space: normal; } /* ============================================ Social media floating button (bottom-right) ============================================ */ .bw-social { position: fixed; left: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: var(--bw-font); /* Empty space in the column passes clicks through to the page underneath (so it doesn't block hotspots like the mailbox Subscribe ping). Only the trigger button reactivates clicks; panel items inherit clickability from the panel itself (none when closed, auto when open). */ pointer-events: none; } .bw-social-trigger { pointer-events: auto; } .bw-social-trigger { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); transition: background 160ms ease, transform 240ms cubic-bezier(0.22,0.61,0.36,1); } .bw-social-trigger:hover { background: rgba(0,0,0,0.72); } .bw-social-trigger svg { width: 20px; height: 20px; } .bw-social.is-open .bw-social-trigger { transform: rotate(90deg); } .bw-social-panel { display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22,0.61,0.36,1); } .bw-social.is-open .bw-social-panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .bw-social-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); color: #fff; text-decoration: none; font-size: 12px; letter-spacing: 0.06em; backdrop-filter: blur(8px); transition: background 140ms ease, transform 140ms ease; } .bw-social-item:hover { background: rgba(0,0,0,0.85); transform: translateX(2px); } .bw-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #fff; } .bw-social-icon svg { width: 18px; height: 18px; display: block; } .bw-social-label { white-space: nowrap; } @media (max-width: 720px) { .bw-social { left: 14px; bottom: 14px; } .bw-social-trigger { width: 44px; height: 44px; } } html, body { height: 100%; width: 100%; overflow: hidden; background: #000; font-family: var(--bw-font); color: var(--bw-ink); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* Stage — fullscreen background image COVER fit, no bars. Hotspots are anchored via JS using cover-crop math in js/shared.js so they stay locked to image features as viewport reshapes. */ .bw-stage { position: fixed; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #000; transition: filter 600ms ease, opacity 600ms ease; animation: bwFadeIn 1.2s ease both; } /* Time-of-day color wash — see /js/shared.js for the data-tod logic. Stage gets a brightness/saturation tweak; .bw-tod-wash sits above the stage but below all hotspots/chrome (z-index 2) and tints the scene. */ .bw-tod-wash { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: background 600ms ease; background: rgba(0,0,0,0); } html[data-tod="dawn"] .bw-stage { filter: brightness(0.92) saturate(0.95); } html[data-tod="dawn"] .bw-tod-wash { background: rgba(120, 80, 130, 0.28); } html[data-tod="day"] .bw-stage { filter: none; } html[data-tod="day"] .bw-tod-wash { background: rgba(0,0,0,0); } html[data-tod="golden"] .bw-stage { filter: brightness(1.02) saturate(1.10); } html[data-tod="golden"] .bw-tod-wash { background: rgba(255, 130, 50, 0.24); } html[data-tod="night"] .bw-stage { filter: brightness(0.55) saturate(1.15); } html[data-tod="night"] .bw-tod-wash { background: rgba(10, 25, 70, 0.50); } .bw-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100% ); pointer-events: none; } /* Hotspots mount — explicit viewport-aligned positioning context. This guarantees hotspot px coordinates from anchorHotspotsToImage() map to the same coordinate system as .bw-stage. z-index 31 sits ABOVE the chrome bar (z-30) so portals near corners aren't blocked by the ® / wordmark / Subscribe link. */ .bw-hotspots-mount { position: fixed; inset: 0; pointer-events: none; z-index: 31; } .bw-hotspots-mount > a { pointer-events: auto; } /* Hotspots fade in only AFTER they've been anchored to the image — prevents the "snap into place" flash where they render at viewport-% positions for a frame before the cover-fit math runs. */ .bw-hotspots-mount > a { opacity: 0; transition: opacity 200ms ease-in; } .bw-hotspots-mount > a.bw-anchored { opacity: 1; } @keyframes bwFadeIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } /* legacy single-line fallback */ /* Enter button (landing page) */ /* Ping dot — interactive hotspot */ .bw-ping { position: absolute; /* Hit area: 44×44 (WCAG AA + Apple HIG floor). Visible core stays 12px. */ width: 44px; height: 44px; transform: translate(-50%, -50%); cursor: pointer; z-index: 15; display: flex; align-items: center; justify-content: center; } .bw-ping:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; } .bw-ping .core { position: absolute; /* 12px visible dot, centered in the 44px hit area */ width: 12px; height: 12px; inset: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 16px rgba(255,255,255,0.9); z-index: 2; } .bw-ping .pulse { position: absolute; /* Pulse rings emanate from the 12px core, but scale much further so the ring is easier to spot at a glance on busy backgrounds. */ width: 12px; height: 12px; inset: auto; border-radius: 50%; background: rgba(255, 255, 255, 0.75); animation: bwPing 2.6s cubic-bezier(0, 0, 0.2, 1) infinite; } .bw-ping .pulse:nth-child(2) { animation-delay: 0.85s; } .bw-ping .pulse:nth-child(3) { animation-delay: 1.7s; } @keyframes bwPing { 0% { transform: scale(1); opacity: 0.85; } 80% { transform: scale(5.5); opacity: 0; } 100% { transform: scale(5.5); opacity: 0; } } /* Ping label renders ABOVE the dot by default so it never collides with the music toggle or other bottom-aligned UI. Add class .bw-ping.label-below to flip back to below if a specific ping needs it. */ .bw-ping .label { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; backdrop-filter: blur(6px); } .bw-ping.label-below .label { bottom: auto; top: calc(100% + 14px); } .bw-ping:hover .label, .bw-ping:focus .label { opacity: 1; transform: translateX(-50%) translateY(-2px); } .bw-ping.mailbox .core { background: var(--bw-pink); box-shadow: 0 0 16px rgba(255,208,224,0.95); } .bw-ping.mailbox .pulse { background: rgba(255,208,224,0.55); } /* Pink variant — for fashion / summer / lifestyle pings */ .bw-ping.pink .core { background: #ff8ec8; box-shadow: 0 0 18px rgba(255,142,200,0.95); } .bw-ping.pink .pulse { background: rgba(255,142,200,0.55); } /* Room nav (bottom) */ .bw-nav-DISABLED { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 30; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; } .bw-nav::-webkit-scrollbar { display: none; } .bw-nav a { padding: 10px 16px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 999px; color: var(--bw-ink-dim); transition: background 180ms ease, color 180ms ease; white-space: nowrap; } .bw-nav a:hover { color: #fff; background: rgba(255,255,255,0.12); } .bw-nav a.is-current { color: #111; background: #fff; } /* Room title (top-left) */ .bw-room-title { position: fixed; top: 24px; left: 24px; z-index: 30; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bw-ink); text-shadow: 0 2px 8px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 4px; } .bw-room-title strong { font-weight: 500; font-size: 13px; letter-spacing: 0.18em; } .bw-room-title span { opacity: 0.7; font-size: 10px; } /* Back / Home button (top-right) */ .bw-home { position: fixed; top: 24px; right: 24px; z-index: 30; padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); color: #fff; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; transition: background 180ms ease; } .bw-home:hover { background: rgba(0,0,0,0.75); } /* Missing image fallback */ .bw-stage.bw-missing { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); } .bw-stage.bw-missing::before { content: "Drop image into /beausworld/images/"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; } /* Mobile */ @media (max-width: 720px) { .bw-nav a { padding: 8px 12px; font-size: 10px; } .bw-room-title { top: 16px; left: 16px; } .bw-home { top: 16px; right: 16px; } } /* ============================================ bw-portal — clear pulsing ring + centered arrow. Collapsed: 44x44 transparent circle with arrow dead-center, two pulse rings. Hover: expands to a pill showing "Enter [Name]"; circle stays anchored to the placement point. Direction: .arrow-left (default) / -right / -up / -down ============================================ */ /* drakerelated.com-style pill: TIGHT to the content, CLEAR background, white border that hugs arrow + text. No extra dark space on the sides. */ .bw-portal { position: absolute; transform: translate(-22px, -50%); z-index: 15; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; /* tight gap between arrow and text */ width: max-content; height: 36px; /* slimmer pill height like drake */ padding: 0 18px; /* symmetric, tight */ border-radius: 999px; white-space: nowrap; background: transparent; /* CLEAR — like drake */ background-clip: padding-box; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.85); font: 500 13px/1 var(--bw-font); letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); /* strong shadow for legibility on bright bg */ box-shadow: none; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; } /* No ring, no halo, no glow, no animation. Just the pill. */ .bw-portal::before { display: none; } .bw-portal::after { display: none; } /* Glyph is now natural-width inline — sits flush next to text with a 6px gap set on the parent's flex gap. No more 36px empty box wasting space. */ .bw-portal .glyph { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: #fff; transition: transform 200ms ease; } @media (prefers-reduced-motion: reduce) { .bw-portal::before { animation: none !important; } } .bw-portal .glyph::before { content: ""; } /* Direction variants */ .bw-portal.arrow-left .glyph::before { content: "←"; } .bw-portal.arrow-right .glyph::before { content: "→"; } .bw-portal.arrow-up .glyph::before { content: "↑"; } .bw-portal.arrow-down .glyph::before { content: "↓"; } .bw-portal.arrow-left:hover .glyph { transform: translateX(-3px); } .bw-portal.arrow-right:hover .glyph { transform: translateX(3px); } .bw-portal.arrow-up:hover .glyph { transform: translateY(-3px); } .bw-portal.arrow-down:hover .glyph { transform: translateY(3px); } /* Right-pointing pills anchor by their RIGHT edge. */ .bw-portal.arrow-right { transform: translate(calc(-100% + 18px), -50%); flex-direction: row-reverse; } /* Always-visible copy — never shrink, never clip, always measure at content width. */ .bw-portal .copy { display: inline-block; opacity: 1; overflow: visible; white-space: nowrap; flex: none; flex-shrink: 0; margin: 0; padding: 0; max-width: none; min-width: max-content; } .bw-portal:hover, .bw-portal:focus-visible { background: rgba(0, 0, 0, 0.25); border-color: #fff; } /* Hide the glow ring entirely when pill is expanded. */ .bw-portal:hover::before, .bw-portal:focus-visible::before { display: none; } /* When navigating away (body.is-leaving), kill the ring so it doesn't flash back on as the cursor leaves and the page fades out. */ body.is-leaving .bw-portal::before { display: none; } body.is-leaving .bw-hotspots-mount { opacity: 0; transition: opacity 120ms ease; } /* ============================================ Persistent "Enter Beausworld" pill (gate) Fades in after intro dismiss; sits center-bottom. ============================================ */ .bw-enter-pill { position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(8px); z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; height: 40px; border-radius: 999px; background: transparent; background-clip: padding-box; border: 1.5px solid rgba(255, 255, 255, 0.85); color: #fff; font-family: var(--bw-font); font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity 600ms ease 200ms, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms, background 200ms ease, border-color 200ms ease; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); } .bw-enter-pill.is-shown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .bw-enter-pill:hover, .bw-enter-pill:focus-visible { background: rgba(0, 0, 0, 0.25); border-color: #fff; outline: none; } .bw-enter-pill .arrow { font-style: normal; font-family: var(--bw-font); font-size: 18px; line-height: 1; transform: translateY(-1px); } @media (max-width: 640px) { .bw-enter-pill { bottom: 72px; padding: 12px 22px 12px 18px; font-size: 14px; } } /* Hover/focus copy states are now a no-op — copy is always visible — but we keep these selectors defined to neutralize any leftover transitions. */ .bw-portal:hover .copy, .bw-portal:focus-visible .copy { opacity: 1; } /* Dark variant (for bright backgrounds) */ .bw-portal.dark { color: #111; border-color: rgba(0, 0, 0, 0.8); text-shadow: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.45), 0 4px 18px rgba(0,0,0,0.15); } .bw-portal.dark .glyph { color: #111; } .bw-portal.dark::before, .bw-portal.dark::after { border-color: rgba(0, 0, 0, 0.6); } .bw-portal.dark:hover { background: rgba(255, 255, 255, 0.85); border-color: #111; } /* Mobile — slightly smaller pill, same drake-style tight layout. */ @media (max-width: 720px) { .bw-portal { height: 32px; font-size: 12px; padding: 0 14px; transform: translate(-18px, -50%); gap: 5px; } .bw-portal.arrow-right { transform: translate(calc(-100% + 14px), -50%); } .bw-portal .glyph { font-size: 13px; } } /* ============================================ Modal (white popup) — e.g. About ============================================ */ .bw-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 240ms ease; } .bw-modal.is-open { display: flex; opacity: 1; } .bw-modal-card { position: relative; background: #fff; color: #111; padding: 40px 44px; border-radius: 22px; max-width: 520px; width: 100%; max-height: 80vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); font-family: var(--bw-font); animation: bwModalIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes bwModalIn { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .bw-modal-card h2 { font-size: 22px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 16px; } .bw-modal-card p { font-size: 15px; line-height: 1.6; color: #333; } .bw-modal-close { position: absolute; top: 14px; right: 18px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.06); color: #111; font-size: 20px; line-height: 1; cursor: pointer; transition: background 180ms ease; font-family: var(--bw-font); } .bw-modal-close:hover { background: rgba(0, 0, 0, 0.14); } /* ============================================ bw-chrome — top + bottom UI chrome, drakerelated.com style No background; white text floats on the photo with a soft shadow. ============================================ */ .bw-chrome-top, .bw-chrome-bottom { position: fixed; left: 0; right: 0; z-index: 30; display: flex; align-items: center; padding: 22px 28px; pointer-events: none; /* let pings underneath stay clickable */ font-family: var(--bw-font); color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } .bw-chrome-top { top: 0; } .bw-chrome-bottom { bottom: 0; } .bw-chrome-top .left, .bw-chrome-top .center, .bw-chrome-top .right, .bw-chrome-bottom .left, .bw-chrome-bottom .right { pointer-events: auto; } .bw-chrome-top .left { flex: 1 1 0; display: flex; gap: 28px; align-items: center; } .bw-chrome-top .center { flex: 0 0 auto; text-align: center; display: flex; align-items: center; justify-content: center; } .bw-chrome-top .right { flex: 1 1 0; display: flex; justify-content: flex-end; gap: 22px; align-items: center; } /* Fallback for any page that still has .bw-explore directly in the bar */ .bw-chrome-top > .bw-explore { flex: 1 1 0; display: flex; gap: 28px; align-items: center; } .bw-chrome-bottom .left { flex: 1 1 0; } .bw-chrome-bottom .right { flex: 1 1 0; text-align: right; opacity: 0.7; } /* The ® is now a clickable button that opens the Info modal. */ .bw-info-trigger { background: none; border: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; padding: 4px 6px; opacity: 0.85; transition: opacity 160ms ease; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } .bw-info-trigger:hover { opacity: 1; } /* Links and labels — small, title case, light weight, normal tracking */ .bw-chrome-top a, .bw-chrome-bottom a { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #fff; text-decoration: none; transition: opacity 160ms ease; } .bw-chrome-top a:hover, .bw-chrome-bottom a:hover { opacity: 0.7; } .bw-chrome-top .wordmark { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #fff; } /* Mobile */ @media (max-width: 720px) { .bw-chrome-top { padding: 16px 18px; position: fixed; justify-content: space-between; } .bw-chrome-bottom { padding: 16px 18px; } .bw-chrome-top .left { flex: 0 0 auto; gap: 0; min-width: 0; justify-content: flex-start; } .bw-chrome-top .right { flex: 0 0 auto; gap: 0; justify-content: flex-end; } .bw-chrome-top a, .bw-chrome-top .bw-explore-trigger, .bw-chrome-top .bw-index-trigger, .bw-chrome-top .wordmark { font-size: 12px !important; letter-spacing: 0; font-weight: 500; } .bw-chrome-top .bw-explore-trigger .chev { font-size: 10px; } /* Mobile chrome layout: Explore (far left) | Beausworld (dead center) | Index (far right). Hide Shop + Contact (still reachable via Explore dropdown and Index modal). */ .bw-chrome-top .bw-chrome-shop, .bw-chrome-top .bw-chrome-contact { display: none !important; } /* Center wordmark absolutely so it stays perfectly mid-viewport regardless of L/R sizes */ .bw-chrome-top .center { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; pointer-events: none; flex: none !important; text-align: center; } .bw-chrome-top .center .wordmark { pointer-events: auto; white-space: nowrap; display: inline-block; } } @media (max-width: 420px) { .bw-chrome-top a, .bw-chrome-top .bw-explore-trigger, .bw-chrome-top .bw-index-trigger, .bw-chrome-top .wordmark { font-size: 11px !important; } .bw-chrome-top { padding: 14px 14px; } } /* ============================================ MOBILE PAN HINTS — left + right floating arrows that signal "swipe to see more". Fade out after the first user scroll. ============================================ */ .bw-pan-hint { position: fixed; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; z-index: 25; pointer-events: none; display: none; align-items: center; justify-content: center; color: #fff; font-family: var(--bw-font); font-weight: 500; font-size: 26px; line-height: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); animation: bwPanPulse 1.8s ease-in-out infinite; opacity: 0.9; transition: opacity 400ms ease; } .bw-pan-hint.left { left: 6px; } .bw-pan-hint.right { right: 6px; } .bw-pan-hint.is-dismissed { opacity: 0; } @keyframes bwPanPulse { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(var(--bw-pan-shift, 0)); } } .bw-pan-hint.left { --bw-pan-shift: -6px; } .bw-pan-hint.right { --bw-pan-shift: 6px; } @media (max-width: 720px) { .bw-pan-hint { display: flex; } } /* ============================================ MOBILE PAN MODE — image extends wider than viewport, user swipes horizontally to see every ping. The hotspot JS reads the stage rect (not the viewport) when the stage > viewport, so pings stay locked to the photo. Desktop is completely unaffected. ============================================ */ @media (max-width: 720px) { html, body { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } .bw-stage { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 178vh !important; height: 100vh !important; height: 100dvh !important; background-size: cover !important; background-position: center center !important; animation: none !important; transform: none !important; } .bw-hotspots-mount { position: absolute !important; top: 0 !important; left: 0 !important; width: 178vh !important; height: 100vh !important; height: 100dvh !important; } } /* Bottom .bw-nav is superseded by .bw-chrome-top */ .bw-nav { display: none !important; } /* ============================================ .bw-portal.centered — for the gate landing's primary CTA. Uses the same small arrow→pill behavior as room hotspots, but anchors to the viewport center instead of an x%/y% point. ============================================ */ .bw-portal.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } .bw-portal.centered.arrow-right { transform: translate(-50%, -50%); } /* ============================================ Press list (inside the Press modal) ============================================ */ .bw-press-list { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } /* Contact form — lives inside the standard .bw-modal-card (white modal) */ .bw-contact-form { display: flex; flex-direction: column; gap: 10px; } .bw-contact-form input:not([type="checkbox"]):not([type="radio"]), .bw-contact-form select, .bw-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 10px; background: #fafafa; font: inherit; font-size: 14px; color: #111; outline: none; transition: border-color 160ms ease, background 160ms ease; } .bw-contact-form input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0 0; accent-color: #111; cursor: pointer; } .bw-contact-form input:focus, .bw-contact-form select:focus, .bw-contact-form textarea:focus { border-color: rgba(0, 0, 0, 0.4); background: #fff; } .bw-contact-form textarea { resize: vertical; min-height: 110px; font-family: inherit; } .bw-contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .bw-contact-form .bw-contact-submit { margin-top: 4px; padding: 13px 20px; background: #111; color: #fff; border: none; border-radius: 999px; font-family: inherit; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 160ms ease; } .bw-contact-form .bw-contact-submit:hover { background: #2a2a2a; } .bw-contact-form .bw-contact-status { font-size: 12px; color: #2a8c4a; margin-top: 4px; min-height: 16px; letter-spacing: 0.04em; } .bw-press-item { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; transition: background 160ms ease; } .bw-press-item:hover { background: rgba(0,0,0,0.03); } .bw-press-item .outlet { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #888; margin-bottom: 4px; } .bw-press-item .title { font-size: 14px; color: #111; } /* ============================================ Podcast grid (inside the Podcasts modal) ============================================ */ .bw-modal-wide { max-width: 800px; } /* ============================================ Press gallery — large white modal with grid + lightbox ============================================ */ .bw-modal-fullscreen .bw-modal-card { max-width: 1280px; width: 92vw; max-height: 90vh; padding: 36px 36px 32px 36px; overflow-y: auto; } @media (max-width: 720px) { .bw-modal-fullscreen .bw-modal-card { padding: 22px 16px; } } .bw-press-gallery { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } @media (max-width: 720px) { .bw-press-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .bw-press-thumb { display: block; position: relative; cursor: zoom-in; border-radius: 10px; overflow: hidden; background: #f4f4f4; aspect-ratio: 4 / 3; transition: transform 220ms ease, box-shadow 220ms ease; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: none; padding: 0; } .bw-press-thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.18); } .bw-press-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Lightbox — dark overlay above the modal */ .bw-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; padding: 40px; } .bw-lightbox.is-open { display: flex; } .bw-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 60px rgba(0,0,0,0.6); } .bw-lightbox-close, .bw-lightbox-prev, .bw-lightbox-next { position: fixed; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--bw-font); transition: background 160ms ease; backdrop-filter: blur(6px); } .bw-lightbox-close { top: 24px; right: 24px; } .bw-lightbox-prev { top: 50%; left: 24px; transform: translateY(-50%); } .bw-lightbox-next { top: 50%; right: 24px; transform: translateY(-50%); } .bw-lightbox-close:hover, .bw-lightbox-prev:hover, .bw-lightbox-next:hover { background: rgba(255,255,255,0.22); } .bw-lightbox-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--bw-font); } /* ============================================ PDF viewer modal — keeps visitors on Beausworld ============================================ */ .bw-pdf-modal { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.92); display: none; flex-direction: column; padding: 0; } .bw-pdf-modal.is-open { display: flex; } .bw-pdf-modal .bw-pdf-bar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: #fff; color: #111; border-bottom: 1px solid rgba(0,0,0,0.08); } .bw-pdf-modal .bw-pdf-title { font-family: var(--bw-font); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #111; font-weight: 500; } .bw-pdf-modal .bw-pdf-actions { display: flex; gap: 10px; align-items: center; } .bw-pdf-modal .bw-pdf-actions a, .bw-pdf-modal .bw-pdf-actions button { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.15); background: #fff; color: #111; font-family: var(--bw-font); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background 160ms ease, color 160ms ease; } .bw-pdf-modal .bw-pdf-actions a:hover, .bw-pdf-modal .bw-pdf-actions button:hover { background: #111; color: #fff; } .bw-pdf-modal .bw-pdf-stage { flex: 1 1 auto; position: relative; background: #1a1a1a; overflow: hidden; } .bw-pdf-modal .bw-pdf-frame { width: 100%; height: 100%; border: none; background: #1a1a1a; transition: opacity 200ms ease; } .bw-pdf-modal .bw-pdf-spinner { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255,255,255,0.18); border-top-color: #fff; border-radius: 50%; animation: bwSpin 0.9s linear infinite; z-index: 2; pointer-events: none; } @keyframes bwSpin { to { transform: rotate(360deg); } } @media (max-width: 720px) { .bw-pdf-modal .bw-pdf-title { font-size: 11px; letter-spacing: 0.14em; } .bw-pdf-modal .bw-pdf-bar { padding: 0 12px; } .bw-pdf-modal .bw-pdf-actions a, .bw-pdf-modal .bw-pdf-actions button { padding: 6px 12px; font-size: 10px; } } .bw-podcast-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .bw-podcast-card { display: flex; flex-direction: column; gap: 10px; color: #111; text-decoration: none; transition: transform 200ms ease; } .bw-podcast-card:hover { transform: translateY(-2px); } .bw-podcast-img { width: 100%; aspect-ratio: 16 / 9; /* HORIZONTAL banner — matches modern podcast art */ background-color: #f3efe6; background-size: contain; /* Always show the full image — letterbox if needed */ background-position: center; background-repeat: no-repeat; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); transition: transform 220ms ease, box-shadow 220ms ease; } .bw-podcast-card:hover .bw-podcast-img { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.18); } .bw-podcast-title { font-size: 13px; line-height: 1.35; letter-spacing: 0.02em; } .bw-podcast-host { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.08em; opacity: 0.6; font-weight: 400; } /* ============================================ Email subscribe form (inside Journal modal) ============================================ */ .bw-subscribe-form { display: flex; gap: 8px; margin-top: 18px; } .bw-subscribe-form input[type="email"] { flex: 1 1 auto; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.15); border-radius: 999px; background: #fafafa; color: #111; font-family: var(--bw-font); font-size: 14px; outline: none; transition: border-color 160ms ease, background 160ms ease; } .bw-subscribe-form input[type="email"]:focus { border-color: #111; background: #fff; } .bw-subscribe-form button[type="submit"] { padding: 12px 22px; border: none; border-radius: 999px; background: #111; color: #fff; font-family: var(--bw-font); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .bw-subscribe-form button[type="submit"]:hover { background: #000; transform: translateY(-1px); } .bw-fine-print { margin-top: 14px !important; font-size: 11px !important; letter-spacing: 0.04em; opacity: 0.55; line-height: 1.4 !important; } /* ============================================ bw-explore — top-left "Explore" dropdown Drakerelated.com pattern: small "Explore" label at top-left; click opens a column of room names below it. ============================================ */ .bw-explore { position: relative; pointer-events: auto; } .bw-explore-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; color: #fff; font-family: var(--bw-font); font-size: 13px; font-weight: 500; letter-spacing: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); cursor: pointer; transition: opacity 160ms ease; } .bw-explore-trigger:hover { opacity: 0.75; } .bw-explore-trigger .chev { display: inline-block; font-size: 10px; transition: transform 160ms ease; } .bw-explore.is-open .bw-explore-trigger .chev { transform: rotate(180deg); } .bw-explore-menu { position: absolute; top: calc(100% + 14px); left: 0; display: flex; flex-direction: column; gap: 8px; min-width: 240px; padding: 0; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease; } .bw-explore.is-open .bw-explore-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .bw-explore-menu a { display: block; color: #fff; font-family: var(--bw-font); font-size: 24px; font-weight: 600; letter-spacing: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65); text-decoration: none; padding: 1px 0; transition: opacity 160ms ease; } .bw-explore-menu a.is-current { opacity: 0.45; } .bw-explore-menu a:hover { opacity: 0.7; } /* Mobile */ @media (max-width: 720px) { .bw-explore-menu a { font-size: 19px; } } /* Hide lightbox shell until opened — kills leaking 'Loading…'/about:blank placeholder */ .bw-press-lightbox:not(.is-open),.bw-lightbox:not(.is-open){display:none!important}