` do herói traz `home-hero content-card home-panel--hero`, sem a classe `home-panel`. */ position: relative; display: grid; grid-template-columns: minmax(126px, 0.32fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.25rem); align-items: center; min-height: 235px; padding: clamp(1.25rem, 3vw, 2.25rem); overflow: hidden; border-radius: 26px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--signal-color) 32%, transparent), transparent 42%), radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--accent-color) 26%, transparent), transparent 44%), color-mix(in srgb, var(--surface-color) 88%, transparent) !important; } .home-panel--hero::after { content: ""; position: absolute; inset: auto -6rem -8rem auto; width: 20rem; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent-color) 36%, transparent); border-radius: var(--radius-circle); box-shadow: 0 0 0 2.6rem color-mix(in srgb, var(--signal-color) 7%, transparent); pointer-events: none; } .home-hero-mark { position: relative; z-index: 1; display: grid; place-items: center; } .home-panel--hero .logo-container { width: min(142px, 100%); height: auto; margin: 0; padding: 0.75rem; border: 1px solid color-mix(in srgb, var(--accent-color) 38%, var(--border-color)); border-radius: 24px; background: color-mix(in srgb, var(--background-color) 44%, transparent); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18); } .home-panel--hero .logo { display: block; width: 100%; height: auto; } .home-hero-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 0.7rem; max-width: 72ch; } .home-panel--hero h1, .home-panel--hero p { margin: 0; } .home-panel--hero h1 { font-size: clamp(2rem, 5vw, 3.7rem); line-height: 0.96; letter-spacing: -0.035em; } .home-panel--hero p { max-width: 62ch; margin-inline: 0; color: var(--muted-color); font-size: clamp(1rem, 1.8vw, 1.12rem); } .home-hero-actions { justify-content: flex-start; margin-top: 0.2rem; } .home-status-strip { margin-top: 0.1rem; } .home-status-pill { background: color-mix(in srgb, var(--surface-color) 84%, transparent); } .home-community-pulse { padding: 1rem 1.15rem; } .home-next-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-color: color-mix(in srgb, var(--accent-color) 52%, var(--border-color)); background: linear-gradient(120deg, var(--accent-soft), var(--surface-color) 58%); } .home-next-action h2, .home-next-action p { margin: 0.2rem 0 0; } .home-next-action p { color: var(--muted-color); } .home-next-action .btn { flex: 0 0 auto; } .home-community-pulse__heading, .home-community-pulse__actions, .home-community-pulse__item, .home-notice-link { display: flex; align-items: center; } .home-community-pulse__heading { justify-content: space-between; gap: 0.8rem; } .home-community-pulse__heading h2 { margin: 0; font-size: 1.2rem; } .home-community-pulse__actions { flex-wrap: wrap; gap: 0.55rem; } .home-notice-link { gap: 0.35rem; color: var(--text-color); font-size: 0.86rem; font-weight: 800; text-decoration: none; } .home-notice-link strong { display: grid; min-width: 1.25rem; min-height: 1.25rem; place-items: center; border-radius: var(--radius-pill); color: var(--background-color); background: var(--signal-color); font-size: 0.72rem; } .home-community-pulse__list { display: grid; margin-top: 0.75rem; border-top: 1px solid var(--border-color); } .home-community-pulse__item { gap: 0.6rem; min-width: 0; padding: 0.65rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent); } .home-community-pulse__icon { display: grid; width: 1.85rem; height: 1.85rem; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--accent-strong); background: var(--accent-soft); font-size: 0.78rem; } .home-community-pulse__icon--knowledge { color: var(--signal-color); background: var(--signal-soft); } .home-community-pulse__item p, .home-community-pulse__empty { margin: 0; color: var(--muted-color); font-size: 0.88rem; } .home-community-pulse__item p { flex: 1; } .home-community-pulse__item p strong { color: var(--text-color); } .home-community-pulse__item p a { color: var(--text-color); font-weight: 800; text-decoration: none; } .home-community-pulse__item p a:hover { color: var(--accent-color); } .home-community-pulse__item time { flex: 0 0 auto; color: var(--muted-color); font-size: 0.76rem; white-space: nowrap; } .home-community-pulse__empty { padding: 0.7rem 0 0.1rem; } .home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* `.home-governance-summary` dividia esta regra com `.home-section-heading` quando era uma linha só: titulo a esquerda, botao a direita. No F07 ela passou a conter uma lista de filas, e o `space-between` empurrava a lista para uma coluna estreita na direita com um vazio no meio. Agora empilha. */ .home-governance-summary { display: grid; gap: var(--space-3); } .home-section-heading h2, .home-governance-summary h2 { margin: 0.15rem 0 0; } .home-section-heading > a { flex: 0 0 auto; font-weight: 800; } .home-product-map { display: grid; gap: 0.8rem; padding: 0.2rem 0; } .home-product-map__heading { align-items: end; } .home-product-map__heading p { max-width: 54ch; margin: 0; color: var(--muted-color); line-height: 1.55; } .home-product-map__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .home-product-map__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent); border-radius: var(--radius-xl); color: var(--text-color); background: color-mix(in srgb, var(--surface-color) 92%, transparent); box-shadow: var(--box-shadow); text-decoration: none; } .home-product-map__card:hover, .home-product-map__card:focus-visible { border-color: color-mix(in srgb, var(--accent-color) 68%, var(--border-color)); background: linear-gradient(120deg, var(--accent-soft), var(--surface-color) 72%); transform: translateY(-2px); } .home-product-map__card > span:nth-child(2) { display: grid; min-width: 0; gap: 0.18rem; } .home-product-map__card strong { font-size: 1rem; } .home-product-map__card small { color: var(--muted-color); line-height: 1.4; } .home-product-map__card > .fa-arrow-right { color: var(--muted-color); font-size: 0.82rem; } .home-product-map__icon { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 11px; color: var(--accent-strong); background: var(--accent-soft); } .home-product-map__icon--operations { color: var(--signal-color); background: var(--signal-soft); } .home-product-map__icon--people { color: var(--success-color); background: color-mix(in srgb, var(--success-color) 15%, transparent); } .home-discovery, .home-members, .home-events, .home-about { padding: clamp(1.15rem, 2.5vw, 1.8rem); border-radius: 20px; } .home-feature-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color)); border-radius: var(--radius-xl); background: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--card-bg) 92%, transparent)); } .home-feature-card__icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: var(--radius-lg); color: var(--accent-strong); background: color-mix(in srgb, var(--surface-color) 78%, var(--accent-soft)); } .home-feature-card h3, .home-feature-card p, .home-feature-card small { display: block; margin: 0; } .home-feature-card h3 { margin-top: 0.2rem; font-size: clamp(1.1rem, 2vw, 1.4rem); } .home-feature-card h3 a { color: var(--text-color); text-decoration: none; } .home-feature-card h3 a:hover, .home-feature-card h3 a:focus-visible { color: var(--accent-strong); } .home-feature-card p, .home-feature-card small, .home-empty-state, .home-about p { color: var(--muted-color); } .home-feature-card p { margin-top: 0.4rem; } .home-feature-card small { margin-top: 0.7rem; font-weight: 700; } .home-empty-state { margin: 0.85rem 0 0; line-height: 1.6; } .home-member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr)); gap: 0.75rem; margin-top: 1rem; } .home-member-card { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 13px; color: var(--text-color); text-decoration: none; } .home-member-card:hover, .home-member-card:focus-visible { border-color: var(--accent-color); background: var(--accent-soft); } .home-member-card img, .home-member-card__avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: var(--radius-circle); object-fit: cover; color: #fff; background: var(--button-background); font-weight: 800; } .home-member-card > span:last-child { display: grid; min-width: 0; gap: 0.15rem; } .home-member-card strong, .home-member-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-member-card small { color: var(--muted-color); } .home-event-list { display: grid; gap: 0.55rem; margin-top: 1rem; } .home-event-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--text-color); text-decoration: none; } .home-event-list a:hover, .home-event-list a:focus-visible { border-color: var(--accent-color); } .home-event-list time { color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; white-space: nowrap; } .home-event-list span { display: grid; min-width: 0; gap: 0.12rem; } .home-event-list small { color: var(--muted-color); } .home-about { display: grid; gap: 0.65rem; justify-items: start; background: linear-gradient(135deg, color-mix(in srgb, var(--signal-soft) 70%, transparent), var(--surface-color)); } .home-about h2, .home-about p { margin: 0; } @media (max-width: 680px) { .home-next-action { align-items: flex-start; flex-direction: column; } .home-panel--hero { grid-template-columns: 1fr; justify-items: center; min-height: 0; text-align: center; } .home-panel--hero .logo-container { width: 104px; border-radius: 20px; } .home-hero-copy { justify-items: center; } .home-panel--hero p { margin-inline: auto; } .home-hero-actions, .home-status-strip { justify-content: center; } .home-community-pulse__heading { align-items: flex-start; flex-direction: column; } .home-community-pulse__item { align-items: flex-start; flex-wrap: wrap; } .home-community-pulse__item time { width: calc(100% - 2.45rem); margin-left: 2.45rem; } .home-section-heading, .home-governance-summary { align-items: flex-start; flex-direction: column; } .home-product-map__heading { align-items: flex-start; } .home-product-map__grid { grid-template-columns: minmax(0, 1fr); } } /* Painel autenticado: identidade da pessoa antes da marca e poucos blocos úteis. */ .home-panel--member { grid-template-columns: 112px minmax(0, 1fr); min-height: 168px; padding-block: clamp(1rem, 2.4vw, 1.5rem); } .home-panel--member .home-hero-mark { align-self: center; } .home-hero-avatar { display: block; width: 112px; height: 112px; border: 1px solid color-mix(in srgb, var(--accent-color) 54%, var(--border-color)); border-radius: var(--radius-circle); object-fit: cover; background: color-mix(in srgb, var(--background-color) 60%, transparent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } .home-hero-avatar--initial { display: grid; place-items: center; color: var(--accent-strong); background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--surface-color) 72%, transparent)); font-size: 2.45rem; font-weight: 900; } .home-panel--member .home-hero-copy { gap: 0.5rem; } .home-panel--member h1 { font-size: clamp(1.8rem, 4vw, 3rem); } .home-panel--member .home-status-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; } .home-admission { padding: clamp(1rem, 2vw, 1.4rem); } .home-admission .admission-progress { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); margin: 0.85rem 0 0; } .home-admission .admission-progress .is-optional { color: var(--muted-color); } .home-admission .admission-progress .is-optional > span { border-style: dashed; border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color)); } .home-discord-checkpoint { display: grid; gap: 0.85rem; margin-top: 1rem; padding: clamp(0.9rem, 2vw, 1.15rem); border: 1px solid color-mix(in srgb, #5865f2 42%, var(--border-color)); border-radius: var(--radius-xl); background: color-mix(in srgb, #5865f2 7%, var(--surface-color)); } .home-discord-checkpoint__heading, .home-discord-signals li, .home-discord-checkpoint__actions { display: flex; align-items: center; } .home-discord-checkpoint__heading { justify-content: space-between; gap: 0.75rem; } .home-discord-checkpoint h3, .home-discord-checkpoint p { margin: 0; } .home-discord-checkpoint h3 { margin-top: 0.15rem; font-size: 1.05rem; } .home-discord-checkpoint > p, .home-discord-checkpoint__actions small { color: var(--muted-color); line-height: 1.5; } .home-discord-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .home-discord-signals li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.65rem; align-items: start; min-width: 0; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-color) 90%, transparent); } .home-discord-signals__icon { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-circle); color: var(--muted-color); } .home-discord-signals li > span:nth-child(2) { display: grid; gap: 0.2rem; } .home-discord-signals small { color: var(--muted-color); line-height: 1.4; } .home-discord-signals em { grid-column: 2; color: var(--muted-color); font-size: 0.75rem; font-style: normal; font-weight: 800; } .home-discord-signals .is-complete { border-color: color-mix(in srgb, var(--success-color) 40%, var(--border-color)); } .home-discord-signals .is-complete .home-discord-signals__icon, .home-discord-signals .is-complete em { color: var(--success-color); } .home-discord-signals .is-attention { border-color: color-mix(in srgb, var(--warning-color) 48%, var(--border-color)); } .home-discord-signals .is-attention .home-discord-signals__icon, .home-discord-signals .is-attention em { color: var(--warning-color); } .home-discord-checkpoint__actions { flex-wrap: wrap; gap: 0.7rem; } .home-discord-checkpoint__actions small { max-width: 52ch; } .home-member-glance { padding: clamp(1rem, 2vw, 1.35rem); } .home-glance-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0.8rem; } .home-glance-list > a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; min-width: 0; padding: 0.35rem 0.85rem; border-left: 1px solid var(--border-color); color: var(--text-color); text-decoration: none; } .home-glance-list > a:first-child { padding-left: 0; border-left: 0; } .home-glance-list > a:last-child { padding-right: 0; } .home-glance-list > a:hover strong, .home-glance-list > a:focus-visible strong { color: var(--accent-strong); } .home-glance-list i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9px; color: var(--accent-strong); background: var(--accent-soft); } .home-glance-list span { display: grid; min-width: 0; gap: 0.1rem; } .home-glance-list small { overflow: hidden; color: var(--muted-color); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; } .home-metro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: clamp(1rem, 2.5vw, 1.5rem); border-color: color-mix(in srgb, var(--accent-color) 46%, var(--border-color)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 78%, transparent), var(--surface-color) 62%); } .home-metro__copy h2, .home-metro__copy p { margin: 0; } .home-metro__copy h2 { margin-top: 0.18rem; font-size: clamp(1.25rem, 2.2vw, 1.65rem); } .home-metro__copy p { margin-top: 0.3rem; color: var(--muted-color); } .home-metro__stream-status { display: inline-flex; align-items: center; gap: 0.38rem; width: fit-content; margin-top: 0.72rem !important; padding: 0.28rem 0.58rem; border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--background-color) 42%, transparent); color: var(--muted-color) !important; font-size: 0.82rem; font-weight: 700; } .home-metro__stream-status--online { border-color: color-mix(in srgb, var(--success-color) 55%, var(--border-color)); color: var(--success-color) !important; } .home-metro__stream-status--offline, .home-metro__stream-status--unknown { color: var(--muted-color) !important; } .home-metro__status-note { max-width: 62ch; margin-top: 0.45rem !important; font-size: 0.86rem; } .home-metro__actions { justify-content: flex-end; margin: 0; } @media (max-width: 768px) { .home-panel--member { grid-template-columns: 1fr; gap: 0.75rem; } .home-discord-checkpoint__heading { align-items: flex-start; flex-direction: column; } .home-discord-signals { grid-template-columns: 1fr; } .home-panel--member .home-hero-mark { justify-self: center; } .home-glance-list { grid-template-columns: 1fr; gap: 0.35rem; } .home-glance-list > a, .home-glance-list > a:first-child, .home-glance-list > a:last-child { padding: 0.5rem 0; border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent); border-left: 0; } .home-glance-list > a:first-child { border-top: 0; } .home-metro { grid-template-columns: 1fr; } .home-metro__actions { justify-content: flex-start; } } /* ── Hoje: próximo compromisso e filas por domínio ──────────────────── F07. "Atalhos do momento" saiu: eram quatro azulejos fixos mostrados sempre, com ou sem conteúdo ("Nenhum compromisso próximo", "0 não lidas"). Um atalho que existe para dizer que não há nada gasta a dobra e ensina a pessoa a ignorar aquele lugar — inclusive no dia em que houver algo. */ .home-next-commitment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .home-next-commitment time { color: var(--muted-color); font-variant-numeric: tabular-nums; } .home-queue-list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; padding: 0; list-style: none; } .home-queue > a { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--card-bg); text-decoration: none; color: inherit; transition: border-color var(--motion-fast) var(--ease-standard); } .home-queue > a:hover, .home-queue > a:focus-visible { border-color: var(--accent-color); } .home-queue strong { font-size: var(--text-xl); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; color: var(--accent-strong); } .home-queue span { font-size: var(--text-sm); color: var(--muted-color); } /* Fila vazia continua visível, apagada. Some-la faria a lista mudar de forma a cada visita, e quem administra precisa saber que a fila existe e está zerada — que é diferente de não ter a fila. */ .home-queue.is-empty > a { opacity: var(--opacity-muted); } .home-queue.is-empty strong { color: var(--muted-color); }