/* ========================================================== IRON CODING — App Landing Page Styles Loaded *after* styles.css. Reuses its design tokens, header/nav, buttons and footer; adds the app-page system. Each page sets --app-accent / --app-accent-2 on . ========================================================== */ :root { --app-accent: #6366f1; --app-accent-2: #8b5cf6; --app-tint-04: rgba(99, 102, 241, 0.04); --app-tint-08: rgba(99, 102, 241, 0.08); --app-tint-16: rgba(99, 102, 241, 0.16); --app-tint-30: rgba(99, 102, 241, 0.30); } body.app-page { background: radial-gradient(1200px 600px at 80% -5%, var(--app-tint-08), transparent 65%), var(--bg-primary); } .app-page .gradient-text, .app-page .logo__highlight { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .app-page .section__tag { color: var(--app-accent); background: var(--app-tint-08); border-color: var(--app-tint-16); } /* ---------- Accent-aware buttons ---------- */ .app-page .btn--primary { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); box-shadow: 0 4px 20px var(--app-tint-30); } .app-page .btn--primary:hover { box-shadow: 0 10px 34px var(--app-tint-30); } .app-page .btn--outline:hover { border-color: var(--app-accent); color: var(--app-accent); background: var(--app-tint-04); } /* ---------- Google Play CTA ---------- */ .btn-play { display: inline-flex; align-items: center; gap: 14px; padding: 12px 26px 12px 22px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); color: #fff; box-shadow: 0 6px 24px var(--app-tint-30); transition: transform var(--transition-base), box-shadow var(--transition-base); position: relative; overflow: hidden; } .btn-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%); transform: translateX(-120%); transition: transform 0.7s ease; } .btn-play:hover { transform: translateY(-3px); box-shadow: 0 14px 40px var(--app-tint-30); } .btn-play:hover::after { transform: translateX(120%); } .btn-play:active { transform: translateY(-1px); } .btn-play svg { flex-shrink: 0; position: relative; z-index: 1; } .btn-play__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; position: relative; z-index: 1; } .btn-play__text small { font-size: 0.68rem; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.82; } .btn-play__text strong { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } .btn-play--outline { background: transparent; border: 1px solid var(--border-hover); color: var(--text-primary); box-shadow: none; } .btn-play--outline:hover { border-color: var(--app-accent); background: var(--app-tint-04); box-shadow: none; } /* ---------- Breadcrumb ---------- */ .breadcrumb { padding-top: calc(var(--header-height) + 28px); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; font-size: 0.82rem; color: var(--text-muted); } .breadcrumb__list a { color: var(--text-secondary); } .breadcrumb__list a:hover { color: var(--app-accent); } .breadcrumb__sep { opacity: 0.5; } .breadcrumb__list [aria-current="page"] { color: var(--text-primary); } /* ---------- App hero ---------- */ .app-hero { position: relative; padding: 40px 0 96px; overflow: hidden; } .app-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .app-hero__glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(120px); opacity: 0.5; background: var(--app-tint-30); top: -280px; right: -160px; } .app-hero__glow--2 { width: 420px; height: 420px; top: auto; right: auto; bottom: -260px; left: -140px; opacity: 0.35; } .app-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%); } .app-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; } .app-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-full); background: var(--app-tint-08); border: 1px solid var(--app-tint-16); color: var(--app-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 22px; } .app-hero__eyebrow svg { width: 15px; height: 15px; } .app-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 18px; } .app-hero__tagline { font-size: 1.12rem; line-height: 1.75; color: var(--text-secondary); max-width: 560px; margin-bottom: 26px; } .app-hero__tagline strong { color: var(--text-primary); font-weight: 600; } .app-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-card); font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-fast); } .chip svg { width: 14px; height: 14px; color: var(--app-accent); flex-shrink: 0; } .chip:hover { border-color: var(--app-tint-16); background: var(--app-tint-04); color: var(--text-primary); } .app-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; } .app-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 0.85rem; color: var(--text-muted); } .app-hero__fact { display: inline-flex; align-items: center; gap: 7px; } .app-hero__fact svg { width: 15px; height: 15px; color: #10b981; } /* Hero visual */ .app-hero__visual { position: relative; } .app-shot { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-hover); background: var(--bg-secondary); box-shadow: var(--shadow-lg), 0 0 60px var(--app-tint-16); transition: transform var(--transition-slow), box-shadow var(--transition-slow); } .app-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(10, 10, 15, 0.35)); pointer-events: none; } .app-shot:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 90px var(--app-tint-30); } .app-shot img { width: 100%; height: auto; display: block; } .app-hero__float { position: absolute; bottom: -22px; left: -18px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--radius-md); background: rgba(17, 17, 24, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-hover); box-shadow: var(--shadow-md); } .app-hero__float-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--app-tint-16); color: var(--app-accent); flex-shrink: 0; } .app-hero__float-icon svg { width: 20px; height: 20px; } .app-hero__float strong { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; } .app-hero__float span { font-size: 0.76rem; color: var(--text-muted); } /* ---------- Benefit strip ---------- */ .benefits { padding: 56px 0; background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .benefit { padding: 26px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); transition: all var(--transition-base); } .benefit:hover { transform: translateY(-4px); border-color: var(--app-tint-16); background: var(--bg-card-hover); box-shadow: var(--shadow-md); } .benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--app-tint-08); color: var(--app-accent); margin-bottom: 14px; } .benefit__icon svg { width: 24px; height: 24px; } .benefit h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .benefit p { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); } /* ---------- Feature blocks ---------- */ .app-features { padding: 104px 0; } .features__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-block { padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); transition: all var(--transition-base); } .feature-block:hover { border-color: var(--app-tint-16); background: var(--bg-card-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); } .feature-block--wide { grid-column: 1 / -1; } .feature-block__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .feature-block__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--app-tint-16), transparent); border: 1px solid var(--app-tint-16); color: var(--app-accent); flex-shrink: 0; } .feature-block__icon svg { width: 24px; height: 24px; } .feature-block h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; } .feature-block__lead { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 18px; } .feature-list { display: grid; gap: 10px; } .feature-block--wide .feature-list { grid-template-columns: repeat(2, 1fr); gap: 10px 28px; } .feature-list li { position: relative; padding-left: 26px; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); } .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 7px; border-left: 2px solid var(--app-accent); border-bottom: 2px solid var(--app-accent); transform: rotate(-45deg); } .feature-list strong { color: var(--text-primary); font-weight: 600; } /* ---------- How it works ---------- */ .app-how { padding: 104px 0; background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; } .step { position: relative; padding: 28px 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); transition: all var(--transition-base); } .step:hover { border-color: var(--app-tint-16); transform: translateY(-4px); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; } .step h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; } .step p { font-size: 0.89rem; line-height: 1.65; color: var(--text-secondary); } /* ---------- Trust / privacy band ---------- */ .app-trust { padding: 104px 0; } .trust__card { position: relative; overflow: hidden; padding: 56px; border-radius: var(--radius-xl); border: 1px solid var(--app-tint-16); background: radial-gradient(700px 320px at 12% 0%, var(--app-tint-08), transparent 70%), var(--bg-card); } .trust__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .trust__title { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; } .trust__text { font-size: 1rem; line-height: 1.8; color: var(--text-secondary); } .trust__text + .trust__text { margin-top: 14px; } .trust__points { display: grid; gap: 14px; } .trust__point { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); } .trust__point svg { width: 20px; height: 20px; color: #10b981; flex-shrink: 0; margin-top: 2px; } .trust__point strong { display: block; font-size: 0.94rem; font-weight: 600; margin-bottom: 3px; } .trust__point span { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); } /* ---------- Languages ---------- */ .langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } .lang-pill { padding: 9px 20px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-card); font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); transition: all var(--transition-fast); } .lang-pill:hover { border-color: var(--app-tint-16); color: var(--text-primary); transform: translateY(-2px); } /* ---------- FAQ ---------- */ .app-faq { padding: 104px 0; background: var(--bg-secondary); border-top: 1px solid var(--border); } .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; transition: border-color var(--transition-fast), background var(--transition-fast); } .faq__item:hover { border-color: var(--border-hover); } .faq__item.open { border-color: var(--app-tint-16); background: var(--app-tint-04); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; font-size: 1rem; font-weight: 600; text-align: left; color: var(--text-primary); transition: color var(--transition-fast); } .faq__q:hover { color: var(--app-accent); } .faq__q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--app-accent); transition: transform var(--transition-base); } .faq__item.open .faq__q svg { transform: rotate(45deg); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition-base); } .faq__item.open .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 24px 22px; font-size: 0.94rem; line-height: 1.75; color: var(--text-secondary); } /* ---------- Final CTA ---------- */ .app-cta { padding: 104px 0; } .cta-band { position: relative; overflow: hidden; padding: 72px 48px; border-radius: var(--radius-xl); text-align: center; border: 1px solid var(--app-tint-16); background: radial-gradient(600px 300px at 50% 0%, var(--app-tint-16), transparent 70%), var(--bg-secondary); } .cta-band__pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 72%); pointer-events: none; } .cta-band > *:not(.cta-band__pattern) { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; } .cta-band p { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; } .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* ---------- Related apps ---------- */ .app-related { padding: 0 0 104px; } .related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .related__card { display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; transition: all var(--transition-base); } .related__card:hover { transform: translateY(-5px); border-color: var(--border-hover); box-shadow: var(--shadow-md); } .related__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary); } .related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .related__card:hover .related__media img { transform: scale(1.06); } .related__body { padding: 18px 20px 22px; } .related__body h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 5px; } .related__body p { font-size: 0.84rem; line-height: 1.55; color: var(--text-secondary); } /* ---------- Sticky mobile install bar ---------- */ .sticky-install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: none; align-items: center; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(10, 10, 15, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform var(--transition-base); } .sticky-install.visible { transform: translateY(0); } .sticky-install__info { flex: 1; min-width: 0; } .sticky-install__info strong { display: block; font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-install__info span { font-size: 0.76rem; color: var(--text-muted); } .sticky-install .btn-play { padding: 10px 18px; gap: 10px; } .sticky-install .btn-play__text strong { font-size: 0.95rem; } .sticky-install .btn-play__text small { font-size: 0.6rem; } /* ========================================================== Responsive ========================================================== */ @media (max-width: 1024px) { .app-hero__inner { grid-template-columns: 1fr; gap: 48px; } .app-hero__tagline { max-width: none; } .benefits__grid, .steps, .related__grid { grid-template-columns: repeat(2, 1fr); } .trust__grid { grid-template-columns: 1fr; gap: 36px; } .trust__card { padding: 40px; } } @media (max-width: 768px) { .app-hero { padding: 24px 0 72px; } .app-features, .app-how, .app-trust, .app-faq, .app-cta { padding: 72px 0; } .app-related { padding: 0 0 72px; } .features__grid { grid-template-columns: 1fr; } .feature-block--wide .feature-list { grid-template-columns: 1fr; } .feature-block { padding: 26px 22px; } .app-hero__float { left: 50%; transform: translateX(-50%); bottom: -20px; white-space: nowrap; } .cta-band { padding: 48px 24px; } .trust__card { padding: 28px 22px; } .sticky-install { display: flex; } /* keep the sticky bar from covering the footer text */ .footer { padding-bottom: 96px; } .back-to-top { bottom: 92px; } } @media (max-width: 560px) { .benefits__grid, .steps, .related__grid { grid-template-columns: 1fr; } .app-hero__actions { flex-direction: column; align-items: stretch; } .app-hero__actions .btn-play, .app-hero__actions .btn { width: 100%; justify-content: center; } .cta-band__actions .btn-play, .cta-band__actions .btn { width: 100%; justify-content: center; } .sticky-install__info { display: none; } .sticky-install .btn-play { width: 100%; justify-content: center; } } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; } .btn-play::after { display: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }