/* La closca de la plataforma · el full que carreguen els dos webs.
*
* Aquí hi ha el que és igual a la zona nàstic i a la porra: la paleta, la
* base tipogràfica, la barra de dalt amb el selector d'aplicacions, les
* pestanyes, la zona de sessió, el diàleg del compte i el peu.
*
* Estava escrit dues vegades, a `styles.css` i a `porra/styles.css`, i amb
* dos jocs de noms per a les mateixes coses (`.peu` allà, `.footer` aquí;
* `.logo-marca` allà, `.logo-brand` aquí). Els comentaris deien "idèntic al
* de la porra", que és el que sempre s'escriu just abans que deixin de
* ser-ho: a la barra del web hi faltava el botó dels ajustos de la foto.
*
* Cada aplicació es queda el seu full amb el que és seu i prou. */
/* ── Paleta i superfícies ─────────────────────────────────── */
:root{
--cream:#F5F2EC;--cream-2:#a49c93;
--grana:#C21E33;--grana-lite:#E24357;--grana-soft:#ff5e72;--or:#D4AF6A;
--ink:#0a0908;--ink-2:#6c5f63;
--line:rgba(245,242,236,.10);
--hairline:rgba(245,242,236,.10);
/* Superfícies elevades: gradient subtil + highlight superior + ombra doble */
--surf-1:linear-gradient(180deg, rgba(30,20,22,.55), rgba(10,7,8,.35));
--surf-2:linear-gradient(180deg, rgba(38,26,28,.7), rgba(14,10,11,.45));
--edge-hi:inset 0 1px 0 rgba(255,255,255,.05);
--shadow-card:0 1px 2px rgba(0,0,0,.5), 0 22px 44px -28px rgba(0,0,0,.9);
--shadow-hero:0 2px 3px rgba(0,0,0,.55), 0 32px 64px -32px rgba(0,0,0,.95);
--halo-grana:0 0 0 1px rgba(194,30,51,.06), 0 40px 90px -40px rgba(194,30,51,.55);
/* ── Escala tipogràfica de les etiquetes ──
Hi havia TRENTA-NOU combinacions de mida i espaiat per a la mateixa
cosa: el text petit en majúscules que titula un bloc o acompanya una
xifra. Cap no estava malament tota sola; el problema és que juntes no
formaven cap sistema, i el web se sentia fet a trossos.
Tres passos i prou. L'espaiat va al revés de la mida —com més petita la
lletra, més aire entre lletres— que és el que fa que una majúscula de 9
píxels encara es pugui llegir. */
--txt-xs:9px; --track-xs:.2em; /* peus, notes, unitats */
--txt-sm:10px; --track-sm:.16em; /* etiquetes i accions */
--txt-md:11px; --track-md:.13em; /* titolets de secció */
/* ── Escala de radis ──
N'hi havia deu (2, 3, 4, 9, 12, 14, 16, 18, 20 i 999). Quatre passos i
la píndola: cada nivell de fondària en té un, i dues coses al mateix
nivell no poden tenir cantonades diferents. */
--r-sm:10px; /* peces dins d'una fila: xips, noms, gols */
--r-md:14px; /* blocs dins d'una carta */
--r-lg:22px; /* les cartes */
--r-pill:999px; /* el que es prem */
/* ── La carta ──
El patró de vora, degradat i ombra estava escrit deu vegades, cada una
amb el seu encoixinat i el seu radi. Ara el porta `.card` i el que
canvia de cada bloc és el tint, que és l'única cosa que de debò ha de
canviar. */
--card-pad:clamp(26px,3.6vw,42px);
/* Sense vora: una carta es veu perquè la seva superfície és un pas més
CLARA que el fons, no perquè hi hagi una ratlla al voltant. Amb vora és
un rectangle dibuixat; amb llum pròpia és un objecte. */
--card-vora:transparent;
--card-tint:transparent;
/* La superfície de la carta, més clara que `--surf-1`, que era gairebé el
fons i feia que les cartes només existissin per la vora.
El degradat baixa, però no fins al fons: acabava a (17,13,13) sobre un
fons de (10,9,8) —set nivells de 255— i per baix la carta es fonia amb
la pàgina i no es veia on s'acabava. Ara el tram de baix es queda un pas
per sobre del fons, que és la regla que aquest token diu que segueix.
Hi ha d'arribar la superfície i no l'ombra: totes les ombres són negres
i sobre `#0a0908` no tenen on enfosquir. */
--surf-card:linear-gradient(180deg, rgba(49,32,35,.7), rgba(33,23,24,.7));
/* El relleu de la carta: la vora de dalt rep la llum i la de baix en
retorna menys. Les dues juntes són el que la fa tancar; amb només la de
dalt la carta tenia tapa i no tenia terra. No és una vora dibuixada,
és d'on ve la llum. */
--card-relleu:
inset 0 1px 0 rgba(255,255,255,.07),
inset 0 -1px 0 rgba(255,255,255,.045);
/* Àlies legacy: mantinguts perquè classes antigues segueixin resolent-se */
--paper:var(--cream);
--grana-viu:#A01A2B;
--llauto:var(--or);
--fons:radial-gradient(130% 55% at 50% -10%, #1a0f10 0%, #0a0908 52%), #0a0908;
}
/* ── Base ─────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;overflow-x:clip}
/* El carril de la barra de desplaçament hi és sempre, encara que la pàgina hi
càpiga sencera. Hi ha pàgines llargues (la plantilla) i pàgines curtes (el
joc): sense reservar-lo, passar d'una a l'altra eixampla el contingut i tot
fa una sacsejada de costat en clicar. A la porra passa el mateix quan una
vista encara diu "Carregant…". Als sistemes que posen la barra a sobre
—els Mac d'ara, els mòbils— no reserva res i no es nota. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
background:var(--fons);color:var(--cream);
font-family:'Space Grotesk',sans-serif;line-height:1.5;
font-variant-numeric:tabular-nums;
min-height:100vh;display:flex;flex-direction:column;
position:relative;
}
/* Gra: SVG noise fix a tota la finestra amb soft-light per trencar el negre pla */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.5;mix-blend-mode:soft-light;
}
/* Vinyeta suau als angles: sensació d'escenari, no marc */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.65), transparent 60%),
radial-gradient(80% 60% at 0% 0%, rgba(0,0,0,.35), transparent 55%),
radial-gradient(80% 60% at 100% 0%, rgba(0,0,0,.35), transparent 55%);
}
/* Per sobre del gra i la vinyeta: la closca i el que cada aplicació hi posa. */
.topbar,.view,.footer,#app{position:relative;z-index:1}
::selection{background:var(--grana);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.mono{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--llauto);outline-offset:3px}
/* La fletxa de les crides a l'acció: avança en passar-hi per sobre. La regla
de :hover viu a cada crida, però la transició la comparteixen totes. */
.arrow{display:inline-block;transition:transform .2s ease}
/* ── La barra de dalt ──────────────────────────────────────── */
.topbar{
display:flex;align-items:stretch;gap:clamp(20px,3.5vw,44px);
padding:0 clamp(18px,4vw,48px);
border-bottom:1px solid rgba(245,242,236,.08);
position:sticky;top:0;z-index:50;
background:linear-gradient(180deg, rgba(16,10,12,.82), rgba(12,8,10,.72));
backdrop-filter:blur(14px) saturate(1.15);
-webkit-backdrop-filter:blur(14px) saturate(1.15);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(212,175,106,.06), 0 12px 32px -18px rgba(0,0,0,.9);
}
/* El botó d'aplicacions i la marca van junts, amb la seva pròpia separació:
són una sola cosa ("on sóc"), no dos elements de la barra. */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo{
display:flex;flex-direction:column;justify-content:center;gap:3px;
text-decoration:none;color:inherit;flex:0 0 auto;
padding:12px 0;
}
.logo-brand{
font-family:'Space Grotesk',sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
font-size:1.45rem;line-height:1;white-space:nowrap;
}
.logo .l1{color:var(--paper)}
.logo .l2{color:var(--grana-viu)}
.logo-sub{
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-xs);letter-spacing:var(--track-xs);
text-transform:uppercase;color:var(--or);white-space:nowrap;
}
/* ── Selector d'aplicacions ──
La porra (i el que vingui) són apps de la plataforma, no seccions d'un
web: tenen subdomini propi. Van amb la marca, com el quadrat d'apps de
Google o d'Atlassian, i no barrejades amb les pestanyes ni amb el compte. */
/* Centrat sobre "Zona Nàstic" i no sobre el bloc sencer: el marge inferior
descompta la línia petita de sota la marca. */
.apps{position:relative;align-self:center;margin-bottom:14px;flex:0 0 auto}
.apps-toggle{
list-style:none;cursor:pointer;
width:30px;height:30px;border-radius:var(--r-sm);
display:grid;place-items:center;
color:rgba(245,242,236,.45);
border:1px solid transparent;
transition:color .2s,background .2s,border-color .2s;
}
.apps-toggle::-webkit-details-marker{display:none}
.apps-toggle:hover,
.apps[open] .apps-toggle{
color:var(--or);
background:rgba(245,242,236,.06);
border-color:rgba(245,242,236,.12);
}
.apps-toggle:focus-visible{outline:2px solid var(--llauto);outline-offset:2px}
/* Els nou punts, amb un sol element: el propi fons i vuit ombres. */
.apps-icon{
width:2.5px;height:2.5px;border-radius:50%;
background:currentColor;
box-shadow:
5px 0, 10px 0,
0 5px, 5px 5px, 10px 5px,
0 10px, 5px 10px, 10px 10px;
transform:translate(-5px,-5px);
}
.apps-menu{
position:absolute;top:calc(100% + 10px);left:0;z-index:70;
min-width:270px;
padding:8px;
border-radius:var(--r-md);
border:1px solid rgba(245,242,236,.14);
background:linear-gradient(180deg, #1a1214, #100b0c);
box-shadow:0 2px 3px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.95);
display:flex;flex-direction:column;gap:2px;
}
.apps-title{
font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
color:rgba(245,242,236,.35);
padding:6px 10px 8px;
}
.app{
display:flex;flex-direction:column;gap:2px;
padding:9px 10px;border-radius:var(--r-sm);
transition:background .2s;
}
a.app:hover{background:rgba(212,175,106,.10)}
/* On ets ara. Es marca i no s'amaga: el menú ha de dir "on sóc" tant com
"què més hi ha". */
.app.actual{background:rgba(245,242,236,.05)}
.app.actual .app-name{color:var(--or)}
.app-name{
font-weight:600;font-size:.95rem;color:var(--cream);
line-height:1.2;
}
a.app:hover .app-name{color:var(--or)}
/* La fletxa avisa que allò s'obre en una pestanya nova (és un altre
subdomini): millor dir-ho abans que sorprendre després. */
.app-extern{color:var(--or);font-size:.8em;vertical-align:.1em}
.app-desc{
font-size:.78rem;line-height:1.35;
color:rgba(245,242,236,.5);
}
@media (max-width:520px){
.apps-menu{min-width:0;width:min(280px,calc(100vw - 28px))}
}
/* ── Pestanyes ──
Al web són enllaços entre pàgines i a la porra botons que canvien de
vista. Es pinten igual a propòsit: qui les mira no ha de notar que per
dins són coses diferents. */
.tabs{
display:flex;align-items:stretch;gap:clamp(16px,2.2vw,30px);
min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
flex:0 0 auto;display:flex;align-items:center;
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-md);letter-spacing:var(--track-md);
text-transform:uppercase;padding:6px 1px;
text-decoration:none;
color:rgba(245,242,236,.55);
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color .2s,border-color .2s;white-space:nowrap;
}
.tab:hover{color:var(--or)}
.tab.active{color:var(--cream);border-bottom-color:var(--or)}
/* El `display:flex` de dalt guanya al [hidden] del navegador: sense això la
pestanya d'Admin es veuria a tothom. */
.tab[hidden]{display:none}
/* ── La sessió, a la dreta ────────────────────────────────── */
.topbar-right{
margin-left:auto;display:flex;align-items:center;
gap:clamp(10px,1.6vw,18px);flex:0 0 auto;
}
.auth{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.auth img,.auth .avatar-inicial{
width:22px;height:22px;border-radius:50%;object-fit:cover;
}
/* El xip: el control de tria petit i rodó dels tres webs —les competicions
del calendari, els modes de la classificació, els filtres. El tenien tots
tres escrit al seu full i el de l'onze havia quedat una mica més gran i
amb menys espaiat que els altres dos: la mateixa peça vista de tres
maneres. Aquí és una i prou. */
.chip{
font-family:'Space Grotesk',sans-serif;
font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
padding:8px 14px;border-radius:var(--r-pill);
border:1px solid rgba(245,242,236,.15);background:transparent;
color:rgba(245,242,236,.6);cursor:pointer;
transition:color .25s,border-color .25s,background .25s;
}
.chip:hover{border-color:var(--or);color:var(--or)}
.chip.active{background:var(--grana);border-color:var(--grana);color:var(--paper)}
/* La foto és un botó: obre els ajustos del compte. Ho és als dos webs; al
web era un mut i per això la foto no s'hi podia canviar. */
.auth .avatar-boto{display:flex;align-items:center;padding:0;background:none;border:0;cursor:pointer}
.avatar-inicial{
display:inline-flex;align-items:center;justify-content:center;
background:var(--grana);color:var(--paper);
font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
flex:0 0 auto;border-radius:50%;
}
.auth .avatar-inicial{font-size:var(--txt-sm);letter-spacing:var(--track-sm)}
/* El llorer dels plens de la porra (`/shared/ui/laurel.js`, i el rànquing
el pinta igual des del servidor). La cara manté la mida que li dona cada
llista i el dibuix hi va per sobre, en percentatges d'ella, sense empènyer
res: la fila no es mou perquè algú porti corona. Els números surten del
dibuix: la cara és un cercle de radi 33 dins d'un requadre de 100 × 112
que comença 29 unitats per sobre seu.
El dibuix és un , i cada llista té la seva regla per a les fotos
(`.classi img`, `.ranking-face img`…) que el faria rodó i de 30px: per això
aquí es desfà tot el que aquelles regles hi posen. */
.avatar-coronat{position:relative;display:inline-flex;flex:0 0 auto;border-radius:50%;justify-self:center}
.avatar-coronat > img.avatar-llorer{
position:absolute;left:-25.76%;top:-43.94%;width:151.52%;height:169.7%;
max-width:none;border-radius:0;object-fit:fill;display:block;
pointer-events:none;
}
.auth a{
font-family:'Space Grotesk',sans-serif;
font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
padding:7px 12px;border-radius:var(--r-pill);
border:1px solid rgba(245,242,236,.2);
color:rgba(245,242,236,.7);text-decoration:none;transition:all .25s;
white-space:nowrap;
}
.auth a:hover{border-color:var(--or);color:var(--or)}
/* Píndola "Entra" — funciona a la capçalera i a qualsevol crida a l'acció. */
.entra-boto{
display:inline-flex;align-items:center;gap:6px;
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);
text-transform:uppercase;
padding:9px 18px;border-radius:var(--r-pill);
border:1px solid rgba(245,242,236,.5);
background:rgba(163,23,58,.15);color:var(--or);
text-decoration:none;cursor:pointer;
transition:all .2s;
}
.entra-boto:hover{border-color:var(--or);background:rgba(163,23,58,.3);color:var(--cream)}
/* La caixa de "això és per a qui hi entra": la porra la fa servir per al
pronòstic i l'onze per a l'onze. És la mateixa frase i el mateix gest, o
sigui que viu aquí i no a cap dels dos fulls. */
.anonim-cta{
text-align:center;padding:26px;
border:1px dashed rgba(245,242,236,.3);border-radius:var(--r-md);
color:rgba(245,242,236,.65);box-shadow:var(--edge-hi);
}
.anonim-cta b{color:var(--or)}
.anonim-cta .entra-boto{margin-left:8px}
/* A la capçalera, massís: hi ha de destacar sobre la navegació. */
.auth .entra-boto{
padding:9px 20px;font-size:var(--txt-sm);letter-spacing:var(--track-sm);
background:var(--grana);border-color:var(--grana);color:var(--paper);
}
.auth .entra-boto:hover{background:var(--grana-viu);border-color:var(--grana-viu);color:var(--paper)}
/* ── Diàlegs del compte ───────────────────────────────────────
Els ajustos de la foto i la tria d'àlies (als dos webs) i, a la porra, el
d'entrar. Van junts perquè comparteixen caixa: el que canvia és el que hi
diu a dins. */
.login-modal{
border:1px solid rgba(245,242,236,.25);border-radius:var(--r-md);
background:radial-gradient(120% 100% at 50% 0%, #2b1e24, #150d0f 65%);color:var(--cream);
width:min(420px,calc(100vw - 32px));padding:0;margin:auto;
opacity:1;transform:translateY(0);
transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1),
overlay .3s allow-discrete, display .3s allow-discrete;
}
@starting-style{.login-modal[open]{opacity:0;transform:translateY(14px)}}
.login-modal::backdrop{background:rgba(10,7,8,.65);backdrop-filter:blur(4px);transition:background .3s}
@starting-style{.login-modal[open]::backdrop{background:rgba(10,7,8,0)}}
.login-tancar{position:absolute;top:12px;right:14px;font-size:24px;color:rgba(245,242,236,.55);padding:6px 10px}
.login-tancar:hover{color:var(--or)}
.login-cos{padding:38px 34px 30px;text-align:center;display:grid;justify-items:center;gap:14px}
.login-eyebrow{font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:var(--or)}
.login-cos h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.9rem;line-height:1.05;text-transform:uppercase}
.login-lede{color:rgba(245,242,236,.7);font-size:.95rem;line-height:1.55;max-width:32ch}
.login-legal{
margin-top:4px;max-width:32ch;text-align:center;
font-size:var(--txt-md);letter-spacing:var(--track-md);text-transform:none;
color:rgba(245,242,236,.55);line-height:1.55;
}
.login-legal a{color:var(--or);text-decoration:underline;text-underline-offset:2px}
.login-legal a:hover{color:#e6c384}
.g-boto{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:#fff;border:1px solid #dadce0;border-radius:var(--r-pill);
padding:11px 20px 11px 16px;font-family:'Space Grotesk',sans-serif;
font-size:14px;font-weight:500;color:#3c4043;text-decoration:none;
box-shadow:0 1px 3px rgba(60,64,67,.2);transition:all .2s;
}
.g-boto:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(60,64,67,.3)}
.g-boto svg{width:18px;height:18px}
/* Els formularis que van dins dels diàlegs. La porra en fa servir els
mateixos controls a l'administració, i per això les classes es diuen com
es diuen; el que hi ha aquí és el que necessita qualsevol dels dos webs. */
.admin-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:10px}
.admin-form label{display:grid;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;color:rgba(245,242,236,.6)}
.admin-form input, .admin-form select, .admin-form textarea{
padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(245,242,236,.18);
border-radius:var(--r-md);color:var(--cream);font-family:'Space Grotesk',sans-serif;font-size:.95rem;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus{border-color:var(--or);outline:none}
.admin-form button[type="submit"], .admin-form > button{
grid-column:1/-1;justify-self:start;
display:inline-block; /* fallback si no es respecta el grid */
padding:12px 28px;margin-top:6px;
border-radius:var(--r-pill);border:1px solid var(--grana);
background:var(--grana);color:var(--paper);
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
cursor:pointer;transition:background .2s;
}
.admin-form button[type="submit"]:hover, .admin-form > button:hover{background:var(--grana-viu)}
.desar{
justify-self:start;padding:12px 28px;border-radius:var(--r-pill);
border:1px solid var(--grana);background:var(--grana);color:var(--paper);
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);
text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.desar:hover{background:var(--grana-viu)}
.desar:disabled{opacity:.4;cursor:not-allowed}
.desa-nota{text-align:center;font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);color:rgba(245,242,236,.5)}
.desa-nota.ok{color:#7ec98a}
.desa-nota.error{color:#e07070}
/* Una casella amb la seva etiqueta al costat. Va amb el pare al selector
per guanyar a `.admin-form label`, que posa les etiquetes en versaletes i
en columna: una frase que es llegeix ("Amagar la meva foto") no és
l'etiqueta d'un camp. Abans ho resolien quatre `!important`. */
.check-mono,
.admin-form label.check-mono{
display:flex;flex-direction:row;align-items:center;gap:8px;
font-size:.85rem;letter-spacing:.05em;text-transform:none;
color:rgba(245,242,236,.7);cursor:pointer;
}
.check-mono input{width:16px;height:16px;accent-color:var(--grana)}
/* El camp de la tria d'àlies. Viu aquí i no al full de la porra perquè el
diàleg és dels dos webs; el relleu se'l posa ell, com fa el formulari de
contacte, que tampoc pot dependre d'un full que no és seu. */
.alias-input{
width:100%;padding:12px 14px;margin-bottom:12px;
background:rgba(10,7,8,.5);color:var(--cream);text-align:center;
border:1px solid rgba(245,242,236,.3);border-radius:var(--r-md);
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;
box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.alias-input::placeholder{color:rgba(245,242,236,.3);font-weight:400}
.alias-input:focus{border-color:var(--or);outline:none}
/* ── El peu ───────────────────────────────────────────────── */
.footer{
margin-top:auto;padding:20px;
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:6px 14px;
font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
color:rgba(245,242,236,.4);
border-top:1px solid rgba(245,242,236,.08);
text-align:center;
}
.footer-item{white-space:normal;color:inherit;text-decoration:none;transition:color .2s}
.footer a.footer-item{color:rgba(245,242,236,.55)}
.footer a.footer-item:hover{color:var(--or)}
.footer-sep{color:rgba(245,242,236,.25)}
/* Les xarxes. Només icones: el nom de cada xarxa ja el diu la seva forma, i
tres paraules més al peu no hi afegirien res. */
.social{display:flex;align-items:center;gap:8px}
.social-link{
display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
color:rgba(245,242,236,.55);
border:1px solid rgba(245,242,236,.14);
background:rgba(255,255,255,.02);
transition:color .2s,border-color .2s,background .2s;
}
.social-link:hover{
color:var(--or);border-color:rgba(212,175,106,.45);
background:rgba(255,255,255,.05);
}
.social-link svg{width:15px;height:15px;display:block}
@media (max-width:640px){
.footer{flex-direction:column;gap:8px;padding:16px 12px}
.footer-sep{display:none}
.footer-item{
font-size:var(--txt-xs);letter-spacing:var(--track-xs);
white-space:nowrap; /* que la frase no es parteixi al mig */
}
}
/* ── Mòbil: la barra en dues files, tot navegable ─────────── */
@media (max-width:820px){
.topbar{flex-wrap:wrap;gap:10px 12px;padding:0 14px}
.brand{flex:0 1 auto;min-width:0;gap:10px}
.logo{min-width:0;overflow:hidden}
.logo-brand{font-size:1.15rem}
.logo-sub{font-size:8px;letter-spacing:.18em}
.apps{margin-bottom:12px}
.tabs{
order:3;flex-basis:100%;
gap:18px;
/* El dit que arrossega la tira ha de moure-la de costat i prou. Sense
`pan-x` el navegador interpreta qualsevol biaix vertical com a scroll
de la pàgina i la tira no es mou; `contain` evita que en arribar al
final el gest continuï cap al gest d'"enrere" del navegador. */
touch-action:pan-x;
overscroll-behavior-x:contain;
}
.tab{padding:5px 1px;font-size:var(--txt-sm);letter-spacing:var(--track-sm)}
.topbar-right{gap:8px}
}
@media (max-width:600px){
.login-cos{padding:28px 20px 24px}
}
@media (max-width:360px){
.logo-brand{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
}
/* ── Hi ha una versió nova ──
L'avís de `/shared/ui/new-version.js` per a qui té la pestanya oberta d'abans
d'un desplegament. A baix i petit, com el de favorits: no tapa res i no
s'hi ha de fer cas per seguir. */
.avis-versio{
position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);
padding:8px 8px 8px 18px;border-radius:var(--r-pill);
background:rgba(20,14,15,.96);border:1px solid rgba(212,175,106,.4);
color:var(--cream);font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.04em;
box-shadow:var(--shadow-card);
}
.avis-versio-actualitza{
font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
padding:7px 14px;border-radius:var(--r-pill);border:0;cursor:pointer;
background:var(--grana);color:var(--paper);white-space:nowrap;
}
.avis-versio-actualitza:hover{background:var(--grana-lite)}
.avis-versio-actualitza:disabled{opacity:.7;cursor:progress}
.avis-versio-tanca{
width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
background:transparent;color:rgba(245,242,236,.5);font-size:1rem;line-height:1;
}
.avis-versio-tanca:hover{color:var(--cream)}