a l'HTML. / .rd-about--split .rd-abouttitle, .rd-about--split .rd-valuelead { font-size: var(--fs-hero); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tr-display); text-transform: uppercase; color: var(--rd-brand); margin: 0; } / Efecte de màquina d'escriure: només l'opacitat es mou, i el retard de cada * lletra el posa el JS inline. 'is-armed' l'afegeix el script, així sense JS * (o amb reduced-motion) el titular es veu sencer des del principi. / / Serveix per a qualsevol titular armat pel script (About i proposta de valor). / .is-armed .rd-typec { opacity: 0; } .is-typing .rd-typec { opacity: 1; transition: opacity .05s linear; / transition-delay: el posa el JS a cada lletra / } .rd-about--split .rd-aboutbody { padding: 0; } / Proposta de valor (sota el hero): text destacat en NEGRE, caixa baixa i sense * CTA. No comparteix tractament amb el titular d'About, que és versal i vermell. / / * El destacat de la proposta de valor porta EL MATEIX tractament que el titular * d'About (versal, 800, vermell, cos de hero): és la regla de dalt. Aquí només * el repartiment de línies, que aquest text és més llarg. / .rd-valuelead { text-wrap: balance; } .rd-about--value .rd-abouthead { padding: 0; } .rd-about--value .rd-aboutbody p:last-child { margin-bottom: 0; } @media (max-width: 900px) { } / El CTA acompanya el text: no s'allunya en un bloc a part. / .rd-about--split .rd-aboutbody p:last-of-type { margin-bottom: 0; } .rd-about--split .rd-aboutcta-wrap { margin-top: 22px; } / En aquesta secció el CTA no és un botó ple: enllaç de línia, tipografia * negra i filet a sota. / .t2s-rd .rd-about--split a.rd-aboutcta { background: none; color: var(--rd-ink); padding: 12px 25px; border: 1px solid currentColor; letter-spacing: var(--tr-caps-wide); transition: background .2s ease, color .2s ease, border-color .2s ease; } .t2s-rd .rd-about--split a.rd-aboutcta:hover { background: var(--rd-ink); border-color: var(--rd-ink); color: var(--rd-white); } .rd-about--split .rd-aboutbody .is-lead { font-weight: 600; color: var(--rd-ink); font-size: var(--fs-lg); } .rd-aboutcta-wrap { margin-top: 30px; } .t2s-rd a.rd-aboutcta { display: inline-flex; align-items: center; gap: 12px; background: var(--rd-brand); color: var(--rd-white); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 13px 26px; transition: background .25s ease, gap .25s ease; } .t2s-rd a.rd-aboutcta:hover { background: var(--rd-brand-hover); color: var(--rd-white); } / El bloc "Sobre T2S" és una SECCIÓ pròpia, no la continuació del bloc de * climatologies: banda blanca a tot l'ample amb filets, sobre el paper gris. / .rd-band-white { background: var(--rd-white); border-block: 1px solid var(--rd-line); } .rd-aboutmedia { position: relative; min-height: 420px; background: #222; overflow: hidden; } / La foto ha de COBRIR tota la cel·la (retallant), no mostrar-se a mida * natural amb franja negra a sota. / .rd-aboutmedia img, .rd-aboutmedia .rd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rd-aboutbody { padding: 52px; display: flex; flex-direction: column; justify-content: center; } .rd-abouttitle { margin: 0 0 18px; } .rd-aboutbody p { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 14px; } / Cos del About en tipografia regular (petició client): res de negretes. / .rd-aboutbody p strong, .rd-aboutbody p b { font-weight: 400; } .rd-aboutbody p:last-of-type { margin-bottom: 26px; } .rd-metrics { display: flex; gap: 36px; flex-wrap: wrap; } .rd-metric b { display: block; font-size: var(--fs-metric); font-weight: 800; color: var(--rd-brand); line-height: var(--lh-display); text-transform: uppercase; } .rd-metric span { display: block; font-size: var(--fs-2xs); color: var(--rd-brand); font-weight: 700; letter-spacing: var(--tr-caps); margin-top: 6px; text-transform: uppercase; } / ========================================================================== CLIENTS (marquee) + REVIEWS ========================================================================== / .rd-social-proof { background: var(--rd-ink); color: var(--rd-white); } .rd-social-proofin { padding-block: 44px; } .rd-clientslabel { text-align: center; color: rgba(255, 255, 255, .55); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; margin-bottom: 38px; } .rd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); opacity: .85; } .rd-marqueetrack { display: flex; align-items: center; width: max-content; gap: 72px; animation: rdMarquee 32s linear infinite; } .rd-marquee:hover .rd-marqueetrack { animation-play-state: paused; } / Al hero el carrusel NO es pausa: ocupa la meitat baixa d'una secció de 620px * i el ratolí hi passa per sobre sense voler, cosa que semblava que s'aturés * sol. La pausa al hover es reserva per a un carrusel dins d'una secció pròpia, * on l'usuari sí que hi va a llegir els logos. / .rd-heroclients .rd-marquee:hover .rd-marqueetrack { animation-play-state: running; } @keyframes rdMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } / Slot placeholder de logo (fins que el client pugi els logos reals) / .rd-logo-ph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 46px; border: 1px dashed rgba(0, 0, 0, .18); border-radius: 3px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps-lg); color: var(--rd-txt-4); background: #fff; text-transform: uppercase; } / Logos: alineació ÒPTICA, no per caixa — es limiten alçada I amplada i es * centren, així els logos amples i els de dues línies queden equilibrats. / .rd-marqueetrack img { max-height: 30px; max-width: 150px; width: auto; height: auto; object-fit: contain; flex: none; opacity: .85; } .rd-rule { height: 1px; background: rgba(255, 255, 255, .12); margin: 36px 0; } .rd-reviews { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; } .rd-score { text-align: center; flex: none; } .rd-scoren { font-size: var(--fs-metric-xl); font-weight: 700; line-height: var(--lh-display); color: var(--rd-white); text-transform: uppercase; } .rd-scorestars { color: var(--rd-brand); font-size: var(--fs-h3); letter-spacing: 2px; } .rd-scoresrc { color: rgba(255, 255, 255, .6); font-size: var(--fs-xs); margin-top: 4px; } .rd-reviewsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .rd-review { background: rgba(255, 255, 255, .05); border: 1px solid var(--rd-line-dark); padding: 18px 20px; } .rd-reviewstars { color: var(--rd-brand); font-size: var(--fs-sm); letter-spacing: 1px; margin-bottom: 8px; } .rd-review p { color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin: 0 0 12px; } .rd-reviewname { font-size: var(--fs-xs); font-weight: 700; color: var(--rd-white); } .rd-reviewrole { font-size: var(--fs-2xs); color: rgba(255, 255, 255, .5); } / ========================================================================== BLOG (home) ========================================================================== / .rd-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .rd-post { display: block; background: var(--rd-white); border: 1px solid var(--rd-line); overflow: hidden; color: inherit; } / Els contenidors de la targeta són dins d'un : sense * display:block es queden INLINE, i llavors aspect-ratio no s'aplica, la caixa * de la foto no té alçada i la imatge sortia a mida natural per damunt del text. / .rd-postmedia { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rd-paper); } .rd-postbody { display: block; padding: 20px 22px 24px; } .rd-postmeta { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-brand); margin-bottom: 9px; } .rd-posttitle { margin: 0 0 9px; font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); color: var(--rd-ink); text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-postexcerpt { color: var(--rd-txt-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin: 0 0 14px; } / CTA de la card de blog: "MÁS" SEMPRE visible i ANCLAT a baix de la card * (margin-top:auto). En repòs sense subratllat; al hover de la card apareix * el subratllat. Sense fletxa. / .rd-post, .rd-bpost { display: flex; flex-direction: column; } .rd-postbody, .rd-bpostbody { flex: 1 1 auto; display: flex; flex-direction: column; } .rd-postmore, .rd-bpostmore { margin-top: auto; / empeny el CTA al fons de la card / display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--rd-brand); } .rd-postmore { padding-top: 6px; } .rd-postmore .txt, .rd-bpostmore .txt { display: inline-block; padding-bottom: 4px; border-bottom: 1.5px solid transparent; transition: border-color .3s ease; } .rd-post:hover .rd-postmore .txt, .rd-post:focus-within .rd-postmore .txt, .rd-bpost:hover .rd-bpostmore .txt, .rd-bpost:focus-within .rd-bpostmore .txt { border-color: currentColor; } .rd-postmedia .rd-media, .rd-bpostmedia .rd-media { transition: transform .5s ease; } .rd-post:hover .rd-postmedia .rd-media, .rd-bpost:hover .rd-bpostmedia .rd-media { transform: scale(1.04); } .rd-post:hover .rd-posttitle, .rd-bpost:hover .rd-bpostt { color: var(--rd-brand); } .rd-posttitle, .rd-bpostt { transition: color .3s ease; } .rd-bpostmore { margin-top: auto; padding-top: 16px; } / ========================================================================== CONTACT CTA ========================================================================== / .rd-cta-wrap { padding-block: 24px; } .rd-cta { position: relative; overflow: hidden; background: var(--rd-brand); padding: 64px 56px; display: grid; / Segona columna AUTO: abans era 1fr i el botó s'estirava fins a ~500px, * que llegia com una barra blanca i no com una crida a l'acció. * align-items:end alinea les accions amb el peu del paràgraf, en lloc de * deixar-les surant al centre d'una columna més curta. / grid-template-columns: minmax(0, 1fr) auto; gap: 40px 56px; align-items: end; min-height: 320px; } .rd-ctadeco { position: absolute; right: -30px; top: -30px; width: 220px; height: 220px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 16px, transparent 16px 32px); } / Variant amb foto de fons. L'overlay és fosc i decreix cap a la dreta: fosc * a la columna del text i gairebé net al costat dels botons, que ja porten * fons propi. Amb un overlay VERMELL la foto desapareixia (és una peça * taronja sobre negre: el vermell l'aixafava del tot). * Contrast del text blanc mesurat sobre la foto composada, sense píxels de * text (veure el commit per la taula per amplades). Sense overlay era 2,3:1, * il·legible. Passa AA de cos a totes les amplades provades. / .rd-cta--photo { background: var(--rd-ink); } / Enquadrament centrat: sense això la foto es llegia per una vora fosca. / .rd-cta > .rd-media { object-position: center; } .rd-ctascrim { position: absolute; inset: 0; / Més suau que abans (.80/.62/.20): amb la foto fosca del producte el text * segueix passant AA i ara la peça es veu. / background: linear-gradient(90deg, rgba(11, 12, 14, .66) 0%, rgba(11, 12, 14, .44) 45%, rgba(11, 12, 14, .10) 100%); } / Mesura del text: sense límit el titular s'estirava en una sola línia de * gairebé 1100px. Amb 620px cau en dues i la composició es tanca. / .rd-ctabody { position: relative; max-width: 620px; } / Tagline: la classe .rd-eyebrow del sistema, en variant clara. El vermell de * marca sobre aquest fons fosc dona 2,6:1 (il·legible a 12px); el blanc, 18:1. * Aquí només s'obre una mica la separació amb el titular. / .rd-ctaeyebrow { margin: 0 0 26px; } .rd-ctatitle { margin: 0 0 22px; } / :not(.rd-eyebrow) — aquesta regla (0,1,1) guanyava a .rd-eyebrow (0,1,0) i * el tagline sortia a 15px, en gris i sense marge inferior. / .rd-ctabody p:not(.rd-eyebrow) { color: rgba(255, 255, 255, .9); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0; max-width: 460px; } .rd-ctaactions { position: relative; display: flex; flex-direction: column; align-items: stretch; / els botons comparteixen amplada entre ells... / gap: 12px; } .rd-ctaactions > { min-width: 260px; } /* ...però no s'estiren a tota la columna / .rd-ctabtn { background: var(--rd-white); / Text en negre; en passar-hi el ratolí, fons vermell i text blanc. / color: var(--rd-ink); border: 0; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 13px 26px; text-align: center; text-decoration: none; transition: background .25s ease, color .25s ease; } .rd-ctabtn:hover { background: var(--rd-brand); color: var(--rd-white); } .rd-ctabtn--ghost { background: transparent; color: var(--rd-white); border: 1px solid rgba(255, 255, 255, .6); padding: 12px 25px; / descompta el border: mateixa caixa que la sòlida / } .rd-ctabtn--ghost:hover { border-color: var(--rd-white); background: transparent; color: var(--rd-white); } / ========================================================================== FOOTER ========================================================================== / .rd-footer { background: var(--rd-ink); color: var(--rd-white); margin-top: 40px; } .rd-footergrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding: 56px var(--rd-gutter) 30px; max-width: var(--rd-max); margin: 0 auto; } .rd-footerabout p { color: rgba(255, 255, 255, .6); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0 0 16px; max-width: 280px; } .rd-footerlogo { display: block; margin-bottom: 18px; } .rd-socials { display: flex; gap: 10px; } .rd-socials a { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rd-white); } .rd-socials a:hover { background: var(--rd-brand); border-color: var(--rd-brand); color: var(--rd-white); } .rd-footertitle { font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps); color: var(--rd-white); margin-bottom: 16px; text-transform: uppercase; } .rd-footertitle--brand { color: var(--rd-white); margin-bottom: 14px; } .rd-footeraddr { color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); line-height: var(--lh-loose); } .rd-footeraddr strong { color: var(--rd-white); } .rd-footeraddr a { color: rgba(255, 255, 255, .7); } .rd-footeraddr a:hover { color: var(--rd-white); } .rd-footerlist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .rd-footerlist a { color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); } .rd-footerlist a:hover { color: var(--rd-white); } .rd-footerlist--legal { gap: 9px; } .rd-footerlist--legal a { font-size: var(--fs-sm); } .rd-footerbar { border-top: 1px solid var(--rd-line-dark); } .rd-footerbar-in { max-width: var(--rd-max); margin: 0 auto; padding: 18px var(--rd-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .rd-footercopy { color: rgba(255, 255, 255, .45); font-size: var(--fs-xs); } .rd-footerbadges { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .rd-footerbadges span { color: rgba(255, 255, 255, .35); font-size: var(--fs-2xs); border: 1px solid rgba(255, 255, 255, .2); padding: 5px 9px; border-radius: 3px; } .rd-footerbadges img { height: 40px; width: auto; opacity: .9; } / ========================================================================== RESPONSIVE ========================================================================== / / Franja de 4 columnes estretes (1201–1400px): amb el tracking obert, la * paraula "RETRORREFLECTANTES" no cap dins de la card a 19px. Un escaló de cos * ho resol sense tancar el tracking. Per sota de 1200px la graella passa a 3 * columnes i la card torna a ser prou ampla. / @media (min-width: 1201px) and (max-width: 1400px) { .rd-gamaname { font-size: var(--fs-lg); } } @media (max-width: 1200px) { / El CTA baixa amb els ítems del menú: han de tenir la mateixa mida. / .rd-btn-quote { font-size: var(--fs-2xs); } / Amb sis apartats el menú hi cap a 12px fins a 1200px exactes (mesurat * amb Chromium); per sota, un escaló de mida i tracking. / .rd-cat-link { font-size: var(--fs-2xs); letter-spacing: var(--tr-caps-lg); } .rd-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-bestgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-megain { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .rd-megafeature { display: none; } .rd-footergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rd-burger { display: flex; } .rd-cats-row { display: none; } .rd-cats-row.is-open { display: block; } / Menú desplegat: UNA sola columna. En fila embolicada, "T2S Ibérica" i la * primera categoria compartien línia i el menú es veia descuadrat. / .rd-cats-nav { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; } / Cada apartat, un bloc: en flex, l'enllaç i el seu desplegable quedaven * l'un al costat de l'altre. / .rd-cats-nav > li { display: block; width: 100%; } .rd-cats-nav > li.rd-cats-navsep { display: none; } / filet vertical: no hi té sentit / .rd-cat-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--rd-line); } / El CTA de pressupost, a peu de panell i a tota l'amplada. / .rd-btn-quote--panel { display: flex; justify-content: center; margin: 16px 0 20px; width: 100%; } .rd-mega { position: static; transform: none; max-width: none; border: 0; box-shadow: none; } / El desplegable és una GRAELLA: al mòbil ha de ser d'UNA columna. Amb * flex-direction no passava res (no és flex) i les quatre columnes es * quedaven a 34px d'ample, amb els títols tallats i scroll horitzontal. / .rd-megain { display: block; padding: 4px 0 16px; min-height: 0; } .rd-megain::before, .rd-megain::after { display: none; } / filets divisoris de columna / .rd-megacol { min-width: 0; } .rd-megacol + .rd-megacol { margin-top: 18px; } .rd-megacol + .rd-megacol::before { display: none; } / filet de columna / .rd-megacol--stack { gap: 18px; } .rd-megagrp + .rd-megagrp { margin-top: 18px; } .rd-megacol-title { margin-bottom: 10px; } .rd-megalinks { gap: 10px; } / El destacat amb foto no cap dins d'un desplegable de mòbil. / .rd-megafeature { display: none; } .rd-trustgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-herostats { gap: 36px 56px; padding-top: 48px; } .rd-heroclients { padding-top: 48px; } .rd-about { grid-template-columns: minmax(0, 1fr); } .rd-about--split { gap: 28px; } .rd-aboutbody { padding: 32px 24px; } .rd-reviews { grid-template-columns: minmax(0, 1fr); } .rd-reviewsgrid { grid-template-columns: minmax(0, 1fr); } .rd-blog-grid { grid-template-columns: minmax(0, 1fr); } .rd-cta { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; min-height: 0; align-items: start; } / En una sola columna el text creua tota la caixa i arriba a la banda * clara del degradat: allà el contrast queia a 3,8:1. Scrim PLA, que dona * 12,9:1 mesurats i encara deixa veure la foto. / .rd-ctascrim { background: rgba(11, 12, 14, .78); } .rd-ctaactions > { min-width: 0; } /* El cos del hero passa a anar EN FLUX i el hero es fa columna flex: el * contingut reparteix l'espai (titular a dalt, logos ancorats al peu) i el * hero creix amb el text en comptes de tallar-lo. / .rd-hero { display: flex; flex-direction: column; min-height: 620px; } .rd-herobody { position: relative; flex: 1; } .rd-heroinner { flex: 1; padding-block: 48px; } .rd-herocontent { display: flex; flex-direction: column; flex: 1; } / Enquadre del vídeo: es veu més tros de la banda dreta (el subjecte). / .rd-herovideo { object-position: 68% center; } } @media (max-width: 700px) { / Taula heretada de l'excerpt: la primera columna fixa de 180px es menjava * mitja pantalla al mòbil. / .rd-pdpexcerpt table td:first-child, .rd-pdpexcerpt table th:first-child { width: auto; } / Ornament decoratiu del CTA: al mòbil només fa soroll. / .rd-ctadeco { display: none; } / Els cossos GRANS es defineixen al token, no a cada classe: així tots els * H1 de la web (hub, subcategoria, fitxa, article, pàgina) hi caben sense * partir cap paraula. A 320px la caixa útil és de 284px i la paraula més * llarga del catàleg, "RETRORREFLECTÓMETROS", demana com a màxim 21px. / .t2s-rd { --rd-gutter: 18px; --rd-section-y: 48px; / TOTA l'escala tipogràfica, no classe per classe: així el canvi val per * a la home, el catàleg, les fitxes, el blog i les pàgines. / --fs-display: clamp(21px, 6vw, 30px); --fs-hero: clamp(21px, 5.9vw, 28px); --fs-h1: clamp(20px, 5.6vw, 24px); --fs-h2: clamp(18px, 5vw, 21px); --fs-h3: 17px; --fs-metric: 30px; --fs-metric-xl: 42px; } / Les cards de GAMA van d'una columna: en dues, la caixa fa 139px i cap nom * del catàleg ("CINTAS RETRORREFLECTANTES") hi cap sense partir-se. Les de * producte i de necessitat sí que van de dues: els noms hi caben. / .rd-cats-grid { grid-template-columns: minmax(0, 1fr); } .rd-bestgrid, .rd-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } / 18 caràcters en versal ("RETRORREFLECTANTES") dins de 284px (320px menys * els marges) demanen com a màxim 24px de cos: és el sostre de --fs-h1. / .rd-herostat-t { font-size: var(--fs-h1); } .rd-herostats { gap: 28px 40px; } / HERO al mòbil: 60% de l'alçada de la finestra (l'estructura flex ja ve del * bloc de tauleta). Si el text creix, el hero creix amb ell. / .rd-hero { min-height: 60vh; min-height: 60svh; } .rd-heroinner { padding-block: 32px; } .rd-herosub { font-size: var(--fs-sm); } .rd-heroctas { margin-top: 20px; } .rd-heroclients { max-width: none; padding-top: 44px; } .rd-heroclients-label { margin-bottom: 12px; } / * LLEGIBILITAT DEL HERO AL MÒBIL. Els dos tints són decoratius (multiply amb * un degradat que acaba en blanc): sobre les zones clares del vídeo —la peça * groga— el titular blanc quedava a 1,7:1 mesurats, il·legible. S'hi posa un * scrim fosc de debò, que és el que garanteix el contrast, i els tints * baixen d'opacitat per no enfangar el color. / .rd-herotint { opacity: .5; } .rd-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(12, 14, 18, .72) 0%, rgba(12, 14, 18, .62) 55%, rgba(12, 14, 18, .78) 100%); } / Sense degradat a la dreta: al mòbil tallava el logo pel mig. / .rd-heroclients .rd-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); } .rd-heroclients .rd-marqueetrack { gap: 26px; } .rd-heroclients .rd-marqueetrack img { max-height: 20px; max-width: 96px; } / Cards de gama: el nom més curt de cos, i una mica més d'alçada de card * perquè el títol de tres línies no toqui la descripció. / / Card ampla: en una columna, un quadrat de 354px d'ample feia 425px d'alt i * la graella s'eternitzava. En 16:9 fa 199px, un 53% menys. / .rd-gama { aspect-ratio: 16 / 9; } .rd-gamaname { letter-spacing: var(--tr-caps); } .rd-gamacap { left: 14px; right: 14px; bottom: 14px; } / Prova social i CTA: menys aire vertical, que al mòbil s'estiraven. / .rd-social-proofin { padding-block: 28px; } .rd-cta { padding: 28px 20px; gap: 22px; } .rd-ctaactions { margin-top: 4px; } .rd-footergrid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rd-topbarnav { display: none; } .rd-util { gap: 10px; } .rd-btn-quote:not(.rd-btn-quote--panel) { display: none; } } @media (prefers-reduced-motion: reduce) { .rd-marqueetrack { animation: none; } [data-rd-mega]:not([hidden]), [data-rd-mega]:not([hidden]) .rd-megacol, [data-rd-mega]:not([hidden]) .rd-megafeature { animation: none; } .rd-lift, .rd-gamabody, .rd-gamamore, .rd-gamascrim { transition: none; } .rd-postmore, .rd-bpostmore, .rd-postmedia .rd-media, .rd-bpostmedia .rd-media, .rd-posttitle, .rd-bpostt { transition: none; } } / ========================================================================== CATEGORIA (arxiu de producte) ========================================================================== / / Hero de categoria: 360px, scrim i títol centrat / .rd-cathero { position: relative; overflow: hidden; background: var(--rd-ink); height: 360px; } .rd-catheroscrim { position: absolute; inset: 0; background: linear-gradient(rgba(21, 23, 28, .55), rgba(21, 23, 28, .45)); pointer-events: none; } .rd-catherocrumbs { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--rd-max); padding-inline: var(--rd-gutter); z-index: 2; font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); } .t2s-rd .rd-catherocrumbs a { color: rgba(255, 255, 255, .8); } .t2s-rd .rd-catherocrumbs a:hover { color: #fff; } .rd-catherocrumbs .sep { color: rgba(255, 255, 255, .45); } .rd-catherocrumbs .cur { color: #fff; font-weight: 600; } .rd-catherobody { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; } .rd-catherotitle { margin: 0; color: #fff; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-catherosub { color: #fff; font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-relaxed); margin: 18px 0 0; max-width: 580px; } / Layout sidebar + graella / .rd-shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; padding-block: 40px; } / Filtres / .rd-filters { position: sticky; top: var(--rd-sticky-top); } .rd-filtershead { text-transform: uppercase; font-size: var(--fs-base); font-weight: 700; letter-spacing: var(--tr-caps-lg); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #d0d3d8; / línia divisòria grisa (no negra) / } .rd-fgroup { margin-bottom: 24px; } .rd-fgrouptitle { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-txt-4); margin-bottom: 11px; } .rd-flist { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .t2s-rd .rd-flist a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 10px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-normal); color: var(--rd-ink); background: transparent; } .rd-flist a > span:first-child { flex: 1; min-width: 0; } .t2s-rd .rd-flist a:hover { background: var(--rd-paper); color: var(--rd-ink); } .t2s-rd .rd-flist a.is-active { background: var(--rd-paper); font-weight: 700; color: var(--rd-brand); } .rd-flist .count { flex: none; font-size: var(--fs-xs); color: var(--rd-txt-4); } .rd-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .rd-swatches span, .t2s-rd .rd-swatches a { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; } .t2s-rd .rd-swatches a:hover { box-shadow: 0 0 0 2px var(--rd-ink); } .rd-sizes { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .t2s-rd .rd-sizes a, .rd-sizes span { display: block; min-width: 34px; text-align: center; padding: 6px 8px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--rd-ink); } .t2s-rd .rd-sizes a:hover { border-color: var(--rd-ink); background: var(--rd-ink); color: #fff; } .rd-checks { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; } .t2s-rd .rd-checks a { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--rd-ink); } .rd-checks .box { width: 16px; height: 16px; border: 1px solid #c5c5c5; border-radius: 3px; flex: none; } .t2s-rd .rd-checks a.is-active .box { background: var(--rd-ink); border-color: var(--rd-ink); } .t2s-rd .rd-checks a.is-active { font-weight: 700; } .rd-checks .count { margin-left: auto; font-size: var(--fs-xs); color: var(--rd-txt-4); } .t2s-rd .rd-swatches a.is-active { box-shadow: 0 0 0 2px var(--rd-ink); } .t2s-rd .rd-sizes a.is-active { border-color: var(--rd-ink); background: var(--rd-ink); color: #fff; } / Filtres actius (xips) — apareixen només quan hi ha alguna cosa marcada. / .rd-fchips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; } .t2s-rd .rd-fchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 3px; background: #fff; font-size: var(--fs-xs); font-weight: 600; color: var(--rd-ink); } .t2s-rd .rd-fchip:hover { border-color: var(--rd-brand); color: var(--rd-brand); } .rd-fchip i { font-style: normal; font-size: var(--fs-sm); line-height: var(--lh-display); color: var(--rd-txt-3); } .t2s-rd .rd-fclear { align-self: center; font-size: var(--fs-xs); font-weight: 600; color: var(--rd-brand); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } / Barra de resultats / .rd-results { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .rd-resultscount { font-size: var(--fs-sm); color: var(--rd-txt-3); } .rd-resultscount strong { color: var(--rd-ink); } .rd-resultssort { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); margin: 0; } .rd-results__sort > span { color: var(--rd-txt-3); white-space: nowrap; } / Especificitat amb .t2s-rd: el CSS de WooCommerce també estilitza el * de WooCommerce porta el seu * propi border/box-shadow (es veia un requadre doble al voltant del número). * Es força a 0 amb !important perquè el CSS del plugin no el torni a pintar. / .rd-buy .quantity input { width: 44px; height: 52px; text-align: center; font-weight: 700; font-size: var(--fs-lg); border: 0 !important; outline: 0; padding: 0; margin: 0; background: #fff; color: var(--rd-ink); -moz-appearance: textfield; appearance: textfield; box-shadow: none !important; border-radius: 0; } .rd-buy .quantity input:focus { box-shadow: none !important; outline: 0; } / Fora el spinner natiu del number input: el handoff usa botons − / +. / .rd-buy .quantity input::-webkit-outer-spin-button, .rd-buy .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .t2s-rd .rd-qty-btn { width: 42px; height: 52px; background: #fff; border: 0; cursor: pointer; font-size: var(--fs-h3); line-height: var(--lh-display); color: var(--rd-ink); flex: none; padding: 0; } .t2s-rd .rd-qty-btn:hover { background: var(--rd-paper); } .t2s-rd .rd-buy button.button, .t2s-rd .rd-buy button[type="submit"], .t2s-rd .rd-buy .single_add_to_cart_button { flex: 1; min-width: 220px; background: var(--rd-brand); color: #fff; border: 0; cursor: pointer; font-weight: 700; font-size: var(--fs-base); letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 17px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .t2s-rd .rd-buy button.button:hover, .t2s-rd .rd-buy .single_add_to_cart_button:hover { background: var(--rd-brand-hover); color: #fff; } / Selects de variacions / .rd-buy table.variations { width: 100%; border-collapse: collapse; margin-bottom: 14px; } .rd-buy table.variations th { text-align: left; font-size: var(--fs-sm); font-weight: 700; padding: 8px 12px 8px 0; } .rd-buy table.variations td { padding: 8px 0; } .rd-buy table.variations select { width: 100%; padding: 12px; border: 1px solid rgba(0, 0, 0, .18); background: #fff; font-weight: 600; color: var(--rd-ink); } / Accions secundàries / .rd-pdpactions { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; } .t2s-rd .rd-abtn { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--rd-ink); color: var(--rd-ink); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); padding: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .t2s-rd .rd-abtn:hover { background: var(--rd-ink); color: #fff; } .t2s-rd .rd-abtn--soft { border-color: rgba(0, 0, 0, .16); } .t2s-rd .rd-abtn--soft:hover { border-color: var(--rd-ink); background: #fff; color: var(--rd-ink); } / Botó INACTIU: es planteja al handoff però el producte no té la dada. / .t2s-rd .rd-abtn.is-disabled { border-color: rgba(0, 0, 0, .12); color: var(--rd-txt-4); background: #fafafa; cursor: default; pointer-events: none; opacity: .7; } .t2s-rd .rd-abtn.is-disabled:hover { background: #fafafa; color: var(--rd-txt-4); } .rd-pdpactions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } / Specs ràpides / .rd-specs { border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 24px; } .rd-specsk { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-txt-4); margin-bottom: 3px; } .rd-specsv { font-size: var(--fs-sm); font-weight: 600; } .rd-badges { display: flex; gap: 8px; flex-wrap: wrap; } .rd-badges span { font-size: var(--fs-2xs); font-weight: 700; background: var(--rd-ink); color: #fff; padding: 5px 9px; } / Fila de confiança / / Una sola fila de 4, amb la icona a sobre del text. / / Al panell de documentació els botons s'ajusten al contingut. A la buy box * .rd-abtn porta flex:1 perquè una fila de tres es reparteixi l'ample, però * aquí sovint n'hi ha un de sol i quedava una barra de vora a vora. / .rd-docbtns { display: flex; flex-wrap: wrap; gap: 12px; } .t2s-rd .rd-docbtns .rd-abtn { flex: 0 0 auto; padding: 13px 26px; } .rd-ptrust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; } .rd-ptrust > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .rd-ptrust i { color: var(--rd-brand); flex: none; display: flex; } .rd-ptrust i svg { width: 22px; height: 22px; } .rd-ptrust span { font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-normal); } / Tabs / .rd-tabs { margin-top: 56px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; } .rd-tabsnav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: var(--rd-sticky-top); } .rd-tabsbtn { text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; cursor: pointer; padding: 12px 16px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; color: var(--rd-ink); } .rd-tabsbtn[aria-selected="true"] { background: var(--rd-paper); border-left-color: var(--rd-brand); color: var(--rd-brand); } .rd-tabspanels { background: #fff; border: 1px solid var(--rd-line); padding: 40px 44px; } .rd-tabspanel[hidden] { display: none; } / Encapçalaments DEL CONTINGUT migrat: a escala de text, no de secció * (32px era la mida del títol de panell i el contingut l'heretava). / .rd-tabspanel h2 { margin: 26px 0 14px; font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-tabspanel h3 { margin: 22px 0 12px; font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-tabspanel h4 { margin: 18px 0 10px; font-size: var(--fs-base); font-weight: 700; } .rd-tabspanel h2:first-child, .rd-tabspanel h3:first-child { margin-top: 0; } .rd-tabspanel p, .rd-tabspanel li { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-loose); } .rd-tabspanel ul { margin: 0 0 28px; padding-left: 20px; } .rd-tabspanel table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .rd-tabspanel table tr { border-bottom: 1px solid rgba(0, 0, 0, .08); } .rd-tabspanel table th { padding: 13px 0; font-weight: 700; width: 200px; color: var(--rd-ink); text-align: left; } .rd-tabspanel table td { padding: 13px 0; color: var(--rd-txt-2); } / Llista de documents (fitxa tècnica, seguretat, instruccions…) / .rd-doclist { margin: 0 0 24px; padding: 0; list-style: none; } .rd-doclist li { border-bottom: 1px solid rgba(0, 0, 0, .08); } .rd-doclist li:last-child { border-bottom: 0; } .t2s-rd .rd-doclist a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 2px; font-size: var(--fs-base); font-weight: 600; color: var(--rd-ink); } .t2s-rd .rd-doclist a:hover { color: var(--rd-brand); } .rd-doclist svg { flex: none; } .rd-video { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--rd-ink); overflow: hidden; } .rd-video + .rd-video { margin-top: 18px; } .rd-video video, .rd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; background: var(--rd-ink); } / Relacionats / .rd-related { margin-top: 64px; } .rd-related h2 { margin: 0 0 24px; } / Responsive categoria/producte / @media (max-width: 1200px) { .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rd-shop { grid-template-columns: minmax(0, 1fr); gap: 24px; } .rd-filters { position: static; } .rd-pdptop { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rd-gal { position: static; } .rd-tabs { grid-template-columns: minmax(0, 1fr); gap: 16px; } .rd-tabsnav { position: static; flex-direction: row; flex-wrap: wrap; } .rd-tabspanels { padding: 28px 22px; } .rd-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 22px; } .rd-seo { padding: 32px 22px; } .rd-seo-cta { margin: 28px -22px -32px; padding: 32px 24px; } .rd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-pdptitle { font-size: var(--fs-h1); } } @media (max-width: 700px) { .rd-cathero { height: 280px; } .rd-specs { grid-template-columns: minmax(0, 1fr); } .rd-ptrust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-seocta { padding: 22px; } } / ========================================================================== FORMULARIS (pressupost i contacte) ========================================================================== / .rd-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; padding: 48px 0 64px; } .rd-two-col--contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } / Llista de beneficis amb icona quadrada / .rd-benefits { display: flex; flex-direction: column; gap: 22px; margin: 0 0 36px; } .rd-benefit { display: flex; gap: 16px; align-items: flex-start; } .rd-benefitico { width: 44px; height: 44px; flex: none; background: #f2f2f2; color: var(--rd-ink); display: flex; align-items: center; justify-content: center; } .rd-benefitt { font-size: var(--fs-lg); font-weight: 700; color: var(--rd-ink); margin-bottom: 2px; } .rd-benefitd { font-size: var(--fs-sm); color: var(--rd-txt-3); line-height: var(--lh-relaxed); } / Passos / .rd-steps-wrap { border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 28px; margin-bottom: 28px; } .rd-steps-wrapt { font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps-sm); color: var(--rd-txt-4); margin-bottom: 22px; text-transform: uppercase; } .rd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .rd-stepn { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); color: var(--rd-brand); background: rgba(183, 14, 12, .1); padding: 3px 8px; margin-bottom: 12px; text-transform: uppercase; } .rd-stept { font-size: var(--fs-base); font-weight: 700; color: var(--rd-ink); margin-bottom: 5px; } .rd-stepd { font-size: var(--fs-sm); color: var(--rd-txt-3); line-height: var(--lh-relaxed); } / Caixa de prova social / .rd-proofbox { display: flex; flex-direction: column; gap: 14px; background: var(--rd-paper); border: 1px solid var(--rd-line-2); padding: 20px 22px; } .rd-proofboxscore { font-size: var(--fs-metric); font-weight: 700; color: var(--rd-ink); line-height: var(--lh-display); text-transform: uppercase; } .rd-proofboxscore i { color: var(--rd-brand); font-size: var(--fs-h3); font-style: normal; } .rd-proofboxsrc { font-size: var(--fs-xs); color: var(--rd-txt-3); } .rd-proofboxrule { height: 1px; background: rgba(0, 0, 0, .12); } .rd-proofboxtxt { font-size: var(--fs-sm); color: var(--rd-txt-2); line-height: var(--lh-relaxed); } / Card del formulari / .rd-formcard { background: #fff; border: 1px solid var(--rd-line-2); padding: 36px 38px; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .45); } .rd-formcard--sticky { position: sticky; top: var(--rd-sticky-top); } .rd-formcardh { margin: 0 0 4px; font-size: var(--fs-h1); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-formcardsub { color: var(--rd-txt-3); font-size: var(--fs-sm); font-weight: 400; margin: 0 0 24px; } .rd-field { margin-bottom: 14px; } .rd-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; } .rd-label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--rd-ink); margin-bottom: 7px; } .t2s-rd input[type="text"], .t2s-rd input[type="email"], .t2s-rd input[type="tel"], .t2s-rd input[type="number"], .t2s-rd textarea, .t2s-rd select { width: 100%; border: 1px solid rgba(0, 0, 0, .18); border-radius: 0; padding: 12px 14px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--fs-sm); color: var(--rd-ink); background: #fff; outline: none; } .t2s-rd textarea { resize: vertical; } / Placeholder subtil (exemples tipus "Ej. Juan García"). / .t2s-rd input::placeholder, .t2s-rd textarea::placeholder { color: rgba(0, 0, 0, .32); opacity: 1; } .t2s-rd input:focus-visible, .t2s-rd textarea:focus-visible, .t2s-rd select:focus-visible { border-color: var(--rd-ink); outline: 2px solid var(--rd-brand); outline-offset: 1px; } / Segmentat "Soy…" / .rd-seg { display: flex; gap: 8px; margin-bottom: 18px; } .rd-seg label { flex: 1; display: block; text-align: center; padding: 11px 6px; border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); background: #fff; color: var(--rd-ink); } .rd-seg input { position: absolute; opacity: 0; width: 0; height: 0; } .rd-seg input:checked + span, .rd-seg label:has(input:checked) { background: var(--rd-ink); border-color: var(--rd-ink); color: #fff; } .rd-seg label:has(input:focus-visible) { outline: 2px solid var(--rd-brand); outline-offset: 2px; } .rd-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--rd-txt-2); margin-bottom: 16px; cursor: pointer; line-height: var(--lh-relaxed); } .rd-check input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--rd-brand); } .t2s-rd .rd-submit { width: 100%; background: var(--rd-brand); color: #fff; border: 0; cursor: pointer; font-weight: 700; font-size: var(--fs-base); letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 16px; } .t2s-rd .rd-submit:hover { background: var(--rd-brand-hover); color: #fff; } .rd-formfoot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; font-size: var(--fs-xs); color: var(--rd-txt-3); flex-wrap: wrap; } .rd-formfoot span { display: flex; align-items: center; gap: 6px; } .rd-formfoot svg { color: var(--rd-txt-4); } .rd-notice { padding: 14px 16px; margin-bottom: 18px; font-size: var(--fs-sm); border: 1px solid; } .rd-notice--ok { background: #f2fbf4; border-color: #b7e4c2; color: #1b5e2a; } .rd-notice--err { background: #fdf3f3; border-color: #f0c6c6; color: #8f0a09; } / Cards de contacte / .rd-ccards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; } .rd-ccard { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--rd-line-2); padding: 18px 20px; } .rd-ccardico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--rd-paper); color: var(--rd-brand); display: flex; align-items: center; justify-content: center; } .rd-ccardt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-txt-4); margin-bottom: 6px; } .rd-ccardl { font-size: var(--fs-base); font-weight: 600; color: var(--rd-ink); line-height: var(--lh-normal); } .t2s-rd .rd-ccardl a { color: var(--rd-ink); } .t2s-rd .rd-ccardl a:hover { color: var(--rd-brand); } .rd-map { position: relative; overflow: hidden; height: 260px; background: #e9e6df; } .rd-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } / ========================================================================== BLOG (arxiu) ========================================================================== / .rd-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; padding: 0; list-style: none; } .t2s-rd .rd-topics a { display: block; padding: 8px 16px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--rd-ink); } .t2s-rd .rd-topics a:hover, .t2s-rd .rd-topics a.is-active { background: var(--rd-ink); color: #fff; border-color: var(--rd-ink); } .rd-bloglayout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; } .rd-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--rd-line-2); overflow: hidden; background: #fff; margin-bottom: 36px; color: inherit; } .rd-featmedia { position: relative; min-height: 300px; background: #222; } .rd-featflag { position: absolute; top: 14px; left: 14px; background: var(--rd-brand); color: #fff; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 5px 10px; z-index: 2; } .rd-featbody { padding: 34px; display: flex; flex-direction: column; justify-content: center; } .rd-featcat { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-brand); margin-bottom: 12px; } .rd-featt { margin: 0 0 12px; font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-display); color: var(--rd-ink); text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-featx { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 20px; } .rd-author { display: flex; align-items: center; gap: 12px; } .rd-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--rd-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex: none; } .rd-avatar--sm { width: 30px; height: 30px; font-size: var(--fs-2xs); background: var(--rd-paper); color: var(--rd-ink); } .rd-authorn { font-weight: 700; color: var(--rd-ink); font-size: var(--fs-sm); } .rd-authorr { color: var(--rd-txt-3); font-size: var(--fs-sm); } .rd-meta-line { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rd-line-2); font-size: var(--fs-xs); color: var(--rd-txt-3); display: flex; flex-wrap: wrap; gap: 12px; } .rd-bloggrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } / Card de columna sencera: el "Más" s'ancora al peu, així queda alineat a * totes les cards de la fila. / .rd-bpost { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--rd-line-2); overflow: hidden; color: inherit; } .rd-bpostmedia { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rd-paper); } .rd-bpostcat { position: absolute; top: 12px; left: 12px; background: rgba(21, 23, 28, .85); color: #fff; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 4px 9px; z-index: 2; } .rd-bpostbody { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; } .rd-bpostt { margin: 0 0 8px; font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); color: var(--rd-ink); text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-bpostx { color: var(--rd-txt-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin: 0 0 16px; } .rd-bpostmeta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--rd-txt-3); flex-wrap: wrap; } .rd-bpostdate { color: var(--rd-txt-2); font-weight: 600; } .rd-bpostread { color: var(--rd-txt-4); } .rd-bpostmeta .sep { color: var(--rd-txt-4); } .rd-bpostmeta b { font-weight: 600; color: var(--rd-ink); } .rd-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: var(--rd-sticky-top); } .rd-sidebox { background: #fff; border: 1px solid var(--rd-line-2); padding: 24px; } .rd-sidebox--soft { background: var(--rd-paper); padding: 22px; } .rd-sideboxh { font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--tr-caps-lg); margin-bottom: 16px; text-transform: uppercase; } .rd-sideauthor { display: flex; gap: 12px; margin-bottom: 16px; } .rd-sideauthorn { font-size: var(--fs-sm); font-weight: 700; color: var(--rd-ink); } .rd-sideauthorr { font-size: var(--fs-xs); color: var(--rd-brand); font-weight: 600; margin-bottom: 4px; } .rd-sideauthorb { font-size: var(--fs-xs); color: var(--rd-txt-3); line-height: var(--lh-relaxed); } .rd-poplist { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } .t2s-rd .rd-poplist a { display: flex; gap: 12px; align-items: flex-start; color: var(--rd-ink); } .rd-poplist i { color: var(--rd-brand); font-weight: 700; font-size: var(--fs-h3); flex: none; line-height: var(--lh-display); font-style: normal; } .rd-poplist span { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-normal); } .t2s-rd .rd-poplist a:hover span { color: var(--rd-brand); } / ========================================================================== ARTICLE ========================================================================== / / Com la resta de vistes: el gutter és el del contenidor únic (abans anava a 0 * i l'article sortia més ample que la resta de pàgines). / .rd-article { padding: 26px var(--rd-gutter) 64px; } .rd-articlehead { max-width: 760px; margin: 0 auto; } .rd-articlecat { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-brand); margin-bottom: 14px; } .rd-articlet { margin: 0 0 22px; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-articlebyline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, .1); } .rd-articlehero { position: relative; max-width: 980px; margin: 28px auto 0; overflow: hidden; height: 440px; background: #222; } .rd-articlebody { / Abans 980px: dins del contenidor de 1520 quedava una columna estreta amb * molt marge buit als costats. Amb 1240 el cos puja a uns 940px i el text, * que ja va a 16px, manté una mesura llegible. / max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } .rd-articleaside { position: sticky; top: var(--rd-sticky-top); display: flex; flex-direction: column; gap: 24px; } .rd-articleaside-h { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-txt-4); margin-bottom: 12px; } .rd-share { display: flex; gap: 8px; } .t2s-rd .rd-share a { width: 34px; height: 34px; border-radius: 50%; background: var(--rd-paper); color: var(--rd-ink); display: flex; align-items: center; justify-content: center; } .t2s-rd .rd-share a:hover { background: var(--rd-brand); color: #fff; } .rd-prose { font-size: var(--fs-lg); line-height: var(--lh-body); color: #2E3138; } .rd-prose > :first-child { margin-top: 0; } .rd-prose p { margin: 0 0 18px; } .rd-prose h2 { font-size: var(--fs-h1); font-weight: 800; margin: 34px 0 14px; line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-prose h3 { font-size: var(--fs-h3); font-weight: 700; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-prose ul, .rd-prose ol { margin: 0 0 18px; padding-left: 20px; line-height: var(--lh-loose); } .rd-prose img { margin: 24px 0; } .rd-prose blockquote { margin: 26px 0; padding: 16px 24px; border-left: 4px solid var(--rd-ink); font-size: var(--fs-h3); font-style: italic; color: var(--rd-ink); line-height: var(--lh-relaxed); } .rd-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: var(--fs-base); } .rd-prose th, .rd-prose td { padding: 12px 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); text-align: left; } .rd-authorbox { margin-top: 40px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); padding: 24px; display: flex; gap: 16px; align-items: flex-start; } .rd-authorbox .rd-avatar { width: 52px; height: 52px; font-size: var(--fs-lg); } .rd-keep { max-width: 980px; margin: 52px auto 0; } .rd-keep h2 { margin: 0 0 20px; } .rd-keepgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* ========================================================================== EMPRESA ========================================================================== / / Regla fixa del projecte: UN sol ample per a tota la web. .rd-narrow es * manté només com a àlies del contenidor únic (la pàgina d'empresa el feia * servir amb 1120px i quedava més estreta que la resta). / .rd-narrow { max-width: var(--rd-max); margin: 0 auto; padding-inline: var(--rd-gutter); } .rd-emp-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 64px 0 20px; } .rd-emp-intro p { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 14px; } .rd-emp-intromedia { position: relative; overflow: hidden; height: 380px; background: #222; } .rd-stats { background: var(--rd-ink); padding: 36px 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 40px 0; } .rd-stat { text-align: center; } .rd-stat b { display: block; font-size: var(--fs-display); font-weight: 700; color: #fff; line-height: var(--lh-display); text-transform: uppercase; } .rd-stat span { display: block; color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); font-weight: 600; margin-top: 6px; } .rd-center { text-align: center; margin-bottom: 48px; } .rd-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .rd-tl { border-top: 3px solid var(--rd-brand); padding-top: 16px; } .rd-tl b { display: block; font-size: var(--fs-h1); font-weight: 700; color: var(--rd-ink); line-height: var(--lh-display); text-transform: uppercase; } .rd-tl p { color: var(--rd-txt-2); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 10px 0 0; } .rd-vals-wrap { background: var(--rd-paper); margin-top: 20px; } .rd-vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .rd-val { background: #fff; border: 1px solid var(--rd-line); padding: 26px 24px; } .rd-valico { width: 46px; height: 46px; border-radius: 50%; background: var(--rd-paper); color: var(--rd-brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .rd-valt { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } .rd-val p { color: var(--rd-txt-3); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0; } .rd-partners { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 56px 0; } .rd-partners p { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 22px; } .rd-partner-tags { display: flex; gap: 14px; flex-wrap: wrap; } .rd-partner-tags span { font-size: var(--fs-h2); font-weight: 700; color: var(--rd-ink); border: 1px solid rgba(0, 0, 0, .15); padding: 12px 22px; text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-logistics { background: var(--rd-ink); padding: 36px; color: #fff; } .rd-logisticst { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-logistics p { color: rgba(255, 255, 255, .75); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 20px; } .rd-pills { display: flex; gap: 10px; flex-wrap: wrap; } .rd-pills span { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 7px 14px; font-size: var(--fs-xs); font-weight: 600; } .rd-endcta { background: var(--rd-brand); padding: 44px; text-align: center; margin-bottom: 72px; } .rd-endcta h2 { margin: 0 0 10px; } .rd-endcta p { color: rgba(255, 255, 255, .9); font-size: var(--fs-base); margin: 0 0 22px; } .rd-endctabtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .t2s-rd .rd-endctab { background: #fff; color: var(--rd-brand); border: 0; font-weight: 700; font-size: var(--fs-base); padding: 15px 28px; border-radius: 3px; text-decoration: none; } .t2s-rd .rd-endctab:hover { background: var(--rd-ink); color: #fff; } .t2s-rd .rd-endctab--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); } .t2s-rd .rd-endctab--ghost:hover { background: transparent; border-color: #fff; color: #fff; } / Responsive fase 3 / @media (max-width: 1200px) { .rd-bloglayout { grid-template-columns: minmax(0, 1fr); } .rd-side { position: static; } .rd-vals, .rd-timeline, .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rd-two-col, .rd-two-col--contact { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0 48px; } .rd-formcard--sticky { position: static; } .rd-formcard { padding: 26px 22px; } .rd-steps { grid-template-columns: minmax(0, 1fr); } .rd-feat { grid-template-columns: minmax(0, 1fr); } .rd-featbody { padding: 24px 22px; } .rd-bloggrid { grid-template-columns: minmax(0, 1fr); } .rd-articlebody { grid-template-columns: minmax(0, 1fr); gap: 24px; } .rd-articleaside { position: static; flex-direction: row; flex-wrap: wrap; gap: 32px; } .rd-articlehero { height: 280px; } .rd-emp-intro, .rd-partners { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rd-keepgrid { grid-template-columns: minmax(0, 1fr); } .rd-row2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .rd-stats, .rd-timeline, .rd-vals { grid-template-columns: minmax(0, 1fr); } .rd-featt, .rd-endcta h2 { font-size: var(--fs-h2); } .rd-prose h2 { font-size: var(--fs-h2); } } / ========================================================================== FIX de blocificació: aquestes cards són amb fills (per no niar dins d'). Un NO blocifica els seus fills, així que cal declarar-ho o l'aspect-ratio i el flux es trenquen. (A .rd-feat no cal: és grid/flex i blocifica els fills automàticament.) ========================================================================== / .rd-postmedia, .rd-postmeta, .rd-posttitle, .rd-postexcerpt, .rd-bpostmedia, .rd-bpostt, .rd-bpostx { display: block; } / body NO va aquí: és flex-column perquè el "MÁS" (margin-top:auto) * quedi ancorat a baix i alineat a totes les cards de la fila. / .rd-postmore, .rd-bpostmore, .rd-bpostmeta { display: flex; } / ========================================================================== Contingut LLEGAT dins de la fitxa (l'excerpt migrat porta taules de specs i markup lliure). Se li dona l'estil del disseny perquè no surti "en cru". ========================================================================== / .rd-pdpexcerpt p { margin: 0 0 12px; } .rd-pdpexcerpt p:last-child { margin-bottom: 0; } .rd-pdpexcerpt table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 16px 0 0; } .rd-pdpexcerpt table tr { border-bottom: 1px solid rgba(0, 0, 0, .08); } .rd-pdpexcerpt table tr:last-child { border-bottom: 0; } .rd-pdpexcerpt table td, .rd-pdpexcerpt table th { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; color: var(--rd-txt-2); } .rd-pdpexcerpt table td:first-child, .rd-pdpexcerpt table th:first-child { font-weight: 700; color: var(--rd-ink); width: 180px; text-transform: uppercase; font-size: var(--fs-2xs); letter-spacing: var(--tr-caps); padding-top: 12px; } .rd-pdpexcerpt table img { display: inline-block; vertical-align: middle; max-height: 22px; width: auto; } .rd-pdpexcerpt ul { margin: 12px 0 0; padding-left: 18px; line-height: var(--lh-body); color: var(--rd-txt-2); } .t2s-rd .rd-pdpexcerpt a { color: var(--rd-brand); text-decoration: underline; text-underline-offset: 3px; } / El contingut de pàgines antigues embegut al bloc SEO de les verticals / .rd-seo img { margin: 18px 0; } .rd-seo ul, .rd-seo ol { margin: 0 0 18px; padding-left: 20px; color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-loose); } .rd-seo h4 { margin: 28px 0 10px; font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tr-caps-h3); } / ========================================================================== PÀGINA HUB (categoria mare) — blocs 01-08 de la diapo Hero partit (text + foto), USPs, graella de subcategories, contingut SEO estructurat, prova social, FAQs i CTA. El hub NO ensenya productes. ========================================================================== / / --- 02 Hero amb la foto de FONS ---------------------------------------- / .rd-hubhero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rd-line); } .rd-hubheroin { position: relative; z-index: 2; padding-block: 30px 54px; } .rd-hubhero .rd-crumbs { margin-bottom: 44px; } / Amb foto: fons fosc, text en blanc i degradat de lectura. / .rd-hubhero--photo { background: var(--rd-ink); border-bottom: 0; } .rd-hubhero--photo > .rd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .rd-hubheroscrim { position: absolute; inset: 0; z-index: 1; / Més fosc a l'esquerra, on hi ha el text; la dreta deixa veure la foto. / background: linear-gradient(90deg, rgba(15, 17, 21, .88) 0%, rgba(15, 17, 21, .72) 42%, rgba(15, 17, 21, .28) 72%, rgba(15, 17, 21, .12) 100%), linear-gradient(180deg, rgba(15, 17, 21, .35) 0%, rgba(15, 17, 21, 0) 45%); pointer-events: none; } .rd-hubhero--photo .rd-hubheroin { padding-block: 34px 69px; } .rd-hubhero--photo .rd-hubherobody { max-width: 720px; } .t2s-rd .rd-hubhero--photo .rd-crumbs { color: rgba(255, 255, 255, .75); } .t2s-rd .rd-hubhero--photo .rd-crumbs a { color: rgba(255, 255, 255, .75); } .t2s-rd .rd-hubhero--photo .rd-crumbs a:hover { color: #fff; } .rd-hubhero--photo .rd-crumbs .sep { color: rgba(255, 255, 255, .4); } .rd-hubhero--photo .rd-crumbs .cur { color: #fff; } .rd-hubhero--photo .rd-hubherotitle { color: var(--rd-white); } .rd-hubhero--photo .rd-hubheroeyebrow { color: var(--rd-txt-4); } .rd-hubhero--photo .rd-hubherointro { color: rgba(255, 255, 255, .88); } .rd-hubherotitle { margin: 0; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); / Versaletes llargues ("RETRORREFLECTÓMETRO") quedaven apretades amb el * tracking negatiu de display. / letter-spacing: var(--tr-snug); text-transform: uppercase; max-width: 22ch; text-wrap: balance; } / Diferencial ("Distribuidor oficial T2S"): avantítol, damunt del titular. / .rd-hubheroeyebrow { / Mateix tractament que .rd-eyebrow de secció: versaleta petita amb * tracking obert, en el gris de marca. No competeix amb el titular. / / Mateix aire a banda i banda del titular: 18px amunt i 18px avall. / margin: 0 0 18px; color: var(--rd-txt-3); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tr-caps-sm); text-transform: uppercase; } .rd-hubherointro { margin: 18px 0 0; max-width: 60ch; color: var(--rd-txt-2); font-size: var(--fs-lg); line-height: var(--lh-relaxed); } / Senyals de confiança: llista en línia separada per punts. / .rd-hubheroctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; } / Els dos botons del hero comparteixen caixa i tipografia; el contorn del * secundari va PER DINS (box-shadow inset), així tenen la mateixa alçada. / .t2s-rd .rd-hubherocta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 50px; background: var(--rd-brand); color: var(--rd-white); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; line-height: 1; padding: 15px 30px; border: 0; transition: background .25s ease, box-shadow .25s ease, color .25s ease; } .t2s-rd .rd-hubherocta:hover { background: var(--rd-brand-hover); color: var(--rd-white); } .t2s-rd .rd-hubherocta--ghost { background: transparent; color: var(--rd-ink); box-shadow: inset 0 0 0 1px var(--rd-line-strong, rgba(0, 0, 0, .3)); } .t2s-rd .rd-hubherocta--ghost:hover { background: var(--rd-ink); color: var(--rd-white); box-shadow: inset 0 0 0 1px var(--rd-ink); } / Sobre foto el CTA principal és BLANC (el vermell competia amb la foto) i en * passar-hi el ratolí s'omple de vermell. / .t2s-rd .rd-hubhero--photo .rd-hubherocta:not(.rd-hubherocta--ghost) { background: var(--rd-white); color: var(--rd-ink); } .t2s-rd .rd-hubhero--photo .rd-hubherocta:not(.rd-hubherocta--ghost):hover { background: var(--rd-brand); color: var(--rd-white); } / Sobre foto: el secundari és blanc. / .t2s-rd .rd-hubhero--photo .rd-hubherocta--ghost { color: var(--rd-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); } .t2s-rd .rd-hubhero--photo .rd-hubherocta--ghost:hover { background: var(--rd-white); color: var(--rd-ink); box-shadow: inset 0 0 0 1px var(--rd-white); } / --- 03 USPs (dins del hero) -------------------------------------------- / .rd-usps { padding-block: 32px 0; } / Al hero són icona + text, sense caixa, dins de la columna del titular. / .rd-usps--hero { position: relative; z-index: 2; margin-top: 26px; } / Els quatre en una sola fila: caixa lliure (no graella) i un escaló de cos * menys, que és el que fa que hi càpiguen dins de la columna del titular. / .rd-usps--hero .rd-uspslist { display: flex; flex-wrap: wrap; gap: 12px 26px; } .rd-usps--hero .rd-usp { background: none; border: 0; padding: 0; gap: 9px; white-space: nowrap; font-size: var(--fs-xs); letter-spacing: var(--tr-caps-sm); } .rd-usps--hero .rd-uspi svg { width: 16px; height: 16px; } .rd-hubhero--photo .rd-usps--hero .rd-usp { color: var(--rd-white); } .rd-hubhero--photo .rd-usps--hero .rd-uspi { color: var(--rd-white); } @media (max-width: 599px) { .rd-usps--hero .rd-uspslist { gap: 10px 20px; } } .rd-uspslist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .rd-usp { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--rd-line); border-left: 3px solid var(--rd-brand); padding: 18px 22px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; color: var(--rd-ink); } .rd-uspi { display: inline-flex; color: var(--rd-brand); flex: none; } / --- 04 Graella de subcategories ---------------------------------------- / .rd-subcatsgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .t2s-rd .rd-subcat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rd-line); color: var(--rd-ink); overflow: hidden; } .t2s-rd .rd-subcat:hover { color: var(--rd-ink); border-color: rgba(0, 0, 0, .16); } .rd-subcatph { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; } .rd-subcatph .rd-media, .rd-subcatph .rd-ph { width: 100%; height: 100%; / Packshot sobre blanc: es veu sencer, no retallat. / object-fit: contain; transition: transform .5s ease; } .rd-subcat:hover .rd-subcatph .rd-media { transform: scale(1.04); } .rd-subcatbody { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; flex: 1; border-top: 1px solid var(--rd-line); } .rd-subcatname { display: block; color: var(--rd-ink); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tr-caps-h3); / Partició: la regla única de dalt (salta de línia i, si tota sola no hi * cap, es parteix). / } .rd-subcatdesc { display: block; color: var(--rd-txt-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .rd-subcatmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rd-line); color: var(--rd-txt-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; } .rd-subcatmeta svg { color: var(--rd-brand); transition: transform .25s ease; } .rd-subcat:hover .rd-subcatmeta svg { transform: translateX(4px); } / --- 05 Contingut SEO del hub ------------------------------------------- / / El gap ja el posa la secció de dalt: aquí no cal doble padding. / .rd-hubseo { padding-block: 0; } .rd-seo--hub { margin-top: 0; } / El titular del bloc SEO va en UNA línia: el límit de 760px el partia. / .rd-seo--hub > h2 { max-width: none; } / Guia de selecció per entorn: graella de targetes amb foto, en comptes d'una * taula ampla que ocupava mitja pàgina. / .rd-guide { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 16px 0 4px; } .t2s-rd .rd-guidecard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rd-line); color: var(--rd-ink); overflow: hidden; } .t2s-rd .rd-guidecard:hover { color: var(--rd-ink); border-color: rgba(0, 0, 0, .18); } / Icona en comptes de foto: aquest bloc no ven producte, orienta. / .rd-guidei { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 18px 0 0 18px; color: var(--rd-brand); background: var(--rd-paper); border: 1px solid var(--rd-line); } .rd-guidecard:hover .rd-guidei { background: var(--rd-brand); color: #fff; border-color: var(--rd-brand); } .rd-guidebody { display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 14px; flex: 1; } .rd-guideenv { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-caps-lg); text-transform: uppercase; } .rd-guiderec { display: block; color: var(--rd-txt-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .rd-guidego { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rd-line); color: var(--rd-brand); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; } .rd-guidego svg { transition: transform .25s ease; } .rd-guidecard:hover .rd-guidego svg { transform: translateX(4px); } @media (max-width: 1279px) { .rd-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .rd-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .rd-guide { grid-template-columns: minmax(0, 1fr); } } / Text heretat de la web antiga: cada apartat seu és una secció plegada * (.rd-seofold), sense cap retolet al davant. / .rd-seolegacy { margin-top: 8px; } .rd-seolegacy .rd-seofold:first-of-type { margin-top: 0; } / Text heretat de la web antiga: es conserva, plegat. / .rd-seomore { margin-top: 36px; border-top: 1px solid var(--rd-line); padding-top: 20px; } .rd-seomore > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-brand); list-style: none; } .rd-seomore > summary::-webkit-details-marker { display: none; } .rd-seomore > summary::after { content: " +"; } .rd-seomore[open] > summary::after { content: " –"; } .rd-seomore-in { padding-top: 18px; } / --- 06 Prova social ---------------------------------------------------- / / Secció clara; els logos venen en blanc, així que es passen a negre amb un * filtre (no cal demanar-los una segona versió). / .rd-hubsocial { padding-block: var(--rd-section-y); text-align: center; } .rd-hubsociallabel { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; color: var(--rd-txt-3); margin-bottom: 46px; } .rd-hubsocial .rd-marquee { opacity: 1; } .rd-hubsocial .rd-marqueetrack img { filter: brightness(0); opacity: .48; } .rd-hubsocial .rd-marqueetrack img { max-height: 46px; max-width: 190px; } / El card de FAQ ve just després amb margin-top propi: aquí el traiem perquè * l'espai de sobre i de sota de la banda de logos sigui el mateix. / .rd-hubsocial + .rd-wrap > .rd-faq { margin-top: 0; } / --- Responsiu ---------------------------------------------------------- / @media (max-width: 1279px) { .rd-subcatsgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rd-hubhero--photo .rd-hubherobody { max-width: none; } .rd-hubheroscrim { background: linear-gradient(180deg, rgba(15, 17, 21, .78) 0%, rgba(15, 17, 21, .86) 100%); } .rd-uspslist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-subcatsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 599px) { .rd-hubheroin, .rd-hubhero--photo .rd-hubheroin { padding-block: 22px 52px; } .rd-uspslist { grid-template-columns: minmax(0, 1fr); } .rd-subcatsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-subcatdesc { display: none; } } / ========================================================================== PÀGINA DE SUBCATEGORIA — blocs 01-09 de la diapo Hero compacte, pastilles de filtre, graella de 4 columnes amb distintius de classe, contingut SEO propi i categories germanes. ========================================================================== / / --- 02 Hero compacte ---------------------------------------------------- / .rd-subhero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rd-line); } .rd-subheroin { position: relative; z-index: 2; padding-block: 30px 48px; } .rd-subhero .rd-crumbs { margin-bottom: 26px; } / Amb foto de fons, el mateix tractament que el hero del hub. / .rd-subhero--photo { background: var(--rd-ink); border-bottom: 0; } .rd-subhero--photo > .rd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .rd-subhero--photo .rd-subheroin { padding-block: 34px 56px; } .rd-subhero--photo .rd-subherotitle { color: var(--rd-white); } .rd-subhero--photo .rd-subherointro { color: rgba(255, 255, 255, .88); } .rd-subhero--photo .rd-subherometa { color: var(--rd-white); } .rd-subhero--photo .rd-subherometa svg { color: var(--rd-white); } .t2s-rd .rd-subhero--photo .rd-crumbs, .t2s-rd .rd-subhero--photo .rd-crumbs a { color: rgba(255, 255, 255, .75); } .t2s-rd .rd-subhero--photo .rd-crumbs a:hover { color: #fff; } .rd-subhero--photo .rd-crumbs .sep { color: rgba(255, 255, 255, .4); } .rd-subhero--photo .rd-crumbs .cur { color: #fff; } .rd-subherotitle { margin: 0; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); / Versaletes llargues ("RETRORREFLECTÓMETRO") quedaven apretades amb el * tracking negatiu de display. / letter-spacing: var(--tr-snug); text-transform: uppercase; max-width: 26ch; text-wrap: balance; } .rd-subherointro { margin: 20px 0 0; max-width: 78ch; color: var(--rd-txt-2); font-size: var(--fs-lg); line-height: var(--lh-relaxed); } .rd-subherometa { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; color: var(--rd-ink); } .rd-subherometa li { display: inline-flex; align-items: center; gap: 7px; } .rd-subherometa svg { flex: none; color: var(--rd-brand); } / --- 03 Pastilles de filtre --------------------------------------------- / / Separació respecte del bloc SEO que ve a continuació. / .rd-sublist { padding-top: 36px; padding-bottom: 72px; } .rd-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .rd-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .16); border-radius: 999px; padding: 10px 18px; cursor: pointer; color: var(--rd-ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; transition: background .2s ease, border-color .2s ease, color .2s ease; } .rd-pill:hover { border-color: var(--rd-ink); } .rd-pill.is-on { background: var(--rd-brand); border-color: var(--rd-brand); color: var(--rd-white); } .rd-pilln { font-size: var(--fs-2xs); font-weight: 600; color: var(--rd-txt-3); letter-spacing: 0; } .rd-pill.is-on .rd-pilln { color: rgba(255, 255, 255, .8); } / Filtratge de pastilles: .rd-lcard té display:flex, i un display d'autor guanya * al [hidden] del navegador. Sense aquesta regla, filtrar no amagava res. / .rd-lcard[hidden], .rd-subcat[hidden], .rd-sib[hidden] { display: none !important; } .rd-gridempty { margin: 8px 0 0; color: var(--rd-txt-2); font-size: var(--fs-base); } / --- Distintius de la targeta (classe / LED) ---------------------------- / .rd-lcardbadges { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .rd-lcardbadge { background: var(--rd-brand); color: var(--rd-white); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 4px 8px; } .rd-lcardbadge--led { background: var(--rd-ink); } / --- Taula comparativa dins del text SEO -------------------------------- / .rd-tblwrap { overflow-x: auto; margin: 0 0 20px; } .rd-seo-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; } .rd-seo-tbl th, .rd-seo-tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rd-line); color: var(--rd-txt-2); line-height: var(--lh-relaxed); vertical-align: top; } .rd-seo-tbl thead th { color: var(--rd-ink); font-weight: 700; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; border-bottom: 2px solid var(--rd-ink); } .rd-seo-tbl tbody td:first-child { color: var(--rd-ink); font-weight: 600; } @media (max-width: 1023px) { .rd-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 599px) { .rd-subheroin, .rd-subhero--photo .rd-subheroin { padding-block: 22px 34px; } .rd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-pill { padding: 9px 14px; } } / ========================================================================== FITXA DE PRODUCTE — blocs afegits de la diapo (badges, aplicacions) ========================================================================== / / Fila de categoria + distintius de la fitxa, tot en una línia. / .rd-pdpmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; } .t2s-rd .rd-pdpmeta .rd-pdpeyebrow { margin: 0; } .rd-pdpbadges { display: flex; gap: 8px; margin-bottom: 14px; } .rd-pdpbadge { display: inline-flex; align-items: center; background: var(--rd-brand); color: var(--rd-white); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; padding: 5px 12px; } .rd-pdpbadge--led { background: var(--rd-ink); } .rd-papps { margin-top: 56px; background: #fff; border: 1px solid var(--rd-line); padding: 40px 44px; } .rd-papps h2 { margin: 0 0 24px; font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; } / Quatre quadrats: icona a dalt i text a baix, més gran. / .rd-pappslist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .rd-papp { display: flex; flex-direction: column; gap: 18px; / Ni quadrat ni 4/3: la caixa només ha de donar aire a l'icona i al text. / min-height: 168px; justify-content: space-between; background: #fff; border: 1px solid var(--rd-line); padding: 20px; } .rd-pappi { display: inline-flex; color: var(--rd-brand); } .rd-pappt { color: var(--rd-ink); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-snug); } @media (max-width: 1023px) { .rd-pappslist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .rd-papps { padding: 28px 22px; } .rd-pappslist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-papp { aspect-ratio: auto; } } / Selector d'idioma: entrada d'un idioma encara no traduït (informativa). / .rd-langmenu .rd-langsoon { display: block; padding: 7px 14px; color: var(--rd-txt-4); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; cursor: default; } / ========================================================================== WOOCOMMERCE FUNCIONAL — carret, pagament i compte (.rd-woo) El marcatge és el de WooCommerce (no es reimplementa res): aquí només se li posa el llenguatge visual del rediseny. ========================================================================== / .rd-woo { padding-block: 30px 80px; } .rd-wootitle { margin: 0 0 28px; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); / Versaletes llargues ("RETRORREFLECTÓMETRO") quedaven apretades amb el * tracking negatiu de display. / letter-spacing: var(--tr-snug); text-transform: uppercase; } / --- Avisos de Woo ------------------------------------------------------- / .rd-woo .woocommerce-message, .rd-woo .woocommerce-error, .rd-woo .woocommerce-info, .rd-woo .woocommerce-notice { list-style: none; margin: 0 0 24px; padding: 16px 20px; background: #fff; border: 1px solid var(--rd-line); border-left: 3px solid var(--rd-brand); color: var(--rd-ink); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rd-woo .woocommerce-error { border-left-color: #b70e0c; } .rd-woo .woocommerce-error li { list-style: none; } / --- Camps i botons ----------------------------------------------------- / .rd-woo input[type="text"], .rd-woo input[type="email"], .rd-woo input[type="password"], .rd-woo input[type="tel"], .rd-woo input[type="number"], .rd-woo input[type="search"], .rd-woo select, .rd-woo textarea { width: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, .16); border-radius: 0; padding: 12px 14px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--fs-base); color: var(--rd-ink); } .rd-woo input:focus, .rd-woo select:focus, .rd-woo textarea:focus { outline: 2px solid var(--rd-brand); outline-offset: 1px; } .rd-woo label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; color: var(--rd-txt-2); } .rd-woo .form-row, .rd-woo p.form-row { margin: 0 0 18px; } .rd-woo .woocommerce-form__label-for-checkbox, .rd-woo label.checkbox { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-sm); } .t2s-rd .rd-woo .button, .t2s-rd .rd-woo button[type="submit"], .t2s-rd .rd-woo input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; background: var(--rd-brand); color: var(--rd-white); border: 0; border-radius: 0; cursor: pointer; padding: 14px 28px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; transition: background .25s ease; width: auto; } .t2s-rd .rd-woo .button:hover, .t2s-rd .rd-woo button[type="submit"]:hover, .t2s-rd .rd-woo input[type="submit"]:hover { background: var(--rd-brand-hover); color: var(--rd-white); } / Botó secundari: "Actualizar carrito" i "Aplicar cupón" no competeixen amb el * CTA de finalitzar la compra. / .t2s-rd .rd-woo button[name="update_cart"], .t2s-rd .rd-woo button[name="apply_coupon"], .t2s-rd .rd-woo .button[name="apply_coupon"] { background: #fff; color: var(--rd-ink); border: 1px solid rgba(0, 0, 0, .2); } .t2s-rd .rd-woo button[name="update_cart"]:hover, .t2s-rd .rd-woo button[name="apply_coupon"]:hover { background: var(--rd-ink); color: var(--rd-white); } .t2s-rd .rd-woo button[disabled] { opacity: .45; cursor: not-allowed; } / --- Taules (carret, comandes, descàrregues) ---------------------------- / .rd-woo table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rd-line); } .rd-woo table.shop_table th, .rd-woo table.shop_table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--rd-line); font-size: var(--fs-sm); color: var(--rd-txt-2); vertical-align: middle; } .rd-woo table.shop_table thead th { color: var(--rd-ink); font-weight: 700; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; font-size: var(--fs-xs); border-bottom: 2px solid var(--rd-ink); } .rd-woo table.shop_table td.product-name a { color: var(--rd-ink); font-weight: 700; letter-spacing: var(--tr-snug); } .t2s-rd .rd-woo table.shop_table td.product-name a:hover { color: var(--rd-brand); } .rd-woo table.shop_table td.product-thumbnail img { width: 72px; height: auto; } .rd-woo table.shop_table td.product-subtotal, .rd-woo table.shop_table td.product-price { color: var(--rd-ink); font-weight: 700; } .t2s-rd .rd-woo a.remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid rgba(0, 0, 0, .16); color: var(--rd-txt-3); font-size: 16px; line-height: 1; text-decoration: none; } .t2s-rd .rd-woo a.remove:hover { background: var(--rd-brand); border-color: var(--rd-brand); color: #fff; } .rd-woo .quantity input.qty { width: 78px; text-align: center; padding: 10px 6px; } .rd-woo table.shop_table td.actions { padding: 20px 18px; background: var(--rd-paper); border-bottom: 0; } .rd-woo .coupon { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .rd-woo .coupon input#coupon_code { width: auto; min-width: 200px; } / --- Layout de carret: taula + totals ----------------------------------- / body.woocommerce-cart .rd-woobody { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: start; } / El shortcode embolcalla tot dins de .woocommerce: es promou a graella i es * col·loca cada peça, perquè el contenidor d'avisos (sovint buit) no ocupi una * cel·la i desplaci la taula. / body.woocommerce-cart .rd-woobody > .woocommerce { display: contents; } body.woocommerce-cart .rd-woo .woocommerce-notices-wrapper { grid-column: 1 / -1; } body.woocommerce-cart .rd-woo .woocommerce-cart-form { grid-column: 1; grid-row: 2; } body.woocommerce-cart .rd-woo .cart-collaterals { grid-column: 2; grid-row: 2; } .rd-woo .cart-collaterals { width: 100%; } .rd-woo .cart_totals { background: #fff; border: 1px solid var(--rd-line); padding: 26px 28px; } .rd-woo .cart_totals h2 { margin: 0 0 18px; font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-woo .cart_totals table.shop_table { border: 0; } .rd-woo .cart_totals table.shop_table th, .rd-woo .cart_totals table.shop_table td { padding: 12px 0; } .rd-woo .cart_totals tr.order-total td { color: var(--rd-ink); font-size: var(--fs-h3); font-weight: 800; } .rd-woo .wc-proceed-to-checkout { margin-top: 18px; } .t2s-rd .rd-woo .wc-proceed-to-checkout .button { width: 100%; } / --- Compte: navegació lateral + contingut ------------------------------ / body.woocommerce-account .rd-woobody { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; } body.woocommerce-account .rd-woobody > .woocommerce { display: contents; } body.woocommerce-account .rd-woo .woocommerce-notices-wrapper { grid-column: 1 / -1; } body.woocommerce-account .rd-woo .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; } body.woocommerce-account .rd-woo .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; } / Accés sense sessió: el bloc de formularis ocupa tot l'ample. / body.woocommerce-account .rd-woo .u-columns, body.woocommerce-account .rd-woo form.woocommerce-form-login, body.woocommerce-account .rd-woo form.woocommerce-form-register { grid-column: 1 / -1; grid-row: 2; } .rd-woo .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--rd-line); } .rd-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .rd-woo .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--rd-line); } .t2s-rd .rd-woo .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 20px; color: var(--rd-ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tr-caps-sm); text-transform: uppercase; } .t2s-rd .rd-woo .woocommerce-MyAccount-navigation li a:hover { background: var(--rd-paper); color: var(--rd-brand); } .rd-woo .woocommerce-MyAccount-navigation li.is-active a { background: var(--rd-brand); color: var(--rd-white); } .t2s-rd .rd-woo .woocommerce-MyAccount-navigation li.is-active a { color: var(--rd-white); } .rd-woo .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--rd-line); padding: 32px 34px; } .rd-woo .woocommerce-MyAccount-content p, .rd-woo .woocommerce-MyAccount-content li { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); } / Accés / registre: dues columnes de formulari / .rd-woo .u-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .rd-woo .u-column1, .rd-woo .u-column2 { background: #fff; border: 1px solid var(--rd-line); padding: 30px 32px; width: auto; float: none; } .rd-woo .u-columns h2, .rd-woo form.woocommerce-form > h2 { margin: 0 0 20px; font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tr-tight); } .rd-woo .woocommerce-form-login__rememberme { text-transform: none; } .rd-woo .lost_password { margin-top: 12px; font-size: var(--fs-sm); } / --- Pagament ----------------------------------------------------------- / body.woocommerce-checkout .rd-woo .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } body.woocommerce-checkout .rd-woo .col-1, body.woocommerce-checkout .rd-woo .col-2 { width: auto; float: none; } .rd-woo #order_review, .rd-woo #customer_details { background: #fff; border: 1px solid var(--rd-line); padding: 28px 30px; margin-top: 24px; } .rd-woo h3#order_review_heading, .rd-woo #customer_details h3 { margin: 0 0 18px; font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tr-tight); } / --- Carret buit -------------------------------------------------------- / .rd-wooempty { background: #fff; border: 1px solid var(--rd-line); padding: 40px 44px; text-align: center; } .rd-wooempty p { margin: 0 0 22px; color: var(--rd-txt-2); font-size: var(--fs-lg); } .rd-wooempty-ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; align-items: center; } / Woo pinta el seu propi missatge de carret buit: el nostre bloc ja el diu. / body.woocommerce-cart .rd-woo .cart-empty { display: none; } body.woocommerce-cart .rd-woo .return-to-shop { display: none; } @media (max-width: 1023px) { body.woocommerce-cart .rd-woobody, body.woocommerce-account .rd-woo__body { grid-template-columns: minmax(0, 1fr); } .rd-woo .u-columns, body.woocommerce-checkout .rd-woo .col2-set { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .rd-woo table.shop_table td.product-thumbnail { display: none; } .rd-woo table.shop_table th, .rd-woo table.shop_table td { padding: 12px 10px; } } / ========================================================================== PÀGINA GENÈRICA (legals, privacitat, cookies…) — mateix ample que la resta ========================================================================== / .rd-page { padding-block: 30px 80px; } .rd-pagetitle { margin: 0 0 32px; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); / Versaletes llargues ("RETRORREFLECTÓMETRO") quedaven apretades amb el * tracking negatiu de display. / letter-spacing: var(--tr-snug); text-transform: uppercase; } .rd-prose { background: #fff; border: 1px solid var(--rd-line); padding: 48px 52px; max-width: 92ch; } .rd-prose h2, .rd-prose h3 { margin: 36px 0 14px; font-weight: 700; letter-spacing: var(--tr-caps-h3); text-transform: uppercase; } .rd-prose h2 { font-size: var(--fs-h2); } .rd-prose h3 { font-size: var(--fs-h3); } .rd-prose h2:first-child, .rd-prose h3:first-child { margin-top: 0; } .rd-prose p, .rd-prose li { color: var(--rd-txt-2); font-size: var(--fs-base); line-height: var(--lh-body); } .rd-prose p { margin: 0 0 16px; } .rd-prose ul, .rd-prose ol { margin: 0 0 20px; padding-left: 22px; } .rd-prose li { margin-bottom: 8px; } .rd-prose strong { color: var(--rd-ink); } .rd-prose img { height: auto; margin: 22px 0; } .rd-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; } .rd-prose th, .rd-prose td { padding: 12px 14px; border-bottom: 1px solid var(--rd-line); text-align: left; font-size: var(--fs-sm); } @media (max-width: 767px) { .rd-prose { padding: 28px 22px; } } / El llistat del hub ja va dins d'una secció amb padding: el .rd-shop no n'hi * ha d'afegir més. / .rd-shop--hub { padding-block: 0; } / Sense filtres útils no es pinta la columna: la graella ocupa tot l'ample i * puja a quatre columnes en comptes de deixar un buit a l'esquerra. / .rd-shop--nofilters { grid-template-columns: minmax(0, 1fr); } .rd-shop--nofilters .rd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023px) { .rd-shop--nofilters .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } / CTA amb el botó a l'ESQUERRA, just sota el paràgraf (hub, subcategoria i * fitxa). El CTA de la home manté el botó a la dreta. / / Text a dalt i botó al peu, amb el mateix padding per tots costats. / .rd-cta--left { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; padding: 56px; } .rd-cta--left .rd-ctaactions { align-self: end; } .rd-cta--left .rd-ctaactions { flex-direction: row; align-items: flex-start; justify-content: flex-start; margin-top: 26px; } .rd-cta--left .rd-ctaactions > { min-width: 0; } .rd-cta--left .rd-ctabody { max-width: 720px; } /* Bloc SEO: seccions de consulta plegades, per no deixar un mur de text. * El
porta el mateix H3 de sempre (el contingut segueix al HTML). / .rd-seofold { border-top: 1px solid var(--rd-line); margin-top: 28px; } .rd-seofold > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 20px 0 18px; list-style: none; } .rd-seofold > summary::-webkit-details-marker { display: none; } .rd-seofold > summary > h3 { margin: 0; } .rd-seofold > summary::after { content: "+"; flex: none; color: var(--rd-brand); font-size: 22px; font-weight: 700; line-height: 1; } .rd-seofold[open] > summary::after { content: "–"; } .rd-seofold-in { padding-bottom: 8px; } / Línia de lectura còmoda al cos del bloc SEO. / .rd-seo--hub > p, .rd-seo--hub .rd-seofold-in p, .rd-seo--hub .rd-seo-list > li { max-width: 88ch; } / Classes de norma (EN ISO 20471…): fitxa curta per classe en comptes d'una * llista de tres pics amb una línia i mitja de text cada un. / .rd-clases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 24px; } .rd-clase { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; background: var(--rd-paper); } .rd-clasen { font-size: var(--fs-h3); font-weight: 800; letter-spacing: var(--tr-caps-lg); text-transform: uppercase; color: var(--rd-ink); } .rd-clasem { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); color: var(--rd-ink); } .rd-claseuse { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--rd-txt-2); } @media (max-width: 767px) { .rd-clases { grid-template-columns: minmax(0, 1fr); } } / Facetes de client dins del panell lateral: botons amb el mateix aspecte que * els enllaços de filtre. / .t2s-rd .rd-flist .rd-fbtn { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--rd-ink); cursor: pointer; text-align: left; font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-normal); } .t2s-rd .rd-flist .rd-fbtn > span:first-child { flex: 1; min-width: 0; } .t2s-rd .rd-flist .rd-fbtn:hover { background: var(--rd-paper); } .t2s-rd .rd-flist .rd-fbtn.is-on { background: var(--rd-paper); font-weight: 700; color: var(--rd-brand); } .t2s-rd a.rd-pdpeyebrow:hover { color: var(--rd-brand-hover); text-decoration: underline; } / Secció de vídeo de la fitxa. Només existeix si el producte té vídeo. / .rd-pvideo { margin-top: 56px; background: #fff; border: 1px solid var(--rd-line); padding: 40px 44px; } .rd-pvideo h2 { margin: 0 0 24px; font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; } .rd-pvideolist { display: grid; gap: 18px; } @media (max-width: 767px) { .rd-pvideo { padding: 28px 22px; } } / Vídeos i incrustacions dins de text: sempre a l'ample del bloc que els conté * (venien amb la mida intrínseca del fitxer i quedaven petits i descentrats). / .rd-prose video, .rd-prose iframe, .rd-prose embed, .rd-prose object, .rd-seo video, .rd-seo iframe, .rd-tabspanel video, .rd-tabspanel iframe, .rd-seomore-in video, .rd-seomore-in iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 24px 0; border: 0; background: var(--rd-ink); } / Àudio i incrustacions que no són de vídeo no han de portar proporció fixa. / .rd-prose audio { display: block; width: 100%; margin: 20px 0; } / Selector d'idioma a la barra superior (fons fosc). / .rd-topbarpromo { margin-right: auto; } .rd-lang--top { margin-left: 4px; } .t2s-rd .rd-lang--top .rd-langbtn { color: rgba(255, 255, 255, .82); } .t2s-rd .rd-lang--top .rd-langbtn:hover { color: var(--rd-white); } .rd-lang--top .rd-langmenu { right: 0; left: auto; } / ========================================================================== PORTADA D'ARTICLE — mateixa gramàtica que el hero del hub ========================================================================== / .rd-arthero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rd-line); } .rd-artheroin { position: relative; z-index: 2; padding-block: 30px 52px; } .rd-arthero .rd-crumbs { margin-bottom: 40px; } .rd-artherobody { max-width: 900px; } .rd-artherocat { margin: 0 0 14px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--rd-brand); } .rd-artherot { margin: 0; font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tr-snug); text-transform: uppercase; text-wrap: balance; } .rd-artherometa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; font-size: var(--fs-sm); color: var(--rd-txt-2); } .rd-artheroauthor { font-weight: 700; color: var(--rd-ink); } .rd-artherometa .sep { color: var(--rd-txt-4); } / Amb foto: fons fosc i text en blanc. / .rd-arthero--photo { background: var(--rd-ink); border-bottom: 0; } .rd-arthero--photo > .rd-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .rd-arthero--photo .rd-artheroin { padding-block: 34px 64px; } .rd-arthero--photo .rd-artherot { color: var(--rd-white); } .rd-arthero--photo .rd-artherocat { color: #ff6a5d; } .rd-arthero--photo .rd-artherometa { color: rgba(255, 255, 255, .82); } .rd-arthero--photo .rd-artheroauthor { color: var(--rd-white); } .t2s-rd .rd-arthero--photo .rd-crumbs, .t2s-rd .rd-arthero--photo .rd-crumbs a { color: rgba(255, 255, 255, .75); } .t2s-rd .rd-arthero--photo .rd-crumbs a:hover { color: #fff; } .rd-arthero--photo .rd-crumbs .sep { color: rgba(255, 255, 255, .4); } .rd-arthero--photo .rd-crumbs .cur { color: #fff; } / El cos de l'article ja no necessita la capçalera clara de dalt. / .rd-article { padding-top: 40px; } @media (max-width: 599px) { .rd-artheroin, .rd-arthero--photo .rd-artheroin { padding-block: 22px 40px; } } / ========================================================================== MÒBIL · ajustos que han d'anar al FINAL Els components definits més avall al full (.rd-cta--left) guanyarien per ordre de font, encara que l'altra regla vagi dins d'una media query. ========================================================================== / @media (max-width: 700px) { .rd-cta, .rd-cta--left { padding: 26px 20px; gap: 18px; min-height: 0; } .rd-cta--left .rd-ctaactions { margin-top: 16px; } / Prova social: menys aire entre la nota i les ressenyes. / .rd-reviews { gap: 22px; } .rd-reviewsgrid { gap: 14px; } } / ========================================================================== MÒBIL · farciments dels blocs de contingut A 320px la caixa útil fa 284px: un farciment lateral de 52px hi deixava 180px de text. Aquests blocs surten a totes les pàgines (catàleg, fitxa, article, carret, legals), no només a la home. ========================================================================== / @media (max-width: 700px) { .rd-aboutbody { padding: 26px 20px; } .rd-seo { padding: 26px 20px; } .rd-seocta { padding: 20px; } .rd-faq { padding: 26px 20px; } .rd-endcta { padding: 26px 20px; } .rd-papps { padding: 24px 20px; } .rd-pvideo { padding: 24px 20px; } .rd-prose { padding: 26px 20px; } .rd-woo .cart-empty, .rd-wooempty { padding: 24px 20px; } / Taules de dades (fitxa tècnica, article, carret): si no hi caben, scroll * pròpia, mai empenyent la pàgina. / .rd-tabspanel table, .rd-pdp__excerpt table, .rd-prose table, .rd-woo table.shop_table, .rd-woo .cart_totals table { display: block; overflow-x: auto; max-width: 100%; } } / ========================================================================== MÒBIL ESTRET (≤479px) · targeta de producte A dues columnes la targeta fa 133px: el preu i el botó d'afegir no hi caben a la mateixa línia i el botó quedava tallat per la vora de la card. ========================================================================== */ @media (max-width: 479px) { .rd-lcardfoot, .rd-pcardfoot { flex-wrap: wrap; gap: 8px; } .rd-lcardprice, .rd-pcardprice { font-size: var(--fs-base); } }