Lavish Analytics

Lavish Analytics — Basel Sweidan

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
–paper: #f5f0e8;
–paper-dark: #ece6d4;
–ink: #1a1208;
–ink-light: #5a4a2a;
–ink-muted: #8a7a5a;
–gold: #c9a84c;
–red: #8B1A1A;
–win-bg: #c0c0c0;
–win-blue: #000080;
–win-blue-light: #1084d0;
–white: #ffffff;
–shadow-dark: #404040;
–shadow-mid: #808080;
}

html { scroll-behavior: smooth; }

body {
background: var(–win-bg);
font-family: ‘Courier Prime’, ‘Courier New’, monospace;
font-size: 13px;
color: var(–ink);
min-height: 100vh;
padding: 8px;
}

/* ── WIN95 CHROME ── */
.os-window {
border-top: 2px solid #dfdfdf;
border-left: 2px solid #dfdfdf;
border-right: 2px solid var(–shadow-dark);
border-bottom: 2px solid var(–shadow-dark);
box-shadow: inset 1px 1px 0 var(–white), inset -1px -1px 0 var(–shadow-mid);
max-width: 1100px;
margin: 0 auto;
}

.titlebar {
background: linear-gradient(to right, var(–win-blue), var(–win-blue-light));
color: var(–white);
font-family: ‘Arial’, sans-serif;
font-weight: 700;
font-size: 12px;
padding: 4px 8px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}

.titlebar-left { display: flex; align-items: center; gap: 6px; }

.win-btns { display: flex; gap: 2px; }
.win-btn {
width: 18px; height: 16px;
background: var(–win-bg);
font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
cursor: default;
border-top: 1px solid var(–white);
border-left: 1px solid var(–white);
border-right: 1px solid var(–shadow-dark);
border-bottom: 1px solid var(–shadow-dark);
font-family: ‘Arial’, sans-serif;
color: var(–ink);
transition: filter 0.1s;
}
.win-btn:hover { filter: brightness(0.9); }
.win-btn:active {
border-top: 1px solid var(–shadow-dark);
border-left: 1px solid var(–shadow-dark);
border-right: 1px solid var(–white);
border-bottom: 1px solid var(–white);
}

.menubar {
background: var(–win-bg);
padding: 2px 6px;
display: flex;
gap: 0;
border-bottom: 1px solid var(–shadow-mid);
font-family: ‘Arial’, sans-serif;
font-size: 12px;
}
.menu-item {
padding: 3px 10px;
cursor: default;
color: var(–ink);
border: 1px solid transparent;
}
.menu-item:hover {
background: var(–win-blue);
color: var(–white);
}
.menu-item.active {
background: var(–win-blue);
color: var(–white);
}

/* ── TICKER ── */
.ticker-wrap {
background: var(–ink);
overflow: hidden;
white-space: nowrap;
padding: 5px 0;
border-bottom: 2px solid var(–gold);
}
.ticker-track {
display: inline-block;
animation: ticker 28s linear infinite;
font-family: ‘Courier Prime’, monospace;
font-size: 11px;
letter-spacing: 1.5px;
color: var(–paper);
}
.ticker-track .gold { color: var(–gold); }
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* ── NEWSPAPER MASTHEAD ── */
.masthead {
background: var(–paper);
padding: 16px 20px 12px;
border-top: 2px solid var(–shadow-mid);
border-left: 2px solid var(–shadow-mid);
border-right: 2px solid var(–white);
border-bottom: 2px solid var(–white);
}

.masthead-meta {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(–ink-muted);
font-style: italic;
padding-bottom: 8px;
border-bottom: 1px solid var(–ink);
margin-bottom: 10px;
font-family: ‘Courier Prime’, monospace;
}

.nameplate {
font-family: ‘Libre Baskerville’, serif;
font-size: clamp(40px, 6vw, 72px);
line-height: 1;
text-align: center;
color: var(–ink);
letter-spacing: 1px;
}

.masthead-rule {
border: none;
border-top: 3px double var(–ink);
margin: 8px 0;
}

.masthead-sub {
text-align: center;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(–ink);
font-family: ‘Arial’, sans-serif;
padding: 3px 0;
}

/* ── MAIN BODY ── */
.paper-body {
background: var(–paper);
padding: 16px 20px;
border-top: 2px solid var(–shadow-mid);
border-left: 2px solid var(–shadow-mid);
border-right: 2px solid var(–white);
border-bottom: 2px solid var(–white);
display: grid;
grid-template-columns: 1.7fr 1px 1.1fr 1px 0.85fr;
gap: 0;
}

.col-divider { background: var(–ink); margin: 0 14px; }

/* ── COLUMN 1 ── */
.col-1 { padding-right: 4px; }

.headline {
font-family: ‘Playfair Display’, serif;
font-size: clamp(22px, 3vw, 32px);
font-weight: 900;
line-height: 1.05;
margin-bottom: 8px;
color: var(–ink);
}
.headline em { font-style: italic; }

.byline {
font-size: 9px;
color: var(–ink-muted);
font-style: italic;
padding-bottom: 8px;
border-bottom: 1px solid #ccc;
margin-bottom: 12px;
font-family: ‘Courier Prime’, monospace;
}

.cred-box {
display: flex;
align-items: center;
gap: 10px;
background: var(–paper-dark);
padding: 8px 10px;
margin-bottom: 12px;
border-top: 1px solid var(–white);
border-left: 1px solid var(–white);
border-right: 1px solid var(–shadow-mid);
border-bottom: 1px solid var(–shadow-mid);
}
.cred-icon { font-size: 20px; }
.cred-text { font-family: ‘Arial’, sans-serif; font-size: 10px; line-height: 1.6; color: #444; }
.cred-text strong { display: block; font-size: 11px; color: var(–ink); }

.body-copy {
font-size: 11px;
line-height: 1.85;
color: #2a2a2a;
text-align: justify;
font-family: ‘Courier Prime’, monospace;
}

.body-copy.drop-cap::first-letter {
font-family: ‘Playfair Display’, serif;
font-size: 44px;
font-weight: 900;
float: left;
line-height: 0.78;
margin-right: 5px;
margin-top: 5px;
color: var(–ink);
}

.pull-quote {
font-family: ‘Playfair Display’, serif;
font-style: italic;
font-size: 13px;
line-height: 1.6;
border-top: 2px solid var(–ink);
border-bottom: 2px solid var(–ink);
padding: 10px 6px;
margin: 14px 0;
text-align: center;
color: var(–ink);
}
.pull-attr {
font-family: ‘Courier Prime’, monospace;
font-style: normal;
font-size: 9px;
color: var(–ink-muted);
display: block;
margin-top: 5px;
}

.stamp {
display: inline-block;
border: 3px solid var(–red);
color: var(–red);
font-family: ‘Arial’, sans-serif;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
padding: 4px 10px;
transform: rotate(-3deg);
margin-top: 14px;
}

/* ── COLUMN 2 ── */
.col-2 { padding: 0 4px; }

.section-head {
font-family: ‘Arial’, sans-serif;
font-size: 9px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
border-bottom: 2px solid var(–ink);
padding-bottom: 4px;
margin-bottom: 10px;
color: var(–ink);
}

.flagship {
background: var(–ink);
color: var(–paper);
padding: 10px 12px;
margin-bottom: 10px;
}
.flagship-badge {
display: inline-block;
background: var(–gold);
color: var(–ink);
font-family: ‘Arial’, sans-serif;
font-size: 8px;
letter-spacing: 1px;
font-weight: 700;
padding: 2px 6px;
margin-bottom: 5px;
text-transform: uppercase;
}
.flagship .proj-tag { color: var(–gold); }
.flagship .proj-title { color: var(–paper); }
.flagship .proj-desc { color: #bbb; }
.flagship .proj-result { color: var(–gold); border-left-color: var(–gold); }

.proj-tag {
font-family: ‘Arial’, sans-serif;
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(–ink-muted);
margin-bottom: 3px;
}
.proj-title {
font-family: ‘Playfair Display’, serif;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 4px;
color: var(–ink);
}
.proj-desc {
font-family: ‘Courier Prime’, monospace;
font-size: 10px;
line-height: 1.6;
color: #444;
}
.proj-result {
font-family: ‘Arial’, sans-serif;
font-size: 9px;
font-weight: 700;
color: var(–ink);
border-left: 2px solid var(–ink);
padding-left: 6px;
margin-top: 6px;
}

.project-item {
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
.project-item:last-of-type { border-bottom: none; }

/* Win95 skills panel */
.skills-panel {
background: var(–win-bg);
margin-top: 12px;
border-top: 1px solid var(–white);
border-left: 1px solid var(–white);
border-right: 1px solid var(–shadow-mid);
border-bottom: 1px solid var(–shadow-mid);
}
.skills-titlebar {
background: linear-gradient(to right, var(–win-blue), var(–win-blue-light));
color: var(–white);
font-family: ‘Arial’, sans-serif;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
}
.skills-body { padding: 8px; }
.skill-row { margin-bottom: 5px; }
.skill-label {
font-family: ‘Arial’, sans-serif;
font-size: 9px;
margin-bottom: 2px;
color: var(–ink);
}
.skill-track {
height: 11px;
background: var(–white);
border-top: 1px solid var(–shadow-mid);
border-left: 1px solid var(–shadow-mid);
border-right: 1px solid var(–white);
border-bottom: 1px solid var(–white);
}
.skill-fill {
height: 100%;
background: repeating-linear-gradient(
90deg,
var(–win-blue) 0px, var(–win-blue) 8px,
var(–win-blue-light) 8px, var(–win-blue-light) 9px
);
}

/* ── COLUMN 3 ── */
.col-3 { padding-left: 4px; }

.service-list { list-style: none; margin-bottom: 12px; }
.service-list li {
font-family: ‘Courier Prime’, monospace;
font-size: 10px;
padding: 5px 0;
border-bottom: 1px dotted #aaa;
display: flex;
justify-content: space-between;
align-items: baseline;
color: var(–ink);
}
.service-list li:last-child { border-bottom: none; }
.svc-note {
font-style: italic;
font-size: 9px;
color: var(–ink-muted);
}

.nonprofit-box {
background: var(–ink);
color: var(–paper);
padding: 10px 12px;
margin-bottom: 12px;
}
.nonprofit-box .section-head {
color: var(–gold);
border-bottom-color: var(–gold);
}
.nonprofit-box p {
font-family: ‘Courier Prime’, monospace;
font-size: 10px;
line-height: 1.7;
color: #ccc;
}

.advert {
border: 2px solid var(–ink);
padding: 10px;
text-align: center;
background: #fffdf5;
margin-bottom: 12px;
}
.advert-head {
font-family: ‘Playfair Display’, serif;
font-size: 14px;
font-weight: 900;
font-style: italic;
color: var(–ink);
line-height: 1.2;
margin-bottom: 5px;
}
.advert-body {
font-family: ‘Courier Prime’, monospace;
font-size: 9px;
line-height: 1.7;
color: #444;
margin-bottom: 8px;
}
.advert-btn {
display: inline-block;
border: 1px solid var(–ink);
font-family: ‘Arial’, sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
padding: 4px 12px;
color: var(–ink);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.advert-btn:hover { background: var(–ink); color: var(–paper); }
.advert-email {
font-size: 8px;
color: var(–ink-muted);
font-style: italic;
margin-top: 6px;
font-family: ‘Courier Prime’, monospace;
}

.colophon {
font-family: ‘Courier Prime’, monospace;
font-size: 9px;
color: var(–ink-muted);
line-height: 1.9;
border-top: 1px solid #ccc;
padding-top: 10px;
}
.colophon strong { color: var(–ink); font-weight: 700; }

/* ── STATUS BAR ── */
.statusbar {
background: var(–win-bg);
padding: 3px 6px;
display: flex;
gap: 3px;
border-top: 1px solid var(–shadow-mid);
font-family: ‘Arial’, sans-serif;
}
.status-pane {
flex: 1;
font-size: 10px;
padding: 2px 8px;
color: var(–ink);
border-top: 1px solid var(–shadow-mid);
border-left: 1px solid var(–shadow-mid);
border-right: 1px solid var(–white);
border-bottom: 1px solid var(–white);
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
body { padding: 4px; }
.paper-body {
grid-template-columns: 1fr;
}
.col-divider { display: none; }
.col-1, .col-2, .col-3 {
padding: 0 0 16px 0;
border-bottom: 1px solid #ccc;
}
.col-3 { border-bottom: none; }
.masthead-meta { flex-direction: column; gap: 2px; }
.statusbar { flex-direction: column; }
}