/* ========================================================================== Theme tokens Bootstrap 5.3 already re-themes forms/alerts/modal/navbar-toggler/btn-close when [data-bs-theme="dark"] is set on — we key our own tokens off the same attribute instead of inventing a second one. ========================================================================== */ :root { --accent: #6d28d9; --accent-2: #0891b2; --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2)); --accent-contrast: #ffffff; --surface: #ffffff; --shadow: 0 10px 30px -10px rgba(109, 40, 217, 0.18); --nav-height: 4.25rem; --font-heading: "Sora", system-ui, sans-serif; } [data-bs-theme="dark"] { --bs-body-bg: #0a0a0f; --accent: #a78bfa; --accent-2: #22d3ee; --accent-contrast: #0f1117; --surface: #14141c; --shadow: 0 10px 30px -10px rgba(167, 139, 250, 0.35); } /* ========================================================================== Base ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; } section[id] { scroll-margin-top: var(--nav-height); } a { color: var(--accent); } /* ========================================================================== Nav ========================================================================== */ .site-nav { position: sticky; top: 0; z-index: 1030; min-height: var(--nav-height); background-color: color-mix(in srgb, var(--bs-body-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--bs-border-color); } .site-nav .logo { height: 40px; width: auto; } .nav-link-custom { color: var(--bs-body-color); font-weight: 600; text-decoration: none; padding: 0.5rem 0.9rem; } .nav-link-custom:hover { color: var(--accent); } .theme-toggle-btn { background: none; border: 1px solid var(--bs-border-color); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--bs-body-color); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .theme-toggle-btn:hover { background-color: var(--bs-tertiary-bg); transform: rotate(15deg); } .theme-toggle-btn .fa-sun { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .fa-sun { display: inline; } [data-bs-theme="dark"] .theme-toggle-btn .fa-moon { display: none; } /* ========================================================================== Buttons (custom accent variants — Bootstrap's .btn-primary bakes fixed hex colors at build time, so it doesn't react to --accent; these do) ========================================================================== */ .btn-accent, .btn-outline-accent { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.5rem; border-radius: 0.65rem; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease, color 0.15s ease; border: 1.5px solid transparent; } /* Solid fill stays flat --accent rather than the two-tone gradient: white button text over the lighter end of the gradient would fail contrast in light mode. The gradient is reserved for decorative/large-text surfaces (blobs, hero name, card accent strip) where that isn't a concern. */ .btn-accent { background-color: var(--accent); color: var(--accent-contrast); } .btn-accent:hover { filter: brightness(1.1); color: var(--accent-contrast); transform: translateY(-2px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-outline-accent { background: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color); } .btn-outline-accent:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 35%, transparent); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; min-height: 82vh; display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; } .hero__blob { position: absolute; border-radius: 50%; background: var(--accent-gradient); filter: blur(90px); opacity: 0.35; pointer-events: none; } [data-bs-theme="dark"] .hero__blob { opacity: 0.28; } .hero__blob--1 { width: 32rem; height: 32rem; top: -10rem; left: -8rem; } .hero__blob--2 { width: 26rem; height: 26rem; bottom: -12rem; right: -8rem; } .hero__blob--3 { width: 18rem; height: 18rem; top: 15%; left: 58%; opacity: 0.2; } .hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; font-weight: 700; color: var(--accent); } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; margin: 0; } .hero h1 .accent-text { color: var(--accent); } @supports (background-clip: text) or (-webkit-background-clip: text) { .hero h1 .accent-text { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .hero p.lead { max-width: 38rem; color: var(--bs-secondary-color); font-size: 1.15rem; margin: 0; } .hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } /* ========================================================================== Section headings (shared by About / Projects / Skills / Contact) ========================================================================== */ .section-heading { text-align: center; margin-bottom: 2.25rem; } .section-alt { background-color: var(--bs-tertiary-bg); } .section-heading .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--accent); } .section-heading h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0.25rem 0 0; } /* ========================================================================== About ========================================================================== */ .about-card { background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: var(--shadow); overflow: hidden; } .about-card img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } /* ========================================================================== Social links ========================================================================== */ .social-link { text-decoration: none; display: inline-block; margin: 0 10px; } .github-link i { font-size: 24px; color: #333; transition: color 0.3s ease; } [data-bs-theme="dark"] .github-link i { color: #e5e7eb; } .github-link:hover i { color: #6e5494; } .linkedin-link i { font-size: 24px; color: #0077b5; transition: color 0.3s ease; } .linkedin-link:hover i { color: #0a66c2; } .email-link i { font-size: 24px; color: #9a1e12; transition: color 0.3s ease; } .email-link:hover i { color: #ff2c07; } /* ========================================================================== Projects grid ========================================================================== */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; } .project-card { position: relative; background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .project-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-gradient); } .project-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .project-card__image-wrap { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--bs-tertiary-bg); } .project-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .project-card:hover .project-card__image-wrap img { transform: scale(1.05); } .project-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.6rem; } .project-card__title { font-size: 1.15rem; margin: 0; } .project-card__desc { color: var(--bs-secondary-color); font-size: 0.925rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .project-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.4rem; } .tech_tag { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .project-card__actions { display: flex; gap: 0.6rem; padding: 0 1.25rem 1.25rem; } .project-card__actions .btn-accent, .project-card__actions .btn-outline-accent { flex: 1; padding: 0.55rem 1rem; font-size: 0.875rem; } /* ========================================================================== Skills ========================================================================== */ .skills-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .skill-chip { display: flex; align-items: center; gap: 0.6rem; background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 0.6rem 1.1rem; font-weight: 600; box-shadow: var(--shadow); } .skill-chip i { color: var(--accent); font-size: 1.1rem; } /* ========================================================================== Contact ========================================================================== */ .contact-card { background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: var(--shadow); padding: 2rem; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent); } /* ========================================================================== Project preview modal ========================================================================== */ #projectPreviewBody iframe { width: 100%; height: 70vh; border: 0; display: block; } #projectPreviewBody img { width: 100%; max-height: 70vh; object-fit: contain; background-color: var(--bs-tertiary-bg); display: block; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .projects-grid { grid-template-columns: 1fr; } .contact-card { padding: 1.25rem; } }