/* ============================================================================ FULL Geo Ops — Component styles ---------------------------------------------------------------------------- Reusable, class-based CSS for the wp-admin server-rendered screens. Requires tokens.css to be loaded FIRST (all values reference var(--fs-*)). Namespacing: every class is prefixed `fs-` to avoid collisions with WP core. Fonts are self-hosted (see @font-face below) — no external CDN. ============================================================================ */ /* ---- Self-hosted Inter (variable) ------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable-Italic.woff2') format('woff2'); } /* ---- Base do body: overlays (modal/drawer/menus) são anexados ao , fora do .fs-app — sem isso caem na serif do navegador ---- */ body { margin: 0; font-family: var(--fs-font-sans); color: var(--fs-body); -webkit-font-smoothing: antialiased; } /* ---- Reset (scoped, light) -------------------------------------------- */ .fs-app *, .fs-app *::before, .fs-app *::after { box-sizing: border-box; } .fs-app { font-family: var(--fs-font-sans); -webkit-font-smoothing: antialiased; color: var(--fs-body); background: var(--fs-canvas); font-size: 14px; line-height: 1.5; } .fs-app a { color: var(--fs-gold-dark); text-decoration: none; } .fs-app a:hover { color: var(--fs-gold-text); } .fs-app button { font-family: inherit; } .fs-tabular { font-variant-numeric: tabular-nums; } .fs-mono { font-family: var(--fs-font-mono); } /* ============================================================================ LAYOUT SHELL ============================================================================ */ .fs-shell { display: flex; min-height: 100vh; } .fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fs-content { flex: 1; padding: 24px; background: var(--fs-app-gradient); background-attachment: local; } .fs-content-inner { display: flex; flex-direction: column; gap: 20px; } /* full-bleed como o produto (sem max-width) */ .fs-page-title { font: var(--fs-text-page-title); color: var(--fs-ink); letter-spacing: -.3px; margin: 0; } .fs-page-sub { font: var(--fs-text-body-sm); color: var(--fs-muted); margin: 2px 0 0; } .fs-section-title { font: var(--fs-text-section-title); color: var(--fs-ink); margin: 0; } /* ============================================================================ SIDEBAR ============================================================================ */ .fs-sidebar { width: var(--fs-sidebar-width); flex-shrink: 0; height: 100vh; position: sticky; top: 0; background: var(--fs-canvas); border-right: 1px solid var(--fs-hairline); display: flex; flex-direction: column; } .fs-sidebar--collapsed { width: var(--fs-sidebar-collapsed); } .fs-sidebar { transition: width .22s var(--fs-ease-out, ease); } @media (prefers-reduced-motion: reduce) { .fs-sidebar { transition: none; } } .fs-sidebar--collapsed .fs-sidebar__logo, .fs-sidebar--collapsed .fs-sidebar__brand-meta, .fs-sidebar--collapsed .fs-nav-heading, .fs-sidebar--collapsed .fs-nav-item > span + span, .fs-sidebar--collapsed .fs-sidebar__setup { display: none; } .fs-sidebar--collapsed .fs-nav-item { justify-content: center; padding: 9px; } .fs-sidebar--collapsed .fs-sidebar__head > div:first-child { justify-content: center; } .fs-sidebar--collapsed .fs-sidebar__brand, .fs-sidebar--collapsed .fs-sidebar__user { justify-content: center; } .fs-sidebar__collapse { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--fs-gray-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .fs-sidebar__collapse:hover { background: var(--fs-surface-soft); color: var(--fs-ink); } .fs-sidebar__head { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 12px; } .fs-sidebar__logo { height: 22px; display: block; } .fs-sidebar__brand { display: flex; align-items: center; gap: 9px; border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-interact); padding: 8px 10px; } .fs-sidebar__brand-meta { display: flex; flex-direction: column; min-width: 0; } .fs-sidebar__brand-name { font-size: 12.5px; font-weight: 700; color: var(--fs-ink); white-space: nowrap; } .fs-sidebar__brand-sub { font-size: 10.5px; color: var(--fs-muted); } .fs-sidebar__nav { flex: 1; overflow: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 2px; } .fs-nav-heading { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fs-gray-400); padding: 14px 12px 5px; } .fs-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--fs-radius-interact); font-size: 13.5px; font-weight: 500; border: 0; width: 100%; text-align: left; background: transparent; color: var(--fs-gray-strong); cursor: pointer; transition: background var(--fs-duration-fast); } .fs-nav-item:hover { background: var(--fs-surface-soft); color: var(--fs-ink); } /* nav é : vence a regra generica .fs-app a (gold) */ .fs-app a.fs-nav-item { color: var(--fs-gray-strong); } .fs-app a.fs-nav-item:hover, .fs-app a.fs-nav-item.is-active { color: var(--fs-ink); } .fs-nav-item.is-active { background: var(--fs-yellow-soft); color: var(--fs-ink); font-weight: 600; } .fs-nav-item__icon { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; } .fs-nav-item > span + span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .fs-nav-item__icon svg { width: 100%; height: 100%; } .fs-sidebar__foot { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--fs-hairline); } .fs-sidebar__setup { border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; } .fs-sidebar__user { display: flex; align-items: center; gap: 9px; padding: 4px 2px; } /* ============================================================================ HEADER / TOPBAR + SEARCH ============================================================================ */ .fs-topbar { height: var(--fs-header-height); background: var(--fs-canvas); border-bottom: 1px solid var(--fs-hairline); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 20; } .fs-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-interact); padding: 0 12px; height: 36px; width: 240px; color: var(--fs-gray-400); font-size: 13px; background: var(--fs-canvas); } .fs-search--lg { height: 40px; width: auto; flex: 1; } .fs-search__icon { width: 15px; height: 15px; flex-shrink: 0; } .fs-search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--fs-ink); min-width: 0; } .fs-kbd { margin-left: auto; font-size: 10.5px; color: var(--fs-gray-400); border: 1px solid var(--fs-hairline); border-radius: 5px; padding: 1px 5px; } .fs-topbar__spacer { margin-left: auto; } /* ============================================================================ TABS ============================================================================ */ .fs-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--fs-hairline); } .fs-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font: var(--fs-text-body-sm); font-weight: 600; color: var(--fs-muted); padding: 11px 14px; position: relative; white-space: nowrap; } .fs-tab:hover { color: var(--fs-ink); } .fs-tab.is-active { color: var(--fs-ink); font-weight: 700; } .fs-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--fs-yellow); border-radius: 2px 2px 0 0; } /* ============================================================================ CARD (generic surface) ============================================================================ */ .fs-card { background: var(--fs-surface-card); border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-md); box-shadow: var(--fs-shadow-card); } .fs-card--pad { padding: 18px; } .fs-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 0; } .fs-card__title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .fs-card__icon { width: 16px; height: 16px; color: var(--fs-muted); flex: none; } .fs-card__title { font: var(--fs-text-section-title); color: var(--fs-ink); letter-spacing: -.1px; } .fs-card__desc { font-size: 12px; color: var(--fs-muted); margin-top: 2px; } .fs-card__body { padding: 14px 18px 18px; } .fs-card__foot { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--fs-hairline); background: var(--fs-surface-soft); font-size: 11.5px; color: var(--fs-muted); border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md); } /* ============================================================================ STAT / METRIC CARD ============================================================================ */ .fs-stat { background: var(--fs-surface-card); border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; } .fs-stat__label { font-size: 12px; font-weight: 500; color: var(--fs-muted); } .fs-stat__value { font: var(--fs-text-metric); color: var(--fs-ink); } .fs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; } .fs-stat__delta--up { color: var(--fs-success); } .fs-stat__delta--down { color: var(--fs-danger); } .fs-stat__delta--flat { color: var(--fs-muted); } .fs-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { .fs-stat-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ CHART CARD + placeholder canvas ---------------------------------------------------------------------------- .fs-chart is where a real charting lib mounts. The dev targets the inner [data-chart] node. See /docs/charts-spec.md for series & axes per chart. ============================================================================ */ .fs-chart { position: relative; width: 100%; } .fs-chart[data-chart] { min-height: 220px; } .fs-chart__placeholder { width: 100%; min-height: 220px; border: 1px dashed var(--fs-hairline); border-radius: var(--fs-radius-sm); background: var(--fs-surface-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fs-gray-400); font-size: 12px; text-align: center; padding: 16px; } .fs-chart__placeholder strong { color: var(--fs-gray-strong); font-size: 12.5px; } .fs-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--fs-body); } .fs-legend__item { display: inline-flex; align-items: center; gap: 6px; } .fs-legend__dot { width: 9px; height: 9px; border-radius: var(--fs-radius-full); flex: none; } /* Donut (SVG placeholder ring) */ .fs-donut { position: relative; width: 160px; height: 160px; } .fs-donut__hole { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .fs-donut__value { font: var(--fs-text-metric); color: var(--fs-ink); } .fs-donut__label { font-size: 11px; color: var(--fs-muted); } /* ============================================================================ RANKING / DATA TABLE ============================================================================ */ .fs-table { width: 100%; display: flex; flex-direction: column; } .fs-table__head { display: grid; align-items: center; padding: 9px 16px; background: var(--fs-surface-soft); border-bottom: 1px solid var(--fs-hairline); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fs-gray-400); } .fs-table__row { display: grid; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--fs-hairline); } .fs-table__row:hover { background: var(--fs-yellow-cream); } .fs-table__row.is-you { background: var(--fs-yellow-cream); } .fs-table__row:last-child { border-bottom: 0; } .fs-th-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .fs-th-sort__icon { width: 12px; height: 12px; color: var(--fs-gray-400); } .fs-cell-brand { display: inline-flex; align-items: center; gap: 9px; } .fs-rank { font-size: 12.5px; color: var(--fs-muted); font-variant-numeric: tabular-nums; } /* Ranking matrix (Topic Rankings — icon per position) */ .fs-rank-matrix__row { display: grid; align-items: center; padding: 5px 14px; border-bottom: 1px solid var(--fs-hairline); } .fs-rank-cell { display: flex; justify-content: center; padding: 3px; } .fs-rank-cell__empty { width: 24px; height: 24px; border-radius: var(--fs-radius-full); background: #EAECF0; } /* Heatmap cell (position-by-topic) */ .fs-heat-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 30px; border-radius: 6px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ============================================================================ BADGE / CHIP / PILL ============================================================================ */ .fs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--fs-radius-full); font-size: 11px; font-weight: 600; white-space: nowrap; } .fs-badge--success { background: var(--fs-success-bg); color: var(--fs-success); } .fs-badge--danger { background: var(--fs-danger-bg); color: var(--fs-danger); } .fs-badge--warning { background: var(--fs-warning-bg); color: var(--fs-warning); } .fs-badge--info { background: var(--fs-info-bg); color: var(--fs-info); } .fs-badge--neutral { background: var(--fs-surface-soft); color: var(--fs-gray-strong); } .fs-badge--outline { background: var(--fs-canvas); border: 1px solid var(--fs-hairline); color: var(--fs-body); } /* Chip = interactive/removable pill */ .fs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--fs-radius-full); border: 1px solid var(--fs-hairline); background: var(--fs-canvas); font-size: 12px; font-weight: 500; color: var(--fs-body); cursor: pointer; } .fs-chip:hover { border-color: var(--fs-gray-400); } .fs-chip.is-active { background: var(--fs-yellow-soft); border-color: var(--fs-yellow-hover); color: var(--fs-ink); } /* ============================================================================ FILTER SELECT / DROPDOWN ============================================================================ */ .fs-select { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--fs-hairline); background: var(--fs-canvas); border-radius: var(--fs-radius-interact); padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--fs-ink); cursor: pointer; white-space: nowrap; } .fs-select:hover { border-color: var(--fs-gray-400); } .fs-select__caret { width: 12px; height: 12px; color: var(--fs-gray-400); } .fs-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fs-menu { position: absolute; z-index: 30; min-width: 220px; background: var(--fs-canvas); border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-md); box-shadow: var(--fs-shadow-pop); padding: 6px; overflow: hidden; } .fs-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--fs-radius-sm); font-size: 13px; color: var(--fs-ink); cursor: pointer; } .fs-menu__item:hover { background: var(--fs-surface-soft); } /* ============================================================================ BREADCRUMB ============================================================================ */ .fs-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fs-muted); } .fs-breadcrumb a { color: var(--fs-muted); font-weight: 500; } .fs-breadcrumb a:hover { color: var(--fs-ink); } .fs-breadcrumb__sep { color: var(--fs-gray-300); } .fs-breadcrumb__current { color: var(--fs-body); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* ============================================================================ BRAND AVATAR / FAVICON (always circular) ============================================================================ */ .fs-avatar { border-radius: var(--fs-radius-full); object-fit: cover; flex-shrink: 0; } .fs-avatar--xs { width: 17px; height: 17px; } .fs-avatar--sm { width: 20px; height: 20px; } .fs-avatar--md { width: 24px; height: 24px; } .fs-avatar--lg { width: 44px; height: 44px; } .fs-avatar-letter { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fs-radius-full); color: #fff; font-weight: 700; flex-shrink: 0; } .fs-avatar-letter--sm { width: 20px; height: 20px; font-size: 9.5px; } .fs-avatar-letter--md { width: 24px; height: 24px; font-size: 10px; } /* Model/engine badge (colored square with logo) */ .fs-model { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; flex-shrink: 0; } .fs-model img { width: 60%; height: 60%; object-fit: contain; } /* ============================================================================ EMPTY STATE ============================================================================ */ .fs-empty { min-height: 440px; background: var(--fs-surface-card); border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-md); box-shadow: var(--fs-shadow-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px; } .fs-empty__icon { width: 88px; height: 88px; border-radius: var(--fs-radius-xl); background: var(--fs-yellow-soft); color: var(--fs-gold-text); display: flex; align-items: center; justify-content: center; } .fs-empty__icon svg { width: 40px; height: 40px; } .fs-empty__title { font-size: 18px; font-weight: 800; color: var(--fs-ink); } .fs-empty__desc { font-size: 13px; color: var(--fs-muted); max-width: 380px; line-height: 1.5; } /* ============================================================================ BUTTONS ============================================================================ */ .fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--fs-radius-interact); font: var(--fs-text-button); cursor: pointer; white-space: nowrap; padding: 9px 16px; transition: background var(--fs-duration-fast), border-color var(--fs-duration-fast); } .fs-btn__icon { width: 15px; height: 15px; } .fs-btn--primary { background: var(--fs-yellow); color: var(--fs-on-yellow); } .fs-btn--primary:hover { background: var(--fs-yellow-hover); } .fs-btn--secondary { background: var(--fs-canvas); border-color: var(--fs-hairline); color: var(--fs-ink); } .fs-btn--secondary:hover { background: var(--fs-surface-soft); } .fs-btn--ghost { background: transparent; color: var(--fs-gray-strong); } .fs-btn--ghost:hover { background: var(--fs-surface-soft); color: var(--fs-ink); } .fs-btn--danger { background: var(--fs-danger); color: #fff; } .fs-btn--sm { padding: 6px 12px; font-size: 12px; } .fs-btn--lg { padding: 12px 22px; font-size: 14px; } .fs-btn--icon { padding: 0; width: 32px; height: 32px; } .fs-btn[disabled] { opacity: .5; cursor: not-allowed; } /* Icon-only button (toolbar) */ .fs-icon-btn { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--fs-hairline); border-radius: var(--fs-radius-sm); background: var(--fs-canvas); color: var(--fs-gray-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .fs-icon-btn:hover { background: var(--fs-surface-soft); } .fs-icon-btn svg { width: 16px; height: 16px; } /* ============================================================================ TREEMAP (Topic Distribution) — sized cells, pastel viz palette ============================================================================ */ .fs-treemap { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 62px; gap: 6px; } .fs-treemap__cell { position: relative; border-radius: var(--fs-radius-sm); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; cursor: pointer; } .fs-treemap__cell--high { background: var(--fs-viz-green); color: var(--fs-viz-green-ink); } .fs-treemap__cell--low { background: var(--fs-viz-red); color: var(--fs-viz-red-ink); } .fs-treemap__cell--mid { background: var(--fs-viz-neutral); color: var(--fs-viz-neutral-ink); } .fs-treemap__cell:hover::after { content: attr(data-hover); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; font-weight: 600; color: #fff; background: var(--fs-viz-green-ink); border-radius: var(--fs-radius-sm); } .fs-treemap__name { font-weight: 600; line-height: 1.3; } .fs-treemap__pct { font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================================================================ MODAL / DRAWER ============================================================================ */ .fs-scrim { position: fixed; inset: 0; background: var(--fs-scrim); z-index: 100; } .fs-modal { position: fixed; z-index: 101; background: var(--fs-canvas); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-modal); display: flex; flex-direction: column; overflow: hidden; } .fs-modal--center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(680px, 92vw); max-height: 88vh; } .fs-modal--drawer { top: 0; right: 0; height: 100vh; width: min(460px, 96vw); border-radius: 0; } .fs-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fs-hairline); } .fs-modal__body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } /* ============================================================================ MISC — dashed dropzone, tooltip, progress, divider ============================================================================ */ .fs-dropzone { border: 1.5px dashed var(--fs-hairline); border-radius: var(--fs-radius-md); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--fs-surface-soft); text-align: center; cursor: pointer; } .fs-dropzone:hover { border-color: var(--fs-gold-text); } .fs-tooltip { background: var(--fs-ink); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--fs-radius-sm); box-shadow: var(--fs-shadow-pop); white-space: nowrap; } .fs-progress { height: 5px; border-radius: var(--fs-radius-full); background: var(--fs-hairline); overflow: hidden; } .fs-progress__bar { height: 100%; background: var(--fs-yellow); border-radius: inherit; } .fs-divider { height: 1px; background: var(--fs-hairline); border: 0; margin: 0; } .fs-notice { display: flex; align-items: center; gap: 12px; background: var(--fs-yellow-soft); border: 1px solid #F2E8B8; border-radius: var(--fs-radius-md); padding: 12px 16px; font-size: 13px; color: var(--fs-body); } .fs-notice__icon { width: 18px; height: 18px; color: var(--fs-warning); flex: none; } /* ============================================================================ P4 — RESPONSIVO (breakpoints: ≤640 mobile · ≤1024 tablet · desktop) Dashboard B2B desktop-first; mobile = usável sem quebra (decisão documentada no styleguide — o handoff não tem frames mobile). ============================================================================ */ /* hambúrguer: só existe no mobile */ .fs-nav-burger { display: none; appearance: none; border: 1px solid var(--fs-hairline); background: var(--fs-canvas); border-radius: 8px; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--fs-gray-strong); cursor: pointer; flex-shrink: 0; } .fs-nav-scrim { display: none; position: fixed; inset: 0; z-index: 58; background: rgba(23, 20, 10, .38); } @media (max-width: 640px) { /* sidebar vira drawer off-canvas */ .fs-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: var(--fs-sidebar-width) !important; /* drawer nunca abre colapsado */ transform: translateX(-102%); transition: transform .22s var(--fs-ease-out, ease); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); height: 100dvh; } .fs-sidebar.is-open { transform: translateX(0); } .fs-sidebar.is-open ~ .fs-main .fs-nav-scrim, body:has(.fs-sidebar.is-open) .fs-nav-scrim { display: block; } .fs-sidebar .fs-sidebar__collapse { display: none; } /* recolher não faz sentido no drawer */ .fs-nav-burger { display: inline-flex; } /* topbar compacta */ .fs-topbar { padding: 0 14px; gap: 8px; } .fs-search { width: auto; flex: 1; min-width: 0; } .fs-kbd { display: none; } .gw-demo-badge { display: none !important; } .fs-topbar .fs-btn:not(.fs-btn--primary) { display: none; } /* "Aprender" sai no mobile */ .fs-content { padding: 14px; } .fs-content-inner { gap: 14px; } } /* tablet: sidebar nasce recolhida (JS aplica sem gravar preferência) */ @media (min-width: 641px) and (max-width: 1024px) { .fs-content { padding: 18px; } } /* tabs roláveis quando não cabem (subhead e páginas) */ .fs-tabs { overflow-x: auto; scrollbar-width: none; } .fs-tabs::-webkit-scrollbar { display: none; }