/* Theme Name: New Direction Author: Pilch + Barnet Author URI: https://pilchbarnet.com Description: Version: 1.0 Requires at least: 5.2 Tested up to: 6.1 Requires PHP: 7.3 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: dodge Dodge WordPress Theme © 2011-2023 TidyThemes Dodge is distributed under the terms of the GNU GPL */ @layer reset, theme, base, layout, utilities, components; @view-transition { navigation: auto; } /*------------------------------------*\ #RESET \*------------------------------------*/ @layer reset { *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } * { margin: 0; padding: 0; font: inherit; } html { color-scheme: dark light; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; height: auto; vertical-align: middle; font-style: italic; } i svg { width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } } /*------------------------------------*\ #THEME \*------------------------------------*/ @layer theme { :root { interpolate-size: allow-keywords; /** * fonts * =============== */ --font-body: gamay, sans-serif; --font-editorial: "gamay-editorial", sans-serif; --font-display: "headline-gothic-atf", sans-serif; --font-size-root: 16px; --line-height-base: 1; --line-height-large: 1.5; /** * colors * =============== */ --c-white: #ffffff; --c-yellow: #f59f28; --c-light-blue: #0c435b; --c-dark-blue: #051b24; --c-cream: #f2f3f4; --c-white-100: hsl(from var(--c-white) h s calc(l + 40)); --c-white-200: hsl(from var(--c-white) h s calc(l + 30)); --c-white-300: hsl(from var(--c-white) h s calc(l + 20)); --c-white-400: hsl(from var(--c-white) h s calc(l + 10)); --c-white-500: var(--c-white); --c-white-600: hsl(from var(--c-white) h s calc(l - 10)); --c-white-700: hsl(from var(--c-white) h s calc(l - 20)); --c-white-800: hsl(from var(--c-white) h s calc(l - 30)); --c-white-900: hsl(from var(--c-white) h s calc(l - 40)); --c-yellow-100: hsl(from var(--c-yellow) h s calc(l + 40)); --c-yellow-200: hsl(from var(--c-yellow) h s calc(l + 30)); --c-yellow-300: hsl(from var(--c-yellow) h s calc(l + 20)); --c-yellow-400: hsl(from var(--c-yellow) h s calc(l + 10)); --c-yellow-500: var(--c-yellow); --c-yellow-600: hsl(from var(--c-yellow) h s calc(l - 10)); --c-yellow-700: hsl(from var(--c-yellow) h s calc(l - 20)); --c-yellow-800: hsl(from var(--c-yellow) h s calc(l - 30)); --c-yellow-900: hsl(from var(--c-yellow) h s calc(l - 40)); --c-light-blue-100: hsl(from var(--c-light-blue) h s calc(l + 70)); --c-light-blue-200: hsl(from var(--c-light-blue) h s calc(l + 30)); --c-light-blue-300: hsl(from var(--c-light-blue) h s calc(l + 20)); --c-light-blue-400: hsl(from var(--c-light-blue) h s calc(l + 10)); --c-light-blue-500: var(--c-light-blue); --c-light-blue-600: hsl(from var(--c-light-blue) h s calc(l - 10)); --c-light-blue-700: hsl(from var(--c-light-blue) h s calc(l - 20)); --c-light-blue-800: hsl(from var(--c-light-blue) h s calc(l - 30)); --c-light-blue-900: hsl(from var(--c-light-blue) h s calc(l - 40)); --c-dark-blue-100: hsl(from var(--c-dark-blue) h s calc(l + 40)); --c-dark-blue-200: hsl(from var(--c-dark-blue) h s calc(l + 30)); --c-dark-blue-300: hsl(from var(--c-dark-blue) h s calc(l + 20)); --c-dark-blue-400: hsl(from var(--c-dark-blue) h s calc(l + 10)); --c-dark-blue-500: var(--c-dark-blue); --c-dark-blue-600: hsl(from var(--c-dark-blue) h s calc(l - 10)); --c-dark-blue-700: hsl(from var(--c-dark-blue) h s calc(l - 20)); --c-dark-blue-800: hsl(from var(--c-dark-blue) h s calc(l - 30)); --c-dark-blue-900: hsl(from var(--c-dark-blue) h s calc(l - 40)); --c-cream-100: hsl(from var(--c-cream) h s calc(l + 40)); --c-cream-200: hsl(from var(--c-cream) h s calc(l + 30)); --c-cream-300: hsl(from var(--c-cream) h s calc(l + 20)); --c-cream-400: hsl(from var(--c-cream) h s calc(l + 10)); --c-cream-500: var(--c-cream); --c-cream-600: hsl(from var(--c-cream) h s calc(l - 10)); --c-cream-700: hsl(from var(--c-cream) h s calc(l - 20)); --c-cream-800: hsl(from var(--c-cream) h s calc(l - 30)); --c-cream-900: hsl(from var(--c-cream) h s calc(l - 40)); --c-text-light: #cdd1d3; --c-text-dark: #374950; /* ===== Project color definitions ===== */ --bg-light: var(--c-white); --bg-cream: var(--c-cream); --bg-dark: var(--c-dark-blue); --bg-accent: var(--c-light-blue); --bg-interactive: var(--c-yellow); --text-primary: var(--c-dark-blue); --text-secondary: var(--c-text-dark); --text-inverted: var(--c-white); --text-inverted-secondary: var(--c-text-light); --text-accent: var(--c-yellow); --text-link: var(--c-yellow); --text-link-inverted: var(--c-yellow); --bg-interactive: var(--c-yellow); --color-button-inverted: var(--c-yellow); --color-button-accent: var(--c-yellow); --color-border: var(--color-gold); --color-border-inverted: var(--color-cream); /** * spacing * =============== */ --page-gutter: clamp(2rem, -0.25rem + 4vw, 3.75rem); --half-gutter: calc(var(--page-gutter) * 0.5); --section-padding: clamp(80px, 10vw, 200px); --padding-inline: var(--page-gutter); --lead-offset: min(5vw, 5rem); /** * borders * =============== */ --border-radius: 4px; --border-curve-ratio: calc(206.5 / 1920); /** * flexible fonts * =============== */ --font-size-variable: clamp( 0.875rem, 0.7916666666666666rem + 0.33333333333333337vw, 1.125rem ); /* default 18px */ } @media (min-width: 768px) { :root { --padding-inline: calc(var(--page-gutter, 40px) * 1.5); } } [data-theme="dark"] { /* do stuff here */ } @media (prefers-color-scheme: dark) { } } /*------------------------------------*\ #BASE-STYLES \*------------------------------------*/ @layer base { html { font-size: var(--font-size-variable); line-height: var(--line-height-base); -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Enables smooth scrolling */ } body { font-family: var(--font-body); font-size: 1rem; background-color: var(--bg-light); color: var(--text-primary); accent-color: var(--bg-interactive); } h1, h2, h3, h4, h5 { -webkit-margin-after: 0.5em; margin-block-end: 0.5em; font-family: var(--font-display); font-weight: 500; line-height: 1; text-wrap: balance; /* text-transform: uppercase; */ font-size: var(--font-size); } h1 { --font-size: 5.125rem; /* 82px */ } h2 { --font-size: 4.25rem; /* 68px */ } h3 { --font-size: 3rem; /* 36px */ } h4 { --font-size: 2.25rem; /* 26px */ } h5 { --font-size: 1.16667rem; /* 21px */ } p { -webkit-margin-after: 1em; margin-block-end: 1em; line-height: 1.5; text-wrap: pretty; max-width: 65ch; /* font-weight: 500; */ } a:not([class]) { --underline-thickness: 0.075em; --underline-offset: calc(-1 * var(--underline-thickness) + 0.25rem); color: currentColor; /* font-weight: 600; */ /* box-shadow: inset 0 -1px 0 0 currentColor; */ overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; text-decoration: underline; -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; /* font-weight: 600; */ &:where(:hover, :focus) { --underline-thickness: 0.5em; -webkit-text-decoration-color: var(--text-link); text-decoration-color: var(--text-link); } .bg--dark &:where(:hover, :focus) { text-decoration-color: hsl(from var(--_btn-color) h s l / 0.6); } } ul:not([class]) li { position: relative; -webkit-padding-start: 1.5em; padding-inline-start: 1.5em; -webkit-margin-after: 0.75em; margin-block-end: 0.75em; } /* ul:not([class]) li::before { content: "•"; position: absolute; inset-block-start: 0; inset-inline-start: 0; font-size: 1.75em; line-height: 1em; color: var(--text-accent); } */ ul:not([class]) li::before { content: ""; position: absolute; inset-block-start: 0.5em; inset-inline-start: 0; color: var(--text-accent); height: 0.5em; width: 0.5em; background-color: currentcolor; border-radius: 100rem; } ul:not([class]) li ul { -webkit-margin-before: 0.75em; margin-block-start: 0.75em; } ul:where(.grid) { --grid-layout-gap: 0px; } :where(a, button):focus-visible { outline: 1px dashed var(--section-text-color, currentColor); outline-offset: 3px; } button:hover { cursor: pointer; } noscript { display: block !important; padding: 30px; width: 100%; display: block !important; color: var(--text-primary); background: var(--bg-color); top: 0; left: 0; position: relative; z-index: 9999; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.2; } noscript a { color: var(--text-link); } strong { font-weight: 700; } } /*------------------------------------*\ #LAYOUT \*------------------------------------*/ @layer layout { .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } /** * Flex * =============== */ .flex { display: -ms-flexbox; display: -webkit-box; display: flex; } .flex--inline { display: -ms-inline-flexbox; display: -webkit-inline-box; display: inline-flex; } .flex--horizontal { -ms-flex-direction: row; -webkit-box-orient: horizontal; flex-direction: row; } .flex--horizontal-reverse { -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; } .flex--vertical { -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .flex--vertical-reverse { -ms-flex-direction: column-reverse; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } .flex--wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex--no-wrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex--wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex--auto { -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; } .flex--none { -ms-flex: none; -webkit-box-flex: 0; flex: none; } /* alignment in cross axis */ .flex--align-start { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } .flex--align-center { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } .flex--align-end { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } .flex--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /* alignment in main axis */ .flex--justify { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } .flex--justify-start { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: start; } .flex--justify-center { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } .flex--justify-end { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: end; } .flex--justify-around { -ms-flex-pack: around; justify-content: space-around; } .flex-2\/3 { -ms-flex: 2 3 0; -webkit-box-flex: 2; flex: 2 3 0; } .flex-1\/3 { -ms-flex: 1 3 0; -webkit-box-flex: 1; flex: 1 3 0; } /* self alignment */ .self-start { -ms-align-self: flex-start; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .self-center { -ms-align-self: center; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .self-end { -ms-align-self: flex-end; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .self-stretch { -ms-align-self: stretch; -webkit-align-self: stretch; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .gap--std { gap: var(--half-gutter); } .gap--lrg { gap: var(--page-gutter); } .col { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .col--lrg { -webkit-box-flex: 1; -ms-flex: 1 0 calc(60% - var(--page-gutter, 40px) / 2); flex: 1 0 calc(60% - var(--page-gutter, 40px) / 2); } .col--sml { -webkit-box-flex: 1; -ms-flex: 1 0 calc(40% - var(--page-gutter, 40px) / 2); flex: 1 0 calc(40% - var(--page-gutter, 40px) / 2); } /** * Grid * =============== */ .grid { display: -ms-grid; display: grid; } .grid--equal { /** * User input values. */ --grid-layout-gap: var(--half-gutter); --grid-column-count: 2; --grid-item--min-width: min(300px, 100%); /** * Calculated values. */ --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap)); --grid-item--max-width: calc( (100% - var(--total-gap-width)) / var(--grid-column-count) ); grid-template-columns: repeat( auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr) ); grid-gap: var(--grid-layout-gap); } .grid--3 { --grid-column-count: 3; } .grid--4 { --grid-column-count: 4; } .grid--5 { --grid-column-count: 5; } .grid--masonry { grid-auto-flow: dense; } .grid--auto { --grid-layout-gap: var(--half-gutter); --grid-item--min-width: 250px; gap: var(--grid-layout-gap); grid-template-columns: repeat( auto-fit, minmax(min(var(--grid-item--min-width), 100%), 1fr) ); } .grid--split { --grid-breakpoint: 768px; grid-template-columns: repeat( auto-fit, minmax(min(var(--grid-breakpoint), 100%), 1fr) ); } @media only screen and (min-width: 600px) { .grid--auto { grid-template-columns: repeat( auto-fit, minmax(min(var(--grid-item--min-width), 100%), 0.5fr) ); } } /** * Containers * =============== */ #container { position: relative; } .container { --content-max-width: 100%; inline-size: min( var(--content-max-width), 100% - (var(--padding-inline) * 2) ); margin-inline: auto; } .w--full { --content-max-width: 100%; } .w--1920 { --content-max-width: 1920px; } .w--1600 { --content-max-width: 1600px; } .w--1440 { --content-max-width: 1400px; } .w--960 { --content-max-width: 960px; } } /*------------------------------------*\ #UTILITIES \*------------------------------------*/ @layer utilities { .--no-scroll { overflow: hidden; } /** * Links * =============== */ .link-arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; font-weight: 600; .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; inline-size: 1em; block-size: 1em; color: var(--text-link); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 100ms linear; transition: -webkit-transform 100ms linear; -o-transition: transform 100ms linear; transition: transform 100ms linear; transition: transform 100ms linear, -webkit-transform 100ms linear; } &:hover .icon { -webkit-transform: translateX(0.25em); -ms-transform: translateX(0.25em); transform: translateX(0.25em); } } /** * Backgrounds * =============== */ /* :where(main > .bg) { padding-block-start: var(--section-padding); } */ article { --_font-color-mixin: var(--font-color-mixin, var(--color-white)); } .bg { --_btn-color: var(--btn-color, var(--bg-interactive)); --_font-color-mixin: var(--font-color-mixin, var(--color-white)); --_bg-color: var(--bg-color, var(--bg-light)); --_card-bg-color: var(--card-bg-color, var(--bg-light)); background: var(--_bg-color); } .page:where(main > .bg) > *:last-child { -webkit-padding-after: var(--section-padding); padding-block-end: var(--section-padding); } .bg--dark { --text-link: var(--text-accent); --btn-color: var(--color-button-inverted); --font-color-mixin: var(--text-primary); --bg-color: var(--bg-dark); --section-text-color: var(--text-inverted); color: var(--text-inverted); } .bg--light { --text-link: var(--color-button-inverted); --btn-color: var(--bg-interactive); --font-color-mixin: var(--text-inverted); --bg-color: var(--bg-light); --section-text-color: var(--text-primary); color: var(--text-primary); } .bg--cream { --text-link: var(--color-button-inverted); --btn-color: var(--color-button-accent); --bg-color: var(--bg-cream); --font-color-mixin: var(--text-inverted); --section-text-color: var(--text-primary); color: var(--text-primary); } .bg--beige { --btn-color: var(--color-button-accent); --bg-color: var(--bg-accent); color: var(--text-secondary); } .bg--gradient { --bg-color: var(--gradient-metallic); } p { color: currentColor; color: color-mix(in lab, currentColor, var(--_font-color-mixin) 20%); } /** * Headings * =============== */ .heading { display: block; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; font-family: var(--font-family-display); font-weight: bold; line-height: var(--line-height-base); letter-spacing: 0.05em; } .heading--1 { font-size: 5.125rem; } .heading--2 { font-size: 4.25rem; /* 68px */ } .heading--3 { font-size: 3rem; /* 36px */ } .heading--4 { font-size: 2.25rem; /* 26px */ } .heading--5 { font-size: 1.16667rem; /* 21px */ } /* Fonts */ .font--body { font-family: var(--font-body); } .font--heading { font-family: var(--font-display); } .font--display { font-family: var(--font-display); } .font--signature { font-family: var(--font-script); font-style: italic; text-transform: capitalize; } .font--normal { font-weight: normal; } .font--semi-bold { font-weight: 600; } .font--bold { font-weight: bold; } .italic { font-style: italic; } .uppercase { text-transform: uppercase; } .underlined { text-decoration: underline; } /* Colors */ .color--gold { color: var(--text-accent); } .text--left { text-align: left; } .text--center { text-align: center; } .text--right { text-align: right; } .margin--auto { margin-inline: auto; } .margin--auto p { margin-inline: auto; } /** * Display * =============== */ .inline { display: inline; } .block { display: block; } .inline-block { display: inline-block; } .hide { display: none; } .sr-only { border: 0; clip: rect(0 0 0 0); block-size: 1px; margin: -1px !important; overflow: hidden; padding: 0; position: absolute !important; inline-size: 1px; } .rounded { border-radius: var(--border-radius); /* clip-path: inset(0 0 0 0 round var(--border-radius)); */ } .rounded--lrg { border-radius: calc(4 * var(--border-radius)); -webkit-clip-path: inset(0 0 0 0 round calc(4 * var(--border-radius))); clip-path: inset(0 0 0 0 round calc(4 * var(--border-radius))); } /** * Positioning * =============== */ .absolute-center { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .relative { position: relative; } .sticky { position: sticky; top: 1rem; } /** * Spacing * =============== */ .margin--none { margin: 0; } .margin--top-auto { -webkit-margin-before: auto; margin-block-start: auto; } .margin--right-auto { -webkit-margin-end: auto; margin-inline-end: auto; } .margin--bottom-auto { -webkit-margin-after: auto; margin-block-end: auto; } .margin--left-auto { -webkit-margin-start: auto; margin-inline-start: auto; } .padding--none { padding: 0; } .padding--section { padding-block: var(--section-padding); } /** * Crop * =============== */ .crop { position: relative; display: block; inline-size: 100%; aspect-ratio: 3/2; margin: 0; overflow: hidden; /* background-color: gray; */ } @supports not (aspect-ratio: auto) { .crop { -webkit-padding-before: 66.66667%; padding-block-start: 66.66667%; /* change % to match picture ratio */ block-size: 0; position: relative; z-index: 0; overflow: hidden; } } .crop--square { aspect-ratio: 1/1; } @supports not (aspect-ratio: auto) { .crop--square { -webkit-padding-before: 100%; padding-block-start: 100%; } } .crop--letterbox { aspect-ratio: 4/3; } @supports not (aspect-ratio: auto) { .crop--letterbox { -webkit-padding-before: 75%; padding-block-start: 75%; } } .crop--wide { aspect-ratio: 16/9; } @supports not (aspect-ratio: auto) { .crop--wide { -webkit-padding-before: 56.25%; padding-block-start: 56.25%; } } .crop--extra-wide { aspect-ratio: 20/9; } @supports not (aspect-ratio: auto) { .crop--extra-wide { -webkit-padding-before: 45%; padding-block-start: 45%; } } .crop--tall { aspect-ratio: 28 / 33; } @supports not (aspect-ratio: auto) { .crop--tall { -webkit-padding-before: 117.85714%; padding-block-start: 117.85714%; } } .crop--full { -webkit-padding-before: 0; padding-block-start: 0; block-size: 100%; aspect-ratio: unset; } .crop picture { block-size: 100%; } .crop :where(img, video) { /*position: absolute; inset: 0;*/ block-size: 100%; inline-size: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } @supports not (aspect-ratio: auto) { .crop :where(img, video) { position: absolute; inset: 0; z-index: 0; } } /** * Links * =============== */ .has-container-link { position: relative; } .has-container-link:has(.container-link:focus-visible) { outline: 1px dashed currentColor; outline-offset: 3px; } @supports not selector(:has(*)) { .has-container-link:focus-within { outline: 1px dashed currentColor; outline-offset: 3px; } } .container-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /** * Lists * =============== */ .bulleted { } :where(.bulleted) li { position: relative; -webkit-padding-start: 1.5em; padding-inline-start: 1.5em; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; color: currentColor; color: color-mix(in lab, currentColor, var(--_font-color-mixin) 30%); } :where(.bulleted) li::before { content: ""; position: absolute; inset-block-start: 0.5em; inset-inline-start: 0; /* font-size: 1.75em; line-height: 1em; */ height: 0.5em; width: 0.5em; border-radius: 100rem; background-color: var(--bg-interactive); } .bulleted:where(.grid) { --grid-layout-gap: 0px; } /** * Sections * =============== */ .offset--bottom { -webkit-padding-after: 0; padding-block-end: 0; } .offset--bottom > *:last-child { position: relative; inset-block-end: -3rem; -webkit-margin-before: -3rem; margin-block-start: -3rem; -webkit-padding-after: 0; padding-block-end: 0; } .has-bg-image { position: relative; isolation: isolate; -o-border-image: -o-linear-gradient(hsl(240 100% 50% / 0.3)) 1; border-image: -webkit-gradient(linear, left top, left bottom, from(hsl(240 100% 50% / 0.3))) fill 1; border-image: linear-gradient(hsl(240 100% 50% / 0.3)) fill 1; } .has-bg-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.6); } .bg-image { position: absolute; inset: 0; z-index: -100; } .bg-image img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .offset--bottom + * { -webkit-padding-before: calc(3rem + var(--section-padding)); padding-block-start: calc(3rem + var(--section-padding)); } /** * Flow * =============== */ .flow > * + * { -webkit-margin-before: 1em; margin-block-start: 1em; } /** * Icons * =============== */ .icon { display: block; fill: currentColor; } .dual-columns { -webkit-columns: 2 250px; -moz-columns: 2 250px; columns: 2 250px; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .dual-columns > * { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } } /*------------------------------------*\ #COMPONENTS \*------------------------------------*/ @layer components { #wrapper { overflow-x: clip; } /** * Headings * =============== */ :where(h1, h2, h3, h4, h5, h6) span, hgroup p { font-family: var(--font-body); display: block; font-size: 1rem; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; text-transform: uppercase; font-weight: 600; color: color-mix(in lab, currentColor, var(--_font-color-mixin) 30%); } /** * Sections * =============== */ .section:where(:first-child) { -webkit-padding-before: var(--section-padding); padding-block-start: var(--section-padding); } .section:where(:last-of-type) { -webkit-padding-after: var(--section-padding); padding-block-end: var(--section-padding); } .section + .section { -webkit-padding-before: var(--section-padding); padding-block-start: var(--section-padding); } .section--featured_callout { padding: 0; } .section:has(+ .border--bottom) { -webkit-padding-after: 1rem; padding-block-end: 1rem; } .card-grid { container-type: inline-size; --grid-item--min-width: 220px; } :where(.section--card_grid, .section--events):has(+ .border-svg--curve) .grid { position: relative; z-index: 2; margin-bottom: calc(-100vw * var(--border-curve-ratio)); } .has-border-svg--curve + .bg:not(:has(.staggered)) { -webkit-padding-before: calc(100vw * var(--border-curve-ratio)); padding-block-start: calc(100vw * var(--border-curve-ratio)); } .has-border-svg--curve:last-child { -webkit-margin-after: calc(100vw * var(--border-curve-ratio)); margin-block-end: calc(100vw * var(--border-curve-ratio)); } /* .section--card_grid:has(+ .border-svg--curve) + { position: relative; z-index: 2; margin-bottom: -120px; } */ .intro { -webkit-margin-after: calc(var(--page-gutter) * 1.5); margin-block-end: calc(var(--page-gutter) * 1.5); .intro__header:only-child { grid-column: 1/-1; } } @media (min-width: 1000px) { .intro--horizontal { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; -ms-grid-rows: auto; grid-template-rows: auto; } .intro--horizontal > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .intro--horizontal > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } :where(.intro--horizontal) .intro__header { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; } :where(.intro--horizontal) .intro__content { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; -ms-grid-row: 1; -ms-grid-row-span: 11; grid-row: 1 / 12; } :where(.intro--horizontal) .intro__button { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2 / 3; } } .intro--centered { text-align: center; } :where(.intro--centered) p { margin-inline: auto; } /** * Nav * =============== */ .primary-header { position: relative; z-index: 20; } .primary-header__inner > *:not(nav) { /* flex: 1 0 0; */ min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; } .primary-header__inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-block: 0.5rem; } .primary-header__shelf { gap: 1rem; } .site-title__link { display: inline-block; } .site-title svg { aspect-ratio: 907.4 / 493.3; block-size: clamp(60px, 6vw, 80px); max-width: 250px; @media(min-width: 1460px) { block-size: 80px; max-width: 300px; aspect-ratio: 557.1 / 74.7; } &.primary-logo { display: block; @media(min-width: 1460px) { display: none; } } &.primary-logo-full { display: none; @media(min-width: 1460px) { display: block; } } } .main-nav { margin-left: auto; display: none; @media(min-width: 1200px) { display: block; } } .primary-nav { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--c-dark-blue-400); gap: 1em; } .primary-nav__link { --underline-thickness: 0.5em; --underline-offset: calc(-1 * var(--underline-thickness) + 0.25rem); display: block; padding: 0.75em; color: currentColor; /* font-weight: 600; */ &:not([aria-expanded="true"]):where(:hover, :focus) span[itemprop="name"]{ text-decoration: underline; -webkit-text-decoration-color: var(--text-link); text-decoration-color: var(--text-link); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } } .sub-menu .primary-nav__link { display: inline-block; padding: 0; color: color-mix(in lab, currentColor, #fff 25%); } .primary-nav__link[aria-expanded="true"] { border-radius: var(--border-radius) var(--border-radius) 0 0; } .primary-nav__item { position: relative; } button.primary-nav__link::before { content: ""; display: block; height: 100%; width: 100%; position: absolute; inset: 0; z-index: -1; opacity: 0; visibility: hidden; border-radius: var(--border-radius) var(--border-radius) 0 0; background: oklch(from var(--bg-cream) calc(l - 0.025) c h); } button.primary-nav__link[aria-expanded="true"]::before { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { button.primary-nav__link[aria-expanded="true"]::before { -webkit-animation: submenu-enter 0.5s forwards; animation: submenu-enter 0.5s forwards; } } .primary-nav__item .sub-menu { opacity: 0; visibility: hidden; display: -ms-grid; display: grid; -ms-grid-columns: 8rem 1rem 8rem; grid-template-columns: repeat(2, 8rem); -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem 1rem; position: absolute; top: 100%; min-width: 100%; border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); background-color: oklch(from var(--bg-cream) calc(l - 0.025) c h); } .primary-nav__item .sub-menu[aria-hidden="false"] { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .primary-nav__item .sub-menu[aria-hidden="false"] { -webkit-animation: submenu-enter 0.5s forwards; animation: submenu-enter 0.5s forwards; } } @-webkit-keyframes submenu-enter { from { opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); } } @keyframes submenu-enter { from { opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); } } .menu-item-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; font-weight: 600; line-height: 1.2; } .menu-item .icon { inline-size: 0.5em; } .svg-plus__vertical { opacity: 1; -webkit-transition: opacity 0.15s cubic-bezier(0.6, 0.04, 0.98, 0.335); -o-transition: opacity 0.15s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: opacity 0.15s cubic-bezier(0.6, 0.04, 0.98, 0.335); } :is(.primary-nav__link[aria-expanded="true"], .toggle-nav__link[aria-expanded="true"]) .svg-plus__vertical { opacity: 0; } /* submenu */ .main-nav .sub-menu { position: absolute; top: 100%; padding: 2rem; } .parent-link { grid-column: 1/-1; margin-top: 1em; font-weight: 600; font-size: 1.025rem; .primary-nav__link, .toggle-nav__link { color: currentColor; } } /* shelf */ .primary-header__shelf { /* margin-left: auto; */ } /** * Search * =============== */ .search-form { --icon-size: clamp(0.875rem, 1.25rem + 1vw, 1.25rem); position: relative; border: 1px solid var(--c-text-light); border-radius: 100rem; -webkit-transition: border-color 200ms ease-out; -o-transition: border-color 200ms ease-out; transition: border-color 200ms ease-out; &:is(:hover, :focus-within) { border-color: hsl(from var(--c-text-light) h s calc(l - 60)); } } .search__field { padding: 0.5em 1em; padding-left: calc(var(--icon-size) + 1.5em); -webkit-transition: border-color 200ms ease-out; -o-transition: border-color 200ms ease-out; transition: border-color 200ms ease-out; } .search__btn svg { -webkit-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; } .search__field:where(:focus, :active) + .search__btn { color: var(--text-link); } .search__field::-webkit-input-placeholder { color: var(--c-text-light); } .search__field::-moz-placeholder { color: var(--c-text-light); } .search__field:-ms-input-placeholder { color: var(--c-text-light); } .search__field::-ms-input-placeholder { color: var(--c-text-light); } .search__field::placeholder { color: var(--c-text-light); } .search__btn { position: absolute; left: var(--icon-size); width: var(--icon-size); top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .toggle-panel .search-form-container { display: none; } @media(max-width: 420px) { .primary-header .search-form-container { display: none; } .toggle-panel .search-form-container { display: block; } } /** * Toggle * =============== */ .menu-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; position: relative; z-index: 100; font-family: var(--font-heading); } .hamburger { display: block; position: relative; height: 0.75rem; width: 2rem; } .hamburger::before, .hamburger::after { content: ""; position: absolute; inline-size: 100%; block-size: 2px; background-color: currentColor; -webkit-transition: -webkit-transform 150ms ease-out; transition: -webkit-transform 150ms ease-out; -o-transition: transform 150ms ease-out; transition: transform 150ms ease-out; transition: transform 150ms ease-out, -webkit-transform 150ms ease-out; } .hamburger::before { inset-block-start: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, calc(-50% - 0.35rem)); -ms-transform: translate(-50%, calc(-50% - 0.35rem)); transform: translate(-50%, calc(-50% - 0.35rem)); } .hamburger::after { inset-block-start: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, calc(-50% + 0.35rem)); -ms-transform: translate(-50%, calc(-50% + 0.35rem)); transform: translate(-50%, calc(-50% + 0.35rem)); } .menu-toggle[aria-expanded="true"] { color: var(--color-text-primary); } @media screen and (min-width: 650px) { .menu-toggle[aria-expanded="true"] { color: currentColor; } } /* open */ .menu-toggle[aria-expanded="true"] .hamburger::before { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .menu-toggle[aria-expanded="true"] .hamburger::after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } /* hover effects */ .menu-toggle:not([aria-expanded="true"]):hover { .hamburger::before { -webkit-transform: translate(-50%, calc(-50% - 0.25rem)); -ms-transform: translate(-50%, calc(-50% - 0.25rem)); transform: translate(-50%, calc(-50% - 0.25rem)); } .hamburger::after { -webkit-transform: translate(-50%, calc(-50% + 0.25rem)); -ms-transform: translate(-50%, calc(-50% + 0.25rem)); transform: translate(-50%, calc(-50% + 0.25rem)); } } .menu-toggle[aria-expanded="true"]:hover { .hamburger::before { -webkit-transform: translate(-50%, -50%) rotate(35deg); -ms-transform: translate(-50%, -50%) rotate(35deg); transform: translate(-50%, -50%) rotate(35deg); } .hamburger::after { -webkit-transform: translate(-50%, -50%) rotate(-35deg); -ms-transform: translate(-50%, -50%) rotate(-35deg); transform: translate(-50%, -50%) rotate(-35deg); } } /* Panel */ /** * Toggle menu ================== */ .toggle-panel { --delay: 0.4s; --duration: 0.2s; position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 4; pointer-events: none; visibility: hidden; color: var(--color-text-inverted); } @media only screen and (min-width: 650px) { .toggle-panel { position: absolute; top: 0; max-width: 700px; height: 100vh; width: 75%; } } .toggle-panel[aria-hidden="false"] { pointer-events: auto; visibility: visible; } .toggle-panel::before { content: ""; width: 100vw; height: calc(var(--vh, 1vh) * 100); background: rgba(255, 255, 255, 0.5); position: fixed; top: 0; left: 0; opacity: 0; -webkit-transition: 0.5s calc(0.7s + var(--delay)) opacity; -o-transition: 0.5s calc(0.7s + var(--delay)) opacity; transition: 0.5s calc(0.7s + var(--delay)) opacity; } .toggle-panel[aria-hidden="false"]::before { opacity: 1; -webkit-transition: 0.5s opacity; -o-transition: 0.5s opacity; transition: 0.5s opacity; pointer-events: none; } .toggle-panel__wrapper { position: relative; height: 100%; width: 100%; margin: 0 auto; padding: 50px 60px 30px; padding: 7rem 3rem 3rem; /* color: var(--color-blue-dark); */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; background-color: var(--bg-cream); inset: 0 -100% 0 100%; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0; -webkit-transform: transform 0.3s ease, opacity 0.2s ease; -ms-transform: transform 0.3s ease, opacity 0.2s ease; transform: transform 0.3s ease, opacity 0.2s ease; } .toggle-panel[aria-hidden="false"] .toggle-panel__wrapper { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity: 1; -webkit-transition: opacity 0ms, -webkit-transform 0.3s ease; transition: opacity 0ms, -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease, opacity 0ms; transition: transform 0.3s ease, opacity 0ms; transition: transform 0.3s ease, opacity 0ms, -webkit-transform 0.3s ease; } .toggle-panel__nav { height: 100%; z-index: 2; overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ margin-block: var(--page-gutter); } /* scrollbar */ .toggle-panel__nav::-webkit-scrollbar { display: none; } .toggle-panel__heading { color: var(--color-blue-grey); } /* animation */ .toggle-panel [data-animation="fadeIn"] { opacity: 0; } .toggle-panel[aria-hidden="false"] [data-animation="fadeIn"] { opacity: 1 !important; -webkit-transition: opacityvar(--duration) cubic-bezier(0.44, 0, 0, 1) var(--delay); -o-transition: opacity var(--duration) cubic-bezier(0.44, 0, 0, 1) var(--delay); -webkit-transition: opacity var(--duration) cubic-bezier(0.44, 0, 0, 1) var(--delay); -o-transition: opacity var(--duration) cubic-bezier(0.44, 0, 0, 1) var(--delay); transition: opacity var(--duration) cubic-bezier(0.44, 0, 0, 1) var(--delay); } .toggle-menu:not(.toggle-menu--inline) > .toggle-menu__item { margin-bottom: 1em; /*padding-right: 30px;*/ font-size: 1.5625rem; /* 25px */ font-weight: 700; } .toggle-menu__link { color: currentColor; } .toggle-nav__link:not([aria-expanded="true"]):where(:hover, :focus) .toggle-nav__label{ --underline-thickness: 0.5em; --underline-offset: calc(-1 * var(--underline-thickness) + 0.25rem); text-decoration: underline; -webkit-text-decoration-color: var(--text-link); text-decoration-color: var(--text-link); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .sub-menu :where(.toggle-nav__link) { display: inline-block; padding: 0; color: color-mix(in lab, currentColor, #fff 25%); } .toggle-nav__item { margin-bottom: 0.5em; } /* .toggle-nav__label { text-decoration: underline; text-decoration-color: rgb(255, 255, 255, 0); text-decoration-thickness: 0.15em; text-underline-offset: 0.1em; transition: text-decoration-color 300ms, text-underline-offset 300ms; } .toggle-nav__link:hover .toggle-nav__label { text-decoration-color: var(--color-text-link); text-underline-offset: 0.3em; } */ :where(.toggle-menu:not(.toggle-menu--inline)) .toggle-menu__link { display: block; width: 100%; } .menu-item-has-children > .toggle-menu__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0.5em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: color-mix(in lab, currentColor, #fff 25%); } .toggle-menu__link .dropdown-arrow { margin-left: auto; } .toggle-menu__link[aria-expanded="true"] .dropdown-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /** * Toggle Submenu ================== */ .toggle-menu { font-size: 1.125rem; } .toggle-menu .sub-menu { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 0.5rem 1rem; -webkit-padding-start: 2.5rem; padding-inline-start: 2.5rem; /* hidden */ visibility: hidden; opacity: 0; height: 0; font-size: 0.875em; color: var(--color-text-link); -webkit-transition: visibility 0s, opacity 0.15s, height 0.15s ease-in-out; -o-transition: visibility 0s, opacity 0.15s, height 0.15s ease-in-out; transition: visibility 0s, opacity 0.15s, height 0.15s ease-in-out; } .toggle-menu .sub-menu[aria-hidden="false"] { margin: 1em 0 2em; visibility: visible; opacity: 1; height: auto; /* padding-top: 1em; */ } @media only screen and (min-width: 650px) { .toggle-menu .sub-menu[aria-hidden="false"] { padding-left: 30px; } } .sub-menu .toggle-menu__item { font-size: 1rem; font-weight: 600; } .toggle-menu .sub-menu .menu-item { margin-bottom: 0.5em; } .toggle-menu .sub-menu .toggle-menu__item:last-child { font-weight: 700; } /* scroll more */ .toggle-panel__more { position: relative; font-size: 0.675rem; opacity: 0.5; pointer-events: none; &.hidden { display: none; } &:not(.hidden) { display: block; background-color: blue; } .more { position: absolute; left: 50%; bottom: calc(0.5 * var(--page-gutter)); z-index: 1; translate: -50% 50%; animation: bounce 2s ease infinite; } .icon { width: 1em; margin-top: 0.25rem; margin-inline: auto; transform: rotate(90deg); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} } /** * Sections * =============== */ .hero { display: -ms-grid; display: grid; position: relative; z-index: 10; isolation: isolate; color: var(--text-inverted); } .hero--no-img { -webkit-padding-before: var(--section-padding); padding-block-start: var(--section-padding); background-color: transparent; color: var(--text-primary); } .hero--has-img { .hero__inner { /* grid-area: 1/1; */ z-index: 1; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: horizontal; flex-direction: horizontal; gap: var(--page-gutter); padding: clamp(1rem, -0.357rem + 2.827vw, 3rem); -webkit-padding-after: 5rem; padding-block-end: 5rem; } .hero__content { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0 50%; min-width: min(40ch, 100%); -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; } .hero__title { position: relative; inline-size: -webkit-fit-content; inline-size: -moz-fit-content; inline-size: fit-content; padding-left: clamp(1rem, -0.357rem + 2.827vw, 3rem); margin-bottom: 1rem; padding-bottom: 1rem; left: calc(clamp(1rem, -0.357rem + 2.827vw, 3rem) * -1); } .hero__border { position: absolute; z-index: 2; left: -1px; bottom: -1px; width: 102%; } .hero__credit { position: absolute; z-index: 1; bottom: calc(1rem + (100vw * (44 / 1920))); left: clamp(1rem, -0.357rem + 2.827vw, 3rem); color: currentColor; } } @media (max-width: 999px) { .hero { inline-size: 100%; } .hero__inner { padding: var(--padding-inline) !important; background-color: var(--bg-dark); color: var(--text-inverted); } .taxonomy .hero--no-img { padding-block-end: 0 !important; } } @media (min-width: 1000px) { .hero--has-img { .hero__inner { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1/1; } .hero__credit { -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; text-orientation: mixed; position: absolute; bottom: calc(var(--lead-offset) + 1rem); left: -1rem; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); color: color-mix(in lab, var(--text-primary), #fff 40%); } } } .hero__title { font-size: clamp(3rem, 5vw, 4.25rem); } .hero__title:not(:only-child) { border-bottom: 2px dashed currentColor; } .hero__title::after { } .hero__caption { font-weight: 600; } .hero__media { position: relative; isolation: isolate; -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1/1; min-block-size: clamp( 400px, calc(56.25vw - var(--padding-inline) * 2), 80vh ); /* 16:9 */ margin: 0 !important; } .hero__media::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 80%; inline-size: 100%; z-index: 1; background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 8)) ); background: -o-linear-gradient( top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 8) 100% ); background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 8) 100% ); } .page-id-482 .hero__media::before { content: none; } .hero__media > img { position: absolute; inset: 0; z-index: -1; block-size: 100%; inline-size: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; border-radius: var(--border-radius); } .hero--offset + * > *:first-child { -webkit-margin-before: calc(-1 * var(--lead-offset)); margin-block-start: calc(-1 * var(--lead-offset)); padding-block-start: calc(var(--page-gutter) + var(--lead-offset)); } /* Map */ .hero--map { container-type: inline-size; .hero__media { min-block-size: clamp(400px, 45vw, 70vh); @supports (block-size: clamp(400px, 45cqi, 70vh)) { min-block-size: clamp(400px, 45cqi, 70vh); } &::before { content: none; } } } .taxonomy .hero--no-img { padding-block-end: var(--page-gutter); .hero__title { inline-size: fit-content; padding-block-end: 1rem; } } .map-canvas { block-size: 100%; inline-size: 100%; } /** * SVG * =============== */ /* borders */ section:has(+ .has-border-svg) { /* background-color: yellow; */ } .has-border-svg { position: relative; -webkit-padding-after: 0; padding-block-end: 0; } .has-border-svg--curve > *:last-child { -webkit-padding-after: 0 !important; padding-block-end: 0 !important; } .has-border-svg--curve + * { /* padding-block-start: calc(var(--section-padding) + (100vw * (206.5 / 1920))) !important; */ -webkit-padding-before: 0; padding-block-start: 0; } .has-border-svg--texture + * { /* padding-block-start: calc(var(--section-padding) + (100vw * (44 / 1920))) !important; */ } .border-svg { position: absolute; left: 0; z-index: 1; width: 100%; } .border-svg path { fill: var(--bg-color); } .border-svg svg path { fill: var(--bg-color) !important; } .border--top { bottom: calc(100% - 1px); } .border--right { left: calc(100% - 1px); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .border--left { top: 0; left: unset; right: calc(100% - 1px); width: auto; height: 100%; } .border--bottom { top: calc(100% - 1px); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .border--bottom-inset { bottom: -1px; } .border-svg--texture { aspect-ratio: 1920 / 44; } .border-svg--texture-vertical { aspect-ratio: 44 / 1920; z-index: 0; } .border-svg--curve { aspect-ratio: 1920 / 44; } /** * Banner * =============== */ .banner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--bg-accent); width: 100%; height: clamp(20px, 10vw, 140px); } .banner svg { display: block; width: auto; height: 101%; } /** * Buttons * =============== */ .btn, .button { display: inline-block; -webkit-margin-before: 1em; margin-block-start: 1em; padding: 0.875em 1.375em; font-size: 0.875em; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: var(--font-body); line-height: 1; font-weight: 600; text-decoration: none; text-align: center; border-radius: 100rem; background-color: var(--_btn-color, var(--bg-interactive)); color: var(--text-primary); -webkit-transition: background-color 200ms ease-out; -o-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out; } .btn--lrg { font-size: 1.125em; -webkit-margin-before: 1.5em; margin-block-start: 1.5em; } .btn--block { display: block; width: 100%; } .btn:hover { cursor: pointer; } .btn:where(:hover, :focus) { background-color: color-mix( in lab, var(--_btn-color, var(--bg-interactive)), white 20% ); } .btn:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; } .bg--dark .btn:focus-visible { outline-color: var(--text-inverted); } :where(.bg--light, .bg--gradient) .btn:focus-visible { outline-color: var(--text-primary); } .btn--video { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.75em 1.375em; margin-left: auto; margin-top: auto; font-size: 1.0125rem; letter-spacing: 0.0125em; font-family: var(--font-display); font-weight: 400; .btn__icon { height: 1.5rem; width: 1.5rem; padding: 0.4rem; border-radius: 100rem; background-color: currentColor; } svg path { fill: var(--bg-interactive); } } .btn__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 0.5em; } .btn__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; inline-size: 1em; block-size: 1em; } .btn__icon svg { fill: currentColor; } .btn__icon path { will-change: transform, opacity; } .btn__icon .svg-arrow__point { -webkit-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); -webkit-transition: -webkit-transform 100ms linear; transition: -webkit-transform 100ms linear; -o-transition: transform 100ms linear; transition: transform 100ms linear; transition: transform 100ms linear, -webkit-transform 100ms linear; } .btn:where(:hover, :focus) .svg-arrow__point { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .btn__icon .svg-arrow__tail { opacity: 0; -webkit-transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } .btn:where(:hover, :focus) .svg-arrow__tail { opacity: 1; } .btn--accent, .button--accent { background-color: var(--color-button-accent); } .btn--inverted, .button--inverted { background-color: var(--color-button-inverted); } /** * Card * =============== */ .card { --_bg-color: var(--bg-color, var(--bg-cream)); --_text-color: var(--text-color, currentColor); --_arrow-color: var(--arrow-color, var(--text-link)); --_arrow-bg-color: var(--arrow-bg-color, transparent); --_aspect-ratio: var(--aspect-ratio, unset); --_corner-radius: var(--corner-radius, var(--border-radius)); --_heading-size: var(--heading-size, 3rem); border-radius: var(--_corner-radius); aspect-ratio: var(--_aspect-ratio); container-type: inline-size; color: var(--_text-color); } .card__inner { display: -ms-grid; display: grid; position: relative; isolation: isolate; min-height: 100%; overflow: clip; border-radius: var(--_corner-radius); background-color: var(--_bg-color); } .card__media { position: relative; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; isolation: isolate; } /* .card__media:empty, .card__media:not(:has(img)) { display: none; } */ .card__media:empty { display: none; } .card__media :where(img, video) { position: absolute; inset: 0; z-index: 0; block-size: 100%; inline-size: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } .card__media .placeholder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-35%, -35%); -ms-transform: translate(-35%, -35%); transform: translate(-35%, -35%); z-index: 0; height: auto; width: max(30%, 2rem); opacity: 0.5; /* background-color: hsl(from var(--bg-cream) h s calc(l - 20)); */ & path { fill: var(--bg-accent); } &::before { content: ''; height: 120%; width: 120%; border-radius: 100%; background-color: var(--bg-interactive); position: absolute; bottom: 10%; right: 10%; z-index: -1; } } .card__border { display: none; } .card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .card__heading { font-size: var(--_heading-size); } .card__meta { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; font-size: 0.75em; font-weight: 600; margin-bottom: 0.5em; text-transform: uppercase; text-wrap: balance; color: var(--text-link); } .card__excerpt { /* display: none; */ font-size: 0.875rem; -webkit-margin-before: 1rem; margin-block-start: 1rem; } .card__arrow { display: -ms-grid; display: grid; place-items: center; aspect-ratio: 1/1; background-color: var(--_arrow-bg-color); max-width: 2.5rem; max-width: clamp(20px, 15cqi, 40px); color: var(--_arrow-color); border-radius: var(--border-radius); } .card a::after { content: ""; position: absolute; inset: 0; z-index: 100; } .card:has(a:focus-visible) { outline: 1px dashed var(--section-text-color, currentColor); outline-offset: 0.25rem; } .card a { outline: none; } .card__arrow .icon { fill: currentColor; max-width: 50%; } /* Card decorators */ .card--dark { --bg-color: var(--bg-accent); --text-color: var(--text-inverted); } .card--light { --bg-color: var(--bg-light); --text-color: var(--text-primary); } .card--horizontal { --heading-size: clamp(1.5rem, 5cqi, 2.5rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; .card__inner { inline-size: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .card__media { /* aspect-ratio: 4/3; */ -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; background-color: var(--bg-cream); } .card__content { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } .card__excerpt { min-height: 100px; } .card__arrow { position: absolute; right: 0; bottom: 0; } p { font-size: 0.875rem; } } .card--icon { --aspect-ratio: 1/1; } :where(.card-aspect--tall) .card { --aspect-ratio: 13/18; } .card--lake-river, .card--park-trail, .card--attraction { --arrow-color: var(--text-link); --arrow-bg-color: transparent; --text-color: var(--text-inverted); --aspect-ratio: 1; --heading-size: clamp(2rem, 7cqi, 3rem); --corner-radius: calc(4 * var(--border-radius)); border-radius: var(--_corner-radius); } :where(.card--lake-river, .card--park-trail, .card--attraction) .card__content { padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } :where( .card--lake-river, .card--park-trail, .card--attraction, .card--community ) .card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; -ms-grid-row-align: end; align-self: end; } :where( .card--lake-river, .card--park-trail, .card--attraction, .card--community ) .card__media { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; z-index: -1; overflow: clip; } :where( .card--lake-river, .card--park-trail, .card--attraction, .card--community ) .card__arrow { max-inline-size: -webkit-fit-content; max-inline-size: -moz-fit-content; max-inline-size: fit-content; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; margin-left: auto; max-width: 2.5rem; max-width: clamp(20px, 15cqi, 40px); -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } :where( .card--lake-river, .card--park-trail, .card--attraction, .card--community ).card--has-image .card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: -webkit-gradient( linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)) ); background: -o-linear-gradient( bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100% ); background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100% ); } /* Community */ .card--community { --arrow-color: var(--text-primary); --arrow-bg-color: var(--bg-interactive); --text-color: var(--text-inverted); --aspect-ratio: 13/18; --corner-radius: var(--border-radius); border-radius: var(--corner-radius); /* calculate when the grid shifts to 1 column */ @container (width < calc(220px * 2 + clamp(2rem, -0.25rem + 4vw, 3.75rem) * 0.5)) { --aspect-ratio: 4/3; } } :where(.card--community) .card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } /* Recreation */ .card--outdoor-recreation { --arrow-color: var(--text-link); --arrow-bg-color: transparent; --text-color: var(--text-primary); --aspect-ratio: 1; --corner-radius: calc(6 * var(--border-radius)); --heading-size: clamp(2rem, 7cqi, 3rem); aspect-ratio: unset; height: 100%; } :where(.card--outdoor-recreation) .card__inner { /* display: grid; grid-template-columns: 1fr 8ch; grid-template-columns: 1fr 25cqi; */ height: 100%; min-height: calc(100cqi / (var(--aspect-ratio))); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } :where(.card--outdoor-recreation) .card__content { -webkit-box-flex: 1; -ms-flex: 1 1 75%; flex: 1 1 75%; /* min-width: min(100%, 18ch); */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; } :where(.card--outdoor-recreation) .card__meta { display: none; } :where(.card--outdoor-recreation) .card__icon { position: relative; isolation: isolate; z-index: -1; /* opacity: 0.8; */ -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; margin-left: auto; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; max-width: 25cqi; min-width: 80px; &::before { content: ''; height: 120%; width: 120%; border-radius: 100%; background-color: var(--bg-interactive); position: absolute; bottom: 10%; right: 10%; z-index: -1; } } :where(.card--outdoor-recreation) .placeholder { display: none; } /* Post */ .card--post { --text-color: var(--text-inverted); --aspect-ratio: 16/9; --heading-size: clamp(2rem, 7cqi, 3rem); } :where(.card--post) .card__content { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } :where(.card--post) .card__media { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; z-index: -1; overflow: clip; } :where(.card--post) .card__media:has(img)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: -webkit-gradient( linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(50%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)) ); background: -o-linear-gradient( bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100% ); background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100% ); } /* Search */ .card:where(.card--search) { --heading-size: clamp(1.5rem, 7cqi, 2rem); .card__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } .card__excerpt { display: block; font-size: 0.875rem; } .card__media { background-color: hsl(from var(--bg-cream) h s calc(l - 10)); } } /* Pill */ .card:where(.card--pill) { --heading-size: clamp(1.25rem, 5cqi, 1.5rem); height: 100%; border: 1px solid var(--bg-dark); border: 1px solid color-mix(in lab, var(--bg-dark), #fff 70%); border-radius: var(--border-radius); .card__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; padding: clamp(0.25rem, 2.5cqi, 0.75rem); background-color: var(--bg-light); } .card__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .card__media { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; aspect-ratio: 1/1; border-radius: var(--border-radius); overflow: clip; max-inline-size: 100px; max-inline-size: clamp(60px, 18cqi, 80px); background-color: var(--bg-cream); } .card__link { /* font-weight: 600; */ } .card__meta { } .card__heading { -webkit-margin-after: 0.25rem; margin-block-end: 0.25rem; } .card__terms { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5em 1em; font-size: 0.75rem; font-weight: 600; color: color-mix(in lab, currentColor, #fff 50%); } .card__terms--icons { margin-block-start: 0.5rem; } .card__term--icon { position: relative; display: block; width: 1.25rem; isolation: isolate; &::before { content: ''; display: inline-block; width: 100%; aspect-ratio: 1/1; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--bg-interactive); opacity: 0.5; border-radius: 100%; } } .date-string { font-size: 0.75rem; font-weight: 600; color: color-mix(in lab, currentColor, #fff 50%); } } /* Event */ .card--event { --text-color: var(--section-text-color); --aspect-ratio: 1; --heading-size: clamp(1.5rem, 7cqi, 2rem); --corner-radius: calc(4 * var(--border-radius)); height: 100%; aspect-ratio: unset; border: 2px solid currentColor; .card__content { padding: clamp(1rem, 10%, 2.5rem); padding: clamp(1rem, 7cqi, 2.5rem); } .card__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .card__media { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; min-width: clamp(5rem, 28cqi, 8.5rem); background-color: var(--bg-cream); } .card__heading { font-family: var(--font-body); font-weight: 600; } .meta-location { color: var(--text-link); } .date-time__date, .date-time__time { color: color-mix(in lab, currentColor, var(--_font-color-mixin) 20%); display: block; font-style: italic; } .date-time__date { font-weight: 600; } .date-time__recurrence { font-size: 0.875em; } /* calculate when goes to 1 row */ @media (min-width: calc((clamp(2rem, -0.25rem + 4vw, 3.75rem) * 2) + (220px * 2) + (clamp(2rem, -0.25rem + 4vw, 3.75rem) * 0.5))) { .card__inner { min-height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .card__media { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; aspect-ratio: 16 / 9; } .card__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } } /* Grid */ :where(.section--card_grid) .card { border: 4px solid var(--bg-color); background-color: var(--bg-color); border-radius: var(--corner-radius); } /* No Image */ .card--no-image { --_bg-color: var(--bg-cream); --_text-color: var(--text-primary); /* --_arrow-color: var(--text-link); */ } /** * Callout * =============== */ .callout .grid__col { padding: clamp(2.5rem, 20vw, 7.5rem) clamp(2.5rem, 10vw, 4.5rem); } .callout__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; inline-size: min(100%, 800px); margin-inline: auto; } /* rearrange order of elements */ .callout__content .intro__header { -webkit-box-ordinal-group: -1; -ms-flex-order: -2; order: -2; } .callout__content .stats { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .callout p { color: currentColor; } /** * Slider * =============== */ .slider { --slider-side-padding: max( ((100% - var(--content-max-width))/2), var(--padding-inline) ); --slider-column-gap: var(--half-gutter); --slide-max-width: 400px; --slide-min-width: 250px; --slider-btn-size: 2.5rem; overflow-x: clip; } .slider__scroll-container { overflow-x: auto; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: 0.5rem var(--page-gutter); /* scrollbar */ scrollbar-width: thin; scrollbar-color: var(--bg-accent) var(--bg-cream); } .bg--light .slider__scroll-container { scrollbar-color: var(--bg-dark) var(--bg-cream); } @supports selector(::-webkit-scrollbar) { .slider__scroll-container { &::-webkit-scrollbar { width: 0.5rem; } &::-webkit-scrollbar-thumb { border-radius: 100rem; } &::-webkit-scrollbar-track { border-radius: 100rem; } } } /* @supports not selector(::-webkit-scrollbar) { .slider__scroll-container { scrollbar-width: thin; scrollbar-color: var(--bg-dark) var(--bg-light); } .bg--light .slider__scroll-container { scrollbar-color: var(--bg-dark) var(--bg-cream); } } @supports selector(::-webkit-scrollbar) { .slider__scroll-container { &::-webkit-scrollbar { display: block; width: 0.5rem; border: 1px solid var(--scrollbar-color); border-radius: 100rem; } &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-color); border-radius: 100rem; } &::-webkit-scrollbar-track { background-color: var(--bg-light); border-radius: 100rem; } } .bg--light .slider__scroll-container { &::-webkit-scrollbar-thumb { background-color: var(--bg-dark); } &::-webkit-scrollbar-track { background-color: var(--bg-cream); } } } */ .slider__wrapper { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .slider__track { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--slider-column-gap); /* @media (hover) and (prefers-reduced-motion: no-preference) { & > .slide { transition: opacity .3s ease; } &:has(:hover) > .slide:not(:hover) { opacity: .75; } } */ } .slider__track > :where(.slide) { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; min-width: clamp(var(--slide-min-width), 24vw, var(--slide-max-width)); scroll-snap-align: start; scroll-snap-stop: always; /* If the user does not have a reduced motion preference and the browser supports scroll-driven animations, set the animation properties */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* scale up animation */ -webkit-animation: slide--inview linear both; animation: slide--inview linear both; /* when a picture crosses a horizontal scrollport */ animation-timeline: view(x); /* animate as element is 10% in, until it reaches 40% */ animation-range: 0% 20%; } } } @-webkit-keyframes slide--inview { from { opacity: 0.4; } } @keyframes slide--inview { from { opacity: 0.4; } } @media (min-width: 800px) { .staggered { position: relative; top: -3rem; /* display: flex; align-items: start; gap: 10px; width: 100%; min-width: min(100%, 800px); */ z-index: 2; } } :where(.staggered) .slide { border: 8px solid var(--bg-color); background-color: var(--bg-color); border-radius: var(--border-radius); } :where(.staggered) .slide:nth-child(odd) { -webkit-margin-before: 2rem; margin-block-start: 2rem; } .slider__buttons [disabled] { opacity: 0.5; cursor: auto; } .slider__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; padding-block: 1rem; .slider__button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--slider-btn-size); height: var(--slider-btn-size); padding: clamp(0.25rem, 1.5vw, 0.5rem); border-radius: var(--border-radius); background-color: var(--bg-dark); color: var(--text-inverted); &[data-slider-prev] { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } } .bg--dark .slider__button { border: 2px solid var(--bg-light); } .slider:where(.slider--full-width) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; .slider__scroll-container { scroll-padding: var(--slider-side-padding); } .slider__wrapper { padding-inline: var(--slider-side-padding); } .slider__buttons { margin-inline: auto var(--slider-side-padding); } } /** * Locator * =============== */ .section--locator { position: relative; z-index: 2; @media (min-width: 1200px) { padding-block-end: 0px; } } /* intro */ .locator__state { display: block; &.hidden { display: none; opacity: 0; } } .svg-wi__county { fill: var(--bg-accent); stroke: var(--bg-color); stroke-width: 0.05rem; } .svg-wi--dodge { fill: var(--bg-interactive); } .locator__county { visibility: hidden; opacity: 0; height: 0; .active & { visibility: visible; opacity: 1; height: auto; -webkit-animation: show-locator 0.3s ease; animation: show-locator 0.3s ease; } #state-highways { opacity: 0.3; .state-highway-path { stroke: var(--bg-dark) !important; } } #us-highways { opacity: 0.5; .us-highway-path { stroke: var(--bg-dark) !important; } } } @-webkit-keyframes show-locator { from { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes show-locator { from { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } /* general */ .locator-super { -webkit-margin-after: 3rem; margin-block-end: 3rem; border-bottom: 2px dashed currentColor; font-family: var(--font-editorial); text-transform: uppercase; color: var(--c-text-dark); } .locator { /* inline-size: min(100%, 34.375rem); */ margin-inline: auto; .svg-wi { cursor: none; } &.active .locator__inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 1rem; @media(min-width: 800px) { -ms-grid-columns: clamp(20rem, 40vw, 35rem) 1rem 1fr; grid-template-columns: clamp(20rem, 40vw, 35rem) 1fr; } } .locator__communities { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; @media(min-width: 800px) { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } /* .locator__media { max-width: 80vh; margin-inline: auto; } */ .locator__community { visibility: hidden; opacity: 0; height: 0; &.active { visibility: visible; opacity: 1; height: auto; -webkit-animation: show-locator 0.3s linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%, 1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1); animation: show-locator 0.3s linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%, 1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1); } } .locator__state { margin-inline: auto; max-width: 65vw; margin-inline: auto; @media(min-width: 800px) { max-width: min(70vh, 600px); } } .locator__county { position: relative; max-width: 65vw; margin-inline: auto; @media(min-width: 800px) { max-width: min(80vh, 800px); } } .pagination { display: none; -webkit-margin-start: auto; margin-inline-start: auto; .active & { display: -webkit-box; display: -ms-flexbox; display: flex; } } } .markers { .marker { --_percentage-from-top: calc(var(--vertical-position) / 593.0835 * 100%); --_percentage-from-left: calc(var(--horizontal-position) / 615.5071 * 100%); display: none; width: 2rem; position: absolute; top: var(--_percentage-from-top, 0); left: var(--_percentage-from-left, 0); translate: -50% -100%; .marker__icon{ -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.78, 0, 0.22, 1); transition: -webkit-transform 0.25s cubic-bezier(0.78, 0, 0.22, 1); -o-transition: transform 0.25s cubic-bezier(0.78, 0, 0.22, 1); transition: transform 0.25s cubic-bezier(0.78, 0, 0.22, 1); transition: transform 0.25s cubic-bezier(0.78, 0, 0.22, 1), -webkit-transform 0.25s cubic-bezier(0.78, 0, 0.22, 1); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; } .marker__tooltip { display: none; position: absolute; top: 100%; left: 50%; translate: -50%; width: 20ch; pointer-events: none; text-align: center; font-weight: 600; } &:hover { cursor: pointer; .marker__icon{ -webkit-filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.6)); } .marker__tooltip { display: block; text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.6); } } &.active { .marker__icon{ -webkit-filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.6)); -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .marker__tooltip { display: block; text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.6); } } } [data-marker-id="lomira"] { display: block; --horizontal-position: 536.6816; --vertical-position: 109.0554; } [data-marker-id="watertown"] { display: block; --horizontal-position: 283.744; --vertical-position: 583.1057; } [data-marker-id="hartford"] { display: block; --horizontal-position: 590.5071; --vertical-position: 436.1226; } [data-marker-id="hustisford"] { display: block; --horizontal-position: 396.7465; --vertical-position: 405.5339; } [data-marker-id="mayville"] { display: block; --horizontal-position: 441.9721; --vertical-position: 218.8555; } [data-marker-id="horicon"] { display: block; --horizontal-position: 369.6999; --vertical-position: 275.6092; } [data-marker-id="juneau"] { display: block; --horizontal-position: 304.5218; --vertical-position: 330.2433; } [data-marker-id="columbus"] { display: block; --horizontal-position: 25; --vertical-position: 408.723; } [data-marker-id="beaver-dam"] { display: block; --horizontal-position: 189.4969; --vertical-position: 264.1981; } [data-marker-id="randolph"] { display: block; --horizontal-position: 42.3039; --vertical-position: 167.1002; } [data-marker-id="fox-lake"] { display: block; --horizontal-position: 123.8873; --vertical-position: 139.6441; } [data-marker-id="waupun"] { display: block; --horizontal-position: 277.2996; --vertical-position: 61.1773; } } /* buttons */ .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; padding-block: 1rem; .pagination__button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 2.5rem; height: 2.5rem; padding: clamp(0.25rem, 1.5vw, 0.5rem); border-radius: var(--border-radius); background-color: transparent; color: var(--text-inverted); border: 2px solid var(--bg-light); &[data-pagination-prev] { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } } /* cursor */ .custom-cursor { display: none; opacity: 0; /*The position is fixed so it can stay on screen even when scrolling*/ position: fixed; z-index: 2; aspect-ratio: 1 / 1; border-radius: 50%; background-color: hsl(from var(--bg-light) h s l / 0.6); max-width: 200px; color: var(--text-primary); text-align: center; /*To put it on the center of the cursor*/ -webkit-transform: translate(-50%, -50%) scale(0.25); -ms-transform: translate(-50%, -50%) scale(0.25); transform: translate(-50%, -50%) scale(0.25); -webkit-transition: opacity 0.3s ease, display 0.3s ease allow-discrete, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, display 0.3s ease allow-discrete, -webkit-transform 0.3s ease; -o-transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease allow-discrete; transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease allow-discrete; transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease allow-discrete, -webkit-transform 0.3s ease; /* So the JS can work properly*/ pointer-events: none; will-change: auto; } .custom-cursor__inner { display: -ms-grid; display: grid; place-content: center; padding: clamp(1rem, 1vi, 2.5rem); } .custom-cursor__icon { max-width: 17%; margin: 0 auto; } .custom-cursor--active { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); display: -ms-grid; display: grid; place-content: center; } @starting-style { /* <-- and this line */ .custom-cursor--active { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.25); -ms-transform: translate(-50%, -50%) scale(0.25); transform: translate(-50%, -50%) scale(0.25); } } .custom-cursor__text { margin-bottom: 0.5em; line-height: 1.2; } /** * Full width split * =============== */ .full-width-split-screen { inline-size: 100%; /* isolation: isolate; */ > *:not(.overflow-split) { padding-inline: var(--page-gutter); } .slider__buttons { padding-inline: var(--padding-inline); } } @media (min-width: 800px) { .full-width-split-screen { display: -ms-grid; display: grid; position: relative; -ms-grid-columns: minmax(var(--page-gutter), 1fr) minmax(0, calc(var(--content-max-width) * 0.4)) minmax(0, calc(var(--content-max-width) * 0.6)) minmax(var(--page-gutter), 1fr); grid-template-columns: minmax(var(--page-gutter), 1fr) minmax(0, calc(var(--content-max-width) * 0.4)) minmax(0, calc(var(--content-max-width) * 0.6)) minmax(var(--page-gutter), 1fr); .slider__buttons { -webkit-padding-start: 0; padding-inline-start: 0; } } .overflow-split:first-child { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / 3; } .overflow-split:last-child { grid-column: 3 / -1; } .full-width-split-screen > :not(.overflow-split) { display: -ms-grid; display: grid; -ms-flex-line-pack: center; align-content: center; justify-items: start; } .full-width-split-screen > :not(.overflow-split):first-child { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; } .full-width-split-screen > :not(.overflow-split):last-child { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; } .full-width-split-screen > :not(.overflow-split)::before { content: ""; position: absolute; inset: 0; /* background-color: lime; */ } .full-width-split-screen > :not(.overflow-split):first-child::before { -ms-grid-column: 4; -ms-grid-column-span: 1; grid-column: 4 / 5; } .full-width-split-screen > :not(.overflow-split):last-child::before { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; } } /** * Single PAge * =============== */ .hero:where(.hero--has-img) + .main-content .hentry { -webkit-padding-before: var(--section-padding); padding-block-start: var(--section-padding); } :where(.page) { .entry-content { max-width: 65ch; margin-inline: auto; } .hentry { -webkit-padding-before: var(--page-gutter); padding-block-start: var(--page-gutter); background-color: var(--bg-dark); color: var(--text-inverted); p { margin-inline: auto; } } .entry-content { /* & > * { max-width: 65ch; margin-inline: auto; } */ & :where(h1, h2, h3, h4, h5, h6) { margin-block-start: 1.5em; } } article.type-page:not(:has( + *)) { padding-bottom: var(--section-padding); background-color: var(--bg-light); color: var(--text-primary); } } /** * Single Article * =============== */ /* General */ .article__wrapper { padding-block: var(--page-gutter) var(--section-padding); } .article__content { -webkit-box-flex: 1; -ms-flex: 1 0 60%; flex: 1 0 60%; } .article__header { -webkit-margin-after: 1.5rem; margin-block-end: 1.5rem; } .article__excerpt { font-family: var(--font-editorial); font-size: 1.125rem; font-weight: 500; } .article__hero { position: relative; margin: unset; margin-block: 1.5rem !important; & img { aspect-ratio: 16 / 9; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; border-radius: var(--border-radius); } .hero__credit { padding-block: 0.5em; color: color-mix(in lab, var(--text-primary), #fff 40%); border-bottom: 1px solid color-mix(in lab, var(--text-primary), #fff 60%); } } .article__video { position: relative; padding-bottom: 56.25%; overflow: clip; max-width: 100%; height: auto; margin-block: 1.5rem; border-radius: var(--border-radius); iframe { position: absolute; inset: 0; width: 100%; height: 100%; } } .article__title { pointer-events: none; } .article__content + * { -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start; -webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; } /* .entry-content { --_font-color-mixin: white; --font-color-mixin: white; font-family: var(--font-editorial); font-size: 1.125rem; p { font-size: 1rem; } } */ .article__sidebar { --grid-layout-gap: 3rem; } .article__sidebar > * + * { /* margin-block-start: 3rem; */ } .article__sidebar:empty { display: none; } /* meta tags */ .taxonomy-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5em; margin-block-end: 0.5rem; } .taxonomy-tags__list { gap: 0.5em; } .taxonomy-tags__item span { padding: 0.125em 0.35em; font-family: var(--font-display); border-radius: var(--border-radius); font-size: 0.875rem; letter-spacing: 0.035em; line-height: 1; color: var(--text-inverted); background-color: var(--bg-dark); } :where(.taxonomy-tags--community) .taxonomy-tags__item a { padding: 0.125em 0.35em; font-family: var(--font-display); border-radius: var(--border-radius); font-size: 0.875rem; letter-spacing: 0.035em; line-height: 1; color: var(--text-primary); background-color: var(--bg-interactive); } .taxonomy-tags--attraction { margin-top: 1rem; a { font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.25em; font-weight: 600; } } /* detail box */ .details { --min-width: 300px; -webkit-box-flex: 1; -ms-flex: 1 1 var(--min-width); flex: 1 1 var(--min-width); display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr)); gap: var(--half-gutter); dt { font-weight: 600; } } .detail-box { /* padding: var(--half-gutter) var(--page-gutter) var(--page-gutter); */ background-color: var(--bg-cream); .detail-box__heading { padding: var(--half-gutter) 0 0.5em; margin-inline: var(--page-gutter); border-bottom: 1px solid currentColor; letter-spacing: 0.035em; text-align: center; } .map { padding-inline: 1rem; } .detail-box__content { padding: 0 var(--page-gutter) var(--page-gutter); } .social { -webkit-margin-before: 1.5rem; margin-block-start: 1.5rem; } a:not([class]) { --underline-thickness: 0.075em; --underline-offset: calc(-1 * var(--underline-thickness) + 0.25rem); display: inline-block; color: currentColor; text-decoration: underline; -webkit-text-decoration-color: var(--text-accent); text-decoration-color: var(--text-accent); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; /* font-weight: 600; */ &:where(:hover, :focus) { --underline-thickness: 0.5em; } } } .related-links { position: relative; } .related-links::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100px; background: linear-gradient(180deg,rgba(242, 243, 244, 0) 0%, rgba(242, 243, 244, 0.8) 50%, rgba(242, 243, 244, 1) 70%); pointer-events: none; } .related-links .detail-box__content { max-block-size: 400px; overflow-y: auto; scrollbar-color: var(--bg-dark) transparent; } /** * Enrty Content * =============== */ .entry-content ul { margin-inline-start: 1.5em; margin-block-end: 1em; color: color-mix(in lab, currentColor, var(--_font-color-mixin) 20%); } .entry-content :is(h1, h2, h3, h4, h5) { font-family: var(--font-body); font-weight: 700; margin-block-start: 1.5em; } .entry-content h2 { font-size: 2.25rem;; } .entry-content h3 { font-size: 1.875rem;; } .entry-content h4 { font-size: 1.5rem;; } .entry-content p { font-family: var(--font-editorial); } .hentry:has( + .bg--light) { padding-block: var(--section-padding); } /* videos */ iframe[src^="https://www.youtube.com"] { width: 100%; height: auto; margin-block: 1rem; aspect-ratio: 16 / 9; } /** * Single Attraction * =============== */ .type-attraction { .details { dt { font-weight: 600; } .detail-grid__item { flex-direction: column; gap: 0.125em; } } } /** * Single Event * =============== */ .type-event { .article__wrapper { padding-block: 0; } .article__hero { aspect-ratio: 1988/882; min-block-size: 300px; max-inline-size: 100%; margin-bottom: var(--page-gutter); } .article__header { -webkit-margin-before: var(--page-gutter); margin-block-start: var(--page-gutter); } .article__content { -webkit-padding-after: calc(0.5 * var(--section-padding)); padding-block-end: calc(0.5 * var(--section-padding)); } .notification { padding: 0.5rem 1rem; background-color: var(--bg-accent); color: white; border-radius: 12px; -webkit-margin-after: 1rem; margin-block-end: 1rem; font-weight: 600; text-align: center; line-height: 1; } } .detail-grid { --section-text-color: var(--text-primary); margin-block-start: var(--section-padding); dt { font-weight: 600; } .social { -webkit-margin-before: 1.5rem; margin-block-start: 1.5rem; } a:not([class]) { --underline-thickness: 0.075em; --underline-offset: calc(-1 * var(--underline-thickness) + 0.25rem); display: inline-block; color: currentColor; text-decoration: underline; -webkit-text-decoration-color: var(--text-accent); text-decoration-color: var(--text-accent); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; /* font-weight: 600; */ &:where(:hover, :focus) { --underline-thickness: 0.5em; -webkit-text-decoration-color: var(--text-accent); text-decoration-color: var(--text-accent); } } } .detail-grid--full { padding-block: var(--section-padding); margin-block-start: 0; background-color: var(--bg-cream); } .detail-grid__inner { --grid-layout-gap: clamp(3rem, 5vw, 5rem); } .detail-grid__inner:not(:has(>*:nth-child(2))) { display: block; } .detail-grid__group .detail-grid__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 1rem; } .detail-grid__title { padding-bottom: 0.25em; border-bottom: 1px solid currentColor; } .detail-grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; flex-direction: column; gap: 0.125em; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; } .taxonomy:is(:only-child) .detail-grid--cards { padding-block-end: var(--section-padding); } .detail-grid--cards .detail-grid__list { -webkit-margin-before: 2rem; margin-block-start: 2rem; } .detail-grid--cards .detail-grid__list > li + li { /* -webkit-margin-before: 1rem; margin-block-start: 1rem; */ } .event-dates { font-style: italic; } .event__recurrence { -webkit-margin-before: 0.5rem; margin-block-start: 0.5rem; } .directions { -webkit-margin-before: 1em; margin-block-start: 1em; } .single-event .related-articles { -webkit-margin-before: -2rem; margin-block-start: -2rem; } /** * Single Trail * =============== */ .header-details { border-top: 1px solid color-mix(in lab, currentColor, white 80%); margin-block: 1em; -webkit-padding-before: 1em; padding-block-start: 1em; dt { font-weight: 600; } dd { color: color-mix(in lab, currentColor, white 40%); } } .metadata__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; } /** * Single Community * =============== */ .taxonomy__content:not(:only-child) { -webkit-box-flex: 1; -ms-flex: 1 0 60%; flex: 1 0 60%; } .taxonomy__content:only-child { max-width: 60ch; margin-inline: auto; } .community-details { --min-width: 300px; -webkit-box-flex: 1; -ms-flex: 1 1 300px; flex: 1 1 300px; align-self: flex-start; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr)); gap: var(--half-gutter); .community-details__box{ padding: clamp(1rem, 10%, 2.5rem); /* border: 1px solid currentColor; */ border-radius: var(--border-radius); background: oklch(from var(--bg-dark) calc(l + 0.15) c h); color: white; } dt { font-weight: 600; } .social { -webkit-margin-before: 1.5rem; margin-block-start: 1.5rem; } } .community-details__group { margin-bottom: 1.5rem; } .community-details__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0.5em; -webkit-margin-after: 0.5em; margin-block-end: 0.5em; } .community-details__title { color: okclh(from var(--bg-light) calc(l - 0.15) c h); border-bottom: 1px solid currentColor; padding-bottom: 0.5em; } .community__address span { display: block; } /** * Single Outdoor Recreation * =============== */ .taxonomy__icon { inline-size: clamp(100px, 20vw, 200px); min-width: 100px; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; opacity: 0.5; path { fill: var(--bg-light) !important; } } @media(max-width: 800px) { .taxonomy__container { display: block; } .taxonomy__icon { float: left; margin-inline-end: 1rem; opacity: 1; } } .section--card_slider:has(.card--outdoor-recreation) { position: relative; overflow: clip; isolation: isolate; &::before { content: ""; position: absolute; bottom: 0; left: -10%; width: auto; height: 75%; /* Take up 60% of the section's height */ aspect-ratio: 780/974; /* Maintain proportional scaling */ background: url('/wp-content/themes/new-direction/images/svg/plants.svg') no-repeat; background-size: contain; /* Scale the SVG proportionally */ background-position: bottom left; /* Align to the bottom-left corner */ opacity: 0.1; z-index: -1; /* Place it behind the content */ } } /** * Related Articles * =============== */ .related-articles { -webkit-padding-after: var(--page-gutter); padding-block-end: var(--page-gutter); /* background-color: var(--bg-cream); */ .container { position: relative; isolation: isolate; padding-block: var(--half-gutter); &::before { content: ""; background: var(--bg-dark); position: absolute; top: 0; left: calc(-1 * var(--padding-inline)); width: calc(100% + (var(--padding-inline) * 2)); height: clamp(10.5rem, 11vi, 13rem); z-index: -1; border-radius: 4px; } } .related-articles__header { color: var(--text-inverted); } .related-articles__heading { -webkit-padding-after: 0.35em; padding-block-end: 0.35em; border-bottom: 2px solid currentColor; letter-spacing: 0.125em; } } .related-articles__list { --grid-item--min-width: 200px; row-gap: 2rem; } /* card specific */ .related-articles .card { --text-color: var(--text-primary); --aspect-ratio: 4 / 3; --heading-size: clamp(1.25rem, 5cqi, 2rem); aspect-ratio: unset; .card__inner { overflow: unset; background-color: transparent; } .card__content { grid-area: unset; padding: 0; -webkit-padding-before: 1rem; padding-block-start: 1rem; } .card__meta { display: none; } .card__heading { font-family: var(--font-body); font-weight: 600; line-height: 1.2; } a { color: currentColor; -webkit-box-shadow: inset 0 -2px 0 0 currentColor; box-shadow: inset 0 -2px 0 0 currentColor; } &:where(:hover, :focus-within) a { -webkit-box-shadow: inset 0 -0.5em 0 0 var(--text-link); box-shadow: inset 0 -0.5em 0 0 var(--text-link); } .card__media { display: block; grid-area: unset; aspect-ratio: var(--aspect-ratio); overflow: clip; border-radius: var(--border-radius); background-color: hsl(from var(--bg-cream) h s calc(l - 10)); &::before { display: none; } } .card__arrow { display: none; } } /** * Popular articles * =============== */ .popular-articles { position: relative; background-color: var(--c-yellow-100); border-radius: var(--border-radius); padding: var(--half-gutter) var(--page-gutter); .popular-articles__heading { position: absolute; left: 0; top: 0; font-size: 1.5em; translate: 0 -60%; color: var(--text-link); } .popular-articles__item { -webkit-padding-after: 0.75rem; padding-block-end: 0.75rem; /* padding-inline-start: 1.5em; */ -webkit-margin-after: 0.75rem; margin-block-end: 0.75rem; font-size: 0.875rem; line-height: 1; color: color-mix(in lab, currentColor, #fff 20%); &:not(:last-child) { -webkit-border-after: 1px solid var(--c-yellow-300); border-block-end: 1px solid var(--c-yellow-300); } } a { text-decoration: none; font-weight: 600; line-height: 1; } } /** * Featured post grid * =============== */ :where(.featured-grid) .card { --bg-color: var(--bg-cream); --_text-color: var(--text-inverted); & .card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .featured-grid > *:not(:first-child) { aspect-ratio: unset; & .card__arrow { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .featured-grid > *:first-child { -ms-grid-row-span: 2; grid-row: span 2; aspect-ratio: unset; & .card__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; background-color: var(--bg-accent); } & .card__content { grid-area: unset; height: 100%; } & .card__arrow { -webkit-margin-before: auto; margin-block-start: auto; -webkit-margin-start: auto; margin-inline-start: auto; } & .card__media { grid-area: unset; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; aspect-ratio: 3/2; &::before { content: none; } } & .card__border { display: block; position: absolute; z-index: 2; left: -1px; bottom: -1px; width: 102%; path { fill: var(--bg-accent); } } } .featured-grid > .card--no-image:first-child { .card__media { display: none; } } .bg--dark .featured-grid > *:nth-child(2) { --_bg-color: var(--bg-cream); --_text-color: var(--text-primary); } .featured-grid > *:nth-child(2) { --_bg-color: var(--bg-cream); --_text-color: var(--text-primary); .card__media { display: none; } .card__inner { /* background-color: var(--bg-cream); */ /* color: var(--text-inverted); */ } } .featured-grid > .card--no-image:nth-child(3) { --_text-color: var(--text-primary); } .featured-grid > *:only-child { -ms-grid-column-span: 2; grid-column: span 2; } .featured-grid .placeholder { display: none; } /** * Featured post grid * =============== */ .article-grid { --grid-breakpoint: 500px; gap: var(--page-gutter); -webkit-box-align: start; -ms-flex-align: start; align-items: start; /* container-type: inline-size; */ } @media (min-width: 1400px) { .article-grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-breakpoint), 100%), 0.5fr)); } } /* have to use magic numbers add the grid breakpoint width + the equation for the gap */ /* @container (min-width: calc( 500px * 2 + clamp(2rem, -0.25rem + 4vw, 3.75rem))) { .featured-grid { position: sticky; top: 2rem; } } */ @media (min-width: calc( 500px * 2 + clamp(2rem, -0.25rem + 4vw, 3.75rem) * 3)) { .article-grid .featured-grid { position: sticky; top: 2rem; } } .section--related_posts { .intro { -webkit-margin-after: 0; margin-block-end: 0; } } .river { --icon-max-width-pixels: 100px; --icon-max-width-percentage: 25%; --icon-max-width: max( var(--icon-max-width-pixels), var(--icon-max-width-percentage) ); --icon-padding: 1.25rem; .river__item { max-inline-size: 60%; } .river__item:nth-child(odd) { } .river__item:nth-child(even) { margin-left: auto; text-align: right; } } .river-article { position: relative; isolation: isolate; padding: calc(var(--icon-max-width) / 2 + var(--icon-padding)) 0 0 calc(var(--icon-max-width) / 2 + var(--icon-padding)); } .river-article__heading { -webkit-margin-after: 0.25em; margin-block-end: 0.25em; } .river-article__excerpt { font-size: 0.875rem; } .river-article__icon { display: -ms-grid; display: grid; place-content: center; aspect-ratio: 1; position: absolute; top: 0; left: 0; z-index: -1; width: var(--icon-max-width); border-radius: 100rem; color: color-mix(in lab, currentColor, #fff 80%); border: 2px dashed currentColor; .icon { fill: currentColor; width: 30px; } } .river__item:nth-child(even) { .river-article { padding: calc(var(--icon-max-width) / 2 + var(--icon-padding)) calc(var(--icon-max-width) / 2 + var(--icon-padding)) 0 0; } .river-article__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .river-article__icon { left: auto; right: 0; } } .loadmore { -webkit-margin-before: var(--page-gutter); margin-block-start: var(--page-gutter); } /** * Gallery * =============== */ .gallery { -webkit-margin-before: var(--page-gutter); margin-block-start: var(--page-gutter); } .gallery__items { --grid-column-count: 8; --grid-item--min-width: 80px; --grid-layout-gap: 1rem; } .gallery__link { position: relative; isolation: isolate; /* border: 1px solid var(--color-text-accent); */ overflow: clip; border-radius: var(--border-radius); } /** * Stats * =============== */ .stats { --grid-item--min-width: 200px; margin-block: var(--page-gutter); } .stat__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; gap: 1em; font-family: var(--font-display); } .stat__value { display: -ms-grid; display: grid; place-items: center; font-size: 1.5rem; position: relative; } /** .stat__value::before { content: ""; aspect-ratio: 1 / 1; -ms-grid-row-align: stretch; align-self: stretch; border: 1px dashed currentColor; width: 6rem; display: block; border-radius: 100rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } **/ .callout .stat__value { width: 6rem; aspect-ratio: 1; border-radius: 100rem; border: 1px dashed currentColor; } .callout .stat__value span { padding: 0; } .stat__value span { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; padding: 2rem; line-height: 1; /* align-self: center; */ } /* Hero Variation */ .hero .stats { -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; min-inline-size: 30%; display: -ms-inline-grid; display: inline-grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); -ms-grid-row-align: end; align-self: end; gap: 1rem; margin-block: 0; -webkit-margin-start: auto; margin-inline-start: auto; font-family: var(--font-display); @media (min-width: 1000px) { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; grid-template-columns: repeat(auto-fit, minmax(min(100px, 50%), 180px)); } } .hero .stat { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* padding: 1rem; */ justify-items: center; -ms-flex-line-pack: center; align-content: center; place-content: center; position: relative; } .hero .stat::before { content: ""; aspect-ratio: 1 / 1; -ms-grid-row-align: stretch; align-self: stretch; width: 100%; border: 2px dashed currentColor; height: 100%; width: auto; display: block; border-radius: 100rem; /* -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; */ position: absolute; pointer-events: none; } .hero .stat__inner { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: 1 / 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 0; padding: 1.5em; } .hero .stat__value { font-size: 2.5rem; line-height: 1; } .hero .stat__value::before { content: none; } .hero .stat__value span { padding: 0; } /** * Map * =============== */ .map { border-radius: var(--border-radius); -webkit-clip-path: inset(0 0 0 0 round var(--border-radius)); clip-path: inset(0 0 0 0 round var(--border-radius)); overflow: hidden; -webkit-margin-after: 2rem; margin-block-end: 2rem; } .map__canvas { position: relative; aspect-ratio: 4/3; overflow: hidden; } /** * Search Results * =============== */ .search-grid { row-gap: calc(var(--grid-layout-gap) * 2); } /** * Contests * =============== */ .section--visitor_guide { --_font-color-mixin: var(--text-inverted); position: relative; padding-block: var(--page-gutter); overflow: clip; background-color: var(--c-light-blue-100); color: var(--text-primary); isolation: isolate; } .guide-bg { position: absolute; z-index: -1; inset: 0; inline-size: 100%; block-size: 100%; svg { width: 100%; -o-object-fit: cover; object-fit: cover; path { opacity: 8%; } } } .guide { } .guide__inner { --grid-breakpoint: 250px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; @media(max-width: 600px) { -ms-grid-columns: 1fr; grid-template-columns: 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } } .guide__media { padding: clamp(1rem, 5vw, 2rem); -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; img { display: block; inline-size: 100%; max-inline-size: 300px; margin-inline: auto; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } } /** * Contests * =============== */ .section--contest { padding-block: var(--page-gutter) !important; } .contest { --border-height: 3.5rem; --radius: 2rem; --_btn-color: var(--bg-dark); position: relative; padding: clamp(1.5rem, 5vw, 2.5rem); background-color: var(--c-yellow-400); border-radius: var(--border-radius); color: var(--text-primary); .btn { color: var(--text-inverted); } } .contest__left, .contest__right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .dates { /* font-size: 0.875rem; */ font-weight: 600; font-style: italic; } .contest__left { max-inline-size: 350px; } .contest__right { padding-inline: clamp(1.5rem, 5vw, 2.5rem); } .contest__header { margin-bottom: 1.5em; } .contest + section { -webkit-padding-before: calc(var(--section-padding) + 3.5rem); padding-block-start: calc(var(--section-padding) + 3.5rem); } section:has(+ .contest) { -webkit-padding-after: calc(var(--section-padding) + 3.5rem); padding-block-end: calc(var(--section-padding) + 3.5rem); } @media (max-width: 600px) { .contest__inner { text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } /** * Footer * =============== */ .footer__inner { padding: var(--section-padding) 0 0; } .nav-footer__list { gap: var(--half-gutter); } .footer-callout { width: 100%; text-align: center; margin-top: var(--page-gutter); } @media only screen and (min-width: 700px) { .footer-callout { margin-left: auto; margin-top: 0; text-align: initial; width: 300px; } } .footer-callout__logo { width: 100%; max-width: 200px; margin-bottom: var(--half-gutter); -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .footer-callout__logo path:is(.primary-logo__yellow, .primary-logo__blue) { fill: currentColor !important; } .footer-sponsor { width: 100%; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; margin-top: var(--page-gutter); gap: var(--half-gutter); } .footer-bottom { width: 100%; margin-top: var(--half-gutter); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: var(--half-gutter) 0; border-top: 1px solid #ffffff; gap: var(--half-gutter); } .footer-bottom > * { width: 100%; margin-bottom: 1em; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 600px) { .footer-bottom { -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; } .footer-bottom > * { width: auto; margin-bottom: 0; text-align: initial; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; } } .footer-bottom__contact { font-size: 0.875em; } :where(.footer-bottom__contact) a { margin-right: 0.5em; } .footer-bottom__contact, .footer-bottom__resources { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .footer__section-title { font-size: 1.125rem; font-weight: 700; } .footer__section-title, .footer__item { margin-bottom: 0.5em; } .footer__item--inline { display: inline-block; /* margin: 0 0.5em 0 0; */ } .footer__link { /* line-height: 1; */ font-size: 0.875rem; } .footer__item, .footer__link span { line-height: 1; } .footer__link--big { font-family: var(--font-editorial); font-size: 1rem; font-weight: 700; } :where(.site-footer) a { color: var(--color-white); } .copyright { margin-top: 0.5em; } :where(.footer__list--resources) li + li::before { content: "|"; margin-inline: 0.5em; } .enews { padding-block: var(--half-gutter); background-color: var(--bg-interactive); color: var(--text-primary); .enews__inner { @media(max-width: 600px) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .enews__heading { @media(max-width: 600px) { -webkit-margin-after: 2rem; margin-block-end: 2rem; } } } /*------------------------------------*\ #SOCIAL \*------------------------------------*/ .social { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.5em 0.75em; border: 1px solid currentColor; } .social-heading { font-weight: 600; line-height: 1; } .social__list { font-size: 1.125rem; gap: 0.5em; } .social__item { display: inline-block; } .social__link { display: block; padding: 0.35em; color: currentColor; border: 1px solid currentColor; border-radius: 100rem; } .social__link .icon { display: block; width: 0.75em; } .svg-social { fill: currentColor; } } @-webkit-keyframes move-out { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-35%); transform: translateY(-35%); } } @keyframes move-out { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-35%); transform: translateY(-35%); } } @-webkit-keyframes move-in { from { -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); } } @keyframes move-in { from { -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); } } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { -webkit-animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both move-out; animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both move-out; } ::view-transition-new(root) { -webkit-animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both move-in; animation: 1s cubic-bezier(0.87, 0, 0.13, 1) both move-in; } } /* Override WP */ :where(figure) { margin: unset; } /* Gravity forms */ .gform_wrapper { --gf-local-font-family: var(--font-body); .gform_button[type="submit"] { display: inline-block !important; -webkit-margin-before: 1em !important; margin-block-start: 1em !important; padding: 0.875em 1.375em !important; font-size: 0.875em !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; font-family: var(--font-body) !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; text-align: center !important; border-radius: 100rem !important; background-color: var(--_btn-color, var(--bg-interactive)) !important; color: var(--text-primary) !important; -webkit-transition: background-color 200ms ease-out !important; -o-transition: background-color 200ms ease-out !important; transition: background-color 200ms ease-out !important; &:where(:hover, :focus) { background-color: color-mix( in lab, var(--_btn-color, var(--bg-interactive)), white 20% ) !important; } &:focus-visible { outline: 1px dashed currentColor !important; outline-offset: 3px !important; } } }/* footer signup */ #gform_3 { --icon-width: 2rem; position: relative; width: clamp(300px, 25vw, 600px); max-width: 100%; .gfield_label { display: none !important; } .gform_footer { position: absolute; top: 0; right: 10px; width: var(--icon-width); padding: 0; margin: 0; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } input[type="email"] { width: 100%; padding: 0.5rem 1.5rem; height: auto; padding-right: calc(var(--icon-width) + 1rem) !important; border-radius: var(--border-radius); border: unset; } .gform_image_button { margin: 0; padding: 0.35rem; max-width: 100%; -ms-flex-item-align: unset; -ms-grid-row-align: unset; align-self: unset; background-color: transparent; -webkit-box-shadow: unset; box-shadow: unset; } } /*------------------------------------*\ #VG \*------------------------------------*/ .hero__media:has( .embed-container) { min-block-size: unset; } .embed-container { position: relative; width: 100%; max-height: 70vh; aspect-ratio: 16/9; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }