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.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
:root[data-style="geocities"] {
  /* Square corners everywhere App.css uses the radius scale. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;

  --color-text: light-dark(#2a1a4e, #f2f0ff);
  --color-text-secondary: light-dark(#aa00aa, #7fdbff);
  --color-text-muted: light-dark(#7a6a9a, #a99ad6);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-bg: light-dark(#fff0f8, #0a0a2e);
  --color-surface: light-dark(#ffffff, #1b1b46);
  --color-border: light-dark(#d000d0, #00ffff);
  --color-border-subtle: light-dark(rgba(208, 0, 208, 0.25), rgba(0, 255, 255, 0.28));
  --color-accent: light-dark(#d000d0, #ff00ff);
  --color-accent-hover: light-dark(#a000a0, #ff5cff);
  --color-link: light-dark(#0000ee, #00ffff);
  --color-link-hover: light-dark(#551a8b, #ffff00);
  --color-danger: light-dark(#cc0033, #ff3860);
  --color-danger-bg: light-dark(#ffe0e8, #3a0a1a);
  --color-danger-hover: light-dark(#990022, #ff6b8a);
  --color-success: light-dark(#008800, #39ff14);
  --color-success-bg: light-dark(#e0ffe0, #0a2e0a);
  --color-success-hover: light-dark(#006600, #6fff52);
  --color-overlay: light-dark(rgba(40, 0, 40, 0.4), rgba(8, 0, 28, 0.72));
  --color-header-user-bg: light-dark(rgba(208, 0, 208, 0.08), rgba(0, 255, 255, 0.1));
  --color-header-user-bg-hover: light-dark(rgba(208, 0, 208, 0.16), rgba(0, 255, 255, 0.2));
  --color-option-bg: light-dark(#fff0fb, #14143a);
  --color-option-border: light-dark(#d000d0, #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;
}

/* Non-colour values can't go through light-dark(), so the light variants
   of these still need their own scheme selectors. */
@media (prefers-color-scheme: light) {
  :root[data-style="geocities"]:not([data-color-scheme]) {
    --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;
  }
}

:root[data-style="geocities"][data-color-scheme="light"] {
  --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;
  /* Fat icons, soaked in the accent. */
  --nav-icon-stroke: 2.25;
  --nav-icon-tint-strength: 55%;
}

/* ── 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"] .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,
[data-style="geocities"] .chat-fab {
  --fab-radius: 0;
}

[data-style="geocities"] button:not(.dump-fab, .chat-fab) {
  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"] .search-bar-btn {
  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);
}

/* Turn the tint up and give it hard diagonal bands — a flat wash reads as an
   unstyled gap in a theme built on saturation. */
[data-style="geocities"] {
  --thumb-tint-strength: 55%;
}

[data-style="geocities"] .thumb-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0 8px,
    rgba(0, 0, 0, 0.14) 8px 16px
  );
}

/* 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"] .text-editor-emoji-btn,
[data-style="geocities"] .emoji-picker-float [frimousse-skin-tone-selector],
[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"] .user-menu-item,
[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: 3px ridge var(--color-border);
}

[data-style="geocities"] .visibility-toggle button {
  /* Zero the width (not just the style): the generic `button:active` rule flips
     border-style to `inset`, and a `none` border keeps its `medium` width — so
     on press a 3px border would reappear inside the toggle's own frame. */
  border: 0;
}

/* ── 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"] .page-card,
[data-style="geocities"] .user-result-item,
[data-style="geocities"] .journal-card {
  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: 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);
}

/* A pointed-at headline over a photo lights up like a marquee: neon yellow
   on a black plate, ringed and glowing in the accent. */
[data-style="geocities"] .journal-card--image .journal-card-title {
  --journal-title-hover-bg: rgb(0 0 0 / 0.82);
  --journal-title-hover-color: #ffff00;
  --journal-title-hover-shadow: 0 0 0 2px var(--color-accent),
    0 0 10px var(--color-accent);
  --journal-title-hover-text-shadow: 0 0 6px rgb(255 255 0 / 0.6);
}

/* The divider GIF, minus the GIF: the rainbow the header ends on, run again
   between sub-blocks with a sparkle sitting in the middle of it. */
[data-style="geocities"] .journal-break {
  --journal-break-space: 1.5rem;
  --journal-break-rule: 4px solid;
  --journal-break-ornament: "✦ ✦ ✦";
  border-image: var(--geo-rainbow) 1;
}

[data-style="geocities"] .journal-break::before {
  color: var(--color-accent);
  letter-spacing: 0.15em;
}

/* ── 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: 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);
}

/* ── 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: 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-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);
}

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

/* Queue UI: square off the artwork and the stream progress bar. */

[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-style: dashed;
}

/* ── Pills / badges — squared, and the unread bits blink ─────────── */

/* 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 {
  animation: geo-blink 1.1s step-start infinite;
}

[data-style="geocities"] .notif-dot,
[data-style="geocities"] .unread-dot {
  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: 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;
}

/* Circles App.css draws with a literal 50% (not the radius scale). */
[data-style="geocities"] .notif-icon,
[data-style="geocities"] .notif-dot {
  border-radius: 0;
}