/* ============================================================ Utkarsh Jha — portfolio styles Plain CSS, no build step. All colors are CSS variables so the whole theme can be changed in one place (and dark/light toggled). ============================================================ */ /* ---- Theme tokens ---- */ :root { --bg: #0e0f12; --bg-soft: #16181d; --border: #262931; --text: #e7e9ee; --text-dim: #9aa0ab; --accent: #6ee7b7; /* single accent — change this to re-brand */ --accent-ink:#06281c; --max: 760px; /* content column width */ --radius: 12px; --font: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Light theme — applied when */ html[data-theme="light"] { --bg: #fbfbfa; --bg-soft: #ffffff; --border: #e3e3e0; --text: #1a1c20; --text-dim: #5c616b; --accent: #0f9d6b; --accent-ink:#ffffff; } /* ---- Reset-ish ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* visible keyboard focus for accessibility */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---- Layout: everything in a centered column ---- */ .nav, main, .footer { max-width: var(--max); margin-inline: auto; padding-inline: 22px; } /* ============ NAV ============ */ .nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding-block: 16px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav__brand { font-family: var(--font); font-weight: 700; font-size: 1.1rem; color: var(--text); } .nav__brand .dot { color: var(--accent); } .nav__links { display: flex; align-items: center; gap: 18px; } .nav__links a { color: var(--text-dim); font-size: .95rem; } .nav__links a:hover { color: var(--text); text-decoration: none; } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center; transition: border-color .2s ease, transform .2s ease; } .theme-toggle:hover { border-color: var(--accent); transform: rotate(180deg); } /* ============ HERO ============ */ .hero { padding-block: 72px 60px; } /* availability status: the highest-signal element for recruiters */ .status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-size: .82rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; margin: 0 0 24px; } .status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero__eyebrow { color: var(--text-dim); font-family: var(--font); margin: 0 0 6px; } .hero__name { font-size: clamp(2.6rem, 9vw, 4.3rem); line-height: 1.02; margin: 0 0 14px; letter-spacing: -0.035em; font-weight: 800; } .hero__line { font-size: clamp(1.3rem, 4.5vw, 1.75rem); margin: 0 0 18px; color: var(--text); font-weight: 500; } .hero__line .accent { color: var(--accent); } .hero__sub { color: var(--text-dim); max-width: 56ch; margin: 0 0 28px; } .hero__sub strong { color: var(--text); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .btn { display: inline-block; padding: 11px 20px; border-radius: var(--radius); font-family: var(--font); font-size: .95rem; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn--ghost { border-color: var(--border); color: var(--text); } .btn--ghost:hover { border-color: var(--accent); } .hero__social { list-style: none; display: flex; gap: 20px; padding: 0; margin: 0; font-family: var(--font); } .hero__social a { color: var(--text-dim); font-size: .9rem; } .hero__social a:hover { color: var(--accent); } /* ============ SECTIONS ============ */ .section { padding-block: 56px; border-top: 1px solid var(--border); } .section__title { font-size: 1.5rem; margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; letter-spacing: -0.01em; } .section__num { font-family: var(--font); color: var(--accent); font-size: .9rem; } .section__lead { color: var(--text-dim); margin: 0 0 30px; max-width: 56ch; } /* ---- Work cards ---- */ .work { display: grid; gap: 18px; } .card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: border-color .2s ease, transform .2s ease; } .card:hover { border-color: var(--accent); transform: translateY(-3px); } .card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .card__title { font-size: 1.2rem; margin: 0; } .card__what { margin: 0 0 10px; } .card__problem { color: var(--text-dim); margin: 0 0 16px; font-size: .96rem; } .card__problem strong { color: var(--text); } .badge { font-family: var(--font); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); } .badge--live { color: var(--accent); border-color: var(--accent); } .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; } .tags li { font-family: var(--font); font-size: .78rem; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); padding: 3px 9px; border-radius: 6px; } .card__links { display: flex; gap: 18px; font-family: var(--font); font-size: .9rem; } /* ---- Services ---- */ .services { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; } .service { border-left: 2px solid var(--accent); padding-left: 16px; } .service h3 { margin: 0 0 4px; font-size: 1.05rem; } .service p { margin: 0; color: var(--text-dim); font-size: .96rem; } .services__cta { font-family: var(--font); font-size: .95rem; } /* ---- About ---- */ .about p { margin: 0 0 16px; } .about__stack { color: var(--text-dim); } .about__stack strong { color: var(--text); } /* ============ FOOTER ============ */ .footer { padding-block: 64px 48px; border-top: 1px solid var(--border); text-align: center; } .footer__title { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.02em; } .footer__lead { color: var(--text-dim); margin: 0 0 24px; } .footer__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 0; margin: 0 0 32px; font-family: var(--font); } .footer__links a { color: var(--text); font-size: .95rem; } .footer__links a:hover { color: var(--accent); } .footer__meta { color: var(--text-dim); font-family: var(--font); font-size: .8rem; margin: 0; } /* ============ RESPONSIVE ============ */ @media (min-width: 620px) { .services { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 460px) { body { font-size: 16px; } .nav__links { gap: 12px; } .nav__links a { font-size: .88rem; } .hero { padding-block: 56px 48px; } } /* respect users who prefer no motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .status__dot { animation: none; } } /* ============================================================ HIRE-ME CAMPAIGN ADDITIONS stats strip · card thumbnails · open source · references · case-study pages. All reuse the variables defined at the top. ============================================================ */ /* ---- Stats / impact strip (under hero) ---- */ .stats { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 18px 0 4px; margin-bottom: 4px; border-top: 1px solid var(--border); } .stats dt, .stats dd { margin: 0; } .stat { display: flex; flex-direction: column; } .stat__num { font-family: var(--font); font-size: 1.25rem; font-weight: 700; color: var(--accent); line-height: 1.2; } .stat__label { color: var(--text-dim); font-size: .82rem; } /* ---- Card screenshot thumbnail ---- */ .card__thumb { display: block; margin: -22px -22px 16px; /* bleed to card edges */ border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg); } .card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* placeholder shown until a real screenshot is dropped in */ .card__thumb--empty { display: grid; place-items: center; color: var(--text-dim); font-family: var(--font); font-size: .8rem; background: repeating-linear-gradient(45deg, var(--bg) 0 10px, var(--bg-soft) 10px 20px); } /* make the card title clickable into the case study */ .card__title a { color: var(--text); } .card__title a:hover { color: var(--accent); text-decoration: none; } .card__title .arrow { color: var(--text-dim); font-weight: 400; } /* ---- Open Source section ---- */ .oss { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .oss__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-bottom: 14px; border-bottom: 1px dotted var(--border); } .oss__repo { font-family: var(--font); color: var(--text); font-weight: 600; } .oss__what { color: var(--text-dim); font-size: .95rem; flex: 1 1 240px; } .oss__link { font-family: var(--font); font-size: .88rem; } .oss__empty { color: var(--text-dim); font-size: .95rem; border: 1px dashed var(--border); border-radius: var(--radius); padding: 16px; } /* ---- References / testimonial ---- */ .refs { display: grid; gap: 16px; } .ref { margin: 0; padding: 16px 20px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); } .ref p { margin: 0 0 8px; } .ref cite { color: var(--text-dim); font-style: normal; font-family: var(--font); font-size: .85rem; } /* ---- Case-study pages ---- */ .case { max-width: 64ch; } .case p { margin: 0 0 16px; } .case h2 { margin-top: 8px; } .case ul { color: var(--text-dim); padding-left: 20px; } .case li { margin-bottom: 6px; } .case figure { margin: 0 0 28px; } .case figure img, .case .diagram { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .case figcaption { color: var(--text-dim); font-size: .82rem; margin-top: 8px; text-align: center; } .case pre { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-family: var(--font); font-size: .85rem; line-height: 1.6; margin: 0 0 20px; } .case code { font-family: var(--font); font-size: .9em; } .case__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-family: var(--font); font-size: .9rem; color: var(--text-dim); margin: 14px 0 0; } .case__back { font-family: var(--font); font-size: .9rem; } @media (max-width: 460px) { .stat__num { font-size: 1.1rem; } }