/* ===================================================== GOOGLE FONTS "DM Sans" for regular body text, "Space Grotesk" for headings and bold titles. ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); /* ===================================================== DESIGN SYSTEM (CSS VARIABLES) Every color, radius, and transition speed used anywhere in this file is defined once here. If you ever want to change the brand color, you only need to edit ONE line below, instead of hunting through the whole file. This block holds the LIGHT MODE (default) values. The dark mode values are in the next block down. ===================================================== */ :root { /* ---- Text & background colors ---- */ --color-text: #162033; /* main text color */ --color-text-muted: #66728a; /* lighter text, used for paragraphs */ --color-background: #ffffff; /* page background */ --color-background-soft: #f5f7fc; /* soft background for alternating sections */ --color-border: #e6eaf1; /* light border color */ --color-card-background: #ffffff; /* background for cards (timeline, project, skill) */ /* ---- Brand colors ---- */ --color-primary: #5b58e8; /* main brand color, used for buttons and links */ --color-primary-hover: #4742d0; /* primary color on hover */ --color-primary-tint: #eeedff; /* very light brand tint, used behind icons/tags */ --color-primary-border: #cfcdf7; /* light brand border, used on outline buttons */ --color-primary-ring: #e4e3ff; /* ring around the timeline dot */ --color-primary-line: #d9ddf5; /* the vertical timeline line */ --color-selection: #deddff; /* background of highlighted/selected text */ --color-accent: #32bdb7; /* teal accent, used for the contact button */ --color-accent-hover: #58d9d3; /* teal accent on hover */ /* ---- Specific surface colors ---- */ --color-navbar-background: rgba(255, 255, 255, 0.88); --color-footer-background: #101725; --color-footer-text: #aab4c7; --color-contact-background: #162033; --color-contact-text: #b6c0d3; /* ---- Shadows ---- */ --shadow-soft: 0 18px 45px rgba(23, 32, 51, 0.09); --shadow-navbar: 0 4px 24px rgba(23, 32, 51, 0.06); --shadow-button: 0 10px 22px rgba(91, 88, 232, 0.2); --shadow-back-to-top: 0 8px 20px rgba(91, 88, 232, 0.3); --shadow-mobile-menu: 20px 0 45px rgba(23, 32, 51, 0.12); /* ---- Border radius scale ---- */ --radius-small: 4px; /* tags */ --radius-medium: 8px; /* buttons */ --radius-large: 12px; /* timeline card, project icon box */ --radius-xlarge: 16px; /* project card, about photo */ --radius-round: 50%; /* circles */ /* ---- Section spacing ---- */ --spacing-section: 98px; --spacing-section-mobile: 76px; /* ---- Transition speeds ---- */ --transition-fast: 0.2s ease; --transition-medium: 0.3s ease; --transition-slow: 0.6s ease; /* ---- Fonts ---- */ --font-body: 'DM Sans', sans-serif; --font-heading: 'Space Grotesk', sans-serif; } /* ===================================================== DARK MODE COLORS When script.js adds data-theme="dark" to the element, every variable below OVERRIDES the light mode value above. Because every component in this file reads its colors from these variables (instead of hardcoding colors), the entire site re-colors itself automatically. No component-specific dark mode rules are needed anywhere else in this file. ===================================================== */ :root[data-theme="dark"] { --color-text: #eef1f8; --color-text-muted: #9aa5bd; --color-background: #0f1420; --color-background-soft: #161d2e; --color-border: #2a3348; --color-card-background: #161d2e; --color-primary: #8481ff; --color-primary-hover: #a19eff; --color-primary-tint: #232a45; --color-primary-border: #3a4468; --color-primary-ring: #2c3358; --color-primary-line: #2a3358; --color-selection: #34306b; --color-accent: #3ddad2; --color-accent-hover: #63e6df; --color-navbar-background: rgba(15, 20, 32, 0.88); --color-footer-background: #090c14; --color-footer-text: #7f8aa3; --color-contact-background: #090c14; --color-contact-text: #97a2ba; --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.45); --shadow-navbar: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-button: 0 10px 22px rgba(132, 129, 255, 0.25); --shadow-back-to-top: 0 8px 20px rgba(132, 129, 255, 0.35); --shadow-mobile-menu: 20px 0 45px rgba(0, 0, 0, 0.5); } /* ===================================================== RESET & GLOBAL DEFAULTS ===================================================== */ * { box-sizing: border-box; /* padding/border are included in an element's width */ margin: 0; padding: 0; /* Smoothly fade colors when the theme changes, instead of switching instantly. This one rule handles the whole site's dark mode transition — no need to repeat it on every single component below. */ transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium); } html { scroll-behavior: smooth; /* smooth scrolling when jumping to a section */ } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text); background: var(--color-background); overflow-x: hidden; /* prevents an accidental horizontal scrollbar */ } /* Links look like normal text unless a specific class says otherwise */ a { color: inherit; text-decoration: none; } /* Prevent the page from scrolling behind the open mobile menu */ body.menu-open { overflow: hidden; } ::selection { background: var(--color-selection); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 99px; } /* Shared "centered row, max 1100px wide" layout used by the navbar, the hero section, and every other section. Written as one shared rule instead of three separate ones so the width never accidentally drifts out of sync between them. */ .navbar-container, .hero-container, .section-container { width: min(1100px, 90%); margin: auto; } section { padding: var(--spacing-section) 0; } /* ===================================================== REUSABLE BUTTON STYLES .button holds the shared shape (padding, radius, font). .button-primary / .button-outline / .button-accent add the color on top. This means adding a 4th button color in the future only needs one small new class. ===================================================== */ .button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 19px; border: 1px solid transparent; border-radius: var(--radius-medium); font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: var(--transition-fast); } .button-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .button-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-button); } .button-outline { background: transparent; border-color: var(--color-primary-border); color: var(--color-primary); } .button-outline:hover { background: var(--color-primary-tint); border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: none; } .button-accent { background: var(--color-accent); border-color: var(--color-accent); color: #102d36; } .button-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-button); } .button-group { display: flex; gap: 12px; flex-wrap: wrap; /* buttons wrap onto a new line on small screens */ } /* ===================================================== SECTION TITLES Shared heading style used at the top of every section. ===================================================== */ .section-title { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 48px; text-align: center; font: 700 clamp(2rem, 4vw, 2.55rem) var(--font-heading); letter-spacing: -0.06em; } /* Small colored underline below each section title. This is a decorative-only pseudo-element: it is a single flat-color bar with no complex shape, so keeping it as ::after (instead of adding an extra empty to every section in the HTML) keeps the markup cleaner. */ .section-title::after { content: ''; width: 38px; height: 3px; border-radius: 9px; background: var(--color-primary); } .section-description { max-width: 620px; margin: -33px auto 43px; color: var(--color-text-muted); text-align: center; } /* ===================================================== NAVIGATION BAR ===================================================== */ .navbar { position: fixed; /* stays at the top of the screen while scrolling */ z-index: 10; /* keeps it above other page content */ width: 100%; padding: 21px 0; transition: padding var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } /* Added by script.js once the user scrolls down more than 30px */ .navbar.navbar-sticky { padding: 12px 0; background: var(--color-navbar-background); box-shadow: var(--shadow-navbar); backdrop-filter: blur(14px); /* blurs whatever is behind the navbar */ } .navbar-container { display: flex; align-items: center; justify-content: space-between; } .navbar-logo { font: 700 1.45rem var(--font-heading); letter-spacing: -0.07em; } .navbar-links { display: flex; align-items: center; gap: 25px; list-style: none; /* removes the bullet points from the