/* STARTele theme for Listmonk public pages (subscribe, opt-in, unsubscribe, preferences, archive).
   Loaded via Settings > Appearance > Public. Palette and type from the STARTele chat archive. */
:root {
  --black: #0b0b0b; --white: #f4f2ec; --red: #ff3b30; --yellow: #ffd60a; --lavender: #b8a9ff; --fuchsia: #ff2bd1;
  --bg: var(--black); --panel: #000; --fg: var(--white); --fg-dim: var(--lavender); --fg-faint: #8a80c0;
  --line: rgba(184, 169, 255, .22); --link: var(--fuchsia); --head: var(--yellow); --alert: var(--red);
  --hazard: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, var(--black) 10px 20px);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--white); --panel: #fff; --fg: var(--black); --fg-dim: #5b47c7; --fg-faint: #7d70b8;
    --line: rgba(11, 11, 11, .16); --link: #c4009c; --head: var(--black); --alert: #d81e14;
  }
}

body { background: var(--bg); color: var(--fg); font: 14px/1.6 var(--mono); }
::selection { background: var(--fuchsia); color: var(--black); }
a { color: var(--link); text-decoration-color: currentColor; text-underline-offset: 2px; }
a:hover { color: var(--fg); }
label { color: var(--fg); }

h1, h2, h3, h4 { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--head); font-size: 15px; }
h2::before { content: "> "; color: var(--fuchsia); }

/* card */
.wrap { background: var(--panel); border: 1px solid var(--line); box-shadow: none; position: relative; padding-top: 46px; }
.wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hazard); }

/* brand logo (Settings > General > Logo URL -> /uploads/startele-logo.png, transparent PNG at 2x) */
.header { border-bottom: 1px solid var(--line); }
.header .logo img { display: block; width: 250px; max-width: 100%; height: auto; }
.header .logo a, .header .logo .logo-text { display: inline-block; }

/* form controls */
input[type="text"], input[type="email"], input[type="password"], select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 0; box-shadow: none; font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--fuchsia); outline-offset: -1px; border-color: var(--fuchsia); }
input::placeholder { color: var(--fg-faint); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--fuchsia); }

.button {
  background: var(--yellow); color: var(--black); border: 1px solid var(--yellow); border-radius: 0;
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.button:hover { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--black); }
.button.button-outline { background: transparent; color: var(--yellow); border-color: var(--yellow); }
.button.button-outline:hover { background: var(--yellow); color: var(--black); }
@media (prefers-color-scheme: light) {
  .button { background: var(--black); border-color: var(--black); color: var(--yellow); }
  .button.button-outline { color: var(--black); border-color: var(--black); }
  .button.button-outline:hover { background: var(--black); color: var(--yellow); }
}

.lists h2 { font-size: 12px; color: var(--fg-dim); letter-spacing: .12em; }
.lists h2::before { content: "// "; color: inherit; }
.lists .description, .archive .date, .small { color: var(--fg-dim); }
.error { color: var(--alert); }
.unsub-all { border-top: 1px solid var(--line); }
.pg-page.pg-selected { color: var(--head); }

/* the public footer only holds the "Powered by listmonk" credit */
footer.container { display: none; }

/* "waiting" indicator added by public.js while a form submits: the animated STARTele rainbow */
.rainbow-wait {
  display: block; height: 6px; margin: 0 0 14px;
  background: url(/uploads/startele-rainbow.gif) 0 0 / 100% 100% no-repeat;
}
form[aria-busy="true"] .button { opacity: .6; cursor: progress; }