redesign: apply correct Editorial Fresh design system
- Fix palette: #E85A4F accent, #FFFBF5 cream, #1A1A1A ink (was wrong values) - Remove all border-radius (zero radius everywhere per design spec) - Sidebar: cream-dark #F5F0E8 bg with accent-left active indicator - card-editorial: white bg, 4px accent top bar via absolute div - Buttons: ink bg → accent hover + translateY(-1px) - LoginPage: correct split layout with Editorial Fresh tokens - Add .btn-primary / .btn-outline / .input-editorial / .editorial-tag classes - Fraunces + DM Sans correctly applied everywhere Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michele
@@ -2,15 +2,33 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
--coral: #FF6B4A;
|
||||
--cream: #FAF8F3;
|
||||
--ink: #1A1A2E;
|
||||
--muted: #8B8B9A;
|
||||
--surface: #FFFFFF;
|
||||
--border: #E8E4DE;
|
||||
/* Core palette */
|
||||
--cream: #FFFBF5;
|
||||
--cream-dark: #F5F0E8;
|
||||
--ink: #1A1A1A;
|
||||
--ink-light: #4A4A4A;
|
||||
--ink-muted: #7A7A7A;
|
||||
--accent: #E85A4F;
|
||||
--accent-hover: #D14940;
|
||||
--accent-light: #FFF0EE;
|
||||
--border: #E5E0D8;
|
||||
--border-strong: #D0C9BD;
|
||||
--success: #2D7A4F;
|
||||
--success-light: #F0F9F4;
|
||||
--error: #C53030;
|
||||
--error-light: #FFF5F5;
|
||||
--surface: #FFFFFF;
|
||||
|
||||
/* Legacy aliases used in components */
|
||||
--coral: var(--accent);
|
||||
--muted: var(--ink-muted);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -18,8 +36,142 @@ body {
|
||||
color: var(--ink);
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Fraunces', serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ─── Card editorial ────────────────────────────────────────── */
|
||||
.card-editorial {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-editorial::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────────── */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1.25rem;
|
||||
background-color: var(--ink);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1.25rem;
|
||||
background-color: transparent;
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 0;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-outline:hover:not(:disabled) {
|
||||
border-color: var(--ink);
|
||||
background-color: var(--cream-dark);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────────── */
|
||||
.input-editorial {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 0.875rem;
|
||||
color: var(--ink);
|
||||
background-color: var(--surface);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.input-editorial:focus {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.input-editorial::placeholder {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ─── Editorial tags & decorators ──────────────────────────── */
|
||||
.editorial-tag {
|
||||
display: inline-block;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.editorial-line {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: var(--accent);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* ─── Animations ────────────────────────────────────────────── */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.6s ease-out both;
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.4s ease-out both;
|
||||
}
|
||||
.delay-100 { animation-delay: 0.1s; }
|
||||
.delay-200 { animation-delay: 0.2s; }
|
||||
.delay-300 { animation-delay: 0.3s; }
|
||||
.delay-400 { animation-delay: 0.4s; }
|
||||
|
||||
/* ─── Scrollbar ─────────────────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
|
||||
|
||||
Reference in New Issue
Block a user