fix: hide pillars and suggestions on mobile to prevent overlap with step text
All checks were successful
Deploy Website / deploy (push) Successful in 2s

This commit is contained in:
Roberto Musso
2026-04-11 22:27:42 +02:00
parent 5aa43d5b21
commit 7da1f5811e

View File

@@ -781,30 +781,36 @@
top: 72px;
max-width: 100%;
z-index: 1;
padding-bottom: 16px;
padding-bottom: 8px;
}
.wt-device-frame { max-height: 35vh; }
.wt-app { min-height: 0; max-height: calc(35vh - 22px); overflow: hidden; }
.wt-text {
flex: none;
width: 100%;
position: relative;
z-index: 2;
}
.wt-step-pin { min-height: auto; }
.wt-step-pin { min-height: 100vh; }
.wt-step-pin:last-child { min-height: 70vh; }
.wt-step {
position: relative;
top: auto;
height: 80vh;
justify-content: center;
padding: 32px 16px;
background: linear-gradient(180deg, rgba(244,237,243,0.95) 0%, rgba(244,237,243,0.8) 80%, transparent 100%);
position: sticky;
top: calc(72px + 35vh + 16px);
min-height: 0;
height: auto;
padding: 24px 16px;
background: rgba(244,237,243,0.97);
border-radius: 16px;
margin-bottom: 0;
}
.wt-step:first-child { padding-top: 24px; }
.wt-step:last-child { height: 60vh; }
.wt-step.active { filter: blur(0px); }
.wt-app { min-height: 260px; }
.wt-main { padding: 20px 24px; }
.wt-greeting-name { font-size: 24px; }
.wt-device { max-width: 100%; }
.wt-app { min-height: 0; }
.wt-pillars { display: none; }
.wt-suggestions { display: none; }
.wt-main { padding: 14px 16px; }
.wt-greeting-name { font-size: 20px; }
.wt-greeting-label { font-size: 11px; }
.wt-topbar { height: 22px; }
.wt-topbar span { width: 6px; height: 6px; }
}
/* Walkthrough — Mobile */
@@ -812,21 +818,28 @@
.walkthrough { padding: 24px 0 16px; }
.walkthrough-inner { padding: 0 16px; }
.wt-device { top: 68px; }
.wt-device-frame { max-height: 30vh; }
.wt-app { max-height: calc(30vh - 22px); }
.wt-step {
height: 75vh;
top: calc(68px + 30vh + 12px);
padding: 20px 12px;
}
.wt-step:last-child { height: 55vh; }
.wt-app { min-height: 200px; font-size: 11px; }
.wt-main { padding: 16px 18px; }
.wt-greeting-name { font-size: 20px; }
.wt-greeting-name .wt-sparkle { font-size: 18px; }
.wt-sidebar { width: 36px; }
.wt-sidebar-icon { width: 26px; height: 26px; }
.wt-sidebar-icon i { width: 13px; height: 13px; }
.wt-brief { font-size: 11px; }
.wt-chat-input { padding: 8px 10px 8px 14px; }
.wt-suggestion { font-size: 11px; }
.wt-main { padding: 10px 12px; }
.wt-greeting-name { font-size: 16px; }
.wt-greeting-name .wt-sparkle { font-size: 14px; }
.wt-greeting-label { font-size: 9px; }
.wt-sidebar { width: 30px; }
.wt-sidebar-logo { width: 18px; height: 18px; }
.wt-sidebar-icon { width: 22px; height: 22px; }
.wt-sidebar-icon i { width: 11px; height: 11px; }
.wt-sidebar-avatar { width: 22px; height: 22px; font-size: 7px; }
.wt-brief { font-size: 9px; }
.wt-chat-input { padding: 6px 8px 6px 12px; }
.wt-chat-input span { font-size: 10px; }
.wt-chat-send { width: 22px; height: 22px; }
.wt-chat-send i { width: 11px; height: 11px; }
.wt-suggestion { font-size: 9px; }
.wt-suggestion i { width: 11px; height: 11px; }
}
/* ═══════════════════════════════════════
@@ -1318,7 +1331,7 @@
</svg>
<div>
<div class="name">Roberto Musso</div>
<div class="title">CEO</div>
<div class="title">Founder</div>
</div>
</div>
</div>