/* Open Scale Solutions — company site. Deliberately built like a trade catalogue for shop equipment rather than a SaaS landing page: ruled hairlines instead of cards, part numbers instead of icons, left-aligned columns instead of centred hero text. The palette is lifted from the product's own `tokens.css` ("Counter Dark") so the site and the software are visibly the same object — including the rule that the chartreuse is a lamp, not a paint: it carries dark ink, and it marks money and the one action that matters on a page. Two grounds, resolved before first paint by the inline boot script in each page. Two languages, switched by `data-lang` on ; every translatable node ships as a `lang="en"` / `lang="my"` pair and CSS hides the other one. No build step, no external fonts, no network calls. Edit and run `./deploy.sh site`. */ /* ========================================================================== 1 · Tokens ========================================================================== */ :root { color-scheme: light; --paper: oklch(96.8% 0.0035 255); --paper-sunk: oklch(93.4% 0.005 255); --paper-rise: oklch(99.4% 0.0015 255); --ink: oklch(22% 0.012 258); --ink-muted: oklch(46% 0.011 258); --ink-faint: oklch(62.5% 0.010 258); --rule: oklch(88.5% 0.006 255); --rule-firm: oklch(78.5% 0.008 255); --mark: oklch(84% 0.185 128); --mark-ink: oklch(24% 0.090 128); --mark-deep: oklch(43% 0.105 130); --mark-edge: oklch(62% 0.160 128); --mark-wash: oklch(94.5% 0.060 128); --good: oklch(48% 0.100 172); --good-wash: oklch(94.5% 0.032 172); --warn: oklch(56% 0.125 70); --warn-wash: oklch(95% 0.048 78); --bad: oklch(52% 0.175 25); --bad-wash: oklch(95% 0.035 25); --focus: oklch(52% 0.170 252); /* Does not follow the theme — the app's inverted surfaces are dark always, and the screen mocks on this site quote them exactly. */ --slab: oklch(19% 0.012 258); --slab-rise: oklch(24% 0.014 258); --slab-ink: oklch(96% 0.004 255); --slab-muted: oklch(70% 0.010 255); --slab-rule: oklch(31% 0.014 258); --font-text: ui-serif, "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Constantia, "Times New Roman", serif; --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --font-my: "Noto Sans Myanmar", "Myanmar Text", Padauk, "Noto Sans Myanmar UI", Myanmar3, sans-serif; --t-hero: clamp(2.5rem, 6.4vw, 4.75rem); --t-h2: clamp(1.55rem, 2.6vw, 2.3rem); --t-h3: clamp(1.1rem, 1.1vw + 0.85rem, 1.35rem); --t-body: clamp(1rem, 0.3vw + 0.94rem, 1.1rem); --t-sm: 0.875rem; --t-micro: 0.6875rem; --track-micro: 0.13em; --shell: 76rem; --band: clamp(3.25rem, 6vw, 6.5rem); --gutter: clamp(1.25rem, 4vw, 3rem); } :root[data-theme='dark'] { color-scheme: dark; --paper: oklch(16.5% 0.008 255); --paper-sunk: oklch(13% 0.008 255); --paper-rise: oklch(21% 0.010 255); --ink: oklch(95.5% 0.004 255); --ink-muted: oklch(71% 0.010 255); --ink-faint: oklch(55% 0.012 255); --rule: oklch(28% 0.012 255); --rule-firm: oklch(40% 0.015 255); --mark: oklch(86% 0.190 128); --mark-ink: oklch(19% 0.080 128); --mark-deep: oklch(87% 0.175 130); --mark-edge: oklch(86% 0.190 128); --mark-wash: oklch(27% 0.055 128); --good: oklch(74% 0.115 172); --good-wash: oklch(25% 0.040 172); --warn: oklch(80% 0.145 78); --warn-wash: oklch(27% 0.050 76); --bad: oklch(68% 0.175 25); --bad-wash: oklch(27% 0.055 25); --focus: oklch(72% 0.150 252); } /* ========================================================================== 2 · Ground ========================================================================== */ *, *::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(--paper); color: var(--ink); font: 400 var(--t-body)/1.62 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Burmese has no serif to fall back to and needs the room. Scoped under body so it never lands on and rescales the whole document. */ body [lang='my'] { font-family: var(--font-my); font-size: 0.94em; line-height: 1.95; letter-spacing: 0; } /* The language switch: hide the language that is NOT current, rather than showing the one that is. Two consequences worth keeping — · `data-lang="en"` is in the markup, so with JavaScript off the page is still a single readable language rather than both at once; · nothing needs `display: revert`, so a pair of block elements stays a pair of block elements on older browsers. `.always` opts an element out. It is worn by the switch itself: the button labelled မြန်မာ is Burmese in both languages, and hiding it would strand a Burmese reader on an English page. */ :root[data-lang='en'] body [lang='my']:not(.always) { display: none; } :root[data-lang='my'] body [lang='en']:not(.always) { display: none; } ::selection { background: var(--mark); color: var(--mark-ink); } :where(a):focus-visible, :where(button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } img, svg { max-width: 100%; } /* ========================================================================== 3 · Skeleton ========================================================================== */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* The datasheet grid: a narrow marker column, then the column that reads. Sections inherit it so every band lines up down the page. */ .band { border-top: 1px solid var(--rule); padding-block: var(--band); } .band:first-of-type { border-top: 0; } .split { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); grid-template-columns: 1fr; } /* A grid item's min-width is auto, which lets a wide table push the page sideways instead of scrolling inside its own wrapper. */ .split > *, .stack > * { min-width: 0; } @media (min-width: 62rem) { .split { grid-template-columns: 11rem minmax(0, 1fr); } } .marker { font: 600 var(--t-micro)/1.5 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); padding-top: 0.45rem; } .marker b { display: block; font-family: var(--font-num); font-size: 0.95rem; letter-spacing: 0; color: var(--mark-deep); margin-bottom: 0.35rem; } @media (min-width: 62rem) { .marker { position: sticky; top: 5.5rem; align-self: start; } } .measure { max-width: 62ch; } .measure-tight { max-width: 52ch; } /* ========================================================================== 4 · Type ========================================================================== */ h1, h2, h3 { font-weight: 600; letter-spacing: -0.021em; margin: 0; text-wrap: balance; } h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.032em; } h2 { font-size: var(--t-h2); line-height: 1.12; } h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.012em; } :root[data-lang='my'] h1 { line-height: 1.35; letter-spacing: 0; } :root[data-lang='my'] h2 { line-height: 1.45; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.1rem, 0.7vw + 1rem, 1.3rem); line-height: 1.5; color: var(--ink-muted); } .micro { font: 600 var(--t-micro)/1.5 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); } :root[data-lang='my'] .micro, .micro [lang='my'] { text-transform: none; letter-spacing: 0.02em; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } em.key { font-style: normal; background: linear-gradient(transparent 68%, var(--mark-wash) 68%); padding-inline: 0.1em; } a { color: inherit; text-decoration-color: var(--rule-firm); text-underline-offset: 0.22em; } a:hover { text-decoration-color: var(--mark-edge); } /* ========================================================================== 5 · Header ========================================================================== */ .top { position: sticky; top: 0; z-index: 40; background: var(--paper); /* fallback where color-mix is unsupported */ background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--rule); } .top-in { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); min-height: 3.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; min-width: 0; } .brand-mark { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 3px; font: 700 0.6rem/1 var(--font-ui); letter-spacing: 0.02em; } .brand-name { font: 600 0.9rem/1 var(--font-ui); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-name span { color: var(--ink-faint); font-weight: 400; } /* The nav stays at every width — a phone is how most people will open this, and dropping the other two editions there would hide half the catalogue. What gives way instead is the company name beside the mark. */ .top-nav { display: flex; gap: 0.85rem; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .top-nav::-webkit-scrollbar { display: none; } @media (min-width: 54rem) { .top-nav { gap: 1.25rem; overflow: visible; } } /* Below that it drops to its own row under the brand rather than fighting the switches for the same line — Burmese labels are longer than the English. */ @media (max-width: 53.99rem) { .top-in { flex-wrap: wrap; } .top-nav { order: 3; flex-basis: 100%; gap: 1.15rem; border-top: 1px solid var(--rule); padding-bottom: 0.15rem; } .top-nav a { padding-block: 0.6rem; } } .top-nav a { white-space: nowrap; font: 500 var(--t-sm)/1 var(--font-ui); color: var(--ink-muted); text-decoration: none; padding-block: 0.5rem; border-bottom: 2px solid transparent; } .top-nav a:hover { color: var(--ink); border-bottom-color: var(--mark-edge); } .top-nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--mark); } .switches { display: flex; align-items: center; gap: 0.4rem; } .seg { display: inline-flex; border: 1px solid var(--rule-firm); border-radius: 3px; overflow: hidden; background: var(--paper-rise); } .seg button { appearance: none; border: 0; background: transparent; color: var(--ink-muted); font: 600 var(--t-micro)/1 var(--font-ui); letter-spacing: var(--track-micro); padding: 0.5rem 0.55rem; min-height: 2rem; cursor: pointer; } .seg button + button { border-left: 1px solid var(--rule); } .seg button:hover { color: var(--ink); } .seg button[aria-pressed='true'] { background: var(--mark); color: var(--mark-ink); } .seg button[lang='my'] { letter-spacing: 0; font-family: var(--font-my); } .icon-btn { appearance: none; display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--rule-firm); border-radius: 3px; background: var(--paper-rise); color: var(--ink-muted); cursor: pointer; } .icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); } .icon-btn svg { width: 1rem; height: 1rem; } :root[data-theme='dark'] .icon-btn .sun, :root:not([data-theme='dark']) .icon-btn .moon { display: none; } /* ========================================================================== 6 · Hero ========================================================================== */ .hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4.5rem); } .hero h1 { margin-bottom: 1.5rem; } .hero .lede { max-width: 46ch; } .hero-quote { margin: 0 0 1.75rem; padding-left: 1rem; border-left: 3px solid var(--mark); font-size: clamp(1.15rem, 1vw + 1rem, 1.5rem); line-height: 1.35; font-style: italic; } .strip { display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 4vw, 3.5rem); border-top: 1px solid var(--rule); margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.1rem; } .strip div { padding-block: 0.4rem; } .strip dt { font: 600 var(--t-micro)/1.6 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); } .strip dd { margin: 0.15rem 0 0; font-size: var(--t-sm); } /* ========================================================================== 7 · The product list — a ruled index, not a grid of cards ========================================================================== */ .index-list { border-top: 1px solid var(--rule-firm); } .entry { display: grid; gap: 0.35rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr; padding-block: clamp(1.75rem, 3vw, 2.75rem); border-bottom: 1px solid var(--rule); text-decoration: none; position: relative; transition: background-color 160ms ease, padding-inline 260ms cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 48rem) { .entry { grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } } .entry:hover { background: var(--paper-rise); padding-inline: clamp(0.5rem, 1.5vw, 1.25rem); } .entry::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--mark-edge); transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1); } .entry:hover::after { width: 100%; } .entry-no { font: 400 1.75rem/1 var(--font-num); color: var(--ink-faint); letter-spacing: -0.03em; } .entry:hover .entry-no { color: var(--mark-deep); } .entry h3 { margin-bottom: 0.3rem; } .entry .who { display: block; color: var(--ink-muted); font-size: var(--t-sm); } .entry .go { display: inline-block; margin-top: 0.7rem; font: 600 var(--t-micro)/1 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--mark-deep); } .entry .go::after { content: ' →'; } .spec-list { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--ink-muted); } .spec-list li { padding: 0.28rem 0; border-top: 1px solid var(--rule); } .spec-list li:first-child { border-top: 0; } @media (max-width: 47.99rem) { .spec-list { margin-top: 0.9rem; } } /* ========================================================================== 8 · Prose blocks and small tables ========================================================================== */ .stack > * + * { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .rows { border-top: 1px solid var(--rule-firm); } .row { display: grid; gap: 0.2rem 1.5rem; grid-template-columns: 1fr; padding-block: 1rem; border-bottom: 1px solid var(--rule); } @media (min-width: 46rem) { .row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } } .row dt, .row .k { font: 600 var(--t-sm)/1.5 var(--font-ui); letter-spacing: -0.005em; } .row dd, .row .v { margin: 0; color: var(--ink-muted); font-size: var(--t-sm); line-height: 1.6; } .row .v code, .row dd code { font-family: var(--font-num); font-size: 0.9em; color: var(--ink); } /* Numbered steps, ruled like a work instruction. */ .steps { counter-reset: step; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); } .steps > li { counter-increment: step; display: grid; gap: 0.15rem 1.25rem; grid-template-columns: 2.25rem minmax(0, 1fr); padding-block: 1.15rem; border-bottom: 1px solid var(--rule); } .steps > li::before { content: counter(step, decimal-leading-zero); font: 400 0.8rem/1.7 var(--font-num); color: var(--ink-faint); } .steps h4 { margin: 0 0 0.2rem; font: 600 1rem/1.4 var(--font-text); letter-spacing: -0.01em; } .steps p { margin: 0; font-size: var(--t-sm); color: var(--ink-muted); } .note { border-left: 2px solid var(--rule-firm); padding: 0.15rem 0 0.15rem 1rem; font-size: var(--t-sm); color: var(--ink-muted); } .note strong { color: var(--ink); font-weight: 600; } /* ========================================================================== 9 · Screen mocks Hand-built quotations of the real interface. Not screenshots — the same tokens, so they age with the product instead of rotting in a PNG. ========================================================================== */ .mock { margin: 0; border: 1px solid var(--rule-firm); border-radius: 4px; background: var(--paper-rise); overflow: hidden; box-shadow: 0 1px 2px oklch(20% 0.02 258 / 0.06), 0 12px 32px oklch(20% 0.02 258 / 0.05); } :root[data-theme='dark'] .mock { box-shadow: none; } .mock-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--slab); color: var(--slab-muted); font: 600 var(--t-micro)/1 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; } .mock-bar b { color: var(--slab-ink); font-weight: 600; } .mock-bar .spacer { margin-left: auto; } .mock-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); flex: none; } .mock-body { padding: clamp(0.75rem, 2vw, 1.15rem); } .mock-head, .mock-line { display: grid; align-items: center; gap: 0.75rem; padding-block: 0.42rem; font-size: var(--t-sm); } .mock-head { font: 600 var(--t-micro)/1.4 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--rule-firm); padding-bottom: 0.4rem; margin-bottom: 0.1rem; } .mock-line { border-top: 1px solid var(--rule); } .mock-body > .mock-line:first-child { border-top: 0; } .mock-head + .mock-line { border-top: 0; } /* the head already drew that line */ .mock .r { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .mock .muted { color: var(--ink-muted); } .mock .was { color: var(--ink-faint); text-decoration: line-through; } .mock .now { color: var(--mark-deep); font-weight: 600; } figcaption { padding: 0.7rem clamp(0.75rem, 2vw, 1.15rem); border-top: 1px solid var(--rule); background: var(--paper-sunk); font-size: var(--t-micro); font-family: var(--font-ui); color: var(--ink-faint); letter-spacing: 0.01em; } figcaption [lang='my'] { font-size: 0.95em; } /* A dot reports, a badge shouts — ADR-035, quoted here so the mocks are honest about how the product actually renders status. */ .st { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: var(--t-micro); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); } .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; } .st.ok::before { background: var(--good); } .st.warn::before { background: var(--warn); } .st.bad::before { background: var(--bad); } .st.new::before { background: var(--mark-edge); } .badge { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; border-radius: 2px; background: var(--warn-wash); color: var(--warn); border: 1px solid var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); font: 600 var(--t-micro)/1.5 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; } /* The floor plan, the room rack — small tile grids. */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; } .tile { border: 1px solid var(--rule); border-radius: 3px; padding: 0.55rem 0.6rem; background: var(--paper); min-height: 4.6rem; display: flex; flex-direction: column; gap: 0.15rem; } .tile b { font: 600 0.9rem/1.2 var(--font-ui); } .tile .sub { font-size: var(--t-micro); font-family: var(--font-ui); color: var(--ink-faint); letter-spacing: 0.03em; text-transform: uppercase; } .tile .amt { margin-top: auto; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--t-sm); } .tile.busy { border-color: var(--rule-firm); background: var(--paper-rise); } .tile.busy .amt { color: var(--mark-deep); font-weight: 600; } .tile.hold { border-style: dashed; } .tile.free { color: var(--ink-faint); } /* The till total — the one place the accent is a fill. */ .total-slab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; padding: 0.7rem 0.85rem; border-radius: 3px; background: var(--mark); color: var(--mark-ink); } .total-slab span { font: 600 var(--t-micro)/1 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; } .total-slab b { font: 600 1.5rem/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* A row of state chips — the serial lifecycle, the statuses a screen filters by. Reads left to right; the ones that matter carry the accent edge. */ .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .chips li { border: 1px solid var(--rule-firm); border-radius: 2px; padding: 0.3rem 0.55rem; font: 600 var(--t-micro)/1.4 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--paper-rise); } .chips li.live { border-color: var(--mark-edge); color: var(--ink); box-shadow: inset 2px 0 0 var(--mark); } /* Comparison tables. Scrolls inside itself rather than pushing the page. */ .tbl-wrap { overflow-x: auto; border-top: 1px solid var(--rule-firm); } .tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-sm); } .tbl th, .tbl td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); } .tbl thead th { font: 600 var(--t-micro)/1.5 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); padding-top: 0.7rem; } .tbl tbody th { font: 600 var(--t-sm)/1.5 var(--font-ui); width: 12rem; } .tbl td { color: var(--ink-muted); } .tbl code { font-family: var(--font-num); font-size: 0.92em; color: var(--ink); } /* ========================================================================== 10 · Figures — measured numbers, stated plainly ========================================================================== */ .figures { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border-top: 1px solid var(--rule-firm); } .figures div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); } .figures dt { font: 600 var(--t-micro)/1.5 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--ink-faint); } .figures dd { margin: 0.25rem 0 0; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-num); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .figures dd small { font-size: 0.5em; color: var(--ink-muted); letter-spacing: 0; margin-left: 0.25em; font-family: var(--font-ui); } /* ========================================================================== 11 · Calls to action ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid transparent; border-radius: 3px; font: 600 var(--t-micro)/1 var(--font-ui); letter-spacing: var(--track-micro); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), background-color 140ms ease; } .btn-mark { background: var(--mark); color: var(--mark-ink); } .btn-mark:hover { background: color-mix(in oklab, var(--mark) 88%, var(--ink)); } .btn-quiet { border-color: var(--rule-firm); color: var(--ink); } .btn-quiet:hover { border-color: var(--ink-faint); background: var(--paper-rise); } .btn:active { transform: translateY(1px); } .btn[lang='my'] { text-transform: none; letter-spacing: 0; font-family: var(--font-my); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* ========================================================================== 12 · Contact + footer ========================================================================== */ .contact-list { margin: 0; } .contact-list a { font-family: var(--font-num); font-size: var(--t-sm); word-break: break-word; } .foot { border-top: 1px solid var(--rule); padding-block: 2.25rem 3rem; font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink-faint); } .foot-in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; } .foot nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; } .foot a { text-decoration: none; color: var(--ink-muted); } .foot a:hover { color: var(--ink); text-decoration: underline; } /* ========================================================================== 13 · Motion — one orchestrated arrival, then nothing that moves on its own ========================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--in-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .entry, .btn { transition: none; } } @media print { .top, .switches, .foot nav { display: none; } body { background: #fff; color: #000; } .band { break-inside: avoid; } }