/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: "Manrope","Noto Sans KR",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-sm: .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: #706858; --color-primary-500: #807363; --color-secondary-200: #ded8cd; --color-secondary-500: #827b70; --color-secondary-600: #736b60; --color-secondary-700: #554f47; --color-neutral: #282723; } } @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 { .fixed { position: fixed; } .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-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 { display: inline; } .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; } .resize { resize: both; } .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); } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-secondary-200 { border-color: var(--color-secondary-200); } .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-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)); } .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); } .text-primary-500 { color: var(--color-primary-500); } .text-secondary-500 { color: var(--color-secondary-500); } .text-secondary-600 { color: var(--color-secondary-600); } .text-secondary-700 { color: var(--color-secondary-700); } .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\:text-primary-500 { &:hover { @media (hover: hover) { color: var(--color-primary-500); } } } .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-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 { html { scroll-behavior: smooth; scroll-padding-top: 110px; } body.roti-site { margin: 0; background: #fff; color: #282723; font-family: "Manrope","Noto Sans KR",sans-serif; -webkit-font-smoothing: antialiased; } body.roti-site * { box-sizing: border-box; } body.roti-site a { color: inherit; text-decoration: none; } body.roti-site img { display: block; max-width: 100%; height: auto; } body.roti-site button,body.roti-site input { font: inherit; } body.roti-site button { cursor: pointer; } body.roti-site a:focus-visible,body.roti-site button:focus-visible,body.roti-site summary:focus-visible { outline: 2px solid #887459; outline-offset: 5px; } [x-cloak] { display: none !important; } } @layer components { .roti-skip { position: fixed; top: -80px; left: 20px; z-index: 99999; padding: 14px; background: #fff; } .roti-skip:focus { top: 10px; } .roti-header { position: sticky; top: 0; z-index: 60; width: 100%; background: #faf8f4; border-bottom: 1px solid #e5e0d8; } .home .roti-header { position: sticky; left: auto; right: auto; top: 0; background: #faf8f4; } .admin-bar .roti-header,.admin-bar.home .roti-header { top: 32px; } .roti-header-inner { max-width: 1440px; margin: auto; min-height: 98px; padding: 22px max(24px,4vw); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .roti-brand { display: flex; flex-direction: column; gap: 5px; flex: none; color: #464239 !important; } .roti-wordmark { font-family: "Manrope",sans-serif; font-size: 30px; line-height: 1; letter-spacing: .025em; white-space: nowrap; } .roti-wordmark b { font-weight: 750; } .roti-wordmark>span { font-weight: 400; margin-left: 5px; } .roti-brand small { font-size: 7px; letter-spacing: .15em; font-weight: 500; } .roti-brand small i { font-style: normal; margin-left: 8px; letter-spacing: .06em; font-size: 9px; } .roti-header .roti-brand { --roti-brand-size: 30px; flex-direction: row; align-items: center; gap: .23em; font-size: var(--roti-brand-size); color: #464239 !important; } .roti-brand-symbol { display: block; flex: none; width: auto; height: 1.7em; margin: 0; aspect-ratio: 150/117; overflow: hidden; } .roti-brand-text { position: relative; display: block; flex: none; width: max-content; height: 1.55em; min-width: 0; transform: translateY(.03em); } .roti-header .roti-brand .roti-wordmark { display: block; font-size: 1em; line-height: 1; letter-spacing: -.025em; } .roti-header .roti-brand .roti-wordmark>span { margin-left: .08em; } .roti-header .roti-brand-text small { position: absolute; left: .12em; right: .12em; bottom: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: .44em; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; color: inherit; } .roti-brand-text small>span { display: block; flex: none; } .roti-brand-text small>.roti-brand-space { width: .35em; } @media (max-width:1200px) { .roti-header .roti-brand { --roti-brand-size: 26px; } } @media (max-width:760px) { .roti-header .roti-brand { --roti-brand-size: 24px; } } @media (max-width:380px) { .roti-header .roti-brand { --roti-brand-size: 22px; } } @media (max-width:340px) { .roti-header .roti-brand { --roti-brand-size: 20px; } } .roti-nav { display: flex; gap: 30px; align-items: center; white-space: nowrap; font-size: 17px; font-weight: 500; letter-spacing: -.025em; } .roti-nav a { position: relative; padding: 8px 0; } .roti-nav a:after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px; background: #736758; transition: right .25s; } .roti-nav a:hover:after { right: 0; } .roti-header-actions { display: flex; align-items: center; gap: 15px; } .roti-admin-link.roti-consult { background: transparent; color: #514a3e !important; box-shadow: inset 0 0 0 1px #bcb2a4; } .roti-admin-link.roti-consult:hover { background: #eee9e0; } @media (max-width:1000px) { .roti-header-actions .roti-admin-link { display: none; } } .roti-consult,.roti-button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; padding: 15px 20px; line-height: 1.5; background: #2c2b27; color: #fff !important; font-size: 12px; font-weight: 500; transition: background .2s; } .roti-consult:hover,.roti-button:hover { background: #625747; } .roti-consult { padding: 13px 20px; white-space: nowrap; font-size: 15px; } .roti-button span,.roti-text-link span { font-family: sans-serif; font-size: 17px; line-height: 1; } .roti-search summary { display: grid; place-items: center; width: 32px; height: 38px; cursor: pointer; list-style: none; } .roti-search summary::-webkit-details-marker { display: none; } .roti-search svg { width: 20px; height: 20px; } .roti-search form { position: absolute; right: 24px; top: 90%; width: 320px; padding: 24px; background: #faf9f6; border: 1px solid #ded8cd; box-shadow: 0 15px 30px #302b2215; } .roti-search label { font-size: 12px; display: block; margin-bottom: 12px; } .roti-search form div { display: flex; } .roti-search input { width: 100%; min-width: 0; padding: 10px; border: 1px solid #d2cabc; background: #fff; font-size: 12px; } .roti-search button { flex: none; padding: 10px 15px; background: #2c2b27; color: #fff; border: 0; font-size: 12px; } .roti-menu-toggle { display: none; padding: 7px; background: transparent; border: 0; color: #282723; } .roti-mobile-nav { padding: 12px 24px 24px; background: #f8f6f2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .roti-mobile-nav a { padding: 12px 0; font-size: 17px; font-weight: 500; } .roti-header .roti-mobile-nav .roti-mobile-consult { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: 20px; max-width: 100%; min-height: 48px; padding: 13px 16px; background: #2c2b27; color: #fff !important; font-size: 15px; line-height: 1.5; } .roti-header .roti-mobile-nav .roti-mobile-consult:hover { background: #625747; } .roti-hero { height: clamp(640px,51vw,840px); position: relative; isolation: isolate; background: #e6dfd2; overflow: hidden; display: flex; align-items: center; } .roti-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -3; } .roti-hero-shade { position: absolute; inset: 0; background: none; z-index: -2; } .roti-hero-shade.roti-shade-living { background: linear-gradient(90deg,rgba(24,22,19,.38),rgba(24,22,19,.2) 40%,transparent 68%); } .roti-hero.roti-hero-living .roti-hero-content,.roti-hero.roti-hero-living .roti-hero-kicker,.roti-hero.roti-hero-living .lead,.roti-hero.roti-hero-living .roti-hero-signature,.roti-hero.roti-hero-living .roti-count,.roti-hero.roti-hero-living .roti-count em { color: #fff; text-shadow: 0 1px 8px #17151166; } .roti-hero-content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 60px 7.8% 96px; } .roti-hero-kicker { font-size: 14px; font-weight: 400; margin: 0 0 20px; color: #3e3b35; } .roti-hero h1 { font-size: clamp(35px,3.32vw,53px); line-height: 1.34; letter-spacing: -.05em; font-weight: 650; margin: 0; word-break: keep-all; } .roti-hero .lead { margin: 22px 0 30px; font-size: 14px; line-height: 1.85; letter-spacing: -.035em; color: #444039; } .roti-hero-bottom { position: absolute; bottom: 40px; left: 7.8%; right: 5.5%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .roti-carousel { display: flex; align-items: center; gap: 10px; } .roti-count { margin-right: 42px; white-space: nowrap; font-size: 12px; } .roti-count b { font-weight: 500; } .roti-count em { font-style: normal; color: #777166; font-size: 11px; } .roti-carousel button { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #8b817966; border-radius: 50%; background: #ffffff40; color: #302c25; font-size: 17px; } .roti-carousel button:hover { background: #fff9; } .roti-hero-signature { text-align: right; color: #504a40; font-size: 14px; line-height: 1.55; letter-spacing: .01em; text-shadow: 0 1px 4px #fff9; } .roti-hero-signature small { display: block; margin-top: 12px; font-size: 9px; letter-spacing: 0; } .roti-section { padding: 60px max(5.5%,calc((100vw - 1400px)/2)); margin: 0 auto; } .roti-white { background: #fff; } .roti-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 26px; } .eyebrow { font-size: 11px; line-height: 1.6; font-weight: 500; letter-spacing: .18em; margin: 0 0 12px; color: #858076; } #spaces .eyebrow,#service .eyebrow,#about .eyebrow { color: #756d62; } .roti-section h2,.roti-about h2 { font-size: clamp(27px,2.3vw,36px); line-height: 1.3; font-weight: 600; letter-spacing: -.05em; margin: 0; word-break: keep-all; } .roti-text-link { display: inline-flex; align-items: center; gap: 14px; border-bottom: 1px solid #a69e92; padding-bottom: 6px; font-size: 12px; white-space: nowrap; } .roti-text-link:hover { color: #80705a; } .roti-project-grid,.roti-blog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; } .roti-project-image { aspect-ratio: 1.2; background-size: cover; background-position: center; position: relative; transition: filter .3s; } .roti-project-card:hover .roti-project-image,.roti-blog-card:hover .roti-blog-thumb { filter: brightness(1.045); } .roti-project-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; } .roti-project-copy h3 { font-weight: 500; font-size: 16px; letter-spacing: -.03em; margin: 0 0 7px; } .roti-project-copy p { font-size: 12px; letter-spacing: -.03em; margin: 0; color: #817d76; } .roti-image-label { position: absolute; bottom: 10px; left: 11px; font-size: 8px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 5px #000; background: #302b254f; padding: 3px 6px; } .roti-soft { background: #f5f3ef; display: grid; grid-template-columns: 1fr 1.85fr; align-items: center; gap: 50px; padding-top: 64px; padding-bottom: 64px; } .roti-solution-intro>p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: #756d62; margin: 19px 0 25px; } .roti-button.muted { background: #514e48; } .roti-solution-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #ffffffbd; } .roti-solution-card { text-align: center; padding: 30px 13px 27px; min-height: 219px; border-left: 1px solid #e8e4dd; display: flex; align-items: center; flex-direction: column; justify-content: center; } .roti-solution-card:first-child { border-left: 0; } .roti-solution-card svg { width: 33px; height: 33px; margin-bottom: 17px; } .roti-solution-card .num { font-size: 12px; line-height: 1.6; } .roti-solution-card h3 { font-size: 14px; font-weight: 500; margin: 4px 0 12px; letter-spacing: -.04em; } .roti-solution-card p { font-size: 12px; line-height: 1.75; color: #756d62; margin: 0; word-break: keep-all; } .roti-section-note { font-size: 11px; line-height: 1.6; color: #827c72; margin: -10px 0 24px; word-break: keep-all; } .roti-blog-thumb { position: relative; aspect-ratio: 1.7; background-size: cover; background-position: center; } .roti-blog-card h3 { font-size: 14px; line-height: 1.7; font-weight: 500; letter-spacing: -.04em; margin: 14px 0 12px; word-break: keep-all; } .roti-blog-card time { font-size: 11px; color: #979188; } .roti-about { border-top: 1px solid #eee9e2; padding: 68px max(5.5%,calc((100vw - 1400px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 100px; background: #faf9f6; } .roti-about>div:last-child>p { color: #787268; font-size: 14px; line-height: 1.9; word-break: keep-all; margin: 10px 0 25px; } .roti-contact { padding: 62px max(5.5%,calc((100vw - 1400px)/2)); background: #35332e; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 35px; } .eyebrow.light { color: #c0b9ac; margin-bottom: 16px; } .roti-contact h2 { font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: -.04em; margin: 0 0 14px; } .roti-contact p:not(.eyebrow) { font-size: 13px; color: #c0b9ac; line-height: 1.7; margin: 0; } .roti-contact-actions { text-align: right; flex: none; } .roti-contact-phone { display: block; font-size: 29px; letter-spacing: -.03em; margin-bottom: 15px; } .light-btn { background: transparent; border: 1px solid #918779; padding: 12px 23px; } .roti-footer { background: #f5f3ef; border-top: 1px solid #e8e2d8; } .roti-footer-inner { padding: 36px max(5.5%,calc((100vw - 1400px)/2)); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .roti-footer strong { font-size: 20px; letter-spacing: .055em; font-weight: 600; color: #625c52; } .roti-footer p,.roti-footer-meta { font-size: 10px; color: #756d62; line-height: 1.8; margin: 8px 0 0; } .roti-crm-memo-input { display: block; box-sizing: border-box; width: 100%; min-height: 180px; resize: vertical; margin: 16px 0; padding: 14px; border: 1px solid #dcd5ca; background: #fdfbf8; color: #302e29; font: inherit; font-size: 14px; line-height: 1.8; } .roti-crm-memo-input:focus { outline: 2px solid #958774; outline-offset: 2px; } #private-memo { scroll-margin-top: 140px; } .roti-crm-delete-form { display: inline-block; margin-left: 8px; } .roti-crm-delete { color: #9a4540; border-color: #dfc8c4; } .roti-crm-delete:hover { background: #faf0ee; } .roti-crm .roti-crm-table { table-layout: fixed; min-width: 1200px; } .roti-col-id { width: 8%; } .roti-col-name { width: 13%; } .roti-col-phone { width: 14%; } .roti-col-address { width: 20%; } .roti-col-date { width: 17%; } .roti-col-state { width: 10%; } .roti-col-actions { width: 18%; } .roti-crm .roti-crm-table th,.roti-crm .roti-crm-table td { text-align: center; padding-left: 12px; padding-right: 12px; overflow-wrap: anywhere; } .roti-crm .roti-crm-summary { max-width: 100%; margin: 0 auto; } .roti-crm-row-actions { display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; } .roti-crm-row-actions .roti-crm-delete-form { display: block; margin: 0; } .roti-crm-row-actions .roti-crm-button { padding-left: 12px; padding-right: 12px; } .roti-footer-meta { text-align: right; } .roti-footer-admin { display: block; width: fit-content; margin: 10px 0 0 auto; padding: 6px 0; font-size: 11px; color: #898177; text-decoration: none; } .roti-footer-admin:hover,.roti-footer-admin:focus-visible { color: #302d28; text-decoration: underline; } @media (max-width:767px) { .roti-footer-admin { margin-left: 0; } } .roti-footer-business { max-width: 760px; } .roti-footer .roti-footer-name { font-size: 13px; color: #625c52; margin: 12px 0; } .roti-business-address { font-style: normal; font-size: 13px; line-height: 1.9; color: #70685e; } .roti-business-address span { color: #756d62; } .roti-footer-contacts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: 13px; line-height: 1.8; color: #70685e; } .roti-footer-contacts a { margin-left: 5px; overflow-wrap: anywhere; } .roti-footer .roti-footer-hours { font-size: 13px; color: #70685e; margin-top: 8px; } .roti-footer-hours span { margin-left: 8px; } .roti-footer-links { display: flex; justify-content: flex-end; gap: 20px; font-size: 12px; margin-bottom: 16px; color: #625c52; } .roti-footer a:hover,.roti-visit-details a:hover { text-decoration: underline; text-underline-offset: 4px; } .roti-visit { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; margin-top: 68px; padding-top: 52px; border-top: 1px solid #ded6ca; } .roti-visit-intro h2 { font-size: clamp(25px,2.5vw,32px); font-weight: 500; letter-spacing: -.045em; line-height: 1.5; margin: 0 0 18px; } .roti-visit-intro>p:not(.eyebrow) { font-size: 15px; color: #786f63; line-height: 1.8; margin: 0 0 28px; } .roti-visit-details { margin: 0; } .roti-visit-details>div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid #e8e2d9; font-size: 14px; line-height: 1.9; } .roti-visit-details>div:first-child { padding-top: 0; } .roti-visit-details dt { font-weight: 500; color: #786f63; } .roti-visit-details dd { margin: 0; overflow-wrap: anywhere; } .roti-visit-details address { font-style: normal; } .roti-visit-muted { color: #898177; white-space: nowrap; } @media (max-width:760px) { .roti-footer-contacts { flex-direction: column; gap: 5px; } .roti-footer-links { justify-content: flex-start; margin: 14px 0; } .roti-visit { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; padding-top: 36px; } .roti-visit-details>div { grid-template-columns: 70px minmax(0,1fr); gap: 12px; font-size: 13px; } } body.roti-site #generate-slideout-menu,body.roti-site .slideout-overlay { display: none !important; } @media (min-width:1600px) { .roti-hero-content { padding-left: 48px; } .roti-hero-bottom { left: max(5.5%,calc((100vw - 1340px)/2)); } } @media (max-width:1200px) { .roti-header-inner { gap: 15px; min-height: 86px; padding: 20px 18px; } .roti-nav { gap: 23px; font-size: 16px; } .roti-wordmark { font-size: 26px; } .roti-consult { font-size: 14px; padding: 12px 16px; } .roti-header-actions { gap: 10px; } .roti-soft { gap: 35px; } .roti-solution-card { padding-left: 9px; padding-right: 9px; } } @media (max-width:1000px) { .roti-nav { display: none; } .roti-menu-toggle { display: block; } .roti-project-grid,.roti-blog-grid { gap: 15px; } .roti-project-copy h3 { font-size: 14px; } .roti-project-copy p { font-size: 11px; } .roti-soft { grid-template-columns: 1fr 1.8fr; gap: 30px; } .roti-section h2 { font-size: 27px; } .roti-solution-card p { font-size: 11px; } .roti-solution-card h3 { font-size: 12px; } .roti-solution-card { min-height: 215px; } .roti-about { gap: 40px; } .roti-contact h2 { font-size: 27px; } } @media (max-width:782px) { .admin-bar .roti-header,.admin-bar.home .roti-header { top: 46px; } } @media (max-width:600px) { .admin-bar .roti-header,.admin-bar.home .roti-header { top: 0; } } @media (max-width:760px) { html { scroll-padding-top: 24px; } .home .roti-header { left: auto; right: auto; } .roti-header-inner { padding: 18px 22px; min-height: 78px; } .roti-wordmark { font-size: 24px; } .roti-brand small { font-size: 6px; letter-spacing: .09em; } .roti-brand small i { font-size: 8px; margin-left: 5px; } .roti-header .roti-consult { display: none; } .roti-search form { right: 15px; width: min(320px,calc(100vw - 30px)); } .roti-hero { height: 730px; align-items: flex-start; } .roti-hero-photo { background-position: 60% center; } .roti-hero-shade { background: none; } .roti-hero-shade.roti-shade-living { background: linear-gradient(180deg,rgba(24,22,19,.36),rgba(24,22,19,.28) 48%,transparent 80%); } .roti-hero-content { padding: 76px 26px 100px; } .roti-hero-kicker { font-size: 12px; margin-bottom: 18px; } .roti-hero h1 { font-size: clamp(27px,6.8vw,43px); line-height: 1.4; letter-spacing: -.055em; } .roti-hero .lead { font-size: 12px; margin: 18px 0 25px; line-height: 1.9; } .roti-hero-bottom { left: 26px; right: 24px; bottom: 28px; } .roti-hero-signature { font-size: 11px; } .roti-hero-signature small { font-size: 8px; margin-top: 9px; } .roti-count { margin-right: 12px; color: #25231f; } .roti-carousel { gap: 8px; } .roti-carousel button { background: #ffffffab; width: 33px; height: 33px; } .roti-section { padding: 44px 24px; } .roti-section-head { gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .roti-section h2,.roti-about h2 { font-size: 26px; } .eyebrow { font-size: 9px; margin-bottom: 10px; } .roti-text-link { font-size: 10px; gap: 10px; } .roti-project-grid,.roti-blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 15px; row-gap: 28px; } .roti-project-image { aspect-ratio: 1; } .roti-project-copy { align-items: flex-start; padding-top: 11px; } .roti-project-copy h3 { font-size: 13px; margin-bottom: 5px; } .roti-project-copy p { font-size: 10px; line-height: 1.7; word-break: keep-all; } .roti-project-copy>span { display: none; } .roti-image-label { font-size: 6px; left: 6px; bottom: 6px; padding: 2px 4px; } .roti-soft { grid-template-columns: 1fr; gap: 30px; } .roti-solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .roti-solution-card { min-height: 175px; padding: 25px 12px; border-bottom: 1px solid #e8e4dd; } .roti-solution-card:nth-child(3) { border-left: 0; } .roti-solution-card:nth-child(n+3) { border-bottom: 0; } .roti-solution-card svg { width: 30px; height: 30px; margin-bottom: 12px; } .roti-solution-card h3 { font-size: 14px; } .roti-solution-card p { font-size: 12px; } .roti-section-note { font-size: 10px; line-height: 1.8; margin: 0 0 20px; } .roti-blog-thumb { aspect-ratio: 1.25; } .roti-blog-card h3 { font-size: 12px; line-height: 1.7; margin: 11px 0 8px; } .roti-blog-card time { font-size: 10px; } .roti-about { padding: 43px 24px; grid-template-columns: 1fr; gap: 18px; } .roti-about>div:last-child>p { font-size: 12px; margin: 0 0 20px; } .roti-contact { padding: 44px 24px; flex-direction: column; align-items: flex-start; gap: 26px; } .roti-contact h2 { font-size: 24px; word-break: keep-all; } .roti-contact p:not(.eyebrow) { font-size: 12px; } .roti-contact-actions { text-align: left; } .roti-contact-phone { font-size: 29px; } .roti-footer-inner { padding: 30px 24px; flex-direction: column; align-items: flex-start; gap: 12px; } .roti-footer-meta { text-align: left; } } @media (max-width:380px) { .roti-header-inner { padding-left: 18px; padding-right: 16px; gap: 12px; } .roti-wordmark { font-size: 22px; } .roti-header-actions { gap: 4px; } .roti-hero-content { padding-left: 22px; padding-right: 18px; } .roti-hero-signature { font-size: 9px; } .roti-hero-bottom { left: 22px; right: 18px; } .roti-section { padding-left: 20px; padding-right: 20px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .roti-nav a:after,.roti-button,.roti-project-image { transition: none; } } } @layer components { .roti-process { max-width: 1200px; margin: 0 auto; padding: 76px 40px 90px; } .roti-process-intro { max-width: 720px; margin-bottom: 54px; } .roti-process h1 { font-size: clamp(34px,4vw,52px); font-weight: 600; line-height: 1.3; letter-spacing: -.05em; margin: 0 0 22px; } .roti-process-intro>p:last-child { font-size: 17px; line-height: 1.9; color: #70685e; } .roti-process-list { list-style: none; margin: 0 0 54px; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .roti-process-step { background: #f6f3ee; padding: 34px; min-height: 225px; border-top: 1px solid #d8d0c4; } .roti-process-step>span { font-size: 12px; color: #877763; letter-spacing: .12em; } .roti-process-step h2 { font-size: 23px; font-weight: 500; margin: 15px 0 13px; letter-spacing: -.04em; } .roti-process-step p { font-size: 15px; color: #746d64; line-height: 1.85; margin: 0; word-break: keep-all; } .roti-process-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid #dfd8cf; padding-top: 32px; } .roti-process-cta p { color: #746d64; line-height: 1.8; font-size: 15px; } @media (max-width:760px) { .roti-process { padding: 48px 24px 64px; } .roti-process-intro { margin-bottom: 32px; } .roti-process-intro>p:last-child { font-size: 15px; } .roti-process-list { grid-template-columns: 1fr; gap: 16px; } .roti-process-step { padding: 26px; min-height: 0; } .roti-process-step h2 { font-size: 21px; } .roti-process-cta { align-items: flex-start; flex-direction: column; gap: 14px; } } } @layer components { .roti-consult>span { font-family: Arial,sans-serif; font-size: 17px; line-height: 1; color: inherit; } .roti-site .roti-hero { height: clamp(550px,47vw,800px); min-height: 0; background: #e6dfd2; align-items: center; padding: 0; } .roti-site .roti-hero .roti-hero-photo { inset: 0; height: auto; background-position: center; background-size: cover; filter: none; } @media (min-width:761px) { .roti-site .roti-hero .roti-client-hero-02 { background-size: 115% auto; background-position: 4% 64%; } } .roti-site .roti-hero::before { content: none; display: none; background: none; } .roti-hero .roti-hero-content,.roti-hero.roti-hero-living .roti-hero-content { position: relative; width: 86%; text-align: left; max-width: none; flex: none; margin: 0 7%; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: #282723; text-shadow: none; } .roti-hero .roti-hero-content::before { content: none; display: none; } .roti-hero .roti-hero-copy { position: relative; isolation: isolate; display: flow-root; width: max-content; max-width: 100%; --roti-copy-gap: 38px; } .roti-hero .roti-hero-copy::before { content: ""; position: absolute; inset: -140px -180px calc(var(--roti-copy-gap) - 140px); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 36% 42% at 50% 50%,rgba(255,239,225,.92) 0%,rgba(255,239,225,.90) 56%,rgba(255,239,225,.65) 72%,rgba(255,239,225,.30) 87%,rgba(255,239,225,0) 100%); filter: blur(12px); } .roti-hero .roti-hero-content h1 { font-size: clamp(32px,3.25vw,54px); font-weight: 700; line-height: 1.32; letter-spacing: -.045em; word-break: keep-all; color: #282723; text-shadow: none; } .roti-hero .roti-hero-content .roti-hero-kicker { color: #282723; font-size: clamp(14px,1.25vw,19px); font-weight: 400; letter-spacing: -.025em; margin: 0 0 24px; text-shadow: none; } .roti-hero .roti-hero-content .lead { color: #282723; font-size: clamp(14px,1.3vw,20px); font-weight: 400; line-height: 1.8; margin: 26px 0 38px; text-shadow: none; word-break: keep-all; } .roti-hero .roti-hero-content .roti-button { position: relative; z-index: 1; min-width: 210px; min-height: 60px; padding: 16px 26px; gap: 28px; font-size: 15px; font-weight: 500; background: #2c2b27; color: #fff; } .roti-hero .roti-hero-content .roti-button:hover { background: #514b40; } .roti-hero .roti-hero-content .roti-button span { font-size: 22px; color: inherit; } .roti-site .roti-hero .roti-hero-bottom { position: absolute; left: 5.2%; right: auto; bottom: 44px; margin: 0; } .roti-hero .roti-carousel .roti-count,.roti-hero.roti-hero-living .roti-carousel .roti-count { color: #282723; text-shadow: 0 1px 5px #fff9; font-size: 14px; } .roti-hero .roti-carousel .roti-count em,.roti-hero.roti-hero-living .roti-carousel .roti-count em { color: #282723; text-shadow: 0 1px 5px #fff9; font-size: 13px; } .roti-hero .roti-carousel button { width: 44px; height: 44px; background: #fff; border: 1px solid #fff; color: #282723; } .roti-hero .roti-carousel button:hover { background: #eae3d9; } @media (max-width:760px) { .roti-site .roti-hero { height: 600px; min-height: 0; display: flex; flex-direction: row; padding: 0; } .roti-site .roti-hero .roti-hero-photo { inset: 0; height: auto; background-position: center; } .roti-hero .roti-hero-content,.roti-hero.roti-hero-living .roti-hero-content { width: calc(100% - 48px); max-width: none; margin: 0 24px; padding: 0; background: none; } .roti-hero .roti-hero-copy { --roti-copy-gap: 28px; } .roti-hero .roti-hero-copy::before { inset: -100px -90px calc(var(--roti-copy-gap) - 100px); filter: blur(14px); } .roti-hero .roti-hero-content h1 { font-size: clamp(25px,6.4vw,34px); line-height: 1.4; } .roti-hero .roti-hero-content .roti-hero-kicker { font-size: 13px; margin-bottom: 20px; } .roti-hero .roti-hero-content .lead { font-size: 13px; line-height: 1.9; margin: 22px 0 28px; } .roti-hero .roti-hero-content .roti-button { min-width: 200px; min-height: 56px; padding: 15px 24px; font-size: 14px; } .roti-site .roti-hero .roti-hero-bottom { position: absolute; left: 24px; right: auto; bottom: 28px; margin: 0; } } @media (prefers-reduced-motion:reduce) { .roti-site .roti-hero .roti-hero-photo { transition: none !important; } } .roti-native-hero { position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 1536/748; background: #e6dfd2; overflow: hidden; } .roti-native-photos { position: absolute; inset: 0; z-index: 0; } .roti-native-photo.roti-client-hero-02 { transform: scaleX(-1); } .roti-native-photo { position: absolute; inset: 0; background-size: cover; background-position: center 56%; background-repeat: no-repeat; filter: none; transition: opacity .8s ease-in-out; } .roti-native-gradient { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 25.4cqw 19.5cqw at 21.8cqw 20.2cqw,rgba(255,241,226,.88) 0%,rgba(255,241,226,.84) 35%,rgba(255,241,226,.64) 58%,rgba(255,241,226,.23) 78%,rgba(255,241,226,0) 100%); } .roti-native-copy { position: absolute; z-index: 4; left: 7.03125%; top: 22.99465%; width: 39.0625%; color: #282723; text-align: left; text-shadow: none; } .roti-native-copy p,.roti-native-copy h1 { padding: 0; border: 0; color: inherit; text-shadow: none; } .roti-native-copy .roti-native-kicker { font-size: 1.432292cqw; line-height: 2.083333cqw; font-weight: 400; letter-spacing: -.04em; margin: 0 0 1.302083cqw; } .roti-native-copy h1 { font-size: 3.255208cqw; line-height: 4.166667cqw; font-weight: 700; letter-spacing: -.05em; margin: 0; white-space: nowrap; } .roti-native-copy .roti-native-lead { font-size: 1.432292cqw; line-height: 2.34375cqw; font-weight: 400; letter-spacing: -.045em; margin: 1.302083cqw 0 2.148438cqw; white-space: nowrap; } .roti-site .roti-native-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.302083cqw; width: 14.518229cqw; height: 3.971354cqw; padding: 0 1.627604cqw; margin: 0; border: 0; border-radius: 0; background: #292b2b; color: #fff; font-size: 1.171875cqw; font-weight: 500; white-space: nowrap; } .roti-native-cta span { font-size: 2.083333cqw; line-height: 1; color: inherit; } .roti-site .roti-native-cta:hover { background: #45423b; } .roti-native-controls { position: absolute; z-index: 4; left: 3.645833%; bottom: 6.684492%; display: flex; align-items: center; gap: 1.041667cqw; color: #282723; } .roti-native-count { display: inline-block; min-width: 6.575521cqw; font-size: 1.432292cqw; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; } .roti-site .roti-native-controls button { display: grid; place-items: center; width: 3.255208cqw; height: 3.255208cqw; min-width: 36px; min-height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #fff; color: #292b2b; font-size: 2.083333cqw; line-height: 1; box-shadow: none; } .roti-site .roti-native-controls button:hover { background: #f0e9df; } @media (max-width:760px) { .roti-native-hero { aspect-ratio: auto; min-height: 620px; height: calc(100svh - 86px); max-height: 760px; } .roti-native-photo { background-position: 52% center; } .roti-native-gradient { background: radial-gradient(ellipse 340px 275px at 48% 43%,rgba(255,241,226,.88) 0%,rgba(255,241,226,.84) 35%,rgba(255,241,226,.64) 58%,rgba(255,241,226,.23) 78%,rgba(255,241,226,0) 100%); } .roti-native-copy { left: 24px; top: 24%; width: calc(100% - 48px); } .roti-native-copy .roti-native-kicker { font-size: 14px; line-height: 24px; margin: 0 0 20px; } .roti-native-copy h1 { font-size: clamp(27px,6.7vw,45px); line-height: 1.4; letter-spacing: -.05em; } .roti-native-copy .roti-native-lead { font-size: clamp(12px,3.2vw,17px); line-height: 1.9; letter-spacing: -.04em; margin: 22px 0 28px; } .roti-site .roti-native-cta { width: 210px; height: 58px; padding: 0 24px; gap: 20px; font-size: 15px; } .roti-native-cta span { font-size: 26px; } .roti-native-controls { left: 24px; bottom: 30px; gap: 12px; } .roti-native-count { font-size: 15px; min-width: 76px; } .roti-site .roti-native-controls button { width: 44px; height: 44px; font-size: 27px; } } @media (min-width:761px) { .roti-native-hero { aspect-ratio: auto; height: calc(100dvh - var(--roti-hero-top,100px)); min-height: 0; } .roti-native-copy { top: 50%; transform: translateY(-50%); width: 50%; } .roti-native-copy .roti-native-kicker { font-size: clamp(13px,.9vw,17px); line-height: 1.5; margin-bottom: 15px; } .roti-native-copy h1 { font-size: clamp(27px,2.15vw,41px); line-height: 1.35; } .roti-native-copy .roti-native-lead { font-size: clamp(13px,.9vw,17px); line-height: 1.8; margin: 18px 0 23px; } .roti-site .roti-native-cta { width: 195px; height: 48px; padding: 0 19px; gap: 16px; font-size: 14px; } .roti-native-cta span { font-size: 23px; } .roti-native-controls { bottom: 24px; gap: 8px; } .roti-native-count { font-size: 12px; min-width: 54px; } .roti-site .roti-native-controls button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 19px; } .roti-native-gradient { inset: 0; width: auto; height: auto; border-radius: 0; filter: none; background: radial-gradient(ellipse var(--roti-glow-rx,300px) var(--roti-glow-ry,230px) at var(--roti-glow-x,22%) var(--roti-glow-y,45%),rgba(255,241,226,var(--roti-glow-a0,.88)) 0%,rgba(255,241,226,var(--roti-glow-a35,.84)) 35%,rgba(255,241,226,var(--roti-glow-a58,.64)) 58%,rgba(255,241,226,var(--roti-glow-a78,.23)) var(--roti-glow-feather,78%),rgba(255,241,226,0) var(--roti-glow-end,100%)); } } @media (min-width:761px) and (max-height:650px) { .roti-native-copy h1 { font-size: 30px; } .roti-native-copy .roti-native-kicker { margin-bottom: 10px; } .roti-native-copy .roti-native-lead { margin: 12px 0 16px; font-size: 14px; } .roti-native-copy { top: 44%; } .roti-native-controls { bottom: 16px; } } @media (prefers-reduced-motion:reduce) { .roti-native-photo { transition: none; } } .roti-latest-photo,.roti-portfolio-thumb { overflow: hidden; background: #ece7df; aspect-ratio: 4/3; } .roti-site .roti-latest-photo img,.roti-site .roti-portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .roti-latest-card a:hover img,.roti-portfolio-entry:hover img { transform: scale(1.025); } .roti-latest-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-top: 18px; } .roti-latest-copy h3 { font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: -.035em; margin: 0; word-break: keep-all; } .roti-latest-copy>span { flex: none; padding-top: 4px; color: #746957; } .roti-photo-empty { display: flex; height: 100%; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #81766a; font-size: 20px; letter-spacing: .06em; } .roti-photo-empty span { font-size: 12px; letter-spacing: 0; } .roti-project-reader { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,768px) minmax(0,1fr); align-items: stretch; } .roti-project-reader>article { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; } .roti-project-contact { grid-column: 3; grid-row: 1; min-width: 0; padding: clamp(150px,22vh,230px) 24px 64px; } @media (min-width:1248px) { .roti-project-contact { position: sticky; align-self: start; top: 124px; height: calc(100vh - 124px); height: calc(100dvh - 124px); box-sizing: border-box; padding: 0 24px 24px; display: flex; align-items: flex-end; } .roti-project-contact .roti-project-contact-card { position: static; flex-shrink: 0; } } .roti-project-contact-card { position: sticky; top: clamp(110px,30vh,320px); width: 192px; max-width: 100%; padding: 22px 18px; background: #faf8f4; border: 1px solid #e5e0d8; box-shadow: 0 8px 28px #302b2208; } .roti-project-contact-brand { margin: 0 0 18px; color: #7b7164; font-size: 10px; letter-spacing: .12em; line-height: 1.6; } .roti-project-contact-brand span { display: block; font-size: 10px; letter-spacing: .04em; } .roti-project-contact-title { margin: 0 0 22px; color: #302d28; font-size: 17px; font-weight: 500; line-height: 1.7; letter-spacing: -.045em; word-break: keep-all; } .roti-site .roti-project-contact-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 13px 16px; background: #2c2b27; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background .2s; } .roti-project-contact-link svg { flex: none; color: inherit; } .roti-site .roti-project-contact-link:hover { background: #625747; } @media (max-width:1247px) { .roti-project-reader { display: block; } .roti-project-contact { position: sticky; top: 0; z-index: 40; padding: 0; background: #faf8f4; border-bottom: 1px solid #e5e0d8; } .roti-project-contact-card { position: static; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 768px; margin: auto; padding: 12px 24px; border: 0; box-shadow: none; } .roti-project-contact-brand { margin: 0; font-size: 11px; } .roti-project-contact-brand span { display: inline; margin-left: 8px; white-space: nowrap; } .roti-project-contact-title { display: none; } .roti-site .roti-project-contact-link { min-width: 132px; min-height: 46px; padding: 11px 16px; } .admin-bar .roti-project-contact { top: 32px; } } @media (max-width:782px) { .admin-bar .roti-project-contact { top: 46px; } } .roti-portfolio,.roti-company { max-width: 1200px; margin: 0 auto; padding: 76px 40px 90px; } .roti-portfolio-heading,.roti-company-heading { margin-bottom: 52px; } .roti-portfolio-heading h1,.roti-company-heading h1 { font-size: clamp(34px,4vw,52px); font-weight: 600; line-height: 1.3; letter-spacing: -.05em; margin: 0 0 22px; } .roti-portfolio-heading>p:last-child { font-size: 16px; color: #746d63; line-height: 1.8; margin: 0; } .roti-portfolio-list { border-top: 1px solid #d8d0c4; } .roti-portfolio-row { padding: 32px 0; border-bottom: 1px solid #e5dfd6; } .roti-portfolio-entry { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 42px; } .roti-portfolio-thumb { aspect-ratio: 1.5; } .roti-portfolio-copy time { font-size: 12px; letter-spacing: .05em; color: #938676; } .roti-portfolio-copy h2 { font-size: clamp(20px,2vw,26px); font-weight: 500; line-height: 1.55; letter-spacing: -.04em; margin: 13px 0 14px; word-break: keep-all; } .roti-portfolio-excerpt { font-size: 14px; line-height: 1.85; color: #827a70; margin: 0 0 23px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .roti-portfolio-more { font-size: 12px; color: #625645; display: inline-flex; align-items: center; gap: 18px; } .roti-pagination { margin-top: 48px; } .roti-pagination ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; } .roti-pagination li { margin: 0; padding: 0; } .roti-pagination a,.roti-pagination span { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid #dfd8ce; color: #6e6253; font-size: 14px; } .roti-pagination .current { background: #2c2b27; border-color: #2c2b27; color: #fff; } .roti-pagination a:hover { background: #f2eee8; border-color: #b5a790; } .roti-company-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 52px; margin-bottom: 80px; } .roti-company-copy h2,.roti-company-section-head h2,.roti-company-contact h2 { font-size: clamp(26px,2.5vw,34px); line-height: 1.5; font-weight: 500; letter-spacing: -.045em; margin: 0 0 24px; word-break: keep-all; } .roti-company-copy>p:not(.eyebrow) { font-size: 15px; line-height: 1.95; color: #786f63; word-break: keep-all; margin: 0 0 19px; } .roti-company-copy .roti-text-link { margin-top: 13px; } .roti-company-photo { margin: 0; aspect-ratio: 1.05; background: #f4f0e9; overflow: hidden; } .roti-site .roti-company-photo img { width: 100%; height: 100%; object-fit: cover; } .roti-company-values { margin-bottom: 80px; } .roti-company-section-head { margin-bottom: 30px; } .roti-value-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } .roti-value-card { padding: 30px 24px; background: #f6f3ee; border-top: 1px solid #d8d0c4; } .roti-value-letter { font-family: Manrope,sans-serif; display: block; font-size: 56px; font-weight: 400; line-height: 1.1; color: #95816a; margin-bottom: 18px; } .roti-value-en { font-size: 12px; color: #8d7e6c; letter-spacing: .06em; margin: 0 0 10px; } .roti-value-card h3 { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.035em; margin: 0 0 13px; } .roti-value-card>p:last-child { font-size: 13px; line-height: 1.9; color: #7b7266; word-break: keep-all; margin: 0; } .roti-company-detail { display: grid; grid-template-columns: 1fr 1.5fr; gap: 65px; margin-bottom: 80px; } .roti-company-detail-list article { display: flex; gap: 25px; padding: 26px 0; border-top: 1px solid #ded6ca; } .roti-company-detail-list article>span { color: #a48b70; font-size: 12px; padding-top: 5px; } .roti-company-detail-list h3 { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -.035em; } .roti-company-detail-list p { font-size: 14px; line-height: 1.85; color: #786f63; margin: 0; word-break: keep-all; } .roti-company-contact { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #f6f3ee; padding: 42px; } .roti-company-contact h2 { font-size: 29px; margin-bottom: 16px; } .roti-company-contact p:last-child { font-size: 14px; line-height: 1.9; color: #786f63; margin: 0; } .roti-company-contact-action { text-align: right; flex: none; } .roti-company-phone { display: block; font-size: 27px; white-space: nowrap; letter-spacing: -.025em; margin-bottom: 20px; } @media (max-width:1000px) { .roti-company-intro { gap: 32px; } .roti-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .roti-company-detail { gap: 36px; } .roti-company-contact { padding: 32px; } .roti-portfolio-entry { gap: 28px; } } @media (max-width:760px) { .roti-latest-copy { gap: 8px; padding-top: 12px; } .roti-latest-copy h3 { font-size: 13px; line-height: 1.8; } .roti-latest-copy>span { display: none; } .roti-portfolio,.roti-company { padding: 48px 24px 64px; } .roti-portfolio-heading,.roti-company-heading { margin-bottom: 32px; } .roti-portfolio-heading>p:last-child { font-size: 14px; } .roti-portfolio-entry { grid-template-columns: 1fr; gap: 22px; } .roti-portfolio-row { padding: 26px 0; } .roti-portfolio-copy h2 { font-size: 21px; } .roti-portfolio-excerpt { font-size: 13px; -webkit-line-clamp: 2; } .roti-pagination ul { gap: 6px; } .roti-pagination a,.roti-pagination span { min-width: 36px; height: 38px; padding: 0 8px; } .roti-company-intro { grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; } .roti-company-photo { aspect-ratio: 1.3; } .roti-company-values { margin-bottom: 50px; } .roti-value-grid { gap: 12px; } .roti-value-card { padding: 24px 18px; } .roti-value-letter { font-size: 45px; } .roti-value-card h3 { font-size: 16px; } .roti-value-card>p:last-child { font-size: 12px; } .roti-company-detail { grid-template-columns: 1fr; gap: 10px; margin-bottom: 50px; } .roti-company-detail-list article { gap: 20px; } .roti-company-contact { flex-direction: column; align-items: flex-start; padding: 28px 24px; } .roti-company-contact h2 { font-size: 25px; } .roti-company-contact-action { text-align: left; } .roti-company-phone { font-size: 25px; } } } @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; } } }