). A regra acima força padding 11px 12px !important e comia o recuo do ícone — devolvemos aqui. */ .page-inner .jmu-col-main input.jmu-auth-input { padding: 11px 12px 11px 40px !important; } /* botões */ .page-inner .jmu-col-main .btn, .page-inner .jmu-col-main .button, .page-inner .jmu-col-main .submit_button, .page-inner .jmu-col-main .small-button, .page-inner .jmu-col-main button[type="submit"], .page-inner .jmu-col-main input[type="submit"] { border-radius: 3px; font-family: var(--jp-sans); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .page-inner .jmu-col-main .btn-primary, .page-inner .jmu-col-main .btn-gold, .page-inner .jmu-col-main .btn-info, .page-inner .jmu-col-main .button-primary, .page-inner .jmu-col-main .submit_button, .page-inner .jmu-col-main .small-button, .page-inner .jmu-col-main button[type="submit"], .page-inner .jmu-col-main input[type="submit"], .page-inner .jmu-col-main .btn-success { border: 1px solid var(--jp-gold-deep) !important; background: var(--jp-grad-gold) !important; color: var(--jp-ink) !important; box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); padding: 12px 30px; } .page-inner .jmu-col-main .btn-primary:hover, .page-inner .jmu-col-main .button-primary:hover, .page-inner .jmu-col-main .submit_button:hover, .page-inner .jmu-col-main button[type="submit"]:hover { filter: brightness(1.06); color: var(--jp-ink) !important; } .page-inner .jmu-col-main .btn-secondary, .page-inner .jmu-col-main .btn-outline-light, .page-inner .jmu-col-main .btn-outline-secondary, .page-inner .jmu-col-main .btn-dark, .page-inner .jmu-col-main .btn-light { border: 1px solid var(--jp-line) !important; background: linear-gradient(180deg, #211a13, #171209) !important; color: var(--jp-text) !important; } .page-inner .jmu-col-main .btn-danger { border: 1px solid #8a3a24 !important; background: linear-gradient(180deg, #d0563c, #8a3a24) !important; color: #fff !important; } /* checkbox */ .page-inner .jmu-col-main .styled-checkbox, .page-inner .jmu-col-main .form-check-input { width: 18px !important; height: 18px !important; -webkit-appearance: none; appearance: none; border: 1px solid #4c3d2a !important; border-radius: 2px !important; background: #0f0c09 !important; cursor: pointer; } .page-inner .jmu-col-main .styled-checkbox:checked, .page-inner .jmu-col-main .form-check-input:checked { background: var(--jp-grad-gold) !important; border-color: var(--jp-gold-deep) !important; } .page-inner .jmu-col-main .form-switch .form-check-input { width: 34px !important; border-radius: 12px !important; } /* tabelas */ .page-inner .jmu-col-main .table, .page-inner .jmu-col-main .custom-table-2, .page-inner .jmu-col-main table { color: var(--jp-text); border: 1px solid var(--jp-line-3); border-radius: 3px; overflow: hidden; width: 100%; } .page-inner .jmu-col-main .table thead th, .page-inner .jmu-col-main .custom-table-2 thead th, .page-inner .jmu-col-main table thead th { background: #1d1710 !important; color: var(--jp-muted) !important; border-color: var(--jp-line-3) !important; font: 600 11.5px var(--jp-sans) !important; letter-spacing: .12em; text-transform: uppercase; padding: 11px 14px; } .page-inner .jmu-col-main .table td, .page-inner .jmu-col-main .custom-table-2 td, .page-inner .jmu-col-main table td { border-color: #221b13 !important; padding: 9px 14px; vertical-align: middle; } .page-inner .jmu-col-main .custom-table-2-striped tbody tr:nth-child(odd), .page-inner .jmu-col-main .table-striped > tbody > tr:nth-child(odd) { background: rgba(255,255,255,.02) !important; } .page-inner .jmu-col-main tbody tr:hover { background: rgba(240,194,74,.05) !important; } .page-inner .jmu-col-main .custom-table-2 .r, .page-inner .jmu-col-main .table .r { color: var(--jp-muted); font-weight: 600; } .page-inner .jmu-col-main .characterName a, .page-inner .jmu-col-main td a, .page-inner .jmu-col-main .table a { color: var(--jp-gold-2); } .page-inner .jmu-col-main .top-1 .r { color: #f0c24a; } .page-inner .jmu-col-main .top-2 .r { color: #cdd0d6; } .page-inner .jmu-col-main .top-3 .r { color: #d8a06a; } /* abas */ .page-inner .jmu-col-main .nav-pills .nav-link, .page-inner .jmu-col-main .nav-tabs .nav-link, .page-inner .jmu-col-main .rank-tabs-bar button, .page-inner .jmu-col-main .rank-tab { border: 1px solid var(--jp-line) !important; border-radius: 3px !important; background: #191410 !important; color: #b4a898 !important; font: 700 12px var(--jp-sans) !important; letter-spacing: .1em; text-transform: uppercase; padding: 9px 20px; } .page-inner .jmu-col-main .nav-pills .nav-link.active, .page-inner .jmu-col-main .nav-tabs .nav-link.active, .page-inner .jmu-col-main .rank-tab.active { background: var(--jp-grad-gold) !important; border-color: var(--jp-gold-deep) !important; color: var(--jp-ink) !important; } /* paginação */ .page-inner .jmu-col-main .pagination { gap: 8px; justify-content: center; } .page-inner .jmu-col-main .pagination .page-link, .page-inner .jmu-col-main .page-link { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--jp-line) !important; border-radius: 3px !important; background: #191410 !important; color: var(--jp-text) !important; font: 600 13px var(--jp-sans); } .page-inner .jmu-col-main .pagination .page-item.active .page-link { background: var(--jp-grad-gold) !important; border-color: var(--jp-gold-deep) !important; color: var(--jp-ink) !important; } .page-inner .jmu-col-main .pagination .page-item.disabled .page-link { opacity: .4; } /* alerts */ .page-inner .jmu-col-main .alert { border-radius: 3px; border: 1px solid var(--jp-line); border-left-width: 3px; font: 400 13.5px/1.5 var(--jp-sans); padding: 11px 14px; color: #d6c8ae; } .page-inner .jmu-col-main .alert-success { border-color: #3f5c22; border-left-color: #6fa32f; background: rgba(90,140,40,.1); color: #c3d4ae; } .page-inner .jmu-col-main .alert-info { border-color: #24486b; border-left-color: #3f86c4; background: rgba(40,100,160,.1); color: #aec4d6; } .page-inner .jmu-col-main .alert-warning { border-color: #6b5220; border-left-color: #d19a2c; background: rgba(180,130,40,.1); color: #d6c8ae; } .page-inner .jmu-col-main .alert-danger { border-color: #8a3a24; border-left-color: #d0563c; background: rgba(208,86,60,.12); color: #e0a08c; } /* badges / dropdown / modais */ .page-inner .jmu-col-main .badge { border-radius: 2px; font: 700 9.5px var(--jp-sans); letter-spacing: .08em; padding: 3px 6px; } .page-inner .jmu-col-main .badge.bg-success { background: #3f7a1e !important; color: #fff; } .page-inner .jmu-col-main .badge.bg-primary { background: #2f5f9e !important; } .page-inner .jmu-col-main .dropdown-menu { background: #16120e !important; border: 1px solid var(--jp-line) !important; border-radius: 4px; box-shadow: 0 14px 34px rgba(0,0,0,.7); } .page-inner .jmu-col-main .dropdown-item { color: var(--jp-text) !important; font: 500 13px var(--jp-sans); } .page-inner .jmu-col-main .dropdown-item:hover, .page-inner .jmu-col-main .dropdown-item:focus { background: #211a13 !important; color: var(--jp-gold) !important; } .page-inner .jmu-col-main .dropdown-toggle { border: 1px solid var(--jp-line) !important; background: #191410 !important; color: var(--jp-text) !important; border-radius: 3px !important; } .page-inner .modal-content { background: var(--jp-panel) !important; border: 1px solid var(--jp-line) !important; border-radius: 3px; } .page-inner .modal-header { background: var(--jp-head) !important; border-bottom: 1px solid var(--jp-line-2) !important; } .page-inner .modal-title { font-family: var(--jp-serif); color: #cbbfae; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; } .page-inner .modal-body { color: var(--jp-text); font: 400 14px/1.65 var(--jp-sans); } .page-inner .btn-close { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); opacity: .6; } /* asidebar das páginas internas */ .page-inner .jmu-col-main .asidebar .aside_block, .page-inner .jmu-col-main .aside_block { background: var(--jp-panel); border: 1px solid var(--jp-line); border-radius: 3px; margin-bottom: 18px; overflow: hidden; } .page-inner .jmu-col-main .asidebar .aside_title, .page-inner .jmu-col-main .aside_title { padding: 12px 16px; background: var(--jp-head); border-bottom: 1px solid var(--jp-line); } .page-inner .jmu-col-main .asidebar .aside_title h3, .page-inner .jmu-col-main .aside_title h3 { margin: 0; font: 600 13px var(--jp-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--jp-gold); } .page-inner .jmu-col-main .asidebar .aside_content, .page-inner .jmu-col-main .aside_content { padding: 12px 16px; } .page-inner .jmu-col-main .asidebar .list-style-1 li, .page-inner .jmu-col-main .list-style-1 li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1e1811; font: 400 13px var(--jp-sans); color: var(--jp-text); } .page-inner .jmu-col-main .aside-button { position: relative; margin-bottom: 18px; padding: 16px; border: 1px solid var(--jp-line); border-radius: 3px; background: var(--jp-panel); overflow: hidden; } .page-inner .jmu-col-main .aside-button .title_3 { font: 600 13px var(--jp-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--jp-gold); } .page-inner .jmu-col-main .aside-button .aside_button_cover { position: absolute; right: -20px; bottom: -10px; opacity: .35; pointer-events: none; } .page-inner .jmu-col-main .aside-button .aside_button_cover img { max-height: 120px; } /* misc */ .page-inner .jmu-col-main a { color: var(--jp-gold-2); } .page-inner .jmu-col-main a:hover { color: #f7d67f; } .page-inner .jmu-col-main .captcha .img img, .page-inner .jmu-col-main .captcha img { border: 1px solid var(--jp-line); border-radius: 3px; } /* ============================================================ MINHA CONTA / PAINEL (views/panel/view.phtml + accounts/info.phtml e change-*.phtml). Estrutura portada do MuXTheme, cores JustMU. Sem isto a página fica sem CSS. ============================================================ */ .page-inner .jmu-col-main .char-profile, .page-inner .jmu-col-main .acct-profile { max-width: 1024px; margin: -32px auto 0; } .page-inner .jmu-col-main .char-card { position: relative; padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 18px; background: var(--jp-panel); border: 1px solid var(--jp-line); border-radius: 3px; color: var(--jp-text); } /* boas-vindas — usado no card "Painel da Conta" do menu lateral (views/partials/home-aside.phtml), acima da carteira e das opções. */ .acct-welcome { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--jp-line); } .acct-welcome-hi { margin: 0; font: 700 16px/1.3 var(--jp-serif); letter-spacing: .01em; color: #f6e6c0; } .acct-welcome-hi b { color: var(--jp-gold); } .acct-welcome-sub { margin: 4px 0 0; font: 400 11.5px var(--jp-sans); color: var(--jp-label); } .acct-welcome-sub .is-gold { color: var(--jp-gold); font-weight: 600; } .page-inner .jmu-col-main .char-crumb { display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--jp-serif); letter-spacing: .14em; text-transform: uppercase; } .page-inner .jmu-col-main .char-crumb a { color: var(--jp-muted); } .page-inner .jmu-col-main .char-crumb a:hover { color: var(--jp-gold); } .page-inner .jmu-col-main .char-crumb .sep { color: #4a3a26; } .page-inner .jmu-col-main .char-crumb .current { color: var(--jp-gold); } .char-footer-ornament { display: flex; align-items: center; gap: 10px; justify-content: center; padding-top: 4px; } .char-footer-ornament i { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #6b5220); } .char-footer-ornament i.right { background: linear-gradient(90deg, #6b5220, transparent); } .char-footer-ornament em { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid #6b5220; } .page-title-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; } .page-title-divider i { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, #6b5220); } .page-title-divider i.right { background: linear-gradient(90deg, #6b5220, transparent); } .page-title-divider em { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--jp-gold-deep); background: rgba(240,194,74,.18); } .acct-title { display: flex; align-items: center; gap: 12px; } .acct-title-icon { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid #6b5220; display: grid; place-items: center; color: var(--jp-gold); font: 700 15px var(--jp-serif); } .acct-title-text { font: 700 20px var(--jp-serif); letter-spacing: .06em; text-transform: uppercase; color: #f6e6c0; } .acct-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .acct-tab { position: relative; padding: 13px 8px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #3b2f21; background: #1a1410; color: var(--jp-text); font: 600 11.5px var(--jp-serif); letter-spacing: .08em; text-transform: uppercase; text-align: center; transition: .2s; } .acct-tab:hover { border-color: #6b5220; color: var(--jp-gold); } .acct-tab.active { border-color: var(--jp-gold-deep); background: linear-gradient(180deg, #2a2013, #1a130b); color: var(--jp-gold); } .acct-tab.active::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: var(--jp-grad-gold); } .acct-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 15px var(--jp-serif); letter-spacing: .14em; text-transform: uppercase; color: #e8dcbb; } .acct-section-title::before { content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg); border: 1px solid var(--jp-gold-deep); background: rgba(240,194,74,.22); } .acct-panel { border: 1px solid #4a3a26; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; overflow: hidden; } .acct-row { display: flex; align-items: stretch; border-bottom: 1px solid #221b13; } .acct-row:last-child { border-bottom: 0; } .acct-row-left { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: rgba(0,0,0,.22); min-width: 0; } .acct-row-icon { width: 18px; flex: none; text-align: center; color: var(--jp-gold); font-size: 14px; } .acct-row-label { font: 400 13.5px var(--jp-sans); color: var(--jp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-row-value { flex: 1; padding: 11px 18px; text-align: right; font: 500 13.5px var(--jp-sans); color: var(--jp-text-bright); } .acct-row-value.is-gold { color: var(--jp-gold); } .acct-jewels { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #4a3a26; background: #140f0b; border-radius: 3px; overflow: hidden; } .acct-jewel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-right: 1px solid #221b13; } .acct-jewel:last-child { border-right: 0; } .acct-jewel-icon { width: 24px; height: 24px; object-fit: contain; } .acct-jewel-name { font: 400 12px var(--jp-sans); color: var(--jp-muted); } .acct-jewel-count { font: 700 16px var(--jp-serif); color: #f6e6c0; } .page-inner .jmu-col-main .acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #6b5220; background: linear-gradient(180deg, rgba(122,79,18,.4), rgba(10,7,5,.9)); color: var(--jp-gold); font: 700 11px var(--jp-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 10px 18px; border-radius: 3px; cursor: pointer; transition: .2s; } .page-inner .jmu-col-main .acct-btn:hover { border-color: var(--jp-gold); color: #f7d67f; } .page-inner .jmu-col-main .acct-btn.is-danger { border-color: var(--jp-red); background: linear-gradient(180deg, rgba(165,59,37,.32), rgba(10,7,5,.9)); color: #e8a08f; } .page-inner .jmu-col-main .acct-btn.is-danger:hover { border-color: #e2543a; color: #ffb7a8; } .acct-characters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .acct-character { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 10px; border: 1px solid #4a3a26; background: #140f0b; border-radius: 3px; transition: border-color .2s; } .acct-character:hover { border-color: #6b5220; } .acct-character-name { font: 700 13.5px var(--jp-serif); letter-spacing: .04em; color: #e8dcbb; } .acct-character-avatar { width: 84px; height: 84px; border-radius: 50%; border: 1px solid #6b5220; overflow: hidden; box-shadow: 0 0 18px rgba(0,0,0,.6); } .acct-character-avatar img { width: 100%; height: 100%; object-fit: cover; } .acct-character .acct-btn { width: 100%; } .acct-feature { display: flex; align-items: center; gap: 20px; padding: 18px 24px; border: 1px solid #4a3a26; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; } .acct-feature-icon { flex: none; border-radius: 50%; display: grid; place-items: center; } .acct-feature-icon.is-teal, .acct-feature-icon.is-gold { border: 1px solid #6b5220; background: radial-gradient(circle at 45% 40%, rgba(240,194,74,.16), rgba(10,7,5,.92)); color: var(--jp-gold); text-shadow: 0 0 16px rgba(240,194,74,.5); } .acct-feature-icon.size-lg { width: 110px; height: 110px; font-size: 42px; } .acct-feature-icon.size-md { width: 58px; height: 58px; font-size: 24px; } .acct-feature-icon.size-sm { width: 52px; height: 52px; font-size: 22px; } .acct-feature-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .acct-feature-action { flex: none; } .acct-feature-title { margin: 0; font: 700 16px var(--jp-serif); color: #e8dcbb; } .acct-feature-text { margin: 0; font: 400 13px/1.6 var(--jp-sans); color: var(--jp-label); } .acct-social-links { display: flex; gap: 10px; flex-wrap: wrap; } .acct-social-link { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid #4a3a26; background: #161009; display: grid; place-items: center; overflow: hidden; color: var(--jp-text); font: 700 13px var(--jp-serif); transition: .2s; } .acct-social-link:hover { border-color: var(--jp-gold-deep); } .acct-social-link img { width: 55%; height: 55%; object-fit: contain; } .acct-copy-btn { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: right; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .acct-copy-btn:hover { color: var(--jp-gold); } .acct-plugins-stack { display: flex; flex-direction: column; gap: 22px; } .acct-form { border: 1px solid #4a3a26; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; } .acct-form-title { margin: 0; padding: 18px 24px; border-bottom: 1px solid #4a3a26; font: 700 17px var(--jp-serif); letter-spacing: .06em; color: #f6e6c0; } .acct-form-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; } .acct-field label { display: block; margin-bottom: 8px; font: 400 13px var(--jp-sans); color: var(--jp-text); } .acct-field label .required { margin-left: 2px; color: var(--jp-red); } .page-inner .jmu-col-main .acct-input { display: block; width: 100%; padding: 12px 14px !important; border: 1px solid #35291d !important; background: #0e0b09 !important; color: #d6cdc0 !important; font: 400 14px var(--jp-sans) !important; border-radius: 3px !important; } .page-inner .jmu-col-main .acct-input:focus { border-color: var(--jp-gold-deep) !important; } .acct-form-footer { padding: 20px 24px; border-top: 1px solid #4a3a26; display: flex; justify-content: center; } .acct-form-footer .button, .acct-form-footer button { min-width: 220px; } .info-notice { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid #59492a; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; } .info-notice-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid #6b5220; display: grid; place-items: center; font: 700 20px var(--jp-serif); color: var(--jp-gold); } .info-notice-title { font: 700 13px var(--jp-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--jp-gold); margin-bottom: 4px; } .info-notice-text { font: 400 13.5px/1.5 var(--jp-sans); color: var(--jp-label); max-width: 560px; } .info-notice.is-danger { border-color: var(--jp-red); } .info-notice.is-danger .info-notice-icon { border-color: var(--jp-red); color: var(--jp-red); } .info-notice.is-danger .info-notice-title { color: var(--jp-red); } /* ---- Meus Personagens: seletor de personagem + opções (panel/character.phtml) ---- */ .char-switcher { border: 1px solid #4a3a26; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 18px; } .char-switcher-hint { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 3px; border: 1px solid #6b5220; background: linear-gradient(90deg, rgba(122,79,18,.18), rgba(10,7,5,.55)); font: 400 13.5px var(--jp-sans); color: var(--jp-text); } .char-switcher-hint-icon { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--jp-gold-deep); display: grid; place-items: center; color: var(--jp-gold); font-size: 13px; } .char-switcher-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 36px; } .char-switcher-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; } .char-switcher-name { font: 600 14px var(--jp-serif); letter-spacing: .06em; color: var(--jp-muted); transition: color .2s; } .char-switcher-item.active .char-switcher-name { color: #f6e6c0; } .char-switcher-portrait { width: 100px; height: 100px; border-radius: 6px; border: 2px solid #4a3a26; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,.6); transition: all .2s; } .char-switcher-portrait img { width: 100%; height: 100%; object-fit: cover; } .char-switcher-item:hover .char-switcher-portrait { border-color: #6b5220; } .char-switcher-item.active .char-switcher-portrait { width: 112px; height: 112px; border-color: var(--jp-gold); box-shadow: 0 0 18px rgba(240,194,74,.4), inset 0 0 10px rgba(0,0,0,.6); } .char-switcher-item.active::after { content: ""; position: absolute; bottom: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--jp-gold); box-shadow: 0 0 12px rgba(240,194,74,.8); } .char-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .page-inner .jmu-col-main .char-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 3px; border: 1px solid #3b2f21; background: #140f0b; color: var(--jp-muted); font: 600 13px var(--jp-serif); letter-spacing: .04em; transition: .2s; } .char-option::before { content: "\2726"; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid #6b5220; background: radial-gradient(circle at 35% 30%, #2a2210, #0d0b06); display: grid; place-items: center; font-size: 12px; color: var(--jp-gold); } .page-inner .jmu-col-main .char-option:hover { border-color: #6b5220; color: var(--jp-gold); } .page-inner .jmu-col-main .char-option.active { border-color: var(--jp-gold-deep); background: linear-gradient(90deg, #2a2013, #140f0b); color: #f6e6c0; } .char-option.active::after { content: ""; position: absolute; right: -5px; top: 50%; margin-top: -5px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--jp-grad-gold); } /* ---- avisos / rodapé de card usados nos serviços (reset, master-reset, limpar inv., compras...) ---- */ .page-inner .jmu-col-main .alert-callout { padding: 12px 16px; border: 1px solid var(--jp-line); border-left-width: 3px; border-radius: 3px; background: rgba(0,0,0,.22); color: #d6c8ae; font: 400 13.5px/1.5 var(--jp-sans); } .page-inner .jmu-col-main .alert-callout-primary { border-left-color: var(--jp-gold); } .page-inner .jmu-col-main .alert-callout-warning { border-left-color: var(--jp-gold-2); background: rgba(180,130,40,.1); } .page-inner .jmu-col-main .alert-callout-danger { border-left-color: var(--jp-red); background: rgba(208,86,60,.08); color: #e8b7ab; } .page-inner .jmu-col-main .alert-callout-success { border-left-color: #8cd23c; } .page-inner .jmu-col-main .card-footer { background: #100c09 !important; border-top: 1px solid var(--jp-line) !important; } .page-inner .jmu-col-main .purchase-item, .page-inner .jmu-col-main .purchase-item *, .page-inner .jmu-col-main .purchase-date { color: var(--jp-text-bright) !important; font-weight: 400; } @media (max-width: 860px) { .acct-tabs { grid-template-columns: repeat(2, 1fr); } .acct-jewels { grid-template-columns: repeat(4, 1fr); } .acct-characters { grid-template-columns: repeat(3, 1fr); } .acct-feature { flex-direction: column; align-items: flex-start; } .acct-feature-icon.size-lg { width: 84px; height: 84px; font-size: 34px; } } @media (max-width: 560px) { .acct-jewels { grid-template-columns: repeat(2, 1fr); } .acct-characters { grid-template-columns: repeat(2, 1fr); } .acct-row { flex-direction: column; } .acct-row-value { text-align: left; } } /* ============================================================ PERFIL / PERSONAGEM / GUILDA — o skin base vem do custom-page1.css (carregado antes). Aqui só reajustamos a paleta --cp-* do .char-profile do azul-esverdeado "v3" para o dourado quente do JustMU (todos os var(--cp-*) daquele arquivo herdam isto), e corrigimos os poucos pontos com cor cravada (teal/verde). ============================================================ */ .page-inner .jmu-col-main .char-profile, .page-inner .jmu-col-main .acct-profile { --cp-line: #2a2119; --cp-bg-deep: #0d0a08; --cp-panel-border: #3b2f21; --cp-panel-top: #191410; --cp-panel-bottom: #120e0b; --cp-gold-border: #6b5220; --cp-gold-line: rgba(122, 79, 18, .38); --cp-gold: #f0c24a; --cp-gold-bright: #f6e6c0; --cp-label: #a99e91; --cp-text: #c9c0b4; --cp-text-soft: #bdb3a6; --cp-text-muted: #8d8378; --cp-teal: #e8a838; /* acento: dourado no lugar do teal */ --cp-slot-border: #33281c; --cp-slot-bg: rgba(14, 10, 8, .9); } /* pontos com cor cravada no custom-page1.css */ .char-avatar-photo { background: radial-gradient(circle at 40% 30%, #2a2013, #0d0a08) !important; } .char-avatar-frame.char-avatar-online .char-avatar-ring { border-color: #8cd23c !important; box-shadow: 0 0 0 1px #24380f, inset 0 0 14px rgba(0,0,0,.8), 0 0 12px rgba(140,210,60,.5) !important; } .char-hero-right, .char-minimap { border-color: #33281c !important; } .char-location-pin { background: var(--jp-gold) !important; } .char-build-row-v3 .value { color: #8cd23c !important; } .char-switcher-hint, .char-option.active, .char-switcher-item.active .char-switcher-portrait { border-color: var(--jp-gold-deep) !important; } .char-panel-title-line, .char-panel-title-v3 { color: var(--jp-gold) !important; } /* ---- Bloquear perfil / Loja de créditos (packages) — cartões ---- */ .char-block-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .char-block-package { display: flex; flex-direction: column; border: 1px solid #4a3a26; background: linear-gradient(180deg, #191410, #120e0b); border-radius: 3px; } .char-block-package-title { margin: 0; padding: 12px 14px; border-bottom: 1px solid #33281c; font: 700 13px var(--jp-serif); letter-spacing: .04em; color: var(--jp-gold); text-align: center; } .char-block-package-body { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .char-block-package-desc { margin: 0; font: 400 13px/1.5 var(--jp-sans); color: var(--jp-text-soft); } .char-block-package-img { max-width: 100%; height: auto; } .char-block-package-footer { padding: 12px 14px; border-top: 1px solid #33281c; display: flex; flex-direction: column; align-items: center; gap: 10px; } .char-block-package-price { margin: 0; font: 700 15px var(--jp-serif); color: #f6e6c0; } .packages-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .packages-card-img { width: 100%; height: 150px; object-fit: contain; } .packages-card .char-block-package-desc { padding: 0 4px; } .packages-card-sold { font: 700 11px var(--jp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--jp-red); } .packages-card.is-sold-out { opacity: .55; } .packages-balance-panel { margin-bottom: 16px; } .packages-balance-action { padding: 12px 16px; display: flex; justify-content: flex-end; border-top: 1px solid #221b13; } .page-inner .jmu-col-main .acct-btn.is-disabled { opacity: .45; pointer-events: none; } /* WorkShop / posts — cartões de item (Bootstrap grid) */ .page-inner .jmu-col-main .post_item.card { background: linear-gradient(180deg, #191410, #120e0b); border: 1px solid var(--jp-line); border-radius: 3px; } .page-inner .jmu-col-main .post_header_cover { height: 150px; object-fit: cover; border-bottom: 1px solid var(--jp-line); } .text-vertical-ellipsis-3-lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* WorkShop e afins sem .page-header: puxa o conteudo pra perto do topo */ .page-inner .jmu-col-main .page-container-flush { margin-top: -30px; } /* ---- Equipados / inventário: deixa o CORE (morpheus.css) desenhar, como era antes do custom-page1.css — sem o "boneco" e sem as molduras do MuX. O wrapper virou .jmu-equip-render, que nenhuma folha do tema estiliza; aqui só centralizamos. Os frames ::before dos cards de mochila/guarda-asas ficam escondidos (o core já mostra tudo no blob e este tema não carrega o mux.js que moveria os itens pra esses cards). */ .page-inner .jmu-col-main .jmu-equip-render { display: flex; justify-content: center; max-width: 100%; } .page-inner .jmu-col-main .jmu-equip-render .inventory { max-width: 100%; } /* Perfil (Meus Personagens / bloqueado): só o boneco de equipados — a mochila (.items) e o inv. extra (.chunks) somem. Na Oficina eles voltam (regra mais específica logo abaixo). */ .page-inner .jmu-col-main .jmu-equip-render .inventory .main > .items, .page-inner .jmu-col-main .jmu-equip-render .inventory .chunks { display: none; } .page-inner .jmu-col-main .workshop-layout-inventory .jmu-equip-render .inventory .main > .items, .page-inner .jmu-col-main .workshop-layout-inventory .jmu-equip-render .inventory .chunks { display: block; } .page-inner .jmu-col-main .char-inventory-backpack > .items::before, .page-inner .jmu-col-main .char-inventory-wings .chunks .items::before { display: none !important; } .page-inner .jmu-col-main .char-inventory-backpack, .page-inner .jmu-col-main .char-inventory-wings { padding-bottom: 20px !important; } /* ---- Remove a moldura decorativa do MuX (borda + cantos dourados + backdrop-blur) que o custom-page1.css aplica em .page-container:has(.mux-frame) / :has(.rank-layout). As páginas de usuário já têm o painel .char-card com borda própria. ---- */ .page-inner .jmu-col-main .page-container:has(.mux-frame), .page-inner .jmu-col-main .page-container:has(.rank-layout) { padding: 8px 0 24px !important; border: 0 !important; background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; } .page-inner .jmu-col-main .page-container:has(.mux-frame)::before, .page-inner .jmu-col-main .page-container:has(.mux-frame)::after, .page-inner .jmu-col-main .page-container:has(.rank-layout)::before, .page-inner .jmu-col-main .page-container:has(.rank-layout)::after { content: none !important; display: none !important; } .page-inner .jmu-col-main .mux-frame, .page-inner .jmu-col-main .corner-frame { display: none !important; } /* char-build-equip: layout com a linha do Zen abaixo do boneco (o wrapper .jmu-equip-render substituiu .char-equip-v3, que tinha o grid-area no custom-page1.css). */ .page-inner .jmu-col-main .char-build-equip { display: grid !important; grid-template-columns: minmax(0, 340px) minmax(0, 1fr) !important; grid-template-areas: "build title" "build equip" "build zen" !important; gap: 8px 20px !important; align-items: start; } .page-inner .jmu-col-main .char-build-equip .char-build-col { grid-area: build; } .page-inner .jmu-col-main .char-build-equip .char-equip-title { grid-area: title; } .page-inner .jmu-col-main .char-build-equip .jmu-equip-render { grid-area: equip; } .page-inner .jmu-col-main .char-build-equip .char-inventory-zen { grid-area: zen; } @media (max-width: 760px) { .page-inner .jmu-col-main .char-build-equip { grid-template-columns: 1fr !important; grid-template-areas: "build" "title" "equip" "zen" !important; } } /* ============================================================ PÁGINA DE NOTÍCIAS (/posts — Posts/index.phtml). Estrutura portada do MuXTheme; usa var(--cp-*) do .char-profile (já remapeadas p/ dourado acima) + alguns overrides de teal->gold. ============================================================ */ .posts-hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; } .posts-hero-crumb { display: flex; align-items: center; gap: 8px; font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: 0.1em; } .posts-hero-crumb a { color: var(--text-soft); } .posts-hero-crumb a:hover { color: var(--gold-light); } .posts-hero-crumb .sep { color: var(--line-strong); } .posts-hero-crumb .current { color: var(--emerald-light); } .posts-hero-divider { justify-content: flex-start; width: 300px; margin-top: 10px; } .posts-hero-divider i { width: 90px; } /* Envolve abas + painéis para que o gap:22px do .char-card (flex column) não empurre as abas para longe do primeiro post — o espaçamento entre elas é 0 de propósito, para ficarem "coladas" como abas de pasta. */ .posts-wrap { display: flex; flex-direction: column; gap: 0; } /* ---------- Abas (Todos + tipos com posts) ---------- */ .posts-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .posts-tabs button { padding: 11px 30px; border: 1px solid var(--cp-panel-border); border-bottom: none; border-radius: 6px 6px 0 0; background: rgba(6, 18, 17, 0.8); color: var(--cp-text-soft); font-family: "Cinzel", Georgia, serif; font-size: 11.5px; letter-spacing: 0.12em; cursor: pointer; transition: 0.2s; } .posts-tabs button:hover { color: var(--cp-gold); } .posts-tabs button.active { border-color: var(--cp-teal); background: linear-gradient(180deg, rgba(18, 58, 51, 0.9), rgba(4, 16, 15, 0.95)); color: var(--cp-teal); } .posts-panel { display: flex; flex-direction: column; gap: 16px; } .posts-empty { padding: 40px 0; text-align: center; color: var(--cp-text-muted); } /* ---------- Selo de tipo (Notícia/Avisos/Promoções) ---------- */ .posts-tag { display: inline-block; align-self: flex-start; padding: 5px 16px; border: 1px solid rgba(63, 214, 189, 0.5); background: rgba(18, 58, 51, 0.55); color: #7fe8d6; font-family: "Cinzel", Georgia, serif; font-size: 10.5px; letter-spacing: 0.16em; } /* ---------- Post em destaque ---------- */ .posts-featured { position: relative; display: block; min-height: 360px; overflow: hidden; border: 1px solid var(--cp-gold-border); background: var(--cp-bg-deep); box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); } .posts-featured-art { position: absolute; inset: 0; } .posts-featured-art img { width: 100%; height: 100%; object-fit: cover; } .posts-featured-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 15, 0.96) 32%, rgba(4, 16, 15, 0.6) 55%, rgba(4, 16, 15, 0.1)); } .posts-featured-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; max-width: 480px; padding: 38px 42px; } .posts-featured-title { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.15; color: #e8dcbb; transition: 0.2s; } .posts-featured:hover .posts-featured-title { color: var(--cp-teal); } .posts-featured-divider { display: flex; align-items: center; gap: 8px; width: 120px; } .posts-featured-divider i { flex: 1; height: 1px; background: var(--cp-gold-border); } .posts-featured-divider em { width: 7px; height: 7px; flex: none; transform: rotate(45deg); border: 1px solid var(--cp-gold-border); } .posts-featured-desc { margin: 0; font-size: 15px; line-height: 1.65; color: var(--cp-text-soft); } .posts-read-more { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: "Cinzel", Georgia, serif; font-size: 13px; letter-spacing: 0.14em; color: var(--cp-gold); } .posts-read-more b { color: var(--cp-teal); } /* ---------- Linhas de notícias ---------- */ .posts-row { position: relative; display: flex; align-items: center; gap: 24px; min-height: 132px; overflow: hidden; padding: 18px 24px; border: 1px solid var(--cp-panel-border); background: var(--cp-bg-deep); transition: 0.2s; } .posts-row:hover { border-color: var(--cp-gold-border); } .posts-row-art { position: absolute; inset: 0; z-index: 0; } .posts-row-art img { width: 100%; height: 100%; object-fit: cover; } .posts-row-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 15, 0.97) 45%, rgba(4, 16, 15, 0.55) 75%, rgba(4, 16, 15, 0.15)); } .posts-row-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; flex: none; border-radius: 50%; border: 1px solid rgba(63, 214, 189, 0.5); background: radial-gradient(circle at 40% 35%, rgba(63, 214, 189, 0.15), rgba(4, 16, 15, 0.9)); box-shadow: 0 0 16px rgba(63, 214, 189, 0.2); color: var(--cp-teal); } .posts-row-icon .material-symbols-outlined { font-size: 24px; } .posts-row-date { position: relative; z-index: 1; flex: none; width: 60px; text-align: center; } .posts-row-date strong { display: block; font-family: "Cinzel", Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1; color: var(--cp-gold-bright); } .posts-row-date span { display: block; font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: 0.12em; color: var(--cp-gold); } .posts-row-date small { display: block; font-size: 11px; color: var(--cp-text-muted); } .posts-row-body { position: relative; z-index: 1; flex: 1; min-width: 0; } .posts-row-body .posts-tag { margin-bottom: 8px; padding: 3px 13px; font-size: 9.5px; } .posts-row-title { font-family: "Cinzel", Georgia, serif; font-size: 17px; font-weight: 700; letter-spacing: 0.03em; color: #e8dcbb; } .posts-row-desc { margin: 5px 0 0; max-width: 420px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.5; color: var(--cp-text-soft); } .posts-row-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; flex: none; transform: rotate(45deg); border: 1px solid var(--cp-gold-border); background: rgba(4, 16, 15, 0.85); color: var(--cp-gold); font-size: 16px; transition: 0.2s; } .posts-row-arrow > * { transform: rotate(-45deg); } .posts-row:hover .posts-row-arrow { border-color: var(--cp-teal); color: var(--cp-teal); } @media (max-width: 900px) { .posts-featured-body { max-width: none; padding: 28px 26px; } .posts-featured-title { font-size: 26px; } } @media (max-width: 700px) { .posts-row { flex-wrap: wrap; min-height: 0; padding: 18px; } .posts-row-date { width: auto; text-align: left; } .posts-row-body { flex-basis: 100%; order: 3; } .posts-row-arrow { display: none; } } @media (max-width: 560px) { .posts-hero-divider { width: 100%; } .posts-tabs button { padding: 10px 18px; } } /* ---- Página de notícias no estilo JustMU (não o "pastas" do MuX) ---- */ .posts-hero-crumb { font: 600 11.5px var(--jp-sans); letter-spacing: .14em; text-transform: uppercase; } .posts-hero-crumb a { color: var(--jp-muted) !important; } .posts-hero-crumb a:hover { color: var(--jp-gold) !important; } .posts-hero-crumb .sep { color: #4a3a26 !important; } .posts-hero-crumb .current { color: var(--jp-gold) !important; } .posts-wrap { display: flex; flex-direction: column; gap: 16px; } /* abas = pílulas douradas, não abas de pasta */ .posts-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .posts-tabs button { padding: 9px 20px !important; border: 1px solid var(--jp-line) !important; border-radius: 3px !important; background: #1a1410 !important; color: var(--jp-text) !important; font: 600 11px var(--jp-serif) !important; letter-spacing: .1em !important; text-transform: uppercase !important; } .posts-tabs button:hover { color: var(--jp-gold) !important; border-color: #6b5220 !important; } .posts-tabs button.active { border-color: var(--jp-gold-deep) !important; background: var(--jp-grad-gold) !important; color: var(--jp-ink) !important; } .posts-panel { display: flex; flex-direction: column; gap: 14px; } .posts-empty { padding: 36px 0; text-align: center; color: var(--jp-muted); font: 400 14px var(--jp-sans); } /* /posts: mesma lista de cards da home (jmu-news-card), sem título/hero */ .page-inner .jmu-col-main .jmu-news-page .posts-tabs { justify-content: center; margin-bottom: 24px; } .page-inner .jmu-col-main .jmu-news-list { display: flex; flex-direction: column; gap: 20px; } .page-inner .jmu-col-main .jmu-news-page .jmu-pager { margin-top: 28px; } /* ---- página de uma notícia: /post/{slug} ---- */ .page-inner .jmu-col-main .jmu-post-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 11.5px var(--jp-sans); letter-spacing: .14em; text-transform: uppercase; } .page-inner .jmu-col-main .jmu-post-crumb a { color: var(--jp-muted); } .page-inner .jmu-col-main .jmu-post-crumb a:hover { color: var(--jp-gold); } .page-inner .jmu-col-main .jmu-post-crumb span { color: #4a3a26; } .page-inner .jmu-col-main .jmu-post-crumb .current { color: var(--jp-gold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-inner .jmu-col-main .jmu-post-card { border: 1px solid var(--jp-line); border-radius: 4px; overflow: hidden; background: var(--jp-panel); box-shadow: 0 2px 14px rgba(0,0,0,.5); } .page-inner .jmu-col-main .jmu-post-cover { height: 300px; background: #0d0a08 center / cover no-repeat; border-bottom: 1px solid var(--jp-line-2); box-shadow: inset 0 -80px 90px rgba(13,10,8,.9); } .page-inner .jmu-col-main .jmu-post-main { padding: 26px 30px 30px; } .page-inner .jmu-col-main .jmu-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; font: 400 12px var(--jp-sans); color: var(--jp-muted); } .page-inner .jmu-col-main .jmu-post-date::before, .page-inner .jmu-col-main .jmu-post-views::before { content: "\2022"; margin-right: 12px; color: #4a3a26; } .page-inner .jmu-col-main .jmu-post-meta > :first-child::before { content: none; margin: 0; } .page-inner .jmu-col-main .jmu-post-title { margin: 0 0 12px; font: 700 30px/1.2 var(--jp-serif); letter-spacing: .01em; color: #f6e6c0; } .page-inner .jmu-col-main .jmu-post-lead { margin: 0 0 18px; font: italic 400 15px/1.6 var(--jp-sans); color: var(--jp-label); } .page-inner .jmu-col-main .jmu-post-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; } .page-inner .jmu-col-main .jmu-post-divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #6b5220); } .page-inner .jmu-col-main .jmu-post-divider i:last-child { background: linear-gradient(90deg, #6b5220, transparent); } .page-inner .jmu-col-main .jmu-post-divider em { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--jp-gold-deep); background: rgba(240,194,74,.18); } .page-inner .jmu-col-main .jmu-post-body { font: 400 15px/1.75 var(--jp-sans); color: var(--jp-text); } .page-inner .jmu-col-main .jmu-post-body > *:first-child { margin-top: 0; } .page-inner .jmu-col-main .jmu-post-body p { margin: 0 0 14px; } .page-inner .jmu-col-main .jmu-post-body img { max-width: 100%; height: auto; border-radius: 3px; } .page-inner .jmu-col-main .jmu-post-body h1, .page-inner .jmu-col-main .jmu-post-body h2, .page-inner .jmu-col-main .jmu-post-body h3, .page-inner .jmu-col-main .jmu-post-body h4 { color: #f0dcae; font-family: var(--jp-serif); margin: 22px 0 10px; line-height: 1.3; } .page-inner .jmu-col-main .jmu-post-body ul, .page-inner .jmu-col-main .jmu-post-body ol { margin: 0 0 14px; padding-left: 22px; } .page-inner .jmu-col-main .jmu-post-body li { margin: 4px 0; } .page-inner .jmu-col-main .jmu-post-body a { color: var(--jp-gold-2); } .page-inner .jmu-col-main .jmu-post-body a:hover { color: #f7d67f; } .page-inner .jmu-col-main .jmu-post-body blockquote { margin: 0 0 14px; padding: 8px 16px; border-left: 3px solid var(--jp-gold-deep); background: rgba(240,194,74,.05); color: var(--jp-label); } .page-inner .jmu-col-main .jmu-post-body hr { border: 0; border-top: 1px solid #2a2119; margin: 20px 0; } .page-inner .jmu-col-main .jmu-post-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; } .page-inner .jmu-col-main .jmu-post-author { margin-top: 22px; padding-top: 16px; border-top: 1px solid #2a2119; font: 400 12.5px var(--jp-sans); color: var(--jp-muted); } .page-inner .jmu-col-main .jmu-post-author strong { color: var(--jp-text-bright); font-weight: 600; } .page-inner .jmu-col-main .jmu-post .card { margin-top: 18px; } .page-inner .jmu-col-main .post_comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .page-inner .jmu-col-main .comment_info { display: flex; gap: 14px; } .page-inner .jmu-col-main .comment_author_avatar img { display: block; border-radius: 4px; border: 1px solid var(--jp-line); } .page-inner .jmu-col-main .comment_author_name { margin-bottom: 5px; color: var(--jp-text-bright); } .page-inner .jmu-col-main .comment_created { color: var(--jp-muted); } .page-inner .jmu-col-main .comment_text { font: 400 13.5px/1.6 var(--jp-sans); color: var(--jp-text); } @media (max-width: 640px) { .page-inner .jmu-col-main .jmu-post-cover { height: 190px; } .page-inner .jmu-col-main .jmu-post-main { padding: 20px 18px 24px; } .page-inner .jmu-col-main .jmu-post-title { font-size: 24px; } } /* post em destaque — card do tema, sem o hero gigante */ .posts-featured { position: relative; display: block; min-height: 0 !important; border: 1px solid #4a3a26 !important; background: linear-gradient(180deg, #191410, #120e0b) !important; border-radius: 3px !important; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.45) !important; } .posts-featured-art { position: relative !important; inset: auto !important; height: 200px; } .posts-featured-art img { width: 100%; height: 100%; object-fit: cover; } .posts-featured-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(18,14,11,.92)) !important; } .posts-featured-body { position: relative; z-index: 1; max-width: none !important; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px !important; } .posts-featured-title { font: 700 22px var(--jp-serif) !important; color: #f6e6c0 !important; } .posts-featured-desc { font: 400 14px/1.6 var(--jp-sans) !important; color: var(--jp-text-soft) !important; } .posts-featured-divider { display: none !important; } /* lista de notícias — linha simples do tema */ .posts-row { display: flex; gap: 16px; align-items: center; min-height: 0 !important; padding: 14px 16px !important; border: 1px solid var(--jp-line) !important; background: var(--jp-panel) !important; border-radius: 3px !important; } .posts-row:hover { border-color: #6b5220 !important; } .posts-row-art { flex: none; width: 92px; height: 66px; border-radius: 3px; overflow: hidden; border: 1px solid #33281c; } .posts-row-art img { width: 100%; height: 100%; object-fit: cover; } .posts-row-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--jp-gold-deep) !important; background: radial-gradient(circle at 35% 30%, #2a2210, #0d0b06) !important; display: grid; place-items: center; color: var(--jp-gold) !important; } .posts-row-body { flex: 1; min-width: 0; } .posts-row-title { font: 700 15px var(--jp-serif) !important; color: #e8dcbb !important; margin: 0 0 4px; } .posts-row-desc { font: 400 13px/1.5 var(--jp-sans) !important; color: var(--jp-label) !important; margin: 0; } .posts-row-date { flex: none; font: 400 12px var(--jp-sans) !important; color: var(--jp-muted) !important; white-space: nowrap; } .posts-row-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--jp-line) !important; color: var(--jp-gold) !important; display: grid; place-items: center; transition: .2s; } .posts-row:hover .posts-row-arrow { border-color: var(--jp-gold) !important; } .posts-tag { display: inline-block; align-self: flex-start; padding: 5px 14px; border: 1px solid var(--jp-gold-deep) !important; background: rgba(122, 79, 18, .18) !important; color: var(--jp-gold-2) !important; font: 600 10px var(--jp-serif) !important; letter-spacing: .16em !important; text-transform: uppercase; } .posts-featured .posts-tag { background: radial-gradient(circle at 40% 35%, rgba(240,194,74,.14), rgba(10,7,5,.9)) !important; color: var(--jp-gold) !important; } .posts-read-more { align-self: flex-start; padding: 9px 20px; border: 1px solid var(--jp-gold-deep) !important; border-radius: 3px !important; background: var(--jp-grad-gold) !important; color: var(--jp-ink) !important; font: 700 11px var(--jp-sans) !important; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } .posts-hero-divider em { border-color: var(--jp-gold-deep) !important; background: rgba(240,194,74,.18) !important; } .posts-hero-divider i { background: linear-gradient(90deg, transparent, #6b5220) !important; }