/* ============================================================ MatchNight — Design system (mobile-first, dark, brandizzabile) Nessun build step: CSS puro con variabili. Il tema per-evento sovrascrive --brand / --brand-2 inline sul . ============================================================ */ :root { --brand: #E11D48; --brand-2: #7C3AED; --bg: #0B0B12; --bg-soft: #14141f; --card: #1b1b28; --card-2: #23233420; --line: #2a2a3a; --text: #F5F5FA; --muted: #9a9ab0; --ok: #10B981; --warn: #F59E0B; --danger: #EF4444; --radius: 18px; --radius-sm: 12px; --shadow: 0 10px 30px rgba(0,0,0,.45); --maxw: 560px; font-synthesis: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; min-height: 100dvh; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1,h2,h3 { line-height: 1.15; margin: 0 0 .4em; } h1 { font-size: 1.6rem; letter-spacing: -.02em; } h2 { font-size: 1.25rem; } p { margin: 0 0 1rem; } small { color: var(--muted); } /* Layout shell -------------------------------------------------*/ .shell { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 96px; min-height: 100dvh; } .center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 82dvh; gap: 8px; } .stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; gap: 10px; align-items: center; } .between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .grow { flex: 1; } .wrap { flex-wrap: wrap; } .muted { color: var(--muted); } .center-text { text-align: center; } /* Brand marks --------------------------------------------------*/ .brandbar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 14px; } .logo-dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 40%, transparent); } .logo-text { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; } .logo-text b { color: var(--brand); } /* Cards --------------------------------------------------------*/ .card { background: linear-gradient(180deg, var(--card), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .card.tight { padding: 14px; } .card.glass { background: color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter: blur(8px); } .hero { background: radial-gradient(600px 260px at 20% 0%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 60%), radial-gradient(500px 240px at 100% 20%, color-mix(in srgb, var(--brand-2) 40%, transparent), transparent 60%), var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } /* Buttons ------------------------------------------------------*/ .btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 14px 18px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s ease, filter .15s ease; width: 100%; text-align: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 34%, transparent); } .btn:active { transform: translateY(1px) scale(.995); } .btn:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; box-shadow: none; } .btn.secondary { background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); box-shadow: none; } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); box-shadow: none; } .btn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: none; } .btn.ok { background: linear-gradient(135deg, var(--ok), #059669); box-shadow: none; } .btn.sm { padding: 9px 14px; font-size: .9rem; width: auto; } .btn.icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .btn-row { display: flex; gap: 10px; } .btn-row .btn { flex: 1; } /* Forms --------------------------------------------------------*/ label.field { display: block; font-size: .85rem; color: var(--muted); margin: 0 0 6px; font-weight: 600; } .input, select, textarea { width: 100%; padding: 13px 14px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; } .input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); border-color: transparent; } .help { font-size: .8rem; color: var(--muted); margin-top: 6px; } .error { color: #fca5a5; font-size: .82rem; margin-top: 6px; } /* Choice chips / options --------------------------------------*/ .choices { display: grid; gap: 10px; } .choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--radius-sm); transition: border-color .12s, background .12s; } .choice:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; } .choice.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--bg-soft)); } .choice.selected .dot { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--bg-soft); } .choice .label { font-weight: 600; } .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; font-size: .9rem; } .pill.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, var(--bg-soft)); color: #fff; } /* Badges -------------------------------------------------------*/ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--card-2); border: 1px solid var(--line); } .badge.green { color: #6ee7b7; border-color: #065f46; background: #052e2470; } .badge.amber { color: #fcd34d; border-color: #78350f; background: #2a1c0470; } .badge.blue { color: #93c5fd; border-color: #1e3a8a; background: #0b1c4770; } .badge.gray { color: var(--muted); } .badge.brand { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 0; } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); animation: pulse 1.8s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } /* Avatar -------------------------------------------------------*/ .mn-avatar { border-radius: 22px; display: block; } .avatar-ring { padding: 3px; border-radius: 26px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: inline-block; line-height: 0; } .match-score { font-weight: 900; font-size: 2.4rem; letter-spacing: -.03em; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Match card ---------------------------------------------------*/ .match-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .trait-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } /* Chat ---------------------------------------------------------*/ .chat-scroll { display: flex; flex-direction: column; gap: 8px; padding: 8px 2px 12px; } .msg { max-width: 78%; padding: 10px 13px; border-radius: 16px; position: relative; word-wrap: break-word; } .msg.mine { align-self: flex-end; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-bottom-right-radius: 5px; } .msg.theirs { align-self: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .msg.system { align-self: center; background: transparent; color: var(--muted); font-size: .82rem; text-align: center; } .msg .meta { display: block; font-size: .66rem; opacity: .7; margin-top: 4px; text-align: right; } .composer { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0; background: linear-gradient(0deg, var(--bg) 70%, transparent); } .icebreakers { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; } .icebreakers::-webkit-scrollbar { display: none; } .ib { flex: none; padding: 9px 13px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .84rem; cursor: pointer; white-space: nowrap; } /* Stat tiles (dashboard) --------------------------------------*/ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stats.three { grid-template-columns: repeat(3, 1fr); } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; } .stat .n { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; } .stat .k { font-size: .76rem; color: var(--muted); } /* Bottom nav (participant) ------------------------------------*/ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; } .bottomnav .inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-around; background: color-mix(in srgb, var(--bg-soft) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; color: var(--muted); padding: 4px 12px; position: relative; } .bottomnav a.active { color: var(--text); } .bottomnav a .ic { font-size: 1.2rem; } .navbadge { position: absolute; top: 0; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; font-size: .62rem; display: grid; place-items: center; font-weight: 700; } /* Toast / notifications ---------------------------------------*/ .toast-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { pointer-events: auto; max-width: var(--maxw); width: calc(100% - 24px); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); animation: slidein .25s ease; } @keyframes slidein { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } } /* Progress steps ----------------------------------------------*/ .steps { display: flex; gap: 6px; margin: 4px 0 16px; } .steps .s { height: 4px; border-radius: 3px; background: var(--line); flex: 1; } .steps .s.done { background: linear-gradient(90deg, var(--brand), var(--brand-2)); } /* Countdown ----------------------------------------------------*/ .countdown { display: flex; gap: 10px; justify-content: center; } .countdown .u { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 62px; text-align: center; } .countdown .u b { font-size: 1.5rem; display: block; } .countdown .u span { font-size: .66rem; color: var(--muted); } /* Utilities ----------------------------------------------------*/ .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px} .hidden{display:none} .divider{height:1px;background:var(--line);margin:14px 0} .text-brand{color:var(--brand)} .flash { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-weight: 600; } .flash.ok { background: #052e2470; border: 1px solid #065f46; color: #6ee7b7; } .flash.err { background: #2a040470; border: 1px solid #7f1d1d; color: #fca5a5; } /* Admin ligero -------------------------------------------------*/ .admin { --maxw: 1080px; } .admin table { width: 100%; border-collapse: collapse; } .admin th, .admin td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; } .admin th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .admin .table-wrap { overflow-x: auto; } .admin-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; } .admin-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--muted); } .admin-nav a.active { background: var(--card); color: var(--text); border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); } .grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px){ .grid-2 { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: repeat(4,1fr);} }