@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/sections.css

@@ -1,450 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Sections System
- *
- *  Responsibilities:
- *    - Provide the fundamental block-level layout system used across all
- *      marketing, documentation, and application pages
- *    - Define universal section spacing (XS–XL) with legacy A/B/C support
- *    - Implement section headers (eyebrow, title, subtitle), alignment variants,
- *      surfaces, alt backgrounds, and full divider patterns
- *    - Supply grid utilities (2–6 columns + auto-fit), stacks (vertical /
- *      horizontal), inset sections, split sections, and reversed split layouts
- *
- *  System Notes:
- *    - Fully token-driven: section-spacing-*, text scales, radius, surfaces,
- *      border lanes, grid-min, and layout-max-width
- *    - Pure CSS; responsive behaviour uses safe grid/flex reflow with no JS
- *    - Namespaced to be compatible with legacy VDS layouts and new v1 rhythms
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. BASE SECTION CONTAINER
---------------------------------------------------------- */
-
-.section {
-    width: 100%;
-    padding-top: var(--section-spacing-md);
-    padding-bottom: var(--section-spacing-md);
-    position: relative;
-    background-color: var(--color-bg);
-}
-
-.section__inner {
-    max-width: var(--layout-max-width);
-    margin: 0 auto;
-    padding: 0 var(--space-6);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   2. LEGACY DENSITY SYSTEM (A / B / C / FLUSH)
---------------------------------------------------------- */
-
-.section--a {
-    padding-top: var(--space-20);
-    padding-bottom: var(--space-20);
-}
-
-.section--b {
-    padding-top: var(--space-14);
-    padding-bottom: var(--space-14);
-}
-
-.section--c {
-    padding-top: var(--space-10);
-    padding-bottom: var(--space-10);
-}
-
-.section--flush {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-/* ---------------------------------------------------------
-   3. NEW UNIVERSAL SECTION RHYTHM (XS–XL)
---------------------------------------------------------- */
-
-.section--xs {
-    padding-top: var(--section-spacing-xs);
-    padding-bottom: var(--section-spacing-xs);
-}
-
-.section--sm {
-    padding-top: var(--section-spacing-sm);
-    padding-bottom: var(--section-spacing-sm);
-}
-
-.section--md {
-    padding-top: var(--section-spacing-md);
-    padding-bottom: var(--section-spacing-md);
-}
-
-.section--lg {
-    padding-top: var(--section-spacing-lg);
-    padding-bottom: var(--section-spacing-lg);
-}
-
-.section--xl {
-    padding-top: var(--section-spacing-xl);
-    padding-bottom: var(--section-spacing-xl);
-}
-
-/* ---------------------------------------------------------
-   4. SECTION HEADER SYSTEM
---------------------------------------------------------- */
-
-.section__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    max-width: 70ch;
-}
-
-.section__eyebrow {
-    font-size: var(--text-xs);
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: var(--section-brand-eyebrow, var(--color-text-muted));
-}
-
-.section__title {
-    font-size: var(--text-2xl);
-    font-weight: 600;
-    line-height: 1.2;
-    color: var(--section-brand-title, var(--color-text));
-}
-
-.section__subtitle {
-    font-size: var(--text-sm);
-    color: var(--section-brand-subtitle, var(--color-text-muted));
-    max-width: 60ch;
-}
-
-.section--a .section__title {
-    font-size: var(--text-3xl);
-}
-
-.section--b .section__title {
-    font-size: var(--text-2xl);
-}
-
-.section--c .section__title {
-    font-size: var(--text-xl);
-}
-
-.section--center .section__header {
-    text-align: center;
-    align-items: center;
-}
-
-.section--right .section__header {
-    text-align: right;
-    align-items: flex-end;
-}
-
-.section__header--tight {
-    gap: var(--space-2);
-}
-
-.section__header--wide {
-    gap: var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   5. SECTION DIVIDERS
---------------------------------------------------------- */
-
-.section--divided {
-    border-top: 1px solid var(--color-border-subtle);
-}
-
-.section--divided + .section--divided {
-    border-top: none;
-    border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.section--divided-x {
-    border-left: 1px solid var(--color-border-subtle);
-    border-right: 1px solid var(--color-border-subtle);
-}
-
-/* ---------------------------------------------------------
-   6. SURFACES (surface / subtle / brand)
---------------------------------------------------------- */
-
-.section--surface {
-    background-color: var(--color-surface);
-    border: 1px solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-
-    padding-top: var(--section-spacing-lg);
-    padding-bottom: var(--section-spacing-lg);
-
-    transition: background-color 0.15s ease;
-}
-
-.section--surface:hover {
-    background-color: var(--color-surface-hover);
-}
-
-.section--subtle {
-    background-color: var(--color-surface-subtle);
-}
-
-.section--brand {
-    background-color: var(--color-accent-soft);
-}
-
-/* ---------------------------------------------------------
-   7. ALTERNATE BACKGROUND
---------------------------------------------------------- */
-
-.section--alt {
-    background-color: var(--color-bg-soft);
-}
-
-/* ---------------------------------------------------------
-   8. SPLIT SECTIONS - CLEAN GRID REVERSAL
---------------------------------------------------------- */
-
-.section--split .section__inner {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--space-12);
-    gap: var(--space-12);
-}
-
-.section--split-reverse .section__inner {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: var(--space-12);
-    gap: var(--space-12);
-}
-
-.section--split-reverse .section__inner > :first-child {
-    order: 2;
-}
-
-.section--split-reverse .section__inner > :last-child {
-    order: 1;
-}
-
-/* ---------------------------------------------------------
-   9. INSET SECTIONS (Base + SM/LG)
---------------------------------------------------------- */
-
-.section--inset .section__inner {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border-subtle);
-    padding: var(--space-10);
-}
-
-.section--inset-sm .section__inner {
-    padding: var(--space-6);
-}
-
-.section--inset-lg .section__inner {
-    padding: var(--space-14);
-}
-
-/* ---------------------------------------------------------
-   10. COLUMN GRIDS (2/3/4/5/6/auto) + GAP VARIANTS
---------------------------------------------------------- */
-
-.section__grid-2,
-.section__grid-3,
-.section__grid-4,
-.section__grid-5,
-.section__grid-6,
-.section__grid-auto {
-    display: grid;
-    grid-gap: var(--space-10);
-    gap: var(--space-10);
-}
-
-.section__grid-2 {
-    grid-template-columns: repeat(2, 1fr);
-}
-
-.section__grid-3 {
-    grid-template-columns: repeat(3, 1fr);
-}
-
-.section__grid-4 {
-    grid-template-columns: repeat(4, 1fr);
-}
-
-.section__grid-5 {
-    grid-template-columns: repeat(5, 1fr);
-}
-
-.section__grid-6 {
-    grid-template-columns: repeat(6, 1fr);
-}
-
-.section__grid-auto {
-    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
-}
-
-.section__grid-sm {
-    gap: var(--space-4);
-}
-
-.section__grid-md {
-    gap: var(--space-6);
-}
-
-.section__grid-lg {
-    gap: var(--space-14);
-}
-
-/* ---------------------------------------------------------
-   11. CONTENT STACKS (VERTICAL)
---------------------------------------------------------- */
-
-.section__stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-}
-
-.section__stack-sm {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-}
-
-.section__stack-lg {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-10);
-}
-
-/* ---------------------------------------------------------
-   12. INLINE STACKS (HORIZONTAL)
---------------------------------------------------------- */
-
-.section__inline {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-3);
-}
-
-.section__inline-sm {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-2);
-}
-
-.section__inline-lg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-4);
-}
-
-/* ---------------------------------------------------------
-   13. VALUE / LIST SECTIONS
---------------------------------------------------------- */
-
-.section__list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-}
-
-.section__list-item {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-3);
-    font-size: var(--text-sm);
-    color: var(--color-text);
-}
-
-.section__list-item svg {
-    width: 1.25em;
-    height: 1.25em;
-    stroke: var(--color-accent);
-    fill: none;
-    flex-shrink: 0;
-}
-
-.section__list-item-title {
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.section__list-item-desc {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   14. RESPONSIVE BEHAVIOUR
---------------------------------------------------------- */
-
-@media (max-width: 1280px) {
-    .section__grid-2,
-    .section__grid-3,
-    .section__grid-4,
-    .section__grid-5,
-    .section__grid-6,
-    .section__grid-auto {
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    }
-}
-
-@media (max-width: 1024px) {
-    .section--split .section__inner,
-    .section--split-reverse .section__inner {
-        grid-template-columns: 1fr;
-    }
-
-    .section__grid-2,
-    .section__grid-3,
-    .section__grid-4,
-    .section__grid-5,
-    .section__grid-6,
-    .section__grid-auto {
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    }
-}
-
-@media (max-width: 768px) {
-
-    .section,
-    .section--a,
-    .section--b,
-    .section--c {
-        padding-top: var(--space-10);
-        padding-bottom: var(--space-10);
-    }
-
-    .section__grid-2,
-    .section__grid-3,
-    .section__grid-4,
-    .section__grid-5,
-    .section__grid-6,
-    .section__grid-auto {
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    }
-
-    .section__title {
-        font-size: var(--text-xl);
-    }
-
-    .section__subtitle {
-        font-size: var(--text-sm);
-    }
-
-    .section--inset .section__inner {
-        padding: var(--space-6);
-    }
-}
+.section{background-color:var(--color-bg);padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md);position:relative;width:100%}.section__inner{display:flex;flex-direction:column;gap:var(--space-6);margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.section--a{padding-bottom:var(--space-20);padding-top:var(--space-20)}.section--b{padding-bottom:var(--space-14);padding-top:var(--space-14)}.section--c{padding-bottom:var(--space-10);padding-top:var(--space-10)}.section--flush{padding-bottom:0;padding-top:0}.section--xs{padding-bottom:var(--section-spacing-xs);padding-top:var(--section-spacing-xs)}.section--sm{padding-bottom:var(--section-spacing-sm);padding-top:var(--section-spacing-sm)}.section--md{padding-bottom:var(--section-spacing-md);padding-top:var(--section-spacing-md)}.section--lg{padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg)}.section--xl{padding-bottom:var(--section-spacing-xl);padding-top:var(--section-spacing-xl)}.section__header{display:flex;flex-direction:column;gap:var(--space-3);max-width:70ch}.section__eyebrow{color:var(--section-brand-eyebrow,var(--color-text-muted));font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.section__title{color:var(--section-brand-title,var(--color-text));font-size:var(--text-2xl);font-weight:600;line-height:1.2}.section__subtitle{color:var(--section-brand-subtitle,var(--color-text-muted));font-size:var(--text-sm);max-width:60ch}.section--a .section__title{font-size:var(--text-3xl)}.section--b .section__title{font-size:var(--text-2xl)}.section--c .section__title{font-size:var(--text-xl)}.section--center .section__header{align-items:center;text-align:center}.section--right .section__header{align-items:flex-end;text-align:right}.section__header--tight{gap:var(--space-2)}.section__header--wide{gap:var(--space-6)}.section--divided{border-top:1px solid var(--color-border-subtle)}.section--divided+.section--divided{border-bottom:1px solid var(--color-border-subtle);border-top:none}.section--divided-x{border-left:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}.section--surface{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding-bottom:var(--section-spacing-lg);padding-top:var(--section-spacing-lg);transition:background-color .15s ease}.section--surface:hover{background-color:var(--color-surface-hover)}.section--subtle{background-color:var(--color-surface-subtle)}.section--brand{background-color:var(--color-accent-soft)}.section--alt{background-color:var(--color-bg-soft)}.section--split .section__inner,.section--split-reverse .section__inner{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.section--split-reverse .section__inner>:first-child{order:2}.section--split-reverse .section__inner>:last-child{order:1}.section--inset .section__inner{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-10)}.section--inset-sm .section__inner{padding:var(--space-6)}.section--inset-lg .section__inner{padding:var(--space-14)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-gap:var(--space-10);display:grid;gap:var(--space-10)}.section__grid-2{grid-template-columns:repeat(2,1fr)}.section__grid-3{grid-template-columns:repeat(3,1fr)}.section__grid-4{grid-template-columns:repeat(4,1fr)}.section__grid-5{grid-template-columns:repeat(5,1fr)}.section__grid-6{grid-template-columns:repeat(6,1fr)}.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.section__grid-sm{gap:var(--space-4)}.section__grid-md{gap:var(--space-6)}.section__grid-lg{gap:var(--space-14)}.section__stack{display:flex;flex-direction:column;gap:var(--space-6)}.section__stack-sm{display:flex;flex-direction:column;gap:var(--space-4)}.section__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.section__inline{gap:var(--space-3)}.section__inline,.section__inline-sm{align-items:center;display:flex;flex-direction:row}.section__inline-sm{gap:var(--space-2)}.section__inline-lg{align-items:center;display:flex;flex-direction:row;gap:var(--space-4)}.section__list{display:flex;flex-direction:column;gap:var(--space-3)}.section__list-item{align-items:flex-start;color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--space-3)}.section__list-item svg{stroke:var(--color-accent);fill:none;flex-shrink:0;height:1.25em;width:1.25em}.section__list-item-title{color:var(--color-text);font-weight:600}.section__list-item-desc{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width:1280px){.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media (max-width:1024px){.section--split .section__inner,.section--split-reverse .section__inner{grid-template-columns:1fr}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.section,.section--a,.section--b,.section--c{padding-bottom:var(--space-10);padding-top:var(--space-10)}.section__grid-2,.section__grid-3,.section__grid-4,.section__grid-5,.section__grid-6,.section__grid-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.section__title{font-size:var(--text-xl)}.section__subtitle{font-size:var(--text-sm)}.section--inset .section__inner{padding:var(--space-6)}}