/* Shared layer for the standalone pages — /meshtastic, /privacy, /terms. Loaded AFTER /legal.css, whose chrome (header, footer, scroll-to-top, theme cross-fade, fonts, twin glows) every page shares unchanged, and BEFORE a page's own sheet (/meshtastic.css). It is the landing's design system rebuilt in plain CSS: slate canvas, Sora over Inter, rounded-3xl cards, uppercase kickers, gradient pills. Each page wears ONE accent: Meshtastic green by default (the LoRa page), or the app's own blue with . #67ea94 is a LIGHT colour (~1.5:1 on white), so light surfaces use a darker build of the same hue, #0e7c46 (~5.3:1) — the rule the landing's LoRa card follows. legal.css styles BARE elements for the old prose column (section, h1, h2, p, ul, li, b). Everything here is class-driven so it outranks those; sections carry no box styles of their own, because `section:first-child` there is (0,1,1) and would beat a single class (spacing lives on .m-wrap); and legal.css has no [hidden] reset, so any class that sets `display` needs its own [hidden] rule. */ :root { --g: #0e7c46; --g-brand: #67ea94; --g-chip: rgba(103, 234, 148, 0.10); --g-ring: rgba(103, 234, 148, 0.25); --g-grad: linear-gradient(100deg, #0e7c46 0%, #059669 55%, #0d9488 100%); --g-rail: linear-gradient(var(--rail-dir, to bottom), #0e7c46, #10b981, rgba(45, 212, 191, 0.25)); --g-wash: rgba(103, 234, 148, 0.18); --g-wash-2: rgba(103, 234, 148, 0.06); --g-hover: #bbf7d0; --blue-t: #2563eb; --blue-chip: rgba(37, 99, 235, 0.10); --blue-ring: rgba(59, 130, 246, 0.20); /* The landing hero's own gradients and blob, exactly. */ --b-grad: linear-gradient(100deg, #2563eb 0%, #4f46e5 60%, #6366f1 100%); --b-wash: rgba(59, 130, 246, 0.13); --b-wash-2: rgba(59, 130, 246, 0.06); --b-hover: #bfdbfe; --indigo-t: #4f46e5; --indigo-chip: rgba(79, 70, 229, 0.10); --indigo-ring: rgba(99, 102, 241, 0.20); --amber-t: #b45309; /* amber-700: small bold text still needs 4.5:1 */ --amber-i: #d97706; /* amber-600: icons only need 3:1 */ --amber-chip: rgba(245, 158, 11, 0.10); --amber-ring: rgba(245, 158, 11, 0.25); --ink: #0f172a; --strong: #334155; /* slate-700: inside body copy, as on the landing */ --lead: #475569; /* slate-600: hero lead */ --soft: #64748b; /* slate-500: card copy */ --c-bg: #ffffff; --c-solid: #ffffff; /* a card once composited — for chips that must cover a line */ --c-border: #f1f5f9; --c-hover-bg: #ffffff; --c-hover-border: #f1f5f9; --c-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --fill-hover: rgba(226, 232, 240, 0.6); --line: #e2e8f0; --track: #e2e8f0; --field: #ffffff; /* The page accent. */ --a: var(--g); --a-chip: var(--g-chip); --a-ring: var(--g-ring); --a-grad: var(--g-grad); --a-wash: var(--g-wash); --a-wash-2: var(--g-wash-2); --a-hover: var(--g-hover); } html.dark { --g: #67ea94; --g-chip: rgba(103, 234, 148, 0.15); --g-grad: linear-gradient(100deg, #bbf7d0 0%, #67ea94 40%, #34d399 75%, #5eead4 100%); --g-rail: linear-gradient(var(--rail-dir, to bottom), #67ea94, #34d399, rgba(94, 234, 212, 0.25)); --g-wash: rgba(103, 234, 148, 0.08); --g-wash-2: rgba(103, 234, 148, 0.03); --g-hover: rgba(148, 163, 184, 0.25); --blue-t: #60a5fa; --blue-chip: rgba(59, 130, 246, 0.15); --b-grad: linear-gradient(100deg, #93c5fd 0%, #60a5fa 34%, #818cf8 72%, #a5b4fc 100%); --b-wash: rgba(37, 99, 235, 0.065); --b-wash-2: rgba(37, 99, 235, 0.03); --b-hover: rgba(148, 163, 184, 0.25); --indigo-t: #818cf8; --indigo-chip: rgba(129, 140, 248, 0.15); --amber-t: #fbbf24; --amber-i: #fbbf24; --amber-chip: rgba(245, 158, 11, 0.15); --ink: #ffffff; --strong: #e2e8f0; --lead: #94a3b8; --soft: #94a3b8; --c-bg: rgba(148, 163, 184, 0.055); --c-solid: #0a0f20; --c-border: rgba(148, 163, 184, 0.10); --c-hover-bg: rgba(148, 163, 184, 0.09); --c-hover-border: rgba(148, 163, 184, 0.20); --c-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.55); --fill-hover: rgba(148, 163, 184, 0.08); --line: rgba(148, 163, 184, 0.16); --track: rgba(148, 163, 184, 0.14); --field: rgba(148, 163, 184, 0.08); } /* The app's blue, for pages that are about the app rather than the radio. */ .acc-blue { --a: var(--blue-t); --a-chip: var(--blue-chip); --a-ring: var(--blue-ring); --a-grad: var(--b-grad); --a-wash: var(--b-wash); --a-wash-2: var(--b-wash-2); --a-hover: var(--b-hover); } /* ---- Neutralise the prose column ------------------------------------------ */ main.m { max-width: none; padding: 0; font-size: 1rem; line-height: 1.5; } .m section { border-top: 0; padding-top: 0; margin-top: 0; } .m b { color: var(--strong); font-weight: 700; } .i { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .m-wrap { margin: 0 auto; padding: 4rem 1.5rem 0; } @media (min-width: 1024px) { .m-wrap { padding-top: 7rem; } } .m-wrap.tight { padding-top: 2.5rem; } @media (min-width: 1024px) { .m-wrap.tight { padding-top: 3rem; } } .m-wrap.end { padding-bottom: 4rem; } .w6 { max-width: 72rem; } .w5 { max-width: 64rem; } .w4 { max-width: 56rem; } .w3 { max-width: 48rem; } .m [id] { scroll-margin-top: 5.5rem; } /* ---- Type ----------------------------------------------------------------- */ .m-kicker { display: inline-block; margin: 0 0 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a); } .m-kicker.warm { color: var(--amber-t); } .m-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; } @media (min-width: 1024px) { .m-head { margin-bottom: 4rem; } } .m-h2 { display: block; margin: 0; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: normal; color: var(--ink); } @media (min-width: 640px) { .m-h2 { font-size: 2.25rem; line-height: 2.5rem; } } .m-sub { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--soft); } .m-h3 { margin: 0 0 0.5rem; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--ink); } .m-h3.sm { font-size: 0.9375rem; line-height: 1.375rem; margin-bottom: 0.375rem; } .m-p { margin: 0; font-size: 0.875rem; line-height: 1.625; color: var(--soft); } .m-p.sm { font-size: 0.8125rem; } .m-p + .m-p { margin-top: 0.75rem; } /* ---- Hero ----------------------------------------------------------------- */ .m-hero { position: relative; overflow: hidden; } .m-hero-wash { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 56rem; height: 26rem; pointer-events: none; background: radial-gradient(closest-side, var(--a-wash), var(--a-wash-2) 55%, transparent 100%); } .m-hero .m-wrap { position: relative; max-width: 80rem; padding-top: 2.75rem; padding-bottom: 1rem; text-align: center; } @media (min-width: 1024px) { .m-hero .m-wrap { padding-top: 5.5rem; } } .m-h1 { margin: 0 0 1.5rem; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 2.25rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } @media (min-width: 640px) { .m-h1 { font-size: 3rem; line-height: 1.08; } } @media (min-width: 1024px) { .m-h1 { font-size: 4.25rem; line-height: 1.04; } } .m-line { display: block; } .m-grad { background: var(--a-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* A page's keyword stays inside its h1 for search, set as the landing's own section kicker: plain uppercase text — no pill, no status dot. */ .m-eyebrow { display: block; margin: 0 0 1rem; font-family: 'Inter', system-ui, sans-serif; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a); } .m-lead { max-width: 42rem; margin: 0 auto 2.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--lead); } @media (min-width: 1024px) { .m-lead { font-size: 1.25rem; } } .m-ctas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; } @media (min-width: 640px) { .m-ctas { flex-direction: row; gap: 1rem; } } .m-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 9999px; font-size: 1rem; line-height: 1.5; font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .m-btn:hover { text-decoration: none; transform: translateY(-2px); } .m-btn:active { transform: scale(0.95); } .m-btn:focus-visible { border-radius: 9999px; outline: 2px solid #3b82f6; outline-offset: 2px; } .m-btn .i { transition: transform 0.15s; } .m-btn:hover .m-arrow { transform: translateX(4px); } .m-btn-primary { color: #ffffff; background: linear-gradient(to right, #2563eb, #4f46e5); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.3), 0 14px 34px -12px rgba(37, 99, 235, 0.8); } .m-btn-primary:hover { box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45), 0 18px 40px -12px rgba(37, 99, 235, 0.9); } /* ---- Cards ---------------------------------------------------------------- */ .m-card { position: relative; height: 100%; padding: 1.75rem; border-radius: 1.5rem; border: 1px solid var(--c-border); background: var(--c-bg); box-shadow: var(--mark-shadow); transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, border-color 0.3s; } @media (min-width: 1024px) { .m-card { padding: 2rem; } } .m-card.sm { padding: 1.25rem; } .m-lift:hover { transform: translateY(-4px); background: var(--c-hover-bg); border-color: var(--c-hover-border); box-shadow: var(--c-hover-shadow); } /* flex: none — a chip is a fixed square wherever it sits. Beside text in a flex row (.m-row, .m-duty, .d-link, the meter head) the text column claimed every pixel it could and squeezed the chip into a narrow pill. */ .m-chip { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: 1rem; transition: transform 0.3s; } .m-lift:hover .m-chip { transform: scale(1.1); } .m-chip .i { width: 22px; height: 22px; } .m-chip.sm { width: 2.25rem; height: 2.25rem; margin-bottom: 0.875rem; border-radius: 0.75rem; } .m-chip.sm .i { width: 18px; height: 18px; } .t-g { color: var(--g); background: var(--g-chip); box-shadow: inset 0 0 0 1px var(--g-ring); } .t-blue { color: var(--blue-t); background: var(--blue-chip); box-shadow: inset 0 0 0 1px var(--blue-ring); } .t-indigo { color: var(--indigo-t); background: var(--indigo-chip); box-shadow: inset 0 0 0 1px var(--indigo-ring); } .t-amber { color: var(--amber-i); background: var(--amber-chip); box-shadow: inset 0 0 0 1px var(--amber-ring); } .m-tag { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; border: 1px solid rgba(129, 140, 248, 0.3); font-size: 10px; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo-t); } /* The landing's tinted corner washes, replacing the card's own fill rather than stacking on it. */ .m-wash-g { background: linear-gradient(to bottom left, rgba(103, 234, 148, 0.16), #ffffff 50%, #ffffff); } .m-wash-b { background: linear-gradient(to bottom left, rgba(59, 130, 246, 0.10), #ffffff 50%, #ffffff); } .m-wash-amber { background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.07), #ffffff 50%, #ffffff); } html.dark .m-wash-g { background: linear-gradient(to bottom left, rgba(103, 234, 148, 0.08), rgba(148, 163, 184, 0.055) 50%, rgba(148, 163, 184, 0.055)); } html.dark .m-wash-b { background: linear-gradient(to bottom left, rgba(59, 130, 246, 0.09), rgba(148, 163, 184, 0.055) 50%, rgba(148, 163, 184, 0.055)); } html.dark .m-wash-amber { background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.05), rgba(148, 163, 184, 0.055) 50%, rgba(148, 163, 184, 0.055)); } .m-grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .m-grid.c2, .m-grid.c3, .m-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .m-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .m-row { display: flex; align-items: flex-start; gap: 1rem; } .m-row .m-chip { margin-bottom: 0; } .m-note { display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; max-width: 40rem; margin: 1.75rem auto 0; font-size: 0.875rem; line-height: 1.6; color: var(--soft); text-align: left; } .m-note .i { width: 18px; height: 18px; margin-top: 0.1rem; color: var(--a); } /* ---- FAQ (the landing's accordion) ---------------------------------------- */ .m-faq { display: grid; gap: 0.75rem; align-items: start; } @media (min-width: 768px) { .m-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .m-faq-col { display: flex; flex-direction: column; gap: 0.75rem; } .m-q { border-radius: 1rem; border: 1px solid var(--c-border); background: var(--c-bg); box-shadow: var(--mark-shadow); transition: border-color 0.2s, background-color 0.2s; } .m-q:hover { border-color: var(--a-hover); } html.dark .m-q[open] { background: rgba(148, 163, 184, 0.09); } /* The flex row lives on a child, not the
: iOS Safari < 17.4 forces display:list-item on summary and would drop it. */ .m-q summary { display: block; list-style: none; cursor: pointer; border-radius: 1rem; } .m-q summary::-webkit-details-marker { display: none; } .m-q summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .m-q-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; padding: 1rem 1.25rem; font-size: 15px; line-height: 1.4; font-weight: 600; color: #1e293b; } html.dark .m-q-row { color: #f1f5f9; } .m-q-plus { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 9999px; color: #64748b; background: #f1f5f9; transition: transform 0.2s, color 0.2s, background-color 0.2s; } html.dark .m-q-plus { color: #94a3b8; background: rgba(148, 163, 184, 0.10); } .m-q[open] .m-q-plus { transform: rotate(45deg); color: var(--a); background: var(--a-chip); } .m-q-plus .i { width: 13px; height: 13px; } .m-a { margin: 0; padding: 0 1.25rem 1.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--soft); } /* ---- Closing CTA ---------------------------------------------------------- */ .m-cta { padding-bottom: 4rem; text-align: center; } .m-cta .m-h2 { margin-bottom: 1rem; } @media (min-width: 640px) { .m-cta .m-h2 { font-size: 3rem; line-height: 1.1; } } .m-cta .m-sub { max-width: 30rem; margin: 0 auto 2rem; } .m-fineprint { max-width: 34rem; margin: 2.5rem auto 0; font-size: 0.8125rem; line-height: 1.6; color: var(--soft); } /* ---- Legal documents (/privacy, /terms) ------------------------------------ The text of a policy is not decoration and is not rewritten here: the design gives it a table of contents, numbered sections a reader can cite, and rows that separate each defined term from what it means. */ .m-h1.d-h1 { margin-bottom: 1.25rem; } @media (min-width: 1024px) { .m-h1.d-h1 { font-size: 3.75rem; line-height: 1.06; } } .d-emblem { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 2rem; border-radius: 1.25rem; color: var(--a); background: var(--a-chip); box-shadow: inset 0 0 0 1px var(--a-ring); } .d-emblem .i { width: 1.75rem; height: 1.75rem; } .m-hero .m-lead.d-lead { margin-bottom: 1.75rem; } .d-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; } .d-meta li { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.8125rem; line-height: 1.25rem; color: var(--soft); } .d-meta .i { width: 15px; height: 15px; color: var(--a); } .d-meta a { color: inherit; font-weight: 600; } .d-glance { text-align: center; } .d-glance .m-grid { text-align: left; } .d-disclaim { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--soft); text-align: center; } .d-layout { display: grid; gap: 1rem; } @media (min-width: 1024px) { .d-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; } } .m-card.d-toc { height: auto; padding: 1rem; } @media (min-width: 1024px) { .m-card.d-toc { position: sticky; top: 6rem; padding: 0; border: 0; background: none; box-shadow: none; } } .d-toc-title { margin: 0 0 0.375rem; padding: 0 0.75rem; font-size: 0.6875rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); } .d-toc ol { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; } .d-toc li { margin: 0; } .d-toc a { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--soft); text-decoration: none; transition: color 0.15s, background-color 0.15s; } .d-toc a:hover { color: var(--ink); background: var(--fill-hover); text-decoration: none; } .d-toc a:focus-visible { border-radius: 0.75rem; } .d-toc .n { flex: none; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.75rem; font-variant-numeric: tabular-nums; opacity: 0.7; } /* Set by /page.js: the section being read. */ .d-toc a[aria-current] { color: var(--a); background: var(--a-chip); font-weight: 600; } .d-toc a[aria-current] .n { opacity: 1; } .d-doc { display: grid; gap: 1rem; min-width: 0; } .m-card.d-sec { height: auto; padding: 1.75rem; } @media (min-width: 640px) { .m-card.d-sec { padding: 2.25rem; } } .d-sec-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; } .d-num { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--a); background: var(--a-chip); box-shadow: inset 0 0 0 1px var(--a-ring); } /* The radio sections wear the LoRa page's green, so the link between the policy and the bridge is visible before a word is read. */ .d-num.g { color: var(--g); background: var(--g-chip); box-shadow: inset 0 0 0 1px var(--g-ring); } .d-h2 { display: block; margin: 0; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--ink); } @media (min-width: 640px) { .d-h2 { font-size: 1.5rem; line-height: 2rem; } } .d-prose p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--soft); } .d-prose p + p { margin-top: 0.875rem; } .d-prose.d-after { margin-top: 1.5rem; } .d-prose a, .d-rows a { color: var(--blue-t); font-weight: 600; } .d-rows { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .d-row { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.7; color: var(--soft); } .d-row:last-child { border-bottom: 0; padding-bottom: 0; } .d-term { display: block; margin-bottom: 0.25rem; font-weight: 600; color: var(--ink); } .d-row.warn .d-term { color: var(--amber-t); } @media (min-width: 768px) { .d-rows.split .d-row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem; } .d-rows.split .d-term { margin-bottom: 0; } } .d-procs { display: grid; gap: 0.625rem; margin: 0.875rem 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { .d-procs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .d-proc { margin: 0; padding: 0.875rem 1rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--field); font-size: 0.8125rem; line-height: 1.5; color: var(--soft); } .d-proc strong { display: block; margin-bottom: 0.125rem; font-size: 0.875rem; font-weight: 600; color: var(--ink); } .d-callout { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--strong); background: var(--a-chip); box-shadow: inset 0 0 0 1px var(--a-ring); } .d-callout .i { width: 18px; height: 18px; margin-top: 0.15rem; color: var(--a); } .d-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } @media (min-width: 640px) { .d-contact { flex-direction: row; align-items: center; justify-content: space-between; } } .d-contact p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--soft); } .d-contact .m-btn { padding: 0.75rem 1.5rem; font-size: 0.9375rem; } .d-also { margin: 1rem 0 0; padding: 0 0.25rem; } .d-related { display: grid; gap: 1rem; } @media (min-width: 640px) { .d-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .m-card.d-link { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; color: inherit; text-decoration: none; } .d-link:hover { text-decoration: none; } .d-link:focus-visible { border-radius: 1.5rem; } .d-link .m-chip { margin-bottom: 0; } .d-link .m-h3, .d-link .m-p { display: block; } .d-link .m-h3 { margin-bottom: 0.125rem; } .d-go { margin-left: auto; color: var(--soft); transition: transform 0.2s, color 0.2s; } .d-link:hover .d-go { color: var(--a); transform: translateX(4px); } /* ---- Scroll reveal (only what starts below the fold; see /page.js) -------- */ .rv { transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .rv-wait { opacity: 0; transform: translateY(2rem); } .d1 { transition-delay: 90ms; } .d2 { transition-delay: 180ms; } .d3 { transition-delay: 270ms; } .d4 { transition-delay: 360ms; } .d5 { transition-delay: 450ms; } @media (prefers-reduced-motion: reduce) { .rv { transition: none; } .m-lift:hover { transform: none; } .d-link:hover .d-go { transform: none; } }