@fluid-theme/core 0.4.3

package/src/fluid.css

@@ -0,0 +1,242 @@
+/**
+ * Fluid Framework
+ * A modern, semantic design system
+ *
+ * Like water: adaptable, natural, powerful yet gentle.
+ *
+ * @version 0.4.3
+ * @license MIT
+ *
+ * Layer Architecture:
+ * 1. reset     - Normalize browser defaults
+ * 2. tokens    - Design tokens (CSS custom properties)
+ * 3. base      - Default element styles
+ * 4. layouts   - Layout utilities and patterns
+ * 5. components - Reusable component styles
+ * 6. themes    - Theme overrides
+ * 7. utilities - Utility classes (use sparingly)
+ */
+
+/* Establish layer order first - this is crucial */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+
+/* ========================================
+   CORE
+   Foundation styles every project needs
+   ======================================== */
+
+@import "./core/reset.css";
+@import "./core/tokens.css";
+@import "./core/base.css";
+
+
+/* ========================================
+   LAYOUTS
+   Layout primitives and patterns
+   ======================================== */
+
+@import "./layouts/positioning.css";
+
+
+/* ========================================
+   COMPONENTS
+   Reusable UI components
+   ======================================== */
+
+@import "./components/button.css";
+@import "./components/card.css";
+@import "./components/nav.css";
+@import "./components/form.css";
+@import "./components/hero.css";
+@import "./components/indicator.css";
+@import "./components/settings-panel.css";
+@import "./components/scroll-progress.css";
+@import "./components/themed-images.css";
+@import "./components/modal.css";
+@import "./components/tooltip.css";
+@import "./components/accordion.css";
+@import "./components/alert.css";
+@import "./components/table.css";
+@import "./components/avatar.css";
+@import "./components/loading.css";
+@import "./components/dropdown.css";
+@import "./components/badge.css";
+@import "./components/empty-state.css";
+@import "./components/step-indicator.css";
+@import "./components/search-input.css";
+@import "./components/chip.css";
+@import "./components/version-badge.css";
+
+
+/* ========================================
+   SECTIONS
+   Pre-built page sections
+   ======================================== */
+
+@import "./sections/features.css";
+@import "./sections/testimonials.css";
+@import "./sections/cta.css";
+@import "./sections/footer.css";
+@import "./sections/team.css";
+@import "./sections/stats.css";
+
+
+/* Animations */
+@import "./animations/scroll-reveal.css";
+
+
+/* ========================================
+   THEMES (Coming in Phase 4)
+   Theme variations and overrides
+   ======================================== */
+
+/* @import "./themes/default.css"; */
+/* @import "./themes/dark.css"; */
+/* @import "./themes/corporate.css"; */
+
+
+/* ========================================
+   UTILITIES
+   Single-purpose utility classes
+   Use sparingly - prefer semantic components
+   ======================================== */
+
+@layer utilities {
+  /* Visually hidden but accessible to screen readers */
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Focus utility - show only with focus-visible */
+  .focus-ring:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 3px;
+  }
+
+  /* Flow utility - consistent vertical spacing */
+  .flow > * + * {
+    margin-block-start: var(--flow-space, var(--space-5));
+  }
+
+  /* Prose utility - optimal reading width */
+  .prose {
+    max-inline-size: var(--container-prose);
+  }
+
+  /* Center utility - horizontally centered content */
+  .center {
+    display: grid;
+    place-items: center;
+  }
+
+  /* Icon utility - inline SVG icons */
+  .icon {
+    display: inline-block;
+    vertical-align: middle;
+    flex-shrink: 0;
+    inline-size: 1em;
+    block-size: 1em;
+    stroke-width: 2;
+  }
+
+  .icon--sm { inline-size: 0.875em; block-size: 0.875em; }
+  .icon--lg { inline-size: 1.25em; block-size: 1.25em; }
+  .icon--xl { inline-size: 1.5em; block-size: 1.5em; }
+
+
+  /* ========================================
+     IMAGE PROTECTION
+     Discourage casual right-click saving.
+     NOT DRM — just friction for the 95% who right-click.
+     Does NOT prevent screenshots, dev tools, or determined users.
+     ======================================== */
+
+  [data-protected] {
+    position: relative;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  [data-protected]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    /* Transparent overlay blocks "Save Image As" context menu */
+  }
+
+
+  /* ========================================
+     ORIENTATION-AWARE IMAGES
+     Show/hide images based on viewport orientation.
+     Use with <picture> for art direction.
+     ======================================== */
+
+  [data-orientation="portrait"] { display: none; }
+
+  @media (orientation: portrait) {
+    [data-orientation="landscape"] { display: none; }
+    [data-orientation="portrait"] { display: block; }
+  }
+}
+
+
+/* ========================================
+   LAYOUTS LAYER
+   Basic layout utilities until Phase 3
+   ======================================== */
+
+@layer layouts {
+  /* Container - constrained width with centered content */
+  .container {
+    --_container-size: var(--container-content, var(--container-xl));
+    inline-size: min(100% - var(--space-gutter, var(--space-8)), var(--_container-size));
+    margin-inline: auto;
+    container-type: inline-size;
+  }
+
+  .container--sm { --_container-size: var(--container-sm); }
+  .container--md { --_container-size: var(--container-md); }
+  .container--lg { --_container-size: var(--container-lg); }
+  .container--xl { --_container-size: var(--container-xl); }
+  .container--2xl { --_container-size: var(--container-2xl); }
+
+  /* Stack - vertical flow with consistent gaps */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap, var(--space-5));
+  }
+
+  /* Cluster - horizontal flow that wraps */
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cluster-gap, var(--space-4));
+    align-items: var(--cluster-align, center);
+  }
+
+  /* Grid - auto-responsive grid */
+  .grid {
+    display: grid;
+    gap: var(--grid-gap, var(--space-5));
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
+    );
+  }
+
+  /* Section - consistent vertical padding */
+  .section {
+    padding-block: var(--space-section);
+  }
+}