@knitli/docs-components 1.1.1 → 1.1.3

package/src/styles/docs-theme.css

@@ -1,682 +0,0 @@
-/**
- * @file docs-theme.css
- * @description Complete Copper Archive theme for Knitli documentation
- * @usage Import this file for full theme styling with all components
- */
-
-/* Import color palette and variables */
-@import "@knitli/layouts/styles/variables.css";
-@import "@knitli/layouts/styles/textures.css";
-
-/* ========================================
-   GOOGLE FONTS
-   ======================================== */
-
-@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Serif:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");
-
-/* ========================================
-   GLOBAL STYLES
-   ======================================== */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: var(--font-sm);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-cw-body);
-  font-size: var(--font-base);
-  line-height: var(--leading-normal);
-  color: var(--docs-text-primary);
-  background: var(--docs-parchment);
-  position: relative;
-}
-
-/* Subtle paper grain texture */
-body::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000'/%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23fff' fill-opacity='0.03'/%3E%3C/svg%3E");
-  opacity: 0.5;
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* ========================================
-   TYPOGRAPHY
-   ======================================== */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-docs-display);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-tight);
-  color: var(--docs-slate);
-  margin-top: 0;
-  margin-bottom: var(--space-4);
-  letter-spacing: var(--tracking-tight);
-}
-
-h1 {
-  font-size: var(--text-5xl);
-  margin-bottom: var(--space-6);
-}
-
-h2 {
-  font-size: var(--text-3xl);
-  margin-bottom: var(--space-5);
-}
-
-h3 {
-  font-size: var(--text-2xl);
-}
-
-h4 {
-  font-size: var(--text-xl);
-}
-
-h5,
-h6 {
-  font-size: var(--text-lg);
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: var(--space-4);
-  line-height: var(--leading-relaxed);
-}
-
-a {
-  color: var(--docs-copper);
-  text-decoration: none;
-  transition: color var(--timing-fast) var(--ease-out);
-}
-
-a:hover {
-  color: var(--docs-copper-hover);
-}
-
-code {
-  font-family: var(--font-docs-code);
-  font-size: 0.9em;
-  background: var(--docs-code-bg);
-  color: var(--docs-code-text);
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-}
-
-pre {
-  font-family: var(--font-docs-code);
-  font-size: var(--text-sm);
-  background: var(--docs-code-bg);
-  color: var(--docs-code-text);
-  padding: var(--code-padding);
-  border-radius: var(--code-radius);
-  overflow-x: auto;
-  margin: var(--space-4) 0;
-}
-
-pre code {
-  background: transparent;
-  padding: 0;
-}
-
-/* ========================================
-   DOCUMENT CARD COMPONENT
-   ======================================== */
-
-.doc-card {
-  /* Base styling */
-  background: linear-gradient(
-    135deg,
-    var(--docs-parchment) 0%,
-    var(--docs-cream) 100%
-  );
-  border: var(--card-border-width) solid var(--docs-border-light);
-  border-radius: var(--card-radius);
-  padding: var(--card-padding);
-  position: relative;
-
-  /* Embossed shadow effect */
-  box-shadow: var(--shadow-emboss);
-
-  /* Smooth transitions */
-  transition: all var(--timing-base) var(--ease-in-out);
-}
-
-/* Copper corner brackets */
-.doc-card::before,
-.doc-card::after {
-  content: "";
-  position: absolute;
-  width: var(--bracket-size);
-  height: var(--bracket-size);
-  border: var(--bracket-width) solid var(--bracket-color);
-  transition: border-color var(--timing-base) var(--ease-out);
-}
-
-.doc-card::before {
-  top: -1px;
-  left: -1px;
-  border-right: none;
-  border-bottom: none;
-  border-top-left-radius: var(--card-radius);
-}
-
-.doc-card::after {
-  bottom: -1px;
-  right: -1px;
-  border-left: none;
-  border-top: none;
-  border-bottom-right-radius: var(--card-radius);
-}
-
-/* Brass polish glow effect */
-.doc-card > .card-glow {
-  content: "";
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: radial-gradient(
-    circle at center,
-    rgba(184, 108, 48, 0.08) 0%,
-    transparent 70%
-  );
-  opacity: 0;
-  transition: opacity var(--timing-slow) var(--ease-out);
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Hover state - brass polish effect */
-.doc-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-emboss-hover);
-}
-
-.doc-card:hover::before,
-.doc-card:hover::after {
-  border-color: var(--docs-copper-hover);
-}
-
-.doc-card:hover > .card-glow {
-  opacity: 1;
-}
-
-/* Active/pressed state */
-.doc-card:active {
-  transform: translateY(-2px);
-}
-
-/* Mobile adjustments */
-@media (max-width: 768px) {
-  .doc-card {
-    padding: var(--card-padding-mobile);
-  }
-}
-
-/* ========================================
-   CARD CONTENT ELEMENTS
-   ======================================== */
-
-.card-status {
-  position: absolute;
-  top: var(--space-4);
-  right: var(--space-4);
-  font-family: var(--font-docs-ui);
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wider);
-  color: var(--docs-copper);
-  background: var(--docs-white);
-  padding: var(--space-1) var(--space-3);
-  border-radius: var(--radius-full);
-  border: 1px solid var(--docs-copper);
-}
-
-.card-icon {
-  font-size: var(--text-4xl);
-  margin-bottom: var(--space-4);
-  display: block;
-}
-
-.card-title {
-  font-family: var(--font-docs-display);
-  font-size: var(--text-3xl);
-  font-weight: var(--font-medium);
-  color: var(--docs-slate);
-  margin-bottom: var(--space-3);
-  letter-spacing: var(--tracking-tight);
-  position: relative;
-  z-index: 1;
-}
-
-.card-description {
-  font-family: var(--font-docs-body);
-  font-size: var(--text-base);
-  line-height: var(--leading-relaxed);
-  color: var(--docs-ink);
-  opacity: 0.85;
-  margin-bottom: var(--space-6);
-  position: relative;
-  z-index: 1;
-}
-
-.card-meta {
-  font-family: var(--font-docs-ui);
-  font-size: var(--text-sm);
-  color: var(--docs-slate);
-  opacity: 0.6;
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
-  margin-bottom: var(--space-6);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  position: relative;
-  z-index: 1;
-}
-
-.card-action {
-  font-family: var(--font-docs-ui);
-  font-size: var(--text-base);
-  font-weight: var(--font-semibold);
-  color: var(--docs-copper);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  position: relative;
-  z-index: 1;
-}
-
-/* Animated underline */
-.card-action::after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--docs-copper);
-  transition: width var(--timing-base) var(--ease-out);
-}
-
-.card-action:hover::after {
-  width: calc(100% - 1.5rem);
-}
-
-/* Arrow animation */
-.card-action .arrow {
-  transition: transform var(--timing-base) var(--ease-out);
-}
-
-.card-action:hover .arrow {
-  transform: translateX(4px);
-}
-
-.revision-stamp {
-  position: absolute;
-  bottom: var(--space-3);
-  right: var(--space-3);
-  font-family: var(--font-docs-display);
-  font-size: var(--text-xs);
-  color: var(--docs-copper);
-  opacity: 0.5;
-  transform: rotate(-5deg);
-  letter-spacing: var(--tracking-wider);
-  z-index: 0;
-}
-
-/* ========================================
-   BRANDED HEADER
-   ======================================== */
-
-.docs-header {
-  background: var(--docs-parchment);
-  border-bottom: 1px solid var(--docs-border-light);
-  padding: var(--space-4) var(--space-8);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-
-  /* Copper accent line */
-  box-shadow:
-    inset 0 -2px 0 var(--docs-copper),
-    0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.docs-header-content {
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.docs-logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  text-decoration: none;
-  font-family: var(--font-docs-display);
-  font-size: var(--text-lg);
-  color: var(--docs-slate);
-  font-weight: var(--font-semibold);
-}
-
-.docs-logo img {
-  height: 32px;
-  width: auto;
-}
-
-.logo-separator {
-  color: var(--docs-copper);
-  opacity: 0.5;
-}
-
-.logo-section {
-  color: var(--docs-copper);
-}
-
-.docs-nav {
-  display: flex;
-  gap: var(--space-8);
-}
-
-.docs-nav a {
-  font-family: var(--font-docs-ui);
-  font-size: var(--text-base);
-  color: var(--docs-slate);
-  text-decoration: none;
-  position: relative;
-  padding: var(--space-1) 0;
-}
-
-.docs-nav a::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0;
-  height: 1px;
-  background: var(--docs-copper);
-  transition: width var(--timing-fast) var(--ease-out);
-}
-
-.docs-nav a:hover::after {
-  width: 100%;
-}
-
-.docs-nav a.external::before {
-  content: "↗";
-  margin-right: var(--space-1);
-  opacity: 0.6;
-}
-
-/* Mobile header adjustments */
-@media (max-width: 768px) {
-  .docs-header {
-    padding: var(--space-4);
-  }
-
-  .docs-header-content {
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .docs-nav {
-    width: 100%;
-    justify-content: space-between;
-    gap: var(--space-4);
-  }
-}
-
-/* ========================================
-   HERO SECTION
-   ======================================== */
-
-.docs-hero {
-  text-align: center;
-  padding: var(--space-20) var(--space-8);
-  background: radial-gradient(
-    ellipse at center,
-    var(--docs-parchment) 0%,
-    var(--docs-cream) 100%
-  );
-  position: relative;
-}
-
-.docs-hero-title {
-  font-family: var(--font-docs-display);
-  font-size: var(--text-6xl);
-  font-weight: var(--font-medium);
-  letter-spacing: var(--tracking-tight);
-  color: var(--docs-slate);
-  margin-bottom: var(--space-4);
-}
-
-.docs-hero-tagline {
-  font-family: var(--font-docs-body);
-  font-size: var(--text-2xl);
-  color: var(--docs-ink);
-  opacity: 0.7;
-  margin-bottom: var(--space-6);
-}
-
-.docs-hero-separator {
-  width: 120px;
-  height: 2px;
-  background: var(--docs-copper);
-  margin: var(--space-8) auto;
-}
-
-.docs-hero-revision {
-  position: absolute;
-  top: var(--space-4);
-  right: var(--space-8);
-  font-family: var(--font-docs-display);
-  font-size: var(--text-xs);
-  color: var(--docs-copper);
-  opacity: 0.5;
-  letter-spacing: var(--tracking-wide);
-}
-
-/* Mobile hero adjustments */
-@media (max-width: 768px) {
-  .docs-hero {
-    padding: var(--space-12) var(--space-4);
-  }
-
-  .docs-hero-title {
-    font-size: var(--text-4xl);
-  }
-
-  .docs-hero-tagline {
-    font-size: var(--text-lg);
-  }
-}
-
-/* ========================================
-   CARD GRID LAYOUT
-   ======================================== */
-
-.doc-cards {
-  display: grid;
-  gap: var(--space-8);
-  padding: var(--space-8);
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-}
-
-/* Desktop: 3 columns */
-@media (min-width: 1024px) {
-  .doc-cards {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-/* Tablet: 2 columns */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .doc-cards {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-6);
-  }
-}
-
-/* Mobile: 1 column */
-@media (max-width: 767px) {
-  .doc-cards {
-    grid-template-columns: 1fr;
-    gap: var(--space-6);
-    padding: var(--space-4);
-  }
-}
-
-/* ========================================
-   ANIMATIONS
-   ======================================== */
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Staggered card reveals */
-.doc-card:nth-child(1) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.1s both;
-}
-
-.doc-card:nth-child(2) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.2s both;
-}
-
-.doc-card:nth-child(3) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.3s both;
-}
-
-.doc-card:nth-child(4) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.4s both;
-}
-
-.doc-card:nth-child(5) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.5s both;
-}
-
-.doc-card:nth-child(6) {
-  animation: fadeInUp 0.6s var(--ease-in-out) 0.6s both;
-}
-
-/* ========================================
-   ACCESSIBILITY
-   ======================================== */
-
-/* Focus states */
-*:focus-visible {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: var(--focus-ring-offset);
-  border-radius: var(--radius-sm);
-}
-
-.doc-card:focus-visible {
-  outline-offset: 8px;
-}
-
-a:focus-visible {
-  outline-offset: 2px;
-}
-
-/* Screen reader only */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: inherit;
-  margin: inherit;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-
-  .doc-card {
-    transform: none !important;
-  }
-
-  .card-action .arrow {
-    transform: none !important;
-  }
-}
-
-/* ========================================
-   PRINT STYLES
-   ======================================== */
-
-@media print {
-  body::before {
-    display: none;
-  }
-
-  .docs-header,
-  .docs-nav {
-    display: none;
-  }
-
-  .doc-card {
-    box-shadow: none;
-    border: 1px solid #000;
-    page-break-inside: avoid;
-  }
-
-  .doc-card::before,
-  .doc-card::after {
-    display: none;
-  }
-}