/* ============================================
Spomotion - Unified Stylesheet
============================================ */
/* Design system & animations are loaded as separate tags in each page
to parallelize requests. */
/* Open Runde Font — WOFF2 only (WOFF fallback removed; no modern browser needs it) */
@font-face {
font-family: 'Open Runde';
src: url('../fonts/OpenRunde-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Runde';
src: url('../fonts/OpenRunde-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Runde';
src: url('../fonts/OpenRunde-Semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Open Runde';
src: url('../fonts/OpenRunde-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Reset and Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Suppress only the non-keyboard focus ring; keep :focus-visible for keyboard users. */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid #5183EB;
outline-offset: 2px;
border-radius: 4px;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background-color: #ffffff;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
letter-spacing: -0.12px;
padding-top: 56px;
/* Offset for fixed header */
}
/* Text selection highlight */
::selection {
background-color: #5183EB;
color: #ffffff;
}
::-moz-selection {
background-color: #5183EB;
color: #ffffff;
}
/* Touch devices — homepage is a single-viewport experience (no scroll) */
@media (hover: none) and (pointer: coarse) {
body:not(.support-page):not(.error-page) {
height: 100dvh;
overflow: hidden;
position: fixed;
width: 100%;
}
body:not(.support-page):not(.error-page) .main {
flex: 1;
overflow: hidden;
}
body:not(.support-page):not(.error-page) .hero {
height: 100%;
}
body:not(.support-page):not(.error-page) .hero-phone {
flex: 1;
overflow: hidden;
}
}
/* Skip link — visually hidden until focused */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10002;
background: #0f172a;
color: #fff;
padding: 10px 16px;
border-radius: 0 0 8px 0;
font-weight: 600;
text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
left: 0;
}
/* ============================================
Entrance Animations
============================================ */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes heroReveal {
0% {
opacity: 0;
transform: translateY(24px) scale(0.97);
filter: blur(8px);
}
60% {
filter: blur(0px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0px);
}
}
@keyframes phoneReveal {
0% {
opacity: 0;
transform: translateY(50px) scale(0.92);
filter: blur(6px);
}
50% {
filter: blur(0px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0px);
}
}
/* Hero Element Animations */
.hero-title {
animation: heroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.hero-subtitle {
animation: heroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.button-wrapper {
animation: heroReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.hero-phone {
animation: phoneReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
/* ============================================
Header Styles
============================================ */
.header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 16px 16px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: fixed;
top: 0;
left: 0;
z-index: 100;
flex-shrink: 0;
animation: slideDown 0.6s ease-out forwards;
}
/* Bottom fade gradient */
.header::after {
content: '';
position: absolute;
bottom: -40px;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), transparent);
pointer-events: none;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
flex-shrink: 0;
}
.logo img {
width: 147px;
height: 24px;
display: block;
transition: transform 0.3s ease;
}
.logo img:hover {
transform: scale(1.02);
}
/* Header Content Container */
.header-content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1200px;
position: relative;
}
/* Morphing Menu Toggle Button */
.menu-toggle {
display: none;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
z-index: 10001;
/* Above mobile-nav */
color: #0f172a;
transition: color 0.3s ease;
}
.menu-toggle:hover {
color: #5183EB;
}
.menu-icon {
display: block;
width: 24px;
height: 24px;
overflow: visible;
}
.menu-line {
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
}
/* Hamburger state (default) */
.menu-line-1 {
transform: none;
transform-origin: 12px 6px;
}
.menu-line-2 {
opacity: 1;
transform-origin: center;
}
.menu-line-3 {
transform: none;
transform-origin: 12px 18px;
}
/* X state - when menu is open */
.menu-toggle.open .menu-line-1 {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle.open .menu-line-2 {
opacity: 0;
}
.menu-toggle.open .menu-line-3 {
transform: translateY(-6px) rotate(-45deg);
}
/* Show toggle on mobile */
@media (max-width: 768px) {
.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
}
}
/* Mobile Navigation Overlay */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: scale(1.1);
opacity: 0;
visibility: hidden;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
visibility 0s linear 0.35s;
z-index: 9999;
}
.mobile-nav.open {
transform: scale(1);
opacity: 1;
visibility: visible;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.25s ease,
visibility 0s linear 0s;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.mobile-nav-link {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 24px;
color: #6b7280;
text-decoration: none;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.mobile-nav.open .mobile-nav-link {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation for links */
.mobile-nav.open .mobile-nav-link:nth-child(1) {
transition-delay: 0.08s;
}
.mobile-nav.open .mobile-nav-link:nth-child(2) {
transition-delay: 0.12s;
}
.mobile-nav.open .mobile-nav-link:nth-child(3) {
transition-delay: 0.16s;
}
.mobile-nav.open .mobile-nav-link:nth-child(4) {
transition-delay: 0.20s;
}
.mobile-nav.open .mobile-nav-link:nth-child(5) {
transition-delay: 0.24s;
}
.mobile-nav-link:hover {
color: #5183EB;
transform: scale(1.05);
}
.mobile-nav-link-active {
color: #5183EB;
font-weight: 600;
}
/* ============================================
Main Content & Hero Section
============================================ */
.main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 60px;
animation: scaleIn 0.6s ease-out 0.2s both;
}
.hero {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
width: 100%;
gap: 60px;
}
.hero-content {
flex: 0 0 45%;
max-width: 540px;
}
.hero-title {
/* Fluid size so "Discover new way" always fits on one line */
font-size: clamp(24px, 3vw, 40px);
font-weight: 700;
line-height: 1.2;
color: #0f172a;
margin-bottom: 16px;
letter-spacing: -0.02em;
text-wrap: balance;
}
/* First headline line: "Discover new way" never breaks apart */
.hero-title-line {
display: block;
white-space: nowrap;
}
/* Keep the carousel word + "new" together on the same line */
.hero-discover-group {
white-space: nowrap;
}
.hero-subtitle {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: #C2C2C2;
margin-bottom: 32px;
}
/* ============================================
Text Roll Animation
============================================ */
.roll-container {
/* Taller height to accommodate descenders like y, g, p */
height: 1.5em;
overflow: hidden;
display: inline-flex;
justify-content: flex-start;
align-items: center;
perspective: 1000px;
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
vertical-align: baseline;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: -0.15em;
margin-bottom: -0.15em;
/* Fade mask at top and bottom edges - only at very edges */
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
black 8%,
black 92%,
transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%,
black 8%,
black 92%,
transparent 100%);
}
.roll-word-wrapper {
display: flex;
white-space: pre;
font-size: inherit;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #5183EB;
/* Brand color */
}
.roll-char {
display: inline-block;
transform-style: preserve-3d;
will-change: transform, opacity, filter, background-position;
/* Gradient background for color sweep - sharp color bands */
background-image: linear-gradient(0deg,
#0f172a 0%,
#0f172a 10%,
#FECD7B 10%,
#FECD7B 22%,
#27CF83 22%,
#27CF83 34%,
#3CCFB4 34%,
#3CCFB4 46%,
#50CEE3 46%,
#50CEE3 58%,
#5183EB 58%,
#5183EB 70%,
#0f172a 70%,
#0f172a 100%);
background-size: 100% 400%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-position-y: 100%;
/* Initial State (Before Animation) - from bottom */
opacity: 0;
transform: translateY(30px) rotateX(25deg);
filter: blur(6px);
transform-origin: center bottom;
}
/* Animation States */
.roll-char.animate-in {
animation:
rollIn 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) forwards,
colorSweepUp 0.7s cubic-bezier(0.2, 0, 0.3, 0.3) forwards;
}
.roll-char.animate-out {
animation:
rollOut 0.4s cubic-bezier(0.5, 0, 0.7, 1) forwards,
colorSweepDown 0.4s cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
/* Keyframes - Bottom to Top */
@keyframes rollIn {
0% {
opacity: 0;
transform: translateY(30px) rotateX(25deg) scale(0.95);
filter: blur(6px);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0) scale(1);
filter: blur(0px);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateY(0) rotateX(0) scale(1);
filter: blur(0px);
}
100% {
opacity: 0;
transform: translateY(-20px) rotateX(-15deg) scale(0.95);
filter: blur(4px);
}
}
/* Color sweep from bottom to top */
@keyframes colorSweepUp {
0% {
background-position-y: 100%;
}
100% {
background-position-y: 0%;
}
}
/* Color sweep reverse - top to bottom */
@keyframes colorSweepDown {
0% {
background-position-y: 0%;
}
100% {
background-position-y: 100%;
}
}
.hero-phone {
flex: 0 0 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 550px;
}
/* ============================================
Download Button Styles
============================================ */
.button-wrapper {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.download-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 40px;
background-color: #fafafa;
padding: 14px 24px;
cursor: pointer;
border: none;
outline: none;
text-decoration: none;
transform: scale(1);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Buttons with icons have asymmetric padding */
.download-btn:has(.icon-wrapper) {
padding: 14px 24px 14px 20px;
}
.download-btn:focus-visible {
outline: none;
}
/* Background Fill Animation */
.bg-fill {
position: absolute;
left: 50%;
top: 100%;
display: block;
width: 300px;
height: 300px;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
background-color: #5183EB;
transition: transform 0.3s ease-out;
pointer-events: none;
}
.download-btn:hover .bg-fill,
.download-btn:active .bg-fill,
.download-btn.pressed .bg-fill {
transform: translate(-50%, -50%) scale(1);
}
.download-btn:active .bg-fill,
.download-btn.pressed .bg-fill {
background-color: #3A73DC;
}
/* Enhanced press animation for download button */
.download-btn:active,
.download-btn.pressed {
transform: scale(0.96);
transition: transform 0.1s ease-out;
}
/* Content Container */
.btn-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
color: #0f172a;
transition: color 0.2s ease;
}
.download-btn:hover .btn-content,
.download-btn:active .btn-content,
.download-btn.pressed .btn-content {
color: #ffffff;
}
.icon-wrapper {
position: relative;
flex-shrink: 0;
width: 24px;
height: 24px;
}
.apple-icon {
display: block;
width: 100%;
height: 100%;
}
.btn-text {
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: -0.32px;
text-align: center;
white-space: nowrap;
}
/* Border Ring */
.border-ring {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 40px;
border: 1px solid #f4f4f5;
transition: border-color 0.3s ease;
}
.download-btn:hover .border-ring,
.download-btn:active .border-ring,
.download-btn.pressed .border-ring {
border-color: transparent;
}
/* QR Code Popup */
.qr-popup {
position: fixed;
padding: 0px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
pointer-events: none;
}
/* Show QR popup via JS class */
.qr-popup.visible {
opacity: 1;
visibility: visible;
}
/* Hide QR popup completely on touch devices */
@media (pointer: coarse) {
.qr-popup,
.qr-popup.visible {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
}
.qr-image {
width: 100px;
height: 100px;
display: block;
border-radius: 8px;
}
/* ============================================
Phone Animation Styles
============================================ */
.phone-animation-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 560px;
height: 550px;
transform-origin: center center;
cursor: pointer;
/* Scale corrections while the layout settles glide instead of snapping */
transition: transform 0.25s ease-out;
}
/* Base Element Styles */
.element {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
will-change: transform, opacity, left, top;
transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s ease-out,
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: auto;
cursor: pointer;
}
.element-inner {
position: relative;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.element img {
max-width: none;
object-fit: cover;
pointer-events: auto;
display: block;
cursor: pointer;
}
/* Hover bounce effect on cards and icons - with preserved rotations */
#card-left-up:hover .element-inner {
transform: rotate(11.61deg) scale(1.08);
}
#card-right-up:hover .element-inner {
transform: rotate(-12.298deg) scale(1.08);
}
#card-left-down:hover .element-inner {
transform: rotate(-7.57deg) scale(1.08);
}
#card-right-down:hover .element-inner {
transform: rotate(10.1deg) scale(1.08);
}
#icon-bestie:hover .element-inner {
transform: rotate(-5.48deg) scale(1.1);
}
#icon-buddy-sm:hover .element-inner {
transform: rotate(13.74deg) scale(1.1);
}
#icon-still-trying:hover .element-inner {
transform: rotate(16.05deg) scale(1.1);
}
#icon-reliable:hover .element-inner {
transform: rotate(-3.14deg) scale(1.1);
}
#icon-angel:hover .element-inner {
transform: rotate(8.02deg) scale(1.1);
}
#icon-buddy:hover .element-inner {
transform: rotate(-10.5deg) scale(1.1);
}
#icon-still-trying-sm:hover .element-inner {
transform: scale(1.1);
}
.element .element-inner {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Card Elements - Initial Positions (Hidden) */
#card-left-up {
width: 275px;
height: 174px;
left: 152px;
top: 126px;
opacity: 0;
transform: scale(0.8);
z-index: 15;
}
#card-left-up .element-inner {
transform: rotate(11.61deg);
}
#card-left-up img {
width: 255px;
height: 125px;
}
#card-right-up {
width: 276px;
height: 176px;
left: 180px;
top: 182px;
opacity: 0;
transform: scale(0.8);
z-index: 14;
}
#card-right-up .element-inner {
transform: rotate(-12.298deg);
}
#card-right-up img {
width: 255px;
height: 125px;
}
#card-left-down {
width: 270px;
height: 160px;
left: 178px;
top: 316px;
opacity: 0;
transform: scale(0.8);
z-index: 13;
}
#card-left-down .element-inner {
transform: rotate(-8.468deg);
}
#card-left-down img {
width: 255px;
height: 125px;
}
#card-right-down {
width: 284px;
height: 212px;
left: 179px;
top: 329px;
opacity: 0;
transform: scale(0.8);
z-index: 12;
}
#card-right-down .element-inner {
transform: rotate(22.402deg);
}
#card-right-down img {
width: 255px;
height: 125px;
}
/* Icon Elements - Initial Positions (Hidden) */
#icon-bestie {
width: 116.63px;
height: 116.63px;
left: 165px;
top: 42px;
opacity: 0;
transform: scale(0.8);
z-index: 18;
}
#icon-bestie .element-inner {
transform: rotate(-10.558deg);
}
#icon-bestie img {
width: 100px;
height: 100px;
}
#icon-buddy-sm {
width: 54.641px;
height: 54.641px;
left: 338px;
top: 303px;
opacity: 0;
transform: scale(0.8);
z-index: 16;
}
#icon-buddy-sm .element-inner {
transform: rotate(30deg);
}
#icon-buddy-sm img {
width: 40px;
height: 40px;
}
#icon-still-trying {
width: 97.98px;
height: 97.98px;
left: 298px;
top: 227px;
opacity: 0;
transform: scale(0.8);
z-index: 17;
}
#icon-still-trying .element-inner {
transform: rotate(15deg);
}
#icon-still-trying img {
width: 80px;
height: 80px;
}
#icon-reliable {
width: 68.301px;
height: 68.301px;
left: 168px;
top: 388px;
opacity: 0;
transform: scale(0.8);
z-index: 16;
}
#icon-reliable .element-inner {
transform: rotate(-30deg);
}
#icon-reliable img {
width: 50px;
height: 50px;
}
#icon-angel {
width: 122.942px;
height: 122.942px;
left: 282px;
top: 48px;
opacity: 0;
transform: scale(0.8);
z-index: 19;
}
#icon-angel .element-inner {
transform: rotate(30deg);
}
#icon-angel img {
width: 90px;
height: 90px;
}
#icon-buddy {
width: 73.485px;
height: 73.485px;
left: 171px;
top: 257px;
opacity: 0;
transform: scale(0.8);
z-index: 16;
}
#icon-buddy .element-inner {
transform: rotate(-15deg);
}
#icon-buddy img {
width: 60px;
height: 60px;
}
#icon-still-trying-sm {
width: 30px;
height: 30px;
left: 178px;
top: 215px;
opacity: 0;
transform: scale(0.7);
z-index: 15;
}
#icon-still-trying-sm img {
width: 30px;
height: 30px;
}
/* Phone Container */
.phone-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 240px;
height: 497px;
z-index: 20;
perspective: 1000px;
}
.phone {
position: absolute;
inset: 0;
transition: opacity 0.3s ease-out,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone img {
width: 100%;
height: 100%;
object-fit: cover;
}
.phone-blue {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.4s ease;
}
.phone-white {
opacity: 0;
visibility: hidden;
transform: scale(0.9);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
visibility 0s linear 0.3s;
}
.phone-white img {
width: 224px;
height: 463px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Hover States */
.phone-animation-container.hovered #card-left-up {
left: 5px;
top: 45px;
opacity: 1;
transform: scale(1);
transition-delay: 0s;
}
.phone-animation-container.hovered #card-right-up {
left: 280px;
top: 45px;
opacity: 1;
transform: scale(1);
transition-delay: 0.03s;
}
.phone-animation-container.hovered #card-left-down {
left: 5px;
top: 345px;
opacity: 1;
transform: scale(1);
transition-delay: 0.06s;
}
.phone-animation-container.hovered #card-right-down {
left: 275px;
top: 290px;
opacity: 1;
transform: scale(1);
transition-delay: 0.09s;
}
.phone-animation-container.hovered #icon-bestie {
left: 63px;
top: 28px;
opacity: 1;
transform: scale(1);
transition-delay: 0.05s;
}
.phone-animation-container.hovered #icon-buddy-sm {
left: 407px;
top: 268px;
opacity: 1;
transform: scale(1);
transition-delay: 0.12s;
}
.phone-animation-container.hovered #icon-still-trying {
left: 393.01px;
top: 159.01px;
opacity: 1;
transform: scale(1);
transition-delay: 0.07s;
}
.phone-animation-container.hovered #icon-reliable {
left: 104px;
top: 316px;
opacity: 1;
transform: scale(1);
transition-delay: 0.11s;
}
.phone-animation-container.hovered #icon-angel {
left: 381px;
top: 20px;
opacity: 1;
transform: scale(1);
transition-delay: 0.04s;
}
.phone-animation-container.hovered #icon-buddy {
left: 41.26px;
top: 206.26px;
opacity: 1;
transform: scale(1);
transition-delay: 0.09s;
}
.phone-animation-container.hovered #icon-still-trying-sm {
left: 115px;
top: 201px;
opacity: 1;
transform: scale(1);
transition-delay: 0.13s;
}
/* Hover rotation adjustments */
.phone-animation-container.hovered .card .element-inner {
transform: rotate(calc(var(--base-rotation, 0deg) + 2deg));
}
.phone-animation-container.hovered .icon .element-inner {
transform: rotate(calc(var(--base-rotation, 0deg) + 5deg));
}
/* Phone hover states - scale down/pop up */
.phone-animation-container.hovered .phone-blue {
opacity: 0;
transform: scale(0.85);
}
.phone-animation-container.hovered .phone-white {
opacity: 1;
visibility: visible;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
visibility 0s;
}
/* Floating Animation for hovered icons/cards */
@keyframes float-1 {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(4px, -5px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(-3px, -3px);
}
}
@keyframes float-2 {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(-3px, -4px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(2px, -2px);
}
}
.phone-animation-container.hovered .element {
animation: float-1 5s ease-in-out infinite;
}
.phone-animation-container.hovered .element:nth-child(even) {
animation: float-2 4.5s ease-in-out infinite;
}
/* ============================================
Footer Styles
============================================ */
.footer {
width: 100%;
padding: 40px 20px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
background-color: #ffffff;
flex-shrink: 0;
}
.footer-illustration {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: footerEntrance 0.6s ease-out 0.2s forwards;
}
.footer-art {
width: 220px;
height: auto;
opacity: 0.9;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-art img {
display: block;
width: 100%;
height: auto;
}
.footer-art:hover {
opacity: 1;
transform: scale(1.05);
}
.footer-content {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: #C2C2C2;
flex-wrap: wrap;
justify-content: center;
}
.footer-links {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Hide footer links on mobile (hamburger menu handles navigation) */
@media (max-width: 768px) {
.footer-links {
display: none;
}
}
@keyframes footerEntrance {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.copyright,
.footer-divider,
.footer-link {
opacity: 0;
animation: footerEntrance 0.5s ease-out forwards;
}
.footer-link {
color: #C2C2C2;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
display: inline-block;
}
/* Stagger on page load */
.copyright {
animation-delay: 0.4s;
}
.footer-links span:nth-of-type(1) {
animation-delay: 0.45s;
}
.footer-links a:nth-of-type(1) {
animation-delay: 0.5s;
}
.footer-links span:nth-of-type(2) {
animation-delay: 0.55s;
}
.footer-links a:nth-of-type(2) {
animation-delay: 0.6s;
}
.footer-links span:nth-of-type(3) {
animation-delay: 0.65s;
}
.footer-links a:nth-of-type(3) {
animation-delay: 0.7s;
}
.footer-links span:nth-of-type(4) {
animation-delay: 0.75s;
}
.footer-links a:nth-of-type(4) {
animation-delay: 0.8s;
}
.footer-link:hover {
color: #5183EB;
transform: translateY(-1px);
}
.footer-link-active {
color: #5183EB;
font-weight: 600;
}
/* ============================================
Support Page Styles
============================================ */
.support-page {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-y: auto !important;
overflow-x: hidden;
position: static !important;
height: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Force scroll on support page for all devices */
html:has(.support-page),
body.support-page {
overflow: auto !important;
overflow-y: auto !important;
position: static !important;
height: auto !important;
min-height: 100vh;
min-height: 100dvh;
}
.support-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
min-height: min-content;
}
/* On small screens, allow scrolling and top-align content */
@media (max-height: 700px) {
.support-main {
align-items: flex-start;
padding-top: 20px;
padding-bottom: 40px;
}
}
.support-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
width: 100%;
max-width: 400px;
padding: 0 20px;
box-sizing: border-box;
}
.support-header {
text-align: center;
}
.support-title {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.2;
color: #0f172a;
margin: 0 0 8px 0;
}
.support-subtitle {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: #C2C2C2;
margin: 0;
}
.support-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
position: relative;
z-index: 1;
}
.form-label {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
height: 20px;
}
.label-text {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.006em;
color: #000000;
}
.required-asterisk {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #5183EB;
}
.input-field {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 12px;
gap: 8px;
width: 100%;
height: 40px;
background: #FFFFFF;
border: 1px solid #F0F0F0;
box-shadow: 0px 1px 2px rgba(228, 229, 231, 0.25);
border-radius: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-field:focus-within {
border-color: #5183EB;
box-shadow: 0px 0px 0px 3px rgba(81, 131, 235, 0.15);
}
.input-field input,
.input-field select {
width: 100%;
height: 20px;
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #000000;
border: none;
outline: none;
background: transparent;
}
.input-field input::placeholder,
.input-field select:invalid {
color: #C2C2C2;
font-weight: 500;
}
.textarea-field textarea::placeholder {
color: #C2C2C2;
font-weight: 500;
}
.select-field select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C2C2C2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 20px;
}
.textarea-field {
height: 96px;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
padding: 8px 12px;
}
.textarea-field textarea {
width: 100%;
height: 48px;
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #000000;
border: none;
outline: none;
background: transparent;
resize: none;
}
.textarea-field textarea::placeholder {
color: #C2C2C2;
}
.char-counter {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 10px;
line-height: 16px;
letter-spacing: -0.006em;
color: #C2C2C2;
}
/* Support form submit button - extends download-btn */
.submit-btn-styled {
width: 100%;
margin-top: 24px;
background-color: #5183EB;
}
.submit-btn-styled:focus,
.submit-btn-styled:focus-visible {
outline: none;
}
.submit-btn-styled .btn-content {
color: #FFFFFF;
}
.submit-btn-styled .bg-fill {
background-color: #3A6FD8;
width: 800px;
height: 800px;
}
.submit-btn-styled:active .bg-fill,
.submit-btn-styled.pressed .bg-fill {
background-color: #2A5FC8;
}
.submit-btn-styled .border-ring {
border-color: transparent;
}
/* Support form responsive */
@media (max-width: 480px) {
.support-form {
width: 100%;
padding: 0 16px;
}
.label-text {
font-size: 14px;
}
}
/* Honeypot field - hidden from users */
.honeypot-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* Field validation error styles - inline icon */
.field-error-icon {
display: none;
width: 20px;
height: 20px;
flex-shrink: 0;
cursor: help;
position: relative;
}
.field-error-icon.visible {
display: flex;
align-items: center;
justify-content: center;
}
.field-error-icon.visible::before {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23EF4444' stroke-width='1.5'/%3E%3Cpath d='M8 4.5V8.5' stroke='%23EF4444' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='0.75' fill='%23EF4444'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Tooltip on hover */
.field-error-icon.visible::after {
content: attr(title);
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 8px;
padding: 6px 10px;
background: #1f2937;
color: #ffffff;
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 10;
}
.field-error-icon.visible:hover::after {
opacity: 1;
visibility: visible;
}
.input-error {
border-color: #EF4444 !important;
box-shadow: 0px 0px 0px 3px rgba(239, 68, 68, 0.15) !important;
}
/* Textarea bottom row with error icon and counter */
.textarea-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Success message */
.form-success {
box-sizing: border-box;
display: none;
flex-direction: column;
align-items: center;
padding: 16px;
gap: 8px;
width: 100%;
background: #E6F4F0;
border: 1px solid #9BD5C3;
border-radius: 20px;
margin-top: 16px;
opacity: 0;
transform: scale(0.95);
}
.form-success.anim-in {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-success.anim-out {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.form-anim-out {
opacity: 0 !important;
transform: translateY(-10px) !important;
pointer-events: none !important;
transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.form-anim-in {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.success-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.success-message {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-align: center;
letter-spacing: -0.02em;
color: #047854;
}
.success-description {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: -0.02em;
color: #047854;
}
/* Mobile support page styles */
@media (max-width: 480px) {
.support-title {
font-size: 20px;
}
.support-subtitle {
font-size: 14px;
}
.support-container {
gap: 20px;
padding: 0 16px;
}
.form-group {
gap: 2px;
}
}
/* ============================================
404 Error Page Styles
============================================ */
.error-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.error-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.error-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
}
.error-illustration {
width: 250px;
height: auto;
}
.error-message {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
color: #C2C2C2;
max-width: 280px;
}
/* ============================================
Legal Pages Styles (Terms, Privacy)
============================================ */
.legal-container {
max-width: 700px;
padding: 0 40px;
}
.legal-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
}
.legal-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.legal-section h2 {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.4;
color: #0f172a;
margin: 0;
}
.legal-section p {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.legal-section ul {
margin: 0;
padding-left: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.legal-section li {
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.7;
color: #4b5563;
}
.legal-section a {
color: #5183EB;
text-decoration: none;
transition: color 0.2s ease;
}
.legal-section a:hover {
color: #3A6FD8;
text-decoration: underline;
}
/* Legal page responsive */
@media (max-width: 768px) {
.legal-container {
padding: 0 20px;
}
.legal-section h2 {
font-size: 16px;
}
.legal-section p,
.legal-section li {
font-size: 13px;
}
}
/* ============================================
Responsive Styles
============================================ */
/* Desktop - Scale up phone and images */
@media (min-width: 1101px) {
.phone-animation-container {
transform: translate(-50%, -50%) scale(1.2);
}
.hero-phone {
min-height: 650px;
}
}
/* Large Tablet / Small Desktop */
@media (max-width: 1100px) {
.hero {
gap: 40px;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.85);
}
}
/* Tablet */
@media (max-width: 900px) {
.main {
padding: 30px 40px;
}
.hero {
flex-direction: column;
text-align: center;
gap: 30px;
}
.hero-title {
font-size: 32px;
}
.hero-content {
flex: 1;
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.button-wrapper {
align-items: center;
}
.hero-phone {
flex: 1;
min-height: 400px;
width: 100%;
max-width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.7);
}
}
/* Tablet / iPad Portrait */
@media (max-width: 1024px) {
.hero-title {
margin-bottom: 24px;
}
.hero-subtitle {
font-size: 16px;
margin-bottom: 32px;
max-width: 100%;
line-height: 1.5;
}
}
/* Mobile Landscape / Large Mobile */
@media (max-width: 768px) {
.header {
padding: 24px 12px 0;
}
.main {
padding: 20px 16px;
}
.hero {
gap: 20px;
}
.hero-title {
font-size: 28px;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 16px;
margin-bottom: 20px;
}
.button-wrapper {
margin-bottom: 20px;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.55);
}
.hero-phone {
min-height: 300px;
position: relative;
}
.footer {
padding: 30px 16px 24px;
gap: 16px;
}
.footer-art {
width: 154px;
}
}
/* Mobile */
@media (max-width: 480px) {
.header {
padding: 16px 10px 0;
}
.main {
padding: 16px 12px;
}
.hero {
gap: 12px;
}
.hero-title {
font-size: 20px;
margin-bottom: 12px;
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 24px;
max-width: 90%;
}
.button-wrapper {
margin-bottom: 0;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.6);
}
.hero-phone {
min-height: 300px;
}
.footer-content {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
font-size: 14px;
}
}
/* Small mobile */
@media (max-width: 375px) {
.header {
padding: 14px 8px 0;
}
.main {
padding: 12px 10px;
}
.hero-title {
font-size: 18px;
}
.hero-subtitle {
font-size: 14px;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.55);
}
.hero-phone {
min-height: 280px;
}
}
/* Extra small mobile */
@media (max-width: 320px) {
.header {
padding: 12px 6px 0;
}
.hero-title {
font-size: 16px;
}
.hero-subtitle {
font-size: 14px;
}
.phone-animation-container {
transform: translate(-50%, -50%) scale(0.5);
}
.hero-phone {
min-height: 250px;
}
.footer {
padding: 20px 10px 16px;
gap: 12px;
}
.footer-content {
font-size: 13px;
gap: 4px;
}
}
/* ============================================
Form error banner (mirrors .form-success)
============================================ */
.form-error-banner {
box-sizing: border-box;
display: none;
flex-direction: column;
align-items: center;
padding: 12px 16px;
gap: 4px;
width: 100%;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.35);
border-radius: 12px;
margin-top: 12px;
color: #B91C1C;
font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.4;
text-align: center;
opacity: 0;
transform: scale(0.97);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.form-error-banner.visible {
display: flex;
opacity: 1;
transform: scale(1);
}
/* ============================================
Reduced-motion preference
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.phone-animation-container.hovered .element {
animation: none !important;
}
}
/* ============================================
Coming Soon Badge (PRE-LAUNCH)
============================================ */
.download-btn.coming-soon {
cursor: default;
pointer-events: none;
opacity: 0.92;
}
.download-btn.coming-soon .bg-fill {
display: none;
}