/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Tokens
========================================= */
:root{
--bg:#f6f7f8;
--paper:#ffffff;
--ink:#0f1113;
--muted:#4b5563;
--line:#d5dbe3;
--line-strong:#a9b3c2;
--c-grey:#616e7c;
--c-grey-dark:#3a424d;
--c-charcoal:#111314;
--c-silver:#cfd6de;
--c-green:#0b7e59;
--c-blue:#3763e0;
--c-amber:#d97706;
--c-red:#c0352b;
--font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-serif:"Literata", Georgia, "Times New Roman", Times, serif;
--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
Consolas, "Liberation Mono", "Courier New", monospace;
--fs-xs:0.75rem;
--fs-sm:0.8125rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:1.25rem;
--fs-2xl:1.5rem;
--fs-3xl:1.875rem;
--fs-4xl:2.25rem;
--fs-h1:clamp(1.75rem, 3.2vw, 2.25rem);
--fs-h2:clamp(1.5rem, 2.8vw, 1.875rem);
--fs-h3:clamp(1.25rem, 2.4vw, 1.5rem);
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--space-12:3rem;
--space-16:4rem;
--container:1160px;
--container-sm:720px;
--container-lg:1440px;
--radius:0;
--shadow:none;
--transition-fast:150ms ease;
--transition-base:200ms ease;
--transition-slow:300ms ease;
}
@media (prefers-color-scheme:dark){
:root{
--bg:#0c0d0f;
--paper:#111316;
--ink:#e9eef2;
--muted:#9aa4b2;
--line:#2a2f37;
--line-strong:#3a414c;
--c-silver:#555e6b;
}
}
html[data-theme="dark"]{
--bg:#0c0d0f;
--paper:#111316;
--ink:#e9eef2;
--muted:#9aa4b2;
--line:#2a2f37;
--line-strong:#3a414c;
--c-silver:#555e6b;
}
html[data-theme="light"]{
--bg:#f6f7f8;
--paper:#ffffff;
--ink:#0f1113;
--muted:#4b5563;
--line:#d5dbe3;
--line-strong:#a9b3c2;
--c-silver:#cfd6de;
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Reset
========================================= */
*,
*::before,
*::after{
box-sizing:border-box;
}
*{
margin:0;
padding:0;
}
html{
-webkit-text-size-adjust:100%;
tab-size:4;
}
html,
body{
height:100%;
}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--font-sans);
font-size:var(--fs-base);
line-height:1.62;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
padding-bottom:var(--space-16);
}
img,
svg,
video,
canvas,
iframe{
max-width:100%;
height:auto;
display:block;
}
button,
input,
optgroup,
select,
textarea{
font-family:inherit;
font-size:100%;
line-height:inherit;
color:inherit;
margin:0;
}
button,
[type="button"],
[type="reset"],
[type="submit"]{
-webkit-appearance:button;
cursor:pointer;
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Typography
========================================= */
h1, h2, h3, h4, h5, h6{
font-weight:800;
letter-spacing:0.2px;
line-height:1.1;
}
h1{
font-size:var(--fs-h1);
margin:var(--space-12) 0 var(--space-5);
}
h1:first-child{
margin-top:0;
}
h2{
font-size:var(--fs-h2);
margin:var(--space-10) 0 var(--space-4);
}
h3{
font-size:var(--fs-h3);
margin:var(--space-6) 0 var(--space-3);
font-weight:700;
}
h4{
font-size:var(--fs-xl);
margin:var(--space-4) 0 var(--space-2);
font-weight:700;
}
h5{
font-size:var(--fs-lg);
margin:var(--space-4) 0 var(--space-2);
font-weight:600;
}
h6{
font-size:var(--fs-base);
margin:var(--space-3) 0 var(--space-2);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
p{
margin:var(--space-3) 0;
}
a{
color:var(--c-blue);
text-decoration:underline;
text-decoration-thickness:0.08em;
text-underline-offset:2px;
transition:color var(--transition-fast);
}
a:hover{
color:var(--ink);
}
a:visited{
color:var(--c-blue);
}
strong, b{
font-weight:700;
}
em, i{
font-style:italic;
}
small, .small{
font-size:var(--fs-sm);
color:var(--muted);
}
.muted{
color:var(--muted);
}
.text-sm{
font-size:var(--fs-sm);
}
.text-lg{
font-size:var(--fs-lg);
}
.text-xl{
font-size:var(--fs-xl);
}
code,
kbd,
pre,
samp{
font-family:var(--font-mono);
font-size:0.9em;
}
code{
background:var(--paper);
border:1px solid var(--line);
padding:0.15em 0.35em;
border-radius:3px;
}
pre{
background:var(--paper);
border:1px solid var(--line);
padding:var(--space-4);
overflow-x:auto;
border-radius:3px;
}
pre code{
background:none;
border:none;
padding:0;
}
ul, ol{
padding-left:var(--space-6);
margin:var(--space-3) 0;
}
li{
margin:var(--space-2) 0;
}
blockquote{
border-left:4px solid var(--line-strong);
padding-left:var(--space-4);
margin:var(--space-5) 0;
color:var(--muted);
font-style:italic;
}
hr{
border:0;
border-top:1px solid var(--line);
margin:var(--space-8) 0;
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Layout
========================================= */
.container{
max-width:var(--container);
margin:0 auto;
padding:0 var(--space-4);
}
.container-sm{
max-width:var(--container-sm);
margin:0 auto;
padding:0 var(--space-4);
}
.container-lg{
max-width:var(--container-lg);
margin:0 auto;
padding:0 var(--space-4);
}
main.container{
padding-bottom:var(--space-12);
}
.topbar{
border-bottom:1px solid var(--line);
padding:var(--space-16) 0 var(--space-6);
}
.brand-title{
font-size:clamp(2rem, 5vw, 3rem);
font-weight:900;
line-height:1.03;
}
.brand-sep{
display:flex;
gap:6px;
margin:var(--space-2) 0;
}
.brand-sep .sw{
width:42px;
height:10px;
border:1px solid var(--line);
}
.brand-sub{
font-size:var(--fs-lg);
font-weight:700;
color:var(--muted);
}
.routebar{
margin:var(--space-3) 0 var(--space-6);
background:var(--paper);
border:1px solid var(--line-strong);
padding:var(--space-2) var(--space-3);
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
align-items:center;
font-size:var(--fs-sm);
}
.routebar .breadcrumb-item{
display:inline-flex;
align-items:center;
gap:var(--space-2);
}
.routebar .breadcrumb-item a{
text-decoration:none;
color:var(--c-blue);
}
.routebar .breadcrumb-item a:hover{
text-decoration:underline;
}
.routebar .domain{
font-weight:800;
}
.routebar .sep{
color:var(--muted);
}
.grid{
display:grid;
gap:var(--space-4);
}
.grid-2{grid-template-columns:repeat(2, 1fr);}
.grid-3{grid-template-columns:repeat(3, 1fr);}
.grid-4{grid-template-columns:repeat(4, 1fr);}
.flex{
display:flex;
}
.flex-col{
flex-direction:column;
}
.items-center{
align-items:center;
}
.justify-between{
justify-content:space-between;
}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.nav{
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
margin-top:var(--space-3);
}
.tab{
padding:var(--space-2) var(--space-3);
border:1px solid var(--line-strong);
text-decoration:none;
color:inherit;
border-radius:var(--radius);
background:var(--paper);
font-weight:600;
font-size:var(--fs-sm);
cursor:pointer;
transition:all var(--transition-fast);
}
.tab:hover{
background:var(--bg);
border-color:var(--c-grey-dark);
}
.tab.active{
background:var(--c-grey-dark);
color:var(--paper);
border-color:var(--c-grey-dark);
border-bottom-color:var(--c-grey-dark);
position:relative;
z-index:1;
}
.brandbar{
position:sticky;
bottom:0;
left:0;
right:0;
z-index:10;
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--space-3);
padding:var(--space-2) var(--space-3);
border-top:1px solid var(--line);
background:var(--paper);
}
.brandbar-title a{
font-weight:800;
text-decoration:none;
color:inherit;
}
.brandbar-sw{
display:flex;
gap:6px;
}
.brandbar-sw span{
display:inline-block;
width:42px;
height:10px;
border:1px solid var(--line-strong);
}
.brandbar-sw span:nth-child(1){background:var(--c-charcoal);}
.brandbar-sw span:nth-child(2){background:var(--c-grey);}
.brandbar-sw span:nth-child(3){background:var(--c-silver);}
.brandbar-sw span:nth-child(4){background:var(--c-green);}
.brandbar-sw span:nth-child(5){background:var(--c-blue);}
.section-divider{
margin:var(--space-12) 0;
border:0;
border-top:1px solid var(--line-strong);
}
.section-divider.thick{
border-top-width:2px;
}
.sidebar{
position:sticky;
top:var(--space-4);
max-height:calc(100vh - var(--space-8));
overflow-y:auto;
border:1px solid var(--line);
background:var(--paper);
padding:var(--space-4);
}
.sidebar-nav{
list-style:none;
padding:0;
margin:0;
}
.sidebar-nav li{
margin:0;
}
.sidebar-nav a{
display:block;
padding:var(--space-2) var(--space-3);
text-decoration:none;
color:inherit;
border-left:2px solid transparent;
transition:all var(--transition-fast);
}
.sidebar-nav a:hover{
background:var(--bg);
border-left-color:var(--c-blue);
}
.sidebar-nav a.active{
background:var(--bg);
border-left-color:var(--c-blue);
font-weight:600;
}
.sidebar-nav .sidebar-nav{
margin-left:var(--space-4);
font-size:var(--fs-sm);
}
.sidebar-title{
font-size:var(--fs-sm);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
color:var(--muted);
margin-bottom:var(--space-3);
}
#themeToggle{
padding:var(--space-2) var(--space-3);
border:1px solid var(--line-strong);
background:var(--paper);
color:inherit;
font-weight:600;
font-size:var(--fs-sm);
cursor:pointer;
display:inline-flex;
align-items:center;
gap:var(--space-2);
transition:all var(--transition-fast);
}
#themeToggle:hover{
background:var(--bg);
border-color:var(--ink);
}
#themeToggle::before{
content:'\2600';
font-size:var(--fs-lg);
line-height:1;
}
html[data-theme="dark"] #themeToggle::before{
content:'\263E';
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Buttons
========================================= */
.btn{
display:inline-block;
padding:var(--space-2) var(--space-4);
border:1px solid var(--line-strong);
background:var(--paper);
color:var(--ink);
font-weight:600;
font-size:var(--fs-base);
text-decoration:none;
cursor:pointer;
transition:all var(--transition-fast);
border-radius:var(--radius);
}
.btn:hover{
background:var(--bg);
border-color:var(--ink);
}
.btn-primary{
background:var(--c-blue);
color:white;
border-color:var(--c-blue);
}
.btn-primary:hover{
background:#2952cc;
border-color:#2952cc;
}
.btn-success{
background:var(--c-green);
color:white;
border-color:var(--c-green);
}
.btn-success:hover{
background:#096b4d;
border-color:#096b4d;
}
.btn-danger{
background:var(--c-red);
color:white;
border-color:var(--c-red);
}
.btn-danger:hover{
background:#a02d25;
border-color:#a02d25;
}
.btn-sm{
padding:var(--space-1) var(--space-3);
font-size:var(--fs-sm);
}
.btn-lg{
padding:var(--space-3) var(--space-5);
font-size:var(--fs-lg);
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Cards
========================================= */
.card{
background:var(--paper);
border:1px solid var(--line);
padding:var(--space-5);
margin-bottom:var(--space-5);
}
.card-header{
border-bottom:1px solid var(--line);
padding-bottom:var(--space-3);
margin-bottom:var(--space-4);
}
.card-footer{
border-top:1px solid var(--line);
padding-top:var(--space-3);
margin-top:var(--space-4);
}
.card-compact{
padding:var(--space-3);
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Tables
========================================= */
.table-wrap{
width:100%;
overflow-x:auto;
margin-bottom:var(--space-6);
}
table{
width:100%;
border-collapse:collapse;
font-variant-numeric:tabular-nums;
}
th,
td{
border:1px solid var(--line);
padding:var(--space-3) var(--space-3);
vertical-align:top;
text-align:left;
}
thead th{
background:#eef1f5;
font-weight:600;
position:sticky;
top:0;
z-index:1;
}
html[data-theme="dark"] thead th{
background:#1a1d23;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) thead th{
background:#1a1d23;
}
}
tr:nth-child(odd) td{
background:var(--paper);
}
tr:nth-child(even) td{
background:var(--bg);
}
.table-compact th,
.table-compact td{
padding:var(--space-2) var(--space-2);
font-size:var(--fs-sm);
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Forms
========================================= */
.form-group{
margin-bottom:var(--space-4);
}
.form-label{
display:block;
font-weight:600;
margin-bottom:var(--space-2);
}
.form-input,
.form-select,
.form-textarea{
width:100%;
padding:var(--space-2) var(--space-3);
border:1px solid var(--line-strong);
background:var(--paper);
color:var(--ink);
font-family:inherit;
font-size:var(--fs-base);
transition:border-color var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{
outline:none;
border-color:var(--c-blue);
}
.form-textarea{
min-height:120px;
resize:vertical;
}
.form-checkbox,
.form-radio{
margin-right:var(--space-2);
}
.form-help{
font-size:var(--fs-sm);
color:var(--muted);
margin-top:var(--space-1);
}
.form-error{
font-size:var(--fs-sm);
color:var(--c-red);
margin-top:var(--space-1);
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Alerts
========================================= */
.alert{
padding:var(--space-4) var(--space-4);
border-radius:var(--radius);
border:1px solid var(--line-strong);
margin-bottom:var(--space-4);
}
.alert-success{
border-color:var(--c-green);
background:#ecfdf5;
color:#065f46;
}
.alert-error{
border-color:var(--c-red);
background:#fef2f2;
color:#7f1d1d;
}
.alert-warn{
border-color:var(--c-amber);
background:#fffbeb;
color:#78350f;
}
.alert-info{
border-color:var(--c-blue);
background:#eff6ff;
color:#1e3a8a;
}
html[data-theme="dark"] .alert-success{
background:#064e3b;
color:#a7f3d0;
}
html[data-theme="dark"] .alert-error{
background:#7f1d1d;
color:#fecaca;
}
html[data-theme="dark"] .alert-warn{
background:#78350f;
color:#fde68a;
}
html[data-theme="dark"] .alert-info{
background:#1e3a8a;
color:#bfdbfe;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .alert-success{
background:#064e3b;
color:#a7f3d0;
}
:root:not([data-theme="light"]) .alert-error{
background:#7f1d1d;
color:#fecaca;
}
:root:not([data-theme="light"]) .alert-warn{
background:#78350f;
color:#fde68a;
}
:root:not([data-theme="light"]) .alert-info{
background:#1e3a8a;
color:#bfdbfe;
}
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Badges
========================================= */
.pill{
display:inline-block;
padding:0.15rem 0.5rem;
border:1px solid var(--line-strong);
background:var(--paper);
font-weight:600;
font-size:var(--fs-sm);
white-space:nowrap;
}
.pill--ok{
color:var(--c-green);
border-color:var(--c-green);
}
.pill--err{
color:var(--c-red);
border-color:var(--c-red);
}
.pill--warn{
color:var(--c-amber);
border-color:var(--c-amber);
}
.pill--info{
color:var(--c-blue);
border-color:var(--c-blue);
}
.dot{
width:12px;
height:12px;
border-radius:999px;
display:inline-block;
border:1px solid var(--line);
vertical-align:middle;
margin-right:var(--space-2);
}
.dot.ok{
background:var(--c-green);
border-color:var(--c-green);
}
.dot.err{
background:var(--c-red);
border-color:var(--c-red);
}
.dot.warn{
background:var(--c-amber);
border-color:var(--c-amber);
}
.dot.info{
background:var(--c-blue);
border-color:var(--c-blue);
}
.badge{
display:inline-block;
padding:0.25rem 0.5rem;
border:1px solid var(--line-strong);
background:var(--paper);
font-weight:600;
font-size:var(--fs-xs);
text-transform:uppercase;
letter-spacing:0.5px;
white-space:nowrap;
}
.badge-vps-dev{
background:#dbeafe;
color:#1e40af;
border-color:#93c5fd;
}
.badge-vps-control{
background:#d1fae5;
color:#065f46;
border-color:#6ee7b7;
}
.badge-vps-deploy{
background:#fef3c7;
color:#92400e;
border-color:#fcd34d;
}
html[data-theme="dark"] .badge-vps-dev{
background:#1e3a8a;
color:#bfdbfe;
}
html[data-theme="dark"] .badge-vps-control{
background:#064e3b;
color:#a7f3d0;
}
html[data-theme="dark"] .badge-vps-deploy{
background:#78350f;
color:#fde68a;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .badge-vps-dev{
background:#1e3a8a;
color:#bfdbfe;
}
:root:not([data-theme="light"]) .badge-vps-control{
background:#064e3b;
color:#a7f3d0;
}
:root:not([data-theme="light"]) .badge-vps-deploy{
background:#78350f;
color:#fde68a;
}
}
/* =========================================
ILLANES DESIGN SYSTEM v4.0.0 - Utilities
========================================= */
.m-0{margin:0;}
.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-6{margin-top:var(--space-6);}
.mb-4{margin-bottom:var(--space-4);}
.mb-6{margin-bottom:var(--space-6);}
.p-0{padding:0;}
.p-4{padding:var(--space-4);}
.p-6{padding:var(--space-6);}
.block{display:block;}
.inline{display:inline;}
.inline-block{display:inline-block;}
.hidden{display:none;}
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.font-normal{font-weight:400;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}
.w-full{width:100%;}
.w-auto{width:auto;}
@media (max-width:1024px){
.grid-4{
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width:768px){
body{
font-size:0.9375rem;
}
.container{
padding:0 var(--space-3);
}
th,
td{
padding:var(--space-2) var(--space-2);
}
.tab{
font-size:var(--fs-xs);
}
.brand-title{
padding-top:var(--space-4);
}
.grid-2,
.grid-3,
.grid-4{
grid-template-columns:1fr;
}
.brandbar{
flex-direction:column;
align-items:flex-start;
}
}
@media (max-width:480px){
.topbar{
padding-top:var(--space-8);
}
.table-wrap{
font-size:var(--fs-sm);
}
}
@media print{
body{
background:white;
color:black;
}
.topbar,
.brandbar,
.nav,
.btn{
display:none;
}
a{
text-decoration:underline;
}
a[href]:after{
content:" (" attr(href) ")";
}
}