/* KiQ wordmark in live text — the dot of the i is the orange signature ball. * * THE ONE SOURCE: KiQHub/Brand/signature/kiq-wordmark.css. Apps use a copy, never their own version (KiQ Hub Office: * office/tools/sync_brand.py copies it to office/server/static/css/). Change it here, then sync. * * * * "ı" is U+0131 (dotless i, ı): the font draws the stem, .kq-i::before draws the ball where the dot was. * role="img" makes screen readers read the aria-label ("KiQ") — on a plain span it is ignored, and with the inner text * aria-hidden the word would not be read at all. translate="no" keeps page translators off the brand name. * Copying the text gives "KıQ" (dotless i). * * Use it only where "KiQ" is the LOGO / brand name (headers, logo lockups, badges, splash). Running text stays plain. * The weight is the surrounding text's: add .kq-wm--logo for a stand-alone logo in the logo weight (700). * * How the ball is placed (all in em, so it follows the font size): * - height: the ball is an inline box raised with vertical-align, so its position is measured from the BASELINE, not * from the font's ascent or the line-height — it stays right in any font, any line-height, and never sits on the stem * in a fallback font. Its centre is at --kq-dot-y (the centre of the font's own i-dot), its diameter --kq-ball * (1.3 × that dot). * - across: .kq-i is the ı's own box and the ball is centred on it (left: 50%), so it needs no font's i width. * It takes no width itself (margin-right: −its size), so the letters keep their places. Letter-spacing widens the ı's * box by the spacing after it, which moves the ball by half of it: with tracking t on the wordmark set --kq-x: −t/2 * (the KiQ Hub splash: letter-spacing −.035em → --kq-x: .0175em). * * Tuning — set the properties on .kq-wm or on any parent (they inherit), measured from each font's own i-dot: * --kq-dot-y --kq-ball * Inter 600 .692em .19em * Inter 700 (default) .692em .21em * Inter 800 .692em .23em * SF / system 600 .66em .18em * SF / system 700 .665em .20em = .kq-wm--system (also close for Helvetica, Arial, Segoe UI bold) * SF / system 800 .67em .22em * The ball is the same as Brand/signature/ball.svg (its gradient, turned 37.7°), drawn with CSS gradients only, so it * needs no image and no Content-Security-Policy exception. */ .kq-wm { white-space: nowrap; } .kq-wm--logo { font-weight: 700; } .kq-wm--system { --kq-dot-y: .665em; --kq-ball: .2em; } .kq-wm .kq-i { display: inline-block; /* the ı's own box (its baseline is the text's): the ball is centred on it */ } .kq-wm .kq-i::before { content: ""; display: inline-block; width: var(--kq-ball, .21em); height: var(--kq-ball, .21em); margin-right: calc(-1 * var(--kq-ball, .21em)); /* takes no width */ vertical-align: calc(var(--kq-dot-y, .692em) - var(--kq-ball, .21em) / 2); /* bottom of the ball above the baseline */ position: relative; left: calc(50% - var(--kq-ball, .21em) / 2 + var(--kq-x, 0em)); /* centred on the ı */ border-radius: 50%; pointer-events: none; -webkit-print-color-adjust: exact; /* printers drop background gradients unless told not to */ print-color-adjust: exact; /* ball.svg, layer by layer, in the ball's own frame (turned back by the 37.7° of its body gradient) */ transform: rotate(37.7deg); background: /* the white specular band along the top-left edge: ball.svg's arc, as overlapping spots */ radial-gradient(ellipse 6% 6% at 14.0% 58.3%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 13.5% 55.1%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 13.2% 51.9%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 13.1% 48.7%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 13.4% 45.5%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 13.9% 42.3%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 14.7% 39.2%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 15.8% 36.2%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 17.1% 33.2%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 18.7% 30.4%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 6% 6% at 20.5% 27.8%, rgba(255, 255, 255, .96) 74%, rgba(255, 255, 255, 0) 100%), /* the small, softer reflection under it */ radial-gradient(ellipse 5% 7% at 16% 69%, rgba(255, 243, 214, .6) 30%, rgba(255, 230, 176, 0) 100%), /* warm light along the top-left edge */ radial-gradient(ellipse 62% 62% at 65.25% 53.37%, rgba(255, 207, 126, 0) 84%, rgba(255, 207, 126, .15) 95%, rgba(255, 220, 152, .5) 100%), /* light through the glass along the bottom-right edge */ radial-gradient(ellipse 60% 60% at 35.97% 48.21%, rgba(255, 154, 69, 0) 88%, rgba(255, 162, 77, .7) 100%), /* the body: colours sampled from ball.png — glow, core, mid, rim */ radial-gradient(ellipse 87% 117.5% at 87.6% 83.4%, #FE6631 0%, #FB5924 38%, #FD5D24 52%, #FD6728 59%, #FD7530 66%, #FD843C 72%, #FD954D 79%, #FDA356 86%, #FEA850 93%, #FEB55C 100%); } /* high-contrast modes drop gradients: keep a dot, in the text colour */ @media (forced-colors: active) { .kq-wm .kq-i::before { forced-color-adjust: none; background: CanvasText; } }