/* =====================================================================
ReachOS design system — dark glassmorphism edition.
Layers, in order: tokens -> base -> glass utilities -> components.
===================================================================== */
/* ---------- Fonts ----------------------------------------------------- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/static/fonts/Inter-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/static/fonts/BarlowCondensed-Light.woff2") format("woff2");
}
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/static/fonts/BarlowCondensed-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/static/fonts/BarlowCondensed-Black.woff2") format("woff2");
}
/* ---------- Tokens ---------------------------------------------------- */
:root {
/* Canvas — Ink Black */
--color-bg: #0d1016;
--color-bg-raised: #131820;
/* Glass surfaces */
--color-surface: rgba(234, 224, 204, 0.05);
--color-surface-muted: rgba(234, 224, 204, 0.028);
--color-surface-hover: rgba(234, 224, 204, 0.08);
/* Borders — warm-tinted hairlines */
--color-border: rgba(234, 224, 204, 0.10);
--color-border-strong: rgba(234, 224, 204, 0.20);
/* Foreground — Sand Dune
Muted/subtle alphas raised on 2026-05-23 for WCAG AA on #0d1016.
fg-muted ~5.2:1 (passes AA for body); fg-subtle ~4.1:1 (decoration only). */
--color-fg: #eae0cc;
--color-fg-muted: rgba(234, 224, 204, 0.70);
--color-fg-subtle: rgba(234, 224, 204, 0.50);
/* Pure white — for text on accent fills and hard-light highlights. */
--color-white: #ffffff;
/* Accent — Ochre */
--color-accent: #d97819;
--color-accent-hover: #c26a12;
/* Lighter ochre used as the auth-button hover background. */
--color-accent-hover-dark: #e5831e;
--color-accent-fg: #ffffff;
--color-accent-soft: rgba(217, 120, 25, 0.15);
--color-accent-soft-fg: #f5a94a;
/* Sand Dune tint — secondary warm accent */
--color-sand: #eae0cc;
--color-sand-soft: rgba(234, 224, 204, 0.12);
--color-sand-fg: #eae0cc;
/* Semantic */
--color-danger: #f87171;
--color-danger-soft: rgba(248, 113, 113, 0.12);
/* Lighter pink — accessible body/icon colour inside danger alerts on dark. */
--color-danger-light: #fca5a5;
--color-warning: #fbbf24;
--color-warning-soft: rgba(251, 191, 36, 0.12);
--color-success: #34d399;
--color-success-soft: rgba(52, 211, 153, 0.12);
--color-info: #60a5fa;
--color-info-soft: rgba(96, 165, 250, 0.12);
/* Dark veils — used to tint the auth-page photo background and glass cards. */
--color-dark-overlay: rgba(13, 16, 22, 0.78);
--color-glass-card: rgba(13, 16, 22, 0.55);
/* Radius */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 22px;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
--shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.60);
--shadow-glow-accent: 0 0 28px rgba(217, 120, 25, 0.32);
--shadow-glow-sand: 0 0 28px rgba(234, 224, 204, 0.14);
/* Motion */
--motion-fast: 120ms;
--motion: 200ms;
--easing: cubic-bezier(0.2, 0.7, 0.2, 1);
/* Focus */
--focus-ring: 0 0 0 3px rgba(217, 120, 25, 0.38);
/* Form controls */
--control-height: 42px;
--control-padding-x: 16px;
--control-line-height: calc(var(--control-height) - 2px);
--control-caret-left-offset: 20px;
--control-caret-right-offset: 15px;
/* Glass system */
--glass-bg: rgba(234, 224, 204, 0.04);
--glass-bg-md: rgba(234, 224, 204, 0.07);
--glass-blur: blur(20px);
--glass-blur-sm: blur(12px);
--glass-border: 1px solid rgba(234, 224, 204, 0.10);
--glass-border-strong: 1px solid rgba(234, 224, 204, 0.18);
/* Breakpoints — documentation only (CSS custom properties don't expand inside @media).
Use these literal values when writing media queries. */
--bp-sm: 640px; /* mobile -> tablet */
--bp-md: 900px; /* tablet -> small desktop */
--bp-lg: 1200px; /* desktop / max container */
}
/* ---------- Reset / base --------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] { display: none !important; }
html {
background: var(--color-bg);
scrollbar-color: var(--color-accent) rgba(13, 16, 22, 0.92);
scrollbar-width: thin;
}
body {
margin: 0;
color: var(--color-fg);
background: var(--color-bg);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
font-feature-settings: "cv11", "ss01", "ss03";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
display: flex;
flex-direction: column;
}
a { color: inherit; text-decoration: none; }
* {
scrollbar-color: var(--color-accent) rgba(13, 16, 22, 0.92);
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: rgba(13, 16, 22, 0.92);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover));
border: 2px solid rgba(13, 16, 22, 0.92);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--color-accent-soft-fg);
}
*::-webkit-scrollbar-corner {
background: rgba(13, 16, 22, 0.92);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Public invitation page ----------------------------------- */
.invite-public {
min-height: 100vh;
background:
radial-gradient(circle at 18% 8%, rgba(234, 224, 204, 0.055), transparent 24%),
radial-gradient(circle at 86% 24%, rgba(217, 120, 25, 0.055), transparent 22%),
linear-gradient(135deg, #090d13 0%, #0d1016 46%, #111820 100%);
color: var(--color-fg);
}
.invite-public svg {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.invite-shell {
width: min(100% - 40px, 900px);
margin-inline: auto;
}
.invite-hero {
padding-block: 34px 22px;
}
.invite-section-title {
margin: 0;
color: var(--color-accent-soft-fg);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.invite-h1 {
margin: 0;
color: #fff7ea;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 5vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
}
.invite-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 22px;
color: rgba(234, 224, 204, 0.78);
font-size: 15px;
font-weight: 500;
}
.invite-meta__item {
display: inline-flex;
align-items: center;
min-width: 0;
gap: 12px;
}
.invite-meta__item--venue {
flex-basis: 100%;
}
.invite-meta__icon {
color: var(--color-accent-soft-fg);
font-size: 18px;
flex: 0 0 auto;
}
.invite-meta__divider {
width: 1px;
height: 22px;
background: var(--color-border-strong);
}
.invite-main {
padding-bottom: 36px;
}
.invite-card {
padding: 28px 32px 30px;
border: 1px solid rgba(234, 224, 204, 0.18);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(234, 224, 204, 0.048), rgba(234, 224, 204, 0.022)),
rgba(13, 16, 22, 0.82);
box-shadow: 0 18px 56px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.invite-card__intro {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border-strong);
}
.invite-card__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid rgba(245, 169, 74, 0.48);
border-radius: 50%;
color: var(--color-accent-soft-fg);
font-size: 24px;
}
.invite-card__title {
margin: 0;
color: #fff7ea;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 600;
line-height: 1.18;
letter-spacing: 0;
}
.invite-card__copy,
.invite-section-copy {
margin: 10px 0 0;
color: rgba(234, 224, 204, 0.72);
font-size: 16px;
line-height: 1.45;
}
.invite-form {
display: flex;
flex-direction: column;
}
.invite-form__section {
padding-block: 26px 24px;
border-bottom: 1px solid var(--color-border-strong);
}
.invite-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 20px;
margin-top: 18px;
}
.invite-field {
display: flex;
flex-direction: column;
min-width: 0;
gap: 10px;
}
.invite-field--half {
max-width: none;
}
.invite-field--guest {
width: min(100%, 320px);
margin-top: 26px;
}
.invite-field--full {
grid-column: 1 / -1;
}
.invite-field__label {
font-size: 14px;
font-weight: 600;
color: #fff7ea;
}
.invite-field__note {
margin-left: 8px;
color: rgba(245, 169, 74, 0.7);
font-size: 13px;
font-weight: 400;
}
.invite-section-title--split {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
}
.invite-section-title--split .invite-section-title__hint {
text-transform: none;
letter-spacing: 0.02em;
font-size: 13px;
font-weight: 500;
color: rgba(234, 224, 204, 0.62);
line-height: 1.4;
}
.invite-field--travel-notes {
margin-top: 14px;
}
.invite-public .invite-travel-notes {
width: 100%;
min-height: 112px;
margin: 0;
padding: 14px 16px;
border: 1px solid rgba(234, 224, 204, 0.22);
border-radius: 8px;
background-color: rgba(8, 12, 18, 0.5);
color: #fff7ea;
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
resize: vertical;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024);
}
.invite-public .invite-travel-notes::placeholder {
color: rgba(234, 224, 204, 0.34);
}
.invite-public .invite-travel-notes:focus {
border-color: rgba(245, 169, 74, 0.78);
box-shadow: 0 0 0 3px rgba(217, 120, 25, 0.2);
outline: none;
}
.invite-field__help {
margin: 0;
color: rgba(234, 224, 204, 0.66);
font-size: 13px;
line-height: 1.45;
}
.invite-public .invite-field .field__error.invite-field__error {
margin-top: 8px;
}
.invite-control {
position: relative;
}
.invite-public .invite-control input,
.invite-public .invite-control select {
min-height: 46px;
height: 46px;
border: 1px solid rgba(234, 224, 204, 0.22);
border-radius: 8px;
background-color: rgba(8, 12, 18, 0.5);
color: #fff7ea;
padding: 0 16px;
font-size: 15px;
font-weight: 500;
line-height: normal;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024);
}
.invite-public .invite-control select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 46px;
line-height: normal;
background-color: rgba(8, 12, 18, 0.5);
background-image: linear-gradient(45deg, transparent 50%, rgba(234, 224, 204, 0.78) 50%),
linear-gradient(135deg, rgba(234, 224, 204, 0.78) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.invite-public .invite-control input::placeholder,
.invite-public .invite-control select::placeholder {
color: rgba(234, 224, 204, 0.34);
}
.invite-public .invite-control input:focus,
.invite-public .invite-control select:focus {
border-color: rgba(245, 169, 74, 0.78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024), 0 0 0 3px rgba(217, 120, 25, 0.2);
outline: none;
}
.invite-public .invite-control select:focus,
.invite-public .invite-control select:focus-visible,
.invite-public .invite-control select:active {
background-color: rgba(8, 12, 18, 0.5);
color: #fff7ea;
}
.invite-public .invite-control input[readonly],
.invite-public .invite-control select:disabled {
color: rgba(234, 224, 204, 0.64);
background-color: rgba(234, 224, 204, 0.035);
}
.invite-rsvp {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.invite-rsvp__option {
position: relative;
display: grid;
grid-template-columns: 18px 40px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 78px;
padding: 14px;
border: 1px solid rgba(234, 224, 204, 0.22);
border-radius: 8px;
background: rgba(8, 12, 18, 0.42);
cursor: pointer;
transition: border-color var(--motion-fast) var(--easing),
background var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing);
}
.invite-rsvp__option:hover {
border-color: rgba(245, 169, 74, 0.58);
background: rgba(234, 224, 204, 0.045);
}
.invite-rsvp__option:has(input:checked) {
border-color: var(--color-accent-soft-fg);
background: rgba(217, 120, 25, 0.055);
box-shadow: 0 0 0 1px rgba(245, 169, 74, 0.20);
}
.invite-rsvp__option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.invite-rsvp__radio {
width: 18px;
height: 18px;
border: 2px solid rgba(234, 224, 204, 0.72);
border-radius: 50%;
}
.invite-rsvp__option:has(input:checked) .invite-rsvp__radio {
border: 4px solid var(--color-accent-soft-fg);
box-shadow: 0 0 0 2px rgba(234, 224, 204, 0.78) inset;
}
.invite-rsvp__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--color-accent-soft-fg);
background: rgba(234, 224, 204, 0.08);
font-size: 21px;
}
.invite-rsvp__option strong,
.invite-rsvp__option small {
display: block;
}
.invite-rsvp__option strong {
color: #fff7ea;
font-size: 14px;
line-height: 1.25;
}
.invite-rsvp__option small {
margin-top: 3px;
color: rgba(234, 224, 204, 0.72);
font-size: 12px;
line-height: 1.25;
}
.invite-rsvp__option:has(input:focus-visible) {
outline: 3px solid rgba(217, 120, 25, 0.38);
outline-offset: 3px;
}
.invite-guest-details {
margin-top: 24px;
}
.invite-guest-tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin-bottom: 14px;
}
.invite-guest-tab {
min-height: 36px;
padding: 0 26px 0 0;
border: 0;
border-right: 1px solid rgba(234, 224, 204, 0.24);
margin-right: 26px;
background: transparent;
color: rgba(234, 224, 204, 0.44);
font: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: color var(--motion-fast) var(--easing);
}
.invite-guest-tab:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
.invite-guest-tab[aria-selected="true"] {
color: var(--color-accent-soft-fg);
}
.invite-guest-tab:focus-visible {
outline: 3px solid rgba(217, 120, 25, 0.38);
outline-offset: 4px;
}
.invite-guest-grid {
margin-top: 0;
}
.invite-submit-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 24px;
}
.invite-privacy {
display: flex;
align-items: center;
max-width: 360px;
gap: 14px;
margin: 0;
color: rgba(234, 224, 204, 0.74);
font-size: 14px;
line-height: 1.45;
}
.invite-privacy span {
color: var(--color-accent-soft-fg);
font-size: 28px;
flex: 0 0 auto;
}
.invite-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 236px;
min-height: 46px;
gap: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: var(--color-accent-fg);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 28px rgba(217, 120, 25, 0.38);
transition: transform var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing),
filter var(--motion-fast) var(--easing);
}
.invite-cta:hover {
filter: brightness(1.05);
box-shadow: 0 14px 34px rgba(217, 120, 25, 0.48);
}
.invite-cta:active {
transform: translateY(1px);
}
.invite-cta:focus-visible {
outline: 3px solid rgba(217, 120, 25, 0.42);
outline-offset: 4px;
}
.invite-cta span {
font-size: 22px;
}
.invite-footer {
display: flex;
justify-content: center;
gap: 9px;
padding: 4px 16px 28px;
color: rgba(234, 224, 204, 0.34);
font-size: 16px;
}
.invite-footer span {
color: var(--color-accent-soft-fg);
}
@media (max-width: 900px) {
.invite-shell {
width: min(100% - 32px, 680px);
}
.invite-hero {
padding-block: 30px 20px;
}
.invite-meta {
font-size: 18px;
}
.invite-card {
padding: 26px 22px 24px;
}
.invite-card__intro,
.invite-field-grid,
.invite-guest-grid,
.invite-rsvp {
grid-template-columns: 1fr;
}
.invite-field--full {
grid-column: auto;
}
.invite-card__intro {
gap: 18px;
}
.invite-field--half {
max-width: none;
}
.invite-submit-row {
align-items: stretch;
flex-direction: column;
}
.invite-cta {
width: 100%;
min-width: 0;
}
}
@media (max-width: 640px) {
.invite-shell {
width: min(100% - 24px, 680px);
}
.invite-h1 {
font-size: 34px;
}
.invite-meta {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.invite-meta__divider {
display: none;
}
.invite-card {
padding: 22px 16px;
}
.invite-card__title {
font-size: 24px;
}
.invite-card__copy,
.invite-section-copy {
font-size: 15px;
}
.invite-public .invite-control input,
.invite-public .invite-control select {
min-height: 44px;
height: 44px;
padding: 0 16px;
font-size: 14px;
line-height: normal;
}
.invite-public .invite-control select {
padding-right: 44px;
}
.invite-rsvp__option {
grid-template-columns: 18px 40px minmax(0, 1fr);
min-height: 76px;
gap: 12px;
padding: 14px 12px;
}
.invite-rsvp__icon {
width: 40px;
height: 40px;
font-size: 21px;
}
}
/* ---------- Glass utility classes ------------------------------------ */
.glass {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: var(--radius-lg);
}
.glass-md {
background: var(--glass-bg-md);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border-strong);
border-radius: var(--radius-lg);
}
.glass-sm {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
border: var(--glass-border);
border-radius: var(--radius-md);
}
/* ---------- Type scale ----------------------------------------------- */
.t-display {
font-size: 28px;
line-height: 34px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-fg);
}
.t-h1 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-fg);
}
.t-h2 {
font-size: 15px;
line-height: 22px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-fg);
}
.t-body {
font-size: 14px;
line-height: 22px;
font-weight: 400;
color: var(--color-fg);
}
.t-caption {
margin: 0;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: var(--color-fg-muted);
}
.t-eyebrow {
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg-subtle);
}
.t-mono {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
}
.tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.muted { color: var(--color-fg-muted); }
.subtle { color: var(--color-fg-subtle); }
.danger { color: var(--color-danger); }
.success { color: var(--color-success); }
.warning { color: var(--color-warning); }
/* ---------- Skip link ------------------------------------------------ */
.skip-link {
position: absolute;
top: -40px;
left: 12px;
z-index: 200;
background: var(--color-accent);
color: #fff;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
transition: top var(--motion-fast) var(--easing);
}
.skip-link:focus {
top: 12px;
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
/* ---------- Layout helpers ------------------------------------------- */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: var(--space-5);
padding-right: var(--space-5);
position: relative;
z-index: 1;
}
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-5); }
/* ---------- App shell ------------------------------------------------ */
.app-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(12, 14, 20, 0.60);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
.app-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
height: 58px;
}
.brand {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
color: #fff;
font-weight: 700;
letter-spacing: -0.01em;
font-size: 15px;
}
.brand__sep {
color: rgba(255, 255, 255, 0.28);
font-weight: 400;
font-size: 14px;
}
.brand__org {
color: rgba(255, 255, 255, 0.55);
font-weight: 400;
font-size: 14px;
}
.app-nav {
display: flex;
align-items: stretch;
gap: 0;
height: 58px;
flex: 1;
margin-left: var(--space-6);
}
.app-nav a {
display: inline-flex;
align-items: center;
padding: 0 var(--space-4);
color: rgba(255, 255, 255, 0.55);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.01em;
border-bottom: 2px solid transparent;
transition: color var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing);
}
.app-nav a:hover {
color: rgba(255, 255, 255, 0.90);
}
.app-nav a[aria-current="page"] {
color: #fff;
border-bottom-color: var(--color-accent);
}
.user-menu {
position: relative;
}
.user-menu__trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 10px 6px 6px;
border-radius: var(--radius-sm);
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.80);
font-size: 13px;
cursor: pointer;
transition: background var(--motion-fast) var(--easing);
}
.user-menu__trigger:hover {
background: rgba(255, 255, 255, 0.07);
}
.user-menu__trigger:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent) 0%, #b86010 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.user-menu__panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 220px;
background: rgba(18, 22, 34, 0.90);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
color: var(--color-fg);
padding: var(--space-2);
z-index: 50;
}
.user-menu__panel header {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: var(--space-1);
}
.user-menu__item,
.user-menu__panel button[type="submit"] {
display: flex;
width: 100%;
text-align: left;
align-items: center;
gap: var(--space-2);
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--color-fg);
font: inherit;
font-size: 13.5px;
cursor: pointer;
transition: background var(--motion-fast) var(--easing);
}
.user-menu__item:hover,
.user-menu__panel button[type="submit"]:hover {
background: rgba(255, 255, 255, 0.07);
}
.nav-toggle {
display: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (max-width: 900px) {
.app-nav {
position: fixed;
top: 58px;
left: 0;
right: 0;
height: auto;
flex-direction: column;
gap: 0;
margin: 0;
background: rgba(12, 14, 20, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: var(--space-2) 0;
display: none;
z-index: 39;
}
.app-nav.open { display: flex; }
.app-nav a {
height: 48px;
padding: 0 var(--space-5);
border-bottom: 0;
border-left: 2px solid transparent;
}
.app-nav a[aria-current="page"] {
border-bottom: 0;
border-left-color: var(--color-accent);
background: rgba(18, 163, 116, 0.06);
}
.nav-toggle { display: inline-flex; }
}
.app-footer {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: var(--space-4) var(--space-5);
text-align: center;
color: var(--color-fg-subtle);
font-size: 12px;
position: relative;
z-index: 1;
}
/* ---------- Toast / flash messages ---------------------------------- */
.toast-region {
position: fixed;
top: 74px;
left: 50%;
transform: translateX(-50%);
z-index: 60;
width: min(560px, calc(100% - 32px));
display: flex;
flex-direction: column;
gap: var(--space-2);
pointer-events: none;
}
.toast {
pointer-events: auto;
background: rgba(20, 24, 38, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.10);
border-left: 3px solid var(--color-fg-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
padding: 12px 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
color: var(--color-fg);
font-size: 13.5px;
transition: opacity var(--motion) var(--easing),
transform var(--motion) var(--easing);
}
.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--info { border-left-color: var(--color-info); }
.toast__close {
background: transparent;
border: 0;
color: var(--color-fg-subtle);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 0 4px;
border-radius: var(--radius-xs);
transition: color var(--motion-fast) var(--easing);
}
.toast__close:hover { color: var(--color-fg); }
/* ---------- Page header (legacy, free-flow) -------------------------- */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
flex-wrap: wrap;
}
.page-header__titles { min-width: 0; }
.page-header__actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
/* ---------- Panel module header (unified title + toolbar) ------------ */
/*
Replaces a freestanding page-header + separate toolbar.
Drop both rows inside a .panel as the first child:
*/
.panel__mod-header {
border-bottom: 1px solid rgba(234, 224, 204, 0.07);
}
.panel__mod-header__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: 18px var(--space-5);
flex-wrap: wrap;
}
.panel__mod-title {
font-size: 20px;
font-weight: 700;
color: var(--color-fg);
letter-spacing: -0.02em;
display: flex;
align-items: center;
column-gap: 8px;
row-gap: 4px;
flex-wrap: wrap;
min-width: 0;
}
/* When the subtitle is a direct child of the title, push it to its own line */
.panel__mod-title > .panel__mod-subtitle {
flex-basis: 100%;
}
/* Push inline stats to the right of the heading row */
.panel__mod-title > .cmp-inline-stats {
margin-left: auto;
}
.panel__mod-count {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
background: rgba(217, 120, 25, 0.14);
border: 1px solid rgba(217, 120, 25, 0.28);
font-size: 11.5px;
font-weight: 600;
color: #d97819;
flex-shrink: 0;
}
.panel__mod-subtitle {
font-size: 12px;
font-weight: 400;
color: rgba(234, 224, 204, 0.38);
letter-spacing: 0;
}
.panel__mod-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
flex-wrap: wrap;
}
.panel__mod-toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-top: 1px solid rgba(234, 224, 204, 0.05);
background: rgba(234, 224, 204, 0.015);
flex-wrap: wrap;
}
.panel__mod-toolbar form {
display: flex;
gap: var(--space-2);
align-items: center;
flex: 1;
flex-wrap: wrap;
}
/* panel__header directly after panel__mod-header shares the border */
.panel__mod-header + .panel__header {
border-top: 0;
}
@media (max-width: 640px) {
.panel__mod-header__top { padding: 14px var(--space-4); }
.panel__mod-title { font-size: 17px; }
.panel__mod-subtitle { display: none; }
.panel__mod-toolbar { padding: var(--space-3) var(--space-4); }
}
/* ---------- Campaigns list page components -------------------------- */
/*
Wrapper that stacks .panel__mod-title and .panel__mod-subtitle
vertically, used in the campaigns header band.
*/
/*
Compact inline stat metrics — three numbers with labels,
separated by hairline dividers. Lives in the header band
between the title group and the actions.
*/
.cmp-inline-stats {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.cmp-inline-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 0 22px;
}
.cmp-inline-stat + .cmp-inline-stat {
border-left: 1px solid rgba(234, 224, 204, 0.10);
}
.cmp-inline-stat__value {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
color: var(--color-fg);
font-variant-numeric: tabular-nums;
}
.cmp-inline-stat__label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg-subtle);
white-space: nowrap;
}
/*
Toolbar search + filter controls — smaller than the default
42px form controls, suited for a compact header toolbar.
*/
.cmp-search-wrap {
position: relative;
flex: 1;
max-width: 260px;
min-width: 0;
}
.cmp-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--color-fg-subtle);
pointer-events: none;
display: block;
}
.cmp-search-input {
width: 100%;
height: 32px;
padding: 0 10px 0 32px;
font: inherit;
font-size: 13px;
line-height: 30px;
color: var(--color-fg-muted);
background: rgba(234, 224, 204, 0.04);
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-sm);
outline: none;
box-sizing: border-box;
transition: border-color var(--motion-fast) var(--easing),
background var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing);
}
.cmp-search-input::placeholder { color: var(--color-fg-subtle); }
.cmp-search-input:focus {
border-color: rgba(217, 120, 25, 0.55);
background: rgba(234, 224, 204, 0.06);
color: var(--color-fg);
}
/* Remove browser default clear button on search */
.cmp-search-input::-webkit-search-cancel-button { display: none; }
.cmp-filter-select {
height: 32px;
padding: 0 32px 0 10px;
font: inherit;
font-size: 13px;
line-height: 30px;
color: var(--color-fg-muted);
background-color: rgba(234, 224, 204, 0.04);
background-image: linear-gradient(45deg, transparent 50%, rgba(234, 224, 204, 0.35) 50%),
linear-gradient(135deg, rgba(234, 224, 204, 0.35) 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-sm);
appearance: none;
-webkit-appearance: none;
outline: none;
box-sizing: border-box;
cursor: pointer;
transition: border-color var(--motion-fast) var(--easing),
background-color var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing);
}
.cmp-filter-select:focus,
.cmp-filter-select:hover {
border-color: rgba(234, 224, 204, 0.20);
color: var(--color-fg);
}
.cmp-toolbar-filters {
display: flex;
gap: var(--space-2);
align-items: center;
flex-shrink: 0;
}
/* Campaigns list: fixed layout with content-aware widths; tight Pending; datetimes readable */
table.data.cmp-campaign-list {
table-layout: fixed;
width: 100%;
}
table.data.cmp-campaign-list col:nth-child(1) { width: 20%; } /* Name */
table.data.cmp-campaign-list col:nth-child(2) { width: 18%; } /* Event */
table.data.cmp-campaign-list col:nth-child(3) { width: 11%; } /* Owner */
table.data.cmp-campaign-list col:nth-child(4) { width: 10%; } /* Status */
table.data.cmp-campaign-list col:nth-child(5) { width: 5.5rem; } /* Pending (count + PENDING header) */
table.data.cmp-campaign-list col:nth-child(6) { width: 10.75rem; } /* Sent */
table.data.cmp-campaign-list col:nth-child(7) { width: 10.75rem; } /* Created */
table.data.cmp-campaign-list tbody tr:not(.empty-row) td {
height: 3.25rem;
box-sizing: border-box;
vertical-align: middle;
}
table.data.cmp-campaign-list thead th {
vertical-align: middle;
}
table.data.cmp-campaign-list th,
table.data.cmp-campaign-list td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
}
table.data.cmp-campaign-list tr.empty-row td {
max-width: none;
height: auto;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* Override global `td.tight { width: 1% }` under fixed layout */
table.data.cmp-campaign-list th.tight,
table.data.cmp-campaign-list td.tight {
width: auto;
}
table.data.cmp-campaign-list td a.row-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table.data.cmp-campaign-list td .badge {
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
table.data.cmp-campaign-list th.cmp-campaign-list__col--center,
table.data.cmp-campaign-list td.cmp-campaign-list__col--center {
text-align: center;
}
/* Responsive: toolbar controls */
@media (max-width: 640px) {
.cmp-search-wrap { max-width: 100%; }
.cmp-toolbar-filters { flex-wrap: wrap; }
}
/* ---------- Sticky page toolbar ------------------------------------- */
/*
Sits directly below the sticky app-header (58px tall).
Use inside {% block content %} as the very first element.
Structure:
*/
.page-toolbar {
position: sticky;
top: 58px; /* height of .app-header */
z-index: 30;
margin: 0 calc(-1 * var(--space-5)) var(--space-6); /* bleed to container edges */
padding: 0 var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
height: 52px;
background: rgba(13, 16, 22, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(234, 224, 204, 0.08);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.page-toolbar__title {
font-size: 15px;
font-weight: 600;
color: #eae0cc;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.page-toolbar__title .page-toolbar__count {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 1px 8px;
border-radius: 999px;
background: rgba(217, 120, 25, 0.14);
border: 1px solid rgba(217, 120, 25, 0.28);
font-size: 11.5px;
font-weight: 600;
color: #d97819;
vertical-align: middle;
position: relative;
top: -1px;
}
.page-toolbar__sub {
font-size: 12px;
color: rgba(234, 224, 204, 0.38);
font-weight: 400;
margin-left: 10px;
letter-spacing: 0;
}
.page-toolbar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* ---------- Panel surface ------------------------------------------- */
.panel {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
border: var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.panel + .panel { margin-top: var(--space-4); }
.panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.panel__header h2,
.panel__header .t-h2 { margin: 0; }
.panel__body { padding: var(--space-5); }
.panel__section { padding: var(--space-5); }
.panel__section + .panel__section { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.panel__footer {
padding: var(--space-3) var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
color: var(--color-fg-muted);
font-size: 13px;
}
.card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-sm);
-webkit-backdrop-filter: var(--glass-blur-sm);
border: var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
border: 0;
margin: 0;
}
/* ---------- KPI strip ------------------------------------------------ */
.kpi-strip {
display: grid;
grid-template-columns: repeat(var(--kpi-count, 5), 1fr);
}
.kpi {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.kpi + .kpi { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.kpi__label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg-subtle);
}
.kpi__value {
font-size: 22px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-fg);
font-variant-numeric: tabular-nums;
}
.kpi__value--accent { color: var(--color-accent); }
.kpi__value--danger { color: var(--color-danger); }
.kpi__value--warning { color: var(--color-warning); }
.kpi__delta {
font-size: 12px;
color: var(--color-fg-muted);
}
@media (max-width: 900px) {
.kpi-strip { grid-template-columns: repeat(2, 1fr); }
.kpi:nth-child(2n+1) { border-left: 0; }
.kpi { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.kpi:nth-child(-n+2) { border-top: 0; }
}
/* ---------- Funnel --------------------------------------------------- */
.funnel { display: flex; flex-direction: column; gap: var(--space-3); }
.funnel__row { display: grid; grid-template-columns: 96px 1fr 80px; align-items: center; gap: var(--space-3); }
.funnel__label { color: var(--color-fg-muted); font-size: 13px; }
.funnel__bar-track {
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xs);
height: 22px;
position: relative;
overflow: hidden;
}
.funnel__bar {
height: 100%;
background: var(--color-fg);
border-radius: var(--radius-xs);
transition: width var(--motion) var(--easing);
}
.funnel__row:nth-child(1) .funnel__bar { background: rgba(255, 255, 255, 0.25); }
.funnel__row:nth-child(2) .funnel__bar { background: rgba(255, 255, 255, 0.18); }
.funnel__row:nth-child(3) .funnel__bar { background: rgba(18, 163, 116, 0.50); }
.funnel__row:nth-child(4) .funnel__bar { background: var(--color-accent); }
.funnel__row:nth-child(5) .funnel__bar { background: var(--color-success); }
.funnel__count {
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--color-fg);
font-weight: 500;
font-size: 13.5px;
}
/* ---------- Stacked bar (RSVP) -------------------------------------- */
.bar-stack {
height: 10px;
width: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
display: flex;
}
.bar-stack__seg { height: 100%; transition: width var(--motion) var(--easing); }
.bar-stack__seg--success { background: var(--color-success); }
.bar-stack__seg--warning { background: var(--color-warning); }
.bar-stack__seg--danger { background: var(--color-danger); }
.bar-stack__seg--muted { background: rgba(255, 255, 255, 0.18); }
.legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-4);
}
.legend__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 13.5px; }
.legend__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-fg); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--success { background: var(--color-success); }
.dot--warning { background: var(--color-warning); }
.dot--danger { background: var(--color-danger); }
.dot--muted { background: rgba(255, 255, 255, 0.22); }
/* ---------- Attention list ------------------------------------------ */
.attention {
list-style: none;
margin: 0;
padding: 0;
}
.attention__row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
color: var(--color-fg);
transition: background var(--motion-fast) var(--easing);
}
.attention__row + .attention__row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.attention__row:hover { background: rgba(255, 255, 255, 0.04); }
.attention__icon {
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.06);
color: var(--color-fg-muted);
}
.attention__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.attention__icon--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.attention__icon--info { background: var(--color-info-soft); color: var(--color-info); }
.attention__label { font-weight: 500; font-size: 14px; }
.attention__sub { color: var(--color-fg-muted); font-size: 12.5px; }
.attention__count {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 16px;
}
.attention__chevron {
color: var(--color-fg-subtle);
width: 16px; height: 16px;
}
/* ---------- Buttons -------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font: inherit;
font-size: 13.5px;
font-weight: 500;
line-height: 1;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing),
transform 80ms ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
.btn-primary {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
box-shadow: 0 2px 12px rgba(217, 120, 25, 0.30);
}
.btn-primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
box-shadow: 0 4px 18px rgba(217, 120, 25, 0.44);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.06);
color: var(--color-fg);
border-color: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.20);
}
.btn-ghost {
background: transparent;
color: var(--color-fg-muted);
border-color: transparent;
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-fg);
}
.btn-accent {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.btn-accent:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.btn-danger {
background: rgba(248, 113, 113, 0.15);
color: var(--color-danger);
border-color: rgba(248, 113, 113, 0.30);
}
.btn-danger:hover {
background: rgba(248, 113, 113, 0.25);
border-color: rgba(248, 113, 113, 0.45);
}
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; }
/* ---------- Form controls ------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field + .field { margin-top: var(--space-4); }
.field__label {
font-size: 13px;
font-weight: 500;
color: var(--color-fg);
}
.field__required { color: var(--color-danger); margin-left: 2px; }
.field__help { font-size: 12.5px; color: var(--color-fg-muted); }
.field__error { font-size: 12.5px; color: var(--color-danger); }
.field__colour {
width: 100%;
height: 36px;
padding: 3px 4px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
display: block;
box-sizing: border-box;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="file"],
select,
textarea {
width: 100%;
min-height: var(--control-height);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-sm);
padding: 0 var(--control-padding-x);
font: inherit;
font-size: 14px;
line-height: var(--control-line-height);
color: var(--color-fg);
display: block;
box-sizing: border-box;
transition: border-color var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing),
background var(--motion-fast) var(--easing);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select:not([multiple]) {
height: var(--control-height);
}
textarea {
height: auto;
min-height: 96px;
padding: 12px var(--control-padding-x);
line-height: 1.5;
resize: vertical;
}
input[type="file"] {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, rgba(238, 240, 246, 0.4) 50%),
linear-gradient(135deg, rgba(238, 240, 246, 0.4) 50%, transparent 50%);
background-position: calc(100% - var(--control-caret-left-offset)) 50%,
calc(100% - var(--control-caret-right-offset)) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-left: var(--control-padding-x);
padding-right: 46px;
line-height: normal;
background-color: rgba(255, 255, 255, 0.05);
}
select[multiple] {
height: auto;
min-height: 160px;
padding: 10px var(--control-padding-x);
line-height: 1.45;
background-image: none;
}
select option {
background: #131820;
color: var(--color-fg);
}
select option:checked,
select option:hover {
background: rgba(217, 120, 25, 0.32);
color: #fff;
}
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body select:not([multiple]) {
height: var(--control-height);
min-height: var(--control-height);
padding-top: 0;
padding-bottom: 0;
}
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"] {
padding-left: var(--control-padding-x);
padding-right: var(--control-padding-x);
line-height: var(--control-line-height);
}
body select:not([multiple]) {
padding-left: var(--control-padding-x);
padding-right: 46px;
line-height: normal;
background-position: calc(100% - var(--control-caret-left-offset)) 50%,
calc(100% - var(--control-caret-right-offset)) 50%;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--color-accent);
background: rgba(255, 255, 255, 0.07);
box-shadow: var(--focus-ring);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
border-color: rgba(248, 113, 113, 0.50);
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.22);
}
input::placeholder, textarea::placeholder { color: var(--color-fg-subtle); }
input[type="checkbox"], input[type="radio"] {
accent-color: var(--color-accent);
width: 16px;
height: 16px;
}
.fieldset { display: flex; flex-direction: column; gap: var(--space-3); }
.fieldset__title {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg-subtle);
margin: 0 0 4px;
}
.field-grid {
display: grid;
gap: var(--space-3) var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.field-grid--2 { grid-template-columns: 1fr 1fr; }
.field-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
}
/* ---------- Tables --------------------------------------------------- */
table.data {
width: 100%;
border-collapse: collapse;
background: transparent;
}
table.data th,
table.data td {
text-align: left;
padding: 12px var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13.5px;
color: var(--color-fg);
vertical-align: middle;
}
table.data th {
background: transparent;
font-weight: 500;
color: var(--color-fg-subtle);
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: 11px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 14px;
padding-bottom: 10px;
}
table.data tbody tr {
transition: background var(--motion-fast) var(--easing);
}
table.data tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
tr[data-href] { cursor: pointer; }
tr[data-href]:focus-visible {
outline: none;
box-shadow: inset var(--focus-ring);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data th:first-child,
table.data td:first-child { padding-left: var(--space-5); }
table.data th:last-child,
table.data td:last-child { padding-right: var(--space-5); }
table.data td.num,
table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.tight { width: 1%; white-space: nowrap; }
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
flex-wrap: wrap;
}
.table-toolbar form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.empty-row td {
text-align: center;
color: var(--color-fg-muted);
padding: var(--space-7) var(--space-5) !important;
font-size: 13.5px;
}
/* ---------- Badges --------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
line-height: 1;
padding: 5px 10px;
border-radius: var(--radius-xs);
font-weight: 500;
background: rgba(255, 255, 255, 0.07);
color: var(--color-fg-muted);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.badge--info { background: var(--color-info-soft); color: var(--color-info); border-color: transparent; }
.badge--accent { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); border-color: transparent; }
/* legacy aliases */
.badge-emerald { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); border-color: transparent; }
.badge-amber { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.badge-rose { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.badge-sky { background: var(--color-info-soft); color: var(--color-info); border-color: transparent; }
.badge-slate { background: rgba(255,255,255,0.07); color: var(--color-fg-muted); border-color: transparent; }
/* ---------- Definition list ----------------------------------------- */
.dl {
display: grid;
grid-template-columns: 180px 1fr;
column-gap: var(--space-4);
row-gap: var(--space-2);
margin: 0;
font-size: 13.5px;
}
.dl dt { color: var(--color-fg-muted); font-weight: 400; }
.dl dd { margin: 0; color: var(--color-fg); }
/* ---------- Pagination ----------------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
color: var(--color-fg-muted);
font-size: 13px;
}
.pagination__nav { display: flex; gap: var(--space-2); }
/* ---------- Empty state ---------------------------------------------- */
.empty-state {
text-align: center;
padding: var(--space-7) var(--space-5);
color: var(--color-fg-muted);
}
.empty-state h3 {
margin: 0 0 6px;
font-size: 16px;
color: var(--color-fg);
font-weight: 600;
}
.empty-state p { margin: 0 0 var(--space-4); font-size: 13.5px; }
/* ---------- Misc ----------------------------------------------------- */
.link {
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
}
.link:hover { color: var(--color-accent-soft-fg); text-decoration: underline; }
.row-link { color: var(--color-fg); font-weight: 500; }
.row-link:hover { color: var(--color-accent); }
/* ---------- Email template builder ----------------------------------- */
.email-builder {
max-width: 1180px;
}
.email-builder__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
gap: var(--space-4);
align-items: start;
}
.email-builder__composer .panel__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.email-builder__composer .field + .field {
margin-top: 0;
}
.email-builder textarea[data-builder-body] {
min-height: 300px;
font-size: 14px;
line-height: 1.6;
}
.email-builder__copy-section {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.025);
}
.email-builder__copy-head {
padding-bottom: var(--space-3);
border-bottom: 1px solid rgba(234, 224, 204, 0.07);
}
.email-builder__copy-head h3 {
margin: 0;
}
.email-builder__safety {
display: grid;
grid-template-columns: 34px 1fr;
gap: var(--space-3);
align-items: start;
padding: 12px 14px;
border: 1px solid rgba(52, 211, 153, 0.20);
border-radius: var(--radius-sm);
background: rgba(52, 211, 153, 0.07);
}
.email-builder__safety-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
color: var(--color-success);
background: rgba(52, 211, 153, 0.12);
}
.email-builder__active {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.email-builder__side {
position: sticky;
top: 82px;
}
.email-builder__sidebar-header {
gap: var(--space-3);
align-items: flex-start;
}
.email-builder__sidebar-header-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
color: var(--color-accent-soft-fg);
margin-top: 1px;
}
.email-builder__token-grid {
display: grid;
gap: 6px;
}
.email-builder__token {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing),
transform 80ms ease;
}
.email-builder__token-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--radius-xs);
background: rgba(234, 224, 204, 0.06);
color: var(--color-fg-muted);
transition: color var(--motion-fast) var(--easing),
background var(--motion-fast) var(--easing);
}
.email-builder__token-content {
display: grid;
gap: 2px;
flex: 1;
min-width: 0;
}
.email-builder__token-label {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.email-builder__token-token {
font-size: 11px;
font-weight: 500;
color: var(--color-accent-soft-fg);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.email-builder__token small {
color: var(--color-fg-muted);
font-size: 11px;
line-height: 1.35;
}
.email-builder__token-insert {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-fg-subtle);
opacity: 0;
transition: opacity var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing);
}
.email-builder__token:hover {
background: rgba(217, 120, 25, 0.08);
border-color: rgba(217, 120, 25, 0.30);
}
.email-builder__token:hover .email-builder__token-icon {
background: rgba(217, 120, 25, 0.12);
color: var(--color-accent-soft-fg);
}
.email-builder__token:hover .email-builder__token-insert {
opacity: 1;
color: var(--color-accent-soft-fg);
}
.email-builder__token:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.email-builder__token:active {
transform: translateY(1px);
}
.email-builder__image-section {
position: relative;
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
transition: border-color var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing),
background var(--motion-fast) var(--easing);
}
.email-builder__image-section::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background: rgba(217, 120, 25, 0.16);
opacity: 0;
transition: opacity var(--motion-fast) var(--easing);
}
.email-builder__image-section.is-dragging-images {
border-color: var(--color-accent);
background: rgba(217, 120, 25, 0.06);
box-shadow: 0 0 0 2px rgba(217, 120, 25, 0.26), 0 14px 34px rgba(0, 0, 0, 0.28);
}
.email-builder__image-section.is-dragging-images::after {
opacity: 1;
}
.email-builder__image-section > * {
position: relative;
z-index: 2;
}
.email-builder__image-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.email-builder__image-section h3 {
margin: 0;
}
.email-builder__design-section {
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.025);
}
.email-builder__design-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid rgba(234, 224, 204, 0.07);
}
.email-builder__design-head h3 {
margin: 0;
}
.email-builder__design-groups {
display: grid;
gap: var(--space-2);
}
.email-builder__design-group {
display: grid;
grid-template-columns: 126px minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
padding: 13px 14px;
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-sm);
background: rgba(13, 16, 22, 0.34);
}
.email-builder__design-group-title {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
padding-top: 17px;
}
.email-builder__design-index {
color: var(--color-fg-muted);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.email-builder__design-group h4 {
margin: 0;
color: var(--color-fg);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
}
.email-builder__design-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: var(--space-3);
min-width: 0;
}
.email-builder__design-grid--compact {
grid-template-columns: repeat(2, minmax(150px, 1fr));
justify-content: start;
}
.email-builder__design-field {
display: grid;
gap: 6px;
min-width: 0;
}
.email-builder__design-field label {
color: var(--color-fg);
font-size: 12.5px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.email-builder__design-control {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
min-height: 36px;
padding: 4px 8px 4px 4px;
border: 1px solid rgba(234, 224, 204, 0.14);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.035);
}
.email-builder__design-control input[type="color"] {
width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border: 1px solid rgba(234, 224, 204, 0.16);
border-radius: var(--radius-xs);
background: transparent;
cursor: pointer;
}
.email-builder__design-control input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.email-builder__design-control input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--radius-xs) - 1px);
}
.email-builder__design-control input[type="color"]::-moz-color-swatch {
border: 0;
border-radius: calc(var(--radius-xs) - 1px);
}
.email-builder__design-control input[type="color"]:focus-visible,
.email-builder__design-field > input:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.email-builder__design-value {
min-width: 0;
overflow: hidden;
color: var(--color-fg-muted);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.email-builder__design-field > input {
height: 36px;
min-height: 36px;
border-color: rgba(234, 224, 204, 0.14);
background: rgba(255, 255, 255, 0.035);
font-size: 12.5px;
}
.email-builder__image-panel {
display: grid;
gap: var(--space-3);
}
.email-builder__image-upload {
display: grid;
gap: var(--space-2);
}
.email-builder__add-image {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 14px;
border: 1px dashed rgba(217, 120, 25, 0.42);
border-radius: var(--radius-sm);
background: rgba(217, 120, 25, 0.07);
color: var(--color-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing),
box-shadow var(--motion-fast) var(--easing);
}
.email-builder__add-image:hover,
.email-builder__add-image:focus-visible {
outline: none;
background: rgba(217, 120, 25, 0.12);
border-color: rgba(217, 120, 25, 0.72);
box-shadow: 0 0 0 2px rgba(217, 120, 25, 0.14);
}
.email-builder__add-image:disabled {
opacity: 0.65;
cursor: wait;
}
.email-builder__add-image-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(217, 120, 25, 0.16);
color: var(--color-accent-soft-fg);
}
.email-builder__add-image strong,
.email-builder__add-image small {
display: block;
}
.email-builder__add-image strong {
font-size: 13px;
font-weight: 700;
}
.email-builder__add-image small {
margin-top: 2px;
color: var(--color-fg-muted);
font-size: 12.5px;
line-height: 1.35;
}
.email-builder__asset-list {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: 2px 2px 6px;
}
.email-builder__asset {
position: relative;
min-width: 170px;
width: 170px;
}
.email-builder__asset-insert {
display: grid;
width: 100%;
padding: 8px;
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.035);
color: var(--color-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing);
}
.email-builder__asset-insert img {
width: 100%;
height: 92px;
object-fit: cover;
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.05);
}
.email-builder__asset-name {
display: block;
min-height: 24px;
margin-top: var(--space-2);
padding: 2px 4px;
border-radius: var(--radius-xs);
overflow: hidden;
color: var(--color-fg);
font-size: 12.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.email-builder__asset-name[contenteditable="true"] {
overflow: visible;
text-overflow: clip;
white-space: normal;
background: rgba(217, 120, 25, 0.14);
box-shadow: inset 0 0 0 1px rgba(217, 120, 25, 0.55);
outline: none;
}
.email-builder__asset-insert:hover {
background: rgba(217, 120, 25, 0.10);
border-color: rgba(217, 120, 25, 0.34);
}
.email-builder__asset-insert:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.email-builder__asset-edit {
position: absolute;
right: 12px;
bottom: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid rgba(234, 224, 204, 0.16);
border-radius: var(--radius-xs);
background: rgba(13, 16, 22, 0.82);
color: var(--color-accent-soft-fg);
cursor: pointer;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing);
}
.email-builder__asset-delete {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid rgba(234, 224, 204, 0.16);
border-radius: var(--radius-xs);
background: rgba(13, 16, 22, 0.82);
color: var(--color-danger);
cursor: pointer;
transition: background var(--motion-fast) var(--easing),
border-color var(--motion-fast) var(--easing),
color var(--motion-fast) var(--easing);
}
.email-builder__asset-edit:hover,
.email-builder__asset-edit:focus-visible {
outline: none;
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.email-builder__asset-delete:hover,
.email-builder__asset-delete:focus-visible {
outline: none;
background: var(--color-danger-soft);
border-color: rgba(248, 113, 113, 0.34);
color: var(--color-danger);
}
.email-builder__asset.is-renaming .email-builder__asset-insert {
border-color: rgba(217, 120, 25, 0.55);
box-shadow: 0 0 0 2px rgba(217, 120, 25, 0.18);
}
.email-preview {
display: grid;
gap: var(--space-3);
}
.email-preview__subject-row {
display: grid;
gap: 5px;
}
.email-preview__subject-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-fg-subtle);
}
.email-preview__subject {
min-height: 36px;
padding: 9px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(0, 0, 0, 0.18);
color: var(--color-fg);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.email-preview__card {
overflow: hidden;
border: 1px solid rgba(234, 224, 204, 0.12);
border-radius: var(--radius-md);
background: #0f141c;
box-shadow: var(--shadow-md);
}
.email-preview__header {
padding: 16px 18px 14px;
border-bottom: 1px solid rgba(234, 224, 204, 0.12);
}
.email-preview__eyebrow {
color: var(--color-accent-soft-fg);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.email-preview__card h3 {
margin: 5px 0 0;
color: var(--color-fg);
font-size: 17px;
line-height: 1.3;
}
.email-preview__content {
padding: 14px 18px 18px;
}
.email-preview__body {
color: rgba(234, 224, 204, 0.80);
font-size: 13px;
}
.email-preview__body p {
margin: 0 0 12px;
line-height: 1.65;
}
.email-preview__body p:last-child {
margin-bottom: 0;
}
.email-preview__cta-wrap {
text-align: center;
margin: 18px 0 !important;
}
.email-preview__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 18px;
border-radius: var(--radius-sm);
background: var(--color-accent);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 2px 8px rgba(217, 120, 25, 0.32);
}
.email-preview__image-wrap {
margin: 16px 0 !important;
text-align: center;
}
.email-preview__image-wrap img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 auto;
border-radius: var(--radius-sm);
}
.email-preview__image-wrap span {
display: block;
margin-top: 7px;
color: var(--color-fg-muted);
font-size: 12px;
}
.email-preview__footer-note {
margin: 16px 0 0;
font-size: 11px;
color: var(--color-fg-subtle, #8f98a8);
line-height: 1.5;
}
.email-builder__actions {
margin-top: var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-md);
}
@media (max-width: 900px) {
.email-builder__layout {
grid-template-columns: 1fr;
}
.email-builder__side {
position: static;
}
.email-builder__design-group {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.email-builder__design-group-title {
padding-top: 0;
}
.email-builder__design-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.email-builder__design-grid,
.email-builder__design-grid--compact {
grid-template-columns: 1fr;
}
}
/* ---------- Enterprise email builder (eb-*) -------------------------- */
/* Full-page layout */
.eb-layout {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* Header bar */
.eb-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
height: 52px;
padding: 0 var(--space-4);
background: rgba(12, 14, 20, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(234, 224, 204, 0.08);
flex-shrink: 0;
z-index: 20;
}
.eb-header-bar__left {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex: 1;
}
.eb-header-bar__back {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
color: var(--color-fg-muted);
background: var(--color-surface);
border: 1px solid var(--color-border);
flex-shrink: 0;
transition: color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}
.eb-header-bar__back:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.eb-header-bar__meta {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex: 1;
}
.eb-header-bar__name-field,
.eb-header-bar__subject-field {
height: 34px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg);
font: inherit;
font-size: 13.5px;
transition: border-color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
min-width: 0;
}
.eb-header-bar__name-field { font-weight: 600; max-width: 90px; flex: 0 0 auto; }
.eb-header-bar__subject-wrap {
display: flex;
align-items: center;
flex: 1;
max-width: 380px;
gap: 6px;
min-width: 0;
}
.eb-header-bar__subject-label {
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-fg-subtle);
white-space: nowrap;
flex-shrink: 0;
}
.eb-header-bar__subject-field { flex: 1; max-width: 340px; color: var(--color-fg-muted); font-size: 13px; }
.eb-header-bar__name-field:hover,
.eb-header-bar__subject-field:hover { background: var(--color-surface); border-color: var(--color-border); }
.eb-header-bar__name-field:focus,
.eb-header-bar__subject-field:focus { outline: none; background: var(--color-surface); border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.eb-header-bar__right {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
.eb-header-bar__errors {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--color-danger);
font-weight: 500;
}
.eb-header-bar__active-toggle {
display: none;
}
.eb-header-bar__active-toggle input { cursor: pointer; }
.btn-sm { font-size: 12.5px; height: 32px; padding: 0 14px; }
/* Left panel */
.eb-left {
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(234, 224, 204, 0.07);
background: rgba(13, 16, 22, 0.85);
overflow: hidden;
}
/* Right panel - always visible */
.eb-right {
width: 320px;
flex-shrink: 0;
display: flex !important;
flex-direction: column;
border-left: 1px solid rgba(234, 224, 204, 0.07);
background: rgba(13, 16, 22, 0.85);
overflow: hidden;
visibility: visible !important;
position: relative;
z-index: 10;
}
.eb-right[hidden],
.eb-right.hidden {
display: flex !important;
}
/* Panel tabs */
.eb-panel-tabs {
display: flex;
border-bottom: 1px solid rgba(234, 224, 204, 0.07);
flex-shrink: 0;
}
.eb-panel-tab {
flex: 1;
height: 38px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--color-fg-muted);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.eb-panel-tab:hover { color: var(--color-fg); }
.eb-panel-tab.is-active {
color: var(--color-fg);
border-bottom-color: var(--color-accent);
font-weight: 600;
}
/* Panel panes */
.eb-panel-pane {
display: none;
flex-direction: column;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-3);
}
.eb-panel-pane.is-active {
display: flex !important;
}
/* Left panel internals */
.eb-left__section-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--color-fg-subtle);
margin-bottom: 6px;
padding: 0 2px;
}
.eb-block-library { display: flex; flex-direction: column; gap: 4px; }
.eb-block-type-btn {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg);
font: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing), transform 80ms ease;
}
.eb-block-type-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.eb-block-type-btn:active { transform: translateY(1px); }
.eb-block-type-btn__icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-xs);
background: rgba(234, 224, 204, 0.06);
color: var(--color-fg-muted);
flex-shrink: 0;
}
.eb-block-type-btn__icon--accent { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }
.eb-block-type-btn__label { flex: 1; }
.eb-block-type-btn__add {
display: flex;
align-items: center;
color: var(--color-fg-subtle);
opacity: 0;
transition: opacity var(--motion-fast) var(--easing);
}
.eb-block-type-btn:hover .eb-block-type-btn__add { opacity: 1; color: var(--color-accent-soft-fg); }
.eb-starter-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.eb-starter-btn {
display: grid;
gap: 4px;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: rgba(234, 224, 204, 0.025);
color: var(--color-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}
.eb-starter-btn strong {
font-size: 12.5px;
line-height: 1.3;
}
.eb-starter-btn span {
color: var(--color-fg-muted);
font-size: 11.5px;
line-height: 1.45;
}
.eb-starter-btn:hover {
background: rgba(217, 120, 25, 0.08);
border-color: rgba(217, 120, 25, 0.28);
}
.eb-left__meta-fields { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.eb-meta-field { display: flex; flex-direction: column; gap: 4px; }
.eb-meta-field__label {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.eb-meta-field__input {
height: 32px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg);
font: inherit;
font-size: 12.5px;
}
.eb-meta-field__input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.eb-meta-field__help {
font-size: 11px;
color: var(--color-fg-subtle);
line-height: 1.4;
margin: 0;
}
.eb-left__errors {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid rgba(248, 113, 113, 0.22);
border-radius: var(--radius-sm);
background: rgba(248, 113, 113, 0.07);
}
.eb-error-item { font-size: 12px; color: var(--color-danger); line-height: 1.4; }
/* Structure tab */
.eb-structure-list { display: flex; flex-direction: column; gap: 2px; }
.eb-structure-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 7px 8px;
border-radius: var(--radius-xs);
font-size: 12px;
color: var(--color-fg-muted);
transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.eb-structure-item:hover { background: var(--color-surface-hover); color: var(--color-fg); }
.eb-structure-item.is-active { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }
.eb-structure-icon { display: flex; align-items: center; flex-shrink: 0; color: inherit; }
.eb-structure-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Canvas */
.eb-canvas-wrap {
flex: 1;
min-width: 0;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: #0d1016;
}
.eb-canvas-wrap:focus { outline: none; }
.eb-canvas-toolbar {
position: sticky;
top: 0;
z-index: 12;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 7px 14px;
border-bottom: 1px solid rgba(234, 224, 204, 0.08);
background: rgba(13, 16, 22, 0.92);
backdrop-filter: blur(10px);
}
.eb-canvas-toolbar .btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.eb-canvas-toolbar__group {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.025);
}
.eb-toolbar-icon-btn,
.eb-section-control-btn,
.eb-section-add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
color: var(--color-fg-muted);
background: transparent;
cursor: pointer;
transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.eb-toolbar-icon-btn {
width: 28px;
height: 26px;
border-radius: 5px;
}
.eb-toolbar-icon-btn:hover,
.eb-toolbar-icon-btn.is-active {
color: var(--color-fg);
background: var(--color-surface-hover);
}
.eb-toolbar-icon-btn:focus-visible,
.eb-section-control-btn:focus-visible,
.eb-section-add-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.eb-canvas-outer {
padding: 32px 32px 32px 64px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.eb-email-document {
width: 100%;
max-width: 920px;
min-height: 240px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.eb-canvas-wrap.is-mobile-preview .eb-email-document {
max-width: 390px;
}
.eb-email-body[data-section-list] {
padding: 0;
min-height: 160px;
}
.eb-layout-section {
position: relative;
margin: 0 0 8px;
padding: 12px 0;
border-top: 1px solid rgba(234, 224, 204, 0.06);
transition: background var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.eb-layout-section:hover,
.eb-layout-section.is-selected {
background: rgba(255, 255, 255, 0.018);
border-top-color: rgba(217, 120, 25, 0.28);
}
.eb-layout-section.drag-over .eb-layout-section__inner,
.eb-block.drag-over {
outline: 2px solid rgba(217, 120, 25, 0.65);
outline-offset: 3px;
}
.eb-layout-section__inner {
width: 100%;
box-sizing: border-box;
color: #d8dee9;
}
.eb-layout-section--plain .eb-layout-section__inner {
background: transparent;
box-shadow: none;
}
.eb-layout-section--card .eb-layout-section__inner {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}
.eb-layout-section--full_width,
.eb-layout-section--bleed {
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
.eb-section-controls {
position: absolute;
top: 8px;
left: -38px;
right: auto;
z-index: 8;
display: none;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid rgba(234, 224, 204, 0.12);
border-radius: var(--radius-sm);
background: rgba(13, 16, 22, 0.96);
box-shadow: var(--shadow-md);
}
.eb-layout-section:hover .eb-section-controls,
.eb-layout-section.is-selected .eb-section-controls {
display: flex;
}
/* Layout flyout — position:fixed so it's never clipped by canvas overflow */
.eb-layout-flyout {
position: fixed;
z-index: 200;
background: rgba(13, 16, 22, 0.97);
border: 1px solid rgba(234, 224, 204, 0.12);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 160px;
opacity: 0;
transform: translateX(8px);
transition: opacity 0.14s ease, transform 0.14s ease;
pointer-events: none;
}
.eb-layout-flyout.is-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.eb-layout-flyout__option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 0.75rem;
color: rgba(234, 224, 204, 0.65);
white-space: nowrap;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.eb-layout-flyout__option:hover {
background: rgba(234, 224, 204, 0.07);
color: rgba(234, 224, 204, 0.9);
}
.eb-layout-flyout__option.is-active {
color: #d97819;
}
.eb-layout-flyout__check {
margin-left: auto;
opacity: 0;
font-size: 0.8rem;
}
.eb-layout-flyout__option.is-active .eb-layout-flyout__check {
opacity: 1;
}
.eb-section-control-btn {
width: 24px;
height: 24px;
border-radius: 4px;
}
.eb-section-control-btn:hover {
color: var(--color-fg);
background: var(--color-surface-hover);
}
.eb-section-control-btn--danger:hover {
color: var(--color-danger);
}
.eb-section-add-row {
display: flex;
align-items: center;
justify-content: center;
height: 18px;
opacity: 0.35;
transition: opacity var(--motion-fast) var(--easing);
}
.eb-section-add-row:hover,
.eb-section-add-row:focus-within {
opacity: 1;
}
.eb-section-add-btn {
width: 26px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(234, 224, 204, 0.14);
background: rgba(13, 16, 22, 0.92);
}
.eb-section-add-btn:hover {
color: var(--color-accent-soft-fg);
border-color: rgba(217, 120, 25, 0.42);
}
.eb-section-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 72px;
border: 1px dashed rgba(234, 224, 204, 0.12);
border-radius: var(--radius-sm);
color: var(--color-fg-subtle);
font-size: 12px;
}
.eb-section-empty__actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.eb-canvas-wrap.is-preview-mode .eb-section-controls,
.eb-canvas-wrap.is-preview-mode .eb-block-actions,
.eb-canvas-wrap.is-preview-mode .eb-section-add-row,
.eb-canvas-wrap.is-preview-mode .eb-inline-adder,
.eb-canvas-wrap.is-preview-mode .eb-section-block-adder {
display: none !important;
}
/* Layout section: block adder (same row style as container inline adder) */
/* Section add-elements bar: visible for the layout section that owns current canvas focus */
.eb-layout-section:not(.is-section-context) .eb-section-block-adder {
display: none !important;
}
.eb-slash-menu {
position: fixed;
left: 50%;
top: 110px;
transform: translateX(-50%);
z-index: 40;
display: grid;
min-width: 210px;
padding: 6px;
border: 1px solid rgba(234, 224, 204, 0.14);
border-radius: var(--radius-sm);
background: rgba(13, 16, 22, 0.98);
box-shadow: var(--shadow-lg);
}
.eb-slash-menu__item {
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--color-fg-muted);
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.eb-slash-menu__item:hover,
.eb-slash-menu__item:focus-visible {
outline: none;
color: var(--color-fg);
background: var(--color-surface-hover);
}
.eb-email-card {
width: 100%;
max-width: 620px;
background: #131820;
border: 1px solid rgba(234, 224, 204, 0.16);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.55);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.eb-email-header {
padding: 26px 30px 22px;
border-bottom: 1px solid rgba(234, 224, 204, 0.10);
}
.eb-email-header.is-empty {
padding: 0;
}
.eb-email-header.is-selected,
.eb-email-footer.is-selected {
outline: 2px solid rgba(217, 120, 25, 0.55);
outline-offset: -2px;
}
.eb-email-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-accent-soft-fg);
outline: none;
min-height: 18px;
border-radius: 2px;
}
.eb-email-eyebrow:empty:before { content: attr(placeholder); color: var(--color-fg-subtle); font-style: italic; }
.eb-email-heading {
margin-top: 8px;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
color: var(--color-fg);
outline: none;
min-height: 30px;
border-radius: 2px;
}
.eb-email-heading:empty:before { content: attr(placeholder); color: var(--color-fg-subtle); font-style: italic; }
[contenteditable]:focus-within,
[contenteditable]:focus {
outline: 1px dashed rgba(217, 120, 25, 0.45);
outline-offset: 2px;
border-radius: 2px;
}
.eb-email-body {
padding: 8px 30px 0;
min-height: 60px;
position: relative;
}
.eb-email-footer {
padding: 12px 30px 22px;
border-top: 1px solid rgba(234, 224, 204, 0.06);
}
.eb-email-footer-note {
font-size: 12px;
color: #8f98a8;
line-height: 1.5;
outline: none;
min-height: 18px;
}
.eb-email-footer-note:empty:before { content: attr(placeholder); color: var(--color-fg-subtle); font-style: italic; }
.eb-canvas-drop-hint {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 112px;
color: var(--color-fg-subtle);
font-size: 13px;
border: 1px dashed rgba(234, 224, 204, 0.12);
border-radius: var(--radius-sm);
margin: 8px 0;
padding: 14px 18px;
text-align: left;
}
.eb-canvas-drop-hint__content {
display: grid;
gap: 3px;
}
.eb-canvas-drop-hint__content strong {
color: var(--color-fg);
font-size: 13px;
}
.eb-canvas-drop-hint__content span {
color: var(--color-fg-subtle);
font-size: 12px;
}
.eb-canvas-drop-hint__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
margin-left: auto;
}
/* Blocks */
.eb-block {
position: relative;
padding: 6px 0;
border-radius: var(--radius-sm);
transition: outline var(--motion-fast) var(--easing);
cursor: default;
}
.eb-block:hover { outline: 1px solid rgba(234, 224, 204, 0.12); outline-offset: 2px; }
.eb-block.is-selected { outline: 2px solid rgba(217, 120, 25, 0.55); outline-offset: 2px; }
.eb-block.is-dragging { opacity: 0.35; }
.eb-block.drag-over { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.eb-block-actions {
position: absolute;
top: -14px;
right: 0;
display: none;
align-items: center;
gap: 2px;
background: rgba(13, 16, 22, 0.95);
border: 1px solid rgba(234, 224, 204, 0.14);
border-radius: var(--radius-sm);
padding: 3px 4px;
z-index: 10;
box-shadow: var(--shadow-md);
}
.eb-block:hover .eb-block-actions,
.eb-block.is-selected .eb-block-actions { display: flex; }
.eb-block-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 0;
border-radius: 3px;
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition: color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}
.eb-block-action-btn:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.eb-block-action-btn--danger:hover { color: var(--color-danger); }
.eb-block-handle {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--color-fg-subtle);
cursor: grab;
border-radius: 3px;
}
.eb-block-handle:hover { color: var(--color-fg-muted); }
.eb-block-handle:active { cursor: grabbing; }
.eb-block-content { padding: 4px 0; }
.eb-block.drag-over {
position: relative;
}
.eb-block.drag-over::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -6px;
height: 2px;
border-radius: 999px;
background: var(--color-accent);
box-shadow: 0 0 0 2px rgba(217, 120, 25, 0.18);
}
.eb-block-text {
font-size: 15px;
line-height: 1.6;
color: #d8dee9;
white-space: pre-wrap;
outline: none;
min-height: 24px;
}
.eb-block-text p,
.eb-email-footer-note p {
margin: 0 0 12px;
}
.eb-block-text p:last-child,
.eb-email-footer-note p:last-child {
margin-bottom: 0;
}
.eb-block-text ul,
.eb-block-text ol,
.eb-email-footer-note ul,
.eb-email-footer-note ol {
margin: 0 0 12px 22px;
padding: 0;
}
.eb-block-text li,
.eb-email-footer-note li {
margin: 0 0 6px;
}
.eb-block-text a,
.eb-email-footer-note a {
color: inherit;
text-decoration: underline;
}
.eb-block-text:empty:before { content: "Type your message…"; color: var(--color-fg-subtle); font-style: italic; }
.eb-canvas-cta-btn {
display: inline-block;
padding: 12px 28px;
border-radius: 10px;
background: #d97819;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: default;
user-select: none;
}
.eb-canvas-divider {
width: 100%;
height: 1px;
background: rgba(234, 224, 204, 0.12);
border: 0;
margin: 4px 0;
}
.eb-block-spacer-vis {
position: relative;
background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(234,224,204,0.03) 4px, rgba(234,224,204,0.03) 8px);
border: 1px dashed rgba(234, 224, 204, 0.08);
border-radius: 3px;
}
.eb-block-spacer-vis::after {
content: attr(data-spacer-label);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
color: var(--color-fg-subtle);
pointer-events: none;
}
/* ── Section / Group container blocks ────────────────────────────────────── */
.eb-block--section,
.eb-block--group {
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px dashed rgba(234, 224, 204, 0.18);
background: rgba(255, 255, 255, 0.02);
transition: border-color 0.15s;
}
.eb-block--section.is-selected,
.eb-block--group.is-selected,
.eb-block--section.is-container-active,
.eb-block--group.is-container-active {
border-color: var(--color-accent-soft-fg);
border-style: solid;
}
.eb-container-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px 5px 10px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(234, 224, 204, 0.08);
}
.eb-container-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-fg-subtle);
flex: 1;
}
.eb-container-children {
min-height: 48px;
display: flex;
flex-direction: column;
gap: 4px;
}
.eb-container-empty {
text-align: center;
padding: 18px;
font-size: 12px;
color: var(--color-fg-subtle);
font-style: italic;
}
/* Inline block-adder toolbar — replaces old .eb-container-add-btn */
.eb-inline-adder {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 6px 8px 7px;
border-top: 1px solid rgba(234, 224, 204, 0.08);
background: rgba(255, 255, 255, 0.015);
}
.eb-inline-adder__label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-fg-subtle);
margin-right: 3px;
flex-shrink: 0;
opacity: 0.6;
}
.eb-inline-adder__btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
border-radius: 4px;
border: 1px solid rgba(234, 224, 204, 0.12);
background: transparent;
color: var(--color-fg-muted);
font-size: 11px;
line-height: 1.4;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
white-space: nowrap;
}
.eb-inline-adder__btn:hover {
background: rgba(234, 224, 204, 0.08);
color: var(--color-fg);
border-color: rgba(234, 224, 204, 0.22);
}
.eb-inline-adder__btn:active {
background: rgba(217, 120, 25, 0.12);
color: var(--color-accent-soft-fg);
border-color: rgba(217, 120, 25, 0.35);
}
.eb-inline-adder__btn svg {
flex-shrink: 0;
opacity: 0.75;
}
.eb-inline-adder__btn:hover svg {
opacity: 1;
}
/* Child blocks inside containers */
.eb-child-block {
position: relative;
border-radius: 3px;
border: 1px solid transparent;
transition: border-color 0.12s;
}
.eb-child-block:hover {
border-color: rgba(234, 224, 204, 0.14);
}
.eb-child-block.is-selected {
border-color: var(--color-accent-soft-fg);
background: rgba(217, 120, 25, 0.04);
}
/* Child blocks don't need a drag handle column gap */
.eb-child-block .eb-block-actions {
opacity: 0;
transition: opacity 0.1s;
}
.eb-child-block:hover .eb-block-actions,
.eb-child-block.is-selected .eb-block-actions {
opacity: 1;
}
/* Structure panel child indentation */
.eb-structure-item--child {
padding-left: 22px;
opacity: 0.85;
}
/* Right panel: two-column grid for paired inputs */
.eb-props-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* Color input clear button */
.eb-color-clear {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
border: 1px solid rgba(234, 224, 204, 0.14);
border-radius: 4px;
color: var(--color-fg-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.eb-color-clear:hover {
background: rgba(234, 224, 204, 0.08);
color: var(--color-fg);
}
/* Spacer preset pills */
.eb-spacer-presets {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.eb-spacer-preset-btn {
padding: 4px 9px;
border-radius: 4px;
border: 1px solid rgba(234, 224, 204, 0.14);
background: transparent;
color: var(--color-fg-muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.eb-spacer-preset-btn:hover {
background: rgba(234, 224, 204, 0.06);
color: var(--color-fg);
}
.eb-spacer-preset-btn.is-active {
background: var(--color-accent-soft);
color: var(--color-accent-soft-fg);
border-color: transparent;
}
.eb-block-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 80px;
border: 1px dashed rgba(234, 224, 204, 0.16);
border-radius: var(--radius-sm);
color: var(--color-fg-subtle);
font-size: 12px;
}
/* Right panel internals */
.eb-right-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
flex: 1;
text-align: center;
color: var(--color-fg-muted);
font-size: 12.5px;
padding: var(--space-5);
line-height: 1.5;
}
.eb-right-section-head {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--color-fg-subtle);
padding: 0 0 8px;
border-bottom: 1px solid rgba(234, 224, 204, 0.06);
margin-bottom: var(--space-3);
}
.eb-props-section {
padding: var(--space-3) 0;
border-bottom: 1px solid rgba(234, 224, 204, 0.06);
}
.eb-props-section:last-child { border-bottom: 0; }
.eb-props-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.eb-props-group:last-child { margin-bottom: 0; }
.eb-props-label {
font-size: 11.5px;
font-weight: 600;
color: var(--color-fg-muted);
}
.eb-props-help {
margin: 0 0 var(--space-3);
color: var(--color-fg-subtle);
font-size: 11.5px;
line-height: 1.45;
}
.eb-props-check {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
color: var(--color-fg);
cursor: pointer;
}
.eb-props-check input {
margin: 0;
flex-shrink: 0;
}
.eb-props-input {
height: 32px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg);
font: inherit;
font-size: 12.5px;
width: 100%;
box-sizing: border-box;
}
.eb-props-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
input[type="number"].eb-props-input { -moz-appearance: textfield; }
.eb-size-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.eb-input-suffix {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 32px;
padding: 0 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg-subtle);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
box-sizing: border-box;
}
.eb-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
}
.eb-link-row .btn { white-space: nowrap; }
.eb-hyperlink-drop-wrap {
display: flex;
align-items: center;
gap: 6px;
position: relative;
}
.eb-hyperlink-drop__label {
font-size: 0.6875rem;
color: rgba(234, 224, 204, 0.45);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.eb-hyperlink-drop__zone {
font-size: 0.75rem;
color: rgba(234, 224, 204, 0.35);
background: rgba(234, 224, 204, 0.04);
border: 1px dashed rgba(234, 224, 204, 0.18);
border-radius: var(--radius-sm);
padding: 0 10px;
min-width: 150px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.15s, border-color 0.15s, color 0.15s;
cursor: default;
user-select: none;
}
.eb-hyperlink-drop__zone.is-over {
background: rgba(217, 120, 25, 0.1);
border-color: rgba(217, 120, 25, 0.5);
color: #d97819;
}
.eb-hyperlink-drop__zone.has-text {
color: rgba(234, 224, 204, 0.75);
border-style: solid;
border-color: rgba(234, 224, 204, 0.25);
}
.eb-hyperlink-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 100%;
background: #1a1f2b;
border: 1px solid rgba(234, 224, 204, 0.15);
border-radius: var(--radius-sm);
padding: 8px;
display: flex;
gap: 6px;
z-index: 300;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.eb-hyperlink-url-input {
flex: 1;
min-width: 0;
background: rgba(234, 224, 204, 0.06);
border: 1px solid rgba(234, 224, 204, 0.15);
border-radius: var(--radius-sm);
color: #eae0cc;
font-size: 0.75rem;
padding: 3px 8px;
height: 28px;
outline: none;
}
.eb-hyperlink-url-input:focus { border-color: #d97819; }
.eb-rich-toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
}
.eb-rich-toolbar__btn {
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
background: var(--color-surface-muted);
color: var(--color-fg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.eb-rich-toolbar__btn:hover {
background: var(--color-surface-hover);
color: var(--color-fg);
}
.eb-rich-toolbar__btn.is-active {
background: var(--color-accent-soft);
color: var(--color-accent-soft-fg);
border-color: rgba(217, 120, 25, 0.30);
}
.eb-rich-toolbar__btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.eb-rich-toolbar__sep {
width: 1px;
background: var(--color-border);
margin: 2px 2px;
}
.eb-btn-group { display: flex; gap: 3px; }
.eb-btn-group-btn {
flex: 1;
height: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
background: var(--color-surface-muted);
color: var(--color-fg-muted);
font: inherit;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing);
}
.eb-btn-group-btn:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.eb-btn-group-btn.is-active { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); border-color: rgba(217, 120, 25, 0.30); }
.eb-color-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.eb-color-swatch {
width: 32px;
height: 28px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
background: var(--color-surface-muted);
padding: 2px;
cursor: pointer;
flex-shrink: 0;
}
.eb-color-value {
font-size: 11.5px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: var(--color-fg-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-xs);
padding: 1px 5px;
width: 7ch;
min-width: 0;
outline: none;
cursor: text;
transition: border-color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.eb-color-value:hover { border-color: var(--color-border); }
.eb-color-value:focus {
border-color: var(--color-accent);
background: var(--color-surface-muted);
color: var(--color-fg);
box-shadow: var(--focus-ring);
}
.eb-style-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.eb-style-grid--2 { grid-template-columns: 1fr 1fr; }
.eb-style-field { display: flex; flex-direction: column; gap: 6px; }
.eb-style-field label { font-size: 11.5px; font-weight: 600; color: var(--color-fg-muted); }
/* Images panel */
.eb-images-upload-zone { display: flex; flex-direction: column; gap: var(--space-3); }
.eb-images-upload-zone.is-dragging { background: rgba(217, 120, 25, 0.05); border-radius: var(--radius-sm); }
.eb-images-upload {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.eb-images-upload-btn {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 10px 12px;
border: 1px dashed rgba(234, 224, 204, 0.18);
border-radius: var(--radius-sm);
background: rgba(234, 224, 204, 0.025);
color: var(--color-fg-muted);
font: inherit;
font-size: 12.5px;
cursor: pointer;
text-align: left;
transition: border-color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}
.eb-images-upload-btn:hover { border-color: var(--color-accent); background: rgba(217, 120, 25, 0.05); color: var(--color-fg); }
.eb-images-upload-btn svg { flex-shrink: 0; color: var(--color-fg-subtle); }
.eb-images-upload-btn strong { display: block; font-weight: 600; color: var(--color-fg); }
.eb-images-upload-btn small { display: block; font-size: 11px; color: var(--color-fg-subtle); margin-top: 2px; }
.eb-images-hint { font-size: 11px; color: var(--color-fg-subtle); margin: 0; }
.eb-images-error { font-size: 12px; color: var(--color-danger); margin: 0; }
.eb-images-empty { font-size: 12.5px; color: var(--color-fg-subtle); margin: 0; padding: 12px 0; }
.eb-images-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.eb-image-asset {
display: flex;
flex-direction: column;
gap: 6px;
}
.eb-image-asset__thumb {
width: 100%;
aspect-ratio: 16/9;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: rgba(234, 224, 204, 0.04);
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing);
}
.eb-image-asset__thumb:hover { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(217, 120, 25, 0.20); }
.eb-image-asset__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-image-asset__info { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.eb-image-asset__name {
font-size: 11px;
color: var(--color-fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.eb-image-asset.is-renaming .eb-image-asset__name {
outline: 1px solid var(--color-accent);
border-radius: 2px;
padding: 1px 3px;
white-space: normal;
overflow: visible;
}
.eb-image-asset__actions { display: flex; gap: 2px; flex-shrink: 0; }
.eb-image-asset__action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 0;
border-radius: 3px;
background: transparent;
color: var(--color-fg-subtle);
cursor: pointer;
transition: color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}
.eb-image-asset__action-btn:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.eb-image-asset__action-btn--danger:hover { color: var(--color-danger); }
.eb-image-picker__preview {
width: 100%;
border-radius: var(--radius-sm);
display: block;
margin-bottom: 6px;
}
.eb-image-picker__name { font-size: 11.5px; color: var(--color-fg-muted); }
.eb-image-picker__hint { font-size: 12px; color: var(--color-fg-subtle); margin: 0; line-height: 1.5; }
.eb-image-picker__hint strong { color: var(--color-fg-muted); }
/* Merge fields (tokens) */
.eb-fields-hint {
font-size: 12px;
color: var(--color-fg-subtle);
line-height: 1.5;
margin: 0 0 var(--space-3);
}
.eb-token-list { display: flex; flex-direction: column; gap: 4px; }
.eb-token-btn {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 9px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-muted);
color: var(--color-fg);
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing), transform 80ms ease;
}
.eb-token-btn:hover { background: rgba(217,120,25,0.08); border-color: rgba(217,120,25,0.30); }
.eb-token-btn:active { transform: translateY(1px); }
.eb-token-btn.is-disabled,
.eb-token-btn:disabled {
opacity: 0.48;
cursor: not-allowed;
transform: none;
}
.eb-token-btn.is-disabled:hover,
.eb-token-btn:disabled:hover {
background: var(--color-surface-muted);
border-color: var(--color-border);
}
.eb-token-btn.is-disabled .eb-token-btn__insert,
.eb-token-btn:disabled .eb-token-btn__insert {
opacity: 0;
}
.eb-token-btn__icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-xs);
background: rgba(234, 224, 204, 0.06);
color: var(--color-fg-muted);
flex-shrink: 0;
transition: background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.eb-token-btn:hover .eb-token-btn__icon { background: rgba(217,120,25,0.12); color: var(--color-accent-soft-fg); }
.eb-token-btn__content { flex: 1; display: grid; gap: 2px; min-width: 0; }
.eb-token-btn__label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.eb-token-btn__token {
font-size: 10.5px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: var(--color-accent-soft-fg);
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eb-token-btn small { font-size: 10.5px; color: var(--color-fg-muted); line-height: 1.3; }
.eb-token-btn__insert {
display: flex;
align-items: center;
color: var(--color-fg-subtle);
opacity: 0;
transition: opacity var(--motion-fast) var(--easing);
}
.eb-token-btn:hover .eb-token-btn__insert { opacity: 1; color: var(--color-accent-soft-fg); }
.eb-token-btn.is-dragging { opacity: 0.55; cursor: grabbing; }
/* Drop-target highlight when a field is dragged over an editable area */
.eb-block-text.is-drag-over,
.eb-email-footer-note.is-drag-over,
.eb-email-eyebrow.is-drag-over,
.eb-email-heading.is-drag-over {
outline: 2px dashed var(--color-accent);
outline-offset: 4px;
border-radius: 3px;
}
/* ---------- Modal ---------------------------------------------------- */
.modal {
width: min(520px, calc(100% - 32px));
padding: 0;
border: 0;
background: transparent;
color: var(--color-fg);
}
.modal--wide {
width: min(900px, calc(100% - 32px));
}
.modal::backdrop {
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(4px);
}
.modal__panel {
background: rgba(18, 22, 34, 0.96);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
padding: 24px;
}
.delete-confirm {
display: grid;
gap: var(--space-4);
}
.delete-confirm__copy {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 10px 12px;
border: 1px solid rgba(248, 113, 113, 0.22);
border-radius: var(--radius-sm);
background: rgba(248, 113, 113, 0.08);
}
.delete-confirm__copy code {
overflow: hidden;
color: var(--color-fg);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
font-size: 13px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.delete-confirm__copy span {
color: var(--color-danger);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.modal-toast-stack {
position: fixed;
top: 18px;
left: 50%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: min(360px, calc(100vw - 32px));
pointer-events: none;
transform: translateX(-50%);
}
.modal-toast {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
max-width: 100%;
padding: 7px 10px;
border-radius: var(--radius-sm);
background: rgba(12, 38, 30, 0.96);
border: 1px solid rgba(52, 211, 153, 0.34);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
color: var(--color-success);
font-size: 12.5px;
font-weight: 600;
line-height: 18px;
animation-name: modal-toast-fade;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
will-change: opacity, transform;
}
.modal-toast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: var(--radius-xs);
background: rgba(52, 211, 153, 0.16);
flex-shrink: 0;
}
@keyframes modal-toast-fade {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
.modal-toolbar {
display: grid;
grid-template-columns: minmax(220px, 1fr) 180px;
gap: var(--space-3);
margin: var(--space-5) 0 var(--space-4);
}
.modal-toolbar input,
.modal-toolbar select {
height: var(--control-height);
min-height: var(--control-height);
}
.contact-modal-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: min(62vh, 620px);
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
padding: 6px;
}
.contact-modal-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
padding: 12px 14px;
border-radius: var(--radius-sm);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.contact-modal-row:last-child { border-bottom: 0; }
.contact-modal-row:hover { background: rgba(255, 255, 255, 0.035); }
.icon-danger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-danger);
cursor: pointer;
}
.icon-danger:hover {
background: var(--color-danger-soft);
border-color: rgba(248, 113, 113, 0.25);
}
@media (max-width: 900px) {
.modal-toolbar,
.contact-modal-row {
grid-template-columns: 1fr;
}
.eb-canvas-drop-hint {
align-items: flex-start;
flex-direction: column;
}
.eb-canvas-drop-hint__actions {
justify-content: flex-start;
margin-left: 0;
}
}
/* ---------- Campaign detail redesign -------------------------------- */
.campaign-detail {
max-width: 100%;
}
.campaign-detail__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
flex-wrap: nowrap;
}
.campaign-detail__title-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
flex: 1;
min-width: 0;
}
.campaign-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-fg-muted);
flex-shrink: 0;
transition: color var(--motion-fast) var(--easing);
}
.campaign-back-btn:hover {
color: var(--color-fg);
}
.campaign-detail__title-stack {
flex: 1;
min-width: 0;
}
.campaign-detail__title-stack h1 {
margin: 0;
color: var(--color-fg);
font-size: 22px;
line-height: 28px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
Name row: h1 + team bar side-by-side.
Team bar wraps below on very small viewports.
*/
.campaign-detail__name-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
min-width: 0;
}
/*
Compact inline team bar — sits on the same line as the campaign name.
*/
.campaign-name-team {
display: flex;
align-items: center;
gap: 0;
border: 1px solid rgba(234, 224, 204, 0.10);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
flex-shrink: 0;
}
.campaign-name-team__member {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
}
.campaign-name-team__member + .campaign-name-team__member {
border-left: 1px solid rgba(234, 224, 204, 0.08);
}
.campaign-name-team__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-soft-fg);
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
flex-shrink: 0;
border: 1.5px solid rgba(255, 255, 255, 0.06);
}
.campaign-name-team__text {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1;
min-width: 0;
}
.campaign-name-team__name {
font-size: 12.5px;
font-weight: 600;
color: var(--color-fg);
white-space: nowrap;
}
.campaign-name-team__role {
font-size: 10px;
font-weight: 500;
color: var(--color-fg-subtle);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.campaign-detail__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
color: var(--color-fg-muted);
font-size: 13px;
}
.campaign-detail__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.campaign-detail__owner {
margin-top: 5px;
font-size: 12.5px;
color: var(--color-fg-subtle);
}
.campaign-detail__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
flex-shrink: 0;
flex-wrap: wrap;
}
.campaign-detail__actions form {
margin: 0;
}
.campaign-send-warning {
margin-top: 14px;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid rgba(248, 113, 113, 0.22);
background: rgba(248, 113, 113, 0.06);
}
.campaign-send-warning__text {
color: var(--color-fg-muted);
line-height: 1.45;
}
.campaign-send-include {
margin-top: 12px;
}
.campaign-send-include__legend {
margin: 0 0 8px;
font-weight: 600;
color: var(--color-fg);
}
.campaign-send-include__choice {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 18px 0 0;
cursor: pointer;
font-size: 13px;
color: var(--color-fg-muted);
}
.campaign-send-include__choice input {
margin: 0;
}
.campaign-detail__tab {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border-bottom: 2px solid transparent;
color: var(--color-fg-muted);
font-size: 13.5px;
font-weight: 700;
}
.campaign-detail__tab:hover {
color: var(--color-fg);
}
.campaign-detail__tab.is-active {
color: var(--color-fg);
border-bottom-color: var(--color-accent);
}
.campaign-detail__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
gap: var(--space-4);
align-items: start;
}
/* Page-level two-column grid for contacts/detail. Defined here so the
inline