Свойства CSS

color: #6544e0;

font-family: "Manrope", system-ui, sans-serif;

font-size: 1.0625rem;

font-weight: 700;

font-style: italic;

line-height: 1.7;

letter-spacing: -0.02em;

text-align: center;

text-transform: uppercase;

text-decoration: none;

text-underline-offset: 3px;

text-shadow: 0 2px 12px rgb(0 0 0 / .5);

text-wrap: balance;

white-space: nowrap;

overflow-wrap: break-word;

writing-mode: vertical-rl;

box-sizing: border-box;

width: 280px;

max-width: 68ch;

min-height: 100vh;

padding: 16px 24px;

margin: 0 0 1rem;

margin: 0 auto;

margin-inline: auto;

margin-block: 0 1.5rem;

padding-inline: 1.25rem;

padding-block: 2rem;

border-inline-start: 3px solid var(--accent);

inline-size: min(100%, 60ch);

content-visibility: auto;

contain-intrinsic-size: auto 400px;

aspect-ratio: 16 / 9;

overflow: auto;

display: flex;

visibility: hidden;

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

align-self: flex-end;

flex-wrap: wrap;

gap: 16px;

flex: 1 1 240px;

flex-grow: 1;

flex-shrink: 0;

order: -1;

margin-left: auto;

display: grid;

grid-template-columns: 240px 1fr;

grid-template-rows: auto 1fr auto;

grid-template-columns: 2fr 1fr;

repeat(12, 1fr)

minmax(220px, 1fr)

repeat(auto-fit, minmax(220px, 1fr))

grid-template-areas: "header header" "nav main";

grid-area: header;

grid-column: 1 / -1;

grid-column: span 2;

place-items: center;

repeat(auto-fill, minmax(200px, 1fr))

grid-auto-rows: minmax(160px, auto);

grid-auto-flow: dense;

grid-template-rows: subgrid;

position: relative;

position: absolute; top: 12px; right: 12px;

position: fixed; bottom: 20px;

position: sticky; top: 0;

inset: 0;

z-index: 10;

isolation: isolate;

background: #f4f4f8;

background-size: cover;

background-position: center;

background: linear-gradient(135deg, #7c5cff, #b06cff);

background: radial-gradient(circle at 30% 20%, #b06cff, transparent);

border: 2px solid #e0e0ea;

border-radius: 14px;

box-shadow: 0 12px 28px -8px rgb(20 24 48 / .3);

outline: 2px solid #6544e0;

outline-offset: 3px;

opacity: .5;

filter: blur(4px) grayscale(1);

backdrop-filter: blur(14px);

mix-blend-mode: multiply;

background-blend-mode: overlay;

clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

mask-image: linear-gradient(#000, transparent);

mask-size: contain; mask-repeat: no-repeat;

object-fit: cover;

object-position: 50% 20%;

transition: transform 200ms ease-out;

transform: translateY(-4px) scale(1.03);

translate: 0 -4px;

@keyframes appear { from { opacity: 0 } }

animation: appear .5s ease-out both;

animation-delay: 80ms;

cubic-bezier(.22, 1, .36, 1)

perspective: 900px;

transform-style: preserve-3d;

backface-visibility: hidden;

will-change: transform;

scroll-behavior: smooth;

scroll-margin-top: 80px;

@layer base, components, utilities;

container-type: inline-size;

container: card / inline-size;

font-size: clamp(1rem, 4cqi, 2rem);

@font-face { font-family: "Onest"; src: url(onest.woff2) format("woff2"); }

font-display: swap;

--accent: #6544e0;

color: var(--accent, #000);

width: calc(100% - 2rem);

font-size: clamp(1.8rem, 1.2rem + 3vw, 3.5rem);

width: min(100% - 2rem, 1200px);

background: color-mix(in oklab, var(--accent) 20%, white);

@media (min-width: 700px) { … }

@media (prefers-color-scheme: dark) { … }

@media (prefers-reduced-motion: reduce) { … }

@container (min-width: 400px) { … }

@supports (backdrop-filter: blur(1px)) { … }

@import "base.css";

.card { … }

#hero { … }

.card p { … }

.list > li { … }

h2 + p { … }

a[target="_blank"] { … }

.btn:hover { … }

.btn:focus-visible { … }

li:nth-child(odd) { … }

p:not(.lead) { … }

.card:has(img) { … }

.card :is(h2, h3, h4) { … }

:where(h1, h2) { … }

input:user-invalid { border-color: red; }

.item::before { content: "✓"; }