24a1a7b072
Replace non-existent "tunnel.circle" SF Symbol with "circle.dashed" for the tunnel vote animation. Add missing translations for haptic feedback strings and "Close" across all 6 languages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
843 lines
30 KiB
HTML
843 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>reflect — a quiet space for your inner world</title>
|
|
<meta name="description" content="Track your feelings, discover patterns, and understand yourself with reflect — a beautifully designed mood journal for iOS.">
|
|
<meta name="theme-color" content="#f5f1eb">
|
|
<meta property="og:title" content="reflect — a quiet space for your inner world">
|
|
<meta property="og:description" content="A beautifully designed mood journal for iOS. Track your feelings, discover patterns, understand yourself.">
|
|
<meta property="og:type" content="website">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ────────────────────────────────────
|
|
VARIABLES
|
|
──────────────────────────────────── */
|
|
:root {
|
|
--bg: #f5f1eb;
|
|
--bg-alt: #eae5dd;
|
|
--text: #1a1816;
|
|
--text-muted: #887f75;
|
|
--accent: #3d5a4c;
|
|
--accent-hover: #2c4639;
|
|
--warm: #c4956b;
|
|
--dark: #141210;
|
|
--dark-muted: rgba(245,241,235,0.55);
|
|
--serif: 'Cormorant Garamond', 'Georgia', serif;
|
|
--sans: 'Outfit', 'Helvetica Neue', sans-serif;
|
|
--gap: clamp(100px, 12vw, 180px);
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
RESET
|
|
──────────────────────────────────── */
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
body {
|
|
font-family: var(--sans);
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
overflow-x: hidden;
|
|
}
|
|
img { display: block; max-width: 100%; height: auto; }
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* ────────────────────────────────────
|
|
LAYOUT
|
|
──────────────────────────────────── */
|
|
.container {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding: 0 clamp(24px, 5vw, 56px);
|
|
}
|
|
section { padding: var(--gap) 0; }
|
|
|
|
/* ────────────────────────────────────
|
|
TYPOGRAPHY
|
|
──────────────────────────────────── */
|
|
h1, h2 {
|
|
font-family: var(--serif);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 1.25;
|
|
color: var(--text);
|
|
}
|
|
.label {
|
|
font-family: var(--sans);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.label::before {
|
|
content: '';
|
|
width: 28px;
|
|
height: 1px;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
BUTTON
|
|
──────────────────────────────────── */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 15px 44px;
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
font-family: var(--sans);
|
|
font-weight: 500;
|
|
font-size: 0.92rem;
|
|
letter-spacing: 0.05em;
|
|
border-radius: 100px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
@media (hover: hover) {
|
|
.btn:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 14px 40px rgba(61,90,76,0.22);
|
|
}
|
|
}
|
|
.btn:active { transform: translateY(0); box-shadow: none; }
|
|
|
|
/* ────────────────────────────────────
|
|
PHONE FRAME (phone.png overlay)
|
|
──────────────────────────────────── */
|
|
.phone {
|
|
position: relative;
|
|
display: inline-block;
|
|
filter:
|
|
drop-shadow(0 24px 64px rgba(0,0,0,0.2))
|
|
drop-shadow(0 8px 20px rgba(0,0,0,0.06));
|
|
}
|
|
.phone-frame {
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.phone-screen {
|
|
position: absolute;
|
|
top: 2.6%;
|
|
left: 4.4%;
|
|
width: 91.2%;
|
|
height: 95.6%;
|
|
border-radius: clamp(22px, 10%, 42px);
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
WATCH FRAME (watch.png overlay)
|
|
──────────────────────────────────── */
|
|
.watch {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
filter:
|
|
drop-shadow(0 16px 40px rgba(0,0,0,0.14))
|
|
drop-shadow(0 6px 14px rgba(0,0,0,0.05));
|
|
}
|
|
.watch-frame {
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.watch-screen {
|
|
position: absolute;
|
|
top: 23.2%;
|
|
left: 14.8%;
|
|
width: 70.3%;
|
|
height: 53.5%;
|
|
border-radius: 14.5%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
background: #000;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
NAVIGATION
|
|
──────────────────────────────────── */
|
|
.nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
padding: 22px 0;
|
|
transition: background 0.4s, padding 0.4s, box-shadow 0.4s;
|
|
}
|
|
.nav.scrolled {
|
|
background: rgba(245,241,235,0.92);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
padding: 14px 0;
|
|
box-shadow: 0 1px 0 rgba(26,24,22,0.06);
|
|
}
|
|
.nav .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.nav-logo {
|
|
font-family: var(--serif);
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
font-size: 1.55rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.nav .btn { padding: 10px 30px; font-size: 0.82rem; }
|
|
|
|
/* ────────────────────────────────────
|
|
HERO
|
|
──────────────────────────────────── */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 160px 24px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-watermark {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -62%);
|
|
font-family: var(--serif);
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
font-size: clamp(6rem, 14vw, 17rem);
|
|
letter-spacing: 0.06em;
|
|
color: transparent;
|
|
-webkit-text-stroke: 1.2px rgba(26,24,22,0.045);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
will-change: transform;
|
|
}
|
|
.hero-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
.hero-orb--sage {
|
|
width: clamp(280px, 38vw, 550px);
|
|
height: clamp(280px, 38vw, 550px);
|
|
background: radial-gradient(circle, rgba(141,167,143,0.13), transparent 70%);
|
|
filter: blur(80px);
|
|
top: 10%;
|
|
right: -8%;
|
|
}
|
|
.hero-orb--warm {
|
|
width: clamp(220px, 28vw, 420px);
|
|
height: clamp(220px, 28vw, 420px);
|
|
background: radial-gradient(circle, rgba(196,149,107,0.1), transparent 70%);
|
|
filter: blur(60px);
|
|
bottom: 15%;
|
|
left: -6%;
|
|
}
|
|
.hero-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 740px;
|
|
margin: 0 auto;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
|
|
font-weight: 300;
|
|
margin-bottom: 24px;
|
|
line-height: 1.15;
|
|
}
|
|
.hero-sub {
|
|
color: var(--text-muted);
|
|
font-size: clamp(0.92rem, 1.2vw, 1.08rem);
|
|
max-width: 540px;
|
|
margin: 0 auto 32px;
|
|
line-height: 1.7;
|
|
}
|
|
.hero-features {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 36px;
|
|
}
|
|
.hero-pill {
|
|
padding: 8px 20px;
|
|
background: rgba(61,90,76,0.07);
|
|
border: 1px solid rgba(61,90,76,0.1);
|
|
border-radius: 100px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--accent);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.hero-phone-wrap {
|
|
width: min(300px, 68vw);
|
|
margin: 56px auto 0;
|
|
}
|
|
.hero-phone-wrap .phone { animation: float 7s ease-in-out infinite; }
|
|
|
|
/* ────────────────────────────────────
|
|
EDITORIAL STATEMENT
|
|
──────────────────────────────────── */
|
|
.editorial {
|
|
text-align: center;
|
|
padding: clamp(60px, 8vw, 120px) 24px;
|
|
}
|
|
.editorial-rule {
|
|
width: 44px;
|
|
height: 1px;
|
|
background: var(--accent);
|
|
opacity: 0.25;
|
|
margin: 0 auto 48px;
|
|
}
|
|
.editorial p {
|
|
font-family: var(--serif);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: clamp(1.3rem, 2.8vw, 2.1rem);
|
|
line-height: 1.5;
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
FEATURE SPREAD
|
|
──────────────────────────────────── */
|
|
.spread {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(40px, 7vw, 96px);
|
|
}
|
|
.spread-img { flex: 0 0 auto; }
|
|
.spread-img .phone { width: min(300px, 58vw); }
|
|
.spread-body { flex: 1; }
|
|
.spread-body h2 {
|
|
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
|
|
margin-bottom: 18px;
|
|
}
|
|
.spread-body p {
|
|
color: var(--text-muted);
|
|
font-size: clamp(0.88rem, 1vw, 0.98rem);
|
|
line-height: 1.8;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
DARK SECTION — UNDERSTAND
|
|
──────────────────────────────────── */
|
|
.dark-section {
|
|
background: var(--dark);
|
|
background-image: radial-gradient(ellipse at 50% 0%, rgba(61,90,76,0.1), transparent 50%);
|
|
color: var(--bg);
|
|
text-align: center;
|
|
}
|
|
.dark-section .label { color: var(--warm); }
|
|
.dark-section .label::before { background: var(--warm); }
|
|
.dark-section h2 {
|
|
color: var(--bg);
|
|
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
|
|
margin-bottom: 18px;
|
|
}
|
|
.dark-section .dark-body {
|
|
color: var(--dark-muted);
|
|
max-width: 440px;
|
|
margin: 0 auto 56px;
|
|
font-size: clamp(0.88rem, 1vw, 0.98rem);
|
|
line-height: 1.75;
|
|
}
|
|
.dark-section .phone {
|
|
width: min(320px, 68vw);
|
|
margin: 0 auto;
|
|
filter:
|
|
drop-shadow(0 0 100px rgba(61,90,76,0.08))
|
|
drop-shadow(0 36px 80px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
DUALITY — LIGHT & DARK
|
|
──────────────────────────────────── */
|
|
.duality { text-align: center; }
|
|
.duality h2 {
|
|
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
|
|
margin-bottom: 18px;
|
|
}
|
|
.duality-sub {
|
|
color: var(--text-muted);
|
|
max-width: 420px;
|
|
margin: 0 auto 56px;
|
|
font-size: clamp(0.88rem, 1vw, 0.98rem);
|
|
line-height: 1.7;
|
|
}
|
|
.duality-cards {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.duality-card {
|
|
width: min(260px, 38vw);
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
box-shadow: 0 24px 68px -8px rgba(0,0,0,0.15);
|
|
transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
|
|
}
|
|
.duality-card img { display: block; width: 100%; }
|
|
.duality-card:first-child {
|
|
transform: rotate(-5deg) translateX(16px);
|
|
z-index: 2;
|
|
}
|
|
.duality-card:last-child {
|
|
transform: rotate(5deg) translateX(-16px);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
EVERYWHERE — BENTO
|
|
──────────────────────────────────── */
|
|
.everywhere { text-align: center; }
|
|
.everywhere h2 {
|
|
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
|
|
margin-bottom: 18px;
|
|
}
|
|
.everywhere-sub {
|
|
color: var(--text-muted);
|
|
max-width: 420px;
|
|
margin: 0 auto 52px;
|
|
font-size: clamp(0.88rem, 1vw, 0.98rem);
|
|
line-height: 1.7;
|
|
}
|
|
.bento {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: 20px;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.bento-item {
|
|
background: var(--bg-alt);
|
|
border-radius: 24px;
|
|
padding: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bento-item > img { border-radius: 16px; width: 100%; }
|
|
.bento-item--watch { background: transparent; padding: 0; }
|
|
.bento-item--watch .watch { width: 100%; }
|
|
|
|
/* ────────────────────────────────────
|
|
SUPPORT
|
|
──────────────────────────────────── */
|
|
.support { text-align: center; }
|
|
.support h2 {
|
|
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
|
|
margin-bottom: 18px;
|
|
}
|
|
.support-sub {
|
|
color: var(--text-muted);
|
|
max-width: 480px;
|
|
margin: 0 auto 52px;
|
|
font-size: clamp(0.88rem, 1vw, 0.98rem);
|
|
line-height: 1.7;
|
|
}
|
|
.support-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
max-width: 700px;
|
|
margin: 0 auto 56px;
|
|
text-align: left;
|
|
}
|
|
.support-card {
|
|
background: var(--bg-alt);
|
|
border-radius: 20px;
|
|
padding: 28px 28px 24px;
|
|
}
|
|
.support-card h3 {
|
|
font-family: var(--sans);
|
|
font-weight: 600;
|
|
font-size: 0.92rem;
|
|
margin-bottom: 8px;
|
|
color: var(--text);
|
|
}
|
|
.support-card p {
|
|
color: var(--text-muted);
|
|
font-size: 0.86rem;
|
|
line-height: 1.7;
|
|
}
|
|
.support-contact {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 36px;
|
|
background: var(--bg-alt);
|
|
border-radius: 100px;
|
|
font-size: 0.88rem;
|
|
font-weight: 500;
|
|
color: var(--accent);
|
|
transition: background 0.3s ease;
|
|
}
|
|
.support-contact:hover { background: #ddd8cf; }
|
|
@media (max-width: 600px) {
|
|
.support-grid { grid-template-columns: 1fr; max-width: 400px; }
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
CTA
|
|
──────────────────────────────────── */
|
|
.cta {
|
|
text-align: center;
|
|
padding-top: var(--gap);
|
|
padding-bottom: clamp(80px, 10vw, 140px);
|
|
}
|
|
.cta h2 {
|
|
font-weight: 300;
|
|
font-size: clamp(1.8rem, 4vw, 3.2rem);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
FOOTER
|
|
──────────────────────────────────── */
|
|
footer {
|
|
text-align: center;
|
|
padding: 44px 24px;
|
|
color: var(--text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
.f-logo {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 1.15rem;
|
|
color: var(--text);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
GRAIN OVERLAY
|
|
──────────────────────────────────── */
|
|
.grain {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.026;
|
|
}
|
|
|
|
/* ────────────────────────────────────
|
|
ANIMATIONS
|
|
──────────────────────────────────── */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition:
|
|
opacity 0.9s cubic-bezier(.25,.46,.45,.94),
|
|
transform 0.9s cubic-bezier(.25,.46,.45,.94);
|
|
}
|
|
.reveal.pop {
|
|
transform: translateY(28px) scale(0.97);
|
|
}
|
|
.reveal.vis {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.reveal.pop.vis {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.d1 { transition-delay: .12s; }
|
|
.d2 { transition-delay: .24s; }
|
|
.d3 { transition-delay: .36s; }
|
|
|
|
/* ────────────────────────────────────
|
|
RESPONSIVE
|
|
──────────────────────────────────── */
|
|
@media (max-width: 880px) {
|
|
.spread {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.spread-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.spread-body p { max-width: 480px; }
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.hero-phone-wrap { width: min(260px, 72vw); }
|
|
.duality-card {
|
|
width: min(190px, 44vw);
|
|
border-radius: 20px;
|
|
}
|
|
.duality-card:first-child { transform: rotate(-3deg) translateX(10px); }
|
|
.duality-card:last-child { transform: rotate(3deg) translateX(-10px); }
|
|
.bento { grid-template-columns: 1fr; max-width: 340px; }
|
|
.phone-screen { border-radius: clamp(20px, 9%, 36px); }
|
|
.bento-item { padding: 20px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.reveal { opacity: 1; transform: none; transition: none; }
|
|
.hero-phone-wrap .phone { animation: none; }
|
|
html { scroll-behavior: auto; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Grain texture -->
|
|
<svg class="grain" aria-hidden="true">
|
|
<filter id="grain-noise">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
|
|
</filter>
|
|
<rect width="100%" height="100%" filter="url(#grain-noise)"/>
|
|
</svg>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav" role="navigation" aria-label="Main">
|
|
<div class="container">
|
|
<a href="#" class="nav-logo">reflect</a>
|
|
<div style="display:flex;align-items:center;gap:28px;">
|
|
<a href="#support" style="font-size:0.88rem;font-weight:500;color:var(--text-muted);transition:color 0.3s;">support</a>
|
|
<a href="https://example.com/reflect-download" class="btn">download</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
HERO
|
|
════════════════════════════════════ -->
|
|
<section class="hero" aria-label="Introduction">
|
|
<span class="hero-watermark" aria-hidden="true">reflect</span>
|
|
<div class="hero-orb hero-orb--sage" aria-hidden="true"></div>
|
|
<div class="hero-orb hero-orb--warm" aria-hidden="true"></div>
|
|
|
|
<div class="hero-inner">
|
|
<h1 class="reveal">a quiet space for<br>your inner world</h1>
|
|
<p class="hero-sub reveal d1">A beautifully designed mood journal for iOS. Check in each day, watch patterns emerge over time, and let AI-powered insights illuminate your emotional journey.</p>
|
|
<div class="hero-features reveal d2">
|
|
<span class="hero-pill">daily check-ins</span>
|
|
<span class="hero-pill">mood patterns</span>
|
|
<span class="hero-pill">AI insights</span>
|
|
<span class="hero-pill">Apple Watch</span>
|
|
<span class="hero-pill">widgets</span>
|
|
</div>
|
|
<a href="https://example.com/reflect-download" class="btn reveal d2">download</a>
|
|
<div class="hero-phone-wrap reveal d3 pop">
|
|
<div class="phone">
|
|
<img class="phone-screen"
|
|
src="../screens/Simulator Screenshot - iPhone 17 Pro - 2026-02-15 at 10.45.32.png"
|
|
alt="reflect app showing a colorful monthly mood grid with emoji entries"
|
|
loading="eager"
|
|
>
|
|
<img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="eager">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
EDITORIAL STATEMENT
|
|
════════════════════════════════════ -->
|
|
<div class="editorial">
|
|
<div class="editorial-rule reveal" aria-hidden="true"></div>
|
|
<p class="reveal d1">Every day tells a story worth remembering.</p>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
FEATURE — YOUR JOURNEY
|
|
════════════════════════════════════ -->
|
|
<section aria-label="Track your journey">
|
|
<div class="container">
|
|
<div class="spread">
|
|
<div class="spread-img reveal pop">
|
|
<div class="phone">
|
|
<img class="phone-screen"
|
|
src="../screens/Simulator Screenshot - iPhone 17 Pro - 2026-02-15 at 10.45.03.png"
|
|
alt="Daily mood timeline showing entries for each day with mood colors"
|
|
loading="lazy"
|
|
>
|
|
<img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="lazy">
|
|
</div>
|
|
</div>
|
|
<div class="spread-body">
|
|
<span class="label reveal">your journey</span>
|
|
<h2 class="reveal d1">check in. look back.<br>see the whole picture.</h2>
|
|
<p class="reveal d2">A simple daily check-in captures how you're feeling — building a colorful mosaic of your emotional life. Days become weeks. Weeks become months. Patterns you'd never notice begin to emerge.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
DARK SECTION — UNDERSTAND
|
|
════════════════════════════════════ -->
|
|
<section class="dark-section" aria-label="AI-powered insights">
|
|
<div class="container">
|
|
<span class="label reveal">understand</span>
|
|
<h2 class="reveal d1">your personal reflection</h2>
|
|
<p class="dark-body reveal d2">Powered by Apple Intelligence, reflect offers thoughtful observations about your emotional journey — helping you see what the numbers alone can't show.</p>
|
|
<div class="reveal d3 pop">
|
|
<div class="phone">
|
|
<img class="phone-screen"
|
|
src="../screens/insights_dark.png"
|
|
alt="AI-powered mood insights showing weekly and yearly patterns"
|
|
loading="lazy"
|
|
>
|
|
<img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
DUALITY — LIGHT & DARK
|
|
════════════════════════════════════ -->
|
|
<section class="duality" aria-label="Light and dark modes">
|
|
<div class="container">
|
|
<h2 class="reveal">designed for every moment</h2>
|
|
<p class="duality-sub reveal d1">Whether you're winding down at night or greeting the morning, reflect adapts to you.</p>
|
|
<div class="duality-cards reveal d2">
|
|
<div class="duality-card">
|
|
<img src="../screens/voting_light_large.png" alt="Mood check-in in light mode" loading="lazy">
|
|
</div>
|
|
<div class="duality-card">
|
|
<img src="../screens/voting_dark_large.png" alt="Mood check-in in dark mode" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
EVERYWHERE — BENTO
|
|
════════════════════════════════════ -->
|
|
<section class="everywhere" aria-label="Available everywhere">
|
|
<div class="container">
|
|
<span class="label reveal">everywhere</span>
|
|
<h2 class="reveal d1">your companion, always</h2>
|
|
<p class="everywhere-sub reveal d1">iPhone. Apple Watch. Widgets. Live Activities.<br>reflect is always within reach.</p>
|
|
<div class="bento reveal d2">
|
|
<div class="bento-item">
|
|
<img src="../screens/WidgetExports/timeline_light_large_logged.png" alt="Home screen widget showing a 10-day mood timeline" loading="lazy">
|
|
</div>
|
|
<div class="bento-item bento-item--watch">
|
|
<div class="watch">
|
|
<img class="watch-screen" src="../screens/watch_voting_light.png" alt="reflect mood check-in on Apple Watch" loading="lazy">
|
|
<img class="watch-frame" src="../screens/watch.png" alt="" aria-hidden="true" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
SUPPORT
|
|
════════════════════════════════════ -->
|
|
<section id="support" class="support" aria-label="Support">
|
|
<div class="container">
|
|
<span class="label reveal">support</span>
|
|
<h2 class="reveal d1">we're here to help</h2>
|
|
<p class="support-sub reveal d1">Have a question or need assistance? Check the common topics below, or reach out directly.</p>
|
|
<div class="support-grid">
|
|
<div class="support-card reveal d1">
|
|
<h3>Getting Started</h3>
|
|
<p>Download reflect from the App Store, open the app, and tap to log your first mood. It only takes a second.</p>
|
|
</div>
|
|
<div class="support-card reveal d1">
|
|
<h3>Syncing Across Devices</h3>
|
|
<p>reflect syncs via iCloud. Make sure you're signed in to the same Apple Account on all your devices.</p>
|
|
</div>
|
|
<div class="support-card reveal d2">
|
|
<h3>Subscriptions & Billing</h3>
|
|
<p>Manage your subscription in Settings > Apple Account > Subscriptions on your iPhone. Changes take effect at the next billing cycle.</p>
|
|
</div>
|
|
<div class="support-card reveal d2">
|
|
<h3>Privacy & Data</h3>
|
|
<p>Your mood data stays on your devices and in your personal iCloud. We never see or sell your data. <a href="privacy.html" style="color: var(--accent); text-decoration: underline;">Read our privacy policy.</a></p>
|
|
</div>
|
|
</div>
|
|
<a href="mailto:support@88oakapps.com" class="support-contact reveal d3">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
|
support@88oakapps.com
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════
|
|
CTA
|
|
════════════════════════════════════ -->
|
|
<section class="cta" aria-label="Download">
|
|
<div class="container">
|
|
<h2 class="reveal">begin reflecting</h2>
|
|
<a href="https://example.com/reflect-download" class="btn reveal d1">download</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="f-logo">reflect</div>
|
|
<p style="margin-bottom:8px;">© 2026 reflect. all rights reserved.</p>
|
|
<p><a href="#support" style="color:var(--text-muted);text-decoration:underline;margin-right:16px;">support</a><a href="privacy.html" style="color:var(--text-muted);text-decoration:underline;margin-right:16px;">privacy</a><a href="eula.html" style="color:var(--text-muted);text-decoration:underline;">terms</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
/* Scroll-reveal observer */
|
|
const obs = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((e) => {
|
|
if (e.isIntersecting) {
|
|
e.target.classList.add('vis');
|
|
obs.unobserve(e.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.12, rootMargin: '0px 0px -30px 0px' }
|
|
);
|
|
document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
|
|
|
|
/* Nav scroll effect */
|
|
const nav = document.querySelector('.nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 50);
|
|
}, { passive: true });
|
|
|
|
/* Hero watermark parallax */
|
|
const wm = document.querySelector('.hero-watermark');
|
|
const vh = window.innerHeight;
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY < vh && wm) {
|
|
wm.style.transform =
|
|
'translate(-50%, calc(-62% + ' + (window.scrollY * 0.1) + 'px))';
|
|
}
|
|
}, { passive: true });
|
|
</script>
|
|
</body>
|
|
</html>
|