/* 1. Abstracts - No output, just tools */ /* 2. Base - Global styles and Resets */ @font-face { font-family: "Ubuntu Titling"; src: url("/build/fonts/ubuntutitling-bold.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Ubuntu Sans"; font-style: normal; font-display: swap; font-weight: 100 800; font-stretch: 75% 100%; src: url(/build/fonts/ubuntu-sans-latin-standard-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Ubuntu Sans"; font-style: italic; font-display: swap; font-weight: 100 800; font-stretch: 75% 100%; src: url(/build/fonts/ubuntu-sans-latin-standard-italic.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1. STATIC DESIGN TOKENS (Sass Variables) */ /* $font-sizesBAK: ( 900: clamp(4.0054rem, 2.7074rem + 5.7691vw, 6.3131rem), // display 2 800: clamp(3.0518rem, 2.105rem + 4.2076vw, 4.7348rem), // display 1 700: clamp(2.4414rem, 1.8167rem + 2.7765vw, 3.552rem), // h1 600: clamp(1.9531rem, 1.5529rem + 1.7789vw, 2.6647rem), // h2 500: clamp(1.5625rem, 1.317rem + 1.0913vw, 1.999rem), // h3 400: clamp(1.25rem, 1.1096rem + 0.6241vw, 1.4996rem), // lead h4 300: clamp(1rem, 0.9297rem + 0.3125vw, 1.125rem), // p, h5 200: clamp(0.8rem, 0.7753rem + 0.1099vw, 0.844rem), // small ); */ /* $spacing: 1rem !default; $spacing-sml: math.div($spacing, 2) !default; //$spacing / 2 !default; $spacing-lge: $spacing * 2 !default; $spacing-xl: $spacing * 4 !default; */ /* 3. AUTOMATED CSS VARIABLE GENERATION */ :root { --clr-neutral-100: hsl(342, 3%, 100%); --clr-neutral-300: hsl(342, 3%, 90%); --clr-neutral-400: hsl(342, 3%, 80%); --clr-neutral-500: hsl(342, 3%, 45%); --clr-neutral-700: hsl(342, 3%, 35%); --clr-neutral-900: hsl(342, 3%, 9%); --clr-primary-100: hsl(180, 35%, 90%); --clr-primary-300: hsl(180, 32%, 57%); --clr-primary-500: hsl(184, 72%, 41%); --clr-primary-700: hsl(181, 74%, 27%); --clr-primary-900: hsl(186, 72%, 16%); --clr-secondary-100: hsl(2, 70%, 95%); --clr-secondary-300: hsl(2, 70%, 80%); --clr-secondary-500: hsl(2, 70%, 65%); --clr-secondary-700: hsl(346, 44%, 52%); --clr-secondary-900: hsl(2, 70%, 19%); --clr-highlight-100: hsl(39, 73%, 95%); --clr-highlight-300: hsl(39, 76%, 77%); --clr-highlight-500: hsl(40, 82%, 65%); --clr-highlight-700: hsl(30, 73%, 35%); --clr-highlight-900: hsl(30, 73%, 19%); --clr-brand-primary: var(--clr-primary-500); --clr-brand-secondary: var(--clr-secondary-500); --clr-brand-highlight: var(--clr-highlight-300); --clr-brand-dark: var(--clr-primary-700); --clr-surface: var(--clr-neutral-100); --clr-surface-2: #eef1ee; --clr-text: var(--clr-primary-900); --clr-text-muted: var(--clr-neutral-500); --clr-text-highlight: var(--clr-primary-500); --clr-heading: var(--clr-primary-500); --clr-link: var(--clr-primary-700); --clr-link-hover: var(--clr-primary-500); --clr-accent: var(--clr-primary-700); --clr-secondary: var(--clr-secondary-700); --clr-highlight: var(--clr-highlight-700); --clr-border: var(--clr-neutral-400); --grad-hsl: linear-gradient(to bottom, var(--clr-brand-primary), var(--clr-brand-dark)); --grad-oklch: linear-gradient(to bottom in oklch, var(--clr-brand-primary), var(--clr-brand-dark)); --bg-grad-primary: radial-gradient(farthest-side circle, var(--clr-brand-primary) 0%, var(--clr-brand-dark) 100%); --bg-grad-secondary: radial-gradient(farthest-side circle, var(--clr-brand-secondary) 0%, var(--clr-secondary-700) 100%); --bg-grad-highlight: radial-gradient(farthest-side circle, var(--clr-brand-highlight) 0%, var(--clr-highlight-700) 100%); --ff-sans: 'Ubuntu Sans', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --ff-serif: 'Merriweather', 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif; --ff-accent: 'Ubuntu Titling', ui-rounded, 'Hiragino Maru Gothic ProN', Comfortaa, 'Arial Rounded MT', 'Arial Rounded MT Bold', sans-serif; --ff-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Consolas, 'DejaVu Sans Mono', monospace; --fs-900: clamp(2.985984rem, 1.8774746344rem + 5.542546828vw, 6.3115120968rem); --fs-800: clamp(2.48832rem, 1.7394874077rem + 3.7441629617vw, 4.734817777rem); --fs-700: clamp(2.0736rem, 1.5807995556rem + 2.4640022219vw, 3.5520013331rem); --fs-600: clamp(1.728rem, 1.4157776111rem + 1.5611119444vw, 2.6646671666rem); --fs-500: clamp(1.44rem, 1.253666625rem + 0.931666875vw, 1.999000125rem); --fs-400: clamp(1.2rem, 1.100125rem + 0.499375vw, 1.499625rem); --fs-300: clamp(1rem, 0.9583333333rem + 0.2083333333vw, 1.125rem); --fs-200: clamp(0.8333333333rem, 0.829790781rem + 0.0177127615vw, 0.8439609902rem); --fs-100: clamp(0.6944444444rem, 0.7148829176rem + -0.1021923658vw, 0.6331290249rem); --fw-200: 200; --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-900: 900; --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-gutter: clamp(1rem, 5vw, 3rem); /* --- Vertical Rhythm Tokens --- */ --flow: 1em; /* Your 1em equivalent, but consistent */ --lh-md: 1.5; --lh-sm: 1.2; --baseline-margin: var(--space-s); --reading-width: 65ch; } /* Where your CSS Variables live */ /* Modern 2026 Reset */ *, *::before, *::after { box-sizing: border-box; } /* 1. Fluid Body & High-Level Smoothing */ html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; } body { margin: 0; min-height: 100vh; background-color: var(--clr-surface-2); text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; } /* 2. Responsive Media Reset */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; pointer-events: none; } input, button, textarea, select { font-family: inherit; font-size: inherit; } textarea:not([rows]) { min-height: 4em; } .ccm-page a, .ccm-page u, .ccm-page ins, .ccm-page abbr, .ccm-page acronym { text-decoration-thickness: max(0.08em, 1px); text-underline-offset: 0.15em; -webkit-text-decoration-skip-ink: all; text-decoration-skip-ink: all; } /* 6. Accessibility: Focus States */ :focus-visible { outline: 2px solid var(--clr-secondary-300); outline-offset: 2px; } :target { scroll-margin-block: 5ex; } :focus { scroll-margin-bottom: 8vh; } /* 7. Remove animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } @view-transition { navigation: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :where(h1, h2, h3, h4, p, ul, ol, blockquote, figure, table), main :where(img), main a img:last-child { margin-block-start: 0; margin-block-end: var(--flow, 1em); } :where(h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, ul:last-child, ol:last-child, blockquote:last-child, figure:last-child), main :where(img:last-child) { margin-block-end: 0; } /* BASE TEXT STYLING */ .ccm-page { color: var(--clr-text); font-family: var(--ff-sans); font-size: var(--fs-300); font-weight: var(--fw-400); line-height: var(--lh-md); min-height: 100vh; hanging-punctuation: first last; } :where(p) { text-wrap: pretty; } small, .text-small { font-size: 0.8em; } strong, .text-bold { font-weight: var(--fw-700); } .ccm-page a, a.link, a.visited { color: var(--clr-link); transition: 0.2s ease; } .ccm-page a:hover, .ccm-page a:focus-visible .ccm-page a.hover, .ccm-page a.focus-visible, a.link:hover, .ccm-page a:focus-visible a.link.hover, a.link.focus-visible, a.visited:hover, .ccm-page a:focus-visible a.visited.hover, a.visited.focus-visible, a.link:focus-visible .ccm-page a.hover, a.link:focus-visible a.link.hover, a.link:focus-visible a.visited.hover, a.visited:focus-visible .ccm-page a.hover, a.visited:focus-visible a.link.hover, a.visited:focus-visible a.visited.hover { color: var(--clr-link-hover); text-decoration-thickness: 2px; } .ccm-page a:focus-visible, .ccm-page a.focus-visible, a.link:focus-visible, a.link.focus-visible, a.visited:focus-visible, a.visited.focus-visible { background: var(--clr-secondary-100); } .ccm-page :where(h1, h2, h3, h4, h5, h6), .ccm-page .h1, .ccm-page .h2, .ccm-page .h3, .ccm-page .h4, .ccm-page .h5, .ccm-page .h6 { color: inherit; font-family: var(--ff-accent); text-wrap: balance; margin-block: 0 0.5em; } .ccm-page h1, .ccm-page .h1 { font-size: var(--fs-700); letter-spacing: -1px; line-height: var(--lh-sm); } .ccm-page h2, .ccm-page .h2 { font-size: var(--fs-600); letter-spacing: -1px; line-height: var(--lh-sm); } .ccm-page h3, .ccm-page .h3 { font-size: var(--fs-500); letter-spacing: -1px; line-height: var(--lh-sm); } .ccm-page h4, .ccm-page .h4 { font-size: var(--fs-400); margin-block-end: 1em; line-height: var(--lh-sm); } .ccm-page h5, .ccm-page .h5, .ccm-page h6, .ccm-page .h6 { font-family: var(--ff-sans); font-weight: var(--fw-900); font-size: var(--fs-400); margin-block-end: 1em; line-height: var(--lh-sm); } .ccm-page h6, .ccm-page .h6 { font-size: var(--fs-300); line-height: var(--lh-sm); } .ccm-page hgroup > * { margin-block-end: 0; } .ccm-page hgroup > *:last-child { margin-block-end: 1em; color: var(--clr-primary-500); } .ccm-page [role=list] { list-style: none; padding: 0; } .ccm-page :where(li + li) { margin-block-start: 0.25rem; /* Tighter spacing between list items */ } .ccm-page ul ul, .ccm-page ul ol, .ccm-page ul dl, .ccm-page ol ul, .ccm-page ol ol, .ccm-page ol dl, .ccm-page dl ul, .ccm-page dl ol, .ccm-page dl dl { padding-inline-start: 2ch; } .ccm-page ul, .ccm-page ol { padding-inline: 0; display: grid; text-align: center; justify-items: center; list-style-position: outside; } .ccm-page li::marker { color: var(--clr-primary-500); } .ccm-page :where(dt) { font-weight: bold; } .ccm-page :where(dd) { margin-inline-start: 1rem; margin-block-end: 0.5rem; } @media screen and (min-width: 60em) { .l-grid.grid-keyinfo > div ol, .l-grid.grid-keyinfo > div ul { text-align: left; justify-items: start; } } :where(blockquote) { --quote-clr: var(--clr-primary-700); --cite-clr: var(--clr-primary-900); --quote-accent: var(--clr-accent); margin-inline: 0; } :where(blockquote) cite { display: block; font-size: 0.8em; font-style: normal; color: var(--cite-clr); } :where(blockquote, q) { font-style: italic; color: var(--quote-clr); } .ccm-page table { --table-bg: var(--clr-neutral-100); --table-bg-alt: var(--clr-primary-100); --table-clr: var(--clr-text); --table-border-clr: var(--clr-primary-500); --table-header-clr: var(--clr-neutral-100); --table-header-bg: var(--clr-primary-700); border-collapse: collapse; border-spacing: 0; caption-side: bottom; text-align: left; min-width: 100%; border-inline-start: 1px solid var(--table-border-clr); border-block-start: 1px solid var(--table-border-clr); } .ccm-page table caption { font-size: 0.8em; font-style: italic; color: var(--clr-text-muted); margin-block: 1em; } .ccm-page table td, .ccm-page table th { padding: 0.3rem 0.5rem; border-inline-end: 1px solid var(--table-border-clr); border-block-end: 1px solid var(--table-border-clr); background-color: var(--table-bg); color: var(--table-clr); } .ccm-page table th { text-align: left; font-weight: var(--fw-700); color: var(--table-header-clr); background-color: var(--table-header-bg); } .ccm-page table tr:nth-child(even) { background-color: var(--table-bg-alt); } .ccm-page table.table-condensed { font-size: 0.8em; } .ccm-page table.table-condensed caption { font-size: 1em; } .ccm-page table.table-condensed td, .ccm-page table.table-condensed th { padding: 0.25rem; } .ccm-page table.table-secondary { --table-bg-alt: var(--clr-secondary-100); --table-border-clr: var(--clr-secondary-500); --table-header-clr: var(--clr-neutral-900); --table-header-bg: var(--clr-secondary-700); } .ccm-page table.table-highlight { --table-bg-alt: var(--clr-highlight-100); --table-border-clr: var(--clr-highlight-500); --table-header-clr: var(--clr-neutral-900); --table-header-bg: var(--clr-highlight-500); } .ccm-page table.table-neutral { --table-bg-alt: var(--clr-neutral-300); --table-border-clr: var(--clr-neutral-500); --table-header-clr: var(--clr-neutral-100); --table-header-bg: var(--clr-neutral-700); } :where(kbd, pre, code, samp, var) { font-family: var(--font-mono); font-size: 0.9em; } :where(code) { background: var(--color-surface-2); padding: 0.2em 0.4em; border-radius: 4px; } /* base typography */ /* 3. Composition - The "C" in CUBE (Layout Primitives) */ .wrapper { padding-inline: max(50vw - 600px, 2rem); text-align: center; } .wrapper-sm { padding-inline: max(50vw - 360px, 3rem); text-align: center; } .narrow { max-width: min(80%, 720px); margin-inline: auto; text-align: center; } .section { padding-block: 4rem; } .section-lg { padding-block: 6rem; } .section-sm { padding-block: 2rem; } .section-end { padding-block-end: 3rem; } /* .shadow { position: relative; overflow: hidden; &:after { content: ''; position: absolute; top: -200px; left: 0; height: 200px; width: 100%; //left: 50%; //transform: translatex(-50%); border-radius: 30%; box-shadow: 0 8px 16px rgb(0 0 0 / 0.08), 0 12px 24px rgb(0 0 0 / 0.14); } } */ .ccm-page > header { min-height: 95px; display: grid; gap: 0.5rem; grid-template-columns: min(25%, 116px) 1fr; grid-template-rows: 1fr; grid-template-areas: "logo book" "logo book" "nav nav"; } .ccm-page > header .logo { grid-area: logo; align-self: center; } .ccm-page > header .book { grid-area: book; text-align: right; align-self: start; } .ccm-page > header #mainNav { grid-area: nav; text-align: center; } @media screen and (min-width: 45em) { .ccm-page > header { grid-template-areas: "logo book" "logo nav"; } .ccm-page > header #mainNav { grid-area: nav; text-align: right; align-self: end; padding-block: 0.5rem 0; } } .ccm-page .logo > a { display: block; border-radius: 0.5rem; } .ccm-page .logo > a:hover, .ccm-page .logo > a:focus-visible { background-color: transparent; } img.headerLogo { padding-block: 0.5rem; } .bg-tint { background-color: var(--clr-primary-500); color: #fff; } .ccm-page > footer { text-align: center; font-size: 0.8em; margin-block-start: 3rem; } .ccm-page > footer .bg-tint { position: relative; } .ccm-page > footer .grid { display: grid; gap: 1rem; } .ccm-page > footer .grid > a.acquisitions { text-align: center; flex-direction: column; position: absolute; top: 0; right: max(50vw - 600px, 2rem); } .ccm-page > footer .grid > a.acquisitions:hover { text-decoration: none; } .ccm-page > footer a { font-weight: bold; text-decoration: none; } .ccm-page > footer a:hover { text-decoration: underline; } .ccm-page > footer ul.layout-flex { display: flex; gap: 0; flex-flow: row wrap; justify-content: center; list-style: none; margin-inline: 0; padding: 0; } .ccm-page > footer ul.layout-flex li { flex: 0 0 auto; margin-top: 0; padding-inline: 0.5rem; } @media screen and (min-width: 45em) { .ccm-page > footer ul.layout-flex { justify-content: flex-end; } .ccm-page > footer .grid { grid-template-columns: 2fr 1fr 2fr; align-items: end; } .ccm-page > footer .grid > :nth-child(2) { text-align: left; } .ccm-page > footer .grid > :last-child { text-align: right; } .ccm-page > footer .grid .col20 a { color: var(--clr-neutral-100); } .ccm-page > footer .grid .col20 a:hover { color: var(--clr-primary-100); } } .hero, .intro.bg-tint { overflow: hidden; aspect-ratio: 16/5; } .hero picture, .intro.bg-tint picture { margin: 0; padding: 0; } .hero img, .hero .img-rounded, .intro.bg-tint img, .intro.bg-tint .img-rounded { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; vertical-align: baseline; border-radius: 0; } .bg-secondary:has(select#jumpMenu) { padding-block: 0.5rem; position: sticky; top: 0; z-index: 500; } select#jumpMenu { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; border: 1px solid var(--clr-primary-500); border-radius: 9999px; background: var(--clr-primary-100); color: var(--clr-primary-700); padding: 0.25rem 1rem; transition: 0.4s; } select#jumpMenu:hover, select#jumpMenu:focus { background: var(--clr-primary-500); color: var(--clr-neutral-100); } select#jumpMenu::picker-icon { color: var(--clr-secondary-700); transition: 0.4s rotate; } select#jumpMenu:open::picker-icon { rotate: 180deg; } .key-info { background: var(--clr-primary-300); color: var(--clr-neutral-100); border-radius: 0 0 1rem 1rem; } .l-grid.grid-keyinfo { grid-template-columns: 1fr; align-items: center; padding-inline: 1rem; } @media screen and (min-width: 60em) { .l-grid.grid-keyinfo { --grid-gap: 1rem; grid-template-columns: 2fr 3fr 3fr; } .l-grid.grid-keyinfo > div { text-align: left; } .l-grid.grid-keyinfo > div ul { text-align: left; justify-items: start; } } .nursery-features .l-grid { --min-col-size: 150px; } .ccm-page .nursery-features figure figcaption { color: var(--clr-primary-500); } .ccm-page table.table-fees { --brdr-radius: 1rem; --fees-head-bg: var(--clr-primary-500); --fees-head-clr: var(--clr-neutral-100); --fees-clr: var(--clr-neutral-700); border: none; border-collapse: separate; } .ccm-page table.table-fees.table-secondary { --fees-head-bg: var(--clr-secondary-500); --fees-head-clr: var(--clr-neutral-100); --fees-bg: var(--clr-secondary-100); --fees-clr: var(--clr-secondary-700); } .ccm-page table.table-fees.table-highlight { --fees-head-bg: var(--clr-highlight-500); --fees-head-clr: var(--clr-neutral-900); --fees-bg: var(--clr-highlight-100); --fees-clr: var(--clr-highlight-900); } .ccm-page table.table-fees td[colspan] { background: var(--fees-head-bg); color: var(--fees-head-clr); } .ccm-page table.table-fees td, .ccm-page table.table-fees th { border: none; background: var(--fees-bg); color: var(--fees-clr); text-align: center; font-weight: 700; line-height: 1.4; vertical-align: top; } .ccm-page table.table-fees tr:first-child td:first-child { border-start-start-radius: 1rem; } .ccm-page table.table-fees tr:first-child td:last-child { border-start-end-radius: 1rem; } .ccm-page table.table-fees td { border-right: 1px solid var(--fees-head-bg); } .ccm-page table.table-fees td:first-child { border-left: 1px solid var(--fees-head-bg); } .ccm-page table.table-fees tr:last-child td { border-bottom: 1px solid var(--fees-head-bg); } .ccm-page table.table-fees tr:last-child td:first-child { border-end-start-radius: 1rem; } .ccm-page table.table-fees tr:last-child td:last-child { border-end-end-radius: 1rem; } [role=list] { list-style: none; padding: 0; } .display-sm > .l-flex.ff-accent { margin-block: 0; } .display-sm > .l-flex.ff-accent a { text-decoration: none; color: var(--clr-neutral-100); font-size: var(--fs-400); } .display-sm > .l-flex.ff-accent a:hover { color: var(--clr-neutral-300); } #map-container { --map-height: 350px; --map-border-radius: 12px; width: 100%; height: var(--map-height); margin: 0; } #map { width: 100%; height: var(--map-height); border-radius: var(--map-border-radius); } @media screen and (min-width: 45em) { #map-container { --map-height: 500px; } .ccm-page .text-left-sm ul.list-icon { text-align: left; justify-items: start; } } .l-grid { --min-col-size: 300px; display: grid; gap: var(--grid-gap, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr)); } .grid-mid > .layout-grid, .grid-mid > .l-grid, .l-grid.grid-mid { align-items: center; } .grid-bot > .layout-grid, .grid-bot > .l-grid, .l-grid.grid-bot { align-items: end; } .l-grid.grid-features { grid-template-columns: 1fr 1fr; } @media screen and (min-width: 45em) { .l-grid.grid-features { grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 75em) { .l-grid.grid-features { grid-template-columns: repeat(6, 1fr); } } main .l-grid > div, main .layout-grid > div { text-align: center; } .layout-grid { display: grid; gap: 2rem; } .layout-grid .colFull { padding-inline: 2rem; } .layout-grid .col { min-width: 0; } .layout-grid .colNarrow { width: min(640px, 80%); margin-inline: auto; } .layout-grid.gridContent { grid-template-columns: repeat(5, 1fr); } .layout-grid.gridContent > .colContent { grid-column: span 5; } .layout-grid.gridContent > .colSide { grid-column: 2/5; } .layout-grid.grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid-middle .layout-grid, .layout-grid.grid-middle { align-items: center; } .layout-grid.grid2mob { grid-template-columns: 1fr 1fr; } @media screen and (min-width: 45em) { .l-grid .colContent, .l-grid .colSide { text-align: left; } .layout-grid.grid2 > *, .layout-grid.grid2 > ul li { text-align: left; justify-items: start; } .layout-grid.grid2, .layout-grid.grid4 { grid-template-columns: 1fr 1fr; } .layout-grid.grid3 { grid-template-columns: repeat(4, 1fr); } .layout-grid.grid3 > div { grid-column: span 2; } .layout-grid.grid3 > div:last-child { grid-column: 2/4; } } @media screen and (min-width: 60em) { .layout-grid.gridContent { grid-template-columns: 2fr 1fr; gap: 2rem; } .layout-grid.gridContent > .colContent { grid-column: span 1; } .layout-grid.gridContent > .colSide { grid-column: initial; } .layout-grid.gridContent-reverse { grid-template-columns: 1fr 2fr; gap: 2rem; } .layout-grid.gridContent-reverse > .colSide { grid-column: span 1; } .layout-grid.gridContent-reverse > .colContent { grid-column: initial; } .layout-grid.grid3 { grid-template-columns: 1fr 1fr 1fr; } .layout-grid.grid3 > div { grid-column: span 1; } .layout-grid.grid3 > div:last-child { grid-column: initial; } .layout-grid.grid4 { grid-template-columns: repeat(4, 1fr); } } .ccm-page ul.layout-flex { display: flex; gap: 1rem; flex-flow: row wrap; list-style: none; margin-inline: 0; padding: 0; } .ccm-page ul.layout-flex li { flex: 0 0 auto; margin-top: 0; } .ccm-page ul.layout-flex.bordered li + li { border-left: solid 2px var(--clr-primary-300); } .ccm-page ul.l-flex, .ccm-page .l-flex { --f-basis: auto; display: flex; gap: var(--f-gap, 2rem); } .ccm-page ul.l-flex > *, .ccm-page .l-flex > * { flex-basis: var(--f-basis); margin-block-start: 0; } .ccm-page ul.l-flex > a, .ccm-page .l-flex > a { display: block; text-decoration: none; } .ccm-page .l-flex.cluster { --f-gap: 1rem; flex-wrap: wrap; } .ccm-page .l-flex.justify-center { justify-content: center; } .ccm-page .l-flex.align-middle { align-items: center; } .l-flex.flex-features { --f-gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .l-flex.flex-features > div { flex: 1 1 150px; max-width: calc(33.3333333333% - 1.5rem); } .l-flex.flex-features > div figure { display: flex; flex-direction: column; align-items: center; height: 100%; } .l-flex.flex-features > div figure figcaption { text-align: center; } .l-flex.flex-features figcaption.h4 { font-size: var(--fs-100); } @media screen and (min-width: 30em) { .l-flex.flex-features > div { max-width: calc(25% - 1.5rem); } .l-flex.flex-features figcaption.h4 { font-size: var(--fs-200); } } @media screen and (min-width: 45em) { .l-flex.flex-features > div { max-width: calc(25% - 1.5rem); } .l-flex.flex-features figcaption.h4 { font-size: var(--fs-300); } } @media screen and (min-width: 60em) { .l-flex.flex-features > div { max-width: calc(16.6666666667% - 1.5rem); } .l-flex.flex-features figcaption.h4 { font-size: var(--fs-400); } } .l-flex.flex-locations { --f-gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .l-flex.flex-locations > * { flex: 0 1 320px; max-width: 100%; } /* 4. Blocks - The "B" in CUBE (Concrete CMS Block Types) */ .text-lead { color: var(--clr-text-highlight); font-size: var(--fs-400); line-height: var(--lh-sm); } .text-muted { color: var(--clr-text-muted); } .text-primary { color: var(--clr-primary-700); } .text-secondary { color: var(--clr-secondary-700); } .text-highlight { color: var(--clr-text-highlight); } .text-gradient { color: var(--clr-primary-700); background-image: var(--grad-hsl); background-image: var(--grad-oklch); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .display1, .display2 { font-family: var(--ff-accent); font-size: var(--fs-900); line-height: 1.1; margin-block-end: 0.5em; color: var(--clr-primary-700); background-image: var(--grad-hsl); background-image: var(--grad-oklch); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .display1 { font-size: var(--fs-900); } .display2 { font-size: var(--fs-800); } .ff-sans { font-family: var(--ff-sans); } .ff-accent { font-family: var(--ff-accent); } .ff-mono { font-family: var(--ff-mono); } .ff-serif { font-family: var(--ff-serif); } .fs-900 { font-size: clamp(2.985984rem, 1.8774746344rem + 5.542546828vw, 6.3115120968rem); line-height: 1.1; } .fs-800 { font-size: clamp(2.48832rem, 1.7394874077rem + 3.7441629617vw, 4.734817777rem); line-height: 1.1; } .fs-700 { font-size: clamp(2.0736rem, 1.5807995556rem + 2.4640022219vw, 3.5520013331rem); line-height: 1.1; } .fs-600 { font-size: clamp(1.728rem, 1.4157776111rem + 1.5611119444vw, 2.6646671666rem); line-height: 1.1; } .fs-500 { font-size: clamp(1.44rem, 1.253666625rem + 0.931666875vw, 1.999000125rem); line-height: 1.1; } .fs-400 { font-size: clamp(1.2rem, 1.100125rem + 0.499375vw, 1.499625rem); } .fs-300 { font-size: clamp(1rem, 0.9583333333rem + 0.2083333333vw, 1.125rem); } .fs-200 { font-size: clamp(0.8333333333rem, 0.829790781rem + 0.0177127615vw, 0.8439609902rem); } .fs-100 { font-size: clamp(0.6944444444rem, 0.7148829176rem + -0.1021923658vw, 0.6331290249rem); } .fw-200 { font-size: 200; } .fw-300 { font-size: 300; } .fw-400 { font-size: 400; } .fw-500 { font-size: 500; } .fw-600 { font-size: 600; } .fw-700 { font-size: 700; } .fw-900 { font-size: 900; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } @media screen and (min-width: 30em) { .text-left-xs { text-align: left; } .text-center-xs { text-align: center; } .text-right-xs { text-align: right; } } @media screen and (min-width: 45em) { .text-left-sm { text-align: left; } .text-center-sm { text-align: center; } .text-right-sm { text-align: right; } } @media screen and (min-width: 60em) { .text-left-md { text-align: left; } .text-center-md { text-align: center; } .text-right-md { text-align: right; } } @media screen and (min-width: 75em) { .text-left-lg { text-align: left; } .text-center-lg { text-align: center; } .text-right-lg { text-align: right; } } ol.list-unstyled, ul.list-unstyled { list-style: none; padding: 0; } .text-center ul, .text-center ol, ul.list-center, ol.list-center { text-align: center; padding-inline: 0; display: grid; justify-items: center; } ol.list-tickbox, ul.list-tickbox { list-style: none; padding: 0; } ol.list-tickbox li, ul.list-tickbox li { background: url("/application/themes/bluegreen/img/tick.png") left 4px no-repeat; padding-left: 30px; } ul.list-icon { list-style: none; padding: 0; } ul.list-icon li { text-wrap: pretty; } ul.list-icon li span { display: inline-block; width: 1.5em; } .text-left ul.list-icon li { display: flex; } @media screen and (min-width: 30em) { .text-left-xs ul.list-icon li { display: flex; } } @media screen and (min-width: 45em) { .text-left-sm ul.list-icon li { display: flex; } } @media screen and (min-width: 60em) { .l-grid.grid-keyinfo ul.list-icon li, .text-left-md ul.list-icon li { display: flex; } } @media screen and (min-width: 75em) { .text-left-lg ul.list-icon li { display: flex; } } a.link-secondary { color: var(--clr-secondary-700); } a.link-secondary:focus, a.link-secondary:hover { color: var(--clr-secondary-900); } a.link-highlight { color: var(--clr-highlight-700); } a.link-highlight:focus, a.link-highlight:hover { color: var(--clr-highlight-900); } .bg-tint a { color: var(--clr-primary-100); } .bg-tint a:hover { color: var(--clr-neutral-100); } .text-muted a { color: var(--clr-neutral-500); } .text-muted a:hover { color: var(--clr-primary-500); } /* blockquote { display: block; padding: 0 1.5rem; border-left: 0.25rem solid clr(secondary, 500); border-right: none; border-inline-start: 0.25rem solid clr(secondary, 500); border-inline-end: none; p { font-family: var(--ff-sans); font-weight: $fw-400; } > * + * { margin-top: 1rem; } } */ address { font-style: normal; } hr { border: none; border-top: 1px solid var(--clr-neutral-300); margin: 2rem 0; position: relative; overflow: hidden; /* &::after { position: absolute; content: ''; width: 90%; left: 5%; height: 2rem; top: -2.75rem; box-shadow: 0 8px 16px #00000014, 0 12px 24px #00000024; } */ } figure { margin-inline: 0; text-align: center; } figure figcaption { color: var(--clr-text-muted); font-size: 0.8em; } .img-circle { aspect-ratio: 1; border-radius: 50%; } .center-block { display: block; margin-inline: auto; } .img-rounded { border-radius: 1rem; overflow: hidden; } .img-rounded > picture { display: block; } .img-rounded > img, .img-rounded > picture > img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .img-cover { aspect-ratio: var(--cover-ratio, 16/9); overflow: hidden; } .img-cover > picture { display: block; } .img-cover > img, .img-cover > picture > img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Parallax Hero Image */ .ccm-page:has(.hero-parallax) { height: 100vh; overflow-y: auto; scroll-timeline-name: --page-scroll; scroll-timeline-axis: block; } .hero-parallax { position: relative; aspect-ratio: 16/7; overflow: hidden; /* Clips the over-sized image */ } @media screen and (min-width: 45em) { .hero-parallax { aspect-ratio: 16/6; } } @media screen and (min-width: 60em) { .hero-parallax { aspect-ratio: 16/5; } } @media screen and (min-width: 75em) { .hero-parallax { aspect-ratio: 16/4; } } .parallax { position: absolute; top: 0; left: 0; width: 100%; /* Make the image taller so there is "room" to slide */ height: 130%; -o-object-fit: cover; object-fit: cover; /* Link the animation to our named timeline */ animation: move-down linear; animation-timeline: --page-scroll; /* Ensure it starts and ends at the right points */ animation-range: entry 0% exit 100%; /* Tells the animation to follow the scrollbar */ } @keyframes move-down { from { transform: translateY(-15%); } to { transform: translateY(15%); } } .ccm-page .btn, .ccm-page a.btn, .ccm-page button.btn, .ccm-page input.btn { --btn-clr: var(--clr-neutral-100); --btn-bg: var(--clr-secondary-500); --btn-hvr-clr: var(--clr-neutral-100); --btn-hvr-bg: var(--clr-secondary-700); --btn-fcs-ol: var(--clr-secondary-500); background-color: var(--btn-bg); color: var(--btn-clr); font-family: var(--ff-accent); font-weight: bold; font-size: var(--fs-300); line-height: 1.2; text-decoration: none; border: 2px solid transparent; border-radius: 0.5rem; padding: 0.5rem 1.5rem; width: -moz-max-content; width: max-content; display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; cursor: pointer; transition: all 0.22s ease; } .ccm-page .btn:focus, .ccm-page a.btn:focus, .ccm-page button.btn:focus, .ccm-page input.btn:focus { outline: none; } .ccm-page .btn:focus-visible, .ccm-page .btn.focus, .ccm-page a.btn:focus-visible, .ccm-page a.btn.focus, .ccm-page button.btn:focus-visible, .ccm-page button.btn.focus, .ccm-page input.btn:focus-visible, .ccm-page input.btn.focus { background-color: var(--btn-hvr-bg); color: var(--btn-hvr-clr); outline: 2px solid var(--btn-fcs-ol); outline-offset: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.12); } .ccm-page .btn:hover, .ccm-page .btn.hover, .ccm-page a.btn:hover, .ccm-page a.btn.hover, .ccm-page button.btn:hover, .ccm-page button.btn.hover, .ccm-page input.btn:hover, .ccm-page input.btn.hover { background-color: var(--btn-hvr-bg); color: var(--btn-hvr-clr); } .ccm-page .btn.btn-alt, .ccm-page a.btn.btn-alt, .ccm-page button.btn.btn-alt, .ccm-page input.btn.btn-alt { --btn-clr: var(--clr-primary-100); --btn-bg: var(--clr-primary-500); --btn-hvr-clr: var(--clr-neutral-100); --btn-hvr-bg: var(--clr-primary-700); --btn-fcs-ol: var(--clr-primary-700); } .ccm-page .btn.btn-flipped, .ccm-page a.btn.btn-flipped, .ccm-page button.btn.btn-flipped, .ccm-page input.btn.btn-flipped .btn.btn-alt.btn-flipped, .ccm-page a.btn.btn-alt.btn-flipped, .ccm-page button.btn.btn-alt.btn-flipped, .ccm-page input.btn.btn-alt.btn-flipped { border-radius: 0 0 1rem 1rem; } .ccm-page .btn.btn-sml, .ccm-page a.btn.btn-sml, .ccm-page button.btn.btn-sml, .ccm-page input.btn.btn-sml { font-size: var(--fs-200); padding: 0.5rem 1rem; } .ccm-page .btn.btn-lge, .ccm-page a.btn.btn-lge, .ccm-page button.btn.btn-lge, .ccm-page input.btn.btn-lge { font-size: var(--fs-500); } .ccm-page .btn.btn-square, .ccm-page a.btn.btn-square, .ccm-page button.btn.btn-square, .ccm-page input.btn.btn-square { --btn-clr: var(--clr-neutral-100); --clr-ul: var(--clr-secondary-700); --clr-ul-hover: var(--clr-secondary-800); border-radius: 0.5rem; border-bottom: 0.5rem solid var(--clr-ul); padding: 0.75rem 2rem; } .ccm-page .btn.btn-square:focus-visible, .ccm-page .btn.btn-square.focus, .ccm-page .btn.btn-square:hover, .ccm-page .btn.btn-square.hover, .ccm-page a.btn.btn-square:focus-visible, .ccm-page a.btn.btn-square.focus, .ccm-page a.btn.btn-square:hover, .ccm-page a.btn.btn-square.hover, .ccm-page button.btn.btn-square:focus-visible, .ccm-page button.btn.btn-square.focus, .ccm-page button.btn.btn-square:hover, .ccm-page button.btn.btn-square.hover, .ccm-page input.btn.btn-square:focus-visible, .ccm-page input.btn.btn-square.focus, .ccm-page input.btn.btn-square:hover, .ccm-page input.btn.btn-square.hover { border-bottom-color: var(--clr-ul-hover); } .ccm-page .btn.btn-square.btn-alt, .ccm-page a.btn.btn-square.btn-alt, .ccm-page button.btn.btn-square.btn-alt, .ccm-page input.btn.btn-square.btn-alt { --clr-ul: var(--clr-primary-700); --clr-ul-hover: var(--clr-primary-900); } /* .btn { --btn-ff: var(--ff-accent); --btn-fw: var(--fw-700); --btn-fs: var(--fs-300); --btn-brdr: 2px solid transparent; --btn-pad: 0.75em 1em; --btn-bg: var(--clr-secondary-500); --btn-clr: var(--clr-neutral-100); --btn-hvr-bg: var(--clr-secondary-700); --btn-hvr-clr: var(--clr-neutral-100); --btn-fcs-clr: var(--clr-secondary-700); --btn-fcs-ol: transparent; } .btn, a.btn, button.btn, input.btn { background: var(--btn-bg); color: var(--btn-clr); font-family: var(--btn-ff); font-weight: var(--btn-fw); font-size: var(--btn-fs); line-height: 1.2; padding: var(--btn-pad); border: var(--btn-brdr); border-radius: 0 0 1rem 1rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-shadow: none; cursor: pointer; min-width: 6ch; box-shadow: 0 1px 1px 2px rgb(0 0 0 / 0.03), 0 4px 4px rgb(0 0 0 / 0.1); transition: all 0.22s ease; } a.btn { text-decoration: none; } .btn:active, .btn:hover, a.btn:active, a.btn:hover, button.btn:active, button.btn:hover, input.btn:active, input.btn:hover { background: var(--btn-hvr-bg); color: var(--btn-hvr-clr); box-shadow: 0 4px 8px rgb(0 0 0 / 0.06), 0 8px 16px rgb(0 0 0 / 0.12); } .btn:focus, a.btn:focus, button.btn:focus, input.btn:focus, .btn:focus-visible, a.btn:focus-visible, button.btn:focus-visible, input.btn:focus-visible { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--btn-focus), 0 1px 1px rgba(0, 0, 0, 0.075), 0 2px 2px rgba(0, 0, 0, 0.075), 0 4px 4px rgba(0, 0, 0, 0.075); outline-color: var(--btn-fcs-ol); outline-style: solid; } .btn.btn-primary { --btn-bg: var(--clr-brand-primary); --btn-clr: var(--clr-primary-100); --btn-hvr-bg: var(--clr-brand-dark); --btn-hvr-clr: var(--clr-primary-100); --btn-fcs-clr: var(--clr-brand-dark); } } /* .btn.btn-alt { --btn-background: var(--clr-purple); --btn-color: #fff; --btn-background-hover: var(--brand-purple); --btn-color-hover: #fff; --btn-focus: var(--brand-purple); } .btn.btn-blue { --btn-background: var(--brand-blue); --btn-color: #fff; --btn-background-hover: var(--brand-blue-dark); --btn-color-hover: #fff; --btn-focus: var(--brand-blue-dark); } .btn.btn-white { --btn-background: #fff; --btn-color: var(--clr-purple); --btn-background-hover: rgba(255, 255, 255, 0.8); --btn-color-hover: var(--brand-pink); --btn-focus: #fff; } .btn.btn-magenta { --btn-background: #95065e; --btn-color: #fff; --btn-background-hover: #7d0220; --btn-color-hover: #fff; --btn-focus: #95065e; } .btn.btn-orange { --btn-background: #ff4b24; --btn-color: #fff; --btn-background-hover: #bb3e23; --btn-color-hover: #fff; --btn-focus: #ff4b24; } .btn.btn-sml { font-size: 0.875rem; padding-block: 0.5rem; } @media screen and (-ms-high-contrast: active) { .btn { border: 2px solid; } } } a.btn.btn-download { gap: 0.5rem; text-wrap: balance; text-align: left; > svg:first-child { flex: 0 0 24px; } small { color: $clr-tint; font-weight: $fw-400; } } #enableRecite { position: absolute; padding: 1rem 0.5rem 0.25rem 0.5rem; top: -1rem; right: max(50vw - 570px, 2rem); } .ccm-toolbar-visible #enableRecite { top: 30px; } /* .ccm-page { a.btn { // link buttons text-decoration: none; } button.btn { // buttons border: none; background-color: transparent; font-family: inherit; padding: 0; cursor: pointer; @media screen and (-ms-high-contrast: active) { border: 2px solid currentcolor; } } .btn, a.btn, button.btn { --btn-background: var(--clr-primary-500) --btn-color: var(--clr-neutral-100); --btn-background-hover: var(--clr-primary-700); --btn-color-hover: var(--clr-primary-500) --btn-focus: var(--btn-background); --outline-color: transparent; display: inline-flex; align-items: center; justify-content: center; background-color: var(--btn-background); color: var(--btn-color); padding: 0.5em 1em; border: 2px solid transparent; min-width: 6ch; text-align: center; //font-family: $ff-heading; line-height: 1.1; font-weight: var(--fw-700); transition: 220ms all ease; &:hover, &:active { background-color: var(--btn-background-hover); color: var(--btn-color-hover); } &.focus, &:focus { outline-style: solid; outline-color: transparent; box-shadow: inset 0 0 0 3px var(--clr-neutral-100), 0 0 0 3px var(--btn-focus), 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075); } } .bg-secondary .btn, .bg-secondary a.btn, .bg-secondary button.btn { --btn-background: var(--clr-secondary-700); --btn-color: var(--clr-secondary-500); --btn-background-hover: var(--clr-neutral-100); //--btn-color-hover: var(--clr-secondary-500) } .bg-highlight .btn, .bg-highlight a.btn, .bg-highlight button.btn { --btn-background: var(--clr-neutral-100); --btn-color: var(--clr-primary-500); --btn-background-hover: var(--clr-primary-500); --btn-color-hover: var(--clr-neutral-100); } } */ .ccm-page .form-stacked fieldset { display: grid; gap: 1rem; } .ccm-page .form-stacked fieldset .mb-3 { display: grid; gap: 0.5rem; font-size: var(--fs-300); font-weight: var(--fw-700); } .ccm-page .form-stacked fieldset .mb-3 span { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .ccm-page .form-stacked fieldset .mb-3:has(span) label::after { content: "*"; color: var(--clr-text-muted); padding-left: 0.5rem; } .ccm-page .form-stacked { display: grid; gap: 1rem; } .ccm-page .form-stacked input, .ccm-page .form-stacked textarea { padding: 0.5rem; font: inherit; font-weight: var(--fw-300); border: 1px solid var(--clr-primary-700); accent-color: var(--clr-primary-500); transition: 1s ease; } .ccm-page .form-stacked input:focus, .ccm-page .form-stacked textarea:focus { outline: 0; } .ccm-page .form-stacked input:hover, .ccm-page .form-stacked input:active, .ccm-page .form-stacked textarea:hover, .ccm-page .form-stacked textarea:active { border-color: var(--clr-primary-900); background: var(--clr-primary-100); } .ccm-page .form-stacked input:focus, .ccm-page .form-stacked textarea:focus { border-color: var(--clr-primary-500); background: var(--clr-primary-100); } .ccm-page .form-stacked input::-moz-placeholder { color: var(--clr-neutral-400); } .ccm-page .form-stacked input::placeholder { color: var(--clr-neutral-400); } .ccm-page .form-stacked input:-moz-read-only { cursor: default; } .ccm-page .form-stacked input:read-only { cursor: default; } .ccm-page .form-stacked input:disabled { opacity: 0.5; cursor: not-allowed; } .ccm-page .form-stacked select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; border: 1px solid var(--clr-primary-700); accent-color: var(--clr-primary-500); cursor: pointer; font: inherit; font-weight: 400; width: 100%; padding: 0.5rem; transition: all 0.5s ease; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .ccm-page .form-stacked select:focus { border-color: var(--clr-primary-500); background: var(--clr-primary-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; } .ccm-page .form-stacked .form-check label { font-weight: var(--fw-300); } .ccm-page .form-actions::after { content: "* indicates a required field"; display: block; font-size: var(--fs-100); color: var(--clr-text-muted); padding-top: 0.5rem; } .ccm-page .ccm-form { display: grid; gap: 1rem; } .ccm-page .ccm-form .alert-success { background: var(--clr-primary-100); border: 1px solid var(--clr-primary-500); color: var(--clr-primary-700); font-weight: var(--fw-300); padding: 1rem; } .ccm-page .ccm-form .alert-danger { background: var(--clr-secondary-100); color: var(--clr-secondary-700); border: 1px solid var(--clr-secondary-500); padding: 1rem; font-weight: var(--fw-300); } .ccm-page .ccm-form .alert-danger ul.ccm-error { padding-left: 1rem; } .ccm-page .ccm-form .alert-danger ul.ccm-error > li { padding-left: 0; } .ccm-page .ccm-form .alert-danger ul.ccm-error > li::marker { color: var(--clr-secondary-500); } .ccm-page .ccm-form:has(.alert-danger) .mb-3:has(span) input[value=""], .ccm-page .ccm-form:has(.alert-danger) .mb-3:has(span) input:not([value]), .ccm-page .ccm-form:has(.alert-danger) .mb-3:has(span) input:invalid { border-color: var(--clr-secondary-500); } .ccm-page .search-inline2 { position: relative; } .ccm-page .search-inline2 input { width: 100%; background: var(--clr-primary-500); font-weight: var(--fw-500); color: #fff; font: inherit; accent-color: var(--clr-primary-500); border: 1px solid rgba(0, 0, 0, 0); border-radius: 999em; padding: 0.5rem 1.5rem; transition: all 1s; outline: none; } .ccm-page .search-inline2 input::-moz-placeholder { color: var(--clr-primary-700); font-weight: var(--fw-500); } .ccm-page .search-inline2 input::placeholder { color: var(--clr-primary-700); font-weight: var(--fw-500); } .ccm-page .search-inline2 input:focus, .ccm-page .search-inline2:focus-within input { background: var(--clr-primary-700); border-color: var(--clr-primary-700); box-shadow: 0 0 0 3px var(--clr-primary-500); } .ccm-page .search-inline2 button { position: absolute; right: 3px; top: 2px; padding: 0.5rem 1rem 0.5rem 0.9rem; border-radius: 0 999em 999em 0; border: 0 solid; background: transparent; outline: 1px solid transparent; border: none; cursor: pointer; color: #fff; } .ccm-page .search-inline2 button:hover { opacity: 0.8; } .ccm-page .search-inline2 button:focus-visible { background: var(--clr-primary-500); outline: 2px solid var(--clr-neutral-100); outline-offset: 0; } .ccm-page .search-inline { display: grid; grid-template-columns: 1fr max-content; } .ccm-page .search-inline input { padding: 0.5rem 1.5rem; border-radius: 999em 0 0 999em; font: inherit; font-weight: var(--fw-300); border: 1px solid transparent; accent-color: var(--clr-primary-500); transition: 1s ease; } .ccm-page .search-inline input:focus { outline: 0; } .ccm-page .search-inline input:hover, .ccm-page .search-inline input:active { border-color: transparent; background: var(--clr-primary-100); } .ccm-page .search-inline input:focus { border-color: transparent; background: var(--clr-primary-100); } .ccm-page .search-inline input::-moz-placeholder { color: var(--clr-neutral-400); } .ccm-page .search-inline input::placeholder { color: var(--clr-neutral-400); } .ccm-page .search-inline .btn { border-radius: 0 999em 999em 0; padding: 0.5rem 1.5rem 0.5rem 1rem; } #mainNav { position: relative; } #menuToggle { position: absolute; right: 0; top: -41px; display: none; } .jsMenu .menuToggle, .jsMenu #menuToggle { display: inline-flex; align-items: center; gap: 0.5rem; } @media screen and (min-width: 45em) { .jsMenu #menuToggle { display: none; } } .ccm-page a.menuToggle, #menuToggle { --tgl-clr: var(--clr-neutral-100); --tgl-bg: transparent; --tgl-hvr-clr: var(--clr-neutral-300); --tgl-hvr-bg: transparent; --tgl-act-clr: var(--clr-primary-300); --tgl-act-bg: hsl(0 0% 0% / 0.2); --tgl-fcs-ol: var(--clr-neutral-300); color: var(--tgl-clr); font-family: var(--ff-accent); font-weight: bold; font-size: var(--fs-400); text-decoration: none; border-radius: 1rem 1rem 0 0; padding: 0.25rem 0.75rem; width: -moz-max-content; width: max-content; } .ccm-page a.menuToggle:focus, #menuToggle:focus { outline: none; } .ccm-page a.menuToggle:focus-visible, .ccm-page a.menuToggle.focus, #menuToggle:focus-visible, #menuToggle.focus { color: var(--tgl-hvr-clr); outline: 2px solid var(--tgl-fcs-ol); outline-offset: -2px; } .ccm-page a.menuToggle:active, .ccm-page a.menuToggle.active, #menuToggle:active, #menuToggle.active { background: var(--tgl-act-bg); color: var(--tgl-act-clr); } .ccm-page a.menuToggle:hover, .ccm-page a.menuToggle.hover, #menuToggle:hover, #menuToggle.hover { color: var(--tgl-hvr-clr); } .ccm-page a.menuToggle .menu-icon, #menuToggle .menu-icon { position: relative; display: inline-block; width: 25px; height: 2px; background-color: currentColor; /* Matches the text color */ transition: background 0.3s; vertical-align: middle; } .ccm-page a.menuToggle .menu-icon::before, .ccm-page a.menuToggle .menu-icon::after, #menuToggle .menu-icon::before, #menuToggle .menu-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: currentColor; transition: transform 0.3s, top 0.3s; } .ccm-page a.menuToggle .menu-icon::before, #menuToggle .menu-icon::before { top: -8px; } .ccm-page a.menuToggle .menu-icon::after, #menuToggle .menu-icon::after { top: 8px; } .ccm-page a.menuToggle.active .menu-icon, #menuToggle.active .menu-icon { background: transparent; } .ccm-page a.menuToggle.active .menu-icon:before, #menuToggle.active .menu-icon:before { top: 0; transform: rotate(45deg); } .ccm-page a.menuToggle.active .menu-icon:after, #menuToggle.active .menu-icon:after { top: 0; transform: rotate(-45deg); } ul.mobile, #mainMenu, .jsMenu [aria-expanded=true] + #mainMenu { display: flex; flex-direction: column; } .jsMenu #mainMenu, .jsMenu [aria-expanded=false] + #mainMenu { display: none; } @media screen and (min-width: 45em) { ul.desktop, #mainMenu, .jsMenu #mainMenu, .jsMenu [aria-expanded=false] + #mainMenu { display: flex; gap: 0.5rem; flex-direction: row; align-items: flex-end; justify-content: flex-end; } } ul.mobile, ul.desktop, #mainMenu { --nav-clr: var(--clr-neutral-100); --nav-bg: transparent; --nav-hvr-clr: var(--clr-neutral-300); --nav-hvr-bg: hsl(0 0% 0% / 0.2); --nav-act-clr: var(--clr-primary-300); --nav-act-bg: hsl(0 0% 0% / 0.2); --nav-fcs-ol: var(--clr-neutral-300); list-style: none; padding: 0; margin: 0; } ul.mobile > li, ul.desktop > li, #mainMenu > li { margin-top: 0; } ul.mobile a, ul.desktop a, #mainMenu a { text-decoration: none; display: block; line-height: 1.2; } ul.mobile a:focus, ul.desktop a:focus, #mainMenu a:focus { outline: none; } ul.mobile > li > a, ul.desktop > li > a, #mainMenu > li > a { color: var(--nav-clr); font-family: var(--ff-accent); font-weight: bold; font-size: var(--fs-400); padding: 0.5rem 1rem; } ul.mobile > li > a:focus-visible, ul.mobile > li > a.focus, ul.desktop > li > a:focus-visible, ul.desktop > li > a.focus, #mainMenu > li > a:focus-visible, #mainMenu > li > a.focus { background: var(--nav-hvr-bg); color: var(--nav-hvr-clr); outline: 2px solid var(--nav-fcs-ol); outline-offset: -2px; } ul.mobile > li.nav-path-selected > a, ul.mobile > li a[aria-expanded=true], ul.mobile > li > a:active, ul.mobile > li > a.active, ul.desktop > li.nav-path-selected > a, ul.desktop > li a[aria-expanded=true], ul.desktop > li > a:active, ul.desktop > li > a.active, #mainMenu > li.nav-path-selected > a, #mainMenu > li a[aria-expanded=true], #mainMenu > li > a:active, #mainMenu > li > a.active { background: var(--nav-act-bg); color: var(--nav-act-clr); } ul.mobile > li.nav-path-selected > a:hover, ul.mobile > li > a:hover, ul.mobile > li > a.hover, ul.desktop > li.nav-path-selected > a:hover, ul.desktop > li > a:hover, ul.desktop > li > a.hover, #mainMenu > li.nav-path-selected > a:hover, #mainMenu > li > a:hover, #mainMenu > li > a.hover { background: var(--nav-hvr-bg); color: var(--nav-hvr-clr); } @media screen and (min-width: 45em) { ul.desktop, #mainMenu { --nav-clr: var(--clr-neutral-100); --nav-bg: transparent; --nav-hvr-clr: var(--clr-neutral-300); --nav-hvr-bg: hsl(0 0% 0% / 0.2); --nav-act-clr: var(--clr-primary-100); --nav-act-bg: transparent; --nav-fcs-ol: var(--clr-secondary-500); display: flex; flex-direction: row; gap: 1rem; } ul.desktop a, #mainMenu a { text-decoration: none; display: block; } ul.desktop > li > a, #mainMenu > li > a { border-bottom: 5px solid transparent; border-radius: 1rem 1rem 0 0; font-size: var(--fs-300); } ul.desktop > li > a:active, ul.desktop > li > a.active, #mainMenu > li > a:active, #mainMenu > li > a.active { border-bottom: 5px solid var(--nav-clr); } ul.desktop > li > a:focus-visible, ul.desktop > li > a.focus, #mainMenu > li > a:focus-visible, #mainMenu > li > a.focus { background: var(--nav-hvr-bg); color: var(--nav-hvr-clr); border-bottom: 5px solid 5px solid transparent; outline: 2px solid var(--nav-fcs-ol); outline-offset: -2px; } ul.desktop > li > a:hover, ul.desktop > li > a.hover, #mainMenu > li > a:hover, #mainMenu > li > a.hover { background: var(--nav-hvr-bg); color: var(--nav-hvr-clr); border-bottom: 5px solid 5px solid transparent; } ul.desktop li:has(.dropdown), #mainMenu li:has(.dropdown) { position: relative; } } @media screen and (min-width: 60em) { ul.desktop > li > a, #mainMenu > li > a { font-size: var(--fs-400); } } .jsMenu .dropdown ul, .jsMenu .dropdown a[aria-expanded=false] + ul { display: none; } ul.mobile .dropdown ul, .dropdown ul, .jsMenu .dropdown a[aria-expanded=true] + ul { display: block; } @media screen and (min-width: 45em) { .dropdown ul, .jsMenu .dropdown ul, .jsMenu .dropdown a[aria-expanded=false] + ul { display: none; } ul.desktop .dropdown ul, .jsMenu .dropdown a[aria-expanded=true] + ul { display: block; } } ul.mobile ul, ul.desktop ul, #mainMenu ul { --drp-clr: var(--clr-primary-700); --drp-bg: var(--clr-neutral-100); --drp-hvr-clr: var(--clr-primary-700); --drp-hvr-bg: var(--clr-primary-100); --drp-act-clr: var(--clr-neutral-900); --drp-act-bg: var(--clr-neutral-100); --drp-fcs-ol: var(--clr-primary-700); background: var(--drp-bg); padding: 0.5rem; list-style: none; } ul.mobile ul a, ul.desktop ul a, #mainMenu ul a { color: var(--drp-clr); font-weight: bold; font-size: var(--fs-300); padding: 0.25rem 0.5rem; } ul.mobile ul a:active, ul.mobile ul a.active, ul.desktop ul a:active, ul.desktop ul a.active, #mainMenu ul a:active, #mainMenu ul a.active { font-weight: bold; } ul.mobile ul a:hover, ul.mobile ul a.hover, ul.desktop ul a:hover, ul.desktop ul a.hover, #mainMenu ul a:hover, #mainMenu ul a.hover { background: var(--drp-hvr-bg); color: var(--drp-hvr-clr); } ul.mobile ul a:focus-visible, ul.mobile ul a.focus, ul.desktop ul a:focus-visible, ul.desktop ul a.focus, #mainMenu ul a:focus-visible, #mainMenu ul a.focus { background: var(--drp-hvr-bg); color: var(--drp-hvr-clr); outline: 2px solid var(--drp-fcs-ol); outline-offset: -2px; } @media screen and (min-width: 45em) { ul.desktop ul, #mainMenu ul { z-index: 99; text-align: left; position: absolute; border-radius: 0 0 1rem 1rem; min-width: 300px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.12); } } /* // main menu // dropdown #mainMenu ul a, #mainMenu ul a:link { color: var(--navdrp-clr); background-color: var(--navdrp-bg); padding: var(--navdrp-pad); font-weight: var(--navdrp-fw); } #mainMenu ul a:active, #mainMenu > li.nav-path-selected ul a:active, #mainMenu > li a[aria-expanded='true'] + ul a:active { background-color: var(--navdrp-actv-bg); color: var(--navdrp-actv-clr); } #mainMenu ul a:hover, #mainMenu > li.nav-path-selected ul a:hover, #mainMenu > li a[aria-expanded='true'] + ul a:hover, #mainMenu ul a:focus-visible, #mainMenu > li.nav-path-selected ul a:focus-visible, #mainMenu > li a[aria-expanded='true'] + ul a:focus-visible { background: var(--navdrp-hvr-bg); color: var(--navdrp-hvr-clr); } #mainMenu ul a:focus-visible { background: var(--navdrp-fcs-bg); color: var(--navdrp-fcs-clr); outline: var(--navdrp-fcs-ol); outline-offset: -2px; } @include mq(sm) { //#mainMenu ul a, //#mainMenu ul a:link { //padding: var(--navdrp-pad); //} } // BASE MENU STYLES // remove list bullets & padding #mainMenu { list-style: none; padding-inline: 0; margin: 0; } #mainMenu ul { list-style: none; padding: 0.5rem; } */ .card { background: var(--clr-neutral-100); border: 1px solid var(--clr-neutral-300); border-radius: 1rem; overflow: clip; text-align: center; transition: 0.3s ease; display: flex; flex-direction: column; } .card header, .card .card-body, .card footer { padding-inline: 1rem; } .card footer { margin-top: auto; } .card header { font-family: var(--ff-accent); transition: 0.3s ease; } .card .card-img { aspect-ratio: 4/3; overflow: hidden; } .card .card-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.3s ease; } .card.card-link:hover header { transform: translatey(-3px); } .card.card-link:hover .card-img img { transform: scale(1.05); } .card.card-link { position: relative; } .card.card-link footer a.btn { /*position: relative;*/ /*z-index: 2;*/ } .card.card-link footer a.btn:after { content: ""; position: absolute; inset: 0; z-index: 1; } .ccm-page .cardV9 { --clr-text: var(--clr-primary-900); --clr-text-muted: var(--clr-neutral-500); --clr-text-highlight: var(--clr-primary-500); --clr-heading: var(--clr-primary-500); --clr-link: var(--clr-primary-700); --clr-link-hover: var(--clr-primary-500); background: var(--clr-neutral-100); color: var(--clr-text); border: 1px solid var(--clr-neutral-300); border-radius: 1rem; overflow: clip; text-align: center; transition: 0.3s ease; display: flex; flex-direction: column; } .ccm-page .cardV9 * { margin: 0; } .ccm-page .cardV9 > header, .ccm-page .cardV9 .card-body, .ccm-page .cardV9 > footer { padding-inline: 1rem; } .ccm-page .cardV9 p.h3, .ccm-page .cardV9 p.h4 { line-height: 1.2; color: var(--clr-text-highlight); } .ccm-page .cardV9 p { text-wrap: balance; } .ccm-page .cardV9 header { padding-block-start: 1rem; transition: 0.3s ease; } .ccm-page .cardV9 header > * + * { margin-block-start: 0.5rem; } .ccm-page .cardV9 header p { min-height: 2lh; } .ccm-page .cardV9 .card-img { aspect-ratio: var(--img-ratio, 4/3); overflow: hidden; margin-block-end: 0.5rem; } .ccm-page .cardV9 .card-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.3s ease; } .ccm-page .cardV9 .card-body { margin-block-end: 0.5rem; } .ccm-page .cardV9 footer { padding-block-end: 1rem; margin-top: auto; } .ccm-page .cardV9 footer > * + * { margin-block-start: 0.5rem; } .ccm-page .cardV9 footer p { font-size: var(--fs-400); } .ccm-page .cardV9.card-link { position: relative; cursor: pointer; } .ccm-page .cardV9.card-link a.card-btn { text-decoration: none; color: var(--clr-primary-700); } .ccm-page .cardV9.card-link a.card-btn:after { content: ""; position: absolute; inset: 0; z-index: 1; } .ccm-page .cardV9.card-link:hover header, .ccm-page .cardV9.card-link:hover a.card-btn { transform: translatey(-3px); } .ccm-page .cardV9.card-link:hover a.card-btn, .ccm-page .cardV9.card-link:hover a.card-btn:hover { color: var(--clr-primary-700); } .ccm-page .cardV9.card-link:hover .card-img img { transform: scale(1.05); } .ccm-page .cardV9.card-link:hover footer a.btn { /*position: relative;*/ /*z-index: 2;*/ } .ccm-page .cardV9.card-link:hover footer a.btn:after { content: ""; position: absolute; inset: 0; z-index: 1; } ul.pagination { display: flex; align-items: center; gap: 0.25rem; padding: 1rem 0; margin-block: 2rem; border-top: 1px solid var(--clr-neutral-300); flex-wrap: wrap; list-style: none; } ul.pagination .page-item { display: inline-flex; justify-content: center; margin: 0; color: var(--clr-primary-700); } ul.pagination .page-item.active .page-link, ul.pagination .page-item.active a.page-link { border-color: var(--clr-primary-500); color: var(--clr-primary-500); background-color: var(--clr-neutral-100); } ul.pagination .page-item.disabled .page-link, ul.pagination .page-item.disabled a.page-link { color: var(--clr-neutral-500); background-color: var(--clr-neutral-300); } ul.pagination .page-item.prev { margin-inline-end: auto; } ul.pagination .page-item.next { margin-inline-start: auto; } ul.pagination span.page-link, ul.pagination a.page-link { inline-size: 2rem; block-size: 2rem; padding: 0; color: inherit; border-radius: 0.5rem; border: 1px solid var(--clr-neutral-500); text-align: center; line-height: 2rem; font-family: var(--ff-accent); } ul.pagination a.page-link { text-decoration: none; } ul.pagination a.page-link:hover { background-color: var(--clr-neutral-100); color: var(--clr-primary-500); } .accordion, .accordion-primary { --det-brdr: 1px solid var(--clr-neutral-100); --det-clr: var(--clr-neutral-900); --det-bg: var(--clr-neutral-100); --sum-clr: var(--clr-neutral-100); --sum-clr-open: var(--clr-neutral-100); --sum-txt-shdw: 1px 1px 1px var(--clr-primary-900); --sum-bg: var(--clr-primary-500); --sum-bg-open: var(--clr-primary-700); } .accordion.accordion-secondary { --sum-clr: var(--clr-neutral-100); --sum-clr-open: var(--clr-neutral-100); --sum-txt-shdw: 1px 1px 1px var(--clr-secondary-900); --sum-bg: var(--clr-secondary-500); --sum-bg-open: var(--clr-secondary-700); } .accordion.accordion-highlight { --sum-clr: var(--clr-highlight-100); --sum-clr-open: var(--clr-highlight-100); --sum-txt-shdw: 1px 1px 1px var(--clr-highlight-900); --sum-bg: var(--clr-highlight-500); --sum-bg-open: var(--clr-highlight-700); } .accordion-neutral { --det-brdr: 1px solid var(--clr-primary-700); --det-clr: var(--clr-primary-700); --det-bg: var(--clr-primary-100); --sum-clr: var(--clr-primary-700); --sum-clr-open: var(--clr-primary-700); --sum-txt-shdw: 1px 1px 1px var(--clr-primary-700); --sum-bg: var(--clr-neutral-100); --sum-bg-open: var(--clr-primary-100); } .accordion { border: var(--det-brdr); border-bottom: none; border-radius: 0.5rem; overflow: hidden; } .accordion details { border-bottom: var(--det-brdr); background: var(--det-bg); color: var(--det-clr); } .accordion summary, .accordion details > div { padding: 1rem; } .accordion summary { font-weight: bold; position: relative; padding-block: 0.5rem; padding-inline-end: 3rem; cursor: pointer; background: var(--sum-bg); box-shadow: 0px 1px 0px 0px var(--det-brdr); transition: background 0.3s ease; color: var(--sum-clr); list-style: none; /* remove default arrow */ } .accordion summary.h1, .accordion summary.h2, .accordion summary.h3, .accordion summary.h4, .accordion summary.h5, .accordion summary.h6, .accordion summary.p { margin-bottom: 0; } .accordion summary::after { content: url("data:image/svg+xml,"); display: block; width: 24px; height: 24px; position: absolute; right: 1rem; top: 50%; transform: translatey(-50%) rotate(-90deg); transition: transform 0.4s ease; color: var(--sum-clr); } .accordion.accordion-neutral summary::after { content: url("data:image/svg+xml,"); } .accordion summary:hover, .accordion summary:focus-visible, .accordion details[open] summary { background: var(--sum-bg-open); color: var(--sum-clr-open); } .accordion details[open] summary::after { content: url("data:image/svg+xml,"); transform: translatey(-50%) rotate(0deg); color: var(--sum-clr-open); } .accordion.accordion-neutral details[open] summary::after { content: url("data:image/svg+xml,"); transform: translatey(-50%) rotate(0deg); } .accordion.accordion-rainbow details:nth-child(3n+1) summary { background: var(--clr-primary-500); color: var(--clr-neutral-100); } .accordion.accordion-rainbow details:nth-child(3n+1) summary:hover, .accordion.accordion-rainbow details:nth-child(3n+1) summary:focus-visible, .accordion.accordion-rainbow details:nth-child(3n+1) [open] summary { background: var(--clr-primary-700); color: var(--clr-neutral-100); } .accordion.accordion-rainbow details:nth-child(3n+2) summary { background: var(--clr-secondary-500); color: var(--clr-neutral-100); } .accordion.accordion-rainbow details:nth-child(3n+2) summary:hover, .accordion.accordion-rainbow details:nth-child(3n+2) summary:focus-visible, .accordion.accordion-rainbow details:nth-child(3n+2) [open] summary { background: var(--clr-secondary-700); color: var(--clr-neutral-100); } .accordion.accordion-rainbow details:nth-child(3n) summary { background: var(--clr-highlight-500); color: var(--clr-neutral-100); } .accordion.accordion-rainbow details:nth-child(3n) summary:hover, .accordion.accordion-rainbow details:nth-child(3n) summary:focus-visible, .accordion.accordion-rainbow details:nth-child(3n) [open] summary { background: var(--clr-highlight-700); color: var(--clr-neutral-100); } /* animate opening */ :root { interpolate-size: allow-keywords; } .accordion ::details-content { transition: height 0.3s linear, content-visibility 0.3s ease allow-discrete; height: 0; overflow: clip; } [open]::details-content { height: auto; } .bgTabs > input { display: none; } .bgTabs-content { display: grid; padding-block: 2rem; } .bgTabs-content > .bgPanel { grid-column: 1; grid-row: 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .ccm-edit-mode .bgTabs-content > .bgPanel { grid-row: initial; grid-column: initial; visibility: visible; opacity: 1; pointer-events: auto; } .bgTabs > input:nth-of-type(1):checked ~ .bgTabs-content > .bgPanel:nth-of-type(1) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(2):checked ~ .bgTabs-content > .bgPanel:nth-of-type(2) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(3):checked ~ .bgTabs-content > .bgPanel:nth-of-type(3) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(4):checked ~ .bgTabs-content > .bgPanel:nth-of-type(4) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(5):checked ~ .bgTabs-content > .bgPanel:nth-of-type(5) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(6):checked ~ .bgTabs-content > .bgPanel:nth-of-type(6) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(7):checked ~ .bgTabs-content > .bgPanel:nth-of-type(7) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs > input:nth-of-type(8):checked ~ .bgTabs-content > .bgPanel:nth-of-type(8) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .bgTabs { --tab-bg: var(--clr-surface-2); --tab-bg-hover: var(--clr-neutral-100); --tab-bg-active: #a4d0d0; --tab-clr: var(--clr-neutral-700); --tab-clr-hover: var(--clr-neutral-700); --tab-clr-active: var(--clr-primary-700); } .bgTabs-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .bgTabs-nav > label { padding: 0.5rem 2rem; color: var(--tab-clr); background: var(--tab-bg); text-align: center; border-radius: 1rem; font-weight: var(--fw-700); } .bgTabs-nav > label:hover { color: var(--tab-clr-hover); background: var(--tab-bg-hover); cursor: pointer; } .bgTabs > input:nth-of-type(1):checked ~ .bgTabs-nav > label:nth-of-type(1) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(2):checked ~ .bgTabs-nav > label:nth-of-type(2) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(3):checked ~ .bgTabs-nav > label:nth-of-type(3) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(4):checked ~ .bgTabs-nav > label:nth-of-type(4) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(5):checked ~ .bgTabs-nav > label:nth-of-type(5) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(6):checked ~ .bgTabs-nav > label:nth-of-type(6) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(7):checked ~ .bgTabs-nav > label:nth-of-type(7) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs > input:nth-of-type(8):checked ~ .bgTabs-nav > label:nth-of-type(8) { color: var(--tab-clr-active); background: var(--tab-bg-active); cursor: initial; } .bgTabs-content { background: var(--tab-panel-bg); color: var(--tab-panel-clr); } .bgTabs-neutral .bgTabs-nav, .bgTabs-primary .bgTabs-nav, .bgTabs-secondary .bgTabs-nav { padding: 2rem 0 0 0; } .bgTabs-primary .bgTabs-nav { --tab-bg: #a4d0d0; --tab-bg-hover: var(--clr-surface-2); --tab-bg-active: var(--clr-neutral-100); --tab-clr: var(--clr-neutral-700); --tab-clr-hover: var(--clr-neutral-700); --tab-clr-active: var(--clr-primary-700); background: var(--clr-primary-500); } @media screen and (min-width: 60em) { .bgTabs-neutral .bgTabs-nav, .bgTabs-primary .bgTabs-nav, .bgTabs-secondary .bgTabs-nav { padding-bottom: 0; } .bgTabs-neutral .bgTabs-nav > label, .bgTabs-primary .bgTabs-nav > label, .bgTabs-secondary .bgTabs-nav > label { border-radius: 1rem 1rem 0 0; } } .bgTabs.bgTabs-rounded .bgTabs-nav.bgTabs-round label { background: transparent; } .bgTabs-nav.bgTabs-round label { padding: 0; border-radius: 50%; width: 70px; height: 70px; line-height: 125px; opacity: 0.7; transition: opacity 0.3s ease; } @media screen and (min-width: 45em) { .bgTabs-nav.bgTabs-round label { width: 90px; height: 90px; } } @media screen and (min-width: 60em) { .bgTabs-nav.bgTabs-round label { width: 110px; height: 110px; } } @media screen and (min-width: 75em) { .bgTabs-nav.bgTabs-round label { width: 125px; height: 125px; } } .bgTabs-nav.bgTabs-round label:hover { background: transparent; cursor: pointer; opacity: 1; } .bgTabs > input:nth-of-type(1):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(1), .bgTabs > input:nth-of-type(1):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(1), .bgTabs > input:nth-of-type(1):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(1):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(2):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(2), .bgTabs > input:nth-of-type(2):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(2), .bgTabs > input:nth-of-type(2):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(2):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(3):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(3), .bgTabs > input:nth-of-type(3):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(3), .bgTabs > input:nth-of-type(3):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(3):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(4):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(4), .bgTabs > input:nth-of-type(4):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(4), .bgTabs > input:nth-of-type(4):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(4):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(5):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(5), .bgTabs > input:nth-of-type(5):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(5), .bgTabs > input:nth-of-type(5):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(5):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(6):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(6), .bgTabs > input:nth-of-type(6):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(6), .bgTabs > input:nth-of-type(6):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(6):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(7):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(7), .bgTabs > input:nth-of-type(7):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(7), .bgTabs > input:nth-of-type(7):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(7):hover { background: transparent; opacity: 1; } .bgTabs > input:nth-of-type(8):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(8), .bgTabs > input:nth-of-type(8):checked ~ .bgTabs-nav.bgTabs-round:has(> label:hover) > label:nth-of-type(8), .bgTabs > input:nth-of-type(8):checked ~ .bgTabs-nav.bgTabs-round > label:nth-of-type(8):hover { background: transparent; opacity: 1; } .bgTabs.bgTabs-primary { --tab-bg: var(--clr-primary-100); --tab-bg-hover: #a4d0d0; --tab-bg-active: var(--clr-primary-500); --tab-clr: var(--clr-primary-700); --tab-clr-hover: var(--clr-primary-700); --tab-clr-active: var(--clr-neutral-100); --tab-panel-bg: var(--clr-primary-500); --tab-panel-clr: var(--clr-neutral-100); } .bgTabs.bgTabs-primary :where(blockquote) { --quote-clr: var(--clr-highlight-100); --cite-clr: var(--clr-highlight-300); --quote-accent: var(--clr-highlight-500); } .bgTabs.bgTabs-neutral { --tab-bg: var(--clr-neutral-300); --tab-bg-hover: var(--clr-neutral-400); --tab-bg-active: var(--clr-neutral-100); --tab-clr: var(--clr-neutral-700); --tab-clr-hover: var(--clr-neutral-900); --tab-clr-active: var(--clr-neutral-900); --tab-panel-bg: var(--clr-neutral-100); --tab-panel-clr: var(--clr-neutral-900); } .bgTabs.bgTabs-secondary { --tab-bg: var(--clr-secondary-100); --tab-bg-hover: var(--clr-secondary-300); --tab-bg-active: var(--clr-secondary-500); --tab-clr: var(--clr-secondary-700); --tab-clr-hover: var(--clr-secondary-700); --tab-clr-active: var(--clr-secondary-900); --tab-panel-bg: var(--clr-secondary-500); --tab-panel-clr: var(--clr-neutral-100); } /* DEFAULT SLIDER OPTIONS */ .ccm-page .ccm-image-slider-container { --slider-shadow: rgba(37, 38, 39, 0.03) 0px -2px 5px 0px, rgba(37, 38, 39, 0.04) 0px 1px 1px -2px, rgba(37, 38, 39, 0.04) 0px 2px 2px -2px, rgba(37, 38, 39, 0.05) 0px 5px 5px -2px, rgba(37, 38, 39, 0.06) 0px 9px 9px -2px, rgba(37, 38, 39, 0.07) 0px 16px 16px -2px; --slider-shadow-hover: rgba(37, 38, 39, 0.03) 0px -1px 2px 0px, rgba(37, 38, 39, 0.04) 0px 3px 2px -2px, rgba(37, 38, 39, 0.04) 0px 7px 5px -2px, rgba(37, 38, 39, 0.05) 0px 12px 10px -2px, rgba(37, 38, 39, 0.06) 0px 22px 18px -2px, rgba(37, 38, 39, 0.07) 0px 41px 33px -2px, rgba(37, 38, 39, 0.08) 0px 100px 80px -2px; display: flex; overflow: hidden; position: relative; } .ccm-page .ccm-image-slider { position: relative; max-width: 100%; } .ccm-page .rslides { margin-inline: 0; padding-inline: 0; } .ccm-page .rslides li { margin: 0; } .ccm-page .rslides_nav { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" fill="%231FA5B4" /%3E%3C/svg%3E'); background-size: 70%; background-position: center center; background-repeat: no-repeat; background-color: var(--clr-neutral-100); opacity: 1; border-radius: 50%; left: 1rem; margin: 0; padding: 0; height: 50px; width: 50px; top: 50%; transform: translatey(-50%) rotate(90deg); transform-origin: center; box-shadow: var(--slider-shadow); } .ccm-page .rslides_nav:hover { opacity: 0.9; box-shadow: var(--slider-shadow-hover); } .ccm-page .rslides_nav.next { left: auto; right: 1rem; transform: translatey(-50%) rotate(-90deg); transform-origin: center; background-position: center center; } .ccm-page .ccm-image-slider-container:has(.rslides_tabs) .rslides { margin-bottom: 3rem; } .ccm-page .ccm-image-slider-container:has(.rslides_tabs) .rslides_nav { top: calc(50% - 3rem); } .ccm-page .rslides_tabs { padding: 0; margin: 0; width: 100%; position: absolute; bottom: 0; z-index: 10; display: flex; flex-direction: row; justify-content: center; align-items: center; } .ccm-page .rslides_tabs li { list-style-type: none; display: inline-block; margin: 1rem 0; padding: 0; } .ccm-page .rslides_tabs a { text-indent: -9999px; overflow: hidden; background: var(--clr-neutral-400); width: 15px; height: 15px; display: inline-block; margin-right: 10px; border-radius: 30px; box-shadow: var(--slider-shadow); } .ccm-page .rslides_tabs a:hover { background: var(--clr-neutral-500); box-shadow: var(--slider-shadow-hover); } .ccm-page .rslides_tabs .rslides_here a, .ccm-page .rslides_tabs .rslides_here a:hover { background: var(--clr-primary-500); } /* HOME SLIDER SPECIFIC STYLES */ .ccm-page .rslides.homeSlider picture { aspect-ratio: 3/1; overflow: hidden; display: inline-block; vertical-align: bottom; max-width: 100%; } .ccm-page .rslides.homeSlider picture img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; -o-object-position: center bottom; object-position: center bottom; } ul.tabsNav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding-inline: max(50vw - 600px, 2rem); } ul.tabsNav > li { margin-block-start: 0; } ul.tabsNav a { display: block; padding: 0.75rem 1.25rem; text-decoration: none; background: var(--clr-primary-300); border-radius: 1rem; color: var(--clr-primary-900); white-space: nowrap; } ul.tabsNav .tabs_here a { background: var(--clr-primary-500); color: var(--clr-neutral-100); } @media screen and (min-width: 45em) { ul.tabsNav { flex-wrap: nowrap; margin-block-end: 0; } ul.tabsNav a { border-radius: 1rem 1rem 0 0; } } .tabs { background: var(--clr-primary-500); color: var(--clr-neutral-100); margin-block-start: 0; min-height: 50vh; } .tabs .tabsContent { padding: 2rem max(50vw - 600px, 2rem); } .tabs, [class*="tabs_tabs tabs"] { position: relative; overflow: hidden; width: 100%; } .tabs .tabsContent, [class*="tabs_tabs tabs"] .tabsContent { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; padding: 2rem max(50vw - 600px, 2rem); } .tabs .tabsContent:first-child, [class*="tabs_tabs tabs"] .tabsContent:first-child { position: relative; display: block; float: left; } /* .rslides li { } .rslides .bg-tint { padding: 0.5rem 1rem; } .rslides li img { margin-bottom: 0.5rem; } .rslides li h3.h4, .rslides li p:last-child { margin-bottom: 0; } .ccm-image-slider { position: relative; } .rslides.homeSlider li img { margin-bottom: 0; } .intro .rslides.homeSlider p.h2 { background: none; position: static; } @include mq(sm) { .rslides.homeSlider li a > div { position: absolute; bottom: 0; width: 100%; background: var(--clr-primary-500); background: rgba(var(--clr-primary-500), 0.85); } } .rslides.homeSlider + .rslides_tabs { padding-left: 0px; padding-top: 0; padding-bottom: 0; text-align: center; position: absolute; width: 100vw; max-width: 100%; z-index: 10; } .rslides.homeSlider + .rslides_tabs li { list-style-type: none; display: inline-block; margin-right: 5px; } .rslides.homeSlider + .rslides_tabs li.rslides_here a { background: var(--clr-primary-500); } .rslides.homeSlider + .rslides_tabs li a { text-indent: -9999px; overflow: hidden; background: var(--clr-neutral-300); width: 15px; height: 15px; display: inline-block; margin-right: 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } */ /* HOME PAGE YOUTUBE VIDEO */ .hero:has(.yt-hero), .intro.bg-tint:has(.yt-hero) { display: grid; grid-template-areas: "stack"; isolation: isolate; } .ccm-edit-mode .hero:has(.yt-hero), .ccm-edit-mode .intro.bg-tint:has(.yt-hero) { aspect-ratio: auto; } .hero .yt-hero, .intro.bg-tint .yt-hero { grid-area: stack; z-index: -1; overflow: hidden; position: relative; } .hero .yt-player, .intro.bg-tint .yt-player { position: absolute; top: -33%; border: none !important; aspect-ratio: 16/9; width: 100%; } .hero .awards, .intro.bg-tint .awards { aspect-ratio: 16/7; width: min(600px, 45%); height: auto; grid-area: stack; justify-self: start; align-self: center; padding-left: 2rem; pointer-events: none; } .hero .awards img, .intro.bg-tint .awards img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .hero .funding, .intro.bg-tint .funding { aspect-ratio: 1; width: min(150px, 15%); border-radius: 50%; height: auto; grid-area: stack; justify-self: end; align-self: end; margin: 0 2rem 2rem 0; pointer-events: none; } ul.sticky-socials { margin: 0; padding: 0; list-style: none; z-index: 100; justify-items: right; position: fixed; right: 0; top: 50%; transform: translatey(-50%); } .ccm-edit-mode ul.sticky-socials { position: static; } ul.sticky-socials li { height: 3rem; text-align: right; margin-block-start: 0; } ul.sticky-socials a { background-color: var(--clr-secondary-700); color: white; padding: 0.75rem; text-decoration: none; overflow: hidden; display: inline-block; font-size: 0; text-align: right; transition: background-color 0.3s ease; } ul.sticky-socials li:first-child a { border-top-left-radius: 1rem; } ul.sticky-socials li:last-child a { border-bottom-left-radius: 1rem; } ul.sticky-socials svg { display: inline-block; vertical-align: middle; } ul.sticky-socials span { display: inline-block; vertical-align: middle; max-width: 0; overflow: hidden; transition: max-width 0.4s ease; font-size: 1rem; line-height: 1; max-height: 1rem; } ul.sticky-socials a:hover { background-color: var(--clr-secondary-700); color: white; } ul.sticky-socials a:hover span { max-width: 90vw; } /* 5. Utilities - The "U" in CUBE (High specificity/!useant) */ .clr-neutral-100 { color: hsl(342, 3%, 100%); } .bg-neutral-100 { background-color: hsl(342, 3%, 100%); } .clr-neutral-300 { color: hsl(342, 3%, 90%); } .bg-neutral-300 { background-color: hsl(342, 3%, 90%); } .clr-neutral-400 { color: hsl(342, 3%, 80%); } .bg-neutral-400 { background-color: hsl(342, 3%, 80%); } .clr-neutral-500 { color: hsl(342, 3%, 45%); } .bg-neutral-500 { background-color: hsl(342, 3%, 45%); } .clr-neutral-700 { color: hsl(342, 3%, 35%); } .bg-neutral-700 { background-color: hsl(342, 3%, 35%); } .clr-neutral-900 { color: hsl(342, 3%, 9%); } .bg-neutral-900 { background-color: hsl(342, 3%, 9%); } .clr-primary-100 { color: hsl(180, 35%, 90%); } .bg-primary-100 { background-color: hsl(180, 35%, 90%); } .clr-primary-300 { color: hsl(180, 32%, 57%); } .bg-primary-300 { background-color: hsl(180, 32%, 57%); } .clr-primary-500 { color: hsl(184, 72%, 41%); } .bg-primary-500 { background-color: hsl(184, 72%, 41%); } .clr-primary-700 { color: hsl(181, 74%, 27%); } .bg-primary-700 { background-color: hsl(181, 74%, 27%); } .clr-primary-900 { color: hsl(186, 72%, 16%); } .bg-primary-900 { background-color: hsl(186, 72%, 16%); } .clr-secondary-100 { color: hsl(2, 70%, 95%); } .bg-secondary-100 { background-color: hsl(2, 70%, 95%); } .clr-secondary-300 { color: hsl(2, 70%, 80%); } .bg-secondary-300 { background-color: hsl(2, 70%, 80%); } .clr-secondary-500 { color: hsl(2, 70%, 65%); } .bg-secondary-500 { background-color: hsl(2, 70%, 65%); } .clr-secondary-700 { color: hsl(346, 44%, 52%); } .bg-secondary-700 { background-color: hsl(346, 44%, 52%); } .clr-secondary-900 { color: hsl(2, 70%, 19%); } .bg-secondary-900 { background-color: hsl(2, 70%, 19%); } .clr-highlight-100 { color: hsl(39, 73%, 95%); } .bg-highlight-100 { background-color: hsl(39, 73%, 95%); } .clr-highlight-300 { color: hsl(39, 76%, 77%); } .bg-highlight-300 { background-color: hsl(39, 76%, 77%); } .clr-highlight-500 { color: hsl(40, 82%, 65%); } .bg-highlight-500 { background-color: hsl(40, 82%, 65%); } .clr-highlight-700 { color: hsl(30, 73%, 35%); } .bg-highlight-700 { background-color: hsl(30, 73%, 35%); } .clr-highlight-900 { color: hsl(30, 73%, 19%); } .bg-highlight-900 { background-color: hsl(30, 73%, 19%); } .ccm-page .bg-primary { --clr-text: var(--clr-neutral-100); --clr-text-muted: var(--clr-neutral-300); --clr-text-highlight: var(--clr-highlight-300); --clr-link: var(--clr-highlight-300); --clr-link-hover: var(--clr-highlight-500); background-color: var(--clr-primary-500); color: var(--clr-text); } .ccm-page .bg-secondary { --clr-text: var(--clr-neutral-100); --clr-text-muted: var(--clr-neutral-300); --clr-text-highlight: var(--clr-highlight-300); --clr-link: var(--clr-highlight-300); --clr-link-hover: var(--clr-highlight-500); background-color: var(--clr-secondary-500); color: var(--clr-text); } .ccm-page .bg-highlight { --clr-text: var(--clr-neutral-100); --clr-text-muted: var(--clr-primary-300); --clr-text-highlight: var(--clr-primary-500); --clr-link: var(--clr-primary-500); --clr-link-hover: var(--clr-primary-100); background-color: var(--clr-highlight-500); color: var(--clr-text); } .ccm-page .bg-squiggles { background-image: url("/application/themes/bluegreen/img/squiggles.svg"); background-repeat: no-repeat; background-size: 100% auto; } .ccm-page .clr-primary { color: var(--clr-primary-500); } .ccm-page .clr-secondary { color: var(--clr-secondary-700); } .panel-white { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 291 112' preserveAspectRatio='none'%3E%3Cpath d='M62.155 1.208c0 0 -20.773 -2.717 -32 0c-11.227 2.717 -24.345 3.985 -25 14c-0.655 10.015 -6.138 22.908 -5 36c1.138 13.092 0.623 30.377 1 34c0.377 3.623 -1.573 21.91 18 25c19.573 3.09 47.834 0.121 61 0c13.166 -0.121 93.026 1.853 111 1c17.974 -0.853 70.698 -2.692 78 -7c7.302 -4.308 20.776 -6.1 21 -29c0.224 -22.9 -2.091 -39.79 -2 -47c0.091 -7.21 -3.129 -25.942 -28 -24c-24.871 1.942 -38.426 1.975 -55 1c-16.574 -0.975 -52.702 -3.825 -70 -3c-17.298 0.825 -73 -1 -73 -1Z' fill='white' /%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; color: var(--clr-text); padding: 1rem; } .hide-sm { display: initial; } .display-sm { display: none; } @media screen and (min-width: 45em) { .hide-sm { display: none; } .display-sm { display: block; } } .sr-only, .visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* 6. Vendor - CMS Specifics */ .gallery-carousel .splide__slide { aspect-ratio: 16/9; margin: auto; } .gallery-carousel .splide__slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-carousel .splide__track { padding-block: 3rem; } .blog-carousel .splide__slide .cardV9 { height: 100%; overflow: hidden; padding-bottom: 0.5rem; } .blog-carousel .splide__slide .cardV9 img { margin-bottom: 0.5rem; } @media screen and (min-width: 30em) { .blog-carousel .splide__slide .cardV9 { transform: scale(0.9); opacity: 0.6; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .blog-carousel .splide__slide.is-active { z-index: 100; } .blog-carousel .splide__slide.is-next, .blog-carousel .splide__slide.is-prev { z-index: 50; } .blog-carousel .splide__slide.is-active .cardV9 { transform: scale(1.3); opacity: 1; } .blog-carousel .splide__slide.is-next .cardV9, .blog-carousel .splide__slide.is-prev .cardV9 { transform: scale(1.1); opacity: 0.8; } } .blog-carousel .card-img { aspect-ratio: 16/9; } .blog-carousel .card-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-carousel .splide__arrows, .gallery-carousel .splide__arrows { text-align: center; display: flex; justify-content: space-evenly; padding-block: 1rem; } .blog-carousel .splide__arrows button, .gallery-carousel .splide__arrows button { background-color: transparent; border: none; margin: 0; padding: 0; text-align: inherit; font: inherit; color: var(--clr-highlight-500); cursor: pointer; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .blog-carousel .splide__arrows button.splide__arrow--prev svg, .blog-carousel .splide__arrows button.splide__arrow--next svg, .gallery-carousel .splide__arrows button.splide__arrow--prev svg, .gallery-carousel .splide__arrows button.splide__arrow--next svg { display: block; width: 75px; height: 22px; } .blog-carousel .splide__arrows button.splide__arrow--next svg, .gallery-carousel .splide__arrows button.splide__arrow--next svg { transform: scalex(-1); } .blog-carousel .splide__arrows button.splide__arrow--prev svg, .gallery-carousel .splide__arrows button.splide__arrow--prev svg { transform: scalex(1); } @keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__container { box-sizing: border-box; position: relative; } .splide__list { backface-visibility: hidden; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { backface-visibility: hidden; box-sizing: border-box; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } /* .splide__track { padding-block: 3rem; overflow: visible; } .splide__slide { } .splide__slide .card { text-align: center; //background: var(--clr-neutral-100); //border-radius: 1rem; color: var(--clr-primary-500); overflow: hidden; transform: scale(0.9); opacity: 0.6; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); padding-bottom: 0.5rem; img { margin-bottom: 0.5rem; } } .splide__slide.is-active { z-index: 100; } .splide__slide.is-active .card { transform: scale(1.3); opacity: 1; } .splide__slide.is-next, .splide__slide.is-prev { z-index: 50; } .splide__slide.is-next .card, .splide__slide.is-prev .card { transform: scale(1.1); opacity: 0.8; } .splide__slide img { // max-width: 100%; // height: auto; } .splide__arrows { text-align: center; display: flex; justify-content: space-evenly; button { background-color: transparent; border: none; margin: 0; padding: 0; text-align: inherit; font: inherit; color: white; cursor: pointer; border-radius: 0; appearance: none; // Just in case we missed anything. } } .splide__arrows button.splide__arrow--prev svg, .splide__arrows button.splide__arrow--next svg { display: block; width: 75px; height: 22px; } button.splide__arrow--next svg { transform: scalex(-1); } button.splide__arrow--prev svg { transform: scalex(1); } /* ORIGINAL SPLIDE CORE */ /* .splide__container { box-sizing: border-box; position: relative; } .splide__list { backface-visibility: hidden; display: -ms-flexbox; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { backface-visibility: hidden; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } @keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__arrow { -ms-flex-align: center; align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: -ms-flexbox; display: flex; height: 2em; -ms-flex-pack: center; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 2em; z-index: 1; } .splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em; } .splide__arrow:hover:not(:disabled) { opacity: 0.9; } .splide__arrow:disabled { opacity: 0.3; } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide__arrow--prev { left: 1em; } .splide__arrow--prev svg { transform: scaleX(-1); } .splide__arrow--next { right: 1em; } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; } .splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; transition: transform 0.2s linear; width: 8px; } .splide__pagination__page.is-active { background: #fff; transform: scale(1.4); z-index: 1; } .splide__pagination__page:hover { cursor: pointer; opacity: 0.9; } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__progress__bar { background: #ccc; height: 3px; } .splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .splide__slide:focus { outline: 0; } @supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; } } @supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; } } .splide__toggle { cursor: pointer; } .splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer; } .splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000; } .splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em; } .splide__arrows--rtl .splide__arrow--prev svg { transform: scaleX(1); } .splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto; } .splide__arrows--rtl .splide__arrow--next svg { transform: scaleX(-1); } .splide__arrows--ttb .splide__arrow { left: 50%; transform: translate(-50%); } .splide__arrows--ttb .splide__arrow--prev { top: 1em; } .splide__arrows--ttb .splide__arrow--prev svg { transform: rotate(-90deg); } .splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto; } .splide__arrows--ttb .splide__arrow--next svg { transform: rotate(90deg); } .splide__pagination--ttb { bottom: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0; } .splide__container { box-sizing: border-box; position: relative; } .splide__list { backface-visibility: hidden; display: -ms-flexbox; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { backface-visibility: hidden; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } @keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__arrow { -ms-flex-align: center; align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: -ms-flexbox; display: flex; height: 2em; -ms-flex-pack: center; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 2em; z-index: 1; } .splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em; } .splide__arrow:hover:not(:disabled) { opacity: 0.9; } .splide__arrow:disabled { opacity: 0.3; } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide__arrow--prev { left: 1em; } .splide__arrow--prev svg { transform: scaleX(-1); } .splide__arrow--next { right: 1em; } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; } .splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; transition: transform 0.2s linear; width: 8px; } .splide__pagination__page.is-active { background: #fff; transform: scale(1.4); z-index: 1; } .splide__pagination__page:hover { cursor: pointer; opacity: 0.9; } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__progress__bar { background: #ccc; height: 3px; } .splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .splide__slide:focus { outline: 0; } @supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; } } @supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; } } .splide__toggle { cursor: pointer; } .splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer; } .splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000; } .splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em; } .splide__arrows--rtl .splide__arrow--prev svg { transform: scaleX(1); } .splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto; } .splide__arrows--rtl .splide__arrow--next svg { transform: scaleX(-1); } .splide__arrows--ttb .splide__arrow { left: 50%; transform: translate(-50%); } .splide__arrows--ttb .splide__arrow--prev { top: 1em; } .splide__arrows--ttb .splide__arrow--prev svg { transform: rotate(-90deg); } .splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto; } .splide__arrows--ttb .splide__arrow--next svg { transform: rotate(90deg); } .splide__pagination--ttb { bottom: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0; } */ /* The container for the tooltip */ .ccm-custom-tooltip { position: relative; border-bottom: 1px dotted #333; /* Visual cue for the user */ cursor: help; } /* The actual tooltip box */ .ccm-custom-tooltip::after { content: attr(data-tooltip); /* Pulls text from the data attribute */ position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; white-space: nowrap; font-size: 14px; opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 100; } /* Show the tooltip on hover */ .ccm-custom-tooltip:hover::after { opacity: 1; visibility: visible; } /* From RESET - 5. The "Concrete CMS Safety Net" */ .ccm-page .ccm-area, .ccm-block-content, main, section { margin-trim: block-end; } /* Fallback for safety if you're not using margin-trim yet */ :where(.ccm-block-content > *:last-child) { margin-block-end: 0; } .edit-mode-only { display: none; } .ccm-edit-mode .edit-mode-only { display: initial; } /*# sourceMappingURL=styles.css.map */