@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: 'DM Sans',sans-serif;
--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);
--color-primary: #126968;
--color-neutral: #143e3a;
}
}
@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 {
.static {
position: static;
}
.-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);
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.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;
}
.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);
}
.text-neutral {
color: var(--color-neutral);
}
.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\:text-primary {
&:hover {
@media (hover: hover) {
color: var(--color-primary);
}
}
}
.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));
}
}
}
@layer base {
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body.cafe-site {
margin: 0;
background: #faf6eb;
color: #173e3a;
font-family: 'DM Sans',sans-serif;
font-size: 16px;
line-height: 1.65;
}
a {
color: inherit;
text-decoration: none;
}
button,input,select,textarea {
font: inherit;
}
button,a,input,select,textarea {
-webkit-tap-highlight-color: transparent;
}
button {
cursor: pointer;
}
img {
display: block;
max-width: 100%;
height: auto;
}
figure,p,h1,h2,h3 {
margin: 0;
}
h1,h2,h3 {
font-family: 'Fraunces',Georgia,serif;
font-weight: normal;
line-height: 1.06;
letter-spacing: -.04em;
}
h1 {
font-size: clamp(46px,6vw,83px);
}
h2 {
font-size: clamp(34px,4vw,54px);
}
h3 {
font-size: 28px;
}
p {
margin: 0 0 1em;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
outline: 3px solid #c76c2e;
outline-offset: 4px;
}
address {
font-style: normal;
}
[hidden] {
display: none !important;
}
}
@layer components {
.wrap {
width: min(1200px,calc(100% - 80px));
margin-inline: auto;
}
.section {
padding-block: 92px;
}
.section-bottom {
padding-bottom: 100px;
}
.eyebrow {
font: 700 11px/1.5 'DM Sans',sans-serif;
letter-spacing: .15em;
margin-bottom: 20px;
}
.intro {
font-size: 18px;
line-height: 1.65;
}
.button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 35px;
background: #126968;
color: #fff;
border: 1px solid #126968;
padding: 17px 24px;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
border-radius: 4px;
transition: background .2s;
}
.button:hover {
background: #0d514f;
}
.button span {
font-size: 20px;
line-height: 1;
}
.button.small {
padding: 12px 18px;
font-size: 12px;
gap: 20px;
}
.button.light {
background: #faf6eb;
color: #143e3a;
border-color: #faf6eb;
}
.button-row {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
.text-link {
display: inline-flex;
gap: 20px;
align-items: center;
font-size: 13px;
font-weight: 700;
padding: 9px 0;
border-bottom: 1px solid currentColor;
}
.skip-link {
position: absolute;
left: 15px;
top: -100px;
z-index: 999;
background: white;
padding: 10px;
}
.skip-link:focus {
top: 40px;
}
.topbar {
background: #143e3a;
color: #faf6eb;
padding: 9px 40px;
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: .09em;
}
.site-header {
min-height: 106px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.brand {
display: flex;
gap: 12px;
align-items: center;
font-family: 'Fraunces',Georgia,serif;
font-size: 29px;
letter-spacing: .02em;
line-height: 1;
}
.brand small {
display: block;
font: 700 7px/1 'DM Sans',sans-serif;
letter-spacing: .11em;
margin-top: 9px;
}
.brand-route {
border: 2px solid #143e3a;
border-radius: 5px 5px 14px 14px;
text-align: center;
font: 700 10px/1 'DM Sans',sans-serif;
padding: 6px 7px 7px;
}
.brand-route b {
font-size: 28px;
}
.site-header nav {
display: flex;
align-items: center;
gap: 26px;
font-size: 12px;
font-weight: 700;
}
.site-header nav a {
padding: 9px 0;
border-bottom: 2px solid transparent;
}
.site-header nav a:hover,.site-header nav a[aria-current] {
border-color: #126968;
}
.nav-toggle {
display: none;
}
.hero {
display: grid;
grid-template-columns: 1fr 1.03fr;
gap: 60px;
align-items: center;
padding-top: 32px;
padding-bottom: 70px;
}
.hero h1 {
margin-bottom: 27px;
}
.hero .intro {
max-width: 410px;
margin-bottom: 30px;
}
.hero .eyebrow {
display: flex;
align-items: center;
gap: 9px;
font-size: 9px;
letter-spacing: .12em;
}
.mini-star {
font-size: 25px;
color: #126968;
}
.hero-note {
display: flex;
align-items: center;
gap: 12px;
margin-top: 40px;
font-size: 11px;
}
.line {
width: 28px;
height: 1px;
background: #126968;
}
.hero-photo {
position: relative;
height: 555px;
border-radius: 160px 160px 5px 5px;
background: #90c4ba;
}
.hero-photo>img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
object-position: 53% center;
}
.hero-photo:after {
content: '';
position: absolute;
inset: 55% 0 0;
background: linear-gradient(transparent,rgba(8,37,33,.8));
border-radius: 0 0 5px 5px;
}
.hero-photo figcaption {
position: absolute;
bottom: 30px;
left: 30px;
z-index: 1;
color: white;
}
.hero-photo figcaption span {
font-size: 8px;
letter-spacing: .17em;
display: block;
margin-bottom: 7px;
}
.hero-photo figcaption b {
font: normal 29px 'Fraunces',Georgia,serif;
display: block;
}
.hero-photo figcaption small {
font-size: 11px;
}
.round-stamp {
position: absolute;
right: -18px;
top: 34px;
border: 1px dashed #143e3a;
outline: 6px solid #eebc78;
background: #eebc78;
width: 106px;
height: 106px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 9px;
letter-spacing: .09em;
line-height: 1.7;
transform: rotate(12deg);
z-index: 2;
}
.ribbon {
background: #b6ddcf;
border-top: 1px solid #8ebbac;
border-bottom: 1px solid #8ebbac;
display: flex;
align-items: center;
justify-content: space-around;
gap: 25px;
padding: 22px 25px;
font-size: 10px;
font-weight: bold;
letter-spacing: .1em;
overflow: hidden;
white-space: nowrap;
}
.ribbon b {
font-size: 21px;
font-weight: normal;
}
.section-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 25px;
margin-bottom: 40px;
}
.section-heading .eyebrow {
margin-bottom: 12px;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 26px;
}
.feature-image {
position: relative;
overflow: hidden;
border-radius: 6px;
margin-bottom: 24px;
background: #cfe4d8;
aspect-ratio: 1.25;
}
.feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.food-feature:hover img {
transform: scale(1.035);
}
.image-arrow {
position: absolute;
right: 17px;
bottom: 17px;
border-radius: 50%;
width: 38px;
height: 38px;
background: #faf6eb;
display: grid;
place-items: center;
}
.food-feature .eyebrow {
font-size: 9px;
margin-bottom: 9px;
}
.food-feature h3 {
font-size: 35px;
margin-bottom: 12px;
}
.food-feature p {
font-size: 13px;
}
.category-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.category-links a {
border: 1px solid #afbeb0;
border-radius: 4px;
padding: 11px 16px;
font-size: 12px;
display: flex;
gap: 25px;
}
.category-links a:hover {
background: #b6ddcf;
}
.special-band {
background: #126968;
color: #faf6eb;
padding: 70px 0;
}
.split {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 100px;
align-items: center;
}
.special-band h2 {
margin-bottom: 24px;
}
.special-band p {
max-width: 400px;
}
.special-band .button {
margin-top: 15px;
}
.special-ticket {
background: #b6ddcf;
color: #143e3a;
padding: 35px 42px;
text-align: center;
border: 1px dashed #143e3a;
outline: 10px solid #b6ddcf;
transform: rotate(3deg);
margin-inline: 25px;
}
.special-ticket h3 {
font-size: 36px;
}
.ticket-price {
font-family: 'Fraunces',Georgia,serif;
font-size: clamp(30px,4vw,60px);
letter-spacing: -.06em;
margin: 15px 0;
border-block: 1px solid #779d8d;
}
.special-ticket .eyebrow {
font-size: 10px;
}
.special-ticket p {
font-size: 12px;
margin: 0;
}
.special-ticket a {
font-size: 11px;
text-decoration: underline;
}
.story-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 85px;
align-items: center;
}
.story-photo {
position: relative;
}
.story-photo img {
aspect-ratio: 1.18;
object-fit: cover;
border-radius: 5px;
}
.photo-label {
position: absolute;
bottom: 20px;
left: 20px;
background: #faf6eb;
padding: 10px 15px;
font-size: 8px;
font-weight: bold;
letter-spacing: .08em;
}
.story-grid h2 {
margin-bottom: 27px;
}
.story-grid p:not(.eyebrow) {
font-size: 15px;
}
.story-grid .intro {
font-size: 18px !important;
}
.testimonials {
background: #e9eee1;
}
.review-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 30px;
margin-top: 35px;
}
.review-grid blockquote {
margin: 0 0 20px;
font: 24px/1.4 Georgia;
}
.testimonial-photo {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 20px;
}
.review-grid figcaption {
font-size: 12px;
}
.visit-strip {
padding: 45px 0 75px;
border-top: 1px solid #b4c3b6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.visit-strip h2 {
font-size: 40px;
margin-bottom: 15px;
}
.visit-strip p {
font-size: 12px;
}
.visit-strip .eyebrow {
margin-top: 10px;
}
.site-footer {
background: #143e3a;
color: #faf6eb;
padding-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr .7fr;
gap: 70px;
padding-bottom: 45px;
}
.footer-brand {
font: 30px 'Fraunces',Georgia,serif;
display: block;
margin-bottom: 22px;
}
.footer-brand span {
font: 10px 'DM Sans',sans-serif;
display: block;
letter-spacing: .09em;
margin-top: 12px;
}
.footer-grid p,.footer-grid a:not(.footer-brand) {
font-size: 12px;
line-height: 1.8;
}
.footer-grid h2 {
font: 700 11px 'DM Sans',sans-serif;
margin: 5px 0 22px;
letter-spacing: .05em;
}
.footer-grid>div:last-child a {
display: block;
margin-bottom: 8px;
}
.footer-bottom {
border-top: 1px solid #48615a;
padding-block: 18px;
display: flex;
justify-content: space-between;
font-size: 9px;
letter-spacing: .03em;
}
.page-title {
padding: 60px 0 55px;
}
.page-title h1 {
margin-bottom: 25px;
}
.page-title p:not(.eyebrow) {
max-width: 560px;
font-size: 16px;
}
.menu-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 70px;
padding-bottom: 90px;
}
.menu-sidebar {
align-self: start;
position: sticky;
top: 30px;
}
.menu-sidebar h2 {
font-size: 26px;
margin-bottom: 20px;
}
.menu-sidebar>a {
display: flex;
justify-content: space-between;
padding: 10px 12px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 3px;
}
.menu-sidebar>a.selected {
background: #126968;
color: white;
}
.menu-sidebar>a:hover {
background: #b6ddcf;
color: #143e3a;
}
.callout {
padding: 23px 16px;
border: 1px solid #b4c3b6;
margin-top: 24px;
border-radius: 4px;
}
.callout p,.callout a {
font-size: 12px;
}
.callout b {
font: 24px 'Fraunces',Georgia,serif;
display: block;
margin-bottom: 8px;
}
.callout a {
text-decoration: underline;
}
.search-label {
font-size: 11px;
display: block;
margin-bottom: 7px;
}
.menu-content input {
width: 100%;
background: white;
border: 1px solid #a9bcb0;
padding: 13px 16px;
border-radius: 4px;
margin-bottom: 30px;
}
.menu-category {
margin-bottom: 50px;
}
.menu-category-head {
display: flex;
gap: 20px;
align-items: center;
border-bottom: 2px solid #126968;
padding-bottom: 18px;
margin-bottom: 7px;
}
.category-number {
font: 20px 'Fraunces',Georgia,serif;
background: #b6ddcf;
padding: 12px;
border-radius: 50%;
}
.menu-category h2 {
font-size: 36px;
margin-bottom: 8px;
}
.menu-category-head p {
font-size: 12px;
margin: 0;
}
.dish-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
.dish {
padding: 23px 0;
border-bottom: 1px solid #ccd3c4;
}
.dish-title {
display: flex;
align-items: start;
justify-content: space-between;
gap: 15px;
}
.dish h3 {
font-size: 22px;
line-height: 1.2;
letter-spacing: -.02em;
}
.dish .price {
font-size: 12px;
font-weight: bold;
color: #126968;
text-align: right;
max-width: 145px;
flex-shrink: 0;
}
.dish p {
font-size: 12px;
line-height: 1.65;
margin: 10px 0 0;
}
.dish-photo-link {
font-size: 10px;
text-decoration: underline;
display: inline-block;
margin-top: 10px;
}
.menu-footnote {
font-size: 11px;
color: #51645a;
}
.specials-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 25px;
}
.special-card {
padding: 35px;
background: #e7ecdd;
border: 1px solid #b9cbbd;
border-radius: 5px;
min-height: 265px;
}
.special-card h2 {
font-size: 33px;
margin-bottom: 20px;
}
.special-card p {
font-size: 13px;
}
.special-card .special-price {
font: 30px 'Fraunces',Georgia,serif;
color: #126968;
}
.special-call {
background: #126968;
color: white;
}
.special-call>span {
font-size: 34px;
display: block;
margin-bottom: 15px;
}
.empty-event {
padding: 42px;
background: #e7ecdd;
border-radius: 6px;
margin-top: 25px;
display: flex;
align-items: center;
gap: 35px;
}
.empty-event>span {
font-size: 60px;
color: #126968;
}
.empty-event h3 {
font-size: 28px;
margin-bottom: 12px;
}
.empty-event p {
font-size: 14px;
}
.past-heading {
margin-top: 70px;
font-size: 36px;
}
.events-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 30px;
}
.event-card {
display: flex;
align-items: start;
gap: 24px;
border-top: 1px solid #a5bcad;
padding-top: 25px;
}
.event-card h3 {
margin-bottom: 12px;
font-size: 28px;
}
.event-card p {
font-size: 12px;
}
.event-date {
min-width: 65px;
text-align: center;
padding: 12px 6px;
background: #b6ddcf;
border-radius: 4px;
}
.event-date b {
font: 32px 'Fraunces',Georgia,serif;
display: block;
}
.event-date span {
font-size: 9px;
}
.event-image {
max-height: 250px;
width: auto;
margin-top: 20px;
}
.visit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 65px;
}
.visit-grid figure img {
width: 100%;
border-radius: 6px;
}
.visit-grid h2 {
margin-bottom: 22px;
}
.visit-hours {
margin-block: 20px;
}
.visit-options {
margin-top: 35px;
border-top: 1px solid #adc2b5;
padding-top: 30px;
}
.visit-options h3 {
font-size: 23px;
margin-bottom: 8px;
}
.visit-options p {
font-size: 13px;
}
.portal-login {
max-width: 650px;
margin: 20px auto 60px;
}
.portal-login h1 {
font-size: 55px;
margin-bottom: 25px;
}
.portal-login .button {
margin-bottom: 20px;
}
.muted {
font-size: 11px;
color: #52665c;
}
.portal-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
margin-bottom: 30px;
}
.portal-heading h1 {
font-size: 43px;
margin-bottom: 20px;
}
.portal-heading p {
font-size: 12px;
}
.portal-heading .eyebrow {
font-size: 10px;
}
.portal-note,.notice {
background: #dfecd9;
border: 1px solid #9bb699;
border-radius: 4px;
padding: 14px 18px;
font-size: 13px;
}
.notice.error {
background: #fff0dd;
border-color: #b7884a;
}
.portal-layout {
display: grid;
grid-template-columns: 230px 1fr;
gap: 35px;
margin-top: 35px;
}
.portal-nav a {
display: flex;
justify-content: space-between;
padding: 14px;
font-size: 13px;
border-radius: 4px;
margin-bottom: 5px;
}
.portal-nav a[aria-current] {
background: #126968;
color: white;
}
.portal-nav a:hover {
background: #b6ddcf;
color: #143e3a;
}
.portal-panel {
background: #fffdf6;
border: 1px solid #b9cbbd;
border-radius: 6px;
padding: 35px;
}
.portal-panel h2 {
font-size: 33px;
margin-bottom: 30px;
}
.portal-panel label {
font-size: 12px;
font-weight: bold;
display: block;
}
.portal-panel input,.portal-panel select,.portal-panel textarea {
display: block;
width: 100%;
border: 1px solid #a7bcae;
background: white;
border-radius: 4px;
padding: 11px;
margin-top: 7px;
color: #173e3a;
font-size: 14px;
}
.portal-panel input[type=file] {
font-size: 12px;
}
.portal-panel textarea {
resize: vertical;
}
.select-row {
display: flex;
gap: 15px;
align-items: center;
}
.select-row select {
margin: 0;
}
.record-select {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid #c9d4c4;
}
.record-select label {
margin-bottom: 9px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.full {
grid-column: 1/-1;
}
.editor-form>label {
margin-bottom: 22px;
}
.portal-help {
font-size: 12px;
margin-bottom: 25px;
color: #52665c;
}
.portal-image {
max-height: 140px;
width: auto;
margin-bottom: 20px;
border-radius: 4px;
}
.image-editor {
border-top: 1px solid #c9d4c4;
padding-top: 22px;
}
.image-editor label {
margin-bottom: 20px;
}
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 30px;
}
.danger-link {
background: none;
border: 0;
color: #963f2e;
text-decoration: underline;
font-size: 12px;
}
.generic-content {
max-width: 850px;
min-height: 45vh;
padding-block: 60px;
}
.generic-content h1 {
font-size: 55px;
margin-bottom: 35px;
}
.generic-content a {
text-decoration: underline;
}
@media (max-width:1050px) {
.site-header nav {
gap: 16px;
}
.header-call {
display: none;
}
.hero {
gap: 30px;
}
.hero-photo {
height: 490px;
}
.hero .eyebrow {
font-size: 8px;
}
.hero h1 {
font-size: 64px;
}
.menu-layout {
gap: 35px;
}
.dish-grid {
grid-template-columns: 1fr;
}
.specials-grid {
grid-template-columns: 1fr 1fr;
}
.split {
gap: 45px;
}
.story-grid {
gap: 40px;
}
}
@media (max-width:760px) {
.wrap {
width: calc(100% - 40px);
}
.topbar {
padding: 9px 20px;
font-size: 8px;
}
.topbar>span:first-child {
display: none;
}
.site-header {
min-height: 86px;
position: relative;
flex-wrap: wrap;
gap: 0;
}
.brand {
font-size: 25px;
}
.nav-toggle {
display: flex;
gap: 14px;
align-items: center;
background: none;
border: 1px solid #adbdae;
padding: 9px 12px;
font-size: 12px;
border-radius: 4px;
}
.site-header nav {
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
padding: 20px 0;
gap: 0;
}
.site-header nav.is-open {
display: flex;
}
.site-header nav a {
padding: 12px;
}
.hero {
grid-template-columns: 1fr;
gap: 36px;
padding-top: 22px;
padding-bottom: 45px;
}
.hero h1 {
font-size: 55px;
max-width: 440px;
margin-bottom: 24px;
}
.hero .eyebrow {
font-size: 8px;
}
.hero .intro {
font-size: 16px;
margin-bottom: 27px;
}
.hero-note {
margin-top: 26px;
}
.hero-photo {
height: 390px;
border-radius: 115px 115px 5px 5px;
margin-right: 8px;
}
.round-stamp {
width: 86px;
height: 86px;
font-size: 8px;
right: -10px;
top: 25px;
}
.hero-photo>img {
object-position: center;
}
.ribbon {
justify-content: start;
padding: 18px 20px;
font-size: 9px;
gap: 25px;
}
.section {
padding-block: 58px;
}
.section-heading {
align-items: start;
flex-direction: column;
gap: 15px;
margin-bottom: 28px;
}
.section-heading h2 {
font-size: 40px;
}
.section-heading .text-link {
font-size: 12px;
}
.featured-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.feature-image {
aspect-ratio: 1.5;
margin-bottom: 18px;
}
.food-feature h3 {
font-size: 32px;
margin-bottom: 9px;
}
.food-feature p {
margin-bottom: 0;
}
.category-links {
gap: 8px;
margin-top: 27px;
}
.category-links a {
padding: 9px 12px;
font-size: 11px;
gap: 15px;
}
.split {
grid-template-columns: 1fr;
gap: 50px;
}
.special-band {
padding: 52px 0;
}
.special-band h2 {
font-size: 42px;
}
.special-ticket {
margin: 0 14px;
transform: rotate(2deg);
padding: 28px 20px;
}
.story-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.story-grid h2 {
font-size: 40px;
}
.story-photo img {
aspect-ratio: 1.4;
}
.visit-strip {
flex-direction: column;
align-items: start;
padding: 35px 0 50px;
gap: 20px;
}
.visit-strip h2 {
font-size: 36px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.footer-grid>div:first-child {
grid-column: 1/-1;
}
.site-footer {
padding-top: 40px;
}
.footer-bottom {
gap: 15px;
font-size: 8px;
}
.page-title {
padding: 40px 0;
}
.page-title h1 {
font-size: 49px;
}
.menu-layout {
grid-template-columns: 1fr;
gap: 28px;
padding-bottom: 55px;
}
.menu-sidebar {
position: static;
display: flex;
gap: 8px;
overflow: auto;
padding-bottom: 12px;
}
.menu-sidebar h2,.menu-sidebar .callout {
display: none;
}
.menu-sidebar>a {
flex-shrink: 0;
padding: 9px 13px;
border: 1px solid #aabfb1;
font-size: 12px;
gap: 10px;
}
.menu-sidebar>a span {
display: none;
}
.menu-category h2 {
font-size: 33px;
}
.dish-title {
gap: 20px;
}
.dish h3 {
font-size: 22px;
}
.dish .price {
font-size: 11px;
max-width: 120px;
}
.specials-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.special-card {
min-height: 0;
padding: 28px;
}
.events-grid {
grid-template-columns: 1fr;
}
.empty-event {
padding: 25px;
align-items: start;
gap: 18px;
}
.empty-event>span {
font-size: 35px;
}
.empty-event h3 {
font-size: 25px;
}
.visit-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.review-grid {
grid-template-columns: 1fr;
}
.section-bottom {
padding-bottom: 60px;
}
.portal-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.portal-nav {
display: flex;
overflow: auto;
gap: 7px;
}
.portal-nav a {
white-space: nowrap;
gap: 12px;
padding: 10px;
font-size: 11px;
border: 1px solid #afc4b4;
}
.portal-heading {
align-items: start;
}
.portal-heading h1 {
font-size: 34px;
}
.portal-heading .text-link {
font-size: 10px;
white-space: nowrap;
}
.portal-panel {
padding: 20px;
}
.form-grid {
grid-template-columns: 1fr;
}
.portal-login h1 {
font-size: 45px;
}
.select-row {
gap: 8px;
}
.form-actions {
align-items: start;
flex-direction: column;
}
.generic-content h1 {
font-size: 42px;
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
* {
transition: none !important;
}
}
}
@layer components {
body.cafe-site {
background: #faf6eb !important;
color: #173e3a !important;
}
.cafe-site main a,.cafe-site .site-header a,.cafe-site .site-footer a,.cafe-site .topbar a,.cafe-site .category-header a {
color: inherit !important;
}
.cafe-site .button {
color: #fff !important;
}
.cafe-site .button.light {
color: #143e3a !important;
}
.cafe-site .menu-sidebar>a.selected,.cafe-site .portal-nav a[aria-current] {
color: white !important;
}
}
@layer components {
body.cafe-site {
background: #e7f3e9 !important;
}
.topbar {
background: #103e40;
color: #fff6dc;
padding-block: 11px;
}
.site-header.wrap {
width: 100%;
max-width: none;
padding: 16px max(40px,calc((100vw - 1200px)/2));
background: #279fab;
min-height: 115px;
gap: 35px;
color: #062f33;
}
.brand-logo {
width: 76px;
height: 76px;
object-fit: contain;
border-radius: 50%;
border: 3px solid #fff4d6;
background: black;
}
.brand {
font-family: 'Fraunces',Georgia,serif;
font-weight: 600;
font-size: 34px;
}
.brand small {
font-size: 8px;
}
.site-header nav {
font-size: 13px;
gap: 23px;
}
.site-header nav a {
border-radius: 4px;
padding: 10px 8px;
}
.site-header nav a:hover,.site-header nav a[aria-current] {
background: #f9ca77;
border-color: #f9ca77;
}
.cafe-site .header-call {
background: #f9ca77;
color: #123d3d !important;
border: 0;
box-shadow: 4px 4px 0 #164f53;
}
.category-header {
background: #126770;
color: #fff9e4;
border-bottom: 4px solid #f9ca77;
}
.category-header>div {
display: flex;
justify-content: space-between;
gap: 20px;
overflow-x: auto;
}
.category-header a {
font-size: 12px;
font-weight: 700;
white-space: nowrap;
padding: 13px 0;
}
.category-header a:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
.hero {
width: 100%;
max-width: none;
padding: 55px max(40px,calc((100vw - 1200px)/2)) 65px;
background: #9dd8d5;
gap: 55px;
position: relative;
}
.hero h1 {
font-weight: 500;
letter-spacing: -.055em;
line-height: 1.02;
color: #073b40;
}
.hero .eyebrow {
font-size: 10px;
letter-spacing: .1em;
}
.hero .intro {
color: #103e40;
}
.hero-photo {
height: 535px;
border-radius: 16px 100px 16px 16px;
border: 8px solid #f9efd7;
box-shadow: 12px 12px 0 #279fab;
}
.hero-photo img {
object-position: 50% 55%;
}
.round-stamp {
background: #f9ca77;
outline-color: #f9ca77;
width: 115px;
height: 115px;
right: -25px;
top: 30px;
font-size: 10px;
}
.hero .button {
background: #103e40;
border-color: #103e40;
box-shadow: 4px 4px 0 #279fab;
}
.ribbon {
background: #f9ca77;
border-color: #d69c47;
color: #153b3c;
font-size: 11px;
padding-block: 20px;
}
.food-feature {
background: #fff6df;
border: 1px solid #8cbbb5;
border-radius: 10px;
overflow: hidden;
box-shadow: 5px 5px 0 #b5d8c9;
padding-bottom: 23px;
}
.feature-image {
margin-bottom: 22px;
border-radius: 0;
aspect-ratio: 1.13;
}
.food-feature>span,.food-feature>h3,.food-feature>p {
margin-inline: 22px;
}
.food-feature h3 {
font-weight: 500;
}
.category-links a {
background: #279fab;
border: 0;
color: #062f33;
font-weight: 700;
}
.special-band {
background: #167f87;
}
.special-ticket {
background: #f9ca77;
outline-color: #f9ca77;
}
.story-photo {
border: 8px solid #fff3d9;
box-shadow: 10px 10px 0 #279fab;
border-radius: 5px;
}
.visit-strip {
background: #9dd8d5;
padding: 40px;
border-radius: 10px;
margin-bottom: 65px;
border: 0;
}
.site-footer {
background: #104f54;
}
.page-title {
width: 100%;
max-width: none;
background: #9dd8d5;
padding: 50px max(40px,calc((100vw - 1200px)/2));
border-bottom: 4px solid #279fab;
margin-bottom: 45px;
}
.page-title h1 {
font-weight: 500;
}
.menu-layout {
grid-template-columns: 180px 1fr;
gap: 40px;
}
.menu-sidebar>a {
font-weight: 700;
}
.dish-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 22px;
}
.dish {
background: #fff9e9;
border: 1px solid #9fc5b8;
border-radius: 9px;
overflow: hidden;
padding: 0;
box-shadow: 4px 4px 0 #c3ded1;
align-self: start;
}
.dish-image {
height: 200px;
background: #88beb7;
overflow: hidden;
}
.dish-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.dish:hover .dish-image img {
transform: scale(1.04);
}
.dish-details {
padding: 19px;
}
.dish-title {
display: block;
}
.dish h3 {
font-size: 23px;
margin-bottom: 12px;
}
.dish .price {
display: inline-block;
background: #bde4d8;
color: #124c49;
padding: 5px 9px;
border-radius: 3px;
text-align: left;
max-width: none;
font-size: 12px;
}
.dish p {
font-size: 12px;
}
.category-banner {
position: relative;
height: 240px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 25px;
border: 6px solid #f9efd7;
}
.category-banner img {
height: 100%;
width: 100%;
object-fit: cover;
}
.category-banner span {
position: absolute;
bottom: 20px;
left: 22px;
background: #126770;
color: white;
font: 36px 'Fraunces',Georgia,serif;
padding: 8px 18px;
border-radius: 4px;
}
.menu-category-head {
border-bottom: 3px solid #279fab;
margin-bottom: 23px;
}
.menu-category h2 {
font-weight: 500;
}
.category-number {
background: #279fab;
color: #062f33;
}
.special-card {
background: #fff6df;
border: 0;
box-shadow: 6px 6px 0 #9bc9bd;
border-top: 7px solid #279fab;
}
.special-card:nth-child(2n) {
border-top-color: #efb75b;
}
.special-call {
background: #167f87;
color: white;
}
.portal-panel {
background: #fff9e9;
}
.portal-note {
background: #9dd8d5;
}
.empty-event {
background: #9dd8d5;
}
.event-date {
background: #279fab;
color: #062f33;
}
@media (max-width:1100px) {
.site-header.wrap {
padding-inline: 30px;
gap: 18px;
}
.site-header nav {
gap: 8px;
font-size: 12px;
}
.hero {
padding-inline: 40px;
gap: 30px;
}
.hero h1 {
font-size: 64px;
}
.dish-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width:760px) {
.site-header.wrap {
padding: 12px 20px;
min-height: 96px;
}
.brand-logo {
width: 60px;
height: 60px;
}
.brand {
font-size: 28px;
}
.nav-toggle {
background: #f9ca77;
border: 0;
color: #123d3d;
font-weight: 700;
}
.site-header nav {
padding-bottom: 5px;
}
.site-header nav a {
padding: 12px;
font-size: 14px;
}
.category-header>div {
gap: 22px;
}
.category-header a {
font-size: 11px;
}
.hero {
padding: 35px 20px 45px;
gap: 36px;
}
.hero h1 {
font-size: 55px;
max-width: 410px;
}
.hero .eyebrow {
font-size: 8px;
}
.hero-photo {
height: 380px;
margin: 0 12px 8px 0;
border-width: 6px;
border-radius: 12px 80px 12px 12px;
box-shadow: 9px 9px 0 #279fab;
}
.round-stamp {
width: 90px;
height: 90px;
right: -17px;
top: 23px;
font-size: 8px;
}
.ribbon {
font-size: 10px;
}
.feature-image {
aspect-ratio: 1.5;
}
.visit-strip {
padding: 28px;
margin-bottom: 45px;
}
.page-title {
padding: 38px 20px;
margin-bottom: 28px;
}
.page-title h1 {
font-size: 47px;
}
.menu-layout {
grid-template-columns: 1fr;
gap: 22px;
}
.dish-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 14px;
}
.dish-image {
height: 160px;
}
.dish-details {
padding: 14px;
}
.dish h3 {
font-size: 20px;
}
.dish .price {
font-size: 10px;
}
.dish p {
font-size: 11px;
}
.category-banner {
height: 190px;
}
.category-banner span {
font-size: 30px;
}
.menu-sidebar {
margin-bottom: 5px;
}
.menu-sidebar>a {
background: #fff6df;
}
.special-card {
padding: 27px;
}
.story-photo {
box-shadow: 7px 7px 0 #279fab;
}
}
@media (max-width:390px) {
.dish-grid {
grid-template-columns: 1fr;
}
.dish-image {
height: 220px;
}
.hero h1 {
font-size: 49px;
}
}
}
@layer components {
.site-header.wrap {
padding: 16px 5.5% !important;
}
@media (max-width:760px) {
.site-header.wrap {
padding: 12px 20px !important;
}
}
}
@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-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-border-style: solid;
--tw-font-weight: initial;
--tw-tracking: initial;
}
}
}