@fluid-theme/core 0.4.3

package/src/components/hero.css

@@ -0,0 +1,293 @@
+/**
+ * Fluid Framework - Hero Component
+ * @layer components
+ *
+ * Full-width hero sections for landing pages and page headers.
+ * Uses the positioning system for layout - just add data attributes.
+ *
+ * Philosophy:
+ * - The hero is a canvas, not a constraint
+ * - Backgrounds, overlays, and content are separate concerns
+ * - Serene presence, not aggressive attention-seeking
+ *
+ * Usage:
+ *   <section class="hero" data-layout="center" data-padding="xl">
+ *     <h1>Headline</h1>
+ *     <p>Subheadline</p>
+ *     <button>Call to Action</button>
+ *   </section>
+ */
+
+@layer components {
+
+  /* ========================================
+     BASE HERO
+     A full-width section ready for content
+     ======================================== */
+
+  .hero {
+    --hero-min-height: 60vh;
+    --hero-background: var(--color-surface);
+    --hero-text-color: var(--color-text);
+
+    position: relative;
+    min-block-size: var(--hero-min-height);
+    background-color: var(--hero-background);
+    color: var(--hero-text-color);
+    overflow: hidden;
+    container-type: inline-size;
+
+    /* Inline padding to prevent text touching edges */
+    padding-inline: var(--space-5);
+  }
+
+  /* Ensure content stays above backgrounds/overlays */
+  .hero > * {
+    position: relative;
+    z-index: var(--z-raised);
+  }
+
+
+  /* ========================================
+     HERO SIZES
+     Control the visual impact
+     ======================================== */
+
+  .hero[data-size="compact"] {
+    --hero-min-height: 40vh;
+  }
+
+  .hero[data-size="full"] {
+    --hero-min-height: 100vh;
+  }
+
+  .hero[data-size="auto"] {
+    --hero-min-height: auto;
+  }
+
+
+  /* ========================================
+     HERO CONTENT
+     Structured content within the hero
+     ======================================== */
+
+  .hero__content {
+    max-inline-size: var(--content-width, var(--container-md));
+  }
+
+  .hero__headline {
+    /* Fluid scaling: smooth transition across all viewport sizes */
+    font-size: clamp(2rem, 1rem + 5vw, 3.5rem);
+    font-weight: var(--weight-bold);
+    letter-spacing: -0.03em;
+    line-height: var(--leading-tight);
+    margin-block-end: var(--space-4);
+    text-wrap: balance; /* Prevent orphans in headlines */
+  }
+
+  .hero__subheadline {
+    /* Fluid scaling for subheadlines */
+    font-size: clamp(1.125rem, 0.875rem + 1.5vw, 1.5rem);
+    color: var(--hero-text-muted, var(--color-text-muted));
+    line-height: var(--leading-relaxed);
+    margin-block-end: var(--space-6);
+    text-wrap: pretty; /* Better line breaks */
+    max-inline-size: 65ch; /* Optimal reading width */
+  }
+
+  .hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    justify-content: inherit;
+  }
+
+
+  /* ========================================
+     HERO BACKGROUNDS
+     Image and gradient backgrounds
+     ======================================== */
+
+  .hero__background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .hero__background img,
+  .hero__background video {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* Focal point control for hero backgrounds */
+  .hero__background[data-focus="top"] img { object-position: center top; }
+  .hero__background[data-focus="bottom"] img { object-position: center bottom; }
+  .hero__background[data-focus="left"] img { object-position: left center; }
+  .hero__background[data-focus="right"] img { object-position: right center; }
+  .hero__background[data-focus="center"] img { object-position: center center; }
+
+  /* Custom focal point via CSS custom properties */
+  .hero__background[style*="--focus"] img {
+    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
+  }
+
+
+  /* ========================================
+     HERO OVERLAY
+     Darken backgrounds for text readability
+     ======================================== */
+
+  .hero[data-overlay]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: var(--hero-overlay, oklch(0% 0 0 / 0.4));
+    pointer-events: none;
+  }
+
+  /* Overlay intensity presets */
+  .hero[data-overlay="light"]::before {
+    --hero-overlay: oklch(0% 0 0 / 0.2);
+  }
+
+  .hero[data-overlay="medium"]::before {
+    --hero-overlay: oklch(0% 0 0 / 0.4);
+  }
+
+  .hero[data-overlay="heavy"]::before {
+    --hero-overlay: oklch(0% 0 0 / 0.6);
+  }
+
+  /* Gradient overlays - subtle fade from bottom */
+  .hero[data-overlay="gradient"]::before {
+    --hero-overlay: linear-gradient(
+      to top,
+      oklch(0% 0 0 / 0.6) 0%,
+      oklch(0% 0 0 / 0.3) 40%,
+      oklch(0% 0 0 / 0) 100%
+    );
+  }
+
+
+  /* ========================================
+     HERO THEMES
+     Pre-designed color schemes
+     ======================================== */
+
+  /* Dark hero with light text — derives from page's dark mode colors */
+  .hero[data-theme="dark"] {
+    --hero-background: color-mix(in oklch, var(--accent) 10%, oklch(12% 0.02 230));
+    --hero-text-color: oklch(94% 0.01 220);
+    --hero-text-muted: oklch(70% 0.01 220);
+  }
+
+  /* Accent color hero */
+  .hero[data-theme="accent"] {
+    --hero-background: var(--accent);
+    --hero-text-color: var(--white);
+    --hero-text-muted: oklch(100% 0 0 / 0.85);
+  }
+
+  /* Subtle/muted hero */
+  .hero[data-theme="subtle"] {
+    --hero-background: var(--color-surface);
+    --hero-text-color: var(--color-text);
+    --hero-text-muted: var(--color-text-muted);
+  }
+
+  /* Gradient hero - derives from accent color */
+  .hero[data-theme="gradient"] {
+    --hero-background: linear-gradient(
+      135deg,
+      color-mix(in oklch, var(--accent) 30%, oklch(15% 0.02 230)) 0%,
+      color-mix(in oklch, var(--accent) 20%, oklch(25% 0.02 230)) 50%,
+      color-mix(in oklch, var(--accent) 15%, oklch(35% 0.02 230)) 100%
+    );
+    --hero-text-color: oklch(95% 0.01 0);
+    --hero-text-muted: oklch(80% 0.01 0);
+    background: var(--hero-background);
+  }
+
+
+  /* ========================================
+     SPLIT HERO
+     Content + media side by side
+     ======================================== */
+
+  .hero[data-layout="split"] .hero__media,
+  .hero[data-layout="split-reverse"] .hero__media {
+    block-size: 100%;
+    min-block-size: 40vh;
+  }
+
+  .hero[data-layout="split"] .hero__media img,
+  .hero[data-layout="split-reverse"] .hero__media img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: var(--radius-lg);
+  }
+
+
+  /* ========================================
+     RESPONSIVE BEHAVIOR
+     Font sizes use fluid clamp() - no breakpoints needed
+     ======================================== */
+
+  @container (max-width: 40rem) {
+    /* Actions stack vertically on narrow containers */
+    .hero__actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .hero__actions > * {
+      justify-content: center;
+    }
+  }
+
+
+  /* ========================================
+     HERO BUTTON CONTRAST
+     Ensure buttons are visible on themed backgrounds
+     ======================================== */
+
+  /* Dark theme: use light outline buttons for secondary */
+  .hero[data-theme="dark"] button[data-variant="outline"],
+  .hero[data-theme="gradient"] button[data-variant="outline"] {
+    --_btn-color: var(--white);
+    --_btn-border: var(--white);
+    --_btn-bg-hover: oklch(100% 0 0 / 0.15);
+  }
+
+  /* Accent theme: invert button colors for contrast */
+  .hero[data-theme="accent"] button:not([data-variant]) {
+    --_btn-color: var(--accent);
+    --_btn-bg: var(--white);
+    --_btn-bg-hover: var(--gray-95);
+  }
+
+  .hero[data-theme="accent"] button[data-variant="outline"] {
+    --_btn-color: var(--white);
+    --_btn-border: var(--white);
+    --_btn-bg-hover: oklch(100% 0 0 / 0.15);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     Respect user preferences
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero,
+    .hero * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}