/* Ampliando Circulos — Brand Theme Navy: #1A2755 | Teal: #1DC88B | Footer: #1F2945 Softened palette for admin UI comfort */ /* Force light mode across every surface that loads theme.css. Bulma 1.x's @media (prefers-color-scheme: dark) flips its CSS tokens when the OS is dark — `data-theme="light"` on already pins it, color-scheme tells the browser's native UI (scrollbars, form controls, date pickers) to stay light too. Belt-and-braces. */ :root { color-scheme: only light; } /* ── Fonts ── */ @font-face { font-family: "Open Sans"; src: url("/static/fonts/open-sans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/static/fonts/open-sans-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url("/static/fonts/open-sans-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ── Bulma CSS Variable Overrides ── */ :root { --bulma-family-primary: "Open Sans", sans-serif; --bulma-family-secondary: "Open Sans", sans-serif; /* Primary: Teal #1DC88B */ --bulma-primary-h: 157; --bulma-primary-s: 75%; --bulma-primary-l: 45%; /* Link: teal */ --bulma-link-h: 157; --bulma-link-s: 75%; --bulma-link-l: 45%; /* Info: Navy #1A2755 */ --bulma-info-h: 224; --bulma-info-s: 54%; --bulma-info-l: 22%; /* Soft warm background */ --bulma-scheme-h: 220; --bulma-scheme-s: 12%; --bulma-control-radius: 0.5rem; --bulma-radius: 0.5rem; /* App custom tokens */ --ac-navy: #1A2755; --ac-teal: #1DC88B; --ac-navy-soft: #2a3a6b; --ac-bg: #f5f6f8; --ac-card-shadow: 0 1px 4px rgba(26, 39, 85, 0.06); /* Text colors — WCAG AA compliant on white (#fff) and light bg (#f5f6f8) */ --ac-text-primary: #111827; /* gray-900 — headings, stat values. 15.4:1 on white */ --ac-text-secondary: #374151; /* gray-700 — body text. 10.3:1 on white */ --ac-text-muted: #4b5563; /* gray-600 — labels, descriptions. 7.0:1 on white */ --ac-text-subtle: #6b7280; /* gray-500 — sublabels. 5.0:1 on white (AA for large text) */ } body { background-color: var(--ac-bg); } /* ── Navbar: navy brand ── */ .navbar.is-primary { background-color: var(--ac-navy); box-shadow: 0 2px 8px rgba(26, 39, 85, 0.15); } .navbar.is-primary .navbar-item, .navbar.is-primary .navbar-link { color: rgba(255, 255, 255, 0.8); font-weight: 400; } .navbar.is-primary .navbar-item:hover, .navbar.is-primary .navbar-item.is-active { background-color: rgba(255, 255, 255, 0.08); color: #fff; } .navbar.is-primary .navbar-brand .navbar-item { color: var(--ac-teal); font-weight: 700; } /* ── Buttons ── */ .button.is-primary { background-color: var(--ac-teal); border-color: transparent; color: #fff; font-weight: 600; padding-left: 1.5em; padding-right: 1.5em; } .button.is-primary:hover { background-color: #17b57c; } .button.is-primary.is-loading::after { border-color: transparent transparent #fff #fff; } .button.is-info { background-color: var(--ac-navy); border-color: transparent; color: #fff; } .button.is-info:hover { background-color: var(--ac-navy-soft); } /* ── Cards & Boxes ── */ .box { border-radius: 0.75rem; box-shadow: var(--ac-card-shadow); border: 1px solid rgba(26, 39, 85, 0.06); } /* ── Dashboard stat cards — white with colored left accent ── */ .stat-card-link { display: block; height: 100%; text-decoration: none; color: inherit; } .stat-card { background: #fff; border-left: 4px solid #e0e0e0; border-radius: 0.75rem; box-shadow: var(--ac-card-shadow); border-top: 1px solid rgba(26, 39, 85, 0.05); border-right: 1px solid rgba(26, 39, 85, 0.05); border-bottom: 1px solid rgba(26, 39, 85, 0.05); padding: 1.25rem 1.5rem; height: 100%; transition: box-shadow 0.15s ease, transform 0.15s ease; cursor: pointer; } .stat-card:hover { box-shadow: 0 4px 12px rgba(26, 39, 85, 0.1); transform: translateY(-1px); } .stat-card .stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ac-text-muted); margin-bottom: 0.35rem; } .stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ac-text-primary); } /* Stat card color accents — border + number color */ .stat-card.is-navy { border-left-color: var(--ac-navy); } .stat-card.is-navy .stat-value { color: var(--ac-navy); } .stat-card.is-teal { border-left-color: var(--ac-teal); } .stat-card.is-teal .stat-value { color: #15a06e; } .stat-card.is-coral { border-left-color: #e8636f; } .stat-card.is-coral .stat-value { color: #d14d59; } .stat-card.is-slate { border-left-color: #7c8db5; } .stat-card.is-slate .stat-value { color: #5a6a8a; } .stat-card.is-info-soft { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; } .stat-card.is-warning-soft { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; } /* ── Code / Inline code ── */ code { color: var(--ac-navy); background-color: rgba(26, 39, 85, 0.06); border-radius: 3px; padding: 0.1em 0.4em; font-size: 0.875em; } /* ── Tags / Badges ── */ .tag.is-success { background-color: #e6f9f0; color: #15a06e; } .tag.is-info { background-color: rgba(26, 39, 85, 0.08); color: var(--ac-navy); } .tag.is-info.is-light { background-color: rgba(26, 39, 85, 0.06); color: var(--ac-navy); } .tag.is-danger { background-color: #fdeaec; color: #d14d59; } /* ── Impersonation banner — subtle teal tint ── */ .impersonation-bar { background-color: #e6f9f0; border-bottom: 1px solid #c3edda; color: #1a5e3f; position: sticky; top: 0; z-index: 40; padding: 0.4rem 0; padding-top: max(0.4rem, env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); font-size: 0.85rem; } .impersonation-bar strong { color: #15503a; } /* ── Login page ── */ .hero.is-fullheight { background: linear-gradient(135deg, #1A2755 0%, #1F2945 100%); } .hero .title.is-2 { color: var(--ac-teal); } /* ── Tables ── */ .table thead th { color: var(--ac-navy); font-weight: 600; border-bottom-color: rgba(29, 200, 139, 0.35); border-bottom-width: 2px; } .table tbody tr:hover { background-color: rgba(29, 200, 139, 0.06); } /* Status pills — soft tinted */ .tag.is-active-status { background-color: #e6f9f0; color: #15a06e; } .tag.is-inactive-status { background-color: #f3f4f6; color: #6b7280; } .tag.is-opted-out-status { background-color: #fdeaec; color: #d14d59; } /* ── Page titles ── */ .title { color: var(--ac-navy); } /* ── Toast area ── */ .fixed-toast-area { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; } /* ── Notifications — softer ── */ .notification.is-danger.is-light { background-color: #fdeaec; color: #a8323e; } .notification.is-success.is-light { background-color: #e6f9f0; color: #15503a; } /* ── Modals ── */ .modal-card-head { background-color: var(--ac-navy); border-bottom: none; } .modal-card-title { color: #fff; } .modal-card-head .delete::before, .modal-card-head .delete::after { background-color: rgba(255, 255, 255, 0.7); } /* ── Page Transitions (MPA cross-document View Transitions) ── */ @view-transition { navigation: auto; } #main-content { view-transition-name: main-content; } .navbar { view-transition-name: navbar; } /* Keep navbar perfectly stable across page navigations */ ::view-transition-old(navbar), ::view-transition-new(navbar) { animation: none; } /* Main content slides in from right */ ::view-transition-old(main-content) { animation: 180ms ease-out both vt-fade-out; } ::view-transition-new(main-content) { animation: 180ms ease-in 40ms both vt-fade-in; } @keyframes vt-fade-out { to { opacity: 0; transform: translateY(8px); } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } } /* ── Tab content transitions ── */ #report-content { animation: fade-slide-in 200ms ease-out; } @keyframes fade-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Element Entrance Animations ── */ @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Page title — quick fade */ .section > .container > .title:first-child, .section > .container > .level:first-child { animation: fade-in 250ms ease-out both; } /* Stat cards — staggered fade-up */ .stat-card { animation: fade-up 300ms ease-out both; } .columns > .column:nth-child(1) > .stat-card { animation-delay: 0ms; } .columns > .column:nth-child(2) > .stat-card { animation-delay: 50ms; } .columns > .column:nth-child(3) > .stat-card { animation-delay: 100ms; } .columns > .column:nth-child(4) > .stat-card { animation-delay: 150ms; } .columns > .column:nth-child(5) > .stat-card { animation-delay: 200ms; } .columns > .column:nth-child(6) > .stat-card { animation-delay: 250ms; } /* Boxes — fade-up with slight stagger */ .section .box { animation: fade-up 300ms ease-out both; } .section .box:nth-of-type(1) { animation-delay: 60ms; } .section .box:nth-of-type(2) { animation-delay: 120ms; } .section .box:nth-of-type(3) { animation-delay: 180ms; } .section .box:nth-of-type(4) { animation-delay: 240ms; } /* Tables — fade in */ .table { animation: fade-in 300ms ease-out 80ms both; } /* Action buttons area — fade in after content */ .section .buttons, .section .level .level-right { animation: fade-in 250ms ease-out 150ms both; } /* Tabs (reports page) — fade in */ .tabs { animation: fade-in 200ms ease-out both; } /* Login page — centered box entrance */ .hero .box { animation: fade-scale-in 400ms ease-out 100ms both; } .hero .title.is-2 { animation: fade-in 350ms ease-out both; } /* Modal entrance — scale + fade */ .modal.is-active .modal-card { animation: fade-scale-in 200ms ease-out both; } .modal.is-active .modal-background { animation: fade-in 200ms ease-out both; } /* Toast notifications — slide in from right */ @keyframes slide-in-toast { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .fixed-toast-area > .notification { animation: slide-in-toast 250ms ease-out both; } /* ── Info tip (? icon with hover/click tooltip) ── */ .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(26, 39, 85, 0.08); color: var(--ac-navy); font-size: 0.65rem; font-weight: 700; cursor: pointer; vertical-align: middle; margin-left: 0.35rem; transition: background 0.15s ease; border: 1px solid rgba(26, 39, 85, 0.12); line-height: 1; } .info-tip:hover { background: rgba(26, 39, 85, 0.15); } .info-tip-bubble { display: none; position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--ac-navy, #1a2755); color: #fff; font-size: 0.78rem; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 50; pointer-events: none; } .info-tip-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ac-navy, #1a2755); } /* Hover shows bubble */ .info-tip:hover .info-tip-bubble { display: block; } /* ── Chart descriptions ── */ .chart-description { font-size: 0.85rem; line-height: 1.55; color: #6b7280; } .chart-hint-box { font-size: 0.82rem; line-height: 1.5; padding: 0.6rem 0.9rem; border-radius: 0.5rem; background: #f0f4ff; color: var(--ac-text-secondary); border: 1px solid rgba(26, 39, 85, 0.08); margin-bottom: 1rem; } .chart-hint-box p { margin: 0; } /* ── Area comparison cards ── */ .area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .area-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem 1.15rem; transition: box-shadow 0.15s ease; } .area-card:hover { box-shadow: 0 2px 12px rgba(26, 39, 85, 0.08); } .area-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid #f3f4f6; } .area-card-name { font-weight: 700; font-size: 1rem; color: var(--ac-navy); } .area-card-collab { font-size: 0.78rem; color: #6b7280; } .area-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; } .area-card-metric { display: flex; flex-direction: column; } .area-card-metric-value { font-size: 1.15rem; font-weight: 700; color: var(--ac-text-primary); } .area-card-metric-label { font-size: 0.72rem; color: var(--ac-text-subtle); text-transform: uppercase; letter-spacing: 0.03em; } /* ── Tag pill checkboxes ── */ .tag-pill-group { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 2rem; border: 1.5px solid #d1d5db; background: #fff; color: #4b5563; font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease; user-select: none; } .tag-pill:hover { border-color: var(--ac-teal); background: rgba(29, 200, 139, 0.04); } .tag-pill input[type="checkbox"] { display: none; } .tag-pill:has(input:checked) { background: rgba(29, 200, 139, 0.1); border-color: var(--ac-teal); color: #065f46; font-weight: 600; } .tag-pill:has(input:checked)::before { content: "✓ "; font-size: 0.75em; } /* ── Enhanced empty states ── */ .empty-state { text-align: center; padding: 3rem 1.5rem; } .empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; } .empty-state-message { color: #9ca3af; font-size: 1.05rem; margin-bottom: 0.5rem; } .empty-state-hint { color: #b0b8c9; font-size: 0.85rem; } /* ── Section headers ── */ .section-header { margin-bottom: 1.25rem; } .section-header .title { margin-bottom: 0.25rem !important; } .section-header .section-description { color: #6b7280; font-size: 0.9rem; } /* ── KPI stat box (reports page) ── */ .kpi-box { position: relative; padding-top: 1.5rem; } .kpi-box .heading { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; } .kpi-box .title { margin-top: 0.35rem; margin-bottom: 0.25rem !important; } .kpi-box .kpi-detail { font-size: 0.8rem; color: #9ca3af; } /* ── Settings sections ── */ .settings-section .box { position: relative; padding-left: 1.5rem; } .settings-section .section-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgba(29, 200, 139, 0.1); color: var(--ac-teal); font-size: 1rem; margin-right: 0.5rem; vertical-align: middle; } /* ── Dashboard section divider ── */ .section-divider { border: none; border-top: 1px solid rgba(26, 39, 85, 0.08); margin: 2rem 0; } .section-divider-label { position: relative; text-align: center; margin: 2rem 0; } .section-divider-label::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid rgba(26, 39, 85, 0.08); } .section-divider-label span { position: relative; background: var(--ac-bg); padding: 0 1rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; } /* ── Responsive ── */ /* Navbar burger lines inherit text color */ .navbar.is-primary .navbar-burger span { background-color: rgba(255, 255, 255, 0.8); height: 2px; } /* Mobile overrides */ @media (max-width: 768px) { .modal-card { width: 95vw; margin: 0 auto; } .fixed-toast-area { top: auto; bottom: 1rem; right: 0.5rem; left: 0.5rem; } .stat-card .stat-value { font-size: 1.5rem; } h1.title { font-size: 1.5rem !important; } .impersonation-bar .container { flex-wrap: nowrap; gap: 0.35rem; font-size: 0.8rem; padding: 0 0.75rem; } .impersonation-bar .button { flex-shrink: 0; } /* ── Level: left-align on mobile ── */ .level { text-align: left; } .level .level-left, .level .level-right { justify-content: flex-start; } .level .level-right .buttons { justify-content: flex-start; } /* ── Action sheet modal (bottom sheet) ── */ .action-sheet .modal-content { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; max-height: 70vh; } .action-sheet .modal-content .box { border-radius: 1rem 1rem 0 0; padding: 1.25rem; } .action-sheet .action-item { display: block; width: 100%; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; color: var(--ac-navy); font-size: 1rem; text-align: left; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; } .action-sheet .action-item:last-of-type { border-bottom: none; } .action-sheet .action-item.is-danger { color: #d14d59; } /* ── Tabs: pill grid on mobile ── */ .tabs.is-toggle-mobile { border-bottom: none; overflow: visible; } .tabs.is-toggle-mobile ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; border-bottom: none; padding: 0; margin: 0; } .tabs.is-toggle-mobile li { margin: 0; min-width: 0; } .tabs.is-toggle-mobile li a { border: 1px solid #dbdbdb; border-radius: 0.5rem; justify-content: center; padding: 0.45rem 0.4rem; font-size: 0.8rem; color: #4a4a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabs.is-toggle-mobile li.is-active a { background-color: var(--ac-navy); border-color: var(--ac-navy); color: #fff; } /* ── Search icon fix (no FA) ── */ .control.has-icons-left .icon.is-left { font-size: 0.85rem; pointer-events: none; } /* ── Table → Card transformation on mobile ── */ .table-card-mobile { background: transparent; border: none; } .table-card-mobile thead { display: none; } .table-card-mobile tbody { display: block; } .table-card-mobile tbody tr { display: block; background: #fff; border-left: 3px solid var(--ac-teal); border-radius: 0 0.75rem 0.75rem 0; padding: 0.75rem 1rem; margin-bottom: 0.75rem; box-shadow: var(--ac-card-shadow); } .table-card-mobile tbody tr:hover { background: #fff; } .table-card-mobile td { display: block; border: none !important; padding: 0.25rem 0; } /* ── Inline labels from data-label attribute ── */ .table-card-mobile td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 0.05rem; } /* ── Card title: name/heading — no label, prominent ── */ .table-card-mobile td.is-card-title { font-weight: 600; font-size: 1.05rem; color: var(--ac-navy); padding-bottom: 0.4rem; margin-bottom: 0.15rem; border-bottom: 1px solid #f3f4f6; } .table-card-mobile td.is-card-title::before { display: none; } /* ── Secondary info: smaller, muted ── */ .table-card-mobile td.is-card-secondary { font-size: 0.85rem; color: #6b7280; } /* ── Actions row: separated, flex layout ── */ .table-card-mobile td.is-card-actions { padding-top: 0.5rem; margin-top: 0.35rem; border-top: 1px solid #f0f0f0; } .table-card-mobile td.is-card-actions::before { display: none; } /* Show hidden-mobile cells in card view */ .table-card-mobile td.is-hidden-mobile { display: block !important; } /* ── Campaign cards: wider bubbles + compact header ── */ .campaign-thread .notification { max-width: 92% !important; } .card-header-title.is-flex-wrap-wrap .tag { font-size: 0.65rem; } .card-header-title.is-flex-wrap-wrap > span.has-text-weight-bold { width: 100%; font-size: 0.9rem; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .stat-card, .section .box, .table, .section .buttons, .section .level .level-right, .tabs, .hero .box, .hero .title.is-2, .modal.is-active .modal-card, .modal.is-active .modal-background, .fixed-toast-area > .notification, .section > .container > .title:first-child, .section > .container > .level:first-child, #report-content { animation: none !important; } }