.tp-builder {
--tp-cup-w: 390px;
--tp-cup-h: 250px;
--tp-cup-radius: 180px;
--tp-cup-wall: 10px;
--tp-cup-rim: 14px;
--tp-wave-h: 26px;
--tp-wave-w: 220px;
--tp-wave-offset: 70px;
--tp-handle-w: 60px;
--tp-handle-h: 140px;
--tp-handle-top: 40px;
--tp-handle-thick: 16px;
--tp-saucer-w: 280px;
--tp-saucer-h: 14px;
--tp-steam-h: 110px;
--tp-steam-w: 14px;
--tp-steam-wisp-h: 70px;
--tp-steam-end: -40px;
--tp-h2: 64px;
--tp-cup-title: 44px;
--tp-status: 24px;
--tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--tp-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C50 4 50 4 100 20 S150 36 200 20 V40 H0 Z' fill='black'/%3E%3C/svg%3E");
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 64px;
width: 100%;
font-family: var(--font-body, "DM Sans"), "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 1.75;
color: var(--color-ink, #2B3A31);
}
.tp-builder *, .tp-builder *::before, .tp-builder *::after { box-sizing: border-box; }
.tp-builder p { margin: 0; }
.tp-builder [hidden] { display: none !important; }
.tp-text-soft { color: var(--color-ink-soft, #56645B); } .tp-builder-card {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1 1 50%;
padding: 28px 48px;
background-color: var(--color-builder-card, #F7F6EA);
border-radius: 4px 4px 64px 4px;
}
.tp-eyebrow {
display: flex;
align-items: center;
gap: 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-eyebrow, #557A66);
}
.tp-eyebrow-line { flex: 0 0 auto; width: 32px; height: 1px; background-color: currentColor; }
.tp-builder .tp-h2 {
margin: 0;
font-family: var(--font-heading, "DM Serif Display"), Georgia, serif;
font-size: var(--tp-h2);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.035em;
color: var(--color-heading, #24493A);
}
.tp-plants { display: flex; flex-flow: row wrap; gap: 12px; }
.tp-builder .tp-plant {
display: flex;
flex: 1 1 45%;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 80px;
margin: 0;
padding: 16px;
border: 1px solid transparent;
border-radius: 4px 4px 16px 4px;
background-color: var(--color-card, #F0EDE1);
color: var(--color-ink, #2B3A31);
font: inherit;
text-align: left;
text-transform: none;
letter-spacing: normal;
box-shadow: none;
cursor: pointer;
transition: border-color 300ms, background-color 300ms, transform 300ms var(--tp-ease);
}
.tp-builder .tp-plant:hover,
.tp-builder .tp-plant:focus-visible {
border-color: var(--color-eyebrow, #557A66);
background-color: var(--color-card, #F0EDE1);
color: var(--color-ink, #2B3A31);
transform: translateY(-3px);
}
.tp-builder .tp-plant:focus-visible { outline: 2px solid var(--color-accent, #2F5642); outline-offset: 2px; }
.tp-builder .tp-plant.is-active,
.tp-builder .tp-plant.is-active:hover {
border-color: var(--color-accent, #2F5642);
background-color: var(--color-accent-soft, #DDE6DA);
}
.tp-builder .tp-plant.is-disabled,
.tp-builder .tp-plant.is-disabled:hover {
opacity: 0.45;
cursor: not-allowed;
border-color: transparent;
transform: none;
}
.tp-plant-text { display: flex; flex-direction: column; gap: 4px; }
.tp-plant-name {
font-family: var(--font-heading, "DM Serif Display"), Georgia, serif;
font-size: 19px;
line-height: 1.25;
color: var(--color-heading, #24493A);
}
.tp-plant-note { font-size: 13px; line-height: 1.4; color: var(--color-ink-soft, #56645B); }
.tp-plant-radio {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--color-ink-soft, #56645B);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: var(--color-ink, #2B3A31);
transition: background-color 300ms, border-color 300ms;
}
.tp-plant-radio.is-on { border-color: var(--color-accent, #2F5642); }
.tp-hint { font-size: 15px; color: var(--color-ink-soft, #56645B); } .tp-cup-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
flex: 1 1 50%;
padding: 48px 24px;
text-align: center;
}
.tp-cup-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tp-cup-title {
font-family: var(--font-heading, "DM Serif Display"), Georgia, serif;
font-size: var(--tp-cup-title);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--color-heading, #24493A);
}
.tp-cup-figure { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.tp-cup-wrap { display: flex; flex-direction: row; align-items: flex-start; }
.tp-cup { position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: var(--tp-cup-w);
height: var(--tp-cup-h);
padding: 0 var(--tp-cup-wall) var(--tp-cup-wall);
border-top: var(--tp-cup-rim) solid var(--color-cup-rim, #F2EFE1);
border-radius: 16px 16px var(--tp-cup-radius) var(--tp-cup-radius);
background-color: var(--color-cup, #FFFEF6);
box-shadow: 0 24px 48px rgba(43, 58, 49, 0.12);
overflow: hidden;
}
.tp-cup-inner {
display: flex;
flex-direction: column-reverse;
flex: 1 1 auto;
overflow: hidden;
border-radius: 0 0 calc(var(--tp-cup-radius) - var(--tp-cup-wall)) calc(var(--tp-cup-radius) - var(--tp-cup-wall));
background-color: var(--color-cup, #FFFEF6);
}
.tp-cup-layer {
flex: 0 0 auto;
width: 100%;
height: 0;
transition: height 1100ms var(--tp-ease), background-color 900ms var(--tp-ease);
}
.tp-cup-layer.is-on { height: calc((100% - var(--tp-wave-h)) / 3); }
.tp-cup-wave {
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: 100%;
height: var(--tp-wave-h);
margin-bottom: -1px;
background-color: transparent !important;
transition: opacity 900ms var(--tp-ease);
}
.tp-cup-wave-off { opacity: 0; }
.tp-cup-wave-back,
.tp-cup-wave-front {
flex: 0 0 auto;
width: 100%;
height: var(--tp-wave-h);
-webkit-mask-image: var(--tp-wave-mask);
mask-image: var(--tp-wave-mask);
-webkit-mask-size: var(--tp-wave-w) 100%;
mask-size: var(--tp-wave-w) 100%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}
.tp-cup-wave-back { height: calc(var(--tp-wave-h) + 5px);
margin-top: -5px;
background-color: var(--tp-wave-color);
filter: brightness(0.82);
animation: tp-wave-right 6.5s linear infinite;
}
.tp-cup-wave-front {
margin-top: calc(var(--tp-wave-h) * -1);
background-color: var(--tp-wave-color);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 0%, transparent 70%);
animation: tp-wave-left 4.2s linear infinite;
}
@keyframes tp-wave-left {
from { -webkit-mask-position: 0 0; mask-position: 0 0; }
to { -webkit-mask-position: calc(var(--tp-wave-w) * -1) 0; mask-position: calc(var(--tp-wave-w) * -1) 0; }
}
@keyframes tp-wave-right {
from { -webkit-mask-position: var(--tp-wave-offset) 0; mask-position: var(--tp-wave-offset) 0; }
to { -webkit-mask-position: calc(var(--tp-wave-offset) + var(--tp-wave-w)) 0; mask-position: calc(var(--tp-wave-offset) + var(--tp-wave-w)) 0; }
}
.tp-steam {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: 24px;
height: var(--tp-steam-h);
margin-bottom: -16px;
opacity: 0;
transition: opacity 1400ms var(--tp-ease);
}
.tp-steam.is-on { opacity: 1; }
.tp-steam-wisp {
width: var(--tp-steam-w);
height: var(--tp-steam-wisp-h);
border-radius: 999px;
background-color: rgba(86, 100, 91, 0.28);
filter: blur(6px);
animation: tp-steam-rise 4.2s ease-in-out infinite;
}
.tp-steam-wisp-2 { animation-delay: 1.4s; }
.tp-steam-wisp-3 { animation-delay: 2.8s; }
@keyframes tp-steam-rise {
0% { transform: translateY(20px) scaleY(0.6); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateY(var(--tp-steam-end)) translateX(6px) scaleY(1.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tp-cup-wave-back, .tp-cup-wave-front, .tp-steam-wisp { animation: none; }
}
.tp-cup-handle {
width: var(--tp-handle-w);
height: var(--tp-handle-h);
margin-top: var(--tp-handle-top);
margin-left: -16px;
border: var(--tp-handle-thick) solid var(--color-cup-rim, #F2EFE1);
border-left: none;
border-radius: 0 999px 999px 0;
}
.tp-cup-spacer { width: var(--tp-handle-w); }
.tp-cup-shadow {
width: var(--tp-saucer-w);
height: var(--tp-saucer-h);
border-radius: 999px;
background-color: var(--color-cup-shadow, #C9C8B4);
}
.tp-status { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tp-status-title {
font-family: var(--font-heading, "DM Serif Display"), Georgia, serif;
font-size: var(--tp-status);
line-height: 1.25;
color: var(--color-heading, #24493A);
} .tp-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; }
.tp-builder .tp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 56px;
margin: 0;
padding: 0 32px;
border: 1px solid transparent;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
transition: background-color 300ms, color 300ms, border-color 300ms, transform 300ms var(--tp-ease);
}
.tp-arrow { display: inline-flex; transition: transform 300ms var(--tp-ease); }
.tp-builder .tp-btn-primary { background-color: var(--color-accent, #2F5642); border-color: var(--color-accent, #2F5642); color: var(--color-on-accent, #F8F6F0); }
.tp-builder .tp-btn-primary:hover,
.tp-builder .tp-btn-primary:focus-visible {
background-color: var(--color-accent-hover, #244634);
border-color: var(--color-accent-hover, #244634);
color: var(--color-on-accent, #F8F6F0);
transform: translateY(-6px);
}
.tp-builder .tp-btn-primary:hover .tp-arrow { transform: translateX(5px); }
.tp-builder .tp-btn-primary:disabled,
.tp-builder .tp-btn-primary:disabled:hover {
background-color: var(--color-accent, #2F5642);
border-color: var(--color-accent, #2F5642);
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.tp-builder .tp-btn-secondary { background-color: transparent; border-color: var(--color-ink-soft, #56645B); color: var(--color-heading, #24493A); }
.tp-builder .tp-btn-secondary:hover,
.tp-builder .tp-btn-secondary:focus-visible { background-color: var(--color-surface, #FBFAF6); color: var(--color-heading, #24493A); transform: translateY(-6px); }
.tp-notice { font-size: 15px; font-weight: 700; color: var(--color-accent-hover, #244634); text-align: center; }
.tp-notice a { color: inherit; text-decoration: underline; }
.tp-notice.is-error { color: var(--color-terracotta, #A5694C); } .tp-plant-bg-kassinaeris { background-color: var(--plant-kassinaeris, #A585C1); --tp-wave-color: var(--plant-kassinaeris, #A585C1); }
.tp-plant-bg-must-piparmunt { background-color: var(--plant-must-piparmunt, #6F9878); --tp-wave-color: var(--plant-must-piparmunt, #6F9878); }
.tp-plant-bg-kaharmunt { background-color: var(--plant-kaharmunt, #9DBE92); --tp-wave-color: var(--plant-kaharmunt, #9DBE92); }
.tp-plant-bg-nurmenukk { background-color: var(--plant-nurmenukk, #E6C760); --tp-wave-color: var(--plant-nurmenukk, #E6C760); }
.tp-plant-bg-meliss { background-color: var(--plant-meliss, #BCCB74); --tp-wave-color: var(--plant-meliss, #BCCB74); }
.tp-plant-bg-saialill { background-color: var(--plant-saialill, #E9A04A); --tp-wave-color: var(--plant-saialill, #E9A04A); }
.tp-plant-bg-kummel { background-color: var(--plant-kummel, #EDD994); --tp-wave-color: var(--plant-kummel, #EDD994); }
.tp-plant-bg-rukkilill { background-color: var(--plant-rukkilill, #8FA2D8); --tp-wave-color: var(--plant-rukkilill, #8FA2D8); }
.tp-plant-bg-angervaks { background-color: var(--plant-angervaks, #DCCDA8); --tp-wave-color: var(--plant-angervaks, #DCCDA8); } @media (max-width: 1024px) {
.tp-builder { --tp-h2: 48px; flex-direction: column; align-items: stretch; gap: 32px; }
.tp-cup-panel { padding: 0; }
} @media (max-width: 767px) {
.tp-builder {
--tp-cup-w: 240px;
--tp-cup-h: 160px;
--tp-cup-radius: 110px;
--tp-cup-wall: 6px;
--tp-cup-rim: 10px;
--tp-wave-h: 18px;
--tp-wave-w: 150px;
--tp-wave-offset: 48px;
--tp-handle-w: 40px;
--tp-handle-h: 90px;
--tp-handle-top: 24px;
--tp-handle-thick: 11px;
--tp-saucer-w: 180px;
--tp-saucer-h: 10px;
--tp-steam-h: 76px;
--tp-steam-w: 10px;
--tp-steam-wisp-h: 48px;
--tp-steam-end: -28px;
--tp-h2: 38px;
--tp-cup-title: 32px;
--tp-status: 20px;
font-size: 16px;
}
.tp-builder-card { padding: 20px 16px; border-radius: 4px 4px 40px 4px; }
.tp-plants { gap: 8px; }
.tp-builder .tp-plant { min-height: 56px; padding: 12px; }
.tp-plant-note { display: none; }
}