/* * PlantIO · web (SSR publica) — sistema de diseno, primitivas + componentes * (F1-29b). Ver `docs/web-design-standard.md` para la convencion completa. * * CSS estatico externo (D-1, mismo mecanismo que `reset.css`/`tokens.css`): * cubierto por `style-src 'self'` de la CSP, sin nonce. Cargado AL FINAL del * `` (D-2: tokens -> reset -> ui), consume las variables de * `tokens.css`. * * Naming semantico plano (D-5): conserva las clases ya presentes en los SFC * (`species-header`, `listing-card`, `care-row`, ...) — se estiliza por clase * y por selector de elemento descendiente (`.species-care dt { ... }`) para * NO tocar los templates de F1-29 (D-6). Ademas se anaden primitivas * reutilizables (`.page`, `.card`, `.notice`, `.price`, `.sci-name`, ...) * para que F1-30+ hereden el estandar en vez de repetir estilos. */ /* ---------------------------------------------------------------------- */ /* Primitivas de layout */ /* ---------------------------------------------------------------------- */ .page { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--screen-pad); } .page-header { margin-bottom: var(--sp-6); } .page-header h1 { font-size: var(--fs-6); line-height: 1.15; font-weight: 700; color: var(--txt); margin: 0 0 var(--sp-2); } /* ---------------------------------------------------------------------- */ /* Primitivas de componente */ /* ---------------------------------------------------------------------- */ .card { background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1); padding: var(--sp-4); } .sci-name { font-family: var(--font-serif); font-style: italic; color: var(--grey); font-size: var(--fs-3); } .price { font-size: var(--fs-4); font-weight: 700; color: var(--gold); } .notice { border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); line-height: 1.5; } .notice--empty { background-color: var(--panel2); color: var(--grey); border: 1px solid var(--line); } .notice--degraded { background-color: var(--orange-tint); color: var(--orange); border: 1px solid var(--orange); } /* ---------------------------------------------------------------------- */ /* Foco visible en todo lo interactivo (§21 — no negociable). */ /* ---------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-control); } /* ---------------------------------------------------------------------- */ /* Shell publico comun (F4-09) — topbar, header/nav, footer, mobile-cta. */ /* ---------------------------------------------------------------------- */ .pub-shell { min-height: 100%; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--screen-pad); background-color: var(--panel); border-bottom: 1px solid var(--line); } .topbar .brand { font-weight: 700; font-size: var(--fs-3); color: var(--txt); text-decoration: none; } .topbar .city { color: var(--grey); font-size: var(--fs-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); } .topbar .vender { margin-left: auto; color: var(--txt); font-size: var(--fs-2); font-weight: 500; text-decoration: none; } .topbar .btn--topbar { font-size: var(--fs-1); padding: var(--sp-2) var(--sp-4); } .btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--gold); color: #fff; border: none; border-radius: var(--r-control); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-2); font-weight: 600; cursor: pointer; } .pub-header { display: flex; align-items: center; padding: var(--sp-3) var(--screen-pad); border-bottom: 1px solid var(--line); background-color: var(--panel); } .pub-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .pub-nav a { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-control); font-size: var(--fs-2); font-weight: 500; color: var(--txt); text-decoration: none; } .pub-nav a.on { background-color: var(--gold); color: #fff; } .pub-nav a:hover { background-color: var(--gold-tint); } footer[data-testid='site-footer'] { margin-top: auto; background-color: var(--panel2); border-top: 1px solid var(--line); padding: var(--sp-6) var(--screen-pad) var(--sp-8); } .footer-cols { max-width: 960px; margin: 0 auto var(--sp-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-5); } .footer-col h4 { font-size: var(--fs-2); color: var(--gold); margin: 0 0 var(--sp-2); } .footer-col a, .footer-col p { display: block; font-size: var(--fs-2); color: var(--grey); text-decoration: none; margin: 0 0 var(--sp-2); } footer[data-testid='site-footer'] .legal { max-width: 960px; margin: 0 auto; font-size: var(--fs-1); color: var(--grey); border-top: 1px solid var(--line); padding-top: var(--sp-4); } .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; align-items: center; gap: var(--sp-4); background-color: var(--panel); border-top: 1px solid var(--line); padding: var(--sp-3) var(--screen-pad); box-shadow: var(--e-2); } .mobile-cta-copy { flex: 1; display: flex; flex-direction: column; font-size: var(--fs-1); color: var(--grey); } @media (max-width: 820px) { .mobile-cta { display: flex; } } /* ---------------------------------------------------------------------- */ /* /status (F1-27) */ /* ---------------------------------------------------------------------- */ .status-page { max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--screen-pad); } .status-page h1 { font-size: var(--fs-5); color: var(--gold); margin: 0 0 var(--sp-2); } .status-page p { font-size: var(--fs-3); color: var(--grey); margin: 0; } /* ---------------------------------------------------------------------- */ /* /especie/{slug} (F1-29) */ /* ---------------------------------------------------------------------- */ .species-page { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--screen-pad); } .species-header { margin-bottom: var(--sp-6); } .species-header h1 { font-size: var(--fs-6); line-height: 1.15; font-weight: 700; color: var(--txt); margin: 0 0 var(--sp-1); } .species-scientific-name { font-family: var(--font-serif); font-style: italic; color: var(--grey); font-size: var(--fs-3); margin: 0; } .species-care { background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); } .species-care h2 { font-size: var(--fs-4); color: var(--gold); margin: 0 0 var(--sp-3); } .species-care dl { margin: 0; display: grid; gap: var(--sp-3); } .care-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); } .care-row:last-child { border-bottom: none; } .species-care dt { color: var(--grey); font-size: var(--fs-2); margin: 0; } .species-care dd { color: var(--txt); font-size: var(--fs-2); font-weight: 500; margin: 0; text-align: right; } .species-listings h2 { font-size: var(--fs-4); color: var(--gold); margin: 0 0 var(--sp-4); } .listings-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .listing-card { background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e-1); overflow: hidden; transition: box-shadow 0.15s ease; } .listing-card:hover { box-shadow: var(--e-2); } .listing-link { display: block; padding: var(--sp-4); color: inherit; text-decoration: none; } .listing-link h3 { font-size: var(--fs-3); color: var(--txt); margin: 0 0 var(--sp-2); } .listing-price { font-size: var(--fs-4); font-weight: 700; color: var(--gold); margin: 0 0 var(--sp-2); } .availability-notice { background-color: var(--panel2); color: var(--grey); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); line-height: 1.5; } /* ---------------------------------------------------------------------- */ /* Pagina de error (F1-29) */ /* ---------------------------------------------------------------------- */ .error-page { max-width: 640px; margin: 0 auto; padding: var(--sp-8) var(--screen-pad); text-align: center; } .error-page h1 { font-size: var(--fs-5); color: var(--red); margin: 0 0 var(--sp-2); } .error-page p { font-size: var(--fs-3); color: var(--grey); margin: 0; } /* ---------------------------------------------------------------------- */ /* /publicacion/{slug} (F1-30) */ /* ---------------------------------------------------------------------- */ .listing-detail .page-header p { color: var(--grey); font-size: var(--fs-3); margin: 0; } .listing-description { margin-bottom: var(--sp-6); } .listing-description h2 { font-size: var(--fs-4); color: var(--gold); margin: 0 0 var(--sp-3); } .listing-description p { color: var(--txt); font-size: var(--fs-2); line-height: 1.6; margin: 0; } .listing-variants { margin-top: var(--sp-6); } .listing-variants h2 { font-size: var(--fs-4); color: var(--gold); margin: 0 0 var(--sp-3); } .listing-variants ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .variant-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); } .variant-row:last-child { border-bottom: none; } .variant-availability { font-size: var(--fs-2); font-weight: 600; color: var(--green); } .variant-availability--soldout { color: var(--red); } /* ---------------------------------------------------------------------- */ /* / (F4-20) — portada SEO. */ /* ---------------------------------------------------------------------- */ .home-page { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--screen-pad); } .hero { aspect-ratio: 21 / 9; border-radius: var(--r-card); border: 1px solid var(--line); background: linear-gradient(135deg, var(--panel2), var(--gold-tint)); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: var(--sp-6); } .hero svg { width: 22%; height: 22%; stroke: var(--gold); fill: none; stroke-width: 1.1; } .masthead { margin-bottom: var(--sp-5); } .masthead h1 { font-size: var(--fs-6); line-height: 1.15; font-weight: 700; color: var(--txt); margin: 0 0 var(--sp-2); } .lede { color: var(--grey); font-size: var(--fs-3); max-width: 72ch; margin: 0; } .appgate { display: flex; gap: var(--sp-3); align-items: flex-start; background-color: var(--panel); border: 1px dashed var(--line); border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); color: var(--grey); margin: 0 0 var(--sp-6); } .appgate .tag { font-family: ui-monospace, monospace; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-pill); padding: 0.12em 0.6em; white-space: nowrap; } .how-it-works { margin-bottom: var(--sp-6); } .how-it-works h2 { font-size: var(--fs-4); color: var(--gold); margin: 0 0 var(--sp-3); } .steps { margin: 0; padding: 0; list-style: none; } .steps li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-2); } .steps li:first-child { border-top: 0; } .steps .n { flex: 0 0 24px; height: 24px; border-radius: var(--r-pill); background-color: var(--gold-tint); border: 1px solid var(--gold); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-1); } .steps .muted { color: var(--grey); font-size: var(--fs-1); margin-top: var(--sp-1); } .btnrow { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } .btn.ghost { background-color: transparent; color: var(--gold); border: 1px solid var(--gold); text-decoration: none; } .sec-title { margin: var(--sp-6) 0 var(--sp-4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); } .sec-title h2 { font-size: var(--fs-4); color: var(--txt); margin: 0; } .sec-title .all { font-size: var(--fs-1); font-weight: 600; color: var(--gold); text-decoration: none; white-space: nowrap; } .thumbgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } /* ---------------------------------------------------------------------- */ /* / (F4-20-FE) — grid de "Categorías": tile foto + nombre + conteo. */ /* ---------------------------------------------------------------------- */ .home-categories .ph.photo { aspect-ratio: 4 / 3; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3); background: linear-gradient(135deg, var(--panel2), var(--gold-tint)); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .home-categories .ph.photo svg { width: 30%; height: 30%; stroke: var(--gold); fill: none; stroke-width: 1.1; } .home-categories .bd .muted { color: var(--grey); font-size: var(--fs-1); } /* ---------------------------------------------------------------------- */ /* /buscar (F4-23) — formulario de filtros: grilla de 2 columnas, label */ /* arriba del control. Mockup `docs/web-publica-mockup.html` (lineas 127, */ /* 132-135, nodo `buscar`): mismos nombres de clase, valores mapeados a los */ /* tokens de esta hoja (`--sp-*`/`--fs-*`/`--r-control`/`--line`/`--panel`/ */ /* `--txt`) en vez de los px/rem magicos del mockup, para consistencia con */ /* `.card`/`.btnrow` de arriba. */ /* ---------------------------------------------------------------------- */ .search-filters { margin-bottom: var(--sp-4); } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-4); } .field { margin-bottom: var(--sp-3); } .field label { display: block; font-size: var(--fs-1); font-weight: 600; color: var(--txt); margin-bottom: var(--sp-1); } .field input, .field select { width: 100%; font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-control); background-color: var(--panel); color: var(--txt); } .search-filters .btnrow .muted { color: var(--grey); font-size: var(--fs-2); } /* ---------------------------------------------------------------------- */ /* /vivero/{slug} (F5-24) — pill de estado (PRO/verificado) + estrellas. */ /* Mockup `docs/web-publica-mockup.html` (nodo `vivero`, lineas 480-497): */ /* `.pill.acc`/`.stars`. Unicas clases nuevas de esta tarea (dossier, */ /* bloque "Inventario de archivos"): el resto (`.crumbs`/`.masthead`/ */ /* `.lede`/`.card`/`.sec-title`/`.thumbgrid`/`.btnrow`/`.muted`) ya existe. */ /* ---------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; font-size: var(--fs-1); font-weight: 600; border-radius: var(--r-pill); padding: 0.12em 0.7em; border: 1px solid var(--line); color: var(--grey); margin-right: var(--sp-2); } .pill.acc { border-color: var(--gold); color: var(--gold); background-color: var(--gold-tint); } .stars { color: var(--gold); letter-spacing: 0.05em; margin-right: var(--sp-1); }