/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* === Accessibility helpers === */
/* Skip-to-content link — hidden until focused via keyboard. Required for
WCAG 2.4.1 (Bypass Blocks). Tab from the address bar to reveal it. */
.skip-to-content {
position: absolute;
top: -100px;
left: 16px;
padding: 10px 16px;
background: var(--brand);
color: #fff;
font-weight: 700;
border-radius: 8px;
z-index: 9999;
text-decoration: none;
transition: top .15s;
}
.skip-to-content:focus { top: 16px; outline: 3px solid #fff; outline-offset: 2px; }
/* Visible focus ring for keyboard navigation. The browser's default ring is
often hidden by transparent borders on buttons; this brings it back. */
:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
/* Don't show the ring for mouse clicks (less visual noise) */
:focus:not(:focus-visible) { outline: none; }
/* Screen-reader-only utility class */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 0 0 .5em; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }
:root {
--brand: #1a8754;
--brand-dark: #0f6b3f;
--brand-light: #e8f5ee;
--brand-accent: #00c277;
--ink: #0d1f2d;
--ink-2: #3a4a5b;
--line: #e6eaee;
--line-2: #d4dade;
--bg: #fafbfb;
--bg-soft: #f3f6f8;
--surface: #ffffff; /* white surfaces (cards, panels, header) */
--surface-2: #f3f6f8; /* subtle nested surfaces, same as --bg-soft */
--overlay-shadow: 13, 31, 45; /* base for rgba shadows */
--warning: #d97706;
--danger: #dc2626;
--shadow-sm: 0 1px 2px rgba(var(--overlay-shadow), 0.05), 0 1px 3px rgba(var(--overlay-shadow), 0.06);
--shadow-md: 0 4px 6px rgba(var(--overlay-shadow), 0.05), 0 10px 24px rgba(var(--overlay-shadow), 0.06);
--shadow-lg: 0 20px 40px rgba(var(--overlay-shadow), 0.08);
--radius: 10px;
--radius-lg: 16px;
}
/* Dark theme — applied when */
/* Brand colors come from the inline theme-vars block (per-preset dark variants).
Static defaults below are the green fallback if no inline CSS is emitted. */
html[data-theme="dark"] {
--brand: #2dba74;
--brand-dark: #1f9c5e;
--brand-light: #143824;
--ink: #f1f5f9; /* near-white for text */
--ink-2: #94a3b8; /* muted text */
--line: #2a3a52;
--line-2: #3f5170;
--bg: #0f1820; /* page background */
--bg-soft: #1a2535; /* slightly lighter for nested */
--surface: #19232f; /* cards, panels */
--surface-2: #232f44; /* nested cards */
--overlay-shadow: 0, 0, 0;
}
/* Set base body bg/text from CSS vars so dark theme propagates everywhere */
body { background: var(--bg); color: var(--ink); }
/* Dark theme overrides for hardcoded white backgrounds */
html[data-theme="dark"] .site-header { background: rgba(25, 35, 47, 0.92); }
html[data-theme="dark"] .card-tile,
html[data-theme="dark"] .home-card-mini,
html[data-theme="dark"] .home-tile,
html[data-theme="dark"] .home-pillar,
html[data-theme="dark"] .best-cat-card,
html[data-theme="dark"] .best-winner,
html[data-theme="dark"] .best-runner,
html[data-theme="dark"] .home-loans-preview,
html[data-theme="dark"] .rec-quiz,
html[data-theme="dark"] .rec-result-card,
html[data-theme="dark"] .rec-alt,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-featured,
html[data-theme="dark"] .post-content .imported-post-card,
html[data-theme="dark"] .post-content .imported-post-image,
html[data-theme="dark"] .compare-table,
html[data-theme="dark"] .compare-table tr,
html[data-theme="dark"] .compare-slot,
html[data-theme="dark"] .filter-trigger,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .cards-results-header,
html[data-theme="dark"] .compare-bar,
html[data-theme="dark"] .home-cta-final,
html[data-theme="dark"] .loan-result,
html[data-theme="dark"] .loan-edit-bar,
html[data-theme="dark"] .loan-simulator,
html[data-theme="dark"] .loan-glossary,
html[data-theme="dark"] .nav-dropdown-menu,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .chatbot-panel,
html[data-theme="dark"] .cc-banner,
html[data-theme="dark"] .cc-modal-panel,
html[data-theme="dark"] .push-bar,
html[data-theme="dark"] .admin-form,
html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .admin-metric,
html[data-theme="dark"] .admin-quick,
html[data-theme="dark"] .admin-post-list,
html[data-theme="dark"] .admin-posts-grid .admin-post-card,
html[data-theme="dark"] .admin-search-bar,
html[data-theme="dark"] .admin-empty,
html[data-theme="dark"] .admin-stat,
html[data-theme="dark"] .admin-loans-list,
html[data-theme="dark"] .admin-toast,
html[data-theme="dark"] .theme-color-card,
html[data-theme="dark"] .theme-preset-card,
html[data-theme="dark"] .theme-asset-card,
html[data-theme="dark"] .theme-preview-header,
html[data-theme="dark"] .home-hero-chip,
html[data-theme="dark"] .form-checkboxes label,
html[data-theme="dark"] .admin-form input[type="text"],
html[data-theme="dark"] .admin-form input[type="email"],
html[data-theme="dark"] .admin-form input[type="url"],
html[data-theme="dark"] .admin-form input[type="password"],
html[data-theme="dark"] .admin-form input[type="number"],
html[data-theme="dark"] .admin-form select,
html[data-theme="dark"] .admin-form textarea,
html[data-theme="dark"] .admin-form input[type="color"],
html[data-theme="dark"] .filters input, html[data-theme="dark"] .filters select,
html[data-theme="dark"] .compare-add-select, html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .loan-field select, html[data-theme="dark"] .loan-edit-input input,
html[data-theme="dark"] .loan-sort select, html[data-theme="dark"] .rec-option {
background: var(--surface);
color: var(--ink);
border-color: var(--line);
}
html[data-theme="dark"] .home-hero,
html[data-theme="dark"] .home-featured,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .rec-hero,
html[data-theme="dark"] .post-hero,
html[data-theme="dark"] .loan-hero,
html[data-theme="dark"] .loan-results-hero,
html[data-theme="dark"] .best-hero,
html[data-theme="dark"] .best-cat-hub,
html[data-theme="dark"] .home-loans-promo {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
}
/* Content sections — much subtler tint so tiles read clearly */
html[data-theme="dark"] .home-tiles-section,
html[data-theme="dark"] .home-pillars {
background: linear-gradient(180deg, color-mix(in srgb, var(--brand-light) 35%, transparent) 0%, transparent 100%);
}
html[data-theme="dark"] .admin-shell { background: var(--bg); }
html[data-theme="dark"] .admin-page-list-head,
html[data-theme="dark"] .admin-post-list-head,
html[data-theme="dark"] .admin-loans-head,
html[data-theme="dark"] .card-list-row.header,
html[data-theme="dark"] .compare-table thead,
html[data-theme="dark"] .post-content table thead th {
background: var(--surface-2);
}
html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] .acc-spec,
html[data-theme="dark"] .loan-detail-row,
html[data-theme="dark"] .admin-post-row:hover,
html[data-theme="dark"] .compare-table tbody tr:hover,
html[data-theme="dark"] .post-content table tbody tr:hover {
background: var(--surface-2);
}
html[data-theme="dark"] .home-tile-icon,
html[data-theme="dark"] .home-pillar-icon,
html[data-theme="dark"] .acc-chip.is-yes,
html[data-theme="dark"] .blog-post-cat,
html[data-theme="dark"] .admin-post-cat-inline,
html[data-theme="dark"] .post-tag,
html[data-theme="dark"] .nav-dd-icon {
background: var(--brand-light);
color: var(--brand);
}
html[data-theme="dark"] .home-hero-card-main,
html[data-theme="dark"] .home-hero-card-accent,
html[data-theme="dark"] .home-hero-card-bg {
/* Cards have own gradient backgrounds — keep as-is */
}
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .site-footer {
background: var(--surface);
border-color: var(--line);
}
html[data-theme="dark"] .admin-bulk-bar { color: #fff; } /* always white on green */
/* Smooth color transitions on theme switch */
body, .site-header, .card-tile, .home-card-mini, .best-cat-card, .compare-table,
.rec-quiz, .rec-result-card, .rec-alt, .blog-card, .blog-featured, .post-content .imported-post-card,
.cc-banner, .cc-modal-panel, .push-bar, .home-loans-preview, .home-pillar, .home-tile,
.loan-result, .loan-edit-bar, .loan-simulator, .compare-bar,
.admin-form, .admin-panel, .admin-metric, .admin-quick, .admin-post-list, .admin-post-row,
.theme-color-card, .theme-preset-card, .theme-asset-card, .nav-dropdown-menu, .mobile-menu,
.compare-slot, .filter-trigger, .filters, .admin-bulk-bar {
transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* === Layout === */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* === Header === */
.site-header {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: saturate(180%) blur(10px);
background: rgba(255,255,255,0.92);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.logo-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
border-radius: 9px;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.04em;
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav > a { color: var(--ink-2); font-weight: 500; font-size: 0.95rem; transition: color .15s; }
.main-nav > a:hover { color: var(--brand); }
/* Theme switch (sun/moon toggle) */
.theme-switch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
position: relative;
}
.theme-switch:hover { border-color: var(--brand); color: var(--brand); }
.theme-switch svg { transition: transform .35s cubic-bezier(.34, 1.2, .64, 1), opacity .25s; }
.theme-switch .theme-icon-moon { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-switch .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-switch .theme-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
html[data-theme="dark"] .theme-switch .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-switch-mobile {
width: auto;
padding: 8px 16px;
border-radius: 999px;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
}
.theme-switch-label { display: inline; }
/* === Nav dropdown === */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 0;
font: inherit;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: color .15s;
}
.nav-dropdown-trigger:hover { color: var(--brand); }
.nav-dropdown-chevron { transition: transform .2s; }
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(4px);
min-width: 280px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(13, 31, 45, 0.12), 0 2px 6px rgba(13, 31, 45, 0.05);
padding: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s, transform .18s, visibility .18s;
z-index: 110;
}
.nav-dropdown-menu::before {
/* invisible hover bridge so cursor can travel from trigger to menu */
content: '';
position: absolute;
top: -14px; left: 0; right: 0;
height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--ink);
font-size: 0.9rem;
text-decoration: none;
transition: background .15s;
}
.nav-dropdown-menu a:hover { background: var(--brand-light); }
.nav-dd-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 7px;
font-weight: 700;
font-size: 0.95rem;
flex-shrink: 0;
}
.nav-dropdown-menu a:hover .nav-dd-icon { background: var(--brand); color: #fff; }
.nav-dd-text { display: flex; flex-direction: column; line-height: 1.3; }
.nav-dd-text .muted { font-size: 0.75rem; font-weight: 400; margin-top: 1px; }
.nav-dropdown-divider {
height: 1px;
background: var(--line);
margin: 6px 4px;
}
.nav-dropdown-label {
display: block;
padding: 6px 12px 4px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.nav-dd-all { font-weight: 600; color: var(--brand-dark); }
/* ============================================================
Mobile hamburger menu (hidden on desktop)
============================================================ */
.mobile-menu-trigger { display: none; }
.mobile-menu-backdrop { display: none; }
.mobile-menu { display: none; }
.mobile-menu[hidden] { display: none; }
/* === Buttons === */
.btn[hidden] { display: none; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px;
border: 1px solid transparent;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
background: var(--brand);
color: #fff;
cursor: pointer;
transition: all .18s ease;
white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* === Hero === */
.hero {
padding: 80px 0 56px;
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
text-align: center;
}
.hero h1 { font-size: 3rem; max-width: 760px; margin: 0 auto 16px; }
.hero p.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 620px; margin: 0 auto 32px; }
.hero-badges { display: inline-flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.9rem; }
.hero-badge::before { content: '✓'; color: var(--brand); font-weight: 700; }
/* === Filter trigger (mobile only) === */
.filter-trigger {
display: none;
width: 100%;
align-items: center;
gap: 10px;
height: 46px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
color: var(--ink-2);
font-size: 0.92rem;
cursor: pointer;
box-shadow: var(--shadow-sm);
margin-bottom: 16px;
font-family: inherit;
text-align: left;
transition: border-color .15s, box-shadow .15s;
}
.filter-trigger svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.filter-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-trigger-badge {
background: var(--brand); color: #fff; font-size: 0.7rem; font-weight: 700;
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
}
.filter-trigger-badge[hidden] { display: none; }
.filter-trigger:hover { border-color: var(--brand); }
.filter-trigger:active { transform: scale(0.99); }
.filter-backdrop {
position: fixed; inset: 0;
background: rgba(13, 31, 45, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .25s;
z-index: 199;
}
.filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
.filter-sheet-header { display: none; }
/* === Filters === */
.filters {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
margin-bottom: 24px;
box-shadow:
0 1px 2px rgba(var(--overlay-shadow), 0.04),
0 12px 32px rgba(var(--overlay-shadow), 0.08);
position: sticky;
top: 80px;
z-index: 50;
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr auto auto;
gap: 10px;
align-items: center;
}
.filters::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--brand) 0%, transparent 40%, transparent 60%, var(--brand) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.35;
pointer-events: none;
}
.filters input[type="text"], .filters select {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 10px;
font-size: 0.9rem;
font-family: inherit;
background: var(--bg-soft);
color: var(--ink);
transition: border-color .15s, box-shadow .15s, background .15s;
-webkit-appearance: none;
appearance: none;
}
.filters input[type="text"]::placeholder { color: var(--ink-2); }
.filters input[type="text"] {
padding-left: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 17px 17px;
}
.filters select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
cursor: pointer;
}
.filters input:hover, .filters select:hover {
border-color: var(--brand);
background: var(--surface);
}
.filters input:focus, .filters select:focus {
outline: none;
background: var(--surface);
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-light);
}
.filters .btn-sm {
padding: 0 20px; height: 42px; font-size: 0.88rem; font-weight: 700;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 4px 12px rgba(var(--overlay-shadow), 0.25);
border: 0;
border-radius: 10px;
letter-spacing: 0.01em;
}
.filters .btn-sm:hover {
background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 6px 16px rgba(var(--overlay-shadow), 0.35);
transform: translateY(-1px);
}
.filter-checkbox {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.85rem; color: var(--ink-2); font-weight: 600;
white-space: nowrap;
cursor: pointer;
padding: 0 12px;
height: 42px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-soft);
transition: background .15s, color .15s, border-color .15s;
}
.filter-checkbox:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
.filter-checkbox:has(input:checked) { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
.filter-checkbox input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }
/* === Results header (count + sort) === */
.cards-results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.results-toolbar-right {
display: inline-flex;
align-items: center;
gap: 10px;
}
.sort-label {
font-size: 0.78rem;
color: var(--ink-2);
font-weight: 500;
}
.sort-select {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
background: var(--bg-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px 26px 6px 12px;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.sort-select:hover, .sort-select:focus { border-color: var(--brand); color: var(--brand); outline: none; }
.results-clear { padding: 4px 4px; text-decoration: none; transition: color .15s; }
.results-clear:hover { color: var(--danger); }
/* === Card Grid === */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
margin-bottom: 64px;
}
.card-tile {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform .2s, box-shadow .2s, border-color .2s;
display: flex;
flex-direction: column;
position: relative;
}
.card-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card-tile.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.15); }
.card-art {
/* Aspect ratio via ::before pseudo — uses element's OWN width regardless of layout context. Works reliably in Safari flex columns where aspect-ratio + min-height: auto distort the box. */
margin: 24px 24px 12px;
border-radius: 3.7% / 5.87%;
overflow: hidden;
background: #f3f6f8;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
container-type: inline-size;
flex-shrink: 0;
}
.card-art::before {
content: '';
display: block;
padding-top: 63.05%; /* 1 / 1.586 — keeps 1.586:1 ratio relative to .card-art's own width */
}
.card-art > .card-art-img,
.card-art > .card-art-placeholder {
position: absolute;
inset: 0;
}
.card-art-img { width: 100%; height: 100%; object-fit: cover; }
.card-art-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(8px, 5.5cqw, 24px) clamp(10px, 6cqw, 26px);
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
.card-art-shine {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(120% 60% at 80% 0%, rgba(255,255,255,0.18), transparent 55%),
radial-gradient(80% 50% at 0% 100%, rgba(0,0,0,0.18), transparent 60%);
pointer-events: none;
}
.card-art-placeholder::after {
content: '';
position: absolute; left: -10%; right: -10%; top: 35%; height: 60%;
background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,0.06) 50%, transparent 65%);
transform: rotate(-8deg);
z-index: 0;
pointer-events: none;
}
.card-art-top, .card-art-bottom {
position: relative; z-index: 1;
display: flex; align-items: flex-start; justify-content: flex-end;
gap: 12px;
}
.card-art-bottom { align-items: flex-end; justify-content: space-between; }
.card-art-chip {
position: absolute;
left: 7.5cqw;
top: 44%;
transform: translateY(-50%);
width: 12.5cqw;
height: 9.5cqw;
min-width: 14px;
min-height: 11px;
z-index: 1;
}
.card-art-contactless {
position: absolute;
left: 23cqw;
top: 44%;
transform: translateY(-50%);
width: 8cqw;
height: 8cqw;
min-width: 10px;
min-height: 10px;
z-index: 1;
opacity: 0.95;
}
.contactless-svg { width: 100%; height: 100%; display: block; }
.chip-svg { width: 100%; height: 100%; display: block; }
.card-art-issuer {
font-size: clamp(0.5rem, 5.2cqw, 1.4rem);
font-weight: 700;
text-align: right;
letter-spacing: 0.01em;
line-height: 1.15;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
max-width: 60%;
text-transform: none;
opacity: 1;
}
.card-art-name {
font-size: clamp(0.45rem, 4.7cqw, 1.25rem);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.2;
opacity: 0.88;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
max-width: 60%;
}
.card-art-network {
flex-shrink: 0;
display: flex; align-items: center; justify-content: flex-end;
height: clamp(14px, 12cqw, 54px);
}
.card-art-network .net-logo {
height: clamp(14px, 12cqw, 54px); width: auto; display: block;
image-rendering: -webkit-optimize-contrast;
shape-rendering: geometricPrecision;
}
.card-art-network .net-mc { height: clamp(13px, 11.3cqw, 50px); }
.card-art-network .net-visa { height: clamp(8px, 7.3cqw, 34px); }
.card-art-network .net-amex { height: clamp(12px, 10cqw, 44px); }
.card-art-network .net-logo-text {
font-size: clamp(0.55rem, 5.5cqw, 1.2rem); font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; opacity: 0.95;
}
.card-body { padding: 8px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.card-issuer { font-size: 0.8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 4px; }
.card-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.card-rating { margin-bottom: 14px; font-size: 0.9rem; }
.stars {
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 0;
white-space: nowrap;
}
.stars-empty, .stars-fill {
display: inline-flex;
gap: 1px;
}
.stars-empty { color: #e0e4e8; }
.stars-fill {
position: absolute; top: 0; left: 0;
overflow: hidden;
color: #f5a623;
}
.star-svg { width: 14px; height: 14px; fill: currentColor; display: block; flex-shrink: 0; }
.rating-num { color: var(--ink-2); font-weight: 600; vertical-align: middle; }
.detail-rating .star-svg { width: 18px; height: 18px; }
.card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
}
.stat .stat-label { font-size: 0.75rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.stat .stat-value { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.stat-value.is-good { color: var(--brand); }
.card-highlights { list-style: none; padding: 0; margin: 0 0 16px; font-size: 0.88rem; }
.card-highlights li { display: flex; gap: 8px; padding: 4px 0; color: var(--ink-2); }
.card-highlights li::before { content: '✓'; color: var(--brand); font-weight: 700; flex-shrink: 0; }
.card-actions { display: flex; gap: 10px; margin-top: auto; align-items: center; }
.card-actions .btn { flex: 1; }
.card-toggle { display: none; }
.compare-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: var(--bg-soft);
border: 1px solid var(--line-2);
border-radius: 999px;
font-size: 0.85rem;
color: var(--ink-2);
font-weight: 500;
cursor: pointer;
transition: all .15s;
user-select: none;
}
.compare-toggle:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.compare-toggle input { accent-color: var(--brand); width: 16px; height: 16px; }
.compare-toggle.is-active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
/* === Compare Bar (sticky bottom) === */
.compare-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid var(--line);
box-shadow: var(--shadow-lg);
transform: translateY(100%);
transition: transform .25s ease;
z-index: 90;
}
.compare-bar.is-visible { transform: translateY(0); }
.compare-bar-inner {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
max-width: 1200px;
margin: 0 auto;
}
.compare-slots { display: flex; gap: 12px; flex: 1; }
.compare-slot {
display: flex; align-items: center; gap: 10px;
flex: 1;
padding: 8px 12px;
border: 1px dashed var(--line-2);
border-radius: 10px;
min-height: 56px;
font-size: 0.85rem;
color: var(--ink-2);
}
.compare-slot.filled { border-style: solid; background: var(--bg-soft); color: var(--ink); }
.compare-slot-thumb {
width: 56px; height: 36px; border-radius: 3px; flex-shrink: 0;
background: var(--bg-soft);
overflow: hidden;
}
.compare-slot-thumb > * { width: 100%; height: 100%; }
.compare-slot-name { font-weight: 600; line-height: 1.2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compare-slot-remove {
background: transparent; border: 0; padding: 4px; color: var(--ink-2);
font-size: 1.1rem; cursor: pointer; border-radius: 4px;
}
.compare-slot-remove:hover { color: var(--danger); background: var(--bg-soft); }
.compare-bar .btn { padding: 12px 24px; }
.compare-bar-info { font-size: 0.85rem; color: var(--ink-2); }
/* === Compare Page (clean professional comparison table) === */
.compare-table-wrap {
overflow: visible;
margin-bottom: 48px;
}
.compare-sticky-sentinel { height: 1px; width: 100%; }
.compare-table {
width: 100%;
min-width: 640px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
/* Column widths */
.compare-col-label { width: 140px; }
.compare-col-card { background: transparent; }
@media (max-width: 720px) { .compare-col-label { width: 110px; } }
/* === Default cells === */
.compare-table th, .compare-table td {
vertical-align: middle;
text-align: left;
padding: 14px 18px;
}
/* === Label cells (left column) — text on page bg, no card === */
.compare-table th {
background: transparent;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-2);
padding-left: 0;
padding-right: 12px;
line-height: 1.3;
}
/* === Value cells (each card column) — surface "card" with gap-left === */
.compare-table td {
background: var(--surface);
font-size: 0.92rem;
color: var(--ink);
border-left: 16px solid var(--bg); /* visual gap between columns */
border-right: 1px solid var(--line);
}
/* First card gets a gap from label column too */
.compare-table tr:not(.compare-header-row):not(.section-row) td:first-of-type {
border-left: 16px solid var(--bg);
}
/* Top row of each card column — visual gap is surface (covers scrolling content while separating cards) */
.compare-header-row td {
border-top: 0;
border-bottom: 1px solid var(--line);
padding: 28px 22px 22px;
text-align: center;
vertical-align: top;
background: var(--surface);
/* surface gap between cards = visual breathing + continuous bar appearance */
border-left: 16px solid var(--surface);
border-right: 0;
}
.compare-header-row td:first-of-type { border-left: 20px solid var(--surface); }
.compare-header-row td:last-child { border-right: 20px solid var(--surface); }
.compare-header-row th {
background: var(--bg);
padding: 0 !important;
position: sticky;
top: 72px;
z-index: 5;
}
/* Bottom row of each card column — rounded bottom + border */
.compare-table tbody > tr:last-of-type td {
border-bottom: 1px solid var(--line);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: 0 4px 16px rgba(var(--overlay-shadow), 0.04);
}
/* === Card content in header row === */
.compare-header-row .card-art {
margin: 0 auto 16px !important;
max-width: 220px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: max-width .3s ease, margin .3s ease;
}
.compare-header-row .card-issuer {
font-size: 0.72rem;
margin-bottom: 4px;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.compare-header-row .card-name {
font-size: 1.05rem;
margin-bottom: 8px;
line-height: 1.25;
font-weight: 700;
}
.compare-header-row .card-rating {
font-size: 0.85rem;
margin-bottom: 16px;
justify-content: center;
}
.compare-header-row .btn {
padding: 8px 16px;
font-size: 0.82rem;
margin: 0 3px;
}
.compare-header-row .card-art-placeholder::after,
.compare-header-row .card-art-shine { display: none; }
/* === Remove card button (× on filled slots) === */
.compare-header-row td { position: relative; }
.compare-remove-btn {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--line);
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s, transform .15s;
z-index: 3;
padding: 0;
box-shadow: 0 1px 3px rgba(13, 31, 45, 0.08);
}
.compare-remove-btn:hover {
background: var(--danger);
color: #fff;
border-color: var(--danger);
transform: scale(1.08);
}
.compare-remove-btn:active { transform: scale(0.96); }
/* === Empty slot (card picker) === */
.compare-empty-slot-cell { background: var(--bg) !important; box-shadow: none !important; }
.compare-empty-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 280px;
padding: 24px 16px;
border: 2px dashed var(--line-2);
border-radius: 12px;
background: var(--surface);
text-align: center;
transition: border-color .2s, background .2s;
}
.compare-empty-slot:hover { border-color: var(--brand); background: var(--brand-light); }
.compare-empty-art {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 50%;
}
.compare-empty-text { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.compare-add-select {
width: 100%;
max-width: 220px;
padding: 9px 32px 9px 14px;
font-size: 0.85rem;
font-family: inherit;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
color: var(--ink);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: border-color .15s, box-shadow .15s;
}
.compare-add-select:hover { border-color: var(--brand); }
.compare-add-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.compare-cell-empty { color: var(--line-2); font-size: 1.2rem; }
/* === Subtle row hover for scanning values === */
.compare-table tr:not(.section-row):not(.compare-header-row):hover td {
background-color: var(--brand-light);
}
/* === Section divider — refined header style matching index aesthetic === */
.compare-table tr.section-row th {
display: table-cell;
background: transparent;
color: var(--ink);
font-size: 1.05rem;
font-weight: 800;
text-transform: none;
letter-spacing: -0.01em;
padding: 8px 4px 18px;
text-align: left;
border-radius: 0;
border-top: 36px solid var(--bg);
border-bottom: 0;
position: relative;
}
/* Brand-accent vertical bar before section title (like a chapter mark) */
.compare-table tr.section-row th::before {
content: '';
display: inline-block;
width: 4px; height: 18px;
background: var(--brand);
border-radius: 2px;
margin-right: 12px;
vertical-align: -3px;
}
/* === Sticky card header === */
.compare-header-row td {
position: sticky;
top: 72px;
z-index: 5;
}
.compare-table.is-stuck .compare-header-row td {
border-bottom: 1px solid var(--line);
box-shadow: 0 6px 16px -4px rgba(var(--overlay-shadow), 0.08), 0 1px 0 var(--line);
}
/* === Desktop stuck state — compact horizontal layout === */
@media (min-width: 641px) {
.compare-table.is-stuck .compare-header-row td {
padding: 16px 22px !important;
text-align: left;
}
.compare-table.is-stuck .compare-header-row .card-art {
max-width: 140px;
margin: 0 auto 10px 0 !important;
}
.compare-table.is-stuck .compare-header-row .card-issuer { font-size: 0.7rem; margin-bottom: 2px; opacity: 0.7; }
.compare-table.is-stuck .compare-header-row .card-name { font-size: 0.95rem; margin-bottom: 4px; line-height: 1.2; }
.compare-table.is-stuck .compare-header-row .card-rating {
font-size: 0.78rem;
margin-bottom: 10px;
justify-content: flex-start;
}
.compare-table.is-stuck .compare-header-row .btn {
display: inline-flex !important;
padding: 6px 14px !important;
font-size: 0.75rem !important;
margin: 0 !important;
width: auto;
}
.compare-table.is-stuck .compare-header-row .btn + .btn { margin-left: 6px !important; }
}
.compare-empty { text-align: center; padding: 56px 24px 40px; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.compare-pickers {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 640px) {
.compare-pickers { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.compare-picker-slot.is-third { display: none; }
}
.compare-empty h2 { margin-bottom: 12px; }
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge-yes { background: var(--brand-light); color: var(--brand-dark); }
.badge-no { background: #fee2e2; color: #991b1b; }
.badge-neutral { background: var(--bg-soft); color: var(--ink-2); }
/* === Card Detail Page === */
.detail-hero {
background: linear-gradient(180deg, var(--brand-light), transparent);
padding: 48px 0;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.detail-art .card-art { max-width: 420px; margin: 0; box-shadow: var(--shadow-lg); }
.detail-info h1 { margin-bottom: 8px; }
.detail-issuer { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 16px; }
.detail-rating { font-size: 1.1rem; margin-bottom: 24px; }
.detail-quickstats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 24px 0 32px;
padding: 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.detail-quickstats .stat-value { font-size: 1.4rem; }
.detail-actions { display: flex; gap: 12px; }
.detail-body { padding: 56px 0; }
.detail-section { margin-bottom: 56px; }
.detail-section h2 { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pros-list, .cons-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pros-list h3 { color: var(--brand); }
.cons-list h3 { color: var(--danger); }
.pros-list ul, .cons-list ul { list-style: none; padding: 0; margin: 0; }
.pros-list li, .cons-list li { padding: 8px 0 8px 28px; position: relative; }
.pros-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.cons-list li::before { content: '✕'; position: absolute; left: 0; color: var(--danger); font-weight: 700; }
.specs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.spec-row { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); gap: 16px; }
.spec-row:nth-child(odd) { border-right: 1px solid var(--line); }
.spec-label { color: var(--ink-2); font-size: 0.9rem; }
.spec-value { font-weight: 600; text-align: right; }
/* === Footer === */
.site-footer {
background: var(--ink);
color: #cbd5e0;
padding: 56px 0 24px;
margin-top: 80px;
}
.site-footer h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.site-footer a { display: block; color: #cbd5e0; padding: 4px 0; font-size: 0.95rem; transition: color .15s; }
.site-footer a:hover { color: var(--brand-accent); }
.site-footer .muted { color: #94a3b8; }
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.6fr;
gap: 36px;
margin-bottom: 32px;
}
.site-footer[data-footer-cols="2"] .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; }
.site-footer[data-footer-cols="1"] .footer-inner { grid-template-columns: 1.4fr 1fr 1.6fr; }
.site-footer[data-footer-cols="0"] .footer-inner { grid-template-columns: 1.4fr 1fr; }
.logo-footer .logo-text { color: #fff; }
.footer-bottom {
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* === Forms (Admin) === */
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink); }
.form-row .hint { font-size: 0.8rem; color: var(--ink-2); margin-top: 4px; }
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row input[type="file"],
.form-row select,
.form-row textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
background: var(--surface);
color: var(--ink);
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
outline: none; border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-light);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 24px; }
.form-checkboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.form-checkboxes label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.9rem; }
/* Admin forms — fieldsets, blocks, inputs */
.admin-form {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 24px 28px;
}
.admin-form > .form-fieldset + .form-fieldset { margin-top: 22px; }
.form-fieldset {
border: 0;
padding: 0;
margin: 0;
}
.form-fieldset legend {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
padding: 0 0 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
width: 100%;
}
.admin-form label,
.form-grid-2 > label,
.form-grid-3 > label,
.form-block {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
}
.form-block { margin-bottom: 16px; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="url"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--line-2);
border-radius: 8px;
font-size: 0.95rem;
font-family: inherit;
background: #fff;
color: var(--ink);
font-weight: 500;
transition: border-color .15s, box-shadow .15s;
}
.admin-form input[type="color"] {
width: 100%;
height: 44px;
padding: 4px;
border: 1px solid var(--line-2);
border-radius: 8px;
cursor: pointer;
background: #fff;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.12);
}
.admin-form textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.admin-form small.muted {
font-size: 0.74rem;
font-weight: 400;
color: var(--ink-2);
margin-top: 2px;
}
.form-checkboxes label {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 0.88rem;
color: var(--ink);
padding: 10px 14px;
background: var(--bg-soft);
border-radius: 8px;
cursor: pointer;
transition: background .15s;
}
.form-checkboxes label:hover { background: var(--brand-light); }
.form-checkboxes input[type="checkbox"] { accent-color: var(--brand); }
/* === Admin Layout === */
/* ============================================================
Admin shell — sidebar + content layout
============================================================ */
.admin-shell {
min-height: 100vh;
background: #f5f7fa;
display: grid;
grid-template-columns: 260px 1fr;
}
.admin-sidebar {
position: sticky;
top: 0;
height: 100vh;
background: #0d1f2d;
color: #e2e8f0;
display: flex;
flex-direction: column;
padding: 20px 14px;
z-index: 50;
overflow-y: auto;
}
.admin-sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 16px;
}
.admin-sidebar-brand .logo-mark {
width: 36px; height: 36px;
background: var(--brand);
border-radius: 10px;
color: #fff;
font-size: 1.05rem;
flex-shrink: 0;
}
.admin-sidebar-brand strong {
display: block;
font-size: 0.95rem;
color: #fff;
font-weight: 700;
}
.admin-sidebar-brand small {
display: block;
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
}
.admin-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-section {
display: block;
padding: 14px 10px 6px;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #64748b;
}
.admin-sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 9px;
color: #cbd5e0;
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
transition: all .15s;
position: relative;
}
.admin-sidebar-link svg { flex-shrink: 0; opacity: 0.75; transition: opacity .15s; }
.admin-sidebar-link:hover {
background: rgba(255,255,255,0.05);
color: #fff;
}
.admin-sidebar-link:hover svg { opacity: 1; }
.admin-sidebar-link.is-active {
background: rgba(26, 135, 84, 0.18);
color: #fff;
font-weight: 600;
}
.admin-sidebar-link.is-active::before {
content: '';
position: absolute;
left: -14px; top: 8px; bottom: 8px;
width: 3px;
background: var(--brand);
border-radius: 0 3px 3px 0;
}
.admin-sidebar-link.is-active svg { opacity: 1; color: var(--brand); }
.admin-sidebar-link-ext { color: #94a3b8; font-size: 0.85rem; }
.admin-sidebar-user {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
margin-top: 16px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.06);
}
.admin-sidebar-avatar {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
font-weight: 800;
font-size: 0.9rem;
border-radius: 50%;
flex-shrink: 0;
}
.admin-sidebar-user-info { flex: 1; min-width: 0; }
.admin-sidebar-user-info strong { display: block; font-size: 0.86rem; color: #fff; }
.admin-sidebar-user-info small { display: block; font-size: 0.7rem; color: #94a3b8; }
.admin-sidebar-logout {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: #94a3b8;
background: transparent;
border-radius: 8px;
transition: all .15s;
}
.admin-sidebar-logout:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
/* Sidebar mobile toggle (hidden on desktop) */
.admin-sidebar-toggle { display: none; }
.admin-sidebar-backdrop { display: none; }
.admin-content {
padding: 40px 48px 64px;
max-width: none;
width: 100%;
min-width: 0;
}
.admin-content h1 { margin-bottom: 8px; }
/* Page header — consistent across all admin pages */
.admin-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.admin-page-header h1 {
font-size: clamp(1.6rem, 2.5vw, 2rem);
letter-spacing: -0.02em;
margin: 0 0 4px;
}
.admin-page-header .muted { margin: 0; font-size: 0.92rem; }
.admin-breadcrumb {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 4px;
}
.admin-page-actions { display: flex; gap: 8px; }
/* Old toolbar kept for backward compat */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
/* Toasts — auto-dismissing feedback */
.admin-toast {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 12px;
font-size: 0.92rem;
font-weight: 500;
margin-bottom: 20px;
animation: admin-toast-in .25s ease;
transition: opacity .3s, transform .3s;
}
.admin-toast.is-fading { opacity: 0; transform: translateY(-6px); }
.admin-toast-success {
background: rgba(26, 135, 84, 0.08);
border: 1px solid rgba(26, 135, 84, 0.2);
color: var(--brand-dark);
}
.admin-toast-error {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #b91c1c;
}
@keyframes admin-toast-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Search bar */
.admin-search-bar {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 20px;
transition: border-color .15s, box-shadow .15s;
}
.admin-search-bar:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(26, 135, 84, 0.1);
}
.admin-search-bar svg { color: var(--ink-2); flex-shrink: 0; }
.admin-search-bar input {
flex: 1;
border: 0;
padding: 0;
font-size: 0.95rem;
font-family: inherit;
background: transparent;
color: var(--ink);
}
.admin-search-bar input:focus { outline: none; }
.admin-search-clear {
background: var(--bg-soft);
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--ink-2);
font-size: 1rem;
line-height: 1;
text-decoration: none;
transition: background .15s;
}
.admin-search-clear:hover { background: var(--line); color: var(--danger); }
.admin-results-info { margin: 0 0 14px; }
/* Empty state */
.admin-empty {
text-align: center;
padding: 64px 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.admin-empty-icon {
width: 64px; height: 64px;
display: inline-flex;
align-items: center; justify-content: center;
background: var(--bg-soft);
border-radius: 16px;
font-size: 1.8rem;
margin-bottom: 18px;
}
.admin-empty h2 {
font-size: 1.25rem;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.admin-empty p { margin: 0 0 18px; }
/* Dashboard metrics */
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.admin-metric {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 20px 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
color: var(--ink);
text-decoration: none;
transition: all .15s;
position: relative;
}
.admin-metric:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(13, 31, 45, 0.06);
}
.admin-metric-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 12px;
margin-bottom: 4px;
}
.admin-metric-primary .admin-metric-icon {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
}
.admin-metric-label {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.admin-metric-value {
font-size: 2rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1;
}
.admin-metric-sub { font-size: 0.8rem; color: var(--ink-2); }
/* Two-column panels */
.admin-panels-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 28px;
}
.admin-panel {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px 24px;
}
.admin-panel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.admin-panel-header h2 {
font-size: 1rem;
margin: 0;
letter-spacing: -0.01em;
}
.admin-panel-header .muted { margin: 4px 0 0; }
.admin-panel-link {
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-dark);
white-space: nowrap;
}
.admin-recent-list {
list-style: none;
margin: 0; padding: 0;
}
.admin-recent-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.admin-recent-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-recent-list li:first-child { padding-top: 0; }
.admin-recent-thumb { width: 56px; }
.admin-recent-thumb .card-art { width: 56px; margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border-radius: 4px; }
.admin-recent-thumb .card-art-name,
.admin-recent-thumb .card-art-issuer,
.admin-recent-thumb .card-art-network,
.admin-recent-thumb .card-art-contactless,
.admin-recent-thumb .card-art-placeholder::after,
.admin-recent-thumb .card-art-shine { display: none; }
.admin-recent-thumb .card-art-chip { left: 5px; top: 50%; width: 7px; height: 5px; min-width: 0; min-height: 0; }
.admin-recent-logo {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
color: #fff;
border-radius: 10px;
font-weight: 800;
font-size: 0.95rem;
flex-shrink: 0;
}
.admin-recent-info { flex: 1; min-width: 0; }
.admin-recent-info strong { display: block; font-size: 0.92rem; color: var(--ink); }
.admin-recent-info span { display: block; }
.admin-recent-metric {
font-size: 1rem;
font-weight: 800;
color: var(--brand-dark);
}
/* Quick actions block */
.admin-quick-actions { margin-top: 8px; }
.admin-quick-actions h2 {
font-size: 1rem;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.admin-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.admin-quick {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
color: var(--ink);
text-decoration: none;
transition: all .15s;
}
.admin-quick:hover {
border-color: var(--brand);
background: var(--brand-light);
}
.admin-quick-icon {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand);
color: #fff;
border-radius: 9px;
font-weight: 800;
font-size: 1.05rem;
margin-bottom: 6px;
}
.admin-quick strong { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.admin-quick small { font-size: 0.78rem; color: var(--ink-2); }
@media (max-width: 880px) {
.admin-shell { grid-template-columns: 1fr; }
.admin-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.admin-sidebar.is-open { transform: translateX(0); }
.admin-sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(13, 31, 45, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity .3s;
z-index: 49;
}
.admin-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
.admin-sidebar-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
position: fixed;
top: 16px; left: 16px;
width: 40px; height: 40px;
background: #0d1f2d;
border: 0;
border-radius: 10px;
z-index: 60;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.admin-sidebar-toggle span {
display: block;
width: 18px; height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .2s;
}
.admin-content { padding: 70px 20px 40px; }
.admin-page-header { flex-direction: column; align-items: flex-start; }
.admin-panels-grid { grid-template-columns: 1fr; }
body.admin-sidebar-open { overflow: hidden; }
}
/* Admin loans list */
.admin-loans-list {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.admin-loans-row {
display: grid;
grid-template-columns: 48px 1.5fr 120px 1.4fr 1fr 80px auto;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.admin-loans-row:last-child { border-bottom: 0; }
.admin-loans-row.admin-loans-head {
background: var(--bg-soft);
font-weight: 600;
font-size: 0.8rem;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-loan-logo {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
color: #fff;
border-radius: 10px;
font-weight: 800;
font-size: 1rem;
}
/* Admin stats panel */
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.admin-stat {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-stat-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.admin-stat strong {
font-size: 1.8rem;
font-weight: 800;
color: var(--brand-dark);
letter-spacing: -0.02em;
}
.admin-stat-link {
font-size: 0.78rem;
color: var(--brand-dark);
font-weight: 600;
}
.admin-stat-link:hover { color: var(--brand); }
/* Admin form sections - stacked panels */
.admin-form-section { margin-bottom: 24px; }
/* Theme customizer */
.theme-presets-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.theme-preset-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 14px;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: all .15s;
}
.theme-preset-card:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(13, 31, 45, 0.06);
}
.theme-preset-card.is-current {
border-color: var(--brand);
background: var(--brand-light);
}
.theme-preset-swatches {
display: flex;
gap: 0;
border-radius: 8px;
overflow: hidden;
height: 36px;
}
.theme-preset-swatches span {
flex: 1;
display: block;
transition: flex .2s;
}
.theme-preset-card:hover .theme-preset-swatches span {
flex: 1.5 1 0;
}
.theme-preset-info { display: flex; flex-direction: column; gap: 2px; }
.theme-preset-info strong { font-size: 0.92rem; color: var(--ink); font-weight: 700; }
.theme-preset-info small { font-size: 0.76rem; color: var(--ink-2); line-height: 1.35; }
.theme-preset-badge {
position: absolute;
top: 10px; right: 10px;
padding: 3px 9px;
background: var(--brand);
color: #fff;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.theme-color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.theme-color-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
transition: border-color .15s;
}
.theme-color-card:hover { border-color: var(--brand); }
.theme-color-card input[type="color"] {
flex-shrink: 0;
width: 54px;
height: 54px;
padding: 3px;
border: 1px solid var(--line-2);
border-radius: 10px;
cursor: pointer;
background: #fff;
}
.theme-color-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-color-info strong { font-size: 0.88rem; color: var(--ink); font-weight: 700; }
.theme-color-info small { font-size: 0.74rem; color: var(--ink-2); line-height: 1.3; }
.theme-color-info code {
font-size: 0.74rem;
color: var(--ink-2);
background: var(--bg-soft);
padding: 1px 6px;
border-radius: 4px;
margin-top: 2px;
align-self: flex-start;
font-family: ui-monospace, monospace;
}
/* Menu editor */
.menu-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.menu-item {
display: grid;
grid-template-columns: 24px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.menu-item:hover { border-color: var(--line-2); }
.menu-item.is-dragging { opacity: 0.45; transform: scale(0.99); }
.menu-item.is-drop-target { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.menu-item-drag {
display: flex; align-items: center; justify-content: center;
width: 24px; height: 28px;
background: transparent; border: 0;
color: var(--ink-2);
cursor: grab;
border-radius: 4px;
}
.menu-item-drag:hover { background: var(--bg-soft); color: var(--ink); }
.menu-item-drag:active { cursor: grabbing; }
.menu-item-fields {
display: grid;
grid-template-columns: 1fr 1.4fr 180px;
gap: 10px;
min-width: 0;
}
.menu-item-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu-item-field > span { font-size: 0.7rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.menu-item-field input,
.menu-item-field select {
width: 100%;
height: 34px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--bg-soft);
color: var(--ink);
font-size: 0.85rem;
font-family: inherit;
}
.menu-item-field input:focus,
.menu-item-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.menu-item-toggle { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; flex-shrink: 0; }
.menu-item-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.menu-item-toggle-track {
position: absolute; inset: 0;
background: var(--line-2);
border-radius: 999px;
transition: background .15s;
}
.menu-item-toggle-track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
background: #fff;
border-radius: 50%;
transition: transform .15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.menu-item-toggle input:checked + .menu-item-toggle-track { background: var(--brand); }
.menu-item-toggle input:checked + .menu-item-toggle-track::after { transform: translateX(16px); }
.menu-item-remove {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
}
.menu-item-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--bg-soft); }
.menu-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
.menu-item { grid-template-columns: 24px 1fr auto auto; }
.menu-item-fields { grid-template-columns: 1fr; gap: 8px; }
}
/* Aparência admin — top-level tab navigation */
.aparencia-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 24px;
padding: 6px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
}
.aparencia-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--ink-2);
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .15s;
}
.aparencia-tab:hover { background: var(--surface); color: var(--ink); }
.aparencia-tab.is-active {
background: var(--surface);
color: var(--brand);
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.06), 0 0 0 1px var(--line);
}
.aparencia-tab svg { flex-shrink: 0; }
.aparencia-panel { display: none; }
.aparencia-panel.is-active { display: block; }
.aparencia-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.aparencia-section-head h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; }
.aparencia-section-head p { margin: 0; }
/* ============================================================
Home news slider — latest 10 blog posts, NerdWallet-style:
one card prominent in the center, faded peek cards on both sides,
controls (arrows + dots) centered below.
============================================================ */
.home-news {
padding: 64px 0 56px;
overflow: hidden; /* hide the natural overflow of cards beyond the centered one */
}
.home-news-head {
text-align: center;
margin-bottom: 24px;
padding: 0 24px;
}
.home-news-head h2 {
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
letter-spacing: -0.02em;
margin: 0 0 8px;
}
.home-news-more {
display: inline-block;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--brand);
text-decoration: none;
border-bottom: 2px solid var(--brand);
padding-bottom: 3px;
transition: color .15s, border-color .15s;
}
.home-news-more:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }
.home-news-slider { position: relative; }
.home-news-track {
/* No scroll, no snap. Cards are positioned absolutely and animated via
transform so the loop can use the SHORTEST wrap direction — going from
card 9 to card 0 never appears to rewind through the middle. Gap stays
readable in computed style so JS can derive the inter-card step. */
position: relative;
height: 444px; /* card height (420) + a little vertical breathing room */
padding: 12px 0 32px;
gap: 16px;
}
/* All cards are absolutely stacked at the centre of the track. The JS layers
a dynamic translateX(step * d) onto a fixed translate(-50%, 0) baseline,
so the active card sits at the centre and neighbours fan out symmetrically.
When `.news-no-anim` is on the track (during initial paint and resize) we
suppress transitions so the cards snap to position without sliding. */
.home-news-card {
position: absolute;
top: 0;
left: 50%;
width: 380px;
height: 420px;
background-color: var(--bg-soft);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
transform: translate(-50%, 0) scale(0.78);
transform-origin: center center;
transition: transform .55s cubic-bezier(.22, 0.61, .36, 1), box-shadow .35s ease, opacity .25s ease;
will-change: transform;
opacity: 0; /* hidden until JS lays them out, prevents a stacked flash */
}
.news-track-transform .home-news-card { opacity: 1; }
.news-track-transform.news-no-anim .home-news-card { transition: none !important; }
.home-news-card.is-active {
box-shadow: 0 24px 56px rgba(var(--overlay-shadow), 0.18);
}
/* The shade overlay: sage-green colour wash on inactive cards (mimics the
NerdWallet "curtain" effect), bottom-only dark gradient on the active
card so the white text remains legible without recolouring the photo. */
.home-news-card-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(150, 195, 175, 0.55) 0%, rgba(110, 165, 140, 0.92) 100%);
transition: opacity .45s ease, background .45s ease;
pointer-events: none;
}
.home-news-card.is-active .home-news-card-shade {
background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.72) 100%);
}
.home-news-card-content {
position: absolute;
inset: auto 0 0 0;
padding: 22px 22px 26px;
color: #fff;
z-index: 2;
}
.home-news-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 0.82rem;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .3s ease, max-height .4s ease, margin .4s ease;
}
.home-news-card.is-active .home-news-card-meta {
opacity: 1;
max-height: 40px;
}
.home-news-card-author {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.home-news-card-avatar {
width: 26px; height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
border-radius: 50%;
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.home-news-card-date { font-weight: 500; opacity: 0.92; }
.home-news-card h3 {
margin: 0;
color: #fff;
font-size: 1.04rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
transition: font-size .35s ease, -webkit-line-clamp .35s ease;
}
.home-news-card.is-active h3 {
font-size: 1.5rem;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* Controls row below the slider — centered, with arrows flanking the dots */
.home-news-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 8px;
padding: 0 24px;
}
.home-news-arrow {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 50%;
color: var(--ink);
cursor: pointer;
transition: all .15s;
}
.home-news-arrow:hover:not(:disabled) {
background: var(--brand);
color: #fff;
border-color: var(--brand);
transform: translateY(-2px);
}
.home-news-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.home-news-dots { display: flex; gap: 10px; align-items: center; }
.home-news-dot {
width: 10px; height: 10px;
background: transparent;
border: 1.5px solid var(--line-2);
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: all .15s;
}
.home-news-dot:hover { border-color: var(--brand); }
.home-news-dot.is-active {
background: var(--brand);
border-color: var(--brand);
transform: scale(1.2);
}
@media (max-width: 1000px) {
.home-news-track { height: 404px; }
.home-news-card { height: 380px; }
.home-news-card.is-active h3 { font-size: 1.3rem; }
}
@media (max-width: 640px) {
.home-news { padding: 48px 0 40px; }
.home-news-track { height: 384px; gap: 12px; }
.home-news-card { width: 86vw; height: 360px; }
.home-news-card.is-active h3 { font-size: 1.15rem; }
.home-news-controls { gap: 16px; }
}
/* ============================================================
Card FAQ — accordion on the product detail page
============================================================ */
.card-faq-section {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 60%);
margin-left: -24px;
margin-right: -24px;
padding: 56px 24px;
border-radius: 20px;
}
.card-faq-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.card-faq-head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 8px 0 12px; line-height: 1.2; }
.card-faq-head .muted { font-size: 0.98rem; margin: 0; }
.card-faq-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand);
background: var(--surface);
padding: 6px 14px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(var(--overlay-shadow), 0.06);
}
.card-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 820px;
margin: 0 auto;
}
.card-faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: box-shadow .2s, border-color .2s;
}
.card-faq-item[open] {
border-color: var(--brand);
box-shadow: 0 4px 18px rgba(var(--overlay-shadow), 0.06);
}
.card-faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-size: 1.02rem;
font-weight: 700;
color: var(--ink);
transition: color .15s;
}
.card-faq-item summary::-webkit-details-marker,
.card-faq-item summary::marker { display: none; content: ''; }
.card-faq-item summary:hover { color: var(--brand); }
.card-faq-item[open] summary { color: var(--brand); }
.card-faq-q { flex: 1; line-height: 1.4; }
.card-faq-toggle {
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand);
border-radius: 50%;
transition: transform .25s ease;
}
.card-faq-item[open] .card-faq-toggle { transform: rotate(180deg); }
.card-faq-a {
padding: 0 22px 22px 22px;
color: var(--ink-2);
font-size: 0.96rem;
line-height: 1.65;
}
.card-faq-a strong { color: var(--ink); font-weight: 700; }
.card-faq-disclaimer {
max-width: 820px;
margin: 24px auto 0;
text-align: center;
font-size: 0.82rem !important;
line-height: 1.6;
}
.card-faq-disclaimer a { color: var(--brand); font-weight: 600; }
.card-faq-disclaimer a:hover { color: var(--brand-dark); }
@media (max-width: 720px) {
.card-faq-section { padding: 40px 18px; margin-left: -18px; margin-right: -18px; }
.card-faq-item summary { padding: 16px 18px; font-size: 0.96rem; }
.card-faq-a { padding: 0 18px 18px 18px; font-size: 0.92rem; }
}
/* ============================================================
Glossário — alphabetical list of financial terms. Tight definition
list with quick-jump letter nav at the top.
============================================================ */
.glossario-toc {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 16px 18px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 28px;
position: sticky;
top: 16px;
z-index: 5;
}
.glossario-toc a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
font-weight: 700;
color: var(--ink);
font-size: 0.85rem;
transition: all .15s;
}
.glossario-toc a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.glossario-section { margin: 32px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.glossario-section h2 {
margin: 0 0 14px;
font-size: 1.4rem;
color: var(--brand);
}
.glossario-list { margin: 0; }
.glossario-list dt {
font-weight: 700;
color: var(--ink);
margin-top: 14px;
font-size: 1.02rem;
}
.glossario-list dd {
margin: 4px 0 0;
color: var(--ink-2);
line-height: 1.6;
font-size: 0.95rem;
}
/* ============================================================
Author page — bio + list of articles by that person. Reinforces
E-E-A-T by giving the byline a real face and credentials.
============================================================ */
.author-hero { padding: 48px 0 16px; }
.author-card {
display: flex;
gap: 28px;
align-items: flex-start;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px;
margin-top: 16px;
}
.author-avatar {
width: 88px; height: 88px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
font-size: 2rem;
font-weight: 800;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(var(--overlay-shadow), 0.15);
}
.author-info { flex: 1; min-width: 0; }
.author-info h1 {
margin: 0 0 6px;
font-size: 1.8rem;
letter-spacing: -0.02em;
color: var(--ink);
}
.author-role {
margin: 0 0 14px;
font-size: 0.9rem;
font-weight: 600;
color: var(--brand);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.author-bio {
margin: 0 0 16px;
font-size: 1rem;
line-height: 1.65;
color: var(--ink-2);
}
.author-credentials {
margin: 0 0 16px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.author-credentials li {
padding-left: 22px;
font-size: 0.9rem;
color: var(--ink-2);
position: relative;
}
.author-credentials li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--brand);
font-weight: 700;
}
.author-links { display: flex; gap: 14px; }
.author-links a {
font-size: 0.88rem;
font-weight: 600;
color: var(--brand);
}
.author-links a:hover { color: var(--brand-dark); }
.author-posts { padding: 32px 0 64px; }
.author-posts h2 { margin: 0 0 20px; font-size: 1.4rem; }
.author-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.author-post-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: transform .15s, box-shadow .15s;
}
.author-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.author-post-art {
display: block;
aspect-ratio: 16 / 9;
background: var(--bg-soft) center/cover no-repeat;
}
.author-post-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.author-post-cat {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
}
.author-post-body h3 {
margin: 0;
font-size: 1.02rem;
line-height: 1.35;
color: var(--ink);
}
.author-post-body h3 a { color: inherit; text-decoration: none; }
.author-post-body h3 a:hover { color: var(--brand); }
@media (max-width: 640px) {
.author-card { flex-direction: column; gap: 16px; padding: 22px; }
.author-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
.author-info h1 { font-size: 1.4rem; }
}
/* ============================================================
YMYL disclaimer block at the foot of each post — required by Google's
E-E-A-T guidelines for finance content. Subtle but visible.
============================================================ */
.post-disclaimer {
margin: 32px 0;
padding: 22px 24px;
background: var(--brand-light);
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 12px;
color: var(--ink);
}
.post-disclaimer h3 {
margin: 0 0 10px;
font-size: 0.95rem;
font-weight: 700;
color: var(--brand-dark);
}
.post-disclaimer p {
margin: 0 0 10px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--ink-2);
}
.post-disclaimer p:last-child { margin-bottom: 0; }
.post-disclaimer strong { color: var(--ink); }
.post-disclaimer-meta { font-size: 0.8rem !important; opacity: 0.9; }
.post-disclaimer a { color: var(--brand-dark); font-weight: 600; }
.post-disclaimer a:hover { text-decoration: underline; }
/* Last-updated chip in the post meta row */
.post-updated { color: var(--ink); font-weight: 600; }
/* ============================================================
Post footer meta — Category + Tags shown together below the article
============================================================ */
.post-footer-meta {
margin: 32px 0;
padding: 20px 22px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.post-footer-meta-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.post-footer-meta-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
flex-shrink: 0;
min-width: 70px;
}
.post-footer-cat {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--brand-light);
color: var(--brand);
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
transition: all .15s;
}
.post-footer-cat:hover {
background: var(--brand);
color: #fff;
}
.post-footer-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.post-footer-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--surface);
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 6px;
font-size: 0.76rem;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
text-decoration: none;
transition: all .12s;
}
.post-footer-tag:hover {
background: var(--brand-light);
color: var(--brand);
border-color: var(--brand);
}
@media (max-width: 640px) {
.post-footer-meta { padding: 16px 18px; gap: 10px; }
.post-footer-meta-row { gap: 8px; align-items: flex-start; }
.post-footer-meta-label { min-width: 0; width: 100%; margin-bottom: -2px; }
}
/* ============================================================
Post share & post navigation (prev/next)
============================================================ */
.post-share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0;
padding: 16px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
}
.post-share-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-2);
margin-right: 6px;
}
.post-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: var(--bg-soft);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: all .15s;
text-decoration: none;
padding: 0;
}
.post-share-btn:hover {
transform: translateY(-2px);
border-color: var(--brand);
color: var(--brand);
box-shadow: 0 6px 14px rgba(var(--overlay-shadow), 0.08);
}
.post-share-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.post-share-tw:hover { background: #0f1419; color: #fff; border-color: #0f1419; }
.post-share-li:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.post-share-wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
.post-share-em:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.post-share-copy { position: relative; }
.post-share-copy .post-share-copy-done {
position: absolute;
inset: 0;
margin: auto;
width: 17px; height: 17px;
opacity: 0;
color: var(--brand);
transition: opacity .15s;
}
.post-share-copy.is-copied .post-share-copy-default { opacity: 0; }
.post-share-copy.is-copied .post-share-copy-done { opacity: 1; }
.post-share-copy.is-copied { border-color: var(--brand); }
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 40px;
}
.post-nav-link {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
text-decoration: none;
transition: all .15s;
}
.post-nav-link:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(var(--overlay-shadow), 0.08);
}
.post-nav-empty { background: transparent; border: 0; pointer-events: none; }
.post-nav-direction {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
}
.post-nav-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-nav-next { text-align: right; }
@media (max-width: 640px) {
.post-nav { grid-template-columns: 1fr; }
.post-nav-next { text-align: left; }
.post-share { padding: 14px; gap: 6px; }
.post-share-label { width: 100%; margin-bottom: 4px; }
.post-share-btn { width: 36px; height: 36px; }
}
/* ============================================================
Ad slots — front-end placeholders + live containers
============================================================ */
.ad-slot {
margin: 32px auto;
max-width: 100%;
text-align: center;
}
.ad-slot-block { /* default */ }
.ad-slot-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 110px;
padding: 20px 16px;
background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 12px, var(--surface) 12px, var(--surface) 24px);
border: 2px dashed var(--line-2);
border-radius: 12px;
color: var(--ink-2);
}
.ad-slot-placeholder .ad-slot-tag {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand);
}
.ad-slot-placeholder .ad-slot-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.ad-slot-placeholder .ad-slot-size { font-size: 0.78rem; color: var(--ink-2); }
.ad-slot-live { /* live ad — container only; the embedded code controls visuals */
display: flex;
justify-content: center;
}
/* Sticky-bottom anchor ad (mobile only) */
.ad-slot-sticky {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 900;
margin: 0;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 16px rgba(var(--overlay-shadow), 0.08);
display: none; /* shown on mobile only */
}
.ad-slot-sticky.ad-slot-placeholder {
flex-direction: row;
min-height: 56px;
border-radius: 0;
border: 0;
border-top: 1px solid var(--line);
gap: 12px;
background: var(--surface);
}
.ad-slot-sticky .ad-slot-tag { font-size: 0.62rem; }
.ad-slot-sticky .ad-slot-name { font-size: 0.85rem; }
.ad-slot-sticky .ad-slot-size { display: none; }
@media (max-width: 640px) {
.ad-slot-sticky { display: flex; }
/* Ensure floating chatbot doesn't overlap the sticky ad */
.chatbot { bottom: 76px; }
}
/* In-grid "card" variant for the blog list */
.ad-slot-grid-card {
margin: 0;
background: var(--surface);
border: 2px dashed var(--line-2);
border-radius: var(--radius-lg);
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 18px;
}
.ad-slot-grid-card.ad-slot-live { padding: 0; align-items: stretch; }
/* Admin · ads page rows */
.ad-row {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 12px;
transition: border-color .15s, background .15s;
}
.ad-row.is-on { border-color: var(--brand); }
.ad-row-head { display: flex; align-items: flex-start; gap: 14px; }
.ad-row-toggle { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.ad-row-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ad-row-toggle-track {
position: absolute; inset: 0;
background: var(--line-2);
border-radius: 999px;
transition: background .15s;
}
.ad-row-toggle-track::after {
content: '';
position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
transition: transform .15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.ad-row-toggle input:checked + .ad-row-toggle-track { background: var(--brand); }
.ad-row-toggle input:checked + .ad-row-toggle-track::after { transform: translateX(18px); }
.ad-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ad-row-meta strong { font-size: 0.95rem; color: var(--ink); }
.ad-row-meta small { font-size: 0.8rem; line-height: 1.4; }
.ad-row-size { color: var(--ink-2); font-family: ui-monospace, monospace; font-size: 0.74rem !important; }
.ad-row-key {
font-size: 0.7rem;
color: var(--ink-2);
background: var(--bg-soft);
padding: 3px 8px;
border-radius: 5px;
font-family: ui-monospace, monospace;
align-self: flex-start;
}
.ad-row-code { display: flex; flex-direction: column; gap: 4px; }
.ad-row-code > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.ad-row-code textarea {
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.5;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bg-soft);
color: var(--ink);
resize: vertical;
}
.ad-row-code textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
/* Admin · hero animation picker */
.anim-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.anim-picker-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 12px;
padding: 14px;
cursor: pointer;
transition: all .15s;
overflow: hidden;
}
.anim-picker-card:hover { border-color: var(--brand); }
.anim-picker-card.is-selected {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-light);
}
.anim-picker-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.anim-picker-check {
position: absolute;
top: 10px; right: 10px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
background: var(--brand);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
border-radius: 50%;
opacity: 0;
transition: opacity .15s;
}
.anim-picker-card.is-selected .anim-picker-check { opacity: 1; }
.anim-picker-info strong { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 700; margin-bottom: 3px; }
.anim-picker-info small { display: block; font-size: 0.78rem; color: var(--ink-2); line-height: 1.4; }
/* Animated thumbnail previews */
.anim-picker-preview {
position: relative;
height: 100px;
margin-bottom: 12px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-light), var(--bg-soft));
overflow: hidden;
}
.anim-preview-card {
position: absolute;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Preview 1 — Cartões flutuantes */
.anim-preview-1 .anim-preview-card-1 { width: 44px; height: 28px; top: 36px; left: 50%; margin-left: -22px; transform: rotate(-4deg); animation: ap1-main 4s ease-in-out infinite; z-index: 3; }
.anim-preview-1 .anim-preview-card-2 { width: 32px; height: 20px; top: 18px; left: 18%; transform: rotate(-14deg); opacity: 0.85; animation: ap1-side 5s ease-in-out infinite; }
.anim-preview-1 .anim-preview-card-3 { width: 32px; height: 20px; bottom: 18px; right: 18%; transform: rotate(14deg); opacity: 0.85; animation: ap1-side 5s ease-in-out infinite reverse; }
.anim-preview-1 .anim-preview-card-4 { width: 26px; height: 16px; top: 28px; right: 28%; transform: rotate(18deg); opacity: 0.5; }
@keyframes ap1-main { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes ap1-side { 0%,100% { transform: translate(0,0) rotate(-14deg); } 50% { transform: translate(2px,-3px) rotate(-12deg); } }
/* Preview 2 — Spotlight premium */
.anim-preview-2 .anim-preview-card-1 {
width: 48px; height: 30px;
top: 50%; left: 50%;
margin-top: -15px; margin-left: -24px;
animation: ap2-tilt 3s ease-in-out infinite;
z-index: 3;
}
.anim-preview-2 .anim-preview-sparkle {
position: absolute;
width: 4px; height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px var(--brand);
animation: ap2-sparkle 2s ease-in-out infinite;
}
.anim-preview-2 .anim-preview-sparkle-1 { top: 22%; left: 22%; animation-delay: 0s; }
.anim-preview-2 .anim-preview-sparkle-2 { top: 30%; right: 22%; animation-delay: 0.6s; }
.anim-preview-2 .anim-preview-sparkle-3 { bottom: 24%; left: 28%; animation-delay: 1.2s; }
@keyframes ap2-tilt { 0%,100% { transform: rotateY(-12deg); } 50% { transform: rotateY(12deg); } }
@keyframes ap2-sparkle { 0%,100% { opacity: 0.3; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.4); } }
/* Preview 3 — Leque de cartões */
.anim-preview-3 .anim-preview-card-1 { width: 32px; height: 20px; top: 40px; left: 50%; margin-left: -42px; transform: rotate(-18deg); }
.anim-preview-3 .anim-preview-card-2 { width: 32px; height: 20px; top: 40px; left: 50%; margin-left: -16px; z-index: 2; }
.anim-preview-3 .anim-preview-card-3 { width: 32px; height: 20px; top: 40px; left: 50%; margin-left: 10px; transform: rotate(18deg); }
.anim-preview-3:hover .anim-preview-card-1 { animation: ap3-spread-l 1s ease forwards; }
.anim-preview-3:hover .anim-preview-card-3 { animation: ap3-spread-r 1s ease forwards; }
@keyframes ap3-spread-l { to { transform: rotate(-26deg) translate(-6px, -4px); } }
@keyframes ap3-spread-r { to { transform: rotate(26deg) translate(6px, -4px); } }
/* Preview 4 — Chuva de cartões */
.anim-preview-4 { overflow: hidden; }
.anim-preview-4 .anim-preview-card { width: 22px; height: 14px; top: -20px; animation: ap4-fall 3s linear infinite; }
.anim-preview-4 .anim-preview-card-1 { left: 10%; animation-delay: 0s; transform: rotate(-12deg); }
.anim-preview-4 .anim-preview-card-2 { left: 30%; animation-delay: -0.8s; transform: rotate(8deg); }
.anim-preview-4 .anim-preview-card-3 { left: 50%; animation-delay: -1.6s; transform: rotate(-4deg); }
.anim-preview-4 .anim-preview-card-4 { left: 70%; animation-delay: -0.4s; transform: rotate(14deg); }
.anim-preview-4 .anim-preview-card-5 { left: 88%; animation-delay: -2.2s; transform: rotate(-16deg); }
@keyframes ap4-fall {
0% { top: -20px; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
/* Preview 5 — Órbita de moedas */
.anim-preview-5 .anim-preview-card-1 {
width: 40px; height: 26px;
top: 50%; left: 50%;
margin-top: -13px; margin-left: -20px;
z-index: 3;
}
.anim-preview-5 .anim-preview-coin {
position: absolute;
width: 18px; height: 18px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 0.62rem;
font-weight: 800;
top: 50%; left: 50%;
margin-top: -9px; margin-left: -9px;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.anim-preview-5 .anim-preview-coin-1 { animation: ap5-orbit-1 6s linear infinite; }
.anim-preview-5 .anim-preview-coin-2 { animation: ap5-orbit-2 6s linear infinite; }
.anim-preview-5 .anim-preview-coin-3 { animation: ap5-orbit-3 6s linear infinite; }
@keyframes ap5-orbit-1 {
0% { transform: rotate(0deg) translateX(34px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(34px) rotate(-360deg); }
}
@keyframes ap5-orbit-2 {
0% { transform: rotate(120deg) translateX(34px) rotate(-120deg); }
100% { transform: rotate(480deg) translateX(34px) rotate(-480deg); }
}
@keyframes ap5-orbit-3 {
0% { transform: rotate(240deg) translateX(34px) rotate(-240deg); }
100% { transform: rotate(600deg) translateX(34px) rotate(-600deg); }
}
/* ============================================================
Admin · hero LAYOUT picker mini-previews. Reuses the same
.anim-picker container; the inner thumbnail shows a diagrammatic
miniature of where copy and the animation sit for each variant.
============================================================ */
.layout-picker-preview {
position: relative;
height: 100px;
margin-bottom: 12px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-light), var(--bg-soft));
overflow: hidden;
padding: 10px;
}
.lp-text {
display: block;
position: absolute;
background: var(--ink-2);
border-radius: 2px;
opacity: 0.55;
}
.lp-text.lp-text-cta,
.lp-text[class*="-cta"] {
background: var(--brand);
height: 8px;
width: 36px;
border-radius: 3px;
opacity: 1;
}
.lp-visual {
position: absolute;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* L1 · Clássico — copy left (title, lead lines, CTA), visual on the right */
.layout-preview-1 .lp-text-1 { top: 16px; left: 12px; width: 46%; height: 9px; opacity: 0.85; }
.layout-preview-1 .lp-text-2 { top: 32px; left: 12px; width: 38%; height: 5px; }
.layout-preview-1 .lp-text-3 { top: 44px; left: 12px; width: 42%; height: 5px; }
.layout-preview-1 .lp-text-cta { top: 60px; left: 12px; }
.layout-preview-1 .lp-visual { top: 14px; right: 12px; width: 38%; height: 72px; }
/* L2 · Centrado — everything centered, visual below */
.layout-preview-2 .lp-text-c1 { top: 8px; left: 50%; transform: translateX(-50%); width: 60%; height: 8px; opacity: 0.85; }
.layout-preview-2 .lp-text-c2 { top: 22px; left: 50%; transform: translateX(-50%); width: 46%; height: 5px; }
.layout-preview-2 .lp-text-c3 { top: 32px; left: 50%; transform: translateX(-50%); width: 38%; height: 5px; }
.layout-preview-2 .lp-text-c-cta{ top: 44px; left: 50%; transform: translateX(-50%); }
.layout-preview-2 .lp-visual-bottom { left: 30%; right: 30%; bottom: 8px; height: 28px; border-radius: 5px; }
/* L3 · Espelhado — visual left, copy right */
.layout-preview-3 .lp-visual-left { top: 14px; left: 12px; width: 38%; height: 72px; }
.layout-preview-3 .lp-text-r1 { top: 16px; right: 12px; width: 46%; height: 9px; opacity: 0.85; }
.layout-preview-3 .lp-text-r2 { top: 32px; right: 12px; width: 38%; height: 5px; }
.layout-preview-3 .lp-text-r3 { top: 44px; right: 12px; width: 42%; height: 5px; }
.layout-preview-3 .lp-text-r-cta { top: 60px; right: 12px; }
/* L4 · Imersivo — visual fills bg, copy overlaid in a glass card */
.layout-preview-4 .lp-visual-full {
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
opacity: 0.5;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.layout-preview-4 .lp-overlay-card {
position: absolute;
top: 18px; bottom: 18px; left: 24%; right: 24%;
background: rgba(255, 255, 255, 0.82);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
padding: 10px;
}
.layout-preview-4 .lp-text-o1 { top: 10px; left: 10px; right: 10px; width: auto; height: 8px; opacity: 0.85; background: var(--ink); }
.layout-preview-4 .lp-text-o2 { top: 24px; left: 10px; width: 70%; height: 5px; background: var(--ink-2); }
.layout-preview-4 .lp-text-o-cta{ bottom: 8px; left: 10px; }
/* L5 · Minimalista — small copy, small framed visual right */
.layout-preview-5 .lp-text-m1 { top: 22px; left: 12px; width: 42%; height: 8px; opacity: 0.85; }
.layout-preview-5 .lp-text-m2 { top: 36px; left: 12px; width: 34%; height: 5px; }
.layout-preview-5 .lp-text-m-cta{ top: 54px; left: 12px; }
.layout-preview-5 .lp-visual-small {
top: 22px; right: 18px;
width: 30%; height: 56px;
border-radius: 40px / 28px;
}
/* ============================================================
Layout picker · Desktop ↔ Mobile toggle and mobile mini-previews
============================================================ */
.layout-picker-toolbar {
display: inline-flex;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
margin: 0 0 16px;
gap: 2px;
}
.lpt-btn {
appearance: none;
background: transparent;
border: 0;
color: var(--ink-2);
font-size: 0.78rem;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all .15s ease;
}
.lpt-btn:hover:not(.is-active) { color: var(--ink); }
.lpt-btn.is-active {
background: var(--surface);
color: var(--brand);
box-shadow: 0 1px 3px rgba(var(--overlay-shadow), 0.12);
}
/* Each preview holds both desktop and mobile screens. The picker's
data-view attribute drives which one is shown. */
.lp-screen { display: none; }
.layout-picker[data-view="desktop"] .lp-screen-desktop { display: block; position: absolute; inset: 0; }
.layout-picker[data-view="mobile"] .lp-screen-mobile {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
}
/* Phone frame for the mobile mini-preview — sized to fit the 100px tall preview
well while still showing clear structural differences between layouts. */
.lp-phone {
position: relative;
width: 56px;
height: 92px;
background: var(--surface);
border: 2px solid var(--line-2);
border-radius: 9px;
padding: 7px 5px 5px;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.lp-phone::before {
/* notch */
content: "";
position: absolute;
top: 2px; left: 50%;
transform: translateX(-50%);
width: 16px; height: 3px;
background: var(--line-2);
border-radius: 0 0 3px 3px;
}
/* Mobile mini-elements inside the phone frame */
.lp-m-eyebrow,
.lp-m-title,
.lp-m-line,
.lp-m-cta,
.lp-m-stats,
.lp-m-visual,
.lp-m-card {
display: block;
position: relative;
margin: 1.5px 0;
}
.lp-m-eyebrow {
width: 22px; height: 4px;
background: var(--brand);
border-radius: 2px;
opacity: 0.8;
}
.lp-m-title {
width: 40px; height: 6px;
background: var(--ink);
opacity: 0.85;
border-radius: 1.5px;
}
.lp-m-line {
width: 34px; height: 3px;
background: var(--ink-2);
opacity: 0.55;
border-radius: 1px;
margin-top: 2px;
}
.lp-m-cta {
width: 42px; height: 6px;
background: var(--brand);
border-radius: 3px;
margin-top: 3px;
}
.lp-m-cta-2 {
background: transparent;
border: 1px solid var(--brand);
height: 5px;
}
.lp-m-stats {
width: 42px; height: 8px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 2px;
margin-top: 3px;
}
.lp-m-visual {
width: 42px; height: 20px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: 3px;
margin-top: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.lp-m-visual-noframe {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
opacity: 0.85;
border-radius: 0;
height: 18px;
box-shadow: none;
}
/* Centered variant (L2) */
.is-centered { margin-left: auto !important; margin-right: auto !important; }
/* L4 mobile: backdrop visual + glass card overlay */
.lp-m-visual-bg {
position: absolute;
inset: 7px 5px;
width: auto; height: auto;
opacity: 0.45;
border-radius: 5px;
margin: 0;
z-index: 0;
}
.lp-m-card {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 5px;
padding: 5px 4px;
margin: 14px 2px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lp-m-card .lp-m-eyebrow,
.lp-m-card .lp-m-title,
.lp-m-card .lp-m-line,
.lp-m-card .lp-m-cta { margin-left: auto; margin-right: auto; }
/* Subtle hover lift on the picker cards (works in both modes) */
.layout-picker .anim-picker-card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.layout-picker .anim-picker-card:hover { transform: translateY(-2px); }
/* Footer/legal admin */
.footer-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.legal-meta-grid { display: grid; grid-template-columns: 1fr 240px; gap: 14px; margin-bottom: 4px; }
@media (max-width: 720px) { .legal-meta-grid { grid-template-columns: 1fr; } }
/* Contact page */
.contato-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; max-width: 1000px; margin: 32px auto 0; }
@media (max-width: 800px) { .contato-grid { grid-template-columns: 1fr; gap: 28px; } }
.contato-info { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; align-self: start; }
.contato-info h2 { margin: 0 0 8px; font-size: 1.15rem; }
.contato-block { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.contato-block:nth-child(3) { border-top: 1px solid var(--line); }
.contato-block-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light); color: var(--brand);
border-radius: 10px; flex-shrink: 0;
}
.contato-block strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.contato-block a { color: var(--brand); font-weight: 600; }
.contato-block a:hover { color: var(--brand-dark); }
.contato-form-wrap { background: var(--surface); padding: 32px; border: 1px solid var(--line); border-radius: 14px; }
.contato-form-wrap h2 { margin: 0 0 20px; font-size: 1.3rem; }
.contato-form-wrap .btn-lg { width: 100%; margin-top: 8px; }
.contato-success {
text-align: center;
padding: 48px 28px;
}
.contato-success svg { color: var(--brand); margin-bottom: 18px; }
.contato-success h2 { margin: 0 0 10px; }
.contato-success p { color: var(--ink-2); margin-bottom: 24px; }
/* 404 page */
.error-page { padding: 80px 24px 64px; }
.error-page-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.error-code {
font-size: clamp(5rem, 14vw, 9rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0 0 8px;
}
.error-page h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 14px; }
.error-page .lead { color: var(--ink-2); font-size: 1.05rem; max-width: 540px; margin: 0 auto 28px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.error-help h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 16px; font-weight: 700; }
.error-suggestions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
text-align: left;
max-width: 640px;
margin: 0 auto;
}
@media (max-width: 600px) { .error-suggestions { grid-template-columns: 1fr; } }
.error-suggestion {
display: flex;
gap: 14px;
align-items: center;
padding: 16px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
transition: all .15s;
}
.error-suggestion:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--overlay-shadow), 0.08); }
.error-suggestion-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light); color: var(--brand);
border-radius: 10px; flex-shrink: 0;
font-size: 1.1rem;
}
.error-suggestion strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.error-suggestion small { display: block; font-size: 0.8rem; color: var(--ink-2); margin-top: 2px; }
.legal-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
padding-bottom: 0;
}
.legal-tab {
padding: 10px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
color: var(--ink-2);
font-size: 0.9rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: color .15s, border-color .15s;
}
.legal-tab:hover { color: var(--ink); }
.legal-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.legal-panel { display: none; }
.legal-panel.is-active { display: block; }
.legal-body-html {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.55;
min-height: 380px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.legal-body-block { display: flex; flex-direction: column; gap: 0; }
.legal-body-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
gap: 12px;
}
.legal-body-modes { display: inline-flex; gap: 4px; background: var(--bg-soft); padding: 3px; border-radius: 8px; border: 1px solid var(--line); }
.legal-body-mode {
padding: 5px 12px;
background: transparent;
border: 0;
border-radius: 5px;
color: var(--ink-2);
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .15s;
}
.legal-body-mode:hover { color: var(--ink); }
.legal-body-mode.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.06); }
.legal-body-toolbar {
display: flex;
gap: 4px;
flex-wrap: wrap;
padding: 6px 8px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-bottom: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.legal-body-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 28px;
padding: 0 8px;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
color: var(--ink-2);
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .12s;
}
.legal-body-toolbar button:hover { background: var(--surface); color: var(--brand); border-color: var(--line); }
.legal-body-preview {
min-height: 380px;
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--line);
border-top: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow-y: auto;
max-height: 600px;
}
.legal-body-preview h2 { margin-top: 24px; }
.legal-body-preview h2:first-child { margin-top: 0; }
/* Live preview (uses --theme-* CSS vars updated by JS) */
.theme-preview {
--theme-brand: #1a8754;
--theme-brand-dark: #0d5732;
--theme-brand-light: #d6efe1;
--theme-ink: #0d1f2d;
--theme-ink-2: #475569;
--theme-bg: #f5f7fa;
background: var(--theme-bg);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--line);
transition: background .2s;
}
.theme-preview-header {
background: #fff;
border-bottom: 1px solid var(--line);
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.theme-preview-logo { font-weight: 800; color: var(--theme-ink); transition: color .2s; }
.theme-preview-nav { display: flex; gap: 16px; }
.theme-preview-nav a {
font-size: 0.88rem;
font-weight: 500;
color: var(--theme-ink-2);
transition: color .2s;
cursor: pointer;
}
.theme-preview-nav a:hover { color: var(--theme-brand-dark); }
.theme-preview-body { padding: 28px 24px; }
.theme-preview-eyebrow {
display: inline-block;
padding: 4px 12px;
background: var(--theme-brand-light);
color: var(--theme-brand-dark);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
transition: all .2s;
}
.theme-preview-body h3 {
font-size: 1.4rem;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: var(--theme-ink);
transition: color .2s;
}
.theme-preview-body p {
margin: 0 0 18px;
font-size: 0.92rem;
color: var(--theme-ink-2);
transition: color .2s;
}
.theme-preview-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.theme-preview-btn {
padding: 8px 18px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all .2s;
}
.theme-preview-btn-primary {
background: var(--theme-brand);
color: #fff;
}
.theme-preview-btn-outline {
background: transparent;
border: 1px solid var(--line-2);
color: var(--theme-ink);
}
.theme-preview-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-preview-chip {
font-size: 0.74rem;
font-weight: 600;
padding: 4px 12px;
background: #fff;
border: 1px solid var(--theme-brand-light);
color: var(--theme-brand-dark);
border-radius: 999px;
transition: all .2s;
}
/* Asset cards (logo, favicon, OG) */
.theme-asset-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 20px;
}
.theme-asset-card h3 {
margin: 0 0 4px;
font-size: 0.92rem;
font-weight: 700;
color: var(--ink);
}
.theme-asset-card > p.muted { margin: 0 0 14px; }
.theme-asset-preview {
background: var(--bg-soft);
border: 1px dashed var(--line);
border-radius: 8px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.theme-asset-preview-dark {
background: linear-gradient(135deg, #0d1f2d 0%, #1e3a5f 100%);
}
.theme-asset-preview img { display: block; }
.theme-asset-preview-empty {
padding: 24px;
background: var(--bg-soft);
border: 1px dashed var(--line);
border-radius: 8px;
font-size: 0.82rem;
color: var(--ink-2);
text-align: center;
margin-bottom: 12px;
}
.theme-asset-remove {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--ink-2);
margin-bottom: 12px;
cursor: pointer;
}
.theme-asset-remove input { accent-color: var(--danger); }
/* Integrations status pills */
.admin-integrations-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 20px;
}
.admin-integration-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg-soft);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
}
.admin-int-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--line-2);
flex-shrink: 0;
}
.admin-int-dot.is-on {
background: var(--brand);
box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.2);
}
.admin-integration-status:has(.is-on) {
background: var(--brand-light);
color: var(--brand-dark);
}
/* Info / hint box */
.admin-info-box {
background: rgba(245, 158, 11, 0.06);
border-left: 3px solid #f59e0b;
border-radius: 8px;
padding: 16px 20px;
margin-top: 24px;
font-size: 0.88rem;
}
.admin-info-box strong { display: block; margin-bottom: 6px; color: var(--ink); }
.admin-info-box p { margin: 0 0 10px; line-height: 1.55; color: var(--ink-2); }
.admin-info-box p:last-child { margin-bottom: 0; }
.admin-info-box code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.admin-form code { background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.admin-form a { color: var(--brand-dark); font-weight: 600; }
.admin-form a:hover { color: var(--brand); }
/* Push opt-in live preview (admin) */
.push-optin-preview {
background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg-soft) 100%);
border: 1px dashed var(--brand);
border-radius: 12px;
padding: 24px;
margin-bottom: 18px;
display: flex;
justify-content: center;
}
.push-optin-preview-bar {
width: 100%;
max-width: 440px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(13, 31, 45, 0.16);
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.push-optin-preview-bar .push-bar-text strong {
display: block;
font-size: 0.92rem;
margin-bottom: 4px;
color: var(--ink);
}
.push-optin-preview-bar .push-bar-text p {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--ink-2);
}
.push-optin-preview-bar .push-bar-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
@media (max-width: 760px) {
.admin-loans-row {
grid-template-columns: 1fr;
gap: 8px;
}
.admin-loans-row.admin-loans-head { display: none; }
}
.card-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.card-list-row {
display: grid;
grid-template-columns: 60px 1fr 180px 100px 100px 180px;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
}
.card-list-row:last-child { border-bottom: 0; }
.card-list-row.header { background: var(--bg-soft); font-weight: 600; font-size: 0.85rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.card-list-thumb { width: 60px; height: 38px; border-radius: 3px; overflow: hidden; background: var(--bg-soft); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-list-thumb > * { width: 100%; height: 100%; padding: 4px 5px; }
.card-list-thumb .card-art-chip { left: 4px; top: 50%; width: 8px; height: 6px; filter: none; }
.card-list-thumb .card-art-contactless { display: none; }
.card-list-thumb .card-art-issuer { font-size: 0.45rem; font-weight: 700; letter-spacing: 0; text-shadow: none; max-width: 70%; line-height: 1.05; }
.card-list-thumb .card-art-name, .card-list-thumb .card-art-network { display: none; }
.card-list-thumb .card-art-shine, .card-list-thumb .card-art-placeholder::after { display: none; }
.compare-slot-thumb > * { width: 100%; height: 100%; padding: 3px 4px; }
.compare-slot-thumb .card-art-chip { left: 3px; top: 50%; width: 7px; height: 5px; filter: none; }
.compare-slot-thumb .card-art-contactless { left: 13px; top: 50%; width: 6px; height: 6px; min-width: 0; min-height: 0; opacity: 0.95; }
.compare-slot-thumb .card-art-issuer { font-size: 0.42rem; font-weight: 700; letter-spacing: 0; text-shadow: none; line-height: 1.05; max-width: 70%; }
.compare-slot-thumb .card-art-name { display: none; }
.compare-slot-thumb .card-art-bottom { justify-content: flex-end; }
.compare-slot-thumb .card-art-network { height: 10px; }
.compare-slot-thumb .card-art-network .net-logo { height: 10px; }
.compare-slot-thumb .card-art-network .net-mc { height: 9px; }
.compare-slot-thumb .card-art-network .net-visa { height: 6px; }
.compare-slot-thumb .card-art-network .net-amex { height: 8px; }
.compare-slot-thumb .card-art-shine, .compare-slot-thumb .card-art-placeholder::after { display: none; }
.card-list-actions { display: flex; gap: 8px; justify-content: flex-end; }
.login-box {
max-width: 420px;
margin: 80px auto;
background: var(--surface);
padding: 40px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.login-box h1 { margin-bottom: 8px; text-align: center; }
.login-box p { text-align: center; color: var(--ink-2); margin-bottom: 24px; }
.alert {
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 0.9rem;
}
.alert-success { background: var(--brand-light); color: var(--brand-dark); border: 1px solid var(--brand); }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
/* === Empty / Section === */
.section { padding: 56px 0; }
.section h2 { text-align: center; margin-bottom: 12px; }
.section .section-lead { text-align: center; color: var(--ink-2); max-width: 640px; margin: 0 auto 40px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guide-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
transition: transform .2s, box-shadow .2s;
}
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.guide-card .num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: var(--brand-light); color: var(--brand-dark);
border-radius: 999px; font-weight: 700;
margin-bottom: 16px;
}
.guide-card h3 { margin-bottom: 8px; }
/* === Responsive === */
@media (max-width: 900px) {
h1 { font-size: 2rem; }
.hero { padding: 56px 0 32px; }
.hero h1 { font-size: 2.2rem; }
.filters { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 10px; }
.filters input[name="q"] { grid-column: 1 / -1; }
.filters .filter-checkbox { grid-column: 1 / span 2; }
.filters .btn-sm { grid-column: 3; justify-self: end; min-width: 90px; }
.detail-grid { grid-template-columns: 1fr; gap: 24px; }
.detail-quickstats { grid-template-columns: repeat(3, 1fr); }
.pros-cons { grid-template-columns: 1fr; }
.specs-grid { grid-template-columns: 1fr; }
.spec-row:nth-child(odd) { border-right: 0; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
.guide-grid { grid-template-columns: 1fr; }
.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
.form-checkboxes { grid-template-columns: 1fr 1fr; }
.card-list-row { grid-template-columns: 1fr; gap: 8px; }
.card-list-row.header { display: none; }
.compare-bar-inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
.main-nav { display: none; }
.header-cta { display: none; }
.mobile-menu-trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px; height: 42px;
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
padding: 0;
transition: all .15s;
margin-left: auto;
}
.mobile-menu-trigger:hover { border-color: var(--brand); background: var(--brand-light); }
.mobile-menu-bar {
display: block;
width: 18px; height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform .25s, opacity .15s;
}
body.mobile-menu-open .mobile-menu-trigger .mobile-menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-menu-open .mobile-menu-trigger .mobile-menu-bar:nth-child(2) { opacity: 0; }
body.mobile-menu-open .mobile-menu-trigger .mobile-menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-backdrop {
display: block;
position: fixed; inset: 0;
background: rgba(13, 31, 45, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .25s;
z-index: 199;
}
.mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu {
display: flex;
flex-direction: column;
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(86vw, 360px);
/* Use the theme surface token so the menu inherits the right colour in
light AND dark mode. The previous hardcoded #fff stayed white in dark
mode and made the .logo text (which uses var(--ink), a light colour
in dark) invisible against it. */
background: var(--surface);
color: var(--ink);
z-index: 200;
transform: translateX(100%);
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
overflow-y: auto;
}
.mobile-menu[hidden] { display: flex; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
/* Match the menu surface so the sticky header doesn't reveal a white
strip in dark mode. */
background: var(--surface);
z-index: 1;
}
.mobile-menu-header .logo { font-size: 1.05rem; }
.mobile-menu-close {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-soft);
border: 0;
border-radius: 50%;
color: var(--ink-2);
cursor: pointer;
transition: background .15s, color .15s;
}
.mobile-menu-close:hover { background: var(--line); color: var(--danger); }
.mobile-menu-nav {
flex: 1;
padding: 12px 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-menu-link,
.mobile-menu-sublink {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border-radius: 12px;
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
transition: background .15s;
position: relative;
}
.mobile-menu-link:hover,
.mobile-menu-sublink:hover { background: var(--bg-soft); }
.mobile-menu-link.is-featured {
background: linear-gradient(135deg, rgba(26, 135, 84, 0.08), rgba(26, 135, 84, 0.04));
border: 1px solid rgba(26, 135, 84, 0.15);
}
.mobile-menu-link.is-featured .mobile-menu-icon { background: var(--brand); color: #fff; }
.mobile-menu-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 10px;
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
}
.mobile-menu-icon-sm { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 8px; }
.mobile-menu-badge {
margin-left: auto;
padding: 3px 9px;
background: var(--brand);
color: #fff;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
}
.mobile-menu-sublink {
padding: 10px 14px;
font-size: 0.88rem;
font-weight: 500;
color: var(--ink-2);
}
.mobile-menu-sublink:hover { color: var(--ink); }
.mobile-menu-section {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.mobile-menu-section-title {
display: block;
padding: 6px 14px 8px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-2);
}
.mobile-menu-footer {
padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--line);
/* Tema (theme-switch) + Admin (btn) sit side by side and share the row.
Without explicit flex sizing they were both width:100% and one got
truncated. Now each takes 50% with a gap between. */
display: flex;
gap: 10px;
align-items: stretch;
background: var(--surface);
}
.mobile-menu-footer > * {
flex: 1 1 0;
min-width: 0;
/* Both children visually balance — equal height, equal width */
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-menu-footer .theme-switch-mobile {
/* Pill-style label+icon button. The sun/moon icons live in an absolute
slot on the left so they share the same position without one sitting
on top of the label (the base theme-switch rule makes the moon
position:absolute without coords, which in a flex row places it
roughly where the sun was — overlapping the label text). */
position: relative;
width: auto;
padding: 0 16px 0 38px;
gap: 0;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--bg-soft);
color: var(--ink);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
}
.mobile-menu-footer .theme-switch-mobile:hover {
background: var(--brand-light);
color: var(--brand-dark);
border-color: var(--brand);
}
.mobile-menu-footer .theme-switch-mobile .theme-icon-sun,
.mobile-menu-footer .theme-switch-mobile .theme-icon-moon {
position: absolute;
left: 14px;
top: 50%;
width: 16px; height: 16px;
}
.mobile-menu-footer .theme-switch-mobile .theme-icon-sun {
transform: translateY(-50%) rotate(0) scale(1);
opacity: 1;
}
.mobile-menu-footer .theme-switch-mobile .theme-icon-moon {
transform: translateY(-50%) rotate(-90deg) scale(0.5);
opacity: 0;
}
html[data-theme="dark"] .mobile-menu-footer .theme-switch-mobile .theme-icon-sun {
transform: translateY(-50%) rotate(90deg) scale(0.5);
opacity: 0;
}
html[data-theme="dark"] .mobile-menu-footer .theme-switch-mobile .theme-icon-moon {
transform: translateY(-50%) rotate(0) scale(1);
opacity: 1;
}
.mobile-menu-footer .theme-switch-label { display: inline; }
.mobile-menu-footer .btn { width: 100%; padding: 0 14px; }
.cards-grid { grid-template-columns: 1fr; gap: 12px; }
.hero h1 { font-size: 1.8rem; }
.hero p.lead { font-size: 1.05rem; }
/* === Card tile: horizontal layout on mobile === */
.card-tile { flex-direction: row; align-items: stretch; overflow: hidden; }
/* Scope the mobile card-art override to listing tiles ONLY — the bare
`.card-art` selector used to bleed into hero animations, capping the
hero card visual at 150px wide regardless of its container. */
.card-tile .card-art {
width: 38%; max-width: 150px;
margin: 12px 0 12px 12px;
flex-shrink: 0;
align-self: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Mobile compare table: hide nome dentro da miniatura (sobrepunha chip/contactless) */
.compare-header-row .card-art .card-art-name { display: none; }
.compare-header-row .card-art .card-art-bottom { justify-content: flex-end; }
.card-body { padding: 12px 14px; flex: 1; min-width: 0; }
.card-issuer { font-size: 0.7rem; margin-bottom: 2px; }
.card-name { font-size: 0.95rem; margin-bottom: 4px; line-height: 1.2; }
.card-rating { margin-bottom: 8px; font-size: 0.8rem; }
.card-rating .star-svg { width: 12px; height: 12px; }
.card-stats {
grid-template-columns: 1fr 1fr;
padding: 8px 0;
margin-bottom: 8px;
gap: 6px;
}
.card-stats .stat:nth-child(n+3) { display: none; }
.stat .stat-label { font-size: 0.62rem; }
.stat .stat-value { font-size: 0.82rem; }
.card-tile .card-highlights { display: none; }
.card-toggle {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 0;
padding: 6px 0;
margin: 4px 0 2px;
color: var(--brand);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
align-self: flex-start;
transition: color .15s;
}
.card-toggle:hover, .card-toggle:active { color: var(--brand-dark); }
.card-toggle-icon { transition: transform .25s; flex-shrink: 0; }
.card-tile.is-expanded .card-toggle-icon { transform: rotate(180deg); }
.card-tile.is-expanded .card-stats .stat:nth-child(n+3) { display: block; }
.card-tile.is-expanded .card-highlights {
display: block;
font-size: 0.78rem;
margin: 4px 0 8px;
}
.card-tile.is-expanded .card-highlights li { padding: 2px 0; gap: 6px; }
.card-actions { flex-direction: column; gap: 6px; align-items: stretch; }
.card-actions .btn { padding: 7px 12px; font-size: 0.78rem; }
.card-actions .compare-toggle { padding: 6px 10px; font-size: 0.72rem; justify-content: center; }
/* === Hide 3rd card column on mobile (handled by JS but also CSS fallback) === */
/* JS removes the 4th col + cells on mobile; this is a fallback if JS doesn't load */
.compare-table:not(.js-mobile-trimmed) colgroup col:nth-of-type(4) {
width: 0;
visibility: collapse;
}
.compare-table:not(.js-mobile-trimmed) tr > *:nth-child(4) { display: none; }
/* === Compare page mobile: clean spacing and breathing === */
.compare-table-wrap { overflow: visible; padding: 0; margin: 0 0 32px; }
.compare-table {
min-width: 0;
table-layout: fixed;
overflow: visible;
border-radius: 0;
border-spacing: 0;
}
.compare-col-label { width: 96px; background: transparent; }
.compare-col-card { background: transparent; }
/* Default cells: more breathing on mobile */
.compare-table th, .compare-table td {
padding: 14px 12px;
vertical-align: middle;
}
/* Label cells */
.compare-table th {
font-size: 0.68rem;
padding: 14px 8px 14px 4px;
line-height: 1.3;
background: transparent;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink-2);
text-transform: uppercase;
}
/* Value cells: white card with gap-left */
.compare-table td {
font-size: 0.86rem;
line-height: 1.4;
background: #fff;
border-left: 8px solid var(--bg);
border-right: 1px solid var(--line);
border-bottom: 0;
}
/* Header row: continuous bar with WHITE gaps (no content visible behind, but cards visually separated) */
.compare-header-row td {
padding: 18px 12px !important;
text-align: center;
vertical-align: top;
background: #fff;
border-top: 0;
border-bottom: 1px solid var(--line);
border-left: 10px solid #fff;
border-right: 0;
}
.compare-header-row td:first-of-type { border-left: 14px solid #fff; }
.compare-header-row td:last-child { border-right: 14px solid #fff; }
.compare-header-row th {
position: sticky; top: 72px; z-index: 5;
background: var(--bg);
padding: 0 !important;
}
/* Bottom row rounded corners */
.compare-table tbody > tr:last-of-type td {
border-bottom: 1px solid var(--line);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Card content in header */
.compare-header-row .card-art {
margin: 0 auto 12px !important;
width: 100%;
max-width: 130px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.compare-header-row .card-issuer {
font-size: 0.6rem;
margin-bottom: 3px;
line-height: 1.2;
color: var(--ink-2);
}
.compare-header-row .card-name {
font-size: 0.85rem !important;
font-weight: 700;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
.compare-header-row .card-rating {
font-size: 0.72rem;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.compare-header-row .card-rating .star-svg { width: 10px; height: 10px; }
.compare-header-row .btn {
display: block;
width: 100%;
padding: 7px 10px !important;
font-size: 0.72rem !important;
margin: 0 !important;
}
.compare-header-row .btn + .btn { margin-top: 6px !important; }
/* Section header mobile: clean title with brand accent bar */
.compare-table tr.section-row th {
background: transparent !important;
color: var(--ink) !important;
padding: 6px 0 14px !important;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.01em;
text-transform: none;
border-radius: 0;
border-top: 28px solid var(--bg) !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.compare-table tr.section-row th::before {
width: 3px !important; height: 16px !important;
margin-right: 10px !important;
}
/* === Filters as bottom sheet on mobile === */
.filter-trigger {
display: inline-flex;
position: sticky;
top: 80px;
z-index: 80;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
box-shadow: 0 4px 14px rgba(13, 31, 45, 0.08);
}
.filters {
display: grid;
position: fixed;
left: 0; right: 0;
bottom: 0;
top: auto;
border-radius: 18px 18px 0 0;
padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0));
margin: 0;
transform: translateY(100%);
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 200;
max-height: 85vh;
overflow-y: auto;
grid-template-columns: 1fr 1fr;
gap: 10px;
box-shadow: 0 -10px 40px rgba(13, 31, 45, 0.18);
}
.filters.is-open { transform: translateY(0); }
.filters input[name="q"] { grid-column: 1 / -1; }
.filter-sheet-header {
display: flex;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
padding: 2px 2px 8px;
margin-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.filter-sheet-header strong { font-size: 1.05rem; color: var(--ink); }
.filter-close {
background: var(--bg-soft); border: 0; cursor: pointer;
color: var(--ink-2); font-size: 1.4rem; line-height: 1;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.filter-close:hover { background: var(--line); color: var(--danger); }
.filters input[type="text"], .filters select { height: 44px; font-size: 0.95rem; }
.filters .filter-checkbox { grid-column: 1 / -1; height: 44px; justify-content: flex-start; padding: 0 8px; background: var(--bg-soft); }
.filters .btn-sm { grid-column: 1 / -1; height: 46px; font-size: 0.95rem; justify-self: stretch; min-width: 0; }
/* App-like compare bar on mobile */
.compare-bar-inner {
display: grid;
grid-template-areas:
"info clear"
"slots slots"
"go go";
grid-template-columns: 1fr auto;
gap: 10px 12px;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
align-items: center;
}
.compare-bar-info {
grid-area: info;
font-size: 0.85rem;
font-weight: 500;
color: var(--ink);
}
.compare-bar-info strong { color: var(--brand); font-size: 1rem; }
.compare-slots {
grid-area: slots;
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
flex: none;
width: 100%;
}
.compare-slot {
flex: 0 0 auto;
width: 100%;
min-width: 0;
min-height: 60px;
padding: 8px 12px;
gap: 12px;
font-size: 0.88rem;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(13, 31, 45, 0.04);
align-items: center;
}
.compare-slot:not(.filled) { display: none; }
.compare-slot-thumb {
width: 78px; height: 49px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.compare-slot-thumb .card-art-chip {
left: 7px; top: 50%; width: 11px; height: 8px;
}
.compare-slot-thumb .card-art-contactless {
left: 21px; top: 50%; width: 8px; height: 8px;
}
.compare-slot-thumb .card-art-network { height: 13px; }
.compare-slot-thumb .card-art-network .net-logo { height: 13px; }
.compare-slot-thumb .card-art-network .net-mc { height: 12px; }
.compare-slot-thumb .card-art-network .net-visa { height: 8px; }
.compare-slot-thumb .card-art-network .net-amex { height: 10px; }
.compare-slot-thumb .card-art-issuer {
font-size: 0.42rem;
max-width: 60%;
line-height: 1.05;
letter-spacing: 0;
font-weight: 700;
}
.compare-slot-name {
flex: 1; min-width: 0;
max-width: none;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compare-slot-remove {
padding: 4px;
font-size: 1.05rem;
line-height: 1;
border-radius: 50%;
color: var(--ink-2);
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.compare-slot-remove:hover { background: rgba(220, 38, 38, 0.1); color: var(--danger); }
#compare-go {
grid-area: go;
width: 100%;
padding: 12px 18px;
font-size: 0.95rem;
box-shadow: 0 4px 14px rgba(26, 135, 84, 0.3);
}
#compare-go.disabled {
background: var(--bg-soft);
color: var(--ink-2);
box-shadow: none;
border: 1px solid var(--line-2);
}
#compare-clear {
grid-area: clear;
background: transparent;
border: 0;
color: var(--ink-2);
font-size: 0.8rem;
font-weight: 500;
padding: 4px 6px;
height: auto;
border-radius: 6px;
box-shadow: none;
}
#compare-clear:hover {
color: var(--danger);
background: rgba(220, 38, 38, 0.08);
transform: none;
box-shadow: none;
}
/* Filters with more breathing on mobile */
.filters {
padding: 10px;
border-radius: 12px;
}
.filters input[type="text"], .filters select { height: 38px; font-size: 0.9rem; }
.filters .btn-sm { height: 38px; font-size: 0.9rem; }
}
/* === Best Cards Page === */
.best-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 64px 0 40px;
text-align: center;
}
.best-hero h1 {
font-size: 2.5rem;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.best-hero .lead {
font-size: 1.1rem;
color: var(--ink-2);
max-width: 640px;
margin: 0 auto 32px;
}
.best-toc {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
.best-toc-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
transition: all .15s;
}
.best-toc-link:hover {
border-color: var(--brand);
color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--overlay-shadow), 0.18);
}
.best-toc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 50%;
font-size: 0.85rem;
font-weight: 700;
}
/* Mobile-only category trigger + bottom sheet (desktop hides these) */
.best-toc-trigger { display: none; }
.best-toc-backdrop {
position: fixed; inset: 0;
background: rgba(13, 31, 45, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity .25s;
z-index: 199;
}
.best-toc-backdrop.is-open { opacity: 1; pointer-events: auto; }
.best-toc-sheet-header { display: none; }
.best-body { padding: 32px 24px 80px; }
.best-section {
padding: 48px 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: 90px;
}
.best-section:last-of-type { border-bottom: 0; }
.best-section-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 32px;
}
.best-section-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: var(--brand);
color: #fff;
border-radius: 14px;
font-size: 1.4rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(26, 135, 84, 0.25);
}
.best-section-header h2 {
font-size: 1.7rem;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.best-section-header .muted { margin: 0; font-size: 0.95rem; }
.best-winner {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 40px;
align-items: start;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: 0 4px 20px rgba(13, 31, 45, 0.04);
}
.best-winner-art {
position: relative;
}
.best-winner-art .card-art {
margin: 0;
max-width: 100%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.winner-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 14px;
box-shadow: 0 2px 8px rgba(26, 135, 84, 0.3);
}
.winner-badge::before { content: '★'; font-size: 0.85rem; }
.best-winner-info .card-issuer {
font-size: 0.75rem;
margin-bottom: 4px;
color: var(--ink-2);
}
.best-winner-name {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--ink);
}
.best-winner-info .card-rating { margin-bottom: 20px; }
.best-winner-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 18px 0;
margin-bottom: 24px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.best-winner-stats .stat-value { font-size: 1.1rem; font-weight: 700; }
.best-winner-why h4 {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-dark);
margin: 0 0 8px;
}
.best-winner-why p {
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 24px;
}
.best-winner-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ---- Accordions on winner card ---- */
.best-winner-accordions {
grid-column: 1 / -1;
margin-top: 28px;
border-top: 1px solid var(--line);
}
.best-winner-desc {
margin: 18px 4px 8px;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-2);
}
.best-acc-item {
border-bottom: 1px solid var(--line);
}
.best-acc-item:first-of-type {
border-top: 1px solid var(--line);
}
.best-winner-desc + .best-acc-item:first-of-type {
border-top: 1px solid var(--line);
margin-top: 8px;
}
.best-acc-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 4px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--ink);
font-size: 0.95rem;
font-weight: 700;
font-family: inherit;
text-align: left;
transition: color .15s;
}
.best-acc-btn:hover { color: var(--brand-dark); }
.best-acc-chevron {
flex-shrink: 0;
color: var(--brand-dark);
transition: transform .25s ease;
}
.best-acc-btn[aria-expanded="true"] .best-acc-chevron {
transform: rotate(180deg);
}
.best-acc-content {
overflow: hidden;
max-height: 0;
transition: max-height .35s ease;
}
.best-acc-content[hidden] { display: block; }
.best-acc-content.is-open { max-height: var(--acc-h, 2000px); }
.best-acc-inner {
padding: 4px 4px 20px;
}
.acc-proscons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.acc-pros h5,
.acc-cons h5 {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 10px;
}
.acc-pros h5 { color: var(--brand); }
.acc-cons h5 { color: var(--danger); }
.acc-pros ul,
.acc-cons ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.acc-pros li,
.acc-cons li {
font-size: 0.9rem;
line-height: 1.45;
color: var(--ink);
padding-left: 22px;
position: relative;
}
.acc-pros li::before {
content: '✓';
position: absolute;
left: 0; top: 0;
color: var(--brand);
font-weight: 700;
}
.acc-cons li::before {
content: '×';
position: absolute;
left: 0; top: -2px;
color: var(--danger);
font-weight: 700;
font-size: 1.1rem;
}
.acc-specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--line);
}
.acc-spec {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 12px 4px;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.acc-spec:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 16px; }
.acc-spec:nth-child(even) { padding-left: 16px; }
.acc-spec span { color: var(--ink-2); }
.acc-spec strong { color: var(--ink); font-weight: 700; }
.acc-tech {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.acc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
border: 1px solid;
}
.acc-chip.is-yes {
background: rgba(26, 135, 84, 0.08);
border-color: rgba(26, 135, 84, 0.25);
color: var(--brand-dark);
}
.acc-chip.is-yes::before { content: '✓'; font-weight: 700; }
.acc-chip.is-no {
background: #f6f6f6;
border-color: var(--line);
color: #99a1a8;
text-decoration: line-through;
}
.acc-chip.is-no::before { content: '×'; }
.acc-reqs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.acc-reqs li {
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink);
padding-left: 22px;
position: relative;
}
.acc-reqs li::before {
content: '•';
position: absolute;
left: 6px; top: -2px;
color: var(--brand);
font-weight: 700;
font-size: 1.2rem;
}
.best-runners { margin-top: 24px; padding-top: 24px; }
.best-runners-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
margin: 0 0 16px;
}
.best-runners-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.best-runner {
display: grid;
grid-template-columns: 120px 1fr;
gap: 18px;
align-items: center;
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
transition: all .15s;
color: var(--ink);
}
.best-runner:hover {
border-color: var(--brand);
box-shadow: 0 4px 14px rgba(13, 31, 45, 0.08);
transform: translateY(-1px);
}
.best-runner-art .card-art {
margin: 0;
width: 120px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.best-runner-art .card-art-name {
display: none;
}
.best-runner-art .card-art-bottom { justify-content: flex-end; }
.best-runner-info { min-width: 0; }
.best-runner-info .card-issuer {
font-size: 0.7rem;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-2);
}
.best-runner-name {
font-size: 0.98rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.best-runner-meta {
font-size: 0.82rem;
color: var(--ink-2);
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}
.best-runner-meta .dot { color: var(--line-2); }
/* === Best categories hub === */
.best-cat-hub { padding-bottom: 64px; }
.best-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.best-cat-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
color: var(--ink);
text-decoration: none;
transition: all .18s;
position: relative;
}
.best-cat-card:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(13, 31, 45, 0.08);
}
.best-cat-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 12px;
font-size: 1.2rem;
font-weight: 700;
}
.best-cat-card h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.best-cat-card p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink-2);
flex: 1;
}
.best-cat-count {
margin-top: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-dark);
}
/* === Best category detail page === */
.best-hero-cat { text-align: left; padding-top: 32px; }
.best-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--ink-2);
margin-bottom: 20px;
}
.best-breadcrumb a { color: var(--brand-dark); }
.best-breadcrumb a:hover { color: var(--brand); }
.best-breadcrumb-sep { color: var(--line-2); }
.best-cat-header {
display: flex;
align-items: flex-start;
gap: 18px;
}
.best-cat-header .best-section-icon {
flex-shrink: 0;
margin-top: 6px;
}
.best-cat-header-text { flex: 1; min-width: 0; }
.best-cat-header-text h1 {
margin: 0 0 6px;
font-size: clamp(1.8rem, 4vw, 2.4rem);
letter-spacing: -0.01em;
}
.best-cat-header-text p.muted {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
.best-cat-count-hero {
margin: 14px 0 0;
font-size: 0.9rem;
color: var(--ink-2);
}
.best-cat-count-hero strong { color: var(--ink); font-weight: 700; }
.best-cat-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.best-cat-list .best-section { padding: 0; border-bottom: 0; }
.best-cat-list .best-section + .best-section { padding-top: 0; }
/* Pre-footer YMYL disclaimer band — sits on every page between content and
the site footer. Kept visually low-contrast so it reads as a quiet note,
not an interruption. */
.pre-footer-disclaimer {
padding: 24px 0 8px;
background: transparent;
}
.pre-footer-disclaimer .financial-disclaimer-compact {
margin: 0;
}
/* Compact "informational, not financial advice" disclaimer — used on product,
comparison, simulator, recommendation and "best of" pages. The full version
(with sources block) lives in the post.php block above. Single source of
truth is `financial_disclaimer_html()` in includes/functions.php. */
.financial-disclaimer-compact {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 32px auto;
max-width: 920px;
padding: 14px 18px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 10px;
font-size: 0.85rem;
line-height: 1.55;
color: var(--ink-2);
}
.financial-disclaimer-compact svg {
flex-shrink: 0;
color: var(--brand);
margin-top: 2px;
}
.financial-disclaimer-compact strong { color: var(--ink); font-weight: 600; }
.financial-disclaimer-compact a {
color: var(--brand);
font-weight: 600;
white-space: nowrap;
}
.financial-disclaimer-compact a:hover { color: var(--brand-dark); }
@media (max-width: 600px) {
.financial-disclaimer-compact { font-size: 0.8rem; padding: 12px 14px; }
}
/* Legacy alias — old pages may still reference .best-disclaimer; mirror the
same styling so transitional markup doesn't break. */
.best-disclaimer {
margin-top: 64px;
padding: 24px 28px;
background: var(--bg-soft);
border-radius: 12px;
border-left: 3px solid var(--brand);
}
.best-disclaimer strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 0.9rem; }
.best-disclaimer p { margin: 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 720px) {
.best-hero { padding: 40px 0 24px; }
.best-hero h1 { font-size: 1.85rem; }
.best-hero .lead { font-size: 1rem; }
.best-toc { gap: 6px; }
.best-toc-link { padding: 6px 12px; font-size: 0.78rem; }
.best-section-header { gap: 12px; margin-bottom: 20px; }
.best-section-icon { width: 40px; height: 40px; font-size: 1.15rem; }
.best-section-header h2 { font-size: 1.3rem; }
.best-section { padding: 32px 0; }
.best-winner {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
.best-winner-art .card-art { max-width: 260px; margin: 0 auto; }
.best-winner-name { font-size: 1.2rem; }
.best-winner-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; }
.best-winner-actions .btn { flex: 1; }
.best-runners-grid { grid-template-columns: 1fr; }
.best-runner { grid-template-columns: 70px 1fr; }
.best-runner-art .card-art { width: 70px; }
/* Categorias: trigger sticky + bottom sheet em vez das pílulas empilhadas */
.best-toc-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
height: 46px;
padding: 0 14px;
margin-top: 18px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--ink);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(13, 31, 45, 0.08);
font-family: inherit;
text-align: left;
position: sticky;
top: 80px;
z-index: 80;
}
.best-toc-trigger > svg:first-child { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.best-toc-trigger-text { flex: 1; min-width: 0; }
.best-toc-trigger-chevron { color: var(--ink-2); transition: transform .2s; flex-shrink: 0; }
.best-toc-trigger[aria-expanded="true"] .best-toc-trigger-chevron { transform: rotate(180deg); }
.best-toc {
position: fixed;
left: 0; right: 0; bottom: 0;
top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
border-radius: 18px 18px 0 0;
padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0));
margin: 0;
max-width: none;
background: #fff;
transform: translateY(100%);
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 200;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 -10px 40px rgba(13, 31, 45, 0.18);
justify-content: stretch;
}
.best-toc.is-open { transform: translateY(0); }
.best-toc-sheet-header {
display: flex;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
padding: 2px 2px 10px;
margin-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.best-toc-sheet-header strong { font-size: 1.05rem; color: var(--ink); }
.best-toc-close {
background: var(--bg-soft); border: 0; cursor: pointer;
color: var(--ink-2); font-size: 1.4rem; line-height: 1;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.best-toc-close:hover { background: var(--line); color: var(--danger); }
.best-toc-link {
justify-content: flex-start;
padding: 12px 14px;
background: var(--bg-soft);
border: 1px solid transparent;
border-radius: 12px;
font-size: 0.88rem;
}
.best-toc-link:hover { transform: none; box-shadow: none; background: var(--brand-light); }
.best-winner-accordions { margin-top: 20px; }
.best-acc-btn { padding: 14px 4px; font-size: 0.9rem; }
.best-winner-compare { margin-left: 0; width: 100%; justify-content: center; }
.acc-proscons { grid-template-columns: 1fr; gap: 18px; }
.acc-specs { grid-template-columns: 1fr; }
.acc-spec:nth-child(odd) { border-right: 0; padding-right: 4px; }
.acc-spec:nth-child(even) { padding-left: 4px; }
}
/* ============================================================
Recommendation quiz
============================================================ */
.rec-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 56px 0 32px;
text-align: center;
}
.rec-hero-badge {
display: inline-block;
padding: 6px 14px;
background: var(--brand);
color: #fff;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 18px;
}
.rec-hero h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--ink);
}
.rec-hero .lead {
max-width: 580px;
margin: 0 auto;
font-size: 1.05rem;
color: var(--ink-2);
}
.rec-quiz-section { padding: 32px 0 80px; }
.rec-quiz {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px 40px 32px;
box-shadow: 0 4px 24px rgba(13, 31, 45, 0.06);
}
.rec-progress {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 32px;
}
.rec-progress-track {
flex: 1;
height: 6px;
background: var(--bg-soft);
border-radius: 999px;
overflow: hidden;
}
.rec-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--brand), var(--brand-dark));
border-radius: 999px;
transition: width .35s cubic-bezier(.4,0,.2,1);
}
.rec-progress-text {
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
}
.rec-steps { position: relative; }
.rec-step { display: none; animation: rec-fade .3s ease; }
.rec-step.is-active { display: block; }
@keyframes rec-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.rec-step-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 12px;
}
.rec-step h2 {
font-size: clamp(1.2rem, 2.8vw, 1.6rem);
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--ink);
}
.rec-step p.muted {
margin: 0 0 24px;
font-size: 0.95rem;
line-height: 1.55;
}
.rec-options {
display: grid;
gap: 10px;
}
.rec-options-grid {
grid-template-columns: repeat(2, 1fr);
}
.rec-option {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 2px solid var(--line);
border-radius: 14px;
cursor: pointer;
transition: all .15s;
position: relative;
}
.rec-option:hover { border-color: var(--brand); background: rgba(26, 135, 84, 0.03); }
.rec-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.rec-option:has(input:checked) {
border-color: var(--brand);
background: rgba(26, 135, 84, 0.06);
box-shadow: 0 0 0 4px rgba(26, 135, 84, 0.08);
}
.rec-option-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 50%;
font-size: 1.2rem;
font-weight: 700;
transition: all .15s;
}
.rec-option:has(input:checked) .rec-option-icon {
background: var(--brand);
color: #fff;
}
.rec-option-text {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.rec-option-text strong {
font-size: 0.98rem;
font-weight: 700;
color: var(--ink);
}
.rec-option-text .muted {
font-size: 0.85rem;
line-height: 1.4;
}
.rec-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.rec-actions [data-quiz-prev]:not([hidden]) ~ [data-quiz-submit] { margin-left: auto; }
/* Result */
.rec-result { padding: 48px 0 80px; }
.rec-result-header {
text-align: center;
margin-bottom: 32px;
}
.rec-result-badge {
display: inline-block;
padding: 7px 16px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(26, 135, 84, 0.25);
}
.rec-result-header h1 {
font-size: clamp(1.5rem, 3.2vw, 2rem);
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.rec-result-card {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 40px;
align-items: start;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: 0 6px 28px rgba(13, 31, 45, 0.06);
}
.rec-result-art .card-art {
margin: 0;
max-width: 100%;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}
.rec-result-info .card-issuer {
font-size: 0.78rem;
margin-bottom: 4px;
color: var(--ink-2);
}
.rec-result-name {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 10px;
color: var(--ink);
}
.rec-result-info .card-rating { margin-bottom: 20px; }
.rec-result-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 18px 0;
margin-bottom: 24px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.rec-result-stats .stat-value { font-size: 1.1rem; font-weight: 700; }
.rec-result-why {
background: rgba(26, 135, 84, 0.05);
border-left: 3px solid var(--brand);
padding: 16px 18px;
border-radius: 8px;
margin-bottom: 24px;
}
.rec-result-why h3 {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-dark);
margin: 0 0 10px;
}
.rec-result-why ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.rec-result-why li {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink);
padding-left: 20px;
position: relative;
}
.rec-result-why li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--brand);
font-weight: 700;
}
.rec-result-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.rec-alternatives { margin-top: 56px; }
.rec-alternatives h3 {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
margin: 0 0 20px;
}
.rec-alt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.rec-alt {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
align-items: center;
padding: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
color: var(--ink);
transition: all .15s;
}
.rec-alt:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(13, 31, 45, 0.08);
}
.rec-alt-art .card-art {
margin: 0;
width: 100px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.rec-alt-art .card-art-name { display: none; }
.rec-alt-art .card-art-bottom { justify-content: flex-end; }
.rec-alt-info .card-issuer {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-2);
margin-bottom: 4px;
}
.rec-alt-name {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 6px;
}
.rec-alt-meta {
font-size: 0.8rem;
color: var(--ink-2);
}
.rec-result-footer {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 48px;
}
@media (max-width: 720px) {
.rec-quiz { padding: 24px 18px; border-radius: 12px; }
.rec-options-grid { grid-template-columns: 1fr; }
.rec-option { padding: 14px; gap: 12px; }
.rec-option-icon { width: 38px; height: 38px; font-size: 1rem; }
.rec-result-card { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
.rec-result-art .card-art { max-width: 280px; margin: 0 auto; }
.rec-result-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.rec-alt-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Floating chatbot assistant
============================================================ */
.chatbot { position: fixed; bottom: 24px; right: 24px; z-index: 1000; transition: opacity .2s, transform .2s; }
/* Hide the chatbot bubble while the mobile menu is open — otherwise it sits
on top of the menu footer's Admin button and looks like the button is
truncated. */
body.mobile-menu-open .chatbot { opacity: 0; transform: scale(0.8); pointer-events: none; }
.chatbot-launcher {
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
border: 0;
cursor: pointer;
box-shadow: 0 8px 24px rgba(26, 135, 84, 0.35);
display: flex; align-items: center; justify-content: center;
position: relative;
transition: transform .2s, box-shadow .2s;
}
.chatbot-launcher:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(26, 135, 84, 0.45); }
.chatbot-launcher:active { transform: scale(0.97); }
.chatbot-launcher-pulse {
position: absolute; inset: 0;
border-radius: 50%;
background: var(--brand);
opacity: 0.6;
animation: chatbot-pulse 2.4s ease-out infinite;
z-index: -1;
}
@keyframes chatbot-pulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
.chatbot.is-open .chatbot-launcher { transform: scale(0); opacity: 0; pointer-events: none; }
.chatbot.is-open .chatbot-launcher-pulse { display: none; }
.chatbot-panel {
position: absolute;
bottom: 0;
right: 0;
width: 380px;
max-width: calc(100vw - 32px);
height: 580px;
max-height: calc(100vh - 100px);
background: var(--surface);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(var(--overlay-shadow), 0.18), 0 4px 12px rgba(var(--overlay-shadow), 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
transform-origin: bottom right;
animation: chatbot-open .25s cubic-bezier(.34, 1.4, .64, 1);
}
.chatbot-panel[hidden] { display: none; }
@keyframes chatbot-open {
from { opacity: 0; transform: scale(0.85) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.chatbot-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
}
.chatbot-avatar {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.04em;
flex-shrink: 0;
}
.chatbot-titles { flex: 1; min-width: 0; line-height: 1.2; }
.chatbot-titles strong { display: block; font-size: 0.95rem; font-weight: 700; }
.chatbot-titles small { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 2px; }
.chatbot-close, .chatbot-restart {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.12);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background .15s;
}
.chatbot-close:hover, .chatbot-restart:hover { background: rgba(255, 255, 255, 0.25); }
.chatbot-restart[hidden] { display: none; }
.chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 18px 16px;
background: var(--bg-soft);
display: flex;
flex-direction: column;
gap: 12px;
}
.chatbot-messages::-webkit-scrollbar { width: 8px; }
.chatbot-messages::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.chat-msg { display: flex; max-width: 88%; animation: chat-in .25s ease; }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.is-bot { align-self: flex-start; }
.chat-msg.is-user { align-self: flex-end; justify-content: flex-end; }
.chat-bubble {
padding: 11px 14px;
border-radius: 16px;
font-size: 0.9rem;
line-height: 1.45;
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.06);
}
.chat-msg.is-bot .chat-bubble {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.chat-msg.is-user .chat-bubble {
background: var(--brand);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-options {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
align-self: flex-start;
width: 100%;
max-width: 88%;
animation: chat-in .25s ease;
}
.chat-option {
padding: 10px 14px;
background: var(--surface);
border: 1.5px solid var(--brand-light);
border-radius: 12px;
color: var(--ink);
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: all .15s;
}
.chat-option:hover {
background: var(--brand);
color: #fff;
border-color: var(--brand);
transform: translateX(2px);
}
.chat-typing {
display: inline-flex;
gap: 4px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px 16px 16px 4px;
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.06);
align-self: flex-start;
}
.chat-typing span {
width: 7px; height: 7px;
background: var(--line-2);
border-radius: 50%;
animation: chat-typing 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
.chat-result {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px;
box-shadow: 0 4px 14px rgba(var(--overlay-shadow), 0.08);
display: flex;
flex-direction: column;
gap: 12px;
align-self: stretch;
margin-top: 4px;
animation: chat-in .35s ease;
}
.chat-result-art .card-art {
margin: 0;
width: 100%;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.chat-result-issuer {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
font-weight: 600;
}
.chat-result-name {
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
margin: 2px 0 8px;
color: var(--ink);
}
.chat-result-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 4px 0 8px;
}
.chat-result-stat { text-align: center; }
.chat-result-stat-label {
display: block;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-2);
margin-bottom: 2px;
}
.chat-result-stat-value {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
}
.chat-result-stat-value.is-good { color: var(--brand-dark); }
.chat-result-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.chat-result-actions .btn { flex: 1; min-width: 0; padding: 9px 12px; font-size: 0.82rem; }
@media (max-width: 640px) {
.chatbot { bottom: 16px; right: 16px; }
.chatbot-launcher { width: 54px; height: 54px; }
/* Fullscreen overlay on mobile — anchored to the visible viewport (dvh handles
iOS Safari's dynamic address bar) and respecting the safe area (notch). */
.chatbot-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
}
.chatbot-header {
padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.chatbot-messages {
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
}
/* ============================================================
Homepage (index.php)
============================================================ */
.home-hero {
background: linear-gradient(135deg, #f4faf6 0%, #ffffff 50%, #eef7f2 100%);
/* Mobile-first padding — tightens on phones, opens up on desktop */
padding: 40px 0 32px;
overflow: hidden;
}
/* Mobile-first single-column layout. Layout-specific overrides (and the
≥768px tablet upgrade for L1) bump it to two columns. */
.home-hero-inner {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "copy" "visual";
column-gap: 48px;
/* Generous row-gap so the topmost element of the animation (e.g. an orbit
coin or fan peek card) doesn't visually crash into the trust stats above.
Animation children are position:absolute, so padding on the visual itself
wouldn't push them — only row-gap creates real separation. */
row-gap: 48px;
align-items: center;
}
/* `.home-hero-copy` wraps title + body so layout variants can move them as a
single block (e.g. centering for L2, glass card for L4). */
.home-hero-copy { grid-area: copy; min-width: 0; /* prevent grid blow-out */ }
.home-hero-title { /* sits naturally at the top of the copy column */ }
.home-hero-body { /* sits naturally below the title */ }
.home-hero-visual { grid-area: visual; min-width: 0; }
.home-hero-eyebrow {
/* Soft supporting pill — visible enough to label the H1 below it, but
never competing with it. brand-light bg + brand-dark text reads as
"tag" not "button". No border or shadow so it stays editorial. */
display: inline-block;
padding: 5px 12px;
background: var(--brand-light);
border: 0;
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
margin-bottom: 14px;
box-shadow: none;
max-width: 100%;
white-space: normal;
word-break: normal;
}
.home-hero h1 {
/* Hero must DOMINATE — clearly bigger than the H2s (1.5-1.6rem) used in
downstream sections. 2rem on phones gives a real "hero" feel without
forcing 3 awkward line breaks. */
font-size: clamp(2rem, 7vw, 3.4rem);
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0 0 14px;
color: var(--ink);
overflow-wrap: break-word;
word-break: normal;
hyphens: manual;
}
.home-hero-accent {
color: var(--brand);
position: relative;
white-space: normal;
}
.home-hero-lead {
/* On phones the lead text is long (4+ lines at full size). Drop to 0.88rem
with a slightly more generous line-height — keeps it readable but lets
the headline + CTAs stay the visual centre of the hero. The ≥520px MQ
bumps it back up once there's room. */
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-2);
max-width: 560px;
margin: 0 0 22px;
}
.home-hero-ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 22px;
}
/* Full-width CTAs on phones — easier to tap, no awkward half-row. Trimmed
vertical padding because the default .btn-lg (16px) makes the buttons
feel inflated when stretched full-width. */
.home-hero-ctas .btn {
flex: 1 1 100%;
justify-content: center;
text-align: center;
/* Tighter horizontal padding so the longer CTA text ("Recomendação em 5
perguntas →") fits in a single line at 375px viewport. Keep nowrap so
the trailing arrow never drops to a second line and inflates the button
height. The text is short enough to fit; if a translation grows it
beyond the button, ellipsis kicks in instead of breaking the layout. */
padding: 12px 14px;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-hero-trust {
list-style: none;
margin: 0; padding: 0;
/* 3 equal cells on a single row so the stats never wrap to 2+1 */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
align-items: start;
}
.home-hero-trust li {
display: flex;
flex-direction: column;
font-size: 0.72rem;
color: var(--ink-2);
line-height: 1.35;
min-width: 0;
gap: 3px;
}
.home-hero-trust strong {
/* Less shouting — these are SUPPORTING stats, not the main number. The
hero's job is the headline + CTAs; these add credibility quietly. */
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.15;
display: block;
min-height: 1.2rem;
}
/* ≥520px — slightly larger lead/trust, CTAs return to natural size */
@media (min-width: 520px) {
.home-hero-ctas .btn {
flex: 0 0 auto;
padding: 16px 32px;
font-size: 1rem;
white-space: nowrap;
}
.home-hero-lead { font-size: 0.98rem; line-height: 1.6; }
.home-hero-trust { gap: 20px; }
.home-hero-trust li { font-size: 0.78rem; }
.home-hero-trust strong { font-size: 1.2rem; }
}
/* ≥768px — desktop lead can be the original 1.05rem (more room) */
@media (min-width: 768px) {
.home-hero-lead { font-size: 1.05rem; }
.home-hero-trust strong { font-size: 1.3rem; }
}
/* ≥768px — desktop hero: two columns, more breathing room */
@media (min-width: 768px) {
.home-hero { padding: 64px 0 52px; }
.home-hero-inner {
grid-template-columns: 1.1fr 0.9fr;
grid-template-areas: "copy visual";
row-gap: 0;
}
.home-hero-eyebrow { margin-bottom: 22px; }
.home-hero h1 { line-height: 1.05; margin: 0 0 18px; }
.home-hero-lead { font-size: 1.1rem; margin-bottom: 28px; }
.home-hero-ctas { gap: 12px; margin-bottom: 28px; }
.home-hero-trust { gap: 28px; grid-template-columns: repeat(3, auto); justify-content: start; }
.home-hero-trust strong { font-size: 1.4rem; }
}
/* ≥1024px — extra padding for full-width displays */
@media (min-width: 1024px) {
.home-hero { padding: 72px 0 56px; }
}
.home-hero-visual {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1400px;
}
/* Soft radial orbs creating ambient glow behind cards */
.home-hero-orb {
position: absolute;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(26, 135, 84, 0.22) 0%, rgba(26, 135, 84, 0.08) 40%, transparent 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
animation: orb-breathe 7s ease-in-out infinite;
filter: blur(20px);
}
.home-hero-orb-2 {
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
top: 10%; right: -10%;
animation: orb-breathe 9s ease-in-out infinite reverse;
}
@keyframes orb-breathe {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.15); opacity: 1; }
}
.home-hero-card {
position: absolute;
transition: transform .9s cubic-bezier(.34, 1.2, .64, 1),
filter .6s ease,
opacity .5s ease;
will-change: transform, filter;
}
.home-hero-card .card-art {
margin: 0;
width: 100%;
border-radius: 5% / 7.9%;
}
/* Decorative-only: hide issuer/name, keep chip + contactless + network logo */
.home-hero-card .card-art-issuer,
.home-hero-card .card-art-name { display: none; }
.home-hero-card .card-art-bottom { justify-content: flex-end; }
.home-hero-card .card-art-network { transform: scale(1.15); transform-origin: right center; }
/* Layer 1 — far background card (decorative) */
.home-hero-card-bg {
width: 180px;
top: 20%;
right: 25%;
z-index: 1;
opacity: 0.45;
filter: drop-shadow(0 6px 14px rgba(13, 31, 45, 0.1)) blur(5px);
animation: float-bg 14s ease-in-out infinite;
}
@keyframes float-bg {
0%, 100% { transform: translate(0, 0) rotate(18deg); }
25% { transform: translate(-12px, -8px) rotate(22deg); }
50% { transform: translate(8px, -16px) rotate(15deg); }
75% { transform: translate(-6px, 10px) rotate(20deg); }
}
/* Layer 2 — accent cards (mid-depth, slight blur) */
.home-hero-card-accent {
width: 200px;
z-index: 3;
filter: drop-shadow(0 14px 28px rgba(13, 31, 45, 0.18)) blur(1.2px);
opacity: 0.92;
}
.home-hero-card-accent-left {
top: 5%;
left: -8%;
animation: float-accent-l 10s ease-in-out infinite;
}
.home-hero-card-accent-right {
bottom: 5%;
right: -10%;
animation: float-accent-r 11s ease-in-out infinite;
animation-delay: -3s;
}
@keyframes float-accent-l {
0%, 100% { transform: translate(0, 0) rotate(-14deg); }
33% { transform: translate(8px, -14px) rotate(-11deg); }
66% { transform: translate(-4px, 8px) rotate(-17deg); }
}
@keyframes float-accent-r {
0%, 100% { transform: translate(0, 0) rotate(14deg); }
33% { transform: translate(-10px, 12px) rotate(17deg); }
66% { transform: translate(6px, -8px) rotate(11deg); }
}
/* Layer 3 — main card (front, prominent, sharp) */
.home-hero-card-main {
width: 290px;
z-index: 5;
filter: drop-shadow(0 28px 56px rgba(13, 31, 45, 0.3));
animation: float-main 8s ease-in-out infinite;
}
@keyframes float-main {
0%, 100% { transform: translate(0, 0) rotate(-4deg); }
50% { transform: translate(0, -12px) rotate(-2deg); }
}
/* Glass-morphism stat chips */
.home-hero-chip {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 10px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 16px;
box-shadow: 0 14px 32px rgba(13, 31, 45, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
z-index: 10;
transition: transform .6s cubic-bezier(.34, 1.2, .64, 1);
}
.home-hero-chip-icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(26, 135, 84, 0.35);
}
.home-hero-chip-body { display: flex; flex-direction: column; line-height: 1.15; }
.home-hero-chip-label {
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.home-hero-chip strong {
font-size: 1.05rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
}
.home-hero-chip-1 {
top: 8%;
right: 2%;
animation: chip-float 5s ease-in-out infinite;
}
.home-hero-chip-2 {
bottom: 14%;
left: -2%;
animation: chip-float 6s ease-in-out infinite;
animation-delay: -2s;
}
@keyframes chip-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* HOVER — dramatic spread that pauses animations */
.home-hero-visual:hover .home-hero-card,
.home-hero-visual:hover .home-hero-chip,
.home-hero-visual:hover .home-hero-orb {
animation-play-state: paused;
}
.home-hero-visual:hover .home-hero-card-main {
transform: translate(0, -16px) rotate(-2deg) scale(1.04);
filter: drop-shadow(0 32px 64px rgba(13, 31, 45, 0.35));
}
.home-hero-visual:hover .home-hero-card-accent-left {
transform: translate(-40px, -28px) rotate(-22deg) scale(1.08);
filter: drop-shadow(0 18px 32px rgba(13, 31, 45, 0.22)) blur(0.3px);
opacity: 1;
}
.home-hero-visual:hover .home-hero-card-accent-right {
transform: translate(40px, 30px) rotate(22deg) scale(1.08);
filter: drop-shadow(0 18px 32px rgba(13, 31, 45, 0.22)) blur(0.3px);
opacity: 1;
}
.home-hero-visual:hover .home-hero-card-bg {
transform: translate(40px, -20px) rotate(28deg) scale(1.1);
opacity: 0.7;
filter: drop-shadow(0 8px 18px rgba(13, 31, 45, 0.14)) blur(3px);
}
.home-hero-visual:hover .home-hero-chip-1 {
transform: translate(8px, -8px);
}
.home-hero-visual:hover .home-hero-chip-2 {
transform: translate(-8px, 8px);
}
.home-hero-visual:hover .home-hero-orb {
transform: scale(1.2);
opacity: 1;
}
/* ============================================================
Hero layout variants — controlled by .home-hero-v{1..5} on the
section. Layout 1 (default) keeps the original 2-column grid;
the rules above already cover it. The variants below override
the grid composition. Mobile-first: each variant first defines
how it looks on phones, then upgrades for tablet/desktop.
============================================================ */
/* ---------- Layout 1 · «Clássico» ----------
Inherits the base mobile-first layout (single column, copy then visual,
side-by-side on ≥768px). Just sets the visual height to a sane mobile size. */
.home-hero-v1 .home-hero-visual { min-height: 280px; }
@media (min-width: 768px) {
.home-hero-v1 .home-hero-visual { min-height: 460px; }
}
/* ---------- Layout 2 · «Centrado» ----------
Stacked column, copy centered, visual below. Identity is the centering —
keep it centered at every breakpoint, just tighten spacing on phones. */
.home-hero-v2 .home-hero-inner {
text-align: center;
justify-items: center;
row-gap: 28px;
}
.home-hero-v2 .home-hero-copy {
display: flex;
flex-direction: column;
align-items: center;
max-width: 760px;
}
.home-hero-v2 .home-hero-lead { margin-left: auto; margin-right: auto; }
.home-hero-v2 .home-hero-ctas { justify-content: center; }
.home-hero-v2 .home-hero-trust { justify-content: center; max-width: 360px; }
.home-hero-v2 .home-hero-trust li { align-items: center; text-align: center; }
.home-hero-v2 .home-hero-visual {
width: 100%;
max-width: 780px;
margin: 0 auto;
min-height: 260px;
}
@media (min-width: 768px) {
.home-hero-v2 .home-hero-inner {
grid-template-columns: 1fr;
grid-template-areas: "copy" "visual";
row-gap: 40px;
}
.home-hero-v2 .home-hero-visual { min-height: 360px; }
.home-hero-v2 .home-hero-trust { max-width: none; }
}
/* ---------- Layout 3 · «Espelhado» ----------
Visual-first identity on desktop. On mobile we still show copy first
(better UX — text loads instantly, no layout shift waiting for animation). */
.home-hero-v3 .home-hero-inner {
/* On mobile keep copy first so the page feels responsive immediately */
grid-template-areas: "copy" "visual";
}
@media (min-width: 768px) {
.home-hero-v3 .home-hero-inner {
grid-template-columns: 0.9fr 1.1fr;
grid-template-areas: "visual copy";
}
}
/* ---------- Layout 4 · «Imersivo» ----------
Backdrop animation + glass card. The card is the focal point; the animation
provides ambience. On mobile we tighten the card and dim the backdrop further
so the text never competes with motion. */
.home-hero-v4 {
position: relative;
/* On mobile a smaller padding keeps the section compact; opens up on desktop */
padding: 56px 0 48px;
}
.home-hero-v4 > .home-hero-visual {
/* In layout 4 the animation is rendered BEFORE .home-hero-inner so it sits
behind the copy as a section backdrop. */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
/* Lower opacity on mobile so the card's text wins the contrast battle */
opacity: 0.55;
filter: saturate(0.9);
min-height: 0;
}
.home-hero-v4 .home-hero-inner {
position: relative;
z-index: 1;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy";
justify-content: center;
}
.home-hero-v4 .home-hero-copy {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 18px;
padding: 28px 22px;
box-shadow: 0 18px 48px rgba(var(--overlay-shadow), 0.18);
/* Make sure the card never spills past the container */
max-width: 100%;
overflow: hidden;
}
.home-hero-v4 .home-hero-lead { max-width: none; }
html[data-theme="dark"] .home-hero-v4 .home-hero-copy {
background: rgba(20, 30, 26, 0.78);
border-color: rgba(255, 255, 255, 0.08);
}
@media (min-width: 768px) {
.home-hero-v4 { padding: 100px 0 84px; }
.home-hero-v4 > .home-hero-visual { opacity: 0.7; filter: saturate(0.96); }
.home-hero-v4 .home-hero-inner { grid-template-columns: minmax(0, 660px); }
.home-hero-v4 .home-hero-copy { padding: 44px 40px; border-radius: 22px; }
}
/* ---------- Layout 5 · «Minimalista» ----------
The signature is the framed visual. On phones the frame is removed entirely
so the copy can breathe — the visual sits as a clean unframed element below,
honoring the "less is more" promise. */
.home-hero-v5 { padding: 32px 0 24px; }
.home-hero-v5 .home-hero-copy { max-width: 540px; }
.home-hero-v5 h1 {
font-size: clamp(1.6rem, 5.5vw, 2.6rem);
margin-bottom: 12px;
}
.home-hero-v5 .home-hero-lead {
font-size: 0.95rem;
margin-bottom: 18px;
max-width: 480px;
}
.home-hero-v5 .home-hero-eyebrow { margin-bottom: 14px; }
.home-hero-v5 .home-hero-visual {
/* No frame on mobile — keep the section feeling light and minimal */
background: none;
border-radius: 0;
padding: 0;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.home-hero-v5 .home-hero-visual > .hero-anim { transform: scale(0.7); transform-origin: center center; }
@media (min-width: 768px) {
.home-hero-v5 { padding: 56px 0 44px; }
.home-hero-v5 .home-hero-inner {
grid-template-columns: 1.2fr 0.8fr;
grid-template-areas: "copy visual";
align-items: center;
column-gap: 36px;
}
.home-hero-v5 .home-hero-visual {
/* Bring the ovalada frame back on desktop where it has room to shine */
background: linear-gradient(135deg, var(--brand-light), var(--bg-soft));
border-radius: 220px / 150px;
padding: 16px;
min-height: 320px;
}
.home-hero-v5 .home-hero-visual > .hero-anim { transform: scale(0.78); }
.home-hero-v5 h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.home-hero-v5 .home-hero-lead { font-size: 1rem; }
}
/* ============================================================
Hero animation #2 — «Spotlight premium»
============================================================ */
.hero-anim-2 {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1600px;
}
.anim2-card-stage {
position: relative;
width: 320px;
max-width: 80%;
z-index: 5;
transform-style: preserve-3d;
animation: anim2-tilt 8s ease-in-out infinite;
}
.anim2-card {
width: 100%;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
animation: anim2-float 6s ease-in-out infinite;
}
.anim2-card .card-art { margin: 0; border-radius: 5% / 7.9%; }
.anim2-card .card-art-issuer,
.anim2-card .card-art-name { display: none; }
@keyframes anim2-tilt {
0%, 100% { transform: rotateY(-8deg) rotateX(4deg); }
50% { transform: rotateY(8deg) rotateX(-2deg); }
}
@keyframes anim2-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.anim2-beam {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
z-index: 1;
pointer-events: none;
filter: blur(40px);
}
.anim2-beam-1 {
background: radial-gradient(circle, var(--brand-light) 0%, transparent 65%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: anim2-beam-pulse 5s ease-in-out infinite;
}
.anim2-beam-2 {
width: 340px; height: 340px;
background: radial-gradient(circle, var(--brand) 0%, transparent 60%);
opacity: 0.35;
top: 30%; right: 10%;
animation: anim2-beam-pulse 7s ease-in-out infinite reverse;
}
@keyframes anim2-beam-pulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
.anim2-beam-2 {
/* Override translate base for the secondary beam */
animation-name: anim2-beam-2-pulse;
}
@keyframes anim2-beam-2-pulse {
0%, 100% { opacity: 0.25; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.18); }
}
.anim2-ring {
position: absolute;
width: 380px; height: 380px;
border-radius: 50%;
border: 1.5px dashed var(--brand);
opacity: 0.18;
z-index: 2;
animation: anim2-ring-rotate 18s linear infinite;
pointer-events: none;
}
@keyframes anim2-ring-rotate { to { transform: rotate(360deg); } }
.anim2-sparkle {
position: absolute;
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 14px 4px var(--brand), 0 0 32px 8px var(--brand-light);
z-index: 8;
animation: anim2-sparkle-pulse 3s ease-in-out infinite;
}
.anim2-sparkle-1 { top: 18%; left: 14%; animation-delay: 0s; }
.anim2-sparkle-2 { top: 28%; right: 12%; animation-delay: 0.8s; width: 6px; height: 6px; }
.anim2-sparkle-3 { bottom: 22%; left: 18%; animation-delay: 1.6s; width: 5px; height: 5px; }
.anim2-sparkle-4 { bottom: 18%; right: 16%; animation-delay: 2.4s; }
@keyframes anim2-sparkle-pulse {
0%, 100% { transform: scale(0.6); opacity: 0.3; }
50% { transform: scale(1.4); opacity: 1; }
}
/* ============================================================
Hero animation #3 — «Leque de cartões»
============================================================ */
.hero-anim-3 {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
}
.anim3-glow {
position: absolute;
width: 480px; height: 280px;
background: radial-gradient(ellipse, var(--brand-light) 0%, transparent 70%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
animation: anim3-glow-breathe 8s ease-in-out infinite;
}
@keyframes anim3-glow-breathe {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.anim3-fan {
position: relative;
width: 100%;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
animation: anim3-sway 6s ease-in-out infinite;
transform-origin: center bottom;
z-index: 2;
}
@keyframes anim3-sway {
0%, 100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
.anim3-card {
position: absolute;
width: 230px;
transition: transform .6s cubic-bezier(.34, 1.2, .64, 1), filter .4s ease;
filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.25));
}
.anim3-card .card-art { margin: 0; border-radius: 5% / 7.9%; }
.anim3-card .card-art-issuer,
.anim3-card .card-art-name { display: none; }
.anim3-card-left { transform: translateX(-110px) rotate(-18deg); z-index: 1; }
.anim3-card-center { transform: translateY(-8px) rotate(0deg); z-index: 3; }
.anim3-card-right { transform: translateX(110px) rotate(18deg); z-index: 2; }
.hero-anim-3:hover .anim3-card-left { transform: translateX(-180px) rotate(-24deg) translateY(-12px); }
.hero-anim-3:hover .anim3-card-right { transform: translateX(180px) rotate(24deg) translateY(-12px); }
.hero-anim-3:hover .anim3-card-center { transform: translateY(-24px) rotate(0deg) scale(1.04); }
.hero-anim-3:hover .anim3-fan { animation-play-state: paused; }
/* ============================================================
Hero animation #4 — «Chuva de cartões»
============================================================ */
.hero-anim-4 {
position: relative;
min-height: 460px;
/* Vertical fade for cards entering top / exiting bottom, plus a subtle
horizontal fade so the outermost cards never end on a hard clip line.
Combined via mask-composite so both fades apply simultaneously. */
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
mask-composite: intersect;
}
.anim4-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 60%, var(--brand-light) 0%, transparent 60%);
opacity: 0.6;
z-index: 0;
pointer-events: none;
border-radius: 18px;
}
.anim4-stage {
position: relative;
width: 100%; height: 100%;
z-index: 2;
}
.anim4-card {
position: absolute;
width: 140px;
top: -180px;
filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
animation: anim4-fall 12s linear infinite;
transform: translateX(-50%) rotate(var(--anim4-rot, 0deg));
}
.anim4-card .card-art { margin: 0; border-radius: 5% / 7.9%; }
.anim4-card .card-art-issuer,
.anim4-card .card-art-name { display: none; }
/* Position cards safely inside the container so no edge is clipped.
Each card uses `left` for its center point, and the keyframe `translateX(-50%)`
places the card around that point. Outer cards (1 and 5) sit inset enough so
that rotation never pushes their bounding box past the visual area. */
.anim4-card-1 { left: 14%; width: 120px; animation-duration: 11s; animation-delay: 0s; --anim4-rot: -10deg; }
.anim4-card-2 { left: 32%; width: 140px; animation-duration: 13s; animation-delay: -3s; --anim4-rot: 8deg; }
.anim4-card-3 { left: 50%; width: 150px; animation-duration: 10s; animation-delay: -6s; --anim4-rot: -4deg; }
.anim4-card-4 { left: 68%; width: 130px; animation-duration: 14s; animation-delay: -2s; --anim4-rot: 12deg; }
.anim4-card-5 { left: 84%; width: 120px; animation-duration: 12s; animation-delay: -8s; --anim4-rot: -12deg; }
@keyframes anim4-fall {
0% { top: -180px; opacity: 0; transform: translateX(-50%) rotate(var(--anim4-rot, 0deg)); }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; transform: translateX(-50%) rotate(var(--anim4-rot, 0deg)); }
}
.hero-anim-4:hover .anim4-card { animation-play-state: paused; }
/* ============================================================
Hero animation #5 — «Órbita de moedas»
Single slow orbit, 5 evenly-spaced coins, much calmer than the previous
double-track version. Coins also gently scale to add life without speed.
============================================================ */
.hero-anim-5 {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
--orbit-radius: 200px;
}
.anim5-glow {
position: absolute;
width: 420px; height: 420px;
background: radial-gradient(circle, var(--brand-light) 0%, transparent 65%);
filter: blur(30px);
z-index: 0;
pointer-events: none;
animation: anim5-glow-pulse 7s ease-in-out infinite;
}
@keyframes anim5-glow-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
.anim5-ring {
position: absolute;
width: calc(var(--orbit-radius) * 2);
height: calc(var(--orbit-radius) * 2);
border-radius: 50%;
border: 1px dashed var(--brand);
opacity: 0.18;
z-index: 1;
pointer-events: none;
}
.anim5-card {
position: relative;
width: 280px;
z-index: 5;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.3));
animation: anim5-card-float 7s ease-in-out infinite;
}
.anim5-card .card-art { margin: 0; border-radius: 5% / 7.9%; }
.anim5-card .card-art-issuer,
.anim5-card .card-art-name { display: none; }
@keyframes anim5-card-float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(-1deg); }
}
/* Each coin orbits independently. Same speed for all, but each one starts at
its own angle (--coin-start), so they stay evenly distributed. 36s = one
full revolution every 36 seconds — slow enough to feel ambient. */
.anim5-coin {
position: absolute;
top: 50%;
left: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
margin-left: -23px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
border-radius: 50%;
font-size: 1.1rem;
font-weight: 800;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
z-index: 6;
animation: anim5-orbit 36s linear infinite, anim5-pulse 4s ease-in-out infinite;
/* Start angle is set per-coin via inline --coin-start; the orbit keyframes
rotate from start → start+360. */
}
.anim5-coin-1 { animation-delay: 0s, -0.5s; }
.anim5-coin-2 { animation-delay: -0.2s, -1.2s; }
.anim5-coin-3 { animation-delay: -0.4s, -2.0s; }
.anim5-coin-4 { animation-delay: -0.6s, -2.8s; }
.anim5-coin-5 { animation-delay: -0.8s, -3.5s; }
@keyframes anim5-orbit {
from {
transform: rotate(var(--coin-start, 0deg))
translateX(var(--orbit-radius, 200px))
rotate(calc(-1 * var(--coin-start, 0deg)));
}
to {
transform: rotate(calc(var(--coin-start, 0deg) + 360deg))
translateX(var(--orbit-radius, 200px))
rotate(calc(-1 * (var(--coin-start, 0deg) + 360deg)));
}
}
@keyframes anim5-pulse {
0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 4px var(--brand-light); }
}
/* Responsive — keep all animations tidy on smaller screens */
@media (max-width: 900px) {
.hero-anim-2 { min-height: 360px; }
.anim2-card-stage { width: 240px; }
.anim2-ring { width: 280px; height: 280px; }
.hero-anim-3 { min-height: 360px; }
.anim3-card { width: 170px; }
.anim3-card-left { transform: translateX(-80px) rotate(-18deg); }
.anim3-card-right { transform: translateX(80px) rotate(18deg); }
.hero-anim-4 { min-height: 360px; }
.anim4-card { width: 100px; }
.hero-anim-5 { min-height: 360px; --orbit-radius: 150px; }
.anim5-card { width: 210px; }
.anim5-coin { width: 38px; height: 38px; margin-top: -19px; margin-left: -19px; font-size: 0.95rem; }
}
/* Phone-sized tweaks (≤520px) — the credit card must stay the visual focal
point of every animation. We size so the card occupies roughly 60-75% of
the viewport width (i.e. ~240-280px on a 375px phone), and the supporting
elements (orbs, coins, peek cards, beams) scale proportionally around it.
We also add vertical breathing room INSIDE each animation container so the
topmost element (orbit coin, fan peek card, etc.) doesn't crash into the
trust stats above. */
@media (max-width: 520px) {
/* Floating cards (anim 1) — main card stays prominent, accents shrink */
.hero-anim-1 { min-height: 340px; }
.hero-anim-1 .home-hero-card-main { width: 240px; }
.hero-anim-1 .home-hero-card-accent { width: 150px; }
.hero-anim-1 .home-hero-card-bg { width: 130px; }
.hero-anim-1 .home-hero-orb { width: 240px; height: 240px; }
.hero-anim-1 .home-hero-orb-2 { width: 150px; height: 150px; }
.hero-anim-1 .home-hero-chip { padding: 6px 10px; font-size: 0.7rem; }
/* Spotlight (anim 2) — single hero card, keep it dominant */
.hero-anim-2 { min-height: 320px; }
.anim2-card-stage { width: 240px; }
.anim2-ring { width: 280px; height: 280px; }
.anim2-beam { width: 320px; height: 320px; }
.anim2-beam-2 { width: 200px; height: 200px; }
/* Leque (anim 3) — three cards in a fan, each readable */
.hero-anim-3 { min-height: 300px; }
.anim3-card { width: 180px; }
.anim3-card-left { transform: translateX(-70px) rotate(-18deg); }
.anim3-card-right { transform: translateX(70px) rotate(18deg); }
/* Chuva (anim 4) — falling cards are intentionally small confetti */
.hero-anim-4 { min-height: 320px; }
.anim4-card { width: 90px; }
/* Órbita (anim 5) — Card dominates; coins orbit around it without crowding.
The min-height is tuned so the topmost coin sits ~40px below the top of
the visual container, giving real breathing room from the stats above.
center_y = min_height / 2 = 200
topmost coin = 200 - orbit_radius - coin_half = 200 - 140 - 18 = 42px */
.hero-anim-5 { min-height: 400px; --orbit-radius: 140px; }
.anim5-card { width: 220px; }
.anim5-coin {
width: 36px; height: 36px;
margin-top: -18px; margin-left: -18px;
font-size: 0.9rem;
}
.anim5-glow { width: 320px; height: 320px; }
}
/* Section headers */
.home-section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.home-section-header h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: -0.02em;
margin: 0 0 4px;
}
.home-section-header .muted { margin: 0; font-size: 0.95rem; }
.home-section-eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 6px;
}
.home-section-link {
font-size: 0.92rem;
font-weight: 600;
color: var(--brand-dark);
}
.home-section-link:hover { color: var(--brand); }
/* Tiles section */
.home-tiles-section { padding: 72px 0 56px; }
.home-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.home-tile {
display: flex;
flex-direction: column;
padding: 28px 24px 22px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
color: var(--ink);
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.04);
transition: all .2s;
}
.home-tile:hover {
border-color: var(--brand);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(var(--overlay-shadow), 0.12);
}
.home-tile-icon {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand);
border-radius: 14px;
margin-bottom: 18px;
transition: all .2s;
}
.home-tile:hover .home-tile-icon { background: var(--brand); color: #fff; }
.home-tile h3 {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.home-tile p {
margin: 0 0 18px;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
flex: 1;
}
.home-tile-cta {
font-size: 0.85rem;
font-weight: 700;
color: var(--brand-dark);
}
/* Featured cards strip */
.home-featured {
background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
padding: 64px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.home-cards-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.home-card-mini {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
display: grid;
grid-template-columns: 130px 1fr;
gap: 18px;
align-items: center;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-card-mini:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(13, 31, 45, 0.08);
border-color: var(--line-2);
}
.home-card-art .card-art { margin: 0; width: 130px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.home-card-art .card-art-name { display: none; }
.home-card-art .card-art-bottom { justify-content: flex-end; }
.home-card-info { min-width: 0; }
.home-card-info .card-issuer { font-size: 0.7rem; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.home-card-info h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.home-card-info .card-rating { margin-bottom: 10px; font-size: 0.78rem; }
.home-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 0;
margin-bottom: 12px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Loans promo block */
.home-loans-promo { padding: 80px 0; }
.home-loans-inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center;
}
.home-loans-text h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--ink);
}
.home-loans-text > p {
font-size: 1rem;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 22px;
}
.home-loans-points {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: grid;
gap: 8px;
}
.home-loans-points li {
font-size: 0.92rem;
color: var(--ink);
font-weight: 500;
}
.home-loans-preview {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
box-shadow: 0 8px 24px rgba(13, 31, 45, 0.06);
}
.home-loans-preview-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 14px;
margin-bottom: 4px;
border-bottom: 1px solid var(--line);
}
.home-loans-preview-header span {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
}
.home-loans-preview-header small { font-size: 0.72rem; color: var(--ink-2); }
.home-loans-list { list-style: none; margin: 0; padding: 0; }
.home-loans-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.home-loans-list li:last-child { border-bottom: 0; }
.home-loan-logo {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
color: #fff;
border-radius: 10px;
font-weight: 800;
font-size: 0.95rem;
flex-shrink: 0;
}
.home-loan-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.home-loan-info strong { font-size: 0.88rem; color: var(--ink); font-weight: 700; }
.home-loan-info span { font-size: 0.74rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-loan-taeg {
font-size: 1.05rem;
font-weight: 800;
color: var(--brand-dark);
letter-spacing: -0.01em;
}
/* Pillars / trust */
.home-pillars { padding: 64px 0 48px; }
.home-pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.home-pillar {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 24px 22px;
box-shadow: 0 1px 2px rgba(var(--overlay-shadow), 0.04);
}
.home-pillar-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light);
color: var(--brand);
border-radius: 12px;
margin-bottom: 14px;
}
.home-pillar h3 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 700;
}
.home-pillar p {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
}
/* Final CTA */
.home-cta-final {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
padding: 64px 0;
margin-top: 32px;
}
.home-cta-inner {
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.home-cta-final h2 {
font-size: clamp(1.6rem, 3.4vw, 2.2rem);
letter-spacing: -0.02em;
margin: 0 0 12px;
color: #fff;
}
.home-cta-final p {
font-size: 1.05rem;
margin: 0 0 24px;
opacity: 0.92;
line-height: 1.5;
}
.home-cta-final .btn {
background: #fff;
color: var(--brand-dark);
font-weight: 700;
}
.home-cta-final .btn:hover {
background: #fff;
color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 980px) {
/* Hero layout is now handled by the mobile-first rules in the hero block
(single column up to 768px, two columns after). We only keep the
animation-element shrinks here. The old title/body/visual grid areas
were replaced by copy/visual and must NOT be re-declared in this MQ
or they overwrite the layout-variant areas. */
.home-hero-card-main { width: 230px; }
.home-hero-card-accent { width: 160px; }
.home-hero-card-bg { width: 130px; }
.home-hero-orb { width: 260px; height: 260px; }
.home-hero-orb-2 { width: 160px; height: 160px; }
.home-tiles { grid-template-columns: repeat(2, 1fr); }
.home-cards-strip { grid-template-columns: 1fr; }
.home-loans-inner { grid-template-columns: 1fr; gap: 32px; }
.home-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
/* NOTE: hero text rules (h1, lead, eyebrow, ctas, trust, visual sizing)
are no longer here — they live in the mobile-first base block plus the
≥520/≥768 media queries earlier in the file. Keeping conflicting rules
here was silently overriding the recalibrated typography. We keep ONLY
the chip positioning for anim 1 (no other coverage) and the unrelated
grid layouts for tiles/pillars/cards. */
.home-hero-chip { padding: 6px 10px 6px 6px; gap: 6px; border-radius: 12px; }
.home-hero-chip-icon { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 8px; }
.home-hero-chip strong { font-size: 0.82rem; }
.home-hero-chip-label { font-size: 0.56rem; }
.home-hero-chip-1 { top: 0; right: 0; }
.home-hero-chip-2 { bottom: 4%; left: 0; }
.home-hero-card-accent-left { top: 2%; left: 4%; }
.home-hero-card-accent-right { bottom: 2%; right: 4%; }
.home-hero-card-bg { right: 22%; top: 28%; }
.home-tiles { grid-template-columns: 1fr; }
.home-pillars-grid { grid-template-columns: 1fr; }
.home-card-mini { grid-template-columns: 90px 1fr; gap: 14px; padding: 16px; }
.home-card-art .card-art { width: 90px; }
}
/* ============================================================
Personal loan simulator + results
============================================================ */
.loan-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 40px 0 12px;
text-align: center;
}
.loan-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #fff;
border: 1px solid rgba(26, 135, 84, 0.25);
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
margin-bottom: 14px;
box-shadow: 0 2px 8px rgba(26, 135, 84, 0.08);
}
.loan-hero-badge svg { color: var(--brand); flex-shrink: 0; }
.loan-hero h1 {
font-size: clamp(1.6rem, 3.6vw, 2.3rem);
letter-spacing: -0.02em;
margin: 0 0 10px;
color: var(--ink);
}
.loan-hero .lead {
max-width: 620px;
margin: 0 auto;
font-size: 0.98rem;
color: var(--ink-2);
line-height: 1.55;
}
.loan-simulator-wrap {
padding: 24px 0 64px;
max-width: 720px;
margin: 0 auto;
}
.loan-simulator {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 24px rgba(13, 31, 45, 0.06);
}
.loan-fields-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 14px;
}
.loan-field label {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ink-2);
margin-bottom: 8px;
}
.loan-value-display {
position: relative;
display: flex;
align-items: baseline;
gap: 6px;
padding: 6px 0 10px;
border-bottom: 2px solid var(--line);
transition: border-color .15s;
}
.loan-value-display:focus-within { border-color: var(--brand); }
.loan-value-display input[type="number"] {
flex: 0 0 auto;
width: 100%;
max-width: 140px;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1.55rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
-moz-appearance: textfield;
}
.loan-value-display input[type="number"]::-webkit-outer-spin-button,
.loan-value-display input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.loan-value-display input[type="number"]:focus { outline: none; }
.loan-value-suffix {
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-2);
}
.loan-field input[type="range"] {
width: 100%;
margin-top: 10px;
accent-color: var(--brand);
height: 4px;
}
.loan-range-labels {
display: flex;
justify-content: space-between;
margin-top: 4px;
font-size: 0.7rem;
color: var(--ink-2);
}
.loan-field-purpose { margin-bottom: 18px; }
.loan-field select {
width: 100%;
height: 48px;
padding: 0 40px 0 14px;
font-size: 0.95rem;
font-family: inherit;
border: 1.5px solid var(--line);
border-radius: 10px;
background: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
color: var(--ink);
}
.loan-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.12); }
.loan-submit {
width: 100%;
height: 54px;
font-size: 1rem;
font-weight: 700;
}
.loan-trust-row {
list-style: none;
margin: 18px 0 0;
padding: 16px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
border-top: 1px solid var(--line);
}
.loan-trust-row li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
font-size: 0.74rem;
color: var(--ink-2);
line-height: 1.3;
}
.loan-trust-row li svg {
color: var(--brand);
flex-shrink: 0;
}
.loan-trust-row li strong {
color: var(--ink);
font-weight: 700;
}
.loan-glossary {
margin-top: 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.loan-glossary summary {
padding: 14px 18px;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: background .15s;
}
.loan-glossary summary::-webkit-details-marker { display: none; }
.loan-glossary summary::after {
content: '⌃';
font-size: 0.85rem;
transform: rotate(180deg);
transition: transform .25s;
color: var(--brand);
font-weight: 700;
}
.loan-glossary[open] summary::after { transform: rotate(0); }
.loan-glossary summary:hover { background: var(--bg-soft); }
.loan-glossary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
padding: 4px 18px 18px;
}
.loan-glossary-grid > div {
padding-left: 12px;
border-left: 3px solid var(--brand);
display: flex;
flex-direction: column;
gap: 2px;
}
.loan-glossary-grid strong {
font-size: 0.85rem;
color: var(--ink);
}
.loan-glossary-grid span {
font-size: 0.8rem;
color: var(--ink-2);
line-height: 1.5;
}
/* --- Results page --- */
.loan-results-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 32px 0 28px;
}
.loan-hero-main {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
margin-bottom: 22px;
}
.loan-hero-left h1 {
font-size: clamp(1.5rem, 3.4vw, 2rem);
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--ink);
}
.loan-hero-lead {
margin: 0;
font-size: 1rem;
color: var(--ink-2);
}
.loan-hero-amount {
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
}
.loan-hero-savings {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
padding: 16px 22px;
border-radius: 14px;
text-align: center;
box-shadow: 0 6px 20px rgba(26, 135, 84, 0.25);
min-width: 200px;
}
.loan-savings-label {
display: block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
font-weight: 600;
margin-bottom: 4px;
}
.loan-hero-savings strong {
display: block;
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.loan-savings-sub {
display: block;
font-size: 0.72rem;
opacity: 0.85;
line-height: 1.35;
}
/* Inline simulation editor — always visible, pill-shaped, full-width */
.loan-edit-bar {
display: flex;
align-items: stretch;
gap: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 6px;
box-shadow: 0 8px 24px rgba(13, 31, 45, 0.08);
}
.loan-edit-field {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 18px;
min-width: 0;
}
.loan-edit-field label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ink-2);
margin-bottom: 4px;
}
.loan-edit-input {
display: flex;
align-items: baseline;
gap: 6px;
}
.loan-edit-input input {
width: 100%;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
-moz-appearance: textfield;
}
.loan-edit-input input::-webkit-outer-spin-button,
.loan-edit-input input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.loan-edit-input input:focus { outline: none; }
.loan-edit-input span {
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
flex-shrink: 0;
}
.loan-edit-purpose select {
width: 100%;
padding: 0 24px 0 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--ink);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
}
.loan-edit-purpose select:focus { outline: none; }
.loan-edit-divider {
width: 1px;
background: var(--line);
margin: 8px 0;
}
.loan-edit-submit {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 22px;
font-size: 0.92rem;
font-weight: 700;
border-radius: 10px;
white-space: nowrap;
}
.loan-edit-submit svg { flex-shrink: 0; }
.loan-edit-bar:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(26, 135, 84, 0.12), 0 8px 24px rgba(13, 31, 45, 0.08);
}
/* Sticky filter + sort toolbar */
.loan-results-toolbar {
position: sticky;
top: 72px;
z-index: 50;
background: var(--surface);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 24px;
margin: 24px auto 0;
border-radius: 14px;
border: 1px solid var(--line);
box-shadow: 0 4px 14px rgba(var(--overlay-shadow), 0.06);
flex-wrap: wrap;
}
.loan-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.loan-filters-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
margin-right: 4px;
}
.loan-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--bg-soft);
border: 1.5px solid var(--line);
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
transition: all .15s;
}
.loan-filter-chip svg { opacity: 0; transition: opacity .15s; flex-shrink: 0; margin-left: -6px; width: 0; }
.loan-filter-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.loan-filter-chip.is-active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.loan-filter-chip.is-active svg { opacity: 1; width: 14px; margin-left: 0; }
.loan-filter-clear {
margin-left: 4px;
font-size: 0.82rem;
color: var(--ink-2);
text-decoration: underline;
}
.loan-filter-clear:hover { color: var(--danger); }
.loan-sort {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
}
.loan-sort label { color: var(--ink-2); font-weight: 600; }
.loan-sort select {
height: 36px;
padding: 0 32px 0 12px;
font-size: 0.85rem;
font-weight: 600;
border: 1.5px solid var(--line);
border-radius: 8px;
background: var(--bg-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
color: var(--ink);
font-family: inherit;
}
.loan-sort select:hover, .loan-sort select:focus { border-color: var(--brand); outline: none; }
.loan-results-body { padding: 16px 24px 64px; }
.loan-results-count { margin: 0 0 18px; font-size: 0.88rem; }
.loan-results-count strong { color: var(--ink); font-weight: 700; }
.loan-results-list { display: flex; flex-direction: column; gap: 28px; }
.loan-results-list .loan-result:first-child { margin-top: 4px; }
.loan-result {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 22px;
position: relative;
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr minmax(160px, auto);
gap: 24px;
align-items: center;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.loan-result:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(var(--overlay-shadow), 0.07);
border-color: var(--line-2);
}
.loan-result.is-best {
border: 2px solid var(--brand);
box-shadow: 0 4px 18px rgba(var(--overlay-shadow), 0.12);
background: linear-gradient(180deg, var(--brand-light) 0%, var(--surface) 60%);
}
.loan-result-badges {
position: absolute;
top: -12px;
left: 18px;
right: 18px;
display: flex;
gap: 6px;
flex-wrap: wrap;
pointer-events: none;
}
.loan-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: #fff;
border: 1px solid var(--line);
color: var(--ink-2);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(13, 31, 45, 0.06);
pointer-events: auto;
}
.loan-badge-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
border-color: transparent;
box-shadow: 0 2px 8px rgba(26, 135, 84, 0.3);
}
.loan-badge-ok { background: var(--brand-light); border-color: rgba(26, 135, 84, 0.25); color: var(--brand-dark); }
.loan-badge-mute { background: var(--bg-soft); }
.loan-result-issuer {
display: flex;
align-items: center;
gap: 12px;
}
.loan-result-logo {
flex-shrink: 0;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: var(--loan-brand, var(--brand));
color: #fff;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 800;
box-shadow: 0 3px 10px rgba(13, 31, 45, 0.12);
}
.loan-result-issuer-info { min-width: 0; }
.loan-result-issuer-name {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
font-weight: 600;
}
.loan-result-name {
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
margin: 1px 0 3px;
line-height: 1.25;
}
.loan-result-rating { font-size: 0.78rem; }
.loan-result-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: center;
}
.loan-metric {
display: flex;
flex-direction: column;
gap: 2px;
}
.loan-metric-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-2);
font-weight: 700;
}
.loan-metric strong {
font-size: 1.2rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.15;
}
.loan-metric-payment strong { color: var(--brand-dark); font-size: 1.35rem; }
.loan-metric-taeg strong { font-size: 1.25rem; }
.loan-metric-sub { font-size: 0.72rem; color: var(--ink-2); margin-top: 2px; }
.loan-metric-sub.loan-metric-save { color: #1a8754; font-weight: 700; }
.loan-metric-sub.loan-metric-vs { color: #c0392b; font-weight: 600; }
.loan-result-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-self: center;
}
.loan-result-actions .btn { white-space: nowrap; }
.loan-cta {
width: 100%;
padding: 10px 18px;
font-size: 0.92rem;
font-weight: 700;
}
.loan-details-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 10px;
background: transparent;
border: 0;
color: var(--ink-2);
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: color .15s;
}
.loan-details-toggle:hover { color: var(--brand-dark); }
.loan-details-toggle svg { transition: transform .25s; }
.loan-details-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.loan-result-details {
grid-column: 1 / -1;
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid var(--line);
display: grid;
gap: 14px;
animation: chat-in .25s ease;
}
.loan-result-details[hidden] { display: none; }
.loan-details-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.loan-detail-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
background: var(--bg-soft);
border-radius: 8px;
font-size: 0.85rem;
}
.loan-detail-row span { color: var(--ink-2); }
.loan-detail-row strong { color: var(--ink); font-weight: 700; }
.loan-result-highlights {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.loan-result-highlights li {
padding: 4px 10px;
background: var(--brand-light);
border-radius: 999px;
font-size: 0.78rem;
color: var(--brand-dark);
font-weight: 600;
}
.loan-result-highlights li::before { content: '✓ '; }
.loan-result-desc {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-2);
}
.loan-disclaimer {
margin-top: 36px;
padding: 18px 22px;
background: rgba(245, 158, 11, 0.06);
border-left: 3px solid #f59e0b;
border-radius: 8px;
}
.loan-disclaimer strong { display: block; margin-bottom: 6px; color: var(--ink); }
.loan-disclaimer p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
.loan-disclaimer p strong { display: inline; color: var(--ink); }
@media (max-width: 900px) {
.loan-result {
grid-template-columns: 1fr;
padding: 16px;
gap: 14px;
}
.loan-result-metrics {
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 12px;
background: var(--bg-soft);
border-radius: 10px;
}
.loan-result-actions { flex-direction: row; }
.loan-result-actions .btn { flex: 1; }
}
@media (max-width: 720px) {
.loan-hero { padding: 32px 0 8px; }
.loan-simulator { padding: 20px 16px; border-radius: 14px; }
.loan-fields-row { grid-template-columns: 1fr; gap: 14px; }
.loan-trust-row { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.loan-hero-main { grid-template-columns: 1fr; gap: 16px; }
.loan-hero-savings { width: 100%; }
.loan-edit-bar { flex-direction: column; padding: 8px; border-radius: 12px; }
.loan-edit-field { padding: 10px 14px; }
.loan-edit-divider { width: auto; height: 1px; margin: 0 14px; }
.loan-edit-submit { width: 100%; padding: 12px; justify-content: center; margin-top: 6px; }
.loan-results-toolbar {
position: static;
flex-direction: column;
align-items: stretch;
padding: 14px 16px;
}
.loan-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.loan-result-metrics { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
.loan-metric {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
background: #fff;
padding: 8px 10px;
border-radius: 6px;
}
.loan-metric-label { font-size: 0.7rem; }
.loan-metric strong { font-size: 1rem; }
.loan-metric-payment strong { font-size: 1.05rem; }
.loan-metric-sub { margin-top: 0; }
.loan-result-badges { position: static; top: auto; margin-bottom: 6px; }
}
/* ============================================================
Cookie consent — GDPR banner + preferences modal
============================================================ */
.cc-banner {
position: fixed;
bottom: 16px;
left: 16px; right: 16px;
z-index: 950;
max-width: 1100px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(13, 31, 45, 0.18), 0 4px 12px rgba(13, 31, 45, 0.08);
padding: 18px 22px;
opacity: 0;
transform: translateY(20px);
transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.cc-banner.is-open { opacity: 1; transform: translateY(0); }
.cc-banner[hidden] { display: none; }
.cc-banner-inner {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.cc-banner-text { flex: 1; min-width: 260px; }
.cc-banner-text strong {
display: block;
font-size: 0.95rem;
margin-bottom: 4px;
color: var(--ink);
}
.cc-banner-text p {
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink-2);
}
.cc-banner-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Shared consent buttons (banner + modal) */
.cc-btn {
padding: 9px 16px;
border: 1px solid transparent;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
}
.cc-btn-primary { background: var(--brand); color: #fff; }
.cc-btn-primary:hover { background: var(--brand-dark); }
.cc-btn-outline {
background: transparent;
border-color: var(--line-2);
color: var(--ink);
}
.cc-btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.cc-btn-ghost {
background: transparent;
color: var(--ink-2);
}
.cc-btn-ghost:hover { color: var(--brand-dark); background: var(--bg-soft); }
/* Modal */
.cc-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .25s;
}
.cc-modal.is-open { opacity: 1; }
.cc-modal[hidden] { display: none; }
.cc-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(13, 31, 45, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.cc-modal-panel {
position: relative;
background: #fff;
border-radius: 18px;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
box-shadow: 0 24px 60px rgba(13, 31, 45, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96);
transition: transform .25s cubic-bezier(.34, 1.2, .64, 1);
}
.cc-modal.is-open .cc-modal-panel { transform: scale(1); }
.cc-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 24px 26px 16px;
border-bottom: 1px solid var(--line);
}
.cc-modal-header h2 {
margin: 0 0 6px;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.cc-modal-lead {
margin: 0;
font-size: 0.88rem;
color: var(--ink-2);
line-height: 1.5;
}
.cc-modal-close {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-soft);
border: 0;
border-radius: 50%;
font-size: 1.4rem;
color: var(--ink-2);
cursor: pointer;
flex-shrink: 0;
}
.cc-modal-close:hover { background: var(--line); color: var(--danger); }
.cc-modal-body {
padding: 8px 26px 20px;
overflow-y: auto;
}
.cc-category + .cc-category { margin-top: 4px; border-top: 1px solid var(--line); }
.cc-category-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px 0;
}
.cc-category h3 {
margin: 0 0 4px;
font-size: 0.95rem;
font-weight: 700;
}
.cc-category p {
margin: 0;
font-size: 0.82rem;
color: var(--ink-2);
line-height: 1.45;
}
/* Toggle switch */
.cc-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
flex-shrink: 0;
user-select: none;
}
.cc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cc-toggle-bar {
position: relative;
display: inline-block;
width: 44px; height: 24px;
background: var(--line-2);
border-radius: 999px;
transition: background .2s;
flex-shrink: 0;
}
.cc-toggle-knob {
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform .2s cubic-bezier(.34, 1.2, .64, 1);
}
.cc-toggle input:checked ~ .cc-toggle-bar { background: var(--brand); }
.cc-toggle input:checked ~ .cc-toggle-bar .cc-toggle-knob { transform: translateX(20px); }
.cc-toggle-locked .cc-toggle-bar { background: var(--brand); opacity: 0.6; }
.cc-toggle-locked .cc-toggle-bar .cc-toggle-knob { transform: translateX(20px); }
.cc-toggle-locked .cc-toggle-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-dark);
}
.cc-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 26px 24px;
border-top: 1px solid var(--line);
background: var(--bg-soft);
flex-wrap: wrap;
}
/* Footer "gerir cookies" link */
.footer-cookies {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
.footer-cookies:hover { color: var(--brand-dark) !important; }
.footer-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* ============================================================
Blog — admin posts grid + editor + public list/single
============================================================ */
.admin-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.admin-post-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
transition: all .15s;
display: flex;
flex-direction: column;
}
.admin-post-card:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(13, 31, 45, 0.06);
}
.admin-post-thumb {
aspect-ratio: 16/9;
background: var(--bg-soft);
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
font-size: 0.85rem;
}
.admin-post-status {
position: absolute;
top: 10px; left: 10px;
padding: 4px 10px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.admin-post-status.is-published { background: var(--brand); color: #fff; }
.admin-post-status.is-draft { background: #fff; color: var(--ink-2); }
.admin-post-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.admin-post-cat {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-dark);
}
.admin-post-card h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.admin-post-meta { display: flex; gap: 4px; }
.admin-post-actions {
display: flex;
gap: 6px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.admin-post-actions .btn { flex: 1; }
.admin-post-actions .btn-danger { flex: 0; }
/* Admin posts — list view, toolbar, bulk actions, pagination */
.admin-list-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.admin-search-bar-compact { flex: 1; margin: 0; min-width: 260px; }
.admin-search-bar-compact select {
border: 0;
background: var(--bg-soft);
padding: 6px 10px;
border-radius: 8px;
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
}
.admin-view-toggle {
display: inline-flex;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 10px;
padding: 3px;
flex-shrink: 0;
}
.admin-view-toggle a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 32px;
border-radius: 7px;
color: var(--ink-2);
transition: all .15s;
}
.admin-view-toggle a:hover { color: var(--brand-dark); }
.admin-view-toggle a.is-active {
background: #fff;
color: var(--ink);
box-shadow: 0 1px 3px rgba(13, 31, 45, 0.08);
}
/* Bulk action bar (sticky at top of page when active) */
.admin-bulk-bar {
position: sticky;
top: 0;
z-index: 30;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 18px;
margin: 0 0 14px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(26, 135, 84, 0.25);
animation: bulk-bar-in .25s cubic-bezier(.34, 1.2, .64, 1);
}
.admin-bulk-bar[hidden] { display: none; }
@keyframes bulk-bar-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.admin-bulk-count { font-size: 0.92rem; font-weight: 600; }
.admin-bulk-count strong { font-size: 1.1rem; }
.admin-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-bulk-bar .btn {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
font-weight: 600;
}
.admin-bulk-bar .btn:hover { background: rgba(255, 255, 255, 0.28); }
.admin-bulk-bar .btn-danger { background: rgba(255, 0, 0, 0.25); }
.admin-bulk-bar .btn-danger:hover { background: rgba(255, 0, 0, 0.4); }
.admin-bulk-bar .btn-ghost { background: transparent; border-color: transparent; }
.admin-bulk-bar .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* List view */
.admin-post-list {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.admin-post-list-head,
.admin-post-row {
display: grid;
grid-template-columns: 30px 56px minmax(0, 1fr) 90px 90px 110px;
align-items: center;
gap: 12px;
padding: 10px 14px;
}
.admin-post-list-head {
background: var(--bg-soft);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.admin-post-row {
border-bottom: 1px solid var(--line);
transition: background .15s;
}
.admin-post-row:last-child { border-bottom: 0; }
.admin-post-row:hover { background: var(--bg-soft); }
.admin-bulk-check {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.admin-bulk-check input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--brand);
cursor: pointer;
}
.admin-post-row-thumb {
width: 56px;
aspect-ratio: 16/10;
background: var(--bg-soft);
background-size: cover;
background-position: center;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: var(--line-2);
font-size: 1rem;
}
.admin-post-row-info { min-width: 0; }
.admin-post-row-title {
display: block;
font-weight: 600;
color: var(--ink);
font-size: 0.92rem;
line-height: 1.3;
margin-bottom: 2px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.admin-post-row-title:hover { color: var(--brand-dark); }
.admin-post-cat-inline {
display: inline-block;
padding: 1px 8px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 4px;
}
.admin-post-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-post-status-pill.is-published { background: var(--brand-light); color: var(--brand-dark); }
.admin-post-status-pill.is-draft { background: var(--bg-soft); color: var(--ink-2); }
.admin-post-row-date { font-size: 0.82rem; }
.admin-post-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Card view: add corner checkbox */
.admin-post-card { position: relative; }
.admin-post-card-check {
position: absolute;
top: 12px; left: 12px;
z-index: 5;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Pagination */
.admin-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin: 32px 0;
flex-wrap: wrap;
}
.admin-page-num,
.admin-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink-2);
text-decoration: none;
transition: all .15s;
}
.admin-page-num:hover,
.admin-page-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.admin-page-num.is-current {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.admin-page-btn.is-disabled {
opacity: 0.4;
pointer-events: none;
cursor: default;
}
.admin-page-dots {
display: inline-flex;
align-items: center;
padding: 0 6px;
color: var(--line-2);
}
@media (max-width: 980px) {
.admin-post-list-head { display: none; }
.admin-post-row {
grid-template-columns: 30px 56px minmax(0, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"check thumb info"
"check thumb status"
"check thumb actions";
gap: 4px 12px;
padding: 12px 14px;
}
.admin-bulk-check { grid-area: check; align-self: start; padding-top: 4px; }
.admin-post-row-thumb { grid-area: thumb; align-self: start; }
.admin-post-row-info { grid-area: info; }
.admin-post-row-status {
grid-area: status;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.admin-post-row-status::after {
content: attr(data-date);
}
.admin-post-row-date { display: inline; }
.admin-post-row-status,
.admin-post-row-date { font-size: 0.72rem; }
.admin-post-row-actions {
grid-area: actions;
justify-content: flex-start;
margin-top: 4px;
}
}
/* Post editor layout */
.post-edit-form .admin-form { padding: 0; background: transparent; border: 0; }
.post-edit-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
}
.post-edit-main .form-fieldset {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 24px 28px;
}
.post-edit-main legend { display: none; }
.post-edit-side .form-fieldset {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
}
.post-edit-side .form-fieldset legend {
padding: 0 0 10px;
margin-bottom: 12px;
}
#editor-container { background: #fff; border-radius: 10px; }
#editor { min-height: 400px; font-size: 1rem; line-height: 1.6; font-family: inherit; }
.ql-toolbar.ql-snow {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-color: var(--line-2);
}
.ql-container.ql-snow {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: var(--line-2);
font-family: inherit;
}
.ql-editor h2, .ql-editor h3, .ql-editor h4 { font-family: inherit; }
@media (max-width: 900px) {
.post-edit-grid { grid-template-columns: 1fr; }
}
/* Public blog */
.blog-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 56px 0 24px;
text-align: center;
}
.blog-hero-eyebrow {
display: inline-block;
padding: 5px 14px;
background: #fff;
border: 1px solid rgba(26, 135, 84, 0.25);
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.blog-hero h1 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.blog-hero .lead { max-width: 600px; margin: 0 auto; font-size: 1.05rem; color: var(--ink-2); }
.blog-cats {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 22px;
}
.blog-cat {
padding: 6px 14px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
font-size: 0.84rem;
font-weight: 600;
color: var(--ink-2);
transition: all .15s;
}
.blog-active-filter {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 22px auto 0;
padding: 8px 14px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.88rem;
font-weight: 500;
}
.blog-active-filter strong { color: var(--brand); }
.blog-active-filter-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
background: var(--brand);
color: #fff;
border-radius: 50%;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
transition: transform .12s;
}
.blog-active-filter-clear:hover { transform: rotate(90deg); }
.blog-cat:hover { border-color: var(--brand); color: var(--brand); }
.blog-cat.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.blog-body { padding: 40px 24px 80px; }
.blog-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
align-items: stretch;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
margin-bottom: 48px;
transition: all .18s;
}
.blog-featured:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(13, 31, 45, 0.08);
}
.blog-featured-art {
background-size: cover;
background-position: center;
background-color: var(--bg-soft);
min-height: 320px;
}
.blog-featured-placeholder {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
opacity: 0.3;
}
.blog-featured-info {
padding: 32px 36px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.blog-featured-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
}
.blog-featured-info h2 {
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
letter-spacing: -0.01em;
margin: 0;
line-height: 1.2;
}
.blog-featured-info p {
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: var(--ink-2);
}
.blog-post-cat {
display: inline-block;
padding: 3px 10px;
background: var(--brand-light);
color: var(--brand-dark);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-post-meta {
display: flex;
gap: 6px;
font-size: 0.82rem;
color: var(--ink-2);
flex-wrap: wrap;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.blog-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
color: var(--ink);
transition: all .18s;
display: flex;
flex-direction: column;
}
.blog-card:hover {
border-color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(13, 31, 45, 0.06);
}
.blog-card-art {
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
background-color: var(--bg-soft);
}
.blog-card-info { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-info h3 {
margin: 0;
font-size: 1.05rem;
line-height: 1.3;
letter-spacing: -0.01em;
/* Cap title to 3 lines so all cards in a row line up regardless of length */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-info p {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
flex: 1;
/* Cap excerpt to 3 lines — guarantees equal heights across a row of cards */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Dark mode polish for related/blog cards — explicit hover (the base
hover lifts a near-black shadow that's invisible against dark bg) and
a touch more ink on the excerpt so it doesn't fade into the card. */
html[data-theme="dark"] .blog-card:hover {
border-color: var(--brand);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .blog-card-info p { color: var(--ink); opacity: 0.78; }
/* Single post */
.post-page { padding-bottom: 80px; }
.post-hero {
background: linear-gradient(180deg, var(--brand-light) 0%, transparent 100%);
padding: 40px 0 32px;
text-align: center;
}
.post-breadcrumb {
font-size: 0.82rem;
color: var(--ink-2);
margin-bottom: 14px;
}
.post-breadcrumb a { color: var(--brand-dark); font-weight: 600; }
.post-breadcrumb a:hover { color: var(--brand); }
.post-hero h1 {
font-size: clamp(1.8rem, 4.5vw, 3rem);
letter-spacing: -0.02em;
max-width: 780px;
margin: 0 auto 14px;
line-height: 1.15;
}
.post-excerpt {
max-width: 680px;
margin: 0 auto 18px;
font-size: 1.1rem;
line-height: 1.55;
color: var(--ink-2);
}
.post-meta {
display: flex;
justify-content: center;
gap: 8px;
font-size: 0.88rem;
color: var(--ink-2);
flex-wrap: wrap;
}
.post-meta strong { color: var(--ink); font-weight: 600; }
.post-meta-sep { color: var(--line-2); }
.post-featured-image {
max-width: 760px;
margin: 0 auto 40px;
padding: 0 24px;
}
.post-featured-image img {
width: 100%;
border-radius: 14px;
aspect-ratio: 16/9;
object-fit: cover;
box-shadow: 0 16px 32px rgba(var(--overlay-shadow), 0.12);
}
.post-content-wrap { max-width: 760px; padding: 0 24px; }
.post-content {
font-size: 1.05rem;
line-height: 1.75;
color: var(--ink);
}
.post-content h2 { font-size: 1.7rem; margin: 36px 0 14px; letter-spacing: -0.01em; }
.post-content h3 { font-size: 1.35rem; margin: 28px 0 12px; }
.post-content h4 { font-size: 1.1rem; margin: 22px 0 10px; }
.post-content p { margin: 0 0 18px; }
.post-content ul, .post-content ol { margin: 0 0 18px; padding-left: 22px; }
.post-content li { margin-bottom: 6px; }
.post-content blockquote {
margin: 24px 0;
padding: 16px 22px;
border-left: 4px solid var(--brand);
background: var(--brand-light);
border-radius: 0 8px 8px 0;
font-style: italic;
color: var(--ink);
}
.post-content img {
max-width: 100%;
border-radius: 10px;
margin: 24px 0;
display: block;
}
.post-content a { color: var(--brand-dark); border-bottom: 1px solid currentColor; }
.post-content a:hover { color: var(--brand); }
.post-content pre, .post-content code {
background: var(--bg-soft);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
}
.post-content code { padding: 1px 6px; }
.post-content pre { padding: 14px 18px; overflow-x: auto; margin: 18px 0; }
.post-tags {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.post-tag {
font-size: 0.84rem;
color: var(--ink-2);
padding: 4px 12px;
background: var(--bg-soft);
border-radius: 999px;
}
/* ============================================================
WordPress imported content — core blocks + alignments
Scoped to .post-content so it only affects blog post bodies.
============================================================ */
/* Image alignments (WP core) */
.post-content .aligncenter,
.post-content .wp-block-image.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.post-content .alignleft,
.post-content .wp-block-image.alignleft {
float: left;
margin: 6px 24px 12px 0;
max-width: 50%;
}
.post-content .alignright,
.post-content .wp-block-image.alignright {
float: right;
margin: 6px 0 12px 24px;
max-width: 50%;
}
.post-content .alignwide,
.post-content .wp-block-image.alignwide {
max-width: calc(100% + 80px);
margin-left: -40px;
margin-right: -40px;
}
.post-content .alignfull,
.post-content .wp-block-image.alignfull {
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
.post-content .wp-block-image figure,
.post-content figure.wp-block-image { margin: 24px 0; }
.post-content figure img { display: block; margin: 0 auto; }
/* Captions */
.post-content .wp-caption,
.post-content figure.wp-block-image figcaption,
.post-content .wp-element-caption {
font-size: 0.85rem;
color: var(--ink-2);
text-align: center;
margin: 8px 0 0;
font-style: italic;
}
/* WP core columns */
.post-content .wp-block-columns {
display: flex;
gap: 24px;
margin: 24px 0;
flex-wrap: wrap;
}
.post-content .wp-block-column { flex: 1 1 240px; min-width: 0; }
/* Buttons (wp core / themeisle) */
.post-content .wp-block-button {
margin: 18px 0;
}
.post-content .wp-block-button__link,
.post-content .wp-element-button {
display: inline-flex;
align-items: center;
padding: 10px 22px;
background: var(--brand);
color: #fff !important;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 0;
transition: background .15s, transform .15s;
}
.post-content .wp-block-button__link:hover,
.post-content .wp-element-button:hover {
background: var(--brand-dark);
transform: translateY(-1px);
color: #fff;
}
/* Tables (WP core) */
.post-content .wp-block-table,
.post-content figure.wp-block-table { margin: 24px 0; overflow-x: auto; }
.post-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.post-content table th,
.post-content table td {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.post-content table thead th {
background: var(--bg-soft);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-2);
}
.post-content table tbody tr:hover { background: var(--bg-soft); }
/* Pull quotes & block quotes (WP core) */
.post-content .wp-block-pullquote,
.post-content .wp-block-quote {
margin: 24px 0;
padding: 16px 22px;
border-left: 4px solid var(--brand);
background: var(--brand-light);
border-radius: 0 8px 8px 0;
font-style: italic;
}
.post-content .wp-block-pullquote cite,
.post-content .wp-block-quote cite {
display: block;
margin-top: 8px;
font-size: 0.85rem;
color: var(--ink-2);
font-style: normal;
}
/* Embeds (YouTube, Twitter, etc.) */
.post-content .wp-block-embed { margin: 24px 0; }
.post-content .wp-block-embed iframe {
max-width: 100%;
border-radius: 10px;
}
.post-content .wp-block-embed__wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
}
.post-content .wp-block-embed__wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
/* Separator */
.post-content .wp-block-separator {
border: 0;
height: 1px;
background: var(--line);
margin: 32px auto;
max-width: 200px;
}
.post-content .wp-block-separator.is-style-wide { max-width: 100%; }
.post-content .wp-block-separator.is-style-dots {
background: none;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.5em;
line-height: 1;
height: auto;
}
.post-content .wp-block-separator.is-style-dots::before { content: '···'; color: var(--line-2); }
/* Lists with WP block class */
.post-content .wp-block-list,
.post-content ul.wp-block-list,
.post-content ol.wp-block-list { padding-left: 22px; }
/* Headings spacing (WP block) */
.post-content .wp-block-heading { letter-spacing: -0.01em; }
/* Clearfix for floats */
.post-content::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 640px) {
.post-content .alignleft,
.post-content .alignright {
float: none;
margin: 18px auto;
max-width: 100%;
}
.post-content .alignwide,
.post-content .alignfull {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
}
/* Imported WP Otter "Posts" — when REST returned flattened HTML (no block classes).
process_imported_content() in functions.php rebuilds them as cards using these classes. */
.post-content .imported-posts-block {
margin: 28px 0;
padding: 22px 24px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 14px;
}
.post-content .imported-posts-label {
display: block;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 14px;
}
.post-content .imported-post-card {
display: grid;
grid-template-columns: 160px 1fr;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: all .15s;
margin: 0 0 12px;
}
.post-content .imported-post-card:last-child { margin-bottom: 0; }
.post-content .imported-post-card:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 31, 45, 0.08);
}
.post-content .imported-post-image {
display: block;
overflow: hidden;
background: var(--bg-soft);
border: 0;
}
.post-content .imported-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
display: block;
aspect-ratio: 16/9;
}
.post-content .imported-post-body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0;
}
.post-content .imported-post-cat {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-dark);
}
.post-content .imported-post-title {
margin: 2px 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.post-content .imported-post-title a,
.post-content .imported-post-title a:link,
.post-content .imported-post-title a:visited {
/* Force all link states to the ink colour. Without :visited, the browser
repaints visited links in the default purple/magenta, which becomes
unreadable on the dark surface in dark mode (and looks unpolished in
light mode too). */
color: var(--ink);
border: 0;
text-decoration: none;
}
.post-content .imported-post-card:hover .imported-post-title a,
.post-content .imported-post-card:hover .imported-post-title a:visited {
color: var(--brand-dark);
}
/* ============================================================
WordPress imported content — ThemeIsle Otter "Posts Grid" block.
Articles imported from creditoportugues.com bring their original
markup (.wp-block-themeisle-blocks-posts-grid + .o-posts-grid-*).
Without these rules the block renders with browser defaults — fine
in light mode by accident, broken in dark mode (white card on dark
bg, visited links go purple, etc.).
============================================================ */
.post-content .wp-block-themeisle-blocks-posts-grid {
margin: 28px 0;
padding: 22px 24px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 14px;
}
.post-content .wp-block-themeisle-blocks-posts-grid::before {
content: "Artigos relacionados";
display: block;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 14px;
}
.post-content .wp-block-themeisle-blocks-posts-grid .is-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.post-content .o-posts-grid-post-blog {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.post-content .o-posts-grid-post-blog:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 31, 45, 0.08);
}
.post-content .o-posts-grid-post {
display: grid;
grid-template-columns: 160px 1fr;
align-items: stretch;
gap: 0;
}
.post-content .o-posts-grid-post-image {
display: block;
overflow: hidden;
background: var(--bg-soft);
border: 0;
}
.post-content .o-posts-grid-post-image a { display: block; height: 100%; }
.post-content .o-posts-grid-post-image img {
width: 100%; height: 100%;
object-fit: cover;
margin: 0; border-radius: 0;
aspect-ratio: 16/9;
display: block;
}
.post-content .o-posts-grid-post-body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0;
}
.post-content .o-posts-grid-post-category {
margin: 0;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-dark);
}
.post-content .o-posts-grid-post-category a,
.post-content .o-posts-grid-post-category a:link,
.post-content .o-posts-grid-post-category a:visited {
color: inherit;
border: 0;
text-decoration: none;
}
.post-content .o-posts-grid-post-title {
margin: 2px 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.post-content .o-posts-grid-post-title a,
.post-content .o-posts-grid-post-title a:link,
.post-content .o-posts-grid-post-title a:visited {
/* Force all states (incl. :visited) so the browser never paints purple */
color: var(--ink);
border: 0;
text-decoration: none;
}
.post-content .o-posts-grid-post-blog:hover .o-posts-grid-post-title a,
.post-content .o-posts-grid-post-blog:hover .o-posts-grid-post-title a:visited {
color: var(--brand-dark);
}
.post-content .o-posts-grid-post-meta {
margin: 0;
font-size: 0.78rem;
color: var(--ink-2);
}
.post-content .o-posts-grid-post-meta a,
.post-content .o-posts-grid-post-meta a:link,
.post-content .o-posts-grid-post-meta a:visited {
color: inherit;
border: 0;
text-decoration: none;
}
.post-content .o-posts-grid-post-description {
margin: 4px 0 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dark mode for the ThemeIsle posts grid */
html[data-theme="dark"] .post-content .wp-block-themeisle-blocks-posts-grid {
background: var(--bg-soft);
border-color: var(--line);
}
html[data-theme="dark"] .post-content .wp-block-themeisle-blocks-posts-grid::before {
color: var(--brand);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-blog {
background: var(--surface);
border-color: var(--line);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-blog:hover {
border-color: var(--brand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-category {
color: var(--brand);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-title a,
html[data-theme="dark"] .post-content .o-posts-grid-post-title a:link,
html[data-theme="dark"] .post-content .o-posts-grid-post-title a:visited {
color: var(--ink);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-blog:hover .o-posts-grid-post-title a,
html[data-theme="dark"] .post-content .o-posts-grid-post-blog:hover .o-posts-grid-post-title a:visited {
color: var(--brand);
}
html[data-theme="dark"] .post-content .o-posts-grid-post-meta,
html[data-theme="dark"] .post-content .o-posts-grid-post-description {
color: var(--ink-2);
}
/* Mobile: stack image on top, body below */
@media (max-width: 640px) {
.post-content .o-posts-grid-post {
grid-template-columns: 1fr;
}
.post-content .o-posts-grid-post-image img { aspect-ratio: 21/9; }
}
/* Dark mode polish for the imported-post block — make sure backgrounds,
text and the "Artigos relacionados" label all stay readable. */
html[data-theme="dark"] .post-content .imported-posts-block {
background: var(--bg-soft);
border-color: var(--line);
}
html[data-theme="dark"] .post-content .imported-posts-label {
color: var(--brand);
}
html[data-theme="dark"] .post-content .imported-post-card {
border-color: var(--line);
}
html[data-theme="dark"] .post-content .imported-post-card:hover {
border-color: var(--brand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .post-content .imported-post-cat {
color: var(--brand);
}
html[data-theme="dark"] .post-content .imported-post-title a,
html[data-theme="dark"] .post-content .imported-post-title a:link,
html[data-theme="dark"] .post-content .imported-post-title a:visited {
color: var(--ink);
}
html[data-theme="dark"] .post-content .imported-post-card:hover .imported-post-title a,
html[data-theme="dark"] .post-content .imported-post-card:hover .imported-post-title a:visited {
color: var(--brand);
}
html[data-theme="dark"] .post-content .imported-post-meta,
html[data-theme="dark"] .post-content .imported-post-excerpt {
color: var(--ink-2);
}
.post-content .imported-post-meta {
margin: 0;
font-size: 0.78rem;
color: var(--ink-2);
}
.post-content .imported-post-excerpt {
margin: 4px 0 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 640px) {
.post-content .imported-posts-block { padding: 16px; }
.post-content .imported-post-card { grid-template-columns: 100px 1fr; }
.post-content .imported-post-body { padding: 10px 14px; }
.post-content .imported-post-title { font-size: 0.92rem; }
.post-content .imported-post-excerpt { display: none; }
}
/* Otter-Blocks "Posts" grid (legacy from WordPress import) — styled to match our design */
.post-content .wp-block-themeisle-blocks-posts-grid {
margin: 28px 0;
padding: 22px 24px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.post-content .wp-block-themeisle-blocks-posts-grid::before {
content: 'Artigos relacionados';
display: block;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-dark);
margin-bottom: 4px;
}
.post-content .wp-block-themeisle-blocks-posts-grid .is-list,
.post-content .wp-block-themeisle-blocks-posts-grid .is-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-blog {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: all .15s;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-blog:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 31, 45, 0.08);
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post {
display: grid;
grid-template-columns: 160px 1fr;
gap: 0;
align-items: stretch;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-image {
margin: 0;
overflow: hidden;
background: var(--bg-soft);
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-image a {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
display: block;
aspect-ratio: 16/9;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-category {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-dark);
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-category a {
color: inherit;
border: 0;
text-decoration: none;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-title {
margin: 2px 0;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-title a {
color: var(--ink);
border: 0;
text-decoration: none;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-blog:hover .o-posts-grid-post-title a {
color: var(--brand-dark);
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-meta {
margin: 0;
font-size: 0.78rem;
color: var(--ink-2);
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-meta a {
color: var(--ink-2);
border: 0;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-description {
margin: 4px 0 0;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-description p {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Hide the dangling "/ 0 comments" text and orphan slashes */
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-comments,
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-meta-separator { display: none; }
/* Grid variant (when used as 2/3 column grid) */
.post-content .wp-block-themeisle-blocks-posts-grid.is-style-grid .is-list,
.post-content .wp-block-themeisle-blocks-posts-grid.is-style-grid .is-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.post-content .wp-block-themeisle-blocks-posts-grid.is-style-grid .o-posts-grid-post {
grid-template-columns: 1fr;
}
.post-content .wp-block-themeisle-blocks-posts-grid.is-style-grid .o-posts-grid-post-image {
aspect-ratio: 16/9;
}
@media (max-width: 640px) {
.post-content .wp-block-themeisle-blocks-posts-grid {
padding: 16px;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post {
grid-template-columns: 100px 1fr;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-body {
padding: 10px 14px;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-title {
font-size: 0.92rem;
}
.post-content .wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-description {
display: none;
}
}
.post-related {
margin-top: 72px;
padding-top: 40px;
border-top: 1px solid var(--line);
}
/* Mobile: compress the post hero so title + excerpt + meta + image + start
of content all fit comfortably above the fold on a phone viewport. */
@media (max-width: 720px) {
.post-page { padding-bottom: 48px; }
.post-hero { padding: 16px 0 14px; }
.post-breadcrumb { font-size: 0.74rem; margin-bottom: 8px; }
.post-hero h1 {
font-size: 1.35rem;
line-height: 1.18;
letter-spacing: -0.015em;
margin: 0 auto 8px;
padding: 0 6px;
}
.post-excerpt {
font-size: 0.92rem;
line-height: 1.45;
margin: 0 auto 10px;
padding: 0 6px;
/* Cap at 2 lines on mobile — full excerpt would push image off-screen */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.post-meta { font-size: 0.78rem; gap: 6px; }
.post-featured-image {
margin: 0 auto 20px;
padding: 0 16px;
}
.post-featured-image img {
border-radius: 12px;
/* Slightly wider ratio (21:9) saves vertical space without losing impact */
aspect-ratio: 21/9;
box-shadow: 0 10px 22px rgba(13, 31, 45, 0.12);
}
.post-content-wrap { padding: 0 18px; }
.post-content { font-size: 0.98rem; line-height: 1.65; }
.post-content p { margin: 0 0 14px; }
.post-content h2 { font-size: 1.35rem; margin: 24px 0 10px; }
.post-content h3 { font-size: 1.15rem; margin: 20px 0 8px; }
}
.post-related h2 {
font-size: 1.4rem;
letter-spacing: -0.01em;
margin: 0 0 22px;
text-align: center;
}
@media (max-width: 720px) {
.blog-featured { grid-template-columns: 1fr; }
.blog-featured-art { min-height: 200px; }
.blog-featured-info { padding: 22px 24px; }
}
/* Push opt-in toast — top-center, appears after a few seconds of interaction */
.push-bar {
position: fixed;
top: 88px;
left: 50%;
z-index: 90;
width: min(440px, calc(100vw - 32px));
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(13, 31, 45, 0.18), 0 4px 12px rgba(13, 31, 45, 0.06);
padding: 14px 18px;
transform: translate(-50%, -16px);
opacity: 0;
transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.2, .64, 1);
}
.push-bar.is-visible { opacity: 1; transform: translate(-50%, 0); }
.push-bar[hidden] { display: none; }
.push-bar-inner { display: flex; flex-direction: column; gap: 10px; }
.push-bar-text strong {
display: block;
font-size: 0.92rem;
margin-bottom: 2px;
color: var(--ink);
}
.push-bar-text p {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--ink-2);
}
.push-bar-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.push-bar-actions .cc-btn { padding: 7px 14px; font-size: 0.82rem; }
@media (max-width: 640px) {
.push-bar { top: 80px; width: calc(100vw - 24px); }
.push-bar-actions .cc-btn { flex: 1; }
.cc-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; border-radius: 14px; }
.cc-banner-inner { gap: 14px; }
.cc-banner-actions { width: 100%; }
.cc-banner-actions .cc-btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 0.8rem; }
.cc-modal { padding: 0; align-items: flex-end; }
.cc-modal-panel { max-height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(20px); }
.cc-modal.is-open .cc-modal-panel { transform: translateY(0); }
.cc-modal-footer { padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0)); }
.cc-modal-footer .cc-btn { flex: 1; }
}