@cogenta/theme-restaurant 0.3.3 → 0.5.4

package/src/styles/widgets.css

@@ -0,0 +1,853 @@
+/*
+ * Widgets (contract D `theme@1.6`): the column beside a dish, a page that
+ * opens on its title or search results; the bands before and after the
+ * content; the columns of the charcoal footer. Everything reads `tokens.css`.
+ *
+ * The host draws one markup for every theme (`cg-sidebar-layout`); this file
+ * sets it the way a printed menu card sets its margin. Each group opens on
+ * the part-of-the-menu label (the display serif in small capitals, in brass,
+ * over an ink rule), then its words at the size of the menu: a call to book
+ * in the serif, hours as a ruled list, a guest's words in the light serif.
+ * Structure is drawn with space and hairlines; no box, no tint, no shadow.
+ * The one filled rectangle beside a dish is the way to book.
+ */
+
+/* --------------------------------------------------------------------------
+   The layout: the content on the page's own grid, the column beside it.
+   -------------------------------------------------------------------------- */
+
+.cg-sidebar-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  inline-size: 100%;
+  max-inline-size: calc(var(--cr-page) + var(--cr-gutter) * 2);
+  margin-inline: auto;
+  padding-inline: var(--cr-gutter);
+  padding-block-end: 0;
+}
+
+.cg-sidebar-layout__content {
+  min-inline-size: 0;
+}
+
+/* Inside the content column the layout already holds the page's edges:
+   every block's container, and the pages the host renders, start on its
+   first pixel rather than a gutter further in. */
+.cg-sidebar-layout__content :is(.cr-container, .cg-comments, .cg-form, .cg-form__confirmation),
+.cg-sidebar-layout__content
+  > :is(
+    .cg-page__title,
+    .cg-search__form,
+    .cg-search__results,
+    .cg-search__empty,
+    .cg-search__error
+  ) {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+/* A band inside the column stops at the column, so its words keep a margin
+   from the edge of its ground. */
+.cg-sidebar-layout__content [data-block][data-variant-background] {
+  padding-inline: var(--cr-s8);
+}
+
+/* On a phone the column follows the page's last section, a section's step
+   below it, opening on the ink rule of its first group. */
+.cg-sidebar-layout__aside {
+  align-self: start;
+  padding-block: calc(var(--cr-section) / 4) calc(var(--cr-section) / 2);
+  border: 0;
+}
+
+@media (min-width: 64rem) {
+  .cg-sidebar-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+    column-gap: clamp(var(--cr-s12), 5vw, var(--cr-s20));
+  }
+
+  /* The column's first label stands on the line of the dish's section label
+     and of a page's title, and nothing else parts it from the content: the
+     space between them is the margin of the card. */
+  .cg-sidebar-layout__aside {
+    position: sticky;
+    inset-block-start: var(--cr-s8);
+    padding-block: calc(var(--cr-section) * 0.4 + var(--cr-s2)) calc(var(--cr-section) / 2);
+  }
+
+  /* The content column is narrower than a page, so the text takes more of its
+     twelve columns: running text starts on the first column and keeps its
+     measure, a dish keeps its photograph and its words side by side. */
+  .cg-sidebar-layout__content .cr-prose__body {
+    grid-column: 1 / span 11;
+  }
+
+  .cg-sidebar-layout__content
+    :is(.cr-page-head__title, .cr-page-head__meta, .cr-archive__breadcrumb) {
+    grid-column: 1 / span 11;
+  }
+
+  .cg-sidebar-layout__content .cr-page-head__lead {
+    grid-column: 1 / span 9;
+  }
+
+  .cg-sidebar-layout__content .cr-dish[data-media="true"] .cr-dish__info {
+    grid-column: 7 / span 6;
+  }
+
+  .cg-sidebar-layout__content .cr-dish[data-media="false"] .cr-dish__info {
+    grid-column: 1 / span 10;
+  }
+
+  .cg-sidebar-layout__content .cr-dish__title {
+    font-size: var(--cr-size-section);
+  }
+
+  .cg-sidebar-layout__content .cr-list[data-shape="menu"] .cr-head {
+    grid-column: 1 / span 4;
+  }
+
+  .cg-sidebar-layout__content .cr-list[data-layout="list"] .cr-menu {
+    grid-column: 1 / span 10;
+  }
+
+  .cg-sidebar-layout__content .cr-list[data-shape="menu"] .cr-head + .cr-menu,
+  .cg-sidebar-layout__content .cr-list[data-layout="list"] .cr-head + .cr-menu {
+    grid-column: 5 / span 8;
+  }
+
+  .cg-sidebar-layout__content :is(.cr-cta__title, .cr-cta__body) {
+    grid-column: 1 / -1;
+  }
+
+  .cg-sidebar-layout__content .cg-comments > * {
+    grid-column: 1 / -1;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   An area and its widgets.
+   -------------------------------------------------------------------------- */
+
+.cg-widget-area {
+  display: grid;
+  gap: var(--cr-s12);
+  align-content: start;
+}
+
+.cg-widget {
+  min-inline-size: 0;
+  color: var(--cr-ink);
+  font-size: var(--cr-text-md);
+  line-height: var(--cr-leading-ui);
+}
+
+/* A band the host places outside the layout (the home page, a page that
+   opens on its own photograph): on the page's grid, a group to a column. */
+.cg-widget-area--placed {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
+  column-gap: var(--cr-col-gap);
+  inline-size: 100%;
+  max-inline-size: calc(var(--cr-page) + var(--cr-gutter) * 2);
+  margin-inline: auto;
+  padding: calc(var(--cr-section) / 2) var(--cr-gutter);
+}
+
+.cg-sidebar-layout__content .cg-widget-area--placed {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+
+/* The part-of-the-menu label: the serif in small capitals, in brass, over
+   an ink rule, exactly as a section of the menu names itself. */
+.cg-widget__title {
+  margin: 0 0 var(--cr-s5);
+  padding-block-end: var(--cr-s3);
+  border-block-end: var(--cr-rule) solid var(--cr-line-ink);
+  color: var(--cr-brass);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-label);
+  font-weight: var(--cr-weight-semibold);
+  font-variant-caps: all-small-caps;
+  line-height: 1.2;
+  letter-spacing: var(--cr-tracking-caps);
+  text-transform: none;
+}
+
+/* A group without a label still opens on the rule. */
+:is(.cg-sidebar-layout__aside, .cg-widget-area--placed)
+  > .cg-widget:not(:has(> .cg-widget__title))
+  > .cg-widget__body {
+  padding-block-start: var(--cr-s5);
+  border-block-start: var(--cr-rule) solid var(--cr-line-ink);
+}
+
+.cg-widget__body :is(ul, ol) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cg-widget__body p {
+  margin: 0;
+}
+
+.cg-widget__text p + p {
+  margin-block-start: var(--cr-s3);
+}
+
+.cg-widget__text a {
+  text-decoration-color: var(--cr-line-strong);
+}
+
+.cg-widget__empty {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
+}
+
+/* --------------------------------------------------------------------------
+   Lists: links, sections, months, a table of contents. Space parts one line
+   from the next, the way the menu parts its dishes.
+   -------------------------------------------------------------------------- */
+
+:is(
+  .cg-widget__links-item,
+  .cg-widget__terms-item,
+  .cg-widget__archives-item,
+  .cg-widget__toc-item
+) {
+  padding-block: 0;
+  border-block-end: 0;
+}
+
+:is(.cg-widget__links, .cg-widget__toc, .cg-widget__terms, .cg-widget__archives) {
+  display: grid;
+  gap: var(--cr-s1);
+}
+
+:is(.cg-widget__links, .cg-widget__toc) a,
+:is(.cg-widget__terms, .cg-widget__archives) a,
+.cg-widget__about-link,
+.cg-widget__form-link {
+  color: var(--cr-ink);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cr-rule);
+  text-decoration-color: transparent;
+  text-underline-offset: 0.3em;
+}
+
+:is(.cg-widget__links, .cg-widget__toc) a:hover,
+:is(.cg-widget__terms, .cg-widget__archives) a:hover,
+.cg-widget__about-link:hover,
+.cg-widget__form-link:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__link,
+.cg-widget__toc-item a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.25rem;
+}
+
+/* The page being read is named in a heavier weight, without a colour of its
+   own. */
+.cg-widget :is([aria-current="page"], [aria-current="page"] > a) {
+  font-weight: var(--cr-weight-semibold);
+}
+
+/* A section and its count: the menu's own dotted leader between them. */
+:is(.cg-widget__terms-item, .cg-widget__archives-item) {
+  display: flex;
+  align-items: last baseline;
+  gap: 0 var(--cr-s3);
+  min-block-size: 2.25rem;
+}
+
+:is(.cg-widget__terms-item, .cg-widget__archives-item):has(
+  > :is(.cg-widget__terms-count, .cg-widget__archives-count)
+)::after {
+  content: "";
+  flex: 1 1 var(--cr-s6);
+  order: 1;
+  min-inline-size: var(--cr-s4);
+  margin-block-end: 0.3em;
+  border-block-end: var(--cr-rule-strong) dotted var(--cr-line-strong);
+}
+
+:is(.cg-widget__terms-count, .cg-widget__archives-count) {
+  order: 2;
+}
+
+.cg-widget__terms-item[data-depth="1"],
+.cg-widget__toc-item[data-depth="1"] {
+  padding-inline-start: var(--cr-s4);
+}
+
+.cg-widget__terms-item[data-depth="2"],
+.cg-widget__toc-item[data-depth="2"] {
+  padding-inline-start: var(--cr-s8);
+}
+
+:is(
+  .cg-widget__terms-count,
+  .cg-widget__archives-count,
+  .cg-widget__cloud-count,
+  .cg-widget__entry-date,
+  .cg-widget__comment-date
+) {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.cg-widget__cloud {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--cr-s1) var(--cr-s5);
+}
+
+.cg-widget__cloud-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--cr-s1);
+  font-family: var(--cr-font-display);
+}
+
+.cg-widget__cloud-item a {
+  text-decoration-color: transparent;
+}
+
+.cg-widget__cloud-item a:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__cloud-item[data-weight="1"] {
+  font-size: var(--cr-text-md);
+}
+.cg-widget__cloud-item[data-weight="2"] {
+  font-size: var(--cr-text-lg);
+}
+.cg-widget__cloud-item[data-weight="3"] {
+  font-size: var(--cr-text-xl);
+}
+.cg-widget__cloud-item[data-weight="4"] {
+  font-size: var(--cr-text-2xl);
+}
+.cg-widget__cloud-item[data-weight="5"] {
+  font-size: var(--cr-text-3xl);
+}
+
+/* --------------------------------------------------------------------------
+   Entries and comments: a dish name in the serif, the date under it.
+   -------------------------------------------------------------------------- */
+
+:is(.cg-widget__entries, .cg-widget__comments) {
+  display: grid;
+  gap: var(--cr-s6);
+}
+
+:is(.cg-widget__entry, .cg-widget__comment) {
+  padding-block: 0;
+  border-block: 0;
+}
+
+.cg-widget__entry {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--cr-s4);
+  align-items: start;
+}
+
+.cg-widget__entry[data-image="image"] {
+  grid-template-columns: 4.5rem minmax(0, 1fr);
+}
+
+.cg-widget__entry-image {
+  inline-size: 100%;
+  aspect-ratio: 4 / 5;
+  background: var(--cr-plate);
+}
+
+.cg-widget__entry-text {
+  display: grid;
+  gap: var(--cr-s1);
+}
+
+.cg-widget__entry-title,
+.cg-widget__comment-entry {
+  color: var(--cr-ink);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-size-dish-name);
+  font-weight: var(--cr-weight-semibold);
+  line-height: 1.2;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.2em;
+}
+
+a.cg-widget__entry-title:hover,
+a.cg-widget__comment-entry:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__entry-excerpt,
+.cg-widget__comment-excerpt {
+  margin: 0;
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
+  line-height: 1.5;
+}
+
+.cg-widget__comment-author {
+  font-weight: var(--cr-weight-medium);
+}
+
+/* --------------------------------------------------------------------------
+   Search, a jump menu, a form: fields are a baseline, as on the search page;
+   the button beside a field is its word, underlined, so the filled rectangle
+   stays the way to book.
+   -------------------------------------------------------------------------- */
+
+.cg-widget__search,
+.cg-widget__jump {
+  display: flex;
+  align-items: end;
+  gap: var(--cr-s4);
+}
+
+.cg-widget__search-input,
+.cg-widget__jump select {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.cg-widget__search-button,
+.cg-widget__jump-button {
+  flex: none;
+  min-block-size: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--cr-ink);
+  font-family: var(--cr-font-text);
+  font-size: var(--cr-text-md);
+  font-weight: var(--cr-weight-medium);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cr-rule);
+  text-decoration-color: var(--cr-line-strong);
+  text-underline-offset: 0.3em;
+  cursor: pointer;
+  transition: text-decoration-color var(--cr-duration) var(--cr-ease);
+}
+
+.cg-widget__search-button:hover,
+.cg-widget__jump-button:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget .cg-form {
+  display: grid;
+  gap: var(--cr-s4);
+  inline-size: auto;
+  max-inline-size: none;
+  margin: 0;
+  padding-inline: 0;
+}
+
+.cg-widget .cg-form > * {
+  max-inline-size: none;
+}
+
+.cg-widget .cg-form__field {
+  margin-block-end: 0;
+}
+
+.cg-widget__form-submit {
+  justify-self: start;
+}
+
+/* --------------------------------------------------------------------------
+   Words and pictures.
+   -------------------------------------------------------------------------- */
+
+.cg-widget__figure,
+.cg-widget__embed,
+.cg-widget__quote {
+  margin: 0;
+}
+
+:is(.cg-widget__image, .cg-widget__about-image, .cg-widget__gallery-image) {
+  inline-size: 100%;
+  aspect-ratio: 4 / 5;
+  background: var(--cr-plate);
+}
+
+.cg-widget__caption {
+  margin-block-start: var(--cr-s3);
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
+}
+
+.cg-widget__frame {
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+  background: var(--cr-plate);
+}
+
+.cg-widget__gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--cr-s2);
+}
+
+.cg-widget__gallery[data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cg-widget__gallery[data-columns="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* A guest's words, or a critic's: the light serif, between real quotation
+   marks, the name after a rule in ink. */
+.cg-widget__quote-text {
+  margin: 0;
+}
+
+.cg-widget__quote-text p {
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-2xl);
+  font-weight: var(--cr-weight-light);
+  line-height: 1.25;
+  letter-spacing: var(--cr-tracking-heading);
+  quotes: "\201C" "\201D";
+  text-wrap: pretty;
+}
+
+.cg-widget__quote-text p::before {
+  content: open-quote;
+}
+
+.cg-widget__quote-text p::after {
+  content: close-quote;
+}
+
+.cg-widget__quote-source {
+  display: grid;
+  gap: 0.15em;
+  margin-block-start: var(--cr-s5);
+  padding-inline-start: var(--cr-s4);
+  border-inline-start: var(--cr-rule) solid var(--cr-line-ink);
+}
+
+.cg-widget__quote-name {
+  font-size: var(--cr-text-md);
+  font-weight: var(--cr-weight-medium);
+}
+
+.cg-widget__quote-role {
+  color: var(--cr-ink-muted);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-lg);
+  font-style: italic;
+  line-height: var(--cr-leading-lead);
+}
+
+.cg-widget__about,
+.cg-widget__cta {
+  display: grid;
+  gap: var(--cr-s3);
+  justify-items: start;
+}
+
+.cg-widget__about-heading,
+.cg-widget__cta-heading {
+  color: var(--cr-ink);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-3xl);
+  font-weight: var(--cr-weight-light);
+  line-height: var(--cr-leading-heading);
+  letter-spacing: var(--cr-tracking-display);
+  text-wrap: balance;
+}
+
+.cg-widget__about-body,
+.cg-widget__cta-body {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-md);
+  line-height: 1.55;
+}
+
+.cg-widget__about-image {
+  margin-block-end: var(--cr-s2);
+}
+
+/* The way to book is the theme's filled rectangle (`base.css`), a step
+   further from the words than a line is. */
+.cg-widget__cta-action {
+  margin-block-start: var(--cr-s3);
+}
+
+/* Contact lines and opening hours: the address card's words, and the hours
+   as a ruled list of two columns, the way a dish lists its details. */
+.cg-widget__contact {
+  display: grid;
+  gap: var(--cr-s2);
+}
+
+.cg-widget__contact-line {
+  display: flex;
+  gap: var(--cr-s3);
+  align-items: baseline;
+  line-height: 1.5;
+}
+
+.cg-widget__contact-line a {
+  text-decoration-color: var(--cr-line-strong);
+}
+
+.cg-widget__icon {
+  flex: none;
+  align-self: start;
+  margin-block-start: 0.2em;
+  color: var(--cr-ink-muted);
+}
+
+/* The rule runs under the label and the value as one line: the space between
+   the two columns is the label's own padding, not a gap in the grid. */
+.cg-widget__hours {
+  display: grid;
+  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
+  column-gap: 0;
+  margin: 0;
+}
+
+.cg-widget__contact-line + .cg-widget__hours {
+  margin-block-start: var(--cr-s4);
+}
+
+.cg-widget__hours :is(dt, dd) {
+  margin: 0;
+  padding-block: var(--cr-s3);
+}
+
+.cg-widget__hours dt {
+  padding-inline-end: var(--cr-s5);
+}
+
+.cg-widget__hours :is(dt, dd):not(:first-of-type) {
+  border-block-start: var(--cr-rule) solid var(--cr-line);
+}
+
+.cg-widget__hours :is(dt, dd):first-of-type {
+  padding-block-start: 0;
+}
+
+.cg-widget__hours :is(dt, dd):last-of-type {
+  padding-block-end: 0;
+}
+
+.cg-widget__hours-label {
+  color: var(--cr-ink-muted);
+  font-size: var(--cr-text-caption);
+  line-height: 1.6;
+}
+
+.cg-widget__hours-value {
+  font-size: var(--cr-text-md);
+  line-height: 1.5;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+/* The profiles keep their names, as in the footer. */
+.cg-widget__social {
+  display: grid;
+  gap: var(--cr-s1);
+}
+
+.cg-widget__social a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cr-s2);
+  min-block-size: 2.25rem;
+  text-decoration-color: transparent;
+}
+
+.cg-widget__social a:hover {
+  text-decoration-color: currentColor;
+}
+
+.cg-widget__social .cg-visually-hidden {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+  margin: 0;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+}
+
+.cg-widget__calendar-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--cr-text-caption);
+  font-variant-numeric: lining-nums tabular-nums;
+  text-align: center;
+}
+
+.cg-widget__calendar-table caption {
+  padding-block-end: var(--cr-s3);
+  font-family: var(--cr-font-display);
+  font-size: var(--cr-text-xl);
+  text-align: start;
+}
+
+.cg-widget__calendar-table th {
+  color: var(--cr-ink-muted);
+  font-weight: var(--cr-weight-regular);
+}
+
+.cg-widget__calendar-table :is(th, td) {
+  padding-block: var(--cr-s2);
+}
+
+.cg-widget__calendar-table td[data-posts] a {
+  font-weight: var(--cr-weight-semibold);
+}
+
+.cg-widget__calendar-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-block-start: var(--cr-s3);
+  font-size: var(--cr-text-caption);
+}
+
+/* --------------------------------------------------------------------------
+   The footer's widget columns: a second tier of the charcoal band, under a
+   hairline, on the footer's twelve columns. The labels drop the brass for
+   the band's muted cream; the way to book becomes the footer's own
+   underlined words.
+   -------------------------------------------------------------------------- */
+
+.cr-footer__widgets {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cr-s12) var(--cr-col-gap);
+  padding-block-start: var(--cr-s12);
+  border-block-start: var(--cr-rule) solid var(--cr-footer-line);
+}
+
+@media (min-width: 40rem) {
+  .cr-footer__widgets {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* On a desk each column starts on a column of the band above: two or three
+   columns of four, under the name and the address card; four columns of
+   three. */
+@media (min-width: 64rem) {
+  .cr-footer__widgets {
+    grid-template-columns: repeat(var(--cr-columns), minmax(0, 1fr));
+  }
+
+  .cr-footer__widgets > .cg-widget-area {
+    grid-column: span 4;
+  }
+
+  .cr-footer__widgets[data-columns="4"] > .cg-widget-area {
+    grid-column: span 3;
+  }
+}
+
+.cr-footer__widgets .cg-widget {
+  color: var(--cr-footer-ink);
+}
+
+.cr-footer__widgets .cg-widget__title {
+  margin-block-end: var(--cr-s4);
+  padding-block-end: 0;
+  border-block-end: 0;
+  color: var(--cr-footer-muted);
+}
+
+.cr-footer__widgets
+  :is(
+    .cg-widget__cta-body,
+    .cg-widget__about-body,
+    .cg-widget__hours-label,
+    .cg-widget__entry-date,
+    .cg-widget__entry-excerpt,
+    .cg-widget__terms-count,
+    .cg-widget__archives-count,
+    .cg-widget__quote-role,
+    .cg-widget__caption,
+    .cg-widget__icon,
+    .cg-widget__empty
+  ) {
+  color: var(--cr-footer-muted);
+}
+
+.cr-footer__widgets
+  :is(.cg-widget__cta-heading, .cg-widget__about-heading, .cg-widget__entry-title) {
+  color: var(--cr-footer-ink);
+}
+
+.cr-footer__widgets .cg-widget__cta-heading {
+  font-size: var(--cr-text-2xl);
+}
+
+.cr-footer__widgets .cg-widget__cta-body {
+  max-inline-size: 36ch;
+  font-size: var(--cr-text-caption);
+}
+
+.cr-footer__widgets .cg-widget__hours {
+  max-inline-size: 30rem;
+}
+
+.cr-footer__widgets .cg-widget__hours :is(dt, dd) {
+  border-block-start-color: var(--cr-footer-line);
+}
+
+.cr-footer__widgets :is(.cg-widget__quote-source, .cg-widget__title) {
+  border-color: var(--cr-footer-line);
+}
+
+.cr-footer__widgets :is(.cg-widget__search-input, .cg-widget__jump select) {
+  border-block-end-color: var(--cr-footer-muted);
+  color: var(--cr-footer-ink);
+}
+
+.cr-footer__widgets :is(.cg-widget__search-button, .cg-widget__jump-button) {
+  color: var(--cr-footer-ink);
+  text-decoration-color: var(--cr-footer-line);
+}
+
+.cr-footer__widgets .cg-widget__cta-action {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--cr-footer-ink);
+  font-size: var(--cr-text-md);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--cr-rule);
+  text-decoration-color: var(--cr-footer-line);
+  text-underline-offset: 0.3em;
+  white-space: normal;
+}
+
+.cr-footer__widgets .cg-widget__cta-action::after {
+  content: "\2192" / "";
+  display: inline-block;
+  margin-inline-start: 0.4em;
+}
+
+.cr-footer__widgets .cg-widget__cta-action:hover {
+  background: transparent;
+  color: var(--cr-footer-ink);
+  text-decoration-color: currentColor;
+}