/* ============================================================= Barakah Games — design tokens Two layers. Never merge them. --bg-* Barakah Games. True of any game the company makes. --p-* Product. Colour and marks. Swapped per product. Rule: no component references a hex value directly, and no --bg-* component assumes a particular hue. Duplicate this file into each repo. Do not package it. ============================================================= */ :root { /* ---------- BRAND LAYER · Barakah Games ---------- */ /* Type Both faces are placeholders in the app — the final faces are not confirmed. If they change, change them in both repos. */ --bg-font-display: "Playfair Display", Georgia, serif; --bg-font-body: "Montserrat", system-ui, -apple-system, sans-serif; --bg-weight-display: 400; --bg-weight-body: 400; --bg-weight-secondary: 300; /* all secondary and small copy */ /* Type scale — mobile first. Body stays generous; half the audience reads this at night, one-handed. */ --bg-size-display-1: clamp(2.25rem, 7vw, 3.5rem); --bg-size-display-2: clamp(1.75rem, 5vw, 2.5rem); --bg-size-display-3: clamp(1.375rem, 4vw, 1.75rem); --bg-size-body: 1.0625rem; /* 17px */ --bg-size-body-lg: 1.125rem; --bg-size-small: 0.875rem; --bg-size-label: 0.5625rem; /* ~9px — the gold uppercase labels */ --bg-leading-display: 1.15; --bg-leading-body: 1.6; --bg-tracking-display: -0.01em; --bg-tracking-label: 0.4em; /* very wide. this is the look. */ /* Contrast ladder — secondary text is ink at reduced opacity, never a second grey. 58% is the floor. Do not go below it. */ --bg-alpha-primary: 1; --bg-alpha-body: 0.72; --bg-alpha-label: 0.62; --bg-alpha-hint: 0.58; /* FLOOR */ --bg-alpha-hairline: 0.16; /* Space */ --bg-space-2xs: 0.25rem; --bg-space-xs: 0.5rem; --bg-space-sm: 0.75rem; --bg-space-md: 1.25rem; --bg-space-lg: 2rem; --bg-space-xl: 3.5rem; --bg-space-2xl: 5.5rem; --bg-space-section: clamp(4rem, 12vw, 8rem); --bg-measure: 34rem; /* max line length for body copy */ /* Shape — circles, not squares. There is essentially no rectangle in the product that is not a photograph. */ --bg-radius-none: 0; --bg-radius-full: 9999px; --bg-hairline-width: 1px; /* Motion — fade and rise. Nothing bounces, nothing spins. */ --bg-motion-rise: 10px; --bg-motion-duration: 520ms; --bg-motion-duration-fast: 240ms; --bg-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* The one filled thing. See CLAUDE.md — Open decisions. Until the buy-action question is settled, nothing else on the site may use a fill. */ --bg-fill-permitted: 0; } @media (prefers-reduced-motion: reduce) { :root { --bg-motion-rise: 0px; --bg-motion-duration: 1ms; --bg-motion-duration-fast: 1ms; } } /* ---------- PRODUCT LAYER · One Step Closer ---------- Set on the document root: A second product adds a sibling block. It does not edit this one. */ [data-product="one-step-closer"] { --p-ground: #3A5F4A; /* forest — the ground on almost every page */ --p-ground-deep: #2F4E3D; /* depth within a page, not a second theme */ --p-ink: #F8F5F0; /* cream — all type, all lines, all marks */ --p-accent: #C97B5A; /* terracotta — the accent, and the line */ --p-label: #C9A878; /* gold — small uppercase labels, and Ramadan. nothing else. gold is rationed. */ /* Category colours. accent → may be used as type deep → background only, never type */ --p-open-book: #C97B5A; --p-open-book-deep: #8F4B33; --p-deen-talk: #7A9B82; --p-deen-talk-deep: #2E4F3C; --p-quick-connect: #B5A4C0; --p-quick-connect-deep: #574468; --p-ramadan: #C9A878; --p-ramadan-deep: #8B671D; /* Derived — always compose from --p-ink, never a second grey */ --p-text: rgb(from var(--p-ink) r g b / var(--bg-alpha-primary)); --p-text-body: rgb(from var(--p-ink) r g b / var(--bg-alpha-body)); --p-text-label: rgb(from var(--p-ink) r g b / var(--bg-alpha-label)); --p-text-hint: rgb(from var(--p-ink) r g b / var(--bg-alpha-hint)); --p-hairline: rgb(from var(--p-ink) r g b / var(--bg-alpha-hairline)); } /* Fallback for browsers without relative colour syntax */ @supports not (color: rgb(from #fff r g b / 50%)) { [data-product="one-step-closer"] { --p-text: #F8F5F0; --p-text-body: rgba(248, 245, 240, 0.72); --p-text-label: rgba(248, 245, 240, 0.62); --p-text-hint: rgba(248, 245, 240, 0.58); --p-hairline: rgba(248, 245, 240, 0.16); } } /* ============================================================= Base. The site is dark — cream on forest, never the inverse. There is no light mode and no white background anywhere. ============================================================= */ html { background: var(--p-ground); color: var(--p-text-body); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--bg-font-body); font-weight: var(--bg-weight-secondary); font-size: var(--bg-size-body); line-height: var(--bg-leading-body); } /* Headlines are sentence case with a full stop. Not title case, not all caps, never without the stop. */ h1, h2, h3 { font-family: var(--bg-font-display); font-weight: var(--bg-weight-display); line-height: var(--bg-leading-display); letter-spacing: var(--bg-tracking-display); color: var(--p-text); margin: 0 0 var(--bg-space-md); } h1 { font-size: var(--bg-size-display-1); } h2 { font-size: var(--bg-size-display-2); } h3 { font-size: var(--bg-size-display-3); } p { max-width: var(--bg-measure); margin: 0 0 var(--bg-space-md); } /* The small gold labels. Rationed — these and Ramadan only. */ .label { font-family: var(--bg-font-body); font-size: var(--bg-size-label); font-weight: var(--bg-weight-secondary); letter-spacing: var(--bg-tracking-label); text-transform: uppercase; color: var(--p-label); } /* Choice rows — hairline ruled. No fills, no pills, no cards, no shadows. */ .row { border-bottom: var(--bg-hairline-width) solid var(--p-hairline); padding: var(--bg-space-md) 0; background: none; border-radius: var(--bg-radius-none); box-shadow: none; } /* Inputs — transparent, single underline, label permanently above. Never a placeholder standing in for a label. */ .field { border: 0; border-bottom: var(--bg-hairline-width) solid var(--p-hairline); background: transparent; color: var(--p-text); font: inherit; padding: var(--bg-space-xs) 0; border-radius: 0; transition: border-color var(--bg-motion-duration-fast) var(--bg-motion-ease); } .field:focus { outline: none; border-bottom-color: var(--p-accent); } /* Every hairline row and control needs a real focus state — there are no fills to carry one. */ :where(a, button, .row, [tabindex]):focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; } /* Entry motion — fade and rise ~10px. Nothing bounces. */ @keyframes bg-enter { from { opacity: 0; transform: translateY(var(--bg-motion-rise)); } to { opacity: 1; transform: none; } } .enter { animation: bg-enter var(--bg-motion-duration) var(--bg-motion-ease) both; }