/* Theme Name: Libarts 2024 Theme Theme URI: https://www.libarts.colostate.edu Template: infinitum Author: CLA Web Team Author URI: https://it.libarts.colostate.edu/web/ Description: The theme for all College of Liberal Arts websites. Tags: Version: 0.28.5 Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 8.1 Text Domain: cla */ body, .editor-styles-wrapper { /* -------------------------------- * Brand: Colors * -------------------------------- */ /* Primary Colors */ --cla--color--csu-green: var(--wp--preset--color--csu-green); --cla--color--csu-gold: var(--wp--preset--color--csu-gold); --cla--color--aggie-orange: var(--wp--preset--color--aggie-orange); /* Find Your Energy Colors */ --cla--color--oval-green: var(--wp--preset--color--oval-green); --cla--color--lovers-lane: var(--wp--preset--color--lovers-lane); --cla--color--energy-green: var(--wp--preset--color--energy-green); --cla--color--flower-trial-red: var(--wp--preset--color--flower-trial-red); --cla--color--powered-purple: var(--wp--preset--color--powered-purple); --cla--color--horsetooth-blue: var(--wp--preset--color--horsetooth-blue); --cla--color--stalwart-slate: var(--wp--preset--color--stalwart-slate); --cla--color--sunshine: var(--wp--preset--color--sunshine); /* Neutral Colors */ --cla--color--black: var(--wp--preset--color--black); --cla--color--white: var(--wp--preset--color--white); --cla--color--80-percent-black: var(--wp--preset--color--80-percent-black); --cla--color--gray: var(--wp--preset--color--gray); --cla--color--tan: var(--wp--preset--color--tan); /* CLA Blocks Override Colors */ --cla-blocks--color--h1: var(--cla--color--black); /* Parent Theme Override Colors */ --wp--preset--color--base: var(--wp--preset--color--csu-green); --wp--preset--color--primary: var(--wp--preset--color--csu-green); --wp--preset--color--accent: var(--wp--preset--color--energy-green); /* Theme Colors */ /* Theme Colors: Primary - Intended to be mostly unchanged as the primary brand color */ --cla--color--primary: var(--cla--color--csu-green); --cla--color--primary--contrast: var(--cla--color--white); /* Theme Colors: Secondary - Intended to be used as a complementary color to the primary brand color that can be changed based on context */ --cla--color--secondary: var(--cla--color--oval-green); --cla--color--secondary--contrast: var(--cla--color--white); /* Theme Colors: Tertiary - Intended to be used as an additional complementary color to the primary and (mostly) secondary brand colors that can be changed based on context */ --cla--color--tertiary: var(--cla--color--horsetooth-blue); --cla--color--tertiary--text: var(--cla--color--energy-green); /* Generally the same as tertiary, but must have sufficient contrast against the secondary color */ --cla--color--tertiary--contrast: var(--cla--color--white); /* Theme Colors: Accent - Intended to be used as a primary brand accent that only changes when it conflicts with the secondary or tertiary colors */ --cla--color--accent: var(--cla--color--energy-green); --cla--color--accent--contrast: var(--cla--color--csu-green); /* Theme Colors: Call to Action - Intended to be used for call to action elements that need to stand out */ --cla--color--cta: var(--cla--color--flower-trial-red); --cla--color--cta--contrast: var(--cla--color--white); /* Linework */ --cla--color--linework: var(--cla--color--black); /* Points */ --cla--color--point: var(--cla--color--oval-green); /* -------------------------------- * Brand: Gradients * -------------------------------- */ /* Color Bars */ --cla--gradient--color-bars--direction: 180deg; --cla--gradient--color-bars--colors: var(--cla--color--csu-green), var(--cla--color--csu-green) 10%, var(--cla--color--lovers-lane) 10%, var(--cla--color--lovers-lane) 20%, var(--cla--color--oval-green) 20%, var(--cla--color--oval-green) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--white) 40%, var(--cla--color--white) 50%, var(--cla--color--lovers-lane) 50%, var(--cla--color--lovers-lane) 60%, var(--cla--color--energy-green) 60%, var(--cla--color--energy-green) 70%, var(--cla--color--csu-green) 70%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-gold) 80%, var(--cla--color--csu-gold) 90%, var(--cla--color--energy-green) 90%, var(--cla--color--energy-green) 100%; --cla--gradient--color-bars: linear-gradient(var(--cla--gradient--color-bars--direction), var(--cla--gradient--color-bars--colors), var(--cla--color--secondary)); /* -------------------------------- * Brand: Textures * -------------------------------- */ /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--default: multiply; --cla--texture--brushstroke--mix-blend-mode--black: luminosity; --cla--texture--brushstroke--mix-blend-mode--80-percent-black: luminosity; --cla--texture--brushstroke--mix-blend-mode--gray: multiply; --cla--texture--brushstroke--mix-blend-mode--tan: soft-light; --cla--texture--brushstroke--mix-blend-mode--csu-green: multiply; --cla--texture--brushstroke--mix-blend-mode--csu-gold: multiply; --cla--texture--brushstroke--mix-blend-mode--aggie-orange: overlay; --cla--texture--brushstroke--mix-blend-mode--oval-green: multiply; --cla--texture--brushstroke--mix-blend-mode--lovers-lane: multiply; --cla--texture--brushstroke--mix-blend-mode--energy-green: multiply; --cla--texture--brushstroke--mix-blend-mode--flower-trial-red: overlay; --cla--texture--brushstroke--mix-blend-mode--powered-purple: multiply; --cla--texture--brushstroke--mix-blend-mode--horsetooth-blue: multiply; --cla--texture--brushstroke--mix-blend-mode--stalwart-slate: multiply; --cla--texture--brushstroke--mix-blend-mode--sunshine: overlay; --cla--texture--brushstroke--mix-blend-mode--primary: var(--cla--texture--brushstroke--mix-blend-mode--csu-green); --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--powered-purple); --cla--texture--brushstroke--mix-blend-mode--accent: var(--cla--texture--brushstroke--mix-blend-mode--energy-green); --cla--texture--brushstroke--opacity--default: 0.2; --cla--texture--brushstroke--opacity--black: 0.6; --cla--texture--brushstroke--opacity--80-percent-black: 0.6; --cla--texture--brushstroke--opacity--gray: 0.4; --cla--texture--brushstroke--opacity--tan: 0.4; --cla--texture--brushstroke--opacity--csu-green: 0.5; --cla--texture--brushstroke--opacity--csu-gold: 0.2; --cla--texture--brushstroke--opacity--aggie-orange: 1; --cla--texture--brushstroke--opacity--oval-green: 1; --cla--texture--brushstroke--opacity--lovers-lane: 0.4; --cla--texture--brushstroke--opacity--energy-green: 0.2; --cla--texture--brushstroke--opacity--flower-trial-red: 1; --cla--texture--brushstroke--opacity--powered-purple: 0.4; --cla--texture--brushstroke--opacity--horsetooth-blue: 0.4; --cla--texture--brushstroke--opacity--stalwart-slate: 1; --cla--texture--brushstroke--opacity--sunshine: 1; --cla--texture--brushstroke--opacity--primary: var(--cla--texture--brushstroke--opacity--csu-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--oval-green); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--powered-purple); --cla--texture--brushstroke--opacity--accent: var(--cla--texture--brushstroke--opacity--energy-green); /* -------------------------------- * Brand: Typography * -------------------------------- */ /* Font Family */ --cla--font-family--serif: var(--wp--preset--font-family--serif-1); --cla--font-family--sans: var(--wp--preset--font-family--sans-serif-1); --cla--font-family--sub-heading: var(--cla--font-family--serif); /* Font Size */ --cla--font-size--80: var(--wp--preset--font-size--80); --cla--font-size--90: var(--wp--preset--font-size--90); --cla--font-size--100: var(--wp--preset--font-size--100); --cla--font-size--200: var(--wp--preset--font-size--200); --cla--font-size--300: var(--wp--preset--font-size--300); --cla--font-size--400: var(--wp--preset--font-size--400); --cla--font-size--500: var(--wp--preset--font-size--500); --cla--font-size--600: var(--wp--preset--font-size--600); --cla--font-size--700: var(--wp--preset--font-size--700); --cla--font-size--800: var(--wp--preset--font-size--800); --cla--font-size--900: var(--wp--preset--font-size--900); --cla--font-size--1000: var(--wp--preset--font-size-1000); --cla--font-size--sub-heading: var(--wp--preset--font-size--sub-heading); /* Font Style */ /* Font Weight */ --cla--font-weight--sub-heading: 400; /* Line Height */ --cla--line-height: var(--wp--custom--infinitum--typography--line-height); --cla--line-height--heading: var(--wp--custom--infinitum--typography--heading-line-height); /* -------------------------------- * Brand: Layout * -------------------------------- */ /* Spacing */ --cla--spacing--1-8: var(--wp--preset--spacing--1-8); --cla--spacing--1-4: var(--wp--preset--spacing--1-4); --cla--spacing--1-3: var(--wp--preset--spacing--1-3); --cla--spacing--1-2: var(--wp--preset--spacing--1-2); --cla--spacing--2-3: var(--wp--preset--spacing--2-3); --cla--spacing--3-4: var(--wp--preset--spacing--3-4); --cla--spacing--1: var(--wp--preset--spacing--1); --cla--spacing--2: var(--wp--preset--spacing--2); --cla--spacing--3: var(--wp--preset--spacing--3); --cla--spacing--4: var(--wp--preset--spacing--4); --cla--spacing--5: var(--wp--preset--spacing--5); --cla--spacing--6: var(--wp--preset--spacing--6); --cla--spacing--7: var(--wp--preset--spacing--7); --cla--spacing--8: var(--wp--preset--spacing--8); --cla--spacing--9: var(--wp--preset--spacing--9); --cla--spacing--10: var(--wp--preset--spacing--10); --cla--spacing--decoration: var(--cla--spacing--4); --cla--spacing--decoration-small: var(--cla--spacing--2); /* Linework */ --cla--linework--style: solid; --cla--linework--style--solid: solid; --cla--linework--style--dotted: dotted; --cla--linework--width: 1px; /* Points */ --cla--point--size: calc(var(--cla--spacing--1) * (3/5)); --cla--point--background--atts: center/calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2) repeat; --cla--point--radial-gradient: radial-gradient(var(--cla--color--secondary) calc((var(--cla--point--size) - 2px) / 2), transparent calc(var(--cla--point--size) / 2)) center/calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2) repeat; --cla--point--radial-gradient--atts: calc((var(--cla--point--size) - 2px) / 2), transparent calc(var(--cla--point--size) / 2); /* Dimensions */ --cla--dimension--content-width: var(--wp--custom--infinitum--content-width, 1200); --cla--dimension--content-width-px: calc(var(--cla--dimension--content-width) * 1px); --cla--dimension--header--row--height: 100px; --cla--dimension--header--row--height-small: 60px; --cla--dimension--header--height: 0px; --cla--dimension--wp--admin-bar: 0px; --cla--dimension--wp--editor-top-toolbar: 0px; --cla--dimension--wp--editor-footer: 0px; --cla--dimension--decoration: var(--cla--spacing--decoration); --cla--dimension--decoration-small: var(--cla--spacing--decoration-small); /* Viewport */ --cla--viewport--offset--top: calc(var(--cla--dimension--wp--editor-top-toolbar) + var(--cla--dimension--wp--admin-bar) + var(--cla--dimension--header--height)); --cla--viewport--offset--right: 0px; --cla--viewport--offset--bottom: var(--cla--dimension--wp--editor-footer); --cla--viewport--offset--left: 0px; --cla--viewport--height: calc(100vh - (var(--cla--viewport--offset--top) - var(--cla--viewport--offset--bottom))); --cla--viewport--width: calc(100vw - (var(--cla--viewport--offset--left) - var(--cla--viewport--offset--right))); /* Layers/z-index */ --cla--layer--region--header: 1000; --cla--layer--content: 500; --cla--layer--linework: 100; --cla--layer--brushstroke: 90; } body.admin-bar { /* Dimensions */ --cla--dimension--wp--admin-bar: 32px; } body.wp-admin.block-editor-page .editor-styles-wrapper { /* Dimensions */ --cla--dimension--wp--editor-top-toolbar: 60px; --cla--dimension--wp--editor-footer: 24px; } body:has(header.wp-block-template-part) { /* Dimensions */ --cla--dimension--header--height: var(--cla--dimension--header--row--height); } /* -------------------------------- * Elements * -------------------------------- */ :where(body.editor-styles-wrapper) .wp-block-heading.has-fit-text { overflow: hidden; } :where(body:not(.editor-styles-wrapper)) .wp-block-heading.has-fit-text { pointer-events: none; } .has-sub-heading-font-size:not(h1, h2, h3, h4, h5, h6) { line-height: var(--cla--line-height--heading); } /* Links */ :root :is(blockquote, :where(.wp-block-list) li, p:not(.wp-block-site-title), pre, td, th, .block-editor-rich-text__editable) > :where(a:not(.cla-global-link, .wp-element-button)) { text-decoration: underline; } :root :is(blockquote, :where(.wp-block-list) li, p:not(.wp-block-site-title), pre, td, th, .block-editor-rich-text__editable) > :where(a:not(.cla-global-link, .wp-element-button):hover) { text-decoration: none; } /* All form inputs */ .editor-styles-wrapper form :is(button:not([class*="component"]), input:not([class*="component"]), select:not([class*="component"]), textarea:not([class*="component"])) { pointer-events: none; } /* Buttons */ :is(main, .editor-styles-wrapper) :where(form button:not([class*="component"]), form input[type="button"]:not([class*="component"]), form input[type="reset"]:not([class*="component"]), form input[type="submit"]:not([class*="component"])), :where(:where(main, .editor-styles-wrapper) form) input[type="file"]::file-selector-button, .button:any-link { --cla--color--primary: var(--cla--color--flower-trial-red); position: relative; border: none; padding: var(--cla--spacing--1); display: inline-block; width: fit-content; height: max-content; line-height: 1; text-transform: uppercase; font-weight: 600; letter-spacing: 3px; color: var(--cla--color--primary--contrast); background-color: var(--cla--color--primary); transition: all 300ms; } :is(main, .editor-styles-wrapper) :where(form button:focus, form button:hover, form input[type="button"]:focus, form input[type="button"]:hover, form input[type="reset"]:focus, form input[type="reset"]:hover, form input[type="submit"]:focus, form input[type="submit"]:hover), :where(:where(main, .editor-styles-wrapper) form) input[type="file"]::file-selector-button:focus, :where(:where(main, .editor-styles-wrapper) form) input[type="file"]::file-selector-button:hover, .button:focus, .button:hover { cursor: pointer; text-decoration: none; color: var(--cla--color--accent--contrast); background-color: var(--cla--color--accent); transform: translateX(var(--cla--spacing--1-4)) translateY(calc(var(--cla--spacing--1-4) * -1)); box-shadow: calc(var(--cla--spacing--1-4) * -1) var(--cla--spacing--1-4) 0 0 var(--cla--color--linework); } /* input: non-buttons */ :is(main, .editor-styles-wrapper) :where(form input:not([type="button"], [type="file"], [type="reset"], [type="submit"], [class*="component"]), form select, form textarea) { border: var(--cla--linework--width) var(--cla--linework--style) var(--cla--color--linework); padding: var(--cla--spacing--1-2); width: 100%; line-height: 1; background-color: var(--cla--color--white); } /* input: checkbox */ .components-checkbox-control { --checkbox-input-size: var(--wcag--operable--input-modalities--minimum-target-size); } input[type="checkbox"], input[type="radio"] { width: var(--cla--spacing--1); min-width: var(--wcag--operable--input-modalities--minimum-target-size); height: var(--cla--spacing--1); min-height: var(--wcag--operable--input-modalities--minimum-target-size); } input[type="checkbox"] { appearance: none; outline-width: var(--cla--linework--width); outline-style: var(--cla--linework--style); outline-color: var(--cla--color--linework); outline-offset: var(--cla--spacing--1-8); } input[type="checkbox"]:focus { outline-width: var(--cla--spacing--1-8); outline-style: var(--cla--linework--style); outline-color: var(--cla--color--linework); outline-offset: 0; } input[type="checkbox"]:checked { background-color: var(--cla--color--flower-trial-red); } /* lists */ ol, ul { padding-left: var(--cla--spacing--decoration-small); } /* -------------------------------- * Templates * -------------------------------- */ :where(body:where(.page-template-default, .category):not(.home) .wp-site-blocks main) { padding-top: var(--cla--spacing--1); } :where(body:where(.category) .wp-site-blocks main) { padding-bottom: var(--cla--spacing--1); } :where(body:where(.single-post, .single-event, .post-type-post, .post-type-event, .post-type-event-recurring, .editor-styles-wrapper.post-type-post, .editor-styles-wrapper.post-type-event, .editor-styles-wrapper.post-type-event-recurring) :where(main.wp-block-group > .entry-content, .is-root-container)) { --wp--style--global--content-size: 768px; --wp--style--global--wide-size: calc(var(--wp--style--global--content-size) * 1.5625); --wp--custom--infinitum--content-size: var(--wp--style--global--content-size); --wp--custom--infinitum--wide-size: var(--wp--style--global--wide-size); } /* -------------------------------- * Patterns * -------------------------------- */ :root :where(.is-layout-constrained) > .is-reusable { margin-block-start: 0; } /* -------------------------------- * Site Header * -------------------------------- */ header.wp-block-template-part { position: relative; z-index: var(--cla--layer--region--header); min-height: var(--cla--dimension--header--height); } .site-header__navigation-container { min-height: var(--cla--dimension--header--row--height); color: var(--cla--color--white); font-size: var(--cla--font-size--90); font-weight: 700; } .site-header__navigation-container.is-flex-item-wrapped { min-height: var(--cla--dimension--header--row--height-small); justify-content: flex-start; background-color: var(--cla--color--oval-green); } .site-header__navigation-container .wp-block-navigation { gap: 0; } .site-header__navigation-container .wp-block-navigation__container > .wp-block-navigation-item { margin-right: var(--cla--spacing--1); } .site-header__navigation-container:not(.is-flex-item-wrapped) .wp-block-navigation-item:last-of-type { margin-right: 0; } .site-header__navigation-container .wp-block-navigation-item__content { line-height: var(--wcag--operable--input-modalities--minimum-target-size); } .site-header__navigation-container:not(.is-flex-item-wrapped) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: var(--cla--spacing--1-2) 0; } .site-header__navigation-container .wp-block-navigation .has-child .wp-block-navigation__submenu-container { z-index: 1000000; left: calc(var(--cla--spacing--1-2) * -1); border: none; } .site-header__navigation-container .wp-block-navigation__submenu-icon { width: var(--wcag--operable--input-modalities--minimum-target-size); height: var(--wcag--operable--input-modalities--minimum-target-size); } .site-header__navigation-container .wp-block-navigation__submenu-icon svg { transform: scale(50%); } :where(.site-header__navigation-container .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)), :where(.site-header__navigation-container .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)), :where(.site-header__navigation-container .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content), :where(.site-header__navigation-container .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) { padding: var(--cla--spacing--1-4) var(--cla--spacing--1-2); } .site-header__navigation-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, .site-header__navigation-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { text-decoration: none; color: var(--cla--color--white); background-color: var(--cla--color--flower-trial-red); } .site-header__drawer-container { height: var(--cla--dimension--header--row--height); } .site-header__drawer-container > .wp-block-group { height: 100%; } .site-header__drawer-container .wp-block-infinitum-drawer { height: 100%; } .editor-styles-wrapper .site-header__drawer-container .wp-block-infinitum-drawer > div { height: 100%; } .site-header__drawer-container .wp-block-infinitum-drawer--sibling-close-button .wp-block-infinitum-drawer__button { padding-left: var(--cla--spacing--1-2); padding-right: var(--cla--spacing--1-2); height: 100%; min-width: calc(var(--cla--spacing--1) * 3.25); justify-content: center; } .site-header__drawer-container .wp-block-infinitum-drawer--sibling-close-button .wp-block-infinitum-drawer__modal { top: var(--cla--viewport--offset--top); padding-top: 0; padding-bottom: 0; } .site-header__drawer-container:where(.is-flex-item-wrapped) { height: var(--cla--dimension--header--row--height-small); } .site-header__drawer-container:where(.is-flex-item-wrapped), .site-header__drawer-container:where(.is-flex-item-wrapped) > .wp-block-group, .site-header__drawer-container:where(.is-flex-item-wrapped) .wp-block-infinitum-drawer { flex-grow: 1; } /* -------------------------------- * Brand: Duotone * -------------------------------- */ .wp-duotone-duotone, .editor-styles-wrapper [class*="wp-duotone-"] { background-color: var(--cla--color--white); } .wp-duotone-duotone.wp-block-image img, .editor-styles-wrapper [class*="wp-duotone-"].wp-block-image img { mix-blend-mode: hard-light; } /* -------------------------------- * Brand: Halftone * -------------------------------- */ .is-style-halftone { --halftone-size: 4px; --halftone-bleed: 0.275; --halftone-separate-k: 0; --halftone-dot-size: calc(var(--halftone-size) * var(--halftone-bleed)); --halftone-color-dot-size: var(--halftone-dot-size); filter: brightness( calc( 1.5 + var(--halftone-bleed) * 0.3 - var(--halftone-separate-k) * 0.02 ) ) blur(calc(var(--halftone-size) * 0.1)) contrast(1) blur(0.5px); overflow:hidden; } .is-style-halftone::before, .is-style-halftone::after { content: ""; position: absolute; z-index: 1; inset: -30%; background-size: var(--halftone-size) var(--halftone-size); background-blend-mode: multiply; mix-blend-mode: multiply; } .is-style-halftone::before { transform: rotate(30deg) scale(150%); background-image: radial-gradient(var(--halftone-dot-size) at 25% 75%, #000, #666, #fff), radial-gradient(var(--halftone-color-dot-size) at 75% 25%, #000, #666, #fff), radial-gradient(var(--halftone-color-dot-size) at 25% 25%, #ff0, #ff6, #fff), radial-gradient(var(--halftone-color-dot-size) at 75% 75%, #ff0, #ff6, #fff); } .is-style-halftone::after { transform: rotate(calc(-21deg + var(--halftone-rotation))) translateX(calc(var(--halftone-size) * 0.58)); background-image: radial-gradient(var(--halftone-color-dot-size) at 75% 25%, #f0f, #f6f, #fff), radial-gradient( var(--halftone-color-dot-size) at 25% 75%, #f0f, #f6f, #fff), radial-gradient(var(--halftone-color-dot-size) at 75% 75%, #0ff, #6ff, #fff), radial-gradient(var(--halftone-color-dot-size) at 25% 25%, #0ff, #6ff, #fff); } /* -------------------------------- * Fonts * -------------------------------- */ .has-serif-1-font-family { font-variation-settings: 'opsz' 10; } /* -------------------------------- * CLA Color Palettes (used to be called "Styles") * -------------------------------- */ /* Palette: aggie-orange */ .is-cla-color-palette-aggie-orange, .is-style-aggie-orange { --cla--color--secondary: var(--cla--color--aggie-orange); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--csu-green); --cla--color--tertiary--text: var(--cla--color--tertiary); --cla--color--point: var(--cla--color--csu-green); --cla--gradient--color-bars--colors: var(--cla--color--oval-green), var(--cla--color--oval-green) 10%, var(--cla--color--csu-green) 10%, var(--cla--color--csu-green) 20%, var(--cla--color--energy-green) 20%, var(--cla--color--energy-green) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--white) 40%, var(--cla--color--white) 50%, var(--cla--color--aggie-orange) 50%, var(--cla--color--aggie-orange) 60%, var(--cla--color--lovers-lane) 60%, var(--cla--color--lovers-lane) 70%, var(--cla--color--csu-green) 70%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-gold) 80%, var(--cla--color--csu-gold) 90%, var(--cla--color--energy-green) 90%, var(--cla--color--energy-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--aggie-orange); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--aggie-orange); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* Palette: csu-gold */ .is-cla-color-palette-csu-gold, .is-style-csu-gold { --cla--color--secondary: var(--cla--color--csu-gold); --cla--color--secondary--contrast: var(--cla--color--csu-green); --cla--color--tertiary: var(--cla--color--csu-green); --cla--color--tertiary--text: var(--cla--color--powered-purple); --cla--color--point: var(--cla--color--csu-green); --cla--gradient--color-bars--colors: var(--cla--color--energy-green), var(--cla--color--energy-green) 10%, var(--cla--color--csu-green) 10%, var(--cla--color--csu-green) 20%, var(--cla--color--oval-green) 20%, var(--cla--color--oval-green) 30%, var(--cla--color--white) 30%, var(--cla--color--white) 40%, var(--cla--color--csu-gold) 40%, var(--cla--color--csu-gold) 50%, var(--cla--color--csu-green) 50%, var(--cla--color--csu-green) 60%, var(--cla--color--lovers-lane) 60%, var(--cla--color--lovers-lane) 70%, var(--cla--color--csu-gold) 70%, var(--cla--color--csu-gold) 80%, var(--cla--color--white) 80%, var(--cla--color--white) 90%, var(--cla--color--csu-green) 90%, var(--cla--color--csu-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--csu-gold); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--csu-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--csu-gold); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--csu-green); } /* Palette: csu-green */ .is-cla-color-palette-csu-green, .is-style-csu-green { --cla--color--secondary: var(--cla--color--csu-green); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--lovers-lane); --cla--color--tertiary--contrast: var(--cla--color--csu-green); --cla--color--point: var(--cla--color--energy-green); --cla--gradient--color-bars--colors: var(--cla--color--lovers-lane), var(--cla--color--lovers-lane) 10%, var(--cla--color--white) 10%, var(--cla--color--white) 20%, var(--cla--color--csu-green) 20%, var(--cla--color--csu-green) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--energy-green) 40%, var(--cla--color--energy-green) 50%, var(--cla--color--white) 50%, var(--cla--color--white) 60%, var(--cla--color--lovers-lane) 60%, var(--cla--color--lovers-lane) 70%, var(--cla--color--csu-green) 70%, var(--cla--color--csu-green) 80%, var(--cla--color--white) 80%, var(--cla--color--white) 90%, var(--cla--color--energy-green) 90%, var(--cla--color--energy-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--csu-green); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--lovers-lane); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--csu-green); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--lovers-lane); } /* Palette: energy-green */ .is-cla-color-palette-energy-green, .is-style-energy-green { --cla--color--secondary: var(--cla--color--energy-green); --cla--color--secondary--contrast: var(--cla--color--csu-green); --cla--color--tertiary: var(--cla--color--oval-green); --cla--color--tertiary--text: var(--cla--color--tertiary); --cla--color--accent: var(--cla--color--lovers-lane); --cla--color--point: var(--cla--color--csu-green); --cla--gradient--color-bars--colors: var(--cla--color--oval-green), var(--cla--color--oval-green) 10%, var(--cla--color--csu-green) 10%, var(--cla--color--csu-green) 20%, var(--cla--color--energy-green) 20%, var(--cla--color--energy-green) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--white) 40%, var(--cla--color--white) 50%, var(--cla--color--lovers-lane) 50%, var(--cla--color--lovers-lane) 60%, var(--cla--color--oval-green) 60%, var(--cla--color--oval-green) 70%, var(--cla--color--energy-green) 70%, var(--cla--color--energy-green) 80%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-green) 90%, var(--cla--color--csu-gold) 90%, var(--cla--color--csu-gold) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--energy-green); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--mix-blend-mode--accent: var(--cla--texture--brushstroke--mix-blend-mode--lovers-lane); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--energy-green); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); --cla--texture--brushstroke--opacity--accent: var(--cla--texture--brushstroke--opacity--lovers-lane); } /* Palette: flower-trial-red */ .is-cla-color-palette-flower-trial-red, .is-style-flower-trial-red { --cla--color--secondary: var(--cla--color--flower-trial-red); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--oval-green); --cla--color--tertiary--text: var(--cla--color--white); --cla--gradient--color-bars--colors: var(--cla--color--oval-green), var(--cla--color--oval-green) 10%, var(--cla--color--energy-green) 10%, var(--cla--color--energy-green) 20%, var(--cla--color--flower-trial-red) 20%, var(--cla--color--flower-trial-red) 30%, var(--cla--color--white) 30%, var(--cla--color--white) 40%, var(--cla--color--csu-green) 40%, var(--cla--color--csu-green) 50%, var(--cla--color--lovers-lane) 50%, var(--cla--color--lovers-lane) 60%, var(--cla--color--flower-trial-red) 60%, var(--cla--color--flower-trial-red) 70%, var(--cla--color--energy-green) 70%, var(--cla--color--energy-green) 80%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-green) 90%, var(--cla--color--csu-gold) 90%, var(--cla--color--csu-gold) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--flower-trial-red); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--flower-trial-red); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* Palette: horsetooth-blue */ .is-cla-color-palette-horsetooth-blue, .is-style-horsetooth-blue { --cla--color--secondary: var(--cla--color--horsetooth-blue); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--oval-green); --cla--color--tertiary--text: var(--cla--color--white); --cla--gradient--color-bars--colors: var(--cla--color--energy-green), var(--cla--color--energy-green) 10%, var(--cla--color--oval-green) 10%, var(--cla--color--oval-green) 20%, var(--cla--color--lovers-lane) 20%, var(--cla--color--lovers-lane) 30%, var(--cla--color--csu-green) 30%, var(--cla--color--csu-green) 40%, var(--cla--color--horsetooth-blue) 40%, var(--cla--color--horsetooth-blue) 50%, var(--cla--color--white) 50%, var(--cla--color--white) 60%, var(--cla--color--energy-green) 60%, var(--cla--color--energy-green) 70%, var(--cla--color--horsetooth-blue) 70%, var(--cla--color--horsetooth-blue) 80%, var(--cla--color--lovers-lane) 80%, var(--cla--color--lovers-lane) 90%, var(--cla--color--csu-green) 90%, var(--cla--color--csu-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--horsetooth-blue); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--horsetooth-blue); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* Palette: lovers-lane */ .is-cla-color-palette-lovers-lane, .is-style-lovers-lane { --cla--color--secondary: var(--cla--color--lovers-lane); --cla--color--secondary--contrast: var(--cla--color--csu-green); --cla--color--tertiary: var(--cla--color--oval-green); --cla--color--tertiary--text: var(--cla--color--tertiary); --cla--gradient--color-bars--colors: var(--cla--color--csu-green), var(--cla--color--csu-green) 10%, var(--cla--color--lovers-lane) 10%, var(--cla--color--lovers-lane) 20%, var(--cla--color--energy-green) 20%, var(--cla--color--energy-green) 30%, var(--cla--color--white) 30%, var(--cla--color--white) 40%, var(--cla--color--lovers-lane) 40%, var(--cla--color--lovers-lane) 50%, var(--cla--color--csu-gold) 50%, var(--cla--color--csu-gold) 60%, var(--cla--color--energy-green) 60%, var(--cla--color--energy-green) 70%, var(--cla--color--oval-green) 70%, var(--cla--color--oval-green) 80%, var(--cla--color--white) 80%, var(--cla--color--white) 90%, var(--cla--color--energy-green) 90%, var(--cla--color--energy-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--lovers-lane); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--lovers-lane); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* Palette: oval-green */ .is-cla-color-palette-oval-green, .is-style-oval-green { --cla--color--secondary: var(--cla--color--oval-green); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--powered-purple); --cla--color--tertiary--text: var(--cla--color--energy-green); --cla--color--point: var(--cla--color--energy-green); --cla--gradient--color-bars--colors: var(--cla--color--lovers-lane), var(--cla--color--lovers-lane) 10%, var(--cla--color--csu-green) 10%, var(--cla--color--csu-green) 20%, var(--cla--color--oval-green) 20%, var(--cla--color--oval-green) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--white) 40%, var(--cla--color--white) 50%, var(--cla--color--lovers-lane) 50%, var(--cla--color--lovers-lane) 60%, var(--cla--color--energy-green) 60%, var(--cla--color--energy-green) 70%, var(--cla--color--oval-green) 70%, var(--cla--color--oval-green) 80%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-green) 90%, var(--cla--color--energy-green) 90%, var(--cla--color--energy-green) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--powered-purple); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--oval-green); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--powered-purple); } /* Palette: powered-purple */ .is-cla-color-palette-powered-purple, .is-style-powered-purple { --cla--color--secondary: var(--cla--color--powered-purple); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--oval-green); --cla--color--tertiary--text: var(--cla--color--energy-green); --cla--color--point: var(--cla--color--energy-green); --cla--gradient--color-bars--colors: var(--cla--color--oval-green), var(--cla--color--oval-green) 10%, var(--cla--color--energy-green) 10%, var(--cla--color--energy-green) 20%, var(--cla--color--powered-purple) 20%, var(--cla--color--powered-purple) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--lovers-lane) 40%, var(--cla--color--lovers-lane) 50%, var(--cla--color--white) 50%, var(--cla--color--white) 60%, var(--cla--color--powered-purple) 60%, var(--cla--color--powered-purple) 70%, var(--cla--color--csu-green) 70%, var(--cla--color--csu-green) 80%, var(--cla--color--energy-green) 80%, var(--cla--color--energy-green) 90%, var(--cla--color--csu-gold) 90%, var(--cla--color--csu-gold) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--powered-purple); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--powered-purple); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* Palette: stalwart-slate */ .is-cla-color-palette-stalwart-slate, .is-style-stalwart-slate { --cla--color--secondary: var(--cla--color--stalwart-slate); --cla--color--secondary--contrast: var(--cla--color--white); --cla--color--tertiary: var(--cla--color--horsetooth-blue); --cla--color--tertiary--text: var(--cla--color--energy-green); --cla--color--point: var(--cla--color--energy-green); --cla--gradient--color-bars--colors: var(--cla--color--energy-green), var(--cla--color--energy-green) 10%, var(--cla--color--lovers-lane) 10%, var(--cla--color--lovers-lane) 20%, var(--cla--color--stalwart-slate) 20%, var(--cla--color--stalwart-slate) 30%, var(--cla--color--white) 30%, var(--cla--color--white) 40%, var(--cla--color--csu-gold) 40%, var(--cla--color--csu-gold) 50%, var(--cla--color--csu-green) 50%, var(--cla--color--csu-green) 60%, var(--cla--color--lovers-lane) 60%, var(--cla--color--lovers-lane) 70%, var(--cla--color--stalwart-slate) 70%, var(--cla--color--stalwart-slate) 80%, var(--cla--color--energy-green) 80%, var(--cla--color--energy-green) 90%, var(--cla--color--csu-gold) 90%, var(--cla--color--csu-gold) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--stalwart-slate); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--horsetooth-blue); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--stalwart-slate); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--horsetooth-blue); } /* Palette: sunshine */ .is-cla-color-palette-sunshine, .is-style-sunshine { --cla--color--secondary: var(--cla--color--sunshine); --cla--color--secondary--contrast: var(--cla--color--csu-green); --cla--color--tertiary: var(--cla--color--csu-green); --cla--color--tertiary--text: var(--cla--color--tertiary); --cla--gradient--color-bars--colors: var(--cla--color--oval-green), var(--cla--color--oval-green) 10%, var(--cla--color--lovers-lane) 10%, var(--cla--color--lovers-lane) 20%, var(--cla--color--sunshine) 20%, var(--cla--color--sunshine) 30%, var(--cla--color--csu-gold) 30%, var(--cla--color--csu-gold) 40%, var(--cla--color--white) 40%, var(--cla--color--white) 50%, var(--cla--color--energy-green) 50%, var(--cla--color--energy-green) 60%, var(--cla--color--sunshine) 60%, var(--cla--color--sunshine) 70%, var(--cla--color--csu-green) 70%, var(--cla--color--csu-green) 80%, var(--cla--color--csu-gold) 80%, var(--cla--color--csu-gold) 90%, var(--cla--color--lovers-lane) 90%, var(--cla--color--lovers-lane) 100%; /* Brushstroke */ --cla--texture--brushstroke--mix-blend-mode--secondary: var(--cla--texture--brushstroke--mix-blend-mode--sunshine); --cla--texture--brushstroke--mix-blend-mode--tertiary: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); --cla--texture--brushstroke--opacity--secondary: var(--cla--texture--brushstroke--opacity--sunshine); --cla--texture--brushstroke--opacity--tertiary: var(--cla--texture--brushstroke--opacity--oval-green); } /* -------------------------------- * MU Styles * -------------------------------- */ .cla-global-link { display: block; min-height: var(--wcag--operable--input-modalities--minimum-target-size); } /* -------------------------------- * Footer * -------------------------------- */ .site-footer a:focus, .site-footer a:hover { color: var(--cla--color--energy-green); } /* -------------------------------- * Media Queries * -------------------------------- */ @media (max-width: 479px) { :root { --wp--custom--infinitum--typography--type-ratio: calc(1 + (1 / 4)) !important; } [class*="wp-block-"] { --cla--spacing--decoration: var(--cla--spacing--1); --cla--spacing--decoration-small: var(--cla--spacing--1); --cla--dimension--decoration: var(--cla--spacing--1); --cla--dimension--decoration-small: var(--cla--spacing--1); } /* Buttons */ :is(main, .editor-styles-wrapper) :where(form button, form input[type="button"], form input[type="reset"], form input[type="submit"]), :where(:where(main, .editor-styles-wrapper) form) input[type="file"]::file-selector-button, .button:any-link { width: 100%; } } @media (min-width: 480px) and (max-width: 767px) { [class*="wp-block-"] { --cla--spacing--decoration: var(--cla--spacing--2); --cla--spacing--decoration-small: var(--cla--spacing--1); --cla--dimension--decoration: var(--cla--spacing--2); --cla--dimension--decoration-small: var(--cla--spacing--1); } } @media (min-width: 480px) and (max-width: 1439px) { :root { --wp--custom--infinitum--typography--type-ratio: calc(1 + (1 / 3)) !important; } } /* @media (min-width: 768px) and (max-width: 1023px) { [class*="wp-block-"] { --cla--spacing--decoration: var(--cla--spacing--2); --cla--spacing--decoration-small: var(--cla--spacing--2); --cla--dimension--decoration: var(--cla--spacing--2); --cla--dimension--decoration-small: var(--cla--spacing--2); } } */ /* -------------------------------- * Container Queries * -------------------------------- */ @container (max-width: 479px) { [class*="wp-block-"] > * { --cla--spacing--decoration: var(--cla--spacing--1); --cla--spacing--decoration-small: var(--cla--spacing--1); --cla--dimension--decoration: var(--cla--spacing--1); --cla--dimension--decoration-small: var(--cla--spacing--1); } } @container (min-width: 480px) and (max-width: 767px) { [class*="wp-block-"] > * { --cla--spacing--decoration: var(--cla--spacing--2); --cla--spacing--decoration-small: var(--cla--spacing--1); --cla--dimension--decoration: var(--cla--spacing--2); --cla--dimension--decoration-small: var(--cla--spacing--1); } } /* @container (min-width: 768px) and (max-width: 1023px) { [class*="wp-block-"] > * { --cla--spacing--decoration: var(--cla--spacing--2); --cla--spacing--decoration-small: var(--cla--spacing--2); --cla--dimension--decoration: var(--cla--spacing--2); --cla--dimension--decoration-small: var(--cla--spacing--2); } } */ /* -------------------------------- * Utility Classes (need to be at the end of the cascade since some generate image tokens that won't be updated when custom properties change) * -------------------------------- */ /* Brand: Color Bars */ .cla-color-bars:where(.cla-color-bars--horizontal) { --cla--gradient--color-bars--direction: 180deg; } .cla-color-bars:where(.cla-color-bars--vertical) { --cla--gradient--color-bars--direction: 90deg; } .cla-color-bars { background: linear-gradient(var(--cla--gradient--color-bars--direction), var(--cla--gradient--color-bars--colors), var(--cla--color--secondary)); }