@gradial/aci 0.1.20-preview.2 → 0.1.20

package/templates/common/design-system/styles.css

@@ -0,0 +1,346 @@
+@import "tailwindcss" source(none);
+@import "./tokens/index.css";
+
+@source "../**/*.{astro,tsx,svelte,ts,jsx}";
+@source "../../.content/**/*.json";
+
+:root {
+  color-scheme: light;
+}
+
+[dir="rtl"] {
+  --gradient-hero-overlay: var(--gradient-hero-overlay-rtl);
+}
+
+.theme-auto,
+.theme-light {
+  color: var(--color-fg);
+  --color-fg: var(--color-text-primary);
+  --color-fg-muted: var(--color-text-secondary);
+  --color-surface-default: var(--color-white);
+  --color-surface-raised-default: var(--color-surface-100);
+  --color-edge: var(--color-border-default);
+  --color-icon-default: var(--color-text-tertiary);
+  --color-link-hover: var(--color-brand-600);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-light);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --shadow-card-default: var(--shadow-card);
+  --gradient-cta-default: var(--gradient-cta);
+
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-primary-hover-bg: var(--color-brand-500);
+  --button-primary-hover-border: var(--color-brand-500);
+
+  --button-secondary-bg: var(--color-surface-100);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--color-border-strong);
+
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+.theme-dark {
+  color: var(--color-fg);
+  color-scheme: dark;
+  --color-fg: var(--color-text-inverse);
+  --color-fg-muted: var(--color-surface-300);
+  --color-surface-default: var(--color-surface-900);
+  --color-surface-raised-default: var(--color-surface-800);
+  --color-chrome-surface-default: var(--color-surface-900);
+  --color-edge: var(--color-border-inverse);
+  --color-icon-default: var(--color-surface-400);
+  --color-link-hover: var(--color-brand-400);
+  --color-callout-icon-bg-default: var(--color-callout-icon-bg-dark);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-dark);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg-dark);
+  --shadow-card-default: var(--shadow-card-dark);
+  --gradient-cta-default: var(--gradient-cta-dark);
+
+  --button-primary-bg: var(--color-brand-500);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-brand-500);
+  --button-primary-hover-bg: var(--color-brand-400);
+  --button-primary-hover-border: var(--color-brand-400);
+
+  --button-secondary-bg: var(--color-surface-800);
+  --button-secondary-text: var(--color-white);
+  --button-secondary-border: var(--color-surface-700);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-white);
+  --button-outline-border: var(--color-border-inverse);
+
+  --button-tertiary-text: var(--color-brand-400);
+}
+
+.theme-accent {
+  color: var(--color-fg);
+  --color-fg: var(--color-white);
+  --color-fg-muted: var(--color-surface-300);
+  --color-surface-default: var(--color-surface-800);
+  --color-surface-raised-default: var(--color-surface-700);
+  --color-edge: var(--color-border-inverse);
+  --color-icon-default: var(--color-white);
+  --color-link-hover: var(--color-warm-400);
+  --gradient-cta-default: var(--gradient-cta);
+}
+
+.bm-header {
+  background: var(--header-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  --color-fg: var(--header-text);
+  --color-fg-muted: var(--header-muted);
+  --color-edge: var(--header-border);
+  --color-link-hover: var(--header-link-hover);
+  --color-icon-default: var(--header-icon);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--header-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+.bm-footer {
+  color: var(--footer-text);
+  background: var(--footer-bg);
+  --color-fg: var(--footer-text);
+  --color-fg-muted: var(--footer-muted);
+  --color-edge: var(--footer-border);
+  --color-link-hover: var(--footer-link-hover);
+  --color-icon-default: var(--footer-muted);
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--footer-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+@media (min-width: 1024px) {
+  .footer-main-grid {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+.bm-mobile-nav {
+  color: var(--mobile-nav-text);
+  background: var(--mobile-nav-bg);
+  --color-fg: var(--mobile-nav-text);
+  --color-fg-muted: var(--mobile-nav-muted);
+  --color-edge: var(--mobile-nav-border);
+  --color-link-hover: var(--mobile-nav-link-hover);
+  --color-icon-default: var(--mobile-nav-muted);
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--mobile-nav-border);
+  --button-tertiary-text: var(--color-accent-primary);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-page);
+  color: var(--color-fg);
+  font-family: var(--font-family-base);
+  font-size: var(--text-size-body);
+  line-height: var(--leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+img,
+svg {
+  display: block;
+}
+
+:focus-visible {
+  outline: 0.125rem solid var(--color-focus);
+  outline-offset: 0.125rem;
+}
+
+@layer base {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-block: 0;
+    color: var(--color-fg);
+    font-family: var(--font-family-heading);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-heading);
+  }
+
+  h1 {
+    font-size: var(--text-size-h1-mobile);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  h2 { font-size: var(--text-size-h2-mobile); }
+  h3 { font-size: var(--text-size-h3); }
+  h4 { font-size: var(--text-size-h4); }
+  h5 { font-size: var(--text-size-body-large); }
+  h6 { font-size: var(--text-size-body); }
+
+  @media (min-width: 768px) {
+    h1 { font-size: var(--text-size-h1); }
+    h2 { font-size: var(--text-size-h2); }
+  }
+
+  p, ul, ol, blockquote, pre {
+    margin-block: 0;
+  }
+
+  ul { list-style: disc; padding-left: 1.4em; }
+  ol { list-style: decimal; padding-left: 1.4em; }
+}
+
+/* Rich text styles */
+.bm-rich-text-section {
+  background: var(--color-surface-default);
+  padding: var(--spacing-section-y) var(--spacing-container);
+}
+
+.bm-rich-text-section--quiet {
+  background: var(--color-surface-muted);
+}
+
+.bm-rich-text {
+  max-width: var(--max-width-rich-text);
+  margin-inline: auto;
+  color: var(--color-fg);
+}
+
+.bm-rich-text--wide {
+  max-width: var(--max-width-rich-text-wide);
+}
+
+.bm-rich-text__eyebrow {
+  margin: 0 0 1rem;
+  color: var(--color-accent-primary);
+  font-size: var(--text-size-eyebrow);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+}
+
+.bm-rich-text__heading {
+  margin: 0;
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-size: var(--text-size-h2-mobile);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body {
+  margin-top: var(--rich-text-heading-space);
+  color: var(--color-fg);
+  font-size: var(--text-size-body-large);
+  line-height: var(--leading-relaxed);
+}
+
+.bm-rich-text__body--inline {
+  margin-top: 0;
+}
+
+.bm-rich-text__body > * {
+  margin-block: 0;
+}
+
+.bm-rich-text__body > * + * {
+  margin-top: var(--rich-text-flow-space);
+}
+
+.bm-rich-text__body h2,
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  color: var(--color-fg);
+  font-family: var(--font-family-heading);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-heading);
+}
+
+.bm-rich-text__body h2 {
+  font-size: var(--text-size-h3);
+}
+
+.bm-rich-text__body h3,
+.bm-rich-text__body h4 {
+  font-size: var(--text-size-body-large);
+}
+
+.bm-rich-text__body a {
+  color: var(--color-link-hover);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: underline;
+  text-decoration-thickness: var(--rich-text-link-decoration-thickness);
+  text-underline-offset: var(--rich-text-link-underline-offset);
+}
+
+.bm-rich-text__body ul {
+  list-style: disc;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body ol {
+  list-style: decimal;
+  padding-left: var(--rich-text-list-indent);
+}
+
+.bm-rich-text__body li + li {
+  margin-top: 0.75rem;
+}
+
+.bm-rich-text__body blockquote {
+  border-left: var(--rich-text-blockquote-border-width) solid var(--rich-text-quote-border);
+  background: var(--rich-text-quote-bg-default);
+  padding: 1.25rem 1.5rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.bm-rich-text__body code {
+  border-radius: 0.25rem;
+  background: var(--rich-text-inline-code-bg-default);
+  color: var(--rich-text-inline-code-text);
+  font-size: var(--text-size-caption);
+  padding: var(--rich-text-inline-code-padding);
+}
+
+@media (min-width: 768px) {
+  .bm-rich-text__heading {
+    font-size: var(--text-size-h2);
+  }
+}

package/templates/common/design-system/tokens/colors.css

@@ -0,0 +1,110 @@
+@theme {
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Light palette — airy, modern */
+  --color-surface-50: #f8fafc;
+  --color-surface-100: #f1f5f9;
+  --color-surface-200: #e2e8f0;
+  --color-surface-300: #cbd5e1;
+  --color-surface-400: #94a3b8;
+  --color-surface-900: #0f172a;
+  --color-surface-950: #020617;
+
+  /* Brand accents — electric blue + warm orange */
+  --color-brand-500: #0ea5e9;
+  --color-brand-400: #38bdf8;
+  --color-brand-600: #0284c7;
+  --color-brand-300: #7dd3fc;
+  --color-brand-glow: rgba(14, 165, 233, 0.25);
+
+  --color-warm-500: #f97316;
+  --color-warm-400: #fb923c;
+  --color-warm-600: #ea580c;
+  --color-warm-300: #fdba74;
+
+  /* Text */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #64748b;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #ffffff;
+
+  /* Borders */
+  --color-border-subtle: rgba(15, 23, 42, 0.06);
+  --color-border-default: rgba(15, 23, 42, 0.1);
+  --color-border-strong: rgba(15, 23, 42, 0.16);
+  --color-border-inverse: rgba(255, 255, 255, 0.2);
+
+  /* Focus */
+  --color-focus: var(--color-brand-600);
+
+  /* Semantic aliases — light theme default */
+  --color-page: var(--color-white);
+  --color-page-inverse: var(--color-surface-900);
+  --color-page-light: var(--color-white);
+  --color-chrome-surface: var(--color-white);
+  --color-chrome-surface-default: var(--color-white);
+
+  --color-surface: var(--color-white);
+  --color-surface-muted: var(--color-surface-100);
+  --color-surface-raised: var(--color-surface-200);
+  --color-surface-dark: var(--color-surface-900);
+  --color-surface-raised-dark: var(--color-surface-800);
+
+  --color-fg: var(--color-text-primary);
+  --color-fg-muted: var(--color-text-secondary);
+  --color-fg-base-muted: var(--color-text-secondary);
+  --color-fg-inverse: var(--color-text-inverse);
+  --color-fg-inverse-soft: var(--color-surface-200);
+  --color-fg-inverse-muted: var(--color-surface-400);
+
+  --color-border: var(--color-border-default);
+  --color-edge: var(--color-border-default);
+  --color-edge-dark: var(--color-border-strong);
+  --color-edge-inverse: var(--color-border-inverse);
+
+  --color-accent-primary: var(--color-brand-600);
+  --color-accent-secondary: var(--color-brand-500);
+  --color-accent-tertiary: var(--color-warm-500);
+  --color-accent-pink: var(--color-brand-500);
+  --color-accent-blue: var(--color-brand-500);
+  --color-accent-warm: var(--color-warm-500);
+
+  --color-icon-default: var(--color-text-tertiary);
+  --color-link-hover: var(--color-brand-600);
+
+  /* Gradients */
+  --gradient-hero-base: radial-gradient(
+    ellipse 80% 60% at 50% 0%,
+    rgba(14, 165, 233, 0.12) 0%,
+    rgba(14, 165, 233, 0.04) 40%,
+    transparent 70%
+  );
+  --gradient-hero-overlay: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 0.7) 60%,
+    rgba(255, 255, 255, 0.95) 100%
+  );
+  --gradient-hero-overlay-rtl: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 255, 255, 0.7) 60%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  --gradient-hero-radial: radial-gradient(
+    ellipse 60% 40% at 80% 20%,
+    rgba(249, 115, 22, 0.06) 0%,
+    transparent 60%
+  );
+  --gradient-card: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(241, 245, 249, 0.6) 100%
+  );
+  --gradient-cta: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-400) 100%);
+  --gradient-cta-dark: linear-gradient(135deg, var(--color-surface-100) 0%, var(--color-surface-200) 100%);
+  --gradient-cta-default: var(--gradient-cta);
+  --gradient-top-rail: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-warm-500) 100%);
+}

package/templates/common/design-system/tokens/components.css

@@ -0,0 +1,86 @@
+@theme {
+  --width-logo-mobile: 8rem;
+  --width-logo: 12rem;
+  --width-logo-footer-mobile: 9rem;
+  --width-logo-footer: 14rem;
+  --logo-filter: none;
+
+  --text-button: var(--text-size-base);
+  --leading-button: 1;
+  --button-hover-opacity: 0.92;
+  --transition-duration-fast: 200ms;
+
+  --button-primary-bg: var(--color-accent-primary);
+  --button-primary-text: var(--color-white);
+  --button-primary-border: var(--color-accent-primary);
+  --button-primary-hover-bg: var(--color-brand-500);
+  --button-primary-hover-border: var(--color-brand-500);
+
+  --button-secondary-bg: var(--color-surface-100);
+  --button-secondary-text: var(--color-text-primary);
+  --button-secondary-border: var(--color-surface-200);
+  --button-secondary-hover-bg: var(--color-surface-200);
+  --button-secondary-hover-border: var(--color-surface-300);
+
+  --button-outline-bg: transparent;
+  --button-outline-text: var(--color-text-primary);
+  --button-outline-border: var(--color-border-strong);
+  --button-outline-hover-bg: var(--color-surface-100);
+  --button-outline-hover-border: var(--color-text-primary);
+
+  --button-tertiary-bg: transparent;
+  --button-tertiary-text: var(--color-accent-primary);
+  --button-tertiary-border: transparent;
+  --button-tertiary-hover-bg: rgba(14, 165, 233, 0.08);
+  --button-tertiary-hover-text: var(--color-brand-600);
+
+  --button-ghost-bg: transparent;
+  --button-ghost-text: var(--color-text-primary);
+  --button-ghost-border: transparent;
+  --button-ghost-hover-bg: var(--color-surface-100);
+  --button-ghost-hover-text: var(--color-text-primary);
+
+  --header-bg: rgba(255, 255, 255, 0.85);
+  --header-text: var(--color-text-primary);
+  --header-muted: var(--color-text-secondary);
+  --header-border: var(--color-border-default);
+  --header-link-hover: var(--color-accent-primary);
+  --header-icon: var(--color-text-tertiary);
+  --header-scrolled-bg: var(--color-white);
+
+  --mobile-nav-bg: var(--color-white);
+  --mobile-nav-text: var(--color-text-primary);
+  --mobile-nav-muted: var(--color-text-secondary);
+  --mobile-nav-border: var(--color-border-default);
+  --mobile-nav-link-hover: var(--color-accent-primary);
+  --mobile-nav-link-size: 1.75rem;
+  --mobile-nav-link-line-height: 1.1;
+
+  --footer-bg: var(--color-surface-100);
+  --footer-text: var(--color-text-primary);
+  --footer-muted: var(--color-text-secondary);
+  --footer-border: var(--color-border-default);
+  --footer-link-hover: var(--color-accent-primary);
+  --footer-grid-columns: 1fr 2fr;
+
+  --color-callout-icon-bg-light: rgba(14, 165, 233, 0.08);
+  --color-callout-icon-bg-dark: rgba(14, 165, 233, 0.12);
+  --color-callout-icon-bg: var(--color-callout-icon-bg-light);
+  --callout-icon-color: var(--color-accent-primary);
+
+  --rich-text-flow-space: 1.5rem;
+  --rich-text-heading-space: 2rem;
+  --rich-text-link-decoration-thickness: 0.09em;
+  --rich-text-link-underline-offset: 0.18em;
+  --rich-text-list-indent: 1.4em;
+  --rich-text-blockquote-border-width: 0.25rem;
+  --rich-text-inline-code-padding: 0.08em 0.32em;
+  --rich-text-quote-border: var(--color-brand-500);
+  --rich-text-quote-bg: rgba(14, 165, 233, 0.06);
+  --rich-text-quote-bg-dark: rgba(14, 165, 233, 0.1);
+  --rich-text-quote-bg-default: var(--rich-text-quote-bg-light);
+  --rich-text-inline-code-bg: rgba(15, 23, 42, 0.06);
+  --rich-text-inline-code-bg-dark: rgba(255, 255, 255, 0.08);
+  --rich-text-inline-code-bg-default: var(--rich-text-inline-code-bg);
+  --rich-text-inline-code-text: var(--color-fg);
+}

package/templates/common/design-system/tokens/index.css

@@ -0,0 +1,6 @@
+@import "./colors.css";
+@import "./typography.css";
+@import "./spacing.css";
+@import "./shadows.css";
+@import "./radii.css";
+@import "./components.css";

package/templates/common/design-system/tokens/radii.css

@@ -0,0 +1,5 @@
+@theme {
+  --radius-button: 0.5rem;
+  --radius-card: 0.875rem;
+  --radius-cta: 1rem;
+}

package/templates/common/design-system/tokens/shadows.css

@@ -0,0 +1,9 @@
+@theme {
+  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
+  --shadow-card-dark: 0 1px 3px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.15);
+  --shadow-card-default: var(--shadow-card);
+  --shadow-elevated: 0 1px 3px rgba(15, 23, 42, 0.05), 0 20px 48px rgba(15, 23, 42, 0.12);
+  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
+  --shadow-glow-sm: 0 0 15px rgba(14, 165, 233, 0.18);
+  --shadow-glow-lg: 0 0 40px rgba(14, 165, 233, 0.3);
+}

package/templates/common/design-system/tokens/spacing.css

@@ -0,0 +1,26 @@
+@theme {
+  --max-width-container: 80rem;
+  --max-width-container-narrow: 48rem;
+  --max-width-rich-text: var(--max-width-container-narrow);
+  --max-width-rich-text-wide: 54rem;
+  --max-width-cta: 76rem;
+
+  --spacing-container: clamp(1rem, 5vw, 3rem);
+  --spacing-section-y: clamp(4rem, 8vw, 7rem);
+  --spacing-footer-y: clamp(4rem, 8vw, 6rem);
+  --spacing-cta-y: clamp(4rem, 8vw, 6rem);
+  --spacing-cta-x: clamp(1.5rem, 5vw, 5rem);
+  --spacing-card: 1.5rem;
+  --spacing-hero-py: clamp(8rem, 20vh, 14rem);
+
+  --height-header: 4.5rem;
+  --height-hero-min: 100svh;
+  --width-hero-content: 48rem;
+  --height-button-min: 3rem;
+
+  --spacing-button-x: 1.5rem;
+  --spacing-button-y: 0.875rem;
+
+  --z-header: 50;
+  --z-overlay: 60;
+}

package/templates/common/design-system/tokens/typography.css

@@ -0,0 +1,32 @@
+@theme {
+  --font-family-display: var(--font-inter), "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-heading: var(--font-family-display);
+  --font-family-base: var(--font-inter), "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --text-size-brand: 1.5rem;
+  --text-size-eyebrow: 0.75rem;
+  --text-size-caption: 0.75rem;
+  --text-size-body-small: 0.875rem;
+  --text-size-body: 1rem;
+  --text-size-body-large: 1.125rem;
+  --text-size-h1-mobile: 3rem;
+  --text-size-h1: 4.5rem;
+  --text-size-h2-mobile: 2rem;
+  --text-size-h2: 3rem;
+  --text-size-h3: 1.25rem;
+  --text-size-h4: 1.125rem;
+
+  --leading-none: 1;
+  --leading-tight: 1.05;
+  --leading-heading: 1.1;
+  --leading-snug: 1.25;
+  --leading-body: 1.6;
+  --leading-relaxed: 1.7;
+  --letter-spacing-label: 0.08em;
+  --letter-spacing-tight: -0.02em;
+}