/* ========== NUTRIKA+ Shared Stylesheet ========== */
:root {
/* Gouttière d'écran. La barre de navigation et le héros s'y accrochent :
leur fond va d'un bord à l'autre, donc les enfermer dans le conteneur
de contenu poussait tout vers la droite sur un grand écran. Les
sections, elles, gardent leur conteneur de 1680px. */
--shell-gutter: clamp(1.5rem, 4vw, 5rem);
/* The three label colours, read straight off the jars.
Allergy is blue, Gut Health is orange, Dental Health is teal. */
--brand-blue: #0B3F94;
--brand-blue-deep: #06265C;
--brand-teal: #029493;
--brand-teal-deep: #016A69;
--brand-orange: #E4560F;
--brand-orange-deep: #B93F06;
/* Per-page accent. Product pages set this to their own label colour. */
--accent: var(--brand-blue);
--accent-deep: var(--brand-blue-deep);
/* Legacy token names, remapped to the new system so every rule follows */
--nutrika-blue: var(--accent);
--midnight-navy: var(--brand-blue-deep);
--pale-sky: #DCE7F7;
--honey-amber: var(--brand-orange);
--sage-mist: var(--brand-teal);
--off-white: #F4F6FA;
--soft-cream: #FBFCFE;
--ink-navy: #0D1B33;
--warm-slate: #55657E;
--hairline: #DCE3EE;
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--font: 'Montserrat', system-ui, -apple-system, sans-serif;
}
/* Product themes: one class on , and the accent follows the label */
/* --nutrika-blue est redéclaré ici : une variable qui en substitue une autre
se résout là où elle est déclarée, donc celle du :root resterait bleue. */
body.theme-blue { --accent: var(--brand-blue); --accent-deep: var(--brand-blue-deep);
--nutrika-blue: var(--accent); }
body.theme-teal { --accent: var(--brand-teal); --accent-deep: var(--brand-teal-deep);
--nutrika-blue: var(--accent); }
body.theme-orange { --accent: var(--brand-orange); --accent-deep: var(--brand-orange-deep);
--nutrika-blue: var(--accent);
/* orange sur orange ne contraste pas : le second accent passe au bleu */
--honey-amber: var(--brand-blue); }
html, body { background: var(--off-white); color: var(--ink-navy); }
/* Gotham on the printed labels; Montserrat is its closest web equivalent.
Weights follow the label: Light 300 display, Book 400 body,
Bold 700 emphasis, Black 900 wordmark. */
body { font-family: var(--font); line-height: 1.7; }
.font-display { font-family: var(--font); font-weight: 300; }
.font-display-italic { font-family: var(--font); font-weight: 300; }
/* Headline scale */
.headline-hero {
font-family: var(--font);
font-weight: 300;
font-size: clamp(3rem, 7vw, 6.25rem);
line-height: 1.06;
letter-spacing: 0.005em;
color: var(--ink-navy);
}
.headline-h2 {
font-family: var(--font);
font-weight: 300;
font-size: clamp(1.875rem, 3.8vw, 3rem);
line-height: 1.14;
letter-spacing: 0.005em;
}
.headline-h3 {
font-family: var(--font);
font-weight: 700;
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
line-height: 1.3;
letter-spacing: 0;
}
.body-lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: var(--warm-slate); line-height: 1.65; max-width: 52ch; }
/* Hero lead sits under a very large headline: shorter measure reads calmer,
pretty wrapping keeps a lone word off the last line */
.hero-lead { max-width: 46ch; text-wrap: pretty; }
.micro-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
/* Layered blue-tinted shadow tokens */
.shadow-elev-1 {
box-shadow:
0 1px 2px oklch(30% 0.06 245 / 0.06),
0 8px 24px oklch(30% 0.06 245 / 0.08),
0 24px 56px oklch(30% 0.06 245 / 0.06);
}
.shadow-elev-2 {
box-shadow:
0 1px 2px oklch(30% 0.06 245 / 0.08),
0 12px 32px oklch(30% 0.06 245 / 0.12),
0 40px 80px oklch(30% 0.06 245 / 0.10);
}
.shadow-elev-3 {
box-shadow:
0 2px 4px oklch(20% 0.06 245 / 0.10),
0 18px 48px oklch(20% 0.06 245 / 0.18),
0 60px 120px oklch(20% 0.06 245 / 0.14);
}
/* Pill primary CTA */
.btn-primary {
background: var(--nutrika-blue);
color: var(--off-white);
border-radius: 999px;
padding: 0.95rem 1.85rem;
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.005em;
transition: background-color 280ms var(--ease-spring), transform 280ms var(--ease-spring);
display: inline-flex; align-items: center; gap: 0.5rem;
will-change: transform;
border: none;
cursor: pointer;
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.btn-primary-amber {
background: var(--midnight-navy);
color: var(--off-white);
}
.btn-primary-amber:hover { background: var(--ink-navy); }
.btn-ghost {
color: var(--ink-navy);
font-weight: 500;
font-size: 0.9375rem;
display: inline-flex; align-items: center; gap: 0.4rem;
position: relative;
background: transparent;
border: none;
cursor: pointer;
padding: 0.25rem 0;
}
.btn-ghost::after {
content: ''; position: absolute; left: 0; bottom: -3px; height: 1px;
width: 0; background: var(--accent-deep);
transition: width 320ms var(--ease-spring);
}
.btn-ghost:hover::after { width: 100%; }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.arrow { transition: transform 280ms var(--ease-spring); display: inline-block; }
.btn-secondary {
border: 1px solid var(--hairline);
color: var(--ink-navy);
border-radius: 999px;
padding: 0.95rem 1.85rem;
font-weight: 500;
font-size: 0.9375rem;
display: inline-flex; align-items: center; gap: 0.5rem;
background: transparent;
cursor: pointer;
transition: border-color 280ms var(--ease-spring), color 280ms var(--ease-spring);
}
.btn-secondary:hover { border-color: var(--midnight-navy); }
/* Navigation */
.nav-shell {
transition: background-color 320ms var(--ease-spring), backdrop-filter 320ms var(--ease-spring), border-color 320ms var(--ease-spring);
}
.nav-shell.scrolled {
background: rgba(247, 244, 238, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--hairline);
}
.nav-link {
font-size: 0.9375rem;
color: var(--ink-navy);
font-weight: 500;
position: relative;
padding: 0.25rem 0;
}
.nav-link::after {
content: ''; position: absolute; left: 50%; bottom: -4px; height: 1px; width: 0;
background: var(--nutrika-blue);
transition: width 280ms var(--ease-spring), left 280ms var(--ease-spring);
}
.nav-link:hover::after { width: 100%; left: 0; }
.nav-link-active { color: var(--nutrika-blue); }
.nav-link-active::after { width: 100%; left: 0; background: var(--nutrika-blue); }
/* Wordmark */
.wordmark {
display: inline-flex;
align-items: center;
line-height: 0;
}
.wordmark img {
display: block;
/* Le logo est le seul élément de marque de l'en-tête : il porte double. */
height: 64px;
width: auto;
}
@media (max-width: 640px) {
.wordmark img { height: 52px; }
}
.footer-wordmark img { height: 80px; }
/* Hero photo treatment */
.hero-photo-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 18px;
overflow: hidden;
background: var(--pale-sky);
}
.hero-photo-frame img {
width: 100%; height: 100%; object-fit: cover;
will-change: transform;
}
.hero-photo-frame::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 70% 20%, oklch(78% 0.13 75 / 0.28), transparent 55%),
radial-gradient(ellipse at 20% 90%, oklch(60% 0.09 245 / 0.18), transparent 60%);
mix-blend-mode: soft-light;
pointer-events: none;
}
.hero-photo-frame::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.06;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 2;
}
/* Lifestyle photo with multiply tint */
.tint-photo {
position: relative;
border-radius: 14px;
overflow: hidden;
background: var(--pale-sky);
}
.tint-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tint-photo::after {
content: ''; position: absolute; inset: 0;
background: var(--pale-sky);
mix-blend-mode: multiply;
opacity: 0.25;
pointer-events: none;
}
/* Floating product card */
.product-float {
position: absolute;
bottom: -2.5rem; left: -2.5rem;
background: var(--off-white);
padding: 1rem 1.25rem;
border-radius: 14px;
border: 1px solid var(--hairline);
z-index: 3;
animation: gentle-float 6s ease-in-out infinite;
will-change: transform;
}
@keyframes gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* La pastille « Available on Amazon » a ete retiree des trois fiches
produits (retour client 2026-09-08) : elle repetait mot pour mot le
bouton « Shop on Amazon » pose juste en dessous. Regle supprimee. */
@keyframes shimmer {
0%, 100% { background-position: 0% 0; }
50% { background-position: 100% 0; }
}
/* Trust strip */
.trust-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--accent); display: inline-block; }
/* Featured product card */
.product-card-bg {
background:
radial-gradient(circle at 30% 30%, oklch(86% 0.04 245), var(--pale-sky) 60%),
var(--pale-sky);
border-radius: 22px;
aspect-ratio: 4 / 5;
position: relative;
overflow: hidden;
}
.product-card-bg::after {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.04;
mix-blend-mode: multiply;
}
/* Benefit row */
.benefit-row { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.benefit-row:last-child { border-bottom: 1px solid var(--hairline); }
.benefit-icon {
width: 44px; height: 44px; border-radius: 999px;
background: var(--soft-cream);
border: 1px solid var(--hairline);
display: grid; place-items: center;
color: var(--nutrika-blue);
flex-shrink: 0;
}
/* Page grain layer */
.page-grain::before {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.025;
mix-blend-mode: multiply;
}
/* Splitting char reveal — masked per line so travelling chars never bleed
onto the copy below. Padding + matching negative margin keeps descenders
(g, y, p) and italic overhang visible while the mask stays tight. */
.headline-hero .hl-line {
display: block;
overflow: hidden;
padding-block-end: 0.18em;
margin-block-end: -0.18em;
padding-inline-end: 0.08em;
margin-inline-end: -0.08em;
}
/* Splitting turns the hyphen into its own word, so a narrow screen would break
"More tail" / "-wagging." — hold the compound together instead */
.headline-hero .hl-nowrap { white-space: nowrap; }
/* Only the layout hint lives here. The hidden state is set by JS right
before animating, so if the tween never runs the text still reads. */
.reveal .char { display: inline-block; }
/* Subtle reveal block */
.fade-up { opacity: 0; transform: translateY(24px); }
/* Hero grid */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid {
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(3rem, 6vw, 6rem);
}
}
/* Featured grid */
.featured-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
}
@media (min-width: 900px) {
.featured-grid {
grid-template-columns: 0.85fr 1fr;
gap: clamp(3rem, 5vw, 5rem);
}
}
/* Section eyebrow */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.6rem;
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500; color: var(--nutrika-blue);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--nutrika-blue); }
.eyebrow.on-dark { color: var(--pale-sky); }
.eyebrow.on-dark::before { background: var(--pale-sky); }
/* Icon button */
.icon-btn {
width: 42px; height: 42px; border-radius: 999px;
border: 1px solid var(--hairline);
background: rgba(255,255,255,0.4);
display: grid; place-items: center; color: var(--ink-navy);
transition: background-color 240ms var(--ease-spring), border-color 240ms var(--ease-spring);
position: relative;
cursor: pointer;
}
.icon-btn:hover { background: var(--soft-cream); border-color: var(--nutrika-blue); }
/* Asymmetric italic accent */
.accent-italic {
font-weight: 700;
color: var(--nutrika-blue);
}
/* Mobile/desktop nav helpers */
.mobile-only { display: none; }
.desktop-only { display: flex; }
@media (max-width: 1023px) {
.mobile-only { display: grid; }
.desktop-only { display: none; }
}
.splitting .word, .splitting .char { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ========== Brand Story Strip ========== */
.story-strip {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
@media (min-width: 768px) {
.story-strip { grid-template-columns: repeat(3, 1fr); }
}
.story-strip > div {
padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) {
.story-strip > div {
border-top: none;
border-left: 1px solid var(--hairline);
}
.story-strip > div:first-child { border-left: none; }
}
/* Toute la cellule est le lien vers la fiche produit, comme les cartes de
la gamme : le client cliquait a cote du bouton et rien ne se passait
(retour 2026-09-08). Le bouton reste visible et reste au-dessus. */
.strip-cell { position: relative; cursor: pointer; }
.strip-cover { position: absolute; inset: 0; z-index: 1; }
.strip-cover:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* Seul le bouton remonte au-dessus de la nappe : le reste de la cellule
doit rester dessous, sinon un clic sur le texte ne suit plus le lien. */
.strip-cell > .btn-ghost { position: relative; z-index: 2; }
@media (hover: hover) {
.strip-cell:hover .btn-ghost::after { width: 100%; }
.strip-cell:hover .btn-ghost .arrow { transform: translateX(4px); }
}
.story-icon {
width: 56px; height: 56px; border-radius: 999px;
display: grid; place-items: center;
border: 1px solid var(--accent);
color: var(--accent);
margin-bottom: 1.5rem;
}
/* ========== Editorial Dark Section ========== */
.dark-section {
background: var(--midnight-navy);
color: var(--off-white);
position: relative;
overflow: hidden;
}
.dark-section::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.06;
mix-blend-mode: overlay;
}
.dark-section .body-lead { color: rgba(247,244,238,0.78); }
.dark-section .micro-label { color: rgba(247,244,238,0.6); }
/* ========== Ingredient grid ========== */
.ingredient-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(0.875rem, 1.4vw, 1.25rem);
}
@media (min-width: 560px) { .ingredient-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .ingredient-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .ingredient-grid { grid-template-columns: repeat(4, 1fr); } }
.ingredient-card {
background: var(--soft-cream);
border-radius: 14px;
padding: clamp(1rem, 1.3vw, 1.25rem);
text-align: left;
border: 1px solid var(--hairline);
cursor: pointer;
position: relative;
transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring);
display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
width: 100%;
font-family: inherit;
color: inherit;
}
.ingredient-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px oklch(30% 0.06 245 / 0.08),
0 12px 32px oklch(30% 0.06 245 / 0.14),
0 40px 80px oklch(30% 0.06 245 / 0.10);
}
.ingredient-card:hover .ingredient-card-cta::after { width: 100%; }
.ingredient-thumb {
width: 48px; height: 48px; border-radius: 999px;
background: var(--pale-sky);
display: grid; place-items: center;
color: var(--midnight-navy);
flex-shrink: 0;
}
.ingredient-thumb svg { width: 24px; height: 24px; }
.ingredient-card-cta {
font-size: 0.8125rem; font-weight: 500;
color: var(--ink-navy);
position: relative;
display: inline-flex; gap: 0.4rem; align-items: center;
}
.ingredient-card-cta::after {
content: ''; position: absolute; left: 0; bottom: -3px; height: 1px;
width: 0; background: var(--accent-deep);
transition: width 320ms var(--ease-spring);
}
/* Ingredients page grid. The old asymmetric spans (3 and 2 of 6) left
ragged holes at the end of every row and blew the cards up to fill
them. An even grid keeps the cards small and the rows closed. */
.ingredient-grid-asym {
display: grid;
grid-template-columns: 1fr;
gap: clamp(0.875rem, 1.4vw, 1.25rem);
}
@media (min-width: 560px) { .ingredient-grid-asym { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .ingredient-grid-asym { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .ingredient-grid-asym { grid-template-columns: repeat(4, 1fr); } }
/* ========== Drawer ========== */
.drawer-root { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer-root.open { visibility: visible; }
.drawer-backdrop {
position: absolute; inset: 0;
background: rgba(31,58,95,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
}
.drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(520px, 100%);
background: var(--off-white);
display: flex; flex-direction: column;
transform: translateX(100%);
overflow-y: auto;
box-shadow:
-2px 0 8px oklch(20% 0.06 245 / 0.10),
-20px 0 60px oklch(20% 0.06 245 / 0.18);
}
.drawer-close {
position: absolute; top: 1.25rem; right: 1.25rem;
width: 40px; height: 40px; border-radius: 999px;
background: rgba(247,244,238,0.85);
border: 1px solid var(--hairline);
display: grid; place-items: center;
color: var(--ink-navy);
cursor: pointer; z-index: 2;
transition: background-color 240ms var(--ease-spring);
}
.drawer-close:hover { background: var(--soft-cream); }
.drawer-hero {
position: relative;
height: 280px;
background: var(--pale-sky);
overflow: hidden;
}
.drawer-hero img { width: 100%; height: 100%; object-fit: cover; }
.drawer-hero::after {
content: ''; position: absolute; inset: 0;
background: var(--pale-sky);
mix-blend-mode: multiply;
opacity: 0.3;
}
.drawer-content { padding: 2rem clamp(1.5rem, 4vw, 2.5rem) 3rem; }
.drawer-content > * { opacity: 0; transform: translateY(12px); }
.drawer-name { font-family: var(--font); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: 0; color: var(--ink-navy); }
.drawer-scientific { font-family: var(--font); font-style: italic; color: var(--warm-slate); margin-top: 0.35rem; font-size: 1rem; }
.drawer-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--pale-sky);
color: var(--midnight-navy);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
padding: 0.4rem 0.8rem; border-radius: 999px;
margin-top: 1.25rem;
}
.drawer-dosage {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 10px;
font-family: var(--font);
font-size: 0.875rem;
color: var(--ink-navy);
}
.drawer-body { margin-top: 1.5rem; color: var(--ink-navy); line-height: 1.75; max-width: 60ch; }
.drawer-citations { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.drawer-citations a { color: var(--accent-deep); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.drawer-citations a:hover { text-decoration: underline; }
/* ========== Accordion ========== */
.accordion-item { border-top: 1px solid var(--hairline); }
.accordion-item:last-child { border-bottom: 1px solid var(--hairline); }
.accordion-trigger {
width: 100%;
background: transparent; border: none;
display: flex; justify-content: space-between; align-items: center;
padding: 1.5rem 0;
font-family: var(--font);
font-weight: 500;
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
letter-spacing: 0;
color: var(--ink-navy);
cursor: pointer;
text-align: left;
gap: 1.5rem;
}
.accordion-icon {
width: 32px; height: 32px; border-radius: 999px;
border: 1px solid var(--hairline);
display: grid; place-items: center;
flex-shrink: 0;
position: relative;
}
.accordion-icon::before, .accordion-icon::after {
content: ''; position: absolute;
background: var(--ink-navy);
transition: transform 320ms var(--ease-spring);
}
.accordion-icon::before { width: 12px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 12px; }
.accordion-item.open .accordion-icon::after { transform: rotate(90deg); }
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 480ms var(--ease-spring);
}
.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div {
overflow: hidden;
color: var(--warm-slate);
font-size: 1rem;
line-height: 1.7;
}
.accordion-panel-inner { padding-bottom: 1.5rem; max-width: 65ch; }
/* ========== Filter chips (FAQ page) ========== */
.filter-chip {
display: inline-flex; align-items: center;
background: var(--pale-sky);
color: var(--ink-navy);
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
padding: 0.55rem 1.05rem;
border-radius: 999px;
border: none;
cursor: pointer;
transition: background-color 280ms var(--ease-spring), color 280ms var(--ease-spring);
}
.filter-chip.active {
/* Toujours bleu maison : un filtre orange sur « Dental Health » lisait
comme une erreur de couleur (retour client 2026-09-03). */
background: var(--brand-blue);
color: #FFFFFF;
}
/* ========== Form inputs ========== */
.form-label {
display: block;
font-family: var(--font);
font-size: 0.8125rem; font-weight: 500;
color: var(--warm-slate);
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.form-input, .form-textarea {
width: 100%;
background: var(--off-white);
border: 1px solid var(--hairline);
border-radius: 6px;
padding: 0.85rem 1rem;
font-family: var(--font);
font-size: 1rem;
color: var(--ink-navy);
transition: border-color 280ms var(--ease-spring), box-shadow 280ms var(--ease-spring);
}
.form-input:focus, .form-textarea:focus {
outline: none;
border-color: var(--nutrika-blue);
box-shadow: 0 0 0 3px oklch(60% 0.09 245 / 0.15);
}
.form-textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
/* ========== Footer ========== */
.site-footer {
background: var(--midnight-navy);
color: var(--pale-sky);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.05;
mix-blend-mode: overlay;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 1.5fr repeat(3, 1fr);
}
}
.footer-heading {
font-family: var(--font);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: rgba(220,232,242,0.65);
margin-bottom: 1.25rem;
}
.footer-link {
display: block;
color: var(--off-white);
font-size: 0.9375rem;
padding: 0.3rem 0;
transition: color 240ms var(--ease-spring);
}
.footer-link:hover { color: #FFFFFF; }
.footer-wordmark { color: var(--off-white); }
/* ========== Dosage table & slider ========== */
.dosage-table {
background: var(--soft-cream);
border-radius: 14px;
border: 1px solid var(--hairline);
overflow: hidden;
}
.dosage-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
align-items: center;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--hairline);
transition: background-color 320ms var(--ease-spring);
font-size: 0.9375rem;
}
.dosage-row:first-child { border-top: none; }
.dosage-row.active { background: color-mix(in oklch, var(--accent) 12%, #FFFFFF); }
.dosage-row .dosage-weight { font-family: var(--font); font-weight: 700; font-size: 1.0625rem; }
.dosage-row .dosage-amount { font-family: var(--font); color: var(--midnight-navy); font-weight: 500; font-variant-numeric: tabular-nums; }
.dosage-slider {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: var(--pale-sky);
outline: none;
}
.dosage-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 24px; height: 24px;
border-radius: 999px;
background: var(--accent-deep);
cursor: pointer;
border: 3px solid var(--off-white);
box-shadow: 0 2px 8px oklch(30% 0.06 245 / 0.20);
}
.dosage-slider::-moz-range-thumb {
width: 24px; height: 24px;
border-radius: 999px;
background: var(--accent-deep);
cursor: pointer;
border: 3px solid var(--off-white);
}
/* ========== Reviews ========== */
.review-card {
background: var(--soft-cream);
border-radius: 14px;
padding: clamp(1.5rem, 2vw, 2rem);
border: 1px solid var(--hairline);
display: flex; flex-direction: column; gap: 1rem;
}
.review-stars { color: var(--accent-deep); letter-spacing: 0.1em; font-size: 0.875rem; }
.verified-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--accent);
margin-top: auto;
}
/* Scroll-snap carousel */
.carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min(85%, 420px), 1fr);
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block: 1rem;
scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
/* ========== Pairs well with cross-sell ========== */
.cross-sell {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 700px) {
.cross-sell {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.cross-sell > :nth-child(1) { transform: translateY(0); }
.cross-sell > :nth-child(2) { transform: translateY(2rem); }
.cross-sell > :nth-child(3) { transform: translateY(-1rem); }
}
.cross-sell-card {
background: var(--pale-sky);
border-radius: 18px;
padding: clamp(1.5rem, 2vw, 2rem);
display: flex; flex-direction: column; gap: 1rem;
position: relative;
overflow: hidden;
min-height: 320px;
}
/* ========== Cards (1-2-1 zigzag) ========== */
.zigzag-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 900px) {
.zigzag-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.zigzag-grid > :nth-child(1) { grid-column: span 1; transform: translateY(2rem); }
.zigzag-grid > :nth-child(2) { grid-column: span 2; }
.zigzag-grid > :nth-child(3) { grid-column: span 1; transform: translateY(2rem); }
}
/* Asymmetric 1-2 layout (Allergy benefits) */
.benefits-asym {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 900px) {
.benefits-asym {
grid-template-columns: 1.3fr 1fr;
grid-template-rows: auto auto;
gap: 1.75rem;
}
.benefits-asym > :nth-child(1) { grid-row: span 2; }
}
/* Benefit card */
.benefit-card {
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: clamp(1.75rem, 2.5vw, 2.5rem);
display: flex; flex-direction: column; gap: 1rem;
}
/* How It Works steps */
.how-steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 700px) {
.how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.how-steps { grid-template-columns: repeat(4, 1fr); }
}
.how-step {
padding-top: 1.5rem;
border-top: 2px solid rgba(255,255,255,0.32);
}
.how-step h3 {
font-family: var(--font);
font-size: 1.375rem;
font-weight: 500;
margin-top: 0;
letter-spacing: 0;
}
.how-step p { color: rgba(247,244,238,0.72); margin-top: 0.75rem; line-height: 1.6; }
/* About story blocks */
.story-block {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.story-block { grid-template-columns: 1fr 1fr; }
.story-block.reverse > :first-child { order: 2; }
}
/* Team grid */
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { display: flex; flex-direction: column; gap: 1rem; }
.team-photo {
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
background: var(--pale-sky);
position: relative;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo::after {
content: ''; position: absolute; inset: 0;
background: var(--pale-sky);
mix-blend-mode: multiply;
opacity: 0.30;
}
/* CTA band (Amazon) */
.cta-band {
/* Bande neutre (ciel pâle) : la couleur ne renvoie à aucun produit. */
background: var(--pale-sky);
position: relative;
overflow: hidden;
}
.cta-band::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.08;
mix-blend-mode: multiply;
}
/* Product page gallery */
.gallery-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.gallery-thumb {
aspect-ratio: 1 / 1;
border-radius: 8px;
background: var(--pale-sky);
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 280ms var(--ease-spring), transform 280ms var(--ease-spring);
padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.active { border-color: var(--nutrika-blue); }
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-main {
aspect-ratio: 1 / 1;
background: var(--pale-sky);
border-radius: 18px;
overflow: hidden;
position: relative;
cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--ease-spring); }
.gallery-main.zoomed img { transform: scale(1.4); cursor: zoom-out; }
/* Benefit pills */
.benefit-pill {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.8125rem; font-weight: 500;
padding: 0.5rem 0.95rem;
border-radius: 999px;
background: var(--pale-sky);
color: var(--midnight-navy);
}
/* Mobile nav drawer (simple) */
.mobile-nav {
position: fixed; inset: 0; z-index: 90;
visibility: hidden;
}
.mobile-nav.open { visibility: visible; }
.mobile-nav-backdrop {
position: absolute; inset: 0;
background: rgba(31,58,95,0.6);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 320ms var(--ease-spring);
}
.mobile-nav.open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(360px, 100%);
background: var(--soft-cream);
padding: 6rem 2rem 2rem;
transform: translateX(100%);
transition: transform 480ms var(--ease-spring);
}
.mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-link {
display: block;
font-family: var(--font);
font-size: 1.75rem;
letter-spacing: 0;
color: var(--ink-navy);
padding: 0.75rem 0;
border-bottom: 1px solid var(--hairline);
}
/* ============================================================
PRODUCT LINE-UP (home)
Hierarchy comes from layout and area, never from stretching a
card to match its neighbours' height. The lead formula gets a
full-width band with a horizontal split; the two powders sit
below as a matched pair. Same chrome throughout.
============================================================ */
.lineup {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
}
.lineup-card {
position: relative;
display: flex;
flex-direction: column;
/* Aucun écart : le rembourrage vit dans la photo et dans le bloc texte,
pour que la couleur du survol aille d'un bord à l'autre. */
gap: 0;
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: 0;
overflow: hidden;
transition: border-color 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring), transform 320ms var(--ease-spring);
}
/* The card is a link, so it may rise a touch on hover. */
.lineup-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow:
0 1px 2px oklch(30% 0.06 245 / 0.05),
0 10px 28px oklch(30% 0.06 245 / 0.08);
}
/* Au survol, le bloc texte prend la couleur de l'étiquette du produit, sous
le pot. Le rembourrage vit dans le bloc, donc la couleur file jusqu'aux bords. */
@media (hover: hover) {
.lineup-card:hover .lineup-body { background: var(--accent); }
.lineup-card:hover .lineup-name,
.lineup-card:hover .lineup-list li { color: #FFFFFF; }
.lineup-card:hover .lineup-claim { color: rgba(255, 255, 255, 0.82); }
.lineup-card:hover .lineup-form { color: rgba(255, 255, 255, 0.75); }
.lineup-card:hover .lineup-list li svg { color: #FFFFFF; }
.lineup-card:hover .btn-primary { background: #FFFFFF; color: var(--accent-deep); }
.lineup-card:hover .btn-primary:hover { background: var(--pale-sky); color: var(--accent-deep); }
.lineup-card:hover .btn-primary:focus-visible { outline-color: #FFFFFF; }
}
/* --- three equal cards, one row on desktop --- */
.lineup { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 979px) {
.lineup { grid-template-columns: 1fr 1fr; }
.lineup > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
.lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lineup-body {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
gap: 1.1rem;
padding: clamp(1.5rem, 2.2vw, 2.5rem);
transition: background-color 320ms var(--ease-spring);
}
.lineup-card .product-shot { padding: clamp(1.25rem, 2vw, 2rem); }
.lineup-name {
font-family: var(--font);
font-weight: 300;
letter-spacing: 0;
line-height: 1.08;
color: var(--ink-navy);
}
.lineup .lineup-name { font-size: clamp(1.75rem, 2.3vw, 2.125rem); }
/* One jar size for the three: nobody leads, the colour does the telling */
.lineup .product-shot img { max-width: 250px; }
/* The whole card is the link to the product page. Le bouton reste joignable
au-dessus, tout le reste passe dessous.
z-index 2 et non 1 : le pot est pose en absolu avec son propre z-index 1
(voir `.product-shot img`) et vient plus tard dans le DOM, donc a egalite
il passait devant la nappe. Cliquer sur le pot ne suivait pas le lien
(client, 2026-09-09). */
.lineup-cover { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.lineup-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lineup-card { cursor: pointer; }
.lineup-claim {
color: var(--warm-slate);
line-height: 1.65;
max-width: 48ch;
text-wrap: pretty;
}
.lineup-form {
font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--nutrika-blue);
}
.lineup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.lineup-list li {
display: grid; grid-template-columns: auto 1fr; gap: 0.7rem;
align-items: start;
font-size: 0.9375rem; line-height: 1.55; color: var(--ink-navy);
}
.lineup-list li svg { color: var(--nutrika-blue); margin-top: 0.2rem; flex-shrink: 0; }
.lineup-actions {
position: relative; z-index: 3;
margin-top: auto;
padding-top: 0.35rem;
display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
}
/* ============================================================
PRODUCT FACTS — straight off the label, so it reads as data.
============================================================ */
.facts-panel {
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: clamp(1.5rem, 2vw, 2.25rem);
}
.facts-head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 0.75rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--ink-navy);
}
.facts-row {
display: grid; grid-template-columns: 1fr auto; gap: 1.25rem;
align-items: baseline;
padding: 0.8rem 0;
border-bottom: 1px solid var(--hairline);
}
.facts-name { font-size: 0.9375rem; color: var(--ink-navy); line-height: 1.4; }
.facts-amount {
font-size: 0.9375rem; font-weight: 600;
color: var(--nutrika-blue);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.facts-note {
margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.6;
color: var(--warm-slate);
}
.facts-note strong { color: var(--ink-navy); font-weight: 600; }
/* ============================================================
TABSET — spec produit regroupé.
Rail vertical à gauche sur desktop (variance asymétrique du
DESIGN.md), rail horizontal scrollable en mobile. L'indicateur
se déplace en transform seul : jamais de width/height animée.
============================================================ */
.tabset {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 960px) {
.tabset {
grid-template-columns: minmax(210px, 260px) 1fr;
gap: clamp(2.5rem, 4vw, 4rem);
align-items: start;
}
}
/* --- rail --- */
.tabset-rail {
position: relative;
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
border-bottom: 1px solid var(--hairline);
}
.tabset-rail::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
.tabset-rail {
flex-direction: column;
gap: 0;
overflow: visible;
border-bottom: none;
border-inline-start: 1px solid var(--hairline);
position: sticky;
top: 144px;
}
}
.tabset-tab {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: block;
text-align: start;
background: none;
border: none;
cursor: pointer;
padding: 0.85rem 1.1rem;
min-height: 44px;
border-radius: 4px;
color: var(--warm-slate);
transition: color 280ms var(--ease-spring), transform 280ms var(--ease-spring);
}
@media (min-width: 960px) {
.tabset-tab { padding: 1rem 1.25rem; }
}
.tabset-tab:hover { color: var(--ink-navy); }
.tabset-tab:focus-visible {
outline: 2px solid var(--accent-deep);
outline-offset: 3px;
}
.tabset-tab .tab-name {
font-family: var(--font);
font-weight: 500;
font-size: clamp(1rem, 1.4vw, 1.1875rem);
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
}
@media (min-width: 960px) {
.tabset-tab .tab-name { white-space: normal; }
}
.tabset-tab { text-decoration: none; }
.tabset-tab[aria-current="true"] { color: var(--ink-navy); }
/* Sliding rule. Size is set instantly by JS; only transform eases. */
.tabset-indicator {
position: absolute;
background: var(--nutrika-blue);
border-radius: 2px;
transition: transform 380ms var(--ease-spring);
pointer-events: none;
}
.tabset-rail .tabset-indicator {
bottom: -1px; left: 0; height: 2px; width: 0;
}
@media (min-width: 960px) {
.tabset-rail .tabset-indicator {
bottom: auto; top: 0;
inset-inline-start: -1px;
width: 2px; height: 0;
}
}
/* --- panels --- */
.tabset-panels {
background: var(--off-white);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* Les quatre panneaux se suivent : on peut tout lire en descendant, et le
rail marque celui qu'on lit (retour client 2026-09-08). Le clic sur le
rail amene toujours au panneau, il n'y a plus rien de cache.
La marge de defilement degage l'en-tete collant et le rail. */
.tabset-panel { scroll-margin-top: clamp(110px, 12vh, 150px); }
.tabset-panel + .tabset-panel {
margin-top: clamp(2rem, 3.5vw, 3rem);
padding-top: clamp(2rem, 3.5vw, 3rem);
border-top: 1px solid var(--hairline);
}
.tabset-panel:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 6px; }
.tabset-panel-head {
margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
padding-bottom: 1rem;
border-bottom: 1px solid var(--hairline);
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: 0.75rem;
}
.tabset-panel-title {
font-family: var(--font);
font-weight: 300;
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
line-height: 1.15; letter-spacing: 0;
color: var(--ink-navy);
}
.tabset-panel-note { font-size: 0.8125rem; line-height: 1.6; color: var(--warm-slate); }
.tabset-panel-note strong { color: var(--ink-navy); font-weight: 600; }
.tabset-panel-note + .tabset-panel-note { margin-top: 0.75rem; }
/* Quality panel marks — check only, never a red cross against a rival */
.qual-list { list-style: none; margin: 0; padding: 0; }
.qual-list li {
display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
align-items: start;
padding: 0.9rem 0;
border-bottom: 1px solid var(--hairline);
}
.qual-list li:last-child { border-bottom: none; }
.qual-list svg { color: var(--nutrika-blue); margin-top: 0.15rem; }
.qual-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink-navy); }
.qual-body { font-size: 0.9375rem; line-height: 1.6; color: var(--warm-slate); margin-top: 0.2rem; }
/* ============================================================
PRODUCT SHOT — the white studio background is keyed out in the
asset itself, so the jar sits straight on the canvas with no
frame. Not a blend mode: GSAP leaves a transform on animated
wrappers, which would isolate the blend and bring the white back.
============================================================ */
.product-shot {
position: relative;
display: grid;
place-items: center;
padding: clamp(0.5rem, 2vw, 1.75rem);
margin: 0;
}
/* La photo porte son propre fond de studio et son reflet : pas de halo
derrière, il déborderait du rectangle blanc de l'image. */
.product-shot img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
max-width: 540px;
}
/* Half-width card, anywhere on the site: one jar size. */
.product-shot--sm img { max-width: 250px; }
.product-shot--sm::before { inset: 12% 14% 16%; }
/* ============================================================
HERO WITH PHOTOGRAPHIC BACKGROUND
The artwork keeps its left third empty, so the copy lives there
and the subjects stay clear on the right. A cream scrim fading
left to right guarantees text contrast at every width.
The image sits AFTER the content in the DOM: absolute on desktop
so order is irrelevant, static on mobile so it stacks below.
============================================================ */
.hero-shot {
position: relative;
overflow: hidden;
display: grid;
align-items: center;
/* Solved, not guessed: the dog's top sits at y=382 of the padded artwork
and the jar bases at y=1042, with the studio reflection running to
y=1160. Keeping the dog whole AND leaving the cut well inside the faded
reflection needs this much vertical room. Verified 1280 to 2560px:
dog never clipped, always 139px of image below the jar bases. */
min-height: clamp(660px, 49vw, 1260px);
padding-block: clamp(8.5rem, 11vw, 10.5rem) clamp(3rem, 5.5vw, 4.75rem);
}
.hero-shot-img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Right so the three jars stay whole; 80% down so the crop bites the
padded sky above and never lands near the jar bases. */
object-position: 100% 80%;
}
.hero-shot-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(96deg,
rgba(244, 246, 250, 1) 0%,
rgba(244, 246, 250, 0.92) 26%,
rgba(244, 246, 250, 0.45) 40%,
rgba(244, 246, 250, 0) 52%);
}
.hero-shot-inner { position: relative; z-index: 2; width: 100%; }
/* La colonne de texte est bornée en vw autant qu'en rem : c'est entre
1024 et 1300px que l'artwork remonte le plus à gauche, et sans cette
borne la dernière ligne du chapô et la ligne de confiance passaient
derrière le premier pot. */
/* La colonne s'arrête avant la ligne des pots, qui commence autour de 40vw
sur cet artwork — gouttière de l'écran déduite. */
.hero-shot-content {
max-width: min(33rem, calc(40vw - var(--shell-gutter) - 1.5rem));
}
.hero-shot .hero-lead { max-width: 34ch; }
/* The artwork leaves 41% of its width empty, so the copy column caps around
520px. Measured: "More tail-wagging." is 9.36em, and .hl-line spends
0.08em of the column on its reveal mask, so 3.5rem misses by half a
pixel and strands "More" alone, wrecking the couplet the line depends
on. Capped with real margin so both halves always hold one line. */
/* La colonne est bornée par la ligne des pots : le titre suit la même
mesure, sinon « Supplements for » casse en trois lignes entre 1024 et
1300px. */
.hero-shot .headline-hero {
font-size: clamp(2rem, 3.4vw, 3rem);
/* Chaque ligne du titre tient sur une ligne de 1024 à 2400px. Au-delà,
la gouttière mange la colonne : `balance` évite alors le mot orphelin. */
text-wrap: balance;
}
/* Below 1024px the photo stops being a background and stacks below the
copy. Narrower than that, the copy would need more than half the frame
and the text would sit on the dog: measured 3.8:1, under WCAG AA. */
@media (max-width: 1023px) {
.hero-shot {
display: block;
min-height: 0;
padding-block: 9rem 0;
}
.hero-shot-img {
position: static;
height: auto;
margin-top: clamp(2rem, 7vw, 3rem);
object-position: center;
}
.hero-shot-scrim { display: none; }
.hero-shot-content { max-width: none; }
}
/* ============================================================
PRODUCT STAGE — two views per product now exist, so the gallery
comes back. The stage is 4/5, exactly the lifestyle shot's ratio,
so one `contain` rule serves both: the lifestyle photo fills the
frame edge to edge, the keyed pack shot floats centred with air.
============================================================ */
/* ============================================================
PLAQUE PACK SHOT
Pas de ratio imposé : la plaque est une boîte blanche avec du
rembourrage, sa hauteur suit celle de la photo. Chaque pot a son
format, et aucun n'est ni rogné ni perdu dans du blanc.
============================================================ */
.product-stage {
display: block;
/* centrée dans sa colonne : sinon tout le jeu de la grille s'accumule
entre la plaque et la colonne d'achat */
margin-inline: auto;
max-width: 540px;
background: #FFFFFF;
border-radius: 18px;
padding: clamp(1.5rem, 3.5vw, 3rem);
}
.product-stage img {
display: block;
width: 100%;
height: auto;
}
/* Product lifestyle shots carry the real label blue, so the house Pale Sky
wash is dialled back here to keep the packaging colour honest. */
.tint-photo--product::after { opacity: 0.12; }
/* Comble le vide sous la colonne courte du bloc FAQ, en face du long
accordéon. La photo garde son ratio, elle n'est pas enfermée dans une
boîte. En pile il n'y a plus de vide, donc elle disparaît. */
.faq-shot {
margin-inline: 0;
border-radius: 14px;
overflow: hidden;
/* prend toute la hauteur que l'accordéon laisse en face */
flex: 1 1 auto;
min-height: 260px;
}
.faq-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
.faq-shot { display: none; }
}
/* ============================================================
VIDEO PLATE — silent square loop. Autoplay only happens for
viewers who have not asked for reduced motion; the others get
the poster frame and a play control.
============================================================ */
.video-plate {
position: relative;
aspect-ratio: 1 / 1;
/* Square and full width would swallow a tablet screen */
max-width: 620px;
border-radius: 18px;
overflow: hidden;
background: var(--pale-sky);
}
.video-plate video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-plate-play {
position: absolute;
inset-block-end: 1rem;
inset-inline-start: 1rem;
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border: none;
border-radius: 999px;
background: var(--off-white);
color: var(--ink-navy);
font: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 10px oklch(30% 0.06 245 / 0.18);
}
.video-plate[data-paused="true"] .video-plate-play { display: inline-flex; }
.video-plate-play:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
/* ============================================================
FULL-COLOUR BANDS
The site is built out of solid blocks of the three label
colours. A band is edge to edge, one colour, no gradient: the
colour does the work, the type sits on top of it.
============================================================ */
.band {
position: relative;
overflow: hidden;
color: var(--band-fg);
--band-fg: #FFFFFF;
--band-soft: rgba(255, 255, 255, 0.78);
--band-faint: rgba(255, 255, 255, 0.24);
}
.band-blue { background: var(--brand-blue); --band-ink: var(--brand-blue); }
.band-teal { background: var(--brand-teal); --band-ink: var(--brand-teal-deep); }
.band-orange { background: var(--brand-orange); --band-ink: var(--brand-orange-deep); }
.band-ink { background: var(--brand-blue-deep); --band-ink: var(--brand-blue-deep); }
/* Grain, so a large flat field still has a surface */
.band::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.07;
mix-blend-mode: overlay;
}
.band > * { position: relative; z-index: 1; }
.band .headline-hero,
.band .headline-h2,
.band .headline-h3,
.band .lineup-name,
.band .font-display,
.band .font-display-italic,
.band h1, .band h2, .band h3 { color: var(--band-fg); }
.band .body-lead,
.band .lineup-claim,
.band p { color: var(--band-soft); }
.band .micro-label,
.band .eyebrow { color: var(--band-soft); }
.band .eyebrow::before { background: var(--band-fg); }
.band .accent-italic { color: var(--band-fg); }
.band .trust-dot { background: var(--band-fg); opacity: 0.6; }
.band a:not(.btn-primary):not(.btn-secondary) { color: var(--band-fg); }
/* Buttons invert inside a band: white pill, band-coloured label */
.band .btn-primary {
background: var(--band-fg);
color: var(--band-ink);
}
.band .btn-primary:hover { background: var(--pale-sky); color: var(--band-ink); }
.band .btn-primary:focus-visible { outline-color: var(--band-fg); }
.band .btn-ghost { color: var(--band-fg); }
.band .btn-ghost::after { background: var(--band-fg); }
.band .btn-secondary { border-color: var(--band-faint); color: var(--band-fg); }
.band .btn-secondary:hover { border-color: var(--band-fg); }
.band .icon-btn {
border-color: var(--band-faint);
background: transparent;
color: var(--band-fg);
}
.band .icon-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--band-fg); }
/* Cards laid on a band go white, so the jar keeps a clean stage */
.band .lineup-card,
.band .review-card,
.band .facts-panel,
.band .dosage-table {
background: #FFFFFF;
border-color: rgba(255,255,255,0.001);
color: var(--ink-navy);
}
.band .lineup-card .lineup-name,
.band .review-card .font-display,
.band .lineup-card .lineup-list li { color: var(--ink-navy); }
.band .lineup-card .lineup-claim { color: var(--warm-slate); }
.band .lineup-card .lineup-form { color: var(--band-ink); }
.band .lineup-card .lineup-list li svg { color: var(--band-ink); }
.band .lineup-card .btn-primary { background: var(--band-ink); color: #FFFFFF; }
.band .lineup-card .btn-primary:hover { background: var(--ink-navy); }
.band .review-card p { color: var(--ink-navy); }
.band .review-card .review-stars { color: var(--band-ink); }
.band .review-card .verified-badge { color: var(--warm-slate); }
/* Rules and dividers inside a band */
.band .story-strip,
.band .story-strip > div { border-color: var(--band-faint); }
.band .story-icon { border-color: var(--band-faint); color: var(--band-fg); }
.band .accordion-item { border-color: var(--band-faint); }
.band .accordion-trigger { color: var(--band-fg); }
.band .accordion-panel-inner { color: var(--band-soft); }
.band .accordion-icon::before,
.band .accordion-icon::after { background: var(--band-fg); }
.band .form-input,
.band .form-textarea {
background: rgba(255,255,255,0.12);
border-color: var(--band-faint);
color: var(--band-fg);
}
.band .form-input::placeholder { color: rgba(255,255,255,0.62); }
.band .form-input:focus,
.band .form-textarea:focus { border-color: var(--band-fg); background: rgba(255,255,255,0.18); }
/* Band-wide vertical rhythm helper */
.band-pad { padding-block: clamp(4rem, 9vw, 7.5rem); }
/* ============================================================
NAV OVER A COLOUR BAND
Every page opens on a full-colour band, so the header starts
light and only takes its paper background once you scroll.
============================================================ */
.wordmark { position: relative; }
.wordmark img { transition: opacity 240ms var(--ease-spring); }
.wordmark-light { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
body.nav-on-band .nav-shell .wordmark-dark { opacity: 0; }
.wordmark-light { opacity: 0; }
body.nav-on-band .nav-shell .wordmark-light { opacity: 1; }
/* Doit porter `body.nav-on-band`, sinon la regle au-dessus, plus
specifique d'un type, garde le logo fonce a 0 une fois defile : les
deux logos etaient alors invisibles et l'en-tete blanc n'en portait
aucun. */
body.nav-on-band .nav-shell.scrolled .wordmark-dark { opacity: 1; }
.nav-shell.scrolled .wordmark-dark { opacity: 1; }
.wordmark-dark { opacity: 1; }
body.nav-on-band .nav-shell.scrolled .wordmark-light { opacity: 0; }
body.nav-on-band .nav-shell:not(.scrolled) .nav-link { color: #FFFFFF; }
body.nav-on-band .nav-shell:not(.scrolled) .nav-link::after { background: #FFFFFF; }
body.nav-on-band .nav-shell:not(.scrolled) .nav-link-active { color: #FFFFFF; }
body.nav-on-band .nav-shell:not(.scrolled) .nav-link-active::after { background: #FFFFFF; }
body.nav-on-band .nav-shell:not(.scrolled) .btn-primary { background: #FFFFFF; color: var(--brand-blue-deep); }
body.nav-on-band .nav-shell:not(.scrolled) .btn-primary:hover { background: var(--pale-sky); }
body.nav-on-band .nav-shell:not(.scrolled) .icon-btn { border-color: rgba(255,255,255,0.4); color: #FFFFFF; background: transparent; }
body.nav-on-band .nav-shell:not(.scrolled) .icon-btn:hover { background: rgba(255,255,255,0.14); border-color: #FFFFFF; }
.nav-shell.scrolled {
background: rgba(251, 252, 254, 0.86);
}
/* Page header band: the top of every inner page */
.page-band {
padding-block: clamp(10.5rem, 13vw, 12.5rem) clamp(3rem, 6vw, 5rem);
}
/* ============================================================
PAGE PRODUIT SUR UNE BANDE DE COULEUR
Aucun pot ne vit sur la couleur : seuls les blocs de texte le font.
============================================================ */
.band .review-stars { color: var(--band-fg); }
.band .benefit-pill { background: rgba(255,255,255,0.16); color: var(--band-fg); }
.band .headline-hero,
.band h1 { color: var(--band-fg); }
/* Cross-sell cards had no size of their own: the name read as body copy */
.lineup-card:has(.product-shot--sm) .lineup-name { font-size: clamp(1.5rem, 2vw, 1.875rem); }
/* Les photos de pot arrivent avec leur fond de studio ramené au blanc pur :
toute surface qui en porte une est blanche elle aussi, sinon le rectangle
de la photo se détache de la carte. */
.lineup-card,
.product-stage { background: #FFFFFF; }
/* ============================================================
HÉROS BLEU — l'artwork est lui-même sur fond bleu, donc le voile
et la typo passent en bleu et blanc plutôt qu'en papier et encre.
============================================================ */
.hero-shot--blue .hero-shot-scrim {
background: linear-gradient(96deg,
var(--brand-blue) 0%,
color-mix(in oklch, var(--brand-blue) 92%, transparent) 24%,
color-mix(in oklch, var(--brand-blue) 45%, transparent) 36%,
color-mix(in oklch, var(--brand-blue) 0%, transparent) 45%);
/* Le voile s'arrête avant le premier pot (vers 44vw) : il grisait le
pot Allergy, qui est le seul à passer sous le dégradé. */
}
.hero-shot--blue .headline-hero,
.hero-shot--blue .accent-italic { color: #FFFFFF; }
.hero-shot--blue .body-lead { color: rgba(255,255,255,0.82); }
.hero-shot--blue .eyebrow,
.hero-shot--blue .micro-label { color: rgba(255,255,255,0.78); }
.hero-shot--blue .eyebrow::before { background: #FFFFFF; }
.hero-shot--blue .trust-dot { background: #FFFFFF; opacity: 0.6; }
.hero-shot--blue .btn-primary { background: #FFFFFF; color: var(--brand-blue-deep); }
.hero-shot--blue .btn-primary:hover { background: var(--pale-sky); color: var(--brand-blue-deep); }
.hero-shot--blue .btn-primary:focus-visible { outline-color: #FFFFFF; }
.hero-shot--blue .btn-ghost { color: #FFFFFF; }
.hero-shot--blue .btn-ghost::after { background: #FFFFFF; }
/* L'artwork est en 16/9 et le héros plus large que ça : le cadrage rogne
donc en hauteur. Calé à 85 %, il mord dans le bleu au-dessus du chien et
laisse les trois pots entiers, reflet compris. */
.hero-shot--blue .hero-shot-img { object-position: 100% 85%; }
@media (max-width: 1023px) {
.hero-shot--blue .hero-shot-img { object-position: center; }
/* En pile, la copie n'est plus sur la photo : elle reprend l'encre */
.hero-shot--blue .headline-hero,
.hero-shot--blue .accent-italic { color: var(--ink-navy); }
.hero-shot--blue .body-lead { color: var(--warm-slate); }
.hero-shot--blue .eyebrow,
.hero-shot--blue .micro-label { color: var(--warm-slate); }
.hero-shot--blue .eyebrow::before { background: var(--nutrika-blue); }
.hero-shot--blue .trust-dot { background: var(--accent); opacity: 1; }
.hero-shot--blue .btn-primary { background: var(--nutrika-blue); color: #FFFFFF; }
.hero-shot--blue .btn-ghost { color: var(--ink-navy); }
.hero-shot--blue .btn-ghost::after { background: var(--accent-deep); }
}
/* Sous 1024px le héros bleu passe sous la copie : l'en-tête n'est plus sur
la couleur, il reprend donc l'encre. Les pages dont l'en-tête est une
vraie bande gardent le traitement clair à toutes les largeurs. */
@media (max-width: 1023px) {
body.nav-on-band:has(.hero-shot--blue) .nav-shell .wordmark-dark { opacity: 1; }
body.nav-on-band:has(.hero-shot--blue) .nav-shell .wordmark-light { opacity: 0; }
body.nav-on-band:has(.hero-shot--blue) .nav-shell:not(.scrolled) .nav-link,
body.nav-on-band:has(.hero-shot--blue) .nav-shell:not(.scrolled) .nav-link-active { color: var(--ink-navy); }
body.nav-on-band:has(.hero-shot--blue) .nav-shell:not(.scrolled) .nav-link::after { background: var(--nutrika-blue); }
body.nav-on-band:has(.hero-shot--blue) .nav-shell:not(.scrolled) .btn-primary { background: var(--nutrika-blue); color: #FFFFFF; }
body.nav-on-band:has(.hero-shot--blue) .nav-shell:not(.scrolled) .icon-btn {
border-color: var(--hairline); color: var(--ink-navy); background: var(--soft-cream);
}
}
/* ============================================================
BANDE COUPÉE EN DEUX — texte d'un côté, photo de l'autre.
La photo n'est pas dans une vignette : elle sort du conteneur,
prend toute la hauteur de la bande et garde son cadrage.
============================================================ */
.band-split {
display: grid;
grid-template-columns: 1fr;
}
.band-split > * { position: relative; z-index: 1; }
.band-split-copy {
padding-block: clamp(3.5rem, 8vw, 6.5rem);
padding-inline: max(1.5rem, calc((100vw - 1680px) / 2 + 1.5rem)) max(1.5rem, calc((100vw - 1680px) / 2 + 1.5rem));
display: flex;
flex-direction: column;
justify-content: center;
}
.band-split-media {
margin: 0;
position: relative;
overflow: hidden;
}
/* Sous 900px la photo se range sous le texte et reprend son ratio naturel */
.band-split-media img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 900px) {
.band-split { grid-template-columns: 1.12fr 0.88fr; align-items: stretch; }
.band-split--media-start { grid-template-columns: 0.88fr 1.12fr; }
.band-split--media-start .band-split-media { order: -1; }
.band-split-copy {
padding-inline: max(1.5rem, calc((100vw - 1680px) / 2 + 1.5rem)) clamp(2rem, 4vw, 4.5rem);
}
.band-split--media-start .band-split-copy {
padding-inline: clamp(2rem, 4vw, 4.5rem) max(1.5rem, calc((100vw - 1680px) / 2 + 1.5rem));
}
.band-split-media {
/* la photo tient toute la hauteur de la bande, quelle que soit la copie */
min-height: clamp(420px, 40vw, 680px);
}
.band-split-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* `contain`, pas `cover` : le chien reste entier. Le vide autour de la
photo est du bleu de marque, exactement celui de son propre fond,
donc il ne se voit pas. */
object-fit: contain;
object-position: right bottom;
}
}
/* Photo qui déborde d'un seul côté, à son ratio naturel */
.bleed-end {
margin-inline-end: calc(-1 * max(1.5rem, (100vw - 1680px) / 2 + 1.5rem));
}
.bleed-end img { display: block; width: 100%; height: auto; }
/* Photo posée à son ratio d'origine, sans boîte imposée */
.photo-natural { margin: 0; border-radius: 14px; overflow: hidden; }
.photo-natural img { display: block; width: 100%; height: auto; }
/* ============================================================
CARTES CÔTE À CÔTE — les trois pots n'ont pas le même format,
donc la zone photo est cadrée à hauteur fixe. Sans ça, le bloc
texte démarre plus haut dans une carte que dans l'autre et la
couleur du survol n'a pas la même hauteur d'une carte à l'autre.
============================================================ */
.lineup .product-shot,
.lineup-card .product-shot--sm {
position: relative;
/* hauteur fixe, pas un ratio : la boîte ne suit pas la largeur de la
carte, elle reste à la taille du pot */
height: clamp(200px, 19vw, 260px);
padding: 0;
}
/* Le pot est posé en absolu : sinon sa hauteur intrinsèque l'emporte sur
le ratio de la boîte et les deux cartes repartent en décalé. */
.lineup .product-shot img,
.lineup-card .product-shot--sm img {
position: absolute;
inset: clamp(0.75rem, 1.4vw, 1.25rem);
margin: auto;
width: auto;
height: auto;
max-width: 250px;
max-height: 100%;
object-fit: contain;
}
/* La carte porte sa propre couleur produit : on redéclare le jeton ici,
sinon celui du body l'emporte et tous les boutons repartent en bleu. */
.lineup-card { --nutrika-blue: var(--accent); }
/* ============================================================
EN-TÊTE DE FICHE PRODUIT — la bande porte la couleur du produit,
la plaque photo reste blanche : les pack shots arrivent avec leur
fond de studio, ils ne peuvent pas vivre sur la couleur.
============================================================ */
.product-band {
padding-block: clamp(9.5rem, 12vw, 11.5rem) clamp(3rem, 7vw, 6rem);
}
.band .product-stage {
background: #FFFFFF;
box-shadow: none;
}
/* Le « + » du logo clair est orange : sur une bande orange il disparaît.
Sur ces pages-là, le logo passe donc en blanc plein. */
body:has(.band-orange.page-band) .nav-shell .wordmark-light,
body:has(.band-orange.product-band) .nav-shell .wordmark-light {
filter: brightness(0) invert(1);
}
/* ============================================================
AVIS EN ATTENTE
Tant qu'il n'y a pas de vrais avis, tout ce qui en montre est
masqué : la bande témoignages de l'accueil, la section « What
owners are saying » des trois fiches, et la ligne d'étoiles des
colonnes d'achat. Le balisage reste en place.
Pour les réactiver : supprimer cette seule règle.
============================================================ */
[data-reviews] { display: none !important; }
/* ============================================================
GOUTTIÈRE UNIQUE
Tout le site s'aligne sur le même bord : barre de navigation,
héros, sections. Un conteneur centré plus étroit que l'artwork
du héros — lui plein cadre et calé à droite — faisait paraître
toute la page poussée vers la droite sur un grand écran.
Les composants qui ne doivent pas s'étirer se bornent eux-mêmes.
============================================================ */
.shell-wide {
width: 100%;
max-width: 2200px;
margin-inline: auto;
padding-inline: var(--shell-gutter);
}
/* ==========================================================================
Products menu in the desktop nav. The three products were only reachable
through the "Shop Now" buttons, which nobody read as "go to the product
page". Now they hang off "Products", one line each, with the label colour.
========================================================================== */
.nav-item.has-menu { position: relative; }
.nav-menu {
position: absolute; top: 100%; left: 50%;
padding-top: 0.9rem;
transform: translate(-50%, 6px);
opacity: 0; visibility: hidden;
transition: opacity 220ms var(--ease-spring), transform 220ms var(--ease-spring), visibility 0s linear 220ms;
z-index: 60;
}
.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu {
opacity: 1; visibility: visible;
transform: translate(-50%, 0);
transition-delay: 0s;
}
.nav-menu-panel {
list-style: none; margin: 0; padding: 0.5rem;
min-width: 19.5rem;
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 14px;
box-shadow:
0 1px 2px oklch(30% 0.06 245 / 0.06),
0 12px 32px oklch(30% 0.06 245 / 0.12);
}
.nav-menu-link {
display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center;
padding: 0.7rem 0.9rem;
border-radius: 10px;
color: var(--ink-navy);
transition: background-color 200ms var(--ease-spring);
}
.nav-menu-link:hover,
.nav-menu-link:focus-visible { background: var(--pale-sky); outline: none; }
.nav-menu-dot { width: 12px; height: 12px; border-radius: 50%; display: block; }
.nav-menu-name { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.2; }
.nav-menu-sub { display: block; font-size: 0.75rem; color: var(--warm-slate); margin-top: 0.2rem; line-height: 1.3; }
/* About: the four proof points */
.proof-grid {
display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 640px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof-card {
background: var(--soft-cream);
border: 1px solid var(--hairline);
border-radius: 14px;
padding: clamp(1.5rem, 2.2vw, 2rem);
}
/* About: the block that still needs the client's real content */
.todo-note {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
padding: 1rem 1.25rem;
border: 1px dashed var(--brand-orange);
border-radius: 10px;
background: color-mix(in oklch, var(--brand-orange) 6%, var(--soft-cream));
color: var(--ink-navy);
font-size: 0.9375rem; line-height: 1.6;
max-width: 62ch;
}
.todo-note strong { color: var(--brand-orange-deep); font-weight: 600; }
.team-photo--placeholder {
display: grid; place-items: center;
background: var(--pale-sky);
color: var(--warm-slate);
font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
/* ============================================================
HOW TO GIVE IT — retour client 2026-09-03 : « comment le donner au
chien concrètement ? ». Une section visible sur chaque fiche produit,
photo + trois gestes + la dose par gabarit, hors onglet.
============================================================ */
.serve-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
@media (min-width: 1024px) { .serve-grid { grid-template-columns: 1fr 1fr; } }
.serve-photo {
margin: 0;
aspect-ratio: 4 / 3;
border-radius: 14px;
overflow: hidden;
background: var(--pale-sky);
display: grid; place-items: center;
color: var(--warm-slate);
font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
text-align: center; padding: 1rem;
}
.serve-photo:has(img) { padding: 0; }
.serve-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.serve-steps {
list-style: none; margin: 2rem 0 0; padding: 0;
counter-reset: serve;
display: grid; gap: 0.75rem;
}
.serve-steps li {
counter-increment: serve;
display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start;
padding-top: 1rem; border-top: 1px solid var(--hairline);
}
.serve-steps li::before {
content: counter(serve, decimal-leading-zero);
font-weight: 300; font-size: 1.5rem; line-height: 1.1;
color: var(--accent); font-variant-numeric: tabular-nums;
}
.serve-steps strong { display: block; font-weight: 700; font-size: 1.0625rem; color: var(--ink-navy); }
.serve-steps span { display: block; grid-column: 2; margin-top: 0.25rem; color: var(--warm-slate); line-height: 1.6; font-size: 0.9375rem; max-width: 46ch; }
.serve-dose {
margin-top: 2rem;
border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
background: var(--soft-cream); font-size: 0.9375rem;
}
.serve-dose > div {
display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1rem;
padding: 0.85rem 1.25rem; border-top: 1px solid var(--hairline);
}
.serve-dose > div:first-child {
border-top: none; background: var(--pale-sky);
font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
color: var(--warm-slate);
}
.serve-dose b { font-weight: 700; color: var(--ink-navy); }
.serve-dose em { font-style: normal; color: var(--warm-slate); }
.serve-dose i { font-style: normal; font-weight: 500; color: var(--ink-navy); font-variant-numeric: tabular-nums; }
.serve-note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--warm-slate); line-height: 1.6; max-width: 52ch; }
/* ============================================================
THE DAILY BOWL (accueil) — trois gestes, un par produit, vers le bloc
« How to give it » de chaque fiche. Paper, jamais de couleur produit.
============================================================ */
.bowl-strip { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .bowl-strip { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.bowl-item {
display: flex; flex-direction: column;
background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 14px;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
color: var(--ink-navy); text-decoration: none;
transition: border-color 280ms var(--ease-spring), transform 280ms var(--ease-spring);
}
.bowl-item:hover { border-color: var(--brand-blue); transform: translateY(-2px); }
.bowl-item:focus-visible { outline: 2px solid var(--brand-blue-deep); outline-offset: 3px; }
.bowl-icon {
width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
border: 1px solid var(--pale-sky); color: var(--brand-blue); margin-bottom: 1.5rem;
}
.bowl-item .micro-label { color: var(--warm-slate); }
.bowl-item h3 { font-family: var(--font); font-weight: 700; font-size: 1.1875rem; margin-top: 0.5rem; letter-spacing: 0; line-height: 1.3; }
.bowl-item p { margin-top: 0.75rem; color: var(--warm-slate); line-height: 1.6; font-size: 0.9375rem; flex: 1; }
.bowl-link { margin-top: 1.5rem; font-weight: 500; font-size: 0.9375rem; color: var(--brand-blue); display: inline-flex; gap: 0.4rem; }
.bowl-link .arrow { transition: transform 280ms var(--ease-spring); }
.bowl-item:hover .bowl-link .arrow { transform: translateX(4px); }
/* Variante photo réelle de la bande fendue : `cover`, la photo remplit la
colonne au lieu de flotter sur le bleu (portrait studio). */
@media (min-width: 900px) {
.band-split-media--cover img { object-fit: cover; object-position: 50% 30%; }
}
/* ============================================================
PAGES LEGALES — une seule colonne de texte, mesure courte, la
hierarchie tient au poids et a l'espace, comme le reste du site.
============================================================ */
.legal-prose { max-width: 68ch; }
.legal-prose h2 {
font-family: var(--font);
font-weight: 300;
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
line-height: 1.25;
letter-spacing: 0;
color: var(--ink-navy);
margin-top: clamp(2.75rem, 5vw, 3.75rem);
padding-top: 1.75rem;
border-top: 1px solid var(--hairline);
}
.legal-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-prose h3 {
font-family: var(--font);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0;
color: var(--ink-navy);
margin-top: 1.75rem;
}
.legal-prose p,
.legal-prose li { color: var(--warm-slate); line-height: 1.75; font-size: 0.9375rem; }
.legal-prose p { margin-top: 1.125rem; }
.legal-prose ul { margin-top: 1.125rem; padding-left: 1.25rem; list-style: none; }
.legal-prose li { position: relative; margin-top: 0.75rem; padding-left: 0.5rem; }
.legal-prose li::before {
content: ''; position: absolute; left: -0.75rem; top: 0.7em;
width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
}
.legal-prose strong { color: var(--ink-navy); font-weight: 700; }
.legal-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--accent-deep); }
/* ============================================================
BANDE VISUELLE — un artwork pleine largeur qui porte deja son
titre. Difference avec `.band` : pas de couleur a plat, donc pas
de grain non plus (le grain est fait pour un aplat, pas pour une
photo), et aucune copie posee par-dessus.
============================================================ */
.band-shot {
display: block;
position: relative;
/* Le ratio de l'artwork : sur un ecran plus large que ses 1983px,
`cover` mord les cotes plutot que d'agrandir et d'adoucir. */
aspect-ratio: 1983 / 793;
max-height: 793px;
overflow: hidden;
/* Le bleu (ou le teal) du bas de l'artwork, releve dessus et pose en
ligne sur chaque bande, et non le --brand-blue : sous 768px le bouton
se pose sur un prolongement de cette bande, et la couleur de marque,
plus sombre, y faisait une couture visible. */
background: var(--band-shot-bg, #003C9B);
}
.band-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 640ms var(--ease-spring);
}
.band-shot:hover img { transform: scale(1.015); }
.band-shot:focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: -3px;
}
/* La bande est un lien : il lui faut une prise visible. Le bouton se
pose sur le bleu vide du coin, jamais sur le pot ni sur le chien. */
.band-shot-cta {
position: absolute;
left: var(--shell-gutter);
bottom: clamp(1.25rem, 3vw, 2.25rem);
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.6rem;
border-radius: 999px;
background: #FFFFFF;
color: var(--brand-blue-deep);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.005em;
transition: background-color 280ms var(--ease-spring), transform 280ms var(--ease-spring);
}
.band-shot:hover .band-shot-cta { transform: translateY(-2px); }
.band-shot .arrow, .band-shot-cta svg { transition: transform 280ms var(--ease-spring); }
.band-shot:hover .band-shot-cta svg { transform: translateX(3px); }
/* ------------------------------------------------------------
SLIDER DE BANDES
Deux artworks dans le meme cadre. Le rail est le seul element
qui bouge, en `transform` : rien de la mise en page ne s'anime.
Les deux bandes tiennent le meme ratio, donc le cadre ne saute
pas d'une diapositive a l'autre.
------------------------------------------------------------ */
.band-slider {
position: relative;
overflow: hidden;
}
.band-slider-track {
display: flex;
will-change: transform;
transition: transform 720ms var(--ease-spring);
}
.band-slider-track > .band-shot {
flex: 0 0 100%;
min-width: 0;
}
/* Pendant qu'on repositionne le rail sans animation (retour de la
derniere a la premiere), on coupe la transition. */
.band-slider-track[data-jump] { transition: none; }
.band-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 46px;
height: 46px;
border-radius: 999px;
display: grid;
place-items: center;
cursor: pointer;
color: var(--ink-navy);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background-color 240ms var(--ease-spring), transform 240ms var(--ease-spring);
}
.band-slider-arrow--prev { inset-inline-start: clamp(0.75rem, 2vw, 1.75rem); }
.band-slider-arrow--next { inset-inline-end: clamp(0.75rem, 2vw, 1.75rem); }
.band-slider-arrow:hover { background: #FFFFFF; }
.band-slider-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.band-slider-arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.band-slider-arrow:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
/* Sous 768px, 2,5:1 donne une bande de 150px : le titre de l'artwork
tomberait a 14px. On garde une hauteur lisible et on cadre a droite,
sur le chien et le titre. Le pot sort du cadre — il est a un tap de
la, sur la page qu'ouvre la bande.
Le bouton descend sous l'image, sur un prolongement du bleu de
l'artwork : a cette hauteur le titre occupe la moitie basse et le
bouton lui passait dessus. */
@media (max-width: 767px) {
.band-shot {
aspect-ratio: auto;
max-height: none;
height: auto;
padding-bottom: clamp(1.25rem, 5vw, 1.75rem);
text-align: center;
}
.band-shot img {
height: clamp(230px, 62vw, 320px);
object-position: 100% 50%;
}
.band-shot-cta {
position: static;
display: inline-flex;
margin-top: clamp(1.25rem, 5vw, 1.75rem);
}
.band-shot:hover .band-shot-cta { transform: none; }
/* Le bloc porte maintenant une bande de couleur sous l'image : les
fleches se calent sur le milieu de l'image, pas du bloc. */
.band-slider-arrow {
top: calc(clamp(230px, 62vw, 320px) / 2);
width: 40px;
height: 40px;
}
}