/** * Shared dashboard design system. * * Loaded once via _nav.php (which every dashboard page already `include`s), * so linking this stylesheet here is enough to make the tokens and * components below available everywhere without touching all 16 pages at * once. Nothing in here sets bare `body`/`html` rules — only opt-in classes * (prefixed `wa-`) plus the existing `.wa-saas-nav` block — so pages that * haven't been restyled yet (everything except dashboard.php, for now) * render exactly as before. Migrate a page by swapping its own hardcoded * colors/cards for these variables and classes. * * Palette: deep navy for "hero" stat cards + a teal accent (deliberately * not literal WhatsApp green — this is a dashboard brand, not a WhatsApp * clone). Manrope for headings/stat numbers only; body copy stays on * system-ui for speed and legibility. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --navy-950: #0b0c0e; --navy-800: #17191c; --teal-500: #12b76a; --teal-300: #54d89a; --teal-100: #e6f8ee; --bg: #fbfbfa; --card: #ffffff; --ink-900: #0b0c0e; --ink-600: #5c6066; --ink-400: #93979d; --line: #e9e9e7; --line-strong: #dcdcda; --positive: #12b76a; --positive-bg: #e6f8ee; --warning: #b7791f; --warning-bg: #fff7df; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow-card: none; --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* .wa-page carries the full-bleed background and stretches to at least the viewport height, so there's no white gap on wide screens or short pages. .wa-page-inner holds the actual content. Split into two elements deliberately — putting max-width directly on the background-carrying element (the original bug) means the background box itself is narrow and centered, leaving the real (still default white) exposed on either side and below. */ .wa-page { background: var(--bg); min-height: 100vh; width: 100%; box-sizing: border-box; } .wa-page-inner { font-family: var(--font-body); color: var(--ink-900); /* Matches public/admin/_theme.css's .wa-admin-shell max-width exactly (1440px), so both dashboards feel consistent in how wide content gets before it stops growing — full width up to that point, then centered with breathing room on either side beyond it, same as the admin side already does. Not literally unbounded (see the previous "full width" pass) — an actual 4K/ultrawide monitor would otherwise stretch text-heavy settings pages uncomfortably wide; 1440px reads as "full width" on any normal screen while capping the extreme case. */ max-width: 1160px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 28px 28px 48px; } .wa-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .wa-page-head h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.72rem; margin: 0 0 4px 0; letter-spacing: -0.03em; } .wa-page-head p { margin: 0; color: var(--ink-400); font-size: 0.9rem; } .wa-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .wa-col-3 { grid-column: span 3; } .wa-col-4 { grid-column: span 4; } .wa-col-6 { grid-column: span 6; } .wa-col-8 { grid-column: span 8; } .wa-col-12 { grid-column: span 12; } @media (max-width: 760px) { .wa-col-3, .wa-col-4, .wa-col-6, .wa-col-8 { grid-column: span 12; } } @media (min-width: 761px) and (max-width: 900px) { .wa-col-3 { grid-column: span 6; } } .wa-stack { display: flex; flex-direction: column; gap: 16px; } /* --- Cards --- */ .wa-card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 22px; } .wa-card--hero { background: var(--ink-900); color: #fff; border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--ink-900); box-shadow: var(--shadow-card); } .wa-card-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); font-weight: 500; margin: 0 0 10px 0; display: flex; justify-content: space-between; align-items: center; } .wa-card--hero .wa-card-label { color: rgba(255,255,255,0.65); } .wa-stat { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; } .wa-stat-sub { margin-top: 8px; font-size: 0.8rem; color: var(--ink-400); } .wa-card--hero .wa-stat-sub { color: rgba(255,255,255,0.7); } /* --- Badges / pills --- */ .wa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--teal-100); color: #0f766e; } .wa-badge--positive { background: var(--positive-bg); color: var(--positive); } .wa-badge--negative { background: #fee4e2; color: #b42318; } .wa-badge--warning { background: var(--warning-bg); color: var(--warning); } .wa-badge--navy { background: rgba(255,255,255,0.14); color: #fff; } /* --- Radial gauge (pure CSS conic-gradient — no chart library) --- */ .wa-gauge-wrap { display: flex; align-items: center; justify-content: center; padding: 8px 0 4px; } .wa-gauge { --pct: 0; width: 148px; height: 148px; border-radius: 50%; background: conic-gradient(var(--teal-500) calc(var(--pct) * 1%), var(--line) 0); display: flex; align-items: center; justify-content: center; } .wa-gauge-inner { width: 108px; height: 108px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .wa-gauge-inner .wa-gauge-value { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.2; } .wa-gauge-inner .wa-gauge-caption { font-size: 0.68rem; color: var(--ink-400); margin-top: 2px; max-width: 80px; } /* --- Horizontal comparison bars --- */ .wa-bar-row { margin-bottom: 14px; } .wa-bar-row:last-child { margin-bottom: 0; } .wa-bar-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-600); margin-bottom: 6px; } .wa-bar-track { background: var(--bg); border-radius: 999px; height: 10px; overflow: hidden; } .wa-bar-fill { height: 100%; border-radius: 999px; background: var(--teal-500); } /* --- Feed-style list rows --- */ .wa-feed-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .wa-feed-row:last-child { border-bottom: none; padding-bottom: 0; } .wa-feed-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--teal-100); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .wa-feed-main { flex: 1; min-width: 0; } .wa-feed-title { font-weight: 600; color: var(--ink-900); } .wa-feed-sub { color: var(--ink-400); font-size: 0.78rem; margin-top: 1px; } /* --- Vertical bar chart (dependency-free, same idea as the old inline analytics.php chart, just themed) --- */ .wa-vchart { display: flex; gap: 3px; height: 140px; align-items: flex-end; overflow-x: auto; margin-top: 10px; } .wa-vchart-bar-wrap { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1; min-width: 6px; height: 100%; } .wa-vchart-bar { width: 100%; background: var(--line-strong); border-radius: 4px 4px 0 0; flex-shrink: 0; } .wa-vchart-bar.is-peak { background: var(--teal-500); } .wa-vchart-label { font-size: 0.65rem; color: var(--ink-400); margin-top: 4px; white-space: nowrap; } /* --- Pill range-switcher (7d / 30d / 90d style links) --- */ .wa-pills { display: flex; gap: 6px; flex-wrap: wrap; } .wa-pill { padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ink-600); text-decoration: none; background: var(--card); border: 1px solid var(--line); } .wa-pill:hover { background: var(--bg); } .wa-pill.active { background: var(--navy-950); color: #fff; border-color: var(--navy-950); } /* --- Small tile stats (e.g. event-type counts) --- */ .wa-mini-stat { text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 4px; } .wa-mini-stat-number { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink-900); } .wa-mini-stat-label { font-size: 0.7rem; color: var(--ink-400); margin-top: 2px; } /* --- Tables --- */ .wa-table { width: 100%; border-collapse: collapse; margin-top: 12px; } .wa-table th, .wa-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.85rem; vertical-align: top; } .wa-table th { color: var(--ink-400); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .wa-table tr:last-child td { border-bottom: none; } /* --- Form fields --- */ .wa-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-600); margin-top: 18px; margin-bottom: 6px; } .wa-input, .wa-textarea, .wa-select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; box-sizing: border-box; background: var(--card); color: var(--ink-900); } .wa-input:focus, .wa-textarea:focus, .wa-select:focus { outline: 2px solid var(--teal-300); outline-offset: 1px; border-color: var(--teal-500); } .wa-textarea { min-height: 100px; resize: vertical; font-family: inherit; } .wa-hint { color: var(--ink-400); font-size: 0.8rem; margin-top: 6px; } .wa-hint--warning { color: var(--warning); } .wa-error-text { color: #b42318; font-size: 0.85rem; margin-top: 12px; } .wa-success-text { color: var(--positive); font-size: 0.85rem; margin-top: 12px; } .wa-checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 18px; } .wa-checkbox-row label { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--ink-900); } .wa-day-checks { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .wa-day-check { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; background: var(--bg); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; color: var(--ink-600); } .wa-danger-link { background: none; border: none; color: #b42318; cursor: pointer; font-size: 0.8rem; padding: 0; text-decoration: underline; font-family: inherit; } /* Icon-only variant of the same "destructive action" button — no underline (looks wrong under an emoji glyph), a real touch target with padding + rounded hover background instead of relying on underlined text for affordance. Always pair with title + aria-label in the markup since there's no visible text label to fall back on. */ .wa-icon-btn-danger { background: none; border: none; color: #b42318; cursor: pointer; font-size: 1rem; line-height: 1; padding: 7px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .wa-icon-btn-danger:hover { background: #fee4e2; } /* --- Two-pane chat shell (conversations.php) --- */ .wa-chat-shell { display: flex; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; /* Was `height: min(72vh, 700px)` — hard-capped at 700px, so on any viewport taller than ~970px the shell stopped growing and left a block of empty page background below it. This stretches the shell to fill whatever vertical space is actually left after the nav and page header above it, instead of an arbitrary fixed cap. The 230px offset is everything above the shell: .wa-page-inner's top padding (28px) + .wa-saas-nav's height and margin (~64px) + .wa-page-head's own content and margin (~80px) + .wa-page-inner's bottom padding (60px) — approximate, not pixel-exact, but close enough that this reads as "fills the page" rather than stopping short. min-height is the floor for short viewports (landscape phones, small windows). */ height: calc(100vh - 230px); min-height: 460px; } .wa-chat-sidebar { width: 320px; flex-shrink: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; } .wa-chat-sidebar-head { padding: 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .wa-chat-tag-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .wa-chat-tag-filters a { font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--ink-600); text-decoration: none; } .wa-chat-tag-filters a.active { background: var(--navy-950); color: #fff; } .wa-chat-list { flex: 1; overflow-y: auto; } .wa-chat-list-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); } .wa-chat-list-item:hover { background: var(--bg); } .wa-chat-list-item.active { background: var(--teal-100); } .wa-chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; font-family: var(--font-display); flex-shrink: 0; position: relative; } .wa-alert-dot { position: absolute; top: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: #dc2626; border: 2px solid var(--card); } .wa-chat-list-main { flex: 1; min-width: 0; } .wa-chat-list-top { display: flex; justify-content: space-between; gap: 8px; } .wa-chat-list-name { font-weight: 600; font-size: 0.85rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat-list-time { font-size: 0.68rem; color: var(--ink-400); flex-shrink: 0; white-space: nowrap; } .wa-chat-list-preview { font-size: 0.78rem; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .wa-chat-list-tags { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; } .wa-chat-list-tags .wa-badge { padding: 1px 8px; font-size: 0.65rem; } .wa-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .wa-chat-header { padding: 12px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; } .wa-chat-back { display: none; color: var(--ink-600); text-decoration: none; font-size: 0.85rem; font-weight: 600; margin-right: 8px; } .wa-chat-summary { background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 20px; font-size: 0.8rem; color: var(--ink-600); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-shrink: 0; } .wa-chat-summary-toggle { flex: 1; min-width: 0; } .wa-chat-summary-toggle summary { cursor: pointer; font-weight: 600; color: var(--ink-600); font-size: 0.8rem; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat-summary-toggle summary::-webkit-details-marker { display: none; } .wa-chat-summary-toggle summary::after { content: ' \25BE'; font-size: 0.7em; color: var(--ink-400); } .wa-chat-summary-toggle[open] summary { white-space: normal; } .wa-chat-summary-full { margin-top: 6px; max-height: 160px; overflow-y: auto; font-size: 0.8rem; color: var(--ink-600); line-height: 1.5; padding-right: 4px; } .wa-chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px; background: var(--bg); display: flex; flex-direction: column; gap: 3px; } .wa-bubble-row { display: flex; width: 100%; } .wa-bubble-row.out { justify-content: flex-end; } .wa-bubble-wrap { display: flex; flex-direction: column; max-width: 68%; min-width: 0; /* flex items default to min-width:auto, which floors shrinking at the content's intrinsic size (an image's full native width) and ignores max-width entirely — this override is what actually lets the wrap shrink an oversized image back down to fit */ } .wa-bubble-row.out .wa-bubble-wrap { margin-left: auto; align-items: flex-end; } .wa-bubble-row.in .wa-bubble-wrap { margin-right: auto; align-items: flex-start; } /* The 300px cap now lives as an inline style directly on .wa-bubble itself (see waRenderBubble() in _chat-helpers.php) — a hard, definite constraint the browser doesn't need to resolve through flexbox's cross-axis fit-content math for a replaced element, which is what made this fragile before. With the bubble's own width now definite, this can go back to a plain block image: width:100% simply fills whatever the (now-capped) bubble actually is, no ambiguity left. */ .wa-bubble-image { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 6px; cursor: pointer; } .wa-bubble { padding: 9px 13px; border-radius: 14px; font-size: 0.88rem; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 2px rgba(16, 22, 43, 0.06); margin: 3px 0; } .wa-bubble.in { background: #fff; color: var(--ink-900); border-bottom-left-radius: 4px; } .wa-bubble.out { background: var(--ink-900); color: #fff; border-bottom-right-radius: 4px; } .wa-bubble-meta { font-size: 0.63rem; color: var(--ink-400); margin-top: 2px; } .wa-bubble-row.out .wa-bubble-meta { text-align: right; } /* Small "who/what sent this" label above every outgoing bubble — see waRenderBubble()'s doc comment in _chat-helpers.php (migration 030). Only ever rendered on the 'out' side, so a single right-aligned rule is enough (the .in side never gets a sender label). */ .wa-bubble-sender { font-size: 0.68rem; font-weight: 600; color: var(--ink-400); text-align: right; margin: 0 0 2px; } .wa-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-400); flex-direction: column; gap: 8px; text-align: center; padding: 20px; } .wa-chat-composer { border-top: 1px solid var(--line); padding: 12px 16px; flex-shrink: 0; } .wa-chat-composer textarea.wa-textarea { min-height: 44px; max-height: 120px; } .wa-chat-pagination { display: flex; justify-content: center; gap: 10px; padding: 6px 0 2px; font-size: 0.75rem; flex-shrink: 0; } .wa-chat-pagination a, .wa-chat-pagination span { padding: 4px 10px; border-radius: 8px; color: var(--ink-600); text-decoration: none; } .wa-chat-pagination a:hover { background: var(--bg); } .wa-chat-pagination .disabled { color: var(--ink-400); } @media (max-width: 760px) { /* Was `height: min(78vh, 640px)` — same fixed-cap problem as the desktop rule, just with mobile-appropriate numbers. Switched to the same fill-remaining-space approach. The 210px offset here is smaller than desktop's 230px because _nav.php's mobile topbar is fixed-position (not in normal flow) — the only space it actually consumes is the 72px .wa-page-inner padding-top that compensates for it (set in _nav.php's own mobile media query), plus .wa-page-head's content/margin (~80px) and .wa-page-inner's bottom padding (60px). min-height is a floor for short/landscape phones where 100vh is small to begin with. */ .wa-chat-shell { height: calc(100vh - 210px); min-height: 420px; } .wa-chat-sidebar { width: 100%; } .wa-chat-shell.has-selection .wa-chat-sidebar { display: none; } .wa-chat-shell:not(.has-selection) .wa-chat-main { display: none; } .wa-chat-back { display: inline-block; } } /* --- Auth-page shell (login/signup/forgot-password/etc — no _nav.php, no logged-in tenant yet, so a centered card instead of the dashboard layout) --- */ .wa-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .wa-auth-card { width: 100%; max-width: 420px; } .wa-auth-logo { display: flex; justify-content: center; margin-bottom: 22px; } .wa-auth-logo img { height: 36px; width: auto; display: block; } .wa-auth-card h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 0 0 6px 0; letter-spacing: -0.01em; } .wa-auth-card > p.wa-hint:first-of-type { margin-top: 0; } .wa-auth-footer { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--ink-600); } .wa-auth-footer a { color: var(--navy-950); font-weight: 600; text-decoration: none; } .wa-auth-footer a:hover { text-decoration: underline; } /* --- Dashboard footer (actor name left, copyright right) --- */ .wa-saas-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-400); } @media (max-width: 600px) { .wa-saas-footer { flex-direction: column; align-items: flex-start; gap: 4px; } } /* --- Buttons --- */ .wa-btn { display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--navy-950); color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer; } .wa-btn--ghost { background: var(--card); color: var(--ink-900); border: 1px solid var(--line); } .wa-btn--danger { background: #dc2626; color: #fff; } /* --- Nav restyle: mirrors the landing page header --- */ .wa-saas-nav { background: transparent; border-radius: 0; box-shadow: none; padding: 10px 0 16px; margin-bottom: 28px !important; border-bottom: 1px solid var(--line); font-family: var(--font-body); flex-wrap: nowrap !important; } .wa-saas-brand { padding: 0 22px 0 0 !important; margin-right: auto !important; border-right: 0 !important; } .wa-saas-brand img { width: auto !important; height: 44px !important; max-width: 128px; } .wa-saas-nav a, .wa-saas-nav summary { color: var(--ink-600) !important; border-radius: 8px !important; font-size: 0.84rem; font-weight: 500; padding: 8px 10px !important; white-space: nowrap; } .wa-saas-nav a:hover, .wa-saas-nav summary:hover { background: transparent !important; color: var(--ink-900) !important; } .wa-saas-nav a.active, .wa-saas-nav summary.active { background: var(--ink-900) !important; color: #fff !important; } .wa-saas-dropdown-menu { background: var(--card) !important; border-radius: var(--radius-md) !important; box-shadow: 0 16px 38px -24px rgba(11,12,14,.28) !important; border: 1px solid var(--line) !important; } .wa-saas-dropdown-menu a { border-radius: 0 !important; } /* Landing-page-like eyebrow, useful on dashboard page heads. */ .wa-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); } .wa-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); flex-shrink: 0; } /* Mobile dashboard header follows the same quiet, bordered landing header. */ @media (max-width: 960px) { .wa-mobile-topbar { height: 58px !important; background: rgba(251,251,250,.94) !important; backdrop-filter: blur(12px); box-shadow: none !important; border-bottom: 1px solid var(--line); padding: 0 20px !important; } .wa-mobile-topbar-logo { width: auto !important; height: 40px !important; max-width: 118px; } .wa-mobile-menu-btn { color: var(--ink-900) !important; } .wa-mobile-nav-overlay { background: rgba(11,12,14,.42) !important; } .wa-mobile-nav-panel { background: var(--bg) !important; box-shadow: -18px 0 44px -28px rgba(11,12,14,.4) !important; padding: 22px 18px !important; } .wa-mobile-nav-panel a { border-radius: 8px !important; color: var(--ink-900) !important; font-weight: 500 !important; } .wa-mobile-nav-panel a:hover { background: var(--card) !important; } .wa-mobile-nav-panel a.active { background: var(--ink-900) !important; color:#fff !important; } .wa-page-inner { padding-left: 20px; padding-right: 20px; } } @media (max-width: 600px) { .wa-page-inner { padding-left: 18px; padding-right: 18px; padding-bottom: 34px; } .wa-page-head { margin-bottom: 20px; } .wa-page-head h1 { font-size: 1.5rem; } .wa-card { padding: 18px; } }