. ============================================================ */ .site-landing { margin-top: var(--ar-s-16); scroll-margin-top: var(--site-nav-h); } @media (min-width: 1024px) { .site-landing { margin-top: var(--ar-s-20); } } /*

already carries padding-top, so the first section backs off by exactly that much: 1rem + 3rem = 4rem below 1024px, 2rem + 3rem = 5rem above it, which is the same rhythm the later section-to-section gaps use. */ main > .site-landing:first-child { margin-top: var(--ar-s-12); } .site-landing-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ar-s-3); } .site-landing-title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .site-landing-sub { margin: var(--ar-s-2) 0 0; max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--ar-gray-600); } .site-landing-link { font-size: 0.9rem; font-weight: 700; white-space: nowrap; } /* Stats strip - rides the bottom of the hero band. No top rule, so the hero's fade into --ar-base-100 stays continuous. */ .site-stats { background: var(--ar-base-100); border-bottom: 1px solid var(--ar-base-300); } .site-stats ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ar-s-5); width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--ar-s-6) var(--ar-s-4); list-style: none; text-align: center; } @media (min-width: 768px) { .site-stats ul { grid-template-columns: repeat(4, 1fr); } } /* The gutter has to flip at 1024px, not 768px:

uses ar-p-4 until ar-lg (1024) and .site-hero-inner switches at the same point, so moving to 2rem here left the stats inset 1rem deeper than everything around them for the whole 768-1023px range. */ @media (min-width: 1024px) { .site-stats ul { padding-inline: var(--ar-s-8); } } .site-stats-num { display: block; font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .site-stats-label { display: block; margin-top: var(--ar-s-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-gray-600); } /* Value props - a top rule instead of a box, so the page does not read as a wall of identical cards. */ .site-props { display: grid; grid-template-columns: 1fr; gap: var(--ar-s-6); margin-top: var(--ar-s-6); } @media (min-width: 768px) { .site-props { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-props { grid-template-columns: repeat(4, 1fr); } } .site-prop { border-top: 2px solid var(--ar-base-300); padding-top: var(--ar-s-4); } .site-prop-kicker { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-primary); } .site-prop-title { margin: var(--ar-s-2) 0 0; font-size: 1.15rem; font-weight: 700; } .site-prop-text { margin: var(--ar-s-2) 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--ar-gray-600); } /* Live component showcase - real markup in labelled tiles. */ .site-show { display: grid; grid-template-columns: 1fr; gap: var(--ar-s-4); margin-top: var(--ar-s-6); } @media (min-width: 640px) { .site-show { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-show { grid-template-columns: repeat(3, 1fr); } } .site-show-item { display: flex; flex-direction: column; gap: var(--ar-s-3); border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-5); } .site-show-label { font-family: var(--ar-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-gray-500); } .site-show-body { display: flex; flex-direction: column; gap: var(--ar-s-3); flex: 1; } .site-rating-out { color: var(--ar-gray-600); } /* Themes - one live panel that re-skins with the global toggle, plus links to the four theme pages. */ .site-themes { display: grid; gap: var(--ar-s-6); margin-top: var(--ar-s-6); } @media (min-width: 1024px) { .site-themes { grid-template-columns: 1.15fr 0.85fr; align-items: start; } } .site-theme-demo { display: flex; flex-direction: column; gap: var(--ar-s-4); border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-5); box-shadow: var(--ar-shadow-xl); } .site-theme-chips { display: flex; flex-wrap: wrap; gap: var(--ar-s-3); } .site-theme-note { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--ar-gray-600); } .site-theme-list { display: grid; gap: var(--ar-s-3); } .site-theme-item { display: block; border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-4); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } a.site-theme-item:hover { border-color: var(--ar-primary); box-shadow: var(--ar-shadow-lg); transform: translateY(-2px); } .site-theme-item h3 { margin: 0; font-size: 1rem; font-weight: 700; } .site-theme-item p { margin: var(--ar-s-1) 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--ar-gray-600); } .site-theme-swatches { display: flex; gap: var(--ar-s-1); margin-bottom: var(--ar-s-3); } .site-theme-swatches i { width: 1.375rem; height: 1.375rem; border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-pill); background: var(--sw-1); } .site-theme-swatches i:nth-child(2) { background: var(--sw-2); } .site-theme-swatches i:nth-child(3) { background: var(--sw-3); } .site-theme-item.is-light { --sw-1: #fafafa; --sw-2: #e5e5e5; --sw-3: #737373; } .site-theme-item.is-dark { --sw-1: #171717; --sw-2: #262626; --sw-3: #a3a3a3; } .site-theme-item.is-neo { --sw-1: #00aeef; --sw-2: #8bc53f; --sw-3: #ffd100; } .site-theme-item.is-pixel { --sw-1: #4a90d9; --sw-2: #e07a5f; --sw-3: #f2cc8f; } .site-install { position: relative; margin-top: var(--ar-s-6); border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-200); padding: var(--ar-s-4) 5rem var(--ar-s-4) var(--ar-s-4); font-size: 0.875rem; line-height: 1.7; } /* Scroll lives on the

 so the copy button stays pinned while a long
   command slides underneath it. */
.site-install pre { margin: 0; overflow-x: auto; }
.site-cta { display: flex; flex-wrap: wrap; gap: var(--ar-s-4); align-items: center; margin-top: var(--ar-s-6); }

/* Copy button - injected by site.js into any [data-site-copy] block. */
.site-copy { position: absolute; top: var(--ar-s-2); right: var(--ar-s-2); padding: 0.25rem var(--ar-s-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--ar-base-content); background: var(--ar-base-100); border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-field); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.site-copy:hover { border-color: var(--ar-primary); }
.site-copy.is-done { background: var(--ar-primary); border-color: var(--ar-primary); color: var(--ar-primary-content); }

/* ============================================================
   Landing hero - branded full-bleed band.
   Keeps ar-hero so html[data-theme] .ar-hero (neo/pixel) backgrounds
   still apply; site.css loads last so the grid and padding below win.
   ============================================================ */
.site-hero {
  position: relative;
  isolation: isolate;
  /* A column flex container with justify-content:center is what actually
     centres the band: .site-hero-inner is auto-height, so as a block it would
     hug the top and leave every pixel of extra min-height as dead space. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--site-nav-h));
  min-height: calc(100svh - var(--site-nav-h));
  padding-block: clamp(3rem, 8vh, 5rem);
  padding-inline: 0;
}
.site-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ar-s-10);
  align-items: center;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--ar-s-4);
}
/* Primary tint + committed grunge texture over the themed background. */
.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: linear-gradient(135deg, var(--ar-primary) 0%, transparent 58%), var(--ar-texture);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* Fades the band into the page background so there is no hard seam. */
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, var(--ar-base-100) 100%);
}
.site-hero > * { position: relative; z-index: 1; }

.site-hero-text { min-width: 0; }
.site-hero-kicker { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-primary); }
.site-hero-title { margin: var(--ar-s-3) 0 0; font-size: clamp(3rem, 11vw, 6.5rem); line-height: 0.92; font-weight: 800; letter-spacing: -0.035em; }
.site-hero-tag { margin: var(--ar-s-5) 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ar-gray-600); }
.site-hero-cta { display: flex; flex-wrap: wrap; gap: var(--ar-s-3); margin-top: var(--ar-s-8); }
.site-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ar-s-3); margin: var(--ar-s-4) 0 0; font-size: 0.9rem; font-weight: 600; }
.site-hero-links a { color: var(--ar-gray-600); }
.site-hero-links a:hover { color: var(--ar-primary); }
.site-hero-links span { color: var(--ar-gray-400); }
.site-hero-install { position: relative; margin-top: var(--ar-s-6); max-width: 34rem; border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-3) 5rem var(--ar-s-3) var(--ar-s-4); font-size: 0.8rem; line-height: 1.7; }
.site-hero-install pre { margin: 0; overflow-x: auto; }

.site-hero-preview { display: flex; flex-direction: column; gap: var(--ar-s-4); border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-5); box-shadow: var(--ar-shadow-xl); }
.site-hero-preview .ar-card { background: var(--ar-base-200); border: 1px solid var(--ar-base-300); }
.site-hero-panel-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ar-s-3); }
.site-hero-panel-kicker { margin: 0; font-family: var(--ar-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-gray-500); }
.site-hero-panel-title { margin: var(--ar-s-1) 0 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.site-hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ar-s-3); }
.site-hero-meter { display: flex; align-items: center; gap: var(--ar-s-3); font-size: 0.8rem; color: var(--ar-gray-600); }
.site-hero-meter .ar-progress { flex: 1; min-width: 6rem; }

@media (min-width: 1024px) {
  .site-hero-inner { grid-template-columns: 1.05fr 0.95fr; padding-inline: var(--ar-s-8); }
}

/* Components catalog */
.site-catalog-head { text-align: center; margin-top: var(--ar-s-10); }
.site-catalog-title { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.site-catalog-count { margin: var(--ar-s-2) 0 0; font-size: 0.9rem; color: var(--ar-gray-600); }
.site-catalog-group { margin-top: var(--ar-s-12); }
.site-catalog-group-title { margin: 0 0 var(--ar-s-5); font-size: 1.1rem; font-weight: 700; padding-bottom: var(--ar-s-2); border-bottom: 1px solid var(--ar-base-300); }
.site-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--ar-s-4); }
.site-comp { display: block; border: 1px solid var(--ar-base-300); border-radius: var(--ar-radius-box); background: var(--ar-base-100); padding: var(--ar-s-4); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
a.site-comp:hover { border-color: var(--ar-primary); box-shadow: var(--ar-shadow-lg); transform: translateY(-2px); }
.site-comp-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--ar-radius-field); background: linear-gradient(135deg, var(--ar-base-300), var(--ar-base-200)); color: var(--ar-gray-600); font-family: var(--ar-font-mono); font-size: 0.8rem; }
.site-comp-name { display: block; margin-top: var(--ar-s-3); font-size: 1rem; font-weight: 700; }
.site-comp-desc { display: block; margin-top: var(--ar-s-1); font-size: 0.85rem; line-height: 1.5; color: var(--ar-gray-600); }