| :root { |
| color-scheme: light; |
| --ink: #10233f; |
| --muted: #52667f; |
| --line: #cad7e6; |
| --surface: #ffffff; |
| --soft: #eef5fb; |
| --blue: #0866c6; |
| --blue-dark: #054c96; |
| --green: #087b55; |
| --amber: #9a5b00; |
| --red: #a33131; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { box-sizing: border-box; } |
| body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #eaf5ff 0, #f7fbff 380px, #f3f6fa 100%); } |
| button, input, select, textarea { font: inherit; } |
| button, select, input, textarea { border: 1px solid var(--line); border-radius: 9px; } |
| button { min-height: 42px; padding: .65rem .85rem; color: var(--ink); background: var(--surface); cursor: pointer; font-weight: 700; } |
| button:hover { border-color: var(--blue); } |
| button.primary { color: #fff; border-color: var(--blue); background: var(--blue); } |
| button.primary:hover { background: var(--blue-dark); } |
| button.quiet { color: var(--muted); } |
|
|
| .hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: 2rem; max-width: 1160px; margin: 0 auto; padding: 4.5rem 1.25rem 2.5rem; align-items: end; } |
| .eyebrow { margin: 0 0 .55rem; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } |
| h1 { max-width: 760px; margin: 0; font-size: clamp(2.25rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.055em; } |
| .lede { max-width: 760px; margin: 1.25rem 0 0; color: var(--muted); font-size: clamp(1rem, 2.3vw, 1.25rem); line-height: 1.6; } |
| .privacy-card { padding: 1.25rem; border: 1px solid #9fc4ea; border-radius: 16px; background: rgba(255,255,255,.78); box-shadow: 0 14px 40px rgba(37,88,136,.08); } |
| .privacy-card p { margin: .5rem 0 0; color: var(--muted); line-height: 1.5; } |
|
|
| main { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem 4rem; } |
| .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; } |
| .stats article { padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.9); } |
| .stats span { display: block; font-size: 1.75rem; font-weight: 800; } |
| .stats small { color: var(--muted); } |
| .toolbar { display: flex; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } |
| .filters, .actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; } |
| .filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; font-weight: 700; } |
| select, input, textarea { width: 100%; padding: .7rem; color: var(--ink); background: #fff; } |
| textarea { resize: vertical; line-height: 1.45; } |
| .status { min-height: 1.5rem; margin: .7rem .15rem 1rem; color: var(--muted); } |
| .repair-panel { margin-bottom: 1rem; padding: 1rem 1.25rem; border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; background: #e9f4ff; } |
| .repair-panel h2 { margin: 0; font-size: 1.05rem; } |
| .repair-panel ol { margin-bottom: 0; padding-left: 1.25rem; } |
| .repair-panel li + li { margin-top: .45rem; } |
|
|
| .claim-list { display: grid; gap: 1rem; } |
| .claim-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 12px 30px rgba(26,61,98,.06); } |
| .claim-card > header { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--soft); align-items: center; } |
| .claim-card h2 { display: inline; margin: 0 0 0 .65rem; font-size: .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } |
| .class-tag, .state-tag { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; } |
| .class-tag { color: var(--blue-dark); background: #d9ecff; } |
| .state-supported { color: var(--green); background: #dff6ec; } |
| .state-partially_supported { color: var(--amber); background: #fff1d6; } |
| .state-unsupported { color: var(--red); background: #ffe6e6; } |
| .state-superseded { color: var(--muted); background: #e7edf4; } |
| .prompt { margin: 0; padding: .9rem 1.1rem 0; color: var(--muted); } |
| .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; padding: 1rem 1.1rem 1.2rem; } |
| .form-grid label { display: grid; align-content: start; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; } |
| .form-grid .wide { grid-column: 1 / -1; } |
|
|
| .boundaries, .cta { margin-top: 1.25rem; padding: 1.4rem; border-radius: 16px; } |
| .boundaries { border: 1px solid var(--line); background: var(--surface); } |
| .boundaries h2, .cta h2 { margin: 0 0 .65rem; } |
| .boundaries p { color: var(--muted); line-height: 1.6; } |
| .disclosure { font-weight: 700; } |
| .cta { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; color: #fff; background: #0d3765; } |
| .cta p { max-width: 760px; margin: .45rem 0 0; color: #cfe4f8; line-height: 1.55; } |
| .cta .eyebrow { color: #8fc8ff; } |
| .cta a { flex: 0 0 auto; padding: .8rem 1rem; border-radius: 10px; color: #07345d; background: #fff; font-weight: 800; text-decoration: none; } |
| footer { padding: 2rem 1.25rem; color: var(--muted); text-align: center; } |
|
|
| @media (max-width: 800px) { |
| .hero { grid-template-columns: 1fr; padding-top: 3rem; } |
| .stats { grid-template-columns: repeat(2, 1fr); } |
| .toolbar, .cta { align-items: stretch; flex-direction: column; } |
| .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .cta a { text-align: center; } |
| } |
|
|
| @media (max-width: 520px) { |
| .hero { padding-top: 2rem; } |
| h1 { font-size: 2.55rem; } |
| .stats { gap: .55rem; } |
| .stats article { padding: .85rem; } |
| .actions button { flex: 1 1 45%; } |
| .filters { width: 100%; } |
| .filters label { flex: 1 1 45%; } |
| .claim-card > header { align-items: flex-start; flex-direction: column; } |
| .form-grid { grid-template-columns: 1fr; } |
| .form-grid .wide { grid-column: auto; } |
| } |
|
|
|
|
