/* ==========================================================================
MoveSnaps design system
Palette: white / ink / blue / red / green, per brief.
Display face: Fraunces (characterful serif — nods to old photography &
printed proof sheets). Body: Inter. Data/captions: JetBrains Mono.
========================================================================== */
/* Fonts are loaded via + tags
in each page's rather than @import here — @import forces the browser
to fully fetch and parse this file before it even discovers the font
request, turning it into a slow serial chain instead of a parallel one. */
:root {
--white: #ffffff;
--paper: #fafaf8;
--ink: #12172b;
--ink-soft: #4a5066;
--line: #e6e5e0;
--blue: #1b3a6b;
--blue-deep: #0d1b3e;
--red: #e0193c;
--green: #1e7a4c;
--gold: #d6a61a;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 12px 32px -12px rgba(13, 27, 62, 0.18);
--shadow-sm: 0 4px 12px -4px rgba(13, 27, 62, 0.12);
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
:root[data-theme="dark"] {
--white: #141a2b;
--paper: #0b0e18;
--ink: #eef1f8;
--ink-soft: #9aa3bd;
--line: #262e46;
--blue: #4a76b8;
--blue-deep: #1b3a6b;
--red: #ff5470;
--green: #35a06a;
--gold: #e8b93a;
--shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
--shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
}
body { transition: background-color .2s ease, color .2s ease; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ---------- Accessibility utilities ---------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Top bar ---------- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
}
.wordmark {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
text-decoration: none;
display: flex;
align-items: baseline;
gap: 2px;
background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.wordmark .dot {
-webkit-text-fill-color: var(--red);
color: var(--red);
}
.topbar-help {
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-soft);
text-decoration: none;
border: 1px solid var(--line);
padding: 8px 14px;
border-radius: 999px;
transition: border-color .15s ease, color .15s ease;
}
.topbar-help:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-soft);
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle[data-theme="dark"] .icon-sun { display: none; }
.theme-toggle[data-theme="dark"] .icon-moon { display: block; }
/* ---------- Hero (centered, minimal — Google-style entry point) ---------- */
.wordmark-hero {
font-size: clamp(64px, 11vw, 130px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 0.95;
margin-bottom: 26px;
}
.wordmark-hero .dot {
font-size: 1.15em;
}
.hero-centered {
min-height: calc(100vh - 160px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 24px 80px;
background:
radial-gradient(ellipse 520px 320px at 22% 18%, rgba(27, 58, 107, 0.08), transparent 60%),
radial-gradient(ellipse 480px 300px at 80% 78%, rgba(224, 25, 60, 0.06), transparent 60%);
}
.hero-centered .lead {
font-size: 17px;
color: var(--ink-soft);
max-width: 40ch;
margin: 0 0 32px;
}
.secret-box {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 460px;
background: var(--white);
border: 1.5px solid var(--line);
border-radius: 999px;
padding: 8px 8px 8px 22px;
box-shadow: var(--shadow-sm);
transition: border-color .15s ease, box-shadow .15s ease;
}
.secret-box:focus-within {
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(27, 58, 107, 0.12);
}
.secret-box input {
border: none;
padding: 10px 0;
flex: 1;
min-width: 0;
letter-spacing: normal;
text-align: left;
font-size: 15px;
}
.secret-box input:focus { border: none; }
.secret-box input:focus-visible { outline-offset: -2px; border-radius: 6px; }
.secret-box .btn {
flex-shrink: 0;
padding: 11px 22px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
padding: 13px 24px;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-deep); box-shadow: var(--shadow-sm); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { filter: brightness(0.94); box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-green { background: var(--green); color: var(--white); }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn-disabled {
background: #eceef2 !important;
color: #9aa0b4 !important;
border-color: #eceef2 !important;
cursor: not-allowed !important;
box-shadow: none !important;
}
/* ---------- Footer ---------- */
footer {
border-top: 1px solid var(--line);
padding: 28px 24px;
text-align: center;
color: var(--ink-soft);
font-size: 13px;
}
/* ---------- Forms (upload flow + admin) ---------- */
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow-sm);
}
.form-page {
max-width: 560px;
margin: 64px auto;
padding: 0 24px;
}
.form-page.wide { max-width: 720px; }
.form-page h1 {
font-family: var(--font-display);
font-size: 30px;
margin: 0 0 8px;
}
.form-page .sub { color: var(--ink-soft); margin: 0 0 28px; }
label {
display: block;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
}
.field-heading {
display: block;
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
}
.field { margin-bottom: 20px; }
.hint { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], textarea, select {
width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--ink);
transition: border-color .12s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
textarea { min-height: 100px; resize: vertical; }
.file-drop {
border: 2px dashed var(--line);
border-radius: var(--radius);
padding: 28px;
text-align: center;
color: var(--ink-soft);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
/* reset so a