/*! * _ead/wc_ead.css — BASE COMPARTILHADA do CAMPUS (área do aluno / EAD). * --------------------------------------------------------------------------- * Injetado GLOBALMENTE no por index.php quando APP_EAD=1 (antes dos * wc_css/*.css do tema). É a ÚNICA fonte do visual do campus: o markup de * /_ead/*.php (DashLite + componentes .cmp-* / .wc-course-* / .wc-class-* + * classes legadas re-emitidas por AJAX: overlays .wc_ead_alert/_modal, status * .jwc_ead_task, fórum .wc_ead_course_task_forum_*) é IGUAL em todos os temas * (campus.php →
+ require _ead/index.php), então o skin * mora aqui e vale para TODOS os temas. * * CORES: tudo deriva das CORES DINÂMICAS do admin ("Configurações do site › * Tema de cores"), injetadas em :root como --bs-* por wcSiteThemeVars(). Os * tokens --cmp-* abaixo mapeiam essas variáveis (com fallback neutro), então o * campus acompanha a marca escolhida — primária/sucesso nos acentos, e * superfície/texto/borda/realce seguindo a paleta. Os "navy" dos heros/ player * premium são derivados da primária via color-mix (escurecimento), não fixos. * * Escopo: tudo em `.wc_ead` (0,1,x). Cada tema sobrescreve por especificidade * em `.nk-app-root .wc_ead` / `.wc-shop .wc_ead` apenas para AJUSTES FINOS * (shell, Modo Teatro, integrações) nos seus wc_css/wc-ead.css. * =========================================================================== */ /* =========================================================================== TOKENS — derivam do admin (--bs-*), com fallback neutro DashLite. Inclui o override opcional do acento dos widgets (--wc-widget-accent). =========================================================================== */ .wc_ead { --cmp-primary: var(--wc-widget-accent, var(--bs-primary, #6576ff)); --cmp-primary-rgb: var(--wc-widget-accent-rgb, var(--bs-primary-rgb, 101, 118, 255)); --cmp-success: var(--bs-success, #1ee0ac); --cmp-success-rgb: var(--bs-success-rgb, 30, 224, 172); --cmp-surface: var(--bs-card-bg, #ffffff); --cmp-bg-alt: var(--bs-secondary-bg, #f5f6fa); --cmp-bg-soft: var(--bs-tertiary-bg, #eef1f8); --cmp-text: var(--bs-body-color, #526484); --cmp-heading: var(--bs-heading-color, #364a63); --cmp-muted: var(--bs-secondary-color, #8094ae); --cmp-border: var(--bs-border-color, #e8ebf5); --cmp-amber: #ff9f1a; --cmp-amber-2: #f97e16; --cmp-danger: #e85347; /* gradiente premium da marca: primária → primária escurecida (navy) */ --cmp-grad: linear-gradient(135deg, var(--cmp-primary) 0%, color-mix(in srgb, var(--cmp-primary) 56%, #0b1224) 100%); /* ALINHAMENTO: o conteúdo do campus segue a MESMA largura/recuo do container do tema (ex.: wc_agency .ag-container = 1200px / 20px). Heros full-bleed mantêm a faixa colada às bordas, mas o miolo (texto + cards) alinha aqui. Cada tema pode sobrescrever --cmp-maxw / --cmp-gutter no seu wc-ead.css. */ --cmp-maxw: 1200px; --cmp-gutter: 20px; } /* =========================================================================== 0. Base + reset defensivo wc-custom.css de alguns temas força `.wc_ead .btn{color:#fff!important}` (herança do EAD antigo desenhado sobre reset.css). Devolvemos a cor por variável; e garantimos que nada estoure a largura no mobile. =========================================================================== */ .wc_ead { width: 100%; } .wc_ead, .wc_ead * { min-width: 0; } .wc_ead img { max-width: 100%; height: auto; } .wc_ead .section { background: var(--cmp-bg-alt); } .wc_ead .btn { color: var(--bs-btn-color) !important; text-shadow: none; } .wc_ead .btn:hover { color: var(--bs-btn-hover-color, var(--bs-btn-color, #fff)) !important; } .wc_ead .btn .icon { font-size: 1.05em; } /* gif de carregamento dentro dos formulários (faded in/out pelo JS) */ .wc_ead .jwc_load { display: none; width: 22px; height: 22px; margin-left: 10px; vertical-align: middle; } /* breadcrumb dentro de cards (cabeçalho da tarefa) — sem afetar a .wc-pagebar */ .wc_ead .card .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin: 0 0 .25rem; padding: 0; background: none; font-size: .8125rem; } .wc_ead .card .breadcrumb a { color: var(--cmp-muted); text-decoration: none; } .wc_ead .card .breadcrumb a:hover { color: var(--cmp-primary); } .wc_ead .card .breadcrumb .sep { color: var(--cmp-border); } /* cards DashLite seguem a superfície do tema */ .wc_ead .card, .wc_ead .card-bordered { background: var(--cmp-surface); border-color: var(--cmp-border); } /* utilitários legados */ .wc_ead .al_center { text-align: center; } .wc_ead .ds_none { display: none; } .wc_ead .m_top { margin-top: 1.5rem; } .wc_ead .text_editor { margin-bottom: 1rem; } .wc_ead .font_green { color: var(--cmp-success); } .wc_ead .font_red { color: var(--cmp-danger); } /* badges de status (.bar_*) — usados no fórum/aulas */ .wc_ead .bar_blue, .wc_ead .bar_green, .wc_ead .bar_red, .wc_ead .bar_yellow { display: inline-flex; align-items: center; gap: .3rem; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; } .wc_ead .bar_blue { color: var(--cmp-primary); background: rgba(var(--cmp-primary-rgb), .14); } .wc_ead .bar_green { color: #119e7c; background: rgba(var(--cmp-success-rgb), .16); } .wc_ead .bar_red { color: var(--cmp-danger); background: rgba(232, 83, 71, .14); } .wc_ead .bar_yellow { color: #b07a00; background: rgba(244, 189, 14, .18); } /* nav-tabs do dashboard (recuo dos ícones + estado ativo) */ .wc_ead .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; } .wc_ead .nav-tabs .nav-link.wc_active { color: var(--cmp-primary); border-color: var(--cmp-primary); } .wc_ead .nav-tabs .nav-link.wc_active .icon { color: var(--cmp-primary); } /* =========================================================================== 1. Botões premium (.cmp-btn) =========================================================================== */ .wc_ead .cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 10px; border: 1.5px solid transparent; font-weight: 700; font-size: .92rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .wc_ead .cmp-btn .icon { font-size: 1.1em; } .wc_ead .cmp-btn:hover { transform: translateY(-2px); } .wc_ead .cmp-btn--sm { padding: .5rem 1rem; font-size: .84rem; } .wc_ead .cmp-btn--lg { padding: .9rem 1.7rem; font-size: 1rem; } .wc_ead .cmp-btn--block { width: 100%; } .wc_ead .cmp-btn--accent { background: linear-gradient(135deg, var(--cmp-amber), var(--cmp-amber-2)); color: #3a2400; box-shadow: 0 12px 26px -12px rgba(255, 140, 0, .8); } .wc_ead .cmp-btn--accent:hover { color: #3a2400; filter: brightness(1.05); } .wc_ead .cmp-btn--primary { background: var(--cmp-primary); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--cmp-primary-rgb), .9); } .wc_ead .cmp-btn--primary:hover { background: color-mix(in srgb, var(--cmp-primary) 86%, #000); color: #fff; } .wc_ead .cmp-btn--ghost { background: transparent; border-color: var(--cmp-border); color: var(--cmp-heading); } .wc_ead .cmp-btn--ghost:hover { border-color: var(--cmp-primary); color: var(--cmp-primary); } .wc_ead .cmp-btn--light { background: #fff; color: var(--cmp-primary); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .7); } .wc_ead .cmp-btn--light:hover { color: var(--cmp-primary); filter: brightness(.97); transform: translateY(-1px); } .wc_ead .cmp-btn--glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); color: #fff; } .wc_ead .cmp-btn--glass:hover { background: rgba(255, 255, 255, .24); border-color: #fff; color: #fff; } .wc_ead .cmp-btn--ghost-light { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; } .wc_ead .cmp-btn--ghost-light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; } .wc_ead .cmp-btn__count { background: rgba(0, 0, 0, .2); border-radius: 999px; font-size: .72rem; line-height: 1; padding: .2rem .5rem; } /* =========================================================================== 2. Hero do dashboard (full-bleed) + stats =========================================================================== */ .wc_ead .cmp-dash { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); } .wc_ead .cmp-bleed { width: 100%; } /* conteúdo do campus alinhado ao container do tema (mesma largura + recuo) */ .wc_ead .cmp-dash > .container { width: 100%; max-width: var(--cmp-maxw); margin-left: auto; margin-right: auto; padding-left: var(--cmp-gutter); padding-right: var(--cmp-gutter); } .wc_ead .cmp-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 2.25rem 2.25rem 2rem; margin-bottom: 1.25rem; color: #fff; background: var(--cmp-primary); background: var(--cmp-grad); } .wc_ead .cmp-hero--bleed { border-radius: 0; margin: 0; padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.25rem); } .wc_ead .cmp-hero--bleed .cmp-hero__inner { max-width: var(--cmp-maxw); margin-left: auto; margin-right: auto; padding-left: var(--cmp-gutter); padding-right: var(--cmp-gutter); } .wc_ead .cmp-hero--bleed .cmp-hero__glow { right: 6%; } .wc_ead .cmp-hero__glow { position: absolute; width: 360px; height: 360px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none; } .wc_ead .cmp-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } .wc_ead .cmp-hero__intro { min-width: 0; } .wc_ead .cmp-hero__greet { display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; color: rgba(255, 255, 255, .85); font-size: .95rem; } .wc_ead .cmp-hero__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); } .wc_ead .cmp-hero__title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.01em; margin: .85rem 0 0; line-height: 1.15; } .wc_ead .cmp-hero__lead { color: rgba(255, 255, 255, .85); margin: .6rem 0 0; font-size: 1rem; max-width: 480px; } .wc_ead .cmp-hero__stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .wc_ead .cmp-hero__stats li { display: flex; flex-direction: column; } .wc_ead .cmp-hero__stats strong { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; } .wc_ead .cmp-hero__stats span { color: rgba(255, 255, 255, .7); font-size: .8rem; margin-top: .35rem; } .wc_ead .cmp-hero__logout { position: absolute; top: 1.1rem; right: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); font-size: .8rem; font-weight: 700; text-decoration: none; transition: all .2s ease; } .wc_ead .cmp-hero__logout:hover { background: var(--cmp-danger); border-color: var(--cmp-danger); color: #fff; } /* Card "continuar de onde parou" (variantes do hero) */ .wc_ead .cmp-resume { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 1.25rem; } .wc_ead .cmp-resume__label { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffb01f; } .wc_ead .cmp-resume__course { display: flex; gap: .85rem; align-items: center; margin: .85rem 0 .9rem; } .wc_ead .cmp-resume__cover { width: 60px; height: 46px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; } .wc_ead .cmp-resume__cover--ph { display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff; background: var(--cmp-grad); } .wc_ead .cmp-resume__txt { min-width: 0; } .wc_ead .cmp-resume__title { display: block; font-weight: 700; color: #fff; font-size: .98rem; line-height: 1.3; } .wc_ead .cmp-resume__next { display: flex; align-items: center; gap: .35rem; color: #aab4d4; font-size: .82rem; margin-top: .25rem; } .wc_ead .cmp-resume .progress { height: 7px; background: rgba(255, 255, 255, .14); border-radius: 999px; margin: 0 0 1rem; } .wc_ead .cmp-resume .progress-bar { background: linear-gradient(90deg, var(--cmp-success), var(--cmp-primary)); border-radius: 999px; font-size: 0; } .wc_ead .cmp-resume--empty { text-align: center; } .wc_ead .cmp-resume__rocket { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #ffb01f; font-size: 1.5rem; margin-bottom: .6rem; } .wc_ead .cmp-resume--empty p { color: #aab4d4; font-size: .88rem; margin: .4rem 0 1rem; } /* Ações rápidas (flutuam sobre a base do hero) */ .wc_ead .cmp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 1.5rem; } .wc_ead .cmp-quick__item { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--cmp-surface); border: 1px solid var(--cmp-border); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .wc_ead .cmp-quick__item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(20, 30, 60, .4); border-color: transparent; } .wc_ead .cmp-quick__ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; } .wc_ead .cmp-quick__ico--a { background: var(--cmp-grad); } .wc_ead .cmp-quick__ico--b { background: linear-gradient(135deg, var(--cmp-amber), var(--cmp-amber-2)); } .wc_ead .cmp-quick__ico--c { background: linear-gradient(135deg, #1ee0ac, #23b3a0); } .wc_ead .cmp-quick__ico--d { background: linear-gradient(135deg, #8a99b5, #5a6b8c); } .wc_ead .cmp-quick__tx { display: flex; flex-direction: column; min-width: 0; } .wc_ead .cmp-quick__tx strong { color: var(--cmp-heading); font-size: .95rem; font-weight: 700; } .wc_ead .cmp-quick__tx small { color: var(--cmp-muted); font-size: .78rem; } @media (min-width: 992px) { .wc_ead .cmp-quick { margin-top: -2.75rem; position: relative; z-index: 3; } } /* =========================================================================== 3. Painel do aluno — conteúdo em largura total + menu em DRAWER off-canvas (launcher flutuante "fechado" → abre o menu deslizando da esquerda) =========================================================================== */ .wc_ead .cmp-layout { display: block; } .wc_ead .cmp-content { min-width: 0; padding: 40px 0; } /* launcher flutuante (estado fechado) — preso à borda esquerda no meio da tela; evita os cantos inferiores, que podem ter o WhatsApp/chat do tema. */ .wc_ead .cmp-navfab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1080; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; padding: .9rem .6rem; border: 0; border-radius: 0 14px 14px 0; cursor: pointer; background: var(--cmp-grad); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 16px 34px -14px rgba(var(--cmp-primary-rgb), .95); transition: padding .18s ease, box-shadow .18s ease, opacity .2s ease, visibility .2s ease; } .wc_ead .cmp-navfab .icon { font-size: 1.4rem; } .wc_ead .cmp-navfab:hover { padding-left: .9rem; box-shadow: 0 22px 42px -14px rgba(var(--cmp-primary-rgb), 1); } .wc_ead .cmp-navfab.is-hidden { opacity: 0; visibility: hidden; } /* drawer off-canvas (menu do aluno) */ .wc_ead .cmp-drawer { position: fixed; inset: 0; z-index: 1090; visibility: hidden; } .wc_ead .cmp-drawer.is-open { visibility: visible; } .wc_ead .cmp-drawer__overlay { position: absolute; inset: 0; background: rgba(13, 20, 40, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; } .wc_ead .cmp-drawer.is-open .cmp-drawer__overlay { opacity: 1; } .wc_ead .cmp-side { position: absolute; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; overflow-y: auto; background: var(--cmp-bg-alt); box-shadow: 0 30px 70px -22px rgba(5, 8, 20, .6); transform: translateX(-100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .wc_ead .cmp-drawer.is-open .cmp-side { transform: none; } .wc_ead .cmp-side__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wc_ead .cmp-side__head-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--cmp-heading); font-size: 1.02rem; } .wc_ead .cmp-side__head-title .icon { color: var(--cmp-primary); font-size: 1.2rem; } .wc_ead .cmp-drawer__close { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--cmp-bg-soft); color: var(--cmp-muted); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; } .wc_ead .cmp-drawer__close:hover { background: var(--cmp-danger); color: #fff; } body.cmp-drawer-lock { overflow: hidden; } .wc_ead .cmp-nav { display: flex; flex-direction: column; gap: .25rem; background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: 16px; padding: .55rem; box-shadow: 0 1px 0 rgba(20, 30, 60, .02), 0 16px 32px -26px rgba(20, 30, 60, .4); } .wc_ead .cmp-nav__link { display: flex; align-items: center; gap: .8rem; padding: .72rem .9rem; border-radius: 11px; color: var(--cmp-text); font-weight: 600; font-size: .92rem; text-decoration: none; transition: background .15s ease, color .15s ease; } .wc_ead .cmp-nav__link .icon { font-size: 1.15rem; width: 1.4rem; text-align: center; color: var(--cmp-muted); transition: color .15s ease; } .wc_ead .cmp-nav__link:hover { background: var(--cmp-bg-soft); color: var(--cmp-heading); } .wc_ead .cmp-nav__link.wc_active { background: var(--cmp-grad); color: #fff; box-shadow: 0 12px 22px -12px rgba(var(--cmp-primary-rgb), .95); } .wc_ead .cmp-nav__link.wc_active .icon { color: #fff; } /* mini-card de ajuda */ .wc_ead .cmp-side__card { color: #fff; border-radius: 16px; padding: 1.25rem; background: var(--cmp-primary); background: linear-gradient(150deg, var(--cmp-primary), color-mix(in srgb, var(--cmp-primary) 52%, #0b1224)); } .wc_ead .cmp-side__card-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #ffb01f; font-size: 1.2rem; margin-bottom: .65rem; } .wc_ead .cmp-side__card strong { display: block; color: #fff; font-size: 1rem; } .wc_ead .cmp-side__card p { color: rgba(255, 255, 255, .82); font-size: .84rem; margin: .35rem 0 .9rem; } .wc_ead .cmp-side__card .cmp-btn--ghost { border-color: rgba(255, 255, 255, .25); color: #fff; } .wc_ead .cmp-side__card .cmp-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; } /* logout no rodapé da coluna */ .wc_ead .cmp-nav__logout { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem; border-radius: 12px; background: rgba(232, 83, 71, .09); color: var(--cmp-danger); border: 1px solid rgba(232, 83, 71, .22); font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .15s ease; } .wc_ead .cmp-nav__logout:hover { background: var(--cmp-danger); border-color: var(--cmp-danger); color: #fff; } /* DESKTOP (>=992px): o menu do aluno deixa de ser drawer e vira SIDEBAR FIXA à esquerda (coluna persistente); o launcher flutuante e o overlay somem. No mobile mantém o drawer off-canvas acima. Reaproveita o markup .cmp-layout > .cmp-drawer (.cmp-side) + .cmp-content — sem alterar HTML/JS. */ @media (min-width: 992px) { .wc_ead .cmp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; background: var(--cmp-bg-alt); margin-top: -42px; position: relative; padding: 25px; border-radius: 15px; } .wc_ead .cmp-navfab { display: none; } .wc_ead .cmp-drawer { position: static; visibility: visible; inset: auto; z-index: auto; } .wc_ead .cmp-drawer__overlay { display: none; } .wc_ead .cmp-side { position: sticky; top: 92px; transform: none; width: auto; max-height: none; overflow: visible; background: transparent; box-shadow: none; padding: 0; } .wc_ead .cmp-drawer__close { display: none; } .wc_ead .cmp-content { padding-top: 0; } /* alinha o topo do conteúdo com o topo da sidebar */ body.cmp-drawer-lock { overflow: auto; } } /* =========================================================================== 4. Cartão de curso =========================================================================== */ .wc_ead .wc-course-card { border-radius: 16px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .wc_ead .wc-course-card:hover { box-shadow: 0 4px 18px rgba(31, 43, 58, .1); transform: translateY(-2px); } .wc_ead .wc-course-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cmp-bg-soft); border-radius: 16px 16px 0 0; } .wc_ead .wc-course-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .wc_ead .wc-course-card:hover .wc-course-cover > img { transform: scale(1.06); } .wc_ead .wc-course-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .96); background: linear-gradient(135deg, hsl(var(--seed, 230), 68%, 60%), hsl(calc(var(--seed, 230) + 38), 70%, 52%)); } .wc_ead .wc-course-ph em { position: absolute; top: 12px; left: 12px; font-size: 1.2rem; opacity: .85; } .wc_ead .wc-course-ph b { font-size: 2.6rem; font-weight: 800; } .wc_ead .wc-course-done { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: .3rem; background: var(--cmp-success); color: #04231b; font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; } .wc_ead .wc-course-title { color: var(--cmp-heading); text-decoration: none; font-weight: 700; } .wc_ead .wc-course-title:hover { color: var(--cmp-primary); } .wc_ead .wc-course-progress { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; } .wc_ead .wc-course-progress .progress { flex: 1; height: 7px; background: var(--cmp-bg-soft); border-radius: 999px; } .wc_ead .wc-course-progress .progress-bar { background: linear-gradient(90deg, var(--cmp-primary), color-mix(in srgb, var(--cmp-primary) 60%, #fff)); border-radius: 999px; } .wc_ead .wc-course-progress__pct { font-size: .78rem; font-weight: 800; color: var(--cmp-primary); flex: 0 0 auto; } .wc_ead .wc-course-meta { list-style: none; margin: 0 0 .75rem; padding: 0; } .wc_ead .wc-course-meta li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--cmp-muted); padding: .15rem 0; } .wc_ead .wc-course-meta li .icon { color: var(--cmp-border); font-size: 1rem; } .wc_ead .wc-course-actions { margin-top: 1rem; } /* selos sobre a capa (bônus / renovar) */ .wc_ead .wc-course-badge { position: absolute; top: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; padding: 4px 9px; border-radius: 999px; color: #fff; font-size: .72rem; font-weight: 700; cursor: pointer; } .wc_ead .wc-course-badge .icon { font-size: 1rem; } .wc_ead .wc-course-badge-bonus { right: .6rem; background: var(--cmp-danger); } .wc_ead .wc-course-badge-renew { right: .6rem; background: #f4732a; } .wc_ead .wc-course-badge-bonus + .wc-course-badge-renew, .wc_ead .wc-course-badge-renew + .wc-course-badge-bonus { right: 3rem; } /* cartão de bônus bloqueado */ .wc_ead .wc-course-locked .wc-course-cover > img { filter: grayscale(1) opacity(.7); } .wc_ead .wc-course-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .65); font-size: 1.6rem; } .wc_ead .wc-course-lock .icon { color: var(--cmp-muted); } /* linha de pedido (pedidos em aberto) */ .wc_ead .wc-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cmp-border); } .wc_ead .wc-order-row:last-child { border-bottom: 0; } .wc_ead .wc-order-title { flex: 1 1 220px; font-weight: 600; color: var(--cmp-heading); } .wc_ead .wc-order-date { color: var(--cmp-muted); font-size: .8125rem; } .wc_ead .wc-order-price { display: inline-flex; align-items: center; gap: .4rem; color: var(--cmp-text); font-size: .875rem; font-weight: 600; } /* =========================================================================== 5. Abas premium · 6. Estado vazio =========================================================================== */ .wc_ead .cmp-tabs { flex-wrap: wrap; gap: .15rem; border-bottom: 2px solid var(--cmp-border); } .wc_ead .cmp-empty { text-align: center; padding: 3rem 1.5rem; background: var(--cmp-surface); border: 1px dashed var(--cmp-border); border-radius: 16px; } .wc_ead .cmp-empty > em { font-size: 2.6rem; color: var(--cmp-border); } .wc_ead .cmp-empty h6 { color: var(--cmp-heading); margin: .75rem 0 .25rem; font-size: 1.05rem; } .wc_ead .cmp-empty p { color: var(--cmp-muted); margin: 0 0 1.1rem; } /* =========================================================================== 7. Certificados =========================================================================== */ .wc_ead .cmp-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .wc_ead .cmp-cert { display: flex; flex-direction: column; gap: .85rem; padding: 1.4rem; border-radius: 16px; background: var(--cmp-surface); border: 1px solid var(--cmp-border); position: relative; overflow: hidden; } .wc_ead .cmp-cert::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; } .wc_ead .cmp-cert--earned::before { background: linear-gradient(90deg, var(--cmp-success), var(--cmp-primary)); } .wc_ead .cmp-cert--ready::before { background: linear-gradient(90deg, var(--cmp-amber), var(--cmp-amber-2)); } .wc_ead .cmp-cert--locked { opacity: .9; } .wc_ead .cmp-cert--locked::before { background: var(--cmp-border); } .wc_ead .cmp-cert__seal { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, #1ee0ac, #23b3a0); box-shadow: 0 10px 20px -10px rgba(30, 224, 172, .7); } .wc_ead .cmp-cert__seal--ready { background: linear-gradient(135deg, var(--cmp-amber), var(--cmp-amber-2)); box-shadow: 0 10px 20px -10px rgba(255, 140, 0, .7); } .wc_ead .cmp-cert__seal--locked { background: var(--cmp-bg-soft); color: #9aa6c8; box-shadow: none; } .wc_ead .cmp-cert__body { flex: 1; } .wc_ead .cmp-cert__title { color: var(--cmp-heading); font-size: 1rem; font-weight: 700; margin: 0 0 .35rem; line-height: 1.3; } .wc_ead .cmp-cert__meta { display: inline-flex; align-items: center; gap: .35rem; color: var(--cmp-muted); font-size: .82rem; } .wc_ead .cmp-cert .progress-sm { height: 5px; background: var(--cmp-bg-soft); border-radius: 999px; } .wc_ead .cmp-cert .progress-sm .progress-bar { background: #b6c0d8; border-radius: 999px; } /* =========================================================================== 8. Hero do CURSO + anel de progresso =========================================================================== */ .wc_ead .cmp-coursehero { position: relative; overflow: hidden; border-radius: 20px; padding: 2.25rem; margin-bottom: 1.5rem; color: #fff; background: var(--cmp-primary); background: var(--cmp-grad); } .wc_ead .cmp-coursehero--bleed { border-radius: 0; margin: 0 0 1.75rem; padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 2.75rem); } .wc_ead .cmp-coursehero--bleed .cmp-coursehero__inner { max-width: var(--cmp-maxw); margin-left: auto; margin-right: auto; padding-left: var(--cmp-gutter); padding-right: var(--cmp-gutter); } .wc_ead .cmp-coursehero .cmp-hero__glow { background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%); right: -90px; top: -110px; } .wc_ead .cmp-coursehero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .wc_ead .cmp-coursehero__back { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .82); font-size: .85rem; font-weight: 700; text-decoration: none; } .wc_ead .cmp-coursehero__back:hover { color: #fff; } .wc_ead .cmp-coursehero__title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; margin: .6rem 0 0; line-height: 1.15; } .wc_ead .cmp-coursehero__meta { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 1rem 0 0; padding: 0; } .wc_ead .cmp-coursehero__meta li { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .9); font-size: .9rem; } .wc_ead .cmp-coursehero__meta .icon { color: rgba(255, 255, 255, .68); } .wc_ead .cmp-coursehero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 1.6rem; } .wc_ead .cmp-coursehero__hint { color: rgba(255, 255, 255, .78); font-size: .85rem; } .wc_ead .cmp-coursehero__aside { display: flex; justify-content: center; } .wc_ead .cmp-coursemods { padding-bottom: 0; } .wc_ead .cmp-progress { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 0; } .wc_ead .cmp-ring { --p: 0; width: 158px; height: 158px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto; background: conic-gradient(var(--cmp-success) calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0); } .wc_ead .cmp-ring__photo { position: relative; z-index: 2; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; border: 5px solid rgba(255, 255, 255, .92); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); background: #dfe3ef; } .wc_ead .cmp-ring__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .wc_ead .cmp-ring__badge { position: absolute; z-index: 3; bottom: -4px; left: 50%; transform: translateX(-50%); background: #fff; color: color-mix(in srgb, var(--cmp-success) 72%, #003322); font-weight: 800; font-size: .92rem; line-height: 1; padding: .42rem .72rem; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); } .wc_ead .cmp-progress__info { text-align: center; } .wc_ead .cmp-progress__info strong { display: block; color: #fff; font-size: 1.02rem; font-weight: 700; } .wc_ead .cmp-progress__info span { display: block; color: rgba(255, 255, 255, .78); font-size: .82rem; margin-top: .15rem; } /* cabeçalho/acordeão de módulos do curso */ .wc_ead .wc-module-headrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .wc_ead .wc-module-headrow__aside { margin-left: auto; display: inline-flex; align-items: center; gap: 1rem; flex: 0 0 auto; } .wc_ead .wc-module-headrow__aside .wc-module-progress { margin-left: 0; } .wc_ead .wc-module-progress { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; } .wc_ead .wc-module-progress__bar { width: 88px; height: 6px; border-radius: 999px; background: var(--cmp-border); overflow: hidden; } .wc_ead .wc-module-progress__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--cmp-success); transition: width .4s ease; } .wc_ead .wc-module-progress__num { font-size: .78rem; font-weight: 700; color: var(--cmp-muted); min-width: 38px; text-align: right; } .wc_ead .wc-module-progress.is-done .wc-module-progress__num { color: var(--cmp-success); } .wc_ead .wc-module { border-radius: 16px; box-shadow: 0 14px 34px -24px rgba(20, 30, 60, .45); transition: box-shadow .2s ease; } .wc_ead .wc-module.is-open { box-shadow: 0 18px 40px -22px rgba(20, 30, 60, .5); } .wc_ead .wc-module-head { background: var(--cmp-bg-soft); border-bottom: 0; border-radius: 16px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background .15s ease; } .wc_ead .wc-module-head:hover { background: color-mix(in srgb, var(--cmp-bg-soft) 70%, var(--cmp-border)); } .wc_ead .wc-module-head:focus-visible { outline: 2px solid var(--cmp-primary); outline-offset: -2px; } .wc_ead .wc-module.is-open > .wc-module-head { border-bottom: 1px solid var(--cmp-border); border-radius: 16px 16px 0 0; } .wc_ead .wc-module-bars { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: .35rem; vertical-align: middle; } .wc_ead .wc-module-chev { color: #b6c0d8; font-size: 1.15rem; line-height: 1; flex: 0 0 auto; transition: transform .25s ease, color .25s ease; } .wc_ead .wc-module.is-open .wc-module-chev { transform: rotate(180deg); color: var(--cmp-primary); } .wc_ead .wc-module-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .wc_ead .wc-module.is-open .wc-module-panel { grid-template-rows: 1fr; } .wc_ead .wc-module-panel__inner { overflow: hidden; min-height: 0; } .wc_ead .wc-module.is-open .wc-module-panel__inner { overflow: visible; transition: overflow 0s .28s; } /* lista de aulas */ .wc_ead .wc-class-list { list-style: none; margin: 0; padding: 0; } .wc_ead .wc-class-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--cmp-border); transition: background .15s ease; } .wc_ead .wc-class-row:last-child { border-bottom: 0; } .wc_ead .wc-class-row.active { background: rgba(var(--cmp-primary-rgb), .07); box-shadow: inset 3px 0 0 var(--cmp-primary); } .wc_ead .wc-class-title { flex: 1 1 240px; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--cmp-heading); } .wc_ead .wc-class-title .icon { color: var(--cmp-primary); } .wc_ead .wc-class-title a { color: var(--cmp-heading); text-decoration: none; } .wc_ead .wc-class-title a:hover { color: var(--cmp-primary); } .wc_ead .wc-class-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--cmp-muted); min-width: 72px; } .wc_ead .wc-class-meta .icon { color: var(--cmp-border); } .wc_ead .wc-class-meta.text-success .icon { color: var(--cmp-success); } /* playlist do módulo (sidebar da aula) */ .wc_ead .wc-module-classes { list-style: none; margin: 0; padding: 0; } .wc_ead .wc-module-classes li { margin: 0; } .wc_ead .wc-module-classes li:last-child a { border-bottom: 0; } .wc_ead .wc-module-classes a { display: flex; align-items: center; gap: .5rem; padding: .7rem .55rem; border-bottom: 1px solid var(--cmp-border); border-radius: 9px; color: var(--cmp-text); text-decoration: none; font-size: .9rem; transition: background .15s ease, color .15s ease; } .wc_ead .wc-module-classes a .icon { color: var(--cmp-border); } .wc_ead .wc-module-classes a:hover { background: var(--cmp-bg-soft); color: var(--cmp-primary); } .wc_ead .wc-module-classes a.active { background: rgba(var(--cmp-primary-rgb), .1); color: var(--cmp-primary); font-weight: 600; } .wc_ead .wc-module-classes a.active .icon { color: var(--cmp-primary); } /* =========================================================================== 9. AULA — cabeçalho escuro + player + materiais + estatísticas =========================================================================== */ .wc_ead .cmp-lessonhead--bleed { position: relative; overflow: hidden; border-radius: 0; margin: 0 0 1.75rem; padding: clamp(1.75rem, 4vw, 2.5rem) 0; color: #fff; background: var(--cmp-primary); background: var(--cmp-grad); } .wc_ead .cmp-lessonhead--flush { margin-bottom: 0; } .wc_ead .cmp-lessonhead .cmp-hero__glow { background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 62%); right: -90px; top: -110px; } .wc_ead .cmp-lessonhead__inner { position: relative; z-index: 2; max-width: var(--cmp-maxw); margin: 0 auto; padding-left: var(--cmp-gutter); padding-right: var(--cmp-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; } .wc_ead .cmp-lessonhead__main { min-width: 0; } .wc_ead .cmp-lessonhead__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; } .wc_ead .cmp-lessonhead__crumb a { color: rgba(255, 255, 255, .82); text-decoration: none; } .wc_ead .cmp-lessonhead__crumb a:hover { color: #fff; } .wc_ead .cmp-lessonhead__crumb .icon { color: rgba(255, 255, 255, .55); font-size: .9rem; } .wc_ead .cmp-lessonhead__title { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.18; margin: .55rem 0 0; } .wc_ead .cmp-lessonhead__meta { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .8rem 0 0; padding: 0; } .wc_ead .cmp-lessonhead__meta li { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .9); font-size: .85rem; } .wc_ead .cmp-lessonhead__meta .icon { color: rgba(255, 255, 255, .68); } .wc_ead .wc-task-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1rem; color: var(--cmp-muted); font-size: .875rem; } .wc_ead .wc-task-stats span { display: inline-flex; align-items: center; gap: .4rem; } .wc_ead .wc-task-stats .icon { color: var(--cmp-primary); } .wc_ead .wc-task-cover { width: 100%; border-radius: .5rem; display: block; } /* palco escuro do player */ .wc_ead .ead-player-card { position: relative; border: 0; border-radius: 18px; background: #0e1628; background: linear-gradient(168deg, color-mix(in srgb, var(--cmp-primary) 45%, #0a0f1c) 0%, color-mix(in srgb, var(--cmp-primary) 18%, #080c16) 100%); box-shadow: 0 34px 64px -34px rgba(5, 8, 20, .9); } .wc_ead .ead-player-card > .card-inner { padding: clamp(1rem, 2.5vw, 1.6rem); } .wc_ead .ead-player-card--bleed { border-radius: 0; margin: 0 0 1.75rem; box-shadow: none; } /* `width: 100%` é essencial: o card é flexbox em coluna e, só com margin auto, o .card-inner encolhe para a largura intrínseca do iframe (640px) em vez de acompanhar o container — o vídeo ficava espremido no meio do palco. */ .wc_ead .ead-player-card--bleed > .card-inner { width: 100%; max-width: var(--cmp-maxw); margin-left: auto; margin-right: auto; padding-left: var(--cmp-gutter); padding-right: var(--cmp-gutter); padding-top: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); } .wc_ead .ead-player-card .wc_ead_course_task_media_play { position: relative; } /* o player ocupa toda a largura do container, com teto pela altura da viewport (assim não força rolagem em telas baixas) e centralizado no palco. */ .wc_ead .ead-player-card .embed-container { position: relative; width: 100%; max-width: min(100%, calc((100vh - 240px) * 16 / 9)); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #06070d; box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .75); } .wc_ead .ead-player-card .embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* barra de controles do player: ‹ anterior · CONCLUIR · próxima › */ .wc_ead .ead-pcontrols { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .85rem; margin: 1.25rem auto 0; } /* prev/next = botões-ícone circulares; o rótulo da aula vira tooltip no hover */ .wc_ead .ead-pcontrols .class_next { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #cdd5ee; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .wc_ead .ead-pcontrols .class_next::before { font-size: 1.3rem; line-height: 1; } .wc_ead .ead-pcontrols .class_next:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); color: #fff; transform: translateY(-2px); } .wc_ead .ead-pcontrols .class_next__label { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 20; width: max-content; max-width: 230px; padding: .5rem .7rem; border-radius: 8px; background: #1b2742; color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.4; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .wc_ead .ead-pcontrols .class_next__label::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1b2742; } .wc_ead .ead-pcontrols .class_next:hover .class_next__label { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .wc_ead .ead-pcontrols .jwc_ead_task { flex: 0 0 auto; display: flex; } .wc_ead .ead-pcontrols .jwc_ead_task .a { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1.5rem; border-radius: 10px; font-size: .85rem; font-weight: 800; border: 1px solid transparent; cursor: pointer; transition: filter .18s ease, transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .wc_ead .ead-pcontrols .jwc_ead_task .a.check { background: var(--cmp-primary); background: linear-gradient(135deg, var(--cmp-primary), color-mix(in srgb, var(--cmp-primary) 64%, #000)); color: #fff; box-shadow: 0 14px 28px -12px rgba(var(--cmp-primary-rgb), .75); } .wc_ead .ead-pcontrols .jwc_ead_task .a.check:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff; } .wc_ead .ead-pcontrols .jwc_ead_task .a.active { background: rgba(var(--cmp-success-rgb), .15); color: var(--cmp-success); border-color: rgba(var(--cmp-success-rgb), .45); } .wc_ead .ead-pcontrols .jwc_ead_task .a.active:hover { background: rgba(232, 83, 71, .16); color: #ff8e84; border-color: rgba(232, 83, 71, .5); } .wc_ead .ead-pcontrols .jwc_ead_task .a:not(.check):not(.active) { background: rgba(255, 255, 255, .06); color: #93a0c4; cursor: default; } .wc_ead .ead-pcontrols .jwc_ead_task .a:not(.check):not(.active) .icon-clock2 { animation: eadPendingPulse 1.8s ease-in-out infinite; } @keyframes eadPendingPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .wc_ead .ead-material { margin-top: 1rem; text-align: center; } .wc_ead .ead-material .btn-success { background: rgba(30, 224, 172, .14); border: 1px solid rgba(30, 224, 172, .4); color: #1ee0ac; border-radius: 11px; padding: .62rem 1.2rem; font-weight: 700; transition: background .18s ease, color .18s ease; } .wc_ead .ead-material .btn-success:hover { background: var(--cmp-success); color: #04231b; } /* cabeçalho de seção reutilizável + conteúdo/materiais da aula */ .wc_ead .ead-shead { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; } .wc_ead .ead-shead__ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; } .wc_ead .ead-shead__ico--primary { background: var(--cmp-grad); } .wc_ead .ead-shead__ico--accent { background: var(--bs-secondary, #364a63); background: linear-gradient(135deg, var(--bs-secondary, #364a63), color-mix(in srgb, var(--bs-secondary, #364a63) 58%, #1a1a2e)); } .wc_ead .ead-shead__title { margin: 0; color: var(--cmp-heading); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; } .wc_ead .ead-shead__sub { margin: .15rem 0 0; color: var(--cmp-muted); font-size: .85rem; } .wc_ead .ead-lesson { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; width: 100%; } .wc_ead .ead-lesson-content, .wc_ead .ead-materials { border-radius: 16px; width: 100%; } .wc_ead .ead-lesson-content .nk-prose { color: var(--cmp-text); font-size: .98rem; line-height: 1.7; } .wc_ead .ead-material-item { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.05rem; border: 1px solid var(--cmp-border); border-radius: 12px; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .wc_ead .ead-material-item:hover { border-color: var(--cmp-primary); background: var(--cmp-bg-soft); transform: translateY(-1px); } .wc_ead .ead-material-item__ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--bs-secondary, #364a63); background: linear-gradient(135deg, var(--bs-secondary, #364a63), color-mix(in srgb, var(--bs-secondary, #364a63) 58%, #1a1a2e)); } .wc_ead .ead-material-item__tx { display: flex; flex-direction: column; flex: 1; min-width: 0; } .wc_ead .ead-material-item__tx strong { color: var(--cmp-heading); font-size: .95rem; } .wc_ead .ead-material-item__tx small { color: var(--cmp-muted); font-size: .8rem; } .wc_ead .ead-material-item__arrow { color: var(--cmp-muted); font-size: 1.2rem; transition: color .15s ease, transform .15s ease; } .wc_ead .ead-material-item:hover .ead-material-item__arrow { color: var(--cmp-primary); transform: translateY(2px); } /* CTA do quiz da aula */ .wc_ead .ead-quiz { border-radius: 16px; width: 100%; } .wc_ead .ead-quiz__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem; } .wc_ead .ead-quiz__head { flex: 1 1 260px; min-width: 0; margin-bottom: 0; } .wc_ead .ead-quiz__btn { flex: 0 0 auto; } .wc_ead .ead-quiz.is-pass .ead-shead__ico { background: var(--cmp-success); background: linear-gradient(135deg, var(--cmp-success), color-mix(in srgb, var(--cmp-success) 58%, #0b3d2e)); } /* =========================================================================== 10. AUTH — login/recuperar/ativar (backdrop escuro full-bleed) =========================================================================== */ .wc_ead .cmp-dash--auth { padding-bottom: 0; } .wc_ead .cmp-auth { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 70vh; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2rem); background: radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--cmp-primary) 55%, #0c1326) 0, transparent 60%), linear-gradient(150deg, #0c1326, #15193a 60%, color-mix(in srgb, var(--cmp-primary) 30%, #161038)); } .wc_ead .cmp-auth__inner { position: relative; z-index: 2; width: 100%; } .wc_ead .cmp-auth__brand { text-align: center; color: #fff; margin-bottom: 2rem; } .wc_ead .cmp-auth__logo { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--cmp-grad); font-size: 1.7rem; color: #fff; box-shadow: 0 14px 30px -12px rgba(var(--cmp-primary-rgb), .9); margin-bottom: 1rem; } .wc_ead .cmp-auth__brand h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; margin: 0; } .wc_ead .cmp-auth__brand p { color: #b9c2e0; margin: .5rem 0 0; } .wc_ead .cmp-auth .card { border: 0; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(5, 8, 20, .85); } .wc_ead .cmp-auth .card-inner-lg { padding: 2.25rem; } /* FORMULÁRIOS premium (.cmp-form) */ .wc_ead .cmp-form .form-label { font-weight: 600; color: var(--cmp-heading); font-size: .8rem; margin-bottom: .4rem; } .wc_ead .cmp-form .form-control { border-radius: 10px; border: 1.5px solid var(--cmp-border); background: var(--cmp-surface); padding: .6rem .9rem; height: auto; min-height: 44px; color: var(--cmp-heading); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .wc_ead .cmp-form .form-control::placeholder { color: var(--cmp-muted); } .wc_ead .cmp-form .form-control:focus { border-color: var(--cmp-primary); box-shadow: 0 0 0 3px rgba(var(--cmp-primary-rgb), .14); background: var(--cmp-surface); outline: none; } .wc_ead .cmp-form .form-control[readonly] { background: var(--cmp-bg-soft); color: var(--cmp-muted); } .wc_ead .cmp-form select.form-control { cursor: pointer; } .wc_ead .cmp-form .overline-title { letter-spacing: .1em; } .wc_ead .cmp-form .btn-success { background: linear-gradient(135deg, #1ee0ac, #11b886); border: 0; border-radius: 10px; padding: .72rem 1.5rem; font-weight: 700; color: #04231b !important; box-shadow: 0 14px 26px -14px rgba(30, 224, 172, .85); transition: filter .15s ease, transform .15s ease; } .wc_ead .cmp-form .btn-success:hover { filter: brightness(1.04); transform: translateY(-1px); color: #04231b !important; } /* uploader de avatar */ .wc_ead .cmp-avatar { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem; border: 1px solid var(--cmp-border); border-radius: 14px; background: var(--cmp-bg-soft); margin-bottom: 1.5rem; } .wc_ead .cmp-avatar__pic { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(20, 30, 60, .55); flex: 0 0 auto; } .wc_ead .cmp-avatar__meta { display: flex; flex-direction: column; } .wc_ead .cmp-avatar__meta strong { color: var(--cmp-heading); font-size: .98rem; } .wc_ead .cmp-avatar__meta small { color: var(--cmp-muted); font-size: .8rem; margin: .1rem 0 .6rem; } .wc_ead .cmp-avatar__input { display: none; } /* =========================================================================== 11. OVERLAYS legados (re-emitidos por AJAX): alert/modal/win/upload/load =========================================================================== */ .wc_ead .wc_ead_alert, .wc_ead .wc_ead_modal, .wc_ead .wc_ead_upload, .wc_ead .wc_ead_load, .wc_ead .wc_ead_win, .wc_ead .wc_ead_course_task_modal { display: none; } /* 11.1 Alert — toast no topo */ .wc_ead .wc_ead_alert { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1100; width: min(440px, calc(100% - 2rem)); } .wc_ead .wc_ead_alert_box { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.1rem; background: var(--cmp-surface); border-radius: 12px; border-left: 4px solid var(--cmp-primary); box-shadow: 0 18px 40px -16px rgba(20, 30, 60, .45); } .wc_ead .wc_ead_alert_box.blue { border-left-color: var(--cmp-primary); } .wc_ead .wc_ead_alert_box.green { border-left-color: var(--cmp-success); } .wc_ead .wc_ead_alert_box.red { border-left-color: var(--cmp-danger); } .wc_ead .wc_ead_alert_box.yellow { border-left-color: #f4bd0e; } .wc_ead .wc_ead_alert_icon { font-size: 1.4rem; line-height: 1; color: var(--cmp-primary); } .wc_ead .wc_ead_alert_box.green .wc_ead_alert_icon { color: var(--cmp-success); } .wc_ead .wc_ead_alert_box.red .wc_ead_alert_icon { color: var(--cmp-danger); } .wc_ead .wc_ead_alert_box.yellow .wc_ead_alert_icon { color: #f4bd0e; } .wc_ead .wc_ead_alert_text { flex: 1 1 auto; } .wc_ead .wc_ead_alert_title { font-weight: 700; color: var(--cmp-heading); margin: 0 0 .15rem; } .wc_ead .wc_ead_alert_content { font-size: .875rem; color: var(--cmp-muted); margin: 0; } .wc_ead .wc_ead_alert_close { background: none; border: 0; color: var(--cmp-muted); font-size: 1.1rem; cursor: pointer; line-height: 1; } .wc_ead .wc_ead_alert_close:hover { color: var(--cmp-text); } /* 11.2 Modal / Win / Task modal / Upload / Load — centralizados sobre backdrop */ .wc_ead .wc_ead_modal, .wc_ead .wc_ead_win, .wc_ead .wc_ead_course_task_modal, .wc_ead .wc_ead_upload, .wc_ead .wc_ead_load { position: fixed; inset: 0; z-index: 1090; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(13, 20, 40, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .wc_ead .wc_ead_modal_box, .wc_ead .wc_ead_win_box, .wc_ead .wc_ead_course_task_modal_content { position: relative; width: min(520px, 100%); max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--cmp-surface); border-radius: 16px; padding: 1.75rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); } .wc_ead .wc_ead_modal_close, .wc_ead .wc_ead_course_task_modal_content_close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--cmp-bg-soft); color: var(--cmp-muted); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; } .wc_ead .wc_ead_modal_close:hover, .wc_ead .wc_ead_course_task_modal_content_close:hover { background: var(--cmp-danger); color: #fff; } .wc_ead .wc_ead_modal_title { font-size: 1.25rem; font-weight: 700; color: var(--cmp-heading); margin: 0 0 .75rem; } .wc_ead .wc_ead_modal_title.blue { color: var(--cmp-primary); } .wc_ead .wc_ead_modal_title.green { color: var(--cmp-success); } .wc_ead .wc_ead_modal_title.red { color: var(--cmp-danger); } .wc_ead .wc_ead_modal_title.yellow { color: #f4bd0e; } .wc_ead .wc_ead_modal_content { color: var(--cmp-text); font-size: .9375rem; line-height: 1.6; } .wc_ead .wc_ead_modal_help { margin-top: 1.25rem; font-size: .8125rem; color: var(--cmp-muted); } .wc_ead .wc_ead_modal_help a { color: var(--cmp-primary); } .wc_ead .wc_ead_win_box { max-width: 420px; padding: 0; overflow: hidden; } .wc_ead .wc_ead_win_box > img { width: 100%; display: block; } .wc_ead .wc_ead_win_box_content { padding: 1.5rem; } .wc_ead .wc_ead_win_box_content .title { font-size: 1.2rem; font-weight: 700; color: var(--cmp-heading); margin: 0 0 .5rem; display: inline-flex; align-items: center; gap: .4rem; } .wc_ead .wc_ead_win_box_text { color: var(--cmp-text); font-size: .9375rem; margin: 0 0 1.25rem; } .wc_ead .wc_ead_win_box_actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .wc_ead .wc_ead_upload_box, .wc_ead .wc_ead_load_content { text-align: center; color: #fff; } .wc_ead .wc_ead_upload_spinner, .wc_ead .wc_ead_load_spinner { width: 48px; height: 48px; margin: 0 auto 1rem; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: wc_ead_spin .8s linear infinite; } .wc_ead .wc_ead_upload_progress { font-size: 1.5rem; font-weight: 700; color: #fff; } .wc_ead .wc_ead_load_content_msg { font-size: .9375rem; color: #fff; margin: 0; } @keyframes wc_ead_spin { to { transform: rotate(360deg); } } /* modal de avaliação/resposta do fórum */ .wc_ead .wc_ead_course_task_modal_head { display: flex; align-items: center; gap: .85rem; margin: 0 2.25rem 1.25rem 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--cmp-border); } .wc_ead .wc_ead_course_task_modal_content_icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; font-size: 1.2rem; background: var(--cmp-grad); } .wc_ead .wc_ead_course_task_modal_content_icon.text-success { background: linear-gradient(135deg, #1ee0ac, #11b886); } .wc_ead .wc_ead_course_task_modal_content_icon.text-danger { background: linear-gradient(135deg, #ff8a80, #e85347); } .wc_ead .wc_ead_course_task_modal_head h5 { margin: 0; color: var(--cmp-heading); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; } /* =========================================================================== 12. FÓRUM reformulado (.ead-forum) + tickets legados re-emitidos por AJAX =========================================================================== */ .wc_ead .ead-forum { margin-top: 2rem; } .wc_ead .ead-forum__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .wc_ead .ead-forum__intro { display: flex; align-items: center; gap: .85rem; } .wc_ead .ead-forum__toggle { display: inline-flex; padding: 4px; background: var(--cmp-bg-soft); border-radius: 12px; gap: 3px; } .wc_ead .ead-forum__toggle .btn { border: 0; box-shadow: none; background: transparent; color: var(--cmp-text) !important; font-weight: 700; font-size: .8rem; padding: .5rem .95rem; border-radius: 9px; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .wc_ead .ead-forum__toggle .btn:hover { color: var(--cmp-heading) !important; } .wc_ead .ead-forum__toggle .btn_green { background: var(--cmp-surface); color: var(--cmp-primary) !important; box-shadow: 0 6px 14px -8px rgba(20, 30, 60, .4); } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket { display: flex; gap: 1rem; width: 100%; padding: 1.25rem; background: var(--cmp-surface); border: 1px solid var(--cmp-border); border-radius: 14px; margin-bottom: 1rem; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_thumb { flex: 0 0 auto; width: auto; padding: 0; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_thumb img { width: 46px; height: 46px; padding: 0; background: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cmp-bg-soft); } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_thumb.admin img { box-shadow: 0 0 0 2px var(--cmp-primary), 0 0 0 4px rgba(var(--cmp-primary-rgb), .2); } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_content { flex: 1; min-width: 0; width: auto; padding: 0; background: transparent; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_header { margin-bottom: .5rem; border-bottom: 0; padding: 0; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_header h1 { font-size: .9rem; font-weight: 600; color: var(--cmp-muted); margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; line-height: 1.4; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_header h1::before { display: none; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_header .user { font-weight: 700; color: var(--cmp-heading); font-size: .95rem; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_header .time { color: var(--cmp-muted); font-size: .8rem; } .wc_ead .ead-forum .htmlchars { color: var(--cmp-text); font-size: .93rem; line-height: 1.6; } .wc_ead .ead-forum .htmlchars p:last-child { margin-bottom: 0; } .wc_ead .ead-forum .status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; } .wc_ead .ead-forum .status.bar_red { background: rgba(232, 83, 71, .14); color: var(--cmp-danger); } .wc_ead .ead-forum .status.bar_blue { background: rgba(var(--cmp-primary-rgb), .14); color: var(--cmp-primary); } .wc_ead .ead-forum .status.bar_green { background: rgba(var(--cmp-success-rgb), .16); color: #119e7c; } .wc_ead .ead-forum .wc_ead_course_task_forum_response { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--cmp-border); display: flex; flex-direction: column; gap: .85rem; } .wc_ead .ead-forum .wc_ead_course_task_forum_response:empty { display: none; } .wc_ead .ead-forum .wc_ead_course_task_forum_response .wc_ead_course_task_forum_ticket { margin: 0; background: var(--cmp-bg-soft); border-color: var(--cmp-border); padding: 1rem; border-radius: 11px; } .wc_ead .ead-forum .wc_ead_course_task_forum_response .wc_ead_course_task_forum_ticket::before { display: none; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_line { display: none; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn { margin: 0; box-shadow: none; border-radius: 9px; padding: .5rem .95rem; min-height: 36px; line-height: 1; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; border: 1px solid transparent; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn .icon { font-size: 1em; line-height: 1; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn_blue { background: rgba(var(--cmp-primary-rgb), .1); color: var(--cmp-primary) !important; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn_blue:hover { background: var(--cmp-primary); color: #fff !important; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn_green { background: rgba(var(--cmp-success-rgb), .14); color: #119e7c !important; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket_actions .btn_green:hover { background: var(--cmp-success); color: #04231b !important; } .wc_ead .ead-forum .review { display: inline-flex; align-items: center; gap: 1px; margin: 0 auto 0 0; } .wc_ead .ead-forum .wc_ead_course_task_forum_none { text-align: center; padding: 2rem 1.25rem; background: var(--cmp-bg-soft); border: 1px dashed var(--cmp-border); border-radius: 14px; color: var(--cmp-muted); } .wc_ead .ead-forum .jwc_ead_forum_content > .wc_ead_course_task_forum_ticket { position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .wc_ead .ead-forum .jwc_ead_forum_content > .wc_ead_course_task_forum_ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cmp-grad); opacity: .65; } .wc_ead .ead-forum .jwc_ead_forum_content > .wc_ead_course_task_forum_ticket:hover { border-color: color-mix(in srgb, var(--cmp-border) 60%, var(--cmp-primary)); box-shadow: 0 16px 34px -22px rgba(20, 30, 60, .5); transform: translateY(-1px); } .wc_ead .ead-ask { margin-top: 2rem; } .wc_ead .ead-ask .card { border-radius: 14px; } /* editor de texto novo (.ead-editor) */ .wc_ead .ead-editor { border: 1.5px solid var(--cmp-border); border-radius: 12px; background: var(--cmp-surface); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .wc_ead .ead-editor:focus-within { border-color: var(--cmp-primary); box-shadow: 0 0 0 3px rgba(var(--cmp-primary-rgb), .14); } .wc_ead .ead-editor__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem; padding: .4rem .5rem; background: var(--cmp-bg-soft); border-bottom: 1px solid var(--cmp-border); } .wc_ead .ead-editor__btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--cmp-text); cursor: pointer; transition: background .12s ease, color .12s ease; } .wc_ead .ead-editor__btn .icon { font-size: 1rem; } .wc_ead .ead-editor__btn:hover { background: var(--cmp-border); color: var(--cmp-heading); } .wc_ead .ead-editor__sep { width: 1px; height: 18px; background: var(--cmp-border); margin: 0 .3rem; } .wc_ead .ead-editor__area { min-height: 128px; max-height: 380px; overflow-y: auto; padding: .85rem 1rem; color: var(--cmp-text); font-size: .95rem; line-height: 1.65; outline: none; } .wc_ead .ead-editor__area:empty::before { content: attr(data-placeholder); color: var(--cmp-muted); pointer-events: none; } .wc_ead .ead-editor__area p { margin: 0 0 .6rem; } .wc_ead .ead-editor__area > :last-child { margin-bottom: 0; } .wc_ead .ead-editor__area ul, .wc_ead .ead-editor__area ol { margin: 0 0 .6rem 1.2rem; } .wc_ead .ead-editor__area blockquote { margin: 0 0 .6rem; padding: .35rem .9rem; border-left: 3px solid var(--cmp-primary); background: var(--cmp-bg-soft); border-radius: 0 8px 8px 0; color: var(--cmp-text); } .wc_ead .ead-editor__area pre { margin: 0 0 .6rem; background: #0c1326; color: #e3e7f5; padding: .8rem 1rem; border-radius: 8px; overflow: auto; font-size: .85rem; } .wc_ead .ead-editor__area a { color: var(--cmp-primary); } /* =========================================================================== 13. Tooltip + Certificado (overload) =========================================================================== */ .wc_ead .wc_tooltip { position: relative; cursor: help; } .wc_ead .wc_tooltip_balloon { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 20; width: max-content; max-width: 240px; padding: .5rem .7rem; border-radius: 8px; background: #1b2742; color: #fff; font-size: .76rem; font-weight: 500; line-height: 1.4; text-align: center; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); } .wc_ead .wc_tooltip_balloon::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1b2742; } .wc_ead .wc_tooltip:hover .wc_tooltip_balloon { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .wc_ead .wc_ead_certificate_overload { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(13, 20, 40, .6); } .wc_ead .wc_ead_certificate_overload_box img { display: block; margin: 0 auto 1rem; } /* =========================================================================== 14. CURSO — modal de materiais (.cmp-matmodal) + acordeão (.cmp-matacc) =========================================================================== */ body.cmp-matmodal-lock { overflow: hidden; } .wc_ead .cmp-matmodal { position: fixed; inset: 0; z-index: 1090; display: none; } .wc_ead .cmp-matmodal.is-open { display: flex; align-items: center; justify-content: center; } .wc_ead .cmp-matmodal__overlay { position: absolute; inset: 0; background: rgba(13, 20, 40, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .wc_ead .cmp-matmodal__dialog { position: relative; z-index: 2; width: min(720px, calc(100% - 2rem)); max-height: calc(100vh - 4rem); margin: auto; background: var(--cmp-surface); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); display: flex; flex-direction: column; overflow: hidden; animation: cmpMatIn .22s ease; } @keyframes cmpMatIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .wc_ead .cmp-matmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; color: #fff; background: var(--cmp-grad); } .wc_ead .cmp-matmodal__headinfo { display: flex; align-items: center; gap: .85rem; } .wc_ead .cmp-matmodal__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(255, 255, 255, .18); font-size: 1.2rem; } .wc_ead .cmp-matmodal__title { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0; } .wc_ead .cmp-matmodal__sub { color: rgba(255, 255, 255, .82); font-size: .82rem; margin: .15rem 0 0; } .wc_ead .cmp-matmodal__close { border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; transition: background .15s ease; } .wc_ead .cmp-matmodal__close:hover { background: rgba(255, 255, 255, .3); } .wc_ead .cmp-matmodal__body { padding: 0; overflow-y: auto; } .wc_ead .cmp-matacc { border-bottom: 1px solid var(--cmp-border); } .wc_ead .cmp-matacc:last-child { border-bottom: 0; } .wc_ead .cmp-matacc__head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: 1rem 1.35rem; background: var(--cmp-surface); border: 0; cursor: pointer; text-align: left; font: inherit; transition: background .15s ease; } .wc_ead .cmp-matacc__head:hover, .wc_ead .cmp-matacc.is-open .cmp-matacc__head { background: var(--cmp-bg-soft); } .wc_ead .cmp-matacc__ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; color: var(--cmp-primary); background: rgba(var(--cmp-primary-rgb), .12); } .wc_ead .cmp-matacc__title { flex: 1; min-width: 0; font-weight: 700; color: var(--cmp-heading); font-size: .95rem; } .wc_ead .cmp-matacc__count { flex: 0 0 auto; font-size: .73rem; font-weight: 700; color: var(--cmp-muted); background: var(--cmp-bg-soft); border-radius: 999px; padding: .18rem .6rem; } .wc_ead .cmp-matacc__chev { flex: 0 0 auto; color: #b6c0d8; font-size: 1.1rem; transition: transform .25s ease; } .wc_ead .cmp-matacc.is-open .cmp-matacc__chev { transform: rotate(180deg); } /* =========================================================================== 15. RESPONSIVO — PC › tablet › mobile =========================================================================== */ @media (max-width: 860px) { .wc_ead .cmp-hero__inner, .wc_ead .cmp-coursehero__inner { grid-template-columns: 1fr; } .wc_ead .cmp-quick { grid-template-columns: repeat(2, 1fr); } .wc_ead .cmp-coursehero__aside { justify-content: flex-start; } } @media (max-width: 640px) { .wc_ead .ead-pcontrols { gap: .6rem; } .wc_ead .ead-pcontrols .class_next { width: 44px; height: 44px; } .wc_ead .ead-pcontrols .jwc_ead_task .a { padding: .55rem 1rem; } } @media (max-width: 575px) { .wc_ead .cmp-hero { padding: 1.5rem; } .wc_ead .cmp-hero--bleed { padding: clamp(1.5rem, 7vw, 2rem) 0 2.5rem; } .wc_ead .cmp-coursehero { padding: 1.5rem; } .wc_ead .cmp-quick { grid-template-columns: 1fr; } .wc_ead .cmp-hero__stats { gap: 1rem 1.75rem; } .wc_ead .cmp-hero__stats strong { font-size: 1.4rem; } .wc_ead .cmp-hero__logout span { display: none; } .wc_ead .cmp-lessonhead__inner { flex-direction: column; align-items: flex-start; } .wc_ead .cmp-avatar { flex-direction: column; text-align: center; } .wc_ead .cmp-avatar__meta { align-items: center; } .wc_ead .ead-forum__head { flex-direction: column; align-items: flex-start; } .wc_ead .ead-forum__toggle { width: 100%; } .wc_ead .ead-forum__toggle .btn { flex: 1; justify-content: center; } .wc_ead .ead-forum .wc_ead_course_task_forum_ticket { flex-direction: column; gap: .75rem; } } @media (prefers-reduced-motion: reduce) { .wc_ead * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }