/* ============================================================ MVP Blips Educa — Design System Base: tokens oficiais Blips Educa (thumb_studio/tokens) + acento por segmento injetado via CSS vars no (themes.py). Fonte: Sora self-hosted. Marca: amarelo #FCBA28 sobre neutros. ============================================================ */ @font-face { font-family:'Sora'; src:url('../fonts/Sora-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'Sora'; src:url('../fonts/Sora-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; } @font-face { font-family:'Sora'; src:url('../fonts/Sora-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } @font-face { font-family:'Sora'; src:url('../fonts/Sora-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; } :root { --brand-black:#040707; --brand-yellow:#FCBA28; --brand-yellow-light:#FFE59E; --brand-white:#FBFBFB; --brand-gold:#C8901A; --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#FAFAF8; --text:#17181A; --text-2:#5C5F66; --text-3:#9A9DA6; --border:#E5E5E1; --border-2:#D5D5D0; --success:#1E9E5A; --warning:#D97706; --error:#D6423B; --radius:12px; --radius-sm:8px; --radius-lg:18px; --shadow:0 1px 2px rgba(4,7,7,.05),0 4px 14px rgba(4,7,7,.06); --shadow-lg:0 4px 10px rgba(4,7,7,.08),0 14px 34px rgba(4,7,7,.12); --sidebar-w:248px; /* Acento do segmento (sobrescrito por página) */ --accent:#FCBA28; --accent-soft:#FFF3D6; --accent-dark:#C8901A; --on-accent:#040707; --seg-gradient:linear-gradient(135deg,#0a0a0a 0%,#2a2206 40%,#FCBA28 85%,#C8901A 100%); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; } img{ max-width:100%; display:block; } a{ color:inherit; } button{ font-family:inherit; } h1,h2,h3{ line-height:1.25; margin:0 0 .4em; } h1{ font-size:1.55rem; font-weight:800; } h2{ font-size:1.15rem; font-weight:700; } h3{ font-size:1rem; font-weight:600; } :focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; border-radius:4px; } .skip-link{ position:absolute; left:-999px; top:8px; background:var(--brand-yellow); color:var(--brand-black); padding:10px 16px; border-radius:8px; z-index:200; font-weight:700; } .skip-link:focus{ left:8px; } /* ---------- Layout ---------- */ .shell{ display:flex; min-height:100vh; } .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .content{ padding:22px clamp(14px,3vw,34px) 90px; max-width:1240px; width:100%; margin:0 auto; } /* ---------- Sidebar ---------- */ .sidebar{ width:var(--sidebar-w); background:var(--brand-black); color:#EDEDEA; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:18px 14px; flex-shrink:0; transition:width .2s ease; } .sidebar .logo{ padding:4px 10px 18px; } .sidebar .logo img{ height:34px; width:auto; } .side-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; } .side-nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:#C9CBCE; text-decoration:none; font-weight:600; font-size:.92rem; } .side-nav a svg{ width:20px; height:20px; flex-shrink:0; } .side-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; } .side-nav a.active{ background:var(--brand-yellow); color:var(--brand-black); } .side-foot{ margin-top:auto; padding:10px; font-size:.78rem; color:#84878D; } .seg-badge{ display:inline-flex; align-items:center; gap:8px; margin:14px 10px 4px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; font-weight:600; color:#EDEDEA; } .seg-badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); } /* ---------- Topbar ---------- */ .topbar{ display:flex; align-items:center; gap:14px; padding:12px clamp(14px,3vw,34px); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; } .topbar .burger{ display:none; } .search-form{ flex:1; max-width:520px; position:relative; } .search-form input{ width:100%; padding:10px 14px 10px 40px; border-radius:999px; border:1.5px solid var(--border-2); background:var(--surface-2); font:inherit; font-size:.9rem; } .search-form input:focus{ border-color:var(--brand-yellow); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(252,186,40,.25); } .search-form .s-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-3); pointer-events:none; } .user-chip{ display:flex; align-items:center; gap:10px; margin-left:auto; text-decoration:none; } .avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; } .user-chip .u-name{ font-weight:700; font-size:.86rem; line-height:1.1; } .user-chip .u-seg{ font-size:.72rem; color:var(--text-2); } /* ---------- Hero ---------- */ .hero{ border-radius:var(--radius-lg); background:var(--seg-gradient); color:#fff; padding:clamp(20px,4vw,34px); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .hero.light{ color:var(--brand-black); } .hero::after{ content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none; } .hero .eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; } .hero h1{ margin:.25em 0 .2em; font-size:clamp(1.35rem,3vw,1.8rem); } .hero p{ margin:0; opacity:.9; max-width:640px; font-size:.95rem; } .hero .hero-actions{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:.9rem; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; line-height:1.2; } .btn:active{ transform:scale(.98); } .btn-primary{ background:var(--brand-yellow); color:var(--brand-black); } .btn-primary:hover{ box-shadow:0 4px 14px rgba(252,186,40,.45); } .btn-ghost{ background:rgba(255,255,255,.14); color:inherit; backdrop-filter:blur(4px); } .btn-ghost:hover{ background:rgba(255,255,255,.24); } .btn-outline{ background:transparent; border:1.5px solid var(--border-2); color:var(--text); } .btn-outline:hover{ border-color:var(--text-2); } .btn-sm{ padding:7px 14px; font-size:.82rem; } .btn[disabled]{ opacity:.55; cursor:not-allowed; } /* ---------- Seções ---------- */ .section{ margin-top:30px; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; } .section-head .see-all{ font-size:.83rem; font-weight:600; color:var(--text-2); text-decoration:none; white-space:nowrap; } .section-head .see-all:hover{ color:var(--text); } .section-head h2 .accent-bar{ display:inline-block; width:26px; height:5px; border-radius:3px; background:var(--accent); margin-right:10px; vertical-align:middle; } /* ---------- Cards de conteúdo ---------- */ .grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .row-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:min(262px,78vw); gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; } .row-scroll > *{ scroll-snap-align:start; } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--shadow); } .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } .card .thumb{ aspect-ratio:16/9; background:var(--surface-2); position:relative; } .card .thumb img{ width:100%; height:100%; object-fit:cover; } .card .thumb .dur{ position:absolute; right:8px; bottom:8px; background:rgba(4,7,7,.75); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:6px; font-weight:600; } .card .c-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; } .card .c-eq{ font-size:.72rem; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.05em; } .card .c-title{ font-weight:600; font-size:.92rem; line-height:1.35; margin:0; } .card .c-title a{ text-decoration:none; color:inherit; } .card .c-title a::after{ content:''; position:absolute; inset:0; } .card .c-meta{ display:flex; align-items:center; gap:8px; margin-top:auto; font-size:.75rem; color:var(--text-2); } .chip-cat{ background:var(--accent-soft); color:var(--accent-dark); border-radius:6px; padding:2px 8px; font-weight:600; font-size:.7rem; } .fav-btn{ position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background:rgba(4,7,7,.55); color:#fff; display:flex; align-items:center; justify-content:center; } .fav-btn:hover{ background:rgba(4,7,7,.8); } .fav-btn.is-fav{ color:var(--brand-yellow); } .fav-btn svg{ width:17px; height:17px; } .pbar{ height:4px; background:rgba(4,7,7,.12); border-radius:2px; overflow:hidden; } .pbar > i{ display:block; height:100%; background:var(--accent); border-radius:2px; } .card .pbar{ position:absolute; left:0; right:0; bottom:0; border-radius:0; } .badge-done{ position:absolute; top:8px; left:8px; background:var(--success); color:#fff; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:999px; z-index:2; } /* ---------- Chips de filtro ---------- */ .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 6px; } .chip{ padding:7px 14px; border-radius:999px; border:1.5px solid var(--border-2); background:var(--surface); font-size:.8rem; font-weight:600; color:var(--text-2); text-decoration:none; white-space:nowrap; } .chip:hover{ border-color:var(--text-3); color:var(--text); } .chip.active{ background:var(--brand-black); border-color:var(--brand-black); color:var(--brand-yellow); } /* ---------- Player ---------- */ .player-wrap{ background:var(--brand-black); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); } .player-wrap video{ width:100%; aspect-ratio:16/9; display:block; background:#000; } .video-missing{ aspect-ratio:16/9; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; color:#C9CBCE; text-align:center; padding:20px; } .video-missing svg{ width:44px; height:44px; opacity:.6; } /* ---------- Breadcrumb ---------- */ .crumbs{ display:flex; gap:6px; flex-wrap:wrap; font-size:.8rem; color:var(--text-2); margin-bottom:14px; } .crumbs a{ color:var(--text-2); text-decoration:none; } .crumbs a:hover{ color:var(--text); text-decoration:underline; } .crumbs .sep{ opacity:.5; } /* ---------- Listas / tabelas admin ---------- */ .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .stat-row{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; } .stat .n{ font-size:1.5rem; font-weight:800; } .stat .l{ font-size:.78rem; color:var(--text-2); font-weight:600; } .table-wrap{ overflow-x:auto; } table.data{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px; } table.data th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); padding:10px 12px; border-bottom:2px solid var(--border); } table.data td{ padding:10px 12px; border-bottom:1px solid var(--border); } table.data tr:hover td{ background:var(--surface-2); } /* ---------- Estados vazios / skeleton ---------- */ .empty{ text-align:center; padding:44px 20px; color:var(--text-2); background:var(--surface); border:1.5px dashed var(--border-2); border-radius:var(--radius-lg); } .empty svg{ width:42px; height:42px; margin:0 auto 10px; opacity:.45; } .skeleton{ border-radius:var(--radius); background:linear-gradient(90deg,var(--border) 25%,var(--surface-2) 50%,var(--border) 75%); background-size:200% 100%; animation:sk 1.4s infinite; } @keyframes sk{ from{ background-position:200% 0; } to{ background-position:-200% 0; } } /* ---------- Flash ---------- */ .flash{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.88rem; font-weight:600; } .flash.info{ background:var(--accent-soft); color:var(--accent-dark); } .flash.error{ background:#FDE8E7; color:var(--error); } /* ---------- Login ---------- */ .login-page{ min-height:100vh; display:grid; grid-template-columns:minmax(400px,46%) 1fr; background:var(--brand-black); } .login-form-col{ background:var(--brand-white); display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,5vw,72px); border-radius:0 26px 26px 0; position:relative; z-index:2; } .login-form-col .logo{ height:40px; width:auto; margin-bottom:34px; align-self:flex-start; } .login-form-col h1{ font-size:1.5rem; margin-bottom:6px; } .login-form-col .sub{ color:var(--text-2); margin:0 0 28px; font-size:.93rem; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; } .field .f-wrap{ position:relative; } .field input{ width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--border-2); font:inherit; font-size:.92rem; background:#fff; } .field input:focus{ border-color:var(--brand-yellow); outline:none; box-shadow:0 0 0 3px rgba(252,186,40,.28); } .field .toggle-pass{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer; color:var(--text-2); padding:6px; border-radius:6px; } .login-opts{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; font-size:.83rem; } .login-opts label{ display:flex; gap:8px; align-items:center; cursor:pointer; color:var(--text-2); } .login-opts input{ accent-color:var(--brand-yellow); width:16px; height:16px; } .btn-login{ width:100%; justify-content:center; padding:13px; font-size:.95rem; position:relative; } .btn-login .spinner{ display:none; } .btn-login.loading .spinner{ display:inline-block; } .btn-login.loading .label{ opacity:.6; } .spinner{ width:16px; height:16px; border:2.5px solid rgba(4,7,7,.3); border-top-color:var(--brand-black); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .login-error{ background:#FDE8E7; color:var(--error); border-radius:10px; padding:11px 14px; font-size:.85rem; font-weight:600; margin-bottom:16px; } .login-foot{ margin-top:30px; font-size:.75rem; color:var(--text-3); } .login-brand-col{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(26px,4vw,56px); color:#fff; background:radial-gradient(1000px 600px at 85% -10%, rgba(252,186,40,.35), transparent 60%), var(--brand-black); } .login-brand-col h2{ font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:800; max-width:520px; } .login-brand-col p{ opacity:.75; max-width:460px; font-size:.92rem; } .seg-mosaic{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .seg-tile{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:.78rem; font-weight:600; } .seg-tile .dot{ width:10px; height:10px; border-radius:50%; } /* ---------- Nav mobile ---------- */ .mobile-nav{ display:none; } /* Drawer: escondido em TODAS as larguras; só abre via .open (menu mobile) */ .drawer{ position:fixed; inset:0; z-index:100; display:none; } .drawer.open{ display:block; } .drawer .scrim{ position:absolute; inset:0; background:rgba(4,7,7,.5); } .drawer .sidebar{ display:flex; position:absolute; left:0; top:0; height:100%; box-shadow:var(--shadow-lg); } /* ---------- Responsivo ---------- */ @media (max-width: 1020px){ .login-page{ grid-template-columns:1fr; } .login-brand-col{ display:none; } .login-form-col{ border-radius:0; } } @media (max-width: 860px){ .sidebar{ display:none; } .topbar .burger{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--border-2); background:var(--surface); cursor:pointer; } .topbar img.m-logo{ height:26px; } .mobile-nav{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:80; background:var(--brand-black); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; } .mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#9A9DA6; text-decoration:none; font-size:.62rem; font-weight:600; padding:6px 10px; border-radius:8px; } .mobile-nav a svg{ width:21px; height:21px; } .mobile-nav a.active{ color:var(--brand-yellow); } .content{ padding-bottom:110px; } } @media (max-width: 560px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } .user-chip .u-txt{ display:none; } .hero .hero-actions .btn{ width:100%; justify-content:center; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }