/* --------------------------------------------------------------------------- sortidescarretera.com — full d'estil únic Cap dependència externa: cap CDN, cap font remota, cap icona remota. Tot el que carrega el navegador surt d'aquesta màquina, i per això la pàgina de privacitat pot dir que no hi ha cap tractament de dades sense fer trampa. Open Sans s'ha de servir en local: els .woff2 van a /vendor/fonts/ . Vegeu LLEGEIX-ME.md. Mentre no hi siguin, la pila de recanvi manté la pàgina llegible. ESTRUCTURA .lateral marca + idiomes + menú. Pantalla gran: columna fixa de 17rem a l'esquerra. Mòbil: calaix que llisca des de l'esquerra i tapa el contingut, amb una ✕ per tancar-lo. main el contingut, amb la navegació de llibre al final del text. Sense JavaScript el calaix no es mou: el menú es queda visible i el web segueix sent navegable. El transport del calaix només s'activa quan el script marca . --------------------------------------------------------------------------- */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: local("Open Sans"), url("/vendor/fonts/open-sans-400.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: local("Open Sans SemiBold"), url("/vendor/fonts/open-sans-600.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: local("Open Sans Italic"), url("/vendor/fonts/open-sans-400-italic.woff2") format("woff2"); } :root { --lletra: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --tinta: #22262b; --tinta-suau: #5d646d; --paper: #ffffff; --paper-ombra: #f5f6f7; --linia: #dfe2e6; --accent: #14558c; --accent-fons: #eaf1f8; --ample-lateral: 17rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--paper); color: var(--tinta); font-family: var(--lletra); font-size: 1.0625rem; /* 17px de base: al grup hi ha gent gran */ line-height: 1.65; } /* --- accessibilitat ------------------------------------------------------ */ .salta { position: absolute; left: -9999px; } .salta:focus { left: 0; top: 0; z-index: 300; padding: .6rem 1rem; background: var(--tinta); color: #fff; } .nomes-lectors { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- el calaix ----------------------------------------------------------- */ .lateral { position: fixed; top: 0; left: 0; z-index: 100; width: var(--ample-lateral); height: 100vh; overflow-y: auto; background: var(--paper); border-right: 1px solid var(--linia); box-shadow: 3px 0 10px rgba(0, 0, 0, .08); transition: transform .35s ease; } /* En tornar d'un canvi d'idioma el calaix ja ha d'estar obert: no s'ha de veure lliscar, perquè no és un gest de l'usuari sinó continuar on era. */ .lateral.sense-transicio { transition: none; } .capcalera { position: relative; padding: 1.1rem 1.2rem 1rem; background: var(--paper-ombra); border-bottom: 1px solid var(--linia); } .marca { display: block; text-decoration: none; color: inherit; } .marca strong { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.25; } .lema { display: block; margin-top: .15rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suau); } .idiomes { margin: .7rem 0 0; font-size: .88rem; color: var(--tinta-suau); } .idiomes a { color: var(--accent); } /* --- botons del calaix: només existeixen al mòbil i amb JS -------------- */ .obre-menu, .tanca-menu { display: none; } .obre-menu { align-items: center; gap: .55rem; margin: 0 0 1.4rem; padding: .5rem 1.15rem; border: 1px solid var(--linia); border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .09); font: inherit; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suau); cursor: pointer; } .barres, .barres::before, .barres::after { display: block; width: 1.1rem; height: 2px; background: var(--tinta-suau); content: ""; } .barres { position: relative; } .barres::before { position: absolute; top: -5px; } .barres::after { position: absolute; top: 5px; } .tanca-menu { position: absolute; top: .3rem; right: .4rem; z-index: 2; width: 2.4rem; height: 2.4rem; border: 0; background: none; color: var(--accent); font-size: 1.7rem; line-height: 1; cursor: pointer; } /* vel fosc darrere del calaix obert, per centrar l'atenció i per poder tancar-lo tocant fora */ .vel { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .35); } .vel[hidden] { display: none; } /* --- menú ---------------------------------------------------------------- */ .menu ul { list-style: none; margin: 0; padding: 0; } .menu li { position: relative; border-top: 1px solid var(--paper-ombra); } .menu > ul > li:first-child { border-top: 0; } .menu a { display: block; padding: .62rem 3rem .62rem 1.2rem; text-decoration: none; color: var(--tinta); } .menu a:hover { background: var(--paper-ombra); } .menu a.actiu { font-weight: 600; color: var(--accent); background: var(--accent-fons); box-shadow: inset 3px 0 0 var(--accent); } .menu a.en-cami { font-weight: 600; } /* Segon i tercer nivell: cada esglaó sagna més i pesa una mica menys, i el fil vertical de l'esquerra deixa veure d'un cop d'ull on acaba la branca. */ .menu .nivell-1 > li, .menu .nivell-2 > li { border-top: 0; } .menu .nivell-1 { border-left: 1px solid var(--linia); margin-left: 1.2rem; } .menu .nivell-1 a { padding: .48rem 3rem .48rem 1rem; font-size: .95rem; color: var(--tinta-suau); } .menu .nivell-2 { border-left: 1px solid var(--linia); margin-left: 1rem; } .menu .nivell-2 a { padding: .42rem 3rem .42rem 1rem; font-size: .89rem; } .menu .nivell-1 a.actiu, .menu .nivell-2 a.actiu { color: var(--accent); } /* plegar i desplegar branques: el JS li treu l'atribut hidden al botó */ .plega { position: absolute; top: 0; right: 0; width: 3rem; height: 2.7rem; border: 0; background: none; cursor: pointer; } .ganxo { display: block; width: .5rem; height: .5rem; margin: 0 auto; border-right: 2px solid var(--tinta-suau); border-bottom: 2px solid var(--tinta-suau); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; } .amb-fills.obert > .plega .ganxo { transform: rotate(225deg) translate(-2px, -2px); } .subnivell { overflow: hidden; } .subnivell[data-plegat] { display: none; } /* --- contingut ----------------------------------------------------------- */ main { margin-left: var(--ample-lateral); max-width: 42rem; padding: 1.6rem 2rem 4rem; } .fil { margin: 0 0 .35rem; font-size: .8rem; color: var(--tinta-suau); } h1 { margin: 0 0 1.2rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25; } h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 .6rem; } h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 .4rem; } p, ul, ol { margin: 0 0 1rem; } main ul, main ol { padding-left: 1.3rem; } main li { margin-bottom: .3rem; } a { color: var(--accent); } blockquote { margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--linia); color: var(--tinta-suau); } table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; } th, td { border: 1px solid var(--linia); padding: .5rem .6rem; text-align: left; } th { background: var(--paper-ombra); font-weight: 600; } .pendent { border-left: 3px solid var(--linia); padding: .2rem 0 .2rem 1rem; color: var(--tinta-suau); font-size: .96rem; } .pendent strong { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; } /* --- navegació de llibre, al final del text ------------------------------ */ .nav-llibre { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linia); font-size: .98rem; } .nav-llibre a { text-decoration: none; } .nav-llibre a:hover { text-decoration: underline; } .separador { margin: 0 .7rem; color: var(--linia); } .fletxa { color: var(--accent); } /* --- mòbil: el calaix es retira i apareixen els botons ------------------- */ @media (max-width: 47.99rem) { main { margin-left: 0; max-width: none; padding: 1.2rem 1.2rem 3rem; } .js .lateral { transform: translateX(-100%); } .js .lateral.obert { transform: translateX(0); } .js .obre-menu { display: inline-flex; } .js .menu-obert .obre-menu { visibility: hidden; } .js .tanca-menu { display: block; } } /* Sense JavaScript al mòbil no hi ha calaix: el menú es veu tal qual, a dalt de tot, i el contingut a sota. */ @media (max-width: 47.99rem) { html:not(.js) .lateral { position: static; width: auto; height: auto; box-shadow: none; } } /* --- impressió ----------------------------------------------------------- */ @media print { .lateral, .nav-llibre, .vel, .obre-menu { display: none; } main { margin: 0; max-width: none; padding: 0; } body { font-size: 11pt; } }