/* ============================================================ TORNEIGS D'ESCACS DE CATALUNYA · Estil Paleta inspirada en marc-lozano-escacs-punch.html ============================================================ */ :root { --thead-h: 38px; /* alçada fixa de la capçalera de les taules (vegeu .table-card::before) */ /* ---- MODE CLAR "ESPECTRE" (aurora + vidre, alt contrast) ---- */ --bg: #f5f5f7; /* el gris clar d'apple.com */ --bg2: #ffffff; --surface: #ffffff; --surface-2: #ececf0; /* Res de text gris: la jerarquia la fan la mida i el pes, no la descolorida. L'unic to clar es --ink-ghost, i nomes per a placeholders, que han de semblar buits. */ --ink: #060b16; --ink-soft: #18202f; --ink-faint: #333d52; --ink-ghost: #6e7b92; --line: rgba(6,11,22,.13); --line-strong:rgba(6,11,22,.26); /* superfícies de vidre (només mode clar) */ --glass: rgba(255,255,255,.94); --glass-2: rgba(255,255,255,.86); --glass-3: rgba(255,255,255,.96); /* taula */ --glass-card:rgba(255,255,255,.97); /* targetes */ --card-line: rgba(13,17,23,.08); /* cantell de targetes i taula */ --blur: blur(10px) saturate(1.05); /* Capçalera i peu SENSE fons propi: l'aurora del body ha de continuar de dalt a baix sense bandes. */ --band: transparent; /* ---- Paleta de sistema (referencia: colors de sistema d'Apple) ---- Cada to te una feina assignada i no se'n surt. Dues variants per to: la viva, per a farcits, punts i distintius; i la profunda (-ink), per quan el to ha de ser TEXT sobre un farcit clar, on la viva no arribaria a llegir-se. indigo accent del lloc, elo estandard blau elo rapid, torneigs propers turquesa elo llampec verd torneig en joc gris torneig finalitzat purpura GM vermell IM taronja FM groc CM rosa "Nou", favorits, destacats */ --violet: #5856d6; --violet-ink:#443fbb; --violet-bg:#e9e8fb; /* indigo */ --cyan: #0a84ff; --cyan-ink: #0062cc; --cyan-bg: #e2efff; /* blau */ --teal: #00c7be; --teal-ink: #00736c; --teal-bg: #dcf6f4; /* turquesa */ --green: #2da160; --green-ink: #1b7544; --green-bg: #dcf3e5; /* verd equilibrat */ --slate: #8e8e93; --slate-ink: #55555c; --slate-bg: #eceef1; /* gris */ --pink: #ff2d55; --pink-ink: #c40e33; --pink-bg: #ffe3e9; /* rosa */ --tit-gm: #9c27b0; /* purpura */ --tit-im: #d32f2f; /* vermell */ --tit-fm: #f57c00; /* taronja */ --tit-cm: #ffb300; /* ambre */ /* Noms historics conservats perque els fan servir regles antigues */ --orange: #ff9500; --orange-ink:#a35c00; --orange-bg:#ffeed6; /* taronja · propers */ --amber: var(--orange); --amber-bg: var(--orange-bg); /* nom historic */ --lime: var(--teal); --lime-bg: var(--teal-bg); --accent: var(--violet); --on-accent: #ffffff; /* text sobre fons d'accent (clar: blanc) */ --shadow: 0 1px 2px rgba(15,22,38,.05), 0 8px 26px rgba(15,22,38,.07); --shadow-lg: 0 18px 48px rgba(15,22,38,.16); --radius: 18px; /* Dues families, sense excepcions: Bricolage nomes als titulars, Google Sans Flex a tot la resta. --mono es conserva com a nom historic perque el fan servir moltes regles, pero apunta al cos. */ --display:"Bricolage Grotesque", system-ui, sans-serif; --body:"Google Sans Flex", system-ui, -apple-system, sans-serif; --mono:"Google Sans Flex", system-ui, -apple-system, sans-serif; --maxw: 1150px; } html.dark { /* ---- MODE FOSC (paleta "punch") ---- */ --bg: #0a0a0f; --bg2: #12121c; --surface: #15151f; --surface-2: #1c1c28; --ink: #ffffff; --ink-soft: #c7c5d6; --ink-faint: #8a889c; --ink-ghost: rgba(255,255,255,.34); --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.22); --lime: #c6ff3f; --lime-bg:rgba(198,255,63,.14); --violet: #9d86ff; --violet-bg:rgba(123,92,255,.20); --cyan: #3fe0ff; --cyan-bg:rgba(63,224,255,.16); --pink: #ff5c9d; --pink-bg:rgba(255,92,157,.18); --amber: #ffb84d; --amber-bg:rgba(255,184,77,.16); --green: #4ade80; --green-bg:rgba(74,222,128,.16); --slate: #94a3b8; --slate-bg:rgba(148,163,184,.16); --teal: #2dd4bf; --teal-bg:rgba(45,212,191,.16); --accent: var(--lime); --on-accent: #0a0a0f; /* text sobre fons d'accent (fosc: negre) */ --shadow: 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 14px 50px rgba(0,0,0,.55); --glass: var(--surface); --glass-2: var(--surface-2); --glass-3: var(--surface); --glass-card: var(--bg2); --card-line: var(--line); --blur: none; --band: var(--bg2); } * { margin:0; padding:0; box-sizing:border-box; } /* Transicions de tema NOMÉS en propietats de color, i desactivades en càrrega */ html.no-transition *, html.no-transition *::before, html.no-transition *::after { transition: none !important; } html { scroll-behavior:smooth; overflow-x:hidden; max-width:100%; scrollbar-gutter:stable; } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; /* Mateix render a tot el lloc: el suavitzat en escala de grisos es uniforme tant si l'element viu al flux normal com si esta en una capa del compositor, i evita que les targetes i la taula es vegin diferent. La Google Sans Flex hi guanya definicio. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11" on, "calt" on, "kern" on, "liga" on; letter-spacing: 0.012em; overflow-x: hidden; max-width: 100%; min-height: 100vh; } ::selection { background: var(--accent); color: var(--on-accent); } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } .wrap { width:100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; min-width:0; } /* ---- Aurora del mode clar: capa fixa de degradats, sense blur ni animació (barata i visible també en mòbil) ---- */ html:not(.dark) body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; /* Aurora discreta: el color viu als marges i el centre queda net, que és on hi ha les targetes i la taula. Fora el rosa, que queia just darrere del contingut i era el que feia soroll. Paleta reduïda a violeta de marca amb un toc de cian a dalt a la dreta. Per pujar o baixar la intensitat, toca només les opacitats. */ background: radial-gradient(960px 660px at -8% -16%, rgba(109,61,255,.085), transparent 62%), radial-gradient(800px 560px at 106% -8%, rgba(8,145,178,.055), transparent 60%), radial-gradient(860px 660px at 50% 120%, rgba(99,102,190,.04), transparent 64%); } /* ---- Blobs (només mode fosc) ---- */ .blob { display:none; position:fixed; border-radius:50%; filter:blur(100px); opacity:.4; z-index:0; pointer-events:none; } html.dark .blob { display:block; animation:float 20s ease-in-out infinite; } .blob.b1 { width:460px; height:460px; background:var(--violet); top:-180px; left:-140px; } .blob.b2 { width:400px; height:400px; background:var(--pink); top:25%; right:-180px; animation-delay:-7s; } .blob.b3 { width:360px; height:360px; background:var(--cyan); bottom:-140px; left:25%; animation-delay:-13s; opacity:.3; } @keyframes float { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)} 66%{transform:translate(-30px,30px) scale(.95)} } .page { display:flex; flex-direction:column; min-height:100vh; position:relative; z-index:1; } /* ============================================================ VIDRE (només mode clar) — les superfícies deixen passar l'aurora del fons. En mode fosc --blur és `none` i els fons tornen a ser opacs, així que aquest bloc no hi actua. ============================================================ */ /* --- Superfícies translúcides SENSE desenfocat --- Són moltes (una per fila, una per targeta) i algunes es mouen o canvien de fons en passar-hi el rató. Amb backdrop-filter cada hover obliga a recalcular el desenfocat i l'animació va a batzegades, així que aquí només hi ha transparència. */ /* El vidre viu als tokens (--glass*, --blur), no en regles `html:not(.dark) .x`: aquelles puntuaven 0-2-1 i guanyaven a `.chip.active` o `.fav-btn.active` (0-2-0), que és per què els filtres actius perdien el fons de color. En mode fosc els tokens apunten a les superfícies opaques i --blur val `none`, així que no cal cap excepció. */ /* ============================================================ AVISOS (bloc de notificació sobre el títol) ============================================================ */ .avisos-box { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:14px 24px 0; display:flex; flex-direction:column; gap:10px; } .avis { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; padding:15px 48px; background:var(--cyan-bg); border:none; border-radius:14px; color:var(--cyan); font-weight:600; text-align:center; } .avis-ic { flex:none; display:inline-flex; align-items:center; font-size:1.1rem; } .avis-text { line-height:1.4; } .avis-text-link { color:inherit; text-decoration:none; } .avis-text-link:hover { text-decoration:underline; } .avis-link { display:inline-flex; vertical-align:middle; align-items:center; } .avis-close { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:none; border:none; color:var(--ink-faint); cursor:pointer; transition:background-color .15s ease, color .15s ease; } .avis-close:hover { background:var(--surface-2); color:var(--ink); } /* ============================================================ ETIQUETA CCAT (Circuit Català) i FILA/GRUP DESTACAT ============================================================ */ .ccat-tag { display:inline-flex; align-items:center; vertical-align:middle; margin-right:8px; padding:2px 7px; border-radius:6px; font-family:var(--body); font-size:.68rem; font-weight:800; letter-spacing:.05em; background:var(--cyan); color:#fff; line-height:1.3; white-space:nowrap; position:relative; top:-1px; } html.dark .ccat-tag { background:var(--cyan); color:#0a0a0f; } /* Marca amb degradat (només mode clar; en fosc el lime pla ja té prou força) */ html:not(.dark) .knight { background:linear-gradient(140deg,#7c4dff,#e11d6f); box-shadow:0 2px 8px rgba(109,61,255,.18); } html:not(.dark) .brand-title .ln { /* Degradat original: aquests tres valors no surten de la paleta de dades, son la marca. No els toquis en canviar els tokens. El titol va en dues linies i totes dues es reparteixen UN sol degradat, com si fossin una linia partida: la primera en mostra l'inici (fosc -> lila) i la segona el final (lila -> magenta). L'amplada exacta del fons la posa fitBrandGradient() a script.js; els percentatges d'aqui son l'aproximacio per si no s'executa. */ background-image:linear-gradient(96deg, #14151f 30%, #6d3dff 70%, #e11d6f); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; } html:not(.dark) .brand-title .ln:first-child { background-size:172% 100%; background-position:0 0; } html:not(.dark) .brand-title .ln:last-child { background-size:240% 100%; background-position:100% 0; } .month-group.is-featured .table-card { border-color:var(--line); } .card-featured .card-top-bar { background:var(--amber); } /* A la vista TAULA, el grup Destacats es mostra sempre com a targetes (també en mòbil: una per fila, amb cartell si n'hi ha). */ /* Amplada de les targetes destacades segons quantes n'hi hagi: 1 → 1/2 de l'amplada, 2 i 3 → 1/3 cadascuna, 4 o més → 1/4. */ .featured-as-cards[data-cols="1"] .cards-grid, .featured-as-cards[data-cols="2"] .cards-grid, .featured-as-cards[data-cols="3"] .cards-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } .featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } @media (max-width: 1180px) { .featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width: 960px) { .featured-as-cards[data-cols="2"] .cards-grid, .featured-as-cards[data-cols="3"] .cards-grid, .featured-as-cards[data-cols="4"] .cards-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ---------- Cartell als destacats ---------- Si hi ha cartell, la targeta sempre es mostra horitzontal a mitja amplada (2 columnes). 3 destacats → el tercer sota el primer, meitat dreta buida. Sense cartell (o si el hotlink falla) es manté el disseny habitual. */ .card-poster { display:none; } /* Només a la vista Taula (.featured-as-cards): a la vista Targetes els destacats es mostren com la resta de targetes, sense cartell */ .featured-as-cards .cards-grid:has(.card.has-poster) { grid-template-columns:repeat(2, minmax(0,1fr)) !important; } .featured-as-cards .card.has-poster { flex-direction:row; } .featured-as-cards .card.has-poster .card-top-bar { width:5px; height:auto; align-self:stretch; flex:none; } .featured-as-cards .card.has-poster .card-poster { display:block; flex:0 0 150px; align-self:stretch; position:relative; background:var(--line); border-right:1px solid var(--line); } /* La imatge és absoluta: no marca l'alçada de la targeta (la marca el text) i es retalla per sota */ .card-poster img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top; cursor:zoom-in; } /* Targeta destacada compacta a escriptori (vista Taula): data en una línia; temps, elo i ritme junts a la següent; botons petits */ .featured-as-cards .card .card-body { padding:14px 16px; gap:9px; } .featured-as-cards .card .card-title { font-size:1.05rem; letter-spacing:-.008em;} .featured-as-cards .card .card-meta { flex-direction:row; flex-wrap:wrap; gap:6px 14px; } .featured-as-cards .card .meta-row { font-size:.9rem; } .featured-as-cards .card .card-foot { padding-top:9px; gap:8px; justify-content:flex-start; margin-top:0; } .featured-as-cards .card .card-link { flex:0 0 auto; min-width:0; min-height:34px; height:34px; padding:0 16px; font-size:.84rem; } /* La font del cos té més ascendent que descendent: a escriptori el text quedava ~2px massa amunt. Només a escriptori (al mòbil ja surt centrat). */ @media (min-width: 821px) { .featured-as-cards .card .card-link { padding-top:2px; } } @media (max-width: 960px) { .featured-as-cards .card.has-poster .card-poster { flex-basis:120px; } } /* Mòbil: una targeta per fila, sense cartell (targeta vertical normal) */ @media (max-width: 820px) { .cards-grid[data-cols="1"], .cards-grid[data-cols="2"], .cards-grid[data-cols="3"], .cards-grid[data-cols="4"], .featured-as-cards .cards-grid:has(.card.has-poster) { grid-template-columns:1fr !important; } .featured-as-cards .card.has-poster { flex-direction:column; } .featured-as-cards .card.has-poster .card-top-bar { width:100%; height:5px; } .featured-as-cards .card.has-poster .card-poster { display:none; } .featured-as-cards .card .card-body { padding:12px 14px; gap:8px; } .featured-as-cards .card .card-title { font-size:1.02rem; } .featured-as-cards .card .status-badge { padding:4px 9px; font-size:.72rem; } .featured-as-cards .card .meta-row { font-size:.88rem; } .featured-as-cards .card .card-foot { padding-top:8px; } .featured-as-cards .card .card-link { min-height:36px; height:36px; font-size:.86rem; } } /* ---------- "Aforament complet" (Destacats amb l'etiqueta complet) ---------- Triangle que omple la cantonada inferior dreta de la targeta, amb el text en diagonal i en dues línies. Color: gris fosc neutre (#48484A), perquè no competeixi amb el violeta del botó Inscrits. El peu de la targeta reserva espai a la dreta perquè el triangle no tapi cap botó. */ .badge-complet { position:absolute; z-index:3; pointer-events:none; right:0; bottom:0; width:100px; height:100px; clip-path:polygon(100% 0, 100% 100%, 0 100%); background:#48484a; color:#fff; text-align:center; text-transform:uppercase; font-family:var(--body); font-size:.6rem; font-weight:800; line-height:1.15; letter-spacing:.06em; } /* Text centrat al baricentre del triangle (a 1/3 de cada catet) */ .badge-complet span { position:absolute; left:66.667%; top:66.667%; display:block; white-space:nowrap; transform:translate(-50%,-50%) rotate(-45deg); } html.dark .badge-complet { background:#636366; } /* un to més clar perquè es distingeixi de la targeta fosca */ .card.is-complet .card-foot { padding-right:50px; } /* Mòbil: més espai reservat per al triangle; els botons mantenen la seva amplada natural (com a escriptori i com a les targetes sense "complet") */ @media (max-width: 820px) { .card.is-complet .card-foot { flex-wrap:nowrap; padding-right:84px; gap:6px; } /* amb tres botons (Inscrits, Info, Cartell) cal menys marge lateral; en pantalles molt estretes el triangle pot tapar una mica el de Cartell */ .featured-as-cards .card.is-complet .card-link { padding-left:10px; padding-right:10px; } } /* Els botons de les targetes destacades van sense icona: al mockup són pastilles de text pur i el peu de la targeta es llegeix més net. */ .card .card-foot .card-link svg { display:none; } .card .card-foot .card-link { gap:0; } .card .card-foot .card-link.live svg { display:inline-flex; } /* Lightbox del cartell */ .lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.86); cursor:zoom-out; animation:lb-in .18s ease-out; } .lightbox img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); } .lightbox-close { position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; z-index:1; width:42px; height:42px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; } .lightbox-close:hover { background:rgba(255,255,255,.26); } /* Botó "Cartell" de les targetes de Destacats: només al mòbil (on el cartell no es veu a la targeta) i només si la targeta té cartell */ .card-link.card-poster-btn { display:none; font-family:inherit; cursor:pointer; } @media (max-width: 820px) { .featured-as-cards .card.has-poster .card-poster-btn { display:inline-flex; } .lightbox { padding:12px; } } body.lightbox-open { overflow:hidden; } @keyframes lb-in { from { opacity:0; } to { opacity:1; } } /* Partner: destacat premium (de pagament). Badge amb estrella + text. */ .partner-badge { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-right:8px; padding:2px 8px; border-radius:6px; font-family:var(--body); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:#a333c8; color:#fff; line-height:1.3; white-space:nowrap; position:relative; top:-1px; } .partner-badge .star { font-size:.78rem; line-height:1; } html.dark .partner-badge { background:#d98ef0; color:#2a0a35; } /* Mòbil: si hi ha més etiquetes, Partner es queda només amb l'estrella */ @media (max-width: 820px) { .partner-badge.pb-compact { gap:0; padding-left:6px; padding-right:6px; } .partner-badge.pb-compact .pb-txt { display:none; } /* espai d'amplada zero: manté l'alçada de línia del text amagat, perquè el badge faci la mateixa alçada que els del costat */ .partner-badge.pb-compact::after { content:"\200b"; } } /* Labels (label:: a ETIQUETES): van després de Partner. Mateix format que Partner. */ .lbl-badge { display:inline-flex; align-items:center; vertical-align:middle; margin-right:8px; padding:2px 8px; border-radius:6px; font-family:var(--body); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1.3; white-space:nowrap; position:relative; top:-1px; } .lbl-red { background:#dc2626; color:#fff; } .lbl-amber { background:#f59e0b; color:#fff; } .lbl-blue { background:#06a59d; color:#fff; } /* aiguamarina (etiqueta Nou) */ .lbl-neutral { background:#e4e4ea; color:#18202f; } html.dark .lbl-red { background:#e5484d; color:#fff; } html.dark .lbl-amber { background:#ffb84d; color:#2b1a00; } html.dark .lbl-blue { background:#2dd4bf; color:#04211e; } html.dark .lbl-neutral { background:#2c2c3a; color:#e8e8f0; } /* Missatges (msg= a ETIQUETES): pastilles com els badges d'estat, sota els detalls del torneig i abans de la línia dels botons. Només a Destacats. */ .card-msgs { display:flex; flex-wrap:wrap; gap:6px; } .card-msg { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:14px; font-family:var(--body); font-size:.74rem; font-weight:700; line-height:1.3; } .featured-as-cards .card .card-msg { padding:4px 9px; font-size:.72rem; } /* Missatges neutres: fons gris, text ink, sense icona ni vora */ .card-msg { background:var(--surface-2); color:var(--ink); } /* Badges davant del nom: poc espai entre ells, una mica més abans del nom */ .card-title .title-badges > *, .t-badges > * { margin-right:4px; } .card-title .title-badges > *:last-child, .t-badges > *:last-child { margin-right:8px; } /* Mòbil: a la font del cos el text dels badges queda ~1px amunt (a escriptori no). Es baixa el text 1px sense canviar l'alçada; l'estrella es compensa. */ @media (max-width: 820px) { .partner-badge, .lbl-badge { padding-top:3px; padding-bottom:1px; } .ccat-tag { padding-top:3px; padding-bottom:1px; } .partner-badge .star { position:relative; top:-1px; } } /* Live: retransmissió en directe. Badge vermell amb punt pulsant. */ .live-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px; font-family:var(--body); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-decoration:none; background:#e0245e; color:#fff; line-height:1.3; white-space:nowrap; transition:.15s; } .live-badge:hover { background:#c01e50; } .live-inline { margin-right:8px; white-space:nowrap; } .live-inline .live-badge { vertical-align:middle; position:relative; top:-1px; } .live-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; box-shadow:0 0 0 0 rgba(255,255,255,.7); } /* El pols només quan hi ha retransmissió activa (torneig en joc) */ .is-live .live-dot { animation:livePulse 1.4s infinite; } @keyframes livePulse { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow:0 0 0 5px rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } } .card-link.live { display:inline-flex; align-items:center; gap:5px; background:#e0245e; color:#fff; border:none; font-weight:700; } .card-link.live:hover { background:#c01e50; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top:0; z-index:50; background: var(--band); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); } .header-in { display:flex; align-items:center; justify-content:space-between; height:88px; gap:16px; } .brand { display:flex; align-items:center; gap:14px; min-width:0; } .knight { flex:none; width:54px; height:54px; display:grid; place-items:center; background: var(--accent); color:var(--on-accent); border-radius:15px; font-size:1.95rem; transform:rotate(-8deg); box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent); } .knight.small { width:34px; height:34px; font-size:1.2rem; border-radius:10px; } .brand-text { display:flex; flex-direction:column; min-width:0; } .brand-title { margin:0; display:block; font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1.05; letter-spacing:-.03em; white-space:normal; overflow:visible; text-wrap:balance; } /* Cada linia del titol es un bloc tan ample com el seu text (vegeu BRAND_LINES a script.js). El farciment inferior, compensat amb marge negatiu, evita que el degradat retalli les lletres amb cua (g, y). */ .brand-title .ln { display:block; width:fit-content; padding-bottom:.08em; margin-bottom:-.08em; } /* Text nomes per a lectors de pantalla i cercadors (h1 de Jugadors) */ .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .brand-sub { font-size:.82rem; color:var(--ink-faint); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .header-actions { display:flex; align-items:center; gap:10px; flex:none; } .lang { display:flex; gap:3px; background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:4px; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } .lang button { font-family:var(--body); font-size:.85rem; font-weight:700; background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:6px 12px; border-radius:999px; transition:background-color .15s ease, color .15s ease; } .lang button.active { background:var(--ink); color:var(--surface); } .lang button:hover:not(.active) { color:var(--ink); } /* ---- Selector d'idioma desplegable (visible només en mòbil) ---- */ .lang-menu { position:relative; display:none; } .lang-menu .icon-btn { width:auto; gap:7px; padding:0 12px; } .lang-current { font-family:var(--body); font-weight:700; font-size:.9rem; } .lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; z-index:80; display:flex; flex-direction:column; min-width:150px; padding:6px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease, visibility .15s ease; } .lang-menu.open .lang-dropdown { opacity:1; visibility:visible; transform:none; } .lang-dropdown button { font-family:var(--body); font-size:.95rem; font-weight:600; text-align:left; background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:10px 14px; border-radius:9px; transition:background-color .15s ease, color .15s ease; } .lang-dropdown button:hover { background:var(--surface-2); color:var(--ink); } .lang-dropdown button.active { background:var(--accent); color:var(--on-accent); } .icon-btn { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--glass); color:var(--ink); cursor:pointer; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:border-color .15s ease, color .15s ease, transform .15s ease; } .icon-btn svg { width:18px; height:18px; } .icon-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); } /* ============================================================ MAIN / CONTROLS ============================================================ */ .main { flex:1; min-width:0; padding-top:32px; padding-bottom:48px; } .controls { margin-bottom:32px; display:flex; flex-direction:column; gap:18px; } .controls-row { display:flex; gap:14px; flex-wrap:wrap; } .search-box { position:relative; flex:1; min-width:240px; display:flex; align-items:center; } /* La lupa i la creu han d'anar per damunt de l'input. L'input porta backdrop-filter, i això li crea context d'apilament propi: passa a pintar-se al nivell z:0 dels elements posicionats i, com que al DOM va DESPRÉS de la lupa, la tapava. El z-index explícit torna a posar les icones al davant. */ .search-ic { position:absolute; left:14px; z-index:2; color:var(--ink-ghost); pointer-events:none; } .search-box input { width:100%; height:46px; padding:0 44px 0 44px; background:var(--glass); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-family:var(--body); font-size:1rem; font-weight:500; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:border-color .15s ease, box-shadow .15s ease; } .search-box input::placeholder { color:var(--ink-ghost); font-weight:500; } .search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .search-clear { position:absolute; right:10px; z-index:2; display:grid; place-items:center; width:28px; height:28px; border:none; border-radius:8px; background:var(--surface-2); color:var(--ink-soft); cursor:pointer; transition:.15s; } .search-clear:hover { background:var(--pink-bg); color:var(--pink); } .view-switch { display:flex; gap:3px; background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:4px; flex:none; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } .view-switch button { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; min-height:40px; border:none; background:none; color:var(--ink-soft); font-family:var(--body); font-size:.95rem; font-weight:700; border-radius:999px; cursor:pointer; transition:background-color .15s ease, color .15s ease; white-space:nowrap; } /* Sempre només icones. Al calaix del mòbil és una píndola (al costat de l'idioma); a la barra de selectors d'escriptori, un bloc de cantonades de 12px com els seus veïns (vegeu més avall). */ .view-switch button span { display:none; } .header-actions .view-switch button { min-height:0; height:29px; width:36px; padding:0; gap:0; } .header-actions .view-switch button svg { width:17px; height:17px; } @media (min-width: 821px) { .controls .view-switch { align-self:stretch; min-height:42px; padding:3px; gap:2px; border-radius:12px; } .controls .view-switch button { min-height:0; height:auto; width:38px; padding:0; gap:0; border-radius:9px; } .controls .view-switch button svg { width:18px; height:18px; } } .view-switch button.active { background:var(--ink); color:var(--surface); } .view-switch button:not(.active):hover { color:var(--ink); } /* ---- FILTRES (chips) ---- */ .filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .filters-label { display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-weight:700; font-size:.95rem; } .filters-label svg { color:var(--accent); } .chip-group { display:flex; gap:7px; flex-wrap:wrap; } .chip { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--line); background:var(--glass); color:var(--ink-soft); border-radius:999px; font-family:var(--body); font-size:.92rem; font-weight:700; cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease; white-space:nowrap; } .chip:hover { border-color:var(--line-strong); color:var(--ink); transform:translateY(-1px); } .chip.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .chip-std.active { background:var(--slate); border-color:var(--slate); color:#fff; } .chip-rap.active { background:var(--cyan); border-color:var(--cyan); color:#fff; } .chip-blz.active { background:var(--pink); border-color:var(--pink); color:#fff; } .chip-upcoming.active { background:color-mix(in srgb, var(--amber) 62%, #000); border-color:color-mix(in srgb, var(--amber) 62%, #000); color:#fff; } .chip-inprogress.active { background:color-mix(in srgb, var(--green) 80%, #000); border-color:color-mix(in srgb, var(--green) 80%, #000); color:#fff; } .chip-finished.active { background:color-mix(in srgb, var(--slate) 66%, #000); border-color:color-mix(in srgb, var(--slate) 66%, #000); color:#fff; } .chip-dot { width:9px; height:9px; border-radius:50%; flex:none; } .chip-upcoming .chip-dot { background:var(--amber); } .chip-inprogress .chip-dot { background:var(--green); } .chip-finished .chip-dot { background:var(--slate); } .chip.active .chip-dot { background:#fff; opacity:.75; } .chip-finished.active .chip-dot { background:#fff; opacity:.7; } /* En mode fosc, els colors intensos són neó (clars): el text ha de ser fosc */ html.dark .chip-rap.active, html.dark .chip-blz.active, html.dark .chip-upcoming.active, html.dark .chip-inprogress.active, html.dark .chip-std.active, html.dark .chip-finished.active { color:#0a0a0f; } html.dark .chip.active .chip-dot { background:#0a0a0f; opacity:.55; } .chip-sep { width:1px; height:26px; background:var(--line); margin:0 2px; } /* ------------------------------------------------------------ Escriptori: cada família de filtres és un ÚNIC control segmentat (rectangle arrodonit amb divisors verticals). En mòbil (drawer) els chips segueixen sent pastilles soltes. ------------------------------------------------------------ */ @media (min-width: 821px) { .chip-group { display:inline-flex; align-items:stretch; flex-wrap:nowrap; gap:0; height:42px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } .chip-group .chip { height:auto; padding:0 14px; border:none; border-radius:0; box-shadow:none; transform:none; } /* només els inactius perden el fons: els .active conserven el seu color */ .chip-group .chip:not(.active) { background:transparent; } .chip-group .chip + .chip { border-left:1px solid var(--line); } .chip-group .chip:hover { transform:none; } .chip-group .chip:not(.active):hover { background:var(--surface-2); color:var(--ink); } /* l'actiu manté el seu color de fons i de text; només s'il·lumina una mica */ .chip-group .chip.active:hover { filter:brightness(1.08); } .chip-sep { display:none; } /* els dos rectangles ja se separen sols */ } /* etiquetes llargues/curtes dels chips de ritme */ .lbl-short { display:none; } .lbl-long { display:inline; } .count-badge { margin-left:auto; display:inline-flex; align-items:baseline; gap:6px; padding:8px 16px; background:transparent; border:1px solid var(--line); border-radius:12px; font-size:.92rem; color:var(--ink-soft); font-weight:600; } .count-num { font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--accent); line-height:1; letter-spacing:-.02em; } /* Tema clar: el nombre en ink (en fosc es queda amb l'accent) */ html:not(.dark) .count-num { color:var(--ink); } /* ============================================================ BARRA DE CONTROLS EN UNA SOLA LÍNIA (escriptori ample) ------------------------------------------------------------ `display:contents` dissol .controls-row i .filters perquè els seus fills passin a ser items directes de .controls; l'ordre visual el fixa `order`. Per sota de 1250px es torna al layout de dues files (i per sota de 820px, al drawer). 1250px = el mínim on hi cap el castellà, que és l'idioma amb les etiquetes més llargues (Relámpago / Finalizados). ============================================================ */ @media (min-width: 1250px) { .controls { flex-direction:row; align-items:center; flex-wrap:nowrap; gap:11px; margin-bottom:28px; } .controls-row, .filters { display:contents; } /* el buscador és l'únic element elàstic; la resta no s'encongeix mai */ .search-box { order:1; flex:1 1 auto; min-width:220px; } .filters-label{ display:none; } /* l'embut sobra: els chips ja s'expliquen sols */ #rhythm-chips { order:2; flex:0 0 auto; } #status-chips { order:3; flex:0 0 auto; } .fav-btn { order:4; flex:0 0 auto; } .view-switch { order:5; flex:0 0 auto; } .count-badge { order:6; margin-left:0; flex:0 0 auto; } /* alçades homogènies a tota la barra: 42px */ .search-box input { height:42px; } .count-badge { padding:0 15px; height:42px; align-items:center; } } /* ============================================================ FAVORITS ============================================================ */ .fav-btn { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 12px; flex:none; background:var(--glass); border:1px solid var(--line); border-radius:12px; color:var(--ink-soft); font-family:var(--body); font-size:.95rem; font-weight:700; cursor:pointer; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:background-color .15s ease, color .15s ease, border-color .15s ease; } .fav-btn:hover { color:var(--ink); border-color:#e0245e; } .fav-btn.has-favs svg { color:#e0245e; fill:#e0245e; } .fav-btn.active { background:#e0245e; border-color:#e0245e; color:#fff; } .fav-btn.active svg { color:#fff; fill:#fff; } .fav-heart { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border:none; background:none; border-radius:8px; padding:0; color:color-mix(in srgb, var(--ink-faint) 42%, transparent); cursor:pointer; transition:color .15s ease, transform .15s ease, background-color .15s ease; } .fav-heart:hover { color:#e0245e; background:color-mix(in srgb, #e0245e 10%, transparent); } .fav-heart:active { transform:scale(.9); } .fav-heart.is-fav { color:#e0245e; } .fav-heart.is-fav svg { fill:#e0245e; } .card-head-r { display:flex; align-items:center; gap:4px; flex:none; } /* A la taula, cor i botons d'enllaç com a blocs centrats: així queden exactament a la mateixa alçada (en línia, cadascun seguia la seva línia base) */ table.t td > .fav-heart { display:flex; margin:0 auto; } table.t td > .link-btn { display:grid; margin:0 auto; } /* Amb ratolí: el cor queda molt tènue i es fa visible en passar per la fila o la targeta. En pantalles tàctils (sense hover) es manté com abans. */ @media (hover: hover) { .fav-heart:not(.is-fav) { color:color-mix(in srgb, var(--ink-faint) 20%, transparent); } table.t tbody tr:hover .fav-heart:not(.is-fav), .card:hover .fav-heart:not(.is-fav) { color:color-mix(in srgb, var(--ink-faint) 75%, transparent); } .fav-heart:not(.is-fav):hover { color:#e0245e !important; } } /* Mòbil: el botó Favorits es mou al costat del recompte */ .mobile-count .fav-btn { height:38px; padding:0 11px; flex:0 0 auto; margin-right:0; } .mobile-count .llista-btn { height:38px; padding:0 11px; flex:0 0 auto; width:auto; } /* netejar filtres: a l'esquerra del comptador (ja s'amaga sol si no hi ha filtres) */ .mobile-count .reset-btn { height:38px; width:38px; flex:0 0 auto; border-radius:12px; } /* Només apareixen a la fila mòbil si hi ha algun favorit / jugador triat */ .mobile-count .fav-btn:not(.has-favs), .mobile-count .llista-btn:not(.has-items) { display:none; } /* ============================================================ GRUPS ============================================================ */ /* min-width:0 en tota la cadena de contenidors perquè la taula ampla (min-width) NO infli l'amplada de la pàgina; només .table-scroll fa scroll horitzontal. */ .view { display:flex; flex-direction:column; gap:38px; min-width:0; max-width:100%; } .month-group { min-width:0; max-width:100%; } .month-group.is-finished { opacity:.82; } .month-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:nowrap; cursor:pointer; user-select:none; border-radius:12px; padding:4px; margin-left:-4px; margin-right:-4px; transition:background-color .15s ease; } .month-head:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); } .month-head:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* filet fi que omple l'espai entre el recompte i el botó de plegar. min-width:0 perquè, quan hi ha poc espai, s'encongeixi ell abans que el títol: si no, el nom del mes es parteix en dues línies. */ .month-head::after { content:""; order:1; flex:1 1 0; min-width:0; height:1px; background:var(--line); align-self:center; } .month-title { font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.035em; text-transform:capitalize; color:var(--ink); } .month-group.is-finished .month-title { color:var(--ink-faint); } .month-count { font-family:var(--mono); font-size:.9rem; font-weight:500; color:var(--ink-faint); letter-spacing:0; margin-left:-4px; } /* Botó de plegar/desplegar, empès a la dreta pel filet */ .month-toggle { order:2; flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; cursor:pointer; background:none; border:none; color:var(--ink-soft); transition:background-color .15s ease, color .15s ease; } .month-head:hover .month-toggle { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } /* Cos del grup: s'amaga quan el grup està plegat */ .month-group.collapsed .group-body { display:none; } .month-group.collapsed .month-head { margin-bottom:0; } /* ============================================================ TAULA (table-layout fixed => mateixes amplades a tots els mesos) ============================================================ */ .table-card { background:transparent; border:none; box-shadow:none; max-width:100%; min-width:0; } /* el scroll horitzontal viu NOMÉS aquí; width:100% + max-width el manté dins de la caixa encara que la taula interna sigui més ampla */ .table-scroll { overflow-x:auto; width:100%; max-width:100%; } /* border-collapse:separate perque les cel·les puguin dur radi propi */ table.t { width:100%; border-collapse:separate; border-spacing:0; font-size:1rem; min-width:780px; table-layout:fixed; } /* amplades fixes idèntiques per a tots els mesos; la columna del nom s'endú tot l'espai sobrant */ table.t col.c-name { width:auto; } table.t col.c-date { width:76px; } table.t col.c-end { width:70px; } table.t col.c-day { width:56px; } table.t col.c-rhythm { width:68px; } table.t col.c-time { width:112px; } table.t col.c-cat { width:80px; } table.t col.c-inscrits { width:70px; } table.t col.c-info { width:50px; } table.t col.c-fav { width:40px; } /* escriptori: padding lateral mínim a les columnes interiors */ @media (min-width: 821px) { table.t:not(.t-jug) thead th:not(:first-child), table.t:not(.t-jug) tbody td:not(:first-child) { padding-left:4px; padding-right:4px; } table.t:not(.t-jug) thead th:last-child, table.t:not(.t-jug) tbody td:last-child { padding-right:10px; } } /* Capçalera realment flotant: cap fons, cap vora. Les etiquetes viuen sobre el paper de la pàgina i el bloc blanc comença a la primera fila de dades, que és qui porta les cantonades arrodonides. */ table.t thead th { height:var(--thead-h); text-align:left; padding:6px 8px 10px; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); background:transparent; border:none; white-space:nowrap; user-select:none; } /* Sense border-radius: les capceleres formen una franja continua, no una filera de pastilles independents. */ table.t thead th.sortable { cursor:pointer; transition:color .15s ease, background-color .15s ease; } table.t thead th.sortable:hover { color:var(--accent); } table.t thead th.sorted { color:var(--ink); font-weight:700; } .th-in { display:inline-flex; align-items:center; gap:6px; } .sort-ic { opacity:.45; transition:.15s; flex:none; } th.sorted .sort-ic { opacity:1; color:var(--accent); } table.t thead th.center { text-align:center; } table.t thead th.center .th-in { justify-content:center; } table.t tbody td { padding:9px 8px; vertical-align:middle; background:var(--surface); border-bottom:1px solid var(--line); } table.t tbody tr:first-child td { border-top:1px solid var(--line); } table.t tbody td:first-child { border-left:1px solid var(--line); } table.t tbody td:last-child { border-right:1px solid var(--line); } table.t tbody tr:first-child td:first-child { border-top-left-radius:var(--radius); } table.t tbody tr:first-child td:last-child { border-top-right-radius:var(--radius); } table.t tbody tr:last-child td:first-child { border-bottom-left-radius:var(--radius); } table.t tbody tr:last-child td:last-child { border-bottom-right-radius:var(--radius); } table.t tbody tr { transition:background-color .15s; } table.t tbody tr:hover td { background:color-mix(in srgb, var(--accent) 8%, var(--surface)); } table.t tbody tr.row-finished td { color:var(--ink-faint); } .t-name { display:flex; align-items:center; gap:5px; } /* Nomes queda el punt d'estat: el cor ha passat a l'ultima columna */ .t-name-lead { display:flex; align-items:center; flex:none; } .t-name-lead .status-dot { margin:0 6px 0 2px; } .status-dot { width:10px; height:10px; border-radius:50%; flex:none; } .dot-upcoming { background:var(--amber); color:var(--amber); } .dot-inProgress { background:var(--green); color:var(--green); } .dot-finished { background:var(--slate); color:var(--slate); } .t-name-text { font-weight:600; font-size:.97rem; letter-spacing:-0.008em; color:var(--ink); line-height:1.3; } /* A escriptori les etiquetes flueixen dins el text; en mòbil el media query les converteix en una fila pròpia sobre el nom. */ .t-badges { display:inline; } .row-finished .t-name-text { color:var(--ink-soft); } /* Nom del torneig: tota la cel·la és clicable (l'enllaç s'estén amb ::after). El badge Live queda per sobre i conserva el seu propi enllaç. */ table.t td.c-name-cell { position:relative; } table.t td.c-name-cell.has-link { cursor:pointer; } .t-name-link { color:inherit; text-decoration:none; } .t-name-link::after { content:""; position:absolute; inset:0; } table.t tbody tr:hover .t-name-link { color:var(--accent); } .t-name-link:focus-visible { outline:none; } .t-name-link:focus-visible::after { outline:2px solid var(--accent); outline-offset:-3px; border-radius:inherit; } .t-badges .live-badge { position:relative; z-index:1; } td.center { text-align:center; } .t-date { font-family:var(--mono); font-weight:500; color:var(--ink); white-space:nowrap; font-size:.86rem; letter-spacing:0; font-variant-numeric:tabular-nums; } .t-muted { font-family:var(--mono); color:var(--ink-soft); white-space:nowrap; font-size:.84rem; font-weight:500; letter-spacing:0; font-variant-numeric:tabular-nums; } /* La columna de temps ha d'encabir controls llargs (ex. 90/40 SD/30 +30) en una sola línia, amb un padding lateral mínim perquè no robi amplada a la columna del nom. */ table.t th.c-time-cell, table.t td.c-time-cell { padding-left:6px; padding-right:6px; } /* la taula respira als extrems, però no entre columnes interiors */ table.t thead th:first-child, table.t tbody td:first-child { padding-left:16px; padding-right:14px; } table.t thead th:last-child, table.t tbody td:last-child { padding-right:16px; } table.t td.c-time-cell .t-muted { white-space:nowrap; } .rhythm-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.05em; cursor:pointer; transition:transform .15s ease; border:1px solid transparent; } .rhythm-badge:hover { transform:translateY(-1px) scale(1.04); } .rb-STD { background:var(--violet-bg); color:var(--violet-ink); } .rb-RAP { background:var(--cyan-bg); color:var(--cyan-ink); } .rb-BLZ { background:var(--teal-bg); color:var(--teal-ink); } html.dark .rb-STD { color:#cbd5e1; } .cat-pill { display:inline-block; vertical-align:middle; max-width:100%; font-size:.92rem; line-height:1.35; font-weight:500; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .link-btn { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; border:none; background:none; color:var(--ink-soft); transition:background-color .15s ease, color .15s ease; } /* Sense caixa: el fons només surt en passar-hi el cursor */ .link-btn:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } .link-btn.is-empty { opacity:.3; pointer-events:none; } .link-inscrits:hover { background:color-mix(in srgb, var(--cyan) 16%, transparent); color:var(--cyan); } /* ============================================================ TARGETES ============================================================ */ .cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:16px; } .card { position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--glass-card); border:1px solid var(--card-line); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); } .card-top-bar { height:5px; width:100%; } .bar-upcoming { background:var(--amber); } .bar-inProgress { background:var(--green); } .bar-finished { background:var(--slate); } .card-body { padding:18px; display:flex; flex-direction:column; gap:12px; flex:1; } .card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .card-title { font-family:var(--body); font-weight:600; font-size:1.1rem; line-height:1.25; letter-spacing:-.008em; color:var(--ink); } .status-badge { flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap; } .sb-upcoming { background:var(--amber-bg); color:var(--amber); } .sb-inProgress { background:var(--green-bg); color:var(--green); } .sb-finished { background:var(--slate-bg); color:var(--slate); } html.dark .sb-finished { color:#cbd5e1; } .card-meta { display:flex; flex-direction:column; gap:7px; } /* Dades en una sola línia de text (sense icones); si no hi cap, parteix entre elements */ .meta-row { color:var(--ink-soft); font-size:.92rem; line-height:1.7; font-weight:500; } .meta-it { white-space:nowrap; } .meta-sep { color:var(--ink-faint); } .meta-row strong { font-family:var(--mono); color:var(--ink); font-weight:500; font-size:.9em; letter-spacing:0; font-variant-numeric:tabular-nums; } .card-foot { display:flex; align-items:center; gap:9px; padding-top:11px; border-top:1px solid var(--line); margin-top:auto; } .card-link { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 13px; border-radius:11px; font-weight:800; font-size:.9rem; transition:transform .2s ease, box-shadow .2s ease; } .card-link.primary { background:var(--accent); color:var(--on-accent); } .card-link.secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); } /* Inscrits és el botó principal: fons d'accent amb text a sobre (violeta i blanc en clar, llima i negre en fosc). El defineix la regla base .card-link.primary; al tema clar només li traiem la vora (més avall). */ .card-link:hover { transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in srgb, var(--ink) 18%, transparent); } .card-link.is-empty { display:none; } /* Destacats: sense ombres ni efecte de hover, com la resta del disseny */ .month-group.is-featured .card, .month-group.is-featured .card:hover { box-shadow:none; transform:none; } /* Sense ombra, el cantell suau de targeta quedava més clar que la resta: s'iguala */ .month-group.is-featured .card { border-color:var(--line); } .month-group.is-featured .card-link, html:not(.dark) .month-group.is-featured .card-link.primary, .month-group.is-featured .card-link:hover { box-shadow:none; } /* ============================================================ ESTATS ============================================================ */ .empty, .loading { text-align:center; padding:80px 20px; } .empty-ic { font-size:4rem; margin-bottom:16px; opacity:.4; } .empty p, .loading p { color:var(--ink-soft); font-size:1.15rem; font-weight:600; } /* Skeleton de càrrega: capçalera + files grises amb "shimmer" */ .loading { text-align:left; padding:0; } .loading p { display:none; } .skel-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:4px; } .skel-head .sk { height:26px; border-radius:8px; } .skel-card { background:var(--glass-3); border:1px solid var(--card-line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:28px; } .skel-row { display:flex; align-items:center; gap:16px; padding:14px 18px; border-top:1px solid var(--line); } .skel-row:first-child { border-top:none; background:var(--surface-2); padding:12px 18px; } .sk { display:block; height:14px; border-radius:6px; background:var(--line); position:relative; overflow:hidden; } .sk::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg2) 60%, transparent), transparent); animation:shimmer 1.4s infinite; } @keyframes shimmer { to { transform:translateX(100%); } } .sk.dot { width:12px; height:12px; border-radius:50%; flex:none; } .sk.w1 { flex:1 1 auto; } .sk.w2 { width:80px; flex:none; } .sk.w3 { width:56px; flex:none; } .sk.w4 { width:34px; height:34px; border-radius:10px; flex:none; } @media (max-width: 820px) { .skel-row .sk.w2, .skel-row .sk.w3 { display:none; } } /* ============================================================ FOOTER + GOTOP ============================================================ */ .site-footer { border-top:1px solid var(--line); background:var(--band); margin-top:auto; } .foot-in { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px 24px; flex-wrap:wrap; } .foot-brand { font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--ink); } .foot-in p { color:var(--ink-faint); font-size:.95rem; font-weight:500; } /* Enllaços del footer */ .foot-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* El boto de cafe ocupa una fila propia sota els enllacos i la firma */ .foot-coffee { flex:1 0 100%; display:flex; justify-content:center; margin-top:6px; } .foot-links a { color:var(--ink-soft); font-weight:600; font-size:.92rem; text-decoration:none; padding:8px 12px; border-radius:10px; transition:.15s; white-space:nowrap; } .foot-links a:hover { color:var(--ink); background:var(--surface-2); } .foot-donate { display:inline-flex; align-items:center; gap:8px; border-radius:10px; background:var(--violet); color:#fff !important; font-weight:700 !important; padding:9px 18px 9px 14px !important; box-shadow:0 2px 10px color-mix(in srgb, var(--violet) 35%, transparent); } .foot-donate:hover { background:var(--violet) !important; filter:brightness(1.08); } .nav-link, .foot-donate { display:inline-flex; align-items:center; gap:6px; } .nav-ic { flex:none; } /* Distintiu "Nou" al costat d'un enllac del menu. El viu dins d'un .nav-link, que es inline-flex: alli el vertical-align no fa res i cal pujar-lo amb align-self. */ .nav-new { display:inline-flex; align-items:center; justify-content:center; margin-left:-3px; height:15px; padding:0 5px; border-radius:5px; font-size:.58rem; font-weight:700; line-height:1; letter-spacing:.06em; text-transform:uppercase; background:var(--pink); color:#fff; align-self:flex-start; margin-top:-1px; } .nav-new[hidden] { display:none; } html.dark .foot-donate { color:#fff !important; } /* Menú superior (només escriptori) */ .top-nav { display:flex; align-items:center; gap:4px; } .top-nav a { color:var(--ink-soft); font-weight:600; font-size:.965rem; text-decoration:none; padding:7px 9px; border-radius:10px; transition:.15s; white-space:nowrap; } .top-nav a:hover { color:var(--ink); background:var(--surface-2); } /* Pàgina actual */ .top-nav a[aria-current="page"] { color:var(--ink); background:var(--surface-2); } /* Pàgines de contingut (Sobre / Destaca) */ .content-page { max-width:760px; margin:0 auto; padding:20px 4px 40px; } .content-page h1 { font-family:var(--display); font-weight:800; font-size:2rem; color:var(--ink); margin-bottom:18px; line-height:1.15; } .content-page h2 { font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--ink); margin:28px 0 10px; } .content-page p { color:var(--ink-soft); font-size:1.02rem; line-height:1.65; margin-bottom:14px; } .content-page strong { color:var(--ink); font-weight:700; } .content-page a { color:var(--accent); font-weight:600; text-decoration:none; } .content-page a:hover { text-decoration:underline; } .content-list { color:var(--ink-soft); font-size:1.02rem; line-height:1.7; margin:0 0 14px 20px; } .content-list li { margin-bottom:6px; } .content-note { font-size:.92rem; color:var(--ink-faint); border-left:3px solid var(--line-strong); padding-left:14px; } .content-back { margin-top:32px; } .content-back a { color:var(--ink-soft); } /* Botó de tema flotant a les pàgines de contingut */ .theme-fab { position:fixed; top:18px; right:18px; z-index:50; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } #gotop { position:fixed; right:24px; bottom:24px; z-index:60; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; background:var(--accent); color:var(--on-accent); font-size:1.5rem; line-height:1; box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 40%, transparent); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, visibility .3s, transform .3s; } #gotop.show { opacity:1; visibility:visible; transform:none; } /* ============================================================ RESPONSIVE Nota: alguns mòbils (Android) amb "lletra gran" del sistema inflen els píxels CSS, de manera que el viewport efectiu pot arribar a ~780px en vertical. Per això el breakpoint principal és ample (820px) i el layout fa servir flex-wrap robust. ============================================================ */ @media (max-width: 1024px) { .wrap { padding: 0 20px; } } /* ---- Capçalera d'escriptori: nivells d'amplada ---- La capçalera porta el títol en dues línies, cinc enllaços, l'idioma i el tema (idèntica a totes les pàgines). A mesura que la finestra s'estreny es va compactant per passos (lletra i marges) perquè no s'hagi de partir mai el títol en tres línies. Per sota de 821px ja mana el calaix (vegeu MÒBIL més avall). Els llindars surten de mesurar el cas més ample: Jugadors en castellà. */ /* Escriptori: selector d'idioma més petit (menys padding), perquè no competeixin amb el menú. El mòbil (calaix) no es toca. */ @media (min-width: 821px) { .header-actions .lang { padding:3px; gap:2px; } .header-actions .lang button { padding:4px 9px; font-size:.8rem; } /* enllaços del menú: el fons del hover / pàgina actual fa la mateixa alçada que els selectors (32px) */ .header-actions .top-nav a { height:32px; padding-top:0; padding-bottom:0; } /* el botó de tema, a la mateixa alçada que els selectors (32px) */ .header-actions #theme-toggle { width:32px; height:32px; border-radius:10px; } .header-actions #theme-toggle svg { width:16px; height:16px; } } @media (min-width: 821px) and (max-width: 1220px) { .brand-title { font-size:1.55rem; line-height:1.1; } } @media (min-width: 821px) and (max-width: 1075px) { .header-in { gap:12px; } .brand { gap:12px; } .knight { width:48px; height:48px; font-size:1.7rem; border-radius:14px; } .brand-title { font-size:1.4rem; } .top-nav a { font-size:.92rem; padding:7px 8px; } } @media (min-width: 821px) and (max-width: 1000px) { .header-in { gap:10px; } .header-actions { gap:8px; } .brand { gap:10px; } .knight { width:44px; height:44px; font-size:1.55rem; border-radius:13px; } .brand-title { font-size:1.2rem; } .top-nav { gap:2px; } .top-nav a { font-size:.88rem; padding:6px 6px; } .header-actions .lang button { padding:4px 7px; } } @media (min-width: 821px) and (max-width: 885px) { .header-actions { gap:6px; } .knight { width:40px; height:40px; font-size:1.4rem; border-radius:12px; } .brand-title { font-size:1.05rem; } .top-nav { gap:0; } .top-nav a { font-size:.85rem; padding:6px 5px; } .header-actions .lang { gap:1px; } .header-actions .lang button { padding:4px 6px; font-size:.78rem; } .header-actions .icon-btn { width:34px; height:34px; } } /* ============================================================ MENÚ LATERAL (DRAWER) — per defecte ocult; només s'activa en mòbil. A escriptori el botó hamburguesa i el recompte mòbil no es mostren mai. ============================================================ */ .menu-btn { display: none; } .mobile-count { display: none; } .drawer, .drawer-overlay { display: none; } .drawer-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #0b1220 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .drawer-overlay.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; z-index: 61; width: min(88vw, 380px); height: 100%; background: var(--bg2); border-left: 1px solid var(--line); box-shadow: none; /* nomes en obrir-se; vegeu .ficha */ transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; overflow: hidden; will-change: transform; contain: layout paint; } .drawer.open { transform: translateX(0); box-shadow: -18px 0 44px color-mix(in srgb, #0b1220 22%, transparent); } /* Capcalera compacta: cada pixel que ocupa aqui es un pixel menys per als filtres, que son el motiu pel qual s'obre el calaix. */ .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .drawer-title { font-weight: 700; font-size: 1rem; color: var(--ink); } .drawer-head .icon-btn { width: 34px; height: 34px; } .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 14px; } /* ---- Fila mòbil sota la capçalera ---- Cercador (elàstic) + Favorits + comptador, tots tres encapsulats i amb la mateixa alçada. El JS hi mou el cercador i Favorits des de .controls quan s'entra en mòbil. */ .mobile-count { align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 14px; color: var(--ink-soft); font-weight: 600; font-size: .85rem; } .mobile-count .count-num { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--accent); line-height: 1; letter-spacing:-.02em; } .mobile-count .count-pill { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 38px; min-width: 44px; padding: 0 13px; background: transparent; border: 1px solid var(--line); border-radius: 12px; } /* el cercador és l'únic element que s'estira; base 0 i min-width 0 perquè no pugui inflar la fila ni desbordar-la mai */ .mobile-count { flex-wrap: nowrap; } .mobile-count .search-box { flex: 1 1 0; min-width: 0; } .mobile-count .search-box input { height: 38px; padding: 0 36px 0 38px; font-size: .92rem; border-radius: 12px; } .mobile-count .search-ic { left: 12px; width: 17px; height: 17px; } .mobile-count .search-clear { right: 7px; width: 24px; height: 24px; } /* ---- Segona fila mòbil: Club · Títol · Categoria · Gènere ---- El JS hi mou els quatre desplegables quan s'entra en mòbil. */ .mobile-filters { display: none; } /* MÒBIL / TAULETA EN VERTICAL */ @media (max-width: 820px) { body { font-size: 16px; } .wrap { padding: 0 16px; } /* blobs decoratius fora en mòbil (eviten qualsevol scroll lateral) */ .blob { display: none !important; } /* ---- HEADER: títol a l'esquerra, hamburguesa a la dreta ---- */ .site-header { position: static; } /* evita problemes de sticky amb lletra gran */ /* el drawer i el seu fons s'activen en mòbil */ .drawer { display: flex; } .drawer-overlay { display: block; } .avisos-box { padding: 12px 10px 0; } .avis { padding:12px 40px 12px 16px; gap:8px; } .avis-ic { display:none; } .avis-text { line-height:1.25; } .header-in { min-height: 0; height: auto; padding: 14px 16px; gap: 12px; flex-wrap: nowrap; align-items: center; } .brand { gap: 12px; flex: 1 1 auto; min-width: 0; } .brand-title { font-size: 1.3rem; line-height: 1.14; white-space: normal; } .knight { width: 46px; height: 46px; font-size: 1.6rem; border-radius: 13px; } /* els controls de capçalera es mouen dins el drawer (via JS): fora del flux */ .header-actions { display: none; } .menu-btn { display: inline-grid; flex: 0 0 auto; width: 48px; height: 48px; } /* recompte destacat sobre les llistes */ .mobile-count { display: flex; } /* fila de filtres just sota el cercador i el comptador */ .mobile-count:has(+ .mobile-filters:not(:empty)) { margin-bottom: 8px; } .mobile-filters:not(:empty) { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 14px; } .mobile-filters .f-sel { flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: 38px; font-size: .8rem; font-weight: 600; padding: 0 20px 0 9px; border-radius: 11px; background-position: right 4px center; text-overflow: ellipsis; } /* ---- CONTROLS: fora del flux principal; viuen dins el drawer ---- */ .main { padding-top: 12px; } .controls { display: none; } /* ===== Contingut reubicat dins el DRAWER ===== Tots els controls comparteixen la mateixa alçada (--ctrl-h), mida de lletra i padding perquè quedin visualment igualats. */ .drawer-body { --ctrl-h: 42px; --ctrl-fs: .9rem; gap: 12px; } /* Ordre del calaix: 1) una sola línia amb idioma · vista · tema, 2) enllaços a dues columnes, 3) filtres. El selector de vista viu a .controls; el JS el mou aquí dins mentre s'és en mòbil. Al DOM el menú va abans que els selectors: l'ordre visual el posa grid-row. */ /* Graella de tres columnes: idioma (esquerra) · vista (centre) · tema (dreta). Una graella i no un flex amb salt de línia, perquè aquesta fila no s'ha de partir mai; les mides dels controls es redueixen amb l'amplada de la pantalla (clamp) per cabre fins a 320px. A les pàgines sense selector de vista la columna central queda buida. */ .drawer-body .header-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 6px; flex: 0 0 auto; } .drawer-body .header-actions { --sel-h: 38px; } /* selectors: més baixos que els enllaços (42px) */ .drawer-body .header-actions > .lang { grid-row: 1; grid-column: 1; justify-self: start; } .drawer-body .header-actions > .view-switch { grid-row: 1; grid-column: 2; justify-self: center; } .drawer-body .header-actions > #theme-toggle { grid-row: 1; grid-column: 3; justify-self: end; } /* .top-nav esta amagat a la capcalera en mobil, pero dins del calaix ha de tornar a sortir. Els cinc enllacos van en una graella de dues columnes; el cinque queda sol a l'esquerra, amb el forat al costat. */ .drawer-body .top-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; grid-row: 2; grid-column: 1 / -1; width: 100%; } .drawer-body .top-nav a { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 7px); width: 100%; min-width: 0; height: var(--ctrl-h); padding: 0 clamp(6px, 2.4vw, 10px); border-radius: 10px; font-size: var(--ctrl-fs); font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .drawer-body .top-nav a:hover { background: var(--surface-2); } .drawer-body .top-nav a[aria-current="page"] { background: var(--surface-2); border-color: var(--line-strong); } /* dins el calaix l'enllaç fa 42px: el "Nou" no s'ha d'enganxar a dalt, sinó quedar a l'alçada del text */ .drawer-body .top-nav .nav-new { align-self: center; margin-top: 0; } .drawer-body .lang { display: inline-flex; padding: 3px; } /* torna el CA/ES/EN clàssic */ .drawer-body .lang { flex: none; } .drawer-body .lang button { padding: 0 clamp(6px, 2.6vw, 11px); height: calc(var(--sel-h) - 8px); font-size: .82rem; } .drawer-body .lang-menu { display: none; } /* amaga el desplegable rodó */ .drawer-body .icon-btn { width: var(--sel-h); height: var(--sel-h); border-radius: 10px; } .drawer .f-sel, .drawer .lang, .drawer .icon-btn, .drawer .reset-btn, .drawer .search-box input, .drawer .view-switch, .drawer .count-badge { backdrop-filter: none; -webkit-backdrop-filter: none; } /* els filtres de Jugadors venien amb 46px propis */ .drawer-body .f-sel { height: var(--ctrl-h); font-size: var(--ctrl-fs); } .drawer-body .reset-btn, .drawer-body .llista-btn { height: var(--ctrl-h); } .drawer-body .controls { display: flex; flex-direction: column; gap: 18px; width: 100%; margin-bottom: 0; } /* La fila de controls queda buida al calaix: el cercador i Favorits pugen sota la capçalera i el selector de vista va a la línia d'idioma i tema. S'amaga perquè no deixi un buit. */ .drawer-body .controls-row { display: none; } .drawer-body .search-box { width: 100%; min-width: 0; } .drawer-body .search-box input { min-height: var(--ctrl-h); height: var(--ctrl-h); font-size: var(--ctrl-fs); } /* selector de vista: nomes icones, perque comparteix linia amb l'idioma i el tema */ .drawer-body .view-switch { width: auto; flex: none; padding: 3px; } .drawer-body .view-switch button { flex: none; width: clamp(32px, 10vw, 36px); min-height: calc(var(--sel-h) - 8px); height: calc(var(--sel-h) - 8px); padding: 0; gap: 0; } .drawer-body .view-switch button span { display: none; } .drawer-body .view-switch button svg { width: 17px; height: 17px; } /* filtres: etiqueta visible, chips en files netes i igualades */ .drawer-body .filters { flex-direction: column; align-items: stretch; gap: 12px; flex-wrap: wrap; } .drawer-body .filters-label { display: inline-flex; font-size: var(--ctrl-fs); } .drawer-body .chip-sep { display: none; } .drawer-body .count-badge { display: none; } /* el recompte ja surt sobre les llistes */ /* dues columnes: ritmes a l'esquerra, estats a la dreta */ .drawer-body .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; align-items: start; } .drawer-body .filters-label { grid-column: 1 / -1; } .drawer-body #status-chips, .drawer-body #rhythm-chips { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; width: 100%; min-width: 0; } .drawer-body .chip { justify-content: flex-start; min-height: var(--ctrl-h); height: var(--ctrl-h); padding: 0 12px; font-size: var(--ctrl-fs); white-space: nowrap; border-radius: 10px; } .drawer-body #rhythm-chips .lbl-long { display: inline; } /* dins el drawer hi ha espai: etiquetes llargues */ .drawer-body #rhythm-chips .lbl-short { display: none; } /* ---- DRAWER: fluïdesa de l'obertura ---- 1) El panell rep capa pròpia de compositor, així el lliscament no obliga a repintar l'aurora fixa (body::before) ni la llista. 2) A dins s'hi anul·la el backdrop-filter: el panell és opac, o sigui que el desenfocat no es veia, però a cada fotograma de la translació obligava a re-mostrejar i tornar a desenfocar el fons. Aquesta era la causa principal de les batzegades. */ .drawer { will-change: transform; } .drawer-overlay { will-change: opacity; } .drawer-body { overscroll-behavior: contain; } .drawer-body .search-box input, .drawer-body .view-switch, .drawer-body .lang, .drawer-body .icon-btn, .drawer-body .fav-btn, .drawer-body .count-badge, .drawer-body .chip-group { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---- TAULA: scroll horitzontal, columnes ajustades al contingut ---- */ .table-scroll { -webkit-overflow-scrolling: touch; } table.t { table-layout: auto; min-width: 720px; } table.t col { width: auto !important; } table.t thead th, table.t tbody td { white-space: nowrap; padding-left:16px; padding-right:16px; } table.t thead th:first-child, table.t tbody td:first-child { white-space: normal; min-width: 190px; padding-left:10px; padding-right:12px; } table.t thead th:first-child { padding-left:16px; } .t-name-text { white-space: normal; } .t-name { gap:4px; } .t-name-lead { display:flex; align-items:center; flex:none; width:14px; } .t-name-lead .status-dot { margin:0; } /* Etiquetes en una línia pròpia sobre el nom, sense trencar el títol */ .t-badges { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:4px; } .t-badges .partner-badge, .t-badges .ccat-tag, .t-badges .lbl-badge { margin-right:0; top:0; } .t-badges .live-inline { display:inline-flex; align-items:center; margin-right:0; line-height:1; } .t-badges .live-inline .live-badge { top:0; } /* ---- TARGETES ---- */ .cards-grid { grid-template-columns: 1fr; } .card-body { padding: 16px; } .card-foot { flex-wrap: wrap; } .card-link { font-size: .9rem; padding: 0 14px; min-width: 0; flex: 1 1 0; min-height: 46px; } /* ---- TÍTOLS DE SECCIÓ ---- */ /* El títol del mes no s'encongeix ni es parteix: qui cedeix espai és el filet. Amb noms llargs (Septiembre 2026) i pantalles molt estretes el filet arriba a desaparèixer, i és el que toca. */ .month-title { font-size: 1.25rem; flex: 0 0 auto; white-space: nowrap; } .month-count { flex: 0 0 auto; } .month-head { gap: 10px; } .month-head::after { min-width: 0; } .month-toggle { width: 28px; height: 28px; border-radius: 8px; } .month-toggle svg { width: 15px; height: 15px; } .top-nav { display:none; } .foot-in { flex-direction: column; text-align: center; gap: 16px; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); } .foot-brand { font-size: 1.2rem; } .foot-links { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; } .foot-links a { display:flex; align-items:center; justify-content:center; width:100%; padding:13px 16px; font-size:.98rem; background:var(--surface); border:1px solid var(--line); } .foot-links a:hover { background:var(--surface-2); } .foot-donate { margin-top:2px; border:none !important; background:var(--violet) !important; color:#fff !important; } .foot-coffee { width:100%; max-width:340px; margin:2px auto 0; } .foot-coffee .foot-donate { width:100%; justify-content:center; } .foot-in p { font-size:.9rem; margin-top:2px; } .content-page { padding:16px 6px 32px; } .content-page h1 { font-size:1.6rem; } #gotop { right: 16px; bottom: 16px; width: 48px; height: 48px; } } /* MÒBIL ESTRET */ @media (max-width: 460px) { .brand-title { font-size: 1.18rem; } .drawer-body { --ctrl-fs: .85rem; } .month-title { font-size: 1.18rem; } .month-head { gap: 8px; } } /* ============================================================ PAGINA DE JUGADORS ============================================================ */ /* ---- Taula ---- */ table.t-jug { min-width: 906px; } table.t-jug col.c-jname { width: auto; } table.t-jug col.c-e { width: 70px; } table.t-jug col.c-cat { width: 92px; } table.t-jug col.c-club { width: 250px; } table.t-jug col.c-pick { width: 46px; } /* Separació horitzontal reduïda per deixar amplada al club. La vertical es deixa com a style.css. */ table.t-jug th, table.t-jug td { padding-inline: 7px; } table.t-jug th:first-child, table.t-jug td:first-child { padding-inline-start: 14px; } table.t-jug th:last-child, table.t-jug td:last-child { padding-inline-end: 14px; } /* Les capceleres FIDE ja no es tenyeixen: totes iguals, com a Torneigs. El color el porten les pastilles de sota, que es on aporta informacio. */ /* La fila ja no es clicable sencera: nomes la cel·la del nom obre la fitxa, perque la casella de la dreta es pugui marcar sense obrir res. L'area util es tota la columna, no nomes el text. */ td.j-open { cursor: pointer; } td.j-open:hover .j-name-text { color: var(--accent); } td.j-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .j-name { display: flex; align-items: center; gap: 8px; min-width: 0; } /* Amplada fixa: encabeix el distintiu mes ample (WGM, WCM, WIM) perque tots els noms titulats comencin al mateix punt. El distintiu duu min-width:100%, aixi que es AQUESTA mida la que mana: tocar el padding del distintiu sol no l'estreny gens. */ .tit-slot { flex: none; width: 32px; display: flex; justify-content: flex-start; } .j-name-text { font-weight: 600; font-size: .96rem; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .j-club { font-size: .8rem; font-weight: 500; color: var(--ink-soft); display: block; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .j-cat { font-family: var(--mono); font-size: .84rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; letter-spacing: 0; } .j-inact { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--slate); background: var(--slate-bg); border-radius: 5px; padding: 1px 5px; flex: none; } /* ---- Pastilles d'elo ---- */ .elo-pill { display: inline-block; min-width: 52px; padding: 3px 8px; border-radius: 8px; background: none; font-family: var(--mono); font-size: .87rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .elo-pill.e-cat { min-width: 46px; font-size: .86rem; } /* ---- Distintiu de títol ---- */ .tit-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 100%; padding: 3px 2px; border-radius: 5px; font-size: .64rem; font-weight: 600; letter-spacing: .02em; background: var(--slate); color: #fff; } /* Els codis son els de la FIDE (IM, FM, WGM...), no els catalans: normTitol() els tradueix abans de pintar el distintiu. */ .tit-badge.tb-GM, .tit-badge.tb-WGM { background: var(--tit-gm); } .tit-badge.tb-IM, .tit-badge.tb-WIM { background: var(--tit-im); } .tit-badge.tb-FM, .tit-badge.tb-WFM { background: var(--tit-fm); } .tit-badge.tb-CM, .tit-badge.tb-WCM { background: var(--tit-cm); } /* Mestre Català: titol autonomic, contorn en comptes de ple */ .tit-badge.tb-MC { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line-strong); } /* En fosc els farcits son els mateixos tons plens: la lletra segueix sent blanca, com en clar. Nomes MC, que va de contorn, fa servir tinta. */ html.dark .tit-badge { color: #fff; } html.dark .tit-badge.tb-MC { color: var(--ink-soft); background: transparent; } /* ---- Desplegables de filtre (a la fila de controls) ---- */ .f-sel { height: 46px; flex: none; cursor: pointer; font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 0 32px 0 14px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 11px center; transition: border-color .15s ease, box-shadow .15s ease; } html.dark .f-sel { background-image: url("data:image/svg+xml;utf8,"); } .f-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .f-sel:hover { border-color: var(--line-strong); } /* el select amb valor triat es marca amb l'accent */ .f-sel:not(:has(option[value=""]:checked)) { border-color: var(--accent); color: var(--accent); } .f-sel-club { max-width: 180px; } .f-sel-sm { max-width: 150px; } .f-sel-tit { max-width: 100px; } .f-sel-xs { max-width: 124px; } .controls-row .search-box { min-width: 160px; } .controls-row .count-badge { flex: none; } /* ---- Control de "la meva llista" ---- Mateix pes visual que el selector de vista: icona i comptador. Quan s'activa, filtra el llistat als jugadors triats. */ .llista-btn { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 46px; padding: 0 14px; cursor: pointer; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); font-family: var(--body); font-size: .95rem; font-weight: 700; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .llista-btn:hover { color: var(--ink); border-color: var(--line-strong); } .llista-btn.has-items { color: var(--accent); } .llista-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .llista-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Casella de selecció ---- */ .pick { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px; cursor: pointer; color: var(--ink-faint); font-family: var(--body); font-size: .78rem; font-weight: 600; } .pick-box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: transparent; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .pick:hover .pick-box { border-color: var(--accent); } .pick.is-on .pick-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pick.is-on { color: var(--accent); } .pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* Capcalera de la columna: marca o desmarca tot el conjunt filtrat. Desactivada mentre no hi ha filtre ni cerca. */ .pick-all { padding: 0; } .pick-all[disabled] { cursor: default; opacity: .35; } .pick-all[disabled] .pick-box { border-color: var(--line); } table.t thead th.c-pick-h { padding: 6px 8px 10px; text-align: center; line-height: 0; } /* line-height 0: la casella no fa créixer la capçalera per sobre de --thead-h */ /* A la targeta, el distintiu i la casella comparteixen linia a la dreta de la capcalera. Flotant en absolut es trepitjaven. */ .j-head-r { display: flex; align-items: center; gap: 8px; flex: none; } /* ---- Botó de netejar filtres ---- */ .reset-btn { height: 46px; width: 46px; flex: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .reset-btn:hover { color: var(--pink); border-color: var(--pink); background: var(--pink-bg); } .reset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .reset-btn.hidden { display: none; } /* ---- Botó "mostrar-ne més" ---- */ .more-wrap { display: flex; justify-content: center; margin: 22px 0 8px; } .more-btn { padding: 11px 26px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font-family: var(--body); font-size: .92rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; } .more-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); } /* ---- Targetes ---- */ .j-card { cursor: pointer; } .j-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .j-sub { font-size: .82rem; color: var(--ink-faint); margin-top: 3px; } .j-elos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .j-elo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .j-elo-v { font-family: var(--mono); font-size: 1.16rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .j-elo-l { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .j-elo.e-std .j-elo-v { color: var(--violet); } .j-elo.e-rpd .j-elo-v { color: var(--cyan); } .j-elo.e-blz .j-elo-v { color: var(--amber); } .j-catline { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .j-catelo { font-size: .82rem; color: var(--ink-faint); } .j-catelo strong { font-family: var(--mono); color: var(--ink-soft); font-weight: 600; } /* ---- Fitxa del jugador: vegeu el bloc FITXA DEL JUGADOR, al final ---- */ /* Atribucio de fonts, sota el llistat. Fora de #more-wrap a proposit: aquell contenidor s'amaga quan ja es veuen tots els resultats. */ .data-src { text-align: center; font-size: .78rem; color: var(--ink-ghost); margin: 18px 0 0; } /* ---- Ordre de la barra de controls (escriptori ample) ---- Per sobre de 1250px, style.css dissol .controls-row amb `display:contents` i l'ordre visual el marca `order`. Els elements sense `order` cauen a 0 i es pinten ABANS del cercador, que té order:1. Aquí es numeren tots els de la pàgina de jugadors. */ @media (min-width: 1250px) { #sel-club { order: 2; flex: 0 0 auto; } #sel-titol { order: 3; flex: 0 0 auto; } #sel-cat { order: 4; flex: 0 0 auto; } #sel-sexe { order: 5; flex: 0 0 auto; } #btn-reset { order: 6; flex: 0 0 auto; } #btn-llista { order: 7; flex: 0 0 auto; } .view-switch { order: 8; } .count-badge { order: 9; } /* la barra fa 42px d'alçada en aquest punt de ruptura */ .f-sel, .reset-btn, .llista-btn { height: 42px; } .reset-btn { width: 42px; } } /* ---- Mòbil ---- */ @media (max-width: 820px) { .ficha { width: 100vw; border-left: none; } .f-sel, .f-sel-club, .f-sel-sm, .f-sel-tit, .f-sel-xs { width: 100%; max-width: 100%; } .reset-btn { width: 100%; } .controls-row .search-box { min-width: 100%; } table.t-jug { min-width: 746px; } table.t-jug col.c-club { width: 170px; } .llista-btn { width: 100%; justify-content: center; } } /* ============================================================ PAGINES DE CONTINGUT (collabora, destaca, legal) ============================================================ */ /* ---- Selector d'idioma: mostra només el bloc de la llengua activa ---- Cada pàgina duu el text sencer tres vegades, en
. L'atribut data-lang de el posa el mòdul de contingut de script.js. */ html[data-lang="ca"] [data-l]:not([data-l="ca"]), html[data-lang="es"] [data-l]:not([data-l="es"]), html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; } /* ---- Capçalera de les pàgines internes ---- És la mateixa que la de la home i Jugadors (.header-actions + calaix en mòbil); l'estil de la pàgina actual del menú és amb .top-nav. */ /* ---- Contingut ---- */ .pages { max-width: 820px; } .page-title { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1.15; letter-spacing: -.025em; margin: 8px 0 20px; } /* Un sol contenidor per pàgina: el text respira i no queda trossejat */ .page-card { background: var(--glass-card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 32px; } .page-card h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px; } .page-card p { font-size: 1.06rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 12px; } .page-card p:last-child { margin-bottom: 0; } .page-card strong, .page-card b { color: var(--ink); font-weight: 700; } .page-card ul { margin: 0 0 12px; padding-left: 20px; } .page-card li { font-size: 1.06rem; line-height: 1.62; color: var(--ink-soft); margin-bottom: 9px; } .page-card li:last-child { margin-bottom: 0; } .page-card ul:last-child { margin-bottom: 0; } .page-card a { color: var(--accent); text-decoration: none; font-weight: 600; } .page-card a:hover { text-decoration: underline; } /* Adreça de contacte o dada destacada en mono */ .page-contact { font-family: var(--mono); font-size: 1rem !important; padding-top: 4px; } /* Paràgraf emmarcat, per a compromisos o avisos que han de ressaltar */ .page-note { padding: 13px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--line); } /* Dins del contenidor, cada secció se separa de l'anterior amb un filet */ .page-card section + section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .page-card section > *:last-child { margin-bottom: 0; } .page-back { margin: 26px 0 0; } .page-back a { color: var(--ink-soft); font-size: 1rem; font-weight: 600; text-decoration: none; } .page-back a:hover { color: var(--accent); text-decoration: underline; } .page-date { text-align: center; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-ghost); margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); } @media (max-width: 820px) { .page-title { font-size: 1.6rem; } .page-card { padding: 22px 18px; } .page-card h2 { font-size: 1.2rem; } .page-card p, .page-card li { font-size: 1.02rem; } } /* ============================================================ TEMA CLAR "net" (estil Apple) — NOMÉS html:not(.dark) ------------------------------------------------------------ · Fons de pàgina pla #F5F5F7 (sense aurora); capçalera del mateix color, amb la seva línia grisa a sota. · Cap vora grisa enlloc: --line i --card-line passen a ser transparents. Les úniques línies que queden fan servir --rule: separadors de files (taula, fitxa, esquelet) i el filet llarg dels títols de secció. · Selectors d'idioma, vista i tema (i botons d'icona): #EBEBF5. · Una sola ombra, --shadow-a, a tot el que té fons blanc (targetes, taules, camps, blocs de la fitxa). · Dos grisos: --edge (#E3E3E9) sobre el fons gris de la pàgina i --rule per als separadors de files sobre blanc. El tema fosc no es toca. ============================================================ */ html:not(.dark) { --bg: #f5f5f7; --line: transparent; --card-line: transparent; --rule: rgba(6,11,22,.10); --glass: #ffffff; --glass-2: #ffffff; --glass-3: #ffffff; --glass-card: #ffffff; --blur: none; --edge: #e3e3e9; /* línies i vores sobre el fons gris de la pàgina (tènue) */ --shadow: none; --shadow-s: none; --shadow-lg: none; --shadow-a: 1px 2px 8px rgba(0,0,0,.05); /* ombra de les superfícies blanques (com les targetes de la botiga d'Apple) */ --ctl: #ebebf5; /* fons dels selectors */ --inset: #f5f5f7; /* superfícies sobre fons blanc (calaix, fitxa) */ } html:not(.dark) body::before { display:none; } /* Capçalera del color de la pàgina, amb la línia grisa de separació a sota */ html:not(.dark) .site-header { background:#f5f5f7; box-shadow:none; border-bottom:1px solid var(--edge); } /* Comptador de torneigs: vora grisa i fons transparent */ html:not(.dark) .count-badge, html:not(.dark) .mobile-count .count-pill { background:transparent; border:1px solid var(--edge); } /* Selectors d'idioma, vista i tema + botons d'icona */ html:not(.dark) .lang, html:not(.dark) .view-switch, html:not(.dark) .icon-btn { background:var(--ctl); } html:not(.dark) .icon-btn:hover { border-color:transparent; } /* Línies que es conserven */ html:not(.dark) table.t tbody tr:not(:last-child) td { border-bottom-color:var(--rule); } html:not(.dark) .month-head::after { background:var(--edge); } html:not(.dark) .f-row { border-bottom-color:var(--rule); } html:not(.dark) .skel-row { border-top-color:var(--rule); } html:not(.dark) .sk { background:var(--rule); } html:not(.dark) .card-poster { background:#ececf0; } /* Vores que apareixien en passar el cursor */ html:not(.dark) .chip:not(.active):hover, html:not(.dark) .f-sel:hover, html:not(.dark) .llista-btn:hover, html:not(.dark) .more-btn { border-color:transparent; } /* Sense ombra: el que no és una superfície blanca */ html:not(.dark) .knight, html:not(.dark) .card-link, html:not(.dark) .card-link:hover, html:not(.dark) .foot-donate, html:not(.dark) #gotop, html:not(.dark) .drawer.open, html:not(.dark) .ficha.open, html:not(.dark) .lightbox img { box-shadow:none; } /* Ombra --shadow-a a tot el que té fons blanc */ html:not(.dark) .search-box input, html:not(.dark) .fav-btn, html:not(.dark) .f-sel, html:not(.dark) .llista-btn, html:not(.dark) .reset-btn, html:not(.dark) .page-card, html:not(.dark) .card, html:not(.dark) .card:hover, html:not(.dark) .month-group.is-featured .card, html:not(.dark) .month-group.is-featured .card:hover, html:not(.dark) .f-big, html:not(.dark) .f-idlink, html:not(.dark) .f-rows, html:not(.dark) .f-close { box-shadow:var(--shadow-a); } /* Xips de la capçalera de la fitxa: transparents, amb la vora del comptador */ html:not(.dark) .f-club, html:not(.dark) .f-cat, html:not(.dark) .f-born { background:transparent; border:1px solid var(--edge); box-shadow:none; } html:not(.dark) .search-box input:focus, html:not(.dark) .f-sel:focus { box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } @media (min-width: 821px) { html:not(.dark) .chip-group { box-shadow:var(--shadow-a); } } @media (max-width: 820px) { html:not(.dark) .foot-links a { box-shadow:var(--shadow-a); } } /* Taules: el bloc blanc és el , que no pot dur ombra pròpia (i el contenidor amb scroll la retallaria). La fa un pseudo-element de .table-card que comença just sota la capçalera, d'alçada fixa (--thead-h). */ html:not(.dark) .table-card { position:relative; } html:not(.dark) .table-card::before { content:""; position:absolute; left:0; right:0; top:var(--thead-h); bottom:0; border-radius:var(--radius); box-shadow:var(--shadow-a); pointer-events:none; } /* Botons de les targetes. Info (i Cartell): blancs amb vora grisa (--edge). Inscrits: fons d'accent, text blanc, sense vora. Cap ombra. */ html:not(.dark) .card-link.secondary, html:not(.dark) .month-group.is-featured .card-link.secondary { border:1px solid var(--edge); box-shadow:none; } html:not(.dark) .card-link.primary, html:not(.dark) .month-group.is-featured .card-link.primary { background:var(--accent); color:#fff; border:0; box-shadow:none; } html:not(.dark) .month-group.is-featured .card-link:hover { box-shadow:none; } /* Sobre fons blanc (calaix del mòbil) els controls no poden ser blancs sense vora: passen al gris de la pàgina */ html:not(.dark) .drawer-body .top-nav a, html:not(.dark) .drawer-body .chip:not(.active) { background:var(--inset); } /* Fitxa de jugador, invertida: fons gris de pàgina i blocs blancs; els separadors de dins dels blocs, com els de les files de la taula */ html:not(.dark) .ficha { background:#f5f5f7; } html:not(.dark) .f-head { background:#f5f5f7; border-bottom:1px solid var(--edge); } html:not(.dark) .f-close, html:not(.dark) .f-idlink, html:not(.dark) .f-rows, html:not(.dark) .f-big { background:#ffffff; } html:not(.dark) .drawer-body .top-nav a[aria-current="page"] { background:#e8e8ed; border-color:transparent; } html:not(.dark) .f-idlink:hover { border-color:transparent; } /* Tema clar: el nom del torneig no canvia de color en passar-hi el cursor */ html:not(.dark) table.t tbody tr:hover .t-name-link { color:var(--ink); } /* Tema clar, escriptori: els enllaços del menú superior no tenen fons, ni en passar-hi el cursor ni a la pàgina actual */ @media (min-width: 821px) { html:not(.dark) .header-actions .top-nav a:hover, html:not(.dark) .header-actions .top-nav a[aria-current="page"] { background:none; } } /* Targetes de Destacats: sense la barra ambre (a l'esquerra a escriptori, a dalt al mòbil). L'estat ja el diu la pastilla "Propers". Tots dos temes. */ .featured-as-cards .card .card-top-bar { display:none; } /* Tema clar: el nom del jugador no canvia de color en passar-hi el cursor */ html:not(.dark) td.j-open:hover .j-name-text { color:inherit; } /* Tema clar: selectors d'idioma, vista i tema discrets — fons transparent, la vora del comptador (--edge) i l'opció activa en gris mitjà (no ink) */ html:not(.dark) .lang, html:not(.dark) .view-switch, html:not(.dark) #theme-toggle { background:transparent; border:1px solid var(--edge); } html:not(.dark) #theme-toggle:hover { border-color:var(--edge); } html:not(.dark) .lang button.active, html:not(.dark) .view-switch button.active { background:#86868b; color:#fff; } /* Tema clar, escriptori: en passar el cursor pels enllaços del menú el text s'aclareix a gris (només l'efecte hover; la resta d'estats no canvia) */ @media (min-width: 821px) and (hover: hover) { html:not(.dark) .header-actions .top-nav a:hover { color:#6e6e73; } } /* Tema clar: les targetes no tenen vora (abans era una vora transparent d'1px, i el fons blanc de la targeta s'hi veia com un filet blanc al voltant del cartell i del triangle de "complet") */ html:not(.dark) .card { border:0; } /* Cor del títol de Col·labora: SVG petit i pla (abans era un emoji) */ .title-heart { width:.62em; height:.62em; margin-right:.38em; vertical-align:.02em; fill:#e0245e; } /* Tema clar: els selectors segmentats (ritme i estat) sense la vora transparent d'1px, que es veia com un filet blanc al voltant de l'opció activa; tampoc entre opcions */ @media (min-width: 821px) { html:not(.dark) .chip-group { border:0; } html:not(.dark) .chip-group .chip + .chip { border-left:0; } } /* Tema clar: favorits sense vora vermellosa; en passar-hi el cursor, el mateix fons que els selectors de ritme i estat */ html:not(.dark) .fav-btn:hover { border-color:transparent; } html:not(.dark) .fav-btn:not(.active):hover { background:var(--surface-2); } /* Tema clar: separador curt entre les opcions dels selectors de ritme i d'estat (una ratlla de 16px, no de dalt a baix). Desapareix al costat de l'opció activa o de la que té el cursor a sobre. */ @media (min-width: 821px) { html:not(.dark) .chip-group .chip { position:relative; } html:not(.dark) .chip-group .chip + .chip::before { content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:var(--rule); } html:not(.dark) .chip-group .chip.active::before, html:not(.dark) .chip-group .chip.active + .chip::before, html:not(.dark) .chip-group .chip:hover::before, html:not(.dark) .chip-group .chip:hover + .chip::before { display:none; } } /* Tema clar, escriptori: a la barra de selectors el selector de vista és un control (com el cercador, els filtres o favorits): blanc amb ombra i sense vora. L'opció activa, en gris clar amb la icona en ink (el mateix gris del hover dels filtres). Al calaix del mòbil no canvia. */ @media (min-width: 821px) { html:not(.dark) .controls .view-switch { background:#ffffff; border:0; box-shadow:var(--shadow-a); } html:not(.dark) .controls .view-switch button.active { background:var(--surface-2); color:var(--ink); } } /* Favorits: sense cap favorit es mostra només el cor (en contorn); el nombre apareix quan n'hi ha almenys un. Tots dos temes. */ .fav-btn:not(.has-favs) #fav-count { display:none; } /* ============================================================ TAULA DE TORNEIGS AGRUPADA (tots dos temes) ------------------------------------------------------------ Cinc columnes: Torneig · Data (dia i final a sota) · Ritme + temps · Elo · accions (Inscrits, Info i favorit). A mòbil la taula passa a ser una llista, sense desplaçament horitzontal. La taula de Jugadors (.t-jug) no canvia. ============================================================ */ /* ---- Columnes (escriptori) ---- */ table.t:not(.t-jug) col.c-date { width:132px; } table.t:not(.t-jug) col.c-rhythm { width:162px; } table.t:not(.t-jug) col.c-cat { width:100px; } table.t:not(.t-jug) col.c-act { width:118px; } .t-date { font-weight:600; } .t-date-sub { display:block; margin-top:1px; font-size:.78rem; line-height:1.3; color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums; } /* El badge no s'encongeix; un temps llarg (40/90' +30' +30") parteix en dues línies dins la seva columna en lloc d'envair la de l'Elo */ .t-rt { display:flex; align-items:center; gap:8px; min-width:0; padding-right:12px; } .t-rt .rhythm-badge { flex:none; } .t-time { min-width:0; font-size:.86rem; line-height:1.25; font-weight:500; color:var(--ink-soft); font-variant-numeric:tabular-nums; } /* Torneig no vàlid per a elo: ratlla a escriptori, text a mòbil */ .elo-txt { display:none; } .t-acts { display:flex; align-items:center; justify-content:flex-end; gap:2px; } .t-acts .link-btn { display:grid; } table.t:not(.t-jug) thead th { text-align:left; } /* ---- Mòbil: llista ---- */ @media (max-width: 820px) { /* Nomes la taula de torneigs passa a llista. La de Jugadors manté el desplaçament horitzontal: si no, només se'n veu el nom. */ .table-scroll:not(:has(.t-jug)) { overflow:visible; } .table-card:not(:has(.t-jug))::before { top:0 !important; } table.t:not(.t-jug) { display:block; width:100%; min-width:0; } table.t:not(.t-jug) thead, table.t:not(.t-jug) colgroup { display:none; } table.t:not(.t-jug) tbody { display:block; width:100%; background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); } table.t:not(.t-jug) tbody tr { display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; row-gap:3px; padding:11px 6px 11px 30px; border-bottom:1px solid var(--rule, var(--line)); } table.t:not(.t-jug) tbody tr:last-child { border-bottom:0; } table.t:not(.t-jug) tbody td { display:block; order:3; flex:0 0 auto; min-width:0; white-space:nowrap; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; } /* primera línia: nom (amb el punt d'estat) i accions; a sota, les dades */ table.t:not(.t-jug) tbody td.c-name-cell { order:1; flex:1 1 calc(100% - 96px); white-space:normal; margin-left:-18px; } table.t:not(.t-jug) tbody td.c-act-cell { order:2; align-self:flex-start; } table.t:not(.t-jug) tbody td:empty { display:none; } .t-date { font-size:.8rem; } .t-date-sub { display:inline; margin:0 0 0 4px; font-size:.76rem; } .t-time, table.t:not(.t-jug) .cat-pill { font-size:.78rem; } .t-rt { gap:5px; white-space:nowrap; padding-right:0; } table.t:not(.t-jug) .elo-dash { display:none; } table.t:not(.t-jug) .elo-txt { display:inline; font-size:.78rem; } table.t:not(.t-jug) .rhythm-badge { padding:2px 6px; font-size:.68rem; } .t-acts .link-btn { width:30px; height:30px; } } /* ---- Pàgina de 1150px: la barra de selectors, una mica més compacta perquè el cercador no quedi massa estret (cas més just: castellà) ---- */ @media (min-width: 1250px) { .controls { gap:9px; } .chip-group .chip { padding:0 11px; } .count-badge { padding:0 12px; } } /* sense text, el camp no reserva lloc per al botó d'esborrar */ .search-box input:placeholder-shown { padding-right:12px; } /* Jugadors · "La meva llista": sense cap jugador triat, només la icona */ .llista-btn:not(.has-items) #llista-count { display:none; } /* Capçalera, escriptori (tots dos temes): idioma i tema com a utilitats discretes, sense caixa. Idioma: només text (CA · ES · EN), l'actiu en ink i la resta atenuats. Tema: només la icona, amb fons suau al hover. Un filet vertical els separa del menú. El calaix del mòbil no canvia. */ @media (min-width: 821px) { html .header-actions .lang { position:relative; gap:0; padding:0 0 0 14px; margin-left:4px; background:none; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; } html .header-actions .lang::before { content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:var(--line); } html .header-actions .lang button { padding:4px 0; border-radius:0; background:none; color:var(--ink-faint); } html .header-actions .lang button + button::before { content:"\00b7"; margin:0 7px; color:var(--ink-faint); font-weight:400; } html .header-actions .lang button.active { background:none; color:var(--ink); } html .header-actions .lang button:hover:not(.active) { color:var(--ink); } html .header-actions #theme-toggle { background:none; border:0; color:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none; } html .header-actions #theme-toggle:hover { background:var(--surface-2); border:0; color:var(--ink); transform:none; } /* tema clar: --line és transparent i --ink-faint és massa fosc */ html:not(.dark) .header-actions .lang::before { background:rgba(6,11,22,.16); } html:not(.dark) .header-actions .lang button:not(.active), html:not(.dark) .header-actions .lang button + button::before { color:#86868b; } html:not(.dark) .header-actions .lang button:hover:not(.active) { color:var(--ink); } } /* Destacats, escriptori: una mica més d'interlineat al nom del torneig */ @media (min-width: 821px) { .featured-as-cards .card .card-title { line-height:1.38; } } /* Taula de torneigs, escriptori: columnes Ritme i Elo més estretes perquè l'aire entre Data, Ritme, Elo i accions quedi igualat. Un temps llarg (40/90' +30' +30") es reparteix en diverses línies dins la seva columna. */ @media (min-width: 821px) { table.t:not(.t-jug) col.c-rhythm { width:140px; } table.t:not(.t-jug) col.c-cat { width:94px; } } /* ============================================================ RESTYLING · PÀGINA DE TORNEIGS (tots dos temes) ------------------------------------------------------------ · Marca: el títol va en tinta, amb la segona línia en el color d'accent; el degradat queda només a l'emblema. · Capçalera del llistat: títol gran + recompte en text, i a la dreta cercador, ritme, favorits i vista. · Estat en pestanyes (Propers · En joc · Finalitzats) en lloc de seccions apilades; per això les files ja no porten punt d'estat. · Files: dates en text, enllaços amb paraules (Inscrits, Info). · Targetes: línia superior amb etiquetes i estat, dades en dues línies i el botó d'informació com a principal. La pàgina de Jugadors i les de contingut només reben el canvi de marca. ============================================================ */ /* ---- Marca ---- */ html:not(.dark) .brand-title .ln { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink); } /* Text més petit perquè l'emblema respiri */ .brand-title { font-size:1.3rem; line-height:1.12; letter-spacing:-.025em; } @media (min-width: 821px) and (max-width: 1000px) { .brand-title { font-size:1.15rem; } } @media (min-width: 821px) and (max-width: 885px) { .brand-title { font-size:1.02rem; } } @media (max-width: 820px) { .brand-title { font-size:1.08rem; line-height:1.14; } } @media (max-width: 460px) { .brand-title { font-size:1.02rem; } } /* ---- Ombres (tema clar): una de superfície per a targetes, taules i blocs blancs, i una de més curta per als controls ---- */ html:not(.dark) { --shadow-a: 0 1px 2px rgba(22,22,29,.06), 0 4px 18px rgba(22,22,29,.05); --shadow-c: 0 1px 2px rgba(22,22,29,.06), 0 2px 10px rgba(22,22,29,.04); } html:not(.dark) .search-box input, html:not(.dark) .fav-btn, html:not(.dark) .f-sel, html:not(.dark) .llista-btn, html:not(.dark) .reset-btn { box-shadow:var(--shadow-c); } html:not(.dark) .search-box input:focus, html:not(.dark) .f-sel:focus { box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } @media (min-width: 821px) { html:not(.dark) .chip-group, html:not(.dark) .controls .view-switch { box-shadow:var(--shadow-c); } } /* ---- Capçalera del llistat ---- */ .list-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 28px; margin-bottom:30px; } .list-head { display:flex; align-items:baseline; gap:14px; flex:0 0 auto; min-width:0; } .list-title { font-family:var(--display); font-weight:800; font-size:2.5rem; line-height:1; letter-spacing:-.035em; color:var(--ink); } .list-count { font-size:.95rem; font-weight:500; color:var(--ink-faint); white-space:nowrap; } .nw { white-space:nowrap; } @media (min-width: 821px) { .controls.controls-home { /* Creix fins a omplir la fila del títol; si no hi cap sencer (amplada mínima = el seu contingut), salta a la línia de sota */ flex:1 1 0%; min-width:min-content; flex-direction:row; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:10px; margin-bottom:0; } .controls-home .search-box { flex:1 1 200px; min-width:180px; max-width:320px; } .controls-home .search-box input { height:42px; } .controls-home #rhythm-chips, .controls-home .fav-btn, .controls-home .view-switch { flex:0 0 auto; } .controls-home .chip-group .chip { padding:0 13px; } } /* Entre 821 i 1024px, `.wrap { padding:0 20px }` deixava .main sense marge superior ni inferior: es restitueixen */ @media (min-width: 821px) and (max-width: 1024px) { .main { padding-top:32px; padding-bottom:48px; } } /* Ritme: una sola opció activa, sempre visible ("Tots" per defecte), en el to suau de l'accent */ .controls-home .chip.active { background:var(--violet-bg); border-color:transparent; color:var(--violet-ink); } html.dark .controls-home .chip.active { background:var(--violet-bg); color:var(--violet); } /* ---- Pestanyes d'estat ---- */ .tab-panel { min-width:0; max-width:100%; } .tabs { /* La mida de lletra viu a .tabs i tot el de dins va en em: així fitTabs() (script.js) pot encongir el conjunt d'un sol cop quan les tres pestanyes no caben en una línia */ display:flex; align-items:flex-end; gap:1.2em; margin-bottom:22px; font-size:1.45rem; box-shadow:inset 0 -1px 0 var(--edge, var(--line)); overflow-x:auto; scrollbar-width:none; } .tabs::-webkit-scrollbar { display:none; } .tab { flex:none; display:inline-flex; align-items:baseline; gap:.3em; padding:6px 0 12px; background:none; border:0; border-bottom:2px solid transparent; font-family:var(--display); font-weight:800; font-size:1em; line-height:1.15; letter-spacing:-.03em; color:#6e6e73; cursor:pointer; white-space:nowrap; transition:color .15s ease, border-color .15s ease; } html.dark .tab:not(.active):not(:hover) { color:var(--ink-faint); } .tab:hover { color:var(--ink); } .tab.active { color:var(--ink); border-bottom-color:var(--ink); } .tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } .tab-n { font-family:var(--body); font-size:.62em; font-weight:500; letter-spacing:0; color:var(--ink-faint); font-variant-numeric:tabular-nums; } html:not(.dark) .tab:not(.active) .tab-n { color:#6e6e73; } .tab-body { display:flex; flex-direction:column; gap:30px; min-width:0; } /* Dins d'una pestanya, els mesos són subtítols: un grau per sota */ .tab-body .month-title { font-size:1.2rem; letter-spacing:-.025em; } .tab-body .month-head { margin-bottom:8px; } /* ---- Taula ---- */ table.t:not(.t-jug) col.c-date { width:176px; } table.t:not(.t-jug) col.c-rhythm { width:140px; } table.t:not(.t-jug) col.c-cat { width:126px; } table.t:not(.t-jug) col.c-act { width:184px; } /* Xifres proporcionals: les tabulars d'aquesta lletra també eixamplen l'espai, i en una data escrita amb text ("14 set → 26 oct") es nota */ table.t:not(.t-jug) .t-date { white-space:normal; font-size:.9rem; font-variant-numeric:normal; } table.t:not(.t-jug) tbody td { padding-top:11px; padding-bottom:11px; } .t-name { gap:0; } .act-link { display:inline-flex; align-items:center; height:32px; padding:0 9px; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; transition:background-color .15s ease, color .15s ease; } .act-link:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); } .act-link:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .act-link.is-empty { visibility:hidden; } .t-acts .fav-heart { margin-left:2px; } /* ---- Targetes ---- */ .card-top-bar { display:none; } .card-head-l { display:flex; flex-direction:column; gap:7px; min-width:0; } .card-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; } .card-kicker > * { margin-right:0; top:0; } .kick-status { font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; line-height:1.3; } .ks-upcoming { color:var(--orange-ink); } .ks-inProgress { color:var(--green-ink); } .ks-finished { color:var(--slate-ink); } html.dark .ks-upcoming { color:var(--amber); } html.dark .ks-inProgress { color:var(--green); } html.dark .ks-finished { color:var(--slate); } .card-meta, .featured-as-cards .card .card-meta { flex-direction:column; flex-wrap:nowrap; gap:0; } .meta-row { line-height:1.5; } .meta-row strong { font-size:1em; font-weight:700; font-variant-numeric:normal; } .meta-row.meta-2 { color:var(--ink-faint); } .cl-short { display:none; } .card-head-r .fav-heart { margin:-4px -4px 0 0; width:32px; height:32px; } /* Destacats: el peu sense filet (tots dos temes); l'aire el fa el marge */ .featured-as-cards .card .card-foot { border-top:0; padding-top:4px; } @media (min-width: 821px) { .featured-as-cards .card .card-body { padding:16px 18px; gap:10px; } .featured-as-cards .card .card-title { font-family:var(--display); font-weight:700; font-size:1.22rem; line-height:1.2; letter-spacing:-.02em; } .featured-as-cards .card .card-link { height:38px; min-height:38px; font-weight:700; } } /* ---- Mòbil ---- */ @media (max-width: 820px) { .list-top { display:block; margin-bottom:22px; } .list-head { margin:8px 0 14px; gap:10px; } .list-title { font-size:2rem; } .list-count { font-size:.9rem; } /* Els controls es queden a la pàgina: cercador + favorits i, a sota, el ritme */ .controls.controls-home { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; margin:0; } .controls-home .search-box { min-width:0; order:1; } .controls-home .fav-btn { order:2; } .controls-home #rhythm-chips { order:3; } .controls-home .search-box input { height:44px; } .controls-home .fav-btn { height:44px; min-width:44px; justify-content:center; } .controls-home #rhythm-chips { grid-column:1 / -1; display:flex; flex-wrap:nowrap; gap:2px; height:44px; padding:4px; background:var(--glass); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-c, none); } .controls-home #rhythm-chips .chip { flex:1 1 auto; justify-content:center; height:auto; padding:0 6px; border:0; border-radius:9px; background:transparent; font-size:.88rem; transform:none; } .controls-home #rhythm-chips .chip.active { background:var(--violet-bg); } .tabs { font-size:1.3rem; gap:1em; margin-bottom:16px; } .tab { padding:8px 0 11px; } .tab-n { font-size:.66em; } .tab-body { gap:24px; } .tab-body .month-title { font-size:1.1rem; } /* Llista: nom · dates · ritme i avaluació · enllaços. El cor, a dalt a la dreta */ table.t:not(.t-jug) tbody tr { position:relative; padding:13px 14px 3px; row-gap:2px; } table.t:not(.t-jug) tbody tr:not(:has(a.act-link)) { padding-bottom:13px; } table.t:not(.t-jug) tbody td.c-name-cell { flex:1 1 100%; margin-left:0; padding:0 34px 2px 0 !important; } table.t:not(.t-jug) tbody td.c-date-cell { flex:1 1 100%; } table.t:not(.t-jug) tbody td.c-act-cell { order:9; flex:1 1 100%; align-self:auto; } table.t:not(.t-jug) .t-date { font-size:.86rem; } .t-date-sub { margin-left:0; font-size:.82rem; } .t-date-sub::before { content:" · "; } .t-time, table.t:not(.t-jug) .cat-pill, table.t:not(.t-jug) .elo-txt { font-size:.82rem; } table.t:not(.t-jug) tbody td.c-cat-cell:not(:empty)::before { content:"·"; margin-right:6px; color:var(--ink-faint); } .t-acts { justify-content:flex-start; gap:20px; } .t-acts:not(:has(a.act-link)) { height:0; } .t-acts .act-link { height:40px; padding:0; border-radius:0; } .t-acts .act-link:hover { background:none; } .t-acts .act-link.is-empty { display:none; } .t-acts .fav-heart { position:absolute; top:5px; right:4px; z-index:2; width:40px; height:40px; margin:0; } /* Destacats (vista taula): amb el botó Cartell al costat, l'etiqueta curta */ .featured-as-cards .cl-long { display:none; } .featured-as-cards .cl-short { display:inline; } } @media (max-width: 380px) { .cl-long { display:none; } .cl-short { display:inline; } } @media (max-width: 360px) { .controls-home #rhythm-chips .chip { padding:0 3px; font-size:.82rem; } } @media (max-width: 820px) { .featured-as-cards .card .card-title { font-family:var(--display); font-weight:700; font-size:1.12rem; line-height:1.22; letter-spacing:-.015em; } } /* Menú superior, escriptori (tots dos temes): la pàgina actual es marca amb un subratllat de 3px, separat del text; sense fons */ @media (min-width: 821px) { .header-actions .top-nav a[aria-current="page"] { position:relative; background:none; } .header-actions .top-nav a[aria-current="page"]::after { content:""; position:absolute; left:9px; right:9px; bottom:-7px; height:3px; border-radius:2px; background:var(--ink); } } /* ============================================================ FITXA DEL JUGADOR (tots dos temes) ------------------------------------------------------------ Mateix llenguatge que la pàgina de Torneigs: · capçalera sense franja ni filigrana: línia superior (títol i etiquetes), nom gran i una línia de dades en text, sense xips; · cada bloc porta la seva etiqueta de secció A SOBRE, amb l'estil de les capçaleres de taula; · superfícies blanques amb l'ombra --shadow-a (vora en fosc) i separadors fins; xifres en tinta, alineades a l'esquerra; · els perfils oficials són files-enllaç, com les de la taula. ============================================================ */ .ficha-overlay { position:fixed; inset:0; background:rgba(10,10,15,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:900; will-change:opacity; } .ficha-overlay.open { opacity:1; pointer-events:auto; } .ficha { position:fixed; top:0; right:0; height:100dvh; width:min(480px, 100vw); background:var(--bg2); border-left:1px solid var(--line); z-index:901; /* Sense ombra mentre està tancada: el panell viu fora de pantalla, però el desenfocat de l'ombra es vessaria cap a l'esquerra */ box-shadow:none; transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,0,1); overflow-y:auto; overscroll-behavior:contain; will-change:transform; contain:layout paint; } .ficha.open { transform:translateX(0); box-shadow:var(--shadow-lg); } html:not(.dark) .ficha { background:#f5f5f7; } html:not(.dark) .ficha.open { box-shadow:-12px 0 40px rgba(22,22,29,.10); } .ficha-inner { position:relative; padding:30px 28px 40px; } .f-close { position:absolute; top:22px; right:22px; z-index:2; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:background-color .15s ease, color .15s ease; } .f-close:hover { background:var(--surface-2); color:var(--ink); border-color:var(--line); } .f-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } html:not(.dark) .f-close { background:#fff; box-shadow:var(--shadow-c); } html:not(.dark) .f-close:hover { background:var(--surface-2); } /* Capçalera */ .f-head, html:not(.dark) .f-head { position:static; overflow:visible; margin:0 0 28px; padding:0 52px 0 0; background:none; border:0; } .f-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:11px; } .f-kicker .tit-slot { width:auto; } .f-kicker .tit-badge { min-width:0; padding:3px 8px; border-radius:6px; font-size:.7rem; font-weight:700; letter-spacing:.04em; } .f-kick, .f-inact { padding:0; background:none; border-radius:0; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; line-height:1.3; color:var(--ink-faint); } .f-inact { color:var(--slate-ink); } html.dark .f-inact { color:var(--slate); } .f-nom { margin:0 0 9px; padding:0; font-family:var(--display); font-size:2rem; font-weight:800; letter-spacing:-.035em; line-height:1.06; color:var(--ink); text-wrap:balance; } .f-meta { margin:0; font-size:.95rem; line-height:1.55; font-weight:500; color:var(--ink-faint); } .f-meta strong { color:var(--ink); font-weight:600; } .f-meta-it { white-space:nowrap; } .f-meta-it:first-child { white-space:normal; } /* un nom de club llarg pot partir */ /* Seccions */ .f-sec { margin:0 0 22px; } .f-sec:last-child { margin-bottom:0; } .f-sec-h { margin:0 0 9px; padding-left:2px; font-family:var(--body); font-size:.7rem; font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); } /* Bloc de xifres: una sola superfície amb les columnes separades per un filet */ .f-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .f-stats.f-stats-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .f-stat { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:18px 18px 15px; min-width:0; border-left:1px solid var(--rule, var(--line)); } .f-stat:first-child { border-left:0; } .f-stat-v { font-family:var(--display); font-size:1.9rem; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink); } .f-stat.is-nr .f-stat-v { color:var(--ink-ghost); font-weight:600; } .f-stat-l { font-size:.84rem; font-weight:500; color:var(--ink-faint); } /* Blocs de files: rànquing i perfils */ .f-rows, html:not(.dark) .f-rows { display:flex; flex-direction:column; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } html:not(.dark) .f-stats, html:not(.dark) .f-rows { background:#fff; border:0; box-shadow:var(--shadow-a); } .f-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--rule, var(--line)); color:inherit; text-decoration:none; } .f-row:last-child { border-bottom:0; } .f-row-l { font-size:.94rem; font-weight:500; color:var(--ink-soft); } .f-row-v { font-size:.86rem; color:var(--ink-faint); text-align:right; white-space:nowrap; } .f-row-v strong { font-family:var(--display); font-size:1.15rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-right:5px; } a.f-link { transition:background-color .15s ease; } a.f-link .f-row-l { font-weight:600; color:var(--ink); } a.f-link .f-row-v { display:inline-flex; align-items:center; gap:8px; } a.f-link .f-row-v svg { flex:none; color:var(--ink-soft); transition:color .15s ease, transform .15s ease; } a.f-link:hover { background:color-mix(in srgb, var(--accent) 7%, transparent); } a.f-link:hover .f-row-v svg { color:var(--accent); transform:translate(1px, -1px); } a.f-link:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } @media (max-width: 820px) { .ficha { width:100vw; border-left:0; } .ficha-inner { padding:22px 16px 30px; } .f-close { top:16px; right:14px; } .f-head, html:not(.dark) .f-head { margin-bottom:24px; padding-right:48px; } .f-nom { font-size:1.7rem; } .f-meta { font-size:.92rem; } .f-sec { margin-bottom:20px; } .f-stat { padding:16px 14px 13px; } .f-stat-v { font-size:1.65rem; } .f-stat-l { font-size:.8rem; } .f-row { padding:13px 16px; } } @media (max-width: 360px) { .f-stat { padding:14px 11px 12px; } .f-stat-v { font-size:1.45rem; } } /* Targetes: mateix efecte en passar-hi el cursor a totes, les de Destacats incloses (vista Targetes i vista Taula): pugen 3px. En pantalles tàctils, on no hi ha cursor, no es mouen. */ .card:hover, .month-group.is-featured .card:hover { transform:translateY(-3px); } html.dark .month-group.is-featured .card:hover { box-shadow:var(--shadow-lg); } @media (hover: none) { .card:hover, .month-group.is-featured .card:hover { transform:none; } } /* Botons de les targetes: en passar-hi el cursor no es mouen (ja es mou la targeta). Responen amb el to: el principal s'aclareix una mica i els secundaris prenen un fons gris suau. Tots dos temes. */ .card-link { transition:background-color .15s ease, filter .15s ease, border-color .15s ease; } .card-link:hover, .month-group.is-featured .card-link:hover { transform:none; box-shadow:none; } .card-link.primary:hover, .card-link.live:hover { filter:brightness(1.1); } .card-link.secondary:hover { background:var(--surface-2); }