/** * /assets/css/landing-da.css * Nouvelle direction artistique Gallinoo — appliquée à toutes les pages publiques. * Chargée après /assets/css/style.css pour overrider les tokens et la typo. * Scope : uniquement quand la classe `landing-da` est sur , ou par défaut si pas marqué. */ @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@400;500;600;700&display=swap'); :root { /* Tokens DA landing */ --da-cream: #faf1e1; --da-cream-2: #f5ead5; --da-beige: #ebddc4; --da-brown-1: #6b5a48; --da-brown-2: #4a3a2a; --da-brown-3: #2a1f15; --da-cuivre: #c8644a; --da-cuivre-deep: #a04828; --da-teal: #5a8a86; --da-teal-deep: #3d6b68; --da-ambre: #f0c880; --da-ambre-deep: #c89040; --da-vert: #8ab090; --da-shadow-sm: 0 4px 12px rgba(74, 58, 42, 0.08); --da-shadow-md: 0 12px 28px rgba(74, 58, 42, 0.14); /* Override des tokens principaux utilisés par style.css + autres pages */ --accent: #c8644a; --accent-dark: #a04828; --accent-teal: #5a8a86; --accent-2: #c8644a; --bg: #faf1e1; --bg-alt: #f5ead5; --bg-card: #ffffff; --text-dark: #2a1f15; --text-mid: #4a3a2a; --text-light: #6b5a48; --border: rgba(74, 58, 42, 0.12); --gold: #c89040; --brown: #6b5a48; } body.landing-page, body:not(.app-page) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; color: var(--text-dark); background: var(--da-cream); -webkit-font-smoothing: antialiased; } body:not(.app-page) h1, body:not(.app-page) h2, body:not(.app-page) h3, body:not(.app-page) h4 { font-family: 'Merriweather', Georgia, serif !important; font-weight: 700; letter-spacing: -0.02em; color: var(--da-brown-3); } body:not(.app-page) em { font-style: italic; color: var(--da-cuivre); } /* ═══ Boutons ═══ */ body:not(.app-page) .btn-cta, body:not(.app-page) .btn-primary, body:not(.app-page) .final-btn, body:not(.app-page) .pcard-btn, body:not(.app-page) .hero-cta { background: linear-gradient(135deg, var(--da-cuivre), var(--da-cuivre-deep)) !important; color: #fff !important; border: none !important; padding: 14px 28px; border-radius: 14px; font-family: 'Inter', sans-serif; font-weight: 700; box-shadow: 0 10px 26px rgba(200, 100, 74, 0.35); transition: transform .2s, box-shadow .2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } body:not(.app-page) .btn-cta:hover, body:not(.app-page) .btn-primary:hover, body:not(.app-page) .final-btn:hover, body:not(.app-page) .pcard-btn:hover, body:not(.app-page) .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(200, 100, 74, 0.45); } body:not(.app-page) .btn-outline { background: #fff; color: var(--da-brown-2); border: 1.5px solid var(--border); padding: 12px 24px; border-radius: 14px; font-weight: 600; transition: all .2s; } body:not(.app-page) .btn-outline:hover { border-color: var(--da-cuivre); color: var(--da-cuivre); } /* ═══ Cards ═══ */ body:not(.app-page) .card, body:not(.app-page) .race-card, body:not(.app-page) .stat-card, body:not(.app-page) .pcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; transition: transform .3s, box-shadow .3s; } body:not(.app-page) .card:hover, body:not(.app-page) .race-card:hover, body:not(.app-page) .stat-card:hover { transform: translateY(-2px); box-shadow: var(--da-shadow-md); } /* ═══ Inputs ═══ */ body:not(.app-page) .input-field, body:not(.app-page) input[type="text"]:not(.landing-nav input), body:not(.app-page) input[type="email"]:not(.landing-nav input), body:not(.app-page) input[type="number"]:not(.landing-nav input), body:not(.app-page) select:not(.landing-nav select), body:not(.app-page) textarea { background: #fff; border: 1px solid rgba(74, 58, 42, 0.2); border-radius: 10px; padding: 11px 14px; font-size: 15px; color: var(--da-brown-3); font-family: 'Inter', sans-serif; transition: border-color .2s, box-shadow .2s; } body:not(.app-page) .input-field:focus, body:not(.app-page) input:focus:not(.landing-nav input), body:not(.app-page) select:focus:not(.landing-nav select), body:not(.app-page) textarea:focus { outline: none; border-color: var(--da-cuivre); box-shadow: 0 0 0 3px rgba(200, 100, 74, 0.12); } /* ═══ Liens de contenu ═══ */ body:not(.app-page) .content a, body:not(.app-page) article a, body:not(.app-page) p > a { color: var(--da-cuivre); border-bottom: 1px solid rgba(200, 100, 74, 0.25); transition: border-color .2s; } body:not(.app-page) .content a:hover { border-color: var(--da-cuivre); } /* ═══ Sections ═══ */ body:not(.app-page) .hero-section, body:not(.app-page) .hero, body:not(.app-page) header.hero { background: linear-gradient(180deg, #2a4a5e 0%, #4a7896 25%, #c89968 55%, #b87545 75%, #5d3418 100%) !important; color: #fff; } body:not(.app-page) .hero-section h1, body:not(.app-page) .hero h1 { color: #fff !important; } body:not(.app-page) .hero-section em, body:not(.app-page) .hero em { color: var(--da-ambre) !important; } /* ═══ Sections alternatives (beige/cream) ═══ */ body:not(.app-page) section.alt, body:not(.app-page) .content-section.alt, body:not(.app-page) .section-alt { background: var(--da-beige) !important; } /* ═══ Section title-sm et eyebrows ═══ */ body:not(.app-page) .section-title-sm, body:not(.app-page) .section-eyebrow { color: var(--da-teal) !important; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; font-size: 12px; } /* ═══ Listes ═══ */ body:not(.app-page) .content ul li { color: var(--da-brown-1); } /* ═══ Quiz/hero modal cleanups ═══ */ body:not(.app-page) .quiz-page { background: var(--da-cream) !important; } /* ═══ Footer déjà géré par landing-footer.php (brown-3 bg) — pas besoin d'override ═══ */ /* ═══ Marketplace : sombrer les cards en beige chaleureux ═══ */ body:not(.app-page) .marketplace-card, body:not(.app-page) .annonce-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; } /* ═══ Blog : harmonisation cards ═══ */ body:not(.app-page) .blog-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } /* ═══ Dark mode désactivé sur les pages publiques (DA warm only) ═══ */ html[data-theme="dark"] body:not(.app-page) { background: var(--da-cream) !important; color: var(--text-dark) !important; }