/* ════════════════════════════════════════════════════════════════════ In The Keys — shared stylesheet Living light: two registers (day / night) chosen by [data-theme] on . Faithful to apps/InTheKeys/brand.md: warm materials, one brass accent per page, no glass/blur, no gamification, roomEase motion, 4pt grid. ════════════════════════════════════════════════════════════════════ */ /* ── Shared tokens ── */ :root { /* Brass — constant across both registers (the one primary action) */ --brass-top: #C98E4B; --brass-bottom: #AF6E2B; --brass-label: #1B0F06; --brass-rim: #8A5A2A; --brass: linear-gradient(180deg, #C98E4B 0%, #AF6E2B 100%); --brass-pressed: linear-gradient(180deg, #B8803F 0%, #A36527 100%); /* Spacing — 4pt grid */ --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 64px; /* Radius — never exceed 24 except circles; no capsule CTAs */ --r-chip: 4px; --r-control: 12px; --r-card: 16px; --r-sheet: 24px; /* Motion — one curve family, no springs/overshoot */ --room-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-micro: 140ms; --dur-state: 220ms; --dur-flip: 800ms; /* brand registerFlip dissolve */ /* Measure */ --measure: 680px; --page-max: 1080px; --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; } /* ── Day register — Daylight 13:00 anchor ── */ [data-theme="day"] { --ground-center: #FAF4EA; --ground-edge: #F2EADA; --surface: #FFFFFF; --surface-2: #FBF6EC; --ink: #33302B; --ink-2: #4A3D2E; --ink-3: #554737; --ink-faint: #6B5E4B; --hairline: rgba(51, 48, 43, 0.16); --hairline-soft: rgba(51, 48, 43, 0.10); --feltred: #9A452E; /* reserved: earned-practice marks; unused on the marketing site by design */ --sage: #56654C; /* reserved: completion marks; unused here by design */ --shadow-1: 0 3px 12px rgba(80, 60, 30, 0.08); --shadow-2: 0 8px 24px rgba(80, 60, 30, 0.14); --brass-glow: 0 0 0 1px var(--brass-rim); --nav-bg: #FAF4EA; color-scheme: light; } /* ── Night register — Candlelit 22:00 anchor ── */ [data-theme="night"] { --ground-center: #261911; --ground-edge: #15100B; --surface: #2A1C12; --surface-2: #31231A; --ink: #EFE2CB; --ink-2: #B6925E; --ink-3: #A6957E; --ink-faint: #8C7B63; --hairline: rgba(239, 226, 203, 0.16); --hairline-soft: rgba(239, 226, 203, 0.10); --feltred: #B3563E; --sage: #7A8B6F; --shadow-1: 0 3px 12px rgba(0, 0, 0, 0.40); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55); --brass-glow: 0 0 14px rgba(201, 142, 75, 0.30); --nav-bg: #15100B; color-scheme: dark; } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink-2); background-color: var(--ground-edge); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: color var(--dur-flip) var(--room-ease), background-color var(--dur-flip) var(--room-ease); } /* Living-light ground: two stacked lamp-pool layers cross-fade on register flip. Gradients can't interpolate, so we dissolve via opacity — the 800ms register flip. */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--dur-flip) var(--room-ease); } body::before { background: radial-gradient(125% 80% at 50% 26%, #FAF4EA, #F2EADA); } /* Daylight */ body::after { background: radial-gradient(125% 80% at 50% 26%, #261911, #15100B); opacity: 0; } /* Candlelit */ [data-theme="night"] body::before { opacity: 0; } [data-theme="night"] body::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } ::selection { background: rgba(201, 142, 75, 0.22); } /* Visible focus for keyboard / switch users, in both registers (WCAG 2.4.7) */ :focus-visible { outline: 2px solid var(--brass-bottom); outline-offset: 3px; border-radius: 8px; } /* ── Typography helpers ── */ h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; } .eyebrow { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: var(--s-md); } .data { font-family: var(--mono); font-feature-settings: "tnum" 1; } a { color: var(--ink); text-decoration-color: var(--ink-faint); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--brass-bottom); } /* ── Brass button (the one accent per page) ── */ .btn-brass { display: inline-flex; align-items: center; gap: var(--s-xs); min-height: 52px; padding: 0 var(--s-lg); background: var(--brass); color: var(--brass-label); font-family: var(--sans); font-size: 1rem; font-weight: 600; border: none; border-radius: var(--r-control); box-shadow: var(--brass-glow); text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--room-ease), filter var(--dur-micro) var(--room-ease); } .btn-brass:hover { transform: translateY(-1px); filter: brightness(1.03); } .btn-brass:active { transform: translateY(0); background: var(--brass-pressed); } /* Static "status" variant (e.g. pre-launch "Coming to iPhone and iPad") — not interactive */ .btn-brass.is-status { cursor: default; } .btn-brass.is-status:hover { transform: none; filter: none; } .btn-quiet { display: inline-flex; align-items: center; gap: var(--s-xxs); font-size: 0.95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; } .btn-quiet:hover { color: var(--ink); } /* ── Nav ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--hairline-soft); transition: box-shadow var(--dur-state) var(--room-ease), background-color var(--dur-flip) var(--room-ease), border-color var(--dur-flip) var(--room-ease); } nav.scrolled { box-shadow: var(--shadow-1); } .nav-inner { max-width: var(--page-max); margin: 0 auto; padding: var(--s-sm) var(--s-lg); display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: flex; align-items: center; gap: var(--s-xs); text-decoration: none; } .nav-mark, .footer-mark { font-family: var(--serif); font-variation-settings: 'opsz' 40, 'wght' 600; font-size: 1.5rem; line-height: 1; color: var(--ink); } .nav-wordmark { font-family: var(--serif); font-variation-settings: 'opsz' 30, 'wght' 500; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: var(--s-lg); } .nav-link { font-size: 0.92rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color var(--dur-state) var(--room-ease); } .nav-link:hover { color: var(--ink); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-control); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--dur-state) var(--room-ease), border-color var(--dur-state) var(--room-ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--brass-bottom); } .theme-toggle svg { display: block; } /* Icon reflects the active register purely via [data-theme] — set before paint, no JS timing window */ .theme-toggle-night { display: none; } [data-theme="night"] .theme-toggle-day { display: none; } [data-theme="night"] .theme-toggle-night { display: block; } /* ── Layout primitives ── */ main { display: block; } .section { padding: var(--s-xxl) var(--s-lg); } .section-inner { max-width: var(--page-max); margin: 0 auto; } .measure { max-width: var(--measure); } .section-title { font-family: var(--serif); font-variation-settings: 'opsz' 48, 'wght' 600; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.3rem); margin-bottom: var(--s-md); max-width: 18ch; } .section-desc { font-size: 1.06rem; color: var(--ink-2); max-width: 56ch; margin-bottom: var(--s-xl); } /* ── Hero ── */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; padding: 8rem var(--s-lg) var(--s-xxl); overflow: hidden; } .hero::before { content: ''; position: absolute; top: -28%; left: 50%; width: min(900px, 120vw); height: min(900px, 120vw); transform: translateX(-50%); background: radial-gradient(circle, rgba(201, 142, 75, 0.14) 0%, transparent 62%); pointer-events: none; } .hero-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; } .hero h1 { font-family: var(--serif); font-variation-settings: 'opsz' 144, 'wght' 420; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: var(--s-lg); } .hero-sub { font-size: 1.2rem; line-height: 1.62; color: var(--ink-2); max-width: 52ch; margin: 0 auto var(--s-xl); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; justify-content: center; } .hero-meta { margin-top: var(--s-xl); font-family: var(--mono); font-size: 0.92rem; color: var(--ink-3); letter-spacing: 0.01em; } .hero-meta .sep { color: var(--ink-faint); padding: 0 var(--s-xs); } /* ── Card grid (features / the app) ── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); } .card { background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-card); padding: var(--s-lg); box-shadow: var(--shadow-1); transition: transform var(--dur-state) var(--room-ease), border-color var(--dur-state) var(--room-ease), background-color var(--dur-flip) var(--room-ease), color var(--dur-flip) var(--room-ease); } .card:hover { transform: translateY(-2px); border-color: var(--hairline); } .card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--r-control); margin-bottom: var(--s-md); color: var(--ink-3); } .card-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; } .card h3 { font-family: var(--serif); font-variation-settings: 'opsz' 28, 'wght' 600; font-size: 1.18rem; margin-bottom: var(--s-xs); } .card p { font-size: 0.96rem; color: var(--ink-2); line-height: 1.55; } /* ── A sitting (the flow) ── */ .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); margin-top: var(--s-xl); } .flow-num { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; font-family: var(--mono); font-size: 0.95rem; color: var(--ink-3); margin-bottom: var(--s-md); } .flow-step h3 { font-family: var(--serif); font-variation-settings: 'opsz' 22, 'wght' 600; font-size: 1.08rem; margin-bottom: var(--s-xs); } .flow-step p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.55; } /* ── Quiet band (philosophy) ── */ .band { padding: var(--s-xxl) var(--s-lg); } .band-inner { max-width: var(--page-max); margin: 0 auto; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); padding: var(--s-xxl) 0; text-align: center; } .band-quote { font-family: var(--serif); font-variation-settings: 'opsz' 72, 'wght' 460; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.1rem); line-height: 1.25; color: var(--ink); max-width: 22ch; margin: 0 auto var(--s-md); } .band-note { font-size: 1rem; color: var(--ink-2); max-width: 48ch; margin: 0 auto; } /* ── Screenshot gallery (stub for real grabs later) ── */ .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); margin-top: var(--s-xl); } .shot { aspect-ratio: 9 / 19.5; border: 1px solid var(--hairline); border-radius: var(--r-sheet); background: radial-gradient(120% 70% at 50% 24%, var(--surface-2), transparent), var(--ground-edge); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 0.82rem; font-family: var(--mono); text-align: center; padding: var(--s-md); transition: background-color var(--dur-flip) var(--room-ease), border-color var(--dur-flip) var(--room-ease), color var(--dur-flip) var(--room-ease); } /* ── Closing CTA ── */ .close { padding: var(--s-xxl) var(--s-lg) calc(var(--s-xxl) + var(--s-lg)); text-align: center; } .close-inner { max-width: 620px; margin: 0 auto; } .close h2 { font-family: var(--serif); font-variation-settings: 'opsz' 60, 'wght' 500; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.6rem); margin-bottom: var(--s-md); } .close p { font-size: 1.05rem; color: var(--ink-2); margin-bottom: var(--s-xl); } .close-note { margin-top: var(--s-lg); font-size: 0.9rem; color: var(--ink-3); } /* ── Legal / support pages ── */ .legal-page { max-width: var(--measure); margin: 0 auto; padding: 8rem var(--s-lg) var(--s-xxl); } .legal-page h1 { font-family: var(--serif); font-variation-settings: 'opsz' 72, 'wght' 520; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.6rem); margin-bottom: var(--s-xs); } .legal-page .updated { font-size: 0.85rem; color: var(--ink-3); margin-bottom: var(--s-xl); } .legal-page h2 { font-family: var(--serif); font-variation-settings: 'opsz' 28, 'wght' 600; font-size: 1.32rem; margin-top: var(--s-xl); margin-bottom: var(--s-sm); } .legal-page h3 { font-family: var(--serif); font-variation-settings: 'opsz' 22, 'wght' 600; font-size: 1.1rem; margin-top: var(--s-lg); margin-bottom: var(--s-xs); color: var(--ink); } .legal-page p, .legal-page li { font-size: 1rem; color: var(--ink-2); line-height: 1.7; margin-bottom: var(--s-md); } .legal-page ul { padding-left: var(--s-lg); margin-bottom: var(--s-md); } .legal-page li { margin-bottom: var(--s-xs); } .legal-page strong { color: var(--ink); font-weight: 600; } .legal-page a { color: var(--ink); text-decoration-color: var(--ink-faint); } .legal-page a:hover { text-decoration-color: var(--brass-bottom); } .legal-page .lead { font-size: 1.08rem; color: var(--ink-2); } /* ── Footer ── */ footer { padding: var(--s-xl) var(--s-lg); border-top: 1px solid var(--hairline-soft); margin-top: var(--s-lg); } .footer-inner { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--s-md); } .footer-left { display: flex; align-items: center; gap: var(--s-xs); } .footer-mark { font-size: 1.15rem; } .footer-copy { font-size: 0.82rem; color: var(--ink-3); } .footer-links { display: flex; gap: var(--s-lg); } .footer-links a { font-size: 0.85rem; color: var(--ink-2); text-decoration: none; transition: color var(--dur-state) var(--room-ease); } .footer-links a:hover { color: var(--ink); } /* ── Responsive ── */ @media (max-width: 880px) { .card-grid { grid-template-columns: 1fr 1fr; } .flow { grid-template-columns: 1fr 1fr; } .shots { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { body { font-size: 16px; } .section { padding: var(--s-xl) var(--s-lg); } .hero { min-height: 80vh; padding: 7rem var(--s-lg) var(--s-xl); } .card-grid { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; } .shots { grid-template-columns: 1fr; gap: var(--s-lg); } .shot { aspect-ratio: 16 / 10; } .nav-link { display: none; } .footer-inner { flex-direction: column; text-align: center; gap: var(--s-md); } .footer-links { flex-wrap: wrap; justify-content: center; gap: var(--s-md); } }