/* Theme Name: Giraffe Collective Theme URI: https://giraffecollective.cl Description: La cara de Giraffe Collective. Tema hijo de Twenty Twenty-Five con la paleta, las tipografías y la portada que diseñó Elisa. Author: Bardo Design SpA Template: twentytwentyfive Version: 1.30.1 Text Domain: giraffe */ /* ------------------------------------------------------------------ base * Tipografías: las mismas de bardodesign.cl. Poppins para todo lo que sea * título o rótulo (en versales y con la letra separada, como allá), y * Questrial para el texto corrido y la interfaz. */ /* La paleta cambió en septiembre de 2026: el café oscuro dio paso al burdeo del logo con el ocre como acento, y la portada pasó a tener de fondo la textura acuarelada de piel de jirafa. Los nombres viejos —`--gc-cafe`, `--gc-cafe-mid`— siguen existiendo y ahora apuntan al burdeo. Son unas ciento veinte reglas repartidas por todo el archivo: renombrarlas de una sola vez era la forma más segura de que algo quedara sin cambiar y nadie lo notara hasta verlo en la tienda. Los nombres nuevos son los que hay que usar de acá en adelante. */ :root{ --gc-tinto:#7A1C2F; /* el burdeo del logo: barra, pie y títulos */ --gc-tinto-hondo:#5E1523; --gc-ocre:#B4691C; /* el acento: botones y filetes */ --gc-ocre-hondo:#95560F; --gc-arena:#E9DCCC; /* el beige de la textura, para el fondo */ --gc-celeste:#C9D3D5; /* la banda de «cómo vender» */ --gc-crema:#F6F0E9; /* la banda de Instagram */ --gc-dorado:#D0891F; /* el filete y la línea que invita a hacer clic */ --gc-cafe:var(--gc-tinto); /* barra superior y pie */ --gc-cafe-mid:var(--gc-tinto); /* títulos */ --gc-cafe-soft:#8A6552; --gc-menta:#C8D2D1; --gc-gris:#E9E9E9; --gc-hueso:#FBFAF8; --gc-tinta:#1E1B19; --gc-tinta-2:#5A544F; --gc-linea:#DAD5CF; --gc-display:"Poppins", "Questrial", Helvetica, Arial, sans-serif; --gc-texto:"Questrial", "Poppins", Helvetica, Arial, sans-serif; } body{ font-family:var(--gc-texto); color:var(--gc-tinta); background:var(--gc-hueso); } h1,h2,h3,h4,.gc-display{ font-family:var(--gc-display); font-weight:400; letter-spacing:.06em; text-transform:uppercase; text-wrap:balance; } /* ---------------------------------------------------------- ancho total * WordPress mete el contenido de la página en una columna angosta. Las * bandas de la portada tienen que romper esa columna y tomar el ancho * completo de la pantalla, o la portada se ve encajonada. * El calc(50% - 50vw) es el truco clásico: corre el bloque hasta el borde * sin importar en qué contenedor esté metido. * * OJO: nada de `width:100vw`. La unidad vw incluye el ancho de la barra de * desplazamiento, así que el bloque queda unos píxeles más ancho que la * pantalla y aparece una barra horizontal. Con solo los márgenes negativos * el ancho lo calcula el navegador y siempre calza. */ .gc-barra, .gc-portada, .gc-seccion, .gc-marcas, .gc-vender, .gc-instagram, .gc-pie{ max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } html, body{overflow-x:hidden} /* La portada no lleva título de página: el logo ya dice cómo se llama. */ body.home .wp-block-post-title{display:none} /* Las bandas de la portada van pegadas, sin aire entre medio. * * WordPress separa los bloques de primer nivel con su `blockGap` —unos 19px— * y como cada banda es una franja de color a ancho completo, ese espacio se * veía como una línea blanca cruzando la pantalla: una bajo la barra burdeo y * otra entre el filete ocre y la banda menta. No era un borde mal puesto, * era el fondo de la página asomándose entre dos bloques. */ /* La barra y el pie son «partes de plantilla», y WordPress les deja el mismo espacio de bloque por fuera: eso dejaba una línea blanca encima del pie burdeo en TODAS las páginas, no solo en la portada. */ .wp-block-template-part{margin-block-start:0} body.home main{padding-top:0;margin-top:0} body.home .wp-block-post-content{margin-top:0} body.home .wp-block-post-content > *{margin-block-start:0} /* -------------------------------------------------------- barra superior * Delgada, con el logo grande. A la izquierda la hamburguesa pegada al * logo; a la derecha, solo el carrito. */ .gc-barra{ background:var(--gc-cafe); padding:6px 26px; } .gc-barra-in{ max-width:1600px;margin:0 auto; display:flex;align-items:center;gap:18px; } /* El logotipo completo es una tira larga y baja: a la altura del anterior —42px— ocuparía casi trescientos píxeles de barra. A 26px mide lo mismo de ancho que antes y se lee igual. */ .gc-barra .gc-logo{height:44px;width:auto;display:block} .gc-barra a{ color:#fff;text-decoration:none; font-family:var(--gc-display);font-size:12px; letter-spacing:.14em;text-transform:uppercase; } .gc-barra a:hover{text-decoration:underline;text-underline-offset:5px} .gc-carro{margin-left:auto} .gc-hamburguesa{ background:none;border:0;padding:6px 4px;cursor:pointer; display:flex;flex-direction:column;gap:5px; } .gc-hamburguesa span{ display:block;width:24px;height:1.5px;background:#fff;transition:transform .2s; } .gc-hamburguesa:hover span{background:var(--gc-menta)} /* ------------------------------------------------------- menú lateral */ .gc-velo{ position:fixed;inset:0;background:rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .28s;z-index:9998; } /* El menú va al revés que la barra: fondo blanco y letra burdeo. Una cortina burdeo de 370px sobre la pantalla pesaba demasiado —era el color más fuerte de la marca ocupando media pantalla— y las marcas en dos columnas sobre ese fondo costaban de leer. En blanco, el color queda para la barra y para lo que hay que mirar. */ .gc-panel{ position:fixed;top:0;bottom:0;left:0;width:min(370px,86vw); background:#fff;color:var(--gc-tinto);z-index:9999; transform:translateX(-100%);transition:transform .28s ease; padding:26px 32px 48px;overflow-y:auto; box-shadow:0 0 40px rgba(0,0,0,.14); } body.gc-abierto .gc-velo{opacity:1;pointer-events:auto} body.gc-abierto .gc-panel{transform:none} .gc-panel-cerrar{ background:none;border:0;color:var(--gc-tinto);font-size:26px;line-height:1; cursor:pointer;padding:0;margin-bottom:26px; } .gc-panel h3{ font-size:11px;letter-spacing:.2em;color:var(--gc-ocre-hondo); margin:30px 0 12px;font-weight:400; } .gc-panel ul{list-style:none;margin:0;padding:0} .gc-panel li{margin:0 0 13px} .gc-panel a{ color:var(--gc-tinto);text-decoration:none;font-family:var(--gc-texto); font-size:15px;letter-spacing:.02em; } .gc-panel a:hover{color:var(--gc-ocre-hondo)} /* El `> li > a` es lo que separa las entradas del menú de lo que cuelga de ellas. Sin esa restricción, las once categorías y las cuarenta marcas —que ahora viven DENTRO de esta lista— heredaban la letra de ROPA y salían en versales de 15px: una pared de mayúsculas. */ .gc-panel .gc-panel-grande > li > a{ font-family:var(--gc-display);font-size:15px; letter-spacing:.12em;text-transform:uppercase; } /* Las marcas, en dos columnas y en orden. En una sola tira que se envuelve sola quedaban filas de anchos distintos y se leían como una lista desordenada, aunque estuvieran alfabéticas. */ .gc-panel-marcas{ display:grid;grid-template-columns:1fr 1fr; gap:7px 18px;align-items:start; } /* Los nombres de adentro van un punto más chicos que las entradas del menú: son una lista para buscar, no para leer de corrido, y así la columna de cuarenta marcas cabe sin volverse una pared. */ .gc-panel-marcas a{font-size:12.5px;line-height:1.3} .gc-panel-pie{ margin-top:34px;padding-top:22px;border-top:1px solid var(--gc-linea); font-size:13px;color:var(--gc-tinta-2); } .gc-panel-pie a{font-size:13px} /* -------------------------------------------------------------- portada */ /* El fondo es la textura acuarelada de jirafa, repetida. * * La imagen viene hecha para calzar consigo misma, así que se repite sin * costura y basta un cuadro de 1000px para cubrir cualquier pantalla. El * `background-size` es lo que fija el tamaño de las manchas: a 700px se ven * del porte que tienen en el diseño, ni estampado chico ni manchones. * * El filete ocre de abajo no es decoración suelta: es lo que separa la * portada de la banda de categorías, que ahora es menta. Sin él los dos * fondos se tocan y el corte queda blando. */ .gc-portada{ background:var(--gc-arena) url(assets/giraffe-textura-acuarela.jpg) repeat; background-size:540px auto; border-bottom:9px solid var(--gc-ocre); overflow:hidden; } /* Sin caja: las jirafas llegan hasta los bordes de la pantalla. */ .gc-portada-in{ max-width:none;margin:0; display:grid;grid-template-columns:1fr minmax(280px,520px) 1fr; align-items:end;gap:0; } .gc-jirafa{width:100%;height:auto;display:block} .gc-jirafa-izq{justify-self:start;max-width:min(460px,30vw)} .gc-jirafa-der{justify-self:end;max-width:min(480px,31vw)} .gc-portada-centro{text-align:center;padding:64px 16px 48px} .gc-logo-portada{width:100%;max-width:430px;height:auto;margin:0 auto} /* La bajada iba en 12px, con mucho espaciado entre letras y a veinte píxeles del logotipo: sobre la textura se perdía y parecía un pie de foto suelto. Ahora es más grande, más gruesa y va pegada al nombre, que es donde se lee como lo que es: la frase de la marca. */ .gc-bajada{ font-family:var(--gc-display);font-weight:500; font-size:clamp(13px,1.15vw,15px);letter-spacing:.18em;text-transform:uppercase; color:var(--gc-tinto);margin:4px 0 26px; } /* botones — en ocre, que es el acento de la marca. El burdeo queda para la barra, el pie y los títulos: si el botón fuera del mismo color que la barra, dejaría de verse como algo en qué hacer clic. */ .gc-btn{ display:inline-block;background:var(--gc-ocre);color:#fff; text-decoration:none;padding:14px 34px;border-radius:2px; font-family:var(--gc-display);font-size:12px; letter-spacing:.16em;text-transform:uppercase; border:1px solid var(--gc-ocre);transition:background .15s; } .gc-btn:hover{background:var(--gc-ocre-hondo);border-color:var(--gc-ocre-hondo);color:#fff} .gc-btn.gc-borde{background:transparent;color:var(--gc-ocre-hondo)} .gc-btn.gc-borde:hover{background:var(--gc-ocre);border-color:var(--gc-ocre);color:#fff} /* El botón grande: el mismo botón, con más aire. El color va repetido a propósito —ver la nota de `.gc-grande` más abajo—: sin él la letra del botón de Instagram quedaba café sobre café y solo aparecía al pasar el mouse por encima. */ .gc-btn.gc-grande{ font-size:15px;letter-spacing:.18em;padding:18px 46px; color:#fff;background:var(--gc-ocre);border-bottom:0; } /* El de Instagram cierra la página y va en burdeo, igual que el pie que viene justo abajo. */ .gc-instagram .gc-btn{background:var(--gc-tinto);border-color:var(--gc-tinto)} .gc-instagram .gc-btn:hover{background:var(--gc-tinto-hondo);border-color:var(--gc-tinto-hondo)} .gc-btn.gc-grande:hover{color:#fff} /* ----------------------------------------------------------- categorías */ /* La banda de categorías va en menta, como en el diseño: las jirafas vestidas están recortadas sobre fondo claro y necesitan un color plano detrás para no quedar flotando sobre el blanco de la página. */ /* El velo blanco encima del microcemento. La foto del muro sola quedaba oscura para una banda que tiene que hacer de fondo: las jirafas vestidas, que son casi todas claras, competían con el cemento en vez de destacarse. El velo lo aclara sin borrar el relieve. */ .gc-seccion{ padding:56px 24px 64px; background: linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)), var(--gc-arena) url(assets/giraffe-microcemento.jpg) center/cover no-repeat; } .gc-seccion-in{max-width:1400px;margin:0 auto} .gc-titulo-seccion{ font-family:var(--gc-display); font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--gc-tinta-2);margin:0 0 28px;text-align:center; } .gc-categorias{ display:grid;grid-template-columns:repeat(5,1fr);gap:8px; } .gc-cat{ display:flex;flex-direction:column;align-items:center; text-decoration:none;color:var(--gc-tinta); } .gc-cat-figura{ width:100%;display:flex;align-items:flex-end;justify-content:center; min-height:210px; } .gc-cat-figura img{ max-width:100%;max-height:210px;width:auto;height:auto;display:block; transition:transform .2s; } .gc-cat:hover .gc-cat-figura img{transform:translateY(-4px)} .gc-cat-nombre{ margin-top:14px;font-family:var(--gc-display); font-size:12px;letter-spacing:.16em;text-transform:uppercase; text-align:center; } /* --------------------------------------------------------------- marcas * Ya no va en la portada — vive en el menú lateral. El shortcode se queda * por si alguna página la necesita. */ .gc-marcas{background:var(--gc-menta);padding:52px 24px} .gc-marcas-in{max-width:1400px;margin:0 auto;text-align:center} .gc-marcas-lista{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px; margin:0;padding:0;list-style:none; } .gc-marcas-lista a{ color:var(--gc-cafe-mid);text-decoration:none; font-family:var(--gc-display);font-size:13px; letter-spacing:.12em;text-transform:uppercase; } .gc-marcas-lista a:hover{text-decoration:underline;text-underline-offset:5px} /* ---------------------------------------------------------- cómo vender * La banda se queda porque explica el negocio a quien llega de afuera. Lo * que NO va es el enlace para registrarse: ese lo manda Elisa por mensaje a * cada dueña, no se ofrece abierto en el sitio. */ /* Microcemento teñido de celeste, y la ilustración encima sin caja. La foto anterior era una fotografía a sangre dentro de un rectángulo: se leía como un banner pegado. La jirafa abrazada al elefante está recortada, así que se apoya sobre la banda como un dibujo sobre el muro. */ .gc-vender{ background:var(--gc-celeste) url(assets/giraffe-microcemento-celeste.jpg) center/cover no-repeat; border-bottom:9px solid var(--gc-dorado); } .gc-vender-in{ max-width:1400px;margin:0 auto; display:grid;grid-template-columns:minmax(0,460px) 1fr;align-items:center; } .gc-vender-foto{ display:flex;align-items:flex-end;justify-content:center; padding:34px 12px 0;min-height:0; } .gc-vender-foto img{ position:static;width:auto;height:auto; max-width:100%;max-height:460px;object-fit:contain;display:block; } .gc-vender-txt{padding:56px 48px;align-self:center;color:var(--gc-tinto)} .gc-vender-txt h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:0 0 22px; color:var(--gc-tinto)} .gc-vender-txt p{max-width:52ch;margin:0 0 14px;line-height:1.7;color:var(--gc-tinto)} /* El selector lleva el padre a propósito: `.gc-vender-txt p` de arriba pinta todos los párrafos de burdeo y le ganaba a este por tener una clase más. Esta línea es la que invita a hacer clic y tiene que ir en ocre. */ .gc-vender-txt .gc-vender-nota{ margin:22px 0 26px !important;color:var(--gc-dorado);font-size:15px; } /* El botón de esta banda va en burdeo y no en ocre: el ocre ya está en el filete y en la línea de arriba, y tres tonos del mismo naranjo seguidos se anulan entre ellos. */ .gc-vender .gc-btn{ background:var(--gc-tinto);border-color:var(--gc-tinto); font-size:14px;letter-spacing:.18em;padding:17px 42px; } .gc-vender .gc-btn:hover{background:var(--gc-tinto-hondo);border-color:var(--gc-tinto-hondo)} /* ------------------------------------------------------------ instagram * Chica y de una sola fila: es un guiño al Instagram, no una segunda * tienda. El nombre de la cuenta es lo que tiene que quedar grande. */ .gc-instagram{text-align:center;padding:56px 24px 64px;background:var(--gc-crema)} .gc-instagram-in{max-width:1400px;margin:0 auto} .gc-instagram h2{font-size:clamp(18px,2vw,22px);margin:0 0 26px;letter-spacing:.2em} /* Ocho fotos, una sola fila: cada cuadro queda chico y la sección no le quita protagonismo a la tienda. */ .gc-ig-grilla{ display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:0 0 32px; } .gc-ig-foto{ display:block;position:relative;padding-top:100%; overflow:hidden;background:var(--gc-gris); } .gc-ig-foto img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;transition:transform .35s; } .gc-ig-foto:hover img{transform:scale(1.04)} /* ------------------------------------------------------------------ pie */ .gc-pie{background:var(--gc-cafe);color:#fff;padding:32px 26px 30px} .gc-pie-in{ max-width:1400px;margin:0 auto; display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start; } /* El logotipo completo es una tira ancha y baja: a 38px de alto se comía el pie entero. A 22px ocupa una línea y se lee igual. */ .gc-pie img{height:22px;width:auto;margin-bottom:12px} .gc-pie p{color:rgba(255,255,255,.78);margin:0 0 5px;font-size:13px} .gc-pie a{color:#fff} /* ------------------------------------------------- la prenda bajo la marca */ /* El nombre es la marca; esto dice qué es. Tiene que leerse claro pero sin competirle a la marca. */ .gc-bajada-prenda{ font-family:var(--gc-texto); font-size:13.5px; color:var(--gc-tinta-2); margin:2px 0 8px; letter-spacing:.01em; } .gc-bajada-ficha{font-size:16px;margin:0 0 14px} /* En la grilla, la bajada va centrada igual que el nombre y el precio. */ .wc-block-product .gc-bajada-prenda, .woocommerce ul.products li.product .gc-bajada-prenda{text-align:center} /* La marca, que es el nombre del producto. */ .wc-block-product .wp-block-post-title, .wc-block-product .wp-block-post-title a, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title{ font-family:var(--gc-display); font-weight:400; letter-spacing:.1em; text-transform:uppercase; } .wc-block-product .wp-block-post-title{font-size:16px;margin:14px 0 0} .wc-block-product .wp-block-post-title a{text-decoration:none;color:var(--gc-tinta)} /* --------------------------------------------------- estados de la ficha */ .gc-reservado, .gc-vendido, .gc-mio{ display:inline-block;padding:5px 13px;border-radius:2px; font-family:var(--gc-display); font-size:10px;letter-spacing:.16em;text-transform:uppercase; } .gc-reservado{background:#F7EEDC;color:#8A5A12} .gc-vendido{background:var(--gc-cafe-mid);color:#fff} .gc-mio{background:#E4F0EA;color:#2E6B4F} /* En la grilla el sello va ENCIMA de la foto, no sobre el nombre. Si ocupa su propia línea, la tarjeta vendida crece y descuadra la fila: nombre, precio y botón bajan unos píxeles respecto de sus vecinas. Hay dos marcados posibles — el de bloques (.wc-block-product, que es el que usa esta tienda) y el clásico (ul.products li.product) — y los dos tienen que quedar cubiertos. */ .wc-block-product, .woocommerce ul.products li.product{position:relative} .wc-block-product .gc-vendido, .wc-block-product .gc-reservado, .wc-block-product .gc-mio, .woocommerce ul.products li.product .gc-vendido, .woocommerce ul.products li.product .gc-reservado, .woocommerce ul.products li.product .gc-mio{ position:absolute;top:12px;left:12px;z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.14); } /* ------------------------------------------------------------- la tienda */ /* Sin el título "Tienda": se entra a ver ropa, no a leer un encabezado. En las categorías el título sí se queda, porque ahí dice qué se está mirando. */ body.post-type-archive-product .wp-block-query-title, body.post-type-archive-product .woocommerce-products-header, body.post-type-archive-product .woocommerce-breadcrumb, body.post-type-archive-product .wp-block-woocommerce-breadcrumbs{display:none} /* Cuatro por fila. El bloque de productos trae la clase columns-3 escrita en la plantilla; se pisa desde acá para no tener que tocar la plantilla en el editor del sitio. */ .wc-block-product-template, .wc-block-product-template.columns-3, .wc-block-product-template.columns-2{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px 14px !important; } .woocommerce ul.products{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; margin:0;padding:0;list-style:none; } .woocommerce ul.products li.product{ width:auto !important;margin:0 !important;float:none !important; text-align:center; } .wc-block-product{text-align:center} .wc-block-product .wc-block-components-product-price{justify-content:center} /* Las fotos vienen de Instagram con proporciones distintas — cuadradas, verticales, algunas casi panorámicas — y la grilla queda dentada: cada tarjeta empieza su nombre a una altura distinta. Se encuadran todas en un cuadrado con `contain`, que ajusta sin recortar: en ropa de segunda mano cortar la foto puede dejar fuera justo el detalle que decide la compra. */ .wc-block-product .wc-block-components-product-image img, .woocommerce ul.products li.product img{ aspect-ratio:1/1; width:100%;height:auto; object-fit:contain; background:#fff; } /* ----------------------------------------------------------------- móvil */ @media (max-width:1100px){ .gc-ig-grilla{grid-template-columns:repeat(4,1fr)} } /* ------------------------------------------------------- ficha de prenda */ /* "Category: Pantalones" — la palabra viene en inglés desde el bloque de WooCommerce y no hay dónde traducirla. Se esconde el rótulo y queda solo la categoría, que es lo que sirve. */ .wp-block-post-terms__prefix{display:none} /* La bajada salía dos veces: la que pinta el tema (con estilo) y el extracto que imprime la plantilla de bloques. Se queda la del tema. */ .single-product .wp-block-post-excerpt{display:none} /* Flechas de la galería. FlexSlider las trae, WooCommerce las apaga y además no les pone estilo: sin esto son dos textos sueltos. */ .woocommerce-product-gallery{position:relative} .woocommerce-product-gallery .flex-direction-nav{ list-style:none;margin:0;padding:0; } .woocommerce-product-gallery .flex-direction-nav a{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.92);box-shadow:0 1px 6px rgba(0,0,0,.16); display:flex;align-items:center;justify-content:center; text-indent:0;font-size:0;color:var(--gc-cafe-mid); opacity:0;transition:opacity .18s; } .woocommerce-product-gallery:hover .flex-direction-nav a, .woocommerce-product-gallery .flex-direction-nav a:focus{opacity:1} .woocommerce-product-gallery .flex-direction-nav a::before{ font-size:20px;line-height:1;font-family:var(--gc-texto); } .woocommerce-product-gallery .flex-nav-prev a{left:12px} .woocommerce-product-gallery .flex-nav-next a{right:12px} .woocommerce-product-gallery .flex-nav-prev a::before{content:"‹"} .woocommerce-product-gallery .flex-nav-next a::before{content:"›"} /* En pantallas sin puntero (celular) las flechas se quedan visibles. */ @media (hover:none){ .woocommerce-product-gallery .flex-direction-nav a{opacity:1} } /* ------------------------------------------------------- vista rápida */ .gc-vista-rapida{ display:block;width:100%;margin:8px 0 0; background:none;border:1px solid var(--gc-linea);border-radius:2px; padding:9px 10px;cursor:pointer;color:var(--gc-tinta-2); font-family:var(--gc-display);font-size:10px; letter-spacing:.14em;text-transform:uppercase; transition:border-color .15s,color .15s; } .gc-vista-rapida:hover{border-color:var(--gc-cafe-mid);color:var(--gc-cafe-mid)} .gc-vr-velo{ position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000; } .gc-vr{ --gc-vr-alto:min(560px,74vh); position:fixed;z-index:10001; top:50%;left:50%;transform:translate(-50%,-50%); width:min(980px,94vw);max-height:90vh;overflow:hidden; background:var(--gc-hueso);border-radius:3px; box-shadow:0 10px 40px rgba(0,0,0,.28); } .gc-vr-cerrar{ position:absolute;top:10px;right:14px;z-index:2; background:none;border:0;font-size:30px;line-height:1;cursor:pointer; color:var(--gc-tinta-2);padding:0; } /* Las fotos van UNA AL LADO DE LA OTRA, no apiladas. * * Apiladas, una prenda con cinco fotos hacía una ventana de varias pantallas * de alto: había que desplazarse dentro de la vista rápida para llegar al * precio y al botón, que es exactamente lo que la vista rápida venía a * evitar. En horizontal la ventana mantiene una altura fija y cabe entera en * la pantalla; las fotos se recorren de lado. */ .gc-vr-cuerpo{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch} .gc-vr-fotos{ display:flex;flex-direction:row;gap:3px;background:#fff; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:thin; } .gc-vr-fotos img{ flex:0 0 auto; height:var(--gc-vr-alto);width:auto;max-width:none; object-fit:contain;display:block; scroll-snap-align:center; } .gc-vr-datos{padding:38px 40px 34px;align-self:start;overflow-y:auto;max-height:var(--gc-vr-alto)} .gc-vr-datos h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 8px} .gc-vr-bajada{color:var(--gc-tinta-2);margin:0 0 16px;font-size:14.5px} .gc-vr-precio{font-size:22px;margin:0 0 24px} .gc-vr-precio s{color:var(--gc-tinta-2);font-size:16px;margin-right:8px} .gc-vr-agregar{cursor:pointer} .gc-vr-ficha{ display:inline-block;margin-top:18px;color:var(--gc-tinta-2); font-size:13px;text-underline-offset:4px; } .gc-vr-cargando{padding:60px 40px;text-align:center;color:var(--gc-tinta-2)} @media (max-width:820px){ .gc-vr{--gc-vr-alto:44vh} .gc-vr-cuerpo{grid-template-columns:1fr} .gc-vr-datos{padding:24px 22px 30px;max-height:none} } /* --------------------------------------------------------------- pagar * La cabecera del checkout la pone WooCommerce con su propia parte de * plantilla; el tema la reemplaza por la barra café (parts/checkout-header.html) * para que la clienta no sienta que salió del sitio justo al pagar. */ .gc-aviso-pagar{ background:var(--gc-menta);border-radius:3px; padding:20px 24px;margin:0 0 28px; } .gc-aviso-pagar p{margin:0 0 9px;font-size:14.5px;line-height:1.6} .gc-aviso-pagar p:last-child{margin-bottom:0} .gc-aviso-pagar strong{font-weight:400;color:var(--gc-cafe-mid)} /* El "1" del resumen del pedido. Cada prenda es única, así que la cantidad no informa nada: siempre va a decir 1. En su lugar va "Reservado", que sí le dice algo a la compradora. OJO: la burbuja del número está encima de la miniatura y es redonda; al estirarla para que quepa la palabra, tapaba el nombre de la prenda. Por eso se esconde y el sello se pone debajo de la bajada, dentro del texto. */ .wc-block-components-order-summary-item__quantity{display:none !important} .wc-block-components-order-summary-item .wc-block-components-product-metadata::after{ content:"Reservado"; display:inline-block;margin-top:9px; background:#F7EEDC;color:#8A5A12; padding:4px 10px;border-radius:2px; font-family:var(--gc-display);font-size:9px; letter-spacing:.14em;text-transform:uppercase; } /* Acá vivía un reemplazo de texto de la época de "Starken, por pagar": el envío costaba cero, WooCommerce escribía "GRATIS" y este CSS tapaba la cifra con "Lo pagas en la entrega". Cuando el envío pasó a cobrarse en el checkout, la regla quedó y siguió haciendo lo suyo: ponía `font-size:0` sobre el precio REAL y encima escribía que se pagaba en la entrega. El servidor mandaba $4.202, el total lo sumaba, y la compradora leía lo contrario. Lección para la próxima: un texto escrito en CSS con `content` no se encuentra buscando en el código PHP ni en las traducciones, y no lo ve ningún recorrido del DOM. Si un texto de la tienda miente y no aparece por ninguna parte, mirar acá primero. */ @media (max-width:900px){ .gc-barra{padding:6px 18px} .gc-barra .gc-logo{height:30px} .gc-portada-in{grid-template-columns:1fr;gap:0} .gc-jirafa-izq,.gc-jirafa-der{max-width:210px;margin:0 auto} .gc-jirafa-der{display:none} .gc-portada-centro{padding:36px 16px 24px} .gc-categorias{grid-template-columns:repeat(2,1fr);gap:20px} .gc-vender-in{grid-template-columns:1fr} .gc-vender-foto{min-height:300px} .gc-vender-txt{padding:36px 24px} .gc-ig-grilla{grid-template-columns:repeat(4,1fr);gap:5px} .gc-pie-in{grid-template-columns:1fr} .wc-block-product-template, .wc-block-product-template.columns-3, .wc-block-product-template.columns-2, .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* ========================================================================== /vender — el registro de dueñas Página aparte del resto de la tienda: la ve una sola persona, invitada por Elisa, y su único trabajo es que complete diez campos sin abandonar a la mitad. Por eso va en tarjeta sobre fondo hueso, con las secciones numeradas y una línea que explica para qué se pide cada dato. ========================================================================== */ .gc-reg{max-width:840px;margin:0 auto;padding:44px 22px 90px} .gc-reg-sobre{ font-family:var(--gc-display);font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--gc-tinta-2);text-align:center;margin:0 0 10px} .gc-reg-titulo{ font-family:var(--gc-display);font-weight:400; font-size:clamp(30px,4.4vw,42px);line-height:1.15; color:var(--gc-cafe-mid);text-align:center;margin:0 0 14px} .gc-reg-bajada{ text-align:center;color:var(--gc-tinta-2);max-width:56ch;margin:0 auto 34px;line-height:1.65} .gc-reg-caja{ background:#fff;border:1px solid var(--gc-linea);border-radius:14px; padding:44px 46px} .gc-reg-info{margin-top:30px} .gc-reg-info h2{ font-family:var(--gc-display);font-weight:400;font-size:26px; color:var(--gc-cafe-mid);margin:34px 0 16px} .gc-reg-info h2:first-child{margin-top:0} .gc-reg-info p{margin:0 0 14px;line-height:1.7;color:var(--gc-tinta)} /* --- las cuatro secciones --- */ .gc-bloque{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid var(--gc-linea)} .gc-bloque:last-of-type{border-bottom:0;padding-bottom:8px;margin-bottom:16px} .gc-bloque h2{ font-family:var(--gc-display);font-weight:400;font-size:24px; color:var(--gc-tinta);margin:0 0 6px} .gc-bloque h2 span{color:var(--gc-cafe-soft)} .gc-bloque-bajada{font-size:14px;color:var(--gc-tinta-2);margin:0 0 22px;line-height:1.6} /* --- los campos --- */ .gc-filas{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} .gc-campo{grid-column:1 / -1;margin:0} .gc-campo.gc-mitad{grid-column:auto} .gc-form label{ display:block;font-family:var(--gc-display);font-weight:500; font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--gc-tinta);margin:0 0 7px} .gc-req{color:var(--gc-cafe-soft)} .gc-opc{text-transform:none;letter-spacing:0;font-weight:400;color:var(--gc-tinta-2)} .gc-form input[type=text], .gc-form input[type=email], .gc-form input[type=tel], .gc-form select{ width:100%;background:#fff;border:1px solid var(--gc-linea);border-radius:8px; padding:14px 16px;font-family:var(--gc-texto);font-size:15px;color:var(--gc-tinta); transition:border-color .15s, box-shadow .15s} .gc-form input::placeholder{color:#A9A29B} .gc-form input:focus, .gc-form select:focus{ outline:0;border-color:var(--gc-cafe-mid);box-shadow:0 0 0 3px rgba(59,24,8,.08)} .gc-form select{ appearance:none;cursor:pointer;color:#A9A29B; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A544F' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px} .gc-form select:valid{color:var(--gc-tinta)} .gc-nota{ background:var(--gc-hueso);border:1px solid var(--gc-linea);border-radius:8px; padding:14px 16px;font-size:14px;color:var(--gc-tinta-2);margin:18px 0 0} /* --- aceptar y enviar --- */ .gc-acepto{margin:4px 0 26px} .gc-acepto label{ display:flex;gap:11px;align-items:flex-start;text-transform:none;letter-spacing:0; font-family:var(--gc-texto);font-weight:400;font-size:14px;line-height:1.6; color:var(--gc-tinta-2);cursor:pointer} .gc-acepto input{margin-top:3px;width:16px;height:16px;accent-color:var(--gc-cafe-mid);flex:0 0 auto} .gc-enviar{margin:0} .gc-form button[type=submit]{ width:100%;background:var(--gc-cafe-mid);color:#fff;border:0;cursor:pointer; font-family:var(--gc-display);font-size:13px;letter-spacing:.18em; text-transform:uppercase;padding:19px 24px;border-radius:8px;transition:opacity .15s} .gc-form button[type=submit]:hover{opacity:.9} .gc-pie-form{ text-align:center;font-size:13px;color:var(--gc-tinta-2);margin:16px 0 0} .gc-ok h2{font-family:var(--gc-display);font-weight:400;font-size:28px; color:var(--gc-cafe-mid);margin:0 0 12px} /* ========================================================================== Las páginas escritas: «Cómo vender» y «Cambios y devoluciones» Reutilizan el molde de /vender —tarjeta blanca sobre hueso, secciones numeradas, títulos en Poppins— a propósito. Son las dos páginas que alguien lee ANTES de decidirse, y tienen que sentirse parte de la misma tienda que acaba de mirar, no un anexo legal pegado con otra plantilla. La diferencia con /vender: acá el menú se queda. Quien lee «cómo vender» probablemente quiera volver a mirar las prendas, y quien lee las devoluciones está a un paso de comprar. ========================================================================== */ /* La plantilla reserva 70px arriba para el título de la página y otros 70 en el grupo que lo envuelve. Como acá el título se borra (el plugin dibuja el suyo), esos 140px quedan de aire muerto entre la barra café y el sobretítulo. Se recortan desde el contenedor, que es lo único que los tiene. Si el navegador no entiende :has(), simplemente queda el hueco de antes. */ Los 70px van en un `style=""` que escribe la propia plantilla, así que la única forma de ganarles desde la hoja de estilos es !important. */ body:has(.gc-pag) main.wp-block-group{margin-top:0 !important} body:has(.gc-pag) main.wp-block-group > .wp-block-group{padding-top:14px !important} .gc-pag .gc-reg-caja{padding:40px 46px} .gc-pag .gc-bloque:last-of-type{border-bottom:0} .gc-pag .gc-bloque p{line-height:1.7;color:var(--gc-tinta)} .gc-pag .gc-bloque-bajada{font-size:15px} /* La frase que resume la página, antes de cualquier explicación. Quien entra a «cambios y devoluciones» viene con una pregunta concreta y merece la respuesta en la primera línea, no en el cuarto párrafo. */ /* OJO con el `:not(.gc-btn)`. La clase `gc-grande` hace dos trabajos: acá es la frase de entrada de una página, y arriba es el modificador del botón grande. Sin la exclusión, estas reglas —que van después— le ganaban al botón por orden: le pintaban la letra del mismo café del fondo y le borraban el relleno de los costados. El botón de Instagram de la portada quedaba como un rectángulo café con la letra invisible hasta que pasabas el mouse, que era lo único que devolvía el blanco. */ .gc-grande:not(.gc-btn){ font-family:var(--gc-display);font-weight:400; font-size:clamp(19px,2.4vw,23px);line-height:1.45;letter-spacing:.01em; color:var(--gc-cafe-mid); margin:0 0 32px;padding:0 0 28px;border-bottom:1px solid var(--gc-linea)} .gc-grande strong{font-weight:600} /* Listas: el punto va en café y colgando, para que el texto de varias líneas quede alineado en vez de escalonarse bajo la viñeta. */ .gc-lista{list-style:none;margin:0;padding:0} .gc-lista li{ position:relative;padding:0 0 0 22px;margin:0 0 12px; line-height:1.7;color:var(--gc-tinta)} .gc-lista li:last-child{margin-bottom:0} .gc-lista li::before{ content:"·";position:absolute;left:4px;top:-1px; color:var(--gc-cafe-soft);font-size:20px;line-height:1.4} .gc-lista.gc-check li::before{ content:"";left:0;top:9px;width:9px;height:9px;border-radius:50%; border:1.5px solid var(--gc-cafe-soft);font-size:0} .gc-lista + .gc-nota{margin-top:20px} /* El botón de cierre. Mismo peso que el de enviar el formulario de /vender, pero como enlace: acá no se envía nada, se pasa a la página siguiente. */ .gc-cta{ display:inline-block;background:var(--gc-cafe-mid);color:#fff !important; text-decoration:none;font-family:var(--gc-display);font-size:13px; letter-spacing:.18em;text-transform:uppercase; padding:17px 34px;border-radius:8px;transition:opacity .15s} .gc-cta:hover{opacity:.9;color:#fff !important} .gc-cierre{padding-bottom:0;margin-bottom:0} .gc-cierre h2{margin-bottom:6px} @media(max-width:680px){ .gc-pag .gc-reg-caja{padding:26px 20px} .gc-cta{display:block;text-align:center} } /* --- la barra con el logo, solo en esta página --- */ .gc-reg-tope{background:var(--gc-cafe);padding:26px 22px;text-align:center} .gc-reg-tope img{max-width:min(430px,72vw);height:auto;display:inline-block} @media(max-width:680px){ .gc-reg{padding:28px 16px 60px} .gc-reg-caja{padding:28px 20px;border-radius:10px} .gc-filas{grid-template-columns:1fr} .gc-campo.gc-mitad{grid-column:1 / -1} .gc-reg-tope{padding:20px 16px} } /* ================================================================== TITULOS ================================================================== El tema base deja los

de página en 62px. En una tienda de ropa eso se come la pantalla completa antes de que se vea una sola prenda: la clienta llega y lo primero que ve es la palabra "Carro" del porte de un cartel. Se bajan a una escala que acompaña en vez de gritar. Van con !important porque el tamaño viene de las variables de theme.json, que se imprimen en línea y ganan por especificidad. */ .wp-block-post-title, .wp-block-query-title, .woocommerce div.product .product_title, .woocommerce-page h1.entry-title{ font-size:clamp(21px,2.4vw,29px) !important; line-height:1.22 !important; letter-spacing:.09em; margin-bottom:.5em; } /* Dentro de la grilla el título es la marca de la prenda y ya tenía su tamaño propio: la regla de arriba no debe pisárselo. */ .wc-block-product .wp-block-post-title, .gc-mini .wp-block-post-title{font-size:16px !important;letter-spacing:.1em} /* En la ficha, la marca es lo más grande de la página pero sin exagerar. */ .woocommerce div.product .product_title{font-size:clamp(23px,2.7vw,32px) !important} /* ================================================================== "MOSTRANDO N RESULTADOS" Y "ORDENAR POR" ================================================================== El