@24vlh/vds 0.2.1 → 0.3.0

package/dist/components/header-footer.css

@@ -33,6 +33,8 @@
     --header-panel-bg: var(--color-surface);
     --header-panel-border: var(--color-border-subtle);
     --header-panel-shadow: var(--shadow-1);
+    --header-shadow: var(--shadow-1);
+    --header-sticky-offset: 0;
 
     --footer-logo-height: var(--space-8);
     --footer-col-min-width: var(--space-40);
@@ -507,7 +509,7 @@
    11. APP SHELL (STICKY FOOTER LAYOUT)
 --------------------------------------------------------- */
 
-.vds-shell {
+.shell {
     min-height: 100vh;
     min-height: 100svh;
     min-height: 100dvh;
@@ -516,11 +518,11 @@
     width: 100%;
 }
 
-.vds-shell__main {
+.shell__main {
     flex: 1 1 auto;
     min-width: 0;
 }
 
-.vds-shell__footer {
+.shell__footer {
     margin-top: auto;
 }

package/dist/components/header-footer.min.css

@@ -1 +1 @@
-.vds-header-footer,[data-vds-header-footer]{--header-height:var(--space-16);--header-logo-height:var(--space-12);--header-toggle-size:var(--space-6);--header-padding-inline:var(--space-6);--header-gap:var(--space-6);--header-max-width:var(--layout-max-width);--header-panel-bg:var(--color-surface);--header-panel-border:var(--color-border-subtle);--header-panel-shadow:var(--shadow-1);--footer-logo-height:var(--space-8);--footer-col-min-width:var(--space-40);--footer-padding-block:var(--space-10);--footer-padding-inline:var(--space-6);--footer-gap:var(--space-8);--footer-max-width:var(--layout-max-width)}.header{background-color:var(--color-header-bg);border-bottom:var(--border-width) solid var(--color-header-border);position:relative;width:100%;z-index:var(--z-header)}.header--sticky{position:sticky;top:0;top:var(--header-sticky-offset,0)}.header--elevated{box-shadow:var(--header-shadow,var(--shadow-1))}.header__inner{align-items:center;display:flex;gap:var(--header-gap);height:var(--header-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding:0 var(--header-padding-inline)}.header--compact{--header-height:var(--space-12);--header-logo-height:var(--space-8)}.header--tall{--header-height:var(--space-20);--header-logo-height:var(--space-14)}.header--borderless{border-bottom:none}.header--transparent{background-color:transparent}.header__center,.header__left,.header__right{align-items:center;display:flex;gap:var(--header-gap)}.header__right{margin-left:auto}.header__center{margin:0 auto}.header__stack{display:flex;flex-direction:column;gap:var(--space-1)}.header__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.header__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.header .logo{align-items:center;display:inline-flex;height:100%;justify-content:center;margin-right:var(--space-6);padding:0}.header .logo svg{height:var(--header-logo-height);width:auto}.header .logo[href]:hover{opacity:.9}.header .nav{align-items:center;display:flex;gap:var(--space-6)}.header .nav__item,.header .nav__link{color:var(--color-text);font-size:var(--text-sm);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease}.header .nav__item:hover,.header .nav__link:hover{color:var(--color-text-muted)}.header .nav__item--active,.header .nav__link--active{color:var(--color-text);font-weight:600}.header .nav__item--active:after,.header .nav__link--active:after{background-color:var(--color-accent);border-radius:var(--radius-pill,var(--radius-md));bottom:calc(var(--space-1)*-1);content:"";height:var(--border-width);left:0;position:absolute;right:0}.header .nav__item--disabled,.header .nav__link--disabled{cursor:default;opacity:.5;pointer-events:none}.header .nav__item:focus-visible,.header .nav__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header .header__toggle{background-color:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2)}.header .header__toggle svg{stroke:currentColor;height:var(--header-toggle-size);width:var(--header-toggle-size)}.header .header__toggle:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header__panel{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:none;left:0;max-height:calc(100vh - var(--header-height));max-height:calc(100svh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow-y:auto;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);z-index:var(--z-header)}.header__panel .nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4)}@media (max-width:768px){.header .nav{display:none}.header .header__toggle{align-items:center;display:flex;justify-content:center}.header.header--nav-open .nav{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:flex;flex-direction:column;gap:var(--space-4);left:0;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);width:100%}.header.header--nav-open .nav__item,.header.header--nav-open .nav__link{padding:var(--space-1) 0}.header--nav-panel .header__inner .nav{display:none}.header--nav-panel.header--nav-open .header__panel{display:block}.header--nav-panel.header--nav-open .nav{background-color:transparent;border-bottom:none;box-shadow:none;padding:0;position:static;width:auto}}.header .skip-link,.skip-link{background-color:var(--color-accent);border-radius:var(--radius-sm);color:var(--color-on-accent);left:var(--space-4);padding:var(--space-2) var(--space-3);position:absolute;-webkit-text-decoration:none;text-decoration:none;top:var(--space-4);transform:translateY(calc(var(--space-6)*-1));transition:transform .15s ease;z-index:var(--z-header)}.skip-link:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1);transform:translateY(0)}.footer{background-color:var(--color-footer-bg);border-top:var(--border-width) solid var(--color-border-strong);color:var(--color-footer-text);padding-bottom:var(--footer-padding-block);padding-top:var(--footer-padding-block);width:100%}.footer__inner{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--footer-gap);justify-content:space-between;margin:0 auto;max-width:var(--footer-max-width);padding:0 var(--footer-padding-inline)}.footer--compact{--footer-padding-block:var(--space-6)}.footer--borderless{border-top:none}.footer__columns{grid-gap:var(--footer-gap);display:grid;gap:var(--footer-gap);grid-template-columns:repeat(auto-fit,minmax(var(--footer-col-min-width),1fr));width:100%}.footer__bottom{gap:var(--space-4);justify-content:space-between;margin-top:var(--space-8);width:100%}.footer__actions,.footer__bottom{align-items:center;display:flex;flex-wrap:wrap}.footer__actions,.footer__col{gap:var(--space-3)}.footer__col{display:flex;flex:1 1 var(--footer-col-min-width);flex-direction:column;min-width:var(--footer-col-min-width)}.footer__col-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}.footer__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;-webkit-text-decoration:none;text-decoration:none;transition:opacity .15s ease}.footer__link:hover{opacity:1}.footer__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}@media (max-width:768px){.footer__inner{flex-direction:column;gap:var(--space-10)}}.footer .logo{align-items:center;display:inline-flex;justify-content:flex-start;margin-bottom:var(--space-6);padding:0}.footer .logo svg{height:var(--footer-logo-height);width:auto}.footer .logo-frame,.footer .logo-rail{stroke:var(--color-logo-ink-inverse)}.footer .logo-chevron{stroke:var(--color-logo-accent-inverse)}.footer__meta{font-size:var(--text-xs);margin-top:var(--space-8);opacity:.75}.footer__bottom .footer__meta{margin-top:0}.footer__meta,.footer__meta a,.footer__meta p,.footer__meta small,.footer__meta span{color:var(--color-footer-text)}.footer__meta a{-webkit-text-decoration:none;text-decoration:none}.footer__meta a:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.vds-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh;width:100%}.vds-shell__main{flex:1 1 auto;min-width:0}.vds-shell__footer{margin-top:auto}
+.vds-header-footer,[data-vds-header-footer]{--header-height:var(--space-16);--header-logo-height:var(--space-12);--header-toggle-size:var(--space-6);--header-padding-inline:var(--space-6);--header-gap:var(--space-6);--header-max-width:var(--layout-max-width);--header-panel-bg:var(--color-surface);--header-panel-border:var(--color-border-subtle);--header-panel-shadow:var(--shadow-1);--header-shadow:var(--shadow-1);--header-sticky-offset:0;--footer-logo-height:var(--space-8);--footer-col-min-width:var(--space-40);--footer-padding-block:var(--space-10);--footer-padding-inline:var(--space-6);--footer-gap:var(--space-8);--footer-max-width:var(--layout-max-width)}.header{background-color:var(--color-header-bg);border-bottom:var(--border-width) solid var(--color-header-border);position:relative;width:100%;z-index:var(--z-header)}.header--sticky{position:sticky;top:0;top:var(--header-sticky-offset,0)}.header--elevated{box-shadow:var(--header-shadow,var(--shadow-1))}.header__inner{align-items:center;display:flex;gap:var(--header-gap);height:var(--header-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding:0 var(--header-padding-inline)}.header--compact{--header-height:var(--space-12);--header-logo-height:var(--space-8)}.header--tall{--header-height:var(--space-20);--header-logo-height:var(--space-14)}.header--borderless{border-bottom:none}.header--transparent{background-color:transparent}.header__center,.header__left,.header__right{align-items:center;display:flex;gap:var(--header-gap)}.header__right{margin-left:auto}.header__center{margin:0 auto}.header__stack{display:flex;flex-direction:column;gap:var(--space-1)}.header__actions{align-items:center;display:inline-flex;gap:var(--space-3)}.header__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.header .logo{align-items:center;display:inline-flex;height:100%;justify-content:center;margin-right:var(--space-6);padding:0}.header .logo svg{height:var(--header-logo-height);width:auto}.header .logo[href]:hover{opacity:.9}.header .nav{align-items:center;display:flex;gap:var(--space-6)}.header .nav__item,.header .nav__link{color:var(--color-text);font-size:var(--text-sm);padding:var(--space-1) 0;position:relative;-webkit-text-decoration:none;text-decoration:none;transition:color .15s ease}.header .nav__item:hover,.header .nav__link:hover{color:var(--color-text-muted)}.header .nav__item--active,.header .nav__link--active{color:var(--color-text);font-weight:600}.header .nav__item--active:after,.header .nav__link--active:after{background-color:var(--color-accent);border-radius:var(--radius-pill,var(--radius-md));bottom:calc(var(--space-1)*-1);content:"";height:var(--border-width);left:0;position:absolute;right:0}.header .nav__item--disabled,.header .nav__link--disabled{cursor:default;opacity:.5;pointer-events:none}.header .nav__item:focus-visible,.header .nav__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header .header__toggle{background-color:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;display:none;padding:var(--space-2)}.header .header__toggle svg{stroke:currentColor;height:var(--header-toggle-size);width:var(--header-toggle-size)}.header .header__toggle:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.header__panel{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:none;left:0;max-height:calc(100vh - var(--header-height));max-height:calc(100svh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow-y:auto;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);z-index:var(--z-header)}.header__panel .nav{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4)}@media (max-width:768px){.header .nav{display:none}.header .header__toggle{align-items:center;display:flex;justify-content:center}.header.header--nav-open .nav{background-color:var(--header-panel-bg);border-bottom:var(--border-width) solid var(--header-panel-border);box-shadow:var(--header-panel-shadow);display:flex;flex-direction:column;gap:var(--space-4);left:0;padding:var(--space-6);position:absolute;right:0;top:var(--header-height);width:100%}.header.header--nav-open .nav__item,.header.header--nav-open .nav__link{padding:var(--space-1) 0}.header--nav-panel .header__inner .nav{display:none}.header--nav-panel.header--nav-open .header__panel{display:block}.header--nav-panel.header--nav-open .nav{background-color:transparent;border-bottom:none;box-shadow:none;padding:0;position:static;width:auto}}.header .skip-link,.skip-link{background-color:var(--color-accent);border-radius:var(--radius-sm);color:var(--color-on-accent);left:var(--space-4);padding:var(--space-2) var(--space-3);position:absolute;-webkit-text-decoration:none;text-decoration:none;top:var(--space-4);transform:translateY(calc(var(--space-6)*-1));transition:transform .15s ease;z-index:var(--z-header)}.skip-link:focus-visible{outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1);transform:translateY(0)}.footer{background-color:var(--color-footer-bg);border-top:var(--border-width) solid var(--color-border-strong);color:var(--color-footer-text);padding-bottom:var(--footer-padding-block);padding-top:var(--footer-padding-block);width:100%}.footer__inner{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--footer-gap);justify-content:space-between;margin:0 auto;max-width:var(--footer-max-width);padding:0 var(--footer-padding-inline)}.footer--compact{--footer-padding-block:var(--space-6)}.footer--borderless{border-top:none}.footer__columns{grid-gap:var(--footer-gap);display:grid;gap:var(--footer-gap);grid-template-columns:repeat(auto-fit,minmax(var(--footer-col-min-width),1fr));width:100%}.footer__bottom{gap:var(--space-4);justify-content:space-between;margin-top:var(--space-8);width:100%}.footer__actions,.footer__bottom{align-items:center;display:flex;flex-wrap:wrap}.footer__actions,.footer__col{gap:var(--space-3)}.footer__col{display:flex;flex:1 1 var(--footer-col-min-width);flex-direction:column;min-width:var(--footer-col-min-width)}.footer__col-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}.footer__link{color:var(--color-footer-text);font-size:var(--text-sm);opacity:.85;-webkit-text-decoration:none;text-decoration:none;transition:opacity .15s ease}.footer__link:hover{opacity:1}.footer__link:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}@media (max-width:768px){.footer__inner{flex-direction:column;gap:var(--space-10)}}.footer .logo{align-items:center;display:inline-flex;justify-content:flex-start;margin-bottom:var(--space-6);padding:0}.footer .logo svg{height:var(--footer-logo-height);width:auto}.footer .logo-frame,.footer .logo-rail{stroke:var(--color-logo-ink-inverse)}.footer .logo-chevron{stroke:var(--color-logo-accent-inverse)}.footer__meta{font-size:var(--text-xs);margin-top:var(--space-8);opacity:.75}.footer__bottom .footer__meta{margin-top:0}.footer__meta,.footer__meta a,.footer__meta p,.footer__meta small,.footer__meta span{color:var(--color-footer-text)}.footer__meta a{-webkit-text-decoration:none;text-decoration:none}.footer__meta a:focus-visible{border-radius:var(--radius-sm);outline:var(--border-width) solid var(--focus-ring-color);outline-offset:var(--space-1)}.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh;width:100%}.shell__main{flex:1 1 auto;min-width:0}.shell__footer{margin-top:auto}

package/dist/components/hero.css

@@ -43,6 +43,7 @@
 
     --hero-accent-line-thickness: 3px;
     --hero-body-gap: var(--space-4);
+    --hero-padding-inline: var(--space-6);
     --hero-actions-gap: var(--space-4);
     --hero-actions-margin-top: var(--space-6);
     --hero-meta-gap: var(--space-3);

package/dist/components/hero.min.css

@@ -1 +1 @@
-.vds-hero,[data-vds-hero]{--hero-skeleton-speed:1.2s;--hero-eyebrow-letter-spacing:var(--letter-loose);--hero-eyebrow-color:var(--color-text-muted);--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-media-radius:var(--radius-lg);--hero-metric-min-width:11rem;--hero-metric-bg:var(--color-surface-subtle);--hero-metric-border:transparent;--hero-accent-line-thickness:3px;--hero-body-gap:var(--space-4);--hero-actions-gap:var(--space-4);--hero-actions-margin-top:var(--space-6);--hero-meta-gap:var(--space-3);--hero-meta-color:var(--color-text-muted);--hero-badge-bg:var(--color-surface-subtle);--hero-badge-border:var(--color-border-subtle);--hero-badge-text:var(--color-text);--hero-point-icon:var(--color-accent);--hero-border-color:var(--color-border-subtle);--hero-soft-bg:var(--color-surface-subtle);--hero-full-overlay:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding:var(--space-12) var(--hero-padding-inline,var(--space-6)) var(--space-16);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(--hero-eyebrow-color);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;max-width:var(--hero-text-max-default)}.hero__body{display:flex;flex-direction:column;gap:var(--hero-body-gap);min-width:0}.hero__desc,.hero__subtitle{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal);max-width:var(--hero-text-max-default)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--hero-actions-gap);margin-top:var(--hero-actions-margin-top)}.hero__actions--stack{align-items:flex-start;flex-direction:column}.hero__actions--center{justify-content:center;width:100%}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero__badge,.hero__text-pill{align-self:flex-start;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.hero__badge{align-items:center;background:var(--hero-badge-bg);border:var(--border-width) solid var(--hero-badge-border);border-radius:999px;color:var(--hero-badge-text);display:inline-flex;gap:var(--space-2)}.hero__meta{color:var(--hero-meta-color);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--hero-meta-gap)}.hero--a .hero,.hero.hero--a{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title,.hero.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc,.hero--a .hero__subtitle,.hero.hero--a .hero__desc,.hero.hero--a .hero__subtitle{font-size:var(--text-lg)}.hero--b .hero,.hero.hero--b{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title,.hero.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc,.hero--b .hero__subtitle,.hero.hero--b .hero__desc,.hero.hero--b .hero__subtitle{font-size:var(--text-md)}.hero--c .hero,.hero.hero--c{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title,.hero.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc,.hero--c .hero__subtitle,.hero.hero--c .hero__desc,.hero.hero--c .hero__subtitle{font-size:var(--text-sm)}.hero--compact .hero,.hero.hero--compact{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title,.hero.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc,.hero--compact .hero__subtitle,.hero.hero--compact .hero__desc,.hero.hero--compact .hero__subtitle{font-size:var(--text-sm)}.hero--minimal .hero,.hero.hero--minimal{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title,.hero.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc,.hero--minimal .hero__subtitle,.hero.hero--minimal .hero__desc,.hero.hero--minimal .hero__subtitle{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-media-max-width))}.hero--split.hero--split-reverse .hero__points,.hero--with-media.hero--media-left .hero__media{order:-1}.hero--center .hero__inner{align-items:center;text-align:center}.hero--center .hero__actions,.hero--center .hero__metrics,.hero--center .hero__points{justify-content:center}.hero--soft{background-color:var(--hero-soft-bg)}.hero--bordered{border-bottom:var(--border-width) solid var(--hero-border-color);border-top:var(--border-width) solid var(--hero-border-color)}.hero__media{align-items:center;min-width:0}.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(--hero-media-radius);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(--hero-media-radius);-o-object-fit:cover;object-fit:cover;width:100%}.hero__media--bleed .hero__media-inner,.hero__media--bleed img,.hero__media--bleed picture{border-radius:0}.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__metrics--compact{gap:var(--space-4)}.hero__metric{background-color:var(--hero-metric-bg);border:var(--border-width) solid var(--hero-metric-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric--outline{--hero-metric-border:var(--color-border-subtle)}.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(--hero-point-icon);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero__row{align-items:flex-start;display:flex;gap:var(--space-4)}.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))}}
+.vds-hero,[data-vds-hero]{--hero-skeleton-speed:1.2s;--hero-eyebrow-letter-spacing:var(--letter-loose);--hero-eyebrow-color:var(--color-text-muted);--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-media-radius:var(--radius-lg);--hero-metric-min-width:11rem;--hero-metric-bg:var(--color-surface-subtle);--hero-metric-border:transparent;--hero-accent-line-thickness:3px;--hero-body-gap:var(--space-4);--hero-padding-inline:var(--space-6);--hero-actions-gap:var(--space-4);--hero-actions-margin-top:var(--space-6);--hero-meta-gap:var(--space-3);--hero-meta-color:var(--color-text-muted);--hero-badge-bg:var(--color-surface-subtle);--hero-badge-border:var(--color-border-subtle);--hero-badge-text:var(--color-text);--hero-point-icon:var(--color-accent);--hero-border-color:var(--color-border-subtle);--hero-soft-bg:var(--color-surface-subtle);--hero-full-overlay:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}.hero{background-color:var(--color-surface);color:var(--color-text);padding:var(--space-12) var(--hero-padding-inline,var(--space-6)) var(--space-16);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(--hero-eyebrow-color);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;max-width:var(--hero-text-max-default)}.hero__body{display:flex;flex-direction:column;gap:var(--hero-body-gap);min-width:0}.hero__desc,.hero__subtitle{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--line-height-normal);max-width:var(--hero-text-max-default)}.hero__actions{display:flex;flex-wrap:wrap;gap:var(--hero-actions-gap);margin-top:var(--hero-actions-margin-top)}.hero__actions--stack{align-items:flex-start;flex-direction:column}.hero__actions--center{justify-content:center;width:100%}.hero__text-pill{background:var(--color-surface-translucent-strong);border-radius:var(--radius-sm);color:var(--color-text-on-strong);display:inline-block}.hero__badge,.hero__text-pill{align-self:flex-start;font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.hero__badge{align-items:center;background:var(--hero-badge-bg);border:var(--border-width) solid var(--hero-badge-border);border-radius:999px;color:var(--hero-badge-text);display:inline-flex;gap:var(--space-2)}.hero__meta{color:var(--hero-meta-color);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--hero-meta-gap)}.hero--a .hero,.hero.hero--a{padding-bottom:var(--space-24);padding-top:var(--space-20)}.hero--a .hero__title,.hero.hero--a .hero__title{font-size:var(--text-5xl);max-width:var(--hero-text-max-a)}.hero--a .hero__desc,.hero--a .hero__subtitle,.hero.hero--a .hero__desc,.hero.hero--a .hero__subtitle{font-size:var(--text-lg)}.hero--b .hero,.hero.hero--b{padding-bottom:var(--space-20);padding-top:var(--space-16)}.hero--b .hero__title,.hero.hero--b .hero__title{font-size:var(--text-4xl)}.hero--b .hero__desc,.hero--b .hero__subtitle,.hero.hero--b .hero__desc,.hero.hero--b .hero__subtitle{font-size:var(--text-md)}.hero--c .hero,.hero.hero--c{padding-bottom:var(--space-16);padding-top:var(--space-12)}.hero--c .hero__title,.hero.hero--c .hero__title{font-size:var(--text-3xl);max-width:var(--hero-text-max-c)}.hero--c .hero__desc,.hero--c .hero__subtitle,.hero.hero--c .hero__desc,.hero.hero--c .hero__subtitle{font-size:var(--text-sm)}.hero--compact .hero,.hero.hero--compact{padding-bottom:var(--space-12);padding-top:var(--space-10)}.hero--compact .hero__title,.hero.hero--compact .hero__title{font-size:var(--text-2xl);max-width:var(--hero-text-max-compact)}.hero--compact .hero__desc,.hero--compact .hero__subtitle,.hero.hero--compact .hero__desc,.hero.hero--compact .hero__subtitle{font-size:var(--text-sm)}.hero--minimal .hero,.hero.hero--minimal{padding-bottom:var(--space-10);padding-top:var(--space-8)}.hero--minimal .hero__title,.hero.hero--minimal .hero__title{font-size:var(--text-xl)}.hero--minimal .hero__desc,.hero--minimal .hero__subtitle,.hero.hero--minimal .hero__desc,.hero.hero--minimal .hero__subtitle{display:none}.hero--split .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero--with-media .hero__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-media-max-width))}.hero--split.hero--split-reverse .hero__points,.hero--with-media.hero--media-left .hero__media{order:-1}.hero--center .hero__inner{align-items:center;text-align:center}.hero--center .hero__actions,.hero--center .hero__metrics,.hero--center .hero__points{justify-content:center}.hero--soft{background-color:var(--hero-soft-bg)}.hero--bordered{border-bottom:var(--border-width) solid var(--hero-border-color);border-top:var(--border-width) solid var(--hero-border-color)}.hero__media{align-items:center;min-width:0}.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(--hero-media-radius);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(--hero-media-radius);-o-object-fit:cover;object-fit:cover;width:100%}.hero__media--bleed .hero__media-inner,.hero__media--bleed img,.hero__media--bleed picture{border-radius:0}.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__metrics--compact{gap:var(--space-4)}.hero__metric{background-color:var(--hero-metric-bg);border:var(--border-width) solid var(--hero-metric-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.hero__metric--outline{--hero-metric-border:var(--color-border-subtle)}.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(--hero-point-icon);flex-shrink:0;height:var(--icon-sm);margin-top:.125rem;width:var(--icon-sm)}.hero__row{align-items:flex-start;display:flex;gap:var(--space-4)}.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))}}