/* Manifesting Now ยท getmanifestingnow.com Colors and type match the journal cover and the Claude Design canvas. Fonts are self-hosted (SIL Open Font License, see assets/fonts). */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --ink: #0e0e0e; --cream: #f3ecdf; --paper: #fbf8f2; --line: #d6ccbb; --line-strong: #c9beab; --orange: #f26b35; --orange-text: #a9401a; /* orange for small text on cream (5:1) */ --body: #3f3b35; --muted: #5a554c; --on-ink-body: #d9d1c3; --on-ink-muted: #b9b1a3; --ink-line: #2e2b27; --ink-line-2: #3a3631; --display: "Fraunces", Georgia, "Times New Roman", serif; --text: "Source Serif 4", Georgia, "Times New Roman", serif; --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wrap: 1200px; --gutter: 24px; } @media (min-width: 720px) { :root { --gutter: 40px; } } @media (min-width: 1100px) { :root { --gutter: 64px; } } /* Pre-launch switch: set data-launch="live" on once the Amazon listing exists. */ html[data-launch="pre"] .when-live, html[data-launch="live"] .when-pre { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } a:hover { color: var(--orange-text); } p { margin: 0; } h1, h2, h3 { margin: 0; } :focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; border-radius: 4px; } .ink :focus-visible, .final :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); } .skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 600 15px/1 var(--ui); text-decoration: none; } .skip:focus { top: 12px; color: var(--cream); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sun-orange { color: var(--orange); } /* ---------- type ---------- */ .kicker { font: 600 12px/1.2 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-text); } .h1, .h2, .h3, .brand-name, .stat-num, .pull, .qa h3 { font-family: var(--display); font-variation-settings: "SOFT" 50; } .h1 { font-weight: 600; font-size: clamp(48px, 6.1vw, 86px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; } .h2 { font-weight: 600; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; } .h3 { font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; } .h1 em, .h2 em, .brand-name em { font-style: italic; font-weight: 400; } .lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.48; color: var(--body); text-wrap: pretty; } .head { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 720px) { .kicker { font-size: 13px; letter-spacing: 0.18em; } .head { gap: 20px; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; font: 600 17px/1 var(--ui); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .btn svg { width: 20px; height: 20px; flex: none; } .btn-ink { background: var(--ink); color: var(--cream); } .btn-ink:hover { background: #2b2926; color: var(--cream); } .btn-orange { background: var(--orange); color: var(--ink); } .btn-orange:hover { background: #f5875a; color: var(--ink); } .btn-outline-light { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream); } .btn-outline-light:hover { background: var(--cream); color: var(--ink); } .btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; } @media (min-width: 720px) { .btn-sm { padding: 0 22px; font-size: 16px; } } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; } .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); } .brand:hover { color: var(--ink); } .brand svg { width: 34px; height: 14px; flex: none; } .brand-name { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 36px; } .nav-links { display: none; gap: 36px; font: 500 16px/1 var(--ui); } .nav-links a { text-decoration: none; } @media (min-width: 720px) { .site-header .wrap { min-height: 88px; } .brand { gap: 12px; } .brand svg { width: 46px; height: 19px; } .brand-name { font-size: 23px; } } @media (min-width: 1000px) { .nav-links { display: flex; } } /* ---------- sections ---------- */ .section { padding: 56px 0; } .ink { background: var(--ink); color: var(--cream); } .ink .kicker { color: var(--orange); } .paper { background: var(--paper); border-block: 1px solid var(--line); } @media (min-width: 1100px) { .section { padding: 96px 0; } } /* hero */ .hero { padding: 40px 0 52px; } .hero-grid { display: grid; gap: 32px; } .hero-copy { display: flex; flex-direction: column; gap: 20px; } .hero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .hero-cta .btn { width: 100%; } .price { font: 400 14px/1.4 var(--ui); color: var(--muted); } .text-link { align-self: flex-start; font: 500 16px/1.4 var(--ui); color: var(--orange-text); text-underline-offset: 4px; } .facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); font: 500 14px/1.4 var(--ui); color: var(--body); } .facts li { display: flex; align-items: center; gap: 8px; } .facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); } .hero-visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 342 / 372; justify-self: center; } .hero-visual img { position: absolute; } .hv-photo { right: 0; top: 0; width: 88%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 40px -20px rgba(14, 14, 14, 0.4); } .hv-cover { left: 1.5%; bottom: 1.5%; width: 40%; aspect-ratio: 2 / 3; border-radius: 3px; transform: rotate(-5deg); box-shadow: 0 28px 44px -12px rgba(14, 14, 14, 0.5); } @media (min-width: 720px) { .hero-cta { flex-direction: row; align-items: center; gap: 20px; } .hero-cta .btn { width: auto; padding: 0 30px 0 34px; min-height: 60px; font-size: 18px; } .price { font-size: 15px; } .facts { gap: 10px 28px; margin-top: 12px; padding-top: 24px; font-size: 15px; } .facts li::before { width: 8px; height: 8px; } } @media (min-width: 1000px) { .hero { padding: 64px 0 88px; } .hero-grid { grid-template-columns: minmax(0, 600px) minmax(0, 560px); justify-content: space-between; align-items: center; gap: 40px; } .hero-copy { gap: 28px; } .hero-visual { aspect-ratio: 1; } .hv-photo { width: 86%; border-radius: 20px; } } /* problem */ .problem-grid { display: grid; gap: 20px; } .problem .body { display: flex; flex-direction: column; gap: 20px; } .problem .body p { font-size: 17px; line-height: 1.6; color: var(--on-ink-body); text-wrap: pretty; } .problem .body .pull { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(23px, 2vw, 29px); line-height: 1.3; color: var(--orange); text-wrap: balance; } @media (min-width: 1000px) { .problem-grid { grid-template-columns: 1fr 1fr; gap: 80px; } .problem .body { padding-top: 42px; gap: 24px; } .problem .body p { font-size: 19px; } .problem .h2 { font-size: clamp(40px, 3.5vw, 50px); } } /* method */ .method .wrap { display: flex; flex-direction: column; gap: 28px; } .method-grid { display: grid; gap: 24px; } .step { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--ink); } .step-head { display: flex; align-items: center; gap: 14px; } .badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--cream); font: 700 16px/1 var(--ui); } .step p { font-size: 17px; color: var(--body); } .note { max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--muted); } .note strong { font-weight: 600; color: var(--ink); } @media (min-width: 900px) { .method .wrap { gap: 44px; } .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .step { padding-top: 30px; gap: 18px; } .step-head { flex-direction: column; align-items: flex-start; gap: 18px; } .badge { width: 52px; height: 52px; font-size: 20px; } .step p { font-size: 20px; } .note { font-size: 18px; } } /* inside */ .inside .wrap { display: flex; flex-direction: column; gap: 28px; } .inside-head { display: flex; flex-direction: column; gap: 16px; } .spec { font: 500 14px/1.4 var(--ui); color: var(--muted); } .pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .pages figure { margin: 0; display: flex; flex-direction: column; gap: 12px; } .page-img { width: 100%; aspect-ratio: 2 / 3; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 24px -16px rgba(14, 14, 14, 0.35); } .pages figcaption { display: flex; flex-direction: column; gap: 4px; } .pages figcaption strong { font: 600 15px/1.3 var(--ui); } .pages figcaption span { font-size: 15px; line-height: 1.4; color: var(--muted); } .contents { display: grid; gap: 12px; margin: 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--line); } .contents li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.45; } .contents li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); transform: translateY(-2px); } @media (min-width: 720px) { .spec { font-size: 15px; } } @media (min-width: 900px) { .inside .wrap { gap: 44px; } .pages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .pages figure { gap: 18px; } .page-img { box-shadow: 0 20px 32px -20px rgba(14, 14, 14, 0.35); } .pages figcaption { gap: 6px; } .pages figcaption strong { font-size: 16px; } .pages figcaption span { font-size: 17px; } .contents { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; row-gap: 16px; padding-top: 40px; } .contents li { font-size: 18px; } .contents li::before { width: 8px; height: 8px; transform: translateY(-3px); } } @media (min-width: 1000px) { .inside-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; } .inside-head .spec { flex: none; padding-bottom: 10px; } .inside .h2 { font-size: clamp(40px, 3.6vw, 52px); } } /* five minutes */ .five-grid { display: grid; gap: 28px; } .five-img { justify-self: center; width: min(290px, 100%); aspect-ratio: 2 / 3; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 36px -22px rgba(14, 14, 14, 0.4); transform: rotate(-1.5deg); } .five-copy { display: flex; flex-direction: column; gap: 28px; } .rhythm { display: flex; flex-direction: column; gap: 14px; } .rhythm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 12px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; } .rhythm-head svg { flex: none; } .rhythm dl { margin: 0; display: grid; } .rhythm dt { margin-top: 14px; font: 600 15px/1.4 var(--ui); } .rhythm dt:first-child { margin-top: 0; } .rhythm dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--body); } @media (min-width: 720px) { .rhythm-head { font-size: 13px; } .rhythm dl { grid-template-columns: 170px 1fr; gap: 12px 20px; } .rhythm dt { margin-top: 0; font-size: 16px; line-height: 1.7; } .rhythm dd { margin: 0; font-size: 18px; } } @media (min-width: 1000px) { .five-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: center; } .five-img { width: 400px; box-shadow: 0 30px 50px -28px rgba(14, 14, 14, 0.4); } .five-copy { gap: 26px; } .five .h2 { font-size: clamp(40px, 3.3vw, 46px); } .rhythm { gap: 12px; } } /* starter kit */ .starter { background: var(--orange); color: var(--ink); padding: 48px 0 56px; } .starter-grid { display: grid; gap: 18px; } .starter .kicker { color: var(--ink); } .starter .lead { color: var(--ink); } .starter .h2 { font-size: clamp(38px, 3.9vw, 56px); } .fan { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520 / 400; margin-bottom: 8px; justify-self: center; } .fan img { position: absolute; width: 41.5%; aspect-ratio: 2 / 3; background: #fff; box-shadow: 0 20px 32px -16px rgba(14, 14, 14, 0.5); } .fan picture:nth-child(1) img { left: 2.7%; top: 14.5%; transform: rotate(-9deg); } .fan picture:nth-child(2) img { left: 29.2%; top: 5.5%; transform: rotate(-1deg); } .fan picture:nth-child(3) img { left: 55.8%; top: 15.5%; transform: rotate(8deg); } .starter-copy { display: flex; flex-direction: column; gap: 18px; } @media (min-width: 1000px) { .starter { padding: 88px 0; } .starter-grid { grid-template-columns: 520px minmax(0, 1fr); gap: 80px; align-items: center; } .starter-copy { gap: 22px; } .fan { margin-bottom: 0; } } /* signup forms */ .signup { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .signup label { font: 600 14px/1.4 var(--ui); } .signup-row { display: flex; flex-direction: column; gap: 10px; } .signup input { width: 100%; min-width: 0; height: 56px; padding: 0 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 400 17px/1 var(--ui); } .signup input::placeholder { color: #6e685e; } .signup .btn { width: 100%; } .fine { font: 400 14px/1.45 var(--ui); } .form-msg { font: 600 15px/1.45 var(--ui); } .form-msg:empty { display: none; } @media (min-width: 720px) { .signup-row { flex-direction: row; gap: 12px; } .signup input { flex: 1; height: 58px; padding: 0 24px; } .signup .btn { width: auto; flex: none; min-height: 58px; } } /* science */ .science .wrap { display: flex; flex-direction: column; gap: 28px; } .science-grid { display: grid; gap: 28px; } .stat { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--ink-line-2); } .stat .stat-num { font-family: var(--display); font-weight: 600; font-size: clamp(72px, 6.7vw, 96px); line-height: 0.9; letter-spacing: -0.03em; color: var(--orange); } .stat p { font-size: 17px; line-height: 1.55; color: var(--on-ink-body); } .science .small { font: 400 14px/1.45 var(--ui); color: var(--on-ink-muted); } @media (min-width: 900px) { .science .wrap { gap: 44px; } .science-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .stat { padding-top: 30px; gap: 18px; } .stat p { font-size: 18px; } .science .small { font-size: 15px; } } /* who it's for */ .who { padding: 56px 0 40px; } .who-grid { display: grid; gap: 24px; } .who-cols { display: grid; gap: 24px; } .who-col { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--ink); } .who-col.not { border-top-color: var(--line-strong); } .who-col h3 { font: 600 12px/1.2 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; } .who-col.not h3 { color: var(--muted); } .who-col p { font-size: 19px; line-height: 1.45; } .who-col.not p { color: var(--body); } @media (min-width: 720px) { .who-cols { grid-template-columns: 1fr 1fr; gap: 40px; } .who-col h3 { font-size: 13px; } } @media (min-width: 1000px) { .who { padding: 88px 0; } .who-grid { grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; } .who-col { padding-top: 24px; gap: 16px; } .who-col p { font-size: 22px; } } /* story */ .story { padding: 16px 0 56px; } .story-grid { display: grid; gap: 28px; } .story-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; } .story-copy { display: flex; flex-direction: column; gap: 18px; } .story-copy .lead { font-size: 18px; line-height: 1.55; } .publisher { font: 400 14px/1.4 var(--ui); color: var(--muted); } @media (min-width: 1000px) { .story { padding: 0 0 96px; } .story-grid { grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: center; } .story-img { border-radius: 20px; } .story-copy { gap: 22px; } .story-copy .lead { font-size: 21px; } .publisher { font-size: 15px; } } /* faq */ .faq { border-bottom: 0; } .faq-grid { display: grid; gap: 24px; } .qa-list { border-bottom: 1px solid var(--line); } .qa { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); } .qa h3 { font-weight: 600; font-size: 20px; line-height: 1.25; } .qa p { font-size: 16px; line-height: 1.55; color: var(--body); } @media (min-width: 1000px) { .faq-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; } .qa h3 { font-size: 23px; } .qa p { font-size: 18px; } } /* final call to action */ .final { background: var(--ink); color: var(--cream); padding: 56px 0 48px; text-align: center; } .final .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; } .final .sun { width: 120px; height: 50px; } .final .h2 { font-size: clamp(38px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -0.025em; } .final .sub { font-size: 18px; line-height: 1.5; color: var(--on-ink-body); } .final .price { color: var(--on-ink-muted); } .final-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-top: 4px; } .final .signup { width: 100%; max-width: 640px; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--ink-line); text-align: left; } .final .signup label { color: var(--cream); } .final .signup input { background: #1a1917; color: var(--cream); border: 1.5px solid #6e685e; } .final .signup input::placeholder { color: #9a9387; } /* before launch the signup is this section's main action, so its button is filled */ html[data-launch="pre"] .final .signup .btn { background: var(--orange); color: var(--ink); box-shadow: none; } html[data-launch="pre"] .final .signup .btn:hover { background: #f5875a; } @media (min-width: 720px) { .final-cta { flex-direction: row; align-items: center; justify-content: center; width: auto; gap: 20px; } .final-cta .btn { padding: 0 30px 0 34px; min-height: 60px; font-size: 18px; } } @media (min-width: 1100px) { .final { padding: 88px 0 80px; } .final .wrap { gap: 28px; } .final .sun { width: 168px; height: 70px; } .final .sub { font-size: 22px; } .final .signup { margin-top: 32px; padding-top: 32px; } } /* footer */ .site-footer { background: var(--ink); color: var(--on-ink-muted); border-top: 1px solid var(--ink-line); padding: 28px 0 40px; font: 400 14px/1.5 var(--ui); } .site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .site-footer a { color: var(--cream); text-decoration: none; } .site-footer a:hover { color: var(--orange); } .site-footer .brand { color: var(--cream); } .site-footer .brand svg { width: 34px; height: 14px; } .site-footer .brand-name { font-size: 18px; } @media (min-width: 900px) { .site-footer .wrap { flex-direction: row; justify-content: space-between; } } /* simple pages (privacy, 404) */ .simple { padding: 56px 0 72px; } .simple .wrap { max-width: 720px; display: flex; flex-direction: column; gap: 20px; } .simple h2 { font: 600 22px/1.25 var(--display); font-variation-settings: "SOFT" 50; margin-top: 16px; } .simple p, .simple li { font-size: 18px; line-height: 1.6; color: var(--body); } .simple ul { margin: 0; padding-left: 22px; } .simple a { color: var(--orange-text); } .simple .btn-ink { color: var(--cream); margin-top: 8px; } @media (min-width: 1000px) { .simple { padding: 96px 0 120px; } }