/* common-lisp.net skins: every file of clnet/static/skins/, as one. */

/* ---- pumpkin ---- */
/*
 * Copyright 2026, Common-Lisp.Net maintainers.  AGPL-3.0-or-later; see LICENSE
 * at the root of this repository.
 *
 * Pumpkin: the last week of October.  Candlelight orange on parchment,
 * or on a night sky with a little violet in it.  See
 * ../../source/skins.lisp for how skins work.
 */

:root[data-skin="pumpkin"] {
  --cl-ground: #fff7ec;
  --cl-band: #ffebd3;
  --cl-surface: #fffbf5;
  --cl-ink: #2b1407;
  --cl-body: #4a2a14;
  --cl-muted: #7a5236;
  --cl-rule: #f0d6b8;
  --cl-rule-strong: #e0b98d;
  --cl-accent: #b93a06;
  --cl-accent-strong: #8f2c04;
  --cl-accent-fill: #d9480f;
  --cl-accent-fill-hover: #b93a06;
  --cl-accent-soft: #ffe0c0;
  --cl-on-accent: #fff;
  --cl-code: #1a1020;
  --cl-code-ink: #ffdcb8;
  --cl-code-dim: #b08c9e;
}

:root[data-skin="pumpkin"][data-scheme="dark"] {
  --cl-ground: #140c18;
  --cl-band: #1d1123;
  --cl-surface: #24152b;
  --cl-ink: #fbe9d7;
  --cl-body: #ead0b8;
  --cl-muted: #b9977f;
  --cl-rule: #3a2441;
  --cl-rule-strong: #503258;
  --cl-accent: #ff9a3c;
  --cl-accent-strong: #ffbb7a;
  --cl-accent-fill: #ff7a00;
  --cl-accent-fill-hover: #ff9433;
  --cl-accent-soft: #3d2014;
  --cl-on-accent: #1a0d05;
  --cl-code: #0d0710;
  --cl-code-ink: #ffdcb8;
  --cl-code-dim: #a77f9c;
}

:root[data-skin="pumpkin"] .cl-brand::after {
  content: " 🎃";
}
:root[data-skin="pumpkin"] ::selection {
  background: rgb(157 107 255 / 0.35);
}
:root[data-skin="pumpkin"][data-scheme="dark"] .bg-band {
  background-image: radial-gradient(
    ellipse at 85% 0%,
    rgb(255 122 0 / 0.12),
    transparent 60%
  );
}
:root[data-skin="pumpkin"] .cl-footer::after {
  content: "🦇 🦇 🦇";
  display: block;
  padding-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 1.2em;
  opacity: 0.5;
}


/* ---- hacker ---- */
/*
 * Copyright 2026, Common-Lisp.Net maintainers.  AGPL-3.0-or-later; see LICENSE
 * at the root of this repository.
 *
 * Hacker: the weekend skin.  In the light theme a green-bar printout
 * fresh off the line printer, tractor-feed holes and all; in the dark
 * one a phosphor terminal, scan lines and a blinking cursor.  Everything
 * in a monospaced face, square corners, dashed rules, an odometer for
 * the hit counter.  See ../../source/skins.lisp for how skins work.
 */

/* ---- the roles: the printout ---- */

:root[data-skin="hacker"] {
  --cl-font-sans: ui-monospace, "Cascadia Mono", "JetBrains Mono", "DejaVu Sans Mono",
    SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --cl-font-mono: var(--cl-font-sans);
  --cl-ground: #f7faf3;
  --cl-band: #e4f1dc;
  --cl-surface: #fbfdf8;
  --cl-ink: #10200b;
  --cl-body: #22331c;
  --cl-muted: #4a6042;
  --cl-rule: #bcd6ae;
  --cl-rule-strong: #93b882;
  --cl-accent: #1b6610;
  --cl-accent-strong: #114a08;
  --cl-accent-fill: #1b6610;
  --cl-accent-fill-hover: #14540b;
  --cl-accent-soft: #d6ecca;
  --cl-on-accent: #effde6;
  --cl-ok: #1b6610;
  --cl-ok-soft: #d6ecca;
  --cl-warn: #7a4c00;
  --cl-warn-soft: #f6e7c4;
  --cl-code: #050905;
  --cl-code-ink: #8dff7a;
  --cl-code-dim: #4fae45;
}

/* ---- the roles: the terminal ---- */

:root[data-skin="hacker"][data-scheme="dark"] {
  --cl-ground: #050805;
  --cl-band: #081008;
  --cl-surface: #0a140a;
  --cl-ink: #b8ff9f;
  --cl-body: #86e57a;
  --cl-muted: #5fae55;
  --cl-rule: #1b3a18;
  --cl-rule-strong: #2c5a27;
  --cl-accent: #ffb000;
  --cl-accent-strong: #ffcc4d;
  --cl-accent-fill: #ffb000;
  --cl-accent-fill-hover: #ffc233;
  --cl-accent-soft: #2a2205;
  --cl-on-accent: #050805;
  --cl-ok: #7dff6a;
  --cl-ok-soft: #0f2a0d;
  --cl-warn: #ffb000;
  --cl-warn-soft: #2a2205;
  --cl-code: #000;
  --cl-code-ink: #9dff8a;
  --cl-code-dim: #4f9a47;
}

/* ---- both ---- */

:root[data-skin="hacker"] * {
  border-radius: 0 !important;
  box-shadow: none !important;
}
:root[data-skin="hacker"] .border-rule,
:root[data-skin="hacker"] .border-rule-strong {
  border-style: dashed;
}
:root[data-skin="hacker"] .cl-brand::before {
  content: "(";
  color: var(--cl-accent);
}
:root[data-skin="hacker"] .cl-brand::after {
  content: ")";
  color: var(--cl-accent);
}
:root[data-skin="hacker"] .cl-eyebrow::before {
  content: ";; ";
  opacity: 0.7;
}
:root[data-skin="hacker"] main h1::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--cl-accent);
  animation: cl-hacker-blink 1.1s steps(1) infinite;
}
@keyframes cl-hacker-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="hacker"] main h1::after {
    animation: none;
  }
}

/* the hit counter: an odometer, as on every good homepage of 1997 */
:root[data-skin="hacker"] .cl-visits .cl-count {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0 0.4em;
  border: 1px solid #2c5a27;
  background: #000;
  color: #7dff6a;
  letter-spacing: 0.15em;
  font-family: var(--cl-font-mono);
}

/* ---- the printout: green bars, and the tractor feed on a wide screen ---- */

:root[data-skin="hacker"]:not([data-scheme="dark"]) body {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 4.8em,
    rgb(200 228 186 / 0.55) 4.8em 9.6em
  );
}
@media (min-width: 88rem) {
  :root[data-skin="hacker"]:not([data-scheme="dark"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle, #dfe6da 0.3rem, #c3cfbc 0.34rem, transparent 0.38rem)
        left 0.5rem top 0 / 1.5rem 1.5rem repeat-y,
      radial-gradient(circle, #dfe6da 0.3rem, #c3cfbc 0.34rem, transparent 0.38rem)
        right 0.5rem top 0 / 1.5rem 1.5rem repeat-y;
  }
}

/* ---- the terminal: glow, scan lines, a darkened edge ---- */

:root[data-skin="hacker"][data-scheme="dark"] h1,
:root[data-skin="hacker"][data-scheme="dark"] h2,
:root[data-skin="hacker"][data-scheme="dark"] h3,
:root[data-skin="hacker"][data-scheme="dark"] .cl-brand {
  text-shadow: 0 0 6px rgb(125 255 106 / 0.45);
}
:root[data-skin="hacker"][data-scheme="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / 0.5) 100%);
}
:root[data-skin="hacker"][data-scheme="dark"] .cl-logo {
  filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(3);
}


/* ---- genera ---- */
/*
 * Copyright 2026, Common-Lisp.Net maintainers.  AGPL-3.0-or-later; see LICENSE
 * at the root of this repository.
 *
 * Genera: the site as a Symbolics Lisp Machine would have drawn it.
 * Black on white (reverse video in the dark theme), square boxes,
 * inverse video under the mouse, and the mouse documentation line along
 * the bottom of the screen.  See ../../source/skins.lisp for how skins
 * work.
 *
 * The type is Genera's own: CPTFONT, the Lisp Machine's default screen
 * font, and its bold, CPTFONTB, as recovered from a Genera 8.5 world by
 * https://github.com/htayj/genera-fonts (see that project's NOTICE.md),
 * made into web fonts pixel for pixel by ../../tools/genera-font/.  A
 * font pixel is 1/12 em, so text is set in whole multiples of 12px
 * pixels (18px is 1.5 pixels to the pixel, crisp on any high-density
 * screen).  A browser fetches the fonts only while this skin is worn.
 */

@font-face {
  font-family: "Genera CPTFONT";
  src: url("clnet-assets/skins/genera/cptfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Genera CPTFONT";
  src: url("clnet-assets/skins/genera/cptfontb.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root[data-skin="genera"] {
  --cl-font-sans: "Genera CPTFONT", ui-monospace, monospace;
  --cl-font-mono: "Genera CPTFONT", ui-monospace, monospace;
  --text-xs: 12px;
  --text-sm: 18px;
  --text-base: 18px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --cl-ground: #fff;
  --cl-band: #fff;
  --cl-surface: #fff;
  --cl-ink: #000;
  --cl-body: #000;
  --cl-muted: #3a3a3a;
  --cl-rule: #000;
  --cl-rule-strong: #000;
  --cl-accent: #000;
  --cl-accent-strong: #000;
  --cl-accent-fill: #000;
  --cl-accent-fill-hover: #333;
  --cl-accent-soft: #e6e6e6;
  --cl-on-accent: #fff;
  --cl-ok: #000;
  --cl-ok-soft: #e6e6e6;
  --cl-warn: #000;
  --cl-warn-soft: #e6e6e6;
  --cl-code: #000;
  --cl-code-ink: #fff;
  --cl-code-dim: #b5b5b5;
}

:root[data-skin="genera"][data-scheme="dark"] {
  --cl-ground: #000;
  --cl-band: #000;
  --cl-surface: #000;
  --cl-ink: #fff;
  --cl-body: #fff;
  --cl-muted: #c8c8c8;
  --cl-rule: #fff;
  --cl-rule-strong: #fff;
  --cl-accent: #fff;
  --cl-accent-strong: #fff;
  --cl-accent-fill: #fff;
  --cl-accent-fill-hover: #ccc;
  --cl-accent-soft: #2a2a2a;
  --cl-on-accent: #000;
  --cl-ok: #fff;
  --cl-ok-soft: #2a2a2a;
  --cl-warn: #fff;
  --cl-warn-soft: #2a2a2a;
}

:root[data-skin="genera"] * {
  border-radius: 0 !important;
  box-shadow: none !important;
  /* a pixel font keeps its own spacing: tracking would split pixels */
  letter-spacing: 0 !important;
}

/* the sizes the pages give in rem rather than by name, put on the grid */
:root[data-skin="genera"] body,
:root[data-skin="genera"] .cl-prose,
:root[data-skin="genera"] .text-\[0\.95rem\],
:root[data-skin="genera"] .text-\[0\.82rem\] {
  font-size: 18px;
}
:root[data-skin="genera"] h1 {
  font-size: 36px !important;
  line-height: 1.17 !important;
}
/* the navigation bar at the screen font's own size, as a Lisp Machine
   drew its menus, from a small laptop's width up (the whole bar is shown
   from 72rem): at 18px it would not fit */
@media (min-width: 64rem) {
  :root[data-skin="genera"] header nav,
  :root[data-skin="genera"] header nav * {
    font-size: 12px !important;
  }
  /* the screen font is wider than the standard face: closer items */
  :root[data-skin="genera"] header nav .px-2\.5 {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
}

/* the screen font is wide: on a phone a long heading word
   ("Implementations", "programmable") is broken rather than pushing
   the page sideways */
:root[data-skin="genera"] :is(h1, h2, h3) {
  overflow-wrap: anywhere;
}

/* square pixels drawn as squares where the browser allows it */
:root[data-skin="genera"] body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}
:root[data-skin="genera"] .cl-code,
:root[data-skin="genera"] .cl-prose pre {
  outline: 1px solid var(--cl-rule);
}

/* inverse video under the mouse */
:root[data-skin="genera"] .cl-menu-panel a:hover,
:root[data-skin="genera"] .cl-menu-panel button:hover,
:root[data-skin="genera"] .cl-prose a:hover,
:root[data-skin="genera"] footer a:hover {
  background: var(--cl-ink);
  color: var(--cl-ground);
  text-decoration: none;
}

/* the mouse documentation line */
:root[data-skin="genera"] body {
  padding-bottom: 1.7rem;
}
:root[data-skin="genera"] body::after {
  content: "Mouse-L: Follow the link.  Mouse-M: Describe it.  Mouse-R: Menu of operations.  To see other commands, press Shift, Control, Meta-Shift, or Super.";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 0.2rem 0.75rem;
  overflow: hidden;
  background: var(--cl-ink);
  color: var(--cl-ground);
  font: 12px/1.25 var(--cl-font-mono);
  white-space: pre;
  text-overflow: ellipsis;
}