/* brand.css — the Nabad wordmark, defined once. * * Before this file the mark drifted per page: 20px and ink-black with a dot * inside the app, 28px and purple with NO dot on the landing page, 26px on * the legal pages, and missing entirely on a few. Every page carried its own * copy of the rules, so they drifted apart quietly. * * Canonical mark: pulsing brand dot + "Nabad" in Permanent Marker, at one * size and one colour everywhere. Both class names are covered — `.wordmark` * (app pages) and `.logo` (marketing/legal) — so no page has to be re-marked * up to pick this up. * * Loaded LAST in so it wins over each page's inline styles. */ /* =================================================================== The palette, defined once for the whole site. =================================================================== Every page carried its own copy of these tokens, and they had drifted into three different versions of the same brand: --coral was #FF6BC0 on eight pages and #FF4FB8 on four, --cyan was #0098B8 on six and #00C8E6 on two, and two pages still ran green-tinted neutrals (#0E1B17, #4D6660, #E4ECE9) left over from an earlier look. That green cast under everything is most of why the site read cooler than it was meant to. This file loads last, so these values win on every page and the inline copies become vestigial. Change a colour here and it changes everywhere. Nabad is purple and pink, with a hint of blue: PURPLE the identity. Primary actions, links, the wordmark. PINK what is happening now. Live rooms, open surveys. BLUE the hint. Closed and past things, secondary information. ORANGE one exception, and only in Trash. A warning has to sit outside the family or it stops reading as a warning. The three brand hues are evenly spread across the cool half of the wheel (blue 229, purple 271, pink 326), which is what makes them read as one system rather than three choices. Blue used to be teal at hue 190, which sat outside the family and looked green next to the pink. Every -text value clears 4.5:1 on white and on its own tint, so any of them can carry small text. The bright values are for fills, dots and underlines, not for sentences. =================================================================== */ :root { /* Purple — the identity. Named --teal for historical reasons; the --purple aliases below say what it actually is. */ --teal-dark: #6B1FC2; /* 8.1:1 on white */ --teal: #A44BFF; --teal-light: #F8F0FF; --brand: #6B1FC2; /* Bubblegum — live, open, happening now. Candy rather than magenta: the old pink and the old purple were both deep and cool and sat on the page as one mass. */ --coral: #FF6BC0; --coral-text: #CC1478; /* 5.3:1 on white, 4.8:1 on its tint */ --coral-light: #FFF0F8; /* Sky — the hint of blue. Was an indigo, which sat one hue from the purple and pooled with it. This is the blue from the homepage ribbon. */ --cyan: #35A8F0; --cyan-text: #1E6FC4; /* 5.1:1 on white, 4.6:1 on its tint */ --cyan-light: #EBF6FE; /* Orange — Trash in the interface, and the fourth series colour in a chart. Mango rather than the burnt red-orange it was: at bar size the old one read brown, which is nobody's idea of a brand colour. The -text value is the only one dark enough to carry small type on the tint, and it is deliberately not the same orange. */ --orange: #FFB02E; --orange-text: #AD5304; /* 5.2:1 on white, 4.8:1 on its tint */ --orange-light: #FFF5E6; /* Endings — End session, Delete, Closed. There is no red in Nabad. A red button tells a host they are about to do something wrong, and ending a session you meant to end is not wrong. So the deep pink already in the set carries it: firm, unmistakably not the blue you just clicked to go live, and not alarming. --ruby stays as an alias so nothing that already refers to it breaks. */ --end: #CC1478; /* 5.3:1 on white, 4.8:1 on its tint */ --end-light: #FFF0F8; --ruby: #CC1478; --ruby-text: #CC1478; --ruby-light: #FFF0F8; /* Yes — verified, done, correct. The one affirmative colour, and the only green in Nabad. It was five near-identical greens invented separately in two files (#15803D, #126A33, #16A34A, #1F7A4D, #0A7D55), which is how a palette stops being a palette. Green is not a brand colour here and never appears as one; it says a thing has been checked, and nothing else. Anything that is merely a language, a state, or a series colour must not reach for it. */ --yes: #15803D; /* white on it is 5.0:1 */ --yes-hover: #126A33; --yes-text: #166534; /* 7.1:1 on white, 6.8:1 on its tint */ --yes-light: #F0FDF4; --yes-edge: #86EFAC; /* Live — Present, Join, the live pill. The one thing on a page you can walk into, so it is the brightest colour in the set. */ --now: #35A8F0; --now-light: #EBF6FE; --now-text: #1E6FC4; /* Neutrals, warm rather than green. */ --ink: #1A1A1A; --ink-soft: #5F5E5A; --ink-mute: #6E6C66; --bg: #FCFCF9; --line: #EDEAE4; --line-soft: #F4F2ED; --white: #FFFFFF; --error: #C0392B; --error-bg: #FCEBE8; /* Aliases some pages use for the same things. */ --text: #1A1A1A; --muted: #5F5E5A; --border: #EDEAE4; /* Series colours, in the order a chart should use them: purple, pink, blue, orange, then a light purple when a fifth is needed. The AI caps word-cloud clusters at five, so five is the real ceiling, not four. Each carries a -from for where its bar gradient starts, and a -bg tint. Bars run LIGHT to DEEP, not deep to light, for two reasons. Most of a bar's area is then the pale end, so a screen of results reads open rather than heavy. And the percentage moves inside the bar and turns white once the bar passes 80%, landing on the right-hand end, where the deep colour is. Orange is the exception and has to be. A mango light enough to look like mango cannot carry white text: white on #F5901E is 2.4:1. So the number on an orange bar is near-black instead, which reads at 6.2:1 on the deep end and 11.3:1 on the pale one. Every other series keeps white. */ --series-1: #6B1FC2; --series-1-mid: #A44BFF; --series-1-from: #DCAEFF; --series-1-bg: #F8F0FF; --series-2: #CC1478; --series-2-mid: #FF6BC0; --series-2-from: #FFC4E8; --series-2-bg: #FFF0F8; --series-3: #1E6FC4; --series-3-mid: #35A8F0; --series-3-from: #A8E0FF; --series-3-bg: #EBF6FE; --series-4: #D9700F; --series-4-mid: #FFB02E; --series-4-from: #FFE0A0; --series-4-bg: #FFF5E6; --series-5: #8A27D9; --series-5-mid: #C77CF5; --series-5-from: #E4BBFF; --series-5-bg: #F8EFFE; /* Honest names, same values. New code can use these; the old names stay so twelve files do not have to be rewritten to change a colour. */ --purple-dark: #6B1FC2; --purple: #A44BFF; --purple-light: #F8F0FF; --pink: #FF6BC0; --pink-text: #CC1478; --pink-light: #FFF0F8; } /* == What a button's colour means =================================== Pink is for making something that did not exist a moment ago: a new session, a new survey, one more question. Purple is for acting on something already there: present it, edit it, share it, close it. Two reasons this lives here rather than in each page. One: these buttons sit in four files under four different class names (.primary-btn, .btn btn-primary, .btn-join, an inline style), so a rule written per page drifts the moment one page is rewritten. That already happened once, which is how the dashboard ended up all purple while the editor went all pink. Two: brand.css loads last on every page, so this wins without needing !important. The ID selectors beat the class rules they override. The pink is --pink-text #CC1478, never --pink #FF6BC0: white on the bright pink is 3.4:1 and fails, white on this one is 5.8:1 and passes. =================================================================== */ /* Purple makes something that did not exist a moment ago. */ #addQBtn, .primary-btn[data-create], .btn-create { background: var(--purple-dark, #6B1FC2); border-color: var(--purple-dark, #6B1FC2); color: #FFFFFF; } /* Sep 12 2026: the dashboard's two shelf buttons are the exception, and the reason is hierarchy rather than meaning. They still make something that did not exist a moment ago, so they stay purple, but a FILLED purple sat beside a filled purple Present on every card below them, and the page's once-a-day action ended up looking exactly like the card's every-time one. Purple on the purple tint: 7.27:1, loudest thing in the shelf heading, no longer loudest on the screen. `.primary-btn[data-create]` above is the empty-state button and KEEPS the fill — on a shelf with nothing on it, it is the only thing to press. */ #newSessionBtn, #newSurveyBtn { background: #FFFFFF; border-color: #EADCFB; color: var(--purple-dark, #6B1FC2); } /* The bright sky is a room with people in it right now. Join and Present are the two doors into one, so they are the same colour on purpose. */ /* Ink, not white. The new palette is lighter than the one it replaced: white on this blue is 2.6:1 and fails outright, ink is 6.6:1. Keep the bright fill, darken the letters — the same call the Join button on the homepage already makes. */ .btn-join, #presentBtn, .btn-present { background: var(--now, #35A8F0); border-color: var(--now, #35A8F0); color: var(--ink, #1A1A1A); } /* The deep pink stops something. These were ghost buttons or family-coloured ones, which made End session look exactly as inviting as Present: the only thing telling them apart was the word on the button. */ #endBtn, .btn-end, .btn-danger, .danger-btn, button[data-danger], .confirm-delete { background: var(--end, #CC1478); border-color: var(--end, #CC1478); color: #FFFFFF; } #newSessionBtn:hover, #newSurveyBtn:hover { background: #F1E5FF; border-color: #DFC9F7; filter: none; } #addQBtn:hover, .primary-btn[data-create]:hover, .btn-create:hover, .btn-join:hover, #presentBtn:hover, .btn-present:hover, #endBtn:hover, .btn-end:hover, .btn-danger:hover, .danger-btn:hover, button[data-danger]:hover, .confirm-delete:hover { filter: brightness(1.08); } :root { --blue: #35A8F0; --blue-text: #1E6FC4; --blue-light: #EBF6FE; } .wordmark, a.logo, .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Permanent Marker', 'Bricolage Grotesque', cursive; font-weight: 400; font-size: 22px; letter-spacing: 0.01em; line-height: 1; /* Fallbacks matter: the marketing pages don't all define --ink. */ color: var(--ink, #0E1B17); } .wordmark:hover, a.logo:hover, .logo:hover { opacity: .85; } /* The dot is the mark. Two class names exist in the wild — `.dot` inside the app and `.logo-pulse` on the marketing and legal pages — so both are styled here rather than re-marking up four pages. Fixed gradient rather than a variable, because the colour tokens are named --teal-dark / --coral on some pages for historical reasons and don't exist at all on others. */ .wordmark .dot, a.logo .dot, .logo .dot, .wordmark .logo-pulse, a.logo .logo-pulse, .logo .logo-pulse { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #6B1FC2, #FF4FB8); animation: nabad-pulse 1.6s ease-in-out infinite; } @keyframes nabad-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .72; } } @media (prefers-reduced-motion: reduce) { .wordmark .dot, a.logo .dot, .logo .dot, .wordmark .logo-pulse, a.logo .logo-pulse, .logo .logo-pulse { animation: none; } } /* Permanent Marker has no Arabic glyphs — fall back to the Arabic stack so the mark doesn't render in a default serif on Arabic pages. */ html[lang="ar"] .wordmark, html[lang="ar"] a.logo, html[lang="ar"] .logo { font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Bricolage Grotesque', sans-serif; font-weight: 700; } /* Persian rides on every direction and mirroring fix Arabic paid for, but not on its face. IBM Plex Sans Arabic does draw پ چ ژ گ, yet not the way a Persian reader expects to see them. Vazirmatn is the de facto Persian UI typeface and is on Google Fonts, so it costs one more family in the link tag that every page already carries. Arabic keeps Plex. */ html[lang="fa"] .wordmark, html[lang="fa"] a.logo, html[lang="fa"] .logo { font-family: 'Vazirmatn', 'IBM Plex Sans Arabic', 'Bricolage Grotesque', sans-serif; font-weight: 700; } /* Everything brand.css sets in Inter, Persian pages set in Vazirmatn. Page