Карты
:root {
–cream: #f5f0e8;
–ink: #1a1612;
–gold: #b8975a;
–gold-light: #d4b483;
–muted: #7a6f62;
–card-w: 320px;
–card-h: 480px;
}
– { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(–ink);
background-image:
radial-gradient(ellipse at 20% 20%, #2a1f14 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, #1a120a 0%, transparent 60%),
url(“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ width=‘400’ height=‘400’%3E%3Cfilter id=‘n’%3E%3CfeTurbulence type=‘fractalNoise’ baseFrequency=‘0.75’ numOctaves=‘4’ stitchTiles=‘stitch’/%3E%3C/filter%3E%3Crect width=‘400’ height=‘400’ filter=‘url(%23n)’ opacity=‘0.04’/%3E%3C/svg%3E”);
min-height: 100vh;
font-family: ‘Jost’, sans-serif;
color: var(–cream);
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 24px 80px;
}
/* ── HEADER ── */
.header {
text-align: center;
margin-bottom: 56px;
opacity: 0;
animation: fadeUp 1.2s ease forwards;
}
.header-eyebrow {
font-family: ‘Jost’, sans-serif;
font-weight: 200;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 16px;
}
.header h1 {
font-family: ‘Cormorant Garamond’, serif;
font-weight: 300;
font-size: clamp(36px, 6vw, 54px);
line-height: 1.1;
color: var(–cream);
margin-bottom: 24px;
}
.header h1 em {
font-style: italic;
color: var(–gold-light);
}
.divider {
width: 48px;
height: 1px;
background: var(–gold);
margin: 0 auto 24px;
opacity: 0.5;
}
.header-intro {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: 17px;
line-height: 1.8;
color: #c4b89a;
max-width: 480px;
margin: 0 auto;
}
/* ── CARD STAGE ── */
.card-stage {
perspective: 1200px;
margin-bottom: 40px;
opacity: 0;
animation: fadeUp 1.2s ease 0.3s forwards;
}
.card-inner {
width: var(–card-w);
height: var(–card-h);
position: relative;
transform-style: preserve-3d;
transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.15, 1);
cursor: pointer;
}
.card-inner.flipped {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(0,0,0,0.6),
0 0 0 1px rgba(184,151,90,0.15),
inset 0 0 0 1px rgba(255,255,255,0.04);
}
.card-back-face {
background: var(–ink);
}
.card-back-face img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-front-face {
transform: rotateY(180deg);
background: #0d0b08;
}
.card-front-face img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* tap hint on back */
.tap-hint {
position: absolute;
bottom: 24px;
left: 0; right: 0;
text-align: center;
font-family: ‘Jost’, sans-serif;
font-weight: 200;
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(184,151,90,0.7);
pointer-events: none;
transition: opacity 0.4s;
}
.card-inner.flipped .tap-hint { opacity: 0; }
/* shimmer on hover */
.card-back-face::after {
content: ‘’;
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 40%, rgba(184,151,90,0.06) 50%, transparent 60%);
opacity: 0;
transition: opacity 0.4s;
}
.card-stage:hover .card-back-face::after { opacity: 1; }
/* ── DRAW BUTTON ── */
.btn-draw {
background: transparent;
border: 1px solid rgba(184,151,90,0.4);
color: var(–gold-light);
font-family: ‘Jost’, sans-serif;
font-weight: 300;
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 14px 40px;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
opacity: 0;
animation: fadeUp 1.2s ease 0.5s forwards;
margin-bottom: 56px;
}
.btn-draw::before {
content: ‘’;
position: absolute;
inset: 0;
background: rgba(184,151,90,0.08);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.btn-draw:hover {
border-color: rgba(184,151,90,0.8);
color: var(–cream);
box-shadow: 0 0 24px rgba(184,151,90,0.12);
}
.btn-draw:hover::before { transform: translateX(0); }
.btn-draw:active { transform: scale(0.97); }
/* ── QUESTIONS ── */
.questions-section {
width: 100%;
max-width: 520px;
opacity: 0;
animation: fadeUp 1.2s ease 0.7s forwards;
}
.questions-label {
font-family: ‘Jost’, sans-serif;
font-weight: 200;
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(–gold);
opacity: 0.7;
text-align: center;
margin-bottom: 28px;
}
.questions-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.questions-list li {
font-family: ‘Cormorant Garamond’, serif;
font-size: 18px;
font-weight: 300;
line-height: 1.5;
color: #c4b89a;
padding: 18px 0;
border-bottom: 1px solid rgba(184,151,90,0.1);
display: flex;
gap: 16px;
align-items: baseline;
}
.questions-list li:first-child {
border-top: 1px solid rgba(184,151,90,0.1);
}
.q-num {
font-family: ‘Jost’, sans-serif;
font-weight: 200;
font-size: 11px;
color: var(–gold);
opacity: 0.5;
flex-shrink: 0;
padding-top: 3px;
letter-spacing: 0.1em;
}
/* ── FOOTER ── */
.footer {
margin-top: 64px;
text-align: center;
font-family: ‘Jost’, sans-serif;
font-weight: 200;
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(184,151,90,0.3);
text-transform: uppercase;
opacity: 0;
animation: fadeUp 1.2s ease 1s forwards;
}
/* ── CARD CHANGE ANIMATION ── */
.card-stage.changing .card-inner {
animation: cardChange 0.5s ease forwards;
}
@keyframes cardChange {
0% { transform: rotateY(0deg) scale(1); opacity: 1; }
40% { transform: rotateY(90deg) scale(0.95); opacity: 0.3; }
60% { transform: rotateY(90deg) scale(0.95); opacity: 0.3; }
100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── RESPONSIVE ── */
@media (max-width: 400px) {
:root {
–card-w: 280px;
–card-h: 420px;
}
}
Метафорические карты
Вытяни свою карту
Сделай глубокий вдох. Задай себе вопрос или просто позволь себе быть в этом моменте —
и вытяни карту, которая ждёт именно тебя.
✦ Вытянуть другую карту ✦
Вопросы для размышления
- 01Какие детали изображения в первую очередь бросились тебе в глаза?
- 02Какое название ты бы дала этому изображению?
- 03Как ты опишешь происходящее на изображении?
- 04Что происходит на изображении?
- 05Какая часть твоего тела отзывается при виде этого изображения?
- 06Какое настроение передаёт это изображение?
- 07Что в твоей жизни сопоставимо с ответами на вопросы выше или можно описать теми же словами?
const TOTAL = 42;
const BASE_URL = “https://mystretch.blog/wp-content/uploads/2026/05/card”;
// Shuffle tracking — no repeats until all 42 shown
let deck = [];
let currentCard = null;
function buildDeck() {
deck = Array.from({length: TOTAL}, (_, i) => i + 1);
// Fisher-Yates shuffle
for (let i = deck.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[deck[i], deck[j]] = [deck[j], deck[i]];
}
}
function drawCard() {
if (deck.length === 0) buildDeck();
// avoid same card twice in a row
let next = deck.pop();
if (next === currentCard && deck.length > 0) {
deck.unshift(next); // put it back at the bottom
next = deck.pop();
}
currentCard = next;
return next;
}
function flipCard() {
const inner = document.getElementById(‘cardInner’);
if (!inner.classList.contains(‘flipped’)) {
inner.classList.add(‘flipped’);
}
}
function drawNewCard() {
const stage = document.getElementById(‘cardStage’);
const inner = document.getElementById(‘cardInner’);
const frontImg = document.getElementById(‘cardFront’);
const num = drawCard();
const newSrc = BASE_URL + num + “.png”;
// Reset flip, animate change
inner.classList.remove(‘flipped’);
stage.classList.add(‘changing’);
setTimeout(() => {
frontImg.src = newSrc;
stage.classList.remove(‘changing’);
}, 450);
}
// Preload first card on page load
window.addEventListener(‘load’, () => {
buildDeck();
const num = drawCard();
document.getElementById(‘cardFront’).src = BASE_URL + num + “.png”;
});
Биомеханика Гибкости 