Mise à jour : dernières modifs

2025-08-24 14:49:43 +00:00
parent e3620c7f42
commit c5f16fe27b
45 changed files with 2426 additions and 552 deletions
--- a/frontend/public/assets/style.css
+++ b/frontend/public/assets/style.css
@@ -0,0 +1,141 @@
+/* === Super Sunday — Global sporty theme + hero background + subtle bubbles === */
+
+/* Palette */
+:root {
+  --bg: #f4f7fb;
+  --surface: #ffffff;
+  --surface-2: #f2f5fa;
+  --ink: #101827;
+  --muted: #6b7280;
+  --border: #e5e9f2;
+
+  --accent-start: #1ea7ff;
+  --accent-end: #27d980;
+  --accent: #1890ff;
+
+  --radius: 16px;
+  --shadow: 0 6px 18px rgba(0,0,0,.06);
+  --shadow-hover: 0 10px 28px rgba(0,0,0,.12);
+  --trans: 180ms ease;
+}
+
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0;
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  color:var(--ink);
+  line-height:1.5;
+
+  /* Hero background image */
+  background-image: url("/assets/images/backgroundp24p.jpg");
+  background-size: cover;
+  background-position: center top;
+  background-attachment: fixed;
+}
+
+/* dark overlay to ensure readability */
+body::before{
+  content:"";
+  position:fixed; inset:0;
+  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.60));
+  mix-blend-mode: normal;
+  z-index:-1;
+}
+
+/* ===== Header / Nav ===== */
+header{
+  position: sticky; top:0; z-index:40;
+  display:flex; align-items:center; justify-content:space-between;
+  padding: 14px 24px;
+  background: rgba(255,255,255,0.86);
+  border-bottom:1px solid var(--border);
+  backdrop-filter: blur(8px) saturate(120%);
+}
+header h1{margin:0; font-size:20px; font-weight:700; color:var(--ink)}
+nav a{
+  margin-left:16px; padding:8px 14px;
+  color:var(--ink); text-decoration:none; border-radius:12px;
+  transition: background var(--trans), transform var(--trans);
+}
+nav a:hover{ background: linear-gradient(90deg, rgba(30,167,255,.15), rgba(39,217,128,.15)); transform:translateY(-1px) }
+
+/* ===== Layout ===== */
+.container{ max-width:1100px; margin:24px auto; padding:0 16px }
+.grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }
+
+/* ===== Cards ===== */
+.card{
+  background: var(--surface);
+  border:1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  box-shadow: var(--shadow);
+  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
+}
+.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color:#dbe5f2 }
+a.card{ display:block; color:inherit; text-decoration:none }
+.card.accent{
+  background: linear-gradient(135deg, rgba(30,167,255,.08), rgba(39,217,128,.08)), var(--surface);
+  border-color: rgba(30,167,255,.25);
+}
+
+/* Titles / text */
+h1,h2,h3{ line-height:1.2 }
+h2{ margin: 20px 0 12px; font-size:22px; font-weight:600 }
+.muted{ color: var(--muted) }
+.mt{ margin-top:24px }
+
+/* Buttons & inputs */
+.btn{
+  display:inline-block; padding:10px 18px; border-radius:12px; border:none;
+  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
+  color:#fff; font-weight:600; text-decoration:none;
+  box-shadow: 0 8px 20px rgba(24,144,255,.25);
+  transition: transform var(--trans), box-shadow var(--trans);
+}
+.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(24,144,255,.35) }
+
+input,select{
+  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
+  background: var(--surface-2); color: var(--ink); outline:none;
+  transition: border-color var(--trans), box-shadow var(--trans);
+}
+input:focus,select:focus{ border-color:#b8d8ff; box-shadow: 0 0 0 3px rgba(24,144,255,.20) }
+
+/* Empty state */
+.empty{
+  padding: 20px; text-align:center; color:var(--muted);
+  background: var(--surface-2); border:1px dashed var(--border);
+  border-radius: var(--radius);
+}
+
+/* Specific existing sections */
+#tournaments .card, #matches .card{ margin-bottom:12px }
+
+/* ===== Animated bubbles (tennis/padel ball ghosts) ===== */
+@keyframes float {
+  0%   { transform: translateY(0) scale(1); opacity:.7; }
+  50%  { transform: translateY(-36px) scale(1.05); opacity:.4; }
+  100% { transform: translateY(0) scale(1); opacity:.7; }
+}
+.bg-bubble{
+  position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0));
+  filter: blur(0.2px);
+  animation: float 9s ease-in-out infinite;
+  mix-blend-mode: screen;
+}
+.bg-bubble.b1{ width:90px; height:90px; left:15%; top:72%; animation-duration:8s }
+.bg-bubble.b2{ width:70px; height:70px; left:68%; top:64%; animation-duration:10s }
+.bg-bubble.b3{ width:115px; height:115px; left:48%; top:78%; animation-duration:12s }
+.bg-bubble.b4{ width:60px; height:60px; left:82%; top:20%; animation-duration:11s }
+.bg-bubble.b5{ width:80px; height:80px; left:6%; top:18%; animation-duration:9s }
+
+@media (prefers-reduced-motion: reduce){
+  .bg-bubble{ animation: none; }
+}
+
+/* Footer (if needed) */
+footer{ margin:40px 0 0; padding:24px 16px; text-align:center; color:var(--muted);
+  border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) }