diff --git a/styles/base/colors.css b/styles/base/colors.css index 5c5c94b..d6599ee 100644 --- a/styles/base/colors.css +++ b/styles/base/colors.css @@ -1,6 +1,6 @@ /* Theme color definitions */ -@theme inline { +@theme static { --color-black: oklch(0% 0 0); --color-white: oklch(100% 0 0); @@ -9,6 +9,7 @@ --color-cwc-blue-01: oklch(47.31% 0.1141 242.9); --color-cwc-blue-02: oklch(28.99% 0.0614 237.9); + --color-cwc-orange-01: oklch(63.53% 0.1751 29.61); --color-primary: var(--color-cwc-blue-01); --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white); diff --git a/styles/base/typography.css b/styles/base/typography.css index f8d9a57..05cc531 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -39,33 +39,35 @@ * text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00 */ -@theme { - --font-sans: "Poppins", sans-serif; - --font-quincy: "quincy-cf", serif; - --line-height: 1.6; +@theme static { + --font-sans: "Poppins", sans-serif; + --font-quincy: "quincy-cf", serif; + --line-height: 1.6; - --text-base: 1rem; - --text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem); - --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem); - --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem); - --text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem); - --text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem); - --text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem); - --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem); - --text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem); - --text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem); - --text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem); - --text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem); - --text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem); - --text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem); - --text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem); + --text-base: 1rem; + --text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem); + --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem); + --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem); + --text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem); + --text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem); + --text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem); + --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem); + --text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem); + --text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem); + --text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem); + --text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem); + --text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem); + --text-55px: clamp(1.75rem, calc(1.3712rem + 1.4615vw), 3.4375rem); + --text-65px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 4.0625rem); + --text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem); + --text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem); - --h1: calc(var(--text-base) * 2.25); - --h2: calc(var(--text-base) * 1.75); - --h3: calc(var(--text-base) * 1.5); - --h4: calc(var(--text-base) * 1.25); - --h5: calc(var(--text-base) * 1.125); - --h6: calc(var(--text-base) * 1.05); + --h1: calc(var(--text-base) * 2.25); + --h2: calc(var(--text-base) * 1.75); + --h3: calc(var(--text-base) * 1.5); + --h4: calc(var(--text-base) * 1.25); + --h5: calc(var(--text-base) * 1.125); + --h6: calc(var(--text-base) * 1.05); } body {