/* ==========================================================================
GURTEK SINGH CONSULTING — Master Stylesheet
Dark Premium Theme | Emerald Accent
========================================================================== */
/* --------------------------------------------------------------------------
Google Fonts
Heading: Sora — geometric, modern, premium feel
Body: Outfit — excellent readability, clean geometric forms
Mono: JetBrains Mono for code blocks
Loaded via in HTML (faster than @import)
-------------------------------------------------------------------------- */
/* ==========================================================================
1. CUSTOM PROPERTIES (Design Tokens)
========================================================================== */
:root {
/* --- Color Palette --- */
--color-bg: #0a0a0f;
--color-bg-rgb: 10, 10, 15;
--color-surface: #12121a;
--color-surface-rgb: 18, 18, 26;
--color-surface-raised: #1a1a28;
--color-accent: #10b981;
--color-accent-rgb: 16, 185, 129;
--color-accent-hover: #059669;
--color-accent-light: #34d399;
--color-accent-muted: rgba(16, 185, 129, 0.15);
--color-text: #f0f0f0;
--color-text-rgb: 240, 240, 240;
--color-text-secondary: #8a8a9a;
--color-text-tertiary: #5a5a6a;
--color-border: #1e1e2e;
--color-border-light: #2a2a3a;
--color-error: #ef4444;
--color-error-muted: rgba(239, 68, 68, 0.15);
--color-success: #10b981;
--color-success-muted: rgba(16, 185, 129, 0.15);
--color-warning: #f59e0b;
--color-warning-muted: rgba(245, 158, 11, 0.15);
--color-white: #ffffff;
--color-black: #000000;
/* --- Typography --- */
--font-heading: 'Sora', sans-serif;
--font-body: 'Outfit', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* --- Spacing Scale --- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* --- Layout --- */
--container-max: 1200px;
--container-narrow: 800px;
--container-wide: 1400px;
/* --- Borders & Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* --- Shadows --- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 20px rgba(16, 185, 129, 0.15),
0 0 40px rgba(16, 185, 129, 0.05);
--shadow-glow-lg: 0 0 30px rgba(16, 185, 129, 0.25),
0 0 60px rgba(16, 185, 129, 0.1);
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
--transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* --- Z-Index Scale --- */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* --- Nav Height --- */
--nav-height: 72px;
}
/* ==========================================================================
2. RESET & BASE STYLES
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Noise/Grain Texture Overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::selection {
background-color: rgba(16, 185, 129, 0.3);
color: var(--color-white);
}
/* Keyboard focus — visible ring only for keyboard navigation */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-light);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* ==========================================================================
3. TYPOGRAPHY SCALE
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text);
}
h1 {
font-size: var(--text-5xl);
font-weight: 800;
letter-spacing: -0.03em;
}
h2 {
font-size: var(--text-4xl);
font-weight: 700;
}
h3 {
font-size: var(--text-3xl);
font-weight: 600;
}
h4 {
font-size: var(--text-2xl);
font-weight: 600;
}
h5 {
font-size: var(--text-xl);
font-weight: 600;
}
h6 {
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-text-secondary);
}
p {
margin-bottom: var(--space-4);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--color-accent);
transition: color var(--transition-base);
}
a:hover {
color: var(--color-accent-light);
}
strong,
b {
font-weight: 600;
color: var(--color-text);
}
em,
i {
font-style: italic;
}
small {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
blockquote {
position: relative;
padding: var(--space-6) var(--space-8);
margin: var(--space-8) 0;
border-left: 3px solid var(--color-accent);
background: var(--color-surface);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--text-lg);
font-style: italic;
color: var(--color-text-muted, #b0b0be);
line-height: var(--leading-relaxed);
}
blockquote p {
margin-bottom: 0;
color: inherit;
}
blockquote cite {
display: block;
margin-top: var(--space-4);
font-size: var(--text-sm);
font-style: normal;
color: var(--color-accent);
font-weight: 500;
}
blockquote cite::before {
content: '-\00a0';
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
padding: 0.15em 0.4em;
background: rgba(var(--color-accent-rgb), 0.1);
border: 1px solid rgba(var(--color-accent-rgb), 0.15);
border-radius: var(--radius-sm);
color: var(--color-accent-light);
}
pre {
margin: var(--space-8) 0;
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow-x: auto;
}
pre code {
padding: 0;
background: none;
border: none;
border-radius: 0;
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
mark {
background: rgba(var(--color-accent-rgb), 0.2);
color: var(--color-accent-light);
padding: 0.1em 0.3em;
border-radius: var(--radius-sm);
}
hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-12) 0;
}
/* Section labels / overlines */
.overline,
.section-label,
.hero-label {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-4);
display: block;
}
/* Large lead text */
.lead {
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: var(--color-text-secondary);
}
/* ==========================================================================
4. LAYOUT UTILITIES
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--wide {
max-width: var(--container-wide);
}
/* Grid */
.grid {
display: grid;
gap: var(--space-8);
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-auto {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Flex */
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
/* ==========================================================================
5. NAVIGATION
========================================================================== */
/* Header needs its own stacking context above /