/* ================================================================
custom.css — sadiqnishat.com personalisation file
─────────────────────────────────────────────────────────────────
HOW TO USE
• Place this file in the same folder as index.html
• In index.html , the last line already loads it:
• Every rule here overrides the defaults in index.html.
• You never need to touch index.html for the settings below.
================================================================ */
/* ── 1. FONTS ────────────────────────────────────────────────────
Pick any family from https://fonts.google.com
Step 1: Replace the Google Fonts in index.html
Step 2: Change the font-family value below to match */
/* local stored font */
/* =============================================
SELF-HOSTED FONTS — CLS Fix (no font swap)
============================================= */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('assets/fonts/inter/inter-latin-300-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('assets/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 18px;
}
/* ── 2. NAVBAR SIZES ─────────────────────────────────────────── */
.nav-link { font-size: 0.95rem; } /* desktop nav link text */
.logo { font-size: 1.25rem; } /* logo container size */
/* Desktop */
.logo-text { letter-spacing: -0.3px; font-size: 1.5rem; }
/* Mobile override */
@media (max-width: 768px) {
.logo-text { font-size: 1.0rem !important; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ── 3. ACCENT COLOURS ───────────────────────────────────────────
These two colours drive everything: buttons, links, badges,
hover borders, gradient headings, and the CV pill.
Tip: keep primary + secondary visually harmonious. */
:root {
--accent-primary: #3b82f6; /* main blue */
--accent-secondary: #06b6d4; /* cyan */
--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
--accent-glow: rgba(59, 130, 246, 0.30);
}
[data-theme="dark"] {
--accent-primary: #60a5fa;
--accent-secondary: #22d3ee;
--accent-gradient: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
--accent-glow: rgba(96, 165, 250, 0.30);
}
/* ── 5. BACKGROUND ORBS ──────────────────────────────────────────
Three large soft blobs that make up the colour wash.
• Decrease → lighter / more neutral
• Change opacity on .liquid-glass-layer for overall brightness */
/* ── 5. ANIMATED PASTEL BACKGROUND ─────────────────────────── */
/* Override the existing liquid glass layers */
.liquid-glass-layer {
will-change: transform;
border-radius: 50%;
filter: blur(60px);
}
.layer-1 {
width: 600px;
height: 600px;
background: rgba(147, 197, 253, 0.45); /* soft blue */
top: -10%;
left: -5%;
animation: pulse-orb 8s ease-in-out infinite;
}
.layer-2 {
width: 500px;
height: 500px;
background: rgba(251, 182, 206, 0.40); /* soft pink */
top: 15%;
right: -5%;
animation: pulse-orb 10s ease-in-out infinite reverse;
}
.layer-3 {
width: 400px;
height: 400px;
background: rgba(196, 181, 253, 0.30); /* soft purple */
bottom: 10%;
left: 20%;
animation: pulse-orb 12s ease-in-out infinite 2s;
}
@keyframes pulse-orb {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.25);
opacity: 1;
}
}
/* Base colour — near white */
:root {
--bg-primary: #f8faff;
}
[data-theme="dark"] {
--bg-primary: #0a0a0f;
}
/* ── MOVING ARCS ──────────────────────────────────────────── */
.arc {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* Top-right large arc */
.arc-1 {
width: 800px;
height: 800px;
top: -300px;
right: -200px;
border: 2px solid rgba(147, 197, 253, 0.30);
clip-path: inset(50% 0 0 0);
animation: rotate-arc 22s linear infinite;
}
/* Bottom-left arc */
.arc-2 {
width: 550px;
height: 550px;
bottom: -150px;
left: -100px;
border: 2px solid rgba(251, 182, 206, 0.25);
clip-path: inset(0 0 50% 0);
animation: rotate-arc 30s linear infinite reverse;
}
/* Mid-right medium arc */
.arc-3 {
width: 400px;
height: 400px;
top: 40%;
right: 5%;
border: 1.5px solid rgba(196, 181, 253, 0.20);
clip-path: inset(0 50% 0 0);
animation: rotate-arc 18s linear infinite 3s;
}
/* Top-left small arc */
.arc-4 {
width: 300px;
height: 300px;
top: 5%;
left: 10%;
border: 1.5px solid rgba(147, 197, 253, 0.18);
clip-path: inset(0 0 0 50%);
animation: rotate-arc 25s linear infinite reverse 1s;
}
/* Centre-bottom wide arc */
.arc-5 {
width: 650px;
height: 650px;
bottom: 20%;
left: 30%;
border: 1.5px solid rgba(251, 182, 206, 0.15);
clip-path: inset(60% 0 0 0);
animation: rotate-arc 35s linear infinite 5s;
}
@keyframes rotate-arc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode — keep existing darker orbs */
[data-theme="dark"] .layer-1 { background: rgba(96, 165, 250, 0.35); }
[data-theme="dark"] .layer-2 { background: rgba(244, 114, 182, 0.25); }
[data-theme="dark"] .layer-3 { background: rgba(129, 140, 248, 0.20); }
/* ── 6. CARD GLASS TRANSPARENCY ──────────────────────────────────
0.65 = more glass (show background through)
0.90 = more solid (hide background) */
.research-card, .timeline-content, .education-card, .award-card,
.skill-category, .pub-card, .metric-card, .contact-method,
.contact-cta, .hero-education, .scholar-mini {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Map tile fix for dark mode */
#contact-map .leaflet-tile { filter: none; }
[data-theme="dark"] #contact-map {
filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] #contact-map .leaflet-marker-icon,
[data-theme="dark"] #contact-map .leaflet-popup { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] .research-card,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .education-card,
[data-theme="dark"] .award-card,
[data-theme="dark"] .skill-category,
[data-theme="dark"] .pub-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .contact-method,
[data-theme="dark"] .contact-cta,
[data-theme="dark"] .hero-education,
[data-theme="dark"] .scholar-mini {
background: rgba(19, 19, 26, 0.65);
}
/* ── 7. SECTION STRIPE TINT ─────────────────────────────────────
Every other section has a subtle frosted tint. */
.section-alt {
background: rgba(248, 250, 252, 0.15);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .section-alt {
background: rgba(10, 10, 15, 0.12);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ── 8. RESEARCH SECTION IMAGES ──────────────────────────────────
In index.html, find each research card and its data-img attr.
Change the path to point to your image file.
Recommended: 800×400 px WebP, keep files under 200 KB.
Featured card (right-side slot):