/* ===================================================================== Eduliv Design System (rebrand 2026) × MemberKit — CSS de preview v2 Uso: colar em uma extensão de user-CSS (Stylus etc.) para acesse.eduliv.com.br. Não altera nada no MemberKit. Fonte da verdade: projeto "Eduliv Design System" no Claude Design — colors_and_type.css · components.css · filters.css · dashboard.css · preview/*.html (markup canônico). Cada bloco abaixo cita o componente do DS que ele reproduz. Temas: · MemberKit "classic" (html[data-theme="classic"]) → tema CLEAN (paper + ink + lime) · MemberKit "dracula" (html[data-theme="dracula"], wrappers .dark) → tema DARK do DS ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Manrope:wght@300..800&family=JetBrains+Mono:ital,wght@0,300..700;1,300..700&display=swap"); /* --------------------------------------------------------------------- 1. TOKENS — tema clean (padrão) ← colors_and_type.css + aliases de components.css --------------------------------------------------------------------- */ :root { /* paleta primitiva */ --edu-ink-1000: #0A0E18; --edu-ink-900: #0F1421; --edu-ink-700: #2B3245; --edu-ink-500: #5C6373; --edu-ink-300: #9AA3B8; --edu-ink-200: #C6CBD7; --edu-ink-100: #E3E6EC; --edu-paper-50: #FAF9F6; --edu-paper-100: #F2F0ED; --edu-paper-200: #E7E4DF; --edu-paper-300: #D6D1C8; --edu-liv-100: #F4FFCF; --edu-liv-300: #EAFEA6; --edu-liv-500: #DCFE6E; /* Liv lime — o CTA */ --edu-liv-700: #A9C838; --edu-liv-900: #5E7018; --edu-success: #1F8A5B; --edu-warning: #D4A21E; --edu-danger: #C8341E; --edu-info: #2A6FDB; /* superfícies semânticas */ --edu-bg: var(--edu-paper-100); --edu-bg-elevated: var(--edu-paper-50); --edu-bg-sunken: var(--edu-paper-200); --edu-bg-invert: var(--edu-ink-900); --edu-fg: var(--edu-ink-900); --edu-fg-muted: var(--edu-ink-500); --edu-fg-subtle: var(--edu-ink-300); --edu-fg-invert: var(--edu-paper-50); --edu-border: var(--edu-ink-100); --edu-border-strong: var(--edu-ink-200); --edu-border-ink: var(--edu-ink-900); --edu-accent: var(--edu-liv-500); --edu-accent-ink: var(--edu-ink-1000); --edu-accent-soft: var(--edu-liv-100); --edu-accent-strong: var(--edu-liv-900); --edu-surface-hover: var(--edu-paper-200); --edu-scrim: rgba(10, 14, 24, 0.45); --edu-success-soft: #DFF1E7; --edu-success-fg: var(--edu-success); --edu-warning-soft: #FAEDC8; --edu-warning-fg: #8A6A0E; --edu-danger-soft: #FBE3DC; --edu-danger-fg: var(--edu-danger); --edu-info-soft: #DEE9FB; --edu-info-fg: #2155A8; /* tipografia */ --edu-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --edu-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --edu-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* raios */ --edu-r-xs: 4px; --edu-r-sm: 8px; --edu-r-md: 12px; --edu-r-lg: 18px; --edu-r-xl: 28px; --edu-r-pill: 999px; /* sombras */ --edu-shadow-1: 0 1px 0 rgba(15, 20, 33, 0.04), 0 1px 2px rgba(15, 20, 33, 0.06); --edu-shadow-2: 0 2px 4px rgba(15, 20, 33, 0.06), 0 6px 16px rgba(15, 20, 33, 0.08); --edu-shadow-3: 0 10px 24px rgba(15, 20, 33, 0.10), 0 24px 48px rgba(15, 20, 33, 0.10); --edu-shadow-pop: 6px 6px 0 var(--edu-ink-900); /* assinatura */ --edu-shadow-pop-sm: 2px 2px 0 var(--edu-ink-900); --edu-focus-ring: 0 0 0 3px var(--edu-liv-300); /* motion */ --edu-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --edu-dur-fast: 120ms; --edu-dur-base: 220ms; /* -------- remapeamento das variáveis Tailwind/shadcn do MemberKit -------- */ --background: 36 16.1% 93.9% !important; /* paper-100 */ --foreground: 223.3 37.5% 9.4% !important; /* ink-900 */ --card: 45 28.6% 97.3% !important; /* paper-50 */ --card-foreground: 223.3 37.5% 9.4% !important; --popover: 45 28.6% 97.3% !important; --popover-foreground: 223.3 37.5% 9.4% !important; --muted: 37.5 14.3% 89% !important; /* paper-200 */ --muted-foreground: 221.7 11.1% 40.6% !important;/* ink-500 */ --secondary: 37.5 14.3% 89% !important; --secondary-foreground: 221.7 11.1% 40.6% !important; --accent: 37.5 14.3% 89% !important; --accent-foreground: 223.3 37.5% 9.4% !important; --border: 220 19.1% 90.8% !important; /* ink-100 */ --input: 222.4 17.5% 81% !important; /* ink-200 */ --ring: 72.9 56.7% 50.2% !important; /* liv-700 */ --brand: 74.2 98.6% 71.4% !important; /* liv-500 */ --brand-light: 73.6 97.8% 82.4% !important; /* liv-300 */ --brand-dark: 72.9 56.7% 50.2% !important; /* liv-700 */ --brand-invert: 222.9 41.2% 6.7% !important; /* ink-1000 — texto sobre lime */ --destructive: 7.8 73.9% 45.1% !important; --destructive-foreground: 0 0% 100% !important; --navbar-primary: 45 28.6% 97.3% !important; --navbar-secondary: 45 28.6% 97.3% !important; --navbar-background: none !important; --devise-background: none !important; --swiper-theme-color: #DCFE6E !important; --swiper-pagination-color: #DCFE6E !important; --ranking-hero-bg: #0F1421 !important; --ranking-subtitle-color: #9AA3B8 !important; } /* --------------------------------------------------------------------- 1b. TOKENS — tema dark ← bloco [data-theme="dark"] de filters.css/components.css --------------------------------------------------------------------- */ html[data-theme="dracula"], .dark { color-scheme: dark; --edu-bg: var(--edu-ink-900); --edu-bg-elevated: #161D2E; --edu-bg-sunken: #0B101C; --edu-bg-invert: var(--edu-paper-100); --edu-fg: var(--edu-paper-100); --edu-fg-muted: var(--edu-ink-300); --edu-fg-subtle: var(--edu-ink-500); --edu-fg-invert: var(--edu-ink-900); --edu-border: #232B3E; --edu-border-strong: #323B52; --edu-border-ink: var(--edu-paper-100); --edu-accent: var(--edu-liv-500); --edu-accent-ink: var(--edu-ink-1000); --edu-accent-soft: #28301E; --edu-accent-strong: var(--edu-liv-500); --edu-surface-hover: #202940; --edu-scrim: rgba(4, 6, 11, 0.62); --edu-success-soft: #142E20; --edu-success-fg: #74CCA4; --edu-warning-soft: #332A12; --edu-warning-fg: #EBC979; --edu-danger-soft: #371712; --edu-danger-fg: #ED8975; --edu-info-soft: #14233D; --edu-info-fg: #8AB3F0; --edu-shadow-1: 0 1px 0 rgba(5, 7, 13, 0.2), 0 1px 2px rgba(5, 7, 13, 0.3); --edu-shadow-2: 0 2px 4px rgba(5, 7, 13, 0.3), 0 6px 16px rgba(5, 7, 13, 0.35); --edu-shadow-3: 0 10px 24px rgba(5, 7, 13, 0.4), 0 24px 48px rgba(5, 7, 13, 0.4); --edu-shadow-pop: 6px 6px 0 var(--edu-liv-900); --edu-shadow-pop-sm: 2px 2px 0 var(--edu-liv-900); --edu-focus-ring: 0 0 0 3px rgba(220, 254, 110, 0.3); --background: 223.3 37.5% 9.4% !important; --foreground: 36 16.1% 93.9% !important; --card: 222.5 35.3% 13.3% !important; --card-foreground: 36 16.1% 93.9% !important; --popover: 222.5 35.3% 13.3% !important; --popover-foreground: 36 16.1% 93.9% !important; --muted: 222.2 27.8% 19% !important; --muted-foreground: 222 17.4% 66.3% !important; --secondary: 222.2 27.8% 19% !important; --secondary-foreground: 222 17.4% 66.3% !important; --accent: 223.1 33.3% 18.8% !important; --accent-foreground: 36 16.1% 93.9% !important; --border: 222.2 27.8% 19% !important; --input: 223.1 24.2% 25.9% !important; --ring: 74.2 98.6% 71.4% !important; --brand: 74.2 98.6% 71.4% !important; --brand-light: 73.6 97.8% 82.4% !important; --brand-dark: 72.9 56.7% 50.2% !important; --brand-invert: 222.9 41.2% 6.7% !important; --destructive: 10 76.9% 69.4% !important; --destructive-foreground: 222.9 41.2% 6.7% !important; --navbar-primary: 222.5 35.3% 13.3% !important; --navbar-secondary: 222.5 35.3% 13.3% !important; } /* --------------------------------------------------------------------- 1c. TOPBAR no tema clean — o MemberKit mantém .dark na topbar mesmo no "classic"; aqui a barra segue o tema da página. --------------------------------------------------------------------- */ html[data-theme="classic"] .topbar, html[data-theme="classic"] .topbar.dark { color-scheme: light; --edu-bg: var(--edu-paper-100); --edu-bg-elevated: var(--edu-paper-50); --edu-bg-sunken: var(--edu-paper-200); --edu-bg-invert: var(--edu-ink-900); --edu-fg: var(--edu-ink-900); --edu-fg-muted: var(--edu-ink-500); --edu-fg-subtle: var(--edu-ink-300); --edu-fg-invert: var(--edu-paper-50); --edu-border: var(--edu-ink-100); --edu-border-strong: var(--edu-ink-200); --edu-border-ink: var(--edu-ink-900); --edu-accent-strong: var(--edu-liv-900); --edu-accent-soft: var(--edu-liv-100); --edu-surface-hover: var(--edu-paper-200); --edu-shadow-2: 0 2px 4px rgba(15, 20, 33, 0.06), 0 6px 16px rgba(15, 20, 33, 0.08); --edu-shadow-pop: 6px 6px 0 var(--edu-ink-900); --edu-shadow-pop-sm: 2px 2px 0 var(--edu-ink-900); --edu-focus-ring: 0 0 0 3px var(--edu-liv-300); --background: 36 16.1% 93.9% !important; --foreground: 223.3 37.5% 9.4% !important; --card: 45 28.6% 97.3% !important; --popover: 45 28.6% 97.3% !important; --popover-foreground: 223.3 37.5% 9.4% !important; --muted: 37.5 14.3% 89% !important; --muted-foreground: 221.7 11.1% 40.6% !important; --secondary: 37.5 14.3% 89% !important; --secondary-foreground: 221.7 11.1% 40.6% !important; --accent: 37.5 14.3% 89% !important; --accent-foreground: 223.3 37.5% 9.4% !important; --border: 220 19.1% 90.8% !important; --input: 222.4 17.5% 81% !important; } /* --------------------------------------------------------------------- 2. BASE — tipografia ← colors_and_type.css (semantic type styles) --------------------------------------------------------------------- */ html, body { background: var(--edu-bg) !important; color: var(--edu-fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body, .font-sans, button, input, select, textarea { font-family: var(--edu-font-sans) !important; } body { line-height: 1.55; } h1, h2, .h1, .h2 { font-family: var(--edu-font-display) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -0.02em; text-wrap: balance; } .h1 { font-size: 40px !important; } .h2 { font-size: 30px !important; letter-spacing: -0.015em; } h3, .h3 { font-family: var(--edu-font-sans) !important; font-weight: 700 !important; letter-spacing: -0.005em; } h4, .h4 { font-family: var(--edu-font-sans) !important; font-weight: 700 !important; } code, kbd, pre { font-family: var(--edu-font-mono) !important; } ::selection { background: var(--edu-accent); color: var(--edu-accent-ink); } /* foco visível — anel lime (o MemberKit usa outline-none em quase tudo) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--edu-liv-700) !important; outline-offset: 2px !important; } /* lime nunca é cor de texto sobre paper — só preenchimento (README: "sempre com ink por cima") */ /* (sem barras invertidas nos seletores: a extensão User JavaScript and CSS as remove e o Chrome descarta a regra inteira — por isso [class~="…"] no lugar de .hover:x escapado) */ .text-brand:not(.dark *), [class~="hover:text-brand"]:hover:not(.dark *), [class~="md:hover:text-brand"]:hover:not(.dark *) { color: var(--edu-accent-strong) !important; } .badge-brand:not(.dark *) { background: var(--edu-accent-soft) !important; color: var(--edu-accent-strong) !important; } /* resultado de busca / favoritos: título em ink, não em lime */ .search__entry h4 a:not(.dark *) { color: var(--edu-fg) !important; } .search__entry h4 a:hover { text-decoration: underline; text-underline-offset: 3px; } .search__entry p.text-brand:not(.dark *) { color: var(--edu-accent-strong) !important; } /* --------------------------------------------------------------------- 3. TOPBAR ← preview/nav.html (paper-50 · borda ink-100 · ghost buttons) --------------------------------------------------------------------- */ header.topbar { background: var(--edu-bg-elevated) !important; background-image: none !important; color: var(--edu-fg) !important; border-bottom: 1px solid var(--edu-border); box-shadow: none !important; } .topbar__button { background: transparent !important; color: var(--edu-fg-muted) !important; border-radius: var(--edu-r-md) !important; transition: background var(--edu-dur-fast) var(--edu-ease-out), color var(--edu-dur-fast) var(--edu-ease-out); } .topbar__button:hover, .topbar__button[aria-expanded="true"] { background: var(--edu-surface-hover) !important; color: var(--edu-fg) !important; } .topbar__button img.rounded-full { border: 1.5px solid var(--edu-border-strong); } /* .avatar */ .topbar__badge { /* .badge.b-liv */ background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; font-family: var(--edu-font-mono) !important; font-weight: 600 !important; border: 1.5px solid var(--edu-bg-elevated) !important; border-radius: var(--edu-r-pill) !important; } /* logo: em barra clara o wordmark branco atual vira ink (a logomarca nova precisa ser trocada em Aparência) */ .topbar:not(.dark) img.max-h-12, html[data-theme="classic"] .topbar img.max-h-12 { filter: brightness(0) invert(8%) sepia(24%) saturate(1400%) hue-rotate(196deg) brightness(92%); } /* busca ← .fsearch (filters.css): 36px · 1px border-strong · r-sm · focus ring */ .topbar__search-control, .navbar__search-control { position: relative; } .topbar__search-input, .navbar__search-input { height: 36px; background: var(--edu-bg) !important; color: var(--edu-fg) !important; border: 1px solid var(--edu-border-strong) !important; border-radius: var(--edu-r-sm) !important; font-size: 14px !important; box-shadow: none !important; transition: border-color var(--edu-dur-fast) var(--edu-ease-out), box-shadow var(--edu-dur-fast) var(--edu-ease-out); } .topbar__search-input::placeholder, .navbar__search-input::placeholder { color: var(--edu-fg-subtle) !important; } .topbar__search-input:focus, .navbar__search-input:focus { border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-focus-ring) !important; outline: none !important; } .topbar__search-control button, .navbar__search-control button { color: var(--edu-fg-subtle) !important; } .topbar__search-control:focus-within button { color: var(--edu-fg) !important; } /* --------------------------------------------------------------------- 4. SIDEBAR (nav#navbar) Item ativo = lime + ink (linguagem de "selecionado" do DS: .step.current / .cal-d.sel / .kpi.accent). Hover = surface-hover (.menu-item:hover). --------------------------------------------------------------------- */ #navbar, nav.navbar, .navbar-blend-gradient, .navbar-dark, .navbar__inner { background: var(--edu-bg-elevated) !important; background-image: none !important; color: var(--edu-fg) !important; } #navbar::before, #navbar::after, .navbar__inner::before, .navbar__inner::after { background: none !important; } #navbar { border-right: 1px solid var(--edu-border); } .navbar__link { background: transparent !important; color: var(--edu-fg-muted) !important; border-radius: var(--edu-r-md) !important; font-size: 14px !important; font-weight: 500 !important; padding: 8px 10px !important; transition: background var(--edu-dur-fast) var(--edu-ease-out), color var(--edu-dur-fast) var(--edu-ease-out); } .navbar__link:hover { background: var(--edu-surface-hover) !important; color: var(--edu-fg) !important; } .navbar__link.active { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; font-weight: 700 !important; } .navbar__text { font-family: var(--edu-font-sans) !important; } .navbar__badge { /* .fcount */ background: var(--edu-bg-sunken) !important; color: var(--edu-fg-muted) !important; font-family: var(--edu-font-mono) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1; min-width: 19px; height: 19px !important; padding: 0 6px !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--edu-r-pill) !important; font-variant-numeric: tabular-nums; } .navbar__link.active .navbar__badge { background: var(--edu-accent-ink) !important; color: var(--edu-accent) !important; } .navbar__divisor { border: 0 !important; height: 1px !important; background: var(--edu-border) !important; margin: 8px 8px !important; } .navbar__button { color: var(--edu-fg-muted) !important; border-radius: var(--edu-r-md) !important; } .navbar-backdrop { background: var(--edu-scrim) !important; } /* --------------------------------------------------------------------- 5. ÁREA PRINCIPAL + CABEÇALHO DE PÁGINA ← .phead (components.css / preview/page-header.html) crumbs · título display · sub 14.5px muted · .hairline · ações compactas (menu ghost · secundário · PRIMÁRIO lime por último) --------------------------------------------------------------------- */ #main { background: var(--edu-bg) !important; color: var(--edu-fg) !important; } #main > .backdrop-blur-lg, #main .backdrop-blur-lg.relative { background: color-mix(in srgb, var(--edu-bg-elevated) 82%, transparent) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--edu-border); } .backdrop-edge { display: none !important; } .backdrop-blur-lg h4.h3 { /* .phead .title (variante phead-sm = 22px) */ font-family: var(--edu-font-display) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.02em; line-height: 1.08 !important; color: var(--edu-fg) !important; text-wrap: balance; } .backdrop-blur-lg p.text-muted-foreground { /* .phead .sub */ font-size: 14.5px !important; color: var(--edu-fg-muted) !important; margin-top: 5px; } /* .phead .actions — botões compactos, sem esticar */ .backdrop-blur-lg .flex.gap-2 { gap: 10px !important; } .backdrop-blur-lg .btn { flex-grow: 0 !important; } /* a ação principal (criar) é a última — como "+ Nova aula" no preview do DS */ .backdrop-blur-lg .btn:last-child, .backdrop-blur-lg .btn:only-child { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-shadow-pop) !important; } .backdrop-blur-lg .btn:last-child:hover, .backdrop-blur-lg .btn:only-child:hover { box-shadow: var(--edu-shadow-pop-sm) !important; transform: translate(2px, 2px); background: var(--edu-accent) !important; } .backdrop-blur-lg .btn:last-child:active, .backdrop-blur-lg .btn:only-child:active { box-shadow: none !important; transform: translate(4px, 4px); } /* títulos de seção da vitrine ("Análise de Dados" + "ver tudo") */ h3.h2 { font-family: var(--edu-font-display) !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: var(--edu-fg) !important; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } h3.h2 a, .h2 > a.inline-block { /* .phead .back — mono caps */ font-family: var(--edu-font-mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--edu-fg-muted) !important; text-decoration: none !important; margin-left: 0 !important; padding: 3px 8px; border-radius: 6px; transition: all var(--edu-dur-fast) var(--edu-ease-out); } h3.h2 a:hover, .h2 > a.inline-block:hover { color: var(--edu-fg) !important; background: var(--edu-surface-hover); } /* título do curso / da aula ← h1/h2 do DS (Bricolage 600) */ h3.text-xl.font-medium.tracking-tight, h2.content__title { font-family: var(--edu-font-display) !important; font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.08 !important; color: var(--edu-fg) !important; text-wrap: balance; } h2.content__title { font-size: 32px !important; } /* --------------------------------------------------------------------- 6. BOTÕES ← .btn canônico (components.css) base: Manrope 600 15px · borda 2px border-ink · 10px 18px · r 12 · gap 8 primary = lime + shadow-pop (hover: pop-sm + translate 2px; active: sem sombra + 4px) secondary = bg-elevated · ink = bg-invert · ghost = sem borda · danger sm: 6px 12px 13px r8 · lg: 14px 24px 17px r14 · icon: 41×41 --------------------------------------------------------------------- */ .btn { font-family: var(--edu-font-sans) !important; font-weight: 600 !important; font-size: 15px; line-height: 1.2; padding: 10px 18px; border: 2px solid var(--edu-border-ink) !important; border-radius: var(--edu-r-md) !important; background: transparent; color: var(--edu-fg); box-shadow: none; gap: 8px; white-space: nowrap; transition: all var(--edu-dur-fast) var(--edu-ease-out) !important; } .btn-md { padding: 10px 18px !important; font-size: 15px !important; } .btn-lg { padding: 14px 24px !important; font-size: 17px !important; border-radius: 14px !important; } .btn-sm { padding: 6px 12px !important; font-size: 13px !important; border-radius: var(--edu-r-sm) !important; gap: 6px; } .btn.p-2, .btn-icon { padding: 0 !important; width: 41px; height: 41px; flex: none; justify-content: center; } .btn-sm.btn-icon, .btn-ghost.btn-icon { width: 31px; height: 31px; } .btn:disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; } .btn-block { width: 100%; } /* PRIMÁRIO — lime + pop (todo CTA) */ .btn-primary, .btn-outline-primary, input.btn.btn-primary, .btn-brand { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-shadow-pop) !important; } .btn-primary:hover, .btn-outline-primary:hover, .btn-brand:hover { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; box-shadow: var(--edu-shadow-pop-sm) !important; transform: translate(2px, 2px); } .btn-primary:active, .btn-outline-primary:active, .btn-brand:active { box-shadow: none !important; transform: translate(4px, 4px); } /* botão "Publicar" embutido no campo de comentário: pop reduzido para não vazar do campo */ .stack-input .btn-primary { box-shadow: var(--edu-shadow-pop-sm) !important; } .stack-input .btn-primary:hover { box-shadow: none !important; transform: translate(2px, 2px); } /* SECUNDÁRIO — bg-elevated + borda ink 2px */ .btn-secondary, .btn-outline-secondary { background: var(--edu-bg-elevated) !important; color: var(--edu-fg) !important; border-color: var(--edu-border-ink) !important; backdrop-filter: none !important; } .btn-secondary:hover, .btn-outline-secondary:hover { background: var(--edu-surface-hover) !important; } /* INK */ .btn-dark, .btn-ink { background: var(--edu-bg-invert) !important; color: var(--edu-fg-invert) !important; border-color: var(--edu-border-ink) !important; } /* GHOST */ .btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--edu-fg-muted) !important; } .btn-ghost:hover { background: var(--edu-surface-hover) !important; color: var(--edu-fg) !important; } /* DANGER / SUCCESS (feedback) */ .btn-danger, .btn-outline-danger { background: var(--edu-danger) !important; color: #fff !important; border-color: var(--edu-border-ink) !important; } .btn-success, .btn-outline-success { background: var(--edu-success-soft) !important; color: var(--edu-success-fg) !important; border-color: var(--edu-border-ink) !important; } /* CTA do aluno na aula ("Marcar como concluído") = primário */ .popout__inner .btn-block, .lesson__completion .btn-block { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-shadow-pop) !important; } .popout__inner .btn-block:hover, .lesson__completion .btn-block:hover { box-shadow: var(--edu-shadow-pop-sm) !important; transform: translate(2px, 2px); } .popout__inner .btn-block:active, .lesson__completion .btn-block:active { box-shadow: none !important; transform: translate(4px, 4px); } /* botões de ferramenta só-ícone (barra da aula) ← .dbtn (dashboard.css): 1px border-strong · muted · hover ink */ .breadcrumbs .btn, .breadcrumbs .join .btn { border: 1px solid var(--edu-border-strong) !important; background: var(--edu-bg-elevated) !important; color: var(--edu-fg-muted) !important; border-radius: var(--edu-r-sm) !important; width: 40px; height: 40px; padding: 0 !important; box-shadow: none !important; } .breadcrumbs .btn:hover { border-color: var(--edu-border-ink) !important; color: var(--edu-fg) !important; background: var(--edu-surface-hover) !important; } .join { gap: 0; } .join > .btn:not(:first-child) { border-left-width: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .join > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* --------------------------------------------------------------------- 7. CHIPS DE CATEGORIA DA VITRINE (.storefront__button) idle ← .ftrigger (filters.css): 36px · 1px border-strong · bg-elevated · muted 500 · hover borda ink ativo ← .cal-d.sel / .step.current: lime + ink + anel ink --------------------------------------------------------------------- */ .storefront__button.btn { height: 36px; background: var(--edu-bg-elevated) !important; color: var(--edu-fg-muted) !important; border: 1px solid var(--edu-border-strong) !important; border-radius: var(--edu-r-sm) !important; font-size: 14px !important; font-weight: 500 !important; padding: 0 12px !important; box-shadow: none !important; } .storefront__button.btn:hover { color: var(--edu-fg) !important; border-color: var(--edu-border-ink) !important; background: var(--edu-surface-hover) !important; } .storefront__button.btn.active { background: var(--edu-accent) !important; color: var(--edu-accent-ink) !important; border-color: var(--edu-accent-ink) !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1px var(--edu-accent-ink) !important; } /* o slot da direita ("Disponíveis" / "Exibir Banners") usa ml-auto e abre um vão; segue na fila com o mesmo gap de 12px */ .swiper-wrapper > .swiper-slide.ml-auto { margin-left: 0 !important; } .swiper-button-next button, .swiper-button-prev button { color: var(--edu-fg-muted) !important; } .swiper-button-next button:hover, .swiper-button-prev button:hover { color: var(--edu-fg) !important; } /* --------------------------------------------------------------------- 8. CARDS DE CURSO (.poster) ← paper card (README "Cards" + "Hover & press") bg-elevated · 1px ink-100 · r-lg · hover: borda engrossa para 2px ink · sem lift/scale --------------------------------------------------------------------- */ .poster__inner { border-radius: var(--edu-r-lg) !important; border: 1px solid var(--edu-border-strong); background: var(--edu-bg-elevated); transition: border-color var(--edu-dur-fast) var(--edu-ease-out), box-shadow var(--edu-dur-fast) var(--edu-ease-out) !important; --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; } .poster:hover .poster__inner, .group:hover .poster__inner { border-color: var(--edu-border-ink); box-shadow: inset 0 0 0 1px var(--edu-border-ink); transform: none !important; } .poster__inner img { border-radius: 0 !important; } /* hover: título + descrição legíveis sobre a capa — scrim ink forte embaixo, capa livre em cima; título Manrope 700 com sublinhado lime (README "Hover & press"); descrição em 3 linhas */ .poster__backdrop { background: linear-gradient(180deg, rgba(15, 20, 33, 0) 18%, rgba(15, 20, 33, 0.62) 48%, rgba(15, 20, 33, 0.96) 100%) !important; } .poster__details h4 { font-family: var(--edu-font-sans) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.005em; color: var(--edu-paper-100) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .poster__details h4::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 7px; background: var(--edu-liv-500); border-radius: 2px; } .poster__details p { color: rgba(242, 240, 237, 0.86) !important; font-size: 13.5px !important; line-height: 1.45 !important; margin-top: 8px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); text-wrap: pretty; } .poster__content { font-family: var(--edu-font-sans); } .poster__content [class~="bg-white/30"] { background: rgba(250, 249, 246, 0.35) !important; } .poster .bg-brand, .bg-brand { background-color: var(--edu-accent) !important; } /* --------------------------------------------------------------------- 8b. CADEADO DO CARD (.card__lock) ← DS "Iconography" (Lucide · stroke 1.75) O MemberKit desenha um cadeado SOLID (Heroicons). Trocamos pelo lock do Lucide — mesmo traço dos ícones injetados pelo JS (eye/sun/moon). Via mask + currentColor: ink no tema clean, paper no dark. Sem tocar no JS. --------------------------------------------------------------------- */ .card__lock { --edu-icon-lock: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='11'%20rx='2'%20ry='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E"); } .card__lock .icon > svg { display: none !important; } .card__lock .icon { display: block !important; width: 1.125rem; height: 1.125rem; } .card__lock .icon::after { content: ""; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask: var(--edu-icon-lock) center / contain no-repeat; mask: var(--edu-icon-lock) center / contain no-repeat; } /* --------------------------------------------------------------------- 9. PÁGINA DO CURSO — meta, progresso (.dprogress), módulos (paper card), aulas --------------------------------------------------------------------- */ .sidebar__duration { font-size: 13.5px !important; color: var(--edu-fg-muted) !important; font-weight: 500 !important; flex-wrap: wrap; } .sidebar__duration > * { white-space: nowrap; } .sidebar__duration a { color: var(--edu-fg) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .sidebar__duration a:hover { color: var(--edu-liv-700) !important; } .sidebar__progressbar, .popout__progressbar { /* .dprogress .pm-track: 10px · bg-sunken · pill */ background: var(--edu-bg-sunken) !important; height: 10px !important; border-radius: var(--edu-r-pill) !important; overflow: hidden; } .popout__progressbar { height: 8px !important; } .sidebar__progressbar > div, .popout__progressbar > div { background: var(--edu-accent) !important; border-radius: var(--edu-r-pill) !important; } .sidebar__progress span, .popout__progress { /* .pm-val: mono tabular */ font-family: var(--edu-font-mono) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--edu-fg) !important; font-variant-numeric: tabular-nums; } .section.rounded-lg, .section.bg-card { /* paper card */ background: var(--edu-bg-elevated) !important; border: 1px solid var(--edu-border) !important; border-radius: var(--edu-r-lg) !important; box-shadow: none !important; overflow: hidden; } .section h4 { font-family: var(--edu-font-sans) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--edu-fg) !important; } .section__items li { background: transparent !important; border-color: var(--edu-border) !important; transition: background var(--edu-dur-fast) var(--edu-ease-out); } .section__items li:hover { background: color-mix(in srgb, var(--edu-surface-hover) 55%, transparent) !important; } a.lesson__title { color: var(--edu-fg) !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none; } a.lesson__title:hover { color: var(--edu-liv-700) !important; text-decoration: underline; text-underline-offset: 3px; } .lesson__muted { font-family: var(--edu-font-mono) !important; font-size: 11.5px !important; color: var(--edu-fg-subtle) !important; letter-spacing: 0.02em; } /* ícones de status da aula são imagens brancas — no tema clean, inverte para ink */ .section__items li > .flex-none img:not(.dark *) { filter: invert(1) hue-rotate(180deg); } .shadow-subtle { box-shadow: none !important; } .bg-card { background-color: var(--edu-bg-elevated) !important; } .border-border { border-color: var(--edu-border) !important; } /* --------------------------------------------------------------------- 10. PÁGINA DA AULA — player (ink full-bleed), lista lateral, crumbs, popout --------------------------------------------------------------------- */ .bg-theater { background: var(--edu-ink-900) !important; } .aside__entry { color: rgba(242, 240, 237, 0.62) !important; border-radius: var(--edu-r-md); margin: 2px 8px; padding: 10px 12px !important; transition: background var(--edu-dur-fast) var(--edu-ease-out), color var(--edu-dur-fast); } .aside__entry:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--edu-paper-100) !important; } .aside__entry.active, .aside__entry[aria-current] { background: rgba(220, 254, 110, 0.14) !important; color: var(--edu-paper-100) !important; box-shadow: inset 3px 0 0 var(--edu-liv-500); } .aside__entry img.rounded { border-radius: 6px !important; } .aside__entry .font-medium { font-family: var(--edu-font-sans); font-weight: 600; font-size: 13.5px; } .breadcrumbs { /* .phead .crumbs */ background: var(--edu-bg-elevated) !important; border-bottom: 1px solid var(--edu-border); color: var(--edu-fg-subtle) !important; backdrop-filter: none !important; } .breadcrumbs a { font-family: var(--edu-font-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--edu-fg-muted) !important; text-decoration: none !important; } .breadcrumbs a:hover { color: var(--edu-fg) !important; } .breadcrumbs .icon { color: var(--edu-fg-subtle) !important; } .popout__inner { /* paper card */ background: var(--edu-bg-elevated) !important; border: 1px solid var(--edu-border) !important; border-radius: var(--edu-r-lg) !important; box-shadow: none !important; } .popout__ratings { background: var(--edu-bg) !important; border: 1px solid var(--edu-border) !important; border-radius: var(--edu-r-md) !important; } .popout__rating button { transition: transform var(--edu-dur-fast) var(--edu-ease-out); } .prose { font-family: var(--edu-font-sans) !important; color: var(--edu-fg) !important; font-size: 16px; line-height: 1.55; } .prose a { color: var(--edu-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover { color: var(--edu-liv-700); } .prose h1, .prose h2 { font-family: var(--edu-font-display); font-weight: 600; letter-spacing: -0.015em; } .prose code { font-family: var(--edu-font-mono); } .prose mark { background: linear-gradient(180deg, transparent 55%, var(--edu-liv-500) 55%); color: var(--edu-ink-1000); } /* .liv-mark */ /* --------------------------------------------------------------------- 11. FORMULÁRIOS ← .field (components.css): 15px · 10px 12px · 1px border-strong · r-sm · bg-elevated · focus ring --------------------------------------------------------------------- */ .form-input, .form-textarea, .form-select, .form-multiselect, input[type="text"]:not(.topbar__search-input):not(.navbar__search-input), input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], textarea, select { font-family: var(--edu-font-sans) !important; font-size: 15px; background-color: var(--edu-bg-elevated) !important; /* -color: preserva a seta (background-image) do select */ color: var(--edu-fg) !important; border: 1px solid var(--edu-border-strong) !important; border-radius: var(--edu-r-sm) !important; box-shadow: none !important; transition: border-color var(--edu-dur-fast), box-shadow var(--edu-dur-fast); } .form-input::placeholder, .form-textarea::placeholder, textarea::placeholder, input::placeholder { color: var(--edu-fg-subtle) !important; } .form-input:focus, .form-textarea:focus, .form-select:focus, textarea:focus, input:focus, select:focus { border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-focus-ring) !important; outline: none !important; } .form-input-ghost { background-color: var(--edu-bg) !important; } /* seta do select em ink nos dois temas (o MemberKit usa uma seta cinza fixa) */ select.form-select, select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1421' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; background-position: right 10px center !important; background-repeat: no-repeat !important; background-size: 18px 18px !important; padding-right: 36px !important; appearance: none !important; -webkit-appearance: none !important; } .dark select.form-select, .dark select, html[data-theme="dracula"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F2F0ED' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; } div.form-input > select { background-image: none !important; padding-right: 18px !important; } /* campo composto (ex.: telefone = país + DDI + número): o wrapper div.form-input é o "campo"; os filhos ghost ficam transparentes e sem borda, e o foco vai para o wrapper */ div.form-input { display: flex; align-items: center; padding: 0 12px !important; min-height: 44px; } div.form-input > input, div.form-input > select, div.form-input .form-input-ghost, div.form-input .form-select-ghost { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; padding: 0 !important; font-size: 15px !important; color: var(--edu-fg) !important; } div.form-input > select { color: var(--edu-fg-muted) !important; padding-right: 18px !important; } div.form-input > span { color: var(--edu-fg-muted); font-variant-numeric: tabular-nums; } div.form-input:focus-within { border-color: var(--edu-border-ink) !important; box-shadow: var(--edu-focus-ring) !important; } .form-input-sm { font-size: 13px !important; } label, .form-label { font-weight: 600; font-size: 13px; color: var(--edu-fg); } input[type="checkbox"], input[type="radio"] { accent-color: var(--edu-liv-700); } /* --------------------------------------------------------------------- 12. TABS (.tabs-box) ← .seg segmented: gap 3 · pad 4 · r-md · bg-sunken · ativo = bg-elevated + anel ink 1.5px --------------------------------------------------------------------- */ .tabs.tabs-box { display: inline-flex; align-items: center; gap: 3px; padding: 4px !important; border-radius: var(--edu-r-md) !important; border: 1px solid var(--edu-border-strong) !important; background: var(--edu-bg-sunken) !important; } .tabs.tabs-box .tab { height: 32px; padding: 0 12px !important; border-radius: var(--edu-r-sm) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--edu-fg-muted) !important; background: transparent !important; border: 0 !important; transition: all var(--edu-dur-fast) var(--edu-ease-out); } .tabs.tabs-box .tab:hover { color: var(--edu-fg) !important; } /* mobile: o MemberKit troca as tabs por um