/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Design Tokens CSS custom properties from Figma variables (colors, typography, spacing, radius) */ /* Design Tokens CSS custom properties for theme variables Imported from Figma: team.blue – Website */ /* ========================================================================== Breakpoints (CSS cannot use variables in media queries) ========================================================================== Mobile: max-width: 767px (@media (max-width: 767px)) Tablet: min-width: 768px (@media (min-width: 768px)) Desktop: min-width: 1024px (@media (min-width: 1024px)) Wide: min-width: 1440px (@media (min-width: 1440px)) ========================================================================== */ :root { /* Horizontal Overscroll Fix */ overflow-x: clip; /* ========================================================================== Color Primitives ========================================================================== */ /* Grey Scale */ --color-grey-black: #000000; --color-grey-dark: #292b26; --color-grey-light: #f1f3f6; --color-grey-white: #ffffff; /* Neutral Greyscale */ --color-neutral-50: #f1f3f6; --color-neutral-100: #e9ecf0; --color-neutral-200: #d8dee5; --color-neutral-300: #bcc6d4; --color-neutral-400: #9caabe; --color-neutral-500: #8492ad; --color-neutral-600: #727e9e; --color-neutral-700: #666f8f; --color-neutral-800: #575d76; --color-neutral-900: #484d60; --color-neutral-950: #2f323c; /* Blue Palette */ --color-blue-night: #04182b; --color-blue-sky: #161f36; --color-blue-sea: #2d4470; --color-blue-coral: #00627f; --color-blue-aqua-aaa: #438699; --color-blue-aqua: #599db1; /* Red Palette */ --color-red-blood: #b21500; --color-red-strawberry: #e72107; --color-red-peach: #ff4b33; --color-red-pink: #ef0648; /* Green Palette */ --color-green-forest: #4e664f; --color-green-olive: #8cb88e; --color-green-grass: #a8dcab; /* Purple */ --color-purple: #6179ff; /* Accent - Violet */ --color-accent-violet: #4b56bb; --color-accent-violet-20: rgba(75, 86, 187, 0.1); /* Accent - Burgundy */ --color-accent-burgundy: #af476a; --color-accent-burgundy-20: rgba(175, 71, 106, 0.1); /* Accent - Forrest */ --color-accent-forrest: #0f7d79; --color-accent-forrest-20: rgba(15, 125, 121, 0.1); /* Brand - Loopia */ --color-brand-loopia-pink: #ff7dfa; /* Radial / Gradient */ --radial-red: radial-gradient(61.54% 141.42% at 0% 0%, rgba(175, 71, 106, 0.00) 0%, rgba(175, 71, 106, 0.25) 100%); --radial-green: radial-gradient(61.54% 141.42% at 0% 0%, rgba(15, 125, 121, 0.00) 0%, rgba(15, 125, 121, 0.25) 100%); --radial-purple: radial-gradient(61.54% 141.42% at 0% 0%, rgba(75, 86, 187, 0.00) 0%, rgba(75, 86, 187, 0.25) 100%); --radial-brand: radial-gradient(61.54% 141.42% at 0% 0%, rgba(255, 125, 250, 0.25) 0%, rgba(255, 125, 250, 0.06) 100%); --radial-text-red:linear-gradient(180deg, #FFF 25%, #AF476A 100%); --radial-text-green:linear-gradient(180deg, #FFF 25%, #36ADA9 100%); --radial-text-purple:linear-gradient(180deg, #FFF 25%, #4B56BB 100%); /* Gradients */ --gradient-white-transparent: linear-gradient(180deg, var(--color-white-0) 25%, var(--color-white) 100%); /* Transparent Black */ --color-black-100: #000000; --color-black-90: rgba(0, 0, 0, 0.9); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-5: rgba(0, 0, 0, 0.05); --color-black-0: rgba(0, 0, 0, 0); /* Transparent White */ --color-white: #ffffff; --color-white-90: rgba(255, 255, 255, 0.9); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-5: rgba(255, 255, 255, 0.05); --color-white-0: rgba(255, 255, 255, 0); /* ========================================================================== Theme Semantic Colors ========================================================================== */ --color-background: #04182b; --color-foreground: #FFFFFF; --color-card: var(--color-white-10); --color-card-foreground: var(--color-white); --color-brand: var(--color-brand-loopia-pink); --color-brand-foreground: var(--color-black-100); --color-primary: var(--color-red-pink); --color-primary-foreground: var(--color-white); --color-secondary: var(--color-blue-aqua); --color-secondary-foreground: var(--color-blue-aqua-aaa); --color-muted: var(--color-neutral-50); --color-muted-foreground: var(--color-white-70); --color-accent: var(--color-green-olive); --color-accent-foreground: var(--color-blue-night); --color-destructive: var(--color-red-blood); --color-destructive-foreground: var(--color-white); --color-border: var(--color-white-10); --color-input: var(--color-white-10); --color-ring: var(--color-purple); --fallback-glass-bg: linear-gradient(198deg, rgba(255, 255, 255, 0.18) 12.02%, rgba(255, 255, 255, 0.20) 50.04%, rgba(255, 255, 255, 0.19) 88.06%); --fallback-glass-border: rgba(255, 255, 255, 0.28); /* 1px glass rim; ~matches old 0.5px line weight */ /* ========================================================================== Typography - Font Families & Weights (from theme global fonts) ========================================================================== */ --font-family-heading: "Inter", sans-serif; --font-family-body: "Inter", sans-serif; --font-family-action: "Inter", sans-serif; --font-weight-bold: 700; /* Semibold */ --font-weight-heading: 600; /* Semibold */ --font-weight-action: 500; /* Medium */ --font-weight-body: 400; /* Regular */ --line-height-heading: 1.3; --line-height-body: 1.5; --opacity-body: 0.7; /* Typography - Desktop Sizes */ --font-size-heading-xl: 4rem; --font-size-heading-lg: 3.5rem; --font-size-heading-md: 2.5rem; --font-size-heading-sm: 2rem; --font-size-heading-xs: 1.5rem; --font-size-body-lg: 1.25rem; --font-size-body-md: 1rem; --font-size-body-sm: 0.875rem; --font-size-usp: 6.125rem; /* ========================================================================== Spacing - Desktop ========================================================================== */ /* Section Spacing */ --spacing-section-horizontal-lg: 5rem; --spacing-section-horizontal-md: 3.5rem; --spacing-section-horizontal-sm: 1.5rem; --spacing-section-vertical-xl: 10rem; --spacing-section-vertical-lg: 7.0rem; --spacing-section-vertical-md: 5.0rem; /* Container Margin */ --spacing-container-margin-xl: 8rem; --spacing-container-margin-lg: 5rem; --spacing-container-margin-md: 4rem; --spacing-container-margin-sm: 3rem; /* Container Gap */ --spacing-container-gap-xl: 2rem; --spacing-container-gap-lg: 1.5rem; --spacing-container-gap-md: 1rem; --spacing-container-gap-sm: 0.75rem; --spacing-container-gap-xs: 0.5rem; /* Card Padding */ --spacing-card-padding-2xl: 5rem; --spacing-card-padding-xl: 3.5rem; --spacing-card-padding-lg: 3rem; --spacing-card-padding-md: 2rem; --spacing-card-padding-sm: 1.5rem; --spacing-card-padding-xs: 1rem; --spacing-card-padding-2xs: 0.5rem; /* Button Padding */ --spacing-button-padding-xl: 2rem; --spacing-button-padding-lg: 1.5rem; --spacing-button-padding-md: 1rem; --spacing-button-padding-sm: 0.75rem; --spacing-button-padding-xs: 0.5rem; --spacing-button-padding-2xs: 0.25rem; /* global section padding */ --section-padding-global:5vw; --section-padding-global-sm:1.75vw; /* Grid */ --grid-columns: 12; --blog-width:848px; /* Card height - shared by cards-showcase and cards-two-columns (40% of ~1200px container) */ --card-height-desktop: 33rem; /* ========================================================================== Border Radius - Desktop ========================================================================== */ --radius-full: 500px; --radius-xl: 4rem; --radius-lg: 3.5rem; --radius-md: 3rem; --radius-sm: 2.5rem; --radius-xs: 2rem; --radius-xxs: 1.5rem; --radius-xxxs: 1rem; --radius-icon: 1rem; --radius-checkbox:0.5rem; } @media (max-width: 1024px) { :root { --section-padding-global:4vw; } } /* ========================================================================== Mobile Overrides (< 48rem) ========================================================================== */ @media (max-width: 767px) { :root { /* Typography - Mobile Sizes */ --font-size-heading-xl: 2rem; --font-size-heading-lg: 1.75rem; --font-size-heading-md: 1.5rem; --font-size-heading-sm: 1.375rem; --font-size-heading-xs: 1.125rem; --font-size-body-lg: 1.125rem; --font-size-body-md: 0.875rem; --font-size-body-sm: 0.75rem; --font-size-usp: 4rem; --font-size-usp-lg:5rem; --font-size-default:1rem; /* Section Spacing - Mobile */ --spacing-section-horizontal-lg: 1rem; --spacing-section-horizontal-md: 1rem; --spacing-section-horizontal-sm: 1rem; --spacing-section-vertical-xl: 4.0rem; --spacing-section-vertical-lg: 4.0rem; --spacing-section-vertical-md: 2.0rem; /* Container Margin - Mobile */ --spacing-container-margin-xl: 3.5rem; --spacing-container-margin-lg: 3.5rem; --spacing-container-margin-md: 2.5rem; --spacing-container-margin-sm: 2rem; /* Card Padding - Mobile */ --spacing-card-padding-2xl: 1rem; --spacing-card-padding-xl: 1.5rem; --spacing-card-padding-lg: 1.5rem; --spacing-card-padding-md: 1.5rem; --spacing-card-padding-sm: 1rem; --spacing-card-padding-xs: 1rem; --spacing-card-padding-2xs: 0.5rem; /* Grid - Mobile */ --grid-columns: 4; /* Border Radius - Mobile */ --radius-xl: 4rem; --radius-lg: 3rem; --radius-md: 2.5rem; --radius-sm: 2rem; --radius-xs: 1.5rem; --radius-xxs: 1rem; --radius-xxxs: 0.5rem; --radius-icon: 1rem; --section-padding-global:4vw; --section-padding-global-sm:4vw; } } html { font-size: calc(0.625rem + 0.41666666666666663vw); } @media screen and (max-width:2560px) { html { font-size: calc(0.8092105263157895rem + 0.2631578947368421vw); } } @media screen and (max-width:1920px) { html { font-size: calc(0.2499999999999999rem + 0.8333333333333335vw); } } @media screen and (max-width:1440px) { html { font-size: calc(0.1346153846153847rem + 0.9615384615384615vw); } } @media screen and (max-width:1024px) { html { font-size: calc(-0.24610894941634232rem + 1.5564202334630348vw); } } @media screen and (max-width:767px) { html { font-size: 1rem; } } /* ========================================================================== Module Base Styles Shared styles for all module wrappers ========================================================================== */ /* Shared module scoping - applies box-sizing to all module wrappers */ [class$="-wrapper"] *, [class$="-wrapper"] *::before, [class$="-wrapper"] *::after { box-sizing: border-box; } /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 0.0625rem dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } body { background-color: var(--color-background); overflow-x: clip; /* Prevent horizontal scrollbars from hero background gradient; allow vertical bleed */ /* Push entire page content below fixed header using measured nav height */ padding-top: 6rem; } @media screen and (max-width: 768px) { body { padding-top: 5rem; } } section { position: relative; } /**** COLORS ****/ .color-foreground, .color-foreground h1, .color-foreground h2, .color-foreground h3, .color-foreground h4, .color-foreground h5, .color-foreground h6, .color-foreground p { color: var(--color-foreground); } .color-background, .color-background h1, .color-background h2, .color-background h3, .color-background h4, .color-background h5, .color-background h6, .color-background p { color: var(--color-background); } .color-background-dark { background-color:var(--color-background) } .color-background-lightgrey { background-color:var(--color-grey-light); } .tag-green { color:var(--color-accent-forrest); background-color:var(--color-accent-forrest-20); } .tag-white { color:var(--color-background); background-color:var(--color-foreground); } .tag-red { color:var(--color-accent-burgundy); background-color:var(--color-accent-burgundy-20); } .tag-blue { color:var(--color-accent-violet); background-color:var(--color-accent-violet-20); } .color-text-muted { color:var(--color-muted-foreground); } /**** FLEX ****/ .flex-col-mob-row-desk { display:flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; } } .flex-row { display:flex; justify-content: space-between; } .flex { display:flex; } .flex-column { display:flex; flex-direction: column; } .flex-column-center { display:flex; flex-direction: column; justify-content: center; } .flex-column-center-center { display:flex; flex-direction: column; justify-content: center; align-items: center; } .flex-center { display:flex; justify-content: center; } @media (max-width: 768px) { .mobile-top-section-indent { padding-right:0.6rem; padding-left:0.6rem; } } /**** GRID/WIDTH CLASSES ****/ .width-50-desk, .width-30-desk, .width-70-desk, .width-100, .width-40-desk, .width-45-desk, .width-55-desk, .width-60-desk, .width-35-desk, .width-65-desk { width:100%; } .width-100 { width:100%; } @media (min-width: 768px) { .width-50-desk { width:50%; } .width-30-desk { width:30%; } .width-40-desk { width:40%; } .width-45-desk { width:45%; } .width-55-desk { width:55%; } .width-60-desk { width:60%; } .width-70-desk { width:70%; } .width-35-desk { width:35%; } .width-65-desk { width:65%; } } /*** TAGS ***/ .tags-wrapper { display:flex; flex-wrap: wrap; gap: var(--spacing-container-gap-xs); max-width:100%; } .tag { padding:var(--spacing-button-padding-xs) var(--spacing-button-padding-md); font-size:var(--font-size-body-md); border-radius:var(--radius-xl); font-weight:var(--font-weight-action); } /**** General ****/ .text-align-center { text-align: center; } .hide-on-mobile { display: none !important; } @media (min-width: 768px) { .hide-on-mobile { display: flex !important; } } /* Utility classes for hiding gradients on mobile */ @media (max-width: 768px) { .gradient-hide-on-mobile { display: none !important; } .gradient-wrapper-hide-on-mobile { display: none !important; } } @media (min-width: 768px) { .gradient-wrapper-hide-on-mobile { display: block !important; } } /* Desktop-only: visible on desktop, hidden on mobile */ .gradient-blobs-desktop-only { display: block; } @media (max-width: 768px) { .gradient-blobs-desktop-only { display: none !important; } } /* Mobile-only: hidden on desktop, visible on mobile */ .gradient-blobs-mobile-only { display: none !important; } @media (max-width: 768px) { .gradient-blobs-mobile-only { display: block !important; } } /* Opacity */ .opacity-70 { opacity: 0.7; } /* Event image gradient background */ .event-image-gradient-bg { background-color: lightgray; background-position: 50%; background-size: cover; background-repeat: no-repeat; background-blend-mode: darken, normal; } /* Divider */ .c-divider { height:1px; margin-top:var(--spacing-container-margin-sm); margin-bottom:var(--spacing-container-margin-sm); background-color:var(--color-white-20); } /* SVG Backgrounds */ /* Ellipse SVG BG */ .ellipse-svg-bg { display:none } @media (min-width: 1024px) { /* Ellipse SVG BG */ .ellipse-svg-bg { width:100%; height:auto; display:block; position:absolute; top: calc(var(--spacing-section-vertical-lg) * -1); left:0; z-index:-1; fill: radial-gradient(43.84% 100.83% at 62.97% 0%, #0F7D79 0%, rgba(15, 125, 121, 0.00) 90%), radial-gradient(46.38% 100.85% at 36.97% 0%, #4B56BB 0%, rgba(75, 86, 187, 0.00) 90%); opacity: 0.35; filter: blur(50px); } } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* ========================================================================== Global Container System ========================================================================== Container Width Classes: - container-small : 50rem - Narrow content (blog, text-heavy) - container-medium : 67.5rem - Standard content sections - container-large : 90rem - Wide content, still constrained - (no container) : 100% - Fullscreen/edge-to-edge sections Usage: Apply to .dnd-section OR inner wrappers within modules Sections that span edge-to-edge should NOT use container classes. ========================================================================== */ /* Container Width Tokens */ :root { --container-small: 800px; --container-medium: 1080px; --container-large: 1440px; } /* Base Container Behavior */ .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } /* ========================================================================== Container Width Classes ========================================================================== */ /* Small Container - Narrow content (blog, focused text) */ .container-small, .dnd-section.container-small > .row-fluid { max-width: var(--container-small); margin-left: auto; margin-right: auto; } /* Medium Container - Standard content width */ .container-medium, .dnd-section.container-medium > .row-fluid { max-width: var(--container-medium); margin-left: auto; margin-right: auto; } /* Large Container - Wide but constrained */ .container-large, .dnd-section.container-large > .row-fluid { max-width: var(--container-large); margin-left: auto; margin-right: auto; } /* ========================================================================== Section Layout Defaults ========================================================================== */ .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* ========================================================================== Container + Padding Combinations Useful for sections that need both width constraint and edge padding ========================================================================== */ /* Container with horizontal global padding */ .container-small.section-padding-horiz-global, .container-medium.section-padding-horiz-global, .container-large.section-padding-horiz-global { padding-left: var(--section-padding-global); padding-right: var(--section-padding-global); } /* Container with smaller horizontal padding */ .container-small.section-padding-horiz-global-sm, .container-medium.section-padding-horiz-global-sm, .container-large.section-padding-horiz-global-sm { padding-left: var(--section-padding-global-sm); padding-right: var(--section-padding-global-sm); } /* Elements Base HTML elements are styled in this section (,

, ,

,