/* =========================================================================== Nemku Strength — marketing site The app's own design language, ported. Tokens mirror NemkuStrength/Theme.swift and AccentTheme.swift: warm-neutral ground, cool-neutral panels, neutral ink, and the accent living ONLY in fills and selected states — never in text. No webfonts: the display face is New York and the UI face is SF, both of which ship with the platform. A site whose pitch is "no third parties" should not open a connection to a font CDN. =========================================================================== */ /* --- tokens ------------------------------------------------------------- */ :root { /* surfaces — Palette.bg / .surface / .surface2 / .surface3 */ --ground: #FCFDFF; --panel: #F2F3F5; --panel-2: #E9EBEE; --well: #FFFFFF; /* ink — Palette.text / .text2 / .text3 */ --ink: #262629; --ink-2: #5A5B60; /* Deliberately darker than the app's Palette.text3 (#7E8085). That value is 3.6:1 on the panel tone — fine at iOS sizes on a phone held close, short of WCAG AA for 13px web text. #6D6F74 clears 4.5:1 on both ground and panel. */ --ink-3: #6D6F74; /* hairlines + depth — Palette.line / .line2 / .border / .shadow */ --hairline: rgba(38, 38, 41, 0.10); --hairline-2: rgba(38, 38, 41, 0.05); --edge: rgba(38, 38, 41, 0.22); --shadow-ink: 62, 63, 68; /* Device frame: on light ground the bezel reads on its own; the fade takes the screenshot into the app's own light ground. Both flip with the theme, because the captures do too. */ --device-edge: rgba(0, 0, 0, 0.5); --shot-fade: linear-gradient(to bottom, rgba(252, 253, 255, 0), rgba(252, 253, 255, 1)); /* the dark band — Palette dark-side bg/text */ --band: #1B1916; --band-ink: #EFEBE3; --band-ink-2: #ABA398; --band-line: rgba(239, 235, 227, 0.11); /* accent — Sage by default (AccentColorOption.default). Overridden per theme by [data-accent] below; the *_fill pair is what CTAs and selected states use. */ --accent: #718F77; --accent-fill: #57725D; --accent-on: #FBFAF5; --accent-deep: #57725D; --accent-soft: #E0E6E1; /* type */ --display: ui-serif, "New York", "Iowan Old Style", Georgia, serif; --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif; /* layout */ --page: 1120px; --gutter: clamp(20px, 5vw, 64px); --r-card: 18px; --r-inner: 13px; } /* The six real accents from AccentTheme.swift. Sage and Charcoal carry a dark fill with cream content; the four pastels flip to a light baby tint carrying the deep ink — exactly as `hasDarkFill` decides it in the app. */ [data-accent="sage"] { --accent:#718F77; --accent-fill:#57725D; --accent-on:#FBFAF5; --accent-deep:#57725D; --accent-soft:#E0E6E1; } [data-accent="mist"] { --accent:#D0DEE9; --accent-fill:#E8EEF4; --accent-on:#2A2622; --accent-deep:#4A6579; --accent-soft:#E8EEF4; } [data-accent="lavender"] { --accent:#D9CFED; --accent-fill:#ECE7F6; --accent-on:#2A2622; --accent-deep:#605B83; --accent-soft:#ECE7F6; } [data-accent="peach"] { --accent:#F9D4BD; --accent-fill:#FCEADE; --accent-on:#2A2622; --accent-deep:#8C5C3A; --accent-soft:#FCEADE; } [data-accent="rose"] { --accent:#F3C6C9; --accent-fill:#FAE5E7; --accent-on:#2A2622; --accent-deep:#8B535C; --accent-soft:#FAE5E7; } [data-accent="charcoal"] { --accent:#41403E; --accent-fill:#2B2B2B; --accent-on:#FBFAF5; --accent-deep:#2B2B2B; --accent-soft:#E4E4E4; } /* Dark scheme — the app's warm-charcoal side. Applied by OS preference and overridden by the explicit toggle, which stamps data-theme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #1B1916; --panel: #262320; --panel-2: #312D28; --well: #312D28; --ink: #EFEBE3; --ink-2: #ABA398; --ink-3: #91897D; /* AA on the dark panel; app value is #8E867A */ --hairline: rgba(239, 235, 227, 0.11); --hairline-2: rgba(239, 235, 227, 0.06); --edge: rgba(239, 235, 227, 0.18); --shadow-ink: 0, 0, 0; --band: #131110; /* A charcoal screenshot inside a charcoal bezel on a charcoal page has no silhouette — the frame needs a light edge to exist at all. */ --device-edge: rgba(239, 235, 227, 0.17); --shot-fade: linear-gradient(to bottom, rgba(27, 25, 22, 0), rgba(27, 25, 22, 1)); } :root:not([data-theme="light"])[data-accent="sage"] { --accent-soft:#363B33; } :root:not([data-theme="light"])[data-accent="mist"] { --accent-soft:#4B4C4C; } :root:not([data-theme="light"])[data-accent="lavender"] { --accent-soft:#4D494D; } :root:not([data-theme="light"])[data-accent="peach"] { --accent-soft:#544A43; } :root:not([data-theme="light"])[data-accent="rose"] { --accent-soft:#534745; --accent-fill:#F9E2E4; } :root:not([data-theme="light"])[data-accent="charcoal"] { --accent-soft:#2A2724; } } :root[data-theme="dark"] { --ground:#1B1916; --panel:#262320; --panel-2:#312D28; --well:#312D28; --ink:#EFEBE3; --ink-2:#ABA398; --ink-3:#91897D; --hairline:rgba(239,235,227,0.11); --hairline-2:rgba(239,235,227,0.06); --edge:rgba(239,235,227,0.18); --shadow-ink:0,0,0; --band:#131110; --device-edge:rgba(239,235,227,0.17); --shot-fade:linear-gradient(to bottom, rgba(27,25,22,0), rgba(27,25,22,1)); } :root[data-theme="dark"][data-accent="sage"] { --accent-soft:#363B33; } :root[data-theme="dark"][data-accent="mist"] { --accent-soft:#4B4C4C; } :root[data-theme="dark"][data-accent="lavender"] { --accent-soft:#4D494D; } :root[data-theme="dark"][data-accent="peach"] { --accent-soft:#544A43; } :root[data-theme="dark"][data-accent="rose"] { --accent-soft:#534745; --accent-fill:#F9E2E4; } :root[data-theme="dark"][data-accent="charcoal"] { --accent-soft:#2A2724; } /* --- base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-soft); } .wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); } /* Narrow a block WITHOUT re-centring it — .wrap owns the page's left edge, so putting a max-width on .wrap itself would pull that section's content inward and break alignment with its neighbours. */ .col { max-width: 860px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent-fill); color: var(--accent-on); padding: 12px 20px; border-radius: 0 0 var(--r-inner) 0; font-weight: 600; } .skip:focus { left: 0; } /* --- type --------------------------------------------------------------- */ .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.06; margin: 0; /* Even out the rag. Without it a heading that just overflows its column drops one or two words onto a third line and reads as a mistake. */ text-wrap: balance; } h1.display { font-size: clamp(38px, 6.2vw, 74px); } h2.display { font-size: clamp(30px, 4.2vw, 50px); } h3.display { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; } /* For a two-line heading whose longer line won't fit the split column at the full h2 size. Shrinking the type is the fix; letting it wrap to three lines orphans the last word, and balancing an overflowing line just moves the orphan around. */ h2.display.long { font-size: clamp(28px, 3.4vw, 41px); } .display em { font-style: italic; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--edge); } .lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 54ch; } .body { color: var(--ink-2); max-width: 58ch; } .fine { font-size: 13.5px; color: var(--ink-3); } strong { font-weight: 600; color: var(--ink); } /* --- section rhythm ----------------------------------------------------- */ section { padding-block: clamp(64px, 9vw, 130px); } .rule { height: 1px; background: var(--hairline); border: 0; margin: 0; } /* Two-column: copy beside a device. Alternates side by side-b. */ .split { display: grid; gap: clamp(36px, 6vw, 88px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr minmax(0, 460px); } .split.side-b { grid-template-columns: minmax(0, 460px) 1fr; } .split.side-b > .copy { order: 2; } .split.side-b > .art { order: 1; } } /* Two peer columns of equal weight — neither is "the art". Used by the Kitchen / Watch band, which is the one place two topics share a section. */ .pair { display: grid; gap: clamp(40px, 6vw, 76px); grid-template-columns: 1fr; } @media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; } } /* --- panel -------------------------------------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: clamp(22px, 3vw, 34px); } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; font-family: var(--ui); font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; /* colour rides with background-color: swapping accents mid-transition would otherwise put the new theme's ink on the old theme's fill for ~180ms. */ transition: transform .12s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .btn-primary { background: var(--accent-fill); color: var(--accent-on); } .btn-primary:hover { transform: translateY(-1px); } .btn-quiet { background: transparent; color: var(--ink); border-color: var(--edge); } .btn-quiet:hover { border-color: var(--ink-3); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } } /* --- nav ---------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--hairline); } .nav-in { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); min-height: 62px; } .wordmark { font-size: 18px; letter-spacing: -0.01em; margin-right: auto; text-decoration: none; white-space: nowrap; /* padding, not height: gets the link to a 44px target without a taller bar */ padding: 10px 0; } .wordmark b { font-weight: 700; } .wordmark span { font-weight: 300; color: var(--ink-2); } .nav-links { display: none; gap: clamp(14px, 2.2vw, 28px); } @media (min-width: 900px) { .nav-links { display: flex; } } .nav-links a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 8px 0; white-space: nowrap; } .nav-links a:hover { color: var(--ink); } .nav .btn { min-height: 44px; padding: 0 18px; font-size: 14px; } /* Below ~560px the wordmark, the toggle, and a full-width CTA no longer fit on one row — left alone they push the document wider than the viewport and every section gets clipped on the right. */ @media (max-width: 560px) { .nav-in { gap: 8px; min-height: 58px; } .wordmark { font-size: 16px; } /* Shorten the CTA's label rather than its hit area — "Join the launch list" is what forces the row over the viewport width, and the theme toggle has to stay a 44px target. */ .nav .btn { font-size: 13.5px; padding: 0 14px; } .nav-long { display: none; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; background: transparent; color: var(--ink-2); border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; } .icon-btn:hover { color: var(--ink); border-color: var(--edge); } .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-sun { display: block; } :root:not([data-theme="light"]) .icon-moon { display: none; } } /* --- device frame ------------------------------------------------------- */ /* The captures are real 1320x2868 simulator screenshots with the status bar cropped; nothing inside the frame is drawn by this stylesheet. */ .device { position: relative; width: min(100%, 340px); margin-inline: auto; padding: 10px; background: #1B1916; border-radius: 44px; border: 1px solid var(--device-edge); box-shadow: 0 32px 64px -28px rgba(var(--shadow-ink), 0.45), 0 2px 8px rgba(var(--shadow-ink), 0.14); } .device-screen { position: relative; overflow: hidden; border-radius: 35px; background: var(--ground); aspect-ratio: 400 / 640; /* a top-of-screen crop; the source is far taller */ } .device-screen img { position: absolute; inset: 0; width: 100%; height: auto; } /* The captures are full screens; the frame shows the top of one. Fading the last stretch says "the screen keeps going" instead of guillotining a row of numbers mid-height. */ .device-screen::after { content: ""; position: absolute; inset: auto 0 0 0; height: 15%; background: var(--shot-fade); pointer-events: none; } .device.tall .device-screen { aspect-ratio: 400 / 760; } /* Frame B of the player sequence sits exactly on top of frame A. */ .device-screen .frame-b { opacity: 0; transition: opacity .45s ease; } .device-screen.is-b .frame-b { opacity: 1; } @media (prefers-reduced-motion: reduce) { .device-screen .frame-b { transition: none; } } .caption { margin: 16px auto 0; max-width: 34ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; } /* --- chips / meta ------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; font-size: 14px; color: var(--ink-2); background: var(--panel); border: 1px solid var(--hairline); border-radius: 999px; } .chip.is-on { background: var(--accent-soft); color: var(--ink); border-color: transparent; } /* --- accent picker ------------------------------------------------------ */ .accents { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; } .accents-label { font-size: 13px; color: var(--ink-3); margin-right: 2px; } .swatch { width: 30px; height: 30px; padding: 0; flex: none; border-radius: 999px; border: 1px solid var(--edge); cursor: pointer; background: var(--sw); position: relative; } .swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--ink-3); border-radius: 999px; } /* Touch targets stay 44px without inflating the visible dot. */ .swatch::before { content: ""; position: absolute; inset: -7px; } /* --- steps (the Plan → Lift → Rest → Adapt arc) ------------------------- */ .spine { display: grid; gap: 1px; background: var(--hairline); margin-top: 44px; } @media (min-width: 760px) { .spine { grid-template-columns: repeat(4, 1fr); } } .spine > div { background: var(--ground); padding: 24px 22px; } .spine dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .spine dd { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); } /* --- dark band ---------------------------------------------------------- */ .band { background: var(--band); color: var(--band-ink); } /* Every ink token inside the band has to flip: the light-mode greys are the right value on cream and unreadable on charcoal. */ .band .lede, .band .body, .band dd, .band .grid-3 p, .band .fine, .band .signup-note { color: var(--band-ink-2); } .band .eyebrow { color: var(--band-ink-2); } .band .eyebrow::before { background: var(--band-line); } .band .grid-3 { background: var(--band-line); } .band .grid-3 > div { background: var(--band); } .band strong, .band a { color: var(--band-ink); } /* Standalone link in the band — padded to a 44px target rather than left at its 16px line box. */ .band .fine a { display: inline-block; padding: 14px 0; } .grid-3 { display: grid; gap: 1px; background: var(--hairline); margin-top: 48px; } @media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .grid-3 > div { background: var(--ground); padding: 28px 24px; } .grid-3 h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; font-family: var(--ui); } .grid-3 p { margin: 0; font-size: 14.5px; color: var(--ink-2); } /* --- pricing ------------------------------------------------------------ */ .tiers { display: grid; gap: 18px; margin-top: 44px; } @media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); align-items: start; } } .tier { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; height: 100%; } /* The recommended column has to look recommended without shouting: the app's own selected-state tint on the border, a white ground, and a little lift. */ .tier.is-best { background: var(--well); border-color: var(--accent); box-shadow: 0 18px 40px -26px rgba(var(--shadow-ink), 0.34); } .tier-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .tier-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent-soft); color: var(--ink); padding: 4px 10px; border-radius: 999px; } .tier-price { font-family: var(--display); font-size: 40px; line-height: 1; margin: 18px 0 4px; } .tier-price small { font-family: var(--ui); font-size: 14px; font-weight: 400; color: var(--ink-3); } .tier-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 20px; min-height: 2.6em; } .tier ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--hairline); } .tier li { display: flex; gap: 11px; padding: 7px 0; font-size: 14.5px; color: var(--ink-2); } .tier li::before { content: "—"; color: var(--accent); flex: none; } /* --- FAQ ---------------------------------------------------------------- */ .faq { max-width: 780px; } .faq details { border-top: 1px solid var(--hairline); } .faq details:last-of-type { border-bottom: 1px solid var(--hairline); } .faq summary { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 22px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 20px; } .faq details[open] summary::after { content: "−"; } .faq details p { margin: 0 0 22px; color: var(--ink-2); max-width: 62ch; } /* --- waitlist form ------------------------------------------------------ */ .signup { max-width: 480px; margin-top: 32px; } .signup form { display: flex; flex-wrap: wrap; gap: 10px; } .signup input { flex: 1 1 220px; min-height: 46px; padding: 0 16px; font: inherit; font-size: 15px; color: var(--ink); background: var(--well); border: 1px solid var(--edge); border-radius: 999px; } .signup input::placeholder { color: var(--ink-3); } .signup input:focus-visible { border-color: var(--accent); } .signup-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); } /* The