dcnb(className, 'su-rounded-full su-w-fit', {
- 'su-p-6 su-bg-gradient-to-tr su-from-saa-black su-to-saa-black-opacity-80 group-hover:su-from-black group-hover:su-to-black-opacity-80 group-focus-within:su-from-black group-focus-within:su-to-black-opacity-80':
+ 'su-p-6 su-bg-gradient-to-tr su-from-saa-black su-to-saa-black/80 group-hocus-within:su-from-black group-hocus-within:su-to-black/80':
!isMinimal,
});
export const dateWrapper = ({ isMinimal, isSmall }) =>
diff --git a/src/components/simple/FilterCheckbox/FilterCheckbox.styles.js b/src/components/simple/FilterCheckbox/FilterCheckbox.styles.js
index 76c4d8cd5..124f8a382 100644
--- a/src/components/simple/FilterCheckbox/FilterCheckbox.styles.js
+++ b/src/components/simple/FilterCheckbox/FilterCheckbox.styles.js
@@ -4,18 +4,18 @@ export const root = ({ checked }) =>
dcnb(
'su-group su-pt-3 su-py-4 su-pl-20 sm:su-pl-30 md:su-pl-50 lg:su-p-3 hover:su-bg-palo-verde-dark focus-within:su-bg-palo-verde-dark lg:su-bg-saa-black-dark su-mt-6 lg:focus-within:su-bg-gradient-to-bl lg:hover:su-bg-gradient-to-bl lg:focus-within:su-from-saa-electric-blue lg:hover:su-from-saa-electric-blue lg:focus-within:su-to-palo-verde-dark lg:hover:su-to-palo-verde-dark su-cursor-pointer',
{
- 'lg:su-bg-gradient-to-bl lg:su-from-saa-electric-blue su-to-palo-verde-dark':
+ 'lg:su-bg-gradient-to-bl lg:su-from-saa-electric-blue lg:su-to-palo-verde-dark':
checked,
}
);
export const label =
- 'su-relative su-text-16 md:su-text-18 xl:su-text-19 2xl:su-text-21 su-p-04em su-flex su-flex-row su-items-center su-text-white lg:su-bg-saa-black-dark focus-within:su-bg-transparent group-hover:su-bg-transparent su-cursor-pointer group-hover:su-underline group-focus-within:su-underline lg:group-hover:su-no-underline lg:group-focus-within:su-no-underline';
+ 'su-relative su-text-16 md:su-text-18 xl:su-text-19 2xl:su-text-21 su-p-04em su-flex su-flex-row su-items-center su-text-white lg:su-bg-saa-black-dark focus-within:su-bg-transparent group-hover:su-bg-transparent su-cursor-pointer group-hocus-within:su-underline lg:group-hover:su-no-underline lg:group-focus-within:su-no-underline';
export const icon = ({ checked }) =>
- dcnb('su-mr-8 su-w-[1.4em] lg:su-w-[1em] su-flex-shrink-0', {
+ dcnb('su-mr-8 su-w-[1.4em] lg:su-w-1em su-shrink-0', {
'su-opacity-0': !checked,
- 'su-text-palo-verde-light group-focus-within:su-text-white group-hover:su-text-white lg:su-text-white':
+ 'su-text-palo-verde-light group-hocus-within:su-text-white lg:su-text-white':
checked,
});
-export const input = 'su-absolute su-opacity-0 su-w-[0] su-h-[0]';
+export const input = 'su-absolute su-opacity-0 su-w-0 su-h-0';
export const count =
'su-text-14 md:su-text-16 xl:su-text-16 2xl:su-text-18 su-ml-02em';
diff --git a/src/components/simple/heroIcon.js b/src/components/simple/heroIcon.js
index 590fa1211..785f35900 100644
--- a/src/components/simple/heroIcon.js
+++ b/src/components/simple/heroIcon.js
@@ -23,88 +23,74 @@ const HeroIcon = ({ iconType, srText, isAnimate, className, ...props }) => {
const heroIconMap = {
video: {
heroicon: VideoCameraIcon,
- baseStyle: 'su-w-08em su-mt-[-0.2em]',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ baseStyle: 'su-w-08em su--mt-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
play: {
heroicon: PlayIcon,
baseStyle: 'su-w-08em su-ml-7 su--mt-3',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
podcast: {
heroicon: MicrophoneIcon,
baseStyle: 'su-w-08em su-mt-[-0.25em]',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
external: {
heroicon: ArrowRightIcon,
- baseStyle:
- 'su-w-08em su-ml-02em su--rotate-45 group-hover:su--rotate-45 group-focus:su--rotate-45',
+ baseStyle: 'su-w-08em su-ml-02em su--rotate-45 group-hocus:su--rotate-45',
animate:
- 'group-hover:su-translate-x-01em group-focus:su-translate-x-01em group-hover:su--translate-y-01em group-focus:su--translate-y-01em',
+ 'group-hocus:su-translate-x-01em group-hocus:su--translate-y-01em',
},
'arrow-left': {
heroicon: ArrowLeftIcon,
- baseStyle: 'su-w-08em su-mr-03em su-mt-02em',
- animate:
- 'group-hover:su--translate-x-02em group-focus:su--translate-x-02em',
+ baseStyle: 'su-w-08em su-mr-03em su--mt-02em',
+ animate: 'group-hocus:su--translate-x-02em',
},
'arrow-right': {
heroicon: ArrowRightIcon,
baseStyle: 'su-w-08em su-ml-03em su--mt-02em',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
download: {
heroicon: DownloadIcon,
baseStyle: 'su-w-08em su-ml-4 su--mt-3',
- animate:
- 'group-hover:su-translate-y-02em group-focus:su-translate-y-02em',
+ animate: 'group-hocus:su-translate-y-02em',
},
email: {
heroicon: MailIcon,
baseStyle: 'su-w-08em su-ml-7 su--mt-2',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
'chevron-down': {
heroicon: ChevronDownIcon,
baseStyle: 'su-w-[1.1em] su-ml-4 su--mt-3',
- animate:
- 'group-hover:su-translate-y-02em group-focus:su-translate-y-02em',
+ animate: 'group-hocus:su-translate-y-02em',
},
'chevron-right': {
heroicon: ChevronRightIcon,
baseStyle: 'su-w-1em su-ml-02em su--mt-4',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
'document-duplicate': {
heroicon: DocumentDuplicateIcon,
baseStyle: 'su-w-1em',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
check: {
heroicon: CheckIcon,
baseStyle: 'su-w-1em',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
plus: {
heroicon: PlusSmIcon,
baseStyle: 'su-w-1em',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
minus: {
heroicon: MinusSmIcon,
baseStyle: 'su-w-1em',
- animate:
- 'group-hover:su-translate-x-02em group-focus:su-translate-x-02em',
+ animate: 'group-hocus:su-translate-x-02em',
},
};
diff --git a/src/components/simple/tabLabel.js b/src/components/simple/tabLabel.js
index 4221b735b..0211c5535 100644
--- a/src/components/simple/tabLabel.js
+++ b/src/components/simple/tabLabel.js
@@ -5,12 +5,12 @@ import { SrOnlyText } from '../accessibility/SrOnlyText';
const TabLabel = ({ text, srText, classes, ...props }) => {
// Focus isn't on the card itself since we are using the stretched-link class for accessibility, so no need for group-focus styles
const interactionClasses =
- 'group-hover:su-bg-none group-hover:su-bg-digital-red-light group-focus-within:su-bg-none group-focus-within:su-bg-digital-red-light';
+ 'group-hocus-within:su-bg-none group-hocus-within:su-bg-digital-red-light';
return (
@@ -58,7 +58,7 @@ export const SBGrid = ({
alignItems={isStretchItems ? 'stretch' : 'start'}
justifyItems={alignment}
className={dcnb(
- 'su-gap-y-xl md:su-gap-y-[5rem] xl:su-gap-y-[7rem]',
+ 'su-gap-y-xl md:su-gap-y-50 xl:su-gap-y-70',
gapClasses
)}
>
diff --git a/src/styles/forms.css b/src/styles/forms.css
index ffca47e1f..8cadcb279 100644
--- a/src/styles/forms.css
+++ b/src/styles/forms.css
@@ -23,7 +23,7 @@
}
.ggeWidget .ggeContent .ggeQuestion.su-phone {
- @apply su-mb-[.7rem];
+ @apply su-mb-7;
}
.ggeWidget .ggeContent .ggeQuestion:last-child {
@@ -61,7 +61,7 @@
content: "";
mask: url("../assets/arrow-right.svg");
-webkit-mask-size: contain;
- @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-[1.5rem] su-h-[1.5rem] su--rotate-45 su-bg-white su-ml-4 su-relative su-top-2 su-transition su-transform-gpu;
+ @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-15 su-h-15 su--rotate-45 su-bg-white su-ml-4 su-relative su-top-2 su-transition su-transform-gpu;
}
.ggeWidget .ggeQuestion--instructions a:hover:after,
@@ -90,7 +90,7 @@
.ggeWidget .ggeQuestion input[type="date"],
.ggeWidget .ggeQuestion select,
.ggeWidget .ggeQuestion textarea {
- @apply su-leading-display su-p-20 su-max-w-full su-w-full su-text-[1.8rem] md:su-text-[2.1rem] su-border su-border-b-2 su-border-black-50 su-rounded-[3px] su-box-border;
+ @apply su-leading-display su-p-20 su-max-w-full su-w-full su-text-18 md:su-text-21 su-border su-border-b-2 su-border-black-50 su-rounded-[3px] su-box-border;
background: rgba(16, 15, 13, 0.5);
}
@@ -106,7 +106,7 @@
.ggeWidget .ggeQuestion input[type="text"],
.ggeWidget .ggeQuestion input[type="date"],
.ggeWidget .ggeQuestion textarea {
- @apply su-px-[21px] md:su-px-[19px] su-py-[20px];
+ @apply su-px-21 md:su-px-19 su-py-20;
}
.ggeWidget .ggeQuestion input[type="email"]:focus,
@@ -177,7 +177,7 @@
.ggeTally .ggeTally--text,
.ggeTally .ggeTally--money {
- @apply su-pt-0 su-pb-[3.2rem];
+ @apply su-pt-0 su-pb-32;
}
.ggeTally--text {
@apply su-border-b su-border-black-30;
@@ -192,7 +192,7 @@
}
.ggeWidget .ggeQuestion textarea {
- @apply md:su-pr-[25px];
+ @apply md:su-pr-25;
}
.ggeWidget .ggePageNav {
@@ -204,7 +204,7 @@
}
.ggeWidget .ggePageNav--back {
- @apply su-static su-translate-y-0 su-mr-[2rem] lg:su-mr-[3.6rem];
+ @apply su-static su-translate-y-0 su-mr-20 lg:su-mr-36;
}
.ggeWidget .ggeStripeBtn.ggeApplePay,
@@ -231,12 +231,12 @@
.ggeWidget .ggeButton--forward:disabled,
.ggeWidget .ggeButton--forward {
- @apply su-border-solid su-border-2 su-pl-[3rem] su-transition-colors su-border-digital-red su-bg-digital-red su-text-white hocus:su-bg-cardinal-red hocus:su-text-white hocus:su-border-cardinal-red su-rounded-none;
+ @apply su-border-2 su-pl-30 su-transition-colors su-border-digital-red su-bg-digital-red su-text-white hocus:su-bg-cardinal-red hocus:su-text-white hocus:su-border-cardinal-red su-rounded-none;
}
.ggeWidget .ggeButton--back:disabled,
.ggeWidget .ggeButton--back {
- @apply su-static su-border-2 su-pr-[3rem] su-border-solid su-translate-x-0 su-relative su-gradient-border su-border-to-rt-palo-verde-dark-to-saa-electric-blue su-text-saa-electric-blue hocus:su-text-white hocus:su-bg-gradient-to-tr hocus:su-from-palo-verde-dark hocus:su-to-saa-electric-blue hocus:su-shadow-md su-text-white;
+ @apply su-static su-border-2 su-pr-30 su-translate-x-0 su-relative su-gradient-border su-border-to-rt-palo-verde-dark-to-saa-electric-blue su-text-saa-electric-blue hocus:su-text-white hocus:su-bg-gradient-to-tr hocus:su-from-palo-verde-dark hocus:su-to-saa-electric-blue hocus:su-shadow-md su-text-white;
}
.ggeWidget .ggeButton--forward::after,
@@ -244,7 +244,7 @@
content: "";
mask: url("../assets/arrow-right.svg");
-webkit-mask-size: contain;
- @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-[1em] su-h-[1em];
+ @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-1em su-h-1em;
}
.ggeWidget .ggeButton--forward::after {
@@ -294,11 +294,11 @@
}
.ggeWidget .ggePrompt {
- @apply su-flex su-items-center su-mt-[1.1rem] su-mb-[2.6rem] last:su-mb-0;
+ @apply su-flex su-items-center su-mt-11 su-mb-26 last:su-mb-0;
}
.ggeWidget .ggePrompt .ggePrompt__radio {
- @apply su-relative su-mr-[1.2rem];
+ @apply su-relative su-mr-12;
}
.ggeWidget .ggePrompt label {
@@ -306,7 +306,7 @@
}
.ggeWidget .ggePrompt .ggePrompt__radio input {
- @apply su-flex su-w-[2.4rem] su-h-[2.4rem] su-ml-0 su-mb-0 su-rounded-full su-border-2 su-border-transparent su-cursor-pointer;
+ @apply su-flex su-w-24 su-h-24 su-ml-0 su-mb-0 su-rounded-full su-border-2 su-border-transparent su-cursor-pointer;
background: linear-gradient(222.67deg, #505eec 15.6%, #017e7c 84.05%)
border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
@@ -324,12 +324,12 @@
.ggeWidget .ggePrompt__other .ggePrompt input[type="text"],
.ggeWidget .ggePrompt__other .ggePrompt input[type="date"] {
- @apply su-ml-[24px];
+ @apply su-ml-24;
}
.ggeWidget .ggePrompt.ggePrompt--checked .ggePrompt__radio::after,
.ggeWidget .ggePrompt__other.ggePrompt--checked .ggePrompt:first-of-type .ggePrompt__radio::after {
- @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-[1.2rem] su-h-[1.2rem] su--translate-y-1/2 su--translate-x-1/2 su-rounded-full;
+ @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-12 su-h-12 su--translate-y-1/2 su--translate-x-1/2 su-rounded-full;
content: "";
background: linear-gradient(222.67deg, #505eec 15.6%, #017e7c 84.05%);
}
@@ -353,7 +353,7 @@
}
.form-gradient {
- @apply su-border-2 su-border-solid su-backdrop-opacity-30 su-bg-gradient-to-tl su-backdrop-blur-sm su-shadow-lg su-text-white;
+ @apply su-border-2 su-backdrop-opacity-30 su-bg-gradient-to-tl su-backdrop-blur-sm su-shadow-lg su-text-white;
background: linear-gradient(
140.61deg,
rgba(24, 29, 28, 0.64) 0%,
@@ -377,11 +377,11 @@
@apply su-flex su-items-baseline;
}
.ggeQuestion[data-name="DigitalName"] .ggeQuestion__label {
- @apply su-text-[2.6rem] su-p-0 su-mr-[.7rem];
+ @apply su-text-26 su-p-0 su-mr-7;
}
.ggeQuestion[data-name="DigitalName"] .ggeQuestion__field input {
- @apply su-text-[2.6rem] su-font-semibold;
+ @apply su-text-26 su-font-semibold;
}
.ggeWidget .ggeQuestion[data-name="DigitalName"] input[readonly] {
@@ -410,7 +410,7 @@
}
.ggeWidget .ggeQuestion.ggeQuestion--mobilepayment .ggeStripeButton .ggeMobilePay {
- @apply su-flex su-leading-none su-inline-block su-w-fit su-no-underline su-underline-offset-[3px] su-font-regular hocus:su-underline su-px-20 su-py-10 md:su-px-26 md:su-py-14 su-text-21 md:su-text-23 su-capitalize su-mt-4 md:su-mt-45 hocus:su-shadow-md su-border-solid su-border-2 su-pl-[3rem] su-transition-colors su-border-digital-red su-bg-digital-red su-text-white hocus:su-bg-cardinal-red hocus:su-text-white hocus:su-border-cardinal-red su-rounded-none;
+ @apply su-flex su-leading-none su-inline-block su-w-fit su-no-underline su-underline-offset-[3px] su-font-regular hocus:su-underline su-px-20 su-py-10 md:su-px-26 md:su-py-14 su-text-21 md:su-text-23 su-capitalize su-mt-4 md:su-mt-45 hocus:su-shadow-md su-border-2 su-pl-30 su-transition-colors su-border-digital-red su-bg-digital-red su-text-white hocus:su-bg-cardinal-red hocus:su-text-white hocus:su-border-cardinal-red su-rounded-none;
}
.ggeWidget .ggeQuestion.ggeQuestion--mobilepayment #ggeMobileManualEntryInner {
@@ -426,14 +426,14 @@
/* If not US */
.ggeAddress__zipcode + .ggeAddress__city {
- @apply su-float-left su-ml-[2rem];
+ @apply su-float-left su-ml-20;
width: calc(50% - 10px);
}
.ggeAddress__state,
.ggePayment--credit--account,
.ggePayment--credit--monthExpires {
- @apply su-clear-left su-mr-[2rem];
+ @apply su-clear-left su-mr-20;
}
/* Confirmation page */
@@ -451,7 +451,7 @@
}
.ggeConfirmation .ggeConfirmationMessage {
- @apply su-text-25 lg:su-text-[2.9rem];
+ @apply su-text-25 lg:su-text-29;
}
.ggeConfirmation .ggeConfirmationMessage > div:first-child {
@@ -463,15 +463,15 @@
}
.ggeConfirmation h1 {
- @apply su-text-[3rem] lg:su-text-[5.1rem] su-font-bold su-font-serif su-pt-[11.9rem] lg:su-pt-[12.5rem] su-mb-[3rem] lg:su-mb-[3.6rem];
+ @apply su-text-30 lg:su-text-[5.1rem] su-font-bold su-font-serif su-pt-[11.9rem] lg:su-pt-[12.5rem] su-mb-30 lg:su-mb-36;
}
.ggeConfirmation .ggeButton {
- @apply su-m-auto lg:su-text-[2.4rem] su-normal-case;
+ @apply su-m-auto lg:su-text-24 su-normal-case;
}
.ggeConfirmation .ggeTally--header {
- @apply su-text-white su-pt-0 su-px-0 su-pb-[3.2rem] lg:su-pb-[4.5rem] su-border-0 su-text-22 lg:su-text-[2.6rem];
+ @apply su-text-white su-pt-0 su-px-0 su-pb-32 lg:su-pb-45 su-border-0 su-text-22 lg:su-text-26;
}
.ggeConfirmation .ggeTallyTable thead + tbody {
@@ -517,7 +517,7 @@
}
.ggeWidget .ggePageNav--forward {
- @apply su-flex su-gap-x-[3rem] lg:su-gap-x-[7rem];
+ @apply su-flex su-gap-x-30 lg:su-gap-x-70;
}
.ggeWidget .ggeButton.ggeButton--discardRegistrant {
@@ -533,7 +533,7 @@
content: "Edit";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.6673 1.33265L12.1976 0.802316V0.802316L11.6673 1.33265ZM3.0625 12.1472L3.0625 12.8972C3.26141 12.8972 3.45218 12.8182 3.59283 12.6775L3.0625 12.1472ZM0.875 12.1472H0.125C0.125 12.5614 0.460786 12.8972 0.875 12.8972L0.875 12.1472ZM0.875 9.91526L0.34467 9.38493C0.204018 9.52558 0.125 9.71634 0.125 9.91526H0.875ZM9.98794 1.86298C10.3052 1.54567 10.8197 1.54567 11.137 1.86298L12.1976 0.802316C11.2946 -0.100772 9.83037 -0.100772 8.92728 0.802316L9.98794 1.86298ZM11.137 1.86298C11.4543 2.18028 11.4543 2.69472 11.137 3.01202L12.1976 4.07268C13.1007 3.1696 13.1007 1.7054 12.1976 0.802316L11.137 1.86298ZM11.137 3.01202L2.53217 11.6168L3.59283 12.6775L12.1976 4.07268L11.137 3.01202ZM3.0625 11.3972H0.875L0.875 12.8972H3.0625L3.0625 11.3972ZM8.92728 0.802316L0.34467 9.38493L1.40533 10.4456L9.98794 1.86298L8.92728 0.802316ZM0.125 9.91526L0.125 12.1472H1.625L1.625 9.91526H0.125ZM7.98978 2.80048L10.1995 5.01018L11.2601 3.94952L9.05044 1.73982L7.98978 2.80048Z' fill='%23505EEC'/%3E%3C/svg%3E");
background-position: left 15px center;
- @apply su-ml-[1rem] su-pl-[3.8rem] su-text-[1.8rem] su-text-white su-border-l su-border-l-black su-bg-no-repeat;
+ @apply su-ml-10 su-pl-38 su-text-18 su-text-white su-border-l su-border-l-black su-bg-no-repeat;
}
.ggeWidget .ggeTally__multireg__buttons {
@@ -546,7 +546,7 @@
.ggeWidget .ggeButton.ggeButton--tallyDeleteRegistrant {
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.64321 6.88535L13.5183 2.05397C13.9898 1.58677 13.9931 0.827025 13.5259 0.355458C13.0587 -0.116108 12.2989 -0.118291 11.8274 0.347817L6.93706 5.19447L2.04783 0.347817C1.57736 -0.118291 0.816521 -0.113925 0.34932 0.35655C-0.11788 0.827025 -0.114605 1.58677 0.356961 2.05397L5.23091 6.88535L0.35587 11.7167C-0.115697 12.1839 -0.118971 12.9437 0.348229 13.4152C0.582921 13.6521 0.89184 13.77 1.20076 13.77C1.5064 13.77 1.81205 13.6554 2.04565 13.4229L6.93706 8.57622L11.8263 13.4229C12.061 13.6554 12.3655 13.77 12.6712 13.77C12.9801 13.77 13.289 13.6521 13.5237 13.4152C13.9909 12.9437 13.9876 12.1839 13.5161 11.7167L8.64321 6.88535Z' fill='%23F83535'/%3E%3C/svg%3E");
- @apply su-h-full su-font-semibold su-text-18 su-mt-0 su-absolute su-top-1 su-left-1 su-items-center su-bottom-[-6.5rem] su-py-0 su-pr-0 su-pl-[1.6rem] su-text-transparent su-bg-transparent su-border-0 su-bg-no-repeat;
+ @apply su-h-full su-font-semibold su-text-18 su-mt-0 su-absolute su-top-1 su-left-1 su-items-center su--bottom-65 su-py-0 su-pr-0 su-pl-16 su-text-transparent su-bg-transparent su-border-0 su-bg-no-repeat;
background-position: left center;
}
@@ -578,7 +578,7 @@
}
.ggeWidget .ggeTally {
- @apply su-bg-transparent su-border-3 su-pt-[2.6rem] su-px-[2.6rem] su-pb-[4.5rem] su-mb-[7.2rem] su-gradient-border su-border-to-rt-palo-verde-dark-to-saa-electric-blue;
+ @apply su-bg-transparent su-border-3 su-pt-26 su-px-26 su-pb-45 su-mb-72 su-gradient-border su-border-to-rt-palo-verde-dark-to-saa-electric-blue;
}
.ggeWidget .ggeTally--text,
@@ -600,16 +600,16 @@
.ggeWidget.membership-installment .ggePage--payment tr:not(:first-of-type) .ggeTally--text,
.ggeWidget.membership-installment .ggePage--payment tr:not(:first-of-type) .ggeTally--money {
@apply su-border-0 su-type-0 su-font-regular su-pt-14 su-pb-0;
-}
+}
.ggeWidget .ggeTally--total,
.ggeWidget .ggeTally--total.ggeTally--money {
- @apply su-type-1 su-font-semibold su-pt-[3rem] su-pb-0;
+ @apply su-type-1 su-font-semibold su-pt-30 su-pb-0;
}
.ggeWidget td.ggeTally--text,
.ggeWidget .ggeTally--terms {
- @apply su-pt-[1.4rem];
+ @apply su-pt-14;
}
.ggeWidget.public-registration .ggeContent .ggeQuestion.su-phone,
@@ -627,7 +627,7 @@
}
.ggeWidget .ggeButton--addRegistrant {
- @apply su-bg-transparent su-text-white su-border-0 su-px-0 su-pr-0 su-pl-[2.7rem] su-big-paragraph su-bg-no-repeat;
+ @apply su-bg-transparent su-text-white su-border-0 su-px-0 su-pr-0 su-pl-27 su-big-paragraph su-bg-no-repeat;
background-position: left center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M10.5 7V10M10.5 10V13M10.5 10H13.5M10.5 10H7.5M19.5 10C19.5 14.9706 15.4706 19 10.5 19C5.52944 19 1.5 14.9706 1.5 10C1.5 5.02944 5.52944 1 10.5 1C15.4706 1 19.5 5.02944 19.5 10Z' stroke='%23F83535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@@ -653,11 +653,11 @@
/* GG Checkbox */
.ggeWidget .ggePrompt .ggePrompt__checkbox,
.ggeQuestion--acknowledgment.su-terms-and-conditions-check .ggeQuestion__field {
- @apply su-relative su-mr-[1.2rem];
+ @apply su-relative su-mr-12;
}
.ggeWidget .ggePrompt .ggePrompt__checkbox input {
- @apply su-flex su-w-[2.4rem] su-h-[2.4rem] su-ml-0 su-mb-0 su-rounded-l su-rounded-r su-border-2 su-border-transparent su-bg-saa-electric-blue-light su-cursor-pointer;
+ @apply su-flex su-w-24 su-h-24 su-ml-0 su-mb-0 su-rounded-l su-rounded-r su-border-2 su-border-transparent su-bg-saa-electric-blue-light su-cursor-pointer;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -674,7 +674,7 @@
}
.ggeWidget .ggePrompt.ggePrompt--checked .ggePrompt__checkbox::after {
- @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-[2rem] su-h-[2rem] su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
+ @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-20 su-h-20 su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
content: "";
background: linear-gradient(222.67deg, #505eec 15.6%, #017e7c 84.05%);
mask: url("../assets/check-mark.svg");
@@ -699,4 +699,4 @@
.ggeWidget:not([class*="membership-forms"]) div.ggeStripeContainer[role="alert"] .ggeStripeContainer__lowerHr {
@apply su-p-0;
-}
\ No newline at end of file
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index dca2afe27..257812f7b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,8 +1,7 @@
-@import 'decanter/fonts.css';
+@import 'decanter/fonts-basic.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
-@tailwind variants;
.su-spinner div:nth-child(1) {
animation-delay: -0.45s;
diff --git a/src/styles/light-forms.css b/src/styles/light-forms.css
index ab7f084b7..94bc3252a 100644
--- a/src/styles/light-forms.css
+++ b/src/styles/light-forms.css
@@ -30,7 +30,7 @@
content: "";
mask: url("../assets/arrow-right.svg");
-webkit-mask-size: contain;
- @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-[1.5rem] su-h-[1.5rem] su--rotate-45 su-bg-digital-red su-ml-4 su-relative su-top-2 su-transition su-transform-gpu;
+ @apply su-inline-block su-bg-cover su-flex-shrink-0 su-w-15 su-h-15 su--rotate-45 su-bg-digital-red su-ml-4 su-relative su-top-2 su-transition su-transform-gpu;
}
.ggeWidget[class*="membership-forms"] .ggeQuestion.ggeQuestion--error input[type="email"],
@@ -62,7 +62,7 @@
.ggeWidget[class*="membership-forms"] .ggeSection--askArray.ggeSection--registration,
.ggeWidget[class*="membership-forms"] .ggeTally {
- @apply su-border-2 su-pt-[2.6rem] su-px-[2.6rem] su-pb-[4.5rem] su-mb-[7.2rem] su-border-4 su-border-digital-blue su-bg-fog-light;
+ @apply su-border-2 su-pt-26 su-px-26 su-pb-45 su-mb-72 su-border-4 su-border-digital-blue su-bg-fog-light;
}
/* Membership form caption order, spacing, and styling */
@@ -198,7 +198,7 @@
}
.ggeWidget[class*="membership-forms"] .ggePayment--credit.ggePayment--credit--nameOnCard .ggeQuestion__field input {
- @apply su-mr-0 lg:su-w-[80%] 2xl:su-w-[calc(70%_-_2rem)];
+ @apply su-mr-0 lg:su-w-4/5 2xl:su-w-[calc(70%_-_2rem)];
margin-right: 2rem;
}
@@ -208,15 +208,15 @@
}
.ggeWidget[class*="membership-forms"] .ggePayment--credit.ggePayment--credit--account .ggeQuestion__field input {
- @apply su-w-full sm:su-w-[75%] md:su-w-full;
+ @apply su-w-full sm:su-w-3/4 md:su-w-full;
}
.ggeWidget[class*="membership-forms"] .ggePayment--credit.ggePayment--credit--verification {
- @apply su-w-full md:su-w-[25%] 2xl:su-w-[30%];
+ @apply su-w-full md:su-w-1/4 2xl:su-w-[30%];
}
.ggeWidget[class*="membership-forms"] .ggePayment--credit.ggePayment--credit--verification .ggeQuestion__field input {
- @apply su-w-full sm:su-w-[25%] md:su-w-full;
+ @apply su-w-full sm:su-w-1/4 md:su-w-full;
}
.ggeWidget[class*="membership-forms"] .ggePayment--credit.ggePayment--credit--monthExpires,
@@ -326,7 +326,7 @@
/* Membership Checkbox */
.ggeWidget[class*="membership-forms"] .ggePrompt .ggePrompt__checkbox input {
- @apply su-flex su-w-[2.4rem] su-h-[2.4rem] su-ml-0 su-mb-0 su-rounded-l su-rounded-r su-border-2 su-border-transparent su-bg-digital-blue su-cursor-pointer;
+ @apply su-flex su-w-24 su-h-24 su-ml-0 su-mb-0 su-rounded-l su-rounded-r su-border-2 su-border-transparent su-bg-digital-blue su-cursor-pointer;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -343,14 +343,14 @@
}
.ggeWidget[class*="membership-forms"] .ggePrompt.ggePrompt--checked .ggePrompt__checkbox::before {
- @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-[2rem] su-h-[2rem] su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
+ @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-20 su-h-20 su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
content: "";
background: #006CB8;
border-radius: 0;
}
.ggeWidget[class*="membership-forms"] .ggePrompt.ggePrompt--checked .ggePrompt__checkbox::after {
- @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-[2rem] su-h-[2rem] su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
+ @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-20 su-h-20 su--translate-y-1/2 su--translate-x-1/2 su-pointer-events-none;
content: "";
background: #ffffff;
mask: url("../assets/check-mark.svg");
@@ -371,7 +371,7 @@
/* Membership Radio Select */
.ggeWidget[class*="membership-forms"] .ggePrompt .ggePrompt__radio input {
- @apply su-flex su-w-[2.4rem] su-h-[2.4rem] su-ml-0 su-mb-0 su-rounded-full su-border-2 su-border-transparent su-cursor-pointer;
+ @apply su-flex su-w-24 su-h-24 su-ml-0 su-mb-0 su-rounded-full su-border-2 su-border-transparent su-cursor-pointer;
background: #006CB8 border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
@@ -380,7 +380,7 @@
.ggeWidget[class*="membership-forms"] .ggePrompt.ggePrompt--checked .ggePrompt__radio::after,
.ggeWidget[class*="membership-forms"] .ggePrompt__other.ggePrompt--checked .ggePrompt:first-of-type .ggePrompt__radio::after {
- @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-[1.2rem] su-h-[1.2rem] su--translate-y-1/2 su--translate-x-1/2 su-rounded-full;
+ @apply su-absolute su-top-1/2 su-left-1/2 su-flex su-w-12 su-h-12 su--translate-y-1/2 su--translate-x-1/2 su-rounded-full;
background: #006CB8;
content: "";
}
@@ -403,7 +403,7 @@
.ggeWidget[class*="membership-forms"] .ggeButton--back {
border-image-source: none;
background-image: none;
- @apply su-static su-pr-[3rem] su-translate-x-0 su-relative su-text-digital-red su-border-solid su-border-digital-red hocus:su-border-cardinal-red-xdark hocus:su-bg-transparent hocus:su-text-cardinal-red-xdark;
+ @apply su-static su-pr-30 su-translate-x-0 su-relative su-text-digital-red su-border-digital-red hocus:su-border-cardinal-red-xdark hocus:su-bg-transparent hocus:su-text-cardinal-red-xdark;
}
.ggeWidget[class*="membership-forms"] .ggeButton--back::before {
@@ -418,4 +418,4 @@
.ggeWidget[class*="membership-forms"] .ggeButton--forward:disabled,
.ggeWidget[class*="membership-forms"] .ggeButton--forward {
@apply su-bg-digital-red hocus:su-bg-cardinal-red-xdark;
-}
\ No newline at end of file
+}
diff --git a/src/styles/localist.css b/src/styles/localist.css
index b5f38ddbc..c6ac117c5 100644
--- a/src/styles/localist.css
+++ b/src/styles/localist.css
@@ -1,9 +1,9 @@
.event-list {
- @apply su-grid su-grid-cols-1 md:su-grid-cols-2 xl:su-grid-cols-3 su-justify-items-center su-items-stretch su-gap-y-xl md:su-gap-y-[5rem] xl:su-gap-y-[7rem] su-grid-gap su-p-0;
+ @apply su-grid su-grid-cols-1 md:su-grid-cols-2 xl:su-grid-cols-3 su-justify-items-center su-items-stretch su-gap-y-xl md:su-gap-y-50 xl:su-gap-y-70 su-grid-gap su-p-0;
}
.event {
- @apply su-flex su-flex-col su-relative su-overflow-hidden sm:su-max-w-[42rem] md:su-max-w-full su-text-black su-break-words su-w-full su-rs-pb-3 su-bg-white su-border su-border-solid su-bg-clip-padding su-shadow-sm focus-within:su-shadow-md hover:su-shadow-md su-backface-hidden su-border-black-30-opacity-40 su-mb-0;
+ @apply su-flex su-flex-col su-relative su-overflow-hidden sm:su-max-w-[42rem] md:su-max-w-full su-text-black su-break-words su-w-full su-rs-pb-3 su-bg-white su-border su-bg-clip-padding su-shadow-sm focus-within:su-shadow-md hover:su-shadow-md su-backface-hidden su-border-black-30/40 su-mb-0;
}
.event-card {
@@ -32,7 +32,7 @@
}
.event-short-date::after {
- @apply su-absolute su-z-0 su-flex su-w-fit su-bg-cardinal-red su-rounded-full su-w-[10rem] lg:su-w-[11.4rem] su-h-[10rem] lg:su-h-[11.4rem] su-left-[.6rem] su-top-[.6rem];
+ @apply su-absolute su-z-0 su-flex su-w-fit su-bg-cardinal-red su-rounded-full su-w-100 lg:su-w-[11.4rem] su-h-100 lg:su-h-[11.4rem] su-left-6 su-top-6;
content: '';
}
@@ -78,7 +78,7 @@
.start-time::before {
content: "";
background-image: url("../assets/calendar.svg");
- @apply su-inline-block su-bg-cover su-flex-shrink-0 su-mt-2 md:su-mt-3 su-mr-06em su-w-[1em] su-h-[1em];
+ @apply su-inline-block su-bg-cover su-shrink-0 su-mt-2 md:su-mt-3 su-mr-06em su-w-1em su-h-1em;
}
/* One col, no image events */
diff --git a/src/tailwind/plugins/theme/colors.js b/src/tailwind/plugins/theme/colors.js
index 6d744b056..375c524dd 100644
--- a/src/tailwind/plugins/theme/colors.js
+++ b/src/tailwind/plugins/theme/colors.js
@@ -3,17 +3,6 @@
*/
module.exports = function () {
return {
- black: {
- opacity: {
- 80: 'rgba(46, 45, 41, 80%)', // For trip card date block
- },
- 'true-opacity': {
- 20: 'rgba(0, 0, 0, 20%)', // For use in linear gradients
- },
- '30-opacity': {
- 40: 'rgba(192, 192, 191, 40%)', // For card borders
- },
- },
'masthead-black': {
top: 'rgba(13, 18, 17, 0.95)',
bottom: 'rgba(26, 31, 30, 0.85)',
@@ -21,20 +10,10 @@ module.exports = function () {
'saa-black': {
DEFAULT: '#181D1C',
dark: '#070B0A',
- opacity: {
- 0: 'rgba(24, 29, 28, 0)',
- 30: 'rgba(24, 29, 28, 0.3)',
- 80: 'rgba(24, 29, 28, 0.8)',
- },
},
'saa-grey': {
DEFAULT: '#E5E7EB',
},
- 'digital-red-xlight': '#F83535', // Passed contrast test for black background
- 'cardinal-red': {
- xdark: '#7A0000', // Passed contrast test with digital-red-xlight as text
- xxdark: '#541107', // Used for hover/focus color for xdark
- },
'saa-electric-blue': {
DEFAULT: '#505EEC',
light: '#6B77F5',
diff --git a/src/utilities/dataSource.js b/src/utilities/dataSource.js
index 844a6124b..34d59721d 100644
--- a/src/utilities/dataSource.js
+++ b/src/utilities/dataSource.js
@@ -50,7 +50,7 @@ export const buttonSizes = {
default:
'su-px-20 su-pt-10 su-pb-11 md:su-px-30 md:su-pt-16 md:su-pb-18 su-text-18 md:su-text-24',
large:
- 'su-px-20 su-pt-10 su-pb-11 md:su-px-36 md:su-pt-[22px] md:su-pb-[24px] su-text-18 md:su-text-24',
+ 'su-px-20 su-pt-10 su-pb-11 md:su-px-36 md:su-pt-22 md:su-pb-24 su-text-18 md:su-text-24',
link: 'su-text-19 md:su-text-21 xl:su-text-23',
};
@@ -134,10 +134,10 @@ export const fontWeights = {
};
export const heroGradient = {
- black: 'xs:su-to-saa-black su-from-transparent',
- brick: 'xs:su-to-brick su-from-brick/30',
- 'palo-alto-dark': 'xs:su-to-palo-alto-dark su-from-palo-alto-dark/30',
- white: 'xs:su-to-white su-from-white/30',
+ black: 'su-from-saa-black',
+ brick: 'su-from-brick su-to-brick/30',
+ 'palo-alto-dark': 'su-from-palo-alto-dark su-to-palo-alto-dark/30',
+ white: 'su-from-white su-to-white/30',
};
export const modularTypes = {
@@ -489,8 +489,8 @@ export const mediaAspectRatio = {
export const superheadStyles = {
'gradient-underline': {
light:
- 'su-text-black hocus:su-text-saa-electric-blue su-border-saa-electric-blue su-gradient-border su-border-to-r-palo-verde-dark-to-saa-electric-blue su-border-b-[4px] su-border-solid hocus:su-no-gradient-border',
- dark: 'su-text-white hocus:su-text-saa-electric-blue-light su-border-saa-electric-blue-light su-gradient-border su-border-to-r-palo-verde-dark-to-saa-electric-blue su-border-b-[4px] su-border-solid su-transition-colors hocus:su-no-gradient-border',
+ 'su-text-black hocus:su-text-saa-electric-blue su-border-saa-electric-blue su-gradient-border su-border-to-r-palo-verde-dark-to-saa-electric-blue su-border-b-4 hocus:su-no-gradient-border',
+ dark: 'su-text-white hocus:su-text-saa-electric-blue-light su-border-saa-electric-blue-light su-gradient-border su-border-to-r-palo-verde-dark-to-saa-electric-blue su-border-b-4 su-transition-colors hocus:su-no-gradient-border',
},
'red-back-link': {
light:
diff --git a/tailwind.config.js b/tailwind.config.js
index 4a09ea5e2..76c0ade68 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ const path = require('path');
const dir = path.resolve(__dirname, 'src/tailwind/plugins');
module.exports = {
+ // We preserve the su- prefix for this repo because we have Storyblok WYSIWYG with su- classes
prefix: 'su-',
presets: [require('decanter')],
content: ['./src/**/*.{js,jsx,md,mdx,ts,tsx}'],
@@ -21,11 +22,6 @@ module.exports = {
},
},
plugins: [
- function ({ addVariant }) {
- addVariant('children-hover', '& > *:hover');
- addVariant('children-hocus', '& > *:hover, & > *:focus');
- },
-
// @tailwind base;
require(`${dir}/base/base.js`)(),
{
/>
-