Deutsch Übungen A0 для Tilda
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;600;900&family=Instrument+Serif:ital@0;1&display=swap');
:root {
--cream: #f2ede3;
--ink: #1c1917;
--red: #d94f3a;
--blue: #2d5be3;
--yellow: #e8c53a;
--green: #3aad6e;
--orange: #e8813a;
--paper: #ece7db;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
background: var(--cream);
font-family: 'Instrument Serif', Georgia, serif;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
.bg {
position: fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.bg svg { position:absolute; }
header {
position: relative; z-index:10;
padding: 24px 28px 0;
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
.logo {
font-family: 'Unbounded', sans-serif;
font-weight: 900; font-size: clamp(1.1rem,3.5vw,1.7rem);
letter-spacing: -0.04em; color: var(--ink);
line-height: 1;
}
.logo em { color: var(--red); font-style: normal; }
.mode-pills {
display: flex; gap: 6px; flex-wrap: wrap;
}
.mode-pill {
font-family: 'Unbounded', sans-serif;
font-size: 0.58rem; font-weight: 600;
padding: 7px 13px; border-radius: 100px;
border: 2px solid var(--ink);
background: transparent; cursor: pointer;
transition: all .15s; color: var(--ink);
letter-spacing: 0.02em;
}
.mode-pill.active { background: var(--ink); color: var(--cream); }
.mode-pill:hover:not(.active) { background: var(--ink); color: var(--cream); opacity:.7; }
.progress-bar-wrap {
position: relative; z-index:10;
padding: 16px 28px 0;
display: flex; align-items: center; gap: 12px;
}
.ptrack {
flex:1; height: 4px; background: rgba(28,25,23,.12); border-radius:10px; overflow:hidden;
}
.pfill {
height:100%; background: var(--ink); border-radius:10px;
transition: width .5s cubic-bezier(.4,0,.2,1);
}
.pnum {
font-family: 'Unbounded', sans-serif;
font-size: .6rem; font-weight: 600;
color: var(--ink); opacity:.4; white-space:nowrap;
}
.stage {
position: relative; z-index:5;
padding: 24px 28px 100px;
max-width: 600px; margin: 0 auto;
min-height: calc(100vh - 100px);
display: flex; flex-direction: column; gap: 20px;
}
.ex-card {
background: var(--paper);
border: 2.5px solid var(--ink);
border-radius: 20px;
padding: 28px 24px 22px;
animation: slideUp .35s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
from { opacity:0; transform: translateY(18px); }
to { opacity:1; transform: translateY(0); }
}
.ex-type-label {
font-family: 'Unbounded', sans-serif;
font-size: 0.55rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
opacity: .35; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.type-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.ex-prompt {
font-size: clamp(1rem, 3.5vw, 1.25rem);
line-height: 1.55;
color: var(--ink);
margin-bottom: 6px;
}
.ex-prompt .ru {
font-style: italic; opacity: .5; font-size: .88em;
display: block; margin-top: 4px;
}
.speak-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
border: 2px solid var(--ink); background: transparent;
cursor: pointer; transition: all .15s;
margin-left: 6px; vertical-align: middle;
flex-shrink: 0;
}
.speak-btn:hover { background: var(--ink); color: var(--cream); }
.speak-btn.speaking { background: var(--blue); border-color: var(--blue); color: #fff; }
.speak-btn svg { width: 14px; height: 14px; fill: currentColor; }
.sentence-area {
min-height: 52px;
border: 2px dashed rgba(28,25,23,.2);
border-radius: 12px;
padding: 10px 12px;
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
margin: 16px 0 10px;
transition: border-color .2s;
}
.sentence-area.drag-over { border-color: var(--blue); }
.sentence-area.correct-anim { border-color: var(--green); background: rgba(58,173,110,.06); }
.sentence-area.wrong-anim { border-color: var(--red); background: rgba(217,79,58,.06); }
.bank {
display: flex; flex-wrap: wrap; gap: 8px;
min-height: 44px;
margin-top: 8px;
}
.word-token {
font-family: 'Unbounded', sans-serif;
font-size: .72rem; font-weight: 600;
padding: 9px 14px; border-radius: 10px;
border: 2px solid var(--ink);
background: var(--cream);
cursor: grab; user-select: none;
transition: transform .12s, box-shadow .12s, opacity .12s;
touch-action: none;
}
.word-token:hover {