/* ============================================================= LUXURY REAL ESTATE — Minimal • Elegant • Readable ------------------------------------------------------------- 3 themes : (default) Accent color configurable via --accent (HEX or any CSS color). ============================================================= */ :root { /* ---- Accent color (change me) ---- */ --accent: #29cf45; /* champagne gold — swap for any hex */ --accent-soft: rgba(27, 122, 35, 0.14); --accent-hover: #1a8d16; /* ---- Typography ---- */ --font-sans: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif; --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --tracking-wide: 0.18em; --tracking-tight: 0.02em; /* ---- Radii / shadow ---- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.25); --shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.35); /* ---- Canvas opacity kept from original ---- */ --canvas-opacity: 1; } /* ---------- DARK (default) ---------- */ :root, :root[data-theme="dark"] { --bg: #0E0E0F; --surface: rgba(22, 22, 24, 0.72); --surface-solid: #161618; --surface-raised: rgba(36, 36, 40, 0.85); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #F5F2EC; --text-muted: rgba(245, 242, 236, 0.62); --text-faint: rgba(245, 242, 236, 0.38); --overlay: rgba(0, 0, 0, 0.55); --track: rgba(255, 255, 255, 0.30); --thumb: #ffffff; --btn-bg: rgba(255, 255, 255, 0.04); --btn-bg-hover: rgba(255, 255, 255, 0.08); --icon: rgba(245, 242, 236, 0.78); --icon-hover: #ffffff; --stroke-outline: rgba(0, 0, 0, 0.5); } /* ---------- LIGHT / BRIGHT ---------- */ :root[data-theme="light"] { --bg: #F7F5F1; /* warm ivory */ --surface: rgba(255, 255, 255, 0.78); --surface-solid: #FFFFFF; --surface-raised: rgba(255, 255, 255, 0.92); --border: rgba(25, 22, 18, 0.10); --border-strong: rgba(25, 22, 18, 0.22); --text: #1A1713; --text-muted: rgba(26, 23, 19, 0.60); --text-faint: rgba(26, 23, 19, 0.38); --overlay: rgba(247, 245, 241, 0.75); --track: rgba(26, 23, 19, 0.30); --thumb: #1A1713; --btn-bg: rgba(26, 23, 19, 0.04); --btn-bg-hover: rgba(26, 23, 19, 0.09); --icon: rgba(26, 23, 19, 0.72); --icon-hover: #1A1713; --stroke-outline: rgba(255, 255, 255, 0.6); } /* ---------- ACCENT (accent color dominates UI) ---------- */ :root[data-theme="accent"] { --bg: #0E0E0F; --surface: color-mix(in srgb, var(--accent) 14%, rgba(14, 14, 15, 0.78)); --surface-solid: color-mix(in srgb, var(--accent) 10%, #161618); --surface-raised: color-mix(in srgb, var(--accent) 18%, rgba(36, 36, 40, 0.9)); --border: color-mix(in srgb, var(--accent) 30%, transparent); --border-strong: color-mix(in srgb, var(--accent) 55%, transparent); --text: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.72); --text-faint: rgba(255, 255, 255, 0.48); --overlay: color-mix(in srgb, var(--accent) 20%, rgba(0, 0, 0, 0.6)); --track: rgba(255, 255, 255, 0.32); --thumb: var(--accent); --btn-bg: color-mix(in srgb, var(--accent) 8%, transparent); --btn-bg-hover: color-mix(in srgb, var(--accent) 18%, transparent); --icon: rgba(255, 255, 255, 0.85); --icon-hover: var(--accent); --stroke-outline: rgba(0, 0, 0, 0.5); } /* ============================================================= RESET ============================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; /*touch-action: none;*/ } body { overflow: hidden; font-family: var(--font-sans); color: var(--text); background-color: var(--bg); -moz-user-select: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { opacity: var(--canvas-opacity); position: fixed; top: 0; left: 0; width: 100%; height: 100%; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; } .hidden { display: none !important; } .spacer { flex-grow: 1; } #ui { position: fixed; inset: 0; pointer-events: none; } #ui * { pointer-events: auto; } /* ============================================================= WALK HINT — "discover" pill ============================================================= */ .walkHint { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background-color: var(--surface); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); color: var(--text); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 12px 24px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-soft); transition: background-color 250ms ease, border-color 250ms ease; } .walkHint:hover { background-color: var(--surface-raised); border-color: var(--border-strong); } /* ============================================================= BRANDING ============================================================= */ #supersplatBranding { display: none !important; position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--text); } #supersplatBranding > svg { height: 16px; width: auto; flex-shrink: 0; padding: 8px; border-radius: var(--r-md); background-color: var(--surface); border: 1px solid var(--border); } #supersplatBranding > svg > g.stroke { fill: var(--stroke-outline); stroke: var(--stroke-outline); stroke-width: 2; stroke-linejoin: round; opacity: 0.4; } #supersplatBranding > svg > g.fill { fill: currentColor; stroke: none; } #supersplatBranding > span { font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-tight); } /* ============================================================= POSTER ============================================================= */ #poster { display: none; position: absolute; inset: 0; background-image: var(--poster-url); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ============================================================= LOADING — thin centered bar with serif percentage ============================================================= */ #loadingWrap { position: fixed; bottom: 18vh; left: 50%; transform: translate(-50%, 0); width: min(320px, 100vw - 48px); display: flex; flex-direction: column; align-items: center; gap: 18px; } #loadingWrap > #loadingText { font-family: var(--font-serif); font-weight: 300; font-size: 28px; letter-spacing: 0.04em; color: var(--text); text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); font-variant-numeric: tabular-nums; } #loadingWrap > #loadingBar { width: 100%; height: 1px; background-color: var(--track); background-image: linear-gradient( 90deg, var(--accent) 0%, var(--accent) 0%, transparent 0%, transparent 100% ); background-repeat: no-repeat; transition: background-image 200ms ease-out; } /* ============================================================= CONTROLS — bottom thin bar ============================================================= */ #controlsWrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 32px); } #controlsWrap.faded-in { visibility: visible; opacity: 1; transition: opacity 0.5s ease-out; } #controlsWrap.faded-out { visibility: hidden; opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s ease-out; } /* ---- Timeline ---- */ #controlsWrap > #timelineContainer { position: relative; width: min(520px, 80vw); height: 24px; cursor: pointer; } #controlsWrap > #timelineContainer > #line { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 1px; background-color: var(--track); border: none; } #controlsWrap > #timelineContainer > #handle { position: absolute; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border: none; border-radius: 50%; background-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transition: box-shadow 200ms ease; } #controlsWrap > #timelineContainer:hover > #handle { box-shadow: 0 0 0 6px var(--accent-soft); } #controlsWrap > #timelineContainer > #time { position: absolute; top: -4px; padding: 4px 8px; transform: translate(-50%, -100%); font-size: 10px; font-weight: 500; letter-spacing: var(--tracking-tight); border-radius: var(--r-sm); color: var(--text); background-color: var(--surface-raised); border: 1px solid var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-variant-numeric: tabular-nums; } /* ---- Button rows ---- */ #controlsWrap > #buttonsContainer { display: flex; gap: 8px; padding: 6px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); box-shadow: var(--shadow-soft); } #controlsWrap > #buttonsContainer .buttonGroup { display: flex; gap: 2px; background-color: transparent; border-radius: 999px; } #controlsWrap > #buttonsContainer .buttonGroup:not(:has(> :not(.hidden))) { display: none; } #controlsWrap > #buttonsContainer .spacer { width: 1px; background-color: var(--border); margin: 4px 4px; flex-grow: 0; } /* ---- Control buttons ---- */ #controlsWrap > #buttonsContainer .controlButton { width: 38px; height: 38px; padding: 0; margin: 0; border: 0; cursor: pointer; color: var(--icon); background-color: transparent; border-radius: 999px; transition: background-color 200ms ease, color 200ms ease; } #controlsWrap > #buttonsContainer .controlButton:hover { color: var(--icon-hover); background-color: var(--btn-bg-hover); } #controlsWrap > #buttonsContainer .controlButton > svg { display: block; margin: auto; } #controlsWrap > #buttonsContainer .controlButton > svg > g.stroke { fill: none; stroke: var(--stroke-outline); stroke-width: 2; stroke-linejoin: round; opacity: 0.35; } #controlsWrap > #buttonsContainer .controlButton > svg > g.fill { fill: currentColor; stroke: none; } /* ---- Simple toggle active (voxels, etc.) ---- */ #controlsWrap > #buttonsContainer .controlButton.active:not(.toggle) { color: var(--accent); background-color: var(--accent-soft); } /* ---- Camera mode segmented toggle ---- */ #controlsWrap > #buttonsContainer .controlButton.toggle { background: transparent; border-radius: 999px; position: relative; transition: color 200ms ease, background-color 200ms ease; } #controlsWrap > #buttonsContainer .controlButton.toggle.active { background-color: var(--accent); color: #ffffff; } :root[data-theme="light"] #controlsWrap > #buttonsContainer .controlButton.toggle.active { color: #ffffff; } #controlsWrap > #buttonsContainer .controlButton.toggle.left, #controlsWrap > #buttonsContainer .controlButton.toggle.middle, #controlsWrap > #buttonsContainer .controlButton.toggle.right { border-radius: 999px; } /* ============================================================= SETTINGS PANEL ============================================================= */ #settingsPanel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 60px); min-width: 260px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 13px; color: var(--text); background-color: var(--surface); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); box-shadow: var(--shadow-panel); } #settingsPanel > .settingsRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 4px 0; } #settingsPanel > .settingsRow > button { flex-grow: 1; height: 38px; padding: 0 18px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer; color: var(--text-muted); background-color: var(--btn-bg); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } #settingsPanel > .settingsRow > button:hover { color: var(--text); background-color: var(--btn-bg-hover); border-color: var(--border-strong); } #settingsPanel > .settingsRow > div { height: 38px; display: flex; align-items: center; padding: 0 4px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 400; transition: color 200ms ease; } #settingsPanel > .settingsRow > div:not(.toggleSwitch):hover { color: var(--text); } /* ---- Toggle switch ---- */ #settingsPanel > .settingsRow > div.toggleSwitch { padding: 0; flex-shrink: 0; } #settingsPanel > .settingsRow > div.toggleSwitch .toggleTrack { width: 34px; height: 20px; border-radius: 999px; background-color: var(--track); position: relative; transition: background-color 250ms ease; } #settingsPanel > .settingsRow > div.toggleSwitch .toggleTrack .toggleThumb { width: 14px; height: 14px; border-radius: 50%; background-color: var(--thumb); position: absolute; top: 3px; left: 3px; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } #settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack { background-color: var(--accent); } #settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack .toggleThumb { transform: translateX(14px); background-color: #ffffff; } #settingsPanel > .divider { width: 100%; height: 1px; margin: 10px 0; background-color: var(--border); } /* ============================================================= INFO PANEL — modal overlay ============================================================= */ #infoPanel { position: fixed; inset: 0; background-color: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #infoPanel > #infoPanelContent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 380px; max-width: min(520px, 90vw); max-height: 90vh; padding: 8px; border-radius: var(--r-xl); border: 1px solid var(--border); display: flex; flex-direction: column; color: var(--text); background-color: var(--surface-raised); backdrop-filter: blur(32px) saturate(120%); -webkit-backdrop-filter: blur(32px) saturate(120%); box-shadow: var(--shadow-panel); } /* Header — same luxury tone as the tutorial */ #infoHeader { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); text-align: center; } #infoEyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } #infoHeading { font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: 0.02em; color: var(--text); margin: 0 0 8px; line-height: 1.15; } #infoLead { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 400px; margin-left: auto; margin-right: auto; } #infoPanel > #infoPanelContent > #tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-lg); background-color: var(--btn-bg); border: 1px solid var(--border); margin: 14px 8px 0; } #infoPanel > #infoPanelContent > #tabs > .tab { padding: 10px 16px; border-radius: var(--r-md); cursor: pointer; flex-grow: 1; text-align: center; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); transition: background-color 250ms ease, color 250ms ease; } #infoPanel > #infoPanelContent > #tabs > .tab:hover { color: var(--text); } #infoPanel > #infoPanelContent > #tabs > .tab.active { color: var(--text); background-color: var(--surface-solid); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* Scrollable body — matches #tutorialBody */ #infoPanel > #infoPanelContent > #infoPanels { padding: 8px 24px 16px; overflow-y: auto; flex: 1; min-height: 0; } #infoPanel > #infoPanelContent > #infoPanels h1 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 12px 0 10px 0; color: var(--accent); margin: 0; } #infoPanel > #infoPanelContent > #infoPanels .control-item { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } #infoPanel > #infoPanelContent > #infoPanels .control-item:last-child { border-bottom: none; } #infoPanel > #infoPanelContent > #infoPanels .control-item > .control-action { text-align: left; color: var(--text); font-weight: 400; } #infoPanel > #infoPanelContent > #infoPanels .control-item > .control-key { text-align: right; color: var(--text-muted); font-size: 11px; font-family: "SF Mono", "Monaco", "Consolas", monospace; letter-spacing: var(--tracking-tight); padding: 3px 8px; background-color: var(--btn-bg); border: 1px solid var(--border); border-radius: var(--r-sm); } #infoPanel > #infoPanelContent > #infoPanels .control-spacer { margin: 8px 0; } /* ============================================================= JOYSTICK (touch) ============================================================= */ #joystickBase { position: absolute; width: 56px; height: 100px; transform: translate(-50%, -50%); border-radius: 28px; touch-action: none; background-color: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease; box-shadow: var(--shadow-soft); } #joystickBase > #joystick { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; touch-action: none; background-color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: left 0.1s ease; } #joystickBase.mode-2d { width: 100px; height: 100px; border-radius: 50%; } #joystickBase.mode-2d > #joystick { left: 50%; top: 50%; transform: translate(-50%, -50%); } /* ============================================================= TOOLTIP ============================================================= */ #tooltip { display: none; position: absolute; border-radius: var(--r-sm); padding: 6px 10px; font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-tight); color: var(--text); background-color: var(--surface-raised); border: 1px solid var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); } /* ============================================================= ANNOTATIONS ============================================================= */ #annotations { position: fixed; inset: 0; pointer-events: none; z-index: -1; } #annotations * { pointer-events: auto; } #annotationNav { pointer-events: none; } #annotationNav.faded-in { visibility: visible; opacity: 1; transition: opacity 0.5s ease-out; } #annotationNav.faded-out { visibility: hidden; opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s ease-out; } #annotationNav > button { pointer-events: auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--icon); background-color: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: color 200ms ease, background-color 200ms ease; } #annotationNav > button:hover { color: var(--icon-hover); background-color: var(--surface-raised); } #annotationNav > button > svg { display: block; } #annotationNav > button > svg > g.stroke { fill: none; stroke: var(--stroke-outline); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; } #annotationNav > button > svg > g.fill { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Desktop annotation nav */ #annotationNav.desktop { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; padding: 4px; border-radius: 999px; overflow: hidden; background-color: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); box-shadow: var(--shadow-soft); } #annotationNav.desktop > button { width: 34px; height: 34px; background-color: transparent; border: none; border-radius: 999px; } #annotationNav.desktop > button:hover { background-color: var(--btn-bg-hover); } #annotationNav.desktop > #annotationInfo { pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 0 20px; white-space: nowrap; width: 260px; } #annotationNav.desktop > #annotationInfo > #annotationNavTitle { font-family: var(--font-serif); font-weight: 400; font-size: 15px; letter-spacing: 0.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; } /* Touch annotation nav */ #annotationNav.touch { position: fixed; inset: 0; } #annotationNav.touch > #annotationInfo { display: none; } #annotationNav.touch > button { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 72px; background-color: var(--surface); border: 1px solid var(--border); } #annotationNav.touch > button:active { background-color: var(--surface-raised); } #annotationNav.touch > #annotationPrev { left: max(0px, env(safe-area-inset-left)); border-radius: 0 var(--r-md) var(--r-md) 0; border-left: none; } #annotationNav.touch > #annotationNext { right: max(0px, env(safe-area-inset-right)); border-radius: var(--r-md) 0 0 var(--r-md); border-right: none; } /* ============================================================= RESPONSIVE TWEAKS ============================================================= */ @media (max-width: 640px) { #settingsPanel { right: 12px; left: 12px; min-width: 0; } #infoPanel > #infoPanelContent { min-width: 0; width: calc(100vw - 24px); max-height: 92vh; } #infoHeading { font-size: 22px; } #infoLead { font-size: 12px; } #infoPanel > #infoPanelContent > #infoPanels { padding: 8px 18px 14px; } #controlsWrap > #buttonsContainer { padding: 4px; } #controlsWrap > #buttonsContainer .controlButton { width: 36px; height: 36px; } } /* ============================================================= SPLASH LOADING SCREEN — SVG monogram, self-drawing ============================================================= */ #splashScreen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 0%, var(--bg) 60%), var(--bg); overflow: hidden; transition: opacity 0.8s ease-out; } #splashScreen::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%); filter: blur(60px); animation: splash-drift 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes splash-drift { from { transform: translate(-2%, -1%); } to { transform: translate( 2%, 1%); } } #splashScreen.splash-done { opacity: 0; pointer-events: none; } #splashInner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 32px; max-width: 440px; width: 100%; text-align: center; animation: splash-fade-in 0.8s ease-out both; } @keyframes splash-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Monogram SVG ---- */ #splashMonogram { width: 140px; height: 140px; color: var(--accent); filter: drop-shadow(0 6px 28px color-mix(in srgb, var(--accent) 35%, transparent)); } #splashMonogram svg { width: 100%; height: 100%; overflow: visible; } /* Frame: 4 segments drawing themselves in sequence */ #splashMonogram .splash-line { stroke-dasharray: 120; stroke-dashoffset: 120; animation: splash-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; } #splashMonogram .splash-line-top { animation-delay: 0.15s; } #splashMonogram .splash-line-right { animation-delay: 0.55s; } #splashMonogram .splash-line-bottom { animation-delay: 0.95s; } #splashMonogram .splash-line-left { animation-delay: 1.35s; } #splashMonogram .splash-corners path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: splash-draw-short 0.6s ease forwards; animation-delay: 2.0s; } /* House monogram: draws after the frame, then gently pulses */ #splashMonogram .splash-house-path { stroke-dasharray: 290; stroke-dashoffset: 290; animation: splash-draw-v 2.0s cubic-bezier(0.65, 0, 0.35, 1) 2.2s forwards, splash-glow 3.2s ease-in-out 4.4s infinite; } #splashMonogram .splash-house-door { stroke-dasharray: 60; stroke-dashoffset: 60; animation: splash-draw-v 0.9s cubic-bezier(0.65, 0, 0.35, 1) 3.8s forwards; } #splashMonogram .splash-hairline { stroke-dasharray: 80; stroke-dashoffset: 80; animation: splash-draw-hair 1.2s ease 3.4s forwards; } /* Traveling dot is declarative via ; fade it in */ #splashMonogram .splash-dot { opacity: 0; animation: splash-dot-in 0.6s ease 2.0s forwards; } @keyframes splash-draw { to { stroke-dashoffset: 0; } } @keyframes splash-draw-short { to { stroke-dashoffset: 0; } } @keyframes splash-draw-v { to { stroke-dashoffset: 0; } } @keyframes splash-draw-hair { to { stroke-dashoffset: 0; } } @keyframes splash-dot-in { to { opacity: 1; } } @keyframes splash-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); } } /* ---- Brand ---- */ #splashBrand { display: flex; flex-direction: column; gap: 8px; animation: splash-brand-in 0.8s ease 2.4s both; } @keyframes splash-brand-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #splashTitle { font-family: var(--font-sans); font-weight: 300; font-size: clamp(32px, 6vw, 46px); letter-spacing: 0.10em; color: var(--text); line-height: 1; } #splashSubtitle { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } /* ---- Progress ---- */ #splashProgress { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 8px; animation: splash-brand-in 0.8s ease 2.7s both; } #splashProgressBar { width: min(300px, 100%); height: 1px; background-color: var(--track); position: relative; overflow: hidden; } #splashProgressFill { height: 100%; width: 0%; background: var(--accent); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } #splashProgressBar::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, white) 50%, transparent); animation: splash-shimmer 2.2s linear infinite; opacity: 0.5; } @keyframes splash-shimmer { from { left: -35%; } to { left: 100%; } } #splashProgressText { font-family: var(--font-serif); font-weight: 300; font-size: 18px; letter-spacing: 0.08em; color: var(--text); font-variant-numeric: tabular-nums; } /* Hide the original in-viewer loading bar while splash is visible */ #splashScreen ~ #ui #loadingWrap { opacity: 0; pointer-events: none; } /* ============================================================= TUTORIAL PANEL — reuses #infoPanel styles for consistency ============================================================= */ #tutorialPanel { position: fixed; inset: 0; z-index: 9000; background-color: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s ease; } #tutorialPanel.visible { opacity: 1; } #tutorialPanel.closing { opacity: 0; } #tutorialPanel.hidden { display: none; } #tutorialPanelContent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.98); min-width: 380px; max-width: min(520px, 90vw); max-height: 90vh; padding: 8px; border-radius: var(--r-xl); border: 1px solid var(--border); display: flex; flex-direction: column; color: var(--text); background-color: var(--surface-raised); backdrop-filter: blur(32px) saturate(120%); -webkit-backdrop-filter: blur(32px) saturate(120%); box-shadow: var(--shadow-panel); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; } #tutorialPanel.visible #tutorialPanelContent { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Header with serif heading, matches the luxury tone */ #tutorialHeader { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); text-align: center; } #tutorialEyebrow { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } #tutorialHeading { font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: 0.02em; color: var(--text); margin: 0 0 8px; line-height: 1.15; } #tutorialLead { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 400px; margin-left: auto; margin-right: auto; } /* Tabs — reuse the look from #infoPanel #tabs */ #tutorialTabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-lg); background-color: var(--btn-bg); border: 1px solid var(--border); margin: 14px 8px 0; } #tutorialTabs > .tab { padding: 10px 16px; border-radius: var(--r-md); cursor: pointer; flex-grow: 1; text-align: center; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); transition: background-color 250ms ease, color 250ms ease; } #tutorialTabs > .tab:hover { color: var(--text); } #tutorialTabs > .tab.active { color: var(--text); background-color: var(--surface-solid); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* Scrollable body — reuses .control-item / .control-action / .control-key styles from #infoPanel so the look is identical */ #tutorialBody { padding: 8px 24px 16px; overflow-y: auto; flex: 1; min-height: 0; } #tutorialBody h1 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 12px 0 10px; color: var(--accent); margin: 0; } #tutorialBody .control-item { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } #tutorialBody .control-item:last-child { border-bottom: none; } #tutorialBody .control-item > .control-action { text-align: left; color: var(--text); font-weight: 400; } #tutorialBody .control-item > .control-key { text-align: right; color: var(--text-muted); font-size: 11px; font-family: "SF Mono", "Monaco", "Consolas", monospace; letter-spacing: var(--tracking-tight); padding: 3px 8px; background-color: var(--btn-bg); border: 1px solid var(--border); border-radius: var(--r-sm); } #tutorialBody .control-spacer { margin: 8px 0; } /* Footer */ #tutorialFooter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 12px; border-top: 1px solid var(--border); } #tutorialDontShow { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); transition: color 0.2s ease; } #tutorialDontShow:hover { color: var(--text-muted); } #tutorialDontShow input { appearance: none; width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 3px; cursor: pointer; position: relative; background: transparent; transition: all 0.2s ease; } #tutorialDontShow input:checked { background: var(--accent); border-color: var(--accent); } #tutorialDontShow input:checked::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } #tutorialStart { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 11px 22px; border-radius: var(--r-md); cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; transition: all 0.2s ease; } #tutorialStart:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); } /* Tutorial responsive */ @media (max-width: 640px) { #tutorialPanelContent { min-width: 0; width: calc(100vw - 24px); max-height: 92vh; } #tutorialHeading { font-size: 22px; } #tutorialLead { font-size: 12px; } #tutorialBody { padding: 8px 18px 14px; } #tutorialFooter { flex-direction: column-reverse; align-items: stretch; } #tutorialStart { width: 100%; } #tutorialDontShow { justify-content: center; } #splashMonogram { width: 110px; height: 110px; } #splashTitle { letter-spacing: 0.08em; } }