/* ========================================================= Gokul M — Portfolio / Resume Mobile-first stylesheet. Theming via [data-theme] on . ========================================================= */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body, h1, h2, h3, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ---------- design tokens ---------- */ :root{ --radius: 10px; --radius-lg: 16px; --maxw: 1080px; --ff-display: 'Space Grotesk', sans-serif; --ff-body: 'IBM Plex Sans', sans-serif; --ff-mono: 'IBM Plex Mono', monospace; --nav-h: 62px; --ease: cubic-bezier(.2,.8,.2,1); /* dark (default) */ --bg: #0e1013; --surface: #171a1f; --surface-2: #1e222a; --surface-hover: #242832; --text: #eae6dd; --text-dim: #9a978f; --text-faint: #66645d; --accent: #e2933f; --accent-strong: #f0a457; --accent-dim: #8a5c28; --teal: #54a6a1; --teal-dim: #2f5f5c; --border: #2b2e36; --border-soft: #20232a; --on-accent: #12141a; --shadow: 0 20px 60px -24px rgba(0,0,0,.6); --skeleton-base: #1e222a; --skeleton-shine: rgba(255,255,255,.06); --scrim: rgba(10,11,14,.72); color-scheme: dark; } :root[data-theme="light"]{ --bg: #faf8f4; --surface: #ffffff; --surface-2: #f3f0ea; --surface-hover: #ece8de; --text: #181a1f; --text-dim: #5c5f66; --text-faint: #8b8e94; --accent: #c2701c; --accent-strong: #a85e14; --accent-dim: #e7b988; --teal: #1f7a75; --teal-dim: #bfe3e0; --border: #e7e3d9; --border-soft: #efece4; --on-accent: #fffaf3; --shadow: 0 20px 50px -26px rgba(20,18,10,.2); --skeleton-base: #eee9df; --skeleton-shine: rgba(255,255,255,.9); --scrim: rgba(250,248,244,.72); color-scheme: light; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]):not([data-theme="light"]){ --bg: #faf8f4; --surface: #ffffff; --surface-2: #f3f0ea; --surface-hover: #ece8de; --text: #181a1f; --text-dim: #5c5f66; --text-faint: #8b8e94; --accent: #c2701c; --accent-strong: #a85e14; --accent-dim: #e7b988; --teal: #1f7a75; --teal-dim: #bfe3e0; --border: #e7e3d9; --border-soft: #efece4; --on-accent: #fffaf3; --shadow: 0 20px 50px -26px rgba(20,18,10,.2); --skeleton-base: #eee9df; --skeleton-shine: rgba(255,255,255,.9); --scrim: rgba(250,248,244,.72); color-scheme: light; } } body{ background: var(--bg); color: var(--text); font-family: var(--ff-body); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s var(--ease), color .25s var(--ease); } ::selection{ background: var(--accent); color: var(--on-accent); } a{ color: inherit; } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } @media (min-width: 640px){ .wrap{ padding: 0 28px; } } a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- skip link ---------- */ .skip-link{ position: absolute; top: -100px; left: 12px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 6px; font-family: var(--ff-mono); font-size: 13px; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus{ top: 12px; } /* ---------- skeleton loader ---------- */ .skeleton-screen{ position: fixed; inset: 0; z-index: 999; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .4s var(--ease), visibility .4s var(--ease); } .skeleton-screen.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } .skeleton-inner{ width: 100%; max-width: 640px; padding: 0 28px; } .skeleton-bar{ height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; margin-bottom: 14px; } .skeleton-bar.w-60{ width: 60%; } .skeleton-bar.w-90{ width: 90%; } .skeleton-bar.w-40{ width: 40%; height: 34px; margin-bottom: 22px; } .skeleton-bar.w-30{ width: 30%; height: 40px; border-radius: 20px; } @keyframes shimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } } /* ---------- top nav ---------- */ .statusbar{ border-bottom: 1px solid var(--border-soft); background: var(--scrim); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px) saturate(1.2); transition: box-shadow .25s var(--ease), background .25s var(--ease); } .statusbar.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.5); } .statusbar .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .02em; min-height: var(--nav-h); } .statusbar .mark{ font-family: var(--ff-display); font-weight: 700; font-size: 16px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; } .nav-desktop{ display: none; align-items: center; gap: 22px; } .nav-desktop a{ text-decoration: none; color: var(--text-dim); transition: color .2s ease; padding: 4px 0; border-bottom: 1px solid transparent; } .nav-desktop a:hover{ color: var(--accent); } .nav-desktop a[aria-current="location"]{ color: var(--teal); border-color: var(--teal); } .nav-right{ display: flex; align-items: center; gap: 10px; } .status-pill{ display: none; align-items: center; gap: 8px; color: var(--teal); white-space: nowrap; } .status-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 2.4s infinite; flex-shrink: 0; } @keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(84,166,161,.5); } 70%{ box-shadow: 0 0 0 7px rgba(84,166,161,0); } 100%{ box-shadow: 0 0 0 0 rgba(84,166,161,0); } } /* theme switch */ .theme-switch{ display: inline-flex; border: 1px solid var(--border); border-radius: 20px; padding: 3px; gap: 2px; background: var(--surface); } .theme-switch button{ width: 28px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--text-faint); transition: background .2s ease, color .2s ease; } .theme-switch button svg{ width: 14px; height: 14px; } .theme-switch button[aria-pressed="true"]{ background: var(--surface-2); color: var(--accent); } /* mobile nav toggle */ .nav-toggle{ display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .nav-toggle svg{ width: 16px; height: 16px; } .nav-mobile{ display: none; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .nav-mobile.is-open{ display: block; } .nav-mobile ul{ display: flex; flex-direction: column; } .nav-mobile a{ display: block; padding: 14px 20px; text-decoration: none; color: var(--text-dim); font-family: var(--ff-mono); font-size: 13.5px; border-top: 1px solid var(--border-soft); } .nav-mobile a:first-child{ border-top: none; } .nav-mobile a[aria-current="location"]{ color: var(--teal); } /* ---------- hero ---------- */ .hero{ padding: 48px 0 56px; position: relative; overflow: hidden; } @media (min-width: 900px){ .hero{ padding: 88px 0 64px; } } .hero-grid{ display: grid; gap: 40px; align-items: center; } @media (min-width: 900px){ .hero-grid{ grid-template-columns: 1.1fr .9fr; gap: 56px; } } .eyebrow{ font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; color: var(--teal); text-transform: lowercase; display: inline-block; margin-bottom: 16px; } .eyebrow::before{ content: "// "; color: var(--text-faint); } h1{ font-family: var(--ff-display); font-weight: 700; font-size: clamp(34px, 8vw, 60px); line-height: 1.04; margin: 0 0 10px; letter-spacing: -.01em; } .role-line{ font-family: var(--ff-display); font-weight: 500; font-size: clamp(15px, 3vw, 20px); color: var(--accent); margin: 0 0 22px; } .summary{ color: var(--text-dim); font-size: 15.5px; max-width: 52ch; margin: 0 0 32px; } .cta-row{ display: flex; gap: 12px; flex-wrap: wrap; } .btn{ font-family: var(--ff-mono); font-size: 13px; letter-spacing: .02em; padding: 13px 22px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .18s var(--ease), background .18s ease, border-color .18s ease, box-shadow .18s ease; border: 1px solid transparent; } .btn:active{ transform: translateY(0) scale(.98); } .btn-primary{ background: var(--accent); color: var(--on-accent); font-weight: 600; } .btn-primary:hover{ transform: translateY(-2px); background: var(--accent-strong); box-shadow: var(--shadow); } .btn-ghost{ border-color: var(--border); color: var(--text); background: transparent; } .btn-ghost:hover{ border-color: var(--teal); color: var(--teal); transform: translateY(-2px); } /* stack diagram */ .stackdiagram{ display: flex; flex-direction: column; gap: 6px; } .stackdiagram .layer{ background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; opacity: 0; transform: translateY(14px); animation: layerIn .6s var(--ease) forwards; font-family: var(--ff-mono); font-size: 13px; } .stackdiagram .layer .label{ color: var(--text); font-weight: 500; letter-spacing: .02em; } .stackdiagram .layer .detail{ color: var(--text-dim); font-size: 11.5px; text-align: right; } .stackdiagram .layer:nth-child(1){ animation-delay: .05s; border-color: var(--teal-dim); } .stackdiagram .layer:nth-child(2){ animation-delay: .18s; } .stackdiagram .layer:nth-child(3){ animation-delay: .31s; } .stackdiagram .layer:nth-child(4){ animation-delay: .44s; } .stackdiagram .layer:nth-child(5){ animation-delay: .57s; border-color: var(--accent-dim); } @keyframes layerIn{ to{ opacity: 1; transform: translateY(0); } } /* ---------- sections ---------- */ section{ padding: 56px 0; border-bottom: 1px solid var(--border-soft); scroll-margin-top: var(--nav-h); } @media (min-width: 900px){ section{ padding: 76px 0; } } section:last-of-type{ border-bottom: none; } .section-head{ margin-bottom: 32px; } @media (min-width: 900px){ .section-head{ margin-bottom: 38px; } } .section-head h2{ font-family: var(--ff-display); font-size: clamp(23px, 4vw, 32px); margin: 6px 0 0; font-weight: 600; } .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* competencies */ .competency-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px){ .competency-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width: 900px){ .competency-grid{ grid-template-columns: repeat(3, 1fr); gap: 14px; } } .competency-item{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; font-size: 14px; transition: border-color .2s ease, transform .2s ease; } .competency-item:hover{ border-color: var(--teal-dim); transform: translateY(-2px); } .competency-item span.n{ display: block; font-family: var(--ff-mono); color: var(--teal); font-size: 11px; margin-bottom: 6px; } /* skills */ .skills-groups{ display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 720px){ .skills-groups{ grid-template-columns: 1fr 1fr; gap: 26px; } } .skill-group h3{ font-family: var(--ff-mono); font-size: 12.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; font-weight: 500; } .chip-row{ display: flex; flex-wrap: wrap; gap: 8px; } .chip{ font-family: var(--ff-mono); font-size: 12.5px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; color: var(--text-dim); background: var(--surface); transition: border-color .2s ease, color .2s ease, background .2s ease; position: relative; } .chip:hover, .chip:focus-visible{ border-color: var(--teal); color: var(--text); } .chip.is-active{ border-color: var(--accent); color: var(--accent); background: var(--surface-2); } .skills-hint{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-faint); margin: -10px 0 22px; } /* experience timeline */ .timeline{ position: relative; padding-left: 24px; } .timeline::before{ content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--border); } .tl-item{ position: relative; margin-bottom: 40px; } .tl-item:last-child{ margin-bottom: 0; } .tl-item::before{ content: ""; position: absolute; left: -24px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); } .tl-item .role{ font-family: var(--ff-display); font-size: 18px; font-weight: 600; margin: 0 0 2px; } .tl-item .org{ font-family: var(--ff-mono); font-size: 12.5px; color: var(--accent); margin: 0 0 4px; } .tl-item .dates{ font-family: var(--ff-mono); font-size: 12px; color: var(--text-dim); margin: 0 0 14px; } .tl-item ul{ margin: 0; padding-left: 18px; list-style: disc; color: var(--text-dim); font-size: 14.5px; } .tl-item li{ margin-bottom: 8px; } .tl-item li::marker{ color: var(--teal); } @media (min-width: 640px){ .timeline{ padding-left: 28px; } .tl-item::before{ left: -28px; } .tl-item .role{ font-size: 19px; } } /* project filter bar */ .filter-bar{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .filter-pill{ font-family: var(--ff-mono); font-size: 12px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 20px; color: var(--text-dim); background: var(--surface); transition: all .2s ease; } .filter-pill:hover{ border-color: var(--accent); color: var(--text); } .filter-pill[aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .filter-status{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--text-faint); margin: -14px 0 20px; min-height: 16px; } /* projects */ .project-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px){ .project-grid{ grid-template-columns: 1fr 1fr; gap: 20px; } } .project-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease, opacity .25s ease; } @media (min-width: 640px){ .project-card{ padding: 24px; } } .project-card:hover{ transform: translateY(-4px); border-color: var(--teal-dim); box-shadow: var(--shadow); } .project-card.is-hidden{ display: none; } .pc-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .project-card h3{ font-family: var(--ff-display); font-size: 18px; margin: 0; font-weight: 600; } .live-badge{ font-family: var(--ff-mono); font-size: 10.5px; color: var(--teal); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .live-badge .status-dot{ width: 6px; height: 6px; } .project-card p.desc{ color: var(--text-dim); font-size: 14px; margin: 0 0 14px; } .tech-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .tech-tags span{ font-family: var(--ff-mono); font-size: 11px; color: var(--text-dim); border: 1px solid var(--border-soft); padding: 4px 9px; border-radius: 14px; } .project-card ul{ margin: 0; padding-left: 16px; list-style: disc; font-size: 13.5px; color: var(--text-dim); } .project-card li{ margin-bottom: 6px; } .project-card.full{ grid-column: 1 / -1; } .other-projects{ margin-top: 4px; font-size: 14px; color: var(--text-dim); } .other-projects .ops-label{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--teal); display: block; margin-bottom: 8px; } .other-projects strong{ color: var(--text); font-weight: 500; } /* achievements */ .achv-list{ display: flex; flex-direction: column; gap: 14px; } .achv-item{ display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; transition: border-color .2s ease; } .achv-item:hover{ border-color: var(--accent-dim); } .achv-item .mark{ font-family: var(--ff-mono); color: var(--accent); font-size: 13px; flex-shrink: 0; padding-top: 1px; } .achv-item p{ margin: 0; font-size: 14.5px; color: var(--text-dim); } .achv-item p strong{ color: var(--text); font-weight: 500; } /* education */ .edu-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px){ .edu-grid{ grid-template-columns: 1fr 1fr; gap: 16px; } } .edu-item{ border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); } .edu-item .degree{ font-family: var(--ff-display); font-weight: 600; font-size: 15.5px; margin: 0 0 4px; } .edu-item .school{ font-size: 13.5px; color: var(--text-dim); margin: 0 0 4px; } .edu-item .yrs{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--teal); } /* contact */ .contact-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 24px; align-items: center; } @media (min-width: 640px){ .contact-panel{ padding: 40px; grid-template-columns: 1fr auto; } } .contact-panel h2{ font-family: var(--ff-display); font-size: clamp(22px, 4vw, 30px); margin: 0 0 10px; font-weight: 600; } .contact-panel p{ color: var(--text-dim); margin: 0; font-size: 14.5px; max-width: 44ch; } .contact-actions{ display: flex; flex-direction: column; gap: 10px; } .contact-line{ font-family: var(--ff-mono); font-size: 13.5px; display: flex; align-items: center; gap: 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); padding: 11px 16px; border-radius: 8px; text-decoration: none; transition: border-color .2s ease; position: relative; width: 100%; text-align: left; } .contact-line.is-interactive:hover{ border-color: var(--accent); } .contact-line .copied-flag{ position: absolute; right: 14px; font-size: 11px; color: var(--teal); opacity: 0; transition: opacity .2s ease; } .contact-line.copied .copied-flag{ opacity: 1; } /* whatsapp floating button */ .whatsapp-float{ position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #0b1b12; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); transition: transform .2s var(--ease), box-shadow .2s ease; text-decoration: none; } .whatsapp-float:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 36px -10px rgba(0,0,0,.55); } .whatsapp-float svg{ width: 26px; height: 26px; } .whatsapp-float .wa-ping{ position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: waPing 2.6s ease-out infinite; } @keyframes waPing{ 0%{ transform: scale(1); opacity: .6; } 100%{ transform: scale(1.55); opacity: 0; } } footer{ padding: 26px 0 60px; text-align: center; font-family: var(--ff-mono); font-size: 12px; color: var(--text-dim); } footer .footer-links{ margin-top: 10px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } footer .footer-links a{ color: var(--text-dim); text-decoration: none; } footer .footer-links a:hover{ color: var(--accent); } /* ---------- responsive nav switch ---------- */ @media (min-width: 820px){ .nav-desktop{ display: flex; } .nav-toggle, .nav-mobile{ display: none; } .status-pill{ display: inline-flex; } } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .stackdiagram .layer{ opacity: 1; transform: none; } .skeleton-screen{ display: none; } } /* ---------- print ---------- */ @media print{ .statusbar, .nav-mobile, .whatsapp-float, .skeleton-screen, .filter-bar, .filter-status, .cta-row, .skills-hint{ display: none !important; } html, body{ background: #fff; color: #111; } .wrap{ max-width: 100%; padding: 0; } section{ padding: 18px 0; border-bottom: 1px solid #ddd; } .reveal{ opacity: 1 !important; transform: none !important; } .project-card.is-hidden{ display: block !important; } .project-card, .achv-item, .edu-item, .competency-item, .contact-panel{ background: #fff; border-color: #ccc; box-shadow: none; } a{ color: #111; text-decoration: none; } .chip, .tech-tags span{ border-color: #ccc; color: #333; } }