@layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --bb-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bb-color-red-200: oklch(88.5% 0.062 18.334); --bb-color-red-500: oklch(63.7% 0.237 25.331); --bb-color-yellow-200: oklch(94.5% 0.129 101.54); --bb-color-yellow-500: oklch(79.5% 0.184 86.047); --bb-color-blue-200: oklch(88.2% 0.059 254.128); --bb-color-slate-200: oklch(92.9% 0.013 255.508); --bb-color-black: #000; --bb-color-white: #fff; --bb-spacing: 0.25rem; --bb-text-2xl: 1.5rem; --bb-text-2xl--line-height: calc(2 / 1.5); --bb-font-weight-normal: 400; --bb-font-weight-bold: 700; --bb-radius-xl: 0.75rem; --bb-radius-2xl: 1rem; --bb-radius-3xl: 1.5rem; --bb-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --bb-aspect-video: 16 / 9; --bb-default-font-family: var(--bb-font-sans); --bb-default-mono-font-family: var(--bb-font-mono); --bb-color-b_color1: #000000; --bb-color-b_color2: #111111; --bb-color-b_color3: #ADADAD; --bb-color-b_color4: #F6CFF4; --bb-color-b_color5: #FFF; --bb-color-b_color7: #FBFAF3; --bb-text-b_size1: clamp(52px, 36px + 5vw, 100px); --bb-text-b_size2: clamp(32px, 24px + 2.5vw, 56px); --bb-text-b_size3: clamp(22px, 14.67px + 2.29vw, 44px); --bb-text-b_size4: clamp(22px, 17.33px + 1.46vw, 36px); --bb-text-b_size5: clamp(17px, 14.67px + 0.73vw, 24px); --bb-text-b_size6: ; --bb-text-b_size7: ; --bb-text-b_size8: ; --bb-text-b_size9: ; --bb-text-b_size10: ; --bb-text-b_size11: ; --bb-text-b_size12: ; --bb-text-b_size13: ; --bb-text-b_size14: ; --bb-text-b_size15: ; --bb-text-b_size16: ; } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--bb-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--bb-default-font-feature-settings, normal); font-variation-settings: var(--bb-default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--bb-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--bb-default-mono-font-feature-settings, normal); font-variation-settings: var(--bb-default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .bb\:relative { position: relative; } .bb\:col-span-3 { grid-column: span 3 / span 3; } .bb\:container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .bb\:m-6 { margin: calc(var(--bb-spacing) * 6); } .bb\:m-24 { margin: calc(var(--bb-spacing) * 24); } .bb\:m-40 { margin: calc(var(--bb-spacing) * 40); } .bb\:m-\[22px\] { margin: 22px; } .bb\:container { margin-inline: auto; padding-inline: 2rem; } .bb\:mx-6 { margin-inline: calc(var(--bb-spacing) * 6); } .bb\:my-8 { margin-block: calc(var(--bb-spacing) * 8); } .bb\:mt-20 { margin-top: calc(var(--bb-spacing) * 20); } .bb\:mt-24 { margin-top: calc(var(--bb-spacing) * 24); } .bb\:mt-48 { margin-top: calc(var(--bb-spacing) * 48); } .bb\:mt-\[304px\] { margin-top: 304px; } .bb\:container-fluid { margin-left: auto; margin-right: auto; padding-left: var(--b_padding, 4vw); padding-right: var(--b_padding, 4vw); } .bb\:mb-6 { margin-bottom: calc(var(--bb-spacing) * 6); } .bb\:flex { display: flex; } .bb\:grid { display: grid; } .bb\:inline-block { display: inline-block; } .bb\:aspect-1\/1 { aspect-ratio: 1/1; } .bb\:aspect-2\/2 { aspect-ratio: 2/2; } .bb\:aspect-2\/3 { aspect-ratio: 2/3; } .bb\:aspect-4\/6 { aspect-ratio: 4/6; } .bb\:aspect-16\/9 { aspect-ratio: 16/9; } .bb\:aspect-video { aspect-ratio: var(--bb-aspect-video); } .bb\:h-16 { height: calc(var(--bb-spacing) * 16); } .bb\:h-44 { height: calc(var(--bb-spacing) * 44); } .bb\:h-96 { height: calc(var(--bb-spacing) * 96); } .bb\:h-\[200px\] { height: 200px; } .bb\:h-\[800px\] { height: 800px; } .bb\:h-\[810px\] { height: 810px; } .bb\:h-b_screen-100 { height: 100vh; } .bb\:h-full { height: 100%; } .bb\:min-h-full { min-height: 100%; } .bb\:w-3 { width: calc(var(--bb-spacing) * 3); } .bb\:w-3\.5 { width: calc(var(--bb-spacing) * 3.5); } .bb\:w-7 { width: calc(var(--bb-spacing) * 7); } .bb\:w-8 { width: calc(var(--bb-spacing) * 8); } .bb\:w-20 { width: calc(var(--bb-spacing) * 20); } .bb\:w-36 { width: calc(var(--bb-spacing) * 36); } .bb\:w-48 { width: calc(var(--bb-spacing) * 48); } .bb\:w-56 { width: calc(var(--bb-spacing) * 56); } .bb\:w-80 { width: calc(var(--bb-spacing) * 80); } .bb\:w-\[0px\] { width: 0px; } .bb\:w-\[22px\] { width: 22px; } .bb\:w-\[112px\] { width: 112px; } .bb\:w-\[176px\] { width: 176px; } .bb\:w-\[192px\] { width: 192px; } .bb\:w-\[200px\] { width: 200px; } .bb\:w-\[222px\] { width: 222px; } .bb\:w-\[290px\] { width: 290px; } .bb\:w-\[300px\] { width: 300px; } .bb\:w-\[304px\] { width: 304px; } .bb\:w-\[336px\] { width: 336px; } .bb\:w-\[400px\] { width: 400px; } .bb\:w-\[444px\] { width: 444px; } .bb\:w-\[500px\] { width: 500px; } .bb\:w-\[528px\] { width: 528px; } .bb\:w-\[560px\] { width: 560px; } .bb\:w-\[576px\] { width: 576px; } .bb\:w-\[624px\] { width: 624px; } .bb\:w-\[704px\] { width: 704px; } .bb\:w-\[816px\] { width: 816px; } .bb\:w-\[832px\] { width: 832px; } .bb\:w-\[896px\] { width: 896px; } .bb\:w-\[1120px\] { width: 1120px; } .bb\:w-\[1440px\] { width: 1440px; } .bb\:w-\[1568px\] { width: 1568px; } .bb\:w-b_screen-40 { width: 40vw; } .bb\:w-b_screen-80 { width: 80vw; } .bb\:max-w-\[784px\] { max-width: 784px; } .bb\:max-w-\[900px\] { max-width: 900px; } .bb\:max-w-\[1020px\] { max-width: 1020px; } .bb\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bb\:flex-col { flex-direction: column; } .bb\:flex-row { flex-direction: row; } .bb\:items-center { align-items: center; } .bb\:justify-center { justify-content: center; } .bb\:gap-4 { gap: calc(var(--bb-spacing) * 4); } .bb\:gap-\[20px\] { gap: 20px; } .bb\:rounded-2xl { border-radius: var(--bb-radius-2xl); } .bb\:rounded-3xl { border-radius: var(--bb-radius-3xl); } .bb\:rounded-xl { border-radius: var(--bb-radius-xl); } .bb\:bg-b_color1 { background-color: var(--bb-color-b_color1); } .bb\:bg-b_color2 { background-color: var(--bb-color-b_color2); } .bb\:bg-b_color3 { background-color: var(--bb-color-b_color3); } .bb\:bg-b_color4 { background-color: var(--bb-color-b_color4); } .bb\:bg-b_color5 { background-color: var(--bb-color-b_color5); } .bb\:bg-b_color7 { background-color: var(--bb-color-b_color7); } .bb\:bg-black { background-color: var(--bb-color-black); } .bb\:bg-blue-200 { background-color: var(--bb-color-blue-200); } .bb\:bg-red-200 { background-color: var(--bb-color-red-200); } .bb\:bg-slate-200 { background-color: var(--bb-color-slate-200); } .bb\:bg-yellow-200 { background-color: var(--bb-color-yellow-200); } .bb\:bg-yellow-500 { background-color: var(--bb-color-yellow-500); } .bb\:object-cover { object-fit: cover; } .bb\:object-\[50\.00\%_50\.00\%\] { object-position: 50.00% 50.00%; } .bb\:p-4 { padding: calc(var(--bb-spacing) * 4); } .bb\:p-\[30px\] { padding: 30px; } .bb\:p-\[50px\] { padding: 50px; } .bb\:p-\[212px\] { padding: 212px; } .bb\:py-6 { padding-block: calc(var(--bb-spacing) * 6); } .bb\:py-8 { padding-block: calc(var(--bb-spacing) * 8); } .bb\:py-14 { padding-block: calc(var(--bb-spacing) * 14); } .bb\:py-16 { padding-block: calc(var(--bb-spacing) * 16); } .bb\:pt-\[30px\] { padding-top: 30px; } .bb\:pt-\[100px\] { padding-top: 100px; } .bb\:pt-\[256px\] { padding-top: 256px; } .bb\:pr-\[22px\] { padding-right: 22px; } .bb\:pb-16 { padding-bottom: calc(var(--bb-spacing) * 16); } .bb\:pb-\[50px\] { padding-bottom: 50px; } .bb\:pl-\[100px\] { padding-left: 100px; } .bb\:text-center { text-align: center; } .bb\:text-left { text-align: left; } .bb\:text-2xl { font-size: var(--bb-text-2xl); line-height: var(--tw-leading, var(--bb-text-2xl--line-height)); } .bb\:text-b_size1 { font-size: var(--bb-text-b_size1); } .bb\:text-b_size2 { font-size: var(--bb-text-b_size2); } .bb\:text-b_size3 { font-size: var(--bb-text-b_size3); } .bb\:text-b_size4 { font-size: var(--bb-text-b_size4); } .bb\:text-b_size5 { font-size: var(--bb-text-b_size5); } .bb\:text-b_size6 { font-size: var(--bb-text-b_size6); } .bb\:text-b_size7 { font-size: var(--bb-text-b_size7); } .bb\:text-b_size8 { font-size: var(--bb-text-b_size8); } .bb\:text-b_size9 { font-size: var(--bb-text-b_size9); } .bb\:text-b_size10 { font-size: var(--bb-text-b_size10); } .bb\:text-b_size11 { font-size: var(--bb-text-b_size11); } .bb\:text-b_size12 { font-size: var(--bb-text-b_size12); } .bb\:text-b_size13 { font-size: var(--bb-text-b_size13); } .bb\:text-b_size14 { font-size: var(--bb-text-b_size14); } .bb\:text-b_size15 { font-size: var(--bb-text-b_size15); } .bb\:text-b_size16 { font-size: var(--bb-text-b_size16); } .bb\:leading-none { --tw-leading: 1; line-height: 1; } .bb\:font-bold { --tw-font-weight: var(--bb-font-weight-bold); font-weight: var(--bb-font-weight-bold); } .bb\:font-normal { --tw-font-weight: var(--bb-font-weight-normal); font-weight: var(--bb-font-weight-normal); } .bb\:text-\[undefined\] { color: undefined; } .bb\:text-b_color1 { color: var(--bb-color-b_color1); } .bb\:text-b_color2 { color: var(--bb-color-b_color2); } .bb\:text-b_color3 { color: var(--bb-color-b_color3); } .bb\:text-b_color4 { color: var(--bb-color-b_color4); } .bb\:text-b_color5 { color: var(--bb-color-b_color5); } .bb\:text-red-500 { color: var(--bb-color-red-500); } .bb\:text-white { color: var(--bb-color-white); } .bb\:opacity-\[0\.52\] { opacity: 0.52; } .bb\:opacity-\[1\] { opacity: 1; } .bb\:drop-shadow-2xl { --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--bb-drop-shadow-2xl)); 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,); } .bb\:sm\:m-\[40px\] { @media (width >= 40rem) { margin: 40px; } } .bb\:sm\:text-b_color4 { @media (width >= 40rem) { color: var(--bb-color-b_color4); } } .bb\:xl\:grid { @media (width >= 80rem) { display: grid; } } .bb\:xl\:min-h-full { @media (width >= 80rem) { min-height: 100%; } } .bb\:xl\:grid-cols-2 { @media (width >= 80rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bb\:xl\:bg-red-200 { @media (width >= 80rem) { background-color: var(--bb-color-red-200); } } .bb\:xl\:p-4 { @media (width >= 80rem) { padding: calc(var(--bb-spacing) * 4); } } .bb\:xl\:pr-28 { @media (width >= 80rem) { padding-right: calc(var(--bb-spacing) * 28); } } } @layer base { body h1 { font-size: var(--bb-text-b_size1); font-family: var(--bb-font-b_font1); } body h2 { font-size: var(--bb-text-b_size2); font-family: var(--bb-font-b_font2); } body h3 { font-size: var(--bb-text-b_size3); font-family: var(--bb-font-b_font1); } body h4 { font-size: var(--bb-text-b_size4); font-family: var(--bb-font-b_font1); } body h5 { font-size: var(--bb-text-b_size5); line-height: 1.2; } body h6 { font-size: var(--bb-text-); } body p { font-size: var(--bb-text-b_size5); font-family: var(--bb-font-b_font1); } } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-leading: initial; --tw-font-weight: initial; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; } } }