*, ::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: var(--font-sans), ui-serif, Georgia, 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: var(--font-mono), ui-monospace, 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% !important;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
.container {
max-width: 1536px;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-10 {
inset: 2.5rem;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.-left-\[28px\] {
left: -28px;
}
.-left-\[41px\] {
left: -41px;
}
.-left-\[43px\] {
left: -43px;
}
.-left-\[9999px\] {
left: -9999px;
}
.-top-1\/4 {
top: -25%;
}
.bottom-0 {
bottom: 0px;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-20 {
bottom: 5rem;
}
.bottom-6 {
bottom: 1.5rem;
}
.bottom-\[-0\.16em\] {
bottom: -0.16em;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.left-4 {
left: 1rem;
}
.left-6 {
left: 1.5rem;
}
.right-0 {
right: 0px;
}
.right-28 {
right: 7rem;
}
.right-3 {
right: 0.75rem;
}
.right-6 {
right: 1.5rem;
}
.top-0 {
top: 0px;
}
.top-1 {
top: 0.25rem;
}
.top-1\/2 {
top: 50%;
}
.top-3 {
top: 0.75rem;
}
.top-4 {
top: 1rem;
}
.top-8 {
top: 2rem;
}
.top-\[24\.5px\] {
top: 24.5px;
}
.top-\[31\.5px\] {
top: 31.5px;
}
.isolate {
isolation: isolate;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-50 {
z-index: 50;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-14 {
margin-top: 3.5rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-20 {
margin-top: 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;
}
.mt-auto {
margin-top: auto;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.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;
}
.hidden {
display: none;
}
.aspect-\[16\/10\] {
aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
aspect-ratio: 16/9;
}
.aspect-\[28\/15\] {
aspect-ratio: 28/15;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.aspect-\[6\/5\] {
aspect-ratio: 6/5;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.h-0 {
height: 0px;
}
.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-2\.5 {
height: 0.625rem;
}
.h-28 {
height: 7rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.h-3\/4 {
height: 75%;
}
.h-3\/5 {
height: 60%;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
.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-\[1\.1em\] {
height: 1.1em;
}
.h-\[1\.2em\] {
height: 1.2em;
}
.h-\[150\%\] {
height: 150%;
}
.h-\[15px\] {
height: 15px;
}
.h-\[18px\] {
height: 18px;
}
.h-\[280px\] {
height: 280px;
}
.h-\[2px\] {
height: 2px;
}
.h-\[46px\] {
height: 46px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-\[70vh\] {
min-height: 70vh;
}
.min-h-\[88vh\] {
min-height: 88vh;
}
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: 0px;
}
.w-1 {
width: 0.25rem;
}
.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-2\.5 {
width: 0.625rem;
}
.w-28 {
width: 7rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-4 {
width: 1rem;
}
.w-4\/5 {
width: 80%;
}
.w-48 {
width: 12rem;
}
.w-5 {
width: 1.25rem;
}
.w-56 {
width: 14rem;
}
.w-6 {
width: 1.5rem;
}
.w-64 {
width: 16rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-9 {
width: 2.25rem;
}
.w-\[15px\] {
width: 15px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[26px\] {
width: 26px;
}
.w-\[320px\] {
width: 320px;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.w-px {
width: 1px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[760px\] {
min-width: 760px;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-\[1040px\] {
max-width: 1040px;
}
.max-w-\[1180px\] {
max-width: 1180px;
}
.max-w-\[52ch\] {
max-width: 52ch;
}
.max-w-\[572px\] {
max-width: 572px;
}
.max-w-\[66\%\] {
max-width: 66%;
}
.max-w-\[75\%\] {
max-width: 75%;
}
.max-w-container {
max-width: 1200px;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-xl {
max-width: 36rem;
}
.max-w-xs {
max-width: 20rem;
}
.flex-1 {
flex: 1 1 0%;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.origin-center {
transform-origin: center;
}
.origin-top {
transform-origin: top;
}
.-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));
}
.-translate-y-1\/2 {
--tw-translate-y: -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));
}
.translate-x-4 {
--tw-translate-x: 1rem;
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));
}
.translate-x-\[20px\] {
--tw-translate-x: 20px;
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));
}
.translate-x-\[2px\] {
--tw-translate-x: 2px;
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));
}
.rotate-3 {
--tw-rotate: 3deg;
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));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
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;
}
.touch-none {
touch-action: none;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize {
resize: both;
}
.scroll-mt-28 {
scroll-margin-top: 7rem;
}
.list-none {
list-style-type: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.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;
}
.items-baseline {
align-items: baseline;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
.gap-14 {
gap: 3.5rem;
}
.gap-16 {
gap: 4rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-x-12 {
-moz-column-gap: 3rem;
column-gap: 3rem;
}
.gap-x-5 {
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.gap-y-7 {
row-gap: 1.75rem;
}
.gap-y-9 {
row-gap: 2.25rem;
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * 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-3\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * 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));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-line > :not([hidden]) ~ :not([hidden]) {
border-color: var(--color-line);
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-clip {
overflow-x: clip;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-\[26px\] {
border-radius: 26px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-pill {
border-radius: 100px;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-bl-sm {
border-bottom-left-radius: 0.125rem;
}
.rounded-br-sm {
border-bottom-right-radius: 0.125rem;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-l {
border-left-width: 1px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-t {
border-top-width: 1px;
}
.border-dashed {
border-style: dashed;
}
.border-accent {
border-color: var(--color-accent);
}
.border-accent2 {
border-color: var(--color-accent2);
}
.border-accent3 {
border-color: var(--color-accent3);
}
.border-accent4 {
border-color: var(--color-accent4);
}
.border-bg {
border-color: var(--color-bg);
}
.border-line {
border-color: var(--color-line);
}
.bg-accent {
background-color: var(--color-accent);
}
.bg-accent2 {
background-color: var(--color-accent2);
}
.bg-accent3 {
background-color: var(--color-accent3);
}
.bg-accent4 {
background-color: var(--color-accent4);
}
.bg-bg {
background-color: var(--color-bg);
}
.bg-bg-deep {
background-color: var(--color-bg-deep);
}
.bg-black\/55 {
background-color: rgb(0 0 0 / 0.55);
}
.bg-hero {
background-color: var(--color-hero-bg);
}
.bg-ink {
background-color: var(--color-ink);
}
.bg-line {
background-color: var(--color-line);
}
.bg-surface {
background-color: var(--color-surface);
}
.bg-surface-hover {
background-color: var(--color-surface-hover);
}
.bg-transparent {
background-color: transparent;
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-bg {
--tw-gradient-from: var(--color-bg) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/90 {
--tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/85 {
--tw-gradient-from: rgb(255 255 255 / 0.85) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/40 {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/40 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.fill-accent {
fill: var(--color-accent);
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-3\.5 {
padding: 0.875rem;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-7 {
padding: 1.75rem;
}
.p-8 {
padding: 2rem;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.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-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.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-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-24 {
padding-bottom: 6rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pt-2\.5 {
padding-top: 0.625rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-32 {
padding-top: 8rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-heading {
font-family: var(--font-heading), ui-serif, Georgia, serif;
}
.font-sans {
font-family: var(--font-sans), ui-serif, Georgia, serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.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-\[17px\] {
font-size: 17px;
}
.text-\[24vw\] {
font-size: 24vw;
}
.text-\[26px\] {
font-size: 26px;
}
.text-\[28px\] {
font-size: 28px;
}
.text-\[32px\] {
font-size: 32px;
}
.text-\[36px\] {
font-size: 36px;
}
.text-\[40px\] {
font-size: 40px;
}
.text-\[8px\] {
font-size: 8px;
}
.text-\[9px\] {
font-size: 9px;
}
.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-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[0\.95\] {
line-height: 0.95;
}
.leading-\[1\.1\] {
line-height: 1.1;
}
.leading-\[1\.1em\] {
line-height: 1.1em;
}
.leading-\[1\.2em\] {
line-height: 1.2em;
}
.leading-\[1\.4\] {
line-height: 1.4;
}
.leading-\[1\.5\] {
line-height: 1.5;
}
.leading-\[28px\] {
line-height: 28px;
}
.leading-none {
line-height: 1;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.tracking-\[0\.16em\] {
letter-spacing: 0.16em;
}
.tracking-\[\] {
letter-spacing: ;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-tighter {
letter-spacing: -0.05em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-accent {
color: var(--color-accent);
}
.text-accent-on {
color: var(--color-accent-ink);
}
.text-accent2 {
color: var(--color-accent2);
}
.text-accent3 {
color: var(--color-accent3);
}
.text-accent4 {
color: var(--color-accent4);
}
.text-chip {
color: var(--color-chip);
}
.text-ink {
color: var(--color-ink);
}
.text-line {
color: var(--color-line);
}
.text-muted {
color: var(--color-muted);
}
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
color: rgb(255 255 255 / 0.7);
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-\[0\.035\] {
opacity: 0.035;
}
.opacity-\[0\.09\] {
opacity: 0.09;
}
.mix-blend-multiply {
mix-blend-mode: multiply;
}
.mix-blend-overlay {
mix-blend-mode: overlay;
}
.mix-blend-difference {
mix-blend-mode: difference;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-\[0_10px_40px_-14px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
--tw-shadow: 0 10px 40px -14px rgba(0,0,0,0.25);
--tw-shadow-colored: 0 10px 40px -14px 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-\[0_10px_40px_-14px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
--tw-shadow: 0 10px 40px -14px rgba(0,0,0,0.6);
--tw-shadow-colored: 0 10px 40px -14px 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-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
--tw-shadow: 0 1px 3px rgba(0,0,0,0.35);
--tw-shadow-colored: 0 1px 3px 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-\[0_20px_40px_-28px_rgba\(20\2c 19\2c 15\2c 0\.35\)\] {
--tw-shadow: 0 20px 40px -28px rgba(20,19,15,0.35);
--tw-shadow-colored: 0 20px 40px -28px 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-\[0_20px_50px_-20px_rgba\(20\2c 19\2c 15\2c 0\.35\)\] {
--tw-shadow: 0 20px 50px -20px rgba(20,19,15,0.35);
--tw-shadow-colored: 0 20px 50px -20px 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-card {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.32);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 1px 3px 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);
}
.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);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
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);
}
.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-blur-2xl {
--tw-backdrop-blur: blur(40px);
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(4px);
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-xl {
--tw-backdrop-blur: blur(24px);
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-\[filter\] {
transition-property: filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[max-width\2c padding\] {
transition-property: max-width,padding;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[top\2c opacity\2c transform\] {
transition-property: top,opacity,transform;
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-opacity {
transition-property: opacity;
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-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.ease-\[cubic-bezier\(0\.65\2c 0\2c 0\.35\2c 1\)\] {
transition-timing-function: cubic-bezier(0.65,0,0.35,1);
}
.ease-\[cubic-bezier\(0\.76\2c 0\2c 0\.24\2c 1\)\] {
transition-timing-function: cubic-bezier(0.76,0,0.24,1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Design tokens. :root/.light is the default palette every page renders
with. .dark is a real, site-wide second theme — see
components/ThemeProvider.tsx (wraps the app in app/layout.tsx) and
components/ThemeToggle.tsx (the switch in the footer): next-themes
toggles the "dark" class on , which flips every one of these
custom properties in one step, no per-component dark: variants needed.
Values below were already tuned as a complete dark palette before the
toggle existed; enabling it only required wiring the class through, plus
a handful of components that had a hardcoded hex value instead of
reading these tokens (see Hero.tsx, HeroVideo.tsx, GlassCard.tsx, and
the .bg-hex-grid / .bg-dot-grid patterns below).
.light is kept only as an alias of :root, purely so the selector still
resolves if it's ever referenced. It used to also be applied as a literal
class on alternating page sections (bg-surface/bg-bg "banding" — see
CTASection/StatBand/QuoteBlock/TestimonialsMarquee/LogoBand's `tone`
prop and the section wrappers in each route's page.tsx) to force those bands
into the light palette. That broke dark mode outright: any section
wrapped in .light stayed permanently light no matter the toggle state,
which is why those bands used to render as a jarring white stripe down
an otherwise-dark page. Fixed by dropping the forced .light class from
every one of those call sites — the bg-surface/bg-bg tokens alone
already track whichever theme is active, so the alternating-band look
is preserved within each theme instead of being pinned to one. */
:root,
.light {
/* Site background: revision note — this was a cool white-with-a-hint-
of-blue (#eef4ff/#e0eafc), chosen before the accent system converged
onto a single gold family. Once gold became the site's only accent,
that cool blue undertone started working against it: every card,
border, and chip on the page reads warm (see --color-line,
--color-chip-from/to, and the gold accents themselves below), but
the page itself was the one cool note in an otherwise warm system —
and Hero sections were already pinned to a warm cream
(--color-hero-bg, untouched below) specifically because that tone
was judged to work, leaving the rest of the page as the odd one
out. This pass drops the blue undertone for a warm ivory/parchment
that sits close to that same hero cream, so the whole page now
reads as one coherent warm-neutral ground instead of two competing
tones. Every text/accent pairing below was re-checked against WCAG
AA on the new values and lands within a few hundredths of a point
of the old ratios (the luminance of old vs. new bg is nearly
identical — only the hue shifted, not the lightness), so nothing
that passed before regressed:
--color-line (#b8ac93) vs new bg: 2.05:1 (was 2.03:1 — hairline,
not text)
--color-muted (#6b6a63) vs new bg: 4.95:1 (was ~4.8:1)
--color-accent (#84671c) vs new bg: 4.86:1 (was 4.83:1)
--color-accent2 (#6b5518) vs new bg: 6.52:1 (was 6.47:1)
--color-accent3 (#9c6a1a) vs new bg: 4.26:1 (was 4.24:1 — large
text only, unchanged
caveat)
--color-accent4 (#5a4713) vs new bg: 8.16:1 (was 8.11:1) */
--color-bg: #f8f4ec;
--color-bg-deep: #efe6d3;
/* Hero sections (video hero + hex-grid heroes) pin their base tone to
this token instead of --color-bg, so the site-wide background color
can change freely without touching hero atmosphere — the original
warm cream the hero backdrops were tuned against. Left untouched:
it's now close enough to the new --color-bg above that the two read
as one continuous tone across a page instead of two different ones,
which is the point of this pass — no separate re-tuning needed. */
--color-hero-bg: #f7f6f3;
--color-surface: #ffffff;
/* Was a cool pale-blue tint (#eef3fb) matching the old bg's undertone;
now a warm parchment tint so a hovered card/row shifts toward the
page's own warm ground instead of introducing a stray cool note. */
--color-surface-hover: #f4eee0;
/* Card/divider borders — this token is read sitewide (ValueCard,
ServiceCard, IndustryCard, Footer, forms, etc.). It used to be
#dbe3f0: barely a shade off the #eef4ff page background and the
#ffffff card surface, so on a real screen it read as a near-white
hairline rather than an intentional edge — reported back as
"borders are still white" after the .btn-primary hover ring alone
was fixed. A first pass made it a clearly-toned slate-blue
(#aab8d6); moved again just below to a warm taupe-gray instead, so
it doesn't reintroduce a stray blue note now that the accent system
(below) has been reduced to a single gold family — see that comment
for the full "fewer colors" rationale. Still plenty of separation
from --color-bg/--color-surface to read as a deliberate line. */
--color-line: #b8ac93;
--color-ink: #14130f;
--color-muted: #6b6a63;
/* Primary accent, reduced to ONE hue family (was purple/blue/violet/
teal — four unrelated colors across accent/accent2/accent3/accent4,
plus a fifth indigo for --color-chip). Per direct request ("use less
colors... make it rich feel and luxurious"): four competing hues is
the opposite of restrained luxury, and reads as generic "AI slop"
besides (purple-on-white is the textbook example this design
system's own skill explicitly calls out to avoid). Converged onto
the same antique-gold family already established as the site's
signature color in dark mode and on /noir (see .dark and
.noir-theme below, and their own "one hue, three values" comments —
this just extends that already-proven move to the default light
theme instead of leaving it as the odd one out). Gold reads darker/
more saturated here than in dark mode purely because it now has to
hold contrast against a light page instead of a near-black one —
same family, same brand, tuned per-theme. Every value below re-
checked against WCAG AA on both --color-bg and --color-surface (the
two backgrounds text-accent* actually renders on):
accent #84671c bg 4.83:1 / surface 5.33:1
accent2 #6b5518 bg 6.47:1 / surface 7.15:1
accent3 #9c6a1a bg 4.24:1 (large text only, e.g. StatBand's
32-38px numbers) / surface 4.68:1
accent4 #5a4713 bg 8.11:1 / surface 8.95:1
-ink variants are effectively unused (no component currently fills
an accent color solid and puts text on top — see IconBadge/chips,
which use white text or a low-opacity tint instead), kept as a warm
cream for whenever that changes rather than the old purple-tinted
near-white. */
--color-accent: #84671c;
--color-accent-ink: #fdf8ec;
--color-accent2: #6b5518;
--color-accent3: #9c6a1a;
--color-accent3-ink: #fdf8ec;
--color-accent4: #5a4713;
--color-accent4-ink: #fdf8ec;
--color-chip: #84671c;
--color-chip-from: #f7f0dc;
--color-chip-to: #fbf8f0;
/* CTA button treatment, isolated from --color-accent on purpose — was a
placeholder dark navy ("for now", per the original comment this
replaces) that shipped without ever being revisited: a cool navy pill
sitting in an otherwise warm, all-gold "restrained luxury" page reads
as a leftover from a different design, not a considered choice — the
single most visible "this doesn't match" moment on the whole light
theme, since it's the primary CTA rendered on nearly every page. Retuned
to the same antique-gold family as --color-accent (not the identical
value — kept as its own token so the button's fill/glow/ink can still
be retuned independently of body-text accent color later, per this
block's original reasoning). Checked against WCAG AA, not eyeballed:
cta-ink #fdf8ec on cta-base #8a6a1e: 5.04:1 (button text)
cta-base #8a6a1e on --color-surface (white): 4.79:1 (component
boundary, informational — text contrast above is what governs
legibility) */
--color-cta-base: #8a6a1e;
--color-cta-glow: #ddc48d;
--color-cta-ink: #fdf8ec;
/* .btn-secondary's actual outline (not hover-only, unlike dark mode's
use of this token) — a mid gold clearly visible against both
--color-surface (white cards) and --color-bg (warm ivory), and, on
.btn-primary, the hover hairline read as the gold catching a bit more
light rather than a generic ring. */
--color-cta-border: #a9863a;
/* Globe.tsx canvas colors — a flat, single-tone palette independent of
the four-tone accent rotation (see that file's own header comment),
kept as tokens (not hardcoded hex in the component) purely so a
second theme like Noir can override them without touching canvas
drawing code. globe-line was still the old blue (#4b63d6) — the one
saturated non-gold hue left after the accent reduction above — so
it's gold now too, matching how .dark below already draws its
globe's connection lines in gold. globe-dot stays a desaturated
navy-charcoal; it's the sphere's structural mesh, not a "color" in
the accent sense (same reasoning the .dark globe tokens already
apply to their own dot/label-bg values). */
--color-globe-dot: #2c303d;
--color-globe-line: #84671c;
--color-globe-label-bg: #151a2b;
--color-globe-label-text: #ffffff;
--color-globe-label-border: transparent;
/* The isometric illustration families (ValueIllustrations, ProcessIllustrations,
BenefitIllustrations, IndustryIsoIllustrations, ServiceIsoIllustrations,
illustrations/IndustryAbstracts — every file using the
`color-mix(in srgb, var(--color-accentN) X%, white)` pattern) lighten
their accent color toward literal white to get a bright "catching
light" highlight against a dark card. On this light theme's own pale
cards, the same math runs backwards: a low accent percentage (e.g.
22%, 30%) mixed mostly with white washes out to near-invisible against
a white/ivory surface — reported back directly ("illustrations are not
visible on light theme"). This token is what those files mix toward
instead of the literal white keyword: here, the deepest gold in the
rotation, so even a heavily-diluted mix stays a visible, saturated
gold rather than fading to near-white-on-white. .dark and .noir-theme
redefine this back to a bright tone below/further down, since their
dark grounds are exactly the case this lightening math was designed
for and should render unchanged. */
--color-illustration-pop: var(--color-accent4);
/* "Engineering blueprint" illustration system tokens (components/
illustrations/blueprint-helpers.tsx — IsoMass/IsoScaffoldGrid/Node/
Pin, plus the shared .blueprint-form CSS rule below) — every one of
the 13 scenes (6 service + 6 industry + hero-corner) reads these
instead of a hardcoded per-layer opacity number, so retuning one
theme's illustration richness is one edit here, not 13 edits across
components (see this block's own "one token block each" rationale).
Not the same value as --color-accent on purpose: --color-accent above
is deliberately darkened/desaturated to pass WCAG AA as rendered TEXT
(see that token's own comment). Illustrations are decorative
(aria-hidden), never bound by that contrast requirement, and reusing
the muted text color here read muddy/olive against this page's pale
#f8f4ec ground — reported back directly ("lost the golden essence").
--illus-gold is a separate, richer amber/bronze tuned by eye against
the actual page background instead.
Opacity floors are substantially higher than dark mode's (see .dark's
own copy of these tokens for the full explanation): a gold fill at
the same opacity percentage reads as rich against near-black and
washed-out/pale against this light ground, so every layer needed its
own higher floor, not the dark values reused. */
--illus-gold: #b8863a;
--illus-scaffold-op: 0.4;
--illus-mass-top-op: 0.5;
--illus-mass-side-op: 0.78;
--illus-form-op: 0.6;
--illus-node-op: 0.75;
}
.dark {
/* "Gold Glass Cinematic" — superseded the earlier deep-purple-black
ground per direct request, working from a supplied reference build
("Amber & Bull — The Decision Arc") that names its own ground
explicitly: a true, mineral #0A0A0A rather than any tinted near-
black, because its whole glass-card formula (--glass-bg below,
rgb(255 255 255 / 0.03)) is calibrated against that exact value —
"this only works on a dark ground: rgba(255,255,255,0.03) over
white resolves to white, 1.00:1." Purple is dropped entirely rather
than blended in: the reference's own dark-mode-only justification is
that its glass math has one right answer, not a family of tints, so
layering purple back in would undo the reason the ground is this
dark in the first place. Gold remains the site's one accent (see
accent/2/3/4 below) — this pass only retunes the ground and the
exact gold hex family to match the reference's own measured values,
it doesn't reopen the earlier "reduce to one hue" decision. See
.dark body further down for the page-wide film+gold background
(replacing the old two-purple-glow wash), and .dark .blueprint-card.
bg-surface for the glass card treatment itself. Checked against WCAG
AA below — see the contrast list at the end of this block. */
--color-bg: #0a0a0a;
--color-bg-deep: #050505;
--color-hero-bg: #0a0a0a;
/* A raised, opaque near-black — NOT the reference's literal translucent
rgba(255,255,255,0.03) card fill. Every other --color-surface
consumer in this codebase (color-mix() illustration-frame tints,
modals, the mobile menu panel, dropdown backgrounds) assumes an
opaque value; making the token itself translucent would ripple into
all of those in ways that are hard to fully audit in one pass. The
glass look is layered on top instead, additively and only where it's
safe: see .dark .bg-surface below, which derives an actual
translucent + blurred surface FROM this opaque token via color-mix,
for the many cards that render the plain `bg-surface` utility,
without touching what this token itself resolves to. */
--color-surface: #151515;
--color-surface-hover: #1c1c1c;
/* Card/divider borders — now the reference's own glass-border value
directly: a translucent white hairline (rgb(255 255 255 / 0.10))
rather than a solid hex. A border can safely carry alpha regardless
of what's rendered behind it (unlike a fill), so this is a drop-in
replacement for the old solid mauve-brass blend — every existing
border-line usage across the site becomes a real glass edge for
free, no component changes needed. */
--color-line: rgb(255 255 255 / 0.1);
--color-ink: #f2f0ea;
--color-muted: #b8afa0;
/* Primary color: the reference's own "warm metallic" gold family,
measured against its #0A0A0A ground (its own comment: 8.87:1 /
10.94:1 / 12.97:1 for base/light/hover) — re-verified here against
this file's actual hex values below, landing within a few
hundredths of those figures. accent2/accent4 fill the "deep brass" /
"deepest copper" roles the site's existing four-value rotation
needs (ServicesShowcase, the industry/value/process card grids) that
the reference itself only needed three of; both were tuned the same
way as every other accent value in this file — checked against WCAG
AA on the actual --color-bg, not borrowed from the reference
verbatim. --color-accent-ink is a warm near-black (not white) — see
the contrast note below. */
--color-accent: #c8a97f;
--color-accent-ink: #171310;
--color-accent2: #a9895f;
--color-accent3: #d9bc95;
--color-accent3-ink: #171310;
--color-accent4: #93764f;
--color-accent4-ink: #171310;
--color-chip: #c8a97f;
--color-chip-from: #2a2115;
--color-chip-to: #151515;
/* Primary CTA button: same gold→near-white radial sheen mechanism as
before, just re-hexed to the new gold family's exact values so the
button reads as part of the same system as every other gold surface
on the page instead of the older, slightly different d4af47/fbf3de
pairing. */
--color-cta-base: #c8a97f;
--color-cta-glow: #f3e6c9;
--color-cta-ink: #171310;
--color-cta-border: #93764f;
/* Globe.tsx canvas colors — dot stays a desaturated structural gray
(the sphere mesh, not an accent); line/border re-hexed to the new
gold family. */
--color-globe-dot: #6b6f82;
--color-globe-line: #c8a97f;
--color-globe-label-bg: #050505;
--color-globe-label-text: #f2f0ea;
--color-globe-label-border: #93764f;
/* Unchanged from the illustrations' original literal white — this dark
ground is exactly what that lightening math was built for. See the
light theme's own --color-illustration-pop above for why it needed a
different value there. */
--color-illustration-pop: #ffffff;
/* "Engineering blueprint" illustration system tokens — see the light
theme's own copy of these (above, in :root/.light) for the full
rationale on why this is a token block rather than hardcoded numbers
scattered across 13 components. --illus-gold reuses --color-accent
directly here (not a second hex): dark mode's accent already reads as
rich, saturated gold against #0a0a0a without needing text-contrast
tuning to fight — it's the light theme's AA-darkened accent that
needed a separate, richer token, not this one. Opacity floors below
are the values every illustration was already using before this
token pass (IsoMass's side faces previously hardcoded
var(--color-bg-deep) instead of an accent tone — see IsoMass's own
comment in blueprint-helpers.tsx for that fix — and its top face plus
Cybersecurity's own hand-drawn faces used two different numbers,
0.14 vs 0.28; standardized here on the higher, already-correct
Cybersecurity value so every illustration's volume reads the same). */
--illus-gold: var(--color-accent);
--illus-scaffold-op: 0.32;
--illus-mass-top-op: 0.28;
--illus-mass-side-op: 0.58;
--illus-form-op: 0.68;
--illus-node-op: 0.62;
/* "Gold Glass Cinematic" system tokens — lifted from the Amber & Bull
reference's own GLASS token layer, dark-mode only (see this block's
header comment for why: the math is calibrated to this file's exact
--color-bg and doesn't have a light-theme equivalent). Consumed by
.dark .blueprint-card.bg-surface (the glass card fill + its top glow)
— the page-wide backdrop those glass cards sit over is .dark body's
own film+gold treatment further down, which uses the reference's
literal hex values directly rather than these tokens (see that
rule's own comment for why). --glass-border-hover and --glow-gold
(an inset border brighten and a box-shadow ambient halo,
respectively) were dropped per direct request — hover feedback is
now the one shared gradient-border ring, see .blueprint-card::after
below, not a per-theme box-shadow/border addition. */
--glass-bg: rgb(255 255 255 / 0.03);
--glass-bg-hover: rgb(255 255 255 / 0.055);
--glass-blur: blur(14px);
/* Contrast, checked against WCAG AA, not eyeballed —
accent (base gold) #c8a97f on bg #0a0a0a: 8.90:1
accent2 (deep brass) #a9895f on bg #0a0a0a: 6.06:1
accent3 (light gold) #d9bc95 on bg #0a0a0a: 10.92:1
accent4 (deepest copper) #93764f on bg #0a0a0a: 4.66:1
ink #f2f0ea on bg #0a0a0a: 17.37:1
muted #b8afa0 on bg #0a0a0a: 9.12:1
line rgb(255 255 255 / 0.10) — a translucent hairline, not text;
reads at roughly the same visual weight as the old 4.13:1
solid line against the new, darker surface underneath it
near-black #171310 on gold #c8a97f: 8.30:1 (CTA button
text — white-on-gold
fails)
near-black #171310 on cream #f3e6c9: 14.93:1 (CTA gradient's
near-white end) */
}
/* ---------------------------------------------------------------------
Noir & Gold — a straight dark + gold recolor of the SAME site (see
/noir), not a redesign. Applied by wrapping that route's chrome +
content in a single ".noir-theme" element (see components/SiteChrome.tsx);
everything below is scoped to that subtree only, so the default light
site is untouched.
Mechanism: this reuses every one of the site's existing --color-*
custom properties (the same ones :root/.light define) rather than
inventing parallel ones — so any existing token-driven component
(SectionHeading, Logo, .btn-primary/.btn-secondary, Header, Footer,
Reveal, etc.) automatically renders correctly in gold-on-black the
moment it's nested under .noir-theme, with zero per-component edits.
An earlier draft of this also swapped in a serif display font and
forced every corner to be square, making /noir a genuinely different
sub-brand rather than a dark version of the same page — per explicit
feedback that wasn't wanted, so this block is colors only now:
fonts, corner radii, and every component's markup stay exactly as
they are on the light site.
Contrast: every text pairing below was checked against WCAG AA before
picking it, not eyeballed —
gold #c9a227 on bg #2b2b2f: 5.83:1 (passes AA body text)
ink #f2f0ea on bg #2b2b2f: 12.37:1
muted #b0aa9e on bg #2b2b2f: 6.10:1 (passes AA body text)
near-black text on the gold button: 7.03:1 (why --color-cta-ink is
near-black, not white —
white-on-gold is 2.42:1
and fails outright) */
.noir-theme {
/* A medium-dark charcoal — the first two passes (near-black #0a0a0a,
then a barely-lighter #17171b) both still read as "too dark." This
is a clearly lighter dark-gray family, the kind most dark-mode
products actually ship (still clearly "dark mode," still passes
WCAG AA on every pairing below — see the contrast notes) rather
than crushed-black. */
--color-bg: #2b2b2f;
--color-bg-deep: #1c1c1f;
--color-hero-bg: #2b2b2f;
--color-surface: #34343a;
--color-surface-hover: #3d3d44;
/* Light gold instead of neutral gray, matching the same border-tint
move made to the default dark theme's --color-line above — one gold
family for borders too, not just the accent tones. Pulled back
toward --color-surface (#34343a) the same way, for the same reason
("very less visible but with gold colored") — was #cbb98e at
6.4:1 against the card surface, now a 42/58 blend at 2.4:1: still
a warm-gold hairline, just a much quieter one. */
--color-line: #736c5d;
--color-ink: #f2f0ea;
--color-muted: #b0aa9e;
/* One hue, three values — deep/standard/bright gold — rather than the
light site's four distinct accent hues. "Monochromatic tone and
gold, white and black" per the brief: every one of these is gold,
never a different color. */
--color-accent: #c9a227;
--color-accent-ink: #1c1c1f;
--color-accent2: #a9841c;
--color-accent3: #e0b93a;
--color-accent3-ink: #1c1c1f;
--color-accent4: #8a6a14;
--color-accent4-ink: #f2f0ea;
--color-chip: #c9a227;
--color-chip-from: #3a3116;
--color-chip-to: #34343a;
--color-cta-base: #c9a227;
--color-cta-glow: #e8c76b;
--color-cta-ink: #1c1c1f;
--color-cta-border: #8a6f28;
background-color: var(--color-bg);
color: var(--color-ink);
/* Globe: on the light theme the sphere itself is white with dark dots;
here the sphere reads --color-bg live (medium-dark charcoal — see
Globe.tsx), so the relationship flips — muted-gold dots and
bright-gold arcs against the dark sphere, a slightly darker label
pill with a thin gold hairline border so it still reads as a
distinct chip sitting on top of the sphere. */
--color-globe-dot: #c9a227;
--color-globe-line: #e0b93a;
--color-globe-label-bg: #1c1c1f;
--color-globe-label-text: #f2f0ea;
--color-globe-label-border: #7d641f;
/* Same reasoning as .dark's own --color-illustration-pop — this route's
ground is dark charcoal, so the illustrations' literal-white lightening
math is correct here unchanged; only the default light theme needed a
different value (see :root/.light's own comment). */
--color-illustration-pop: #f2f0ea;
}
/* Timing tokens for the "engineering blueprint" illustration system
(components/illustrations/*.tsx, lib/useIllustrationInView.ts, and the
.blueprint-* classes further down) — theme-independent (same easing/
duration in light, dark, and noir), so they live in a plain :root block
rather than inside the themed :root/.dark/.noir-theme blocks above. */
:root {
--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 200ms;
--dur-base: 380ms;
--dur-slow: 700ms;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg);
color: var(--color-ink);
}
/* Dark theme only, "Gold Glass Cinematic" — the site's actual page-wide
background, replacing the dot-grid mesh this used to be (per direct,
repeated, increasingly frustrated request for the EXACT background
from the Amber & Bull reference, not an approximation of it: "I want
exact same background the whole page background"). This is that
reference's own .cin-sec-film mechanism, ported as-is rather than
reinterpreted:
1. A real still frame from that reference's own footage — extracted
from the reference file's inline base64 ![]()
(the exact asset its
own "Framework" page uses for this effect, captioned in that file's
source as "The About clip, reused deliberately... near-black with
grey wisps") and saved locally at public/images/bg-film.jpg. Same
family of footage as public/videos/hero.mp4 (the Hero's own video,
pulled from the same reference — see lib/data.ts's heroVideoUrl
comment), just a still rather than the looping clip, which is what
that reference itself uses for page-background duty (its video path
is reserved for the actual Hero component alone).
2. Desaturated (filter: saturate(0) brightness(0.85) — the clip carries
luminance only; every trace of color comes from the gold layer
below it) and screen-blended onto the page ground, so its own
near-black areas resolve exactly to --color-bg and only the wisp
highlights survive.
3. A second, separate pseudo-element lays the reference's exact gold
gradient (#E6CEAD → #C8A97F → #96764A — its own literal hex, not
this file's nearby-but-not-identical accent tokens, since "exact
same" is the ask) on top via mix-blend-mode: overlay, which is what
actually colors the wisps gold rather than gray.
isolation: isolate on the shared selector below contains both blend
modes to this element's own paint, so they can't reach through to
whatever sits behind the page. position: fixed on both pseudo-elements
anchors them to the viewport (not each element's own box), so this
reads as one continuous atmosphere behind the whole scrolling page —
exactly why the reference itself puts the equivalent layers on body,
not on each section individually. section.bg-bg elements go fully
transparent so this one shared backdrop shows through them uniformly,
matching the reference's own real architecture ("body must stay
transparent... html carries the ground... body::before carries the
mesh") instead of a per-section duplicate. */
.dark body {
isolation: isolate;
background-color: var(--color-bg);
}
.dark body::before {
content: "";
position: fixed;
inset: -8%;
z-index: -2;
background-image: url("/images/bg-film.jpg");
background-size: cover;
background-position: center;
filter: saturate(0) brightness(0.85);
mix-blend-mode: screen;
pointer-events: none;
}
.dark body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: linear-gradient(180deg, #e6cead 0%, #c8a97f 47%, #96764a 100%);
mix-blend-mode: overlay;
pointer-events: none;
}
/* Light-theme counterparts of the two pseudo-elements above — not the
same rules just re-scoped, because the blend math doesn't transfer to
a light ground (see this pass's own spec: "screen only ADDS light, so
on a light page it does nothing" / "overlay's output depends heavily
on base luminance"). Each needed a different mechanism, tuned against
the actual --color-bg (#f8f4ec), not just a lower opacity guess.
::before — the same near-black film-grain still used for texture, but
multiply instead of screen (multiply only ever darkens, which is what
reads as "texture" rather than "wash out" on a pale page). The still
is heavily brightened first (filter) so multiplying it in doesn't
crush the page toward black — only its grain/wisp variation should
survive — and the element opacity stays low so this is a felt texture,
not a visible photo. */
.light body::before {
content: "";
position: fixed;
inset: -8%;
z-index: -2;
background-image: url("/images/bg-film.jpg");
background-size: cover;
background-position: center;
filter: saturate(0) brightness(2.3) contrast(0.85);
mix-blend-mode: multiply;
opacity: 0.05;
pointer-events: none;
}
/* ::after — the gold wash, rebuilt from --illus-gold (the richer light-
theme illustration gold, not --color-accent) rather than the dark
theme's literal reference hex values, and soft-light instead of
overlay: soft-light is the gentle sibling of overlay — it nudges
midtones toward the blend color instead of swinging contrast hard both
directions, which is what keeps this a felt warmth instead of a
visible gradient banner on a page this light. Low opacity on top of
that gentler blend mode is deliberately double-restrained; previewed
directly against --color-bg rather than assumed from the dark values. */
.light body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: linear-gradient(
180deg,
color-mix(in srgb, var(--illus-gold) 45%, white) 0%,
var(--illus-gold) 50%,
color-mix(in srgb, var(--illus-gold) 65%, black) 100%
);
mix-blend-mode: soft-light;
opacity: 0.3;
pointer-events: none;
}
.light body {
isolation: isolate;
}
.dark section.bg-bg,
.light section.bg-bg {
background-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading), ui-serif, Georgia, serif;
}
/* Alice (see app/layout.tsx's headingSerif comment for the full context)
ships as a single static weight with no italic face, unlike Fraunces
before it — so every font-heading usage across the site had its
font-weight utility and any italic removed at the className level
instead of leaning on this rule to fake either. This rule now just
pins font-style to normal so nothing accidentally inherits an italic
from a parent; there's no companion .font-heading.italic override
anymore since nothing asks for one. */
.font-heading {
font-style: normal;
}
::-moz-selection {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
::selection {
background-color: var(--color-accent);
color: var(--color-accent-ink);
}
/* Subtle hexagon lattice used behind hero/CTA sections, like the reference
site's tech-pattern backdrop. Kept as a CSS pattern (no image asset). The
stroke color is baked into the data URI (a static SVG can't read a CSS
custom property), so dark mode gets its own copy below with a light
stroke instead of a near-black one that would vanish on a dark hero. */
.bg-hex-grid {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 56 16 56 50 28 66 0 50 0 16Z' fill='none' stroke='%2314130f' stroke-opacity='0.07'/%3E%3Cpath d='M28 34 56 50 56 84 28 100 0 84 0 50Z' fill='none' stroke='%2314130f' stroke-opacity='0.07'/%3E%3C/svg%3E");
background-size: 56px 100px;
}
.dark .bg-hex-grid {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 56 16 56 50 28 66 0 50 0 16Z' fill='none' stroke='%23f6f6f8' stroke-opacity='0.08'/%3E%3Cpath d='M28 34 56 50 56 84 28 100 0 84 0 50Z' fill='none' stroke='%23f6f6f8' stroke-opacity='0.08'/%3E%3C/svg%3E");
background-size: 56px 100px;
}
/* Fine dot-grid fade used at section seams — tied to --color-accent (via
color-mix) rather than a fixed purple, so it follows the same accent
shift dark mode already applies everywhere else. */
.bg-dot-grid {
background-image: radial-gradient(
circle,
color-mix(in srgb, var(--color-accent) 35%, transparent) 1px,
transparent 1px
);
background-size: 18px 18px;
}
/* Tracking nudged from 0.08em toward the Amber & Bull reference's own
tracking-caps convention (0.18em/0.3em on its short uppercase system
labels: "heavy tracking on small uppercase is the whole premium
signal"). Not taken all the way to the reference's own value — this
class is used more broadly here (nav labels, card tags, table
headers, not just short isolated markers), and 0.18em+ read cramped-
then-sparse on the longer strings already in use across the site;
0.14em keeps the same "considered, not default" premium signal
without hurting legibility on those longer labels. */
.font-mono-label {
font-family: var(--font-mono), ui-monospace, monospace;
letter-spacing: 0.14em;
}
/* Nav-link text swap: two stacked labels inside an overflow-hidden window,
soft-masked top/bottom so the incoming/outgoing line fades rather than
hard-clips — the "masked fade" nav treatment referenced from
goodlifemeds.com, adapted to our mono-label nav type. */
.nav-mask {
-webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}
/* One focal phrase per Hero headline (see lib/text.tsx's gradientPhrase
helper) — previously a three-color gradient sweep, which read closer to
a SaaS-marketing trick than a considered brand mark. Luxury sites tend
toward one deliberate accent color used with confidence rather than a
multi-hue effect — so this is now a single solid accent color, still
spent in exactly one place per page. */
.text-gradient {
color: var(--color-accent);
}
/* Dark theme override: the hero's one highlighted phrase renders as an
actual gold → white gradient (per direct request — "gold and white
gradient as primary color"), using background-clip: text rather than
a flat color. Derived from --color-accent via color-mix (not a second
hardcoded hex) so it stays correct if the accent token ever changes.
Light theme is untouched — still the single solid accent color. */
.dark .text-gradient {
background-image: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 15%, white) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
/* The reference's own hero/pagehead signature: its highlighted title
span (.cin-hero h1 .land / .cin-pagehead h1 .land) carries a soft
white glow — text-shadow: 0 0 12px rgb(255 255 255 / 0.40), verbatim
— on top of its solid color. Additive here rather than a replacement:
the gold/white gradient fill above was a deliberate earlier decision
("gold and white gradient as primary color") this keeps intact; a
text-shadow doesn't fight a background-clip:text fill, so both
render together — the reference's glow, this site's own gold. */
text-shadow: 0 0 12px rgb(255 255 255 / 0.4);
}
/* A single, quiet gold glow behind the hex-grid sections (Hero, CTA
bands, the six-continents/globe section, the careers "Why Vyzure"
band, the services methodology band) — replaces an earlier four-color,
four-blob "mesh gradient" wash. One soft glow reads as restraint; four
overlapping colors read as decoration. Light theme keeps exactly this
one gold glow; the dark-mode override just below layers in the actual
"dark purple gradient with shades" per direct request — see the .dark
override for why.
Mixes from --illus-gold, not --color-accent: this glow is decorative
atmosphere, the same category as the illustration fills (see that
token's own comment) rather than text needing AA contrast, and the
muted text-accent read as a dull smudge here rather than a warm glow —
same "lost the golden essence" fix as the illustrations themselves. */
.bg-aurora {
background-image: radial-gradient(
46% 52% at 16% 20%,
color-mix(in srgb, var(--illus-gold) 12%, transparent),
transparent
);
}
/* Dark-mode only, "Gold Glass Cinematic": no longer layers purple glows
behind the gold one — per the reference this was rebuilt from, "one
glow reads as restraint" (its own words for why its hero/CTA-style
bands use exactly one ambient light source, not several competing
ones). This just re-tunes the shared light-theme glow above to read
correctly against the new true-black ground — a touch brighter than
the 8% light-theme mix, since gold needs more lift against #0a0a0a
than it does against a pale page — rather than adding any second
color. */
.dark .bg-aurora {
background-image: radial-gradient(
46% 52% at 16% 20%,
color-mix(in srgb, var(--color-accent) 16%, transparent),
transparent 70%
);
}
/* The one chip/pill treatment used site-wide (see components/Chip.tsx) —
a soft indigo gradient, kept deliberately separate from --color-accent
everywhere else so it reads as its own consistent "tag" language rather
than one more accent color. */
.chip {
background-image: linear-gradient(90deg, var(--color-chip-from), var(--color-chip-to));
}
/* Primary/secondary CTA buttons, site-wide — a dark radial-gradient
"sheen" (lighter glow top-center, fading to a near-black base) instead
of the flat solid-accent pill this replaced, plus a plain outlined
secondary to match. Deliberately its own --color-cta-* token set (not
--color-accent) so re-coloring the whole site's primary color later
doesn't also require re-tuning every button's gradient by hand.
Hover treatment: kept entirely inside the button, not around it — the
top-center sheen brightens toward white (the radial gradient's light
stop mixes in white) and a thin hairline appears just inside the edge
(an inset box-shadow, so it doesn't add layout-shifting border box
size). That hairline is tinted from --color-cta-border — each theme's
own muted bronze/gold-on-dark or soft-gray-on-light border tone — not
a flat white, so it reads as the button's own edge catching light
rather than a generic white ring dropped on top. Reads as the existing
dark gradient catching a bit more light on hover rather than a glow
effect. Kept on .btn-primary itself (not per-usage) so every CTA
across the site (hero, header, forms, footer, 404) picks up the same
treatment for free. */
.btn-primary {
background-image: radial-gradient(130% 160% at 50% -35%, var(--color-cta-glow), var(--color-cta-base) 55%);
color: var(--color-cta-ink);
box-shadow: inset 0 0 0 1px transparent;
transition: background-image 220ms ease, box-shadow 220ms ease;
}
.btn-primary:hover {
background-image: radial-gradient(
130% 160% at 50% -35%,
color-mix(in srgb, var(--color-cta-glow) 65%, white 35%),
var(--color-cta-base) 55%
);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-cta-border) 85%, transparent);
}
.btn-secondary {
background-color: var(--color-surface);
border: 1px solid var(--color-cta-border);
color: var(--color-ink);
}
/* Partner/certification logos (components/LogoBand.tsx) — AWS,
Microsoft, and Google Cloud's own SVG files, which are dark
wordmarks/strokes on transparent backgrounds and go nearly invisible
on the dark theme's charcoal background. brightness(0) crushes every
visible pixel (regardless of its original hue) to solid black while
preserving the SVG's transparency, then invert(1) flips that to
solid white — the standard technique for recoloring an arbitrary
logo mark for a dark background without keeping a second set of
vendor assets. Light theme is untouched (no filter). */
.dark .brand-logo-img {
filter: brightness(0) invert(1);
opacity: 0.85;
}
/* Infinite testimonials marquee (components/TestimonialsMarquee.tsx): the
track renders the testimonial list twice back-to-back and slides exactly
-50% (one full copy's width) so the loop point is seamless. Pausing on
hover/focus lets someone actually stop and read a card. */
@keyframes marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.marquee-track {
animation: marquee-scroll linear infinite;
animation-duration: var(--marquee-duration, 42s);
}
.marquee-track:hover,
.marquee-track:focus-within {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
}
/* Idle motion for the site's isometric 3D illustrations (ValueIllustrations,
ProcessIllustrations, BenefitIllustrations, SectorIllustrations — every
file built on isoCubeFaces()). Plain CSS, not GSAP, on purpose: these
illustration files are deliberately plain SVG-returning functions with no
"use client" directive (see each file's own header comment — they render
through dynamic Record lookups from Server Components, which breaks if
the file becomes client-only), so the motion has to live in a stylesheet
these server-rendered SVGs can simply reference by class/inline style,
not in a useEffect. Every one of these is inert automatically under the
*,*::before,*::after reduced-motion override just below — no per-keyframe
@media query needed.
Naming: "iso-" prefix, one keyframe per motion *character* (float / spin
/ pulse / dash) rather than one per scene, reused across every
illustration file so three different scenes drifting at the same rhythm
read as one system, not six unrelated fidgets. Amplitudes stay small
(2–5px, 0.08–0.35 opacity swings) — idle presence, not attention-grabbing
motion; nothing here should be the first thing a visitor's eye goes to. */
@keyframes iso-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes iso-float-sm {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-2.5px);
}
}
@keyframes iso-spin-slow {
to {
transform: rotate(360deg);
}
}
@keyframes iso-pulse-ring {
0%,
100% {
opacity: 0.35;
transform: scale(1);
}
50% {
opacity: 0.75;
transform: scale(1.1);
}
}
@keyframes iso-pulse-fade {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 0.95;
}
}
@keyframes iso-dash-flow {
to {
stroke-dashoffset: -24;
}
}
.iso-float {
animation: iso-float 5.5s ease-in-out infinite;
}
.iso-float-sm {
animation: iso-float-sm 4.5s ease-in-out infinite;
}
.iso-float-slow {
animation: iso-float 7s ease-in-out infinite;
}
.iso-spin-slow {
animation: iso-spin-slow 14s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
.iso-pulse-ring {
animation: iso-pulse-ring 3.2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.iso-pulse-fade {
animation: iso-pulse-fade 2.6s ease-in-out infinite;
}
.iso-dash-flow {
animation: iso-dash-flow 1.4s linear infinite;
}
/* "Engineering blueprint" illustration system — the 12 service/industry
scenes in components/illustrations/*.tsx plus the hero-corner scene in
Hero.tsx. A deliberately different motion register from the .iso-*
family above: entrance is a one-shot reveal driven by
lib/useIllustrationInView.ts (an IntersectionObserver toggling `.is-in`
once and `.is-visible` live), not an always-on idle drift — "motion is
rare and specific, not everywhere" is the premium signal the spec this
was built from calls out explicitly. Every illustration's four layers
(scaffold, mass, form, detail) share these same few classes rather than
each defining its own transition, so the whole system reads as one
considered motion language instead of 12 bespoke ones.
Layers 1-2 (scaffold + mass): both fade+scale in together, no stagger
between the two — see .blueprint-scaffold/.blueprint-mass below. */
.blueprint-scaffold,
.blueprint-mass {
opacity: 0;
transform: scale(0.96);
transform-box: fill-box;
transform-origin: center;
transition: opacity var(--dur-base) var(--ease-entrance), transform var(--dur-base) var(--ease-entrance);
}
.is-in .blueprint-scaffold,
.is-in .blueprint-mass {
opacity: 1;
transform: scale(1);
}
/* Layer 3 (form): the silhouette stroke "draws" itself via a normalized
pathLength — every in this system
sets the SVG `pathLength={1}` attribute, so stroke-dasharray/dashoffset
here work identically regardless of the path's real geometry, no
per-path length math needed. Starts 100ms after the mass layer per the
spec's own stagger. Hover raises stroke-opacity (not stroke-dasharray)
— see the .group:hover rule below — so the outline stays fully drawn
once revealed and only brightens on hover. */
.blueprint-form {
stroke-dasharray: 1;
stroke-dashoffset: 1;
/* Was a single hardcoded 0.68 for both themes — replaced with the
shared --illus-form-op token (0.68 in dark, 0.6 in light — see that
token's own comment in :root/.light and .dark) so this rule joins
the rest of the "engineering blueprint" system's per-theme
calibration instead of being the one layer still hand-tuned outside
it. */
stroke-opacity: var(--illus-form-op);
transition: stroke-dashoffset var(--dur-slow) var(--ease-entrance) 100ms,
stroke-opacity var(--dur-fast) var(--ease-out);
}
.is-in .blueprint-form {
stroke-dashoffset: 0;
}
.group:hover .blueprint-form {
stroke-opacity: 0.9;
}
/* Decorative dash layer: the fine dotted connector lines / pulse rings
layered over a handful of illustrations (AiData's two store lines,
Cybersecurity's rings, ManagedServices' orbit, and their industry-side
counterparts — see useBlueprintDashHover.ts). Unlike every layer above,
these don't reveal on scroll-into-view; they stay invisible at rest and
only "draw" in on hover/focus, driven entirely by GSAP (real geometry
tweens — line endpoints growing, ellipse radii expanding — that a CSS
transition can't reach while still preserving the fine stroke-dasharray
pattern). This rule's only job is the pre-hydration safety net: without
it, these elements would render at full opacity for one frame before
GSAP's mount-time gsap.set() collapses them, which reads as a flash on
a slow connection. GSAP's own inline `opacity` always wins over this
once JS is running, so nothing here fights the animation itself. */
.blueprint-dash {
opacity: 0;
}
/* Layer 4 (detail): nodes/pins pop in with a per-node stagger driven by
the `--m` custom property each one sets inline (its index among the
illustration's own nodes) — 70ms per step, comfortably inside the
spec's 60-80ms band. */
.blueprint-node {
opacity: 0;
transform: scale(0.5);
transform-box: fill-box;
transform-origin: center;
transition: opacity 250ms var(--ease-entrance) calc(var(--m, 0) * 70ms),
transform 250ms var(--ease-entrance) calc(var(--m, 0) * 70ms);
}
.is-in .blueprint-node {
opacity: 1;
transform: scale(1);
}
/* The one focal node per illustration (the "trained" AI node, the
pulsing healthcare cell, the hero's broadcasting center node, etc.) —
breathes only once it has both entered AND is currently on-screen, so
the loop pauses automatically when scrolled away instead of animating
invisibly. Everything else in the scene stays static after entrance;
see this system's own header comment above for why that restraint is
the point. */
.blueprint-node-focal {
transform-box: fill-box;
transform-origin: center;
}
.is-in.is-visible .blueprint-node-focal {
animation: blueprint-breathe 4s var(--ease-in-out) infinite;
}
@keyframes blueprint-breathe {
0%,
100% {
opacity: 0.55;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
/* Hover (card-level `group`, already present on every illustration's host
card — see ServiceIsoCard.tsx/IndustryIndexList.tsx/rolling-list.tsx):
`animation: none` fully replaces the breathing keyframe rather than just
pausing it, so the plain `transform`/`opacity` pair below can take over
with their own quick transition instead of fighting a paused
keyframe's frozen values. Releasing hover falls back to the
.is-in.is-visible rule above, which restarts the loop. */
.group:hover .blueprint-node-focal {
animation: none;
opacity: 1;
transform: scale(1.2);
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* Hero-corner variant only (components/illustrations/
HeroBlueprintIllustration.tsx) — same four layer classes as every card
illustration, but entrance is deliberately held back to land 600ms
after the hero's own title reveal (per the spec) instead of firing the
instant the hero mounts, which — being above the fold — would
otherwise happen almost immediately once useIllustrationInView's
observer reports it in view. Higher specificity than the plain
.blueprint-scaffold/.blueprint-mass/.blueprint-form/.blueprint-node
rules above, so only the delay is overridden, not the rest of each
transition. */
.blueprint-hero .blueprint-scaffold,
.blueprint-hero .blueprint-mass {
transition-delay: 600ms;
}
.blueprint-hero .blueprint-form {
transition-delay: 700ms;
}
.blueprint-hero .blueprint-node {
transition-delay: calc(600ms + var(--m, 0) * 70ms);
}
/* Card-level hover feedback for every card in the site's shared card
system (ServiceIsoCard/BenefitCard/ProcessCard/IndustryIsoCard/
ValueCard/ProofCard/ArticleCard, plus the rolling-list and industry-
index rows). Per direct request — "remove hard shadow just use light
golden borders with gradient... do this with all the cards in the
website and everywhere where we have hover states" — the earlier
soft drop-shadow lift is gone completely, replaced everywhere by one
shared gradient-opacity gold ring (see .blueprint-card::after below).
position: relative is load-bearing: the ring is an absolutely
positioned pseudo-element sized to this box, and without a positioned
ancestor it would place itself against the nearest one that exists
instead, anywhere up the tree. */
.blueprint-card {
position: relative;
transition: border-color var(--dur-fast) ease;
}
/* The gradient ring. A real `border` can't take both a gradient and a
border-radius (border-image ignores radius outright), so this uses the
standard mask-composite technique instead: a pseudo-element painted
edge-to-edge with the gradient, then carved down to a thin ring by two
stacked masks that cancel out everywhere except a `padding`-wide band
at the very edge — mask-composite: exclude subtracts the inner
(content-box) mask from the outer (border-box) one, leaving only that
band. Stops per direct spec: 10% opacity gold at the top edge fading to
fully opaque gold at the bottom. Sits at opacity: 0 until hover/focus
(see the next rule) — at rest every card keeps its plain glass hairline
(--color-line, see .dark) exactly as before; this ring is purely a
hover/focus addition, never a resting-state border. */
.blueprint-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--card-accent, var(--color-accent)) 10%, transparent) 0%,
var(--card-accent, var(--color-accent)) 100%
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out);
pointer-events: none;
}
.blueprint-card:hover::after,
.blueprint-card:focus-within::after {
opacity: 1;
}
/* Dark-mode-only glass treatment, additive on top of everything above.
Two separate moves:
1. .dark .blueprint-card.bg-surface swaps in the reference's own
--glass-bg fill (a near-transparent white film, NOT derived from
--color-surface) plus blur+saturate, so every real content card —
every component that carries both `blueprint-card` and `bg-surface`
(BenefitCard/ProcessCard/IndustryIsoCard/ValueCard/ProofCard/
ArticleCard/ServiceIsoCard) — becomes genuine frosted glass over the
page-wide film+gold backdrop (.dark body, above). Deliberately scoped to
`.blueprint-card.bg-surface` rather than the bare `.bg-surface`
utility: the reference itself explicitly excludes forms from its
glass selector ("so enquiry forms don't look like a widget bolted
onto the page"), and this site's own header, modals (ApplyModal),
and dropdowns already carry their own hand-tuned bg-surface/NN +
backdrop-blur treatments that a blanket rule would double up on or
fight with. --color-line is already the reference's exact
translucent glass-border value (see .dark), so the resting border
these cards already carry needs no separate override here.
2. .dark .blueprint-card.bg-surface::before adds one restrained warm
glow pooled at the top of the card, over the glass fill — the same
"Amber & Bull" reference card treatment this pass was built to
match (a soft light source above the illustration, not an even
flat tint). z-index: 0 keeps it behind the illustration/heading/
copy, which paint after it in DOM order at the same stacking
level. */
.dark .blueprint-card.bg-surface {
background-color: var(--glass-bg);
backdrop-filter: var(--glass-blur) saturate(1.15);
-webkit-backdrop-filter: var(--glass-blur) saturate(1.15);
}
.dark .blueprint-card:hover.bg-surface {
background-color: var(--glass-bg-hover);
}
.dark .blueprint-card.bg-surface::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(
ellipse 70% 55% at 50% -8%,
color-mix(in srgb, var(--card-accent, var(--color-accent)) 13%, transparent),
transparent 72%
);
pointer-events: none;
}
/* Light-theme counterpart — not the same rgba values reused. Translucent
WHITE over a white/near-white --color-surface card is visually inert
(there's nothing for it to lighten), so this is a translucent warm-
near-black fill instead, at a much lower alpha than the dark version
needs: a few percent of near-black is already a visible tint against a
page this pale, the same way the dark version's few percent of white
is already visible against near-black. */
.light .blueprint-card.bg-surface {
background-color: rgb(30 20 8 / 0.035);
backdrop-filter: blur(14px) saturate(1.05);
-webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.light .blueprint-card:hover.bg-surface {
background-color: rgb(30 20 8 / 0.055);
}
/* ::before is re-derived as a soft warm SHADOW pool, not a light-glow —
dark mode's version reads as a light source catching the glass from
above, which has nothing to "catch" on a page that's already the
brightest thing in the scene. Same position/shape (pooled near the
card's top edge) so the two themes' cards still feel like one system,
just inverted from a highlight to a soft density instead of a second
colored glow. */
.light .blueprint-card.bg-surface::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(ellipse 70% 55% at 50% -8%, rgb(30 20 8 / 0.12), transparent 72%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.file\:mr-3::file-selector-button {
margin-right: 0.75rem;
}
.file\:rounded-md::file-selector-button {
border-radius: 0.375rem;
}
.file\:border-0::file-selector-button {
border-width: 0px;
}
.file\:bg-bg::file-selector-button {
background-color: var(--color-bg);
}
.file\:px-3::file-selector-button {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.file\:py-1\.5::file-selector-button {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.file\:text-xs::file-selector-button {
font-size: 0.75rem;
line-height: 1rem;
}
.file\:text-ink::file-selector-button {
color: var(--color-ink);
}
.first\:border-t:first-child {
border-top-width: 1px;
}
.hover\:border-line:hover {
border-color: var(--color-line);
}
.hover\:bg-surface-hover:hover {
background-color: var(--color-surface-hover);
}
.hover\:text-accent:hover {
color: var(--color-accent);
}
.hover\:text-ink:hover {
color: var(--color-ink);
}
.hover\:opacity-100:hover {
opacity: 1;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:opacity-90:hover {
opacity: 0.9;
}
.focus\:not-sr-only:focus {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.focus\:absolute:focus {
position: absolute;
}
.focus\:left-4:focus {
left: 1rem;
}
.focus\:top-4:focus {
top: 1rem;
}
.focus\:z-\[70\]:focus {
z-index: 70;
}
.focus\:rounded-xl:focus {
border-radius: 0.75rem;
}
.focus\:border-accent:focus {
border-color: var(--color-accent);
}
.focus\:bg-surface:focus {
background-color: var(--color-surface);
}
.focus\:px-4:focus {
padding-left: 1rem;
padding-right: 1rem;
}
.focus\:py-2:focus {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.focus\:text-sm:focus {
font-size: 0.875rem;
line-height: 1.25rem;
}
.focus\:text-ink:focus {
color: var(--color-ink);
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-1:focus {
--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(1px + 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);
}
.focus\:ring-accent:focus {
--tw-ring-color: var(--color-accent);
}
.focus-visible\:bg-surface-hover:focus-visible {
background-color: var(--color-surface-hover);
}
.focus-visible\:ring-2:focus-visible {
--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(2px + 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);
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:opacity-60:disabled {
opacity: 0.6;
}
.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-y-0\.5 {
--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));
}
.group:hover .group-hover\:-translate-y-1 {
--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));
}
.group:hover .group-hover\:-translate-y-1\/2 {
--tw-translate-y: -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));
}
.group:hover .group-hover\:translate-x-0 {
--tw-translate-x: 0px;
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\:rotate-0 {
--tw-rotate: 0deg;
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-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
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-\[1\.03\] {
--tw-scale-x: 1.03;
--tw-scale-y: 1.03;
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-\[1\.04\] {
--tw-scale-x: 1.04;
--tw-scale-y: 1.04;
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-\[1\.05\] {
--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-\[var\(--card-accent\)\] {
color: var(--card-accent);
}
.group:hover .group-hover\:text-accent {
color: var(--color-accent);
}
.group:hover .group-hover\:text-ink {
color: var(--color-ink);
}
.group:hover .group-hover\:opacity-0 {
opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:opacity-\[0\.17\] {
opacity: 0.17;
}
.group:hover .group-hover\:brightness-110 {
--tw-brightness: brightness(1.1);
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);
}
.group:hover .group-hover\:grayscale-0 {
--tw-grayscale: grayscale(0);
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);
}
.group:focus-visible .group-focus-visible\:-translate-y-1\/2 {
--tw-translate-y: -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));
}
.dark\:block:is(.dark *) {
display: block;
}
.dark\:hidden:is(.dark *) {
display: none;
}
.dark\:text-red-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-white\/80:is(.dark *) {
color: rgb(255 255 255 / 0.8);
}
.dark\:mix-blend-difference:is(.dark *) {
mix-blend-mode: difference;
}
@media (min-width: 640px) {
.sm\:col-span-1 {
grid-column: span 1 / span 1;
}
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:mt-20 {
margin-top: 5rem;
}
.sm\:block {
display: block;
}
.sm\:aspect-square {
aspect-ratio: 1 / 1;
}
.sm\:h-16 {
height: 4rem;
}
.sm\:h-40 {
height: 10rem;
}
.sm\:h-56 {
height: 14rem;
}
.sm\:h-72 {
height: 18rem;
}
.sm\:h-\[340px\] {
height: 340px;
}
.sm\:w-40 {
width: 10rem;
}
.sm\:w-48 {
width: 12rem;
}
.sm\:w-56 {
width: 14rem;
}
.sm\:w-72 {
width: 18rem;
}
.sm\:w-\[380px\] {
width: 380px;
}
.sm\:max-w-sm {
max-width: 24rem;
}
.sm\:shrink-0 {
flex-shrink: 0;
}
.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\:flex-wrap {
flex-wrap: wrap;
}
.sm\:items-end {
align-items: flex-end;
}
.sm\:items-center {
align-items: center;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:gap-6 {
gap: 1.5rem;
}
.sm\:gap-7 {
gap: 1.75rem;
}
.sm\:gap-8 {
gap: 2rem;
}
.sm\:gap-x-0 {
-moz-column-gap: 0px;
column-gap: 0px;
}
.sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.sm\:divide-line > :not([hidden]) ~ :not([hidden]) {
border-color: var(--color-line);
}
.sm\:p-5 {
padding: 1.25rem;
}
.sm\:p-6 {
padding: 1.5rem;
}
.sm\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.sm\:py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.sm\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.sm\:py-28 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.sm\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.sm\:pb-20 {
padding-bottom: 5rem;
}
.sm\:pb-32 {
padding-bottom: 8rem;
}
.sm\:pt-36 {
padding-top: 9rem;
}
.sm\:pt-40 {
padding-top: 10rem;
}
.sm\:pt-5 {
padding-top: 1.25rem;
}
.sm\:text-left {
text-align: left;
}
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.sm\:text-\[17vw\] {
font-size: 17vw;
}
.sm\:text-\[18px\] {
font-size: 18px;
}
.sm\:text-\[30px\] {
font-size: 30px;
}
.sm\:text-\[34px\] {
font-size: 34px;
}
.sm\:text-\[38px\] {
font-size: 38px;
}
.sm\:text-\[48px\] {
font-size: 48px;
}
.sm\:text-\[52px\] {
font-size: 52px;
}
.sm\:text-\[56px\] {
font-size: 56px;
}
.sm\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.sm\:first\:pl-0:first-child {
padding-left: 0px;
}
}
@media (min-width: 768px) {
.md\:block {
display: block;
}
.md\:hidden {
display: none;
}
.md\:h-20 {
height: 5rem;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:text-7xl {
font-size: 4.5rem;
line-height: 1;
}
}
@media (min-width: 1024px) {
.lg\:col-span-12 {
grid-column: span 12 / span 12;
}
.lg\:col-span-4 {
grid-column: span 4 / span 4;
}
.lg\:col-span-5 {
grid-column: span 5 / span 5;
}
.lg\:col-span-7 {
grid-column: span 7 / span 7;
}
.lg\:mt-16 {
margin-top: 4rem;
}
.lg\:mt-24 {
margin-top: 6rem;
}
.lg\:mt-8 {
margin-top: 2rem;
}
.lg\:block {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-80 {
height: 20rem;
}
.lg\:min-h-screen {
min-height: 100vh;
}
.lg\:w-80 {
width: 20rem;
}
.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-\[240px_minmax\(0\2c 1fr\)\] {
grid-template-columns: 240px minmax(0,1fr);
}
.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 280px\)\] {
grid-template-columns: minmax(0,1fr) minmax(0,280px);
}
.lg\:grid-cols-\[minmax\(0\2c 340px\)_1fr\] {
grid-template-columns: minmax(0,340px) 1fr;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:justify-end {
justify-content: flex-end;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-20 {
gap: 5rem;
}
.lg\:gap-x-0 {
-moz-column-gap: 0px;
column-gap: 0px;
}
.lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.lg\:border-b-0 {
border-bottom-width: 0px;
}
.lg\:border-r {
border-right-width: 1px;
}
.lg\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.lg\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.lg\:pb-0 {
padding-bottom: 0px;
}
.lg\:pr-64 {
padding-right: 16rem;
}
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.lg\:text-\[13vw\] {
font-size: 13vw;
}
.lg\:text-\[54px\] {
font-size: 54px;
}
.lg\:text-\[68px\] {
font-size: 68px;
}
.lg\:leading-\[1\.05\] {
line-height: 1.05;
}
.lg\:first\:pl-0:first-child {
padding-left: 0px;
}
.lg\:last\:pr-0:last-child {
padding-right: 0px;
}
}
@media (min-width: 1280px) {
.xl\:w-64 {
width: 16rem;
}
.xl\:pr-72 {
padding-right: 18rem;
}
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
display: none;
}