/* ============================================================ NIPPA — nippa.css v1.0 Feuille de style de marque : variables + composants de base. Importer Google Fonts dans le : Archivo (ital, 800) · Inter (400,500,600) · JetBrains Mono (400,500) ============================================================ */ :root { /* Couleurs */ --nippa-encre: #16181D; --nippa-vermillon: #F5401E; --nippa-vermillon-hover: #D8340F; --nippa-brume: #E6E8E7; --nippa-asphalte: #3A3F47; --nippa-citron: #FFD84D; /* sécurité uniquement */ --nippa-blanc: #FFFFFF; --nippa-succes: #0F7B3D; --nippa-erreur: #B3261E; --nippa-bordure: #D2D5D4; /* Typo */ --nippa-font-display: 'Archivo', sans-serif; --nippa-font-body: 'Inter', system-ui, sans-serif; --nippa-font-data: 'JetBrains Mono', monospace; /* Signature */ --nippa-skew: -9deg; /* Espacement (base 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; } /* ---------- Base ---------- */ body.nippa { font-family: var(--nippa-font-body); background: var(--nippa-brume); color: var(--nippa-encre); line-height: 1.6; font-size: 16px; margin: 0; } .nippa ::selection { background: var(--nippa-vermillon); color: var(--nippa-blanc); } /* ---------- Titres ---------- */ .nippa-h1, .nippa-h2 { font-family: var(--nippa-font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; margin: 0; } .nippa-h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.0; } .nippa-h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.05; } .nippa-h3 { font-family: var(--nippa-font-display); font-weight: 700; font-style: normal; font-size: 21px; line-height: 1.2; margin: 0; } .nippa-data { font-family: var(--nippa-font-data); } /* Le A vermillon du logotype */ .nippa-wordmark { font-family: var(--nippa-font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.02em; } .nippa-wordmark .a { color: var(--nippa-vermillon); } /* ---------- Boutons (radius 0, incliné -9°, texte contre-incliné) ---------- */ .nippa-btn { display: inline-block; font-family: var(--nippa-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; font-size: 15px; padding: 14px 26px; border: none; border-radius: 0; cursor: pointer; transform: skewX(var(--nippa-skew)); transition: background .15s ease; } .nippa-btn > span { display: inline-block; transform: skewX(calc(var(--nippa-skew) * -1)); } .nippa-btn:focus-visible { outline: 3px solid var(--nippa-citron); outline-offset: 2px; } .nippa-btn--primary { background: var(--nippa-vermillon); color: var(--nippa-blanc); } .nippa-btn--primary:hover { background: var(--nippa-vermillon-hover); } .nippa-btn--secondary { background: transparent; color: var(--nippa-encre); box-shadow: inset 0 0 0 2px var(--nippa-encre); } .nippa-btn--dark { background: var(--nippa-encre); color: var(--nippa-blanc); } /* Règle : un seul .nippa-btn--primary par écran. */ /* ---------- Carte de trajet (droite, jamais inclinée) ---------- */ .nippa-ride-card { background: var(--nippa-blanc); border-left: 3px solid var(--nippa-vermillon); padding: 12px 14px; font-size: 14px; } .nippa-ride-card b { display: block; font-size: 15px; } .nippa-ride-card .price { font-family: var(--nippa-font-data); font-weight: 500; float: right; } /* ---------- Champs ---------- */ .nippa-input { font-family: var(--nippa-font-body); font-size: 15px; background: var(--nippa-blanc); border: 1px solid var(--nippa-bordure); border-radius: 0; padding: 12px 14px; width: 100%; color: var(--nippa-encre); } .nippa-input:focus-visible { outline: 3px solid var(--nippa-citron); outline-offset: 1px; border-color: var(--nippa-encre); } /* ---------- Bande signature inclinée ---------- */ .nippa-stripe { height: 10px; background: var(--nippa-vermillon); transform: skewX(var(--nippa-skew)); } /* ---------- Alertes ---------- */ .nippa-alert { padding: 12px 16px; border-left: 3px solid; font-size: 14px; background: var(--nippa-blanc); } .nippa-alert--securite { border-color: var(--nippa-citron); background: #FFF8E1; } .nippa-alert--erreur { border-color: var(--nippa-erreur); background: #F9ECEB; } .nippa-alert--succes { border-color: var(--nippa-succes); background: #EAF5EE; } @media (prefers-reduced-motion: reduce) { .nippa * { transition: none !important; animation: none !important; } }