/* ========================================================= RUIVELA STUDIO — estilos del tema Blanco, negro y gris. Referencia de estilo: munarq.es ========================================================= */ /* ---------- Cabecera superpuesta ---------- */ .ruivela-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem); gap: 1rem; } .ruivela-header a { text-decoration: none; } .ruivela-nav .wp-block-navigation-item__content { padding: 0.25rem 0; } .ruivela-nav .wp-block-navigation__container { gap: 1.75rem; } /* En la portada la cabecera va en blanco sobre la imagen. El color se fija también en el contenedor porque el bloque de navegación usa `color: inherit` con especificidad alta (clase duplicada en el core). */ .ruivela-portada .ruivela-header, .ruivela-portada .ruivela-header .wp-block-navigation { color: #ffffff; } .ruivela-portada .ruivela-header a, .ruivela-portada .ruivela-header .wp-block-site-title a { color: #ffffff; } .ruivela-portada .ruivela-header a:hover, .ruivela-portada .ruivela-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: rgba(255, 255, 255, 0.7); } /* ---------- Contenido general ---------- */ .ruivela-main { padding: 7.5rem clamp(1.25rem, 3vw, 2.5rem) 0; min-height: 60vh; } /* ---------- Portada: proyectos a pantalla completa ---------- */ /* la primera imagen arranca en el borde superior, sin franja blanca */ .ruivela-showcase { margin-block-start: 0 !important; } /* Nota: con sesión iniciada no hace falta desplazar la cabecera: WordPress ya aplica margin-top al para dejar sitio a su barra de administración. */ .ruivela-showcase .wp-block-post-template { display: block; margin: 0; padding: 0; list-style: none; } .ruivela-showcase .wp-block-post-template > li { margin: 0; } .ruivela-hero { margin: 0; overflow: hidden; } .ruivela-hero .wp-block-cover__image-background { object-fit: cover; } .ruivela-hero .wp-block-post-title { width: 100%; text-align: center; margin: 0; } .ruivela-hero .wp-block-post-title, .ruivela-hero .wp-block-post-title a { color: #ffffff; font-weight: 500; letter-spacing: 0.02em; } .ruivela-hero .wp-block-post-title a:hover { color: rgba(255, 255, 255, 0.75); } /* ---------- Retícula de proyectos ---------- */ .ruivela-filtros { display: flex; gap: 1.75rem; margin-bottom: 3rem; } .ruivela-filtro { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: var(--wp--preset--font-size--medium); text-transform: lowercase; color: var(--wp--preset--color--gray); transition: color 0.15s ease; } .ruivela-filtro:hover, .ruivela-filtro.is-active { color: var(--wp--preset--color--contrast); } .ruivela-grid .wp-block-post-template { gap: 4rem 2.5rem; } .ruivela-grid .wp-block-post-template > li.ruivela-oculto { display: none; } .ruivela-tarjeta .wp-block-post-featured-image img { display: block; width: 100%; } .ruivela-tarjeta-titulo { margin-top: 0.75rem; font-weight: 400; text-transform: lowercase; letter-spacing: 0.01em; } .ruivela-tarjeta-titulo a:hover { color: var(--wp--preset--color--gray); } /* Marca de agua para proyectos en construcción / en proyecto (se activa añadiendo la clase estado-en-construccion / estado-en-proyecto al proyecto; prevista para próximas fases) */ .ruivela-tarjeta .ruivela-estado { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.25em; text-transform: uppercase; background: rgba(17, 17, 17, 0.25); pointer-events: none; } /* ---------- Ficha de proyecto ---------- */ .ruivela-proyecto-titulo { font-weight: 400; color: var(--wp--preset--color--gray); text-transform: lowercase; margin-bottom: 3rem; } .ruivela-proyecto .wp-block-post-content figure.wp-block-image { margin-top: 0; margin-bottom: 2.5rem; } .ruivela-ficha { margin-top: 4.5rem; max-width: 640px; } .ruivela-ficha p { margin: 0 0 0.2rem; } .ruivela-ficha .ruivela-ficha-datos { color: var(--wp--preset--color--gray); font-size: var(--wp--preset--font-size--small); line-height: 1.7; } .ruivela-ficha .ruivela-ficha-descripcion { margin-top: 1.75rem; } /* Galerías de proyecto: retícula nativa del bloque de galería. El ancho de columna del core se calcula con esta variable, por eso se ajusta la variable y no solo el gap. */ .ruivela-proyecto .wp-block-post-content .wp-block-gallery { --wp--style--unstable-gallery-gap: 1.75rem; margin-top: 0; margin-bottom: 2.5rem; gap: 1.75rem; } .ruivela-proyecto .wp-block-post-content .wp-block-gallery figure.wp-block-image { margin: 0; } /* Navegación entre proyectos (anterior · todos · siguiente) */ .ruivela-proyecto-nav { margin-top: 54px; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--hairline); font-size: var(--wp--preset--font-size--small); } .ruivela-proyecto-nav a { color: var(--wp--preset--color--gray); } .ruivela-proyecto-nav a:hover { color: var(--wp--preset--color--contrast); } /* ---------- Página Estudio (diseño editorial) ---------- */ /* main a ancho completo; cada sección controla su propio ancho */ .ruivela-estudio-page { overflow: hidden; } .ruivela-est-section { max-width: 1200px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 72px); } .ruivela-est-eyebrow { font-size: 0.875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--gray); margin: 0 0 1.6rem; } .ruivela-est-opening { padding-top: clamp(7rem, 12vw, 10.5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); } .ruivela-est-statement { font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.014em; max-width: 20ch; text-wrap: balance; margin: 0; } .ruivela-muted { color: var(--wp--preset--color--gray); } /* héroe a sangre */ .ruivela-est-hero { width: 100%; margin: 0 0 clamp(3rem, 6vw, 5.5rem); } .ruivela-est-hero img { display: block; width: 100%; height: clamp(320px, 64vh, 660px); object-fit: cover; } /* nosotros: dos columnas asimétricas con índice fijo */ .ruivela-est-nosotros { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-bottom: clamp(3rem, 7vw, 6rem); } .ruivela-est-nosotros > * { margin-block: 0; } .ruivela-est-aside { align-self: start; position: sticky; top: 28px; } .ruivela-est-label { font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--contrast); font-weight: 500; margin: 0 0 1.3rem; line-height: 1.3; } .ruivela-est-portrait { aspect-ratio: 4 / 5; background: linear-gradient(135deg, #efece6, #e4e0d9 60%, #dad5cd); display: flex; align-items: flex-end; padding: 14px; } .ruivela-est-portrait p { font-size: 0.7rem; color: var(--wp--preset--color--gray); margin: 0; } /* retrato real (sustituye al placeholder) */ .ruivela-est-portrait-foto { margin: 0; } .ruivela-est-portrait-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .ruivela-est-index { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.6rem 0 0; font-size: 0.9rem; } .ruivela-est-index a { color: var(--wp--preset--color--gray); text-transform: lowercase; } .ruivela-est-index a:hover { color: var(--wp--preset--color--contrast); } .ruivela-est-bio p { max-width: 60ch; } .ruivela-est-lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; font-weight: 500; max-width: 34ch; margin-bottom: 1.8rem; } /* materiales: tríptico desfasado */ .ruivela-est-materials { padding-bottom: clamp(3rem, 7vw, 6rem); } .ruivela-est-materials .ruivela-est-label { margin-bottom: 2rem; } .ruivela-est-trip { align-items: flex-start; gap: clamp(14px, 2.4vw, 30px); } .ruivela-est-trip .wp-block-column:nth-child(2) { margin-top: clamp(28px, 6vw, 80px); } .ruivela-est-trip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; } .ruivela-est-trip figcaption { font-size: 0.8rem; color: var(--wp--preset--color--gray); margin-top: 0.6rem; text-align: left; } /* colaboradores: índice a dos columnas */ .ruivela-est-colabs { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--wp--preset--color--hairline); } .ruivela-est-colabs .ruivela-est-label { margin-bottom: 2rem; } .ruivela-est-clist { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 72px); } .ruivela-est-crow { border-top: 1px solid var(--wp--preset--color--hairline); padding: 0.85rem 0; align-items: baseline; } .ruivela-est-crow .cn { font-weight: 500; margin: 0; } .ruivela-est-crow .cr { font-size: 0.82rem; color: var(--wp--preset--color--gray); text-align: right; margin: 0; white-space: nowrap; } /* contacto: banda invertida (negro sobre blanco, "al revés") */ .ruivela-est-contacto { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); padding-block: clamp(3.5rem, 8vw, 7.5rem); margin-top: clamp(1rem, 3vw, 2rem); } .ruivela-est-contacto .ruivela-est-label { color: rgba(255, 255, 255, 0.55); margin-bottom: 2.2rem; } .ruivela-est-contact-name { color: rgba(255, 255, 255, 0.55); margin: 0 0 1.1rem; } .ruivela-est-contact-big { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } .ruivela-est-contact-big a { color: var(--wp--preset--color--base); border-bottom: 1px solid rgba(255, 255, 255, 0.28); } .ruivela-est-contact-big a:hover { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.6); } .ruivela-est-contact-ig { margin: 2.2rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); } .ruivela-est-contact-ig a { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.75); } .ruivela-est-contact-ig a:hover { color: #ffffff; } .ruivela-ig-icono { display: block; } @media (max-width: 781px) { .ruivela-est-nosotros { grid-template-columns: 1fr; } .ruivela-est-aside { position: static; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .ruivela-est-portrait { width: 150px; flex: 0 0 150px; } .ruivela-est-index { margin-top: 0; } .ruivela-est-trip .wp-block-column:nth-child(2) { margin-top: 0; } .ruivela-est-clist { grid-template-columns: 1fr; } } /* Aviso interno de imagen provisional */ .ruivela-placeholder { border: 1px dashed var(--wp--preset--color--hairline); color: var(--wp--preset--color--gray); font-size: var(--wp--preset--font-size--small); padding: 0.5rem 0.75rem; } /* ---------- Pie ---------- */ /* Separación entre el contenido de la página y el pie */ .ruivela-footer-zona { margin-top: 128px; } /* Banner del programa Kit Digital (requisito de publicidad del beneficiario) */ .ruivela-kit-digital { margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); max-width: 1000px; } .ruivela-kit-digital img { width: 100%; height: auto; display: block; } .ruivela-footer { padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem); gap: 1rem; } .ruivela-footer, .ruivela-footer a { color: var(--wp--preset--color--gray); font-size: var(--wp--preset--font-size--small); } .ruivela-footer a:hover { color: var(--wp--preset--color--contrast); } /* La portada no necesita margen antes del pie */ .ruivela-portada .ruivela-footer { padding-top: 2rem; } /* ---------- Widgets de accesibilidad e idioma, adaptados al diseño ---------- */ /* Barra de accesibilidad: abajo a la izquierda, blanca y con línea fina */ .a11y-toolbar { position: fixed !important; top: auto !important; bottom: 54px !important; left: 18px !important; z-index: 90 !important; background: none !important; border: none !important; } .a11y-toolbar ul.a11y-toolbar-list { margin: 0 !important; padding: 0 !important; list-style: none !important; border: 1px solid var(--wp--preset--color--hairline) !important; background: #ffffff !important; } .a11y-toolbar li.a11y-toolbar-list-item { margin: 0 !important; padding: 0 !important; } .a11y-toolbar li.a11y-toolbar-list-item + li.a11y-toolbar-list-item { border-top: 1px solid var(--wp--preset--color--hairline) !important; } .a11y-toolbar button.a11y-toggle { background: #ffffff !important; color: var(--wp--preset--color--contrast) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; } .a11y-toolbar button.a11y-toggle:hover, .a11y-toolbar button.a11y-toggle[aria-pressed="true"] { background: var(--wp--preset--color--contrast) !important; color: #ffffff !important; } /* El contenedor flotante de GTranslate lleva estilos en línea: hace falta !important para subirlo a la misma altura que la barra de accesibilidad. */ #gt_float_wrapper { bottom: 54px !important; } /* Selector de idioma GTranslate: sin banderas, blanco, minúsculas */ .gt_float_switcher { font-family: inherit !important; background: #ffffff !important; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.8125rem !important; color: var(--wp--preset--color--contrast) !important; } .gt_float_switcher img { display: none !important; } .gt_float_switcher .gt-selected { background: #ffffff !important; border-radius: 0 !important; color: var(--wp--preset--color--contrast) !important; } .gt_float_switcher .gt-selected .gt-current-lang { padding: 10px 14px !important; font-weight: 400 !important; text-transform: lowercase !important; color: var(--wp--preset--color--contrast) !important; } .gt_float_switcher .gt_options { background: #ffffff !important; border-radius: 0 !important; } .gt_float_switcher .gt_options a { color: var(--wp--preset--color--gray) !important; text-transform: lowercase !important; padding: 8px 14px !important; font-size: 0.8125rem !important; } .gt_float_switcher .gt_options a:hover, .gt_float_switcher .gt_options a.gt-current { background: #ffffff !important; color: var(--wp--preset--color--contrast) !important; } /* ---------- Accesibilidad: foco de teclado visible (WCAG 2.1 AA) ---------- */ a:focus-visible, button:focus-visible, .ruivela-filtro:focus-visible, .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 3px; border-radius: 1px; } .ruivela-portada .ruivela-header a:focus-visible, .ruivela-hero .wp-block-post-title a:focus-visible, .ruivela-est-contacto a:focus-visible { outline-color: #ffffff; } /* ---------- Movimiento: aparición y parallax ---------- */ @media (prefers-reduced-motion: no-preference) { .ruivela-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22, 0.6, 0.25, 1), transform 0.9s cubic-bezier(0.22, 0.6, 0.25, 1); } .ruivela-reveal.is-visible { opacity: 1; transform: none; } /* las imágenes con parallax se escalan para que el desplazamiento no descubra bordes */ .ruivela-parallax-img { transform: scale(1.12); will-change: transform; } .ruivela-est-hero { overflow: hidden; } } /* ---------- Móvil ---------- */ @media (max-width: 781px) { .ruivela-grid .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } .ruivela-main { padding-top: 6.5rem; } }