@24vlh/vds 0.1.0

package/dist/components/sections.css

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

package/dist/components/sections.min.css

@@ -0,0 +1 @@
+.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)}}