/*
* ═══════════════════════════════════════════════════════════════
* DealDiali — Design System CSS v1.1
* dealdiali.com · April 2026
*
* HOW TO USE
* ──────────
* Import once at the top of BaseLayout.astro:
*
*
* Or link in :
*
*
* RULES
* ─────
* - Never hardcode hex values in component files — use var(--token)
* - Never add a third font family
* - Green (#27AE60) is reserved for success/Gratuit only
* - All interactive elements need touch-action: manipulation
* - Input font-size must be 16px minimum on mobile (iOS zoom)
* ═══════════════════════════════════════════════════════════════
*/
/* ── Self-hosted fonts ───────────────────────────────────────── */
/* Download .woff2 files from google-webfonts-helper.herokuapp.com */
/* Upload to public/fonts/ on the server */
@font-face {
font-family: "Syne";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("/fonts/syne-700.woff2") format("woff2");
}
@font-face {
font-family: "Syne";
font-weight: 800;
font-style: normal;
font-display: swap;
src: url("/fonts/syne-800.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-weight: 600;
font-style: normal;
font-display: swap;
src: url("/fonts/inter-600.woff2") format("woff2");
}
/* ═══════════════════════════════════════════════════════════════
* DESIGN TOKENS — :root
* ═══════════════════════════════════════════════════════════════ */
:root {
/* ── Font families ─────────────────────────────────────────── */
--font-display: "Syne", sans-serif; /* H1, H2, hero, wordmark */
--font-body: "Inter", sans-serif; /* body, nav, buttons, labels */
/* ── Primary colors ────────────────────────────────────────── */
--color-primary: #C0392B; /* terracotta — CTAs, header bg */
--color-primary-dark: #A93226; /* hover state for primary */
--color-accent: #F5A623; /* orange — badges, savings, stars */
--color-accent-light: #FDE8BC; /* accent background tint */
/* ── Text colors ───────────────────────────────────────────── */
--color-text-primary: #1A2332; /* headlines, nav, main text */
--color-text-secondary: #2C3E50; /* sub-headings, captions */
--color-text-body: #333333; /* paragraph body copy */
--color-text-muted: #666666; /* meta, timestamps, placeholders */
--color-text-disabled: #AAAAAA; /* disabled, inactive, bottom nav */
--color-text-on-primary: #FFFFFF; /* text on terracotta/dark bg */
/* ── Background & surface ──────────────────────────────────── */
--color-bg: #F5F0EB; /* page background — warm cream */
--color-bg-alt: #EDE8E1; /* alternating sections, card hover */
--color-surface: #FFFFFF; /* cards, modals, inputs */
--color-bg-subtle: #F8F8F8; /* table rows, code blocks */
--color-border: #EEEEEE; /* all borders and dividers */
/* ── Status colors ─────────────────────────────────────────── */
/* Green is ONLY for Gratuit badges and savings confirmation */
--color-success: #27AE60;
--color-success-light: #D5F5E3;
--color-danger: #E74C3C;
--color-danger-light: #FADBD8;
--color-warning: #F5A623; /* same as accent */
/* ── Type scale (desktop) ──────────────────────────────────── */
--text-hero: 3rem; /* 48px — homepage H1 */
--text-h1: 2rem; /* 32px — page titles */
--text-h2: 1.5rem; /* 24px — section headings */
--text-h3: 1.25rem; /* 20px — card titles */
--text-body-lg: 1.125rem; /* 18px — lead paragraphs */
--text-body: 1rem; /* 16px — standard body */
--text-sm: 0.875rem; /* 14px — captions, timestamps */
--text-xs: 0.75rem; /* 12px — badges, labels — minimum */
/* ── Line height ───────────────────────────────────────────── */
--leading-display: 1.1;
--leading-body: 1.5;
--leading-loose: 1.75;
/* ── Spacing (8px grid) ────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Border radius ─────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ── Shadows ───────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
/* ── Z-index scale ─────────────────────────────────────────── */
--z-base: 0;
--z-raised: 10;
--z-dropdown:100;
--z-sticky: 200;
--z-header: 500;
--z-bottomnav: 1000;
--z-drawer: 2000;
--z-modal: 3000;
--z-toast: 4000;
/* ── Layout ────────────────────────────────────────────────── */
--max-width: 1280px;
--header-height: 60px; /* desktop header */
--header-mobile: 52px; /* mobile header */
--bottomnav-h: 56px; /* mobile bottom nav */
}
/* ═══════════════════════════════════════════════════════════════
* GLOBAL RESET & BASE
* ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: var(--leading-body);
color: var(--color-text-body);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ── Eliminate tap delay on all interactive elements ─────────── */
a, button, .btn, [role="button"], label {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
color: var(--color-primary-dark);
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
/* ── Layout container ────────────────────────────────────────── */
.page-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* ── Section helpers ─────────────────────────────────────────── */
.section {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
.section--hero {
padding-top: var(--space-20);
padding-bottom: var(--space-20);
}
/* ═══════════════════════════════════════════════════════════════
* TYPOGRAPHY
* ═══════════════════════════════════════════════════════════════ */
h1, h2 {
font-family: var(--font-display);
line-height: var(--leading-display);
color: var(--color-text-primary);
}
h3, h4, h5, h6 {
font-family: var(--font-body);
font-weight: 600;
line-height: 1.3;
color: var(--color-text-primary);
}
h1 { font-size: var(--text-h1); font-weight: 700; }
h2 { font-size: var(--text-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); }
.text-hero {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 800;
line-height: var(--leading-display);
}
p {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-body);
}
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semi { font-weight: 600; }
.font-bold { font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════
* BUTTONS
* ═══════════════════════════════════════════════════════════════ */
.btn {
font-family: var(--font-body);
font-weight: 600;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
white-space: nowrap;
text-decoration: none;
line-height: 1;
position: relative;
}
/* Sizes */
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-md { height: 40px; padding: 0 20px; font-size: 15px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
/* Primary */
.btn-primary {
background: var(--color-primary);
color: var(--color-text-on-primary);
border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-primary:active { transform: scale(0.97); }
/* Secondary */
.btn-secondary {
background: var(--color-surface);
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-bg); }
.btn-secondary:active { transform: scale(0.97); }
/* Ghost */
.btn-ghost {
background: transparent;
color: var(--color-text-primary);
border-color: transparent;
}
.btn-ghost:hover { background: var(--color-bg-alt); }
.btn-ghost:active { transform: scale(0.97); }
/* Danger */
.btn-danger {
background: var(--color-danger);
color: #fff;
border-color: var(--color-danger);
}
.btn-danger:hover { background: #C0392B; border-color: #C0392B; }
.btn-danger:active { transform: scale(0.97); }
/* Success */
.btn-success {
background: var(--color-success);
color: #fff;
border-color: var(--color-success);
}
.btn-success:hover { background: #219A52; border-color: #219A52; }
.btn-success:active { transform: scale(0.97); }
/* Focus — visible for keyboard navigation */
.btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* Transitions — wrapped in prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
.btn {
transition: background 0.15s ease,
border-color 0.15s ease,
transform 0.1s ease;
}
}
/* ═══════════════════════════════════════════════════════════════
* BADGES & TAGS
* ═══════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-sm);
line-height: 1;
white-space: nowrap;
}
.badge-hot { background: var(--color-accent); color: var(--color-text-primary); }
.badge-verified { background: var(--color-success); color: #fff; }
.badge-free { background: var(--color-success); color: #fff; }
.badge-expiring { background: var(--color-danger); color: #fff; }
.badge-cold { background: var(--color-text-disabled); color: #fff; }
.badge-new { background: var(--color-primary); color: #fff; }
.badge-staff { background: var(--color-text-primary); color: var(--color-accent); }
.badge-savings { background: var(--color-accent-light); color: #A93226; }
/* ═══════════════════════════════════════════════════════════════
* FORM ELEMENTS
* ═══════════════════════════════════════════════════════════════ */
.form-label {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
height: 40px;
padding: 0 14px;
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
color: var(--color-text-body);
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.form-textarea {
height: auto;
min-height: 100px;
padding: 12px 14px;
resize: vertical;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-disabled);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
border-color: var(--color-danger);
}
.form-input.is-error:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}
.form-error {
font-size: 13px;
color: var(--color-danger);
margin-top: 4px;
}
.form-helper {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
.form-row {
display: flex;
gap: var(--space-4);
}
.form-group {
display: flex;
flex-direction: column;
flex: 1;
}
/* ═══════════════════════════════════════════════════════════════
* CARDS
* ═══════════════════════════════════════════════════════════════ */
.card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
}
/* Deal card */
.deal-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
text-decoration: none;
color: inherit;
}
.deal-card__badges {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
margin-bottom: var(--space-2);
}
.deal-card__image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.deal-card__store {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.deal-card__title {
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.4;
margin-bottom: var(--space-2);
}
.deal-card__price {
font-size: var(--text-h3);
font-weight: 700;
color: var(--color-primary);
}
.deal-card__original-price {
font-size: var(--text-sm);
color: var(--color-text-disabled);
text-decoration: line-through;
margin-left: var(--space-2);
}
.deal-card__actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.deals-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-6);
}
@media (prefers-reduced-motion: no-preference) {
.deal-card {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.deal-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
}
/* ═══════════════════════════════════════════════════════════════
* BOTTOM NAVIGATION — Mobile only
* ═══════════════════════════════════════════════════════════════ */
.bottom-nav {
display: none; /* hidden on desktop */
}
/* ═══════════════════════════════════════════════════════════════
* iOS SAFE AREA — applies on all sizes, used on mobile
* ═══════════════════════════════════════════════════════════════ */
.site-header {
padding-top: env(safe-area-inset-top);
}
/* main padding-top is NOT needed — #dd-header-wrap is position:sticky (in flow) */
.drawer {
height: 100dvh;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* ═══════════════════════════════════════════════════════════════
* MOBILE OVERRIDES — max-width: 767px
* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── Responsive type scale ─────────────────────────────────── */
:root {
--text-hero: 2rem; /* desktop: 3rem */
--text-h1: 1.5rem; /* desktop: 2rem */
--text-h2: 1.25rem; /* desktop: 1.5rem */
--text-h3: 1.125rem; /* desktop: 1.25rem */
--text-body-lg: 1rem; /* desktop: 1.125rem */
--leading-body: 1.65;
--leading-display: 1.2;
}
/* ── Layout ────────────────────────────────────────────────── */
.page-container {
padding-left: var(--space-4);
padding-right: var(--space-4);
max-width: 100%;
}
.section {
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.section--hero {
padding-top: var(--space-10);
padding-bottom: var(--space-10);
}
/* ── Deals grid: single column ─────────────────────────────── */
.deals-grid {
grid-template-columns: 1fr;
gap: var(--space-3);
}
/* ── Deal card: horizontal layout ──────────────────────────── */
.deal-card {
flex-direction: row;
align-items: flex-start;
padding: var(--space-3);
gap: var(--space-3);
}
.deal-card__image {
width: 80px;
height: 80px;
aspect-ratio: 1;
flex-shrink: 0;
margin-bottom: 0;
}
.deal-card__content {
flex: 1;
min-width: 0; /* prevents text overflow */
display: flex;
flex-direction: column;
gap: 4px;
}
.deal-card__title {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.deal-card__price {
font-size: 16px;
}
/* WhatsApp share: icon only on mobile */
.btn-whatsapp .btn-label {
display: none;
}
/* ── Touch targets: 44px minimum ───────────────────────────── */
.btn {
min-height: 44px;
}
.btn-sm {
min-height: 44px;
padding: 0 14px;
}
/* Expand tap area invisibly beyond visual bounds */
.btn::after,
.nav-link::after,
.icon-btn::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
min-width: 44px;
min-height: 44px;
}
.nav-link,
.icon-btn,
.vote-btn,
.bottom-nav-item {
position: relative;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
cursor: pointer;
}
/* ── Forms ─────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
height: 48px;
font-size: 16px; /* NEVER below 16px — prevents iOS auto-zoom */
}
.form-textarea {
height: auto;
}
.form-row {
flex-direction: column;
}
.form-submit,
.btn-submit {
width: 100%;
}
/* ── iOS safe area — bottom nav is position:fixed so needs offset ─────── */
main {
padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}
/* ── Bottom navigation ─────────────────────────────────────── */
.bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bottomnav-h);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
z-index: var(--z-bottomnav);
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-text-disabled);
text-decoration: none;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
gap: 2px;
border-top: 2px solid transparent;
}
.bottom-nav-item.active,
.bottom-nav-item:hover {
color: var(--color-primary);
border-top-color: var(--color-primary);
}
.bottom-nav-item svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
@media (prefers-reduced-motion: no-preference) {
.bottom-nav-item {
transition: color 0.15s ease, border-color 0.15s ease;
}
}
/* ── Mobile header ─────────────────────────────────────────── */
.site-header {
height: var(--header-mobile);
padding-top: env(safe-area-inset-top);
}
/* Hide desktop nav links in header on mobile */
.header-nav-links {
display: none;
}
/* Show hamburger button on mobile */
.header-hamburger {
display: flex;
}
/* ── Scroll behavior: native momentum on mobile ────────────── */
html {
scroll-behavior: auto;
}
.scroll-container {
-webkit-overflow-scrolling: touch;
}
}
/* ═══════════════════════════════════════════════════════════════
* UTILITIES
* ═══════════════════════════════════════════════════════════════ */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }
.hidden { display: none; }
/* ── Bard (cold vote) score display ──────────────────────────── */
.bard-score {
color: #64B5F6;
font-size: 11px !important;
}
/* ────────────────────────────────────────────────────────────── */
/* ── Forum widget ─────────────────────────────────────────────── */
.forum-block { margin-bottom: 4px; }
.forum-block-label {
font-size: 13px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 10px;
}
.forum-threads {
display: flex;
flex-direction: column;
gap: 6px;
}
.forum-thread-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
text-decoration: none;
color: #1A2332;
transition: border-color .15s, background .15s;
}
.forum-thread-row:hover {
border-color: var(--color-primary);
background: #fff8f7;
}
.ft-body { flex: 1; min-width: 0; }
.ft-title {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1A2332;
}
.ft-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.ft-replies, .ft-views, .ft-time {
font-size: 11px;
color: var(--color-text-muted);
}
.ft-arrow {
font-size: 14px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.forum-empty {
font-size: 13px;
color: var(--color-text-muted);
padding: 12px 0;
display: flex;
gap: 6px;
align-items: center;
}
.forum-empty a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.forum-cta-btn {
display: inline-block;
padding: 9px 18px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: opacity .15s;
}
.forum-cta-btn:hover { opacity: .88; }
/* ────────────────────────────────────────────────────────────── */
/*
* ═══════════════════════════════════════════════════════════════
* DealDiali Design System v1.1
* dealdiali.com · April 2026 · Confidential
* ═══════════════════════════════════════════════════════════════
*/