/** * Recursos hub — /recursos and /recursos/{categoria} * Cards + empty states. Loaded in via @push('styles'), outside #app. */ .govee-recursos { overflow-x: clip; max-width: 100%; background: var(--govee-bg); color: var(--govee-text); padding: var(--govee-space-8) 0 4rem; } .govee-recursos__inner { max-width: var(--govee-container-max); margin: 0 auto; padding: 0 var(--govee-container-pad); min-width: 0; } @media (min-width: 768px) { .govee-recursos__inner { padding: 0 var(--govee-container-pad-md); } } @media (min-width: 1180px) { .govee-recursos__inner { padding: 0 var(--govee-container-pad-lg); } } .govee-recursos__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--govee-space-2) var(--govee-space-3); margin: 0 0 var(--govee-space-8); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); color: var(--govee-muted); line-height: var(--govee-leading-snug); } .govee-recursos__breadcrumb a { color: var(--govee-cyan); text-decoration: none; } .govee-recursos__breadcrumb a:hover, .govee-recursos__breadcrumb a:focus-visible { color: var(--govee-text); outline: none; } .govee-recursos__header { margin: 0 0 var(--govee-space-10); min-width: 0; max-width: 42rem; } .govee-recursos__eyebrow { margin: 0 0 var(--govee-space-3); font-family: var(--govee-font-sans); font-size: var(--govee-text-eyebrow); font-weight: var(--govee-weight-semibold); letter-spacing: var(--govee-tracking-eyebrow); text-transform: uppercase; color: var(--govee-cyan); } .govee-recursos__title { margin: 0 0 var(--govee-space-3); font-family: var(--govee-font-sans); font-size: var(--govee-text-title); font-weight: var(--govee-weight-bold); letter-spacing: var(--govee-tracking-heading); line-height: var(--govee-leading-tight); color: var(--govee-text); } .govee-recursos__subtitle { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-base); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos__nav { display: flex; flex-wrap: wrap; gap: var(--govee-space-3); margin: 0 0 var(--govee-space-12); } .govee-recursos__nav-link { display: inline-flex; align-items: center; padding: var(--govee-space-3) var(--govee-space-5); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-pill); background: var(--govee-card); color: var(--govee-text); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-medium); text-decoration: none; line-height: 1.2; } .govee-recursos__nav-link:hover, .govee-recursos__nav-link:focus-visible { border-color: rgba(24, 200, 255, 0.45); color: var(--govee-cyan); outline: none; } .govee-recursos__section { margin: 0 0 var(--govee-space-12); min-width: 0; } .govee-recursos__section:last-child { margin-bottom: 0; } .govee-recursos__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--govee-space-3) var(--govee-space-6); margin: 0 0 var(--govee-space-7); } .govee-recursos__section-title { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-section); font-weight: var(--govee-weight-semibold); letter-spacing: var(--govee-tracking-heading); line-height: var(--govee-leading-snug); color: var(--govee-text); } .govee-recursos__section-more { color: var(--govee-cyan); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-medium); text-decoration: none; } .govee-recursos__section-more:hover, .govee-recursos__section-more:focus-visible { color: var(--govee-text); outline: none; } .govee-recursos__grid { display: grid; grid-template-columns: 1fr; gap: var(--govee-space-7); margin: 0; padding: 0; list-style: none; min-width: 0; } @media (min-width: 640px) { .govee-recursos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .govee-recursos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .govee-recursos__grid-item { min-width: 0; } .govee-recursos__empty { margin: 0; padding: var(--govee-space-8); border: 1px dashed var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); color: var(--govee-muted); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); } .govee-recursos__empty-panel { margin: 0; padding: var(--govee-space-10) var(--govee-space-8); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); max-width: 36rem; } .govee-recursos__empty-title { margin: 0 0 var(--govee-space-3); font-family: var(--govee-font-sans); font-size: var(--govee-text-md); font-weight: var(--govee-weight-semibold); color: var(--govee-text); } .govee-recursos__empty-text { margin: 0 0 var(--govee-space-6); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos__empty-actions a { color: var(--govee-cyan); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-medium); text-decoration: none; } .govee-recursos__empty-actions a:hover, .govee-recursos__empty-actions a:focus-visible { color: var(--govee-text); outline: none; } /* ---- Card ---- */ .govee-recursos-card { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card-2); color: inherit; text-decoration: none; box-shadow: 0 0 0 1px rgba(24, 200, 255, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .govee-recursos-card:hover, .govee-recursos-card:focus-visible { border-color: rgba(24, 200, 255, 0.4); box-shadow: 0 0 0 1px rgba(24, 200, 255, 0.1), var(--govee-shadow-elevated); outline: none; } .govee-recursos-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(145deg, var(--govee-bg-hero), var(--govee-card)); } .govee-recursos-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } .govee-recursos-card__placeholder { display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 100%; padding: var(--govee-space-6); background: radial-gradient(ellipse at 20% 20%, rgba(24, 200, 255, 0.18), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(122, 92, 255, 0.16), transparent 50%), linear-gradient(160deg, var(--govee-bg-hero), var(--govee-card-2)); } .govee-recursos-card__placeholder-mark { font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-semibold); letter-spacing: var(--govee-tracking-wide); text-transform: uppercase; color: rgba(245, 247, 251, 0.55); } .govee-recursos-card__body { display: flex; flex-direction: column; gap: var(--govee-space-3); flex: 1; min-width: 0; padding: var(--govee-space-6); } .govee-recursos-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--govee-space-2) var(--govee-space-4); } .govee-recursos-card__eyebrow { font-family: var(--govee-font-sans); font-size: var(--govee-text-eyebrow); font-weight: var(--govee-weight-semibold); letter-spacing: var(--govee-tracking-eyebrow); text-transform: uppercase; color: var(--govee-cyan); } .govee-recursos-card__category { font-family: var(--govee-font-sans); font-size: var(--govee-text-caption); color: var(--govee-muted); } .govee-recursos-card__title { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-md); font-weight: var(--govee-weight-semibold); line-height: var(--govee-leading-snug); letter-spacing: var(--govee-tracking-heading); color: var(--govee-text); } .govee-recursos-card__excerpt { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); color: var(--govee-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .govee-recursos-card__date { margin-top: auto; padding-top: var(--govee-space-2); font-family: var(--govee-font-sans); font-size: var(--govee-text-caption); color: var(--govee-muted); } main.govee-dark:has(.govee-recursos) { background: var(--govee-bg); }