@import "tailwindcss" prefix(opc); /* This is to address the potential conflict with radix theme, Instead of using hover:bg-red-500, use opc:hover:bg-red-500 */ @import 'tailwind-scrollbar-hide/v4'; /* Hides scrollbars while maintaining scroll functionality */ @plugin 'tailwindcss-motion'; /* Adds motion utilities for animations and transitions */ @import "tailwindcss-intersect"; /* Provides utilities for detecting when elements intersect with the viewport */ @plugin "tailwindcss-debug-screens"; /* Displays the current breakpoint for responsive design debugging */ /*@plugin "daisyui";*/ /* Component library with pre-styled elements and themes */ @theme { /* Font Weight */ --font-weight-extralight: var(--font-weight-lighter); --font-weight-light: var(--font-weight-light); --font-weight-normal: var(--font-weight-normal); --font-weight-medium: var(--font-weight-medium); --font-weight-semibold: var(--font-weight-semibold); --font-weight-bold: var(--font-weight-bold); --font-weight-extrabold: var(--font-weight-bolder); --font-display: var(--font-family-base); --font-gothic: var(--font-family-base); --font-gothic-bold: var(--headings-font-family); /* Boostrap colors */ --color-primary: var(--bs-primary); --color-secondary: var(--bs-secondary); --color-light: var(--bs-light); --color-dark: var(--bs-dark); --color-success: var(--bs-success); --color-info: var(--bs-info); --color-warning: var(--bs-warning); --color-danger: var(--bs-danger); /* =============================================================================================== */ /* Color Pallet generated using the primary color's hue (see https://huetone.ardov.me) */ /* Please manually change the chroma to be 0.0 if you are using grayscaled colors (black or white) */ /* In order for the compliance for AA the bg and fg colors should be of at least 600 apart from each other (e.g. bg-yellow-700 and fg-yellow-100) */ /* PRIMARY */ --color-primary-0: var(--opc-color-white); /* WHITE */ --color-primary-50: #e8ecee; /* oklch(from var(--opc-color-primary ) 99.0% 0.020 h);*/ /*c: 0.020 or 0.00*/ --color-primary-100: #d1d8dd; /* oklch(from var(--opc-color-primary ) 95.0% 0.050 h);*/ /*c: 0.050 or 0.00*/ --color-primary-200: #b9c5cc; /* oklch(from var(--opc-color-primary ) 92.5% 0.150 h);*/ /*c: 0.150 or 0.00*/ --color-primary-300: #8b9eaa; /* oklch(from var(--opc-color-primary ) 87.5% 0.175 h);*/ /*c: 0.175 or 0.00*/ --color-primary-400: #5d7788; /* oklch(from var(--opc-color-primary ) 80.0% 0.150 h);*/ /*c: 0.150 or 0.00*/ --color-primary-500: #2e5066; /* oklch(from var(--opc-color-primary ) 72.5% 0.145 h);*/ /*c: 0.145 or 0.00*/ --color-primary-600: #173c55; /* oklch(from var(--opc-color-primary ) 62.5% 0.135 h);*/ /*c: 0.135 or 0.00*/ --color-primary-700: #15364d; /* oklch(from var(--opc-color-primary ) 52.5% 0.130 h);*/ /*c: 0.130 or 0.00*/ --color-primary-800: #123044; /* oklch(from var(--opc-color-primary ) 45.0% 0.100 h);*/ /*c: 0.100 or 0.00*/ --color-primary-900: #102a3b; /* oklch(from var(--opc-color-primary ) 40.0% 0.100 h);*/ /*c: 0.100 or 0.00*/ --color-primary-950: #0e2433; /* oklch(from var(--opc-color-primary ) ????% 0.100 h);*/ /*c: ????? or 0.00*/ --color-primary-1000: var(--opc-color-black); /* BLACK */ --color-gray: #F2F2F2; /* SECONDARY */ --color-secondary-0: var(--opc-color-white); /* WHITE */ --color-secondary-50: var(--opc-color-teal-50 ); /* oklch(from var(--opc-color-secondary) 99.0% 0.020 h);*/ /*c: 0.020 or 0.00*/ --color-secondary-100: var(--opc-color-teal-100); /* oklch(from var(--opc-color-secondary) 95.0% 0.050 h);*/ /*c: 0.050 or 0.00*/ --color-secondary-200: var(--opc-color-teal-200); /* oklch(from var(--opc-color-secondary) 92.5% 0.150 h);*/ /*c: 0.150 or 0.00*/ --color-secondary-300: var(--opc-color-teal-300); /* oklch(from var(--opc-color-secondary) 87.5% 0.175 h);*/ /*c: 0.175 or 0.00*/ --color-secondary-400: var(--opc-color-teal-400); /* oklch(from var(--opc-color-secondary) 80.0% 0.150 h);*/ /*c: 0.150 or 0.00*/ --color-secondary-500: var(--opc-color-teal-500); /* oklch(from var(--opc-color-secondary) 72.5% 0.145 h);*/ /*c: 0.145 or 0.00*/ --color-secondary-600: var(--opc-color-teal-600); /* oklch(from var(--opc-color-secondary) 62.5% 0.135 h);*/ /*c: 0.135 or 0.00*/ --color-secondary-700: var(--opc-color-teal-700); /* oklch(from var(--opc-color-secondary) 52.5% 0.130 h);*/ /*c: 0.130 or 0.00*/ --color-secondary-800: var(--opc-color-teal-800); /* oklch(from var(--opc-color-secondary) 45.0% 0.100 h);*/ /*c: 0.100 or 0.00*/ --color-secondary-900: var(--opc-color-teal-900); /* oklch(from var(--opc-color-secondary) 40.0% 0.100 h);*/ /*c: 0.100 or 0.00*/ --color-secondary-950: var(--opc-color-teal-950); /* oklch(from var(--opc-color-secondary) ????% 0.100 h);*/ /*c: ????? or 0.00*/ --color-secondary-1000: var(--opc-color-black); /* BLACK */ /* =============================================================================================== */ /* Component Colors : These are the colors that are used for the components */ /* Please swap them with the primary and secondary colors (with shades) defined previously */ /* In order for the compliance for AA the bg and fg colors should be of at least 600 apart from each other (e.g. bg-yellow-700 and fg-yellow-100) */ /* Page Sitewide Banner */ --color-component-page-sitewide-banner-bg: var(--opc-color-primary-200); --color-component-page-sitewide-banner-fg: var(--opc-color-primary-1000); /* Tooltip */ --color-component-tooltip-btn-bg: var(--opc-color-primary-600); --color-component-tooltip-btn-bg-hover: var(--opc-color-primary-800); --color-component-tooltip-btn-fg: var(--opc-color-primary-0); --color-component-tooltip-icon-fg: var(--opc-color-primary-600); --color-component-tooltip-icon-fg-hover: var(--opc-color-primary-800); --color-component-tooltip-content-bg: var(--opc-color-secondary-800); --color-component-tooltip-content-fg: var(--opc-color-secondary-0); --color-component-tooltip-content-opacity: 1.0; /* Table of Contents */ --color-component-toc-header-bg: var(--opc-color-primary-600); --color-component-toc-header-bg-hover: var(--opc-color-primary-800); --color-component-toc-header-fg: var(--opc-color-primary-0); --color-component-toc-container-bg: var(--opc-color-primary-0); --color-component-toc-minimal-border-color: var(--opc-color-secondary-400); --color-component-toc-minimal-title-color: var(--opc-color-primary-1000); --color-component-toc-link-fg: var(--opc-color-primary-800); --color-component-toc-link-bg: transparent;; --color-component-toc-link-fg-hover: var(--opc-color-primary-800); --color-component-toc-link-bg-hover: var(--opc-color-gray-100); /* Logo Cloud */ --color-component-logo-cloud-border-color: var(--opc-color-primary-600); --color-component-logo-cloud-border-color-hover: var(--opc-color-primary-800); /* CTA */ --color-component-cta-bg: var(--opc-color-primary-50); --color-component-cta-border: var(--opc-color-primary-50); --color-component-cta-fg: white; --color-component-cta-btn-fg: var(--opc-color-primary-800); --color-component-cta-btn-fg-hover: var(--opc-color-primary-0); --color-component-cta-btn-bg: white; --color-component-cta-btn-bg-hover: var(--opc-color-primary-800); /* Card / Cards Swiper */ --color-component-card-swiper-indicator-bg: var(--opc-color-primary-100); --color-component-card-swiper-indicator-bg-hover: var(--opc-color-primary-200); --color-component-card-swiper-indicator-bg-active: var(--opc-color-primary-800); --color-component-card-bagde-fg: var(--opc-color-primary-0); --color-component-card-bagde-bg: var(--opc-color-primary-600); --color-component-card-bagde-fg-hover: var(--opc-color-primary-600); --color-component-card-bagde-bg-hover: var(--opc-color-primary-0); --color-component-card-tags-fg: var(--opc-color-gray-800); --color-component-card-tags-bg: var(--opc-color-gray-200); --color-component-card-tags-fg-hover: var(--opc-color-gray-100); --color-component-card-tags-bg-hover: var(--opc-color-gray-600); --color-component-card-container-background: var(--opc-color-gray); --color-component-card-container-background-hover: var(--opc-color-primary-800); --color-component-card-title: var(--opc-color-primary-800); --color-component-card-body: var(--bs-body-color); --color-component-card-title-hover: white; --color-component-card-body-hover: white; --color-component-card-subtitle: var(--opc-color-gray-600); --color-component-card-tags-fg: var(--opc-color-gray-600); --color-component-card-tags-bg: var(--opc-color-gray-200); --color-component-card-outline: transparent; --color-component-card-outline-hover: transparent; --scale-component-card-hover: 1.00; /*1.05;*/ --scale-component-card-image-hover: 1.00; /*1.10;*/ /* Breadcrumb */ --color-component-breadcrumb-fg: var(--opc-color-primary-950); --color-component-breadcrumb-bg: var(--opc-color-primary-0); --color-component-breadcrumb-fg-hover: var(--opc-color-primary-0); --color-component-breadcrumb-bg-hover: var(--opc-color-primary-800); /* Accordion */ --color-component-accordion-header-bg: var(--opc-color-gray-100); --color-component-accordion-header-fg: var(--opc-color-primary-800); --color-component-accordion-header-bg-hover: var(--opc-color-primary-800); --color-component-accordion-header-fg-hover: var(--opc-color-primary-100); --color-component-accordion-header-expanded-bg: var(--opc-color-gray-100); --color-component-accordion-header-expanded-fg: var(--opc-color-primary-800); --color-component-accordion-header-expanded-bg-hover: var(--opc-color-primary-800); --color-component-accordion-header-expanded-fg-hover: var(--opc-color-primary-100); --color-component-accordion-container-border: var(--opc-color-gray-100); --color-component-accordion-container-bg: var(--opc-color-gray-100); --color-component-accordion-container-fg: var(--opc-color-primary-800); /* Attachment */ --color-component-attachment-fg: var(--opc-color-primary-800); --color-component-attachment-fg-hover: var(--opc-color-primary-0); --color-component-attachment-container-border: var(--opc-color-gray-100); --color-component-attachment-container-border-hover: var(--opc-color-primary-800); --color-component-attachment-container-bg: var(--opc-color-gray-100); --color-component-attachment-container-bg-hover: var(--opc-color-primary-800); --scale-component-attachment-hover: 1.00; --trans-x-component-attachment-hover: 0px; --trans-y-component-attachment-hover: 0px; /* Status Message (Toast) */ --color-component-status-message-bg: var(--opc-color-primary-600); --color-component-status-message-success-header-bg: var(--opc-color-green-600); --color-component-status-message-success-header-fg: var(--opc-color-white); --color-component-status-message-warning-header-bg: var(--opc-color-yellow-600); --color-component-status-message-warning-header-fg: var(--opc-color-white); --color-component-status-message-error-header-bg: var(--opc-color-red-600); --color-component-status-message-error-header-fg: var(--opc-color-white); --color-component-status-message-info-header-bg: var(--opc-color-blue-600); --color-component-status-message-info-header-fg: var(--opc-color-white); --color-component-status-message-default-header-bg: var(--opc-color-gray-600); --color-component-status-message-default-header-fg: var(--opc-color-white); /*------ UNFINISHED -------- */ /* Menu */ --color-component-menu-primary-fg: var(--opc-color-primary-1000); --color-component-menu-primary-fg-hover: var(--opc-color-primary-0 ); --color-component-menu-primary-bg: var(--opc-color-primary-0 ); --color-component-menu-primary-bg-hover: var(--opc-color-primary-1000); --color-component-menu-secondary-fg: var(--opc-color-primary-1000); --color-component-menu-secondary-fg-hover: var(--opc-color-primary-0 ); --color-component-menu-secondary-bg: var(--opc-color-primary-0 ); --color-component-menu-secondary-bg-hover: var(--opc-color-primary-1000); --color-component-menu-tertiary-fg: var(--opc-color-primary-1000); --color-component-menu-tertiary-fg-hover: var(--opc-color-primary-0 ); --color-component-menu-tertiary-bg: var(--opc-color-primary-0 ); --color-component-menu-tertiary-bg-hover: var(--opc-color-primary-1000); /* Banner */ --color-component-banner-bg: var(--opc-color-primary-600); --color-component-banner-fg: var(--opc-color-primary-0); --color-component-banner-bg-hover: var(--opc-color-primary-800); --color-component-banner-fg-hover: var(--opc-color-primary-0); --color-component-banner-body-bg: var(--opc-color-primary-0); --color-component-banner-body-fg: var(--opc-color-primary-1000); --color-component-banner-body-bg-hover: var(--opc-color-primary-100); --color-component-banner-body-fg-hover: var(--opc-color-primary-800); /* =============================================================================================== */ /* Component Colors Breakdown - Nav Menu (using primary, secondary, tertiary colors defined previously DO NOT !!!! modify these colors directly unless necessary) */ --color-component-nav-menu-container-bg: var(--opc-color-transparent); --color-component-nav-menu-level-1-bg: var(--opc-color-component-menu-primary-bg); --color-component-nav-menu-level-1-fg: var(--opc-color-component-menu-primary-fg); --color-component-nav-menu-level-1-bg-hover: var(--opc-color-component-menu-primary-fg-hover); --color-component-nav-menu-level-1-fg-hover: var(--opc-color-component-menu-primary-bg-hover); --color-component-nav-menu-level-2-container-info-fg: var(--opc-color-component-menu-secondary-fg); --color-component-nav-menu-level-2-container-btn-fg: var(--opc-color-component-menu-secondary-bg); --color-component-nav-menu-level-2-container-btn-bg: var(--opc-color-component-menu-secondary-fg); --color-component-nav-menu-level-2-container-btn-bg-hover: var(--opc-color-component-menu-secondary-bg); --color-component-nav-menu-level-2-container-btn-fg-hover: var(--opc-color-component-menu-secondary-fg); --color-component-nav-menu-level-2-bg: var(--opc-color-component-menu-secondary-bg); --color-component-nav-menu-level-2-fg: var(--opc-color-component-menu-secondary-fg); --color-component-nav-menu-level-2-bg-hover: var(--opc-color-component-menu-secondary-fg-hover); --color-component-nav-menu-level-2-fg-hover: var(--opc-color-component-menu-secondary-bg-hover); --color-component-nav-menu-level-3-bg: var(--opc-color-component-menu-tertiary-bg); --color-component-nav-menu-level-3-fg: var(--opc-color-component-menu-tertiary-fg); --color-component-nav-menu-level-3-bg-hover: var(--opc-color-component-menu-tertiary-fg-hover); --color-component-nav-menu-level-3-fg-hover: var(--opc-color-component-menu-tertiary-bg-hover); /* =============================================================================================== */ /* Boostrap breakpoints */ /* --breakpoint-*: initial; *px */ --breakpoint-sm: 36rem; /* 576px */ --breakpoint-md: 48rem; /* 768px */ --breakpoint-lg: 62rem; /* 992px */ --breakpoint-xl: 75rem; /* 1200px */ --breakpoint-xxl: 87.5rem; /* 1400px */ --breakpoint-2xl: 100rem; /* 1600px */ --breakpoint-3xl: 120rem; /* 1920px */ /* Animations */ --animate-loop-scroll: loop-scroll 40s linear infinite; --animate-loop-scroll-faster: loop-scroll 20s linear infinite; --animate-loop-scroll-fastest: loop-scroll 20s linear infinite; @keyframes loop-scroll { from { transform: translateX(-20%);} to { transform: translateX(-100%);}} /* =============================================================================================== */ } :root{ /* Override facet checkbox item spacing */ .facet-item input[type="checkbox"]{ margin-top: 5px; } /* Custom List UL/OL style */ #main-content .field_body ul{ list-style: disc; } #main-content .field_body ol{ list-style: decimal; } /* Custom utilities */ --opc-menu-height: 3rem; .-container-no-gutter{ @media (min-width: 1400px) { margin-inline:calc(((-1) * ((100vw - 1320px) )) / 2); width: 100vw; /*background-color: red;*/ } @media (max-width: 1399px) and (min-width: 1200px) { margin-inline:calc(((-1) * ((100vw - 1140px) )) / 2); width: 100vw; /*background-color: green;*/ } @media (max-width: 1199px) and (min-width: 992px) { margin-inline:calc(((-1) * ((100vw - 960px) )) / 2); width: 100vw; /*background-color: yellow;*/ } @media (max-width: 991px) and (min-width: 768px) { margin-inline:calc(((-1) * ((100vw - 720px) )) / 2); width: 100vw; /*background-color: blue;*/ } @media (max-width: 767px) { margin-inline:calc(((-1) * (100vw - 100%)) / 2); width: 100vw; /*background-color: violet;*/ } } .-container-with-gutter{ @media (min-width: 1400px) { margin-inline:calc(((-1) * ((100vw - 1320px) + (var(--bs-gutter-x) * 1))) / 2); width: 100vw; /*background-color: red;*/ } @media (max-width: 1399px) and (min-width: 1200px) { margin-inline:calc(((-1) * ((100vw - 1140px) + (var(--bs-gutter-x) * 1))) / 2); width: 100vw; /*background-color: green;*/ } @media (max-width: 1199px) and (min-width: 992px) { margin-inline:calc(((-1) * ((100vw - 960px) + (var(--bs-gutter-x) * 1))) / 2); width: 100vw; /*background-color: yellow;*/ } @media (max-width: 991px) and (min-width: 768px) { margin-inline:calc(((-1) * ((100vw - 720px) + (var(--bs-gutter-x) * 1))) / 2); width: 100vw; /*background-color: blue;*/ } @media (max-width: 767px) { margin-inline:calc(((-1) * ((100vw - 100%) + (var(--bs-gutter-x) * 1))) / 2); width: 100vw; /*background-color: violet;*/ } } .-container-with-gutter-cta{ @media (min-width: 1400px) { margin-inline:calc(((-1) * ((100vw - 1320px) + (var(--bs-gutter-x) * 3))) / 2); width: 100vw; /*background-color: red;*/ } @media (max-width: 1399px) and (min-width: 1200px) { margin-inline:calc(((-1) * ((100vw - 1140px) + (var(--bs-gutter-x) * 3))) / 2); width: 100vw; /*background-color: green;*/ } @media (max-width: 1199px) and (min-width: 992px) { margin-inline:calc(((-1) * ((100vw - 960px) + (var(--bs-gutter-x) * 3))) / 2); width: 100vw; /*background-color: yellow;*/ } @media (max-width: 991px) and (min-width: 768px) { margin-inline:calc(((-1) * ((100vw - 720px) + (var(--bs-gutter-x) * 3))) / 2); width: 100vw; /*background-color: blue;*/ } @media (max-width: 767px) { margin-inline:calc(((-1) * ((100vw - 100%) + (var(--bs-gutter-x) * 3))) / 2); width: 100vw; /*background-color: violet;*/ } } .-container-alert{ @media (min-width: 1400px) { margin-inline:calc(((-1) * ((100vw - 1320px) + (4.5rem * 1))) / 2); width: 100vw; /*background-color: red;*/ } @media (max-width: 1399px) and (min-width: 1200px) { margin-inline:calc(((-1) * ((100vw - 1140px) + (4.5rem * 1))) / 2); width: 100vw; /*background-color: green;*/ } @media (max-width: 1199px) and (min-width: 992px) { margin-inline:calc(((-1) * ((100vw - 960px) + (4.5rem * 1))) / 2); width: 100vw; /*background-color: yellow;*/ } @media (max-width: 991px) and (min-width: 768px) { margin-inline:calc(((-1) * ((100vw - 720px) + (4.5rem * 1))) / 2); width: 100vw; /*background-color: blue;*/ } @media (max-width: 767px) { margin-inline:calc(((-1) * ((100vw - 100%) + (0rem * 1))) / 2); width: 100vw; /*background-color: violet;*/ } } .contextual-region:has(ul .submenu-container){ position:unset; } blockquote { @apply opc:pl-4! opc:pr-6! opc:relative; &::before{ content: " "; height: 100%; width: 3px; background-color: var(--opc-color-primary-800); position: absolute; display: block; border-radius: 0px; left: 0px; } &>span, &>p{ @apply opc:text-base opc:font-medium opc:italic; } } input, select{ margin-bottom: 16px; } hr{ border-top-width: 3px; opacity: 1.0; } a{ text-decoration: none; font-family: inherit; /* color: var(--color-primary); */ &:hover{ text-decoration: underline; color: var(--color-dark); } &:focus{ text-decoration: underline; color: var(--color-dark); } } .contextual-region:has(ul .submenu-container){ position:unset; } input, select{ margin-bottom: 16px; } /* [Custom Utility Class] Spacing Utilities */ .opc\:spacing-top{ @apply opc:pt-8; } .opc\:spacing-bottom{ @apply opc:pb-8; } .opc\:spacing-both{ @apply opc:pt-8 opc:pb-8; } /* [Custom Utility Class] Background Gradient Utilities */ .opc\:bg-gradient-ccrc{ @apply opc:bg-gradient-to-r opc:from-[#064E67] opc:from-1% opc:via-[#28A9DE] opc:via-90% opc:to-100% opc:to-[#2AAADC] } /* [GLOBAL OVERRIDE] — Image in Body Field */ .paragraph--type--content img, .field_body img{ @apply opc:rounded-2xl; } /* [GLOBAL OVERRIDE] — Font: Century Gothic Pro as default */ html, body { font-family: var(--font-family-base); font-style: normal; font-weight: 400; } /* [GLOBAL OVERRIDE] — Override Body Background Color (to paint the empty white area in the "Page not found" page with theme color)*/ body{ position: relative; } body::after { content: " "; z-index: -999; width: 100vw; height: 100vh; position: fixed; bottom: 0px; left: 0px; background: var(--opc-color-primary-800); } body::before { content: " "; z-index: -998; width: 100vw; height: calc(100% - 20px); position: absolute; top: 0px; left: 0px; background: white; } /* [GLOBAL OVERRIDE] — The clickable logo on top left of the website */ a.navbar-brand.d-inline-flex.align-items-center:hover{ background: var(--opc-color-gray-100); margin: -5px; padding: 5px; border-radius: var(--opc-radius-md); transition-property: background-color !important; transition-timing-function: var(--tw-ease, var(--opc-default-transition-timing-function)) !important; transition-duration: var(--tw-duration, var(--opc-default-transition-duration)) !important; } /* [CKEditor Style] Button*/ .opc-ckeditor-caption-like-text{ @apply opc:rounded-md opc:p-2 opc:text-xs opc:text-center opc:italic; } .opc-ckeditor-quote{ @apply opc:italic opc:pl-4 opc:pr-6 opc:py-2 opc:border-l-3 opc:border-primary-800; } .opc-ckeditor-button-dark{ @apply opc:block opc:w-fit opc:my-2 opc:border-3 opc:border-primary-800 opc:px-4 opc:py-2 opc:bg-primary-800 opc:text-primary-0 opc:rounded-md opc:font-semibold opc:transition opc:hover:bg-primary-0 opc:hover:text-primary-1000 opc:hover:no-underline opc:focus:bg-primary-0 opc:focus:text-primary-1000 opc:focus:no-underline; } .opc-ckeditor-button-light{ @apply opc:block opc:w-fit opc:my-2 opc:border-3 opc:border-secondary-300 opc:px-4 opc:py-2 opc:bg-secondary-300 opc:text-secondary-1000 opc:rounded-md opc:font-semibold opc:transition opc:hover:bg-secondary-800 opc:hover:border-secondary-800 opc:hover:text-secondary-0 opc:hover:no-underline opc:focus:bg-secondary-800 opc:focus:border-secondary-800 opc:focus:text-secondary-0 opc:focus:no-underline; } /* [Facet Checkbox] Accent Color */ .facets-checkbox{ @apply opc:accent-primary-800; } /* Webform Contact Button */ .webform-submission-contact-add-form input[type="submit"].btn{ @apply opc:rounded-full! opc:border-2 opc:font-semibold opc:mt-4 opc:bg-primary-800 opc:text-primary-0 opc:border-primary-800 opc:font-semibold opc:transition opc:hover:bg-primary-100 opc:hover:text-primary-1000 opc:hover:no-underline opc:focus:bg-primary-100 opc:focus:text-primary-1000 opc:focus:no-underline opc:active:bg-primary-100 opc:active:text-primary-1000 opc:active:no-underline ; } } @layer utilities { .font-regular { font-style: normal; font-weight: 400; } .font-bold { font-style: normal; font-weight: 700; } .font-italic { font-style: italic; font-weight: 400; } .font-bold-italic { font-style: italic; font-weight: 700; } }