shrink-wraps to its content (fine for the text-heavy About/Roster, but it collapsed the bar-only Guild page to a narrow column). An explicit width:100% stops the shrink-wrap; max-width + auto margins still cap and centre it. border-box keeps UIkit's padding inside the cap. */ main.uk-container { flex: 1 0 auto; width: 100%; box-sizing: border-box; } .ig-footer { flex-shrink: 0; } /* Headings: Oswald (the distinctive condensed look the rebuild had lost) */ h1, h2, h3, h4, h5, h6, .uk-article-title { font-family: 'Oswald', 'Roboto', sans-serif; font-weight: 500; color: var(--ig-fg); letter-spacing: 0.01em; } /* Links: warrior-gold, gentle hover */ a { color: var(--ig-accent); text-decoration: none; transition: color 120ms ease; } a:hover, a:focus { color: var(--ig-accent-hover); text-decoration: underline; } /* UIkit's .uk-light (on ) sets `a { color:#fff }` at specificity (0,1,1), which outranks the plain `a` rule above and washes our link colour to white. Reclaim the accent here at matching specificity (this sheet loads after UIkit so it wins the tie). Class-coloured names override even this — see the .uk-light .wow-class.wow-X rules (0,3,0) in roster.css, which keep a character's class colour in every state, including hover/focus (UIkit's `.uk-light a:hover{color:#fff}` is only 0,2,1). Their hover cue is the class-coloured underline from a.ig-char-link:hover. */ .uk-light a { color: var(--ig-accent); } .uk-light a:hover, .uk-light a:focus { color: var(--ig-accent-hover); } /* --- Header / logo -------------------------------------------------------- */ .ig-header { padding: 2.5em 1em 1em; } .ig-header a { display: inline-block; line-height: 0; } .ig-logo { display: block; margin: 0 auto; max-width: 100%; height: auto; /* Canvas is 720x134 (14px transparent + feathered top baked into the PNG), so this is a touch taller than the 100px used for the 720x120 source — keeps the visible artwork at roughly the same size. */ max-height: 112px; } /* --- Nav (UIkit uk-subnav, restyled) ------------------------------------- Animated centre-out underline on hover/active, with an ornamental ◆ diamond separator between items, vertically centred on the text. We override UIkit's negative-margin gap system (margin-left / per-item padding-left) with a flex layout so the diamond can sit as a centred flex child between items. */ .ig-nav { border-bottom: 1px solid var(--ig-border); padding: 0.25em 1em 1em; } .ig-nav .uk-subnav { align-items: center; margin-left: 0; /* cancel UIkit's -20px gutter */ } .ig-nav .uk-subnav > * { display: flex; align-items: center; /* centres the link AND the ::before diamond */ padding-left: 0; /* cancel UIkit's per-item gutter */ } /* Diamond separator before every item after the first, centred on the text */ .ig-nav .uk-subnav > * + *::before { content: "\25C6"; /* ◆ */ color: var(--ig-accent); opacity: 0.45; font-size: 0.6rem; line-height: 1; margin: 0 1.4rem; /* the inter-item spacing lives here */ } .ig-nav .uk-subnav > * > a { position: relative; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 1.22rem; /* ~+2px over the previous 1.05rem */ letter-spacing: 0.06em; text-transform: uppercase; color: var(--ig-accent); padding: 0.15em 0; /* symmetric, so the diamond lines up with the text */ transition: color 150ms ease; } /* Underline grows from the centre outward */ .ig-nav .uk-subnav > * > a::after { content: ""; position: absolute; left: 50%; bottom: -2px; height: 2px; width: 0; background: var(--ig-accent); transform: translateX(-50%); transition: width 250ms ease; } .ig-nav .uk-subnav > * > a:hover { color: var(--ig-accent-hover); text-decoration: none; } .ig-nav .uk-subnav > * > a:hover::after { width: 100%; } .ig-nav .uk-subnav > .uk-active > a { color: var(--ig-fg); } .ig-nav .uk-subnav > .uk-active > a::after { width: 100%; /* active page stays fully underlined */ } /* Disabled (not-yet-built) nav items — visible but inert */ .ig-nav .ig-nav-disabled > a { color: var(--ig-muted); cursor: not-allowed; pointer-events: none; } .ig-nav .ig-nav-disabled > a::after { width: 0 !important; } /* --- Main / article ------------------------------------------------------ */ main.uk-container { padding-top: 1em; padding-bottom: 2em; } .ig-article { max-width: 760px; margin: 0 auto; } /* Page titles — one shared treatment across About + Roster so they match: Oswald small caps with a subtle divider rule under the heading. */ .ig-article h1, .ig-roster-head h1 { font-size: 2.1rem; margin: 1em 0 0.8em; font-variant: small-caps; letter-spacing: 0.02em; padding-bottom: 0.25em; border-bottom: 1px solid var(--ig-border); } .ig-article p { margin: 0 0 1.2em; } .ig-article strong { color: var(--ig-fg); font-weight: 400; } /* --- Footer -------------------------------------------------------------- */ .ig-footer { border-top: 1px solid var(--ig-border); color: var(--ig-muted); font-size: 0.9rem; margin-top: 2em; padding: 1.5em 1em; } .ig-footer p { margin: 0; } /* --- Footer theme switcher ----------------------------------------------- The toggle is a real (UIkit) button themed to the palette; the popover is forced dark (overriding UIkit's white .uk-dropdown default — selectors are footer-scoped so they comfortably out-specify the framework); each row previews its scheme with a ground/surface/accent/text dot cluster. */ .ig-theme-switch { margin-top: 0.8em; } .ig-footer .ig-theme-toggle.uk-button { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ig-accent); background: var(--ig-bg-elevated); border: 1px solid var(--ig-border); border-radius: 3px; height: 30px; line-height: 28px; padding: 0 0.95em; display: inline-flex; align-items: center; gap: 0.5em; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; } .ig-footer .ig-theme-toggle.uk-button:hover, .ig-footer .ig-theme-toggle.uk-button[aria-expanded="true"] { color: var(--ig-bg); background: var(--ig-accent); border-color: var(--ig-accent); } .ig-theme-toggle .ig-caret { font-size: 0.7em; line-height: 1; } /* Swatch dots — a single accent pip on the button, a 4-dot cluster per row */ .ig-sw-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); flex: none; } .ig-sw { display: inline-flex; align-items: center; gap: 3px; flex: none; } /* Popover — forced dark, regardless of UIkit's #fff/25px defaults */ .ig-footer .ig-theme-drop.uk-dropdown { background: var(--ig-bg-elevated); color: var(--ig-fg); border: 1px solid var(--ig-border); border-radius: 5px; padding: 6px; min-width: 230px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); } .ig-footer .ig-theme-list { margin: 0; } .ig-footer .ig-theme-list > li > a { display: flex; align-items: center; gap: 0.7em; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ig-fg); text-transform: none; padding: 0.5em 0.6em; border-radius: 3px; transition: background 120ms ease, color 120ms ease; } .ig-footer .ig-theme-list > li > a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ig-accent); text-decoration: none; } .ig-footer .ig-theme-list > li > a[aria-checked="true"] { color: var(--ig-accent); } .ig-footer .ig-theme-list > li > a[aria-checked="true"] .ig-theme-name { font-weight: 400; } .ig-footer .ig-theme-list > li > a[aria-checked="true"]::after { content: "\2713"; /* ✓ */ margin-left: auto; color: var(--ig-accent); font-size: 0.9em; } /* --- Themed tooltip ------------------------------------------------------ Pure-CSS, themed to match the site (native title tooltips can't be styled). Any element with data-tip="…" shows it on hover/focus. No JS, so the strict CSP is unaffected; zero per-element cost, so it scales to table rows. */ [data-tip] { position: relative; } [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; width: max-content; max-width: 250px; white-space: pre-line; /* honour \n in data-tip (e.g. the secure-rank label) */ text-align: left; /* reset any inherited heading/uppercase styling to readable body text */ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 0.78rem; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--ig-fg); background: var(--ig-bg-elevated); border: 1px solid var(--ig-border); border-radius: 4px; padding: 0.5em 0.7em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: none; } [data-tip]:hover::before, [data-tip]:focus-visible::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ig-border); z-index: 40; pointer-events: none; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 600px) { body { font-size: 16px; } .ig-header { padding-top: 1.5em; } .ig-article h1, .ig-roster-head h1 { font-size: 1.7rem; } }