/* Novera Profile v0.2.0 — refinamento visual claro/escuro para Fictioneer 5 */ .profile__content:has(.novera-profile) { max-width: 1120px; margin-inline: auto; } .novera-profile { --np-accent: #2f78ff; --np-accent-hover: #1f64df; --np-accent-soft: rgba(47, 120, 255, .10); --np-accent-line: rgba(47, 120, 255, .22); --np-page: #ffffff; --np-surface: #ffffff; --np-surface-2: #f7f9fc; --np-surface-3: #eef3f9; --np-text: #101828; --np-text-soft: #344054; --np-muted: #667085; --np-border: #d9e0e8; --np-shadow: 0 12px 34px rgba(16, 24, 40, .07); --np-card-shadow: 0 4px 16px rgba(16, 24, 40, .045); color: var(--np-text); width: 100%; color-scheme: light; } /* O Fictioneer troca o atributo data-mode no elemento . */ :root[data-mode="dark"] .novera-profile, :root:not([data-mode="light"]) .novera-profile { --np-accent: #67a0ff; --np-accent-hover: #82b1ff; --np-accent-soft: rgba(103, 160, 255, .12); --np-accent-line: rgba(103, 160, 255, .28); --np-page: #0d131b; --np-surface: #111a24; --np-surface-2: #16212d; --np-surface-3: #1b2937; --np-text: #f4f7fb; --np-text-soft: #d7e0ea; --np-muted: #9eacbc; --np-border: #293746; --np-shadow: 0 16px 42px rgba(0, 0, 0, .24); --np-card-shadow: 0 7px 20px rgba(0, 0, 0, .15); color-scheme: dark; } :root[data-mode="light"] .novera-profile { --np-accent: #2f78ff; --np-accent-hover: #1f64df; --np-accent-soft: rgba(47, 120, 255, .10); --np-accent-line: rgba(47, 120, 255, .22); --np-page: #ffffff; --np-surface: #ffffff; --np-surface-2: #f7f9fc; --np-surface-3: #eef3f9; --np-text: #101828; --np-text-soft: #344054; --np-muted: #667085; --np-border: #d9e0e8; --np-shadow: 0 12px 34px rgba(16, 24, 40, .07); --np-card-shadow: 0 4px 16px rgba(16, 24, 40, .045); color-scheme: light; } .novera-profile, .novera-profile * { box-sizing: border-box; } .novera-profile__hero { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 46px) clamp(18px, 4vw, 44px) 28px; text-align: center; border: 1px solid var(--np-border); border-radius: 20px 20px 0 0; background: radial-gradient(circle at 50% -30%, var(--np-accent-soft), transparent 52%), linear-gradient(180deg, var(--np-surface), var(--np-surface-2)); color: var(--np-text); box-shadow: var(--np-shadow); } .novera-profile__hero::after { content: ""; position: absolute; inset: auto 18% 0; height: 1px; background: linear-gradient(90deg, transparent, var(--np-accent-line), transparent); } .novera-profile__eyebrow, .novera-kicker { display: inline-block; color: var(--np-accent) !important; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; } .novera-profile__identity { margin-top: 17px; display: flex; align-items: center; justify-content: center; gap: 18px; } .novera-profile__avatar img { display: block; width: 78px; height: 78px; object-fit: cover; border-radius: 999px; border: 3px solid var(--np-surface); box-shadow: 0 0 0 2px var(--np-accent), 0 8px 22px rgba(0,0,0,.15); } .novera-profile__identity-text { text-align: left; } .novera-profile__identity h1 { margin: 0 0 8px; color: var(--np-text) !important; font-size: clamp(30px, 4vw, 46px); line-height: 1.04; letter-spacing: -.02em; } .novera-profile__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--np-muted) !important; font-size: 11px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; } .novera-profile__meta span { color: inherit !important; } .novera-tabs { position: relative; z-index: 2; display: flex; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--np-border); border-top: 0; background: var(--np-surface); padding: 7px; gap: 5px; box-shadow: 0 5px 18px rgba(16, 24, 40, .035); } .novera-tab { appearance: none; flex: 1 0 auto; min-width: max-content; border: 1px solid transparent !important; border-radius: 9px; padding: 10px 15px; background: transparent !important; color: var(--np-muted) !important; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: none !important; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .novera-tab:hover { background: var(--np-accent-soft) !important; border-color: var(--np-accent-line) !important; color: var(--np-text) !important; } .novera-tab.is-active { background: var(--np-accent) !important; border-color: var(--np-accent) !important; color: #fff !important; } .novera-tab:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 2px; } .novera-panel { padding: clamp(26px, 4vw, 42px); border: 1px solid var(--np-border); border-top: 0; background: var(--np-surface); color: var(--np-text); min-height: 340px; } .novera-panel:last-child { border-radius: 0 0 20px 20px; } .novera-panel[hidden] { display: none !important; } .novera-section-heading { padding-bottom: 17px; margin-bottom: 20px; border-bottom: 1px solid var(--np-border); } .novera-section-heading h2 { margin: 6px 0 0; color: var(--np-text) !important; font-size: clamp(25px, 3.2vw, 34px); line-height: 1.15; } .novera-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .novera-stat { display: flex; min-height: 102px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 12px; border: 1px solid var(--np-border); border-radius: 13px; background: var(--np-surface-2) !important; color: var(--np-text) !important; box-shadow: var(--np-card-shadow); } .novera-stat strong { color: var(--np-accent) !important; font-size: 27px; font-weight: 800; line-height: 1; } .novera-stat span { margin-top: 8px; color: var(--np-muted) !important; font-size: 10px; line-height: 1.35; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; } .novera-card { border: 1px solid var(--np-border); border-radius: 14px; padding: 22px; background: var(--np-surface-2) !important; color: var(--np-text) !important; box-shadow: var(--np-card-shadow); } .novera-card + .novera-card { margin-top: 16px; } .novera-card h3 { margin: 4px 0 8px; color: var(--np-text) !important; font-size: 18px; } .novera-card p { margin: 0; color: var(--np-muted) !important; } .novera-card__heading { padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--np-border); } .novera-card__heading h3 { margin: 0; } .novera-welcome { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--np-accent-soft), transparent 62%), var(--np-surface-2) !important; border-color: var(--np-accent-line); } .novera-welcome::before { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; top: -55px; border-radius: 999px; background: var(--np-accent-soft); } .novera-welcome > * { position: relative; z-index: 1; } .novera-activity-list { display: grid; gap: 0; } .novera-activity-item { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(220px, 2fr) auto; gap: 14px; align-items: center; padding: 14px 2px; color: var(--np-text) !important; text-decoration: none !important; border-bottom: 1px solid var(--np-border); } .novera-activity-item:last-child { border-bottom: 0; } .novera-activity-item:hover .novera-activity-item__title { color: var(--np-accent) !important; } .novera-activity-item__title { color: var(--np-text) !important; font-weight: 800; } .novera-activity-item__text, .novera-activity-item time { color: var(--np-muted) !important; font-size: 12px; } .novera-empty { padding: 18px 2px 4px; color: var(--np-muted) !important; font-style: italic; } /* Componentes nativos do Fictioneer dentro das abas. */ .novera-native { color: var(--np-text); } .novera-native :is(h2,h3,h4,h5,h6,label,strong) { color: var(--np-text); } .novera-native p, .novera-native small, .novera-native .profile__description { color: var(--np-muted) !important; } .novera-native > .profile__account-headline, .novera-native > .profile__oauth-headline, .novera-native > .profile__skins-headline, .novera-native > .profile__actions-headline, .novera-native > .profile__discussions-headline, .novera-native > .profile__danger-headline, .novera-native > .profile__password-headline { color: var(--np-text) !important; font-size: 18px; margin-top: 30px; margin-bottom: 12px; } .novera-native > .profile__account-headline:first-of-type, .novera-native > .profile__oauth-headline:first-of-type { display: none; } .novera-native .profile__segment { border: 1px solid var(--np-border) !important; border-radius: 14px; padding: clamp(16px, 3vw, 24px); background: var(--np-surface-2) !important; color: var(--np-text) !important; box-shadow: var(--np-card-shadow); } .novera-native input[type="text"], .novera-native input[type="email"], .novera-native input[type="password"], .novera-native input[type="url"], .novera-native input[type="number"], .novera-native textarea, .novera-native select { border: 1px solid var(--np-border) !important; border-radius: 8px !important; background: var(--np-surface) !important; color: var(--np-text) !important; box-shadow: none !important; } .novera-native input::placeholder, .novera-native textarea::placeholder { color: var(--np-muted) !important; } .novera-native .button:not(._danger), .novera-native input[type="submit"].button, .novera-native button:not(._danger) { border-radius: 8px; } .novera-moderation { margin: 18px 0; } .novera-moderation .profile__segment { margin: 0; } @media (max-width: 760px) { .novera-profile__identity { flex-direction: column; gap: 14px; } .novera-profile__identity-text { text-align: center; } .novera-profile__meta { justify-content: center; } .novera-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .novera-activity-item { grid-template-columns: 1fr; gap: 5px; } } @media (max-width: 440px) { .novera-profile__hero { padding-inline: 14px; } .novera-panel { padding-inline: 14px; } .novera-stats { grid-template-columns: 1fr 1fr; } .novera-stat { min-height: 90px; } .novera-profile__avatar img { width: 72px; height: 72px; } } /* ===== v0.2.0 — Central do leitor ===== */ .novera-block-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 30px 0 14px; } .novera-block-head h3 { margin: 5px 0 0; color: var(--np-text) !important; font-size: 21px; } .novera-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 9px; border: 1px solid var(--np-border); border-radius: 999px; background: var(--np-surface-2); color: var(--np-muted) !important; font-size: 11px; font-weight: 800; } .novera-continue-grid { display: grid; gap: 14px; } .novera-reading-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 154px; overflow: hidden; border: 1px solid var(--np-border); border-radius: 15px; background: var(--np-surface-2); box-shadow: var(--np-card-shadow); } .novera-story-cover, .novera-library-card__cover { display: block; overflow: hidden; background: var(--np-surface-3); } .novera-story-cover img, .novera-library-card__cover img, .novera-story-cover__placeholder { width: 100%; height: 100%; display: block; object-fit: cover; } .novera-story-cover__placeholder { display: grid; place-items: center; min-height: 120px; background: linear-gradient(135deg, var(--np-accent-soft), var(--np-surface-3)); color: var(--np-accent) !important; font-size: 34px; font-weight: 900; } .novera-reading-card__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 19px 21px; } .novera-reading-card__story { display: inline-block; max-width: 100%; overflow: hidden; color: var(--np-text) !important; font-size: 18px; font-weight: 850; text-decoration: none !important; text-overflow: ellipsis; white-space: nowrap; } .novera-reading-card__story:hover { color: var(--np-accent) !important; } .novera-reading-card__next { margin-top: 7px; color: var(--np-muted) !important; font-size: 12px; } .novera-reading-card__next strong { color: var(--np-text) !important; } .novera-progress { height: 7px; margin: 18px 0 10px; overflow: hidden; border-radius: 999px; background: var(--np-surface-3); } .novera-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--np-accent); } .novera-reading-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--np-muted) !important; font-size: 11px; } .novera-primary-link { color: var(--np-accent) !important; font-weight: 850; text-decoration: none !important; white-space: nowrap; } .novera-primary-link:hover { color: var(--np-accent-hover) !important; } .novera-library-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .novera-library-shortcuts button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; border: 1px solid var(--np-border) !important; border-radius: 11px !important; background: var(--np-surface) !important; color: var(--np-text) !important; box-shadow: none !important; cursor: pointer; } .novera-library-shortcuts button:hover { border-color: var(--np-accent-line) !important; background: var(--np-accent-soft) !important; } .novera-library-shortcuts strong { color: var(--np-accent) !important; font-size: 17px; } .novera-library-shortcuts span { color: var(--np-muted) !important; font-size: 11px; font-weight: 750; } .novera-library-section + .novera-library-section { margin-top: 32px; padding-top: 6px; border-top: 1px solid var(--np-border); } .novera-library-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .novera-library-card { min-width: 0; color: var(--np-text) !important; text-decoration: none !important; } .novera-library-card__cover { aspect-ratio: 2 / 3; border: 1px solid var(--np-border); border-radius: 10px; box-shadow: var(--np-card-shadow); transition: transform .16s ease, border-color .16s ease; } .novera-library-card:hover .novera-library-card__cover { transform: translateY(-2px); border-color: var(--np-accent-line); } .novera-library-card__title { display: -webkit-box; margin-top: 9px; overflow: hidden; color: var(--np-text) !important; font-size: 12px; font-weight: 800; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .novera-empty-card { display: flex; flex-direction: column; gap: 5px; padding: 19px 21px; color: var(--np-muted) !important; } .novera-empty-card strong { color: var(--np-text) !important; } .novera-flash-target { animation: noveraFlash 1.1s ease; } @keyframes noveraFlash { 0%,100% { outline: 0 solid transparent; } 35% { outline: 4px solid var(--np-accent-soft); outline-offset: 4px; } } @media (max-width: 900px) { .novera-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 650px) { .novera-reading-card { grid-template-columns: 86px minmax(0, 1fr); } .novera-reading-card__footer { align-items: flex-start; flex-direction: column; } .novera-library-shortcuts { grid-template-columns: 1fr; } .novera-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 440px) { .novera-reading-card { grid-template-columns: 72px minmax(0, 1fr); } .novera-reading-card__body { padding: 15px; } .novera-reading-card__story { font-size: 15px; } .novera-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===== v0.2.1 — consistência de dados e refinamento da biblioteca ===== */ .novera-library-list { display: grid; gap: 10px; } .novera-library-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 88px; padding: 10px 12px 10px 10px; border: 1px solid var(--np-border); border-radius: 13px; background: var(--np-surface-2); box-shadow: var(--np-card-shadow); } .novera-library-row__cover { display: block; width: 62px; height: 82px; overflow: hidden; border: 1px solid var(--np-border); border-radius: 8px; background: var(--np-surface-3); } .novera-library-row__cover img, .novera-library-row__cover .novera-story-cover__placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; } .novera-library-row__body { display: flex; min-width: 0; flex-direction: column; gap: 5px; } .novera-library-row__title { overflow: hidden; color: var(--np-text) !important; font-size: 14px; font-weight: 850; text-decoration: none !important; text-overflow: ellipsis; white-space: nowrap; } .novera-library-row__title:hover { color: var(--np-accent) !important; } .novera-library-row__meta { color: var(--np-muted) !important; font-size: 11px; } .novera-library-row__action { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--np-accent-line); border-radius: 8px; background: var(--np-accent-soft); color: var(--np-accent) !important; font-size: 11px; font-weight: 850; text-decoration: none !important; white-space: nowrap; } .novera-library-row__action:hover { background: var(--np-accent) !important; color: #fff !important; } .novera-library-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .novera-library-more { margin-top: 10px; color: var(--np-muted) !important; font-size: 11px; text-align: right; } .novera-progress > span { min-width: 0; transition: width .2s ease; } .novera-reading-card__footer > span { font-variant-numeric: tabular-nums; } .novera-reading-snapshot { margin-bottom: 16px; } .novera-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .novera-snapshot-grid > div { display: flex; align-items: baseline; gap: 7px; padding: 10px 12px; border: 1px solid var(--np-border); border-radius: 10px; background: var(--np-surface); } .novera-snapshot-grid strong { color: var(--np-accent) !important; font-size: 18px; } .novera-snapshot-grid span { color: var(--np-muted) !important; font-size: 10px; font-weight: 800; text-transform: uppercase; } .novera-snapshot-list { display: grid; border-top: 1px solid var(--np-border); } .novera-snapshot-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--np-border); color: var(--np-text) !important; text-decoration: none !important; } .novera-snapshot-list a:last-child { border-bottom: 0; } .novera-snapshot-list span { font-weight: 800; } .novera-snapshot-list small { color: var(--np-muted) !important; text-align: right; } @media (max-width: 650px) { .novera-library-row { grid-template-columns: 54px minmax(0, 1fr); } .novera-library-row__cover { width: 54px; height: 72px; } .novera-library-row__action { grid-column: 2; justify-self: start; } .novera-library-row__actions { grid-column: 2; justify-content: flex-start; } .novera-snapshot-grid { grid-template-columns: 1fr; } .novera-snapshot-list a { align-items: flex-start; flex-direction: column; gap: 3px; } .novera-snapshot-list small { text-align: left; } } /* v0.3.0 — Progressão do leitor */ .novera-level-card{display:flex;gap:18px;align-items:center;margin:22px 0;padding:18px;border:1px solid var(--novera-border,#d5dfec);border-radius:14px;background:linear-gradient(135deg,rgba(48,119,255,.10),rgba(48,119,255,.025))}.novera-level-card.is-compact{margin:20px 0 28px}.novera-level-badge{width:70px;height:70px;flex:0 0 70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#3077ff;color:#fff;box-shadow:0 8px 22px rgba(48,119,255,.22)}.novera-level-badge span{font-size:8px;letter-spacing:.14em;font-weight:800}.novera-level-badge strong{font-size:25px;line-height:1}.novera-level-copy{flex:1;min-width:0}.novera-level-row,.novera-level-foot{display:flex;justify-content:space-between;gap:12px}.novera-level-row strong{font-size:15px}.novera-level-row span,.novera-level-foot{font-size:10px;opacity:.72}.novera-level-progress,.novera-achievement__progress{height:6px;border-radius:999px;background:rgba(120,140,165,.18);overflow:hidden;margin:10px 0 7px}.novera-level-progress span,.novera-achievement__progress span{display:block;height:100%;border-radius:inherit;background:#3077ff}.novera-achievement-summary{display:flex;align-items:baseline;gap:8px;margin:14px 0}.novera-achievement-summary strong{font-size:25px;color:#3077ff}.novera-achievement-summary span{font-size:12px;opacity:.72}.novera-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.novera-achievement{display:flex;gap:13px;padding:16px;border:1px solid var(--novera-border,#d5dfec);border-radius:12px;background:var(--novera-card,#f7faff)}.novera-achievement.is-locked{opacity:.68}.novera-achievement__icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:rgba(48,119,255,.10);font-size:21px;filter:grayscale(1)}.novera-achievement.is-unlocked .novera-achievement__icon{filter:none;background:rgba(48,119,255,.16)}.novera-achievement__body{flex:1;min-width:0}.novera-achievement__top{display:flex;justify-content:space-between;gap:8px;align-items:center}.novera-achievement__top strong{font-size:13px}.novera-achievement__top span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#3077ff;font-weight:800}.novera-achievement p{font-size:11px;margin:5px 0 8px;opacity:.72}.novera-achievement small{font-size:9px;opacity:.62}.dark-mode .novera-level-card,.dark-mode .novera-achievement,body.dark .novera-level-card,body.dark .novera-achievement,[data-theme="dark"] .novera-level-card,[data-theme="dark"] .novera-achievement{border-color:#2b4055;background:#142230;color:#edf5ff}@media(max-width:700px){.novera-achievement-grid{grid-template-columns:1fr}.novera-level-card{align-items:flex-start}.novera-level-row,.novera-level-foot{flex-direction:column;gap:3px}.novera-level-badge{width:58px;height:58px;flex-basis:58px}} .novera-achievement__story{display:block;margin:.15rem 0 .25rem;color:var(--np-accent,#2f78ff);font-weight:700}.novera-achievement.is-secret{filter:none}.novera-story-achievements{margin:2rem 0;padding:1.1rem 1.2rem;border:1px solid rgba(47,120,255,.22);border-radius:12px;background:rgba(47,120,255,.045)}.novera-story-achievements__head{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:.85rem}.novera-story-achievements__head span{font-size:.68rem;letter-spacing:.16em;font-weight:800;color:var(--np-accent,#2f78ff)}.novera-story-achievements__head strong{font-size:.85rem}.novera-story-achievements__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.novera-story-achievement{display:flex;gap:.7rem;align-items:center;padding:.75rem;border:1px solid rgba(127,127,127,.2);border-radius:10px;background:rgba(255,255,255,.45)}.novera-story-achievement.is-unlocked{border-color:rgba(47,120,255,.35)}.novera-story-achievement__icon{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:9px;background:rgba(47,120,255,.08);font-size:1.05rem}.novera-story-achievement div{min-width:0}.novera-story-achievement strong,.novera-story-achievement small{display:block}.novera-story-achievement small{margin-top:.15rem;opacity:.72}@media(max-width:640px){.novera-story-achievements__grid{grid-template-columns:1fr}}html[data-mode="dark"] .novera-story-achievement,body.dark-mode .novera-story-achievement,.dark-mode .novera-story-achievement{background:rgba(255,255,255,.025)} /* v0.5.1 — conquistas na página da história (Fictioneer 5.35.x) */ .novera-story-achievements { clear: both; margin: 1.5rem 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--np-accent-line, rgba(47,120,255,.24)); border-radius: 12px; background: var(--np-accent-soft, rgba(47,120,255,.045)); } .novera-story-achievements__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--np-border, rgba(127,127,127,.18)); } .novera-story-achievements__head > div { min-width: 0; } .novera-story-achievements__head span { display: block; margin-bottom: .18rem; color: var(--np-accent, #3077ff); font-size: .64rem; font-weight: 850; letter-spacing: .15em; } .novera-story-achievements__head h2 { margin: 0 !important; color: var(--np-text, inherit) !important; font-size: 1.05rem !important; line-height: 1.2; } .novera-story-achievements__head > strong { color: var(--np-muted, inherit); font-size: .72rem; font-weight: 750; white-space: nowrap; } .novera-story-achievement { align-items: flex-start; } .novera-story-achievement.is-locked { opacity: .84; } .novera-story-achievement__body { flex: 1; min-width: 0; } .novera-story-achievement__title { display: flex; align-items: center; justify-content: space-between; gap: .7rem; } .novera-story-achievement__title strong { min-width: 0; } .novera-story-achievement__title em { color: var(--np-accent, #3077ff); font-size: .58rem; font-style: normal; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .novera-story-achievement__requirement { display: block; margin-top: .28rem; color: var(--np-muted, inherit); font-size: .68rem; font-weight: 650; opacity: .9; } html[data-mode="dark"] .novera-story-achievements, body.dark-mode .novera-story-achievements, .dark-mode .novera-story-achievements, body.dark .novera-story-achievements, [data-theme="dark"] .novera-story-achievements { border-color: #2b4055; background: rgba(20,34,48,.72); color: #edf5ff; } @media (max-width: 640px) { .novera-story-achievements__head { align-items: flex-start; flex-direction: column; gap: .35rem; } .novera-story-achievement__title { align-items: flex-start; flex-direction: column; gap: .18rem; } } /* v0.6.0 — notificações de conquista durante a leitura */ .novera-achievement-toasts { position: fixed; z-index: 999999; top: 82px; right: 22px; width: min(390px, calc(100vw - 32px)); display: grid; gap: 10px; pointer-events: none; } .novera-achievement-toast { display: grid; grid-template-columns: 48px minmax(0,1fr) 28px; gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(47,120,255,.32); border-radius: 14px; background: rgba(248,251,255,.97); color: #101828; box-shadow: 0 18px 45px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(-8px) scale(.985); transition: opacity .22s ease, transform .22s ease; pointer-events: auto; overflow: hidden; } .novera-achievement-toast::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #3077ff; } .novera-achievement-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .novera-achievement-toast.is-leaving { opacity: 0; transform: translateY(-6px) scale(.99); } .novera-achievement-toast__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(48,119,255,.12); font-size: 23px; } .novera-achievement-toast__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .novera-achievement-toast__eyebrow { color: #3077ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; } .novera-achievement-toast__copy strong { color: inherit; font-size: 15px; line-height: 1.25; } .novera-achievement-toast__description { color: #667085; font-size: 12px; line-height: 1.4; } .novera-achievement-toast__link { align-self: flex-start; margin-top: 4px; color: #3077ff !important; font-size: 11px; font-weight: 800; text-decoration: none !important; } .novera-achievement-toast__close { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #667085; font: 700 20px/1 sans-serif; cursor: pointer; } .novera-achievement-toast__close:hover { background: rgba(15,23,42,.06); color: #101828; } html[data-mode="dark"] .novera-achievement-toast, body.dark-mode .novera-achievement-toast, .dark-mode .novera-achievement-toast, body.dark .novera-achievement-toast, [data-theme="dark"] .novera-achievement-toast { border-color: #2b5f9e; background: rgba(17,29,42,.97); color: #edf5ff; box-shadow: 0 18px 45px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22); } html[data-mode="dark"] .novera-achievement-toast__description, body.dark-mode .novera-achievement-toast__description, .dark-mode .novera-achievement-toast__description, body.dark .novera-achievement-toast__description, [data-theme="dark"] .novera-achievement-toast__description { color: #aebfd1; } html[data-mode="dark"] .novera-achievement-toast__close, body.dark-mode .novera-achievement-toast__close, .dark-mode .novera-achievement-toast__close, body.dark .novera-achievement-toast__close, [data-theme="dark"] .novera-achievement-toast__close { color: #aebfd1; } @media (max-width: 640px) { .novera-achievement-toasts { top: auto; right: 12px; bottom: 14px; width: calc(100vw - 24px); } .novera-achievement-toast { grid-template-columns: 42px minmax(0,1fr) 26px; padding: 12px; } .novera-achievement-toast__icon { width: 42px; height: 42px; font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .novera-achievement-toast { transition: none; } } /* v0.6.1 — correção de contraste das conquistas no modo escuro */ .novera-profile .novera-level-card { border-color: var(--np-border) !important; color: var(--np-text) !important; background: linear-gradient(135deg, var(--np-accent-soft), var(--np-surface-2)) !important; } .novera-profile .novera-level-row strong, .novera-profile .novera-level-row span, .novera-profile .novera-level-foot { color: var(--np-text) !important; } .novera-profile .novera-level-foot { opacity: .72; } .novera-profile .novera-achievement { border-color: var(--np-border) !important; background: var(--np-surface-2) !important; color: var(--np-text) !important; } .novera-profile .novera-achievement.is-locked { opacity: 1; background: var(--np-surface-3) !important; } .novera-profile .novera-achievement__top strong, .novera-profile .novera-achievement p, .novera-profile .novera-achievement small { color: var(--np-text) !important; } .novera-profile .novera-achievement p { color: var(--np-muted) !important; opacity: 1; } .novera-profile .novera-achievement small { color: var(--np-muted) !important; opacity: .9; } .novera-profile .novera-achievement__top span { color: var(--np-accent) !important; } .novera-profile .novera-achievement__progress { background: rgba(120,140,165,.20) !important; } .novera-profile .novera-achievement__progress span { background: var(--np-accent) !important; } .novera-profile .novera-achievement__icon { background: var(--np-surface) !important; color: var(--np-text) !important; } .novera-profile .novera-achievement.is-unlocked .novera-achievement__icon { background: var(--np-accent-soft) !important; } :root[data-mode="dark"] .novera-profile .novera-achievement.is-unlocked { background: #16212d !important; border-color: #314255 !important; } :root[data-mode="dark"] .novera-profile .novera-achievement.is-locked { background: #121c27 !important; border-color: #293746 !important; } :root[data-mode="dark"] .novera-profile .novera-achievement__top strong, :root[data-mode="dark"] .novera-profile .novera-achievement p, :root[data-mode="dark"] .novera-profile .novera-achievement small { text-shadow: none !important; } /* v0.6.2 — cabeçalho da conta mais compacto e navegação refinada */ @media (min-width: 761px) { .novera-profile__hero { padding: 25px 34px 22px; border-color: color-mix(in srgb, var(--np-border) 78%, transparent); background: radial-gradient(circle at 50% -45%, var(--np-accent-soft), transparent 50%), linear-gradient(180deg, var(--np-surface), var(--np-surface-2)); box-shadow: 0 9px 28px rgba(16,24,40,.055); } .novera-profile__hero::after { inset-inline: 25%; opacity: .72; } .novera-profile__eyebrow { font-size: 9px; letter-spacing: .21em; } .novera-profile__identity { margin-top: 11px; gap: 20px; } .novera-profile__avatar img { width: 86px; height: 86px; box-shadow: 0 0 0 2px var(--np-accent), 0 7px 20px rgba(0,0,0,.12); } .novera-profile__identity h1 { margin-bottom: 9px; font-size: clamp(32px, 3.3vw, 43px); letter-spacing: -.025em; } .novera-profile__meta { gap: 6px; font-size: 10.5px; letter-spacing: .035em; } .novera-tabs { justify-content: center; overflow: visible; padding: 8px 12px 9px; gap: 7px; border-color: color-mix(in srgb, var(--np-border) 78%, transparent); background: color-mix(in srgb, var(--np-surface) 96%, var(--np-surface-2)); box-shadow: 0 5px 15px rgba(16,24,40,.025); } .novera-tab { flex: 0 0 auto; min-width: 108px; padding: 9px 14px; border-radius: 10px; font-size: 11.5px; font-weight: 760; } .novera-tab.is-active { background: var(--np-accent-soft) !important; border-color: var(--np-accent-line) !important; color: var(--np-accent) !important; box-shadow: inset 0 0 0 1px rgba(47,120,255,.035) !important; } .novera-tab.is-active:hover { color: var(--np-accent) !important; } } /* ===== v0.6.7 — o plugin se adapta ao fundo nativo do Fictioneer ===== */ /* * Importante: esta versão NÃO altera body, .site, .main ou .main__background. * O fundo global continua 100% sob controle do Fictioneer. * Apenas as áreas externas do próprio Novera Profile deixam de pintar uma * grande superfície, permitindo que o fundo normal da página apareça. */ .novera-profile { background: transparent !important; background-color: transparent !important; } .novera-profile .novera-panel { background: transparent !important; background-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } /* O container do Fictioneer não é recolorido; somente removemos eventual * preenchimento aplicado diretamente no conteúdo que envolve o plugin. */ .profile__content:has(.novera-profile) > .novera-profile { background: transparent !important; background-color: transparent !important; } /* Componentes funcionais continuam com superfície própria para contraste. */ .novera-profile .novera-profile__hero, .novera-profile .novera-tabs { background-color: var(--np-surface) !important; } /* ===== v0.7.0 — fundo unificado com o Fictioneer ===== * A conta usa o template user-profile.php. O Fictioneer pinta uma segunda * camada em .main__background com --page-bg-color; nesta página apenas, * tornamos essa camada transparente para revelar o --site-bg-color nativo. * Nenhuma cor é fixada: light/dark continuam sob controle do tema. */ body.novera-profile-page .main__background { background: transparent !important; background-color: transparent !important; } body.novera-profile-page .profile__content { background-color: transparent !important; } /* ===== v0.7.1 — remove a camada estrutural completa do Fictioneer ===== * Em alguns estilos de página do Fictioneer, .main__background não pinta * apenas pelo próprio elemento: a cor de --page-bg-color também pode vir do * pseudo-elemento ::before (máscara/polígono). Por isso a v0.7.0 ainda podia * deixar o grande painel visível. Aqui neutralizamos as duas camadas somente * na página do Novera Profile e preservamos --site-bg-color, light/dark e todos * os cards internos do plugin. */ body.novera-profile-page .main__background, body.novera-profile-page .main__background::before { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Alguns estilos de página aplicam drop-shadow/filtro ao invólucro quando há * máscara ou polígono. Removemos esse efeito apenas nesta página. */ :root.has-polygon-or-mask body.novera-profile-page .main__background, :root.has-polygon-or-mask body.novera-profile-page .main__background::before { filter: none !important; } /* Garante que os wrappers estruturais do template User Profile nunca criem * uma superfície intermediária. O conteúdo funcional mantém suas próprias * superfícies (hero, tabs, cards, estatísticas etc.). */ body.novera-profile-page .main.profile, body.novera-profile-page .main.profile .main__wrapper, body.novera-profile-page .main.profile .singular__article, body.novera-profile-page .main.profile .profile__content { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* v0.8.0 — recompensa de XP das missões */ .novera-achievement__reward{margin-top:8px;font-size:.82rem;font-weight:700;line-height:1.35;color:var(--fg-600,#5f6b7a)} .novera-achievement.is-unlocked .novera-achievement__reward{color:var(--fg-700,#46515f)} :root[data-mode="dark"] .novera-achievement__reward{color:var(--fg-500,#b8c0cc)} :root[data-mode="dark"] .novera-achievement.is-unlocked .novera-achievement__reward{color:var(--fg-400,#d3d8df)} /* v0.8.1 — comentário útil */ .novera-useful-comment{appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font:inherit;margin:0;padding:0;opacity:.72} .novera-useful-comment:hover,.novera-useful-comment.is-useful{opacity:1} .novera-useful-comment.is-useful{font-weight:700} .novera-useful-comment:disabled{cursor:wait;opacity:.45} /* v0.8.2 — feedback confiável para comentários úteis */ .novera-useful-comment{display:inline-flex;align-items:center;gap:.3em;text-decoration:none} .novera-useful-comment[aria-busy="true"]{pointer-events:none;opacity:.45} .novera-useful-feedback{display:inline-block;margin-left:.55rem;font-size:.82em;font-weight:700;opacity:.92} .novera-useful-feedback.is-success{color:var(--success-500,#41b883)} .novera-useful-feedback.is-error{color:var(--red-400,#ef6a6a)} .novera-useful-global-notice{position:fixed;right:1rem;bottom:1rem;z-index:99999;max-width:min(420px,calc(100vw - 2rem));padding:.8rem 1rem;border:1px solid var(--bg-600,#39475a);border-radius:10px;background:var(--bg-800,#16202c);color:var(--fg-100,#f5f7fa);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.9rem;font-weight:700} :root:not([data-mode="dark"]) .novera-useful-global-notice{background:#fff;color:#1c2633;border-color:#d8dee7} /* v0.8.5 — selo público separado, com melhor legibilidade. */ .fictioneer-comment__badge.novera-comment-useful-badge{ display:inline-flex; align-items:center; gap:3px; background:#25885f!important; color:#fff!important; border:0!important; border-radius:4px!important; padding:0 7px!important; height:19px!important; margin-left:5px!important; font:var(--font-weight-badge,700) 11px/1 var(--ff-base,system-ui,sans-serif)!important; letter-spacing:-.02em!important; text-shadow:none!important; white-space:nowrap!important; vertical-align:middle!important; transform:translateY(-1px)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.12); } :root[data-mode="dark"] .fictioneer-comment__badge.novera-comment-useful-badge{ background:#2b966a!important; color:#fff!important; }