/*! Theme Name: Alpha Parking V25.1 Author: Oblong Author URI: http://oblongtech.com Version: 25.1.build-334933 */ /**============================================================================ * FONTS & TYPOGRAPHY =============================================================================*/ @import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Expanded:wght@100;200;300;400;500;600;700;800;900&display=swap"); /*BODY*/ @import url("https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap"); /*H1-H5*/ @import url("https://fonts.googleapis.com/css2?family=Hubballi&display=swap"); /*H6*/ @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); @property --paddingLeft { syntax: " | | "; inherits: false; initial-value: 0; } @property --paddingRight { syntax: " | | "; inherits: false; initial-value: 0; } @property --paddingTop { syntax: " | | "; inherits: false; initial-value: 0; } @property --paddingBottom { syntax: " | | "; inherits: false; initial-value: 0; } :root { --theme-logo-white: url(data:image/png;base64,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); --theme-logo-normal: url(./assets/aparking-logo.png); --theme-header-background: url(./assets/aparking-header-background.jpg); @media (max-width: 768px) { --font-size-root: 15px; } @media (min-width: 769px) { --font-size-root: 17px; } --font-size-max: calc(5.555*var(--font-size-root)); font-size: var(--font-size-root); font-family: "Encode Sans Semi Expanded", sans-serif; font-style: normal; font-size: 1rem; font-weight: 300; line-height: 1.7; } body { margin: 0; display: flex; flex-direction: column; } p { max-width: 992px; margin-top: 0; margin-bottom: 1rem; &:last-child { margin-bottom: 0; } strong { font-weight: 600; } } a { color: inherit; text-decoration: underline; text-underline-offset: 0.33em; text-decoration-thickness: 0.033em; &[href^="mailto:"] { word-break: break-all; } } p > a:only-child { font-weight: 400; text-decoration-thickness: 0.055em; } ul { padding-inline-start: 16px; &:is(li > ul) { padding-inline-start: 32px; } } li { margin-bottom: 0.5em; margin-top: 0.5em; &:not(ul > li) { list-style: none; } } /*headings*/ :is(h1, h2, h3, h4, h5, h6), :where(.font\:h4), :where(.wp-block-heading, .wp-block-post-title) { font-family: "Cal Sans"; letter-spacing: 0.033em; font-weight: 100; line-height: 1.3; margin-top: 0; margin-bottom: 1rem; &:not(:first-child) { margin-top: 2rem; } } :where(.wp-block-heading) + .wp-block-heading, :where(h1, h2, h3, h4, h5, h6, label) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0!important; } :where(.wp-block-heading):has(+.wp-block-heading), :where(h1, h2, h3, h4, h5, h6):has(+h1, +h2, +h3, +h4, +h5, +h6) { margin-bottom: 0.5rem; } h1:has(+h1), h2:has(+h2), h3:has(+h3), h4:has(+h4), h5:has(+h5), h6:has(+h6) { margin-bottom: 0!important; } :is(h1, h2, h3, h4, h5, h6):has(a) { line-height: 1.5; } h1 { font-size: 3rem; line-height: 1.1; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4, .font\:h4 { font-size: 1.5rem; } h5 { font-size: 1.875rem; } h6, .font\:h6, h6.wp-block-heading { text-transform: uppercase; font-size: 1.175rem; font-weight: 300; opacity: 0.6; margin-bottom: 10px; letter-spacing: 0.05em; font-family: "Hubballi", sans-serif; } h6 + * { margin-top: 0; } img { width: auto; height: auto; max-width: 100%; } button, .wp-element-button, #\!elevate [type="submit"] { display: inline-block; cursor: pointer; line-height: 1.7; font-size: 16px; font-weight: 700; border-radius: 0.4em; text-transform: uppercase; letter-spacing: 0.09em; margin: 0; font-family: "Varela Round", sans-serif; /*&.\:default { }*/ background: #2a5982; color: #fff; border: 0; padding: 0.4em 1.2em 0.38em; border-width: 0.175em; border-style: solid; border-color: transparent; } .button--outline, .is-style-outline--1 > .wp-element-button { padding: 0.45em 1.45em 0.43em; border-color: currentColor; background: transparent } .button--white { background: #fff; color: #000; } /**============================================================================ * GRID LAYOUTS =============================================================================*/ :root { --color1: #0e3d64; --color2: #7bcdf2; --color3: #fdd300; --container-type: size; @media (max-width: 768px) { --1sp: clamp(0px, 3.333cqw, 16px); --1px: calc(var(--1sp)/16); --1pc: clamp(0px, 28cqw/30, 8px); --containerMaxWidth: 480px; --grid: 3% [left-start right-start inner-start] 1fr [center-line] 1fr [inner-end right-end left-end] 3%; } @media (min-width: 769px) { --1sp: clamp(0px, 100cqw/64, 20px); --1px: calc(var(--1sp)/20); --1pc: clamp(0px, 60cqw/64, 12px); --containerMaxWidth: 1280px; --grid: var(--1sp) 1fr [ left-start] calc(30*var(--1pc)) [inner-start] calc(20*var(--1pc)) [left-end] var(--1sp) [center-line] var(--1sp) [right-start] calc(40*var(--1pc)) [inner-end] calc(10*var(--1pc)) [right-end] 1fr var(--1sp); } --2pc: calc(var(--1pc) * 2); --3pc: calc(var(--1pc) * 3); --4pc: calc(var(--1pc) * 4); --5pc: calc(var(--1pc) * 5); --2sp: calc(var(--1sp) * 2); --3sp: calc(var(--1sp) * 3); --4sp: calc(var(--1sp) * 4); --5sp: calc(var(--1sp) * 5); --6sp: calc(var(--1sp) * 6); --7sp: calc(var(--1sp) * 7); --8sp: calc(var(--1sp) * 8); --9sp: calc(var(--1sp) * 9); --10sp: calc(var(--1sp) * 10); --11sp: calc(var(--1sp) * 11); --12sp: calc(var(--1sp) * 12); --13sp: calc(var(--1sp) * 13); --14sp: calc(var(--1sp) * 14); --15sp: calc(var(--1sp) * 15); --gap-tiny: var(--1sp); --gap-small: var(--2sp); --gap-medium: var(--3sp); --gap-large: var(--4sp); --gap-huge: var(--5sp); :where(.is-layout-flex) { gap: 20px; } } body > header, body > footer, body > main, main > section { display: grid; grid-template-columns: var(--grid); container-type: inline-size; } body > header > .__inner, body > footer > .__inner, body > main > :is(*) { grid-column: left-start / right-end; } body > main > section, body > main > :is(.\:fullwidth) { grid-column: 1/-1; } body > main > :is(h1, h2, h3, h4, h5, h6) { color: #0e3d64; } /**============================================================================ * UI COMPONENTS =============================================================================*/ #searchButton { display: flex; gap: 6px; padding-right: 10px; background: #2a5982; color: #fff; } .searchInput { border: 1px solid; } .searchInput, #siteSearchField { display: grid; height: 56px; grid-template-columns: [icon-start input-start] 48px [icon-end output-start] 1fr [input-end output-end button-start] 56px [button-end]; background: #fff; border-radius: 4px; box-shadow: 0 0 0 #000; &::before { grid-row: 1; grid-column: icon; content: ""; background: transparent no-repeat center scroll; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%2027%209%20C%2017.075%209%209%2017.075%209%2027%20C%209%2036.925%2017.075%2045%2027%2045%20C%2031.129213%2045%2034.9263%2043.587367%2037.966797%2041.240234%20L%2051.048828%2054.322266%20C%2051.952828%2055.226266%2053.418266%2055.226266%2054.322266%2054.322266%20C%2055.226266%2053.418266%2055.226266%2051.952828%2054.322266%2051.048828%20L%2041.240234%2037.966797%20C%2043.587367%2034.9263%2045%2031.129213%2045%2027%20C%2045%2017.075%2036.925%209%2027%209%20z%20M%2027%2013%20C%2034.719%2013%2041%2019.281%2041%2027%20C%2041%2034.719%2034.719%2041%2027%2041%20C%2019.281%2041%2013%2034.719%2013%2027%20C%2013%2019.281%2019.281%2013%2027%2013%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); background-size: 28px; opacity: 0.4; } [type="text"] { font-family: "Cal Sans"; letter-spacing: 0.033em; grid-row: 1; grid-column: input; margin: 0; background: none; border: none; outline: none; box-sizing: border-box; height: 100%; padding-left: 48px; position: relative; z-index: 1; } [type="submit"] { grid-row: 1; grid-column: button; padding: 0; margin: 0; border: 0 transparent solid; background: transparent no-repeat center scroll; background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M2%2010h16m0%200l-7-7m7%207l-7%207%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E); background-size: 19px; opacity: 0.4; cursor: pointer; } } #siteSearch { background-color: rgba(99, 99, 99, 0.66); display: grid; grid-template-columns: [outer-start] 16px [inner-start] auto 1fr [inner-end] 16px [outer-end]; grid-template-rows: [outer-start] 16px 1fr [inner-start] auto [inner-end] 1fr 16px [outer-end]; @media (max-width: 991px) { /*grid-template-rows: [outer-start] 16px [inner-start] auto [inner-end] 1fr 16px [outer-end];*/ } animation-duration: 200ms; animation-fill-mode: both; position: fixed; inset: 0 0 0 0; z-index: 999999; max-height: 100dvh; &.\:closed { display: none; opacity: 0; } &.\:closing { animation-name: fadeOutToNone; } &.\:opening { animation-name: fadeInFromNone; } [type="submit"]:hover { opacity: 0.6; background-color: #e1e1e1; background-clip: content-box; border-radius: 100%; padding: 11px; } } #siteSearchField { margin-bottom: 1em; grid-area: inner; width: 100%; max-width: 768px; border: 0; padding: 0; margin: 0 0 1em 0; justify-self: center; } #siteSearchInput { /*opacity: 0;*/ font-family: "Cal Sans"; letter-spacing: 0.033em; align-self: center; font-size: 16px; padding-left: 48px !important; @media (min-width: 992px) { font-size: 24px; /* font-size: 12px; padding-left: 24px !important; width: 50%; height: 50%; transform-origin: left; transform: scale(2); */ } } #siteSearchOutput { display: flex; display: none; grid-row: 1; grid-column: output; align-content: center; font-family: "Cal Sans"; letter-spacing: 0.033em; font-weight: 100; font-size: 28px; width: fit-content; align-items: center; &::before { content: attr(placeholder); } &::after { content: ""; animation: cursor-blink 1.5s steps(2) infinite; border-bottom: 2px solid #555; height: 0.8em; width: 0.45em; margin-left: 1px; } } @keyframes cursor-blink { 0% { opacity: 0; } } .announcementsBar { background-color: #0e3d64; grid-column: 1 / -1 !important; width: 100%; font-size: 0.8125rem; color: #fff; box-sizing: border-box; padding: 8px 16px; position: relative; z-index: 7; display: grid; justify-items: center; align-items: center; @media (max-width: 991px) { gap: 6px; } @media (min-width: 992px) { height: 41px; grid-template-columns: 1fr minmax(576px, 3fr) 1fr; grid-auto-flow: column; gap: 16px; & > :nth-child(1):not(:only-child) { justify-self: start; } & > :nth-child(2):last-child, & > :nth-child(3) { justify-self: end; } } & > :nth-child(n + 4) { display: none; } & > :is(*) { margin: 0; } a { text-decoration-color: rgb(255 255 255 / 50%); } .wp-social-link { color: inherit !important; } } /**============================================================================ * HEADER =============================================================================*/ .siteHeader { color: #fff; position: sticky; top: 0; z-index: 999; font-size: 0.875rem; /*14px*/ top: -80px; transform: translateY(0); &.\:stuck { z-index: 100000; transition: transform 400ms cubic-bezier(0.65, 0.05, 0.36, 1); transform: translateY(80px); } .__inner { height: 80px; position: relative; grid-row: 1 / span 1; @media (max-width: 768px) { display: grid; align-items: center; grid-template-columns: 60px 1fr 60px; } @media (min-width: 769px) { display: flex; justify-content: space-between; } } /* default background */ &::after { order: -1; content: ""; grid-area: 1 / 1 / span 1 / -1; background: #010d1b no-repeat center / cover scroll; background-image: var(--theme-header-background); height: 80px; background-size: auto 80px; } .menu { list-style: none; } .menu-item { align-items: center; } .menu > li > a { font-size: 0.8125rem; line-height: 1.5; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-family: "Varela Round", sans-serif; transform: scaleY(1.075); text-underline-offset: 0.5em; height: 50px; display: flex; align-items: center; gap: 4px; } .menu > li > a:not(:hover), .menu > li.menu-item-has-children > a { text-decoration: none; } } .site-logo { display: grid; padding: 0px 2px; margin: 12px; align-self: center; } .site-logo::before { content: ""; background: transparent no-repeat center / contain scroll; background-image: var(--theme-logo-white); aspect-ratio: 100 / 16; @media (max-width: 768px) { max-width: 100%; } @media (min-width: 769px) { width: 320px; } } .__headerLeft { flex: 1; display: flex; justify-content: flex-start; text-align: left; } .__headerRight { flex: 1; display: flex; justify-content: flex-end; text-align: right; } /**============================================================================ * MAIN MENU =============================================================================*/ .menu { display: flex; font-size: 0.875rem; line-height: 1.5; &, ul { list-style: none; margin: 0; padding: 0; } li { margin: 0; padding: 0; } a { white-space: nowrap; padding: 5px 8px; display: block; } } .menu-mega-container { display: contents; } #menu-mega { display: contents; /* primary items */ & > .menu-item { align-self: stretch; align-items: center; list-style: none; margin: 0; display: grid; & > a { grid-area: 1 / 1 / span 1 / -1; } /* submenu dropdown chevron */ &.menu-item-has-children:hover::before { content: ""; margin: auto auto 0; align-items: flex-start; grid-area: 1 / 1 / span 1 / -1; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 12px solid #0e3d64; } } /* sub-menu / mega-menu */ & > li > .sub-menu { font-size: 0.875rem; background-color: #0e3d64; color: #96d3ff; position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-auto-flow: column; /*grid-template-columns: 3fr 4.5fr 2.5fr 2fr;*/ --col: calc(1280px / 12 - 1.5% / 12); grid-template-columns: 1fr clamp(0px, 7.7083% * 3, var(--col) * 3) clamp(0px, 7.7083% * 4.5, var(--col) * 4.5) clamp(0px, 7.7083% * 2.25, var(--col) * 2.25) clamp(0px, 7.7083% * 2.25, var(--col) * 2.25) 1fr; gap: 1.5%; padding: 4em 0 5em; &::before, &::after { content: ""; } } /* show/hide sub-menu */ & > li:not(:hover) > .sub-menu { display: none; } /* default link styles */ .sub-menu a:not([title]) { text-decoration-color: rgb(255 255 255 / 50%); margin-bottom: 4px; &:hover { color: #d5ad2b; text-decoration-color: #b2a650; } } /* secondary items & > li > a, */ li:not(:first-child):has(> a[title*="heading"]) { margin-top: 3.58em; } a[title*="heading"] { white-space: normal; color: #fff; text-decoration: none; font-family: "Cal Sans"; font-weight: 100; font-size: 1.5rem; line-height: 1.436; letter-spacing: 0.033em; margin-bottom: 0.5em; } a[title*="group"] { display: none!important; } a[title*="group"]:not(:empty) { /*background: #d5ad2b;*/ background: #96d3ff; border-radius: 4px; padding: 4px 10px; margin: 0 6px; text-decoration: none; font-weight: 500; font-size: 13px; color: #0e3d64; display: inline-block; } #menu-item-4067 > .sub-menu { column-count: 2; gap: 2em; } } .menu-header-right-container { display: contents; } #menu-header-right { align-items: center; } /* contact us */ #menu-header-right a[href$="/contact-us/"]::after { content: ""; display: inline-block; width: 24px; height: 24px; background: transparent no-repeat center / contain scroll; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M32%2C10c13.785%2C0%2C25%2C8.951%2C25%2C19.954S45.785%2C49.907%2C32%2C49.907c-0.646%2C0-1.311-0.022-1.983-0.065c-7.369%2C5.504-13.411%2C6.251-13.672%2C6.281c-0.076%2C0.009-0.152%2C0.013-0.228%2C0.013c-0.7%2C0-1.356-0.368-1.72-0.979c-0.402-0.678-0.369-1.528%2C0.084-2.172c0.023-0.033%2C1.966-2.8%2C4.003-6.234C11.346%2C43.104%2C7%2C36.827%2C7%2C29.954C7%2C18.951%2C18.215%2C10%2C32%2C10z%20M32%2C45.907c11.579%2C0%2C21-7.157%2C21-15.954S43.579%2C14%2C32%2C14s-21%2C7.157-21%2C15.954c0%2C5.86%2C4.242%2C11.243%2C11.071%2C14.046c0.529%2C0.217%2C0.939%2C0.65%2C1.128%2C1.19c0.189%2C0.54%2C0.138%2C1.135-0.142%2C1.634c-0.749%2C1.343-1.521%2C2.635-2.236%2C3.787c2.061-0.888%2C4.615-2.27%2C7.363-4.401c0.398-0.31%2C0.9-0.458%2C1.4-0.412C30.409%2C45.871%2C31.222%2C45.907%2C32%2C45.907z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); } /* search */ #menu-header-right a[href="/?s="]::after, #searchButton::after, #mobileMenuSearch { content: ""; display: inline-block; width: 26px; height: 26px; background: transparent no-repeat center / contain scroll; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M%2027%209%20C%2017.075%209%209%2017.075%209%2027%20C%209%2036.925%2017.075%2045%2027%2045%20C%2031.129213%2045%2034.9263%2043.587367%2037.966797%2041.240234%20L%2051.048828%2054.322266%20C%2051.952828%2055.226266%2053.418266%2055.226266%2054.322266%2054.322266%20C%2055.226266%2053.418266%2055.226266%2051.952828%2054.322266%2051.048828%20L%2041.240234%2037.966797%20C%2043.587367%2034.9263%2045%2031.129213%2045%2027%20C%2045%2017.075%2036.925%209%2027%209%20z%20M%2027%2013%20C%2034.719%2013%2041%2019.281%2041%2027%20C%2041%2034.719%2034.719%2041%2027%2041%20C%2019.281%2041%2013%2034.719%2013%2027%20C%2013%2019.281%2019.281%2013%2027%2013%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); } #mobileMenuContainer { display: none; } #mobileMenu { & > li:not(:first-child) { margin-top: 2em; } & > li > a { display: block; white-space: normal; /*text-decoration: none;*/ font-family: "Cal Sans"; font-weight: 100; font-size: 1.5rem; line-height: 1.436; letter-spacing: 0.033em; margin-bottom: 0.5em; } &, ul { list-style: none; } } #mobileMenuToggle { width: 30px; height: 34px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 8% .8fr 8% 1fr; padding: 12px 14px; &::before, &::after { content: ""; display: block; border-radius: 100px; background: #fff; } &::before { grid-row: 2; } &::after { grid-row: 4; } } #mobileMenuSearch { height: 40px; width: 40px; border: 12px solid transparent; } #mobileMenuFooter { .wp-block-social-links { display: flex; gap: 20px; padding: 20px; justify-content: center; } } /**============================================================================ * FOOTERS .preFooter {} =============================================================================*/ .siteFooter { background-color: #0e3d64; color: #96d3ff; font-size: 0.875rem; /*var(--font-sm)*/ @media (max-width: 991px) { font-size: 15px; padding-top: 30px; padding-bottom: 30px; .__inner { display: grid; gap: calc(16px + 2rem); } } @media (min-width: 992px) { padding-top: 60px; padding-bottom: 60px; .__inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 3vmax; & > :last-child { text-align: right; align-items: flex-end; } } } ul:has(> li > a) { list-style: none; padding: 0; } a { text-decoration-color: rgb(255 255 255 / 50%); } a:hover { color: #d5ad2b; text-decoration-color: #b2a650; } h1, h2, h3, h4, h5, h6 { color: #fff; } .wp-block-social-links { color: #fff; margin: 1rem 0; @media (max-width: 991px) { justify-content: center!important; } } .wp-social-link { color: inherit !important; } } .eopFooter { background-color: #0e3d64; color: #fff; font-size: 0.8125rem; /*var(--font-xs)*/ @media (max-width: 991px) { padding-top: 30px; padding-bottom: 60px; .__inner { display: grid; gap: 1vmax; } } @media (min-width: 992px) { padding-top: 1.5vh; padding-bottom: 1.5vh; .__inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } } .__inner > * { margin-bottom: 0; & > :nth-child(n + 4) { display: none; } } a { text-decoration-color: rgb(255 255 255 / 50%); } } .wpFooter > :not(#wpadminbar) { display: none !important; } /**============================================================================ * TRANSPARENT HEADER IF :NOT(:STUCK) AND CONTENT:HAS(:FULL-HEIGHT:FIRST-CHILD) =============================================================================*/ .siteHeader:has(~ main > :first-child.\:fullscreen) { height: 0px; @media (min-width: 992px) { top: -120px; &.\:stuck { transform: translateY(120px); } } #menu-mega > li > .sub-menu { margin: 0 -3%; padding-left: 1.5%; padding-right: 1.5%; } } .siteHeader:has(~ main > :first-child.\:fullscreen):not(.\:stuck) { @media (min-width: 992px) { .__inner { height: 120px; } .site-logo::before { width: 360px; } } &::after { display: none; } /* transparent background */ &::before { order: -2; content: ""; grid-area: 1 / 1 / span 1 / -1; background: #000000; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100% ); height: 240px; } } /**============================================================================ * PAGE CONTENT =============================================================================*/ .frontpageVideo { /* grid-column: 1/-1; width: 100%; height: 100vh; */ display: grid; grid-template-rows: 80px 1fr 40px; background-color: #000; } .frontpageVideo .wp-block-video, .frontpageVideo .__bgnd { position: relative; grid-area: 1 / 1 / -1 / -1; opacity: 0.5; filter: blur(1px); margin: 0; } .frontpageVideo video { display: block; aspect-ratio: auto; object-fit: cover; } .frontpageVideo video, .frontpageVideo .wp-block-video, .frontpageVideo .wp-block-video > * { height: 100%; max-width: 100vw; } .frontpageVideo .__text { grid-area: 2 / 1 / span 1 / -1; position: relative; height: max-content; width: max-content; max-width: min(768px, 100vw); /* color: #ffffff; filter: drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 60px black); */ p { max-width: min(576px, 100vw); } h6 { opacity: 1; color: #999; } } .mainContent { padding-top: 2rem; } .mainContent:has(>section:first-child), .mainContent:has(>.\:fullwidth:first-child), .mainContent:has(>.\:fullheight:first-child), .mainContent:has(>.\:fullscreen:first-child) { padding-top: 0; } /* featured image and page title overlay */ .pageHeading { justify-content: left; align-items: end; overflow: hidden; grid-row: 1; margin-bottom: 2rem; .wp-post-image { display: block; position: relative; z-index: 2; grid-row: 1 / span 1; grid-column: 1 / -1; width: 100%; max-height: min(33vmax, 50vh); object-fit: cover; aspect-ratio: 3 / 2; @media (min-width: 769px) { aspect-ratio: 3 / 1; } } /*DOUBLE IMAGE - DEPRECATED*/ &:has(.wp-post-image ~ .wp-post-image)::before { content: ""; position: relative; z-index: 3; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .wp-post-image + .wp-post-image { grid-column: left-start / right-end; z-index: 4; aspect-ratio: auto; /*box-shadow: 0px 0px 10vmax 0px #000;*/ } h1 { position: relative; z-index: 5; grid-row: 1 / span 1; filter: drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 60px black); color: #fff; padding-bottom: 1rem; font-size: 2.5rem; margin: 0; @media (max-width: 768px) { grid-column: left-start/right-end; } @media (min-width: 769px) { grid-column: 3 / -3; font-size: 3.3rem; } } } .pageFeaturedImage { grid-column: 1/-1; grid-row: image; .wp-post-image { width: 100%; height: 100%; aspect-ratio: 3 / 1; max-height: min(33vmax, 50vh); object-fit: cover; } } .pageTitle[class] { grid-column: left-start/right-end; font-size: 3rem; margin-top: 0; &:is(.pageHeading > *) { margin: 0 0 1rem 0; z-index: 6; color: #fff; grid-column: inner; grid-row: title; span { color: #fff; visibility: hidden; } } } .pageSidebar { z-index: 7; @media (max-width: 768px) { padding-top: 3vmax; padding-bottom: 3vmax; order: 1; } @media (min-width: 769px) { padding-right: 3vmax; padding-bottom: 3vmax; grid-column: left-start/inner-start; align-self: flex-start; position: sticky; top: calc(80px + 2rem); } ul { /*list-style: none;*/ margin: 0; padding: 1rem 1.5rem; background-color: #eee; border: 3px solid #eee; border-radius: 6px; &:first-child { background-color: #fff; border: 3px solid #ddd; } &:not(:only-child) { margin-bottom: 2rem; } &:not(:has(>li)){ display: none; } } li { padding-left: 18px; list-style: none; background: transparent -10px 2px no-repeat; background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22%2398ccf1%22%20width%3D%2228px%22%20height%3D%2228px%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.629%2015.997l-7.083-7.081L13.462%207l8.997%208.997L13.457%2025l-1.916-1.916z%22%2F%3E%3C%2Fsvg%3E"); } li > a { font-size: 0.875rem; line-height: 1.5; padding: 4px 0; display: block; } li.current_page_item > a, li.current-cat > a, li > a[aria-current="page"], li:hover > a { text-decoration-thickness: 0.066em; font-weight: 500; } h4 { color: #0e3d64; margin-bottom: 0.66em; } ul.wp-block-categories-list::before, ul.wp-block-archives-list::before { display: block; margin-top: 0; font-family: "Cal Sans"; letter-spacing: 0.033em; font-weight: 100; font-size: 1.5rem; line-height: 1.3; color: #0e3d64; margin-bottom: 0.66em; } ul.wp-block-categories-list::before { content: "Categories"; } ul.wp-block-archives-list::before { content: "Archives"; } } .pageContent { margin-bottom: 70px; h1 { color: #0e3d64; font-size: 2.5rem; &:first-child { font-size: 2.75rem; } } h2 { font-size: 2rem; color: #8ec4ea; a { color: #26669b; } } h3 { } h4 { font-size: 1.2rem; background-color: #fdd300; background-clip: content-box; display: inline; } } .pageSidebar + .pageContent { grid-column: inner; } .archiveHeading { margin-bottom: 1rem; .__breadcrumbs { } .__title { margin: 0; } } /**============================================================================ * COMPONENTS =============================================================================*/ .\%breadcrumbs { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .\%tag, .\%breadcrumbs > * { font-family: "Varela Round", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 6px 0; padding: 6px 12px 4px 12px; color: #888; background-color: #eee; border-radius: 4px; display: inline-flex; & > a { text-decoration: none; } &:has(>a):hover { color: #fff; background-color: #0e3d64; } &:empty { display: none; } } .\%blockquote, .pageContent h3 { font-size: 1.33rem; color: #fff; background: #6eb5e6; padding: 20px 25px; margin-bottom: 1.5rem; @media (max-width: 768px) { margin-left: calc(-50cqw + 50%); margin-right: calc(-50cqw + 50%); } @media (min-width: 769px) { border-radius: 6px; margin-left: -25px; margin-right: -25px; } &:not(:first-child) { margin-top: 1rem !important; } } .articleListing { margin-bottom: 2lh; time { font-size: 14px; margin-top: -10px; display: block; } .wp-block-image { max-height: 240px; overflow: hidden; position: relative; margin-top: 1lh; margin-bottom: 1lh; &::after { align-content: end; text-align: center; content: "See full article"; font-size: 13px; font-weight: 400; position: absolute; inset: 0 0 0 0; top: auto; height: 3lh; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 20%, #fff 50%, #999 50%, #999 calc(50% + 1px), #ddd calc(50% + 1px), #fff 100% ); } } } iframe { max-width: 100%; height: auto; } iframe[src^="https://www.youtube.com/"] { aspect-ratio: 16 / 10; } .\%play, [href^="https://www.youtube.com/"]:has(>img:only-child) { position: relative; img { border-radius: 20px; } &::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 8; transform: translate(-50%, -50%); width: 64px; height: 64px; background: #00000080; border-radius: 128px; } &::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 9; transform: translate(-50%, -50%); width: 0; height: 0; border-style: solid; margin-left: 3px; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent rgba(255, 255, 255, .9); } } /**============================================================================ * HELPER CLASSES & CONTENT MODIFIERS =============================================================================*/ .\:fullwidth { grid-column: 1/-1; width: 100%; max-width: 100vw; } .\:fullheight { height: 100vh; } .\:fullscreen { grid-column: 1/-1; width: 100%; max-width: 100vw; height: calc(100vh - 40px); } .display\:hidden, .display\:none { display: none!important; } .\@desktop\:display\:hidden, .\@desktop\:display\:none, [id^="mobile"] { @media (min-width: 769px) { display: none!important; } } .\@mobile\:display\:hidden, .\@mobile\:display\:none, [id^="desktop"] { @media (max-width: 768px) { display: none!important; } } .text-direction\:vertical { writing-mode: vertical-rl; } .text-transform\:uppercase { text-transform: uppercase; } @media (max-width: 768px) { .\@mobile\:text-direction\:vertical { writing-mode: vertical-rl; } .\@mobile\:text-transform\:uppercase { text-transform: uppercase; } } @media (min-width: 769px) { .\@desktop\:text-direction\:vertical { writing-mode: vertical-rl; } .\@desktop\:text-transform\:uppercase { text-transform: uppercase; } } /* FONTS */ .font-family\:serif { font-family: serif; } .font-color\:white { color: #fff; } .font-color\:grey { color: #888; } @media (max-width: 768px) { .\@mobile\:font-family\:serif { font-family: serif; } .\@mobile\:font-color\:white { color: #fff; } .\@mobile\:font-color\:grey { color: #888; } } @media (min-width: 769px) { .\@desktop\:font-family\:serif { font-family: serif; } .\@desktop\:font-color\:white { color: #fff; } .\@desktop\:font-color\:grey { color: #888; } } .font-weight\:100 { font-weight: 100; &:is(a), a { text-decoration-thickness: 0.011em; } } .font-weight\:200 { font-weight: 200; &:is(a), a { text-decoration-thickness: 0.022em; } } .font-weight\:300 { font-weight: 300; &:is(a), a { text-decoration-thickness: 0.033em; } } .font-weight\:400 { font-weight: 400; &:is(a), a { text-decoration-thickness: 0.055em; } } .font-weight\:500 { font-weight: 500; &:is(a), a { text-decoration-thickness: 0.077em; } } .font-weight\:600 { font-weight: 600; &:is(a), a { text-decoration-thickness: 0.099em; } } .font-weight\:700 { font-weight: 700; &:is(a), a { text-decoration-thickness: 0.111em; } } .font-weight\:800 { font-weight: 800; &:is(a), a { text-decoration-thickness: 0.133em; } } .font-weight\:900 { font-weight: 900; &:is(a), a { text-decoration-thickness: 0.1em; } } /* ALIGN/PLACEMENT */ .align-self\:top { align-self: start; } .align-self\:middle, .align-self\:center { align-self: center; } .align-self\:bottom { align-self: end; } .justify-self\:left { justify-self: left; } .justify-self\:center { justify-self: center; } .justify-self\:right { justify-self: right; } .align-items\:top { align-items: start; } .align-items\:middle, .align-items\:center { align-items: center; } .align-items\:bottom { align-items: end; } .justify-items\:left { justify-items: left; } .justify-items\:center { justify-items: center; } .justify-items\:right { justify-items: right; } .place-self\:topleft { place-self: start left; } .place-self\:topright { place-self: start right; } .place-self\:bottomleft { place-self: end left; } .place-self\:bottomright { place-self: end right; } .text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } } .text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } } .text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } } .text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } } .margin-top\:0 { margin-top: 0!important; } .margin-top\:auto { margin-top: auto!important; } .margin-bottom\:0 { margin-bottom: 0!important; } .margin-bottom\:auto { margin-bottom: auto!important; } .margin-left\:0 { margin-left: 0!important; } .margin-left\:auto { margin-left: auto!important; } .margin-right\:0 { margin-right: 0!important; } .margin-right\:auto { margin-right: auto!important; } @media (max-width: 768px) { .\@mobile\:align-self\:top { align-self: start; } .\@mobile\:align-self\:middle, .\@mobile\:align-self\:center { align-self: center; } .\@mobile\:align-self\:bottom { align-self: end; } .\@mobile\:justify-self\:left { justify-self: left; } .\@mobile\:justify-self\:center { justify-self: center; } .\@mobile\:justify-self\:right { justify-self: right; } .\@mobile\:align-items\:top { align-items: start; } .\@mobile\:align-items\:middle, .\@mobile\:align-items\:center { align-items: center; } .\@mobile\:align-items\:bottom { align-items: end; } .\@mobile\:justify-items\:left { justify-items: left; } .\@mobile\:justify-items\:center { justify-items: center; } .\@mobile\:justify-items\:right { justify-items: right; } .\@mobile\:place-self\:topleft { place-self: start left; } .\@mobile\:place-self\:topright { place-self: start right; } .\@mobile\:place-self\:bottomleft { place-self: end left; } .\@mobile\:place-self\:bottomright { place-self: end right; } .\@mobile\:text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } } .\@mobile\:text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } } .\@mobile\:text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } } .\@mobile\:text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } } .\@mobile\:margin-top\:0 { margin-top: 0!important; } .\@mobile\:margin-top\:auto { margin-top: auto!important; } .\@mobile\:margin-bottom\:0 { margin-bottom: 0!important; } .\@mobile\:margin-bottom\:auto { margin-bottom: auto!important; } .\@mobile\:margin-left\:0 { margin-left: 0!important; } .\@mobile\:margin-left\:auto { margin-left: auto!important; } .\@mobile\:margin-right\:0 { margin-right: 0!important; } .\@mobile\:margin-right\:auto { margin-right: auto!important; } } @media (min-width: 769px) { .\@desktop\:align-self\:top { align-self: start; } .\@desktop\:align-self\:middle, .\@desktop\:align-self\:center { align-self: center; } .\@desktop\:align-self\:bottom { align-self: end; } .\@desktop\:justify-self\:left { justify-self: left; } .\@desktop\:justify-self\:center { justify-self: center; } .\@desktop\:justify-self\:right { justify-self: right; } .\@desktop\:align-items\:top { align-items: start; } .\@desktop\:align-items\:middle, .\@desktop\:align-items\:center { align-items: center; } .\@desktop\:align-items\:bottom { align-items: end; } .\@desktop\:justify-items\:left { justify-items: left; } .\@desktop\:justify-items\:center { justify-items: center; } .\@desktop\:justify-items\:right { justify-items: right; } .\@desktop\:place-self\:topleft { place-self: start left; } .\@desktop\:place-self\:topright { place-self: start right; } .\@desktop\:place-self\:bottomleft { place-self: end left; } .\@desktop\:place-self\:bottomright { place-self: end right; } .\@desktop\:text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } } .\@desktop\:text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } } .\@desktop\:text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } } .\@desktop\:text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } } .\@desktop\:margin-top\:0 { margin-top: 0!important; } .\@desktop\:margin-top\:auto { margin-top: auto!important; } .\@desktop\:margin-bottom\:0 { margin-bottom: 0!important; } .\@desktop\:margin-bottom\:auto { margin-bottom: auto!important; } .\@desktop\:margin-left\:0 { margin-left: 0!important; } .\@desktop\:margin-left\:auto { margin-left: auto!important } .\@desktop\:margin-right\:0 { margin-right: 0!important; } .\@desktop\:margin-right\:auto { margin-right: auto!important; } } /**============================================================================ * BOX-SIZING / ASPECT-RATIO =============================================================================*/ /*FOR CUSTOM VSPACE*/ :has(+.height\:auto) { margin-bottom: auto!important; } .height\:auto + :is(*) { margin-top: auto!important; } .min-height\:1rem { min-height: 1rem; } .min-height\:2rem { min-height: 2rem; } .aspect-ratio\:auto { aspect-ratio: auto } .aspect-ratio\:1x1 { aspect-ratio: 1/1 } .aspect-ratio\:4x3 { aspect-ratio: 4/3 } .aspect-ratio\:3x2 { aspect-ratio: 3/2 } .aspect-ratio\:16x9 { aspect-ratio: 16/9 } .aspect-ratio\:21x9 { aspect-ratio: 21/9 } .aspect-ratio\:4x5 { aspect-ratio: 4/5 } .aspect-ratio\:3x4 { aspect-ratio: 3/4 } .aspect-ratio\:2x3 { aspect-ratio: 2/3 } .aspect-ratio\:9x16 { aspect-ratio: 9/16 } .height\:50vh { height: 50vh } .height\:67vh { height: 67vh } .height\:100vh { height: 100vh } @media (max-width: 768px) { .\@mobile\:aspect-ratio\:auto { aspect-ratio: auto } .\@mobile\:aspect-ratio\:1x1 { aspect-ratio: 1/1 } .\@mobile\:aspect-ratio\:4x3 { aspect-ratio: 4/3 } .\@mobile\:aspect-ratio\:3x2 { aspect-ratio: 3/2 } .\@mobile\:aspect-ratio\:16x9 { aspect-ratio: 16/9 } .\@mobile\:aspect-ratio\:21x9 { aspect-ratio: 21/9 } .\@mobile\:aspect-ratio\:4x5 { aspect-ratio: 4/5 } .\@mobile\:aspect-ratio\:3x4 { aspect-ratio: 3/4 } .\@mobile\:aspect-ratio\:2x3 { aspect-ratio: 2/3 } .\@mobile\:aspect-ratio\:9x16 { aspect-ratio: 9/16 } .\@mobile\:height\:50vh { height: 50vh } .\@mobile\:height\:67vh { height: 67vh } .\@mobile\:height\:100vh { height: 100vh } } @media (min-width: 769px) { .\@desktop\:aspect-ratio\:auto { aspect-ratio: auto } .\@desktop\:aspect-ratio\:1x1 { aspect-ratio: 1/1 } .\@desktop\:aspect-ratio\:4x3 { aspect-ratio: 4/3 } .\@desktop\:aspect-ratio\:3x2 { aspect-ratio: 3/2 } .\@desktop\:aspect-ratio\:16x9 { aspect-ratio: 16/9 } .\@desktop\:aspect-ratio\:21x9 { aspect-ratio: 21/9 } .\@desktop\:aspect-ratio\:4x5 { aspect-ratio: 4/5 } .\@desktop\:aspect-ratio\:3x4 { aspect-ratio: 3/4 } .\@desktop\:aspect-ratio\:2x3 { aspect-ratio: 2/3 } .\@desktop\:aspect-ratio\:9x16 { aspect-ratio: 9/16 } .\@desktop\:height\:50vh { height: 50vh } .\@desktop\:height\:67vh { height: 67vh } .\@desktop\:height\:100vh { height: 100vh } } /**============================================================================ * LAYOUT / GRID =============================================================================*/ @media (max-width: 768px) { .\@mobile\:order\:minus3 { order: -3; } .\@mobile\:order\:minus2 { order: -2; } .\@mobile\:order\:minus1 { order: -1; } .\@mobile\:order\:auto { order: unset; } .\@mobile\:order\:plus1 { order: 1; } .\@mobile\:order\:plus2 { order: 2; } .\@mobile\:order\:plus3 { order: 3; } } .display\:grid { display: grid; } .display\:stack { display: grid; grid-template-columns: 1fr; } @media (max-width: 768px) { .\@mobile\:display\:grid { display: grid; } .\@mobile\:display\:stack { display: grid; grid-template-columns: 1fr; } } @media (min-width: 769px) { .\@desktop\:display\:flex { display: flex; } .display\:grid, .\@desktop\:display\:grid { display: grid; column-count: auto; &.\@desktop\:column-count\:1 { grid-template-columns: repeat(1, 1fr); } &.\@desktop\:column-count\:2 { grid-template-columns: repeat(2, 1fr); } &.\@desktop\:column-count\:3 { grid-template-columns: repeat(3, 1fr); } &.\@desktop\:column-count\:auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } } [class*="@desktop:column-count"]:not(.display\:grid, .\@desktop\:display\:grid) { &.\@desktop\:column-count\:1 { display: block; column-count: 1; } &.\@desktop\:column-count\:2 { display: block; column-count: 2; } &.\@desktop\:column-count\:3 { display: block; column-count: 3; } &.\@desktop\:column-count\:auto { display: flex; } &.\@desktop\:column-count\:1, &.\@desktop\:column-count\:2, &.\@desktop\:column-count\:3 { & > :only-child { display: contents; } } } .\@desktop\:display\:stack { display: grid; grid-template-columns: 1fr; } .\@desktop\:display\:3-column-layout { display: grid; grid-template-columns: 1fr auto 1fr; } .\@desktop\:column-span\:1 { grid-column-end: span 1; } .\@desktop\:column-span\:2 { grid-column-end: span 2; } .\@desktop\:column-span\:3 { grid-column-end: span 3; } } ui-view::part(logo) { background-image: var(--theme-logo-normal); max-width: 255px; } .marqueeNotifications { --count: 3; --timer: 4000ms; & > * { grid-area: 1/1/-1/-1; margin: auto; animation: notify calc(var(--count)*var(--timer)) infinite; opacity: 0; animation-fill-mode: both; } & > :nth-child(1) { animation-delay: 0s; } & > :nth-child(2) { animation-delay: calc(1*var(--timer)); } & > :nth-child(3) { animation-delay: calc(2*var(--timer)); } & > :nth-child(4) { animation-delay: calc(3*var(--timer)); } & > :nth-child(5) { animation-delay: calc(4*var(--timer)); } & > :nth-child(6) { animation-delay: calc(5*var(--timer)); } } @keyframes notify { 0%, 34%, 100% { opacity: 0; } 10%, 30% { opacity: 1; } } /**============================================================================ * ANIMATION KEYFRAMES =============================================================================*/ @keyframes fadeInFromNone { 0% { display: grid; opacity: 0; } 100% { display: grid; opacity: 1; } } @keyframes fadeOutToNone { 0% { display: grid; opacity: 1; } 99% { display: grid; opacity: 0; } 100% { display: none; opacity: 0; } } /**============================================================================ * VENDOR OVERRIDES =============================================================================*/ :where(.editor-styles-wrapper) .is-root-container { container-type: inline-size; } #swipebox-overlay { top: 0 !important; z-index: 999999 !important; background: none; -webkit-backdrop-filter: blur(5px) brightness(0.25); backdrop-filter: blur(5px) brightness(0.25); } #swipebox-container { bottom: 0 !important; } #swipebox-close { background: none; cursor: pointer; width: 80px; height: 80px; &::before, &::after { content: ""; display: block; position: absolute; top: 50%; right: 50%; overflow: hidden; width: 32px; height: 3px; border-radius: 4px; background: #ccc; background-clip: content-box !important; transform: translate(50%, -50%) rotate(-45deg); transform-origin: center; transform-style: preserve-3d; transition: width 0.15s ease-in-out; } &::before { transform: translate(50%, -50%) rotate(45deg); } }