:root { --color-primary: #2563EB; /* Blue */ --color-secondary: #0F172A; /* Dark Navy */ --color-accent: #06B6D4; /* Cyan */ --color-bg: #F8FAFC; --color-text: #334155; --color-white: #FFFFFF; /* Fixed colors that must NOT flip in dark mode — used anywhere the background itself is always dark (header stays branded, footer, hero, buttons) so text painted on them stays readable either way. */ --pure-white: #FFFFFF; --color-navy: #0F172A; --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --font-accent: 'Playfair Display', serif; /* elegant italic accent — hero + big section titles only */ --radius: 10px; --shadow: 0 4px 20px rgba(15, 23, 42, 0.08); } /* Dark mode — toggled by adding data-theme="dark" to (see main.js) */ [data-theme="dark"] { --color-bg: #0B1220; --color-text: #cbd5e1; --color-white: #131B2C; --color-secondary: #F1F5F9; /* headings flip to light in dark mode */ --shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .tag { background: #0B1220; border-color: #1e293b; color: var(--color-text); } body, .site-header, .card, .btn { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-secondary); line-height: 1.25; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } .container { width: 90%; max-width: 1180px; margin: 0 auto; } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.6rem; border-radius: var(--radius); font-weight: 600; font-family: var(--font-heading); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary { background: var(--color-primary); color: var(--pure-white); } .btn-outline { border: 2px solid var(--pure-white); color: var(--pure-white); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* Header / Nav — intentionally fixed colors, NOT theme-reactive, so the logo and nav always sit on a consistent white bar */ .site-header { background: var(--pure-white); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06); } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: 84px; } .logo { display: flex; align-items: center; } .logo img { height: 62px; width: auto; display: block; } .main-nav ul { display: flex; gap: 1.75rem; } .main-nav a { font-weight: 500; font-size: 0.95rem; color: #334155; padding-bottom: 4px; border-bottom: 2px solid transparent; } .main-nav a:hover, .main-nav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .main-nav { display: flex; align-items: center; gap: 2rem; } .nav-cta { padding: 0.55rem 1.3rem; } .nav-toggle { display: none; } /* Nav pill — the rounded capsule holding the links, floating inside the header */ .nav-pill { background: var(--color-bg); border-radius: 999px; padding: 0.5rem 0.5rem; border: 1px solid #e2e8f0; } [data-theme="dark"] .nav-pill { border-color: #1e293b; } .nav-pill ul { padding: 0 0.5rem; } .nav-pill a { padding: 0.4rem 0.2rem; } /* Hero */ .hero { background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(135deg, var(--color-navy), #1e3a8a); background-size: 34px 34px, 34px 34px, cover; color: var(--pure-white); padding: 6rem 0; text-align: center; } .hero h1 { color: var(--pure-white); font-size: clamp(1.9rem, 4vw, 3rem); max-width: 800px; margin: 0 auto 1.2rem; } .hero p { max-width: 640px; margin: 0 auto 2rem; color: #cbd5e1; font-size: 1.05rem; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Section spacing */ section { padding: 5rem 0; } .section-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 3rem; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem; } .card { background: var(--color-white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); transition: transform 0.2s ease; } .card:hover { transform: translateY(-4px); } .card h3 { margin-bottom: 0.6rem; font-size: 1.15rem; } .card p { font-size: 0.95rem; } /* Services teaser (homepage) */ .bg-alt { background: var(--color-white); } /* Footer */ .site-footer { background: var(--color-navy); color: #cbd5e1; padding-top: 4rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding-bottom: 2.5rem; } .footer-col h3, .footer-col h4 { color: var(--pure-white); margin-bottom: 1rem; } .footer-col .social-icons { margin-top: 0.9rem; } .footer-col ul li { margin-bottom: 0.5rem; font-size: 0.9rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); text-align: center; padding: 1.2rem 0; font-size: 0.85rem; } /* Responsive */ @media (max-width: 768px) { .nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; } .nav-toggle span { width: 24px; height: 2px; background: var(--color-navy); } .main-nav { position: absolute; top: 84px; left: 0; right: 0; background: var(--pure-white); flex-direction: column; align-items: flex-start; padding: 1.5rem; display: none; box-shadow: var(--shadow); } .main-nav.open { display: flex; } .main-nav ul { flex-direction: column; gap: 1rem; width: 100%; } .nav-pill { width: 100%; border: none; background: none; padding: 0; } } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid #cbd5e1; border-radius: 999px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; color: var(--color-navy); } /* Scroll-in animation */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } /* Stats / impact counters */ .stats-section { background-color: var(--color-navy); background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 34px 34px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; text-align: center; } .stat-number { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--color-accent); } .stat-label { color: #cbd5e1; font-size: 0.95rem; margin-top: 0.4rem; } /* Typing effect cursor */ .typing-cursor { display: inline-block; width: 2px; background: var(--color-accent); margin-left: 2px; animation: blink 0.8s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* WhatsApp floating button */ .whatsapp-float { position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 200; transition: transform 0.15s ease; } .whatsapp-float:hover { transform: scale(1.08); } .whatsapp-float svg { width: 28px; height: 28px; } /* Small pill tags — used for tech-stack chips on portfolio cards */ .tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .tag { background: var(--color-bg); border: 1px solid #e2e8f0; color: var(--color-secondary); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; } /* Icon badge — circular colored background behind a mofic_icon() */ .icon-badge { width: 64px; height: 64px; border-radius: 50%; background: rgba(37, 99, 235, 0.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } [data-theme="dark"] .icon-badge { background: rgba(6, 182, 212, 0.14); color: var(--color-accent); } /* Portfolio thumbnail styled like a little browser window (original illustration, not a real screenshot) */ .project-thumb-mockup { height: 160px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: flex; flex-direction: column; overflow: hidden; } .mockup-bar { height: 26px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: rgba(255,255,255,0.18); } .mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.65); } .mockup-body { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; } /* Blog post header illustration */ .blog-thumb { height: 130px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--color-navy), var(--color-primary)); display: flex; align-items: center; justify-content: center; color: #fff; } .blog-card { padding: 0; overflow: hidden; } .blog-card .blog-body { padding: 1.5rem; } /* Technology category icon */ .tech-cat-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(37, 99, 235, 0.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } [data-theme="dark"] .tech-cat-icon { background: rgba(6, 182, 212, 0.14); color: var(--color-accent); } /* Social icon links (contact page + footer) */ .social-icons { display: flex; flex-wrap: wrap; gap: 0.7rem; } .social-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; transition: transform 0.15s ease, background 0.15s ease; } .social-icon:hover { transform: translateY(-3px); background: var(--color-primary); } .social-icons.on-light .social-icon { background: var(--color-bg); color: var(--color-secondary); border: 1px solid #e2e8f0; } .social-icons.on-light .social-icon:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Accent serif — use sparingly on hero heading + large section titles for an elegant touch */ .accent-heading { font-family: var(--font-accent); font-style: italic; font-weight: 600; } /* Subtle grid texture for dark sections (hero, stats) */ /* Subtle grid texture is now baked directly into .hero and .stats-section above, rather than a separate utility class, since two background-image rules on the same element would overwrite each other instead of layering. */ /* Category tag chip + external-link arrow, shown on portfolio/blog card thumbnails */ .card-tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.18); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; backdrop-filter: blur(4px); } .card-arrow { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .thumb-relative { position: relative; } /* Glowing tech tile grid (Technologies page) */ .tech-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.8rem; margin-top: 1rem; } .tech-tile { background: var(--color-bg); border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.9rem 0.5rem; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .tech-tile:hover { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); transform: translateY(-2px); } [data-theme="dark"] .tech-tile { background: #0B1220; border-color: #1e293b; } .tech-tile-abbr { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-primary); display: block; } .tech-tile-name { font-size: 0.72rem; color: var(--color-text); margin-top: 0.3rem; display: block; } /* Testimonial cards */ .testimonial-card { text-align: left; } .testimonial-stars { color: #f5b300; letter-spacing: 2px; margin-bottom: 0.8rem; font-size: 0.95rem; } .testimonial-quote { font-style: italic; margin-bottom: 1.2rem; } .testimonial-person { display: flex; align-items: center; gap: 0.8rem; border-top: 1px solid #e2e8f0; padding-top: 1rem; } [data-theme="dark"] .testimonial-person { border-top-color: #1e293b; } .testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .testimonial-name { font-weight: 600; font-size: 0.9rem; } .testimonial-role { font-size: 0.8rem; color: var(--color-text); }