/* MakeMe landing page (index.html only). Loads after style.css, which holds
the tokens, type scale, header, footer, buttons, plan picker, timeline and
motion. This file is the landing layout and its drawings.
The page is short on purpose: about seven screens on a desktop and eight
on a phone, the length of the best-earning app sites (October 2026:
ReciMe 6.4 phone screens, Deglaze 7.7, FaceApp 8.1, YAZIO 9.0). It shows
the app in drawings in its own colors, never a whole screen of it.
Contents
1. Shared landing pieces, the header over the red
2. Hero: the look and its products
3. What MakeMe does: three steps, three drawings
4. Made around you: four tiles
5. Reviews
6. Pricing
7. FAQ
8. Closing
9. Dock (phones)
10. Motion, still mode, reduced motion
11. Breakpoints */
/* ===========================================================================
1. Shared landing pieces
=========================================================================== */
/* The page opens and closes in the app icon's red, like the app's launch
screen; between them cream and canvas alternate (What MakeMe does cream,
Made around you canvas, reviews cream, pricing and the FAQ canvas). No
hairline sits between two bands. */
html { scroll-padding-top: var(--bar-h); }
.landing main section { scroll-margin-top: 0; }
#faq { scroll-margin-top: clamp(40px, 5vw, 72px); }
.l-note { margin-top: 14px; font-size: 15px; line-height: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.landing .thumb img { object-fit: cover; }
.l-sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
/* The header over a red band (landing.js redBar): red, ivory words, the
download in ivory with red words, as the app's welcome draws Begin. */
.topbar { transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease); }
.topbar.on-red { background: var(--red); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar.on-red .wordmark { color: var(--canvas); }
.topbar.on-red .wordmark .mark { box-shadow: 0 0 0 1px rgba(250, 247, 242, 0.32); }
.topbar.on-red nav a { color: rgba(250, 247, 242, 0.8); }
.topbar.on-red nav a:hover { color: var(--canvas); }
.topbar.on-red .bar-cta { background: var(--canvas); color: var(--red); box-shadow: none; }
/* Her shade on a product (YourShadeLine): the swatch, "Your shade" in red,
the shade name in ink. */
.your-shade { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; line-height: 18px; color: var(--ink); }
.your-shade i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 37, 0.08); }
.your-shade em { font-style: normal; font-weight: 500; color: var(--red); }
.your-shade em, .your-shade b { white-space: nowrap; }
.your-shade b { font-weight: 600; }
/* ===========================================================================
2. Hero
=========================================================================== */
.l-hero { overflow: hidden; padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(64px, 8vw, 112px); background: var(--red); color: var(--canvas); }
.l-hero > .inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.l-hero h1, .l-close h2 { color: var(--canvas); }
.l-hero-title { font-size: clamp(3rem, 1.1rem + 5.3vw, 6.75rem); max-width: 9.5em; }
.l-hero-lede { margin-top: 28px; max-width: 27em; color: rgba(250, 247, 242, 0.84); }
.l-hero-cta { margin-top: 36px; }
.l-hero .l-note { color: rgba(250, 247, 242, 0.74); }
/* The look and its products, as the app's paywall draws them, at --k of
their 580pt design size: the look on a cream card with its colors,
tilted; its products on cream tiles fanned out around it (--x --y from
the centre, turned --r, --w square), drifting; her shade on the
concealer. */
.hero-stage { --k: 1; position: relative; height: calc(580px * var(--k)); }
.hero-art { position: absolute; left: 50%; top: 0; width: 580px; height: 580px; margin-left: -290px; transform: scale(var(--k)); transform-origin: 50% 0; }
.hero-glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 247, 242, 0.15), rgba(250, 247, 242, 0)); }
.fan, .look-card, .shade-chip { position: absolute; left: 50%; top: 50%; }
.look-card {
z-index: 2;
display: flex;
flex-direction: column;
width: 286px;
padding: 16px;
border-radius: 30px;
background: var(--surface);
box-shadow: 0 34px 70px rgba(20, 8, 10, 0.34), 0 10px 24px rgba(20, 8, 10, 0.18);
transform: translate(-50%, -50%) rotate(-4deg);
}
.look-card-photo { display: block; height: 318px; overflow: hidden; border-radius: 20px; background: #3A2A2D; }
.look-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 24%; }
.look-card-dots { display: flex; gap: 8px; padding: 16px 4px 2px; }
.look-card-dots i { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 37, 0.08); }
.fan { z-index: 1; width: var(--w); height: var(--w); transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
.fan-lead { z-index: 3; }
.fan-tile { position: relative; display: block; width: 100%; height: 100%; border-radius: 24px; background: var(--surface); box-shadow: 0 18px 36px rgba(20, 8, 10, 0.26), inset 0 0 0 1px rgba(43, 34, 37, 0.05); }
.fan-tile img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; }
.shade-chip {
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px 10px 10px;
border-radius: var(--r-cap);
background: var(--canvas);
box-shadow: 0 14px 30px rgba(20, 8, 10, 0.28);
font-size: 15px;
line-height: 20px;
color: var(--ink);
white-space: nowrap;
transform: translate(-50%, -50%) translate(-168px, 214px) rotate(-3deg);
}
.shade-chip i { width: 26px; height: 26px; border-radius: 50%; background: #CDA177; box-shadow: inset 0 0 0 1px rgba(43, 34, 37, 0.08); }
.shade-chip em { font-style: normal; font-weight: 500; color: var(--red); }
.shade-chip b { font-weight: 600; }
/* ===========================================================================
3. What MakeMe does
=========================================================================== */
.l-how { padding: var(--section) var(--gutter); background: var(--surface); }
.l-how > .inner, .l-more > .inner { max-width: var(--max); margin: 0 auto; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.how-step h3 { margin-top: 28px; font-size: clamp(1.5rem, 1.15rem + 0.8vw, 2rem); }
.how-step .body { margin-top: 12px; }
/* A drawing's panel: canvas, rounded, its pieces placed inside. */
.art { position: relative; display: block; overflow: hidden; border-radius: 28px; background: var(--canvas); }
.how-step .art { height: 340px; }
/* 1. A TikTok post, and the share row under it with MakeMe ringed. */
.tt-card { position: absolute; left: 50%; top: 30px; width: 168px; height: 236px; margin-left: -112px; overflow: hidden; border-radius: 20px; background: var(--ink); box-shadow: var(--shadow-float); transform: rotate(-5deg); }
.tt-card img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 25%; }
.tt-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 34, 37, 0) 50%, rgba(43, 34, 37, 0.62)); }
.tt-card-rail { position: absolute; z-index: 1; right: 9px; bottom: 58px; display: flex; flex-direction: column; gap: 11px; }
.tt-card-rail svg { width: 20px; height: 20px; fill: var(--canvas); color: var(--canvas); }
.tt-card-cap { position: absolute; z-index: 1; left: 12px; right: 40px; bottom: 12px; display: flex; flex-direction: column; font-size: 11px; line-height: 15px; color: var(--canvas); white-space: nowrap; }
.tt-card-cap b { font-size: 12px; font-weight: 600; }
.share-row {
position: absolute;
left: 50%;
bottom: 22px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 300px;
margin-left: -150px;
padding: 16px 10px 14px;
border-radius: 24px;
background: var(--paper);
box-shadow: 0 16px 34px rgba(43, 34, 37, 0.14), inset 0 0 0 1px var(--hairline);
}
.share-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; color: var(--ink); }
.share-app b { font-weight: 600; }
.share-tile { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--surface); }
.share-tile svg { width: 23px; height: 23px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.share-tile svg use[href="#i-ellipsis"] { fill: var(--ink); }
.share-icon { position: relative; display: block; width: 50px; height: 50px; }
.share-icon img { width: 50px; height: 50px; border-radius: var(--r-icon); }
.share-ring { position: absolute; inset: -6px; border-radius: 17px; box-shadow: 0 0 0 2px var(--red); }
.share-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--red); opacity: 0; }
/* 2. MakeMe reading the look to 100, in its own words. */
.art-read { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.read-ring { position: relative; display: block; width: 180px; height: 180px; }
.read-ring img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; object-fit: cover; object-position: 60% 28%; }
.read-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.read-arc { stroke-dasharray: 100 100; }
.read-pct { margin-top: 18px; font-family: var(--font-serif); font-weight: 600; font-size: 40px; line-height: 46px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.read-head { margin-top: 2px; font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 24px; letter-spacing: -0.2px; }
/* 3. The routine's steps, one card at a time (a deck: the front card
leaves, the next one comes forward). */
.art-steps { display: grid; place-items: center; }
.deck { position: relative; display: block; width: 270px; height: 168px; margin-top: 28px; }
.step-card {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
border-radius: 22px;
background: var(--surface);
box-shadow: 0 12px 26px rgba(43, 34, 37, 0.1);
transform: translateY(calc((2 - var(--k)) * -16px)) scale(calc(1 - (2 - var(--k)) * 0.05));
transform-origin: 50% 0;
}
.step-seg { display: flex; gap: 3px; }
.step-seg i { flex: 1; height: 3px; border-radius: 2px; background: rgba(43, 34, 37, 0.1); }
.step-seg i.d { background: var(--ink); }
.step-seg i.c { background: var(--red); }
.step-title { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 27px; letter-spacing: -0.3px; }
.step-title em { font-style: normal; color: var(--red); font-size: 17px; }
.step-prod { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--canvas); }
.step-prod .thumb { flex: none; width: 46px; height: 46px; }
.step-prod > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 17px; }
.step-prod b { font-weight: 600; }
.step-prod > span:last-child > span { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
/* ===========================================================================
4. Made around you
=========================================================================== */
.l-more { padding: var(--section) var(--gutter); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 32px; background: var(--surface); }
.tile-wide { grid-column: span 2; flex-direction: row; }
.tile-words { display: flex; flex-direction: column; padding: 32px 34px 34px; }
.tile-wide .tile-words { flex: 0 0 40%; justify-content: center; padding-right: 8px; }
.tile .art { flex: 1; min-height: 300px; margin: 12px; border-radius: 24px; }
.tile:not(.tile-wide) .art { flex: none; height: 290px; margin-bottom: 0; }
.tile h3 { font-size: clamp(1.625rem, 1.25rem + 0.9vw, 2.25rem); }
.tile .body { margin-top: 12px; font-size: 17px; }
.tile-note { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: 20px; padding: 8px 14px; border-radius: var(--r-cap); background: var(--canvas); font-size: 14px; line-height: 20px; font-weight: 500; }
.tile-note svg { width: 15px; height: 15px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-fine { margin-top: 14px; font-size: 13px; line-height: 19px; color: var(--ink-3); }
/* Her shade: the scale glides to hers and rings it, then two base products
name it. */
.art-shade { display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.scale { display: block; overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
/* The track starts at the middle; -359px puts her shade (the seventh,
46 + 10 apart) there. */
.scale-track { position: relative; left: 50%; display: flex; gap: 10px; width: max-content; transform: translateX(-359px); }
.scale-track i { display: block; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 37, 0.05); }
.scale-track i.mine { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5.5px var(--ink); }
.scale-ends { display: grid; grid-template-columns: 1fr auto 1fr; padding: 8px 28px 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.scale-ends > span:nth-child(2) { font-weight: 600; color: var(--ink); }
.scale-ends > span:last-child { text-align: right; }
.named { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 0; }
.named-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); }
.named-row .thumb { flex: none; width: 48px; height: 48px; background: var(--canvas); }
.named-row > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 19px; }
.named-row > span:last-child > b { font-weight: 600; }
.named-row > span:last-child > span:not(.your-shade) { color: var(--ink-2); font-size: 13px; }
/* Dupes: the product in the look, then its cheaper dupe sliding in front. */
.dupe { position: absolute; display: flex; flex-direction: column; gap: 1px; width: 156px; padding: 12px 12px 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-float); font-size: 13px; line-height: 18px; }
.dupe .thumb { width: 100%; aspect-ratio: 1; margin-bottom: 10px; }
.dupe small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.dupe b { font-size: 14px; line-height: 19px; font-weight: 600; }
.dupe-price { margin-top: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dupe-price em { font-style: normal; font-weight: 600; color: var(--red); }
.dupe-to .dupe-price { color: var(--ink); font-weight: 600; }
.dupe-from { left: 10%; top: 18px; transform: rotate(-6deg); }
.dupe-to { z-index: 1; right: 9%; top: 36px; transform: rotate(5deg); }
/* Products: the shelf, one marked Owned, the count. */
.art-products { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.shelf { display: flex; gap: 12px; }
.shelf-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; }
.shelf-pic { position: relative; display: block; width: 96px; height: 118px; border-radius: 18px; background: var(--surface); }
.shelf-pic img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.shelf-buy, .shelf-own { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 12px; border-radius: var(--r-cap); font-size: 12px; line-height: 16px; font-weight: 600; }
.shelf-buy { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.shelf-own { background: var(--red); color: var(--canvas); }
.shelf-own svg { width: 12px; height: 12px; fill: none; stroke: var(--canvas); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.shelf-count { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--red); }
/* Ask Makey: her occasion, Makey thinking, its routine. */
.art-makey { display: flex; align-items: flex-end; justify-content: center; padding: 24px; }
.chat { display: flex; flex-direction: column; gap: 10px; width: min(100%, 340px); }
.bubble { align-self: flex-start; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface); font-size: 15px; line-height: 21px; }
.bubble-hers { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--red); color: var(--canvas); }
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; }
.typing { align-self: start; justify-self: start; display: flex; gap: 4px; padding: 14px 15px; border-radius: 18px 18px 18px 6px; background: var(--surface); opacity: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.answer { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-raised); }
.answer-cover { display: flex; flex: none; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 14px; background: #EADCD8; }
.answer-cover i { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2.5px #EADCD8; }
.answer-cover i + i { margin-left: -12px; }
.answer-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.answer-words small { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.answer-words small svg { width: 13px; height: 13px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.answer-words b { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 26px; letter-spacing: -0.3px; }
.answer-words > span { font-size: 13px; line-height: 18px; color: var(--ink-3); }
/* ===========================================================================
5. Reviews
=========================================================================== */
.l-reviews { padding: var(--section) var(--gutter); background: var(--surface); }
.l-reviews > .inner { max-width: var(--max); margin: 0 auto; }
.l-reviews .kicker { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.1px; }
.rev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.pull {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
padding: clamp(28px, 3.4vw, 48px);
border-radius: var(--r-card);
background: var(--red);
color: var(--canvas);
}
.pull blockquote { margin: 0; }
.pull blockquote p {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(1.75rem, 1.05rem + 1.7vw, 2.625rem);
line-height: 1.14;
letter-spacing: -0.022em;
text-wrap: pretty;
}
.pull figcaption { font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(250, 247, 242, 0.82); }
.rev-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.rev-list li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; border-radius: var(--r-card); background: var(--canvas); }
.rev-list blockquote { margin: 0; }
.rev-list blockquote p { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.32; letter-spacing: -0.01em; text-wrap: pretty; }
.rev-list .who { font-size: 14px; line-height: 20px; color: var(--ink-3); }
/* ===========================================================================
6. Pricing
=========================================================================== */
.l-pricing { padding: var(--section) var(--gutter); }
.l-pricing > .inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
gap: clamp(48px, 7vw, 120px);
align-items: start;
}
.price-left .lede { margin-top: 20px; }
.price-left .includes { margin-top: 36px; }
.price-right { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; padding-top: 6px; }
/* Prices are informational. Choose and purchase a plan inside MakeMe. */
.pricing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pricing-plan { padding: 24px 20px; border-radius: var(--r-card); background: var(--surface); }
.l-pricing .pill { background: var(--red); color: var(--canvas); }
/* The paywall's trial timeline: today, and the day the trial ends. */
.price-tl { margin-top: 28px; }
.price-tl::before { background: rgba(95, 27, 37, 0.16); }
.price-tl .tl-today .tl-mark { background: var(--red); color: var(--canvas); }
.pricing-plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; line-height: 24px; }
.plan-price { margin-top: 20px; font-size: 28px; font-weight: 600; line-height: 34px; font-variant-numeric: tabular-nums; }
.plan-price span { display: block; font-size: 15px; font-weight: 400; line-height: 22px; color: var(--ink-2); }
.plan-detail { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.price-in-app { margin: 20px 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.l-pricing .notice { margin: 28px 0 0; background: var(--surface); }
/* ===========================================================================
7. FAQ
=========================================================================== */
/* The pricing band continues: pricing's foot padding is the gap. */
.l-faq { padding: 0 var(--gutter) var(--section); }
.l-faq > .inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 6vw, 104px);
align-items: start;
}
.faq-head .body { margin-top: 20px; }
.qa details { border-top: 1px solid var(--hairline); }
.qa details:last-child { border-bottom: 1px solid var(--hairline); }
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 44px;
padding: 22px 0;
list-style: none;
cursor: pointer;
font-family: var(--font-serif);
font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.01em;
-webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; transition: transform 200ms var(--ease); }
.qa details[open] summary svg { transform: rotate(45deg); }
.qa details p { max-width: 38em; padding: 0 44px 26px 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* ===========================================================================
8. Closing
=========================================================================== */
/* The app's launch screen: the red, the M (the app icon) and its gloss. */
.l-close { padding: var(--section) var(--gutter); background: var(--red); color: var(--canvas); }
.l-close > .inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(40px, 6vw, 104px);
align-items: center;
}
.close-copy .h2 { max-width: 10em; }
.close-copy .cta-row { margin-top: 40px; }
.close-copy .l-note { margin-top: 18px; color: rgba(250, 247, 242, 0.74); }
.close-mark {
position: relative;
justify-self: center;
width: min(100%, 360px);
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--r-icon);
box-shadow: 0 0 0 1px rgba(250, 247, 242, 0.14), 0 40px 80px rgba(0, 0, 0, 0.3);
}
.close-mark img { width: 100%; height: 100%; }
.close-gloss {
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(250, 247, 242, 0) 35%, rgba(250, 247, 242, 0.3) 50%, rgba(250, 247, 242, 0) 65%);
transform: translateX(-120%);
}
.js .close-mark.in .close-gloss { animation: gloss 1100ms var(--ease) 420ms both; }
@keyframes gloss { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
/* ===========================================================================
9. Dock (phones): download, once the hero badge has scrolled away
=========================================================================== */
.dock { display: none; }
@media (max-width: 767px) {
.dock {
position: fixed;
z-index: 60;
left: 50%;
bottom: calc(14px + env(safe-area-inset-bottom));
display: flex;
align-items: center;
gap: 10px;
width: min(calc(100% - 32px), 380px);
height: 64px;
padding: 8px 8px 8px 12px;
border-radius: var(--r-cap);
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 16px);
transition: opacity 250ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
}
.dock.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s; }
.dock img { flex: none; width: 40px; height: 40px; }
.dock-btn { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; font-size: 16px; white-space: normal; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: var(--canvas); } }
}
/* ===========================================================================
10. Motion
===========================================================================
The hero plays once at load. Each drawing plays once as it comes into
view (landing.js adds .go) and its loops run only while it is on screen
(.live). The resting frame is the base style, so no JavaScript, ?still
and Reduce Motion show every drawing finished. */
@keyframes lift-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.5); } }
/* The hero: the card rises, the products fan out from behind it, its
colors pop in, her shade lands on the concealer, then the products
drift. */
.js .look-card { animation: card-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, -50%) translateY(64px) rotate(-8deg) scale(0.92); } }
.js .fan { animation: fan-out 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(440ms + var(--n) * 90ms); }
@keyframes fan-out { from { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 0.08), calc(var(--y) * 0.08)) rotate(0deg) scale(0.55); } }
.js .look-card-dots i { animation: pop-in 280ms var(--ease) both; animation-delay: calc(760ms + var(--i) * 45ms); }
.js .shade-chip { animation: chip-in 460ms cubic-bezier(0.3, 1.4, 0.5, 1) 1300ms both; }
@keyframes chip-in { from { opacity: 0; transform: translate(-50%, -50%) translate(-168px, 230px) rotate(-3deg) scale(0.7); } }
.js .fan-tile { animation: drift calc(4.6s + var(--n) * 0.7s) ease-in-out calc(1.4s - var(--n) * 1.1s) infinite alternate; }
@keyframes drift { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
/* 1. The post rises, the share row slides up under it, MakeMe's ring
pulses. */
.js .art-share:not(.go) :is(.tt-card, .share-row) { opacity: 0; }
.js .art-share.go .tt-card { animation: tt-in 640ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tt-in { from { opacity: 0; transform: rotate(-9deg) translateY(34px); } }
.js .art-share.go .share-row { animation: row-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 380ms both; }
@keyframes row-in { from { opacity: 0; transform: translateY(24px); } }
.art-share.live .share-ring::after { animation: ring 1.7s ease-out 900ms infinite; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
/* 2. The ring and its number are set by landing.js as it reads. */
.art-read .read-head { transition: opacity 200ms var(--ease); }
.art-read.done .read-pct { color: var(--red); }
/* 3. The deck: every 3s the front card leaves to the left and the next one
comes forward; nine seconds for the three. */
.art-steps.live .step-card { animation: deck 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.art-steps.live .step-card:nth-child(1) { animation-delay: -3s; }
.art-steps.live .step-card:nth-child(2) { animation-delay: -6s; }
@keyframes deck {
0%, 26% { z-index: 3; opacity: 1; transform: translateY(0) scale(1); }
31% { z-index: 3; opacity: 0; transform: translateX(-70%) rotate(-9deg); }
31.1% { z-index: 1; opacity: 0; transform: translateY(-32px) scale(0.9); }
34%, 59% { z-index: 1; opacity: 1; transform: translateY(-32px) scale(0.9); }
64%, 92% { z-index: 2; opacity: 1; transform: translateY(-16px) scale(0.95); }
97%, 100% { z-index: 3; opacity: 1; transform: translateY(0) scale(1); }
}
.js .art-steps:not(.go) .deck { opacity: 0; }
.js .art-steps.go .deck { animation: lift-in 520ms var(--ease) both; }
/* Her shade: the scale glides to hers and rings it; two products name it. */
.js .art-shade:not(.go) .scale-track { transform: translateX(-70px); }
.js .art-shade.go .scale-track { animation: seek 1500ms cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes seek { from { transform: translateX(-70px); } }
.js .art-shade:not(.go) .scale-track i.mine { box-shadow: inset 0 0 0 1px rgba(43, 34, 37, 0.05); }
.js .art-shade.go .scale-track i.mine { animation: ring-on 320ms var(--ease) 1500ms both; }
@keyframes ring-on { from { box-shadow: 0 0 0 0 var(--canvas), 0 0 0 0 var(--ink); } }
.js .art-shade:not(.go) .named-row { opacity: 0; }
.js .art-shade.go .named-row { animation: lift-in 440ms var(--ease) both; animation-delay: calc(1750ms + var(--n) * 240ms); }
.js .art-shade.go .named-row .your-shade i { animation: pop-in 300ms cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(1950ms + var(--n) * 240ms); }
/* Dupes: the dupe slides in over the product it stands in for. */
.js .art-dupes:not(.go) .dupe { opacity: 0; }
.js .art-dupes.go .dupe-from { animation: lift-in 480ms var(--ease) both; }
.js .art-dupes.go .dupe-to { animation: dupe-in 680ms cubic-bezier(0.2, 0.8, 0.2, 1) 520ms both; }
@keyframes dupe-in { from { opacity: 0; transform: translateX(70px) rotate(14deg); } }
/* Products: the shelf arrives, the first is marked Owned, the count. */
.js .art-products:not(.go) :is(.shelf-tile, .shelf-own, .shelf-count) { opacity: 0; }
.js .art-products.go .shelf-tile { animation: lift-in 420ms var(--ease) both; animation-delay: calc(var(--n) * 110ms); }
.js .art-products.go .shelf-own { animation: pop-in 320ms cubic-bezier(0.3, 1.5, 0.5, 1) 900ms both; }
.js .art-products.go .shelf-count { animation: lift-in 360ms var(--ease) 1150ms both; }
/* Ask Makey: her message, Makey thinking, then its routine. */
.js .art-makey:not(.go) :is(.bubble, .answer) { opacity: 0; }
.js .art-makey.go .bubble { animation: lift-in 380ms var(--ease) both; }
.js .art-makey.go .bubble-hers { animation-delay: 700ms; }
.js .art-makey.go .typing { animation: thinking 1100ms linear 1250ms both; }
@keyframes thinking { 0% { opacity: 0; transform: translateY(8px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.art-makey.live .typing i { animation: dot 0.9s ease-in-out infinite; }
.art-makey.live .typing i:nth-child(2) { animation-delay: 0.15s; }
.art-makey.live .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.js .art-makey.go .answer { animation: lift-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) 2300ms both; }
@media (prefers-reduced-motion: reduce) {
.js .look-card, .js .fan, .js .fan-tile, .js .look-card-dots i, .js .shade-chip,
.js .art *, .js .art *::after, .js .close-mark .close-gloss { animation: none !important; }
.qa summary svg { transition: none; }
.dock, .dock.show { transform: translate(-50%, 0); transition: opacity 200ms linear, visibility 0s linear 200ms; }
.dock.show { transition: opacity 200ms linear, visibility 0s; }
}
.still .look-card, .still .fan, .still .fan-tile, .still .look-card-dots i, .still .shade-chip { animation: none; }
/* ===========================================================================
11. Breakpoints
=========================================================================== */
@media (max-width: 1100px) {
.hero-stage { --k: 0.86; }
.tile-wide .tile-words { flex-basis: 44%; }
}
@media (min-width: 960px) and (max-height: 760px) {
.hero-stage { --k: 0.82; }
}
@media (max-width: 959px) {
.landing main section > .inner { max-width: 600px; }
.price-right { max-width: none; }
.l-hero > .inner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.hero-stage { --k: 0.74; margin-top: 8px; }
/* What MakeMe does: one card at a time, side to side. */
.how-steps {
display: flex;
gap: 14px;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter) 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.how-steps::-webkit-scrollbar { display: none; }
.how-step { flex: none; width: min(84%, 420px); scroll-snap-align: start; }
.how-step .art { height: 300px; }
.how-step h3 { margin-top: 22px; }
.bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tile-wide { grid-column: auto; flex-direction: column; }
.tile-wide .art { order: -1; flex: none; margin-bottom: 0; }
.tile-wide .tile-words { flex: none; padding-right: 30px; }
.tile .art, .tile:not(.tile-wide) .art { height: 270px; min-height: 0; }
.tile-words { padding: 24px 26px 28px; }
.tile-shade .art { height: auto; padding: 22px 0 24px; }
.named { padding-top: 16px; }
.l-pricing > .inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
.price-left { display: contents; }
.js .price-left.reveal { opacity: 1; transform: none; }
.price-left > h2, .price-left > .lede { order: 1; }
.price-right { order: 2; position: static; margin-top: 40px; padding-top: 0; }
.price-left > .includes { order: 3; margin-top: 40px; }
.l-faq > .inner { grid-template-columns: minmax(0, 1fr); }
.l-close > .inner { grid-template-columns: minmax(0, 1fr); }
.close-mark { width: min(56%, 230px); }
.rev-grid { grid-template-columns: minmax(0, 1fr); }
/* Stacked, the copy centres on the column (founder, 2026-10-14). Long
reading stays flush left: the tiles' words, the plans, the small
print and the FAQ answers. */
.l-hero-copy, .l-sec-head, .l-reviews .kicker, .pull, .price-left > h2, .price-left > .lede, .faq-head, .close-copy { text-align: center; }
.l-hero-title, .l-hero-lede, .l-sec-head > *, .faq-head > *, .close-copy .h2, .price-left > h2, .price-left > .lede { margin-left: auto; margin-right: auto; }
.l-hero-cta, .close-copy .cta-row { justify-content: center; }
.pull blockquote p { text-indent: 0; hanging-punctuation: none; }
}
@media (max-width: 767px) {
.hero-stage { --k: 0.62; }
/* The four tiles slide side to side too, the next one peeking. */
.bento {
display: flex;
gap: 12px;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter) 6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.bento::-webkit-scrollbar { display: none; }
.tile { flex: none; width: 86%; scroll-snap-align: start; }
.scale-ends { grid-template-columns: 1fr; text-align: center; }
.scale-ends > span:first-child, .scale-ends > span:last-child { display: none; }
.named { padding: 16px 14px 0; }
.named-row { padding: 10px 12px; }
/* The four short quotes slide side to side under Chloe's. */
.rev-list {
display: flex;
gap: 12px;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter) 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.rev-list::-webkit-scrollbar { display: none; }
.rev-list li { flex: none; width: 76%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
.l-hero-cta, .l-close .cta-row { gap: 12px; }
.qa details p { padding-right: 0; }
.tile h3 { font-size: 26px; }
.tile .body { font-size: 16px; }
.dupe { width: 142px; }
}
@media (max-width: 380px) {
.hero-stage { --k: 0.54; }
.pricing-plans { grid-template-columns: 1fr; }
.l-hero-cta .badge img, .l-close .badge img { height: 44px; }
.shelf { gap: 8px; }
.shelf-tile, .shelf-pic { width: 84px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
.l-hero { padding-top: 24px; }
.l-hero-title { font-size: 40px; }
}