/* /perfiles: search + flip-card carousel — docs/BACKLOG.md's Data section, hub-dropdown + /perfiles redesign, product-designer-ux mockup approved by Samuel 2026-08-13. Ported from that mockup's own prototype CSS (kept 1:1 on colors/values/breakpoints, "no rediseñes nada" per the dispatch for this round) — the only real structural change is `.t-front` no longer being the card's outer itself: see .t-card-linkarea's own comment below for why. Linked via in seeker/directorio.html's/-en.html's (spliced in server-side by api/get-profile.js's buildSeekerDirectoryHeadHtml, same pattern already used for /shared-select.css elsewhere) — /seo-pages.css (loaded first) already supplies --teal/ --teal-dark/--cyan/--ink/--white/--muted and the page's own dotted background, .kreer-dot, .container, .breadcrumb, h1, .btn-primary. Only the two variables that file doesn't define (--slate, --border) are added here. */ :root { --slate: #46566F; --border: rgba(255,255,255,0.09); } /* Real "K·reer" wordmark mention never splitting across a line break — CLAUDE.md's permanent rule. Paired with KREER_BRAND_HTML (api/get-profile.js) / KREER_BRAND_HTML (directory- carousel.js's own client-side copy). */ .kb { white-space: nowrap; } /* Container width override (2026-08-14, second round the same day) — this page's own /seo-pages.css .container is 780px sitewide; the approved mockup round calibrated this carousel's composition (~944px usable band, ~227px cards) at 992px instead, recovering a second skill chip on desktop that 780px's narrower ~173px cards were clipping via overflow. Safe to override here rather than in /seo-pages.css itself: this file is only ever linked from seeker/directorio.html/-en.html (see this file's own header comment), so no other page sharing .container sitewide is affected, and this rule wins on source order (this stylesheet loads after /seo-pages.css, same specificity). `position: relative; z-index: 1` isn't a layout need of its own — see the Umbral atmosphere block below for why .container (not #dir-atmosphere) is where that stacking promotion belongs now that the atmosphere is page-wide. */ .container { max-width: 992px; margin: 0 auto; padding: 48px 24px 72px; position: relative; z-index: 1; } /* ---------- Search bar (same recipe as the hub's own .hub-searchbar) ---------- */ .dir-head { max-width: 640px; margin: 0 auto 6px; text-align: center; } .dir-h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 8px; line-height: 1.25; text-wrap: balance; } /* .dir-sub (the "Perfiles públicos de resultados..." subtitle paragraph) removed 2026-08-14, Samuel's direct live-site feedback — no replacement, .dir-h1's own margin-bottom (8px) plus .dir-head's own margin-bottom (6px, above) already leave a normal gap above the search bar. */ .dir-search { max-width: 560px; margin: 0 auto; } .searchbar { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.045); border: 1.5px solid rgba(22,184,166,0.42); border-radius: 14px; padding: 6px 6px 6px 14px; box-shadow: 0 0 0 1px rgba(22,184,166,0.15), 0 10px 34px rgba(22,184,166,0.2); transition: border-color 0.15s, background 0.15s; flex: 1; min-width: 0; } .searchbar:focus-within { border-color: var(--teal); background: rgba(255,255,255,0.06); } .searchbar svg { color: var(--muted); flex-shrink: 0; } .searchbar input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-family: 'Sora', sans-serif; font-size: 16px; color: var(--white); padding: 9px 0; } .searchbar input::placeholder { color: var(--slate); } /* ---------- Language filter (2026-08-14, docs/BACKLOG.md "Language filter for /perfiles", product-designer-ux/Freya mockup, 3 decisions Samuel closed the same day) — `#dir-lang-filter` (api/get-profile.js's buildSeekerDirectoryMainHtml) is a real sitewide — so no new panel CSS is needed here, only this compact trigger sizing. No per-option count (Samuel's second closed decision: "sin contadores", unlike the mockup's own `.lo-count` prototype). NOT a 7th chip type: the chip row below is already at its own width budget (DIRECTORY_SKILL_CHIP_LIMIT's own comment, api/get-profile.js) and language/result-type are different query dimensions (who someone IS / what they've done) from the chips' own free-text- skill axis. */ /* ---------- Result-type filter (2026-08-15, docs/BACKLOG.md "Result-type filter for /perfiles", product-designer-ux/Freya mockup approved by Samuel) — `#dir-rtype-filter` (same file), same real-