/** * Recursos article — /recursos/{categoria}/{slug} * Loaded in via @push('styles'), outside #app. */ .govee-recursos-article { overflow-x: clip; max-width: 100%; background: var(--govee-bg); color: var(--govee-text); padding: var(--govee-space-8) 0 4rem; } /* * Outer shell = same as hub .govee-recursos__inner * (--govee-container-max 1440 + site pads). Internal hero/TOC/prose layout unchanged. */ .govee-recursos-article__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-article__inner { padding: 0 var(--govee-container-pad-md); } } @media (min-width: 1180px) { .govee-recursos-article__inner { padding: 0 var(--govee-container-pad-lg); } } /* ---- Layout: hero (row 1) + reading/TOC (row 2, desktop) ---- */ .govee-recursos-article__layout { display: block; min-width: 0; } .govee-recursos-article__hero { min-width: 0; max-width: 46rem; /* mobile / narrow: reading comfort */ } .govee-recursos-article__main { min-width: 0; max-width: 46rem; } @media (min-width: 1100px) { .govee-recursos-article__layout { display: grid; /* Left column fills space toward TOC; TOC wider for long titles */ grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); grid-template-rows: auto auto; column-gap: 2rem; justify-content: stretch; align-items: start; } /* * Hero spans BOTH columns (full width inside the 1440 shell). * Main + TOC share row 2 under the hero (sticky TOC unchanged). */ .govee-recursos-article__hero { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; width: 100%; max-width: none; } .govee-recursos-article__main { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; max-width: none; } .govee-recursos-article__toc { grid-column: 2; grid-row: 2; justify-self: stretch; } /* * Prose stays readable (~50rem); cards / aside panels / takeaways / CTA * use the full main width (same left edge — no floating islands). */ .govee-recursos-article__section-title, .govee-recursos-block--paragraph, .govee-recursos-block--list, .govee-recursos-block--quote, .govee-recursos-article__faq { max-width: 50rem; /* ~800px reading measure */ } } /* ---- Hero ---- */ .govee-recursos-article__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--govee-space-8); margin: 0 0 var(--govee-space-10); min-width: 0; } @media (min-width: 900px) { .govee-recursos-article__hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; gap: var(--govee-space-8); } } /* Desktop with TOC: hero spans full content width; text wider, image to right edge */ @media (min-width: 1100px) { .govee-recursos-article__hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } .govee-recursos-article__hero-media { width: 100%; aspect-ratio: 4 / 3; } .govee-recursos-article__hero-img { width: 100%; height: 100%; object-fit: cover; } } .govee-recursos-article__hero-copy { min-width: 0; } .govee-recursos-article__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-article__title { margin: 0 0 var(--govee-space-5); font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 400; letter-spacing: var(--govee-tracking-display); line-height: var(--govee-leading-tight); color: var(--govee-text); } .govee-recursos-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--govee-space-3) var(--govee-space-5); margin: 0 0 var(--govee-space-6); font-family: var(--govee-font-sans); font-size: var(--govee-text-caption); color: var(--govee-muted); } .govee-recursos-article__category { color: var(--govee-cyan); text-decoration: none; font-weight: var(--govee-weight-medium); } .govee-recursos-article__category:hover, .govee-recursos-article__category:focus-visible { color: var(--govee-text); outline: none; } .govee-recursos-article__intro { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-loose); color: var(--govee-muted); } .govee-recursos-article__hero-media { min-width: 0; border-radius: var(--govee-radius-xl); overflow: hidden; border: 1px solid var(--govee-border); background: var(--govee-card); aspect-ratio: 4 / 3; } .govee-recursos-article__hero-img { display: block; width: 100%; height: 100%; object-fit: cover; } .govee-recursos-article__hero-placeholder { display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 100%; padding: var(--govee-space-8); background: radial-gradient(ellipse at 18% 22%, rgba(24, 200, 255, 0.22), transparent 55%), radial-gradient(ellipse at 85% 78%, rgba(122, 92, 255, 0.2), transparent 52%), linear-gradient(155deg, var(--govee-bg-hero), var(--govee-card-2)); } .govee-recursos-article__hero-placeholder span { 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); } /* ---- Highlights ---- */ .govee-recursos-article__highlights { display: grid; grid-template-columns: 1fr; gap: var(--govee-space-4); margin: 0 0 var(--govee-space-10); padding: 0; list-style: none; min-width: 0; } @media (min-width: 700px) { .govee-recursos-article__highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .govee-recursos-article__highlight { min-width: 0; padding: var(--govee-space-6); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); } .govee-recursos-article__highlight-title { margin: 0 0 var(--govee-space-2); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-semibold); color: var(--govee-cyan); } .govee-recursos-article__highlight-text { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); color: var(--govee-muted); } /* ---- Quick answer ---- */ .govee-recursos-article__quick { margin: 0 0 var(--govee-space-12); padding: var(--govee-space-7) var(--govee-space-7) var(--govee-space-7) var(--govee-space-8); border: 1px solid rgba(24, 200, 255, 0.35); border-left: 3px solid var(--govee-cyan); border-radius: var(--govee-radius-lg); background: linear-gradient(135deg, rgba(24, 200, 255, 0.08), transparent 55%), var(--govee-card-2); box-shadow: 0 0 0 1px rgba(24, 200, 255, 0.06); } .govee-recursos-article__quick-label { 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-article__quick-text { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-loose); color: var(--govee-text); } /* ---- Body ---- */ .govee-recursos-article__body { width: 100%; min-width: 0; } .govee-recursos-article__section { margin: 0 0 var(--govee-space-12); min-width: 0; scroll-margin-top: 6.5rem; } .govee-recursos-article__section-title { margin: 0 0 var(--govee-space-7); 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-article__anchor { color: inherit; text-decoration: none; } .govee-recursos-article__anchor:hover, .govee-recursos-article__anchor:focus-visible { color: var(--govee-cyan); outline: none; } /* ---- Blocks ---- */ .govee-recursos-block { margin: 0 0 var(--govee-space-7); min-width: 0; } .govee-recursos-block--paragraph { font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-loose); color: var(--govee-muted); } .govee-recursos-block--cards { display: grid; grid-template-columns: 1fr; gap: var(--govee-space-4); margin: 0 0 var(--govee-space-7); padding: 0; list-style: none; } @media (min-width: 640px) { .govee-recursos-block--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .govee-recursos-block--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .govee-recursos-block__card { min-width: 0; padding: var(--govee-space-6); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); } .govee-recursos-block__card-title { margin: 0 0 var(--govee-space-2); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-semibold); color: var(--govee-text); } .govee-recursos-block__card-text { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos-block--list { margin: 0 0 var(--govee-space-7); padding: 0; list-style: none; } .govee-recursos-block--list li { position: relative; margin: 0 0 var(--govee-space-3); padding-left: 1.15rem; font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos-block--list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--govee-cyan); box-shadow: 0 0 0 3px rgba(24, 200, 255, 0.15); } .govee-recursos-block--quote { margin: var(--govee-space-8) 0; padding: var(--govee-space-7) var(--govee-space-8); border: none; border-left: 3px solid var(--govee-violet); border-radius: 0 var(--govee-radius-lg) var(--govee-radius-lg) 0; background: linear-gradient(90deg, rgba(122, 92, 255, 0.12), transparent 70%); } .govee-recursos-block--quote p { margin: 0; font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-size: var(--govee-text-md); font-style: italic; line-height: var(--govee-leading-normal); color: var(--govee-text); } .govee-recursos-block--aside { margin: var(--govee-space-8) 0; padding: var(--govee-space-7); border: 1px dashed rgba(24, 200, 255, 0.35); border-radius: var(--govee-radius-lg); background: rgba(12, 23, 40, 0.9); } .govee-recursos-block__aside-title { margin: 0 0 var(--govee-space-4); 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-block__aside-list { margin: 0; padding: 0; list-style: none; } .govee-recursos-block__aside-list li { position: relative; margin: 0 0 var(--govee-space-3); padding-left: 1.1rem; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos-block__aside-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--govee-cyan); font-size: 0.85em; } /* ---- Takeaways ---- */ .govee-recursos-article__takeaways { margin: 0 0 var(--govee-space-12); padding: var(--govee-space-8); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-xl); background: radial-gradient(ellipse at 0% 0%, rgba(122, 92, 255, 0.14), transparent 50%), var(--govee-card); } .govee-recursos-article__takeaways-title { margin: 0 0 var(--govee-space-6); font-family: var(--govee-font-sans); font-size: var(--govee-text-section); font-weight: var(--govee-weight-semibold); color: var(--govee-text); } .govee-recursos-article__takeaways-list { margin: 0; padding: 0; list-style: none; } .govee-recursos-article__takeaways-list li { position: relative; margin: 0 0 var(--govee-space-4); padding-left: 1.35rem; font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos-article__takeaways-list li:last-child { margin-bottom: 0; } .govee-recursos-article__takeaways-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: linear-gradient(135deg, var(--govee-cyan), var(--govee-violet)); } /* ---- FAQ ---- */ .govee-recursos-article__faq { margin: 0 0 var(--govee-space-12); } .govee-recursos-article__faq-title { margin: 0 0 var(--govee-space-7); font-family: var(--govee-font-sans); font-size: var(--govee-text-section); font-weight: var(--govee-weight-semibold); color: var(--govee-text); } .govee-recursos-article__faq-list { display: flex; flex-direction: column; gap: var(--govee-space-3); } .govee-recursos-article__faq-item { border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); overflow: hidden; } .govee-recursos-article__faq-q { cursor: pointer; list-style: none; padding: var(--govee-space-6) var(--govee-space-7); font-family: var(--govee-font-sans); font-size: var(--govee-text-base); font-weight: var(--govee-weight-medium); line-height: var(--govee-leading-snug); color: var(--govee-text); } .govee-recursos-article__faq-q::-webkit-details-marker { display: none; } .govee-recursos-article__faq-q::after { content: "+"; float: right; margin-left: var(--govee-space-4); color: var(--govee-cyan); font-weight: var(--govee-weight-semibold); } .govee-recursos-article__faq-item[open] .govee-recursos-article__faq-q::after { content: "–"; } .govee-recursos-article__faq-a { margin: 0; padding: 0 var(--govee-space-7) var(--govee-space-6); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); line-height: var(--govee-leading-loose); color: var(--govee-muted); } /* ---- CTA ---- */ .govee-recursos-article__cta { margin: 0 0 var(--govee-space-10); padding: var(--govee-space-9) var(--govee-space-8); border: 1px solid rgba(24, 200, 255, 0.28); border-radius: var(--govee-radius-xl); background: linear-gradient(120deg, rgba(24, 200, 255, 0.12), rgba(122, 92, 255, 0.1)), var(--govee-card-2); } .govee-recursos-article__cta-title { margin: 0 0 var(--govee-space-3); font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-size: var(--govee-text-section); font-weight: 400; color: var(--govee-text); } .govee-recursos-article__cta-text { margin: 0 0 var(--govee-space-7); font-family: var(--govee-font-sans); font-size: var(--govee-text-body); line-height: var(--govee-leading-body); color: var(--govee-muted); } .govee-recursos-article__cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.4rem; border-radius: var(--govee-radius-pill); background: linear-gradient(90deg, var(--govee-cyan), var(--govee-violet)); color: var(--govee-bg); font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-semibold); text-decoration: none; line-height: 1.2; } .govee-recursos-article__cta-btn:hover, .govee-recursos-article__cta-btn:focus-visible { filter: brightness(1.08); outline: none; } /* ---- Tags / back ---- */ .govee-recursos-article__tags { display: flex; flex-wrap: wrap; gap: var(--govee-space-3); margin: 0 0 var(--govee-space-8); padding: 0; list-style: none; } .govee-recursos-article__tag { padding: var(--govee-space-2) var(--govee-space-4); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-pill); background: var(--govee-card); font-family: var(--govee-font-sans); font-size: var(--govee-text-caption); color: var(--govee-muted); } .govee-recursos-article__back { display: flex; flex-wrap: wrap; align-items: center; gap: var(--govee-space-3); margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); color: var(--govee-muted); } .govee-recursos-article__back a { color: var(--govee-cyan); text-decoration: none; } .govee-recursos-article__back a:hover, .govee-recursos-article__back a:focus-visible { color: var(--govee-text); outline: none; } main.govee-dark:has(.govee-recursos-article) { background: var(--govee-bg); } /* ---- TOC (desktop sticky; hidden on mobile) ---- */ .govee-recursos-article__toc { display: none; min-width: 0; } @media (min-width: 1100px) { .govee-recursos-article__toc { display: block; position: sticky; top: 6.5rem; align-self: start; max-height: calc(100vh - 8rem); overflow-x: hidden; overflow-y: auto; } } .govee-recursos-toc { padding: var(--govee-space-6); border: 1px solid var(--govee-border); border-radius: var(--govee-radius-lg); background: var(--govee-card); } .govee-recursos-toc__head { display: flex; align-items: center; gap: var(--govee-space-3); margin: 0 0 var(--govee-space-5); padding-bottom: var(--govee-space-4); border-bottom: 1px solid var(--govee-border); } .govee-recursos-toc__mark { flex: 0 0 auto; width: 0.35rem; height: 1.05rem; border-radius: var(--govee-radius-xs); background: linear-gradient(180deg, var(--govee-cyan), var(--govee-violet)); } .govee-recursos-toc__title { margin: 0; font-family: var(--govee-font-sans); font-size: var(--govee-text-sm); font-weight: var(--govee-weight-semibold); letter-spacing: var(--govee-tracking-label); line-height: var(--govee-leading-snug); color: var(--govee-text); text-transform: none; } .govee-recursos-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: none; } .govee-recursos-toc__item { margin: 0 0 var(--govee-space-2); } .govee-recursos-toc__item:last-child { margin-bottom: 0; } .govee-recursos-toc__link { display: flex; align-items: flex-start; gap: var(--govee-space-3); padding: var(--govee-space-3) var(--govee-space-3); border-radius: var(--govee-radius-sm); border-left: 2px solid transparent; color: var(--govee-muted); text-decoration: none; font-family: var(--govee-font-sans); font-size: var(--govee-text-caption); line-height: var(--govee-leading-snug); transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .govee-recursos-toc__link:hover, .govee-recursos-toc__link:focus-visible { color: var(--govee-text); background: rgba(24, 200, 255, 0.06); outline: none; } .govee-recursos-toc__link.is-active, .govee-recursos-toc__link[aria-current="true"] { color: var(--govee-cyan); border-left-color: var(--govee-cyan); background: rgba(24, 200, 255, 0.08); } .govee-recursos-toc__num { flex: 0 0 auto; min-width: 1.1rem; font-weight: var(--govee-weight-semibold); color: inherit; opacity: 0.75; } .govee-recursos-toc__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }