<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Company Links Hub</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link href=”https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Syne:wght@400;600&display=swap” rel=”stylesheet”>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–bg: #0f0f0f;
–surface: #1a1a1a;
–surface2: #242424;
–border: rgba(255,255,255,0.08);
–border-hover: rgba(255,255,255,0.18);
–text: #f0ede8;
–text-muted: #888;
–text-dim: #555;
–accent-dev: #3b82f6;
–accent-staging: #f59e0b;
–accent-prod: #10b981;
–accent-other: #a78bfa;
–font-display: ‘Syne’, sans-serif;
–font-mono: ‘IBM Plex Mono’, monospace;
}
body {
background: var(–bg);
color: var(–text);
font-family: var(–font-mono);
min-height: 100vh;
padding: 3rem 2rem 4rem;
}
header {
margin-bottom: 3.5rem;
border-left: 2px solid var(–text-dim);
padding-left: 1.25rem;
}
header h1 {
font-family: var(–font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(–text);
line-height: 1.1;
}
header p {
font-size: 0.78rem;
color: var(–text-dim);
margin-top: 0.4rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.wrapper {
max-width: 860px;
margin: 0 auto;
}
.category {
margin-bottom: 2.5rem;
}
.category-label {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(–text-dim);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.category-label::after {
content: ”;
flex: 1;
height: 1px;
background: var(–border);
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.link-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(–surface);
border: 1px solid var(–border);
border-radius: 6px;
color: var(–text);
font-family: var(–font-mono);
font-size: 0.82rem;
padding: 0.55rem 1rem;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
.link-btn:hover {
background: var(–surface2);
border-color: var(–border-hover);
transform: translateY(-1px);
}
.link-btn:active {
transform: translateY(0);
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-dev { background: var(–accent-dev); }
.dot-staging { background: var(–accent-staging); }
.dot-prod { background: var(–accent-prod); }
.dot-other { background: var(–accent-other); }
.env-tag {
font-size: 0.65rem;
letter-spacing: 0.06em;
padding: 0.15rem 0.45rem;
border-radius: 3px;
font-weight: 500;
}
.tag-dev { background: rgba(59,130,246,0.15); color: #60a5fa; }
.tag-staging { background: rgba(245,158,11,0.15); color: #fbbf24; }
.tag-prod { background: rgba(16,185,129,0.15); color: #34d399; }
.tag-other { background: rgba(167,139,250,0.15); color: #c4b5fd; }
footer {
margin-top: 4rem;
border-top: 1px solid var(–border);
padding-top: 1.25rem;
font-size: 0.7rem;
color: var(–text-dim);
letter-spacing: 0.04em;
}
</style>
</head>
<body>
<div class=”wrapper”>
<header>
<h1>Company Links Hub</h1>
<p>Internal tools & environments</p>
</header>
<!– ============================================================
HOW TO ADD / EDIT / REMOVE LINKS
============================================================
Each category is a <div class=”category”> block.
Each link is an <a class=”link-btn”> inside .buttons.
To EDIT a link: change the href=”…” and the text between > and </a>
To ADD a link: copy an existing <a> block and paste it inside .buttons
To DELETE a link: remove the entire <a …>…</a> line
To ADD a category: copy a full .category block and update the label + links
ENV COLORS:
DEV → dot-dev + tag-dev
STAGING → dot-staging + tag-staging
PROD → dot-prod + tag-prod
OTHER → dot-other + tag-other
============================================================ –>
<div class=”category”>
<div class=”category-label”>Console</div>
<div class=”buttons”>
<a class=”link-btn” href=”https://placeholder-console-dev.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-dev”></span>
Console
<span class=”env-tag tag-dev”>DEV</span>
</a>
<a class=”link-btn” href=”https://placeholder-console-staging.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-staging”></span>
Console
<span class=”env-tag tag-staging”>STAGING</span>
</a>
<a class=”link-btn” href=”https://placeholder-console-prod.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-prod”></span>
Console
<span class=”env-tag tag-prod”>PROD</span>
</a>
</div>
</div>
<div class=”category”>
<div class=”category-label”>Admin Old</div>
<div class=”buttons”>
<a class=”link-btn” href=”https://placeholder-admin-old-dev.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-dev”></span>
Admin Old
<span class=”env-tag tag-dev”>DEV</span>
</a>
<a class=”link-btn” href=”https://placeholder-admin-old-prod.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-prod”></span>
Admin Old
<span class=”env-tag tag-prod”>PROD</span>
</a>
</div>
</div>
<div class=”category”>
<div class=”category-label”>New Admin</div>
<div class=”buttons”>
<a class=”link-btn” href=”https://placeholder-new-admin-dev.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-dev”></span>
New Admin
<span class=”env-tag tag-dev”>DEV</span>
</a>
<a class=”link-btn” href=”https://placeholder-new-admin-prod.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-prod”></span>
New Admin
<span class=”env-tag tag-prod”>PROD</span>
</a>
</div>
</div>
<div class=”category”>
<div class=”category-label”>Other</div>
<div class=”buttons”>
<a class=”link-btn” href=”https://placeholder-polaris.example.com” target=”_blank” rel=”noopener”>
<span class=”dot dot-other”></span>
Polaris
<span class=”env-tag tag-other”>TOOL</span>
</a>
</div>
</div>
<footer>links open in a new tab · edit index.html to add or update links</footer>
</div>
</body>
</html>