/* UGO — the iconic G (generated by tools/ugo-g-glyph.js; do not edit by hand).
*
* js/ugo-g.js wraps the word in bold text: UGO
* The letter stays in the page (copy, search, screen readers read "UGO"); it is just not painted. The glyph is the g of the logo
* (ring + flag + a detached smile), drawn as a mask in the text colour, so it follows light and dark themes. Its size comes from
* the surrounding type: 1cap for capitals, 1ex for lowercase (with a fallback for browsers without the cap unit).
* Class suffix: c = capitals, x = lowercase; 7 / 8 / 9 = the weight (700 / 800 / 900) the strokes are drawn for.
*/
/* the whole word is one unbreakable unit: a line may never break between the U, the glyph and the O */
.ugo-w { white-space: nowrap; }
.ugo-g {
--ugo-c: calc(1cap * 1.028); /* height of the ring: the capital height plus the overshoot a round letter has */
--ugo-g-mask: none;
display: inline; /* plain inline flow on purpose: no positioned or block boxes, so innerText and screen readers still see one word */
}
.ugo-g--x7, .ugo-g--x8, .ugo-g--x9 { --ugo-c: calc(1ex * 1.028); }
@supports not (width: 1cap) {
.ugo-g { --ugo-c: .747em; }
.ugo-g--x7, .ugo-g--x8, .ugo-g--x9 { --ugo-c: .578em; }
}
/* The drawn glyph: an empty inline box that sits on the baseline. Its box is the full 527 x 720.5 glyph (tail included), and a
negative bottom margin of the tail's length makes its margin box only as tall as the ring, so the smile hangs below the baseline
without adding to the line's height. Its bottom margin edge is the baseline of an empty inline-block, hence the ring's bottom
sits on the baseline. The advance (1.137 x the ring) is the glyph plus its side bearings. */
.ugo-g::before {
content: "";
display: inline-block;
box-sizing: border-box;
width: calc(var(--ugo-c) * 1.137);
height: calc(var(--ugo-c) * 1.4585);
margin: 0 0 calc(var(--ugo-c) * -0.4585) 0;
vertical-align: baseline;
position: relative;
top: .014em; /* round letters dip a little below the baseline */
background: currentColor;
-webkit-mask: var(--ugo-g-mask) no-repeat calc(var(--ugo-c) * .035) 0 / calc(var(--ugo-c) * 1.0668) calc(var(--ugo-c) * 1.4585);
mask: var(--ugo-g-mask) no-repeat calc(var(--ugo-c) * .035) 0 / calc(var(--ugo-c) * 1.0668) calc(var(--ugo-c) * 1.4585);
pointer-events: none;
text-indent: 0;
letter-spacing: 0;
}
/* in gradient-filled text (text-transparent + bg-clip-text) js/ugo-g.js hands the glyph the same gradient, lined up with the letters */
.ugo-g--grad::before {
background-color: transparent;
background-image: var(--ugo-g-bg);
background-size: var(--ugo-g-bs);
background-position: var(--ugo-g-bp);
background-repeat: repeat; /* the smile hangs below the text's own box: a horizontal gradient simply continues down */
}
/* The letter itself: kept for copy, search, innerText and screen readers, never painted. It stays laid out (a zero-width
inline-block whose text overflows) but its paint is clipped away completely: an absolutely positioned box would make innerText
break the word into separate lines, and a box clipped with overflow:hidden is dropped from copied text. The clip-path also keeps
the letter out of gradient text (background-clip:text), which would otherwise paint it. */
.ugo-g__t {
display: inline-block;
width: 0;
overflow: visible;
clip-path: inset(50%);
vertical-align: baseline;
white-space: nowrap;
letter-spacing: 0;
}
/* The logo's g on its own: the mark in the navbars and footers ().
Same shape as above but at the logo's own light strokes, in the text colour. Size it with font-size: 1em is the glyph's full
height, tail included (the ring is 0.686em), and the width follows (527 / 720.5). */
.ugo-mark {
display: inline-block;
flex: none;
vertical-align: middle;
width: calc(1em * 0.7314);
height: 1em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2060H249.9A178.1%20187%200%200%201%20428%20247A178.1%20190%200%200%201%20249.9%20437H240.1A178.1%20190%200%200%201%2062%20247A178.1%20187%200%200%201%20240.1%2060Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%2260%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2060H249.9A178.1%20187%200%200%201%20428%20247A178.1%20190%200%200%201%20249.9%20437H240.1A178.1%20190%200%200%201%2062%20247A178.1%20187%200%200%201%20240.1%2060Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2060H249.9A178.1%20187%200%200%201%20428%20247A178.1%20190%200%200%201%20249.9%20437H240.1A178.1%20190%200%200%201%2062%20247A178.1%20187%200%200%201%20240.1%2060Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%2260%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2060H249.9A178.1%20187%200%200%201%20428%20247A178.1%20190%200%200%201%20249.9%20437H240.1A178.1%20190%200%200%201%2062%20247A178.1%20187%200%200%201%20240.1%2060Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
forced-color-adjust: none;
}
/* The shared navbar shrinks its logo on small screens: 26px under 768px, 22px under 480px (the desktop size is 29px; all three are the old 36 / 32 / 28 less 20%). */
@media (max-width: 768px) { .nav-logo .ugo-mark { font-size: 26px !important; } }
@media (max-width: 480px) { .nav-logo .ugo-mark { font-size: 22px !important; } }
/* Printing and high-contrast mode drop background images, which would leave a gap where the G should be: show the plain letter there. */
@media print, (forced-colors: active) {
.ugo-g::before { display: none; }
.ugo-g__t { width: auto; overflow: visible; clip-path: none; }
}
.ugo-g--c7 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2087.44H249.9A139.32%20159.56%200%200%201%20389.22%20247A139.32%20163.02%200%200%201%20249.9%20410.02H240.1A139.32%20163.02%200%200%201%20100.78%20247A139.32%20159.56%200%200%201%20240.1%2087.44Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%2287.44%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2087.44H249.9A139.32%20159.56%200%200%201%20389.22%20247A139.32%20163.02%200%200%201%20249.9%20410.02H240.1A139.32%20163.02%200%200%201%20100.78%20247A139.32%20159.56%200%200%201%20240.1%2087.44Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g--c8 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20100.78H249.9A123.02%20146.22%200%200%201%20372.92%20247A123.02%20150.18%200%200%201%20249.9%20397.18H240.1A123.02%20150.18%200%200%201%20117.08%20247A123.02%20146.22%200%200%201%20240.1%20100.78Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%22100.78%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20100.78H249.9A123.02%20146.22%200%200%201%20372.92%20247A123.02%20150.18%200%200%201%20249.9%20397.18H240.1A123.02%20150.18%200%200%201%20117.08%20247A123.02%20146.22%200%200%201%20240.1%20100.78Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g--c9 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20114.11H249.9A106.23%20132.89%200%200%201%20356.13%20247A106.23%20137.33%200%200%201%20249.9%20384.33H240.1A106.23%20137.33%200%200%201%20133.87%20247A106.23%20132.89%200%200%201%20240.1%20114.11Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%22114.11%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20114.11H249.9A106.23%20132.89%200%200%201%20356.13%20247A106.23%20137.33%200%200%201%20249.9%20384.33H240.1A106.23%20137.33%200%200%201%20133.87%20247A106.23%20132.89%200%200%201%20240.1%20114.11Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g--x7 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20100.78H249.9A108.2%20146.22%200%200%201%20358.1%20247A108.2%20150.18%200%200%201%20249.9%20397.18H240.1A108.2%20150.18%200%200%201%20131.9%20247A108.2%20146.22%200%200%201%20240.1%20100.78Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%22100.78%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20100.78H249.9A108.2%20146.22%200%200%201%20358.1%20247A108.2%20150.18%200%200%201%20249.9%20397.18H240.1A108.2%20150.18%200%200%201%20131.9%20247A108.2%20146.22%200%200%201%20240.1%20100.78Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g--x8 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20114.11H249.9A86.47%20132.89%200%200%201%20336.37%20247A86.47%20137.33%200%200%201%20249.9%20384.33H240.1A86.47%20137.33%200%200%201%20153.63%20247A86.47%20132.89%200%200%201%20240.1%20114.11Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%22114.11%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20114.11H249.9A86.47%20132.89%200%200%201%20336.37%20247A86.47%20137.33%200%200%201%20249.9%20384.33H240.1A86.47%20137.33%200%200%201%20153.63%20247A86.47%20132.89%200%200%201%20240.1%20114.11Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g--x9 { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20129.43H249.9A64.24%20117.57%200%200%201%20314.14%20247A64.24%20122.51%200%200%201%20249.9%20369.51H240.1A64.24%20122.51%200%200%201%20175.86%20247A64.24%20117.57%200%200%201%20240.1%20129.43Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%22129.43%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%20129.43H249.9A64.24%20117.57%200%200%201%20314.14%20247A64.24%20122.51%200%200%201%20249.9%20369.51H240.1A64.24%20122.51%200%200%201%20175.86%20247A64.24%20117.57%200%200%201%20240.1%20129.43Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ugo-g:not([class*="ugo-g--c"]):not([class*="ugo-g--x"]) { --ugo-g-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20527%20720.5%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20x%3D%22-10%22%20y%3D%22545%22%20width%3D%22547%22%20height%3D%22185.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2087.44H249.9A139.32%20159.56%200%200%201%20389.22%20247A139.32%20163.02%200%200%201%20249.9%20410.02H240.1A139.32%20163.02%200%200%201%20100.78%20247A139.32%20159.56%200%200%201%20240.1%2087.44Z%22%2F%3E%3Crect%20x%3D%22245%22%20y%3D%220%22%20width%3D%22282%22%20height%3D%2287.44%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(0%20226.5)%22%20d%3D%22M240.1%200H249.9A240.1%20247%200%200%201%20490%20247A240.1%20247%200%200%201%20249.9%20494H240.1A240.1%20247%200%200%201%200%20247A240.1%20247%200%200%201%20240.1%200ZM240.1%2087.44H249.9A139.32%20159.56%200%200%201%20389.22%20247A139.32%20163.02%200%200%201%20249.9%20410.02H240.1A139.32%20163.02%200%200%201%20100.78%20247A139.32%20159.56%200%200%201%20240.1%2087.44Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }