@usequeek/theme-kit 0.1.0

package/apps/apps.css

@@ -0,0 +1,613 @@
+/* ── Storefront Apps — Core-owned components ─────────────── */
+/* Themes override via `.theme-X .core-*` scoped selectors.  */
+
+/* ── WhatsApp Chat ───────────────────────────────────────── */
+.core-whatsapp-chat {
+  position: fixed;
+  z-index: 200;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #25D366;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  text-decoration: none;
+}
+
+.core-whatsapp-chat:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
+}
+
+/* WhatsApp positions — bottom offset is set via inline style */
+.core-whatsapp-chat--bottom-right { right: 1.25rem; }
+.core-whatsapp-chat--bottom-left  { left: 1.25rem; }
+.core-whatsapp-chat--center-right { top: 50%; right: 1.25rem; transform: translateY(-50%); }
+.core-whatsapp-chat--center-left  { top: 50%; left: 1.25rem; transform: translateY(-50%); }
+.core-whatsapp-chat--center-right:hover,
+.core-whatsapp-chat--center-left:hover { transform: translateY(-50%) scale(1.08); }
+
+/* ── Follow Card ─────────────────────────────────────────── */
+.core-follow-card {
+  font-family: var(--font-body, system-ui, sans-serif);
+  color: var(--brand-text, #1a1a1a);
+}
+
+.core-follow-card--floating {
+  position: fixed;
+  z-index: 190;
+  width: 280px;
+  background: var(--brand-background, #fff);
+  border: 1px solid var(--brand-border, rgba(0,0,0,0.1));
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+}
+
+/* Follow Card positions */
+.core-follow-card--bottom-right { bottom: 5.5rem; right: 1.25rem; }
+.core-follow-card--bottom-left  { bottom: 5.5rem; left: 1.25rem; }
+.core-follow-card--center-right { top: 50%; right: 1.25rem; transform: translateY(-50%); }
+.core-follow-card--center-left  { top: 50%; left: 1.25rem; transform: translateY(-50%); }
+
+.core-follow-card--inline {
+  background: var(--brand-surface, #f5f5f5);
+  border-radius: 8px;
+  padding: 1.25rem;
+  max-width: 400px;
+}
+
+.core-follow-card__dismiss {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: transparent;
+  color: var(--brand-text-muted, #888);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+
+.core-follow-card__dismiss:hover {
+  background: var(--brand-surface, rgba(0,0,0,0.05));
+}
+
+.core-follow-card__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.core-follow-card__logo {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.core-follow-card__text {
+  flex: 1;
+  min-width: 0;
+}
+
+.core-follow-card__title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin: 0 0 0.15rem;
+  line-height: 1.3;
+}
+
+.core-follow-card__sub {
+  font-size: 0.75rem;
+  color: var(--brand-text-muted, #666);
+  margin: 0 0 0.25rem;
+  line-height: 1.4;
+}
+
+.core-follow-card__count {
+  font-size: 0.7rem;
+  color: var(--brand-text-muted, #999);
+  margin: 0;
+}
+
+.core-follow-card__btn {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+  background: var(--brand-button, var(--brand-accent, #000));
+  color: var(--brand-button-text, #fff);
+}
+
+.core-follow-card__btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.core-follow-card__btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.core-follow-card__consent {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.7rem;
+  color: var(--brand-text-muted, #666);
+  cursor: pointer;
+  line-height: 1.3;
+}
+
+.core-follow-card__checkbox {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  accent-color: var(--brand-accent, #000);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+@media (max-width: 600px) {
+  .core-follow-card--floating {
+    left: 1rem;
+    right: 1rem;
+    width: auto;
+    bottom: 5rem;
+  }
+  /* Reset position overrides on mobile — always full-width bottom */
+  .core-follow-card--bottom-left,
+  .core-follow-card--center-right,
+  .core-follow-card--center-left {
+    left: 1rem;
+    right: 1rem;
+    width: auto;
+    bottom: 5rem;
+    top: auto;
+    transform: none;
+  }
+
+  .core-whatsapp-chat {
+    width: 48px;
+    height: 48px;
+  }
+  /* Reset WhatsApp position on mobile — always bottom */
+  .core-whatsapp-chat--bottom-right,
+  .core-whatsapp-chat--bottom-left { bottom: 1rem; }
+  .core-whatsapp-chat--bottom-left { left: 1rem; right: auto; }
+  .core-whatsapp-chat--center-right,
+  .core-whatsapp-chat--center-left {
+    top: auto;
+    bottom: 1rem;
+    transform: none;
+  }
+  .core-whatsapp-chat--center-right { right: 1rem; }
+  .core-whatsapp-chat--center-left { left: 1rem; right: auto; }
+}
+
+/* ── Subscribe form (newsletter capture) ─────────────────── */
+.core-subscribe {
+  font-family: var(--font-body, system-ui, sans-serif);
+  color: var(--brand-text, #1a1a1a);
+}
+
+.core-subscribe__heading {
+  font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.35rem;
+}
+
+.core-subscribe__tagline {
+  font-size: 0.875rem;
+  opacity: 0.75;
+  margin: 0 0 0.85rem;
+  line-height: 1.5;
+}
+
+.core-subscribe__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.core-subscribe__form {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.core-subscribe--stacked .core-subscribe__form { flex-direction: column; }
+
+.core-subscribe__input {
+  flex: 1 1 12rem;
+  min-width: 0;
+  padding: 0.7rem 0.85rem;
+  font: inherit;
+  font-size: 0.9375rem;
+  color: inherit;
+  background: var(--brand-background, #fff);
+  border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.18));
+  border-radius: var(--shape-radius, 8px);
+}
+
+/* In --stacked (flex-direction: column), the main axis is vertical, so the
+   row layout's `flex: 1 1 12rem` above would set a 12rem *height* basis
+   instead of width — inflating the input into a tall box. Reset to natural
+   content height and span the column via width instead. */
+.core-subscribe--stacked .core-subscribe__input,
+.core-subscribe--stacked .core-subscribe__button {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.core-subscribe__input:focus-visible {
+  outline: 2px solid var(--brand-primary, #00a884);
+  outline-offset: 1px;
+}
+
+.core-subscribe__button {
+  padding: 0.7rem 1.25rem;
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--brand-on-primary, #fff);
+  background: var(--brand-primary, #00a884);
+  border: 1px solid transparent;
+  border-radius: var(--shape-radius, 8px);
+  transition: opacity 0.2s ease;
+}
+
+.core-subscribe__button:hover:not(:disabled) { opacity: 0.88; }
+.core-subscribe__button:disabled { opacity: 0.6; cursor: default; }
+
+.core-subscribe__error {
+  margin: 0.6rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--brand-danger, #c0392b);
+}
+
+.core-subscribe__done {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+/* ── Subscribe — inline variant (generic, above the footer) ─ */
+.core-subscribe-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 1.25rem;
+}
+
+/* ── Subscribe — floating variant ────────────────────────── */
+/* Defaults to bottom-left — WhatsApp chat + FollowCard already stack in the
+   bottom-right corner by default, so this avoids a default collision. */
+.core-subscribe-floating {
+  position: fixed;
+  z-index: 190;
+  left: 1.25rem;
+  bottom: 5.5rem;
+  width: 280px;
+  background: var(--brand-background, #fff);
+  border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.1));
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+}
+
+.core-subscribe-floating__dismiss {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: transparent;
+  color: var(--brand-text-muted, #888);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+
+.core-subscribe-floating__dismiss:hover {
+  background: var(--brand-surface, rgba(0, 0, 0, 0.05));
+}
+
+@media (max-width: 600px) {
+  .core-subscribe-floating {
+    left: 1rem;
+    right: 1rem;
+    width: auto;
+    bottom: 5rem;
+  }
+}
+
+/* ── Subscribe — modal variant ───────────────────────────── */
+/* Above the floating widgets (190/200) so it isn't hidden behind them while
+   open, below the cookie-consent banner (300) — a legal notice should never
+   be obscured by a marketing popup. */
+.core-subscribe-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 250;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  animation: core-subscribe-modal-fade 0.2s ease;
+}
+
+.core-subscribe-modal {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  background: var(--brand-background, #fff);
+  border-radius: var(--radius-lg, 12px);
+  padding: 2.5rem 2rem 2rem;
+  box-shadow: var(--shadow-3, 0 20px 60px rgba(0, 0, 0, 0.25));
+  animation: core-subscribe-modal-pop 0.25s ease;
+}
+
+.core-subscribe-modal:focus {
+  outline: none;
+}
+
+/* The shared .core-subscribe__* rules are sized for an ambient footer strip
+   or a small corner card — too quiet for a modal, whose entire job is to be
+   the visual focus of the screen while it's open. Scoped overrides here
+   instead of changing the shared rules, so inline/floating keep their
+   original, already-appropriate scale. */
+.core-subscribe-modal .core-subscribe__heading {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 0 0 0.5rem;
+}
+
+.core-subscribe-modal .core-subscribe__tagline {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  margin: 0 0 1.5rem;
+}
+
+.core-subscribe-modal .core-subscribe__form {
+  gap: 0.65rem;
+}
+
+.core-subscribe-modal .core-subscribe__input {
+  padding: 0.85rem 1rem;
+}
+
+.core-subscribe-modal .core-subscribe__button {
+  padding: 0.9rem 1.25rem;
+  font-size: 1rem;
+  margin-top: 0.25rem;
+}
+
+.core-subscribe-modal__dismiss {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--brand-text-muted, #888);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+
+.core-subscribe-modal__dismiss:hover {
+  background: var(--brand-surface, rgba(0, 0, 0, 0.05));
+}
+
+@keyframes core-subscribe-modal-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes core-subscribe-modal-pop {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@media (max-width: 600px) {
+  .core-subscribe-modal {
+    max-width: none;
+    padding: 1.75rem 1.5rem 1.5rem;
+  }
+}
+
+/* ── Cookie Consent ──────────────────────────────────────── */
+.core-consent-banner {
+  position: fixed;
+  z-index: 300;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  background: var(--brand-background, #fff);
+  border-top: 1px solid var(--brand-border, rgba(0, 0, 0, 0.1));
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
+  font-family: var(--font-body, system-ui, sans-serif);
+  color: var(--brand-text, #1a1a1a);
+}
+
+.core-consent-banner__text {
+  flex: 1 1 20rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  opacity: 0.85;
+}
+
+.core-consent-banner__link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.core-consent-banner__actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.core-consent-banner__decline,
+.core-consent-banner__accept {
+  padding: 0.55rem 1.1rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: var(--shape-radius, 8px);
+  border: 1px solid transparent;
+  transition: opacity 0.15s ease;
+}
+
+.core-consent-banner__decline {
+  background: transparent;
+  border-color: var(--brand-border, rgba(0, 0, 0, 0.18));
+  color: inherit;
+}
+
+.core-consent-banner__accept {
+  background: var(--brand-primary, #00a884);
+  color: var(--brand-on-primary, #fff);
+}
+
+.core-consent-banner__decline:hover,
+.core-consent-banner__accept:hover { opacity: 0.85; }
+
+.core-consent-settings-link {
+  position: fixed;
+  z-index: 150;
+  left: 0.75rem;
+  bottom: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font: inherit;
+  font-size: 0.6875rem;
+  color: var(--brand-text-muted, #888);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  text-decoration: underline;
+}
+
+.core-consent-settings-link:hover { opacity: 1; }
+
+@media (max-width: 600px) {
+  .core-consent-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .core-consent-banner__actions {
+    justify-content: flex-end;
+  }
+}
+
+/* ── Unsubscribe page ────────────────────────────────────── */
+.core-unsub {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: 3rem 1.25rem;
+  font-family: var(--font-body, system-ui, sans-serif);
+  color: var(--brand-text, #1a1a1a);
+}
+
+.core-unsub__card {
+  width: 100%;
+  max-width: 30rem;
+  text-align: center;
+  padding: 2.25rem 1.75rem;
+  background: var(--brand-background, #fff);
+  border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.1));
+  border-radius: calc(var(--shape-radius, 8px) * 1.5);
+}
+
+.core-unsub__title {
+  font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
+  font-size: 1.375rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+}
+
+.core-unsub__body {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  opacity: 0.85;
+  margin: 0 0 1.5rem;
+}
+
+.core-unsub__button {
+  display: inline-block;
+  padding: 0.7rem 1.5rem;
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--brand-on-primary, #fff);
+  background: var(--brand-primary, #00a884);
+  border: 1px solid transparent;
+  border-radius: var(--shape-radius, 8px);
+  transition: opacity 0.2s ease;
+}
+
+.core-unsub__button:hover:not(:disabled) { opacity: 0.88; }
+.core-unsub__button:disabled { opacity: 0.6; cursor: default; }
+
+.core-unsub__muted {
+  margin: 0.9rem 0 0;
+  font-size: 0.8125rem;
+  opacity: 0.65;
+}
+
+.core-unsub__link {
+  display: inline-block;
+  margin-top: 1.35rem;
+  font-size: 0.875rem;
+  color: inherit;
+  opacity: 0.7;
+  text-decoration: underline;
+}
+
+.core-unsub__link:hover { opacity: 1; }