/* ============================================================ BRVM HORIZON — Design System "Dark Fintech" (réf. Revolut) v1.0 — CSS pur, aucune dépendance, compatible : • pages HTML autonomes de public/ • composants React + Tailwind (via tailwind.config.js) Police : General Sans (Fontshare, gratuite) ≈ Aeonik de Revolut ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Surfaces — noir absolu type OLED, jamais de gris "bleuté" */ --bg: #07070C; /* plus tout a fait noir : la nappe respire */ --bg-soft: #101018; --surface: #16161A; /* cartes, groupes de lignes */ --surface-2: #202024; /* lignes internes, champs */ --surface-3: #2C2C31; /* boutons ronds, chips */ --hairline: rgba(255,255,255,.08); --hairline-2: rgba(255,255,255,.14); --scrim: rgba(0,0,0,.55); /* Texte — 3 niveaux, jamais plus */ --text: #FFFFFF; --text-2: rgba(255,255,255,.62); --text-3: rgba(255,255,255,.38); /* Marque — dégradé carte (magenta → indigo). Remplace ces 3 valeurs par tes couleurs BRVM Horizon pour t'approprier le système. */ --brand-a: #E1379E; --brand-b: #2F3CF2; --brand-deep: #6E0B3B; --brand: #4E5BFF; /* accent d'action (liens, focus) */ /* Sémantique marché */ --up: #0FCE84; --up-soft: rgba(15,206,132,.14); --down: #F6465D; --down-soft: rgba(246,70,93,.14); --warn: #FFB020; /* Pastilles de catégorie (icônes rondes colorées) */ --cat-orange: #FF7A1A; --cat-violet: #6E5BFF; --cat-blue: #2E7BFF; --cat-pink: #E1379E; --cat-teal: #14B8C4; /* Rayons */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 999px; /* Espacements — grille 4pt */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --gutter: 20px; /* Typo */ --font: 'General Sans', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --tracking-display: -.035em; --tracking-title: -.02em; /* Élévation — très discrète, l'app repose sur le contraste, pas l'ombre */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 12px 32px rgba(0,0,0,.55); --ease: cubic-bezier(.22,.61,.36,1); --dur: 220ms; } /* ---------- 1bis. TEINTES DE PAGE ---------- Chaque page porte sa propre lueur glacee, comme les ecrans de Revolut : une nappe coloree diffuse en haut, qui s'eteint vers le noir. On la declare sur le : La couleur ne sert qu'a identifier la page. Elle ne porte jamais d'information : le vert et le rouge restent reserves aux variations de cours. */ :root { --teinte-a: #4E3AE0; /* nappe principale, en haut a gauche */ --teinte-b: #1B2B8F; /* nappe secondaire, en haut a droite */ --teinte-force: .95; /* intensite globale */ } /* Une teinte par section du site. Les valeurs sont choisies pour que deux pages voisines dans la navigation ne se ressemblent pas : le bleu-cyan du marche et le bleu profond des SGI etaient trop proches, d'ou le violet retenu pour le club. Le vert et le rouge restent hors de cette palette : ils sont reserves aux variations de cours, et un fond vert sur une page de portefeuille laisserait croire a une hausse. club violet-indigo BRVM Club, cours, analyses sgi bleu profond module SGI, comptes-titres academie or-violet formation, guide, lexique marketplace orange-magenta services partenaires espace emeraude-bleu profil, alertes, portefeuille partenaires magenta-violet parrainage, influenceurs accueil indigo accueil, dashboard, bienvenue marche bleu-cyan en reserve sobre aucune nappe pages legales, impression */ [data-teinte="club"] { --teinte-a: #7E4CFF; --teinte-b: #2E48DC; } [data-teinte="portefeuille"] { --teinte-a: #7E4CFF; --teinte-b: #2E48DC; } [data-teinte="marche"] { --teinte-a: #2B82FF; --teinte-b: #14B8CE; } [data-teinte="academie"] { --teinte-a: #E0A431; --teinte-b: #8E4CD8; } [data-teinte="espace"] { --teinte-a: #17A882; --teinte-b: #2775C6; } [data-teinte="partenaires"] { --teinte-a: #DE3F9B; --teinte-b: #6F3ADC; } [data-teinte="sgi"] { --teinte-a: #2C63C6; --teinte-b: #1B4C92; } [data-teinte="marketplace"] { --teinte-a: #EA7433; --teinte-b: #A23BB8; } [data-teinte="accueil"] { --teinte-a: #4E3AE0; --teinte-b: #1B2B8F; } [data-teinte="sobre"] { --teinte-force: 0; } /* Deux nappes fixes : une forte en haut, une seconde plus diffuse qui couvre toute la hauteur. La page n'est jamais noire de bout en bout, c'est ce qui distingue un ecran Revolut d'un simple fond sombre. */ .rv::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 74vh; z-index: 0; pointer-events: none; opacity: var(--teinte-force); background: radial-gradient(125% 82% at 6% -10%, var(--teinte-a) 0%, transparent 64%), radial-gradient(125% 82% at 98% -16%, var(--teinte-b) 0%, transparent 62%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 52%, rgba(0,0,0,.28) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 52%, rgba(0,0,0,.28) 100%); filter: blur(56px) saturate(126%); transition: opacity .6s var(--ease); } .rv::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(var(--teinte-force) * .72); background: radial-gradient(90% 55% at 88% 42%, var(--teinte-b) 0%, transparent 66%), radial-gradient(95% 60% at 4% 82%, var(--teinte-a) 0%, transparent 68%); filter: blur(80px) saturate(120%); transition: opacity .6s var(--ease); } /* Tout le contenu passe devant la nappe */ .rv > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .rv::before { transition: none; } } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.rv { margin: 0; background: var(--bg); isolation: isolate; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; letter-spacing: -.01em; font-weight: 450; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rv img { max-width: 100%; display: block; } .rv button, .rv input, .rv select, .rv textarea { font: inherit; color: inherit; } :where(.rv) :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } /* ---------- 3. TYPOGRAPHIE ---------- */ .rv-display { /* titre d'écran marketing, 2 lignes max */ font-size: clamp(34px, 8.5vw, 52px); line-height: 1.02; letter-spacing: var(--tracking-display); font-weight: 600; margin: 0; text-wrap: balance; } .rv-h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; margin: 0; } .rv-h2 { font-size: 22px; line-height: 1.18; letter-spacing: var(--tracking-title); font-weight: 600; margin: 0; } .rv-h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; margin: 0; } .rv-lead { font-size: 17px; line-height: 1.4; color: var(--text-2); font-weight: 450; margin: 0; } .rv-body { font-size: 15px; line-height: 1.45; margin: 0; } .rv-caption { font-size: 13px; line-height: 1.35; color: var(--text-2); margin: 0; } .rv-eyebrow { font-size: 12px; font-weight: 550; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0; } /* Montant : signature Revolut — décimales en petit, chiffres tabulaires */ .rv-amount { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 1px; } .rv-amount--lg { font-size: 56px; } .rv-amount--sm { font-size: 26px; } .rv-amount__dec { font-size: .52em; font-weight: 600; letter-spacing: -.02em; } .rv-amount__cur { font-size: .46em; font-weight: 550; color: var(--text-2); margin-left: .18em; } /* Variation cours */ .rv-delta { font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; } .rv-delta--up { color: var(--up); } .rv-delta--down { color: var(--down); } .rv-delta__badge { padding: 3px 8px; border-radius: var(--r-full); font-size: 13px; } .rv-delta--up .rv-delta__badge { background: var(--up-soft); } .rv-delta--down .rv-delta__badge { background: var(--down-soft); } /* ---------- 4. STRUCTURE ---------- */ .rv-page { max-width: 480px; margin-inline: auto; padding: 0 var(--gutter) var(--s10); } .rv-page--wide { max-width: 1120px; } .rv-stack > * + * { margin-top: var(--s4); } .rv-stack-lg > * + * { margin-top: var(--s7); } .rv-section { padding-block: var(--s8); } .rv-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); } /* En-tête d'écran marketing (visuels 1 à 10) */ .rv-screenhead { text-align: center; padding: var(--s8) var(--s2) var(--s6); } .rv-screenhead .rv-lead { margin-top: var(--s4); } /* ---------- 5. HERO SOLDE ---------- */ .rv-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--s8) var(--s5) var(--s6); background: var(--surface); isolation: isolate; } .rv-hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: -2; } .rv-hero::after { /* voile pour lisibilité du solde */ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.85) 100%); } .rv-hero--brand { background: linear-gradient(155deg, var(--brand-a) 0%, var(--brand-b) 78%); } .rv-hero--brand::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35) 100%); } .rv-hero__label { font-size: 14px; color: rgba(255,255,255,.78); margin: 0 0 var(--s2); } /* ---------- 6. BOUTONS ---------- */ .rv-btn { --btn-bg: var(--surface-3); --btn-fg: var(--text); appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--r-full); padding: 14px 24px; font-size: 15px; font-weight: 550; letter-spacing: -.01em; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease); } .rv-btn:hover { filter: brightness(1.14); } .rv-btn:active { transform: scale(.97); } .rv-btn--primary { --btn-bg: var(--text); --btn-fg: #000; } .rv-btn--brand { --btn-fg: #fff; background: linear-gradient(120deg, var(--brand-a), var(--brand-b)); } .rv-btn--ghost { --btn-bg: transparent; box-shadow: inset 0 0 0 1px var(--hairline-2); } .rv-btn--block { display: flex; width: 100%; } .rv-btn--lg { padding: 17px 28px; font-size: 16px; } .rv-btn[disabled]{ opacity: .4; pointer-events: none; } /* Pastille discrète "Comptes" sous le solde */ .rv-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); color: #fff; border: 0; cursor: pointer; padding: 9px 18px; border-radius: var(--r-full); font-size: 14px; font-weight: 500; } .rv-pill:hover { background: rgba(255,255,255,.24); } /* Rangée d'actions rondes — signature de l'app */ .rv-actions { display: flex; justify-content: center; align-items: flex-start; gap: var(--s6); padding: var(--s6) 0 var(--s2); } .rv-action { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 68px; color: inherit; } .rv-action__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .rv-action:hover .rv-action__icon { background: #3A3A40; } .rv-action:active .rv-action__icon { transform: scale(.93); } .rv-action__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; } .rv-action__label { font-size: 13px; font-weight: 500; letter-spacing: -.01em; } /* ---------- 7. CARTES & LISTES ---------- */ .rv-card { background: var(--surface); border-radius: var(--r-md); padding: var(--s4); } .rv-card--flush { padding: var(--s2); } .rv-card--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); } .rv-list { display: flex; flex-direction: column; } .rv-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); text-decoration: none; color: inherit; cursor: pointer; transition: background var(--dur) var(--ease); } .rv-row:hover { background: var(--surface-2); } .rv-row__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 15px; font-weight: 600; letter-spacing: -.02em; } .rv-row__icon--orange { background: var(--cat-orange); } .rv-row__icon--violet { background: var(--cat-violet); } .rv-row__icon--blue { background: var(--cat-blue); } .rv-row__icon--pink { background: var(--cat-pink); } .rv-row__icon--teal { background: var(--cat-teal); } .rv-row__body { flex: 1 1 auto; min-width: 0; } .rv-row__title { font-size: 15px; font-weight: 550; letter-spacing: -.015em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-row__sub { font-size: 13px; color: var(--text-2); margin: 2px 0 0; } .rv-row__end { flex: 0 0 auto; text-align: right; } .rv-row__value { font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; margin: 0; } .rv-row__chevron { flex: 0 0 auto; color: var(--text-3); } .rv-row + .rv-row { box-shadow: inset 0 1px 0 var(--hairline); } .rv-list--sep .rv-row + .rv-row { box-shadow: none; } .rv-list--sep .rv-row { margin-top: var(--s1); } /* Ligne d'automatisation avec pastille verte de statut */ .rv-check { position: relative; } .rv-check::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--surface); } /* ---------- 8. CONTRÔLES ---------- */ /* Segmenté Achat / Vente */ .rv-segment { display: inline-flex; background: var(--surface-2); border-radius: var(--r-full); padding: 4px; gap: 2px; } .rv-segment__item { border: 0; background: transparent; cursor: pointer; color: var(--text-2); padding: 11px 26px; border-radius: var(--r-full); font-size: 15px; font-weight: 550; letter-spacing: -.015em; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .rv-segment__item[aria-selected="true"] { background: var(--up-soft); color: var(--up); } .rv-segment__item--sell[aria-selected="true"] { background: var(--down-soft); color: var(--down); } .rv-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3); border: 0; cursor: pointer; padding: 9px 14px; border-radius: var(--r-full); font-size: 14px; font-weight: 550; } .rv-chip__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-a); } /* Champ de saisie type montant */ .rv-field { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s3) var(--s4); } .rv-field__label { font-size: 13px; color: var(--text-2); margin: 0 0 2px; } .rv-field__input { width: 100%; border: 0; background: transparent; padding: 0; font-size: 24px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .rv-field__input:focus { outline: none; } .rv-fieldgroup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } /* Slider de quantité */ .rv-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-full); background: var(--surface-3); } .rv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 18px 4px rgba(255,176,32,.55); } .rv-slider::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; } /* ---------- 9. CARTE BANCAIRE / VISUEL MARQUE ---------- */ .rv-bankcard { aspect-ratio: 1.586; border-radius: var(--r-md); background: radial-gradient(120% 90% at 8% 12%, var(--brand-deep) 0%, transparent 42%), linear-gradient(150deg, var(--brand-a) 6%, var(--brand-b) 76%); box-shadow: var(--shadow-2); position: relative; overflow: hidden; padding: var(--s5); } .rv-bankcard::before { /* reflet oblique */ content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.28) 0%, transparent 26%); } .rv-bankcard__brand { font-size: 22px; font-weight: 600; letter-spacing: -.03em; position: absolute; top: var(--s5); right: var(--s5); } .rv-bankcard__chip { position: absolute; left: 12%; bottom: 26%; width: 46px; height: 34px; border-radius: 6px; background: linear-gradient(160deg, #E8E2CE, #B9B09A); } /* ---------- 10. GRAPHIQUE ---------- */ .rv-chart { background: var(--surface); border-radius: var(--r-md); padding: var(--s4); } .rv-chart__grid line { stroke: var(--hairline); stroke-width: 1; } .rv-chart__line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .rv-chart__area { fill: url(#rvFade); } .rv-chart__tag { display: inline-block; background: var(--down); color: #fff; padding: 4px 9px; border-radius: var(--r-xs); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .rv-stats { display: flex; gap: var(--s6); overflow-x: auto; scrollbar-width: none; } .rv-stats::-webkit-scrollbar { display: none; } .rv-stat__value { font-size: 19px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; } .rv-stat__label { font-size: 13px; color: var(--text-2); margin: 2px 0 0; white-space: nowrap; } /* ---------- 11. BANDEAU DE PREUVE (récompenses / presse) ---------- */ .rv-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); text-align: center; padding-block: var(--s6); } .rv-proof--3 { grid-template-columns: repeat(3, 1fr); } .rv-proof__logo { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 var(--s2); } .rv-proof__text { font-size: 13px; line-height: 1.3; color: var(--text-2); margin: 0; } /* ---------- 12. MENTIONS LÉGALES (pied d'écran) ---------- */ .rv-legal { border-top: 1px solid var(--hairline); margin-top: var(--s7); padding: var(--s4) var(--s2) var(--s6); font-size: 11.5px; line-height: 1.4; color: var(--text-3); text-align: center; text-wrap: pretty; } .rv-legal a { color: var(--text-2); } /* ---------- 13. NAVIGATION BASSE ---------- */ .rv-tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; width: 100%; max-width: 480px; margin-inline: auto; display: flex; justify-content: space-around; background: rgba(8,8,10,.88); backdrop-filter: blur(20px); border-top: 1px solid var(--hairline); padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); } .rv-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer; color: var(--text-3); padding: var(--s2) var(--s3); font-size: 11px; font-weight: 500; text-decoration: none; } .rv-tab:hover { color: var(--text-2); } .rv-tab[aria-current="page"] { color: var(--text); } .rv-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; } /* ---------- 14. FEUILLE MODALE ---------- */ .rv-sheet { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s3) var(--s5) var(--s7); box-shadow: var(--shadow-2); } .rv-sheet__grabber { width: 38px; height: 4px; border-radius: var(--r-full); background: var(--hairline-2); margin: 0 auto var(--s5); } /* ---------- 15. ÉTATS ---------- */ .rv-empty { text-align: center; padding: var(--s9) var(--s5); } .rv-empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto var(--s4); } .rv-skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: rv-shimmer 1.4s infinite linear; border-radius: var(--r-xs); } @keyframes rv-shimmer { to { background-position: -200% 0; } } /* ---------- 16. QUALITÉ ---------- */ @media (prefers-reduced-motion: reduce) { .rv *, .rv *::before, .rv *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media (min-width: 768px) { :root { --gutter: 24px; } }