/* base.css — design tokens + resets shared by public.css and editor.css */ :root { --bg-primary: #050505; --bg-secondary: #0a0a0a; --bg-tertiary: #111111; --bg-quaternary: #171717; --glass: rgba(255, 255, 255, 0.05); --glass-hover: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.10); --border-hover: rgba(255, 255, 255, 0.20); --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-muted: #737373; --button-bg: #f5f5f5; --button-text: #0a0a0a; /* A soft, fairly even blur that wraps around the whole rounded card like a halo, rather than reading as a hard rectangular bar underneath it. Used to be kept tighter because peeking neighbor cards in the old carousel would otherwise have their shadows visually merge into one solid strip — but every carousel now shows one full-size card per screen at a time, so that's no longer a concern. */ --card-shadow: 0 6px 28px rgba(0, 0, 0, 0.35); --radius-button: 18px; --radius-card: 22px; --radius-input: 12px; --radius-small: 12px; --font-family-normal: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-hand: "Shantell Sans", "Chalkboard SE", "Marker Felt", "Comic Sans MS", cursive; /* Global default stays normal — this file is shared by the public profile template too, so it must not change what visitors see. */ --font-family: var(--font-family-normal); --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 180ms; } /* The handwritten/normal toggle only applies to pages that explicitly opt in (editor + login) via font-toggle.js, which adds this class to . Nothing else — including the public profile page — loads that script, so this block never touches a visitor-facing page. */ html.font-app-shell { --font-family: var(--font-family-hand); } html.font-app-shell.font-normal { --font-family: var(--font-family-normal); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* Fallback for browsers that don't honor overscroll-behavior below — without this, defaults to a white background, which mobile browsers paint in the overscroll/rubber-band gutter beyond the top or bottom of the page. */ background: var(--bg-primary); /* The real fix: this stops the rubber-band bounce itself, so there's no gutter to paint in the first place. A flat fallback color (above) can never truly match a *gradient* background like the aurora theme (and it's a different mismatch for every creator's custom aurora palette), so removing the bounce is more robust than chasing a color match. */ overscroll-behavior-y: none; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-family); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } ::selection { background: rgba(255, 255, 255, 0.18); } /* Ambient background used on both public + editor surfaces */ .ambient-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 35%), var(--bg-primary); } /* Reusable glass surface */ .glass { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .glass:hover { background: var(--glass-hover); border-color: var(--border-hover); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; border-radius: 8px; } /* Toast */ .toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; } .toast { pointer-events: auto; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 500; color: var(--text-primary); background: rgba(23, 23, 23, 0.9); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); animation: toast-in 200ms var(--ease); } .toast.toast-leaving { animation: toast-out 180ms var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* Generic modal / bottom sheet */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; z-index: 900; animation: overlay-in 180ms var(--ease); } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .modal-sheet { width: 100%; max-width: 480px; background: rgba(17, 17, 17, 0.95); border: 1px solid var(--border); border-bottom: none; border-radius: 24px 24px 0 0; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: sheet-in 220ms var(--ease); } @media (min-width: 640px) { .modal-overlay { align-items: center; } .modal-sheet { border-radius: 24px; border-bottom: 1px solid var(--border); } } @keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .modal-title { font-size: 17px; font-weight: 600; margin: 4px 0 16px; } .modal-actions { display: flex; gap: 10px; margin-top: 18px; } .skeleton { background: linear-gradient(90deg, var(--glass) 25%, var(--glass-hover) 37%, var(--glass) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-input); } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }