/* ============================================================ public.css — Canvi 358: la web pública v3 (Producte · Casos d'ús · Preus). Només el que la v3 afegeix a estil.css: el menú amb desplegables (només CSS), el submenú de pestanyes, les quatre vigilàncies, el fil dels cinc passos (els números 04 i 05 ja no són negres), les peces del portal que il·lustren Producte, les targetes de plans i la comparativa de Preus, la taula de la feina humana i les preguntes freqüents. Tot amb les variables de color d'estil.css (tema clar i fosc). Recordatori: en tocar aquest fitxer, pujar el ?v= de base.html. ============================================================ */ /* ---- Menú: desplegables sense JavaScript ---- */ .nav-grup { position: relative; display: flex; align-items: center; } .nav-grup .nav-enllac { display: inline-flex; align-items: center; gap: 6px; } .nav-fletxa { transition: transform .15s; } .nav-grup:hover .nav-fletxa, .nav-grup:focus-within .nav-fletxa { transform: rotate(180deg); } .nav-desplegable { display: none; position: absolute; top: calc(100% + 10px); left: -14px; z-index: 120; min-width: 300px; padding: 8px; border-radius: 14px; background: var(--fons-targeta); border: 1px solid var(--vora); box-shadow: 0 18px 48px rgba(13,27,46,.14); } .nav-desplegable::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-grup:hover .nav-desplegable, .nav-grup:focus-within .nav-desplegable { display: block; } .navegacio .nav-desplegable a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text-fort); } .navegacio .nav-desplegable a:hover { background: var(--fons-alt); } .navegacio .nav-desplegable a::after { display: none; } @media (max-width: 760px) { .nav-desplegable { display: none !important; } .nav-fletxa { display: none; } } /* ---- Submenú de pestanyes (Producte · …, Casos d'ús · …) ---- */ .submenu { background: var(--fons-alt); border-bottom: 1px solid var(--vora); } .submenu .contenidor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; } .submenu .submenu-etq { color: var(--text-mut); margin-right: 8px; } .submenu a { padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; color: var(--text-suau); text-decoration: none; border: 1px solid transparent; } .submenu a:hover { color: var(--text-fort); } .submenu a.actiu { background: var(--fons-targeta); color: var(--cta); border-color: var(--vora-fosca); } /* ---- Les quatre vigilàncies ---- */ .vig-graella { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .vig-targeta { display: flex; flex-direction: column; gap: 12px; } .vig-targeta .vig-barra { height: 4px; border-radius: 6px 6px 0 0; margin: -26px -26px 14px; } .vig-targeta .vig-icona { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .vig-targeta h3 { margin: 0; font-size: 1.15rem; } .vig-targeta p { font-size: 0.92rem; margin: 0; } .vig-targeta p strong { color: var(--text-fort); } .c-fil { color: var(--rosa); } .f-fil { background: var(--rosa); } .ff-fil { background: rgba(232,76,138,.12); } .c-dom { color: var(--blau); } .f-dom { background: var(--blau); } .ff-dom { background: rgba(22,104,176,.12); } .c-cor { color: var(--cian); } .f-cor { background: var(--cian); } .ff-cor { background: rgba(25,176,196,.14); } .c-web { color: #B07B00; } .f-web { background: var(--groc); } .ff-web { background: rgba(245,197,24,.18); } [data-tema="fosc"] .c-web { color: var(--groc); } .vig-compacta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .vig-compacta .targeta { padding: 20px; } .vig-compacta h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 6px; } .vig-compacta p { font-size: 0.88rem; margin: 0; } .punt-vig { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } .enllac-centrat { text-align: center; margin-top: 28px; } .enllac-centrat a { font-weight: 700; color: var(--cta); text-decoration: none; } .enllac-centrat a:hover { color: var(--rosa); } /* ---- Casos d'ús (portada) i targetes-enllaç ---- */ .graella-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } a.targeta-cas { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); } a.targeta-cas .vig-barra { height: 4px; border-radius: 6px 6px 0 0; margin: -26px -26px 14px; } a.targeta-cas h3 { margin: 0; color: var(--text-fort); } a.targeta-cas p { font-size: 0.92rem; margin: 0; } a.targeta-cas .cas-cta { margin-top: auto; font-weight: 700; color: var(--cta); } a.targeta-cas:hover { transform: translateY(-3px); border-color: var(--cian); } /* ---- Com treballem: el fil de colors i els cinc números ---- */ .passos-fil { position: relative; } .passos-fil::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--rosa) 0%, var(--cian) 25%, var(--groc) 50%, var(--blau) 75%, var(--blau-fosc) 100%); } .passos-fil .pas { background: transparent; border: 0; padding: 0; box-shadow: none; } .passos-fil .pas::before { display: none; } .passos-fil .pas .pas-num { position: relative; display: inline-block; background: var(--fons-alt); padding: 0 8px; margin-bottom: 14px; } .seccio:not(.seccio-alterna) .passos-fil .pas .pas-num { background: var(--fons); } .passos-fil .pas .pas-cos { background: var(--fons-targeta); border: 1px solid var(--vora); border-radius: 16px; padding: 22px; } .passos-fil .pas:nth-child(1) .pas-num { color: var(--rosa); } .passos-fil .pas:nth-child(2) .pas-num { color: var(--cian); } .passos-fil .pas:nth-child(3) .pas-num { color: #B07B00; } [data-tema="fosc"] .passos-fil .pas:nth-child(3) .pas-num { color: var(--groc); } .passos-fil .pas:nth-child(4) .pas-num { color: var(--blau); } .passos-fil .pas:nth-child(5) .pas-num { color: var(--blau-fosc); } [data-tema="fosc"] .passos-fil .pas:nth-child(5) .pas-num { color: #7FB3E6; } @media (max-width: 1100px) { .passos-fil::before { display: none; } } /* a tauleta .passos-5 ja va a dues files: el fil no té sentit */ /* ---- Peces del portal (il·lustracions a Producte) ---- */ .vig-fila { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } .vig-fila.invertida .peca, .vig-fila.invertida .vig-video { order: -1; } /* Canvi 375: el vídeo també alterna de costat */ .vig-fila h2 { font-size: 1.9rem; line-height: 1.15; margin: 10px 0 6px; } .vig-fila .vig-k { display: flex; align-items: center; gap: 8px; } .vig-fila p { margin: 0 0 10px; } .vig-fila p strong { color: var(--text-fort); } .peca { background: var(--fons-targeta); border: 1px solid var(--vora-fosca); border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px rgba(13,27,46,.08); font-size: 0.86rem; } .peca-cap { display: flex; align-items: center; gap: 8px; color: var(--text-mut); font-size: 0.72rem; margin-bottom: 12px; } .peca-cap .dreta { margin-left: auto; } .peca-titol { font-weight: 800; color: var(--text-fort); font-size: 0.98rem; } .peca-fila { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vora); } .peca-fila:first-of-type { border-top: 0; } .peca-fila small { color: var(--text-mut); display: block; } .peca-fila strong { color: var(--text-fort); } .peca-botons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } .peca-boto { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--vora-fosca); color: var(--cta); } .peca-boto.ple { background: var(--cta); color: var(--cta-text); border-color: var(--cta); } .peca-verd { border: 1px solid rgba(47,158,107,.35); background: rgba(47,158,107,.08); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; } .peca-estat { font-weight: 700; align-self: center; white-space: nowrap; } .e-be { color: var(--verd); } .e-mig { color: #B07B00; } [data-tema="fosc"] .e-mig { color: var(--groc); } .peca-pas { margin-top: 12px; border: 1px solid var(--vora); border-radius: 10px; padding: 12px; } .peca-codi { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; background: var(--fons-alt); border-radius: 6px; padding: 8px; margin-top: 6px; } .pill { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--vora-fosca); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .pill-rosa { color: var(--rosa); border-color: var(--rosa); } .pill-ple { background: var(--rosa); color: #fff; border-color: var(--rosa); } .pill-groc { color: #B07B00; border-color: var(--groc); } [data-tema="fosc"] .pill-groc { color: var(--groc); } @media (max-width: 860px) { .vig-fila { grid-template-columns: 1fr; } .vig-fila.invertida .peca, .vig-fila.invertida .vig-video { order: 0; } } /* ---- Els plans (portada i Preus) ---- */ .plans-graella { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .pla-targeta { display: flex; flex-direction: column; gap: 14px; position: relative; overflow: visible; } /* el badge «El més triat» surt per dalt */ .pla-targeta h3 { margin: 0; font-size: 1.25rem; } .pla-targeta .pla-sub { margin: 0; font-size: 0.92rem; } .pla-preu { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pla-preu .gran { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-fort); } .pla-preu .gran.rosa { color: var(--rosa); } .pla-preu .tatxat { color: var(--text-mut); text-decoration: line-through; } .pla-preu .unitat { color: var(--text-suau); font-size: 0.9rem; } .pla-nota { font-size: 0.78rem; color: var(--text-mut); margin: -6px 0 0; } .pla-targeta .boto-cta, .pla-targeta .boto-secundari { justify-content: center; } .pla-targeta .pla-botons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .pla-targeta .pla-botons a { flex: 1 1 auto; } .pla-destacada { border: 2px solid var(--rosa); box-shadow: 0 16px 48px rgba(232,76,138,.12); } .pla-badge { position: absolute; top: -13px; left: 26px; } .pla-fosca { background: var(--text); color: #fff; border-color: var(--text); } [data-tema="fosc"] .pla-fosca { background: #0E3A6B; border-color: #0E3A6B; } .pla-fosca h3, .pla-fosca .pla-preu .gran { color: #fff; } .pla-fosca .pla-sub, .pla-fosca .pla-nota, .pla-fosca .pla-preu .unitat { color: rgba(255,255,255,.75); } .pla-fosca .pla-llista li { color: #fff; } .pla-fosca .boto-secundari { background: #fff; color: #0E3A6B !important; border-color: #fff; } /* !important: estil.css posa color: var(--text-fort) !important, que en fosc és blanc */ .pla-llista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .pla-llista li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--text); line-height: 1.45; } .pla-llista li::before { content: "✓"; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; margin-top: 2px; background: rgba(47,158,107,.15); color: var(--verd); } .pla-destacada .pla-llista li::before { background: rgba(232,76,138,.15); color: var(--rosa); } .pla-fosca .pla-llista li::before { background: rgba(245,197,24,.2); color: var(--groc); } .pla-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; } @media (max-width: 860px) { .plans-graella, .vig-graella, .vig-compacta, .graella-4 { grid-template-columns: 1fr; } } /* ---- La comparativa de Preus ---- */ .taula-marc { background: var(--fons-targeta); border: 1px solid var(--vora); border-radius: 18px; padding: 8px 20px 20px; overflow-x: auto; } .comparativa { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; } .comparativa th { text-align: left; font-weight: 800; padding: 14px 12px; border-bottom: 2px solid var(--vora-fosca); color: var(--text-fort); } .comparativa th.c, .comparativa td.c { text-align: center; } .comparativa th.radar { color: var(--rosa); } .comparativa td { padding: 12px; border-bottom: 1px solid var(--vora); vertical-align: top; color: var(--text); } .comparativa tr.grup td { background: var(--fons-alt); font-weight: 800; color: var(--text-fort); } .comparativa td .ok { color: var(--verd); font-weight: 800; } .comparativa td .no { color: var(--text-mut); } .comparativa td small { display: block; color: var(--text-suau); } /* Al mòbil la primera columna queda fixa i la resta es desplaça. */ .comparativa th:first-child, .comparativa td:first-child { position: sticky; left: 0; background: var(--fons-targeta); z-index: 1; } .comparativa tr.grup td:first-child { background: var(--fons-alt); } @media (max-width: 640px) { .comparativa th:first-child { width: auto; min-width: 180px; } .taula-marc { padding-left: 0; padding-right: 0; } } /* ---- La feina humana ---- */ .feina-graella { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; } .feina-graella h2 { text-align: left; } .feina-taula { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .feina-taula td { padding: 12px; border-bottom: 1px solid var(--vora); vertical-align: top; } .feina-taula td.preu { text-align: right; white-space: nowrap; font-weight: 800; color: var(--text-fort); } .feina-taula strong { color: var(--text-fort); } .feina-taula small { display: block; color: var(--text-suau); } /* Canvi 403: la nota «+ IVA (… amb IVA)» sota el preu, sense negreta. */ .feina-taula td.preu small { font-weight: 500; font-size: 0.8rem; } .feina-nota { font-size: 0.78rem; color: var(--text-mut); padding: 10px 12px 0; margin: 0; } @media (max-width: 860px) { .feina-graella { grid-template-columns: 1fr; } } /* ---- Preguntes freqüents (details, sense JavaScript) ---- */ .faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq details { border: 1px solid var(--vora); border-radius: 12px; padding: 14px 18px; background: var(--fons-targeta); } .faq summary { font-weight: 700; cursor: pointer; color: var(--text-fort); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; color: var(--text-mut); } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 10px 0 0; font-size: 0.92rem; } /* ---- Casos d'ús ---- */ .setmana { display: flex; flex-direction: column; gap: 14px; } .setmana .dia { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; margin: 0; } .setmana .dia .punt-vig { margin-top: 7px; } .graella-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .graella-2.pla-dos { grid-template-columns: .8fr 1.2fr; align-items: stretch; } .graella-3-cas .targeta h3 { font-size: 1.05rem; } .targeta.suau { background: transparent; } @media (max-width: 860px) { .graella-2, .graella-2.pla-dos { grid-template-columns: 1fr; } } /* ---- Bandes de segon pla (Formació · IA privada) i el bàner «en construcció» ---- */ .banda-dues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .banda-dues .targeta { background: var(--fons-alt); border: 0; } .banda-dues .targeta .boto-secundari { align-self: flex-start; margin-top: 10px; } .banda-dues .targeta { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 860px) { .banda-dues { grid-template-columns: 1fr; } } .avis-construccio { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(245,197,24,.16); border: 1px solid rgba(245,197,24,.6); color: var(--text-fort); font-weight: 600; font-size: 0.9rem; } .linies { display: flex; flex-direction: column; gap: 12px; } .linies p { margin: 0; } .linies p strong { color: var(--text-fort); } .hero-dues { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } @media (max-width: 860px) { .hero-dues { grid-template-columns: 1fr; } } .hero .botons { display: flex; gap: 12px; flex-wrap: wrap; } .nota-petita { font-size: 0.82rem; color: var(--text-mut); margin: 8px 0 0; } .k-color { font-weight: 700; } /* Les etiquetes de secció en mono + color de vigilància: en majúscules, com .etiqueta-seccio. */ .mono.c-fil, .mono.c-dom, .mono.c-cor, .mono.c-web { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; } /* ---- La quarta etiqueta flotant del hero (Web) i el repartiment de les quatre ---- */ .hero-visual .b-rosa { top: 30px; left: -10px; } .hero-visual .b-cian { top: 42%; right: -20px; } .hero-visual .b-groc { bottom: 24px; right: 10px; left: auto; } .hero-visual .b-blau { bottom: 90px; left: -4px; color: var(--blau); animation-delay: -3s; } .hero-visual .b-blau .punt { background: var(--blau); } .targeta .vig-barra, .targeta.vig-targeta .vig-barra { margin: -32px -28px 16px; } a.targeta-cas .vig-barra { margin: -32px -28px 16px; } /* ============================================================ Canvi 359 — La web v3 en «tu»: els retalls de premsa («Ha passat de debò»), les peces noves del portal (l'informe del Guard, l'assistent intern, la sessió de formació), les sis peces de «què provem» i les tres targetes de l'oferta a Empreses. public.css?v=2. ============================================================ */ .retall { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--fons-targeta); border: 1px solid var(--vora); border-left: 4px solid var(--blau); border-radius: 16px; padding: 22px 24px 18px; overflow: hidden; } .retall-cometes { position: absolute; right: 14px; top: -26px; font-size: 130px; line-height: 1; font-weight: 800; color: var(--text); opacity: .06; font-family: Georgia, "Times New Roman", serif; pointer-events: none; user-select: none; } .retall.r-fil { border-left-color: var(--rosa); } .retall.r-dom { border-left-color: var(--blau); } .retall.r-cor { border-left-color: var(--cian); } .retall.r-web { border-left-color: var(--groc); } .retall.r-fosc { border-left-color: var(--blau-fosc); } .retall-font { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--text-mut); font-size: .72rem; } .retall.r-fil .retall-etq { color: var(--rosa); } .retall.r-dom .retall-etq { color: var(--blau); } .retall.r-cor .retall-etq { color: var(--cian); } .retall.r-web .retall-etq { color: #B07B00; } .retall.r-fosc .retall-etq { color: var(--blau-fosc); } [data-tema="fosc"] .retall.r-fosc .retall-etq { color: var(--cian); } .retall h3 { font-size: 1.05rem; line-height: 1.35; margin: 0; position: relative; } .retall p { margin: 0; font-size: .92rem; } .retall-enllac { color: var(--blau); font-size: .72rem; } .retall-enllac:hover { color: var(--rosa); } .retall-radar { border-top: 1px dashed var(--vora-fosca); padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .retall-radar .mono { font-size: .72rem; color: var(--text-suau); } .retall-radar p { font-size: .85rem; } .enllac-font { color: var(--blau); font-size: .72rem; white-space: nowrap; } .enllac-font:hover { color: var(--rosa); } /* Tema fosc: el blau (#1668B0) sobre la targeta fosca no arriba a 3:1; el mateix blau clar que el pas 5 del fil. */ [data-tema="fosc"] .retall-enllac, [data-tema="fosc"] .enllac-font, [data-tema="fosc"] .retall.r-dom .retall-etq { color: #7FB3E6; } [data-tema="fosc"] .retall-enllac:hover, [data-tema="fosc"] .enllac-font:hover { color: var(--rosa); } /* Les sis peces petites de «què provem» (Proves ofensives) */ .peces-petites { gap: 12px; margin-top: 10px; } .peces-petites .targeta { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .peces-petites .targeta h4 { margin: 0; font-size: .95rem; } .peces-petites .targeta p { margin: 0; font-size: .85rem; } /* L'assistent intern (IA privada) i la sessió (Formació) */ .peca-pregunta { background: var(--fons-alt); border-radius: 10px; padding: 10px 12px; color: var(--text-fort); } .peca-resposta { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--vora); border-radius: 10px; color: var(--text-fort); line-height: 1.5; } .peca-resposta small { display: block; color: var(--text-mut); font-size: .76rem; margin-top: 6px; } .peca-nota { font-size: .72rem; color: var(--text-mut); margin: 10px 0 0; } .peca .pill { align-self: center; white-space: nowrap; } /* L'oferta a Empreses: tres targetes de la mateixa alçada, amb el botó a baix */ .graella-plans-emp { align-items: stretch; } .graella-plans-emp .pla-targeta { gap: 12px; } .graella-plans-emp .pla-targeta .pla-preu { margin-top: auto; } .graella-plans-emp .pla-targeta .boto-secundari { justify-content: center; } .graella-plans-emp .pla-fosca .pla-sub { color: rgba(255,255,255,.8); } .graella-plans-emp .pla-fosca .boto-secundari { color: #0E3A6B !important; } .text-suau { color: var(--text-mut); } .text-suau em { font-style: italic; } .pla-explicacio { display: flex; flex-direction: column; gap: 12px; justify-content: center; } .pla-explicacio p { margin: 0; } /* Canvi 360: el títol de la portada en dues línies («La teva seguretat. / També és cosa nostra.»): una mica més petit que l'h1 general perquè cada frase càpiga en una línia a l'escriptori (a 4rem, «També és cosa nostra.» partia). */ .hero-dues-linies { font-size: clamp(2rem, 4.2vw, 3.2rem); } /* ── Canvi 373 (JM, 24/10): la portada v4 ── «Què vigilem»: tres blocs (no quatre). Amb vídeo (Canvi 374), el vídeo a l'esquerra i els tres blocs apilats a la dreta; sense vídeo, els tres en fila. A pantalla petita, tot sota (el vídeo primer). */ .vig-graella.vig-graella-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vig-bloc.vig-amb-video { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; } .vig-bloc.vig-amb-video .vig-graella.vig-graella-3 { grid-template-columns: 1fr; gap: 14px; } .vig-bloc.vig-amb-video .vig-targeta { padding: 20px 22px; } .vig-bloc.vig-amb-video .vig-targeta .vig-barra { margin: -20px -22px 10px; } @media (max-width: 960px) { .vig-bloc.vig-amb-video { grid-template-columns: 1fr; } .vig-graella.vig-graella-3 { grid-template-columns: 1fr; } } /* El vídeo (Canvi 374): un marc amb cantonades, 16:9, controls del navegador. */ .video-marc { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--vora); background: #000; box-shadow: 0 10px 30px rgba(13,27,46,0.12); } .video-marc video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; } .vig-video { position: sticky; top: 96px; } @media (max-width: 960px) { .vig-video { position: static; } } .metode-video { max-width: 920px; margin: 0 auto; } /* El Radar al resum: la llista curta sota «Activem les nostres vigies:». */ .pla-llista.pla-llista-resum { margin: 2px 0 6px; } /* El tancament («Has arribat fins aquí…») centrat: vegeu el bloc del Canvi 375, al final. */ /* Els enllaços a un apartat (#plans, #comparativa, #feina): que la capçalera fixa no tapi el títol en arribar-hi. */ .seccio[id], section[id] { scroll-margin-top: 92px; } /* A ≤640 px la capçalera passa a columna (logo + navegació embolicada) i fa força més de 92 px. */ @media (max-width: 640px) { .seccio[id], section[id] { scroll-margin-top: 170px; } } /* ============================================================ Canvi 375 — Els tancaments de totes les pàgines, iguals: títol i paràgraf centrats i el paràgraf amb la mida dels subtítols de secció (abans era una «nota» de 0,82 rem alineada a l'esquerra: JM, «la lletra està malament»). ============================================================ */ .seccio-cta .contenidor { text-align: center; } .seccio-cta h2 { margin-bottom: 14px; } .seccio-cta .cta-text { font-size: 1.02rem; color: var(--text-suau); max-width: 620px; margin: 0 auto 26px; line-height: 1.6; } .seccio-cta .botons { justify-content: center; } /* Canvi 375 — Vigilància: el vídeo al costat del text (en lloc de la peça). */ .vig-fila .vig-video { position: static; } /* Canvi 376 — Proves ofensives › Com funciona: amb vídeo, els passos en columna a l'esquerra (números a l'esquerra de cada pas) i el vídeo a la dreta; a pantalla petita, el vídeo primer i els passos sota. */ .passos-amb-video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; } .passos-llista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .passos-llista li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; } .passos-llista .pas-num { font-size: 1.6rem; font-weight: 800; line-height: 1; padding-top: 16px; } .passos-llista li:nth-child(1) .pas-num { color: var(--rosa); } .passos-llista li:nth-child(2) .pas-num { color: var(--cian); } .passos-llista li:nth-child(3) .pas-num { color: #B07B00; } [data-tema="fosc"] .passos-llista li:nth-child(3) .pas-num { color: var(--groc); } .passos-llista li:nth-child(4) .pas-num { color: var(--blau); } .passos-llista .pas-cos { background: var(--fons-targeta); border: 1px solid var(--vora); border-radius: 16px; padding: 18px 20px; } .passos-llista h4 { margin: 0 0 6px; } .passos-llista p { margin: 0; font-size: 0.95rem; } .passos-amb-video .vig-video { position: sticky; top: 96px; } @media (max-width: 960px) { .passos-amb-video { grid-template-columns: 1fr; } .passos-amb-video .vig-video { order: -1; position: static; } } /* Canvi 377 — Formació › «Formar l'equip també és complir»: quatre normes i la nota. */ .normes .targeta h3 { font-size: 1.05rem; } .normes .targeta p { font-size: 0.92rem; } .normes-nota { text-align: center; max-width: 720px; margin: 22px auto 0; color: var(--text-suau); font-size: 0.95rem; } /* Canvi 378 — El carrusel de retalls («Ha passat de debò»): una pista que llisca amb scroll-snap (dos per pantalla; un, al mòbil); les fletxes i els punts els mostra retalls.js. */ .retalls { position: relative; } .retalls-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 10px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; } .retalls-pista::-webkit-scrollbar { display: none; } .retalls-pista > .retall { scroll-snap-align: start; min-width: 0; } .retalls-pista:focus-visible { outline: 2px solid var(--blau); outline-offset: 4px; border-radius: 12px; } .retalls-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } .retalls-nav[hidden] { display: none; } /* sense JavaScript, cap fletxa: una regla d'autor amb display guanya l'atribut hidden (revisió A) */ .retalls-fletxa { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vora-fosca); background: var(--fons-targeta); color: var(--text-fort); font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .retalls-fletxa:hover { border-color: var(--blau); color: var(--blau); } .retalls-punts { display: flex; gap: 6px; } .retalls-punt { width: 12px; height: 12px; border-radius: 50%; border: 6px solid transparent; box-sizing: content-box; background-clip: padding-box; padding: 0; background-color: var(--vora-fosca); cursor: pointer; } .retalls-punt.actiu { background-color: var(--blau); transform: scale(1.2); } @media (max-width: 760px) { .retalls-pista { grid-auto-columns: 100%; } } @media (prefers-reduced-motion: reduce) { .retalls-pista { scroll-behavior: auto; } } /* Canvi 378 — «Què fem per tu» en tres (Configuracions en lloc de Correu i Web). */ .vig-compacta.vig-compacta-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .vig-compacta.vig-compacta-3 { grid-template-columns: 1fr; } } /* Canvi 376 (revisió B): sense vídeo, les quatre targetes dels passos amb la mateixa alçada. */ .passos-fil .pas { display: flex; flex-direction: column; } .passos-fil .pas .pas-num { align-self: flex-start; } /* el número segueix sent una etiqueta curta, no una franja */ .passos-fil .pas .pas-cos { flex: 1; } /* ============================================================ Canvi 421 (v450, Encàrrec 5) — Els vídeos verticals (9:16). JM grava amb el mòbil: el nom del fitxer acaba en «-vertical» i la plantilla posa .video-vertical (i width/height 1080×1920 al