/* ============================================================ DOCUMENTATION: style.css ============================================================ PURPOSE: Complete stylesheet for the IT consulting website. Implements a refined, corporate-professional aesthetic using editorial typography (Playfair Display + DM Sans) and a deliberate two-tone palette with sharp accent lines. ARCHITECTURE: 1. CSS Custom Properties (Variables) — theming engine 2. Reset & Base — sensible defaults 3. Typography Scale — consistent sizing 4. Layout Utilities — shared spacing/grid 5. Navbar — sticky, scroll-aware 6. Hero Section — full viewport, animated 7. Services Section — card grid 8. Portfolio Section — filterable gallery 9. About Section — two-column split 10. Contact Section — email display 11. Footer 12. Scroll Reveal Animations — performance-safe 13. Dark Mode Overrides — via [data-theme="dark"] 14. Responsive Breakpoints — mobile-first SECURITY NOTES: - No @import of external stylesheets from untrusted sources. - Google Fonts loaded in HTML with CSP-whitelisted domain. - No CSS expressions or behavior: properties (old IE attack vectors). - url() values reference only local assets. DESIGN SYSTEM: Primary font : Playfair Display (editorial headings) Body font : DM Sans (clean, legible body copy) Mono font : DM Mono (code-like decorative accents) Accent color : #B5965A (warm gold — trust, expertise) Base light : #F4F1EC (warm off-white — premium feel) Base dark : #0F0F0E (near-black — authority) ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES — THEMING ENGINE Variables defined on :root apply globally. Dark mode swaps these values; everything else updates automatically. Think of variables as "named buckets" — change the bucket once, every pipe using it updates instantly. ============================================================ */ :root { /* Light mode palette */ --bg: #F4F1EC; --bg-card: #FFFFFF; --bg-alt: #EDEAE3; --text-primary: #0F0F0E; --text-secondary: #4A4844; --text-muted: #8A8580; --accent: #B5965A; --accent-dark: #8C7240; --border: #D8D4CC; --border-strong:#A09B93; --shadow: 0 2px 24px rgba(0,0,0,0.07); --shadow-lg: 0 8px 48px rgba(0,0,0,0.12); /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Spacing scale (8px base unit) */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-12: 6rem; /* 96px */ --sp-16: 8rem; /* 128px */ /* Layout */ --max-width: 1160px; --nav-h: 72px; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out:cubic-bezier(0, 0, 0.2, 1); --dur-fast: 180ms; --dur-med: 320ms; --dur-slow: 520ms; /* Border radius */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; } /* Dark mode — toggled by adding data-theme="dark" to */ [data-theme="dark"] { --bg: #0F0F0E; --bg-card: #1A1A18; --bg-alt: #161614; --text-primary: #F0EDE6; --text-secondary:#B8B4AC; --text-muted: #6E6B64; --accent: #C9A96E; --accent-dark: #B5965A; --border: #2A2A27; --border-strong:#404040; --shadow: 0 2px 24px rgba(0,0,0,0.4); --shadow-lg: 0 8px 48px rgba(0,0,0,0.6); } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--bg); color: var(--text-primary); line-height: 1.6; transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease); overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { background: none; border: none; cursor: pointer; font-family: var(--font-body); } /* Focus styles — accessibility is also a security concern (screen reader exploits are real). Clear focus indicators ensure keyboard-only users can navigate safely. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ============================================================ 3. TYPOGRAPHY SCALE ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; color: var(--text-primary); } h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); } h2 { font-size: clamp(1.8rem, 4vw, 3rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); } p { color: var(--text-secondary); font-size: 1rem; line-height: 1.75; max-width: 65ch; } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--sp-16) var(--sp-4); } .section-header { margin-bottom: var(--sp-8); } .section-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 0.25rem 0.75rem; border-radius: var(--r-sm); margin-bottom: var(--sp-3); } .section-header h2 { margin-top: var(--sp-2); } /* ============================================================ 5. NAVBAR ============================================================ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: transparent; transition: background-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease); } #navbar.scrolled { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-4); height: 100%; display: flex; align-items: center; gap: var(--sp-4); } .nav-logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--text-primary); margin-right: auto; letter-spacing: -0.02em; } .logo-dot { color: var(--accent); } .nav-links { display: flex; gap: var(--sp-4); align-items: center; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; transition: color var(--dur-fast) var(--ease); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--dur-med) var(--ease-out); } .nav-links a:hover { color: var(--text-primary); } .nav-links a:hover::after { width: 100%; } #theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1rem; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } #theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } #mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 6px; } #mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast); } #mobile-menu { display: none; background: var(--bg-card); border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); } #mobile-menu ul { display: flex; flex-direction: column; gap: var(--sp-3); } #mobile-menu a { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); } #mobile-menu a:hover { color: var(--accent); } /* ============================================================ 6. HERO SECTION ============================================================ */ #hero { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: var(--nav-h); } .hero-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--sp-16) var(--sp-4) var(--sp-12); position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); opacity: 0; animation: fadeUp 0.6s var(--ease-out) 0.2s forwards; } .hero-badge::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } .hero-headline { display: flex; flex-direction: column; margin-bottom: var(--sp-4); } .hero-headline .reveal-line { overflow: hidden; display: block; } .hero-headline .reveal-line span, .hero-headline .reveal-line { display: block; } /* Each line slides up from below on load */ .hero-headline .reveal-line:nth-child(1) { animation: slideUp 0.7s var(--ease-out) 0.3s both; } .hero-headline .reveal-line:nth-child(2) { animation: slideUp 0.7s var(--ease-out) 0.45s both; } .hero-headline .reveal-line:nth-child(3) { animation: slideUp 0.7s var(--ease-out) 0.6s both; } .hero-headline .reveal-line:nth-child(4) { animation: slideUp 0.7s var(--ease-out) 0.75s both; } .hero-headline .accent { color: var(--accent); } .hero-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-secondary); max-width: 52ch; margin-bottom: var(--sp-6); opacity: 0; animation: fadeUp 0.6s var(--ease-out) 0.9s forwards; } .hero-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-8); opacity: 0; animation: fadeUp 0.6s var(--ease-out) 1s forwards; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: var(--r-sm); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; transition: all var(--dur-fast) var(--ease); cursor: pointer; } .btn-primary { background: var(--accent); color: #fff; border: 2px solid var(--accent); } .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-ghost { background: transparent; color: var(--text-primary); border: 2px solid var(--border-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } /* Stats row */ .hero-stats { display: flex; gap: var(--sp-6); align-items: center; opacity: 0; animation: fadeUp 0.6s var(--ease-out) 1.1s forwards; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 0.25rem; } .stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--text-primary); line-height: 1; } .stat-label { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); } .stat-divider { width: 1px; height: 48px; background: var(--border); } /* Subtle grid background — purely decorative */ .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.35; pointer-events: none; mask-image: radial-gradient(ellipse 70% 60% at 80% 50%, black 0%, transparent 100%); } /* ============================================================ 7. SERVICES SECTION ============================================================ */ #services { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); } .service-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .service-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .service-icon { font-size: 1.8rem; margin-bottom: var(--sp-2); display: block; } .service-card h3 { margin-bottom: var(--sp-1); font-size: 1.15rem; } .service-card p { font-size: 0.9rem; line-height: 1.65; margin-bottom: var(--sp-3); } .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .service-tags li { font-family: var(--font-mono); font-size: 0.7rem; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: 100px; color: var(--text-muted); letter-spacing: 0.04em; } /* ============================================================ 8. PORTFOLIO SECTION ============================================================ */ #portfolio-filters { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-6); } .filter-btn { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 1rem; border: 1px solid var(--border); border-radius: 100px; color: var(--text-muted); transition: all var(--dur-fast) var(--ease); } .filter-btn:hover, .filter-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } #portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); } .project-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); transition: all var(--dur-med) var(--ease); display: flex; flex-direction: column; gap: var(--sp-2); } .project-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .project-card.hidden { display: none; } .project-meta { display: flex; justify-content: space-between; align-items: center; } .project-category { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .project-year { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } .project-card h3 { font-size: 1.1rem; margin: 0; } .project-card p { font-size: 0.875rem; line-height: 1.65; flex: 1; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; } .project-tags span { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.2rem 0.55rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; color: var(--text-muted); } /* ============================================================ 9. ABOUT SECTION ============================================================ */ #about { background: var(--bg); border-top: 1px solid var(--border); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } .about-text p { margin-bottom: var(--sp-3); } .credentials { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .credential { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.9rem; color: var(--text-secondary); border-left: 2px solid var(--border); padding-left: var(--sp-2); transition: border-color var(--dur-med); } .credential:hover { border-color: var(--accent); } .cred-badge { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); padding: 0.15rem 0.5rem; border-radius: var(--r-sm); flex-shrink: 0; } /* Terminal-style about visual box */ .about-visual { display: flex; justify-content: center; } .av-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); font-family: var(--font-mono); font-size: 0.85rem; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: var(--shadow); } .av-line { color: var(--text-muted); font-size: 0.75rem; margin-top: var(--sp-2); } .av-line:first-child { margin-top: 0; } .av-item { color: var(--text-primary); padding-left: var(--sp-2); border-left: 2px solid var(--border); } .av-green { color: #5A9E6F; } /* ============================================================ 10. CONTACT SECTION ============================================================ */ #contact { background: var(--bg-alt); border-top: 1px solid var(--border); } .contact-inner { max-width: 680px; } .contact-sub { font-size: 1rem; color: var(--text-secondary); margin-bottom: var(--sp-6); } /* Email rendered by JS for bot protection */ .email-block { margin: var(--sp-6) 0; padding: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-mono); } .email-link { font-size: 1.3rem; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-fast); } .email-link:hover { color: var(--accent-dark); } .email-label { display: block; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-1); } .contact-meta { display: flex; flex-direction: column; gap: var(--sp-2); } .meta-item { font-size: 0.875rem; color: var(--text-secondary); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); display: flex; gap: var(--sp-2); } .meta-item strong { color: var(--text-primary); min-width: 140px; } /* ============================================================ 11. FOOTER ============================================================ */ #footer { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-4); } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .footer-logo { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; margin-right: auto; } .footer-copy, .footer-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } /* ============================================================ 12. SCROLL REVEAL ANIMATIONS Elements start invisible; JS adds .visible class on scroll. Using opacity + transform (GPU-composited) = no layout thrash. ============================================================ */ .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered children — each child delays slightly */ .scroll-reveal:nth-child(2) { transition-delay: 80ms; } .scroll-reveal:nth-child(3) { transition-delay: 160ms; } .scroll-reveal:nth-child(4) { transition-delay: 240ms; } .scroll-reveal:nth-child(5) { transition-delay: 320ms; } .scroll-reveal:nth-child(6) { transition-delay: 400ms; } /* ============================================================ 13. KEYFRAME ANIMATIONS (hero) ============================================================ */ @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 14. RESPONSIVE BREAKPOINTS Mobile-first: defaults above are for small screens, we enhance for larger screens below. ============================================================ */ @media (max-width: 768px) { :root { --nav-h: 60px; } .nav-links { display: none; } #mobile-menu-btn { display: flex; } #mobile-menu.open { display: block; } .about-inner { grid-template-columns: 1fr; } .hero-stats { gap: var(--sp-4); } .stat-divider { display: none; } .section-inner { padding: var(--sp-12) var(--sp-3); } .services-grid, #portfolio-grid { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-1); } .footer-logo { margin-right: 0; } .meta-item { flex-direction: column; gap: 0; } .meta-item strong { min-width: auto; } } @media (max-width: 480px) { .hero-cta { flex-direction: column; } .btn { width: 100%; justify-content: center; } }