Spry/css/themes/spry-theme-living-sky.css

/*
 * Spry CSS theme — "Living Sky"
 * --------------------------------
 * A medieval almanac of the heavens: parchment pages, deep navy ink,
 * gold-leaf highlights, and a faint dusting of stars. Light-only.
 * Pressed toward the illuminated manuscript: drop caps, fleuron rules,
 * marginalia, night-sky panels, gilded controls, a frontispiece hero.
 *
 * Activation:
 *   - real sites:   <html data-theme="living-sky">
 *   - demo page:    hidden radio  <input id="spry-theme-living-sky">
 *   - load AFTER spry.css
 *
 * Self-contained: local-if-available font stacks and inline data: URIs
 * only — no JavaScript, no @import, no external files.
 */

/* Light-only theme. ------------------------------------------------------ */

[data-theme="living-sky"],
html:has(#spry-theme-living-sky:checked) {
  color-scheme: light; /* parchment by day; dark mode is ignored */

  /* ---- Palette ---- */
  --spry-bg: #f2ebda;            /* parchment */
  --spry-bg-alt: #efe6cd;        /* deeper parchment bands, card headers */
  --spry-bg-inset: #eae0c6;      /* wells: code blocks, disabled fills */
  --spry-surface: #f9f4e6;       /* cards, popovers, inputs */
  --spry-surface-hover: #f4eddb;
  --spry-fg: #1f2533;            /* ink — 12:1 on parchment, the bar */
  --spry-fg-muted: #5c6172;      /* ink-soft — ≥4.5:1 on every parchment tone */
  --spry-border: #d9cdaa;        /* gold-tan hairlines */
  --spry-border-strong: #b9a97c; /* hover borders, kbd */
  --spry-accent: #003078;        /* deep navy: focus, primaries */
  --spry-accent-hover: #002254;
  --spry-accent-fg: #f4efe2;     /* parchment text on navy (10.7:1) */
  --spry-danger: #8a2f2f;        /* rubrication red */
  --spry-success: #44623a;       /* manuscript green */
  --spry-warning: #6b510e;       /* gold-ink darkened for AA on soft tints */
  --spry-info: #2c4a9e;          /* lapis */
  --spry-link: var(--spry-info); /* lapis links, gold-ink hover, as the site */
  --spry-link-hover: var(--spry-gold-ink);
  --spry-backdrop: rgb(6 12 30 / 0.6); /* night-sky scrim */
  --spry-focus-ring: 0 0 0 3px color-mix(in srgb, #a8801f 45%, transparent);

  /* Theme-internal gold leaf (decorative; --spry-gold-ink for gold text) */
  --spry-gold: #a8801f;
  --spry-gold-ink: #7a5d12;      /* gold text on parchment — 5.2:1 */
  --spry-gold-soft: #cdb377;
  --spry-night: #16224e;         /* night-sky panels: dialogs, submenus */
  --spry-night-fg: #ece7d8;      /* parchment ink on night — 12.4:1 */
  --spry-night-muted: #b9c2df;   /* muted ink on night — 8.7:1 */
  --spry-ink-line: #4a5a80;      /* navy ruling line for control borders */

  /* ---- Typography ---- */
  --spry-font: "EB Garamond", Georgia, "Times New Roman", serif;
  --spry-font-heading: "Cinzel", "EB Garamond", Georgia, serif;
  --spry-font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --spry-font-size: 1.125rem;
  --spry-line-height: 1.65;
  --spry-heading-weight: 600;

  /* ---- Shape, depth, motion ---- */
  --spry-radius: 0.25rem;        /* near-square, like ruled folio plates */
  --spry-radius-sm: 0.125rem;
  --spry-radius-lg: 0.375rem;
  --spry-radius-pill: 999px;
  --spry-border-width: 1px;
  --spry-shadow: 0 1px 2px rgb(31 37 51 / 0.06), 0 2px 6px rgb(31 37 51 / 0.07);
  --spry-shadow-lg: 0 24px 48px -16px rgb(16 22 46 / 0.32);
  --spry-glass: none;
  --spry-transition: 160ms ease;
  --spry-dialog-duration: 200ms;
  --spry-dialog-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --spry-dialog-in: translateY(0.6rem) scale(0.98);

  /* ---- Controls: parchment fields ruled in navy, gold focus ring ---- */
  --spry-control-bg: var(--spry-surface);
  --spry-control-fg: var(--spry-fg);
  --spry-control-border: var(--spry-ink-line);
  --spry-control-radius: var(--spry-radius-sm);
  --spry-control-padding-x: 0.65rem;
  --spry-control-padding-y: 0.45rem;

  /* ---- Buttons (default: parchment ruled in navy; primary below) ---- */
  --spry-btn-bg: var(--spry-surface);
  --spry-btn-fg: var(--spry-fg);
  --spry-btn-border: var(--spry-ink-line);
  --spry-btn-bg-hover: var(--spry-surface-hover);
  --spry-btn-bg-active: var(--spry-bg-inset);

  /* ---- Cards / tables / progress / popovers ---- */
  --spry-card-bg: var(--spry-surface);
  --spry-card-border: #d9cdaa;
  --spry-card-padding: 1.25rem;
  --spry-card-shadow: var(--spry-shadow);
  --spry-table-header-bg: var(--spry-bg-alt);
  --spry-table-hover: #f0e7cf;
  --spry-progress-bg: #e6d9b8;   /* defined tan trough, bordered below */
  --spry-progress-fg: var(--spry-gold); /* gilded measure */
  --spry-popover-bg: var(--spry-night); /* night panels below */
  --spry-popover-border: var(--spry-gold);
  --spry-popover-shadow: var(--spry-shadow-lg);

  /* ---- Inline imagery (tiny, self-typed) ---- */
  /* faint gold star-speck over the parchment (kept below cramp threshold) */
  --spry-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23a8801f' opacity='.08'%3E%3Cpath d='M24 22l1.2 3.2 3.2 1.2-3.2 1.2-1.2 3.2-1.2-3.2-3.2-1.2 3.2-1.2z'/%3E%3Cpath d='M118 44l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1z'/%3E%3Cpath d='M66 116l1.1 2.8 2.8 1.1-2.8 1.1-1.1 2.8-1.1-2.8-2.8-1.1 2.8-1.1z'/%3E%3Cpath d='M138 126l.9 2.3 2.3.9-2.3.9-.9 2.3-.9-2.3-2.3-.9 2.3-.9z'/%3E%3Ccircle cx='98' cy='74' r='1.1'/%3E%3Ccircle cx='36' cy='144' r='.9'/%3E%3Ccircle cx='148' cy='16' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  /* parchment grain */
  --spry-parchment-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  /* brighter gold speckle for night-sky panels (dimmed to protect text) */
  --spry-stars-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23d3ac52' opacity='.22'%3E%3Cpath d='M28 24l1.1 3 3 1.1-3 1.1-1.1 3-1.1-3-3-1.1 3-1.1z'/%3E%3Cpath d='M96 58l.9 2.5 2.5.9-2.5.9-.9 2.5-.9-2.5-2.5-.9 2.5-.9z'/%3E%3Cpath d='M52 104l1 2.7 2.7 1-2.7 1-1 2.7-1-2.7-2.7-1 2.7-1z'/%3E%3Ccircle cx='118' cy='96' r='1'/%3E%3Ccircle cx='70' cy='12' r='.9'/%3E%3Ccircle cx='12' cy='78' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  /* gold diamond-fleuron cluster for ornamental rules */
  --spry-fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='12'%3E%3Cg fill='%23a8801f'%3E%3Cpath d='M68 1.2L73.4 6 68 10.8 62.6 6z'/%3E%3Cpath d='M34 3.4L37.2 6 34 8.6 30.8 6z'/%3E%3Cpath d='M102 3.4L105.2 6 102 8.6 98.8 6z'/%3E%3Ccircle cx='20' cy='6' r='1.2'/%3E%3Ccircle cx='116' cy='6' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  /* the full ornamental rule: hairlines flanking the fleuron */
  --spry-divider-bg:
    linear-gradient(var(--spry-gold-soft), var(--spry-gold-soft)) left center / calc(50% - 4.25rem) 1px no-repeat,
    linear-gradient(var(--spry-gold-soft), var(--spry-gold-soft)) right center / calc(50% - 4.25rem) 1px no-repeat,
    var(--spry-fleuron) center / 8.5rem 0.75rem no-repeat;

  /* ---- Structural signatures (nested, scoped to this theme only) ---- */

  /* Gold-leaf rule across the top of the page + star-speckled parchment */
  & body {
    border-top: 3px solid var(--spry-gold);
    background-image: var(--spry-stars), var(--spry-parchment-noise);
  }

  /* Gilded text selection; placeholder kept at full ink-soft for AA */
  & ::selection { background: color-mix(in srgb, var(--spry-gold) 28%, transparent); }
  & ::placeholder { color: var(--spry-fg-muted); opacity: 1; }

  /* Illuminated initial: navy letter on a faint gold halo, gold hairline box */
  & p.lead::first-letter,
  & article > p:first-of-type::first-letter {
    float: left;
    font-family: var(--spry-font-heading);
    font-size: 3.3em; line-height: 0.82;
    padding: 0.08em 0.14em 0.12em 0.1em; margin: 0.05em 0.14em 0 0;
    color: var(--spry-accent);
    background: radial-gradient(circle at 32% 28%, rgb(168 128 31 / 0.3), rgb(168 128 31 / 0.08) 62%, transparent 78%);
    border: 1px solid color-mix(in srgb, var(--spry-gold) 60%, transparent);
    border-radius: var(--spry-radius-sm);
  }

  /* Headings: Cinzel small caps below h2; h1 gets a short gold flourish */
  & :is(h3, h4, h5, .card-title) { font-variant: small-caps; letter-spacing: 0.04em; }

  & h1::after {
    content: ""; display: block; width: 3rem; height: 2px;
    margin-top: 0.45rem;
    background: linear-gradient(90deg, var(--spry-gold), transparent);
  }

  /* Ornamental rule: fleuron divider with flanking gold hairlines */
  & hr {
    border: 0; height: 0.75rem; margin-block: 2.4rem;
    background: var(--spry-divider-bg);
  }

  /* Blockquote as marginalia: gold rule, faint gilding, small-caps scribe */
  & blockquote {
    border-inline-start: 3px solid var(--spry-gold);
    background: color-mix(in srgb, var(--spry-gold) 5%, transparent);
    padding: 0.35rem 1.1rem;
    font-style: italic;
  }

  & blockquote :is(footer, cite) {
    font-style: normal; font-variant: small-caps;
    letter-spacing: 0.08em; font-size: 0.92em;
    color: var(--spry-gold-ink);
  }

  /* Engraved controls: small-caps, tracked out (base look via :where) */
  & :where(button, input[type="submit"], input[type="reset"], input[type="button"], .btn) {
    font-variant: small-caps;
    letter-spacing: 0.05em;
  }

  /* Primary buttons: navy field with a gold-leaf rim */
  & .btn-primary { border-color: var(--spry-gold); }

  /* Cards: hairline frame with a gold-soft top edge, like the site's
     plates; the footer carries the fleuron rule as its divider */
  & .card {
    box-shadow: inset 0 2px 0 var(--spry-gold-soft), var(--spry-card-shadow);
  }

  & .card-footer {
    position: relative;
    border-top: 1px solid transparent;

    &::before {
      content: ""; position: absolute; inset: -1px 0 auto 0;
      height: 0.85rem; pointer-events: none;
      background: var(--spry-divider-bg);
    }
  }

  /* Tables ruled like astronomical tables: navy header band in small caps
     with a gold rule, gold-tan zebra, mono numerals */
  & thead th {
    background: var(--spry-accent); color: var(--spry-accent-fg);
    text-transform: none; font-variant: small-caps;
    letter-spacing: 0.12em;
    border-bottom: 2px solid var(--spry-gold);
  }
  & tbody tr:nth-child(even),
  & .table-striped tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--spry-gold) 9%, transparent);
  }

  & .num { font-family: var(--spry-font-mono); font-size: 0.88em; }

  /* Dialogs, drawers & popovers: night-sky panels — gold-rimmed,
     star-speckled, parchment-light text. Like the site's sky band, the
     whole ink & control system flips with the field, so every child —
     buttons, inputs, links, badges, menus — inherits readable night
     pairs; the parchment .dialog-body inset un-flips them again. */
  & dialog,
  & [popover],
  & :is(.drawer-left, .drawer-right) {
    background-color: var(--spry-night);
    background-image: var(--spry-stars-night);
    border-color: var(--spry-gold);
    color: var(--spry-night-fg);
    --spry-fg: var(--spry-night-fg);
    --spry-heading-color: var(--spry-night-fg);
    --spry-fg-muted: var(--spry-night-muted);
    --spry-bg-alt: rgb(244 239 226 / 0.08);
    --spry-bg-inset: rgb(10 16 36 / 0.65);
    --spry-btn-bg: rgb(244 239 226 / 0.12); --spry-btn-fg: var(--spry-night-fg);
    --spry-btn-border: var(--spry-gold-soft);
    --spry-btn-bg-hover: rgb(244 239 226 / 0.2); --spry-btn-bg-active: rgb(244 239 226 / 0.26);
    --spry-control-bg: #0e1731; --spry-control-fg: var(--spry-night-fg);
    --spry-control-border: var(--spry-gold-soft);
    --spry-accent: #d3ac52; --spry-accent-hover: #c19b3f;
    --spry-accent-fg: #211a0e; --spry-accent-soft: rgb(211 172 82 / 0.16);
    --spry-link: var(--spry-gold-soft); --spry-link-hover: #ecd9a0;
    --spry-danger: #e5a4a4; --spry-danger-soft: rgb(229 164 164 / 0.16);
    --spry-success: #b3cda6; --spry-success-soft: rgb(179 205 166 / 0.16);
    --spry-warning: #e6cd93; --spry-warning-soft: rgb(230 205 147 / 0.18);
    --spry-info: #b3c4ef; --spry-info-soft: rgb(179 196 239 / 0.16);

    & :focus-visible { outline-color: var(--spry-gold); }

    & .dialog-titlebar {
      background: none;
      border-bottom: 1px solid color-mix(in srgb, var(--spry-gold) 45%, transparent);

      & .dialog-title { color: #e7cf8e; font-variant: small-caps; letter-spacing: 0.06em; }

      & .dialog-close { color: var(--spry-gold-soft); }
      & .dialog-close:hover { background: rgb(168 128 31 / 0.22); color: #f6ecc8; }
    }

    /* the parchment folio inset: un-flip the system for this subtree */
    & .dialog-body {
      margin: 0.6rem;
      background: var(--spry-surface);
      border: 1px solid color-mix(in srgb, var(--spry-gold) 35%, transparent);
      border-radius: var(--spry-radius);
      color: #1f2533;
      --spry-fg: #1f2533; --spry-fg-muted: #5c6172;
      --spry-bg-alt: #efe6cd; --spry-bg-inset: #eae0c6;
      --spry-btn-bg: var(--spry-surface); --spry-btn-fg: #1f2533;
      --spry-btn-border: var(--spry-ink-line);
      --spry-btn-bg-hover: var(--spry-surface-hover);
      --spry-btn-bg-active: var(--spry-bg-inset);
      --spry-control-bg: var(--spry-surface); --spry-control-fg: #1f2533;
      --spry-control-border: var(--spry-ink-line);
      --spry-accent: #003078; --spry-accent-hover: #002254;
      --spry-accent-fg: #f4efe2; --spry-accent-soft: rgb(0 48 120 / 0.12);
      --spry-link: #2c4a9e; --spry-link-hover: var(--spry-gold-ink);
      --spry-danger: #8a2f2f; --spry-danger-soft: rgb(138 47 47 / 0.1);
      --spry-success: #44623a; --spry-success-soft: rgb(68 98 58 / 0.1);
      --spry-warning: #6b510e; --spry-warning-soft: rgb(107 81 14 / 0.14);
      --spry-info: #2c4a9e; --spry-info-soft: rgb(44 74 158 / 0.1);

      & :focus-visible { outline-color: var(--spry-accent); }
    }

    & .dialog-footer {
      background: none;
      border-top-color: color-mix(in srgb, var(--spry-gold) 30%, transparent);
    }

    /* alerts riding the night field sit in ivory glass with bright ink */
    & .alert:not(.dialog-body *) {
      background: rgb(244 239 226 / 0.07);
      border-color: color-mix(in srgb, var(--spry-gold) 30%, transparent);
    }
  }

  /* Dropdown submenus are night panels too: parchment links, gilded
     hover. The static submenus inside .menu stay on parchment with ink. */
  & .submenu {
    background-color: var(--spry-night);
    background-image: var(--spry-stars-night);
    border-color: var(--spry-gold);
  }

  & .submenu a { color: var(--spry-night-fg); }
  & .submenu a:hover,
  & .submenu a.active { background: rgb(168 128 31 / 0.24); color: #f6ecc8; }

  & .menu .has-submenu .submenu { background: none; border: 0; }
  & .menu .has-submenu .submenu a { color: var(--spry-fg); }
  & .menu .has-submenu .submenu a:hover,
  & .menu .has-submenu .submenu a.active { background: var(--spry-accent-soft); color: var(--spry-accent); }

  /* Switch as sun-and-moon dial: navy firmament, gilded sun knob; the
     checked track deepens to navy speckled with stars */
  & .switch .track {
    background: var(--spry-night);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spry-gold) 45%, transparent);
  }

  & .switch .track::after {
    background: radial-gradient(circle at 32% 32%, #f4e2ac, var(--spry-gold) 72%);
    box-shadow: 0 0 0 2px rgb(249 244 230 / 0.22), 0 0 0.45rem rgb(168 128 31 / 0.45);
  }

  & .switch input:checked + .track { background-color: var(--spry-accent); background-image: var(--spry-stars-night); }

  /* Progress: a gilded measure in a defined tan trough with an ink
     hairline border, and subtle diagonal hatching */
  /* Progress: a gilded measure — solid gold leaf with a lit top edge,
     no stripes. Indeterminate is a shaft of light travelling the trough,
     like sun moving across parchment. */
  & progress { border: 1px solid var(--spry-ink-line); }

  & progress::-webkit-progress-value {
    background: linear-gradient(180deg, #e8c56a 0%, #d3ac52 45%, #a8801f 100%);
    box-shadow: inset 0 1px 0 rgb(255 244 214 / 0.55);
  }

  & progress::-moz-progress-bar {
    background: linear-gradient(180deg, #e8c56a 0%, #d3ac52 45%, #a8801f 100%);
    box-shadow: inset 0 1px 0 rgb(255 244 214 / 0.55);
  }

  & progress:indeterminate {
    background:
      linear-gradient(90deg,
        rgb(211 172 82 / 0) 0%,
        rgb(211 172 82 / 0.4) 18%,
        #ecc46a 38% 62%,
        rgb(211 172 82 / 0.4) 82%,
        rgb(211 172 82 / 0) 100%) 0 50% / 38% 100% no-repeat,
      #e6d9b8;
    animation: sky-glide 2.4s linear infinite;
  }

  /* Tabs: gold-ink accent swaps through core's own active rule, so the
     underline gilds itself without fighting the nth-of-type chain */
  & .tab-list {
    --spry-accent: var(--spry-gold-ink);

    & label { font-variant: small-caps; letter-spacing: 0.04em; }
  }

  /* Spinner: a turning gilded star */
  & .spinner {
    border-color: var(--spry-gold-soft);
    border-top-color: var(--spry-gold);
  }

  /* Brand: Cinzel small-caps wordmark with a gold sigil mark */
  & .topbar-brand {
    font-family: var(--spry-font-heading); font-variant: small-caps;
    letter-spacing: 0.06em;
  }

  & .topbar-brand::before { content: "✦"; color: var(--spry-gold); margin-right: 0.4rem; }

  /* Nav links: gold underline grows in on hover; the word gilds too */
  & .nav a {
    font-variant: small-caps; letter-spacing: 0.06em;
    background-image: linear-gradient(var(--spry-gold), var(--spry-gold));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--spry-transition), color var(--spry-transition);
  }

  & .nav a:hover { background-size: 100% 1px; color: var(--spry-gold-ink); }
  & .nav a.active {
    background: var(--spry-accent);
    color: #f4efe2;
  }

  /* Breadcrumb: small-caps wayfinding; the current crumb is full ink */
  & .breadcrumb a { font-variant: small-caps; letter-spacing: 0.05em; }
  & .breadcrumb [aria-current] { color: var(--spry-fg); }

  /* Hero: an illuminated frontispiece — parchment band under a gold
     top rule, gilded Cinzel kicker, drop-cap-ready via p.lead */
  & .hero {
    background:
      radial-gradient(60rem 24rem at 50% -8rem, color-mix(in srgb, var(--spry-gold) 9%, transparent), transparent 70%),
      var(--spry-bg-alt);
    border-block: 1px solid var(--spry-border-strong);
    border-top: 3px solid var(--spry-gold);
  }

  & .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.9rem;
    font-family: var(--spry-font-heading); letter-spacing: 0.28em;
    color: var(--spry-gold-ink);
  }

  & .hero-eyebrow::before,
  & .hero-eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: var(--spry-gold-soft); }

  & .hero-title { font-family: var(--spry-font-heading); }

  /* Avatars: night-sky medallions with gold initials (10:1) */
  & .avatar {
    background: var(--spry-night); color: #e7cf8e;
    font-family: var(--spry-font-heading);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spry-gold) 55%, transparent);
  }

  /* OTP: parchment wells with navy ink; gold focus ring via control vars */
  & .otp input { background: var(--spry-bg-inset); color: var(--spry-accent); }

  /* Pagination: small-caps folios; the current leaf is navy with
     parchment text (core) and a gold rim */
  & .pagination a,
  & .pagination span { font-variant: small-caps; letter-spacing: 0.04em; }
  & .pagination [aria-current="page"] { border-color: var(--spry-gold); }
}

/* The shaft of light: a 38%-wide glow crossing the trough once per loop */
@keyframes sky-glide {
  /* 38%-wide layer: p% maps to p x 62% of the track — slide in from fully
     off-left (-161%) and exit fully right (+161%) */
  from { background-position: -161% 50%, 0 0; }
  to { background-position: 161% 50%, 0 0; }
}