pandorga 1.2.1

data/assets/css/ledger/footer.css

@@ -0,0 +1,298 @@
+/* Ledger page styles: site footer. Owned by _includes/page/site-footer.html;
+   shared component rules belong in assets/css/base.css.
+
+   The footer is the one band that appears under every page, so it takes the
+   panel step of the surface ladder rather than a border-only treatment: the
+   tonal shift says "the page ended", and the hairline above it does the work
+   the tonal step alone cannot (background → panel is ~1.13:1 in light).
+
+   Type roles follow the post-pullback rules. Headings and links are chrome
+   labels, so they take the label face, uppercase and tracked, at the same
+   size as the top rail — the footer sections and the header sections are the
+   same list, and they should read as the same list. The catchphrase under the
+   wordmark is the same fragment as the home hero tagline. The
+   imprint is a legend in the body face. No monospace anywhere. */
+
+.site-footer {
+  position: relative;
+  overflow: hidden;
+  background: var(--color-panel-contrast);
+  border-top: 1px solid var(--border-gentle-divider);
+}
+
+.site-footer-inner {
+  position: relative;
+  z-index: 1;
+  padding-top: var(--space-xl);
+  padding-bottom: var(--space-lg);
+}
+
+/* ── Shards ──
+   Decoration only, and the shared utility already unmounts them under 640px.
+   `overflow: hidden` on the band keeps the negative offsets out of the
+   document scroll width at every width in between.
+
+   Both sit at the bottom, where the imprint is one short left-aligned line and
+   the rest of the row is empty at every width the shards survive. The first
+   position tried was the top-right corner, which put a wedge straight through
+   the Elsewhere column — the same collision the CV dossier shard had to be
+   corrected for. */
+.site-footer-shard {
+  right: -3rem;
+  bottom: -4rem;
+  width: 13rem;
+  height: 13rem;
+  background: var(--color-secondary);
+}
+
+.site-footer-shard--beta {
+  right: auto;
+  left: -3.5rem;
+  bottom: -3rem;
+  width: 10rem;
+  height: 10rem;
+  background: var(--color-primary);
+}
+
+/* Between the suppression breakpoint and the desktop layout the imprint takes
+   most of the row, so the shards give it back the width. */
+@media (max-width: 1023px) {
+  .site-footer-shard {
+    right: -2.5rem;
+    bottom: -3rem;
+    width: 9rem;
+    height: 9rem;
+  }
+
+  .site-footer-shard--beta {
+    left: -3rem;
+    bottom: -2.5rem;
+    width: 7rem;
+    height: 7rem;
+  }
+}
+
+/* ── Grid ──
+   One column stacked, three across at tablet, then a 12-column measure at
+   desktop where the masthead earns the widest span. Each block carries its
+   own span class rather than an :nth-child rule, so a block dropping out
+   reflows the row instead of breaking it. */
+.site-footer-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-xl);
+}
+
+.site-footer-block {
+  min-width: 0;
+}
+
+@media (min-width: 768px) {
+  .site-footer-grid {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--gutter);
+    row-gap: var(--space-2xl);
+  }
+
+  .site-footer-masthead {
+    grid-column: span 12;
+  }
+
+  /* Pages takes two-thirds so four page columns fit; Contact keeps a third. */
+  .site-footer-sections {
+    grid-column: span 8;
+  }
+
+  .site-footer-elsewhere {
+    grid-column: span 4;
+  }
+}
+
+@media (min-width: 1024px) {
+
+  /* Masthead span 4 keeps the author line one wordmark-wide; Pages moves one
+     track left (span 6) so four page columns still sit the same distance from
+     the wordmark and from Contact (span 2). */
+  .site-footer-masthead {
+    grid-column: span 4;
+  }
+
+  .site-footer-sections {
+    grid-column: span 6;
+  }
+
+  .site-footer-elsewhere {
+    grid-column: span 2;
+  }
+}
+
+/* ── Masthead ── */
+.site-footer-wordmark-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  text-decoration: none;
+  color: var(--color-on-surface);
+}
+
+.site-footer-wordmark {
+  font-family: var(--font-title);
+  font-size: calc(var(--type-card) - 2pt);
+  line-height: 1.15;
+  font-synthesis: none;
+  /* Full author name can wrap gracefully on narrow screens if needed */
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+@media (min-width: 640px) {
+  .site-footer-wordmark {
+    white-space: nowrap;
+    line-height: 1;
+  }
+}
+
+/* The mockup's footer bio describes someone else, so this is site.description
+   — one sentence, and the only sentence the site has about itself. */
+.site-footer-bio {
+  margin-top: var(--space-md);
+  max-width: 32rem;
+  font-family: var(--font-label);
+  font-size: var(--type-meta);
+  font-weight: var(--weight-label);
+  letter-spacing: 0.03em;
+  line-height: var(--leading-body);
+  color: var(--color-on-surface-variant);
+}
+
+/* ── Block headings ── */
+.site-footer-heading {
+  margin: 0 0 var(--space-md);
+  font-family: var(--font-label);
+  font-size: var(--type-meta);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--color-on-surface);
+}
+
+/* ── Link lists ──
+   Sections and Elsewhere are the same object in two sources, so they share
+   one presentation. The contacts list arrives from the runtime with its own
+   utility classes; a two-class selector outranks them without the runtime
+   having to know the footer exists. */
+.site-footer-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Page names and contact channels are read as words, not scanned as labels,
+   so they take the body face. Small caps stay on the block headings. */
+.site-footer-link,
+.site-footer .site-footer-contacts a {
+  font-family: var(--font-body);
+  font-size: var(--type-label-lg);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--color-on-surface-variant);
+  text-decoration: none;
+  transition: color var(--motion-duration-fast) var(--motion-ease-default);
+}
+
+.site-footer-link:hover,
+.site-footer .site-footer-contacts a:hover {
+  color: var(--color-primary);
+}
+
+/* The live page is marked, not just coloured: the rule repeats the rail's
+   `is-active` treatment so the two navigations agree about where you are. */
+.site-footer-link.is-current {
+  color: var(--color-on-surface);
+  border-bottom: 2px solid var(--color-primary);
+  padding-bottom: 0.15rem;
+}
+
+/* ── Imprint ── */
+.site-footer-imprint {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-md);
+  margin: var(--space-lg) 0 0;
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--border-gentle-subtle);
+  font-family: var(--font-body);
+  font-size: var(--type-meta);
+  line-height: 1.6;
+  color: var(--color-on-surface-variant);
+}
+
+/* A middot between items rather than a separator element, so an absent
+   license leaves no orphaned punctuation beNewsreader. */
+.site-footer-imprint-item+.site-footer-imprint-item::before {
+  content: "·";
+  margin-right: var(--space-md);
+  color: var(--color-outline-variant);
+}
+
+.site-footer-imprint-link {
+  color: var(--color-on-surface-variant);
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-gentle);
+  transition: color var(--motion-duration-fast) var(--motion-ease-default), border-color var(--motion-duration-fast) var(--motion-ease-default);
+}
+
+.site-footer-imprint-link:hover {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+/* ── Print ──
+   On paper the navigation and the external links are dead ends and the tonal
+   band is a large grey rectangle, so only the imprint survives. It is the one
+   part a printed page still needs: who holds the copyright and under which
+   licence. */
+@media print {
+  .site-footer {
+    background: none;
+    border-top: 1px solid var(--color-outline-variant);
+    overflow: visible;
+  }
+
+  .site-footer-inner {
+    padding-top: var(--space-md);
+    padding-bottom: var(--space-md);
+  }
+
+  .site-footer-shard,
+  .site-footer-grid {
+    display: none;
+  }
+
+  .site-footer-imprint {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/* ── Page columns ──
+   The three nav groups plus Bibliography become four columns, so the footer
+   reads the Explore pairs and leaves Bibliography its own list rather than
+   burying it under References. They stack on a phone, where four columns of
+   two would be four columns of nothing. */
+.site-footer-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-md);
+}
+
+@media (min-width: 480px) {
+  .site-footer-columns {
+    grid-template-columns: repeat(4, minmax(0, auto));
+    gap: var(--space-lg);
+    justify-content: start;
+  }
+}