/* ============================================
ListingPrep home — page-specific layout (Étape B, palier 4).
Scope: /index.html ONLY. Reuses tokens from /css/style.css
+ /css/listingprep.css (loaded before this), declares Schibsted
Grotesk + JetBrains Mono via Google Fonts in .
Design intent: visual reference from Claude Design's ZIP, re-
implemented through project tokens. Accent = --color-brand (teal
#1E4D52), NOT the green #1c6e54 of the prototype. Hero "
"
from the prototype removed — wrap is responsive via text-wrap:
pretty + a generous max-width on the headline.
A few home-only local tokens are defined inside the body scope
for warm-cream surface variants used in tool-card visuals; they
are NOT promoted to :root because they belong to the home page's
editorial chrome, not to the global token system.
============================================ */
body.home-page {
font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 17px;
line-height: 1.55;
background: #f4efe5; /* warm cream — page background */
color: #1d1b16; /* warm ink — slightly browner than --color-text */
/* Home-only local tokens for editorial chrome. */
--home-cream: #f4efe5;
--home-cream-deep: #ece5d6;
--home-surface: #fcfaf4;
--home-surface-2: #fbf7ee;
--home-ink: #1d1b16;
--home-ink-soft: #4a4539;
--home-muted: #756d5d;
--home-line: #e6ddcb;
--home-line-strong: #d9cfb9;
--home-brand-tint: #e4ede7;
--home-brand-tint-2:#d6e4dc;
}
body.home-page h1,
body.home-page h2,
body.home-page h3,
body.home-page h4,
body.home-page h5 {
font-family: "Schibsted Grotesk", system-ui, sans-serif;
}
/* ===== Header overrides for the home (sticky + backdrop blur) ===== */
body.home-page .site-header {
background: color-mix(in srgb, var(--home-cream) 86%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--home-line);
}
body.home-page .site-header__inner {
max-width: 1180px;
padding: 0 2rem;
height: 72px;
}
body.home-page .site-header__brand {
font-family: "Schibsted Grotesk", system-ui, sans-serif;
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.02em;
color: var(--home-ink);
}
/* Wordmark wrapper uses the home's warm ink (vs --color-text from
listingprep.css which is the cooler tool-chrome dark). Higher
specificity than listingprep.css's class-only rule. */
body.home-page .site-header__brand .brand-wordmark {
color: var(--home-ink);
}
/* Inner highlight span (the one wrapping "Prep" inside .brand-wordmark).
Going one level deeper avoids matching .brand-wordmark itself (which
would turn "Listing" teal — defeating the dark wordmark above). */
body.home-page .site-header__brand .brand-wordmark > span {
color: var(--color-brand);
}
/* Home nav — main-nav inter-tools + section anchors + free pill */
.home-nav {
display: flex;
align-items: center;
gap: 1.85rem;
}
.home-nav__link {
color: var(--home-ink-soft);
font-weight: 500;
font-size: .95rem;
text-decoration: none;
transition: color .15s;
}
.home-nav__link:hover { color: var(--color-brand); }
.home-nav__pill {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .72rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-brand);
background: var(--home-brand-tint);
border: 1px solid var(--home-brand-tint-2);
padding: .3rem .7rem;
border-radius: 999px;
white-space: nowrap;
}
@media (max-width: 760px) {
.home-nav__link--tool { display: none; }
}
@media (max-width: 540px) {
.home-nav__link--how { display: none; }
}
/* ===== Shared utilities for the home ===== */
.home-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 2rem;
}
.home-eyebrow {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-brand);
}
/* ===== Hero ===== */
.hero { padding: 4.5rem 0 1.8rem; }
.hero__audience {
margin-bottom: 1.4rem;
display: flex;
align-items: center;
gap: .625rem;
flex-wrap: wrap;
}
.hero__dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--home-line-strong);
}
.hero__h1 {
/* RESPONSIVE WRAP — no hardcoded
. The headline wraps naturally
via text-wrap: pretty and a sensible max-width. */
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
line-height: 1.04;
letter-spacing: -0.03em;
font-weight: 700;
max-width: 18ch;
text-wrap: pretty;
margin: 0;
}
.hero__free { color: var(--color-brand); }
.hero__sub {
margin: 1.5rem 0 0;
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.55;
color: var(--home-ink-soft);
max-width: 60ch;
text-wrap: pretty;
}
.hero__sub b { color: var(--home-ink); font-weight: 600; }
/* ===== Tool cards (the hub) ===== */
.tools {
margin-top: 2.85rem;
display: grid;
grid-template-columns: 1.52fr 1fr;
grid-template-rows: auto auto;
gap: 1.2rem;
}
.tool-card {
background: var(--home-surface);
border: 1px solid var(--home-line);
border-radius: 22px;
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
display: flex;
flex-direction: column;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-card:hover {
transform: translateY(-3px);
box-shadow: 0 2px 6px rgba(29, 27, 22, 0.05), 0 30px 60px -28px rgba(29, 27, 22, 0.3);
border-color: var(--home-line-strong);
}
.tool-card__body {
padding: 1.6rem 1.75rem;
display: flex;
flex-direction: column;
gap: .45rem;
}
.tool-card__tag {
display: flex;
align-items: center;
gap: .55rem;
margin-bottom: .15rem;
}
.tool-card__tag .step-n {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
font-weight: 500;
color: var(--home-muted);
letter-spacing: .06em;
}
.tool-card h3 {
font-size: 1.55rem;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0;
}
.tool-card__benefit {
color: var(--home-muted);
font-size: 1rem;
line-height: 1.5;
max-width: 34ch;
margin: 0;
}
.tool-card__open {
margin-top: .65rem;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 600;
font-size: .95rem;
color: var(--color-brand);
transition: gap .15s;
}
.tool-card:hover .tool-card__open { gap: .85rem; }
.badge-primary {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .65rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--color-brand);
padding: .25rem .55rem;
border-radius: 999px;
}
/* Primary card spans 2 rows */
.tool-card--primary { grid-row: 1 / 3; }
.tool-card--primary .tool-card__body { padding: 1.9rem 2rem .5rem; }
.tool-card--primary h3 { font-size: 1.85rem; }
.tool-card--primary .tool-card__benefit { font-size: 1.1rem; }
/* Card visual block */
.tool-card__visual {
position: relative;
flex: 1;
min-height: 180px;
}
/* Resize visual — abstract art frame + crop overlay */
.viz-resize {
background:
repeating-linear-gradient(45deg, transparent 0 13px, rgba(29, 27, 22, 0.022) 13px 14px),
linear-gradient(180deg, #f6f1e7, #efe9dc);
padding: 2.5rem 2rem 2.75rem;
display: grid;
place-items: center;
min-height: 260px;
}
.viz-resize__stage {
position: relative;
width: min(380px, 100%);
}
.viz-resize__art {
aspect-ratio: 4/5;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
border: 1px solid rgba(29, 27, 22, 0.06);
background: linear-gradient(160deg, #f0ece2 0 38%, #c9663f 38% 70%, #3f5a66 70% 100%);
position: relative;
}
.viz-resize__art::after {
content: "";
position: absolute;
top: 24%;
left: 24%;
width: 30%;
aspect-ratio: 1;
border-radius: 50%;
background: #d9a441;
}
.viz-resize__crop {
position: absolute;
inset: 14% 10% 30% 12%;
border: 1.5px solid #fff;
box-shadow: 0 0 0 1px rgba(30, 77, 82, 0.5), 0 0 0 9999px rgba(29, 27, 22, 0.28);
border-radius: 2px;
}
.viz-resize__handle {
position: absolute;
width: 9px;
height: 9px;
background: #fff;
border: 1.5px solid var(--color-brand);
border-radius: 2px;
}
.viz-resize__handle--tl { top: -5px; left: -5px; }
.viz-resize__handle--tr { top: -5px; right: -5px; }
.viz-resize__handle--bl { bottom: -5px; left: -5px; }
.viz-resize__handle--br { bottom: -5px; right: -5px; }
.viz-resize__chip {
position: absolute;
top: -14px;
right: -10px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .7rem;
font-weight: 600;
background: var(--color-brand);
color: #fff;
padding: .35rem .65rem;
border-radius: 999px;
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
}
.viz-resize__dims {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: .45rem;
}
.viz-resize__dims span {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .68rem;
font-weight: 500;
background: rgba(29, 27, 22, 0.82);
color: #fbf7ee;
padding: .3rem .55rem;
border-radius: 6px;
white-space: nowrap;
}
/* Mockup visual — framed art on a wall */
.viz-mockup {
background: linear-gradient(180deg, #efe8da, #e7dfce);
padding: 1.75rem;
display: grid;
place-items: center;
position: relative;
min-height: 220px;
}
.viz-mockup::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 26px;
background: linear-gradient(180deg, #e1d8c5, #d8cdb6);
border-top: 1px solid rgba(29, 27, 22, 0.07);
}
.viz-mockup__frame {
position: relative;
width: 168px;
padding: 13px;
background: #fbf8f1;
border: 1px solid rgba(29, 27, 22, 0.1);
border-radius: 3px;
box-shadow: 0 18px 30px -14px rgba(29, 27, 22, 0.4);
}
.viz-mockup__mat {
padding: 16px;
background: #fff;
border: 1px solid rgba(29, 27, 22, 0.04);
}
.viz-mockup__art {
aspect-ratio: 4/5;
background: linear-gradient(160deg, #f0ece2 0 38%, #c9663f 38% 70%, #3f5a66 70% 100%);
position: relative;
}
.viz-mockup__art::after {
content: "";
position: absolute;
top: 24%;
left: 24%;
width: 30%;
aspect-ratio: 1;
border-radius: 50%;
background: #d9a441;
}
/* PDF visual — tilted document with link chip */
.viz-pdf {
background: linear-gradient(180deg, #efe9dd, #e9e1d0);
padding: 2rem;
display: grid;
place-items: center;
min-height: 220px;
position: relative;
}
.viz-pdf__doc {
width: 178px;
aspect-ratio: 8.5/11;
background: #fff;
border-radius: 6px;
border: 1px solid rgba(29, 27, 22, 0.08);
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
padding: 1.1rem 1rem;
display: flex;
flex-direction: column;
gap: .55rem;
position: relative;
transform: rotate(-2deg);
}
.viz-pdf__tag {
position: absolute;
top: 13px;
right: -12px;
transform: rotate(2deg);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .62rem;
font-weight: 700;
letter-spacing: .08em;
background: #c9663f;
color: #fff;
padding: .25rem .5rem;
border-radius: 5px;
}
.viz-pdf__thumb {
aspect-ratio: 16/10;
border-radius: 4px;
background: linear-gradient(160deg, #f0ece2 0 38%, #c9663f 38% 70%, #3f5a66 70% 100%);
}
.viz-pdf__line {
height: 7px;
border-radius: 4px;
background: #ece6da;
}
.viz-pdf__line--short { width: 60%; }
.viz-pdf__link-chip {
margin-top: auto;
display: flex;
align-items: center;
gap: .35rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .62rem;
font-weight: 500;
color: var(--color-brand);
background: var(--home-brand-tint);
border: 1px solid var(--home-brand-tint-2);
padding: .35rem .5rem;
border-radius: 6px;
}
.viz-pdf__link-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 860px) {
.tools { grid-template-columns: 1fr; }
.tool-card--primary { grid-row: auto; }
}
/* ===== How it works ===== */
.how { padding: 6rem 0 2rem; }
.how__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.how__head h2 {
font-size: clamp(1.75rem, 3.4vw, 2.4rem);
letter-spacing: -0.025em;
font-weight: 700;
margin: 0;
}
.how__head p {
color: var(--home-muted);
max-width: 40ch;
margin: 0;
}
.how__steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
}
.how__steps::before {
content: "";
position: absolute;
top: 27px;
left: 9%;
right: 9%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--home-line-strong) 0 6px, transparent 6px 12px);
z-index: 0;
}
.how__step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 .65rem;
}
.how__step-ic {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--home-surface);
border: 1px solid var(--home-line);
box-shadow: 0 1px 2px rgba(29, 27, 22, 0.05);
display: grid;
place-items: center;
color: var(--color-brand);
margin-bottom: 1rem;
}
.how__step--key .how__step-ic {
background: var(--color-brand);
color: #fff;
border-color: var(--color-brand);
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
}
.how__step-n {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .68rem;
color: var(--home-muted);
letter-spacing: .08em;
margin-bottom: .25rem;
}
.how__step h4 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 .25rem;
}
.how__step p {
font-size: .85rem;
color: var(--home-muted);
line-height: 1.4;
max-width: 18ch;
margin: 0;
}
@media (max-width: 760px) {
.how__steps { grid-template-columns: repeat(2, 1fr); gap: 2rem .75rem; }
.how__steps::before { display: none; }
}
/* Host concept + trust block */
.host-note {
margin-top: 3.5rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
border: 1px solid var(--home-line);
border-radius: 22px;
overflow: hidden;
background: var(--home-surface);
box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
}
.host-note__col { padding: 2.15rem 2.25rem; }
.host-note__col--lead {
background: var(--color-brand);
color: #eaf2ee;
}
.host-note__col--lead .home-eyebrow { color: #bfe0d0; }
.host-note__col--lead h3 {
color: #fff;
font-size: 1.5rem;
letter-spacing: -0.02em;
margin: .75rem 0 .75rem;
font-weight: 700;
}
.host-note__col--lead p {
color: #d4e6dd;
line-height: 1.6;
font-size: 1.05rem;
margin: 0;
}
.host-note__col--trust {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.trust-row {
display: flex;
gap: .9rem;
align-items: flex-start;
}
.trust-row__ic {
flex: none;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--home-brand-tint);
color: var(--color-brand);
display: grid;
place-items: center;
}
.trust-row h5 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 .2rem;
}
.trust-row p {
font-size: .92rem;
color: var(--home-muted);
line-height: 1.5;
margin: 0;
}
@media (max-width: 760px) {
.host-note { grid-template-columns: 1fr; }
}
/* ===== Email capture (Kit form bande dédiée) ===== */
.notify { padding: 6rem 0 2.5rem; }
.notify__card {
background: var(--home-ink);
color: var(--home-cream);
border-radius: 26px;
padding: 3.5rem 3.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
position: relative;
overflow: hidden;
}
.notify__card::after {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(30, 77, 82, 0.45), transparent 70%);
}
.notify__roadmap {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: #8fc4ae;
margin: 0 0 .9rem;
}
.notify__card h2 {
font-size: clamp(1.6rem, 3vw, 2.15rem);
letter-spacing: -0.025em;
line-height: 1.08;
font-weight: 700;
margin: 0;
}
.notify__sub {
margin: .75rem 0 0;
color: #c4bdac;
max-width: 38ch;
}
/* ===== Kit form (stripped + restyled) =====
Kit's