/* ========================================================================= BexoPRO — Redesign editorial/cardless. Design tokens (fonte: design_handoff_bexopro). Sistema de variáveis: tema claro/escuro (html[data-theme]) + 5 acentos (html[data-accent]). Carregado por último no (ganha a cascata). Os componentes do tema vão passar a consumir estas variáveis nas fases seguintes do restyling. ========================================================================= */ /* ---- Neutros: TEMA CLARO (default) ---- */ :root { --bg:#FAF8F4; --bg-2:#F1ECE4; --bg-3:#EAE4DA; --text:#17130F; --muted:#867D72; --faint:#ABA298; --line:#E7E1D6; --line-2:#D6CEC1; --on-accent:#FFFFFF; --accent-weak-pct:10%; /* acento default = Coral (claro) */ --accent:#FF5A2C; --accent-2:#E8431C; --accent-weak: color-mix(in srgb, var(--accent) var(--accent-weak-pct), transparent); --shadow-pop: 0 18px 44px -16px rgba(0,0,0,.32); --ff-display:'Bricolage Grotesque', sans-serif; --ff-ui:'Manrope', sans-serif; --ff-mono:'JetBrains Mono', ui-monospace, monospace; } /* ---- Neutros: TEMA ESCURO ---- */ html[data-theme="dark"] { --bg:#0D0B0A; --bg-2:#16130F; --bg-3:#1E1A15; --text:#F4EFE8; --muted:#928981; --faint:#5F574F; --line:#221E19; --line-2:#2E2922; --accent-weak-pct:16%; /* acento default = Coral (escuro) */ --accent:#FF6A40; --accent-2:#FF7E57; } /* ---- Paletas de acento (claro) ---- */ html[data-accent="cobalt"] { --accent:#2D6BE0; --accent-2:#1E54C4; } html[data-accent="emerald"] { --accent:#12936A; --accent-2:#0C7A57; } html[data-accent="violet"] { --accent:#7B3FE4; --accent-2:#6526CC; } html[data-accent="amber"] { --accent:#D9820A; --accent-2:#B4670A; } /* coral é o default em :root */ /* ---- Paletas de acento (escuro) ---- */ html[data-theme="dark"][data-accent="coral"] { --accent:#FF6A40; --accent-2:#FF7E57; } html[data-theme="dark"][data-accent="cobalt"] { --accent:#5B8DFF; --accent-2:#7AA5FF; } html[data-theme="dark"][data-accent="emerald"] { --accent:#2EBE8C; --accent-2:#4FD0A4; } html[data-theme="dark"][data-accent="violet"] { --accent:#9D6BFF; --accent-2:#B58BFF; } html[data-theme="dark"][data-accent="amber"] { --accent:#F5A623; --accent-2:#FBC04D; } /* ---- Barra de acento de 3px no topo da app (defining element do design) ---- */ body::before { content:""; position:fixed; top:0; left:0; right:0; height:3px; background:var(--accent); z-index:9999; } /* ---- Base segura (não-destrutiva): tipografia + seleção ---- NOTA: o restyling cardless por componente (cantos retos, hairlines, header, feed, etc.) será aplicado nas fases seguintes COM verificação visual, para não alterar layout que não consigo ver agora. */ ::selection { background:var(--accent); color:#fff; } /* ========================================================================= FASE 2 — HEADER (editorial/cardless). Restyle do header existente para os valores exatos do design, preservando os hooks funcionais (pesquisa, dropdowns de notificações/mensagens, menu de utilizador). ========================================================================= */ /* Barra do topo: sticky 62px, fundo, hairline em baixo, sem sombra, cantos retos. Fica 3px abaixo para dar lugar à barra de acento (body::before). */ .navbar.navbar-default.navbar-fixed-top { top:3px; background:var(--bg); border:0; box-shadow:none; } .navbar-default .header-fixed1000 { background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; min-height:62px; } .navbar-default .header-fixed1000 .container-fluid { max-width:1600px; margin:0 auto; display:flex; align-items:center; height:62px; gap:12px; padding:0 18px; } /* O bloco do logo encolhe ao conteúdo (não cresce), senão empurra a pesquisa para a direita */ .navbar-default .wow_hdr_innr_left { flex:0 0 auto; display:flex; align-items:center; float:none; margin:0; padding:0; } /* Wordmark "bexopro" */ .bexo-wordmark { font-family:var(--ff-display); font-weight:800; font-size:23px; letter-spacing:-.045em; color:var(--text); text-decoration:none; line-height:1; padding:0; display:flex; align-items:baseline; } .bexo-wordmark span { color:var(--accent); } .bexo-wordmark:hover { color:var(--text); text-decoration:none; } /* Pesquisa central: campo cardless (bg-2 + 1px line, 38px, cantos retos) */ .navbar-default #wo_home_search { flex:1; display:flex; justify-content:center; margin:0; float:none; } .navbar-default #wo_home_search .search-container { width:min(460px,100%); } .navbar-default #wo_home_search .navbar-form { margin:0; padding:0; border:0; box-shadow:none; width:100%; } .navbar-default #wo_home_search .inner-addon { background:var(--bg-2); border:1px solid var(--line); height:38px; display:flex; align-items:center; gap:10px; padding:0 14px; border-radius:0; } /* ícone de pesquisa à ESQUERDA (como no mockup), 16px, faint */ .navbar-default #wo_home_search .glyphicon { position:static; order:-1; flex-shrink:0; width:16px; height:16px; margin:0; top:auto; left:auto; } .navbar-default #wo_home_search .search-input { background:transparent; border:0; box-shadow:none; height:36px; padding:0; flex:1; font-family:var(--ff-ui); font-size:13px; color:var(--text); border-radius:0; } .navbar-default #wo_home_search .search-input::placeholder { color:var(--faint); } .navbar-default #wo_home_search .glyphicon circle, .navbar-default #wo_home_search .glyphicon path { stroke:var(--faint); } /* sem caret/seta a seguir ao avatar (o mockup não tem) */ #head_menu_rght .user-menu-combination .caret, #head_menu_rght .dropdown-toggle .caret, #head_menu_rght .user-menu-combination::after, #head_menu_rght .user-menu-combination svg.caret { display:none !important; } #head_menu_rght .dropdown > a.user-menu-combination { gap:0; } /* Controlos da direita: icon-only, sem fundo/borda, muted->text no hover */ #head_menu_rght { display:flex; align-items:center; gap:2px; float:none; } #head_menu_rght > li { float:none; } #head_menu_rght > li > a { color:var(--muted); padding:9px; background:none; border:0; display:flex; align-items:center; } #head_menu_rght > li > a:hover, #head_menu_rght > li > a:focus { color:var(--text); background:none; } #head_menu_rght .icon_main { stroke:currentColor; } #head_menu_rght .icon_main_fill { fill:currentColor; } /* badge de contagem com cor de acento */ #head_menu_rght .new-update-alert { background:var(--accent); color:var(--on-accent); border:2px solid var(--bg); border-radius:50%; } /* avatar do utilizador no header */ #head_menu_rght .user-avatar img { width:34px; height:34px; border-radius:50%; object-fit:cover; } #head_menu_rght .user-menu-combination b { display:none; } /* Dropdowns como popovers do design: fundo, borda line-2, sombra, cantos retos */ .navbar-default .dropdown-menu { background:var(--bg); border:1px solid var(--line-2); border-radius:0; box-shadow:var(--shadow-pop); color:var(--text); } .navbar-default .dropdown-menu a, .navbar-default .dropdown-menu li > a { color:var(--text); } .navbar-default .dropdown-menu a:hover { background:var(--bg-2); } /* compensar a barra fixa (3px acento + 62px header) no corpo */ body { padding-top:0; } /* ---- Controlos novos do header: paleta / idioma / tema ---- */ .bexo-ctl > a { color:var(--muted); padding:9px; display:flex; align-items:center; } .bexo-ctl > a:hover { color:var(--text); background:none; } .bexo-palette .bexo-accent-dot { display:inline-block; width:17px; height:17px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px var(--accent); } .bexo-theme > a:hover { color:var(--accent); } /* troca sol/lua conforme o tema */ html:not([data-theme="dark"]) .bexo-icn-sun { display:none; } html[data-theme="dark"] .bexo-icn-moon { display:none; } /* popovers (paleta / idioma) — cantos retos, borda, sombra */ .bexo-pop { min-width:200px; padding:6px 0; } .bexo-pop-palette { min-width:210px; } .bexo-pop-title { padding:11px 14px 7px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-family:var(--ff-ui); } .bexo-pop > li > a { display:flex; align-items:center; gap:11px; padding:10px 14px; cursor:pointer; color:var(--text); font-size:13.5px; font-weight:600; } .bexo-pop > li > a:hover { background:var(--bg-2); } .bexo-pop .bexo-swatch { width:18px; height:18px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.08) inset; } .bexo-pop .bexo-pop-label { flex:1; } .bexo-pop .bexo-lang-code { font-family:var(--ff-mono); font-size:11px; color:var(--faint); } /* ---- Dropdown de idiomas: pesquisável + 3 colunas (são muitos idiomas) ---- */ .bexo-pop-lang { min-width:460px; max-width:460px; padding:0; right:0; left:auto; } .bexo-lang-search-wrap { position:sticky; top:0; z-index:2; padding:12px; background:var(--bg); border-bottom:1px solid var(--line); } .bexo-lang-search { width:100%; height:36px; background:var(--bg-2); border:1px solid var(--line); border-radius:0; padding:0 12px; font-family:var(--ff-ui); font-size:13px; color:var(--text); outline:none; } .bexo-lang-search:focus { border-color:var(--line-2); } .bexo-lang-search::placeholder { color:var(--faint); } .bexo-lang-grid-wrap { padding:8px; max-height:320px; overflow:auto; } .bexo-lang-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; } .bexo-lang-item { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; font-family:var(--ff-ui); font-size:12.5px; font-weight:600; line-height:1.3; color:var(--text); text-decoration:none; text-transform:capitalize; cursor:pointer; } .bexo-lang-item > span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .bexo-lang-item:hover { background:var(--bg-2); color:var(--text); } .bexo-lang-item.active { color:var(--accent) !important; font-weight:700; background:var(--accent-weak); } .bexo-lang-item .bexo-lang-check { color:var(--accent); flex-shrink:0; } .bexo-lang-item.bexo-hide { display:none; } .bexo-lang-empty { padding:18px 12px; text-align:center; font-family:var(--ff-ui); font-size:13px; color:var(--faint); } /* ---- Limpar o header para a estrutura exata do design ---- Nav central (home/explore/criar...) move-se para a coluna esquerda (Fase 3); toggle de pesquisa escondido (campo de pesquisa está sempre visível). */ .navbar-default .wow_hdr_innr_left .nav.navbar-nav { display:none; } .navbar-default #head_menu_rght .wow_new_search_bbtn { display:none; } /* Pedidos de seguidor não fazem parte do header do design -> esconder */ .navbar-default #head_menu_rght .requests-container { display:none !important; } /* Ordem exata do design: mensagens, paleta, idioma, tema, notificações, avatar. (#head_menu_rght é flex; reordenamos por 'order' sem mexer no markup/JS) */ #head_menu_rght .messages-notification-container { order:1; } #head_menu_rght .bexo-palette { order:2; } #head_menu_rght .bexo-lang { order:3; } #head_menu_rght .bexo-theme { order:4; } #head_menu_rght .notification-container { order:5; } #head_menu_rght > li.dropdown:has(.user-menu-combination) { order:6; } /* ========================================================================= FASE 3 — SHELL da página (tokenização global: fundo + superfícies cardless). Faz toda a página adotar os tokens (dark mode + look editorial aplicam-se globalmente). Cantos retos em contentores; avatares/imagens redondas mantêm-se. ========================================================================= */ html, body { background:var(--bg) !important; color:var(--text); } body { padding-top:65px; } /* Superfícies de conteúdo -> cardless (fundo token, hairline 1px, sem sombra, cantos retos) */ .panel, .panel-default, .panel-body, .well, .card, .widget, .list-group, .list-group-item, .user-profile, .wo-side-link, .wow_side_prods_prnt, .wow_side_usrs, .main-section-data, .js_added-post, .post-wrapper, .wo_review_box, .sidebar-title-back, .stories-card, .create-post-box, .post-form, .user-data-mini, .profile-details, .colorbox, .panel-heading { background:var(--bg) !important; border-color:var(--line) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text); } /* texto secundário */ .gray, .text-muted, .muted, .time, .post-time { color:var(--muted) !important; } /* manter redondo o que é redondo */ .user-avatar img, .wo_user_avatar img, img.user_avatar, .avatar, .avatar img, .profile-picture img, [class*="avatar"] img { border-radius:50% !important; } /* botões primários -> acento */ .btn-main, .btn-primary { background:var(--accent) !important; border-color:var(--accent) !important; color:var(--on-accent) !important; border-radius:0 !important; } .btn-main:hover, .btn-primary:hover { background:var(--accent-2) !important; border-color:var(--accent-2) !important; } /* inputs cardless */ .form-control, input[type=text], textarea { border-radius:0 !important; background:var(--bg-2); border-color:var(--line); color:var(--text); } /* links */ a { color:inherit; } a.wo_user_link_name, .post-username a { color:var(--text); } /* ---- Fase 3 (iter.2): classes exatas dos cartões (via inspeção do DOM) ---- */ .wow_content, .left-sidebar, .wo_new_left_side, .panel.post, .sun_pub_box, .panel-shadow, .list-group, .list-group-item, .list-group.trending, .list-group.filterby, .card.hovercard, .card.promoted, .alert.wow_content, .greetalert, .wow_side_loggd_usr, .wow_home_stories, .user-status-home { background:var(--bg) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text); border-color:var(--line) !important; } /* dropdowns do header: cantos retos + fundo token (reforço com !important) */ .navbar-default .dropdown-menu, #head_menu_rght .dropdown-menu, .bexo-pop { background:var(--bg) !important; border:1px solid var(--line-2) !important; border-radius:0 !important; box-shadow:var(--shadow-pop) !important; } /* itens de lista / títulos de secção -> hairline em baixo, texto token */ .list-group-item { border-color:var(--line) !important; color:var(--text); } .sidebar-title-back, .list-group-item.sidebar-title-back { background:var(--bg-2) !important; color:var(--muted) !important; } /* nav esquerda: itens */ .wo_new_left_side a, .left-sidebar a, .menu_list { color:var(--text); } /* Todos os dropdowns como popovers do design (cobre post_order_feed, etc.) */ .dropdown-menu { background:var(--bg) !important; border:1px solid var(--line-2) !important; border-radius:0 !important; box-shadow:var(--shadow-pop) !important; color:var(--text); } .dropdown-menu > li > a, .dropdown-menu a { color:var(--text); } .dropdown-menu > li > a:hover { background:var(--bg-2) !important; } /* ========================================================================= FASE 4 — Feed cardless (regra definidora do design): conteúdo separado por hairlines, sem cartões/sombras/cantos. Composer e tabs editoriais. ========================================================================= */ /* Posts e cartões de conteúdo -> sem cartão, só hairline em baixo */ .wow_content, .panel.post, .sun_pub_box, .list-group.trending, .list-group.filterby { border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; } /* corpo do post: medida de leitura + tipografia do design */ .post-description, .post-text, .wo_post_text, .js_readmore, .post-body { font-family:var(--ff-ui); font-size:14.5px; line-height:1.62; color:var(--text); max-width:none; } /* meta/tempo em mono (estilo editorial) */ .time, .post-time, .user-post-time, .feed-time, .text-muted .time { font-family:var(--ff-mono); font-size:11.5px; color:var(--muted); } /* botão de like ativo -> cor de acento */ .how_reacted.like-btn-like.active, .liked .like-btn-like, .is-liked { color:var(--accent) !important; } .how_reacted svg [fill]:not([fill="none"]) { } /* compositor: campo inset alto (46px) cardless */ .sun_pub_box .publisher-content, .sun_pub_box textarea, .create-text { background:var(--bg-2); border:1px solid var(--line); border-radius:0; color:var(--text); } /* ========================================================================= FASE 4b — NAV RAIL esquerda (design: itens icon+label, ativo = acento + accent-weak + spine de 3px à esquerda; ícones monocromáticos line). ========================================================================= */ /* nav esquerda flush como no mockup: SEM border-right (a única linha-spine é a da coluna central). Tinha border-right -> parecia uma "barra" delimitada. */ .wo_new_left_side { background:var(--bg) !important; border:0 !important; border-right:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; } .wo_new_left_side .side_brand { display:none; } /* wordmark está no header */ /* sem padding próprio: o inset de 24px vem da .leftcol (como o aside do mockup), itens flush à esquerda; alinha com o ícone a 36px da borda da coluna */ .wo_new_left_side ul { padding:0 !important; margin:0 !important; } .wo_new_left_side ul li { list-style:none; } .wo_new_left_side ul li a { position:relative; display:flex; align-items:center; gap:12px; padding:7px 12px; color:var(--muted); font-family:var(--ff-ui); font-weight:600; font-size:14px; border-radius:0; text-decoration:none; } .wo_new_left_side ul li a:hover { background:var(--bg-2); color:var(--text); } /* ícones: usar o SVG line monocromático (currentColor); esconder o png colorido */ .wo_new_left_side ul li a img { display:none; } /* IMPORTANTE: o tema base (style.css) põe padding:5px + border-radius:6px + width:30px no svg (.left-sidebar > ul > li > a > svg) e com box-sizing:border-box isso comia 10px da caixa -> o glyph ficava esmagado (~9px). Anular tudo e usar o valor do mockup. */ .wo_new_left_side ul li a svg { box-sizing:content-box !important; width:20px !important; height:20px !important; padding:0 !important; margin:0 !important; border-radius:0 !important; background:none !important; vertical-align:middle; flex-shrink:0; } .wo_new_left_side ul li a svg .icon_main { stroke:currentColor; } .wo_new_left_side ul li a svg .icon_main_fill { fill:currentColor; } /* item ATIVO: acento + accent-weak + spine de 3px */ .wo_new_left_side ul li a.bexo-active { color:var(--accent); background:var(--accent-weak); font-weight:700; } .wo_new_left_side ul li a.bexo-active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--accent); } /* Ícone de opções do News Feed (ordenar: All / People I Follow) — à direita do item */ .wo_new_left_side .wow_side_post_fltr { position:relative; } .wo_new_left_side .order_by { position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:5; } .wo_new_left_side .order_by > .dropdown-toggle { cursor:pointer; display:flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--muted); } .wo_new_left_side .order_by > .dropdown-toggle:hover { color:var(--accent); } .wo_new_left_side .wow_side_post_fltr > a { padding-right:34px !important; } .wo_new_left_side .order_by .post_order_feed { min-width:230px; } /* Menu limitado a 10 itens + "mostrar mais/menos" */ .wo_new_left_side ul li.bexo-nav-extra { display:none; } .wo_new_left_side.bexo-nav-expanded ul li.bexo-nav-extra { display:block; } .wo_new_left_side .bexo-nav-toggle > a { color:var(--accent) !important; font-weight:700 !important; } .wo_new_left_side .bexo-nav-toggle > a:hover { background:var(--bg-2) !important; color:var(--accent) !important; } .wo_new_left_side .bexo-nav-toggle .bexo-chev { transition:transform .2s ease; flex-shrink:0; } .wo_new_left_side .bexo-nav-toggle.is-open .bexo-chev { transform:rotate(180deg); } /* scroll com rato quando expandido; nunca tapa o rodapé */ .leftcol .wo_new_left_side > ul { overscroll-behavior:contain; scrollbar-width:thin; } /* quando o menu de opções do News Feed (ou outro dropdown) está aberto, a lista deixa de cortar (overflow visível + sem max-height) para o popup aparecer completo */ .wo_new_left_side > ul:has(.dropdown.open), .page-margin .row:has(> .middlecol) > .leftcol .wo_new_left_side > ul:has(.dropdown.open) { overflow:visible !important; max-height:none !important; } .wo_new_left_side .order_by .post_order_feed { z-index:1200; } /* Rodapé da coluna esquerda: encostado ao fundo, lettering pequeno, sem sobrepor */ .bexo-left-footer { flex-shrink:0; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--ff-ui); font-size:10px; line-height:1.5; color:var(--faint); letter-spacing:.01em; text-align:center; } .bexo-left-footer .bexo-foot-tagline { display:block; } .bexo-left-footer .bexo-foot-copy { display:block; margin-top:1px; } /* Spine da coluna central (feed): hairlines esquerda/direita (elemento definidor) */ .middlecol { border-left:1px solid var(--line); border-right:1px solid var(--line); min-height:calc(100vh - 65px); } /* ========================================================================= FASE 5 — PERFIL (design: screen=profile). Banda de capa clamp(150px,26vw,220px), avatar 96px circular sobrepondo -44px com borda 4px var(--bg), nome em display 25px + badge verificado, meta mono (role · local), botões Editar(outline)/ Publicar(acento), stats inline, separadores por hairline. Cardless: sem cartão. ========================================================================= */ /* contentor do perfil: sem cartão/sombra/cantos */ .wo_user_profile .profile-container .card.hovercard, .wo_user_profile .card.hovercard { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; margin-bottom:0 !important; } /* banda de capa: o bloco avatar+nome+ações fica SOBREPOSTO no fundo da capa (poupa espaço) */ .wo_user_profile .profile-container .card.hovercard, .wo_user_profile .card.hovercard { position:relative; } .wo_user_profile .cardheader.user-cover { height:clamp(190px,28vw,260px) !important; min-height:0 !important; border-radius:0 !important; overflow:hidden; background:var(--bg-2); border-bottom:0; } .wo_user_profile .cardheader.user-cover #cover-image, .wo_user_profile .user-cover-reposition-w img { width:100%; height:100%; object-fit:cover; border-radius:0; } .wo_user_profile .user-cover-reposition-container, .wo_user_profile .user-cover-reposition-w { height:100%; } /* scrim: gradiente escuro no fundo da capa para o texto branco ser legível */ .wo_user_profile .cardheader.user-cover::after { content:''; position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(to bottom, rgba(20,15,11,0) 0%, rgba(20,15,11,.74) 100%); pointer-events:none; z-index:1; } /* bloco avatar+info+ações: SOBREPOSTO no fundo da capa, numa só linha */ .wo_user_profile .pic-info-cont { position:absolute !important; left:0; right:0; bottom:0; z-index:3; margin:0 !important; display:flex; align-items:flex-end; flex-wrap:nowrap; gap:16px; padding:0 26px 8px; border:0 !important; } .container .wo_user_profile .pic-info-cont .user-avatar, .wo_user_profile .pic-info-cont .user-avatar { width:90px !important; height:90px !important; flex-shrink:0; position:relative; z-index:2; margin:0 !important; top:0 !important; } .wo_user_profile .pic-info-cont .user-avatar > img { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.92); background:var(--bg-2); box-shadow:0 2px 12px rgba(0,0,0,.3); } /* info: nome e @username a branco sobre o scrim */ .wo_user_profile .pic-info-cont .info { flex:1 1 auto; min-width:0; padding:0; } .wo_user_profile .pic-info-cont .info .title { position:static !important; left:auto !important; width:auto !important; display:flex; align-items:center; gap:7px; line-height:1.15; } .wo_user_profile .pic-info-cont .info .title a { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; font-family:var(--ff-display); font-weight:700; font-size:24px; letter-spacing:-.02em; color:#fff !important; text-shadow:0 1px 5px rgba(0,0,0,.5); } .wo_user_profile .pic-info-cont .info .title .verified-color { fill:#fff; } .wo_user_profile .pic-info-cont .info p { font-family:var(--ff-mono); font-size:12.5px; color:rgba(255,255,255,.85); margin:3px 0 0; text-shadow:0 1px 4px rgba(0,0,0,.45); } .wo_user_profile .problackback { display:none !important; } /* ações: numa só linha à direita, sobre a capa (vidro translúcido); Follow em acento */ .wo_user_profile .options-buttons, .container .wo_user_profile .card.hovercard .options-buttons { position:relative !important; margin:0 0 0 auto !important; z-index:auto; display:flex; gap:8px; align-items:center; padding-bottom:0; flex-wrap:nowrap; justify-content:flex-end; flex-shrink:0; } .wo_user_profile .options-buttons .btn, .wo_user_profile .options-buttons .btn-default, .wo_user_profile .options-buttons .btn-glossy > a, .wo_user_profile .options-buttons .btn-glossy > button, .wo_user_profile .options-buttons .dropdown-toggle { border-radius:0 !important; border:1px solid rgba(255,255,255,.45) !important; background:rgba(20,15,11,.42) !important; color:#fff !important; font-weight:700; font-size:13px; padding:9px 16px; box-shadow:none; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } .wo_user_profile .options-buttons .btn svg, .wo_user_profile .options-buttons .btn-default svg, .wo_user_profile .options-buttons .dropdown-toggle svg, .wo_user_profile .options-buttons svg .icon_main { color:#fff !important; stroke:#fff !important; } .wo_user_profile .options-buttons .btn:hover, .wo_user_profile .options-buttons .dropdown-toggle:hover { background:rgba(20,15,11,.62) !important; } .wo_user_profile .options-buttons .user-follow-button .btn, .wo_user_profile .options-buttons .btn-main, .wo_user_profile .options-buttons .followbtn, .wo_user_profile .options-buttons .btn-follow { background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important; } .wo_user_profile .options-buttons .user-follow-button .btn:hover, .wo_user_profile .options-buttons .btn-main:hover { background:var(--accent-2) !important; } /* stats inline (mono nos números) + cartão lateral de info cardless */ .wo_user_profile .flex_stats { display:flex; gap:26px; flex-wrap:wrap; padding:0; margin:0; } .wo_user_profile .flex_stats .list-group-item { background:transparent; border:0; padding:0; display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); } .wo_user_profile .flex_stats .badge { font-family:var(--ff-mono); font-weight:600; background:transparent; color:var(--text); padding:0; font-size:13px; } .wo_user_profile .right_user_info { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } .wo_user_profile .right_user_info .list-group-item { background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text); } /* barra de tabs do perfil (Timeline/Groups/Likes/...): hairline em baixo, item ativo com sublinhado de acento (2.5px), restantes em muted. Cardless. */ .wo_user_profile .user-bottom-nav { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; padding:0 14px; } .wo_user_profile .user-bottom-nav ul { display:flex; flex-wrap:wrap; padding:0; margin:0; } .wo_user_profile .user-bottom-nav ul li { list-style:none; } .wo_user_profile .user-bottom-nav ul li a { display:flex; align-items:center; gap:8px; padding:15px 12px; margin:0 2px -1px; font-family:var(--ff-ui); font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2.5px solid transparent; border-radius:0; text-decoration:none; } .wo_user_profile .user-bottom-nav ul li a:hover { color:var(--text); background:transparent; } .wo_user_profile .user-bottom-nav ul li a svg { width:18px; height:18px; } .wo_user_profile .user-bottom-nav ul li a svg .icon_main { stroke:currentColor; } .wo_user_profile .user-bottom-nav ul li.active a, .wo_user_profile .user-bottom-nav ul li a.active { color:var(--accent); font-weight:700; border-bottom-color:var(--accent); } /* barra de "Profile Completion" (só dono): cardless, chips com hairline, feito=acento */ .profile-completion-bar { background:var(--bg) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; } .profile-completion-bar h3 { font-family:var(--ff-display); font-weight:700; color:var(--text); } .profile-completion-bar .step, .profile-completion-bar a.step { background:var(--bg-2); border:1px solid var(--line); border-radius:0; color:var(--text); font-family:var(--ff-ui); font-size:12.5px; } .profile-completion-bar a.step:hover { background:var(--bg-3); border-color:var(--line-2); } .profile-completion-bar .step.done { color:var(--muted); } /* ========================================================================= FASE 6 — MENSAGENS (design: screen=messages). Duas colunas: lista (esquerda, clamp 240-340px, hairline à direita) + thread (direita) com cabeçalho, balões e compositor. Cardless: sem cartões/cantos. Balão próprio=acento, recebido= bg-2 com hairline. Compositor: input quadrado + botão enviar quadrado acento. ========================================================================= */ /* wrapper das duas colunas */ .wo_kb_msg_page .msg_under_hood { display:flex; gap:0; background:var(--bg); } .wo_kb_msg_page #wo_msg_left_prt { width:clamp(240px,34%,340px); flex-shrink:0; border-right:1px solid var(--line); background:var(--bg); } /* tabs Users/Groups -> texto com sublinhado de acento (sem pílulas) */ .wo_msg_tabs { display:flex; border-bottom:1px solid var(--line); padding:0 10px; background:var(--bg); } .wo_msg_tabs li { list-style:none; } .wo_msg_tabs li a { display:flex; align-items:center; gap:8px; padding:14px 12px; margin-bottom:-1px; background:transparent !important; border:0 !important; border-bottom:2.5px solid transparent !important; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:13.5px; border-radius:0 !important; } .wo_msg_tabs li.active a, .wo_msg_tabs li a.active { color:var(--accent) !important; font-weight:700; border-bottom-color:var(--accent) !important; } .wo_msg_tabs li a svg { width:17px; height:17px; } /* caixa de pesquisa + botões: cardless, cantos retos */ .messages-search-icon { padding:12px 14px; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; } .messages-search-icon .msg_srch_innr { flex:1; display:flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:0; padding:0 12px; } .messages-search-icon .msg_srch_innr input { background:transparent; border:0; box-shadow:none; color:var(--text); height:40px; } .messages-search-icon .msg_srch_innr svg { stroke:var(--muted); width:18px; height:18px; } .messages-search-icon .btn_contr { display:flex; gap:6px; } .messages-search-icon .btn_contr .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; height:40px; } .messages-search-icon .btn_contr .btn-main:hover { background:var(--accent-2) !important; } /* lista de conversas: cardless */ .tab-content.messages-users-list { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } .messages-recipients-list, .messages-group-list .messages-recipients-list { border-bottom:1px solid var(--line); border-radius:0; padding:12px 16px; background:var(--bg); } .messages-recipients-list:hover { background:var(--bg-2); } .messages-recipients-list.active { background:var(--accent-weak); } .messages-recipients-list .avatar img { border-radius:50%; width:44px; height:44px; object-fit:cover; } .messages-recipients-list .messages-user-name { font-family:var(--ff-ui); font-weight:700; font-size:13.5px; color:var(--text); } .messages-recipients-list .user_nname { display:none; } .messages-recipients-list .messages-last-sent { font-family:var(--ff-mono); font-size:10.5px; color:var(--faint); } .messages-recipients-list p { font-size:12.5px; color:var(--muted); margin:2px 0 0; } .messages-recipients-list p.new_msg_active_list { color:var(--text); font-weight:600; } .messages-recipients-list .new-message-alert { background:var(--accent); } .messages-recipients-list .online_dot .dot { background:var(--accent); } /* coluna da direita (thread) */ .wo_kb_msg_page #wo_msg_right_prt { flex:1; min-width:0; background:var(--bg); } .wo_kb_msg_page .text-sender-container { background:var(--bg) !important; border:0 !important; } /* cabeçalho do thread: hairline em baixo */ .msg_usr_info_top_list { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; padding:14px 22px !important; } .msg_usr_info_top_list #user-name { font-family:var(--ff-ui); font-weight:700; font-size:14.5px; color:var(--text); } .msg_usr_info_top_list .msg_usr_cht_usr_data img { border-radius:50%; } /* área dos balões */ .messagejoint { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } .messagejoint .messages-container { background:var(--bg); padding:22px; } /* balões: recebido = bg-2 + hairline; enviado = acento. Override do inline color. */ .message-contnaier .message { border-radius:0 !important; font-size:13.5px; line-height:1.5; padding:10px 14px; } .message-contnaier.incoming .message, .message-contnaier.incoming .message .message-text { background:var(--bg-2) !important; border:1px solid var(--line); color:var(--text) !important; } .message-contnaier.outgoing .message, .message-contnaier.outgoing .message .message-text { background:var(--accent) !important; color:var(--on-accent) !important; border:0; } .message-contnaier .message .message-text { border-radius:0 !important; } .message-contnaier .message-user-image img { border-radius:50%; width:32px; height:32px; object-fit:cover; } .message-contnaier time { font-family:var(--ff-mono); font-size:9.5px; color:var(--faint); } /* compositor: input quadrado bg-2, botão enviar quadrado acento */ .sendMessages .input-group { background:var(--bg) !important; border-top:1px solid var(--line); border-radius:0 !important; padding:12px 18px; display:flex; align-items:flex-end; gap:12px; } .sendMessages .msg_write_combo { flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:0; } .sendMessages textarea#sendMessage { background:transparent; border:0; box-shadow:none; color:var(--text); } #wo_msg_right_prt .text-sender-container .sendMessages .send-button, .sendMessages .send-button, .sendMessages .btn-main.send-button { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; width:42px !important; height:42px !important; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .sendMessages .send-button:hover { background:var(--accent-2) !important; } .sendMessages .send-button svg { stroke:var(--on-accent); } /* painel de detalhe à direita (ícones vídeo/áudio): cardless */ .wo_msg_user_dtl { background:var(--bg) !important; border-left:1px solid var(--line) !important; border-radius:0 !important; } /* ========================================================================= FASE 7 — GRUPO (design: screen=group). Banda de capa clamp(140px,24vw,200px), glifo QUADRADO 80px (não redondo) sobrepondo -40px, nome display 23px, meta mono (privado · membros), botão Aderir (acento) + overflow. Converte o painel lateral sobreposto do tema (desktop) num cabeçalho editorial abaixo da capa. ========================================================================= */ .wo_group_profile .profile-container .card.hovercard, .wo_group_profile .card.hovercard { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; margin-bottom:0 !important; } .wo_group_profile .cardheader.user-cover { height:clamp(140px,24vw,200px) !important; min-height:0 !important; border-radius:0 !important; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line); } .wo_group_profile .cardheader.user-cover #cover-image { width:100%; height:100% !important; object-fit:cover; border-radius:0; } /* painel lateral -> cabeçalho editorial relativo, abaixo da capa */ .container .wo_group_profile .side_panel, .wo_group_profile .side_panel { position:relative !important; width:100% !important; height:auto !important; top:auto !important; left:auto !important; background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; display:flex !important; align-items:flex-end; justify-content:flex-start; gap:16px; padding:0 26px 18px; margin-top:-40px; overflow:visible; } .container .wo_group_profile .side_panel .box-inner { display:none !important; } /* glifo do grupo: QUADRADO 80px (cantos retos), borda da cor do fundo */ .container .wo_group_profile .side_panel .user-avatar { position:relative !important; width:80px !important; height:80px !important; margin:0 !important; flex-shrink:0; z-index:2; } .container .wo_group_profile .side_panel .user-avatar img { width:80px; height:80px; border-radius:0 !important; object-fit:cover; border:4px solid var(--bg); background:var(--accent); box-shadow:none !important; } /* info: nome display + meta mono, alinhado à esquerda */ .container .wo_group_profile .side_panel .info { flex:1; min-width:180px; text-align:left !important; color:var(--text) !important; padding-bottom:2px; } .wo_group_profile .profile-container .card.hovercard .info .title a, .container .wo_group_profile .side_panel .info .title { font-family:var(--ff-display); font-weight:700; font-size:23px !important; letter-spacing:-.02em; color:var(--text) !important; text-shadow:none !important; text-align:left !important; line-height:1.2; max-height:none; overflow:visible; } .container .wo_group_profile .side_panel .info > span { font-family:var(--ff-mono); font-size:12px; color:var(--muted); margin-top:3px !important; display:block; } /* botões: Aderir = acento, restantes outline; cantos retos (beats btn-glossy 2em) */ .wo_group_profile .side_panel .options-buttons { position:relative !important; margin:0 !important; right:auto !important; text-align:left !important; display:flex; gap:8px; align-items:flex-end; padding-bottom:2px; } .wo_group_profile .btn-glossy > a, .wo_group_profile .btn-glossy > button, .wo_group_profile .btn-glossy > span > button, .wo_group_profile .options-buttons a, .wo_group_profile .options-buttons button { border-radius:0 !important; border:1px solid var(--line-2) !important; background:var(--bg) !important; color:var(--text) !important; box-shadow:none !important; font-weight:700; font-size:13px; } .wo_group_profile .group-join-btn .btn, .wo_group_profile .group-join-btn .btn-main, .wo_group_profile .options-buttons .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important; } .wo_group_profile .group-join-btn .btn:hover, .wo_group_profile .options-buttons .btn-main:hover { background:var(--accent-2) !important; } /* ========================================================================= FASE 8 — MARKETPLACE (design: screen=market). Cabeçalho com título display + botão Vender (acento); chips de categoria (Tudo=acento, resto outline); grelha de produtos com hairlines (gap 1px sobre var(--line)); cartão de produto com imagem 150px + chip de categoria mono, preço mono/acento, título, vendedor. ========================================================================= */ /* cabeçalho cardless */ .popular_posts_hdr { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; } .popular_posts_hdr .bg_trail { display:none; } .popular_posts_hdr h2, .popular_posts_hdr h2 p { font-family:var(--ff-display); font-weight:700; letter-spacing:-.02em; color:var(--text); font-size:22px; } .popular_posts_hdr h2 b { display:block; font-family:var(--ff-ui); font-weight:600; font-size:12.5px; color:var(--muted); } /* barra de separadores/categorias: cardless, hairline; item ativo = acento */ .wow_big_head_link { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; } .wow_big_head_link > ul.list-unstyled { display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0; } .wow_big_head_link > ul.list-unstyled li { list-style:none; } .wow_big_head_link > ul.list-unstyled li a { display:inline-flex; padding:7px 15px; border:1px solid var(--line-2); border-radius:0; background:transparent !important; font-family:var(--ff-ui); font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; } .wow_big_head_link > ul.list-unstyled li a:hover { color:var(--text); background:var(--bg-2); } .wow_big_head_link > ul.list-unstyled li.active a { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; } /* ---- Tiles "Criar" + cards das listagens (Grupos/Páginas/Eventos/Álbuns) — editorial ---- */ /* tile "Criar" (link): cardless tracejado a acento, cantos retos, preenche no hover. GLOBAL — todas as variantes e contextos: .album (grupos/álbuns), .page, .blog, .eventz, .fund */ a.btn_create_big { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; min-height:190px; height:100%; margin:0 !important; background:var(--accent-weak) !important; color:var(--accent) !important; border:1px dashed var(--accent) !important; border-radius:0 !important; box-shadow:none !important; font-family:var(--ff-ui) !important; font-weight:700 !important; font-size:14px !important; text-decoration:none; transition:background .15s, color .15s; } a.btn_create_big:hover { background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important; } a.btn_create_big svg { width:30px; height:30px; } /* estado vazio (div .wow_content, não link): neutro — qualquer variante/contexto */ .wow_content.btn_create_big { min-height:190px; display:flex; align-items:center; justify-content:center; padding:18px; background:var(--bg-2) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; } /* estado vazio: aplica a qualquer variante (com ou sem classe .empty — ex. albums usa .real_album) */ .cool-style-album .empty_state { display:flex; flex-direction:column; align-items:center; gap:10px; } /* === ESTADOS-VAZIOS (global) — o tema base dá background:#f6f6f6 + padding aos ícones, o que renderiza como "quadrado" cinzento. Editorial: ícone de contorno faint, sem caixa. === */ .empty_state { color:var(--muted) !important; font-family:var(--ff-ui) !important; } .empty_state svg { background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; width:30px !important; height:30px !important; color:var(--faint) !important; } .empty_state svg path { fill:none !important; stroke:var(--faint) !important; } /* cartões de evento (browse): conter a imagem de capa para não transbordar a coluna (overflow-x) */ .events-list-wrapper .event_cover { display:block; max-width:100%; overflow:hidden; } .events-list-wrapper .events-list-cover-img { max-width:100% !important; height:auto; display:block; } .wo_events_row_main { margin-left:0 !important; margin-right:0 !important; } .events-list-wrapper { max-width:100%; } .events-list-wrapper .event-l-info, .events-list-wrapper .events-list-name { max-width:100%; min-width:0; } .events-list-wrapper .events-list-name a { display:block; white-space:normal !important; overflow-wrap:break-word; word-break:break-word; } /* card de grupo/página: cardless + hairline, avatar redondo, nome display, meta mono */ .cool-style-album .album_parent { background:var(--bg) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; padding:22px 18px; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; transition:border-color .15s; } .cool-style-album .album_parent:hover { border-color:var(--line-2) !important; } .cool-style-album .album_parent .avatar img { width:64px; height:64px; border-radius:50% !important; object-fit:cover; } .cool-style-album .album_parent .album-name a { text-decoration:none; } .cool-style-album .album_parent .album-name h4 { font-family:var(--ff-display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--text); margin:0; } .cool-style-album .album_parent .album-name p { font-family:var(--ff-mono); font-size:11.5px; color:var(--muted); margin:4px 0 0; } /* pesquisa de produtos: input quadrado bg-2 */ .wow_big_head_link .search-blog input, #product-text { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; color:var(--text); height:38px; } .wow_big_head_link .market_widget > .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; } /* grelha de produtos: hairlines (gap 1px sobre linha) */ #products.row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--line); margin:0; } #products.row .product { width:auto !important; max-width:none !important; float:none !important; padding:0 !important; margin:0 !important; } /* cartão de produto: cardless, cantos retos */ .product_info.wow_main_mkt_prod { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:hidden; height:100%; } .product_info.wow_main_mkt_prod:hover { background:var(--bg-2) !important; } .wow_main_mkt_prod .product-image { border-radius:0 !important; } .wow_main_mkt_prod .product-image img { width:100%; height:150px; object-fit:cover; border-radius:0 !important; } /* chip de categoria sobre a imagem: mono */ .wow_main_mkt_prod .product-by, .wow_main_mkt_prod .product-by a { font-family:var(--ff-mono); font-size:10px; color:#fff; background:rgba(0,0,0,.35); border-radius:0; padding:3px 7px; } /* preço mono/acento, título, vendedor */ .wow_main_mkt_prod .produc_info { padding:13px; } .wow_main_mkt_prod .product-price { font-family:var(--ff-mono); font-weight:600; font-size:15px; color:var(--accent) !important; } .wow_main_mkt_prod .product-title a { font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--text); line-height:1.35; } /* botões do cartão: cantos retos; principal=acento, secundário=outline */ .wow_main_mkt_prod .wow_main_prod_foot .btn { border-radius:0 !important; box-shadow:none !important; font-weight:700; font-size:12.5px; } .wow_main_mkt_prod .wow_main_prod_foot .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; } .wow_main_mkt_prod .wow_main_prod_foot .btn-main:hover { background:var(--accent-2) !important; } .wow_main_mkt_prod .wow_main_prod_foot .btn-default { background:var(--bg) !important; border:1px solid var(--line-2) !important; color:var(--text) !important; } /* ========================================================================= FASE 9 (refeita) — WELCOME / LOGIN = EXATO ao design "BexoPRO Login.html". Split 2 painéis. ESQUERDA (fundo normal, NÃO accent-weak): wordmark + tag "REDE PROFISSIONAL", headline display 68px, subtítulo, stats mono (48k/1240/ 32), lista de papéis mono. DIREITA: controlos (idioma/tema), "Entrar" display, "Bem-vindo de volta.", toggle Entrar/Criar conta, Email, Palavra-passe + Esqueceu-se, botão Entrar acento, "ou", Google/Apple outline, criar conta, Termos·Privacidade. Sequência via flex order. Valores extraídos do design. ========================================================================= */ .wrapper .login { display:flex; flex-wrap:wrap; min-height:100vh; background:var(--bg); } /* o tema aplicava text-transform:capitalize a títulos do login — anular (design é sentence-case) */ .login .bexo-wl-h1, .login .bexo-wl-sub, .login .title, .login .bexo-welcome-back, .login .bexo-wl-tag, .login .bexo-seg a, .login .bexo-field label, .login .bexo-or { text-transform:none; } .login .bexo-wl-tag { text-transform:uppercase; } /* esconder o rodapé legado do welcome (design só tem Termos · Privacidade) */ .login .footer, .login .login_innre > .footer { display:none !important; } /* ---- PAINEL ESQUERDO ---- */ /* a página de login não tem navbar -> remover os 65px de padding-top do body */ body:has(.wrapper > .login) { padding-top:0 !important; } .login .login_left_combo_parent { flex:1 1 520px; background:var(--bg); border-right:1px solid var(--line); display:flex; align-items:stretch; overflow:hidden; position:relative; } /* marca de água: "b" gigante da marca, ténue, em baixo à direita (como no mockup) */ .login .login_left_combo_parent::after { content:"b"; position:absolute; right:7%; bottom:-12%; font-family:var(--ff-display); font-weight:800; font-size:clamp(320px,34vw,520px); line-height:.7; color:var(--accent-weak); z-index:0; pointer-events:none; user-select:none; } .login .login_left_combo { position:relative; z-index:1; } /* cabeçalho: largura total para o REDE PROFISSIONAL ir para a direita (space-between); anular o margin:60px do .logo do tema (alinhava o wordmark abaixo do tag + gap). */ .login .bexo-wl-head { width:100%; } .login .bexo-wl-head .logo, .login .bexo-wl-head .logo.bexo-wordmark { margin:0 !important; } /* margin:auto do tema centrava verticalmente (gap no topo) -> anular e encher de cima a baixo */ .login .login_left_combo { display:flex !important; flex-direction:column; width:100% !important; max-width:none !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:clamp(40px,5vw,72px) clamp(36px,5vw,80px); justify-content:flex-start; } .login .bexo-wl-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } .login .bexo-wl-head .logo.bexo-wordmark { font-size:30px; } .login .bexo-wl-tag { display:flex; align-items:center; gap:9px; font-family:var(--ff-ui); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .login .bexo-wl-tag i { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; } .login .bexo-wl-h1 { font-family:var(--ff-display); font-weight:700; font-size:clamp(38px,5.2vw,68px); line-height:1.02; letter-spacing:-.035em; color:var(--text); margin:clamp(36px,7vh,86px) 0 0; max-width:13ch; } .login .bexo-wl-sub { font-family:var(--ff-ui); font-weight:400; font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:var(--muted); margin:22px 0 0; max-width:40ch; } .login .bexo-wl-stats { display:flex; gap:clamp(26px,4vw,56px); margin-top:auto; padding-top:28px; border-top:1px solid var(--line); } .login .bexo-wl-stats .num { display:block; font-family:var(--ff-mono); font-weight:600; font-size:clamp(24px,2.2vw,30px); letter-spacing:-.02em; color:var(--text); } .login .bexo-wl-stats .lbl { display:block; font-family:var(--ff-ui); font-size:12.5px; color:var(--muted); margin-top:4px; } /* Stats abaixo do form/submit no login (pedido): order alto + margem fixa; esconder os do hero */ .login .bexo-login-stats { order:12; margin-top:26px !important; padding-top:22px; border-top:1px solid var(--line); } .login:has(.bexo-login-stats) .login_left_combo .bexo-wl-stats { display:none !important; } .login .bexo-wl-roles { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); overflow:hidden; } .login .bexo-wl-marquee { display:inline-flex; white-space:nowrap; will-change:transform; animation:bexoMarquee 38s linear infinite; } .login .bexo-wl-marquee span { font-family:var(--ff-mono); font-size:12px; color:var(--faint); letter-spacing:.02em; } @keyframes bexoMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* ---- PAINEL DIREITO ---- */ .login .col-md-6 { flex:1 1 440px; position:relative; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:clamp(24px,4vw,40px); width:auto; } .login .login_innre { width:100%; max-width:380px; } .login form#login, .login form#register, .login form { background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; width:100% !important; max-width:380px !important; padding:0 !important; margin:auto; } /* só o form de login usa flex+order (sequência do design); registo/recuperação ficam em fluxo normal (a ordem do DOM já é a correta). */ .login form#login { display:flex; flex-direction:column; } /* tokenização geral dos campos de TODAS as páginas welcome (registo/recuperação) */ .login .login_innre .wow_form_fields { margin-top:16px; } .login .login_innre .wow_form_fields label { display:block; font-family:var(--ff-ui); font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px; } .login .login_innre .wow_form_fields input, .login .login_innre .wow_form_fields select, .login .login_innre .wow_form_fields textarea, .login .login_innre select, .login .login_innre input[type="text"], .login .login_innre input[type="email"], .login .login_innre input[type="password"], .login .login_innre input[type="tel"] { width:100%; height:46px; background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text); padding:0 15px; font-family:var(--ff-ui); font-size:14px; } .login .login_innre .wow_form_fields textarea { height:auto; padding:12px 15px; } .login .login_innre .wow_form_fields input:focus, .login .login_innre .wow_form_fields select:focus { border-color:var(--accent) !important; outline:0; } /* botão principal de qualquer form welcome */ .login .login_innre .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; height:48px; font-family:var(--ff-ui); font-weight:700; font-size:14.5px; } .login .login_innre .btn-main:hover { background:var(--accent-2) !important; } /* "criar conta" em fluxo normal (registo): margem do toggle */ .login form#register .bexo-seg { margin:22px 0 0; } .login form#register .helper-text { font-family:var(--ff-mono); font-size:11px; color:var(--muted); margin-top:8px; } /* controlos (idioma/tema) topo-direito */ .login .bexo-wl-controls { position:absolute; top:clamp(18px,3vw,30px); right:clamp(18px,3vw,38px); display:flex; gap:4px; z-index:5; } .login .bexo-wl-ico { display:flex; padding:8px; color:var(--muted); cursor:pointer; } .login .bexo-wl-ico:hover { color:var(--text); } /* cabeçalho */ .login .title { order:1; font-family:var(--ff-display); font-weight:700; font-size:29px; letter-spacing:-.02em; color:var(--text); margin:0; } .login .bexo-welcome-back { order:2; font-family:var(--ff-ui); font-size:14px; color:var(--muted); margin:6px 0 0; } /* toggle segmentado Entrar/Criar conta */ .login .bexo-seg { order:3; display:flex; background:var(--bg-2); border:1px solid var(--line); padding:4px; margin:22px 0 0; } .login .bexo-seg a { flex:1; text-align:center; padding:9px; font-family:var(--ff-ui); font-size:13px; font-weight:700; color:var(--muted); text-decoration:none; cursor:pointer; } .login .bexo-seg a.bexo-seg-on { background:var(--accent); color:var(--on-accent); } .login .bexo-seg a:not(.bexo-seg-on):hover { color:var(--text); } /* erros */ .login .errors { order:4; } .login .alert.errors:empty { display:none; padding:0; margin:0; border:0; } .login .alert.errors { border-radius:0 !important; margin-top:16px; } /* campos */ .login .bexo-field { order:5; margin:18px 0 0; } .login .bexo-field label { display:block; font-family:var(--ff-ui); font-size:12.5px; font-weight:600; color:var(--muted); } .login .bexo-pw-row { display:flex; align-items:center; justify-content:space-between; } .login .bexo-forgot { font-family:var(--ff-ui); font-size:12px; font-weight:700; color:var(--accent) !important; text-decoration:none; } .login .bexo-field input { width:100%; height:46px; background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text); padding:0 15px; font-family:var(--ff-ui); font-size:14px; margin-top:8px; } .login .bexo-field input:focus { border-color:var(--accent) !important; outline:0; } /* botão Entrar */ .login .login_signup_combo { order:7; margin-top:18px; width:100%; } .login .login_signup_combo .login__, .login .login_signup_combo .login__ button { width:100%; } .login .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; width:100%; height:48px; font-family:var(--ff-ui); font-weight:700; font-size:14.5px; } .login .btn-main:hover { background:var(--accent-2) !important; } /* divisória "ou" */ .login .bexo-or { order:8; display:flex; align-items:center; gap:14px; margin:22px 0 0; font-family:var(--ff-ui); font-size:12px; color:var(--faint); } .login .bexo-or::before, .login .bexo-or::after { content:""; flex:1; height:1px; background:var(--line); } /* social Google/Apple outline */ .login .social_btns { order:9; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 0; } .login .social_btns .btn, .login .social_btns > a.btn, .login .social_btns .bexo-social-btn, .login .social_btns a.bexo-social-btn { width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; border:1px solid var(--line-2) !important; background:var(--bg) !important; box-shadow:none !important; border-radius:0 !important; color:var(--text) !important; height:46px !important; display:flex !important; align-items:center; justify-content:center; gap:9px; font-family:var(--ff-ui); font-weight:600; font-size:13.5px; } .login .social_btns .btn:hover, .login .social_btns .bexo-social-btn:hover { background:var(--bg-2) !important; border-color:var(--accent) !important; } /* botão SDK do Google escondido (mantém a funcionalidade One Tap); usamos um botão custom "Google" para igualar o design. */ .login .social_btns #buttonDiv.bexo-google-sdk { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; opacity:0; pointer-events:none; } .login .social_btns .bexo-social-btn svg { width:18px; height:18px; } .login .social_btns .bexo-social-btn svg { width:18px; height:18px; } /* criar conta + termos */ .login .bexo-noacc { order:10; text-align:center; font-family:var(--ff-ui); font-size:13px; color:var(--muted); margin:18px 0 0; } .login .desc a.main, .login .bexo-noacc a.main { color:var(--accent) !important; font-weight:700; } .login .bexo-terms { order:11; display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0 0; font-family:var(--ff-ui); font-size:12px; color:var(--faint); } .login .bexo-terms a { color:var(--faint); text-decoration:none; } .login .bexo-terms a:hover { color:var(--muted); } /* esconder elementos antigos não presentes no design */ .login .night_day_switch, .login .random_users, .login .wo_side_apps { display:none !important; } /* ---- Login responsivo (tablet/mobile): empilhar limpo, sem sobreposições ---- */ @media (max-width: 991px) { .wrapper .login { display:block; min-height:0; } .login .login_left_combo_parent, .login .col-md-6 { flex:none !important; width:100% !important; max-width:none !important; } /* painel hero: passa a separador inferior (já não há borda à direita) */ .login .login_left_combo_parent { border-right:0 !important; border-bottom:1px solid var(--line); overflow:hidden; } /* esconder a marca-d'água "b" gigante em mobile (estava a sobrepor o conteúdo) */ .login .login_left_combo_parent::after { display:none !important; } .login .login_left_combo { padding:clamp(30px,7vw,52px) clamp(22px,6vw,44px) !important; min-height:0 !important; height:auto !important; } .login .col-md-6 { padding:clamp(30px,7vw,44px) clamp(22px,6vw,44px) !important; } .login .bexo-wl-h1 { font-size:clamp(30px,8vw,46px); } .login .bexo-wl-sub { max-width:none; } .login .bexo-wl-stats { margin-top:30px; } /* controlos idioma/tema: não sobrepor o formulário em mobile */ .login .bexo-wl-controls { top:14px; right:14px; } } /* em ecrãs pequenos, a marquee de papéis é decorativa -> fora para não competir com o form */ @media (max-width: 600px) { .login .bexo-wl-roles { display:none !important; } .login .bexo-wl-stats { gap:22px; } /* cabeçalho do perfil em mobile: bloco sobreposto na capa, UMA linha (avatar | nome | ações) */ .wo_user_profile .pic-info-cont { display:flex !important; flex-wrap:nowrap !important; align-items:flex-end !important; text-align:left !important; gap:10px !important; padding:0 14px 8px !important; } .container .wo_user_profile .pic-info-cont .user-avatar, .wo_user_profile .pic-info-cont .user-avatar { width:58px !important; height:58px !important; margin:0 !important; display:block !important; top:0 !important; flex-shrink:0; } .wo_user_profile .pic-info-cont .user-avatar > img { width:58px !important; height:58px !important; } .wo_user_profile .pic-info-cont .info { flex:1 1 auto !important; min-width:0 !important; text-align:left !important; } .wo_user_profile .pic-info-cont .info .title a { font-size:17px !important; } .wo_user_profile .pic-info-cont .info p { font-size:11px !important; } .wo_user_profile .options-buttons { flex-shrink:0 !important; margin:0 0 0 auto !important; gap:6px; } .wo_user_profile .options-buttons .btn, .wo_user_profile .options-buttons .btn-default { padding:8px 10px !important; } } /* ========================================================================= FASE 10 — DEFINIÇÕES (link1=setting). Mesma linguagem editorial: sidebar cardless com item ativo = acento + accent-weak + spine; campos de formulário quadrados (bg-2 + hairline), selects/textarea idem; cabeçalho display. ========================================================================= */ /* sidebar de definições: cardless, item ativo com spine de acento */ .wow_sett_sidebar { background:var(--bg) !important; border:0 !important; border-right:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; } .wow_sett_sidebar ul { padding:6px 0; } .wow_sett_sidebar ul li { list-style:none; } .wow_sett_sidebar ul li a, .wow_sett_sidebar ul li > a { position:relative; display:flex; align-items:center; gap:12px; padding:10px 16px; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:14px; border-radius:0; text-decoration:none; } .wow_sett_sidebar ul li a:hover { background:var(--bg-2); color:var(--text) !important; } .wow_sett_sidebar ul li a svg { width:18px; height:18px; } .wow_sett_sidebar ul li a svg .icon_main { stroke:currentColor; } .wow_sett_sidebar ul li.active { background:var(--accent-weak) !important; } .wow_sett_sidebar ul li.active > a, .wow_sett_sidebar ul li.active a { color:var(--accent) !important; font-weight:700; background:transparent !important; } .wow_sett_sidebar ul li.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent); } /* "chips" dos ícones tinham fundo claro hardcoded (rgb(0 0 0/5%) e #f6f6f6) -> tokenizar (adapta light/dark) */ .wow_sett_sidebar > ul > li > a svg { background-color:var(--bg-2) !important; } .wow_sett_sidebar > ul > li > a span:before { background:var(--bg-2) !important; } .wow_sett_sidebar ul li.active > a svg, .wow_sett_sidebar ul li.active > a span:before { background:var(--accent-weak) !important; } .wow_sett_sidebar > ul > li > a svg, .wow_sett_sidebar > ul > li > a span svg { color:var(--muted); } .wow_sett_sidebar ul li.active > a svg { color:var(--accent); } /* painel do formulário: cardless + cabeçalho display */ .wo_settings_page { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } .wo_settings_page .wo_page_hdng_innr, .wo_settings_page h2, .wo_settings_page .setting_page_title { font-family:var(--ff-display); font-weight:700; letter-spacing:-.02em; color:var(--text); } /* campos quadrados (input/select/textarea) bg-2 + hairline */ .wo_settings_page .wow_form_fields label { font-family:var(--ff-ui); font-size:12.5px; font-weight:600; color:var(--muted); } .wo_settings_page .wow_form_fields input, .wo_settings_page .wow_form_fields select, .wo_settings_page .wow_form_fields textarea, .wo_settings_page .wow_form_fields .bootstrap-select > .dropdown-toggle, .wo_settings_page .form-control { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text) !important; font-family:var(--ff-ui); } .wo_settings_page .wow_form_fields input:focus, .wo_settings_page .wow_form_fields select:focus, .wo_settings_page .wow_form_fields textarea:focus { border-color:var(--accent) !important; outline:0; } /* botões guardar = acento; cantos retos */ .wo_settings_page .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .wo_settings_page .btn-main:hover { background:var(--accent-2) !important; } /* ========================================================================= FASE 11 — BLOG + EVENTOS (cartões). Cabeçalhos/chips/nav já tokenizados pelas fases globais; faltavam os cartões de conteúdo. Editorial: cantos retos, hairline em vez de sombra, imagem sharp, botões acento/outline. ========================================================================= */ /* cartões de blog */ .wow_main_blogs { background:var(--bg) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; overflow:hidden; } .wow_main_blogs:hover { background:var(--bg-2) !important; } .wow_main_blogs img { border-radius:0 !important; max-width:100% !important; height:auto; } /* responsivo: a imagem do card (tamanho natural) forçava o col a crescer e transbordar em tablet. Conter imagens, permitir o col encolher e quebrar títulos longos. */ #recent-blogs .col-lg-4, #recent-blogs .col-md-6, #recent-blogs > div[class*="col-"] { min-width:0 !important; } #recent-blogs img, .wow_main_blogs .avatar img { max-width:100% !important; height:auto; display:block; } .wow_main_blogs .art-title, .wow_main_blogs .art-title a, .wow_main_blogs h2, .wow_main_blogs h3 { overflow-wrap:break-word; word-break:break-word; } .wow_main_blogs .blog-title, .wow_main_blogs h3, .wow_main_blogs h4 { font-family:var(--ff-display); font-weight:700; letter-spacing:-.01em; color:var(--text); } .wow_main_blogs .blog-category, .wow_main_blogs .category, .wow_main_blogs .blog-meta { font-family:var(--ff-mono); font-size:11px; color:var(--muted); } .wow_main_blogs .btn-main, .wow_main_blogs .read-more { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .wow_main_blogs .btn-main:hover { background:var(--accent-2) !important; } /* cartões de eventos */ .events-list-cover { background:var(--bg) !important; border:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; overflow:hidden; } .events-list-cover:hover { background:var(--bg-2) !important; } .events-list-cover img { border-radius:0 !important; } .events-list-cover .event-title, .events-list-cover h3, .events-list-cover h4, .events-list-cover .e_name { font-family:var(--ff-display); font-weight:700; letter-spacing:-.01em; color:var(--text); } .events-list-cover .event-meta, .events-list-cover .e_location, .events-list-cover .country { font-family:var(--ff-mono); font-size:11px; color:var(--muted); } /* botões dos cartões de evento: cantos retos; principal=acento, secundário=outline */ .events-list-cover .btn { border-radius:0 !important; box-shadow:none !important; font-weight:700; } .events-list-cover .btn-main, .events-list-cover .interested-btn, .events-list-cover .going_btn { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; } .events-list-cover .btn-main:hover { background:var(--accent-2) !important; } .events-list-cover .btn-default, .events-list-cover .join-btn { background:var(--bg) !important; border:1px solid var(--line-2) !important; color:var(--text) !important; } /* ========================================================================= FASE 12 — MODAIS (fiabilidade: aparecem em toda a app). Estavam brancos + radius 16px mesmo em dark. Tokenizar: conteúdo cardless cantos retos + pop shadow, cabeçalho/rodapé com hairline, título display, inputs quadrados, backdrop escuro. Cobre .modal-content e a variante .wow_mat_mdl. ========================================================================= */ .modal-content, .wow_mat_mdl .modal-content { background:var(--bg) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:0 !important; box-shadow:var(--shadow-pop) !important; } .modal-header, .wow_mat_mdl .modal-header { background:transparent !important; border-bottom:1px solid var(--line) !important; border-color:var(--line) !important; } .modal-title, .wow_mat_mdl .modal-header .modal-title { font-family:var(--ff-display) !important; font-weight:700; color:var(--text) !important; letter-spacing:-.01em; } .modal-header .close, .wow_mat_mdl .modal-header .close { color:var(--muted) !important; opacity:.7; } .modal-header .close:hover { opacity:1; color:var(--text) !important; } .modal-header .close svg { stroke:currentColor; } .modal-body { color:var(--text); } .modal .modal-footer, .modal-footer { background:transparent !important; border-top:1px solid var(--line) !important; border-color:var(--line) !important; } /* inputs/selects/textarea dentro de modais: quadrados bg-2 + hairline */ .modal .form-control, .modal input[type="text"], .modal input[type="email"], .modal input[type="number"], .modal input[type="password"], .modal input[type="search"], .modal input[type="tel"], .modal textarea, .modal select, .modal .wow_form_fields input, .modal .wow_form_fields select, .modal .wow_form_fields textarea { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important; color:var(--text) !important; } .modal .form-control:focus, .modal textarea:focus, .modal select:focus, .modal input:focus { border-color:var(--accent) !important; outline:0; } /* botões dos modais: cantos retos; principal=acento */ .modal .btn, .modal .modal-footer .btn.btn-mat { border-radius:0 !important; box-shadow:none !important; } .modal .btn-main, .modal .modal-footer .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; } .modal .btn-main:hover { background:var(--accent-2) !important; } .modal .btn-default { background:var(--bg) !important; border:1px solid var(--line-2) !important; color:var(--text) !important; } /* backdrop mais escuro/sólido */ .modal-backdrop, .modal-backdrop.in { background:#000 !important; } .modal-backdrop.in { opacity:.62 !important; } /* listas/itens dentro de modais (ex.: seletor de privacidade, reações) */ .modal .menu-item, .modal .dropdown-menu, .modal .list-group-item { background:transparent !important; color:var(--text); border-color:var(--line) !important; } .modal .menu-item:hover, .modal .list-group-item:hover { background:var(--bg-2) !important; } /* dropzones de upload (foto/produto/avatar) dentro de modais: bg-2 + hairline sharp */ .modal .upload-product-image, .modal [class*="upload"][class*="image"], .modal .add-photo, .modal .btn-file, .modal .image-upload, .modal .upload_bank_receipts > div { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; color:var(--muted) !important; } .modal .upload-product-image svg, .modal .btn-file svg { color:var(--muted) !important; stroke:var(--muted); } /* botão fechar: sem fundo branco (inclui span/svg internos) */ .modal .close, .modal-header .close, .wow_mat_mdl .modal-header .close, .modal .close *, .modal-header .close * { background:transparent !important; } .modal .close svg, .modal-header .close svg { color:var(--muted) !important; stroke:var(--muted) !important; } /* variante de cabeçalho "pops head" (banner colorido) -> banda accent-weak editorial */ .wow_pops_head { background:var(--accent-weak) !important; color:var(--text) !important; border-radius:0 !important; border-bottom:1px solid var(--line) !important; margin-bottom:0 !important; padding:22px 0 !important; } .wow_pops_head h4 { color:var(--text) !important; font-family:var(--ff-display) !important; font-weight:700; } .wow_pops_head h4 svg, .wow_mat_mdl .modal-header .modal-title svg { background:var(--accent) !important; color:var(--on-accent) !important; fill:var(--on-accent) !important; border-radius:0 !important; } /* ========================================================================= FASE 13 — ELEVAÇÃO (micro-interações) + limpeza de leaks residuais. Transições suaves nos elementos interativos + anel de foco acessível em acento; tokenização de stragglers (compositor, botões follow, toggle). ========================================================================= */ /* transições suaves (qualidade percebida, transversal) */ .btn, .navbar-default .header-icon, .navbar-default .header-icon svg, .wo_new_left_side ul li a, .wow_sett_sidebar ul li a, .user-bottom-nav ul li a, .wow_big_head_link > ul.list-unstyled li a, .wo_msg_tabs li a, .messages-recipients-list, .product_info.wow_main_mkt_prod, .wow_main_blogs, .events-list-cover, .list-group-item, .dropdown-menu .menu-item, a.bexo-wordmark, .bexo-pop a, .options-buttons .btn, .user-follow-button .btn, .group-join-btn .btn { transition: background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease; } /* foco acessível: anel de acento (não destrutivo; só em foco por teclado) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent) !important; outline-offset:2px; border-radius:0; } /* compositor principal (textarea "no que está a pensar") quadrado bg-2 */ textarea.postText, .postText, .publisher-content textarea, .create-post-box textarea { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; color:var(--text) !important; box-shadow:none !important; } textarea.postText:focus, .postText:focus { border-color:var(--accent) !important; outline:0; } /* botões follow (sugestões/rail): o tema usava um gradiente ROSA legado (#cc1e47) via background-image !important — substituir pelo acento do sistema. Especificidade alta + matar o background-image. */ .wo_follow_btn, button.wo_follow_btn, .btn.btn-default.wo_follow_btn, #wo_sidebar_users .btn-default.wo_follow_btn, .wow_side_usrs .wo_follow_btn, .user-follow-button .btn.wo_follow_btn { background:var(--accent) !important; background-image:none !important; border:0 !important; color:var(--on-accent) !important; box-shadow:none !important; } .wo_follow_btn .icon_main { stroke:var(--on-accent) !important; } .wo_follow_btn:hover, .btn.btn-default.wo_follow_btn:hover, #wo_sidebar_users .btn-default.wo_follow_btn:hover { background:var(--accent-2) !important; background-image:none !important; color:var(--on-accent) !important; } /* toggle dia/noite legado + searches secundárias (header dropdown/chat) que vazavam */ .night_day_switch { background:var(--bg-2) !important; } .search-input, .search-users-chat, .search-container .search-input, .navbar-form .search-input, .navbar-form .form-control.search-input { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; color:var(--text) !important; box-shadow:none !important; } /* ========================================================================= FASE 14 — CONSISTÊNCIA: cor de marca legada (#C64D53, rosa) -> acento. Elementos espalhados que escapavam ao sistema de tokens. ========================================================================= */ /* badge de contagem (ex.: nº de posts no perfil) */ .right_user_info .flex_stats li .badge, .badge.badge-danger { background:var(--accent) !important; color:var(--on-accent) !important; border-radius:0 !important; } /* badge "Download" em ficheiros partilhados no post */ .post .wo_shared_doc_file > a:after { background:var(--accent) !important; color:var(--on-accent) !important; } /* ícones de hashtag (trending/sidebar): chip accent-weak + ícone acento */ .wow_htag a svg { background:var(--accent-weak) !important; color:var(--accent) !important; border-radius:0 !important; } /* anel "criar story" (gradiente legado -> acento) */ .user-status-home ul.status-list li.create_new .avatar:before { background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important; } /* botões de candidatura/jobs (modo linkedin) */ .wo_view_post_jobs .wo_vew_apld_msg .btn { background-color:var(--accent) !important; color:var(--on-accent) !important; } /* ========================================================================= FASE 15 — Bloco PRO da coluna direita (.featured-users). Tinha um fundo laranja fixo (#FBAB7E) + sombra + cantos arredondados. Elevar para o estilo do cartão PRO do design: accent-weak + borda de acento, cantos retos, cardless. ========================================================================= */ .featured-users { background:var(--accent-weak) !important; border:1px solid var(--accent) !important; box-shadow:none !important; border-radius:0 !important; padding:16px !important; margin-bottom:18px; } .featured-users .sidebar-title-back { background:transparent !important; color:var(--text) !important; font-family:var(--ff-display) !important; font-weight:700; letter-spacing:-.01em; } .featured-users .pro-me-here, .featured-users .pro-me-here a { color:var(--accent) !important; font-weight:700; } .featured-users img { background:var(--bg-2) !important; border-radius:50% !important; } /* ========================================================================= FASE 17 — COLUNA DIREITA = DESIGN. O design só tem 4 secções: perfil -> trending -> sugestões (pessoas) -> PRO. Esconder TODOS os widgets antigos, reordenar, espaçamento limpo (flex+gap) e cabeçalhos de secção em maiúsculas espaçadas (estilo do design). Ref: BexoPRO Feed.dc.html (rail 330px). ========================================================================= */ /* Fluxo normal (block): o espaçamento vertical vem das margens/paddings reais do mockup definidas em cada secção (.bexo-rail-*), não de um gap uniforme. */ .rightcol { display:block !important; } /* widgets a ESCONDER (não pedidos): aniversários, meteo, serviços, anúncios, apps, footer. PESSOAS / PÁGINAS / GRUPOS / CONVIDAR / MERCADO / ATIVIDADES são re-adicionados. */ .rightcol .wow_side_bdays, .rightcol ul.list-group:has(.wow_weather), .rightcol #sidebar-user-service-container, .rightcol .sidebar-ad, .rightcol .wow_side_apps, .rightcol .sidebar-footer, .rightcol .wo_sidebar_footer, .rightcol .footer-wrapper-sidebar, .rightcol > .page-margin:has(.footer-wrapper-sidebar) { display:none !important; } /* cabeçalhos de secção (trending/pessoas) -> rótulo maiúsculas espaçadas do design (NÃO aplicar ao .featured-users, cujo título é display do cartão PRO) */ .rightcol ul.list-group > .sidebar-title-back { background:transparent !important; padding:0 0 6px !important; margin:0 0 2px !important; font-family:var(--ff-ui) !important; font-size:10.5px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--faint) !important; line-height:1.4 !important; border:0 !important; } .rightcol ul.list-group > .sidebar-title-back .refresh { color:var(--muted) !important; } /* ---- Widgets re-adicionados (páginas/grupos/convidar/mercado/atividades): estilo editorial ---- */ .rightcol .bexo-rail-list { margin-top:26px !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; list-style:none; } .rightcol .bexo-rail-list > li, .rightcol .bexo-rail-list .list-group-item { background:transparent !important; border:0 !important; padding:0 !important; list-style:none; } .rightcol .bexo-rail-list .sidebar-title-back { display:block; margin:0 0 4px !important; border-bottom:1px solid var(--line) !important; padding:0 0 8px !important; } .rightcol .bexo-rail-list .sidebar-title-back a { color:var(--faint) !important; } /* item genérico (página/grupo): linha com avatar + nome + meta + ação */ .rightcol .bexo-rail-list .wo_side_users, .rightcol .bexo-rail-list .sidebar-pages-may-know-container > *, .rightcol .bexo-rail-list .sidebar-group-may-know-container > * { display:flex !important; align-items:center; gap:11px; padding:13px 0 !important; border-bottom:1px solid var(--line) !important; margin:0 !important; background:transparent !important; float:none !important; width:auto !important; } .rightcol .bexo-rail-list img { width:40px !important; height:40px !important; border-radius:50% !important; object-fit:cover; flex-shrink:0; } .rightcol .bexo-rail-list a { font-family:var(--ff-ui); color:var(--text); } .rightcol .bexo-rail-list .btn, .rightcol .bexo-rail-list .wo_follow_btn, .rightcol .bexo-rail-list .join-group, .rightcol .bexo-rail-list .like-page { background:transparent !important; border:1px solid var(--accent) !important; color:var(--accent) !important; border-radius:0 !important; padding:6px 13px !important; font-family:var(--ff-ui); font-weight:700; font-size:12px; box-shadow:none !important; width:auto !important; height:auto !important; } .rightcol .bexo-rail-list .btn:hover, .rightcol .bexo-rail-list .wo_follow_btn:hover { background:var(--accent) !important; color:var(--on-accent) !important; } /* convidar amigos */ .rightcol .bexo-invite-form .invite-user-combine { display:flex; gap:8px; margin-top:10px; } .rightcol .bexo-invite-form input { flex:1; background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; height:40px; padding:0 12px; font-family:var(--ff-ui); font-size:13px; box-shadow:none !important; } .rightcol .bexo-invite-form .btn-main { border-radius:0 !important; padding:0 16px; height:40px; flex-shrink:0; } /* mercado / atividades: usar tokens, cardless */ .rightcol .bexo-rail-list .sidebar-product-slider { display:flex; gap:10px; overflow-x:auto; padding:12px 0 0 !important; } .rightcol .bexo-rail-list .activities-wrapper { padding:8px 0 0 !important; } /* ========================================================================= FASE 16 — Área de comentários (aparece em cada post comentado). As caixas de comentar/responder estavam claras (rgb 240,242,245) + arredondadas mesmo em dark. Tokenizar: input quadrado bg-2 + hairline; bolha do comentário cardless; nome do autor em ui bold. ========================================================================= */ .comment-textarea, .reply-box, textarea.comment-textarea, textarea.reply-box, .post-commet-textarea textarea, .wo_comment_combo textarea, .wo_commreply_combo textarea { background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; color:var(--text) !important; box-shadow:none !important; } .comment-textarea:focus, .reply-box:focus, .post-commet-textarea textarea:focus, .wo_commreply_combo textarea:focus { border-color:var(--accent) !important; outline:0; } /* contentor (combo) das caixas: cantos retos, sem fundo claro */ .post-commet-textarea, .wo_comment_combo, .wo_commreply_combo, .comment-reply .wo_commreply_combo { background:transparent !important; border-radius:0 !important; } /* cantos retos com especificidade alta (bate regras .comment-reply ... do tema) */ .post-commet-textarea textarea.comment-textarea, .comment-reply .wo_commreply_combo textarea.reply-box, .comment-replies .comment-reply textarea.reply-box, .wo_comment_combo textarea.comment-textarea, textarea.comment-textarea.ui-autocomplete-input { border-radius:0 !important; } /* bolha do comentário cardless + nome em ui bold + meta mono */ .comment .comment-body { background:transparent !important; } .comment .comment-heading .user, .comment .comment-heading h4.user { font-family:var(--ff-ui); font-weight:700; color:var(--text); } .comment .comment-body .comment-time, .comment .time { font-family:var(--ff-mono); font-size:11px; color:var(--muted); } /* botão enviar comentário (se existir) em acento */ .post-commet-textarea .btn-main, .wo_comment_combo .btn-main, .wo_commreply_combo .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; } /* ========================================================================= FASE 18 — FEED CENTRO = MOCKUP. (1) Barra de tabs Em foco/Recentes/A seguir (sticky, sublinhado de acento no ativo). (2) Compositor limpo: avatar + campo inset + linha de ações (chips) + botão Publicar acento. ========================================================================= */ /* ---- Largura da app + gap header→conteúdo = mockup ---- O tema punha .content-container margin-top:78px (ALÉM do padding-top:65px do body para a navbar) -> gap enorme entre header e conteúdo. E .container só tinha 1280px (mockup usa 1600px). Corrigir ambos. */ .content-container { margin-top:0 !important; } /* navbar reservava 75px à direita p/ o dock de chat (escondido) -> header ficava 75px mais estreito que o conteúdo. Remover p/ o header alinhar com o conteúdo. */ .navbar-fixed-top, .navbar-default { padding-right:0 !important; } /* ---- LAYOUT do feed = mockup (262 / flex / 330). Responsivo: só em desktop (≥992px) usa o flex; abaixo volta ao empilhamento do bootstrap (mobile/tablet). ---- */ @media (min-width:992px) { .container { width:auto !important; max-width:1600px !important; } .navbar-default .header-fixed1000, .header-fixed1000, .header-fixed1200 { max-width:1600px !important; width:auto !important; } .content-container:has(.middlecol) { padding-left:0 !important; padding-right:0 !important; } .page-margin:has(> .row > .middlecol) { padding-left:0 !important; padding-right:0 !important; margin:0 !important; } .page-margin .row:has(> .middlecol) { display:flex !important; flex-wrap:nowrap; align-items:flex-start; margin:0 auto !important; max-width:1600px; } .page-margin .row:has(> .middlecol) > .leftcol { flex:0 0 262px !important; width:262px !important; max-width:262px !important; float:none !important; padding:24px 22px 28px 24px !important; position:sticky !important; top:65px; height:calc(100vh - 65px); display:flex !important; flex-direction:column; min-height:0; } /* lista de nav (home): scroll interno com rato; nunca passa por cima do rodapé. */ .page-margin .row:has(> .middlecol) > .leftcol .wo_new_left_side > ul { max-height:calc(100vh - 65px - 24px - 72px); overflow-y:auto; overscroll-behavior:contain; } /* rodapé encostado ao fundo SÓ no layout home (leftcol sticky de altura total). Noutras páginas o rodapé fica em fluxo normal (a seguir à nav) -> nunca sobrepõe. */ .page-margin .row:has(> .middlecol) > .leftcol .bexo-left-footer { position:absolute; left:24px; right:22px; bottom:16px; margin:0; background:var(--bg); } .page-margin .row:has(> .middlecol) > .middlecol { flex:1 1 0% !important; width:auto !important; max-width:none !important; min-width:0 !important; float:none !important; padding:0 !important; } .page-margin .row:has(> .middlecol) > .sidebar-conatnier { flex:0 0 330px !important; width:330px !important; max-width:330px !important; float:none !important; } .sidebar-conatnier > .rightcol { width:100% !important; max-width:none !important; float:none !important; padding:24px 24px 28px 22px !important; } } /* paddings exatos do mockup */ .wo_new_left_side ul li a { padding:7px 12px !important; } .middlecol .sun_pub_box { padding:22px 26px !important; } /* esconder elementos do WoWonder que não existem no mockup e duplicam as tabs: barra de filtro (filterby), alerta de saudação. */ .middlecol .filterby, .middlecol #filterby-post, .middlecol #scroll_filter_click, .middlecol .greetalert { display:none !important; } /* a barra de filtro de posts (ícones sem rótulo) também polui o topo do perfil — escondê-la por consistência com o feed (o mockup não a inclui) */ .wo_user_profile .filterby, .wo_user_profile #filterby-post, .wo_user_profile #scroll_filter_click, .wo_page_profile .filterby, .wo_page_profile #filterby-post, .wo_page_profile #scroll_filter_click, .wo_group_profile .filterby, .wo_group_profile #filterby-post, .wo_group_profile #scroll_filter_click, .wo_event_profile .filterby, .wo_event_profile #filterby-post, .wo_event_profile #scroll_filter_click { display:none !important; } /* ========================================================================= Perfil de PÁGINA / GRUPO — tratamento editorial (capa cardless, avatar a sobrepor, nome display, botões quadrados accent/outline, navbar em tabs). Responsivo. ========================================================================= */ .wo_page_profile .card.hovercard, .wo_group_profile .card.hovercard { background:var(--bg) !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; margin-bottom:0 !important; position:relative; } .wo_page_profile .cardheader.user-cover, .wo_group_profile .cardheader.user-cover { height:clamp(160px,24vw,230px) !important; min-height:0 !important; border-radius:0 !important; overflow:hidden; background:var(--bg-2); border-bottom:0; } .wo_page_profile .cardheader.user-cover #cover-image, .wo_page_profile .cardheader.user-cover img, .wo_group_profile .cardheader.user-cover #cover-image, .wo_group_profile .cardheader.user-cover img { width:100%; height:100%; object-fit:cover; border-radius:0; } .wo_page_profile .problackback, .wo_group_profile .problackback { display:none !important; } /* bloco de info: cardless, hairline em baixo; avatar a sobrepor a capa */ .wo_page_profile .page-info-cont, .wo_group_profile .group-info-cont { margin:0 !important; padding:0 26px 16px !important; border-bottom:1px solid var(--line); position:relative; background:var(--bg); } .wo_page_profile .page-info-cont .first_row { display:flex; align-items:flex-end; gap:16px; padding:0 !important; } .container .wo_page_profile .page-info-cont .user-avatar, .wo_page_profile .page-info-cont .user-avatar { width:96px !important; height:96px !important; margin:-44px 0 0 !important; flex-shrink:0; position:relative; z-index:2; top:0 !important; border-radius:50%; } .wo_page_profile .page-info-cont .user-avatar img { width:96px !important; height:96px !important; border-radius:50% !important; object-fit:cover; border:4px solid var(--bg); background:var(--bg-2); box-shadow:none; } .wo_page_profile .page-info-cont .info { flex:1 1 auto; min-width:0; padding:0 0 4px !important; } .wo_page_profile .page-info-cont .info .title { position:static !important; width:auto !important; text-shadow:none !important; } .wo_page_profile .page-info-cont .info .title > a { font-family:var(--ff-display); font-weight:700; font-size:24px; letter-spacing:-.02em; color:var(--text) !important; text-shadow:none !important; } .wo_page_profile .page-info-cont .info .title .verified-color { fill:var(--accent); } .wo_page_profile .page-info-cont .page_username { font-family:var(--ff-mono); font-size:12px; color:var(--muted); margin-top:4px; } /* botões de ação: quadrados; Like (primeiro) em acento, restantes outline */ .wo_page_profile .page-info-cont .last_row { padding:0 !important; } .wo_page_profile .page-info-cont .options-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:center; margin:0 !important; position:static !important; } .wo_page_profile .options-buttons .btn { border-radius:0 !important; border:1px solid var(--line-2) !important; background:var(--bg) !important; color:var(--text) !important; font-weight:700; font-size:13px; padding:9px 16px; box-shadow:none !important; margin:0 !important; } .wo_page_profile .options-buttons .btn svg { width:17px; height:17px; } .wo_page_profile .options-buttons .btn:hover { background:var(--bg-2) !important; } .wo_page_profile .options-buttons .page-like-btn .btn, .wo_page_profile .options-buttons .btn-main { background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important; } .wo_page_profile .options-buttons .page-like-btn .btn:hover, .wo_page_profile .options-buttons .btn-main:hover { background:var(--accent-2) !important; } /* page_navbar: barra de tabs editorial — tirar do absoluto (base sobrepunha-o na capa) e pôr abaixo */ .wo_page_profile .page-info-cont .page_navbar, .wo_page_profile .page_navbar { position:static !important; bottom:auto !important; left:auto !important; right:auto !important; width:auto !important; border-top:1px solid var(--line); margin-top:12px; padding-top:6px; } .wo_page_profile .page_navbar ul { display:flex; flex-wrap:wrap; gap:2px; padding:0; margin:0; list-style:none; } .wo_page_profile .page_navbar ul li a { display:flex; align-items:center; gap:7px; padding:9px 13px; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:13px; text-decoration:none; border-radius:0; } .wo_page_profile .page_navbar ul li a:hover { background:var(--bg-2); color:var(--text) !important; } .wo_page_profile .page_navbar ul li a svg { width:17px; height:17px; } @media (max-width: 600px) { .wo_page_profile .page-info-cont .first_row { flex-wrap:nowrap; align-items:center; } .container .wo_page_profile .page-info-cont .user-avatar, .wo_page_profile .page-info-cont .user-avatar { width:64px !important; height:64px !important; margin:-30px 0 0 !important; } .wo_page_profile .page-info-cont .user-avatar img { width:64px !important; height:64px !important; } .wo_page_profile .page-info-cont .info .title > a { font-size:18px; } .wo_page_profile .page-info-cont .options-buttons { justify-content:flex-start; margin-top:12px !important; } } /* ========================================================================= FASE 20 — feed: (1) remover a barra flutuante direita (não existe no mockup), (2) remover a zona de topo do centro (stories + anúncio), (3) bloco de perfil da coluna direita igual ao mockup. ========================================================================= */ /* (1) tira de ícones flutuante / dock de chat + os 75px que o body reservava p/ ela */ .chat-container, .chat-container.full, .chat-all-container { display:none !important; } body { padding-right:0 !important; } /* (2) zona de topo do centro que não está no mockup (stories + anúncio admin) */ .middlecol .user-status-home, .middlecol .wow_home_stories, .middlecol .home-announcement { display:none !important; } /* (3) bloco de perfil da coluna direita = mockup (avatar 56px, nome display, @user mono, stats inline mono; SEM capa nem fila de seguidores aleatórios) */ .rightcol .wow_side_loggd_usr { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; padding:0 0 22px !important; overflow:visible !important; } .rightcol .wow_side_loggd_usr_cvr { display:none !important; } .rightcol .wow_side_loggd_usr .wo_side_users { display:none !important; } .rightcol .wow_side_loggd_usr_hdr { display:flex !important; flex-direction:column; align-items:flex-start; gap:0; padding:0 !important; margin:0 !important; background:transparent !important; } .rightcol .wow_side_loggd_usr_hdr .avatar { margin:0 0 12px !important; position:static !important; width:56px; height:56px; } .rightcol .wow_side_loggd_usr_hdr .avatar img { width:56px !important; height:56px !important; border-radius:50% !important; border:0 !important; object-fit:cover; box-shadow:none !important; } .rightcol .wow_side_loggd_usr_hdr .title a { font-family:var(--ff-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--text); } .rightcol .wow_side_loggd_usr_hdr .title p { font-family:var(--ff-mono); font-size:11.5px; color:var(--muted); margin:3px 0 0; } .rightcol .wow_side_loggd_usr .wo_user_side_info { display:flex !important; flex-wrap:wrap; gap:20px; margin:18px 0 0 !important; padding:0 !important; } .rightcol .wow_side_loggd_usr .wo_user_side_info li { list-style:none; } .rightcol .wow_side_loggd_usr .wo_user_side_info .menu_list { display:flex; flex-direction:column; gap:2px; } .rightcol .wow_side_loggd_usr .wo_user_side_info .menu_list > span:first-child { font-family:var(--ff-mono); font-weight:600; font-size:16px; color:var(--text); } .rightcol .wow_side_loggd_usr .wo_user_side_info .split-link, .rightcol .wow_side_loggd_usr .wo_user_side_info .split-link b { font-family:var(--ff-ui) !important; font-weight:400 !important; font-size:11px !important; color:var(--muted) !important; } /* ---- Zona TENDÊNCIAS = mockup: nº mono acento + hashtag 14/700 + contagem mono, sem ícone ---- */ .rightcol .trending { counter-reset:bxtrend; } .rightcol .trending .wow_htag { padding:13px 0 !important; border-bottom:1px solid var(--line) !important; background:transparent !important; counter-increment:bxtrend; } .rightcol .trending .wow_htag a { display:block !important; padding:0 !important; } .rightcol .trending .wow_htag a svg { display:none !important; } .rightcol .trending .wow_htag a::before { content:counter(bxtrend, decimal-leading-zero); display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.04em; color:var(--accent); } .rightcol .trending .htag_top { display:block; font-family:var(--ff-ui) !important; font-size:14px !important; font-weight:700 !important; color:var(--text) !important; margin-top:3px; } .rightcol .trending .htag_bottom { display:block; font-family:var(--ff-mono) !important; font-size:11px !important; color:var(--muted) !important; margin-top:2px; } /* ---- Zona SUGESTÕES: item já é estrutura do mockup (.bexo-sug-item). Botão "Seguir" outline acento (preenche no hover), como no mockup. ---- */ .rightcol #sidebar-user-list-container .sidebar-users-may-know-container { border-top:1px solid var(--line); } .bexo-sug-follow .btn.btn-default.wo_follow_btn, .bexo-sug-follow .wo_follow_btn, .bexo-sug-follow .btn, .bexo-sug-follow button { background:transparent !important; background-image:none !important; border:1px solid var(--accent) !important; color:var(--accent) !important; border-radius:0 !important; padding:6px 13px !important; width:auto !important; height:auto !important; box-shadow:none !important; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; line-height:1.2; } .bexo-sug-follow .btn.btn-default.wo_follow_btn:hover, .bexo-sug-follow .wo_follow_btn:hover { background:var(--accent) !important; color:var(--on-accent) !important; } .bexo-sug-follow .btn.btn-default.wo_follow_btn .icon_main { stroke:currentColor !important; } .bexo-sug-follow .wo_follow_btn .icon_main { stroke:currentColor !important; } .bexo-sug-follow .wo_follow_btn svg { width:14px; height:14px; } /* (1) Tabs do feed */ .bexo-feed-tabs { display:flex; align-items:stretch; padding:0 26px; background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:62px; z-index:30; } .bexo-feed-tab { padding:15px 4px; margin-right:26px; margin-bottom:-1px; font-family:var(--ff-ui); font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2.5px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer; } .bexo-feed-tab:hover { color:var(--text); } .bexo-feed-tab.active { color:var(--accent); font-weight:700; border-bottom-color:var(--accent); } /* (2) Compositor = mockup: linha 1 (avatar + campo full-width); linha 2 (chips + Publicar à direita) */ .middlecol .sun_pub_box { background:var(--bg) !important; border:0 !important; border-bottom:1px solid var(--line) !important; box-shadow:none !important; border-radius:0 !important; padding:22px 26px !important; margin:0 !important; } .middlecol .sun_pub_box #post-textarea { padding:0 !important; margin:0 !important; } .middlecol .sun_pub_box .wo_pub_txtara_combo { display:flex; align-items:center; gap:14px; position:relative; padding:0 !important; margin:0 !important; } .middlecol .sun_pub_box .post-avatar { width:44px !important; height:44px !important; border-radius:50% !important; flex-shrink:0; margin:0 !important; } /* campo de texto preenche toda a largura disponível (já não há botão nesta linha) */ .middlecol .sun_pub_box .postText { flex:1 1 auto; width:auto !important; min-height:46px !important; height:46px !important; background:var(--bg-2) !important; border:1px solid var(--line) !important; border-radius:0 !important; padding:12px 18px !important; resize:none; color:var(--text) !important; font-family:var(--ff-ui); font-size:14.5px; } /* emoji inline escondido (campo limpo como no mockup; emoji continua disponível nas ações/more) */ .middlecol .sun_pub_box .wo_pub_txtara_combo .add-emoticons { display:none !important; } /* linha de ações: chips à esquerda, packed (sem espalhar) */ .middlecol .sun_pub_box .sun_pub_mid_foot { display:flex !important; align-items:center; flex-wrap:wrap; gap:4px; margin:14px 0 0 !important; padding:0 !important; float:none !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .poster-left-buttons { margin:0 !important; padding:0 !important; flex:0 0 auto; float:none !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .poster-left-buttons .btn { display:flex !important; align-items:center; gap:8px; padding:8px 12px !important; border-radius:0 !important; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:12.5px; background:transparent !important; border:0 !important; box-shadow:none !important; height:auto !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .poster-left-buttons .btn:hover { color:var(--accent) !important; background:var(--bg-2) !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .poster-left-buttons svg { width:17px !important; height:17px !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .new-feature { display:none !important; } /* botão Publicar empurrado para a direita (mockup) */ .middlecol .sun_pub_box .sun_pub_mid_foot .bexo-publish { margin-left:auto !important; flex:0 0 auto; background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; height:auto !important; padding:9px 20px !important; font-family:var(--ff-ui) !important; font-weight:700 !important; font-size:13px !important; width:auto !important; } .middlecol .sun_pub_box .sun_pub_mid_foot .bexo-publish:hover { background:var(--accent-2) !important; } /* footer "more" (itens expandidos) — mesmo estilo chip */ .middlecol .sun_pub_box .publisher-box-footer { background:transparent !important; border:0 !important; box-shadow:none !important; padding:8px 0 0 !important; margin:0 !important; } .middlecol .sun_pub_box .sun_pub_more { display:flex; flex-wrap:wrap; align-items:center; gap:4px; } .middlecol .sun_pub_box .sun_pub_more_items { margin:0 !important; } .middlecol .sun_pub_box .sun_pub_more_items .poster-left-buttons .btn-file, .middlecol .sun_pub_box .sun_pub_more .btn-file { display:flex; align-items:center; gap:8px; padding:8px 12px !important; border-radius:0 !important; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:12.5px; background:transparent !important; border:0 !important; } .middlecol .sun_pub_box .sun_pub_more_items .poster-left-buttons .btn-file:hover, .middlecol .sun_pub_box .sun_pub_more .btn-file:hover { color:var(--accent) !important; background:var(--bg-2) !important; } .middlecol .sun_pub_box .sun_pub_more_items svg { width:17px; height:17px; } /* ========================================================================= FASE 19 — POST do feed =
do BexoPRO Feed.dc.html. Mapear o post do WoWonder (.post .panel.panel-white.panel-shadow) à estrutura/estilos exatos do exemplo: cartão -> artigo cardless separado por hairline (padding 24/26), avatar 46px, corpo 14.5px/1.62/62ch, rodapé com 3 ações iguais + contagens mono. ========================================================================= */ .middlecol .post-container { margin:0 !important; } /* só os posts reais (dentro de .post-container); NÃO o compositor (que também é .post) */ .middlecol .post-container .post { margin:0 !important; padding:0 !important; border:0 !important; } /* só os posts reais (.panel.panel-white.panel-shadow); o compositor é .panel.post sem panel-white, por isso NÃO é apanhado aqui (evita o bleed do padding). */ .middlecol .post-container .post > .panel.panel-white.panel-shadow { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; border-bottom:1px solid var(--line) !important; padding:24px 26px !important; margin:0 !important; } /* cabeçalho do post: avatar 46px + autor 15px/700 + meta mono */ .middlecol .post .post-heading { display:flex !important; align-items:flex-start; gap:13px; margin:0 0 12px !important; padding:0 !important; border:0 !important; } .middlecol .post .post-heading .image, .middlecol .post .post-heading > .image { flex-shrink:0; margin:0 !important; float:none !important; } /* menu de opções do post (kebab): empurrar para a extrema direita da linha do cabeçalho */ .middlecol .post .post-heading > .pull-right, .middlecol .post .post-heading > .pull-left.pull-right { order:9; margin-left:auto !important; float:none !important; flex-shrink:0; align-self:flex-start; } .middlecol .post .post-heading > .pull-right .dropdown-toggle { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:var(--muted); transition:background .15s, color .15s; } .middlecol .post .post-heading > .pull-right .dropdown-toggle:hover { background:var(--bg-2); color:var(--text); } .middlecol .post .post-heading > .pull-right .dropdown-toggle svg { width:18px !important; height:18px !important; } .middlecol .post .post-heading .image .avatar img, .middlecol .post .post-heading .avatar img, .middlecol .post .post-heading .image > a > img { width:46px !important; height:46px !important; border-radius:50% !important; object-fit:cover; } .middlecol .post .post-heading b, .middlecol .post .post-heading a[data-ajax*="timeline"] { font-family:var(--ff-ui); font-weight:700; font-size:15px; color:var(--text); } .middlecol .post .post-heading .small-text, .middlecol .post .post-heading .time, .middlecol .post .post-heading .post-date, .middlecol .post .post-heading time { font-family:var(--ff-mono) !important; font-size:11.5px !important; color:var(--muted) !important; font-weight:400 !important; } /* corpo do post: 14.5px / 1.62 — largura dinâmica (usa toda a largura disponível, quebra natural) */ .middlecol .post .post-description { font-family:var(--ff-ui); font-size:14.5px; line-height:1.62; color:var(--text); padding:0; } .middlecol .post .post-description .post-text, .middlecol .post .post-description > div > p, .middlecol .post .post-description p { max-width:none; overflow-wrap:break-word; word-wrap:break-word; } /* rodapé: contagens em cima (order), depois 3 ações iguais cardless */ .middlecol .post .post_foot_actions { display:flex !important; flex-direction:column; gap:0; margin:14px 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .middlecol .post .post_foot_actions .right_stats { order:-1; float:none !important; margin:0 0 10px !important; } .middlecol .post .post_foot_actions .right_stats .stats { display:flex; gap:14px; justify-content:flex-start; float:none !important; } .middlecol .post .post_foot_actions .right_stats .stat-item { font-family:var(--ff-mono) !important; font-size:12px !important; color:var(--muted) !important; background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; } .middlecol .post .post_foot_actions > .stats { display:flex !important; gap:2px; width:100%; float:none !important; border-top:1px solid var(--line); padding-top:6px; } .middlecol .post .post_foot_actions > .stats .stat-item, .middlecol .post .post_foot_actions > .stats .btn { flex:1; display:flex !important; align-items:center; justify-content:center; gap:8px; padding:9px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:var(--muted) !important; font-family:var(--ff-ui); font-weight:600; font-size:13px; min-width:0; } .middlecol .post .post_foot_actions > .stats .stat-item:hover { background:var(--bg-2) !important; color:var(--text) !important; } /* like ativo -> acento */ .middlecol .post .like-btn.active, .middlecol .post .how_reacted.active, .middlecol .post .liked .like-btn { color:var(--accent) !important; } /* ========================================================================= DARK — correção de cores BASE hardcoded que não seguem os tokens. (O dark.css do tema-base foi desativado; o redesign é o único sistema de tema, por isso estes elementos precisam de mapear para os tokens em modo escuro.) ========================================================================= */ /* card de pré-visualização de link/artigo no feed (fundo branco + título #444) */ html[data-theme="dark"] .post-fetched-url, html[data-theme="dark"] .wo_post_fetch_link { background:var(--bg-2) !important; border-color:var(--line) !important; } html[data-theme="dark"] .post-fetched-url .fetched-url-text h4, html[data-theme="dark"] .post-fetched-url h4, html[data-theme="dark"] .fetched-url-text h4 { color:var(--text) !important; } html[data-theme="dark"] .post-fetched-url .fetched-url-text, html[data-theme="dark"] .post-fetched-url .fetched-url-text a, html[data-theme="dark"] .post-fetched-url .fetched-url-text b, html[data-theme="dark"] .post-fetched-url a, html[data-theme="dark"] .post-fetched-url b { color:var(--text) !important; } html[data-theme="dark"] .post-fetched-url .fetched-url-text p, html[data-theme="dark"] .post-fetched-url .fetched-url-domain, html[data-theme="dark"] .post-fetched-url small { color:var(--muted) !important; } /* widgets de sugestão do sidebar (Pages you may like / People) com nomes/meta hardcoded */ html[data-theme="dark"] .page_middle .title a, html[data-theme="dark"] .page_middle a, html[data-theme="dark"] .page_middle .user-popover, html[data-theme="dark"] .user-fetch .user-name, html[data-theme="dark"] .user-fetch .user-name a { color:var(--text) !important; } html[data-theme="dark"] .page_middle .page_catg, html[data-theme="dark"] .page_middle .info b, html[data-theme="dark"] .user-fetch .user-username { color:var(--muted) !important; } /* barra de cookies legível em ambos os modos */ html[data-theme="dark"] .cc-window { background:var(--bg-2) !important; color:var(--text) !important; } html[data-theme="dark"] .cc-window .cc-message { color:var(--text) !important; } /* botão "Got It!" da barra de cookies: acento + texto branco (ambos os modos) */ .cc-window .cc-btn.cc-dismiss, .cc-window a.cc-btn { background:var(--accent) !important; color:var(--on-accent) !important; border-radius:0 !important; border:0 !important; } /* ========================================================================= DARK — cores BASE hardcoded comuns no conteúdo (form-controls, botões, títulos de market/blog) que não seguem os tokens. Mapear para os tokens. ========================================================================= */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background:var(--bg-2) !important; color:var(--text) !important; border-color:var(--line) !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:var(--faint) !important; } html[data-theme="dark"] .btn-default { background:var(--bg-2) !important; color:var(--text) !important; border-color:var(--line-2) !important; } html[data-theme="dark"] .btn-default svg { color:var(--text) !important; stroke:var(--text) !important; } /* market: títulos e categorias de produto */ html[data-theme="dark"] .product-title a, html[data-theme="dark"] .product_row_title, html[data-theme="dark"] .product-name a, html[data-theme="dark"] .product_info a, html[data-theme="dark"] .product_info b, html[data-theme="dark"] .wo_product_row .product-name a { color:var(--text) !important; } html[data-theme="dark"] .product-cat, html[data-theme="dark"] .product-category, html[data-theme="dark"] .product_info .category, html[data-theme="dark"] .product-cat-label { color:var(--muted) !important; } html[data-theme="dark"] .product_info .category, html[data-theme="dark"] .product-cat { background:var(--bg-3) !important; } /* blog: títulos dos cards */ html[data-theme="dark"] .wow_main_blogs .art-title, html[data-theme="dark"] .wow_main_blogs .art-title a, html[data-theme="dark"] .wow_main_blogs h2, html[data-theme="dark"] .wow_main_blogs h3, html[data-theme="dark"] .wow_main_blogs h4, html[data-theme="dark"] .blog-ls-box h4, html[data-theme="dark"] .blog-ls-box .art-text h4, html[data-theme="dark"] .blog-ls-box .art-text h4 a { color:var(--text) !important; } /* badge "vendido por" sobre a imagem do produto (fundo claro translúcido) */ html[data-theme="dark"] .product_info .product-by, html[data-theme="dark"] .product-by, html[data-theme="dark"] .product-by a { background:rgba(13,11,10,.72) !important; color:var(--text) !important; } /* ============================================================ BexoPRO — Jobs board redesign (cards grid + modal) ============================================================ */ .bx-jobs { padding: 4px 2px 40px; } .bx-jobs-head { display:flex; align-items:flex-end; justify-content:space-between; margin: 6px 0 18px; } .bx-jobs-head-txt h2 { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing:-.01em; } .bx-jobs-head-txt span { color:#8b8f98; font-size:.92rem; } .bx-jobs-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:20px; } .bx-jobs-search { position:relative; flex:1 1 240px; min-width:200px; display:flex; align-items:center; } .bx-jobs-search svg { position:absolute; left:13px; color:#9aa0a8; } .bx-jobs-search input { width:100%; height:44px; border:1px solid #e6e8ec; border-radius:12px; padding:0 14px 0 40px; font-size:.95rem; background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; } .bx-jobs-search input:focus { border-color:#FF5A2C; box-shadow:0 0 0 3px rgba(255,90,44,.12); } .bx-jobs-chips { display:flex; flex-wrap:wrap; gap:6px; } .bx-chip { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; border:1px solid #e6e8ec; color:#5a5f68; font-size:.86rem; font-weight:600; background:#fff; transition:all .15s; white-space:nowrap; } .bx-chip:hover { border-color:#FF5A2C; color:#FF5A2C; } .bx-chip.active { background:#FF5A2C; border-color:#FF5A2C; color:#fff; } .bx-jobs-cat { height:44px; border:1px solid #e6e8ec; border-radius:12px; padding:0 12px; font-size:.9rem; color:#5a5f68; background:#fff; outline:none; cursor:pointer; max-width:200px; } .bx-jobs-cat:focus { border-color:#FF5A2C; } .bx-jobs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px; } .bx-job-card { background:#fff; border:1px solid #ebedf0; border-radius:16px; padding:18px; cursor:pointer; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s, border-color .15s; min-height:200px; } .bx-job-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,22,28,.10); border-color:#ffd2c4; } .bx-job-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .bx-job-logo { width:52px; height:52px; border-radius:12px; overflow:hidden; background:#f4f5f7; border:1px solid #eef0f3; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .bx-job-logo img { width:100%; height:100%; object-fit:contain; } .bx-job-logo-ph { font-weight:800; color:#FF5A2C; font-size:1.3rem; } .bx-job-type { font-size:.72rem; font-weight:700; color:#FF5A2C; background:rgba(255,90,44,.10); padding:5px 10px; border-radius:999px; text-transform:capitalize; white-space:nowrap; } .bx-job-title { font-size:1.02rem; font-weight:750; line-height:1.32; margin:0 0 8px; color:#1c1f24; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .bx-job-loc { display:flex; align-items:center; gap:5px; color:#8b8f98; font-size:.84rem; margin-bottom:8px; } .bx-job-loc svg { flex:0 0 auto; } .bx-job-loc span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bx-job-excerpt { color:#7b818b; font-size:.86rem; line-height:1.5; margin:0 0 14px; flex:1 1 auto; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .bx-job-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid #f1f2f4; padding-top:12px; } .bx-job-salary { font-weight:700; color:#1c1f24; font-size:.85rem; } .bx-job-cat { font-size:.74rem; color:#7b818b; background:#f4f5f7; padding:4px 9px; border-radius:7px; } .bx-job-view { margin-left:auto; color:#FF5A2C; font-weight:700; font-size:.82rem; opacity:0; transform:translateX(-4px); transition:all .15s; } .bx-job-card:hover .bx-job-view { opacity:1; transform:translateX(0); } .bx-jobs-empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:#9aa0a8; font-size:.95rem; } .load-produts .load-more { text-align:center; margin-top:24px; } /* Job detail modal */ #job-detail-modal .modal-body.job-detail-body { padding:0; max-height:75vh; overflow-y:auto; } .job-detail-body .wo_job_expanded, .job-detail-body .page-margin { margin:0; } .job-detail-body .wow_content { box-shadow:none; border:0; } .job-detail-body .wo_job_expanded_head { display:flex; align-items:center; gap:14px; padding:22px 24px; border-bottom:1px solid #f1f2f4; } .job-detail-body .wo_job_expanded_head .avatar img { width:60px; height:60px; border-radius:13px; object-fit:contain; background:#f4f5f7; border:1px solid #eef0f3; } .job-detail-body .wo_job_expanded_head .info h2 { font-size:1.3rem; font-weight:800; margin:2px 0 0; } .job-detail-body .wo_job_expanded_head .info h6 { color:#8b8f98; margin:0; font-weight:600; } .job-detail-body .wo_job_expanded_body { padding:20px 24px; } .job-detail-body .wo_job_expanded_body h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#9aa0a8; margin:18px 0 8px; font-weight:700; } .job-detail-body .wo_job_expanded_body h3:first-child { margin-top:0; } .job-detail-body .wo_job_expanded_body p { color:#3d424b; line-height:1.6; } .job-detail-body .wo_job_expanded_details { display:flex; align-items:center; gap:8px; color:#3d424b; font-size:.9rem; background:#f7f8f9; border-radius:10px; padding:10px 12px; } .job-detail-body .cats a { display:inline-block; background:rgba(255,90,44,.10); color:#FF5A2C; padding:5px 12px; border-radius:999px; font-size:.82rem; font-weight:600; } .job-detail-body .wo_job_expanded_foot { padding:16px 24px 22px; border-top:1px solid #f1f2f4; } .job-detail-body .wo_job_expanded_foot .btn-main { background:#FF5A2C; border-color:#FF5A2C; padding:11px 26px; border-radius:11px; font-weight:700; } /* Dark mode */ html[data-theme="dark"] .bx-jobs-search input, html[data-theme="dark"] .bx-chip, html[data-theme="dark"] .bx-jobs-cat, html[data-theme="dark"] .bx-job-card { background:#1b1e24; border-color:#2b2f37; color:#e7e9ec; } html[data-theme="dark"] .bx-job-title { color:#f0f2f4; } html[data-theme="dark"] .bx-job-logo { background:#23272e; border-color:#2b2f37; } html[data-theme="dark"] .bx-job-cat { background:#23272e; color:#aeb3bb; } html[data-theme="dark"] .bx-job-foot { border-top-color:#2b2f37; } html[data-theme="dark"] .bx-chip.active { background:#FF5A2C; color:#fff; } html[data-theme="dark"] .job-detail-body .wo_job_expanded_details { background:#23272e; color:#cfd3d9; } /* Responsive */ @media (max-width: 991px){ .bx-jobs .col-md-2.leftcol { display:none; } } @media (max-width: 560px){ .bx-jobs-grid { grid-template-columns:1fr; } .bx-jobs-filters { gap:8px; } .bx-jobs-cat { max-width:none; flex:1 1 100%; } } /* Wide content column for board pages (jobs/forum/movies/games) — sidebar + content, reuses the home grid via .middlecol but drops the feed side borders. */ .middlecol.bx-wide { border-left:0 !important; border-right:0 !important; padding:6px 24px 30px !important; } @media (max-width: 991px){ .middlecol.bx-wide { padding:6px 14px 24px !important; } } /* Jobs cards — larger, more readable text */ .bx-job-title { font-size:1.12rem !important; line-height:1.34 !important; } .bx-job-excerpt { font-size:.93rem !important; line-height:1.55 !important; } .bx-job-loc, .bx-job-loc span { font-size:.9rem !important; } .bx-job-salary { font-size:.95rem !important; } .bx-job-cat { font-size:.82rem !important; } .bx-job-type { font-size:.8rem !important; } .bx-job-view { font-size:.88rem !important; } .bx-jobs-grid { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important; } /* ===== Welcome screen language switcher (3-column, searchable) ===== */ .bexo-wl-langwrap { position:relative; display:inline-flex; } .bexo-wl-langwrap > .bexo-wl-ico { cursor:pointer; } .bexo-wl-langmenu { position:absolute; top:calc(100% + 8px); right:0; width:380px; max-width:80vw; padding:10px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; box-shadow:0 16px 44px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; } .bexo-wl-langwrap.open .bexo-wl-langmenu { opacity:1; visibility:visible; transform:translateY(0); } .bexo-wl-langsearch { position:relative; margin-bottom:8px; } .bexo-wl-langsearch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.45; pointer-events:none; } .bexo-wl-langsearch input { width:100%; padding:9px 12px 9px 34px; border:1px solid rgba(0,0,0,.12); border-radius:10px; font-size:.9rem; outline:none; background:#f6f7f9; color:#1f2630; box-sizing:border-box; transition:border-color .14s, background .14s; } .bexo-wl-langsearch input:focus { border-color:#FF5A2C; background:#fff; } .bexo-wl-langgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; max-height:264px; overflow:auto; } .bexo-wl-langopt { display:block; padding:8px 10px; border-radius:8px; font-size:.85rem; font-weight:500; color:#1f2630; text-decoration:none; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s ease; } .bexo-wl-langopt:hover { background:rgba(255,90,44,.08); color:#FF5A2C; } .bexo-wl-langopt.active { background:rgba(255,90,44,.12); color:#FF5A2C; font-weight:600; } .bexo-wl-langempty { grid-column:1 / -1; text-align:center; padding:18px 8px; opacity:.55; font-size:.85rem; } @media (max-width:480px) { .bexo-wl-langmenu { width:300px; } .bexo-wl-langgrid { grid-template-columns:repeat(2,1fr); } } body.night-mode .bexo-wl-langmenu, .night .bexo-wl-langmenu { background:#1d2127; border-color:rgba(255,255,255,.08); } body.night-mode .bexo-wl-langopt, .night .bexo-wl-langopt { color:#e8eaed; } body.night-mode .bexo-wl-langsearch input, .night .bexo-wl-langsearch input { background:#252b33; border-color:rgba(255,255,255,.12); color:#e8eaed; } /* ===== Feed posts (memes/jokes/auto content): fix oversized caption + cropped image ===== */ /* caption back to the editorial body size (base theme forces 16px on .post-description p) */ .post .post-description p, .post .post-description p span, .post .post-description > div > p { font-size:14.5px !important; font-weight:400 !important; line-height:1.62 !important; } /* show the WHOLE image — memes are often tall; never crop. Cap height, keep aspect ratio. */ .post #fullsizeimg { max-height:none !important; overflow:visible !important; text-align:center; } .post #fullsizeimg img, .post .post-file img { width:auto !important; height:auto !important; max-width:100% !important; max-height:85vh !important; min-height:0 !important; margin:0 auto !important; display:block !important; }