| :root { |
| --bg: #f7f8fb; |
| --surface: #ffffff; |
| --ink: #16202a; |
| --muted: #667380; |
| --line: #dfe5ec; |
| --teal: #0f9f8f; |
| --teal-dark: #087568; |
| --coral: #df5a45; |
| --gold: #bd8d24; |
| --blue: #316fd0; |
| --green-soft: #dff5ef; |
| --coral-soft: #fde6df; |
| --gold-soft: #fff2c9; |
| --blue-soft: #e4edff; |
| --shadow: 0 18px 55px rgba(25, 39, 52, 0.12); |
| color-scheme: light; |
| font-family: |
| Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| .visually-hidden { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| overflow-x: hidden; |
| } |
|
|
| body { |
| margin: 0; |
| background: |
| linear-gradient(120deg, rgba(15, 159, 143, 0.08), transparent 34%), |
| linear-gradient(260deg, rgba(223, 90, 69, 0.08), transparent 30%), |
| var(--bg); |
| color: var(--ink); |
| overflow-x: hidden; |
| } |
|
|
| a { |
| color: inherit; |
| } |
|
|
| .topbar { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 20px; |
| min-height: 70px; |
| padding: 12px clamp(18px, 4vw, 54px); |
| border-bottom: 1px solid rgba(223, 229, 236, 0.8); |
| background: rgba(247, 248, 251, 0.88); |
| backdrop-filter: blur(18px); |
| } |
|
|
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| text-decoration: none; |
| min-width: 220px; |
| } |
|
|
| .brand-mark { |
| display: grid; |
| place-items: center; |
| width: 42px; |
| height: 42px; |
| border-radius: 8px; |
| background: var(--ink); |
| color: white; |
| font-size: 13px; |
| font-weight: 800; |
| } |
|
|
| .brand strong, |
| .brand small { |
| display: block; |
| } |
|
|
| .brand small { |
| margin-top: 2px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| nav { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| } |
|
|
| nav a { |
| padding: 9px 12px; |
| border-radius: 8px; |
| color: var(--muted); |
| font-size: 14px; |
| font-weight: 700; |
| text-decoration: none; |
| } |
|
|
| nav a:hover, |
| nav a:focus-visible { |
| background: var(--surface); |
| color: var(--ink); |
| outline: none; |
| } |
|
|
| main { |
| width: min(1180px, calc(100% - 32px)); |
| margin: 0 auto; |
| } |
|
|
| .hero { |
| min-height: calc(100vh - 70px); |
| display: grid; |
| grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); |
| gap: clamp(24px, 5vw, 70px); |
| align-items: center; |
| padding: 48px 0 36px; |
| } |
|
|
| .hero-copy { |
| max-width: 760px; |
| min-width: 0; |
| } |
|
|
| .eyebrow { |
| margin: 0 0 12px; |
| color: var(--teal-dark); |
| font-size: 12px; |
| font-weight: 900; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin-top: 0; |
| } |
|
|
| h1 { |
| margin-bottom: 22px; |
| max-width: 920px; |
| font-size: clamp(44px, 7vw, 86px); |
| line-height: 0.96; |
| letter-spacing: 0; |
| overflow-wrap: break-word; |
| hyphens: auto; |
| } |
|
|
| h2, |
| h3, |
| p, |
| li, |
| a, |
| button { |
| overflow-wrap: break-word; |
| } |
|
|
| h2 { |
| margin-bottom: 12px; |
| font-size: clamp(28px, 4vw, 44px); |
| line-height: 1.05; |
| letter-spacing: 0; |
| } |
|
|
| h3 { |
| margin-bottom: 8px; |
| font-size: 19px; |
| } |
|
|
| .hero-copy > p:not(.eyebrow), |
| .section-head p { |
| max-width: 760px; |
| color: var(--muted); |
| font-size: 18px; |
| line-height: 1.65; |
| } |
|
|
| .hero-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-top: 30px; |
| } |
|
|
| .button { |
| appearance: none; |
| border: 1px solid transparent; |
| border-radius: 8px; |
| padding: 12px 16px; |
| font: inherit; |
| font-size: 14px; |
| font-weight: 850; |
| cursor: pointer; |
| text-decoration: none; |
| transition: |
| transform 160ms ease, |
| box-shadow 160ms ease, |
| background 160ms ease; |
| } |
|
|
| .button:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .button.primary { |
| background: var(--ink); |
| color: #fff; |
| box-shadow: 0 10px 26px rgba(22, 32, 42, 0.18); |
| } |
|
|
| .button.ghost { |
| border-color: var(--line); |
| background: rgba(255, 255, 255, 0.72); |
| color: var(--ink); |
| } |
|
|
| .button.small { |
| padding: 8px 10px; |
| font-size: 12px; |
| } |
|
|
| .signal-panel { |
| position: relative; |
| min-width: 0; |
| min-height: 520px; |
| overflow: hidden; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: |
| linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)), |
| repeating-linear-gradient(0deg, rgba(22, 32, 42, 0.04), rgba(22, 32, 42, 0.04) 1px, transparent 1px, transparent 28px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .pulse-grid { |
| position: absolute; |
| inset: 38px; |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 14px; |
| } |
|
|
| .pulse-grid span { |
| min-height: 78px; |
| border-radius: 8px; |
| background: linear-gradient(160deg, rgba(15, 159, 143, 0.18), rgba(49, 111, 208, 0.12)); |
| border: 1px solid rgba(15, 159, 143, 0.22); |
| } |
|
|
| .pulse-grid span:nth-child(3n) { |
| background: linear-gradient(160deg, rgba(223, 90, 69, 0.16), rgba(189, 141, 36, 0.12)); |
| border-color: rgba(223, 90, 69, 0.22); |
| } |
|
|
| .pulse-grid span:nth-child(4n) { |
| background: linear-gradient(160deg, rgba(49, 111, 208, 0.17), rgba(15, 159, 143, 0.12)); |
| border-color: rgba(49, 111, 208, 0.22); |
| } |
|
|
| .signal-stats { |
| position: absolute; |
| right: 24px; |
| bottom: 24px; |
| left: 24px; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| } |
|
|
| .signal-stats div { |
| min-height: 118px; |
| padding: 18px; |
| border: 1px solid rgba(223, 229, 236, 0.88); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.86); |
| } |
|
|
| .signal-stats strong { |
| display: block; |
| font-size: 42px; |
| line-height: 1; |
| } |
|
|
| .signal-stats span { |
| display: block; |
| margin-top: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .notice { |
| display: flex; |
| gap: 16px; |
| align-items: flex-start; |
| margin: 0 0 72px; |
| padding: 18px 20px; |
| border: 1px solid rgba(189, 141, 36, 0.34); |
| border-radius: 8px; |
| background: var(--gold-soft); |
| color: #4b3b0b; |
| line-height: 1.55; |
| } |
|
|
| .notice strong { |
| white-space: nowrap; |
| } |
|
|
| .notice span, |
| .guardrail span { |
| min-width: 0; |
| } |
|
|
| .section { |
| padding: 68px 0; |
| } |
|
|
| .section-head { |
| margin-bottom: 26px; |
| } |
|
|
| .timeline { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 14px; |
| } |
|
|
| .wave-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 14px; |
| } |
|
|
| .wave-card { |
| min-height: 250px; |
| padding: 20px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08); |
| } |
|
|
| .wave-card span { |
| display: grid; |
| place-items: center; |
| width: 38px; |
| height: 38px; |
| margin-bottom: 18px; |
| border-radius: 8px; |
| background: var(--ink); |
| color: #fff; |
| font-weight: 900; |
| } |
|
|
| .wave-card:nth-child(2) span { |
| background: var(--teal-dark); |
| } |
|
|
| .wave-card:nth-child(3) span { |
| background: var(--blue); |
| } |
|
|
| .wave-card:nth-child(4) span { |
| background: var(--coral); |
| } |
|
|
| .wave-card p { |
| color: var(--muted); |
| line-height: 1.55; |
| } |
|
|
| .wave-card strong { |
| display: block; |
| line-height: 1.45; |
| } |
|
|
| .guardrail { |
| display: flex; |
| align-items: flex-start; |
| gap: 14px; |
| margin-top: 16px; |
| padding: 18px 20px; |
| border: 1px solid rgba(223, 90, 69, 0.28); |
| border-radius: 8px; |
| background: var(--coral-soft); |
| color: #6d2a1f; |
| line-height: 1.55; |
| } |
|
|
| .case-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 14px; |
| } |
|
|
| .case-card, |
| .transfer-panel, |
| .implementation-note, |
| .terminal-log { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08); |
| } |
|
|
| .case-card { |
| min-height: 310px; |
| padding: 20px; |
| } |
|
|
| .case-card p, |
| .case-card li, |
| .transfer-panel li, |
| .implementation-note { |
| color: var(--muted); |
| line-height: 1.55; |
| } |
|
|
| .case-card ul, |
| .transfer-panel ul { |
| margin: 14px 0 0; |
| padding-left: 18px; |
| } |
|
|
| .warning-card { |
| border-color: rgba(223, 90, 69, 0.26); |
| background: linear-gradient(145deg, rgba(253, 230, 223, 0.88), rgba(255, 255, 255, 0.92)); |
| } |
|
|
| .transfer-panel { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 18px; |
| margin-top: 14px; |
| padding: 22px; |
| } |
|
|
| .implementation-note { |
| display: flex; |
| gap: 14px; |
| margin-top: 14px; |
| padding: 18px 20px; |
| border-color: rgba(15, 159, 143, 0.28); |
| background: linear-gradient(145deg, var(--green-soft), rgba(255, 255, 255, 0.94)); |
| } |
|
|
| .implementation-note strong { |
| color: var(--ink); |
| white-space: nowrap; |
| } |
|
|
| code { |
| border-radius: 6px; |
| background: rgba(22, 32, 42, 0.07); |
| color: var(--ink); |
| padding: 1px 4px; |
| } |
|
|
| .terminal-log { |
| margin-top: 14px; |
| overflow: hidden; |
| } |
|
|
| .terminal-log summary { |
| cursor: pointer; |
| padding: 16px 18px; |
| font-weight: 850; |
| } |
|
|
| .terminal-log pre { |
| border-radius: 0; |
| border-top: 1px solid rgba(255, 255, 255, 0.12); |
| } |
|
|
| .day-card, |
| .panel, |
| .prompt-card, |
| .source-card, |
| .task-card { |
| min-width: 0; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08); |
| } |
|
|
| .day-card { |
| min-height: 260px; |
| padding: 20px; |
| } |
|
|
| .day-kicker { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 14px; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 900; |
| text-transform: uppercase; |
| } |
|
|
| .dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 999px; |
| background: var(--teal); |
| } |
|
|
| .day-card:nth-child(2n) .dot { |
| background: var(--blue); |
| } |
|
|
| .day-card:nth-child(3n) .dot { |
| background: var(--coral); |
| } |
|
|
| .day-card:nth-child(4n) .dot { |
| background: var(--gold); |
| } |
|
|
| .day-card ul, |
| .sources ul { |
| margin: 14px 0 0; |
| padding-left: 18px; |
| color: var(--muted); |
| line-height: 1.55; |
| } |
|
|
| .split { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 18px; |
| } |
|
|
| .panel { |
| padding: 22px; |
| } |
|
|
| .panel-head { |
| margin-bottom: 18px; |
| } |
|
|
| .controls { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 14px; |
| } |
|
|
| label { |
| display: grid; |
| gap: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 800; |
| } |
|
|
| input, |
| select, |
| textarea { |
| width: 100%; |
| min-height: 44px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #fff; |
| color: var(--ink); |
| font: inherit; |
| font-size: 14px; |
| padding: 10px 12px; |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus { |
| border-color: var(--teal); |
| outline: 3px solid rgba(15, 159, 143, 0.14); |
| } |
|
|
| .check { |
| grid-template-columns: auto 1fr; |
| align-items: center; |
| grid-column: 1 / -1; |
| } |
|
|
| .check input { |
| width: 18px; |
| min-height: 18px; |
| } |
|
|
| .metrics { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 10px; |
| margin-top: 18px; |
| } |
|
|
| .metrics div, |
| .estimate { |
| padding: 16px; |
| border-radius: 8px; |
| background: linear-gradient(145deg, var(--green-soft), #fff); |
| border: 1px solid rgba(15, 159, 143, 0.22); |
| } |
|
|
| .metrics span, |
| .estimate span, |
| .estimate small { |
| display: block; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 850; |
| } |
|
|
| .metrics strong, |
| .estimate strong { |
| display: block; |
| margin-top: 8px; |
| font-size: 32px; |
| line-height: 1; |
| } |
|
|
| .estimate { |
| margin-top: 18px; |
| background: linear-gradient(145deg, var(--blue-soft), #fff); |
| border-color: rgba(49, 111, 208, 0.22); |
| } |
|
|
| .estimate small { |
| margin-top: 8px; |
| } |
|
|
| .task-form { |
| display: grid; |
| grid-template-columns: minmax(240px, 1fr) 150px 170px auto; |
| gap: 10px; |
| margin-bottom: 16px; |
| } |
|
|
| .kanban { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 14px; |
| } |
|
|
| .lane { |
| min-height: 280px; |
| padding: 14px; |
| border: 1px dashed rgba(102, 115, 128, 0.38); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.52); |
| } |
|
|
| .lane h3 { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin: 0 0 12px; |
| font-size: 15px; |
| } |
|
|
| .lane-count { |
| display: inline-grid; |
| place-items: center; |
| min-width: 24px; |
| height: 24px; |
| border-radius: 8px; |
| background: var(--ink); |
| color: #fff; |
| font-size: 12px; |
| } |
|
|
| .task-card { |
| padding: 13px; |
| margin-bottom: 10px; |
| } |
|
|
| .task-card strong { |
| display: block; |
| margin-bottom: 8px; |
| overflow-wrap: anywhere; |
| } |
|
|
| .task-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-bottom: 10px; |
| } |
|
|
| .tag { |
| display: inline-flex; |
| align-items: center; |
| min-height: 24px; |
| padding: 4px 8px; |
| border-radius: 8px; |
| background: var(--blue-soft); |
| color: #21446e; |
| font-size: 11px; |
| font-weight: 850; |
| } |
|
|
| .tag.alt { |
| background: var(--coral-soft); |
| color: #7b2e20; |
| } |
|
|
| .task-actions { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .task-actions button { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #fff; |
| color: var(--muted); |
| cursor: pointer; |
| font: inherit; |
| font-size: 12px; |
| font-weight: 850; |
| padding: 7px 9px; |
| } |
|
|
| .prompt-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 14px; |
| } |
|
|
| .prompt-card { |
| display: grid; |
| gap: 14px; |
| padding: 18px; |
| } |
|
|
| pre { |
| margin: 0; |
| overflow: auto; |
| border-radius: 8px; |
| background: #111820; |
| color: #f4f8fb; |
| padding: 16px; |
| font-size: 13px; |
| line-height: 1.5; |
| } |
|
|
| code { |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; |
| } |
|
|
| pre code { |
| background: transparent; |
| color: inherit; |
| padding: 0; |
| } |
|
|
| .sources { |
| padding-bottom: 96px; |
| } |
|
|
| .sources ul { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 12px; |
| list-style: none; |
| padding: 0; |
| } |
|
|
| .sources li { |
| min-height: 76px; |
| padding: 18px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.9); |
| } |
|
|
| .sources a { |
| color: var(--blue); |
| font-weight: 850; |
| } |
|
|
| @media (max-width: 980px) { |
| .hero, |
| .split, |
| .timeline, |
| .wave-grid, |
| .case-grid, |
| .transfer-panel, |
| .kanban, |
| .prompt-grid, |
| .sources ul { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero { |
| min-height: auto; |
| } |
|
|
| .signal-panel { |
| min-height: 420px; |
| } |
|
|
| .task-form { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .task-form input { |
| grid-column: 1 / -1; |
| } |
| } |
|
|
| @media (max-width: 680px) { |
| .topbar { |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 10px; |
| padding: 12px; |
| } |
|
|
| nav { |
| justify-content: flex-start; |
| gap: 2px; |
| width: 100%; |
| } |
|
|
| nav a { |
| padding: 8px 7px; |
| font-size: 13px; |
| } |
|
|
| main { |
| width: calc(100vw - 36px); |
| } |
|
|
| h1 { |
| max-width: min(100%, 330px); |
| font-size: 34px; |
| line-height: 1.02; |
| word-break: normal; |
| } |
|
|
| .hero-copy > p:not(.eyebrow), |
| .section-head p { |
| max-width: min(100%, 330px); |
| font-size: 17px; |
| } |
|
|
| .notice, |
| .guardrail, |
| .implementation-note, |
| .hero-actions { |
| flex-direction: column; |
| } |
|
|
| .notice span, |
| .guardrail span, |
| .implementation-note span { |
| max-width: min(100%, 330px); |
| } |
|
|
| .implementation-note strong { |
| white-space: normal; |
| } |
|
|
| .button { |
| width: 100%; |
| text-align: center; |
| } |
|
|
| .signal-stats, |
| .controls, |
| .metrics, |
| .task-form { |
| grid-template-columns: 1fr; |
| } |
|
|
| .pulse-grid { |
| inset: 24px; |
| grid-template-columns: repeat(3, 1fr); |
| } |
|
|
| .signal-stats { |
| right: 12px; |
| left: 12px; |
| bottom: 12px; |
| } |
| } |
|
|
