-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
19 lines (19 loc) · 10.7 KB
/
Copy pathstyles.css
File metadata and controls
19 lines (19 loc) · 10.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root { --ink:#231d18; --muted:#71675d; --line:#e7dfd5; --orange:#e67621; --orange-dark:#a84500; --green:#256c4c; --shadow:0 10px 30px rgba(57,37,20,.075); }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Manrope,system-ui,sans-serif; background:radial-gradient(circle at 15% 0,#fffaf1 0,transparent 31rem),linear-gradient(160deg,#fbf8f3 0%,#f4ede4 100%); line-height:1.45; }
button,a { font:inherit; } code,.ip-copy { font-family:'DM Mono',monospace; }
.page-shell { display:flex; flex:1; flex-direction:column; width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:clamp(28px,4vh,48px) 0 16px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; padding:0 4px 18px; }.eyebrow,.section-kicker { margin:0; color:var(--orange-dark); font-size:.69rem; font-weight:800; letter-spacing:.13em; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #dceee5; }
h1,h2,p { margin-top:0; } h1 { display:flex; align-items:center; gap:10px; margin:7px 0 4px; color:#f09300; font-size:clamp(2.1rem,4.2vw,3.35rem); line-height:1; letter-spacing:-.075em; } h1 .material-symbols-outlined { color:var(--orange); font-size:.85em; font-variation-settings:'FILL' 1; } h2 { margin:2px 0 0; font-size:1.35rem; letter-spacing:-.045em; }.hero-copy { margin-bottom:0; color:var(--muted); font-size:.91rem; }.port-lock { display:flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid #f4d3b6; border-radius:16px; color:var(--orange-dark); background:#fff4e9; }.port-lock .material-symbols-outlined { font-size:23px; }.port-lock strong { display:block; font:700 1.05rem/1 'DM Mono',monospace; }.port-lock small { display:block; margin-top:3px; font-size:.59rem; letter-spacing:.12em; }
.notice-card,.domain-panel,.data-panel { border:1px solid rgba(116,88,60,.12); border-radius:20px; box-shadow:var(--shadow); }.notice-card { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#584537; border-color:#efcaac; background:#fff7ee; }.notice-card .material-symbols-outlined { color:var(--orange-dark); }.notice-card p { margin:0; font-size:.82rem; }.notice-card b { color:#9d3d00; }.notice-card code { color:#763200; font-size:.8rem; }
.content-grid { display:grid; grid-template-columns:minmax(350px,.9fr) minmax(0,1.65fr); align-items:start; gap:16px; margin-top:16px; }.domain-panel,.data-panel { min-width:0; padding:22px; background:rgba(255,253,249,.88); }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:15px; }.data-heading { align-items:center; }.sync-status { margin:0; color:var(--muted); font-size:.74rem; text-align:right; }.domain-list { display:grid; gap:10px; }.domain-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fffdfa; }.domain-card--accent { border-color:#f0c6a7; background:#fff8f1; }.domain-copy { display:grid; gap:7px; min-width:0; }.tag,.country-code,.score { border-radius:999px; font-size:.65rem; font-weight:800; letter-spacing:.06em; }.tag { width:max-content; padding:3px 8px; color:#705238; background:#f5eadf; }.domain-copy code { overflow-wrap:anywhere; color:#2b2118; font-size:.74rem; letter-spacing:-.035em; white-space:nowrap; }.domain-actions { display:flex; gap:7px; flex-shrink:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:0 11px; border:0; border-radius:999px; cursor:pointer; font-size:.75rem; font-weight:800; text-decoration:none; transition:transform .16s,box-shadow .16s; }.button:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(89,49,16,.12); }.button:focus-visible,.ip-copy:focus-visible { outline:3px solid #ffd4a9; outline-offset:2px; }.button .material-symbols-outlined { font-size:16px; }.button-tonal { color:#5a351c; background:#f2e5d7; }.button-filled { color:#fff; background:#342218; }
.test-result { margin-top:16px; }.result-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }.result-heading span { color:var(--muted); font-size:.69rem; }.test-result img { display:block; width:100%; max-height:225px; border:1px solid var(--line); border-radius:12px; background:#fff; object-fit:contain; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; } table { width:100%; min-width:620px; border-collapse:collapse; table-layout:fixed; } .ip-column { width:25%; }.download-column { width:18%; } th,td { text-align:center; } th { padding:10px 8px; color:#655b50; background:#f6f0e9; font-size:.65rem; letter-spacing:.04em; white-space:nowrap; } td { padding:11px 8px; border-top:1px solid #eee7df; font-size:.76rem; white-space:nowrap; } tbody tr { animation:rise .35s both; animation-delay:calc(var(--row-index) * .06s); } tbody tr:hover { background:#fffbf5; }.ip-copy { padding:0; border:0; border-bottom:1px dashed #b99d84; color:#5c320d; background:transparent; cursor:pointer; font-size:.71rem; }.country-code { padding:3px 7px; color:#285b45; background:#e4f0e9; }.colo { font-family:'DM Mono',monospace; font-size:.71rem; }.latency { color:var(--green); }.score { display:inline-block; min-width:43px; padding:3px 7px; color:#9a4100; background:#fff0df; text-align:center; }.network-summary { margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#fffdfa,#f9f3eb); }.summary-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:13px; }.summary-heading h3 { margin:2px 0 0; font-size:1rem; letter-spacing:-.03em; }.source-timestamp { margin:3px 0 0; color:var(--muted); font:500 .65rem/1.4 'DM Mono',monospace; text-align:right; }.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.metric-card { min-width:0; padding:11px; border:1px solid #ede3d7; border-radius:11px; background:rgba(255,255,255,.58); }.metric-card span { display:block; color:#846c56; font-size:.57rem; font-weight:800; letter-spacing:.09em; }.metric-card strong { display:block; margin:4px 0 2px; color:#382316; font:800 1rem/1.1 Manrope,system-ui,sans-serif; letter-spacing:-.018em; white-space:nowrap; }.metric-card small { display:block; overflow:hidden; color:var(--muted); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }.connection-tip { display:flex; align-items:flex-start; gap:7px; margin:13px 0 0; color:#665446; font-size:.69rem; }.connection-tip .material-symbols-outlined { margin-top:1px; color:var(--orange-dark); font-size:16px; }.connection-tip code { color:#763200; font-size:.68rem; }.setup-guide { display:grid; grid-template-columns:minmax(210px,.64fr) minmax(0,2.36fr); align-items:center; gap:26px; margin-top:14px; padding:20px 24px; border:1px solid rgba(116,88,60,.12); border-radius:20px; background:rgba(255,253,249,.88); box-shadow:var(--shadow); }.setup-guide h2 { margin:3px 0 0; font-size:1.15rem; }.setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }.setup-steps li { display:flex; gap:10px; min-width:0; }.step-number { flex:0 0 auto; color:#bd560e; font:800 .72rem/1.5 'DM Mono',monospace; }.setup-steps strong { display:block; color:#332117; font-size:.76rem; }.setup-steps p { margin:3px 0 0; color:var(--muted); font-size:.66rem; }.setup-steps code { color:#763200; font-size:.65rem; }.empty-state { padding:28px; color:var(--muted); text-align:center; }.retry-block { margin-top:12px; text-align:center; }.skeleton-row td { padding:15px 8px; }.skeleton { display:block; width:80%; height:11px; margin:0 auto; border-radius:8px; background:linear-gradient(90deg,#eee7df 25%,#f8f4ef 50%,#eee7df 75%); background-size:200% 100%; animation:shimmer 1.25s infinite; }
.toast { position:fixed; z-index:10; left:50%; bottom:20px; max-width:calc(100% - 32px); padding:10px 15px; color:#fff; background:#332319; border-radius:99px; box-shadow:0 8px 24px rgba(0,0,0,.18); transform:translate(-50%,120%); opacity:0; transition:.25s; font-size:.8rem; }.toast.show { transform:translate(-50%,0); opacity:1; } footer { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 20px; color:#887d71; text-align:center; font-size:.72rem; } footer a { color:#6e5040; font-weight:700; text-decoration:none; } footer a:hover { color:var(--orange-dark); text-decoration:underline; }
@keyframes shimmer { to { background-position:-200% 0; } } @keyframes rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (max-width:800px) { .content-grid { grid-template-columns:1fr; }.page-shell { padding-top:28px; }.domain-panel,.data-panel { padding:19px; } }
@media (max-width:700px) { .setup-guide { grid-template-columns:1fr; gap:16px; margin-top:16px; }.setup-steps { gap:12px; } }
@media (min-width:801px) and (min-height:750px) { html,body { height:100%; overflow-y:hidden; }.page-shell { min-height:0; } }
@media (max-width:560px) { .page-shell { width:min(100% - 24px,1180px); }.hero { align-items:flex-start; flex-direction:row; justify-content:space-between; gap:12px; }.hero > div:first-child { flex:1; min-width:0; }.hero h1 { gap:7px; font-size:clamp(1.8rem,9vw,2.35rem); }.hero-copy { font-size:.76rem; }.port-lock { align-self:auto; flex:0 0 auto; gap:7px; padding:8px 10px; border-radius:14px; }.port-lock .material-symbols-outlined { font-size:20px; }.port-lock strong { font-size:.95rem; }.port-lock small { font-size:.54rem; }.notice-card { align-items:flex-start; }.notice-card p { font-size:.78rem; }.domain-card { align-items:flex-start; flex-direction:column; width:100%; min-width:0; }.domain-copy,.domain-actions { max-width:100%; }.domain-copy code { white-space:normal; }.domain-actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; min-width:0; }.domain-actions .button { width:100%; min-width:0; padding:0 8px; overflow:hidden; }.section-heading { align-items:flex-start; flex-direction:column; }.sync-status { text-align:left; }.summary-heading { align-items:flex-start; flex-direction:column; gap:4px; }.source-timestamp { text-align:left; }.metric-grid { grid-template-columns:1fr; }.metric-card { display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; }.metric-card span { grid-column:1; }.metric-card strong { grid-row:1 / span 2; grid-column:2; margin:0; }.metric-card small { grid-column:1; }.connection-tip { font-size:.67rem; }.setup-guide { padding:18px; }.setup-steps { grid-template-columns:1fr; gap:14px; }.setup-steps li { gap:11px; }.setup-steps p { font-size:.68rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }