// $Id: site.less 24990 2020-07-02 16:01:42Z efolley $ @import "/assets/less/breakpoints.less"; @import "/assets/less/colors.less"; @import "/assets/less/fonts.less"; @import "/assets/less/mixins.less"; //// SITE COLORS @red: #ed142e; @dark-blue: #142d6d; @medium-blue: #125fa6; @light-blue: #e0ecf8; @yellow: #ffe138; @steel-gray: #b5c6d6; @text-color: #1a1536; @off-white: #f2f2f2; @blue: @medium-blue; @dark-blue-gradient-end: #1260a7; //// TYPOGRAPHY /* montserrat-regular - latin */ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('/assets/webfonts/montserrat-v26-latin-regular.woff2') format('woff2'); } /* montserrat-700 - latin */ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('/assets/webfonts/montserrat-v26-latin-700.woff2') format('woff2'); } /* montserrat-900 - latin */ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('/assets/webfonts/montserrat-v26-latin-900.woff2') format('woff2'); } @montserrat: 'Montserrat', sans-serif; @mackinac: 'p22-mackinac-pro', serif; @text-font: @montserrat; @header-font: @mackinac; :root { --font-size: 16px; --line-height: 1.5; --baseline: 1.5rem; // 320 - 1200px using 1 = .25rem --fluid-4-6: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.9091)), 1.5rem); --fluid-4-8: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 1.8182)), 2rem); --fluid-5-8: clamp(1.25rem, calc(1.25rem + ((1vw - 0.2rem) * 1.3636)), 2rem); --fluid-6-10: clamp(1.5rem, calc(1.5rem + ((1vw - 0.2rem) * 1.8182)), 2.5rem); --fluid-6-12: clamp(1.5rem, calc(1.5rem + ((1vw - 0.2rem) * 2.7273)), 3rem); --fluid-8-12: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 1.8182)), 3rem); --fluid-8-16: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 3.6364)), 4rem); --fluid-8-24: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 7.2727)), 6rem); } //// MISC @content-width: 1160px; @sizer-padding: 20px; /* =============================================== GLOBAL ELEMENTS =============================================== */ div.preview-notice-v2 { display: none; } body.is-preview div.preview-notice-v2 { display: flex; } body:after { display: none; } :root { accent-color: auto; } html { font-family: @text-font; background-color: @white; color: @text-color; } input, textarea, select, button { font-size: inherit; font-family: inherit; } h1, .h1, h2, .h2, h3, .h3 { color: @text-color; font-family: @header-font; font-weight: bold; } h4, h5, h6 { color: @blue; font-family: @header-font; font-weight: bold; } h1, h1.page-title { font-size: var(--fluid-8-12); font-weight: 800; } a { color: @blue; text-decoration-line: underline; } span.req { color: @red; } .larger { font-size: 1.2rem; } .wrap-normal { text-wrap: wrap; } .cs-medium-blue { background-color: @medium-blue; color: @white; h1,h2,h3,h4,h5,h6 { color: @white; } a:not(.button) { color: @white; } a.button { background-color: @red; border-color: @red; color: @white; } } .tmpl-contribution-form #explanation, .tmpl-membership-form #explanation, .tmpl-pac-contribution-form #explanation { font-weight: bold; } /* =============================================== VANILLA THEME OVERRIDES =============================================== */ :root { --button-primary-color: @white; --button-primary-bg-color: @red; --button-primary-border-color: @red; --button-primary-border-radius: .25rem; --button-secondary-color: @white; --button-secondary-bg-color: @light-gray; --button-secondary-border-color: @light-gray; } //// ADDTOCALENDAR .addtocalendar { width: 100%; } .atc-style-blue .atcb-link, .atc-style-blue .atcb-link:hover, .atc-style-blue .atcb-link:active, .atc-style-blue .atcb-link:focus { padding: .5rem 1rem; border: 1px solid var(--button-primary-border-color); background-color: var(--button-primary-bg-color); color: var(--button-primary-color); text-align: center; font-weight: bold; line-height: 1; border-radius: var(--button-primary-border-radius); .box-shadow(none); } .atc-style-blue .atcb-item, .atc-style-blue .atcb-item-link { margin: 0; } //// BUTTONS button, a.button { text-decoration: none; text-transform: none; // override legacy styles color: @white; background-color: @red; border-color: @red; &.white-tp { color: @white; background-color: transparent; border-color: @white; } &.text-tp { color: @text-color; background-color: transparent; border-color: @text-color; } &.red { color: @white; background-color: @red; border-color: @red; } } .primary-form .button-wrapper button[type="submit"]:not(.secondary) { font-size: 1.5rem; padding: 1rem 2rem; } //// BUTTON AMOUNTS :root { --button-amounts-color: @white; --button-amounts-bg-color: @blue; --button-amounts-checked-color: @white; --button-amounts-checked-bg-color: @red; --button-amounts-border-radius: .25rem; } /* =============================================== PRINT STYLES =============================================== */ @media print { body { font-size: 12pt; background: none; } div, .preview-notice-v2 { display: none; } .page-container, #middle, #middle .sizer, #middle .sizer .container, #content, #content .story-content { display: block; margin: 0; padding: 0; border: 0; height: auto; width: auto; background: none; box-shadow: none; } #content .story-content div { display: block; } } /* =============================================== MAIN STRUCTURE =============================================== */ //// CONTAINERS .sizer, .like-sizer { max-width: calc(@content-width + (@sizer-padding * 2)); padding: 0 @sizer-padding; margin: 0 auto; } .story-content { .contain-floats(); } //// TOP ALERT #alert-bar { background-color: @red; color: @white; a { color: @white !important; } } //// TOP #top.v2023 { padding: .5rem 0; background: linear-gradient(90deg, @dark-blue, @dark-blue-gradient-end); color: @white; .container { display: flex; gap: 2rem; justify-content: space-between; align-items: center; position: relative; } .top-links { display: flex; justify-content: flex-end; column-gap: 1rem; margin-bottom: 1rem; } .social-icons { a { color: @white; } } .buttons { display: flex; column-gap: 1rem; } } @media @sm-md { .not-logo { display: none; } } //// MENU TOGGLE #menu-toggle:not(.bespoke) { text-align: right; font-size: 2rem; a { color: @white; text-decoration: none; } button { color: @white; background: transparent; border: 0; padding: .5rem; } span { margin-right: .5rem; } .fas { transition: all 1s; } } @media @lg-up { #menu-toggle:not(.bespoke) { display: none; } } @media @sm-only { #menu-toggle:not(.bespoke) { span { display: none; } } } //// TOP NAV @media @lg-up { #topnav:not(.bespoke) { --level1-bg-color: @transparent; --level1-link-color: @white; --level1-hover-bg-color: @transparent; --level1-hover-color: @white; --level1-link-padding: 0 1rem; --level1-line-height: 2.5rem; --level1-gap: 0; --level2-bg-color: @red; --level2-link-color: @white; --level2-hover-bg-color: @white; --level2-hover-color: @red; --level2-link-padding: .5rem 1rem; } } @media @sm-md { #topnav:not(.bespoke) { --bg-color: @dark-gray; --link-color: @white; --border-color: @white; } } #topnav:not(.bespoke) { a[href=""], a[href="#"] { cursor: default; } } @media @lg-up { #topnav:not(.bespoke) { background: var(--level1-bg-color); .sizer { padding: 0; > ul { display: flex; gap: var(--level1-gap); justify-content: flex-end; > li { margin: 0; display: block; > a { padding: var(--level1-link-padding); display: block; color: var(--level1-link-color); line-height: var(--level1-line-height); text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color .25s; &:hover { background-color: var(--level1-hover-bg-color); color: var(--level1-hover-color); } } } } .level2 { width: 100%; position: absolute; //padding-top: 1rem; left: 0; z-index: 99999; height: 0; opacity: 0; overflow: hidden; transition: opacity .5s linear; .inner-wrapper { padding: 1rem; background-color: @red; } .flex-block-grid { column-gap: 2rem; justify-content: flex-start; > div { max-width: calc((100% - 8rem)/5); } } ul { li { &.header { padding: .5rem 1rem; text-transform: uppercase; color: @white; font-weight: bold; } a { color: var(--level2-link-color); display: block; padding: var(--level2-link-padding); text-decoration: none; &:hover { background-color: var(--level2-hover-bg-color); color: var(--level2-hover-color); } } } } } > ul > li:hover .level2 { height: auto; overflow: auto; opacity: 1; } .level3 { height: 0; opacity: 0; overflow: hidden; transition: opacity .5s linear; } } } } @media @sm-md { #topnav:not(.bespoke) { > .sizer { padding: 0; > ul { width: 100%; overflow: hidden; &:not(.active) { height: 0; } > li { margin: 0; width: 100%; height: auto; display: block; border-top: 1px solid var(--border-color); &:first-child { margin-top: 1rem; } &:last-child { padding-bottom: .5rem; } &.has-subnav { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; flex-wrap: wrap; > a { flex-grow: 1; } } > a { display: block; padding: .5rem; color: var(--link-color); text-align: left; height: auto; line-height: 1; text-decoration: none; i { display: none; } } > div.subnav { padding: 0 .5rem; color: var(--link-color); width: auto; .fas { transition: all 1s; } } } } .level2 { width: 100%; overflow: hidden; &:not(.active) { height: 0; } > .inner-wrapper { padding-left: 2rem; } > .inner-wrapper > .flex-block-grid { flex-direction: column; } > .inner-wrapper .flex-block-grid > div > ul { > li { &.header { color: #cee266; font-weight: bold; } > a { line-height: 1; display: block; padding: .5rem 0; color: var(--link-color); border: none; text-decoration: none; } } } } .level3 { width: 100%; &:not(.active) { height: 0; } } } } } //// MIDDLE #middle { min-height: 200px; } body:not(.homepage):not(.section-cover) { #middle { padding: 2rem 0; } } body.is-story:not(.layout-no-sidebar):not(.section-cover) { #middle { .container { display: flex; } #content { width: 65%; margin-right: 5%; } #sidebar { width: 30%; } } } @media @sm-md { body.is-story:not(.layout-no-sidebar):not(.section-cover) { #middle { #content { width:100%; margin-right: 0; } #sidebar { display: none; } } } } //// SIDEBAR #sidebar.v2023 { h2 { width: fit-content; color: @white; background-color: @red; padding: .25rem .5rem; font-size: 1rem; font-weight: 400; font-family: @montserrat; text-transform: uppercase; } .news { .card-media { transition: all 1s; border: 0px solid @yellow; box-shadow: none; background-color: @yellow; &:hover { border: 10px solid @yellow; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); } img { margin: auto; position: relative; } } } } //// BOTTOM #bottom { padding: 2rem 0; background-color: @light-blue; .logo-etc { margin-bottom: 1.5rem; display: flex; gap: 2rem; justify-content: space-between; align-items: center; position: relative; } .not-logo { display: flex; justify-content: flex-end; column-gap: 1rem; } .social-icons { a { color: @text-color; } } .buttons { display: flex; gap: 1rem; } .bottom-nav { margin-bottom: 1.5rem; h2 { font-family: @montserrat; font-size: 1.25rem; margin-bottom: .5rem; } ul { list-style: none; margin: 0; } li { margin: 0 0 .5rem; } a { color: @text-color; } } .credits { text-align: center; } } @media @sm-md { #bottom { .logo-etc { flex-direction: column; margin-bottom: 3rem; } .not-logo { flex-direction: column; } .social-icons { margin-bottom: 1.5rem; ul { justify-content: center; } } .buttons { flex-direction: column; } } } /* =============================================== HOMEPAGE =============================================== */ body.homepage { #middle > .sizer { max-width: none; padding: 0; } } //// HERO body.homepage .hero { background: linear-gradient(90deg, @dark-blue, @dark-blue-gradient-end); color: @white; .card-content { .img { margin-bottom: .5rem; } } } @media @sm-md { body.homepage .hero { padding-bottom: 2rem; } } //// MY LULAC body.homepage .my-lulac { padding: 1rem 0 2rem; background: linear-gradient(90deg, @dark-blue, @dark-blue-gradient-end); .container > .img { margin-bottom: .5rem; } .vanilla-tabs { --bg-color: transparent; --active-bg-color: transparent; --border-color: @light-blue; ul.tabs { gap: .5rem 2rem; flex-wrap: wrap; li { padding: .25rem 0; color: @white; font-weight: bold; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: .25rem; text-underline-offset: .5rem; &:hover, &.active { text-decoration-color: @red; } } } } div.panes { display: grid; > div { grid-area: 1/1; } } .leadin-card { .card-inner { row-gap: 1rem; } .card-media { transition: all 1s; border: 0px solid @yellow; box-shadow: none; background-color: @yellow; &:hover { border: 10px solid @yellow; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); } img { margin: auto; position: relative; } } .card-content { .card-content-inner { display: flex; flex-direction: column-reverse; } h3.title { color: @white; font-family: @montserrat; } .teaser { padding: 0 .5rem; margin-bottom: .5rem; width: fit-content; background-color: @red; color: @white; } } } .media.video { row-gap: .5rem; h3.title { color: @white; font-family: @montserrat; } } } //// eMEMBER body.homepage .emember { background-color: @light-blue; > .sizer { max-width: 1920px; padding: 0; } h2 { margin-bottom: .75rem; font-size: 3rem; } h3 { margin-bottom: 0; font-size: 1rem; text-transform: uppercase; font-family: @montserrat; } .form-wrapper { container-name: form-wrapper; container-type: inline-size; form { .form-item { max-width: none; } input { width: 100%; height: 3rem; border: 0; } button { width: 100%; height: 3rem; font-size: 1rem !important; } } } } @container form-wrapper (width > 600px) { body.homepage .emember .form-wrapper { form { background: url(/images/all-for-one-badge.png) top right no-repeat; background-size: contain; .form-inner { max-width: 350px; } } } } @media @lg-up { body.homepage .emember { .card { .card-media { max-width: 50%; } .card-content-inner { max-width: 800px; padding: 0 3rem; margin: 0 auto; } } } } @media @sm-md { body.homepage .emember { .card-content-inner { padding: 1rem 20px; } } } @media @md-only { body.homepage .emember { .card-media img { width: 100%; } } } //// SIGNATURE EVENTS body.homepage .signature-events { padding: 2rem 0; background-color: @white; > .sizer { max-width: 1600px; } h2 { font-family: @mackinac; font-size: 3rem; text-align: center; } .event-list { margin-bottom: 1.5rem; } .buttons { text-align: center; } .leadin-card { transition: border 1s, box-shadow 1s; border: 0px solid @yellow; box-shadow: none; &:hover { border: 10px solid @yellow; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); background-color: @yellow; } .card-media img { margin: auto; } } } //// PROGRAMS body.homepage .programs { background-color: @dark-blue; > .sizer { max-width: 1920px; padding: 0; } .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "z z a b" "z z c d" "e f g h"; } .intro { grid-area: z; color: @white; .card-content-inner { padding: 0 2rem; text-align: left; } h2 { color: @white; font-size: 3rem; } } .prog { color: @white; a { text-decoration: none; } .card-content-inner { padding: 1rem; } h2 { color: @white; font-size: 2rem; } } } @media @sm-md { body.homepage .programs { .container { grid-template-columns: repeat(2, 1fr); grid-template-areas: "z z" "z z" "a b" "c d" "e f" "g h"; } } } @media @sm-only { body.homepage .programs { .intro { padding: 2rem 0; .card-media { display: none; } } .prog { h2 { font-size: 1rem; } } } } @media @lg-only { body.homepage .programs { .prog { h2 { font-size: 1.5rem; } } } } @media (hover: hover) { body.homepage .programs { .prog { *, *::before, *::after { transition: all 1s; } .card-inner::after { background-color: @dark-blue; opacity: .7; } &:hover { cursor: pointer; .card-inner::after { background-color: transparent; } } } } } //// ISSUES SLIDER body.homepage .issues-slider { background-color: @white; > .sizer { max-width: 1920px; padding: 0; } h2 { font-size: 3rem; } h3 { width: fit-content; padding: .25rem .5rem; background-color: @red; color: @white; font-family: @montserrat; font-size: 1rem; font-weight: normal; text-transform: uppercase; margin-bottom: .5rem; } .buttons { display: flex; flex-wrap: wrap; gap: 1rem; } .vanilla-slider { --nav-bg-color: @dark-blue; > .vs-nav { align-self: flex-end; width: 50%; justify-content: center; padding-bottom: 1rem; z-index: 10; .vs-prev, .vs-next { margin: 0; } } } } @media @sm-lg { body.homepage .issues-slider { .card-content-inner { padding: 1rem 20px; } .vanilla-slider { .vs-nav { grid-area: 2/1; display: flex; width: 100%; } } } } @media @xl-up { body.homepage .issues-slider { .card-content-inner { padding: 0 2rem; margin: 0 auto; max-width: 580px; } } } //// BLURB body.homepage .blurb { background-color: @light-blue; .sizer { max-width: 1480px; } .container { padding: 3rem 0; background: url(/images/all-for-one-badge-gray.png) top -80px left 0 no-repeat; } p { margin: 0; font-size: 3rem; font-family: @mackinac; font-weight: 800; } } @media @lg-up { body.homepage .blurb { .container { display: flex; justify-content: flex-end; align-items: center; min-height: 400px; } p { max-width: 900px; } } } @media @sm-only { body.homepage .blurb { p { font-size: 2rem; } } } //// MAP INTRO body.homepage .map-intro { padding: 2rem 0; background-color: @light-blue; .container { //border-top: 1px solid @steel-gray; border-bottom: 1px solid @steel-gray; } h3 { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; gap: .5rem; margin: 0 auto 2rem; font-family: @montserrat; font-size: 1rem; font-weight: normal; text-transform: uppercase; position: relative; text-align: center; span { padding: .25rem .5rem; background-color: @red; color: @white; } &:before, &:after { content: ""; border-top: 1px solid @steel-gray; } } .grid-block-grid { margin-bottom: 2rem; } .item { text-align: center; h2 { font-size: 3rem; margin-bottom: .25rem; } .desc { font-weight: bold; text-transform: uppercase; } } } //// MAP body.homepage .map { padding: 2rem 0; background-color: @light-blue; } //// VIDEOS body.homepage .vids { padding: 2rem 0; background-color: @white; .title-wrapper { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem 2rem; h2 { font-family: @mackinac; font-size: 3rem; margin: 0; } } .video { h3.title { font-family: @montserrat; } } } //// DONATE body.homepage .donate { background: linear-gradient(90deg, @dark-blue, @dark-blue-gradient-end); color: @white; } @media @sm-md { body.homepage .donate { padding-bottom: 2rem; } } //// SUBSCRIBE body.homepage .subscribe { padding: 2rem 0; background-color: #c9dbee; h2 { font-size: 3rem; margin-bottom: .25rem; } .form-inner { row-gap: 1rem; column-gap: 2rem; } .fw-form-item { flex-grow: 1; } input { height: 3rem; width: 100%; border: 0; } button { height: 3rem; width: 100%; } } @media @sm-md { body.homepage .subscribe { form { max-width: 600px; margin: 0 auto; } } } /* =============================================== ABOUT =============================================== */ body.about-board .story-content { .grid-block-grid { margin-bottom: 1.5rem; } } body.about-staff .story-content { .grid-block-grid { margin-bottom: 1.5rem; } } /* =============================================== BLOG =============================================== */ body.blog.category-archive { #comments { display: none; } } /* =============================================== NEWS =============================================== */ body.news-in-the-news .story-content { .leadin-card .source { font-style: italic; } } /* =============================================== VIDEO =============================================== */ body.media-video.category-archive .story-content { .leadin-card .card-media { max-width: 120px; } } /* =============================================== BING SEARCH =============================================== */ body.bing-search { .bing-search-wrapper { margin: 2rem 0; min-height: 300px; .bcs-container-searchbox { background-color: @white; } #bcs-results-div { font-family: @montserrat; font-size: var(--font-size); line-height: var(--line-height); h2 { color: @dark-blue; font-family: @mackinac; font-size: 1.25rem; font-weight: bold; a { color: @blue; } } .bcs-caption { line-height: var(--line-height); } .bcs-result cite { display: none; } } } } /* =============================================== GALA 2024 =============================================== */ @gala-gold: #dfb96a; @gala-blue: #032563; @gala-red: #bf133b; body.gala24 { --fluid-16-24: clamp(1rem, calc(1rem + ((1vw - 0.2rem) * 0.9091)), 1.5rem); --fluid-18-28: clamp(1.125rem, calc(1.125rem + ((1vw - 0.2rem) * 1.1364)), 1.75rem); --fluid-20-32: clamp(1.25rem, calc(1.25rem + ((1vw - 0.2rem) * 1.3636)), 2rem); --fluid-24-48: clamp(1.5rem, calc(1.5rem + ((1vw - 0.2rem) * 2.7273)), 3rem); --fluid-32-96: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 7.2727)), 6rem); #top { .top-links { display: none; } } #content { h1,h2,h3 { font-family: @montserrat; font-weight: 900; text-transform: uppercase; } li { margin-bottom: .5rem; } } .duotone { color: @gala-blue; span { color: @gala-gold; } } .story-content .container > h2 { margin-bottom: 3rem; text-align: center; font-size: var(--fluid-24-48); } } //// SECTION COVER PAGE body.sc-gala-v2 { #middle { padding: 0; > .sizer { max-width: none; padding: 0; } } } //// HERO body.sc-gala-v2 .hero { > .sizer { max-width: none; padding: 0; } h1 { color: @white; font-size: var(--fluid-32-96); } h2 { color: @white; font-size: 1.75rem; } .card-content { padding: 1rem; } .card-media .card-media-inner { height: 100%; } .card-media img { width: 100%; } } //// RECIPIENTS body.sc-gala-v2 .recipients { padding: 3rem 0; .sizer { max-width: 1640px; } .leads { max-width: 1100px; margin: 0 auto; column-gap: 10%; row-gap: 1.5rem; margin-bottom: 3rem; img { border-radius: .5rem; } h2 { font-size: var(--fluid-16-24); margin-bottom: .75rem; } h3 { padding-top: .75rem; border-top: 2px solid @gala-gold; font-size: var(--fluid-20-32); margin-bottom: .75rem; } .readmore a { color: @red; font-weight: bold; text-transform: uppercase; } } } //// HOST body.sc-gala-v2 .host { padding: 3rem 0; .sizer { max-width: 1640px; } } //// REGISTER body.sc-gala-v2 .register { .sizer { max-width: 1920px; padding: 0; } .go-conf, .go-gala { color: @white; h2 { color: @white; font-size: var(--fluid-24-48); padding-bottom: 1.5rem; border-bottom: 2px solid @gala-gold; } .card-content-inner { max-width: 600px; margin: 0 auto; padding: 1rem 1rem 3rem; } .readmore a { color: @white; text-transform: uppercase; font-size: var(--fluid-18-28); font-family: @montserrat; font-weight: 400; letter-spacing: 2px; } } } //// SPEAKERS body.sc-gala-v2 .speakers { padding: 3rem 0; .sizer { max-width: 1640px; } } //// VIDEO body.sc-gala-v2 .vid { padding: 3rem 0; background-color: @gala-gold; } //// ENTERTAINMENT body.sc-gala-v2 .entertainment { background-color: @gala-blue; color: @white; .sizer { max-width: 1920px; padding: 0; } h1,h2,h3,h4 { color: @white; } .duotone { color: @white; } .card-content { padding: 2rem 5%; } .conf-logo { margin-left: auto; margin-bottom: -1.5rem; max-width: 250px; } h4 { font-family: montserrat; font-weight: 400; text-transform: uppercase; } h2 { padding-top: 1.5rem; border-top: 2px solid @gala-gold; font-size: var(--fluid-24-48); } .readmore a { color: @gala-gold; font-weight: bold; text-transform: uppercase; } } //// HOTEL body.sc-gala-v2 .hotel { background-color: @gala-blue; color: @white; .sizer { max-width: 1920px; padding: 0; } h1,h2,h3,h4 { color: @white; } .duotone { color: @white; } .card-content { padding: 2rem 5%; } .conf-logo { margin-left: auto; margin-bottom: -1.5rem; max-width: 250px; } h4 { font-family: montserrat; font-weight: 400; text-transform: uppercase; } h2 { padding-top: 1.5rem; border-top: 2px solid @gala-gold; font-size: var(--fluid-24-48); } .readmore a { color: @gala-gold; font-weight: bold; text-transform: uppercase; } } //// SPONSORS body.sc-gala-v2 .sponsors { padding: 3rem 0; h3 { font-size: 1.5rem; text-align: center; } .auto-block-grid { margin-bottom: 1.5rem; } .tier-1 > .media { max-width: calc((100% - 4rem) / 3); } .tier-2 > .media { max-width: calc((100% - 8rem) / 5); } .tier-3 > .media { max-width: calc((100% - 10rem) / 6); } } @media @sm-only { body.sc-gala-v2 .sponsors { .tier-1 > .media { max-width: calc((100% - 2rem) / 2); } .tier-2 > .media { max-width: calc((100% - 4rem) / 3); } .tier-3 > .media { max-width: calc((100% - 6rem) / 4); } } } //// MAIN AWARD RECIPIENT body.sc-gala-v2 .lead { margin: 0 auto 3rem; max-width: 1160px; img { border-radius: .5rem; } h4 { font-family: @montserrat; font-weight: 400; text-transform: uppercase; color: @text-color; } h3 { padding-top: 1.5rem; border-top: 2px solid @gala-gold; font-size: var(--fluid-24-48); } .card-media { max-width: 46%; } .readmore a { color: @red; font-weight: bold; text-transform: uppercase; } } @media @sm-only { body.sc-gala-v2 .lead { .card-media { max-width: none; } } } //// GROUPS OF RECIPIENTS/SPEAKERS body.sc-gala-v2 .peeps { img { border-radius: .5rem; } h3.title { font-size: var(--fluid-16-24); } .readmore a { text-transform: uppercase; color: @gala-red; font-weight: bold; } .readmore { display: none; } } //// CONVENTION RSVP #story-9681 { label[for="check-all"] { font-weight: bold; } } /* =============================================== AEROMEXICO/DELTA =============================================== */ body.aeromexico-landing { #middle { padding: 0; > .sizer { max-width: none; padding: 0; } mark, span.mark { background-color: @yellow; } } } //// HERO body.aeromexico-landing .hero { padding: 5rem 0 8rem; //background-image: radial-gradient(rgba(18,92,163,.8) 52%,rgba(15,69,119,.95) 100%), url(/images2/airport-terminal-window.jpg); background-image: url(/images2/aeromexico-terminal-window.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; min-height: 50vh; display: flex; flex-direction: column; justify-content: flex-end; h3 { color: @white; font-size: var(--fluid-4-6); margin-bottom: .75rem; } h1 { font-size: var(--fluid-8-12); } } //// FACTS body.aeromexico-landing .facts { padding: 1rem 0 5rem; background-color: #f3f3f3; .wrap { margin-top: -4rem; background-color: @white; opacity: 1; padding: 2rem; border-radius: 1rem; } .wrap-inner { max-width: 800px; margin-inline: auto; } h2 { font-size: var(--fluid-6-10); color: @medium-blue; } .callout { margin: 3rem 0; padding: 1.5rem 3rem; border-radius: 1rem; font-size: 1.25rem; font-weight: bold; a { color: @yellow; } } } @media @sm-only { body.aeromexico-landing .facts { .callout { padding: 1.5rem; } } } //// STATS body.aeromexico-landing .stats { padding: 5rem 0; //background-image: radial-gradient(rgba(18,92,163,.9) 49%,rgba(8,49,87,.9) 100%), url(/images2/view-out-airplane-window.jpg); background-image: url(/images2/aeromexico-plane-wing.jpg); //background-position: center, top right; background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; h2 { margin-bottom: 3rem; font-size: 1.5rem; text-transform: uppercase; color: @white; } .items { margin-bottom: 1.5rem; gap: 1.5rem 3rem; text-wrap: pretty; color: @medium-blue; div { padding: 10%; background-color: @white; border-radius: 1rem; } span { display: block; font-size: 2rem; font-weight: bold; } } .single-item { margin-bottom: .75rem; padding: 1.5rem 3rem; background-color: @white; border-radius: 1rem; color: @medium-blue; font-size: 1.25rem; font-weight: bold; } .source { text-align: left; color: @white; a { color: @white; } } } @media @sm-only { body.aeromexico-landing .stats { .single-item { padding: 1.5rem; } } } //// IMPACT body.aeromexico-landing .impact { padding: 5rem 0; text-align: center; .wrap { max-width: 800px; margin-inline: auto; } h2 { font-size: var(--fluid-6-10); } .items { margin-top: 3rem; gap: 1.5rem 0; text-wrap: pretty; div { padding: 0 15%; } span { display: block; font-size: 2rem; font-weight: bold; color: @yellow; } } } //// CONCLUSION body.aeromexico-landing .conclusion { padding: 5rem 0; //background-image: radial-gradient(rgba(18,92,163,.9) 49%,rgba(8,49,87,.9) 100%), url(/images2/planes-at-terminal.jpg); background-image: url(/images2/aeromexico-terminal.jpg); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; color: @medium-blue; .wrap { background-color: @white; opacity: 1; padding: 2rem; border-radius: 1rem; } .wrap-inner { max-width: 800px; margin-inline: auto; } .faux-header { font-size: 1.75rem; font-weight: bold; line-height: 1.2; font-family: @header-font; } } @media @sm-only { body.aeromexico-landing .conclusion { .faux-header { font-size: 1.5rem; } } }