/* Minimalist Engineer — styles.css Implements the brand style guide: colors, typography, spacing, components */ :root{ --color-primary: #111111; /* Charcoal */ --color-secondary: #E5E5E5; /* Soft Gray */ --color-accent: #3B82F6; /* Electric Blue */ --color-neutral: #F2F2F2; /* Optional Neutral */ --max-width: 1200px; --page-padding: 48px; --section-gap: 120px; --gutter: 24px; --radius: 4px; /* spacing scale */ --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; /* button sizing (default) */ --btn-padding-vertical: 14px; --btn-padding-horizontal: 28px; --btn-font-size: 16px; --nav-height: 72px; --motion-fast: 150ms; } /* Base reset */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--color-primary); color:var(--color-secondary); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--page-padding); } /* Header */ .site-header{ border-bottom:1px solid rgba(229,229,229,0.1); background:var(--color-primary); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-height); padding:0 48px; } .logo{ font-family:'JetBrains Mono', monospace; font-weight:500; color:var(--color-secondary); letter-spacing:0.5px; } .nav a{ color:var(--color-secondary); text-decoration:none; margin-left:24px; font-family:Inter, system-ui, sans-serif; font-weight:500; font-size:14px; position:relative; padding-bottom:6px; } .nav a::after{ content:""; position:absolute; left:0;right:0;bottom:0; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left center; transition:transform var(--motion-fast) ease; opacity:0.95; } .nav a:hover::after{transform:scaleX(1)} .nav .cta{ margin-left:24px; } /* Hero */ .site-main{ padding-top:56px; } .hero{ padding-top:160px; padding-bottom:120px; } /* Optional background image for hero. Add class "has-bg" to .hero to enable. The image is placed behind content with low opacity so text remains readable. */ .hero.has-bg{position:relative;overflow:hidden} .hero.has-bg::before{ content:""; position:absolute; inset:0; background-image: url('images/bg-image.png'); background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.12; /* increased opacity for better visibility; adjust locally */ pointer-events:none; z-index:0; } .hero.has-bg::after{ content:""; position:absolute; inset:0; /* subtle dark gradient to improve contrast for text */ background: linear-gradient(rgba(17,17,17,0.38), rgba(17,17,17,0.12)); pointer-events:none; z-index:0; /* sits above the image but below content */ } .hero.has-bg > *{position:relative;z-index:1} /* Site-wide optional background (apply class "has-site-bg" to ) */ body.has-site-bg{position:relative} body.has-site-bg::before{ content:""; position:fixed; inset:0; background-image:url('images/bg-image.png'); background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.12; /* increased opacity for better visibility */ pointer-events:none; z-index:-2; /* behind the overlay */ } body.has-site-bg::after{ content:""; position:fixed; inset:0; background: linear-gradient(rgba(17,17,17,0.38), rgba(17,17,17,0.12)); pointer-events:none; z-index:-1; /* sits above the image but below page content */ } .hero-title{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:48px; /* larger for impact */ color:var(--color-secondary); margin:0 0 var(--space-md) 0; line-height:1.15; max-width:820px; text-align:left; } .hero-sub{ color:rgba(229,229,229,0.92); max-width:600px; margin:0 0 var(--space-lg) 0; font-family:Inter, system-ui, sans-serif; font-weight:500; font-size:18px; } .hero-cta .btn{margin-right:16px} /* Buttons */ .btn{ display:inline-block; padding:var(--btn-padding-vertical) var(--btn-padding-horizontal); border-radius:var(--radius); font-family:Inter, system-ui, sans-serif; font-weight:600; font-size:var(--btn-font-size); border:1px solid transparent; cursor:pointer; transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, filter var(--motion-fast) ease; text-decoration:none; } .btn:active{transform:translateY(1px)} .btn.primary{ background:var(--color-accent); color:var(--color-primary); border:none; } .btn.primary:hover{transform:translateY(-2px); filter:brightness(1.05)} .btn.secondary{ background:transparent; color:var(--color-secondary); border:1px solid rgba(229,229,229,0.4); } .btn.secondary:hover{border-color:rgba(229,229,229,0.7)} /* Section headers */ .section{ padding:var(--section-gap) 0; } .section-header{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:18px; margin:0 0 24px 0; color:var(--color-secondary); } /* Cards */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gutter); } .card{ display:block; background:transparent; border:1px solid rgba(255,255,255,0.1); padding:24px; border-radius:var(--radius); transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; color:var(--color-secondary); text-decoration:none; } .card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.45)} .card-title{ font-family:'JetBrains Mono', monospace; margin:0 0 8px 0; } /* removed accent bar */ .card-sub{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(229,229,229,0.85);margin-bottom:8px} .card-body{color:rgba(229,229,229,0.9); margin:0} /* SVG placeholder styling for portfolio previews */ .svg-placeholder{width:100%;max-width:160px;margin-bottom:12px} .svg-placeholder svg{display:block;width:100%;height:auto} /* Testimonials */ .testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:12px} .testimonial-card{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:18px;border-radius:6px} .testimonial-card{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:18px;border-radius:6px;transition:transform 220ms var(--motion-fast) ease,box-shadow 220ms var(--motion-fast) ease,opacity 220ms var(--motion-fast) ease;will-change:transform,box-shadow,opacity} .testimonial-card p{margin:0 0 12px 0;color:rgba(229,229,229,0.95);font-family:Inter} .testimonial-card cite{font-family:'JetBrains Mono',monospace;color:rgba(229,229,229,0.75);font-size:13px} .testimonial-card:hover, .testimonial-card:focus-within{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.45); opacity:1; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce){ .testimonial-card{transition:none} .testimonial-card:hover,.testimonial-card:focus-within{transform:none;box-shadow:none} } /* Form */ .contact-form{max-width:640px} .label{display:block; margin-bottom:12px; font-family:'JetBrains Mono', monospace; font-size:13px} .input{ display:block; width:100%; padding:12px; border-radius:var(--radius); border:1px solid rgba(229,229,229,0.3); background:transparent; color:var(--color-secondary); margin-top:6px; font-family:Inter, system-ui, sans-serif; } .input:focus{outline:3px solid rgba(59,130,246,0.12); border-color:var(--color-accent)} /* Footer */ .site-footer{border-top:1px solid rgba(229,229,229,0.1); padding:48px 0} .footer-inner{display:flex;justify-content:space-between;align-items:center} .footer-nav a{color:var(--color-secondary); margin-left:18px; text-decoration:none} /* Responsive tweaks */ @media (max-width:768px){ .header-inner{height:64px} .hero-title{font-size:24px} .footer-inner{flex-direction:column; gap:12px} } /* Mobile nav (hamburger) */ .nav-toggle{ display:none; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--color-secondary); padding:8px 10px; border-radius:6px; } .nav-toggle .bar{display:block;width:18px;height:2px;background:var(--color-secondary);margin:3px 0} @media (max-width:900px){ .nav{display:none;position:absolute;top:var(--nav-height);right:0;left:0;background:var(--color-primary);padding:16px 24px;flex-direction:column;z-index:50} .nav.open{display:flex} .nav a{margin:10px 0;font-size:16px} .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .header-inner{padding:0 16px} } /* Utility */ .container{padding-left:var(--page-padding); padding-right:var(--page-padding)} /* Accessibility: high contrast focus */ a:focus, button:focus, input:focus, textarea:focus{outline-offset:3px} /* stronger accent focus ring using blue */ a:focus, .btn:focus, .nav a:focus{outline:3px solid rgba(59,130,246,0.12); outline-offset:4px} /* End of styles */ /* General link underline animation (non-nav links) */ .site-main a, .footer-nav a, .card a{ position:relative; color:var(--color-secondary); text-decoration:none; transition:color var(--motion-fast) ease; } .site-main a::after, .footer-nav a::after, .card a::after{ content:""; position:absolute; left:0;right:0;bottom:-3px; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left center; transition:transform var(--motion-fast) ease; } .site-main a:hover::after, .footer-nav a:hover::after, .card a:hover::after{ transform:scaleX(1); } .site-main a:hover, .footer-nav a:hover, .card a:hover{color:var(--color-accent)} /* Prevent default browser 'visited' purple: keep visited links same as normal text */ .site-main a:visited, .footer-nav a:visited, .card a:visited, .nav a:visited{ color:var(--color-secondary); } /* Ensure focus is visible for interactive elements */ .nav a:focus::after, .site-main a:focus::after, .footer-nav a:focus::after{transform:scaleX(1)} /* Portfolio / Case Study Components */ .case-header{margin-bottom:24px} .case-title{font-family:'JetBrains Mono', monospace; font-size:28px; margin:0} .case-meta{font-family:Inter; color:rgba(229,229,229,0.8); font-size:14px} .cs-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px} @media (max-width:768px){.cs-grid{grid-template-columns:1fr}} .metrics-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media (max-width:900px){.metrics-grid{grid-template-columns:repeat(2,1fr)}} .metric-card{border:1px solid rgba(255,255,255,0.1); padding:16px; border-radius:4px} .metric-title{font-family:'JetBrains Mono', monospace; font-size:13px} .metric-value{font-family:Inter; font-weight:600; font-size:18px} .ba-gallery{display:grid; grid-template-columns:1fr 1fr; gap:12px} .ba-item{border:1px solid rgba(255,255,255,0.08); padding:6px} .ba-caption{font-family:Inter; font-size:13px; color:rgba(229,229,229,0.8); margin-top:8px}