/* Anova Mail — light and dark theme. Brands differentiate by accent colour only; layout never changes per brand. Theming rule: every colour comes from a variable. The dark palette only ever redefines those variables, so a new component styled with them works in both themes without a second rule. Follow the light/dark var pairs below when adding anything. */ :root { color-scheme: light; /* --accent-brand is set per brand in the page . --accent is what you use; in dark mode it is lightened, because brand colours picked for white backgrounds (e.g. Anova's #2D3748) vanish against a dark one. */ --accent-brand: #2B6CB0; --accent: var(--accent-brand); --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --on-accent: #ffffff; --bg: #f7f8fa; --panel: #ffffff; --panel-2: #fcfcfd; --border: #e3e7ed; --row-border: #f0f2f5; --hover: #f0f2f5; --input-bg: #ffffff; --code-bg: #f7f8fa; --text: #1a202c; --text-soft: #4a5568; --muted: #6b7684; --ok: #2f855a; --ok-bg: #e8f5ee; --ok-bd: #cfe9da; --warn: #b7791f; --warn-bg: #fdf6e3; --warn-bd: #f2e3bd; --err: #c53030; --err-bg: #fdecec; --err-bd: #f7d4d4; --info: #2c5282; --info-bg: #eef4fb; --info-bd: #d6e4f5; --neutral-bg: #f0f2f5; --neutral-bd: #e3e7ed; --radius: 10px; } /* Dark palette. Applied when the OS asks for it, unless the in-app toggle has explicitly pinned light (data-theme wins over the media query in both directions — that is the whole point of having both). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: color-mix(in srgb, var(--accent-brand) 55%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --on-accent: #10131a; --bg: #14161a; --panel: #1c1f26; --panel-2: #21242c; --border: #2c313b; --row-border: #262a33; --hover: #252932; --input-bg: #14161a; --code-bg: #14161a; --text: #e6e8ec; --text-soft: #c2c7d0; --muted: #98a1b0; --ok: #6ee7a8; --ok-bg: #16281f; --ok-bd: #22452f; --warn: #f0c674; --warn-bg: #2a2312; --warn-bd: #4a3b17; --err: #f2a0a0; --err-bg: #2c1719; --err-bd: #4d2529; --info: #8ab4f8; --info-bg: #16202e; --info-bd: #24354d; --neutral-bg: #23262e; --neutral-bd: #2c313b; } } :root[data-theme="dark"] { color-scheme: dark; --accent: color-mix(in srgb, var(--accent-brand) 55%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --on-accent: #10131a; --bg: #14161a; --panel: #1c1f26; --panel-2: #21242c; --border: #2c313b; --row-border: #262a33; --hover: #252932; --input-bg: #14161a; --code-bg: #14161a; --text: #e6e8ec; --text-soft: #c2c7d0; --muted: #98a1b0; --ok: #6ee7a8; --ok-bg: #16281f; --ok-bd: #22452f; --warn: #f0c674; --warn-bg: #2a2312; --warn-bd: #4a3b17; --err: #f2a0a0; --err-bg: #2c1719; --err-bd: #4d2529; --info: #8ab4f8; --info-bg: #16202e; --info-bd: #24354d; --neutral-bg: #23262e; --neutral-bd: #2c313b; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --- shell ------------------------------------------------------------ */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: 0 0 232px; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brandmark { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding: 2px 8px 14px 8px; color: var(--text); } a.brandmark:hover { text-decoration: none; color: var(--accent); } .brandmark .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: 0 0 10px; } .switcher { padding: 0 8px 14px 8px; } .switcher label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .switcher select { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--input-bg); font-size: 14px; color: var(--text); } nav.side a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--text); font-size: 14px; margin-bottom: 1px; } nav.side a:hover { background: var(--hover); text-decoration: none; } nav.side a.active { background: var(--accent); color: var(--on-accent); font-weight: 600; } nav.side .group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 16px 10px 6px; } .main { flex: 1; min-width: 0; padding: 24px 30px 60px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; font-weight: 700; } h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -0.01em; font-weight: 700; } .sub { color: var(--muted); font-size: 13px; margin-top: 3px; } /* --- panels ----------------------------------------------------------- */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } .card.tight { padding: 14px 16px; } .grid { display: grid; gap: 14px; } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .stat .k { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .stat .v { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; } .stat .v small { font-size: 15px; font-weight: 600; color: var(--muted); } /* --- tables ----------------------------------------------------------- */ .tablewrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 9px 10px; border-bottom: 1px solid var(--row-border); vertical-align: top; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .empty { color: var(--muted); padding: 22px 10px; text-align: center; font-size: 14px; } /* --- badges ----------------------------------------------------------- */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .badge.subscribed, .badge.sent, .badge.delivered, .badge.opened, .badge.clicked { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); } .badge.pending, .badge.scheduled, .badge.queued { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); } .badge.unsubscribed, .badge.draft, .badge.suppressed { background: var(--neutral-bg); color: var(--muted); border-color: var(--neutral-bd); } .badge.bounced, .badge.complained, .badge.failed { background: var(--err-bg); color: var(--err); border-color: var(--err-bd); } /* --- forms ------------------------------------------------------------ */ label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=datetime-local], input[type=number], input[type=search], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; background: var(--input-bg); color: var(--text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } input[type=color] { padding: 2px; height: 36px; } textarea { resize: vertical; } .field { margin-bottom: 14px; } .field .help, .helptext { font-size: 12.5px; color: var(--muted); margin-top: 4px; } .checks label { font-weight: 400; font-size: 14px; } .checks ul { list-style: none; padding: 0; margin: 0; } .checks li { margin-bottom: 4px; } .row { display: flex; gap: 14px; flex-wrap: wrap; } .row > * { flex: 1 1 220px; } .errorlist { color: var(--err); font-size: 13px; margin: 4px 0 0; padding-left: 16px; } .btn { display: inline-block; padding: 8px 16px; border-radius: 7px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn:hover { filter: brightness(.94); text-decoration: none; } .btn.ghost { background: var(--panel); color: var(--text); border-color: var(--border); } .btn.ghost:hover { background: var(--hover); filter: none; } .btn.danger { background: var(--panel); color: var(--err); border-color: var(--err-bd); } .btn.sm { padding: 5px 11px; font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* --- notices ---------------------------------------------------------- */ .notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; border: 1px solid; } .notice.success { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); } .notice.error { background: var(--err-bg); border-color: var(--err-bd); color: var(--err); } .notice.warning { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); } .notice.info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); } .drybar { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 16px; } /* --- composer --------------------------------------------------------- */ .composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 18px; align-items: start; } @media (max-width: 1180px) { .composer { grid-template-columns: 1fr; } } .preview-pane { position: sticky; top: 20px; } .preview-frame { width: 100%; height: 760px; border: 1px solid var(--border); border-radius: var(--radius); /* Emails render light in every client, so the preview stays light in dark mode too — showing it dark would be a lie about what recipients see. */ background: #ffffff; } .blockcard { border: 1px solid var(--border); border-radius: 9px; padding: 14px; margin-bottom: 12px; background: var(--panel-2); } .blockcard .bhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .blockcard .bhead strong { font-size: 13px; } .layoutpick { display: flex; gap: 8px; flex-wrap: wrap; } .layoutpick label { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; font-weight: 600; font-size: 13.5px; text-align: center; background: var(--panel); margin: 0; } .layoutpick input { display: none; } .layoutpick label.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* --- contact picker (individual email) -------------------------------- */ .picker { max-height: 460px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; } .picker button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--row-border); padding: 9px 12px; cursor: pointer; font: inherit; color: var(--text); } .picker button:last-child { border-bottom: 0; } .picker button:hover { background: var(--hover); } .picker button.on { background: var(--accent-soft); } .picker .nm { font-weight: 600; font-size: 13.5px; } .picker .em { color: var(--muted); font-size: 12.5px; } .picker .none { padding: 18px 12px; color: var(--muted); font-size: 13.5px; text-align: center; } /* --- chart ------------------------------------------------------------ */ .chart { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-top: 10px; } .chart .bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; } .chart .bar:hover { opacity: 1; } .chartx { display: flex; gap: 5px; margin-top: 6px; } .chartx span { flex: 1; font-size: 10px; color: var(--muted); text-align: center; overflow: hidden; white-space: nowrap; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; color: var(--text); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } /* --- theme toggle ----------------------------------------------------- */ .themetoggle { display: flex; gap: 4px; margin-top: 10px; border: 1px solid var(--border); border-radius: 7px; padding: 3px; } .themetoggle button { flex: 1; background: none; border: 0; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 5px 4px; } .themetoggle button:hover { background: var(--hover); color: var(--text); } .themetoggle button.on { background: var(--accent); color: var(--on-accent); } /* --- public pages ----------------------------------------------------- */ .public { max-width: 480px; margin: 8vh auto; padding: 0 18px; } .public .card { padding: 30px 32px; } .public h1 { font-size: 21px; margin-bottom: 8px; } .public p { color: var(--text-soft); font-size: 14.5px; } .public .logo { max-height: 40px; max-width: 200px; margin-bottom: 18px; display: block; }