/* Extracted from descobrir.html (style block 1) */
html.light { --bow-bg: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-elevated) 60%, var(--color-accent-muted) 100%); }
body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); min-height: 100vh; }
.discover-loading-icon { font-size: 2rem; }
/* ── Discover Page Layout ────────────────────────────────────────── */
.page-discover { max-width: 1100px; margin: 0 auto; padding: 24px 24px 80px; }
.disc-header { display: block; margin-bottom: 2rem; padding: 1.4rem 1.6rem; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(16,22,38,0.92) 0%, rgba(20,28,46,0.86) 100%); box-shadow: 0 18px 38px rgba(3, 6, 14, 0.16); }
.page-label { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.page-label::before { content: ''; width: 20px; height: 1px; background: var(--accent); }
.page-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: var(--font-weight-bold); letter-spacing: -0.5px; margin-bottom: 8px; background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-text-secondary) 62%, var(--color-text-muted) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; gap: 12px; }
.page-title svg { flex-shrink: 0; -webkit-text-fill-color: initial; }
.page-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 32px; }
/* ── Genre Chips ─────────────────────────────────────────────────── */
.genre-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 36px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.genre-strip::-webkit-scrollbar { display: none; }
.genre-chip { scroll-snap-align: start; flex-shrink: 0; }
.genre-chip { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; background: var(--color-bg-card); transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); min-height: var(--touch-target-min); display: inline-flex; align-items: center; }
.genre-chip:hover { border-color: var(--color-interactive-border-strong); color: var(--color-accent-secondary); background: var(--color-interactive-hover); transform: translateY(-1px); }
.genre-chip.active { background: var(--color-accent-muted); color: var(--color-text-primary); border-color: var(--color-interactive-border-strong); }
/* ── Discover Sections ───────────────────────────────────────────── */
.section-disc { margin-bottom: var(--section-gap); }
.section-disc--editorial { margin-bottom: var(--section-gap-lg); }
.section-head-disc { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-label-disc { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.section-title-disc { font-family: var(--font-display); font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-heading); }
.section-lead-disc { margin: var(--space-2) 0 0; max-width: var(--content-max-width); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--text-secondary); }
.discover-highlights-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); gap: 1rem; align-items: stretch; }
.book-of-week { background: var(--bow-bg, linear-gradient(135deg, var(--card-bg, var(--color-bg-card)) 0%, var(--color-bg-elevated) 100%)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 32px; display: flex; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.book-of-week::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.10) 0%, transparent 72%); pointer-events: none; }
.bow-cover { width: 160px; height: 200px; border-radius: var(--r); background: var(--bg-surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.bow-cover img { width: 100%; height: 100%; object-fit: cover; }
.bow-meta { flex: 1; }
.bow-eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bow-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--font-weight-bold); line-height: 1.2; margin-bottom: 4px; }
.bow-author { font-size: .88rem; color: var(--text-secondary); margin-bottom: 12px; }
.bow-desc { font-size: .84rem; color: var(--text-secondary); line-height: 1.65; max-width: 460px; margin-bottom: 18px; }
.bow-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-bow-primary { background: var(--gradient-brand); color: var(--color-on-accent); font-size: .82rem; font-weight: var(--font-weight-semibold); padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); border: none; cursor: pointer; font-family: var(--font-body); display: inline-flex; align-items: center; gap: var(--space-2); transition: opacity var(--duration-fast) var(--ease-out); }
.btn-bow-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); font-size: .82rem; padding: 9px 20px; border-radius: var(--r-xl); cursor: pointer; font-family: var(--font-body); transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
/* In 2-col layout, hide synopsis and compact the banner */
.discover-highlights-row .book-of-week { padding: 22px 24px; }
.discover-highlights-row .book-of-week .bow-cover { width: 132px; height: 176px; }
.discover-highlights-row .book-of-week .bow-desc { display: none; }
.discover-highlights-row .book-of-week .bow-title { font-size: 1.2rem; }
@media (max-width: 430px) {
.book-of-week { flex-direction: column; padding: 20px; }
.bow-cover,
.discover-highlights-row .book-of-week .bow-cover { width: 128px; height: 176px; }
}
/* ── Legacy discover styles (preserved for JS-rendered content) ─── */
.discover-section {
margin-bottom: 3rem;
}
.discover-section--hero,
.discover-section--priority,
.discover-section--support {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-subtle);
padding: 1.35rem 1.35rem 1.15rem;
background: rgba(14,20,34,0.35);
}
.discover-section--hero {
border-color: var(--color-interactive-border-strong);
background: rgba(16,22,38,0.45);
}
.discover-section--priority {
border-color: var(--color-selection-border);
background: rgba(16,22,38,0.38);
}
.discover-section--support {
background: rgba(14,20,34,0.28);
}
.discover-section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--color-border-soft);
}
.discover-section-copy {
min-width: 0;
flex: 1 1 auto;
}
.discover-section-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.discover-section-eyebrow {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.discover-section-header h2 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
}
.discover-section-lead {
margin: 0.45rem 0 0;
max-width: 62ch;
font-size: 0.94rem;
line-height: 1.6;
color: var(--text-secondary);
}
.discover-section-actions {
display: inline-flex;
align-items: center;
gap: 0.6rem;
flex: 0 0 auto;
}
/* Personalized discover sections */
.discover-reason-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
margin-top: var(--space-1);
}
.reason-taste { background: var(--color-accent-muted); color: var(--color-accent-secondary); }
.reason-social { background: var(--color-success-bg); color: var(--color-success); }
.reason-trending { background: var(--color-warning-bg); color: var(--color-warning); }
.reason-surprise { background: var(--color-info-bg); color: var(--color-accent-purple); }
.reason-ai { background: linear-gradient(135deg, var(--color-accent-muted), rgba(110,99,168,0.14)); color: var(--color-accent-secondary); }
.discover-book-card .discover-reason-badge {
font-size: 0.65rem;
margin-top: 0.4rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.section-pill {
font-size: 0.7rem;
font-weight: var(--font-weight-bold);
background: var(--accent);
color: var(--color-on-accent);
padding: 0.24rem 0.65rem;
border-radius: var(--radius-full);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.section-pill--hero { background: linear-gradient(135deg, var(--color-warning), var(--color-warning)); }
.section-pill--priority { background: linear-gradient(135deg, var(--accent), var(--purple)); }
.section-pill--support { background: var(--color-accent-muted); color: var(--accent2); border: 1px solid var(--color-selection-border); }
.scroll-row {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding-bottom: 0.25rem;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.scroll-row.dragging { cursor: grabbing; user-select: none; }
.scroll-row::-webkit-scrollbar { display: none; }
/* Wrapper com fade nas laterais */
.scroll-row-wrap {
position: relative;
margin-bottom: 1.5rem;
}
.scroll-row-wrap::before,
.scroll-row-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0.25rem;
width: 48px;
pointer-events: none;
z-index: 2;
transition: opacity 0.25s;
}
.scroll-row-wrap::before {
left: 0;
background: linear-gradient(to right, var(--bg-primary) 0%, transparent 100%);
}
.scroll-row-wrap::after {
right: 0;
background: linear-gradient(to left, var(--bg-primary) 0%, transparent 100%);
}
.scroll-row-wrap.at-start::before { opacity: 0; }
.scroll-row-wrap.at-end::after { opacity: 0; }
/* Carousel dots indicator */
.carousel-dots {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 0.5rem;
padding: 0.5rem 0;
}
.carousel-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
cursor: pointer;
transition: background 0.25s, width 0.25s;
}
.carousel-dots .dot.active {
background: var(--accent2);
width: 24px;
border-radius: 4px;
}
/* ── Two-rows carousel (Para Você – desktop) ────────────────────── */
@media (min-width: 1100px) {
.scroll-row--two-rows {
display: grid;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
/* mostra exatamente 6 capas por linha */
grid-auto-columns: calc((100% - 5 * 1.5rem) / 6);
overflow-x: auto;
overflow-y: hidden;
/* anula o flex do .scroll-row */
flex-wrap: unset;
}
.scroll-row--two-rows .discover-book-card {
min-width: unset;
max-width: unset;
width: 100%;
}
.scroll-row--two-rows .discover-book-card img {
height: auto;
aspect-ratio: 2 / 3;
}
}
/* ── Para Você: botão refresh estilizado ─────────────────────────── */
.for-you-refresh-btn {
opacity: 0.65;
transition: opacity 0.2s, transform 0.35s;
}
.for-you-refresh-btn:hover {
opacity: 1;
transform: rotate(180deg);
}
.recent-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
.recent-grid .discover-book-card {
min-width: unset;
max-width: unset;
width: 100%;
}
@media (max-width: 1099px) {
.recent-grid {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 0.25rem;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.recent-grid::-webkit-scrollbar { display: none; }
.recent-grid .discover-book-card {
min-width: 140px;
max-width: 140px;
flex-shrink: 0;
}
}
.discover-book-card {
min-width: 160px;
max-width: 160px;
background: var(--bg-card);
border: 1px solid var(--color-border-soft, var(--border));
border-radius: var(--radius-cover);
overflow: hidden;
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
flex-shrink: 0;
}
.discover-book-card:hover {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: 0 18px 34px rgba(5, 10, 24, 0.18);
background: color-mix(in srgb, var(--bg-card) 92%, var(--color-accent-subtle));
}
.discover-book-card img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.28s ease, filter 0.28s ease;
transform-origin: center center;
}
.discover-book-card:hover img {
transform: scale(1.045);
filter: brightness(1.04);
}
.discover-book-card-info {
padding: 0.85rem;
transition: transform 0.2s ease;
}
.discover-book-card:hover .discover-book-card-info {
transform: translateY(-1px);
}
@media (hover: none) and (pointer: coarse) {
.discover-book-card:active {
transform: translateY(-4px) scale(1.015);
border-color: var(--accent);
box-shadow: 0 16px 28px rgba(5, 10, 24, 0.16);
background: color-mix(in srgb, var(--bg-card) 92%, var(--color-accent-subtle));
}
.discover-book-card:active img {
transform: scale(1.04);
filter: brightness(1.04);
}
.discover-book-card:active .discover-book-card-info {
transform: translateY(-1px);
}
}
.discover-book-card-info h4 {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.discover-book-card-info p {
font-size: 0.78rem;
color: var(--text-secondary);
margin-top: 0.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.scroll-nav-btn {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 0.35rem 0.6rem;
border-radius: var(--radius-xs);
cursor: pointer;
transition: 0.2s;
}
.scroll-nav-btn:hover {
color: var(--accent);
border-color: var(--accent);
}
.loading-spinner {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
}
.loading-spinner .librarian-msg {
font-size: 0.95rem;
margin-top: 0.75rem;
font-style: italic;
min-height: 1.4em;
transition: opacity 0.3s;
}
.loading-bar {
width: 160px;
height: 4px;
margin: 0.75rem auto 0;
border-radius: var(--radius-full);
background: var(--color-accent-muted);
overflow: hidden;
position: relative;
}
.loading-bar::after {
content: '';
position: absolute;
left: -40%;
top: 0;
height: 100%;
width: 40%;
background: linear-gradient(90deg, rgba(124,58,237,0.08), var(--accent), rgba(124,58,237,0.08));
animation: barSlide 1.1s infinite ease-in-out;
}
@keyframes barSlide {
0% { left: -40%; }
50% { left: 60%; }
100% { left: 110%; }
}
.featured-authors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.featured-author-card {
background: var(--bg-surface);
border: 1px solid var(--color-border-soft);
border-radius: 12px;
padding: 1.2rem 0.8rem 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: 0.2s;
text-decoration: none;
}
.featured-author-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.featured-author-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent);
background: var(--bg-surface);
}
.featured-author-avatar-placeholder {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--accent);
background: var(--bg-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: var(--accent);
flex-shrink: 0;
}
.featured-author-name {
font-size: 0.85rem;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
text-align: center;
line-height: 1.3;
}
.featured-author-meta {
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.featured-author-fav-btn {
margin-top: 0.2rem;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
padding: 0.25rem 0.6rem;
font-size: 0.75rem;
cursor: pointer;
color: var(--text-secondary);
transition: 0.2s;
display: flex;
align-items: center;
gap: 0.25rem;
}
.featured-author-fav-btn:hover,
.featured-author-fav-btn.favorited {
border-color: var(--color-accent-purple);
color: var(--color-accent-purple);
}
.search-results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.search-results-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.search-results-list .search-book-row {
display: flex;
gap: 1.5rem;
background: var(--bg-surface);
border: 1px solid var(--color-border-soft, var(--border));
border-radius: var(--radius-cover);
padding: 1rem;
align-items: flex-start;
transition: 0.2s;
}
.search-results-list .search-book-row:hover {
border-color: var(--accent);
box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.search-book-cover {
width: 140px;
height: 210px;
object-fit: cover;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.search-book-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.search-book-title {
font-size: 1.1rem;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: 0.2rem;
}
.search-book-meta {
font-size: 0.92rem;
color: var(--text-secondary);
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
}
.search-book-rating {
font-size: 0.9rem;
color: var(--warning);
font-weight: 500;
}
.search-book-synopsis {
font-size: 0.88rem;
color: var(--text-secondary);
margin-top: 0.3rem;
max-height: 3.2em;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 430px) {
.search-book-cover {
width: 80px;
height: 120px;
}
.search-book-title {
font-size: 1rem;
}
}
.btn-ver-mais {
display: block;
margin: 2rem auto 0;
padding: 0.6rem 2rem;
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--radius-xs);
cursor: pointer;
font-size: 0.9rem;
transition: 0.2s;
}
.btn-ver-mais:hover {
border-color: var(--accent);
color: var(--accent);
}
@media (max-width: 430px) {
.search-results-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.search-results-grid .discover-book-card img {
height: 180px;
}
}
.discover-filter-bar { display: none; }
.discover-add-book-bar {
display: none;
margin-top: 2rem;
padding: 1.25rem;
background: var(--bg-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--r-lg);
box-shadow: 0 14px 32px rgba(3, 6, 14, 0.12);
}
.discover-add-book-bar__text {
margin: 0 0 0.75rem;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 0.45rem;
}
.discover-add-book-bar__icon {
color: var(--accent);
margin-top: 0.08rem;
flex-shrink: 0;
}
.discover-add-book-bar__actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.discover-add-book-bar__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.25rem;
text-decoration: none;
width: 100%;
text-align: center;
}
/* ── Mobile Category Nav Strip ───────────────────────────────────── */
.discover-nav-strip {
display: none;
}
@media (max-width: 1099px) {
/* ── Mobile Category Nav Strip ────────────────────────────────── */
.discover-nav-strip {
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 8px 16px;
position: sticky;
top: 56px;
z-index: 88;
background: var(--topnav-bg);
border-bottom: 1px solid var(--border);
}
.discover-nav-strip::-webkit-scrollbar { display: none; }
.discover-nav-chip {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 14px;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: 0.15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
}
.discover-nav-chip.active,
.discover-nav-chip:active {
background: var(--color-accent-muted);
border-color: var(--accent);
color: var(--accent2);
}
/* ── Mobile page layout overrides ─────────────────────────────── */
.page-discover {
padding: 0.75rem 0.75rem calc(80px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
}
.disc-header {
display: none !important;
}
.discover-highlights-row {
grid-template-columns: 1fr;
}
.genre-strip {
display: none !important;
}
.discover-section {
margin-bottom: 2rem;
}
.discover-section--hero,
.discover-section--priority,
.discover-section--support {
padding: 1rem 1rem 0.95rem;
}
.discover-section-header {
padding: 0 0.25rem 0.6rem;
margin-bottom: 1rem;
flex-direction: column;
}
.discover-section-actions {
width: 100%;
justify-content: flex-end;
}
.discover-section-header h2 {
font-size: 1.05rem;
}
.scroll-nav-btn {
padding: 0.25rem 0.45rem;
font-size: 0.85rem;
}
.discover-book-card {
min-width: 130px;
max-width: 130px;
}
.discover-book-card img {
height: 175px;
}
.discover-book-card-info {
padding: 0.65rem;
}
.discover-book-card-info h4 {
font-size: 0.82rem;
}
.discover-book-card-info p {
font-size: var(--font-size-xs);
}
/* Featured authors → horizontal scroll on mobile */
.featured-authors-grid {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}
.featured-authors-grid::-webkit-scrollbar { display: none; }
.featured-author-card {
flex-shrink: 0;
min-width: 148px;
max-width: 148px;
align-items: flex-start;
text-align: left;
padding: 0.95rem 0.9rem;
gap: 0.65rem;
}
.featured-author-avatar,
.featured-author-avatar-placeholder {
width: 56px;
height: 56px;
box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
.featured-author-fav-btn {
display: none;
}
/* Recent grid stays as scroll row */
.recent-grid .discover-book-card {
min-width: 130px;
max-width: 130px;
}
/* Add bar compact on mobile */
#discoverAddBookBar {
border-radius: 12px !important;
margin: 0 !important;
}
}
/* ── Extra-small discover (≤ 359px) ────────────────────────────── */
@media (max-width: 359px) {
.page-discover {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.discover-book-card {
min-width: 110px;
max-width: 110px;
}
.discover-book-card img {
height: 150px;
}
.discover-book-card-info {
padding: 0.5rem;
}
.discover-book-card-info h4 {
font-size: 0.75rem;
}
.featured-author-card {
min-width: 120px;
max-width: 120px;
padding: 0.75rem 0.65rem;
}
.search-results-grid {
gap: 0.65rem;
}
}
/* ── Large screens discover (≥ 1440px) ────────────────────────── */
@media (min-width: 1440px) {
.page-discover {
max-width: 1280px;
}
.discover-book-card {
min-width: 170px;
max-width: 170px;
}
.discover-book-card img {
height: 220px;
}
.search-results-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* ── Extra-large discover (≥ 1920px) ──────────────────────────── */
@media (min-width: 1920px) {
.page-discover {
max-width: 1480px;
}
.discover-book-card {
min-width: 190px;
max-width: 190px;
}
.discover-book-card img {
height: 245px;
}
.search-results-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* ── Descobrir: componentes migrados de inline styles ──────────── */
/* Card info: precisa de position:relative para o btn-report absoluto */
.discover-book-card-info { position: relative; }
/* Botão de denúncia em cards de descoberta */
.discover-book-card-info .btn-report {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1rem;
padding: 0.2rem;
transition: color 0.2s;
}
/* Título da seção com padding-right para não sobrepor o btn-report */
.discover-book-card-info h4 { padding-right: 1.5rem; }
/* Rating / contagem */
.discover-rating-row {
font-size: var(--font-size-xs);
color: var(--text-primary);
margin-top: 0.3rem;
display: flex;
align-items: center;
gap: 0.2rem;
}
.discover-rating-star { color: var(--warning); font-size: var(--font-size-xs); }
.discover-rating-count { color: var(--text-secondary); font-size: var(--font-size-xs); }
/* Truncar autor em uma linha */
.discover-book-card-info p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.2rem;
}
/* Amigo que leu */
.discover-friend-credit { font-size: var(--font-size-xs); color: var(--accent2); }
/* Section header nav buttons row */
.discover-section-nav { display: flex; gap: 0.5rem; }
/* Seção sem título: sem margin extra */
.discover-section--no-title { margin-bottom: 0.5rem; }
/* Chip de gênero na barra de navegação */
.genre-chip-icon { font-size: .9em; opacity: .8; }
/* Refine bar */
.refine-bar { margin-bottom: 1rem; }
.refine-toggle-btn {
background: none;
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 0.4rem 0.9rem;
border-radius: var(--radius-xs);
cursor: pointer;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.refine-fields-wrap {
display: flex;
gap: 0.75rem;
margin-top: 0.75rem;
flex-wrap: wrap;
align-items: flex-end;
}
.refine-col {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.refine-col label { font-size: 0.78rem; color: var(--text-secondary); }
.refine-col input,
.refine-col select {
padding: 0.45rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
background: var(--bg-surface);
color: var(--text-primary);
font-size: 0.88rem;
}
.refine-col--author input,
.refine-col--publisher input { width: 180px; }
.refine-col--genre input,
.refine-col--language input { width: 160px; }
.refine-col--year input { width: 90px; }
.refine-col--sort select { min-width: 170px; }
.refine-apply-btn {
padding: 0.45rem 1rem;
border: none;
border-radius: var(--radius-xs);
background: var(--accent);
color: var(--color-on-accent);
cursor: pointer;
font-size: 0.88rem;
font-weight: var(--font-weight-semibold);
}
.refine-clear-btn {
padding: 0.45rem 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.85rem;
}
/* Search result header */
.search-result-header {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-result-count { color: var(--text-secondary); }
.search-clear-btn {
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-xs);
margin-left: auto;
}
/* Discover empty state (no content) */
.discover-empty-state {
text-align: center;
padding: 3rem 1rem 2rem;
}
.discover-empty-state__icon {
font-size: 3rem;
color: var(--accent);
opacity: 0.65;
display: block;
margin-bottom: 1rem;
}
.discover-empty-state__title {
margin: 0 0 0.5rem;
color: var(--text-primary);
font-size: 1.2rem;
}
.discover-empty-state__text {
color: var(--text-secondary);
margin: 0 0 1.5rem;
max-width: 38ch;
margin-inline: auto;
line-height: 1.6;
}
/* Error state (search failed) */
.discover-error-state {
text-align: center;
padding: 3rem;
color: var(--text-secondary);
}
.discover-error-state__icon {
font-size: 3rem;
display: block;
margin-bottom: 1rem;
opacity: 0.5;
}
.discover-error-state__title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.discover-error-state__hint { font-size: 0.85rem; margin-top: 0.75rem; }
.discover-error-state__link-btn {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
font-size: 0.85rem;
padding: 0;
}
/* Empty search results */
.discover-no-results {
text-align: center;
padding: 3rem 1rem;
color: var(--text-secondary);
}
.discover-no-results__icon {
font-size: 3rem;
display: block;
margin-bottom: 1rem;
opacity: 0.65;
}
.discover-no-results__title { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.discover-no-results__hint { font-size: 0.88rem; margin: 0 auto 0.75rem; max-width: 46ch; }
.discover-no-results__suggestion { font-size: 0.9rem; margin-top: 0.75rem; }
.discover-suggestion-btn {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
font-size: 0.9rem;
padding: 0;
}
/* Editorial book-of-week variant (purple) */
.book-of-week--editorial { border-color: rgba(168, 85, 247, .45); }
.bow-cover--editorial { border-color: rgba(168, 85, 247, .3); }
.bow-eyebrow--purple { color: var(--purple); }
.btn-bow-primary--editorial { background: linear-gradient(135deg, var(--purple), var(--accent)); }
/* Heading icons color variants */
.icon-warning { color: var(--warning); }
.icon-accent2 { color: var(--accent2); }
.icon-accent { color: var(--accent); }
.icon-purple { color: var(--purple); }
.icon-fire { color: var(--color-warning); }
/* Card cover link wrappers */
.discover-book-card > a { display: block; }
.search-book-cover-link { display: block; flex-shrink: 0; }
.search-book-title a { text-decoration: none; color: inherit; }
/* Librarian message */
.librarian-msg-standalone { text-align: center; padding: 3rem; color: var(--text-secondary); }
/* Rating / score single rows */
.discover-rating-single { margin-top: 0.2rem; }
.discover-score-row { margin-top: 0.2rem; }
/* Linha autor + rating inline (Para você) */
.discover-author-rating-row {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.2rem;
min-width: 0;
}
.discover-author-cell {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.78rem;
color: var(--text-secondary);
}
.discover-rating-inline {
flex-shrink: 0;
font-size: 0.78rem;
color: var(--text-secondary);
white-space: nowrap;
}
.discover-rating-inline .discover-rating-star { color: var(--color-warning); font-size: inherit; }
/* Autor clicável nos cards de descoberta */
.discover-author-link {
color: var(--color-accent-primary);
text-decoration: none;
font-size: inherit;
transition: color 0.15s;
}
.discover-author-link:hover,
.discover-author-link:focus-visible { color: var(--color-accent-secondary); text-decoration: underline; }
/* Barra de compatibilidade */
.discover-score-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.45rem;
cursor: default;
}
.discover-score-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0.22rem 0.5rem;
border-radius: var(--radius-full);
border: 1px solid var(--color-border-subtle);
background: var(--color-surface-subtle);
color: var(--text-secondary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
}
.discover-score-bar-track {
flex: 1;
height: 5px;
border-radius: 99px;
background: var(--border);
overflow: hidden;
}
.discover-score-bar-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, var(--accent2), var(--accent));
position: relative;
overflow: hidden;
}
.discover-score-bar-fill::after {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
animation: score-bar-shimmer 2.2s ease-in-out infinite;
}
.discover-score-wrap--low .discover-score-pill {
color: var(--text-muted);
background: var(--color-surface-subtle);
}
.discover-score-wrap--medium .discover-score-pill {
color: var(--color-warning);
border-color: rgba(245, 158, 11, 0.22);
background: rgba(245, 158, 11, 0.12);
}
.discover-score-wrap--high .discover-score-pill {
color: var(--color-success);
border-color: rgba(34, 197, 94, 0.22);
background: rgba(34, 197, 94, 0.12);
}
.discover-score-bar-fill--low {
background: linear-gradient(90deg, rgba(148, 163, 184, 0.75), rgba(124, 58, 237, 0.55));
}
.discover-score-bar-fill--medium {
background: linear-gradient(90deg, var(--color-warning), var(--color-warning));
}
.discover-score-bar-fill--high {
background: linear-gradient(90deg, var(--color-success), var(--accent));
box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
}
.discover-score-wrap--low .discover-score-bar-fill::after {
opacity: 0.35;
}
.discover-score-wrap--medium .discover-score-bar-fill::after {
opacity: 0.6;
}
.discover-score-wrap--high .discover-score-bar-fill::after {
opacity: 0.9;
}
@keyframes score-bar-shimmer {
0% { left: -60%; }
100% { left: 110%; }
}
.discover-score-label {
font-size: 0.68rem;
color: var(--text-secondary);
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
font-weight: var(--font-weight-bold);
}
/* Heading genre label (em tag inside h2) */
.heading-genre-label { font-size: 0.8rem; font-weight: normal; color: var(--text-muted); }
/* ── Login Modal (extracted from inline styles) ──────────────────────────── */
.login-modal-overlay {
background: rgba(0,0,0,0.85);
z-index: var(--z-loader);
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.login-modal-box {
max-width: 400px;
padding: 2rem;
width: 90%;
text-align: center;
position: relative;
}
.login-modal-icon {
font-size: 3rem;
color: var(--accent);
margin-bottom: 1rem;
}
.login-modal-title {
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.login-modal-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.login-modal-input {
width: 100%;
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--border);
background: rgba(0,0,0,0.2);
color: var(--text-primary);
font-size: 1rem;
text-align: center;
}
html.light .login-modal-input {
background: rgba(255,255,255,0.6);
}
.login-modal-submit {
padding: 1rem;
justify-content: center;
}