/* ============================================================ InkFirst marketing site — home.css Editorial-literary design system. Light by default; dark is opt-in via the nav toggle (which adds .dark-mode to ) — matches the iOS app's default. Scoped under so it never leaks into the /privacy or /terms pages, which keep using style.css. ============================================================ */ /* ------------------------------------------------------------ Tokens ------------------------------------------------------------ */ .home { --paper: #faf6ec; --paper-rim: #f3ecdb; --ink: #0e1722; --ink-soft: #3a3530; --ink-quiet: #6b655c; --brand: #4173b3; --brand-soft: #7eb1e5; --brand-deep: #2c548a; --gold: #c2aa6b; --rule: #d8d0bf; --rule-soft: #e8e1d0; --shadow-rgb: 14, 23, 34; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 144px; --max: 1240px; --measure: 640px; --display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0.18, 1); } .home.dark-mode { --paper: #0a0e14; --paper-rim: #131923; --ink: #f0ece2; --ink-soft: #cfc7b6; --ink-quiet: #8a8473; --brand: #7eb1e5; --brand-soft: #a8cdf0; --brand-deep: #4173b3; --gold: #d4b97a; --rule: #27303d; --rule-soft: #1a212c; --shadow-rgb: 0, 0, 0; } /* ------------------------------------------------------------ Reset + base ------------------------------------------------------------ */ .home, .home * { box-sizing: border-box; } .home { margin: 0; padding: 0; font-family: var(--body); font-size: 18px; line-height: 1.6; color: var(--ink-soft); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; overflow-x: hidden; } .home img, .home picture, .home video { display: block; max-width: 100%; } .home a { color: var(--brand); text-decoration: none; transition: color 0.2s var(--ease-soft); } .home a:hover { color: var(--brand-deep); } .home button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; } /* Selection highlight in brand tone */ .home ::selection { background: rgba(65, 115, 179, 0.22); color: var(--ink); } /* ------------------------------------------------------------ Typography ------------------------------------------------------------ */ .home h1, .home h2, .home h3, .home .display { font-family: var(--display); color: var(--ink); letter-spacing: -0.02em; font-feature-settings: "ss01" 1, "ss02" 1; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500; margin: 0; } .home .display-xl { font-size: clamp(48px, 8vw, 116px); line-height: 0.96; letter-spacing: -0.035em; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 460; } .home .display-l { font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -0.03em; font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 500; } .home .display-m { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "opsz" 48, "SOFT" 60, "wght" 540; } .home .display-s { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "opsz" 32, "SOFT" 40, "wght" 600; } .home p { margin: 0 0 var(--space-3); color: var(--ink-soft); } .home p.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink); max-width: 560px; } .home .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 var(--space-3); display: inline-flex; align-items: center; gap: 10px; } .home .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold); } .home .accent { color: var(--brand); } .home em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 500; } /* ------------------------------------------------------------ Layout primitives ------------------------------------------------------------ */ .home .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .home .measure { max-width: var(--measure); } .home .center { margin-left: auto; margin-right: auto; } .home section { position: relative; } .home .section-pad { padding-block: clamp(80px, 12vw, 160px); } /* Chapter ornament: three diamonds between sections */ .home .ornament { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--gold); margin: 0; letter-spacing: 0.4em; font-size: 8px; user-select: none; } .home .ornament::before, .home .ornament::after { content: ""; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); } /* Folio chapter labels — like the running head of a finely set book */ .home .folio { font-family: var(--mono); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--space-4); font-weight: 500; } .home .folio span { color: var(--gold); font-weight: 600; } /* ------------------------------------------------------------ Paper grain overlay (full-viewport, subtle) ------------------------------------------------------------ */ .home .grain { position: fixed; inset: 0; /* Explicit dimensions are required: elements without width/height attributes default to a 300×150 intrinsic size, which `inset:0` doesn't override. Without this, the noise rectangle paints only in the top-left of the viewport — and mix-blend-mode:screen in dark mode makes that small rectangle visibly lighter than the surrounding background (a translucent ghost in the upper-left corner of the page). */ width: 100vw; height: 100vh; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; z-index: 100; } .home.dark-mode .grain { opacity: 0.10; mix-blend-mode: screen; } /* ------------------------------------------------------------ Nav ------------------------------------------------------------ */ .home .nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--paper) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease-soft); } .home .nav.is-scrolled { border-bottom-color: var(--rule); } .home .nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--space-4); } .home .wordmark { font-family: var(--display); font-size: 22px; font-variation-settings: "opsz" 32, "SOFT" 60, "wght" 600; letter-spacing: -0.015em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .home .wordmark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; margin-bottom: -3px; } .home .nav-links { display: none; gap: var(--space-5); list-style: none; padding: 0; margin: 0; } .home .nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 4px 0; } .home .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brand); transition: width 0.3s var(--ease-soft); } .home .nav-links a:hover::after { width: 100%; } .home .nav-links a:hover { color: var(--ink); } .home .nav-actions { display: flex; align-items: center; gap: var(--space-3); } .home .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: border-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), background 0.25s var(--ease-soft); } .home .theme-toggle:hover { border-color: var(--brand); color: var(--brand); } .home .theme-toggle svg { width: 16px; height: 16px; } .home .theme-toggle .theme-icon-sun { display: none; } .home .theme-toggle .theme-icon-moon { display: block; } .home.dark-mode .theme-toggle .theme-icon-sun { display: block; } .home.dark-mode .theme-toggle .theme-icon-moon { display: none; } .home .nav-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); } .home .nav-pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--gold); animation: pulse 2.4s var(--ease-soft) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(194,170,107,0.55); } 70% { box-shadow: 0 0 0 12px rgba(194,170,107,0); } 100% { box-shadow: 0 0 0 0 rgba(194,170,107,0); } } @media (min-width: 880px) { .home .nav-links { display: flex; } } /* ------------------------------------------------------------ Hero ------------------------------------------------------------ */ .home .hero { padding-block: clamp(64px, 9vw, 128px) clamp(80px, 12vw, 160px); position: relative; overflow: hidden; } .home .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 8vw, 96px); align-items: center; } @media (min-width: 980px) { .home .hero-grid { grid-template-columns: 1.15fr 0.85fr; } } .home .hero-copy { position: relative; z-index: 2; } .home .hero-copy h1 { margin-bottom: var(--space-4); } .home .hero-copy h1 .word { display: inline-block; opacity: 0; transform: translateY(0.3em); animation: word-rise 0.9s var(--ease-quart) forwards; } .home .hero-copy h1 .word:nth-child(1) { animation-delay: 0.10s; } .home .hero-copy h1 .word:nth-child(2) { animation-delay: 0.22s; } .home .hero-copy h1 .word:nth-child(3) { animation-delay: 0.34s; } .home .hero-copy h1 .word:nth-child(4) { animation-delay: 0.46s; } .home .hero-copy h1 .ink-period { color: var(--brand); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 460; } @keyframes word-rise { to { opacity: 1; transform: translateY(0); } } .home .hero .lede { margin-bottom: var(--space-5); opacity: 0; transform: translateY(8px); animation: rise 0.9s 0.7s var(--ease-quart) forwards; } .home .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); opacity: 0; transform: translateY(8px); animation: rise 0.9s 0.95s var(--ease-quart) forwards; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } .home .hero-meta { margin-top: var(--space-4); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet); opacity: 0; animation: rise 0.9s 1.2s var(--ease-quart) forwards; } /* App Store badge */ .home .app-store-badge { display: inline-block; height: 56px; border-radius: 12px; transition: transform 0.25s var(--ease-soft), filter 0.25s var(--ease-soft); } .home .app-store-badge img { height: 100%; width: auto; display: block; } .home .app-store-badge:hover { transform: translateY(-1px); filter: drop-shadow(0 6px 18px rgba(var(--shadow-rgb), 0.2)); } .home.dark-mode .app-store-badge img { filter: invert(1); } /* Ghost link CTA */ .home .ghost-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; position: relative; } .home .ghost-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--ink-quiet); transform-origin: left; transform: scaleX(0.3); transition: transform 0.4s var(--ease-soft), background 0.2s; } .home .ghost-link:hover::after { transform: scaleX(1); background: var(--brand); } .home .ghost-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-soft); } .home .ghost-link:hover svg { transform: translateY(2px); } /* Hero ink-bleed brushstroke */ .home .ink-bleed { position: absolute; top: 8%; left: -6%; width: 60%; max-width: 700px; height: auto; z-index: 1; opacity: 0.10; pointer-events: none; } .home .ink-bleed path { stroke: var(--brand); stroke-width: 8; fill: none; stroke-linecap: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: draw 2.6s 0.4s var(--ease-quart) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .home.dark-mode .ink-bleed { opacity: 0.16; } /* ------------------------------------------------------------ iPhone frame — pure CSS ------------------------------------------------------------ */ .home .iphone { --bezel: 12px; --radius: 48px; width: min(360px, 78vw); aspect-ratio: 9 / 19.5; position: relative; border-radius: var(--radius); background: linear-gradient(165deg, #1c2230, #08090d); padding: var(--bezel); margin: 0 auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 60px -22px rgba(var(--shadow-rgb), 0.45), 0 12px 28px -10px rgba(var(--shadow-rgb), 0.25); isolation: isolate; } .home .iphone::before { /* Dynamic Island */ content: ""; position: absolute; top: calc(var(--bezel) + 10px); left: 50%; transform: translateX(-50%); width: 110px; height: 32px; border-radius: 18px; background: #000; z-index: 3; } .home .iphone::after { /* Side-button hint glints */ content: ""; position: absolute; top: 22%; left: -1px; width: 2px; height: 60px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), transparent); border-radius: 2px; pointer-events: none; } .home .iphone-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--radius) - var(--bezel)); overflow: hidden; background: #000; z-index: 1; } .home .iphone-screen > video, .home .iphone-screen > img, .home .iphone-screen > picture, .home .iphone-screen > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Hero iPhone scale + tilt — kept for any markup that still uses .iphone in the hero (it currently uses .hero-frame instead, but leaving the rule here means a future swap doesn't break.) */ .home .hero .iphone { transform: rotate(-1.5deg); transition: transform 0.6s var(--ease-soft); opacity: 0; animation: rise-tilt 1.2s 0.5s var(--ease-quart) forwards; } @keyframes rise-tilt { to { opacity: 1; transform: rotate(-1.5deg) translateY(0); } } .home .hero .iphone:hover { transform: rotate(0deg) translateY(-4px); } /* ------------------------------------------------------------ Hero neumorphic frame — wraps the demo video. The video already includes its own iPhone composite + sky-blue backdrop, so the frame here is a soft "raised card" rather than another phone bezel. Two-shadow neumorphism: warm highlight from the upper-left, soft sienna depth from the lower-right. ------------------------------------------------------------ */ .home .hero-frame { width: min(440px, 88vw); aspect-ratio: 1 / 1; border-radius: 36px; background: var(--paper); margin: 0 auto; position: relative; overflow: hidden; isolation: isolate; transform: rotate(-1deg) translateY(8px); opacity: 0; animation: hero-frame-rise 1.2s 0.4s var(--ease-quart) forwards; transition: transform 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft); box-shadow: -14px -14px 36px rgba(255, 255, 255, 0.85), 20px 22px 48px -10px rgba(101, 86, 56, 0.22), 8px 10px 22px -6px rgba(101, 86, 56, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.55); } @keyframes hero-frame-rise { to { opacity: 1; transform: rotate(-1deg) translateY(0); } } .home .hero-frame:hover { transform: rotate(0deg) translateY(-4px); box-shadow: -14px -14px 40px rgba(255, 255, 255, 0.92), 24px 26px 56px -10px rgba(101, 86, 56, 0.28), 8px 10px 22px -6px rgba(101, 86, 56, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.65); } /* The hero-frame is a layered card: 1. .hero-frame-still — always-visible poster image (back layer) 2. .hero-video — the playing video, fades in over the poster 3. .hero-play-fallback — visible when autoplay is blocked Putting the poster image as a separate layer (rather than relying on the