/* All @import statements must come first per CSS spec. Tailwind directives below are processed by PostCSS plugin, not as raw CSS. */ /* Settings */ :root { /* HubSpot DND layout grid */ --hsElevate--column__gap: 2.13%; --hsElevate--column__widthMultiplier: 8.333; /* Sections */ --hsElevate--contentWrapper--narrow__maxWidth: 768px ; --hsElevate--contentWrapper--medium__maxWidth: 1120px ; --hsElevate--contentWrapper--wide__maxWidth: 1296px ; --hsElevate--section--extraSmall__verticalPadding: 48px ; --hsElevate--section--small__verticalPadding: 64px ; --hsElevate--section--medium__verticalPadding: 96px ; --hsElevate--section--large__verticalPadding: 128px ; --hsElevate--section--extraLarge__verticalPadding: 192px ; /* Default section left/right padding */ --hsElevate--section--horizontalPadding: 32px ; /* Gap - default gaps that could be easily leveraged in module styles via class names */ --hsElevate--gap--extraSmall: 16px ; --hsElevate--gap--small: 24px ; --hsElevate--gap--medium: 32px ; --hsElevate--gap--large: 64px ; --hsElevate--gap--extraLarge: 96px ; /* Spacing - default spacing values */ --hsElevate--spacing--4: 4px ; --hsElevate--spacing--8: 8px ; --hsElevate--spacing--12: 12px ; --hsElevate--spacing--16: 16px ; --hsElevate--spacing--20: 20px ; --hsElevate--spacing--24: 24px ; --hsElevate--spacing--32: 32px ; --hsElevate--spacing--40: 40px ; --hsElevate--spacing--48: 48px ; --hsElevate--spacing--56: 56px ; --hsElevate--spacing--64: 64px ; --hsElevate--spacing--72: 72px ; --hsElevate--spacing--80: 80px ; --hsElevate--spacing--88: 88px ; --hsElevate--spacing--96: 96px ; --hsElevate--spacing--104: 104px ; --hsElevate--spacing--112: 112px ; --hsElevate--spacing--120: 120px ; --hsElevate--spacing--128: 128px ; --hsElevate--spacing--136: 136px ; --hsElevate--spacing--144: 144px ; --hsElevate--spacing--152: 152px ; --hsElevate--spacing--160: 160px ; --hsElevate--spacing--168: 168px ; --hsElevate--spacing--176: 176px ; --hsElevate--spacing--184: 184px ; --hsElevate--spacing--192: 192px ; /* Grids */ --default-section-padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); --default-section-margin: 0; --default-section-max-width: var(--hsElevate--contentWrapper--wide__maxWidth); --default-container-padding: 0; --default-container-margin: 0; --default-container-gap: var(--hsElevate--gap--medium); --default-container-row-gap: var(--hsElevate--gap--medium); --default-container-column-gap: var(--hsElevate--gap--medium); --default-table-padding: 0; --default-table-margin: 0; --default-table-row-gap: var(--hsElevate--gap--medium); --default-table-column-gap: var(--hsElevate--gap--medium); } :root { /* Text spacing */ --hsElevate--text--extraSmall__margin: 0 0.75rem; /* 12px */ --hsElevate--text--small__margin: 0 1.25rem; /* 20px */ --hsElevate--text__margin: 0 2rem; /* 32px */ --hsElevate--text--large__margin: 0 2.5rem; /* 40px */ --hsElevate--text--extraLarge__margin: 0 4rem; /* 64px */ /* Body */ --hsElevate--baseText__fontSize: 16px ; --hsElevate--body__font: Inter ; --hsElevate--body--small__fontSize: 1.000125rem ; --hsElevate--body__fontSize: 1.125rem ; --hsElevate--body--large__fontSize: 1.499625rem ; --hsElevate--body--extraLarge__fontSize: 1.9991249999999998rem ; --hsElevate--body__fontWeight: normal ; --hsElevate--body__fontStyle: normal ; --hsElevate--body__lineHeight: 1.55; /* Primary links */ --hsElevate--link--primary__fontColor: #F97316 ; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--primary__hover--fontColor: #F97316 ; --hsElevate--link--primary__hover--textDecoration: underline; --hsElevate--link--primary__hover--textDecorationColor: #F97316 ; /* Secondary links */ --hsElevate--link--secondary__fontColor: #FFF7ED ; --hsElevate--link--secondary__textDecoration: none; --hsElevate--link--secondary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--secondary__hover--fontColor: #FFF7ED ; --hsElevate--link--secondary__hover--textDecoration: underline; --hsElevate--link--secondary__hover--textDecorationColor: #FFF7ED ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --hsElevate--heading__tablet-modifier: 0.8; --hsElevate--heading__lineHeight: 1.2; --hsElevate--display1__font: Inter ; --hsElevate--display1__fontSize: 6.313rem; --hsElevate--display2__font: Inter ; --hsElevate--display2__fontSize: 4.75rem; --hsElevate--h1__font: Inter ; --hsElevate--h1__fontSize: 3.5625rem ; --hsElevate--h1__fontWeight: 500 ; --hsElevate--h1__fontStyle: normal ; --hsElevate--h2__font: Inter ; --hsElevate--h2__fontSize: 2.6875rem ; --hsElevate--h2__fontWeight: 600 ; --hsElevate--h2__fontStyle: normal ; --hsElevate--h3__font: Inter ; --hsElevate--h3__fontSize: 2.0rem ; --hsElevate--h3__fontWeight: 600 ; --hsElevate--h3__fontStyle: normal ; --hsElevate--h4__font: Inter ; --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 600 ; --hsElevate--h4__fontStyle: normal ; --hsElevate--h5__font: Inter ; --hsElevate--h5__fontSize: 1.25rem ; --hsElevate--h5__fontWeight: 600 ; --hsElevate--h5__fontStyle: normal ; --hsElevate--h6__font: Inter ; --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 600 ; --hsElevate--h6__fontStyle: normal ; /* Quotes */ --hsElevate--quotes__font: Inter ; --hsElevate--quotes__fontColor: ; --hsElevate--quotes__fontSize: 1.125rem ; --hsElevate--quotes__fontWeight: 400 ; --hsElevate--quotes__fontStyle: normal ; /* Captions */ --hsElevate--captions__font: Inter ; --hsElevate--captions__fontSize: 0.75rem ; --hsElevate--captions__fontWeight: 800 ; --hsElevate--captions__fontStyle: normal ; --hsElevate--captions__case: uppercase ; /* Images */ --hsElevate--rteImages__margin: 2rem; /* 32px */ } :root { /* Base colors */ --hsElevate--color--base--1: #FFFFFF ; --hsElevate--color--base--2: #FAF7F2 ; --hsElevate--color--base--3: #0A0A0A ; /* Accent colors */ --hsElevate--color--accent--1: #F0F8FF ; --hsElevate--color--accent--2: #FFF7ED ; --hsElevate--color--accent--3: #F97316 ; } :root { /* Primary button variables */ --hsElevate--button--primary__buttonFill: filled ; /* Primary button font */ --hsElevate--button--primary__font: Inter ; /* TODO: Look into why primary_button.text.size ~ primary_button.text.size_unit is not evaluating to the correct size_unit, but can still take in px */ --hsElevate--button--primary__fontSize: 1.0rem ; --hsElevate--button--primary__fontWeight: 500 ; --hsElevate--button--primary__fontStyle: normal ; /* Primary button text color */ --hsElevate--button--primary__textColor: #FAF7F2 ; --hsElevate--button--primary__hover--textColor: #FAF7F2 ; /* Primary button shape */ /* Primary button background color */ --hsElevate--button--primary__backgroundColor: #F97316 ; --hsElevate--button--primary__hover--backgroundColor: #F97316 ; --hsElevate--button--primary__active--backgroundColor: #db5500 ; /* Primary button border */ --hsElevate--button--primary__borderThickness: 0px ; --hsElevate--button--primary__hover--borderThickness: 0px ; --hsElevate--button--primary__borderColor: transparent; --hsElevate--button--primary__hover--borderColor: transparent; /* Secondary button variables */ --hsElevate--button--secondary__buttonFill: no_fill ; /* Secondary button font */ --hsElevate--button--secondary__font: Inter ; --hsElevate--button--secondary__fontSize: 1.0rem ; --hsElevate--button--secondary__fontWeight: 500 ; --hsElevate--button--secondary__fontStyle: normal ; /* Secondary button text color */ --hsElevate--button--secondary__textColor: #F97316 ; --hsElevate--button--secondary__hover--textColor: #F97316 ; /* Secondary button shape */ /* Secondary button background color */ --hsElevate--button--secondary__backgroundColor: transparent; --hsElevate--button--secondary__hover--backgroundColor: transparent; /* Secondary button border */ --hsElevate--button--secondary__borderThickness: 2px ; --hsElevate--button--secondary__hover--borderThickness: 2px ; --hsElevate--button--secondary__borderColor: #F97316 ; --hsElevate--button--secondary__hover--borderColor: #F97316 ; /* Tertiary button variables */ --hsElevate--button--tertiary__buttonFill: filled ; /* Tertiary button font */ --hsElevate--button--tertiary__font: Inter ; --hsElevate--button--tertiary__fontSize: 1.0rem ; --hsElevate--button--tertiary__fontWeight: 500 ; --hsElevate--button--tertiary__fontStyle: normal ; /* Tertiary button text color */ --hsElevate--button--tertiary__textColor: #0A0A0A ; --hsElevate--button--tertiary__hover--textColor: #0A0A0A ; /* Tertiary button shape */ /* Tertiary button background color */ --hsElevate--button--tertiary__backgroundColor: #FFF7ED ; --hsElevate--button--tertiary__hover--backgroundColor: #E9E5FF ; /* Tertiary button border */ --hsElevate--button--tertiary__borderThickness: 0px ; --hsElevate--button--tertiary__hover--borderThickness: 0px ; --hsElevate--button--tertiary__borderColor: transparent; --hsElevate--button--tertiary__hover--borderColor: transparent; /* Accent button variables */ --hsElevate--button--accent__buttonFill: no_fill ; /* Accent button font */ --hsElevate--button--accent__font: Inter ; --hsElevate--button--accent__fontSize: 1.0rem ; --hsElevate--button--accent__fontWeight: 500 ; --hsElevate--button--accent__fontStyle: normal ; /* Accent button text color */ --hsElevate--button--accent__textColor: #FFF7ED ; --hsElevate--button--accent__hover--textColor: #E9E5FF ; /* Accent button shape */ /* Accent button background color */ --hsElevate--button--accent__backgroundColor: transparent; --hsElevate--button--accent__hover--backgroundColor: transparent; /* Accent button border */ --hsElevate--button--accent__borderThickness: 2px ; --hsElevate--button--accent__hover--borderThickness: 2px ; --hsElevate--button--accent__borderColor: #FFF7ED ; --hsElevate--button--accent__hover--borderColor: #E9E5FF ; } :root { /* Form field background color */ --hsElevate--formField__backgroundColor: #FAF7F2 ; /* Form field shape */ /* Form field border -- multiple fields to properly handle field visibility for both fill and no fill */ /* Proper usage of variables to achieve "All" or "Bottom" will be within CSS */ --hsElevate--formField__borderThickness: 1px ; --hsElevate--formField__borderTop: 1px solid #D3DAE4 ; --hsElevate--formField__borderRight: 1px solid #D3DAE4 ; --hsElevate--formField__borderLeft: 1px solid #D3DAE4 ; --hsElevate--formField__borderBottom: 1px solid #D3DAE4 ; --hsElevate--formField__borderColor: #D3DAE4 ; /* Form field text color */ --hsElevate--formFieldInput__textColor: #0A0A0A ; /* Form field spacing */ --hsElevate--formField__marginBottom: var(--hsElevate--spacing--32); /* Form textarea border radius */ --hsElevate--formFieldTextArea__borderRadius: calc(var(--hsElevate--formField__borderRadius) * 0.5); /* Form field checkbox/radio */ --hsElevate--formFieldCheckboxRadio__size: 24px; --hsElevate--formFieldCheckboxRadio__fillColor: #000000; /* Form field placeholder */ --hsElevate--formFieldPlaceholder__textColor: #7d8ca5 ; /* Form required field color */ --hsElevate--formRequired__color: #de2828; /* Form field datepicker icon */ --hsElevate--formField__datepickerIcon: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); /* Form field select icon */ --hsElevate--formField__selectIcon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A"); /* Textarea drag icon */ --hsElevate--formField__dragIcon: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A"); /* Label text */ --hsElevate--formLabel__textColor: #0A0A0A ; --hsElevate--formLabel__font: Inter ; --hsElevate--formLabel__fontSize: 1.125rem ; --hsElevate--formLabel__fontWeight: 500 ; --hsElevate--formLabel__marginBottom: var(--hsElevate--spacing--8); /* Help text */ --hsElevate--formHelpText__textColor: #647390; /* Form background color */ --hsElevate--form__backgroundColor: #FFFFFF ; /* Form shape */ --hsElevate--form__borderRadius: 24px; /* Form border */ --hsElevate--form__borderThickness: 1px ; --hsElevate--form__borderColor: #D3DAE4 ; /* Form spacing */ --hsElevate--form__padding: var(--hsElevate--spacing--48); /* CSS variables for new forms */ /* Global vars */ --hsf-global__font-family: var(--hsElevate--formLabel__font); --hsf-global__font-size: var(--hsElevate--formLabel__fontSize); --hsf-global__color: var(--hsElevate--formLabel__textColor); --hsf-global-error__color: var(--hsElevate--formRequired__color); /* Form */ --hsf-background__background-color: var(--hsElevate--form__backgroundColor); --hsf-background__padding: var(--hsElevate--form__padding); --hsf-background__border-style: solid; --hsf-background__border-color: var(--hsElevate--form__borderColor); --hsf-background__border-radius: var(--hsElevate--form__borderRadius); --hsf-background__border-width: var(--hsElevate--form__borderThickness); /* Content */ --hsf-heading__font-family: var(--hsf-global__font-family); --hsf-heading__color: var(--hsf-global__color); --hsf-heading__text-shadow: none; --hsf-richtext__font-family: var(--hsf-global__font-family); --hsf-richtext__font-size: var(--hsf-global__font-size); --hsf-richtext__color: var(--hsf-global__color); /* Labels */ --hsf-field-label__font-family: var(--hsf-global__font-family); --hsf-field-label__font-size: var(--hsf-global__font-size); --hsf-field-label__color: var(--hsf-global__color); --hsf-field-label-requiredindicator__color: var(--hsf-global-error__color); --hsf-module__vertical-spacing: var(--hsElevate--formLabel__marginBottom); /* Help text */ --hsf-field-description__font-family: var(--hsf-global__color); --hsf-field-description__color: var(--hsElevate--formHelpText__textColor); /* Errors */ --hsf-erroralert__font-family: var(--hsElevate--formLabel__font); --hsf-erroralert__color: var(--hsf-global-error__color); /* Field footer */ --hsf-field-footer__font-family: var(--hsf-field-description__font-family); --hsf-field-footer__color: var(--hsf-field-description__color); /* Field */ --hsf-field-input__font-family: var(--hsf-global__font-family); --hsf-field-input__background-color: var(--hsElevate--formField__backgroundColor); --hsf-field-input__placeholder-color: var(--hsElevate--formFieldPlaceholder__textColor); --hsf-field-input__border-color: var(--hsElevate--formField__borderColor); --hsf-field-input__border-width: var(--hsElevate--formField__borderThickness); ; --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: var(--hsElevate--formField__borderRadius); --hsf-field-input__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--32); --hsf-field-input__color: var(--hsElevate--formFieldInput__textColor); --hsf-row__vertical-spacing: var(--hsElevate--formField__marginBottom); --hsf-row__horizontal-spacing: var(--hsElevate--spacing--32); /* Textarea */ --hsf-field-textarea__font-family: var(--hsf-field-input__font-family); --hsf-field-textarea__color: var(--hsf-field-input__color); --hsf-field-textarea__background-color: var(--hsf-field-input__background-color); --hsf-field-textarea__border-color: var(--hsf-field-input__border-color); --hsf-field-textarea__border-style: var(--hsf-field-input__border-style); --hsf-field-textarea__border-radius: var(--hsElevate--formFieldTextArea__borderRadius); --hsf-field-textarea__padding: var(--hsf-field-input__padding); /* Checkbox */ --hsf-field-checkbox__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2); --hsf-field-checkbox__background-color: #fff; --hsf-field-checkbox__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-checkbox__border-color: var(--hsf-field-input__border-color); --hsf-field-checkbox__border-width: 1px 1px 1px 1px; --hsf-field-checkbox__border-style: var(--hsf-field-input__border-style); /* Radio */ --hsf-field-radio__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2); --hsf-field-radio__background-color: #fff; --hsf-field-radio__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-radio__border-color: var(--hsf-field-input__border-color); --hsf-field-radio__border-width: 1px 1px 1px 1px; --hsf-field-radio__border-style: var(--hsf-field-input__border-style); /* Progress bar CSS vars: - --hsf-progressbar__font-family - --hsf-progressbar__font-family - --hsf-progressbar__font-size - --hsf-progressbar__color - --hsf-progressbar__background-color - --hsf-progressbar__background - --hsf-progressbar__border-color - --hsf-progressbar__border-style - --hsf-progressbar__border-width */ /* Button */ --hsf-button__width: 100%; --hsf-button__font-family: var(--hsElevate--button--primary__font); --hsf-button__font-size: var(--hsElevate--button--primary__fontSize); --hsf-button__font-weight: var(--hsElevate--button--primary__fontWeight); --hsf-button__color: var(--hsElevate--button--primary__textColor); --hsf-button__background-color: var(--hsElevate--button--primary__backgroundColor); --hsf-button__background-image: none; --hsf-button__border-radius: var(--hsElevate--button--primary__borderRadius); --hsf-button__border-width: var(--hsElevate--button--primary__borderThickness); --hsf-button__border-style: solid; --hsf-button__border-color: var(--hsElevate--button--primary__borderColor); --hsf-button__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--24); --hsf-button__box-shadow: none; --hsf-button--hover__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--hover__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--hover__border-color: var(--hsElevate--button--primary__hover--borderColor); --hsf-button--focus__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--focus__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--focus__border-color: var(--hsElevate--button--primary__hover--borderColor); } @media (max-width: 600px) { :root { --hsElevate--form__padding: var(--hsElevate--spacing--24); } .hsfc-PhoneInput__FlagAndCaret { --hsf-field-input__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--16); } } :root { /* Card variant 1 */ /* Shape */ --hsElevate--card--variant1__borderRadius: 16px; --hsElevate--card--variant1__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant1__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant1__backgroundColor: #FFFFFF ; --hsElevate--card--variant1__borderColor: #D3DAE4 ; --hsElevate--card--variant1__textColor: #0A0A0A ; /* Links */ --hsElevate--card--variant1--link__fontColor: #F97316 ; --hsElevate--card--variant1--link__textDecoration: none; --hsElevate--card--variant1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant1--link__hover--fontColor: #F97316 ; --hsElevate--card--variant1--link__hover--textDecoration: underline; --hsElevate--card--variant1--link__hover--textDecorationColor: #F97316 ; /* Icon colors */ --hsElevate--card--variant1__iconColor: #F97316 ; --hsElevate--card--variant1__iconBackgroundColor: #FFF7ED ; /* Card variant 2 */ /* Shape */ --hsElevate--card--variant2__borderRadius: 16px; --hsElevate--card--variant2__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant2__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant2__backgroundColor: #FAF7F2 ; --hsElevate--card--variant2__borderColor: #D3DAE4 ; --hsElevate--card--variant2__textColor: #0A0A0A ; /* Links */ --hsElevate--card--variant2--link__fontColor: #F97316 ; --hsElevate--card--variant2--link__textDecoration: none; --hsElevate--card--variant2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant2--link__hover--fontColor: #F97316 ; --hsElevate--card--variant2--link__hover--textDecoration: underline; --hsElevate--card--variant2--link__hover--textDecorationColor: #F97316 ; /* Icon colors */ --hsElevate--card--variant2__iconColor: #F97316 ; --hsElevate--card--variant2__iconBackgroundColor: #D3DAE4 ; /* Card variant 3 */ /* Shape */ --hsElevate--card--variant3__borderRadius: 16px; --hsElevate--card--variant3__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant3__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant3__backgroundColor: #0A0A0A ; --hsElevate--card--variant3__borderColor: #303F59 ; --hsElevate--card--variant3__textColor: #FAF7F2 ; /* Links */ --hsElevate--card--variant3--link__fontColor: #FFF7ED ; --hsElevate--card--variant3--link__textDecoration: none; --hsElevate--card--variant3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant3--link__hover--fontColor: #FFF7ED ; --hsElevate--card--variant3--link__hover--textDecoration: underline; --hsElevate--card--variant3--link__hover--textDecorationColor: #FFF7ED ; /* Icon colors */ --hsElevate--card--variant3__iconColor: #FFF7ED ; --hsElevate--card--variant3__iconBackgroundColor: #303F59 ; /* Card variant 4 */ /* Shape */ --hsElevate--card--variant4__borderRadius: 16px; --hsElevate--card--variant4__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant4__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant4__backgroundColor: #0A0A0A ; --hsElevate--card--variant4__borderColor: #303F59 ; --hsElevate--card--variant4__textColor: #FAF7F2 ; /* Links */ --hsElevate--card--variant4--link__fontColor: #FFF7ED ; --hsElevate--card--variant4--link__textDecoration: none; --hsElevate--card--variant4--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant4--link__hover--fontColor: #FFF7ED ; --hsElevate--card--variant4--link__hover--textDecoration: underline; --hsElevate--card--variant4--link__hover--textDecorationColor: #FFF7ED ; /* Icon colors */ --hsElevate--card--variant4__iconColor: #FFF7ED ; --hsElevate--card--variant4__iconBackgroundColor: #303F59 ; } :root { /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #FFFFFF ; --hsElevate--section--lightSection--1__textColor: #0A0A0A ; --hsElevate--section--lightSection--1__accentColor: #F97316 ; --hsElevate--section--lightSection--1__captionColor: #6B7280 ; --hsElevate--section--lightSection--1--blockquote__textColor: #0A0A0A ; --hsElevate--section--lightSection--1--blockquote__backgroundColor: #FAF7F2 ; --hsElevate--section--lightSection--1--blockquote__accentColor: #F97316 ; --hsElevate--section--lightSection--1--link__fontColor: #F97316 ; --hsElevate--section--lightSection--1--link__textDecoration: none; --hsElevate--section--lightSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--1--link__hover--fontColor: #F97316 ; --hsElevate--section--lightSection--1--link__hover--textDecoration: underline; --hsElevate--section--lightSection--1--link__hover--textDecorationColor: #F97316 ; /* Light section 2 */ --hsElevate--section--lightSection--2__backgroundColor: #FAF7F2 ; --hsElevate--section--lightSection--2__textColor: #0A0A0A ; --hsElevate--section--lightSection--2__accentColor: #F97316 ; --hsElevate--section--lightSection--2__captionColor: #6B7280 ; --hsElevate--section--lightSection--2--blockquote__textColor: #0A0A0A ; --hsElevate--section--lightSection--2--blockquote__backgroundColor: #FAF7F2 ; --hsElevate--section--lightSection--2--blockquote__accentColor: #F97316 ; --hsElevate--section--lightSection--2--link__fontColor: #F97316 ; --hsElevate--section--lightSection--2--link__textDecoration: none; --hsElevate--section--lightSection--2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--2--link__hover--fontColor: #F97316 ; --hsElevate--section--lightSection--2--link__hover--textDecoration: underline; --hsElevate--section--lightSection--2--link__hover--textDecorationColor: #F97316 ; /* Light section 3 */ --hsElevate--section--lightSection--3__backgroundColor: #F0F8FF ; --hsElevate--section--lightSection--3__textColor: #0A0A0A ; --hsElevate--section--lightSection--3__accentColor: #F97316 ; --hsElevate--section--lightSection--3__captionColor: #4A4A4A ; --hsElevate--section--lightSection--3--blockquote__textColor: #0A0A0A ; --hsElevate--section--lightSection--3--blockquote__backgroundColor: #F0F8FF ; --hsElevate--section--lightSection--3--blockquote__accentColor: #F97316 ; --hsElevate--section--lightSection--3--link__fontColor: #F97316 ; --hsElevate--section--lightSection--3--link__textDecoration: none; --hsElevate--section--lightSection--3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--3--link__hover--fontColor: #F97316 ; --hsElevate--section--lightSection--3--link__hover--textDecoration: underline; --hsElevate--section--lightSection--3--link__hover--textDecorationColor: #F97316 ; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #0A0A0A ; --hsElevate--section--darkSection--1__textColor: #FAF7F2 ; --hsElevate--section--darkSection--1__accentColor: #FFF7ED ; --hsElevate--section--darkSection--1__captionColor: #9CA3AF ; --hsElevate--section--darkSection--1--blockquote__textColor: #FAF7F2 ; --hsElevate--section--darkSection--1--blockquote__backgroundColor: #0A0A0A ; --hsElevate--section--darkSection--1--blockquote__accentColor: #FFF7ED ; --hsElevate--section--darkSection--1--link__fontColor: #FFF7ED ; --hsElevate--section--darkSection--1--link__textDecoration: none; --hsElevate--section--darkSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--darkSection--1--link__hover--fontColor: #FFF7ED ; --hsElevate--section--darkSection--1--link__hover--textDecoration: underline; --hsElevate--section--darkSection--1--link__hover--textDecorationColor: #FFF7ED ; } :root { /* Font */ --hsElevate--tag__font: Inter ; --hsElevate--tag__fontColor: ; --hsElevate--tag__fontSize: 0.875rem ; --hsElevate--tag__fontWeight: 500 ; --hsElevate--tag__fontStyle: normal ; /* Text colors */ --hsElevate--tag__textColor: #063E95 ; /* Background colors */ --hsElevate--tag__backgroundColor: #E5F0FF ; /* Shape */ /* Border thickness */ --hsElevate--tag__borderThickness: 1px ; --hsElevate--tag__borderColor: #E5F0FF ; /* Case */ --hsElevate--tag__case: none ; /* Border radius based on shape */ --hsElevate-sharp: 0; --hsElevate-rounded--extra-small: 4px; --hsElevate-rounded--small: 8px; --hsElevate-rounded: 16px; --hsElevate-rounded--large: 24px; --hsElevate-rounded--extra-large: 32px; --hsElevate-circle: 50%; --hsElevate--icon--small__size: 16px; --hsElevate--icon--medium__size: 24px; --hsElevate--icon--large__size: 32px; } /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { overflow-x: hidden; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { /* 1 */ /* 1 */ line-height: 1.15; /* 1 */ /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ /* Objects */ .dnd-section { padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); } .dnd-section > .row-fluid, .hs-elevate-content-wrapper { margin: 0 auto; max-width: var(--hsElevate--contentWrapper--wide__maxWidth); } .hs-elevate-content-wrapper { padding: 0 var(--hsElevate--section--horizontalPadding); } /* Helper Classes */ .hs-elevate-content-wrapper--sm { max-width: var(--hsElevate--contentWrapper--narrow__maxWidth); padding: 0; } .hs-elevate-content-wrapper--md { max-width: var(--hsElevate--contentWrapper--medium__maxWidth); padding: 0; } /* Padding for non DND sections */ .hs-elevate-content-padding { padding-block: var(--hsElevate--section--medium__verticalPadding); } .hs-elevate-content-padding--extra-small { padding-block: var( --hsElevate--section--extraSmall__verticalPadding); } .hs-elevate-content-padding--small { padding-block: var(--hsElevate--section--small__verticalPadding); } .hs-elevate-content-padding--large { padding-block: var(--hsElevate--section--large__verticalPadding); } .hs-elevate-content-padding--extra-large { padding-block: var(--hsElevate--section--extraLarge__verticalPadding); } .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12 { min-height: 1px; width: 100%; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 1 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 11 / 100 ); } .row-fluid .span2 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 2 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 10 / 100 ); } .row-fluid .span3 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 3 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 9 / 100 ); } .row-fluid .span4 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 4 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 8 / 100 ); } .row-fluid .span5 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 5 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 7 / 100 ); } .row-fluid .span6 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 6 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 6 / 100 ); } .row-fluid .span7 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 7 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 5 / 100 ); } .row-fluid .span8 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 8 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 4 / 100 ); } .row-fluid .span9 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 9 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 3 / 100 ); } .row-fluid .span10 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 10 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 2 / 100 ); } .row-fluid .span11 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 11 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 1 / 100 ); } } /* Elements */ html { font-size: var(--hsElevate--baseText__fontSize); } body { background-color: var(--hsElevate--section--lightSection--1__backgroundColor); color: var(--hsElevate--section--lightSection--1__textColor); font-family: var(--hsElevate--body__font); font-size: var(--hsElevate--body__fontSize); font-style: var(--hsElevate--body__fontStyle); font-weight: var(--hsElevate--body__fontWeight); line-height: var(--hsElevate--body__lineHeight); overflow-wrap: break-word; } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { margin-block: var(--hsElevate--text__margin); } /* Scoped link color: only apply the theme link color inside rich-text / prose / blog-post body containers — NOT every on the page. This stops component buttons (e.g. Fill the brief / Book 30-min call) from being auto-painted with the theme-settings link color. */ .prose a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), .prose-spectage a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), .hs-rich-text a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), [data-hs-cos-type="rich_text"] a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), .hs-blog-post a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), a.hs-elevate-link--primary, .hs-elevate-link--primary a { color: var(--hsElevate--link--primary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration-color: var(--hsElevate--link--primary__textDecorationColor); } .prose a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .prose a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, .prose-spectage a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .prose-spectage a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, .hs-rich-text a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-rich-text a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, [data-hs-cos-type="rich_text"] a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, [data-hs-cos-type="rich_text"] a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, .hs-blog-post a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-blog-post a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, a.hs-elevate-link--primary:hover, .hs-elevate-link--primary a:hover, a.hs-elevate-link--primary:focus, .hs-elevate-link--primary a:focus { color: var(--hsElevate--link--primary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--primary__hover--textDecorationColor); } a.hs-elevate-link--secondary, .hs-elevate-link--secondary a { color: var(--hsElevate--link--secondary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration-color: var(--hsElevate--link--secondary__textDecorationColor); } a.hs-elevate-link--secondary:hover, .hs-elevate-link--secondary a:hover a.hs-elevate-link--secondary:focus, .hs-elevate-link--secondary a:focus { color: var(--hsElevate--link--secondary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--secondary__hover--textDecorationColor); } /* Headings */ h1, h2, h3, h4, h5, h6, .hs-elevate-display-1, .hs-elevate-display-2 { line-height: var(--hsElevate--heading__lineHeight); margin-block: var(--hsElevate--text__margin); } .hs-elevate-display-1 { font-family: var(--hsElevate--display1__font); font-size: calc(var(--hsElevate--display1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 400; } .hs-elevate-display-2 { font-family: var(--hsElevate--display2__font); font-size: calc(var(--hsElevate--display2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 400; } h1, .hs-elevate-h1 { font-family: var(--hsElevate--h1__font); font-size: calc(var(--hsElevate--h1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h1__fontStyle); font-weight: var(--hsElevate--h1__fontWeight); } h2, .hs-elevate-h2 { font-family: var(--hsElevate--h2__font); font-size: calc(var(--hsElevate--h2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h2__fontStyle); font-weight: var(--hsElevate--h2__fontWeight); } h3, .hs-elevate-h3 { font-family: var(--hsElevate--h3__font); font-size: calc(var(--hsElevate--h3__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h3__fontStyle); font-weight: var(--hsElevate--h3__fontWeight); } h4, .hs-elevate-h4 { font-family: var(--hsElevate--h4__font); font-size: calc(var(--hsElevate--h4__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h4__fontStyle); font-weight: var(--hsElevate--h4__fontWeight); } h5, .hs-elevate-h5 { font-family: var(--hsElevate--h5__font); font-size: calc(var(--hsElevate--h5__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h5__fontStyle); font-weight: var(--hsElevate--h5__fontWeight); } h6, .hs-elevate-h6 { font-family: var(--hsElevate--h6__font); font-size: calc(var(--hsElevate--h6__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h6__fontStyle); font-weight: var(--hsElevate--h6__fontWeight); } @media (min-width: 767px) { .hs-elevate-display-1 { font-size: var(--hsElevate--display1__fontSize); } .hs-elevate-display-2 { font-size: var(--hsElevate--display2__fontSize); } h1, .hs-elevate-h1 { font-size: var(--hsElevate--h1__fontSize); } h2, .hs-elevate-h2 { font-size: var(--hsElevate--h2__fontSize); } h3, .hs-elevate-h3 { font-size: var(--hsElevate--h3__fontSize); } h4, .hs-elevate-h4 { font-size: var(--hsElevate--h4__fontSize); } h5, .hs-elevate-h5 { font-size: var(--hsElevate--h5__fontSize); } h6, .hs-elevate-h6 { font-size: var(--hsElevate--h6__fontSize); } } /* Lists */ ul, ol { margin-block: var(--hsElevate--text__margin); } /* Blockquotes */ blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } @media (max-width: 767.98px) { :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { font-size: calc(var(--hsElevate--body__fontSize) + 4px); margin-inline: 0; } } /* Captions */ .hs-elevate-caption { color: var(--hsElevate--captions__fontColor, var(--hsElevate--section--lightSection--1--captionColor)); font-family: var(--hsElevate--captions__font); font-size: var(--hsElevate--captions__fontSize); font-style: var(--hsElevate--captions__fontStyle); font-weight: var(--hsElevate--captions__fontWeight); text-transform: var(--hsElevate--captions__case); } /* Tags */ .hs-elevate-tag { padding: 2px 8px; border-color: var(--hsElevate--tag__borderColor); border-radius: var(--hsElevate--tag__borderRadius); border-style: solid; border-width: var(--hsElevate--tag__borderThickness); background-color: var(--hsElevate--tag__backgroundColor); color: var(--hsElevate--tag__textColor); font-family: var(--hsElevate--tag__font); font-size: var(--hsElevate--tag__fontSize); font-style: var(--hsElevate--tag__fontStyle); font-weight: var(--hsElevate--tag__fontWeight); text-transform: var(--hsElevate--tag__case); } /* Images in rich text */ :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) img { max-width: 100%; margin-block-end: var(--hsElevate--rteImages__margin); } .hs-elevate-button:focus { outline: 2px solid #53ACFF; outline-offset: 2px; } .hs-elevate-button--primary { font-family: var(--hsElevate--button--primary__font); font-size: var(--hsElevate--button--primary__fontSize); font-weight: var(--hsElevate--button--primary__fontWeight); font-style: var(--hsElevate--button--primary__fontStyle); color: var(--hsElevate--button--primary__textColor); border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--primary__borderColor); border-radius: var(--hsElevate--button--primary__borderRadius); text-decoration: none; } .hs-elevate-button--primary:hover { color: var(--hsElevate--button--primary__hover--textColor); background-color: var(--hsElevate--button--primary__hover--backgroundColor); border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--primary:active { color: var(--hsElevate--button--primary__hover--textColor); background-color: #db5500 ; border-color: ; border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary { font-family: var(--hsElevate--button--secondary__font); font-size: var(--hsElevate--button--secondary__fontSize); font-weight: var(--hsElevate--button--secondary__fontWeight); font-style: var(--hsElevate--button--secondary__fontStyle); color: var(--hsElevate--button--secondary__textColor); border-width: var(--hsElevate--button--secondary__borderThickness); background-color: var(--hsElevate--button--secondary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--secondary__borderColor); border-radius: var(--hsElevate--button--secondary__borderRadius); text-decoration: none; } .hs-elevate-button--secondary:hover { color: var(--hsElevate--button--secondary__hover--textColor); background-color: var(--hsElevate--button--secondary__hover--backgroundColor); border-color: var(--hsElevate--button--secondary__hover--borderColor); border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary:active { color: var(--hsElevate--button--secondary__hover--textColor); background-color: transparent ; border-color: #db5500 ; border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary { font-family: var(--hsElevate--button--tertiary__font); font-size: var(--hsElevate--button--tertiary__fontSize); font-weight: var(--hsElevate--button--tertiary__fontWeight); font-style: var(--hsElevate--button--tertiary__fontStyle); color: var(--hsElevate--button--tertiary__textColor); border-width: var(--hsElevate--button--tertiary__borderThickness); background-color: var(--hsElevate--button--tertiary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--tertiary__borderColor); border-radius: var(--hsElevate--button--tertiary__borderRadius); text-decoration: none; } .hs-elevate-button--tertiary:hover { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: var(--hsElevate--button--tertiary__hover--backgroundColor); border-color: var(--hsElevate--button--tertiary__hover--borderColor); border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary:active { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: #cbc7e1 ; border-color: ; border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent { font-family: var(--hsElevate--button--accent__font); font-size: var(--hsElevate--button--accent__fontSize); font-weight: var(--hsElevate--button--accent__fontWeight); font-style: var(--hsElevate--button--accent__fontStyle); color: var(--hsElevate--button--accent__textColor); border-width: var(--hsElevate--button--accent__borderThickness); background-color: var(--hsElevate--button--accent__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--accent__borderColor); border-radius: var(--hsElevate--button--accent__borderRadius); text-decoration: none; } .hs-elevate-button--accent:hover { color: var(--hsElevate--button--accent__hover--textColor); background-color: var(--hsElevate--button--accent__hover--backgroundColor); border-color: var(--hsElevate--button--accent__hover--borderColor); border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent:active { color: var(--hsElevate--button--accent__hover--textColor); background-color: ; border-color: #cbc7e1 ; border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .hs-elevate-card--variant-1 { border-color: var(--hsElevate--card--variant1__borderColor); border-radius: var(--hsElevate--card--variant1__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant1__borderThickness); background-color: var(--hsElevate--card--variant1__backgroundColor); color: var(--hsElevate--card--variant1__textColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant1--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__textDecorationColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant1--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__hover--textDecorationColor); } .hs-elevate-card--variant-2 { border-color: var(--hsElevate--card--variant2__borderColor); border-radius: var(--hsElevate--card--variant2__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant2__borderThickness); background-color: var(--hsElevate--card--variant2__backgroundColor); color: var(--hsElevate--card--variant2__textColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant2--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__textDecorationColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant2--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__hover--textDecorationColor); } .hs-elevate-card--variant-3 { border-color: var(--hsElevate--card--variant3__borderColor); border-radius: var(--hsElevate--card--variant3__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant3__borderThickness); background-color: var(--hsElevate--card--variant3__backgroundColor); color: var(--hsElevate--card--variant3__textColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant3--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__textDecorationColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant3--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__hover--textDecorationColor); } .hs-elevate-card--variant-4 { border-color: var(--hsElevate--card--variant4__borderColor); border-radius: var(--hsElevate--card--variant4__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant4__borderThickness); background-color: var(--hsElevate--card--variant4__backgroundColor); color: var(--hsElevate--card--variant4__textColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant4--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__textDecorationColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant4--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__hover--textDecorationColor); } /* Form */ .hs-form, .hs-elevate-system-form form, .hs-elevate-system-form--subscription-preferences form .email-prefs { padding: var(--hsElevate--form__padding); border-color: var(--hsElevate--form__borderColor); border-radius: var(--hsElevate--form__borderRadius); border-style: solid; border-width: var(--hsElevate--form__borderThickness); background: var(--hsElevate--form__backgroundColor); } /* Form labels */ :is(.hs-form, .hs-elevate-system-form) label, .hs-elevate-system-form--subscription-preferences .fakelabel { display: block; color: var(--hsElevate--formLabel__textColor); font-family: var(--hsElevate--formLabel__font); font-size: var(--hsElevate--formLabel__fontSize); font-weight: var(--hsElevate--formLabel__fontWeight); margin-block-end: var(--hsElevate--formLabel__marginBottom); } /* Form fields */ .hs-form .hs-form-field { margin-block-end: var(--hsElevate--formField__marginBottom); } :is(.hs-form, .hs-elevate-system-form) input[type='text'], :is(.hs-form, .hs-elevate-system-form) input[type='email'], :is(.hs-form, .hs-elevate-system-form) input[type='password'], :is(.hs-form, .hs-elevate-system-form) input[type='tel'], :is(.hs-form, .hs-elevate-system-form) input[type='number'], :is(.hs-form, .hs-elevate-system-form) input[type='search'], :is(.hs-form, .hs-elevate-system-form) select, :is(.hs-form, .hs-elevate-system-form) textarea { width: 100% !important; border-radius: var(--hsElevate--formField__borderRadius); border-top: var(--hsElevate--formField__borderTop); border-right: var(--hsElevate--formField__borderRight); border-bottom: var(--hsElevate--formField__borderBottom); border-left: var(--hsElevate--formField__borderLeft); background-color: var(--hsElevate--formField__backgroundColor); color: var(--hsElevate--formFieldInput__textColor); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--32); } .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100% !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; /* matches column margins from form injection */ } .hs-input.hs-fieldtype-intl-phone > input { flex: 1 0 calc(70% - 8px) !important; } .hs-input.hs-fieldtype-intl-phone > select { flex: 1 0 30% !important; } @media (max-width: 600px) { .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100%; flex-direction: column; gap: 8px; } .hs-input.hs-fieldtype-intl-phone > select, .hs-input.hs-fieldtype-intl-phone > input { min-width: 100%; flex: 1 1 100%; } .hs-input.hs-fieldtype-intl-phone > select { padding-inline: var(--hsElevate--spacing--16); } } .hs-form-field.hs-fieldtype-file .hs-input, .hs-form fieldset { max-width: 100% !important; } /* Form fields - textarea */ .hs-form textarea { position: relative; height: 160px; border-radius: var(--hsElevate--formFieldTextArea__borderRadius); } .hs-form textarea::-webkit-resizer { display: none; } .hs-form .hs_multi_line_field .input { position: relative; } .hs-form .hs_multi_line_field .input:after { position: absolute; right: var(--hsElevate--spacing--8); bottom: var(--hsElevate--spacing--8); content: var(--hsElevate--formField__dragIcon); pointer-events: none; } /* Form fields - select */ .hs-form .hs-fieldtype-select .input { position: relative; } .hs-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .hs-form .hs-fieldtype-select .input:after { position: absolute; top: 50%; right: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__selectIcon); pointer-events: none; transform: translateY(-50%); } /* Form fields - datepicker */ .hs-form .hs-dateinput { position: relative; } .hs-form .hs-dateinput:before { position: absolute; top: 50%; right: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__datepickerIcon); pointer-events: none; transform: translateY(-50%); } /* Form fields - placeholders */ ::-moz-placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } ::placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } /* Form fields - checkbox/radio */ .hs-form .inputs-list { padding: 0; margin: 0; list-style: none; } .hs-form .inputs-list li { display: block; margin-block-end: var(--hsElevate--spacing--16); } .hs-form .inputs-list li:last-of-type { margin-block-end: 0; } .hs-form .inputs-list :is(input, span) { vertical-align: middle; } :is(.hs-form, .hs-elevate-system-form) input[type='checkbox'], :is(.hs-form, .hs-elevate-system-form) input[type='radio'] { height: var(--hsElevate--formFieldCheckboxRadio__size); width: var(--hsElevate--formFieldCheckboxRadio__size) !important; accent-color: var(--hsElevate--formFieldCheckboxRadio__fillColor); cursor: pointer; margin-inline-end: var(--hsElevate--spacing--12); } /* Form help text */ .hs-form legend { /* To do: figure out where we should pull this from */ color: var(--hsElevate--formHelpText__textColor); margin-block-end: var(--hsElevate--spacing--8); } /* Form rich text */ .hs-form .hs-richtext { color: var(--hsElevate--formLabel__textColor); } .hs-form .hs-richtext img { height: auto; max-width: 100% !important; } /* Form error messages */ .hs-form .hs-input.error { border-color: var(--hsElevate--formRequired__color); } .hs-form .hs-error-msg, .hs-form .hs-error-msgs { color: var(--hsElevate--formRequired__color); margin-block-start: var(--hsElevate--spacing--4); } /* Form button */ :is(.hs-form, .hs-elevate-system-form) .hs-button, :is(.hs-form, .hs-elevate-system-form) input[type='submit'] { display: inline-block; width: 100%; border-color: var(--hsElevate--button--primary__borderColor); border-radius: var(--hsElevate--button--primary__borderRadius); border-style: solid; border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); color: var(--hsElevate--button--primary__textColor); cursor: pointer; font-family: var(--hsElevate--button--primary__font); font-size: var(--hsElevate--button--primary__fontSize); font-style: var(--hsElevate--button--primary__fontStyle); font-weight: var(--hsElevate--button--primary__fontWeight); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--24); text-align: center; text-decoration: none; transition: all 0.15s linear; white-space: normal !important; } :is(.hs-form, .hs-elevate-system-form) .hs-button:hover, :is(.hs-form, .hs-elevate-system-form) .hs-button:focus, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:hover, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:focus { border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); background-color: var(--hsElevate--button--primary__hover--backgroundColor); color: var(--hsElevate--button--primary__hover--textColor); text-decoration: none; } /* Captcha */ .grecaptcha-badge { margin-block: 0; margin-inline: auto; } /* Components */ /* Navigation skipper */ .hs-elevate-header__skip { position: absolute; top: -1000px; left: -1000px; overflow: hidden; height: 1px; width: 1px; text-align: left; } .hs-elevate-header__skip:hover, .hs-elevate-header__skip:focus, .hs-elevate-header__skip:active { z-index: 2; top: 0; left: 0; overflow: visible; height: auto; width: auto; } /* TODO: Move this code to the MenuComponent styled-component code -- keeping it here to prevent conflicts with open Menu PRs TODO: Remove this file and its references from main.hubl.css */ @media (max-width: 767px) { .hs-elevate-footer .hs-elevate-menu { display: flex; flex-direction: column; align-items: center; } } /* Spacing variables are: --hsElevate--menuItem__padding --hsElevate--menuItem__margin --hsElevate--menu--topLevel__gap --hsElevate--flyoutSubMenu__top --hsElevate--flyoutSubMenu__left --hsElevate--flyoutSubMenu__right --hsElevate--flyoutSubMenu__bottom --hsElevate--firstFlyoutMenu__top --hsElevate--firstFlyoutMenu__left --hsElevate--firstFlyoutMenu__right --hsElevate--firstFlyoutMenu__bottom */ .hs-elevate-menu { display: flex; } .hs-elevate-menu, .hs-elevate-menu ul { list-style: none; } .hs-elevate-menu li { position: relative; } .hs-elevate-menu--horizontal { flex-direction: row; flex-wrap: wrap; } .hs-elevate-menu--vertical { flex-direction: column; } .hs-elevate-menu { gap: var(--hsElevate--menu--topLevel__gap, 0); } .hs-elevate-menu--desktop { margin: 0; } .hs-elevate-menu__flyout-submenu { min-width: -moz-max-content; min-width: max-content; max-width: 250px; white-space: nowrap; overflow-wrap: break-word; padding: 20px; border: 1px solid #f7f7f7; border-radius: 8px; background-color: white; } .logo-company-name { margin-block: 0; } /* Offsets margin on ul element inside default image grid */ .hs-image__grid__list { margin-block: 0; } /* Logo responsive styling */ .widget-type-logo img { height: auto; max-width: 100%; } /* ==================================================================== SPECTAGE GLOBALS - shared button system + utility classes. Loaded after element/component CSS, available on all templates. ==================================================================== */ /* ----- Spectage Button system ----- */ .spectage-btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: 10px; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; border: 0; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; } .spectage-btn .arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .spectage-btn:hover .arrow { transform: translateX(4px); } .spectage-btn:focus-visible { outline: 3px solid #21C2FF; outline-offset: 3px; } /* Primary - dark gradient */ .spectage-btn--primary { color: #FFFFFF; background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%); box-shadow: 0 8px 20px rgba(10, 10, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .spectage-btn--primary:hover { transform: translateY(-2px); color: #FFFFFF; box-shadow: 0 14px 32px rgba(10, 10, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .spectage-btn--primary:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(10, 10, 10, 0.22); } /* Orange - gradient with glow */ .spectage-btn--orange { color: #FFFFFF; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .spectage-btn--orange:hover { transform: translateY(-2px); color: #FFFFFF; box-shadow: 0 14px 32px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* Blue link */ .spectage-btn--link-blue { display: inline-flex; align-items: center; gap: 6px; color: #0087FF; font-weight: 600; font-size: 15px; text-decoration: none; padding: 12px 8px; background: transparent; border: 0; cursor: pointer; } .spectage-btn--link-blue:hover { color: #21C2FF; text-decoration: underline; } /* Ghost - white outline */ .spectage-btn--ghost { background: rgba(255, 255, 255, 0.06); color: inherit; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); } .spectage-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* ----- Utility: cream section with grain texture ----- */ .spectage-cream { background-color: #FAF7F2; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 80px, transparent calc(100% - 80px), rgba(255, 255, 255, 0.6) 100%), url("data:image/svg+xml;utf8,"); } /* ----- Utility: focus-visible accent ----- */ a:focus-visible, button:focus-visible { outline: 3px solid #21C2FF; outline-offset: 2px; border-radius: 4px; } /* ----- Tools marquee ----- */ .tools-marquee { background: #FFFFFF; padding: 64px 0; overflow: hidden; border-block: 1px solid #E5E7EB; } .tools-marquee__inner { max-width: 100%; } .tools-marquee__label { display: block; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: #6B7280; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 32px; } .tools-marquee__track { display: flex; gap: 0; width: -moz-max-content; width: max-content; animation: spectage-marquee 40s linear infinite; } .tools-marquee__row { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; } .tools-marquee__row li { flex-shrink: 0; padding: 0 32px; border-right: 1px solid #E5E7EB; } .tools-marquee__row li:last-child { border-right: 0; } .tools-marquee__row span { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #6B7280; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; } .tools-marquee__row span[data-tool="hubspot"] { color: #FF7A59; } .tools-marquee__row span[data-tool="make"] { color: #6D5BBA; } .tools-marquee__row span[data-tool="stripe"] { color: #635BFF; } .tools-marquee__row span[data-tool="fakturownia"] { color: #00B0FF; } .tools-marquee__row span[data-tool="ksef"] { color: #1A2635; } .tools-marquee__row span[data-tool="symfonia"] { color: #00A651; } .tools-marquee__row span[data-tool="asana"] { color: #F06A6A; } .tools-marquee__row span[data-tool="slack"] { color: #4A154B; } .tools-marquee__row span[data-tool="magento"] { color: #EE672F; } .tools-marquee__row span { filter: grayscale(0.6); opacity: 0.7; } .tools-marquee__row li:hover span { filter: grayscale(0); opacity: 1; transform: translateY(-2px); } @keyframes spectage-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pause animation on hover for readability */ .tools-marquee:hover .tools-marquee__track { animation-play-state: paused; } /* ----- Reduced motion guard for global utilities ----- */ @media (prefers-reduced-motion: reduce) { .spectage-btn, .spectage-btn .arrow { transition: none; } .spectage-btn:hover { transform: none; } .tools-marquee__track { animation: none; } } /* ============================================================ Spectage local-preview shared design system Vercel + HubSpot direction (locked from Sprint 11) ============================================================ */ body { font-family: 'Inter', system-ui, sans-serif; background: #FFFFFF; color: #0A0A0A; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ----- Hero backgrounds ---------------------------------- */ .hero-bg { background-color: #FAF7F2; background-image: linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 80px, transparent calc(100% - 80px), rgba(255,255,255,.4) 100%), url("data:image/svg+xml;utf8,"); } .hero-grid::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: linear-gradient(to bottom, white 30%, transparent 90%); mask-image: linear-gradient(to bottom, white 30%, transparent 90%); } .blob-orange { position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, #F97316 0%, #FB923C 40%, transparent 70%); opacity: .45; filter: blur(40px); animation: blob-drift-a 22s ease-in-out infinite; will-change: transform; } .blob-orange-sm { position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, #F97316 0%, #FB923C 40%, transparent 70%); opacity: .35; filter: blur(40px); animation: blob-drift-a 24s ease-in-out infinite; will-change: transform; } .blob-blue { position: absolute; bottom: -200px; left: -100px; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, #0087FF 0%, #21C2FF 40%, transparent 70%); opacity: .22; filter: blur(50px); animation: blob-drift-b 26s ease-in-out infinite; will-change: transform; } .blob-blue-sm { position: absolute; bottom: -120px; left: -60px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, #0087FF 0%, #21C2FF 40%, transparent 70%); opacity: .2; filter: blur(40px); animation: blob-drift-b 28s ease-in-out infinite; will-change: transform; } @keyframes blob-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(28px, -22px) scale(1.05); } 66% { transform: translate(-22px, 30px) scale(0.95); } } @keyframes blob-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-30px, 20px) scale(0.95); } 66% { transform: translate(24px, -28px) scale(1.05); } } /* ----- Headline marker (rotated highlight on key word) ----- */ .marker { background: #F97316; color: #fff; padding: 0 14px; display: inline-block; transform: rotate(-1deg); } /* ----- Buttons ---------------------------------- */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; text-decoration: none; background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%); box-shadow: 0 8px 20px rgba(10,10,10,.18), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; border: none; cursor: pointer; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(10,10,10,.28), inset 0 1px 0 rgba(255,255,255,.08); color: #fff; } .btn-primary:active { transform: translateY(0); } .btn-primary .arrow { transition: transform .25s cubic-bezier(.2,.8,.2,1); } .btn-primary:hover .arrow { transform: translateX(4px); } .btn-orange { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; text-decoration: none; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); box-shadow: 0 8px 20px rgba(249,115,22,.45), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; border: none; cursor: pointer; } .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(249,115,22,.55); color: #fff; } .btn-orange .arrow { transition: transform .25s; } .btn-orange:hover .arrow { transform: translateX(4px); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: 10px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); transition: background .2s, transform .2s; } .btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); color: #fff; } .btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; color: #0A0A0A; text-decoration: none; background: #FFFFFF; border: 1.5px solid rgba(10,10,10,.12); transition: border-color .2s, transform .2s, box-shadow .2s; } .btn-outline:hover { border-color: rgba(10,10,10,.32); transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(10,10,10,.08); } .btn-outline .arrow { transition: transform .25s; } .btn-outline:hover .arrow { transform: translateX(4px); } .btn-link-blue { display: inline-flex; align-items: center; gap: 6px; color: #0087FF; font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s; } .btn-link-blue:hover { color: #21C2FF; text-decoration: underline; } .btn-link-blue .arrow { transition: transform .25s; } .btn-link-blue:hover .arrow { transform: translateX(3px); } /* ----- Mega menu --------------------------------------- */ .mega-trigger > a, .mega-trigger > button { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; color: #0A0A0A; } .mega-trigger[data-active="true"] .mega-chevron { transform: rotate(180deg); } .mega-panel-container { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; box-shadow: 0 16px 40px -12px rgba(10,10,10,.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; overflow: hidden; } .mega-panel-container[data-active="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .mega-panel { display: none; } .mega-panel[data-active="true"] { display: block; } .mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background .15s ease; } .mega-link:hover { background: #FAF7F2; } .mega-link-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #F3F4F6; color: #0A0A0A; transition: background .15s ease, color .15s ease; } .mega-link:hover .mega-link-icon { background: #FAF7F2; color: #F97316; } .mega-link-simple { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background .15s ease; } .mega-link-simple:hover { background: #FAF7F2; } .mega-link-simple:hover .text-ink { color: #0087FF; } .mega-link-icon-slot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #FAF7F2; color: #0A0A0A; flex-shrink: 0; transition: background .15s ease, color .15s ease; } .mega-link-simple:hover .mega-link-icon-slot { background: rgba(0, 135, 255, .10); color: #0087FF; } @media (max-width: 768px) { .mega-panel-container { display: none !important; } .mega-trigger .mega-chevron { display: none; } } /* ----- Eyebrow pill ---------------------------------- */ .eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px; background: #fff; color: #1A2635; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .eyebrow-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #0087FF; flex-shrink: 0; animation: dot-pulse-ring 2s ease-out infinite; } @keyframes dot-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0,135,255,.7), 0 0 8px rgba(0,135,255,.6); } 100% { box-shadow: 0 0 0 12px rgba(0,135,255,0), 0 0 8px rgba(0,135,255,.6); } } .eyebrow-pill--orange::before { background: #F97316; box-shadow: 0 0 8px rgba(249,115,22,.5); } /* Pulsing orange dot (used by sticky CTA bar to grab attention) */ .sticky-cta-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F97316; flex-shrink: 0; animation: dot-pulse-orange 1.8s ease-out infinite; } @keyframes dot-pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(249,115,22,.7), 0 0 10px rgba(249,115,22,.55); } 100% { box-shadow: 0 0 0 14px rgba(249,115,22,0), 0 0 10px rgba(249,115,22,.55); } } .eyebrow-pill--ink { background: rgba(10,10,10,.04); border-color: rgba(10,10,10,.06); } /* Mono caption (used as small kicker above section headings) */ .mono-caption { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; } .mono-caption::before { content: ''; display: inline-block; width: 32px; height: 1px; background: #D1D5DB; margin-right: 14px; } /* ----- Marquee ---------------------------------- */ .marquee { overflow: hidden; } .marquee-track { display: flex; width: -moz-max-content; width: max-content; gap: 0; animation: marquee 40s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Marquee logos: grayscale by default, brand color on hover */ .marquee-logo { height: 28px; width: auto; filter: grayscale(1); opacity: 0.45; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .marquee-logo:hover { filter: grayscale(0); opacity: 1; transform: scale(1.05); } /* Marquee text-mark fallback (for brands without SVG icons) */ .marquee-text { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #9CA3AF; transition: color .25s ease, opacity .25s ease, transform .25s ease; opacity: 0.55; white-space: nowrap; } .marquee-text:hover { opacity: 1; transform: scale(1.03); } .marquee-text--fakturownia:hover { color: #00B0FF; } .marquee-text--gus:hover { color: #C8102E; } .marquee-text--surfe:hover { color: #2C8CFF; } /* ----- Cards ---------------------------------- */ .service-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -8px rgba(10,10,10,.10); border-color: rgba(10,10,10,.14); } .service-card:hover .icon-badge { transform: scale(1.06); } .service-card:hover .arrow-link { transform: translateX(4px); } .bento-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; } .bento-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(10,10,10,.08); } .icon-badge { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .arrow-link { transition: transform .25s cubic-bezier(.2,.8,.2,1); } /* ----- Process step ---------------------------------- */ .process-step:hover .step-badge { background: #F97316; color: #fff; box-shadow: 0 8px 20px -4px rgba(249,115,22,.4); transform: scale(1.06); } .step-badge { transition: background .3s, color .3s, transform .3s, box-shadow .3s; } /* ----- Pulse dot ---------------------------------- */ .pulse-ring { position: relative; } .pulse-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .4; animation: pulse-soft 2.4s ease-out infinite; } @keyframes pulse-soft { 0% { transform: scale(1); opacity: .4; } 100% { transform: scale(2.4); opacity: 0; } } /* ----- FAQ accordion ---------------------------------- */ details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; } details[open] .faq-icon { transform: rotate(45deg); } .faq-icon { transition: transform .3s ease; } /* ----- Reveal on scroll ---------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s; } [data-reveal].is-in { opacity: 1; transform: translateY(0); } /* ----- Sticky navbar ---------------------------------- */ .navbar-scrolled { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(10,10,10,.08); } /* ----- Form inputs ---------------------------------- */ .input { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1.5px solid #E5E7EB; background: #FFFFFF; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: #0A0A0A; transition: border-color .2s, box-shadow .2s; } .input:focus { outline: none; border-color: #0087FF; box-shadow: 0 0 0 3px rgba(0,135,255,.12); } .input::-moz-placeholder { color: #9CA3AF; } .input::placeholder { color: #9CA3AF; } textarea.input { min-height: 140px; resize: vertical; } .input-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4A5568; margin-bottom: 6px; } /* ----- Article typography (blog detail) ---------------------------------- */ .prose-spectage { font-family: 'Inter', system-ui, sans-serif; color: #1F2937; line-height: 1.75; font-size: 18px; } .prose-spectage h2 { font-size: clamp(28px, 3.5vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #0A0A0A; margin: 56px 0 20px; position: relative; padding-left: 22px; } .prose-spectage h2::before { content: ''; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 2px; background: #F97316; box-shadow: 0 0 0 4px rgba(249,115,22,0.12); } .prose-spectage h3 { font-size: 22px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; color: #0A0A0A; margin: 36px 0 12px; } .prose-spectage p { margin: 0 0 24px; } .prose-spectage a { color: #0087FF; text-decoration: underline; text-underline-offset: 3px; } .prose-spectage a:hover { color: #21C2FF; } .prose-spectage ul, .prose-spectage ol { margin: 0 0 24px; padding-left: 24px; } .prose-spectage li { margin-bottom: 8px; } .prose-spectage blockquote { margin: 32px 0; padding: 20px 24px; border-left: 4px solid #F97316; background: #FFF7ED; border-radius: 0 12px 12px 0; font-size: 19px; font-style: normal; color: #1F2937; } .prose-spectage code { background: #F3F4F6; border-radius: 4px; padding: 2px 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; color: #0A0A0A; } .prose-spectage pre { background: #0A0A0A; color: #E5E7EB; border-radius: 12px; padding: 20px 24px; overflow-x: auto; margin: 24px 0; font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; } .prose-spectage pre code { background: transparent; padding: 0; color: inherit; } .prose-spectage img { max-width: 100%; border-radius: 12px; margin: 24px 0; } .prose-spectage hr { margin: 48px 0; border: 0; border-top: 1px solid #E5E7EB; } /* ----- Inline CTA card (overrides prose-spectage) ------ */ .prose-spectage .inline-cta h4 { font-size: clamp(20px, 2.5vw, 26px); margin: 0 0 12px; line-height: 1.25; } .prose-spectage .inline-cta p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; } .prose-spectage .inline-cta a { text-decoration: none; } .prose-spectage .inline-cta a:hover { color: inherit; } .prose-spectage .inline-cta a[href*="contact"]:hover { color: #21C2FF; } /* ----- TOC scrollspy ---------------------------------- */ .prose-toc a { display: block; padding: 4px 0; color: #4B5563; transition: color .2s ease, padding-left .2s ease; position: relative; } .prose-toc a:hover { color: #0087FF; } .prose-toc a.toc-active { color: #0087FF; font-weight: 600; } .prose-toc a.toc-active::before { content: ''; position: absolute; left: -18px; top: 0; bottom: 0; width: 2px; background: #0087FF; border-radius: 2px; } /* ----- Microinteractions ---------------------------------- */ /* Hub platform cards — subtle hover lift (currently flat) */ .hub-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; } .hub-card:hover { transform: translateY(-3px); border-color: rgba(10,10,10,.18); box-shadow: 0 8px 24px -8px rgba(10,10,10,.08); } .hub-card img { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .hub-card:hover img { transform: scale(1.04); } /* Brand-dot pulse — for the small orange/blue dots used as eyebrow indicators */ .brand-dot-pulse { position: relative; } .brand-dot-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: dot-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes dot-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } } /* Hero marker — subtle hover wiggle (re-asserts the rotation as a micro response) */ .marker { transition: transform .25s cubic-bezier(.34, 1.56, 0.64, 1); } h1:hover .marker, h2:hover .marker, h3:hover .marker { transform: rotate(-2.5deg) scale(1.02); } /* Service card pictograms — gently float on hover */ .service-card img { transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .service-card:hover img { transform: scale(1.06) translateY(-2px); } /* Marquee logos — already have grayscale + scale on hover; add slight rotation tick */ .marquee-logo:hover { transform: scale(1.05) rotate(-1deg); } /* "Something else?" dashed CTA card — subtle border breathe */ .cta-dashed { position: relative; } .cta-dashed::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px dashed rgba(249, 115, 22, .35); pointer-events: none; animation: dashed-breathe 3.5s ease-in-out infinite; } @keyframes dashed-breathe { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .65; transform: scale(1.005); } } /* Process step number badges — entry tick on reveal */ .step-badge { transition: background .3s, color .3s, transform .3s cubic-bezier(.34, 1.56, 0.64, 1), box-shadow .3s; } [data-reveal].is-in .step-badge { animation: badge-pop .55s cubic-bezier(.34, 1.56, 0.64, 1); } @keyframes badge-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } /* Arrow tick on button hover (already exists for .arrow but enhance) */ .btn-primary:hover .arrow, .btn-orange:hover .arrow, .btn-outline:hover .arrow, .btn-ghost:hover .arrow, .btn-link-blue:hover .arrow { animation: arrow-nudge .3s ease-out; } @keyframes arrow-nudge { 0% { transform: translateX(0); } 60% { transform: translateX(6px); } 100% { transform: translateX(4px); } } /* ----- Contact split hero ---------------------------- */ .contact-split-grid { display: grid; grid-template-columns: 1fr; grid-gap: 48px; gap: 48px; } @media (min-width: 1024px) { .contact-split-grid { grid-template-columns: 5fr 7fr; gap: 56px; } } .spectage-form-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(229, 231, 235, .4); padding: 24px; } @media (min-width: 1024px) { .spectage-form-card { padding: 32px; } } /* HubSpot form inside the contact card. Resets the new embedded form's internal padding/borders so we control spacing from the outer card only. Also handles checkbox alignment and privacy-link inline placement. Targets both legacy `.hs-form` and modern embedded form markup. */ .spectage-form-card form, .spectage-form-card .hs_cos_wrapper_type_form, .spectage-form-card .hs_cos_wrapper_type_form > * { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .spectage-form-card form fieldset, .spectage-form-card .hs_cos_wrapper_type_form fieldset { all: unset; display: block; width: 100%; max-width: none; } /* Each field row */ .spectage-form-card form .hs-form-field, .spectage-form-card form .field, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-field { display: block !important; width: 100%; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 14px 0 !important; box-shadow: none !important; } .spectage-form-card form .input, .spectage-form-card .hs_cos_wrapper_type_form .input { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } /* Field label */ .spectage-form-card form label, .spectage-form-card .hs_cos_wrapper_type_form label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #525252; text-transform: uppercase; font-family: 'JetBrains Mono', ui-monospace, monospace; } /* Text-like inputs + select + textarea — only style these, not checkboxes/radios */ .spectage-form-card form input[type="text"], .spectage-form-card form input[type="email"], .spectage-form-card form input[type="tel"], .spectage-form-card form input[type="number"], .spectage-form-card form input[type="url"], .spectage-form-card form input[type="search"], .spectage-form-card form input[type="password"], .spectage-form-card form select, .spectage-form-card form textarea, .spectage-form-card .hs_cos_wrapper_type_form input[type="text"], .spectage-form-card .hs_cos_wrapper_type_form input[type="email"], .spectage-form-card .hs_cos_wrapper_type_form input[type="tel"], .spectage-form-card .hs_cos_wrapper_type_form input[type="number"], .spectage-form-card .hs_cos_wrapper_type_form input[type="url"], .spectage-form-card .hs_cos_wrapper_type_form input[type="search"], .spectage-form-card .hs_cos_wrapper_type_form input[type="password"], .spectage-form-card .hs_cos_wrapper_type_form select, .spectage-form-card .hs_cos_wrapper_type_form textarea { width: 100% !important; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid #E5E7EB !important; background: #FAF7F2 !important; font-size: 14px !important; color: #0A0A0A !important; font-family: inherit !important; margin: 0 !important; box-shadow: none !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .spectage-form-card form textarea, .spectage-form-card .hs_cos_wrapper_type_form textarea { min-height: 96px; resize: vertical; } .spectage-form-card form input:focus, .spectage-form-card form select:focus, .spectage-form-card form textarea:focus, .spectage-form-card .hs_cos_wrapper_type_form input:focus, .spectage-form-card .hs_cos_wrapper_type_form select:focus, .spectage-form-card .hs_cos_wrapper_type_form textarea:focus { outline: none !important; border-color: #0087FF !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(0, 135, 255, .12) !important; } /* Checkbox / radio rows: flex-align checkbox with text */ .spectage-form-card form .hs-form-booleancheckbox, .spectage-form-card form .hs-form-checkbox, .spectage-form-card form .hs-form-radio, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-booleancheckbox, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-checkbox, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-radio { list-style: none !important; padding: 0 !important; margin: 0 !important; } .spectage-form-card form .hs-form-booleancheckbox label, .spectage-form-card form .hs-form-checkbox label, .spectage-form-card form .hs-form-radio label, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-booleancheckbox label, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-checkbox label, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-radio label { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; color: #525252 !important; margin: 0 !important; cursor: pointer; } .spectage-form-card form input[type="checkbox"], .spectage-form-card form input[type="radio"], .spectage-form-card .hs_cos_wrapper_type_form input[type="checkbox"], .spectage-form-card .hs_cos_wrapper_type_form input[type="radio"] { width: 20px !important; height: 20px !important; margin: 1px 0 0 0 !important; padding: 0 !important; flex-shrink: 0; accent-color: #0087FF; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; border-radius: 4px !important; cursor: pointer; } .spectage-form-card form .hs-form-booleancheckbox label > span, .spectage-form-card form .hs-form-checkbox label > span, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-booleancheckbox label > span, .spectage-form-card .hs_cos_wrapper_type_form .hs-form-checkbox label > span { flex: 1; } /* Privacy / GDPR rich-text block — sits inline with consent, not on its own line */ .spectage-form-card form .legal-consent-container, .spectage-form-card .hs_cos_wrapper_type_form .legal-consent-container { margin-top: 16px !important; font-size: 13px !important; color: #525252 !important; } .spectage-form-card form .legal-consent-container p, .spectage-form-card .hs_cos_wrapper_type_form .legal-consent-container p { margin: 0 !important; font-size: 13px !important; font-family: inherit !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #525252 !important; line-height: 1.5 !important; } .spectage-form-card form .legal-consent-container a, .spectage-form-card .hs_cos_wrapper_type_form .legal-consent-container a { color: #0087FF !important; text-decoration: underline; } /* Error messages */ .spectage-form-card form .hs-error-msgs, .spectage-form-card .hs_cos_wrapper_type_form .hs-error-msgs { margin-top: 4px !important; list-style: none; padding-left: 0; font-size: 12px; color: #DC2626; } .spectage-form-card form .hs-error-msg, .spectage-form-card .hs_cos_wrapper_type_form .hs-error-msg { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; } /* Submit button → match btn-primary shape + microinteraction */ .spectage-form-card form .hs-button, .spectage-form-card form input[type="submit"], .spectage-form-card form button[type="submit"], .spectage-form-card .hs_cos_wrapper_type_form .hs-button, .spectage-form-card .hs_cos_wrapper_type_form input[type="submit"], .spectage-form-card .hs_cos_wrapper_type_form button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; width: 100% !important; margin-top: 16px !important; padding: 16px 28px !important; border-radius: 10px !important; border: none !important; cursor: pointer; font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: #FFFFFF !important; text-decoration: none; font-family: inherit !important; background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%) !important; box-shadow: 0 8px 20px rgba(10, 10, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .06) !important; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important; } .spectage-form-card form .hs-button:hover, .spectage-form-card form input[type="submit"]:hover, .spectage-form-card form button[type="submit"]:hover, .spectage-form-card .hs_cos_wrapper_type_form .hs-button:hover, .spectage-form-card .hs_cos_wrapper_type_form input[type="submit"]:hover, .spectage-form-card .hs_cos_wrapper_type_form button[type="submit"]:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(10, 10, 10, .28), inset 0 1px 0 rgba(255, 255, 255, .08) !important; } .spectage-form-card form .hs-button:active, .spectage-form-card form input[type="submit"]:active, .spectage-form-card form button[type="submit"]:active, .spectage-form-card .hs_cos_wrapper_type_form .hs-button:active, .spectage-form-card .hs_cos_wrapper_type_form input[type="submit"]:active, .spectage-form-card .hs_cos_wrapper_type_form button[type="submit"]:active { transform: translateY(0) !important; } /* Hide HubSpot's branded "Powered by" footer in the form */ .spectage-form-card form .hs-recaptcha, .spectage-form-card .hs_cos_wrapper_type_form .hs-recaptcha { margin-top: 8px; } /* ----- DnD form/meetings card wrapper ---------------- */ /* Restores rounded white card visual around @hubspot/form and @hubspot/meetings modules placed inside a dnd_section. */ .dnd-section .hs_cos_wrapper_type_form, .dnd-section .hs_cos_wrapper_type_widget_meetings, .dnd-section .meetings-iframe-container { background: #FFFFFF; border: 1px solid rgba(10, 10, 10, .06); border-radius: 24px; padding: 32px; display: block; } @media (min-width: 1024px) { .dnd-section .hs_cos_wrapper_type_form, .dnd-section .hs_cos_wrapper_type_widget_meetings, .dnd-section .meetings-iframe-container { padding: 40px; } } /* ----- Mobile nav drawer (SpectageHeader) -------------- */ /* Force visibility independent of Tailwind utility compilation. */ .spectage-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; } @media (min-width: 768px) { .spectage-mobile-toggle { display: none !important; } } .spectage-mobile-toggle__close { display: none; } .spectage-mobile-toggle.is-open .spectage-mobile-toggle__open { display: none; } .spectage-mobile-toggle.is-open .spectage-mobile-toggle__close { display: block; } .spectage-mobile-menu { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 60; display: block; } @media (min-width: 768px) { .spectage-mobile-menu { display: none !important; } } .spectage-mobile-menu.is-open { opacity: 1; visibility: visible; } .spectage-mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; background: #FFFFFF; padding: 0 24px 32px; display: flex; flex-direction: column; gap: 12px; transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -16px 0 40px -12px rgba(10, 10, 10, .15); } .spectage-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; border-bottom: 1px solid #F0F0F0; margin-bottom: 12px; position: sticky; top: 0; background: #FFFFFF; z-index: 1; } .spectage-mobile-menu__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #0A0A0A; text-decoration: none; } .spectage-mobile-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #E5E7EB; background: #FFFFFF; color: #0A0A0A; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .spectage-mobile-menu__close:hover { background: #FAF7F2; border-color: #D1D5DB; } .spectage-mobile-menu.is-open .spectage-mobile-menu__panel { transform: translateX(0); } .spectage-mobile-menu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; } .spectage-mobile-menu__link { display: block; padding: 12px 8px; font-size: 17px; font-weight: 700; color: #0A0A0A; border-bottom: 1px solid #F0F0F0; } .spectage-mobile-menu__link:hover { color: #0087FF; } .spectage-mobile-menu__sublist { list-style: none; padding: 4px 0 12px 16px; margin: 0; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid #F0F0F0; } .spectage-mobile-menu__sublink { display: block; padding: 8px 8px; font-size: 14px; font-weight: 500; color: #525252; } .spectage-mobile-menu__sublink:hover { color: #0087FF; } .spectage-mobile-menu__cta { margin-top: auto; } html.spectage-nav-locked, html.spectage-nav-locked body { overflow: hidden; } /* ----- Animated checkmark hero (lp-thank-you) ---------- */ @keyframes spectage-check-draw { to { stroke-dashoffset: 0; } } @keyframes spectage-check-ring { 0% { transform: scale(0.85); opacity: 0.65; } 80% { transform: scale(1.65); opacity: 0; } 100% { transform: scale(1.65); opacity: 0; } } /* Centered hero variant - overrides CSS-module default text/btn alignment. Class hashes from HeroSpectage CSS module are matched via [class*="..."] */ .spectage-hero-checkmark, .spectage-hero-checkmark p, .spectage-hero-checkmark [class*="subheadline"] { text-align: center !important; } .spectage-hero-checkmark [class*="subheadline"] { margin-left: auto !important; margin-right: auto !important; } .spectage-hero-checkmark [class*="btnRow"] { justify-content: center !important; align-items: center !important; } .spectage-hero-checkmark [class*="eyebrow"] { margin-left: auto !important; margin-right: auto !important; } /* ----- @hubspot/search_input -------------------------- */ /* The default search widget renders unstyled. Brand it like a Spectage form: cream-tinted pill input + dark submit-style button. Force horizontal layout because some HubSpot search variants render the form vertically by default. */ .hs-search-field, .hs_cos_wrapper_type_search_input { width: 100%; display: block; } .hs_cos_wrapper_type_search_input form, .hs-search-field form, .hs-search-field__bar, .hs-search-field__bar form { display: flex !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; } .hs-search-field__input { flex: 1 1 auto !important; width: 100% !important; height: auto !important; padding: 14px 18px !important; border-radius: 12px !important; border: 1px solid #E5E7EB !important; background: #FAF7F2 !important; font-size: 15px !important; font-family: inherit !important; color: #0A0A0A !important; outline: none !important; box-shadow: none !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .hs-search-field__input::-moz-placeholder { color: #9CA3AF !important; opacity: 1; } .hs-search-field__input::placeholder { color: #9CA3AF !important; opacity: 1; } .hs-search-field__input:focus { border-color: #0087FF !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(0, 135, 255, .12) !important; } .hs-search-field__button { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 52px; padding: 0 18px !important; height: auto !important; border-radius: 12px !important; border: none !important; cursor: pointer; background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%) !important; color: #FFFFFF !important; font-weight: 700 !important; font-family: inherit !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 0 8px 20px rgba(10, 10, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .06) !important; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important; } .hs-search-field__button:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(10, 10, 10, .28), inset 0 1px 0 rgba(255, 255, 255, .08) !important; } .hs-search-field__button:active { transform: translateY(0) !important; } .hs-search-field__button svg { width: 18px; height: 18px; fill: currentColor; } .hs-search-field__suggestions { margin-top: 8px !important; padding: 8px !important; list-style: none; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 16px 40px rgba(10, 10, 10, .08); max-height: 320px; overflow-y: auto; } .hs-search-field__suggestions li { margin: 0; padding: 0; } .hs-search-field__suggestions li a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: #0A0A0A; text-decoration: none; transition: background .15s ease; } .hs-search-field__suggestions li a:hover, .hs-search-field__suggestions li.results-for { background: #FAF7F2; color: #0087FF; } /* ----- Blog social-sharing module: restyle HubSpot's @hubspot/social_sharing into pill buttons --- */ .spectage-share-buttons .hs_cos_wrapper_type_social_sharing, .spectage-share-buttons .hs_cos_wrapper_widget_type_social_sharing, .spectage-share-buttons .hs_cos_wrapper_widget.hs_cos_wrapper_type_module { display: inline-flex !important; align-items: center; gap: 8px; font-size: 0; } .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 8px; border: 1px solid #E5E7EB; background: transparent; transition: border-color .15s ease; text-decoration: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a:hover { border-color: rgba(10, 10, 10, 0.4); } /* Hide HubSpot's colored PNG icons; we render monochrome SVGs via ::before */ .spectage-share-buttons .hs_cos_wrapper_type_social_sharing img, .spectage-share-buttons img.hs-image-social-sharing-24, .spectage-share-buttons img.hs-image-widget { display: none !important; } /* LinkedIn */ .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a[href*="linkedin.com"]::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } /* X / Twitter */ .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a[href*="twitter.com"]::before, .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a[href*="x.com"]::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } /* Facebook */ .spectage-share-buttons .hs_cos_wrapper_type_social_sharing > a[href*="facebook.com"]::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } /* ----- Reduced motion ---------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-reveal], .service-card, .bento-card, .step-badge, .arrow, .marquee-track, .pulse-ring::before, .blob-orange, .blob-orange-sm, .blob-blue, .blob-blue-sm, .brand-dot-pulse::after, .eyebrow-pill::before, .cta-dashed::before, .hub-card, .marker, .marquee-logo, .service-card img, .hub-card img, .sticky-cta-dot { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } } /* Template-specific */ /* ==================================================================== SPECTAGE BLOG POST - editorial layout, modern reading experience. Used by templates/spectage/blog-detail.hubl.html ==================================================================== */ /* ----- Reading progress bar (sticky top) ----- */ .post-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; background: transparent; pointer-events: none; } .post-progress__bar { height: 100%; background: linear-gradient(90deg, #F97316 0%, #0087FF 100%); transform-origin: 0 50%; transform: scaleX(var(--scroll-progress, 0)); transition: transform 0.05s linear; } /* CSS scroll-driven animation when supported */ @supports (animation-timeline: scroll()) { .post-progress__bar { transform: scaleX(0); animation: scroll-progress linear; animation-timeline: scroll(root); } @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ----- Article wrapper ----- */ .spectage-post { background: #FFFFFF; } /* ----- Hero header ----- */ .post-header { position: relative; background: #FAF7F2; padding: 80px 24px 64px; overflow: hidden; } .post-header__blob { position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, #F97316 0%, #FB923C 40%, transparent 70%); opacity: 0.35; filter: blur(40px); z-index: 0; pointer-events: none; } .post-header__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; } /* ----- Breadcrumbs ----- */ .post-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; } .post-breadcrumbs a { color: #0087FF; text-decoration: none; transition: color 0.2s; } .post-breadcrumbs a:hover { color: #21C2FF; text-decoration: underline; } .post-breadcrumbs .current { color: #6B7280; } /* ----- Post title ----- */ .post-title { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 56px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; color: #0A0A0A; margin: 0 0 24px 0; } .post-summary { font-size: 20px; line-height: 1.55; color: #4A4A4A; margin: 0; font-family: 'Inter', system-ui, sans-serif; } /* ----- Post meta row ----- */ .post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #6B7280; letter-spacing: 0.04em; margin-top: 28px; } .post-meta a { color: #0087FF; text-decoration: none; } .post-meta a:hover { text-decoration: underline; } .post-meta__author { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-family: 'Inter', sans-serif; font-size: 14px; color: #0A0A0A; } .post-meta__author img { width: 40px; height: 40px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; filter: grayscale(1); } /* ----- Featured image ----- */ .post-featured { max-width: 1200px; margin: -32px auto 0; padding: 0 24px; position: relative; z-index: 2; } .post-featured img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 24px 60px -16px rgba(10, 10, 10, 0.2); } /* ----- Share buttons ----- */ .post-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 720px; margin: 0 auto; padding: 24px; font-family: 'Inter', sans-serif; } .post-share__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.12em; text-transform: uppercase; } .post-share a, .post-share button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #FFFFFF; border: 1px solid #E5E7EB; color: #0A0A0A; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .post-share a:hover, .post-share button:hover { background: #0087FF; border-color: #0087FF; color: #FFFFFF; transform: translateY(-2px); } .post-share__copy { width: auto !important; padding: 0 14px; font-size: 12px !important; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; } @media (min-width: 1100px) { .post-share { position: fixed; top: 50%; left: 24px; transform: translateY(-50%); flex-direction: column; gap: 8px; padding: 0; background: transparent; z-index: 50; } .post-share__label { writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 8px; } } /* ----- Reading column content ----- */ .spectage-post__content { max-width: 720px; margin: 0 auto; padding: 64px 24px; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 18px; line-height: 1.7; color: #1A2635; } /* Drop cap */ .spectage-post__content > p:first-of-type::first-letter { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 5.2em; float: left; line-height: 0.85; margin: 0.05em 0.12em 0 0; color: #F97316; letter-spacing: -0.04em; } .spectage-post__content h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: #0A0A0A; margin: 64px 0 24px; } .spectage-post__content h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: #0A0A0A; margin: 48px 0 16px; } .spectage-post__content p { margin: 0 0 24px; } .spectage-post__content a { color: #0087FF; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s; } .spectage-post__content a:hover { color: #21C2FF; text-decoration-thickness: 2px; } /* Pull quote - oversized italic with decorative " */ .spectage-post__content blockquote { position: relative; border: 0; padding: 32px 0 32px 8px; margin: 56px 0; font-family: 'Inter', sans-serif; font-size: 32px; font-style: italic; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: #0A0A0A; } .spectage-post__content blockquote::before { content: '"'; position: absolute; left: -16px; top: -32px; font-family: Georgia, serif; font-size: 140px; color: #F97316; opacity: 0.18; line-height: 1; pointer-events: none; } .spectage-post__content blockquote p { margin: 0; } /* Inline code */ .spectage-post__content code { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%); color: #C2410C; padding: 2px 8px; border-radius: 4px; border: 1px solid #FED7AA; } /* Code block */ .spectage-post__content pre { position: relative; font-family: 'JetBrains Mono', monospace; background: linear-gradient(180deg, #0F1419 0%, #0A0A0A 100%); color: #FAFAFA; padding: 48px 24px 24px; border: 1px solid #1F1F1F; border-radius: 12px; overflow-x: auto; margin: 32px 0; font-size: 14px; line-height: 1.6; box-shadow: 0 16px 40px -8px rgba(10, 10, 10, 0.4); } .spectage-post__content pre::before { content: 'CODE'; position: absolute; top: 14px; left: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #6B7280; letter-spacing: 0.12em; text-transform: uppercase; } .spectage-post__content pre::after { content: ''; position: absolute; top: 16px; right: 24px; width: 48px; height: 8px; background: radial-gradient(circle 4px, rgba(249, 115, 22, 0.6) 50%, transparent 51%) 0 0 / 16px 8px repeat-x; } .spectage-post__content pre code { background: transparent; color: inherit; padding: 0; border: 0; font-size: inherit; } .spectage-post__content ul, .spectage-post__content ol { margin: 0 0 24px; padding-left: 28px; } .spectage-post__content li { margin: 0 0 12px; } .spectage-post__content img { max-width: 100%; height: auto; border-radius: 8px; margin: 32px 0; } /* ----- Author bio block ----- */ .post-author { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; display: flex; gap: 24px; align-items: flex-start; } .post-author img { width: 80px; height: 80px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; filter: grayscale(1); flex-shrink: 0; box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12); } .post-author__label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #6B7280; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .post-author h3 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: #0A0A0A; margin: 0 0 8px 0; } .post-author p { font-size: 15px; line-height: 1.6; color: #4A4A4A; margin: 0; } /* ----- Related posts ----- */ .post-related { background: #FAF7F2; padding: 96px 24px; } .post-related__inner { max-width: 1200px; margin: 0 auto; } .post-related__heading { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -0.03em; color: #0A0A0A; margin: 0 0 48px 0; } .post-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-gap: 24px; gap: 24px; } .post-related__card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: #0A0A0A; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .post-related__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10, 10, 10, 0.08); border-color: #0087FF; text-decoration: none; } .post-related__date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.08em; text-transform: uppercase; } .post-related__title { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; margin: 0; } .post-related__cta { margin-top: auto; color: #0087FF; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; } .post-related__cta span { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .post-related__card:hover .post-related__cta { color: #21C2FF; } .post-related__card:hover .post-related__cta span { transform: translateX(4px); } /* ----- Table of Contents (built by JS, only desktop) ----- */ .post-toc { display: none; } @media (min-width: 1280px) { .post-toc { display: block; position: fixed; top: 120px; right: 32px; max-width: 240px; font-family: 'Inter', sans-serif; font-size: 13px; z-index: 40; } .post-toc > span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6B7280; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; display: block; } .post-toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid #E5E7EB; } .post-toc a { display: block; padding: 6px 12px; color: #6B7280; text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; transition: color 0.2s, border-color 0.2s; line-height: 1.4; } .post-toc a:hover { color: #0A0A0A; } .post-toc a.active { color: #0A0A0A; border-left-color: #F97316; font-weight: 600; } } /* ----- Responsive ----- */ @media (max-width: 700px) { .post-header { padding: 48px 20px 40px; } .post-title { font-size: 36px; } .post-summary { font-size: 17px; } .spectage-post__content { padding: 48px 20px; font-size: 17px; } .spectage-post__content h2 { font-size: 28px; margin-top: 48px; } .spectage-post__content h3 { font-size: 22px; } .spectage-post__content blockquote { font-size: 24px; margin: 40px 0; } .spectage-post__content blockquote::before { font-size: 100px; left: -8px; top: -16px; } .spectage-post__content > p:first-of-type::first-letter { font-size: 4.2em; } .post-author { flex-direction: column; gap: 16px; padding: 0 20px 48px; } .post-related { padding: 64px 20px; } .post-related__heading { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .post-share a, .post-share button, .post-related__card, .post-related__cta span { transition: none; } .post-share a:hover, .post-share button:hover, .post-related__card:hover { transform: none; } .post-related__card:hover .post-related__cta span { transform: none; } } /* Preset-specific styles */ /* Onyx preset specific styles */ /* Tailwind directives (PostCSS plugin replaces these in-place) */ *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Inter, system-ui, -apple-system, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .inset-x-0 { left: 0px; right: 0px; } .-bottom-12 { bottom: -3rem; } .-bottom-32 { bottom: -8rem; } .-bottom-40 { bottom: -10rem; } .-left-2 { left: -0.5rem; } .-left-24 { left: -6rem; } .-left-32 { left: -8rem; } .-left-40 { left: -10rem; } .-right-12 { right: -3rem; } .-right-20 { right: -5rem; } .-right-32 { right: -8rem; } .-right-40 { right: -10rem; } .-top-20 { top: -5rem; } .-top-3 { top: -0.75rem; } .-top-32 { top: -8rem; } .-top-4 { top: -1rem; } .-top-40 { top: -10rem; } .-top-8 { top: -2rem; } .bottom-0 { bottom: 0px; } .bottom-6 { bottom: 1.5rem; } .left-0 { left: 0px; } .left-1\/2 { left: 50%; } .left-1\/4 { left: 25%; } .left-4 { left: 1rem; } .left-6 { left: 1.5rem; } .left-7 { left: 1.75rem; } .right-0 { right: 0px; } .right-1\/3 { right: 33.333333%; } .right-1\/4 { right: 25%; } .top-0 { top: 0px; } .top-4 { top: 1rem; } .top-6 { top: 1.5rem; } .top-\[20\%\] { top: 20%; } .top-\[55\%\] { top: 55%; } .top-\[80\%\] { top: 80%; } .isolate { isolation: isolate; } .z-10 { z-index: 10; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[55\] { z-index: 55; } .z-\[60\] { z-index: 60; } .m-auto { margin: auto; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-14 { margin-bottom: 3.5rem; } .mb-16 { margin-bottom: 4rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .ml-1 { margin-left: 0.25rem; } .ml-6 { margin-left: 1.5rem; } .ml-auto { margin-left: auto; } .mt-0\.5 { margin-top: 0.125rem; } .mt-10 { margin-top: 2.5rem; } .mt-16 { margin-top: 4rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-\[4\/3\] { aspect-ratio: 4/3; } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .h-1 { height: 0.25rem; } .h-1\.5 { height: 0.375rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-2 { height: 0.5rem; } .h-20 { height: 5rem; } .h-3 { height: 0.75rem; } .h-32 { height: 8rem; } .h-4 { height: 1rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-64 { height: 16rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[200px\] { height: 200px; } .h-\[300px\] { height: 300px; } .h-\[360px\] { height: 360px; } .h-\[380px\] { height: 380px; } .h-\[3px\] { height: 3px; } .h-\[400px\] { height: 400px; } .h-\[420px\] { height: 420px; } .h-\[440px\] { height: 440px; } .h-\[460px\] { height: 460px; } .h-\[480px\] { height: 480px; } .h-\[500px\] { height: 500px; } .h-\[520px\] { height: 520px; } .h-full { height: 100%; } .h-px { height: 1px; } .\!w-full { width: 100% !important; } .w-1\.5 { width: 0.375rem; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-2 { width: 0.5rem; } .w-20 { width: 5rem; } .w-3 { width: 0.75rem; } .w-32 { width: 8rem; } .w-4 { width: 1rem; } .w-40 { width: 10rem; } .w-48 { width: 12rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-64 { width: 16rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-\[360px\] { width: 360px; } .w-\[380px\] { width: 380px; } .w-\[400px\] { width: 400px; } .w-\[420px\] { width: 420px; } .w-\[440px\] { width: 440px; } .w-\[460px\] { width: 460px; } .w-\[480px\] { width: 480px; } .w-\[500px\] { width: 500px; } .w-\[520px\] { width: 520px; } .w-auto { width: auto; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-md { max-width: 28rem; } .max-w-none { max-width: none; } .max-w-sm { max-width: 24rem; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .origin-left { transform-origin: left; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .list-none { list-style-type: none; } .auto-rows-\[minmax\(220px\2c auto\)\] { grid-auto-rows: minmax(220px,auto); } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .\!justify-center { justify-content: center !important; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-12 { gap: 3rem; } .gap-14 { gap: 3.5rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-12 { row-gap: 3rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .self-start { align-self: flex-start; } .overflow-hidden { overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap { white-space: nowrap; } .\!rounded-lg { border-radius: 0.5rem !important; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .border { border-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-t { border-top-width: 1px; } .border-gray-100 { --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-gray-300\/50 { border-color: rgb(209 213 219 / 0.5); } .bg-cream { --tw-bg-opacity: 1; background-color: rgb(250 247 242 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-ink { --tw-bg-opacity: 1; background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1)); } .bg-spectage-orange { --tw-bg-opacity: 1; background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .from-spectage-blue { --tw-gradient-from: #0087FF var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 135 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-spectage-blue-tint { --tw-gradient-from: #F0F8FF var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 248 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-spectage-blue-light { --tw-gradient-to: #21C2FF var(--tw-gradient-to-position); } .to-spectage-blue\/20 { --tw-gradient-to: rgb(0 135 255 / 0.2) var(--tw-gradient-to-position); } .object-contain { -o-object-fit: contain; object-fit: contain; } .object-cover { -o-object-fit: cover; object-fit: cover; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .\!px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .\!py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } .\!py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-12 { padding-bottom: 3rem; } .pb-16 { padding-bottom: 4rem; } .pb-20 { padding-bottom: 5rem; } .pb-24 { padding-bottom: 6rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pl-16 { padding-left: 4rem; } .pl-4 { padding-left: 1rem; } .pr-2 { padding-right: 0.5rem; } .pr-5 { padding-right: 1.25rem; } .pt-1 { padding-top: 0.25rem; } .pt-32 { padding-top: 8rem; } .pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .text-left { text-align: left; } .text-center { text-align: center; } .font-mono { font-family: JetBrains Mono, ui-monospace, SF Mono, Menlo, monospace; } .\!text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-7xl { font-size: 4.5rem; line-height: 1; } .text-8xl { font-size: 6rem; line-height: 1; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .leading-\[0\.95\] { line-height: 0.95; } .leading-\[0\.98\] { line-height: 0.98; } .leading-\[1\.05\] { line-height: 1.05; } .leading-\[1\.1\] { line-height: 1.1; } .leading-none { line-height: 1; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[0\.18em\] { letter-spacing: 0.18em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-ink { --tw-text-opacity: 1; color: rgb(10 10 10 / var(--tw-text-opacity, 1)); } .text-spectage-blue { --tw-text-opacity: 1; color: rgb(0 135 255 / var(--tw-text-opacity, 1)); } .text-spectage-orange { --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .opacity-20 { opacity: 0.2; } .opacity-25 { opacity: 0.25; } .opacity-90 { opacity: 0.9; } .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .blur-2xl { --tw-blur: blur(40px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .blur-3xl { --tw-blur: blur(64px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-filter { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-100 { transition-duration: 100ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .last\:pb-0:last-child { padding-bottom: 0px; } .hover\:-translate-y-0\.5:hover { --tw-translate-y: -0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-ink\/30:hover { border-color: rgb(10 10 10 / 0.3); } .hover\:border-ink\/40:hover { border-color: rgb(10 10 10 / 0.4); } .hover\:border-spectage-orange\/40:hover { border-color: rgb(249 115 22 / 0.4); } .hover\:text-ink:hover { --tw-text-opacity: 1; color: rgb(10 10 10 / var(--tw-text-opacity, 1)); } .hover\:text-spectage-blue:hover { --tw-text-opacity: 1; color: rgb(0 135 255 / var(--tw-text-opacity, 1)); } .hover\:opacity-90:hover { opacity: 0.9; } .hover\:shadow-2xl:hover { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-sm:hover { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-xl:hover { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-gray-200\/40:hover { --tw-shadow-color: rgb(229 231 235 / 0.4); --tw-shadow: var(--tw-shadow-colored); } .group[open] .group-open\:rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:text-spectage-blue { --tw-text-opacity: 1; color: rgb(0 135 255 / var(--tw-text-opacity, 1)); } @media (min-width: 640px) { .sm\:inline-block { display: inline-block; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } } @media (min-width: 768px) { .md\:-left-8 { left: -2rem; } .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:row-span-1 { grid-row: span 1 / span 1; } .md\:row-span-2 { grid-row: span 2 / span 2; } .md\:inline { display: inline; } .md\:flex { display: flex; } .md\:inline-flex { display: inline-flex; } .md\:hidden { display: none; } .md\:aspect-auto { aspect-ratio: auto; } .md\:h-full { height: 100%; } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-\[200px\2c 1fr\] { grid-template-columns: 200px 1fr; } .md\:grid-cols-\[240px\2c 1fr\] { grid-template-columns: 240px 1fr; } .md\:gap-10 { gap: 2.5rem; } .md\:gap-8 { gap: 2rem; } .md\:p-12 { padding: 3rem; } .md\:p-7 { padding: 1.75rem; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-6xl { font-size: 3.75rem; line-height: 1; } .md\:text-8xl { font-size: 6rem; line-height: 1; } .md\:text-9xl { font-size: 8rem; line-height: 1; } .md\:text-base { font-size: 1rem; line-height: 1.5rem; } .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 1024px) { .lg\:sticky { position: sticky; } .lg\:top-24 { top: 6rem; } .lg\:col-span-12 { grid-column: span 12 / span 12; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-9 { grid-column: span 9 / span 9; } .lg\:mb-20 { margin-bottom: 5rem; } .lg\:ml-8 { margin-left: 2rem; } .lg\:flex { display: flex; } .lg\:h-40 { height: 10rem; } .lg\:w-40 { width: 10rem; } .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:gap-12 { gap: 3rem; } .lg\:gap-8 { gap: 2rem; } .lg\:p-10 { padding: 2.5rem; } .lg\:p-12 { padding: 3rem; } .lg\:p-6 { padding: 1.5rem; } .lg\:p-8 { padding: 2rem; } .lg\:px-16 { padding-left: 4rem; padding-right: 4rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; } .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } .lg\:pb-16 { padding-bottom: 4rem; } .lg\:pb-28 { padding-bottom: 7rem; } .lg\:pl-20 { padding-left: 5rem; } .lg\:pt-40 { padding-top: 10rem; } .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; } .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .lg\:text-5xl { font-size: 3rem; line-height: 1; } .lg\:text-6xl { font-size: 3.75rem; line-height: 1; } .lg\:text-7xl { font-size: 4.5rem; line-height: 1; } .lg\:text-9xl { font-size: 8rem; line-height: 1; } .lg\:text-base { font-size: 1rem; line-height: 1.5rem; } .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } }