/* ========================================================= Arty — marketing site Design tokens mirror the handoff mockup exactly. Dark is the default theme; light is applied via . ========================================================= */ :root { /* Declaring color-scheme opts the page out of Chrome's auto dark mode, which otherwise force-darkens the light palette, and gives native scrollbars the right tone in each theme. */ color-scheme: dark; --bg: #0e0c0b; --card: #171412; --panel: #131110; --code-bg: #0e0c0b; --ink: #f3eee3; --muted: #b8b0a5; --muted-2: #cfc7bb; --muted-3: #a49b90; --faint: #8f877e; --faint-2: #7a7269; --line: #2a2521; --line-2: #221e1b; --line-3: #322c27; --line-strong: #4a4034; --gold: #e9cf7c; --gold-hi: #f6e3ac; --gold-text: #e9cf7c; --gold-text-hi: #f6e3ac; --gold-dim: #b99f4f; --on-gold: #1a1410; --accent-bg: #1a1610; --accent-line: #3a3020; --accent-muted: #b3a894; --header-bg: rgba(14, 12, 11, .92); /* Chips that sit on top of a screenshot, and the gallery's scrim. */ --chip-bg: rgba(14, 12, 11, .78); --chip-line: rgba(233, 207, 124, .30); --chip-ink: #f3eee3; --scrim: rgba(6, 5, 4, .82); --shadow-hero: 0 30px 70px rgba(0, 0, 0, .55); --shadow-md: 0 24px 60px rgba(0, 0, 0, .5); /* Same pairing as the Arty app (ArtyTypography): Newsreader for display and reading, Space Grotesk for UI labels and captions. */ --serif: 'Newsreader', Georgia, serif; --display: 'Newsreader', Georgia, serif; --sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --shell: 1140px; --gutter: 32px; } /* Light mode follows the desktop app's own light theme. Every value marked "app" below is sampled from the screenshots in mockups-handoff/screenshots/light/ — a cream page, pure-white cards, one hairline border and no heavy shadow. The text colours are the one deliberate departure. The app sets metadata in #a99f8b and gold text in #8a6d1e, which land at ~2.3:1 and ~4.4:1 on the cream — fine for the app's short labels, short of AA for the paragraphs this site is mostly made of. The greys and the gold below keep the app's hue and sit a step or two darker; every page clears 4.5:1. */ [data-theme="light"] { color-scheme: light; --bg: #f6f2e9; /* app: page background */ --card: #ffffff; /* app: card surface */ --panel: #eee6d5; /* app: recessed fill behind segmented controls */ --code-bg: #f0e9d8; --ink: #2b2822; /* app: headings and body */ --muted: #57524a; --muted-2: #3d3931; --muted-3: #635e55; --faint: #666052; --faint-2: #6b6559; --line: #e4ddce; /* app: card border */ --line-2: #ece5d7; --line-3: #dbd2bf; --line-strong: #c7bca5; --gold: #e7c15a; /* app: logo tile, active nav pill, activity bars */ --gold-hi: #f0d27e; --gold-dim: #7d6116; --on-gold: #20201d; /* app: near-black used on gold and in the sidebar */ --gold-text: #7d6116; --gold-text-hi: #5f4a0d; --accent-bg: #fbf3dc; --accent-line: #ecdcaa; --accent-muted: #5b5445; --header-bg: rgba(246, 242, 233, .92); /* The light screenshots are cream, so the chip inverts to stay readable on them; the gallery scrim stays dark, as an overlay is expected to be. */ --chip-bg: rgba(255, 255, 255, .88); --chip-line: rgba(125, 97, 22, .28); --chip-ink: #2b2822; --scrim: rgba(43, 40, 34, .58); /* The app separates surfaces with a hairline rather than a shadow. These stay only strong enough to lift the screenshots off the page. */ --shadow-hero: 0 16px 40px rgba(43, 40, 34, .10); --shadow-md: 0 10px 26px rgba(43, 40, 34, .07); } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--gold-text); text-decoration: none; } a:hover { color: var(--gold-text-hi); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* The app's gold is a fill colour, not a line colour: on the cream page it is too pale to mark focus, so light mode outlines in the darker gold. */ [data-theme="light"] :focus-visible { outline-color: var(--gold-dim); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--on-gold); font-family: var(--display); font-weight: 700; padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 50; } .skip-link:focus { left: 0; color: var(--on-gold); } .shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* ---------- type ---------- */ h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; } .eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; color: var(--gold-dim); } .kicker { font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; color: var(--gold-dim); } .kicker--on-accent { color: var(--gold-text); } .hero-title { font-size: 56px; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; } .page-title { font-size: 46px; line-height: 1.1; letter-spacing: -.02em; } .section-title { font-size: 32px; letter-spacing: -.01em; } .split-title { font-size: 36px; line-height: 1.15; letter-spacing: -.015em; } .lead { margin: 0; font-size: 19px; color: var(--muted); } .hero-lead { margin: 0; font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 34ch; text-wrap: pretty; } .body-muted { margin: 0; font-size: 17px; color: var(--muted-3); } .meta { font-family: var(--sans); font-size: 12.5px; color: var(--faint); letter-spacing: .02em; } .fineprint { margin: 0; font-size: 15px; color: var(--faint); } /* Bullet lists rendered as "·" runs, matching the mockup. */ .dot-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 16.5px; color: var(--muted-3); } .dot-list li::before { content: "· "; } .dot-list--tight { gap: 7px; } .dot-list--loose { gap: 11px; font-size: 17px; color: var(--muted); } .dot-list--panel { gap: 9px; } .code-line { margin: 0; font-family: var(--mono); font-size: 13.5px; color: var(--muted-2); background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; width: 100%; overflow-x: auto; } .code-line--path { font-size: 13px; color: var(--faint); } .code-line--inset { margin-top: 8px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; border: 0; font: inherit; } .btn-gold { background: var(--gold); color: var(--on-gold); font-family: var(--display); font-weight: 700; font-size: 17px; border-radius: 999px; padding: 14px 26px; } .btn-gold:hover { background: var(--gold-hi); color: var(--on-gold); } .btn-gold--sm { font-size: 15px; padding: 10px 20px; } .btn-gold--file { font-size: 15.5px; padding: 11px 20px; margin-top: 8px; } .btn-outline { color: var(--muted-2); font-size: 17px; border: 1px solid var(--line-3); border-radius: 999px; padding: 13px 24px; background: transparent; } .btn-outline:hover { color: var(--gold-text); border-color: var(--gold-dim); } .btn-outline--strong { border-color: var(--line-strong); } .btn-outline--file { color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15.5px; padding: 11px 20px; margin-top: 8px; background: transparent; } .btn-outline--file:hover { color: var(--ink); border-color: var(--gold-dim); } .btn-mono { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--muted-2); border: 1px solid var(--line-3); border-radius: 999px; padding: 9px 15px; background: transparent; } .btn-mono:hover { color: var(--gold-text); border-color: var(--gold-dim); } .theme-toggle { padding: 9px 14px; } .link-arrow { color: var(--gold-text); font-size: 17px; cursor: pointer; } .btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); } .site-header .shell { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 12px; column-gap: 24px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--gold); color: var(--on-gold); font-family: var(--display); font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; flex: none; } .brand-name { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; } .nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 22px; } .nav-link { display: flex; flex-direction: column; gap: 5px; font-size: 16px; white-space: nowrap; color: var(--muted-2); } .nav-link:hover { color: var(--gold-text); } /* The 2px rule below each item is always in the layout so the active state doesn't shift the row. */ .nav-link::after { content: ""; display: block; height: 2px; border-radius: 2px; background: transparent; } .nav-link[aria-current="page"] { color: var(--ink); } .nav-link[aria-current="page"]::after { background: var(--gold); } .header-spacer { flex: 1 1 0; min-width: 0; } .header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } /* Theme toggle shows the label for the theme it switches *to*. */ .theme-toggle .label-light { display: inline; } .theme-toggle .label-dark { display: none; } [data-theme="light"] .theme-toggle .label-light { display: none; } [data-theme="light"] .theme-toggle .label-dark { display: inline; } /* ---------- generic layout blocks ---------- */ .section { padding-top: 96px; } .section--first { padding-top: 80px; } .section--last { padding-bottom: 104px; } .page-main { padding-top: 72px; padding-bottom: 104px; } .page-head { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; } .page-head--narrow { max-width: 52ch; } .page-head--mid { max-width: 54ch; } .stack { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .stack--hero { gap: 24px; } .stack--tight { gap: 16px; align-items: stretch; } .stack--block { align-items: stretch; } .shot { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); } .shot--hero { box-shadow: var(--shadow-hero); } .shot--flat { border-radius: 12px; box-shadow: none; } /* A screenshot that opens the topic's gallery. The button is the whole image; without JS it is still a button, so it is only rendered as one on the features page, where the script is loaded. */ .shot--zoom { position: relative; } .shot-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; } .shot-open img { display: block; width: 100%; transition: transform .35s ease; } .shot-open:hover img { transform: scale(1.014); } .shot-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .shot-badge { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-ink); font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); pointer-events: none; } /* ---------- screenshot gallery ---------- */ .lightbox:not([hidden]) { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .lightbox-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } .lightbox-panel { position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); max-height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-hero); } .lightbox-panel:focus { outline: none; } .lightbox-bar { display: flex; align-items: baseline; gap: 14px; padding: 0 4px 14px; } .lightbox-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; } .lightbox-count { margin: 0; font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; color: var(--faint); } /* Paging lives in the bar rather than floating over the screenshot, which in a panel this wide would sit on top of the app's own sidebar and side panel. */ .lightbox-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; } .lightbox-nav, .lightbox-close { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-3); border-radius: 999px; background: none; color: var(--muted-2); font-size: 15px; line-height: 1; cursor: pointer; } .lightbox-nav { font-size: 19px; } /* display:grid above would otherwise beat the hidden attribute's own rule. Galleries with a single screenshot hide the paging controls entirely. */ .lightbox-nav[hidden] { display: none; } .lightbox-nav:hover:not(:disabled), .lightbox-close:hover { color: var(--ink); border-color: var(--line-strong); } .lightbox-nav:disabled { opacity: .32; cursor: default; } .lightbox-close { margin-left: 6px; } /* The track is the gallery: it scrolls natively, so a trackpad swipe, a dragged scrollbar and the arrow buttons all do the same thing. */ .lightbox-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 10px; } .lightbox-track::-webkit-scrollbar { display: none; } .lightbox-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; align-items: center; justify-content: center; } .lightbox-slide img { width: 100%; height: auto; max-height: calc(100vh - 230px); object-fit: contain; border: 1px solid var(--line); border-radius: 10px; } .lightbox-caption { margin: 14px 4px 0; min-height: 2.6em; font-size: 15px; color: var(--muted-3); } /* Stop the page behind the gallery from scrolling under it. */ .is-lightbox-open, .is-lightbox-open body { overflow: hidden; } /* ---------- home ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .section-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { background-color: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .card--accent { background-color: var(--accent-bg); border-color: var(--accent-line); } .card--roomy { padding: 26px; align-items: flex-start; gap: 10px; } .card--tall { padding: 28px; gap: 14px; } /* `:not([class])` keeps these body rules off the classed paragraphs that sit in the same cards — .kicker, .dl-note, .code-line — which would otherwise lose on specificity. */ .card h3 { font-size: 21px; } .card p:not([class]) { margin: 0; font-size: 16px; color: var(--muted-3); } .card--accent p:not([class]) { color: var(--accent-muted); } /* Alternating image/text rows on home + features. */ .split { display: grid; gap: 52px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .split--image-first { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .split .body-muted { font-size: 18px; color: var(--muted); max-width: 44ch; } .split--image-first .body-muted { max-width: 42ch; } .panel-band { border: 1px solid var(--line); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; background-color: var(--panel); } .panel-band h3 { font-size: 22px; } .panel-band p:not([class]) { margin: 0; font-size: 16px; color: var(--muted-3); } .panel-band > div { display: flex; flex-direction: column; gap: 10px; } .cta-band { border: 1px solid var(--accent-line); background-color: var(--accent-bg); border-radius: 16px; padding: 56px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; } .cta-band h2 { font-size: 40px; letter-spacing: -.02em; } .cta-band p { margin: 0; font-size: 18px; color: var(--muted); max-width: 52ch; } /* ---------- features ---------- */ .feature-rows { display: flex; flex-direction: column; gap: 72px; margin-top: 64px; } .feature-row { display: grid; gap: 48px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .feature-row--image-first { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .tag { font-family: var(--sans); font-size: 12px; color: var(--muted-3); border: 1px solid var(--line-3); border-radius: 999px; padding: 6px 12px; } /* ---------- download ---------- */ .download-grid { margin-top: 44px; } .download-split { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .download-split h2 { font-size: 30px; letter-spacing: -.01em; } .dl-card { padding: 26px; gap: 8px; align-items: flex-start; } .dl-card h3 { font-size: 24px; } .dl-note { margin: 0; font-family: var(--sans); font-size: 12px; color: var(--faint); } .steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0; font-size: 16.5px; color: var(--muted); } .steps li::before { counter-increment: step; content: counter(step); font-family: var(--sans); font-size: 12px; color: var(--on-gold); background: var(--gold); border-radius: 6px; padding: 3px 7px; margin-top: 3px; flex: none; } .side-panel { border: 1px solid var(--line); background-color: var(--panel); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .side-panel h3 { font-size: 22px; } .side-panel > p { margin: 0; font-size: 16.5px; color: var(--muted-3); } .rows { display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; } .rows > div { display: flex; justify-content: space-between; gap: 16px; } .rows--ruled > div:not(:last-child) { border-bottom: 1px solid var(--line-2); padding-bottom: 10px; } .rows dt, .rows .row-key { color: var(--muted-2); } .row-val { font-family: var(--sans); color: var(--gold-text); font-size: 15px; } /* ---------- privacy ---------- */ .privacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 48px; } .privacy-grid h2 { font-size: 24px; } .privacy-grid .card--accent .dot-list { color: var(--accent-muted); } .privacy-grid .card--accent p { margin: 0; font-size: 16px; color: var(--muted-3); } .prose-block { margin-top: 56px; display: flex; flex-direction: column; gap: 20px; max-width: 70ch; } .prose-block h2 { font-size: 28px; } .prose-block p { margin: 0; font-size: 16.5px; color: var(--muted-3); } /* ---------- about ---------- */ .about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; } .about-grid > div { display: flex; flex-direction: column; gap: 20px; } .about-title { font-size: 44px; line-height: 1.12; letter-spacing: -.02em; } .about-lead { margin: 0; font-size: 19px; color: var(--muted-2); } .about-body { margin: 0; font-size: 17.5px; color: var(--muted-3); } .about-grid > .about-side { gap: 18px; } .fact-card { border: 1px solid var(--line); background-color: var(--card); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .fact-card h3 { font-size: 20px; } .fact-list { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: 16px; color: var(--muted-3); } .fact-list > div { display: flex; justify-content: space-between; gap: 12px; } .fact-list dt { color: inherit; } .fact-list dd { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--muted-2); } .fact-list dd.is-gold { color: var(--gold-text); } /* ---------- support ---------- */ .support-block { margin-top: 52px; display: flex; flex-direction: column; gap: 18px; } .support-block h2 { font-size: 28px; } .support-block .card a { display: inline-flex; align-items: center; white-space: nowrap; font-size: 16px; margin-top: 4px; } .note-panel { margin-top: 52px; border: 1px solid var(--line); background-color: var(--panel); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .note-panel h3 { font-size: 22px; } .note-panel p { margin: 0; font-size: 16.5px; color: var(--muted-3); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line-2); } .site-footer .shell { padding-top: 44px; padding-bottom: 56px; display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; } .footer-brand { display: flex; flex-direction: column; gap: 10px; min-width: 240px; } .footer-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; } .footer-brand .brand-name { font-size: 17px; } .footer-brand p { margin: 0; font-size: 15px; color: var(--faint); max-width: 30ch; } .footer-col { display: flex; flex-direction: column; gap: 9px; } .footer-col-title { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--faint-2); } .footer-col a { font-size: 15.5px; color: var(--muted-3); } .footer-col a:hover { color: var(--gold-text); } .footer-spacer { flex: 1; } .footer-note { font-family: var(--sans); font-size: 12px; color: var(--faint-2); text-align: right; } /* ========================================================= Responsive — the mockup is drawn at desktop width only, so everything below is the site's own adaptation. ========================================================= */ @media (max-width: 1000px) { .hero, .split, .split--image-first, .feature-row, .feature-row--image-first, .download-split, .about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } /* Keep the screenshot above its copy when the row collapses. */ .split--image-first .shot, .feature-row--image-first .shot { order: -1; } .panel-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-lead, .split .body-muted { max-width: none; } .feature-rows { gap: 56px; } } @media (max-width: 760px) { :root { --gutter: 20px; } .hero-title { font-size: 40px; } .page-title { font-size: 34px; } .about-title { font-size: 34px; } .cta-band h2 { font-size: 30px; } .split-title { font-size: 28px; } .section-title { font-size: 26px; } .section { padding-top: 64px; } .section--first { padding-top: 48px; } .section--last { padding-bottom: 72px; } .page-main { padding-top: 48px; padding-bottom: 72px; } .card-grid, .card-grid--2, .privacy-grid, .panel-band { grid-template-columns: minmax(0, 1fr); } .panel-band { padding: 28px; } .cta-band { padding: 36px 24px; } .feature-rows { gap: 48px; margin-top: 44px; } .site-footer .shell { gap: 32px; } .footer-note { text-align: left; } .lightbox:not([hidden]) { padding: 12px; } .lightbox-panel { padding: 12px; } .lightbox-title { font-size: 17px; } .lightbox-bar { gap: 10px; } .lightbox-slide img { max-height: calc(100vh - 200px); } .lightbox-caption { font-size: 14px; } } @media (max-width: 560px) { .hero-title { font-size: 34px; } .site-header .shell { column-gap: 16px; } .nav { column-gap: 16px; } .nav-link { font-size: 15px; } .btn-row { width: 100%; } .btn-row > * { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }