@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/hero.css

@@ -1,498 +1 @@
-/************************************************************
- * 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));
-    }
-}
+.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))}}