/* ============================================================================= One Birdie Bam: design tokens. Bali Yoga School's measured devices (pills, caption cards, radii, rhythm, the 12 column frame, the arch) carrying the declared deviations of ../BUILD-SPEC.md: D1 her blue and mint on Bali's warm ground, D2 Fraunces and DM Sans (her own site's two faces), self-hosted, D3 the mahjong drawing set. Every other stylesheet reads these; none hard-codes a colour, a face, a radius or the page rhythm. Measured from her files: blue #4747F3 (her site's CSS; the logo's pixels 72,71,241); mint #00D588 (the logomark vectorized, rgb(0,213,136), the bird's body). Contrast of the text pairs in use (WCAG 2, computed on the hex values, 2026-10-31): ink on ground 14.52 ink on white 16.17 ink on mint tint 14.08 ink on butter 11.10 ink on sky 13.28 brand on ground 5.44 brand on white 6.06 brand on mint tint 5.28 brand on sky 4.98 mint-ink on ground 5.29 mint-ink on white 5.89 mint-ink on mint tint 5.13 white on brand 6.06 white on ink 16.17 white on night 10.43 ivory (ground) on brand 5.44 ink-quiet (ink at 74%) on ground 6.52, on white 6.93, on mint tint 6.39, on butter 5.69 Never as small text: mint (1.73 on ground; 3.14 on brand, so large marks and the drawings on the blue band only), brand on butter (4.16: the butter card's text is ink). ========================================================================== */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/dmsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- colour (D1) ---------------------------------------------------------- */ --ground: #F8F2E8; /* warm ivory, the face of a tile: the page (Bali's sand role) */ --card: #FFFFFF; /* white cards, caption cards, the header pill, the menu panel */ --ink: #1D1E3A; /* near black with a blue cast: text, dark pills, 1px outlines */ --ink-invert: #FFFFFF; --brand: #4747F3; /* her blue: the wordmark, H1s, links, the app band, focus rings */ --mint: #00D588; /* her bird's mint: drawings on the blue band, large marks, never small text */ --mint-ink: #08734B; /* a deeper green for any small green text (5.1 to 5.9:1 on the light grounds) */ --mint-tint: #DCF5EA; /* the mint tint band and the label chips (Bali's blush role) */ --sky: #E7E7FD; /* a pale wash of her blue, for small fills */ --butter: #F6D365; /* the butter yellow of the racks in her photos: the chooser card (Bali's turmeric role) */ --night: #2B2BA8; /* a deep blue for the one dark band a page may have */ --night-ink: #FFFFFF; --night-quiet: rgba(255, 255, 255, .84); --veil: 43, 43, 168; /* the night as rgb, for the photo veils (rgba(var(--veil), a)) */ --ill-paper: var(--ground); /* the drawings' holes and the logo's counters: each band sets its own ground */ /* Bali's role names, kept so every device reads one palette (one source: the colours above) */ --clay: var(--brand); /* the drawings' default ink on light grounds (5.4:1 on ground) */ --clay-ink: var(--brand); /* small accent text */ --blush: var(--mint-tint); --turmeric: var(--butter); --sun: var(--butter); --strip: var(--mint-tint); --sand: var(--mint-tint); --line: rgba(29, 30, 58, 1); /* 1px solid ink (outline pills, field underlines) */ --line-soft: rgba(29, 30, 58, .12); --ink-quiet: rgba(29, 30, 58, .74); /* secondary text on light grounds, 6.5:1 on the ground */ --err: #A12A1E; /* --- type (D2: her site's faces, self-hosted) ------------------------------- */ --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --serif-w: 400; --sans-light: 400; /* DM Sans is set from 400 (Bali's Inter ran at 300) */ --track-body: -0.005em; --track-h: -0.015em; --track-h2: -0.02em; --track-menu: -0.03em; /* --- radius ---------------------------------------------------------------- */ --r-pill: 20px; /* pills, caption cards, chips */ --r-strip: 12px; /* small controls (rail buttons) */ --r-photo: 4px; /* every photo but the arches and the one big corner */ --r-arch: 72px; /* the single big corner (top left) */ --r-dome: 999px; /* the arch top, a full semicircle on a tall frame */ --r-box: 40px; /* the white card, the butter chooser card, the bands */ --r-burger: 16px; /* --- frame and rhythm -------------------------------------------------------- */ --edge: 12px; --col-gap: 12px; --inset: 20px; --sec-y: 96px; /* sections 96 / 96 at 1440 */ --card-in: 20px; /* --- the header pill (fixed, headroom) --------------------------------------- */ --head-top: 8px; --head-h: 64px; --head-space: calc(var(--head-top) + var(--head-h) + 16px); /* --- motion ------------------------------------------------------------------ */ --ease-rise: cubic-bezier(0.665, 0.425, 0.44, 1.105); --dur-rise: .4s; --delay-rise: .1s; --dur-hover: .2s; /* --- the ONE nav breakpoint shared by CSS and JS (site.js reads it) ---------- */ --bp-nav: 1100px; --demo-top: 80px; } @media (max-width: 600px) { :root { --edge: 8px; --col-gap: 8px; --inset: 8px; --sec-y: 56px; --card-in: 8px; --head-h: 60px; --head-space: calc(var(--head-top) + var(--head-h) + 12px); --demo-top: 76px; } }