/* ═══════════════════════════════════════════════════════════════ * brand-tokens.css — single source of truth for The Kingdom Standard's * gold color system + shared brand pill/button styles. * * Tweak the values in :root once and EVERY page updates at the same time. * * Loaded via * in the of: members.html, council.html, founding.html, * standard.html, the-wall.html, brothers.html, iron-store.html, * leaderboards.html, index.html, podcast.html, standard-card.html, * recruit.html, login.html, members-v2.html. * ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Core gold hues — richer/lighter than the legacy palette ─── */ --gold: #D9B543; /* base gold (was #D1AB36) */ --light-gold: #F0CB6A; /* champagne accent (was #E5B75C) */ --deep-gold: #B89030; /* shadow gold (was #A8862A) */ --edge-gold: #F4D27A; /* hairline border highlight (was #F0CB6A) */ /* ─── Composite gradient — the bright/rich 3-stop used on every gold pill, button, badge, tile across the site. Reads richer on small mobile surfaces because the light-gold middle stop is now a brighter champagne. ─── */ --gold-grad: linear-gradient(135deg, #D9B543 0%, #F0CB6A 50%, #B89030 100%); /* ─── Standard shadow + inset for gold pill buttons. Stronger inset highlight makes mobile pills shimmer like desktop. ─── */ --gold-shadow: 0 8px 24px rgba(217,181,67,0.42); --gold-inset: 0 1px 0 rgba(255,255,255,0.50) inset; --gold-pill-shadow: var(--gold-shadow), var(--gold-inset); } /* ════════════════════════════════════════════════════════════════ * PROFILE BORDER RENDER LAYER — paints a ring around any avatar * that has one of the .has-border-* classes applied. Bronze / Silver * / Gold / IC-Sigil come from Iron Store redemptions; applied in JS * after loading owned items. * Class applied to avatar containers: * .has-border-bronze | .has-border-silver | .has-border-gold | .has-border-ic * ════════════════════════════════════════════════════════════════ */ .has-border-bronze { box-shadow: 0 0 0 3px #cd7f32, 0 0 12px rgba(205,127,50,0.45) !important; } .has-border-silver { box-shadow: 0 0 0 3px #c0c0c0, 0 0 14px rgba(192,192,192,0.55) !important; } .has-border-gold { box-shadow: 0 0 0 3px #D9B543, 0 0 18px rgba(217,181,67,0.65) !important; } .has-border-ic { box-shadow: 0 0 0 3px #F4D27A, 0 0 0 5px rgba(184,144,48,0.65), 0 0 22px rgba(244,210,122,0.85) !important; position: relative; } .has-border-ic::after { content: ''; position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: url('/assets/photos/icon-medal.webp') center/contain no-repeat; filter: drop-shadow(0 0 4px rgba(244,210,122,0.9)); pointer-events: none; } /* ════════════════════════════════════════════════════════════════ * COLLAPSIBLE PROFILE SECTIONS — pe-card becomes an accordion when * .pe-card--collapsible is also applied. Click the title row to toggle. * JS toggles .is-collapsed and hides everything except the title. * ════════════════════════════════════════════════════════════════ */ .pe-card--collapsible .pe-card__title { cursor: pointer; user-select: none; position: relative; padding-right: 32px; transition: color 0.2s; } .pe-card--collapsible .pe-card__title::after { content: '▾'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(0deg); color: var(--gold); font-size: 15px; transition: transform 0.25s; } .pe-card--collapsible.is-collapsed > :not(.pe-card__title) { display: none !important; } .pe-card--collapsible.is-collapsed .pe-card__title::after { transform: translateY(-50%) rotate(-90deg); } .pe-card--collapsible.is-collapsed .pe-card__title { margin-bottom: 0 !important; } .pe-card--collapsible .pe-card__title:hover { color: var(--gold); }