/* ============================================================ Affan Dhankwala — Personal Site Styles for index.html (single-page) Theming via [data-theme] on ; all colors are variables. ============================================================ */ /* ---- Theme variables ---------------------------------------------------- */ :root { /* Type & spacing (theme-agnostic) */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --max-width: 960px; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 14px 40px rgba(0, 0, 0, 0.12); --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* Light (default) */ :root, [data-theme="light"] { --bg: #fafafa; --bg-elevated: #ffffff; --bg-subtle: #f1f1f3; --text: #16181d; --text-muted: #5b6069; --border: #e6e6ea; --accent: #3b5bdb; --accent-contrast: #ffffff; --nav-bg: rgba(250, 250, 250, 0.8); } /* Dark */ [data-theme="dark"] { --bg: #0f1115; --bg-elevated: #181b22; --bg-subtle: #1f232c; --text: #f3f4f6; --text-muted: #9aa1ad; --border: #2a2f3a; --accent: #6d8bff; --accent-contrast: #0f1115; --nav-bg: rgba(15, 17, 21, 0.8); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.5); } /* ---- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; image-orientation: from-image; /* respect EXIF orientation */ } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---- Nav ---------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); transition: background var(--transition), border-color var(--transition); } .nav__inner { max-width: var(--max-width); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; } .nav__brand { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.02em; } .nav__brand:hover { text-decoration: none; } .nav__links { display: flex; gap: 10px; margin-left: auto; align-items: center; } /* ---- Social icon links -------------------------------------------------- */ .social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--text); transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .social-link:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); text-decoration: none; } .social-link svg { width: 18px; height: 18px; } /* ---- Resume button ------------------------------------------------------ */ .nav__resume { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--text); font-size: 0.9rem; font-weight: 600; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .nav__resume:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); text-decoration: none; } /* ---- Theme toggle ------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--text); cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } /* Show sun in dark mode (to switch to light), moon in light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---- Hero --------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 72px 0 56px; } .hero__photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); border: 4px solid var(--bg-elevated); } .hero__name { font-size: 2.6rem; margin-bottom: 0.15em; } .hero__tagline { font-size: 1.15rem; color: var(--text-muted); margin: 0; } /* ---- Sections ----------------------------------------------------------- */ .section { padding: 40px 0; } .section__title { font-size: 1.5rem; margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* ---- Cards (experience + projects) ------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .exp-card { padding: 24px; } .exp-card__company { font-size: 1.2rem; margin-bottom: 2px; } .exp-card__role { color: var(--accent); font-weight: 600; font-size: 0.95rem; margin-bottom: 12px; } .exp-card__body { color: var(--text-muted); margin: 0; } .project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .project-item { position: relative; display: flex; align-items: center; gap: 20px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .project-item__body { min-width: 0; } .project-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); } .project-item a { text-decoration: none; } /* Stretch the link over the whole card so the entire card is clickable */ .project-item a::after { content: ""; position: absolute; inset: 0; } .project-item a:focus-visible { outline-offset: 4px; } .project-item__title { font-size: 1.15rem; font-weight: 650; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .project-item:hover .project-item__title { color: var(--accent); } .project-item__title::after { content: "↗"; font-size: 0.85em; color: var(--text-muted); transition: transform var(--transition); } .project-item:hover .project-item__title::after { transform: translate(2px, -2px); color: var(--accent); } .project-item__desc { margin: 6px 0 0; color: var(--text-muted); font-size: 0.95rem; } /* ---- Footer ------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); margin-top: 48px; padding: 32px 0; color: var(--text-muted); font-size: 0.9rem; } .footer__inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 640px) { .hero { grid-template-columns: 1fr; text-align: center; padding: 48px 0 40px; justify-items: center; } .hero__photo { width: 160px; height: 160px; } .hero__name { font-size: 2.1rem; } .nav__inner { gap: 12px; } .nav__links { gap: 12px; } .skills-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } } /* ---- Hero role (rotating text) ----------------------------------------- */ .hero__role { margin: 0 0 0.6em; min-height: 1.4em; font-size: 1.1rem; font-weight: 600; color: var(--accent); letter-spacing: -0.01em; } .hero__role-text { display: inline-block; transition: opacity 240ms ease, transform 240ms ease; } .hero__role-text.is-swapping { opacity: 0; transform: translateY(6px); } /* ---- Hero entrance animation ------------------------------------------- */ @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero__photo, .hero__name, .hero__role, .hero__tagline { animation: hero-rise 600ms cubic-bezier(0.4, 0, 0.2, 1) both; } .hero__photo { animation-delay: 40ms; } .hero__name { animation-delay: 140ms; } .hero__role { animation-delay: 220ms; } .hero__tagline { animation-delay: 300ms; } /* ---- Scroll reveal ------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .reveal.is-visible { opacity: 1; transform: none; } /* ---- Accent glow on hover (cards + projects) --------------------------- */ .exp-card--link:hover, .project-item:hover { box-shadow: var(--shadow-hover), 0 12px 44px -16px var(--accent); } /* ---- Experience cards as links ----------------------------------------- */ .exp-card--link { position: relative; display: block; color: var(--text); text-decoration: none; cursor: pointer; } .exp-card--link:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; } .exp-card--link .exp-card__company { color: var(--text); } .exp-card--link:hover .exp-card__company { color: var(--accent); } .exp-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--accent); font-weight: 600; font-size: 0.9rem; } .exp-card__more::after { content: "→"; transition: transform var(--transition); } .exp-card--link:hover .exp-card__more::after { transform: translateX(4px); } /* ---- Skills ------------------------------------------------------------- */ .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; /* equal-height cards across the whole grid */ gap: 20px; } .skill-group { padding: 22px 24px; } .skill-group__title { font-size: 1.05rem; margin-bottom: 14px; color: var(--text); } .skill-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .skill-chip { padding: 6px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; color: var(--text-muted); transition: color var(--transition), border-color var(--transition), background var(--transition); } .skill-chip:hover { color: var(--accent); border-color: var(--accent); } /* ---- Featured (non-link) project entry — e.g. Drones ------------------- */ .project-item--feature:hover { transform: none; border-color: var(--accent); } .project-item__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--bg-subtle); border: 1px solid var(--border); color: var(--accent); } .project-item__icon svg { width: 30px; height: 30px; } .project-item--feature .project-item__title { color: var(--text); } .project-item--feature .project-item__title::after { content: none; } /* ---- Footer contact ----------------------------------------------------- */ .footer__contact a { color: var(--text-muted); } .footer__contact a:hover { color: var(--accent); } /* ---- Experience detail subpages ---------------------------------------- */ .back-link { display: inline-flex; align-items: center; gap: 8px; margin: 32px 0 8px; color: var(--text-muted); font-size: 0.92rem; font-weight: 600; } .back-link::before { content: "←"; transition: transform var(--transition); } .back-link:hover { color: var(--accent); text-decoration: none; } .back-link:hover::before { transform: translateX(-3px); } .page-header { padding: 16px 0 8px; } .page-header__company { font-size: 2.2rem; margin-bottom: 0.1em; } .page-header__role { color: var(--accent); font-weight: 600; font-size: 1.1rem; margin: 0 0 10px; } .page-header__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: var(--text-muted); font-size: 0.95rem; } .page-header__meta span { display: inline-flex; align-items: center; gap: 6px; } .detail-list { margin: 0; padding-left: 1.2em; color: var(--text-muted); } .detail-list li { margin-bottom: 10px; } .detail-list li::marker { color: var(--accent); } .detail-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .detail-project { padding: 22px 24px; } .detail-project__title { font-size: 1.1rem; margin-bottom: 8px; } .detail-project__desc { margin: 0; color: var(--text-muted); font-size: 0.95rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } /* Keep all content visible when motion is reduced */ .reveal { opacity: 1; transform: none; } .hero__photo, .hero__name, .hero__role, .hero__tagline { animation: none; } }