/* ========================================================================= isittakeoff.com — the deadpan takeoff-status instrument One question. One answer. One indicator (the runway). Space Age Americana. ========================================================================= */ :root { --paper: #F7F0E1; /* warm cream ground */ --ink: #23201C; /* soft warm near-black — body + answer */ --predawn: #3A3358; /* deep indigo, top of the sky */ --amber: #F0A63C; /* dawn light — the one accent */ --rose: #E4735A; /* horizon warmth — a whisper-thin band */ --runway: #B8AC97; /* runway surface, warm taupe */ --centerline: #8A7E68; /* runway markings */ --max-board: 44rem; } /* --- reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--paper); } /* --- base ---------------------------------------------------------------- */ body { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(1.75rem, 5vh, 3.5rem) clamp(1rem, 4vw, 2rem); color: var(--ink); font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(0.82rem, 1.6vw, 0.95rem); line-height: 1.5; /* soft vertical dawn gradient: a predawn cap easing into cream paper */ background: linear-gradient(180deg, #3A3358 0%, #5C5773 7%, #9B9588 15%, #D8CFB8 22%, #F7F0E1 30%); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --- board --------------------------------------------------------------- */ .board { width: 100%; max-width: var(--max-board); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } /* --- eyebrow ------------------------------------------------------------- */ .eyebrow { margin: 0; font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; font-size: clamp(0.62rem, 1.5vw, 0.78rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); opacity: 0.72; padding-left: 0.34em; /* compensate for letter-spacing on the right edge */ } /* --- answer -------------------------------------------------------------- */ .answer { margin: 0; font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-weight: 540; font-optical-sizing: auto; font-size: clamp(3rem, 11vw, 6.75rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink); } /* --- runway (the one indicator) ----------------------------------------- */ .runway { margin: 0.4rem 0 0.2rem; width: 100%; max-width: 46rem; } .runway svg { display: block; width: 100%; height: auto; } /* horizon band kept to a whisper */ .horizon { opacity: 0.45; } /* amber edge-lights: the only ambient motion — a slow runway-light blink */ .edge-light { opacity: 0.85; } .edge-light { animation: edge-pulse 3.4s ease-in-out infinite; } .edge-light--far { animation-delay: 1.7s; } @keyframes edge-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* aircraft: parked at the near threshold. The transform is driven by [data-state] on . Ship it parked. */ #aircraft { transform: translate(140px, 90px); transition: transform 1100ms cubic-bezier(0.2, 0.65, 0.2, 1); transform-box: view-box; transform-origin: center; } /* state: cleared → lift off the far end of the runway */ [data-state="cleared"] #aircraft { transform: translate(786px, 34px); } /* --- status line --------------------------------------------------------- */ .status-line { margin: 0; font-size: clamp(0.74rem, 1.7vw, 0.88rem); letter-spacing: 0.04em; color: var(--ink); opacity: 0.78; } .status-line .sep { margin: 0 0.55em; opacity: 0.6; } /* --- hairline rule ------------------------------------------------------- */ .rule { margin: 0.2rem 0; width: min(22rem, 70%); height: 1px; border: 0; border-top: 1px solid var(--centerline); opacity: 0.5; } /* --- footer note + siblings --------------------------------------------- */ .note { margin: 0; font-size: clamp(0.78rem, 1.8vw, 0.92rem); color: var(--ink); opacity: 0.85; } .siblings { margin: 0; font-size: clamp(0.68rem, 1.5vw, 0.8rem); letter-spacing: 0.04em; color: var(--ink); opacity: 0.62; } .siblings a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease, opacity 160ms ease; } .siblings a:hover, .siblings a:focus-visible { border-bottom-color: var(--amber); opacity: 1; } .siblings .sep { margin: 0 0.5em; opacity: 0.6; } /* --- accessibility ------------------------------------------------------- */ a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 1px; } /* reduced motion: freeze the runway lights + the aircraft transition */ @media (prefers-reduced-motion: reduce) { .edge-light { animation: none; opacity: 0.85; } #aircraft { transition: none; } } /* --- small screens ------------------------------------------------------- */ @media (max-width: 360px) { .eyebrow { letter-spacing: 0.22em; } .status-line .sep, .siblings .sep { margin: 0 0.35em; } }