@cbnventures/docusaurus-preset-nova 0.0.0 → 0.15.0

package/build/src/styles/presets/envoy/components/blog-preview/style.css

@@ -0,0 +1,147 @@
+/**
+ * Envoy — Blog preview visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Blog Preview Section
+ * ============================ */
+
+/* Section heading with comfortable spacing below. */
+.nova-blog-preview-no-description .nova-blog-preview-heading {
+  margin-bottom: calc(var(--nova-shape-gap) * 2);
+}
+
+.nova-blog-preview-has-description .nova-blog-preview-heading {
+  margin-bottom: var(--nova-shape-gap);
+}
+
+.nova-blog-preview-description {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--nova-color-neutral-500);
+  margin-bottom: calc(var(--nova-shape-gap) * 1.5);
+}
+
+[data-theme="dark"] .nova-blog-preview-description {
+  color: var(--nova-color-neutral-400);
+}
+
+/* ============================
+ * 2. Blog Preview Cards
+ * ============================ */
+
+/* Elevated glass card with violet border and premium shadow. */
+.nova-blog-preview-card {
+  padding: var(--nova-shape-padding);
+
+  background-color: var(--nova-envoy-surface-raised-light);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-radius: var(--nova-envoy-radius-generous);
+  box-shadow: var(--nova-envoy-shadow-card);
+
+  transition: transform var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
+    border-color var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (min-width: 768px) {
+  .nova-blog-preview-card {
+    padding: calc(var(--nova-shape-padding) * 1.5);
+  }
+}
+
+/* Hover: lifts with violet-tinted shadow and accent border. */
+.nova-blog-preview-card:hover {
+  border-color: var(--nova-color-primary-300);
+  box-shadow: var(--nova-envoy-shadow-card-hover);
+
+  transform: translateY(calc(-3px * var(--nova-motion-hover-effects)));
+}
+
+/* Dark mode: glass-like card surface with violet glow. */
+[data-theme="dark"] .nova-blog-preview-card {
+  background-color: var(--nova-envoy-surface-raised-dark);
+  border-color: var(--nova-envoy-border-dark);
+  box-shadow: var(--nova-envoy-shadow-dark-card);
+}
+
+[data-theme="dark"] .nova-blog-preview-card:hover {
+  border-color: var(--nova-color-primary-600);
+  box-shadow: var(--nova-envoy-shadow-dark-card-hover);
+}
+
+/* ============================
+ * 3. Card Content
+ * ============================ */
+
+/* Date label in small violet accent type. */
+.nova-blog-preview-card time {
+  display: block;
+  margin-bottom: calc(var(--nova-shape-gap) * 0.5);
+
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--nova-color-primary-600);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+[data-theme="dark"] .nova-blog-preview-card time {
+  color: var(--nova-color-primary-400);
+}
+
+/* Card title styled with display font. */
+.nova-blog-preview-card h3 {
+  margin-bottom: calc(var(--nova-shape-gap) * 0.5);
+
+  font-family: var(--nova-font-display);
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-800);
+}
+
+[data-theme="dark"] .nova-blog-preview-card h3 {
+  color: var(--nova-color-neutral-100);
+}
+
+/* Description in neutral muted tone. */
+.nova-blog-preview-card p {
+  margin-bottom: calc(var(--nova-shape-gap) * 0.75);
+
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-blog-preview-card p {
+  color: var(--nova-color-neutral-400);
+}
+
+/* Read-more link with violet accent. */
+.nova-blog-preview-card a {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--nova-color-primary-600);
+
+  text-decoration: none;
+
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-preview-card a:hover,
+.nova-blog-preview-card a:focus-visible {
+  color: var(--nova-color-primary-700);
+
+  text-decoration: underline;
+}
+
+[data-theme="dark"] .nova-blog-preview-card a {
+  color: var(--nova-color-primary-400);
+}
+
+[data-theme="dark"] .nova-blog-preview-card a:hover,
+[data-theme="dark"] .nova-blog-preview-card a:focus-visible {
+  color: var(--nova-color-primary-300);
+}

package/build/src/styles/presets/envoy/components/features/style.css

@@ -0,0 +1,262 @@
+/**
+ * Envoy — Features section visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Features Container
+ * ============================ */
+
+.nova-features-heading {
+  text-align: center;
+}
+
+/* ============================
+ * 2. Feature Card
+ * ============================ */
+
+/* Individual feature card with elevated styling and top-border accent. */
+.nova-feature-card {
+  position: relative;
+
+  padding: var(--nova-shape-padding);
+
+  background-color: var(--nova-envoy-surface-raised-light);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-radius: var(--nova-envoy-radius-generous);
+  box-shadow: var(--nova-envoy-shadow-card);
+
+  transition: transform var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1),
+    border-color var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.nova-feature-card::before {
+  position: absolute;
+  top: 0;
+  left: 1.5rem;
+  right: 1.5rem;
+
+  height: 2px;
+
+  content: "";
+
+  background: var(--nova-envoy-gradient-hero);
+  border-radius: 0 0 2px 2px;
+
+  opacity: 0;
+
+  transition: opacity var(--nova-motion-duration) cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.nova-feature-card:hover {
+  border-color: var(--nova-color-primary-300);
+  box-shadow: var(--nova-envoy-shadow-card-hover);
+
+  transform: translateY(-3px);
+}
+
+.nova-feature-card:hover::before {
+  opacity: 1;
+}
+
+[data-theme="dark"] .nova-feature-card {
+  background-color: var(--nova-envoy-surface-raised-dark);
+  border-color: var(--nova-envoy-border-dark);
+  box-shadow: var(--nova-envoy-shadow-dark-card);
+}
+
+[data-theme="dark"] .nova-feature-card:hover {
+  border-color: var(--nova-color-primary-600);
+  box-shadow: var(--nova-envoy-shadow-dark-card-hover);
+}
+
+[data-theme="dark"] .nova-feature-card::before {
+  background: var(--nova-envoy-gradient-hero-dark);
+}
+
+.nova-feature-card-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--nova-color-primary-500);
+}
+
+[data-theme="dark"] .nova-feature-card-icon {
+  color: var(--nova-color-primary-400);
+}
+
+.nova-feature-card-title {
+  margin-bottom: 0.625rem;
+
+  font-family: var(--nova-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-800);
+}
+
+[data-theme="dark"] .nova-feature-card-title {
+  color: var(--nova-color-neutral-100);
+}
+
+.nova-feature-card-description {
+  margin: 0;
+
+  font-size: 0.9rem;
+  line-height: 1.65;
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-feature-card-description {
+  color: var(--nova-color-neutral-400);
+}
+
+/* ============================
+ * 3. Animations
+ * ============================ */
+
+/* Content sections animate in on scroll with increasing delay. */
+main > section {
+  opacity: 0;
+
+  animation: envoy-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 100ms);
+}
+
+main > section:nth-child(1) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 80ms);
+}
+
+main > section:nth-child(2) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 200ms);
+}
+
+main > section:nth-child(3) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 320ms);
+}
+
+main > section:nth-child(4) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 440ms);
+}
+
+main > section:nth-child(5) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 560ms);
+}
+
+main > section:nth-child(6) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 680ms);
+}
+
+/* Feature cards stagger within their grid with scale-in + fade. */
+.nova-feature-card {
+  opacity: 0;
+
+  animation: envoy-scale-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.nova-feature-card:nth-child(1) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 100ms);
+}
+
+.nova-feature-card:nth-child(2) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 200ms);
+}
+
+.nova-feature-card:nth-child(3) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 300ms);
+}
+
+.nova-feature-card:nth-child(4) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 400ms);
+}
+
+.nova-feature-card:nth-child(5) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 500ms);
+}
+
+.nova-feature-card:nth-child(6) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 600ms);
+}
+
+/* Doc card list items stagger in. */
+.doc-card-list article {
+  opacity: 0;
+
+  animation: envoy-scale-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.doc-card-list article:nth-child(1) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 60ms);
+}
+
+.doc-card-list article:nth-child(2) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 140ms);
+}
+
+.doc-card-list article:nth-child(3) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 220ms);
+}
+
+.doc-card-list article:nth-child(4) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 300ms);
+}
+
+.doc-card-list article:nth-child(5) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 380ms);
+}
+
+.doc-card-list article:nth-child(6) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 460ms);
+}
+
+/* Stat values stagger in with a scale entrance. */
+.nova-stat {
+  opacity: 0;
+
+  animation: envoy-scale-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.nova-stat:nth-child(1) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 100ms);
+}
+
+.nova-stat:nth-child(2) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 200ms);
+}
+
+.nova-stat:nth-child(3) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 300ms);
+}
+
+.nova-stat:nth-child(4) {
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 400ms);
+}
+
+/* Cards lift and deepen their shadow on hover with a smooth spring. */
+.nova-card:hover,
+.card:hover,
+.doc-card-list article:hover {
+  transform: translateY(calc(var(--nova-motion-hover-effects) * -4px));
+
+  box-shadow: 0 8px 28px rgb(0 0 0 / 0.1), 0 2px 8px rgb(0 0 0 / 0.04);
+}
+
+[data-theme="dark"] .nova-card:hover,
+[data-theme="dark"] .card:hover,
+[data-theme="dark"] .doc-card-list article:hover {
+  box-shadow: 0 8px 28px rgb(0 0 0 / 0.25), 0 4px 12px color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+/* Feature card hover — lifts higher with violet-tinted shadow. */
+.nova-feature-card:hover {
+  transform: translateY(calc(var(--nova-motion-hover-effects) * -6px));
+
+  border-color: var(--nova-color-primary-300);
+  box-shadow: 0 12px 36px color-mix(in srgb, var(--nova-color-primary-500), transparent 90%), 0 4px 12px rgb(0 0 0 / 0.05);
+}
+
+[data-theme="dark"] .nova-feature-card:hover {
+  border-color: var(--nova-color-primary-600);
+  box-shadow: 0 12px 36px color-mix(in srgb, var(--nova-color-primary-500), transparent 85%), 0 4px 16px rgb(0 0 0 / 0.2);
+}

package/build/src/styles/presets/envoy/components/hero/style.css

@@ -0,0 +1,187 @@
+/**
+ * Envoy — Hero section visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Hero Section
+ * ============================ */
+
+/* Hero section with generous vertical padding and subtle radial glow. */
+.nova-hero {
+  position: relative;
+
+  padding: 4rem 0 var(--nova-section-gap);
+
+  text-align: center;
+
+  overflow: hidden;
+}
+
+.nova-hero::before {
+  position: absolute;
+  top: -40%;
+  left: 50%;
+
+  width: 100%;
+  max-width: 800px;
+  height: 600px;
+
+  content: "";
+
+  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--nova-color-primary-500), transparent 94%) 0%, transparent 70%);
+
+  transform: translateX(-50%);
+
+  pointer-events: none;
+}
+
+[data-theme="dark"] .nova-hero::before {
+  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--nova-color-primary-500), transparent 90%) 0%, color-mix(in srgb, var(--nova-color-accent-500), transparent 96%) 50%, transparent 70%);
+}
+
+.nova-hero-inner {
+  position: relative;
+}
+
+/* ============================
+ * 2. Eyebrow
+ * ============================ */
+
+/* Byline label above the heading with pill badge styling. */
+.nova-hero-eyebrow {
+  display: inline-block;
+  margin-bottom: 1.25rem;
+  padding: 0.3rem 1rem;
+
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--nova-color-primary-700);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+  border: 1px solid color-mix(in srgb, var(--nova-color-primary-500), transparent 85%);
+  border-radius: var(--nova-envoy-radius-pill);
+}
+
+[data-theme="dark"] .nova-hero-eyebrow {
+  color: var(--nova-color-primary-300);
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+}
+
+/* ============================
+ * 3. Heading
+ * ============================ */
+
+/* Large display heading with violet-to-cyan gradient text. */
+.nova-hero-heading {
+  margin-bottom: 1.5rem;
+
+  font-family: var(--nova-font-display);
+  font-size: 2.5rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+
+  padding-bottom: 0.1em;
+
+  background: var(--nova-envoy-gradient-hero);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+[data-theme="dark"] .nova-hero-heading {
+  background: var(--nova-envoy-gradient-hero-dark);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media (min-width: 640px) {
+  .nova-hero {
+    padding: 5rem 0 var(--nova-section-gap);
+  }
+
+  .nova-hero-heading {
+    font-size: 3rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .nova-hero-heading {
+    font-size: 3.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .nova-hero {
+    padding: 6rem 0 var(--nova-section-gap);
+  }
+
+  .nova-hero-heading {
+    font-size: 3.75rem;
+  }
+}
+
+/* ============================
+ * 4. Tagline
+ * ============================ */
+
+/* Tagline paragraph below the heading. */
+.nova-hero-tagline {
+  margin: 0 auto 2.5rem;
+
+  font-size: 1.05rem;
+  line-height: 1.75;
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-hero-tagline {
+  color: var(--nova-color-neutral-400);
+}
+
+@media (min-width: 640px) {
+  .nova-hero-tagline {
+    font-size: 1.175rem;
+  }
+}
+
+/* ============================
+ * 5. CTA Row
+ * ============================ */
+
+/* CTA button row. */
+.nova-hero-actions {
+  gap: 1rem;
+}
+
+/* ============================
+ * 6. Animations
+ * ============================ */
+
+/* Eyebrow enters first, then heading, tagline, and finally the buttons. */
+.nova-hero-eyebrow {
+  animation: envoy-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 100ms);
+}
+
+.nova-hero-heading {
+  animation: envoy-hero-entrance 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 200ms);
+}
+
+.nova-hero-tagline {
+  animation: envoy-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 350ms);
+}
+
+.nova-hero-actions {
+  animation: envoy-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(var(--nova-motion-staggered-reveals) * 500ms);
+}