/* FactShot — un sol full, cap petició externa. Paper crema, tinta molt fosca i un ambre; els quatre colors de temàtica per marcar. CAP ombra i CAP degradat (l'app no en té). Els hexadecimals són els del brief § 3, que surten dels tokens de l'app, i les parelles de text i fons són totes a `scripts/lib/contrast.mjs`: el guardià les comprova a 4,5:1 en clar i en fosc. Si en canvies un, canvia també la taula. Les bandes van a tota amplada i alternen: paper · sorra · tinta · paper · sorra · lila · paper · sorra · paper · ambre. L'última és l'única que es veu EXACTAMENT igual en clar i en fosc, i és a posta. LA PELL VA EN TRES CAPES: 1. `:root` → la clara 2. `@media (prefers-color-scheme: dark) :root:not([data-theme=light])` 3. `:root[data-theme="dark"]` → la tria explícita Les capes 2 i 3 han de dir EXACTAMENT el mateix: hi ha una prova al guardià que les compara línia per línia i falla si una de les dues es desfasa. L'única animació del lloc és la baralla de la portada, i és de CSS. L'únic JavaScript és `assets/js/theme.js`, que només posa `data-theme` a . */ @font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-700.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/nunito-800.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/nunito-900.woff2") format("woff2"); } :root { /* paper i tinta */ --paper: #FDFBF6; --sand: #F2ECE0; --surface: #FFFFFF; --ink: #1A1714; --body: #4A443C; --muted: #5C574F; --hairline: #ECE7DF; --hairline-warm: #E4DCCC; --rule: #1A1714; /* l'ambre: FARCIMENT, i un to propi per a text petit */ --amber: #FFC43D; --amber-soft: #FFF6DE; --amber-ink: #8A5B00; --on-amber: #1A1714; /* els quatre colors de temàtica */ --lilac: #5E45D6; --teal: #06655D; --coral: #A8342B; --lilac-fill: #5E45D6; --teal-fill: #0B968A; --coral-fill: #A8342B; /* el bloc ple: sempre el contrari del fons */ --ink-block: #1A1714; --on-ink: #FDFBF6; --on-ink-soft: #C9C1B4; --on-ink-accent: #FFC43D; /* la banda de lila plena */ --band-lilac: #5E45D6; --on-band-lilac: #FFFFFF; /* el cos dels telèfons de les maquetes: sempre fosc, a les dues pells */ --device: #1A1714; --device-edge: #3F382F; /* ⚠ EL POU DE L'ART. Les peces de plastilina porten el crema PINTAT a dins de la imatge; el pou el continua i per això NO canvia amb la pell: una xapa crema damunt del fosc, que és com es veuen a l'app. */ --art-well: #FDFBF6; /* els radis de l'app */ --r-tile: 8px; --r-chip: 16px; --r-btn: 18px; --r-card: 24px; --r-sheet: 28px; --r-round: 999px; --pad: clamp(44px, 7vw, 92px); --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light dark; } /* ── capa 2: la pell del sistema, si no s'ha demanat la clara a mà ───────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #191512; --sand: #100D0B; --surface: #221E19; --ink: #F6F1E7; --body: #D6CEC0; --muted: #ABA292; --hairline: #332E27; --hairline-warm: #3F382F; --rule: #F6F1E7; --amber-soft: #3A2E14; --amber-ink: #FFD375; --lilac: #B3A4FF; --teal: #3FD6C4; --coral: #FF9182; --lilac-fill: #B3A4FF; --teal-fill: #3FD6C4; --coral-fill: #FF9182; --ink-block: #F6F1E7; --on-ink: #191512; --on-ink-soft: #4A443C; --on-ink-accent: #8A5B00; --band-lilac: #3E2C92; --device: #100D0B; color-scheme: dark; } } /* ── capa 3: la fosca demanada a mà, passi el que passi al sistema ───────── */ :root[data-theme="dark"] { --paper: #191512; --sand: #100D0B; --surface: #221E19; --ink: #F6F1E7; --body: #D6CEC0; --muted: #ABA292; --hairline: #332E27; --hairline-warm: #3F382F; --rule: #F6F1E7; --amber-soft: #3A2E14; --amber-ink: #FFD375; --lilac: #B3A4FF; --teal: #3FD6C4; --coral: #FF9182; --lilac-fill: #B3A4FF; --teal-fill: #3FD6C4; --coral-fill: #FF9182; --ink-block: #F6F1E7; --on-ink: #191512; --on-ink-soft: #4A443C; --on-ink-accent: #8A5B00; --band-lilac: #3E2C92; --device: #100D0B; color-scheme: dark; } /* La clara demanada a mà amb el sistema en fosc: els controls del navegador (barres, camps) també han de tornar clars. */ :root[data-theme="light"] { color-scheme: light; } /* --------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; } /* A partir de 900 px la capçalera té DUES files —la marca i els selectors a dalt, el menú de seccions a sota— i el salt d'una àncora ha de comptar-hi. */ @media (min-width: 900px) { html { scroll-padding-top: 104px; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 700 16px/1.45 "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif; overflow-x: hidden; } h1, h2, h3, h4, p, ul, ol, figure, details { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; border-radius: 4px; } /* El salt d'una àncora no ha de deixar el títol sota la capçalera enganxada. */ [id] { scroll-margin-top: 92px; } @media (min-width: 900px) { [id] { scroll-margin-top: 112px; } } .skip { position: absolute; left: -999px; top: 8px; z-index: 40; padding: 12px 18px; background: var(--ink); color: var(--paper); border-radius: var(--r-btn); font-weight: 900; } .skip:focus { left: 16px; } .shell { width: min(100% - 32px, 1060px); margin-inline: auto; } @media (min-width: 640px) { .shell { width: min(100% - 48px, 1060px); } } .narrow { max-width: 760px; } .center { text-align: center; } .center .copy, .center .lead, .center .note { margin-inline: auto; } /* -------------------------------------------------------------- tipus */ .eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber-ink); } .eyebrow-on-ink { color: var(--on-ink-accent); } .eyebrow-on-lilac { color: var(--on-band-lilac); } .eyebrow-on-amber { color: var(--on-amber); } .h1 { font-size: clamp(38px, 7.2vw, 68px); font-weight: 900; line-height: 1.02; letter-spacing: -0.04em; margin-top: 14px; text-wrap: balance; } .h1-small { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.03em; } .h2 { font-size: clamp(27px, 4.2vw, 38px); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin-top: 10px; text-wrap: balance; } .h3 { font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .lead { font-size: 17px; font-weight: 700; color: var(--body); margin-top: 14px; max-width: 58ch; text-wrap: pretty; } .lead-big { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.35; } .copy { color: var(--body); margin-top: 10px; max-width: 62ch; text-wrap: pretty; } .copy-on-ink { color: var(--on-ink-soft); } .copy-on-amber { color: var(--on-amber); } .note { font-size: 14px; font-weight: 800; color: var(--muted); margin-top: 14px; max-width: 62ch; } .fine { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 26px; max-width: 74ch; } .label { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber-ink); } .claim { margin-top: 18px; padding: 14px 18px; border: 2px solid var(--on-ink-accent); border-radius: var(--r-chip); color: var(--on-ink); font-weight: 900; font-size: 15px; } .notice { margin-top: 26px; padding: 16px 20px; border: 2px solid var(--hairline-warm); border-radius: var(--r-chip); background: var(--amber-soft); color: var(--amber-ink); font-size: 15px; font-weight: 800; } .notice a { font-weight: 900; } /* ------------------------------------------------------------- bandes */ .band { padding: var(--pad) 0; border-top: 2px solid var(--hairline); } .band-first { border-top: 0; padding-top: clamp(24px, 4vw, 48px); } .band-sand { background: var(--sand); border-top-color: var(--hairline-warm); } .band-ink { background: var(--ink-block); color: var(--on-ink); border-top-color: var(--ink-block); } .band-ink .h2 { color: var(--on-ink); } .band-lilac { background: var(--band-lilac); color: var(--on-band-lilac); border-top-color: var(--band-lilac); } .band-lilac .h2, .band-lilac .h3, .band-lilac .copy { color: var(--on-band-lilac); } .band-amber { background: var(--amber); color: var(--on-amber); border-top-color: var(--amber); } .band-amber .h2 { color: var(--on-amber); } .band-last { border-bottom: 0; } /* Les bandes on una peça surt de la caixa a posta: la carta que marxa de la baralla i els telèfons que sobresurten. El tall les deixa entrar i sortir sense obrir mai una barra horitzontal. */ .band-clip { overflow: hidden; } /* El títol d'una banda amb una peça d'art al costat: el text mana l'amplada i l'art s'hi arrauleix, i per sota de 620 px se li posa a sobre. */ .band-head { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 40px); } .band-head > div:first-child { flex: 1 1 320px; min-width: 0; } /* ------------------------------------------------------------- botons */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 13px 24px; border-radius: var(--r-btn); font-weight: 900; font-size: 16px; text-decoration: none; border: 2px solid transparent; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); } .button-small { min-height: 42px; padding: 8px 16px; font-size: 14px; } .button-ink { background: var(--ink); color: var(--paper); } .button-line { border-color: var(--rule); color: var(--ink); margin-top: 22px; } .button-line:hover, .button-ink:hover { background: var(--amber); color: var(--on-amber); border-color: var(--amber); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; } .cta-center { justify-content: center; } .badge { display: inline-block; border-radius: var(--r-tile); } .badge img { width: 150px; height: 50px; } .badge-soon { display: inline-block; margin-top: 26px; padding: 13px 22px; border: 2px solid var(--rule); border-radius: var(--r-btn); font-weight: 900; } /* ------------------------------------------------------- la capçalera */ .masthead { position: sticky; top: 0; z-index: 30; border-bottom: 2px solid var(--hairline); background: var(--paper); } .masthead-row { display: flex; align-items: center; gap: 10px; min-height: 68px; } @media (min-width: 560px) { .masthead-row { gap: 14px; } } .brand { text-decoration: none; margin-right: auto; } /* La marca: la icona de l'app i, al costat, el nom tot junt. El radi de les cantonades ja és DINS de la imatge; aquí no n'hi posem cap. */ .mark { display: inline-flex; align-items: center; gap: 10px; } .mark-logo { width: 34px; height: 34px; flex: none; } .mark-name { font-size: 21px; font-weight: 900; letter-spacing: -0.04em; white-space: nowrap; } .mark-big .mark-logo { width: 44px; height: 44px; } .mark-big .mark-name { font-size: 26px; } /* LA CAPÇALERA, AMPLADA PER AMPLADA. Hi caben la marca, el menú de seccions, la llengua, l'aparença i el botó, i a 320 px no hi caben tots: se'n van en aquest ordre, i cap dels que marxen es perd —el botó és el badge que hi ha quatre dits més avall, i la llengua i l'aparença tornen a ser al peu. < 400 px marca · menú · llengua < 640 px + aparença < 900 px + botó ≥ 900 px el menú passa a ser una tira en línia, en una segona fila */ @media (max-width: 899px) { .masthead-row > .button { display: none; } } @media (min-width: 640px) { .masthead-row > .button { display: inline-flex; } } @media (max-width: 479px) { .masthead-row { gap: 8px; } .masthead-row .mark-name { font-size: 19px; } .masthead-row .mark-logo { width: 31px; height: 31px; } .menu-word { display: none; } } /* L'aparença és una preferència i és també al peu: a 320 px la fila la perd abans que el menú, que és navegació. */ @media (max-width: 399px) { html[data-js] .masthead-row > .theme-pick { display: none; } } /* ----------------------------------- els selectors: llengua i aparença Tots dos són el mateix moble: un `
` natiu que obre, tanca i es recorre amb teclat. El de llengua són ENLLAÇOS i va sense JavaScript; el d'aparença són BOTONS i només es pinta si `theme.js` ha marcat . */ .picker { position: relative; flex: none; } .picker > summary { list-style: none; cursor: pointer; } .picker > summary::-webkit-details-marker { display: none; } .picker-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--hairline-warm); border-radius: var(--r-round); font-size: 13px; font-weight: 900; letter-spacing: 0.06em; transition: border-color 160ms var(--ease), color 160ms var(--ease); } .picker-pill:hover { border-color: var(--rule); } @media (min-width: 400px) { .picker-pill { padding: 8px 14px; } } .picker-icon { width: 16px; height: 16px; flex: none; } .picker-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 190px; padding: 6px; background: var(--surface); border: 2px solid var(--rule); border-radius: var(--r-chip); } .picker-up .picker-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; } .picker-menu a, .picker-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-tile); background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; text-align: left; text-decoration: none; transition: background-color 140ms var(--ease); } .picker-menu a:hover, .picker-menu button:hover { background: var(--sand); } .lang-code { font-size: 12px; font-weight: 900; color: var(--muted); min-width: 22px; } .lang-here { color: var(--amber-ink); } .tick { width: 16px; height: 16px; margin-left: auto; flex: none; } /* ───────────────────────── el menú de seccions: dos mobles, mai tots dos Per sota de 900 px, un `
` amb l'hamburguesa, el mateix moble que els dos selectors. A partir de 900, una tira d'enllaços en línia en una SEGONA FILA de la capçalera: set seccions i tres controls no caben en una sola fila de 1060 px en cap de les tres llengües, i encabir-los a la força és el que fa que una capçalera sembli plena de mobles. El que no toca es queda amb `display: none`, que també el treu de l'arbre d'accessibilitat: qui escolta la pàgina sent el menú una sola vegada. */ .nav-inline { display: none; } .menu-list { min-width: 216px; } @media (min-width: 900px) { /* Amb dues files, el `min-height` de la barra d'una sola ja no serveix: la primera fila fa el que fan la marca i els selectors, i respira amb un encoixinat propi. */ .masthead-row { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: 12px; } .masthead-row > .menu { display: none; } .nav-inline { display: block; order: 9; flex: 1 0 100%; border-top: 2px solid var(--hairline); } .nav-inline ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.1vw, 30px); padding: 9px 0; } .nav-inline a { display: block; padding: 3px 0; font-size: 14px; font-weight: 900; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color 160ms var(--ease), border-color 160ms var(--ease); } .nav-inline a:hover { color: var(--ink); border-bottom-color: var(--amber); } } .picker-foot { margin-top: 22px; } .foot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .foot-controls .picker-foot { margin-top: 0; } /* El selector d'aparença només existeix si el JavaScript ha corregut: sense ell la pell la mana el sistema i un botó que no fa res seria una mentida. */ .theme-pick { display: none; } html[data-js] .theme-pick { display: block; } .theme-sun, .theme-moon, .theme-auto { display: none; } html[data-theme-choice="light"] .picker-pill > .theme-sun, html[data-theme-choice="dark"] .picker-pill > .theme-moon, html[data-theme-choice="system"] .picker-pill > .theme-auto { display: block; } .picker-menu .theme-sun, .picker-menu .theme-moon, .picker-menu .theme-auto { display: block; } .picker-menu .tick { visibility: hidden; } html[data-theme-choice="light"] [data-set-theme="light"] .tick, html[data-theme-choice="dark"] [data-set-theme="dark"] .tick, html[data-theme-choice="system"] [data-set-theme="system"] .tick { visibility: visible; } html[data-theme-choice="light"] [data-set-theme="light"], html[data-theme-choice="dark"] [data-set-theme="dark"], html[data-theme-choice="system"] [data-set-theme="system"] { color: var(--amber-ink); } /* ═══════════════════════════════════════════ LA PORTADA I LA BARALLA */ .hero { display: grid; gap: clamp(34px, 5vw, 60px); align-items: center; padding-block: clamp(18px, 3vw, 40px); } @media (min-width: 900px) { .hero { grid-template-columns: 1.02fr 0.98fr; } } /* La baralla no s'estira mai: una carta ampla i baixa deixa de semblar una carta. Per sota dels 900 px va centrada sota el titular. */ .deck { position: relative; width: min(100%, 448px); margin-inline: auto; } /* «La baralla d'avui» va dins d'una píndola amb els dotze filets: és el rètol de la pila, com el de dalt de la pestanya Baralla. */ .deck-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; padding: 9px 16px; border: 2px solid var(--hairline-warm); border-radius: var(--r-round); } /* Els filets del comptador: dotze per a la baralla, set per a la ratxa. Són decoratius i el número del costat els diu en text. */ .meter { display: flex; gap: 4px; align-items: center; flex: 1 1 120px; min-width: 108px; } .meter i { display: block; height: 4px; flex: 1 1 8px; border-radius: 2px; background: var(--rule); } .meter-streak { flex: 0 0 auto; width: 176px; } .meter-streak i { height: 9px; border-radius: 4px; background: var(--amber); } .meter-streak i:nth-child(n + 6) { background: var(--hairline-warm); } .deck-stack { position: relative; display: grid; } .deck-stack > * { grid-area: 1 / 1; } .deck-back { display: block; border: 2px solid var(--hairline-warm); border-radius: var(--r-card); background: var(--surface); } .deck-back-1 { transform: rotate(-2.6deg); } .deck-back-2 { transform: rotate(3.2deg); } .deck-cards { display: grid; } .deck-cards > .dcard { grid-area: 1 / 1; } .dcard { position: relative; z-index: 0; overflow: hidden; min-height: clamp(300px, 42vw, 340px); padding: 24px 24px 22px 56px; background: var(--surface); border: 2px solid var(--rule); border-radius: var(--r-card); opacity: 0; } /* Sense animació —o amb el moviment reduït— es veu la primera i prou. */ .dcard:first-child { opacity: 1; } /* La franja de la temàtica: un filet neutre i el nom en vertical, amb el color de la família. És el que fa que una carta es reconegui d'un cop d'ull. */ .dcard-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 36px; display: grid; place-items: center; border-right: 2px solid var(--hairline); } .dcard-rail-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; max-height: 100%; } .dcard-lilac .dcard-rail-text, .opencard-lilac .dcard-rail-text { color: var(--lilac); } .dcard-teal .dcard-rail-text, .opencard-teal .dcard-rail-text { color: var(--teal); } .dcard-coral .dcard-rail-text, .opencard-coral .dcard-rail-text { color: var(--coral); } .dcard-amber .dcard-rail-text, .opencard-amber .dcard-rail-text { color: var(--amber-ink); } .dcard-ink .dcard-rail-text, .opencard-ink .dcard-rail-text { color: var(--ink); } /* El número gegant de fons, com a la carta de l'app. Decoratiu i darrere de tot: el text va a sobre i es llegeix igual. */ .dcard-ghost { position: absolute; right: -6px; bottom: -34px; z-index: 0; font-size: 168px; font-weight: 900; line-height: 0.8; letter-spacing: -0.06em; opacity: 0.12; pointer-events: none; } .dcard-lilac .dcard-ghost { color: var(--lilac); } .dcard-teal .dcard-ghost { color: var(--teal); } .dcard-coral .dcard-ghost { color: var(--coral); } .dcard-amber .dcard-ghost { color: var(--amber-ink); } .dcard-ink .dcard-ghost { color: var(--ink); } .dcard-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } .dcard-count { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; color: var(--muted); } .dcard-fact { margin-top: 16px; font-size: clamp(19px, 2.5vw, 24px); font-weight: 900; line-height: 1.22; letter-spacing: -0.03em; text-wrap: pretty; } .dcard-more { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .dash { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--amber); flex: none; } /* L'ANIMACIÓ DE LA BARALLA — 16 s, quatre cartes, 4 s cadascuna. El cicle d'una carta, en el seu 25 % de pantalla: 0 – 2,5 % apareix al fons de la pila, fonent-se. ⚠ Aquest fos és el que abans no hi era: la carta hi entrava de cop i, com que treu el cap per sota de la de dalt, es veia el salt. 2,5 – 7 % puja a lloc i es posa al davant. 7 – 22 % quieta i llegible (2,4 s). 22 – 28 % SURT: translació cap a la dreta + gir + opacitat fins a 0. Quan el `z-index` cau (28,2 %) ja fa estona que és invisible, i per això la sortida ja no es «trenca». 28,2 – 33 % torna al fons de la pila amb l'opacitat a 0: la recol·locació no es veu mai. 33 – 100 % espera el seu torn, invisible. El `z-index` no és el que fa desaparèixer res: només decideix qui tapa qui mentre totes dues són visibles. */ @keyframes deal { 0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); z-index: 1; } 2.5% { opacity: 1; transform: translate3d(0, 26px, 0) scale(0.94); z-index: 1; } 7% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); z-index: 2; } 22% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); z-index: 3; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.35); } 25% { opacity: 0.86; transform: translate3d(24%, -1.5%, 0) rotate(4deg) scale(0.995); z-index: 3; } 28% { opacity: 0; transform: translate3d(92%, -5%, 0) rotate(13deg) scale(0.95); z-index: 3; } 28.2% { opacity: 0; transform: translate3d(92%, -5%, 0) rotate(13deg) scale(0.95); z-index: 0; } 33% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); z-index: 0; } 100% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); z-index: 0; } } .deck-cards .dcard { animation: deal 16s var(--ease) infinite; will-change: transform, opacity; } .deck-cards .dcard:nth-child(1) { animation-delay: 0s; } .deck-cards .dcard:nth-child(2) { animation-delay: 4s; } .deck-cards .dcard:nth-child(3) { animation-delay: 8s; } .deck-cards .dcard:nth-child(4) { animation-delay: 12s; } .card-swipes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .swipe { flex: 1 1 auto; text-align: center; padding: 10px 12px; border-radius: var(--r-chip); font-size: 13px; font-weight: 900; border: 2px solid currentColor; } .swipe-left { color: var(--coral); } .swipe-right { color: var(--teal); } .card-caption { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted); } /* ═══════════════════════════════════════════════════ ELS TRES PASSOS */ .steps { position: relative; display: grid; gap: 20px; margin-top: 36px; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } /* El fil que cus els tres passos: puntets de tinta que passen per darrere de les fitxes i només es veuen als forats. */ @media (min-width: 760px) { .steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 58px; border-top: 3px dotted var(--rule); } } .step { position: relative; padding: 24px; background: var(--surface); border: 2px solid var(--hairline-warm); border-radius: var(--r-card); display: flex; flex-direction: column; } .step-fig { display: block; margin: 18px 0 16px; } .step-n { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-round); background: var(--amber); color: var(--on-amber); font-size: 17px; font-weight: 900; } .step-meter { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; } .step-count { font-size: 12px; font-weight: 900; letter-spacing: 0.14em; color: var(--muted); flex: none; } .streak { margin-top: 26px; padding: 22px 24px; border: 2px solid var(--hairline-warm); border-radius: var(--r-card); background: var(--surface); display: grid; gap: 14px; align-items: center; } @media (min-width: 680px) { .streak { grid-template-columns: auto auto 1fr; column-gap: 22px; } } .streak .copy { margin-top: 0; } .streak-text { min-width: 0; } .streak .label { margin-bottom: 8px; } .streak-art { width: 72px; } @media (min-width: 680px) { .streak-art { width: 88px; } } /* ═════════════════════════════════════════════ LES FONTS I LA CARTA OBERTA */ .fig { width: 34px; height: 34px; color: var(--ink); } .fig-big { width: 52px; height: 52px; } .source { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; } @media (min-width: 860px) { .source { grid-template-columns: 1fr 1fr; } } .source-fig { display: inline-flex; padding: 16px; border: 2px solid var(--on-ink-accent); border-radius: var(--r-chip); color: var(--on-ink-accent); margin-bottom: 18px; } .source-fig .fig { color: inherit; } .source-show { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; } /* La mateixa carta de la portada, oberta: el fet, el xip de la font i el de quan la vas llegir, com els pinta l'app. Damunt del bloc ple hi va en paper, perquè el contrast quedi igual a les dues pells. */ .opencard { flex: 1 1 260px; position: relative; padding: 24px 22px 22px 54px; background: var(--paper); color: var(--ink); border: 2px solid var(--rule); border-radius: var(--r-sheet); } .opencard-fact { font-size: clamp(19px, 2.3vw, 23px); font-weight: 900; line-height: 1.22; letter-spacing: -0.03em; } .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .pill { display: inline-block; padding: 8px 14px; border-radius: var(--r-round); border: 2px solid var(--hairline-warm); background: var(--surface); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .pill-source { border-color: var(--amber); color: var(--amber-ink); } /* ═════════════════════════════════════════ L'ART DE L'APP (plastilina) Les peces són fotografies d'objectes de plastilina damunt de paper crema, i el crema va PINTAT a dins de la imatge. Per això cada peça va dins d'un pou (`--art-well`) que el continua i que NO canvia amb la pell: damunt del fosc es llegeix com una xapa, que és com es veuen a l'app. Cap ombra i cap degradat: la vora és un filet de 2 px del color que toqui. Les mides es reserven amb `width`/`height` al HTML i amb una amplada fixa aquí: cap peça no mou res en carregar-se. */ .art { display: block; background: var(--art-well); flex: none; } .art img { width: 100%; height: auto; } .art-round { border-radius: var(--r-round); overflow: hidden; border: 2px solid var(--hairline-warm); } .art-card { border-radius: var(--r-card); overflow: hidden; border: 2px solid var(--hairline-warm); } .art-ring { border-color: currentColor; } /* Damunt d'una banda plena el filet càlid no es veuria: hi va el color de la banda, que és l'únic que hi contrasta. */ .band-lilac .art { border-color: var(--on-band-lilac); } /* La peça de «jugar amb algú», al costat del titular de la banda. */ .play-art { width: clamp(104px, 26vw, 168px); margin-inline: auto; } /* ═══════════════════════════════════════════════════════ GRAELLES I FITXES */ .grid { display: grid; gap: 18px; margin-top: 30px; } @media (min-width: 680px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 520px) { .grid-tabs { grid-template-columns: repeat(2, 1fr); } } .split { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1.25fr 0.75fr; } } .split-show { display: flex; justify-content: center; } .tile { padding: 22px; background: var(--surface); border: 2px solid var(--hairline-warm); border-radius: var(--r-card); } .tile-lined { border-color: var(--rule); } .tile-fig { display: block; margin-bottom: 14px; } .tile .h3 { margin-top: 0; } .band-lilac .tile { background: transparent; border-color: var(--on-band-lilac); color: var(--on-band-lilac); } .band-lilac .fig { color: var(--on-band-lilac); } /* ═══════════════════════════════════════ ELS DOS MODES, COM A L'APP El commutador de dalt de la baralla, dibuixat: una píndola de dos segments amb un filet al mig. NO és un control —no hi ha res a clicar— i per això va `aria-hidden`: és el rètol dels dos costats de sota, i cada costat ja porta el seu títol escrit. Els dos segments van en el color de la seva família, que és el que els lliga amb la carta i amb els botons. */ .switch { display: inline-flex; align-items: stretch; margin-top: 30px; padding: 4px; border: 2px solid var(--rule); border-radius: var(--r-round); background: var(--surface); } .switch-seg { position: relative; padding: 9px 22px; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; } .switch-seg + .switch-seg::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 1px; background: var(--hairline-warm); } .switch-facts { color: var(--teal); } .switch-trivia { color: var(--lilac); } .modes { display: grid; gap: 18px; margin-top: 22px; } @media (min-width: 760px) { .modes { grid-template-columns: 1fr 1fr; } } .mode { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-card); border: 2px solid var(--rule); background: var(--surface); } .mode .copy { margin-top: 10px; } .mode-facts .h3 { color: var(--teal); } .mode-trivia .h3 { color: var(--lilac); } /* El telèfon de cada costat no s'estira: és la prova de la carta, no la peça. */ .mode .shot { flex: none; align-self: center; width: min(82%, 198px); margin-top: 26px; } /* La carta petita: la MATEIXA als dos costats, que és el que diu la secció. */ .mini { padding: 16px 18px; border: 2px solid var(--rule); border-radius: var(--r-chip); background: var(--paper); } .mini-tag { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; } .mini-lilac .mini-tag { color: var(--lilac); } .mini-teal .mini-tag { color: var(--teal); } .mini-coral .mini-tag { color: var(--coral); } .mini-amber .mini-tag { color: var(--amber-ink); } .mini-ink .mini-tag { color: var(--ink); } .mini-fact { margin-top: 10px; font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; } .mode-demo { margin-top: auto; padding-top: 22px; } /* Els dos botons del gest, iguals que els de la portada: el de l'esquerra en coral i el de la dreta en teal, a Facts i a Trivia. */ .gest { display: flex; gap: 8px; margin-top: 10px; } .gest-btn { flex: 1 1 0; text-align: center; padding: 9px 10px; border-radius: var(--r-chip); border: 2px solid currentColor; font-size: 13px; font-weight: 900; } .gest-no { color: var(--coral); } .gest-yes { color: var(--teal); } /* La frase que lliga els dos modes, dins d'un filet de puntets. */ .same { margin-top: 26px; padding: 14px 18px; border: 2px dotted var(--rule); border-radius: var(--r-chip); font-size: 15px; font-weight: 900; max-width: 62ch; } /* El repàs: quatre cartes i la cinquena girada, amb el seu interrogant. */ .quiz { margin-top: 30px; padding: 22px 24px; border: 2px solid var(--hairline-warm); border-radius: var(--r-card); background: var(--surface); display: grid; gap: 14px; align-items: center; } @media (min-width: 760px) { .quiz { grid-template-columns: auto auto 1fr; column-gap: 24px; } } .quiz .copy { margin-top: 0; } .quiz-strip { display: flex; align-items: center; gap: 6px; } .quiz-strip i { display: block; width: 19px; height: 27px; border-radius: 5px; border: 2px solid var(--hairline-warm); background: var(--paper); } .quiz-strip b { display: grid; place-items: center; width: 23px; height: 32px; border-radius: 6px; border: 2px solid var(--amber); background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; font-weight: 900; } /* ═══════════════════════════════════ JUGAR AMB ALGÚ: LES DUES PECES Les dues peces van en PAPER damunt de la banda de lila: així els colors de temàtica del marcador i els botons de cert i fals es llegeixen exactament igual que a la resta del lloc, i la banda plena continua sent el fons. */ .pieces { align-items: stretch; } .piece { display: flex; flex-direction: column; padding: 24px; border: 2px solid var(--rule); border-radius: var(--r-card); background: var(--surface); color: var(--ink); } .band-lilac .piece .h3 { color: var(--ink); } .band-lilac .piece .copy { color: var(--body); } .band-lilac .piece .fig { color: var(--ink); } /* El marcador: dos noms genèrics, les temàtiques guanyades com a xips del color de la seva família i els tres encerts seguits com a tres punts. */ .board { margin-top: auto; padding-top: 24px; } .board-head, .duel-who { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .board-row { display: flex; align-items: stretch; gap: 16px; margin-top: 12px; } .board-side { flex: 1 1 0; min-width: 0; } .board-split { flex: none; width: 2px; border-radius: 1px; background: var(--hairline-warm); } .board-who { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; } .board-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .board-chips i { display: block; width: 26px; height: 26px; border-radius: var(--r-tile); } .chip-lilac { background: var(--lilac-fill); } .chip-teal { background: var(--teal-fill); } .chip-coral { background: var(--coral-fill); } .chip-amber { background: var(--amber); } .chip-ink { background: var(--ink); } .board-rule { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 900; color: var(--muted); } .pips { display: flex; gap: 5px; flex: none; } .pips i { display: block; width: 10px; height: 10px; border-radius: var(--r-round); background: var(--amber); } /* El duel: un telèfon EN HORITZONTAL partit per la meitat, com el de l'app. La meitat de dalt va girada, que és el que veu qui seu al davant. */ .duelbox { margin-top: auto; padding-top: 24px; } .duelbox-body { display: grid; grid-template-rows: 1fr 3px 1fr; aspect-ratio: 5 / 3; padding: 8px; border: 2px solid var(--device-edge); border-radius: var(--r-card); background: var(--device); } .duel-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: var(--surface); min-width: 0; } .duel-half:first-child { border-radius: 14px 14px 0 0; } .duel-half:last-child { border-radius: 0 0 14px 14px; } .duel-flip { transform: rotate(180deg); } .duelbox-line { background: var(--device); } .duel-btns { display: flex; gap: 8px; } .duel-btns .gest-btn { flex: none; padding: 6px 14px; font-size: 12px; } /* L'avís de seguretat amb l'escut: la frase que el brief demana que es vegi. */ .notice-icon { display: flex; align-items: flex-start; gap: 12px; } /* ⚠ El color va també a l'SVG: damunt de la banda de lila, `.band-lilac .fig` el pintaria de blanc i damunt de l'ambre fluix no es veuria. */ .notice-fig, .notice-fig .fig { flex: none; color: var(--amber-ink); } .fig-small { width: 24px; height: 24px; } /* ------------------------------------------------------ les temàtiques */ .themes { margin-top: 42px; padding-top: 34px; border-top: 2px dotted var(--rule); } .themes-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* Cada temàtica és una píndola amb la seva peça de plastilina a l'esquerra, dins d'un pou rodó vorejat del color de la família. */ .theme { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 2px solid var(--hairline-warm); border-radius: var(--r-round); font-size: 15px; font-weight: 800; background: var(--surface); transition: border-color 160ms var(--ease); } .theme:hover { border-color: currentColor; } .theme-art { width: 38px; } .theme-lilac { color: var(--lilac); } .theme-teal { color: var(--teal); } .theme-coral { color: var(--coral); } .theme-amber { color: var(--amber-ink); } .theme-ink { color: var(--ink); } /* --------------------------------------------------------- llistes */ .bullets { margin-top: 20px; display: grid; gap: 10px; } .bullet { position: relative; padding-left: 26px; color: var(--body); } .bullet::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); } .bullet-amber::before { background: var(--amber); } .band-lilac .bullet { color: var(--on-band-lilac); } .band-lilac .bullet::before { background: var(--on-band-lilac); } /* ------------------------------------------------- privadesa, en curt */ /* Tres coses, cadascuna amb el seu pictograma. No són targetes: són tres columnes separades per un filet, com la pantalla de privadesa de l'app. */ .privacy-grid { display: grid; gap: 26px; margin-top: 32px; } @media (min-width: 720px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); gap: 0; } } .privacy-item { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 720px) { .privacy-item { padding-inline: 26px; border-left: 2px solid var(--hairline); } .privacy-item:first-child { padding-left: 0; border-left: 0; } .privacy-item:last-child { padding-right: 0; } } .privacy-fig { display: inline-flex; padding: 12px; border: 2px solid var(--amber); border-radius: var(--r-chip); color: var(--amber-ink); align-self: flex-start; } .privacy-fig .fig { width: 28px; height: 28px; color: inherit; } .privacy-item .copy { margin-top: 0; font-size: 16px; } /* ---------------------------------------------------------- els plans */ .plans { align-items: stretch; } .plan { position: relative; padding: 26px; border: 2px solid var(--hairline-warm); border-radius: var(--r-card); background: var(--surface); } .plan-premium { border-color: var(--rule); } .plan-premium .h3 { color: var(--amber-ink); padding-right: 76px; } /* La peça de Premium surt per la cantonada de la targeta, mig a dins i mig a fora: és la corona damunt de la baralla, no una icona en un buit. */ .plan-art { position: absolute; top: -18px; right: -12px; width: 82px; } @media (min-width: 420px) { .plan-art { width: 96px; } } @media (min-width: 420px) { .plan-premium .h3 { padding-right: 88px; } } /* ------------------------------------------------------- les preguntes */ .qas { margin-top: 30px; border-top: 2px solid var(--hairline); } .qa { border-bottom: 2px solid var(--hairline); } .qa-q { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; } .qa-q::-webkit-details-marker { display: none; } .qa-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--hairline-warm); border-radius: var(--r-round); font-size: 19px; font-weight: 900; color: var(--amber-ink); transition: border-color 160ms var(--ease); } .qa-q:hover::after { border-color: var(--amber); } .qa[open] .qa-q::after { content: "−"; border-color: var(--amber); } .qa .copy { margin-top: 0; padding-bottom: 20px; } /* ═════════════════════════════ EL SUPORT I EL SEU FORMULARI L'únic formulari del lloc. L'entrega Netlify Forms des del HTML publicat i no hi ha ni una línia de JavaScript: en enviar-lo, el navegador se'n va a la pàgina de gràcies de la llengua. ⚠ CAP `placeholder`: les etiquetes són visibles i es queden. Un text gris dins d'un camp desapareix en escriure-hi i mai no arriba a 4,5:1. */ .support { display: grid; gap: clamp(28px, 4vw, 46px); align-items: start; } @media (min-width: 860px) { .support { grid-template-columns: 0.92fr 1.08fr; } } .support-text .copy + .copy { margin-top: 14px; } .plain { font-weight: 900; text-underline-offset: 3px; } .form { padding: clamp(20px, 3vw, 28px); border: 2px solid var(--rule); border-radius: var(--r-sheet); background: var(--surface); } .prose + .band .form, .shell.narrow > .form { margin-top: 26px; } .field { display: grid; gap: 8px; margin-top: 18px; } .field:first-of-type { margin-top: 0; } .field label { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; } .field input, .field textarea { width: 100%; min-width: 0; padding: 12px 14px; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); background: var(--paper); border: 2px solid var(--hairline-warm); border-radius: var(--r-chip); transition: border-color 160ms var(--ease); } .field textarea { resize: vertical; line-height: 1.45; } .field input:hover, .field textarea:hover { border-color: var(--rule); } .form-send { margin-top: 24px; } .form-note { margin-top: 18px; } /* El camp trampa del honeypot: fora de la vista, fora del tabulador i fora de l'arbre d'accessibilitat. Qui l'omple és un robot. */ .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .thanks-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .thanks-links .button-line { margin-top: 0; } /* ═════════════════════════════════════ LES MAQUETES DE TELÈFON (CSS pur) Les captures no van mai pelades: cada una dins d'un marc d'iPhone. El cos és de tinta, la vora és fina, la Dynamic Island és una píndola fosca a dalt i la captura queda retallada amb el radi de dins. CAP ombra. Les mides van en `cqi` —l'amplada del marc— perquè el radi sigui rodó tant si el telèfon fa 300 px com si en fa 150. El `border-radius` en píxels que hi ha a sobre és el pla B dels navegadors que no entenen les consultes de contenidor. */ .phone { container-type: inline-size; width: 100%; } .phone-body { position: relative; background: var(--device); border: 2px solid var(--device-edge); border-radius: 36px; border-radius: 13cqi; padding: 7px; padding: 2.6cqi; } .phone-screen { position: relative; overflow: hidden; background: var(--surface); border-radius: 29px; border-radius: 10.4cqi; } .phone-screen img { width: 100%; height: auto; } .phone-island { position: absolute; z-index: 2; left: 50%; top: 13px; top: 4.9cqi; width: 72px; width: 26cqi; height: 21px; height: 7.6cqi; transform: translateX(-50%); border-radius: var(--r-round); background: var(--device); } .shot { flex: 0 1 auto; } .shot-cap { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--muted); } .shot-note { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--muted); max-width: 62ch; } .band-ink .shot-note { color: var(--on-ink-soft); } /* Les composicions: el gran, el petit girat i els dos bessons, un a cada costat de «dos modes» (la mida la mana allà `.mode .shot`; aquí hi queda el gir, que és el que els fa germans). ⚠ Cap d'elles pot créixer (`flex-grow: 0`): un telèfon estirat a mitja pantalla deixa de semblar un telèfon. */ .shot-lead { flex: 0 1 268px; width: min(100%, 268px); } .shot-aside { flex: 0 1 150px; width: min(42%, 150px); transform: rotate(4.5deg); margin-top: 34px; } .shot-twin-a { transform: rotate(-2.4deg); } .shot-twin-b { transform: rotate(2.4deg); } .phones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(16px, 3vw, 34px); margin-top: 34px; } /* Els telèfons que surten mig del bloc de color: la banda els talla per sota. */ .phones-bleed { justify-content: center; align-items: flex-start; margin-bottom: calc(var(--pad) * -0.75); } /* --------------------------------------- /match, /challenge i el 404 El bloc de la invitació surt del HTML estàtic AMAGAT (`data-invite hidden`) i l'omple la funció de vora amb els valors de la consulta. Sense ella, la pàgina es veu igual de bé: el bloc no es pinta i no hi ha cap `{{…}}` a la vista. ⚠ `[hidden]` ha d'anar amb `!important` perquè els `display` d'aquest full no el tapin. */ [hidden] { display: none !important; } .invite-page { max-width: 62ch; } .invite { margin-top: 30px; padding: 26px; border: 2px solid var(--rule); border-radius: var(--r-card); background: var(--surface); } .invite-code { margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: clamp(30px, 6vw, 42px); font-weight: 700; letter-spacing: 0.08em; word-break: break-all; } .invite-who { font-size: 15px; font-weight: 800; color: var(--muted); margin-bottom: 14px; } .invite-rounds { margin-top: 10px; font-size: 15px; font-weight: 800; color: var(--muted); } .invite .cta-row { margin-top: 22px; } .button-big { min-height: 54px; padding: 14px 26px; font-size: 17px; } .h2-quiet { margin-top: 44px; font-size: clamp(22px, 3vw, 26px); } .shared { display: grid; gap: 34px; } .shared-art { width: 128px; margin-inline: auto; } @media (min-width: 560px) { .shared-art { width: 156px; } } .shared-block { padding-bottom: 34px; border-bottom: 2px solid var(--hairline); text-align: center; } .shared-block:last-child { padding-bottom: 0; border-bottom: 0; } .shared-block .lead { margin-inline: auto; } /* -------------------------------------------------- els documents legals */ .prose { max-width: 74ch; } .prose h2 { font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -0.03em; margin-top: 38px; } .prose h3 { font-size: 19px; font-weight: 900; margin-top: 26px; } .prose p { color: var(--body); margin-top: 14px; } .prose ul, .prose ol { margin-top: 14px; display: grid; gap: 8px; padding-left: 22px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { color: var(--body); } .prose li::marker { color: var(--amber-ink); } .prose a { font-weight: 900; text-underline-offset: 3px; } .prose code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; } .table-scroll { overflow-x: auto; margin-top: 20px; border: 2px solid var(--hairline-warm); border-radius: var(--r-chip); } .prose table { border-collapse: collapse; width: 100%; font-size: 15px; } .prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--hairline); vertical-align: top; } .prose th { font-weight: 900; } .prose td { color: var(--body); } .prose tr:last-child td { border-bottom: 0; } /* ------------------------------------------------------------- el peu ⚠ Les dades del RESPONSABLE ja no són al peu: viuen a l'apartat de responsable de cadascun dels quinze documents legals i de suport, que és on la llei demana que es puguin trobar i on no es repeteixen divuit vegades. Al peu hi queda el correu de contacte i prou. */ .foot { border-top: 2px solid var(--rule); padding: var(--pad) 0 34px; background: var(--sand); } .foot-grid { display: grid; gap: 32px; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } } .foot-tagline { margin-top: 14px; font-size: 15px; font-weight: 800; color: var(--muted); max-width: 26ch; } .foot-head { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .foot-links { margin-top: 14px; display: grid; gap: 10px; font-weight: 800; } .foot-links a { text-decoration: none; } .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; } .foot-contact { margin-top: 14px; font-weight: 800; } .foot-contact a { text-underline-offset: 3px; } .foot-legal { margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--hairline-warm); } .foot-legal .fine { margin-top: 0; } /* Amb el moviment reduït, la baralla es queda quieta a la primera carta: el `opacity` de base ja ho deixa així, perquè l'animació és l'única cosa que ensenya les altres tres. Els telèfons girats no es mouen: un gir fix no és moviment. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }