/* ========================================================= DAR AL LOUGHAH — 01-tokens.css --------------------------------------------------------- Module 1/6 : Design tokens + cosmos (bg, étoiles, galaxie, lanternes, particules dorées, étoiles filantes) ⚠️ À charger EN PREMIER dans . Aucune classe existante n'est modifiée, on ajoute juste les tokens et les éléments de fond. ========================================================= */ /* ========================================================= 1.1 — DESIGN TOKENS ========================================================= */ :root{ /* Backgrounds — bleu nuit profond */ --bg-deep: #050917; --bg-night: #0a1335; --bg-night-2: #122050; --bg-night-3: #1a2c6b; /* Panels (semi-transparents pour laisser passer le ciel) */ --panel: rgba(12,22,58,.72); --panel-2: rgba(8,16,44,.85); --panel-3: rgba(20,34,82,.7); /* Or — palette baroque 7 stops */ --gold-0: #3d2806; /* shadow */ --gold-1: #6b4a0e; /* dark */ --gold-2: #9c7019; /* mid-dark */ --gold: #D4AF37; /* base (compat v1) */ --gold-3: #c89a3a; /* mid */ --gold-4: #e8c060; /* bright */ --gold-5: #f7dc88; /* light */ --gold-light:#F4D77A; /* compat v1 */ --gold-6: #fdeec3; /* pale (highlight) */ --gold-dark: #A07A1C; /* compat v1 */ --gold-glow: rgba(212,175,55,.45); /* Text */ --ink: #f0e2b8; --ink-muted: #c9b682; --ink-dim: #8a7a52; /* Borders & shadows */ --border-gold: rgba(212,175,55,.55); --border-gold-2: rgba(212,175,55,.3); --shadow-soft: 0 10px 40px rgba(0,0,0,.55); --shadow-card: 0 6px 16px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); --shadow-gold: 0 0 24px rgba(212,175,55,.35), 0 0 60px rgba(212,175,55,.15); --glow-soft: 0 0 14px rgba(232,192,96,.35); /* Tier colors (badges — conservés) */ --tier-bronze: #E8B07A; --tier-silver: #F0F4FA; --tier-gold: #F4D77A; --tier-lapis: #3A6BD4; --tier-emerald: #5EE0A5; --tier-ruby: #FF7A9A; /* Feedback */ --correct: #4fd69a; --wrong: #ff6b78; /* Radii */ --radius: 16px; --radius-lg: 22px; --radius-xl: 28px; /* Fonts */ --font-display: 'Cinzel', serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-arabic: 'Amiri', 'Reem Kufi', serif; --font-ui: 'Inter', system-ui, sans-serif; } /* ========================================================= 1.2 — RESET (léger, on garde les bases de ton CSS v1) ========================================================= */ *, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body{ height: 100%; overflow-x: hidden; } body{ font-family: var(--font-body), 'Inter', system-ui, sans-serif; color: var(--ink); line-height: 1.5; min-height: 100vh; overflow-x: hidden; position: relative; /* Fond galaxie ultra-profond */ background: radial-gradient(ellipse at 20% 10%, #1b2c6a 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, #3b2a5a 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, #0a1535 0%, #050a1f 80%); background-attachment: fixed; } button{ font: inherit; color: inherit; } /* ========================================================= 1.3 — STARFIELD (généré en JS — on garde compat v1) ========================================================= */ .starfield{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .star{ position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255,255,255,.3); animation: starTwinkle var(--dur, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .star.sm{ width: 1px; height: 1px; box-shadow: 0 0 3px #fff; } .star.lg{ width: 3px; height: 3px; box-shadow: 0 0 10px #fff, 0 0 20px rgba(244,215,122,.4); } .star.gold{ background: var(--gold-light); box-shadow: 0 0 8px var(--gold-light), 0 0 20px var(--gold-glow); } @keyframes starTwinkle{ 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } } /* ========================================================= 1.4 — STARS BACKGROUND (couches CSS sans JS) ========================================================= */ .cosmos-stars{ position: fixed; inset: -10%; z-index: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 8%, #fff, transparent 50%), radial-gradient(1px 1px at 23% 47%, #fce, transparent 50%), radial-gradient(1.5px 1.5px at 34% 18%, #fff, transparent 50%), radial-gradient(1px 1px at 47% 62%, #fff, transparent 50%), radial-gradient(2px 2px at 58% 11%, #fff, transparent 50%), radial-gradient(1px 1px at 67% 73%, #ffd, transparent 50%), radial-gradient(1.5px 1.5px at 79% 33%, #fff, transparent 50%), radial-gradient(1px 1px at 88% 86%, #fff, transparent 50%), radial-gradient(1px 1px at 8% 92%, #fff, transparent 50%), radial-gradient(1.5px 1.5px at 92% 7%, #fff, transparent 50%), radial-gradient(1px 1px at 41% 88%, #fff, transparent 50%), radial-gradient(1px 1px at 73% 52%, #fce, transparent 50%), radial-gradient(2px 2px at 19% 71%, #fff, transparent 50%), radial-gradient(1px 1px at 55% 27%, #fff, transparent 50%), radial-gradient(1px 1px at 28% 38%, #fff, transparent 50%), radial-gradient(1.5px 1.5px at 84% 58%, #ffe, transparent 50%); opacity: .9; animation: starsTwinkleA 6s ease-in-out infinite alternate; } .cosmos-stars.b{ background-image: radial-gradient(1px 1px at 15% 25%, #fff, transparent 50%), radial-gradient(1px 1px at 38% 8%, #fff, transparent 50%), radial-gradient(1px 1px at 62% 44%, #fff, transparent 50%), radial-gradient(1.5px 1.5px at 76% 18%, #ffe, transparent 50%), radial-gradient(1px 1px at 91% 65%, #fff, transparent 50%), radial-gradient(1px 1px at 5% 55%, #fff, transparent 50%), radial-gradient(1px 1px at 49% 79%, #fff, transparent 50%), radial-gradient(1px 1px at 33% 95%, #fff, transparent 50%); animation-duration: 9s; animation-delay: -3s; opacity: .7; } @keyframes starsTwinkleA{ 0% { opacity: .35; } 100% { opacity: .95; } } /* ========================================================= 1.5 — MILKY WAY (galaxie diagonale) ========================================================= */ .milkyway{ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 30% at 70% 70%, rgba(212,175,55,.08), transparent 60%), radial-gradient(ellipse 40% 20% at 30% 30%, rgba(100,140,220,.08), transparent 60%); } .cosmos-galaxy{ position: fixed; width: 140%; height: 60%; top: 35%; left: -20%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 30% at 50% 50%, rgba(220,160,200,.18), transparent 60%), radial-gradient(ellipse 70% 20% at 50% 50%, rgba(180,140,220,.14), transparent 70%), radial-gradient(ellipse 90% 15% at 50% 50%, rgba(140,180,230,.10), transparent 75%); transform: rotate(-22deg); filter: blur(2px); } /* ========================================================= 1.6 — SHOOTING STARS (étoiles filantes occasionnelles) ========================================================= */ .shooting-star{ position: fixed; top: 12%; left: -15%; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #fff 60%, transparent); filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #aac9ff); transform: rotate(-22deg); opacity: 0; animation: shootingStar 14s ease-in infinite; z-index: 1; pointer-events: none; } .shooting-star.s2{ top: 28%; animation-delay: -8s; animation-duration: 18s; } @keyframes shootingStar{ 0%, 88% { transform: translate(0, 0) rotate(-22deg); opacity: 0; } 90% { opacity: 1; } 98% { opacity: 1; } 100% { transform: translate(150vw, 40vh) rotate(-22deg); opacity: 0; } } /* ========================================================= 1.7 — GOLD DUST PARTICLES (poussière dorée flottante) ========================================================= */ .gold-particles{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gold-particle{ position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle, #fdeec3, #c89a3a 60%, transparent 100%); opacity: 0; animation: particleDrift linear infinite; filter: drop-shadow(0 0 3px rgba(255,210,120,.6)); } @keyframes particleDrift{ 0% { transform: translateY(0) translateX(0); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translateY(-110vh) translateX(var(--drift-x, 30px)); opacity: 0; } } /* ========================================================= 1.8 — LANTERNES (compat avec ton .lantern v1, on upgrade) On garde .lantern + .l2/.l3/.l4 mais on enrichit l'effet ========================================================= */ .lanterns{ position: absolute; top: 6px; left: 0; right: 0; height: 80px; display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; z-index: 3; } .lantern{ width: 22px; height: 34px; background: linear-gradient(180deg, var(--gold-dark) 0%, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, var(--gold-dark) 100%); border-radius: 10px 10px 6px 6px / 14px 14px 8px 8px; position: relative; box-shadow: 0 0 16px var(--gold-glow), 0 0 28px rgba(255,180,80,.25), inset 0 0 8px rgba(255,240,180,.4); animation: lanternSway 4s ease-in-out infinite; transform-origin: 50% -20%; } .lantern::before{ /* Chaîne */ content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 1px; height: 14px; background: linear-gradient(180deg, transparent, var(--gold)); } .lantern::after{ /* Tassel inférieur */ content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 6px; height: 8px; background: var(--gold); border-radius: 0 0 3px 3px; } .lantern.l2{ animation-delay: -1s; transform: translateY(12px); } .lantern.l3{ animation-delay: -2s; transform: translateY(-4px); } .lantern.l4{ animation-delay: -3s; transform: translateY(8px); } @keyframes lanternSway{ 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(4px) rotate(3deg); } } /* ========================================================= 1.9 — SCREEN TRANSITIONS (compat avec ton .screen v1) ========================================================= */ .screen{ display: none; animation: screenFadeUp .35s ease both; } .screen.active{ display: block; } @keyframes screenFadeUp{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= 1.10 — APP CONTAINER (compat avec ton .app v1) ========================================================= */ .app{ position: relative; z-index: 1; max-width: 440px; margin: 0 auto; min-height: 100vh; padding: 0 16px 100px; } /* ========================================================= 1.11 — UTILITIES (compat v1) ========================================================= */ .mt-8 { margin-top: 8px; } .mt-12{ margin-top: 12px; } .mt-16{ margin-top: 16px; } .mt-20{ margin-top: 20px; } .text-center{ text-align: center; } .hidden{ display: none !important; } [hidden]{ display: none !important; } .spacer-40{ width: 40px; flex-shrink: 0; } /* ========================================================= 1.12 — SCROLLBAR (cohérent partout, discret) ========================================================= */ *::-webkit-scrollbar{ width: 4px; height: 4px; } *::-webkit-scrollbar-track{ background: transparent; } *::-webkit-scrollbar-thumb{ background: rgba(212,175,55,.3); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover{ background: rgba(212,175,55,.5); }