@stackonward/cli 0.0.1 → 1.0.1

package/dist/resources/components/nuxt/site-source/app/assets/css/site-shell.css

@@ -0,0 +1,1035 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans:
+    "Inter", "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
+    "BlinkMacSystemFont", "Segoe UI", sans-serif;
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+  --color-primary: #a86550;
+  --color-primary-hover: #945541;
+  --color-primary-active: #7f4635;
+  --color-primary-contrast: #fff;
+  --color-secondary: #2f6f68;
+  --color-secondary-hover: #285f59;
+  --color-secondary-active: #214f4a;
+  --color-success: #16a34a;
+  --color-info: #2563eb;
+  --color-warning: #b7791f;
+  --color-error: #ff6b5f;
+  --color-neutral: #111827;
+  --color-bg: #fbfaf7;
+  --color-surface: #fff;
+  --color-surface-muted: #f4f0eb;
+  --color-surface-elevated: #efe7df;
+  --color-text: #111827;
+  --color-muted: #52616b;
+  --color-dimmed: #7a8790;
+  --color-border: #dbe3e8;
+  --color-border-strong: #c4d2da;
+  --radius-ml: 8px;
+  --radius-2ml: 10px;
+  --breakpoint-xs: 480px;
+  --breakpoint-3xl: 1760px;
+}
+
+:root {
+  --site-font-sans:
+    "Inter", "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
+    "BlinkMacSystemFont", "Segoe UI", sans-serif;
+  --site-color-bg: #fbfaf7;
+  --site-color-bg-soft: #f4f0eb;
+  --site-color-surface: #fff;
+  --site-color-surface-muted: #f4f0eb;
+  --site-color-surface-elevated: #efe7df;
+  --site-color-text: #111827;
+  --site-color-muted: #52616b;
+  --site-color-dimmed: #7a8790;
+  --site-color-border: #dbe3e8;
+  --site-color-border-strong: #c4d2da;
+  --site-color-primary: #a86550;
+  --site-color-primary-hover: #945541;
+  --site-color-primary-active: #7f4635;
+  --site-color-primary-contrast: #fff;
+  --site-color-accent: #2f6f68;
+  --site-color-accent-warm: #a86550;
+  --site-color-warning: #b7791f;
+  --site-color-danger: #ff6b5f;
+  --site-color-success: #16a34a;
+  --site-radius-sm: 4px;
+  --site-radius-md: 8px;
+  --site-radius-lg: 10px;
+  --site-shadow-soft: 0 18px 44px rgb(17 24 39 / 10%);
+  --site-shadow-strong: 0 30px 70px rgb(17 24 39 / 16%);
+  --site-shell-header-height: 68px;
+  --site-shell-sidebar-width: 284px;
+  --site-transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
+  --site-transition-medium: 240ms cubic-bezier(0.2, 0, 0, 1);
+  --ui-primary: var(--site-color-primary);
+  --ui-secondary: var(--site-color-accent);
+  --ui-success: var(--site-color-success);
+  --ui-info: #2563eb;
+  --ui-warning: var(--site-color-warning);
+  --ui-error: var(--site-color-danger);
+  --ui-text-dimmed: var(--site-color-dimmed);
+  --ui-text-muted: var(--site-color-muted);
+  --ui-text-toned: var(--site-color-text);
+  --ui-text: var(--site-color-text);
+  --ui-text-highlighted: var(--site-color-text);
+  --ui-bg: var(--site-color-surface);
+  --ui-bg-muted: var(--site-color-bg-soft);
+  --ui-bg-elevated: var(--site-color-surface-muted);
+  --ui-bg-accented: var(--site-color-surface-elevated);
+  --ui-bg-inverted: var(--site-color-text);
+  --ui-border: var(--site-color-border);
+  --ui-border-muted: #e7eef2;
+  --ui-border-accented: var(--site-color-border-strong);
+  --ui-border-inverted: var(--site-color-text);
+
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  font-family: var(--site-font-sans);
+  color: var(--site-color-text);
+  background: var(--site-color-bg);
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background:
+    linear-gradient(180deg, rgb(168 101 80 / 4.5%), transparent 360px),
+    linear-gradient(180deg, rgb(168 101 80 / 2.5%), transparent 520px), var(--site-color-bg);
+  overflow-x: clip;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+a,
+summary {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:focus-visible {
+  outline: 2px solid var(--site-color-primary);
+  outline-offset: 3px;
+}
+
+.site-root {
+  min-height: 100dvh;
+}
+
+.base-button,
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition:
+    background-color var(--site-transition-fast),
+    border-color var(--site-transition-fast),
+    color var(--site-transition-fast),
+    box-shadow var(--site-transition-fast),
+    transform var(--site-transition-fast);
+}
+
+.base-button {
+  min-height: 44px;
+  gap: 8px;
+  border-radius: var(--site-radius-md);
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.base-button:hover {
+  transform: translateY(-1px);
+}
+
+.base-button--primary {
+  border-color: var(--site-color-primary);
+  background: var(--site-color-primary);
+  color: var(--site-color-primary-contrast);
+  box-shadow: 0 10px 24px rgb(168 101 80 / 18%);
+}
+
+.base-button--primary:hover {
+  background: var(--site-color-primary-hover);
+}
+
+.base-button--secondary {
+  border-color: rgb(168 101 80 / 34%);
+  background: rgb(255 255 255 / 82%);
+  color: var(--site-color-primary);
+}
+
+.base-button--secondary:hover {
+  border-color: rgb(168 101 80 / 48%);
+  background: rgb(168 101 80 / 6%);
+  color: var(--site-color-primary-hover);
+}
+
+.icon-button {
+  width: 44px;
+  height: 44px;
+  border-color: rgb(168 101 80 / 22%);
+  border-radius: var(--site-radius-md);
+  background: rgb(255 255 255 / 78%);
+  color: var(--site-color-primary);
+}
+
+.icon-button:hover {
+  border-color: rgb(168 101 80 / 34%);
+  background: rgb(168 101 80 / 6%);
+  color: var(--site-color-primary-hover);
+}
+
+.site-brand {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+  font-weight: 650;
+}
+
+.site-brand__mark {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid rgb(168 101 80 / 18%);
+  border-radius: var(--site-radius-md);
+  background:
+    linear-gradient(135deg, rgb(255 255 255 / 22%), transparent 52%), var(--site-color-primary);
+  color: var(--site-color-primary-contrast);
+  text-transform: uppercase;
+  box-shadow: 0 10px 22px rgb(168 101 80 / 16%);
+}
+
+.site-brand__text {
+  overflow: hidden;
+  color: var(--site-color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.marketing-shell {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  background:
+    linear-gradient(180deg, rgb(168 101 80 / 4.5%), transparent 340px),
+    linear-gradient(180deg, rgb(168 101 80 / 2.5%), transparent 520px), var(--site-color-bg);
+}
+
+.marketing-shell__main {
+  width: 100%;
+  flex: 1;
+}
+
+.marketing-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  border-bottom: 1px solid rgb(219 227 232 / 82%);
+  background: rgb(255 255 255 / 88%);
+  backdrop-filter: blur(18px);
+}
+
+.marketing-header__inner {
+  display: flex;
+  width: min(1180px, calc(100% - 32px));
+  height: var(--site-shell-header-height);
+  margin: 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.marketing-header__nav {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.marketing-nav-link,
+.marketing-nav-menu > summary {
+  display: inline-flex;
+  min-height: 40px;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--site-radius-md);
+  padding: 0 12px;
+  color: var(--site-color-muted);
+  font-size: 14px;
+  font-weight: 550;
+  cursor: pointer;
+}
+
+.marketing-nav-link:hover,
+.marketing-nav-menu > summary:hover {
+  border-color: rgb(168 101 80 / 18%);
+  background: rgb(168 101 80 / 7%);
+  color: var(--site-color-text);
+}
+
+.marketing-nav-menu {
+  position: relative;
+}
+
+.marketing-nav-menu > summary {
+  list-style: none;
+}
+
+.marketing-nav-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.marketing-nav-menu__panel {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 50%;
+  display: grid;
+  width: min(380px, calc(100vw - 32px));
+  gap: 6px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: rgb(255 255 255 / 98%);
+  padding: 8px;
+  box-shadow: var(--site-shadow-soft);
+  transform: translateX(-50%);
+}
+
+.marketing-nav-menu__item {
+  display: grid;
+  gap: 4px;
+  border-radius: var(--site-radius-md);
+  padding: 12px;
+}
+
+.marketing-nav-menu__item:hover {
+  background: rgb(168 101 80 / 7%);
+}
+
+.marketing-nav-menu__item small {
+  color: var(--site-color-muted);
+  line-height: 1.45;
+}
+
+.marketing-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.marketing-header__actions > .base-button--secondary {
+  background: rgb(255 255 255 / 78%);
+}
+
+.marketing-header__menu-button {
+  display: none;
+}
+
+.mobile-nav {
+  display: none;
+}
+
+.marketing-footer {
+  border-top: 1px solid var(--site-color-border);
+  background: linear-gradient(180deg, var(--site-color-surface), #edf5f7), var(--site-color-bg);
+  color: var(--site-color-text);
+}
+
+.marketing-footer__inner {
+  display: grid;
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
+  gap: 48px;
+  padding: 56px 0;
+}
+
+.marketing-footer .site-brand__text,
+.marketing-footer .site-brand {
+  color: var(--site-color-text);
+}
+
+.marketing-footer__brand {
+  display: grid;
+  align-content: start;
+  gap: 18px;
+}
+
+.marketing-footer__brand p {
+  margin: 0;
+  max-width: 360px;
+  color: var(--site-color-muted);
+  line-height: 1.65;
+}
+
+.marketing-footer__social,
+.marketing-footer__legal nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.marketing-footer__social a,
+.marketing-footer__legal a {
+  color: var(--site-color-muted);
+}
+
+.marketing-footer__social a:hover,
+.marketing-footer__legal a:hover {
+  color: var(--site-color-accent);
+}
+
+.marketing-footer__nav {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.marketing-footer__group h2 {
+  margin: 0 0 14px;
+  color: var(--site-color-accent-warm);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.marketing-footer__group ul {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.marketing-footer__group a {
+  color: var(--site-color-muted);
+  font-size: 14px;
+}
+
+.marketing-footer__group a:hover {
+  color: var(--site-color-text);
+}
+
+.marketing-footer__legal {
+  display: flex;
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-top: 1px solid var(--site-color-border);
+  padding: 20px 0;
+  color: var(--site-color-dimmed);
+  font-size: 14px;
+}
+
+.back-to-top {
+  position: fixed;
+  right: 24px;
+  z-index: 45;
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border: 1px solid var(--site-color-border-strong);
+  border-radius: 50%;
+  background: var(--site-color-surface);
+  color: var(--site-color-text);
+  box-shadow: var(--site-shadow-soft);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px);
+  transition:
+    opacity var(--site-transition-fast),
+    transform var(--site-transition-fast);
+}
+
+.back-to-top--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.back-to-top svg {
+  width: 22px;
+  height: 22px;
+}
+
+.toast-viewport {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 80;
+  pointer-events: none;
+}
+
+.toast-viewport__stack {
+  display: grid;
+  width: min(380px, calc(100vw - 32px));
+  gap: 10px;
+}
+
+.site-toast {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  border: 1px solid var(--site-color-border);
+  border-left-width: 4px;
+  border-radius: var(--site-radius-lg);
+  background: var(--site-color-surface);
+  box-shadow: var(--site-shadow-soft);
+  padding: 14px;
+  pointer-events: auto;
+}
+
+.site-toast--info {
+  border-left-color: #2563eb;
+}
+
+.site-toast--success {
+  border-left-color: var(--site-color-success);
+}
+
+.site-toast--warning {
+  border-left-color: var(--site-color-warning);
+}
+
+.site-toast--danger {
+  border-left-color: var(--site-color-danger);
+}
+
+.site-toast__body {
+  display: grid;
+  gap: 4px;
+}
+
+.site-toast h2,
+.site-toast p {
+  margin: 0;
+}
+
+.site-toast h2 {
+  font-size: 14px;
+}
+
+.site-toast p {
+  color: var(--site-color-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.site-toast button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--site-color-surface-muted);
+  color: var(--site-color-text);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.site-toast-enter-active,
+.site-toast-leave-active {
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.site-toast-enter-from,
+.site-toast-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.site-consent {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 50;
+  display: grid;
+  width: calc(100vw - 32px);
+  max-width: 430px;
+  gap: 14px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: rgb(255 255 255 / 96%);
+  padding: 16px;
+  box-shadow: var(--site-shadow-strong);
+}
+
+.site-consent__message {
+  margin: 0;
+  color: var(--site-color-muted);
+  line-height: 1.55;
+}
+
+.site-consent__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+@media (width <= 520px) {
+  .site-consent {
+    right: 16px;
+    left: 16px;
+    width: auto;
+  }
+}
+
+.application-shell {
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--site-color-bg);
+}
+
+.application-header {
+  position: sticky;
+  top: 0;
+  z-index: 35;
+  display: grid;
+  height: var(--site-shell-header-height);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  border-bottom: 1px solid var(--site-color-border);
+  background: rgb(255 255 255 / 90%);
+  padding: 0 20px;
+  backdrop-filter: blur(16px);
+}
+
+.application-header__left,
+.application-header__right {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.application-header__right {
+  justify-content: flex-end;
+}
+
+.application-header__center {
+  min-width: 0;
+}
+
+.application-header__menu-button {
+  display: none;
+}
+
+.application-shell__body {
+  display: grid;
+  height: calc(100dvh - var(--site-shell-header-height));
+  min-height: 0;
+  grid-template-columns: var(--site-shell-sidebar-width) minmax(0, 1fr);
+}
+
+.application-shell__sidebar {
+  min-height: 0;
+  border-right: 1px solid var(--site-color-border);
+  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  overflow-y: auto;
+}
+
+.application-shell__content {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.application-sidebar {
+  min-height: 100%;
+}
+
+.application-sidebar__nav {
+  display: grid;
+  gap: 22px;
+  padding: 18px 14px;
+}
+
+.application-sidebar__group h2 {
+  margin: 0 0 8px;
+  padding: 0 10px;
+  color: var(--site-color-accent-warm);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.application-sidebar__link {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--site-radius-md);
+  padding: 0 10px;
+  color: var(--site-color-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.application-sidebar__link:hover,
+.application-sidebar__link.router-link-active {
+  border-color: rgb(168 101 80 / 20%);
+  background: rgb(168 101 80 / 7%);
+  color: var(--site-color-text);
+}
+
+.application-sidebar__icon {
+  width: 20px;
+  text-align: center;
+}
+
+.application-sidebar__link small {
+  margin-left: auto;
+  color: var(--site-color-accent);
+}
+
+.application-shell__overlay {
+  display: none;
+}
+
+.page-heading {
+  display: grid;
+  width: min(960px, calc(100% - 40px));
+  margin: 0 auto;
+  gap: 14px;
+  padding: 72px 0 36px;
+}
+
+.page-heading h1 {
+  margin: 0;
+  color: var(--site-color-text);
+  font-size: clamp(34px, 6vw, 68px);
+  font-weight: 340;
+  line-height: 1.02;
+}
+
+.page-heading p {
+  max-width: 700px;
+  margin: 0;
+  color: var(--site-color-muted);
+  font-size: 18px;
+  line-height: 1.6;
+}
+
+.page-heading span,
+.page-heading__eyebrow {
+  color: var(--site-color-accent-warm);
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.content-list {
+  padding-bottom: 72px;
+}
+
+.content-list__grid {
+  display: grid;
+  width: min(960px, calc(100% - 40px));
+  margin: 0 auto;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.content-card {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  min-height: 200px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  padding: 20px;
+  box-shadow: 0 1px 0 rgb(17 24 39 / 4%);
+}
+
+.content-card:hover {
+  border-color: rgb(168 101 80 / 32%);
+  box-shadow: var(--site-shadow-soft);
+}
+
+.content-card small {
+  color: var(--site-color-accent-warm);
+  font-weight: 650;
+}
+
+.content-card h2,
+.content-card h3 {
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.25;
+}
+
+.content-card p {
+  margin: 0;
+  color: var(--site-color-muted);
+  line-height: 1.55;
+}
+
+.content-card span {
+  margin-top: auto;
+  color: var(--site-color-dimmed);
+  font-size: 13px;
+}
+
+.content-article,
+.static-page {
+  padding-bottom: 80px;
+}
+
+.content-article__meta {
+  display: block;
+  color: var(--site-color-muted);
+}
+
+.content-article__body,
+.static-page__body {
+  width: min(780px, calc(100% - 40px));
+  margin: 0 auto;
+  color: var(--site-color-muted);
+  font-size: 17px;
+  line-height: 1.75;
+}
+
+.content-article__body h2,
+.static-page__body h2 {
+  margin-top: 40px;
+  color: var(--site-color-text);
+  font-weight: 450;
+}
+
+.content-article__body p,
+.static-page__body p {
+  margin: 0 0 18px;
+}
+
+.content-article__related {
+  display: grid;
+  gap: 16px;
+  padding-top: 48px;
+}
+
+.content-article__related > h2 {
+  width: min(960px, calc(100% - 40px));
+  margin: 0 auto;
+  font-weight: 450;
+}
+
+@media (width <= 860px) {
+  :root {
+    --site-shell-header-height: 64px;
+  }
+
+  .marketing-header__inner {
+    width: min(100% - 24px, 1180px);
+    gap: 12px;
+  }
+
+  .marketing-header .site-brand {
+    flex: 1 1 auto;
+  }
+
+  .marketing-header .site-brand__text {
+    min-width: 0;
+  }
+
+  .marketing-header__nav,
+  .marketing-header__actions > .base-button {
+    display: none;
+  }
+
+  .marketing-header__actions {
+    flex: 0 0 auto;
+  }
+
+  .marketing-header__menu-button {
+    display: inline-flex;
+  }
+
+  .mobile-nav {
+    display: none;
+    width: min(100%, 100vw);
+    border-top: 1px solid var(--site-color-border);
+    background: rgb(255 255 255 / 98%);
+    padding: 10px 12px 18px;
+  }
+
+  .mobile-nav--open {
+    display: grid;
+    gap: 6px;
+  }
+
+  .mobile-nav__link,
+  .mobile-nav__group > summary {
+    display: flex;
+    min-height: 46px;
+    align-items: center;
+    border-radius: var(--site-radius-md);
+    padding: 0 12px;
+    color: var(--site-color-text);
+    font-weight: 600;
+  }
+
+  .mobile-nav__link:hover,
+  .mobile-nav__group > summary:hover {
+    background: rgb(168 101 80 / 7%);
+  }
+
+  .mobile-nav__group > summary {
+    cursor: pointer;
+  }
+
+  .marketing-footer__inner,
+  .marketing-footer__nav,
+  .content-list__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .marketing-footer__inner {
+    gap: 34px;
+    padding: 44px 0;
+  }
+
+  .marketing-footer__legal {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .application-header {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .application-header__center {
+    display: none;
+  }
+
+  .application-header__menu-button {
+    display: inline-flex;
+  }
+
+  .application-shell__body {
+    display: block;
+  }
+
+  .application-shell__sidebar {
+    position: fixed;
+    top: var(--site-shell-header-height);
+    bottom: 0;
+    left: 0;
+    z-index: 32;
+    width: min(86vw, var(--site-shell-sidebar-width));
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
+  }
+
+  .application-shell__sidebar--open {
+    transform: translateX(0);
+  }
+
+  .application-shell__overlay {
+    position: fixed;
+    inset: var(--site-shell-header-height) 0 0;
+    z-index: 31;
+    display: block;
+    background: rgb(17 24 39 / 42%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+
+  .application-shell__overlay--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .application-shell__content {
+    height: calc(100dvh - var(--site-shell-header-height));
+    padding: 16px;
+  }
+
+  .page-heading {
+    width: min(100% - 32px, 960px);
+    padding-top: 44px;
+  }
+
+  .page-heading h1 {
+    font-size: 38px;
+  }
+
+  .content-list__grid,
+  .content-article__body,
+  .static-page__body,
+  .content-article__related > h2 {
+    width: min(100% - 32px, 960px);
+  }
+
+  .site-consent {
+    right: 16px;
+    bottom: 102px;
+  }
+}
+
+@media (width <= 520px) {
+  .site-brand__mark {
+    width: 32px;
+    height: 32px;
+  }
+
+  .site-brand__text {
+    max-width: 54vw;
+  }
+
+  .site-consent__actions {
+    justify-content: stretch;
+  }
+
+  .site-consent__actions .base-button {
+    flex: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+  }
+}