/* * Netbiis Bootstrap - Edge Delivery Services CSS Framework * Lightweight, responsive framework optimized for performance * Target: < 10KB for optimal Adobe Edge Delivery Services performance * * Load this in for immediate rendering * * Documentation: * - Complete Guide: styles/netbiis/NETBIIS_BOOTSTRAP.md * - Setup Guide: styles/netbiis/SETUP_GUIDE.md * - Migration Notes: styles/MIGRATION_NOTES.md */ *, *::before, *::after { box-sizing: border-box; } .section { padding: var(--spacing-md) 0; } .section > div { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } .section > div[class*="block"] { max-width: none; padding: 0; } @media (width >= 640px) { .section { padding: var(--spacing-lg) 0; } .section > div { padding: 0 var(--spacing-lg); } } @media (width >= 768px) { .section > div { max-width: 720px; padding: 0 var(--spacing-lg); } } @media (width >= 1024px) { .section { padding: var(--spacing-xl) 0; } .section > div { max-width: 960px; padding: 0 var(--spacing-xl); } } @media (width >= 1280px) { .section > div { max-width: 1140px; padding: 0 var(--spacing-xl); } } @media (width >= 1560px) { .section { padding: var(--spacing-xxl) 0; } .section > div { max-width: 1440px; padding: 0 var(--spacing-xxl); } } .section.container-sm > div { max-width: 540px !important; } .section.container-md > div { max-width: 720px !important; } .section.container-lg > div { max-width: 960px !important; } .section.container-xl > div { max-width: 1140px !important; } .section.container-xxl > div { max-width: 1440px !important; } .section.container-custom > div { max-width: 1008px !important; } .section.container-fluid > div { max-width: none !important; } .section.full-width > div { max-width: none !important; padding: 0 !important; } .section.no-padding-vertical { padding: 0; } .section.no-padding-horizontal > div { padding-left: 0 !important; padding-right: 0 !important; } .section.spacing-none { padding: 0; } .section.spacing-xs { padding: var(--spacing-xs) 0; } .section.spacing-sm { padding: var(--spacing-sm) 0; } .section.spacing-md { padding: var(--spacing-md) 0; } .section.spacing-lg { padding: var(--spacing-lg) 0; } .section.spacing-xl { padding: var(--spacing-xl) 0; } .section.spacing-xxl { padding: var(--spacing-xxl) 0; } .section.bg-light { background-color: var(--light-color); } .section.bg-dark { background-color: var(--dark-color); color: var(--background-color); } .section.bg-primary { background-color: var(--primary-color); color: var(--background-color); } .section.border-top { border-top: 1px solid var(--border-color); } .section.border-bottom { border-bottom: 1px solid var(--border-color); } :root { /* colors */ --background-color: white; --light-color: #f8f8f8; --dark-color: #505050; --text-color: #fff; --link-color: #3b63fb; --link-hover-color: #1d3ecf; /* fonts */ --body-font-family: roboto, roboto-fallback, sans-serif; --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif; /* body sizes (mobile first) */ --body-font-size-m: 22px; --body-font-size-s: 19px; --body-font-size-xs: 17px; /* heading sizes (mobile first) */ --heading-font-size-xxl: 55px; --heading-font-size-xl: 44px; --heading-font-size-l: 34px; --heading-font-size-m: 27px; --heading-font-size-s: 24px; --heading-font-size-xs: 22px; /* nav height */ --nav-height: 45px; /* breakpoints */ --breakpoint-xs: 480px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-xxl: 1560px; /* spacing scale */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 32px; --spacing-lg: 32px; --spacing-xl: 32px; --spacing-xxl: 40px; /* container max-widths */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-xxl: 1440px; /* grid */ --grid-columns: 12; --grid-gap: var(--spacing-md); } @font-face { font-family: roboto-condensed-fallback; size-adjust: 88.82%; src: local("Arial"); } @font-face { font-family: roboto-fallback; size-adjust: 99.529%; src: local("Arial"); } @media (width >= 1024px) { :root { /* body sizes (desktop) */ --body-font-size-m: 18px; --body-font-size-s: 16px; --body-font-size-xs: 14px; /* heading sizes (desktop) */ --heading-font-size-xxl: 45px; --heading-font-size-xl: 36px; --heading-font-size-l: 28px; --heading-font-size-m: 22px; --heading-font-size-s: 20px; --heading-font-size-xs: 18px; } } html, body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body { display: none; margin: 0; background-color: #632B7C; color: var(--text-color); font-family: var(--body-font-family); font-size: var(--body-font-size-m); line-height: 1.6; } body.appear { display: block; } header { height: var(--nav-height); } header .header, footer .footer { visibility: hidden; } header .header[data-block-status="loaded"], footer .footer[data-block-status="loaded"] { visibility: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0.8em; margin-bottom: 0.25em; font-family: var(--heading-font-family); font-weight: 600; line-height: 1.25; scroll-margin: 40px; } h1 { font-size: var(--heading-font-size-xxl); } h2 { font-size: var(--heading-font-size-xl); } h3 { font-size: var(--heading-font-size-l); } h4 { font-size: var(--heading-font-size-m); } h5 { font-size: var(--heading-font-size-s); } h6 { font-size: var(--heading-font-size-xs); } p, dl, ol, ul, pre, blockquote { margin-top: 0.8em; margin-bottom: 0.25em; } a:any-link { color: var(--link-color); text-decoration: none; overflow-wrap: break-word; } a:hover { color: var(--link-hover-color); text-decoration: underline; } a.button:any-link, button { display: inline-block; max-width: 100%; margin: 12px 0; border: 2px solid transparent; border-radius: 2.4em; padding: 0.5em 1.2em; font-family: var(--body-font-family); font-style: normal; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; background-color: var(--link-color); color: var(--background-color); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.button:hover, a.button:focus, button:hover, button:focus { background-color: var(--link-hover-color); cursor: pointer; } button:disabled, button:disabled:hover { background-color: var(--light-color); cursor: unset; } a.button.secondary, button.secondary { background-color: unset; border: 2px solid currentcolor; color: var(--text-color); } main img { max-width: 100%; width: auto; height: auto; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--spacing-md); padding-left: var(--spacing-md); } .container-fluid { width: 100%; padding-right: var(--spacing-md); padding-left: var(--spacing-md); } @media (width >= 640px) { .container { max-width: var(--container-sm); } } @media (width >= 768px) { .container { max-width: var(--container-md); } } @media (width >= 1024px) { .container { max-width: var(--container-lg); padding-right: var(--spacing-lg); padding-left: var(--spacing-lg); } .container-fluid { padding-right: var(--spacing-lg); padding-left: var(--spacing-lg); } } @media (width >= 1280px) { .container { max-width: var(--container-xl); } } @media (width >= 1560px) { .container { max-width: var(--container-xxl); } } .grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-columns), 1fr); } .grid-auto { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .aspect-video { aspect-ratio: 16/9; } .aspect-square { aspect-ratio: 1/1; } .aspect-4-3 { aspect-ratio: 4/3; } .aspect-21-9 { aspect-ratio: 21/9; } .icon { display: inline-block; height: 24px; width: 24px; } .icon img { height: 100%; width: 100%; }