/* ========================================================================= global.css - shared across ALL event pages ------------------------------------------------------------------------- Design tokens, base styles, layout container, site header/nav, buttons, and footer. Reuse this on every page (Leaderboard, Players, etc.). The PRIMARY color is NOT defined here. It is injected on the root element in each page's HTML () so it can be driven by the event's settings. Every token below is DERIVED from it with color-mix(), so setting one value re-themes the whole site. ========================================================================= */ :root { --primary-dark: color-mix(in srgb, var(--primary), #000 46%); --ink: color-mix(in srgb, var(--primary), #000 78%); --body: color-mix(in srgb, var(--primary), #000 55%); --soft: color-mix(in srgb, var(--primary), #787878 62%); --paper: color-mix(in srgb, var(--primary), #fff 95.5%); --surface: color-mix(in srgb, var(--primary), #fff 99%); --tint: color-mix(in srgb, var(--primary), #fff 88%); --tint-2: color-mix(in srgb, var(--primary), #fff 83%); --line: color-mix(in srgb, var(--primary), #fff 80%); --glow: color-mix(in srgb, var(--primary) 10%, transparent); --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Libre Franklin", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mono: ui-monospace, Menlo, Consolas, monospace; --stripe: repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 12px, transparent 12px 24px); } /* ---- base ---- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); min-height: 100vh; } a { color: var(--primary); text-decoration: none; } a:hover { opacity: .72; } h1, h2, p { margin: 0; } .container { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); } /* shared eyebrow / section label */ .eyebrow, .section-label { font-size: clamp(9px, 1.4vw, 11px); letter-spacing: .30em; text-transform: uppercase; color: var(--primary); } /* ---- page intro ---- */ .top-head { padding: clamp(26px, 5vw, 44px) 0 6px; } .top-head .eyebrow { margin-bottom: 12px; } .top-title { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 7vw, 66px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink); } .top-title-rule { display: block; width: 54px; height: 3px; background: var(--primary); margin: 18px 0 0; } /* ---- buttons ---- */ .btn { display: inline-block; padding: 14px 28px; background: var(--primary); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .btn:hover { opacity: .9; } .btn--dark { background: var(--primary-dark); padding: 13px 24px; font-size: 11px; letter-spacing: .1em; } /* ---- header ---- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); } /* The account control (Sign In / avatar) is absolutely pinned to the top-right, so the header-inner reserves room for it on the right. The nav is a single nowrap block: when it cannot fit beside the brand it drops, as a whole, to a second line and left-aligns there (the flexible spacer stays on the top row). */ .header-inner { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding-top: 15px; padding-bottom: 15px; padding-right: calc(clamp(20px, 5vw, 56px) + 96px); } .brand { display: flex; align-items: center; gap: 13px; flex: none; } .brand-logo { width: 44px; height: 44px; object-fit: contain; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.15; letter-spacing: 0; color: var(--ink); } .brand-sub { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-top: 4px; } /* flexible gap that pushes the nav to the right on the top row and stays behind when the nav wraps to its own line */ .header-spacer { flex: 1 1 auto; min-width: 0; } .site-nav { flex: 0 1 auto; min-width: 0; max-width: 100%; display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; gap: clamp(13px, 2vw, 24px); font-size: 11px; letter-spacing: .06em; padding-bottom: 6px; margin-bottom: -4px; } .site-nav::-webkit-scrollbar { height: 5px; } .site-nav::-webkit-scrollbar-track { background: transparent; } .site-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .site-nav::-webkit-scrollbar-thumb:hover { background: var(--soft); } /* Below this width the nav gets its own full-width row under the brand. The avatar reservation only matters on the top row, so it is dropped here and the nav row runs edge to edge (scrolling when links still overflow). */ @media (max-width: 1000px) { .header-inner { padding-right: clamp(20px, 5vw, 56px); } .header-spacer { display: none; } .site-nav { flex-basis: 100%; } } .nav-link { color: var(--soft); white-space: nowrap; } .nav-link.is-active { color: var(--ink); font-weight: 600; } /* account control - pinned top-right, vertically centered on the brand row */ .nav-signin, .nav-account { position: absolute; top: 15px; right: clamp(20px, 5vw, 56px); height: 44px; display: flex; align-items: center; white-space: nowrap; } .nav-signin { padding-left: clamp(10px, 1.5vw, 20px); border-left: 1px solid var(--line); color: var(--primary); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; } /* signed-in: avatar circle linking to the player's Clubhouse */ .nav-account { width: 44px; justify-content: center; } .nav-account .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } /* profile photo fills the circle when the signed-in player has one */ .nav-account .avatar--photo { background: var(--tint); } .nav-account .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- footer ---- */ .site-footer { border-top: 1px solid var(--line); } .site-footer .container { padding-top: 16px; padding-bottom: 16px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); } /* ===== Unknown Golf animated "working" logo ===== */ /* Rendered by loadingLogo.jsp. The JSP sets --ukg-color and --ukg-max */ /* inline; these rules provide sizing and the animation. */ .ukg-logo{ display:inline-flex; align-items:center; justify-content:center; line-height:0; } .ukg-logo svg{ display:block; height:var(--ukg-max, 150px); width:auto; } /* spiral segment continuously tracing the hole */ .ukg-logo-spin{ animation:ukg-logo-trace 2.1s linear infinite; } /* ball gently pulsing */ .ukg-logo-ball{ transform-box:fill-box; transform-origin:center; animation:ukg-logo-pulse 2.1s ease-in-out infinite; } @keyframes ukg-logo-trace{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-1000; } } @keyframes ukg-logo-pulse{ 0%,100%{ transform:scale(.92); } 50%{ transform:scale(1.06); } } /* respect reduced-motion preferences */ @media (prefers-reduced-motion:reduce){ .ukg-logo-spin, .ukg-logo-ball{ animation:none; } }