:root { --bg: #0f1020; --bg-1: #171830; --bg-2: #1f2140; --bg-panel: rgba(23, 24, 48, 0.72); --border: rgba(200, 170, 110, 0.22); --border-strong: rgba(200, 170, 110, 0.55); --gold: #c8aa6e; --gold-soft: #a48546; --gold-bright: #f0d898; --crystal: #4fc3f7; --crystal-soft: #2a8ab9; --text: #e9e6dc; --text-dim: #a8a59a; --text-muted: #80806f; --danger: #e26a6a; --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.8), 0 10px 30px -10px rgba(0, 0, 0, 0.6); --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, 0.6); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } * { box-sizing: border-box; } /* ============ Motion layer ============ */ /* Every fades in when its load event fires (or immediately on render if it was served from browser cache — see app.js image-fade helper). */ img { opacity: 0; transition: opacity 0.4s var(--ease); } img.loaded, img[src=""], img:not([src]), .tt-ghost img { opacity: 1; } /* Page transitions: the #view container fades + slides on each route render. */ .view { animation: view-in 0.32s var(--ease) both; } @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* List stagger: parent sets .stagger, children cascade in by index set on --i. */ .stagger > * { animation: stagger-in 0.42s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 28ms); } @keyframes stagger-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Cross-fade helper (targets a child element so the parent keeps its own transform — used by the tooltip where the outer container holds position). */ .xfade-leaving { animation: xfade-out 0.18s ease-out forwards; } @keyframes xfade-out { to { opacity: 0; transform: scale(0.985); } } /* Tooltip inner wrapper: owns the pop-in scale + fade animation so the outer container's positioning transform is never touched. Every time the inner content is replaced, a fresh .tt-fade element is created and its animation plays from the start. No leaving animation — it causes flicker (see JS). */ .tt-fade { opacity: 0; transform: scale(0.96); animation: tt-fade-in 0.22s var(--ease) forwards; transform-origin: center center; } @keyframes tt-fade-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Respect the user's motion preferences. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } img { opacity: 1 !important; } .view, .stagger > * { animation: none !important; } } /* ============ Skip link (Phase 5.1) ============ */ /* First focusable element in the . Hidden off-screen until focused, then it slides into the top-left so a keyboard user can jump past the header nav straight to #view. Sits above the sticky header (z-index 30). */ .skip-link { position: fixed; top: 0; left: 0; z-index: 100; transform: translateY(-120%); margin: 0.5rem; padding: 0.6rem 1rem; background: var(--bg-2); color: var(--gold-bright); border: 1px solid var(--border-strong); border-radius: 8px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--gold); outline-offset: 2px; } /* ============ Styled in-app 404 (Phase 5.1) ============ */ .not-found { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 4rem 1.5rem; max-width: 32rem; margin: 0 auto; } .not-found__icon { width: 64px; height: 64px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; margin-bottom: 0.5rem; } .not-found__title { font-family: "EB Garamond", serif; margin: 0; } .not-found__text { margin: 0 0 0.75rem; } .not-found__home { display: inline-block; padding: 0.6rem 1.2rem; background: var(--bg-2); color: var(--gold-bright); border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 600; text-decoration: none; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); } .not-found__home:hover, .not-found__home:focus-visible { background: var(--bg-1); border-color: var(--gold); } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 15px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Sticky-footer layout: header + view + footer stack as a 3-row grid. */ body { display: grid; grid-template-rows: auto 1fr auto; } body { background-image: radial-gradient( ellipse at 20% -10%, rgba(79, 195, 247, 0.08), transparent 55% ), radial-gradient( ellipse at 90% 10%, rgba(200, 170, 110, 0.1), transparent 60% ), radial-gradient( ellipse at 50% 110%, rgba(200, 170, 110, 0.06), transparent 50% ), linear-gradient(180deg, #0b0c1c 0%, #0f1020 30%, #0b0c1c 100%); background-attachment: fixed; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 80px ), repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 80px ); mix-blend-mode: overlay; z-index: 0; } h1, h2, h3, h4 { font-family: "EB Garamond", "Cambria", serif; font-weight: 600; letter-spacing: 0.01em; color: var(--gold-bright); margin: 0 0 0.6em; } h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; } h2 { font-size: 1.6rem; } h3 { font-size: 1.15rem; color: var(--gold); } a { color: var(--crystal); text-decoration: none; } a:hover { color: #8fd9ff; text-decoration: underline; } .muted { color: var(--text-dim); } .hidden { display: none !important; } .dot { opacity: 0.35; padding: 0 0.4em; } /* ============ Header / Nav ============ */ .site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; padding: 0.85rem clamp(1rem, 3vw, 2.25rem); background: linear-gradient( 180deg, rgba(15, 16, 32, 0.94) 0%, rgba(15, 16, 32, 0.72) 100% ); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0.7rem; font-family: "EB Garamond", serif; font-size: 1.35rem; color: var(--text); } .brand:hover { text-decoration: none; color: var(--gold-bright); } .brand__mark { width: 22px; height: 22px; background: radial-gradient( circle at 50% 50%, var(--gold-bright) 0%, var(--gold) 45%, transparent 70% ), linear-gradient(135deg, var(--gold), var(--gold-soft)); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); filter: drop-shadow(0 0 6px rgba(200, 170, 110, 0.4)); } .brand__name { font-weight: 600; letter-spacing: 0.06em; } .brand__tag { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.12em; border-left: 1px solid var(--border); padding-left: 0.7rem; } .site-nav { display: flex; gap: 0.25rem; margin-left: 0.5rem; flex: 1; } .site-nav a { padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--text-dim); font-size: 0.95rem; transition: all 0.2s var(--ease); } .site-nav a:hover { color: var(--gold-bright); text-decoration: none; background: rgba(200, 170, 110, 0.06); } .site-nav a.active { color: var(--gold-bright); background: rgba(200, 170, 110, 0.1); box-shadow: inset 0 0 0 1px var(--border-strong); } .site-badge { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 3px; background: linear-gradient(180deg, rgba(200, 170, 110, 0.06), transparent); } @media (max-width: 640px) { .site-badge { display: none; } } /* ============ Mobile nav drawer (≤720px) ============ */ /* The hamburger only exists at the nav-collapse breakpoint. Above 720px the inline .site-nav is shown and the button is removed from the layout. */ .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--gold-bright); cursor: pointer; padding: 0; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .nav-toggle:hover { border-color: var(--gold); background: rgba(200, 170, 110, 0.06); } .nav-toggle:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.2); } /* Three-bar icon drawn with the element + its ::before/::after. */ .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* Morph to an X while the drawer is open. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 720px) { /* The header uses backdrop-filter, which makes it the containing block for position: fixed descendants (a CSS quirk shared by filter/transform). That would clip the drawer to the header's own ~70px height, so its panel background only covered the top strip and the links overflowed below with nothing behind them. Drop the blur on mobile so the fixed drawer is sized against the viewport (full height) and paints its background correctly. The header's gradient is opaque enough to stand in for the blur here. */ .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-toggle { display: flex; } /* Collapsed by default; opens as a vertical drawer pinned below the header. */ .site-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; flex: none; flex-direction: column; gap: 0.3rem; width: min(78vw, 300px); margin: 0; padding: 5rem 1.1rem 1.5rem; background: linear-gradient( 180deg, rgba(15, 16, 32, 0.98), rgba(11, 12, 28, 0.98) ); border-left: 1px solid var(--border-strong); box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.8); transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform 0.26s var(--ease), opacity 0.26s var(--ease), visibility 0s linear 0.26s; } .site-nav--open { transform: translateX(0); opacity: 1; visibility: visible; transition: transform 0.26s var(--ease), opacity 0.26s var(--ease); } .site-nav a { padding: 0.85rem 1rem; font-size: 1.05rem; border-radius: 6px; } /* The drawer lives INSIDE .site-header, which is its own stacking context (position: sticky + z-index: 30). A backdrop on at z-index 35 would therefore paint over the entire header subtree — including the drawer — and swallow its clicks, regardless of the drawer's own z-index. Lift the whole header layer above the backdrop while the drawer is open so the drawer (and the toggle) stay on top and clickable. */ body.nav-open .site-header { z-index: 45; } /* Dim backdrop behind the open drawer. */ body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); animation: nav-backdrop-in 0.26s var(--ease) both; } } @keyframes nav-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .site-nav { transition: none !important; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none !important; } body.nav-open::after { animation: none !important; } } /* ============ Main view ============ */ .view { position: relative; z-index: 1; width: 100%; max-width: 1600px; justify-self: center; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); min-height: calc(100vh - 180px); } /* ============ Footer ============ */ .site-footer { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.25rem clamp(1rem, 3vw, 2.25rem); border-top: 1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4)); font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.08em; } .site-footer__login { color: var(--text-dim); text-decoration: none; transition: color 0.15s var(--ease); } .site-footer__login:hover { color: var(--gold-bright); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.1rem; font: inherit; font-size: 0.92rem; border-radius: 3px; border: 1px solid var(--border-strong); background: linear-gradient( 180deg, rgba(200, 170, 110, 0.08), rgba(200, 170, 110, 0.02) ); color: var(--gold-bright); cursor: pointer; transition: all 0.2s var(--ease); letter-spacing: 0.04em; } .btn:hover { border-color: var(--gold); background: linear-gradient( 180deg, rgba(200, 170, 110, 0.18), rgba(200, 170, 110, 0.04) ); box-shadow: 0 0 18px -4px rgba(200, 170, 110, 0.35); text-decoration: none; } .btn--primary { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%); color: #1a1a2e; border-color: var(--gold-bright); font-weight: 600; } .btn--primary:hover { color: #0a0a14; filter: brightness(1.08); } .btn--ghost { background: transparent; color: var(--text-dim); border-color: var(--border); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============ Hero / Home ============ */ .hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 5vw, 3.5rem) 0; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .hero__crest { position: relative; margin-bottom: 1.8rem; } .crest-frame { position: relative; width: clamp(150px, 22vw, 220px); height: clamp(150px, 22vw, 220px); display: grid; place-items: center; } .crest-orbit { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .crest-orbit--a { border: 1px dashed rgba(200, 170, 110, 0.25); animation: spin 60s linear infinite; } .crest-orbit--b { inset: -14px; border: 1px solid rgba(79, 195, 247, 0.2); animation: spin 90s linear infinite reverse; } .crest-orbit::before, .crest-orbit::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px var(--gold); } .crest-orbit--a::before { top: -3px; left: calc(50% - 3px); } .crest-orbit--a::after { bottom: -3px; left: calc(50% - 3px); background: var(--crystal); box-shadow: 0 0 12px var(--crystal); } .crest-img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 28px rgba(200, 170, 110, 0.25)); animation: floaty 6s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .hero__content { min-width: 0; } .hero__title { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; margin: 0 0 0.8rem; } @media (max-width: 760px) { .hero__title { align-items: center; } } .hero__name { font-family: "EB Garamond", serif; font-size: clamp(3rem, 7vw, 5rem); font-weight: 600; letter-spacing: 0.08em; background: linear-gradient( 180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-soft) 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(200, 170, 110, 0.3)); line-height: 1; } .hero__tag { font-size: 0.95rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; } .hero__slogan { font-family: "EB Garamond", serif; font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--text-dim); margin: 0.5rem 0 1.5rem; } .hero__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } @media (max-width: 760px) { .hero__badges { justify-content: center; } } .hero__facts { color: var(--text-dim); font-size: 0.95rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .hero__facts .dot { color: var(--gold); opacity: 0.5; } @media (max-width: 760px) { .hero__facts { justify-content: center; } } .badge { display: inline-block; padding: 0.25rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; } .badge--gold { color: var(--gold-bright); border-color: var(--gold); background: rgba(200, 170, 110, 0.08); } /* ============ Home crew strip (member-avatar teaser) ============ */ .home-crew { margin-top: 2rem; } .home-crew__avatars { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; } .crew-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: linear-gradient( 135deg, var(--gold), var(--gold-soft), var(--crystal-soft) ); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6); display: block; flex: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .crew-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2); } .crew-avatar:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-strong); text-decoration: none; } .crew-avatar--more { display: grid; place-items: center; background: rgba(200, 170, 110, 0.08); border: 1px solid var(--border); color: var(--gold-bright); font-family: "EB Garamond", serif; font-size: 1.05rem; letter-spacing: 0.02em; } /* ============ Landing grid (estate + recruitment + upcoming) ============ */ .landing-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; } @media (min-width: 900px) { .landing-grid { grid-template-columns: minmax(260px, 1fr) 1.2fr 1.2fr; } } @media (min-width: 700px) and (max-width: 899px) { .landing-grid { grid-template-columns: 1fr 1fr; } .estate-plaque { grid-column: span 2; } } /* ============ Estate plaque ============ */ .estate-plaque { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.25rem; background: radial-gradient(ellipse at top, rgba(200, 170, 110, 0.06), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15)); border: 1px solid var(--border-strong); position: relative; } .estate-plaque::before, .estate-plaque::after { content: ""; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; } .estate-plaque::before { top: 8px; } .estate-plaque::after { bottom: 8px; } .plaque__top { display: flex; align-items: center; gap: 0.5rem; color: var(--gold); margin-bottom: 0.8rem; } .plaque__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--gold); color: var(--gold-bright); font-size: 1rem; border-radius: 50%; } .plaque__label { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .plaque__name { font-family: "EB Garamond", serif; font-size: 1.7rem; color: var(--gold-bright); margin: 0 0 0.8rem; line-height: 1.15; letter-spacing: 0.02em; } .plaque__address { color: var(--text); font-family: "EB Garamond", serif; font-size: 1.02rem; line-height: 1.55; } .plaque__address > div:not(:last-child) { margin-bottom: 0.1rem; } .plaque__size { margin-top: 0.8rem; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); } .landing__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); position: relative; } .landing__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); } .landing__head h2 { margin: 0; padding: 0; border: 0; font-size: 1.15rem; } .landing__head h2::after { display: none; } .landing__more { font-size: 0.82rem; color: var(--text-dim); } .landing__more:hover { color: var(--gold-bright); text-decoration: none; } .badge--closed { color: var(--text-muted); border-color: var(--border); background: rgba(255, 255, 255, 0.03); } /* ============ Page Header / Toolbar ============ */ .page-header { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .page-header h2 { font-size: 2rem; letter-spacing: 0.04em; margin: 0; } .toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .toolbar input, .toolbar select { background: var(--bg-1); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.8rem; font: inherit; font-size: 0.9rem; } .toolbar input { flex: 1 1 260px; min-width: 0; } .toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.15); } /* Touch: ≥44px tall search/filter controls. */ @media (pointer: coarse) { .toolbar input, .toolbar select { min-height: 44px; font-size: 1rem; /* also stops iOS zoom-on-focus for <16px inputs */ } } /* Role quick-filter pills (roster toolbar). */ .role-filter { display: flex; gap: 0.35rem; flex-wrap: wrap; } .role-pill { background: var(--bg-1); color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.85rem; font: inherit; font-size: 0.85rem; letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .role-pill:hover { color: var(--text); border-color: var(--border-strong); } .role-pill.is-active { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 600; } .role-pill:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 170, 110, 0.15); } @media (pointer: coarse) { .role-pill { min-height: 44px; font-size: 1rem; } } /* Per-card sort-metric line shown under name/rank on the flat (non-rank) sorts. */ .card__metric { margin: 0; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } /* ============ Roster Grid ============ */ .roster-groups { display: flex; flex-direction: column; gap: 1.5rem; } .rank-group__header { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; border-bottom: 1px solid var(--border); color: var(--gold); } .rank-group__header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); } .rank-group__header::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; box-shadow: 0 0 6px rgba(200, 170, 110, 0.5); } .rank-group__name { font-family: "EB Garamond", serif; font-size: 1.25rem; letter-spacing: 0.03em; color: var(--gold-bright); flex: 1; } .rank-group__count { font-size: 0.68rem; color: var(--text-muted); background: rgba(200, 170, 110, 0.08); border: 1px solid var(--border); padding: 0.1rem 0.6rem; border-radius: 999px; letter-spacing: 0.14em; text-transform: uppercase; } .roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; content-visibility: auto; contain-intrinsic-size: 320px; } .card { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 0.75rem; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); cursor: pointer; } .card--master { border-color: var(--gold); background: radial-gradient(ellipse at top, rgba(200, 170, 110, 0.12), transparent 60%), var(--bg-panel); box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.15) inset; } .card--master::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; background: radial-gradient( circle at 50% 50%, var(--gold-bright) 0%, var(--gold) 45%, transparent 70% ); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); opacity: 0.9; } .card--master .card__rank { color: var(--gold-bright); font-weight: 600; } .card::before { content: ""; position: absolute; inset: 1px; border-radius: 3px; background: radial-gradient( ellipse at top, rgba(200, 170, 110, 0.09), transparent 60% ); opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none; } .card > * { position: relative; } .card:hover, .card:focus-visible { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200, 170, 110, 0.25); outline: none; } .card:hover::before, .card:focus-visible::before { opacity: 1; } .card__avatar { width: 74px; height: 74px; align-self: center; border-radius: 50%; padding: 2px; background: linear-gradient( 135deg, var(--gold), var(--gold-soft), var(--crystal-soft) ); box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.6); } .card--master .card__avatar { padding: 3px; background: conic-gradient( from 180deg at 50% 50%, var(--gold-bright), var(--gold), var(--gold-bright), var(--gold), var(--gold-bright) ); box-shadow: 0 0 18px -4px rgba(200, 170, 110, 0.7); } .card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2); } .card__body { text-align: center; } .card__name { font-family: "EB Garamond", serif; font-size: 1.15rem; margin: 0 0 0.2rem; color: var(--text); } .card__rank { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; margin: 0 0 0.4rem; text-transform: uppercase; } .card__job { font-size: 0.82rem; margin: 0; } /* ============ Highlights strip ============ */ .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .highlight-card { position: relative; padding: 1.5rem 1.25rem 1.25rem; background: radial-gradient(ellipse at top, rgba(200, 170, 110, 0.06), transparent 70%), var(--bg-panel); border: 1px solid var(--border); border-top: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; text-align: center; } .highlight-card::before { content: ""; position: absolute; left: 15%; right: 15%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; } .highlight-card__mark { width: 46px; height: 46px; margin: 0 auto 0.75rem; display: grid; place-items: center; font-family: "EB Garamond", serif; font-size: 1.4rem; color: var(--gold-bright); background: rgba(200, 170, 110, 0.06); border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 14px -4px rgba(200, 170, 110, 0.4); } .highlight-card__mark--maelstrom { color: #e07e6b; border-color: #c35246; background: rgba(195, 82, 70, 0.08); box-shadow: 0 0 14px -4px rgba(195, 82, 70, 0.5); } .highlight-card__mark--adders { color: #e5d07b; border-color: #b8a355; background: rgba(184, 163, 85, 0.08); } .highlight-card__mark--flames { color: #e0a17c; border-color: #b97a50; background: rgba(185, 122, 80, 0.08); } .highlight-card__label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; } .highlight-card__value { font-family: "EB Garamond", serif; font-size: 1.6rem; color: var(--text); line-height: 1.2; margin-bottom: 0.3rem; } .highlight-card__sub { color: var(--text-dim); font-size: 0.9rem; } .highlight-card--link { display: block; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .highlight-card--link:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6); text-decoration: none; } /* ============ Recruitment / Home banner / Upcoming ============ */ .recruit-status { margin: 0.5rem 0 0.75rem; } .recruit-body { white-space: pre-line; } .home-banner { margin-top: 2rem; max-width: 60ch; padding: 1rem 1.25rem; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--crystal); border-radius: 3px; color: var(--text-dim); white-space: pre-line; font-size: 0.95rem; } .home-upcoming { text-align: left; } .home-upcoming__row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-dim); text-decoration: none; transition: background 0.15s var(--ease); } .home-upcoming__row:last-child { border-bottom: 0; } .home-upcoming__row:hover { background: rgba(200, 170, 110, 0.05); text-decoration: none; color: var(--text); } .home-upcoming__when { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .home-upcoming__label { font-family: "EB Garamond", serif; font-size: 1rem; color: var(--text); line-height: 1.35; overflow-wrap: break-word; } /* --- Mobile tweaks --- */ @media (max-width: 760px) { .site-nav a { padding: 0.4rem 0.6rem; font-size: 0.88rem; } .brand__tag { display: none; } .roster-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .card__avatar { width: 72px; height: 72px; } #tooltip-container { width: calc(100vw - 32px); } } /* ============ Skeleton loaders ============ */ @keyframes niara-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skeleton { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.09) 40%, rgba(200, 170, 110, 0.12) 50%, rgba(255, 255, 255, 0.09) 60%, rgba(255, 255, 255, 0.04) 100% ); background-size: 200% 100%; animation: niara-shimmer 1.6s linear infinite; border-radius: 3px; display: inline-block; } .skeleton--text { height: 0.85em; vertical-align: middle; } .skeleton--box { display: block; width: 100%; border-radius: 3px; } .skeleton--bar { display: block; width: 100%; height: 4px; border-radius: 2px; } .skeleton--fill { display: block; width: 100%; height: 100%; border-radius: inherit; } .skeleton-gear { pointer-events: none; } .skeleton-gear__lines { flex: 1; } /* --- Toast --- */ .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--text); padding: 0.7rem 1.2rem; border-radius: 3px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 200; font-size: 0.9rem; } .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .toast--error { border-color: var(--danger); color: var(--danger); }