3ca5983ecd
Adds a 'See it in motion' section on the Tokunia landing page with the rendered motion-design video (re-encoded 44MB -> ~20MB via ffmpeg libx264 CRF 23, same resolution/duration) and poster frame. Autoplay muted on load, tap/click the overlay button to unmute (browsers block unmuted autoplay anyway), styled to match the page's dark ink/receipt aesthetic.
839 lines
18 KiB
CSS
839 lines
18 KiB
CSS
/* ───────────────────────────────────────────────────────────────────────
|
|
Tokunia — landing page.
|
|
|
|
The page is a ledger printed on ink: a warm near-black ground, and one
|
|
piece of cream receipt stock carrying the product's whole thesis. Two
|
|
accents encode the two axes the product measures — ember for what a run
|
|
costs you, matcha for what it costs the planet. Nothing else is coloured.
|
|
─────────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
--ink: #0e0d0c;
|
|
--ink-2: #161311;
|
|
--ink-3: #1d1917;
|
|
--rule: #2c2622;
|
|
--fg: #ede9e3;
|
|
--muted: #8e857a;
|
|
|
|
--paper: #ede7da;
|
|
--paper-2: #ded5c3;
|
|
--paper-ink: #26221e;
|
|
--paper-muted: #6f675c;
|
|
|
|
--ember: #f97316;
|
|
--matcha: #8fb173;
|
|
|
|
--display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
|
|
--body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
|
|
--gutter: clamp(1.25rem, 5vw, 5rem);
|
|
--measure: 60ch;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--ink);
|
|
color: var(--fg);
|
|
font-family: var(--body);
|
|
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
|
|
line-height: 1.65;
|
|
/* A faint vertical ledger tint, so the ground isn't a flat black field. */
|
|
background-image: radial-gradient(
|
|
120% 80% at 70% -10%,
|
|
rgba(249, 115, 22, 0.06),
|
|
transparent 60%
|
|
);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--mono);
|
|
font-size: 0.9em;
|
|
color: var(--ember);
|
|
}
|
|
|
|
.skip {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: 0;
|
|
background: var(--paper);
|
|
color: var(--paper-ink);
|
|
padding: 0.6rem 1rem;
|
|
z-index: 20;
|
|
}
|
|
.skip:focus {
|
|
left: 0.5rem;
|
|
top: 0.5rem;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--ember);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* ── Top bar ─────────────────────────────────────────────────────────── */
|
|
|
|
.bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.1rem var(--gutter);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.wordmark {
|
|
font-family: var(--display);
|
|
font-weight: 800;
|
|
font-size: 1.15rem;
|
|
letter-spacing: -0.02em;
|
|
text-decoration: none;
|
|
}
|
|
.wordmark__ia {
|
|
color: var(--ember);
|
|
}
|
|
.wordmark__dot {
|
|
color: var(--muted);
|
|
padding: 0 0.06em;
|
|
}
|
|
|
|
.bar__nav {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.09em;
|
|
}
|
|
.bar__nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
padding-bottom: 2px;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 0.18s, border-color 0.18s;
|
|
}
|
|
.bar__nav a:hover {
|
|
color: var(--fg);
|
|
border-bottom-color: var(--ember);
|
|
}
|
|
|
|
/* ── Hero ────────────────────────────────────────────────────────────── */
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
|
gap: clamp(2rem, 6vw, 5rem);
|
|
align-items: center;
|
|
padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(3rem, 8vw, 6rem);
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 1.4rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.eyebrow::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1.6rem;
|
|
height: 1px;
|
|
background: var(--ember);
|
|
vertical-align: middle;
|
|
margin-right: 0.7rem;
|
|
}
|
|
|
|
.display {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-weight: 800;
|
|
font-size: clamp(2.9rem, 8.5vw, 5.6rem);
|
|
line-height: 0.94;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
.display em {
|
|
font-style: normal;
|
|
color: var(--ember);
|
|
}
|
|
|
|
.lede {
|
|
margin: 1.6rem 0 0;
|
|
max-width: 44ch;
|
|
color: #cfc8bf;
|
|
font-size: 1.08em;
|
|
}
|
|
|
|
.cta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
padding: 0.82rem 1.5rem;
|
|
border: 1px solid var(--rule);
|
|
color: var(--fg);
|
|
background: var(--ink-2);
|
|
transition: border-color 0.18s, background 0.18s, transform 0.18s;
|
|
}
|
|
.btn:hover {
|
|
border-color: var(--muted);
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn--primary {
|
|
background: var(--ember);
|
|
border-color: var(--ember);
|
|
color: #1a0d02;
|
|
font-weight: 600;
|
|
}
|
|
.btn--primary:hover {
|
|
background: #ff8a35;
|
|
border-color: #ff8a35;
|
|
}
|
|
|
|
.footnote {
|
|
margin: 1.4rem 0 0;
|
|
max-width: 42ch;
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ── The receipt (signature) ─────────────────────────────────────────── */
|
|
|
|
.receipt {
|
|
margin: 0;
|
|
justify-self: center;
|
|
}
|
|
|
|
.receipt__paper {
|
|
position: relative;
|
|
width: min(23rem, 100%);
|
|
background: var(--paper);
|
|
color: var(--paper-ink);
|
|
font-family: var(--mono);
|
|
font-size: 0.8rem;
|
|
line-height: 1.9;
|
|
padding: 2rem 1.6rem 2.6rem;
|
|
transform: rotate(-1.1deg);
|
|
box-shadow:
|
|
0 24px 50px -18px rgba(0, 0, 0, 0.85),
|
|
0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Torn thermal-paper edges, drawn as two zigzag strips that overhang the paper
|
|
rather than as a mask on the paper itself — a mask on the parent would clip
|
|
these pseudo-elements away, and would take the drop shadow with it. */
|
|
.receipt__paper::before,
|
|
.receipt__paper::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 9px;
|
|
background: var(--paper);
|
|
-webkit-mask: var(--zigzag);
|
|
mask: var(--zigzag);
|
|
--zigzag: conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) 0 0 /
|
|
14px 100% repeat-x;
|
|
}
|
|
.receipt__paper::before {
|
|
top: -9px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.receipt__paper::after {
|
|
bottom: -9px;
|
|
}
|
|
|
|
.receipt__head {
|
|
text-align: center;
|
|
}
|
|
.receipt__brand {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-weight: 800;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 0.16em;
|
|
line-height: 1.2;
|
|
}
|
|
.receipt__sub {
|
|
margin: 0.15rem 0 0;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--paper-muted);
|
|
}
|
|
|
|
.receipt__rule {
|
|
border: 0;
|
|
border-top: 1px dashed rgba(38, 34, 30, 0.42);
|
|
margin: 0.9rem 0;
|
|
}
|
|
.receipt__rule--double {
|
|
border-top: 3px double rgba(38, 34, 30, 0.6);
|
|
}
|
|
|
|
.receipt__meta {
|
|
margin: 0;
|
|
}
|
|
.receipt__meta > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
.receipt__meta dt {
|
|
color: var(--paper-muted);
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.72rem;
|
|
}
|
|
.receipt__meta dd {
|
|
margin: 0;
|
|
}
|
|
|
|
.receipt__items {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* The dotted leader is the page's structural device: label … value, which is
|
|
exactly what the product does to an agent run. */
|
|
.receipt__items li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.4rem;
|
|
}
|
|
.receipt__items li::before {
|
|
content: "";
|
|
order: 2;
|
|
flex: 1;
|
|
border-bottom: 1px dotted rgba(38, 34, 30, 0.45);
|
|
transform: translateY(-0.22em);
|
|
}
|
|
.receipt__items li span {
|
|
order: 1;
|
|
}
|
|
.receipt__items li b {
|
|
order: 3;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.receipt__items--eco b {
|
|
color: #4d6b39;
|
|
}
|
|
|
|
.receipt__total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin: 0;
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.receipt__total span {
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.receipt__total b {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.receipt__note {
|
|
margin: 0;
|
|
text-align: right;
|
|
font-size: 0.72rem;
|
|
color: var(--paper-muted);
|
|
}
|
|
.receipt__note--eco {
|
|
color: #4d6b39;
|
|
}
|
|
|
|
.receipt__section {
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.18em;
|
|
color: #4d6b39;
|
|
}
|
|
|
|
.receipt__thanks {
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.22em;
|
|
color: var(--paper-muted);
|
|
}
|
|
|
|
.receipt__caption {
|
|
margin: 2.2rem auto 0;
|
|
max-width: 30ch;
|
|
text-align: center;
|
|
font-size: 0.78rem;
|
|
line-height: 1.5;
|
|
color: var(--muted);
|
|
}
|
|
.receipt__caption a {
|
|
color: var(--muted);
|
|
text-underline-offset: 3px;
|
|
}
|
|
.receipt__caption a:hover {
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* Lines print in sequence on load, the way a thermal printer feeds paper. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.js [data-line] {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
.js .receipt--printing [data-line] {
|
|
animation: print-line 0.34s ease-out forwards;
|
|
animation-delay: calc(var(--i, 0) * 55ms + 200ms);
|
|
}
|
|
}
|
|
|
|
@keyframes print-line {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ── The reel ────────────────────────────────────────────────────────── */
|
|
|
|
.section--reel {
|
|
padding-top: 0;
|
|
padding-bottom: clamp(2.5rem, 6vw, 4rem);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.section--reel .section__title {
|
|
margin-top: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.reel {
|
|
position: relative;
|
|
/* Fixed aspect-ratio box so the layout never jumps between the poster
|
|
frame and the first decoded video frame. */
|
|
aspect-ratio: 16 / 9;
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--rule);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.reel__video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.reel__sound {
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
background: rgba(14, 13, 12, 0.72);
|
|
border-color: rgba(237, 233, 227, 0.22);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.reel__sound:hover {
|
|
background: rgba(14, 13, 12, 0.9);
|
|
border-color: var(--muted);
|
|
}
|
|
|
|
/* One pure-CSS speaker glyph (a wedge + a sound-wave arc), with a slash drawn
|
|
on top while muted. Unmuting just hides the slash and lets the arc read. */
|
|
.reel__sound-icon {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 0.95em;
|
|
height: 0.9em;
|
|
}
|
|
.reel__sound-icon::before {
|
|
/* the speaker wedge */
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 0.5em;
|
|
height: 0.6em;
|
|
transform: translateY(-50%);
|
|
background: currentColor;
|
|
clip-path: polygon(0% 35%, 35% 35%, 70% 0%, 70% 100%, 35% 65%, 0% 65%);
|
|
}
|
|
.reel__sound-icon::after {
|
|
/* the muted slash; rotated to a sound-wave arc once unmuted */
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 0.55em;
|
|
height: 0.55em;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
border-top: 1.5px solid currentColor;
|
|
}
|
|
.reel__sound.is-unmuted .reel__sound-icon::after {
|
|
right: -0.1em;
|
|
width: 0.4em;
|
|
height: 0.65em;
|
|
border: 1.5px solid currentColor;
|
|
border-left: 0;
|
|
border-top-right-radius: 999px;
|
|
border-bottom-right-radius: 999px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* ── Archive strip ───────────────────────────────────────────────────── */
|
|
|
|
.strip {
|
|
padding: clamp(2rem, 5vw, 3.2rem) var(--gutter);
|
|
border-top: 1px solid var(--rule);
|
|
border-bottom: 1px solid var(--rule);
|
|
background: var(--ink-2);
|
|
}
|
|
|
|
.strip__intro {
|
|
margin: 0 0 1.6rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.74rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.strip__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
|
|
gap: 1.8rem 2.5rem;
|
|
margin: 0;
|
|
}
|
|
.strip__stats dt {
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
order: 2;
|
|
}
|
|
.strip__stats dd {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: clamp(2rem, 4.5vw, 2.9rem);
|
|
line-height: 1;
|
|
letter-spacing: -0.03em;
|
|
font-variant-numeric: tabular-nums;
|
|
order: 1;
|
|
}
|
|
.strip__stats dd span {
|
|
color: var(--ember);
|
|
}
|
|
.strip__stats > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ── Generic section ─────────────────────────────────────────────────── */
|
|
|
|
.section {
|
|
padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.section__title {
|
|
margin: 0 0 clamp(2rem, 4vw, 3rem);
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.section__title::after {
|
|
content: "";
|
|
display: block;
|
|
height: 1px;
|
|
margin-top: 0.9rem;
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--rule) 0%,
|
|
var(--rule) 92%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* ── What it does: ledger lines ──────────────────────────────────────── */
|
|
|
|
.lines {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
counter-reset: none;
|
|
}
|
|
|
|
.line {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
|
|
gap: 1rem clamp(1.5rem, 5vw, 4rem);
|
|
padding: 1.6rem 0;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.line:last-child {
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.line__label {
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: 1.35rem;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
.line__label span {
|
|
border-bottom: 2px solid var(--ember);
|
|
padding-bottom: 0.15rem;
|
|
}
|
|
|
|
.line__body p {
|
|
margin: 0;
|
|
max-width: var(--measure);
|
|
color: #c6bfb6;
|
|
}
|
|
|
|
/* ── Screens ─────────────────────────────────────────────────────────── */
|
|
|
|
.shot {
|
|
margin: 0;
|
|
}
|
|
.shot img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border: 1px solid var(--rule);
|
|
background: var(--ink-2);
|
|
}
|
|
.shot figcaption {
|
|
margin-top: 0.85rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.shot--wide {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.shot-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
/* ── Pillars ─────────────────────────────────────────────────────────── */
|
|
|
|
.pillars {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
|
|
gap: 1px;
|
|
background: var(--rule);
|
|
border: 1px solid var(--rule);
|
|
}
|
|
|
|
.pillar {
|
|
background: var(--ink-2);
|
|
padding: clamp(1.6rem, 3vw, 2.2rem);
|
|
}
|
|
.pillar h3 {
|
|
margin: 0 0 0.9rem;
|
|
font-family: var(--display);
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.pillar p {
|
|
margin: 0;
|
|
color: #c6bfb6;
|
|
font-size: 0.96em;
|
|
}
|
|
.pillar--eco {
|
|
border-top: 2px solid var(--matcha);
|
|
}
|
|
.pillar--eco h3 {
|
|
color: var(--matcha);
|
|
}
|
|
|
|
/* ── Run it ──────────────────────────────────────────────────────────── */
|
|
|
|
.run {
|
|
max-width: 52rem;
|
|
}
|
|
|
|
.run__code {
|
|
margin: 0;
|
|
padding: 1.5rem;
|
|
background: var(--ink-2);
|
|
border: 1px solid var(--rule);
|
|
border-left: 2px solid var(--ember);
|
|
overflow-x: auto;
|
|
font-family: var(--mono);
|
|
font-size: 0.85rem;
|
|
line-height: 1.9;
|
|
color: var(--fg);
|
|
}
|
|
.run__code code {
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
.run__comment {
|
|
color: var(--matcha);
|
|
}
|
|
|
|
.run__note {
|
|
margin: 1.3rem 0 0;
|
|
max-width: var(--measure);
|
|
color: #c6bfb6;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* The build caveat is set apart rather than buried: it is the one thing a
|
|
reader would otherwise discover the hard way. */
|
|
.run__caveat {
|
|
margin: 1.3rem 0 0;
|
|
max-width: var(--measure);
|
|
padding-left: 1rem;
|
|
border-left: 2px solid var(--matcha);
|
|
font-size: 0.9em;
|
|
color: var(--muted);
|
|
}
|
|
.run__caveat b {
|
|
color: var(--matcha);
|
|
font-weight: 600;
|
|
}
|
|
.run__caveat a {
|
|
color: #c6bfb6;
|
|
text-underline-offset: 3px;
|
|
}
|
|
.run__caveat a:hover {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.section--run .cta {
|
|
margin-top: 1.8rem;
|
|
}
|
|
|
|
/* ── Footer ──────────────────────────────────────────────────────────── */
|
|
|
|
.foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.9rem 2rem;
|
|
padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
|
|
}
|
|
|
|
.foot__mark {
|
|
margin: 0;
|
|
font-family: var(--display);
|
|
font-weight: 800;
|
|
font-size: 1.05rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.foot__mark span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.foot__etym {
|
|
margin: 0;
|
|
flex: 1;
|
|
min-width: 16rem;
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
}
|
|
.foot__etym i {
|
|
color: #c6bfb6;
|
|
}
|
|
|
|
.foot__nav {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.09em;
|
|
}
|
|
.foot__nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 0.18s, border-color 0.18s;
|
|
}
|
|
.foot__nav a:hover {
|
|
color: var(--fg);
|
|
border-bottom-color: var(--ember);
|
|
}
|
|
|
|
/* ── Narrow screens ──────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 60rem) {
|
|
.hero {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 3.5rem;
|
|
}
|
|
.receipt {
|
|
justify-self: start;
|
|
}
|
|
.line {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 0.7rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 30rem) {
|
|
.receipt__paper {
|
|
transform: none;
|
|
width: 100%;
|
|
}
|
|
.bar__nav {
|
|
gap: 1rem;
|
|
}
|
|
.reel__sound-label {
|
|
display: none;
|
|
}
|
|
}
|