/* ═══════════════════════════════════════════════════════════════ DennerTime — Design System (Web) Mapped 1:1 from iOS design tokens ═══════════════════════════════════════════════════════════════ */ /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Custom Properties ──────────────────────────────────────── */ :root { /* Brand */ --navy: #0D1A2A; --yellow: #F8BA00; --cyan: #00B0B9; --orange: #FF3F00; --pink: #FF0043; /* Rotating accent — set per page load by the inline script in . These are the fallbacks if the script doesn't run (defaults to red). */ --accent: var(--pink); --accent-text: #FF0043; --accent-badge: #E00038; --accent-tint: rgba(255, 0, 67, 0.10); /* Step-number colours — shuffled per load by the inline script. Fallbacks here. */ --step-1: #FF0043; --step-2: #00B0B9; --step-3: #F8BA00; /* Surfaces */ --page-bg: #F5F5F0; --card-bg: #FEFEFE; --subtle-bg: #F3F3F0; --border: #D5D4D0; /* Text */ --text-primary: #0D1A2A; --text-secondary: #6F6D64; --text-tertiary: #ACAAA3; /* Semantic — these flip in dark mode (see @media prefers-color-scheme at end) */ --heading: var(--navy); /* headings & navy body text */ --band-bg: var(--navy); /* inverted section bands (narrative, how-it-works) */ --btn-bg: var(--navy); /* primary button / CTA background */ --btn-text: #FFFFFF; /* primary button / CTA text */ /* Spacing (from DTSpacing) */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 20px; --sp-xl: 24px; --sp-xxl: 32px; --sp-section: 48px; --page-gutter: 24px; /* Typography */ --font: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --display-xl: 800 clamp(2.4rem, 5vw, 3.8rem) / 1.05 var(--font); --display-l: 800 clamp(1.8rem, 4vw, 2.6rem) / 1.1 var(--font); --title: 700 clamp(1.4rem, 3vw, 1.8rem) / 1.2 var(--font); --section: 600 1rem / 1.4 var(--font); --body: 400 1rem / 1.6 var(--font); --meta: 400 0.875rem / 1.5 var(--font); --caption: 600 0.8125rem / 1.4 var(--font); /* Misc */ --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 9999px; --max-width: 1200px; --content-width: 680px; } /* ── Base ───────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font: var(--body); color: var(--text-secondary); background: var(--page-bg); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: var(--heading); letter-spacing: -0.02em; } a { color: var(--heading); text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ── Utility ────────────────────────────────────────────────── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .text-center { text-align: center; } .text-navy { color: var(--heading); } .text-cyan { color: var(--cyan); } /* ── Nav ────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--sp-md) 0; background: rgba(245, 245, 240, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transform: translateY(-100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease, border-color 0.3s ease; pointer-events: none; } .nav.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav.scrolled { border-bottom-color: var(--border); } .nav .container { display: flex; align-items: center; justify-content: space-between; } .nav-logo { height: 28px; width: auto; mix-blend-mode: multiply; } .nav-cta { font: var(--caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--btn-text); background: var(--btn-bg); padding: var(--sp-xs) var(--sp-lg); border-radius: var(--radius-pill); transition: opacity 0.2s ease; } .nav-cta:hover { opacity: 0.85; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--page-gutter) 80px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(248, 186, 0, 0.06) 0%, rgba(0, 176, 185, 0.06) 40%, rgba(255, 63, 0, 0.04) 70%, transparent 100%); pointer-events: none; } .hero-logo { width: clamp(200px, 40vw, 320px); height: auto; margin-bottom: 48px; mix-blend-mode: multiply; } .hero-badge { font: var(--caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-badge); background: var(--accent-tint); padding: var(--sp-xxs) var(--sp-md); border-radius: var(--radius-pill); margin-bottom: 40px; display: inline-block; } .hero h1 { font: var(--display-xl); max-width: 700px; margin-bottom: 40px; } .hero h1 em { font-style: italic; color: var(--accent-text); } .hero-sub { font-family: var(--font); font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 400; line-height: 1.5; color: var(--text-secondary); max-width: 520px; margin-bottom: var(--sp-xxl); } .hero-actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; justify-content: center; } .btn-primary { font: var(--section); color: var(--btn-text); background: var(--btn-bg); padding: var(--sp-sm) var(--sp-xxl); border-radius: var(--radius-pill); border: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-xs); } .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); } .btn-secondary { font: var(--section); color: var(--heading); background: var(--subtle-bg); padding: var(--sp-sm) var(--sp-xxl); border-radius: var(--radius-pill); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-xs); } .btn-secondary:hover { background: var(--border); } /* ── App Mockup ────────────────────────────────────────────── */ .hero-phone { margin-top: 84px; position: relative; z-index: 1; width: 100%; max-width: 900px; } .app-mockup-img { width: 100%; height: auto; display: block; } /* ── Narrative ─────────────────────────────────────────────── */ .narrative { padding: 100px 0; background: var(--band-bg); color: white; } .narrative .container { max-width: var(--content-width); text-align: center; } .narrative h2 { font: var(--display-l); color: white; margin-bottom: var(--sp-xl); } .narrative-body { font-size: 1.2rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); } /* ── Features ──────────────────────────────────────────────── */ .features { padding: 120px 0; } .features-header { text-align: center; max-width: var(--content-width); margin: 0 auto var(--sp-section); } .features-header h2 { font: var(--display-l); margin-bottom: var(--sp-md); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .feature-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: var(--sp-xxl); border: 1px solid var(--border); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(13, 26, 42, 0.08); } .feature-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: var(--sp-lg); } .feature-icon.yellow { background: rgba(248, 186, 0, 0.15); color: #C68F00; } .feature-icon.cyan { background: rgba(0, 176, 185, 0.15); color: var(--cyan); } .feature-icon.orange { background: rgba(255, 63, 0, 0.15); color: var(--orange); } .feature-icon.pink { background: rgba(255, 0, 67, 0.15); color: var(--pink); } .feature-card h3 { font: var(--title); margin-bottom: var(--sp-xs); } .feature-card p { font: var(--body); color: var(--text-secondary); } /* ── How it works ──────────────────────────────────────────── */ .how-it-works { padding: 120px 0; background: var(--band-bg); color: white; } .how-it-works h2 { font: var(--display-l); color: white; text-align: center; margin-bottom: 64px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xxl); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-gutter); } .step { text-align: center; } .step-number { font: var(--display-xl); margin-bottom: var(--sp-md); } .step:nth-child(1) .step-number { color: var(--step-1); } .step:nth-child(2) .step-number { color: var(--step-2); } .step:nth-child(3) .step-number { color: var(--step-3); } .step h3 { font: var(--title); color: white; margin-bottom: var(--sp-xs); } .step p { font: var(--body); color: rgba(255, 255, 255, 0.6); } /* ── Story / About ─────────────────────────────────────────── */ .story { padding: 120px 0; } .story .container { max-width: var(--content-width); text-align: center; } .story h2 { font: var(--display-l); margin-bottom: var(--sp-xl); } .story em { font-style: italic; color: var(--accent-badge); } .story p { font-size: 1.125rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--sp-lg); } .story p:last-of-type { margin-bottom: 0; } /* ── Beta signup ───────────────────────────────────────────── */ .beta { padding: 120px 0; background: linear-gradient(135deg, rgba(0, 176, 185, 0.06) 0%, rgba(248, 186, 0, 0.04) 100%); } .beta .container { max-width: var(--content-width); text-align: center; } .beta h2 { font: var(--display-l); margin-bottom: var(--sp-md); } .beta p { font: var(--body); color: var(--text-secondary); margin-bottom: var(--sp-xxl); font-size: 1.125rem; } .beta-form { display: flex; gap: var(--sp-sm); max-width: 480px; margin: 0 auto; } .beta-form input { flex: 1; font: var(--body); padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); outline: none; transition: border-color 0.2s ease; } .beta-form input:focus { border-color: var(--accent); } .beta-form button { font: var(--section); color: var(--btn-text); background: var(--btn-bg); padding: var(--sp-sm) var(--sp-xl); border-radius: var(--radius-pill); border: none; cursor: pointer; white-space: nowrap; transition: opacity 0.2s ease; } .beta-form button:hover { opacity: 0.85; } .beta-success { display: none; font: var(--body); color: var(--heading); margin-top: var(--sp-md); } .beta-success.show { display: block; } /* ── Footer ────────────────────────────────────────────────── */ .footer { padding: 48px 0; border-top: 1px solid var(--border); } .footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); } .footer-logo { height: 24px; width: auto; opacity: 0.5; mix-blend-mode: multiply; } .footer-links { display: flex; gap: var(--sp-xl); list-style: none; } .footer-links a { font: var(--meta); color: var(--text-tertiary); transition: color 0.2s ease; } .footer-links a:hover { color: var(--heading); } .footer-copy { font: var(--meta); color: var(--text-tertiary); width: 100%; text-align: center; margin-top: var(--sp-md); } /* ── Scroll animations ─────────────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 768px) { .features-grid, .steps { grid-template-columns: 1fr; max-width: 480px; } .hero { padding: 100px var(--page-gutter) 60px; min-height: auto; } .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .hero-phone { margin-top: 64px; } .hero-logo { width: clamp(180px, 50vw, 260px); } .beta-form { flex-direction: column; } .footer .container { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } } /* ── Dark mode (auto, follows OS / browser setting) ──────────── Surfaces, text and brand-anchor tokens flip to the app's dark palette. The four accent colours stay vivid (handled by the inline script, which uses the vivid hues for text in dark mode). */ @media (prefers-color-scheme: dark) { :root { --page-bg: #060C16; --card-bg: #0D1829; --subtle-bg: #0F1E33; --border: #1C2E48; --text-primary: #EDF2FA; --text-secondary: #9BADC8; --text-tertiary: #607898; --heading: #E8EEF8; /* navy text → near-white */ --band-bg: #0F1E33; /* inverted bands → elevated dark surface */ --btn-bg: #E8EEF8; /* primary CTA → light pill */ --btn-text: #0D1A2A; /* …with navy label */ } /* Sticky nav blur surface */ .nav { background: rgba(6, 12, 22, 0.85); } /* Logo is a solid navy wordmark — invert it to white on dark */ .hero-logo, .nav-logo, .footer-logo { mix-blend-mode: normal; filter: brightness(0) invert(1); } }