/* brand.css - ClouDist brand lockup (orbit mark + wordmark). Used on the login screens and in the application header. The mark is the official artwork, cut out of the master logo file with the white background turned into un-premultiplied alpha, so it composites onto any surface without a white halo. Do not redraw it. Two mark files ship: the -dark one has the same artwork with the lightness lifted, because the brand navy turns into a dark blob on a dark surface instead of reading as a logo. theme.js puts data-theme="dark" on whenever the resolved theme is dark - including "auto" following the OS - so one attribute selector covers every case, and nothing flashes on first paint. Everything scales from the font-size set on .cd-lockup. */ .cd-lockup { display: inline-flex; align-items: center; /* Tight, like the master lockup: the mark's own artwork carries the spacing. */ gap: 0.1em; /* A Latin lockup keeps mark-then-wordmark order inside the RTL page. */ direction: ltr; line-height: 1; } .cd-mark { display: block; flex: 0 0 auto; width: auto; /* Keeps roughly the mark-to-wordmark proportion of the master lockup, while still fitting the header row. */ height: 1.95em; } .cd-mark.is-dark { display: none; } [data-theme="dark"] .cd-mark.is-light { display: none; } [data-theme="dark"] .cd-mark.is-dark { display: block; } .cd-wordmark { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: #0A2E80; } [data-theme="dark"] .cd-wordmark { color: #EAF1FF; }