/* ===================================================================== pavapi.com — page vitrine. Réutilise les jetons de assets/css/app.css ; n'ajoute que ce que la vitrine a en propre. ===================================================================== */ .site{overflow-x:hidden;} /* ---------- en-tête ---------- */ .site-nav{ position:sticky; top:0; z-index:60; background:rgba(20,17,15,0.72); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; } .site-nav.scrolled{border-bottom-color:var(--line); background:rgba(20,17,15,0.92);} .site-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;} .site-links{display:flex; gap:30px; font-size:.88rem; color:var(--paper-dim);} .site-links a{text-decoration:none;} .site-links a:hover{color:var(--paper);} @media(max-width:860px){ .site-links{display:none;} } /* ---------- hero ---------- */ /* Titre centré au-dessus, puis une rangée où la planète — grande — occupe le milieu de l'écran, avec les deux chiffres qui comptent posés à sa droite. Colonnes symétriques (1fr / auto / 1fr) : la première reste vide exprès, pour que la planète se retrouve au centre plutôt que poussée par le contenu de la colonne de droite. */ .hero-globe{ position:relative; border-top:none; padding:56px 0; } .hero-copy{ max-width:60ch; margin:0 auto; text-align:center; } .hero-kicker{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.76rem; color:var(--paper-dim); border:1px solid var(--line-strong); border-radius:999px; padding:7px 15px; margin-bottom:26px; background:rgba(28,24,21,.6); backdrop-filter:blur(6px); } h1.site-head{ font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.05; letter-spacing:-0.02em; margin:0 0 26px; max-width:20ch; margin-inline:auto; } h1.site-head em{font-style:italic; font-weight:400; color:var(--gold);} .site-cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center;} .btn-lg{padding:15px 28px; font-size:.98rem; border-radius:10px;} .hero-stage-row{ display:grid; /* Un plancher sur les colonnes de chiffres : sans lui, la colonne centrale (dimensionnée sur le contenu de la planète, pas sur l'espace restant) pouvait réclamer sa pleine largeur en `vw` et écraser les deux 1fr à rien — un bug qui ne se voyait qu'aux largeurs de bureau courantes (~1000-1400px), jamais en plein écran sur un grand moniteur. */ grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr); align-items:center; gap:32px; margin-top:20px; } @media(max-width:980px){ /* Les deux chiffres passent au-dessus de la planète, empilés pleine largeur — sinon, empilés après un globe qui occupe une bonne partie de l'écran, ils se perdent en bas de page et on croit qu'ils n'existent pas. Jamais côte à côte en dessous de 980px : à moitié de l'écran chacune, les cartes ne montrent plus un chiffre, mais un mot par ligne. */ .hero-stage-row{ grid-template-columns:1fr; grid-template-areas:"ml" "mr" "globe"; justify-items:center; gap:14px; } .hero-metric-left{ grid-area:ml; } .hero-metric-right{ grid-area:mr; } .globe-stage{ grid-area:globe; margin-top:12px; } } .globe-stage{ display:flex; justify-content:center; min-width:0; } .globe-wrap{ /* Nettement plus grande qu'en colonne : libérée du texte, elle peut prendre toute la place disponible en hauteur sans déborder l'écran. Le facteur `vw` reste modeste : il mesure la largeur de la FENÊTRE, pas celle qui reste après les deux cartes de chiffres — trop haut, la planète les repousse à rien avant même que le plancher ci-dessus n'intervienne. */ width:min(50vw,76vh,760px); aspect-ratio:1; filter:drop-shadow(0 26px 60px rgba(0,0,0,.55)); } @media(max-width:980px){ .globe-wrap{width:min(92vw,76vh,620px);} } .hero-metric{ display:flex; min-width:0; } .hero-metric-left{ justify-content:flex-end; } .hero-metric-right{ justify-content:flex-start; } .hero-metric .cell{ width:min(400px,100%); text-align:center; background:rgba(28,24,21,.82); border:1px solid var(--line); border-radius:12px; padding:26px 34px; backdrop-filter:blur(6px); } .hero-metric .n{font-family:var(--mono); font-size:clamp(1.3rem,2.1vw,1.7rem); color:var(--paper); line-height:1.1; white-space:nowrap;} .hero-metric .l{font-size:.76rem; color:var(--paper-dim); margin-top:7px; line-height:1.5;} @media(max-width:980px){ .hero-metric{ justify-content:center; width:100%; } .hero-metric .cell{ width:min(400px,100%); padding:22px 26px; } .hero-metric .n{ white-space:normal; } } /* ---------- liste des actifs ---------- */ .asset-table{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);} .asset-row{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) auto; gap:18px; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .15s; } .asset-row:last-child{border-bottom:none;} .asset-row:hover{background:rgba(242,237,230,.028);} .asset-row.head{background:var(--surface-2); padding:12px 24px; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--paper-faint); cursor:default;} .asset-row.head:hover{background:var(--surface-2);} /* --------------------------------------------------------------------- Onglets de galaxie — fermés par défaut Le pli n'est pas une astuce d'encombrement : quatorze lignes déroulées d'emblée demandaient de comparer un rendement dollar à un rendement euro avant même d'avoir choisi sa monnaie. Fermé, l'onglet pose la question ; ouvert, il répond. L'ouverture est animée par `grid-template-rows: 0fr → 1fr` : c'est la seule façon d'animer une hauteur INCONNUE (le nombre d'actifs change) sans la mesurer en JavaScript à chaque image. --------------------------------------------------------------------- */ .galaxy-panel{border-bottom:1px solid var(--line);} .galaxy-panel:last-child{border-bottom:none;} .galaxy-tab{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:18px; width:100%; padding:20px 24px; background:var(--surface-2); border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:background .18s; } .galaxy-tab:hover{background:rgba(242,237,230,.04);} .galaxy-tab:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;} /* Le signe de la monnaie : dollar ou euro, en un caractère, avant tout texte. */ .gt-sign{ width:38px; height:38px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1.15rem; color:var(--gold); background:radial-gradient(circle at 34% 28%, rgba(228,183,103,.22), rgba(228,183,103,.05) 70%); box-shadow:inset 0 0 0 1px rgba(228,183,103,.35); transition:transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s; } .galaxy-panel.open .gt-sign{transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(228,183,103,.6), 0 0 18px -6px var(--gold);} .gt-label{ display:block; font-family:var(--mono); font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--paper); } .gt-sub{display:block; font-size:.74rem; color:var(--paper-faint); margin-top:4px; line-height:1.5;} .gt-title .gt-sub{max-width:52ch;} .gt-figures{text-align:right;} .gt-apy{font-family:var(--mono); font-size:1.15rem; color:var(--gold);} .gt-figures .gt-sub{margin-top:2px;} .gt-chev{ color:var(--copper); font-size:1rem; line-height:1; transition:transform .35s cubic-bezier(.2,.9,.25,1); } .galaxy-panel.open .gt-chev{transform:rotate(180deg);} .galaxy-body{ display:grid; grid-template-rows:0fr; /* `visibility` retardée à la fin du repli : pendant l'animation le contenu doit rester visible, une fois replié il ne doit plus être atteignable au clavier — un lien focusable dans un onglet fermé ferait défiler la page vers du vide. */ visibility:hidden; transition:grid-template-rows .45s cubic-bezier(.2,.9,.25,1), visibility 0s linear .45s; } .galaxy-panel.open .galaxy-body{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .45s cubic-bezier(.2,.9,.25,1), visibility 0s; } .galaxy-inner{overflow:hidden; min-height:0;} .galaxy-panel .asset-row:first-child{border-top:1px solid var(--line);} .galaxy-panel .asset-row:last-child{border-bottom:none;} /* Les lignes arrivent l'une après l'autre (`--d`, posé par landing.js). */ .galaxy-panel.open .asset-row{animation:row-in .45s cubic-bezier(.2,.9,.25,1) both; animation-delay:var(--d,0ms);} @keyframes row-in{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} } @media(max-width:820px){ .galaxy-tab{grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:16px 18px;} .galaxy-tab .gt-chev{display:none;} .gt-title .gt-sub{display:none;} } @media(prefers-reduced-motion:reduce){ .galaxy-body{transition:none;} .galaxy-panel.open .asset-row{animation:none;} .gt-sign,.gt-chev{transition:none;} } .ar-id{display:flex; align-items:center; gap:14px; min-width:0;} /* Le logo de l'actif, seul : plus de pastille colorée derrière. Le logo porte déjà sa marque et sa couleur — le disque n'ajoutait rien et le rapetissait. Reste une lueur, à la couleur de l'actif, pour l'asseoir sur le fond. */ .ar-mark{width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent));} .ar-mark .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;} /* Un glyphe n'a pas de fond à lui : il se pose dans un disque sombre teinté, sinon il flotterait sur le papier du tableau. */ .ar-mark .logo-img.glyph{width:100%; height:100%; border-radius:50%; object-fit:contain; padding:6px; background:color-mix(in srgb, var(--c) 22%, #14110F); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);} .ar-mark svg{width:64%; height:64%; color:var(--c);} .ar-mark .logo-init{font-family:var(--mono); font-weight:600; font-size:.8rem; color:var(--c);} /* Les réseaux où le coffre travaille : la même marque que partout ailleurs, en petit, sous le nombre de marchés retenus. */ .ar-chains{display:flex; align-items:center; gap:5px; margin-top:7px; flex-wrap:wrap;} .ar-chain{width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;} .ar-chain .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;} .ar-chain .logo-img.glyph{border-radius:0; object-fit:contain; background:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.6));} .ar-chain svg{width:100%; height:100%; color:var(--paper-dim);} .ar-chain .logo-init{font-size:.5rem; font-family:var(--mono); color:var(--paper-faint);} .ar-chain-more{font-family:var(--mono); font-size:.68rem; color:var(--paper-faint);} .ar-sym{display:block; font-family:var(--mono); font-size:1.02rem;} .ar-name{display:block; font-size:.76rem; color:var(--paper-faint); margin-top:2px;} .ar-apy{display:block; font-family:var(--mono); font-size:1.35rem; color:var(--gold);} /* Sous-libellés toujours sur leur propre ligne : en flux, ils s'intercalaient dans la valeur et la rendaient illisible. */ .ar-sub{display:block; font-size:.72rem; color:var(--paper-faint); margin-top:3px; line-height:1.4;} .ar-num{display:block; font-family:var(--mono); font-size:.95rem;} .ar-venue{font-size:.84rem; min-width:0; line-height:1.45;} .ar-go{color:var(--copper); font-size:1.1rem;} @media(max-width:820px){ .asset-row{grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding:18px;} .asset-row.head{display:none;} .ar-apy-cell{text-align:right;} .ar-num-cell,.ar-venue{grid-column:1/-1; font-size:.78rem; color:var(--paper-dim);} .ar-go{display:none;} } /* ---------- bandes ---------- */ .band{border-top:1px solid var(--line); padding:84px 0;} .band-head{max-width:62ch; margin-bottom:38px;} .band-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:14px;} .band-head p{color:var(--paper-dim); font-size:1rem; line-height:1.7;} .tri{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:18px;} .tri .cell,.stack .cell{border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--surface);} .tri .cell .k,.stack .cell .k{font-family:var(--mono); color:var(--copper); font-size:.78rem; margin-bottom:12px;} .tri .cell h3,.stack .cell h3{font-size:1.05rem; margin-bottom:9px;} .tri .cell p,.stack .cell p{color:var(--paper-dim); font-size:.87rem; line-height:1.7; margin:0;} /* --------------------------------------------------------------------- Cartes empilées au défilement Trois cartes côte à côte se lisent dans n'importe quel ordre, donc dans aucun. Collées les unes sous les autres, elles imposent leur ordre : la carte suivante monte par-dessus la précédente, qui recule (échelle, opacité, flou) au lieu de disparaître d'un coup — on garde le contexte de ce qu'on vient de lire. `--p` (0 → 1) est le taux de recouvrement, calculé au défilement par `bindStacks()` (landing.js) : le CSS ne sait pas mesurer la distance entre deux cartes, mais il sait tout faire du chiffre une fois posé. --------------------------------------------------------------------- */ .stack{ /* La marge du bas d'une carte EST la course de défilement pendant laquelle la suivante vient la recouvrir. Trop courte, l'animation passe inaperçue ; trop longue, la section devient un tunnel. */ --stack-gap:8vh; --stack-top:104px; display:block; padding-bottom:8px; } .stack .cell{ position:sticky; /* Toutes les cartes se calent au MÊME point : recouvrement total, sans bord de la précédente qui dépasse derrière. */ top:var(--stack-top); /* Ordre de superposition explicite : la carte suivante recouvre la précédente. Sans lui, la transparence du flou et de l'opacité laisse transparaître le texte de la carte du dessous à travers celle du dessus — deux paragraphes lus l'un dans l'autre. */ z-index:calc(var(--i,0) + 1); margin-bottom:var(--stack-gap); /* Ancrage en HAUT : une carte qui rétrécit doit reculer dans la pile, pas s'écarter de son bord collé. */ transform-origin:top center; opacity:calc(1 - .42 * var(--p,0)); transform:translateY(calc(-6px * var(--p,0))) scale(calc(1 - .05 * var(--p,0))); filter:blur(calc(1.6px * var(--p,0))); will-change:transform,opacity; } /* La dernière carte garde, elle aussi, sa marge pleine. C'est de la géométrie, pas de l'esthétique : une carte collée ne le reste que tant que sa BOÎTE DE MARGE tient dans son parent. Marge en moins sous la dernière, parent plus court d'autant — et la première carte se décolle avant même que la troisième soit arrivée, c'est-à-dire exactement quand la pile devait se former. */ /* Entrée : la carte monte à l'écran quand elle y arrive vraiment (IntersectionObserver), pas au chargement de la page. */ .stack .cell:not(.in){opacity:0; transform:translateY(42px);} .stack .cell.in{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.25,1);} @media(max-width:820px){ .stack{--stack-gap:22vh; --stack-top:88px;} .stack .cell{padding:22px;} } /* Une carte plus haute que l'écran ne peut pas « coller » : sur les écrans courts on retombe sur un empilement normal, sans recouvrement. */ @media(max-height:620px), (prefers-reduced-motion:reduce){ .stack .cell{ position:static; margin-bottom:16px; opacity:1; transform:none; filter:none; transition:none; } .stack .cell:not(.in){opacity:1; transform:none;} } .cta-band{padding:96px 0;} .cta-band h2{font-size:clamp(1.9rem,4vw,2.9rem); max-width:18ch; margin:0 0 18px;} .cta-band p{color:var(--paper-dim); max-width:52ch; margin:0 0 30px; line-height:1.7;} /* --------------------------------------------------------------------- Soutenir pavapi — dons PayPal et cryptomonnaie. Les cartes se lisent comme les lignes d'actif : une marque, un titre, une action. L'adresse est en monospace et sélectionnable — quand on demande à quelqu'un d'envoyer de l'argent, le premier devoir est qu'il puisse VÉRIFIER caractère par caractère ce qu'il copie. --------------------------------------------------------------------- */ .donate-intro{max-width:62ch;} .donate-intro{color:var(--paper-dim); line-height:1.7; margin-top:0; margin-bottom:22px;} /* ---------- footer, page d'accueil ---------- */ footer .foot-row{justify-content:center;} footer .foot-note{max-width:62ch; margin:0 auto; text-align:center;} /* Borne haute sur la colonne : sans elle, une carte seule (PayPal en attente d'adresses crypto, par exemple) s'étirerait sur toute la largeur de la page et n'aurait plus l'air d'une carte. Cette carte seule est collée à droite plutôt que perdue au centre d'une ligne vide — mais dès qu'une deuxième carte arrive (une adresse crypto configurée), la grille se remplit et DOIT au contraire revenir au centre : collée à droite, elle laisse un vide béant sous le texte d'intro, à gauche, comme si la moitié de la section avait disparu. */ .donate-grid{display:grid; gap:14px; justify-content:end; grid-template-columns:repeat(auto-fit, minmax(290px, 420px));} .donate-grid:has(> :nth-child(2)){justify-content:center;} /* La carte PayPal prend la largeur de deux colonnes sur desktop, pour aligner la grille plutôt que de laisser une carte seule sur sa ligne. */ .donate-paypal{ align-items:center; text-align:center; } .donate-paypal .dc-head{flex-direction:column; gap:8px;} @media(min-width:660px){ .donate-paypal{ grid-column:span 2; } } .donate-card{ display:flex; flex-direction:column; gap:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:18px; text-decoration:none; color:inherit; min-width:0; } .donate-card:hover{border-color:var(--line-strong);} .dc-head{display:flex; align-items:center; gap:12px;} .dc-head b{display:block; font-size:.98rem;} .dc-head small{display:block; color:var(--paper-faint); font-size:.75rem; margin-top:2px;} .dc-mark{width:34px; height:34px; flex-shrink:0;} .dc-chain{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;} .dc-chain .logo-img{width:100%; height:100%; border-radius:50%; object-fit:cover;} .dc-chain .logo-img.glyph{border-radius:0; object-fit:contain; background:none; filter:drop-shadow(0 0 3px rgba(0,0,0,.6));} .dc-chain svg{width:100%; height:100%; color:var(--paper-dim);} /* L'adresse doit tenir en entier, quitte à passer à la ligne : une adresse tronquée par des points de suspension ne se vérifie pas. */ .dc-addr{ font-family:var(--mono); font-size:.74rem; line-height:1.6; color:var(--paper-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; word-break:break-all; user-select:all; } .dc-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center;} .dc-copy,.dc-open{ font-family:var(--mono); font-size:.75rem; cursor:pointer; text-decoration:none; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:7px 14px; color:var(--paper-dim); } .dc-copy:hover,.dc-open:hover{border-color:var(--line-strong); color:var(--paper);} .dc-copy.ok{color:var(--ok); border-color:rgba(126,214,165,.4);} .dc-go{font-family:var(--mono); font-size:.8rem; color:var(--copper);} .donate-paypal:hover .dc-go{color:var(--gold);} /* La carte PayPal est devenue un