html {
scroll-behavior: smooth;
}@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--spacing: 0.25rem;
--container-md: 28rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-tight: -0.025em;
--tracking-wider: 0.05em;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
@layer utilities {
.-mx-6 {
margin-inline: calc(var(--spacing) * -6);
}
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
}
.mx-auto {
margin-inline: auto;
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
:where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500;
}
:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
:where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
:where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
:where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
:where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
:where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
:where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
:where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
:where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
:where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
:where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
}
:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
color: var(--tw-prose-bullets);
}
:where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em;
}
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
}
:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-inline-start: 1em;
}
:where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: open-quote;
}
:where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: close-quote;
}
:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
:where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 900;
color: inherit;
}
:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
:where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 800;
color: inherit;
}
:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
:where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
:where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
:where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-inline-end: 0.375em;
padding-bottom: 0.1875em;
padding-inline-start: 0.375em;
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "`";
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "`";
}
:where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.875em;
}
:where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.9em;
}
:where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: 0.8571429em;
padding-inline-start: 1.1428571em;
}
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: none;
}
:where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: none;
}
:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
:where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
:where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
:where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 0;
}
:where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: baseline;
}
:where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
:where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: top;
}
:where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-align: start;
}
:where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
:where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
--tw-prose-body: oklch(37.3% 0.034 259.733);
--tw-prose-headings: oklch(21% 0.034 264.665);
--tw-prose-lead: oklch(44.6% 0.03 256.802);
--tw-prose-links: oklch(21% 0.034 264.665);
--tw-prose-bold: oklch(21% 0.034 264.665);
--tw-prose-counters: oklch(55.1% 0.027 264.364);
--tw-prose-bullets: oklch(87.2% 0.01 258.338);
--tw-prose-hr: oklch(92.8% 0.006 264.531);
--tw-prose-quotes: oklch(21% 0.034 264.665);
--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
--tw-prose-captions: oklch(55.1% 0.027 264.364);
--tw-prose-kbd: oklch(21% 0.034 264.665);
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
--tw-prose-code: oklch(21% 0.034 264.665);
--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
--tw-prose-th-borders: oklch(87.2% 0.01 258.338);
--tw-prose-td-borders: oklch(92.8% 0.006 264.531);
--tw-prose-invert-body: oklch(87.2% 0.01 258.338);
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
--tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
--tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
--tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
--tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
--tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
--tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
font-size: 1rem;
line-height: 1.75;
:where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
:where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
:where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0.375em;
}
:where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
:where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
:where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
:where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
:where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
:where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
:where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
:where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
padding-inline-start: 1.625em;
}
:where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
:where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
:where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
:where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-start: 0;
}
:where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-inline-end: 0;
}
:where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
:where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
:where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline-flex {
display: inline-flex;
}
.h-auto {
height: auto;
}
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-none {
max-width: none;
}
.flex-1 {
flex: 1;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.gap-12 {
gap: calc(var(--spacing) * 12);
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.py-16 {
padding-block: calc(var(--spacing) * 16);
}
.py-24 {
padding-block: calc(var(--spacing) * 24);
}
.pt-16 {
padding-top: calc(var(--spacing) * 16);
}
.pb-8 {
padding-bottom: calc(var(--spacing) * 8);
}
.pb-12 {
padding-bottom: calc(var(--spacing) * 12);
}
.pb-16 {
padding-bottom: calc(var(--spacing) * 16);
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.tracking-wider {
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
.uppercase {
text-transform: uppercase;
}
.not-italic {
font-style: normal;
}
.no-underline {
text-decoration-line: none;
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.last\:border-b-0 {
&:last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
}
.hover\:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
.md\:mx-0 {
@media (width >= 48rem) {
margin-inline: calc(var(--spacing) * 0);
}
}
.md\:text-2xl {
@media (width >= 48rem) {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
}
.md\:text-3xl {
@media (width >= 48rem) {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
}
.md\:text-4xl {
@media (width >= 48rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.md\:text-5xl {
@media (width >= 48rem) {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
}
}
:root {
--teal: #073f3b;
--teal-dark: #042b29;
--gold: #d2b784;
--ivory: #f7f3ec;
--sand: #ebe2d4;
--brown: #493729;
--ink: #20201d;
--white: #fff;
--display: "Playfair Display",Georgia,serif;
--body: "Manrope",sans-serif;
--shadow: 0 24px 70px rgba(7,63,59,.14);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body.pbh-body {
margin: 0;
background: var(--ivory);
color: var(--brown);
font-family: var(--body);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
body.menu-open {
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
button,input,select {
font: inherit;
}
.skip-link {
position: fixed;
left: 1rem;
top: -100px;
z-index: 9999;
background: #fff;
color: var(--teal);
padding: .7rem 1rem;
}
.skip-link:focus {
top: 1rem;
}
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
color: #fff;
background: linear-gradient(180deg,rgba(3,30,28,.58),rgba(3,30,28,.08));
transition: background .35s ease,box-shadow .35s ease;
}
.site-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(255,255,255,.25);
}
.site-header.is-scrolled {
background: rgba(7,63,59,.97);
box-shadow: 0 8px 30px rgba(0,0,0,.14);
backdrop-filter: blur(12px);
}
.header-inner {
height: 92px;
max-width: 1440px;
margin: auto;
padding: 0 clamp(24px,4vw,70px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.brand {
width: 198px;
height: 76px;
display: flex;
align-items: center;
overflow: hidden;
text-decoration: none;
flex: none;
}
.brand img {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
}
.desktop-nav {
display: flex;
align-items: center;
gap: clamp(17px,1.8vw,32px);
}
.desktop-nav>a {
font-size: .74rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
position: relative;
}
.desktop-nav>a:not(.nav-book)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -7px;
height: 1px;
background: var(--gold);
transition: right .25s;
}
.desktop-nav>a:hover::after {
right: 0;
}
.nav-book {
padding: 12px 18px;
border: 1px solid var(--gold);
transition: .25s;
background: rgba(7,63,59,.18);
}
.nav-book:hover {
background: var(--gold);
color: var(--teal);
}
.menu-toggle,.mobile-panel {
display: none;
}
.hero {
position: relative;
min-height: 92svh;
background: url(https://demo3.hotelemployeerate.com/wp-content/uploads/2026/09/Signature-Pool.jpg) center 50%/cover no-repeat;
color: #fff;
display: flex;
align-items: center;
margin-bottom: 112px;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,rgba(3,28,27,.78) 0%,rgba(3,28,27,.44) 46%,rgba(3,28,27,.12) 78%),linear-gradient(0deg,rgba(3,28,27,.48),transparent 45%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
opacity: .45;
}
.hero-content {
position: relative;
z-index: 2;
width: min(1380px,calc(100% - 48px));
margin: auto;
padding: 150px clamp(0px,4vw,55px) 125px;
}
.offer-pill {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 13px;
border: 1px solid rgba(210,183,132,.8);
background: rgba(7,63,59,.34);
font-size: .68rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.offer-pill::before {
content: "";
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
}
.eyebrow {
margin: 0 0 16px;
color: var(--gold);
font-size: .72rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
}
.hero h1 {
max-width: 830px;
margin: 22px 0 24px;
font-family: var(--display);
font-size: clamp(3.2rem,6.6vw,6.7rem);
font-weight: 500;
line-height: .98;
letter-spacing: -.045em;
text-wrap: balance;
}
.hero h1 em {
font-weight: 500;
color: var(--gold);
}
.hero-lead {
max-width: 650px;
margin: 0 0 34px;
font-size: clamp(1.02rem,1.35vw,1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.9);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 24px;
border: 1px solid var(--teal);
background: var(--teal);
color: #fff;
text-decoration: none;
font-size: .72rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
transition: transform .25s,background .25s,color .25s,border-color .25s;
}
.btn:hover {
transform: translateY(-2px);
background: var(--teal-dark);
}
.btn-gold {
background: var(--gold);
color: var(--teal);
border-color: var(--gold);
}
.btn-gold:hover {
background: #dfc99e;
}
.btn-ghost {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,.7);
}
.btn-ghost:hover {
background: #fff;
color: var(--teal);
border-color: #fff;
}
.btn-outline {
background: transparent;
color: var(--teal);
border-color: var(--teal);
}
.btn-outline:hover {
background: var(--teal);
color: #fff;
}
.booking-bar {
position: absolute;
z-index: 4;
left: 50%;
bottom: 0;
transform: translate(-50%,50%);
width: min(1220px,calc(100% - 48px));
display: grid;
grid-template-columns: 1fr 1fr .8fr auto;
align-items: end;
background: #fff;
color: var(--brown);
padding: 25px 27px;
box-shadow: var(--shadow);
}
.booking-field {
padding: 0 22px;
border-right: 1px solid #ded7cc;
}
.booking-field:first-child {
padding-left: 2px;
}
.booking-field label {
display: block;
margin: 0 0 5px;
font-size: .65rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--teal);
}
.booking-field input,.booking-field select {
width: 100%;
border: 0;
background: transparent;
color: var(--brown);
padding: 3px 0;
font-size: 1rem;
font-weight: 600;
outline: none;
}
.booking-submit {
height: 54px;
border: 0;
cursor: pointer;
min-width: 185px;
}
.trust-strip {
max-width: 1180px;
margin: 0 auto;
padding: 24px 24px 50px;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 0;
}
.trust-item {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 72px;
border-right: 1px solid #d8cfc2;
text-align: left;
}
.trust-item:last-child {
border-right: 0;
}
.trust-mark {
font-family: var(--display);
font-size: 2rem;
color: var(--gold);
}
.trust-item strong {
display: block;
color: var(--teal);
font-family: var(--display);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.25;
}
.trust-item span {
font-size: .69rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #786d61;
}
.section {
padding: clamp(76px,9vw,140px) clamp(24px,5vw,78px);
}
.section-inner {
width: min(1260px,100%);
margin: auto;
}
.section-heading {
max-width: 760px;
margin-bottom: 50px;
}
.section-heading.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.kicker {
margin: 0 0 12px;
color: #9e7d42;
font-size: .68rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
}
.display-title {
margin: 0;
color: var(--teal);
font-family: var(--display);
font-size: clamp(2.55rem,4.8vw,5rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -.035em;
text-wrap: balance;
}
.display-title em {
color: #9e7d42;
font-weight: 500;
}
.section-intro {
max-width: 680px;
margin: 22px 0 0;
font-size: 1.05rem;
line-height: 1.8;
color: #6e6257;
}
.intro-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(45px,8vw,120px);
align-items: center;
}
.intro-note {
border-left: 1px solid var(--gold);
padding-left: 25px;
}
.intro-note p {
margin: 0;
font-family: var(--display);
font-size: clamp(1.35rem,2vw,1.75rem);
line-height: 1.5;
color: var(--teal);
}
.photo-stack {
position: relative;
min-height: 650px;
}
.photo-stack .photo-main {
width: 82%;
height: 590px;
object-fit: cover;
margin-left: auto;
}
.photo-stack .photo-small {
position: absolute;
left: 0;
bottom: -30px;
width: 42%;
height: 260px;
object-fit: cover;
border: 10px solid var(--ivory);
box-shadow: var(--shadow);
}
.reasons {
background: var(--teal);
color: #fff;
}
.reasons .display-title {
color: #fff;
}
.reasons-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
}
.reason-card {
position: relative;
min-height: 520px;
overflow: hidden;
color: #fff;
}
.reason-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.reason-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg,rgba(2,27,26,.88),rgba(2,27,26,.05) 68%);
}
.reason-card:hover img {
transform: scale(1.045);
}
.reason-content {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 34px;
}
.reason-number {
color: var(--gold);
font-family: var(--display);
font-size: 1rem;
font-style: italic;
}
.reason-card h3 {
margin: 8px 0 10px;
font-family: var(--display);
font-size: 2rem;
font-weight: 500;
line-height: 1.1;
}
.reason-card p {
margin: 0;
color: rgba(255,255,255,.82);
font-size: .92rem;
line-height: 1.65;
}
.amenity-row {
margin-top: 38px;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.22);
display: grid;
grid-template-columns: repeat(4,1fr);
text-align: center;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
}
.rooms-section {
background: #fff;
}
.room-grid {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 22px;
}
.room-card {
grid-column: span 6;
position: relative;
background: var(--ivory);
}
.room-card:nth-child(3) {
grid-column: span 7;
}
.room-card:nth-child(4) {
grid-column: span 5;
}
.room-image {
display: block;
overflow: hidden;
aspect-ratio: 16/10;
}
.room-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s;
}
.room-card:hover .room-image img {
transform: scale(1.035);
}
.room-copy {
padding: 26px 28px 31px;
}
.room-meta {
color: #9a7b46;
font-size: .65rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.room-copy h3 {
margin: 5px 0 10px;
color: var(--teal);
font-family: var(--display);
font-size: 2rem;
font-weight: 500;
}
.room-copy p {
margin: 0 0 17px;
color: #70665c;
font-size: .9rem;
}
.card-links {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.text-link {
color: var(--teal);
font-size: .7rem;
font-weight: 700;
letter-spacing: .12em;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid var(--gold);
padding-bottom: 3px;
}
.text-link.light {
color: #fff;
}
.editorial-split {
display: grid;
grid-template-columns: 1.15fr .85fr;
min-height: 690px;
background: var(--teal);
}
.editorial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.editorial-copy {
padding: clamp(65px,8vw,125px);
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
.editorial-copy .display-title {
color: #fff;
}
.editorial-copy>p {
font-size: 1.02rem;
color: rgba(255,255,255,.82);
line-height: 1.8;
}
.location-points {
display: grid;
gap: 12px;
margin: 26px 0 34px;
}
.location-points span {
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.2);
font-size: .76rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.offer-band {
position: relative;
background: var(--gold);
overflow: hidden;
}
.offer-band::after {
content: "30%";
position: absolute;
right: -30px;
bottom: -125px;
color: rgba(255,255,255,.22);
font-family: var(--display);
font-size: 18rem;
font-style: italic;
line-height: 1;
}
.offer-inner {
position: relative;
z-index: 2;
width: min(1200px,100%);
margin: auto;
padding: 85px 35px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 40px;
}
.offer-inner h2 {
margin: 0 0 8px;
color: var(--teal);
font-family: var(--display);
font-size: clamp(2.5rem,4.5vw,4.8rem);
font-weight: 500;
line-height: 1;
}
.offer-inner p {
margin: 0;
max-width: 680px;
color: #4f4739;
}
.gallery-mosaic {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 260px 260px;
gap: 12px;
}
.gallery-item {
display: block;
overflow: hidden;
background: #ddd;
position: relative;
cursor: zoom-in;
}
.gallery-item:first-child {
grid-row: 1/3;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s,filter .6s;
}
.gallery-item:hover img {
transform: scale(1.04);
filter: saturate(1.08);
}
.gallery-cta {
text-align: center;
margin-top: 35px;
}
.recognition {
background: #fff;
text-align: center;
}
.recognition-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
max-width: 1050px;
margin: 48px auto 0;
}
.recognition-item {
padding: 25px 35px;
border-right: 1px solid #ddd3c6;
}
.recognition-item:last-child {
border-right: 0;
}
.recognition-item strong {
display: block;
color: var(--teal);
font-family: var(--display);
font-size: 1.5rem;
font-weight: 500;
}
.recognition-item span {
display: block;
margin-top: 8px;
color: #8b7965;
font-size: .68rem;
letter-spacing: .13em;
text-transform: uppercase;
}
.location-block {
display: grid;
grid-template-columns: 1.05fr .95fr;
min-height: 570px;
}
.location-photo {
position: relative;
}
.location-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.location-panel {
background: var(--sand);
padding: clamp(65px,8vw,115px);
display: flex;
flex-direction: column;
justify-content: center;
}
.location-panel address {
font-style: normal;
margin: 24px 0;
color: #6c5e51;
}
.location-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.site-footer {
background: var(--teal-dark);
color: rgba(255,255,255,.72);
padding: 78px clamp(24px,5vw,75px) 28px;
}
.footer-top {
width: min(1320px,100%);
margin: auto;
display: grid;
grid-template-columns: 1.45fr .7fr .85fr 1.2fr;
gap: 55px;
}
.footer-brand img {
width: 190px;
height: 95px;
object-fit: contain;
filter: brightness(0) invert(1);
margin-bottom: 20px;
}
.footer-brand p {
max-width: 330px;
font-size: .9rem;
}
.footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.footer-col h2 {
margin: 10px 0 12px;
color: var(--gold);
font-family: var(--display);
font-size: 1.25rem;
font-weight: 500;
}
.footer-col a {
font-size: .82rem;
text-decoration: none;
color: rgba(255,255,255,.76);
}
.footer-col a:hover {
color: #fff;
}
.footer-contact p {
margin: 0 0 5px;
}
.footer-contact>a {
overflow-wrap: anywhere;
}
.social-row {
display: flex;
gap: 18px;
margin-top: 12px;
}
.footer-bottom {
width: min(1320px,100%);
margin: 60px auto 0;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.13);
display: flex;
justify-content: space-between;
gap: 22px;
font-size: .66rem;
letter-spacing: .09em;
text-transform: uppercase;
}
.footer-bottom nav {
display: flex;
gap: 18px;
}
.footer-bottom a {
text-decoration: none;
}
.mobile-book-dock {
display: none;
}
.lightbox {
position: fixed;
z-index: 200;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 35px;
background: rgba(1,22,21,.94);
}
.lightbox.is-open {
display: flex;
}
.lightbox img {
max-width: min(1200px,92vw);
max-height: 86vh;
object-fit: contain;
}
.lightbox button {
position: absolute;
right: 24px;
top: 16px;
background: transparent;
border: 0;
color: #fff;
font-size: 2.4rem;
cursor: pointer;
}
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s ease,transform .7s ease;
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
.page-hero {
position: relative;
min-height: clamp(480px,66vh,720px);
display: flex;
align-items: flex-end;
background-position: center;
background-size: cover;
color: #fff;
padding: 150px clamp(24px,7vw,105px) 80px;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg,rgba(3,30,28,.82),rgba(3,30,28,.12) 70%);
}
.page-hero-content {
position: relative;
z-index: 1;
width: min(1100px,100%);
margin: auto;
}
.page-hero h1 {
max-width: 860px;
margin: 0;
font-family: var(--display);
font-size: clamp(3.1rem,6vw,6.1rem);
font-weight: 500;
line-height: 1;
letter-spacing: -.04em;
}
.page-hero p {
max-width: 660px;
margin: 20px 0 0;
color: rgba(255,255,255,.88);
font-size: 1.08rem;
}
.page-shell {
width: min(1180px,calc(100% - 48px));
margin: auto;
padding: clamp(70px,8vw,125px) 0;
}
.lead-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(40px,8vw,110px);
align-items: start;
}
.lead-grid h2,.content-section h2 {
margin: 0;
color: var(--teal);
font-family: var(--display);
font-size: clamp(2.35rem,4vw,4rem);
font-weight: 500;
line-height: 1.1;
}
.prose-copy {
font-size: 1rem;
color: #6c6056;
}
.prose-copy p:first-child {
margin-top: 0;
}
.content-section {
padding: clamp(70px,8vw,115px) clamp(24px,5vw,70px);
}
.content-section.alt {
background: #fff;
}
.content-section.teal {
background: var(--teal);
color: #fff;
}
.content-section.teal h2,.content-section.teal h3 {
color: #fff;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
margin-top: 42px;
}
.feature-card {
background: #fff;
padding: 34px;
box-shadow: 0 10px 35px rgba(7,63,59,.06);
}
.feature-card.photo {
padding: 0;
overflow: hidden;
}
.feature-card.photo img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
.feature-card.photo .feature-body {
padding: 28px;
}
.feature-card h3 {
margin: 0 0 12px;
color: var(--teal);
font-family: var(--display);
font-size: 1.65rem;
font-weight: 500;
}
.feature-card p {
margin: 0;
color: #72675e;
font-size: .9rem;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1px;
background: #d8cfc3;
margin-top: 42px;
}
.stat {
background: var(--ivory);
padding: 28px;
text-align: center;
}
.stat strong {
display: block;
color: var(--teal);
font-family: var(--display);
font-size: 1.65rem;
font-weight: 500;
}
.stat span {
font-size: .67rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #7d7063;
}
.room-list {
display: grid;
gap: 22px;
margin-top: 46px;
}
.room-row {
display: grid;
grid-template-columns: 1.05fr .95fr;
background: #fff;
min-height: 410px;
}
.room-row:nth-child(even) {
grid-template-columns: .95fr 1.05fr;
}
.room-row:nth-child(even) .room-row-image {
order: 2;
}
.room-row-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.room-row-copy {
padding: clamp(38px,6vw,70px);
display: flex;
flex-direction: column;
justify-content: center;
}
.room-row-copy h3 {
margin: 4px 0 12px;
color: var(--teal);
font-family: var(--display);
font-size: 2.4rem;
font-weight: 500;
}
.room-row-copy p {
margin: 0 0 20px;
color: #6f645a;
}
.icon-list {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 12px 25px;
margin: 25px 0;
}
.icon-list span {
border-bottom: 1px solid #dcd3c7;
padding: 10px 0;
font-size: .78rem;
}
.policy-list {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: #d8d0c5;
margin-top: 40px;
}
.policy {
background: var(--ivory);
padding: 28px;
}
.policy strong {
display: block;
color: var(--teal);
margin-bottom: 6px;
}
.restaurant-grid,.beach-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 16px;
margin-top: 42px;
}
.mini-card {
background: #fff;
padding: 25px;
}
.mini-card h3 {
margin: 0 0 8px;
color: var(--teal);
font-family: var(--display);
font-size: 1.35rem;
font-weight: 500;
}
.mini-card p {
margin: 0;
font-size: .84rem;
color: #74685c;
}
.faq-list {
display: grid;
gap: 12px;
margin-top: 38px;
}
.faq-list details {
background: #fff;
border: 1px solid #ded6cb;
padding: 20px 24px;
}
.faq-list summary {
cursor: pointer;
color: var(--teal);
font-weight: 700;
}
.faq-list p {
margin: 13px 0 0;
color: #6f645a;
}
.contact-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 22px;
margin-top: 42px;
}
.contact-card {
background: var(--teal);
color: #fff;
padding: 45px;
}
.contact-card h3 {
font-family: var(--display);
font-size: 2rem;
font-weight: 500;
margin: 0 0 20px;
}
.contact-card a {
color: #fff;
}
.contact-form {
background: #fff;
padding: 45px;
}
.contact-form label {
display: block;
margin: 0 0 16px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--teal);
}
.contact-form input,.contact-form textarea {
display: block;
width: 100%;
margin-top: 6px;
border: 1px solid #d8d0c4;
background: var(--ivory);
padding: 13px;
}
.contact-form textarea {
min-height: 150px;
resize: vertical;
}
@media (max-width:1080px) {
.desktop-nav {
gap: 15px;
}
.desktop-nav>a {
font-size: .66rem;
}
.brand {
width: 165px;
}
.reason-card {
min-height: 430px;
}
.footer-top {
grid-template-columns: 1.2fr 1fr 1fr;
}
.footer-contact {
grid-column: 2/4;
}
}
@media (max-width:820px) {
body.pbh-body {
padding-bottom: 58px;
}
.header-inner {
height: 76px;
padding: 0 20px;
}
.brand {
width: 154px;
height: 62px;
}
.desktop-nav {
display: none;
}
.menu-toggle {
display: grid;
width: 44px;
height: 44px;
padding: 11px;
border: 1px solid rgba(255,255,255,.55);
background: rgba(7,63,59,.18);
gap: 5px;
align-content: center;
}
.menu-toggle span {
display: block;
height: 1px;
background: #fff;
transition: .3s;
}
.menu-toggle[aria-expanded=true] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded=true] span:nth-child(2) {
opacity: 0;
}
.menu-toggle[aria-expanded=true] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.mobile-panel {
display: flex;
position: fixed;
z-index: 99;
inset: 76px 0 0;
flex-direction: column;
padding: 35px 27px 100px;
background: var(--teal-dark);
transform: translateX(100%);
transition: transform .35s;
overflow: auto;
}
.mobile-panel.is-open {
transform: none;
}
.mobile-panel>a {
padding: 13px 0;
border-bottom: 1px solid rgba(255,255,255,.14);
color: #fff;
font-family: var(--display);
font-size: 1.55rem;
text-decoration: none;
}
.mobile-panel .mobile-book {
margin-top: 25px;
padding: 16px;
text-align: center;
background: var(--gold);
color: var(--teal);
border: 0;
font-family: var(--body);
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.mobile-book-dock {
position: fixed;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
left: 0;
right: 0;
bottom: 0;
height: 58px;
background: var(--gold);
color: var(--teal);
font-size: .75rem;
font-weight: 800;
letter-spacing: .13em;
text-decoration: none;
text-transform: uppercase;
}
.hero {
min-height: 82svh;
margin-bottom: 210px;
background-position: 57% center;
align-items: flex-end;
}
.hero-content {
width: calc(100% - 34px);
padding: 120px 0 110px;
}
.hero h1 {
font-size: clamp(3rem,13vw,5rem);
}
.hero-lead {
font-size: .98rem;
}
.booking-bar {
bottom: -182px;
transform: translateX(-50%);
grid-template-columns: 1fr 1fr;
padding: 18px;
width: calc(100% - 28px);
}
.booking-field {
padding: 0 14px;
}
.booking-field:nth-child(2) {
border-right: 0;
}
.booking-field:nth-child(3) {
grid-column: 1/3;
border: 0;
border-top: 1px solid #e1d9cf;
padding: 14px 0 0;
margin-top: 12px;
}
.booking-submit {
grid-column: 1/3;
min-width: 0;
width: 100%;
margin-top: 14px;
}
.trust-strip {
grid-template-columns: 1fr;
padding-top: 25px;
}
.trust-item {
border-right: 0;
border-bottom: 1px solid #d8cfc2;
justify-content: flex-start;
padding: 15px;
}
.trust-item:last-child {
border-bottom: 0;
}
.intro-grid,.editorial-split,.location-block,.lead-grid,.contact-grid {
grid-template-columns: 1fr;
}
.photo-stack {
min-height: 520px;
}
.photo-stack .photo-main {
height: 480px;
}
.photo-stack .photo-small {
height: 200px;
}
.reasons-grid {
grid-template-columns: 1fr;
}
.reason-card {
min-height: 450px;
}
.amenity-row {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.room-card,.room-card:nth-child(3),.room-card:nth-child(4) {
grid-column: span 12;
}
.editorial-image {
min-height: 480px;
}
.offer-inner {
grid-template-columns: 1fr;
}
.gallery-mosaic {
grid-template-columns: 1.25fr .75fr;
grid-template-rows: 230px 180px 180px;
}
.gallery-item:first-child {
grid-row: 1/3;
}
.gallery-item:nth-child(4) {
grid-column: 1/3;
}
.recognition-grid {
grid-template-columns: 1fr;
}
.recognition-item {
border-right: 0;
border-bottom: 1px solid #ddd3c6;
}
.footer-top {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1/3;
}
.footer-contact {
grid-column: 1/3;
}
.footer-bottom {
flex-direction: column;
}
.feature-grid {
grid-template-columns: 1fr 1fr;
}
.stat-grid {
grid-template-columns: 1fr 1fr;
}
.room-row,.room-row:nth-child(even) {
grid-template-columns: 1fr;
}
.room-row:nth-child(even) .room-row-image {
order: 0;
}
.room-row-image {
min-height: 330px;
}
.policy-list {
grid-template-columns: 1fr 1fr;
}
.restaurant-grid,.beach-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width:540px) {
.section {
padding-left: 20px;
padding-right: 20px;
}
.hero-content {
padding-bottom: 95px;
}
.hero h1 {
font-size: 3.15rem;
}
.offer-pill {
font-size: .58rem;
}
.photo-stack {
min-height: 400px;
}
.photo-stack .photo-main {
width: 91%;
height: 370px;
}
.photo-stack .photo-small {
width: 48%;
height: 155px;
border-width: 7px;
}
.reason-card {
min-height: 390px;
}
.room-copy {
padding: 23px 21px;
}
.gallery-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 240px 145px 145px;
}
.gallery-item:first-child {
grid-column: 1/3;
grid-row: auto;
}
.gallery-item:nth-child(4) {
grid-column: auto;
}
.location-photo {
min-height: 360px;
}
.footer-top {
gap: 35px;
}
.footer-col {
grid-column: 1/3;
}
.footer-brand {
grid-column: 1/3;
}
.page-hero {
min-height: 540px;
padding: 130px 22px 55px;
}
.page-hero h1 {
font-size: 3.45rem;
}
.page-shell {
width: calc(100% - 38px);
}
.feature-grid,.policy-list,.restaurant-grid,.beach-grid {
grid-template-columns: 1fr;
}
.stat-grid {
grid-template-columns: 1fr 1fr;
}
.contact-card,.contact-form {
padding: 30px 24px;
}
.icon-list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
*,*::before,*::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
[data-reveal] {
opacity: 1;
transform: none;
}
}
html body.pbh-body .site-main h1, html body.pbh-body .site-main h2, html body.pbh-body .site-main h3, html body.pbh-body .site-footer h2, html body.pbh-body .mobile-panel>a:not(.mobile-book) {
font-family: "Playfair Display",Georgia,serif !important;
text-transform: none !important;
}
html body.pbh-body .hero h1, html body.pbh-body .display-title, html body.pbh-body .page-hero h1 {
font-weight: 500 !important;
letter-spacing: -.04em !important;
}
html body.pbh-body .desktop-nav a, html body.pbh-body .btn, html body.pbh-body .text-link, html body.pbh-body .kicker, html body.pbh-body .offer-pill, html body.pbh-body .booking-field label {
font-family: "Manrope",sans-serif !important;
}
.photo-break {
position: relative;
isolation: isolate;
width: 100%;
min-height: clamp(350px,48vw,610px);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
padding: 70px 24px;
color: #fff;
overflow: hidden;
}
.photo-break::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(90deg,rgba(3,30,28,.52),rgba(3,30,28,.15),rgba(3,30,28,.48));
}
.photo-break::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: linear-gradient(0deg,rgba(3,30,28,.5),transparent 55%,rgba(3,30,28,.28));
}
.photo-break-inner {
width: min(1100px,100%);
text-align: center;
text-shadow: 0 2px 28px rgba(0,0,0,.3);
}
.photo-break .kicker {
color: #ead7b2;
}
.photo-break h2 {
max-width: 850px;
margin: 0 auto;
font-family: "Playfair Display",Georgia,serif !important;
font-size: clamp(2.6rem,5vw,5.8rem);
font-weight: 500 !important;
line-height: 1.04;
letter-spacing: -.04em;
text-transform: none !important;
text-wrap: balance;
}
.photo-break-rule {
display: block;
width: 80px;
height: 1px;
margin: 28px auto 0;
background: var(--gold);
}
@media (max-width:820px) {
.photo-break {
min-height: 330px;
background-attachment: scroll;
background-position: center;
padding: 55px 22px;
}
.photo-break h2 {
font-size: clamp(2.4rem,11vw,4.1rem);
}
}
.pbh-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-list span,.amenity-row span {
display: flex;
align-items: center;
gap: 10px;
}
.icon-list .pbh-icon,.amenity-row .pbh-icon {
color: var(--gold-dark);
}
.icon-feature {
display: flex;
align-items: flex-start;
gap: 14px;
}
.icon-feature>.pbh-icon {
width: 24px;
height: 24px;
flex-basis: 24px;
margin-top: 2px;
color: var(--gold-dark);
}
.feature-grid .feature-card>.pbh-icon {
width: 29px;
height: 29px;
margin-bottom: 19px;
color: var(--gold-dark);
}
.room-gallery-section {
padding: clamp(70px,9vw,128px) 24px;
background: var(--ivory);
}
.room-gallery-inner {
width: min(1240px,100%);
margin: 0 auto;
}
.room-gallery-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 30px;
}
.room-gallery-heading h2 {
margin: 0;
font-size: clamp(2.5rem,4.7vw,5rem);
font-weight: 500;
line-height: 1;
}
.room-gallery-count {
color: #725f50;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.room-slider {
position: relative;
}
.room-slider-viewport {
overflow: hidden;
background: #ddd2c5;
}
.room-slider-track {
display: flex;
transition: transform .58s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.room-slide {
position: relative;
min-width: 100%;
margin: 0;
}
.room-slide img {
display: block;
width: 100%;
height: clamp(410px,60vw,720px);
object-fit: cover;
}
.room-slide figcaption {
position: absolute;
left: 24px;
bottom: 22px;
padding: 9px 13px;
background: rgba(4,34,31,.82);
color: #fff;
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.room-slider-nav {
position: absolute;
z-index: 2;
top: 50%;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,.65);
border-radius: 50%;
background: rgba(7,63,59,.78);
color: #fff;
cursor: pointer;
transform: translateY(-50%);
transition: .25s;
}
.room-slider-nav:hover {
background: var(--gold);
color: var(--teal);
border-color: var(--gold);
}
.room-slider-prev {
left: 18px;
}
.room-slider-next {
right: 18px;
}
.room-slider-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 20px 0 0;
}
.room-slider-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: #b8ad9f;
cursor: pointer;
transition: .25s;
}
.room-slider-dot[aria-current=true] {
width: 28px;
border-radius: 6px;
background: var(--teal);
}
.gallery-intro {
width: min(820px,100%);
margin: 0 auto 44px;
text-align: center;
}
.gallery-intro h2 {
font-size: clamp(2.5rem,5vw,5.3rem);
margin: 0 0 18px;
line-height: 1;
}
.gallery-archive {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-auto-flow: dense;
gap: 12px;
}
.gallery-archive .gallery-item {
grid-column: span 4;
height: 330px;
}
.gallery-archive .gallery-item:nth-child(7n+1) {
grid-column: span 8;
height: 520px;
}
.gallery-archive .gallery-item:nth-child(7n+2) {
grid-column: span 4;
height: 520px;
}
.gallery-archive .gallery-item:nth-child(7n+5) {
grid-column: span 6;
height: 430px;
}
.gallery-archive .gallery-item:nth-child(7n+6) {
grid-column: span 6;
height: 430px;
}
.gallery-archive img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.gallery-archive .gallery-item:hover img {
transform: scale(1.035);
}
.district-stats {
display: grid;
grid-template-columns: repeat(3,1fr);
width: min(1120px,calc(100% - 48px));
margin: 0 auto clamp(70px,9vw,120px);
border-top: 1px solid #d8cfc2;
border-bottom: 1px solid #d8cfc2;
}
.district-stat {
display: flex;
align-items: center;
gap: 17px;
padding: 28px 32px;
border-right: 1px solid #d8cfc2;
}
.district-stat:last-child {
border-right: 0;
}
.district-stat strong {
display: block;
font-family: var(--display);
font-size: 1.42rem;
font-weight: 500;
color: var(--teal);
}
.district-stat span {
display: block;
font-size: .73rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #78685b;
}
.district-mosaic {
display: grid;
grid-template-columns: 1.15fr .85fr;
grid-template-rows: 330px 260px;
gap: 12px;
}
.district-mosaic figure {
margin: 0;
overflow: hidden;
}
.district-mosaic figure:first-child {
grid-row: 1/3;
}
.district-mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s;
}
.district-mosaic figure:hover img {
transform: scale(1.03);
}
.restaurant-photo-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
margin-top: 38px;
}
.restaurant-card {
position: relative;
min-height: 420px;
overflow: hidden;
background: var(--teal);
color: #fff;
}
.restaurant-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s;
}
.restaurant-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg,rgba(2,26,24,.91),rgba(2,26,24,.02) 70%);
}
.restaurant-card:hover img {
transform: scale(1.045);
}
.restaurant-card-copy {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
padding: 25px 22px;
}
.restaurant-card h3 {
margin: 0 0 5px;
color: #fff;
font-size: 1.7rem;
font-weight: 500;
}
.restaurant-card p {
margin: 0;
color: rgba(255,255,255,.84);
font-size: .9rem;
}
.dayflow {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: #cfc5b8;
}
.dayflow-card {
padding: 46px 38px;
background: #fff;
}
.dayflow-card .pbh-icon {
width: 28px;
height: 28px;
margin-bottom: 22px;
color: var(--gold-dark);
}
.dayflow-card h3 {
font-size: 1.8rem;
margin: 0 0 12px;
}
.map-section {
background: var(--teal);
color: #fff;
}
.map-grid {
display: grid;
grid-template-columns: .7fr 1.3fr;
min-height: 600px;
}
.map-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(45px,7vw,100px);
}
.map-copy h2 {
font-size: clamp(3rem,5vw,5.5rem);
font-weight: 500;
line-height: 1;
margin: 0 0 24px;
color: #fff;
}
.map-copy p,.map-copy address {
color: rgba(255,255,255,.8);
}
.map-copy .icon-feature {
margin: 12px 0 2px;
}
.map-frame {
min-height: 520px;
background: #d8d0c4;
}
.map-frame iframe {
display: block;
width: 100%;
height: 100%;
min-height: 600px;
border: 0;
filter: saturate(.75) contrast(.95);
}
@media (max-width:980px) {
.restaurant-photo-grid {
grid-template-columns: repeat(2,1fr);
}
.map-grid {
grid-template-columns: 1fr;
}
.map-frame iframe {
min-height: 480px;
}
}
@media (max-width:820px) {
.room-gallery-section {
padding-left: 0;
padding-right: 0;
}
.room-gallery-heading {
padding: 0 22px;
}
.room-slide img {
height: 58vw;
min-height: 330px;
}
.room-slider-nav {
width: 42px;
height: 42px;
}
.gallery-archive {
grid-template-columns: 1fr 1fr;
}
.gallery-archive .gallery-item,.gallery-archive .gallery-item:nth-child(n) {
grid-column: auto;
height: 240px;
}
.gallery-archive .gallery-item:nth-child(5n+1) {
grid-column: 1/3;
height: 390px;
}
.district-stats {
grid-template-columns: 1fr;
margin-bottom: 72px;
}
.district-stat {
border-right: 0;
border-bottom: 1px solid #d8cfc2;
}
.district-stat:last-child {
border-bottom: 0;
}
.district-mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: 400px 230px;
}
.district-mosaic figure:first-child {
grid-column: 1/3;
grid-row: auto;
}
.dayflow {
grid-template-columns: 1fr;
}
.dayflow-card {
padding: 38px 28px;
}
}
@media (max-width:540px) {
.room-gallery-heading {
align-items: start;
flex-direction: column;
gap: 8px;
}
.room-slide img {
height: 68vw;
min-height: 300px;
}
.room-slide figcaption {
left: 12px;
bottom: 12px;
max-width: calc(100% - 24px);
}
.gallery-archive {
gap: 7px;
}
.gallery-archive .gallery-item,.gallery-archive .gallery-item:nth-child(n) {
height: 190px;
}
.gallery-archive .gallery-item:nth-child(5n+1) {
height: 310px;
}
.district-mosaic {
grid-template-rows: 310px 160px;
gap: 7px;
}
.restaurant-photo-grid {
grid-template-columns: 1fr;
}
.restaurant-card {
min-height: 390px;
}
.map-copy {
padding: 62px 24px;
}
.map-frame iframe {
min-height: 430px;
}
}
@layer base {
input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
appearance: none;
background-color: #fff;
border-color: oklch(55.1% 0.027 264.364);
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
&:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,  );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: oklch(54.6% 0.245 262.881);
--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);
border-color: oklch(54.6% 0.245 262.881);
}
}
input::placeholder,textarea::placeholder {
color: oklch(55.1% 0.027 264.364);
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
}
::-webkit-date-and-time-value {
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
print-color-adjust: exact;
}
select:where([multiple]),select:where([size]:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
print-color-adjust: unset;
}
input:where([type='checkbox']),input:where([type='radio']) {
appearance: none;
padding: 0;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: oklch(54.6% 0.245 262.881);
background-color: #fff;
border-color: oklch(55.1% 0.027 264.364);
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
input:where([type='checkbox']) {
border-radius: 0px;
}
input:where([type='radio']) {
border-radius: 100%;
}
input:where([type='checkbox']):focus,input:where([type='radio']):focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,  );
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: oklch(54.6% 0.245 262.881);
--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);
}
input:where([type='checkbox']):checked,input:where([type='radio']):checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
input:where([type='checkbox']):checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='radio']):checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
border-color: transparent;
background-color: currentColor;
}
input:where([type='checkbox']):indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
input:where([type='file']) {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
input:where([type='file']):focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-tracking: initial;
}
}
}