/*
* The site uses the application's palette, deliberately.
*
* Someone who downloads Buuk after reading this page should recognise it. A
* marketing site in different colours from the product it sells is a promise
* the first launch breaks.
*
* The tokens are copied rather than imported: this page must be servable as
* static files with no build step, and one duplicated palette is a smaller
* cost than a build pipeline for a page of HTML. `docs/DESIGN.md` in the app is
* the source of truth if they ever drift.
*/
:root {
color-scheme: light;
--bg-0: #fcfbf8;
--bg-1: #f7f5f1;
--bg-2: #eae7e0;
--bg-3: #d6cfc4;
--paper: #fffefb;
--bd: #c1b8a8;
--ink-0: #2f2b26;
--ink-1: #655f57;
--ink-2: #938c84;
--accent: #ba3608;
--accent-soft: #e8430a;
--measure: 34rem;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg-0: #181c23;
--bg-1: #222832;
--bg-2: #2d3542;
--bg-3: #3a4454;
--paper: #1e242d;
--bd: #0f1218;
--ink-0: #e2e7ee;
--ink-1: #aeb8c6;
--ink-2: #828d9c;
--accent: #cf3c09;
--accent-soft: #f66634;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-0);
color: var(--ink-0);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
/* Header ------------------------------------------------------------------ */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 0;
}
/*
* The logo, inlined so it can follow the theme.
*
* It is `Assets/SVG/Buuk Logo_1.svg` pasted in whole, wordmark and quill in
* the one viewBox, which is what keeps the quill sitting on the wordmark's
* baseline: the alignment is the one that was drawn, not one reconstructed
* here out of two boxes and a guess at where the baseline falls.
*
* The source gives the quill a fill and leaves the wordmark without one, so
* the wordmark would render at the browser default black — which disappears
* against the dark ground. Inlined, its paths take `.logo-word` and
* `currentColor` so they follow the ink, and the quill takes `.logo-mark` and
* the accent. As an neither fill could be reached at all.
*/
.mark { display: inline-flex; align-items: center; color: var(--ink-0); }
.logo { height: 34px; width: auto; display: block; }
.logo .logo-word { fill: currentColor; }
.logo .logo-mark { fill: var(--accent); }
/*
* The footer carries the "by Codira" lockup rather than the plain mark — the
* footer is where a page says who made it.
*
* 48px, and that is a deliberate reversal of what this rule used to say.
*
* The art is the same drawing on a taller canvas: identical width, the quill at
* identical coordinates, 83.55 units tall instead of 65.64 to fit the second
* line. Scaling to keep the wordmark at its old size gives 33px — but at 33px
* "by Codira" is about five pixels of cap height and reads as a smudge rather
* than as words. Compared at 33 / 40 / 48 / 56 / 64, it clears at 48 and is
* unambiguous at 64.
*
* So the footer mark is deliberately larger than the header's: its wordmark
* lands at 37px against the header's 25px. The old note here said the footer's
* was the quieter of the two, and that is no longer true — which is the right
* trade, because the attribution is the whole reason this lockup is here. An
* illegible credit is decoration pretending to be a credit.
*/
.logo-footer { height: 64px; margin-bottom: 0.75rem; color: var(--ink-1); }
/*
* The quill turns on its own vertical axis, once every fifteen seconds.
*
* rotateY, not rotate. A plain `rotate()` is rotation about Z — the axis
* pointing out of the screen — which cartwheels the quill onto its side. The
* mark should stay upright and turn the way an object on a turntable does, so
* the axis has to be the vertical one.
*
* One revolution in 7.5 seconds, then eight seconds still, repeating: a
* 15.5-second cycle that is turning for a little under half of it. The turn
* itself is linear — a turntable holds its speed — so the keyframes carry the
* rest rather than the easing, holding at 360 degrees from 48.3871% (7.5s of
* 15.5s) to the end. Rest written into the timeline repeats; an
* `animation-delay` would only quieten the first cycle.
*
* `transform-box: fill-box` makes the origin the quill's OWN bounding box
* rather than the whole SVG's viewport. Without it the mark swings around the
* wordmark instead of turning in place, because it sits at the right-hand end
* of a 175-unit canvas it shares with the letters.
*
* The turn is orthographic. `perspective` on the