/* ArtGreenTech — Design system fintech sobre ------------------------------------------------ Deux chartes chromatiques officielles, basculées via data-theme sur (cf. theme.js). ------------------------------------------------ */ /* ---- Icônes Lucide (SVG injecté via ) ---- */ [data-lucide], .lucide { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke-width: 1.75; } /* ---- Tokens partagés (non thématisés) ---- */ :root { --ink: #0F172A; --ink-soft: #334155; --muted: #64748B; --line: #E2E8F0; --line-soft: #F1F5F9; --success: #059669; --success-light: #ECFDF5; --danger: #DC2626; --warning: #D97706; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); } /* ============================================================ CHARTE OFFICIELLE — ÉMERAUDE PROFONDE Cœur #0F766E · Profond #022C22 · Soft #ECFDF5 · Accent or antique #B89047 Charte unique retenue par le client (l'ancienne palette bleue a été retirée). ============================================================ */ :root { --bg: #FFFFFF; --bg-alt: #F8F7F2; /* ivoire chaud */ --bg-soft: #EFEDE5; --primary: #0F766E; --primary-rgb: 15, 118, 110; /* pour rgba(var(--primary-rgb), alpha) */ --primary-deep: #022C22; --primary-light: #ECFDF5; --primary-dark: #1C1B17; --accent: #B89047; /* or antique */ --accent-light: #F5E6C8; --ink: #1C1B17; /* encre chaude */ /* Dérivés teintés vert (focus + relief des CTA) */ --ring: 0 0 0 3px rgba(var(--primary-rgb), 0.20); --shadow-primary: 0 10px 24px rgba(var(--primary-rgb), 0.24), 0 2px 6px rgba(var(--primary-rgb), 0.16); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* les ancres ne passent plus sous la nav sticky */ } body { background: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Sélection de texte teintée charte */ ::selection { background: var(--primary-light); color: var(--primary-deep); } /* Focus clavier visible et cohérent (accessibilité) */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } a:focus-visible, .btn:focus-visible { box-shadow: var(--ring); } /* Respect des préférences de mouvement réduit */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* TYPOGRAPHIE */ .display, .serif { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; } .eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); padding: 5px 10px; background: var(--primary-light); border-radius: 6px; } .eyebrow.muted { color: var(--muted); background: var(--bg-soft); } .section-title { font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); } /* LAYOUT */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; } @media (max-width: 768px) { .container, .container-narrow { padding: 0 20px; } } /* NAV */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 8px 24px -16px rgba(15, 23, 42, 0.18); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1400px; margin: 0 auto; } .logo { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; } .logo-mark { width: 30px; height: 30px; background: transparent; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.95rem; font-weight: 700; overflow: hidden; } .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .logo-dot { display: none; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.15s; } .nav-links a:hover { color: var(--primary); } @media (max-width: 820px) { .nav-links a:not(.btn):not(.user-chip) { display: none; } } /* BOUTONS */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 0.9rem; font-weight: 600; border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all 0.15s; font-family: inherit; white-space: nowrap; } .btn-primary { background: var(--primary) !important; color: white !important; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-deep) !important; color: white !important; box-shadow: var(--shadow-primary); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-accent { background: var(--primary) !important; color: white !important; box-shadow: var(--shadow-sm); } .btn-accent:hover { background: var(--primary-deep) !important; color: white !important; } .banner-cta .btn-primary, .final-cta-box .btn-primary { background: white !important; color: var(--ink) !important; } .banner-cta .btn-primary:hover, .final-cta-box .btn-primary:hover { background: var(--primary) !important; color: white !important; } .btn-ghost { background: white; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-light); } .btn-dark { background: var(--ink); color: white; } .btn-dark:hover { background: var(--primary-dark); } .btn-lg { padding: 14px 24px; font-size: 0.95rem; } .btn-arrow::after { content: '→'; transition: transform 0.2s; font-weight: 400; } .btn-arrow:hover::after { transform: translateX(3px); } /* CARDS CAMPAGNES */ .campaign-card { display: block; text-decoration: none; color: inherit; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all 0.2s; } .campaign-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .campaign-cover { width: 100%; aspect-ratio: 16/10; background: var(--bg-soft); object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .campaign-card:hover .campaign-cover { transform: scale(1.04); } .campaign-cover-tall { aspect-ratio: 3/4; } .campaign-cover-wide { aspect-ratio: 16/9; } .campaign-body { padding: 20px; } .campaign-meta { display: flex; gap: 10px; align-items: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; } .campaign-cat { color: var(--primary); font-weight: 600; background: var(--primary-light); padding: 3px 8px; border-radius: 4px; } .campaign-title { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 6px; color: var(--ink); } .campaign-title-lg { font-size: 1.4rem; } .campaign-by { font-size: 0.85rem; color: var(--muted); } /* PROGRESS BAR */ .progress { margin-top: 16px; } .progress-bar { height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-deep) 100%); border-radius: 999px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .progress-fill.full { background: linear-gradient(90deg, var(--success) 0%, #047857 100%); } .progress-stats { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 0.85rem; } .progress-stats strong { font-weight: 700; font-size: 0.95rem; color: var(--ink); } .progress-stats .raised { color: var(--ink-soft); } .progress-stats .goal { color: var(--muted); font-weight: 600; } /* SECTIONS */ .section { padding: 88px 0; } .section-alt { background: var(--bg-alt); } .section-tight { padding: 56px 0; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 32px; } .section-head .right { max-width: 400px; } /* DIVIDERS */ .divider { height: 1px; background: var(--line); border: none; margin: 0; } /* TAGS */ .tag { display: inline-block; padding: 4px 10px; font-size: 0.75rem; font-weight: 500; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); } /* FOOTER */ .footer { background: var(--ink); color: white; padding: 72px 0 28px; margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer h4 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; color: rgba(255, 255, 255, 0.5); } .footer ul { list-style: none; } .footer ul li { margin-bottom: 10px; } .footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.9rem; transition: color 0.15s; } .footer a:hover { color: var(--primary); } .footer-baseline { display: flex; justify-content: space-between; padding-top: 28px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); } .footer-logo { font-size: 1.4rem; color: white; margin-bottom: 14px; font-weight: 700; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; } .footer-logo .logo-mark { background: var(--primary); } .footer-tagline { font-size: 0.9rem; opacity: 0.7; max-width: 320px; line-height: 1.6; } /* UTIL */ .flex { display: flex; } .grid { display: grid; } .text-muted { color: var(--muted); } .text-primary { color: var(--primary); } .text-success { color: var(--success); } .text-center { text-align: center; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } /* ANIMATIONS */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .delay-1 { animation-delay: 0.08s; } .delay-2 { animation-delay: 0.16s; } .delay-3 { animation-delay: 0.24s; } /* TRUST BADGES (réutilisable) */ .trust-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 32px; color: var(--muted); font-size: 0.82rem; } .trust-row .item { display: inline-flex; align-items: center; gap: 6px; } .trust-row .item::before { content: '✓'; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--success-light); color: var(--success); border-radius: 50%; font-size: 0.7rem; font-weight: 700; } /* ============================================================ SOCLE PARTAGÉ — ajouts design (se propage sur tout le site) Sélecteurs d'éléments à faible spécificité : les styles propres à chaque page restent prioritaires. ============================================================ */ /* ---- Formulaires : base cohérente sur toutes les pages ---- :where() = spécificité nulle → toute règle propre à une page (bordure, rayon, padding, focus) reste prioritaire. La base ne comble que ce que la page ne définit pas. ---- */ :where(input, select, textarea) { font-family: inherit; font-size: 0.95rem; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background: #fff; border: 1px solid var(--line); border-radius: 9px; } :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: #CBD5C7; } :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14); } :where(input, textarea)::placeholder { color: #9AA3AF; } :where(input, select, textarea):disabled { background: var(--bg-soft); color: var(--muted); cursor: not-allowed; } :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; } /* Chevron de select homogène (remplace la flèche native disparate) */ :where(select) { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } /* ---- Carte générique réutilisable ---- */ .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } .card-pad { padding: 24px; } /* ---- Badges de statut (dashboards, admin, listes) ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-success { color: var(--success); background: var(--success-light); border-color: rgba(5,150,105,0.18); } .badge-warning { color: var(--warning); background: #FEF3E2; border-color: rgba(217,119,6,0.18); } .badge-danger { color: var(--danger); background: #FEE2E2; border-color: rgba(220,38,38,0.18); } .badge-info { color: var(--primary); background: var(--primary-light); border-color: rgba(var(--primary-rgb),0.18); } .badge-neutral { color: var(--muted); background: var(--bg-soft); border-color: var(--line); } /* ---- Liens de contenu : soulignement discret au survol ---- */ .link { color: var(--primary); text-decoration: none; font-weight: 600; text-underline-offset: 3px; } .link:hover { text-decoration: underline; } /* ---- Sécurité média ---- */ img, svg, video { max-width: 100%; } /* ---- Cartes de vrais projets (rendu dynamique campagnes-render.js) ---- */ .agt-card { display: flex; flex-direction: column; } .agt-cover-wrap { position: relative; overflow: hidden; } .agt-source { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(4px); color: var(--ink); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); } .campaign-resume { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .agt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .agt-obj { font-size: 0.85rem; font-weight: 700; color: var(--ink); } .agt-live { font-size: 0.82rem; font-weight: 600; color: var(--primary); white-space: nowrap; transition: transform 0.15s; } .agt-card:hover .agt-live { transform: translateX(3px); } /* Bandeau « mis à jour » au-dessus des grilles de vrais projets */ .agt-maj-note { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--muted); background: var(--primary-light); border: 1px solid rgba(var(--primary-rgb), 0.18); padding: 6px 12px; border-radius: 999px; } .agt-maj-note strong { color: var(--primary-deep); font-weight: 700; } .agt-maj-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; box-shadow: 0 0 0 3px var(--success-light); } /* ---- Espace porteur : interactions communes aux 9 dashboards ---- Classes définies localement dans chaque page (sans :hover) : ces règles les complètent sans entrer en conflit. ---- */ .kpi-card { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); } .campaign-row { transition: box-shadow 0.18s, border-color 0.18s; } .campaign-row:hover { box-shadow: var(--shadow-md); border-color: var(--primary); } /* Survol de lignes de tableau (transactions, contributeurs, paiements…) */ :where(tbody tr) { transition: background 0.12s; } :where(tbody tr):hover { background: var(--bg-alt); }