| |
| |
| |
|
|
| :root { |
| --bg: #0a0a0f; |
| --panel: #12121a; |
| --line: #23232e; |
| --ink: #e8e6df; |
| --dim: #8a8a96; |
| --amber: #e0a458; |
| --cyan: #6fd3e0; |
| --green: #7fd08a; |
| --red: #e06f7a; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--ink); |
| font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; |
| font-size: 14px; |
| line-height: 1.5; |
| } |
|
|
| header { |
| padding: 1.5rem 2rem; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.05em; } |
| header .sub { margin: 0.25rem 0 0.75rem; color: var(--dim); } |
| nav a { |
| color: var(--cyan); |
| text-decoration: none; |
| margin-right: 1.25rem; |
| } |
| nav a:hover { text-decoration: underline; } |
|
|
| main { padding: 2rem; max-width: 1100px; } |
|
|
| .cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .card { |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 1rem 1.25rem; |
| } |
|
|
| .card h2 { |
| margin: 0 0 0.5rem; |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--dim); |
| } |
|
|
| .card .big { font-size: 1.6rem; margin: 0; color: var(--amber); } |
| .card .state { color: var(--cyan); } |
| .dim { color: var(--dim); } |
| .sovereign { color: var(--green); font-weight: bold; } |
| .denied { color: var(--red); font-weight: bold; } |
| .ok h2 { color: var(--green); } |
| .error h2, .alert.denied h2 { color: var(--red); } |
|
|
| .policy { |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 0.75rem 1.25rem; |
| margin-bottom: 1.5rem; |
| } |
| .policy h2 { |
| margin: 0 0 0.25rem; |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--dim); |
| } |
| .policy p { margin: 0; } |
|
|
| .alert { |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-left: 4px solid var(--cyan); |
| border-radius: 8px; |
| padding: 1rem 1.25rem; |
| margin-bottom: 1.5rem; |
| } |
| .alert.ok { border-left-color: var(--green); } |
| .alert.denied, .alert.error { border-left-color: var(--red); } |
| .alert h2 { margin-top: 0; } |
|
|
| dl { |
| display: grid; |
| grid-template-columns: 140px 1fr; |
| gap: 0.25rem 1rem; |
| margin: 0; |
| } |
| dt { color: var(--dim); } |
| dd { margin: 0; } |
|
|
| .forms { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 1rem; |
| } |
|
|
| .forms section { |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 1rem 1.25rem; |
| } |
|
|
| .forms h2 { |
| margin: 0 0 0.75rem; |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--dim); |
| } |
|
|
| label { display: block; margin-bottom: 0.6rem; font-size: 0.8rem; color: var(--dim); } |
|
|
| input { |
| display: block; |
| width: 100%; |
| margin-top: 0.25rem; |
| padding: 0.5rem; |
| background: var(--bg); |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| color: var(--ink); |
| font: inherit; |
| } |
|
|
| button { |
| margin-top: 0.5rem; |
| padding: 0.6rem 1.25rem; |
| background: var(--amber); |
| color: #111; |
| border: none; |
| border-radius: 4px; |
| font: inherit; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| button:hover { filter: brightness(1.1); } |
| button.danger { background: var(--red); color: #111; } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| background: var(--panel); |
| } |
| th, td { |
| text-align: left; |
| padding: 0.5rem 0.75rem; |
| border-bottom: 1px solid var(--line); |
| vertical-align: top; |
| } |
| th { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--dim); |
| } |
| code { color: var(--cyan); font-size: 0.85em; } |
| a { color: var(--cyan); } |
|
|
| footer { |
| padding: 1rem 2rem; |
| border-top: 1px solid var(--line); |
| color: var(--dim); |
| font-size: 0.8rem; |
| } |
|
|
