/* ============================================================================
COMPOSITION v2 — the actual layout rebuild.
----------------------------------------------------------------------------
WHAT WAS WRONG
The previous pass changed tokens (violet->copper, greys, Inter, motion) but
every section kept the identical shape:
Seven sections, six of them that same full-width stack. That is why it read as
"only the colour changed" — because structurally, it had.
WHAT LINEAR ACTUALLY DO
Measured on linear.app, the page is not a stack of sections. It is:
* an oversized centred headline with NO button, then the product UI as a
framed artifact sitting on a gradient floor, wider than the text column
* numbered figure blocks (FIG 0.1) in ALTERNATING 2-column directions
* a full-bleed statement band between them
* section rhythm of 96px, one focal point per screen
THE PRINCIPLE BEING APPLIED
A page should not be a vertical list of equivalent blocks. It should vary:
full-bleed -> contained, text-led -> artifact-led, dense -> sparse.
**If two adjacent sections have the same internal geometry, one of them has
not been designed.** That is the test this file exists to pass.
========================================================================== */
/* ------------------------------------------------------------- 1. HERO ------ */
/* Centred and full-bleed, oversized. The headline is the product promise and it
gets the whole width; the artifact sits BELOW it, not beside it. That single
change is what stops the hero reading as a generic left-text/right-image split. */
.hero-v2 {
position: relative;
padding: 132px 0 0;
text-align: center;
overflow: hidden;
}
.hero-v2 .hero-in {
max-width: 980px;
margin: 0 auto;
padding: 0 var(--sp-24);
position: relative;
z-index: 2;
}
.hero-v2 h1 {
font-size: clamp(40px, 7.2vw, 76px);
font-weight: 510;
line-height: 0.98;
letter-spacing: -0.028em;
color: var(--paper);
margin: 0 auto var(--sp-24);
max-width: 15ch;
text-wrap: balance;
}
.hero-v2 .hero-lead {
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.55;
color: var(--fog);
max-width: 46ch;
margin: 0 auto var(--sp-32);
}
.hero-v2 .hero-cta { justify-content: center; }
.hero-v2 .hero-note { justify-content: center; }
/* the "New" pill above the headline — Linear's one small chrome accent */
.pill-new {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 12px 4px 5px; margin-bottom: var(--sp-24);
border: 1px solid var(--line); border-radius: var(--r-pill);
background: rgba(255,255,255,.03);
font-size: 12.5px; color: var(--mist);
transition: border-color var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui);
}
.pill-new:hover { border-color: var(--accent-line); color: var(--paper); text-decoration: none; }
.pill-new b {
background: var(--accent); color: var(--accent-ink);
font-size: 11px; font-weight: 590; padding: 2px 8px; border-radius: var(--r-pill);
}
.pill-new .arw { transition: transform var(--t-ui) var(--ease-out); }
.pill-new:hover .arw { transform: translateX(2px); }
.hero-eyebrow-v2 {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--fog);
margin-bottom: var(--sp-20);
}
/* Same fix as the marketing eyebrow: decoration, not a status light. Neutral, and the
pulse is gone — a pulsing green dot next to a section label asserts "live" for something
that is not a status. --ok is reserved for real status. */
.hero-eyebrow-v2 .live {
width: 6px; height: 6px; border-radius: 50%;
background: var(--fog); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fog) 22%, transparent);
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 6%, transparent); }
}
/* ------------------------------------------------- 2. THE ARTIFACT + FLOOR -- */
/* Linear's signature: the product UI framed, floating on an atmospheric floor that
fades from the canvas into a light wash. The frame is wider than the text column
so it bleeds toward the viewport edges. Hairline border, NO outer shadow stack —
the floor does the grounding. */
.floor {
position: relative;
margin-top: 72px;
padding-bottom: 96px;
}
.floor::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(70% 100% at 50% 0%, rgba(232,160,85,.10) 0%, transparent 62%),
linear-gradient(180deg, transparent 0%, rgba(208,214,224,.075) 62%, transparent 100%);
pointer-events: none;
}
.floor::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 54px 54px;
-webkit-mask-image: radial-gradient(62% 78% at 50% 12%, #000 0%, transparent 74%);
mask-image: radial-gradient(62% 78% at 50% 12%, #000 0%, transparent 74%);
pointer-events: none;
}
.artifact {
position: relative;
z-index: 2;
max-width: 1080px;
margin: 0 auto;
padding: 0 var(--sp-24);
}
.artifact .codeblock {
box-shadow: var(--inset-hairline), 0 40px 90px -40px rgba(0,0,0,.85),
0 0 0 1px rgba(255,255,255,.02);
}
/* the subtle tilt Linear use on the hero artifact */
@media (min-width: 941px) {
.artifact.tilt .codeblock {
transform: perspective(2200px) rotateX(3.2deg);
transform-origin: top center;
}
}
/* ------------------------------------------------------- 3. FIGURE BLOCKS --- */
/* Numbered, alternating. The index is a monospace micro-label with a hairline rule,
which is the cheapest way to make a section read as engineered rather than
marketed. Direction alternates so the eye zig-zags instead of running straight
down a single column. */
.fig { padding: var(--section-gap) 0; border-top: 1px solid var(--line); }
.fig-in {
max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-24);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 72px; align-items: center;
}
.fig-in.flip .fig-text { order: 2; }
.fig-in.flip .fig-art { order: 1; }
@media (max-width: 941px) {
.fig-in { grid-template-columns: minmax(0,1fr); gap: 40px; }
.fig-in.flip .fig-text { order: 0; }
.fig-in.flip .fig-art { order: 0; }
}
.fig-n {
display: flex; align-items: center; gap: 10px;
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
margin-bottom: var(--sp-20);
}
.fig-n::after {
content: ""; flex: 1; height: 1px; background: var(--line); max-width: 78px;
}
.fig-text h2 {
font-size: clamp(26px, 3.4vw, 38px); font-weight: 510; line-height: 1.08;
letter-spacing: -0.024em; color: var(--paper); margin: 0 0 var(--sp-16);
display: block; text-transform: none;
}
.fig-text h2::before { display: none; }
.fig-text p { color: var(--fog); font-size: 15.5px; line-height: 1.65; margin: 0 0 var(--sp-16); }
.fig-text .arrow-link { margin-top: var(--sp-8); }
.fig-art { min-width: 0; }
/* a hairline data list — used instead of a table where a table would be too heavy */
.dlist { display: grid; gap: 0; }
.dlist .row {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--sp-16); padding: 13px 0; border-bottom: 1px solid var(--line);
}
.dlist .row:first-child { border-top: 1px solid var(--line); }
.dlist .k { color: var(--fog); font-size: 13.5px; }
.dlist .v {
font-family: var(--mono); font-size: 14px; font-weight: 500;
font-variant-numeric: tabular-nums; color: var(--mist);
}
.dlist .v.accent { color: var(--accent); }
/* ---------------------------------------------------- 4. STATEMENT BAND ----- */
/* Linear's "A new species of product tool." — a full-bleed band whose ONLY job is
one sentence. No card, no columns, no list. This is the pacing device: it breaks
a run of dense sections with deliberate emptiness. */
.statement {
padding: calc(var(--section-gap) * 1.15) 0;
border-top: 1px solid var(--line);
background: var(--carbon);
text-align: center;
}
.statement .kicker {
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
margin-bottom: var(--sp-24);
}
.statement .big {
font-size: clamp(28px, 4.4vw, 52px); font-weight: 510; line-height: 1.06;
letter-spacing: -0.028em; color: var(--paper);
max-width: 22ch; margin: 0 auto var(--sp-20); text-wrap: balance;
}
.statement .big em { font-style: normal; color: var(--fog); }
.statement .sub { color: var(--fog); font-size: 16px; max-width: 54ch; margin: 0 auto; }
/* ------------------------------------------------------- 5. MARQUEE STRIP --- */
/* Linear's customer logo strip. Ours carries live model names, which is better
material: it is real, it changes, and it doubles as a catalogue. Two copies of
the track translate by -50% so the loop is seamless with no JS. */
.marquee {
position: relative; overflow: hidden;
padding: var(--sp-32) 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-label {
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: var(--fog);
text-align: center; margin-bottom: var(--sp-20);
}
.marquee-track {
display: flex; gap: 72px; width: max-content;
animation: marquee 44s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .m {
display: flex; align-items: baseline; gap: 9px;
color: var(--fog); font-size: 15px; white-space: nowrap;
transition: color var(--t-ui) var(--ease-ui);
}
.marquee-track .m:hover { color: var(--mist); }
.marquee-track .m b { color: var(--mist); font-weight: 510; }
.marquee-track .m span {
font-family: var(--mono); font-size: 12px; color: var(--ash);
font-variant-numeric: tabular-nums;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
/* -------------------------------------------------------- 6. STEP RAIL ------ */
/* Replaces the stacked .steps list. A horizontal numbered rail reads as a pipeline
(which it is: buy -> key -> call) rather than as three more paragraphs. */
.rail3 {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; counter-reset: step;
}
@media (max-width: 821px) { .rail3 { grid-template-columns: minmax(0, 1fr); } }
.rail3 .r {
position: relative; padding: 0 var(--sp-24) 0 0;
border-left: 1px solid var(--line);
padding-left: var(--sp-24);
}
.rail3 .r:first-child { border-left: 0; padding-left: 0; }
.rail3 .r::before {
counter-increment: step;
content: "0" counter(step);
display: block;
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: .1em; color: var(--accent); margin-bottom: var(--sp-16);
}
.rail3 .r h3 {
font-size: 17px; font-weight: 510; letter-spacing: -0.011em;
color: var(--paper); margin: 0 0 8px;
}
.rail3 .r p { color: var(--fog); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 821px) {
.rail3 .r { border-left: 0; padding-left: 0; padding-bottom: var(--sp-24);
border-bottom: 1px solid var(--line); }
.rail3 .r:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* ---------------------------------------------------------- 7. FAQ / Q&A ---- */
/* Two columns of independent disclosure. Deliberately NOT a card — the hairline
between rows is enough, and a card here would be the third card in a row. */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
cursor: pointer; list-style: none; padding: 18px 0;
font-size: 15px; font-weight: 510; color: var(--mist);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
transition: color var(--t-fast) var(--ease-ui);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--paper); }
.qa summary::after {
content: ""; flex: none; width: 9px; height: 9px;
border-right: 1.5px solid var(--fog); border-bottom: 1.5px solid var(--fog);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-ui) var(--ease-out);
}
.qa details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.qa .ans { padding: 0 0 20px; max-width: 68ch; }
.qa .ans p { color: var(--fog); font-size: 14.5px; line-height: 1.7; margin: 0; }
.qa .ans p + p { margin-top: 10px; }
/* ------------------------------------------------------ 8. CLOSING CTA ------ */
/* The one filled accent surface on the page, scaled to a panel. Ink on copper. */
.cta-v2 {
position: relative; overflow: hidden;
padding: calc(var(--section-gap) * .9) 0;
border-top: 1px solid var(--line);
text-align: center;
}
.cta-v2::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(58% 130% at 50% 100%, rgba(232,160,85,.16) 0%, transparent 68%);
pointer-events: none;
}
.cta-v2 .in { position: relative; z-index: 1; }
.cta-v2 h2 {
font-size: clamp(28px, 4vw, 46px); font-weight: 510; line-height: 1.05;
letter-spacing: -0.028em; color: var(--paper);
margin: 0 auto var(--sp-16); max-width: 20ch; display: block; text-transform: none;
}
.cta-v2 h2::before { display: none; }
.cta-v2 p { color: var(--fog); font-size: 16px; margin: 0 auto var(--sp-32); max-width: 46ch; }
.cta-v2 .hero-cta { justify-content: center; }
/* -------------------------------------------------- 9. SCROLL PROGRESS ------ */
/* A 2px accent rule tracking read position. Small, functional, and it is the only
linear-gradient left on the site (Linear's own rule allows gradients here). */
.progress {
position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
background: linear-gradient(90deg, var(--accent), var(--accent-bright));
width: 0; transition: width 90ms linear;
pointer-events: none;
}
/* ------------------------------------------------ 10. HERO ENTRANCE --------- */
/* Staggered entrance on load, distinct from the scroll reveals. Runs once. */
.js .hero-v2 .anim {
opacity: 0; transform: translateY(14px);
animation: heroIn 800ms var(--ease-out) forwards;
/* delay comes from the element, not its position. Using :nth-child here was a
real bug: there are six .anim children but only four delays were defined, so
the CTA row and the note animated FIRST (0ms) — before the headline. An
explicit property cannot be silently broken by adding an element. */
animation-delay: var(--d, 0ms);
}
.js .floor { opacity: 0; animation: floorIn 1100ms var(--ease-out) 420ms forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes floorIn { from { opacity: 0; transform: translateY(30px) scale(.985); }
to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.js .hero-v2 .anim, .js .floor { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* -------------------------------------------------- 11. TOUCH DENSITY ------- */
/* Standalone links need real targets. Inline links inside prose do NOT get one:
growing them to 44px would break the line rhythm and look far worse than a small
inline target. Measured before: .arrow-link 25px, .pill-new 32px. */
.arrow-link { min-height: 40px; align-items: center; padding: 6px 0; }
.pill-new { min-height: 36px; }
@media (hover: none) and (pointer: coarse) {
.arrow-link { min-height: 44px; }
.pill-new { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.qa summary { padding: 20px 0; min-height: 48px; }
}
/* ------------------------------------------- 12. CLOSING CTA → FOOTER ------- */
/* THE GAP. Measured on the live page before this rule: 168px of dead space between
the bottom of the "Get credit / Read the docs" buttons and the top of the footer,
stacked from FOUR independent sources:
86px padding-bottom on .cta-v2 (calc(--section-gap) * .9)
72px padding-bottom on main (app.css:149 main{padding:30px 0 72px})
96px margin-top on .pub-foot (system.css:740)
-----
254px of which the last 86px is pure empty box
The 72px is the real offender: `main`'s padding-bottom was written for the console,
where content is the LAST thing on the page, so it reads as breathing room. In the
public shell `main` is always followed by the footer, which brings its own 64px of
top padding — so that 72px is a second gap stacked on a gap.
Fix: neutralise `main`'s bottom padding in the public shell only. The selector is
`main#main` (the public shell's id, console's has none), so the console's
own spacing is untouched. Then trim the CTA's own padding a little, and keep a
measured 48px so the button does not collide with the footer's hairline. */
body:has(.pub-foot) main#main { padding-bottom: 0; }
.cta-v2 { padding: var(--sp-64) 0 var(--sp-48); }
/* The footer's own offset is part of the same gap, so it is set here rather than
left at the global 96px. Both surfaces are public-shell-only, so the console's
footer (if any) keeps its original spacing. */
body:has(.pub-foot) .pub-foot { margin-top: var(--sp-16); }