/* ============================================================================ * odc-entry.css — Design system dell'INGRESSO OneDay Cup * ============================================================================ * * Usato SOLO dalle pagine di ingresso (landing.html, login.html, * scegli-torneo.html). L'ingresso è brand-NEUTRO OneDay Cup (oro/navy): * NON include tm-theme.css e NON deriva colori da --tm-primary-color, * perché a questo punto l'utente non ha ancora scelto un torneo. * Le pagine marcano per disattivare l'auto-branding * di tm-tournament-state.js. * ========================================================================= */ :root { --odc-bg: #06080f; --odc-surface: rgba(255, 255, 255, 0.055); --odc-surface-2: rgba(255, 255, 255, 0.09); --odc-stroke: rgba(255, 255, 255, 0.12); --odc-stroke-strong: rgba(255, 255, 255, 0.24); --odc-ink: #f7f9fc; --odc-ink-muted: rgba(247, 249, 252, 0.68); --odc-ink-dim: rgba(247, 249, 252, 0.44); --odc-gold: #f7b32b; --odc-gold-soft: rgba(247, 179, 43, 0.16); --odc-grad-gold: linear-gradient(135deg, #ffd166 0%, #f7b32b 48%, #ef8f0e 100%); --odc-green: #34d399; --odc-amber: #fbbf24; --odc-red: #fb7185; --odc-r-lg: 22px; --odc-r-md: 16px; --odc-r-sm: 12px; --odc-font-display: "Barlow Condensed", "Inter", system-ui, sans-serif; --odc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; } html { background: var(--odc-bg); } body.odc-bg { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--odc-font-body); background: var(--odc-bg); color: var(--odc-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* ── Ambiente: luci da stadio + grana ─────────────────────────────────── */ .odc-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } .odc-glow--gold { width: 72vmax; height: 72vmax; top: -28vmax; left: -20vmax; background: radial-gradient(closest-side, rgba(247, 179, 43, 0.20), transparent 70%); animation: odcDriftA 26s ease-in-out infinite alternate; } .odc-glow--cool { width: 64vmax; height: 64vmax; bottom: -30vmax; right: -24vmax; background: radial-gradient(closest-side, rgba(59, 130, 246, 0.14), transparent 70%); animation: odcDriftB 32s ease-in-out infinite alternate; } @keyframes odcDriftA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } } @keyframes odcDriftB { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-5vmax, -4vmax, 0) scale(1); } } .odc-noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,"); } /* Contenuto sopra l'ambiente */ .odc-layer { position: relative; z-index: 1; } /* ── Tipografia ───────────────────────────────────────────────────────── */ .odc-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--odc-gold); margin: 0; } .odc-display { font-family: var(--odc-font-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; margin: 0; } .odc-display--gold { background: var(--odc-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .odc-sub { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--odc-ink-muted); margin: 0; } .odc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Bottoni ──────────────────────────────────────────────────────────── */ .odc-btn { appearance: none; border: 1px solid transparent; background: none; color: inherit; font: inherit; width: 100%; height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--odc-r-md); font-size: 15px; font-weight: 700; letter-spacing: -0.1px; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .odc-btn:active { transform: scale(0.97); } .odc-btn:disabled { opacity: 0.55; cursor: not-allowed; } .odc-btn:focus-visible { outline: 2px solid rgba(247, 179, 43, 0.85); outline-offset: 2px; } .odc-btn--apple { background: linear-gradient(180deg, #101319, #05070c); color: #fff; border-color: rgba(255, 255, 255, 0.16); } .odc-btn--google { background: #fff; color: #17181c; } .odc-btn--glass { background: var(--odc-surface); color: var(--odc-ink); border-color: var(--odc-stroke); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .odc-btn--gold { background: var(--odc-grad-gold); color: #221302; font-weight: 800; box-shadow: 0 14px 38px rgba(240, 148, 12, 0.28); } /* ── Divider ──────────────────────────────────────────────────────────── */ .odc-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .odc-divider::before, .odc-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.10); } .odc-divider span { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--odc-ink-dim); white-space: nowrap; } /* ── Badge stato ──────────────────────────────────────────────────────── */ .odc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; } .odc-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .odc-badge--open { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); } .odc-badge--open .dot { animation: odcPulse 1.6s ease-in-out infinite; } .odc-badge--soon { color: #fcd34d; background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.32); } .odc-badge--closed { color: rgba(247, 249, 252, 0.62); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } .odc-badge--done { color: rgba(247, 249, 252, 0.55); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); } @keyframes odcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 55% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } } /* ── Skeleton ─────────────────────────────────────────────────────────── */ .odc-skel { border-radius: var(--odc-r-lg); background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 60%); background-size: 200% 100%; animation: odcShimmer 1.4s ease-in-out infinite; border: 1px solid rgba(255, 255, 255, 0.07); } @keyframes odcShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* ── Animazioni d'ingresso ────────────────────────────────────────────── */ @keyframes odcFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes odcPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .odc-anim-pop { animation: odcPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .odc-anim-up { animation: odcFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .odc-d1 { animation-delay: 0.08s; } .odc-d2 { animation-delay: 0.16s; } .odc-d3 { animation-delay: 0.24s; } .odc-d4 { animation-delay: 0.32s; } .odc-d5 { animation-delay: 0.40s; } .odc-d6 { animation-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .odc-glow--gold, .odc-glow--cool, .odc-anim-pop, .odc-anim-up, .odc-badge--open .dot, .odc-skel { animation: none !important; } .odc-anim-pop, .odc-anim-up { opacity: 1; transform: none; } }