/* ============================================================= Portada en arabe (/ar/) — tipografia y direccion de derecha a izquierda Solo se carga en /ar/, detras de inicio.css. La pagina llega con (lo pone el mu-plugin harmony-idioma.php), asi que flex, grid y text-align:start ya se dan la vuelta solos. Aqui va solo lo que no se da la vuelta solo: flechas, degradados, la composicion del hero y las posiciones absolutas. Fuentes autoalojadas (SIL Open Font License), subconjunto arabe: Amiri para titulares, IBM Plex Sans Arabic para el texto. Las letras latinas (Harmony, los nombres de las velas) caen a Cormorant y Jost, las mismas de la version en castellano. ============================================================= */ @font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-arabe.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/plex-sans-arabe-300.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-arabe-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Tipografia ---------------------------------------------------- */ [dir="rtl"] .harmony-v6 { font-family: "IBM Plex Sans Arabic", "Jost", system-ui, sans-serif; font-size: 16px; line-height: 1.9; } [dir="rtl"] .harmony-v6 :is(h1, h2, h3), [dir="rtl"] :is(.v6-universo__nombre, .v6-universo__lema, .v6-seleccion__nombre, .v6-argan__nombre, .v6-miel__nombre, .v6-pausa__frase) { font-family: "Amiri", "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: 0; line-height: 1.4; } /* El arabe no tiene cursiva: inclinar la escritura la deforma. El contraste de la segunda linea se hace solo con el color. */ [dir="rtl"] .harmony-v6 em, [dir="rtl"] .v6-universo__lema { font-style: normal; } /* El espaciado entre letras rompe la escritura ligada y las mayusculas no existen: fuera en todo lo que no sea el logotipo latino. */ [dir="rtl"] .harmony-v6 :where(*):not(.v6-logo, .v6-logo *) { letter-spacing: 0 !important; text-transform: none !important; } /* Lo que en castellano va en versalitas de 11 px, en arabe se lee pequeno: se sube un punto. */ [dir="rtl"] :is(.v6-eyebrow, .v6-rotulo h2, .v6-universo__incluye, .v6-universos__mas, .v6-argan__para, .v6-miel__origen, .v6-pausa__marca, .v6-confianza__lista, .v6-seleccion__precio) { font-size: 14px; } [dir="rtl"] .v6-boton { font-size: 15px; padding-block: 13px; } [dir="rtl"] .v6-nav a, [dir="rtl"] .v6-barra { font-size: 14px; } [dir="rtl"] .v6-pie__col, [dir="rtl"] .v6-pie__rotulo { font-size: 14px; } [dir="rtl"] .v6-pase__lede, [dir="rtl"] .v6-editorial__texto p:not(.v6-eyebrow), [dir="rtl"] .v6-relato__texto p:not(.v6-eyebrow), [dir="rtl"] .v6-argan__texto > p:not(.v6-eyebrow) { font-size: 16.5px; line-height: 1.95; } /* Hero: cada linea del titular va en una caja con overflow oculto para la entrada. Los puntos y las colas del arabe bajan mas que el latin y se cortaban. */ [dir="rtl"] .v6-pase__texto h1 { line-height: 1.35; } [dir="rtl"] .v6-linea { padding-block: .06em .12em; } /* Flechas ------------------------------------------------------- */ [dir="rtl"] .v6-boton span[aria-hidden], [dir="rtl"] .v6-universo__incluye span[aria-hidden], [dir="rtl"] .v6-argan__flecha { display: inline-block; transform: scaleX(-1); } [dir="rtl"] .v6-boton:hover span[aria-hidden], [dir="rtl"] .v6-universo a:hover .v6-universo__incluye span[aria-hidden] { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .v6-argan__camino:hover .v6-argan__flecha { transform: scaleX(-1) translateX(6px); } /* Hero: composicion en espejo ------------------------------------ */ /* El grid ya pone el texto a la derecha y la escena a la izquierda. Las orbitas de las abejas estan dibujadas en coordenadas fijas alrededor de los productos, asi que la capa de vuelo se refleja entera. Las fotos no se reflejan (las etiquetas saldrian del reves): se mueven de sitio, para que cada producto siga dentro de su orbita. */ [dir="rtl"] .v6-vuelo { transform: scaleX(-1); } [dir="rtl"] .v6-client-trio__item--0 { left: auto; right: 3%; } [dir="rtl"] .v6-client-trio__item--1 { left: auto; right: 35%; } [dir="rtl"] .v6-client-trio__item--2 { right: auto; left: 5%; } @media (min-width: 1240px) { [dir="rtl"] .v6-pase__escena { padding-right: revert; padding-left: 0; } } /* Pausa --------------------------------------------------------- */ [dir="rtl"] .v6-pausa::after { background: linear-gradient(270deg, rgba(20, 24, 16, .78) 0%, rgba(20, 24, 16, .55) 38%, rgba(20, 24, 16, 0) 68%); } [dir="rtl"] .v6-pausa__fondo img { object-position: 30% 30%; } @media (max-width: 719px) { [dir="rtl"] .v6-pausa::after { background: linear-gradient(180deg, rgba(20, 24, 16, 0) 22%, rgba(20, 24, 16, .72) 52%, rgba(20, 24, 16, .94) 78%); } [dir="rtl"] .v6-pausa__fondo img { object-position: 30% 20%; } } /* Telefono, correo e Instagram van en : sin eso el +34 y la arroba se colocan al otro extremo de la linea. */ [dir="rtl"] .v6-pie bdi { unicode-bidi: isolate; }