/* RevAddress API — Developer Portal Aesthetic: Warm Industrial Precision Inspired by control surfaces, shipping labels, precision measurement */ /* Fonts loaded via in HTML — see preconnect + stylesheet in each page's */ :root { --bg: #09090b; --bg-elevated: #111113; --bg-input: #161618; --bg-hover: #1a1a1d; --border: #222220; --border-subtle: #1a1a18; --border-focus: #c8956c; --text: #e8e4df; --text-secondary: #9a9590; --text-muted: #5e5a55; --accent: #c8956c; --accent-hover: #d4a47e; --accent-dim: rgba(200, 149, 108, 0.12); --accent-glow: rgba(200, 149, 108, 0.06); --success: #5bb98b; --success-dim: rgba(91, 185, 139, 0.10); --error: #d4645c; --error-dim: rgba(212, 100, 92, 0.10); --warning: #d4a43c; --warning-dim: rgba(212, 164, 60, 0.10); --font-display: 'Outfit', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --radius: 6px; --radius-lg: 10px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-display); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* ── Noise grain overlay ──────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; opacity: 0.025; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px; } /* ── Layout ───────────────────────────────────────────── */ .container { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .container-narrow { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* ── Nav ──────────────────────────────────────────────── */ .nav { display: flex; align-items: center; gap: 0; padding: 0 1.5rem; height: 48px; border-bottom: 1px solid var(--border); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; position: sticky; top: 0; background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 100; } .nav a { color: var(--text-muted); text-decoration: none; padding: 0 1rem; height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .nav a:hover { color: var(--text-secondary); } .nav a.active { color: var(--text); border-bottom-color: var(--accent); } .nav-brand { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-right: auto; padding: 0; } /* ── Hero ─────────────────────────────────────────────── */ .hero { padding: 3.5rem 0 2rem; position: relative; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; } .hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); } .hero h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 0.75rem; color: var(--text); } .hero p { color: var(--text-secondary); font-size: 1rem; font-weight: 300; max-width: 520px; line-height: 1.7; } /* ── Barcode decorative element ───────────────────────── */ .barcode-strip { display: flex; gap: 2px; align-items: flex-end; height: 32px; margin: 2rem 0 0; opacity: 0.15; } .barcode-strip span { display: block; width: 2px; background: var(--accent); border-radius: 1px; } /* ── Cards ────────────────────────────────────────────── */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; position: relative; } .card::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 2px; background: var(--border-subtle); border-radius: 1px; opacity: 0; transition: opacity 0.3s; } .card:hover::before { opacity: 1; background: var(--accent); } .card h2 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.875rem; letter-spacing: -0.01em; } .card h3 { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.625rem; } /* ── Forms ────────────────────────────────────────────── */ input, textarea, select { width: 100%; padding: 0.6875rem 0.875rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400; outline: none; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } input:focus, textarea:focus, select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-dim); } input::placeholder { color: var(--text-muted); font-weight: 300; } label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.375rem; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono); } .input-group { margin-bottom: 1.25rem; } /* ── Buttons ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.01em; border-radius: var(--radius); border: none; cursor: pointer; transition: all 0.2s var(--ease-out); text-decoration: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #0a0a0c; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200, 149, 108, 0.2); } .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text); background: var(--bg-hover); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .btn-block { width: 100%; } /* ── Code blocks ──────────────────────────────────────── */ .code-block { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; white-space: pre; line-height: 1.6; position: relative; color: var(--text-secondary); } .code-inline { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--bg-input); padding: 0.125rem 0.4rem; border-radius: 3px; color: var(--accent); } /* ── Copy button ──────────────────────────────────────── */ .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-family: var(--font-mono); background: var(--border); color: var(--text-muted); border: none; border-radius: 3px; cursor: pointer; transition: color 0.15s; letter-spacing: 0.03em; text-transform: uppercase; } .copy-btn:hover { color: var(--text); } .copy-btn.copied { color: var(--success); } /* ── Key display ──────────────────────────────────────── */ .key-display { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; background: var(--bg-input); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1rem; word-break: break-all; position: relative; box-shadow: 0 0 0 3px var(--accent-dim); } /* ── Results ──────────────────────────────────────────── */ .result { margin-top: 1rem; padding: 1rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .result-success { background: var(--success-dim); border: 1px solid rgba(91, 185, 139, 0.25); } .result-error { background: var(--error-dim); border: 1px solid rgba(212, 100, 92, 0.25); } .result-info { background: var(--accent-dim); border: 1px solid rgba(200, 149, 108, 0.25); } /* ── Badges ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 999px; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-mono); } .badge-success { background: var(--success-dim); color: var(--success); } .badge-error { background: var(--error-dim); color: var(--error); } .badge-warning { background: var(--warning-dim); color: var(--warning); } .badge-muted { background: rgba(94, 90, 85, 0.15); color: var(--text-muted); } /* ── Status dots ──────────────────────────────────────── */ .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot-green { background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse-green 2s ease-in-out infinite; } .dot-red { background: var(--error); box-shadow: 0 0 8px var(--error); animation: pulse-red 2s ease-in-out infinite; } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 4px var(--success); } 50% { box-shadow: 0 0 12px var(--success); } } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 4px var(--error); } 50% { box-shadow: 0 0 12px var(--error); } } /* ── Toggle group ─────────────────────────────────────── */ .toggle-group { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; } .toggle-option { flex: 1; padding: 0.5rem; text-align: center; font-size: 0.8125rem; font-weight: 500; font-family: var(--font-display); background: transparent; color: var(--text-muted); border: none; cursor: pointer; transition: all 0.2s var(--ease-out); } .toggle-option.active { background: var(--bg-hover); color: var(--text); } .toggle-option:hover:not(.active) { color: var(--text-secondary); } /* ── Warning box ──────────────────────────────────────── */ .warning { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--warning-dim); border: 1px solid rgba(212, 164, 60, 0.2); border-radius: var(--radius); font-size: 0.8125rem; color: var(--warning); margin-top: 0.75rem; } /* ── Tables ───────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); } .table tr:last-child td { border-bottom: none; } /* ── Divider ──────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0 0; } /* ── Links ────────────────────────────────────────────── */ a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ── Spinner ──────────────────────────────────────────── */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Stat grid ────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .stat-box { background: var(--bg-input); border-radius: var(--radius); padding: 1rem; border: 1px solid var(--border-subtle); } .stat-value { font-size: 1.375rem; font-weight: 600; font-family: var(--font-mono); letter-spacing: -0.02em; color: var(--text); } .stat-label { font-size: 0.6875rem; font-family: var(--font-mono); color: var(--text-muted); margin-top: 0.25rem; letter-spacing: 0.04em; text-transform: uppercase; } /* ── Key/Usage rows ───────────────────────────────────── */ .key-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); } .key-row:last-child { border-bottom: none; } .key-hash { font-family: var(--font-mono); font-size: 0.8125rem; } .key-meta { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.125rem; } .usage-row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.8125rem; font-family: var(--font-mono); } .usage-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 0.25rem; overflow: hidden; } .usage-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s var(--ease-out); } /* ── Entrance animations ──────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fade-up 0.5s var(--ease-out) both; } .delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.1s; } .delay-3 { animation-delay: 0.15s; } .delay-4 { animation-delay: 0.2s; } .delay-5 { animation-delay: 0.25s; } /* ── Utility ──────────────────────────────────────────── */ .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-success { color: var(--success); } .text-error { color: var(--error); } .text-accent { color: var(--accent); } .text-mono { font-family: var(--font-mono); } .text-sm { font-size: 0.8125rem; } .text-xs { font-size: 0.6875rem; } .text-center { text-align: center; } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-1 { gap: 0.5rem; } .hidden { display: none; } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 640px) { .container, .container-narrow { padding: 1.5rem 1rem 3rem; } .hero h1 { font-size: 1.625rem; } .hero { padding: 2.5rem 0 1.5rem; } .stat-grid { grid-template-columns: 1fr 1fr; } .nav { padding: 0 1rem; gap: 0; } .nav a { padding: 0 0.625rem; font-size: 0.75rem; } }