gerbeur/src/themes/geocities.css

/* ══════════════════════════════════════════════════════════════════════
   GeoCities / NeoCities theme — turn-of-the-millennium personal-homepage
   maximalism: tiled starfield wallpaper, Comic Sans, ridged 3D boxes,
   clashing neon accents, rainbow dividers, blinking badges.

   Dark scheme  → NeoCities "neon on black" revival.
   Light scheme → classic GeoCities pastel-on-wallpaper.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Dark variant (default for this theme) ────────────────────────── */
:root[data-style="geocities"] {
  --color-text: #f2f0ff;
  --color-text-secondary: #7fdbff; /* cyan */
  --color-text-muted: #a99ad6; /* faded violet */
  --color-on-accent: #000000; /* black on hot magenta */

  --color-bg: #0a0a2e; /* deep indigo night */
  --color-surface: #1b1b46; /* raised panel */

  --color-border: #00ffff; /* neon cyan */
  --color-border-subtle: rgba(0, 255, 255, 0.28);

  --color-accent: #ff00ff; /* hot magenta */
  --color-accent-hover: #ff5cff;

  --color-link: #00ffff; /* classic bright link */
  --color-link-hover: #ffff00; /* yellow on hover, very 1999 */

  --color-danger: #ff3860;
  --color-danger-bg: #3a0a1a;
  --color-danger-hover: #ff6b8a;

  --color-success: #39ff14; /* neon green */
  --color-success-bg: #0a2e0a;
  --color-success-hover: #6fff52;

  --color-overlay: rgba(8, 0, 28, 0.72);
  --color-header-user-bg: rgba(0, 255, 255, 0.1);
  --color-header-user-bg-hover: rgba(0, 255, 255, 0.2);

  --color-option-bg: #14143a;
  --color-option-border: #00ffff;

  /* Theme-local helpers */
  --geo-rainbow: linear-gradient(
    90deg,
    #ff004d,
    #ff8a00,
    #ffee00,
    #00d11a,
    #00b3ff,
    #b300ff
  );
  /* Starfield: white pinpricks plus the odd coloured star */
  --geo-pattern:
    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
    radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
    radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
  --geo-pattern-size: 200px 200px;
}

/* ── Light via system preference (auto color-scheme) ──────────────── */
@media (prefers-color-scheme: light) {
  :root[data-style="geocities"]:not([data-color-scheme]) {
    --color-text: #2a1a4e;
    --color-text-secondary: #aa00aa;
    --color-text-muted: #7a6a9a;
    --color-on-accent: #ffffff;

    --color-bg: #fff0f8; /* pale lavender wallpaper */
    --color-surface: #ffffff;

    --color-border: #d000d0;
    --color-border-subtle: rgba(208, 0, 208, 0.25);

    --color-accent: #d000d0;
    --color-accent-hover: #a000a0;

    --color-link: #0000ee; /* unvisited blue */
    --color-link-hover: #551a8b; /* visited purple */

    --color-danger: #cc0033;
    --color-danger-bg: #ffe0e8;
    --color-danger-hover: #990022;

    --color-success: #008800;
    --color-success-bg: #e0ffe0;
    --color-success-hover: #006600;

    --color-overlay: rgba(40, 0, 40, 0.4);
    --color-header-user-bg: rgba(208, 0, 208, 0.08);
    --color-header-user-bg-hover: rgba(208, 0, 208, 0.16);

    --color-option-bg: #fff0fb;
    --color-option-border: #d000d0;

    --geo-rainbow: linear-gradient(
      90deg,
      #ff004d,
      #ff8a00,
      #ffcc00,
      #00aa1a,
      #0077dd,
      #8800cc
    );
    --geo-pattern:
      radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
      radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
    --geo-pattern-size: 22px 22px, 22px 22px;
  }
}

/* ── Manual dark override ─────────────────────────────────────────── */
:root[data-style="geocities"][data-color-scheme="dark"] {
  color-scheme: dark;
  --color-text: #f2f0ff;
  --color-text-secondary: #7fdbff;
  --color-text-muted: #a99ad6;
  --color-on-accent: #000000;
  --color-bg: #0a0a2e;
  --color-surface: #1b1b46;
  --color-border: #00ffff;
  --color-border-subtle: rgba(0, 255, 255, 0.28);
  --color-accent: #ff00ff;
  --color-accent-hover: #ff5cff;
  --color-link: #00ffff;
  --color-link-hover: #ffff00;
  --color-danger: #ff3860;
  --color-danger-bg: #3a0a1a;
  --color-danger-hover: #ff6b8a;
  --color-success: #39ff14;
  --color-success-bg: #0a2e0a;
  --color-success-hover: #6fff52;
  --color-overlay: rgba(8, 0, 28, 0.72);
  --color-header-user-bg: rgba(0, 255, 255, 0.1);
  --color-header-user-bg-hover: rgba(0, 255, 255, 0.2);
  --color-option-bg: #14143a;
  --color-option-border: #00ffff;
  --geo-rainbow: linear-gradient(
    90deg,
    #ff004d,
    #ff8a00,
    #ffee00,
    #00d11a,
    #00b3ff,
    #b300ff
  );
  --geo-pattern:
    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 80px 150px, #00ffff, transparent),
    radial-gradient(1.5px 1.5px at 170px 40px, #ff00ff, transparent),
    radial-gradient(1px 1px at 50px 190px, #ffee00, transparent);
  --geo-pattern-size: 200px 200px;
}

/* ── Manual light override ────────────────────────────────────────── */
:root[data-style="geocities"][data-color-scheme="light"] {
  color-scheme: light;
  --color-text: #2a1a4e;
  --color-text-secondary: #aa00aa;
  --color-text-muted: #7a6a9a;
  --color-on-accent: #ffffff;
  --color-bg: #fff0f8;
  --color-surface: #ffffff;
  --color-border: #d000d0;
  --color-border-subtle: rgba(208, 0, 208, 0.25);
  --color-accent: #d000d0;
  --color-accent-hover: #a000a0;
  --color-link: #0000ee;
  --color-link-hover: #551a8b;
  --color-danger: #cc0033;
  --color-danger-bg: #ffe0e8;
  --color-danger-hover: #990022;
  --color-success: #008800;
  --color-success-bg: #e0ffe0;
  --color-success-hover: #006600;
  --color-overlay: rgba(40, 0, 40, 0.4);
  --color-header-user-bg: rgba(208, 0, 208, 0.08);
  --color-header-user-bg-hover: rgba(208, 0, 208, 0.16);
  --color-option-bg: #fff0fb;
  --color-option-border: #d000d0;
  --geo-rainbow: linear-gradient(
    90deg,
    #ff004d,
    #ff8a00,
    #ffcc00,
    #00aa1a,
    #0077dd,
    #8800cc
  );
  --geo-pattern:
    radial-gradient(rgba(208, 0, 208, 0.16) 1.5px, transparent 1.5px),
    radial-gradient(rgba(0, 179, 255, 0.14) 1.5px, transparent 1.5px);
  --geo-pattern-size: 22px 22px, 22px 22px;
}

/* ══════════════════════════════════════════════════════════════════════
   Structural overrides
   ══════════════════════════════════════════════════════════════════════ */

/* ── Typography — the one true homepage font ──────────────────────── */
[data-style="geocities"] {
  --font-body: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue",
    "Marker Felt", cursive;
  font-family: var(--font-body);
  font-weight: 400;
}

/* ── Tiled wallpaper, fixed so content scrolls over it ────────────── */
[data-style="geocities"] body {
  background-color: var(--color-bg);
  background-image: var(--geo-pattern);
  background-size: var(--geo-pattern-size);
  background-attachment: fixed;
}

/* ── Loud headings with a soft glow ──────────────────────────────── */
[data-style="geocities"] h1,
[data-style="geocities"] .app-header-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* ── Links — always underlined, bold ─────────────────────────────── */
[data-style="geocities"] a,
[data-style="geocities"] .md a {
  text-decoration: underline;
  font-weight: 700;
}

/* …except navigation chrome and avatar links, which aren't prose. */
[data-style="geocities"] a:has(.avatar-img),
[data-style="geocities"] a:has(.avatar-initials),
[data-style="geocities"] .index-presence-avatar,
[data-style="geocities"] .app-header-brand,
[data-style="geocities"] .app-header-user,
[data-style="geocities"] .nav-search-btn,
[data-style="geocities"] .user-menu-item,
[data-style="geocities"] .user-list-popover-item {
  text-decoration: none;
}

/* ── Blink + marquee-ish keyframes ───────────────────────────────── */
@keyframes geo-blink {
  50% {
    opacity: 0;
  }
}

/* ── Buttons — chunky Win95 outset bevel, press = inset ──────────── */
/* `.dump-fab` is exempt from the generic button chrome — it keeps its own
   shape, glow and animations — but this squared-off retro theme squares it. */
[data-style="geocities"] .dump-fab {
  --fab-radius: 0;
}

[data-style="geocities"] button:not(.dump-fab) {
  border-radius: 0;
  border: 3px outset var(--color-border);
  box-shadow: none;
  font-weight: 700;
  transition: border-color 0.1s, background 0.12s;
}

[data-style="geocities"] button:active:not(:disabled) {
  border-style: inset;
}

[data-style="geocities"] .btn-primary,
[data-style="geocities"] .btn-secondary,
[data-style="geocities"] .btn-danger,
[data-style="geocities"] .btn-border,
[data-style="geocities"] .follow-btn,
[data-style="geocities"] .vote-btn,
[data-style="geocities"] .feed-sort-btn,
[data-style="geocities"] .invite-btn,
[data-style="geocities"] .btn-add-playlist,
[data-style="geocities"] .load-more-btn,
[data-style="geocities"] .comment-submit-btn,
[data-style="geocities"] .comment-cancel-btn,
[data-style="geocities"] .search-bar-btn {
  border-radius: 0;
  border: 3px outset var(--color-border);
  box-shadow: none;
}

/* The shared .vote-btn declares `background: transparent`, which leaves the
   chunky outset bevel see-through against the card. Give the resting state a
   solid raised-panel fill; the voted (--active) state keeps its accent
   background, so scope this to non-active buttons. */
[data-style="geocities"] .vote-btn:not(.vote-btn--active) {
  background: var(--color-surface);
}

/* Ghost / icon-only buttons stay flat */
[data-style="geocities"] .modal-close-btn,
[data-style="geocities"] .playlist-remove-btn,
[data-style="geocities"] .playlist-card-delete-btn,
[data-style="geocities"] .emoji-picker-float [frimousse-emoji],
[data-style="geocities"] .emoji-picker-close-btn,
[data-style="geocities"] .btn--ghost,
[data-style="geocities"] .new-item-toggle,
[data-style="geocities"] .audio-player-btn,
[data-style="geocities"] .audio-player-vol-btn,
[data-style="geocities"] .rich-content-thumbnail-btn,
[data-style="geocities"] .user-menu-trigger,
[data-style="geocities"] .nav-search-btn,
[data-style="geocities"] .auth-link-btn,
[data-style="geocities"] .form-cancel,
[data-style="geocities"] .form-label-action,
[data-style="geocities"] .category-editor-btn {
  border: none !important;
  box-shadow: none !important;
}

/* ── Segmented controls ──────────────────────────────────────────── */
[data-style="geocities"] .visibility-toggle {
  border-radius: 0;
  border: 3px ridge var(--color-border);
}

[data-style="geocities"] .visibility-toggle button {
  border-radius: 0;
  border: none;
}

/* ── Cards & panels — ridged "table border" with a soft neon halo ─── */
[data-style="geocities"] .dump-card,
[data-style="geocities"] .playlist-card,
[data-style="geocities"] .dump-post-header,
[data-style="geocities"] .auth-card,
[data-style="geocities"] .notification-item,
[data-style="geocities"] .user-result-item,
[data-style="geocities"] .journal-card {
  border-radius: 0;
  border: 3px ridge var(--color-border);
  box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
}

[data-style="geocities"] .dump-card-comment {
  padding-bottom: .1rem;
}

/* Comments nest deeply, so the full frame piled up. Keep the squared retro
   edge but lighten it: thin flat border, just a whisper of the same halo. */
[data-style="geocities"] .comment-node-inner,
[data-style="geocities"] .comment-top-form {
  border-radius: 0;
  border: 2px solid var(--color-border-subtle);
  box-shadow: 0 0 6px var(--color-border-subtle);
}

[data-style="geocities"] .dump-card:hover,
[data-style="geocities"] .playlist-card:hover,
[data-style="geocities"] .user-result-item:hover,
[data-style="geocities"] .journal-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 75%, transparent);
}

/* ── App header — rainbow divider ────────────────────────────────── */
[data-style="geocities"] .app-header,
[data-style="geocities"] .header-search-below {
  border-bottom: 4px solid;
  border-image: var(--geo-rainbow) 1;
}

[data-style="geocities"] .app-header-user {
  border-radius: 0;
  border: 3px outset var(--color-border);
}

/* ── Rainbow dividers — on each element's real edge ──────────────── */
[data-style="geocities"] .profile-section > h2,
[data-style="geocities"] .profile-section-header,
[data-style="geocities"] .profile-tabs-scroller {
  border-bottom: 3px solid;
  border-image: var(--geo-rainbow) 1;
}

[data-style="geocities"] .comment-section,
[data-style="geocities"] .related-section {
  border-top: 3px solid;
  border-image: var(--geo-rainbow) 1;
}

[data-style="geocities"] .comment-section-title,
[data-style="geocities"] .related-section-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Inputs / textareas — sunken inset field ─────────────────────── */
[data-style="geocities"]
  input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
    [type="radio"]
  ),
[data-style="geocities"] textarea {
  border-radius: 0 !important;
  border: 2px inset var(--color-border) !important;
  background-color: var(--color-bg);
}

[data-style="geocities"] .search-bar-input {
  border-radius: 0;
}

/* ── Modals — heavy ridged frame ─────────────────────────────────── */
[data-style="geocities"] .modal-card,
[data-style="geocities"] .confirm-modal,
[data-style="geocities"] .user-menu-dropdown,
[data-style="geocities"] .user-list-popover,
[data-style="geocities"] .mention-dropdown,
[data-style="geocities"] .emoji-picker-float {
  border-radius: 0;
  border: 3px ridge var(--color-border);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
}

[data-style="geocities"] .modal-header {
  border-bottom: 2px solid var(--color-border-subtle);
}

/* ── Avatars — framed snapshots ──────────────────────────────────── */
[data-style="geocities"] .avatar-img {
  border: 2px ridge var(--color-border);
}

/* ── Rich content cards — keep brand borders, add neon hover glow ── */
[data-style="geocities"] .rich-content-card {
  border-radius: 0;
  border-width: 3px;
  border-style: ridge;
  box-shadow: 0 0 9px color-mix(in srgb, var(--color-border) 38%, transparent);
}

[data-style="geocities"] .rich-content-card:has(.rich-content-body:hover),
[data-style="geocities"]
  .rich-content-card--youtube:has(.rich-content-body:hover),
[data-style="geocities"]
  .rich-content-card--bandcamp:has(.rich-content-body:hover),
[data-style="geocities"]
  .rich-content-card--soundcloud:has(.rich-content-body:hover) {
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
}

[data-style="geocities"] .rich-content-badge {
  border-radius: 0;
}

/* ── Global player — neon console ────────────────────────────────── */
[data-style="geocities"] .global-player {
  border-radius: 0;
  border: 3px ridge var(--color-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

[data-style="geocities"] .global-player-iframe-wrap,
[data-style="geocities"] .global-player-media-wrap,
[data-style="geocities"] .global-player .audio-player,
[data-style="geocities"] .global-player .video-player {
  border-radius: 0;
}

[data-style="geocities"] .global-player .audio-player-btn {
  color: var(--color-on-accent);
}

[data-style="geocities"] .global-player .audio-player-vol-btn,
[data-style="geocities"] .global-player .btn--ghost {
  color: var(--color-text);
}

/* ── File drop zone ──────────────────────────────────────────────── */
[data-style="geocities"] .fdz {
  border-radius: 0;
  border-style: dashed;
}

/* ── Pills / badges — squared, and the unread bits blink ─────────── */
[data-style="geocities"] .notifications-unread-pill,
[data-style="geocities"] .playlist-badge,
[data-style="geocities"] .dump-card-private-badge,
[data-style="geocities"] .notif-icon,
[data-style="geocities"] .md code,
[data-style="geocities"] .md pre,
[data-style="geocities"] .error-card,
[data-style="geocities"] .feed-tab,
[data-style="geocities"] .category-chip,
[data-style="geocities"] .category-editor,
[data-style="geocities"] .category-editor-btn,
[data-style="geocities"] .dump-card-category-chip,
[data-style="geocities"] .profile-role-chip {
  border-radius: 0;
}

/* The editor is one squared box; flatten its fields (geocities otherwise
   forces a sunken inset border on every input) and drop the soft glow. */
[data-style="geocities"] .category-editor {
  border: 2px solid var(--color-accent);
  box-shadow: none;
}

[data-style="geocities"] .category-editor-input {
  border: none !important;
  background: transparent !important;
}

/* Chips are tags, not raised Win95 buttons — keep a clean flat border
   instead of the generic 3px outset bevel. */
[data-style="geocities"] .category-chip {
  border: 2px solid var(--color-border);
  box-shadow: none;
}

[data-style="geocities"] .notification-badge {
  border-radius: 0;
  animation: geo-blink 1.1s step-start infinite;
}

[data-style="geocities"] .notif-dot,
[data-style="geocities"] .unread-dot {
  border-radius: 0;
  animation: geo-blink 1.3s step-start infinite;
}

/* ── Floating "new" affordance / FAB-style accents ───────────────── */
[data-style="geocities"] .fdz__upload-icon {
  opacity: 0.7;
}

/* ── Casual web-1.0 voice: lowercase everything (code excepted) ──── */
[data-style="geocities"],
[data-style="geocities"] * {
  text-transform: lowercase;
}
[data-style="geocities"] input,
[data-style="geocities"] textarea,
[data-style="geocities"] .md code,
[data-style="geocities"] .md pre,
[data-style="geocities"] .invite-url {
  text-transform: none;
}

/* ── Category switcher dropdown ──────────────────────────────────── */
/* Same ridged frame as the other popovers; option buttons flattened so the
   chunky Win95 button bevel doesn't apply to menu rows. (The trigger reuses
   .feed-sort-btn and keeps the bevel, matching the sort tabs.) */
[data-style="geocities"] .category-switcher-menu {
  border-radius: 0;
  border: 3px ridge var(--color-border);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-border) 45%, transparent);
}
[data-style="geocities"] .category-switcher-option {
  border: none !important;
  box-shadow: none !important;
}