Gabriel Vidal
57d896e59e
Names the project **Tokunia** (Tokun·IA, from 徳用 tokuyō — "good value for the money") and gives it a public face on two hosts: tokunia.dev.gabvdl.xyz the landing page demo.tokunia.dev.gabvdl.xyz the PWA on its in-browser mock backend The demo is this frontend built with VITE_MOCK=1, so a stranger gets every screen with no API exposed and nothing to install. Branding is env-driven (VITE_APP_TITLE / _SHORT_NAME / _DESCRIPTION in vite.config.ts); unset, the homelab build keeps its existing title and manifest byte for byte. landing/ is a dependency-free static site — the page is a ledger printed on ink, and its signature is a thermal receipt itemising one real run from the archive (opus-4-8, 304 turns, $25.79, 30.7M tokens) that then bills the same run again in carbon, energy and water using the app's own footprint.ts factors. Archive stats on the page are the live instance's real numbers. The "Run it" section states the one honest caveat: that build still resolves @gabvdl/ui from a private registry, so it only completes on the author's network today (GOAL.md's open item). Better to say so than to ship a one-liner that fails for everyone else. landing/deploy.sh publishes both hosts and excludes `demo./` from the landing rsync — the hosts are nested in zipgo's trailing-dot tree and zipgo mirrors by default, so an unfiltered deploy would delete the demo underneath it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
750 lines
16 KiB
CSS
750 lines
16 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;
|
|
}
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
}
|