/* ==========================================================================
Style Sketch marketing site.
Tokens from stylesketch/CONTEXT.md — a custom editorial system, not a Meta
design system. Off-white #FAFAF7, black ink, hairline #E3E3E1, 40px radii,
generous whitespace.
Type: the real brand faces, self-hosted from assets/fonts (a symlink to the
repo's single copy in /assets/fonts — the same files the app embeds, see
src/theme/typography.ts). The ProtoHub prototype substituted Google-hosted
Lora for PP Editorial New because it couldn't serve a licensed face; here we
can, so the stand-in is gone along with the Google Fonts round-trip.
========================================================================== */
/* PP Editorial New = display serif, Inter = UI sans. Only the weights the page
actually uses: Inter 400/500/600, and a single Editorial roman (every heading
is font-weight 400). */
@font-face {
font-family: 'PP Editorial New';
src: url('fonts/PPEditorialNew-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/Inter-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Neither Inter nor PP Editorial New carries Thai glyphs. The unicode-range
keeps this file from being fetched at all unless Thai text is on the page, so
the EN and ID pages pay nothing for it. Same face and range as
data-usage-page/index.html — keep the two in step. */
@font-face {
font-family: 'Noto Sans Thai';
src: url('fonts/NotoSansThai-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
:root {
--bg: #FAFAF7;
--ink: #000000;
--ink-2: #212121;
--muted: #8A8A88;
--line: #E3E3E1;
--surface: #FFFFFF;
/* Noto Sans Thai sits after the brand faces, not instead of them: per-glyph
fallback means Latin still renders in PP Editorial New / Inter on the Thai
page, so "Style Sketch", "Facebook" and "iOS" keep the brand type. */
--editorial: 'PP Editorial New', 'Noto Sans Thai', Georgia, 'Times New Roman', serif;
--sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--maxw: 1100px;
--gutter: 24px;
--section-y: 92px;
}
body {
background: var(--bg);
color: var(--ink-2);
font-family: var(--sans);
font-size: 16px;
}
h1, h2, h3 {
font-family: var(--editorial);
font-weight: 400;
color: var(--ink);
letter-spacing: 0.2px;
}
h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.16rem; }
.narrow { max-width: 720px; }
.section-title { margin-bottom: 52px; }
.lede {
font-size: clamp(1rem, 1.7vw, 1.1rem);
line-height: 1.65;
color: var(--ink-2);
}
.eyebrow {
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 18px;
}
.num {
font-family: var(--sans);
font-size: 0.74rem;
letter-spacing: 0.14em;
color: var(--muted);
margin-bottom: 10px;
}
.fineprint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* ---------------------------------- header --------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: rgba(250, 250, 247, .86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 15px;
}
/* Image wordmark. Sized by height so it keeps the optical weight the old
1.22rem editorial text had; width follows the 166x43 source ratio. */
.brand {
display: inline-block;
flex: 0 0 auto; /* never let the header flex row squeeze the wordmark */
line-height: 0;
color: var(--ink);
text-decoration: none;
}
.brand img {
display: block;
height: 32px;
width: auto;
/* base.css clamps every image to max-width:100%. The brand sits in a flex
row, so that clamp can shrink the width while height stays fixed and
distort the wordmark. Opt this one image out. */
max-width: none;
}
.btn {
display: inline-block;
background: var(--ink);
color: #fff;
font-family: var(--sans);
font-size: 0.94rem;
font-weight: 400;
text-decoration: none;
border-radius: 40px;
padding: 12px 26px;
transition: opacity .15s ease, transform .15s ease;
white-space: nowrap;
}
.btn:hover { opacity: .84; transform: translateY(-1px); }
.btn-sm { padding: 9px 20px; font-size: 0.88rem; }
/* ----------------------------------- hero ---------------------------------- */
.hero { padding-block: clamp(44px, 7vw, 96px); }
.hero-inner {
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: clamp(32px, 6vw, 76px);
align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero .lede { margin-bottom: 30px; max-width: 38ch; }
/* Column, so the shuffle hint can sit under the frame rather than beside it. */
.hero-art { display: flex; flex-direction: column; align-items: center; }
/* --------------------------------- device ---------------------------------- */
/* The frame itself is drawn in CSS — it stays crisp at any density and costs
nothing beyond the image inside it. The hero holds a photograph plus the
.app-* chrome below; the three feature frames hold real app screenshots,
cropped so the mockup's black corners can't show. See index.html. */
.phone {
--frame: 8.4px; /* 60% of the original 14px — a thinner bezel gives the screen back */
width: min(330px, 82vw);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 40px;
padding: var(--frame);
box-shadow: 0 30px 60px rgba(0, 0, 0, .10);
}
/* Direct child only, so the rule can't reach into anything nested later.
Radius stays concentric with the outer 40px: inner = 40 - frame. Derived
rather than hard-coded so the two can't drift apart when --frame changes. */
.phone > img { border-radius: calc(40px - var(--frame)); width: 100%; }
/* ----------------------------------- deck -----------------------------------
Today's pick as a shuffleable stack of looks — see the note in index.html.
`--depth` is written by stylesketch.js: 0 is the card in front, 1 and 2 sit
behind it, each a little smaller and a little lower.
The two behind deliberately peek out below .deck's own box rather than
inside it, so the box keeps the plain single-image aspect ratio and the
phone frame is exactly the height it was before the deck existed. The
margin below reserves room for that overhang.
--------------------------------------------------------------------------- */
.deck {
position: relative;
aspect-ratio: 1792 / 2400;
/* This clears the overhang and nothing more: the fanned corners reach ~19px
past the box, so the margin only has to put them back inside the frame.
The visible gap before the receipt line is .app-receipt's padding-top,
the same way the gap above the header row is .app-chrome's padding —
one rule per gap, so neither one is two figures stacked together. */
margin-bottom: 19px;
/* Horizontal drags are ours, vertical ones stay with the page — without this
a swipe down the hero on a phone would fight the scroll. */
touch-action: pan-y;
}
.deck-card {
position: absolute;
/* Held off the side walls so the fanned cards have somewhere to splay into.
Without this gap their corners clear the phone bezel and hang outside the
frame, which reads as a bug rather than a stack. The prototype insets its
cards for the same reason. */
/* Width is stated rather than left to the two insets: an is a replaced
element, so `width: auto` resolves to its intrinsic width and spills past
the right inset instead of stretching between them. */
top: 0;
left: 12px;
width: calc(100% - 24px);
height: 100%;
object-fit: cover;
border-radius: calc(40px - var(--frame));
background: var(--surface);
box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
z-index: calc(10 - var(--depth, 0));
/* Read right to left: shrink the card a little, tilt it, then drop it. The
tilt is what fans the stack — it splays the lower corners past the front
card's edges, which straight scaling alone can't do because a smaller card
stays entirely inside a bigger one. Counter-clockwise, so the corner that
pokes out lands bottom-left and stays clear of the shuffle button. */
transform: translateY(calc(var(--depth, 0) * 10px))
rotate(calc(var(--depth, 0) * -5deg))
scale(calc(1 - var(--depth, 0) * 0.05));
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
user-select: none;
-webkit-user-drag: none;
}
/* Seed the depths here, not just from JS. Left to the fallback every card
would sit at depth 0, stacking them dead-on and letting the last one in the
DOM paint on top — so a no-JS visitor would get look three underneath look
one's caption. These give the right order on their own; the inline --depth
the script writes outranks them the moment it runs. Any card past the third
parks at the back rather than needing a new rule per look. */
.deck-card:nth-child(1) { --depth: 0; }
.deck-card:nth-child(2) { --depth: 1; }
.deck-card:nth-child(3) { --depth: 2; }
.deck-card:nth-child(n+4) { --depth: 3; }
/* Only the front card takes the pointer, so a click always lands on the look
the visitor can actually see rather than a sliver of the one behind it. */
.deck-card:not(.is-front) { pointer-events: none; }
.deck-card.is-front { cursor: grab; }
.deck-card.is-dragging { cursor: grabbing; transition: none; }
/* The hint reads as a line of instruction copy but is a real button, so the
deck stays reachable without a pointer. Sized off .fineprint so it sits with
the page's other asides rather than competing with the hero's CTAs. */
.deck-hint {
display: block;
margin: 0 auto;
padding: 15px 4px 0;
border: 0;
background: none;
font-family: var(--sans);
font-size: 0.78rem;
line-height: 1.5;
color: var(--muted);
cursor: pointer;
transition: color .15s ease;
}
/* A class selector beats the UA's [hidden] rule, so restate it — otherwise the
hint would show through before the JS has had a chance to wire it up. */
.deck-hint[hidden] { display: none; }
.deck-hint:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.deck-hint:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
/* The receipt belongs to whichever look is in front, so it fades as it swaps.
base.css already flattens this under prefers-reduced-motion. */
@keyframes receipt-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
.app-receipt.is-swap { animation: receipt-in .28s ease both; }
.app-chrome {
display: flex;
justify-content: space-between;
align-items: baseline;
/* The gap above and below this row reads the same. Above it is the phone's
own bezel plus this padding-top; below it is this padding-bottom on its
own, so the bottom restates --frame to land on the same figure. .deck
carries no top margin for the same reason — a second source of space
there is what made the row sit high in the frame. */
padding: 6px 8px calc(var(--frame) + 6px);
}
.app-greeting { font-family: var(--editorial); font-size: 1.06rem; color: var(--ink); }
.app-weather { font-size: 0.76rem; color: var(--muted); }
.app-receipt {
font-size: 0.74rem;
color: var(--muted);
/* Same trick as .app-chrome, mirrored: below this line is the phone's own
bezel, so the bottom padding subtracts --frame to leave the same 20px of
visible space the top padding gives. Above it .deck now reserves only its
overhang, so this padding-top is the whole gap. */
padding: 20px 8px calc(20px - var(--frame));
line-height: 1.45;
}
/* ---------------------------------- badges ---------------------------------
Store badges, drawn rather than shipped as artwork — see the STORE-LINK note
in index.html before launch.
Both stores are live at launch, so both badges are real links; the visitor's
platform decides which one is filled, and assets/stylesketch.js promotes it.
The pill radius is the same 40px token as .btn, so the badges read as part
of the same button family rather than pasted-in vendor chrome. */
.badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.center-badges { justify-content: center; }
.badge {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 10px 24px 10px 20px;
border: 1px solid var(--line);
border-radius: 40px;
background: var(--surface);
color: var(--ink);
text-decoration: none;
line-height: 1.15;
transition: transform .15s ease, box-shadow .15s ease;
}
.badge span {
display: flex;
flex-direction: column;
font-size: 0.97rem;
font-weight: 500;
}
.badge small {
font-weight: 400;
font-size: 0.68rem;
letter-spacing: 0.04em;
color: var(--muted);
}
.badge svg { flex: none; }
.badge:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
/* The base focus ring is currentColor, which is invisible on the filled
variant — white on an off-white page. Pin it to ink for both. */
.badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.badge-primary {
background: var(--ink);
border-color: var(--ink);
color: var(--surface);
}
.badge-primary small { color: rgba(255, 255, 255, .72); }
.badge-primary:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
/* -------------------------------- sections --------------------------------- */
.band { background: var(--surface); border-block: 1px solid var(--line); }
/* -------------------------------- features --------------------------------- */
.features { display: grid; gap: clamp(52px, 8vw, 96px); }
.feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(26px, 5vw, 68px);
align-items: center;
}
.feature-flip .feature-art { order: 2; }
.feature-art { display: flex; justify-content: center; }
.feature-copy h3 { margin-bottom: 12px; font-size: 1.45rem; }
/* ---------------------------------- steps ---------------------------------- */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 34px;
margin-bottom: 56px;
}
/* Flex column so .step-art can be pushed to the bottom. Grid stretches the
items to equal height, so the three artifacts land on one baseline however
uneven the copy above them is. */
.steps li {
display: flex;
flex-direction: column;
border-top: 1px solid var(--line);
padding-top: 20px;
}
.steps h3 { margin-bottom: 10px; }
/* Classed, not `.steps p`. That descendant selector is (0,0,1,1) and quietly
outranked every single-class rule on the paragraphs nested inside a step —
it was overriding .num and the whole .taste-card type scale. */
.steps .step-copy { color: var(--ink-2); line-height: 1.6; font-size: 0.96rem; }
/* ------------------------------ step artifacts ------------------------------
Fragments of the onboarding flow, rebuilt rather than screenshotted. The real
screens carry a live handle, a real face and screenshots of third-party
Instagram accounts, none of which can appear on a public page — so each of
these keeps the layout and swaps the content for something demonstrably
illustrative. Line art follows ConnectConsent, which uses it for this exact
reason.
aria-hidden throughout: the step copy beside them already says all of this,
and the auth cell's "@yourhandle" would only add noise read aloud. */
/* One height for all three, so the row reads as a set rather than three
unrelated objects.
76px is derived, not picked: at the 1100px layout a step column is 328px
((1052 - 2x34 gap) / 3), so a 4-up grid with 8px gaps gives (328 - 24) / 4 =
76px tiles. Setting the shared height to match makes those tiles exactly
square here, and the other two artifacts line up with them.
min-height, not height: below roughly 285px of column the style tags wrap to
a second line, and growing is better than clipping.
--art-r is the shared corner. One token so the three can't drift apart; the
circular avatar and the Instagram badge keep their own shapes. */
.step-art { --art-h: 76px; --art-r: 10px; margin-top: auto; padding-top: 22px; }
/* ---- 01: the sign-in cell ---- */
.auth-cell {
display: flex;
align-items: center;
gap: 12px;
min-height: var(--art-h);
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--art-r);
background: var(--surface);
}
.auth-avatar { position: relative; width: 42px; height: 42px; flex: none; }
.auth-face {
display: grid;
place-items: center;
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 50%;
background: #EFE7E1;
}
.auth-face svg { width: 25px; height: 25px; }
.auth-badge {
position: absolute;
right: -3px;
bottom: -3px;
display: grid;
place-items: center;
width: 19px;
height: 19px;
border-radius: 6px;
background: var(--surface);
}
.auth-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.auth-kicker { font-size: 0.72rem; color: #686F78; }
.auth-handle { font-size: 0.8rem; font-weight: 600; color: #262626; }
.auth-chev { font-size: 1.1rem; color: #686F78; }
/* ---- 02: the style profile it infers ---- */
.taste-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--art-h);
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: var(--art-r);
background: var(--surface);
}
/* Both label lines match .auth-kicker exactly, so the small type is one size
across all three artifacts. Tight line-heights: three lines have to sit
inside 76px, and the body default of 1.55 alone would overflow it. */
.taste-eyebrow {
font-size: 0.72rem;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.taste-tags {
margin-top: 4px;
font-family: var(--editorial);
font-size: 1rem;
line-height: 1.25;
color: var(--ink);
}
.taste-src { margin-top: 4px; font-size: 0.72rem; line-height: 1.2; color: var(--muted); }
/* ---- 03: the confirm grid ---- */
/* One row of four rather than a 2x2: a square 2x2 in a ~330px column is taller
than the other two artifacts and wrecks the shared baseline. */
.confirm-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
min-height: var(--art-h);
}
/* Fills the shared height rather than declaring aspect-ratio, which would make
the row's height float with the column width and break the match. At the
real layout width the two resolve to the same 76px, so these are square. */
.confirm-tile {
position: relative;
display: grid;
place-items: center;
border-radius: var(--art-r);
}
.confirm-tile svg { width: 56%; height: 56%; }
.confirm-check {
position: absolute;
top: 4px;
right: 4px;
display: grid;
place-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--ink);
color: #fff;
font-size: 0.55rem;
line-height: 1;
}
.item-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 14px;
}
.item-strip li {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 18px;
padding: 14px;
display: grid;
place-items: center;
}
.item-strip img { width: 100%; max-width: 118px; height: auto; }
/* -------------------------------- promises --------------------------------- */
.promises { display: grid; gap: 4px; }
.promises li {
border-top: 1px solid var(--line);
padding: 26px 0;
}
.promises li:last-child { border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.promises h3 { margin-bottom: 8px; }
.promises p { color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
/* ----------------------------------- cta -----------------------------------
Untinted, so it can't sit white-on-white under the .band it now follows.
The page alternates --bg and --surface down its whole length; the CTA used
to be the tinted end of that run because a plain section separated it from
the last band. With that section gone the CTA takes the untinted turn
instead, and the footer's own border-top still closes the page off. */
.cta { background: var(--bg); border-top: 1px solid var(--line); }
/* A band already draws a line on its bottom edge. Without this the CTA adds a
second one hard against it and the boundary renders as a 2px double rule.
Keyed off adjacency rather than deleted outright, so the CTA keeps its own
rule if a section is ever put back in between. */
.band + .cta { border-top: 0; }
.cta h2 { margin-bottom: 12px; }
.cta .lede { margin-bottom: 28px; }
/* ---------------------------------- footer --------------------------------- */
.site-footer {
background: var(--bg);
border-top: 1px solid var(--line);
padding-block: 44px 26px;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 26px;
border-bottom: 1px solid var(--line);
}
.footer-brand { max-width: 300px; }
.footer-brand .brand { display: block; margin-bottom: 8px; }
.footer-links ul { display: grid; gap: 9px; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { text-decoration: underline; }
/* Plain links, not the prototype's