/* main.css — полностью закатанная Tailwind вёрстка из твоего Tailwind config (свёрнуто, без лишнего мусора) */ /* Подключи файл в и подключай Tailwind CDN в — всё работает вместе */ @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-divide-y-reverse: 0; --tw-border-style: solid; --tw-font-weight: initial; --tw-tracking: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; } } } @layer theme { :root, :host { --font-sans: var(--font-mono); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: .25rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --font-weight-medium: 500; --blur-md: 12px; --default-transition-duration: .2s; --default-transition-timing-function: cubic-bezier(.23, 1, .32, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-canvas: #0b0b14; --color-surface: #12121f; --color-sunken: #1a1a2b; --color-tile: #fff; --color-line: #7878b42e; --color-line-strong: #7878b459; --color-ink: #fff; --color-ink-2: #e8e8f4; --color-ink-3: #b9b9d0; --color-muted: #8a8aa8; --color-faint: #63637e; --color-focus: #46e9ff; --radius-container: 12px; --text-h1: clamp(1.9rem, 1.05rem + 3.4vw, 3.3rem); --text-h1--line-height: 1.04; --text-h1--letter-spacing: -.035em; --text-h1--font-weight: 500; --text-h2: clamp(1.4rem, 1.05rem + 1.5vw, 2.05rem); --text-h2--line-height: 1.12; --text-h2--letter-spacing: -.025em; --text-h2--font-weight: 500; --text-h3: clamp(1.02rem, .95rem + .4vw, 1.22rem); --text-h3--line-height: 1.3; --text-h3--letter-spacing: -.015em; --text-h3--font-weight: 500; --text-lead: clamp(1rem, .95rem + .35vw, 1.15rem); --text-lead--line-height: 1.6; --ease-ui: cubic-bezier(.23, 1, .32, 1); } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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 { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; } body { background-color: var(--color-canvas); color: var(--color-ink-2); font-family: var(--font-mono); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; font-size: .95rem; line-height: 1.65; } ::selection { background-color: var(--color-ink); color: var(--color-canvas); } :focus-visible { outline: 2px solid #46e9ff8c; } @supports (color: color-mix(in lab, red, red)) { :focus-visible { outline: 2px solid color-mix(in oklab, var(--color-focus) 55%, transparent); } } :focus-visible { outline-offset: 3px; } :where(section, details)[id] { scroll-margin-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, :before, :after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } } @layer components { .term { border: 1px solid var(--color-line); border-radius: var(--radius-container); background-color: var(--color-surface); overflow: hidden; } .term-bar { border-bottom: 1px solid var(--color-line); background-color: var(--color-canvas); letter-spacing: .02em; color: var(--color-muted); justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; font-size: .75rem; display: flex; } .term-bar--prompt:first-letter { color: var(--color-ink); } .pill { white-space: nowrap; transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui), border-color .2s var(--ease-ui), transform .2s var(--ease-ui); border-radius: 9999px; justify-content: center; align-items: center; gap: .5rem; padding: .55rem 1.35rem; font-size: .82rem; line-height: 1.2; display: inline-flex; } .pill:active { transform: scale(.985); } .pill--solid { border: 1px solid var(--color-ink); background-color: var(--color-ink); color: var(--color-canvas); } .pill--solid:hover { background-color: var(--color-ink-2); border-color: var(--color-ink-2); } .pill--ghost { border: 1px solid var(--color-line-strong); background-color: var(--color-canvas); color: var(--color-ink-2); } .pill--ghost:hover { background-color: var(--color-sunken); border-color: var(--color-faint); color: var(--color-ink); } .nav-link { color: var(--color-ink-3); white-space: nowrap; transition: color .2s var(--ease-ui); font-size: .9rem; line-height: 1.5; display: inline-block; } .nav-link:hover { color: var(--color-ink); } .pill--sm { padding: .35rem .85rem; font-size: .75rem; } .card { border: 1px solid var(--color-line); border-radius: var(--radius-container); background-color: var(--color-surface); transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui); flex-direction: column; gap: 1rem; padding: 1.4rem; display: flex; } .card:hover { border-color: var(--color-line-strong); background-color: var(--color-sunken); } .logo-tile { border: 1px solid var(--color-line); border-radius: var(--radius-container); background-color: var(--color-tile); flex: none; justify-content: center; align-items: center; width: 5.5rem; height: 3.5rem; padding: .55rem .7rem; display: flex; } .logo-tile img { object-fit: contain; width: auto; max-width: 100%; height: auto; max-height: 100%; } .bullets { overflow-wrap: anywhere; flex-direction: column; gap: .5rem; display: flex; } .bullets > li { padding-left: 1.5em; position: relative; } .bullets > li:before { content: "→"; color: var(--color-faint); transition: color .2s var(--ease-ui); position: absolute; left: 0; } .bullets > li:hover:before { color: var(--color-ink); } .label { letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); font-size: .7rem; font-weight: 500; } .link { text-decoration: underline; -webkit-text-decoration-color: var(--color-line-strong); text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; transition: color .2s var(--ease-ui), text-decoration-color .2s var(--ease-ui); } .link:hover { color: var(--color-ink); -webkit-text-decoration-color: var(--color-ink); text-decoration-color: var(--color-ink); } .row-link { border-radius: var(--radius-container); transition: background-color .2s var(--ease-ui); align-items: baseline; gap: 1rem; padding: .85rem 1rem; display: flex; } .row-link:hover { background-color: var(--color-sunken); } .faq { border: 1px solid var(--color-line); border-radius: var(--radius-container); background-color: var(--color-canvas); transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui); overflow: hidden; } .faq:hover { border-color: var(--color-line-strong); } .faq[open] { background-color: var(--color-surface); } .faq summary { cursor: pointer; color: var(--color-ink); transition: background-color .2s var(--ease-ui); align-items: center; gap: .75rem; padding: 1rem 1.15rem; list-style: none; display: flex; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { background-color: var(--color-sunken); } .faq summary:focus-visible { outline-offset: -3px; } .faq summary .chev { color: var(--color-faint); transition: transform .2s var(--ease-ui), color .2s var(--ease-ui); } .faq[open] summary .chev { color: var(--color-ink); transform: rotate(90deg); } .faq-panel { transition: grid-template-rows .26s var(--ease-ui); grid-template-rows: 0fr; display: grid; } .faq[open] .faq-panel { grid-template-rows: 1fr; } .faq-panel > div { opacity: 0; transition: opacity .2s var(--ease-ui); overflow: hidden; } .faq[open] .faq-panel > div { opacity: 1; } .reveal { opacity: 0; transition: opacity .6s var(--ease-ui), transform .6s var(--ease-ui); transform: translateY(10px); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } } @layer utilities { .sticky { position: sticky; } .top-0 { top: 0; } .z-50 { z-index: 50; } .order-last { order: 9999; } .mx-auto { margin-inline: auto; } .flex { display: flex; } .grid { display: grid; } .h-20 { height: calc(var(--spacing) * 20); } .min-h-screen { min-height: 100vh; } .w-20 { width: calc(var(--spacing) * 20); } .w-full { width: 100%; } .max-w-\[1200px\] { max-width: 1200px; } .min-w-0 { min-width: 0; } .min-w-\[6\.5rem\] { min-width: 6.5rem; } .flex-none { flex: none; } .grid-rows-\[auto_1fr_auto\] { grid-template-rows: auto 1fr auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: var(--spacing); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-5 { column-gap: calc(var(--spacing) * 5); } .gap-x-6 { column-gap: calc(var(--spacing) * 6); } .gap-y-1 { row-gap: var(--spacing); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } :where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } :where(.divide-line > :not(:last-child)) { border-color: var(--color-line); } .scroll-smooth { scroll-behavior: smooth; } .rounded-full { border-radius: 3.40282e38px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-line { border-color: var(--color-line); } .bg-canvas { background-color: var(--color-canvas); } .bg-canvas\/90 { background-color: #0b0b14e6; } @supports (color: color-mix(in lab, red, red)) { .bg-canvas\/90 { background-color: color-mix(in oklab, var(--color-canvas) 90%, transparent); } } .bg-surface { background-color: var(--color-surface); } .object-cover { object-fit: cover; } .p-6 { padding: calc(var(--spacing) * 6); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-10 { padding-block: calc(var(--spacing) * 10); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pb-5 { padding-bottom: calc(var(--spacing) * 5); } .pb-28 { padding-bottom: calc(var(--spacing) * 28); } .text-h1 { font-size: var(--text-h1); line-height: var(--tw-leading, var(--text-h1--line-height)); letter-spacing: var(--tw-tracking, var(--text-h1--letter-spacing)); font-weight: var(--tw-font-weight, var(--text-h1--font-weight)); } .text-h2 { font-size: var(--text-h2); line-height: var(--tw-leading, var(--text-h2--line-height)); letter-spacing: var(--tw-tracking, var(--text-h2--letter-spacing)); font-weight: var(--tw-font-weight, var(--text-h2--font-weight)); } .text-h3 { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); letter-spacing: var(--tw-tracking, var(--text-h3--letter-spacing)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); } .text-lead { font-size: var(--text-lead); line-height: var(--tw-leading, var(--text-lead--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .tracking-\[0\.02em\] { --tw-tracking: .02em; letter-spacing: .02em; } .\[overflow-wrap\:anywhere\] { overflow-wrap: anywhere; } .whitespace-nowrap { white-space: nowrap; } .text-ink { color: var(--color-ink); } .text-ink-2 { color: var(--color-ink-2); } .text-ink-3 { color: var(--color-ink-3); } .text-line-strong { color: var(--color-line-strong); } .text-muted { color: var(--color-muted); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .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)); } .duration-200 { --tw-duration: .2s; transition-duration: .2s; } @media (hover: hover) { .hover\:text-muted:hover { color: var(--color-muted); } } @media (min-width: 40rem) { .sm\:h-24 { height: calc(var(--spacing) * 24); } .sm\:w-24 { width: calc(var(--spacing) * 24); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:items-start { align-items: flex-start; } } @media (min-width: 64rem) { .lg\:order-none { order: 0; } .lg\:w-auto { width: auto; } .lg\:flex-nowrap { flex-wrap: nowrap; } .lg\:gap-8 { gap: calc(var(--spacing) * 8); } .lg\:p-10 { padding: calc(var(--spacing) * 10); } .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); } .lg\:py-14 { padding-block: calc(var(--spacing) * 14); } } @media (min-width: 80rem) { .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } /* Дополнительные @property (уже были в твоём config, оставил) */ @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; }