Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>reckr — the task app that lets you close your laptop at 6 pm</title> | |
| <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=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --surface: oklch(0.97 0.006 80); | |
| --ink: oklch(0.16 0.012 55); | |
| --muted: oklch(0.55 0.010 55); | |
| --line: oklch(0.86 0.008 80); | |
| --accent: oklch(0.46 0.07 155); | |
| --fs-xs: 0.8rem; | |
| --fs-sm: 1rem; | |
| --fs-md: 1.25rem; | |
| --fs-lg: 1.563rem; | |
| --fs-xl: 1.953rem; | |
| --measure: 58ch; | |
| } | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| background-color: var(--surface); | |
| color: var(--ink); | |
| font-size: var(--fs-sm); | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ─── NAV ─── */ | |
| nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| background-color: var(--surface); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .nav-inner { | |
| max-width: 46rem; | |
| margin: 0 auto; | |
| padding: 1.25rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: var(--fs-md); | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| color: var(--ink); | |
| } | |
| .nav-cta { | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| color: var(--ink); | |
| text-decoration: none; | |
| border-bottom: 1px solid transparent; | |
| transition: border-color 0.2s ease; | |
| padding-bottom: 2px; | |
| } | |
| .nav-cta:hover { | |
| border-bottom-color: var(--ink); | |
| } | |
| .nav-cta:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 4px; | |
| border-radius: 1px; | |
| } | |
| /* ─── MAIN CONTAINER ─── */ | |
| main { | |
| max-width: 46rem; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| /* ─── HERO ─── */ | |
| .hero { | |
| padding: 8rem 0 6rem; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 5vw, 3.25rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| max-width: var(--measure); | |
| } | |
| .hero-sub { | |
| margin-top: 1.75rem; | |
| font-size: var(--fs-md); | |
| font-weight: 300; | |
| color: var(--muted); | |
| max-width: 48ch; | |
| line-height: 1.55; | |
| } | |
| /* ─── RULES ─── */ | |
| hr { | |
| border: none; | |
| border-top: 1px solid var(--line); | |
| } | |
| /* ─── MANIFESTO ─── */ | |
| .manifesto { | |
| padding: 4rem 0; | |
| } | |
| .manifesto p { | |
| font-size: var(--fs-md); | |
| font-weight: 300; | |
| line-height: 1.65; | |
| max-width: 52ch; | |
| } | |
| /* ─── NUMBERED SECTIONS ─── */ | |
| .numbered-section { | |
| display: grid; | |
| grid-template-columns: 5.5rem 1fr; | |
| gap: 1.5rem; | |
| padding: 3.5rem 0; | |
| align-items: start; | |
| } | |
| .section-number { | |
| font-size: 4.5rem; | |
| font-weight: 200; | |
| color: var(--accent); | |
| line-height: 0.82; | |
| text-align: right; | |
| padding-top: 0.15rem; | |
| user-select: none; | |
| } | |
| .section-content h2 { | |
| font-size: var(--fs-lg); | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| margin-bottom: 0.85rem; | |
| } | |
| .section-content p { | |
| font-weight: 300; | |
| color: var(--muted); | |
| max-width: 50ch; | |
| line-height: 1.65; | |
| } | |
| /* ─── CTA SECTION ─── */ | |
| .cta-section { | |
| padding: 5rem 0; | |
| text-align: left; | |
| } | |
| .cta-section h2 { | |
| font-size: var(--fs-xl); | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 0.75rem; | |
| } | |
| .cta-section .cta-body { | |
| color: var(--muted); | |
| font-weight: 300; | |
| max-width: 46ch; | |
| line-height: 1.6; | |
| margin-bottom: 2.25rem; | |
| } | |
| .button { | |
| display: inline-block; | |
| padding: 0.85rem 2rem; | |
| border: 1px solid var(--ink); | |
| color: var(--ink); | |
| background: transparent; | |
| text-decoration: none; | |
| font-family: 'Manrope', sans-serif; | |
| font-size: var(--fs-sm); | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| transition: background 0.25s ease, color 0.25s ease; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background: var(--ink); | |
| color: var(--surface); | |
| } | |
| .button:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 3px; | |
| } | |
| /* ─── FOOTER ─── */ | |
| footer { | |
| max-width: 46rem; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| footer p { | |
| font-size: var(--fs-xs); | |
| color: var(--muted); | |
| font-weight: 400; | |
| } | |
| /* ─── RESPONSIVE ─── */ | |
| @media (max-width: 640px) { | |
| .hero { | |
| padding: 5rem 0 4rem; | |
| } | |
| .numbered-section { | |
| grid-template-columns: 1fr; | |
| gap: 0.5rem; | |
| padding: 2.75rem 0; | |
| } | |
| .section-number { | |
| font-size: 3rem; | |
| text-align: left; | |
| line-height: 0.9; | |
| } | |
| .cta-section { | |
| padding: 3.5rem 0; | |
| } | |
| .nav-inner { | |
| padding: 1rem 1.25rem; | |
| } | |
| main { | |
| padding: 0 1.25rem; | |
| } | |
| footer { | |
| padding: 2rem 1.25rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <div class="nav-inner"> | |
| <span class="logo">reckr.</span> | |
| <a href="#start" class="nav-cta">Start a list →</a> | |
| </div> | |
| </nav> | |
| <main> | |
| <section class="hero" id="start"> | |
| <h1>The task app that lets you close your laptop at 6 pm</h1> | |
| <p class="hero-sub">No boards. No badges. No bandwagon. Just a list and a lock screen.</p> | |
| </section> | |
| <hr> | |
| <section class="manifesto"> | |
| <p>Most task apps were built for teams of 40. You are one person with 14 open tabs and a knot in your stomach. reckr was made for the feeling after you write something down and finally stop thinking about it.</p> | |
| </section> | |
| <hr> | |
| <section class="numbered-section"> | |
| <div class="section-number">01</div> | |
| <div class="section-content"> | |
| <h2>The problem</h2> | |
| <p>You've tried them all. Trello boards that became museums of abandoned ambition. Notion databases that took longer to configure than the work itself. Asana notifications that made you dread opening your phone. Each one promised organisation and delivered another inbox.</p> | |
| </div> | |
| </section> | |
| <section class="numbered-section"> | |
| <div class="section-number">02</div> | |
| <div class="section-content"> | |
| <h2>The principle</h2> | |
| <p>One list. No tags. No priority matrix you'll abandon by Thursday. No colour-coded labels that feel like homework. Just what needs doing and whether it's done. The oldest task sits at the top. When you finish it, the next one is already waiting.</p> | |
| </div> | |
| </section> | |
| <section class="numbered-section"> | |
| <div class="section-number">03</div> | |
| <div class="section-content"> | |
| <h2>The relief</h2> | |
| <p>Open reckr. Dump every task in your head. Close reckr. Come back when you're ready. Cross things off with one tap. No analytics. No streaks. No guilt. When the list is empty, you're done for the day — not "done but you could optimise more."</p> | |
| </div> | |
| </section> | |
| <hr> | |
| <section class="cta-section"> | |
| <h2>Try reckr. Free, forever.</h2> | |
| <p class="cta-body">No sign-up wall. No credit card. No onboarding tour. Just an empty list with your name on it.</p> | |
| <a href="#start" class="button">Start your list</a> | |
| </section> | |
| </main> | |
| <hr> | |
| <footer> | |
| <p>© 2025 reckr. Built in Edinburgh.</p> | |
| </footer> | |
| </body> | |
| </html> |