/* ================================================================ KINGDOM 685 — public briefing Palette: near-black navy + antique gold, Cinzel display / Inter body ================================================================ */ :root{ --bg: #06090c; --bg-soft: #0a0f14; --panel: #0d1319; --panel-2: #0f151b; /* Referenced by dashboard-extra.css (.role-switcher-group, .admin-card, .ally-bulletin, etc.) but was never actually defined anywhere — those backgrounds were silently falling through to transparent in both themes. Aliased to --panel-2 rather than renaming every call site. */ --bg2: #0f151b; --line2: rgba(255,255,255,0.08); /* Accent tokens (--gold, --gold-bright, --line, --sage…) come from /theme.css so they follow the Profile colour choice. */ --text: #eef1ec; /* The muted/faint pair carries almost every caption, label and eyebrow on the site, all of it 9–11px uppercase — i.e. never "large text", so AA alone is a thin margin for a phone screen in daylight. Both now clear WCAG AAA (7:1) against the darkest surface they land on (--panel-2), with enough gap between them to keep the visual hierarchy readable: muted 8.67:1, faint 7.20:1. */ --muted: #aab4b6; --faint: #9aa4a6; --serif: 'Cinzel', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --shell: 1180px; --section-pad: 128px; } /* ================================================================ LIGHT THEME — toggled from the Profile page ("Interface Theme"), applied via data-theme="light" on before paint (see /theme.js, injected into every page by functions/_middleware.js) so there's no flash of the wrong theme. Every value below was picked and checked against WCAG AA (4.5:1 for normal text, 3:1 for large text/UI) against the backgrounds it's actually used on — this isn't just an inverted palette. ================================================================ */ :root[data-theme="light"]{ --bg: #f5f2ec; --bg-soft: #efece3; --panel: #ffffff; --panel-2: #f4f1ea; --bg2: #f4f1ea; --line2: rgba(20,24,28,0.10); /* Same AAA target as the dark theme: every one of these is measured against --bg-soft (#efece3), the darkest light-mode surface small text sits on, so the quoted ratio is the worst case rather than the best. The light accent inks in /theme.css are held to the same bar. */ --text: #14181b; /* 15:1 on --bg-soft */ --muted: #474f51; /* 7.1:1 on --bg-soft */ --faint: #454e50; /* 7.2:1 on --bg-soft */ } /* Landing page photography has light-mode counterparts (shot/graded for the lighter palette above) — swap them in via CSS `content` so the switch is flash-free and needs no JS, matching how data-theme itself is applied. */ :root[data-theme="light"] .hero-art{ content: url("assets/hero-art-light.jpg"); } :root[data-theme="light"] .priority-art{ content: url("assets/bear-art-light.jpg"); } :root[data-theme="light"] .community-art{ content: url("assets/community-art-light.jpg"); } :root[data-theme="light"] .inside-art{ content: url("assets/inside-art-light.jpg"); } :root[data-theme="light"] .footer-art{ content: url("assets/footer-art-light.jpg"); } :root[data-theme="light"] .brand-mark{ background-image: url("assets/brand-banner-light.png"); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } button{ font-family: inherit; cursor:pointer; } .shell{ max-width: var(--shell); margin: 0 auto; padding: 0 32px; } /* ---------- ambient backdrop ---------- */ /* The page colour is painted here too, not just on : iOS 26 Safari tints its toolbars from a full-width fixed element touching the viewport edge, and while this layer was transparent the bottom bar came out near-white. */ .ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background-color: var(--bg); } .ambient-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(var(--ks-accent-rgb),0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ks-accent-rgb),0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } .ambient-glow{ position:absolute; width:640px; height:640px; border-radius:50%; filter:blur(140px); opacity:.16; } .glow-a{ background: var(--gold); top:-220px; left:-120px; } .glow-b{ background:#3a5a63; bottom:-260px; right:-160px; } main, header, footer{ position:relative; z-index:1; } /* ---------- appbar (brand / nav / utc / actions — one merged bar) ---------- */ .header{ border-bottom:1px solid var(--line2); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); position: sticky; top:0; z-index:60; } /* Three zones: the 685 mark (with Home under it) at the left, the tabs filling the middle, the clock/profile/language cluster pinned right. */ .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 28px; } /* The right-hand cluster. Its two wrappers are display:contents so the clock, profile, logout, CTA and language switcher all land in this one flex row as siblings — that is what lets `order` interleave the clock between the profile and the logout link, even though app.js renders the profile and logout together inside #user-status-slot. */ .utility-inner{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .utility-actions{ display:contents; } #user-status-slot{ display:contents; } .profile-menu, .profile-id-block{ order:1; } .utc-block{ order:2; } .utility-actions > .utility-link, #user-status-slot > .utility-link{ order:3; } #join-cta-link{ order:5; } .utility-inner .ks-mailbox{ order:5; } .ks-lang-switcher{ order:6; } /* The role chip moved to the profile page. A browser holding a cached copy of the old signed-in header markup would still paint one here, so keep it suppressed rather than letting it flash back in. */ .header .role-chip{ display:none; } /* The clock stacks rather than running along the row: date on its own line above, then the UTC label + time. Narrow and tall beats wide and short when it has to sit in the same row as the tabs. */ .utc-block{ display:flex; align-items:baseline; gap:6px; font-family: var(--sans); flex-wrap:wrap; row-gap:1px; } .utc-block span{ font-size:9px; letter-spacing:.16em; color: var(--gold-bright); text-transform:uppercase; } .utc-block strong{ font-size:13px; letter-spacing:.06em; color: var(--gold-bright); font-variant-numeric: tabular-nums; } .utc-block small{ font-size:9px; color: var(--gold-bright); letter-spacing:.08em; text-transform:uppercase; } .utc-block #utc-date{ order:-1; flex-basis:100%; } /* Clock loading state. The block starts as data-clock="pending" in the markup and the inline bootstrap in each page's flips it to "ready" the moment it paints a real time, so on a normal load this state is never painted at all. It exists for the slow/blocked-script case: rather than a dead "--:--:-- / Loading" that reads as a broken script, the placeholder breathes gently and the caption says the clock is still syncing. Everything here is scoped to [data-clock="pending"], so a ready clock carries no animation and no extra paint cost. */ .utc-block[data-clock="pending"] strong, .utc-block[data-clock="pending"] small{ animation: utc-skeleton 1.6s ease-in-out infinite; } /* The date caption lags the time by a beat so the pair reads as one deliberate pulse instead of two things flashing in lockstep. Narrow breakpoints hide this caption to save a line in the app bar, but while the clock is pending it is the only thing saying *why* the digits are blank — which matters most on the slow mobile connection that causes this state — so it is forced back on here. The attribute selector outranks the plain `.utc-block small` display:none, so source order does not matter. */ .utc-block[data-clock="pending"] small{ animation-delay:.2s; display:block; } /* The placeholder glyphs are decorative while pending; the caption carries the actual status for anyone reading the page with a screen reader. */ .utc-block[data-clock="pending"] strong{ color: var(--faint); } @keyframes utc-skeleton{ 0%, 100%{ opacity:1; } 50%{ opacity:.45; } } /* A pulsing clock is a decorative reassurance, not information — honour the OS-level preference and hold it steady instead. */ @media (prefers-reduced-motion: reduce){ .utc-block[data-clock="pending"] strong, .utc-block[data-clock="pending"] small{ animation:none; } } .utc-block.is-clock-link{ cursor:pointer; text-decoration:none; } .utc-block.is-clock-link:hover strong{ color:#fff; text-shadow:0 0 10px var(--gold-bright); } /* The clock's "open clock" caption and the profile's "open profile" hint are both gone — the time and the name are the affordances now. These rules stay only so a browser painting the old header markup out of its localStorage cache still renders it correctly for the moment before app.js replaces it. */ .utc-block.is-clock-link:hover .utc-open-hint{ color: var(--gold-bright); } .utc-open-hint{ flex-basis:100%; font-size:8px; letter-spacing:.1em; text-transform:uppercase; /* No opacity here: dimming a token undoes the contrast it was picked for. */ color: var(--faint); transition:color .15s ease; } /* Logged-in identity block — the name is the trigger for a small account menu (Profile, Logout) so the bar spends width on the name alone. Logout used to be a second link out here in the row; the nav needed those pixels for the Admin tab. */ .profile-menu{ position:relative; display:inline-flex; align-items:center; } .profile-id-block{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; padding:0; font:inherit; text-decoration:none; font-size:8px; color: var(--sage2); text-transform:uppercase; letter-spacing:.12em; } .profile-id-block img{ width:18px; height:18px; border-radius:50%; } .profile-id-block .caret{ font-size:7px; color: var(--faint); transition: transform .15s ease, color .15s ease; } .profile-menu:hover .profile-id-block strong, .profile-menu:focus-within .profile-id-block strong{ color:#fff; } .profile-menu:hover .profile-id-block .caret, .profile-menu:focus-within .profile-id-block .caret{ transform: rotate(180deg); color: var(--gold-bright); } /* Opened on hover/focus-within only — no JS, so it also works for the header markup restored from the localStorage cache before app.js runs. */ .profile-menu-panel{ position:absolute; top:calc(100% + 12px); right:0; min-width:150px; background: var(--panel); border:1px solid var(--line2); border-radius:4px; padding:6px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; box-shadow:0 12px 28px rgba(0,0,0,0.45); z-index:70; } .profile-menu:hover .profile-menu-panel, .profile-menu:focus-within .profile-menu-panel{ opacity:1; visibility:visible; transform:translateY(0); } .profile-menu-panel a{ padding:8px 10px; border-radius:3px; white-space:nowrap; text-decoration:none; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); } .profile-menu-panel a:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); } .profile-menu-panel #logout-link, .profile-menu-panel #dashboard-logout-link{ color: var(--warm); } /* OPS-118: Admin sits in this menu (admins only) instead of the tabs. */ .profile-menu-panel .profile-menu-admin{ display:flex; align-items:center; gap:6px; } .profile-menu-panel .profile-menu-admin .ki{ width:14px; height:14px; } .profile-menu-panel .profile-menu-hub{ display:flex; align-items:center; gap:6px; } .profile-menu-panel .profile-menu-hub .ks-banner{ width:12px; height:15px; vertical-align:0; } /* dashboard.html puts the signed-in role badge at the top of the menu — it used to sit beside the name out in the bar. */ .profile-menu-role{ padding:4px 10px 6px; display:flex; } /* display:contents — see the ordering block above; the gap comes from .utility-inner now that these children sit in its flex row directly. */ .utility-actions{ display:contents; white-space:nowrap; } .status{ display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); } .status i{ width:6px; height:6px; border-radius:50%; background:#7fbf8f; box-shadow:0 0 8px #7fbf8f; } /* Back to Dashboard (OPS-102): first thing in a page's content, top left under the app bar, instead of down in the footer. .back-to-dash-row gives pages whose
has no width wrapper the same shell edge. */ .back-to-dash-row{ padding-top:20px; } .back-to-dash{ display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; color: var(--muted); font-size:11px; letter-spacing:.06em; transition: color .2s ease; } .back-to-dash:hover, .back-to-dash:focus-visible{ color: var(--gold-bright); } .back-to-dash-row .back-to-dash{ margin-bottom:0; } .utility-link{ background:none; border:none; color: var(--muted); font-size:11px; letter-spacing:.06em; padding:0; transition: color .2s ease; } .utility-link:hover{ color: var(--text); } .utility-link.accent{ color: var(--gold-bright); border:1px solid var(--line); padding:9px 16px; letter-spacing:.1em; font-size:10px; text-transform:uppercase; border-radius:2px; transition: all .2s ease; } .utility-link.accent:hover{ border-color: var(--gold); background: rgba(var(--ks-accent-rgb),0.08); } /* The kingdom banner (pole + crowned 685 cloth) is the Home link, which is why Home is no longer a tab in the nav. The markup still carries the old "685" / "Home" text for every page; it is hidden here and the link keeps its aria-label. Dark theme gets the dark-cloth/gold banner, light theme the original cream one (see the light-theme block below). The PNGs are 192px tall so they stay sharp at 3x. */ .brand{ display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; } .brand-mark{ display:block; width:26px; height:56px; flex-shrink:0; background: url("assets/brand-banner-dark.png") center / contain no-repeat; font-size:0; color:transparent; overflow:hidden; transition: filter .2s ease, transform .2s ease; } .brand-home{ display:none; } .brand:hover .brand-mark, .brand:focus-visible .brand-mark{ filter: drop-shadow(0 0 6px rgba(var(--ks-accent-rgb),0.45)); transform: translateY(-1px); } .brand[aria-current="page"] .brand-mark{ filter: drop-shadow(0 0 4px rgba(var(--ks-accent-rgb),0.30)); } /* The nav shares one row with the brand and the clock/profile cluster, so it is the only part allowed to give up space. It must never do that by squeezing a link narrower than its text — that wraps "Guides and Social" onto three lines and the tall links then collide with everything else. So: links keep their natural width (nowrap + no shrink) and the nav scrolls if the row ever runs out of room. "safe center" keeps the nav centred while it fits, then falls back to start-aligned once it overflows so the first link never ends up scrolled off to the left. */ nav{ display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:clamp(12px, 1.5vw, 26px); justify-content:center; justify-content:safe center; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } nav::-webkit-scrollbar{ display:none; } nav a{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-bright); font-weight:600; transition: color .2s ease; position:relative; white-space:nowrap; flex:0 0 auto; } nav a:hover{ color: var(--text); } nav a[aria-current="page"]{ color: var(--gold-bright); box-shadow: inset 0 -2px 0 var(--gold-bright); padding-bottom:2px; } /* nav dropdown (e.g. Tools > Interactive) */ nav .nav-item{ position:relative; display:flex; align-items:center; } nav .nav-trigger{ display:inline-flex; align-items:center; gap:4px; } nav .nav-trigger .caret{ font-size:8px; transition: transform .15s ease; } nav .nav-item:hover .nav-trigger .caret, nav .nav-item:focus-within .nav-trigger .caret{ transform: rotate(180deg); } nav .nav-menu{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-4px); background: var(--panel); border:1px solid var(--line2); border-radius:4px; padding:6px; min-width:150px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; box-shadow:0 12px 28px rgba(0,0,0,0.45); z-index:50; } nav .nav-item:hover .nav-menu, nav .nav-item:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } nav .nav-menu a{ padding:8px 10px; border-radius:3px; white-space:nowrap; } nav .nav-menu a:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); } /* Leadership/admin group at the tail of the nav — Alliance Mgmt starts it off with a divider. Every tab shares the one accent colour. */ nav .nav-eo-link{ --eo-pad:20px; margin-left:8px; padding-left:var(--eo-pad); border-left:1px solid var(--line2); } /* The inset underline would span the divider padding too — draw it under the text only. */ nav .nav-eo-link[aria-current="page"]{ box-shadow:none; } nav .nav-eo-link[aria-current="page"]::after{ content:''; position:absolute; left:var(--eo-pad); right:0; bottom:0; height:2px; background: var(--gold-bright); } /* ---------- generic section rhythm ---------- */ .section{ padding: var(--section-pad) 0; position:relative; } .section-heading{ max-width: 640px; margin-bottom: 64px; } .section-heading.compact{ margin-bottom:40px; } .eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold); margin:0 0 18px; display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:26px; height:1px; background: var(--gold); opacity:.7; } .section-heading h2{ font-family: var(--serif); font-weight:600; font-size:clamp(28px,3.4vw,42px); line-height:1.25; margin:0 0 20px; letter-spacing:.01em; } .section-heading p{ color: var(--muted); font-size:15px; line-height:1.8; margin:0; max-width:52ch; } /* ================================================================ HERO ================================================================ */ .hero{ padding: 96px 32px 0; display:grid; grid-template-columns: 1fr; } .hero-frame{ position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; /* Same shape as the art, so the whole picture shows. Both taglines are painted into its right side; if the copy needs more height the art is cropped from the left (under the dark scrim), never the right. */ aspect-ratio: 1285 / 816; min-height: 520px; display:flex; align-items:flex-end; background: #05070a; /* Photo + dark scrim is a fixed design element, not meant to flip with the site theme — pin the text sitting on it to always-legible values. */ --text: #eef1ec; --muted: #aab4b6; --faint: #9aa4a6; --gold: var(--ks-accent); --gold-bright: var(--ks-accent-bright); --sage: var(--ks-accent); --sage2: var(--ks-accent-bright); } .hero-frame::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(6,9,12,0.97) 0%, rgba(6,9,12,0.88) 26%, rgba(6,9,12,0.35) 54%, rgba(6,9,12,0.15) 100%), linear-gradient(to top, rgba(6,9,12,0.9) 0%, rgba(6,9,12,0.1) 40%, transparent 65%); } /* On wide frames the bottom fade only needs to sit under the copy; leave the painted "Same game" tagline in the right corner readable. */ @media (min-width: 981px){ .hero-frame::after{ background: linear-gradient(100deg, rgba(6,9,12,0.97) 0%, rgba(6,9,12,0.88) 26%, rgba(6,9,12,0.35) 54%, rgba(6,9,12,0.15) 100%), linear-gradient(to top, rgba(6,9,12,0.55) 0%, transparent 30%); } } .hero-art{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: right center; opacity:.92; } .hero-copy{ position:relative; z-index:2; padding: 64px 64px 72px; max-width: 620px; } .hero-copy .eyebrow{ color: var(--muted); letter-spacing:.18em; } .hero-copy .eyebrow::before{ display:none; } .hero h1{ font-family: var(--serif); font-weight:700; font-size: clamp(42px, 6vw, 72px); line-height: 1.02; margin: 8px 0 6px; letter-spacing:.01em; } .hero h1 em{ font-style:normal; color: var(--gold-bright); } .hero-sub{ font-family: var(--serif); font-weight:500; font-size: clamp(18px,2vw,23px); color: var(--text); margin: 6px 0 26px; opacity:.92; } .hero-lead{ color: var(--muted); font-size:14.5px; line-height:1.85; max-width:46ch; margin:0 0 34px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; } .button{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:15px 28px; border-radius:2px; border:1px solid transparent; transition: all .2s ease; display:inline-flex; align-items:center; gap:8px; } .button.primary{ background: linear-gradient(180deg, var(--ks-accent-bright), var(--ks-accent)); color:#1a1305; font-weight:600; border-color: transparent; } .button.primary:hover{ filter:brightness(1.08); transform: translateY(-1px); } .button.quiet{ border-color: var(--line); color: var(--text); background: color-mix(in srgb, var(--text) 2%, transparent); } .button.quiet:hover{ border-color: var(--gold); color: var(--gold-bright); } /* A bare .button (no primary/quiet) used to fall back to the browser's white button. :where() keeps this at zero specificity so any page style wins. */ :where(button.button, a.button){ background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--gold-bright); border-color: var(--line-strong); cursor:pointer; } :where(button.button, a.button):hover{ border-color: var(--gold); color: var(--text); } :where(button.button)[disabled]{ opacity:.55; cursor:default; } .hero-tags{ display:flex; gap:22px; flex-wrap:wrap; } .hero-tags span{ font-size:9.5px; letter-spacing:.16em; color: var(--faint); text-transform:uppercase; padding-bottom:2px; border-bottom:1px solid var(--line2); } /* ================================================================ PRIORITY / COMMUNITY BEAR STRIP ================================================================ */ .priority-strip{ margin: var(--section-pad) auto 0; position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; min-height: 230px; display:flex; align-items:center; background: var(--panel); /* Photo + dark scrim is a fixed design element, not meant to flip with the site theme — pin the text sitting on it to always-legible values. */ --text: #eef1ec; --muted: #aab4b6; --faint: #9aa4a6; --gold: var(--ks-accent); --gold-bright: var(--ks-accent-bright); --sage: var(--ks-accent); --sage2: var(--ks-accent-bright); } .priority-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 60% 40%; opacity:.9; } .priority-strip::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(9,12,15,0.97) 0%, rgba(9,12,15,0.9) 30%, rgba(9,12,15,0.35) 58%, rgba(9,12,15,0.55) 100%); } .priority-content{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 44px 52px; } .priority-label{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .priority-label i{ width:6px; height:6px; border-radius:50%; background: var(--gold); } .priority-label span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); } .priority-main h2{ font-family: var(--serif); font-weight:600; font-size: clamp(26px,3vw,36px); margin:0 0 18px; } .priority-meta{ display:flex; flex-wrap:wrap; gap:28px; } .priority-meta div{ display:flex; align-items:center; gap:9px; font-size:12px; color: var(--muted); letter-spacing:.04em; } .priority-meta strong{ color: var(--text); font-weight:600; letter-spacing:.02em; } .priority-side{ text-align:right; flex-shrink:0; } .priority-side p{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); line-height:1.8; margin:0 0 18px; } .priority-side .button{ white-space:nowrap; } /* ================================================================ MUSCLE / STATS ================================================================ */ .muscle-section{ } .stat-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap:1px; background: var(--line2); border:1px solid var(--line2); border-radius:4px; overflow:hidden; margin-bottom: 72px; } .stat-cell{ background: var(--bg-soft); padding:38px 20px; text-align:center; /* Grid items default to min-content width, which lets a long figure like "175.6B" push the whole row wider than the screen. min-width:0 lets the cell shrink to its track so the row can never cause a side-scroll. */ min-width:0; } .stat-cell .stat-icon{ font-size:20px; margin-bottom:14px; opacity:.85; } .stat-cell strong{ display:block; font-family: var(--serif); font-size: clamp(24px,2.4vw,32px); color: var(--gold-bright); font-weight:600; margin-bottom:8px; /* "1,409" and "175.6B" are the widest figures; without this they would be the thing that decides the row's width at two columns on a phone. */ overflow-wrap:break-word; } .stat-cell span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); } .muscle-layout{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:stretch; } .ranking-panel{ border:1px solid var(--line); border-radius:4px; padding:38px; background: var(--panel); } .panel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; } .panel-head span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); } .panel-head em{ font-style:normal; font-size:9px; letter-spacing:.1em; color: var(--faint); text-transform:uppercase; } .ranking-hero{ margin-bottom:26px; } .ranking-hero small{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--faint); margin-bottom:8px; } .ranking-hero strong{ display:block; font-family: var(--serif); font-size:44px; color: var(--text); line-height:1; } .ranking-hero p{ color: var(--muted); font-size:13px; margin:10px 0 0; line-height:1.75; } .rank-row{ display:grid; grid-template-columns: 1fr auto; gap:8px 14px; align-items:center; padding:12px 0; border-top:1px solid var(--line2); } .rank-row span{ font-size:12.5px; color: var(--muted); } .rank-row strong{ font-size:11px; color: var(--gold-bright); letter-spacing:.04em; } .rank-row i{ grid-column:1 / -1; display:block; height:3px; background: var(--line2); border-radius:2px; position:relative; overflow:hidden; } .rank-row i::after{ content:''; position:absolute; inset:0; width:var(--w); background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius:2px; } .rank-row:not(.is-home) i::after{ background: var(--faint); opacity:.55; } .rank-row.is-home span{ color: var(--text); } .rank-row:not(.is-home) strong{ color: var(--muted); } .strength-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 24px; } .strength-tabs button{ font:inherit; font-size:10px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:7px 12px; border:1px solid var(--line2); border-radius:3px; background:transparent; color: var(--muted); transition: all .2s ease; } .strength-tabs button:hover{ color: var(--text); border-color: var(--line); } .strength-tabs button.active{ color: var(--gold-bright); border-color: var(--gold); } .strength-tabs button:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; } .rank-row.is-compare span{ color: var(--text); } .rank-row.is-compare strong{ color: var(--text); } .rank-row.is-compare i::after{ background: var(--text); opacity:.7; } .strength-compare{ display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; } .strength-compare input{ width:130px; font:inherit; font-size:12px; padding:7px 10px; border-radius:3px; background:transparent; border:1px solid var(--line2); color: var(--text); -moz-appearance:textfield; appearance:textfield; } .strength-compare input::-webkit-outer-spin-button, .strength-compare input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .strength-compare input:focus{ outline:none; border-color: var(--gold); } .strength-compare button{ font:inherit; font-size:10px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:8px 12px; border:1px solid var(--gold); border-radius:3px; background:transparent; color: var(--gold-bright); } .strength-compare button:disabled{ opacity:.5; cursor:default; } .strength-compare span{ font-size:11px; color: var(--faint); } .rank-row.is-link{ cursor:pointer; } .rank-row.is-link:hover span, .rank-row.is-link:focus-visible span{ color: var(--gold-bright); } .rank-row.is-link:focus-visible{ outline:none; } .strength-open{ font:inherit; font-size:10px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; margin-top:18px; padding:0; background:none; border:none; color: var(--gold); } .strength-open:hover{ color: var(--gold-bright); } .strength-open i{ font-style:normal; } .lb-card{ position:relative; z-index:2; width:100%; max-width:560px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; background: var(--panel); border:1px solid var(--line); border-radius:4px; padding:32px 28px 20px; } .lb-card h2{ font-family: var(--serif); font-size:22px; margin:0 0 18px; } .lb-card .strength-tabs{ margin:0 0 12px; } .lb-card #lb-boards{ margin-bottom:16px; } .lb-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; min-height:120px; border-top:1px solid var(--line2); } .lb-list li{ display:grid; grid-template-columns: 36px 1fr auto; gap:12px; align-items:center; padding:10px 4px; border-bottom:1px solid var(--line2); font-size:13px; } .lb-rank{ color: var(--faint); font-size:11px; text-align:right; } .lb-list li:nth-child(-n+3) .lb-rank{ color: var(--gold-bright); } .lb-name{ color: var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-name small{ margin-left:8px; font-size:10.5px; color: var(--faint); } .lb-list strong{ font-size:12px; color: var(--gold-bright); letter-spacing:.03em; } .lb-list li.lb-empty{ display:block; color: var(--muted); border-bottom:none; padding:18px 4px; } @media (max-width:600px){ .lb-card{ padding:26px 16px 14px; } .lb-list li{ grid-template-columns: 28px 1fr auto; gap:10px; } } /* Public alliance profile (OPS-109) */ .ally-card{ position:relative; z-index:2; width:100%; max-width:440px; max-height:calc(100vh - 48px); overflow-y:auto; background: var(--panel); border:1px solid var(--line); border-radius:4px; padding:32px 28px 26px; } .ally-modal-banner{ display:block; width:88px; height:88px; object-fit:contain; margin:0 0 10px; } .ally-modal-banner[src=""]{ display:none; } .ally-card h2{ font-family: var(--serif); font-size:24px; margin:4px 0 18px; overflow-wrap:anywhere; } .ally-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; } .ally-stats div{ border:1px solid var(--line2); border-radius:4px; padding:10px 12px; background: var(--panel-2); min-width:0; } .ally-stats dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin:0 0 4px; } .ally-stats dd{ margin:0; font-size:15px; color: var(--text); overflow-wrap:anywhere; } .ally-note{ font-size:12px; color: var(--muted); line-height:1.7; margin:0 0 16px; } .ally-actions{ display:flex; flex-wrap:wrap; gap:10px; } .ally-actions .button{ flex:1 1 160px; text-align:center; justify-content:center; } @media (max-width:600px){ .ally-card{ padding:26px 18px 20px; } } .security-note{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line2); font-size:11px; color: var(--faint); letter-spacing:.02em; } .achievement-rail{ display:flex; flex-direction:column; gap:14px; } .achievement{ border:1px solid var(--line2); border-radius:4px; padding:22px 24px; background: var(--panel-2); opacity:.55; transition: all .25s ease; flex:1; display:flex; flex-direction:column; justify-content:center; } .achievement.active{ opacity:1; border-color: var(--line); background: var(--panel); } .achievement:not(.active){ cursor:pointer; } .achievement:not(.active):hover{ opacity:.8; border-color: var(--line); } .achievement:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; } .achievement small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); } .achievement span{ display:none; } .achievement h3{ font-family: var(--serif); font-size:17px; margin:8px 0 6px; font-weight:600; } .achievement p{ font-size:12px; color: var(--muted); margin:0 0 10px; line-height:1.7; } .achievement strong{ font-size:10px; letter-spacing:.12em; color: var(--gold-bright); text-transform:uppercase; } /* ================================================================ LIFE / COMMUNITY (campfire banner) ================================================================ */ .community-banner{ position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; min-height: 360px; display:flex; align-items:center; margin-bottom: 56px; /* Photo + dark scrim is a fixed design element, not meant to flip with the site theme — pin the text sitting on it to always-legible values. */ --text: #eef1ec; --muted: #aab4b6; --faint: #9aa4a6; --gold: var(--ks-accent); --gold-bright: var(--ks-accent-bright); --sage: var(--ks-accent); --sage2: var(--ks-accent-bright); } .community-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 40%; opacity:.92; } .community-banner::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(6,9,12,0.96) 0%, rgba(6,9,12,0.82) 32%, rgba(6,9,12,0.15) 58%, rgba(6,9,12,0.55) 100%); } .community-banner-inner{ position:relative; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:center; gap:32px; padding: 56px 56px; } .community-banner-copy p.eyebrow{ margin-bottom:14px; } .community-banner-copy h2{ font-family:var(--serif); font-size:clamp(28px,3.2vw,40px); margin:0 0 6px; font-weight:600; } .community-banner-copy .lead{ font-size:14px; color: var(--gold-bright); letter-spacing:.04em; margin:0 0 14px; text-transform:uppercase; font-family:var(--sans); font-weight:600; letter-spacing:.12em; font-size:11px;} .community-banner-copy p.desc{ color: var(--muted); font-size:13.5px; max-width:38ch; line-height:1.8; margin:0 0 26px; } .community-banner-list{ text-align:right; display:flex; flex-direction:column; gap:10px; flex-shrink:0; } .community-banner-list span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); } .archive-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap:32px; align-items:stretch; } /* ===== KvK Live panel — pulls from /api/kvk/live (D1-backed) ===== */ .kvk-panel{ border:1px solid var(--line); border-radius:4px; overflow:hidden; background: var(--panel); display:flex; flex-direction:column; } .kvk-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line2); gap:12px; } .kvk-head small{ display:block; font-size:9px; letter-spacing:.14em; color: var(--faint); text-transform:uppercase; } .kvk-head strong{ font-family: var(--serif); font-size:15px; letter-spacing:.04em; color: var(--gold-bright); } .kvk-badge{ font-size:9.5px; letter-spacing:.12em; padding:5px 10px; border-radius:2px; text-transform:uppercase; background: rgba(var(--ks-accent-rgb),0.12); color: var(--gold); border:1px solid var(--line); flex-shrink:0; } .kvk-badge.is-live{ color:#7be39a; border-color: rgba(123,227,154,0.35); background: rgba(123,227,154,0.08); } .kvk-badge.is-behind{ color:#e3a37b; border-color: rgba(227,163,123,0.35); background: rgba(227,163,123,0.08); } .kvk-badge.is-live::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background: currentColor; margin-right:6px; animation: kvkPulse 1.8s infinite; } @keyframes kvkPulse{ 0%{ box-shadow:0 0 0 0 rgba(123,227,154,.55);} 70%{ box-shadow:0 0 0 7px rgba(123,227,154,0);} 100%{ box-shadow:0 0 0 0 rgba(123,227,154,0);} } .kvk-score-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:28px 28px 18px; } .kvk-side{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .kvk-away{ align-items:flex-end; text-align:right; } .kvk-side-label{ font-size:10px; letter-spacing:.1em; color: var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kvk-side-score{ font-family: var(--serif); font-size:26px; color: var(--text); letter-spacing:.02em; } .kvk-home .kvk-side-score{ color: var(--gold-bright); } .kvk-vs{ font-size:10px; letter-spacing:.12em; color: var(--faint); flex-shrink:0; } .kvk-bar{ height:6px; margin:0 28px; border-radius:3px; background: var(--line2); overflow:hidden; } .kvk-bar i{ display:block; height:100%; width:var(--w,50%); background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .6s ease; } .kvk-days{ display:flex; gap:6px; padding:18px 28px 4px; } .kvk-day{ appearance:none; -webkit-appearance:none; margin:0; padding:0; flex:1; height:26px; border-radius:2px; background: var(--line2); display:flex; align-items:center; justify-content:center; font-size:9px; letter-spacing:.06em; color: var(--faint); border:none; font-family:inherit; cursor:default; transition: transform .15s ease, box-shadow .15s ease; } .kvk-day.is-win{ background: rgba(123,227,154,0.16); color:#7be39a; } .kvk-day.is-loss{ background: rgba(227,123,123,0.14); color:#e37b7b; } .kvk-day.is-pending{ background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--faint); } .kvk-day.is-today{ box-shadow: inset 0 0 0 1px var(--gold); } .kvk-day[data-clickable="true"]{ cursor:pointer; } .kvk-day[data-clickable="true"]:hover{ transform: translateY(-1px); } .kvk-day.is-selected{ box-shadow: inset 0 0 0 2px var(--gold-bright); color: var(--gold-bright); } .kvk-day-detail{ margin:10px 28px 0; font-size:11px; color: var(--muted); letter-spacing:.02em; } .kvk-day-detail strong{ color: var(--gold-bright); } .kvk-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; border-top:1px solid var(--line2); margin-top:auto; } .kvk-footer span{ font-size:10px; color: var(--faint); letter-spacing:.04em; } .kvk-footer button{ background:none; border:1px solid var(--line); color: var(--gold); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:2px; cursor:pointer; transition: border-color .2s, color .2s; flex-shrink:0; } .kvk-footer button:hover{ border-color: var(--gold); color: var(--gold-bright); } .kvk-history{ border-top:1px solid var(--line2); padding:14px 24px 20px; display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; } .kvk-history-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11.5px; padding:10px 12px; border:1px solid var(--line2); border-radius:3px; background: var(--panel-2); } .kvk-history-season{ color: var(--muted); flex-shrink:0; width:32px; } .kvk-history-opp{ color: var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kvk-history-score{ color: var(--faint); font-variant-numeric: tabular-nums; flex-shrink:0; } .kvk-history-result{ font-size:9px; letter-spacing:.1em; padding:4px 9px; border-radius:2px; text-transform:uppercase; flex-shrink:0; } .kvk-history-result.win{ color:#7be39a; background: rgba(123,227,154,0.12); } .kvk-history-result.loss{ color:#e37b7b; background: rgba(227,123,123,0.12); } .kvk-history-result.draw{ color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); } .kvk-history-empty{ font-size:11.5px; color: var(--faint); padding:6px 0; margin:0; } .community-stack{ display:flex; flex-direction:column; gap:24px; } .mini-card{ border:1px solid var(--line2); border-radius:4px; padding:28px; background: var(--panel-2); flex:1; display:flex; flex-direction:column; justify-content:center; } .mini-card small{ font-size:9.5px; letter-spacing:.14em; color: var(--gold); text-transform:uppercase; } .mini-card h3{ font-family: var(--serif); font-size:19px; margin:10px 0 8px; } .mini-card p{ font-size:12.5px; color: var(--muted); line-height:1.8; margin:0 0 16px; } .mini-meta{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding-top:14px; border-top:1px solid var(--line2); } .mini-meta span{ color: var(--faint); } .mini-meta strong{ color: var(--gold-bright); } .mini-card.flowers blockquote{ font-family: var(--serif); font-size:17px; margin:8px 0 10px; color: var(--text); font-style:normal; } /* ================================================================ BRAINS — process row + machine window ================================================================ */ .brains-section{ } .process-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-bottom: 72px; padding: 8px 0; } .process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; } .process-icon{ width:56px; height:56px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color: var(--gold-bright); font-size:20px; background: var(--panel); } .process-step strong{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; } .process-step span{ font-size:11.5px; color: var(--muted); max-width:16ch; line-height:1.6; } .process-arrow{ flex:0 0 auto; color: var(--faint); font-size:16px; padding-top:18px; } /* OPS-2: each step explains itself. Hover on desktop, tap (focus) on touch; CSS only, so no script is needed. The first and last steps pin their tip to their outer edge so it never runs off the screen. */ .process-step{ position:relative; cursor:help; outline:none; border-radius:4px; } .process-step:focus-visible{ box-shadow: 0 0 0 2px var(--gold-bright); } .process-step .process-icon{ transition: border-color .2s ease, transform .2s ease; } .process-step:hover .process-icon, .process-step:focus .process-icon{ border-color: var(--gold-bright); transform: translateY(-2px); } .process-tip{ position:absolute; top:100%; left:50%; z-index:20; width:min(260px, calc(100vw - 32px)); margin:12px 0 0; padding:14px 16px; text-align:left; font-size:13px; line-height:1.6; color: var(--text); letter-spacing:normal; text-transform:none; background: var(--panel); border:1px solid var(--line); border-radius:4px; box-shadow: 0 12px 32px rgba(0,0,0,.45); opacity:0; visibility:hidden; pointer-events:none; transform: translate(-50%, 4px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .process-step:hover .process-tip, .process-step:focus .process-tip, .process-step:focus-within .process-tip{ opacity:1; visibility:visible; transform: translate(-50%, 0); } .process-step:first-child .process-tip{ left:0; transform: translate(0, 4px); } .process-step:last-child .process-tip{ left:auto; right:0; transform: translate(0, 4px); } .process-step:first-child:hover .process-tip, .process-step:first-child:focus .process-tip, .process-step:last-child:hover .process-tip, .process-step:last-child:focus .process-tip{ transform: translate(0, 0); } @media (prefers-reduced-motion: reduce){ .process-tip, .process-step .process-icon{ transition:none; } } .brains-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:start; } .brains-copy .eyebrow{ } .brains-copy h2{ font-family: var(--serif); font-size: clamp(26px,3vw,36px); margin:0 0 18px; font-weight:600; } .brains-copy p{ color: var(--muted); font-size:14px; line-height:1.85; max-width:44ch; } .principle{ margin-top:22px; padding:18px 20px; border-left:2px solid var(--gold); background: var(--panel-2); font-family: var(--serif); font-size:15px; color: var(--gold-bright); } /* KS Atlas card: public/atlas-card.css (loaded by atlas-card.js). The pulse stays here for the Hub's tier badge (dashboard-extra.css). */ @keyframes atlas-pulse{ 50%{ opacity:.35; } } .machine-window{ border:1px solid var(--line); border-radius:4px; overflow:hidden; background: var(--panel); } .machine-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line2); } .machine-head span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text); } .machine-head em{ font-style:normal; font-size:9px; letter-spacing:.1em; color: var(--gold); text-transform:uppercase; } .machine-flow{ display:flex; flex-direction:column; padding:24px; gap:4px; } .machine-flow > div{ display:grid; grid-template-columns:28px 140px 1fr; gap:14px; align-items:center; padding:10px 0; } .machine-flow span{ font-family: var(--serif); color: var(--gold); font-size:13px; } .machine-flow strong{ font-size:11.5px; letter-spacing:.08em; } .machine-flow small{ color: var(--faint); font-size:11.5px; } .machine-flow i{ display:block; text-align:center; color: var(--faint); font-style:normal; padding-left:28px; font-size:11px; } .machine-data{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line2); } .machine-data > div{ padding:18px 24px; border-right:1px solid var(--line2); } .machine-data > div:last-child{ border-right:none; } .machine-data span{ display:block; font-size:9px; letter-spacing:.1em; color: var(--faint); text-transform:uppercase; margin-bottom:6px; } .machine-data small{ display:block; font-size:10px; color: var(--muted); margin-top:4px; } .redacted{ border-top:1px solid var(--line2); background: var(--panel-2); } .redacted span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text); } .chaos-line{ padding:14px 24px; border-top:1px solid var(--line2); font-size:10.5px; color: var(--faint); letter-spacing:.02em; } /* ================================================================ INSIDE 685 (alliances / cityscape) ================================================================ */ .inside-banner{ position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; min-height: 300px; display:flex; align-items:center; margin-bottom: 56px; /* Photo + dark scrim is a fixed design element, not meant to flip with the site theme — pin the text sitting on it to always-legible values. */ --text: #eef1ec; --muted: #aab4b6; --faint: #9aa4a6; --gold: var(--ks-accent); --gold-bright: var(--ks-accent-bright); --sage: var(--ks-accent); --sage2: var(--ks-accent-bright); } .inside-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; opacity:.92; } .inside-banner::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(6,9,12,0.96) 0%, rgba(6,9,12,0.75) 30%, rgba(6,9,12,0.05) 55%, rgba(6,9,12,0.55) 100%); } .inside-banner-inner{ position:relative; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:center; gap:32px; padding:52px 56px; } .inside-banner-copy h2{ font-family: var(--serif); font-size:clamp(26px,3vw,36px); margin:6px 0 12px; font-weight:600; } .inside-banner-copy p{ color: var(--muted); font-size:13.5px; max-width:36ch; line-height:1.8; margin:0 0 24px; } .inside-quote{ text-align:right; max-width:30ch; } .inside-quote p{ font-family: var(--serif); font-size:17px; color: var(--text); line-height:1.5; margin:0 0 10px; } .inside-quote i{ display:block; width:32px; height:1px; background: var(--line); margin-left:auto; } .alliance-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; } .alliance-card{ border:1px solid var(--line2); border-radius:4px; padding:32px 28px; background: var(--panel-2); transition: border-color .2s ease; } .alliance-card:hover{ border-color: var(--line); } .alliance-card small{ font-size:9.5px; letter-spacing:.14em; color: var(--gold); text-transform:uppercase; } .alliance-card h3{ font-family: var(--serif); font-size:19px; margin:8px 0 10px; } .alliance-card .alliance-r5{ font-size:13px; color: var(--text); margin:0 0 6px; overflow-wrap:anywhere; } .alliance-card .alliance-r5 b{ font-size:10px; letter-spacing:.12em; color: var(--gold); margin-right:4px; } .alliance-card p{ font-size:12.5px; color: var(--muted); line-height:1.8; margin:0 0 20px; } .alliance-card button, .alliance-card a{ background:none; border:none; padding:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-bright); display:inline-flex; align-items:center; gap:8px; } .alliance-card span{ transition: transform .2s ease; } .alliance-card:hover span{ transform: translateX(3px); } /* ================================================================ MANIFESTO / CULTURE STRIP ================================================================ */ .culture-section .manifesto{ display:flex; flex-wrap:wrap; gap:18px 36px; align-items:baseline; padding: 36px 0 0; border-top:1px solid var(--line2); } .manifesto span{ font-size:14.5px; color: var(--muted); } .manifesto strong{ font-family: var(--serif); font-size:19px; color: var(--gold-bright); font-weight:600; } /* ================================================================ JOIN ================================================================ */ /* ================================================================ FOOTER ================================================================ */ footer{ position:relative; overflow:hidden; border-top:1px solid var(--line2); padding: 72px 0 40px; } .footer-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.4; } /* Scoped to .footer-photo (index.html's photo footer only) — a bare footer::after selector here would silently darken every other page's plain text footer too, invisible in dark mode but a jarring dark stripe once light mode ships. */ .footer-photo::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,9,12,0.75) 0%, rgba(6,9,12,0.94) 100%); } /* This photo + dark scrim is a fixed design element (not meant to flip with the site theme), so pin the text sitting on it to always-legible light values regardless of --text/--gold's current theme. */ .footer-photo{ --text: #eef1ec; --muted: #aab4b6; --faint: #9aa4a6; --gold: var(--ks-accent); --gold-bright: var(--ks-accent-bright); --sage: var(--ks-accent); --sage2: var(--ks-accent-bright); } .footer-cta{ position:relative; z-index:2; text-align:center; margin-bottom:56px; } .footer-cta .eyebrow{ justify-content:center; } .footer-cta .eyebrow::before{ display:none; } .footer-cta h2{ font-family: var(--serif); font-size: clamp(28px,3.6vw,44px); margin:0 0 10px; font-weight:600; } .footer-cta p{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin:0 0 32px; } .footer-cta .hero-actions{ justify-content:center; margin-bottom:0; } .footer-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line2); } .footer-inner strong{ font-family: var(--serif); font-size:15px; letter-spacing:.08em; } .footer-inner small{ display:block; font-size:10.5px; color: var(--faint); margin-top:4px; } .footer-inner span{ font-size:10.5px; color: var(--faint); letter-spacing:.02em; } /* ================================================================ LOGIN MODAL ================================================================ */ .modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; } .modal.hidden{ display:none; } .modal-backdrop{ position:absolute; inset:0; background: rgba(4,6,8,0.82); backdrop-filter: blur(6px); } .login-card{ position:relative; z-index:2; width:100%; max-width:420px; background: var(--panel); border:1px solid var(--line); border-radius:4px; padding:36px 32px; } .modal-close{ position:absolute; top:16px; right:16px; background:none; border:none; color: var(--muted); font-size:20px; line-height:1; } .modal-close:hover{ color: var(--text); } .login-card h2{ font-family: var(--serif); font-size:22px; margin:6px 0 14px; } .login-card p{ font-size:12.5px; color: var(--muted); line-height:1.7; } .login-message{ color: var(--gold-bright); } /* ================================================================ REVEAL ANIMATION (single, restrained) ================================================================ */ .reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; } .reveal.visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible{ outline: 1px solid var(--gold-bright); outline-offset: 2px; } /* ================================================================ RESPONSIVE ================================================================ */ /* ---- appbar: brand + 7 tabs + clock + profile + logout + language all share one row, so shed the lowest-value pieces as it narrows rather than letting anything squeeze. ---- */ /* The clock's date is the first thing to go — the rest of the clock still reads fine without it, and it is the widest single line in the cluster. */ @media (max-width:1240px){ .utc-block small{ display:none; } } /* Then a notch off the tab type and the spacing between everything. */ @media (max-width:1150px){ nav a{ font-size:10px; letter-spacing:.07em; } nav{ gap:clamp(10px, 1.1vw, 20px); } .header-inner{ padding:10px 22px; gap:16px; } .utility-inner{ gap:11px; } .utility-link.accent{ padding:7px 11px; } } /* Below this the row genuinely cannot hold everything, so the tabs drop to their own line — still inside the same bar, so it reads as one appbar. They no longer compete with the brand and profile for width once that happens, so the date earns its place back. */ @media (max-width:1040px){ .header-inner{ flex-wrap:wrap; } nav{ order:3; width:100%; flex:1 0 100%; justify-content:flex-start; padding-top:2px; } .utc-block small{ display:block; } } @media (max-width: 980px){ :root{ --section-pad: 88px; } .utility-inner{ flex-wrap:wrap; row-gap:10px; } .header-inner{ flex-wrap:wrap; gap:16px; padding:18px 24px; } nav{ order:3; width:100%; overflow-x:auto; justify-content:flex-start; gap:22px; padding-bottom:4px; } .hero{ padding:56px 20px 0; } .hero-copy{ padding:40px 28px 44px; max-width:none; } /* An odd number of cells does not divide into two columns, so instead of leaving a gap the last one spans the full width (2 + 2 + 1). */ .stat-row{ grid-template-columns: repeat(2,1fr); } .stat-row .stat-cell:last-child:nth-child(odd){ grid-column: 1 / -1; } .muscle-layout, .archive-grid, .brains-layout{ grid-template-columns:1fr; } .alliance-grid{ grid-template-columns:1fr; } .process-row{ flex-wrap:wrap; row-gap:28px; } .process-arrow{ display:none; } .process-step{ flex:0 0 40%; } /* Two steps per row: left column tips grow right, right column tips grow left. */ .process-step:nth-child(4n+1) .process-tip{ left:0; right:auto; transform: translate(0, 4px); } .process-step:nth-child(4n+3) .process-tip{ left:auto; right:0; transform: translate(0, 4px); } .process-step:hover .process-tip, .process-step:focus .process-tip{ transform: translate(0, 0) !important; } .priority-content, .community-banner-inner, .inside-banner-inner{ flex-direction:column; align-items:flex-start; text-align:left; padding:36px 28px; } .priority-side, .community-banner-list, .inside-quote{ text-align:left; } .machine-flow > div{ grid-template-columns:24px 1fr; } .machine-flow i{ display:none; } .machine-data{ grid-template-columns:1fr; } .machine-data > div{ border-right:none; border-bottom:1px solid var(--line2); } .footer-inner{ flex-direction:column; text-align:center; } } @media (max-width:560px){ html, body{ overflow-x:clip; } .shell{ padding-left:16px; padding-right:16px; } .section{ padding-top:64px; padding-bottom:64px; } h1{ font-size:38px !important; } /* appbar row 1 (brand + clock/profile): keep on one line. A grid rather than the wrapping flex row above, so a long name or a wider font can't push the cluster under the brand — the name truncates instead. */ .header-inner{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; } .utility-inner{ gap:10px; flex-wrap:nowrap; min-width:0; justify-content:flex-end; } .utility-inner > *{ flex-shrink:0; } .utility-inner .profile-menu{ flex-shrink:1; min-width:0; } .profile-id-block{ min-width:0; max-width:100%; } .profile-id-block strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* "Member login" stacks as Member / login so the cluster is narrow enough that the clock no longer spills left over the 685 mark. */ #user-status-slot > .js-login{ width:min-content; white-space:normal; line-height:1.25; text-align:center; } /* Same idea for the clock: the UTC label sits above the time. */ .utc-block{ flex-direction:column; align-items:center; gap:1px; } .utc-block small, .status{ display:none; } .utility-link.accent{ padding:7px 10px; } /* appbar: compact brand, nav becomes a single swipeable row below */ .header-inner{ padding:12px 16px 0; gap:10px; } .brand-mark{ width:23px; height:50px; } nav{ grid-column:1 / -1; gap:8px; margin:0 -16px; width:calc(100% + 32px); padding:4px 16px 12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; mask-image: linear-gradient(90deg, #000 88%, transparent); } nav::-webkit-scrollbar{ display:none; } nav a{ flex:0 0 auto; white-space:nowrap; padding:8px 12px; font-size:10.5px; border:1px solid var(--line2); border-radius:999px; background: color-mix(in srgb, var(--text) 2%, transparent); } /* dropdown menus can't float over a horizontally-scrolling nav, so flatten them into plain inline pills instead */ nav .nav-item{ display:contents; } nav .nav-trigger .caret{ display:none; } nav .nav-menu{ position:static; opacity:1; visibility:visible; transform:none; flex-direction:row; background:none; border:none; box-shadow:none; padding:0; gap:8px; display:contents; } nav .nav-menu a{ padding:8px 12px; } nav .nav-eo-link{ --eo-pad:12px; margin-left:0; border-left:1px solid var(--line2); } /* Current page: fill the pill. The desktop underline cut into the pill's rounded bottom and its padding-bottom squashed it off-centre. */ nav a[aria-current="page"]{ box-shadow:none; padding-bottom:8px; border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 16%, transparent); } nav .nav-eo-link[aria-current="page"]::after{ display:none; } /* hero: the tagline text is baked into the art — push it out of frame */ .hero{ padding:24px 16px 0; } .hero-frame{ min-height:0; aspect-ratio:auto; } .hero-art{ object-position: 22% 30%; opacity:.55; } .hero-copy{ padding:120px 20px 32px; } .hero-actions .button{ flex:1 1 auto; justify-content:center; } .hero-tags{ gap:10px 16px; } .priority-strip{ margin-left:16px; margin-right:16px; } .priority-content, .community-banner-inner, .inside-banner-inner{ padding:28px 20px; } .ranking-panel{ padding:24px 20px; } .ranking-hero strong{ font-size:34px; } /* Still two columns here, not one: these are short figure + label pairs, and a five-deep vertical stack pushes the panels below it off-screen for no legibility gain. The label is the part that has to stay readable, so it keeps its size and the figure gives up a few pixels instead. */ .stat-cell{ padding:22px 10px; } .stat-cell strong{ font-size: clamp(22px, 7.5vw, 30px); } .stat-cell .stat-icon{ margin-bottom:10px; } /* Label stays at its full size and loses only tracking — shrinking 10px uppercase text is the opposite of what a phone screen needs. */ .stat-cell span{ letter-spacing:.1em; } .process-step{ flex:0 0 45%; } .section-heading{ margin-bottom:40px; } .button{ padding:13px 20px; } .login-card{ padding:30px 20px; } .modal{ padding:16px; } } /* phones: 16px form text stops iOS Safari from zooming in on focus */ @media (max-width: 560px){ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; } } /* ================================================================ TRANSFER PASS CALCULATOR + K685 TRANSFER WINDOW (landing page) ================================================================ */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .transfer-section{ padding-bottom: calc(var(--section-pad) * .6); } .transfer-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:stretch; } /* Both columns share one height so the result card and the window panel end on the same line; the window's forecast list absorbs the difference. */ .transfer-calc{ display:flex; flex-direction:column; min-width:0; } .transfer-window{ display:flex; flex-direction:column; min-width:0; } .transfer-window .tw-forecast{ flex:1; } .tr-passes em{ display:block; font-style:normal; font-size:9.5px; letter-spacing:.12em; color: var(--faint); margin-top:4px; } .transfer-calc h2{ font-family: var(--serif); font-size: clamp(26px,3vw,36px); margin:0 0 12px; font-weight:600; } .transfer-lead{ color: var(--muted); font-size:14px; line-height:1.8; margin:0 0 24px; max-width:46ch; } .transfer-stale-note{ font-size:12px; color:#e3c07b; background: rgba(227,192,123,0.1); border:1px solid rgba(227,192,123,0.3); border-radius:2px; padding:10px 14px; margin:-8px 0 20px; max-width:46ch; } .transfer-form{ display:flex; gap:10px; } .transfer-form input{ flex:1; min-width:0; background: var(--panel-2); border:1px solid var(--line); border-radius:2px; color: var(--text); font: inherit; font-size:14px; padding:14px 16px; font-variant-numeric: tabular-nums; } .transfer-form input:focus{ outline:none; border-color: var(--gold); } .transfer-form .button{ flex-shrink:0; cursor:pointer; } .transfer-form .button[disabled]{ opacity:.6; cursor:wait; transform:none; } .transfer-footnote{ font-size:11px; color: var(--faint); line-height:1.7; margin:18px 0 0; max-width:52ch; } .transfer-result{ margin-top:20px; border:1px solid var(--line); border-radius:4px; background: var(--panel); overflow:hidden; } .transfer-result.is-error{ border-color: rgba(227,123,123,0.4); padding:16px 20px; font-size:13px; color:#e3a0a0; } .tr-info{ margin:0 0 10px; font-size:13px; line-height:1.6; color: var(--muted); } .tr-info:first-child{ color: var(--text); } .tr-next-round{ margin-top:4px; cursor:pointer; } .tr-away{ padding:14px 20px 16px; border-top:1px solid var(--line2); } .tr-away .tr-info:last-of-type{ margin-bottom:12px; } .tr-player{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line2); } .tr-player img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background: var(--panel-2); flex-shrink:0; } .tr-player strong{ display:block; font-size:14px; overflow-wrap:anywhere; } .tr-player span{ font-size:11px; color: var(--muted); letter-spacing:.04em; } .tr-passes{ display:flex; align-items:baseline; gap:14px; padding:20px; } .tr-passes b{ font-family: var(--serif); font-size:56px; line-height:1; color: var(--gold-bright); font-weight:600; font-variant-numeric: tabular-nums; } .tr-passes span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); } .tr-math{ display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--line2); } .tr-math > div{ padding:14px 20px; border-right:1px solid var(--line2); min-width:0; } .tr-math > div:last-child{ border-right:none; } .tr-math span{ display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); margin-bottom:4px; } .tr-math strong{ font-size:14px; font-variant-numeric: tabular-nums; } .tr-notes{ list-style:none; margin:0; padding:12px 20px 16px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:6px; } .tr-notes li{ font-size:12px; line-height:1.6; color: var(--muted); padding-left:18px; position:relative; } .tr-notes li::before{ content:'•'; position:absolute; left:4px; color: var(--gold); } .tr-notes li.warn{ color:#e3c07b; } .tr-notes li.warn::before{ content:'!'; color:#e3c07b; font-weight:700; } .tr-notes li.ok::before{ content:'✓'; color:#7be39a; left:2px; } /* Join 685: troop dismiss calculator (over the power limit) */ .tr-dismiss{ border-top:1px solid var(--line2); padding:16px 20px 18px; } .trd-head strong{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); margin-bottom:4px; } .trd-head span{ font-size:12px; color: var(--muted); line-height:1.6; } .trd-rows{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:12px 0 14px; } .trd-row{ display:grid; grid-template-columns: 1fr auto; gap:4px; min-width:0; } .trd-row span{ grid-column:1 / -1; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); } .trd-row input, .trd-row select{ min-width:0; background: var(--panel-2); border:1px solid var(--line); border-radius:2px; color: var(--text); font: inherit; font-size:13px; padding:8px 10px; font-variant-numeric: tabular-nums; } .trd-row select{ padding:8px 4px; cursor:pointer; } .trd-row input:focus, .trd-row select:focus{ outline:none; border-color: var(--gold); } .trd-bar{ position:relative; margin:4px 0 10px; } .trd-bar{ --thumb:16px; } .trd-bar input{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:20px; background:transparent; cursor:pointer; margin:0; } .trd-bar input::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background: var(--line); } .trd-bar input::-moz-range-track{ height:4px; border-radius:2px; background: var(--line); } .trd-bar input::-webkit-slider-thumb{ -webkit-appearance:none; width:var(--thumb); height:var(--thumb); margin-top:-6px; border-radius:50%; background: var(--gold); border:2px solid var(--panel); } .trd-bar input::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border-radius:50%; background: var(--gold); border:2px solid var(--panel); } .trd-bar input:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; } /* Marks the smallest dismissal that gets under the limit (the snap point). */ .trd-mark{ position:absolute; top:1px; width:2px; height:18px; margin-left:-1px; border-radius:1px; background: var(--gold-bright); opacity:.7; pointer-events:none; } .trd-out{ font-size:12.5px; line-height:1.6; color: var(--muted); margin:0; } .trd-out b{ color: var(--text); font-variant-numeric: tabular-nums; } .trd-out.ok{ color:#9fdcb0; } .trd-out.warn{ color:#e3c07b; } @media (max-width: 560px){ .tr-dismiss{ padding:14px 16px 16px; } .trd-rows{ grid-template-columns: 1fr; } .trd-row{ grid-template-columns: 1fr 96px; } } .transfer-window{ border:1px solid var(--line); border-radius:4px; overflow:hidden; background: var(--panel); } .tw-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line2); gap:12px; } .tw-head small{ display:block; font-size:9.5px; letter-spacing:.14em; color: var(--gold); text-transform:uppercase; margin-bottom:6px; } .tw-head strong{ font-family: var(--serif); font-size:17px; font-weight:600; } .tw-stats{ display:grid; grid-template-columns: repeat(3,1fr); border-bottom:1px solid var(--line2); } .tw-stats > div{ padding:18px 24px; border-right:1px solid var(--line2); min-width:0; } .tw-stats > div:last-child{ border-right:none; } .tw-stats span{ display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); margin-bottom:6px; } .tw-stats strong{ font-size:14px; font-variant-numeric: tabular-nums; } .tw-stats em{ display:block; font-style:normal; font-size:10.5px; color: var(--muted); margin-top:4px; } .tw-forecast{ padding:18px 24px 6px; } .tw-forecast > small{ display:block; font-size:9.5px; letter-spacing:.14em; color: var(--faint); text-transform:uppercase; margin-bottom:12px; } .tw-fc{ margin-bottom:14px; } .tw-fc > strong{ display:block; font-size:12px; letter-spacing:.06em; margin-bottom:8px; } .tw-scn{ display:grid; grid-template-columns: 70px 1fr auto; gap:12px; align-items:center; font-size:11.5px; padding:9px 12px; border:1px solid var(--line2); border-radius:3px; background: var(--panel-2); margin-bottom:6px; } .tw-scn b{ font-weight:600; font-variant-numeric: tabular-nums; } .tw-scn span{ color: var(--muted); font-variant-numeric: tabular-nums; min-width:0; } /* Every badge is one fixed box (sized for the longest label, "Very low probability") so the tiers line up regardless of wording. */ .tw-like{ display:inline-block; box-sizing:border-box; width:16em; text-align:center; font-size:9px; letter-spacing:.08em; padding:4px 6px; border-radius:2px; text-transform:uppercase; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tw-like.high{ color:#7be39a; background: rgba(123,227,154,0.12); } .tw-like.medium{ color:#e3c07b; background: rgba(227,192,123,0.12); } .tw-like.low{ color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); } /* Join 685 steps + actions, under the calculator in the same column */ .join-steps{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .join-steps li{ display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; align-items:baseline; border:1px solid var(--line2); border-radius:4px; padding:14px 16px; background: var(--panel-2); min-width:0; } .join-steps span{ font-family: var(--serif); color: var(--gold); font-size:13px; } .join-steps strong{ font-size:13px; letter-spacing:.02em; } .join-steps .ki{ grid-row:1 / span 2; grid-column:3; align-self:start; width:32px; height:32px; opacity:.9; } .join-steps p{ grid-column:1 / 3; font-size:11.5px; color: var(--muted); margin:6px 0 0; line-height:1.6; } .join-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; } /* Join 685 "Leave your contact card" (OPS-29) */ .contact-card{ margin-top:24px; border:1px solid var(--line); border-radius:4px; background: var(--panel); } .contact-card > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; } .contact-card > summary::-webkit-details-marker{ display:none; } .contact-card > summary::after{ content:'+'; font-size:22px; line-height:1; color: var(--gold); flex-shrink:0; } .contact-card[open] > summary::after{ content:'\2212'; } .contact-card > summary:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; } .contact-card > summary strong{ display:block; font-size:14px; letter-spacing:.02em; } .contact-card > summary small{ display:block; font-size:11.5px; color: var(--muted); margin-top:4px; line-height:1.5; } .contact-card-form, .cc-thanks{ padding:4px 20px 20px; border-top:1px solid var(--line2); } .cc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 0; align-items:end; } .cc-field{ display:flex; flex-direction:column; gap:6px; min-width:0; } .cc-field > span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); } .cc-field > span b{ color: var(--gold); font-weight:600; } .cc-field > span em{ font-style:normal; text-transform:none; letter-spacing:0; color: var(--faint); } .cc-wide{ grid-column:1 / -1; } .cc-field input, .cc-field select, .cc-field textarea{ width:100%; box-sizing:border-box; background: var(--panel-2); border:1px solid var(--line); border-radius:2px; color: var(--text); font: inherit; font-size:14px; padding:11px 12px; } .cc-field textarea{ resize:vertical; min-height:76px; line-height:1.5; } .cc-field input:focus, .cc-field select:focus, .cc-field textarea:focus{ outline:none; border-color: var(--gold); } .cc-field [aria-invalid="true"]{ border-color: rgba(227,123,123,0.7); } .cc-coords{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .cc-count{ align-self:flex-end; font-size:10.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .cc-hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; } .cc-error{ margin:14px 0 0; font-size:13px; color:#e3a0a0; } .contact-card-form .button{ margin-top:16px; cursor:pointer; } .contact-card-form .button[disabled]{ opacity:.6; cursor:wait; transform:none; } .cc-thanks{ padding-top:16px; } .cc-thanks:focus{ outline:none; } .cc-thanks strong{ color: var(--gold-bright); font-size:15px; } .cc-thanks p{ font-size:13px; color: var(--muted); line-height:1.7; margin:6px 0 0; } .tw-footer{ padding:14px 24px; border-top:1px solid var(--line2); font-size:10.5px; color: var(--faint); } @media (max-width: 980px){ .transfer-layout{ grid-template-columns: 1fr; gap:32px; } } @media (max-width: 560px){ .transfer-form{ flex-direction:column; } .join-steps{ grid-template-columns:1fr; } .join-actions .button{ flex:1 1 100%; justify-content:center; } .cc-grid{ grid-template-columns:1fr; } .contact-card-form .button{ width:100%; justify-content:center; } .contact-card > summary, .contact-card-form, .cc-thanks{ padding-left:16px; padding-right:16px; } .transfer-form .button{ justify-content:center; } .tw-stats, .tr-math{ grid-template-columns: 1fr; } .tw-stats > div, .tr-math > div{ border-right:none; border-bottom:1px solid var(--line2); padding:14px 16px; } .tw-stats > div:last-child, .tr-math > div:last-child{ border-bottom:none; } .tw-head, .tw-forecast, .tw-footer{ padding-left:16px; padding-right:16px; } .tw-scn{ grid-template-columns: 60px 1fr; } .tw-scn .tw-like{ grid-column: 1 / -1; justify-self:start; } } /* ================================================================ KINGSHOT ICON SET Game art from /assets (items, gear, charms, hero_skills, …), used in place of emoji. Usage: Every asset path lives in this block — if files are renamed, this is the only place that needs updating. ================================================================ */ .ki{ display:inline-block; flex:0 0 auto; width:1.35em; height:1.35em; vertical-align:-0.32em; background: var(--ki) no-repeat center / contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); font-style:normal; } .ki-lg{ width:44px; height:44px; vertical-align:middle; } .ki-xl{ width:72px; height:72px; vertical-align:middle; } /* UI icons */ .ki-calendar { --ki:url("/assets/items/620106.png"); } .ki-calendar30 { --ki:url("/assets/items/620106.png"); } .ki-trophy { --ki:url("/assets/items/620127.png"); } .ki-trophy-win { --ki:url("/assets/gear/1007.png"); } .ki-swords { --ki:url("/assets/hero_skills/500119.png"); } .ki-shield { --ki:url("/assets/charms/119.png"); } .ki-shield-sword{ --ki:url("/assets/hero_skills/500117.png"); } .ki-gift { --ki:url("/assets/items/630001.png"); } .ki-scope { --ki:url("/assets/hero_skills/500183.png"); } .ki-bear { --ki:url("/assets/hero_skills/500045.png"); } .ki-scroll { --ki:url("/assets/items/610003.png"); } .ki-book { --ki:url("/assets/hero_skills/500285.png"); } .ki-map { --ki:url("/assets/items/610101.png"); } .ki-tent { --ki:url("/assets/items/620117.png"); } .ki-helmet { --ki:url("/assets/hero_gear/1011501.png"); } .ki-heroes { --ki:url("/assets/heroes/50011.png"); } .ki-sprout { --ki:url("/assets/items/620257.png"); } .ki-dragon { --ki:url("/assets/decorate/skin_icons/6030300.png"); } .ki-robot { --ki:url("/assets/items/620007.png"); } .ki-throne { --ki:url("/assets/decorate/skin_icons/6000070.png"); } .ki-globe { --ki:url("/assets/items/610103.png"); } .ki-flag { --ki:url("/assets/items/610102.png"); } .ki-discord { --ki:url("/assets/emoji/001.png"); } .ki-wolf { --ki:url("/assets/hero_skills/500253.png"); } /* Item icons */ .ki-power { --ki:url("/assets/hero_skills/500044.png"); } .ki-sword { --ki:url("/assets/hero_gear/1050011.png"); } .ki-megaphone { --ki:url("/assets/emoji/021.png"); } .ki-bell { --ki:url("/assets/emoji/021.png"); } .ki-clock { --ki:url("/assets/items/700020.png"); } .ki-ticket { --ki:url("/assets/items/600061.png"); } .ki-crown { --ki:url("/assets/gear/1006.png"); } .ki-key { --ki:url("/assets/items/620115.png"); } .ki-coin { --ki:url("/assets/items/2620112.png"); } .ki-puzzle { --ki:url("/assets/items/600056.png"); } .ki-paw { --ki:url("/assets/hero_skills/500085.png"); } .ki-lightning { --ki:url("/assets/hero_skills/500181.png"); } .ki-gem { --ki:url("/assets/charms/203.png"); } .ki-fire { --ki:url("/assets/hero_skills/500332.png"); } .ki-tome { --ki:url("/assets/hero_gear/1050016.png"); } .ki-quill { --ki:url("/assets/items/620130.png"); } .ki-certificate{ --ki:url("/assets/items/610001.png"); } .ki-idcard { --ki:url("/assets/items/610001.png"); } .ki-compass { --ki:url("/assets/items/620002.png"); } .ki-medal { --ki:url("/assets/items/620127.png"); } .ki-speedup { --ki:url("/assets/items/700008.png"); } .ki-question { --ki:url("/assets/items/800206.png"); } .ki-lost { --ki:url("/assets/emoji/012.png"); } /* Hero / building icons */ .ki-rotate { --ki:url("/assets/hero_skills/500175.png"); } .ki-toolbox { --ki:url("/assets/items/620503.png"); } .ki-troops { --ki:url("/assets/troops/11000.png"); } .ki-handshake { --ki:url("/assets/hero_skills/500206.png"); } .ki-castle { --ki:url("/assets/decorate/skin_icons/6000017.png"); } /* ---- icon placement in existing components ---- */ nav a .ki{ width:22px; height:22px; margin-right:5px; vertical-align:-6px; } .priority-meta .ki{ width:26px; height:26px; } .stat-cell .stat-icon{ opacity:1; } .stat-cell .stat-icon .ki{ width:60px; height:60px; transition: transform .25s ease; } .stat-cell:hover .stat-icon .ki{ transform: translateY(-3px) scale(1.06); } .process-icon{ width:68px; height:68px; } .process-icon .ki{ width:50px; height:50px; } .button .ki{ width:20px; height:20px; margin-right:4px; } .ki-flowers { --ki:url("/assets/decorate/skin_icons/26000070.png"); } .ki-banner-blue{ --ki:url("/assets/troops/soldier_avatar_bg_new_003.png"); } .ki-banner-red { --ki:url("/assets/troops/soldier_avatar_bg_new_006.png"); } .ki-banner-gray{ --ki:url("/assets/troops/soldier_avatar_bg_new_001.png"); } /* Corner illustration for cards: */ .mini-card, .alliance-card, .achievement{ position:relative; } .card-art{ position:absolute; top:14px; right:14px; width:72px; height:72px; opacity:.9; pointer-events:none; transition: transform .3s ease, opacity .3s ease; } .alliance-card .ally-banner{ width:70px; height:84px; object-fit:contain; object-position:center; top:18px; right:22px; opacity:1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); } .achievement .card-art{ width:62px; height:62px; } .achievement:not(.active) .card-art{ opacity:.45; filter: grayscale(.6) drop-shadow(0 2px 3px rgba(0,0,0,.5)); } .mini-card:hover .card-art, .alliance-card:hover .card-art{ transform: translateY(-3px) rotate(-4deg); opacity:1; } .mini-card h3, .mini-card blockquote, .alliance-card h3, .achievement h3{ padding-right:76px; } /* Page emblem: floating game-art medallion for page heroes / cards. */ .page-emblem{ position:relative; width:128px; height:128px; flex:0 0 auto; display:grid; place-items:center; } .page-emblem::before{ content:''; position:absolute; inset:6px; border-radius:50%; border:1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(var(--ks-accent-bright-rgb),0.22), rgba(var(--ks-accent-rgb),0.05) 55%, transparent 72%); box-shadow: 0 0 40px rgba(var(--ks-accent-rgb),0.12), inset 0 0 24px rgba(var(--ks-accent-rgb),0.08); } .page-emblem .ki{ position:relative; width:92px; height:92px; animation: ki-float 5s ease-in-out infinite; } .page-emblem.right{ float:right; margin:0 0 16px 32px; } .page-emblem.center{ margin:0 auto 18px; } @keyframes ki-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce){ .page-emblem .ki{ animation:none; } } @media (max-width: 720px){ .page-emblem.right{ display:none; } .page-emblem{ width:104px; height:104px; } .page-emblem .ki{ width:74px; height:74px; } } .ki-bronze { --ki:url("/assets/gear/1001.png"); } .ki-alliance { --ki:url("/assets/items/610102.png"); } /* Leaderboard podium: gold, silver and iron crowns */ /* Wide 288x214 building art: zoom so it fills the square box */ .ki-castle, .ki-throne, .ki-flowers{ background-size:120%; } .ki-rank1 { --ki:url("/assets/gear/1007.png"); } .ki-rank2 { --ki:url("/assets/gear/1004.png"); } .ki-rank3 { --ki:url("/assets/gear/1001.png"); } /* Hero-skill and portrait art ships as a rounded tile — clip the corners to match */ .ki-shield-sword, .ki-bear, .ki-book, .ki-heroes, .ki-wolf, .ki-power, .ki-paw, .ki-lightning, .ki-fire, .ki-rotate, .ki-handshake{ border-radius:22%; } /* Podium icon for leaderboard ranks 1–3 */ .rank-ico{ width:34px; height:34px; vertical-align:middle; margin-left:-6px; } /* OPS-112: no 685 home button in the app bar. Only members ever see the header (public pages hide it for guests), and they reach the home page from the Hub's Shortcuts widget, so the tabs now start at the left. */ .header .brand{ display:none; } header.header nav{ justify-content:flex-start; } @media (max-width:560px){ .header-inner{ grid-template-columns:minmax(0,1fr); } } /* OPS-115: app bar order is profile + mailbox at the far left, the tabs centred in the bar, then the language picker and the UTC clock at the far right. Every page's markup keeps the old shape (clock, then the profile slot, inside .utility-inner), so instead of rewriting 28 headers the wrappers go display:contents and each piece becomes a flex item of .header-inner that `order` places. A ::before spacer (order 7) pushes everything after it to the right edge. On wide screens the tabs are taken out of the flow and pinned to the bar's centre, so they stay truly centred however wide the name or the language label is; below 1040px they drop to their own swipeable row as before. */ .header-inner{ position:relative; display:flex; flex-wrap:nowrap; justify-content:flex-start; column-gap:14px; } .header-inner::before{ content:''; order:7; flex:1 1 0; min-width:0; } .header .utility-inner{ display:contents; } .header .profile-menu, .header #user-status-slot > .utility-link{ order:1; } .header .ks-mailbox{ order:2; } .header #join-cta-link{ order:8; } .header .ks-lang-switcher{ order:9; } .header .utc-block{ order:10; } /* Both menus now hang off the left of the bar, so open them rightwards. (The mailbox's own docked phone layout still wins — same specificity, injected later.) */ .header .profile-menu-panel{ left:0; right:auto; } .header .ks-mailbox-panel{ left:0; right:auto; } .header .profile-id-block strong{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (min-width:1041px){ header.header nav{ position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); flex:none; width:max-content; max-width:calc(100% - 520px); justify-content:center; } } @media (max-width:1150px){ .header-inner{ column-gap:11px; } } @media (max-width:1040px){ .header-inner{ flex-wrap:wrap; } header.header nav{ order:20; justify-content:center; justify-content:safe center; } } @media (max-width:560px){ .header-inner{ display:flex; flex-wrap:wrap; column-gap:10px; row-gap:10px; } header.header nav{ order:20; flex:0 0 calc(100% + 32px); } .header .profile-menu{ flex-shrink:1; min-width:0; } .header .profile-id-block strong{ max-width:34vw; } } @media (max-width:360px){ .header-inner{ column-gap:6px; } } /* Signed-in members don't need join/login prompts. */ html.is-authed .guest-only, html.is-authed .js-login { display: none !important; } /* OPS-113: Join 685 sits right under the hero for everyone; the OPS-51 reorder that moved it to the bottom for members is gone. */ /* Join 685: compact layout (OPS-31, OPS-33) — small, simple, one screen */ .transfer-section{ padding-top:56px; padding-bottom:56px; } /* OPS-113: heading above, then two panels of equal height with one shared top edge and flush outer edges. */ .transfer-head{ margin-bottom:20px; } .transfer-head h2{ font-family: var(--serif); font-size: clamp(26px,3vw,36px); margin:0; font-weight:600; } .transfer-layout{ gap:24px; align-items:stretch; } .transfer-calc{ border:1px solid var(--line); border-radius:4px; background: var(--panel); padding:20px; } .transfer-lead{ margin:0 0 12px; max-width:none; } .transfer-window .tw-steps{ margin-top:auto; } /* The calculator is shorter than the window: keep "Start a conversation" on the panels' shared bottom line instead of leaving a gap under it. */ .transfer-calc .join-actions{ margin-top:auto; padding-top:14px; } .transfer-form input{ padding:11px 14px; } .transfer-result{ margin-top:12px; } .tr-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; } .tr-top .tr-player{ padding:0; border:0; min-width:0; } .tr-top .tr-player img{ width:32px; height:32px; } .tr-top .tr-passes{ padding:0; gap:8px; flex-shrink:0; align-items:center; } .tr-top .tr-passes b{ font-size:36px; } .tr-top .tr-passes span{ font-size:10px; } .tr-top .tr-passes em{ margin-top:2px; } .tr-line{ margin:0; padding:10px 16px; border-top:1px solid var(--line2); font-size:12px; color: var(--muted); } .tr-line b{ color: var(--text); font-weight:600; font-variant-numeric: tabular-nums; } .tr-notes{ padding:8px 16px 10px; gap:4px; } .tr-away{ padding:12px 16px 14px; } .join-actions{ margin-top:14px; align-items:center; } .join-actions .button{ padding-top:11px; padding-bottom:11px; } .contact-card{ margin-top:10px; border:0; background:none; } .contact-card > summary{ display:inline-flex; padding:4px 0; gap:6px; font-size:12px; color: var(--gold); letter-spacing:.04em; } .contact-card > summary::after{ font-size:14px; } .contact-card[open]{ border:1px solid var(--line); border-radius:4px; background: var(--panel); } .contact-card[open] > summary{ padding:12px 16px; } .transfer-window .tw-forecast{ flex:1 1 auto; } .tw-head{ padding:14px 20px; } .tw-stats > div{ padding:12px 20px; } .tw-forecast{ padding:12px 20px 4px; } .tw-forecast > small{ margin-bottom:8px; } .tw-fc{ margin-bottom:8px; } .tw-scn{ padding:7px 10px; } .tw-footer{ padding:10px 20px; } .tw-steps{ list-style:none; margin:0; padding:10px 20px 12px; display:flex; flex-wrap:wrap; gap:6px 16px; border-top:1px solid var(--line2); counter-reset:step; } .tw-steps li{ display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--muted); counter-increment:step; } .tw-steps li::before{ content: counter(step); font-family: var(--serif); color: var(--gold); font-size:12px; } .tw-steps .ki{ width:18px; height:18px; } @media (max-width: 560px){ .transfer-section{ padding-top:40px; padding-bottom:40px; } .transfer-head{ margin-bottom:16px; } .transfer-layout{ gap:16px; } .transfer-calc{ padding:14px; } .transfer-calc .transfer-form input{ padding-left:10px; padding-right:10px; } .transfer-form{ flex-direction:row; } .transfer-form .button{ padding-left:14px; padding-right:14px; } .join-actions .button{ flex:0 0 auto; } .tr-line{ font-size:11.5px; } .tw-stats{ grid-template-columns: repeat(3,1fr); } .tw-stats > div{ border-bottom:none; border-right:1px solid var(--line2); padding:10px 12px; } .tw-stats > div:last-child{ border-right:none; } .tw-stats strong{ font-size:12.5px; } .tw-head, .tw-forecast, .tw-footer, .tw-steps{ padding-left:14px; padding-right:14px; } .tw-scn{ grid-template-columns: 52px 1fr; gap:4px 10px; } .tw-scn .tw-like{ grid-column:2; justify-self:start; } } /* Join 685: troop dismiss calculator (over the power limit) */ .tr-dismiss{ border-top:1px solid var(--line2); padding:8px 16px; } .tr-dismiss[open]{ padding-bottom:14px; } .tr-dismiss > summary{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:12px; letter-spacing:.04em; color: var(--gold); padding:2px 0; } .tr-dismiss > summary::-webkit-details-marker{ display:none; } .tr-dismiss > summary::after{ content:'+'; font-size:14px; line-height:1; } .tr-dismiss[open] > summary::after{ content:'−'; } .tr-dismiss > summary:hover{ text-decoration:underline; } .tr-dismiss > summary:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; } .trd-head{ margin-top:8px; } .trd-head span{ display:block; font-size:12px; color: var(--muted); line-height:1.6; } .trd-head span:first-child{ font-size:11px; color: var(--faint); font-style:italic; margin-bottom:4px; } .trd-rows{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:12px 0 14px; } .trd-row{ display:grid; grid-template-columns: 1fr auto; gap:4px; min-width:0; } .trd-row span{ grid-column:1 / -1; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--faint); } .trd-row input, .trd-row select{ min-width:0; background: var(--panel-2); border:1px solid var(--line); border-radius:2px; color: var(--text); font: inherit; font-size:13px; padding:8px 10px; font-variant-numeric: tabular-nums; } .trd-row select{ padding:8px 4px; cursor:pointer; } .trd-row input:focus, .trd-row select:focus{ outline:none; border-color: var(--gold); } .trd-bar{ position:relative; margin:4px 0 10px; } .trd-bar{ --thumb:16px; } .trd-bar input{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:20px; background:transparent; cursor:pointer; margin:0; } .trd-bar input::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background: var(--line); } .trd-bar input::-moz-range-track{ height:4px; border-radius:2px; background: var(--line); } .trd-bar input::-webkit-slider-thumb{ -webkit-appearance:none; width:var(--thumb); height:var(--thumb); margin-top:-6px; border-radius:50%; background: var(--gold); border:2px solid var(--panel); } .trd-bar input::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border-radius:50%; background: var(--gold); border:2px solid var(--panel); } .trd-bar input:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; } /* Marks the smallest dismissal that gets under the limit (the snap point). */ .trd-mark{ position:absolute; top:1px; width:2px; height:18px; margin-left:-1px; border-radius:1px; background: var(--gold-bright); opacity:.7; pointer-events:none; } .trd-out{ font-size:12.5px; line-height:1.6; color: var(--muted); margin:0; } .trd-out b{ color: var(--text); font-variant-numeric: tabular-nums; } .trd-out.ok{ color:#9fdcb0; } .trd-out.warn{ color:#e3c07b; } @media (max-width: 560px){ .tr-dismiss{ padding:8px 16px; } .trd-rows{ grid-template-columns: 1fr; } .trd-row{ grid-template-columns: 1fr 96px; } } /* Smallest phones: tighten the header cluster so it still clears the 685 mark. */ @media (max-width:360px){ .header-inner{ gap:6px; } .utility-inner{ gap:6px; } .utility-link.accent{ padding:6px 7px; letter-spacing:.06em; } } /* OPS-27: on the public pages (body.public-page — Home, About, Contact, Privacy, Login) signed-out visitors get no header bar, just a floating Member login with the language switch beside it, pinned top-right so it never sits over the footer links. is-authed is painted from the cached session before first paint, so members keep their header without a flash. */ html:not(.is-authed) body.public-page > header.header{ display:none; } .guest-float{ position:fixed; top:14px; right:14px; z-index:70; display:flex; align-items:center; gap:8px; transition: transform .25s ease, opacity .25s ease; } /* app.js tucks it away while scrolling down on narrow screens, so it never sits over what is being read; any scroll up brings it back. */ .guest-float.is-tucked{ transform: translateY(calc(-100% - 20px)); opacity:0; pointer-events:none; } .guest-float-login{ display:inline-flex; align-items:center; color: var(--gold-bright); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border:1px solid rgba(var(--ks-accent-rgb),0.45); border-radius:3px; padding:9px 16px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.45); transition: all .2s ease; } .guest-float-login:hover, .guest-float-login:focus-visible{ border-color: var(--gold); background: rgba(var(--ks-accent-rgb),0.14); color: var(--text); } .guest-float .ks-lang-btn{ background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); padding:8px 11px; } /* OPS-106: the login button and the language switch share one height, radius and shadow, so neither looks bigger than the other. */ .guest-float-login, .guest-float .ks-lang-btn{ box-sizing:border-box; height:34px; padding:0 14px; line-height:1; border-radius:3px; box-shadow:0 8px 24px rgba(0,0,0,.45); } /* Without the bar, the home hero and the login card start right at the top of the page on narrower screens, under the floating button — push the page down by the button's height there. Wide screens already clear it. */ @media (max-width: 900px){ html:not(.is-authed) body.public-page{ padding-top:40px; } } /* OPS-50: phone jump bar (index.html, signed out only). Sticky at the end of
, so it rides the bottom of the screen and stops above the footer. */ .jump-bar{ display:none; } @media (max-width: 720px){ html:not(.is-authed) .jump-bar{ display:flex; position:sticky; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:60; width:max-content; max-width:calc(100% - 24px); margin:0 auto; gap:4px; padding:4px; border:1px solid rgba(var(--ks-accent-rgb,201,166,107),0.35); border-radius:999px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .jump-bar a{ display:flex; align-items:center; min-height:40px; padding:0 14px; border-radius:999px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--text); text-decoration:none; white-space:nowrap; } .jump-bar a:first-child{ background: rgba(var(--ks-accent-rgb,201,166,107),0.16); color: var(--gold); } .jump-bar a:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; } } @media (max-width: 640px){ .guest-float{ top:10px; right:10px; gap:6px; } .guest-float-login{ font-size:10px; } .guest-float-login, .guest-float .ks-lang-btn{ height:32px; padding:0 12px; } } /* Join 685: the contact card opens from "Start a conversation" (OPS-35) */ .contact-card > summary.sr-only{ position:absolute; padding:0; } .contact-card[open]{ margin-top:12px; } .contact-card > summary.sr-only ~ .contact-card-form, .contact-card > summary.sr-only ~ .cc-thanks{ border-top:0; padding-top:4px; } .cc-lookup{ margin:-6px 0 0; font-size:12px; color: var(--muted); } .cc-lookup.ok{ color:#9fdcb0; } .cc-lookup.bad{ color:#e3a0a0; } .cc-check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:12.5px; color: var(--muted); } .cc-check input{ width:16px; height:16px; margin:0; accent-color: var(--gold); flex-shrink:0; cursor:pointer; } /* ================================================================ OPS-75: home on wide screens. The page was a fixed 1180px column with 128px gaps, so a big monitor was mostly empty. From 1400px the column grows with the window (up to 1640px), the gaps tighten, and the hero gets a taller, full-width frame. Scoped to body.home so no other page that shares .shell changes width. ================================================================ */ .home .priority-strip{ margin-top: 64px; } @media (min-width: 1400px){ body.home{ --shell: min(1640px, 90vw); --section-pad: 72px; } /* OPS-138: the app bar keeps the 1180px column every other page uses. */ body.home .header-inner{ max-width: 1180px; } .home .hero{ padding-top: 40px; } .home .section-heading{ max-width: 1040px; margin-bottom: 44px; } .home .section-heading h2{ font-size: clamp(34px, 2.6vw, 50px); } .home .priority-strip{ margin-top: 40px; min-height: 260px; } .home .priority-content{ padding: 48px 64px; } .home .priority-main h2{ font-size: clamp(32px, 2.4vw, 44px); } /* The frame no longer follows the art's shape (at 1600px wide that would be 1000px tall). Instead the art keeps its own shape at full frame height on the right, so the whole painting and both taglines still show (OPS-66), and it fades into the dark on the left where the copy sits. */ .home .hero-frame{ aspect-ratio: auto; height: clamp(600px, 68vh, 780px); min-height: 0; align-items: center; } .home .hero-art{ left: auto; right: 0; width: auto; max-width: none; aspect-ratio: 1285 / 816; /* the file has a thin dark band along its top edge; lift it out of frame */ top: -3%; height: 103%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); } .home .hero-copy{ padding: 64px 80px; max-width: 760px; } .home .hero h1{ font-size: clamp(72px, 5.4vw, 104px); } .home .hero-sub{ font-size: clamp(22px, 1.6vw, 28px); } .home .hero-lead{ font-size: 16px; } } /* The bear strip is a bordered .shell, so it was 64px wider than the hero frame (which sits inside the hero's side padding). Line their edges up. */ @media (min-width: 981px){ body.home main#top > .priority-strip{ width: calc(100% - 64px); max-width: calc(var(--shell) - 64px); } } @media (min-width: 561px) and (max-width: 980px){ body.home main#top > .priority-strip{ width: calc(100% - 40px); } } /* .section's padding shorthand wipes .shell's side padding, so sections that are both (Life, Inside, Why, Join) ran 64px wider than the hero and the Muscle/Brains blocks. Give them the same gutter so every edge lines up. */ @media (min-width: 981px){ body.home main#top > .section.shell{ padding-left: 32px; padding-right: 32px; } } /* OPS-113: same fix for tablets (hero gutter is 20px there), and stop the hero's 520px min-height from pushing its width past the screen through aspect-ratio (at 768px it was 819px wide, so the page scrolled sideways). */ @media (min-width: 561px) and (max-width: 980px){ body.home main#top > .section.shell{ padding-left: 20px; padding-right: 20px; } .home .hero{ grid-template-columns: minmax(0, 1fr); } .home .hero-frame{ width: 100%; min-width: 0; } } /* ---- motion: slow and quiet, and all of it off for reduced motion ---- */ @media (prefers-reduced-motion: no-preference){ /* hero: the painting drifts very slowly; the copy settles in on load */ .home .hero-art{ animation: homeDrift 28s ease-in-out infinite alternate; transform-origin: 70% 40%; } .home .hero-copy > *{ animation: homeRise .9s cubic-bezier(.2,.7,.2,1) both; } .home .hero-copy > :nth-child(2){ animation-delay: .08s; } .home .hero-copy > :nth-child(3){ animation-delay: .16s; } .home .hero-copy > :nth-child(4){ animation-delay: .24s; } .home .hero-copy > :nth-child(5){ animation-delay: .32s; } .home .hero-copy > :nth-child(6){ animation-delay: .40s; } /* next priority: a live-looking dot */ .home .priority-label i{ animation: homePulse 2.2s ease-out infinite; } /* rows of cells come in one after another as they scroll into view */ .home .stat-row.reveal > *, .home .process-row.reveal > *{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .home .stat-row.reveal.visible > *, .home .process-row.reveal.visible > *{ opacity: 1; transform: none; } .home :is(.stat-row, .process-row).reveal > :nth-child(2){ transition-delay: .07s; } .home :is(.stat-row, .process-row).reveal > :nth-child(3){ transition-delay: .14s; } .home :is(.stat-row, .process-row).reveal > :nth-child(4){ transition-delay: .21s; } .home :is(.stat-row, .process-row).reveal > :nth-child(5){ transition-delay: .28s; } .home :is(.stat-row, .process-row).reveal > :nth-child(6){ transition-delay: .35s; } .home :is(.stat-row, .process-row).reveal > :nth-child(7){ transition-delay: .42s; } .home :is(.stat-row, .process-row).reveal > :nth-child(8){ transition-delay: .49s; } .home :is(.stat-row, .process-row).reveal > :nth-child(9){ transition-delay: .56s; } /* banners: the photo leans in a touch under the pointer */ .home :is(.priority-art, .community-art, .inside-art){ transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .home :is(.priority-strip, .community-banner, .inside-banner):hover :is(.priority-art, .community-art, .inside-art){ transform: scale(1.03); } /* cards lift slightly on hover */ /* opacity stays in the list: alliance cards are also .reveal */ .home :is(.mini-card, .alliance-card){ transition: opacity .7s ease, transform .3s ease, border-color .25s ease, box-shadow .25s ease; } @media (hover: hover){ .home :is(.mini-card, .alliance-card):hover{ transform: translateY(-3px); border-color: var(--line); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--ks-accent-rgb),0.08); } } } @keyframes homeDrift{ from{ transform: scale(1); } to{ transform: scale(1.045) translateX(-0.6%); } } @keyframes homeRise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } } @keyframes homePulse{ 0%{ box-shadow: 0 0 0 0 rgba(var(--ks-accent-rgb),.6); } 70%{ box-shadow: 0 0 0 8px rgba(var(--ks-accent-rgb),0); } 100%{ box-shadow: 0 0 0 0 rgba(var(--ks-accent-rgb),0); } }