@24vlh/vds 0.1.0

package/dist/components/hero.css

@@ -0,0 +1,498 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Hero Component
+ *
+ *  Responsibilities:
+ *    - Provide the complete hero system: title, description, points,
+ *      metrics, accent lines, call-to-action groups, and optional media
+ *    - Support density variants (A / B / C / compact / minimal)
+ *      and layout variants (split, with-media, inset, full-bleed)
+ *    - Expose loading, error, and skeleton states with fully tokenised
+ *      animation and surface interactions
+ *    - Maintain strict composability: works inside marketing pages,
+ *      documentation pages, product pages, and landing layouts
+ *
+ *  System Notes:
+ *    - Fully token-driven: spacing, typography, surfaces, shadows, radii
+ *    - Pure CSS; media behaviour and async loading are external
+ *    - Responsive from first principles: text scaling, grid collapse,
+ *      metric condensation, and surface switching
+ ************************************************************/
+
+/*---------------------------------------------------------
+  1. HERO TOKEN DEFINITIONS
+---------------------------------------------------------*/
+
+[data-vds-hero],
+.vds-hero {
+    --hero-skeleton-speed: 1.2s;
+    --hero-eyebrow-letter-spacing: var(--letter-loose);
+
+    --hero-text-max-default: 60ch;
+    --hero-text-max-a: 70ch;
+    --hero-text-max-c: 55ch;
+    --hero-text-max-compact: 50ch;
+
+    --hero-media-aspect-ratio: 16/9;
+    --hero-media-max-width: 32rem;
+
+    --hero-metric-min-width: 11rem;
+
+    --hero-accent-line-thickness: 3px;
+
+    --hero-full-overlay: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.0));
+}
+
+/* ---------------------------------------------------------
+   2. GLOBAL HERO CONTAINER
+--------------------------------------------------------- */
+
+.hero {
+    width: 100%;
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    padding-top: var(--space-12);
+    padding-bottom: var(--space-16);
+}
+
+.hero__inner {
+    max-width: var(--content-width-xl);
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+}
+
+.hero__eyebrow {
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: var(--hero-eyebrow-letter-spacing);
+    color: var(--color-text-muted);
+}
+
+.hero__title {
+    font-size: var(--text-4xl);
+    font-weight: var(--font-weight-bold);
+    max-width: var(--hero-text-max-default);
+    line-height: 1.15;
+}
+
+.hero__desc {
+    font-size: var(--text-md);
+    line-height: var(--line-height-normal);
+    color: var(--color-text-muted);
+    max-width: var(--hero-text-max-default);
+}
+
+.hero__actions {
+    display: flex;
+    gap: var(--space-4);
+    flex-wrap: wrap;
+    margin-top: var(--space-6);
+}
+
+.hero__text-pill {
+    background: var(--color-surface-translucent-strong);
+    color: var(--color-text-on-strong);
+    border-radius: var(--radius-sm);
+    display: inline-block;
+}
+
+/*---------------------------------------------------------
+  3. DENSITY VARIANTS (MUTUALLY EXCLUSIVE)
+---------------------------------------------------------*/
+
+.hero--a .hero {
+    padding-top: var(--space-20);
+    padding-bottom: var(--space-24);
+}
+
+.hero--a .hero__title {
+    font-size: var(--text-5xl);
+    max-width: var(--hero-text-max-a);
+}
+
+.hero--a .hero__desc {
+    font-size: var(--text-lg);
+}
+
+.hero--b .hero {
+    padding-top: var(--space-16);
+    padding-bottom: var(--space-20);
+}
+
+.hero--b .hero__title {
+    font-size: var(--text-4xl);
+}
+
+.hero--b .hero__desc {
+    font-size: var(--text-md);
+}
+
+.hero--c .hero {
+    padding-top: var(--space-12);
+    padding-bottom: var(--space-16);
+}
+
+.hero--c .hero__title {
+    font-size: var(--text-3xl);
+    max-width: var(--hero-text-max-c);
+}
+
+.hero--c .hero__desc {
+    font-size: var(--text-sm);
+}
+
+.hero--compact .hero {
+    padding-top: var(--space-10);
+    padding-bottom: var(--space-12);
+}
+
+.hero--compact .hero__title {
+    font-size: var(--text-2xl);
+    max-width: var(--hero-text-max-compact);
+}
+
+.hero--compact .hero__desc {
+    font-size: var(--text-sm);
+}
+
+.hero--minimal .hero {
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-10);
+}
+
+.hero--minimal .hero__title {
+    font-size: var(--text-xl);
+}
+
+.hero--minimal .hero__desc {
+    display: none;
+}
+
+/*---------------------------------------------------------
+  4. LAYOUT VARIANTS (MUTUALLY EXCLUSIVE)
+---------------------------------------------------------*/
+
+.hero--split .hero__inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--space-12);
+    gap: var(--space-12);
+}
+
+.hero--with-media .hero__inner {
+    display: grid;
+    grid-template-columns: 1fr var(--hero-media-max-width);
+    grid-gap: var(--space-12);
+    gap: var(--space-12);
+}
+
+.hero__media {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.hero__media-inner {
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    background-color: var(--color-surface-subtle);
+}
+
+.hero__media-inner > * {
+    width: 100%;
+    height: 100%;
+}
+
+.hero__media img,
+.hero__media picture {
+    width: 100%;
+    aspect-ratio: var(--hero-media-aspect-ratio);
+    -o-object-fit: cover;
+       object-fit: cover;
+    border-radius: var(--radius-lg);
+}
+
+/*---------------------------------------------------------*
+  5. FULL-BLEED VARIANT
+*---------------------------------------------------------*/
+
+.hero--full {
+    position: relative;
+    background-color: var(--color-bg-elevated);
+    color: var(--color-text-on-strong);
+    padding-top: var(--space-24);
+    padding-bottom: var(--space-32);
+}
+
+.hero--full::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--hero-full-overlay, var(--color-surface-translucent-strong));
+    z-index: 0;
+}
+
+.hero--full .hero__inner {
+    position: relative;
+    z-index: 1;
+}
+
+.hero--full,
+.hero--full .hero__body,
+.hero--full .hero__eyebrow,
+.hero--full .hero__subtitle,
+.hero--full .hero__actions,
+.hero--full .hero__actions *,
+.hero--full .hero__metrics *,
+.hero--full .hero__points *,
+.hero--full .hero__desc {
+    color: var(--color-text-on-strong);
+}
+
+.hero--full .hero__title,
+.hero--full .hero__subtitle,
+.hero--full .hero__eyebrow,
+.hero--full .hero__desc {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+}
+
+/*---------------------------------------------------------*
+  6. INSET VARIANT
+*---------------------------------------------------------*/
+
+.hero--inset {
+    background: var(--color-bg);
+    padding: var(--space-8);
+}
+
+.hero--inset .hero {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-1);
+    padding-top: var(--space-12);
+    padding-bottom: var(--space-16);
+}
+
+/*---------------------------------------------------------*
+  7. ACCENT LINE (TOKENIZED)
+*---------------------------------------------------------*/
+
+.hero__accent-line {
+    width: var(--hero-accent-line-thickness);
+    height: var(--space-20);
+    background-color: var(--hero-accent-line, var(--color-accent));
+    border-radius: var(--radius-pill);
+}
+
+/*---------------------------------------------------------*
+  8. METRICS BLOCK
+*---------------------------------------------------------*/
+
+.hero__metrics {
+    display: grid;
+    grid-gap: var(--space-6);
+    gap: var(--space-6);
+    grid-template-columns: repeat(auto-fit, minmax(var(--hero-metric-min-width), 1fr));
+    margin-top: var(--space-8);
+}
+
+.hero__metric {
+    background-color: var(--hero-metric-bg);
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.hero__metric-value {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-bold);
+}
+
+.hero__metric-label {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+}
+
+.hero__metric-trend {
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-semibold);
+}
+
+.hero__metric-trend--up {
+    color: var(--hero-trend-up, var(--color-success-strong));
+}
+
+.hero__metric-trend--down {
+    color: var(--hero-trend-down, var(--color-danger-strong));
+}
+
+.hero__metric-trend--neutral {
+    color: var(--hero-trend-neutral, var(--color-text-muted));
+}
+
+.hero__metric--muted {
+    background-color: var(--color-muted-bg);
+    border-left: var(--border-width) solid var(--color-border-subtle);
+}
+
+.hero__metric--error {
+    background-color: var(--hero-error-bg, var(--color-danger-soft));
+    border-left: var(--border-width-strong) solid var(--hero-error-border, var(--color-danger-strong));
+}
+
+/*---------------------------------------------------------*
+  8B. HERO POINTS (SUPPORTING BULLETS)
+*---------------------------------------------------------*/
+
+.hero__points {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    margin-top: var(--space-6);
+}
+
+.hero__point {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    max-width: var(--hero-text-max-default);
+}
+
+.hero__point-icon {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+    color: var(--color-accent);
+}
+
+/*---------------------------------------------------------*
+  9. LOADING STATE (TOKENIZED ANIMATION)
+*---------------------------------------------------------*/
+
+.hero--loading .hero__body {
+    visibility: hidden;
+}
+
+.hero--loading .hero__skeleton {
+    display: block;
+}
+
+.hero__skeleton {
+    width: 100%;
+    display: none;
+    height: var(--space-40);
+    border-radius: var(--radius-md);
+    background: linear-gradient(
+            90deg,
+            var(--color-surface-subtle) 0%,
+            var(--color-surface-soft) 50%,
+            var(--color-surface-subtle) 100%
+    );
+    background-size: 200% 100%;
+    animation: hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;
+}
+
+.hero__skeleton-line {
+    width: 100%;
+    height: var(--space-3);
+    border-radius: var(--radius-sm);
+    background: linear-gradient(
+            90deg,
+            var(--color-surface-subtle) 0%,
+            var(--color-surface-soft) 50%,
+            var(--color-surface-subtle) 100%
+    );
+    background-size: 200% 100%;
+    animation: hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;
+    margin-top: var(--space-1);
+    margin-bottom: var(--space-1);
+}
+
+@keyframes hero-skeleton-shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/*---------------------------------------------------------*
+  10. ERROR STATE
+*---------------------------------------------------------*/
+
+.hero--error .hero__body {
+    opacity: 0.4;
+}
+
+.hero--error .hero__error {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    padding: var(--space-4);
+    background-color: var(--hero-error-banner-bg, var(--color-danger-soft));
+    border-left: var(--border-width-strong) solid var(--hero-error-banner-border, var(--color-danger));
+    border-radius: var(--radius-md);
+}
+
+.hero__error-title {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    margin: 0;
+    color: var(--hero-error-title, var(--color-danger-strong));
+}
+
+.hero__error-actions {
+    margin-left: auto;
+    display: inline-flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+/*---------------------------------------------------------*
+  11. RESPONSIVE
+*---------------------------------------------------------*/
+
+@media (max-width: 1024px) {
+    .hero--split .hero__inner,
+    .hero--with-media .hero__inner {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero {
+        padding-top: var(--space-10);
+        padding-bottom: var(--space-14);
+    }
+
+    .hero__title {
+        font-size: var(--text-3xl);
+    }
+}
+
+@media (max-width: 640px) {
+    .hero__title {
+        font-size: var(--text-2xl);
+    }
+
+    .hero__metrics {
+        grid-template-columns: repeat(auto-fit, minmax(calc(var(--hero-metric-min-width) * 0.8), 1fr));
+    }
+}

package/dist/components/hero.min.css

@@ -0,0 +1 @@
+.vds-hero,[data-vds-hero]{--hero-skeleton-speed:1.2s;--hero-eyebrow-letter-spacing:var(--letter-loose);--hero-text-max-default:60ch;--hero-text-max-a:70ch;--hero-text-max-c:55ch;--hero-text-max-compact:50ch;--hero-media-aspect-ratio:16/9;--hero-media-max-width:32rem;--hero-metric-min-width:11rem;--hero-accent-line-thickness:3px;--hero-full-overlay:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding-bottom:var(--space-16);padding-top:var(--space-12);width:100%}.hero__inner{display:flex;flex-direction:column;gap:var(--space-8);margin-left:auto;margin-right:auto;max-width:var(--content-width-xl)}.hero__eyebrow{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--hero-eyebrow-letter-spacing);text-transform:uppercase}.hero__title{font-size:var(--text-4xl);font-weight:var(--font-weight-bold);line-height:1.15}.hero__desc,.hero__title{max-width:var(--hero-text-max-default)}.hero__desc{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero--a .hero{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc{font-size:var(--text-lg)}.hero--b .hero{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc{font-size:var(--text-md)}.hero--c .hero{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc{font-size:var(--text-sm)}.hero--compact .hero{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc{font-size:var(--text-sm)}.hero--minimal .hero{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr var(--hero-media-max-width)}.hero__media{align-items:center}.hero__media,.hero__media-inner{display:flex;justify-content:center}.hero__media-inner{align-items:stretch;background-color:var(--color-surface-subtle);border-radius:var(--radius-lg);max-width:100%;overflow:hidden;width:100%}.hero__media-inner>*{height:100%;width:100%}.hero__media img,.hero__media picture{aspect-ratio:var(--hero-media-aspect-ratio);border-radius:var(--radius-lg);-o-object-fit:cover;object-fit:cover;width:100%}.hero--full{background-color:var(--color-bg-elevated);color:var(--color-text-on-strong);padding-bottom:var(--space-32);padding-top:var(--space-24);position:relative}.hero--full:before{background:var(--hero-full-overlay,var(--color-surface-translucent-strong));bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:0}.hero--full .hero__inner{position:relative;z-index:1}.hero--full,.hero--full .hero__actions,.hero--full .hero__actions *,.hero--full .hero__body,.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__metrics *,.hero--full .hero__points *,.hero--full .hero__subtitle{color:var(--color-text-on-strong)}.hero--full .hero__desc,.hero--full .hero__eyebrow,.hero--full .hero__subtitle,.hero--full .hero__title{text-shadow:0 1px 2px rgba(0,0,0,.45)}.hero--inset{background:var(--color-bg);padding:var(--space-8)}.hero--inset .hero{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero__accent-line{background-color:var(--hero-accent-line,var(--color-accent));border-radius:var(--radius-pill);height:var(--space-20);width:var(--hero-accent-line-thickness)}.hero__metrics{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(var(--hero-metric-min-width),1fr));margin-top:var(--space-8)}.hero__metric{background-color:var(--hero-metric-bg);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric-value{font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.hero__metric-label{color:var(--color-text-muted);font-size:var(--text-sm)}.hero__metric-trend{font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.hero__metric-trend--up{color:var(--hero-trend-up,var(--color-success-strong))}.hero__metric-trend--down{color:var(--hero-trend-down,var(--color-danger-strong))}.hero__metric-trend--neutral{color:var(--hero-trend-neutral,var(--color-text-muted))}.hero__metric--muted{background-color:var(--color-muted-bg);border-left:var(--border-width) solid var(--color-border-subtle)}.hero__metric--error{background-color:var(--hero-error-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-border,var(--color-danger-strong))}.hero__points{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero__point{align-items:flex-start;color:var(--color-text-muted);display:flex;font-size:var(--text-sm);gap:var(--space-2);max-width:var(--hero-text-max-default)}.hero__point-icon{color:var(--color-accent);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero--loading .hero__body{visibility:hidden}.hero--loading .hero__skeleton{display:block}.hero__skeleton{border-radius:var(--radius-md);display:none;height:var(--space-40)}.hero__skeleton,.hero__skeleton-line{animation:hero-skeleton-shimmer var(--hero-skeleton-speed) linear infinite;background:linear-gradient(90deg,var(--color-surface-subtle) 0,var(--color-surface-soft) 50%,var(--color-surface-subtle) 100%);background-size:200% 100%;width:100%}.hero__skeleton-line{border-radius:var(--radius-sm);height:var(--space-3);margin-bottom:var(--space-1);margin-top:var(--space-1)}@keyframes hero-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero--error .hero__body{opacity:.4}.hero--error .hero__error{align-items:center;background-color:var(--hero-error-banner-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--hero-error-banner-border,var(--color-danger));border-radius:var(--radius-md);display:flex;gap:var(--space-2);padding:var(--space-4)}.hero__error-title{color:var(--hero-error-title,var(--color-danger-strong));font-size:var(--text-sm);font-weight:var(--font-weight-semibold);margin:0}.hero__error-actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}@media (max-width:1024px){.hero--split .hero__inner,.hero--with-media .hero__inner{grid-template-columns:1fr}}@media (max-width:768px){.hero{padding-bottom:var(--space-14);padding-top:var(--space-10)}.hero__title{font-size:var(--text-3xl)}}@media (max-width:640px){.hero__title{font-size:var(--text-2xl)}.hero__metrics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--hero-metric-min-width)*.8),1fr))}}