@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/header-footer.css

@@ -1,348 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Header & Footer Framework
- *
- *  Responsibilities:
- *    - Provide full site chrome: header, navigation, skip-link, footer
- *    - Define desktop + mobile header behaviour using CSS-only state hooks
- *    - Establish logo sizing, layout, alignment, and identity integration
- *    - Structure primary navigation with active, hover, focus-visible,
- *      disabled, and mobile-collapsed states
- *    - Supply full footer system: columns, link lists, meta area, and
- *      inverse-logo treatment
- *
- *  System Notes:
- *    - Token-driven: colours, radii, borders, spacing, z-index, typography
- *    - No JS assumptions; the `.header--nav-open` modifier is JS-controlled
- *      but CSS-complete
- *    - Respects VDS accessibility requirements: focus-visible, skip-links,
- *      readable contrast, and responsive layout
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. HEADER & FOOTER TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-header-footer],
-.vds-header-footer {
-    --header-height: var(--space-16);
-    --header-logo-height: var(--space-12);
-    --header-toggle-size: var(--space-6);
-
-    --footer-logo-height: var(--space-8);
-    --footer-col-min-width: var(--space-40);
-}
-
-/* ---------------------------------------------------------
-   2. GLOBAL HEADER CONTAINER
---------------------------------------------------------- */
-
-.header {
-    width: 100%;
-    background-color: var(--color-header-bg);
-    border-bottom: var(--border-width) solid var(--color-header-border);
-    position: relative;
-    z-index: var(--z-header);
-}
-
-.header--sticky {
-    position: sticky;
-    top: 0;
-}
-
-.header--elevated {
-    box-shadow: var(--shadow-1);
-}
-
-.header__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    height: var(--header-height);
-    padding: 0 var(--space-6);
-
-    max-width: var(--layout-max-width);
-    margin: 0 auto;
-}
-
-/* ---------------------------------------------------------
-   3. LOGO HANDLING IN HEADER
---------------------------------------------------------- */
-
-.header .logo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    height: 100%;
-    margin-right: var(--space-6);
-    padding: 0;
-}
-
-.header .logo svg {
-    height: var(--header-logo-height);
-    width: auto;
-}
-
-.header .logo[href]:hover {
-    opacity: 0.9;
-}
-
-/* ---------------------------------------------------------
-   4. PRIMARY NAVIGATION (DESKTOP)
---------------------------------------------------------- */
-
-.header .nav {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-}
-
-.header .nav__item {
-    font-size: var(--text-sm);
-    color: var(--color-text);
-    padding: var(--space-1) 0;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    transition: color 0.15s ease;
-    position: relative;
-}
-
-.header .nav__item:hover {
-    color: var(--color-text-muted);
-}
-
-.header .nav__item--active {
-    color: var(--color-text);
-    font-weight: 600;
-}
-
-.header .nav__item--active::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: calc(-1 * var(--space-1));
-    height: var(--border-width);
-    background-color: var(--color-accent);
-    border-radius: var(--radius-pill, var(--radius-md));
-}
-
-.header .nav__item--disabled {
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none;
-}
-
-.header .nav__item:focus-visible {
-    outline: var(--border-width) solid var(--focus-ring-color);
-    outline-offset: var(--space-1);
-    border-radius: var(--radius-sm);
-}
-
-/* ---------------------------------------------------------
-   5. MOBILE NAVIGATION (CSS-ONLY HOOKS)
---------------------------------------------------------- */
-
-.header .header__toggle {
-    display: none;
-    cursor: pointer;
-    padding: var(--space-2);
-    color: var(--color-text);
-    border-radius: var(--radius-sm);
-    background-color: transparent;
-    border: none;
-}
-
-.header .header__toggle svg {
-    stroke: currentColor;
-    width: var(--header-toggle-size);
-    height: var(--header-toggle-size);
-}
-
-.header .header__toggle:focus-visible {
-    outline: var(--border-width) solid var(--focus-ring-color);
-    outline-offset: var(--space-1);
-}
-
-@media (max-width: 768px) {
-
-    .header .nav {
-        display: none;
-    }
-
-    .header .header__toggle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .header.header--nav-open .nav {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-4);
-
-        position: absolute;
-        top: var(--header-height);
-        right: 0;
-        width: 100%;
-
-        padding: var(--space-6);
-        background-color: var(--color-surface);
-        border-bottom: var(--border-width) solid var(--color-border-subtle);
-    }
-
-    .header.header--nav-open .nav__item {
-        padding: var(--space-1) 0;
-    }
-}
-
-/* ---------------------------------------------------------
-   6. SKIP-LINK (ACCESSIBILITY)
---------------------------------------------------------- */
-
-.header .skip-link {
-    position: absolute;
-    left: var(--space-4);
-    top: var(--space-4);
-    padding: var(--space-2) var(--space-3);
-    background-color: var(--color-accent);
-    color: var(--color-on-accent);
-    border-radius: var(--radius-sm);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    transform: translateY(calc(-1 * var(--space-6)));
-    transition: transform 0.15s ease;
-    z-index: var(--z-header);
-}
-
-.header .skip-link:focus-visible {
-    transform: translateY(0);
-    outline: var(--border-width) solid var(--focus-ring-color);
-    outline-offset: var(--space-1);
-}
-
-/* ---------------------------------------------------------
-   7. GLOBAL FOOTER CONTAINER
---------------------------------------------------------- */
-
-.footer {
-    width: 100%;
-    background-color: var(--color-footer-bg);
-    color: var(--color-footer-text);
-
-    padding-top: var(--space-10);
-    padding-bottom: var(--space-10);
-    border-top: var(--border-width) solid var(--color-border-strong);
-}
-
-.footer__inner {
-    max-width: var(--layout-max-width);
-    margin: 0 auto;
-
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    padding: 0 var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   8. FOOTER COLUMN SYSTEM
---------------------------------------------------------- */
-
-.footer__col {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    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);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    opacity: 0.85;
-    transition: opacity 0.15s ease;
-}
-
-.footer__link:hover {
-    opacity: 1;
-}
-
-.footer__link:focus-visible {
-    outline: var(--border-width) solid var(--focus-ring-color);
-    outline-offset: var(--space-1);
-    border-radius: var(--radius-sm);
-}
-
-@media (max-width: 768px) {
-    .footer__inner {
-        flex-direction: column;
-        gap: var(--space-10);
-    }
-}
-
-/* ---------------------------------------------------------
-   9. FOOTER LOGO HANDLING
---------------------------------------------------------- */
-
-.footer .logo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    padding: 0;
-    margin-bottom: var(--space-6);
-}
-
-.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);
-}
-
-/* ---------------------------------------------------------
-   10. FOOTER META / COPYRIGHT
---------------------------------------------------------- */
-
-.footer__meta {
-    margin-top: var(--space-8);
-    font-size: var(--text-xs);
-    opacity: 0.75;
-}
-
-.footer__meta,
-.footer__meta p,
-.footer__meta a,
-.footer__meta span,
-.footer__meta small {
-    color: var(--color-footer-text);
-}
-
-.footer__meta a {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-.footer__meta a:focus-visible {
-    outline: var(--border-width) solid var(--focus-ring-color);
-    outline-offset: var(--space-1);
-    border-radius: var(--radius-sm);
-}
+.vds-header-footer,[data-vds-header-footer]{--header-height:var(--space-16);--header-logo-height:var(--space-12);--header-toggle-size:var(--space-6);--footer-logo-height:var(--space-8);--footer-col-min-width:var(--space-40)}.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}.header--elevated{box-shadow:var(--shadow-1)}.header__inner{align-items:center;display:flex;height:var(--header-height);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.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{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{color:var(--color-text-muted)}.header .nav__item--active{color:var(--color-text);font-weight:600}.header .nav__item--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{cursor:default;opacity:.5;pointer-events:none}.header .nav__item: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)}@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(--color-surface);border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);position:absolute;right:0;top:var(--header-height);width:100%}.header.header--nav-open .nav__item{padding:var(--space-1) 0}}.header .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)}.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(--space-10);padding-top:var(--space-10);width:100%}.footer__inner{align-items:flex-start;display:flex;flex-wrap:nowrap;justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.footer__col{display:flex;flex-direction:column;gap:var(--space-3);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__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)}