:root { --font-sans: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", monospace; } /* ---- Theme tokens. Ported 1:1 from tailwind.config.ts. The theme class on selects which set is active. ---- */ .light { --bg: rgb(255, 255, 255); --fg: rgb(26, 26, 26); --secondary: rgb(100, 116, 139); --primary: rgb(37, 99, 235); --accent: rgb(245, 158, 11); } .dark { --bg: rgb(26, 26, 26); --fg: rgb(255, 255, 255); --secondary: rgb(148, 163, 184); --primary: rgb(59, 130, 246); --accent: rgb(251, 191, 36); } .sepia { --bg: rgb(244, 236, 216); --fg: rgb(67, 52, 34); --secondary: rgb(66, 61, 58); --primary: rgb(133, 77, 14); --accent: rgb(180, 83, 9); } .sorbet { --bg: rgb(252, 198, 255); --fg: rgb(61, 54, 47); --secondary: rgb(255, 130, 123); --primary: rgb(255, 199, 133); --accent: rgb(255, 58, 74); } .ocean { --bg: rgb(240, 249, 255); --fg: rgb(12, 74, 110); --secondary: rgb(8, 145, 178); --primary: rgb(2, 132, 199); --accent: rgb(99, 102, 241); } html { background-color: var(--bg); color: var(--fg); font-family: var(--font-sans); transition: background-color 0.3s ease, color 0.3s ease; } body { margin: 0; } /* ---- Layout ---- */ .shell { min-height: 100vh; padding: 2rem; box-sizing: border-box; } .content { max-width: 42rem; /* max-w-2xl */ margin: 0 auto; } .content > * + * { margin-top: 4rem; /* space-y-16 */ } main { display: block; } /* ---- Typography ---- */ h1 { font-size: 2.25rem; /* text-4xl */ font-weight: 700; margin: 0 0 1rem; } h2 { font-size: 1.5rem; /* text-2xl */ font-weight: 600; margin: 0 0 1rem; } p { margin: 0; } a { color: var(--fg); } .muted { color: var(--secondary); } .mono { font-family: var(--font-mono); } .tagline { font-size: 1.125rem; /* text-lg */ } .prose { color: var(--fg); line-height: 1.625; } /* ---- Links list (home) ---- */ .links { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; /* text-sm */ } .links li { margin-top: 0.5rem; } .links li:first-child { margin-top: 0; } .links a:hover { text-decoration: underline; } .link-row { display: flex; align-items: center; gap: 0.5rem; } /* ---- Timestamps page ---- */ .back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--secondary); text-decoration: none; transition: color 0.15s; } /* Extra breathing room between the page header and the controls on the timestamps page. */ .page-header { margin-bottom: 3rem; } .back-link:hover { color: var(--primary); } .convert-grid { display: flex; gap: 3rem; flex-wrap: wrap; margin-bottom: 1.5rem; } fieldset { border: none; padding: 0; margin: 0; } legend { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; padding: 0; } fieldset label { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } fieldset input[type="radio"] { accent-color: var(--primary); } .field { margin-top: 1.5rem; } .field-label { display: block; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; } input[type="text"] { width: 100%; max-width: 36rem; padding: 0.5rem; border: 1px solid var(--secondary); border-radius: 0.25rem; background-color: var(--bg); color: var(--fg); font-family: inherit; font-size: 1rem; } .results { margin-top: 2rem; font-size: 0.875rem; line-height: 1.625; } .results p { margin-top: 0.5rem; } .results p:first-child { margin-top: 0; } /* ---- Theme toggle ---- */ .theme-toggle { position: fixed; right: 2rem; bottom: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border: none; border-radius: 9999px; background-color: color-mix(in srgb, var(--secondary) 15%, transparent); color: var(--fg); cursor: pointer; transition: background-color 0.2s; } .theme-toggle:hover { background-color: color-mix(in srgb, var(--secondary) 25%, transparent); } .icon { width: 1.25rem; height: 1.25rem; display: block; } /* ---- Entrance animation (fadeIn from globals.css) ---- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease-in; } .delay-1 { animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; } .delay-3 { animation-delay: 0.3s; opacity: 0; animation-fill-mode: forwards; } .delay-4 { animation-delay: 0.4s; opacity: 0; animation-fill-mode: forwards; } /* ---- Image tracking page ---- */ .notice { background-color: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; font-size: 0.875rem; } .notice p { color: var(--accent); line-height: 1.5; } .mode-tabs { display: flex; gap: 0.5rem; } .mode-tabs button { flex: 1; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; background-color: color-mix(in srgb, var(--secondary) 20%, transparent); color: var(--fg); transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; } .mode-tabs button:hover { background-color: color-mix(in srgb, var(--secondary) 30%, transparent); } .mode-tabs button.active { background-color: var(--primary); color: var(--bg); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .error-banner { background-color: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 30%, transparent); border-radius: 0.5rem; padding: 1rem; margin-top: 1.5rem; animation: fadeIn 0.3s ease-in; } .error-banner p { color: rgb(248, 113, 113); font-size: 0.875rem; font-weight: 500; } .image-tracking-main > section { margin-top: 1.5rem; } /* Carousel (port of ImageCarousel.tsx) */ .carousel-wrap { position: relative; width: 100%; } .carousel-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 10; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border: none; border-radius: 9999px; background-color: color-mix(in srgb, var(--secondary) 50%, transparent); color: var(--fg); cursor: pointer; transition: background-color 0.15s; } .carousel-arrow:hover { background-color: color-mix(in srgb, var(--secondary) 70%, transparent); } .carousel-arrow.left { left: 0.5rem; } .carousel-arrow.right { right: 0.5rem; } .carousel-strip { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .carousel-strip::-webkit-scrollbar { display: none; } .carousel-track { display: flex; } .carousel-item { width: 100%; flex-shrink: 0; scroll-snap-align: center; } .carousel-frame { position: relative; aspect-ratio: 16 / 9; margin: 0 1rem; border-radius: 0.5rem; overflow: hidden; cursor: pointer; } .carousel-frame.selected { outline: 4px solid var(--primary); } .carousel-frame img { width: 100%; height: 100%; object-fit: contain; } .carousel-open { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 9999px; background-color: color-mix(in srgb, var(--secondary) 50%, transparent); color: var(--fg); transition: background-color 0.15s; } .carousel-open:hover { background-color: color-mix(in srgb, var(--secondary) 70%, transparent); } .icon-md { width: 1.25rem; height: 1.25rem; display: block; } .icon-lg { width: 1.5rem; height: 1.5rem; display: block; } /* Custom upload */ input[type="file"] { display: block; width: 100%; font-size: 0.875rem; color: var(--secondary); } input[type="file"]::file-selector-button { margin-right: 1rem; padding: 0.5rem 1rem; border: none; border-radius: 9999px; font-family: inherit; font-size: 0.875rem; font-weight: 600; background-color: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); cursor: pointer; transition: background-color 0.15s; } input[type="file"]::file-selector-button:hover { background-color: color-mix(in srgb, var(--primary) 20%, transparent); } .upload-preview { margin-top: 1rem; } .upload-preview img { max-width: 100%; max-height: 300px; height: auto; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--secondary) 20%, transparent); } /* The WebXR canvas: fixed full-viewport, behind the page content and never intercepting clicks. */ .ar-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }