/* Shadox — глобальные стили (public). Тема: data-theme на */ :root { color-scheme: light; --font-sans: "DM Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --bg-page: #e8f4fc; --bg-elevated: #ffffff; --bg-muted: #d8eaf8; --text-primary: #0d1b2a; --text-muted: #5a6d7e; --border-subtle: rgba(13, 27, 42, 0.09); --accent: #229ed9; --accent-soft: rgba(34, 158, 217, 0.22); --accent-hot: #34b7f1; --accent-hot-soft: rgba(52, 183, 241, 0.28); --shadow-lg: 0 22px 60px rgba(13, 57, 82, 0.12); --radius-xl: 20px; --radius-full: 9999px; --top-bar-height: 64px; /* Кружок превью: постоянный размер на десктопе; на телефоне — ниже в @media */ --circle-preview-size: 380px; } @media (max-width: 520px) { :root { --circle-preview-size: min( 320px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 1.25rem) ); } .recorder-placeholder__ring { width: 80px; height: 80px; } } @media (max-width: 380px) { :root { --circle-preview-size: min( 288px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 1rem) ); } } [data-theme="dark"] { color-scheme: dark; --bg-page: #0e1621; --bg-elevated: #17212b; --bg-muted: #1f2c39; --text-primary: #e8eef5; --text-muted: #8fa6bc; --border-subtle: rgba(232, 238, 245, 0.09); --accent: #5dc8ff; --accent-soft: rgba(93, 200, 255, 0.14); --accent-hot: #7dd3ff; --accent-hot-soft: rgba(125, 211, 255, 0.12); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.45); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.site-body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; background: radial-gradient(1200px 600px at 10% -10%, var(--accent-soft), transparent), radial-gradient(900px 500px at 100% 0%, var(--accent-hot-soft), transparent), var(--bg-page); color: var(--text-primary); } html:not(.intro-rules-done) body.site-body { overflow: hidden; } .site-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Top bar */ .top-bar { position: sticky; top: 0; z-index: 40; height: var(--top-bar-height); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); } .top-bar__inner { max-width: 1120px; margin: 0 auto; padding: 0 max(1.25rem, env(safe-area-inset-left)) 0 max(1.25rem, env(safe-area-inset-right)); height: 100%; display: flex; align-items: center; gap: 1rem; } .top-bar__brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; font-weight: 700; letter-spacing: -0.02em; } .top-bar__logo { width: 34px; height: 34px; border-radius: var(--radius-full); background: conic-gradient(from 210deg, var(--accent), var(--accent-hot), var(--accent)); box-shadow: 0 0 0 3px var(--border-subtle); } .top-bar__title { font-size: 1.05rem; } .top-bar__nav { flex: 1; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .top-bar__link { padding: 0.45rem 0.85rem; border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .top-bar__link--muted { opacity: 0.45; cursor: not-allowed; } .top-bar__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .theme-toggle { width: 42px; height: 42px; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: var(--bg-muted); cursor: pointer; display: grid; place-items: center; position: relative; transition: transform 0.12s ease, box-shadow 0.15s ease; } .theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .theme-toggle__icon { width: 18px; height: 18px; border-radius: var(--radius-full); position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; } .theme-toggle__icon--sun { background: radial-gradient(circle at 35% 35%, #ffd166 0%, #ff9f1c 55%, transparent 56%); opacity: 1; transform: scale(1); } .theme-toggle__icon--moon { background: radial-gradient(circle at 30% 30%, #cfefff 0%, #229ed9 48%, #0e3650 52%); opacity: 0; transform: scale(0.6); } [data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: scale(0.6); } [data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: scale(1); } @media (max-width: 720px) { .top-bar { height: auto; min-height: var(--top-bar-height); } .top-bar__inner { flex-wrap: wrap; align-items: center; row-gap: 0.45rem; padding-top: max(0.35rem, env(safe-area-inset-top)); padding-bottom: 0.35rem; height: auto; } .top-bar__brand { flex: 1; min-width: 0; } .top-bar__title { font-size: clamp(0.92rem, 3.8vw, 1.05rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-bar__nav { order: 3; flex: 1 1 100%; justify-content: center; gap: 0.35rem; } .top-bar__nav .top-bar__link--muted { display: none; } .top-bar__actions { gap: 0.35rem; } .theme-toggle { flex-shrink: 0; touch-action: manipulation; } } /* Main */ .site-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 2rem max(1.25rem, env(safe-area-inset-left)) 3rem max(1.25rem, env(safe-area-inset-right)); padding-bottom: max(3rem, calc(2rem + env(safe-area-inset-bottom))); display: flex; flex-direction: column; } .site-footer { border-top: 1px solid var(--border-subtle); padding: 1.25rem max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-right)); background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); } .site-footer__inner { max-width: 1120px; margin: 0 auto; text-align: center; } .site-footer__note { margin: 0; font-size: 0.85rem; color: var(--text-muted); } /* Hero / recorder */ .hero { display: grid; gap: 2rem; align-items: start; } .hero--solo { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-width: calc(var(--circle-preview-size) + 4rem); margin-inline: auto; padding-block: min(5vh, 1.75rem); min-height: min(620px, calc(100vh - var(--top-bar-height) - 7rem)); min-height: min(620px, calc(100dvh - var(--top-bar-height) - 7rem)); } /* Intro rules modal (layout) */ .intro-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); } html.intro-rules-done .intro-modal { display: none !important; } .intro-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 38, 58, 0.78); backdrop-filter: blur(10px); } .intro-modal__panel { position: relative; width: 100%; max-width: 540px; max-height: min(90vh, 640px); overflow-y: auto; padding: 1.75rem 1.5rem; text-align: left; } .intro-modal__title { margin: 0 0 1rem; font-size: clamp(1.35rem, 4vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.2; color: var(--text-primary); } .intro-modal__body { margin-bottom: 1.35rem; } .intro-modal__lead { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text-muted); } .intro-modal__lead strong { color: color-mix(in srgb, var(--text-primary) 92%, var(--text-muted)); font-weight: 600; } .intro-modal__btn { width: 100%; justify-content: center; } .card-glow { border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--bg-elevated); box-shadow: var(--shadow-lg); } .recorder-card { padding: 1.25rem clamp(1rem, 4vw, 1.65rem); width: 100%; } .auth-gate-card { max-width: 28rem; margin-inline: auto; text-align: center; } .auth-gate-card__title { margin: 0 0 0.65rem; font-size: clamp(1.25rem, 3.5vw, 1.55rem); letter-spacing: -0.03em; color: var(--text-primary); } .auth-gate-card__lead { margin: 0 0 1.35rem; font-size: 0.98rem; line-height: 1.55; color: var(--text-muted); } .auth-gate-card__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; } .recorder-card__viewport { position: relative; box-sizing: border-box; width: var(--circle-preview-size); height: var(--circle-preview-size); flex-shrink: 0; margin: 0 auto 1.25rem; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-muted); border: 3px solid color-mix(in srgb, var(--accent) 42%, var(--border-subtle)); } /* Пустой