/* ========================================================= PLAYA BUILDER — Design System Riviera Maya limestone + Caribbean teal + blueprint marks ========================================================= */ /* Las fuentes ya NO se piden desde aquí: un @import dentro del CSS obliga al navegador a descargar styles.css entero antes de descubrirlas. Ahora van en con sus preconnect en el de las 39 páginas. Ver Documentos_Contexto/Rendimiento/Modificar/…_s2-fuentes-sin-import.md */ :root{ /* palette */ --ink: #16211B; --stone: #F2EEE2; --stone-dark: #E5DCC3; --white: #FBFAF6; --teal: #0E7C74; --teal-deep: #0A5850; --teal-tint: #DCEBE8; --clay: #BE5A2B; --clay-tint: #F3E1D3; --line: #CBC0A0; --line-dark: rgba(251,250,246,0.18); /* type */ --font-display: 'Fraunces', serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; --container: 1180px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--stone); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; } /* Salto al contenido: invisible hasta que el foco de teclado lo alcanza. No se oculta con display:none ni visibility:hidden — eso lo sacaría del orden de tabulación y dejaría de existir para quien lo necesita. */ .skip-link{ position:absolute; left:12px; top:-56px; z-index:200; background:var(--teal-deep); color:var(--white); padding:12px 18px; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; transition:top .15s ease; } .skip-link:focus{ top:12px; color:var(--white); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0 0 0.5em; letter-spacing:-0.01em; color:var(--ink); } h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:500; } h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); } h3{ font-size:clamp(1.2rem, 1.6vw, 1.5rem); } p{ margin:0 0 1em; } .lede{ font-size:1.2rem; color:#3E453D; max-width:52ch; } .eyebrow{ font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal-deep); display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; } .eyebrow::before{ content:""; width:20px; height:1px; background:var(--clay); display:inline-block; } .eyebrow.on-dark{ color:#8FD6CD; } .eyebrow.on-dark::before{ background:#E08A54; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:0.95rem; padding:14px 26px; border-radius:2px; border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .btn-primary{ background:var(--teal); color:var(--white); } .btn-primary:hover{ background:var(--teal-deep); transform:translateY(-1px); } .btn-outline{ border-color:var(--ink); color:var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--white); } .btn-outline.on-dark{ border-color:var(--line-dark); color:var(--white); } .btn-outline.on-dark:hover{ background:var(--white); color:var(--ink); } .btn-whatsapp{ background:#1F8A63; color:var(--white); } .btn-whatsapp:hover{ background:#166B4B; } .btn svg{ width:16px; height:16px; flex:none; } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(242,238,226,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--container); margin:0 auto; } .logo{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px; /* El nav es ancho: sin esto el logo es lo unico que puede encoger y el navegador parte "Playa Builder" en dos lineas. */ flex:none; white-space:nowrap; } .logo .mark{ width:30px; height:30px; border:1.5px solid var(--ink); position:relative; flex:none; } .logo .mark::before,.logo .mark::after{ content:""; position:absolute; background:var(--clay); } .logo .mark::before{ left:50%; top:6px; bottom:6px; width:1.5px; transform:translateX(-50%); } .logo .mark::after{ top:50%; left:6px; right:6px; height:1.5px; transform:translateY(-50%); } .main-nav{ display:flex; align-items:center; gap:2px; } .main-nav > ul{ display:flex; align-items:center; gap:2px; } .main-nav a, .main-nav button.navlink{ font-size:0.88rem; font-weight:500; padding:10px 10px; border-radius:2px; background:none; border:none; color:var(--ink); display:flex; align-items:center; gap:6px; white-space:nowrap; } .main-nav a:hover, .main-nav button.navlink:hover{ color:var(--teal-deep); } .has-dropdown{ position:relative; } .dropdown{ position:absolute; top:100%; left:0; min-width:240px; background:var(--white); border:1px solid var(--line); box-shadow:0 12px 28px rgba(22,33,27,0.12); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s ease; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown a{ display:block; padding:10px 12px; font-size:0.9rem; } .dropdown a:hover{ background:var(--stone); } /* ---------- F.O.S. — siglas en la barra, nombre completo en una burbuja ---------- "Foreign Owner Support" ocupaba ~188px en el nav, mas del doble que cualquier otro elemento. Se abrevia y el nombre entero aparece al pasar el raton o al recibir el foco de teclado. El nombre accesible del enlace lo fija su aria-label, no las siglas: un lector de pantalla sigue anunciando "Foreign Owner Support". */ .has-tip{ position:relative; } .fos-short{ font-variant-ligatures:none; } .fos-full{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px) scale(0.96); transform-origin:top center; opacity:0; visibility:hidden; pointer-events:none; z-index:120; white-space:nowrap; padding:13px 20px; border-radius:16px; color:var(--white); font-family:var(--font-mono); font-weight:500; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; /* Cristal: el resplandor teal va como capa de fondo, no como pseudoelemento, para no pelearse con el z-index de la propia burbuja. */ background: radial-gradient(130% 150% at 16% 8%, rgba(14,124,116,0.62) 0%, transparent 58%), radial-gradient(120% 140% at 92% 96%, rgba(190,90,43,0.30) 0%, transparent 55%), linear-gradient(145deg, rgba(22,33,27,0.88), rgba(10,88,80,0.72)); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); border:1px solid rgba(251,250,246,0.24); box-shadow: 0 14px 34px rgba(22,33,27,0.30), inset 0 1px 0 rgba(255,255,255,0.20); transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.2), visibility .22s ease; } .has-tip:hover .fos-full, .has-tip:focus-within .fos-full{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); } .header-actions{ display:flex; align-items:center; gap:10px; } .header-actions .btn{ padding:10px 18px; font-size:0.88rem; } /* El nav ya tiene un enlace "Contact": este boton lo duplicaba y ocupaba ~92px de una barra que no cabia. El CTA de la cabecera es WhatsApp. */ .header-actions .btn-outline{ display:none; } .nav-toggle{ display:none; background:none; border:1px solid var(--ink); padding:9px 12px; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } /* El umbral es 1180px — el mismo ancho que --container — porque por debajo de ahi el nav de escritorio ya no cabe en la barra. Si se cambia aqui, hay que cambiarlo tambien en js/main.js: el JS comprueba la misma anchura. */ @media (max-width: 1180px){ .main-nav{ /* Panel a pantalla completa con hueco arriba para la cabecera: asi no depende de la altura exacta del header, que cambia con la tipografia. */ position:fixed; inset:0; background:var(--stone); flex-direction:column; align-items:stretch; padding:88px 20px 20px; overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; z-index:99; } .main-nav.open{ transform:translateX(0); } .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; } .main-nav a, .main-nav button.navlink{ padding:16px 6px; border-bottom:1px solid var(--line); width:100%; justify-content:space-between; white-space:normal; } .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; } .has-dropdown.open .dropdown{ display:block; } .nav-toggle{ display:block; } /* En tactil no hay raton que pasar por encima: aqui sobra la abreviatura y el nombre completo se muestra como un elemento mas del menu. Ademas hay sitio de sobra, que era el motivo de abreviarlo. */ .fos-short{ display:none; } .fos-full{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; padding:0; border:none; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:inherit; font-family:inherit; font-weight:inherit; font-size:inherit; letter-spacing:normal; text-transform:none; white-space:normal; } } /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; } .hero-media{ /* width:100% explicito: con aspect-ratio + max-height, algunos motores recalculan tambien el ancho a partir de la proporcion y el hero deja de ir a sangre — se queda en una caja de 16/9 con hueco a la derecha. Fijando el ancho, max-height solo recorta el alto, que es lo que se busca. */ width:100%; position:relative; aspect-ratio:16/9; max-height:78vh; overflow:hidden; } .hero-media img{ width:100%; height:100%; object-fit:cover; } .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,33,27,0.05) 0%, rgba(22,33,27,0.62) 100%); } .hero-copy{ position:absolute; left:0; right:0; bottom:0; padding:56px 24px 48px; color:var(--white); } .hero-copy-inner{ max-width:var(--container); margin:0 auto; } .hero-copy h1{ color:var(--white); max-width:16ch; } .hero-copy .lede{ color:rgba(251,250,246,0.88); } /* corner crosshair signature — frames key media */ .marked{ position:relative; } /* .marked::before/::after estaban en esta lista sin declarar `content`, asi que no pintaban nada. Retirados: las esquinas las dibujan los cuatro span .cx-*. */ .marked .cx-tl,.marked .cx-tr,.marked .cx-bl,.marked .cx-br{ position:absolute; width:22px; height:22px; pointer-events:none; z-index:2; } .cx-tl{ top:14px; left:14px; border-top:1.5px solid var(--white); border-left:1.5px solid var(--white); } .cx-tr{ top:14px; right:14px; border-top:1.5px solid var(--white); border-right:1.5px solid var(--white); } .cx-bl{ bottom:14px; left:14px; border-bottom:1.5px solid var(--white); border-left:1.5px solid var(--white); } .cx-br{ bottom:14px; right:14px; border-bottom:1.5px solid var(--white); border-right:1.5px solid var(--white); } .marked.on-light .cx-tl, .marked.on-light .cx-tr, .marked.on-light .cx-bl, .marked.on-light .cx-br{ border-color: var(--ink); } /* ---------- media placeholder (build-stage stand-in for real photography) ---------- */ .media-ph{ width:100%; height:100%; background: repeating-linear-gradient(135deg, rgba(22,33,27,0.05) 0 2px, transparent 2px 14px), linear-gradient(160deg, #D8CEB0 0%, #C7BA95 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; color:#5B5540; } /* ANDAMIO: en el hero el rotulo del placeholder queda centrado justo donde cae el titular, y se pisan. Se sube arriba mientras no haya fotografia real. Al montar las imagenes, esta regla sobra. */ .hero-media .media-ph{ justify-content:flex-start; padding-top:64px; } .media-ph .ph-label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; } .media-ph .ph-file{ font-family:var(--font-mono); font-size:0.68rem; opacity:0.7; } .media-ph svg{ width:26px; height:26px; opacity:0.55; } /* ---------- section basics ---------- */ section{ padding:96px 0; } section.tight{ padding:64px 0; } .on-stone-dark{ background:var(--stone-dark); } .section-head{ max-width:640px; margin-bottom:52px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } /* ---------- 60/40 story split ---------- */ .split{ display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center; } .split.reverse{ direction:rtl; } .split.reverse > *{ direction:ltr; } .split-media{ aspect-ratio:4/5; overflow:hidden; } .split-copy p{ color:#3E453D; } @media (max-width: 860px){ .split{ grid-template-columns:1fr; direction:ltr; } .split-media{ aspect-ratio:16/10; } } /* ---------- three-step proof strip ---------- */ .proof-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .proof-step{ position:relative; } .proof-step .step-media{ aspect-ratio:4/3; overflow:hidden; margin-bottom:18px; } .proof-step h2{ margin:6px 0 6px; font-size:clamp(1.2rem, 1.6vw, 1.5rem); } .proof-step p{ color:#4A5047; font-size:0.96rem; margin:0; } @media (max-width: 860px){ .proof-strip{ grid-template-columns:1fr; } } /* connector for genuine sequences (Sereno / Our Process) */ .sequence{ position:relative; } .seq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 48px; } .seq-item{ position:relative; padding-left:0; } .seq-media{ aspect-ratio:4/3; overflow:hidden; margin-bottom:16px; } .seq-index{ font-family:var(--font-mono); font-size:0.8rem; color:var(--teal-deep); letter-spacing:0.08em; } .seq-item h2{ margin:6px 0 8px; font-size:clamp(1.2rem, 1.6vw, 1.5rem); } .seq-connector{ color:#6C6350; font-size:0.94rem; font-style:italic; margin:14px 0 0; padding:14px 18px; border-left:2px dotted var(--clay); background:rgba(190,90,43,0.04); } @media (max-width: 720px){ .seq-grid{ grid-template-columns:1fr; } } /* ---------- project proof grid (2x2) ---------- */ .project-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); } .project-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--stone); display:block; } .project-tile img, .project-tile .media-ph{ width:100%; height:100%; } .project-tile .tile-copy{ position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(180deg, transparent, rgba(22,33,27,0.82)); color:var(--white); } .project-tile .tile-copy .eyebrow{ color:#8FD6CD; margin-bottom:6px; } .project-tile .tile-copy .eyebrow::before{ background:#E08A54; } .project-tile .tile-copy h2{ color:var(--white); margin:0; font-size:1.2rem; } .project-tile:hover .media-ph{ filter:brightness(1.04); } @media (max-width:720px){ .project-grid{ grid-template-columns:1fr; } } /* ---------- video story block ---------- */ .video-block{ display:grid; grid-template-columns:1fr; gap:20px; max-width:840px; } .video-block.wide{ max-width:none; } .video-setup{ color:#3E453D; } .video-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); } .video-frame img.thumb{ width:100%; height:100%; object-fit:cover; opacity:0.8; } .video-frame iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; } .play-btn{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%; background:rgba(251,250,246,0.94); border:none; display:flex; align-items:center; justify-content:center; transition:transform .18s ease, background .18s ease; } .play-btn:hover{ transform:scale(1.06); background:var(--white); } .play-btn svg{ width:22px; height:22px; margin-left:3px; fill:var(--ink); } .video-frame[data-loaded="true"] .play-btn, .video-frame[data-loaded="true"] img.thumb{ display:none; } .video-takeaway{ margin-top:4px; padding:18px 20px; background:var(--teal-tint); border-left:2px solid var(--teal); color:var(--ink); font-size:0.96rem; } .video-takeaway strong{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:6px; color:var(--teal-deep); } .video-linkcard{ display:flex; gap:14px; align-items:center; padding:14px; background:var(--white); border:1px solid var(--line); } .video-linkcard .lc-thumb{ width:96px; aspect-ratio:16/9; flex:none; overflow:hidden; position:relative; } .video-linkcard .lc-thumb .play-btn{ width:34px; height:34px; } .video-linkcard .lc-thumb .play-btn svg{ width:12px; height:12px; } .video-linkcard .lc-copy h2, .video-linkcard .lc-copy h3{ margin:0 0 4px; font-family:var(--font-body); font-weight:600; font-size:0.95rem; } .video-linkcard .lc-copy p{ margin:0; font-size:0.82rem; color:#5B5540; } .linkcard-grid{ display:grid; gap:14px; } /* ---------- FAQ ---------- */ .faq{ max-width:760px; } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; text-align:left; background:none; border:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--ink); } .faq-q .plus{ font-family:var(--font-mono); font-size:1.1rem; color:var(--clay); flex:none; transition:transform .2s ease; } .faq-item[data-open="true"] .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .faq-a p{ padding:0 0 22px; color:#3E453D; max-width:64ch; } /* ---------- trust strip ---------- */ .trust-strip{ padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--stone-dark); } .trust-row{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:center; } .trust-item{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:#5B5540; display:flex; align-items:center; gap:8px; } .trust-item svg{ width:16px; height:16px; } /* ---------- final CTA ---------- */ .final-cta{ background:var(--ink); color:var(--white); text-align:center; padding:110px 0; } .final-cta h2{ color:var(--white); max-width:20ch; margin:0 auto 18px; } .final-cta .lede{ color:rgba(251,250,246,0.75); margin:0 auto 8px; } .final-cta .cta-row{ justify-content:center; } .final-cta .contact-line{ margin-top:34px; font-family:var(--font-mono); font-size:0.85rem; color:rgba(251,250,246,0.6); } .final-cta .contact-line a{ color:#8FD6CD; } /* ---------- form (contact) ---------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form-grid .full{ grid-column:1/-1; } .field label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:8px; letter-spacing:0.02em; } .field input, .field select, .field textarea{ width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--white); font-family:var(--font-body); font-size:0.95rem; color:var(--ink); border-radius:2px; } .field textarea{ resize:vertical; min-height:110px; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--teal); } .form-note{ font-size:0.82rem; color:#6C6350; margin-top:10px; } .form-success{ display:none; padding:20px; background:var(--teal-tint); border-left:2px solid var(--teal); } .form-success.show{ display:block; } .form-success h2{ font-size:clamp(1.2rem, 1.6vw, 1.5rem); } /* ---------- footer ---------- */ .site-footer{ background:var(--ink); color:rgba(251,250,246,0.82); padding:64px 0 28px; } .footer-grid{ display:grid; grid-template-columns:1.3fr 0.9fr 0.9fr 0.9fr 0.9fr; gap:32px; margin-bottom:48px; } .footer-col h4{ color:var(--white); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; font-weight:600;} .footer-col a{ display:block; padding:6px 0; font-size:0.92rem; color:rgba(251,250,246,0.78); } .footer-col a:hover{ color:var(--white); } .footer-brand .logo{ color:var(--white); margin-bottom:14px; } .footer-brand .logo .mark{ border-color:var(--white); } .footer-brand p{ font-size:0.9rem; color:rgba(251,250,246,0.6); max-width:32ch; } .footer-bottom{ border-top:1px solid var(--line-dark); padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:0.8rem; color:rgba(251,250,246,0.5); } @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } } /* ---------- page hero (non-homepage, shorter) ---------- */ .page-hero{ position:relative; } .page-hero .hero-media{ aspect-ratio:21/9; max-height:64vh; } @media (max-width:760px){ .page-hero .hero-media{ aspect-ratio:4/5; max-height:none; } } /* ---------- misc ---------- */ .icon-list{ display:grid; gap:14px; margin-top:24px; } .icon-list li{ display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; color:#3E453D; } .icon-list li::before{ content:"—"; color:var(--clay); font-weight:600; flex:none; } @media (max-width:760px){ section{ padding:64px 0; } } .breadcrumb{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; color:#6C6350; text-transform:uppercase; padding:20px 0 0; } .breadcrumb a:hover{ color:var(--teal-deep); } /* ========================================================= PHASE 2 — Trust, Proof, Education, Credibility components ========================================================= */ /* status badge (In Progress / Completed / Design Concept) */ .status-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px; background:rgba(251,250,246,0.94); color:var(--ink); } .status-badge.in-progress{ background:var(--clay-tint); color:#7A3818; } .status-badge.in-progress::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--clay); } .status-badge.completed{ background:var(--teal-tint); color:var(--teal-deep); } .status-badge.completed::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); } /* fact panel — project quick facts */ .fact-panel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0; border:1px solid var(--line); background:var(--white); } .fact-item{ padding:20px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .fact-item:last-child{ border-right:none; } .fact-item .fk{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:#8C8375; display:block; margin-bottom:6px; } .fact-item .fv{ font-size:0.98rem; font-weight:600; color:var(--ink); } /* case study section labels (objective / role / challenge / management / result) */ .case-section{ padding:56px 0; border-bottom:1px solid var(--line); } .case-section:last-of-type{ border-bottom:none; } .case-section .eyebrow{ margin-bottom:10px; } .case-section h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:16px; } .case-section p{ max-width:68ch; color:#3E453D; } /* team */ .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; } .team-card{ } .team-photo{ aspect-ratio:4/5; overflow:hidden; margin-bottom:18px; } .team-card.lead .team-photo{ aspect-ratio:1/1; } .team-card h2{ margin-bottom:2px; font-size:1.15rem; } .team-role{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:10px; display:block; } .team-card p{ font-size:0.92rem; color:#4A5047; } @media (max-width:860px){ .team-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } } /* difference / proof-point table-as-cards */ .diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); } .diff-card{ background:var(--white); padding:32px; } .diff-card h2{ font-size:1.05rem; margin-bottom:10px; } .diff-card .diff-say{ color:#3E453D; font-size:0.95rem; margin-bottom:14px; } .diff-card .diff-proof{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--clay); padding-top:12px; border-top:1px dotted var(--line); } @media (max-width:760px){ .diff-grid{ grid-template-columns:1fr; } } /* reviews */ .review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .review-card{ background:var(--white); border:1px solid var(--line); padding:26px; } .review-card .review-stars{ color:var(--clay); font-size:0.9rem; letter-spacing:2px; margin-bottom:12px; } .review-card p{ color:#3E453D; font-size:0.95rem; margin-bottom:14px; } .review-meta{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:#8C8375; } .review-pending{ grid-column:1/-1; text-align:center; padding:44px 24px; border:1px dashed var(--line); background:var(--stone-dark); } .review-pending .eyebrow{ justify-content:center; } .review-pending p{ max-width:52ch; margin:0 auto; color:#5B5540; } @media (max-width:760px){ .review-grid{ grid-template-columns:1fr; } } /* resource hub */ .resource-group{ margin-bottom:56px; } .resource-group:last-child{ margin-bottom:0; } .resource-group-title{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--line); } .guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .guide-card{ background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; } .guide-card .guide-media{ aspect-ratio:16/10; overflow:hidden; } .guide-card .guide-body{ padding:22px; flex:1; display:flex; flex-direction:column; } .guide-card h3{ font-size:1.05rem; margin-bottom:10px; } .guide-card p{ font-size:0.9rem; color:#4A5047; flex:1; margin-bottom:14px; } .guide-card .guide-link{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--teal-deep); } @media (max-width:900px){ .guide-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .guide-grid{ grid-template-columns:1fr; } } /* guide byline / meta */ .guide-meta{ display:flex; flex-wrap:wrap; gap:18px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:#8C8375; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:24px 0 40px; } /* experience / brands groups */ .brand-group{ padding:40px 0; border-bottom:1px solid var(--line); } .brand-group:last-child{ border-bottom:none; } .brand-group-label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--clay); margin-bottom:12px; display:block; } .brand-list{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:14px; } .brand-list li{ font-family:var(--font-body); font-weight:600; font-size:0.95rem; color:var(--ink); padding:6px 0; } .brand-list li:not(:last-child)::after{ content:"·"; margin-left:14px; color:var(--line); } .brand-note{ color:#5B5540; font-size:0.9rem; max-width:64ch; } .disclosure{ font-size:0.8rem; color:#8C8375; margin-top:40px; padding-top:20px; border-top:1px dotted var(--line); max-width:70ch; } /* ========================================================= PHASE 3 — Topic hubs, direct answers, location & guide components ========================================================= */ /* hub hero — text-only opening for the 4 topic hubs (no media) */ .hub-hero{ background:var(--stone-dark); border-bottom:1px solid var(--line); padding:72px 0 64px; } .hub-hero .eyebrow{ margin-bottom:14px; } .hub-hero h1{ margin-bottom:32px; } /* direct answer — the question answered up front, before the page unfolds */ .direct-answer{ background:var(--teal-tint); border-left:2px solid var(--teal); padding:24px 26px; max-width:74ch; } .direct-answer p{ color:var(--ink); font-size:0.98rem; margin-bottom:14px; } .direct-answer p:last-child{ margin-bottom:0; } .da-label{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:10px; color:var(--teal-deep); } /* hub anchors — the cards a hub points out to */ .hub-anchor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); } .hub-anchor{ background:var(--white); padding:28px; display:flex; flex-direction:column; } .anchor-kind{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:10px; } .hub-anchor h2{ font-size:1.08rem; margin-bottom:12px; } .hub-anchor p{ font-size:0.92rem; color:#4A5047; flex:1; margin-bottom:16px; } .anchor-link{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--teal-deep); margin-top:auto; } .anchor-link:hover{ color:var(--teal); } @media (max-width:760px){ .hub-anchor-grid{ grid-template-columns:1fr; } } /* considerations — what a specific area demands of a build */ .consideration-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .consideration-card{ background:var(--white); border:1px solid var(--line); padding:26px; } .consideration-card h3{ font-size:1.02rem; margin-bottom:10px; } .consideration-card p{ font-size:0.93rem; color:#3E453D; margin:0; } @media (max-width:760px){ .consideration-grid{ grid-template-columns:1fr; } } /* location facts — quick read on an area (label above, value below) */ .location-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border:1px solid var(--line); background:var(--white); } .lf-item{ padding:20px 22px; border-right:1px solid var(--line); font-size:0.95rem; color:var(--ink); } .lf-item:last-child{ border-right:none; } .lf-item strong{ font-family:var(--font-mono); font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#8C8375; display:block; margin-bottom:6px; } @media (max-width:760px){ .lf-item{ border-right:none; border-bottom:1px solid var(--line); } .lf-item:last-child{ border-bottom:none; } } /* numbered mistakes — ordered walk-through with a mono counter */ .mistake-list{ display:grid; gap:2px; background:var(--line); max-width:74ch; } .mistake-item{ background:var(--white); display:flex; gap:22px; padding:26px 28px; align-items:flex-start; } .m-num{ font-family:var(--font-mono); font-size:0.95rem; font-weight:600; color:var(--clay); flex:none; padding-top:2px; letter-spacing:0.04em; } .mistake-item h2{ font-size:1.05rem; margin-bottom:10px; } .mistake-item p{ font-size:0.93rem; color:#3E453D; margin:0; } @media (max-width:560px){ .mistake-item{ gap:14px; padding:22px; } } /* variables list — term and explanation, stacked */ .variables-list{ display:grid; gap:2px; background:var(--line); max-width:74ch; } .var-item{ background:var(--white); padding:20px 24px; } .var-item strong{ display:block; font-size:0.98rem; color:var(--ink); margin-bottom:6px; } .var-item span{ display:block; font-size:0.92rem; color:#4A5047; }