| :root {
|
| --bg: #eef8ef;
|
| --bg-deep: #d7edd7;
|
| --surface: rgba(255, 255, 255, 0.75);
|
| --surface-strong: rgba(255, 255, 255, 0.9);
|
| --border: rgba(98, 146, 104, 0.22);
|
| --text: #173622;
|
| --muted: #5d7865;
|
| --primary: #4e9461;
|
| --primary-deep: #2e6a44;
|
| --primary-soft: #e6f4e5;
|
| --accent: #f6b85b;
|
| --danger: #d95b67;
|
| --shadow: 0 24px 70px rgba(53, 98, 62, 0.12);
|
| --radius-lg: 28px;
|
| --radius-md: 20px;
|
| --radius-sm: 14px;
|
| }
|
|
|
| * {
|
| box-sizing: border-box;
|
| }
|
|
|
| html {
|
| scroll-behavior: smooth;
|
| }
|
|
|
| body {
|
| margin: 0;
|
| font-family: "Segoe UI Variable", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
| color: var(--text);
|
| background: linear-gradient(180deg, #f5fbf2 0%, #e7f6e8 35%, #e1f0e0 100%);
|
| min-height: 100vh;
|
| }
|
|
|
| .page-backdrop {
|
| position: fixed;
|
| inset: 0;
|
| pointer-events: none;
|
| background:
|
| radial-gradient(circle at 12% 20%, rgba(246, 184, 91, 0.16), transparent 22%),
|
| radial-gradient(circle at 82% 14%, rgba(112, 188, 128, 0.18), transparent 20%),
|
| radial-gradient(circle at 50% 100%, rgba(120, 180, 139, 0.18), transparent 28%);
|
| }
|
|
|
| img {
|
| display: block;
|
| max-width: 100%;
|
| }
|
|
|
| .shell {
|
| position: relative;
|
| width: min(1200px, calc(100% - 32px));
|
| margin: 0 auto;
|
| padding: 28px 0 44px;
|
| }
|
|
|
| .content-shell {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 24px;
|
| }
|
|
|
| .topbar {
|
| position: sticky;
|
| top: 18px;
|
| z-index: 20;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 20px;
|
| padding: 18px 22px;
|
| margin-bottom: 24px;
|
| border: 1px solid var(--border);
|
| border-radius: 999px;
|
| background: rgba(255, 255, 255, 0.7);
|
| backdrop-filter: blur(14px);
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .brand-block {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| }
|
|
|
| .brand-mark {
|
| width: 52px;
|
| height: 52px;
|
| display: grid;
|
| place-items: center;
|
| border-radius: 18px;
|
| background: linear-gradient(135deg, #63b67c, #88ca99);
|
| color: white;
|
| font-size: 1.4rem;
|
| font-weight: 700;
|
| box-shadow: 0 18px 26px rgba(76, 134, 91, 0.25);
|
| }
|
|
|
| .eyebrow {
|
| margin: 0 0 6px;
|
| color: var(--primary);
|
| font-size: 0.78rem;
|
| letter-spacing: 0.14em;
|
| text-transform: uppercase;
|
| }
|
|
|
| .brand-title,
|
| .hero-card h2,
|
| .glass-card h3,
|
| .login-copy h1,
|
| .login-panel h2 {
|
| margin: 0;
|
| font-family: "Georgia", "STKaiti", "KaiTi", serif;
|
| letter-spacing: 0.02em;
|
| }
|
|
|
| .topnav {
|
| display: flex;
|
| flex-wrap: wrap;
|
| justify-content: flex-end;
|
| gap: 10px;
|
| }
|
|
|
| .topnav a,
|
| .ghost-link {
|
| color: var(--primary-deep);
|
| text-decoration: none;
|
| padding: 10px 14px;
|
| border-radius: 999px;
|
| transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
|
| }
|
|
|
| .topnav a:hover,
|
| .ghost-link:hover {
|
| background: rgba(78, 148, 97, 0.12);
|
| transform: translateY(-1px);
|
| }
|
|
|
| .hero-card,
|
| .glass-card,
|
| .login-panel,
|
| .login-copy {
|
| position: relative;
|
| overflow: hidden;
|
| border: 1px solid var(--border);
|
| border-radius: var(--radius-lg);
|
| background: linear-gradient(180deg, var(--surface-strong), var(--surface));
|
| backdrop-filter: blur(16px);
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .hero-card {
|
| display: flex;
|
| align-items: flex-start;
|
| justify-content: space-between;
|
| gap: 24px;
|
| padding: 30px;
|
| animation: rise-in 0.7s ease both;
|
| }
|
|
|
| .hero-card::after,
|
| .glass-card::after,
|
| .login-panel::after,
|
| .login-copy::after {
|
| content: "";
|
| position: absolute;
|
| inset: auto -12% -50% auto;
|
| width: 180px;
|
| height: 180px;
|
| border-radius: 50%;
|
| background: radial-gradient(circle, rgba(246, 184, 91, 0.18), transparent 70%);
|
| }
|
|
|
| .hero-badges,
|
| .chip-row,
|
| .feature-list,
|
| .action-grid,
|
| .task-status-row {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 10px;
|
| }
|
|
|
| .pill,
|
| .chip,
|
| .status-badge {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 8px;
|
| padding: 8px 12px;
|
| border-radius: 999px;
|
| font-size: 0.92rem;
|
| background: rgba(255, 255, 255, 0.72);
|
| border: 1px solid rgba(78, 148, 97, 0.16);
|
| }
|
|
|
| .status-approved {
|
| background: rgba(78, 148, 97, 0.14);
|
| color: var(--primary-deep);
|
| }
|
|
|
| .status-rejected {
|
| background: rgba(217, 91, 103, 0.14);
|
| color: #9b3144;
|
| }
|
|
|
| .lead,
|
| .muted,
|
| .mini-note,
|
| label span,
|
| .meta-grid span,
|
| .data-table th {
|
| color: var(--muted);
|
| }
|
|
|
| .lead {
|
| font-size: 1.02rem;
|
| line-height: 1.7;
|
| }
|
|
|
| .muted,
|
| .mini-note,
|
| .feedback-box {
|
| line-height: 1.6;
|
| }
|
|
|
| .flash-stack {
|
| display: grid;
|
| gap: 12px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .flash {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| padding: 14px 18px;
|
| border-radius: 18px;
|
| border: 1px solid var(--border);
|
| background: rgba(255, 255, 255, 0.85);
|
| box-shadow: 0 14px 34px rgba(88, 132, 95, 0.08);
|
| }
|
|
|
| .flash-dot {
|
| width: 10px;
|
| height: 10px;
|
| border-radius: 50%;
|
| background: var(--primary);
|
| }
|
|
|
| .flash-error .flash-dot {
|
| background: var(--danger);
|
| }
|
|
|
| .flash-success .flash-dot {
|
| background: #58a46b;
|
| }
|
|
|
| .flash p {
|
| margin: 0;
|
| }
|
|
|
| .card-grid,
|
| .stats-grid,
|
| .task-grid,
|
| .review-grid {
|
| display: grid;
|
| gap: 20px;
|
| }
|
|
|
| .activity-grid {
|
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
| }
|
|
|
| .group-grid,
|
| .review-grid {
|
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
| }
|
|
|
| .task-grid {
|
| grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
|
| }
|
|
|
| .stats-grid {
|
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
| }
|
|
|
| .page-grid,
|
| .two-column-layout {
|
| display: grid;
|
| grid-template-columns: minmax(280px, 360px) 1fr;
|
| gap: 22px;
|
| }
|
|
|
| .admin-activity-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .activity-actions,
|
| .task-editor-list {
|
| display: grid;
|
| gap: 14px;
|
| }
|
|
|
| .activity-catalog-panel {
|
| overflow: hidden;
|
| }
|
|
|
| .activity-catalog-head {
|
| margin-bottom: 20px;
|
| }
|
|
|
| .published-activity-list {
|
| display: grid;
|
| gap: 20px;
|
| }
|
|
|
| .published-activity-card {
|
| position: relative;
|
| display: grid;
|
| gap: 18px;
|
| padding: 24px;
|
| border-radius: 30px;
|
| background:
|
| radial-gradient(circle at 100% 0%, rgba(241, 193, 107, 0.18), transparent 28%),
|
| linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(236, 248, 239, 0.9));
|
| border: 1px solid rgba(78, 148, 97, 0.16);
|
| box-shadow: 0 20px 38px rgba(86, 127, 93, 0.12);
|
| }
|
|
|
| .published-activity-card::before {
|
| content: "";
|
| position: absolute;
|
| inset: 0 auto auto 24px;
|
| width: 120px;
|
| height: 5px;
|
| border-radius: 999px;
|
| background: linear-gradient(90deg, rgba(96, 175, 114, 0.9), rgba(241, 193, 107, 0.82));
|
| }
|
|
|
| .published-activity-hero,
|
| .published-settings-form,
|
| .published-delete-form,
|
| .published-toggle-grid {
|
| display: grid;
|
| gap: 16px;
|
| }
|
|
|
| .published-activity-hero {
|
| grid-template-columns: minmax(0, 1fr) auto;
|
| align-items: start;
|
| }
|
|
|
| .published-activity-title-wrap {
|
| min-width: 0;
|
| }
|
|
|
| .published-activity-title {
|
| margin: 4px 0 0;
|
| font-size: 1.8rem;
|
| line-height: 1.1;
|
| }
|
|
|
| .published-activity-badges {
|
| display: flex;
|
| flex-wrap: wrap;
|
| justify-content: flex-end;
|
| gap: 10px;
|
| }
|
|
|
| .published-activity-metrics {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
| gap: 14px;
|
| }
|
|
|
| .activity-metric-card {
|
| min-width: 0;
|
| padding: 16px 18px;
|
| border-radius: 22px;
|
| border: 1px solid rgba(78, 148, 97, 0.12);
|
| background: rgba(255, 255, 255, 0.8);
|
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
|
| }
|
|
|
| .activity-metric-card span {
|
| display: block;
|
| font-size: 0.8rem;
|
| letter-spacing: 0.08em;
|
| text-transform: uppercase;
|
| color: var(--muted);
|
| }
|
|
|
| .activity-metric-card strong {
|
| display: block;
|
| margin-top: 8px;
|
| line-height: 1.45;
|
| color: var(--primary-deep);
|
| font-size: 1rem;
|
| word-break: break-word;
|
| }
|
|
|
| .published-settings-form {
|
| padding: 18px;
|
| border-radius: 26px;
|
| background: linear-gradient(180deg, rgba(247, 252, 248, 0.94), rgba(229, 244, 233, 0.88));
|
| border: 1px solid rgba(78, 148, 97, 0.14);
|
| }
|
|
|
| .published-toggle-grid {
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| }
|
|
|
| .published-toggle-card {
|
| display: grid;
|
| grid-template-columns: minmax(0, 1fr) auto;
|
| align-items: center;
|
| gap: 16px;
|
| padding: 16px 18px;
|
| border-radius: 22px;
|
| background: rgba(255, 255, 255, 0.82);
|
| border: 1px solid rgba(78, 148, 97, 0.12);
|
| }
|
|
|
| .published-toggle-copy {
|
| display: grid;
|
| gap: 6px;
|
| min-width: 0;
|
| }
|
|
|
| .published-toggle-copy strong {
|
| font-size: 1rem;
|
| color: var(--primary-deep);
|
| }
|
|
|
| .published-toggle-copy span {
|
| font-size: 0.9rem;
|
| line-height: 1.5;
|
| color: var(--muted);
|
| }
|
|
|
| .published-toggle-card input {
|
| width: 20px;
|
| height: 20px;
|
| padding: 0;
|
| margin: 0;
|
| flex: 0 0 auto;
|
| }
|
|
|
| .published-action-row {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 14px;
|
| }
|
|
|
| .published-action-row .btn {
|
| flex: 1 1 220px;
|
| justify-content: center;
|
| }
|
|
|
| .published-delete-form .btn {
|
| width: 100%;
|
| justify-content: center;
|
| }
|
|
|
| .task-editor-card {
|
| gap: 16px;
|
| }
|
|
|
| .editor-preview-grid {
|
| display: grid;
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| gap: 16px;
|
| }
|
|
|
| .editor-thumb,
|
| .empty-thumb {
|
| width: 100%;
|
| aspect-ratio: 4 / 3;
|
| object-fit: cover;
|
| border-radius: 20px;
|
| border: 1px solid rgba(78, 148, 97, 0.16);
|
| background: rgba(255, 255, 255, 0.6);
|
| }
|
|
|
| .empty-thumb {
|
| display: grid;
|
| place-items: center;
|
| color: var(--muted);
|
| }
|
|
|
| .align-end-checkbox {
|
| align-self: end;
|
| }
|
|
|
| @media (max-width: 720px) {
|
| .editor-preview-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
|
|
| .users-admin-grid,
|
| .presence-admin-grid,
|
| .review-live-grid {
|
| grid-template-columns: 1fr 1fr;
|
| }
|
|
|
| .bulk-toolbar {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr auto;
|
| gap: 14px;
|
| margin-bottom: 18px;
|
| align-items: end;
|
| }
|
|
|
| .leaderboard-hero {
|
| align-items: stretch;
|
| }
|
|
|
| .hero-split-main {
|
| display: grid;
|
| gap: 14px;
|
| flex: 1 1 55%;
|
| }
|
|
|
| .hero-side-rank {
|
| width: min(420px, 100%);
|
| padding: 18px 20px;
|
| }
|
|
|
| .inset-rank-card {
|
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(231, 248, 233, 0.82));
|
| }
|
|
|
| .compact-head {
|
| margin-bottom: 12px;
|
| }
|
|
|
| .task-carousel-shell {
|
| display: grid;
|
| gap: 18px;
|
| }
|
|
|
| .task-carousel-head {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 14px;
|
| }
|
|
|
| .carousel-controls {
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| }
|
|
|
| .task-flip-book {
|
| position: relative;
|
| min-height: 720px;
|
| }
|
|
|
| .task-page {
|
| position: absolute;
|
| inset: 0;
|
| opacity: 0;
|
| pointer-events: none;
|
| transform: perspective(1200px) rotateY(10deg) translateX(24px) scale(0.98);
|
| transition: opacity 0.45s ease, transform 0.45s ease;
|
| }
|
|
|
| .task-page.is-active {
|
| opacity: 1;
|
| pointer-events: auto;
|
| transform: perspective(1200px) rotateY(0deg) translateX(0) scale(1);
|
| z-index: 2;
|
| }
|
|
|
| .task-page.is-left {
|
| transform: perspective(1200px) rotateY(-12deg) translateX(-26px) scale(0.97);
|
| }
|
|
|
| .task-page-inner {
|
| display: grid;
|
| gap: 18px;
|
| }
|
|
|
| .task-page-grid {
|
| display: grid;
|
| grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
| gap: 22px;
|
| }
|
|
|
| .task-page-content {
|
| display: grid;
|
| gap: 14px;
|
| align-content: start;
|
| }
|
|
|
| .task-page-media {
|
| display: grid;
|
| gap: 12px;
|
| }
|
|
|
| .is-hidden {
|
| display: none !important;
|
| }
|
|
|
| .clue-modal {
|
| position: fixed;
|
| inset: 0;
|
| display: none;
|
| align-items: center;
|
| justify-content: center;
|
| z-index: 50;
|
| padding: 24px;
|
| }
|
|
|
| .clue-modal.is-open {
|
| display: flex;
|
| }
|
|
|
| .clue-modal-backdrop {
|
| position: absolute;
|
| inset: 0;
|
| background: linear-gradient(135deg, rgba(24, 57, 34, 0.78), rgba(76, 148, 97, 0.48), rgba(246, 184, 91, 0.42));
|
| backdrop-filter: blur(16px);
|
| }
|
|
|
| .clue-modal-dialog {
|
| position: relative;
|
| z-index: 1;
|
| width: min(760px, 100%);
|
| display: grid;
|
| gap: 12px;
|
| }
|
|
|
| .clue-close-btn {
|
| justify-self: end;
|
| }
|
|
|
| .clue-gradient-panel {
|
| padding: 18px;
|
| border-radius: 30px;
|
| background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(223, 245, 228, 0.86), rgba(255, 241, 214, 0.9));
|
| box-shadow: 0 30px 90px rgba(20, 51, 29, 0.28);
|
| }
|
|
|
| .clue-gradient-panel img {
|
| width: 100%;
|
| border-radius: 24px;
|
| max-height: 72vh;
|
| object-fit: contain;
|
| background: rgba(255, 255, 255, 0.72);
|
| }
|
|
|
| .review-live-grid .review-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .presence-item,
|
| .activity-actions {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 12px;
|
| }
|
|
|
| .inset-rank-card::after,
|
| .hero-side-rank::after {
|
| display: none;
|
| }
|
|
|
| @media (max-width: 1080px) {
|
| .leaderboard-hero,
|
| .task-page-grid,
|
| .users-admin-grid,
|
| .presence-admin-grid,
|
| .review-live-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .published-toggle-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .hero-side-rank {
|
| width: 100%;
|
| }
|
| }
|
|
|
| @media (max-width: 720px) {
|
| .bulk-toolbar,
|
| .task-carousel-head,
|
| .carousel-controls,
|
| .presence-item,
|
| .activity-actions,
|
| .published-activity-hero,
|
| .published-toggle-card,
|
| .published-action-row {
|
| grid-template-columns: 1fr;
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .published-activity-metrics,
|
| .published-toggle-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .published-activity-badges {
|
| justify-content: flex-start;
|
| }
|
|
|
| .task-flip-book {
|
| min-height: 900px;
|
| }
|
| }
|
|
|
| .image-library-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
| gap: 18px;
|
| }
|
|
|
| .image-library-card {
|
| display: grid;
|
| gap: 14px;
|
| padding: 16px;
|
| }
|
|
|
| .image-library-thumb {
|
| width: 100%;
|
| aspect-ratio: 4 / 3;
|
| object-fit: cover;
|
| border-radius: 22px;
|
| background: rgba(255, 255, 255, 0.74);
|
| border: 1px solid rgba(78, 148, 97, 0.14);
|
| }
|
|
|
| .image-library-body {
|
| display: grid;
|
| gap: 12px;
|
| }
|
|
|
| .image-library-path {
|
| word-break: break-all;
|
| }
|
|
|
| .image-library-actions {
|
| align-items: center;
|
| }
|
|
|
| .compact-stack-list {
|
| gap: 8px;
|
| }
|
|
|
| .compact-stack-item {
|
| padding: 10px 12px;
|
| }
|
|
|
|
|
|
|
|
|
| |
| .glass-card, |
| .form-panel, |
| .table-panel, |
| .quick-panel { |
| padding: 24px; |
| animation: rise-in 0.7s ease both; |
| } |
|
|
| .activity-card h3, |
| .task-card h3, |
| .review-card h3, |
| .group-card h3, |
| .stat-card strong { |
| margin: 0 0 10px; |
| } |
|
|
| .meta-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| margin: 18px 0; |
| } |
|
|
| .meta-grid strong { |
| display: block; |
| color: var(--primary-deep); |
| font-size: 1.05rem; |
| } |
|
|
| .progress-line { |
| width: 100%; |
| height: 12px; |
| margin: 18px 0 12px; |
| border-radius: 999px; |
| overflow: hidden; |
| background: rgba(78, 148, 97, 0.12); |
| } |
|
|
| .progress-line div { |
| height: 100%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, #62b176, #8ac798, #f1c16b); |
| } |
|
|
| .card-footer, |
| .card-topline, |
| .section-head, |
| .stack-item, |
| .builder-title-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .section-head { |
| margin-bottom: 18px; |
| } |
|
|
| .tight-head { |
| margin-top: 8px; |
| } |
|
|
| .stack-list { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .stack-item { |
| padding: 14px 16px; |
| border-radius: 18px; |
| background: rgba(255, 255, 255, 0.62); |
| border: 1px solid rgba(78, 148, 97, 0.14); |
| } |
|
|
| .stack-item-block { |
| align-items: flex-start; |
| } |
|
|
| .form-stack, |
| .compact-form { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .form-grid { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .cols-2 { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .cols-3 { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .full-span { |
| grid-column: 1 / -1; |
| } |
|
|
| label { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| input, |
| select, |
| textarea, |
| button { |
| font: inherit; |
| } |
|
|
| input, |
| select, |
| textarea { |
| width: 100%; |
| padding: 14px 16px; |
| border-radius: 16px; |
| border: 1px solid rgba(91, 141, 99, 0.22); |
| background: rgba(255, 255, 255, 0.88); |
| color: var(--text); |
| transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease; |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus { |
| outline: none; |
| border-color: rgba(78, 148, 97, 0.5); |
| box-shadow: 0 0 0 4px rgba(78, 148, 97, 0.12); |
| transform: translateY(-1px); |
| } |
|
|
| textarea { |
| resize: vertical; |
| min-height: 120px; |
| } |
|
|
| button { |
| padding: 12px 16px; |
| border-radius: 16px; |
| border: 1px solid rgba(91, 141, 99, 0.18); |
| background: rgba(255, 255, 255, 0.88); |
| color: var(--text); |
| cursor: pointer; |
| } |
|
|
| .btn, |
| .full-width-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| padding: 13px 18px; |
| border-radius: 18px; |
| border: 1px solid transparent; |
| text-decoration: none; |
| transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, color 0.24s ease; |
| } |
|
|
| .btn:hover, |
| .full-width-btn:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, #63b67c, #7bc58f); |
| color: #fff; |
| box-shadow: 0 16px 28px rgba(76, 134, 91, 0.22); |
| } |
|
|
| .btn-secondary { |
| background: rgba(230, 244, 229, 0.92); |
| border-color: rgba(78, 148, 97, 0.16); |
| color: var(--primary-deep); |
| } |
|
|
| .btn-ghost { |
| background: rgba(255, 255, 255, 0.78); |
| border-color: rgba(78, 148, 97, 0.14); |
| color: var(--primary-deep); |
| } |
|
|
| .btn-danger { |
| background: linear-gradient(135deg, #de6d78, #d95b67); |
| color: #fff; |
| box-shadow: 0 16px 28px rgba(186, 70, 88, 0.18); |
| } |
|
|
| .small-btn { |
| padding: 10px 14px; |
| font-size: 0.92rem; |
| } |
|
|
| .full-width-btn { |
| width: 100%; |
| } |
|
|
| .spring-copy { |
| min-height: 520px; |
| background: |
| radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.88), transparent 42%), |
| linear-gradient(145deg, rgba(125, 195, 137, 0.22), rgba(246, 184, 91, 0.18)); |
| } |
|
|
| .admin-copy { |
| min-height: 420px; |
| } |
|
|
| .feature-list { |
| margin-top: 26px; |
| } |
|
|
| .feature-list span, |
| .info-box, |
| .feedback-box { |
| padding: 10px 14px; |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.62); |
| border: 1px solid rgba(78, 148, 97, 0.12); |
| } |
|
|
| .panel-glow { |
| position: absolute; |
| inset: auto auto -50px -30px; |
| width: 140px; |
| height: 140px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(246, 184, 91, 0.25), transparent 68%); |
| } |
|
|
| .task-card { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| } |
|
|
| .task-card-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 14px; |
| } |
|
|
| .task-description { |
| min-height: 50px; |
| } |
|
|
| .task-media-wrap, |
| .submission-preview { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .task-media, |
| .submission-preview img, |
| .review-image { |
| width: 100%; |
| aspect-ratio: 4 / 3; |
| object-fit: cover; |
| border-radius: 22px; |
| border: 1px solid rgba(78, 148, 97, 0.16); |
| box-shadow: 0 12px 30px rgba(86, 127, 93, 0.12); |
| } |
|
|
| .clue-toggle { |
| width: 48px; |
| height: 48px; |
| display: grid; |
| place-items: center; |
| border: none; |
| border-radius: 18px; |
| font-size: 1.2rem; |
| background: rgba(246, 184, 91, 0.14); |
| color: #c88929; |
| transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; |
| } |
|
|
| .clue-toggle.is-ready { |
| background: rgba(246, 184, 91, 0.26); |
| box-shadow: 0 14px 26px rgba(233, 173, 75, 0.22); |
| } |
|
|
| .clue-toggle.is-clue-view { |
| transform: rotate(-10deg) scale(1.04); |
| } |
|
|
| .release-note { |
| font-size: 0.88rem; |
| color: var(--muted); |
| } |
|
|
| .upload-form, |
| .inline-form { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| align-items: end; |
| } |
|
|
| .inline-form-wide { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .visibility-form { |
| justify-content: flex-end; |
| } |
|
|
| .upload-label { |
| flex: 1 1 220px; |
| } |
|
|
| .feedback-box { |
| color: var(--text); |
| } |
|
|
| .leaderboard-card { |
| padding: 26px; |
| } |
|
|
| .rank-table-wrap, |
| .table-shell { |
| overflow-x: auto; |
| } |
|
|
| .rank-table, |
| .data-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| .rank-table th, |
| .rank-table td, |
| .data-table th, |
| .data-table td { |
| padding: 14px 12px; |
| border-bottom: 1px solid rgba(78, 148, 97, 0.12); |
| text-align: left; |
| } |
|
|
| .rank-table tbody tr:hover, |
| .data-table tbody tr:hover { |
| background: rgba(78, 148, 97, 0.05); |
| } |
|
|
| .stat-card { |
| min-height: 130px; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| } |
|
|
| .stat-card strong { |
| font-size: 2rem; |
| color: var(--primary-deep); |
| } |
|
|
| .info-box { |
| margin-top: 18px; |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .member-list { |
| display: grid; |
| gap: 10px; |
| margin: 16px 0; |
| } |
|
|
| .member-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 12px 14px; |
| border-radius: 16px; |
| background: rgba(255, 255, 255, 0.62); |
| } |
|
|
| .checkbox-row { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .checkbox-row input { |
| width: 18px; |
| height: 18px; |
| padding: 0; |
| } |
|
|
| .compact-checkbox { |
| padding: 0; |
| } |
|
|
| .task-builder { |
| display: grid; |
| gap: 16px; |
| } |
|
|
| .task-builder-card { |
| padding: 18px; |
| border-radius: 22px; |
| background: rgba(255, 255, 255, 0.64); |
| border: 1px dashed rgba(78, 148, 97, 0.24); |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .review-card { |
| display: grid; |
| gap: 14px; |
| } |
|
|
| .review-filter-form { |
| align-items: end; |
| } |
|
|
| .review-filter-action { |
| justify-content: end; |
| } |
|
|
| .empty-state { |
| padding: 32px; |
| border-radius: var(--radius-lg); |
| background: rgba(255, 255, 255, 0.68); |
| border: 1px dashed rgba(78, 148, 97, 0.24); |
| text-align: center; |
| } |
|
|
| .pulse-highlight { |
| animation: pulse-glow 1.8s ease; |
| } |
|
|
| @keyframes rise-in { |
| from { |
| opacity: 0; |
| transform: translateY(18px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes pulse-glow { |
| 0% { |
| box-shadow: var(--shadow); |
| } |
| 35% { |
| box-shadow: 0 0 0 8px rgba(246, 184, 91, 0.18), var(--shadow); |
| } |
| 100% { |
| box-shadow: var(--shadow); |
| } |
| } |
|
|
| @media (max-width: 980px) { |
| .topbar, |
| .hero-card, |
| .page-grid, |
| .two-column-layout, |
| .login-page, |
| .compact-login-page, |
| .admin-activity-grid { |
| grid-template-columns: 1fr; |
| flex-direction: column; |
| } |
|
|
| .topbar { |
| border-radius: 28px; |
| align-items: flex-start; |
| } |
|
|
| .topnav { |
| width: 100%; |
| justify-content: flex-start; |
| } |
|
|
| .login-copy { |
| min-height: auto; |
| } |
| } |
|
|
| @media (max-width: 720px) { |
| .shell { |
| width: min(100% - 20px, 1200px); |
| padding-top: 18px; |
| } |
|
|
| .topbar, |
| .hero-card, |
| .glass-card, |
| .login-copy, |
| .login-panel { |
| padding: 20px; |
| } |
|
|
| .card-footer, |
| .card-topline, |
| .section-head, |
| .stack-item, |
| .builder-title-row, |
| .task-card-head, |
| .task-status-row { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .cols-2, |
| .cols-3, |
| .form-grid, |
| .meta-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .btn, |
| .full-width-btn { |
| width: 100%; |
| } |
| }
|
|
|
| |
| .login-body { |
| min-height: 100vh; |
| } |
|
|
| .login-page { |
| width: min(1200px, calc(100% - 32px)); |
| min-height: 100vh; |
| margin: 0 auto; |
| padding: 28px 0 44px; |
| display: grid; |
| grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); |
| gap: 24px; |
| align-items: stretch; |
| } |
|
|
| .compact-login-page { |
| grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 0.85fr); |
| max-width: 1040px; |
| } |
|
|
| .login-copy, |
| .login-panel { |
| padding: 30px; |
| } |
|
|
| .login-copy { |
| display: grid; |
| gap: 18px; |
| align-content: center; |
| } |
|
|
| .login-panel { |
| display: grid; |
| gap: 16px; |
| align-content: start; |
| } |
|
|
| .admin-panel { |
| align-content: center; |
| } |
|
|
| .activity-actions { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| @media (max-width: 980px) { |
| .login-page, |
| .compact-login-page { |
| width: min(100% - 24px, 1200px); |
| padding: 20px 0 36px; |
| grid-template-columns: 1fr; |
| } |
|
|
| .login-copy, |
| .login-panel { |
| padding: 24px; |
| } |
| } |
| |
| input[type="checkbox"], |
| input[type="radio"] { |
| width: 18px; |
| height: 18px; |
| padding: 0; |
| margin: 0; |
| border-radius: 6px; |
| accent-color: var(--primary); |
| box-shadow: none; |
| transform: none; |
| flex: 0 0 auto; |
| } |
|
|
| input[type="checkbox"]:focus, |
| input[type="radio"]:focus { |
| outline: 2px solid rgba(78, 148, 97, 0.24); |
| outline-offset: 2px; |
| box-shadow: none; |
| } |
|
|
| input[type="file"] { |
| padding: 10px 12px; |
| border-style: dashed; |
| background: rgba(255, 255, 255, 0.8); |
| cursor: pointer; |
| } |
|
|
| input[type="file"]::file-selector-button { |
| margin-right: 12px; |
| padding: 9px 14px; |
| border: 0; |
| border-radius: 999px; |
| background: rgba(78, 148, 97, 0.12); |
| color: var(--primary-deep); |
| cursor: pointer; |
| } |
|
|
| .table-checkbox { |
| justify-self: center; |
| } |
|
|
| .table-inline-form { |
| min-width: 220px; |
| } |
|
|
| .carousel-controls-bottom { |
| display: none; |
| } |
|
|
| .topnav a { |
| flex: 0 0 auto; |
| white-space: nowrap; |
| } |
|
|
| @media (max-width: 980px) { |
| .topbar { |
| gap: 14px; |
| } |
|
|
| .topnav { |
| width: 100%; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| overflow-y: hidden; |
| justify-content: flex-start; |
| padding: 0 4px 4px; |
| margin: 0 -4px -4px; |
| -webkit-overflow-scrolling: touch; |
| scrollbar-width: none; |
| } |
|
|
| .topnav::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .published-activity-hero { |
| grid-template-columns: 1fr; |
| } |
|
|
| .published-activity-badges { |
| justify-content: flex-start; |
| } |
| } |
|
|
| @media (max-width: 720px) { |
| body { |
| overflow-x: hidden; |
| } |
|
|
| .shell { |
| width: min(100% - 16px, 1200px); |
| padding-top: 14px; |
| } |
|
|
| .topbar { |
| position: static; |
| padding: 14px 16px; |
| margin-bottom: 18px; |
| border-radius: 24px; |
| } |
|
|
| .brand-mark { |
| width: 44px; |
| height: 44px; |
| font-size: 1.2rem; |
| } |
|
|
| .brand-title { |
| font-size: 1.08rem; |
| } |
|
|
| .topnav { |
| gap: 8px; |
| } |
|
|
| .topnav a, |
| .ghost-link { |
| padding: 9px 12px; |
| font-size: 0.92rem; |
| } |
|
|
| .hero-card, |
| .glass-card, |
| .login-copy, |
| .login-panel { |
| padding: 18px; |
| border-radius: 22px; |
| } |
|
|
| .hero-card h2, |
| .login-copy h1, |
| .login-panel h2 { |
| font-size: 1.62rem; |
| line-height: 1.18; |
| } |
|
|
| .lead { |
| font-size: 0.96rem; |
| line-height: 1.65; |
| } |
|
|
| .card-topline .status-badge, |
| .card-topline .eyebrow, |
| .card-footer .mini-note, |
| .section-head .mini-note, |
| .task-status-row .status-badge, |
| .task-status-row .mini-note, |
| .hero-badges, |
| .chip-row { |
| align-self: flex-start; |
| } |
|
|
| .bulk-toolbar, |
| .inline-form, |
| .table-inline-form, |
| .upload-form, |
| .task-carousel-head { |
| grid-template-columns: 1fr; |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .carousel-controls { |
| width: 100%; |
| justify-content: space-between; |
| gap: 8px; |
| flex-wrap: nowrap; |
| } |
|
|
| .carousel-controls .btn { |
| flex: 1 1 0; |
| min-width: 0; |
| } |
|
|
| .carousel-controls .mini-note { |
| flex: 0 0 auto; |
| align-self: center; |
| text-align: center; |
| } |
|
|
| .carousel-controls-bottom { |
| display: flex; |
| } |
|
|
| .table-shell, |
| .rank-table-wrap { |
| margin-inline: -18px; |
| padding: 0 18px 4px; |
| } |
|
|
| .data-table, |
| .rank-table { |
| min-width: 560px; |
| font-size: 0.92rem; |
| } |
|
|
| .rank-table th, |
| .rank-table td, |
| .data-table th, |
| .data-table td { |
| padding: 12px 10px; |
| white-space: nowrap; |
| } |
|
|
| .activity-grid { |
| grid-template-columns: 1fr; |
| gap: 16px; |
| } |
|
|
| .activity-card > .muted { |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| } |
|
|
| .activity-card .meta-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| margin: 14px 0; |
| } |
|
|
| .member-row { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .published-activity-card { |
| padding: 20px 18px; |
| border-radius: 24px; |
| } |
|
|
| .published-activity-card::before { |
| left: 18px; |
| width: 84px; |
| } |
|
|
| .published-activity-title { |
| font-size: 1.45rem; |
| } |
|
|
| .published-activity-metrics { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .activity-metric-card { |
| padding: 14px; |
| border-radius: 18px; |
| } |
|
|
| .task-carousel-shell { |
| gap: 14px; |
| overflow: hidden; |
| } |
|
|
| .task-flip-book { |
| position: static; |
| min-height: 0; |
| height: auto; |
| overflow: visible; |
| transition: none; |
| } |
|
|
| .task-page { |
| position: relative; |
| inset: auto; |
| display: none; |
| width: 100%; |
| opacity: 1; |
| pointer-events: auto; |
| transform: none; |
| transition: none; |
| will-change: auto; |
| } |
|
|
| .task-page.is-active { |
| display: block; |
| z-index: auto; |
| } |
|
|
| .task-page.is-left { |
| transform: none; |
| } |
|
|
| .task-page-grid { |
| grid-template-columns: 1fr; |
| gap: 16px; |
| } |
|
|
| .task-page-content, |
| .task-page-inner { |
| gap: 12px; |
| } |
|
|
| .task-description { |
| min-height: 0; |
| } |
|
|
| .task-media, |
| .submission-preview img, |
| .review-image { |
| aspect-ratio: auto; |
| max-height: 48vh; |
| } |
|
|
| .clue-toggle { |
| width: 42px; |
| height: 42px; |
| border-radius: 16px; |
| } |
|
|
| .clue-modal { |
| padding: 16px; |
| } |
|
|
| .clue-gradient-panel { |
| padding: 12px; |
| border-radius: 22px; |
| } |
|
|
| .clue-gradient-panel img { |
| max-height: 70dvh; |
| border-radius: 18px; |
| } |
|
|
| .review-card .action-grid { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .login-body { |
| min-height: 100dvh; |
| } |
|
|
| .login-page { |
| width: min(100% - 16px, 1200px); |
| min-height: 100dvh; |
| padding: 16px 0 24px; |
| gap: 16px; |
| align-content: start; |
| } |
|
|
| .login-panel { |
| order: 1; |
| gap: 14px; |
| } |
|
|
| .login-copy { |
| order: 2; |
| gap: 14px; |
| min-height: auto; |
| align-content: start; |
| } |
|
|
| .spring-copy, |
| .admin-copy, |
| .admin-panel { |
| min-height: auto; |
| align-content: start; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| .published-activity-metrics { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero-side-rank { |
| padding: 16px; |
| } |
|
|
| .task-page { |
| transform: none; |
| } |
|
|
| .task-page.is-left { |
| transform: none; |
| } |
| }
|
|
|
|
|
