/* ================================================================= TABLE OF CONTENTS 1. Theme variables (EDIT HERE to re-theme the site) 2. Reset & base 3. Typography helpers 4. Layout utilities 5. Buttons & badges 6. Header / Navigation 7. Hero / About 8. Section headers & signal-trace signature element 9. Experience timeline 10. Education list 11. Cards / Projects grid 12. Publications 13. Gallery 14. Contact 15. Footer 16. Scroll-reveal animation 17. Responsive breakpoints ================================================================= */ /* ============================================================ 1. THEME VARIABLES To re-theme the entire site, change ONLY the three --color-primary* values below. Blue/White -> #1D4ED8 / #1E3A8A / #DBEAFE Green/White -> #15803D / #14532D / #DCFCE7 Everything else (buttons, badges, links, the signal-trace signature, focus rings, etc.) derives from these variables. ============================================================ */ :root { /* ---- Brand accent (cool red, default theme) ---- */ --color-primary: #d7263d; /* main accent */ --color-primary-dark: #a11d2c; /* hover / pressed states */ --color-primary-light: #f8dadd; /* tints, badges, soft backgrounds */ /* ---- Neutrals / "White" half of the theme ---- */ --color-bg: #ffffff; --color-surface: #f8f6f5; --color-surface-alt: #f1ecec; --color-text: #1c1b1e; --color-text-muted: #5c5a5d; --color-border: #e9e3e2; /* ---- Fixed semantic tokens (rarely change) ---- */ --color-on-primary: #ffffff; --color-success: #1d8a4a; --color-danger: #d7263d; /* ---- Typography ---- */ --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem; /* ---- Shape / elevation ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(20, 16, 16, 0.06); --shadow-md: 0 8px 24px rgba(20, 16, 16, 0.08); --shadow-lg: 0 20px 48px rgba(20, 16, 16, 0.12); /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 160ms var(--ease); --transition-base: 260ms var(--ease); /* ---- Layout ---- */ --header-h: 72px; --container-w: 1140px; --z-header: 100; } /* Dark mode: same variable names, different values. Toggled via JS adding/removing `dark-mode` on . */ body.dark-mode { --color-primary: #ff5468; --color-primary-dark: #ff8a95; --color-primary-light: #3a1620; --color-bg: #121113; --color-surface: #19181c; --color-surface-alt: #211f24; --color-text: #f2f0ef; --color-text-muted: #a5a2a6; --color-border: #2c2a2f; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5); } /* mine */ /* ============================================================ 1.5 GTKWAVE DIGITAL BACKGROUND ============================================================ */ .gtkwave-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background-color: transparent; pointer-events: none; opacity: 0.12; /* Subtle enough to keep your text readable */ transition: opacity var(--transition-base); } .wave-canvas { /* Give it an extra 800px buffer to pan through smoothly */ width: calc(100vw + 800px); height: 100vh; /* Adjust '30s' to make the simulation run faster or slower */ animation: panWave 30s linear infinite; } /* Tie the stroke colors directly to your portfolio's theme */ .wave-group { stroke: var(--color-primary); stroke-width: 1.5; } .wave-grid { stroke: var(--color-text-muted); stroke-width: 1.2; opacity: 0.4; } /* Seamless infinite scroll */ @keyframes panWave { 0% { transform: translateX(0); } 100% { transform: translateX(-800px); } /* Exactly one pattern width */ } /* Adapt for dark mode — makes the traces pop a bit more against black */ body.dark-mode .gtkwave-bg { opacity: 0.25; } /* Disable animation for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .wave-canvas { animation: none; } } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); transition: background-color var(--transition-base), color var(--transition-base); } img { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; letter-spacing: -0.01em; } p { margin: 0; } .icon { flex-shrink: 0; } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -999px; top: auto; } .skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 999; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ 3. TYPOGRAPHY HELPERS ============================================================ */ .eyebrow { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-primary); margin: 0 0 var(--space-2); letter-spacing: 0.04em; } .section-kicker { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 var(--space-2); } .section-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 600; margin-bottom: var(--space-6); } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-9); scroll-margin-top: var(--header-h); } /* .section--alt { background: var(--color-surface); } */ .section--alt { /* We removed the blur so the crisp 1.5px lines survive */ background: color-mix(in srgb, var(--color-surface) 15%, transparent); } .grid { display: grid; gap: var(--space-5); } /* ============================================================ 5. BUTTONS & BADGES ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 0.8rem 1.5rem; border-radius: var(--radius-pill); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); } .btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .badge { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.78rem; background: var(--color-primary-light); color: var(--color-primary-dark); } .badge--mono { font-family: var(--font-mono); } .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.25rem 0.65rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--color-primary); transition: gap var(--transition-fast), color var(--transition-fast); } .link-arrow:hover { gap: 0.55rem; color: var(--color-primary-dark); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text); transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .icon-btn:hover { background: var(--color-surface-alt); color: var(--color-primary); transform: translateY(-2px); } .icon-btn--lg { width: 46px; height: 46px; } /* ============================================================ 6. HEADER / NAVIGATION ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: var(--z-header); background: color-mix(in srgb, var(--color-bg) 40%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-top: 4px solid var(--color-primary); /* <-- ADD THIS LINE */ transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .nav { height: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; } .nav__brand::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--color-primary); } .nav__links { display: flex; gap: var(--space-6); } .nav__link { font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); position: relative; padding-block: var(--space-2); transition: color var(--transition-fast); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-fast); } .nav__link:hover, .nav__link.is-active { color: var(--color-text); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: var(--space-2); } /* Theme toggle: show sun in dark mode (click to go light), moon in light mode (click to go dark) */ .icon--moon { display: block; } .icon--sun { display: none; } body.dark-mode .icon--moon { display: none; } body.dark-mode .icon--sun { display: block; } .nav__burger { display: none; } .icon--close { display: none; } .nav__burger.is-open .icon--menu { display: none; } .nav__burger.is-open .icon--close { display: block; } /* ============================================================ 7. HERO / ABOUT ============================================================ */ .hero { padding-top: calc(var(--header-h) + var(--space-8)); } .hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; } /* .hero__name { font-size: clamp(2.4rem, 1.6rem + 4vw, 3.8rem); font-weight: 700; margin-bottom: var(--space-3); } */ /* Update this in style.css */ /* Update this in style.css */ .hero__name { /* Reduced clamp values so the name scales down nicely on smaller screens */ font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem); font-weight: 800; margin-bottom: var(--space-3); letter-spacing: -0.02em; display: flex; align-items: center; flex-wrap: wrap; /* Prevents the cursor from breaking weirdly if it ever does go to a new line on mobile */ } #typed-text { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* These two lines fix the clipped 'g' */ padding-bottom: 0.1em; line-height: 1.2; } /* Styles and animates the cursor */ .blinking-cursor { color: var(--color-primary); -webkit-text-fill-color: var(--color-primary); /* Forces it to stay solid red */ font-weight: 300; /* Keeps the cursor looking like a sleek line */ margin-left: 2px; animation: blink 1s step-end infinite; } /* The blink animation */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* */ .hero__role { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); } .hero__bio { max-width: 46ch; color: var(--color-text-muted); margin-bottom: var(--space-6); } .hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; } .hero__media { display: flex; justify-content: center; } .hero__frame { position: relative; width: min(320px, 100%); aspect-ratio: 1; } .hero__ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 120 45; animation: spin 40s linear infinite; } /* Add this right below the .hero__ring block in style.css */ .hero__frame:hover .hero__ring { /* Speeds up the spin from 40s to 8s */ animation-duration: 2s; stroke-width: 2; } @media (prefers-reduced-motion: reduce) { .hero__ring { animation: none; } } .photo-placeholder { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(155deg, var(--color-surface-alt), var(--color-surface)); border: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 0.85rem; text-align: center; } .photo-placeholder--sm { border-radius: var(--radius-md); aspect-ratio: 1; } /* ============================================================ 8. SIGNATURE ELEMENT — the "signal trace" A hand-drawn sine wave standing in for an RF signal, used as an accent underline beside the hero role line. It draws itself in on load like a trace appearing on a scope. ============================================================ */ .signal-divider { display: inline-flex; width: 64px; height: 16px; } .signal-trace { width: 100%; height: 100%; overflow: visible; } .signal-trace path { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: trace 1.6s var(--ease) 0.3s forwards; } @keyframes trace { to { stroke-dashoffset: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .signal-trace path { animation: none; stroke-dashoffset: 0; } } /* ============================================================ 9. CARDS (shared by experience / projects) ============================================================ */ .card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .card__title { font-size: 1.15rem; font-weight: 600; } .card__subtitle { color: var(--color-text-muted); margin-top: var(--space-1); margin-bottom: var(--space-4); font-size: 0.92rem; } .card__desc { color: var(--color-text-muted); font-size: 0.92rem; } .card__list { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-muted); font-size: 0.92rem; } .card__list li { padding-left: var(--space-4); position: relative; } .card__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); } /* ============================================================ 9b. EXPERIENCE TIMELINE ============================================================ */ .timeline { position: relative; padding-left: var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); } .timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); } .timeline__item { position: relative; } .timeline__marker { position: absolute; left: calc(-1 * var(--space-7) + 4px); top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2.5px solid var(--color-primary); } /* ============================================================ 10. EDUCATION LIST (LinkedIn-style) ============================================================ */ .edu-list { display: flex; flex-direction: column; gap: var(--space-6); } .edu-item { display: flex; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .edu-item:last-child { border-bottom: none; padding-bottom: 0; } .edu-item__logo { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-sm); /* background: var(--color-primary-light); */ background: white; color: var(--color-primary-dark); font-family: var(--font-mono); font-weight: 600; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; } .edu-item__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .edu-item__degree { font-size: 1.1rem; font-weight: 600; } .edu-item__school { color: var(--color-text); font-weight: 500; margin-top: var(--space-1); } .edu-item__grade { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-1); } .edu-item__desc { color: var(--color-text-muted); font-size: 0.92rem; margin-top: var(--space-3); max-width: 60ch; } /* ============================================================ 11. PROJECTS GRID ============================================================ */ .grid--projects { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-bottom: 4px solid var(--color-primary); } .project-card__media { height: 150px; background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface)); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .project-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .project-card__links { margin-top: auto; padding-top: var(--space-3); } /* ============================================================ 12. PUBLICATIONS — distinct "super cool" treatment ============================================================ */ .pub-list { display: flex; flex-direction: column; gap: var(--space-5); } .pub-card { background: var(--color-bg); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-6); transition: transform var(--transition-base), box-shadow var(--transition-base); } .pub-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); } .pub-card__venue { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .pub-card__venue-name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--color-primary-light); color: var(--color-primary-dark); padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); } .pub-card__year { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-muted); } .pub-card__title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-2); } .pub-card__authors { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-3); } .pub-card__abstract { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: var(--space-4); max-width: 70ch; } .pub-card__links { display: flex; gap: var(--space-5); } /* ============================================================ 13. GALLERY ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); } .gallery-item { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .gallery-item .photo-placeholder--sm { transition: transform var(--transition-base); } .gallery-item:hover .photo-placeholder--sm { transform: scale(1.03); } .gallery-item figcaption { font-size: 0.82rem; color: var(--color-text-muted); text-align: center; } /* ============================================================ 14. CONTACT ============================================================ */ .contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: start; } .contact__text { color: var(--color-text-muted); max-width: 42ch; margin-bottom: var(--space-5); } .contact__social { display: flex; gap: var(--space-3); } .contact-form { display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-bg); /* Keeps the subtle border on the left and right */ border: 1px solid var(--color-border); /* Adds the thick red accent lines to the top and bottom */ border-top: 4px solid var(--color-primary); border-bottom: 4px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-6); } .form-row { display: flex; flex-direction: column; gap: var(--space-2); } .form-row label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } .form-row input, .form-row textarea { font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); resize: vertical; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .form-row input:focus, .form-row textarea:focus { border-color: var(--color-primary); background: var(--color-bg); } .form-submit { justify-content: center; } .form-status { font-size: 0.9rem; min-height: 1.2em; } .form-status.is-success { color: var(--color-success); } .form-status.is-error { color: var(--color-danger); } /* mine */ /* ============================================================ 14b. CAPTCHA MODAL ============================================================ */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .modal.is-open { opacity: 1; visibility: visible; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal__content { position: relative; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); transform: translateY(20px); transition: transform 0.3s var(--ease); z-index: 1; } .modal.is-open .modal__content { transform: translateY(0); } .modal__close { position: absolute; top: var(--space-3); right: var(--space-3); } .modal__title { font-size: 1.25rem; margin-bottom: var(--space-2); } .modal__desc { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: var(--space-4); } .captcha-box { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); background: var(--color-surface); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .captcha-q { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; flex: 1; } .captcha-input { width: 70px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 1.1rem; text-align: center; background: var(--color-bg); color: var(--color-text); transition: border-color var(--transition-fast); } .captcha-input:focus { border-color: var(--color-primary); outline: none; } /* ============================================================ 15. FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-5); } .site-footer__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: 0.88rem; } /* ============================================================ 16. SCROLL-REVEAL ANIMATION Elements with .reveal fade/slide up once, the first time they cross into the viewport (handled in script.js). ============================================================ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ 17. RESPONSIVE BREAKPOINTS ============================================================ */ /* Tablet */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; max-width: 220px; margin-inline: auto; } .hero__frame { width: 200px; } .contact__grid { grid-template-columns: 1fr; } } /* Mobile: collapse nav into hamburger panel */ @media (max-width: 760px) { .nav__burger { display: inline-flex; } .nav__links { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--transition-base); /* added */ /* ADD THESE TWO BLOCKS: */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: var(--z-header); background: color-mix(in srgb, var(--color-bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-top: 4px solid var(--color-primary); /* ADD TRANSFORM TO THIS TRANSITION LINE: */ transition: transform 0.3s ease, border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .site-header.is-hidden { /* Forces the header completely off-screen */ transform: translateY(-100%) !important; } } .nav__links.is-open { max-height: 70vh; visibility: visible; overflow-y: auto; } .nav__links li { width: 100%; } .nav__link { display: block; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .nav__link::after { display: none; } .section { padding-block: var(--space-7); } .hero { padding-top: calc(var(--header-h) + var(--space-7)); } .timeline { padding-left: var(--space-6); } .edu-item { flex-direction: column; } } @media (max-width: 480px) { .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { justify-content: center; } .pub-card__venue { flex-direction: column; align-items: flex-start; } } /* mine */ /* Add this to style.css */ .profile-photo { width: 100%; height: 100%; object-fit: cover; /* Prevents the image from stretching/squishing */ border-radius: 50%; /* Makes it a perfect circle */ position: relative; z-index: 2; /* Keeps it layered correctly above the background */ } /* Add this in style.css */ .edu-logo-img { width: 100%; height: 100%; object-fit: contain; /* Ensures the logo scales correctly without getting squished */ padding: 6px; /* Gives the logo a little breathing room inside the colored box */ } /* ============================================================ 2.5 PRELOADER ============================================================ */ .preloader { position: fixed; inset: 0; z-index: 9999; /* Keeps it on top of absolutely everything */ background-color: #ffffff; /* Solid white background as requested */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); /* Smooth fade-out transition */ transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease); } /* We will add this class with JavaScript to hide the screen */ .preloader.is-hidden { opacity: 0; visibility: hidden; } /* Replace the .preloader__ring block in style.css with this: */ .preloader__waveform { display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; /* Gives the bars room to grow */ } .preloader__waveform .bar { width: 5px; height: 12px; background-color: var(--color-primary); border-radius: var(--radius-pill); /* The cubic-bezier makes the bounce look very fluid and organic */ animation: waveform 1.2s cubic-bezier(0.85, 0, 0.15, 1) infinite; } /* Staggering the animation delay creates the wave effect */ .preloader__waveform .bar:nth-child(1) { animation-delay: 0.0s; } .preloader__waveform .bar:nth-child(2) { animation-delay: 0.15s; } .preloader__waveform .bar:nth-child(3) { animation-delay: 0.3s; } .preloader__waveform .bar:nth-child(4) { animation-delay: 0.45s; } .preloader__waveform .bar:nth-child(5) { animation-delay: 0.6s; } /* The animation that stretches the bars */ @keyframes waveform { 0%, 100% { height: 12px; opacity: 0.3; } 50% { height: 48px; opacity: 1; } } .preloader__text { font-family: var(--font-mono); color: var(--color-text-muted); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ends */ /* Add this to style.css */ .project-img { width: 100%; height: 100%; object-fit: cover; /* This acts like a background-size: cover, clipping the edges if necessary so it never stretches */ display: block; } /* Add this to style.css for the Gallery images */ .gallery-img { width: 100%; aspect-ratio: 1; /* Forces the perfect 1:1 square ratio */ object-fit: cover; /* Prevents the image from squishing or stretching */ border-radius: var(--radius-md); /* Applies your theme's rounded corners */ transition: transform var(--transition-base); /* Smooth animation */ display: block; } /* Re-adds the slight zoom effect on hover */ .gallery-item:hover .gallery-img { transform: scale(1.03); }