Spry/css/themes/spry-theme-formal.css

/*!
 * Spry CSS theme — "Formal" — wedding-stationery suite, second fidelity
 * pass against the real wedding site: plum header/footer bands, mauve nav
 * band and mauve expanders (never white), berry buttons in thick pale-berry
 * mats, frosted panels with the double pressed shadow, script form labels,
 * ivory paper, serif ink. Light-only. Activated with <html data-theme=
 * "formal"> or the demo radio #spry-theme-formal. Load after spry.css.
 * No JavaScript or imports; stacks fall back to Georgia / cursive.
 */

[data-theme="formal"],
html:has(#spry-theme-formal:checked) {
  color-scheme: light;

  /* ---- Palette (the core derives soft tints automatically) ---- */
  --spry-bg: #fdfbf7;            /* ivory paper */
  --spry-bg-alt: #f7f2ec;        /* stationery bands, wells, titlebars */
  --spry-bg-inset: #f3ece2;      /* disabled fills, code blocks */
  --spry-surface: #ffffff;       /* popovers, menus, tables: kept opaque */
  --spry-surface-hover: #faf6ef;
  --spry-fg: #3f3a3c;            /* ink */
  --spry-fg-muted: #7d7379;
  --spry-border: #e6dcd2;        /* hairlines */
  --spry-border-strong: #b47e9a; /* berry mat hsl(329 26% 60%) */
  --spry-accent: #844d6a;        /* berry — hsl(329 26% 41%), site buttons */
  --spry-accent-hover: #915574;  /* site hover lightens to hsl(329 26% 45%) */
  --spry-accent-fg: #ffffff;
  --spry-danger: #a6304c;        /* deep rose */
  --spry-success: #5e713d;       /* sage green — hsl(82 30% 34%) */
  --spry-warning: #8f6824;       /* antique gold */
  --spry-info: #6f5a7c;          /* plum */
  --spry-link: var(--spry-success);   /* sage links, as on the site */
  --spry-link-hover: #49582f;
  --spry-backdrop: rgb(63 58 60 / 0.5);
  --formal-gold: #b08d3e;        /* gilded hairlines, fleurons, frames */
  --formal-plum: #854e6a;        /* site header / footer plum */
  --formal-mauve: #80628f;       /* hsl(280 19% 47%): nav band, expander edge */
  --formal-mauve-bar: #c3b3cb;   /* hsl(280 19% 75%): expander summary bar */
  --formal-mauve-pale: #e7e1ea;  /* hsl(280 19% 90%): expander body */
  --formal-berry-pale: #ecdfe6;  /* hsl(329 26% 90%): secondary fill */
  --formal-berry-mat: #d0afc0;   /* hsl(329 26% 75%): secondary mat */

  /* ---- Typography ---- */
  --spry-font: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --spry-font-heading: var(--spry-font);
  --spry-font-display: "Snell Roundhand", "Apple Chancery", "Segoe Script",
    "Brush Script MT", cursive; /* script: h1, hero, brand, form labels */
  --spry-font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --spry-font-size: 1.125rem;    /* generous: the site set p/form text to 1.2em */
  --spry-line-height: 1.65;
  --spry-heading-weight: 600;

  /* ---- Shape, depth, motion ---- */
  --spry-radius: 0.75rem;        /* 12px — the site's only radius */
  --spry-radius-sm: 0.75rem;     /* 12px here too: chips, menu items */
  --spry-radius-lg: 0.75rem;
  --spry-radius-pill: 999px;
  --spry-border-width: 1px;
  --spry-shadow: 0 1px 2px rgb(63 58 60 / 0.05), 0 6px 18px -6px rgb(63 58 60 / 0.07);
  --spry-shadow-lg: 0 24px 48px -16px rgb(63 58 60 / 0.24), 0 6px 16px rgb(63 58 60 / 0.08);
  --spry-glass: none;
  --spry-transition: 150ms 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);
  --spry-focus-ring: 0 0 0 3px var(--spry-surface), 0 0 0 4px var(--spry-border),
    0 0 0 6px color-mix(in srgb, var(--spry-accent) 30%, transparent);

  /* ---- Controls: transparent wells, berry hairline (site inputs) ---- */
  --spry-control-bg: transparent;
  --spry-control-fg: var(--spry-fg);
  --spry-control-border: var(--spry-border-strong);
  --spry-control-radius: 0.75rem;    /* 12px */
  --spry-control-padding-x: 1.35rem; /* buttons: core adds .15rem = 24px */
  --spry-control-padding-y: 0.5rem;  /* 8px, the site's control padding */

  /* ---- Buttons: the site's berry seals (color rides the vars) ---- */
  --spry-btn-bg: var(--spry-accent);
  --spry-btn-fg: #ffffff;
  --spry-btn-border: var(--spry-border-strong);
  --spry-btn-bg-hover: var(--spry-accent-hover);
  --spry-btn-bg-active: #74445d;     /* hsl(329 26% 36%), pressed darker */

  /* ---- Cards: frosted panel on a 6px white mat (site form/#response) ---- */
  --spry-card-bg: rgb(255 255 255 / 0.5);
  --spry-card-border: #ffffff;
  --spry-card-padding: 2em;      /* the site's 2em panel padding */
  --spry-card-shadow: 0 0 5px rgb(0 0 0 / 0.2), inset 0 0 5px rgb(0 0 0 / 0.2);
  --spry-table-header-bg: var(--formal-berry-pale);
  --spry-table-hover: color-mix(in srgb, var(--spry-accent) 5%, var(--spry-surface));
  --spry-progress-bg: var(--spry-bg-alt);
  --spry-progress-fg: var(--spry-accent);
  --spry-popover-bg: var(--spry-surface);
  --spry-popover-border: var(--spry-border);
  --spry-popover-shadow: var(--spry-shadow-lg);

  /* ---- Structural polish (looks the variables can't reach) ---- */

  /* Letterpress headings: small-caps, letter-spaced, debossed ink.
     h1 is the script display moment — swashes in berry. */
  & :is(h2, h3, h4, h5, .card-title) {
    font-variant-caps: all-small-caps; letter-spacing: 0.08em;
    text-shadow: 0 1px 0 #fff;
  }
  & h2 { font-size: 2em; }       /* the site's h2 scale */
  & h1 {
    font-family: var(--spry-font-display); font-weight: 400;
    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem); line-height: 1.25;
    color: var(--spry-accent); text-shadow: 0 1px 0 #fff;
  }
  & h6 { letter-spacing: 0.12em; text-shadow: 0 1px 0 #fff; }

  /* A card that opens on its title is a hero moment — script it */
  & .card > .card-title:first-child {
    font-family: var(--spry-font-display); font-variant-caps: normal;
    font-weight: 400; font-size: 1.5rem; color: var(--spry-accent); letter-spacing: 0;
  }
  & .card-subtitle { font-style: italic; }

  /* Form labels in script, as the site lettered its form text */
  & :is(.label, legend) {
    font-family: var(--spry-font-display); font-weight: 600;
    font-size: 1.15em; letter-spacing: 0;
  }

  /* Dividers as menu-card ornaments: hairline with a gold fleuron */
  & hr {
    position: relative; overflow: visible; border: 0;
    border-top: 1px solid color-mix(in srgb, var(--spry-border-strong) 55%, transparent);
    margin-block: 2.4rem;
    &::after {
      content: "❧"; position: absolute; left: 50%; top: 0;
      translate: -50% -55%; color: var(--formal-gold);
      font-size: 1.15rem; line-height: 1;
    }
  }

  /* Panels & generous spacing: thick stationery mats, 15px+ gutters */
  & .card { border-width: 6px; }
  & fieldset { padding: 1.25rem 1.5rem; }
  & :is(.popover-menu, .submenu) { padding: 0.6rem; }

  /* Topbar as the site header: plum band, white text, generous padding,
     pressed-in shade along the bottom edge */
  & .topbar {
    background: var(--formal-plum); color: #fff; border-bottom: 0;
    padding-block: clamp(1.1rem, 2.5vw, 2.5rem); /* up to the site's 40px */
    box-shadow: inset 0 -10px 6px rgb(0 0 0 / 0.2);
  }
  & footer.topbar { box-shadow: inset 0 10px 6px rgb(0 0 0 / 0.2); }

  /* Brand: script names in white on flanking gilt rules */
  & .topbar-brand {
    display: inline-flex; align-items: center; gap: 0.65rem;
    font-family: var(--spry-font-display); font-weight: 400;
    font-size: 1.6rem; letter-spacing: 0; color: #fff;
    &::before,
    &::after {
      content: ""; width: 1.4rem; height: 1px;
      background: color-mix(in srgb, var(--formal-gold) 70%, transparent);
      transition: width var(--spry-transition);
    }
    &:hover { color: #fff; }
    &:hover::before,
    &:hover::after { width: 2.2rem; background: var(--formal-gold); }
  }

  /* Nav links on paper: engraved small-caps, berry underline on hover */
  & .nav a {
    font-variant-caps: all-small-caps; font-weight: 500;
    letter-spacing: 0.14em; border-radius: 0;
  }
  & .nav a:hover,
  & .nav a.active {
    background: transparent; color: var(--spry-accent);
    text-decoration: underline; text-decoration-thickness: 1.5px;
    text-underline-offset: 0.4em;
  }
  & .nav a:hover { text-decoration-color: var(--spry-accent); }
  & .nav a.active { text-decoration-color: var(--formal-gold); }
  /* Nav in the topbar = the site's mauve band with white links */
  & .topbar .nav {
    background: var(--formal-mauve); border-radius: var(--spry-radius);
    padding: 0.35rem 0.65rem; box-shadow: inset 0 -4px 3px rgb(0 0 0 / 0.2);
  }
  & .topbar .nav a,
  & .topbar .nav a:hover,
  & .topbar .nav a.active {
    background: transparent; color: #fff; text-decoration-color: #fff;
  }

  /* Menus as menu cards: flat items, gold course marker on hover */
  & :is(.menu, .submenu) a { letter-spacing: 0.05em; border-radius: 0; }
  & .menu a:hover,
  & .menu a.active {
    background: color-mix(in srgb, var(--spry-accent) 7%, var(--spry-surface));
    box-shadow: inset 2px 0 0 var(--formal-gold);
  }
  & .submenu a:hover {
    background: color-mix(in srgb, var(--spry-accent) 10%, var(--spry-surface));
    color: var(--spry-accent);
  }

  /* Breadcrumbs: legible gold diamond separators */
  & .breadcrumb li + li::before {
    content: "◆"; font-size: 0.65em; vertical-align: 0.22em; color: var(--formal-gold);
  }

  /* Buttons: the site's berry seals — thick pale-berry mat border and the
     double (outer + inset) pressed shadow. Fill, text, hover and the
     8px 24px padding ride the vars; :where keeps this light enough that
     core .btn-sm/.btn-lg sizing at (0,2,0) still wins. */
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):not(.btn-link):not(.btn-ghost):not(.dialog-close):not(.popover-menu *) {
    border-width: 6px; font-weight: 700;
    box-shadow: 0 0 5px rgb(0 0 0 / 0.2), inset 0 0 5px rgb(0 0 0 / 0.2);
  }
  & :is(.btn-primary, .btn-danger) { border-color: var(--spry-border-strong); }
  /* Outline button = the site's secondary: pale berry, deeper mat */
  & .btn-outline {
    background: var(--formal-berry-pale); border-color: var(--formal-berry-mat);
    color: #444444;
    &:hover {
      background: #f4ecf0; border-color: var(--spry-border-strong); color: #444444;
    }
  }

  /* Inputs/selects/textareas: transparent wells, 2px berry hairline,
     8px padding — exactly the site's recipe */
  & :where(input[type="text"], input[type="email"], input[type="password"],
      input[type="number"], input[type="search"], input[type="tel"],
      input[type="url"], input[type="date"], input[type="time"],
      input[type="datetime-local"], input[type="month"], input[type="week"],
      input[type="color"], select, textarea, .input) {
    border-width: 2px;
    padding: 8px;
  }

  /* Checkboxes & radios: 20px marks, dark-berry accent (site) */
  & :where(input[type="checkbox"], input[type="radio"]) {
    width: 1.25em; height: 1.25em; accent-color: #60394d;
  }
  & :is(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--spry-accent); outline-offset: 2px;
  }
  /* Choice labels as the site's check-labels: berry frame, 12px radius,
     8px padding; hover deepens the frame */
  & .choice {
    border: 2px solid var(--spry-border-strong); border-radius: var(--spry-radius);
    padding: 8px;
    &:hover { border-color: var(--spry-accent); }
  }
  & .choices { gap: 12px; }

  /* Selects: swap the native arrow for a small berry serif caret */
  & select:not([size]):not([multiple]) {
    appearance: none; padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6 10.5 1.5' fill='none' stroke='%23844d6a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center;
  }

  /* Expanders as the site's details/summary — MAUVE, not white: pale-mauve
     body, deeper mauve summary bar, plum rule under the open summary */
  & details {
    background: var(--formal-mauve-pale); border: 2px solid var(--formal-mauve);
    border-radius: var(--spry-radius); margin-bottom: 18px; overflow: hidden;
  }
  & details + details { margin-top: 0; }
  & details > summary {
    background: var(--formal-mauve-bar); color: var(--spry-fg);
    font-family: var(--spry-font); font-size: 1.2em; font-weight: 700;
    padding: 8px 18px; border-radius: 0;
    &:hover { background: #bba9c4; }
  }
  & details > summary::before { border-color: #5d4766; }
  & details[open] > summary { border-bottom: 2px solid var(--formal-mauve); }
  & details > :not(summary):not(:last-child) { padding: 18px 18px 0; }
  & details > :not(summary):last-child { padding: 18px; }
  & .expander-group > details { margin-bottom: 0; }
  & .expander-group > details + details { margin-top: -2px; }

  /* Progress: an envelope window — ivory track in a thin gilt frame,
     berry fill with a paper highlight (engine rules kept separate) */
  & progress {
    background: var(--spry-bg-alt);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--formal-gold) 55%, transparent);
  }
  & progress::-webkit-progress-bar {
    background: var(--spry-bg-alt);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--formal-gold) 55%, transparent);
  }
  & progress::-webkit-progress-value {
    background: var(--spry-progress-fg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
  }
  & progress::-moz-progress-bar {
    background: var(--spry-progress-fg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
  }

  /* Indeterminate: theme-explicit so it can never be shadowed */
  & progress:indeterminate {
    --spry-pulse-cap: 0.4em;
    background:
      radial-gradient(var(--spry-pulse-cap) var(--spry-pulse-cap) at var(--spry-pulse-cap) 50%, var(--spry-accent) 97%, transparent 100%) 0% 50% / 25% 100% no-repeat,
      radial-gradient(var(--spry-pulse-cap) var(--spry-pulse-cap) at calc(100% - var(--spry-pulse-cap)) 50%, var(--spry-accent) 97%, transparent 100%) 0% 50% / 25% 100% no-repeat,
      linear-gradient(90deg, transparent 0 var(--spry-pulse-cap), var(--spry-accent) var(--spry-pulse-cap) calc(100% - var(--spry-pulse-cap)), transparent calc(100% - var(--spry-pulse-cap))) 0% 50% / 25% 100% no-repeat,
      var(--spry-bg-alt);
    animation: spry-pulse 1.4s linear infinite alternate;
  }

  /* Menu-style tables: no grid box, pale-berry header band, hairline courses */
  & table { border: 0; }
  & thead th {
    color: var(--spry-accent); font-size: 0.85em; text-transform: none;
    font-variant-caps: all-small-caps; letter-spacing: 0.14em;
    border-bottom: 2px solid var(--spry-border-strong);
  }
  & caption { font-style: italic; color: #717171; }

  /* Alerts as enclosure notes; danger = the site's solid .form-errors */
  & .alert {
    border-inline-start: 3px solid var(--spry-accent);
    & p:first-child { font-style: italic; }
    &.alert-success { border-inline-start-color: var(--spry-success); }
    &.alert-warning { border-inline-start-color: var(--spry-warning); color: #7a5719; }
    &.alert-info { border-inline-start-color: var(--spry-info); }
  }
  & .alert.alert-danger {
    background: #b21f1f; border: 0; color: #fff; font-weight: 700;
    & p { font-style: normal; }
  }

  /* Badges as place-card chips: ivory, berry text, berry pill edge */
  & .badge:not(.badge-danger):not(.badge-success):not(.badge-warning):not(.badge-info):not(.badge-muted) {
    background: var(--spry-bg-alt); color: var(--spry-accent);
    border: var(--spry-border-width) solid var(--spry-accent); letter-spacing: 0.03em;
  }

  /* Dialogs, as the suite's invite modal: borderless white card, 16px radius,
     one large soft shadow, roomy padding — and a blurred scrim behind it.
     Anchored popovers keep a clear backdrop (no blur on menus). */
  & dialog,
  & [popover]:has(> .dialog-titlebar, > .dialog-body, > .dialog-footer) {
    border-radius: 1rem;
    box-shadow: 0 15px 50px rgb(63 58 60 / 0.35);
  }
  & dialog { width: min(95vw, 42rem); }
  & dialog::backdrop,
  & [popover]:not(.popover-anchor):not(.drawer-left):not(.drawer-right)::backdrop {
    backdrop-filter: blur(2px);
  }
  & .dialog-body { padding: 1.5rem 2rem; }

  /* Titlebar: the suite's plum-tinted gradient header with a berry rule */
  & .dialog-titlebar {
    background: linear-gradient(135deg, rgb(133 78 106 / 0.16) 0%, rgb(133 78 106 / 0.07) 100%);
    border-bottom: 2px solid color-mix(in srgb, var(--spry-accent) 55%, transparent);
    padding: 1.1rem 1.75rem;
    & .dialog-title {
      font-family: var(--spry-font-heading); font-weight: 600;
      font-size: 1.35rem; color: #854e6a; letter-spacing: 0.01em;
    }
    & .dialog-close {
      border: 0; border-radius: var(--spry-radius-sm);
      background: rgb(133 78 106 / 0.12); color: #6d3e55; font-size: 1.3rem;
      &:hover { background: rgb(133 78 106 / 0.24); color: #53303f; }
    }
  }

  /* Switch: slim gold track, ivory knob */
  & .switch .track {
    width: 2.3rem; height: 1.15rem;
    background: color-mix(in srgb, var(--formal-gold) 28%, var(--spry-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--formal-gold) 50%, transparent);
    &::after {
      top: 0.15rem; left: 0.15rem; width: 0.85rem; height: 0.85rem;
      background: var(--spry-bg); box-shadow: 0 1px 2px rgb(63 58 60 / 0.3);
    }
  }
  & .switch input:checked + .track {
    background: var(--formal-gold);
    &::after { translate: 1.15rem 0; }
  }

  /* ---- Invitation-suite components (section 20) ---- */

  /* Hero as the site header band: plum, white centered text, 40px padding,
     pressed-in shade along the bottom */
  & .hero {
    background: var(--formal-plum); color: #fff; border-block: 0;
    padding-block: 2.5rem;
    box-shadow: inset 0 -10px 6px rgb(0 0 0 / 0.2);
  }
  & .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-weight: 600; letter-spacing: 0.28em; text-transform: none;
    font-variant-caps: all-small-caps; color: #e4eed3;
    &::before,
    &::after { content: "◆"; color: var(--formal-gold); font-size: 0.45em; }
  }
  & .hero-title {
    font-family: var(--spry-font-display); font-weight: 400;
    color: #fff; letter-spacing: 0; text-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
  }
  & .hero-sub { color: #e4eed3; font-style: italic; }
  /* Avatars: ivory cameos — berry initials in a paper mat, gilt on hover */
  & .avatar {
    background: var(--spry-bg-alt); color: var(--spry-accent);
    border: 1px solid color-mix(in srgb, var(--spry-accent) 30%, var(--spry-border));
    box-shadow: 0 0 0 2px var(--spry-surface), 0 0 0 3px var(--spry-border);
  }
  & .avatar:hover {
    box-shadow: 0 0 0 2px var(--spry-surface), 0 0 0 3px var(--formal-gold),
      0 3px 8px rgb(63 58 60 / 0.15);
  }

  /* OTP: stationery wells, serif figures, gilded dash */
  & .otp input { background: var(--spry-bg-alt); font-family: var(--spry-font); font-size: 1.4rem; }
  & .otp-separator { color: var(--formal-gold); }
  /* Drawers: ivory panel, plum titlebar like the site's header band */
  & :is(.drawer-left, .drawer-right) {
    background: var(--spry-bg);
    border-color: color-mix(in srgb, var(--spry-accent) 30%, var(--spry-border));
    & .dialog-titlebar {
      background: var(--spry-info);
      border-bottom-color: color-mix(in srgb, var(--formal-gold) 70%, transparent);
      & .dialog-title { color: #fff; }
      & .dialog-close {
        color: #fff; border-color: rgb(255 255 255 / 0.55);
        &:hover { background: #fff; border-color: #fff; color: var(--spry-info); }
      }
    }
  }

  /* Pagination: hairline chips; the current page is a berry wax seal */
  & .pagination :is(a, span) {
    border-color: var(--spry-border); border-radius: var(--spry-radius-pill);
    font-variant-caps: all-small-caps; letter-spacing: 0.06em;
  }
  & .pagination a:hover {
    background: color-mix(in srgb, var(--spry-accent) 8%, var(--spry-surface));
    border-color: color-mix(in srgb, var(--spry-accent) 45%, var(--spry-border));
  }
  & .pagination [aria-current="page"] {
    background: var(--spry-accent); border-color: var(--spry-border-strong);
    color: #fff; box-shadow: 0 0 5px rgb(0 0 0 / 0.2);
  }
}