/* ArchCSS Documentation - site-specific styles */ /* Most visual styling now lives on the HTML elements as ArchCSS utility classes (bg-dark, flex, gap-2, px-3, rounded-10, ...). What remains here is only what ArchCSS has no corresponding utility for: a few custom pixel dimensions, scrollbar pseudo-elements, the hero gradient, and the JS-toggled open/active states. Progressively shrinking toward zero as the framework grows utilities to cover what's still here. */ /* VARIABLES * Custom pixel dimensions with no matching ArchCSS utility scale step * ---------------------------------------------------------------- */ :root { --docs-nav-height : 60px; --docs-sidebar-width : 272px; --docs-content-max : 860px; } /* RESET / BASE * Scroll behavior; box sizing and color/font now come from ArchCSS utilities on * ---------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* PERMALINKS * In-page anchor targets land below the fixed navbar so the heading * stays visible instead of being hidden behind it * ---------------------------------------------------------------- */ .docs-content [id] { scroll-margin-top: calc(var(--docs-nav-height) + 1.25rem); } /* PERMALINK TARGET HIGHLIGHT * The heading the URL hash points to gets a soft accent so the reader * can tell which section is the current one * ---------------------------------------------------------------- */ .docs-content :target { background: linear-gradient(90deg, rgba(3, 169, 244, 0.14), 5rem, rgba(3, 169, 244, 0)); border-radius: 4px; padding-right: .75rem; } /* TOP NAVBAR * Only the multi-property transition stays here; the background comes from * utility classes on the element (bg-none on the home hero, bg-dark elsewhere) * ---------------------------------------------------------------- */ .docs-nav { transition: background .18s ease, box-shadow .18s ease, color .18s ease; } /* Darkened navbar when page is scrolled */ .docs-nav.docs-nav--dark { background: rgba(15, 23, 42, 0.98); /* near-opaque dark */ box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35); } .docs-nav__menu-btn { display: none; } .docs-overlay { display: none; } .docs-sidebar__nav { list-style: none; } /* LAYOUT WRAPPER * Sidebar/nav offsets use the custom pixel dimensions above * ---------------------------------------------------------------- */ .docs-wrapper { padding-top: var(--docs-nav-height); } /* SIDEBAR * Fixed width/offset and custom scrollbar styling * ---------------------------------------------------------------- */ .docs-sidebar { top: var(--docs-nav-height); width: var(--docs-sidebar-width); height: calc(100vh - var(--docs-nav-height)); scrollbar-width: thin; scrollbar-color: #334155 transparent; } .docs-sidebar::-webkit-scrollbar { width: 4px; } .docs-sidebar::-webkit-scrollbar-track { background: transparent; } .docs-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; } /* Sidebar links: block/padding/radius/hover-background now come from * utility classes on each (hover:bg-white-alpha-10). What's left: * - color needs !important because ArchCSS's base layer sets * "ul li [href] { color: currentcolor }", which outranks a plain * class selector like ".docs-sidebar__nav a" * - the "current page" background/color is a JS-toggled .active class, * not a CSS :active pseudo-class, so it can't use the active: state * utility (that targets :active, i.e. mouse-down) * - combining two transition-property values (background, color) has * no utility equivalent; transition-background/-color would each set * the same CSS property and overwrite each other, not combine * ---------------------------------------------------------------- */ .docs-sidebar__nav a { color: #94a3b8 !important; transition: background .12s, color .12s; text-decoration: none; } .docs-sidebar__nav a:hover { color: #fff !important; } .docs-sidebar__nav a.active { background: rgba(255, 255, 255, .1); color: #03A9F4 !important; font-weight: 600; } /* MAIN CONTENT * Offset by the custom sidebar width, capped at the custom content width * ---------------------------------------------------------------- */ .docs-main { margin-left: var(--docs-sidebar-width); } .docs-content { max-width: var(--docs-content-max); margin: 0 auto; } /* PAGE HEADER AND PROSE * Plain h1/h2/h3/p elements have no per-element classes to hang * utility classes on, so typography stays here, matching how ArchCSS * itself styles bare elements in its own base layer * ---------------------------------------------------------------- */ .docs-page-header h1 { font-size: 2rem; font-weight: 800; margin: 0 0 .5rem; color: #212529; line-height: 1.2; } .docs-page-header p { font-size: 1.0625rem; color: #333; margin: 0; max-width: 680px; line-height: 1.6; } .docs-content h2 { font-size: 1.375rem; font-weight: 700; color: #212529; margin: 2.5rem 0 .75rem; padding-top: .5rem; } .docs-content h3 { font-size: 1.0625rem; font-weight: 600; color: #212529; margin: 1.75rem 0 .5rem; } .docs-content p { color: #333; line-height: 1.7; margin: .5rem 0 1rem; } .docs-content p code, .docs-content li code, .docs-content td code { font-size: .8125rem; background: #f5f5f5; color: #212529; padding: .1em .4em; border-radius: 4px; border: 1px solid #ddd; } /* CODE BLOCKS * ---------------------------------------------------------------- */ .docs-code__copy { transition: background .15s, color .15s; } /* Hover and "copied" (JS-toggled) states need distinct colors, not just * a different opacity of the base color, so they stay as CSS */ .docs-code__copy:hover { background: #475569; color: #fff; } .docs-code__copy.copied { background: #166534; color: #86efac; } /* SYNTAX HIGHLIGHT COLORS * Token colors snapped to the nearest ArchCSS theme color * ---------------------------------------------------------------- */ .tok-tag { color: #0DCAF0; } .tok-attr { color: #28a745; } .tok-string { color: #DC3545; } .tok-class { color: #FFC107; } .tok-value { color: #9C27B0; } .tok-comment { color: #94a3b8; font-style: italic; } .tok-prop { color: #03A9F4; } /* REFERENCE TABLE * Paragraph cells inherit the body font, but the

 tokens scattered
 * through them default to monospace, so the table reads as two fonts at
 * once. Point the table's own font (and its code tokens) at the body font
 * to keep the body/content visually uniform. Standalone code blocks
 * (.docs-code) keep their mono face.
 * ---------------------------------------------------------------- */
.docs-table { font-family: inherit; }
.docs-table td,
.docs-table th { font-family: inherit; }
.docs-table td code,
.docs-table th code { font-family: inherit; }

.docs-table th {
  background: #f5f5f5;
  color: #333;
  font-weight: 600;
  text-align: left;
  padding: .6rem 1rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #ddd;
}

.docs-table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #f5f5f5;
  color: #212529;
  vertical-align: middle;
}

.docs-table tr:last-child td { border-bottom: none; }
.docs-table tr:hover td { background: #f5f5f5; }

.docs-table td:first-child code {
  font-size: .8125rem;
  color: #0288d1;
  background: #e0f2fe;
  padding: .15em .5em;
  border-radius: 4px;
}

.docs-table td:last-child { color: #64748b; font-size: .8125rem; }

/* COLOR SWATCHES
 * A fixed 60px swatch height with no matching ArchCSS utility scale step
 * (the h-* utilities are percentages), so it stays as a custom dimension
 * ---------------------------------------------------------------- */
.docs-swatch__color { height: 60px; }

/* RESPONSIVE
 * Sidebar collapse: JS toggles .open, custom breakpoint doesn't match
 * the ArchCSS scale (would shift the collapse point)
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .docs-main { margin-left: 0; }

  .docs-sidebar {
    transform: translateX(-100%);
  }

  .docs-sidebar.open {
    transform: translateX(0);
  }

  .docs-overlay.open { display: block; }

  .docs-nav__menu-btn { display: flex; }

  .docs-nav__links .hide-mobile { display: none; }
}

/* LANDING PAGE SPECIFIC
 * All of this is unique to index.html: custom pixel dimensions, the hero
 * gradient, and fluid/clamp typography that have no matching ArchCSS
 * utility, so they stay here rather than adding verbatim values to the
 * markup. Flex centering, color, and weight now live as utility classes
 * on the elements.
 * ---------------------------------------------------------------- */
.docs-hero {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0d2137 100%);
  min-height: calc(100vh - var(--docs-nav-height));
}

.docs-hero__content { max-width: 680px; }

.docs-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin: 0 0 1.25rem;
  line-height: 1.1;
}

.docs-hero__sub {
  font-size: 1.1875rem;
  color: #94a3b8;
  margin: 0 0 2rem;
  line-height: 1.6;
  max-width: 560px;
}

.docs-features { margin: 2rem 0; }

.docs-feature-card {
  transition: box-shadow .2s, transform .2s;
}

.docs-feature-card:hover {
  transform: translateY(-2px);
}

.docs-install-block {
  max-width: 480px;
}