/* La lectura essencial de les investigacions. Dos nivells per a la mateixa història: «A fons», que és la recerca de sempre i el que surt per omissió, i «Essencial», el resum de cada capítol en poques paraules. Qui mana és html[data-nivell="essencial"], que el posa un script al abans de pintar, com el tema. Sense l'atribut, la pàgina és la de sempre. Només el carreguen les investigacions que tenen resum (eines/essencial/.py). */ :root{ --nivell-via:light-dark(#EDECE6, #1C1C1E); --nivell-pom:light-dark(#FFFFFF, #3A3A3C); } /* El que només és d'un dels dos nivells. */ :root:not([data-nivell="essencial"]) [data-nomes="essencial"], [data-nivell="essencial"] [data-nomes="fons"]{display:none !important} /* ---------- El commutador ---------- Dos botons de ràdio dins d'una via, i una peça blanca que llisca fins al triat. La peça la mou l'atribut de l'arrel i no el :checked, perquè així ja surt al seu lloc abans que arribi cap script. */ .nivell{ position:relative;display:inline-grid;grid-template-columns:1fr 1fr; padding:3px;border-radius:999px;background:var(--nivell-via); font-family:var(--sans); } .nivell-pom{ position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px); border-radius:999px;background:var(--nivell-pom); box-shadow:0 3px 8px light-dark(rgba(29,29,27,.12), rgba(0,0,0,.5)), 0 3px 1px light-dark(rgba(29,29,27,.04), rgba(0,0,0,.3)), 0 0 0 .5px light-dark(rgba(29,29,27,.06), rgba(255,255,255,.06)); transform:translateX(100%); } [data-nivell="essencial"] .nivell-pom{transform:none} /* Només llisca quan algú el toca: en carregar ja ha de ser al seu lloc. */ .nivell-mou .nivell-pom{transition:transform .34s cubic-bezier(.3,.8,.2,1)} .nivell label{ position:relative;display:flex;align-items:baseline;justify-content:center;gap:7px; min-height:40px;padding:10px 20px;border-radius:999px; font-size:.875rem;font-weight:500;line-height:1.4;white-space:nowrap; color:var(--ink-2);cursor:pointer;transition:color .2s ease; } .nivell label:hover{color:var(--ink)} [data-nivell="essencial"] .nivell label:first-of-type, :root:not([data-nivell="essencial"]) .nivell label:last-of-type{color:var(--ink)} .nivell small{font-size:.75rem;font-weight:400;color:var(--ink-3);font-variant-numeric:lining-nums tabular-nums} .nivell input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .nivell label:has(input:focus-visible){outline:2px solid var(--foix);outline-offset:2px} @media (max-width:380px){ .nivell label{padding-inline:13px;gap:5px} } @media (prefers-reduced-motion:reduce){ .nivell-mou .nivell-pom{transition:none} } /* A la capçalera de l'article: entre l'entrada i les dades. */ .nivell-tria{display:flex;justify-content:center;margin:-4px 0 26px} /* Al rail de l'índex, per canviar a mitja lectura. */ .toc .nivell{display:grid;width:100%;margin-bottom:30px} .toc .nivell label{min-height:30px;padding:6px 10px;font-size:.75rem} /* ---------- En trenta segons ---------- Els anys que cal saber, abans del primer capítol. Cada fila porta al seu. */ .en-breu{ width:min(var(--mesura), calc(100% - 2 * var(--gut))); margin:0 auto;font-family:var(--sans); } /* En essencial la llista forma part de la portada: va just a sota. */ [data-nivell="essencial"] .art[data-essencial] .art-cap{margin-bottom:clamp(28px,4vw,48px)} .en-breu-titol{margin:0 0 10px;font-size:.8125rem;font-weight:500;letter-spacing:0;color:var(--ink-3)} .en-breu ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)} .en-breu li{border-bottom:1px solid var(--rule)} .en-breu a{ display:grid;grid-template-columns:4.25em 1fr auto;align-items:baseline;gap:16px; padding:15px 2px;color:var(--ink-2);font-size:1rem;line-height:1.45;text-decoration:none; transition:color .18s ease; } .en-breu a::after{content:"↓";color:var(--ink-3);transition:transform .2s ease} .en-breu a:hover{color:var(--ink)} .en-breu a:hover::after{transform:translateY(2px)} .en-breu a:focus-visible{outline:2px solid var(--foix);outline-offset:2px;border-radius:4px} .en-breu-any{ font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--ink); font-variant-numeric:lining-nums tabular-nums; } /* ---------- Un capítol, en essencial ---------- */ [data-nivell="essencial"] .art[data-essencial] .acte{padding-top:clamp(56px,7vw,96px)} /* El primer ve després de la llista de trenta segons, que ja fa de tall. :first-of-type i no :first-child, perquè interficie.js hi posa davant l'índex del mòbil. */ [data-nivell="essencial"] .art[data-essencial] .acte:first-of-type{padding-top:clamp(40px,5vw,60px)} .acte-breu{font-size:clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);line-height:1.68} .acte-breu p{margin:0 0 1em} .acte-breu .fig{margin:30px 0 4px} /* Els fulls i els retrats, més petits que al text sencer: en un resum, una imatge alta ocuparia tota la pantalla. Les mides de .fig-retrat i .fig-detall són aquí i no només a santuari.css, que és del santuari. */ .acte-breu :is(.fig-full,.fig-retrat){max-width:360px;margin-inline:0} .acte-breu .fig-detall{max-width:560px;margin-inline:0} .acte-breu :is(.fig-retrat,.fig-detall) img{border-radius:8px;filter:var(--foto-atenua)} /* Llegenda, sense confirmar: el resum no pot esborrar la diferència. */ .acte-etiqueta{ display:inline-block;margin-left:10px;padding:1px 9px 2px; border:1px solid var(--rule-2);border-radius:999px; font-size:.6875rem;letter-spacing:.01em;text-transform:none;line-height:1.5; color:var(--ink-2);vertical-align:1px; } .acte-obre{ display:inline-flex;align-items:center;gap:10px;margin:22px 0 0; min-height:44px;padding:10px 16px 10px 20px; border:1px solid var(--rule-2);border-radius:999px;background:none; font:500 .875rem/1.3 var(--sans);color:var(--ink);cursor:pointer; transition:background-color .2s ease,border-color .2s ease; } .acte-obre:hover{background:var(--paper-2);border-color:var(--ink-3)} .acte-obre:focus-visible{outline:2px solid var(--foix);outline-offset:3px} .acte-obre small{margin-left:4px;font-size:.8125rem;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums} .acte-obre svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease} .acte-obre[aria-expanded="true"] svg{transform:rotate(180deg)} .acte-obre[aria-expanded="true"] .acte-obre-mes, .acte-obre[aria-expanded="false"] .acte-obre-menys{display:none} /* El text sencer no porta cap marca ni cap embolcall, perquè els estils de la investigació van per fill directe. En essencial s'amaga el text fins que el lector obre el capítol, però no les imatges: totes les figures, galeries i plànols del capítol es queden sota el resum, perquè són antigues i són el que la gent mira. Dels blocs que barregen text i imatges (dos nivells avall) només queden les imatges, i els botons d'etapa de la galeria de la restauració, que la fan servir. Les figures d'una font citada (.cita-full) no compten: són del panell de la font. Al tancament es queden la crida a col·laborar i el crèdit. */ [data-nivell="essencial"] .art[data-essencial] .acte:not(.acte-tanca, [data-obert]) > :not(.acte-any, h2, [data-nomes="essencial"], figure, :has(figure:not(.cita-full))), [data-nivell="essencial"] .art[data-essencial] .acte:not(.acte-tanca, [data-obert]) > :not(figure, [data-nomes]):has(figure:not(.cita-full)) > :not(figure, summary, .santuari-etapes, :has(figure:not(.cita-full))), [data-nivell="essencial"] .art[data-essencial] .acte:not(.acte-tanca, [data-obert]) > :not(figure, [data-nomes]):has(figure:not(.cita-full)) > :not(figure):has(figure:not(.cita-full)) > :not(figure, summary, .santuari-etapes, :has(figure:not(.cita-full))), [data-nivell="essencial"] .art[data-essencial] .acte-tanca > :not([data-nomes="essencial"], .colabora, .fitxa-credit){display:none} [data-nivell="essencial"] .acte[data-obert] > .acte-obre + *{ margin-top:36px;padding-top:36px;border-top:1px solid var(--rule); } [data-nivell="essencial"] .acte[data-obert] > :not(.acte-any, h2, [data-nomes="essencial"], figure, :has(figure:not(.cita-full))){ animation:acte-obre .45s cubic-bezier(.2,.8,.2,1) both; } @keyframes acte-obre{from{opacity:0;transform:translateY(10px)}} /* L'àudio és el de l'article sencer: en essencial no hi pinta res, i compartir es queda a la dreta, on era. */ [data-nivell="essencial"] .art[data-essencial] .escolta{display:none} [data-nivell="essencial"] .art[data-essencial] .art-barra{justify-content:flex-end} .nivell-final{margin:48px 0 8px;padding-top:28px;border-top:1px solid var(--rule);font-family:var(--sans)} .nivell-final p{margin:0 0 18px;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)} .nivell-final b{color:var(--ink);font-weight:600} .nivell-final button{ min-height:44px;padding:11px 22px;border:0;border-radius:999px; background:var(--ink);color:var(--paper);font:500 .875rem/1.3 var(--sans);cursor:pointer; transition:background-color .2s ease; } .nivell-final button:hover{background:var(--foix)} .nivell-final button:focus-visible{outline:2px solid var(--foix);outline-offset:3px} @media (prefers-reduced-motion:reduce){ [data-nivell="essencial"] .acte[data-obert] > *{animation:none} .acte-obre svg,.en-breu a::after{transition:none} }