/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ @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-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-ease: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0 } } } @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-green-50: oklch(98.2% .018 155.826); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-cyan-500: oklch(71.5% .143 215.221); --color-blue-50: oklch(97% .014 254.604); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-700: oklch(37.3% .034 259.733); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -.025em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --ease-in-out: cubic-bezier(.4, 0, .2, 1); --blur-sm: 8px; --blur-md: 12px; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-bc-blue: #2e6eb5; --color-bc-blue-dark: #1b3c6b; --color-bc-blue-deep: #142d52; --color-bc-blue-light: #ebf3fb; --color-bc-green: #44b868; --color-bc-green-hover: #3aa55c; --color-bc-gray-bg: #f5f7fa; --color-bc-text-dark: #1a1a2e; --color-bc-text-body: #555; --color-bc-text-light: #888; --color-bc-border: #e5e7eb; --font-heading: "Plus Jakarta Sans", system-ui, sans-serif } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0 } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0 } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--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(--default-font-feature-settings, normal); font-variation-settings: var(--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; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em } small { font-size: 80% } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative } sub { bottom: -.25em } sup { top: -.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 { vertical-align: middle; display: block } img, video { max-width: 100%; height: auto } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0 } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0 } :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)) { ::placeholder { 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 { padding-block: 0 } ::-webkit-datetime-edit-year-field { padding-block: 0 } ::-webkit-datetime-edit-month-field { padding-block: 0 } ::-webkit-datetime-edit-day-field { padding-block: 0 } ::-webkit-datetime-edit-hour-field { padding-block: 0 } ::-webkit-datetime-edit-minute-field { padding-block: 0 } ::-webkit-datetime-edit-second-field { padding-block: 0 } ::-webkit-datetime-edit-millisecond-field { padding-block: 0 } ::-webkit-datetime-edit-meridiem-field { padding-block: 0 } ::-webkit-calendar-picker-indicator { line-height: 1 } :-moz-ui-invalid { box-shadow: none } button, input:where([type=button], [type=reset], [type=submit]) { appearance: button } ::file-selector-button { appearance: button } ::-webkit-inner-spin-button { height: auto } ::-webkit-outer-spin-button { height: auto } [hidden]:where(:not([hidden=until-found])) { display: none !important } } @layer components; @layer utilities { .visible { visibility: visible } .absolute { position: absolute } .fixed { position: fixed } .relative { position: relative } .inset-0 { inset: calc(var(--spacing) * 0) } .top-0 { top: calc(var(--spacing) * 0) } .top-5 { top: calc(var(--spacing) * 5) } .right-0 { right: calc(var(--spacing) * 0) } .right-5 { right: calc(var(--spacing) * 5) } .bottom-0 { bottom: calc(var(--spacing) * 0) } .left-0 { left: calc(var(--spacing) * 0) } .z-10 { z-index: 10 } .z-50 { z-index: 50 } .order-1 { order: 1 } .order-2 { order: 2 } .mx-auto { margin-inline: auto } .mt-0\.5 { margin-top: calc(var(--spacing) * .5) } .mt-1 { margin-top: calc(var(--spacing) * 1) } .mt-4 { margin-top: calc(var(--spacing) * 4) } .mt-5 { margin-top: calc(var(--spacing) * 5) } .mt-6 { margin-top: calc(var(--spacing) * 6) } .mt-7 { margin-top: calc(var(--spacing) * 7) } .mt-8 { margin-top: calc(var(--spacing) * 8) } .mt-10 { margin-top: calc(var(--spacing) * 10) } .mt-\[7px\] { margin-top: 7px } .mb-1 { margin-bottom: calc(var(--spacing) * 1) } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5) } .mb-2 { margin-bottom: calc(var(--spacing) * 2) } .mb-3 { margin-bottom: calc(var(--spacing) * 3) } .mb-3\.5 { margin-bottom: calc(var(--spacing) * 3.5) } .mb-4 { margin-bottom: calc(var(--spacing) * 4) } .mb-5 { margin-bottom: calc(var(--spacing) * 5) } .mb-6 { margin-bottom: calc(var(--spacing) * 6) } .mb-7 { margin-bottom: calc(var(--spacing) * 7) } .mb-8 { margin-bottom: calc(var(--spacing) * 8) } .mb-10 { margin-bottom: calc(var(--spacing) * 10) } .mb-12 { margin-bottom: calc(var(--spacing) * 12) } .mb-14 { margin-bottom: calc(var(--spacing) * 14) } .ml-3 { margin-left: calc(var(--spacing) * 3) } .ml-auto { margin-left: auto } .block { display: block } .flex { display: flex } .grid { display: grid } .hidden { display: none } .inline-block { display: inline-block } .inline-flex { display: inline-flex } .aspect-\[4\/3\] { aspect-ratio: 4/3 } .h-0\.5 { height: calc(var(--spacing) * .5) } .h-1\.5 { height: calc(var(--spacing) * 1.5) } .h-2 { height: calc(var(--spacing) * 2) } .h-3 { height: calc(var(--spacing) * 3) } .h-3\.5 { height: calc(var(--spacing) * 3.5) } .h-4 { height: calc(var(--spacing) * 4) } .h-5 { height: calc(var(--spacing) * 5) } .h-6 { height: calc(var(--spacing) * 6) } .h-7 { height: calc(var(--spacing) * 7) } .h-8 { height: calc(var(--spacing) * 8) } .h-9 { height: calc(var(--spacing) * 9) } .h-10 { height: calc(var(--spacing) * 10) } .h-11 { height: calc(var(--spacing) * 11) } .h-12 { height: calc(var(--spacing) * 12) } .h-14 { height: calc(var(--spacing) * 14) } .h-20 { height: calc(var(--spacing) * 20) } .w-1 { width: calc(var(--spacing) * 1) } .w-3 { width: calc(var(--spacing) * 3) } .w-3\.5 { width: calc(var(--spacing) * 3.5) } .w-4 { width: calc(var(--spacing) * 4) } .w-5 { width: calc(var(--spacing) * 5) } .w-6 { width: calc(var(--spacing) * 6) } .w-7 { width: calc(var(--spacing) * 7) } .w-8 { width: calc(var(--spacing) * 8) } .w-9 { width: calc(var(--spacing) * 9) } .w-10 { width: calc(var(--spacing) * 10) } .w-11 { width: calc(var(--spacing) * 11) } .w-12 { width: calc(var(--spacing) * 12) } .w-14 { width: calc(var(--spacing) * 14) } .w-24 { width: calc(var(--spacing) * 24) } .w-40 { width: calc(var(--spacing) * 40) } .w-fit { width: fit-content } .w-full { width: 100% } .max-w-2xl { max-width: var(--container-2xl) } .max-w-3xl { max-width: var(--container-3xl) } .max-w-\[760px\] { max-width: 760px } .max-w-\[1200px\] { max-width: 1200px } .max-w-lg { max-width: var(--container-lg) } .max-w-xl { max-width: var(--container-xl) } .flex-1 { flex: 1 } .flex-shrink { flex-shrink: 1 } .flex-shrink-0 { flex-shrink: 0 } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .grid-cols-\[1fr_80px_80px_90px\] { grid-template-columns: 1fr 80px 80px 90px } .grid-cols-\[1fr_100px_100px_100px\] { grid-template-columns: 1fr 100px 100px 100px } .flex-col { flex-direction: column } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .items-start { align-items: flex-start } .justify-between { justify-content: space-between } .justify-center { justify-content: center } .gap-1\.5 { gap: calc(var(--spacing) * 1.5) } .gap-2 { gap: calc(var(--spacing) * 2) } .gap-2\.5 { gap: calc(var(--spacing) * 2.5) } .gap-3 { gap: calc(var(--spacing) * 3) } .gap-3\.5 { gap: calc(var(--spacing) * 3.5) } .gap-4 { gap: calc(var(--spacing) * 4) } .gap-5 { gap: calc(var(--spacing) * 5) } .gap-6 { gap: calc(var(--spacing) * 6) } .gap-8 { gap: calc(var(--spacing) * 8) } .gap-10 { gap: calc(var(--spacing) * 10) } .gap-12 { gap: calc(var(--spacing) * 12) } :where(.space-y-2\.5>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))) } :where(.space-y-3>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))) } .overflow-hidden { overflow: hidden } .rounded { border-radius: .25rem } .rounded-2xl { border-radius: var(--radius-2xl) } .rounded-full { border-radius: 3.40282e38px } .rounded-lg { border-radius: var(--radius-lg) } .rounded-xl { border-radius: var(--radius-xl) } .border { border-style: var(--tw-border-style); border-width: 1px } .border-2 { border-style: var(--tw-border-style); border-width: 2px } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px } .border-bc-blue { border-color: var(--color-bc-blue) } .border-bc-border { border-color: var(--color-bc-border) } .border-bc-border\/50 { border-color: #e5e7eb80 } @supports (color:color-mix(in lab, red, red)) { .border-bc-border\/50 { border-color: color-mix(in oklab, var(--color-bc-border) 50%, transparent) } } .border-bc-green\/30 { border-color: #44b8684d } @supports (color:color-mix(in lab, red, red)) { .border-bc-green\/30 { border-color: color-mix(in oklab, var(--color-bc-green) 30%, transparent) } } .border-gray-50 { border-color: var(--color-gray-50) } .border-gray-100 { border-color: var(--color-gray-100) } .border-gray-200 { border-color: var(--color-gray-200) } .border-white\/10 { border-color: #ffffff1a } @supports (color:color-mix(in lab, red, red)) { .border-white\/10 { border-color: color-mix(in oklab, var(--color-white) 10%, transparent) } } .border-white\/15 { border-color: #ffffff26 } @supports (color:color-mix(in lab, red, red)) { .border-white\/15 { border-color: color-mix(in oklab, var(--color-white) 15%, transparent) } } .border-white\/20 { border-color: #fff3 } @supports (color:color-mix(in lab, red, red)) { .border-white\/20 { border-color: color-mix(in oklab, var(--color-white) 20%, transparent) } } .bg-amber-50 { background-color: var(--color-amber-50) } .bg-amber-400 { background-color: var(--color-amber-400) } .bg-bc-blue { background-color: var(--color-bc-blue) } .bg-bc-blue-deep { background-color: var(--color-bc-blue-deep) } .bg-bc-blue-light { background-color: var(--color-bc-blue-light) } .bg-bc-gray-bg { background-color: var(--color-bc-gray-bg) } .bg-bc-gray-bg\/30 { background-color: #f5f7fa4d } @supports (color:color-mix(in lab, red, red)) { .bg-bc-gray-bg\/30 { background-color: color-mix(in oklab, var(--color-bc-gray-bg) 30%, transparent) } } .bg-bc-green { background-color: var(--color-bc-green) } .bg-bc-green\/15 { background-color: #44b86826 } @supports (color:color-mix(in lab, red, red)) { .bg-bc-green\/15 { background-color: color-mix(in oklab, var(--color-bc-green) 15%, transparent) } } .bg-bc-text-dark { background-color: var(--color-bc-text-dark) } .bg-blue-50 { background-color: var(--color-blue-50) } .bg-gray-50 { background-color: var(--color-gray-50) } .bg-gray-100 { background-color: var(--color-gray-100) } .bg-gray-200 { background-color: var(--color-gray-200) } .bg-green-50 { background-color: var(--color-green-50) } .bg-green-400 { background-color: var(--color-green-400) } .bg-red-400 { background-color: var(--color-red-400) } .bg-transparent { background-color: #0000 } .bg-white { background-color: var(--color-white) } .bg-white\/5 { background-color: #ffffff0d } @supports (color:color-mix(in lab, red, red)) { .bg-white\/5 { background-color: color-mix(in oklab, var(--color-white) 5%, transparent) } } .bg-white\/8 { background-color: #ffffff14 } @supports (color:color-mix(in lab, red, red)) { .bg-white\/8 { background-color: color-mix(in oklab, var(--color-white) 8%, transparent) } } .bg-white\/10 { background-color: #ffffff1a } @supports (color:color-mix(in lab, red, red)) { .bg-white\/10 { background-color: color-mix(in oklab, var(--color-white) 10%, transparent) } } .bg-white\/95 { background-color: #fffffff2 } @supports (color:color-mix(in lab, red, red)) { .bg-white\/95 { background-color: color-mix(in oklab, var(--color-white) 95%, transparent) } } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)) } .from-amber-400 { --tw-gradient-from: var(--color-amber-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .from-blue-400 { --tw-gradient-from: var(--color-blue-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .from-purple-400 { --tw-gradient-from: var(--color-purple-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .to-amber-600 { --tw-gradient-to: var(--color-amber-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .to-blue-600 { --tw-gradient-to: var(--color-blue-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .to-purple-600 { --tw-gradient-to: var(--color-purple-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) } .p-2 { padding: calc(var(--spacing) * 2) } .p-4 { padding: calc(var(--spacing) * 4) } .p-5 { padding: calc(var(--spacing) * 5) } .p-6 { padding: calc(var(--spacing) * 6) } .p-7 { padding: calc(var(--spacing) * 7) } .p-8 { padding: calc(var(--spacing) * 8) } .px-2 { padding-inline: calc(var(--spacing) * 2) } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5) } .px-3 { padding-inline: calc(var(--spacing) * 3) } .px-4 { padding-inline: calc(var(--spacing) * 4) } .px-5 { padding-inline: calc(var(--spacing) * 5) } .px-6 { padding-inline: calc(var(--spacing) * 6) } .px-7 { padding-inline: calc(var(--spacing) * 7) } .px-8 { padding-inline: calc(var(--spacing) * 8) } .py-0\.5 { padding-block: calc(var(--spacing) * .5) } .py-1 { padding-block: calc(var(--spacing) * 1) } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5) } .py-2 { padding-block: calc(var(--spacing) * 2) } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5) } .py-3 { padding-block: calc(var(--spacing) * 3) } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5) } .py-4 { padding-block: calc(var(--spacing) * 4) } .py-5 { padding-block: calc(var(--spacing) * 5) } .py-12 { padding-block: calc(var(--spacing) * 12) } .py-14 { padding-block: calc(var(--spacing) * 14) } .py-16 { padding-block: calc(var(--spacing) * 16) } .pt-5 { padding-top: calc(var(--spacing) * 5) } .pt-6 { padding-top: calc(var(--spacing) * 6) } .pt-8 { padding-top: calc(var(--spacing) * 8) } .pt-32 { padding-top: calc(var(--spacing) * 32) } .pt-\[100px\] { padding-top: 100px } .pb-5 { padding-bottom: calc(var(--spacing) * 5) } .pb-12 { padding-bottom: calc(var(--spacing) * 12) } .pb-16 { padding-bottom: calc(var(--spacing) * 16) } .text-center { text-align: center } .text-left { text-align: left } .font-heading { font-family: var(--font-heading) } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)) } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)) } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)) } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)) } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)) } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)) } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)) } .text-\[10px\] { font-size: 10px } .text-\[11px\] { font-size: 11px } .text-\[12px\] { font-size: 12px } .text-\[13px\] { font-size: 13px } .text-\[14px\] { font-size: 14px } .text-\[15px\] { font-size: 15px } .text-\[16px\] { font-size: 16px } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed) } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug) } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight) } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold) } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold) } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium) } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold) } .tracking-\[0\.1em\] { --tw-tracking: .1em; letter-spacing: .1em } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight) } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide) } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider) } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest) } .text-amber-500 { color: var(--color-amber-500) } .text-amber-600 { color: var(--color-amber-600) } .text-bc-blue { color: var(--color-bc-blue) } .text-bc-green { color: var(--color-bc-green) } .text-bc-text-body { color: var(--color-bc-text-body) } .text-bc-text-dark { color: var(--color-bc-text-dark) } .text-bc-text-light { color: var(--color-bc-text-light) } .text-bc-text-light\/30 { color: #8888884d } @supports (color:color-mix(in lab, red, red)) { .text-bc-text-light\/30 { color: color-mix(in oklab, var(--color-bc-text-light) 30%, transparent) } } .text-bc-text-light\/50 { color: #88888880 } @supports (color:color-mix(in lab, red, red)) { .text-bc-text-light\/50 { color: color-mix(in oklab, var(--color-bc-text-light) 50%, transparent) } } .text-blue-300 { color: var(--color-blue-300) } .text-blue-500 { color: var(--color-blue-500) } .text-blue-600 { color: var(--color-blue-600) } .text-cyan-500 { color: var(--color-cyan-500) } .text-gray-400 { color: var(--color-gray-400) } .text-gray-500 { color: var(--color-gray-500) } .text-gray-700 { color: var(--color-gray-700) } .text-green-300 { color: var(--color-green-300) } .text-green-600 { color: var(--color-green-600) } .text-purple-500 { color: var(--color-purple-500) } .text-red-500 { color: var(--color-red-500) } .text-white { color: var(--color-white) } .text-white\/20 { color: #fff3 } @supports (color:color-mix(in lab, red, red)) { .text-white\/20 { color: color-mix(in oklab, var(--color-white) 20%, transparent) } } .text-white\/25 { color: #ffffff40 } @supports (color:color-mix(in lab, red, red)) { .text-white\/25 { color: color-mix(in oklab, var(--color-white) 25%, transparent) } } .text-white\/30 { color: #ffffff4d } @supports (color:color-mix(in lab, red, red)) { .text-white\/30 { color: color-mix(in oklab, var(--color-white) 30%, transparent) } } .text-white\/35 { color: #ffffff59 } @supports (color:color-mix(in lab, red, red)) { .text-white\/35 { color: color-mix(in oklab, var(--color-white) 35%, transparent) } } .text-white\/40 { color: #fff6 } @supports (color:color-mix(in lab, red, red)) { .text-white\/40 { color: color-mix(in oklab, var(--color-white) 40%, transparent) } } .text-white\/45 { color: #ffffff73 } @supports (color:color-mix(in lab, red, red)) { .text-white\/45 { color: color-mix(in oklab, var(--color-white) 45%, transparent) } } .text-white\/50 { color: #ffffff80 } @supports (color:color-mix(in lab, red, red)) { .text-white\/50 { color: color-mix(in oklab, var(--color-white) 50%, transparent) } } .text-white\/55 { color: #ffffff8c } @supports (color:color-mix(in lab, red, red)) { .text-white\/55 { color: color-mix(in oklab, var(--color-white) 55%, transparent) } } .text-white\/60 { color: #fff9 } @supports (color:color-mix(in lab, red, red)) { .text-white\/60 { color: color-mix(in oklab, var(--color-white) 60%, transparent) } } .text-white\/65 { color: #ffffffa6 } @supports (color:color-mix(in lab, red, red)) { .text-white\/65 { color: color-mix(in oklab, var(--color-white) 65%, transparent) } } .text-white\/70 { color: #ffffffb3 } @supports (color:color-mix(in lab, red, red)) { .text-white\/70 { color: color-mix(in oklab, var(--color-white) 70%, transparent) } } .text-white\/80 { color: #fffc } @supports (color:color-mix(in lab, red, red)) { .text-white\/80 { color: color-mix(in oklab, var(--color-white) 80%, transparent) } } .text-white\/90 { color: #ffffffe6 } @supports (color:color-mix(in lab, red, red)) { .text-white\/90 { color: color-mix(in oklab, var(--color-white) 90%, transparent) } } .uppercase { text-transform: uppercase } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .opacity-10 { opacity: .1 } .opacity-60 { opacity: .6 } .opacity-80 { opacity: .8 } .opacity-\[0\.03\] { opacity: .03 } .opacity-\[0\.04\] { opacity: .04 } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) } .shadow-black\/20 { --tw-shadow-color: #0003 } @supports (color:color-mix(in lab, red, red)) { .shadow-black\/20 { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent) } } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-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, ); 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, ) } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-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, ); 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, ) } .backdrop-filter { -webkit-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, ); 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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)) } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)) } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)) } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out) } @media (hover:hover) { .group-hover\:bg-bc-blue\/10:is(:where(.group):hover *) { background-color: #2e6eb51a } @supports (color:color-mix(in lab, red, red)) { .group-hover\:bg-bc-blue\/10:is(:where(.group):hover *) { background-color: color-mix(in oklab, var(--color-bc-blue) 10%, transparent) } } .hover\:-translate-y-px:hover { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y) } .hover\:border-bc-blue:hover { border-color: var(--color-bc-blue) } .hover\:border-bc-green:hover { border-color: var(--color-bc-green) } .hover\:border-white\/30:hover { border-color: #ffffff4d } @supports (color:color-mix(in lab, red, red)) { .hover\:border-white\/30:hover { border-color: color-mix(in oklab, var(--color-white) 30%, transparent) } } .hover\:border-white\/40:hover { border-color: #fff6 } @supports (color:color-mix(in lab, red, red)) { .hover\:border-white\/40:hover { border-color: color-mix(in oklab, var(--color-white) 40%, transparent) } } .hover\:bg-bc-blue-dark:hover { background-color: var(--color-bc-blue-dark) } .hover\:bg-bc-green-hover:hover { background-color: var(--color-bc-green-hover) } .hover\:bg-white\/10:hover { background-color: #ffffff1a } @supports (color:color-mix(in lab, red, red)) { .hover\:bg-white\/10:hover { background-color: color-mix(in oklab, var(--color-white) 10%, transparent) } } .hover\:bg-white\/15:hover { background-color: #ffffff26 } @supports (color:color-mix(in lab, red, red)) { .hover\:bg-white\/15:hover { background-color: color-mix(in oklab, var(--color-white) 15%, transparent) } } .hover\:text-white:hover { color: var(--color-white) } .hover\:text-white\/50:hover { color: #ffffff80 } @supports (color:color-mix(in lab, red, red)) { .hover\:text-white\/50:hover { color: color-mix(in oklab, var(--color-white) 50%, transparent) } } .hover\:text-white\/80:hover { color: #fffc } @supports (color:color-mix(in lab, red, red)) { .hover\:text-white\/80:hover { color: color-mix(in oklab, var(--color-white) 80%, transparent) } } .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) } .hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) } .hover\:shadow-sm:hover { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) } .hover\:shadow-blue-500\/25:hover { --tw-shadow-color: #3080ff40 } @supports (color:color-mix(in lab, red, red)) { .hover\:shadow-blue-500\/25:hover { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent) } } .hover\:shadow-green-500\/20:hover { --tw-shadow-color: #00c75833 } @supports (color:color-mix(in lab, red, red)) { .hover\:shadow-green-500\/20:hover { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 20%, transparent) var(--tw-shadow-alpha), transparent) } } .hover\:shadow-green-500\/25:hover { --tw-shadow-color: #00c75840 } @supports (color:color-mix(in lab, red, red)) { .hover\:shadow-green-500\/25:hover { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 25%, transparent) var(--tw-shadow-alpha), transparent) } } } @media (min-width:40rem) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } .sm\:flex-row { flex-direction: row } .sm\:items-center { align-items: center } } @media (min-width:48rem) { .md\:order-1 { order: 1 } .md\:order-2 { order: 2 } .md\:block { display: block } .md\:flex { display: flex } .md\:hidden { display: none } .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-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) } .md\:grid-cols-\[1fr_140px_140px_140px\] { grid-template-columns: 1fr 140px 140px 140px } .md\:gap-6 { gap: calc(var(--spacing) * 6) } .md\:gap-8 { gap: calc(var(--spacing) * 8) } .md\:gap-14 { gap: calc(var(--spacing) * 14) } .md\:gap-16 { gap: calc(var(--spacing) * 16) } .md\:py-16 { padding-block: calc(var(--spacing) * 16) } .md\:py-20 { padding-block: calc(var(--spacing) * 20) } .md\:py-24 { padding-block: calc(var(--spacing) * 24) } .md\:pt-40 { padding-top: calc(var(--spacing) * 40) } .md\:pt-\[120px\] { padding-top: 120px } .md\:pb-16 { padding-bottom: calc(var(--spacing) * 16) } .md\:pb-24 { padding-bottom: calc(var(--spacing) * 24) } .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)) } .md\:text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)) } .md\:text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)) } .md\:text-\[32px\] { font-size: 32px } .md\:text-\[34px\] { font-size: 34px } .md\:text-\[36px\] { font-size: 36px } .md\:text-\[42px\] { font-size: 42px } .md\:text-\[44px\] { font-size: 44px } .md\:text-\[46px\] { font-size: 46px } .md\:leading-\[1\.1\] { --tw-leading: 1.1; line-height: 1.1 } .md\:leading-\[1\.08\] { --tw-leading: 1.08; line-height: 1.08 } } @media (min-width:64rem) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) } } } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000 } @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000 } @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000 } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0% } @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50% } @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100% } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100% } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100% } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0 } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0 } /* BarCloud Landing Pages — Custom CSS (shared across all pages) */ /* This file contains animations, reveals, header/footer, FAQ, and page-specific styles */ body { font-family: 'DM Sans', system-ui, sans-serif; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } /* Header scroll state */ .site-header { transition: background 0.3s, box-shadow 0.3s, padding 0.3s; } .site-header.scrolled { background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-header.scrolled .header-logo-light { display: none; } .site-header.scrolled .header-logo-dark { display: block !important; } .site-header.scrolled .nav-link { color: #1A1A2E !important; } .site-header.scrolled .nav-link:hover { color: #2E6EB5 !important; } .site-header.scrolled .mobile-toggle span { background: #1A1A2E !important; } /* Mobile menu */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-menu.open { max-height: 320px; } /* FAQ */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.open .faq-answer { max-height: 200px; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.3s ease; } /* Sticky CTA */ .sticky-cta { transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sticky-cta.show { transform: translateY(0); } /* Lucide icon sizing helper */ .icon-sm { width: 18px; height: 18px; } .icon-md { width: 22px; height: 22px; } .icon-lg { width: 28px; height: 28px; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } /* Reveals */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } /* Header */ .site-header { transition: background 0.3s, box-shadow 0.3s, padding 0.3s; } .site-header.scrolled { background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06); backdrop-filter: blur(12px); } .site-header.scrolled .header-logo-light { display: none; } .site-header.scrolled .header-logo-dark { display: block !important; } .site-header.scrolled .nav-link { color: #1A1A2E !important; } .site-header.scrolled .nav-link:hover { color: #2E6EB5 !important; } .site-header.scrolled .mobile-toggle span { background: #1A1A2E !important; } .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-menu.open { max-height: 320px; } /* FAQ */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.open .faq-answer { max-height: 300px; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.3s ease; } /* Icon helpers */ .icon-sm { width: 18px; height: 18px; } .icon-md { width: 22px; height: 22px; } /* ═══════════════════════════════════════════ DEPLOYMENT DIAGRAM — Animated Hero Visual ═══════════════════════════════════════════ */ .deploy-diagram { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; } .deploy-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 24px; background: linear-gradient(135deg, #2E6EB5, #1B3C6B); box-shadow: 0 0 0 8px rgba(46, 110, 181, 0.15), 0 0 0 20px rgba(46, 110, 181, 0.06), 0 12px 40px rgba(46, 110, 181, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 10; animation: hub-pulse 3s ease-in-out infinite; } .deploy-hub span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.05em; } @keyframes hub-pulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(46, 110, 181, 0.15), 0 0 0 20px rgba(46, 110, 181, 0.06), 0 12px 40px rgba(46, 110, 181, 0.3); } 50% { box-shadow: 0 0 0 12px rgba(46, 110, 181, 0.2), 0 0 0 28px rgba(46, 110, 181, 0.08), 0 12px 40px rgba(46, 110, 181, 0.35); } } .deploy-node { position: absolute; width: 110px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 10; animation: node-float 4s ease-in-out infinite; } .deploy-node:nth-child(3) { animation-delay: 0.5s; } .deploy-node:nth-child(4) { animation-delay: 1s; } .deploy-node .node-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; border: 2px solid; transition: transform 0.3s, box-shadow 0.3s; } .deploy-node:hover .node-icon { transform: scale(1.08); } .deploy-node .node-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; text-align: center; } .node-cloud { top: 4%; left: 50%; transform: translateX(-50%); } .node-cloud .node-icon { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); } .node-cloud .node-label { color: rgba(59, 130, 246, 0.9); } .node-self { bottom: 10%; left: 4%; } .node-self .node-icon { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.25); } .node-self .node-label { color: rgba(168, 85, 247, 0.9); } .node-onprem { bottom: 10%; right: 4%; } .node-onprem .node-icon { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); } .node-onprem .node-label { color: rgba(245, 158, 11, 0.9); } @keyframes node-float { 0%, 100% { transform: translateY(0) translateX(var(--tx, 0)); } 50% { transform: translateY(-8px) translateX(var(--tx, 0)); } } .node-cloud { --tx: -50%; animation-name: node-float-center; } @keyframes node-float-center { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } /* Connection lines */ .deploy-lines { position: absolute; inset: 0; z-index: 5; } .deploy-lines line { stroke-dasharray: 6 4; animation: dash-flow 1.5s linear infinite; } @keyframes dash-flow { to { stroke-dashoffset: -20; } } /* ═══════════════════════════════════════════ 3D TILT DEPLOYMENT CARDS ═══════════════════════════════════════════ */ .tilt-card { perspective: 800px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .tilt-card-inner { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s; transform-style: preserve-3d; border-radius: 20px; } .tilt-card:hover .tilt-card-inner { transform: rotateY(-4deg) rotateX(3deg) translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06); } /* ═══════════════════════════════════════════ CAPABILITY CARDS ═══════════════════════════════════════════ */ .cap-card { position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .cap-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, #2E6EB5); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .cap-card:hover::before { transform: scaleX(1); } .cap-card:hover { border-color: var(--accent, #2E6EB5); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } /* ═══════════════════════════════════════════ HOSTING MATRIX ═══════════════════════════════════════════ */ .matrix-header { position: relative; } .matrix-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 110, 181, 0.2), transparent); } .faq-item.open .faq-answer { max-height: 300px; } /* Lucide icon sizing */ .icon-sm { width: 18px; height: 18px; } /* Dot bullet from military layout */ .dot-bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; } /* Subtle dot pattern for hero */ .dot-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1px, transparent 0); background-size: 24px 24px; } /* Diagonal stripe for hero accent */ .stripe-accent { background: repeating-linear-gradient(-55deg, transparent, transparent 8px, rgba(255, 255, 255, 0.03) 8px, rgba(255, 255, 255, 0.03) 16px); } .icon-sm { width: 18px; height: 18px; } /* Branch card hover */ .branch-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .branch-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(46, 110, 181, 0.12); border-color: #2E6EB5; } /* Deployment card */ .deploy-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .deploy-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(46, 110, 181, 0.14); } /* ═══════════════════════════════════════════ FIX FOR HOSTING MATRIX (JIT Missing Rules) ═══════════════════════════════════════════ */ /* 1. Enable horizontal scrolling on mobile */ .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } /* 2. Define the specific table column widths */ .grid-cols-\[1\.4fr_1fr_1fr_1fr\] { grid-template-columns: 1.4fr 1fr 1fr 1fr; } /* 3. Prevent text from wrapping in the feature column */ .whitespace-nowrap { white-space: nowrap; }