/* uplanet-atomic.css — Styles partagés entre atomic.html et atomic_match.html */ /* ══ THÈME PAR DÉFAUT : Ambre des Profondeurs ══════════════════════════════ Thème alternatif : ajouter data-theme="biolum" sur pour activer "Bioluminescence Profonde" (fond marin, cyan pur, violet mystique) */ :root { --primary: #f59e0b; /* ambre */ --secondary: #f97316; /* orange brûlé */ --teal: #00ffcc; /* accent holographique */ --bg-deep: #080602; /* fond quasi-noir chaud */ --bg-panel: rgba(10,12,22,0.95); --aurora-a: rgba(0,255,204,0.07); --aurora-b: rgba(168,85,247,0.05); --aurora-c: rgba(245,158,11,0.05); } [data-theme="biolum"] { --primary: #00f5d4; /* cyan bioluminescent */ --secondary: #a78bfa; /* violet mystique */ --teal: #00f5d4; --bg-deep: #05080f; /* fond marin profond */ --bg-panel: rgba(5,12,24,0.95); --aurora-a: rgba(0,245,212,0.08); --aurora-b: rgba(167,139,250,0.07); --aurora-c: rgba(56,189,248,0.05); } /* ══ AURORA — couche atmosphérique derrière le canvas p5.js ════════════════ */ #canvas-container { background: var(--bg-deep); } #canvas-container::before { content: ''; position: absolute; inset: -30%; background: radial-gradient(ellipse 60% 45% at 25% 65%, var(--aurora-a) 0%, transparent 65%), radial-gradient(ellipse 50% 38% at 78% 22%, var(--aurora-b) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 55% 80%, var(--aurora-c) 0%, transparent 55%); animation: aurora 14s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes aurora { 0% { transform: translate(0,0) scale(1); opacity: .8; } 33% { transform: translate(4%,3%) scale(1.04); opacity: 1; } 66% { transform: translate(-3%,5%) scale(.97); opacity: .9; } 100% { transform: translate(6%,-4%) scale(1.06); opacity: 1; } } /* ── Form controls ── */ .form-label { font-size: .7rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .8px; } .form-control, .form-select { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.13) !important; color: #ddd !important; font-family: monospace; } .form-control:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 .15rem rgba(0,255,204,.18) !important; outline: none; } /* ── Inputs segmentés (Date) ── */ .date-seg-row { display: flex; gap: 5px; align-items: flex-end; } .date-seg { display: flex; flex-direction: column; } .date-seg label { font-size: .62rem; color: rgba(255,255,255,.33); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; } .date-seg input[type="number"] { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #ddd !important; font-family: monospace; font-size: .9rem; border-radius: 7px; text-align: center; padding: 7px 3px; -moz-appearance: textfield; appearance: textfield; width: 100%; } .date-seg input[type="number"]::-webkit-inner-spin-button, .date-seg input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .date-seg input[type="number"]:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 .12rem rgba(0,255,204,.18) !important; outline: none; } .date-seg-sep { font-size: 1rem; color: rgba(255,255,255,.2); padding-bottom: 8px; } .date-display { font-family: monospace; font-size: .75rem; color: rgba(255,255,255,.4); margin-top: 4px; min-height: 1.1rem; } /* ── Leaflet dark theme (commun aux deux pages) ── */ .leaflet-tile-pane .leaflet-tile { filter: brightness(.55) invert(1) contrast(1.1) saturate(.4) hue-rotate(195deg); } .leaflet-control-attribution { display: none !important; } .leaflet-control-zoom a { background: rgba(10,12,22,.9) !important; color: var(--teal) !important; border-color: rgba(0,255,204,.2) !important; } .leaflet-control-zoom a:hover { background: rgba(0,255,204,.15) !important; } /* ── Modal dark (saisie lieu) ── */ .modal-content { background: rgba(10,12,22,.97) !important; border: 1px solid rgba(0,255,204,.2) !important; border-radius: 14px !important; } .modal-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: .75rem 1rem; } .modal-title { color: var(--teal); font-size: .95rem; font-weight: 700; letter-spacing: 1px; } .modal-body { padding: .75rem 1rem 1rem; } .btn-close { filter: invert(1); } /* ── KIN cards ── */ .kin-card { border-radius: 10px; padding: 10px 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.09); } .kin-num { font-size: 2rem; font-weight: 800; line-height: 1; color: #f9a825; } .kin-sub { font-size: .7rem; color: rgba(255,255,255,.35); margin-bottom: 4px; } .kin-info { font-size: .78rem; color: #e0e0e0; margin-bottom: 2px; } .kin-keys { font-size: .7rem; color: rgba(255,255,255,.38); line-height: 1.6; margin-top: 4px; } .kin-empty { font-size: .78rem; color: rgba(255,255,255,.25); font-style: italic; text-align: center; padding: 14px 0; } /* ── Atomes ── */ .atom-a { border-left: 3px solid var(--primary) !important; } .atom-b { border-left: 3px solid var(--secondary) !important; } /* ══ ONGLETS GLISSANTS ══════════════════════════════════════════════════════ Animation CSS sur l'event shown.bs.tab — ne casse pas le layout Bootstrap */ @keyframes tab-slide-in { from { opacity: .2; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes tab-slide-back { from { opacity: .2; transform: translateX(-24px); } to { opacity: 1; transform: none; } } .tab-pane._slide-in { animation: tab-slide-in .22s cubic-bezier(.4,0,.2,1); } .tab-pane._slide-back { animation: tab-slide-back .22s cubic-bezier(.4,0,.2,1); } /* ══ SCORE CARD ════════════════════════════════════════════════════════════ */ .score-card { position: relative; padding: 1.4rem 1rem 1rem; border-radius: 16px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(12px); overflow: hidden; text-align: center; transition: border-color .5s ease, box-shadow .5s ease; } .score-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,255,204,.06), transparent 70%); pointer-events: none; } .score-card.resonant { border-color: rgba(0,255,204,.45); box-shadow: 0 0 32px rgba(0,255,204,.18), inset 0 0 20px rgba(0,255,204,.06); } .score-card.resonant::before { animation: score-glow-pulse 2s ease-in-out infinite; } @keyframes score-glow-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } } .score-card-label { font-size: .65rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .5rem; } .score-progress-wrap { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; } .score-progress-wrap > div { height: 100%; border-radius: 2px; background: var(--teal); transition: width .6s cubic-bezier(.4,0,.2,1), background .4s; } /* ══ BOUTONS CINÉMATIQUES ═══════════════════════════════════════════════════ */ .btn-cine { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; } .btn-cine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0s; } .btn-cine:hover::after { transform: translateX(100%); transition: transform .45s ease; } .btn-cine:active { transform: scale(.97); } .btn-cine:active:not(:focus-visible) { box-shadow: none !important; } /* ══ INPUTS — focus cinématique ══════════════════════════════════════════ Micro-scale + inner glow sans briser la lisibilité */ .date-seg input[type="number"]:focus, .form-control:focus, .form-select:focus { transform: scale(1.012); transition: transform .18s ease, border-color .15s, box-shadow .15s; } /* ══ SECTION TITLES — shimmer subtil ════════════════════════════════════ */ .section-title { background-image: linear-gradient(90deg, currentColor 0%, rgba(255,255,255,.9) 45%, currentColor 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: shimmer-title 6s linear infinite; } @keyframes shimmer-title { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* ══ THÈMES KIN MAYA — 5 couleurs Dreamspell ════════════════════════════ Appliqués automatiquement depuis la couleur KIN calculée (uplanet-atomic.js) */ /* ── Rouge · Feu · Initiative ── */ [data-theme="kin-rouge"] { --primary: #ef4444; --secondary: #f97316; --teal: #ef4444; --bg-deep: #0a0302; --bg-panel: rgba(20,5,4,0.95); --aurora-a: rgba(239,68,68,0.07); --aurora-b: rgba(249,115,22,0.05); --aurora-c: rgba(220,38,38,0.04); } /* ── Blanc · Vent · Purification ── */ [data-theme="kin-blanc"] { --primary: #94a3b8; --secondary: #b0c4de; --teal: #b0c4de; --bg-deep: #060809; --bg-panel: rgba(8,10,14,0.95); --aurora-a: rgba(148,163,184,0.07); --aurora-b: rgba(186,230,253,0.04); --aurora-c: rgba(226,232,240,0.04); } /* ── Bleu · Nuit · Abondance ── */ [data-theme="kin-bleu"] { --primary: #60a5fa; --secondary: #06b6d4; --teal: #60a5fa; --bg-deep: #020610; --bg-panel: rgba(3,8,22,0.95); --aurora-a: rgba(96,165,250,0.07); --aurora-b: rgba(6,182,212,0.06); --aurora-c: rgba(59,130,246,0.04); } /* ── Jaune · Graine · Floraison ── */ [data-theme="kin-jaune"] { --primary: #fbbf24; --secondary: #f59e0b; --teal: #fbbf24; --bg-deep: #080601; --bg-panel: rgba(12,9,2,0.95); --aurora-a: rgba(251,191,36,0.06); --aurora-b: rgba(245,158,11,0.05); --aurora-c: rgba(234,179,8,0.04); } /* ── Vert · Monde · Navigation ── */ [data-theme="kin-vert"] { --primary: #34d399; --secondary: #00ffcc; --teal: #34d399; --bg-deep: #020d07; --bg-panel: rgba(2,14,8,0.95); --aurora-a: rgba(52,211,153,0.07); --aurora-b: rgba(0,255,204,0.06); --aurora-c: rgba(16,185,129,0.05); } /* ── Compatibilité iOS/Safari ────────────────────────────────────────────── */ /* font-size ≥ 16px : empêche le zoom automatique au focus sur iPhone */ input[type="text"], input[type="number"], input[type="email"], input[type="search"], select, textarea { font-size: 16px !important; } /* Spinners numériques : suppression globale cross-browser */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* ══ SPINNER UNIFIÉ ══════════════════════════════════════════════════════════ */ .a4l-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(0,255,204,.12); border-top-color: #00ffcc; animation: a4l-spin .85s linear infinite; /* @keyframes a4l-spin défini dans core-theme.css */ } /* ══ ÉCRAN DE CHARGEMENT COMMUN ══════════════════════════════════════════════ */ .a4l-loading { position: fixed; inset: 0; z-index: var(--z-loading, 2100); background: rgba(8,6,2,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .a4l-loading.hidden { display: none; } .a4l-load-msg { font-size: .82rem; color: rgba(255,255,255,.4); } /* ══ TOP HEADER FIXE COMMUN ══════════════════════════════════════════════════ */ #a4l-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header, 1200); height: 48px; background: rgba(8,6,2,.92); border-bottom: 1px solid rgba(0,255,204,.12); backdrop-filter: blur(12px); display: flex; align-items: center; gap: 8px; padding: 0 12px; box-shadow: 0 2px 16px rgba(0,0,0,.4); } .a4l-header-title { font-size: .88rem; font-weight: 800; color: var(--teal, #00ffcc); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a4l-header-back { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; flex-shrink: 0; } .a4l-header-back:hover { background: rgba(255,255,255,.1); color: #fff; } /* ══ BOUTON H-BTN — commun à Map et Chat ════════════════════════════════════ */ .h-btn { padding: 5px 11px; border-radius: 16px; cursor: pointer; font-size: .72rem; font-weight: 700; border: 1px solid; background: none; white-space: nowrap; flex-shrink: 0; transition: all .18s; } .h-btn-teal { border-color: rgba(0,255,204,.3); color: #00ffcc; } .h-btn-teal:hover, .h-btn-teal.active { background: rgba(0,255,204,.12); border-color: rgba(0,255,204,.6); } .h-btn-dim { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.55); } .h-btn-dim:hover { background: rgba(255,255,255,.08); } /* ══ RELAY BADGE UNIFIÉ ══════════════════════════════════════════════════════ */ .a4l-relay-badge { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; cursor: pointer; font-size: .65rem; color: rgba(255,255,255,.35); transition: all .15s; flex-shrink: 0; max-width: 130px; overflow: hidden; } .a4l-relay-badge:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); } .a4l-relay-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffab40; flex-shrink: 0; transition: background .3s; } .a4l-relay-dot.green { background: #00e676; } .a4l-relay-dot.red { background: #ff5252; } .a4l-relay-dot.yellow { background: #ffab40; } .a4l-relay-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ══ BOTTOM NAV COMMUNE ══════════════════════════════════════════════════════ */ #a4l-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bnav, 1300); display: flex; justify-content: space-around; align-items: stretch; background: rgba(6,8,18,.85); backdrop-filter: blur(16px); border-top: 1px solid rgba(0,255,204,.12); height: 58px; box-shadow: 0 -4px 24px rgba(0,0,0,.5); } .a4l-bnav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.35); font-size: .6rem; letter-spacing: .4px; text-transform: uppercase; padding: 6px 4px; transition: color .2s, background .2s; border-top: 2px solid transparent; text-decoration: none; } .a4l-bnav-btn .a4l-bnav-icon { font-size: 1.25rem; line-height: 1; } .a4l-bnav-btn:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); } .a4l-bnav-btn.active { color: var(--teal, #00ffcc); border-top-color: var(--teal, #00ffcc); background: rgba(0,255,204,.06); } .a4l-bnav-btn.locked { opacity: .42; } .a4l-bnav-btn.locked .a4l-lock { font-size: .6em; vertical-align: middle; } /* ══ TOAST SYSTÈME A4L ═══════════════════════════════════════════════════════ */ #a4l-toast, #security-toast { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); background: rgba(0,22,14,.96); border: 1px solid rgba(0,255,130,.4); border-radius: 12px; padding: 10px 18px; z-index: var(--z-toast, 9990); color: #00ff99; font-size: .76rem; white-space: nowrap; backdrop-filter: blur(12px); pointer-events: none; display: none; box-shadow: 0 4px 24px rgba(0,255,130,.15); transition: opacity .4s; } /* ══ CARD UNIFIÉE ════════════════════════════════════════════════════════════ */ .section-card, .a4l-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 16px 14px; margin-bottom: 14px; } /* ══ SECTION TITLE dans les cards ════════════════════════════════════════════ */ .section-card > .section-title:first-child, .a4l-card > .section-title:first-child { font-size: .78rem; font-weight: 700; color: var(--teal, #00ffcc); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; } /* ══ ATOM-DOT UNIFIÉ ═════════════════════════════════════════════════════════ */ .atom-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.2); } /* ══ BOUTONS SYSTÈME A4L ═════════════════════════════════════════════════════ */ .btn-a4l-primary { padding: 11px 18px; border-radius: 10px; cursor: pointer; background: rgba(0,255,204,.12); border: 1px solid rgba(0,255,204,.35); color: var(--teal, #00ffcc); font-weight: 700; font-size: .88rem; transition: background .18s; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; } .btn-a4l-primary:hover { background: rgba(0,255,204,.22); } .btn-a4l-primary:disabled { opacity: .38; cursor: default; } .btn-a4l-secondary { padding: 11px 18px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-weight: 600; font-size: .88rem; transition: background .18s; text-align: center; width: 100%; } .btn-a4l-secondary:hover { background: rgba(255,255,255,.09); } .btn-a4l-ghost { padding: 9px 14px; border-radius: 8px; cursor: pointer; background: none; border: 1px dashed rgba(255,255,255,.18); color: rgba(255,255,255,.45); font-size: .84rem; transition: all .18s; text-align: center; width: 100%; } .btn-a4l-ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(0,255,204,.3); color: var(--teal, #00ffcc); } /* ══ MARGE CORPS AVEC HEADER+NAV ════════════════════════════════════════════ */ .a4l-body-pad { padding-top: 56px; padding-bottom: 70px; } /* ══ HEADER CENTER SLOT ══════════════════════════════════════════════════════ */ .a4l-header-center { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .a4l-header-center .h-title { font-size: .83rem; font-weight: 700; color: #e0e0e0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ══ INPUT UNIFIÉ A4L ════════════════════════════════════════════════════════ */ .a4l-input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #e0e0e0; padding: 9px 12px; font-size: .82rem; font-family: system-ui, sans-serif; outline: none; transition: border-color .15s; } .a4l-input:focus { border-color: rgba(0,255,204,.4); box-shadow: 0 0 0 2px rgba(0,255,204,.08); } .a4l-input::placeholder { color: rgba(255,255,255,.25); } /* ══ SCROLLBARS PERSONNALISÉES ═══════════════════════════════════════════════ */ .a4l-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,255,204,.18) transparent; } .a4l-scroll::-webkit-scrollbar { width: 4px; } .a4l-scroll::-webkit-scrollbar-track { background: transparent; } .a4l-scroll::-webkit-scrollbar-thumb { background: rgba(0,255,204,.18); border-radius: 2px; } .a4l-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,255,204,.35); } /* ══ BOTTOM SHEET CSS-ONLY ═══════════════════════════════════════════════════ */ .a4l-sheet-wrap { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); display: none; align-items: flex-end; } .a4l-sheet-wrap.open { display: flex; } .a4l-bottom-sheet { background: var(--bg-elevated, #0f0d09); border-top: 1px solid rgba(0,255,204,.18); border-radius: 14px 14px 0 0; width: 100%; max-height: 72vh; overflow: hidden; transform: translateY(100%); transition: transform .28s cubic-bezier(.32, 1, .18, 1); } .a4l-sheet-wrap.open .a4l-bottom-sheet { transform: translateY(0); } .a4l-sheet-body { display: flex; flex-direction: column; padding: 0 0 20px; overflow: hidden; max-height: 72vh; } .sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,.14); border-radius: 2px; margin: 10px auto 12px; flex-shrink: 0; } .sheet-title { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.5); padding: 0 16px 8px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; } /* ══ BTN-READY (atomic_match.html) ══════════════════════════════════════════ */ @keyframes btn-ready-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,204,0); } 50% { box-shadow: 0 0 18px 4px rgba(0,255,204,.4); } } .btn-ready { animation: btn-ready-pulse 1.8s ease-in-out infinite; }