CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
74b09eaf0973d7d33a2e626afc86c6bc5d521e9a
community-rule/app/tailwind.css
T
adilallo 74b09eaf09
CI Pipeline / test (20) (pull_request) Successful in 8m20s
Details
CI Pipeline / test (18) (pull_request) Successful in 8m41s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m26s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 4m36s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m39s
Details
CI Pipeline / performance (pull_request) Successful in 2m43s
Details
CI Pipeline / visual-regression (pull_request) Successful in 6m5s
Details
CI Pipeline / storybook (pull_request) Successful in 1m25s
Details
CI Pipeline / lint (pull_request) Successful in 1m25s
Details
CI Pipeline / build (pull_request) Successful in 1m48s
Details
Run prettier
2025-09-30 17:49:01 -06:00

1126 lines
42 KiB
CSS
Raw Blame History

@import "tailwindcss";
/* Make sure Tailwind scans stories and .storybook files */
@source "../stories/**/*";
@source "../app/**/*";
@source "../.storybook/**/*";
@source "./**/*";
/* Hide scrollbar utility */
.scrollbar-hide {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
@theme inline {
/* Custom breakpoints */
--breakpoint-xsm: 429px;
--breakpoint-sm: 430px;
--breakpoint-sm2: 440px;
--breakpoint-smd: 530px;
--breakpoint-md: 640px;
--breakpoint-xmd: 768px;
--breakpoint-lg: 1024px;
--breakpoint-lg2: 1150px;
--breakpoint-xl: 1440px;
/* Reset Tailwind color defaults to avoid collisions */
--color-*: initial;
/* Font families */
--font-sans:
var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display:
var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono:
var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
Consolas, "Liberation Mono", Menlo, monospace;
/* Dimension */
--spacing-scale-000: 0px;
--spacing-scale-001: 1px;
--spacing-scale-002: 2px;
--spacing-scale-003: 3px;
--spacing-scale-004: 4px;
--spacing-scale-005: 5px;
--spacing-scale-006: 6px;
--spacing-scale-008: 8px;
--spacing-scale-010: 10px;
--spacing-scale-012: 12px;
--spacing-scale-016: 16px;
--spacing-scale-020: 20px;
--spacing-scale-024: 24px;
--spacing-scale-032: 32px;
--spacing-scale-040: 40px;
--spacing-scale-048: 48px;
--spacing-scale-056: 56px;
--spacing-scale-060: 60px;
--spacing-scale-064: 64px;
--spacing-scale-076: 76px;
--spacing-scale-096: 96px;
--spacing-scale-120: 120px;
--spacing-scale-160: 160px;
--spacing-scale-260: 260px;
--spacing-scale-290: 290px;
--spacing-measures-sizing-008: var(--spacing-scale-008);
--spacing-measures-sizing-010: var(--spacing-scale-010);
--spacing-measures-sizing-012: var(--spacing-scale-012);
--spacing-measures-sizing-016: var(--spacing-scale-016);
--spacing-measures-sizing-020: var(--spacing-scale-020);
--spacing-measures-sizing-024: var(--spacing-scale-024);
--spacing-measures-sizing-032: var(--spacing-scale-032);
--spacing-measures-sizing-040: var(--spacing-scale-040);
--spacing-measures-sizing-048: var(--spacing-scale-048);
--spacing-measures-sizing-056: var(--spacing-scale-056);
--spacing-measures-sizing-060: var(--spacing-scale-060);
--spacing-measures-sizing-064: var(--spacing-scale-064);
--spacing-measures-sizing-076: var(--spacing-scale-076);
--spacing-measures-sizing-096: var(--spacing-scale-096);
--spacing-measures-sizing-120: var(--spacing-scale-120);
/* Spacing aliases */
--spacing-measures-spacing-000: var(--spacing-scale-000);
--spacing-measures-spacing-001: var(--spacing-scale-001);
--spacing-measures-spacing-002: var(--spacing-scale-002);
--spacing-measures-spacing-004: var(--spacing-scale-004);
--spacing-measures-spacing-006: var(--spacing-scale-006);
--spacing-measures-spacing-008: var(--spacing-scale-008);
--spacing-measures-spacing-010: var(--spacing-scale-010);
--spacing-measures-spacing-012: var(--spacing-scale-012);
--spacing-measures-spacing-016: var(--spacing-scale-016);
--spacing-measures-spacing-020: var(--spacing-scale-020);
--spacing-measures-spacing-024: var(--spacing-scale-024);
--spacing-measures-spacing-032: var(--spacing-scale-032);
--spacing-measures-spacing-040: var(--spacing-scale-040);
--spacing-measures-spacing-048: var(--spacing-scale-048);
--spacing-measures-spacing-056: var(--spacing-scale-056);
--spacing-measures-spacing-060: var(--spacing-scale-060);
--spacing-measures-spacing-064: var(--spacing-scale-064);
--spacing-measures-spacing-076: var(--spacing-scale-076);
--spacing-measures-spacing-096: var(--spacing-scale-096);
--spacing-measures-spacing-120: var(--spacing-scale-120);
--spacing-measures-spacing-160: var(--spacing-scale-160);
--spacing-measures-spacing-260: var(--spacing-scale-260);
/* Border radius */
--radius-measures-radius-none: var(--spacing-scale-000);
--radius-measures-radius-xsmall: var(--spacing-scale-006);
--radius-measures-radius-small: var(--spacing-scale-012);
--radius-measures-radius-medium: var(--spacing-scale-016);
--radius-measures-radius-large: var(--spacing-scale-024);
--radius-measures-radius-xlarge: var(--spacing-scale-032);
--radius-measures-radius-full: 9999px;
/* Border widths */
--border-measures-stroke-small: var(--spacing-scale-001);
--border-measures-stroke-medium: var(--spacing-scale-002);
--border-measures-stroke-large: var(--spacing-scale-003);
/* Compatibility aliases */
--measures-radius-none: var(--radius-measures-radius-none);
--measures-radius-xsmall: var(--radius-measures-radius-xsmall);
--measures-radius-small: var(--radius-measures-radius-small);
--measures-radius-medium: var(--radius-measures-radius-medium);
--measures-radius-large: var(--radius-measures-radius-large);
--measures-radius-xlarge: var(--radius-measures-radius-xlarge);
--measures-radius-full: var(--radius-measures-radius-full);
--measures-stroke-small: var(--border-measures-stroke-small);
--measures-stroke-medium: var(--border-measures-stroke-medium);
--measures-stroke-large: var(--border-measures-stroke-large);
--measures-sizing-008: var(--spacing-measures-sizing-008);
--measures-sizing-010: var(--spacing-measures-sizing-010);
--measures-sizing-012: var(--spacing-measures-sizing-012);
--measures-sizing-016: var(--spacing-measures-sizing-016);
--measures-sizing-020: var(--spacing-measures-sizing-020);
--measures-sizing-024: var(--spacing-measures-sizing-024);
--measures-sizing-032: var(--spacing-measures-sizing-032);
--measures-sizing-040: var(--spacing-measures-sizing-040);
--measures-sizing-048: var(--spacing-measures-sizing-048);
--measures-sizing-056: var(--spacing-measures-sizing-056);
--measures-sizing-060: var(--spacing-measures-sizing-060);
--measures-sizing-064: var(--spacing-measures-sizing-064);
--measures-sizing-076: var(--spacing-measures-sizing-076);
--measures-sizing-096: var(--spacing-measures-sizing-096);
--measures-sizing-120: var(--spacing-measures-sizing-120);
--measures-spacing-000: var(--spacing-measures-spacing-000);
--measures-spacing-001: var(--spacing-measures-spacing-001);
--measures-spacing-002: var(--spacing-measures-spacing-002);
--measures-spacing-004: var(--spacing-measures-spacing-004);
--measures-spacing-006: var(--spacing-measures-spacing-006);
--measures-spacing-008: var(--spacing-measures-spacing-008);
--measures-spacing-010: var(--spacing-measures-spacing-010);
--measures-spacing-012: var(--spacing-measures-spacing-012);
--measures-spacing-016: var(--spacing-measures-spacing-016);
--measures-spacing-020: var(--spacing-measures-spacing-020);
--measures-spacing-024: var(--spacing-measures-spacing-024);
--measures-spacing-032: var(--spacing-measures-spacing-032);
--measures-spacing-040: var(--spacing-measures-spacing-040);
--measures-spacing-048: var(--spacing-measures-spacing-048);
--measures-spacing-056: var(--spacing-measures-spacing-056);
--measures-spacing-060: var(--spacing-measures-spacing-060);
--measures-spacing-064: var(--spacing-measures-spacing-064);
--measures-spacing-076: var(--spacing-measures-spacing-076);
--measures-spacing-096: var(--spacing-measures-spacing-096);
--measures-spacing-120: var(--spacing-measures-spacing-120);
--measures-spacing-160: var(--spacing-measures-spacing-160);
--measures-spacing-260: var(--spacing-measures-spacing-260);
/* Grays & alpha */
--color-gray-000: #ffffff;
--color-gray-050: #f6f6f6;
--color-gray-100: #e5e5e5;
--color-gray-200: #d2d2d2;
--color-gray-300: #b4b4b4;
--color-gray-400: #8f8f8f;
--color-gray-500: #666666;
--color-gray-600: #464646;
--color-gray-700: #2d2d2d;
--color-gray-800: #1f1f1f;
--color-gray-900: #141414;
--color-gray-1000: #000000;
--color-opacity-000: #00000000;
--color-opacity-001: #00000003;
--color-opacity-050: #0000000d;
--color-opacity-100: #0000001a;
--color-opacity-200: #00000033;
--color-opacity-300: #0000004d;
--color-opacity-400: #00000066;
--color-opacity-500: #00000080;
--color-opacity-600: #00000099;
--color-opacity-700: #000000b2;
--color-opacity-800: #000000cc;
--color-opacity-900: #000000e5;
/* Kiwi */
--color-kiwi-kiwi0: #ebfff2;
--color-kiwi-kiwi50: #c9fedf;
--color-kiwi-kiwi100: #a8fdcd;
--color-kiwi-kiwi150: #8cf9bd;
--color-kiwi-kiwi200: #6ff6ae;
--color-kiwi-kiwi300: #45ea97;
--color-kiwi-kiwi400: #29d984;
--color-kiwi-kiwi500: #16c472;
--color-kiwi-kiwi600: #0ba960;
--color-kiwi-kiwi700: #058c4e;
--color-kiwi-kiwi800: #016c3c;
--color-kiwi-kiwi900: #004d2b;
--color-kiwi-kiwi1000: #00331c;
/* Lavender */
--color-lavender-lavender0: #f0ebff;
--color-lavender-lavender50: #e8defe;
--color-lavender-lavender100: #e0d1fd;
--color-lavender-lavender150: #d7c3f9;
--color-lavender-lavender200: #ceb5f6;
--color-lavender-lavender300: #bb97ea;
--color-lavender-lavender400: #a578d9;
--color-lavender-lavender500: #8d5ac4;
--color-lavender-lavender600: #743ea9;
--color-lavender-lavender700: #5a278c;
--color-lavender-lavender800: #41146c;
--color-lavender-lavender900: #2b074d;
--color-lavender-lavender1000: #1a0033;
/* Lime */
--color-lime-lime0: #fbffeb;
--color-lime-lime50: #f2fec9;
--color-lime-lime100: #e7fda8;
--color-lime-lime150: #daf98c;
--color-lime-lime200: #ccf66f;
--color-lime-lime300: #b1ea45;
--color-lime-lime400: #98d929;
--color-lime-lime500: #80c416;
--color-lime-lime600: #6aa90b;
--color-lime-lime700: #548c05;
--color-lime-lime800: #406c01;
--color-lime-lime900: #2d4d00;
--color-lime-lime1000: #1e3300;
/* Magenta */
--color-magenta-magenta0: #ffebf0;
--color-magenta-magenta50: #fedee7;
--color-magenta-magenta100: #fdd1dd;
--color-magenta-magenta150: #f9c3d2;
--color-magenta-magenta200: #f6b5c7;
--color-magenta-magenta300: #ea97ad;
--color-magenta-magenta400: #d97892;
--color-magenta-magenta500: #c45a76;
--color-magenta-magenta600: #a93e5b;
--color-magenta-magenta700: #8c2742;
--color-magenta-magenta800: #6c142b;
--color-magenta-magenta900: #4d071a;
--color-magenta-magenta1000: #33000e;
/* Red */
--color-red-red0: #ffebf1;
--color-red-red50: #fec9d6;
--color-red-red100: #fda8b7;
--color-red-red150: #f98c98;
--color-red-red200: #f66f78;
--color-red-red300: #ea4845;
--color-red-red400: #d93529;
--color-red-red500: #c42916;
--color-red-red600: #a9200b;
--color-red-red700: #8c1905;
--color-red-red800: #6c1301;
--color-red-red900: #4d0d00;
--color-red-red1000: #330800;
/* Royal Blue */
--color-royal-blue-royal-blue0: #ebecff;
--color-royal-blue-royal-blue50: #c9cdfe;
--color-royal-blue-royal-blue100: #a8adfd;
--color-royal-blue-royal-blue150: #8c91f9;
--color-royal-blue-royal-blue200: #6f74f6;
--color-royal-blue-royal-blue300: #4548ea;
--color-royal-blue-royal-blue400: #2b29d9;
--color-royal-blue-royal-blue500: #1c16c4;
--color-royal-blue-royal-blue600: #140ba9;
--color-royal-blue-royal-blue700: #0f058c;
--color-royal-blue-royal-blue800: #0c016c;
--color-royal-blue-royal-blue900: #0a004d;
--color-royal-blue-royal-blue1000: #080033;
/* Rust */
--color-rust-rust0: #ffedeb;
--color-rust-rust50: #fed8d4;
--color-rust-rust100: #fdc4bd;
--color-rust-rust150: #f9b0a6;
--color-rust-rust200: #f69c8f;
--color-rust-rust300: #ea7a65;
--color-rust-rust400: #d96043;
--color-rust-rust500: #c44e29;
--color-rust-rust600: #a94417;
--color-rust-rust700: #8c3d0b;
--color-rust-rust800: #6c3604;
--color-rust-rust900: #4d2c01;
--color-rust-rust1000: #332100;
/* Teal */
--color-teal-teal0: #ebfffc;
--color-teal-teal50: #c9fef9;
--color-teal-teal100: #a8fdf8;
--color-teal-teal150: #8cf9f8;
--color-teal-teal200: #6ff2f6;
--color-teal-teal300: #45dcea;
--color-teal-teal400: #29c3d9;
--color-teal-teal500: #16a9c4;
--color-teal-teal600: #0b8ea9;
--color-teal-teal700: #05728c;
--color-teal-teal800: #01576c;
--color-teal-teal900: #003e4d;
--color-teal-teal1000: #002933;
/* Yellow */
--color-yellow-yellow0: #fffeeb;
--color-yellow-yellow50: #fefcc9;
--color-yellow-yellow100: #fdfaa8;
--color-yellow-yellow150: #f9f58c;
--color-yellow-yellow200: #f6f06f;
--color-yellow-yellow300: #eae345;
--color-yellow-yellow400: #d9d129;
--color-yellow-yellow500: #c4bb16;
--color-yellow-yellow600: #a9a20b;
--color-yellow-yellow700: #8c8505;
--color-yellow-yellow800: #6c6701;
--color-yellow-yellow900: #4d4a00;
--color-yellow-yellow1000: #333000;
/* Border */
--color-border-default-brand-accent: var(--color-yellow-yellow300);
--color-border-default-brand-primary: var(--color-yellow-yellow100);
--color-border-default-brand-secondary: var(--color-rust-rust100);
--color-border-default-primary: var(--color-gray-900);
--color-border-default-secondary: var(--color-gray-800);
--color-border-default-tertiary: var(--color-gray-600);
--color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
--color-border-default-utility-negative: var(--color-red-red300);
--color-border-default-utility-positive: var(--color-kiwi-kiwi300);
--color-border-default-utility-warning: var(--color-yellow-yellow300);
--color-border-inverse-brand-accent: var(--color-yellow-yellow50);
--color-border-inverse-brand-primary: var(--color-yellow-yellow800);
--color-border-inverse-brand-secondary: var(--color-rust-rust800);
--color-border-inverse-primary: var(--color-gray-000);
--color-border-inverse-secondary: var(--color-opacity-200);
--color-border-inverse-tertiary: var(--color-opacity-300);
--color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300);
--color-border-inverse-utility-negative: var(--color-red-red300);
--color-border-inverse-utility-positive: var(--color-kiwi-kiwi400);
--color-border-inverse-utility-warning: var(--color-yellow-yellow400);
/* Content */
--color-content-brand-darker-accent-2: var(--color-yellow-yellow200);
--color-content-brand-kiwi: var(--color-kiwi-kiwi600);
--color-content-brand-lavender: var(--color-lavender-lavender500);
--color-content-brand-lighter-accent-2: var(--color-yellow-yellow100);
--color-content-brand-lime: var(--color-lime-lime500);
--color-content-brand-primary: var(--color-yellow-yellow50);
--color-content-brand-red: var(--color-red-red400);
--color-content-brand-royal: var(--color-royal-blue-royal-blue400);
--color-content-brand-rust: var(--color-rust-rust400);
--color-content-brand-teal: var(--color-teal-teal500);
--color-content-default-brand-accent: var(--color-opacity-700);
--color-content-default-brand-primary: var(--color-yellow-yellow50);
--color-content-default-brand-secondary: var(--color-rust-rust400);
--color-content-default-primary: var(--color-gray-000);
--color-content-default-secondary: var(--color-gray-200);
--color-content-default-tertiary: var(--color-gray-300);
--color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
--color-content-default-utility-negative: var(--color-red-red400);
--color-content-default-utility-positive: var(--color-lime-lime400);
--color-content-default-utility-warning: var(--color-yellow-yellow500);
--color-content-inverse-brand-accent: var(--color-yellow-yellow700);
--color-content-inverse-brand-primary: var(--color-yellow-yellow900);
--color-content-inverse-brand-secondary: var(--color-rust-rust800);
--color-content-inverse-brand-royal: var(--color-royal-blue-royal-blue1000);
--color-content-inverse-primary: var(--color-gray-1000);
--color-content-inverse-secondary: var(--color-gray-800);
--color-content-inverse-tertiary: var(--color-gray-700);
--color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300);
--color-content-inverse-utility-negative: var(--color-red-red300);
--color-content-inverse-utility-positive: var(--color-kiwi-kiwi300);
--color-content-inverse-utility-warning: var(--color-yellow-yellow300);
/* Surface */
--color-surface-default-brand-red: var(--color-red-red100);
--color-surface-default-brand-darker-accent: var(--color-yellow-yellow200);
--color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200);
--color-surface-default-brand-lavender: var(--color-lavender-lavender200);
--color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
--color-surface-default-brand-lime: var(--color-lime-lime100);
--color-surface-default-brand-primary: var(--color-yellow-yellow100);
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
--color-surface-default-brand-rust: var(--color-rust-rust100);
--color-surface-default-brand-teal: var(--color-teal-teal50);
--color-surface-default-primary: var(--color-gray-1000);
--color-surface-default-secondary: var(--color-gray-900);
--color-surface-default-semi-opaque: var(--color-opacity-050);
--color-surface-default-tertiary: var(--color-gray-800);
--color-surface-default-transparent: var(--color-opacity-000);
--color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
--color-surface-default-utility-negative: var(--color-red-red400);
--color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
--color-surface-default-utility-warning: var(--color-yellow-yellow500);
--color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
--color-surface-inverse-brand-primary: var(--color-yellow-yellow50);
--color-surface-inverse-brand-secondary: var(--color-rust-rust300);
--color-surface-inverse-primary: var(--color-gray-000);
--color-surface-inverse-secondary: var(--color-gray-100);
--color-surface-inverse-tertiary: var(--color-gray-200);
--color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300);
--color-surface-inverse-utility-negative: var(--color-red-red300);
--color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300);
--color-surface-inverse-utility-warning: var(--color-yellow-yellow300);
/* Color */
--color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73);
/* white */
--bg-color-light-primary: oklch(100% 0 263.28);
/* Shadow */
--shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71);
--shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
--shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
--shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28);
/* Use this shadow most of the time */
--shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
--shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);
/* Typography */
--text-xx-large-display: 96px;
--text-xx-large-display--line-height: 110%;
--text-xx-large-display--letter-spacing: 0px;
--text-xx-large-display--font-weight: 400;
--text-xx-large-heading: 40px;
--text-xx-large-heading--line-height: 52px;
--text-xx-large-heading--letter-spacing: 0px;
--text-xx-large-heading--font-weight: 700;
--text-x-large-heading: 36px;
--text-x-large-heading--line-height: 44px;
--text-x-large-heading--letter-spacing: 0px;
--text-x-large-heading--font-weight: 800;
--text-large-heading: 32px;
--text-large-heading--line-height: 40px;
--text-large-heading--letter-spacing: 0px;
--text-large-heading--font-weight: 700;
--text-medium-heading: 28px;
--text-medium-heading--line-height: 36px;
--text-medium-heading--letter-spacing: 0px;
--text-medium-heading--font-weight: 700;
--text-small-heading: 24px;
--text-small-heading--line-height: 32px;
--text-small-heading--letter-spacing: 0px;
--text-small-heading--font-weight: 700;
--text-x-small-heading: 20px;
--text-x-small-heading--line-height: 28px;
--text-x-small-heading--letter-spacing: 0px;
--text-x-small-heading--font-weight: 700;
--text-large-label: 18px;
--text-large-label--line-height: 24px;
--text-large-label--letter-spacing: 0px;
--text-large-label--font-weight: 500;
--text-medium-label: 16px;
--text-medium-label--line-height: 20px;
--text-medium-label--letter-spacing: 0px;
--text-medium-label--font-weight: 500;
--text-small-label: 14px;
--text-small-label--line-height: 16px;
--text-small-label--letter-spacing: 0px;
--text-small-label--font-weight: 500;
/* Regular 400 */
--text-large-paragraph: 18px;
--text-large-paragraph--line-height: 130%;
--text-large-paragraph--letter-spacing: 0px;
--text-large-paragraph--font-weight: 400;
--text-medium-paragraph: 16px;
--text-medium-paragraph--line-height: 24px;
--text-medium-paragraph--letter-spacing: 0px;
--text-medium-paragraph--font-weight: 400;
--text-small-paragraph: 14px;
--text-small-paragraph--line-height: 20px;
--text-small-paragraph--letter-spacing: 0px;
--text-small-paragraph--font-weight: 400;
--text-x-small-paragraph: 12px;
--text-x-small-paragraph--line-height: 16px;
--text-x-small-paragraph--letter-spacing: 0px;
--text-x-small-paragraph--font-weight: 400;
--text-xx-small-label: 10px;
--text-xx-small-label--line-height: 12px;
--text-xx-small-label--letter-spacing: 0px;
--text-xx-small-label--font-weight: 500;
--text-xx-small-paragraph: 10px;
--text-xx-small-paragraph--line-height: 14px;
--text-xx-small-paragraph--letter-spacing: 0px;
--text-xx-small-paragraph--font-weight: 400;
--text-xx-small-italic: 10px;
--text-xx-small-italic--line-height: 14px;
--text-xx-small-italic--letter-spacing: 0px;
--text-xx-small-italic--font-weight: 400;
--text-x-large-label: 24px;
--text-x-large-label--line-height: 28px;
--text-x-large-label--letter-spacing: 0px;
--text-x-large-label--font-weight: 400;
--text-x-large-paragraph: 24px;
--text-x-large-paragraph--line-height: 32px;
--text-x-large-paragraph--letter-spacing: 0px;
--text-x-large-paragraph--font-weight: 400;
--text-xx-large-paragraph: 32px;
--text-xx-large-paragraph--line-height: 40px;
--text-xx-large-paragraph--letter-spacing: 0px;
--text-xx-large-paragraph--font-weight: 400;
--text-xx-large-label: 32px;
--text-xx-large-label--line-height: 36px;
--text-xx-large-label--letter-spacing: 0px;
--text-xx-large-label--font-weight: 400;
--text-x-small-underline: 12px;
--text-x-small-underline--line-height: 14px;
--text-x-small-underline--letter-spacing: 0px;
--text-x-small-underline--font-weight: 400;
--text-small-underline: 14px;
--text-small-underline--line-height: 16px;
--text-small-underline--letter-spacing: 0px;
--text-small-underline--font-weight: 400;
--text-medium-underline: 16px;
--text-medium-underline--line-height: 20px;
--text-medium-underline--letter-spacing: 0px;
--text-medium-underline--font-weight: 400;
--text-large-underline: 18px;
--text-large-underline--line-height: 24px;
--text-large-underline--letter-spacing: 0px;
--text-large-underline--font-weight: 400;
--text-x-large-underline: 24px;
--text-x-large-underline--line-height: 28px;
--text-x-large-underline--letter-spacing: 0px;
--text-x-large-underline--font-weight: 400;
--text-x-small-label: 12px;
--text-x-small-label--line-height: 14px;
--text-x-small-label--letter-spacing: 0px;
--text-x-small-label--font-weight: 500;
--text-x-small-label-caps: 10px;
--text-x-small-label-caps--line-height: 12px;
--text-x-small-label-caps--letter-spacing: 0px;
--text-x-small-label-caps--font-weight: 500;
--text-xx-small-heading: 16px;
--text-xx-small-heading--line-height: 22px;
--text-xx-small-heading--letter-spacing: 0px;
--text-xx-small-heading--font-weight: 700;
--text-x-small-display: 24px;
--text-x-small-display--line-height: 24px;
--text-x-small-display--letter-spacing: 0px;
--text-x-small-display--font-weight: 400;
--text-x-large-uppercase: 24px;
--text-x-large-uppercase--line-height: 120%;
--text-x-large-uppercase--letter-spacing: 0.48px;
--text-x-large-uppercase--font-weight: 400;
--text-xx-large-uppercase: 32px;
--text-xx-large-uppercase--line-height: 120%;
--text-xx-large-uppercase--letter-spacing: 0.64px;
--text-xx-large-uppercase--font-weight: 400;
--text-x-large-display: 64px;
--text-x-large-display--line-height: 110%;
--text-x-large-display--letter-spacing: 0px;
--text-x-large-display--font-weight: 400;
--text-large-display: 52px;
--text-large-display--line-height: 110%;
--text-large-display--letter-spacing: 0px;
--text-large-display--font-weight: 400;
--text-medium-display: 44px;
--text-medium-display--line-height: 110%;
--text-medium-display--letter-spacing: 0px;
--text-medium-display--font-weight: 400;
--text-xx-small-display: 18px;
--text-xx-small-display--line-height: 120%;
--text-xx-small-display--letter-spacing: 0px;
--text-xx-small-display--font-weight: 400;
--text-x-small-uppercase: 12px;
--text-x-small-uppercase--line-height: 120%;
--text-x-small-uppercase--letter-spacing: 0.24px;
--text-x-small-uppercase--font-weight: 400;
--text-large-uppercase: 18px;
--text-large-uppercase--line-height: 120%;
--text-large-uppercase--letter-spacing: 0.36px;
--text-large-uppercase--font-weight: 400;
--text-small-display: 36px;
--text-small-display--line-height: 110%;
--text-small-display--letter-spacing: 0px;
--text-small-display--font-weight: 400;
}
@layer utilities {
.text-x-small-heading {
font-size: var(--text-x-small-heading);
line-height: var(--text-x-small-heading--line-height);
font-weight: var(--text-x-small-heading--font-weight);
letter-spacing: var(--text-x-small-heading--letter-spacing);
}
.text-x-small-paragraph {
font-size: var(--text-x-small-paragraph);
line-height: var(--text-x-small-paragraph--line-height);
font-weight: var(--text-x-small-paragraph--font-weight);
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
}
}
@layer components {
.xx-large-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-xx-large-display);
font-weight: var(--text-xx-large-display--font-weight);
line-height: var(--text-xx-large-display--line-height);
letter-spacing: var(--text-xx-large-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-large-heading {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-xx-large-heading);
font-weight: var(--text-xx-large-heading--font-weight);
line-height: var(--text-xx-large-heading--line-height);
letter-spacing: var(--text-xx-large-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-heading {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-x-large-heading);
font-weight: var(--text-x-large-heading--font-weight);
line-height: var(--text-x-large-heading--line-height);
letter-spacing: var(--text-x-large-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.large-heading {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-large-heading);
font-weight: var(--text-large-heading--font-weight);
line-height: var(--text-large-heading--line-height);
letter-spacing: var(--text-large-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.medium-heading {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-medium-heading);
font-weight: var(--text-medium-heading--font-weight);
line-height: var(--text-medium-heading--line-height);
letter-spacing: var(--text-medium-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.small-heading {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-small-heading);
font-weight: var(--text-small-heading--font-weight);
line-height: var(--text-small-heading--line-height);
letter-spacing: var(--text-small-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-heading {
font-family: var(--font-space-grotesk);
font-size: var(--text-x-small-heading);
font-weight: var(--text-x-small-heading--font-weight);
line-height: var(--text-x-small-heading--line-height);
letter-spacing: var(--text-x-small-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.large-label {
font-family: var(--font-inter);
font-size: var(--text-large-label);
font-weight: var(--text-large-label--font-weight);
line-height: var(--text-large-label--line-height);
letter-spacing: var(--text-large-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.medium-label {
font-family: var(--font-inter);
font-size: var(--text-medium-label);
font-weight: var(--text-medium-label--font-weight);
line-height: var(--text-medium-label--line-height);
letter-spacing: var(--text-medium-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.small-label {
font-family: var(--font-inter);
font-size: var(--text-small-label);
font-weight: var(--text-small-label--font-weight);
line-height: var(--text-small-label--line-height);
letter-spacing: var(--text-small-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
/* Regular 400 */
.large-paragraph {
font-family: var(--font-inter);
font-size: var(--text-large-paragraph);
font-weight: var(--text-large-paragraph--font-weight);
line-height: var(--text-large-paragraph--line-height);
letter-spacing: var(--text-large-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.medium-paragraph {
font-family: var(--font-inter);
font-size: var(--text-medium-paragraph);
font-weight: var(--text-medium-paragraph--font-weight);
line-height: var(--text-medium-paragraph--line-height);
letter-spacing: var(--text-medium-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.small-paragraph {
font-family: var(--font-inter);
font-size: var(--text-small-paragraph);
font-weight: var(--text-small-paragraph--font-weight);
line-height: var(--text-small-paragraph--line-height);
letter-spacing: var(--text-small-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-paragraph {
font-family: var(--font-inter);
font-size: var(--text-x-small-paragraph);
font-weight: var(--text-x-small-paragraph--font-weight);
line-height: var(--text-x-small-paragraph--line-height);
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-small-label {
font-family: var(--font-inter);
font-size: var(--text-xx-small-label);
font-weight: var(--text-xx-small-label--font-weight);
line-height: var(--text-xx-small-label--line-height);
letter-spacing: var(--text-xx-small-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-small-paragraph {
font-family: var(--font-inter);
font-size: var(--text-xx-small-paragraph);
font-weight: var(--text-xx-small-paragraph--font-weight);
line-height: var(--text-xx-small-paragraph--line-height);
letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-small-italic {
font-family: var(--font-inter);
font-size: var(--text-xx-small-italic);
font-weight: var(--text-xx-small-italic--font-weight);
line-height: var(--text-xx-small-italic--line-height);
letter-spacing: var(--text-xx-small-italic--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-label {
font-family: var(--font-inter);
font-size: var(--text-x-large-label);
font-weight: var(--text-x-large-label--font-weight);
line-height: var(--text-x-large-label--line-height);
letter-spacing: var(--text-x-large-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-paragraph {
font-family: var(--font-inter);
font-size: var(--text-x-large-paragraph);
font-weight: var(--text-x-large-paragraph--font-weight);
line-height: var(--text-x-large-paragraph--line-height);
letter-spacing: var(--text-x-large-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-large-paragraph {
font-family: var(--font-inter);
font-size: var(--text-xx-large-paragraph);
font-weight: var(--text-xx-large-paragraph--font-weight);
line-height: var(--text-xx-large-paragraph--line-height);
letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-large-label {
font-family: var(--font-inter);
font-size: var(--text-xx-large-label);
font-weight: var(--text-xx-large-label--font-weight);
line-height: var(--text-xx-large-label--line-height);
letter-spacing: var(--text-xx-large-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-underline {
font-family: var(--font-inter);
font-size: var(--text-x-small-underline);
font-weight: var(--text-x-small-underline--font-weight);
line-height: var(--text-x-small-underline--line-height);
letter-spacing: var(--text-x-small-underline--letter-spacing);
text-decoration: underline;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.small-underline {
font-family: var(--font-inter);
font-size: var(--text-small-underline);
font-weight: var(--text-small-underline--font-weight);
line-height: var(--text-small-underline--line-height);
letter-spacing: var(--text-small-underline--letter-spacing);
text-decoration: underline;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.medium-underline {
font-family: var(--font-inter);
font-size: var(--text-medium-underline);
font-weight: var(--text-medium-underline--font-weight);
line-height: var(--text-medium-underline--line-height);
letter-spacing: var(--text-medium-underline--letter-spacing);
text-decoration: underline;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.large-underline {
font-family: var(--font-inter);
font-size: var(--text-large-underline);
font-weight: var(--text-large-underline--font-weight);
line-height: var(--text-large-underline--line-height);
letter-spacing: var(--text-large-underline--letter-spacing);
text-decoration: underline;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-underline {
font-family: var(--font-inter);
font-size: var(--text-x-large-underline);
font-weight: var(--text-x-large-underline--font-weight);
line-height: var(--text-x-large-underline--line-height);
letter-spacing: var(--text-x-large-underline--letter-spacing);
text-decoration: underline;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-label {
font-family: var(--font-inter);
font-size: var(--text-x-small-label);
font-weight: var(--text-x-small-label--font-weight);
line-height: var(--text-x-small-label--line-height);
letter-spacing: var(--text-x-small-label--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-label-caps {
font-family: var(--font-inter);
font-size: var(--text-x-small-label-caps);
font-weight: var(--text-x-small-label-caps--font-weight);
line-height: var(--text-x-small-label-caps--line-height);
letter-spacing: var(--text-x-small-label-caps--letter-spacing);
text-decoration: none;
text-transform: uppercase;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-small-heading {
font-family: var(--font-inter);
font-size: var(--text-xx-small-heading);
font-weight: var(--text-xx-small-heading--font-weight);
line-height: var(--text-xx-small-heading--line-height);
letter-spacing: var(--text-xx-small-heading--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-x-small-display);
font-weight: var(--text-x-small-display--font-weight);
line-height: var(--text-x-small-display--line-height);
letter-spacing: var(--text-x-small-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-uppercase {
font-family: var(--font-inter);
font-size: var(--text-x-large-uppercase);
font-weight: var(--text-x-large-uppercase--font-weight);
line-height: var(--text-x-large-uppercase--line-height);
letter-spacing: var(--text-x-large-uppercase--letter-spacing);
text-decoration: none;
text-transform: uppercase;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-large-uppercase {
font-family: var(--font-inter);
font-size: var(--text-xx-large-uppercase);
font-weight: var(--text-xx-large-uppercase--font-weight);
line-height: var(--text-xx-large-uppercase--line-height);
letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
text-decoration: none;
text-transform: uppercase;
text-indent: 0px;
margin-bottom: 0px;
}
.x-large-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-x-large-display);
font-weight: var(--text-x-large-display--font-weight);
line-height: var(--text-x-large-display--line-height);
letter-spacing: var(--text-x-large-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.large-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-large-display);
font-weight: var(--text-large-display--font-weight);
line-height: var(--text-large-display--line-height);
letter-spacing: var(--text-large-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.medium-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-medium-display);
font-weight: var(--text-medium-display--font-weight);
line-height: var(--text-medium-display--line-height);
letter-spacing: var(--text-medium-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.xx-small-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-xx-small-display);
font-weight: var(--text-xx-small-display--font-weight);
line-height: var(--text-xx-small-display--line-height);
letter-spacing: var(--text-xx-small-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
.x-small-uppercase {
font-family: var(--font-inter);
font-size: var(--text-x-small-uppercase);
font-weight: var(--text-x-small-uppercase--font-weight);
line-height: var(--text-x-small-uppercase--line-height);
letter-spacing: var(--text-x-small-uppercase--letter-spacing);
text-decoration: none;
text-transform: uppercase;
text-indent: 0px;
margin-bottom: 0px;
}
.large-uppercase {
font-family: var(--font-inter);
font-size: var(--text-large-uppercase);
font-weight: var(--text-large-uppercase--font-weight);
line-height: var(--text-large-uppercase--line-height);
letter-spacing: var(--text-large-uppercase--letter-spacing);
text-decoration: none;
text-transform: uppercase;
text-indent: 0px;
margin-bottom: 0px;
}
.small-display {
font-family: var(--font-bricolage-grotesque);
font-size: var(--text-small-display);
font-weight: var(--text-small-display--font-weight);
line-height: var(--text-small-display--line-height);
letter-spacing: var(--text-small-display--letter-spacing);
text-decoration: none;
text-transform: none;
text-indent: 0px;
margin-bottom: 0px;
}
/* Blog post body styling with semantic spacing */
.post-body p {
/* Scales with font size - uses logical properties for better writing mode support */
margin-block: 1em;
}
/* Extra blank lines from markdown -> visible gaps that scale with font size */
.post-body .md-gap {
/* Each "extra blank line" is one em; scales with font size */
block-size: calc(1em * var(--gap, 1));
margin: 0; /* no extra margins around the gap */
line-height: 1; /* prevent tall line-height from compounding */
}
/* Heading rhythm for better typography */
.post-body h1 {
margin-block: 1.5em 0.6em;
}
.post-body h2 {
margin-block: 1.4em 0.6em;
}
.post-body h3 {
margin-block: 1.2em 0.5em;
}
.post-body h4 {
margin-block: 1.1em 0.5em;
}
.post-body h5 {
margin-block: 1em 0.4em;
}
.post-body h6 {
margin-block: 1em 0.4em;
}
/* Ensure line breaks are visible */
.post-body br {
display: block;
}
}
Reference in New Issue View Git Blame Copy Permalink