/* Theme palette. Dark is the default; light is switched on by (see theme.js). A few surfaces sit on top of artwork or a fixed dark scrim — raffle cards, the server banner's name plate, the raffle banner's tags — so in light mode they re-declare the dark palette and keep their look. */ :root, :root[data-theme="light"] .raffle-card, :root[data-theme="light"] .server-banner-nameplate, :root[data-theme="light"] .rd-banner-tags { color-scheme: dark; --ink: #0E0C16; --dusk: #1B1730; --dusk-2: #241F3D; --hairline: #322C52; --dove: #B7A9E8; --dove-dim: #8A80AD; --peep: #9A8DDB; --peep-deep: #6E62AE; --black: #191b1c; /* replaces pure black on buttons */ --black-soft: #25282a; /* hover shade of --black */ --shade: #302f30; /* gradient base for raffle cards / server name plate */ --silver: #C2C5CB; --silver-hi: #E4E6EA; --paper: #F4F2FC; /* light text that always sits on a dark fill (buttons, active chips, pills) */ --text: #F4F2FC; /* primary text on the page and its surfaces */ --green: #4FAE7C; --red: #E0637A; --blue: #5B9BE0; --green-text: #7fd4a5; --red-text: #f0a0b0; --wash: rgba(255,255,255,.06); --wash-soft: rgba(255,255,255,.03); --foot-bg: rgba(9,8,14,.55); --card-wash-end: rgba(25,27,28,.6); } :root[data-theme="light"] { color-scheme: light; --ink: #F7F5FC; --dusk: #FFFFFF; --dusk-2: #F1EEF9; --hairline: #DDD8EE; --dove: #4E4778; --dove-dim: #6B6490; --peep: #5F52A3; --silver-hi: #3A3360; --text: #1B1730; --green: #2E8B5F; --red: #C43F5A; --blue: #2C6CB8; --green-text: #1E7A4C; --red-text: #B0344C; --wash: rgba(27,23,48,.05); --wash-soft: rgba(27,23,48,.03); --foot-bg: #F6F4FB; --card-wash-end: rgba(154,141,219,.06); } * { box-sizing: border-box; } body { margin: 0; background: var(--ink); color: var(--text); font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; line-height: 1.15; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ::selection { background: var(--peep-deep); color: var(--paper); } :focus-visible { outline: 2px solid var(--peep); outline-offset: 2px; } /* professional gloss sweep on hover — a soft diagonal highlight passes across the element. CLICKABLE elements only (cards/rows that are links, enabled buttons, the back button). Static panels (feature cards, the server header) and disabled buttons get no hover or gloss. */ .raffle-card, .guild-card, .profile-row, .btn, .back-btn { position: relative; overflow: hidden; } .raffle-card::after, .guild-card::after, .profile-row::after, .btn::after, .back-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; } .raffle-card:hover::after, .guild-card:hover::after, .profile-row:hover::after, .btn:not(:disabled):hover::after, .back-btn:hover::after { left: 130%; } .btn:disabled::after { display: none; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* nav */ nav { padding: 22px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; } .nav-row { display: flex; align-items: center; justify-content: space-between; } .wordmark { display: flex; align-items: center; gap: 9px; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; } .wordmark-mark { width: 28px; height: 28px; border-radius: 9px; object-fit: cover; flex-shrink: 0; } #nav-right { display: flex; align-items: center; gap: 12px; } .user-chip { display: flex; align-items: center; gap: 10px; } .user-chip img { width: 30px; height: 30px; border-radius: 50%; } .user-chip span { font-weight: 600; font-size: 14px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; background: transparent; color: var(--text); transition: transform .12s ease, background .15s ease, border-color .15s ease; } .btn:active:not(:disabled) { transform: scale(.97); } .btn-gold { background: var(--black); color: var(--paper); border-color: var(--silver); } .btn-gold:hover:not(:disabled) { background: var(--black-soft); border-color: #E4E6EA; } .btn-gold:disabled { background: var(--hairline); color: var(--dove-dim); border-color: transparent; cursor: not-allowed; } .btn-ghost { background: transparent; border-color: var(--hairline); } .btn-ghost:hover:not(:disabled) { border-color: var(--dove-dim); background: var(--wash-soft); } .btn-ghost:disabled { opacity: .5; cursor: not-allowed; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-danger { background: #B93A52; color: #fff; border-color: #B93A52; } .btn-danger:hover:not(:disabled) { background: #A32F46; border-color: #A32F46; } /* generic states */ .center-pad { text-align: center; padding: 90px 0; color: var(--dove); } .center-pad h2 { color: var(--text); margin-bottom: 14px; } .spinner { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hairline); border-top-color: var(--peep); animation: spin .8s linear infinite; margin: 0 auto 18px; } @keyframes spin { to { transform: rotate(360deg); } } .notice-bar { background: rgba(154,141,219,.12); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--dove); margin-bottom: 20px; } .notice-bar a { color: var(--peep); font-weight: 600; } /* landing page */ .hero { text-align: center; padding: 56px 0 48px; } .hero h1 { font-size: clamp(32px, 5vw, 52px); max-width: 16ch; margin: 0 auto 16px; } .hero-accent { color: var(--peep); } .hero-sub { color: var(--dove); font-size: 16.5px; max-width: 52ch; margin: 0 auto 28px; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding-bottom: 56px; } .feature-card { background: var(--dusk); border: 1px solid var(--hairline); border-radius: 16px; padding: 22px; } .feature-icon { font-size: 26px; margin-bottom: 12px; } .feature-card h3 { font-size: 16.5px; margin-bottom: 8px; } .feature-card p { color: var(--dove-dim); font-size: 14px; } .social-proof { text-align: center; padding: 8px 0 56px; color: var(--dove-dim); font-size: 14.5px; font-style: italic; } .faq { padding-bottom: 64px; max-width: 720px; margin: 0 auto; } .faq h2 { text-align: center; margin-bottom: 22px; } .faq details { background: var(--dusk); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; } .faq summary { cursor: pointer; font-weight: 600; font-size: 15px; } .faq details p { color: var(--dove); font-size: 14.5px; margin-top: 10px; line-height: 1.6; } .browse { padding-bottom: 24px; } .browse h2 { text-align: center; margin-bottom: 24px; } .site-footer { border-top: 1px solid var(--hairline); padding: 24px 0 48px; text-align: center; color: var(--dove-dim); font-size: 13px; } /* server picker — sized and shaped like .raffle-card below, so both grids feel consistent */ .guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 0 0 64px; } .guild-card { display: block; position: relative; background: var(--dusk); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; transition: border-color .15s ease, transform .12s ease; } .guild-card:hover { border-color: var(--peep-deep); transform: translateY(-2px); } .guild-card-banner { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--dusk-2); } .guild-card-banner-empty { width: 100%; aspect-ratio: 16/9; background: linear-gradient(155deg, var(--peep-deep), var(--ink)); } .guild-card-body { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(120deg, rgba(154,141,219,.14), rgba(110,98,174,.05)); } .guild-card-icon { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--dusk); margin-top: -34px; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .guild-card .fallback-icon { background: linear-gradient(160deg, var(--peep), var(--peep-deep)); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; } .guild-card-body p { font-weight: 600; font-size: 15px; background: linear-gradient(90deg, var(--text), var(--dove)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* server detail header — banner + name plate + circular icon that overflows the banner. The header itself does NOT clip (so the icon can hang past the banner's bottom edge); only .server-banner-media clips, keeping the banner's rounded corners. */ .server-banner-header { position: relative; margin-bottom: 54px; } .server-banner-media { position: relative; border-radius: 18px; overflow: hidden; background: var(--dusk); border: 1px solid var(--hairline); } .server-banner-img { width: 100%; aspect-ratio: 21/6; object-fit: cover; display: block; } .server-banner-empty { width: 100%; aspect-ratio: 21/6; background: linear-gradient(135deg, var(--peep-deep), var(--ink)); } /* upward gradient lives only on the name plate — the rest of the banner is untouched */ .server-banner-nameplate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; padding: 30px 24px 14px 116px; background: linear-gradient(to top, var(--shade) 0%, rgba(48,47,48,.88) 40%, rgba(48,47,48,0) 100%); } .server-banner-nameplate h1 { font-size: clamp(20px, 3vw, 28px); overflow-wrap: anywhere; } .server-banner-icon { position: absolute; left: 24px; bottom: -30px; z-index: 2; width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--ink); object-fit: cover; background: var(--dusk); box-shadow: 0 4px 14px rgba(0,0,0,.4); } .server-banner-icon.fallback-icon { background: linear-gradient(160deg, var(--peep), var(--peep-deep)); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; } /* list header: filters + search + view toggle + admin actions */ .list-header { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 8px 0 20px; } .list-header-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .filter-row { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { padding: 7px 15px; border-radius: 100px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--hairline); background: transparent; color: var(--dove); } .filter-chip.active { background: var(--peep-deep); border-color: var(--peep-deep); color: var(--paper); } .search-wrap { position: relative; display: inline-flex; align-items: center; } .search-wrap svg { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--dove-dim); pointer-events: none; } .search-input { background: var(--dusk); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 14px 9px 36px; color: var(--text); font-size: 14px; min-width: 200px; transition: border-color .15s ease; } .search-input::placeholder { color: var(--dove-dim); } .search-input:focus { border-color: var(--peep-deep); } .view-toggle { display: flex; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; } .view-toggle-btn { background: transparent; border: none; color: var(--dove-dim); padding: 8px 12px; font-size: 15px; } .view-toggle-btn.active { background: var(--peep-deep); color: var(--paper); } /* raffle grid + card The image fills the whole card; the text block sits over its bottom edge on a #302f30 gradient that is solid at the bottom and fades upward into the image. */ .raffle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding-bottom: 64px; } .raffle-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; background: var(--shade); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; transition: border-color .15s ease, transform .12s ease; } .raffle-card:hover { border-color: var(--peep-deep); transform: translateY(-2px); } .raffle-card .thumb, .raffle-card .thumb-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .raffle-card .thumb-empty { background: linear-gradient(155deg, var(--dusk-2), var(--ink)); display: flex; align-items: flex-start; justify-content: center; padding-top: 52px; } .raffle-card .thumb-empty svg { width: 34px; height: 34px; opacity: .3; } .raffle-card .body { position: relative; padding: 64px 16px 16px; /* top padding = how far the fade reaches above the badges */ /* #302f30 from the bottom edge, fading smoothly to nothing at the top edge of the block (just above the badges). Eased curve: 70 percent of the colour is gone by the 60 percent mark (opacity 0.30 there). */ background: linear-gradient(to top, rgba(48,47,48,1.000) 0%, rgba(48,47,48,0.986) 5%, rgba(48,47,48,0.953) 10%, rgba(48,47,48,0.908) 15%, rgba(48,47,48,0.854) 20%, rgba(48,47,48,0.792) 25%, rgba(48,47,48,0.725) 30%, rgba(48,47,48,0.655) 35%, rgba(48,47,48,0.582) 40%, rgba(48,47,48,0.509) 45%, rgba(48,47,48,0.437) 50%, rgba(48,47,48,0.367) 55%, rgba(48,47,48,0.300) 60%, rgba(48,47,48,0.237) 65%, rgba(48,47,48,0.180) 70%, rgba(48,47,48,0.129) 75%, rgba(48,47,48,0.085) 80%, rgba(48,47,48,0.049) 85%, rgba(48,47,48,0.022) 90%, rgba(48,47,48,0.006) 95%, rgba(48,47,48,0.000) 100%); } /* list view (wider screens): image on the left, fading sideways into the text block */ @media (min-width: 601px) { .raffle-grid.list-view { grid-template-columns: 1fr; } .raffle-grid.list-view .raffle-card { flex-direction: row; align-items: stretch; justify-content: flex-start; min-height: 132px; } .raffle-grid.list-view .raffle-card .thumb, .raffle-grid.list-view .raffle-card .thumb-empty { position: relative; inset: auto; width: 220px; height: auto; flex-shrink: 0; padding-top: 0; align-items: center; } .raffle-grid.list-view .raffle-card .body { flex: 1; margin-left: -72px; padding: 16px 18px 16px 92px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to right, rgba(48,47,48,0.000) 0.0px, rgba(48,47,48,0.006) 3.6px, rgba(48,47,48,0.022) 7.2px, rgba(48,47,48,0.049) 10.8px, rgba(48,47,48,0.085) 14.4px, rgba(48,47,48,0.129) 18.0px, rgba(48,47,48,0.180) 21.6px, rgba(48,47,48,0.237) 25.2px, rgba(48,47,48,0.300) 28.8px, rgba(48,47,48,0.367) 32.4px, rgba(48,47,48,0.437) 36.0px, rgba(48,47,48,0.509) 39.6px, rgba(48,47,48,0.582) 43.2px, rgba(48,47,48,0.655) 46.8px, rgba(48,47,48,0.725) 50.4px, rgba(48,47,48,0.792) 54.0px, rgba(48,47,48,0.854) 57.6px, rgba(48,47,48,0.908) 61.2px, rgba(48,47,48,0.953) 64.8px, rgba(48,47,48,0.986) 68.4px, var(--shade) 72px); } } .badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: .02em; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-chain { background: var(--wash); color: var(--dove); border: 1px solid var(--hairline); } .badge-live { background: rgba(91,155,224,.18); color: var(--blue); } .badge-live .badge-dot { animation: pulse-dot 1.6s ease-in-out infinite; } .badge-ended { background: transparent; color: var(--dove-dim); border: 1px solid var(--hairline); } .badge-won { background: rgba(79,174,124,.18); color: var(--green); } .badge-lost { background: rgba(224,99,122,.18); color: var(--red); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* tags on raffle cards: dark frosted pills so they stay readable over any artwork */ .raffle-card .badge { font-size: 12px; padding: 4px 10px; background: rgba(12,11,18,.84); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 1px 6px rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .raffle-card .badge-chain { color: var(--silver-hi); } .raffle-card .badge-ended { color: var(--dove); } /* name and stats get the same dark frosted pill as the tags */ .raffle-card h3, .raffle-card .stat-row { background: rgba(12,11,18,.84); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 1px 6px rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .raffle-card h3 { display: block; width: fit-content; max-width: 100%; font-size: 17px; margin-bottom: 10px; padding: 6px 14px; border-radius: 14px; overflow-wrap: anywhere; } .raffle-card .stat-row { width: fit-content; max-width: 100%; padding: 8px 14px; border-radius: 14px; color: var(--dove); } /* stat blocks — value stacked above its label, with real spacing between adjacent stats. (Previously only .stat-row had this; .stat-grid's stat b lacked display:block, so the bold value and its label ran together with no separator, e.g. "62Entries13Winners".) */ .stat-row { display: flex; gap: 18px; font-size: 12.5px; color: var(--dove-dim); } .stat-row b, .stat-grid .stat b { color: var(--text); font-size: 14px; display: block; font-weight: 700; margin-bottom: 2px; } /* detail page */ .back-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--black); border: 1px solid var(--silver); color: var(--paper); margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s ease, background .15s ease, border-color .15s ease; } .back-btn svg { width: 18px; height: 18px; transition: transform .15s ease; } .back-btn:hover { background: var(--black-soft); border-color: #E4E6EA; } .back-btn:hover svg { transform: translateX(-2px); } .back-btn:active { transform: scale(.94); } /* raffle detail — banner from the raffle's own image, title + chips, then a description column beside a Tasks panel. Everything is scoped under .rd so no other page is affected. */ .rd { --rd-panel: #09080e; --rd-row: #0d0c14; --rd-line: #2f2d3a; } .rd-header { position: relative; } .rd-banner { position: relative; overflow: hidden; aspect-ratio: 4 / 1; border-radius: 16px; border: 1px solid var(--rd-line); background: var(--rd-panel); } .rd-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rd-banner-fill { position: absolute; inset: 0; background: linear-gradient(135deg, var(--peep-deep), var(--ink)); } /* squarer/taller images: shown whole, over a blurred copy of themselves (class added by app.js) */ .rd-banner-backdrop { display: none; position: absolute; top: -24px; left: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) brightness(.55); } .rd-banner--contain .rd-banner-backdrop { display: block; } .rd-banner--contain .rd-banner-img { object-fit: contain; } .rd-banner-tags { position: absolute; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .rd-tag, .rd-banner-tags .badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 6px; background: rgba(9,8,14,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--paper); } .rd-banner-tags .badge { text-transform: uppercase; } .rd-banner-tags .badge-live { color: var(--blue); } .rd-banner-tags .badge-won { color: var(--green); } .rd-banner-tags .badge-lost { color: var(--red); } .rd-banner-tags .badge-ended { color: var(--dove); } .rd-avatar { position: absolute; left: 24px; bottom: -38px; z-index: 2; width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--dusk); border: 3px solid var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.45); } .rd-avatar--fallback { display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; background: linear-gradient(160deg, var(--peep), var(--peep-deep)); } .rd-title { margin: 28px 0 0; padding: 0 100px; text-align: center; font-size: clamp(24px, 3.4vw, 34px); overflow-wrap: anywhere; } .rd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 24px; } .rd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--rd-line); border-radius: 6px; background: var(--rd-panel); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .rd-chip svg { width: 12px; height: 12px; color: var(--dove); } .rd-chip--action { cursor: pointer; color: var(--text); border-color: var(--peep-deep); background: rgba(154,141,219,.14); transition: background .15s ease, border-color .15s ease; } .rd-chip--action:hover:not(:disabled) { border-color: var(--peep); background: rgba(154,141,219,.26); } .rd-chip--action:disabled { opacity: .6; cursor: default; } .rd-chip--danger { border-color: rgba(224,99,122,.5); background: rgba(224,99,122,.12); } .rd-chip--danger:hover:not(:disabled) { border-color: var(--red); background: rgba(224,99,122,.22); } .rd-chip--danger svg { color: var(--red); } .rd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -10px 0 24px; } .rd-actions-msg { max-width: 520px; margin: -10px auto 24px; text-align: center; } .rd-chip--action svg { color: var(--peep); } .rd-divider { border: 0; border-top: 1px solid var(--rd-line); margin: 0 0 30px; } .rd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; padding-bottom: 64px; } .rd-cols--single { grid-template-columns: minmax(0, 420px); justify-content: center; } .rd-about { text-align: center; } .rd-desc { max-width: 60ch; margin: 0 auto 28px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--silver-hi); } .rd-block { margin-bottom: 24px; } .rd-block-title { font-size: 13px; font-weight: 700; color: var(--dove-dim); margin-bottom: 10px; } .rd-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .rd-role { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-panel); font-size: 13px; } .rd-role.is-mine { border-color: var(--green); } .rd-host { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dove-dim); } .rd-host img { width: 22px; height: 22px; border-radius: 50%; } /* Tasks panel */ .rd-tasks { position: sticky; top: 16px; background: var(--rd-panel); border: 1px solid var(--rd-line); border-radius: 14px; padding: 18px; } .rd-tasks-title { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; text-align: center; margin-bottom: 14px; } .rd-task { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; margin-bottom: 8px; background: var(--rd-row); border: 1px solid var(--rd-line); border-radius: 10px; font-size: 13.5px; font-weight: 600; } .rd-task-status { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; font-size: 15px; font-weight: 800; } .rd-task-status svg { width: 18px; height: 18px; } .rd-task.is-done .rd-task-status { color: var(--green); } .rd-task.is-bad .rd-task-status { color: var(--red); } .rd-task.is-pending .rd-task-status { color: var(--dove-dim); } .rd-task-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; } .rd-task-side { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--dove-dim); } .rd-task-side svg { width: 16px; height: 16px; } .rd-task-note { flex-basis: 100%; font-size: 12px; font-weight: 500; color: var(--dove-dim); } .rd-task-label { color: var(--dove-dim); font-weight: 600; } .rd-task-hint { font-size: 12.5px; font-weight: 500; color: var(--dove-dim); } .rd-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } .rd-link:hover { color: var(--green-text); } .rd-select, .rd-input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--rd-line); color: var(--text); font: inherit; padding: 3px 2px; border-radius: 0; } .rd-select:focus, .rd-input:focus { border-bottom-color: var(--peep); outline: none; } .rd-select option { background: var(--dusk); color: var(--text); } .rd-input::placeholder { color: var(--dove-dim); font-weight: 500; } .rd-note { margin: 4px 0 12px; font-size: 14px; color: var(--dove); text-align: center; } .rd-tasks .claim-msg { margin: 0 0 10px; overflow-wrap: anywhere; } .rd-btn { width: 100%; justify-content: center; margin-top: 4px; padding: 12px 20px; } .rd-leave:hover:not(:disabled) { border-color: var(--red); color: var(--red-text); } .rd-tasks #claim-result .claim-msg { margin-top: 10px; } /* role names as Discord-style mentions (used on the raffle page) */ .role-mention { display: inline-block; padding: 0 2px; border-radius: 3px; font-weight: 500; color: var(--role-color, #c9cdfb); background: color-mix(in srgb, var(--role-color, #5865f2) 20%, transparent); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; background: var(--dusk); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; margin-bottom: 28px; } .stat-card { display: flex; align-items: center; gap: 12px; } .stat-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon svg { width: 18px; height: 18px; } .stat-icon.tint-peep { background: rgba(154,141,219,.16); color: var(--peep); } .stat-icon.tint-blue { background: rgba(91,155,224,.16); color: var(--blue); } .stat-icon.tint-green { background: rgba(79,174,124,.16); color: var(--green); } .stat-icon.tint-red { background: rgba(224,99,122,.16); color: var(--red); } .stat-icon.tint-black { background: var(--wash); color: var(--text); } .stat-card .stat-body { min-width: 0; } .stat-card .stat-body b { display: block; font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; } .stat-card .stat-body span { font-size: 12px; color: var(--dove-dim); } .section-label { font-size: 13px; font-weight: 700; color: var(--dove-dim); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; } .role-list, .req-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .role-item, .req-item { display: flex; align-items: center; gap: 10px; background: var(--dusk); border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; } .role-item .check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; } .role-item.qualifies .check { background: var(--green); color: #0E0C16; } .role-item:not(.qualifies) .check { background: var(--hairline); color: var(--dove-dim); } .role-item .entries { margin-left: auto; color: var(--dove-dim); font-size: 13px; } .req-item a { color: var(--peep); font-weight: 600; } .claim-msg { font-size: 14px; padding: 12px 14px; border-radius: 10px; margin-top: 14px; } .claim-msg.success { background: rgba(79,174,124,.14); color: var(--green-text); } .claim-msg.error { background: rgba(224,99,122,.14); color: var(--red-text); } /* wallets panel (member-facing add/remove) */ .wallets-section { margin-bottom: 32px; } .wallets-panel { background: var(--dusk); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; } .wallets-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; font-size: 15px; } .wallets-panel-head img { width: 26px; height: 26px; border-radius: 50%; } .wallet-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .wallet-row { display: flex; align-items: center; gap: 10px; background: var(--dusk-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; } .wallet-address { font-size: 13.5px; color: var(--text); word-break: break-all; flex: 1; } .wallet-add-row { display: flex; flex-wrap: wrap; gap: 10px; } .wallet-add-row select, .wallet-add-row input { background: var(--dusk-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; } .wallet-add-row input { flex: 1; min-width: 180px; } /* profile / raffle history */ .profile-card { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 18px; margin-bottom: 24px; background: linear-gradient(120deg, rgba(154,141,219,.22), var(--card-wash-end)); border: 1px solid var(--hairline); } .profile-card img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; } .profile-card h2 { font-size: 24px; background: linear-gradient(90deg, var(--text), var(--peep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .profile-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 64px; } .profile-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--dusk); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; transition: border-color .15s ease; } .profile-row:hover { border-color: var(--peep-deep); } .profile-row h3 { font-size: 15.5px; margin-bottom: 4px; } .profile-row-guild { color: var(--dove-dim); font-size: 13px; } .profile-row-wallet { color: var(--dove-dim); font-size: 12.5px; font-family: monospace; flex-shrink: 0; } /* create raffle modal — fixed header and footer, scrolling body, sectioned form */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(8,7,13,.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cr-modal { --cr-line: #2f2d3a; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 100%; background: var(--dusk); border: 1px solid var(--cr-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; } .cr-modal [hidden] { display: none !important; } .cr-loading { padding: 72px 0; text-align: center; color: var(--dove); } .cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--cr-line); } .cr-head h2 { font-size: 22px; } .cr-head p { margin-top: 4px; font-size: 13.5px; color: var(--dove-dim); } .cr-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--dove-dim); font-size: 20px; line-height: 1; transition: color .15s ease, border-color .15s ease; } .cr-close:hover { color: var(--text); border-color: var(--dove-dim); } .cr-form { display: flex; flex-direction: column; flex: 1; min-height: 0; } .cr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px; } .cr-section { padding: 22px 0; border-bottom: 1px solid var(--cr-line); } .cr-section:last-child { border-bottom: 0; } .cr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 30px; } .cr-section-head .cr-section-title { margin-bottom: 0; } .cr-section-title { margin-bottom: 14px; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; } .cr-optional { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--dove-dim); } .cr-field label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--silver-hi); } .cr-field label .cr-optional { margin-left: 8px; } .cr-input { width: 100%; padding: 10px 12px; background: var(--dusk-2); border: 1px solid var(--hairline); border-radius: 10px; color: var(--text); font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease; } .cr-input::placeholder { color: var(--dove-dim); } .cr-input:focus { outline: none; border-color: var(--peep); box-shadow: 0 0 0 3px rgba(154,141,219,.18); } textarea.cr-input { min-height: 84px; line-height: 1.5; resize: vertical; } .cr-grid { display: grid; gap: 14px; } .cr-grid--label { grid-template-columns: 7fr 3fr; } /* label 70%, type 30% */ .cr-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr-gap { margin-top: 16px; } .cr-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--dove-dim); } .cr-empty { font-size: 13px; color: var(--dove-dim); } .cr-tools { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--dove-dim); } .cr-link { padding: 0; background: none; border: 0; color: var(--peep); font-size: 13px; font-weight: 600; } .cr-link:hover { text-decoration: underline; } /* roles */ .cr-role-filter { margin-bottom: 10px; } .cr-roles { display: flex; flex-direction: column; gap: 6px; max-height: 268px; overflow-y: auto; padding-right: 4px; } .cr-role { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--dusk-2); border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; user-select: none; transition: border-color .12s ease, background .12s ease; } .cr-role:hover { border-color: var(--peep-deep); } .cr-role.is-selected { border-color: var(--peep); background: rgba(154,141,219,.14); } .cr-role-check { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; background: var(--dusk); border: 1px solid var(--dove-dim); border-radius: 5px; cursor: pointer; } .cr-role-check:checked { background: var(--peep); border-color: var(--peep); } .cr-role-check:checked::after { content: ''; width: 5px; height: 9px; margin-top: -2px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .cr-role-check:focus-visible { outline: 2px solid var(--peep); outline-offset: 2px; } .cr-role-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--dove-dim); } .cr-role-name { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; } .cr-role-entries { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dove-dim); } .cr-role-entries span { min-width: 44px; } .cr-role-entries .cr-input { width: 74px; padding: 6px 8px; font-size: 13.5px; } .cr-role-entries .cr-input:disabled { opacity: .4; } /* requirements */ .cr-req { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; } .cr-req:last-child { margin-bottom: 0; } /* image */ .cr-drop { padding: 16px; border: 1px dashed var(--hairline); border-radius: 12px; background: var(--wash-soft); } .cr-drop-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .cr-drop-empty span { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; color: var(--dove-dim); } .cr-drop-preview { display: flex; align-items: center; gap: 14px; } .cr-drop-preview img { flex-shrink: 0; width: 104px; height: 60px; object-fit: cover; border: 1px solid var(--hairline); border-radius: 8px; } .cr-file { flex: 1; min-width: 0; } .cr-file strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .cr-file span { font-size: 12px; color: var(--dove-dim); } /* footer */ .cr-foot { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-top: 1px solid var(--cr-line); background: var(--foot-bg); } .cr-msg { flex: 1; min-width: 0; } .cr-msg .claim-msg { margin: 0; padding: 9px 12px; font-size: 13px; } .cr-actions { display: flex; gap: 10px; margin-left: auto; } @media (max-width: 600px) { .wrap { padding: 0 16px; } .list-header { flex-direction: column; align-items: stretch; } .list-header-actions { flex-direction: column; align-items: stretch; } .search-wrap, .search-input { width: 100%; } .server-banner-img, .server-banner-empty { aspect-ratio: 16/7; min-height: 120px; } .server-banner-icon { left: 16px; width: 64px; height: 64px; bottom: -26px; } .server-banner-icon.fallback-icon { font-size: 24px; } .server-banner-nameplate { padding: 24px 16px 12px 92px; } .server-banner-header { margin-bottom: 46px; } } @media (max-width: 600px) { .modal-overlay { padding: 12px; } .cr-head, .cr-foot { padding-left: 18px; padding-right: 18px; } .cr-body { padding: 0 18px; } .cr-grid--three { grid-template-columns: minmax(0, 1fr); } .cr-req { grid-template-columns: minmax(0, 1fr) auto; } .cr-req .req-type-select { grid-column: 1 / -1; } .cr-foot { flex-wrap: wrap; } .cr-msg { flex-basis: 100%; } .cr-msg:empty { display: none; } .cr-actions { width: 100%; } .cr-actions .btn { flex: 1; justify-content: center; } } @media (max-width: 820px) { .rd-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rd-cols--single { grid-template-columns: minmax(0, 1fr); } .rd-tasks { position: static; } } @media (max-width: 600px) { .rd-banner { aspect-ratio: 16 / 7; min-height: 120px; } .rd-avatar { left: 16px; width: 64px; height: 64px; bottom: -32px; border-radius: 14px; } .rd-title { margin-top: 44px; padding: 0; } .rd-chips { margin: 14px 0 20px; } } /* light theme refinements */ /* text colour is inherited as a computed value, so the dark-pinned areas must set it themselves */ :root[data-theme="light"] .raffle-card, :root[data-theme="light"] .server-banner-nameplate, :root[data-theme="light"] .rd-banner-tags { color: var(--text); } :root[data-theme="light"] .rd { --rd-panel: #FFFFFF; --rd-row: #F6F4FB; --rd-line: #DDD8EE; } :root[data-theme="light"] .cr-modal { --cr-line: #DDD8EE; box-shadow: 0 24px 60px rgba(27,23,48,.28); } :root[data-theme="light"] .modal-overlay { background: rgba(27,23,48,.5); } :root[data-theme="light"] .rd-avatar, :root[data-theme="light"] .server-banner-icon, :root[data-theme="light"] .guild-card-icon { box-shadow: 0 4px 14px rgba(27,23,48,.22); } :root[data-theme="light"] .role-mention { color: color-mix(in srgb, var(--role-color, #5865f2) 62%, #000); } :root[data-theme="light"] .feature-card, :root[data-theme="light"] .rd-tasks, :root[data-theme="light"] .wallets-panel, :root[data-theme="light"] .profile-row { box-shadow: 0 1px 2px rgba(27,23,48,.05); } /* theme toggle (in the nav) — shows the mode you'd switch to */ .nav-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--dove); transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--dove-dim); background: var(--wash-soft); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* confirmation dialog (End / Delete / Leave raffle) */ .cr-confirm { max-width: 460px; } .cr-confirm .cr-head { border-bottom: 0; padding-bottom: 6px; } .cr-confirm .cr-body { flex: 0 1 auto; } .cf-body { padding: 4px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--dove); }