feat: complete NutriScan redesign
This commit is contained in:
evandrodevbr committed
1 parent
c1fe4af997
commit
f71cd167b3
163 files changed
+30802
-14169
No files matched your search
+505
-149
@@ -2,172 +2,528 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Scrollbar utilities */
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
}
|
||||
|
||||
/* Otimizações de performance para animações */
|
||||
@layer utilities {
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-in-from-bottom-4 {
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animações personalizadas para UI/UX */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-bounce-gentle {
|
||||
animation: bounceGentle 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(2rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceGentle {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Padrão de grid para background */
|
||||
.bg-grid-pattern {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Otimização para listas grandes */
|
||||
.product-grid {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
/* Fonts are self-hosted through next/font. */
|
||||
|
||||
/* ─── Design Tokens ───────────────────────────────────────────────────── */
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
/* Warm neutral palette */
|
||||
--bg-base: #f9f6f0;
|
||||
--bg-surface: #f4f0e8;
|
||||
--bg-elevated: #ffffff;
|
||||
--fg-primary: #1e1810;
|
||||
--fg-secondary: #5e4e3c;
|
||||
--fg-muted: #9a8870;
|
||||
--fg-faint: #b8a88a;
|
||||
--border-subtle: #e8e0d0;
|
||||
--border-strong: #d4c8b0;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
/* Single accent: editorial green */
|
||||
--accent: oklch(52% 0.11 155);
|
||||
--accent-light: oklch(72% 0.10 155);
|
||||
--accent-dark: oklch(38% 0.10 155);
|
||||
--accent-muted: oklch(92% 0.04 155);
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
/* Nutri-Score grade colors */
|
||||
--score-a: #1a7a4a;
|
||||
--score-b: #5da832;
|
||||
--score-c: #e8c110;
|
||||
--score-d: #e07820;
|
||||
--score-e: #c0201a;
|
||||
|
||||
--primary: 215 90% 50%;
|
||||
/* Azul Royal (#0055FF) */
|
||||
--primary-foreground: 210 40% 98%;
|
||||
/* Spacing primitives */
|
||||
--section-gap: 7rem;
|
||||
--container: 1120px;
|
||||
--radius: 0.375rem;
|
||||
|
||||
--secondary: 185 70% 45%;
|
||||
/* Verde-azulado (#19A7A7) */
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
/* shadcn/ui required tokens → warm neutral mapped */
|
||||
--background: 36 30% 96%;
|
||||
--foreground: 24 20% 10%;
|
||||
--card: 36 30% 98%;
|
||||
--card-foreground: 24 20% 10%;
|
||||
--popover: 36 30% 98%;
|
||||
--popover-foreground: 24 20% 10%;
|
||||
--primary: 155 40% 32%; /* accent green */
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 36 22% 90%;
|
||||
--secondary-foreground: 24 20% 20%;
|
||||
--muted: 36 20% 92%;
|
||||
--muted-foreground: 24 15% 46%;
|
||||
--destructive: 0 72% 44%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 36 20% 86%;
|
||||
--input: 36 20% 86%;
|
||||
--ring: 155 40% 32%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 185 70% 95%;
|
||||
/* Verde-azulado claro */
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 215 90% 50%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: oklch(52% 0.11 155);
|
||||
--chart-2: oklch(62% 0.14 200);
|
||||
--chart-3: oklch(70% 0.16 60);
|
||||
--chart-4: oklch(56% 0.18 30);
|
||||
--chart-5: oklch(52% 0.15 340);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 217 33% 17%;
|
||||
/* Fundo escuro azulado */
|
||||
--foreground: 210 40% 98%;
|
||||
--bg-base: #110e09;
|
||||
--bg-surface: #1a1610;
|
||||
--bg-elevated: #231e17;
|
||||
--fg-primary: #f4f0e8;
|
||||
--fg-secondary: #c8b898;
|
||||
--fg-muted: #8a7860;
|
||||
--fg-faint: #5e4e3c;
|
||||
--border-subtle: #2e2618;
|
||||
--border-strong: #3e3228;
|
||||
|
||||
--card: 217 33% 17%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--accent: oklch(62% 0.12 155);
|
||||
--accent-light: oklch(75% 0.10 155);
|
||||
--accent-dark: oklch(44% 0.10 155);
|
||||
--accent-muted: oklch(20% 0.06 155);
|
||||
|
||||
--popover: 217 33% 17%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--background: 24 20% 8%;
|
||||
--foreground: 36 30% 94%;
|
||||
--card: 24 20% 10%;
|
||||
--card-foreground: 36 30% 94%;
|
||||
--popover: 24 20% 10%;
|
||||
--popover-foreground: 36 30% 94%;
|
||||
--primary: 155 38% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 24 18% 18%;
|
||||
--secondary-foreground: 36 28% 88%;
|
||||
--muted: 24 16% 16%;
|
||||
--muted-foreground: 36 20% 58%;
|
||||
--destructive: 0 62% 42%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 24 18% 18%;
|
||||
--input: 24 18% 18%;
|
||||
--ring: 155 38% 48%;
|
||||
}
|
||||
|
||||
--primary: 215 90% 60%;
|
||||
/* Azul Royal mais claro */
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
/* ── Base resets & typography ───────────────────────────────────────── */
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
--secondary: 185 70% 40%;
|
||||
/* Verde-azulado ajustado */
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
html {
|
||||
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
--muted: 217 33% 25%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
body {
|
||||
background-color: var(--bg-base);
|
||||
color: var(--fg-primary);
|
||||
font-family: var(--font-inter), system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.72;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
--accent: 185 70% 25%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
/* Headings use the active display font. */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-display), Georgia, serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217 33% 25%;
|
||||
--input: 217 33% 25%;
|
||||
--ring: 215 90% 60%;
|
||||
/* Hairline horizontal rule */
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Utility layer ───────────────────────────────────────────────────── */
|
||||
@layer utilities {
|
||||
|
||||
/* Scrollbar */
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* Editorial typography helpers */
|
||||
.font-display { font-family: var(--font-display), Georgia, serif; }
|
||||
.font-display-i { font-family: var(--font-display), Georgia, serif; font-style: italic; }
|
||||
|
||||
/* Container max-width */
|
||||
.container-editorial {
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: clamp(1.25rem, 5vw, 3rem);
|
||||
}
|
||||
|
||||
/* Hairline divider */
|
||||
.hairline {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.hairline-v {
|
||||
border: none;
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
/* Section vertical rhythm */
|
||||
.section-py { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
|
||||
.section-pt { padding-top: var(--section-gap); }
|
||||
.section-pb { padding-bottom: var(--section-gap); }
|
||||
|
||||
/* Warm surface tokens */
|
||||
.bg-base { background-color: var(--bg-base); }
|
||||
.bg-surface { background-color: var(--bg-surface); }
|
||||
.bg-elevated { background-color: var(--bg-elevated); }
|
||||
|
||||
.text-primary { color: var(--fg-primary); }
|
||||
.text-secondary{ color: var(--fg-secondary); }
|
||||
.text-muted { color: var(--fg-muted); }
|
||||
.text-faint { color: var(--fg-faint); }
|
||||
|
||||
/* Accent utilities */
|
||||
.text-accent { color: var(--accent); }
|
||||
.bg-accent { background-color: var(--accent); }
|
||||
.bg-accent-muted { background-color: var(--accent-muted); }
|
||||
.border-accent { border-color: var(--accent); }
|
||||
|
||||
/* Label caps */
|
||||
.label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-inter), system-ui, sans-serif;
|
||||
}
|
||||
.label-lg {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-inter), system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Product grid performance */
|
||||
.product-grid { contain: layout style; }
|
||||
.product-card { will-change: transform; backface-visibility: hidden; }
|
||||
|
||||
/* Stagger animation helpers */
|
||||
.anim-delay-1 { animation-delay: 0.1s; }
|
||||
.anim-delay-2 { animation-delay: 0.2s; }
|
||||
.anim-delay-3 { animation-delay: 0.3s; }
|
||||
.anim-delay-4 { animation-delay: 0.4s; }
|
||||
.anim-delay-5 { animation-delay: 0.5s; }
|
||||
|
||||
/* Nutri-Score grade pills */
|
||||
.grade-a { background: var(--score-a); color: #fff; }
|
||||
.grade-b { background: var(--score-b); color: #fff; }
|
||||
.grade-c { background: var(--score-c); color: #1e1810; }
|
||||
.grade-d { background: var(--score-d); color: #fff; }
|
||||
.grade-e { background: var(--score-e); color: #fff; }
|
||||
|
||||
/* Thin top-border accent card */
|
||||
.card-accent-top {
|
||||
border-top: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
/* Hover lift */
|
||||
.hover-lift {
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 40px -8px rgba(30, 24, 16, 0.12);
|
||||
}
|
||||
|
||||
/* Monochrome icon filter for editorial look */
|
||||
.icon-mono {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Component layer ─────────────────────────────────────────────────── */
|
||||
@layer components {
|
||||
|
||||
/* ── Editorial Section Header ────────────────────────────────────────── */
|
||||
.section-header {
|
||||
@apply mb-16;
|
||||
}
|
||||
.section-header .eyebrow {
|
||||
@apply label text-accent mb-4 block;
|
||||
}
|
||||
.section-header h2 {
|
||||
@apply font-display text-display-lg text-[var(--fg-primary)] mb-5;
|
||||
}
|
||||
.section-header p {
|
||||
@apply text-[var(--fg-secondary)] text-lg leading-relaxed max-w-[65ch];
|
||||
}
|
||||
|
||||
/* ── Warm Card ───────────────────────────────────────────────────────── */
|
||||
.card-warm {
|
||||
background-color: var(--bg-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 0.75rem;
|
||||
transition: border-color 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
.card-warm:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 8px 32px -8px rgba(30, 24, 16, 0.10);
|
||||
}
|
||||
|
||||
/* ── Accent Button ───────────────────────────────────────────────────── */
|
||||
.btn-accent {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--accent);
|
||||
color: #fff;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.btn-accent:hover {
|
||||
background-color: var(--accent-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-accent:active { transform: translateY(0); }
|
||||
|
||||
.btn-accent:focus-visible,
|
||||
.btn-ghost:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ── Ghost Button ────────────────────────────────────────────────────── */
|
||||
.btn-ghost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6875rem 1.375rem;
|
||||
background: transparent;
|
||||
color: var(--fg-primary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--fg-muted);
|
||||
}
|
||||
|
||||
/* ── Stat Cell (Hero metrics) ────────────────────────────────────────── */
|
||||
.stat-cell {
|
||||
@apply flex flex-col items-center gap-1;
|
||||
}
|
||||
.stat-cell .stat-value {
|
||||
font-family: var(--font-display), Georgia, serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
color: var(--fg-primary);
|
||||
}
|
||||
.stat-cell .stat-label {
|
||||
@apply label text-[var(--fg-muted)];
|
||||
}
|
||||
|
||||
/* ── Step number (How It Works) ──────────────────────────────────────── */
|
||||
.step-number {
|
||||
font-family: var(--font-display), Georgia, serif;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1;
|
||||
color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ── Nutri-Score Hero metric ─────────────────────────────────────────── */
|
||||
.nutriscore-hero {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
font-family: var(--font-display), Georgia, serif;
|
||||
font-size: 2.25rem;
|
||||
animation: score-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
/* ── Search input editorial ──────────────────────────────────────────── */
|
||||
.search-editorial {
|
||||
width: 100%;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.25rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.search-editorial:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px oklch(52% 0.11 155 / 0.12);
|
||||
}
|
||||
.search-editorial input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1.125rem 0;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--fg-primary);
|
||||
}
|
||||
.search-editorial input::placeholder {
|
||||
color: var(--fg-faint);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Keyframe animations ─────────────────────────────────────────────── */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(1.5rem); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes stagger-in {
|
||||
from { opacity: 0; transform: translateY(0.75rem); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes line-grow {
|
||||
from { transform: scaleX(0); transform-origin: left; }
|
||||
to { transform: scaleX(1); transform-origin: left; }
|
||||
}
|
||||
@keyframes score-reveal {
|
||||
from { transform: scale(0.6); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(1rem); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ─── Legacy animation class aliases (keep compatibility) ─────────────── */
|
||||
.animate-in { animation: fadeInUp 0.6s ease-out forwards; }
|
||||
.fade-in-0 { opacity: 0; }
|
||||
.slide-in-from-bottom-4 { transform: translateY(1rem); }
|
||||
.animate-fade-up { animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
||||
.animate-fade-in { animation: fade-in 0.5s ease forwards; }
|
||||
.animate-stagger-in { animation: stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
||||
.animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
||||
|
||||
/* ─── Redesign: ink palette tokens (mirror the HTML spec) ────────────── */
|
||||
:root {
|
||||
--ink-900: #141312;
|
||||
--ink-800: #26231f;
|
||||
--ink-700: #3d3934;
|
||||
--ink-600: #595149;
|
||||
--ink-500: #7a7269;
|
||||
--ink-400: #a39c93;
|
||||
--ink-300: #c9c3ba;
|
||||
--ink-200: #e4dfd7;
|
||||
--ink-150: #ece7de;
|
||||
--ink-100: #f3efe7;
|
||||
--ink-50: #f9f6f0;
|
||||
--ink-0: #fdfbf5;
|
||||
--nutri-a: #038141;
|
||||
--nutri-b: #85bb2f;
|
||||
--nutri-c: #fecb02;
|
||||
--nutri-d: #ee8100;
|
||||
--nutri-e: #e63e11;
|
||||
--accent-soft: oklch(94% 0.04 155);
|
||||
--accent-ink: oklch(28% 0.06 155);
|
||||
--warn: #b45309;
|
||||
--warn-soft: #fef3c7;
|
||||
--font-display: var(--font-instrument-serif);
|
||||
--font-serif: var(--font-display), 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
|
||||
}
|
||||
|
||||
.landing-font {
|
||||
--font-display: var(--font-newsreader);
|
||||
}
|
||||
|
||||
/* ─── Redesign: nutri-letter hero circle ─────────────────────────────── */
|
||||
.nutri-letter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-family: var(--font-display), Georgia, serif;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 8px 24px -8px rgba(0,0,0,0.2);
|
||||
}
|
||||
.nutri-letter.grade-a, .nutri-letter.a { background: var(--nutri-a); }
|
||||
.nutri-letter.grade-b, .nutri-letter.b { background: var(--nutri-b); }
|
||||
.nutri-letter.grade-c, .nutri-letter.c { background: var(--nutri-c); color: #3a2a00; }
|
||||
.nutri-letter.grade-d, .nutri-letter.d { background: var(--nutri-d); }
|
||||
.nutri-letter.grade-e, .nutri-letter.e { background: var(--nutri-e); }
|
||||
|
||||
/* ─── Redesign: nutri-scale badge (full A–E row) ─────────────────────── */
|
||||
.nutri-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-weight: 800;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: var(--ink-100);
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
.nutri-badge .seg {
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
letter-spacing: -0.02em;
|
||||
transition: transform 0.25s;
|
||||
opacity: 0.35;
|
||||
filter: saturate(0.3);
|
||||
}
|
||||
.nutri-badge .seg.active { opacity: 1; filter: none; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
|
||||
.nutri-badge .seg.a { background: var(--nutri-a); }
|
||||
.nutri-badge .seg.b { background: var(--nutri-b); }
|
||||
.nutri-badge .seg.c { background: var(--nutri-c); color: #3a2a00; }
|
||||
.nutri-badge .seg.d { background: var(--nutri-d); }
|
||||
.nutri-badge .seg.e { background: var(--nutri-e); }
|
||||
|
||||
/* ─── Redesign: eyebrow mono label ──────────────────────────────────── */
|
||||
.eyebrow-mono {
|
||||
font-family: var(--font-mono, ui-monospace, monospace);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-500);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ─── Redesign: product card chip ─────────────────────────────────── */
|
||||
.rd-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: var(--ink-100, #f3efe7);
|
||||
color: var(--ink-700, #3d3934);
|
||||
border: 1px solid var(--ink-200, #e4dfd7);
|
||||
}
|
||||
.rd-chip.warn {
|
||||
background: var(--warn-soft, #fef3c7);
|
||||
color: var(--warn, #b45309);
|
||||
border-color: #fcd34d;
|
||||
}
|
||||
Reference in new issue
Block a user