/* ============================================================ Эффекты из 21st.dev, переписанные без React/Tailwind. 1) Spotlight Card (easemize / GlowCard): пятно света и светящаяся кромка карточки следуют за курсором. Координаты курсора пишет js/effects.js в --x, --y, --xp на . Фон с attachment: fixed, поэтому пятно одно на весь экран и подсвечивает соседние карточки. 2) Display Cards (Codehagen): стопка скошенных карточек, задние обесцвечены и поднимаются при наведении. ============================================================ */ :root { --x: -9999; --y: -9999; --xp: .5; } [data-glow] { --glow-base: 218; --glow-spread: 34; --glow-size: 260px; --glow-hue: calc(var(--glow-base) + var(--xp) * var(--glow-spread)); --glow-bg: .07; --glow-edge: 1; --glow-light: .0; background-image: radial-gradient(var(--glow-size) var(--glow-size) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(var(--glow-hue) 90% 60% / var(--glow-bg)), transparent); background-attachment: fixed; } [data-theme="dark"] [data-glow] { --glow-bg: .12; --glow-light: .7; } .step[data-glow], .tile-accent[data-glow] { --glow-bg: .14; --glow-light: .6; } /* Светящаяся кромка: кольцо шириной 1.5px поверх обычной границы карточки. Кольцо рисуется внутри карточки (mask content-box), поэтому не срезается overflow: hidden. */ [data-glow]::before, [data-glow]::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px; background-attachment: fixed; background-repeat: no-repeat; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } [data-glow]::before { background-image: radial-gradient(calc(var(--glow-size) * .75) calc(var(--glow-size) * .75) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(var(--glow-hue) 95% 58% / var(--glow-edge)), transparent 100%); } [data-glow]::after { background-image: radial-gradient(calc(var(--glow-size) * .5) calc(var(--glow-size) * .5) at calc(var(--x) * 1px) calc(var(--y) * 1px), hsl(0 0% 100% / var(--glow-light)), transparent 100%); } @media (hover: none) { [data-glow] { background-image: none; } [data-glow]::before, [data-glow]::after { content: none; } } html.a11y [data-glow] { background-image: none; } html.a11y [data-glow]::before, html.a11y [data-glow]::after { content: none; } /* ---------- Display Cards ---------- */ .dcards { --dx: 4rem; --dy: 2.5rem; --dw: min(22rem, 74vw); display: grid; grid-template-areas: "stack"; place-items: center; padding: calc(var(--dy) * 1.2) calc(var(--dx) * 2) calc(var(--dy) * 2.4) 0; animation: dcards-in .7s ease both; } @keyframes dcards-in { from { opacity: 0; } } .dcard { grid-area: stack; position: relative; width: var(--dw); height: 9rem; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 12px 16px; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transform: translate(var(--tx, 0), var(--ty, 0)) skewY(-8deg); transition: transform .7s var(--ease), filter .7s, border-color .7s, background-color .7s; user-select: none; outline: none; } .dcard::after { content: ""; position: absolute; right: -4px; top: -5%; height: 110%; width: 72%; background: linear-gradient(to left, var(--bg), transparent); pointer-events: none; } .dcard:hover, .dcard:focus { border-color: var(--primary); background-color: var(--surface); } .dcard-row { display: flex; align-items: center; gap: 8px; } .dcard-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); flex: none; } .dcard-icon svg { width: 15px; height: 15px; } .dcard-title { font-size: 1.125rem; font-weight: 600; color: var(--primary); } .dcard-desc { font-size: 1.125rem; white-space: nowrap; color: var(--ink); position: relative; z-index: 1; } .dcard-date { font-size: .875rem; color: var(--muted); position: relative; z-index: 1; } /* Задние карточки: обесцвечены и притушены, при наведении оживают */ .dcard.is-back { filter: grayscale(1); } .dcard.is-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; background: color-mix(in srgb, var(--bg) 50%, transparent); transition: opacity .7s; } .dcard.is-back:hover, .dcard.is-back:focus { filter: none; } .dcard.is-back:hover::before, .dcard.is-back:focus::before { opacity: 0; } .dcard:nth-child(1) { --tx: 0; --ty: 0; } .dcard:nth-child(1):hover, .dcard:nth-child(1):focus { --ty: -2.5rem; } .dcard:nth-child(2) { --tx: var(--dx); --ty: var(--dy); } .dcard:nth-child(2):hover, .dcard:nth-child(2):focus { --ty: -.25rem; } .dcard:nth-child(3) { --tx: calc(var(--dx) * 2); --ty: calc(var(--dy) * 2); } .dcard:nth-child(3):hover, .dcard:nth-child(3):focus { --ty: var(--dy); } @media (max-width: 640px) { .dcards { --dx: 1.5rem; --dy: 2rem; --dw: min(18rem, 72vw); } .dcard-desc, .dcard-title { font-size: 1rem; } } /* Стопка дублирует список гарантий, в версии для слабовидящих не нужна */ html.a11y .dcards-wrap { display: none; } .dcard:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* Без color-mix оверлей задних карточек сделан через opacity; при наведении он исчезает */ .dcard.is-back:hover::before, .dcard.is-back:focus::before { opacity: 0 !important; } @supports not (background: color-mix(in srgb, red 50%, blue)) { .dcard.is-back::before { background: var(--bg); opacity: .5; } } /* Касание на телефоне: js/effects.js ставит .is-active, эффект такой же, как при наведении */ .dcard { cursor: pointer; } .dcard.is-active { border-color: var(--primary); background-color: var(--surface); } .dcard.is-back.is-active { filter: none; } .dcard.is-back.is-active::before { opacity: 0 !important; } .dcard:nth-child(1).is-active { --ty: -2.5rem; } .dcard:nth-child(2).is-active { --ty: -.25rem; } .dcard:nth-child(3).is-active { --ty: var(--dy); }