| :root { |
| color-scheme: light dark; |
| --font-sans: "Manrope", "Noto Sans SC", sans-serif; |
| --font-mono: "IBM Plex Mono", monospace; |
|
|
| --bg: #f4f0e8; |
| --bg-2: #efe8df; |
| --surface: rgba(255, 252, 247, 0.74); |
| --surface-strong: rgba(255, 255, 255, 0.88); |
| --surface-soft: rgba(255, 255, 255, 0.52); |
| --line: rgba(27, 31, 35, 0.08); |
| --line-strong: rgba(27, 31, 35, 0.14); |
| --text: #15191d; |
| --muted: rgba(21, 25, 29, 0.62); |
| --muted-strong: rgba(21, 25, 29, 0.78); |
| --accent: #0e6b67; |
| --accent-soft: rgba(14, 107, 103, 0.12); |
| --accent-strong: #0b5a57; |
| --accent-2: #ae6f48; |
| --warning: #c99743; |
| --danger: #c45b57; |
| --success: #2f7d58; |
| --shadow-xl: 0 26px 80px rgba(25, 32, 37, 0.14); |
| --shadow-lg: 0 16px 44px rgba(25, 32, 37, 0.1); |
| --shadow-sm: 0 8px 22px rgba(25, 32, 37, 0.06); |
| --radius-shell: 34px; |
| --radius-card: 26px; |
| --radius-panel: 22px; |
| --radius-button: 16px; |
| --radius-pill: 999px; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| --bg: #0c1015; |
| --bg-2: #131821; |
| --surface: rgba(18, 25, 33, 0.74); |
| --surface-strong: rgba(19, 27, 36, 0.92); |
| --surface-soft: rgba(255, 255, 255, 0.05); |
| --line: rgba(255, 255, 255, 0.07); |
| --line-strong: rgba(255, 255, 255, 0.12); |
| --text: #eef2f6; |
| --muted: rgba(238, 242, 246, 0.62); |
| --muted-strong: rgba(238, 242, 246, 0.8); |
| --accent: #7cd7d1; |
| --accent-soft: rgba(124, 215, 209, 0.12); |
| --accent-strong: #8de6db; |
| --accent-2: #d39b70; |
| --warning: #d2ab5e; |
| --danger: #f08e86; |
| --success: #77d49d; |
| --shadow-xl: 0 26px 80px rgba(0, 0, 0, 0.42); |
| --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.34); |
| --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.22); |
| } |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| min-height: 100%; |
| background: |
| radial-gradient(circle at 14% 12%, rgba(124, 215, 209, 0.22), transparent 24%), |
| radial-gradient(circle at 88% 18%, rgba(211, 155, 112, 0.14), transparent 26%), |
| radial-gradient(circle at 50% 86%, rgba(124, 215, 209, 0.08), transparent 30%), |
| linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); |
| color: var(--text); |
| font-family: var(--font-sans); |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| body { |
| position: relative; |
| overflow-x: hidden; |
| } |
|
|
| button, |
| input, |
| textarea, |
| select { |
| font: inherit; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| .page-shell { |
| position: relative; |
| min-height: 100vh; |
| isolation: isolate; |
| } |
|
|
| .ambient { |
| position: fixed; |
| inset: auto; |
| width: 46vw; |
| height: 46vw; |
| border-radius: 50%; |
| filter: blur(70px); |
| opacity: 0.48; |
| z-index: -1; |
| animation: floatGlow 22s ease-in-out infinite; |
| pointer-events: none; |
| } |
|
|
| .ambient-one { |
| top: -16vw; |
| left: -10vw; |
| background: rgba(124, 215, 209, 0.2); |
| } |
|
|
| .ambient-two { |
| right: -8vw; |
| top: 28vh; |
| background: rgba(211, 155, 112, 0.12); |
| animation-delay: -8s; |
| } |
|
|
| .ambient-three { |
| right: 18vw; |
| bottom: -20vw; |
| background: rgba(124, 215, 209, 0.1); |
| animation-delay: -14s; |
| } |
|
|
| .layout, |
| .admin-layout { |
| width: min(1520px, calc(100% - 32px)); |
| margin: 0 auto; |
| padding: 24px 0 40px; |
| } |
|
|
| .card-surface, |
| .hero-card, |
| .admin-card, |
| .modal-card { |
| position: relative; |
| border: 1px solid var(--line); |
| background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%); |
| box-shadow: var(--shadow-xl); |
| backdrop-filter: blur(18px) saturate(135%); |
| } |
|
|
| .card-surface::before, |
| .hero-card::before, |
| .admin-card::before, |
| .modal-card::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| border-radius: inherit; |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.04)); |
| pointer-events: none; |
| } |
|
|
| .hero-card, |
| .card-surface, |
| .admin-card, |
| .modal-card { |
| border-radius: var(--radius-card); |
| } |
|
|
| .brand-mark { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| min-height: 42px; |
| padding: 0 14px; |
| border-radius: var(--radius-pill); |
| background: var(--surface-soft); |
| border: 1px solid var(--line); |
| color: var(--muted-strong); |
| font-weight: 700; |
| } |
|
|
| .brand-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); |
| box-shadow: 0 0 0 6px rgba(124, 215, 209, 0.08); |
| } |
|
|
| .ghost-link, |
| .pill-button, |
| .primary-button, |
| .secondary-button, |
| .danger-button, |
| .icon-button, |
| .task-delete { |
| transition: |
| transform 180ms cubic-bezier(0.22, 1, 0.36, 1), |
| background 180ms ease, |
| border-color 180ms ease, |
| color 180ms ease, |
| box-shadow 180ms ease, |
| opacity 180ms ease; |
| } |
|
|
| .ghost-link, |
| .pill-button, |
| .primary-button, |
| .secondary-button, |
| .danger-button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| min-height: 42px; |
| padding: 0 16px; |
| border-radius: var(--radius-button); |
| border: 1px solid var(--line); |
| background: var(--surface-soft); |
| color: var(--text); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .ghost-link:hover, |
| .pill-button:hover, |
| .primary-button:hover, |
| .secondary-button:hover, |
| .danger-button:hover, |
| .icon-button:hover, |
| .task-delete:hover { |
| transform: translateY(-1px) scale(1.01); |
| } |
|
|
| .pill-button.accent, |
| .primary-button { |
| background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); |
| border-color: transparent; |
| color: #f8fbfb; |
| } |
|
|
| .pill-button.accent-soft { |
| background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(124, 215, 209, 0.08) 100%); |
| color: var(--text); |
| } |
|
|
| .secondary-button { |
| background: rgba(255, 255, 255, 0.05); |
| } |
|
|
| .danger-button { |
| background: rgba(196, 91, 87, 0.12); |
| border-color: rgba(196, 91, 87, 0.24); |
| color: var(--danger); |
| } |
|
|
| .icon-button { |
| width: 42px; |
| height: 42px; |
| border-radius: 15px; |
| border: 1px solid var(--line); |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%); |
| color: var(--text); |
| box-shadow: var(--shadow-sm); |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.28rem; |
| } |
|
|
| .icon-button.muted { |
| font-size: 1.44rem; |
| } |
|
|
| .eyebrow, |
| .section-kicker, |
| .column-label, |
| .modal-kicker { |
| margin: 0; |
| font-size: 0.76rem; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--muted); |
| font-weight: 700; |
| } |
|
|
| .section-header, |
| .hero-topbar, |
| .column-header, |
| .admin-card-head, |
| .action-group, |
| .column-actions, |
| .task-main, |
| .form-actions { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .section-header, |
| .hero-topbar, |
| .admin-card-head { |
| justify-content: space-between; |
| gap: 18px; |
| } |
|
|
| .section-header h2, |
| .admin-hero h1, |
| .admin-card h2, |
| .modal-head h3 { |
| margin: 4px 0 0; |
| font-family: var(--font-sans); |
| font-weight: 800; |
| letter-spacing: -0.04em; |
| } |
|
|
| .section-note, |
| .admin-copy, |
| .admin-card-copy { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.62; |
| } |
|
|
| .hero-card { |
| overflow: hidden; |
| } |
|
|
| .hero-card::after { |
| content: ""; |
| position: absolute; |
| inset: auto -12% -18% auto; |
| width: 280px; |
| height: 280px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(124, 215, 209, 0.18), transparent 72%); |
| pointer-events: none; |
| } |
|
|
| .clock-wrap { |
| display: grid; |
| place-items: center; |
| gap: 10px; |
| text-align: center; |
| } |
|
|
| .clock-caption { |
| display: inline-flex; |
| align-items: center; |
| min-height: 34px; |
| padding: 0 14px; |
| border-radius: var(--radius-pill); |
| background: rgba(255, 255, 255, 0.06); |
| color: var(--muted-strong); |
| font-size: 0.74rem; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .clock-display { |
| margin: 0; |
| font-family: var(--font-sans); |
| font-weight: 800; |
| letter-spacing: -0.06em; |
| line-height: 0.92; |
| } |
|
|
| .clock-meta { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| color: var(--muted-strong); |
| } |
|
|
| .clock-meta span { |
| padding: 8px 14px; |
| border-radius: var(--radius-pill); |
| background: rgba(255, 255, 255, 0.06); |
| font-size: 0.9rem; |
| } |
|
|
| .menu-wrap { |
| position: relative; |
| } |
|
|
| .menu-panel { |
| position: absolute; |
| top: calc(100% + 8px); |
| right: 0; |
| min-width: 148px; |
| padding: 8px; |
| border-radius: 18px; |
| border: 1px solid var(--line-strong); |
| background: var(--surface-strong); |
| box-shadow: var(--shadow-lg); |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(-4px); |
| transition: opacity 180ms ease, transform 180ms ease; |
| } |
|
|
| .menu-panel.is-open { |
| opacity: 1; |
| pointer-events: auto; |
| transform: translateY(0); |
| } |
|
|
| .menu-panel button { |
| width: 100%; |
| border: 0; |
| background: transparent; |
| color: var(--text); |
| padding: 12px 14px; |
| border-radius: 14px; |
| text-align: left; |
| } |
|
|
| .menu-panel button:hover { |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| .task-card { |
| position: relative; |
| display: grid; |
| gap: 12px; |
| padding: 16px; |
| border-radius: var(--radius-panel); |
| border: 1px solid var(--line); |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); |
| overflow: hidden; |
| } |
|
|
| .task-card::before { |
| content: ""; |
| position: absolute; |
| inset: 0 auto 0 0; |
| width: 3px; |
| background: linear-gradient(180deg, var(--accent) 0%, transparent 100%); |
| opacity: 0.78; |
| } |
|
|
| .task-copy { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .task-copy h4 { |
| margin: 0 0 10px; |
| font-size: 1rem; |
| line-height: 1.32; |
| } |
|
|
| .meta-line { |
| margin: 0; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .meta-badge, |
| .task-count { |
| display: inline-flex; |
| align-items: center; |
| min-height: 32px; |
| padding: 0 12px; |
| border-radius: var(--radius-pill); |
| background: rgba(255, 255, 255, 0.06); |
| color: var(--muted-strong); |
| font-size: 0.82rem; |
| } |
|
|
| .progress-shell { |
| height: 8px; |
| border-radius: var(--radius-pill); |
| background: rgba(255, 255, 255, 0.08); |
| overflow: hidden; |
| } |
|
|
| .progress-bar { |
| width: 0; |
| height: 100%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, #73d883 0%, #ffd166 55%, #ff6b5c 100%); |
| transition: width 360ms ease; |
| } |
|
|
| .task-card.task-complete .progress-bar { |
| background: linear-gradient(90deg, rgba(124, 215, 209, 0.72) 0%, rgba(124, 215, 209, 1) 100%); |
| } |
|
|
| .task-card.task-complete h4 { |
| color: var(--muted); |
| text-decoration: line-through; |
| } |
|
|
| .check-wrap { |
| position: relative; |
| display: inline-flex; |
| } |
|
|
| .task-check { |
| position: absolute; |
| opacity: 0; |
| pointer-events: none; |
| } |
|
|
| .custom-check { |
| width: 24px; |
| height: 24px; |
| border-radius: 9px; |
| border: 1.5px solid rgba(255, 255, 255, 0.32); |
| background: rgba(255, 255, 255, 0.03); |
| position: relative; |
| flex-shrink: 0; |
| } |
|
|
| .task-check:checked + .custom-check { |
| background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); |
| border-color: transparent; |
| } |
|
|
| .task-check:checked + .custom-check::after { |
| content: ""; |
| position: absolute; |
| left: 7px; |
| top: 3px; |
| width: 6px; |
| height: 12px; |
| border-right: 2px solid white; |
| border-bottom: 2px solid white; |
| transform: rotate(45deg); |
| } |
|
|
| .task-delete { |
| justify-self: flex-end; |
| border: 0; |
| background: transparent; |
| color: var(--muted); |
| padding: 0; |
| } |
|
|
| .empty-state { |
| min-height: 180px; |
| display: grid; |
| place-items: center; |
| gap: 8px; |
| padding: 24px; |
| border-radius: var(--radius-panel); |
| background: rgba(255, 255, 255, 0.04); |
| color: var(--muted); |
| text-align: center; |
| } |
|
|
| .modal-backdrop { |
| position: fixed; |
| inset: 0; |
| background: rgba(9, 11, 15, 0.34); |
| backdrop-filter: blur(12px); |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 180ms ease; |
| z-index: 80; |
| } |
|
|
| .modal-backdrop.is-open { |
| opacity: 1; |
| pointer-events: auto; |
| } |
|
|
| .modal-card { |
| width: min(520px, 100%); |
| padding: 28px; |
| box-shadow: var(--shadow-xl); |
| } |
|
|
| .modal-form { |
| display: grid; |
| gap: 14px; |
| margin-top: 18px; |
| } |
|
|
| .modal-form.compact { |
| margin-top: 10px; |
| } |
|
|
| .modal-form label { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .modal-form span { |
| color: var(--muted-strong); |
| } |
|
|
| .modal-form input, |
| .modal-form select, |
| .modal-form textarea { |
| width: 100%; |
| min-height: 48px; |
| padding: 0 16px; |
| border-radius: var(--radius-button); |
| border: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.06); |
| color: var(--text); |
| outline: none; |
| } |
|
|
| .modal-form input:focus, |
| .modal-form select:focus, |
| .modal-form textarea:focus { |
| border-color: rgba(124, 215, 209, 0.7); |
| box-shadow: 0 0 0 3px rgba(124, 215, 209, 0.14); |
| } |
|
|
| .form-actions { |
| justify-content: flex-end; |
| gap: 10px; |
| padding-top: 4px; |
| } |
|
|
| .toast-stack { |
| position: fixed; |
| top: 18px; |
| right: 18px; |
| display: grid; |
| gap: 10px; |
| z-index: 90; |
| } |
|
|
| .toast { |
| min-width: 220px; |
| max-width: 340px; |
| padding: 14px 16px; |
| border-radius: 18px; |
| border: 1px solid var(--line-strong); |
| background: var(--surface-strong); |
| box-shadow: var(--shadow-lg); |
| animation: riseIn 220ms ease both; |
| } |
|
|
| .toast.success { |
| border-color: rgba(47, 125, 88, 0.22); |
| } |
|
|
| .toast.error { |
| border-color: rgba(196, 91, 87, 0.26); |
| } |
|
|
| .admin-hero { |
| border-radius: var(--radius-shell); |
| padding: 30px; |
| margin-bottom: 22px; |
| } |
|
|
| .admin-grid { |
| display: grid; |
| gap: 20px; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| } |
|
|
| .admin-card { |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| padding: 24px; |
| min-height: 240px; |
| } |
|
|
| .create-card { |
| border-style: dashed; |
| align-items: flex-start; |
| } |
|
|
| .create-icon { |
| width: 56px; |
| height: 56px; |
| border-radius: 20px; |
| display: grid; |
| place-items: center; |
| font-size: 1.8rem; |
| background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(174, 111, 72, 0.12) 100%); |
| } |
|
|
| @keyframes floatGlow { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0) scale(1); |
| } |
| 50% { |
| transform: translate3d(2vw, 1.5vw, 0) scale(1.05); |
| } |
| } |
|
|
| @keyframes riseIn { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @media (max-width: 1180px) { |
| .layout, |
| .admin-layout { |
| width: min(100% - 22px, 1520px); |
| } |
|
|
| .admin-hero, |
| .section-header, |
| .hero-topbar { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .layout, |
| .admin-layout { |
| width: min(100% - 18px, 1520px); |
| padding-top: 18px; |
| padding-bottom: 28px; |
| } |
|
|
| .hero-card, |
| .card-surface, |
| .admin-card, |
| .modal-card, |
| .admin-hero { |
| border-radius: 24px; |
| } |
|
|
| .form-actions { |
| flex-direction: column-reverse; |
| align-items: stretch; |
| } |
|
|
| .ghost-link, |
| .pill-button, |
| .primary-button, |
| .secondary-button, |
| .danger-button { |
| width: 100%; |
| } |
| } |
|
|
