/* ============================================================ OFFICIAL REBOOT PARTNER — pagina de sponsors (no listada) Extiende styles.css. Aqui solo va lo que esta pagina necesita y el sitio principal no; nada de esto sobreescribe la landing. ============================================================ */ /* ---- NAV: tercera columna con CTA (en index esa columna va vacia). La marca lleva un pill extra, asi que su columna se dimensiona al contenido — con 1fr el nombre se partia en dos lineas. ---- */ .nav__inner--sp { grid-template-columns: auto 1fr auto; } .nav__inner--sp .nav__brand { white-space: nowrap; } .nav__inner--sp .nav__links { justify-content: center; } .nav__inner--sp .nav__cta { display: flex; justify-content: flex-end; } .nav__inner--sp .nav__cta .btn { padding: 10px 18px; font-size: 14px; } .pill { font-family: "Outfit", sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(224,169,61,0.34); border-radius: 100px; padding: 4px 10px; margin-left: 4px; white-space: nowrap; } /* ---- HERO: el titular es mas largo que el de la landing ---- */ .hero__title--sp { font-size: clamp(2.15rem, 4.9vw, 4.3rem); letter-spacing: -0.032em; } /* ---- HERO: efecto de escritura sobre el titular (una sola pasada) ---- El texto real vive en el HTML (fallback sin JS / reduced-motion); el script lo vacia y lo vuelve a escribir letra por letra al cargar. ---- */ .type-cursor { display: inline-block; width: 2px; margin-left: 3px; transform: translateY(0.05em); background: var(--gold); animation: type-blink 0.9s step-end infinite; } @keyframes type-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---- Etiqueta de seccion dorada donde no hay .head que la maneje ---- */ .sp-label { display: block; margin-bottom: 18px; color: var(--gold); } /* ---- THE STAGE: sin guests__sub (se quito), el titulo necesita mas aire abajo antes del primer parrafo ---- */ .guests__title { margin-bottom: 24px; } /* ---- THE STAGE: solo Allen ---- Antes eran dos tarjetas (Allen + Mystery Guest) apretadas a 160px de foto para caber lado a lado en esta columna angosta. Se quito el mystery guest, asi que Allen tiene la columna entera y recupera tamano. ---- */ .sp-stage { display: grid; grid-template-columns: 1fr; gap: 18px; } .sp-stage .pa-card--feature .pa-inner { padding: 30px 26px 26px; } .sp-stage .pa-card--feature .pa-photo { height: 300px; padding-top: 22px; } .sp-stage .pa-card--feature .pa-line { font-size: 1.7rem; } .sp-stage .pa-desc { font-size: 12px; margin-top: 9px; } .sp-stage .pa-card--feature .pa-name { font-size: 20px; margin-top: 16px; } /* ---- VIP GUEST CO-HOSTS: fila propia, a lo ancho ---- Salen de la columna derecha de "The Stage" y ocupan el ancho completo, en una fila de cuatro. ---- */ .sp-vip { padding: 0 0 clamp(50px, 7vh, 80px); } .sp-vip__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 18px; } .sp-vip .pa-card--vip .pa-inner { padding: 26px 20px 24px; } /* 1.08rem es el techo: a 1.12 el titular de Richie pide 227px y solo hay 226 de texto util, asi que se partia en dos. A 1.08 el unico que se parte es el de Anurag, que no cabe a ningun tamano razonable (261px a 1.02rem contra 226 disponibles). */ .sp-vip .pa-card--vip .pa-line { font-size: 1.08rem; margin-top: 0; line-height: 1.3; } .sp-vip .pa-desc { font-size: 10.5px; margin-top: 8px; } .sp-vip .pa-card--vip .pa-photo { height: 206px; padding-top: 18px; } .sp-vip .pa-card--vip .pa-name { font-size: 16.5px; margin-top: 14px; } /* Logo de la compania debajo del nombre, como en la landing. Alturas por marca, no una sola para todas: igualar la caja no iguala el tamano percibido (el wordmark de Render es largo y macizo, el de Zoe fino). */ .pa-logo { position: relative; z-index: 2; margin-top: 12px; display: flex; align-items: center; justify-content: center; height: 26px; } .pa-logo a { display: block; transition: opacity .25s var(--ease), transform .25s var(--ease); } .pa-logo a:hover { transform: translateY(-1px); } .pa-logo img { width: auto; display: block; opacity: 0.9; } .pa-logo img.render { height: 14px; } /* tinta ~329 */ .pa-logo img.finix { height: 19px; } /* ~310 */ .pa-logo img.abc { height: 22px; } /* disco macizo: a 25px pesaba 489 */ .pa-logo img.zoe { height: 18px; } /* fino: a 16px se quedaba en 217 */ /* La pastilla: aqui la tarjeta SI tiene caja, asi que se apoya en el borde inferior de la zona de foto en vez de en una linea de piso. Mismo relleno degradado que en la landing. */ .sp-vip .pa-photo { overflow: visible; } .uni-b { position: absolute; z-index: 4; left: 50%; bottom: 0; transform: translate(-50%, 50%); font-family: "Outfit", sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; padding: 5px 11px; border-radius: 100px; color: #1a1206; background: linear-gradient(100deg, #fff8e0 0%, #ffe7a3 32%, #fac4dd 66%, #d6bbf8 100%); } /* 2x2 en cuanto no caben cuatro, y SIGUE en 2x2 en telefono — nunca cae a una sola columna, que alargaba la seccion a cuatro pantallas. Los tamanos bajan para que quepan dos por fila a 375px. */ @media (max-width: 980px) { .sp-vip__row { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 560px) { .sp-vip__row { gap: 12px; } .sp-vip .pa-card--vip .pa-inner { padding: 16px 11px 15px; } .sp-vip .pa-card--vip .pa-line { font-size: 0.86rem; line-height: 1.25; } .sp-vip .pa-desc { font-size: 9px; margin-top: 6px; } .sp-vip .pa-card--vip .pa-photo { height: 124px; padding-top: 12px; } .sp-vip .pa-card--vip .pa-name { font-size: 13px; margin-top: 10px; } .uni-b { font-size: 7.5px; letter-spacing: 0.1em; padding: 4px 8px; } } /* ---- WHY PARTNER: tres tarjetas iguales, sin altura fija de bento ---- Ahora viven dentro de .manifesto (se unieron las dos secciones), asi que necesitan su propio espacio arriba — antes ese aire lo daba el
que existia solo en la seccion separada. ---- */ .manifesto .bento--three { margin-top: 50px; } .bento--three { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; } .bento--three .card { padding: 30px 28px 32px; justify-content: flex-start; } .bento--three .card p { max-width: none; } .bento--three .card p strong { color: var(--text); font-weight: 500; } /* Titulo e icono en la misma fila, a la misma altura — antes el icono (alineado a la derecha) y el titulo (debajo, a la izquierda) quedaban en filas distintas. */ .bento--three .card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .bento--three .card h3 { margin-bottom: 0; font-size: 1.15rem; } .bento--three .ico { margin-bottom: 0; flex-shrink: 0; } /* ---- Cuarta tarjeta ("Reach"): 2x2 en vez de 3 en fila + una huerfana. Solo cambia el numero de columnas; todo el estilo de las tarjetas sigue viniendo de .bento--three, que tambien lleva el contenedor. ---- */ .bento--four { grid-template-columns: repeat(2, 1fr); } /* ---- FIT: perfil del sponsor + checklist ---- */ .sp-fit { position: relative; overflow: hidden; padding: clamp(70px, 11vh, 130px) 0; border-top: 1px solid var(--line-2); } /* Franjas de bosque en los bordes, difuminadas hacia el centro para no competir con el texto — el centro se queda en el fondo plano de siempre. */ .sp-fit__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sp-fit__media::before, .sp-fit__media::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(460px, 38vw); background-image: url('images/hero-forest.jpg'); background-size: cover; background-position: center; opacity: 0.28; filter: saturate(0.9); } .sp-fit__media::before { left: 0; background-position: left center; -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%); mask-image: linear-gradient(to right, black 0%, transparent 100%); } .sp-fit__media::after { right: 0; background-position: right center; -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%); mask-image: linear-gradient(to left, black 0%, transparent 100%); } .sp-fit__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start; } .sp-fit__title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); } .sp-fit__facts { margin-top: 32px; } .sp-fit__facts div { font-size: 19px; } .sp-fit__list { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 34px 32px; } .sp-fit__kicker { font-family: "Outfit", sans-serif; font-weight: 500; color: var(--text); margin-bottom: 20px; } .sp-fit__list .tier__list { margin-bottom: 0; gap: 14px; } .sp-fit__list .tier__list li { font-size: 15px; } /* ---- WHAT'S INCLUDED: label debajo del titulo en vez de arriba ---- .head .section-label trae margin-bottom (pensado para ir arriba); aqui se invierte a margin-top. ---- */ #included .section-label { margin-bottom: 0; margin-top: 18px; } /* ---- PACKAGE: un solo tier, ancho, lista en dos columnas ---- Antes era CSS Grid (grid-template-columns + row-gap). Con grid, las DOS columnas comparten el alto de cada fila: si un item de una linea queda emparejado con uno de dos lineas, el navegador ESTIRA la fila entera a la altura del mas alto, y el hueco de mas abajo del item corto se suma al gap normal — el siguiente item de esa misma columna queda mas lejos de lo que deberia. Con numero par de items casi no se nota; en cuanto se borre uno y quede impar, la fila que pierda su pareja expone el problema (paso en lawfirmsponsor.html — arreglo preventivo aqui igual). Columnas CSS de verdad (columns/column-gap) no comparten alto entre columnas — cada una fluye independiente, asi que el espaciado entre items de una misma columna es siempre el mismo margin-bottom, sin importar cuantas lineas ocupe el item de al lado. Aguanta cualquier cantidad de items sin volver a romperse. */ .pkg { max-width: 720px; margin: 0 auto; padding: 40px 38px 36px; } .pkg .tier__note { min-height: 0; margin-bottom: 26px; } /* display:block es obligatorio: .tier__list (styles.css) ya puso display:flex en este mismo