anthonyandClaude Sonnet 5
987af80286
Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and IBM Plex Mono for display and code-like text, and give the hero an animated aurora backdrop, gradient headline, and a format-pair marquee driven by the real registered converters. Rework the file config form: target format and icon size are both chip groups now instead of a native select, and quality/compression sliders get a gradient-filled track, custom thumb, and a mono value pill to match. File type icons are color-coded by family (images/documents/fonts/ebooks) and reused across FileConfigCard, FileCard, and FormatsGrid. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
96 lines
2.5 KiB
CSS
96 lines
2.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=IBM+Plex+Mono:wght@500;600&display=swap');
|
|
|
|
:root {
|
|
/* interactive-safe (AA-contrast) roles */
|
|
--color-primary: #6d28d9;
|
|
--color-on-primary: #ffffff;
|
|
--color-secondary: #0e7ea8;
|
|
--color-background: #faf9fe;
|
|
--color-foreground: #150f26;
|
|
--color-muted: #ede6ff;
|
|
--color-border: #e3daf7;
|
|
--color-destructive: #dc2626;
|
|
--color-ring: #6d28d9;
|
|
|
|
/* decorative aurora duo, drawn from the Ombrora mark — used for gradients, blobs, glow */
|
|
--color-aurora-violet: #7e14ff;
|
|
--color-aurora-cyan: #47bfff;
|
|
--color-aurora-mist: #ede6ff;
|
|
--gradient-aurora: linear-gradient(135deg, var(--color-aurora-violet), var(--color-aurora-cyan));
|
|
|
|
/* file-family accents, reused for icon chips across the upload flow */
|
|
--color-family-images: var(--color-aurora-violet);
|
|
--color-family-documents: var(--color-aurora-cyan);
|
|
--color-family-fonts: #f5a524;
|
|
--color-family-ebooks: #10b981;
|
|
|
|
--font-sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
--font-display: 'Bricolage Grotesque', var(--font-sans);
|
|
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
|
|
|
|
color-scheme: light dark;
|
|
font: 16px/1.5 var(--font-sans);
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--color-primary: #9b6bff;
|
|
--color-on-primary: #150f26;
|
|
--color-secondary: #47bfff;
|
|
--color-background: #0d0a18;
|
|
--color-foreground: #f3f0ff;
|
|
--color-muted: #1c1530;
|
|
--color-border: #332853;
|
|
--color-destructive: #fb7185;
|
|
--color-ring: #9b6bff;
|
|
|
|
--color-aurora-violet: #9b6bff;
|
|
--color-aurora-cyan: #47bfff;
|
|
--color-aurora-mist: #241a3d;
|
|
|
|
--color-family-images: var(--color-aurora-violet);
|
|
--color-family-documents: var(--color-aurora-cyan);
|
|
--color-family-fonts: #ffb84d;
|
|
--color-family-ebooks: #34d399;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-background);
|
|
color: var(--color-foreground);
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100svh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
button, input, select {
|
|
font-family: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|